:root{
  --violet:#5B3DF5; --violet-lift:#8E78FF; --ink:#16142A; --coral:#FF5A5F; --lime:#C6FF4A;
  --paper:#FBFAF7; --surface:#FFFFFF; --line:#E7E4DD; --mute:#6B6880;
  --wash:#F1EEFF; --coral-wash:#FFF2F1;
  --dark:#16142A; --dark-elev:#211E3A; --dark-line:#322E52; --dark-mute:#9B95C9;
  --green:#1FA971; --green-d:#3FD89A;
  --disp:'Space Grotesk',system-ui,sans-serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
  --shadow:0 8px 24px rgba(91,61,245,.12); --shadow-cta:0 10px 26px rgba(91,61,245,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block;border-radius:16px}
a{color:var(--violet)}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:680px}
.center{text-align:center}

/* type */
.display{font-family:var(--disp);font-weight:600;font-size:clamp(33px,7.6vw,56px);line-height:1.02;letter-spacing:-.025em;margin:.18em 0 .35em}
.h2{font-family:var(--disp);font-weight:600;font-size:clamp(25px,5.2vw,38px);line-height:1.1;letter-spacing:-.02em;margin:0 0 .4em}
.h2 em{font-style:normal;color:var(--violet)}
.lede{color:var(--mute);font-size:clamp(16px,2.6vw,19px);margin:0 0 1.4em;max-width:32em}
.center .lede{margin-left:auto;margin-right:auto}
.body{color:var(--mute);margin:0 0 1.1em}
.body em{color:var(--ink);font-style:normal;font-weight:600}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 13px;font-weight:600}
.eyebrow.accent{color:var(--violet)}
.muted{color:var(--mute);font-size:13px;margin:6px 0}

/* brand mark */
.brand{display:inline-flex;align-items:center;gap:9px;margin-bottom:8px}
.brand .mark{width:24px;height:24px;flex:none}
.brand .wm{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.brand .wm .dot{color:var(--coral);font-weight:700;font-size:1.35em;line-height:0}
.brand.small .wm{font-size:18px}

/* buttons */
.btn{font-family:var(--sans);font-weight:600;font-size:16px;border:none;border-radius:200px;
  padding:16px 26px;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;width:100%;max-width:420px}
.btn-primary{background:var(--violet);color:#fff;box-shadow:var(--shadow-cta)}
.btn-primary:hover{background:#4a2ee0}
.btn-primary:active{transform:scale(.98)}
.btn-loud{background:var(--lime);color:var(--ink);box-shadow:0 10px 26px rgba(198,255,74,.25)}
.btn-loud:hover{background:#b8f531}
.btn-loud:active{transform:scale(.98)}
.cta-micro{color:var(--mute);font-size:13px;margin:12px 0 0}
.loud .cta-micro{color:var(--dark-mute)}
.link-cta{background:none;border:none;color:var(--violet);font-family:var(--sans);font-weight:600;
  font-size:16px;padding:0;cursor:pointer;border-bottom:2px solid rgba(91,61,245,.3)}

/* section bands — each background change is its own divider */
.sec{padding:64px 0;position:relative}
.bg-paper{background:var(--paper)}
.bg-surface{background:var(--surface)}
.bg-wash{background:var(--wash)}
.bg-coral{background:var(--coral-wash)}
.seam{border-top:1px solid var(--line)} /* only for same-colour neighbours */

/* hero */
.hero{padding:34px 0 56px;background:radial-gradient(120% 70% at 50% -10%,rgba(91,61,245,.12),transparent 60%)}
.hero-grid{display:flex;flex-direction:column;gap:30px}
.hero-shot{display:flex;justify-content:center}

/* iPhone device mockup */
/* the screenshots are pre-shaped to the real iPhone ratio (status bar, dynamic island, and
   app-bg safe-area bands are baked into the PNG), so the screen fills the aperture exactly —
   no crop, no letterbox, and no CSS overlay that could overlap the screen. */
.phone{position:relative;width:300px;max-width:82vw;aspect-ratio:78/163;background:#0a0a0e;
  border-radius:16.5%/7.9%;padding:9px;
  box-shadow:0 26px 64px rgba(91,61,245,.30),0 4px 14px rgba(22,20,42,.20),inset 0 0 0 2px rgba(255,255,255,.05)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:34px;display:block}
/* CSS-rendered iOS screen — natively fills the fixed Apple aperture (no image fitting needed) */
.pscreen{width:100%;height:100%;border-radius:13.5%/6.4%;overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column;font-family:var(--sans);position:relative;container-type:inline-size}
.pscreen.dark{background:var(--ink)}
.ps-status{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:5cqw 7.5cqw 0;font-size:4.4cqw;font-weight:600;color:var(--ink)}
.pscreen.dark .ps-status{color:#fff}
.ps-bat{fill:var(--paper)}
.pscreen.dark .ps-bat{fill:var(--ink)}
.ps-island{position:absolute;top:2.8cqw;left:50%;transform:translateX(-50%);width:33cqw;height:9cqw;background:#000;border-radius:99px;z-index:2}
.ps-ico{width:19cqw;height:auto}
.ps-body{flex:1;display:flex;flex-direction:column;padding:3cqw 5cqw 0;min-height:0}
.ps-title{font-family:var(--disp);font-weight:700;font-size:9.4cqw;letter-spacing:-.02em;line-height:1;color:var(--ink);margin:2cqw 0 0}
.pscreen.dark .ps-title{color:#fff}
.ps-sub{font-size:3.3cqw;color:var(--mute);margin:2cqw 0 4cqw}
.ps-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:3cqw;min-height:0}
.ps-cell{position:relative;border-radius:3cqw;background-size:cover;background-position:center}
.ps-pick{position:absolute;top:5%;right:6%;background:var(--coral);color:#fff;font-size:2.7cqw;font-weight:700;padding:.6cqw 2cqw;border-radius:99px;white-space:nowrap}
.ps-grid:not(.dense) .ps-cell:not(:has(.ps-pick)){filter:grayscale(.55);opacity:.55}
.ps-btn{flex:none;margin:4cqw 0 3cqw;background:var(--violet);color:#fff;text-align:center;font-size:3.8cqw;font-weight:600;padding:4cqw 0;border-radius:99px}
.ps-home{flex:none;height:1.3cqw;width:32cqw;margin:0 auto 3cqw;background:rgba(22,20,42,.3);border-radius:99px}
.pscreen.dark .ps-home{background:rgba(255,255,255,.45)}
/* home screen — brand row + dense grid */
.ps-brandrow{display:flex;align-items:center;gap:2cqw;font-family:var(--disp);font-weight:600;font-size:3.6cqw;color:var(--ink);margin-bottom:1cqw}
.ps-brandrow .mk{width:5cqw;height:5cqw;border-radius:1.6cqw;background:var(--violet);flex:none;position:relative}
.ps-brandrow .mk::after{content:"";position:absolute;top:1.4cqw;left:1.7cqw;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--coral)}
.ps-h2{font-family:var(--disp);font-weight:700;font-size:5.4cqw;color:var(--ink);margin:0 0 3cqw;line-height:1.05}
.ps-grid.dense{grid-template-columns:repeat(4,1fr);gap:1.6cqw}
.ps-grid.dense .ps-cell{border-radius:1.8cqw}
/* review screen — one big photo + keep/skip */
.ps-photo{flex:1;border-radius:4cqw;background-size:cover;background-position:center;min-height:0;margin:1cqw 0 3cqw}
.ps-row{display:flex;gap:3cqw;flex:none;margin-bottom:3cqw}
.ps-keep{flex:1.4;background:var(--coral);color:#fff;text-align:center;font-size:3.6cqw;font-weight:600;padding:3.4cqw 0;border-radius:99px}
.ps-skip{flex:1;background:transparent;border:1.5px solid var(--dark-line);color:#fff;text-align:center;font-size:3.6cqw;font-weight:600;padding:3.4cqw 0;border-radius:99px}
/* posted screen */
.ps-center{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3.5cqw;padding:0 2cqw}
.ps-center::before,.ps-center::after{content:"";position:absolute;left:50%;width:2cqw;height:2cqw;border-radius:50%;background:var(--coral);
  box-shadow:-30cqw 1cqw 0 var(--violet),-19cqw -3cqw 0 var(--lime),-9cqw 4cqw 0 var(--coral),9cqw -4cqw 0 var(--violet),21cqw 3cqw 0 var(--lime),31cqw -1cqw 0 var(--coral),-24cqw 5cqw 0 var(--coral),15cqw 5cqw 0 var(--violet)}
.ps-center::before{top:15%}
.ps-center::after{bottom:19%}
.ps-posted{font-family:var(--disp);font-weight:700;font-size:9.5cqw;color:var(--ink)}
.ps-thumbs{display:flex;gap:1.4cqw;width:100%}
.ps-thumbs .ps-cell{flex:1;aspect-ratio:1;border-radius:1.6cqw}
.ps-cap{font-size:3cqw;color:var(--mute)}
.ps-share{border:1.5px solid var(--line);color:var(--ink);font-size:3.4cqw;font-weight:600;padding:3cqw 7cqw;border-radius:99px}
.phone.sm{width:100%;padding:6px;box-shadow:0 14px 34px rgba(91,61,245,.18)}
.phone.sm img{border-radius:28px}
.trio{display:flex;gap:14px;justify-content:center;margin-top:28px}
.trio figure{margin:0;flex:1 1 0;max-width:174px;display:flex;flex-direction:column;align-items:center;gap:11px}
.trio figcaption{font-size:13px;color:var(--mute);font-weight:500;line-height:1.3}

/* 4-step app flow (roll → picks → tweak ⇄ → posted) */
.flow4{display:flex;align-items:flex-start;gap:8px;margin-top:24px;overflow-x:auto;
  padding:4px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.flow-phone{flex:0 0 auto;width:166px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.flow-conn{flex:0 0 auto;align-self:flex-start;margin-top:132px;color:var(--violet);font-size:42px;font-weight:700;line-height:1}
.flow-conn.loop{width:70px}
.flow-stage{position:relative}
.flow-loop{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:300px;height:230px;pointer-events:none;z-index:5;color:var(--coral)}
.flow-loop .loop-draw{display:block;width:300px;height:190px;overflow:visible}
.flow-loop .loop-lab{position:absolute;left:50%;top:172px;transform:translateX(-50%);width:130px;text-align:center;font-size:10.5px;line-height:1.15;letter-spacing:.03em;text-transform:uppercase;font-weight:800}
.loop-draw .ld{stroke:var(--coral);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:280;stroke-dashoffset:280;animation:ldraw 5s ease-in-out infinite,lfade 5s ease-in-out infinite}
.loop-draw .la2{animation-delay:.55s}
@keyframes ldraw{0%{stroke-dashoffset:280}30%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes lfade{0%{opacity:0}3%{opacity:1}84%{opacity:1}94%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.loop-draw .ld{animation:none;stroke-dashoffset:0;opacity:1}}
.flow-phone figcaption{font-size:12.5px;color:var(--mute);line-height:1.35}
.flow-phone figcaption b{display:block;font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:2px}
@media(min-width:860px){.flow4{justify-content:center;overflow:visible}}

/* how-it-works step rail with ghost numerals */
.flow{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:26px}
.flow-node{position:relative;max-width:340px;padding-top:8px}
.flow-node .ghost{position:absolute;top:-14px;left:0;font-family:var(--disp);font-weight:700;
  font-size:66px;line-height:1;color:rgba(91,61,245,.12);font-variant-numeric:tabular-nums;z-index:0;pointer-events:none}
.flow-node .ic{position:relative;z-index:1;width:44px;height:44px;margin:0 0 10px}
.flow-node h3{position:relative;z-index:1;font-family:var(--disp);font-weight:600;font-size:19px;margin:0 0 6px}
.flow-node p{position:relative;z-index:1;color:var(--mute);margin:0;font-size:15px}
.flow-line{width:2px;height:24px;background:linear-gradient(var(--violet),transparent);opacity:.4;margin-left:22px}

/* feature rows */
.feat-grid{display:flex;flex-direction:column;gap:26px;align-items:center}
.feat-shot{display:flex;justify-content:center}
.feat-copy{width:100%}

/* glow-up — centered stacked slab */
.slab{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.slab .feat-shot{width:100%}

/* diagrams */
.dgm{width:100%;max-width:420px;height:auto;margin:0 auto;display:block}
.feat-shot .dgm{max-width:340px}
.slab .dgm{max-width:420px}

/* dark beats (problem pull-quote + clear-the-pile) */
.loud{background:var(--dark);color:#fff}
.loud .h2,.loud .display{color:#fff}
.loud .body{color:var(--dark-mute)}
.loud .eyebrow.accent{color:var(--lime)}
.pull{font-family:var(--disp);font-weight:600;font-size:clamp(30px,7vw,50px);line-height:1.05;
  letter-spacing:-.02em;color:#fff;margin:0 0 .4em}
.pull .swash{background:linear-gradient(transparent 64%,rgba(198,255,74,.45) 64%)}
.pull .dot{color:var(--coral)}
.pile{display:flex;align-items:center;justify-content:center;gap:22px;margin:24px 0 16px}
.pile-stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.pile-stat .big{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(48px,13vw,72px);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.pile-stat .big.z{color:var(--lime)}
.pile-stat .lbl{color:var(--dark-mute);font-size:12px;max-width:9em;text-align:center}
.pile-arrow{color:var(--lime);font-size:30px}
.meter{height:8px;background:var(--dark-line);border-radius:5px;overflow:hidden;max-width:360px;margin:0 auto 24px}
.meter span{display:block;height:100%;width:6%;background:var(--violet-lift)}

/* time-savings comparison */
.compare{display:flex;gap:14px;margin:28px 0 18px}
.compare-card{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:9px}
.compare-card.win{background:var(--wash);border-color:var(--violet);box-shadow:var(--shadow)}
.t-label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
.compare-card.win .t-label{color:var(--violet)}
.t-num{font-family:var(--disp);font-weight:700;font-size:clamp(40px,12vw,54px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.compare-card.win .t-num{color:var(--violet)}
.t-num small{font-size:.36em;font-weight:600;color:var(--mute);margin-left:5px}
.t-sub{font-size:12px;color:var(--mute);line-height:1.35;max-width:14em}
.t-foot{margin:4px 0 0}

/* roadmap — tappable interest cards */
.road{display:flex;flex-direction:column;gap:14px;margin-top:28px;text-align:left}
.road-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;
  cursor:pointer;font-family:var(--sans);transition:transform .15s,box-shadow .15s,border-color .15s}
.road-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--violet-lift)}
.road-card:active{transform:translateY(0)}
.road-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:2px}
.road-ic{width:40px;height:40px;border-radius:12px;background:var(--wash);display:flex;align-items:center;justify-content:center;flex:none}
.road-ic svg{width:22px;height:22px}
.road-tag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--mute);
  background:var(--paper);border:1px solid var(--line);border-radius:200px;padding:4px 10px}
.road-title{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--ink)}
.road-desc{font-size:14.5px;color:var(--mute);line-height:1.45}
.road-vote{font-size:14px;font-weight:600;color:var(--violet);margin-top:2px}
.road-card.voted{border-color:var(--violet);background:var(--wash)}
.road-card.voted .road-vote{color:var(--green)}
.road-card.voted .road-tag{color:var(--violet);border-color:var(--violet-lift)}
@media(min-width:760px){.road{flex-direction:row;align-items:stretch}.road-card{flex:1}}

/* coral pick-dot accent (final cta) */
.pick-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--coral);margin:0 auto 16px}

/* curation pipeline — algorithm-transparency diagram */
.pipe{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:30px}
.pipe-step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 14px;
  width:100%;max-width:300px;box-shadow:0 4px 16px rgba(91,61,245,.06)}
.pipe-step svg{width:120px;height:96px;display:block;margin:0 auto 8px}
.pipe-step h3{font-family:var(--disp);font-weight:600;font-size:16px;margin:0 0 3px;color:var(--ink)}
.pipe-step p{color:var(--mute);font-size:13px;margin:0;line-height:1.35}
.pipe-arrow{color:var(--violet);font-size:20px;font-weight:700;transform:rotate(90deg)}
@media(min-width:760px){
  .pipe{flex-direction:row;align-items:stretch}
  .pipe-step{flex:1;max-width:none;display:flex;flex-direction:column;justify-content:flex-start}
  .pipe-arrow{transform:none;align-self:center}
}

/* operation modes — one-time vs continuous (on the dark band) */
.modes{display:flex;flex-direction:column;gap:14px;margin:24px 0 22px;text-align:left}
.mode-card{background:var(--dark-elev);border:1px solid var(--dark-line);border-radius:18px;padding:20px}
.mode-tag{display:inline-block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  padding:4px 11px;border-radius:200px;margin-bottom:11px}
.mode-tag.one{background:rgba(142,120,255,.18);color:var(--violet-lift)}
.mode-tag.cont{background:rgba(198,255,74,.15);color:var(--lime)}
.mode-card h3{font-family:var(--disp);font-weight:600;font-size:19px;color:#fff;margin:0 0 6px}
.mode-card p{color:var(--dark-mute);font-size:14.5px;line-height:1.45;margin:0}
.pile-mini{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-family:'Inter',sans-serif;
  font-weight:700;font-size:32px;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.pile-mini .m-arr{color:var(--lime);font-size:22px}
.pile-mini .z{color:var(--lime)}
.mode-card .meter{margin:14px 0 0;max-width:none}
.pile-anim{position:relative}
#pileNum{display:inline-block;min-width:2.1em;text-align:center;font-variant-numeric:tabular-nums}
#pileBar{width:5%;transition:width 1.7s cubic-bezier(.2,.85,.25,1)}
.pile-posts{display:flex;gap:10px;justify-content:center;margin-top:18px}
.pile-posts .pp{display:flex;flex-direction:column;align-items:center;gap:3px;width:84px;
  opacity:0;transform:translateY(12px) scale(.9);transition:opacity .45s ease,transform .5s cubic-bezier(.2,1.5,.4,1)}
.pile-posts .pp.in{opacity:1;transform:none}
.pile-posts .pp-th{width:56px;height:56px;border-radius:13px;background-size:cover;background-position:center;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.pile-posts .pp b{font-family:var(--disp);font-weight:600;font-size:11.5px;color:#fff;line-height:1.1;margin-top:2px}
.pile-posts .pp i{font-style:normal;font-size:10px;font-weight:700;color:var(--lime)}
.confetti{position:absolute;left:50%;top:30%;width:0;height:0;pointer-events:none;z-index:4}
.confetti i{position:absolute;width:9px;height:9px;margin:-4px;border-radius:2px;opacity:0}
.confetti.go i{animation:confburst 1s ease-out forwards}
@keyframes confburst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.5)}}
@media(prefers-reduced-motion:reduce){.pile-posts .pp{opacity:1;transform:none}#pileBar{transition:none}.confetti{display:none}}
/* one-time card — "messy album → ready set" looping graphic */
.dump-anim{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.dump-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.dump-pile{position:relative;width:64px;height:54px}
.dump-pile .dp-card{position:absolute;left:50%;top:50%;width:42px;height:42px;border-radius:9px;background-size:cover;background-position:center;box-shadow:0 5px 12px rgba(0,0,0,.4);border:2px solid var(--dark-elev)}
.dump-pile .dp-card:nth-child(1){transform:translate(-50%,-50%) rotate(-12deg) translateX(-7px)}
.dump-pile .dp-card:nth-child(2){transform:translate(-50%,-50%) rotate(8deg) translateX(7px)}
.dump-pile .dp-card:nth-child(3){transform:translate(-50%,-50%) rotate(-2deg)}
.dump-arr{color:var(--violet-lift);font-size:24px;font-weight:700;flex:none}
.dump-set{display:flex;gap:4px}
.dump-set .ds-th{width:30px;height:38px;border-radius:7px;background-size:cover;background-position:center;box-shadow:0 4px 10px rgba(0,0,0,.3);opacity:0;animation:dspop 4.2s ease-in-out infinite}
.dump-set .ds-th:nth-child(1){animation-delay:.1s}
.dump-set .ds-th:nth-child(2){animation-delay:.45s}
.dump-set .ds-th:nth-child(3){animation-delay:.8s}
.dump-set .ds-th:nth-child(4){animation-delay:1.15s}
@keyframes dspop{0%,3%{opacity:0;transform:translateY(8px) scale(.82)}13%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(8px) scale(.82)}}
.dump-lab{font-size:10px;font-weight:700;color:var(--dark-mute);text-transform:uppercase;letter-spacing:.04em}
.dump-lab.out{color:var(--lime)}
@media(prefers-reduced-motion:reduce){.dump-set .ds-th{opacity:1;transform:none;animation:none}}
@media(min-width:760px){.modes{flex-direction:row;align-items:stretch}.mode-card{flex:1}}

/* faq */
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;
  padding:18px 2px;font-weight:600;font-size:16.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{color:var(--violet);font-weight:600;transition:transform .2s}
.faq[open] .pm{transform:rotate(45deg)}
.faq p{color:var(--mute);margin:0 2px 18px;font-size:15px}
.faq em{color:var(--ink);font-style:normal;font-weight:600}

/* footer (dark anchor) */
.footer{padding:40px 0 58px;text-align:center;background:var(--dark);color:#fff}
.footer .brand .wm{color:#fff}
.footer .muted{color:var(--dark-mute)}
.footer a{color:var(--violet-lift)}
.footer .tiny{font-size:11px;opacity:.8;margin-top:10px}

/* sticky cta */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(251,250,247,.95) 30%);display:flex;justify-content:center;
  transform:translateY(120%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:40;pointer-events:none}
.sticky-cta.show{transform:none;pointer-events:auto}
.sticky-cta .btn{margin:0}

/* ---- signup modal (light) ---- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(22,20,42,.55)}
.modal-card{position:relative;width:100%;max-width:440px;max-height:92vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:36px 20px 26px;
  box-shadow:0 30px 70px rgba(22,20,42,.3);animation:pop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--mute);font-size:28px;line-height:1;cursor:pointer;z-index:2}
.modal-x:hover{color:var(--ink)}
#form-card{min-height:280px}

.form-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.form-head .back{background:none;border:none;color:var(--mute);font-size:24px;cursor:pointer;padding:0 4px 0 0;line-height:1;visibility:hidden}
.form-head .back.on{visibility:visible}
.form-head .brand{margin:0}
.form-head .progress{flex:1;height:6px;background:var(--line);border-radius:5px;overflow:hidden}
.form-head .progress span{display:block;height:100%;background:var(--violet);border-radius:5px;transition:width .35s cubic-bezier(.34,1.56,.64,1)}
.form-head .last{font-size:12px;color:var(--violet);font-weight:600;white-space:nowrap}
.q-headline{font-family:var(--disp);font-weight:600;font-size:22px;line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.q-micro{color:var(--mute);font-size:14px;margin:0 0 18px}
.chips{display:flex;flex-direction:column;gap:11px}
.chip{display:flex;align-items:center;gap:11px;width:100%;min-height:56px;padding:14px 18px;
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;color:var(--ink);
  font-family:var(--sans);font-size:16px;font-weight:500;text-align:left;cursor:pointer;
  transition:border-color .15s,background .15s,transform .12s}
.chip:hover{border-color:var(--violet-lift)}
.chip:active{transform:scale(.985)}
.chip.selected{border-color:var(--violet);background:var(--wash);box-shadow:0 0 0 1px var(--violet)}
.chip .emoji{font-size:20px}
.email-step .email-input{width:100%;height:56px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:14px;color:var(--ink);font-size:17px;padding:0 18px;outline:none;font-family:var(--sans)}
.email-step .email-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(91,61,245,.22)}
.email-step .btn{margin:16px 0 0;max-width:none}
.email-step .err{color:var(--coral);font-size:13px;margin:9px 2px 0;min-height:1em}
.email-step .trust{color:var(--mute);font-size:13px;text-align:center;margin:12px 0 0}
.fade{animation:fade .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* success */
.success{text-align:center;padding:14px 4px}
.success .mark{width:60px;height:60px;border-radius:50%;border:2px solid var(--green);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:30px;margin:6px auto 18px}
.success h3{font-family:var(--disp);font-weight:600;font-size:26px;margin:0 0 10px}
.success p{color:var(--mute);margin:0 0 10px}
.success .tag{font-family:var(--disp);font-weight:600;color:var(--ink);margin:16px 0}
.success .btn{margin-top:8px}

@media(min-width:760px){
  .feat-grid{flex-direction:row;justify-content:space-between;gap:46px;align-items:center}
  .feat-copy{flex:1}.feat-shot{flex:0 0 auto}
  .feature.alt .feat-grid{flex-direction:row-reverse}
  .slab .feat-grid{flex-direction:column} /* glow-up never goes side-by-side */
  .flow{flex-direction:row;align-items:flex-start;gap:30px;margin-top:34px}
  .flow-node{flex:1}
  .flow-line{display:none}
  .h2.left{text-align:left}
}
@media(min-width:860px){
  .hero-grid{flex-direction:row;align-items:center;gap:48px;padding-top:18px}
  .hero-copy{flex:1.05}.hero-shot{flex:1}
  .hero .btn{width:auto;min-width:280px}
}