/* ============================================================
   Glimpse — consumer landing page styles (canonical build).
   *** DESKTOP BUILD — optimized for desktop. ***
   Mobile is a SEPARATE build; the ≤940px rules are a minimal fallback.
   PERF INVARIANTS (do not regress): no body::after grain, no filter:blur,
   no backdrop-filter, no fixed+will-change full-viewport layer. Tokens inlined.
   ============================================================ */

:root{
  --navy:#0A3F59; --pine:#3B7A79; --grass:#8FBF9A; --sky:#A6C8E4; --berry:#8F4A69;
  --coral:#EE8E77; --amber:#DDAF74; --peach:#F3C3A9; --lilac:#C7A9CB; --sage:#BBD3C1;
  --ink:#3A3530; --cream:#FBF6EF; --muted:#8A7F74;
  --w-lilac:#F3ECF3; --w-peach:#FBEDE3; --w-amber:#F8EFDD; --w-sage:#EEF4EE; --w-sky:#EAF2F8;
  --s1:0 2px 10px rgba(120,95,70,.06);
  --s2:0 18px 44px -20px rgba(120,95,70,.18);
  --s3:0 40px 88px -34px rgba(120,95,70,.26);
  --font-display:'Marcellus',Georgia,'Times New Roman',serif;
  --font-web:'Sen',sans-serif;
  --font-body:'Mulish',var(--font-web),sans-serif;
  --font-sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --radius-pill:999px;
  --text-secondary:var(--muted); --surface-subtle:rgba(240,240,240,.5); --border-subtle:rgba(58,53,48,.08);
  --tint-peach:#FBEDE3; --tint-amber:#F8EFDD;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--coral);text-decoration:none}
a:hover{color:var(--berry)}
img{display:block;max-width:100%}
::selection{background:var(--tint-peach)}

/* ---- ambient background: just cream (no ambient blobs) ---- */
.aurora,.warmth{display:none}

/* ---- top nav (blended scrim, NO backdrop-filter) ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.8rem}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 54px);z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(251,246,239,.94),rgba(251,246,239,.62) 42%,rgba(251,246,239,0))}
.nav-left{display:flex;align-items:center;gap:2rem}
.nav-brand{display:flex;align-items:center}
.nav-brand img{height:27px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.5rem}
.nav-links a{position:relative;color:var(--muted);font-size:.92rem;font-weight:600;letter-spacing:.005em;transition:color .25s}
.nav-links a:hover{color:var(--berry)}
.nav-links a.active{color:var(--berry)}
.nav-cta{background:var(--pine);color:#fff;font-weight:700;font-size:.9rem;padding:.62rem 1.25rem;border-radius:var(--radius-pill);box-shadow:0 8px 20px rgba(37,107,109,.32);transition:transform .2s,box-shadow .3s,filter .3s}
.nav-cta:hover{color:#fff;filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 12px 26px rgba(37,107,109,.36)}
.se-btn.se-btn-nav{font-size:.92rem;padding:.5rem 1.3rem;gap:0;background:rgba(255,250,247,.9)}
.nav-toggle{display:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-web);font-weight:700;font-size:1rem;padding:.95rem 1.7rem;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:transform .2s,box-shadow .3s,filter .3s;white-space:nowrap}
.btn-primary{background:var(--pine);color:#fff;box-shadow:0 12px 28px rgba(37,107,109,.34)}
.btn-primary:hover{filter:brightness(1.04);color:#fff;transform:translateY(-2px);box-shadow:0 18px 36px rgba(37,107,109,.38)}
.btn-grass{background:var(--pine);color:#fff;box-shadow:0 12px 28px rgba(37,107,109,.34)}
.btn-grass:hover{filter:brightness(1.04);color:#fff;transform:translateY(-2px);box-shadow:0 18px 36px rgba(37,107,109,.38)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(31,31,31,.16)}
.btn-ghost:hover{color:var(--berry);box-shadow:inset 0 0 0 1.5px rgba(143,27,81,.45);transform:translateY(-2px)}

/* ---- layout rhythm & type ---- */
main{position:relative;z-index:1}
.section{padding:6.5rem 1.8rem;position:relative}
.wrap{max-width:1140px;margin:0 auto;width:100%}
.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--berry)}
.eyebrow.coral{color:var(--coral)}.eyebrow.lilac{color:#9b6ea6}.eyebrow.amber{color:#c07d1f}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.005em;line-height:1.08;text-wrap:balance}
.h-hero{font-size:clamp(2.6rem,5.1vw,5.3rem)}
.h-xl{font-size:clamp(2.1rem,4.2vw,3.4rem)}
.lede{font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.6;color:var(--muted);max-width:44ch;text-wrap:pretty}
.t-coral{color:var(--coral)}.c{color:var(--coral)}.g{color:var(--coral)}

/* ---- static hero + outcomes (business.html / makers.html subpages) ---- */
.hero{padding-top:9.5rem;min-height:88vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1.5rem}
.hero .h-hero{font-size:clamp(2.9rem,7vw,5.2rem)}
.hero .lede{max-width:42ch}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;align-items:center}
.h-lg{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.outcomes{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;max-width:960px;margin:2.4rem auto 0}
.outcome{font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:600;color:var(--ink);padding:.9rem 1.4rem;border-radius:var(--radius-pill)}
.outcome.o1{background:#FBEDE3}.outcome.o2{background:#FBE6DE}.outcome.o3{background:#F3ECF3}.outcome.o4{background:#F8EFDD}.outcome.o5{background:#EAF2F8}.outcome.o6{background:#F9E4D8}

/* ============================================================
   HERO — animated (chaos feed → sunset bloom → resolved)
   ============================================================ */
.hero-track{position:relative;height:165vh}
.hero-anim{position:sticky;top:0;display:flex;align-items:center;height:100vh;overflow:hidden;padding:8.5rem max(3.5rem,(100vw - 1400px) / 2) 4rem}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;max-width:min(54%,880px);margin-left:0;opacity:0;transform:translateY(16px);transition:opacity .9s ease .15s,transform .9s ease .15s}
.hero-anim.resolved .hero-copy{opacity:1;transform:none}
.h-hero{line-height:1.05}
.hero-sub{margin-top:1.3rem;font-family:var(--font-body);font-size:clamp(1.15rem,1.9vw,1.65rem);font-weight:600;color:var(--muted);white-space:nowrap}

/* chaos layer (NO filter:blur — brightness only) */
.chaos{position:absolute;inset:0;z-index:2;background:#0E1115;overflow:hidden;transition:background-color 1.3s ease,opacity .75s ease}
.chaos-feed{position:absolute;left:0;top:0;width:100%;display:flex;gap:22px;justify-content:center;align-items:flex-start;opacity:.94;filter:blur(3px) brightness(.9);will-change:transform;backface-visibility:hidden}
.chaos-col{display:flex;flex-direction:column;gap:16px;width:296px;flex:none}
.chaos-tint{position:absolute;inset:0;z-index:1;background:radial-gradient(64% 60% at 50% 46%,rgba(14,17,21,0),rgba(14,17,21,.66) 84%)}
.hero-anim.burst .chaos{background-color:#FFFAF7}
.hero-anim.burst .chaos-feed{opacity:0}
.hero-anim.resolved .chaos{opacity:0}

/* feed cards */
.fcard{position:relative;background:#191C22;border:1px solid #262B34;border-radius:14px;overflow:hidden;color:#E4E7EB;font-family:var(--font-sys)}
.fc-media{width:100%;background-size:cover;background-position:center;background-color:#20242B}
.fc-full{padding:0}
.fc-bleed{position:absolute;inset:0;height:100%}
.fc-row{display:flex;align-items:center;gap:8px;padding:9px 11px}
.fc-av{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;background-color:#2A2F38;flex:none}
.fc-av.sm{width:20px;height:20px}
.fc-h{font-size:12.5px;font-weight:700;color:#EEF1F4}
.fc-sp{margin-left:auto;font-size:10px;color:#8A929C;letter-spacing:.02em}
.fc-foot{padding:9px 11px;font-size:12px;color:#B9C0C8}
.fc-inline,.fc-news{display:flex;align-items:center;gap:8px}
.fc-tag{font-size:10px;font-weight:800;letter-spacing:.03em;color:#fff;padding:2px 7px;border-radius:5px;text-transform:uppercase;flex:none}
.fc-sale{background:#E24A2A}
.fc-blare{background:#C0392B}
.fc-price{font-size:15px;font-weight:800;color:#fff}
.fc-was{font-size:12px;color:#7B828A;text-decoration:line-through}
.fc-urg{margin-left:auto;font-size:11px;font-weight:800;color:#E24A2A}
.fc-head{font-size:14px;font-weight:700;color:#E4E7EB;line-height:1.3;text-wrap:pretty}
.fc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;z-index:2}
.fc-ov{position:absolute;left:0;right:0;z-index:2;display:flex;align-items:center;gap:8px;padding:11px 12px;color:#fff}
.fc-ov-b{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.fc-ov-l{top:0;bottom:0;align-items:center;justify-content:flex-start;background:linear-gradient(90deg,rgba(0,0,0,.66),transparent 80%)}
.fc-col{flex-direction:column;align-items:flex-start;gap:2px}
.fc-name{font-size:15px;font-weight:800}
.fc-dist{font-size:12px;opacity:.85}
.fc-slog{font-weight:900;font-size:14px;line-height:1.15;max-width:80%;text-transform:uppercase;letter-spacing:.01em}

/* push banners (real licensed logos; solid cards) */
.banners{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;transition:opacity 1s ease}
.hero-anim.burst .banners{opacity:0}
.banner{position:absolute;bottom:38%;width:420px;max-width:78vw;display:flex;align-items:center;gap:13px;background:rgba(250,250,252,.98);border-radius:20px;padding:13px 16px;box-shadow:0 22px 48px -14px rgba(0,0,0,.5);font-family:var(--font-sys);-webkit-font-smoothing:antialiased;will-change:transform,opacity}
.bic{width:44px;height:44px;border-radius:12px;overflow:hidden;flex:none;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.bic img{width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box;display:block}
.bmain{min-width:0}
.bhead{display:flex;align-items:baseline;gap:8px}
.bname{font-size:14.5px;font-weight:600;color:#1a1a1a;letter-spacing:-.01em}
.btime{font-size:12.5px;color:#8A929C}
.bm{font-size:15px;color:#33373d;line-height:1.3;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes bannerup{0%{transform:translate(-50%,86px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate(-50%,-196px);opacity:0}}

/* sunset bloom (radial gradient, no blur) */
.sunburst{position:absolute;top:50%;left:50%;z-index:4;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;opacity:0;background:radial-gradient(circle at 50% 50%,#FFF9EE 0%,#FFE7C4 22%,#FE7769 46%,#F3B14A 64%,#C79ABF 82%,#5E76A6 100%);transition:transform 1.4s cubic-bezier(.2,.7,.15,1),opacity 1.5s ease}
.hero-anim.burst .sunburst{opacity:1;transform:scale(72)}
.hero-anim.resolved .sunburst{opacity:0}

/* Glimpse notification (SF Pro; solid, NO backdrop-filter) */
.gnotif{position:absolute;z-index:5;top:50%;left:50%;width:508px;max-width:90%;margin-left:-254px;transform:translateY(-50%) scale(.82);opacity:0;transition:transform 1s cubic-bezier(.22,.9,.28,1),opacity .6s ease}
.hero-anim.showg .gnotif{opacity:1;transform:translateY(-50%) scale(1)}
.hero-anim.resolved .gnotif{opacity:1;transform:translate(calc(50vw - max(3.5rem,(100vw - 1400px) / 2) - 254px),-50%) scale(1)}
.noti-stack{display:grid}
.noti-stack>.noti-card{grid-area:1/1;align-self:center;opacity:0;transform:translateY(-34px) scale(.94);pointer-events:none;transition:opacity .34s ease,transform .5s cubic-bezier(.2,.9,.25,1.35)}
.noti-stack>.noti-card.n-show{opacity:1;transform:none;pointer-events:auto}
.noti-stack>.noti-card.n-out{opacity:0;transform:translateY(-26px) scale(.97);transition:opacity .3s ease,transform .3s ease}
.noti-card{display:flex;gap:14px;align-items:flex-start;background:rgba(252,250,248,.98);border-radius:26px;padding:21px 23px;box-shadow:0 30px 70px -26px rgba(60,48,40,.55),0 2px 10px rgba(60,48,40,.14);font-family:var(--font-sys);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em}
.noti-icon{width:64px;height:64px;border-radius:16px;background:#fff;padding:7px;box-shadow:0 2px 8px rgba(60,48,40,.16);flex:none;display:flex;align-items:center;justify-content:center}
.noti-icon img{width:100%;height:100%}
.noti-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.noti-top{display:flex;align-items:baseline;gap:8px}
.noti-title{font-size:17px;font-weight:600;color:#000;letter-spacing:-.014em}
.noti-time{margin-left:auto;font-size:15px;font-weight:400;color:#8A8177}
.noti-body{font-size:17px;line-height:1.34;font-weight:400;color:#1a1a1a;letter-spacing:-.014em}

/* ============================================================
   LIFESCAPE — scroll-driven pastel fresco (hover bubbles + tags)
   ============================================================ */
.scape{position:relative;height:1400vh;background:transparent}
.scape-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
/* fresco + veil + trail = viewport-fixed layers behind the content (children of main; no will-change/blur) */
.scape-bg{--fresco:url(fresco.jpg?v=9);position:fixed;inset:0;z-index:-2;background-image:var(--fresco),linear-gradient(160deg,#FBE7D6,#F7C7A2 28%,#C79ABF 64%,#5E76A6);background-size:cover;background-position:center;opacity:0;transform:scale(1.06)}
.scape-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(125% 95% at 50% 38%,rgba(255,250,247,0) 42%,rgba(255,250,247,.28) 100%)}
/* MOBILE focus layers — built by hero.js inside .scape-bg on mobile only (z-index puts
   them above .scape-bg::after). .scape-dim greys the LOWER band where the five elements
   live (the top vista — arches, sky, sea — keeps its original paint); each .lit-patch is
   a soft-masked cutout of the SAME image, registered pixel-for-pixel over the element it
   belongs to, so the only thing dimmed is the paint AROUND the elements, to emphasise them. */
.scape-dim{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(to bottom,rgba(251,246,239,0) 0%,rgba(251,246,239,0) 40%,rgba(251,246,239,.5) 60%,rgba(251,246,239,.72) 100%);transition:opacity 1.9s cubic-bezier(.33,0,.2,1)}
.scape-lit{position:absolute;inset:0;z-index:2;pointer-events:none}
.lit-patch{position:absolute;opacity:0;background-image:var(--fresco);background-repeat:no-repeat;-webkit-mask-image:radial-gradient(closest-side,#000 0 46%,rgba(0,0,0,.9) 58%,rgba(0,0,0,.55) 76%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(closest-side,#000 0 46%,rgba(0,0,0,.9) 58%,rgba(0,0,0,.55) 76%,rgba(0,0,0,.2) 90%,rgba(0,0,0,0) 100%);transition:opacity 1.25s ease,filter .65s ease}
.scape-focus .scape-dim{opacity:1}
.scape-focus .lit-patch{opacity:1;transition-delay:var(--pd,0s),0s}       /* stagger in, never out */
.cap-open .lit-patch:not(.patch-on){filter:opacity(.58)}                  /* reading a label: the other four ease back */
@property --spot-x{syntax:"<percentage>";inherits:false;initial-value:50%}
@property --spot-y{syntax:"<percentage>";inherits:false;initial-value:50%}
/* spotlight: the active figure stays lit; the rest greys with a soft blended edge (no hard line) */
.scape-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;--spot-x:50%;--spot-y:50%;--spot-r:14vw;background:radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y),rgba(249,245,239,0) 0%,rgba(249,245,239,0) 24%,rgba(249,245,239,.06) 35%,rgba(249,245,239,.16) 46%,rgba(249,245,239,.3) 57%,rgba(249,245,239,.46) 68%,rgba(249,245,239,.62) 79%,rgba(249,245,239,.76) 90%,rgba(249,245,239,.85) 100%);transition:opacity .5s ease,--spot-x .55s ease,--spot-y .55s ease}
body:has(.scape-pin.pin-on) .scape-veil{opacity:1}
.scape-trail{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.scape-title{position:absolute;z-index:4;top:13%;left:50%;transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;font-family:var(--font-display);font-size:clamp(3.2rem,6.2vw,5.8rem);line-height:1.02;color:var(--ink);white-space:nowrap;text-align:center;text-shadow:0 2px 26px rgba(255,248,240,.85),0 1px 4px rgba(255,248,240,.9);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.3,1)}
.scape-title.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* hotspots: halo glows on the figure; caption is centered in the open sky, one at a time as you scroll */
.scape-pin{position:absolute;z-index:4;width:200px;height:200px;margin:-100px 0 0 -100px;opacity:1;pointer-events:none}
.pin-halo{display:none}                 /* desktop: no halos — the travelling spotlight marks the figure */
.scape-hint,.scape-scrim{display:none}  /* mobile-only elements (present in mobile.html) */
.pin-cap{position:fixed;z-index:6;left:50%;top:18%;transform:translateX(-50%) translateY(16px);width:max-content;max-width:min(94vw,1040px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;opacity:0;pointer-events:none;transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.scape-pin.pin-on .pin-cap{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.pc-title{font-family:var(--font-display);font-size:clamp(3.2rem,6.2vw,5.8rem);line-height:1.02;text-shadow:0 2px 24px rgba(255,248,240,.92),0 1px 4px rgba(255,248,240,.95)}
.pc-line{font-family:var(--font-body);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.32;color:var(--ink);max-width:32ch;text-shadow:0 1px 10px rgba(255,248,240,.95)}
.pc-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.75rem;max-width:54ch}
.pc-tag{font-size:1.1rem;font-weight:600;color:var(--ink);background:rgba(255,255,255,.78);box-shadow:inset 0 0 0 1px rgba(120,95,70,.14);padding:.52rem 1.25rem;border-radius:999px;white-space:nowrap}
.pc-link{margin-top:1rem;font-size:1.02rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--pine);pointer-events:auto;text-shadow:0 1px 10px rgba(255,248,240,.9)}
.pc-link:hover{color:var(--berry)}
.scape-enter{position:absolute;z-index:5;left:50%;bottom:7%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.85rem;opacity:0;pointer-events:none;transition:opacity .8s ease}
.se-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:1.1rem;font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,1.9vw,1.65rem);letter-spacing:.01em;color:var(--ink);background:rgba(255,250,247,.78);border:1.5px solid rgba(58,53,48,.28);border-radius:var(--radius-pill);padding:1.05rem 2.4rem;cursor:pointer;transition:color .45s ease,border-color .45s ease}
.se-btn::before{content:"";position:absolute;inset:0;z-index:0;background:var(--pine);transform:translateY(101%);transition:transform .55s cubic-bezier(.62,0,.2,1)}
.se-btn:hover{color:#fff;border-color:var(--pine)}
.se-btn:hover::before{transform:translateY(0)}
.se-txt{position:relative;z-index:1}

/* ============================================================
   DEMO — interactive iframe (lazy-attached)
   ============================================================ */
.demo-sec{background:linear-gradient(180deg,transparent,rgba(238,224,240,.4) 46%,transparent)}
.demo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem}
.demo-stage{position:relative;width:100%;max-width:430px;margin:1rem auto 0;display:flex;justify-content:center}
/* live app in a compact phone shell */
.phone-ph{position:relative;z-index:1;width:414px;max-width:100%;margin:0 auto;aspect-ratio:414 / 868;border-radius:56px;background:#111319;padding:2.9%;box-shadow:0 38px 78px -48px rgba(60,48,40,.42)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:linear-gradient(172deg,#FBE7D6,#F7C7A2 34%,#C79ABF 68%,#5E76A6);display:flex;flex-direction:column;align-items:center}
.demo-frame{display:block;width:100%;height:100%;border:0;background:#f9f5ef}

/* ============================================================
   CTA + footer
   ============================================================ */
.cta{background:linear-gradient(180deg,transparent,var(--tint-peach) 56%,var(--tint-amber) 100%);text-align:center}
.waitlist{display:flex;gap:.6rem;max-width:500px;width:100%;flex-wrap:wrap;justify-content:center;margin:1.6rem auto 1rem}
.waitlist input{flex:1;min-width:240px;padding:1rem 1.3rem;font-family:var(--font-web);font-size:1rem;border:none;background:rgba(255,255,255,.92);color:var(--ink);border-radius:var(--radius-pill);outline:none;box-shadow:inset 0 0 0 1.5px rgba(31,31,31,.12)}
.waitlist input:focus{box-shadow:inset 0 0 0 2px var(--coral)}
.waitlist input::placeholder{color:var(--muted);font-style:italic}
.cta-note{font-size:.95rem;color:var(--navy);font-style:italic}

footer{position:relative;z-index:1;padding:3.5rem 1.8rem 2.6rem;text-align:center;background:var(--surface-subtle);border-top:1px solid var(--border-subtle)}
.foot-inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.foot-inner img{height:30px}
.foot-nav{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;justify-content:center;font-size:.82rem}
.foot-nav a{color:var(--muted);font-weight:600}
.foot-nav a:hover{color:var(--pine)}
.foot-copy{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.foot-bless{font-style:italic;font-size:.9rem;color:var(--navy)}

/* ============================================================
   Scroll reveal (progressive enhancement — hidden only with JS)
   ============================================================ */
.js-reveal .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.visible{opacity:1;transform:none}
.reveal.shown{opacity:1!important;transform:none!important;transition:none!important}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:940px){
  .nav{display:none} /* MOBILE: no top bar — the notification owns the top */
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;right:1rem;left:1rem;flex-direction:column;gap:1.1rem;background:rgba(255,250,247,.98);padding:1.3rem 1.4rem;border-radius:1.2rem;box-shadow:0 24px 50px -24px rgba(60,48,40,.5)}
  .nav-toggle{display:inline-flex;background:transparent;border:none;cursor:pointer;color:var(--ink)}
  .se-btn.se-btn-nav{display:none} /* MOBILE: drop the nav CTA; the hamburger carries the menu */
  .section{padding:4.8rem 1.4rem}
  /* ---- MOBILE hero: dark full-screen intro stage — feed scrolls up while push
     banners cascade down; sunset bloom to cream; notification docks at the top;
     headline fades in centered beneath it ---- */
  .hero-track{height:100vh;height:100dvh}
  .hero-anim{position:relative;display:block;height:100vh;height:100dvh;min-height:100dvh;overflow:hidden;padding:0}
  .hero-copy{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:96%;max-width:560px;height:32dvh;justify-content:space-between;align-items:center;text-align:center;opacity:0}
  .hero-anim.resolved .hero-copy{opacity:1;transform:translate(-50%,-50%)}
  .h-hero{font-size:34px;line-height:1.24}
  .hero-sub{white-space:normal;font-size:18px;line-height:1.5}
  /* Glimpse notification: SAME width + placement as the spam banners, sitting on top of
     them (z-index 5 > 3), sliding in from the top edge like a real iOS banner */
  .gnotif{width:calc(100vw - 16px);max-width:none;left:50%;top:calc(12px + env(safe-area-inset-top,0px));margin-left:0;opacity:0;transform:translate(-50%,-280%);transition:transform .72s cubic-bezier(.2,.9,.28,1),opacity .4s ease}
  .hero-anim.showg .gnotif{opacity:1;transform:translate(-50%,0)}
  .hero-anim.resolved .gnotif{opacity:1;transform:translate(-50%,0)}
  .noti-card{padding:15px 17px;gap:11px;border-radius:20px}
  .noti-body{font-size:14px;line-height:1.36}
  .banners{overflow:visible}
  .banner{width:calc(100vw - 16px);max-width:none;bottom:auto;animation:bannerDrop .72s ease forwards!important}
  .hero-anim.burst .chaos,.hero-anim.burst .banners{opacity:0}
  .hero-anim.resolved .chaos,.hero-anim.resolved .banners,.hero-anim.resolved .sunburst{opacity:0;pointer-events:none}
  /* ---- MOBILE feed: TikTok-style — one column of full-screen posts, not a dashboard ---- */
  .chaos-feed{flex-direction:column;gap:0;width:100vw;filter:blur(2px) brightness(.82)}
  .chaos-col{width:100vw}
  .tik-post{width:100vw;height:100vh;height:100dvh;background-size:cover;background-position:center}
  /* ---- MOBILE lifescape: portrait fresco (JS drives opacity: cream hero, fresco
     renders in as scrolling begins). NO caption tour and NO travelling spotlight —
     once the fresco has fully landed, every part of the painting that ISN'T one of
     the five elements hazes gently toward cream, leaving the elements pronounced,
     each marked by a small halo you can tap for its label. Anchors live in
     mobile.html: data-fx/fy = element centre, data-fr = lit radius, data-hr = halo
     radius, data-hx/hy = halo placement (all fractions of the fresco's width/height;
     FRESCO_AR is portrait in hero.js) ---- */
  .scape{height:340vh}                  /* tap-to-explore, not a long scroll tour */
  .scape-bg{--fresco:url(fresco-mobile.jpg?v=10)}
  .scape-veil{display:none}             /* the haze replaces the spotlight here */
  /* iOS: pin the fixed fresco/veil/trail to the large (stable) viewport height so the
     image doesn't resize/re-crop ("move") when Safari's address bar toggles on scroll */
  .scape-bg,.scape-veil,.scape-trail{bottom:auto;height:100vh;height:100lvh}
  .demo-stage{width:min(92vw,348px)}
  /* ---- tappable element halos (JS sets --hs ring size, --ht touch size, --d stagger) ---- */
  .scape-pin{position:fixed;width:0;height:0;margin:0}
  .pin-halo{display:block;position:absolute;left:0;top:0;width:var(--ht,68px);height:var(--ht,68px);padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(1.16);transition:opacity .95s ease,transform 1.15s cubic-bezier(.2,.8,.3,1),filter .5s ease}
  /* a small bead of light on each element's telling detail — the sax, the journal,
     the bouquet, the bread being handed over, the gesture between the two friends.
     Warm-white rim + faint ink edge so it reads on both pale haze and painted areas. */
  .pin-halo::before{content:"";position:absolute;left:50%;top:50%;width:var(--hs,38px);height:var(--hs,38px);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,252,246,.4) 0%,rgba(255,250,240,.25) 44%,rgba(255,248,234,.08) 74%,rgba(255,248,234,0) 100%);box-shadow:inset 0 0 0 1.1px rgba(255,254,250,.62),0 0 0 1px rgba(126,96,74,.14),0 0 18px 6px rgba(255,232,200,.3);animation:haloBreathe 5.4s ease-in-out infinite;animation-delay:var(--bd,0s);transition:box-shadow .6s ease,background .6s ease}
  .scape-focus .pin-halo{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);transition-delay:var(--d,0s),var(--d,0s),0s}
  .cap-open .scape-pin:not(.pin-on) .pin-halo{filter:opacity(.26)}
  .scape-pin.pin-on .pin-halo::before{background:radial-gradient(circle,rgba(255,253,248,.58) 0%,rgba(255,251,243,.36) 44%,rgba(255,248,234,.12) 74%,rgba(255,248,234,0) 100%);box-shadow:inset 0 0 0 1.3px rgba(255,255,252,.85),0 0 0 1px rgba(126,96,74,.18),0 0 26px 9px rgba(255,226,190,.45)}
  /* ---- "tap to look closer" (fades away for good after the first tap) + tap-away scrim ---- */
  .scape-hint{display:block;position:absolute;z-index:4;left:50%;top:19.5%;transform:translateX(-50%);opacity:0;pointer-events:none;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap;text-shadow:0 1px 10px rgba(255,248,240,.95);transition:opacity 1.1s ease}
  .scape-hinting .scape-hint{opacity:.8}
  .cap-open .scape-hint{opacity:0;transition-duration:.35s}
  .scape-scrim{position:fixed;inset:0;z-index:3;cursor:pointer}
  .cap-open .scape-scrim{display:block}
  .cap-open .scape-title.show{opacity:0}
  /* ---- label card: opens on tap, on the far side of the screen from its element ---- */
  .pin-cap{width:calc(100vw - 28px);max-width:min(93vw,428px);gap:.5rem;padding:19px 20px 21px;border-radius:26px;background:rgba(253,249,243,.94);box-shadow:0 28px 62px -32px rgba(92,72,56,.55),inset 0 0 0 1px rgba(255,255,255,.72)}
  .scape-pin.cap-top .pin-cap{top:calc(7% + env(safe-area-inset-top,0px));bottom:auto}
  .scape-pin.cap-bottom .pin-cap{top:auto;bottom:calc(9% + env(safe-area-inset-bottom,0px))}
  .pc-title,.pc-line,.pc-link{text-shadow:none}
  .pc-tags{max-width:none;margin-top:.3rem;gap:.4rem}
  .pc-tag{background:rgba(255,253,250,.9)}
  .pc-link{margin-top:.7rem}
  /* iPhone-first HARD-CODED text sizes (fixed px) so iOS text-size-adjust can't
     warp/wrap; a desktop viewing the mobile build just shows these iPhone sizes */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .scape-title{font-size:30px}
  .pc-title{font-size:34px}
  .pc-line{font-size:16px}
  .pc-tag{font-size:13px;padding:.42rem 1rem}
  .noti-title,.noti-time{font-size:14px}
}
@keyframes bannerDrop{0%{opacity:0;transform:translate(-50%,-64px) scale(.96)}16%{opacity:1;transform:translate(-50%,0) scale(1)}74%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-16px) scale(.98)}}
/* halo breathing — barely there, staggered per element (--bd) so they never pulse in unison */
@keyframes haloBreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}
/* ============================================================
   Reduced motion — straight to resolved; lifescape static; no trail
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chaos-feed,.banner{animation:none!important}
  .sunburst,.chaos,.banners{transition:none!important}
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
  .scape-trail{display:none}
  /* mobile fresco focus: settle straight into the hazed state, halos still tappable */
  .scape-dim,.lit-patch,.pin-halo,.pin-cap,.scape-hint,.scape-title{transition:none!important}
  .pin-halo::before{animation:none}
}