/* Design tokens, named after the Figma variables of "US Consolidated Tape Website"
   (301:110). Components should reference the semantic aliases, not the palette. */

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Figma: color/cyan/* */
  --c-cyan-6: #03181d;   /* Black Pearl  */
  --c-cyan-15: #0c3941;  /* Elephant     */
  --c-cyan-19: #005362;  /* Blue Stone   */
  --c-cyan-26: #017084;  /* Blue Lagoon  */
  --c-cyan-31: #3c5a61;  /* Fiord        */
  --c-cyan-34: #00abaf;  /* Bondi Blue   */
  --c-cyan-45: #627b82;  /* Nevada       */
  --c-cyan-51: #5f9aa5;  /* Breaker Bay — the register modal's middle cap (1772:24811) */
  --c-cyan-56: #7d9aa1;  /* Gumbo — the register modal's placeholder ink (1772:24549) */
  --c-cyan-65: #96b0b7;  /* Gull Gray    */
  --c-cyan-79: #b9d5dc;  /* Ziggurat     */
  --c-cyan-86: #d1e3e8;  /* Botticelli   */
  --c-grey-46: #757575;  /* Boulder — the FAQ search placeholder, 1011:12651 */
  --c-grey-92: #e2eef1;  /* Catskill White — the register modal's footer rule (1772:24835) */
  --c-grey-93: #e8f1f4;  /* Catskill White */
  --c-grey-95: #eef5f7;
  --c-grey-96: #f2f8f9;  /* Catskill White — the FAQ summary row, 1699:21320 */
  --c-grey-99: #fbfdfd;  /* Catskill White */
  --c-white: #ffffff;

  --c-cyan-6-94: rgba(3, 24, 29, 0.94); /* Black Pearl 94% */
  --c-cyan-86-25: rgba(209, 227, 232, 0.25);
  --c-cyan-86-55: rgba(209, 227, 232, 0.55);
  --c-grey-95-75: rgba(238, 245, 247, 0.75);
  --c-cyan-6-18: rgba(3, 24, 29, 0.18);
  --c-cyan-6-25: rgba(3, 24, 29, 0.25);
  --c-cyan-34-22: rgba(0, 171, 175, 0.22);
  --c-cyan-86-14: rgba(209, 227, 232, 0.14);
  --c-cyan-86-12: rgba(209, 227, 232, 0.12);

  --color-accent: var(--c-cyan-34);
  --color-heading: var(--c-cyan-19);
  --color-heading-strong: var(--c-cyan-15);
  --color-body: var(--c-cyan-31);
  --color-muted: var(--c-cyan-45);
  --color-link: var(--c-cyan-26);
  --color-on-dark: var(--c-cyan-86);
  --color-on-dark-muted: var(--c-cyan-65);

  --bg-page: var(--c-grey-99);
  --bg-page-alt: var(--c-grey-95);
  --bg-deep: var(--c-cyan-19);
  --bg-darkest: var(--c-cyan-6);

  --border-rule: var(--c-cyan-86);
  --border-rule-strong: var(--c-cyan-65);
  --border-on-dark: var(--c-cyan-86-25);
  --border-on-dark-faint: var(--c-cyan-86-12);
  --border-nav: var(--c-cyan-86-14);
  --bg-nav: var(--c-cyan-6-94);
  /* The register modal's backdrop. Light on purpose: 1772:24808 draws no backdrop
     at all, so this only has to say "the page is out of reach" without competing
     with the card's own drop shadow. */
  --backdrop-modal: var(--c-cyan-6-18);

  --font-sans: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-arrow: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  /* 315:1993 — Lucida Grande's ✓ is far heavier than the sans stack's. */
  --font-tick: 'Lucida Grande', 'Apple Symbols', 'Segoe UI Symbol', var(--font-sans);

  --fw-regular: 400;
  /* Figma's link-hover weight. Resolves to Regular until a Medium face is bundled. */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-10: 10px;
  --fs-10-5: 10.5px; /* 1676:13834 — the Policies change-notice button */
  --fs-11: 11px;
  --fs-11-5: 11.5px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-14-5: 14.5px; /* 1772:24856 — the accepted panel's copy */
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px; /* 1772:24854 — "Thank you, <name>." */
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-25: 25px; /* 1216:17396 — the Fees claim */
  --fs-26: 26px;
  --fs-27: 27px; /* 1772:24817 — the register modal's heading */
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-54: 54px;
  --fs-60: 60px;
  --fs-62: 62px;
  --fs-84: 84px;
  --fs-108: 108px;

  /* Read off the 1024px and 768px frames; fractional because the design scales
     the desktop ramp by 0.8 and 0.6 and keeps the result. */
  --fs-22-5: 22.5px; /* h3  @1024 */
  --fs-34: 34px; /* h2  @576  */
  --fs-38-4: 38.4px; /* h2  @768  */
  --fs-43-8: 43.8px; /* h1  @576  */
  --fs-51-2: 51.2px; /* h2  @1024 */
  --fs-58-4: 58.4px; /* h1  @768  */
  --fs-64: 64px; /* h1  @1024 */

  /* 982:9575 / 988:9617 — the FAQ signs are 24px glyphs in stated boxes: 32px
     makes a question row 73px tall, 16px keeps a group rule on 48. */
  --lh-16: 16px;
  --lh-20: 20px;
  --lh-21: 21px;
  --lh-22: 22px;
  --lh-22-4: 22.4px;
  --lh-23: 23px;
  --lh-23-93: 23.93px; /* accepted panel copy 14.5 (1772:24856) */
  --lh-24: 24px;
  --lh-25-6: 25.6px; /* subscribe success lead 16 (315:1996) */
  --lh-26: 26px; /* FAQ ask-card copy 16 (998:12445) */
  --lh-26-4: 26.4px; /* note title 20 @768/@576 */
  --lh-27: 27px; /* FAQ question 17 (982:9574) */
  --lh-28: 28px;
  --lh-29-7: 29.7px; /* register modal heading 27 (1772:24817) */
  --lh-30-4: 30.4px; /* hero intro 19 @1710 */
  --lh-32: 32px;
  --lh-33: 33px;
  --lh-35-2: 35.2px;
  --lh-86: 86px;
  --lh-56-16: 56.16px;
  --lh-63-24: 63.24px;
  --lh-105-84: 105.84px;

  /* Paired with the narrow tiers' sizes above. */
  --lh-27-2: 27.2px; /* body 17 @1024 / @768 */
  --lh-29-45: 29.45px; /* h3 19 @768/@576; body 19 @576 */
  --lh-31-35: 31.35px; /* intro 19 @1440/1024/576 */
  --lh-34-68: 34.68px; /* h2 34   @576        */
  --lh-34-92: 34.92px; /* h3 22.5 @1024       */
  --lh-39-17: 39.17px; /* h2 38.4 @768        */
  --lh-42-9: 42.9px; /* h1 43.8 @576          */
  --lh-52-22: 52.22px; /* h2 51.2 @1024       */
  --lh-57-2: 57.2px; /* h1 64/58.4 @1024/768  */

  --ls-tight-3: -3.24px;
  --ls-tight-252: -2.52px;
  --ls-tight-2: -1.86px;
  --ls-tight-1: -1.62px;
  --ls-tight-sm: -0.9px;
  --ls-tight-xs: -0.19px;
  --ls-tight-18: -1.8px;
  --ls-tight-017: -0.17px;
  --ls-tight-025: -0.25px;
  --ls-tight-05: -0.5px;
  --ls-tight-054: -0.54px;   /* 1772:24817 */
  --ls-tight-0315: -0.315px; /* 1772:24854 */
  --ls-wide-04: 0.4px;
  --ls-wide-096: 0.96px;
  --ls-wide-1: 1px;
  --ls-wide-14: 1.4px;
  --ls-wide-147: 1.47px;
  --ls-wide-104: 1.04px;
  --ls-wide-11: 1.1px;
  --ls-wide-12: 1.2px;
  --ls-wide-132: 1.32px;
  --ls-wide-138: 1.38px;
  --ls-wide-154: 1.54px;
  --ls-wide-161: 1.61px;
  --ls-wide-182: 1.82px;
  --ls-wide-192: 1.92px;
  --ls-wide-198: 1.98px;
  --ls-wide-21: 2.1px; /* 1772:24816 — the register modal's eyebrow */
  --ls-wide-22: 2.2px;

  /* Figma: item spacing/* */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-4-75: 4.75px; /* stacked table: heading to value */
  --sp-6: 6px; /* 1699:21330 — the FAQ answer's bullet marker */
  --sp-7: 7px;
  --sp-8: 8px;
  --sp-9: 9px;
  --sp-9-4: 9.4px;   /* accepted panel, between its three lines (1772:24850) */
  --sp-9-85: 9.85px; /* register modal, eyebrow to heading (1772:24814) */
  --sp-10: 10px;
  --sp-11: 11px;
  --sp-11-8: 11.8px; /* subscribe success panel (315:1991) */
  --sp-12: 12px;
  --sp-12-44: 12.445px;
  --sp-13: 13px;
  --sp-14: 14px;
  --sp-15: 15px;
  --sp-15-99: 15.99px; /* accepted body, panel to actions (1772:24849) */
  --sp-16: 16px;
  --sp-17: 17px;
  --sp-17-99: 17.99px; /* FAQ bar: count to Expand all (1011:12674) */
  --sp-18: 18px;
  --sp-19: 19px; /* the register modal's fields sit 19 over the rule (1772:24824) */
  --sp-19-3: 19.3px;
  --sp-20: 20px;
  --sp-21: 21px; /* 1772:24860 — the accepted panel's outline link */
  --sp-22: 22px;
  --sp-23-44: 23.445px; /* register modal body, top (1772:24820) */
  --sp-24: 24px;
  --sp-24-01: 24.01px;
  --sp-26: 26px;
  --sp-27: 27px;
  --sp-28: 28px;
  --sp-30: 30px; /* register modal head, top (1772:24813); its buttons' inline pad */
  --sp-32: 32px;
  --sp-33: 33px;
  --sp-34: 34px;
  --sp-35: 35px;
  --sp-36: 36px;       /* the register modal's gutter (1772:24813) */
  --sp-36-01: 36.01px; /* its form body's bottom (1772:24820) */
  --sp-37: 37px;
  --sp-40: 40px;
  --sp-41: 41px;
  --sp-44: 44px;
  --sp-48: 48px;
  --sp-52: 52px;
  --sp-56: 56px;
  --sp-64: 64px;

  /* 62px nav row + 2 x 14.5px padding + the 1px rule. */
  --header-height: 92px;
  --page-gutter: 35px;
  --container-max: 1640px;
  --container-pad: 40px;

  /* One rail geometry for every section — see the note in components.css. */
  --rail-width: 210px;
  --rail-gap: 28px;
  --rail-border: 2px;
  --rail-marker: 10px;

  /* 451:1970 — the footer's wider shell lands its divider on the sections' rail x:
     52px wider, and a 9px gutter rather than Figma's 8. */
  --footer-gutter: 9px;
  --footer-container-max: calc(var(--container-max) + 52px);
  --footer-rail-width: 236px;
  --footer-rail-gap: 26px;

  --content-width: 1350px;

  /*
   * One token per chain: the rail, the copy column, Subscribe and the Footer each
   * carry their own vertical ramp in Figma, and sharing one drifts up to 24px at 1024.
   *
   *              1710   1440   1024    768
   *   rail         76     76     76     18   (301:770, 804:6404, 822:14977)
   *   content y    72     64     52     20   (301:1216, 804:6413, 822:14986)
   *   content x    64     58     40      0   (same nodes)
   *   subscribe    76     76     76     38   (455:2259, 822:15470, 870:3546)
   *   footer x     64     64     41      0   (805:7168, 822:15493)
   */
  --rail-pad-y: 76px;
  --content-pad-x: 64px;
  --content-pad-y: 72px;
  --subscribe-pad-x: 64px;
  --subscribe-pad-y: 76px;
  --footer-pad-x: 64px;

  /* 301:1215 — between whole blocks; 301:1218 — inside one. Both step per frame. */
  --block-gap: var(--sp-40);
  --prose-gap: var(--sp-20);

  /* Content pages — Policies (580:2215), Fees (580:2612), Agreements (580:2859).
     Sections below reuse the home copy column: the Fees and Agreements frames
     draw a 28px gutter, 7px off the Subscribe and Footer rails on the same page. */
  --banner-height: 228px;
  --banner-max: 1336px;
  --banner-pad-x: 48px;
  /* 1216:17370 / 598:4883 — the doc column runs on the copy column's 72px band and
     pads the left only, so the card and the tables reach the 1240 they are drawn at.
     Both step back to the pre-August values at 1440, where no frame draws a card. */
  --doc-pad-y: var(--content-pad-y);
  --doc-pad-right: 0px;
  --doc-tag-width: 130px;    /* ELIMINATED / GONE / RETIRED column */
  --doc-note-width: 80px;    /* the 01 / 02 / 03 index column      */
  /* The document card's spec panel. The design scales it rather than pinning
     it, so responsive.css swaps in the fluid share below the design width. */
  --doc-card-aside: 421px;
  --doc-card-aside-fluid: 33.95%;

  /* Hero box (301:163): 1456px centred, 48px padding -> copy on x=175. Narrower
     frames pad the full width, so responsive.css overrides the width not the pad. */
  --hero-width: 1456px;
  --hero-pad: 48px;
  --hero-pad-top: 64px;
  --hero-inner-height: 933px;
  --hero-height: 977.5px; /* Figma 301:158, measured from the nav's bottom */
  /* 301:169 — both step per frame, which is why they are tokens. */
  --hero-body-pad-top: 95.42px;
  --hero-body-gap: var(--sp-34);
  --hero-pad-bottom: 96px;
  /* 301:164 — the extra 16px at the narrow tiers is space under the label,
     not a taller label. */
  --hero-meta-pad-bottom: 0px;
  --hero-meta-pad-top: 15px;

  --measure-240: 240px;
  --measure-254: 254px;   /* Figma 1011:12646 FAQ search field, min */
  --measure-440: 440px;
  --measure-520: 520px;   /* Figma 998:12444 FAQ ask-card copy */
  --measure-560: 560px;
  --measure-620: 620px;   /* Figma 1772:24808 register modal */
  --measure-760: 760px;
  --measure-778: 778px;   /* Figma 301:177 hero intro */
  --measure-820: 820px;   /* Figma 998:12426 FAQ heading + lead */
  --measure-882: 882px;
  --measure-900: 900px;
  --measure-1000: 1000px;
  --measure-1077: 1077px; /* Figma 998:12438 FAQ ask card   */
  --measure-1192: 1192px; /* Figma 1011:12679 FAQ search bar   */
  --measure-1240: 1240px; /* Figma 598:4888 fee-summary table */
  --measure-1428: 1428px; /* Figma 301:170 hero h1 */

  /*
   * FAQ page — its blocks are narrower than the column itself, so it carries its own
   * chain. Frames 998:12425 (1720), 1069:17744 (1440), 1040:13781 (1024), 1085:20068.
   *
   *              1720   1440   1024    768
   *   pad top      76     76     52     20   (998:12426, 1069:17745, 1040:13782)
   *   pad bottom   84     84     52     20   (998:12425, 1040:13637, 1085:20068)
   *   pad right    64      0      0      0   (see the note below)
   *   stack gap    28     28     28     20   (gap between the blocks)
   *   search bar 1192   1000    752    691   (1011:12679 … 1108:3452)
   *   ask card   1077   1000    752    691   (998:12438 … 1108:3643)
   *   groups     1000   1000    752    691   (998:12432 … 1108:3486)
   *
   * Padding top is the rail's own band: the frames put the h2 on the same y as the
   * SEQ label. Padding right is 0 below the design width: the frames leave the
   * blocks' own caps to decide the right edge.
   */
  --faq-pad-y: var(--rail-pad-y);
  --faq-pad-y-end: 84px;
  --faq-pad-right: var(--content-pad-x);
  --faq-stack-gap: var(--sp-28);
  --faq-bar-max: var(--measure-1192);
  --faq-ask-max: var(--measure-1077);
  --faq-block-max: var(--measure-1000);

  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px; /* 998:12438 — the FAQ ask card's accent edge */

  --radius-0: 0;
  --radius-full: 50%;

  --shadow-text: 0 1px 10px rgba(0, 0, 0, 0.5);
  /* 1772:24808 — the register modal's only separation from the page: the frame
     draws a drop shadow and no backdrop behind it. */
  --shadow-modal: 0 24px 40px rgba(3, 24, 29, 0.5);

  --t-fast: 150ms ease;
  --t-base: 220ms ease;
  /* Long enough that the tape wall over its still reads as the board lighting up. */
  --t-slow: 600ms ease;
  /* How far the register modal rises as it opens. */
  --lift-modal: 12px;

  --z-rail: 2;
  --z-content: 1;
  --z-nav: 50;
  --z-float: 40;
}