/* ═══════════════════════════════════════════════════════════════════════════
   hank — OBSIDIAN. Deep material, ivory, one disciplined stroke of gold.
   Luxury is restraint. Nothing bounces, nothing celebrates.
   Tokens mirror brand/tokens.css — change them together, never one alone.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --obsidian:#0C0B0F; --obsidian-2:#08070B; --graphite:#17161C;
  --ivory:#F4EFE4; --ivory-dim:rgba(244,239,228,.72);
  --ivory-mute:rgba(244,239,228,.52); --ivory-faint:rgba(244,239,228,.34);
  --gold:#C6A667; --gold-bright:#E2CA92; --gold-deep:#A2823F;
  --gold-tint:rgba(198,166,103,.13); --gold-trim:rgba(226,202,146,.20);
  --line:rgba(244,239,228,.09); --line-soft:rgba(244,239,228,.055);
  --glass:rgba(255,255,255,.035);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--obsidian); color:var(--ivory);
  font-family:var(--body); font-size:16px; line-height:1.58; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; position:relative;
}
/* Gallery light on a dark object: a soft central spotlight, a faint gold bloom. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 44% at 50% 0%, rgba(96,92,106,.34), transparent 68%),
    radial-gradient(36% 30% at 84% 4%, rgba(198,166,103,.13), transparent 70%),
    radial-gradient(44% 38% at 8% 42%, rgba(198,166,103,.05), transparent 72%),
    linear-gradient(180deg,#131218 0%, #0C0B0F 46%, #08070B 100%);
}
/* A fine grain for a matte, expensive finish. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.6'/></svg>");
}
main,nav,footer{position:relative;z-index:2}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(22px,5vw,44px)}

/* ── type ─────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.04}
h1{font-size:clamp(2.3rem,6.3vw,5.05rem);letter-spacing:-.032em}
h2{font-size:clamp(2.1rem,4.3vw,3.35rem);letter-spacing:-.026em}
h3{font-size:1.32rem;letter-spacing:-.012em;line-height:1.22}
em{font-style:italic;background:linear-gradient(115deg,var(--gold-bright),var(--gold) 52%,var(--gold-deep));
   -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.lede{font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--ivory-dim);font-weight:300;line-height:1.55;max-width:30em}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── nav ──────────────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:60;transition:background var(--ease) 200ms,border-color var(--ease) 200ms,backdrop-filter 200ms}
nav.stuck{background:rgba(9,8,12,.74);backdrop-filter:blur(22px) saturate(120%);border-bottom:1px solid var(--line-soft)}
nav>.wrap{display:flex;align-items:center;gap:34px;height:78px}
.mark{font-family:var(--display);font-weight:500;font-size:1.42rem;color:var(--gold);letter-spacing:.005em;text-decoration:none}
.navlinks{display:flex;gap:30px;margin-left:auto}
.navlinks a{color:var(--ivory-mute);text-decoration:none;font-size:.925rem;font-weight:500;transition:color 150ms var(--ease)}
.navlinks a:hover{color:var(--ivory)}
@media(max-width:860px){.navlinks{display:none}}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Three things were wrong: a 100px radius on a large button is a lozenge, not
   a button; a soft gold halo bleeding into the page is a glow effect, not a
   shadow; and one flat fill has no material to it.

   What replaces them: a tight radius that scales with size, a real gradient
   with a lit top edge and a darker base so the surface has direction, a
   shadow that sits UNDER the object rather than radiating from it, and a
   press state — because a button that does not move when clicked feels dead. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:.9rem;letter-spacing:-.005em;
  line-height:1;border-radius:11px;padding:13px 22px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:transform 120ms var(--ease),box-shadow 200ms var(--ease),
             border-color 200ms var(--ease),background 200ms var(--ease),filter 200ms var(--ease);
}
.btn:active{transform:translateY(1px)}

.btn-gold{
  color:#17130A;
  background:linear-gradient(180deg,#E8D3A0 0%,#D8BE84 40%,#C6A667 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 1px 2px rgba(0,0,0,.30),
    0 6px 16px -8px rgba(0,0,0,.55);
}
.btn-gold:hover{filter:brightness(1.05);transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 2px 4px rgba(0,0,0,.32),
    0 12px 26px -10px rgba(0,0,0,.6)}
.btn-gold:active{filter:brightness(.97);box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}

.btn-ghost{
  color:var(--ivory);background:rgba(255,255,255,.022);
  border-color:rgba(244,239,228,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.btn-ghost:hover{background:rgba(255,255,255,.055);border-color:rgba(244,239,228,.30);transform:translateY(-1px)}
.btn-ghost:active{background:rgba(255,255,255,.03)}

.btn-lg{font-size:.98rem;padding:16px 30px;border-radius:13px}

/* ── hero ─────────────────────────────────────────────────────────────── */
/* One column. The hero's job is the H1, the promise, and the box the visitor
   types into — nothing beside it competing for the same glance. */
/* THE FOLD IS THE HERO. Nothing else on it.
   A full viewport, one centre axis, and the eye walks down it: the gold
   eyebrow, the headline in the middle of the page, the promise, then the box —
   which runs the entire width, because that is the invitation. The buttons sit
   under it, aligned to its left edge, so they read as the alternative to typing
   rather than as another centred thing competing with it. */
.hero{
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100svh - 128px);
  text-align:center;padding:clamp(24px,4vh,56px) 0 clamp(28px,5vh,64px);
}
.hero .eyebrow{display:block;margin-bottom:clamp(18px,3vh,34px)}
.hero h1{max-width:none;margin-inline:auto;margin-bottom:0}
.hero .lede{max-width:62ch;margin-inline:auto}

/* VERTICAL RHYTHM. The gap widens as the relationship between two blocks
   weakens — that progression IS the hierarchy, and a flat 40px everywhere is
   what made the middle read as dense:
     eyebrow → h1     ~34px   the eyebrow labels the headline. Tight on purpose.
     h1 → thesis      ~52px   display type to body type. The biggest change in
                              texture on the page, so it needs the most air
                              under an 81px headline.
     thesis → demo    ~68px   the widest break: from what Hank IS to watching
                              it work. Different kind of thing entirely.
     demo → buttons   ~64px   the demo is a closed unit; the buttons answer it.
   Every step is vh-aware, so a 13" laptop compresses the whole scale
   proportionally and keeps the hero on one fold instead of scrolling. */
.cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:38px}
.hero .cta-row{justify-content:center;margin-top:clamp(36px,5.6vh,64px)}
.hero-note{margin-top:22px;font-size:.85rem;color:var(--ivory-faint);letter-spacing:.01em}
.hero .hero-note{text-align:center}

/* ── glass panels: luminous dark, hair-thin gold trim ─────────────────── */
.glass{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.014));
  border:1px solid var(--gold-trim);border-radius:26px;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter:blur(30px) saturate(115%)}

/* The hero artifact — three arrivals, three actions. The whole product. */
.ledger{padding:8px 0 6px}
.ledger-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 24px 16px;border-bottom:1px solid var(--line-soft)}
/* A live signal, not a flashing light: one dot, breathing slowly. */
.live{display:inline-block;width:5px;height:5px;border-radius:100px;background:var(--gold);
  margin-right:9px;vertical-align:middle;animation:breathe 2.6s var(--ease) infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
.ledger-title{font-family:var(--display);font-size:1.06rem;color:var(--ivory)}
.ledger-meta{font-size:.75rem;color:var(--ivory-faint);letter-spacing:.03em}
.entry{display:grid;grid-template-columns:1fr auto 1.05fr;gap:16px;align-items:center;
  padding:17px 24px;border-bottom:1px solid var(--line-soft)}
.entry:last-child{border-bottom:0}
@media(max-width:560px){.entry{grid-template-columns:1fr;gap:10px}.arrow{display:none}}
.from{font-size:.79rem;color:var(--ivory-faint);letter-spacing:.02em;margin-bottom:3px}
.subject{font-size:.925rem;color:var(--ivory-dim);line-height:1.35}
.chip{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:2px 8px;border-radius:6px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ivory-mute)}
/* The hero panel PLAYS: an arrival lands, the line draws across, the action
   writes in. Communication in → work done, performed rather than described. */
.side-a,.side-b{opacity:0;transform:translateY(7px);transition:opacity 460ms var(--ease),transform 460ms var(--ease)}
.entry.a-in .side-a{opacity:1;transform:none}
.entry.b-in .side-b{opacity:1;transform:none}
.arrow{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-trim),var(--gold));
  position:relative;opacity:0;transition:width 440ms var(--ease) 120ms,opacity 240ms var(--ease) 120ms}
.entry.a-in .arrow{width:26px;opacity:1}
.arrow::after{content:"";position:absolute;right:0;top:-2.5px;width:5px;height:5px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg)}
.did{font-size:.93rem;color:var(--ivory);line-height:1.42}
.did b{font-weight:600;color:var(--gold-bright)}
.didmeta{margin-top:5px;font-size:.755rem;color:var(--ivory-faint)}
.ledger-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 24px 18px;border-top:1px solid var(--line-soft)}
.foot-note{font-size:.78rem;color:var(--ivory-faint)}
.approve{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;
  color:var(--gold-bright);padding:6px 13px;border-radius:100px;background:var(--gold-tint);border:1px solid var(--gold-trim)}

/* ── section furniture ────────────────────────────────────────────────── */
.section{padding:clamp(58px,6.5vw,92px) 0}
.section-hd{max-width:40rem;margin-bottom:clamp(32px,3.8vw,48px)}
.section-hd h2{margin-bottom:16px}
.rule{height:1px;background:linear-gradient(90deg,var(--gold-trim),transparent 62%)}
.rule.reveal{opacity:0;transform:scaleX(.15);transform-origin:left center;
  transition:opacity 500ms var(--ease),transform 900ms var(--ease)}
.rule.reveal.in{opacity:1;transform:scaleX(1)}

/* ── the difference: a four-axis comparison ───────────────────────────── */
.axes{border-top:1px solid var(--line)}
.axis{display:grid;grid-template-columns:minmax(140px,.66fr) 1fr 1fr;gap:clamp(18px,3vw,44px);
  padding:21px 0;border-bottom:1px solid var(--line)}
@media(max-width:820px){.axis{grid-template-columns:1fr;gap:14px;padding:26px 0}}
.axis-label{font-size:.71rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-top:4px}
.axis-them{color:var(--ivory-faint);font-size:1rem;line-height:1.45;font-weight:300}
.axis-us{color:var(--ivory);font-size:1rem;line-height:1.45}
.axis-us b{font-weight:600}
.axes-key{display:grid;grid-template-columns:minmax(150px,.72fr) 1fr 1fr;gap:clamp(18px,3.4vw,52px);padding-bottom:14px}
@media(max-width:820px){.axes-key{display:none}}
.key-them,.key-us{font-size:.73rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.key-them{color:var(--ivory-faint)}
.key-us{color:var(--gold-bright)}

/* ── alternating capability rows ──────────────────────────────────────── */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(34px,5vw,68px);
  align-items:center;padding:clamp(38px,4.4vw,60px) 0}
@media(max-width:960px){.row{grid-template-columns:1fr;gap:40px}}
.row.flip .row-copy{order:2;text-align:right}
/* Copy on the right reads to the right edge — its rules and blocks follow it,
   so the text hugs the panel it belongs to instead of drifting away from it. */
.row.flip .row-copy p{margin-left:auto}
.row.flip .proof{margin-left:auto;padding-left:0;padding-right:16px;
  border-left:0;border-right:1px solid var(--gold-trim)}
@media(max-width:960px){
  /* Stacked, everything reads from the left again. */
  .row.flip .row-copy{order:0;text-align:left}
  .row.flip .row-copy p{margin-left:0}
  .row.flip .proof{margin-left:0;padding-left:16px;padding-right:0;
    border-left:1px solid var(--gold-trim);border-right:0}
}
.kicker{font-size:.71rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.row-copy h3{font-size:clamp(1.6rem,2.7vw,2.15rem);margin-bottom:16px;line-height:1.14}
.row-copy p{color:var(--ivory-dim);font-weight:300;line-height:1.65;max-width:34em}
.row-copy p+p{margin-top:14px}
.proof{margin-top:22px;padding-left:16px;border-left:1px solid var(--gold-trim);
  font-size:.9rem;color:var(--ivory-mute);line-height:1.55}

/* ── mini product surfaces ────────────────────────────────────────────── */
.surface{padding:20px 22px}
.s-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}
.s-title{font-family:var(--display);font-size:1.02rem}
.s-meta{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.s-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.s-row:last-child{border-bottom:0}
.box{width:17px;height:17px;flex:0 0 auto;border-radius:5px;border:1.5px solid rgba(226,202,146,.42)}
.s-text{flex:1;min-width:0;font-size:.9rem;color:var(--ivory-dim);line-height:1.4}
.s-amt{font-size:.9rem;font-weight:600;color:var(--ivory)}
.s-total{display:flex;align-items:baseline;justify-content:space-between;padding-top:15px;margin-top:4px;border-top:1px solid var(--gold-trim)}
.s-total span{font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ivory-faint)}
.s-total b{font-family:var(--display);font-size:1.42rem;font-weight:500;color:var(--gold-bright)}
.folder{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.028);border:1px solid var(--line);margin-bottom:9px}
.folder:last-child{margin-bottom:0}
.folder svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--gold);fill:none;stroke-width:1.5;opacity:.85}
.folder-name{font-size:.9rem;color:var(--ivory-dim);flex:1;min-width:0}
.folder-tag{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--ivory-faint)}
.nest{margin-left:26px}

/* ── worlds ───────────────────────────────────────────────────────────── */
/* The one centred moment on an otherwise left-aligned page — it earns the
   break because it is a single idea, and because the word doing the work
   should be the thing you look at. The word sits on its OWN line, so only
   that line re-centres when it changes, and it does so while invisible. */
.band{text-align:center;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:radial-gradient(58% 120% at 50% 50%, rgba(198,166,103,.055), transparent 70%)}
.band .kicker{margin-bottom:26px}
.band .lede{margin:26px auto 0;max-width:34em}
.cycle-lead{font-size:clamp(1.02rem,1.6vw,1.3rem);color:var(--ivory-mute);font-weight:300;letter-spacing:.005em}
.cycle-word{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.14;letter-spacing:-.028em;margin-top:2px;
  background:linear-gradient(115deg,var(--gold-bright),var(--gold) 52%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.cycle-word.out{opacity:0;transform:translateY(-6px)}
.worlds{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:8px}
.world{background:#0E0D12;padding:26px 24px}
.world-who{font-family:var(--display);font-size:1.12rem;margin-bottom:9px}
.world-what{font-size:.87rem;color:var(--ivory-mute);line-height:1.55;font-weight:300}
.world-what b{color:var(--gold-bright);font-weight:600}

/* ── guarantees: one line each, scannable in seconds, never a paragraph ─ */
.guarantees{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 clamp(28px,4vw,64px);
  border-top:1px solid var(--line)}
.g{display:flex;gap:14px;align-items:baseline;padding:16px 2px;border-bottom:1px solid var(--line)}
.g-mark{flex:0 0 auto;width:14px;height:1px;background:var(--gold);transform:translateY(-4px)}
.g-text{font-size:1rem;line-height:1.45;color:var(--ivory)}
.g-text span{color:var(--ivory-faint)}

/* ── trust ────────────────────────────────────────────────────────────── */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,3vw,44px);margin-top:12px}
.tcard h4{font-family:var(--display);font-weight:400;font-size:1.16rem;margin-bottom:11px;letter-spacing:-.01em}
.tcard p{font-size:.925rem;color:var(--ivory-mute);font-weight:300;line-height:1.62}
.tcard .bar{width:0;height:1px;background:var(--gold);margin-bottom:17px;opacity:.75;
  transition:width 720ms var(--ease) 160ms}
.trust.in .bar{width:30px}

/* ── close ────────────────────────────────────────────────────────────── */
.close{text-align:center;padding:clamp(70px,8vw,112px) 0}
.close h2{max-width:19ch;margin:0 auto 26px}
.close .lede{margin-inline:auto;text-align:center}
.close .cta-row{justify-content:center}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line-soft);padding:44px 0 56px}
footer>.wrap{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.fl{display:flex;gap:26px;flex-wrap:wrap}
.fl a{color:var(--ivory-faint);text-decoration:none;font-size:.85rem;transition:color 150ms}
.fl a:hover{color:var(--ivory-dim)}
.copyright{font-size:.8rem;color:var(--ivory-faint)}

/* ── motion: calm. opacity + a small translate, staggered. ────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* ── Role switcher: pick your profession, get one line ────────────────────
   The alternative was six paragraphs nobody reads. A busy person clicks the
   one word that describes them and reads twenty words. */
.roles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.role{font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--ivory-mute);
  padding:8px 16px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.022);
  cursor:pointer;transition:color 160ms var(--ease),border-color 160ms var(--ease),background 160ms var(--ease)}
.role:hover{color:var(--ivory)}
.role.on{color:var(--ivory);background:var(--gold-tint);border-color:var(--gold-trim)}
.pane[hidden]{display:none}
.pane{opacity:0;transform:translateY(6px);transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.pane.on{opacity:1;transform:none}
.pane-world{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:14px}
.pane-line{font-family:var(--display);font-size:clamp(1.3rem,2.5vw,1.85rem);line-height:1.28;
  letter-spacing:-.018em;color:var(--ivory);max-width:24em}
.pane-line b{font-style:italic;font-weight:400;
  background:linear-gradient(115deg,var(--gold-bright),var(--gold) 52%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── A static three-row ledger, for pages that show rather than animate ── */
.mini{margin-top:4px}
.mini .entry{padding:14px 22px}
.mini .side-a,.mini .side-b{opacity:1;transform:none}
.mini .arrow{width:26px;opacity:1}

/* ── Pricing ─────────────────────────────────────────────────────────── */
.plan{max-width:640px;margin-inline:auto;text-align:center;padding:clamp(34px,4.5vw,52px) clamp(26px,4vw,46px)}
.price{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:6px 0 4px}
.price b{font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,8vw,5rem);letter-spacing:-.035em;
  background:linear-gradient(115deg,var(--gold-bright),var(--gold) 52%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.price span{color:var(--ivory-mute);font-size:1.02rem}
.includes{text-align:left;max-width:520px;margin:32px auto 0;border-top:1px solid var(--line)}
.includes .g{padding:13px 2px}
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 clamp(28px,4vw,64px);
  border-top:1px solid var(--line)}
.faq-item{padding:20px 2px;border-bottom:1px solid var(--line)}
.faq-q{font-family:var(--display);font-size:1.06rem;letter-spacing:-.01em;margin-bottom:7px}
.faq-a{font-size:.95rem;color:var(--ivory-mute);font-weight:300;line-height:1.55}

/* ── Page hero (the non-landing pages) ───────────────────────────────── */
.phead{padding:clamp(52px,7vw,92px) 0 clamp(30px,4vw,48px)}
.phead h1{font-size:clamp(2.4rem,5.2vw,4rem);margin-bottom:20px}
.navlinks a.here{color:var(--ivory)}

/* ── Workspace mock: the two panes, discussion and document ──────────── */
.ws{display:grid;grid-template-columns:1fr 1fr;min-height:280px}
@media(max-width:640px){.ws{grid-template-columns:1fr}}
.ws-pane{padding:18px 18px 22px;min-width:0}
.ws-pane:first-child{border-right:1px solid var(--line-soft)}
@media(max-width:640px){.ws-pane:first-child{border-right:0;border-bottom:1px solid var(--line-soft)}}
.ws-doc{background:linear-gradient(180deg,rgba(198,166,103,.045),transparent)}
.ws-lbl{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:14px}
.ws-you,.ws-hank{font-size:.82rem;line-height:1.5;padding:9px 11px;border-radius:12px;margin-bottom:9px}
.ws-you{background:var(--gold-tint);border:1px solid var(--gold-trim);color:var(--ivory);border-bottom-right-radius:4px;margin-left:14px}
.ws-hank{background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--ivory-dim);border-bottom-left-radius:4px;margin-right:14px}
.ws-h1{font-family:var(--display);font-size:1.06rem;color:var(--ivory);margin-bottom:12px;letter-spacing:-.012em}
.ws-h2{font-family:var(--display);font-size:.86rem;color:var(--gold-bright);margin:11px 0 4px}
.ws-b{font-size:.8rem;color:var(--ivory-mute);line-height:1.45;padding-left:11px;position:relative}
.ws-b::before{content:"";position:absolute;left:0;top:8px;width:3px;height:3px;border-radius:100px;background:var(--gold);opacity:.7}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — the primary layout, not a fallback.
   Most people meet a product on a phone. Every decision below is a deliberate
   mobile design, not a desktop layout squeezed: the comparison grid becomes
   labelled cards (it is genuinely clearer than the desktop columns), the
   arrival→action relationship survives stacking, and every tap target is a
   real target.
   ══════════════════════════════════════════════════════════════════════ */

/* Headlines scale from the viewport, so nothing overhangs a 360px screen. */
@media(max-width:820px){
  h1{font-size:clamp(2.3rem,9vw,3.4rem)}
  h2{font-size:clamp(1.85rem,6.8vw,2.6rem)}
  h3{font-size:1.24rem}
  .row-copy h3{font-size:clamp(1.5rem,6.2vw,2rem)}
  .lede{font-size:1.02rem}
}

/* Nav: the wordmark and the one action stay on the bar; the links become a
   quiet scrollable strip beneath it rather than vanishing entirely. */
@media(max-width:860px){
  /* One bar, one row: the wordmark and the single action. The links used to
     wrap onto a second row beneath the mark, left-aligned and cramped — and
     the footer already carries every one of them, so a phone loses nothing by
     leaving them out of the bar. */
  nav>.wrap{height:62px;flex-wrap:nowrap;align-items:center;gap:14px}
  .mark{margin-right:auto;font-size:1.3rem}
  .navlinks{display:none}
}

/* Targets a thumb can actually hit, and CTAs that fill the width. */
@media(max-width:820px){
  .btn{padding:13px 22px;font-size:.95rem}
  .btn-lg{padding:15px 24px;font-size:1rem}
  .cta-row{gap:10px}
  .cta-row .btn{flex:1 1 200px;justify-content:center}
  .role{padding:11px 18px;font-size:.92rem}
}

/* The comparison, stacked as labelled cards. On a phone this reads BETTER
   than the desktop three-column version: one axis at a time, theirs then
   ours, with ours marked by the gold edge. */
@media(max-width:820px){
  .axis{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .axis-label{padding-top:0;font-size:.68rem}
  .axis-them,.axis-us{font-size:1rem}
  .axis-them::before,.axis-us::before{
    display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
    font-weight:700;margin-bottom:5px}
  .axis-them::before{content:"Email tools";color:var(--ivory-faint)}
  .axis-us::before{content:"hank";color:var(--gold-bright)}
  .axis-us{padding-left:13px;border-left:1px solid var(--gold-trim)}
}

/* The hero panel stacks, and the arrival→action relationship survives: the
   action sits indented under its arrival on a gold edge. */
@media(max-width:600px){
  .entry{grid-template-columns:1fr;gap:0;padding:15px 18px}
  .arrow{display:none}
  .side-b{margin-top:11px;padding-left:13px;border-left:1px solid var(--gold-trim)}
  .ledger-head,.ledger-foot{padding-inline:18px}
  .ledger-foot{flex-wrap:wrap;gap:10px}
  .mini .entry{padding:15px 18px}
  .surface{padding:18px 16px}
  .s-text{font-size:.87rem}
  .s-total b{font-size:1.28rem}
}

/* Stat and list blocks: single column, comfortable rhythm. */
@media(max-width:820px){
  .guarantees,.faq{grid-template-columns:1fr;gap:0}
  .g{padding:15px 2px}
  .g-text{font-size:.98rem}
  .g-text span{display:block;margin-top:3px;font-size:.92rem}
  .trust{gap:26px}
  .includes{margin-top:26px}
  .plan{padding:30px 22px}
  .price{flex-direction:column;align-items:center;gap:2px}
  .price span{font-size:.95rem}
}

/* The one centred moment holds up small — it just needs room to breathe. */
@media(max-width:820px){
  .band{padding-block:clamp(46px,11vw,68px)}
  .cycle-word{font-size:clamp(2.4rem,12vw,3.4rem)}
  .cycle-lead{font-size:1rem}
}

/* Workspace mock: the document is the payoff, so it leads on a phone. */
@media(max-width:640px){
  .ws-doc{order:-1;border-bottom:1px solid var(--line-soft)}
  .ws-pane{padding:16px 16px 18px}
}

/* Footer stacks left rather than spreading into an awkward row. */
@media(max-width:700px){
  footer>.wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .fl{gap:14px 20px}
}

/* Nothing may ever scroll sideways. */
html,body{max-width:100%;overflow-x:hidden}

/* ── The trial line — the offer sits with the price, not in the footnotes ─ */
.trial{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:8px 17px;
  border-radius:100px;background:var(--gold-tint);border:1px solid var(--gold-trim);
  font-size:.88rem;font-weight:600;color:var(--gold-bright);letter-spacing:.005em}
.trial-dot{width:5px;height:5px;border-radius:100px;background:var(--gold);
  animation:breathe 2.6s var(--ease) infinite}

/* ═══ HERO ASK — the demo, not a picture of one ═══════════════════════════ */
.hero-ask { display: flex; gap: 14px; margin: clamp(28px,5vh,52px) 0 14px; width: 100%; max-width: none; }
.hero-ask input {
  flex: 1; min-width: 0; padding: 17px 20px; border-radius: 13px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(244,239,228,.16);
  color: #F4EFE4; font: inherit; font-size: 15px; outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.hero-ask input:focus { border-color: rgba(198,166,103,.55); background: rgba(0,0,0,.36); }
.hero-ask input::placeholder { color: rgba(244,239,228,.42); }
/* Same material as the primary button, sized to the field beside it. */
.hero-ask button {
  flex: 0 0 auto; padding: 0 30px; height: 58px; border-radius: 13px; border: none;
  background: linear-gradient(180deg, #E8D3A0 0%, #D8BE84 40%, #C6A667 100%);
  color: #17130A; font: inherit; font-weight: 600; font-size: 15px; line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 1px 2px rgba(0,0,0,.30),
    0 6px 16px -8px rgba(0,0,0,.55);
  transition: filter .18s ease, transform .12s ease, box-shadow .2s ease;
}
.hero-ask button:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.hero-ask button:active:not(:disabled) { transform: translateY(1px); filter: brightness(.97); }
.hero-ask button:disabled { opacity: .5; cursor: default; }
.hero-ask input { height: 58px; padding-block: 0; }

.hero-answer {
  max-width: none; width: 100%; text-align: left; margin: 22px 0 4px; padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(198,166,103,.07), rgba(255,255,255,.012));
  border: 1px solid rgba(198,166,103,.22);
  animation: heroIn .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes heroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-answer-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 13px; color: rgba(244,239,228,.52); letter-spacing: .04em; }
.hero-h { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: rgba(198,166,103,.16); color: #C6A667; font-family: Fraunces, Georgia, serif; font-size: 14px; }
.hero-answer p { margin: 0 0 11px; font-size: 15.5px; line-height: 1.62; color: rgba(244,239,228,.84); }
.hero-answer p:last-of-type { margin-bottom: 0; }
.hero-answer .typing { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: #C6A667; animation: heroDot 1s ease-in-out infinite; }
@keyframes heroDot { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

@media (max-width: 640px) {
  .hero-ask { flex-direction: column; }
  .hero-ask button { width: 100%; }
}

/* The example, drawn over the field in champagne gold with a slow sheen. A
   placeholder cannot take a gradient, and swapping it on each delete cycle
   flashes the static prompt for a frame — which reads as a glitch. */
.hero-field { position: relative; flex: 1; display: flex; min-width: 0; }
.hero-field input { flex: 1; min-width: 0; }
.hero-ghost {
  position: absolute; left: 19px; right: 18px; top: 50%; transform: translateY(-50%);
  pointer-events: none; white-space: nowrap; overflow: hidden;
  font: inherit; font-size: 15px; line-height: 1;
  background: linear-gradient(100deg, #A98A4E 0%, #C6A667 32%, #F2DFAE 48%, #C6A667 64%, #A98A4E 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroSheen 5.5s linear infinite;
}
@keyframes heroSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.hero-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: #E2CA92; animation: heroBlink 1.05s steps(1) infinite; }
@keyframes heroBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-ghost { animation: none; } .hero-caret { animation: none; opacity: .5; } }


/* ═══ THE OPEN ════════════════════════════════════════════════════════════
   You arrive on a dark page with one line being written on it. Only when the
   headline finishes does the rest of the page arrive — the menu, the eyebrow,
   the promise, the box. It buys three seconds of attention for the one
   sentence that has to land, and everything after it feels like consequence
   rather than clutter.

   Everything below is additive: without JS, or with reduced motion, the .cine
   class is never set and the page is simply itself. */
.cine nav#nav,
.cine .hero .eyebrow,
.cine .hero .thesis,
.cine .hero .demo,
.cine .hero .lede,
.cine .hero-ask,
.cine .hero-note,
.cine .hero .cta-row,
.cine .cycle { opacity: 0; }

.cine .hero h1 { opacity: 0; }
.cine .hero h1.typing { opacity: 1; }
/* The safety net has to cover the HEADLINE too. Everything else is revealed by
   .cine-done, but the h1 was revealed only by .typing — so if the typing
   routine ever threw before it started, the four-second failsafe brought the
   whole page back except the one sentence it exists to deliver. */
.cine.cine-done .hero h1 { opacity: 1; }

/* Once the headline lands, everything arrives — staggered just enough to read
   as sequence rather than a single blunt fade. */
.cine.cine-done nav#nav,
.cine.cine-done .hero .eyebrow,
.cine.cine-done .hero .thesis,
.cine.cine-done .hero .demo,
.cine.cine-done .hero .lede,
.cine.cine-done .hero-ask,
.cine.cine-done .hero-note,
.cine.cine-done .hero .cta-row,
.cine.cine-done .cycle {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.cine .hero .eyebrow,
.cine .hero .thesis,
.cine .hero .demo,
.cine .hero .lede,
.cine .hero-ask,
.cine .hero-note,
.cine .hero .cta-row { transform: translateY(10px); }

.cine.cine-done .hero .eyebrow { transition-delay: 40ms; }
.cine.cine-done nav#nav               { transition-delay: 120ms; }
.cine.cine-done .hero .lede           { transition-delay: 180ms; }
.cine.cine-done .hero .thesis         { transition-delay: 240ms; }
.cine.cine-done .hero .demo           { transition-delay: 520ms; }
.cine.cine-done .hero-ask             { transition-delay: 860ms; }
.cine.cine-done .hero-note            { transition-delay: 1020ms; }
.cine.cine-done .hero .cta-row        { transition-delay: 860ms; }
.cine.cine-done .cycle                { transition-delay: 600ms; }

/* The cursor writing it. Gold, and gone the moment the line is finished. */
.h1-caret {
  display: inline-block; width: 3px; height: .82em; margin-left: 6px;
  vertical-align: -.04em; background: var(--gold);
  animation: h1Blink 1s steps(1) infinite;
}
@keyframes h1Blink { 0%,55% { opacity: 1; } 56%,100% { opacity: 0; } }

/* ═══ LEGAL PAGES ═════════════════════════════════════════════════════════
   Read by attorneys and business owners deciding whether to hand over a
   mailbox. Set for reading, not for skimming: a proper measure, real spacing
   between sections, and a table that stays legible on a phone. */
.legal { max-width: 46rem; margin-inline: auto; padding-bottom: clamp(56px,9vh,110px); }
.legal-meta { font-size: .82rem; color: var(--ivory-faint); letter-spacing: .02em;
  padding-bottom: 22px; margin-bottom: 34px; border-bottom: 1px solid var(--line-soft); }
.legal h2 { font-family: var(--display); font-size: 1.32rem; font-weight: 400; color: var(--ivory);
  margin: 46px 0 14px; letter-spacing: -.01em; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: 1rem; line-height: 1.72; color: var(--ivory-dim); margin: 0 0 15px; }
.legal strong { color: var(--ivory); font-weight: 600; }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(198,166,103,.4); }
.legal a:hover { text-decoration-color: var(--gold); }
.legal ul { margin: 0 0 18px; padding-left: 1.15em; }
.legal li { font-size: 1rem; line-height: 1.7; color: var(--ivory-dim); margin: 9px 0; }
.legal li::marker { color: rgba(198,166,103,.7); }
.legal-note { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  font-size: .88rem; color: var(--ivory-faint); }

.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; display: block; overflow-x: auto; }
.legal-table th { text-align: left; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; padding: 10px 14px 10px 0; border-bottom: 1px solid rgba(198,166,103,.26); }
.legal-table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line-soft);
  font-size: .93rem; line-height: 1.55; color: var(--ivory-dim); vertical-align: top; }
.legal-table tr:last-child td { border-bottom: 0; }
.tsub { display: block; font-size: .8rem; color: var(--ivory-faint); margin-top: 3px; }

/* ═══ THE THESIS ══════════════════════════════════════════════════════════
   What Hank is, in the two sentences it takes to say it properly. The
   distinction being drawn is not "it does work" — everything claims that. It
   is WHERE the understanding comes from, so the one phrase carrying that idea
   takes the display face and the gold, and nothing else on the fold does.

   Two weights: the claim, then the consequence, quieter. */
.thesis {
  max-width: 64ch; margin: clamp(28px,4.6vh,52px) auto 0;
  font-family: var(--body); font-size: clamp(1.05rem,1.35vw,1.28rem);
  line-height: 1.55; color: var(--ivory-dim); letter-spacing: -.004em;
}
.thesis em {
  font-family: var(--display); font-style: italic; font-weight: 400;
  color: var(--gold-bright); font-size: 1.1em; letter-spacing: -.01em;
}



/* ═══ THE THREE PROOFS ════════════════════════════════════════════════════
   Three columns wherever there is room — a single centred column on a wide
   display wastes it and wraps every sentence in the middle.

   The label above each is structure, not decoration: these are the three ways
   work reaches a person, and they are the only three. You instruct it,
   something arrives, or you ask. So the label earns its place, where a 01/02/03
   would have implied a sequence that does not exist.

   Trigger in the display face — it is the human's voice, or the thing landing.
   What Hank did about it sits underneath, quieter, in the body face. */
.does {
  list-style: none; padding: 0; text-align: left;
  margin: clamp(24px,3.6vh,44px) auto 0; max-width: 1180px;
  display: grid; gap: clamp(22px,2.6vw,52px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.does li { margin: 0; padding-top: 15px; border-top: 1px solid rgba(198,166,103,.30); }
.does-k {
  display: block; font-family: var(--body); font-size: .68rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 11px;
}
.does-t {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.12rem,1.35vw,1.34rem); line-height: 1.3;
  color: var(--ivory); margin: 0 0 9px; letter-spacing: -.012em;
}
.does-r {
  font-family: var(--body); font-size: clamp(.9rem,1vw,.99rem); line-height: 1.55;
  color: var(--ivory-faint); margin: 0;
}
@media (max-width: 900px) {
  .does { grid-template-columns: 1fr; max-width: 44ch; gap: 22px; }
}

/* The fold has to hold all of it. A call to action below the fold is the one
   thing a fold cannot do. */
.hero .cta-row{justify-content:center;margin-top:clamp(24px,3.4vh,40px)}
.hero-note{margin-top:clamp(12px,1.6vh,20px)}

/* ═══ THE BAR, WORKING ════════════════════════════════════════════════════
   Hank's own instruction bar, typing its way through six real jobs. The
   visitor watches; they are never asked to type. That is the whole distance
   between showing a product and running a chatbot on your front page.

   Fixed heights on both halves: an answer that is two lines followed by one
   that is three would shunt the buttons down the page every four seconds, and
   nothing reads as cheap faster than a layout that will not sit still. */
.demo { max-width: 760px; margin: clamp(38px,6vh,68px) auto 0; text-align: left; }

.demo-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 12px 0 22px; height: 62px; border-radius: 14px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(198,166,103,.34);
  box-shadow: 0 0 0 4px rgba(198,166,103,.05), 0 18px 40px -26px rgba(0,0,0,.9);
}
.demo-line {
  flex: 1; min-width: 0; display: flex; align-items: center;
  font-family: var(--body); font-size: clamp(.98rem,1.15vw,1.08rem);
  color: var(--ivory); white-space: nowrap; overflow: hidden;
}
.demo-caret {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 3px;
  background: var(--gold); flex: 0 0 auto;
  animation: demoBlink 1.05s steps(1) infinite;
}
@keyframes demoBlink { 0%,55% { opacity: 1; } 56%,100% { opacity: 0; } }
.demo-ask {
  flex: 0 0 auto; height: 42px; padding: 0 22px; border-radius: 10px;
  display: inline-flex; align-items: center;
  background: linear-gradient(180deg,#E8D3A0 0%,#D8BE84 40%,#C6A667 100%);
  color: #17130A; font-family: var(--body); font-weight: 600; font-size: .92rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.3);
}

.demo-out {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px; padding: 0 4px; min-height: 62px;
}
.demo-h {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; margin-top: 1px;
  background: rgba(198,166,103,.15); color: var(--gold);
  font-family: var(--display); font-size: .88rem;
  opacity: 0; transition: opacity 420ms var(--ease);
}
.demo-out.in .demo-h { opacity: 1; }
.demo-out p {
  margin: 0; font-family: var(--body); font-size: clamp(.95rem,1.08vw,1.04rem);
  line-height: 1.55; color: var(--ivory-dim);
  opacity: 0; transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  transform: translateY(5px);
}
.demo-out.in p { opacity: 1; transform: none; }
.demo-out b { color: var(--gold-bright); font-weight: 500; }

@media (max-width: 620px) {
  .demo-bar { height: 56px; padding-left: 16px; }
  .demo-ask { padding: 0 15px; font-size: .86rem; }
  .demo-line { font-size: .92rem; }
}

/* ═══ HANK ON THE GO ══════════════════════════════════════════════════════
   The mobile conversion page. Every call to action on a small screen lands
   here (see hank.js — the rule is enforced there, once, for every page that
   exists now or later), so it has to answer the visitor's real question:
   what is this when I am not at a desk?

   Single column at every width. The page is built for a phone, and a phone is
   where it will almost always be read — stretching it into three desktop
   columns to fill space would squeeze the one thing that does the persuading,
   which is watching an actual exchange happen. */
.otg-head .reveal { max-width: 44rem; }
.otg { padding-bottom: clamp(20px,4vw,40px); }
.otg-intro { max-width: 44rem; margin-bottom: clamp(26px,4vw,40px); }
.otg-intro h2 { margin-bottom: 12px; }
.otg-card { max-width: 860px; margin: 0 auto clamp(18px,2.6vw,26px); padding: clamp(22px,5vw,34px); border-radius: 22px; }
.otg-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.otg-kicker { display: block; margin-bottom: 6px; font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-faint); }
.otg-card h3 { font-family: var(--display); font-size: clamp(1.42rem,4.6vw,1.9rem); letter-spacing: -.02em; }
.otg-copy { max-width: 54ch; color: var(--ivory-dim); font-size: clamp(.94rem,2.6vw,1rem); }
.otg-foot { margin-top: 16px; font-size: .82rem; color: var(--ivory-faint); }

/* Status is stated, never implied. A surface that is not live says so on its
   face rather than wearing a badge that goes nowhere. */
.pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivory-faint); border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.pill-live { color: var(--gold-bright); border-color: var(--gold-trim); background: var(--gold-tint); }
.pill .live { margin-right: 0; }

/* The exchange. This is the argument the page makes — a person asking for
   something in ordinary words and getting the work back, not a feature list. */
.chat { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.bubble { max-width: 86%; padding: 11px 15px; border-radius: 17px;
  font-size: clamp(.89rem,2.5vw,.94rem); line-height: 1.52; }
.bubble.me { align-self: flex-end; border-bottom-right-radius: 6px; color: var(--ivory);
  background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.bubble.them { align-self: flex-start; border-bottom-left-radius: 6px; color: var(--ivory-dim);
  background: linear-gradient(180deg, rgba(198,166,103,.11), rgba(198,166,103,.035));
  border: 1px solid var(--gold-trim); }
.bubble b { color: var(--gold-bright); font-weight: 500; }
.who { display: block; margin-bottom: 4px; font-family: var(--display);
  font-size: .72rem; letter-spacing: .04em; color: var(--gold); }
.approve { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.approve-btn, .approve-alt { display: inline-flex; align-items: center; padding: 6px 14px;
  border-radius: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.approve-btn { color: #17130A; background: linear-gradient(180deg,#E8D3A0 0%,#D8BE84 40%,#C6A667 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.approve-alt { color: var(--ivory-mute); border: 1px solid var(--line); }

/* The iPhone notification — the whole iOS argument in one object: the thing
   that needs your word arrives, and you settle it without opening anything. */
.notif { margin-top: 20px; padding: 14px 16px; border-radius: 18px;
  background: rgba(255,255,255,.055); border: 1px solid var(--line); }
.notif-top { display: flex; justify-content: space-between; margin-bottom: 9px;
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ivory-faint); }
.notif-app { display: inline-flex; align-items: center; gap: 6px; }
.notif-mark { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px;
  background: var(--gold-tint); color: var(--gold); font-family: var(--display); font-size: .68rem; }
.notif-title { margin-bottom: 3px; font-size: .95rem; font-weight: 500; color: var(--ivory); }
.notif-body { font-size: .88rem; color: var(--ivory-dim); }
.notif-acts { display: flex; margin-top: 13px; border-top: 1px solid var(--line-soft); }
.notif-act { flex: 1; padding-top: 10px; text-align: center; font-size: .81rem;
  color: var(--gold); border-right: 1px solid var(--line-soft); }
.notif-act:last-child { border-right: 0; color: var(--ivory-mute); }

/* Not a link, and deliberately not styled as one. It becomes a real App Store
   badge the day the app is on the store, and not a day before. */
.store { display: inline-flex; align-items: center; gap: 11px; margin-top: 20px;
  padding: 9px 18px 9px 15px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.store svg { width: 22px; height: 22px; fill: var(--ivory-mute); flex: 0 0 auto; }
.store > span { display: flex; flex-direction: column; line-height: 1.16;
  font-size: 1.02rem; font-weight: 600; color: var(--ivory-dim); }
.store small { font-size: .6rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ivory-faint); }

/* What doesn't change. */
.otg-same { padding: clamp(34px,6vw,64px) 0 clamp(20px,3vw,34px); }
.otg-three { display: grid; gap: 24px; margin-top: clamp(24px,4vw,34px); }
.otg-pt { padding-left: 15px; border-left: 1px solid var(--gold-trim); }
.otg-pt h4 { margin-bottom: 7px; font-family: var(--display); font-weight: 400;
  font-size: 1.14rem; color: var(--ivory); letter-spacing: -.01em; }
.otg-pt p { font-size: .94rem; color: var(--ivory-dim); }
@media (min-width: 820px) { .otg-three { grid-template-columns: repeat(3,1fr); gap: 38px; } }

@media (max-width: 480px) {
  .otg-card-head { flex-direction: column; gap: 9px; }
  .bubble { max-width: 94%; }
  .store { width: 100%; justify-content: center; }
}


/* ═══ THE WHOLE THING ═════════════════════════════════════════════════════
   Three moves down a single spine, because this is a sequence and each move
   only makes sense on top of the one above it — not three cards racing each
   other across a row.

   Restraint is the point: 01 and 02 are quiet on purpose so that 03, which is
   the only claim nobody else can make, is the one thing the eye stops on. */
.cycle { padding: clamp(30px,5vw,60px) 0 clamp(50px,7vw,90px); }
.cycle-intro { max-width: 46rem; margin-bottom: clamp(34px,5vw,60px); }
.cycle-intro h2 { margin: 14px 0 16px; }
.cycle-intro h2 em { font-style: italic; color: var(--gold-bright); }
.cycle-intro .lede { max-width: 44ch; }

/* The spine. One hairline the three moments hang from, so the eye is walked
   down rather than left to choose an order. */
.stages { list-style: none; position: relative; padding: 0 0 0 clamp(22px,3vw,34px); margin: 0; }
.stages::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-trim) 12%, var(--gold-trim) 78%, transparent);
}
.stage { position: relative; display: grid; gap: clamp(18px,3vw,42px); padding-bottom: clamp(34px,5vw,62px); }
.stage:last-child { padding-bottom: 0; }
.stage::before {
  content: ""; position: absolute; left: calc(clamp(22px,3vw,34px) * -1); top: 9px;
  width: 7px; height: 7px; border-radius: 999px; transform: translateX(-3px);
  background: var(--gold-deep); box-shadow: 0 0 0 4px var(--obsidian);
}
/* The third node is lit, because the third move is the argument. */
.stage-proof::before { background: var(--gold-bright); box-shadow: 0 0 0 4px var(--obsidian), 0 0 14px 2px rgba(226,202,146,.45); }

.stage-n { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .26em;
  color: var(--ivory-faint); margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.stage-say h3 { font-family: var(--display); font-size: clamp(1.32rem,2.5vw,1.72rem);
  letter-spacing: -.02em; margin-bottom: 11px; }
.stage-say p { color: var(--ivory-dim); font-size: clamp(.96rem,1.15vw,1.05rem); max-width: 46ch; }
.stage-say p em { font-style: italic; color: var(--ivory); }
.stage-proof .stage-say h3 { color: var(--gold-bright); }

/* The artifact: the claim beside it, actually happening. */
.artifact { padding: clamp(15px,1.8vw,20px) clamp(16px,2vw,22px); border-radius: 15px;
  background: rgba(255,255,255,.028); border: 1px solid rgba(244,239,228,.08); }
.art-head { margin-bottom: 10px; }
.art-tag { font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivory-faint); }
.art-tag-gold { color: var(--gold-bright); }
.art-from { font-size: .78rem; color: var(--ivory-faint); letter-spacing: .02em; margin-bottom: 4px; }
.art-line { font-size: .98rem; color: var(--ivory); line-height: 1.4; }
.art-did { font-size: .95rem; color: var(--ivory-dim); line-height: 1.55; margin-bottom: 7px; }
.art-did:last-of-type { margin-bottom: 0; }
.art-did b { color: var(--gold-bright); font-weight: 500; }
.art-chip { display: inline-flex; margin-top: 9px; padding: 3px 9px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  font-size: .68rem; letter-spacing: .04em; color: var(--ivory-mute); }
.art-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: .78rem; color: var(--ivory-faint); }

/* The one place this section is allowed to be loud. */
.artifact-proof {
  background: linear-gradient(180deg, rgba(198,166,103,.10), rgba(198,166,103,.028));
  border-color: var(--gold-trim);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
}

/* The receipt. Set as data, not prose — it should read like something printed
   off a system, because that is exactly what it is. */
.proof { margin: 13px 0 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.proof div { display: flex; gap: 8px; align-items: baseline; }
.proof dt { font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ivory-faint); }
.proof dd { margin: 0; font-size: .84rem; color: var(--ivory-dim); font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
  .stage { grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); align-items: start; }
}
@media (max-width: 560px) {
  .proof { gap: 4px 18px; }
  .stages { padding-left: 20px; }
}


/* THE TWO DOORS, TOGETHER.
   Log in is quiet and Get started is gold: somebody who already has an account
   is looking for a word, and somebody who does not is looking for a button. */
.navcta { display: flex; align-items: center; gap: .6rem; }
.btn-ghost {
  background: transparent;
  color: rgba(244, 239, 228, .8);
  border: 1px solid rgba(244, 239, 228, .18);
}
.btn-ghost:hover { color: var(--ivory); border-color: rgba(198, 166, 103, .6); }
@media (max-width: 560px) {
  /* On a narrow screen the gold one is the only one that earns its space. */
  .navcta .btn-ghost { display: none; }
}


/* WHERE HANK LIVES — the download badges.
   The live one is gold-edged and the one that is not yet real stays quiet, so
   the difference is visible before anybody clicks. */
.apps { padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.apps-title { margin-bottom: .6rem; }
.apps-lede { margin-inline: auto; max-width: 40rem; }
.app-badges { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.store-live { border-color: rgba(198, 166, 103, .45); cursor: pointer; text-decoration: none; }
.store-live:hover { border-color: var(--gold); background: rgba(198, 166, 103, .07); }
.store-live svg { fill: var(--gold); }
.apps-note { margin-top: 18px; }