/* Tréo web tokens per design.md §12.2 — semantic tokens only in markup;
   primitives (underscore-prefixed) stay in this file. */

:root {
  /* Primitives (§2.1) */
  --_purple-100: #F3E8F4;
  --_purple-200: #E6D0E8;
  --_purple-300: #D4ADD8;
  --_purple-500: #7E4A81;
  --_purple-600: #653368;
  --_purple-700: #502251;
  --_purple-800: #3D1A3E;
  --_purple-900: #2E0F30;
  --_orange-50: #FFF6EB;
  --_orange-500: #FF8C00;
  --_orange-700: #9C5200;
  --_neutral-0: #FFFFFF;
  --_neutral-50: #F8F8F8;
  --_neutral-100: #F0F0F0;
  --_neutral-200: #E4E4E4;
  --_neutral-300: #D1D1D1;
  --_neutral-400: #8F8F8F;
  --_neutral-500: #757575;
  --_neutral-600: #5C5C5C;
  --_neutral-900: #171717;
  --_success-50: #EAF6EB;
  --_success-700: #116619;
  --_error-50: #FDECEC;
  --_error-500: #B00020;

  /* Semantic tokens (§2.3) */
  --treo-surface-base: var(--_neutral-0);
  --treo-surface-sunken: var(--_neutral-50);
  --treo-surface-raised: var(--_neutral-0);
  --treo-surface-inverse: var(--_neutral-900);
  --treo-surface-brand: var(--_purple-700);
  --treo-surface-brand-hover: var(--_purple-600);
  --treo-surface-brand-pressed: var(--_purple-800);
  --treo-surface-brand-subtle: var(--_purple-100);
  --treo-surface-brand-container: var(--_purple-200);
  --treo-surface-accent: var(--_orange-500);
  --treo-surface-accent-subtle: var(--_orange-50);
  --treo-surface-success-subtle: var(--_success-50);
  --treo-surface-error-subtle: var(--_error-50);
  --treo-surface-skeleton: var(--_neutral-100);
  --treo-surface-pressed: var(--_neutral-100);

  --treo-content-primary: var(--_neutral-900);
  --treo-content-secondary: var(--_neutral-600);
  --treo-content-tertiary: var(--_neutral-500);
  --treo-content-disabled: var(--_neutral-400);
  --treo-content-brand: var(--_purple-700);
  --treo-content-accent: var(--_orange-700);
  --treo-content-success: var(--_success-700);
  --treo-content-error: var(--_error-500);
  --treo-content-on-brand: var(--_neutral-0);
  --treo-content-on-accent: var(--_neutral-0);
  --treo-content-inverse: var(--_neutral-0);

  --treo-border-subtle: var(--_neutral-200);
  --treo-border-default: var(--_neutral-300);
  --treo-border-strong: var(--_neutral-400);
  --treo-border-brand: var(--_purple-700);
  --treo-border-focus: var(--_purple-500);
  --treo-border-focus-inverse: var(--_orange-500);

  --treo-brand-light: var(--_purple-300);

  /* Marketing-only gradient (§12.2) */
  --treo-gradient-marketing: linear-gradient(180deg, var(--_purple-700), var(--_purple-900));

  /* Spacing (§4.1) */
  --treo-space-xxs: 4px;
  --treo-space-xs: 8px;
  --treo-space-s: 12px;
  --treo-space-m: 16px;
  --treo-space-l: 20px;
  --treo-space-xl: 24px;
  --treo-space-xxl: 32px;
  --treo-space-xxxl: 48px;
  --treo-space-xxxxl: 64px;

  /* Radius (§5.1) */
  --treo-radius-xs: 8px;
  --treo-radius-sm: 12px;
  --treo-radius-md: 16px;
  --treo-radius-lg: 20px;
  --treo-radius-xl: 28px;
  --treo-radius-full: 999px;

  /* Type families (§3.1) */
  --treo-font-display: "Merriweather", Georgia, "Times New Roman", serif;
  --treo-font-sans: "Manrope", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Motion (§6.1) */
  --treo-motion-instant: 120ms;
  --treo-motion-quick: 200ms;
  --treo-motion-standard: 320ms;
  --treo-motion-deliberate: 480ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--treo-font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--treo-content-primary);
  background: var(--treo-surface-base);
  -webkit-font-smoothing: antialiased;
}

/* Type scale (§3.2) as utility classes, rem off 16px root */

.t-display-lg { font-family: var(--treo-font-display); font-weight: 800; font-size: 2.75rem; line-height: 3.25rem; }   /* 44/52 */
.t-display-md { font-family: var(--treo-font-display); font-weight: 800; font-size: 2.25rem; line-height: 2.75rem; }   /* 36/44 */
.t-display-sm { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.875rem; line-height: 2.375rem; } /* 30/38 */
.t-headline-lg { font-family: var(--treo-font-sans); font-weight: 700; font-size: 2rem; line-height: 2.5rem; font-variant-numeric: tabular-nums; } /* 32/40 — the money slot */
.t-headline-md { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.75rem; line-height: 2.25rem; }  /* 28/36 */
.t-headline-sm { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.5rem; line-height: 2rem; }      /* 24/32 */
.t-title-lg { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.75rem; }     /* 20/28 */
.t-title-md { font-family: var(--treo-font-display); font-weight: 800; font-size: 1.0625rem; line-height: 1.5rem; }    /* 17/24 */
/* Marketing lede — one step above bodyLarge for standalone section copy. */
.t-body-xl { font-family: var(--treo-font-sans); font-weight: 500; font-size: 1.125rem; line-height: 1.75rem; }        /* 18/28 */
.t-body-lg { font-family: var(--treo-font-sans); font-weight: 500; font-size: 1rem; line-height: 1.5rem; }             /* 16/24 */
.t-body-md { font-family: var(--treo-font-sans); font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; }        /* 14/20 */
.t-body-sm { font-family: var(--treo-font-sans); font-weight: 500; font-size: 0.75rem; line-height: 1rem; }            /* 12/16 */
.t-label-lg { font-family: var(--treo-font-sans); font-weight: 600; font-size: 0.875rem; line-height: 1rem; }          /* 14/16 */
.t-label-md { font-family: var(--treo-font-sans); font-weight: 600; font-size: 0.75rem; line-height: 1rem; }           /* 12/16 */
.t-label-sm { font-family: var(--treo-font-sans); font-weight: 700; font-size: 0.6875rem; line-height: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; } /* 11/14 overline */

.t-tabular { font-variant-numeric: tabular-nums; }

/* Header — logo left, app CTA right, faint divider below */

.rates-header {
  border-bottom: 1px solid var(--treo-border-subtle);
}

.rates-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--treo-space-m) var(--treo-space-xl);
}

.rates-header-logo {
  display: inline-flex;
  align-items: center;
}

.rates-header-logo img {
  display: block;
}

.rates-get-app {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--treo-space-l);
  border-radius: var(--treo-radius-full);
  background: var(--treo-surface-accent);
  color: var(--treo-content-on-accent);
  font-family: var(--treo-font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--treo-motion-instant) ease-out;
}

.rates-get-app:active {
  background: var(--treo-content-accent);
}

/* Page scaffold — phone-first, single column, 24px margins (§4.4) */

.rates-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--treo-space-xxl) var(--treo-space-xl) var(--treo-space-xxl);
}

/* Converter — the §9.2 disclosure ladder: amount, rate + fee, amount that
   lands, delivery method and speed. */

/* Same 420px centered box as the keypad and CTA, so its left edge aligns
   with theirs; contents stay left-aligned. */
.rates-summary {
  max-width: 420px;
  margin: 0 auto;
}

.rates-amount-label {
  margin: 0;
  color: var(--treo-content-secondary);
}

.rates-amount-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--treo-space-s);
  margin-top: var(--treo-space-xs);
}

.rates-flag {
  display: block;
  border-radius: var(--treo-radius-full);
}

.rates-amount {
  margin: 0;
  color: var(--treo-content-brand);
}

/* The editable send amount reads regular; only the landed XAF amount is bold. */
.rates-amount-send {
  font-weight: 400;
}

/* Blinking caret — signals the amount is waiting for keypad input. */
.rates-caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: var(--treo-space-xxs);
  vertical-align: -0.08em;
  border-radius: var(--treo-radius-full);
  background: var(--treo-content-brand);
  animation: rates-caret-blink 1.1s steps(1) infinite;
}

@keyframes rates-caret-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rates-caret {
    animation: none;
  }
}

.rates-rate-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--treo-space-xxs);
  margin: var(--treo-space-m) 0;
  padding-left: 40px;
  color: var(--treo-content-primary);
}

/* Vertical rail between the flags, clear of both by a comfortable margin.
   Anchored to the rate row so it stays centered on the dot if text wraps.
   x = 12.5px centers the 3px rail on the 28px flags. */
.rates-rate-row::before {
  content: "";
  position: absolute;
  left: 12.5px;
  top: calc(-1 * var(--treo-space-m));
  bottom: calc(-1 * var(--treo-space-m));
  width: 3px;
  border-radius: var(--treo-radius-full);
  background: var(--treo-border-default);
}

.rates-rate-row::after {
  content: "";
  position: absolute;
  left: 9.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: var(--treo-radius-full);
  background: var(--treo-border-default);
}

.rates-rate-value {
  font-weight: 800;
  color: var(--treo-content-brand);
}

.rates-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--treo-space-s);
  row-gap: var(--treo-space-xxs);
  margin: var(--treo-space-m) 0 var(--treo-space-l);
  color: var(--treo-content-primary);
}

.rates-meta-group {
  display: inline-flex;
  align-items: center;
  gap: var(--treo-space-xxs);
}

.rates-meta-icon {
  flex: none;
}

.rates-meta-sep {
  color: var(--treo-content-tertiary);
  padding: 0 var(--treo-space-xxs);
}

.rates-method-logos {
  display: inline-flex;
  align-items: center;
}

.rates-method-logos img {
  display: block;
  border-radius: var(--treo-radius-xs);
}

.rates-method-logos img + img {
  margin-left: -6px;
}

/* Keypad — mirrors the app's NumberPad: borderless keys, brand-purple
   labels, 118:64 key proportions, 20px gutters. */

.rates-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--treo-space-l);
  row-gap: var(--treo-space-s);
  max-width: 420px;
  margin: var(--treo-space-l) auto 0;
}

.rates-key {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 118 / 64;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--treo-radius-sm);
  font-family: var(--treo-font-sans);
  font-size: 1.625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--treo-content-brand);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--treo-motion-instant) ease-out;
}

.rates-key:active {
  background: var(--treo-surface-pressed);
}

.rates-key:focus-visible {
  outline: 2px solid var(--treo-border-focus);
  outline-offset: 2px;
}

.rates-key-del img {
  display: block;
}

/* Primary CTA — the one filled purple button on the page (§8.1). */

.rates-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  min-height: 56px;
  margin: var(--treo-space-xl) auto 0;
  border-radius: var(--treo-radius-md);
  background: var(--treo-surface-brand);
  color: var(--treo-content-on-brand);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--treo-motion-instant) ease-out;
}

.rates-cta:hover {
  background: var(--treo-surface-brand-hover);
}

.rates-cta:active {
  background: var(--treo-surface-brand-pressed);
}

.rates-cta:focus-visible {
  outline: 2px solid var(--treo-border-focus);
  outline-offset: 2px;
}

/* Promo band — brand-light wash, artwork pinned to the bottom-right corner,
   copy kept clear of it. */

.rates-promo {
  background: var(--treo-brand-light);
  overflow: hidden;
}

.rates-promo-inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  min-height: 300px;
  padding: var(--treo-space-xxl) var(--treo-space-xl) 0;
}

.rates-promo-title {
  margin: 0;
  color: var(--treo-content-brand);
}

.rates-promo-highlight {
  color: var(--treo-content-inverse);
}

.rates-promo-copy {
  max-width: 55%;
  margin: var(--treo-space-m) 0 0;
  padding-bottom: var(--treo-space-xxl);
  color: var(--treo-content-brand);
}

/* Shared testimonials carousel: full-bleed sunken band, content aligned to
   the page column. */
.rates-testimonials {
  background: var(--treo-surface-sunken);
}

.rates-testimonials .invite-testimonials {
  max-width: 680px;
  margin: 0 auto;
}

/* Delivery section — photo card with a notification overlay, headline,
   copy, and the pay/receive method logos. */

.rates-delivery {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--treo-space-xxl) var(--treo-space-xl);
}

.rates-delivery-photo {
  position: relative;
  margin: 0;
  border-radius: var(--treo-radius-xl);
  overflow: hidden;
}

.rates-delivery-photo > img:first-child {
  display: block;
  width: 100%;
  height: auto;
}

.rates-delivery-notification {
  position: absolute;
  left: var(--treo-space-m);
  right: var(--treo-space-m);
  bottom: var(--treo-space-xl);
  width: calc(100% - 2 * var(--treo-space-m));
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(23, 23, 23, 0.12));
}

.rates-delivery-title {
  margin: 0 0 var(--treo-space-xl);
  color: var(--treo-content-primary);
}

.rates-delivery-copy {
  margin: var(--treo-space-l) 0 0;
  max-width: 65ch;
  color: var(--treo-content-primary);
}

.rates-delivery-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--treo-space-m);
  margin-top: var(--treo-space-xxl);
}

.rates-delivery-logo-group {
  display: inline-flex;
  align-items: center;
  gap: var(--treo-space-s);
}

.rates-delivery-logo-group img {
  display: block;
  height: 40px;
  width: auto;
  border-radius: var(--treo-radius-xs);
}

/* Trust band lives in shared/trust.css (templates/shared/trust.html). */

/* Desktop QR card lives in shared/get_app.css (templates/shared/get_app.html). */

/* Footer — shared partial; align its text content with the page's 680px
   column while the wordmark stays edge-to-edge. */

.rates-footer .invite-footer-inner,
.rates-footer .invite-wordmark {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

/* Sunk slightly below the band edge so the engraving (not its white torn
   outline) is what meets the bottom. The band clips the overflow. */
.rates-promo-art {
  position: absolute;
  right: 0;
  bottom: -12px;
  width: clamp(150px, 42%, 224px);
  height: auto;
  display: block;
}