/* ==========================================================================
   Trade Goal — Mission Plot, on the web.

   The app's design system (DESIGN.md at the repo root) carried onto a page.
   Every colour below is a NIGHT value from `MP.Ink`; the DAY half of the
   system appears on this page as content — inside the phone — rather than as
   a theme, because the visitor is a trader at a screen beside a broker app,
   and this surface commits to the instrument's own ground.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type — B612 Bold/Regular, drawn by Airbus with ENAC for cockpit screens.
   SIL Open Font License 1.1; see assets/fonts/OFL.txt.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "B612";
  src: url("assets/fonts/B612-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "B612";
  src: url("assets/fonts/B612-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ground → surface → field. A strict value ladder; the field is always
     denser than the raised surface. */
  --ground: #060917;
  --sky: #0a1030;
  --surface: #0d1226;
  --field: #131a38;
  --rule: #23305e;
  /* The boundary value for an operable control, where 1.4.11 wants 3:1 and the
     decorative hairline measures 1.47 against the panel's own fill. Used on the
     segmented tracks and nowhere else: container edges and row separators are
     decorative and keep --rule, and at this value an outer border becomes the
     loudest edge on the page. */
  --rule-strong: #4e5f9b;
  --grid: #35447a;

  /* One job per colour. Violet is structure and never money. */
  --plot: #7b61ff;
  /* The same role, darkened 6%, for the one place white type sits *on* violet:
     at #7b61ff that pair measures 4.20:1 and misses AA for a button label. The
     system already has this precedent — DESIGN.md records burn-day being
     darkened from #B87503 for exactly the same reason. Lines, borders, tint and
     violet type keep the undarkened role. */
  --plot-fill: #745bf0;
  --plot-fill-hover: #6c55e0;
  --live: #5ad8f5;
  --profit: #34d399;
  --loss: #ff5a5f;
  --burn: #f5a524;

  --primary: #f0f3ff;
  --secondary: #94a0c8;
  --on-fill: #ffffff;

  /* Three radii, all continuous in spirit. Nothing above 20. */
  --r-tight: 8px;
  --r-panel: 14px;
  --r-plate: 20px;

  /* Seven-step ramp, used verbatim. */
  --s-hair: 1px;
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 12px;
  --s-l: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;

  /* Page rhythm — the web's own steps above the app's ramp. */
  --s-3xl: 48px;
  --s-4xl: 68px;
  --s-5xl: 92px;

  --display: "B612", ui-sans-serif, system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    ui-sans-serif, system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 56px);
  --measure: 68ch;

  /* Motion. `landing` is the app's plotLanding spring approximated;
     `sweep` is launchSweep, reserved for the one authored moment. */
  --landing: 420ms cubic-bezier(0.22, 1, 0.36, 1);
  --sweep: 700ms cubic-bezier(0.16, 1, 0.3, 1);
  --quick: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Reset and browser surfaces — the parts we did not draw still carry the design
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--rule) var(--ground);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--primary);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: color-mix(in srgb, var(--plot) 34%, transparent);
  color: var(--primary);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--ground);
}
::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 99px;
  border: 3px solid var(--ground);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--grid);
}

:focus-visible {
  outline: 2px solid var(--plot);
  outline-offset: 3px;
  border-radius: var(--s-xs);
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--s-s);
  left: var(--s-s);
  z-index: 100;
  padding: var(--s-m) var(--s-l);
  background: var(--plot);
  color: var(--on-fill);
  border-radius: var(--r-tight);
  transform: translateY(-160%);
  transition: transform var(--quick);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Instrument voice
   -------------------------------------------------------------------------- */

/* The plot's annotation voice: cockpit lettering, tracked wide, uppercase.
   Applied only through this class, so tracking and case never drift. */
.annot {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary);
  line-height: 1.4;
}

/* Every figure is a quantity compared against another quantity, so digits
   never shift width as values change. */
.fig {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}

.profit {
  color: var(--profit);
}
.burn {
  color: var(--burn);
}
.live {
  color: var(--live);
}
.muted {
  color: var(--secondary);
}

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Separation is a 1px line in the rule colour, never a border box and never a
   shadow. */
.hair {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Navigation — two pills on the ground
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--s-l) 0;
  pointer-events: none;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-l);
}

.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-s);
  padding: 9px 18px 9px 14px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--rule);
  border-radius: 99px;
}

.nav__mark {
  width: 18px;
  height: 18px;
  color: var(--plot);
  flex: none;
}

.nav__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 6px 6px 6px 10px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--rule);
  border-radius: 99px;
}

.nav__link {
  padding: 7px 12px;
  font-size: 14px;
  color: var(--secondary);
  text-decoration: none;
  border-radius: 99px;
  transition: color var(--quick), background var(--quick);
  white-space: nowrap;
}
.nav__link:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--plot) 12%, transparent);
}

@media (max-width: 900px) {
  .nav__link {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-s);
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--r-panel);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--quick), border-color var(--quick),
    color var(--quick), transform var(--quick);
}

.btn--primary {
  background: var(--plot-fill);
  color: var(--on-fill);
}
/* Deeper on hover rather than brighter: lightening a violet under white type
   is the one direction that costs contrast. */
.btn--primary:hover {
  background: var(--plot-fill-hover);
}
.btn--primary:active {
  transform: translateY(1px);
}

.btn--ghost {
  border: 1px solid var(--rule);
  color: var(--primary);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--plot);
  color: var(--plot);
}

.btn--compact {
  border-radius: var(--r-tight);
  padding: 9px 16px;
  min-height: 38px;
  font-size: 13px;
}

.btn__glyph {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--s-5xl);
  position: relative;
}

/* Sections whose tallest column already opens a wide field beneath the short
   ones do not also need a full band of padding under it. */
.section--tall {
  padding-bottom: var(--s-3xl);
}

/* A pool of sky rather than a band of it. A vertical wash inside a section
   ends on a hard edge against the next section's ground; feathering it to
   transparent on every side means the page has atmosphere and no seams. */
.section--washed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 78% at 50% 50%, var(--sky), transparent 70%);
  pointer-events: none;
}

.section > .wrap {
  position: relative;
  z-index: 1;
}

.section__head {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--s-4xl);
}

/* One heading rule, whether the heading sits in a centred section head or
   leads a two-column section on its own. */
.section__head h2,
.section__title {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* The body voice beneath a section heading, wherever that heading leads a
   two-column section rather than a centred head. */
.section__lede {
  margin-top: var(--s-xl);
  max-width: 52ch;
  color: var(--secondary);
  line-height: 1.62;
  text-wrap: pretty;
}

.section__lede--tight {
  margin-top: var(--s-l);
  max-width: 50ch;
}

.section__head p {
  margin-top: var(--s-l);
  color: var(--secondary);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Hero — the instrument at page scale
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(24px, 3.4vw, 44px);
  padding-bottom: var(--s-4xl);
  background: linear-gradient(to top, var(--sky), var(--ground) 78%);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 17ch;
}

.hero__lede {
  margin-top: var(--s-xl);
  max-width: 44ch;
  color: var(--secondary);
  font-size: 16px;
  line-height: 1.62;
  text-wrap: pretty;
}

.hero__actions {
  margin-top: var(--s-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-m);
}

.hero__spec {
  margin-top: var(--s-l);
  color: var(--secondary);
  font-size: 13px;
}

/* The docked answer. In the app this ticket rides a bottom safe-area inset over
   `.bar` with a hairline along its top edge; here it does the same across the
   foot of the first screen. */
.dock {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin: var(--s-4xl) 0 0;
  padding-top: var(--s-xl);
  border-top: 1px solid var(--rule);
}

.dock__figure {
  display: block;
  margin-top: var(--s-s);
  font-size: clamp(38px, 5vw, 64px);
}

.dock__ledger {
  align-self: end;
  padding-bottom: 6px;
  width: 100%;
}

.dock__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-l);
  padding-block: 7px;
  font-size: 14px;
}

.dock__row + .dock__row {
  border-top: 1px solid color-mix(in srgb, var(--rule) 50%, transparent);
}

.dock__row dt {
  color: var(--secondary);
}

.dock__row dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dock__struck {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--secondary) 70%, transparent);
  color: var(--secondary);
}

.dock__state {
  text-align: right;
  padding-bottom: 6px;
}

.dock__return {
  margin-top: var(--s-s);
  font-size: 13px;
  color: var(--secondary);
  white-space: nowrap;
}

.dock__return .fig {
  font-size: 15px;
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--profit) 14%, transparent);
  color: var(--profit);
}

/* The plot itself */
.plotcard {
  position: relative;
}

.plotcard__reg {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-l);
  padding-bottom: var(--s-s);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-l);
  flex-wrap: wrap;
}

.plot {
  display: block;
  width: 100%;
  height: auto;
}

/* Type inside the SVG is measured in viewBox units, so it shrinks with the
   container. These sizes are stepped up as the plot narrows to hold the
   annotation voice at its 11pt floor rather than letting the axis smear. */
.plot__axis,
.plot__value {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plot__axis {
  font-size: 13px;
  letter-spacing: 1px;
}

.plot__value {
  font-size: 16px;
}

@media (max-width: 1180px) {
  .plot__axis {
    font-size: 16px;
    letter-spacing: 1.2px;
  }
  .plot__value {
    font-size: 19px;
  }
}

@media (max-width: 940px) {
  .plot__axis {
    font-size: 13px;
    letter-spacing: 1px;
  }
  .plot__value {
    font-size: 16px;
  }
}

@media (max-width: 700px) {
  .plot__axis {
    font-size: 22px;
    letter-spacing: 1.6px;
  }
  .plot__value {
    font-size: 26px;
  }
}

.plotcard__caption {
  margin-top: var(--s-m);
  font-size: 13px;
  color: var(--secondary);
}

@media (max-width: 560px) {
  /* Two actions of different widths stacked read as ragged, not as a hierarchy.
     Give them one edge. */
  .hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__actions .btn,
  .close__actions .btn {
    width: 100%;
  }
  .close__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 940px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4xl);
  }
  .hero h1 {
    max-width: 18ch;
  }
  .dock {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-areas:
      "answer state"
      "ledger ledger";
    align-items: end;
    gap: var(--s-xl);
    margin-top: var(--s-xxl);
  }
  .dock__answer {
    grid-area: answer;
  }
  .dock__state {
    grid-area: state;
  }
  .dock__ledger {
    grid-area: ledger;
    max-width: none;
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   The demo — screens list, phone, controls. Nothing in this layout moves.
   -------------------------------------------------------------------------- */

.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 288px);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}

.col__label {
  display: block;
  margin-bottom: var(--s-m);
}

/* Left: the screen register */
.screens {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.screen-btn {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s-m);
  width: 100%;
  text-align: left;
  padding: var(--s-m);
  border-radius: var(--r-tight);
  border: 1px solid transparent;
  transition: background var(--quick), border-color var(--quick);
}

.screen-btn:hover {
  background: color-mix(in srgb, var(--field) 60%, transparent);
}

/* Selection is derived from state, and the live item wears Plot Violet —
   14% fill, 1px stroke, violet label — exactly as a live preset chip does. */
/* The live item wears Plot Violet — 14% fill, 1px stroke, violet glyph — the
   way a live preset chip does in the app. The title stays instrument white:
   violet type on a violet tint measures 3.8:1, and the state is already said
   three other ways (fill, stroke, glyph) plus aria-current. */
.screen-btn[aria-current="true"] {
  background: color-mix(in srgb, var(--plot) 14%, transparent);
  border-color: var(--plot);
}
.screen-btn[aria-current="true"] .screen-btn__glyph {
  color: var(--plot);
}
.screen-btn[aria-current="true"] .screen-btn__title {
  color: var(--primary);
}

.screen-btn__glyph {
  width: 22px;
  height: 22px;
  color: var(--secondary);
  margin-top: 1px;
  transition: color var(--quick);
}

.screen-btn__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  transition: color var(--quick);
}

.screen-btn__desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--secondary);
  text-wrap: pretty;
}

.screens__note {
  margin-top: var(--s-l);
  padding-top: var(--s-l);
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--secondary);
}

/* Centre: the phone. Case plate → bezel → screen, no shadow anywhere. */
.phone {
  --screen-w: 288px;
  width: calc(var(--screen-w) + 26px);
  margin-inline: auto;
  padding: 13px;
  border-radius: 54px;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.phone__bezel {
  border-radius: 42px;
  padding: 3px;
  background: #01030c;
  overflow: hidden;
}

.phone__screen {
  position: relative;
  border-radius: 39px;
  overflow: hidden;
  aspect-ratio: 1206 / 2622;
  background: var(--ground);
}

.phone__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--quick);
}

.phone__screen img.is-live {
  opacity: 1;
}

.phone__caption {
  margin-top: var(--s-l);
  text-align: center;
  font-size: 12.5px;
  color: var(--secondary);
}

/* Right: the control panel */
/* The container's own edge is decorative, so it takes the ordinary hairline.
   Only the segmented tracks inside it are operable controls owing 3:1 — at
   --rule-strong this outline became the brightest edge in the section and
   out-shouted the phone it exists to serve. */
.panel {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  overflow: hidden;
}

.panel__row {
  padding: var(--s-l);
}

.panel__row + .panel__row {
  border-top: 1px solid var(--rule);
}

.panel__row > .annot {
  display: block;
  margin-bottom: var(--s-m);
}

/* Segmented control — a white-ish knob on a field track, the platform shape */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  background: var(--field);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-tight);
}

.seg button {
  min-height: 34px;
  padding: 6px 4px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--secondary);
  transition: background var(--quick), color var(--quick);
}

.seg button:hover:not([aria-pressed="true"]) {
  color: var(--primary);
}

.seg button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--plot) 20%, transparent);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--plot);
}

/* Disabled chips drop to secondary text and the group to 0.6, and a hint line
   says what to do — a tap can never silently mean nothing. */
.panel__row[data-disabled="true"] .seg {
  opacity: 0.6;
}
.panel__row[data-disabled="true"] .seg button {
  cursor: not-allowed;
  color: var(--secondary);
  background: none;
  box-shadow: none;
}

.panel__note {
  margin-top: var(--s-m);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--secondary);
  text-wrap: pretty;
  /* The copy changes; the box does not. Sized to the longest note so the panel
     never grows a line under the reader's hand. */
  min-height: 6em;
}

.panel__readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-s);
  font-size: 13px;
  flex-wrap: wrap;
}

.panel__readout .fig {
  font-size: 13px;
}

.panel__foot {
  margin-top: var(--s-l);
}

@media (max-width: 1080px) {
  .demo__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 288px);
    grid-template-areas:
      "phone phone"
      "screens panel";
    gap: var(--s-xxl);
  }
  .demo__screens {
    grid-area: screens;
  }
  .demo__phone {
    grid-area: phone;
  }
  .demo__panel {
    grid-area: panel;
  }
  .screens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-s);
  }
}

@media (max-width: 720px) {
  .demo__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "phone"
      "screens"
      "panel";
  }
  .screens {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Burn strip — the magnified register for borrow cost
   -------------------------------------------------------------------------- */

.burnsec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.compare__cell {
  padding: var(--s-xl) var(--s-l) var(--s-xl) 0;
}

.compare__cell + .compare__cell {
  padding-left: var(--s-xl);
  border-left: 1px solid var(--rule);
}

.compare__fig {
  display: block;
  margin-top: var(--s-m);
  font-size: clamp(26px, 3.4vw, 38px);
}

.compare__sub {
  margin-top: var(--s-s);
  font-size: 13px;
  color: var(--secondary);
}

.burnstrip {
  margin-top: var(--s-4xl);
}

.burnstrip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-l);
  margin-bottom: var(--s-m);
}

.burnstrip svg {
  display: block;
  width: 100%;
  height: auto;
}

.burnstrip__ends {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-l);
  margin-top: var(--s-s);
}

.burnstrip__ends div:last-child {
  text-align: right;
}

.burnstrip__ends .fig {
  display: block;
  margin-top: 3px;
  font-size: 15px;
}

@media (max-width: 940px) {
  .burnsec__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4xl);
  }
}

/* --------------------------------------------------------------------------
   Registers — hairline rows, never cards
   -------------------------------------------------------------------------- */

.register {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.register__cell {
  padding: var(--s-xxl) var(--s-xl) var(--s-xxl) 0;
  border-bottom: 1px solid var(--rule);
}

.register--3 .register__cell + .register__cell {
  padding-left: var(--s-xl);
  border-left: 1px solid var(--rule);
}

.register__q {
  margin-top: var(--s-m);
  font-size: 17px;
  line-height: 1.45;
  max-width: 22ch;
  text-wrap: pretty;
}

.register__a {
  display: block;
  margin-top: var(--s-l);
  font-size: clamp(24px, 2.8vw, 32px);
}

.register__answer {
  display: flex;
  align-items: center;
  gap: var(--s-m);
  flex-wrap: wrap;
  margin: 0;
}

/* One of only two objects in the system allowed a capsule, and it is stroked
   rather than filled. */
.badge-mult {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s-l);
  padding: 3px 11px;
  border: 1.5px solid color-mix(in srgb, var(--on-fill) 45%, transparent);
  border-radius: 99px;
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.3;
  color: var(--primary);
}

.register__note {
  margin-top: var(--s-s);
  font-size: 12.5px;
  color: var(--secondary);
}

@media (max-width: 860px) {
  .register {
    grid-template-columns: minmax(0, 1fr);
  }
  .register--3 .register__cell + .register__cell {
    padding-left: 0;
    border-left: 0;
  }
  .register__cell {
    padding-right: 0;
  }
}

/* Two-column spec rows */
.specs {
  border-top: 1px solid var(--rule);
}

.spec {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 56px);
  padding-block: var(--s-xl);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.spec__term {
  display: flex;
  align-items: center;
  gap: var(--s-m);
}

/* Annotation grey, not loss red. Red is the only red in the system and it
   describes money lost or a system alert — a commitment marker is neither, and
   the colour law this page just explained applies to this page too. */
.spec__glyph {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--secondary);
}

.spec__title {
  font-size: 16px;
  font-weight: 600;
}

.spec__body {
  color: var(--secondary);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .spec {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-m);
  }
}

/* Colour law */
.law {
  border-top: 1px solid var(--rule);
}

.law__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(12px, 3vw, 40px);
  align-items: center;
  padding-block: var(--s-l);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}

.law__swatch {
  width: 40px;
  height: 22px;
  border-radius: var(--s-xs);
}

.law__name {
  font-size: 14px;
  font-weight: 600;
}

.law__job {
  font-size: 14px;
  color: var(--secondary);
  line-height: 1.5;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .law__row {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: var(--s-xs);
  }
  .law__swatch {
    width: 28px;
    height: 16px;
  }
  .law__job {
    grid-column: 2;
  }
}

/* --------------------------------------------------------------------------
   Pro
   -------------------------------------------------------------------------- */

.pro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.pro__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-m);
  margin-top: var(--s-xl);
}

/* Instrument white, not violet. A price is a monetary quantity, and DESIGN.md
   is unambiguous that violet may never render one — the app's own PaywallView
   agrees; only ProPromoCard departs from it. */
.pro__price .fig {
  font-size: clamp(34px, 4vw, 46px);
  color: var(--primary);
}

.pro__list {
  margin: var(--s-xl) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.pro__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s-m);
  padding-block: var(--s-l);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  font-size: 15px;
  color: var(--secondary);
  line-height: 1.55;
}

.pro__list b {
  color: var(--primary);
  font-weight: 600;
}

.pro__list svg {
  width: 18px;
  height: 18px;
  color: var(--plot);
  margin-top: 2px;
}

.pro__phone {
  --screen-w: 244px;
}

@media (max-width: 860px) {
  .pro__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Close and footer
   -------------------------------------------------------------------------- */

.close {
  position: relative;
  text-align: center;
  padding-top: var(--s-4xl);
  padding-bottom: var(--s-5xl);
}

.close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 86% at 50% 62%, var(--sky), transparent 72%);
  pointer-events: none;
}

.close .wrap {
  position: relative;
  z-index: 1;
}

.close h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 17ch;
  margin-inline: auto;
}

.close__actions {
  margin-top: var(--s-xxl);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-m);
}

.close__mark {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--s-xl);
  color: var(--plot);
}

.footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-4xl);
  font-size: 13px;
  color: var(--secondary);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-4xl);
  align-items: start;
}

.footer__lock {
  display: flex;
  align-items: center;
  gap: var(--s-s);
  color: var(--primary);
  margin-bottom: var(--s-l);
}

.footer__lock svg {
  width: 20px;
  height: 20px;
  color: var(--plot);
}

.footer__disclaimer {
  max-width: 60ch;
  line-height: 1.6;
}

.footer__disclaimer + .footer__disclaimer {
  margin-top: var(--s-m);
}

.footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-s);
}

.footer__meta a {
  color: var(--secondary);
}
.footer__meta a:hover {
  color: var(--primary);
}

.footer__rule {
  margin-block: var(--s-xxl);
}

@media (max-width: 780px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-xxl);
  }
}

/* --------------------------------------------------------------------------
   The one authored moment — the hero trajectory sweeps from zero and the
   break-even rule travels right, because borrowing pushed it there.
   -------------------------------------------------------------------------- */

.js .plot__trace {
  stroke-dasharray: var(--trace-len, 900);
  stroke-dashoffset: var(--trace-len, 900);
}

.js .plot__be,
.js .plot__be-label,
.js .plot__dot,
.js .plot__dot-label {
  opacity: 0;
}

.plot.is-swept .plot__trace {
  animation: trace var(--sweep) forwards;
}

.plot.is-swept .plot__be {
  animation: travel var(--sweep) 180ms forwards;
}

.plot.is-swept .plot__be-label {
  animation: fade 320ms 760ms forwards;
}

.plot.is-swept .plot__dot,
.plot.is-swept .plot__dot-label {
  animation: land var(--landing) 640ms forwards;
}

@keyframes trace {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes travel {
  from {
    transform: translateX(-15px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade {
  to {
    opacity: 1;
  }
}

@keyframes land {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Every token collapses to a crossfade under Reduce Motion, so no call site
   has to remember. */
@media (prefers-reduced-motion: reduce) {
  .js .plot__trace {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .plot.is-swept .plot__trace,
  .plot.is-swept .plot__be,
  .plot.is-swept .plot__be-label,
  .plot.is-swept .plot__dot,
  .plot.is-swept .plot__dot-label {
    animation: fade 150ms forwards;
  }
  .plot.is-swept .plot__be {
    transform: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}