/* ==========================================================================
   dojocoding.io — standalone static homepage
   Structure donor: tiny.com (1:1 section clone)
   Skin: Dojo OS Design System, LIGHT MODE (DOJ-4809 tokens, PR #3180)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN SYSTEM TOKENS (light mode resolved values)
   -------------------------------------------------------------------------- */
:root {
  /* Brand primitives (theme-invariant) */
  --dojo-lilac:  #C980FC;
  --dojo-peach:  #FF7151;
  --dojo-hover:  #d69dfb;
  --dojo-blue:   #6267F9;
  --dojo-purple: #8D3FEC;
  --dojo-pink:   #F361E7;
  --dojo-yellow: #FFC648;
  --dojo-navy:   #201E3D;
  --dojo-green:  #71D772;
  --light-silver: #AEAEC8;
  --dark-silver:  #4F4F67;

  /* Semantic surfaces — LIGHT */
  --surface-page:   #F1F1F9;
  --surface-card:   #FFFFFF;
  --surface-sunken: #E2E2F3;
  --surface-field:  #F6F6FC;

  /* Text hierarchy — LIGHT */
  --ink:           #14141A;
  --ink-60:        rgba(20, 20, 26, 0.6);
  --ink-tertiary:  #4F4F67;
  --ink-muted:     #AEAEC8;

  /* Borders / glass — LIGHT */
  --hairline:       rgba(20, 20, 26, 0.10);
  --hairline-soft:  rgba(20, 20, 26, 0.07);
  --glass-border:   rgba(120, 120, 150, 0.22);
  --glass-fill:     rgba(20, 20, 26, 0.05);

  /* Gradients */
  --gradient-magic: linear-gradient(135deg, #C980FC 0%, #FF7151 100%);
  --gradient-band:  linear-gradient(155deg, #C68BFF 0%, #AC5FF0 34%, #DA5F9E 66%, #FF6E3E 100%);
  --gradient-text:  linear-gradient(90deg, #8D3FEC 0%, #F4643F 100%);

  /* Shadows */
  --shadow-glow:     0 0 18px 0 rgba(201, 128, 252, 0.7);
  --shadow-panel-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-panel-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-letter:   0 24px 48px -12px rgba(32, 30, 61, 0.18);
  --shadow-glass:    0 8px 32px rgba(32, 30, 61, 0.10), inset 0 1px 0 rgba(255,255,255,.6);

  /* Radius */
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  /* Fonts */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Anton', 'Manrope', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Status (light-surface derivatives of DS status palette) */
  --ok-bg:     #ECF9F0;
  --ok-border: #BBE8C9;
  --ok-text:   #15703C;
  --bad-bg:    #FDEFEC;
  --bad-border:#F5CDC3;
  --bad-text:  #B91C1C;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(201, 128, 252, 0.25); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid transparent; /* visible ring in forced-colors mode */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--dojo-lilac);
  border-radius: 6px;
}

/* 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: 24px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14px;
  transition: top .2s;
}
.skip-link:focus-visible { top: 24px; }

.container { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.section { padding: 112px 0; }

/* Inline text-link pattern (tiny: blue underline @30% -> full on hover) */
p a, .letter-list a, .compare-outro a, .faq-list a {
  color: var(--dojo-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(141, 63, 236, 0.3);
  transition: text-decoration-color .2s;
}
p a:hover, .letter-list a:hover, .compare-outro a:hover { text-decoration-color: var(--dojo-purple); }

/* Eyebrow (DS homepage kit: mono, uppercase, lilac, tracked) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dojo-purple);
  margin-bottom: 16px;
}

/* Headline (DS: Manrope 800 tracking-tight) */
.headline {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
  font-size: clamp(34px, 4.4vw, 58px);
  text-wrap: balance;
}
.headline-left { max-width: 760px; }
.headline-center { text-align: center; }

/* Section arrow-links (tiny: centered blue underlined links) */
.section-link { text-align: center; margin-top: 48px; }
.section-link a, .loop-link a, .compare-foot a {
  font-weight: 700;
  font-size: 18px;
  color: var(--dojo-purple);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(141, 63, 236, 0.3);
  padding: 8px 12px;
  border-radius: 999px;
  transition: background .2s, text-decoration-color .2s;
}
.section-link a:hover, .loop-link a:hover { background: rgba(141, 63, 236, 0.08); text-decoration-color: var(--dojo-purple); }
.arrow { display: inline-block; transition: transform .2s; }
a:hover .arrow { transform: translateX(3px); }

/* Buttons (DS Button.tsx recipe: radius 100px, Manrope 800, -0.02em) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 100px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em;
  white-space: nowrap; user-select: none; transition: all .2s;
}
.btn-md { height: 38px; padding: 0 20px; font-size: 14px; }
.btn-xl { height: 52px; padding: 0 30px; font-size: 17px; }
.btn-magic { background: var(--gradient-magic); color: #FFFFFF; }
.btn-magic:hover { box-shadow: var(--shadow-glow); transition: box-shadow 2s ease-out; }
.btn-cta-white { background: #FFFFFF; color: var(--ink); box-shadow: var(--shadow-glass); height: 60px; padding: 0 40px; font-size: 18px; }
.btn-cta-white:hover { transform: scale(1.03); }
.btn-cta-white:active { transform: scale(0.97); }

/* Scroll reveal — hidden state only applies when JS is available (html.js) */
html.js [data-rise] { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
html.js [data-rise].is-visible { opacity: 1; transform: none; }

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

/* Transparency fallback: glass surfaces go solid (uneven browser support —
   contrast holds even without blur) */
@media (prefers-reduced-transparency: reduce) {
  .nav-pill, .nav-brand--mobile, .nav-burger, .hero-eyebrow, .btn-hero-glass, .stats-bar {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mobile-menu { background: #F1F1F9; backdrop-filter: none; -webkit-backdrop-filter: 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; }

/* --------------------------------------------------------------------------
   3. NAV — floating glass pill (tiny: fixed top-6, 70px, blur 60px)
   -------------------------------------------------------------------------- */
.nav-wrap { position: fixed; top: 24px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; pointer-events: none; }
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 20px;
  height: 70px; padding: 8px 16px 8px 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(20, 20, 26, 0.06);
  box-shadow: 0 12px 40px rgba(32, 30, 61, 0.18), 0 2px 8px rgba(32, 30, 61, 0.08);
  max-width: calc(100% - 32px);
  animation: navIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes navIn { from { opacity: 0; transform: scale(.97) translateY(-6px); } to { opacity: 1; transform: none; } }

.nav-brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-word { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14px; font-weight: 600; color: var(--ink-tertiary);
  padding: 8px 14px; border-radius: 999px;
  transition: color .18s, background .18s;
}
.nav-links a:hover { color: var(--ink); background: rgba(20, 20, 26, 0.06); }
.nav-cta { flex: none; }

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

/* Language switch — EN/ES pill (shared, nav + mobile menu). Active option is
   styled purely from html[data-lang]; JS mirrors it into aria-pressed. */
.lang-switch {
  display: inline-flex; gap: 2px; padding: 3px; flex: none;
  border-radius: 999px; background: var(--surface-sunken);
}
.lang-opt {
  cursor: pointer; border: 0; background: none;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--ink-tertiary);
  transition: background .18s, color .18s;
}
.lang-opt:hover { color: var(--ink); }
html[data-lang="en"] .lang-opt[data-lang-set="en"],
html[data-lang="es"] .lang-opt[data-lang-set="es"] {
  background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-panel-lg);
}
.lang-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 3px var(--dojo-lilac); }
/* In the mobile menu (a stretch flex column) keep the pill hugging its EN/ES
   content instead of spanning the full row. */
.lang-switch--menu { align-self: flex-start; margin: 2px 0; }
/* No-JS: the switch can't work without the controller, so hide it. */
html:not(.js) .lang-switch { display: none; }

/* --------------------------------------------------------------------------
   4. HERO BAND (tiny: #1C22FE 100svh + noise -> DS magic gradient, light)
   -------------------------------------------------------------------------- */
.hero-band {
  position: relative;
  /* Flat brand navy (the logo's own ink + the loop card + footer token).
     Flat color + grain + white type: structure, not atmosphere. */
  background: var(--dojo-navy);
  overflow: hidden;
}
/* Noise overlay (tiny: bg-noise) */
.hero-band::before, .cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-top {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 72px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 148px 32px 72px;
}
/* The rising sun: the torii mark's disc, full-color, rising behind the
   Ship Log (orange crown -> lilac base, exactly like the logo circle) */
.hero-sun {
  position: absolute; z-index: 1;
  left: 76%; top: 60%;
  width: min(640px, 52vw); height: min(640px, 52vw);
  margin: calc(min(640px, 52vw) / -2) 0 0 calc(min(640px, 52vw) / -2);
  border-radius: 50%;
  /* The logo's disc, hard-edged: a graphic element, not a glow */
  background: linear-gradient(180deg, #FFB25C 0%, #FF7A4E 30%, #EE6A93 62%, #C980FC 100%);
  pointer-events: none;
  animation: sunRise 1.4s cubic-bezier(.22,1,.36,1) both;
  will-change: transform;
}
@keyframes sunRise { from { opacity: 0; transform: translateY(70px) scale(.96); } }
/* Hairline ring: the sun's orbit line, drawn once, quietly */
.hero-top::after {
  content: ""; position: absolute; z-index: 1;
  left: 76%; top: 60%; transform: translate(-50%, -50%);
  width: min(880px, 68vw); height: min(880px, 68vw);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 5; max-width: 620px; text-align: left; }
.hero-sub {
  margin-top: 24px;
  max-width: 560px;
  font-size: 17.5px; line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  animation: riseIn .6s cubic-bezier(.22,1,.36,1) both; animation-delay: .45s;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 36px;
  animation: riseIn .6s cubic-bezier(.22,1,.36,1) both; animation-delay: .53s;
}
.btn-hero-primary {
  height: 52px; padding: 0 28px; font-size: 17px;
  background: #FFFFFF; color: var(--ink);
  box-shadow: 0 12px 28px -10px rgba(32, 30, 61, 0.35), 0 2px 6px rgba(32, 30, 61, 0.10);
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(32, 30, 61, 0.4), var(--shadow-glow); }
.btn-hero-glass {
  height: 52px; padding: 0 28px; font-size: 17px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}
.btn-hero-glass:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 28px;
  animation: riseIn .5s cubic-bezier(.22,1,.36,1) both;
}
.eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--dojo-peach);
}
.hero-h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
}
.hero-h1 .w { display: inline-block; opacity: 0; transform: translateY(14px); animation: wordIn .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--wd, 0.15s); }
@keyframes wordIn { to { opacity: 1; transform: none; } }
/* Emphasis word: single solid brand coral (the logo's crown color) */
.hl-hero { color: #FF8A63; }

/* --------------------------------------------------------------------------
   THE SHIP LOG — the record, rendered as a paper artifact
   -------------------------------------------------------------------------- */
.ship-log {
  position: relative; z-index: 4;
  animation: cardIn .8s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .55s;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(28px) scale(.985); } }

.log-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F6FC 100%);
  border: 1px solid rgba(20, 20, 26, 0.10);
  box-shadow:
    0 30px 60px -18px rgba(32, 30, 61, 0.35),
    0 4px 10px rgba(32, 30, 61, 0.08),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
  transform: rotate(1.5deg);
  transition: box-shadow .35s;
  will-change: transform;
}
.log-card:hover {
  box-shadow:
    0 40px 70px -18px rgba(32, 30, 61, 0.45),
    0 4px 10px rgba(32, 30, 61, 0.08),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
}
/* Back sheet: a second receipt peeking from the stack */
.log-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transform: translate(9px, 10px) rotate(3deg);
}

.log-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px dashed rgba(20, 20, 26, 0.14);
}
.log-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
}
@keyframes pulse { from { opacity: 1; } to { opacity: .45; } }

.log-entries { list-style: none; margin: 0; padding: 0; }
.log-entries li {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center; gap: 14px;
  padding: 13px 24px;
  border-top: 1px solid rgba(20, 20, 26, 0.07);
  animation: logIn .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.9s + var(--d, 0s));
}
.log-entries li:first-child { border-top: none; }
.log-entries li:hover { background: rgba(20, 20, 26, 0.03); }
@keyframes logIn { from { opacity: 0; transform: translateY(7px); } }

.log-tag {
  font-family: var(--font-mono);
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.14em; color: rgba(20, 20, 26, 0.58);
}
.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: rgba(20, 20, 26, 0.55);
}
.log-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dojo-lilac); }
.log-body a:hover { text-decoration-color: var(--dojo-purple); }

.log-status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 20px; padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink);
  white-space: nowrap;
}
.s-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: rgba(20, 20, 26, 0.5); }
.s-dot--live { background: var(--dojo-green); animation: pulse 2.4s ease-in-out infinite alternate; }

.log-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 18px;
  border-top: 1px dashed rgba(20, 20, 26, 0.14);
}
.log-more {
  font-weight: 800; font-size: 13px; letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(201, 128, 252, 0.6);
}
.log-more:hover { text-decoration-color: var(--dojo-purple); }
.log-signers { display: inline-flex; align-items: center; }
.log-signers img { border-radius: 50%; object-fit: cover; }
.log-signers img:not(.log-seal) {
  width: 26px; height: 26px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(32, 30, 61, 0.2);
}
.log-signers img:nth-child(2) { margin-left: -8px; }
.log-seal {
  margin-left: 10px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 2px 4px rgba(32, 30, 61, 0.25));
  animation: stampIn .45s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: 1.5s;
}
@keyframes stampIn { from { opacity: 0; transform: scale(1.6) rotate(-16deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }

/* Statement + stats (tiny: continuation of the blue band) */
.hero-inner { position: relative; z-index: 5; max-width: 1152px; margin: 0 auto; padding: 24px 24px 112px; }
.hero-statement { text-align: center; max-width: 940px; margin: 0 auto; }
.hero-statement h2 {
  font-weight: 800; font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.28; letter-spacing: -0.015em; color: #FFFFFF;
  margin-bottom: 22px; text-wrap: balance;
}
.hero-statement p { font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, 0.75); }

.stats-bar {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 34px 8px;
}
.stat { text-align: center; padding: 6px 18px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.stat:first-child { border-left: none; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1; letter-spacing: 0.01em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 10px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.68); }

/* --------------------------------------------------------------------------
   5. THE RECORD — founders letter (tiny: OUR VISION, warm surface)
   -------------------------------------------------------------------------- */
.letter-section { background: var(--surface-page); overflow: hidden; }
.letter-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.letter-head { }
.letter-head .headline { font-size: clamp(36px, 4vw, 51px); line-height: 1.05; }
.hl-gradient { color: var(--dojo-purple); }
.doodle-arrow { width: 200px; margin-top: 28px; color: var(--ink-tertiary); }
.doodle-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.letter-head.is-visible .doodle-arrow path, .doodle-arrow.is-visible path { animation: drawArrow 1.1s ease-out .3s forwards; }
@keyframes drawArrow { to { stroke-dashoffset: 0; } }

.letter-card {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-letter);
  padding: clamp(32px, 4.5vw, 64px);
  transform: rotate(0.5deg);
  font-size: 17.5px; line-height: 1.7; color: rgba(20, 20, 26, 0.82);
}
.letter-card > p { margin-bottom: 20px; }
.letter-salutation { font-weight: 700; color: var(--ink); }
.letter-highlight {
  background: linear-gradient(to top, rgba(201, 128, 252, 0.28) 42%, transparent 42%);
  color: var(--ink); font-weight: 800; font-size: 20px; line-height: 1.5;
  padding: 0 2px;
}
.letter-list { list-style: none; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.letter-list li { padding-left: 22px; position: relative; }
.letter-list li::before { content: "•"; position: absolute; left: 4px; color: var(--dojo-purple); font-weight: 800; }
.letter-list-more { color: var(--ink-tertiary); }
.letter-signatures {
  border-top: 1px solid var(--hairline);
  margin-top: 32px; padding-top: 28px;
  display: flex; gap: 56px; flex-wrap: wrap;
}
.sig-script {
  font-family: 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive;
  font-size: 26px; color: var(--ink); transform: rotate(-4deg);
  margin-bottom: 10px;
}
.sig-person { display: flex; align-items: center; gap: 12px; }
.sig-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sig-person strong { display: block; font-size: 14.5px; color: var(--ink); }
.sig-person span { font-size: 13px; color: var(--ink-tertiary); }

/* --------------------------------------------------------------------------
   6. CHECKLIST (tiny: WHAT WE LOOK FOR, paper surface)
   -------------------------------------------------------------------------- */
.checklist-section { background: var(--surface-card); }
.checklist-section .headline { margin-bottom: 56px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; max-width: 1024px; }
.check-item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 28px 0; border-bottom: 1px solid var(--hairline-soft);
}
.check-icon {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: rgba(201, 128, 252, 0.14);
  color: var(--dojo-purple);
  display: inline-flex; align-items: center; justify-content: center;
}
.check-icon svg { width: 24px; height: 24px; }
.check-item h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 5px; }
.check-item p { font-size: 15px; line-height: 1.6; color: var(--ink-tertiary); }

/* --------------------------------------------------------------------------
   7. PULL-QUOTES (tiny: testimonial bands, italic display quotes)
   -------------------------------------------------------------------------- */
.quote-section { background: var(--surface-card); padding: 72px 0; }
.quote-inner { max-width: 1024px; text-align: center; }
.quote-inner blockquote p {
  font-weight: 700; font-style: italic;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.3; letter-spacing: -0.015em; color: var(--ink);
  text-wrap: balance;
}
.quote-attrib { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.quote-who { display: flex; flex-direction: column; gap: 2px; }
.quote-attrib img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote-mark-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gradient-magic); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.quote-who strong { display: block; font-size: 16px; }
.quote-who > span { font-size: 14px; color: var(--ink-tertiary); }

/* --------------------------------------------------------------------------
   8. FAQ (tiny: subtle surface, 4/8 grid, native details)
   -------------------------------------------------------------------------- */
.faq-section { background: var(--surface-field); }
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.faq-head .headline { font-size: clamp(34px, 3.8vw, 48px); }
.faq-sub { margin-top: 18px; font-size: 18px; color: var(--ink-tertiary); }
.faq-list { border-top: 1px solid var(--hairline); }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 4px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  transition: color .18s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--dojo-purple); }
.chev { flex: none; width: 20px; height: 20px; position: relative; transition: transform .25s; }
.chev::before {
  content: ""; position: absolute; left: 4px; top: 5px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-tertiary); border-bottom: 2px solid var(--ink-tertiary);
  transform: rotate(45deg);
}
details[open] .chev { transform: rotate(180deg); }
.faq-list details p { max-width: 640px; padding: 0 4px 26px; font-size: 16.5px; line-height: 1.65; color: var(--ink-tertiary); }

/* --------------------------------------------------------------------------
   9. COMPARISON (tiny: "vs. The Other Guys", 3 cards, highlight card)
   -------------------------------------------------------------------------- */
.compare-section { background: var(--surface-card); }
.compare-title { margin-bottom: 56px; text-align: center; }
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.compare-card {
  display: flex; flex-direction: column;
  background: var(--surface-field);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 44px 34px 0;
}
.compare-card h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-tertiary); margin-bottom: 26px; }
.compare-card ul { list-style: none; display: flex; flex-direction: column; gap: 15px; flex: 1; }
.compare-card li { position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.5; color: var(--ink-tertiary); }
.compare-card li.yes { color: var(--ink); }
.compare-card li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 800; font-size: 15px;
}
.compare-card li.yes::before { content: "\2713"; color: var(--dojo-purple); }
.compare-card li.no::before { content: "\2715"; color: var(--bad-text); }
.compare-foot { border-top: 1px solid var(--hairline); margin-top: 30px; padding: 20px 0 26px; }
.compare-foot a { font-size: 14px; padding: 0; color: var(--bad-text); text-decoration-color: rgba(220, 38, 38, .3); }
.compare-foot a:hover { text-decoration-color: var(--bad-text); }
.compare-card--highlight {
  background: linear-gradient(135deg, rgba(201, 128, 252, 0.08), rgba(255, 113, 81, 0.10));
  border: 2px solid rgba(201, 128, 252, 0.45);
  box-shadow: 0 0 0 1px rgba(201, 128, 252, 0.12), var(--shadow-panel-xl);
}
.compare-card--highlight h3 { color: var(--dojo-purple); }
.compare-card--highlight .compare-foot a { color: var(--dojo-purple); text-decoration-color: rgba(141, 63, 236, .3); }
.compare-card--highlight .compare-foot a:hover { text-decoration-color: var(--dojo-purple); }
.compare-outro {
  margin-top: 56px; text-align: center;
  font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -0.015em;
  color: var(--ink-tertiary);
}

/* --------------------------------------------------------------------------
   10. OBJECTIONS (tiny: numbered 01-06 rows, subtle surface)
   -------------------------------------------------------------------------- */
.objections-section { background: var(--surface-field); }
.objections-section .headline { margin-bottom: 24px; }
.objection {
  display: grid; grid-template-columns: 5fr 7fr; gap: 40px;
  padding: 40px 0; border-bottom: 1px solid var(--hairline-soft);
}
.objection:last-of-type { border-bottom: none; }
.obj-q { display: flex; align-items: flex-start; gap: 18px; }
.obj-num {
  font-family: var(--font-display);
  font-size: 34px; line-height: 1;
  color: var(--ink-muted); flex: none;
  letter-spacing: 0.02em;
}
.obj-q em { font-size: 18px; font-style: italic; color: var(--ink-tertiary); line-height: 1.5; padding-top: 3px; }
.obj-a p { font-size: 16.5px; line-height: 1.65; color: var(--ink-tertiary); margin-bottom: 14px; }
.obj-a .obj-strong { color: var(--ink); font-weight: 700; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. THE LOOP (tiny: VC odds section + navy card -> DS navy #201E3D)
   -------------------------------------------------------------------------- */
.loop-section { background: var(--surface-field); overflow: hidden; }
.loop-lede { margin: 22px 0 40px; max-width: 720px; font-size: 18px; line-height: 1.7; color: var(--ink-tertiary); }
.loop-lede strong { color: var(--ink); }
/* Container-scroll frame: the TryDojo.io homepage in a navy bezel that
   tilts back in 3D and straightens on scroll (GSAP scrub; flat without JS) */
.scrollframe { margin-top: 48px; }
.scrollframe-stage { perspective: 1000px; }
.scrollframe-card {
  background: var(--dojo-navy);
  border-radius: 28px;
  padding: 14px;
  box-shadow:
    0 9px 20px rgba(32, 30, 61, 0.29),
    0 37px 37px rgba(32, 30, 61, 0.22),
    0 84px 50px rgba(32, 30, 61, 0.12),
    0 149px 60px rgba(32, 30, 61, 0.04);
  will-change: transform;
}
.scrollframe-screen {
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-page);
}
.scrollframe-screen img { display: block; width: 100%; height: auto; }

.loop-link { margin-top: 32px; }

/* --------------------------------------------------------------------------
   12. CALCULATOR (tiny: THE REAL MATH, warm surface)
   -------------------------------------------------------------------------- */
.calc-section { background: var(--surface-page); }
.calc-section .headline { margin-bottom: 48px; }
.calc-slider-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.calc-slider-row label { font-size: 14.5px; font-weight: 600; color: var(--ink-tertiary); }
.calc-slider-row output {
  font-weight: 800; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 4px;
  background: linear-gradient(to right, var(--dojo-purple) 0%, var(--dojo-purple) var(--fill, 26%), var(--surface-sunken) var(--fill, 26%), var(--surface-sunken) 100%);
  cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--dojo-purple);
  border: 3px solid #FFFFFF;
  box-shadow: var(--shadow-panel-lg);
  transition: transform .15s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--dojo-purple); border: 3px solid #FFFFFF;
  box-shadow: var(--shadow-panel-lg);
}
.calc-slider-bounds { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--ink-tertiary); }

.calc-banner {
  margin: 36px 0 40px; padding: 26px 28px; text-align: center;
  background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: var(--radius-sm);
}
.calc-banner h3 { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.calc-banner h3 strong { color: var(--ok-text); font-variant-numeric: tabular-nums; }
.calc-banner p { margin-top: 6px; font-size: 14px; color: var(--ink-tertiary); }

.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.calc-card {
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.calc-card > h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; padding: 36px 34px 10px; }
.calc-card .us-title { color: var(--dojo-purple); }
.calc-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 18px 34px; border-top: 1px solid var(--hairline-soft);
}
.calc-line-label { display: block; font-size: 15px; font-weight: 600; }
.calc-line-note { display: block; font-size: 13px; color: var(--ink-tertiary); 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-text); }
.calc-line-val.pos { color: var(--ok-text); }
.calc-total { padding: 24px 34px 30px; border-top: 1px solid var(--hairline); }
.calc-total-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-tertiary);
}
.calc-total-num { font-size: clamp(30px, 3vw, 40px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.calc-total-num.pos { color: var(--ok-text); }
.calc-total-note { font-size: 13.5px; color: var(--ink-tertiary); }
.calc-panel { padding: 26px 34px 30px; }
.calc-panel h4 { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.calc-panel ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.calc-panel li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; }
.calc-panel--red { background: var(--bad-bg); }
.calc-panel--red h4 { color: var(--bad-text); }
.calc-panel--red li { color: rgba(20, 20, 26, 0.7); }
.calc-panel--red li::before { content: "\2715"; position: absolute; left: 0; color: var(--bad-text); font-weight: 800; font-size: 13px; }
.calc-panel--green { background: var(--ok-bg); }
.calc-panel--green h4 { color: var(--ok-text); }
.calc-panel--green li { color: rgba(20, 20, 26, 0.7); }
.calc-panel--green li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok-text); font-weight: 800; font-size: 13px; }

.calc-fineprint { margin-top: 20px; font-size: 12.5px; color: var(--ink-tertiary); }

.calc-cta-card {
  margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--surface-card);
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel-lg);
  padding: 34px 38px;
  transition: box-shadow .2s;
}
.calc-cta-card:hover { box-shadow: var(--shadow-panel-xl); }
.calc-cta-card h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.calc-cta-card p { font-size: 15px; color: var(--ink-tertiary); }
.calc-cta-link { flex: none; font-weight: 800; font-size: 16px; color: var(--dojo-purple); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(141,63,236,.3); }
.calc-cta-card:hover .calc-cta-link { text-decoration-color: var(--dojo-purple); }
.calc-cta-card:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   13. FINAL CTA (tiny: blue band + illustration + white pill)
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--dojo-navy);
  padding: 144px 24px;
  text-align: center;
  overflow: hidden;
}
.cta-inner { position: relative; z-index: 2; max-width: 768px; margin: 0 auto; }
.cta-mark { display: flex; justify-content: center; align-items: flex-end; gap: 18px; margin-bottom: 40px; }
.cta-bubble { border-radius: 50%; box-shadow: var(--shadow-glass); position: relative; }
.cta-bubble::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.cta-bubble-1 { width: 112px; height: 112px; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.cta-bubble-1 img { width: 68px; height: 68px; }
.cta-bubble-2 { width: 88px; height: 88px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); margin-bottom: 30px; }
.cta-bubble-2::after { content: "\2192"; font-size: 30px; color: #fff; }
.cta-bubble-3 {
  width: 112px; height: 112px;
  background: rgba(255, 255, 255, 0.95);
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
}
.cta-bubble-3 img { width: 78px; height: auto; }
.cta-eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85); margin-bottom: 18px;
}
.cta-band h2 {
  font-weight: 800; font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.06; letter-spacing: -0.025em; color: #FFFFFF;
}
.cta-sub { margin: 20px 0 34px; font-size: 18px; color: rgba(255, 255, 255, 0.75); }
.cta-divider { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); margin: 52px auto 30px; max-width: 560px; }
.cta-explore-label { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; }
.cta-explore { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
.cta-explore a { font-size: 14.5px; font-weight: 700; color: rgba(255, 255, 255, 0.8); transition: color .18s; }
.cta-explore a:hover { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   14. FOOTER (tiny: darker blue -> DS navy #201E3D)
   -------------------------------------------------------------------------- */
.footer { background: var(--dojo-navy); border-top: 1px solid rgba(255, 255, 255, 0.1); color: #fff; padding: 72px 0 48px; }
.footer-inner { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.footer-logo { width: 156px; height: auto; margin-bottom: 44px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr) 320px; gap: 40px; }
.foot-col h3 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); margin-bottom: 18px;
}
.foot-col a { display: block; padding: 6px 0; font-size: 14px; color: rgba(255, 255, 255, 0.85); transition: color .18s; }
.foot-col a:hover { color: var(--dojo-lilac); }
.foot-col .ext { font-size: 11px; }
.foot-news h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.foot-news > p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin-bottom: 18px; }
.foot-form { position: relative; }
.foot-form input {
  width: 100%; height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff; font-family: var(--font-sans); font-size: 14.5px;
  padding: 0 52px 0 16px;
}
.foot-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.foot-form button {
  position: absolute; right: 4px; top: 4px;
  width: 40px; height: 40px; border-radius: 10px;
  border: 0; background: transparent; color: #fff;
  font-size: 18px; cursor: pointer; transition: background .18s;
}
.foot-form button:hover { background: rgba(255, 255, 255, 0.12); }
.foot-fine { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.footer-grid { padding-bottom: 52px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-boilerplate {
  margin-top: 28px;
  font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.55);
  max-width: 880px;
}
.footer-boilerplate a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 12px; color: rgba(255, 255, 255, 0.62);
}
.footer-legal { display: flex; gap: 18px; }
.footer-legal a:hover { color: rgba(255, 255, 255, 0.75); }

/* --------------------------------------------------------------------------
   15. RESPONSIVE — md (768-1023): tighten; <768: stack (per mobile spec)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .section { padding: 88px 0; }

  /* Nav pill: tighten so every label stays on one line */
  .nav-pill { gap: 14px; padding-left: 20px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 10px; font-size: 13.5px; white-space: nowrap; }

  /* Hero stacks: copy above, Ship Log below, sun re-halos the card */
  .hero-top {
    grid-template-columns: 1fr;
    gap: 48px;
    min-height: auto;
    padding: 128px 24px 64px;
  }
  .hero-copy { max-width: 620px; }
  .ship-log { justify-self: center; width: 100%; max-width: 460px; }
  .hero-sun {
    left: 50%; top: 72%;
    width: min(560px, 115vw); height: min(560px, 115vw);
    margin: calc(min(560px, 115vw) / -2) 0 0 calc(min(560px, 115vw) / -2);
  }
  .hero-top::after { left: 50%; top: 72%; width: min(680px, 135vw); height: min(680px, 135vw); }

  .letter-grid, .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .letter-head { position: static; }
  .doodle-arrow { display: none; }
  .compare-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-news { grid-column: 1 / -1; max-width: 420px; }
  .scrollframe-card { padding: 10px; border-radius: 22px; }
  .scrollframe-screen { border-radius: 13px; }
}

@media (max-width: 767px) {
  .section { padding: 72px 0; }

  /* Nav splits: logo pill left + burger circle right */
  .nav-pill { display: none; }
  .nav-brand--mobile {
    display: inline-flex; align-items: center; gap: 9px;
    pointer-events: auto;
    position: fixed; top: 16px; left: 16px;
    height: 48px; padding: 0 18px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(20, 20, 26, 0.06);
    box-shadow: 0 8px 28px rgba(32, 30, 61, 0.18);
  }
  .nav-brand--mobile .brand-word { font-size: 16px; }
  .nav-brand--mobile .brand-mark { width: 22px; height: 22px; border-radius: 7px; }
  .nav-brand--mobile .brand-mark::after { width: 8px; height: 8px; border-width: 2px; }
  .nav-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5px;
    pointer-events: auto;
    position: fixed; top: 16px; right: 16px;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(20, 20, 26, 0.06);
    box-shadow: 0 8px 28px rgba(32, 30, 61, 0.18);
    cursor: pointer;
  }
  .nav-burger span { width: 18px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform .25s, opacity .25s; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .mobile-menu {
    display: block;
    pointer-events: auto;
    position: fixed; inset: 0; z-index: -1;
    background: rgba(241, 241, 249, 0.96);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 100px 28px 40px;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
  .mobile-menu nav a:not(.btn) { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; padding: 12px 0; color: var(--ink); }
  .mobile-menu nav .btn { margin-top: 22px; align-self: flex-start; color: #FFFFFF; }

  /* Hero (Ship Log stacks under the copy; card straightens, back sheet off) */
  .hero-top { padding: 108px 20px 48px; gap: 40px; }
  .hero-h1 { font-size: clamp(38px, 11vw, 44px); }
  .hero-sub { font-size: 16px; }
  .hero-ctas { flex-direction: column; align-items: stretch; max-width: 320px; gap: 12px; }
  .log-card { max-width: 100%; transform: none; }
  .log-card:hover { transform: none; }
  .log-card::before { display: none; }
  .log-entries li { grid-template-columns: 72px 1fr auto; padding: 12px 18px; gap: 10px; }
  .log-body { font-size: 13.5px; }
  .log-head, .log-foot { padding-left: 18px; padding-right: 18px; }
  .hero-inner { padding: 12px 20px 72px; }
  .hero-statement h2 { font-size: 26px; }
  .stats-bar { grid-template-columns: 1fr; padding: 10px 26px; }
  .stat { text-align: left; padding: 20px 0; border-left: none; border-top: 1px solid rgba(20, 20, 26, 0.1); }
  .stat:first-child { border-top: none; }
  .stat-num { font-size: 36px; }

  /* Letter */
  .letter-card { transform: none; }
  .letter-signatures { flex-direction: column; gap: 28px; }

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

  /* Objections */
  .objection { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }

  /* Loop card */
  .scrollframe-card { padding: 8px; border-radius: 18px; }
  .scrollframe-screen { border-radius: 11px; }

  /* Calculator: order flip — our card first (per tiny mobile quirk) */
  .calc-grid { grid-template-columns: 1fr; }
  .calc-card--us { order: -1; }
  .calc-cta-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 24px; }
  .calc-cta-card h3 { font-size: 19px; }

  /* CTA band */
  .cta-band { padding: 104px 20px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .foot-news { max-width: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   16. QA POLISH (visual-review findings)
   -------------------------------------------------------------------------- */
/* Narrow desktop (1024-1180): hero copy column is ~420px; keep the eyebrow
   on one line instead of orphaning its last word */
@media (min-width: 1024px) and (max-width: 1180px) {
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.12em; }
}
/* Very narrow phones: Ship Log rows drop the status pill onto its own row so
   the entry text keeps a readable column */
@media (max-width: 380px) {
  .log-entries li { grid-template-columns: 56px 1fr; row-gap: 6px; }
  .log-status { grid-column: 2; justify-self: start; }
  .log-tag { font-size: 9.5px; }
}

/* ==========================================================================
   17. WORK / PROOF + VENTURES  (nav-coherence build, 2026-07-11)
   Real destinations for the Work and Ventures nav items. Card vocabulary
   mirrors the hero Ship Log (mono tags + status chips) at section scale.
   ========================================================================== */
.proof-section   { background: var(--surface-card); }
.ventures-section{ background: var(--surface-field); }

/* Shared section head (used by both) */
.proof-head { max-width: 760px; margin-bottom: 48px; }
.proof-head .headline { margin-bottom: 16px; }
.proof-lede { font-size: 18px; line-height: 1.7; color: var(--ink-tertiary); max-width: 620px; }

/* Proof cards */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.proof-card {
  display: flex; flex-direction: column;
  background: var(--surface-field);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 30px 30px 24px;
  transition: box-shadow .25s, transform .25s;
}
.proof-card:hover { box-shadow: var(--shadow-panel-lg); transform: translateY(-3px); }
.proof-tag {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dojo-purple); margin-bottom: 14px;
}
.proof-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
/* :not(.proof-tag) — the tag is also a <p>; only the body copy takes the slack
   so links + status foot align across cards without stretching the tag row */
.proof-card > p:not(.proof-tag) { font-size: 15px; line-height: 1.6; color: var(--ink-tertiary); flex: 1; }
.proof-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.proof-links a {
  font-size: 13.5px; font-weight: 700; color: var(--dojo-purple);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(141, 63, 236, 0.3);
  transition: text-decoration-color .2s;
}
.proof-links a:hover { text-decoration-color: var(--dojo-purple); }
.proof-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline-soft);
}
.proof-status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 11px; border-radius: 999px;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink);
  white-space: nowrap;
}
/* (reuses .s-dot / .s-dot--live from the Ship Log) */

/* "We build in the open" — public-repo proof strip under the Work cards */
.proof-oss {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 22px 26px;
  background: var(--surface-field);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.proof-oss-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-tertiary);
}
.proof-oss-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.proof-oss a {
  font-size: 14px; font-weight: 700; color: var(--dojo-purple);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(141, 63, 236, 0.3);
  transition: text-decoration-color .2s;
}
.proof-oss a:hover { text-decoration-color: var(--dojo-purple); }
.proof-oss-all { margin-left: auto; white-space: nowrap; }
@media (max-width: 767px) {
  .proof-oss-all { margin-left: 0; }
}
/* Clients & ecosystem strip (proof-oss variant) */
.proof-clients-eco { margin-left: auto; font-size: 13px; color: var(--ink-tertiary); }
@media (max-width: 767px) { .proof-clients-eco { margin-left: 0; } }

/* ---- Case-study grid: real covers in browser chrome (static, non-clickable) ---- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Static display card (intentionally not interactive — no lightbox) */
.case-card {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden; padding: 0;
}

.case-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--surface-field);
  border-bottom: 1px solid var(--hairline-soft);
}
.case-chrome .cdot { width: 9px; height: 9px; border-radius: 50%; background: var(--light-silver); flex: none; }
.case-url {
  margin-left: 8px; min-width: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-badge {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dojo-purple); background: rgba(201, 128, 252, 0.14);
  padding: 3px 8px; border-radius: 999px;
}

.case-canvas { aspect-ratio: 1200 / 750; overflow: hidden; background: var(--surface-sunken); }
.case-canvas img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.case-meta { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.case-tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dojo-purple); }
.case-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }

@media (max-width: 1023px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .case-grid { grid-template-columns: 1fr; } }

/* Venture tiles — named portfolio index, real blurbs from the org repos */
.ventures-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.venture-card {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden; padding: 0;
  transition: box-shadow .25s, transform .25s;
}
.venture-card:hover { box-shadow: var(--shadow-panel-lg); transform: translateY(-3px); }
.venture-cover { aspect-ratio: 1200 / 750; overflow: hidden; background: var(--surface-sunken); border-bottom: 1px solid var(--hairline-soft); }
.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: 22px; flex: 1; padding: 20px 22px; }
.venture-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.venture-note { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink-tertiary); }
.venture-foot { display: flex; align-items: center; gap: 10px; }

@media (max-width: 1023px) {
  .proof-grid    { grid-template-columns: repeat(2, 1fr); }
  .ventures-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .proof-grid    { grid-template-columns: 1fr; }
  .ventures-grid { grid-template-columns: 1fr; }
  .venture-card  { min-height: 0; }
}

/* ==========================================================================
   18. THE RECORD PAGE (/record) — dated, bilingual ledger
   Pure-CSS EN/ES toggle (radio + sibling combinator; works with no JS).
   Reuses the site nav, footer, tokens, and the s-dot status vocabulary.
   ========================================================================== */
.rec-page { background: var(--surface-page); }
/* Current-page nav state (The Record on /record) */
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(20, 20, 26, 0.06); }

.rec-hero { padding: 152px 0 52px; }
.rec-hero h1 {
  font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(40px, 5vw, 66px); line-height: 1.04; letter-spacing: -0.03em;
  color: var(--ink); text-wrap: balance; max-width: 780px;
}
.rec-hero p { margin-top: 20px; max-width: 620px; font-size: 18px; line-height: 1.65; color: var(--ink-tertiary); }

.rec-body { padding: 0 0 112px; }

/* Language toggle now lives in the shared nav (.lang-switch), driven by the
   global html[data-lang] mechanism — the in-body radios are retired. The
   ledger's .lang-en/.lang-es blocks swap via the site-wide rules in section 2b. */

.rec-ledger { list-style: none; border-top: 1px solid var(--hairline); margin-top: 4px; }
.rec-entry {
  display: grid; grid-template-columns: 116px 1fr auto; gap: 28px; align-items: start;
  padding: 26px 4px; border-bottom: 1px solid var(--hairline);
}
.rec-when {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-tertiary); padding-top: 3px;
}
.rec-etag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dojo-purple);
  margin-bottom: 8px;
}
.rec-main h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); margin-bottom: 6px; }
.rec-main p { font-size: 15.5px; line-height: 1.6; color: var(--ink-tertiary); }
.rec-cite {
  display: inline-block; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: var(--dojo-purple);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(141, 63, 236, 0.3);
  transition: text-decoration-color .2s;
}
.rec-cite + .rec-cite { margin-left: 18px; }
.rec-cite:hover { text-decoration-color: var(--dojo-purple); }

/* EN/ES visibility is handled globally (section 2b) via .lang-en / .lang-es. */

.rec-note { margin-top: 36px; font-size: 14px; line-height: 1.6; color: var(--ink-tertiary); }
.rec-note a { color: var(--dojo-purple); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .rec-hero { padding: 120px 0 40px; }
  .rec-entry { grid-template-columns: 1fr; gap: 10px; padding: 24px 2px; }
  .rec-when { padding-top: 0; }
}

/* ==========================================================================
   19. 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(--surface-field); }
.events-section .proof-head { margin-bottom: 40px; }

/* overflow-x: clip isolates the inner scroll rail so it can't inflate the
   document scrollWidth (nested-scroll-container quirk); clip (not hidden) still
   lets the card hover-lift + 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: 6px; margin: 0;
}
.evrail::-webkit-scrollbar { display: none; }

.ev-card {
  flex: none; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden; padding: 0; cursor: pointer; text-align: left;
  font-family: inherit; color: inherit;
  transition: box-shadow .25s, transform .25s;
}
.ev-card:hover { box-shadow: var(--shadow-panel-xl); transform: translateY(-4px); }
.ev-card:hover .ev-play { transform: translate(-50%, -50%) scale(1.08); }
.ev-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--dojo-lilac); }
.ev-card--film { width: 440px; }
.ev-card--short { width: 220px; }

.ev-thumb { position: relative; overflow: hidden; background: var(--surface-sunken); }
.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; border-radius: 50%;
  background: var(--dojo-peach); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(32, 30, 61, 0.35);
  transition: transform .2s;
}
.ev-play svg { width: 22px; height: 22px; margin-left: 2px; }
.ev-card--short .ev-play { width: 46px; height: 46px; }

.ev-meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; }
.ev-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dojo-purple); }
.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-weight: 700; font-size: 14px; color: var(--dojo-purple); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(141, 63, 236, 0.3);
  transition: text-decoration-color .2s;
}
.ev-more:hover { text-decoration-color: var(--dojo-purple); }

/* Arrows — desktop only (touch uses swipe) */
.evrail-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-panel-lg); cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s, opacity .18s;
}
.evrail-arrow svg { width: 22px; height: 22px; }
.evrail-arrow:hover { background: #fff; }
.evrail-prev { left: 6px; }
.evrail-next { right: 6px; }
.evrail-wrap--short .evrail-arrow { top: 42%; }
@media (hover: none) { .evrail-arrow { display: none; } }

@media (max-width: 767px) {
  .ev-card--film { width: 300px; }
  .ev-card--short { width: 150px; }
  .evrail-arrow { display: none; }
}

/* Video lightbox */
.vlb-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(20, 20, 26, 0.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s;
}
.vlb-overlay.open { opacity: 1; }
.vlb-overlay[hidden] { display: none; }
.vlb-frame {
  position: relative; width: min(960px, 100%);
  background: #000; border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-panel-xl);
}
.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: 310;
  width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vlb-close:hover { background: rgba(255, 255, 255, 0.3); }
.vlb-close svg { width: 22px; height: 22px; }
@media (max-width: 767px) { .vlb-overlay { padding: 12px; } }