/* ---------------------------------------------------------------------------
   AI Forge

   The product is 399 pages of technical writing, so the page is set like the
   manual it sells: a fixed marginal column carrying section numbers and notes,
   one text column beside it, hairline rules instead of cards, and a single
   spot colour spent only where it means something.

   Everything below comes from four systems and nothing else:
     - 9 colours
     - 6 type steps (4 text, 2 figures) in 3 families
     - 1 spacing scale, 4px based
     - 1 rule weight, with one heavier rule reserved for part breaks
   --------------------------------------------------------------------------- */

:root, [data-theme="dark"] {
  color-scheme: dark;

  /* ------------------------------------------------------------- 9 colours */
  --ink:       #100f0e;   /* the page */
  --ink-2:     #171512;   /* ruled bands */
  --ink-3:     #1f1c18;   /* wells and fills */
  --paper:     #eceae7;   /* primary text */
  --paper-2:   #a09a93;   /* secondary text */
  --paper-3:   #78716a;   /* labels, captions, figures at rest */
  --rule:      #262220;   /* the hairline */
  --rule-2:    #37312c;   /* part breaks, emphasised edges */
  --spot:      #ff8124;   /* the one accent, matched to the mark */

  /* spent deliberately: CTA, one headline clause, the discount, current state */
  --spot-ink:  #120d08;
  --spot-wash: color-mix(in srgb, var(--spot) 10%, transparent);
  --spot-rule: color-mix(in srgb, var(--spot) 30%, transparent);

  /* --------------------------------------------------------- 6 type steps */
  --t-label: 11px;                          /* mono, uppercase, tracked */
  --t-fine:  13px;
  --t-note:  14px;                          /* secondary running text */                          /* captions, notes, fine print */
  --t-body:  15px;                          /* running text */
  --t-lede:  17px;                          /* section openers */
  --t-cover: clamp(15.5px, 1.2vw, 17.5px);  /* the long form blocks, set in the serif */
  --t-h3:    19px;
  --t-h2:    clamp(25px, 2.6vw, 31px);
  --t-fig:   clamp(30px, 3.4vw, 42px);      /* the figures in tables */
  --t-price: clamp(46px, 6vw, 74px);        /* one figure only */

  --lead-snug:  1.3;
  --lead-body:  1.62;
  --track-wide: 0.12em;                     /* mono labels */
  --track-tight: -0.025em;                  /* display */

  /* ------------------------------------------------------------ 1 spacing */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-prose: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --mgn: 148px;            /* the marginal column, the page's one alignment law */
  --page: 1180px;
  --gutter: clamp(20px, 4vw, 52px);
  --grid: 32px;

  /* aliases the canvas scene reads */
  --background: var(--ink); --surface: var(--ink-2); --surface-raised: var(--ink-3);
  --foreground: var(--paper); --muted-foreground: var(--paper-2); --subtle-foreground: var(--paper-3);
  --border: var(--rule); --border-strong: var(--rule-2);
  --brand: var(--spot); --brand-foreground: var(--spot-ink); --brand-text: var(--spot);
  --brand-subtle: var(--spot-wash); --brand-border: var(--spot-rule);
  --ring: color-mix(in srgb, var(--spot) 45%, transparent);
}

[data-theme="light"] {
  color-scheme: light;
  --ink: #f7f5f1; --ink-2: #fffefd; --ink-3: #f0ece5;
  --paper: #171412; --paper-2: #524c46; --paper-3: #7d766e;
  --rule: #e3ded5; --rule-2: #cec7bb;
  --spot: #c0510d; --spot-ink: #ffffff;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  margin: 0; padding-bottom: var(--s8);
  overflow-x: hidden;
  background-color: var(--ink);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--rule) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--rule) 55%, transparent) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lead-body);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 80% at 50% 0%, transparent, var(--ink) 72%);
}

/* the bound page: one column of content held between two margin rules */
.wrap {
  position: relative; z-index: 1;
  max-width: var(--page); margin-inline: auto;
  padding-inline: var(--gutter);
  border-inline: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 76%, transparent);
}

/* ------------------------------------------------------------------ type */
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
h1 {
  font-weight: 600; font-size: var(--t-h2); line-height: var(--lead-snug);
  letter-spacing: -0.014em; margin: 0 0 var(--s5); max-width: 46ch;
}
h1 .b { color: var(--spot); }
h2 { font-weight: 600; font-size: var(--t-h2); line-height: var(--lead-snug); letter-spacing: -0.014em; }
h3 { font-weight: 600; font-size: var(--t-h3); line-height: var(--lead-snug); letter-spacing: -0.014em; }
p { margin: 0 0 var(--s3); color: var(--paper-2); }
.lede { font-size: var(--t-lede); color: var(--paper-2); max-width: 58ch; margin-block: var(--s3) var(--s6); }
.fine { font-size: var(--t-fine); color: var(--paper-3); margin: 0; }
strong { color: var(--paper); font-weight: 600; }
a { color: var(--paper); text-decoration-color: var(--spot-rule); text-underline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
code { font-family: var(--font-mono); font-size: .92em; color: var(--paper); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s4); }

/* one label treatment, used for every label on the page */
.mgn-k, .mgn-n, .track-u, .stat .l, .keyed dt, .bar-row .k, .ribbon, .navlink,
.scene-caption .step, footer.site, .rule-note, .pricing .per {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: var(--track-wide); text-transform: uppercase;
}

/* ---------------------------------------------------------------- masthead */
header.site {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(8px);
}
header.site.stuck { border-bottom-color: var(--rule-2); }
.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-body);
  letter-spacing: -0.01em; color: var(--paper); text-decoration: none;
}
.brand img, .brand .mark { width: 24px; height: 24px; display: block; }
header.site nav { display: flex; align-items: center; gap: var(--s2); }
.navlink { color: var(--paper-3); text-decoration: none; padding-inline: var(--s2); }
.navlink:hover { color: var(--paper); }

/* ----------------------------------------------------------------- buttons
   Two states, no third style: a filled block for the one action that matters
   and a ruled block for everything else. The label shifts, not the box. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 44px; padding-inline: var(--s4); border: 1px solid var(--rule-2);
  font-family: var(--font-sans); font-size: var(--t-note); font-weight: 600; letter-spacing: -0.008em;
  color: var(--paper); background: transparent; text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .22s cubic-bezier(.22,1,.36,1); }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { border-color: var(--paper-3); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--ring); }
.btn-primary { background: var(--spot); border-color: var(--spot); color: var(--spot-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--spot) 88%, #fff); border-color: var(--spot); }
.btn-lg { height: 50px; padding-inline: var(--s5); font-size: var(--t-body); }
header.site .btn { height: 34px; padding-inline: var(--s3); font-size: 13px; }

/* ------------------------------------------------------------ the sheet grid
   Every section is the same two columns: the margin, then the text. This is
   the page's signature, and the reason the whole document reads as one thing. */
.sheet {
  display: grid; grid-template-columns: var(--mgn) minmax(0, 1fr);
  column-gap: var(--s6); align-items: start;
  padding-block: var(--s8);
  border-top: 1px solid var(--rule);
}
.sheet:first-of-type { border-top: 0; }
.hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--s6) var(--s8); }
.mgn { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s1); }
.mgn-n { color: var(--spot); }
.mgn-k { color: var(--paper-3); }
.mgn-note {
  font-family: var(--font-mono); font-size: var(--t-fine); line-height: 1.7;
  color: var(--paper-3); margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}

/* two columns inside the text column, deliberately uneven */
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: var(--s7); }
.split-price { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

/* ------------------------------------------------------------------- figure */
.mapbox { border: 1px solid var(--rule-2); background: var(--ink-2); }
.fig { margin: 0 0 var(--s6); }
#scene { border: 1px solid var(--rule-2); background: var(--ink-2); }
#scene { display: block; width: 100%; height: auto; aspect-ratio: 900 / 440; max-height: 460px; margin-bottom: 0; }
.scene-caption {
  display: flex; flex-wrap: nowrap; margin-top: var(--s4);
  border: 1px solid var(--rule);
}
.scene-caption .step {
  flex: 1 1 0; text-align: center; white-space: nowrap;
  color: var(--paper-3); background: transparent; border: 0;
  border-right: 1px solid var(--rule); padding: var(--s3) var(--s2); cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.scene-caption .step:last-child { border-right: 0; }
.scene-caption .step:hover { color: var(--paper); background: var(--ink-2); }
.scene-caption .step.on { color: var(--spot-ink); background: var(--spot); }
.scene-caption .step:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ring); }
.fig figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--paper-3); margin-top: var(--s3);
}
.fig figcaption .hint { color: var(--rule-2); }

/* -------------------------------------------------------------- keyed lists
   One idiom for every label-and-value pair on the page: hero audiences, the
   membership terms. Keys sit in a column the width of the margin. */
.keyed { margin: 0; }
.keyed > div {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: var(--s4);
  align-items: baseline; padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.keyed > div:first-child { border-top: 1px solid var(--rule); }
.keyed dt { color: var(--paper-3); }
.keyed dd { margin: 0; font-size: var(--t-note); color: var(--paper-2); }
.includes dt { color: var(--paper-3); }

/* ------------------------------------------------------------------ the map */
#map { display: block; width: 100%; height: auto; aspect-ratio: 940 / 450; max-height: 660px; }

/* the map runs the whole page width, with its margin label as a header row */
#inside .body { grid-column: 1 / -1; }
#inside .mgn { flex-direction: row; align-items: baseline; gap: var(--s3); margin-bottom: var(--s5); }
#inside .mgn-note { display: none; }

/* -------------------------------------------------------------- channel wall */
.wall-section { margin-inline: calc(var(--gutter) * -1); }
.wall { padding-block: var(--s5); border-block: 1px solid var(--rule); background: var(--ink-2); }
.wall-head { text-align: center; padding-inline: var(--gutter); margin-bottom: var(--s4); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: var(--s1); }
.marquee-track { display: flex; gap: var(--s1); width: max-content; animation: slide var(--dur, 60s) linear infinite; }
.marquee.rev .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 600; color: var(--paper);
  background: var(--ink); border: 1px solid var(--rule);
  padding: 6px var(--s2); white-space: nowrap; letter-spacing: 0;
  transition: border-color .16s ease, background .16s ease;
}
.chip i { font-style: normal; color: var(--spot); }
.chip b {
  font-weight: 400; font-size: var(--t-label); color: var(--paper-3);
  margin-left: var(--s2); padding-left: var(--s2); border-left: 1px solid var(--rule);
}
.chip:hover, .chip.on { border-color: var(--rule-2); background: var(--ink-3); }

/* ------------------------------------------------------------ figure tables
   Stats, the ledger and the bars are all the same object: a ruled table with
   mono labels and tabular figures. */
/* --------------------------------------------------------------- membership */
.pricing { border-top: 2px solid var(--rule-2); }
.ribbon { display: inline-block; color: var(--spot-ink); background: var(--spot); padding: var(--s1) var(--s2); margin-bottom: var(--s4); }
.amount-row { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.amount {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-price);
  line-height: .84; letter-spacing: -0.04em; color: var(--paper);
}
.amount span { font-variant-numeric: tabular-nums; }
.pricing .per { color: var(--paper-3); }
.strikeline { margin-block: var(--s4) var(--s5); }
.strikeline s { color: var(--paper-3); font-family: var(--font-mono); font-size: var(--t-fine); }
.pricing .row { margin-bottom: var(--s3); }
.pricing .btn-lg { margin-bottom: var(--s3); }

/* the one moving detail on the CTA: a rule that crosses it, not a glow */
.btn.pulse { position: relative; overflow: hidden; }
.btn.pulse::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--spot-ink); opacity: .35; transform: translateX(-100%);
  animation: sweepline 3.6s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes sweepline { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
.includes > div { transition: opacity .45s ease, transform .45s ease; opacity: 0; transform: translateY(5px); }
.includes.in > div { opacity: 1; transform: none; }
.includes.in > div:nth-child(1) { transition-delay: .05s; }
.includes.in > div:nth-child(2) { transition-delay: .12s; }
.includes.in > div:nth-child(3) { transition-delay: .19s; }
.includes.in > div:nth-child(4) { transition-delay: .26s; }
.includes.in > div:nth-child(5) { transition-delay: .33s; }

/* ------------------------------------------------------------------ footer */
footer.site {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between;
  padding-block: var(--s5); border-top: 1px solid var(--rule); color: var(--paper-3);
}
footer.site a { color: var(--paper-2); text-decoration: none; }
footer.site a:hover { color: var(--paper); }

/* ----------------------------------------------------------------- reveals */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); }
.rv.in { opacity: 1; transform: none; }

/* -------------------------------------------------------------- legal pages */
.legal { max-width: 720px; padding-block: var(--s6) var(--s8); }
.legal h1 { margin-block: var(--s4) var(--s5); }
.legal h2 { font-size: var(--t-h3); margin-top: var(--s6); }
.legal p, .legal li { color: var(--paper-2); font-size: var(--t-note); }
.updated { font-family: var(--font-mono); font-size: var(--t-fine); color: var(--paper-3); }
.notice { border-left: 2px solid var(--spot); background: var(--spot-wash); padding: var(--s4); margin-block: var(--s5); }


/* ------------------------------------------------------------------ thesis
   The cover paragraph, and the only place on the page where type performs:
   every line is hand broken inside its own mask, so the block sets itself one
   line at a time as the page opens. */
.thesis { max-width: none; }
.thesis p {
  font-family: var(--font-prose); font-size: var(--t-cover); line-height: 1.6;
  color: var(--paper-2); margin: 0 0 var(--s5);
}
.thesis p:last-child { margin-bottom: 0; }
.thesis em { font-style: normal; color: var(--spot); }
.ln { display: block; overflow: hidden; }
.ln i {
  display: block; font-style: normal;
  transform: translateY(105%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.thesis.in .ln i { transform: none; }
.thesis.in p:nth-of-type(1) .ln:nth-child(1) i { transition-delay: 0.05s; }
.thesis.in p:nth-of-type(1) .ln:nth-child(2) i { transition-delay: 0.11s; }
.thesis.in p:nth-of-type(2) .ln:nth-child(1) i { transition-delay: 0.23s; }
.thesis.in p:nth-of-type(2) .ln:nth-child(2) i { transition-delay: 0.29s; }
.thesis.in p:nth-of-type(2) .ln:nth-child(3) i { transition-delay: 0.35s; }
.thesis.in p:nth-of-type(3) .ln:nth-child(1) i { transition-delay: 0.47s; }
.thesis.in p:nth-of-type(3) .ln:nth-child(2) i { transition-delay: 0.53s; }
.thesis.in p:nth-of-type(3) .ln:nth-child(3) i { transition-delay: 0.59s; }

/* the hand broken lines only fit the full column, so narrower views simply flow */
@media (max-width: 1180px) {
  .thesis p { font-size: var(--t-lede); }
  .ln, .ln i { display: inline; overflow: visible; transform: none; }
}


/* -------------------------------------------------------------------- about
   The portrait sits above the text at the same measure, framed with the page's
   own hairline rather than rounded off. The credibility rows reuse the keyed
   list, so this reads as part of the document and not a bio card. */
.about {
  margin-top: var(--s8); padding-top: var(--s6);
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--s5);
}
.about img {
  display: block; width: 88px; height: 88px; object-fit: cover;
  border: 1px solid var(--rule-2); filter: none;
}
.about-k {
  display: block; font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--paper-3);
  margin-bottom: var(--s3);
}
.about-body p {
  font-family: var(--font-prose); font-size: var(--t-cover); line-height: 1.6;
  max-width: 74ch; margin-bottom: var(--s4);
}
.about-body .marks { margin-top: var(--s5); max-width: none; }

/* where the experience came from, set as marks rather than a list of claims */
.marks-k {
  display: block; font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--paper-3);
  margin-bottom: var(--s3);
}
.marks ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--rule);
}
.marks li {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s5) var(--s4); border-left: 1px solid var(--rule);
}
.marks li:first-child { border-left: 0; }
.marks svg {
  height: 34px; width: auto; color: var(--paper);   /* the mark's own colours, currentColor for the black parts */
  opacity: .88; transition: opacity .2s ease;
}
.marks li:hover svg { opacity: 1; }
.marks .wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1;
  letter-spacing: -0.03em; color: var(--paper-2); transition: color .2s ease; white-space: nowrap;
}
.marks .wordmark-sm { font-size: 22px; letter-spacing: -0.02em; }
.marks li:hover .wordmark { color: var(--paper); }


/* ------------------------------------------------------------------- quote
   Set in the prose serif at the cover's measure, indented off the text column
   so it reads as an aside rather than another paragraph. */
.quote {
  margin: var(--s7) auto 0; padding: var(--s5) 0 0;
  border-top: 1px solid var(--rule); text-align: center;
}
.quote p {
  font-family: var(--font-prose); font-size: clamp(20px, 2vw, 25px); line-height: 1.32;
  letter-spacing: -0.01em; color: var(--paper); margin: 0 0 var(--s3);
}
.quote p::before { content: "\201C"; color: var(--spot); margin-right: 2px; }
.quote p::after { content: "\201D"; color: var(--spot); margin-left: 1px; }
.quote cite {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 600; font-style: normal;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--paper-2);
}
.quote cite span { color: var(--paper-2); }

/* --------------------------------------------------------- where to find him */
.find {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  font-family: var(--font-sans); font-size: var(--t-fine); color: var(--paper-3);
  margin: var(--s4) 0 0;
}
.find a { display: inline-flex; align-items: baseline; gap: 6px; color: var(--paper); text-decoration: none; }
.find > a { border-bottom: 1px solid var(--spot-rule); padding-bottom: 2px; }
.find > a:hover { border-bottom-color: var(--spot); }
.find svg { width: 12px; height: 12px; color: var(--spot); }
.find span a { text-decoration: underline; text-decoration-color: var(--rule-2); }


/* --------------------------------------------------------------- the offer
   Two columns: what the same material costs bought separately, and what it
   costs here. Rules, not panels, and one figure per side. */
.offer { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: var(--s7); }
.offer .mgn-k { display: block; color: var(--paper-2); margin-bottom: var(--s4); }
.offer-price { padding-left: var(--s7); border-left: 1px solid var(--rule-2); }

.ledger { border-top: 1px solid var(--rule); }
.lr {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  padding-block: var(--s4); border-bottom: 1px solid var(--rule); font-size: var(--t-body);
}
.lr .what { color: var(--paper); }
.lr .amt {
  font-family: var(--font-mono); font-size: var(--t-body); font-weight: 500;
  color: var(--paper2, var(--paper-2)); font-variant-numeric: tabular-nums;
}
.total { border-bottom: 0; border-top: 1px solid var(--paper-3); }
.total .what, .total .amt { color: var(--paper); font-weight: 600; }
.total .amt { font-size: var(--t-lede); }

.amount-row { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
/* the price is a figure, so it is set like every other figure on the page:
   mono, tabular, with the currency and the cents held back */
.amount {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-price);
  line-height: .9; letter-spacing: -0.05em; color: var(--paper);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: flex-start;
}
.amount .cur {
  font-size: .42em; color: var(--paper-3); font-weight: 400;
  margin-top: .22em; margin-right: .06em; letter-spacing: 0;
}
.amount .cents { font-size: .46em; color: var(--paper-2); margin-top: .12em; letter-spacing: -0.02em; }
.pricing .per { color: var(--paper-3); }
.offer-line { font-size: var(--t-note); color: var(--paper-2); margin-block: var(--s4) var(--s5); max-width: 46ch; }
.pct-inline { font-family: var(--font-mono); font-weight: 600; color: var(--spot); font-variant-numeric: tabular-nums; }

.terms { margin: 0 0 var(--s5); }
.terms > div {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--s4);
  align-items: baseline; padding-block: var(--s3); border-bottom: 1px solid var(--rule);
}
.terms > div:first-child { border-top: 1px solid var(--rule); }
.terms dt { font-family: var(--font-mono); font-size: var(--t-note); font-weight: 600; color: var(--spot); font-variant-numeric: tabular-nums; }
.terms dd { margin: 0; font-size: var(--t-note); color: var(--paper); }
.pricing .btn-lg { margin-bottom: var(--s3); }

/* ---------------------------------------------------------------------------
   Responsive overrides. These live at the end on purpose: a media query
   declared above the rule it overrides loses the cascade, which cost this
   stylesheet three separate mobile bugs.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) { .wrap { border-inline: 0; } }
@media (max-width: 860px) {
  .sheet { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s4); padding-block: var(--s7); }
  .fig { margin-bottom: var(--s7); }
  .thesis p { margin-bottom: var(--s5); }
  .wall-section { margin-block: var(--s6) 0; }
  .about { margin-top: var(--s7); padding-top: var(--s5); }
  .offer { row-gap: var(--s8); }
}
@media (max-width: 560px) {
  .sheet { grid-template-columns: 1fr; row-gap: var(--s3); }
}
@media (max-width: 560px) { .mgn { flex-direction: row; align-items: baseline; gap: var(--s3); } }
@media (max-width: 860px) { .mgn-note { display: none; } }
@media (max-width: 900px) { .split, .split-price { grid-template-columns: 1fr; row-gap: var(--s6); } }
@media (max-width: 700px) {
  #scene { aspect-ratio: 10 / 11; max-height: none; }
  /* the strip sits well clear of the drawing, and all five fit one row */
  .scene-caption { margin-top: var(--s5); }
  .scene-caption .step { padding: var(--s3) 2px; font-size: 10px; letter-spacing: .06em; }
}
@media (max-width: 480px) { .keyed > div { grid-template-columns: 1fr; row-gap: var(--s1); } }
@media (max-width: 700px) { #map { aspect-ratio: 39 / 70; max-height: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .track, .includes > div { opacity: 1; transform: none; transition: none; }
  .marquee-track, .viz i, .viz i::after, .btn.pulse::after { animation: none !important; }
  .btn:hover svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ln i { transform: none; transition: none; }
}
@media (max-width: 700px) {
  .about { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s3); }
  .about img { width: 56px; height: 56px; }
}
@media (max-width: 760px) {
  .marks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marks li:nth-child(2n+1) { border-left: 0; }
  .marks li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .marks svg { height: 27px; }
  .marks .wordmark { font-size: 25px; }
  .marks .wordmark-sm { font-size: 18px; }
}
@media (min-width: 640px) { .quote p { white-space: nowrap; } }
@media (max-width: 880px) { .offer { grid-template-columns: 1fr; row-gap: var(--s7); } }
@media (max-width: 880px) { .offer-price { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-2); padding-top: var(--s5); } }