/* ============================================================
   Loopn — The Night Desk  ·  blend: green hero + warm body + green Sunday
   Static marketing site. No framework, no tracker.

   THE WORLD: you arrive at night (green hero, one gold lamp), step into
   a warm, light, airy day (the body — the world Loopn already owns), and
   the Sunday letter is the one place the night returns, so the paper glows.

   COGNITIVELY LIGHT is the governing rule: few things per screen, air,
   one idea at a time.

   PALETTE (LOCKED, founder 2026-07-12/14): warm-white + gold by default,
   deep forest-green as the night accent (hero, Sunday, footer). Green +
   gold only — never a third hue, never a cool/blue dark. See FOUNDERS-THEME.md.

   VOICE: the witness KEEPS, it never analyses. No clinical words on the
   site (no "patterns", no "analysis", no "insights", no "tracking").
   ============================================================ */

:root{
  /* fonts + sizing */
  --fd:"Fraunces",Georgia,"Times New Roman",serif;
  --fb:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1080px; --radius:22px; --radius-lg:28px;

  /* gold — the lamplight (brand-locked, unchanged) */
  --gold:#C8A165; --gold-tint:#E4CFA4; --gold-soft:#D9BE8C; --gold-deep:#A78649; --gold-shade:#7A5F30;
  --gold-rgb:200,161,101;

  /* the letter (brand-locked): warm paper */
  --paper:#F4EFE6; --paper-lite:#FBF6EB; --ink:#181612; --ink-soft:#2A251C; --ink-meta:#6B6353;

  /* green night ground (forest family — the night accent) */
  --forest-deeper:#14211B; --forest-deep:#1C2F27; --forest-raised:#223627; --forest-abyss:#0F1915;
  --cream:#FAF8F2; --cream-rgb:250,248,242;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--fb);font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:var(--gold-deep);text-underline-offset:3px}
:focus-visible{outline:2px solid rgba(var(--gold-rgb),.85);outline-offset:3px;border-radius:4px}
.container{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto;position:relative;z-index:1}
.visually-hidden{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:-999px;top:0;z-index:100;background:var(--gold);color:var(--forest-abyss);padding:.6rem 1rem;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

/* ============================================================
   ZONES — the whole warm/green blend lives here
   ============================================================ */
.zone{position:relative;background:var(--bg);color:var(--fg);padding:clamp(3.25rem,8vw,6rem) 0;overflow-x:clip}
/* overflow-x:clip: the decorative glow pseudos (.fold-stage::before inset
   -13% -17%, .hero-bindu-wrap::before inset -160%) extend far past their
   boxes and were inflating html scrollWidth at every width below ~1024px
   (28-98px of silent horizontal overflow). Their gradients fade to
   transparent before the band edge, so clipping paints identically. */
.zone-warm{
  --bg:var(--cream); --fg:var(--ink); --fg-soft:#4A443B; --fg-dim:#6B665B;
  --card-bg:var(--paper); --card-bd:rgba(var(--gold-rgb),.30); --eyebrow:var(--gold-shade); --rule:rgba(24,22,18,.12);
}
.zone-warm-deep{
  --bg:#ECE4D2; --fg:var(--ink); --fg-soft:#4A443B; --fg-dim:#6B665B;
  --card-bg:var(--paper-lite); --card-bd:rgba(var(--gold-rgb),.30); --eyebrow:var(--gold-shade); --rule:rgba(24,22,18,.12);
}
.zone-green{
  --bg:var(--forest-deeper); --fg:var(--cream); --fg-soft:rgba(var(--cream-rgb),.82); --fg-dim:rgba(var(--cream-rgb),.6);
  --card-bg:rgba(var(--cream-rgb),.05); --card-bd:rgba(var(--gold-rgb),.22); --eyebrow:var(--gold); --rule:rgba(var(--gold-rgb),.28);
}
/* the single gold lamp — only in green zones */
.zone-green .lamp{position:absolute;inset:0 0 auto 0;height:min(96vh,860px);pointer-events:none;z-index:0;
  background:radial-gradient(54% 44% at 50% -6%,rgba(var(--gold-rgb),.16),transparent 66%),
             radial-gradient(38% 30% at 14% 8%,rgba(45,74,62,.5),transparent 72%)}

/* ============================================================
   HEADER — adaptive: transparent + cream over the green hero,
   warm + ink once you scroll into the body.
   ============================================================ */
/* FIXED (overlays the green hero, so transparent shows GREEN not the warm body
   below it) + a subtle top-down scrim so the nav/wordmark read clearly. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(180deg,rgba(8,13,10,.58),rgba(8,13,10,.14) 62%,transparent);
  border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease;
  --hd-fg:var(--cream);--hd-soft:rgba(var(--cream-rgb),.9)}
.site-header.scrolled{background:rgba(250,248,242,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:rgba(24,22,18,.08);--hd-fg:var(--ink);--hd-soft:#4A443B}
/* LAYOUT + SHRINK replicate main exactly: links anchor right, the lockup is
   absolutely CENTRED, and the whole lockup shrinks IN PLACE once past 80px
   (row 100→76, mark 60→40, wordmark 52→32). It never travels. */
/* LEFT LOCKUP — final: the lockup anchors the LEFT edge, links + pill the right.
   Reason (founder): a centred lockup competes with the hero headline on the same
   centre axis. The lockup still shrinks IN PLACE on scroll (never travels), and
   the bindu keeps its scaled-up size + breathing.
   The nav still spans main's measured container (max-width 1280px, padding 0 40px
   / 24px mobile) with main's link metrics — that is what puts the lockup on a true
   left edge and the pill on a true right edge. Body keeps its narrower --wrap. */
.site-header .container{width:100%;max-width:1280px;padding:0 40px}
@media (max-width:767px){.site-header .container{padding:0 24px}}
.header-inner{height:100px;display:flex;align-items:center;justify-content:space-between;position:relative;transition:height .3s cubic-bezier(.2,.6,.2,1)}
.brand-lockup{display:inline-flex;align-items:center;gap:18px;text-decoration:none;color:var(--hd-fg)}
/* bindu scaled up from main's 60px so the ripple actually reads (it rippling is
   our departure; main's is static, where 60px was fine). Present, not billboard. */
.brand-lockup .bindu{width:80px;height:80px;flex:none;transition:width .3s ease,height .3s ease}
.brand-lockup .nav-wordmark{height:52px;width:auto;transition:height .3s ease}
.nav-wordmark .wm-letters{fill:var(--hd-fg)}
/* shrunk past 80px — main's steps, with the bindu scaled to match its new size */
.site-header.is-shrunk .header-inner{height:76px}
.site-header.is-shrunk .brand-lockup .bindu{width:54px;height:54px}
.site-header.is-shrunk .brand-lockup .nav-wordmark{height:32px}
/* mobile: STACK — the desktop two-side layout can't hold four links plus
   the lockup at phone width (they wrapped into colliding rows over the
   hero — the launch-readiness blocker). Lockup centred on its own row,
   one tightened nowrap link row beneath; the shrink state keeps the same
   stack (heights are auto, nothing to step). Verified at 390px and 360px. */
@media (max-width:767px){
  .header-inner{height:auto;flex-direction:column;justify-content:center;gap:8px;padding:10px 0 12px}
  .brand-lockup{gap:12px}
  .brand-lockup .bindu{width:44px;height:44px}
  .brand-lockup .nav-wordmark{height:26px}
  /* .site-header prefix: the base .site-nav rules sit LATER in the file,
     so equal-specificity media overrides here would lose the cascade */
  .site-header .site-nav{gap:10px;flex-wrap:nowrap;justify-content:center}
  .site-header .site-nav a{font-size:12px;white-space:nowrap}
  .site-header .nav-cta{padding:5px 10px;font-size:11.5px}
}
/* very narrow phones (<=359px): the one-row stack needs ~20px more */
@media (max-width:359px){
  .site-header .site-nav{gap:7px}
  .site-header .site-nav a{font-size:11px}
  .site-header .nav-cta{padding:4px 8px;font-size:10.5px}
  .site-header.is-shrunk .header-inner{height:auto}
  .site-header.is-shrunk .brand-lockup .bindu{width:44px;height:44px}
  .site-header.is-shrunk .brand-lockup .nav-wordmark{height:26px}
}
/* link spacing + pill measured from main: gap 28px, links 14px, pill 10/20px @13px */
.site-nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.site-nav a{font-size:14px;font-weight:500;color:var(--hd-soft);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--gold-deep)}
.site-header:not(.scrolled) .site-nav a:hover,.site-header:not(.scrolled) .site-nav a[aria-current=page]{color:var(--gold-tint)}
.nav-cta{border:1px solid rgba(var(--gold-rgb),.5);border-radius:999px;padding:10px 20px;font-size:13px;font-weight:500;color:var(--hd-fg)}
.nav-cta:hover{background:rgba(var(--gold-rgb),.12)}

/* ============================================================
   TYPE + SHARED
   ============================================================ */
.eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:1rem}
.gild{color:var(--gold)}
@supports (background-clip:text){.gild{background:linear-gradient(112deg,var(--gold-tint) 8%,var(--gold) 52%,var(--gold-deep) 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}}
/* On the green night the darker gold stops read faint next to the cream words.
   Brighten the stops + a whisper of glow so the gilded words match the cream's
   legibility — without dropping the gilded treatment. (Warm zones keep the
   deeper gold, which reads correctly on warm-white.) */
.zone-green .gild{background-image:linear-gradient(112deg,#F6EACB 6%,#EAD5A6 48%,#D3B074 96%)}
.emph{font-style:italic;color:var(--gold-shade)}
.zone-green .emph{color:var(--gold-tint)}
.lede{font-size:clamp(1.05rem,2.1vw,1.2rem);color:var(--fg-soft);max-width:40em}
.dim{color:var(--fg-dim)}
h1,h2,h3{font-family:var(--fd);font-weight:420;line-height:1.12;letter-spacing:-.015em;color:var(--fg);margin:0 0 1rem}
.section-head{max-width:44em;margin:0 auto clamp(2rem,5vw,3rem)}
.section-head.centered{text-align:center}
.section-head h2,.h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.85rem,4.4vw,3rem);letter-spacing:-.02em;color:var(--fg);margin:0 0 1rem}
.hairline{border:0;height:1px;margin:0;background:linear-gradient(90deg,transparent,var(--rule),transparent)}

/* ============================================================
   HERO (green)
   ============================================================ */
.hero{text-align:center;padding:clamp(5.5rem,10vw,8rem) 0 clamp(3rem,6vw,5rem)}
.hero .lede{margin:0 auto}
/* The headline is width-driven on roomy screens but ALSO height-aware: min(vw,vh)
   eases it down on short viewports, which is what buys the seal its new size while
   keeping the badges above the fold. Desktop is unchanged (still caps at 5.6rem). */
.hero h1{font-size:clamp(2.6rem,min(7.6vw,9vh),5.6rem);font-weight:380;line-height:1.05;letter-spacing:-.025em;max-width:15em;margin:0 auto clamp(.85rem,2.1vh,1.4rem)}
.hero-bindu-wrap{position:relative;display:inline-block;margin:0 auto 2rem}
.hero-bindu-wrap::before{content:"";position:absolute;inset:-160%;background:radial-gradient(closest-side,rgba(var(--gold-rgb),.22),transparent 72%);pointer-events:none}
.hero-bindu{width:clamp(64px,9vw,88px);height:auto;position:relative}
.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--card-bd);border-radius:999px;padding:.4rem 1rem;font-size:.82rem;color:var(--fg-soft);margin-bottom:1.8rem}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* bindu sizes (animation lives in the Tempo C block below — the retired
   4.8s "breathe" rule is gone so no stray consumer can inherit an
   off-tempo pulse; every animated bindu rides the app's calm) */
.bindu{width:44px;height:44px}.bindu-sm{width:30px;height:30px}

/* buttons */
.btn,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.85rem 1.7rem;font-family:var(--fb);font-size:1rem;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn{background:linear-gradient(160deg,var(--gold-soft),var(--gold) 70%);color:var(--forest-abyss);box-shadow:0 6px 24px rgba(var(--gold-rgb),.24)}
.btn:hover{color:var(--forest-abyss);box-shadow:0 10px 32px rgba(var(--gold-rgb),.34)}
.btn-ghost{background:transparent;border-color:rgba(var(--gold-rgb),.45);color:var(--fg)}
.btn-ghost:hover{color:var(--fg);background:rgba(var(--gold-rgb),.10)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.btn:hover,.btn-ghost:hover{transform:translateY(-2px)}}
.cta-row{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

/* chips */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:2.2rem}
.chip{border:1px solid var(--card-bd);border-radius:999px;padding:.42rem 1rem;font-size:.85rem;color:var(--fg-soft)}

/* ---------- THE FIRST SCREEN IS FULLY GREEN ----------
   The night owns the ENTIRE first viewport; the warm body starts only below the
   fold — no warm band may leak in at any common laptop height. (This supersedes
   the earlier "shallow night / cream peeks at the fold" idea.)
   100dvh tracks mobile browser chrome so nothing leaks there either; 100vh is the
   fallback. The content is centred in the screen and spaced with real air, so it
   inhabits the green rather than huddling at the top. */
.hero-shallow{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(7rem,12vh,8.5rem) 0 clamp(2.5rem,6vh,4rem);
}
/* Ultra-tall phones (Razr-class ~22:9; founder device finding): centring the
   fixed content stack pools a dead band under the store badges. On screens
   taller than the design target, DISTRIBUTE instead: headline/lede stay
   upper, the seal floats in the slack (block auto margins), CTA + badges
   anchor to the bottom padding. svh (not dvh) so the Android URL bar can't
   add phantom height. Gated ≥860px tall so 844-class phones and desktop
   render exactly as before. */
@media (max-width:767px) and (min-height:860px){
  .hero-shallow{min-height:100vh;min-height:100svh}
  .hero-shallow .container{flex:1;display:flex;flex-direction:column;justify-content:flex-start}
  .hero-shallow .hero-seal{margin:auto}
}

/* ---------- store badges — official style, quieted, launching-soon, link to early access ---------- */
.store-row{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:clamp(1.6rem,3.6vh,2.5rem)}
.store-soon{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
.store-soon .d{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.badges{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.badge-app{display:inline-flex;align-items:center;gap:.65rem;border-radius:11px;padding:.5rem 1rem .55rem;text-decoration:none;background:#0E1712;border:1px solid rgba(var(--gold-rgb),.30);box-shadow:0 6px 18px rgba(8,12,10,.28);opacity:.94;transition:opacity .2s,transform .2s,border-color .2s}
.badge-app:hover{opacity:1;transform:translateY(-1px);border-color:rgba(var(--gold-rgb),.5)}
.badge-app .mk{width:22px;height:24px;flex:none;fill:#FAF8F2}
.badge-app .tx{display:flex;flex-direction:column;line-height:1.05;color:#FAF8F2}
.badge-app .tx small{font-size:.58rem;letter-spacing:.03em;opacity:.82;font-weight:400}
.badge-app .tx b{font-family:var(--fd);font-weight:500;font-size:1.02rem;letter-spacing:.01em}

/* ---------- the slim strip a screen down — relocated chips + sample-letter link ---------- */
.under-hero{padding:clamp(1.7rem,4vw,2.6rem) 0}
.under-hero .container{text-align:center}
.under-hero .chips{margin-top:0}
.under-hero .sample-link{margin:1.1rem 0 0;font-size:.92rem}
.under-hero .sample-link a{color:var(--gold-shade);font-weight:500}

/* ============================================================
   YOUR PEOPLE, YOUR FEELINGS  (warm) — the standing rule + the
   real kept-week moments, together. The witness line states it;
   the moments show it.
   ============================================================ */
.pf-rule{text-align:center;max-width:26em;margin:0 auto clamp(1.6rem,4vw,2.4rem)}
.pf-rule .line{font-family:var(--fd);font-weight:400;font-size:clamp(1.7rem,4.4vw,2.9rem);letter-spacing:-.02em;color:var(--fg);margin:0}
.pf-rule .line b{font-weight:400;color:var(--gold-shade)}
.pf-sub{text-align:center;color:var(--fg-soft);max-width:38em;margin:0 auto clamp(2rem,4vw,2.8rem)}

.kept{max-width:680px;margin:0 auto}
.kept-note{text-align:center;font-size:.8rem;color:var(--fg-dim);margin:1.3rem 0 0}
.bloom-garden{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.bloom{flex:0 1 auto}
.bloom.is-open{flex:1 1 100%}
.bloom-chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--card-bd);background:var(--card-bg);border-radius:999px;padding:.5rem 1.05rem;font-family:var(--fb);font-size:.9rem;font-weight:500;color:var(--fg);cursor:pointer;transition:border-color .25s,background .25s}
.bloom-chip:hover{border-color:rgba(var(--gold-rgb),.5)}
.bloom-chip .spark{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.bloom-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease;width:100%}
.bloom.is-open .bloom-fold{grid-template-rows:1fr;margin-top:.8rem}
.bloom-fold>div{overflow:hidden}
.bloom-card{text-align:left;background:var(--card-bg);border:1px solid var(--card-bd);border-radius:16px;padding:1.1rem 1.3rem}
.bloom-card p{font-size:.96rem;color:var(--fg);margin:0 0 .5rem}
.bloom-card p.k-meta{font-size:.78rem;color:var(--fg-dim);margin:0}
@media (prefers-reduced-motion:reduce){.bloom-fold{transition:none}}

/* ============================================================
   CARDS + GRIDS
   ============================================================ */
.card{background:var(--card-bg);border:1px solid var(--card-bd);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem);transition:transform .3s,border-color .3s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.card.lift:hover{transform:translateY(-4px);border-color:rgba(var(--gold-rgb),.5)}}
.card h3{font-size:1.3rem;font-weight:460;margin:0 0 .5rem}
.card p{color:var(--fg-soft);margin:0}
.card .tag{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:.7rem}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1.2rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1.2rem}

/* two-ways-in sample exchange (light, on the card — no heavy phone chrome) */
.mock{margin-top:1.3rem;display:grid;gap:.5rem}
.bub{border-radius:14px;padding:.58rem .82rem;font-size:.86rem;line-height:1.5;max-width:92%}
.bub-user{background:rgba(var(--gold-rgb),.16);color:var(--fg);justify-self:end;border-bottom-right-radius:4px}
.bub-ai{background:var(--card-bg);border:1px solid var(--card-bd);color:var(--fg);border-bottom-left-radius:4px}
.entry-title{font-family:var(--fd);font-size:.98rem;color:var(--fg);margin:0 0 .3rem}
.entry-line{font-size:.9rem;color:var(--fg-soft);margin:0 0 .7rem}
.skl{height:8px;border-radius:4px;background:rgba(24,22,18,.08);margin-bottom:.5rem}
.skl-gold{background:rgba(var(--gold-rgb),.3)}
.w-90{width:90%}.w-75{width:75%}.w-60{width:60%}.w-40{width:40%}
.mock-cap{font-size:.72rem;color:var(--fg-dim);margin:.7rem 0 0}

/* ============================================================
   THE FILM STAGE — dark green object on warm (a screen)
   Composite: generated plate = mood only; real UI + marks overlaid
   in edit; the film is made during the beta (honest placeholder).
   ============================================================ */
.film{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(var(--gold-rgb),.35);
  background:radial-gradient(60% 80% at 50% 30%,rgba(var(--gold-rgb),.14),transparent 70%),linear-gradient(180deg,var(--forest-deep),var(--forest-abyss));
  box-shadow:0 30px 70px rgba(15,25,21,.28);display:grid;place-items:center;text-align:center}
.film-play{display:inline-flex;flex-direction:column;align-items:center;gap:1rem;background:none;border:0;cursor:pointer;color:var(--cream);padding:1.5rem}
.film-play .disc{width:74px;height:74px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.4);background:rgba(var(--cream-rgb),.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;box-shadow:0 0 40px rgba(var(--gold-rgb),.2);transition:transform .25s}
.film-play .disc svg{width:26px;height:26px;margin-left:4px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.film-play:hover .disc{transform:scale(1.06)}}
.film-play .film-label{font-size:.9rem;color:rgba(var(--cream-rgb),.82)}
.film-note{max-width:30em;padding:2rem;color:rgba(var(--cream-rgb),.85);font-family:var(--fd);font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.6}
.film-note[hidden]{display:none}
.mock-caption{font-size:.78rem;color:var(--fg-dim);text-align:center;margin:.9rem 0 0}

/* ============================================================
   APP WALKTHROUGH — real screenshot slots (placeholder frames
   sized for real screens). Show, don't describe: one light line each.
   ============================================================ */
.walk{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:clamp(1.4rem,4vw,2.4rem);max-width:960px;margin-inline:auto}
.walk-item{text-align:center}
.frame{width:min(248px,100%);margin:0 auto 1.1rem;aspect-ratio:9/19.5;border-radius:30px;border:1px solid rgba(var(--gold-rgb),.28);
  background:linear-gradient(180deg,var(--forest-raised),var(--forest-abyss));position:relative;overflow:hidden;
  box-shadow:0 20px 50px rgba(15,25,21,.22),inset 0 1px 0 rgba(var(--cream-rgb),.06)}
.frame::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:34%;height:5px;border-radius:3px;background:rgba(var(--cream-rgb),.18)}
.frame .slot{position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem;text-align:center}
.frame .slot span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--gold-rgb),.55)}
.frame .bindu{width:30px;height:30px;opacity:.5;margin-bottom:.7rem}
.frame .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.walk-item h3{font-size:1.12rem;font-weight:460;margin:0 0 .3rem}
.walk-item p{color:var(--fg-soft);margin:0;font-size:.95rem}

/* ============================================================
   THE LETTER — warm paper, the one light object
   ============================================================ */
/* teaser (homepage green Sunday band) */
.letter-tease{background:var(--paper);color:var(--ink-soft);border-radius:16px;padding:1.6rem 1.8rem;max-width:560px;margin:0 auto;position:relative;
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),.4),0 0 50px rgba(var(--gold-rgb),.18),0 30px 70px rgba(8,12,10,.5)}
.letter-tease .tag{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-shade);margin-bottom:.7rem}
.letter-tease blockquote{margin:0 0 .9rem;font-family:var(--fd);font-style:italic;font-size:1.1rem;line-height:1.7;color:var(--ink-soft)}
.letter-tease a{color:var(--gold-shade);font-weight:500}
.letter-halo{position:relative}
.letter-halo::before{content:"";position:absolute;inset:-14% -18%;background:radial-gradient(52% 52% at 50% 45%,rgba(var(--gold-rgb),.22),transparent 72%);pointer-events:none}

/* THE FOLDED LETTER — a real sheet, folded in thirds, opened and set on the
   night. Built to the direction-2 reference: each of the three panels carries
   its own light angle (bright just under its fold, shading down into the next
   crease), and each crease is a shadow line chased by a BRIGHT cream ridge — so
   the paper reads as physically bent, not printed flat. Restraint holds: the
   ink text stays fully readable. Used in BOTH places (homepage + letter page). */
.fold-stage{position:relative;max-width:600px;margin-inline:auto}
.fold-stage::before{content:"";position:absolute;inset:-13% -17%;background:radial-gradient(52% 52% at 50% 42%,rgba(var(--gold-rgb),.22),transparent 72%);pointer-events:none}
.fold-letter{
  position:relative;z-index:1;isolation:isolate;overflow:hidden;color:var(--ink-soft);border-radius:4px;
  padding:clamp(2.2rem,5.2vw,3.6rem) clamp(1.9rem,4.6vw,3rem);
  /* three panels, each lit from its own fold: bright just under the crease
     above, shading down into the crease below — the accordion of an opened letter */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 22%,
      rgba(24,22,18,.060) 33.0%,
      rgba(255,255,255,.11) 34.4%, rgba(255,255,255,.01) 52%,
      rgba(24,22,18,.055) 66.4%,
      rgba(255,255,255,.13) 67.8%, rgba(255,255,255,.02) 88%, rgba(255,255,255,0) 100%),
    var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 0 1px rgba(122,95,48,.16),
    0 3px 5px rgba(8,12,10,.3),
    0 0 55px rgba(var(--gold-rgb),.16),
    0 48px 96px rgba(8,12,10,.64);
}
/* faint paper fibre — self-contained SVG noise, low opacity, multiply */
.fold-letter::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px}
/* the two creases — a shadow line chased by a bright cream ridge (d2 reference) */
.fold-letter::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(24,22,18,0) 32.2%,rgba(24,22,18,.10) 33.0%,rgba(250,248,242,.62) 33.7%,rgba(24,22,18,0) 35.4%),
    linear-gradient(180deg,rgba(24,22,18,0) 65.6%,rgba(24,22,18,.10) 66.4%,rgba(250,248,242,.62) 67.1%,rgba(24,22,18,0) 68.8%)}
/* the writing sits on top of the fibre + creases */
.fold-letter>.l-meta,.fold-letter>.sal,.fold-letter>.l-body,.fold-letter>.signoff,.fold-letter>.monogram,.fold-letter>.l-more{position:relative;z-index:2}
.fold-letter .l-more{margin:1.9rem 0 0;text-align:center}
.fold-letter .l-more a{color:var(--gold-shade);font-weight:500}
/* a tasteful settle: the sheet straightens as it comes into view (motion+JS gated) */
@media (prefers-reduced-motion:no-preference){
  body.js .fold-stage .fold-letter{transform:rotate(-.55deg);transition:transform .9s cubic-bezier(.22,.7,.25,1)}
  body.js .fold-stage.in .fold-letter{transform:rotate(0)}
}
.fold-letter .l-meta{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.8rem}
.fold-letter .l-tag{font-family:var(--fb);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-shade);border:1px solid rgba(122,95,48,.45);border-radius:999px;padding:.3rem .8rem}
.fold-letter .l-when{font-family:var(--fb);font-size:.8rem;color:var(--ink-meta)}
.fold-letter .sal{font-family:var(--fd);font-style:italic;font-size:clamp(1.25rem,2.6vw,1.5rem);color:var(--ink);margin:0 0 1.3rem}
.fold-letter .l-body p{font-family:var(--fd);font-weight:400;font-size:clamp(1rem,2vw,1.12rem);line-height:1.85;color:var(--ink-soft);margin:0 0 1.3rem}
.fold-letter .signoff{font-family:var(--fd);font-style:italic;color:var(--ink);margin-top:1.6rem}
.fold-letter .monogram{display:flex;justify-content:center;margin-top:2.4rem}
.fold-letter .monogram svg{width:62px;height:62px}
.fold-note{text-align:center;font-size:.85rem;color:var(--fg-dim);margin:1.4rem 0 0}
.fold-note a{color:var(--gold-tint);font-weight:500}

/* ---------- the homepage Sunday FRAGMENT — CROP, DON'T SHRINK ----------
   A letter is for reading; an unreadable letter is a prop. So instead of
   miniaturising the whole letter, we show its OPENING at genuine body-reading
   size on the same locked folded paper (direction-2 ridges, soft edge), and let
   it fade at the bottom edge as if the rest sits below the fold. No tap-to-
   expand, no modal — the whole letter has its own page.
   The section height follows the fragment; the fragment is never squeezed. */
.fold-stage.is-fragment{max-width:720px}
.fold-letter.fragment{padding-bottom:0}
.fold-letter.fragment .sal{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:1.05rem}
.fold-letter.fragment .l-body{
  font-size:clamp(1.1rem,1.45vw,1.28rem);   /* true reading size — holds on mobile */
  max-height:14em;                           /* ~8 lines, then it fades away */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.4) 84%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.4) 84%,transparent 100%);
}
.fold-letter.fragment .l-body p{font-size:inherit;line-height:1.8;margin:0 0 1.05em}
/* mobile: fewer lines is fine — tiny text is not */
@media (max-width:767px){.fold-letter.fragment .l-body{max-height:12.2em}}

/* ============================================================
   MECHANICS (how-it-works) + AVAILABILITY (launch) + CTA + FORMS
   ============================================================ */
.mech-list{display:grid;gap:1.2rem}
.mech{display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.4rem;align-items:start}
.mech-num{font-family:var(--fd);font-size:1.05rem;color:var(--gold-deep);border:1px solid var(--card-bd);border-radius:999px;width:2.6rem;height:2.6rem;display:grid;place-items:center;background:var(--card-bg)}
.mech h3{font-size:clamp(1.25rem,2.6vw,1.55rem);font-weight:440;margin:0 0 .45rem}
.mech p{color:var(--fg-soft);max-width:56ch;margin:0}
@media (max-width:560px){.mech{grid-template-columns:1fr}}

.avail-card{display:flex;flex-direction:column;gap:.2rem}
.avail-badge{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:.28rem .75rem;margin-bottom:.9rem;color:var(--forest-abyss);background:linear-gradient(160deg,var(--gold-soft),var(--gold))}

.cta-panel{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--card-bd);text-align:center;padding:clamp(2.4rem,7vw,4.2rem) clamp(1.5rem,5vw,3.4rem);
  background:radial-gradient(70% 90% at 50% 115%,rgba(var(--gold-rgb),.16),transparent 65%),var(--card-bg)}
.cta-panel h2{max-width:18em;margin-inline:auto}
.cta-panel .lede{margin:0 auto 2rem;text-align:center}

.form-card{max-width:560px;margin-inline:auto}
.field{margin-bottom:1.2rem;text-align:left}
.field label{display:block;font-size:.86rem;font-weight:700;color:var(--fg);margin-bottom:.45rem}
.field .hint{font-weight:400;color:var(--fg-dim)}
.field input,.field textarea{width:100%;background:var(--card-bg);border:1px solid var(--card-bd);border-radius:12px;color:var(--fg);font-family:var(--fb);font-size:1rem;padding:.8rem 1rem;transition:border-color .25s}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:rgba(var(--gold-rgb),.7);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.16)}
.form-note{font-size:.8rem;color:var(--fg-dim);margin:.9rem 0 0;text-align:center}
.form-status{font-size:.9rem;color:var(--gold-deep);margin:.9rem 0 0;min-height:1.2em;text-align:center}

/* ============================================================
   FOOTER (green) + PAGE HEROES (inner pages, green)
   ============================================================ */
.site-footer{position:relative;background:var(--forest-abyss);color:var(--cream);border-top:1px solid rgba(var(--gold-rgb),.14);padding:3rem 0 2.5rem}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center}
.footer-brand{display:flex;align-items:center;gap:.7rem;font-family:var(--fd);font-size:1.05rem;color:var(--cream)}
.footer-nav{display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:center}
.footer-nav a{font-size:.88rem;color:rgba(var(--cream-rgb),.7);text-decoration:none}
.footer-nav a:hover{color:var(--gold-tint)}
.footer-note{font-size:.82rem;color:rgba(var(--cream-rgb),.6);margin:0}

.page-hero{text-align:center;padding:clamp(7rem,10vw,7.5rem) 0 clamp(2rem,5vw,3.4rem)}
.page-hero h1{font-size:clamp(2.3rem,6.2vw,4.2rem);font-weight:390;letter-spacing:-.025em;margin:0 0 1.1rem}
.page-hero .lede{margin-inline:auto}

/* ============================================================
   REVEAL — motion + JS gated. No-JS / reduced-motion = fully lit.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  body.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  body.js .reveal.in{opacity:1;transform:none}
}

/* ============================================================
   HERO RIPPLE BINDU — retimed to the APP's tuned ripple (Tempo C), which
   supersedes the old site 4s pulse (founder review round, 2026-07-17).
   ============================================================ */
.hero-mark{width:96px;height:96px;flex:none;position:relative;display:block;margin:0 auto 1.9rem}
/* NOTE 1: the rings are concentric (all cx/cy 512), so with
   transform-box:fill-box each ring's own box is centred on the dot and
   transform-origin:center makes every ripple emanate from it.
   NOTE 2 (deliberate departure, founder's call): BOTH the hero mark and the
   nav lockup's bindu share these rules, so they ripple identically.
   Reduced-motion gets the static intermediate-ring fallback. */
.hero-mark .core,.brand-lockup .bindu .core{fill:var(--gold)}
/* TEMPO C — the app's tuned ripple (apps/mobile RippleBindu / web RippleBindu,
   DECISIONS 2026-06-14; founder: the site must match the app's calm):
   rings BORN AT DOT SIZE (r=40, same as the core), 10.5s cycle, thirds
   stagger (0/-3.5/-7s), scale 1→5.4, opacity .45→.16@60%→0, easing
   cubic-bezier(.2,.6,.3,1). Stroke 1.5 in the app's 400 viewBox ≈ 3.84 in
   this 1024 box; it scales with the ring, exactly as the app's does.
   No-motion base = each ring frozen at the intermediate position its
   stagger implies (the app's static formula). */
.hero-mark .ring,.brand-lockup .bindu .ring{fill:none;stroke:var(--gold);stroke-width:3.84;transform-origin:center;transform-box:fill-box}
.hero-mark .ring.r1,.brand-lockup .bindu .ring.r1{transform:scale(1);opacity:.45}
.hero-mark .ring.r2,.brand-lockup .bindu .ring.r2{transform:scale(2.47);opacity:.32}
.hero-mark .ring.r3,.brand-lockup .bindu .ring.r3{transform:scale(3.93);opacity:.18}
@media (prefers-reduced-motion:no-preference){
  .hero-mark .ring,.brand-lockup .bindu .ring{animation:ripple 10.5s cubic-bezier(.2,.6,.3,1) infinite}
  .hero-mark .ring.r2,.brand-lockup .bindu .ring.r2{animation-delay:-3.5s}
  .hero-mark .ring.r3,.brand-lockup .bindu .ring.r3{animation-delay:-7s}
  @keyframes ripple{
    0%{transform:scale(1);opacity:.45}
    60%{opacity:.16}
    100%{transform:scale(5.4);opacity:0}
  }
}
@media (max-width:767px){.hero-mark{width:80px;height:80px}}

/* ---------- the hero seal — the CENTREPIECE of the middle zone ----------
   The monument name is gone (the nav lockup is the sole name-carrier), so this is
   the page's breathing mark. Raised ceiling: 170px on desktop, easing down on
   short viewports so the full-green first screen never overflows and the badges
   never slip below the fold. The air below it is deliberately larger than the air
   above — that is what pushes the button + badges into the lower band without any
   fixed-pixel nudge. Reduced-motion's static rings scale with it (pure geometry). */
.hero-seal{width:clamp(110px,17vh,170px);height:clamp(110px,17vh,170px);margin:clamp(1.9rem,5vh,3.8rem) auto clamp(2.4rem,6.5vh,5rem)}
@media (max-width:767px){.hero-seal{width:clamp(92px,14vh,124px);height:clamp(92px,14vh,124px);margin:clamp(1.4rem,3.4vh,2rem) auto clamp(1.6rem,4vh,2.4rem)}}

/* ============================================================
   CARRIED FROM THE LIVE SITE (main), adapted to the blend + lightness
   ============================================================ */
/* THE MEMORY — the language-shift arc (aisha), the moat shown not told */
.arc-card{max-width:840px;margin-inline:auto}
.arc-head{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--fg-dim);margin-bottom:1.3rem}
.arc-head .dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.arc svg{width:100%;height:auto;display:block}
.arc .thread{fill:none;stroke:#2D4A3E;stroke-width:2}
.arc .thread-base{fill:none;stroke:rgba(24,22,18,.12);stroke-width:2}
.arc-note{margin:1.5rem 0 0;font-size:.96rem;color:var(--fg-soft);max-width:54ch}

/* IT IS / IT ISN'T — two columns, plain vs struck (format from main, copy new) */
.isnt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.8rem,5vw,3.4rem)}
@media (max-width:620px){.isnt-grid{grid-template-columns:1fr;gap:2.2rem}}
.isnt-col h3{font-family:var(--fd);font-weight:400;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;margin:0 0 1.4rem;color:var(--fg)}
.isnt-col h3 .em{font-style:italic}
.isnt-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;font-size:clamp(1.05rem,1.8vw,1.24rem);line-height:1.42;color:var(--fg)}
.isnt-list.rej li{color:var(--fg-dim)}
.isnt-list .strike{text-decoration:line-through}