/* Wonderleaf welcome-2026 — shared page furniture.
   The four prototypes differ ONLY in motion language; everything structural lives here.
   Loaded after base.css. */

:root{
  /* 🔒 LOCKED Wonderleaf line style (2026-07-28): fine ink, warm parchment on night,
     1.6px, round caps, no filters/masks. Never white. */
  --line-ink:#5a3825;
  --line-ink-night:#d9c79a;
  --line-w:1.6px;
  /* art ceiling: masters are 1248x832 with no larger original. Past ~840 CSS px an
     image renders beyond its own pixels on a 2x screen. Plates stay under it. */
  --plate-max:800px;
  --night:#171b2b;
  --night-deep:#0f1220;
}

/* ---------- page rhythm ---------- */
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,44px)}
.narrow{max-width:720px;margin-inline:auto}
section{position:relative}
.band{padding:clamp(80px,11vh,150px) 0}
.band-tight{padding:clamp(52px,7vh,92px) 0}

/* night sections: art-dark, ink flips to warm parchment (never white) */
.night{background:var(--night);color:#cfc7b8}
.night .display,.night h2,.night h3{color:#f6efdf}
.night .kicker{color:var(--gold-soft)}
.night hr.rule{border-top-color:rgba(217,199,154,.26)}

/* ---------- nav ---------- */
/* iOS safe area (SOLVED once on the classic landing — inherit, never re-derive):
   the app's webview paints edge-to-edge under the status bar, so the nav pads
   by the top inset. env() is 0 everywhere else — visually inert on web. */
.nav{position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:20px;
  padding:max(22px,env(safe-area-inset-top,0px)) clamp(20px,4vw,44px) 22px}
.nav .brand{display:flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink)}
/* the leaf mark is 372x554 — NEVER set both dimensions on it. Constrain height
   only, or the brand mark ships stretched 1.49x wide (it did, on every page). */
.nav .brand img{height:26px;width:auto}
.nav .links{display:flex;align-items:center;gap:22px}
.nav .links a{font:600 14.5px var(--ui);color:var(--body);text-decoration:none}
.nav .links a:hover{color:var(--wood)}
.night .nav .brand{color:#f6efdf}
.night .nav .links a{color:#cfc7b8}
@media(max-width:720px){.nav .links a.hide-s{display:none}}

/* ---------- type scale ---------- */
.h1{font-size:clamp(40px,6.6vw,80px)}
.h2{font-size:clamp(30px,4.2vw,50px)}
.h3{font-size:clamp(23px,2.6vw,31px)}
.lede{font-family:var(--prose);font-size:clamp(17px,1.5vw,20.5px);line-height:1.62;color:var(--body)}
.night .lede{color:#c3bbac}
.prose p+p{margin-top:1.05em}

/* ---------- the plate: matted real art, never full-bleed on desktop ---------- */
.plate{position:relative;width:100%;max-width:var(--plate-max);margin-inline:auto;
  border-radius:14px;overflow:hidden;background:var(--paper-deep);
  box-shadow:0 18px 48px rgba(45,24,16,.17),0 2px 6px rgba(45,24,16,.09)}
.plate img{width:100%;height:auto;display:block}
.plate.wide{max-width:min(1100px,96vw)}          /* only for art that tolerates it */
.cap{margin-top:12px;text-align:center;font:500 14.5px var(--ui);color:var(--muted)}
.night .cap{color:#9d968a}

/* ---------- the Wonderleaf line (SVG lines only — objects are painted art) ---------- */
.wl-line{fill:none;stroke:var(--line-ink);stroke-width:var(--line-w);
  stroke-linecap:round;stroke-linejoin:round}
.night .wl-line{stroke:var(--line-ink-night)}
.wl-line.hair{stroke-width:1.1px;opacity:.55}

/* ---------- ink-fill words (scrub pages) ---------- */
.wd{transition:opacity .25s linear;opacity:1}
.js .inkfill .wd{opacity:.17}

/* ---------- question chips ---------- */
.qlist{display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center}
.q{display:inline-block;text-decoration:none;font-family:var(--prose);font-size:17px;
  color:var(--body);padding:9px 17px;border:1px solid var(--hairline);border-radius:99px;
  background:rgba(255,253,243,.6);transition:all var(--d-micro) ease}
.q:hover{color:var(--ink);border-color:var(--wood);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(45,24,16,.13)}
.night .q{color:#cfc7b8;border-color:rgba(217,199,154,.3);background:rgba(255,253,243,.05)}
.night .q:hover{color:#f6efdf;border-color:var(--line-ink-night)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(26px,4vw,54px)}
.step .n{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--wood)}
.step h3{margin-top:10px;font-family:var(--serif);font-weight:600;font-size:27px;color:var(--ink)}
.step p{margin-top:9px;font-family:var(--prose);font-size:16.5px;line-height:1.58;color:var(--body)}
.night .step h3{color:#f6efdf}.night .step p{color:#c3bbac}.night .step .n{color:var(--gold-soft)}

/* ---------- pricing ---------- */
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(22px,3vw,40px);align-items:start}
.tier{padding:30px 30px 32px;border:1px solid var(--hairline);border-radius:18px;
  background:var(--surface)}
.tier.pick{border-color:rgba(47,74,38,.45);box-shadow:0 0 0 1px rgba(47,74,38,.2)}
.tier .tname{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ink)}
.tier .tp{margin-top:4px;font:600 15px var(--ui);color:var(--wood)}
.tier ul{list-style:none;margin-top:18px;display:grid;gap:11px}
.tier li{position:relative;padding-left:26px;font-family:var(--prose);font-size:16px;
  line-height:1.5;color:var(--body)}
/* a true check: unequal arms (short left, long right), not a shallow chevron */
.tier li::before{content:"";position:absolute;left:4px;top:.34em;width:6px;height:11px;
  border-right:var(--line-w) solid var(--leaf);border-bottom:var(--line-w) solid var(--leaf);
  transform:rotate(42deg)}
.tier .go{margin-top:22px}

/* ---------- closing ---------- */
.close-q{font-family:var(--serif);font-style:italic;font-weight:500}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--hairline);padding:40px 0 66px;text-align:center}
footer.site .fl{display:flex;flex-wrap:wrap;gap:18px 26px;justify-content:center;margin-bottom:16px}
footer.site a{font:500 14.5px var(--ui);color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--wood)}
footer.site .sig{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink)}
.night footer.site{border-top-color:rgba(217,199,154,.24)}
.night footer.site .sig{color:#f6efdf}

/* ---------- lit pages: the crossing halo ----------
   While the page background passes through the mid-luminance band where no pure
   ink can reach 4.5:1, text wears a halo in the opposite direction. The band is
   crossed in well under one screen of scroll, so this is never a resting state. */
html.lo-contrast :is(#s3,#s4,#nightbeat,#gather,#riffle,#morn) :is(h1,h2,h3,p,.say,.tiny,.kicker,.sig,.q,.display,.qlink,.rf){
  text-shadow:0 0 18px rgba(251,246,233,.95)}
html.lo-contrast.on-dark :is(#s3,#s4,#nightbeat,#gather,#riffle,#morn) :is(h1,h2,h3,p,.say,.tiny,.kicker,.sig,.q,.display,.qlink,.rf){
  text-shadow:0 1px 14px rgba(12,10,20,.92)}

/* ---------- utility ---------- */
.center{text-align:center}
.stack-cta{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.center .stack-cta{justify-content:center}
.note{font:500 14.5px var(--ui);color:var(--muted)}
.night .note{color:#9d968a}
.sticky-vp{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center}