/* ============================================================================
   Homepage v6 — the onboarding system applied to the front page.
   Hero typography (one Level-2 moment, not three), header polish, and the
   living hero: moth and heron cut out of the plate and moved on their own.
   Loads last. Tokens come from onboard-system.css where present; fallbacks inline.
   ========================================================================== */
:root{--c-peach:242,173,120;--c-amber:233,176,84;--c-gold:226,184,102;--ease:cubic-bezier(.22,.7,.25,1)}

/* ---------- header ---------- */
.mast{background:linear-gradient(180deg,rgba(7,17,13,.78),rgba(7,17,13,.42));-webkit-backdrop-filter:blur(16px) saturate(1.08);backdrop-filter:blur(16px) saturate(1.08)}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(204,167,102,.18) 8%,rgba(204,167,102,.7) 34%,rgba(155,189,156,.38) 62%,transparent 92%)}
.mast .brand{position:relative}
.mast .brand .sparkle{left:-6px;top:-2px}
.nav a{letter-spacing:.18em;color:rgba(238,233,221,.72)}
.nav a::after{background:linear-gradient(90deg,#E2B866,rgba(226,184,102,.3));height:1px}
.nav a[aria-current="true"]{color:#F3EBDC}.nav a[aria-current="true"]::after{transform:scaleX(1)}
.mast .btn{min-height:44px;border-radius:10px;letter-spacing:.14em}

/* ---------- hero copy: one voice, one jewel ---------- */
.hero-copy{gap:22px}
.hero-copy .label{color:#D6A953}
.hero-copy .display{font-size:clamp(3rem,5.6vw,5.6rem);line-height:.98;letter-spacing:-.022em;margin-top:0}
.hero-copy .display .l1{display:block;color:#F1EADB}
.hero-copy .display .l2{display:block;font-style:italic;color:#F1EADB;opacity:.92}
.hero-copy .display .l3{display:block;font-style:italic;position:relative}
/* "stay human." — candy ink, not chrome. Peach→amber fill, a breath of glow, nothing bevelled. */
.hero .mword,.hero .mword.is-lit{--lx:0;--ly:0;background:linear-gradient(176deg,#FFEDE2 0%,#F4B59C 38%,#E4906F 72%,#F7C8B2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 0 16px rgba(239,167,141,.22));text-shadow:none;box-shadow:none;isolation:auto}
.hero .mword::before,.hero .mword::after{display:none!important;animation:none!important}
.hero .l3 .sparkle{right:-18px;top:.12em}
.hero-copy .lede{font-size:1.08rem;line-height:1.55;max-width:27em;color:rgba(238,233,221,.82)}
.hero-cta .btn{min-height:48px;border-radius:10px}
.hero-cta .btn--clay{background:linear-gradient(170deg,#F6C3B0 0%,#EFA78D 55%,#D98B70 100%);color:#0B1712;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,50,30,.3),0 12px 24px -14px rgba(239,167,141,.7);transition:transform .16s var(--ease),filter .16s,box-shadow .16s}
.hero-cta .btn--clay:hover{transform:translateY(-1px);filter:brightness(1.04)}
.hero-cta .btn--line{border-color:rgba(226,184,102,.55);color:#F3EBDC}
.hero-cta .btn--line:hover{border-color:rgba(226,184,102,.85);background:rgba(226,184,102,.08)}
@media(max-width:860px){.hero-copy .display{font-size:clamp(2.7rem,11.5vw,3.6rem)}.hero-copy{gap:18px}.hero .l3 .sparkle{display:none}}

/* ---------- the living plate ---------- */
/* .cut-layer is sized by JS to the rendered image rect, then given the same breathe animation
   as the plate so the cutouts stay registered while the whole scene slowly inhales. */
.cut-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;transform:scale(1.02);transform-origin:50% 50%;animation:breathe 30s ease-in-out infinite alternate}
.cut{position:absolute;background:center/contain no-repeat}
.moth-free{position:absolute;left:43%;top:29%;width:clamp(120px,10vw,170px);z-index:2;pointer-events:none}
.cut--moth{position:relative;width:100%;aspect-ratio:190/180;background-image:url(/assets/hero-moth-v3.webp);
  filter:drop-shadow(0 0 10px rgba(251,227,166,.35));transform-origin:50% 55%;animation:mothFloat 17s ease-in-out infinite}
.cut--heron{left:68.78%;top:32.94%;width:20.93%;aspect-ratio:350/430;background-image:url(/assets/hero-heron.webp);
  transform-origin:50% 100%;animation:heronSway 13s ease-in-out infinite}
/* the moth: a slow lazy figure-8, a little lift, a little tilt. Never fast, never far (≈14px). */
@keyframes mothFloat{
  0%{transform:translate(0,0) rotate(-2deg) scale(1)}
  25%{transform:translate(9px,-10px) rotate(3deg) scale(1.02)}
  50%{transform:translate(2px,-14px) rotate(-1deg) scale(1.01)}
  75%{transform:translate(-8px,-6px) rotate(-4deg) scale(.99)}
  100%{transform:translate(0,0) rotate(-2deg) scale(1)}}
/* the heron: it mostly stands. A breath, and a half-degree lean, like weight shifting foot to foot. */
@keyframes heronSway{0%,100%{transform:rotate(0) scaleY(1)}40%{transform:rotate(.45deg) scaleY(1.006)}70%{transform:rotate(-.3deg) scaleY(1.003)}}
.hero .moth-cut{display:none}
@media (prefers-reduced-motion:reduce){.cut-layer,.cut--moth,.cut--heron{animation:none!important}}
@media(max-width:860px){.cut--heron{display:none}.moth-free{display:none}}

/* ---------- sparkle (same component as the onboarding system) ---------- */
.sparkle{--s:10px;--d:0s;--t:3.6s;position:absolute;width:var(--s);height:var(--s);pointer-events:none;z-index:3;animation:sparkleTwinkle var(--t) ease-in-out var(--d) infinite}
.sparkle::before,.sparkle::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;background:radial-gradient(ellipse at center,#FFF8D9 0%,#E9BD60 38%,rgba(233,189,96,0) 72%)}
.sparkle::before{width:100%;height:28%;transform:translate(-50%,-50%)}
.sparkle::after{width:28%;height:100%;transform:translate(-50%,-50%)}
.sparkle--l{--s:16px}
@keyframes sparkleTwinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1.1) rotate(15deg)}}
@media (prefers-reduced-motion:reduce){.sparkle{animation:none;opacity:.6}}


/* ============================================================================
   Polish pass — the portal's emphasis system, scoped for the homepage.
   Minimal adaptations of onboard-system.css (not imported: its :root tokens
   would collide with the homepage's). Budget: ≤1 Level 2 per viewport,
   2 material words on the page, 1 jewel group, sparkles as punctuation.
   ========================================================================== */
/* level 1: tint + soft underglow, zero geometry change */
.text-em{--c:233,176,84;color:rgb(var(--c));text-decoration:underline;text-decoration-color:rgba(var(--c),.42);text-decoration-thickness:1px;text-underline-offset:.16em}
.text-em--amber{--c:233,176,84}.text-em--lichen{--c:155,189,156}.text-em--clay{--c:239,167,141}.text-em--pistachio{--c:168,206,120}
/* level 2: inline candy glass; the text box is the geometry, cloned across wraps */
.text-highlight{--c:233,176,84;display:inline;position:relative;color:#FFF7E6;padding:.03em .1em;margin:0 .06em;border-radius:.4em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;font-style:inherit;
  background:radial-gradient(120% 100% at 50% 130%,rgba(var(--c),.45),transparent 60%),linear-gradient(135deg,rgba(var(--c),.5) 0%,rgba(var(--c),.24) 50%,rgba(var(--c),.44) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 6px rgba(var(--c),.42),0 6px 14px -10px rgba(var(--c),.6);text-shadow:0 1px 1px rgba(0,0,0,.2)}
.text-highlight--amber{--c:233,176,84}.text-highlight--clay{--c:239,167,141}.text-highlight--mint{--c:120,214,168}.text-highlight--blue{--c:96,150,232}.text-highlight--violet{--c:142,110,214}
.phase .text-highlight{padding:.02em .1em;line-height:1.5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -2px 5px rgba(var(--c),.35),0 4px 10px -8px rgba(var(--c),.5)}
.band-head--how .text-highlight{color:#FFF7E6}
/* field notes: the pills are the story — Before in clay, After in mint; a little quieter than the statement pill */
.fx-pair figcaption .text-highlight{padding:.02em .1em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -2px 5px rgba(var(--c),.35),0 4px 10px -8px rgba(var(--c),.5);line-height:1.5}
.fx-pair figcaption .text-highlight--mint{color:#F1FBF4}
@media(max-width:640px){.text-highlight{background:none;box-shadow:none;padding:0;margin:0;border-radius:0;text-shadow:none;color:rgb(var(--c));text-decoration:underline;text-decoration-color:rgba(var(--c),.45);text-decoration-thickness:1px;text-underline-offset:.16em}}
/* candy ink, soft: for one display word */
.candy-ink-soft{background:linear-gradient(176deg,#FFEDE2 0%,#EFA78D 45%,#E9C77B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(239,167,141,.14))}
/* champagne material for the price: pale gold, cool highlight, no bevel */
.price-big b{font-weight:400}
.mword-champagne{background:linear-gradient(178deg,#FFF8E6 0%,#F0D89C 42%,#D9B35C 72%,#FFF0CC 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 0 12px rgba(226,184,102,.16))}
/* jewel-sm: the journey's milestones (amber → blue → violet → mint) */
.jewel{--j:226,184,102;display:inline-grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.62),rgba(255,255,255,0) 40%),radial-gradient(circle at 50% 112%,rgba(255,255,255,.3),rgba(255,255,255,0) 50%),linear-gradient(160deg,rgba(var(--j),1) 0%,rgba(var(--j),.72) 60%,rgba(var(--j),.95) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 2px 3px rgba(255,255,255,.3),inset 0 -5px 9px rgba(0,0,0,.42),0 1px 2px rgba(0,0,0,.5)}
.jewel-sm{width:18px;height:18px}
.jewel-amber{--j:233,176,84}.jewel-blue{--j:96,150,232}.jewel-violet{--j:142,110,214}.jewel-mint{--j:120,214,168}
.jm.jewel{border:0;background-color:transparent;margin:-9px 0 0 -9px}
.journey.is-in .jm.jewel{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 2px 3px rgba(255,255,255,.3),inset 0 -5px 9px rgba(0,0,0,.42),0 1px 2px rgba(0,0,0,.5),0 0 14px rgba(var(--j),.45)}
.journey.is-in .jm--last.jewel{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 2px 3px rgba(255,255,255,.35),inset 0 -5px 9px rgba(0,0,0,.42),0 1px 2px rgba(0,0,0,.5),0 0 26px rgba(120,214,168,.7),0 0 56px rgba(226,184,102,.3)}
.journey-art .sparkle{display:none}
.journey.is-in .journey-art .sparkle{display:block}
@media(max-width:760px){
  .phase:nth-child(1)::before{--j:233,176,84}.phase:nth-child(2)::before{--j:96,150,232}.phase:nth-child(3)::before{--j:142,110,214}.phase:nth-child(4)::before{--j:120,214,168}
  .phase::before{border:0;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.62),rgba(255,255,255,0) 40%),linear-gradient(160deg,rgba(var(--j),1),rgba(var(--j),.72));box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 -4px 7px rgba(0,0,0,.4),0 0 12px rgba(var(--j),.45)}
  .phase:last-child::before{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.7),rgba(255,255,255,0) 40%),linear-gradient(160deg,rgba(120,214,168,1),rgba(120,214,168,.75));box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 -4px 7px rgba(0,0,0,.4),0 0 20px rgba(120,214,168,.7)}}
/* field notes: the After label reads as the good side */
.fx-pair figure:last-child figcaption b{color:#A9D08E}
/* CTA: a sparkle only when hovered or focused */
.price-cta{position:relative;overflow:visible}
.sparkle--hover{display:none;right:-6px;top:-6px;--s:8px}
.price-cta:hover .sparkle--hover,.price-cta:focus-visible .sparkle--hover{display:block}
@media (prefers-reduced-motion:reduce){.sparkle--hover{display:none!important}}

/* background-clip:text clips to the box; the tight line-height cut the descender of "Stay human." Give the word room, take it back with margins. */
.hero-copy .display .mword{padding:.06em .1em .24em .04em;margin:-.06em -.1em -.24em -.04em}