/* ============================================================
   Ordo — editorial reinvention
   ============================================================ */

/* ---- Palette tokens (driven by Tweaks panel) -------------- */
:root {
  /* Paper & Ink — default */
  --bg:        #F0E6D3;
  --bg-deep:  #E8DCC0;
  --bg-card:  #FBF5EA;
  --ink:       #2A2017;
  --ink-soft:  #4A3F35;
  --ink-mute:  #6B5C4D;
  --rule:      rgba(42,32,23,0.14);
  --rule-soft: rgba(42,32,23,0.07);
  --accent:    #C2602F;
  --accent-2:  #6F8456;
  --slab-ink:  #2A2017;

  /* type — the real app stack: Anton slab monument, Newsreader serif,
     Hanken Grotesk UI sans, JetBrains mono. */
  --f-slab:    'Anton', 'Arial Narrow', sans-serif;
  --f-display: 'Newsreader', Georgia, serif;
  --f-body:    'Newsreader', Georgia, serif;
  --f-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* rhythm */
  --col-max: 1320px;
  --gutter: clamp(20px, 4vw, 72px);
  --col-gap: clamp(16px, 2vw, 32px);

  /* section rhythm — three tiers; density tracks importance, not a flat slab */
  --pad-anchor:  clamp(80px, 11vh, 140px);   /* the few sections that carry weight */
  --pad-section: clamp(56px, 8vh, 100px);    /* normal */
  --pad-tight:   clamp(40px, 6vh, 72px);     /* list / utility / compact */
  --pad-band:    clamp(56px, 8vh, 104px);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] {
  --bg:        #070504;
  /* bg-deep kept close to bg so the alternating section grounds read as a
     gentle dip in light, not a hard band (visual flow between sections). */
  --bg-deep:   #0B0807;
  --bg-card:   #161210;
  --ink:       #F2ECDF;
  --ink-soft:  #B5A586;
  --ink-mute:  #9D8A69;
  --rule:      rgba(242,236,223,0.16);
  --rule-soft: rgba(242,236,223,0.08);
  --accent:    #D27040;
  --accent-2:  #9AA785;
  --slab-ink:  #E6D2A8;
}

[data-palette="bone"] {
  --bg:       #E8E2D5;
  --bg-deep:  #DCD4C2;
  --bg-card:  #F0EBDD;
  --ink:      #1B1F2E;
  --ink-soft: #3A4055;
  --ink-mute: #6A6E80;
  --rule:     rgba(27,31,46,0.14);
  --rule-soft: rgba(27,31,46,0.07);
  --accent:   #B57B3A;
  --accent-2: #4A5A72;
}

[data-palette="sage"] {
  --bg:       #E3E5D6;
  --bg-deep:  #D5D9C2;
  --bg-card:  #ECEEDF;
  --ink:      #1E2620;
  --ink-soft: #3F4A40;
  --ink-mute: #6A7268;
  --rule:     rgba(30,38,32,0.14);
  --rule-soft: rgba(30,38,32,0.07);
  --accent:   #8A6B3E;
  --accent-2: #4F6453;
}

[data-palette="ember"] {
  --bg:       #1A120D;
  --bg-deep:  #110A07;
  --bg-card:  #221710;
  --ink:      #EFDFBE;
  --ink-soft: #C9B690;
  --ink-mute: #9D8A69;
  --rule:     rgba(239,223,190,0.16);
  --rule-soft: rgba(239,223,190,0.08);
  --accent:   #D67844;
  --accent-2: #8B9B6E;
}

/* ---- Reset & base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto; font-synthesis: none; }
html { overflow-x: clip; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--bg); }

/* ---- Container -------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Type ------------------------------------------------- */
.display, h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: clamp(56px, 11vw, 180px); }
h2 { font-size: clamp(34px, 4.6vw, 64px); }
h3 { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.35; letter-spacing: -0.015em; padding-bottom: 0.3em; }
h4 { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); margin: 0; line-height: 1.1; letter-spacing: -0.01em; }

em, .italic { font-style: italic; }
strong { font-weight: 500; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 400;
}
.spec {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.serif-italic { font-family: var(--f-display); font-style: italic; }
.lede { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: var(--ink-soft); max-width: 34em; }
p { margin: 0 0 1em; }

/* ---- Nav -------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  transition: transform .45s var(--ease), opacity .35s var(--ease), background .3s var(--ease);
  will-change: transform;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--rule-soft);
}
.nav.is-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.nav-mark {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.9;
  position: relative;
  padding: 6px 0;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
  font-family: var(--f-sans);
  font-size: 13px;
  padding: 9px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-cta:hover { background: currentColor; color: var(--bg); }

/* ---- Hero ------------------------------------------------- */
.hero {
  min-height: 100vh;
  padding: 140px var(--gutter) 80px;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
}
.hero-eyebrow-row {
  position: absolute;
  top: 100px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero-eyebrow-row .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 8px; vertical-align: middle;
  animation: pulse 3.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.6); }
}

.hero-title {
  font-size: clamp(48px, 9.5vw, 156px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 400;
  white-space: nowrap;
}
.hero-title .line { display: block; }
.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: rise 1.2s var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) .word { animation-delay: .15s; }
.hero-title .line:nth-child(2) .word { animation-delay: .30s; }
.hero-title .line:nth-child(3) .word { animation-delay: .45s; }
.hero-title .em {
  font-style: italic;
  color: var(--accent);
}

@keyframes rise { to { transform: translateY(0); opacity: 1; } }

/* swap word in hero */
.hero-swap {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  height: 1em;
}
.hero-swap .opt {
  display: inline-block;
  font-style: italic;
  color: var(--accent);
  opacity: 0;
  transform: translateY(40%);
  transition: opacity .5s var(--ease), transform .7s var(--ease-out);
  position: absolute;
  left: 0;
  white-space: nowrap;
}
.hero-swap .opt.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

.hero-foot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 32px;
  margin-top: 56px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.hero-tagline {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
.hero-tagline em { color: var(--accent); }

.btn {
  font-family: var(--f-sans);
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
}
.btn-ghost {
  border: 1px solid var(--rule);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---- Section frame ---------------------------------------- */
section {
  padding: var(--pad-section) var(--gutter);
  position: relative;
}
/* section rhythm: the connect band has no grid below its lede, so its lede
   owns no extra gap; the duo caption joins the responsive scale (was inline). */
.connect .section-lede{ margin-bottom: 0; }
.duo .spec{ margin-top: clamp(20px, 2.5vh, 32px); text-align: center; }

/* tier assignments — the weighty sections breathe, lists/utility stay tight */
.trust, .knowing, .maker, .close{ padding-block: var(--pad-anchor); }
.connect, #pricing, #faq, .duo, .definition{ padding-block: var(--pad-tight); }
.section-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  margin-bottom: clamp(28px, 3.5vh, 44px);
  align-items: start;
}
.section-head .index,
.section-head .eyebrow {
  padding-top: 18px;
  border-top: 1px solid var(--ink);
}
.section-head .eyebrow { border-top-color: var(--rule); }
.section-lede {
  margin: 0 0 clamp(40px, 5vh, 72px);
  padding-left: 104px;
  max-width: 64ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 720px) {
  .section-lede { padding-left: 0; }
  .section-head { margin-bottom: clamp(22px, 4vh, 34px); }
  .section-lede { margin-bottom: clamp(28px, 5vh, 42px); }
}
.section-head .index {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 18px;
  border-top: 1px solid var(--ink);
}
.section-title {
  max-width: 14ch;
}
.section-title em { font-style: italic; color: var(--accent); }

/* Detail pass: restore the signature rust-italic accent everywhere, and let the
   browser manage the rag on display headlines + ledes (zero-risk). */
.hero-title, .ord-title, .section-title, .close-title, .definition-headword,
.okaystep-line { text-wrap: balance; }
.section-lede, .okaystep-body, .maker-body p { text-wrap: pretty; }

/* ---- Slab monument — the app's Anton SlabHeader DNA, on the site -----------
   Per header: eyebrow (left column) -> Anton monument -> the Newsreader
   sentence, now the whisper beneath it. Mirrors components/SlabHeader.tsx so
   the site and app share one identity. The monument + whisper live in
   .head-main (the header's right column); the eyebrow stays in the left. */
.head-main{ min-width: 0; }
.section-monument{
  font-family: var(--f-slab);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: var(--slab-ink);
  margin: 0 0 clamp(12px, 1.5vh, 20px);
  text-wrap: balance;
}
.section-monument .green{ color: var(--accent-2); }   /* the sage touch */
.head-main .section-title{
  font-size: clamp(19px, 1.8vw, 27px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  max-width: 32ch;
}
/* the dotted editorial hairline above each section's eyebrow / index */
.section-head .eyebrow, .section-head .index{ border-top-style: dotted; }

/* Hero — promote the statement to an Anton monument (the app's hero word),
   with the Newsreader line kept as the signature beneath it. */
.ord-title.ord-title--slab{ font-family: var(--f-slab); text-transform: uppercase; color: var(--slab-ink); letter-spacing: 0.005em; line-height: 0.9; }

/* ---- Feature beats — a calm two-column moment: the Anton monument + line on
   one side, a flat product visual that SHOWS the feature on the other. No glow,
   no motion; the product card carries the interest. ---- */
.feature{ padding-block: var(--pad-anchor); position: relative; isolation: isolate; overflow: clip; }
.feature > .container{ position: relative; z-index: 1; }
.feature-grid{ display: grid; grid-template-columns: 1fr 0.94fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature--rev .feature-viz{ order: -1; }
.feature-head .eyebrow{ display: inline-block; padding-top: 14px; border-top: 1px dotted var(--rule); }
.feature-mon{ font-family: var(--f-slab); text-transform: uppercase; color: var(--slab-ink); font-size: clamp(44px, 6vw, 80px); line-height: 0.86; letter-spacing: 0.01em; margin: 16px 0 0; }
.feature-wh{ font-family: var(--f-display); font-size: clamp(19px, 1.9vw, 25px); line-height: 1.3; color: var(--ink); margin: 18px 0 0; max-width: 26ch; }
.feature-wh em{ font-style: italic; color: var(--accent); }
.feature-lede{ font-family: var(--f-display); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55; color: var(--ink-soft); margin: 14px 0 0; max-width: 42ch; }

/* product visual (a believable schedule snippet) */
.viz-card{ background: var(--bg-card); border: 1px solid var(--rule); border-radius: 18px; padding: 18px 16px; }
.viz-h{ font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; }
.viz-row{ display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; padding: 7px 0; }
.viz-t{ font-family: var(--f-mono); font-size: 10px; color: var(--ink-mute); }
.viz-b{ border-left: 2px solid var(--ink-mute); padding: 6px 10px; border-radius: 0 7px 7px 0; font-family: var(--f-sans); font-size: 13px; color: var(--ink); }
.viz-b i{ color: var(--ink-mute); font-size: 11px; font-style: normal; }
.viz-drive{ margin: 3px 0 3px 53px; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--accent); }
.viz-drive .viz-ln{ flex: 1; height: 1px; border-top: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.viz-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.viz-ghost{ opacity: 0.42; }
.viz-ghost .viz-b{ border-style: dotted; color: var(--ink-mute); }
.viz-lift .viz-b{ box-shadow: 0 16px 34px -16px rgba(0,0,0,0.7); transform: translateX(7px); }
@media (max-width: 760px){
  .feature-grid{ grid-template-columns: 1fr; gap: clamp(26px, 5vh, 40px); }
  .feature--rev .feature-viz{ order: 0; }
}

/* ---- Definition ------------------------------------------- */
.definition {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-deep);
}
.definition-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}
.definition-headword {
  font-family: var(--f-slab);
  text-transform: uppercase;
  color: var(--slab-ink);
  font-size: clamp(52px, 6vw, 92px);
  line-height: 0.9;
  letter-spacing: 0.005em;
}
.definition-headword .ipa {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-transform: none;
  margin-top: 16px;
}
.definition-body {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.definition-body .pos {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-right: 10px;
}
.definition-body .gloss {
  font-style: italic;
  color: var(--ink-soft);
}

/* ---- Three pillars ---------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
  border-top: 1px solid var(--rule);
  padding-top: 0;
}
.pillar {
  padding: clamp(32px, 4vw, 56px) 0 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pillar + .pillar { border-left: 1px solid var(--rule); padding-left: clamp(24px, 3vw, 48px); }
.pillar-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.pillar h3 { margin-bottom: 32px; line-height: 1.3; padding-bottom: 0.35em; }
.pillar p { color: var(--ink-soft); font-size: 17px; max-width: 28ch; }
.pillar-art {
  margin-top: 32px;
  aspect-ratio: 4/3;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

/* mini mocks inside pillar art */
.mock {
  position: absolute;
  inset: 0;
  padding: 18px;
  font-family: var(--f-sans);
  font-size: 11px;
}
.mock-write { color: var(--ink); }
.mock-write .day { color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; font-size: 9px; margin-bottom: 12px; font-family: var(--f-mono); }
.mock-write .line {
  font-family: var(--f-display);
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule-soft);
  padding: 6px 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.pillar.in-view .mock-write .line { opacity: 1; transform: translateX(0); }
.pillar.in-view .mock-write .line:nth-child(2) { transition-delay: .1s; }
.pillar.in-view .mock-write .line:nth-child(3) { transition-delay: .25s; }
.pillar.in-view .mock-write .line:nth-child(4) { transition-delay: .4s; }
.mock-write .cursor {
  display: inline-block; width: 1px; height: 1em; background: var(--accent);
  margin-left: 2px; vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.mock-plan { color: var(--ink); }
.mock-plan .head { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 9px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.mock-plan .grid {
  display: grid;
  grid-template-columns: 24px repeat(5, 1fr);
  gap: 4px;
  height: calc(100% - 30px);
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-mute);
}
.mock-plan .hour { display: flex; align-items: flex-start; }
.mock-plan .col { background: var(--rule-soft); border-radius: 4px; position: relative; }
.mock-plan .evt {
  position: absolute;
  left: 2px; right: 2px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 4px;
  padding: 3px 4px;
  font-family: var(--f-sans);
  font-size: 8px;
  line-height: 1.2;
  opacity: 0;
  transform: scale(.95);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.pillar.in-view .mock-plan .evt { opacity: 1; transform: scale(1); }
.pillar.in-view .mock-plan .evt.e2 { transition-delay: .15s; }
.pillar.in-view .mock-plan .evt.e3 { transition-delay: .3s; }
.mock-plan .evt.muted { background: var(--ink-mute); }

.mock-talk { color: var(--ink); display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.mock-talk .bubble {
  font-family: var(--f-display);
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 80%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.mock-talk .from-ordo { background: var(--ink); color: var(--bg); align-self: flex-start; border-bottom-left-radius: 4px; }
.mock-talk .from-you { background: var(--bg-deep); color: var(--ink); align-self: flex-end; border-bottom-right-radius: 4px; font-family: var(--f-sans); font-size: 12px; }
.pillar.in-view .mock-talk .bubble { opacity: 1; transform: translateY(0); }
.pillar.in-view .mock-talk .bubble:nth-child(2) { transition-delay: .2s; }
.pillar.in-view .mock-talk .bubble:nth-child(3) { transition-delay: .4s; }
.pillar.in-view .mock-talk .bubble:nth-child(4) { transition-delay: .6s; }

/* ---- Product showcase (sticky scroll) --------------------- */
.showcase {
  background: var(--bg-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.showcase-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 100vh;
}
.showcase-text {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--rule);
}
.showcase-text .index { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 24px; }
.showcase-title {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  padding-bottom: 0.3em;
}
.showcase-title .em { font-style: italic; color: var(--accent); display: inline; }
.showcase-caption {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 32ch;
}
.showcase-counter {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 36px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.showcase-counter .num { color: var(--ink); font-variant-numeric: tabular-nums; }
.showcase-counter .bar {
  flex: 1;
  height: 1px;
  background: var(--rule);
  position: relative;
  max-width: 200px;
}
.showcase-counter .bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
}
.showcase-screens {
  padding: var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.showcase-screen {
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 80vh;
  justify-content: center;
}
.showcase-screen .frame {
  background: var(--bg);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.4), 0 2px 0 rgba(255,255,255,0.05) inset;
  border: 1px solid var(--rule);
  aspect-ratio: 9/16;
  max-width: 360px;
  position: relative;
}
.showcase-screen.wide .frame { aspect-ratio: 16/10; max-width: 100%; border-radius: 14px; }
.showcase-screen .frame img { width: 100%; height: 100%; object-fit: cover; }
.showcase-screen .caption {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.showcase-screen .caption strong { color: var(--ink); font-weight: 400; }

/* ---- Marquee strip ---------------------------------------- */
.marquee {
  background: var(--ink);
  color: var(--bg);
  padding: 28px 0;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.marquee-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
  font-style: italic;
  align-items: center;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 64px; }
.marquee-track span::after {
  content: '⌗';
  font-style: normal;
  color: var(--accent);
  font-size: 0.7em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- What Ordo knows -------------------------------------- */
.knowing {
  background: var(--bg);
}
.knowing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.knows {
  padding: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 56px) clamp(40px, 5vw, 72px) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.knows:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: clamp(28px, 3vw, 56px); }
.knows:nth-child(even) { padding-left: clamp(28px, 3vw, 56px); padding-right: 0; }
.knows:nth-last-child(-n+2) { border-bottom: 0; }
.knows-num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
}
.knows h3 { margin-bottom: 36px; max-width: 18ch; line-height: 1.45; padding-bottom: 0.5em; }
.knows h3 em { color: var(--accent); }
.knows p { color: var(--ink-soft); max-width: 40ch; font-size: 14px; line-height: 1.6; }
.knows-quote {
  margin-top: 28px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
}

/* ---- Light & Dark comparison ------------------------------ */
.duo {
  background: var(--bg-deep);
}
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.duo-panel {
  padding: clamp(32px, 4vw, 56px);
  position: relative;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.duo-panel.light {
  background: #F1E7D2;
  color: #1A1714;
}
.duo-panel.dark {
  background: #14100D;
  color: #EFE2C6;
}
.duo-panel .lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.duo-panel h3 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(32px, 4vw, 56px);
  margin: 16px 0 36px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  padding-bottom: 0.5em;
  max-width: 14ch;
}
.duo-panel p { opacity: 0.7; max-width: 28ch; font-size: 16px; }
.duo-panel .preview {
  margin: 32px auto 0;
  aspect-ratio: 720 / 1564;   /* true iPhone screen ratio — no crop */
  width: 100%;
  max-width: 300px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 56px -24px rgba(0,0,0,0.42);
}
.duo-panel .preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Morning briefing (the animated letter) --------------- */
.briefing {
  background: var(--ink);
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.briefing::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  width: 80vw; height: 80vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  opacity: 0.18;
  transform: translateX(-50%);
  filter: blur(40px);
  pointer-events: none;
}
.briefing .section-head .index { color: var(--bg); opacity: 0.6; border-top-color: var(--bg); }
.briefing h2 .em { color: var(--accent); font-style: italic; }
.briefing-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  position: relative;
  z-index: 1;
}
.letter {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  max-width: 22ch;
}
.letter .line {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.letter.in-view .line { opacity: 1; transform: translateY(0); }
.letter.in-view .line:nth-child(1) { transition-delay: .1s; }
.letter.in-view .line:nth-child(2) { transition-delay: .5s; }
.letter.in-view .line:nth-child(3) { transition-delay: .9s; }
.letter.in-view .line:nth-child(4) { transition-delay: 1.3s; }
.letter.in-view .line:nth-child(5) { transition-delay: 1.7s; }
.letter .em { color: var(--accent); font-style: italic; }
.letter-foot {
  margin-top: 32px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  gap: 18px;
  align-items: center;
  opacity: 0;
  transition: opacity 1s var(--ease) 1.6s;
}
.letter.in-view .letter-foot { opacity: 1; }
.letter-foot .dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}

.beyond {
  display: flex; flex-direction: column; gap: 28px;
}
.beyond-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 16px; padding: 18px 0;
  border-top: 1px solid rgba(239,226,198,0.16);
  align-items: baseline;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.briefing-grid.in-view .beyond-row { opacity: 1; transform: translateY(0); }
.briefing-grid.in-view .beyond-row:nth-child(1) { transition-delay: 1.6s; }
.briefing-grid.in-view .beyond-row:nth-child(2) { transition-delay: 1.75s; }
.briefing-grid.in-view .beyond-row:nth-child(3) { transition-delay: 1.9s; }
.briefing-grid.in-view .beyond-row:nth-child(4) { transition-delay: 2.05s; }
.beyond .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.beyond .val {
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1.4;
}

/* ============================================================
   THE EVENING — Reflect: the past, in your own hand.
   The briefing's evening twin. An always-dark band (warmer and
   a touch deeper than the morning), carrying the echo of the
   user's own writing set as found type, with the archive
   deepening backward alongside it. Text is fixed cream so the
   band reads right under any theme; only the ground adapts.
   ============================================================ */
.reflect {
  background: var(--ink);            /* light themes: a dark band on cream, like the briefing */
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
/* dark theme (the live default): a warm evening ground, distinct
   from the morning briefing (#16110B) directly above it. */
[data-theme="dark"] .reflect { background: #1A0F08; }
.reflect::before {                   /* one low radial breath, set low like dusk */
  content: '';
  position: absolute;
  bottom: -30%; left: 50%;
  width: 78vw; height: 78vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  opacity: 0.10;
  transform: translateX(-50%);
  filter: blur(48px);
  pointer-events: none;
}
.reflect .section-head .eyebrow { color: rgba(239,226,198,0.6); border-top-color: rgba(239,226,198,0.22); }
.reflect .section-title { color: #EFE2C6; }
.reflect .section-title em { color: #D6794A; font-style: italic; }
.reflect .section-lede { color: rgba(239,226,198,0.62); position: relative; z-index: 1; }

.reflect-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  position: relative;
  z-index: 1;
  align-items: start;
}

/* The echo — the user's own line from a year back, set as found type. */
.echo-date {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(239,226,198,0.6); margin-bottom: 18px;
}
.echo-line {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(20px, 2.1vw, 30px); line-height: 1.34; letter-spacing: -0.01em;
  color: #F3ECD4;                    /* the app's writingInk, warmed for the user's voice */
  max-width: 24ch;
}
/* The margin reply — second ink: the present self answering, dated. */
.echo-reply {
  margin-top: 30px; margin-left: 22px; padding-left: 20px;
  border-left: 1px solid rgba(214,120,73,0.34); max-width: 26ch;
}
.echo-reply .r {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45;
  color: rgba(239,226,198,0.72);
}
.echo-reply .r-date {
  display: inline; font-family: var(--f-mono); font-style: normal;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(239,226,198,0.6); margin-left: 10px;
}

/* The spine — the archive deepening backward. The book, so far. */
.spine-head {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(239,226,198,0.6); padding-bottom: 16px;
}
.spine-row { display: block; padding: 15px 0; border-top: 1px solid rgba(239,226,198,0.14); }
.spine-row .when {
  display: block; font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(239,226,198,0.6); margin-bottom: 5px;
}
.spine-row .frag {
  font-family: var(--f-display); font-style: italic;
  font-size: 16px; line-height: 1.35; color: rgba(239,226,198,0.68);
}
.spine-row.kept .frag {              /* underline-to-keep, made visible */
  color: #F3ECD4;
  text-decoration: underline; text-decoration-color: rgba(214,120,73,0.7);
  text-underline-offset: 4px;
}

.reflect .spec { color: rgba(239,226,198,0.6); margin-top: clamp(34px, 4vh, 56px); position: relative; z-index: 1; }

@media (max-width: 720px) {
  .reflect-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ---- Pricing ---------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--col-gap);
}
.price {
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: clamp(28px, 3.5vw, 48px);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  position: relative;
}
.price.featured {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.price.featured .price-tier-num,
.price.featured .price-cap { color: var(--bg); opacity: 0.7; }
.price.featured .price-feature { border-color: rgba(239,226,198,0.16); }
.price.featured .price-strong { color: var(--accent); }
.price-tier-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.price h3 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.03em;
  margin: 28px 0 8px;
  font-style: italic;
}
.price-amount {
  font-family: var(--f-display);
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price-amount .per { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.price.featured .price-amount .per { color: var(--bg); opacity: 0.7; }
.price-sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  margin-bottom: 32px;
  color: var(--ink-soft);
}
.price.featured .price-sub { color: var(--bg); opacity: 0.7; }
.price-features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.price-feature {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
}
.price-feature::before {
  content: '+';
  font-family: var(--f-mono);
  color: var(--accent);
  font-size: 14px;
}
.price-strong { font-weight: 500; }
.price-cap {
  margin-top: 24px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.beta-strip {
  margin-top: 40px;
  padding: 18px 24px;
  border: 1px dashed var(--accent);
  border-radius: 999px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  text-align: center;
  color: var(--ink);
  background: var(--bg-card);
}
.beta-strip strong { color: var(--accent); font-weight: 500; font-family: var(--f-mono); font-style: normal; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 14px; }

/* ---- Maker note ------------------------------------------- */
.maker {
  background: var(--bg-deep);
}
.maker-grid {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.maker-grid--solo { grid-template-columns: minmax(0, 70ch); justify-content: start; }
.maker-portrait {
  aspect-ratio: 3/4;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.maker-portrait::after {
  content: '— A.';
  position: absolute;
  bottom: 24px; right: 24px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 32px;
  color: var(--ink-soft);
}
.maker-portrait .corner {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.maker-body {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.maker-body p { margin: 0 0 1.2em; }
.maker-body p:last-of-type { margin-bottom: 0; }
.maker-body em { color: var(--accent); font-style: italic; }
.maker-sig {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}
.maker-sig .rule { flex: 0 0 64px; height: 1px; background: var(--ink); }

/* ---- FAQ -------------------------------------------------- */
.faq-list { border-top: 1px solid var(--ink); }
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.faq-q {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: padding .3s var(--ease);
}
.faq-q:hover { padding-left: 12px; }
.faq-q .num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}
.faq-q .q {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.022em;
  line-height: 1.2;
}
.faq-q .plus {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 15px;
  transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.faq-item.open .plus { transform: rotate(45deg); background: var(--ink); color: var(--bg); border-color: var(--ink); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.faq-a > div {
  overflow: hidden;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  padding: 0 0 36px 84px;
  font-family: var(--f-display);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
}
.faq-a-inner em { color: var(--accent); font-style: italic; }
.faq-meta {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.faq-meta .cell { display: flex; flex-direction: column; gap: 6px; }
.faq-meta .lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.faq-meta .v1 {
  font-family: var(--f-display);
  font-size: 24px;
  font-style: italic;
}
.faq-meta .v2 {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* ---- Close (email) ---------------------------------------- */
.close {
  background: var(--bg);
  text-align: left;
  padding-bottom: clamp(80px, 12vh, 160px);
}
.close-title {
  font-family: var(--f-display);
  /* ceiling brought down from 88px to sit under the calm-type h2 band (64px)
     and the hero, not above it */
  font-size: clamp(44px, 5.4vw, 68px);
  line-height: 1.2;
  letter-spacing: -0.04em;
  max-width: 18ch;
  margin: 0 0 60px;
  padding-bottom: 0.3em;
}
.close-title em { color: var(--accent); font-style: italic; }
.close-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: stretch;
  max-width: 640px;
  padding: 8px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--bg-card);
}
.close-form input {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  background: transparent;
  border: 0;
  padding: 14px 22px;
  color: var(--ink);
  outline: none;
  letter-spacing: -0.005em;
}
.close-form input::placeholder { color: var(--ink-mute); }
.close-form button {
  font-family: var(--f-sans);
  font-size: 14px;
  padding: 14px 28px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .3s var(--ease);
}
.close-form button:hover { background: var(--accent); }
.close-note {
  margin-top: 24px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Footer ----------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  padding: 40px var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.footer-mark {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.footer-mark span { color: var(--ink-mute); font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-left: 16px; }
.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--ink); }

/* ---- Theme toggle (floating) ------------------------------ */
/* theme toggle removed — the site is dark only */

/* ---- Scroll-reveal generic -------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* respect motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-title .word { transform: none; }
}

/* ---- Responsive ------------------------------------------- */
@media (max-width: 960px) {
  body { font-size: 16px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .definition-grid { grid-template-columns: 1fr; gap: 40px; }
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 40px; }
  .showcase-inner { grid-template-columns: 1fr; }
  .showcase-text { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 60px var(--gutter); }
  .knowing-grid { grid-template-columns: 1fr; }
  .knows { border-right: 0 !important; padding-right: 0 !important; padding-left: 0 !important; }
  .knows:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .knows:last-child { border-bottom: 0; }
  .duo-grid { grid-template-columns: 1fr; }
  .briefing-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .maker-grid { grid-template-columns: 1fr; }
  .maker-portrait { max-width: 240px; }
  .faq-q { grid-template-columns: 32px 1fr 32px; gap: 16px; }
  .faq-a-inner { padding-left: 48px; }
  .faq-meta { grid-template-columns: 1fr; }
  .hero-foot { grid-template-columns: 1fr; }
  .close-form { grid-template-columns: 1fr; border-radius: 24px; }
  .close-form input { font-size: 16px; }
  .footer { grid-template-columns: 1fr; text-align: left; }
  .hero-title { white-space: normal; font-size: clamp(40px, 11vw, 84px); }
}

/* ============================================================
   PRODUCTION POLISH (implementation pass)
   ============================================================ */

/* Buttons — guarantee the label + arrow always sit on one centered line,
   never clipped or wrapping out of the pill. */
.btn, .nav-cta, .close-form button {
  line-height: 1.05;
  justify-content: center;
  text-align: center;
}
.btn .arrow, .nav-cta .arrow, .close-form button .arrow { flex: 0 0 auto; }

/* Real constellation logo lockup — nav + footer */
.nav-mark, .footer-mark { display: inline-flex; align-items: center; gap: 10px; }
.nav-mark .constel { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-mark .constel circle { fill: currentColor; }
.nav-mark .constel .now { fill: var(--accent); }          /* blends under mix-blend nav */
.footer-mark { gap: 11px; }
.footer-mark .constel { width: 20px; height: 20px; flex: 0 0 auto; }
.footer-mark .wordmark { display: inline-flex; align-items: center; gap: 14px; }

/* keep the footer mark's tagline span aligned after the wordmark */
@media (max-width: 600px){
  .footer-mark span { margin-left: 0; display: block; margin-top: 4px; }
}


/* ---- Dark-default fixes: the briefing was authored for a dark bg
   (it used var(--ink) as its background in light theme). Restore a true
   dark briefing under data-theme=dark so its cream borders/text read right. */
[data-theme="dark"] .briefing { background: #16110B; color: var(--ink); }
[data-theme="dark"] .briefing .section-head .index { color: var(--ink-mute); border-top-color: var(--rule); }
[data-theme="dark"] .briefing .section-title { color: var(--ink); }
[data-theme="dark"] .briefing h2 .em { color: var(--accent); }
[data-theme="dark"] .letter { color: var(--ink); }
[data-theme="dark"] .letter-foot { color: var(--ink-soft); }
[data-theme="dark"] .beyond .val { color: var(--ink); }

/* ---- Screenshot placeholders (real captures dropped in later) ---- */
.ph-fill{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg-card);
  color:var(--ink-mute);
}
.frame .ph-fill, .preview .ph-fill{ border-radius:inherit; }
.ph-constel{ width:40px; height:40px; opacity:.8; }
.ph-constel circle{ fill:var(--ink-mute); }
.ph-constel .now{ fill:var(--accent); }
.ph-label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ph-note{
  font-family:var(--f-display); font-style:italic; font-size:14px; color:var(--ink-mute);
}


/* ============================================================
   AUDIT FIXES (implementation pass) — blockers → polish
   ============================================================ */

/* (14) color-scheme so native chrome/scrollbars track the theme */
:root{ color-scheme: dark; }

/* (1b) re-add the theme crossfade ONLY after first paint (kills load flash) */
.theme-ready body{ transition: background-color .6s var(--ease), color .6s var(--ease); }
/* (36) themed islands re-light in lockstep on toggle, never on first paint */
.theme-ready .marquee, .theme-ready .price, .theme-ready .briefing,
.theme-ready .definition, .theme-ready .showcase, .theme-ready .ph-fill, .theme-ready .nav{
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}

/* (16) smooth in-page scroll with fixed-nav offset */
html{ scroll-behavior: smooth; scroll-padding-top: clamp(64px, 9vh, 96px); }

/* (4) global focus-visible ring (none existed) */
:where(a, button, input, [tabindex]):focus-visible{
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px;
}
.close-form input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* (5) nav CTA padding collision fix + comfortable touch target */
.nav-links a.nav-cta{ padding: 11px 18px; }
/* (24) bigger tap areas on inline links */
.nav-links a:not(.nav-cta){ padding: 10px 4px; }
.footer-links a{ padding: 8px 0; display: inline-block; }

/* (2) dark-mode: stop var(--ink)-as-background islands inverting to cream */
[data-theme="dark"] .marquee{ background: var(--bg-deep); color: var(--ink); }
[data-theme="dark"] .price.featured{ background: #1B140D; color: var(--ink); border-color: var(--rule); }
[data-theme="dark"] .price.featured .price-feature{ border-top-color: var(--rule); }
[data-theme="dark"] .price.featured .price-tier-num,
[data-theme="dark"] .price.featured .price-cap,
[data-theme="dark"] .price.featured .price-sub,
[data-theme="dark"] .price.featured .price-amount .per{ color: var(--ink-mute); opacity: 1; }

/* (13) featured accent text → card foreground (rust failed AA on the card) */
.price.featured .price-strong{ color: inherit; font-weight: 500; }

/* (3) light-theme briefing: labels/footer were dark-on-dark; the panel is dark in both themes */
.briefing .beyond .lbl, .briefing .letter-foot{ color: rgba(239,226,198,0.62); }

/* (19/20) consistent flush-left rhythm: index sits above the title, content + lede all align at the gutter */
.section-head{ grid-template-columns: 1fr; gap: 14px; }
.section-lede{ padding-left: 0; }

/* (17) unify the button system: equal heights, shared states */
.btn-primary{ border: 1px solid transparent; }
.btn-ghost{ border-color: var(--ink-soft); }
.btn:active, .nav-cta:active, .close-form button:active{ transform: translateY(0) scale(.985); }
.btn:disabled, .close-form button:disabled{ opacity: .6; cursor: not-allowed; transform: none; }

/* (33) FAQ hover without layout shift + pricing caps pinned to card bottom */
.faq-q{ }
.faq-q:hover{ padding-left: 0; }
.faq-q .q{ transition: transform .3s var(--ease); }
.faq-q:hover .q{ transform: translateX(10px); }
.price-cap{ margin-top: auto; padding-top: 24px; }
/* (32) pillar art frames bottom-align */
.pillar-art{ margin-top: auto; }

/* (35) showcase progress bar animates transform, not width */
.showcase-counter .bar::after{ width: 100%; transform-origin: left; transform: scaleX(var(--prog-scale, 0)); transition: transform .6s var(--ease); }

/* (28) showcase title crossfades instead of hard innerHTML flash */
.showcase-title{ transition: opacity .25s var(--ease); }

/* (30) calmer 'now' pulse (opacity-only), applied to all live dots */
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.ph-constel .now, .footer-mark .constel .now, .nav-mark .constel .now, .letter-foot .dot{ animation: pulse 3.6s ease-in-out infinite; }

/* (34a) drop the permanent nav compositor layer */
.nav{ will-change: auto; }

/* (37b) dark-mode chat bubble convention */
[data-theme="dark"] .mock-talk .from-ordo{ background: var(--accent); color: #161009; }

/* (27) footer: clear of the viewport bottom */
.footer{ padding-top: clamp(22px, 3vh, 32px); padding-bottom: clamp(64px, 7.5vh, 74px); }

/* (21) hero title: allow wrap before it can clip, clip not hidden */
.hero{ overflow: clip; }
@media (max-width: 1100px){ .hero-title{ white-space: normal; } }

/* (7) hero eyebrow row stacks above the title on phones */
@media (max-width: 600px){
  .hero-eyebrow-row{ position: static; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 28px; }
  .hero{ padding-top: 96px; }
  .section-head{ gap: 12px; }
  .hero-foot .btn{ display: flex; width: 100%; justify-content: center; }   /* (26) */
  .footer-links{ gap: 8px 20px; flex-wrap: wrap; }
}

/* (25) collapse fixed min-heights on mobile */
@media (max-width: 960px){
  .showcase-screen{ min-height: auto; padding-top: 24px; padding-bottom: 24px; }
  .duo-panel{ min-height: auto; }
}

/* (15 + 37a) reduced-motion safety: never leave reveal-gated content invisible; freeze marquee at start */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .pillar, .knows, .letter .line, .briefing-grid .beyond-row,
  .mock-write .line, .mock-plan .evt, .mock-talk .bubble,
  .duo-grid, .letter-foot, .price, .showcase-title, .reveal, .definition{
    opacity: 1 !important; transform: none !important;
  }
  .marquee-track{ animation: none !important; transform: none !important; }
}

/* (8/9) screen-reader-only + skip link + footer now-dot fill */
.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; }
.skip-link{ position:absolute; left:8px; top:-48px; z-index:100; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; font-family:var(--f-sans); font-size:14px; transition:top .2s var(--ease); }
.skip-link:focus{ top:8px; }
.footer-mark .constel .now{ fill:var(--accent); }


/* ============================================================
   REVIEW FIXES (post-audit verification pass)
   ============================================================ */
/* (6) collapsed FAQ answers must leave the tab order / AT tree */
.faq-a-inner{ visibility: hidden; transition: visibility 0s linear .5s; }
.faq-item.open .faq-a-inner{ visibility: visible; transition-delay: 0s; }

/* (17) shared hover lift so primary + ghost move together; darker primary hover for AA */
.btn:hover{ transform: translateY(-2px); }
.btn-primary:hover{ background: #9C4528; }

/* (15/30) reduced-motion robustness for the hero words */
@media (prefers-reduced-motion: reduce){ .hero-title .word{ opacity: 1 !important; } }


/* ============================================================
   COMPETITIVE-SWEEP REFINEMENTS (informed by 15-site survey)
   Each item is additive + reversible; production stays on the
   maintenance page until Albert reviews the preview.
   ============================================================ */

/* (a) hero CTA reassurance — a friction-reducing commitment line under
   the primary CTA, in the brand's own voice (a common conversion pattern) */
.hero-reassure{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  margin: 18px 0 0;
}

/* (b) display tier — superseded by the TYPE + LAYOUT v2 block below
   (single source of truth for .section-title / .showcase-title leading). */

/* (c) placeholders breathe — until real captures land, a very slow
   rust-glow drift + constellation breath turn the empty frames into a
   quiet live demo instead of dead boxes. Clipped by .frame overflow. */
.duo-panel .preview{ position: relative; }
.ph-fill{ overflow: hidden; }
.ph-fill::after{
  content:""; position:absolute; left:0; right:0; top:-20%; height:72%;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
  opacity:.4; pointer-events:none; z-index:0;
  animation: ph-drift 11s ease-in-out infinite;
}
.ph-constel, .ph-label, .ph-note{ position: relative; z-index:1; }
.ph-constel{ animation: ph-breathe 9s ease-in-out infinite; }
@keyframes ph-drift{
  0%,100%{ transform: translateY(4%);  opacity:.32; }
  50%    { transform: translateY(40%); opacity:.6;  }
}
@keyframes ph-breathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }

/* (d) thesis interstitial — Ordo's most ownable line landed as one
   quotable statement (un-numbered, like the marquee) with a third,
   quiet CTA touchpoint. Hero / here / close = 3 calm waypoints. */
.thesis{
  background: var(--bg-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(72px, 12vh, 140px) var(--gutter);
  text-align: center;
}
.thesis .container{ display:flex; flex-direction:column; align-items:center; gap: 22px; }
.thesis-line{
  font-family: var(--f-display);
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
}
.thesis-line em{ font-style: italic; color: var(--accent); }
.thesis-gloss{
  font-family: var(--f-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0;
}
.thesis-cta{ margin-top: 4px; }

/* reduced-motion: keep the frames calm */
@media (prefers-reduced-motion: reduce){
  .ph-fill::after, .ph-constel{ animation: none !important; transform: none !important; }
}

/* (b-phone) superseded by the TYPE + LAYOUT v2 phone block below. */


/* ============================================================
   HERO v2 — asymmetric editorial layout + a LIVING product stage
   Applies the sweep: show-don't-tell product moment (Structured),
   extreme eyebrow→headline scale jump (Notion Calendar / Cal Sans),
   self-demonstrating motion on load (Superlist / Cultured Code).
   The hero is above the fold, so this is the change you see first.
   ============================================================ */

.hero{
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
  padding-top: clamp(120px, 16vh, 184px);
  padding-bottom: clamp(56px, 9vh, 96px);
}

/* asymmetric two-column: oversized type | living stage */
.hero-main{
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: center;
  width: 100%;
}
.hero-copy{ min-width: 0; }

/* bolder type: bigger, tighter, wraps instead of nowrap-clipping */
.hero-title{
  font-size: clamp(40px, 6.6vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.042em;
  white-space: normal;
}

/* foot becomes a left-aligned editorial stack under the headline */
.hero-copy .hero-foot{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-template-columns: none;
  gap: 18px;
  margin-top: clamp(28px, 4vh, 46px);
}
.hero-copy .hero-tagline{ max-width: 30ch; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; }
.hero-copy .hero-reassure{ margin: 2px 0 0; }

/* ---- the real product: one device, themed to match the site ---- */
.hero-stage{
  position: relative;
  align-self: center;
  isolation: isolate;
}
.hero-stage::before{          /* soft accent ground so the phone lifts off the bg */
  content: ""; position: absolute; inset: -10% -6% -14% -6%; z-index: -1;
  background: radial-gradient(ellipse at 60% 42%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%);
  opacity: .5; pointer-events: none;
}
.hero-phone{
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 720 / 1564;          /* true iPhone screen ratio — no crop */
  border-radius: 30px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  box-shadow: 0 44px 96px -44px rgba(0,0,0,0.62), 0 1px 0 rgba(255,255,255,0.05) inset;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero-loaded .hero-phone{ opacity: 1; transform: none; transition-delay: .2s; }
.hero-phone .shot{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .6s var(--ease);
}
/* show the screenshot that matches the active theme — the device re-themes
   with the site, quietly demonstrating that Ordo follows your appearance.
   Site default is dark (html[data-theme=dark]); base = the light fallback. */
.hero-phone .shot-dark{ opacity: 0; }
.hero-phone .shot-light{ opacity: 1; }
[data-theme="dark"] .hero-phone .shot-light{ opacity: 0; }
[data-theme="dark"] .hero-phone .shot-dark{ opacity: 1; }

/* stack on tablet/phone: copy first, device below.
   NOTE: re-assert .hero-title size here — the unconditional v2 rule above
   would otherwise win by source order and floor the headline on phones. */
@media (max-width: 900px){
  .hero-main{ grid-template-columns: 1fr; gap: clamp(40px, 7vh, 64px); }
  .hero-title{ font-size: clamp(40px, 9vw, 84px); }
  .hero-stage{ order: 2; }
  .hero-phone{ max-width: 300px; }
}

/* reduced-motion: the device is fully present, no entrance */
@media (prefers-reduced-motion: reduce){
  .hero-phone{ opacity: 1 !important; transform: none !important; }
  .hero-phone .shot{ transition: none !important; }
}


/* ============================================================
   TYPE + LAYOUT v2 — the hero's confidence carried down the page
   (approved: "carry this bolder type/layout language down")
   Tighter, more assured display tier; bigger editorial pull-quotes;
   more present section indices; card depth on the art to echo the
   hero stage; a restrained accent ground to bookend the close.
   ============================================================ */

/* ---- display tier: assured, poster-grade leading + tracking ---- */
.section-title{ line-height: 1.07; letter-spacing: -0.032em; max-width: 18ch; }
.showcase-title{ line-height: 1.02; letter-spacing: -0.035em; }
.pillar h3{ font-size: clamp(26px, 2.7vw, 38px); line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 22px; }
.knows h3{ line-height: 1.08; letter-spacing: -0.028em; margin-bottom: 28px; max-width: 16ch; }
.duo-panel h3{ line-height: 1.06; letter-spacing: -0.026em; }
.close-title{ letter-spacing: -0.035em; line-height: 1.02; }
.definition-headword{ letter-spacing: -0.03em; }

/* ---- section index: a more present editorial chapter marker ---- */
.section-head .index{ font-size: 12px; letter-spacing: 0.2em; color: var(--ink-soft); }
.showcase-text .index{ font-size: 12px; letter-spacing: 0.2em; color: var(--ink-soft); }

/* ---- editorial pull-quotes: more presence on the 'knows' lines ---- */
.knows-quote{
  margin-top: 30px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  padding-left: 24px;
}

/* ---- card depth: the pillar art reads like the hero's living cards ---- */
.pillar-art{
  box-shadow: 0 26px 60px -34px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.pillar-art::after{                /* faint accent ground, same idiom as the hero stage
                                      (kept low so the mock's micro-labels stay legible) */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse at 78% 6%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%);
  opacity:.3;
}
.pillar-art > .mock{ z-index:1; }

/* ---- restrained accent ground to bookend the hero on the close ---- */
/* The legacy .close::before bottom bloom is removed: the close section already
   carries the newer centered .trust-glow, and stacking both lit a redundant
   double glow. One clean glow now. .close keeps relative+clip for the glow. */
.close{ position: relative; overflow: hidden; }
.close .container{ position: relative; z-index:1; }

/* ---- tablet + phone: let the tight multi-line titles breathe
   (the long briefing title wraps to 3-4 lines below desktop) ---- */
@media (max-width: 900px){
  .section-title{ line-height: 1.12; }
  .knows h3{ line-height: 1.14; }
}


/* ============================================================
   SWEEP SECTIONS — the bigger bets, built
   (1) old-way → Ordo contrast   (2) a day in three movements
   (3) the first readers (honest scarcity). On-voice, no named
   competitors, no vanity metrics, no banned vocabulary.
   ============================================================ */

/* ---- (1) the usual planner → Ordo  (un-numbered, bg-deep) ---- */
.contrast{
  background: var(--bg-deep);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(72px, 11vh, 140px) var(--gutter);
}
.contrast-eyebrow{
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute);
  text-align: center; margin: 0 0 clamp(36px, 5vh, 60px);
}
.contrast-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  max-width: 1000px; margin: 0 auto; align-items: stretch;
  border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
}
.contrast-col{ padding: clamp(28px, 3vw, 46px); display: flex; flex-direction: column; gap: 18px; }
.contrast-col--old{ border-right: 1px solid var(--rule); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.contrast-col--ordo{ background: color-mix(in srgb, var(--accent) 6%, transparent); }
.contrast-tag{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.contrast-list{ list-style: none; display: flex; flex-direction: column; gap: 0; }
.contrast-list li{
  font-family: var(--f-mono); font-size: 13.5px; letter-spacing: 0.02em;
  color: var(--ink-soft); padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
}
.contrast-list li:first-child{ padding-top: 4px; }
.contrast-line{
  font-family: var(--f-display); font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
.contrast-line em{ font-style: italic; color: var(--accent); }
.contrast-verdict{ margin: auto 0 0; font-family: var(--f-body); font-style: italic; font-size: 17px; color: var(--ink-soft); }
.contrast-col--ordo .contrast-verdict{ color: var(--ink); }

/* ---- (2) a day, in three movements  (numbered chapter) ---- */
.ritual-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); border-top: 1px solid var(--rule); }
.ritual-step{ padding: clamp(28px, 3.5vw, 48px) 0 0; display: flex; flex-direction: column; gap: 14px; position: relative; }
.ritual-step + .ritual-step{ border-left: 1px solid var(--rule); padding-left: clamp(24px, 3vw, 48px); }
.ritual-num{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.ritual-step h3{ font-size: clamp(24px, 2.4vw, 34px); line-height: 1.06; letter-spacing: -0.03em; margin: 0; padding-bottom: 0.2em; }
.ritual-step p{ color: var(--ink-soft); font-size: 17px; line-height: 1.5; max-width: 30ch; }

/* ---- (3) the first readers  (un-numbered honest scarcity, bg-deep) ---- */
.firstreaders{
  background: var(--bg-deep);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(64px, 10vh, 124px) var(--gutter); text-align: center;
}
.firstreaders .container{ display: flex; flex-direction: column; align-items: center; gap: 18px; }
.firstreaders-eyebrow{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0; }
.firstreaders-line{
  font-family: var(--f-display); font-size: clamp(28px, 4vw, 54px);
  line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; color: var(--ink); margin: 0;
}
.firstreaders-line em{ font-style: italic; color: var(--accent); }
.firstreaders-sub{ font-family: var(--f-body); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; margin: 0; }

/* ---- small mono accent labels: the rationed rust fails AA on warm paper
   at 11–12px, so use a darker rust in light; keep bright --accent in dark
   (passes ~6:1 there). Large display em accents stay bright in both. ---- */
.beta-strip strong, .contrast-col--ordo .contrast-tag, .privacy-k, .demo-step-n, .demo-ordo .who{ color: #A8472E; }
[data-theme="dark"] .beta-strip strong,
[data-theme="dark"] .contrast-col--ordo .contrast-tag,
[data-theme="dark"] .privacy-k,
[data-theme="dark"] .demo-step-n,
[data-theme="dark"] .demo-ordo .who{ color: var(--accent); }

/* ---- body-size rust em accents: the light --accent (#B7553A ~3.91:1) fails AA
   at these body sizes on the paper bg, so use the darker rust (#9C4528 ~5.19:1).
   Scoped to the small-text em runs only, so the large display rust is untouched;
   dark theme keeps the bright accent (passes there). ---- */
/* #pricing rule carries an extra `html` qualifier so it outranks the equal-
   specificity inline-head rule (#pricing .section-lede em) that loads after
   ordo.css; the other two have no competing later rule. */
.faq-a-inner em, .maker-body em, html #pricing .section-lede em{ color: #9C4528; }
[data-theme="dark"] .faq-a-inner em,
[data-theme="dark"] .maker-body em,
html[data-theme="dark"] #pricing .section-lede em{ color: var(--accent); }

/* ---- responsive: stack the multi-column bands.
   ritual mirrors .pillars (stacks at 960); contrast 2-col holds to 760. ---- */
@media (max-width: 960px){
  .ritual-grid{ grid-template-columns: 1fr; }
  .ritual-step + .ritual-step{ border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
}
@media (max-width: 760px){
  .contrast-grid{ grid-template-columns: 1fr; }
  .contrast-col--old{ border-right: 0; border-bottom: 1px solid var(--rule); }
}


/* ============================================================
   REBUILD v3 — conversion-first sections (clarity earns the poetry)
   companion-shown demo · connect · five surfaces · okay-step · privacy
   + hero subline + briefing-on-dark-panel legibility
   ============================================================ */

/* hero subline carries the mechanic, so it reads as body copy not a giant display line */
.hero-copy .hero-tagline{
  font-family: var(--f-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  max-width: 44ch;
}
.hero-copy .hero-tagline em{ font-style: italic; color: var(--accent); }

/* ---- The companion, shown (the hook) ---- */
.demo{
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  margin-top: clamp(8px, 2vh, 24px);
}
.demo-talk{ margin: 0; display: flex; flex-direction: column; gap: 18px; }
.demo-line{ font-family: var(--f-body); font-size: clamp(18px, 1.9vw, 25px); line-height: 1.5; margin: 0; max-width: 32ch; }
.demo-line .who{ display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.demo-you{ color: var(--ink-soft); }
.demo-ordo{ color: var(--ink); padding-left: 20px; border-left: 2px solid var(--accent); }
.demo-confirm{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.demo-chip{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; padding: 9px 16px; border-radius: 999px; background: transparent; border: 1px solid var(--accent); color: #A8472E; }
[data-theme="dark"] .demo-chip{ color: var(--accent); }
.demo-chip--ghost{ background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); }
.demo-phone{ position: relative; isolation: isolate; }
.demo-phone::before{ content:""; position:absolute; inset:-10% -6% -14% -6%; z-index:-1; background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%); opacity:.45; pointer-events:none; }
.demo-cap{ font-family: var(--f-display); font-style: italic; font-size: 14px; color: var(--ink-mute); margin: 6px 0 0; }
.demo-steps{ list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin: clamp(36px, 5vh, 60px) 0 0; padding: 28px 0 0; border-top: 1px solid var(--rule); }
.demo-steps li{ font-family: var(--f-body); font-size: clamp(15px, 1.3vw, 18px); color: var(--ink-soft); line-height: 1.45; }
.demo-step-n{ display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; margin-bottom: 10px; }
.demo-standing{ margin: 26px 0 0; font-family: var(--f-body); font-size: clamp(15px, 1.35vw, 18px); color: var(--ink-soft); }
.demo-standing em{ font-style: italic; color: var(--ink); }
@media (max-width: 820px){
  .demo{ grid-template-columns: 1fr; gap: clamp(28px,5vh,44px); }
  .demo-phone{ max-width: 300px; }
  .demo-steps{ grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Connect ---- */
.connect .section-lede strong{ color: var(--ink); font-weight: 500; }
.connect-rule{
  margin: clamp(24px, 3vh, 36px) 0 0; padding-top: 20px; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}

/* ---- Five surfaces ---- */
.surface-row{ list-style: none; padding: 0; margin: clamp(8px, 2vh, 20px) 0 0; border-top: 1px solid var(--rule); }
.surface-row li{ display: flex; align-items: baseline; gap: clamp(16px, 3vw, 44px); padding: clamp(18px, 2.4vh, 28px) 0; border-bottom: 1px solid var(--rule-soft); }
.surface-name{ font-family: var(--f-display); font-size: clamp(24px, 2.7vw, 40px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); flex: 0 0 auto; min-width: 5.5ch; }
.surface-note{ font-family: var(--f-body); font-size: clamp(15px, 1.4vw, 19px); color: var(--ink-soft); }
.surface-foot{ margin: clamp(28px, 4vh, 44px) 0 0; font-family: var(--f-display); font-style: italic; font-size: clamp(18px, 1.8vw, 26px); color: var(--ink-soft); }

/* ---- The okay-step (trust aside) ---- */
.okaystep{
  background: var(--bg-deep); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--pad-band) var(--gutter); text-align: center;
}
.okaystep .container{ display: flex; flex-direction: column; align-items: center; gap: 16px; }
.okaystep-eyebrow{ margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.okaystep-line{ margin: 0; font-family: var(--f-display); font-size: clamp(30px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); max-width: 18ch; }
.okaystep-line em{ font-style: italic; color: var(--accent); }
.okaystep-body{ margin: 0; font-family: var(--f-body); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }

/* ---- Private by design ---- */
.privacy-list{ list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.privacy-list li{ display: grid; grid-template-columns: minmax(110px, 190px) 1fr; gap: clamp(16px, 3vw, 48px); padding: clamp(20px, 2.6vh, 30px) 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.privacy-k{ font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.privacy-v{ font-family: var(--f-body); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.6; color: var(--ink-soft); }
.privacy-foot{ margin: clamp(24px, 3vh, 36px) 0 0; font-family: var(--f-body); font-size: 13px; color: var(--ink-mute); }
.privacy-foot a{ color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px){ .privacy-list li{ grid-template-columns: 1fr; gap: 6px; } }

/* ---- contrast bridge + close sub ---- */
.contrast-bridge{ margin: clamp(28px, 4vh, 44px) 0 0; text-align: center; font-family: var(--f-display); font-style: italic; font-size: clamp(18px, 1.8vw, 26px); color: var(--ink-soft); }
.close-sub{ margin: 0 0 clamp(24px, 3vh, 34px); font-family: var(--f-body); font-size: clamp(14px, 1.1vw, 16px); color: var(--ink-soft); }

/* ---- briefing is a dark panel in BOTH themes: keep its new eyebrow + loop legible ---- */
.briefing .section-head .eyebrow{ color: rgba(239,226,198,0.6); border-top-color: rgba(239,226,198,0.28); }
.briefing .briefing-loop{ color: rgba(239,226,198,0.55); text-align: center; }

/* ---- film grain, matching the texture on the app surfaces ---- */
.grain{
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.87 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}


/* ============================================================
   SCROLL DYNAMICS — editorial fade-up (data-reveal)
   Calm: opacity 0->1 + a short translateY, soft decel ease, ~620ms.
   Kept distinct from the legacy .reveal so the two never collide.
   Set on section heads / ledes / list rows; observer adds .is-revealed
   once, then unobserves. Set-pieces (hero, duo pin, storyboard) are
   never tagged — they own their own motion.
   ============================================================ */
:root{ --ease-reveal: cubic-bezier(.22,.61,.36,1); }

[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s var(--ease-reveal), transform .62s var(--ease-reveal);
  will-change: opacity, transform;
}
/* a slightly longer throw for big type so it feels weighted, not jumpy */
[data-reveal="lede"]{ transform: translateY(22px); transition-duration: .68s; }

[data-reveal].is-revealed{ opacity: 1; transform: none; will-change: auto; }

/* child stagger: data-reveal-group on a parent; the observer writes --rvi
   (each child's index) so delays scale without per-child rules */
[data-reveal-group] > [data-reveal]{ transition-delay: calc(var(--rvi, 0) * 90ms); }

/* explicit stagger utilities (when group indexing isn't wanted) */
[data-reveal].rv-d1{ transition-delay: .09s; }
[data-reveal].rv-d2{ transition-delay: .18s; }
[data-reveal].rv-d3{ transition-delay: .27s; }
[data-reveal].rv-d4{ transition-delay: .36s; }

/* faint parallax on atmosphere layers (opt-in via data-parallax); the JS
   writes --pll (a small px translate). Only moves grounds, never content. */
[data-parallax]{ transform: translate3d(0, var(--pll, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-reveal-group] > [data-reveal]{ transition-delay: 0s !important; }
  [data-parallax]{ transform: none !important; }
}


/* ============================================================
   DEFINITION ATMOSPHERE — a 2nd Paper Design mesh continues the
   hero's warm-dark field across the fold (the definition now sits
   directly under the hero). Dark theme only; a top+bottom scrim
   keeps the serif body crisp. Mount + off-screen pause in JS.
   ============================================================ */
.definition{ position: relative; isolation: isolate; overflow: clip; }
#ord-def-bg{ position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; }
#ord-def-bg canvas{ width: 100% !important; height: 100% !important; display: block; }
[data-theme="dark"] #ord-def-bg{ opacity: .13; }
.definition::before{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(12,9,7,.58), rgba(12,9,7,.30) 42%, rgba(12,9,7,.58));
}
[data-theme="dark"] .definition::before{ opacity: 1; }
.definition .container{ position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce){ #ord-def-bg{ opacity: 0 !important; } }