/* ==========================================================================
   dojocoding.io: standalone static homepage
   Structure donor: tiny.com (1:1 section clone; sections and copy untouched)
   Skin: institutional NeoBrutalism (2026-09 polish round). See DESIGN.md.
   One ink (brand navy), one accent (peach, fills only), one family (Archivo),
   2px rules, hard offset shadows, controlled geometry and responsive motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONT: Archivo variable (wdth 62-125, wght 100-900), self-hosted latin
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-vf-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-italic-vf-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ink & paper */
  --ink: #201E3D;           /* brand navy is the black: text, rules, shadows */
  --ink-2: #4A4866;         /* secondary text, 7.5:1 on paper */
  --paper: #F1F1F9;         /* page (Dojo OS light page token) */
  --panel: #FFFFFF;         /* bordered panels */
  --panel-2: #E7E6F1;       /* sunken fills: table heads, chips, tracks */
  --accent: #FF7151;        /* peach. Fills only, always with --accent-ink text (5.9:1). Never text on light. */
  --accent-ink: #201E3D;    /* text on accent fills; does not invert on the back cover */
  --ok: #1F7A3F;  --ok-bg: #E4F3E8;    /* calculator semantics only */
  --bad: #B42318; --bad-bg: #FBEAE7;

  /* Structure */
  --rule: 2px solid var(--ink);
  --rule-thin: 1px solid var(--ink);
  --shadow-1: 4px 4px 0 var(--ink);    /* T2 interactive */
  --shadow-1-hover: 6px 6px 0 var(--ink);
  --shadow-2: 8px 8px 0 var(--ink);    /* T3 artifacts */
  --accent-soft: #FFD9D0;              /* peach tint: depth fields, never a second accent */
  --accent-wash: #FFF0EC;              /* quiet section/card tint */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-plate: 40px;                /* the hero plate and chapter curtains only */
  --shadow-3: 14px 14px 0 var(--ink);  /* T4: the hero plate only */
  --link-rule: var(--accent);          /* drawn-underline base (navy 35% on peach) */

  /* Type: one family */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ledger metadata only */
  --wdth-display: 112%;
  --wdth-narrow: 75%;
  --wdth-shout: 125%;                  /* shout tier */
  --wdth-tall: 62%;                    /* stat numerals */
  --t-2xl: clamp(36px, 4.6vw, 64px);   /* section headline (2026-09-22: was 52px max) */
  --t-3xl: clamp(44px, 6vw, 84px);     /* hero h1 (2026-09-22: was 70px max) */
  --t-num: clamp(40px, 4.2vw, 64px);   /* calc totals (narrow) */
  --t-shout: clamp(28px, calc((100vw - 48px) / 8.45), 88px); /* shout tier; fits CUSTOMERS (8.21em, the widest word) in the column */
  --t-door: clamp(40px, 6.6vw, 96px);  /* door words: TRANSFORMAR fits a 1,008px card */
  --t-setup: clamp(20px, 2vw, 28px);   /* the quiet line before a shout */
  --t-stat: clamp(56px, 6.4vw, 96px);  /* stat numerals, tall cut */

  /* Space */
  --section: clamp(72px, 9vw, 128px);
  --container: 1152px;
  --gutter: 24px;

  /* Motion */
  --dur: 140ms;
  --dur-reveal: 520ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1); /* entrances, rolls, curtains */

  /* Layers */
  --z-nav: 100; --z-skip: 200; --z-modal: 300;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; font-stretch: 100%; interpolate-size: allow-keywords; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
strong { font-weight: 700; }
::selection { background: var(--accent); color: var(--accent-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* Utilities */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: var(--z-skip);
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; font-weight: 700; font-size: 14px;
  border: 2px solid var(--paper);
  border-radius: var(--radius-sm);
}
.skip-link:focus-visible { top: 16px; outline-color: var(--accent); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 0 0 var(--section); }

/* Section grammar: every section opens on a 2px rule drawn between the
   gutters (so it aligns with the content edges); the label (former eyebrow)
   is an index tab hanging off that rule, sentence case, ink fill. The rule
   sits one --section below the previous content, the head 32px below it. */
.section > .container, .rec-hero > .container { position: relative; padding-top: 32px; }
.section > .container::before, .rec-hero > .container::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  border-top: var(--rule); pointer-events: none;
}
.section-tab {
  display: block; width: fit-content;
  margin: -32px 0 20px;
  padding: 7px 10px 6px;
  background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius-xs);
  box-shadow: 3px 3px 0 var(--accent);
}

/* Labels: one sentence-case tag style, one mono meta style (ledger data only) */
.tag { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.log-title, .log-tag, .log-status, .proof-status, .rec-etag {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Chips: bordered, flat, no dots. Status chips use the mono meta type above. */
.chip, .case-badge, .log-status, .proof-status {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 8px;
  border: 1.5px solid var(--ink);
  background: var(--panel-2); color: var(--ink);
  white-space: nowrap;
  border-radius: var(--radius-pill);
}
.chip, .case-badge { font-size: 12px; font-weight: 700; }
.log-status, .proof-status { height: 22px; font-size: 10.5px; }
.is-live { background: var(--ok-bg); }

/* Inline text links: ink text, peach underline that turns ink on hover */
p a, .letter-list a, .compare-outro a, .faq-list a, .log-body a, .rec-note a, .footer-boilerplate a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
  transition: text-decoration-color var(--dur) var(--ease);
}
p a:hover, .letter-list a:hover, .compare-outro a:hover, .faq-list a:hover, .log-body a:hover, .rec-note a:hover, .footer-boilerplate a:hover { text-decoration-color: currentColor; }

/* Section headline (Archivo, expanded, 800) */
.headline {
  font-weight: 800;
  font-stretch: var(--wdth-display);
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
  font-size: var(--t-2xl);
  text-wrap: balance;
  max-width: 760px;
}
.headline-left { max-width: 760px; }
.headline-center { text-align: left; }

/* Section arrow-links: left-aligned, underlined, no pill wash */
.section-link { margin-top: 40px; }
.section-link a, .loop-link a, .compare-foot a, .proof-oss a, .ev-more, .rec-cite, .log-more, .calc-cta-link {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--accent);
  transition: text-decoration-color var(--dur) var(--ease);
}
.section-link a, .loop-link a { font-size: 17px; }
.section-link a:hover, .loop-link a:hover, .compare-foot a:hover, .proof-oss a:hover, .ev-more:hover, .rec-cite:hover, .log-more:hover, .calc-cta-card:hover .calc-cta-link { text-decoration-color: currentColor; }
.arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
a:hover .arrow, .calc-cta-card:hover .arrow { transform: translateX(3px); }

/* Buttons (T2): 2px border, hard shadow, brief physical press */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--rule); background: var(--panel); color: var(--ink);
  font-family: var(--font); font-weight: 700; letter-spacing: 0; line-height: 1;
  white-space: nowrap; user-select: none; cursor: pointer;
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-1-hover); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: var(--panel); color: var(--ink); }
.btn-md { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-xl { height: 56px; padding: 0 28px; font-size: 17px; }

/* Scroll reveal: 18px, 520ms, with a capped 45ms stagger. */
html.js [data-rise] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay: calc(min(var(--i, 0), 4) * 45ms);
}
html.js [data-rise].is-visible { opacity: 1; transform: none; }
[data-rise]:nth-child(2) { --i: 1; }
[data-rise]:nth-child(3) { --i: 2; }
[data-rise]:nth-child(4) { --i: 3; }
[data-rise]:nth-child(5) { --i: 4; }
[data-rise]:nth-child(6) { --i: 5; }
[data-rise]:nth-child(7) { --i: 6; }
[data-rise]:nth-child(8) { --i: 7; }
[data-rise]:nth-child(9) { --i: 8; }

/* Hero entrance is transform-only: an element first painted at opacity 0 is
   never an LCP candidate in Chrome, so the H1 and ledger card must not fade. */
@keyframes rise { from { transform: translateY(12px); } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-rise] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   2b. I18N: global language swap. The <html data-lang> attribute (set by the
   inline <head> detection script before paint) drives which of the paired
   .lang-en / .lang-es siblings is shown. Two rules only: the *hidden* one gets
   display:none, the shown one keeps its natural display (block or inline), so
   this works for headings, paragraphs, chips, and inline spans alike. Both
   languages ship in the static HTML (crawlable), and there is no FOUC because
   data-lang is present before the body is parsed.
   -------------------------------------------------------------------------- */
html[data-lang="en"] .lang-es { display: none !important; }
html[data-lang="es"] .lang-en { display: none !important; }

/* --------------------------------------------------------------------------
   2c. PARTNER MARKS: supplied marks, mounted as issued, never restyled.
   Partner and program marks are not site artwork, so the press shelf's
   brightness(0) trick is off the table: no recoloring, no redrawing.
   The OpenAI badge carries its own frame (white card, black stroke, 18.5px
   radius at 177px tall). Scaled to the 56px CTA height that frame becomes a
   ~1px stroke and a ~6px radius, which is exactly --rule-thin and
   --radius-xs, so the Google tile is built from those two tokens and the pair
   reads as one matched set. The tile's white is a hardcoded backplate, not
   --panel: --panel turns navy on the back cover, and Google's "for Startups"
   is black at 54% opacity, so it only renders Google grey on white.
   The row is T0: static credentials, so no hard shadow (that is the T2
   "press me" signal). Shared by the hero and both footers.
   -------------------------------------------------------------------------- */
.partner-marks {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  --mark-h: 56px;
}
.partner-marks li { display: flex; flex: none; }
.partner-mark { display: block; width: auto; height: var(--mark-h); }
.partner-tile {
  align-items: center; height: var(--mark-h); padding: 0 16px;
  background: #FFFFFF; border: var(--rule-thin); border-radius: var(--radius-xs);
}
.partner-tile img { display: block; width: auto; height: calc(var(--mark-h) * .33); }
@media (max-width: 599px) {
  .partner-marks { --mark-h: 48px; gap: 10px; }
}

/* --------------------------------------------------------------------------
   3. NAV: full-width sticky bar, 64px, 2px bottom rule
   -------------------------------------------------------------------------- */
.nav-wrap {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--paper);
  border-bottom: var(--rule);
}
.nav-wrap::after {
  content: ""; position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 3px; background: var(--accent);
  transform: scaleX(var(--read-progress, 0)); transform-origin: left;
  pointer-events: none;
}
.nav-bar {
  display: flex; align-items: center; gap: 20px;
  height: 64px;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.nav-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-word { font-weight: 800; font-stretch: var(--wdth-display); font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 15px; font-weight: 600; color: var(--ink);
  padding: 8px 10px;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur) var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { text-decoration-color: var(--accent); }
.nav-cta { flex: none; }

.nav-brand--mobile, .nav-burger, .mobile-menu { display: none; }

/* Language switch: bordered segmented control (nav + mobile menu). Active option
   is styled purely from html[data-lang]; JS mirrors it into aria-pressed. */
.lang-switch { display: inline-flex; flex: none; border: var(--rule); background: var(--panel); }
.lang-switch { border-radius: var(--radius-sm); overflow: hidden; }
.lang-opt {
  cursor: pointer; border: 0; background: none;
  height: 32px; padding: 0 10px;
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-opt + .lang-opt { border-left: var(--rule); }
.lang-opt:hover { background: var(--panel-2); }
html[data-lang="en"] .lang-opt[data-lang-set="en"],
html[data-lang="es"] .lang-opt[data-lang-set="es"] { background: var(--ink); color: var(--paper); }
.lang-opt:focus-visible { outline-offset: -3px; outline-color: var(--accent); }
.lang-switch--menu { align-self: flex-start; margin: 4px 0; }
/* No-JS: the switch can't work without the controller, so hide it. */
html:not(.js) .lang-switch { display: none; }

/* --------------------------------------------------------------------------
   4. HERO: paper, split grid (copy | ledger card), then statement + stats
   -------------------------------------------------------------------------- */
.hero-band { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.hero-band::before,
.hero-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: var(--rule);
}
.hero-band::before {
  width: 112px; height: 112px;
  right: -34px; top: 118px;
  border-radius: 26px 8px 26px 8px;
  background: var(--accent-wash);
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-9deg);
}
.hero-band::after {
  width: 74px; height: 74px;
  left: -30px; bottom: 250px;
  border-radius: var(--radius-md);
  background: var(--accent);
  box-shadow: var(--shadow-1);
  transform: rotate(8deg);
}
/* One mobile-first proof strip, after the hero copy and receipt card.
   Every target reserves its own padding, including its hover/focus state. */
.press-strip {
  padding-top: 4px; padding-bottom: 40px;
}
.press-label {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--ink-2); margin-bottom: 16px;
}
.press-label::before, .press-label::after { content: ""; flex: 1; height: 1px; background: var(--panel-2); }
.press-logos {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; max-width: 640px; margin-inline: auto;
}
.press-logos li { min-width: 0; }
.press-logo {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 72px; padding: 12px 10px; border-radius: var(--radius-sm);
  transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.press-logo:focus-visible { outline-offset: 2px; background: var(--panel); }
@media (hover: hover) and (pointer: fine) {
  .press-logo:hover { background: var(--panel); box-shadow: inset 0 -2px 0 var(--accent); }
}
.press-logo img { object-fit: contain; width: 90px; height: auto; max-width: 100%; max-height: 32px; }
.press-logo--crhoy img { width: 72px; }
.press-logo--delfino img { width: 108px; }
.press-logo--lavia img { width: 48px; max-height: 36px; }
.press-logo--itnow { flex-direction: column; gap: 5px; }
.press-logo--itnow img { width: 72px; filter: brightness(0); }
.press-logo--itnow .press-parent { width: 58px; }
.press-logo--youtube img { width: 90px; }
.press-logo--github img { width: 78px; }
@media (min-width: 600px) {
  .press-logo { height: 64px; padding: 12px; }
}
@media (min-width: 1101px) {
  .press-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 880px; gap: 8px; }
  .press-logo { padding: 10px; }
  .press-strip { padding-bottom: 32px; }
  .press-label { margin-bottom: 8px; }
}
.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 64px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px var(--gutter) 24px;
}
.hero-copy { max-width: 620px; animation: rise var(--dur-reveal) var(--ease) both; }
.hero-eyebrow { font-size: 17px; font-weight: 600; color: var(--ink-2); margin-bottom: 20px; }
.hero-h1 {
  font-weight: 800;
  font-stretch: var(--wdth-display);
  font-size: var(--t-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
/* Emphasis word: the page's one marker block (peach fill, ink text) */
.mark {
  background: var(--accent); color: var(--accent-ink);
  padding: 0 0.12em;
  border-radius: 0.12em;
  box-shadow: 4px 4px 0 var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-sub {
  margin-top: 24px;
  max-width: 56ch;
  font-size: 18px; line-height: 1.6;
  color: var(--ink-2);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
/* Credentials sit with the buttons, at the point of decision, not in the
   press shelf below: a partnership is not coverage. */
.hero-partners { margin-top: 28px; }

/* The ledger card (T3 artifact) */
.ship-log { position: relative; animation: rise var(--dur-reveal) var(--ease) .06s both; }
.ship-log::before {
  content: "✦";
  position: absolute;
  z-index: 2;
  right: 18px; top: -30px;
  color: var(--accent);
  font-size: 38px; font-weight: 800; line-height: 1;
  -webkit-text-stroke: 1.5px var(--ink);
  transform: rotate(8deg);
}
.log-card {
  width: 100%; max-width: 460px;
  background: var(--panel);
  border: var(--rule);
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.log-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: var(--rule);
  background: var(--accent-soft);
}
.log-title { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.log-entries { list-style: none; margin: 0; padding: 0; }
.log-entries li {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 20px;
  border-top: var(--rule-thin);
  animation: fade-rise .3s var(--ease) both;
  animation-delay: calc(.2s + var(--d, 0s));
}
.log-entries li:first-child { border-top: none; }
.log-tag { color: var(--ink-2); }
.log-body { font-size: 14.5px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.log-body strong { font-weight: 800; }
.log-body small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.log-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-top: var(--rule);
}
.log-more { font-size: 14px; text-underline-offset: 4px; }
.log-signers { display: inline-flex; align-items: center; }
.log-signers img { object-fit: cover; }
.log-signers img:not(.log-seal) { width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: var(--radius-xs); background: var(--panel); }
.log-signers img:nth-child(2) { margin-left: -2px; }
.log-seal { margin-left: 10px; width: 36px; height: 36px; }

/* Short laptops: keep the hero proof row visible without shrinking the logos. */
@media (min-width: 1101px) and (max-height: 820px) {
  .hero-top { padding-bottom: 20px; }
  .hero-h1 { font-size: clamp(42px, 4.3vw, 60px); }
  .hero-sub { font-size: 17px; line-height: 1.55; }
  .hero-ctas { margin-top: 28px; }
  .log-entries li { padding-block: 8px; }
}

/* Statement + stats table */
.hero-inner { max-width: var(--container); margin: 0 auto; padding: 16px var(--gutter) var(--section); }
.hero-statement { max-width: 760px; }
.hero-statement h2 {
  font-weight: 800; font-stretch: var(--wdth-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15; letter-spacing: -0.015em; color: var(--ink);
  margin-bottom: 18px; text-wrap: balance;
}
.hero-statement p { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

.stats-bar {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat {
  padding: 22px;
  border: var(--rule);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-1);
}
.stat:nth-child(even) { background: var(--accent-wash); transform: translateY(10px); }
.stat-num {
  font-weight: 800; font-stretch: var(--wdth-narrow);
  font-size: var(--t-num);
  line-height: 1; letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.stat-mark {
  display: block; width: 36px; height: 36px; margin-bottom: 16px;
  fill: none; stroke: var(--ink); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.stat-mark .mark-fill { fill: var(--accent-soft); }
.stat-mark .mark-accent { fill: var(--accent); }

/* --------------------------------------------------------------------------
   5. THE STORY: founders letter (T3 artifact)
   -------------------------------------------------------------------------- */
.letter-section { background: var(--paper); }
.letter-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.letter-head .headline { font-size: clamp(32px, 3.6vw, 46px); }
.hl-gradient {
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.06em;
  text-decoration-color: var(--accent);
}

.letter-card {
  position: relative;
  background: var(--panel);
  border: var(--rule);
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 56px);
  font-size: 17px; line-height: 1.7; color: var(--ink);
}
.letter-card::before {
  content: "";
  position: absolute;
  width: 76px; height: 24px;
  top: -14px; left: 42px;
  border: var(--rule);
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  transform: rotate(-3deg);
}
.letter-card::after {
  content: "///";
  position: absolute;
  right: 28px; bottom: -17px;
  padding: 5px 10px 4px;
  border: var(--rule);
  border-radius: var(--radius-xs);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 13px; font-weight: 800; line-height: 1;
  letter-spacing: 2px;
  transform: rotate(3deg);
}
.letter-card > p { margin-bottom: 20px; max-width: 62ch; }
.letter-salutation { font-weight: 700; color: var(--ink); }
.letter-highlight {
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 19px; line-height: 1.5;
  padding: 0 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.letter-list { list-style: none; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
.letter-list li { padding-left: 22px; position: relative; }
.letter-list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); border: 1px solid var(--ink); }
.letter-list-more { color: var(--ink-2); }
.letter-signatures {
  border-top: 2px dashed var(--ink);
  margin-top: 32px; padding-top: 24px;
  display: flex; gap: 48px; flex-wrap: wrap;
}
.sig-person { display: flex; align-items: center; gap: 12px; }
.sig-person img { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: var(--radius-sm); object-fit: cover; }
.sig-person strong { display: block; font-size: 15px; color: var(--ink); }
.sig-person span { font-size: 13px; color: var(--ink-2); }
.letter-grid .section-link { grid-column: 2; margin-top: 8px; }

/* --------------------------------------------------------------------------
   6. CHECKLIST: T0 rules, bordered icon squares
   -------------------------------------------------------------------------- */
.checklist-section { background: var(--paper); }
.checklist-section .headline { margin-bottom: 40px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; max-width: 1024px; border-bottom: var(--rule-thin); }
.check-item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 24px 0; border-top: var(--rule-thin);
}
.check-icon {
  flex: none; width: 40px; height: 40px;
  border: var(--rule); background: var(--panel); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--ink);
}
.check-item:nth-child(4n + 2) .check-icon,
.check-item:nth-child(4n + 3) .check-icon { background: var(--accent-soft); }
.check-icon svg { width: 20px; height: 20px; }
.check-item h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; }
.check-item p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   6a. THREE WAYS IN: ruled rows (T0); each row opens on a stamped label
   -------------------------------------------------------------------------- */
.doors-section { background: var(--paper); }
.doors-section .headline { margin-bottom: 16px; }
.doors-lede { margin: 0 0 32px; max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.door {
  display: grid; grid-template-columns: 5fr 7fr; gap: 40px;
  padding: 32px 0; border-top: var(--rule-thin);
}
.door:first-child { border-top: var(--rule); }
.door:last-child { border-bottom: var(--rule); }
.door-q { display: flex; align-items: flex-start; gap: 18px; }
.door-stamp {
  flex: none; display: inline-flex; align-items: center;
  height: 40px; padding: 0 12px;
  border: var(--rule); border-radius: var(--radius-xs);
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: -0.01em;
  rotate: -3deg;
}
.door:nth-child(2) .door-stamp { background: var(--accent-soft); rotate: 2deg; }
.door:nth-child(3) .door-stamp { background: var(--panel); rotate: -2deg; }
.door h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); padding-top: 7px; text-wrap: balance; }
.door-a p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-bottom: 12px; max-width: 62ch; }
.door-a .door-strong { color: var(--ink); font-weight: 700; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. PULL-QUOTES: one ruled band, left-aligned, square avatar
   -------------------------------------------------------------------------- */
.quote-section { background: var(--paper); padding: 0 0 72px; }
.quote-section .quote-inner {
  position: relative;
  padding-top: 48px;
  padding-right: 104px;
  padding-bottom: 40px;
  background: var(--accent-wash);
  border: var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.quote-section .quote-inner::before { display: none; }
.quote-section .quote-inner::after {
  content: "“";
  position: absolute;
  right: 30px; top: 12px;
  color: var(--accent);
  font-size: 88px; font-weight: 800; line-height: 1;
  font-style: normal;
}
.quote-inner blockquote p {
  font-weight: 700; font-style: italic;
  font-stretch: 104%;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.2; letter-spacing: -0.015em; color: var(--ink);
  max-width: 900px;
  text-wrap: balance;
  hanging-punctuation: first;
}
.quote-attrib { margin-top: 24px; display: flex; align-items: center; gap: 14px; }
.quote-who { display: flex; flex-direction: column; gap: 2px; }
.quote-attrib img { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: var(--radius-sm); object-fit: cover; }
.quote-mark-avatar {
  width: 44px; height: 44px;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--accent);
}
.quote-who strong { display: block; font-size: 15px; }
.quote-who > span { font-size: 14px; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   8. FAQ: 4/8 grid, native details, ruled list, bordered plus toggle
   -------------------------------------------------------------------------- */
.faq-section { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.faq-head { position: relative; }
.faq-head::after {
  content: "?";
  position: relative;
  margin: 28px 24px 0 auto;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--rule);
  border-radius: 14px 5px 14px 5px;
  background: var(--accent-soft);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: 30px; font-weight: 800;
  transform: rotate(7deg);
}
.faq-head .headline { font-size: clamp(30px, 3.4vw, 44px); }
.faq-sub { margin-top: 16px; font-size: 17px; color: var(--ink-2); }
.faq-list { --faq-inset: 24px; border-bottom: var(--rule); min-width: 0; }
.faq-list details {
  padding-inline: var(--faq-inset);
  transition: background-color 180ms var(--ease);
}
.faq-list details[open] { background: var(--accent-wash); border-radius: var(--radius-sm); }
.faq-list details + details { border-top: var(--rule-thin); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0;
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover .chev { background: var(--accent); }
.faq-list summary:focus-visible { outline-offset: 2px; border-radius: 2px; }
.chev { flex: none; width: 32px; height: 32px; position: relative; border: var(--rule); border-radius: var(--radius-xs); background: var(--panel); box-shadow: 2px 2px 0 var(--ink); transition: translate 180ms var(--ease), box-shadow 180ms var(--ease), background var(--dur) var(--ease); }
.chev::before, .chev::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.chev::before { width: 12px; height: 2px; }
.chev::after { width: 2px; height: 12px; transition: transform 220ms var(--ease); }
.faq-list details[open] .chev { background: var(--accent); box-shadow: none; translate: 2px 2px; }
.faq-list details[open] .chev::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-list details p { max-width: 62ch; padding: 8px 52px 28px 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
/* Progressive: animate the answer height where ::details-content is supported */
@media (prefers-reduced-motion: no-preference) {
  .faq-list details::details-content { height: 0; overflow: clip; transition: height 180ms var(--ease), content-visibility 180ms allow-discrete; }
  .faq-list details[open]::details-content { height: auto; }
}

/* --------------------------------------------------------------------------
   9. COMPARISON: an honest 3-column table, merged 2px borders
   -------------------------------------------------------------------------- */
.compare-section { background: var(--paper); }
.compare-title { margin-bottom: 40px; }
.compare-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--rule); border-left: var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.compare-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border-right: var(--rule); border-bottom: var(--rule);
}
.compare-card h3 {
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
  padding: 18px 24px;
  background: var(--panel-2);
  border-bottom: var(--rule);
}
.compare-card--highlight h3 { position: relative; background: var(--accent); color: var(--accent-ink); }
.compare-card--highlight h3::after {
  content: "✦";
  position: absolute;
  right: 20px; top: 50%;
  font-size: 22px; line-height: 1;
  transform: translateY(-50%) rotate(8deg);
}
.compare-card ul { list-style: none; display: flex; flex-direction: column; flex: 1; padding: 10px 0; }
.compare-card li { position: relative; padding: 9px 24px 9px 52px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.compare-card li.yes { color: var(--ink); }
.compare-card li::before { position: absolute; left: 24px; top: 9px; font-weight: 800; font-size: 15px; }
.compare-card li.yes::before { content: "\2713"; color: var(--ink); }
.compare-card li.no::before { content: "\2715"; color: var(--bad); }
.compare-foot { border-top: var(--rule-thin); padding: 16px 24px 18px; }
.compare-foot a { font-size: 14px; }
.compare-outro {
  margin-top: 40px; max-width: 760px;
  font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; line-height: 1.35;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   10. OBJECTIONS: ruled rows, plain numerals in the narrow cut
   -------------------------------------------------------------------------- */
.objections-section { background: var(--paper); }
.objections-section .headline { margin-bottom: 32px; }
.objection {
  display: grid; grid-template-columns: 5fr 7fr; gap: 40px;
  padding: 32px 0; border-top: var(--rule-thin);
}
.headline + .objection { border-top: var(--rule); }
.objection:last-of-type { border-bottom: var(--rule); }
.obj-q { display: flex; align-items: flex-start; gap: 18px; }
.obj-num {
  font-weight: 800; font-stretch: var(--wdth-narrow);
  font-size: 40px; line-height: 0.9;
  color: var(--ink); flex: none; min-width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--rule); border-radius: var(--radius-sm);
  background: var(--accent-soft); box-shadow: 3px 3px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}
.obj-q em { font-size: 20px; font-weight: 700; font-style: italic; color: var(--ink); line-height: 1.35; letter-spacing: -0.01em; padding-top: 2px; }
.obj-a p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-bottom: 12px; max-width: 62ch; }
.obj-a .obj-strong { color: var(--ink); font-weight: 700; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. THE LOOP: light, the product screenshot in a T3 frame
   -------------------------------------------------------------------------- */
.loop-section { background: var(--paper); overflow: hidden; }
.loop-lede { margin: 20px 0 40px; max-width: 62ch; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.loop-lede strong { color: var(--ink); }
.scrollframe { margin-top: 40px; }
.scrollframe-card {
  position: relative;
  background: var(--panel);
  border: var(--rule);
  box-shadow: var(--shadow-2);
  padding: 12px;
  border-radius: var(--radius-lg);
}
.scrollframe-card::before {
  content: "";
  position: absolute;
  width: 86px; height: 28px;
  right: 48px; top: -17px;
  border: var(--rule);
  border-radius: var(--radius-xs);
  background: var(--accent);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(3deg);
}
.scrollframe-screen { border: var(--rule); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); }
.scrollframe-screen img { display: block; width: 100%; height: auto; }
.loop-link { margin-top: 40px; }

/* --------------------------------------------------------------------------
   12. CALCULATOR: bordered slider, ok-tinted banner, merged card pair
   -------------------------------------------------------------------------- */
.calc-section { background: var(--paper); }
.calc-section .headline { margin-bottom: 40px; }
.calc-slider-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.calc-slider-row label { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.calc-slider-row output {
  font-weight: 800; font-stretch: var(--wdth-narrow);
  font-size: clamp(32px, 3.2vw, 44px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; margin: 0;
  background: transparent; cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 16px;
  border: var(--rule);
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 26%), var(--panel-2) var(--fill, 26%), var(--panel-2) 100%);
  border-radius: var(--radius-pill);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -7px;
  background: var(--accent);
  border: var(--rule);
  box-shadow: 2px 2px 0 var(--ink);
  border-radius: var(--radius-xs);
}
input[type="range"]::-moz-range-track {
  height: 12px;
  border: var(--rule);
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 26%), var(--panel-2) var(--fill, 26%), var(--panel-2) 100%);
  border-radius: var(--radius-pill);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: var(--radius-xs);
  background: var(--accent); border: var(--rule);
  box-shadow: 2px 2px 0 var(--ink);
}
.calc-slider-bounds { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }

.calc-banner {
  position: relative;
  margin: 32px 0; padding: 22px 24px;
  background: var(--ok-bg); border: var(--rule);
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 0 var(--ink);
}
.calc-banner::after {
  content: "↗";
  position: absolute;
  right: 22px; top: -22px;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--rule);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 22px; font-weight: 800;
  transform: rotate(5deg);
}
.calc-banner h3 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.calc-banner h3 strong { color: var(--ok); font-variant-numeric: tabular-nums; }
.calc-banner p { margin-top: 6px; font-size: 14px; color: var(--ink-2); }

.calc-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); border-left: var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; }
.calc-card { display: flex; flex-direction: column; background: var(--panel); border-right: var(--rule); border-bottom: var(--rule); }
.calc-card > h3 {
  font-size: 19px; font-weight: 800; letter-spacing: -0.01em;
  padding: 18px 24px;
  background: var(--panel-2);
  border-bottom: var(--rule);
}
.calc-card .us-title { background: var(--accent); color: var(--accent-ink); }
.calc-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 16px 24px; border-top: var(--rule-thin);
}
.calc-card > h3 + .calc-line { border-top: none; }
.calc-line-label { display: block; font-size: 15px; font-weight: 700; }
.calc-line-note { display: block; font-size: 13px; color: var(--ink-2); max-width: 300px; margin-top: 3px; }
.calc-line-val { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-line-val.neg { color: var(--bad); }
.calc-line-val.pos { color: var(--ok); }
.calc-total { padding: 20px 24px 24px; border-top: var(--rule); }
.calc-total-label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.calc-total-num {
  font-size: var(--t-num); font-weight: 800; font-stretch: var(--wdth-narrow);
  line-height: 1; font-variant-numeric: tabular-nums; margin-top: 8px;
}
.calc-total-num.pos { color: var(--ok); }
.calc-total-note { font-size: 14px; color: var(--ink-2); }
.calc-panel { flex: 1; padding: 20px 24px 24px; border-top: var(--rule); }
.calc-panel h4 { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.calc-panel ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.calc-panel li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.calc-panel--red { background: var(--bad-bg); }
.calc-panel--red h4 { color: var(--bad); }
.calc-panel--red li::before { content: "\2715"; position: absolute; left: 0; color: var(--bad); font-weight: 800; font-size: 13px; }
.calc-panel--green { background: var(--ok-bg); }
.calc-panel--green h4 { color: var(--ok); }
.calc-panel--green li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 800; font-size: 13px; }

.calc-fineprint { margin-top: 16px; font-size: 13px; color: var(--ink-2); }

/* T2: the whole card is a link */
.calc-cta-card {
  margin-top: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--panel);
  border: var(--rule);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.calc-cta-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-1-hover); }
.calc-cta-card:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.calc-cta-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.calc-cta-card p { font-size: 15px; color: var(--ink-2); }
.calc-cta-link { flex: none; font-size: 16px; }

/* --------------------------------------------------------------------------
   13. BACK COVER: final CTA band + footer on brand navy. Tokens invert here
   so rules, borders and shadows follow; the accent keeps its navy text.
   -------------------------------------------------------------------------- */
.footer {
  --ink: #F1F1F9;
  --ink-2: rgba(241, 241, 249, 0.78);
  --paper: #201E3D;
  --panel: #201E3D;
  --panel-2: #2C2A4E;
  --rule: 2px solid var(--ink);
  --rule-thin: 1px solid var(--ink);
  --shadow-1: 4px 4px 0 var(--ink);
  --shadow-1-hover: 6px 6px 0 var(--ink);
  --shadow-2: 8px 8px 0 var(--ink);
  background: #201E3D;
  color: var(--ink);
}
.cta-band { padding: var(--section) 0; }
.cta-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.cta-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.cta-bubble { display: inline-flex; align-items: center; justify-content: center; position: relative; }
.cta-bubble-1 { width: 64px; height: 64px; background: #F1F1F9; border: var(--rule); }
.cta-bubble-1 img { width: 40px; height: 40px; }
.cta-bubble-2 { width: 36px; height: 64px; }
.cta-bubble-2::after { content: "\2192"; font-size: 28px; font-weight: 700; color: var(--ink); }
.cta-bubble-3 { width: 124px; height: 64px; background: #F1F1F9; border: var(--rule); }
.cta-bubble-1, .cta-bubble-3 { border-radius: var(--radius-md); box-shadow: 4px 4px 0 var(--accent); }
.cta-bubble-3 img { width: 88px; height: auto; }
.cta-eyebrow { font-size: 17px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.cta-band h2 {
  font-weight: 800; font-stretch: var(--wdth-display);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1; letter-spacing: -0.02em; color: var(--ink);
  max-width: 900px; text-wrap: balance;
}
.cta-sub { margin: 20px 0 32px; font-size: 18px; color: var(--ink-2); }
.cta-divider { border: 0; border-top: var(--rule-thin); margin: 48px 0 24px; max-width: 560px; opacity: 0.45; }
.cta-explore-label { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.cta-explore { display: flex; gap: 24px; flex-wrap: wrap; }
.cta-explore a {
  font-size: 15px; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: var(--accent);
  transition: text-decoration-color var(--dur) var(--ease);
}
.cta-explore a:hover { text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid rgba(241, 241, 249, 0.35); padding: 64px 0 40px; }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.footer-logo { width: 150px; height: auto; margin-bottom: 40px; }
/* Our lockup and the partner mark open the back cover as a pair. */
.footer-brand {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px; margin-bottom: 40px;
}
.footer-brand .footer-logo { margin-bottom: 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr) 320px; gap: 40px; padding-bottom: 48px; border-bottom: var(--rule); }
.foot-col h3 { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.foot-col a {
  display: block; padding: 5px 0; font-size: 15px; color: var(--ink-2);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.foot-col a:hover { color: var(--ink); text-decoration-color: var(--accent); }
.foot-col .ext { font-size: 11px; }
.foot-news h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 10px; }
.foot-news > p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-bottom: 16px; }
.foot-form { position: relative; display: flex; }
.foot-form input[type="email"] {
  flex: 1; min-width: 0; height: 48px;
  border: var(--rule); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: #F1F1F9; color: #201E3D;
  font-family: var(--font); font-size: 15px;
  padding: 0 14px;
}
.foot-form input::placeholder { color: #4A4866; }
.foot-form button {
  flex: none; width: 48px; height: 48px;
  border: var(--rule); background: var(--accent); color: var(--accent-ink);
  font-size: 20px; font-weight: 700; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.foot-form button:hover { background: var(--ink); color: #201E3D; }
.foot-fine { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.footer-boilerplate { margin-top: 24px; font-size: 13px; line-height: 1.7; color: var(--ink-2); max-width: 880px; }
.footer-boilerplate a { color: var(--ink); }
.footer-bottom {
  margin-top: 24px; padding-top: 18px;
  border-top: var(--rule-thin);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 12.5px; color: var(--ink-2);
}
.footer-legal { display: flex; gap: 18px; }
.footer-legal a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.back-top { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--ink); }
.back-top svg {
  width: 30px; height: 30px; padding: 6px; overflow: visible;
  border: 1.5px solid var(--ink); border-radius: var(--radius-xs);
  box-shadow: 2px 2px 0 var(--accent); fill: none; stroke: currentColor; stroke-width: 2;
  transition: translate 180ms var(--ease), box-shadow 180ms var(--ease);
}
.back-top:hover svg, .back-top:focus-visible svg { translate: 0 -3px; box-shadow: 2px 5px 0 var(--accent); }
.back-top:active svg { translate: 2px 2px; box-shadow: none; }

/* ==========================================================================
   15. WORK / PROOF + VENTURES: merged-border grids (T1), static
   ========================================================================== */
.proof-section   { background: var(--paper); }
.ventures-section{ background: var(--paper); }

.proof-head { position: relative; max-width: 760px; margin-bottom: 40px; }
.proof-head .headline { margin-bottom: 16px; }
.proof-lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.proof-section .proof-head::after {
  content: "////";
  position: absolute;
  right: -118px; bottom: 8px;
  padding: 8px 11px 7px;
  border: var(--rule);
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 15px; font-weight: 800; line-height: 1;
  letter-spacing: 2px;
  transform: rotate(-5deg);
}

/* Case-study grid: covers in bordered plates, caption row below */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  padding: 0;
}
.case-canvas { aspect-ratio: 1200 / 750; overflow: hidden; background: var(--panel-2); border-bottom: var(--rule); }
.case-canvas img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.case-meta { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.case-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.case-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.case-tag { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.case-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }

/* Clients + open-source strips: bordered rows that stack and merge */
.proof-oss {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 16px 20px;
  background: var(--panel);
  border: var(--rule);
  border-radius: var(--radius-sm);
}
.proof-oss + .proof-oss { margin-top: 12px; }
.proof-growth { background: var(--accent-wash); }
.proof-oss-label { font-size: 12px; font-weight: 700; color: var(--ink-2); padding-right: 4px; }
.proof-oss-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.proof-oss a { font-size: 14px; text-underline-offset: 4px; }
.proof-oss-all { margin-left: auto; white-space: nowrap; }
.proof-clients-eco { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }

/* Venture tiles */
.ventures-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.venture-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  padding: 0;
}
.venture-card:nth-child(even) { translate: 0 14px; }
.venture-card:nth-child(2)::after,
.venture-card:nth-child(4)::after {
  content: "";
  position: absolute;
  width: 34px; height: 12px;
  right: 18px; top: -8px;
  border: var(--rule);
  border-radius: 4px;
  background: var(--accent-soft);
  transform: rotate(5deg);
}
.venture-card { overflow: visible; }
.venture-cover { aspect-ratio: 1200 / 750; overflow: hidden; border-radius: 14px 14px 0 0; background: var(--panel-2); border-bottom: var(--rule); }
.venture-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.venture-body { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; flex: 1; padding: 16px 18px 18px; }
.venture-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.venture-note { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink-2); }
.venture-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--ink-2); }

/* ==========================================================================
   16. THE RECORD PAGE (/record): dated, bilingual ledger (T0 rules)
   ========================================================================== */
.rec-page { background: var(--paper); }

.rec-hero { padding: 56px 0 40px; }
.rec-hero .section-tab { margin: -32px 0 20px; font-size: 12px; line-height: 1; color: var(--paper); max-width: none; }
.rec-hero h1 {
  font-weight: 800; font-stretch: var(--wdth-display);
  font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: balance; max-width: 780px;
}
.rec-hero p:not(.section-tab) { margin-top: 20px; max-width: 56ch; font-size: 18px; line-height: 1.6; color: var(--ink-2); }

.rec-body { padding: 0 0 var(--section); }

/* Language toggle lives in the shared nav (.lang-switch), driven by the global
   html[data-lang] mechanism; the ledger's .lang-en/.lang-es blocks follow it. */
.rec-ledger { list-style: none; border: var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; background: var(--panel); margin-top: 8px; }
.rec-entry {
  display: grid; grid-template-columns: 116px 1fr auto; gap: 28px; align-items: start;
  padding: 24px;
}
.rec-entry + .rec-entry { border-top: var(--rule-thin); }
.rec-when { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); padding-top: 4px; }
.rec-etag { color: var(--ink-2); margin-bottom: 6px; }
.rec-main h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); margin-bottom: 6px; }
.rec-main p { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.priv-list { margin: 4px 0 10px 1.2em; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.priv-list li + li { margin-top: 6px; }
.rec-main p + p { margin-top: 10px; }
.rec-cite { display: inline-block; margin-top: 10px; font-size: 14px; text-underline-offset: 4px; }
.rec-cite + .rec-cite { margin-left: 18px; }
.rec-note { margin-top: 32px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

/* ==========================================================================
   17. EVENTS: two horizontal rails (films 16:9 + shorts 9:16) + video lightbox.
   Thumbnails are local; the YouTube (nocookie) iframe mounts only on click.
   ========================================================================== */
.events-section { background: var(--paper); }
.events-section .proof-head { margin-bottom: 32px; }
.events-section .proof-head::after {
  content: "✦";
  position: absolute;
  right: -110px; top: 34px;
  width: 58px; height: 58px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--rule);
  border-radius: 18px 6px 18px 6px;
  background: var(--accent);
  box-shadow: 5px 5px 0 var(--ink);
  color: var(--accent-ink);
  font-size: 28px; font-weight: 800;
  transform: rotate(7deg);
}

/* overflow-x: clip isolates the inner scroll rail so it can't inflate the
   document scrollWidth; clip (not hidden) still lets the hard shadows and
   focus rings show vertically. */
.evrail-wrap { position: relative; overflow-x: clip; }
.evrail-wrap + .evrail-wrap { margin-top: 28px; }
.evrail {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 4px 12px 12px 4px; margin: 0;
}
.evrail::-webkit-scrollbar { display: none; }

/* T2: the card opens the lightbox */
.ev-card {
  flex: none; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: var(--rule);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0; cursor: pointer; text-align: left;
  font-family: inherit; color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ev-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-1-hover); }
.ev-card:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.ev-card--film { width: 440px; }
.ev-card--short { width: 220px; }

.ev-thumb { position: relative; overflow: hidden; background: var(--panel-2); border-bottom: var(--rule); }
.ev-card--film .ev-thumb { aspect-ratio: 16 / 9; }
.ev-card--short .ev-thumb { aspect-ratio: 9 / 16; }
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: var(--accent); color: var(--accent-ink);
  border: var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--ink);
}
.ev-play svg { width: 22px; height: 22px; margin-left: 2px; }
.ev-card--short .ev-play { width: 46px; height: 46px; }

.ev-meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.ev-tag { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ev-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.ev-card--short .ev-title { font-size: 13.5px; }

.ev-more {
  flex: none; scroll-snap-align: start; align-self: center;
  display: inline-flex; align-items: center; padding: 0 20px;
  font-size: 14px; white-space: nowrap;
}

/* Arrows: bordered squares, desktop only (touch uses swipe) */
.evrail-arrow {
  position: absolute; top: calc(50% - 20px); z-index: 3;
  width: 40px; height: 40px;
  border: var(--rule); background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-1); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.evrail-arrow svg { width: 20px; height: 20px; }
.evrail-arrow:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-1-hover); }
.evrail-arrow:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.evrail-prev { left: 8px; }
.evrail-next { right: 8px; }
.evrail-wrap--short .evrail-arrow { top: calc(42% - 20px); }
@media (hover: none) { .evrail-arrow { display: none; } }

/* Video lightbox */
.vlb-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(32, 30, 61, 0.92);
  opacity: 0; transition: opacity 200ms var(--ease);
}
.vlb-overlay.open { opacity: 1; }
.vlb-overlay[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.vlb-frame {
  position: relative; width: min(960px, 100%);
  background: #000; border: 2px solid #F1F1F9;
  box-shadow: 8px 8px 0 #F1F1F9;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.vlb-frame[data-aspect="16x9"] { aspect-ratio: 16 / 9; }
.vlb-frame[data-aspect="9x16"] { aspect-ratio: 9 / 16; width: min(420px, 100%); }
.vlb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlb-close {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  width: 44px; height: 44px;
  border: 2px solid #F1F1F9; background: #201E3D; color: #F1F1F9; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vlb-close:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-ink); }
.vlb-close:focus-visible { outline-color: var(--accent); }
.vlb-close svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   18. RESPONSIVE: md (768-1023): tighten; <768: stack
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav-bar { gap: 12px; }
  .nav-links a { padding: 8px 8px; font-size: 14px; white-space: nowrap; }

  .hero-top { grid-template-columns: 1fr; gap: 40px; padding: 48px var(--gutter) 48px; }
  .hero-copy { max-width: 620px; }
  .ship-log { width: 100%; max-width: 460px; }

  .letter-grid, .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .letter-grid .section-link { grid-column: 1; }
  .compare-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .ventures-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-news { grid-column: 1 / -1; max-width: 420px; }
  .proof-section .proof-head::after,
  .events-section .proof-head::after { display: none; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 72px; }

  /* Nav: brand left, bordered burger right, menu drops below the bar */
  .nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 60px; }
  .nav-bar { height: auto; padding: 0; margin: 0; max-width: none; gap: 0; }
  .nav-bar .nav-links, .nav-bar .lang-switch, .nav-bar .nav-cta { display: none; }
  .nav-brand { margin-right: 0; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-word { font-size: 16px; }
  .nav-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px;
    border: var(--rule); background: var(--panel);
    box-shadow: var(--shadow-1); cursor: pointer;
    border-radius: var(--radius-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .nav-burger:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
  .nav-burger span { width: 18px; height: 2px; background: var(--ink); transition: transform 150ms var(--ease), opacity 150ms var(--ease); }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: var(--rule);
    padding: 4px 16px 20px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 5px 0 var(--ink);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu nav { display: flex; flex-direction: column; }
  .mobile-menu nav a:not(.btn) { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; padding: 14px 0; color: var(--ink); border-top: var(--rule-thin); }
  .mobile-menu nav a:not(.btn):first-child { border-top: 0; }
  .mobile-menu nav .lang-switch--menu { margin: 12px 0 4px; }
  .mobile-menu nav .btn { margin-top: 14px; align-self: flex-start; }

  /* Hero */
  .hero-top { padding: 40px 20px 40px; gap: 32px; }
  .hero-band::before { width: 78px; height: 78px; right: -44px; top: 106px; border-radius: 20px 6px 20px 6px; }
  .hero-band::after { width: 58px; height: 58px; left: -34px; bottom: 330px; }
  .ship-log::before { right: 20px; top: -30px; font-size: 28px; }
  .hero-h1 { font-size: clamp(38px, 10vw, 48px); }
  .hero-sub { font-size: 16px; }
  .hero-ctas { flex-direction: column; align-items: stretch; max-width: 320px; gap: 14px; }
  .log-card { max-width: 100%; }
  .log-entries li { grid-template-columns: 64px 1fr auto; padding: 12px 16px; gap: 10px; }
  .log-body { font-size: 13.5px; }
  .log-head, .log-foot { padding-left: 16px; padding-right: 16px; }
  .hero-inner { padding: 8px 20px 64px; }
  .hero-statement h2 { font-size: 26px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 18px 16px; }
  .stat:nth-child(even) { transform: none; }
  .stat-num { font-size: 36px; }

  /* Story */
  .letter-signatures { flex-direction: column; gap: 24px; }
  .letter-card::after { right: 20px; }

  /* Checklist */
  .check-grid { grid-template-columns: 1fr; column-gap: 0; }

  /* Objections + three ways in */
  .objection, .door { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .door h3 { font-size: 20px; }

  /* Loop frame */
  .scrollframe-card { padding: 8px; }

  /* Calculator: our card first */
  .calc-grid { grid-template-columns: 1fr; }
  .calc-card--us { order: -1; }
  .calc-cta-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px; }
  .calc-cta-card h3 { font-size: 19px; }

  /* Work / ventures */
  .case-grid { grid-template-columns: 1fr; }
  .ventures-grid { grid-template-columns: 1fr; }
  .venture-card:nth-child(even) { translate: none; }
  .proof-oss-all, .proof-clients-eco { margin-left: 0; }

  /* Events */
  .ev-card--film { width: 300px; }
  .ev-card--short { width: 150px; }
  .evrail-arrow { display: none; }

  /* Record */
  .rec-hero { padding: 40px 0 32px; }
  .rec-entry { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .rec-when { padding-top: 0; }

  /* Back cover */
  .cta-band h2 { font-size: clamp(32px, 9vw, 44px); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-news { max-width: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .vlb-overlay { padding: 12px; }
  .quote-section .quote-inner { margin-left: 20px; margin-right: 20px; padding: 60px 24px 32px; }
  .quote-section .quote-inner::after { right: 20px; top: 8px; font-size: 64px; }
  .faq-head::after { display: none; }
  .scrollframe-card::before { width: 64px; height: 22px; right: 26px; top: -14px; }
  .calc-banner::after { width: 36px; height: 36px; right: 16px; top: -19px; font-size: 19px; }
}

/* Finishing details: tactile controls, small material cues, one-shot accents.
   Individual rotate/translate properties preserve the placed geometry. */
.section-tab { transform-origin: 12px 50%; }
.letter-card::before, .letter-card::after, .ship-log::before,
.proof-head::after, .faq-head::after, .calc-banner::after,
.scrollframe-card::before, .quote-inner::after,
.venture-card::after { pointer-events: none; }
.letter-card::before, .scrollframe-card::before, .venture-card::after {
  outline: 1px solid rgba(255, 255, 255, .55); outline-offset: -5px;
}
.case-meta { padding: 16px 18px 20px; gap: 8px; }
.case-tag { font-weight: 500; }
.case-badge { background: var(--accent-wash); }
.log-head { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.log-entries li, .rec-entry { transition: background-color 180ms var(--ease); }
.log-entries li:focus-within, .rec-entry:focus-within { background: var(--accent-wash); }
.foot-form { border-radius: var(--radius-sm); transition: box-shadow 180ms var(--ease); }
.foot-form:focus-within { box-shadow: 4px 4px 0 var(--accent); }
.btn:focus-visible, .ev-card:focus-visible, .evrail-arrow:focus-visible,
.calc-cta-card:focus-visible { outline-offset: 7px; }
.arrow { transition: transform 220ms var(--ease); }
a:focus-visible .arrow { transform: translateX(3px); }
.compare-card--highlight h3 { padding-right: 56px; }
.calc-banner { padding-top: 28px; }
.evrail-arrow:disabled { visibility: hidden; }

@keyframes detail-settle {
  from { rotate: -9deg; translate: 0 -8px; }
  65% { rotate: 2deg; translate: 0 1px; }
  to { rotate: 0deg; translate: 0 0; }
}
@keyframes tab-settle {
  from { rotate: -4deg; translate: 0 -4px; }
  to { rotate: 0deg; translate: 0 0; }
}
@keyframes ink-trace {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes answer-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .stats-bar.detail-entered .mark-trace {
    stroke-dasharray: 1;
    animation: ink-trace 800ms var(--ease) both;
  }
  .stat:nth-child(2) .mark-trace { animation-delay: 80ms; }
  .stat:nth-child(3) .mark-trace { animation-delay: 160ms; }
  .stat:nth-child(4) .mark-trace { animation-delay: 240ms; }
  .faq-list details[open] p { animation: answer-enter 240ms var(--ease); }
  .detail-entered .section-tab { animation: tab-settle 540ms var(--ease) both; }
  .detail-entered .proof-head::after, .detail-entered .faq-head::after,
  .detail-entered .calc-banner::after, .detail-entered .scrollframe-card::before,
  .detail-entered .letter-card::after { animation: detail-settle 700ms var(--ease) 120ms both; }
  .ship-log::before { animation: detail-settle 800ms var(--ease) 250ms both; }
  .ev-thumb img { transition: transform 600ms var(--ease); }
  .ev-play { transition: scale 240ms var(--ease), box-shadow 240ms var(--ease); }
  .cta-bubble-1, .cta-bubble-3 { transition: rotate 300ms var(--ease); }
  @media (hover: hover) and (pointer: fine) {
    .ev-card:hover .ev-thumb img { transform: scale(1.035); }
    .ev-card:hover .ev-play { scale: 1.06; box-shadow: 5px 5px 0 var(--ink); }
    .cta-mark:hover .cta-bubble-1 { rotate: -5deg; }
    .cta-mark:hover .cta-bubble-3 { rotate: 3deg; }
  }
}
@media (hover: hover) and (pointer: fine) {
  .log-entries li:hover, .rec-entry:hover { background: var(--accent-wash); }
}
@media (max-width: 1023px) {
  .faq-head::after { display: none; }
}
@media (max-width: 767px) {
  /* Keep the edge tile clear of the Spanish headline as it wraps. */
  .hero-band::before { display: none; }
  .faq-list { --faq-inset: 16px; }
  .faq-list summary { gap: 16px; padding-block: 22px; font-size: 18px; }
  .faq-list details p { padding-right: 0; padding-bottom: 24px; }
  .stat-mark { width: 30px; height: 30px; margin-bottom: 14px; }
}

/* Very narrow phones: ledger rows drop the status chip onto its own row */
@media (max-width: 380px) {
  .log-entries li { grid-template-columns: 56px 1fr; row-gap: 6px; }
  .log-status { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   19. MOTION + BOLDNESS LAYER (2026-09-22 polish round)
   Spec: docs/superpowers/specs/2026-09-22-motion-polish-design.md
   Everything outside `html.motion` is the finished, motionless design.
   `html.motion` is set only by /assets/motion/motion.js when motion is
   allowed; rules scoped to it hold the from-states the script resolves.
   ========================================================================== */

/* 19.1 Smooth scroll (Lenis 1.3.26 vendor CSS; desktop only). Iframes only
   lose pointer events mid-glide, so the video player stays usable. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* 19.2 Chapters. Token inversion lives on .on-navy / .on-peach (single cards
   use it too); .chapter-* adds a full-bleed color layer whose clip-path the
   motion layer widens on scroll. Static default: edge to edge. */
.on-navy, .chapter-navy {
  --ink: #F1F1F9;
  --ink-2: rgba(241, 241, 249, 0.78);
  --paper: #201E3D;
  --panel: #201E3D;
  --panel-2: #2C2A4E;
  --rule: 2px solid var(--ink);
  --rule-thin: 1px solid var(--ink);
  --shadow-1: 4px 4px 0 var(--ink);
  --shadow-1-hover: 6px 6px 0 var(--ink);
  --shadow-2: 8px 8px 0 var(--ink);
  --shadow-3: 14px 14px 0 var(--ink);
  color: var(--ink);
}
.on-peach, .chapter-peach {
  --ink: #201E3D;
  --ink-2: #201E3D;                     /* #4A4866 is 3.2:1 on peach: secondary text goes full navy */
  --paper: #FF7151;
  --panel: #FFFFFF;
  --panel-2: #FFD9D0;
  --rule: 2px solid var(--ink);
  --rule-thin: 1px solid var(--ink);
  --shadow-1: 4px 4px 0 var(--ink);
  --shadow-1-hover: 6px 6px 0 var(--ink);
  --shadow-2: 8px 8px 0 var(--ink);
  --shadow-3: 14px 14px 0 var(--ink);
  --link-rule: rgba(32, 30, 61, 0.35);
  color: var(--ink);
}
.chapter-peach ::selection, .on-peach ::selection { background: #201E3D; color: #F1F1F9; }
.chapter-navy, .chapter-peach { position: relative; isolation: isolate; }
.section.chapter-navy, .section.chapter-peach, .cta-band.chapter-peach, .chapter-wrap .section { background: transparent; }
.chapter-navy::before, .chapter-peach::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--paper);
  clip-path: inset(0 var(--curtain-x, 0px) round var(--curtain-r, 0px));
}
.section.chapter-navy, .section.chapter-peach, .chapter-wrap { padding-top: var(--section); }
:is(.chapter-navy, .chapter-peach) + :is(.section, .chapter-wrap) { padding-top: var(--section); }

/* 19.3 Type tiers: display headlines grow; two new voices (setup, shout) */
.headline, .headline-left, .proof-head { max-width: 880px; }
.setup {
  display: block;
  font-size: var(--t-setup); font-weight: 500; font-stretch: 100%;
  letter-spacing: -0.01em; line-height: 1.3; text-transform: none;
  color: var(--ink-2);
}
.shout { display: block; }
.shout, .headline.shout, .cta-band h2.shout {
  font-weight: 900; font-stretch: var(--wdth-shout); text-transform: uppercase;
  font-size: var(--t-shout); line-height: 0.88; letter-spacing: -0.035em;
  text-wrap: balance; max-width: none;
}
.shout-accent { color: var(--accent); }

/* 19.4 Controls and links: label roll, arrow tile, drawn underlines,
   sliding language fill, magnetic lean */
.btn-label { display: inline-flex; overflow: hidden; line-height: 1.3; }
.btn-label > span { display: inline-block; text-shadow: 0 1.3em currentColor; transition: transform .5s var(--ease-expo); }
.btn-arrow {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; margin: 0 -14px 0 6px;
  border-radius: var(--radius-xs);
  background: #201E3D; color: #FF7151;
  overflow: hidden; font-size: 18px; font-weight: 800; line-height: 1;
}
.btn-arrow > span { display: block; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn-label > span { transform: translateY(-1.3em); }
  .btn:hover .btn-arrow > span { animation: arrow-loop .7s var(--ease-expo); }
  a:hover .arrow, .calc-cta-card:hover .arrow { transform: none; animation: arrow-nudge .65s var(--ease-expo); }
}
.btn:focus-visible .btn-label > span { transform: translateY(-1.3em); }
@keyframes arrow-loop {
  0% { transform: translateX(0); }
  40% { transform: translateX(170%); }
  40.1% { transform: translateX(-170%); }
  100% { transform: translateX(0); }
}
@keyframes arrow-nudge {
  0% { transform: none; opacity: 1; }
  40% { transform: translateX(.6em); opacity: 0; }
  40.1% { transform: translateX(-.45em); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
[data-magnetic] {
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate .7s var(--ease-expo), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:is(.section-link, .loop-link) a, .compare-foot a, .proof-oss a, .ev-more, .rec-cite, .log-more, .cta-explore a, .calc-cta-link {
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--link-rule), var(--link-rule));
  background-repeat: no-repeat;
  background-size: 0% 2px, 100% 2px;
  background-position: 100% 100%, 0 100%;
  padding-bottom: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .55s var(--ease-expo);
}
:is(.section-link, .loop-link) a:is(:hover, :focus-visible), .compare-foot a:is(:hover, :focus-visible),
.proof-oss a:is(:hover, :focus-visible), .ev-more:is(:hover, :focus-visible), .rec-cite:is(:hover, :focus-visible),
.log-more:is(:hover, :focus-visible), .cta-explore a:is(:hover, :focus-visible), .calc-cta-card:hover .calc-cta-link {
  background-size: 100% 2px, 100% 2px;
  background-position: 0 100%, 0 100%;
}
.nav-links a[aria-current="true"] { text-decoration-color: var(--accent); }
.lang-switch { position: relative; isolation: isolate; }
.lang-switch::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 50%;
  background: var(--ink); transition: translate .4s var(--ease-expo);
}
html[data-lang="es"] .lang-switch::before { translate: 100% 0; }
.lang-opt { flex: 1 1 0; min-width: 40px; transition: color .3s var(--ease-expo), background-color var(--dur) var(--ease); }
.lang-opt:hover,
html[data-lang="en"] .lang-opt[data-lang-set="en"],
html[data-lang="es"] .lang-opt[data-lang-set="es"] { background: transparent; }
html[data-lang="en"] .lang-opt[data-lang-set="es"]:hover,
html[data-lang="es"] .lang-opt[data-lang-set="en"]:hover { background: var(--panel-2); }

/* 19.5 Motion-scoped from-states (resolved by motion.js) and split wrappers */
html.motion .m-own[data-rise] { opacity: 1; transform: none; transition: none; }
html.motion .detail-entered .section-tab { animation: none; }
html.motion .section > .container::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease-expo); }
html.motion .section.is-in > .container::before { transform: scaleX(1); }
.m-line { display: block; }
/* SplitText sets overflow: clip on masks; axe only treats overflow: hidden as
   clipping, and misreads not-yet-revealed lines otherwise (Lighthouse audits at load). */
.m-line-mask { display: block; padding: .18em 0 .16em; margin: -.18em 0 -.16em; overflow: hidden !important; }

/* 19.6 Hero: nameplate, poster H1, marker sweep, plate (T4), ledger stamps.
   The H1 still paints on the first frame: only its marker fill animates. */
@media (min-width: 1024px) {
  .hero-top { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; padding: 32px var(--gutter) 28px; }
  .hero-copy { max-width: none; }
}
.hero-h1 { font-size: var(--t-3xl); line-height: .98; letter-spacing: -0.028em; }
/* Spanish runs ~25% longer: the same four-line poster block (62px x 4 ~ 84px x 3)
   keeps the press logos above the fold at 1440x900 (measured 2026-09-22). */
@media (min-width: 1024px) {
  html[data-lang="es"] .hero-h1 { font-size: clamp(44px, 4.3vw, 62px); }
}
.hero-h1 .mark {
  background-color: transparent;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 5px 5px 0 var(--ink);
}
.hero-band::before { display: none; } /* the plate replaces the cropped edge tile */

.nameplate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 24px; }
.nameplate-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-xs);
  box-shadow: 3px 3px 0 var(--accent);
  font-size: 15px; font-weight: 700; font-stretch: 118%; line-height: 1.15; letter-spacing: -0.005em;
}
.nameplate-tab::before { content: "\2726"; color: var(--accent); font-size: 13px; line-height: 1; }
.nameplate-type { position: relative; display: inline-block; }
.nameplate-caret {
  position: absolute; top: 0; bottom: 0; left: 100%; width: 8px; margin-left: 3px;
  background: var(--accent); opacity: 0; pointer-events: none;
}
.nameplate-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
/* Offices, not one city: Costa Rica, Panama, US. Separators are decorative (empty alt text). */
.nameplate-office + .nameplate-office::before { content: "\00B7" / ""; margin-right: 8px; }

.ship-log { isolation: isolate; }
.hero-plate {
  position: absolute; z-index: -1; pointer-events: none;
  top: -28px; bottom: -36px; left: 72px; right: -60vw;
  background: var(--accent-soft);
  border: var(--rule); border-radius: var(--radius-plate);
  box-shadow: var(--shadow-3);
  transform: rotate(-2deg); transform-origin: 0 50%;
}
.ship-log::before { font-size: 56px; top: -44px; right: 12px; -webkit-text-stroke: 2px var(--ink); }
.log-activity { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; margin-right: 6px; }
.log-activity i { display: block; width: 2px; height: 100%; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.6); }
.log-activity i:nth-child(2) { transform: scaleY(1); }
.log-activity i:nth-child(3) { transform: scaleY(.4); }

.press-logos li:nth-child(2), .hero-partners li:nth-child(2) { --p: 1; }
.press-logos li:nth-child(3) { --p: 2; }
.press-logos li:nth-child(4) { --p: 3; }
.press-logos li:nth-child(5) { --p: 4; }
.press-logos li:nth-child(6) { --p: 5; }

@media (prefers-reduced-motion: no-preference) {
  .nameplate-tab { animation: tab-wipe .55s var(--ease-expo) .08s both; }
  .nameplate-text { animation: type-in 1.05s var(--ease-expo) .38s both; }
  .nameplate-caret { animation: caret-ride 1.05s var(--ease-expo) .38s both, caret-blink .8s linear 1.43s 2 forwards; }
  .nameplate-meta { animation: fade-rise .7s var(--ease-expo) 1.1s both; }
  .hero-h1 .mark { animation: mark-sweep .85s var(--ease-expo) .45s both, mark-drop .5s var(--ease-expo) 1.05s both; }
  .hero-plate { animation: plate-in 1.3s var(--ease-expo) .12s backwards; }
  .log-status { animation: stamp .6s var(--ease-expo) both; animation-delay: calc(.7s + var(--d, 0s) * 1.5); }
  .press-logos li, .hero-partners li { animation: fade-rise .7s var(--ease-expo) both; animation-delay: calc(.55s + var(--p, 0) * 55ms); }
}
@keyframes tab-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-8px -8px -8px 0); } }
@keyframes type-in { from { clip-path: inset(-.3em 100% -.3em 0); } to { clip-path: inset(-.3em 0 -.3em 0); } }
@keyframes caret-ride { from { left: 0; opacity: 1; } to { left: 100%; opacity: 1; } }
@keyframes caret-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mark-sweep { from { background-size: 0% 100%; } }
@keyframes mark-drop { from { box-shadow: 0 0 0 var(--ink); } }
@keyframes plate-in { from { translate: 16% 0; rotate: -4deg; } }
@keyframes stamp { from { opacity: 0; transform: scale(1.7) rotate(-14deg); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }

/* Three named ambient loops, only with the motion layer, paused off-screen */
html.motion .log-activity i { animation: activity 1.2s ease-in-out infinite alternate; }
html.motion .log-activity i:nth-child(2) { animation-duration: .9s; animation-delay: -.4s; }
html.motion .log-activity i:nth-child(3) { animation-duration: 1.05s; animation-delay: -.7s; }
html.motion .ship-log::before { animation: detail-settle 800ms var(--ease) 250ms both, stamp-wobble 6s ease-in-out 1.1s infinite alternate; }
html.motion .hero-plate { animation: plate-in 1.3s var(--ease-expo) .12s backwards, plate-breath 9s ease-in-out 1.5s infinite alternate; }
html.hero-off .log-activity i, html.hero-off .ship-log::before, html.hero-off .hero-plate { animation-play-state: paused; }
@keyframes activity { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes stamp-wobble { from { rotate: -4deg; } to { rotate: 6deg; } }
@keyframes plate-breath { from { rotate: 0deg; } to { rotate: .9deg; } }

@media (min-width: 1101px) and (max-height: 820px) {
  .hero-top { padding-top: 24px; padding-bottom: 16px; }
  .nameplate { margin-bottom: 18px; }
  .hero-h1 { font-size: clamp(42px, 4.4vw, 62px); }
  html[data-lang="es"] .hero-h1 { font-size: clamp(40px, 4vw, 56px); }
}
@media (max-width: 1023px) {
  .hero-plate { top: 36px; bottom: -30px; left: 32px; right: -45vw; } /* behind the card only: never over the partner marks */
}
@media (max-width: 767px) {
  .nameplate { gap: 10px 12px; margin-bottom: 22px; }
  .nameplate-tab { font-size: 13.5px; padding: 7px 12px 7px 10px; gap: 8px; }
  .hero-h1 { font-size: clamp(40px, 11.2vw, 54px); }
  .ship-log::before { right: 18px; top: -34px; font-size: 40px; }
}

/* 19.7 Statement + stats: navy chapter 1. Tiles keep light fills and navy
   text on the navy field; their hard shadow turns paper. */
.statement-section .hero-statement { max-width: none; }
.statement-h { margin-bottom: 44px; }
.statement-h .setup { margin-bottom: 22px; }
.statement-section .hero-statement > p { font-size: 19px; line-height: 1.6; max-width: 60ch; }
.statement-section .stats-bar { margin-top: 80px; gap: 22px; }
.statement-section .stat {
  --ink: #201E3D; --ink-2: #201E3D; --panel: #FFFFFF;
  color: #201E3D; background: #FFFFFF; border: 2px solid #201E3D;
  box-shadow: 6px 6px 0 #F1F1F9;
  padding: 26px 24px 24px;
}
.statement-section .stat:nth-child(1) { background: var(--accent); }
.statement-section .stat:nth-child(3) { background: var(--accent-soft); }
.statement-section .stat:nth-child(even) { background: #FFFFFF; transform: translateY(16px); }
.statement-section .stat:nth-child(1) .mark-accent { fill: #FFFFFF; }
.statement-section .stat-num { font-size: var(--t-stat); font-stretch: var(--wdth-tall); line-height: .86; letter-spacing: -0.015em; }
.statement-section .stat-label { font-size: 15px; font-weight: 600; margin-top: 14px; }
@media (max-width: 767px) {
  .statement-section .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 52px; gap: 14px; }
  /* "5,000+" is 2.35em in the tall cut: size it to its half-width tile. */
  .statement-section .stat-num { font-size: min(var(--t-stat), calc((50vw - 67px) / 2.45)); }
  .statement-section .stat { padding: 20px 16px; }
  .statement-section .stat:nth-child(even) { transform: none; }
}

/* 19.8 Three ways in: a deck of three cards (peach, white, navy). The word
   is the stamp. Desktop + motion: cards stick and stack; everywhere else
   they simply stack. Sticky top must match DECK_TOP/DECK_STEP in motion.js. */
.doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 8px; }
.door {
  position: relative; display: block;
  padding: clamp(28px, 3.6vw, 52px);
  border: var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  background: #FFFFFF; color: var(--ink);
  transform-origin: 50% 0;
  container-type: inline-size;
}
.door:first-child, .door:last-child { border: var(--rule); }
.door--launch { background: var(--accent); }
.door--transform { background: #201E3D; box-shadow: 8px 8px 0 var(--accent); }
.door-word {
  display: block; margin: 0 0 clamp(22px, 2.6vw, 40px);
  font-weight: 900; font-stretch: var(--wdth-shout); text-transform: uppercase;
  font-size: min(var(--t-door), 15.5cqi); line-height: .8; letter-spacing: -0.045em;
}
/* The longest word sets the size per language (measured em-widths at 125%,
   2026-10-30: EXPLORE 5.92, CONSTRUIR 7.56), so it always fits its card
   (about 92% of the card's content box at the cap-free sizes). */
html[data-lang="es"] .door-word { font-size: min(var(--t-door), 12.2cqi); }
.door--transform .door-word { color: var(--accent); }
.door-body { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }
.door-q { display: block; }
.door h3 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; padding-top: 0; }
.door::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  background: #201E3D; opacity: var(--dim, 0);
}
.door:nth-child(2) { --i: 1; }
.door:nth-child(3) { --i: 2; }
@media (min-width: 1024px) and (min-height: 720px) {
  html.motion .door { position: sticky; top: calc(96px + var(--i, 0) * 20px); }
}
@media (max-width: 767px) {
  .door-body { grid-template-columns: 1fr; gap: 14px; }
}

/* 19.9 Work: shout headline; desktop reel (the section pins and the six
   plates travel sideways); growth receipts as a peach band of figures. */
.proof-section .proof-head { max-width: none; }
.proof-section .proof-head::after { display: none; }
.proof-section .proof-lede { max-width: 52ch; }
.case-reel-rule { display: none; }
/* The reel sits outside .container (ScrollTrigger zeroes a pinned element's
   margins before measuring it, so a negative-margin full bleed collapses).
   Static: a container-width grid. Reel: full width, content inset to the grid. */
.case-reel { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
html.motion .case-reel.is-reel {
  max-width: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  overflow: clip;
}
.section > .container.proof-tail { padding-top: 0; }
.section > .container.proof-tail::before { display: none; }
html.motion .is-reel .case-grid { display: flex; gap: 28px; width: max-content; }
html.motion .is-reel .case-card { flex: none; width: clamp(420px, 40vw, 600px); }
html.motion .is-reel .case-reel-rule {
  display: block; position: relative; height: 2px; margin-top: 32px;
  max-width: calc(var(--container) - 2 * var(--gutter)); background: var(--panel-2);
}
html.motion .is-reel .case-reel-rule span {
  position: absolute; inset: 0; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
}
.proof-growth {
  --link-rule: rgba(32, 30, 61, 0.35);
  display: block; padding: 24px 28px 28px;
  background: var(--accent); border: var(--rule); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.proof-growth .proof-oss-label { display: block; color: var(--ink); margin-bottom: 18px; }
.proof-growth .proof-oss-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; }
.proof-growth .proof-oss-links > * { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); padding-bottom: 8px; }
.proof-growth .proof-oss-links > * > span { display: flex; flex-direction: column; gap: 8px; }
.proof-growth .proof-oss-links strong {
  font-weight: 800; font-stretch: var(--wdth-tall);
  font-size: clamp(36px, 3.6vw, 50px); line-height: .9; letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  .proof-growth { padding: 20px; }
  .proof-growth .proof-oss-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .proof-growth .proof-oss-links { grid-template-columns: minmax(0, 1fr); } /* Tomatometro is 4.43em: one column on small phones */
}

/* 19.10 Ventures + Events: navy chapter 2. Cards stay light (white field,
   navy type) with paper hard shadows; every film card is the same size. */
.chapter-navy :is(.venture-card, .ev-card) {
  --ink: #201E3D; --ink-2: #4A4866; --panel: #FFFFFF; --panel-2: #E7E6F1; --paper: #F1F1F9;
  --rule: 2px solid #201E3D; --rule-thin: 1px solid #201E3D;
  --shadow-1: 4px 4px 0 #F1F1F9; --shadow-1-hover: 6px 6px 0 #F1F1F9;
  color: #201E3D; background: #FFFFFF;
}
.cursor-label {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  padding: 8px 12px 7px; border-radius: var(--radius-xs);
  background: #201E3D; color: #F1F1F9; border: 2px solid #F1F1F9;
  box-shadow: 3px 3px 0 #FF7151;
  font-size: 13px; font-weight: 800; font-stretch: 112%; line-height: 1; white-space: nowrap;
}

/* 19.11 Quotes drench their chapter (no panel); the loop's screen switches
   on with the scroll; ruled rows draw; the story underline and highlight
   sweep in. All from-states are html.motion-scoped. */
.quote-section.quote-drench { padding: var(--section) 0; }
.chapter-wrap > .quote-drench:first-child { padding-top: 0; }
.quote-drench .quote-inner {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  margin: 0 auto; padding: 0 var(--gutter);
}
.quote-drench .quote-inner::after {
  content: "\201C"; z-index: -1; right: var(--gutter); top: -.12em;
  color: var(--ink); opacity: .12;
  font-size: clamp(150px, 18vw, 260px); line-height: .8; font-weight: 900;
}
html.motion .quote-drench .quote-inner::after { transition: transform 1.2s var(--ease-expo) .15s, opacity .6s linear .15s; }
html.motion .quote-drench:not(.is-in) .quote-inner::after { transform: scale(.5) rotate(-14deg); opacity: 0; }
.quote-drench blockquote p { font-size: clamp(30px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.02em; max-width: 1020px; }
.chapter-navy .quote-drench blockquote p { color: var(--accent); }
.quote-drench .quote-attrib { margin-top: 36px; }
.quote-drench .quote-attrib img { width: 64px; height: 64px; }

.chapter-navy .scrollframe-card { --ink: #201E3D; --rule: 2px solid #201E3D; background: #FFFFFF; box-shadow: 10px 10px 0 var(--accent); }

/* "The Other Guys" is non-breaking (8.4em): the compare title fits it on the narrowest phones. */
.compare-title { font-size: min(var(--t-2xl), calc((100vw - 48px) / 8.6)); }
/* The checklist headline breaks by hand (<br>): give it the container so each half stays one line (EN 899/910px, ES 780/1055px at 64px). */
.checklist-section .headline { max-width: none; }
.check-icon { width: 48px; height: 48px; }
.check-icon svg { width: 22px; height: 22px; }
html.motion .check-item .check-icon { transition: transform .7s var(--ease-expo) calc(var(--row-delay, 0s) + .1s), opacity .35s linear calc(var(--row-delay, 0s) + .1s); }
html.motion .check-item:not(.is-in) .check-icon { transform: scale(.6) rotate(-10deg); opacity: 0; }
.faq-list summary > :is(.lang-en, .lang-es) {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0% 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .5s var(--ease-expo);
}
.faq-list summary:hover > :is(.lang-en, .lang-es) { background-size: 100% 2px; }
html.motion :is(.check-item, .objection) { position: relative; border-top-color: transparent; }
html.motion :is(.check-item, .objection)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1s var(--ease-expo) var(--row-delay, 0s);
}
html.motion .headline + .objection::before { top: -2px; height: 2px; }
html.motion :is(.check-item, .objection).is-in::before { transform: scaleX(1); }
.obj-num { min-width: 72px; height: 72px; font-size: 56px; font-stretch: var(--wdth-tall); box-shadow: 4px 4px 0 var(--ink); }
.objection:nth-of-type(odd) .obj-num { background: var(--accent); }
html.motion .objection .obj-num { transition: transform .7s var(--ease-expo) calc(var(--row-delay, 0s) + .15s), opacity .4s linear calc(var(--row-delay, 0s) + .15s); }
html.motion .objection:not(.is-in) .obj-num { transform: scale(.55) rotate(-12deg); opacity: 0; }
html.motion .compare-card li::before { transition: transform .5s var(--ease-expo) calc(var(--li, 0) * 50ms + .2s); }
html.motion .compare-grid:not(.is-in) li::before { transform: scale(0); }
html.motion .compare-card--highlight h3::after { transition: transform 1s var(--ease-expo) .1s; }
html.motion .compare-grid:not(.is-in) .compare-card--highlight h3::after { transform: translateY(-50%) rotate(-160deg) scale(.2); }

@media (min-width: 1024px) { .letter-head { position: sticky; top: 112px; } }
.hl-gradient {
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 94% / 100% .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.motion .hl-gradient { transition: background-size 1.2s var(--ease-expo) .55s; }
html.motion .letter-section:not(.is-in) .hl-gradient { background-size: 0% .12em; }
.letter-highlight { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 100% 100%; }
html.motion .letter-highlight { transition: background-size 1.3s var(--ease-expo); }
html.motion .letter-highlight:not(.is-in) { background-size: 0% 100%; }
.sig-person img { width: 64px; height: 64px; }
.letter-card::before { width: 104px; height: 28px; top: -16px; }

@media (max-width: 767px) {
  .quote-drench blockquote p { font-size: clamp(26px, 7.4vw, 34px); }
  .quote-drench .quote-inner::after { font-size: 140px; }
  .obj-num { min-width: 60px; height: 60px; font-size: 46px; }
}

/* 19.12 CTA band: peach chapter. The primary button inverts to navy with a
   white hard shadow; the arrow tile turns peach. */
.cta-band.chapter-peach { padding: var(--section) 0; }
.cta-band .cta-eyebrow { margin-bottom: 20px; color: var(--ink); }
.cta-band h2.shout { color: var(--ink); }
.cta-band .cta-sub { color: var(--ink); font-size: 19px; }
.cta-band .btn-primary { background: #201E3D; color: #F1F1F9; border-color: #201E3D; box-shadow: 4px 4px 0 #FFFFFF; }
.cta-band .btn-primary:hover { box-shadow: 6px 6px 0 #FFFFFF; }
.cta-band .btn-primary:active { box-shadow: 0 0 0 #FFFFFF; }
.cta-band .btn-primary .btn-arrow { background: var(--accent); color: #201E3D; }
.cta-band .cta-bubble-1, .cta-band .cta-bubble-3 { background: #FFFFFF; box-shadow: 4px 4px 0 #201E3D; }
.cta-band .cta-divider { opacity: .35; }
.cta-band .cta-explore-label { color: var(--ink); }

/* 19.13 Footer: a ghost wordmark cropped by the page's last edge. Static at
   full width (125%); with motion its width axis stretches from 62% as the
   footer arrives. The size is fitted so the 125% cut spans the container. */
.footer { position: relative; overflow: hidden; padding-bottom: 0; }
/* Decorative brand wordmark: drawn from CSS content (WCAG exempts logotypes;
   CSS content also keeps it out of contrast audits and the accessibility tree). */
.footer-ghost::before { content: "Dojo Coding"; }
.footer-ghost {
  display: block; width: max-content; margin: 64px auto -0.16em;
  font-weight: 900; font-stretch: var(--ghost-wdth, 125%); text-transform: uppercase;
  font-size: min(124px, calc((100vw - 48px) / 8.9)); line-height: .78; letter-spacing: -0.045em; /* measured: 8.80em wide at 125% */
  color: #2C2A4E; white-space: nowrap; text-align: center;
  user-select: none; pointer-events: none;
}
@media (max-width: 767px) { .footer-ghost { margin-top: 48px; } }

/* ==========================================================================
   20. NARRATIVE V4 (2026-10-30): content composition only. New pieces are
   built from the existing tokens and components: the wheel's hub line under
   the door deck, the "Cómo empezar" price table on the calculator's card,
   row and panel styles, the client logo wall, the team faces, the Dojo
   strip and the honest comparison table.
   ========================================================================== */

/* 20.1 Hero: the first line is a sentence, not a slogan, so the poster block
   steps down a size to keep the press strip above the fold at 1440x900. */
@media (min-width: 1024px) {
  .hero-h1 { font-size: clamp(44px, 4.2vw, 62px); }
  html[data-lang="es"] .hero-h1 { font-size: clamp(40px, 3.7vw, 54px); }
}
@media (min-width: 1101px) and (max-height: 820px) {
  .hero-h1 { font-size: clamp(40px, 3.8vw, 54px); }
  html[data-lang="es"] .hero-h1 { font-size: clamp(38px, 3.4vw, 50px); }
}
@media (max-width: 767px) {
  .hero-h1 { font-size: clamp(34px, 9.4vw, 44px); }
  html[data-lang="es"] .hero-h1 { font-size: clamp(32px, 8.8vw, 42px); }
}
.log-title { line-height: 1.35; }
.log-title img { flex: none; }
.log-body small { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* 20.2 The wheel: one statement per door, then the hub line. */
.door-body--one { display: block; }
.door-say {
  max-width: 46ch;
  font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink); text-wrap: pretty;
}
.rueda-hub {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 22px 28px;
  background: var(--accent-wash); border: var(--rule); border-radius: var(--radius-md);
}
.rueda-hub-line { max-width: 62ch; font-size: 18px; line-height: 1.5; color: var(--ink); }
.rueda-loop { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.rueda-loop-mark {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px;
  background: var(--accent); color: var(--accent-ink);
  border: var(--rule); border-radius: var(--radius-xs); box-shadow: 3px 3px 0 var(--ink);
  font-size: 22px; font-weight: 800; line-height: 1;
}
@media (max-width: 767px) { .rueda-hub { padding: 20px; } }

/* 20.3 Cómo empezar: prices on the calculator's merged card pair. */
.price-grid { grid-template-columns: 7fr 5fr; }
.price-line { align-items: flex-start; }
.price-line .calc-line-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 16px; }
.price-line .calc-line-note { max-width: 46ch; font-size: 14px; line-height: 1.5; }
.price-line .chip { height: 22px; font-size: 11px; background: var(--accent-wash); }
.price-val { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.price-val strong {
  font-weight: 800; font-stretch: var(--wdth-narrow); font-size: clamp(24px, 2.2vw, 30px); line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.price-from, .price-val small { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.calc-panel--terms { background: var(--accent-wash); }
.calc-panel--terms li::before { content: "\2713"; position: absolute; left: 0; color: var(--ink); font-weight: 800; font-size: 13px; }
@media (max-width: 1023px) { .price-grid { grid-template-columns: 1fr; } }

/* 20.4 Work: the Vantora plate pairs the desktop screen with the phone one
   (plain screens, no device or browser chrome). */
.case-canvas--duo { position: relative; }
.case-canvas .case-phone {
  position: absolute; right: 6%; bottom: -14%; width: 21%; height: auto;
  border: var(--rule); border-radius: var(--radius-sm); box-shadow: var(--shadow-1);
  object-fit: cover; object-position: top center;
}
.case-title { text-wrap: pretty; }

/* 20.5 Clients: the Dojo Coding-era wall (white tiles; light-on-dark marks
   on navy tiles; the count tile is a peach fill with navy type). */
.proof-clients { display: block; }
.proof-clients .proof-oss-label { display: block; margin-bottom: 14px; }
.logo-wall { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.logo-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 72px; padding: 10px 14px;
  background: var(--panel); border: var(--rule-thin); border-radius: var(--radius-xs);
}
.logo-tile img { width: auto; height: 30px; max-width: 100%; object-fit: contain; }
.logo-tile--sq img { height: 44px; }
.logo-tile--lab img { height: 24px; }
.logo-tile--lab small { font-size: 11px; font-weight: 800; line-height: 1; }
.logo-tile--dk { background: #201E3D; }
.logo-tile--more { background: var(--accent); color: var(--accent-ink); border: var(--rule); }
.logo-tile--more b { font-weight: 800; font-stretch: var(--wdth-tall); font-size: 34px; line-height: .9; font-variant-numeric: tabular-nums; }
.logo-tile--more small { font-size: 12px; font-weight: 700; }
@media (max-width: 1023px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .logo-tile { height: 60px; padding: 8px; }
  .logo-tile img { height: 22px; }
  .logo-tile--sq img { height: 34px; }
}

/* 20.6 Team: six faces, square, in T2 cards without press behavior. */
.team-section .proof-head { margin-bottom: 36px; }
.team-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.team-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-1);
}
.team-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: var(--rule); }
.team-who { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.team-who strong { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.team-who > span { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 1023px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* 20.7 Ventures shrink to a proof strip; Dojo closes it. */
.ventures-section .proof-head { margin-bottom: 32px; }
.ventures-section .venture-body { padding: 14px 16px 16px; }
.ventures-section .venture-card h3 { font-size: 18px; }
.dojo-strip { margin-top: 48px; font-size: 16px; line-height: 1.5; }
.dojo-strip-text { flex: 1 1 40ch; }
.chapter-navy .dojo-strip .proof-oss-all { color: var(--ink); }

/* 20.8 Compare: the dossier table (T1 panel). Partial verdicts get an en
   rule; cells where another option beats us carry a peach wash. Phones read
   one stacked card per criterion. */
.compare-head { margin-bottom: 40px; }
.cmp-wrap { border: var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; background: var(--panel); }
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.4; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; vertical-align: top; border-left: var(--rule-thin); border-top: var(--rule-thin); }
.cmp thead th, .cmp .cmp-corner { background: var(--panel-2); border-top: 0; font-size: 14px; font-weight: 800; vertical-align: bottom; }
.cmp .cmp-corner, .cmp tbody th { border-left: 0; }
.cmp tbody th { width: 26%; font-weight: 700; color: var(--ink); }
.cmp thead th.cmp-us { background: var(--accent); color: var(--accent-ink); }
.cmp td { color: var(--ink-2); }
.cmp td.cmp-us { color: var(--ink); font-weight: 700; }
.cmp td.wins { background: var(--accent-wash); }
.cmp td::before { display: inline-block; width: 1.2em; font-weight: 800; }
.cmp td.yes { color: var(--ink); }
.cmp td.yes::before { content: "\2713"; color: var(--ink); }
.cmp td.no::before { content: "\2715"; color: var(--bad); }
.cmp td.part::before { content: "\2013"; color: var(--ink); }
.cmp .cmp-col { display: none; }
.cmp-legend { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.cmp-swatch { flex: none; width: 18px; height: 18px; background: var(--accent-wash); border: var(--rule-thin); border-radius: 4px; }
@media (max-width: 899px) {
  .cmp-wrap { border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp thead { display: none; }
  .cmp tr { margin-bottom: 16px; background: var(--panel); border: var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; }
  .cmp tbody th { width: 100%; padding: 14px 16px; background: var(--panel-2); border-bottom: var(--rule); font-size: 16px; }
  .cmp td { display: flex; align-items: baseline; gap: 4px; padding: 10px 16px; border-left: 0; }
  .cmp tbody th + td { border-top: 0; }
  .cmp td::before { flex: none; }
  .cmp .cmp-col { display: block; flex: 1; font-weight: 600; color: var(--ink); }
  .cmp .cmp-v { flex: none; text-align: right; max-width: 55%; }
  .cmp td.cmp-us { background: var(--accent); color: var(--accent-ink); }
}
.nowrap { white-space: nowrap; }
.doors-section .headline { margin-bottom: 32px; }
/* Long Spanish words set their own shout and headline caps on phones
   (measured at 125% / 112%: CONSTRUIDO, 8.96em; CENTROAMERICANO. 9.62em). */
html[data-lang="es"] .statement-h .shout { font-size: min(var(--t-shout), calc((100vw - 48px) / 9.3)); }
html[data-lang="es"] .events-section .headline { font-size: min(var(--t-2xl), calc((100vw - 48px) / 10)); }
@media (max-width: 767px) {
  .ventures-section .ventures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ventures-section .venture-card h3 { font-size: 16px; }
  .ventures-section .venture-note { font-size: 13px; }
}

/* Booking: Google Calendar appointment page embedded in the closing CTA (T3 artifact on peach). */
.cta-cal { margin-top: 32px; max-width: 980px; background: var(--panel); border: var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-2); overflow: hidden; }
.cta-cal iframe { display: block; width: 100%; height: 680px; border: 0; }
@media (max-width: 640px) { .cta-cal iframe { height: 940px; } }
.cta-cal-alt { margin-top: 18px; font-weight: 700; }
.cta-cal-alt a { color: var(--ink); }

/* Hero card: who we work with. Tiles reuse .logo-wall; three across inside the T3 card. */
.hero-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 20px; }
.hero-logos .logo-tile { min-height: 64px; }
.hero-nums { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); }
.hero-nums > div { padding: 12px 20px; }
.hero-nums > div + div { border-left: var(--rule); }
.hero-nums b { display: block; font-weight: 800; font-stretch: var(--wdth-tall); font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-nums span { font-size: 14px; font-weight: 600; color: var(--ink-2); }