/* Silong Strategies: monochrome editorial on a cool canvas.
   Atkinson Hyperlegible Next at a light weight for display, Atkinson Mono for everything functional, one violet for links,
   black pills for actions. Token names below the first block are kept from the earlier
   theme so existing markup keeps working. */
:root {
  /* ---- Palette ---- */
  --paper: #ffffff;        /* cards, panels */
  --canvas: #f3f6f9;       /* page background */
  --bone: #e9edf3;         /* hairlines, card outlines */
  --fog: #dce2ea;          /* secondary borders, inputs, table rules */
  --pencil: #a8b4bf;       /* decorative only: fails AA as text */
  --steel: #516880;        /* secondary text */
  --lampblack: #1b2128;    /* primary text */
  --graphite-surface: #262626; /* dark cards and bands */
  --violet: #0027b3;       /* links, focus: the only chromatic UI color */
  --sky-wash: #95d0ff;

  /* ---- Legacy names, remapped ---- */
  --parchment: var(--canvas);
  --periwinkle: var(--bone);
  --off-black: var(--lampblack);
  --ink: #000000;
  --graphite: var(--steel);
  --smoke: #5d6f83;        /* labels: 4.9:1 on canvas */
  --ash: var(--fog);
  --ash-soft: var(--bone);
  --lake-blue: var(--violet);

  /* ---- Market-view hues (data, not chrome) ---- */
  --bull: #1f7a4d;
  --neutral: #9a6b1f;
  --bear: #34558c;
  --loss: #b3402e;

  /* ---- Type ---- */
  --display: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sans: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mono: var(--sans);     /* legacy name: body and UI text */

  /* ---- Elevation ---- */
  --shadow-card: rgba(0, 0, 0, 0.08) 0px 1px 10px 0px;
  --shadow-raised: rgba(0, 0, 0, 0.06) 0px 24px 24px 0px;
  --shadow-glow: rgba(255, 196, 250, 0.25) 8px -8px 20px 0px, rgba(56, 205, 255, 0.25) -8px 8px 30px 0px;

  /* ---- Spacing scale ----
     One 4px-step scale. Names are Tailwind's step numbers (step x 4px), so --space-4 here is p-4
     on the fx desk. Use only these for padding, margin and gap; scripts/check_spacing.py lists
     anything else. 2px and 6px are allowed only inside non-interactive badges and dense data rows. */
  --space-1: 4px;    /* helper under its field, icon to label */
  --space-2: 8px;    /* label to control, related rows, min gap between targets */
  --space-3: 12px;   /* inside controls, chip rows, small card internals */
  --space-4: 16px;   /* field to field; card inset and gutter on phones */
  --space-5: 20px;   /* only where 16 is too tight and 24 too loose */
  --space-6: 24px;   /* card inset on desktop; gutter >= 640 */
  --space-8: 32px;   /* gutter >= 1440; grid gaps */
  --space-12: 48px;  /* section head on desktop; compact section on phones */
  --space-16: 64px;  /* section on phones */
  --space-24: 96px;  /* section on desktop */
  /* component sizes, not spacing */
  --tap: 44px;          /* every tap target */
  --tap-primary: 52px;  /* the page's main action */
  --header-h: 64px;

  /* ---- Layout ---- */
  --page: 1248px;          /* 1200 content + gutters */
  --gutter: var(--space-6);
  --radius-card: 16px;
  --radius-sm: 4px;
  --radius-pill: 100px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
/* the hidden attribute always wins, even over a class that sets display (.btn is inline-flex) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--lampblack);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  color: #000;
}
/* Headlines keep the line breaks they have on desktop at every width: each line is its own
   block (.ln) and never wraps, and the font scales down so the longest line fits the column.
   --fit (set on each title) is that longest line's width in em at the title's font, measured
   at 1280; 100cqi / --fit is the size at which it exactly fills the heading. The heading's
   own font-size stays the cap, so desktop sizes are unchanged. */
h1.fit, h2.fit { container-type: inline-size; }
.fit > .ln { display: block; white-space: nowrap; font-size: min(1em, 100cqi / var(--fit)); }
/* without container units (iOS Safari before 16) the lines could not scale, so let them wrap */
@supports not (font-size: 1cqi) { .fit > .ln { white-space: normal; } }
h3, h4 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  color: #000;
}
h1 em, h2 em { font-style: italic; }

a { color: inherit; }
main p a:not(.btn), .faq a, .table-note a, .callout a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
img { max-width: 100%; display: block; }

/* Visible keyboard focus (WCAG 2.4.7) */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 100;
  background: #000;
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.container {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  /* landscape on a notched phone: the gutter grows to clear the sensor housing */
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 12px 24px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  white-space: nowrap;
  max-width: 100%;  /* a long label wraps on small phones (see max-width: 420px) instead of overflowing */
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  cursor: pointer;
}
/* Primary: matte black pill, the only element with a colored glow */
.btn-primary { background: #000; color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { background: var(--lampblack); transform: translateY(-1px); }
.btn-dark { background: #000; color: #fff; }
.btn-dark:hover { background: var(--lampblack); }
/* Ghost: white fill, black outline */
.btn-ghost { background: var(--paper); color: #000; border-color: #000; }
.btn-ghost:hover { background: #000; color: #fff; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Eyebrow: a small sentence-case tag */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--steel);
  background: var(--paper);
  border: 1px solid var(--bone);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  margin-bottom: 20px;
}

/* ===================== Header ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(243, 246, 249, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--bone); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand .logo { width: 30px; height: 30px; border-radius: 7px; display: block; }
.brand .name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #000;
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  color: var(--lampblack);
  white-space: nowrap;
  transition: opacity .2s var(--ease);
}
/* Dim siblings while one link is hovered */
.nav-links:hover a:not(.btn):not(:hover) { opacity: .55; }
.nav-links .btn { display: none; }
.nav-links .btn-primary { color: #fff; }
.nav-links a[aria-current="page"] { font-weight: 600; }
.nav-links .login {
  border: 1.5px solid #000;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-weight: 600;
  background: var(--paper);
}
.nav-links .login:hover { background: #000; color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn { min-height: 40px; padding: 10px 20px; }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1.5px solid var(--fog);
  border-radius: var(--radius-pill);
  background: var(--paper);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: #000; }

/* ===================== Hero ===================== */
.hero {
  position: relative;
  padding: 112px 0 80px;
}
.hero .wash { display: none; }  /* flat system: no decorative gradients */
.hero-inner { position: relative; text-align: center; max-width: 920px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(44px, 7vw, 80px);  /* a cap: the lines scale down from it to fit (.fit) */
  line-height: 1.05;
  margin: 0 0 24px;
}
.hero .sub {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--steel);
  max-width: 620px;
  margin: 0 auto 32px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}
/* Feature row under the CTAs: plain inline labels, no chrome */
.hero-note {
  font-size: 14px;
  color: var(--steel);
  margin: 0;
  text-wrap: balance;
}

/* ---- Three market-view cards ---- */
.views {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
}
.view-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.view-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.vdot { width: 8px; height: 8px; border-radius: 50%; }
.view-name { font-size: 14px; font-weight: 500; color: #000; }
.view-count { font-family: var(--display); font-weight: 300; font-size: 48px; line-height: 1; margin-bottom: 8px; }
.view-count span { font-family: var(--sans); font-size: 14px; color: var(--steel); margin-left: 8px; }
.view-desc { font-size: 14px; color: var(--steel); margin: 0; }

/* ===================== Stat strip ===================== */
.stats { padding: 0 0 96px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.stat { padding: 32px 28px; border-left: 1px solid var(--bone); }
.stat:first-child { border-left: 0; }
.stat .num { font-family: var(--display); font-weight: 300; font-size: clamp(min(36px, 8.4vw), 4vw, 52px);  /* the 8.4vw floor fits "Weekly" in a half-width tile at 320 */ line-height: 1; color: #000; margin-bottom: 10px; }
.stat .num span { color: var(--pencil); }
.stat .label { font-size: 14px; color: var(--steel); }

/* ===================== Sections ===================== */
.section { padding: 96px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: 18px; }
.section-head p { font-size: 16px; line-height: 1.55; color: var(--steel); margin: 0 auto; max-width: 600px; }

.rule { border: 0; border-top: 1px solid var(--fog); margin: 0; }

/* ---- Intro + three points ---- */
.about-intro { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.about-intro h2 { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: 20px; }
.about-intro .lede { font-size: 17px; line-height: 1.6; color: var(--steel); margin: 0 auto; max-width: 620px; }
.about-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-point {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.about-point .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--canvas);
  border-radius: 50%;
  margin-bottom: 20px;
}
.about-point .ic svg { width: 16px; height: 16px; }
.about-point strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #000;
  margin-bottom: 8px;
}
.about-point span { display: block; font-size: 14px; line-height: 1.55; color: var(--steel); }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.step .n {
  font-family: var(--display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--pencil);
  margin-bottom: 28px;
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 0; }

/* Steps sit on a dark band on .approach sections */
.section.approach { background: var(--graphite-surface); color: #fff; }
/* Only headings that sit directly on the dark band; white cards inside it keep dark text */
.section.approach .section-head h2, .section.approach .about-intro h2,
.section.approach .step h3, .section.approach .feature h3 { color: #fff; }
.section.approach .section-head p { color: #b9c4cf; }
.section.approach .eyebrow { background: transparent; border-color: rgba(255,255,255,.18); color: #c9d2db; }
.section.approach .step,
.section.approach .feature { background: rgba(255,255,255,.06); box-shadow: none; border: 1px solid rgba(255,255,255,.10); }
.section.approach .step .n { color: #7d8b99; }
.section.approach .step p,
.section.approach .feature p { color: #b9c4cf; }
.section.approach .feature .fic { background: rgba(255,255,255,.10); }
.section.approach .feature .fic svg { stroke: #fff; }
.section.approach a:not(.btn) { color: #fff; }
.section.approach .explorer { color: var(--lampblack); }

/* ---- Feature grid ---- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.feature .fic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--canvas);
  border-radius: 50%;
  margin-bottom: 20px;
}
.feature .fic svg { width: 16px; height: 16px; stroke: #000; fill: none; }
.feature h3 { font-size: 20px; margin-bottom: 8px; }
.feature p { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 0; }

/* ===================== Explorer ===================== */
.explorer {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.exp-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--canvas);
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
}
.exp-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--steel);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.exp-toggle button:hover { color: #000; }
.exp-toggle button.active { background: #000; color: #fff; }
.exp-toggle .edot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.exp-toggle button.active .edot { background: var(--thesis, #fff); }

.exp-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }

.exp-visual {
  border: 1px solid var(--bone);
  border-radius: 12px;
  padding: 24px;
}
.exp-vhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}
.exp-name { font-family: var(--display); font-weight: 300; font-size: 32px; line-height: 1.1; color: #000; }
.exp-cap { text-align: right; }
.exp-cap label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--steel);
  margin-bottom: 6px;
}
.exp-cap-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fog);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  background: var(--paper);
}
.exp-cap-field span { color: var(--steel); font-size: 14px; }
.exp-cap-field input {
  width: 82px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #000;
  text-align: right;
  padding: 0;
}
.exp-cap-field input:focus { outline: none; }
.exp-cap-field:focus-within { border-color: #000; }

.exp-desc { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 0 0 20px; max-width: 54ch; }
.exp-chart { display: block; width: 100%; height: auto; font-family: var(--sans); }
.exp-chart text { font-size: 0.95em; }
.exp-chart .be-cap { font-size: 0.85em; }

.exp-scn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.exp-scn-card {
  border: 1px solid var(--bone);
  border-radius: 12px;
  padding: 14px 16px;
}
.exp-scn-card > span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--steel);
  margin-bottom: 8px;
}
.exp-scn-card b { display: block; font-family: var(--display); font-size: 28px; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.exp-scn-card em { display: block; font-style: normal; font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.exp-scn-card em.pos { color: var(--bull); }
.exp-scn-card em.neg { color: var(--loss); }
.exp-scn-card em.zero { color: var(--steel); }

.exp-list { border: 1px solid var(--bone); border-radius: 12px; padding: 20px 16px; }
.exp-list-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--steel);
  margin: 0 8px 12px;
}
.exp-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 12px 14px;
  margin-bottom: 4px;
  cursor: pointer;
  font-family: var(--sans);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.exp-row:hover { border-color: var(--bone); }
.exp-row.active { background: var(--thesis-tint, var(--bone)); border-color: transparent; }
.exp-row b {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin-bottom: 4px;
}
.exp-row span { display: block; font-size: 13px; color: var(--steel); }
.exp-more { font-size: 13px; color: var(--steel); padding: 10px 14px 0; }
.exp-foot { font-size: 12px; color: var(--steel); margin: 20px 0 0; }

/* ===================== CTA ===================== */
.cta-card {
  background: var(--graphite-surface);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.cta-card h2 { font-size: clamp(34px, 4.2vw, 48px); color: #fff; margin-bottom: 16px; }
.cta-card > div > p { font-size: 16px; line-height: 1.55; color: #b9c4cf; margin: 0; max-width: 46ch; }
.cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cta-card .btn-dark { background: #fff; color: #000; }
.cta-card .btn-dark:hover { background: var(--bone); }
.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #b9c4cf;
}
.contact-line svg { width: 16px; height: 16px; stroke: #b9c4cf; fill: none; flex: none; }
.contact-line a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.contact-line a:hover { text-decoration-color: #fff; }

/* ===================== Footer ===================== */
footer { border-top: 1px solid var(--fog); padding: 64px 0 40px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand p { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 8px 0 0; max-width: 46ch; }
.footer-col h2 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: #000;
  margin: 0 0 4px;   /* + the link's own centering inside 44px = the old 16px to the first link */
}
/* every footer link is a 44px tap target, 8px from the next */
.footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--steel);
  text-decoration: none;
  margin-bottom: 8px;
}
.footer-col a:last-child { margin-bottom: 0; }
.footer-brand .brand { min-height: 44px; }
.footer-col a:hover { color: #000; }
.disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--steel);
  border-top: 1px solid var(--fog);
  padding-top: 28px;
  margin: 0 0 28px;
}
.disclaimer strong { color: var(--lampblack); font-weight: 600; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--fog);
  padding-top: 24px;
}
.footer-bottom p { font-size: 12px; color: var(--steel); margin: 0; }

/* ===================== Reveal ===================== */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ===================== Signature motion ===================== */
/* 1. Order-fill headlines (classes added by site.js, never without JS) */
.fill { --w-dim: var(--pencil); --w-bar: #000; }
.section.approach .fill, .cta-card .fill { --w-dim: rgba(255,255,255,.32); --w-bar: #fff; }
.fill .w {
  position: relative;
  display: inline-block;
  color: var(--w-dim);
  transition: color .45s var(--ease) calc(var(--i) * 70ms + 260ms);
}
.fill .w::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.04em;
  height: 2px;
  background: var(--w-bar);
  clip-path: inset(0 100% 0 0);
}
.fill.filled .w { color: inherit; }
.fill.filled .w::after { animation: order-fill .7s var(--ease) calc(var(--i) * 70ms) both; }
@keyframes order-fill {
  0%   { clip-path: inset(0 100% 0 0); }
  50%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* 2. Steps as a pipeline */
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  border-radius: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
}
.section.approach .step::before { background: #fff; }
.steps.run .step::before { transform: scaleX(1); transition: transform .6s var(--ease) calc(var(--i) * 450ms + 200ms); }
.step .n { transition: color .4s var(--ease) calc(var(--i) * 450ms + 500ms); }
.steps.run .step .n { color: #000; }
.section.approach .steps.run .step .n { color: #fff; }
@media (min-width: 1041px) {
  /* Connector across the 24px gap, with a pulse that walks the chain */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 44px; right: -25px;
    width: 26px; height: 2px;
    background:
      linear-gradient(90deg, transparent, var(--pulse, #000) 50%, transparent) no-repeat -26px 0 / 26px 2px,
      var(--fog);
  }
  .section.approach .step:not(:last-child)::after {
    --pulse: #fff;
    background:
      linear-gradient(90deg, transparent, var(--pulse) 50%, transparent) no-repeat -26px 0 / 26px 2px,
      rgba(255,255,255,.16);
  }
  .steps.run .step:not(:last-child)::after { animation: pipe-pulse 4.5s linear calc(var(--i) * 1.5s + 2s) infinite; }
}
@keyframes pipe-pulse {
  0%       { background-position: -26px 0, 0 0; }
  22%, 100% { background-position: 26px 0, 0 0; }
}

/* 3. Live status dot next to Manila */
.live-dot {
  position: relative;
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #1f9d5c;
  vertical-align: 1px;
  flex: none;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1f9d5c;
  animation: live-ring 2.8s var(--ease) infinite;
}
@keyframes live-ring {
  0%   { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

/* 4. Payoff line draws itself the first time the explorer comes into view */
#spChart.pre-draw #spCurve { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
#spChart.pre-draw #spRibPos, #spChart.pre-draw #spRibNeg, #spChart.pre-draw #spDots, #spChart.pre-draw #spBand { opacity: 0; }
#spChart.drawing #spCurve { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.45, 0, .2, 1); }
#spChart.drawing #spBand { opacity: .07; transition: opacity .6s ease 1.1s; }
#spChart.drawing #spRibPos { opacity: .14; transition: opacity .6s ease 1.1s; }
#spChart.drawing #spRibNeg { opacity: .11; transition: opacity .6s ease 1.1s; }
#spChart.drawing #spDots { opacity: 1; transition: opacity .4s ease 1.4s; }

/* 5. Limits first: outline drawn, then the card fills (classes from site.js) */
.limit { position: relative; }
.limit-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.limit-line rect {
  x: 0.75px; y: 0.75px;
  width: calc(100% - 1.5px); height: calc(100% - 1.5px);
  rx: 16px;
  fill: none;
  stroke: #000;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.section.approach .limit-line rect { stroke: #fff; }
.limit:not(.set) { background-color: transparent !important; box-shadow: none !important; }
.limit:not(.set) > :not(.limit-line) { opacity: 0; }
.limit.set .limit-line rect { animation: limit-draw 1.3s cubic-bezier(.6, 0, .3, 1) calc(var(--k) * 110ms) backwards; }
.limit.set { animation: limit-fill .45s var(--ease) calc(var(--k) * 110ms + .5s) backwards; }
.limit.set > :not(.limit-line) { animation: limit-content .45s var(--ease) calc(var(--k) * 110ms + .55s) backwards; }
@keyframes limit-draw {
  0%   { stroke-dashoffset: 1; opacity: .75; }
  50%  { stroke-dashoffset: 0; opacity: .75; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes limit-fill { from { background-color: transparent; box-shadow: none; } }
@keyframes limit-content { from { opacity: 0; transform: translateY(4px); } }

/* 5b. Corner brackets close in on feature cards, then the card fills */
.bracket { position: relative; }
.brackets {
  --bk: #000;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
/* Four corner arcs that follow the card's 16px radius, so the frame
   closes onto the card's real shape rather than square corners */
.brackets b { position: absolute; width: 26px; height: 26px; border: 0 solid var(--bk); }
.brackets b:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; border-top-left-radius: 16px; }
.brackets b:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; border-top-right-radius: 16px; }
.brackets b:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; border-bottom-left-radius: 16px; }
.brackets b:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; border-bottom-right-radius: 16px; }
.section.approach .brackets { --bk: #fff; }
.bracket:not(.set) { background-color: transparent !important; box-shadow: none !important; }
.bracket:not(.set) > :not(.brackets) { opacity: 0; }
.bracket.set .brackets { animation: bracket-close 1.2s var(--ease) calc(var(--k) * 110ms) backwards; }
.bracket.set { animation: limit-fill .45s var(--ease) calc(var(--k) * 110ms + .45s) backwards; }
.bracket.set > :not(.brackets) { animation: limit-content .45s var(--ease) calc(var(--k) * 110ms + .5s) backwards; }
@keyframes bracket-close {
  0%   { inset: 22%; opacity: 0; }
  15%  { opacity: .8; }
  45%  { inset: 0; opacity: .8; }
  100% { inset: 0; opacity: 0; }
}

/* 5c. Level line: drawn across the middle, then the card opens up and down from it */
.strike { position: relative; }
.strike-line {
  position: absolute;
  left: 16px; right: 16px; top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: #000;
  pointer-events: none;
  transform: scaleX(0);
  opacity: 0;
}
.section.approach .strike-line { background: #fff; }
.strike:not(.set) { visibility: hidden; }
.strike.set { animation: strike-open .55s var(--ease) calc(var(--k) * 120ms + .5s) backwards; }
.strike.set .strike-line { animation: strike-draw .65s var(--ease) calc(var(--k) * 120ms) backwards; }
/* Text waits until the card is open, so it never shows sliced mid-reveal */
.strike.set > :not(.strike-line) { animation: limit-content .4s var(--ease) calc(var(--k) * 120ms + .85s) backwards; }
/* The line is gone before the card opens, so it never crosses the text */
@keyframes strike-draw {
  0%   { transform: scaleX(0); opacity: 1; }
  60%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* Keep the 16px corners while opening; the -24px end leaves room for the shadow */
@keyframes strike-open {
  from { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0 round 16px); }
  to   { clip-path: inset(-24px round 40px); }
}

/* 6. Netting: the two sides of a position meet in the middle */
.net-wrap { overflow-x: clip; }
.net:not(.set) > * { opacity: 0; }
.net.set > :nth-child(1) { animation: net-left .8s var(--ease) backwards; }
.net.set > :nth-child(2) { animation: net-mid .6s var(--ease) .25s backwards; }
.net.set > :nth-child(3) { animation: net-right .8s var(--ease) backwards; }
@keyframes net-left  { from { opacity: 0; transform: translateX(-56px); } }
@keyframes net-right { from { opacity: 0; transform: translateX(56px); } }
@keyframes net-mid   { from { opacity: 0; transform: scale(.96); } }

/* 7. Ledger: rows post one at a time with a faint flash */
.ledger:not(.set) > * { opacity: 0; }
.ledger.set > * { animation: ledger-post .9s var(--ease) calc(var(--r) * 90ms) backwards; }
@keyframes ledger-post {
  0%   { opacity: 0; background-color: rgba(0, 39, 179, .09); }
  30%  { opacity: 1; background-color: rgba(0, 39, 179, .09); }
  /* no 100%: it eases back to whatever the row's own background is (phone tier cards are white) */
}

@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .step::after { animation: none !important; }
  .step::before { transform: scaleX(1); }
}

/* ===================== Sub-page additions ===================== */
/* a page hero can be shortened by setting these variables on its own class, never by a longer selector */
.hero.page { padding: var(--hero-top, 96px) 0 var(--hero-bottom, 64px); }
.hero.page h1 { font-size: var(--hero-h1, clamp(40px, 6vw, 72px)); }

/* Two-column text block */
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.split .section-head { margin: 0; text-align: left; }
.split .section-head p { margin: 0; }
.facts {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0;
  margin: 0;
  overflow: hidden;   /* row highlights run to the card's rounded edge */
}
.fact { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--bone); }
.fact:last-child { border-bottom: 0; }
.fact dt { font-size: 14px; font-weight: 500; color: #000; }
.fact dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--steel); }
.fact dd strong { color: #000; font-weight: 600; }

/* Tier table */
.table-wrap { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow-x: auto; }
.tier-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.tier-table th, .tier-table td { text-align: left; padding: 18px 24px; border-bottom: 1px solid var(--bone); }
.tier-table thead th { font-size: 12px; font-weight: 600; color: var(--steel); }
.tier-table tbody tr:last-child td, .tier-table tbody tr:last-child th { border-bottom: 0; }
.tier-table tbody th { font-size: 16px; font-weight: 500; color: #000; }
.tier-table td { color: var(--steel); }
.tier-table td.num { font-weight: 600; color: #000; font-variant-numeric: tabular-nums; }
.table-note { font-size: 13px; line-height: 1.6; color: var(--steel); margin: 16px auto 0; max-width: 90ch; text-align: center; }

/* Callout */
.callout { background: var(--paper); border-left: 3px solid #000; border-radius: 0 12px 12px 0; box-shadow: var(--shadow-card); padding: 20px 24px; font-size: 14px; line-height: 1.6; color: var(--steel); margin-top: 32px; }
.callout strong { color: #000; font-weight: 600; }

/* Page cards linking the offerings */
.page-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-cards.four { grid-template-columns: repeat(2, 1fr); }
.page-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.page-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.page-card .k { align-self: flex-start; font-size: 12px; font-weight: 500; color: var(--steel); border: 1px solid var(--bone); border-radius: var(--radius-sm); padding: 4px 10px; margin-bottom: 20px; }
.page-card h3 { font-family: var(--display); font-weight: 300; font-size: 36px; line-height: 1.1; margin-bottom: 12px; }
.page-card p { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 0 0 20px; flex: 1; }
.page-card .go { font-size: 14px; font-weight: 600; color: var(--violet); }
.page-card:hover .go .arrow { transform: translateX(3px); }
.page-card .go .arrow { display: inline-block; transition: transform .2s var(--ease); }

/* FAQ */
.faq { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 0; overflow: hidden; }
.faq details { border-bottom: 1px solid var(--bone); padding: 0 24px; }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: 16px; font-weight: 500; color: #000; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; font-weight: 300; color: var(--steel); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 20px; max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--steel); }

/* Tag list */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags span { font-size: 12px; font-weight: 500; border: 1px solid var(--bone); border-radius: var(--radius-sm); padding: 4px 10px; color: var(--steel); background: var(--paper); }

/* Investor-portal link under the home hero buttons */
.hero-login { font-size: 14px; color: var(--steel); margin: -4px 0 20px; }
.hero-login a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hero-login .arrow { display: inline-block; transition: transform .2s var(--ease); }
.hero-login a:hover .arrow { transform: translateX(3px); }
.hero-note span { white-space: nowrap; }
.hero-note .sep { font-style: normal; color: var(--pencil); }

/* ===================== Responsive ===================== */
@media (min-width: 1440px) {
  :root { --gutter: var(--space-8); --page: 1264px; }
}
@media (max-width: 1180px) and (min-width: 1081px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13px; }
}
@media (max-width: 1040px) {
  .exp-body { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split .section-head { text-align: center; margin: 0 auto; }
  .split .section-head p { margin: 0 auto; }
  .page-cards, .page-cards.four { grid-template-columns: 1fr; }
}
/* Hamburger nav: five links no longer fit on one line below ~1080px */
@media (max-width: 1080px) {
  .nav-links {
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--fog);
    padding: 8px max(var(--gutter), env(safe-area-inset-right)) 24px max(var(--gutter), env(safe-area-inset-left));
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 16px 0; border-bottom: 1px solid var(--bone); font-size: 16px; }
  .nav-links:hover a:not(.btn):not(:hover) { opacity: 1; }
  .nav-links .login { border: 1.5px solid #000; border-radius: var(--radius-pill); padding: 12px 24px; margin-top: 20px; text-align: center; }
  .nav-links .btn { display: inline-flex; margin-top: 12px; border-bottom: 0; }
  .nav-actions .btn { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 880px) {
  .views { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 24px 20px; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--bone); }
  .about-points { grid-template-columns: 1fr; }
  .cta-card { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
}
/* small phones (320-420): nothing may be wider than the screen */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; }
  .stat { padding: 20px 16px; }
  .exp-toggle button { min-width: 0; padding-inline: 4px; gap: 4px; font-size: 13px; }
}
@media (max-width: 680px) {
  :root { --gutter: var(--space-4); }
  .section { padding: 64px 0; }
  .hero { padding: 64px 0 48px; }
  .hero.page { padding: var(--hero-top, 56px) 0 var(--hero-bottom, 40px); }
  .section-head, .about-intro { margin-bottom: 40px; }
  .why-grid, .steps { grid-template-columns: 1fr; }
  .exp-chart .x-cap { display: none; }
  .explorer { padding: 16px; }
  .exp-visual, .exp-list { padding: 18px 14px; }
  .exp-vhead { flex-direction: column; align-items: flex-start; gap: 12px; }
  .exp-cap { text-align: left; }
  .exp-scn { grid-template-columns: 1fr; }
  .exp-toggle { width: 100%; justify-content: space-between; }
  .exp-toggle button { flex: 1; justify-content: center; padding: 10px; }
  .fact { grid-template-columns: 1fr; gap: 4px; }
  .hero-login { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 24px; }
  .hero-note { line-height: 1.8; }
  .hero-note .sep { display: none; }
  .hero-note span { display: block; }

  /* Tier table becomes stacked cards on phones */
  .table-wrap { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .tier-table { min-width: 0; }
  .tier-table thead { display: none; }
  .tier-table, .tier-table tbody, .tier-table tr, .tier-table th, .tier-table td { display: block; }
  .tier-table tr { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 8px 20px; margin-bottom: 12px; }
  .tier-table tbody th { padding: 14px 0 10px; border-bottom: 1px solid var(--bone); }
  .tier-table td { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bone); }
  .tier-table tbody tr td:last-child { border-bottom: 0; }
  .tier-table td::before { content: attr(data-label); font-size: 12px; font-weight: 500; color: var(--steel); }
}

/* ===== Exchange (/exchange/) =====
   A P2P-style order panel: steps across the top, the amounts large, facts in mono.
   Spacing comes only from the --space-* scale. Phones are one block (max-width: 639px) plus a
   small-phone block (max-width: 360px), so each value is set at most three times. */

/* the order panel is the point of /exchange/: a shorter hero keeps it near the fold */
.ex-hero { --hero-top: var(--space-12); --hero-bottom: var(--space-8); --hero-h1: clamp(36px, 5.2vw, 60px); }
.ex-hero h1 { margin-bottom: var(--space-4); }

.ex-section { padding-top: var(--space-2); }
.ex-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.ex-card { background: var(--paper); border: 1px solid var(--bone); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-6); scroll-margin-top: calc(var(--header-h) + var(--space-8)); }

.ex-steps { display: flex; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-6); padding: 0; counter-reset: exstep; }
.ex-steps li { flex: 1; counter-increment: exstep; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--smoke); padding-top: var(--space-2); border-top: 2px solid var(--fog); }
.ex-steps li::before { content: counter(exstep) "  "; }
.ex-steps li.on { color: #000; border-top-color: #000; }
.ex-steps li.done { color: var(--steel); border-top-color: var(--steel); }

/* direction toggle: the same height in both states. The label stays on one line; an off side's
   note sits on a second line, inside a height that is always reserved. */
.ex-dir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--canvas); border: 1px solid var(--bone); border-radius: var(--radius-pill); padding: var(--space-1); margin-bottom: var(--space-4); }
.ex-dir button { font: inherit; font-size: 15px; line-height: 1.15; min-height: var(--tap-primary); border: 0; background: transparent; padding: 0 var(--space-3); border-radius: var(--radius-pill); cursor: pointer; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-dir button[aria-checked="true"] { background: #000; color: #fff; }
.ex-dir button:disabled { opacity: .45; cursor: not-allowed; background: transparent; color: var(--steel); }
.ex-dir button[data-off="1"]::after { content: "Not available now"; display: block; font-family: var(--display); font-size: 12px; line-height: 1.3; }

.ex-field { display: block; border: 0; margin: 0 0 var(--space-4); padding: 0; min-width: 0; }
.ex-field > span:first-child, .ex-field legend { display: block; font-size: 13px; color: var(--smoke); margin-bottom: var(--space-2); padding: 0; }
.ex-field small { display: block; font-size: 12px; color: var(--smoke); margin-top: var(--space-1); }
.ex-input { display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--fog); border-radius: 12px; padding: 0 var(--space-4); background: var(--paper); }
.ex-input:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(0, 39, 179, .12); }
.ex-input input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 18px; padding: var(--space-3) 0; color: #000; }
#exAmount { font-family: var(--display); font-size: 32px; font-weight: 300; padding: var(--space-2) 0; }
.ex-input b, .ex-receive b { font-weight: 500; font-size: 14px; color: var(--steel); }
.ex-out { background: var(--canvas); border-radius: 12px; padding: var(--space-3) var(--space-4); }
.ex-receive { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ex-receive strong { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.015em; color: #000; overflow-wrap: anywhere; }

/* The quote's facts read as a short comparison, one fact per row: a divider between rows,
   labels left in grey, numbers right in bold. "You get more" sits apart in a green box so it
   can't be read as part of the competitor's line. Same treatment for the summary rows, where
   people check their own name and amount. */
.ex-facts { display: grid; gap: 0; margin: var(--space-4) 0 var(--space-3); border-top: 1px solid var(--bone); }
.ex-facts > div, .ex-summary > div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 15px; padding: var(--space-3) 0; border-bottom: 1px solid var(--bone); }
.ex-facts > div { align-items: baseline; }
.ex-facts dt, .ex-summary dt { color: var(--steel); }
.ex-facts dd, .ex-summary dd { margin: 0; text-align: right; color: #000; font-weight: 600; }
.ex-facts dd { font-variant-numeric: tabular-nums; }
.ex-facts > div.ex-save { margin-top: var(--space-3); border: 0; background: #e8f4ed; border-radius: 12px; padding: var(--space-3) var(--space-4); }
.ex-facts .ex-save dt { color: var(--bull); font-weight: 500; }
.ex-facts .ex-save dd { color: var(--bull); font-weight: 700; font-size: 17px; }
.ex-summary { display: grid; gap: 0; margin: 0 0 var(--space-2); border-top: 1px solid var(--bone); }

.ex-status { font-size: 13px; color: var(--smoke); margin: var(--space-3) 0 var(--space-4); min-height: 1.5em; }
.ex-status.warn { color: var(--loss); }
.ex-wide { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
/* Continue and Review stay in their own place: a riding button covered the amount, the savings,
   a payout choice or the paused message on short phones, so there is no sticky action here */
#exToSummary { margin-top: var(--space-2); }

.ex-methods { display: grid; gap: var(--space-3); }
.ex-methods label { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-primary); border: 1px solid var(--fog); border-radius: 12px; padding: var(--space-3) var(--space-4); font-size: 15px; cursor: pointer; }
.ex-methods label:has(input:checked) { border-color: #000; }
.ex-methods input { accent-color: #000; }
.ex-note { font-size: 13px; color: var(--steel); line-height: 1.5; margin: var(--space-2) 0 var(--space-4); }

.ex-id { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); background: var(--canvas); border-radius: 12px; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.ex-id span { font-size: 13px; color: var(--smoke); }
.ex-id strong { font-size: 18px; font-weight: 600; letter-spacing: .04em; color: #000; white-space: nowrap; }

/* Summary-step actions: big, stacked, each one looking different, with a plain label and an icon,
   so nobody taps the wrong one. Navigation sits apart as small text links. */
.ex-sendto { display: grid; gap: var(--space-3); margin: var(--space-5) 0 var(--space-2); }
.ex-sendto-label { margin: 0; font-size: 15px; font-weight: 500; color: #000; }
.ex-action { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: 0 var(--space-5); border-radius: 14px; font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background .15s var(--ease), border-color .15s var(--ease); }
.ex-action svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ex-action-solid { background: #000; color: #fff; }
.ex-action-solid:hover { background: var(--lampblack); }
.ex-action-outline { background: var(--paper); color: #000; border-color: #000; }
.ex-action-outline:hover { background: var(--canvas); }
.ex-action-soft { background: var(--canvas); color: #000; border-color: var(--fog); }
.ex-action-soft:hover { border-color: var(--steel); }
/* the toast keeps its slot when hidden (two lines: the longest message at 320px), so showing or
   hiding it never moves Back / Start over under someone's thumb */
.ex-toast { font-size: 13px; line-height: 1.5; color: var(--bull); margin: 0; min-height: 3em; }
.ex-toast[hidden] { display: block !important; visibility: hidden; }

.ex-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.ex-card .ex-nav { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--bone); }
.ex-link { display: inline-flex; align-items: center; min-height: var(--tap); background: none; border: 0; padding: 0 var(--space-1); font: inherit; font-size: 14px; color: var(--steel); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.ex-link:hover { color: #000; }

/* live comparison under the quote: the evidence for the headline. Ranked: number, name, amount.
   Ours highlighted; promos unranked and muted, at the end */
.ex-compare { margin: var(--space-4) 0 var(--space-3); border: 1px solid var(--bone); border-radius: 12px; padding: 0 var(--space-4); }
.ex-compare summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-size: 14px; padding: var(--space-3) 0; color: #000; }
.ex-compare-list { list-style: none; margin: 0; padding: 0 0 var(--space-2); display: grid; gap: var(--space-2); }
.ex-compare-list li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--space-3); font-size: 14px; color: var(--steel); padding: var(--space-1) 0; border-bottom: 1px solid var(--bone); }
.ex-compare-list li.us { color: #000; font-weight: 600; }
.ex-compare-list .rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--canvas); border: 1px solid var(--fog); font-size: 12px; color: var(--steel); }
.ex-compare-list li.us .rank { background: #000; border-color: #000; color: #fff; }
.ex-compare-list li.promo { opacity: .7; font-size: 13px; }
.ex-compare-list li.promo .rank { background: transparent; border-style: dashed; }
.ex-compare-list .got { text-align: right; white-space: nowrap; }
.ex-compare-note { font-size: 12px; color: var(--smoke); margin: var(--space-1) 0 var(--space-3); line-height: 1.5; }

.ex-side h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: var(--space-4); }
.ex-how { margin: 0 0 var(--space-5); padding-left: var(--space-5); display: grid; gap: var(--space-3); color: var(--steel); line-height: 1.5; }
.ex-how b { color: #000; font-weight: 500; }
.ex-market { font-size: 12px; color: var(--smoke); line-height: 1.5; }

/* the rules sit between the order panel and the subscribe card: a short top, and no bottom of their
   own, so the gap to the subscribe card is one section padding, not two stacked */
.ex-rules-section { padding-top: var(--space-6); padding-bottom: 0; }
.ex-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.ex-rule { background: var(--paper); border: 1px solid var(--bone); border-radius: var(--radius-card); padding: var(--space-6); }
.ex-rule h3 { font-size: 16px; margin-bottom: var(--space-2); }
.ex-rule p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--steel); }

/* daily rate email form, on the dark CTA card */
.ex-sub { width: 100%; max-width: 440px; }
.ex-sub-label { display: block; font-size: 13px; color: #b9c4cf; margin-bottom: var(--space-2); }
.ex-sub-row { display: flex; gap: var(--space-2); }
.ex-sub-row input { flex: 1; min-width: 0; min-height: var(--tap-primary); padding: 0 var(--space-4); border-radius: 12px; border: 1px solid #4a525c; background: #fff; color: #000; font: inherit; font-size: 16px; }
.ex-sub-row input:focus { outline: 0; border-color: var(--sky-wash); box-shadow: 0 0 0 3px rgba(149, 208, 255, .35); }
.ex-sub-row .btn { min-height: var(--tap-primary); flex: none; justify-content: center; }
.ex-sub-row .btn:disabled { opacity: .6; cursor: progress; }
.ex-sub-msg { font-size: 14px; color: #fff; margin: var(--space-2) 0 0; min-height: 1.5em; }
.ex-sub-msg.warn { color: #ffb4a6; }

@media (max-width: 900px) {
  .ex-grid { grid-template-columns: minmax(0, 1fr); }
  /* one column: the side text lines up with the card's content, and the list numbers sit
     inside that inset (32px clears "4. ", the old 20px let them hang past it) */
  .ex-side { padding: 0 var(--space-6); }
  .ex-how { padding-left: var(--space-8); }
  .ex-rules { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .ex-sub-row { flex-direction: column; }
  .ex-sub-row .btn { width: 100%; }
  .ex-sub ~ .btn { width: 100%; }   /* the mailto fallback after a failed save lines up with Subscribe */
}

/* ===== Exchange on phones =====
   Retail clients arrive on phones: every tap target at least 44px, nothing wider than the screen
   from 320px up, and the quote close to the top. The hero's paragraph repeats what the live
   comparison under the quote shows, so it gives way. */
@media (max-width: 639px) {
  .ex-hero { --hero-top: var(--space-4); --hero-bottom: var(--space-2); --hero-h1: clamp(24px, 7.2vw, 30px); }
  .ex-hero h1 { line-height: 1.15; margin-bottom: var(--space-3); }
  .ex-hero .sub, .ex-hero .eyebrow { display: none; }
  .ex-section { padding-bottom: var(--space-12); }
  .ex-card { padding: var(--space-4); border-radius: 14px; }
  .ex-steps { margin-bottom: var(--space-4); }
  .ex-steps li { font-size: 11px; letter-spacing: .02em; }
  #exAmount { font-size: 28px; }
  .ex-receive strong { font-size: 30px; }
  .ex-id { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  /* label on top, value underneath, both left-aligned, so a long name or rate never wraps
     right-aligned over two lines */
  .ex-summary > div { flex-direction: column; gap: 2px; }
  .ex-summary dd { text-align: left; }
  .ex-side { padding: 0 var(--space-4); }   /* same inset as .ex-card on phones */
  .ex-rules { grid-template-columns: 1fr; }
  .ex-rule { padding: var(--space-4); }
}
/* small phones: the gutter and card inset stay 16; only the vertical rhythm tightens */
@media (max-width: 360px) {
  .ex-hero { --hero-top: var(--space-3); --hero-bottom: var(--space-1); }
  .ex-hero h1 { margin-bottom: var(--space-2); }
  .ex-steps { margin-bottom: var(--space-3); }
  .ex-steps li::before { content: counter(exstep) " "; }
  .ex-dir { margin-bottom: var(--space-3); }
  .ex-dir button { font-size: 14px; padding: 0 var(--space-1); }
  .ex-field { margin-bottom: var(--space-3); }
  .ex-facts > div { flex-wrap: wrap; gap: 2px var(--space-3); }
  .ex-facts dd { margin-left: auto; }
  .ex-action { padding: 0 var(--space-4); gap: var(--space-2); font-size: 15px; }
  .ex-compare-list li { grid-template-columns: 24px 1fr auto; gap: var(--space-2); font-size: 13px; }
  .ex-sub-card { padding: var(--space-6) var(--space-4); }
  .ex-sub-card h2 { font-size: 28px; }
}