:root{
  --bg:#0d060b; --surface:#1b0e17; --ink:#fff; --muted:#b9aeb6;
  --accent:#ff488b; --accent-ink:#0d060b;
  --field-1:#470c35; --field-2:#fff; --field-2-ink:#101421;
  --m:clamp(20px,2.4vw,32px);
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --display:clamp(3.4rem,10.5vw,9.5rem);
  --f-display:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --f-text:"Source Serif 4",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.55 var(--f-text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--f-display);font-weight:700;margin:0;letter-spacing:-.035em;line-height:.95}

/* buttons: square, one fill */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;background:var(--accent);color:var(--accent-ink);font:700 var(--step-small)/1 var(--f-display);letter-spacing:0;text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform .2s var(--ease),background-color .2s}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn:active{transform:translateY(1px)}
.btn-big{min-height:54px;padding:0 30px;font-size:1rem}
.btn-alt{background:#3a2733;color:var(--ink)}
.btn-alt:hover{background:var(--ink);color:var(--accent-ink)}
.btn-ink{background:var(--field-2-ink);color:#fff;min-height:54px;padding:0 30px;font-size:1rem}
.btn-ink:hover{background:var(--field-1)}

/* nav */
.bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:22px var(--m)}
.mark{font:700 1.375rem/1 var(--f-display);letter-spacing:-.03em;text-decoration:none}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding:110px var(--m) 60px}
.frame{width:100%;position:relative}
.display{font-size:var(--display);line-height:.92;font-feature-settings:"lnum"}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}
.slot{display:inline-block;min-width:2.2em;padding:0 .14em;margin:0 .04em;text-align:center;background:var(--accent);color:var(--accent-ink);line-height:.95;transition:background-color .35s var(--ease),color .35s var(--ease)}
.is-found .slot{background:#fff;color:var(--field-2-ink)}
.hero-controls{margin:0 0 28px}
.hero-controls[hidden],.hero-readout[hidden],.slider[hidden]{display:none}
.chip{display:inline-flex;flex-direction:column;gap:6px;min-width:260px;min-height:76px;padding:14px 18px;background:#291524;color:var(--ink);border:0;border-radius:0;text-align:left;font:inherit}
.chip-switch{cursor:pointer;transform:rotate(-2deg);transition:transform .25s var(--ease),background-color .2s}
.chip-switch:hover{transform:rotate(0) translateY(-2px);background:#35192e}
.chip-switch:active{transform:rotate(0) translateY(1px)}
.chip-label{font:700 var(--step-small)/1.2 var(--f-display);color:var(--muted)}
.chip-state{display:flex;gap:0;font:700 1.375rem/1 var(--f-display)}
.chip-state span{padding:6px 14px;color:var(--muted);transition:background-color .25s,color .25s}
.chip-state .off{background:var(--accent);color:var(--accent-ink)}
.is-found .chip-state .off{background:transparent;color:var(--muted)}
.is-found .chip-state .on{background:#fff;color:var(--field-2-ink)}
.hero-readout{position:absolute;right:0;top:calc(var(--display)*.92 + 8px);transform:rotate(2.5deg);min-width:300px}
.chip-num{font:400 1.25rem/1.2 var(--f-text);font-variant-numeric:tabular-nums}
.chip-num b{font:700 1.75rem/1 var(--f-display);color:#fff}
.hero-foot{margin-top:clamp(36px,6vh,72px);display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.lead{margin:0;font-size:var(--step-lead);line-height:1.4;max-width:34em;color:var(--ink)}

/* statements */
.statement{margin:0;font:400 36px/1.2 var(--f-text);max-width:34em}
.statement b{font-weight:600;color:var(--accent)}
.intro,.stats{padding:clamp(90px,16vh,200px) var(--m)}
.intro .statement{margin-left:auto;margin-right:auto;max-width:25em}
.thumb{display:inline-block;width:1.5em;height:.85em;object-fit:cover;vertical-align:-.1em;margin:0 .12em;border-radius:0}

/* bands */
.band{margin:0;overflow:hidden;height:min(62vh,640px)}
.band img{width:100%;height:118%;object-fit:cover;will-change:transform}
.band-dusk{height:min(56vh,560px)}

/* how it works */
.how{background:var(--field-1)}
.split{display:grid;grid-template-columns:1fr 1fr;min-height:76svh}
.stage{display:contents}
.js .stage{display:none}
.js .stage.on{display:contents}
.stage-clause{padding:clamp(40px,7vw,96px) var(--m);display:flex;align-items:flex-start}
.clause{font-size:clamp(2.4rem,4.8vw,5rem);max-width:9em}
.stage-frag{background:var(--field-2);color:var(--field-2-ink);display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,64px) var(--m)}
.frag{width:100%;max-width:520px;font:400 1rem/1.5 var(--f-text);background:#f4f2f5;border:1px solid #d9d3dc;padding:26px 28px} /* taste-skill-ignore */
.frag-title{margin:0 0 14px;font:700 1.0625rem/1.2 var(--f-display);letter-spacing:-.01em}
.frag-rows{margin:0}
.frag-rows div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-top:1px solid #dcd6df} /* taste-skill-ignore */
.frag-rows div:first-child{border-top:0}
.frag-rows dt{color:#5b5361}
.frag-rows dd{margin:0;font-weight:600;text-align:right}
.frag-note{margin:14px 0 0;color:#5b5361;font-size:var(--step-small)}
.code{margin:0;overflow:auto;font:400 .8125rem/1.55 ui-monospace,Menlo,Consolas,monospace;color:#1d1b25;white-space:pre-wrap}
.checks{list-style:none;margin:0;padding:0}
.checks li{padding:10px 0 10px 30px;position:relative;border-top:1px solid #dcd6df} /* taste-skill-ignore */
.checks li:first-child{border-top:0}
.checks li:before{content:"";position:absolute;left:0;top:16px;width:14px;height:14px;background:#1c8d5a}
.checks li.fail:before{background:var(--accent)}
.slider{padding:26px var(--m) 30px;background:var(--bg)}
#stageRange{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0;cursor:pointer}
.rangewrap{position:relative}
.fill{position:absolute;left:0;top:12px;height:8px;width:var(--p,0%);background:var(--ink);pointer-events:none}
#stageRange{position:relative;z-index:1}
#stageRange::-webkit-slider-runnable-track{height:8px;background:#3a2733}
#stageRange::-moz-range-track{height:8px;background:#3a2733}
#stageRange::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-12px;background:var(--accent);border:0;border-radius:0}
#stageRange::-moz-range-thumb{width:32px;height:32px;background:var(--accent);border:0;border-radius:0}
.stage-names{list-style:none;margin:10px 0 0;padding:0;display:flex;justify-content:space-between;font:700 1rem/1.2 var(--f-display);color:var(--muted)}
.stage-names .cur{color:var(--ink)}

/* list */
.list,.faq{padding:clamp(90px,14vh,180px) var(--m)}
.head{font-size:clamp(2.5rem,4.8vw,4.25rem);max-width:12em;padding-left:3vw}
.list-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 20px;margin-top:clamp(48px,7vw,96px);align-items:end}
.list-pic{grid-column:1/5;margin:0}
.list-pic img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:2% 50%}
.rows{grid-column:6/13;width:100%;border-collapse:collapse;font-size:1.0625rem}
.rows th,.rows td{padding:15px 0;text-align:left;font-weight:400;vertical-align:top}
.rows th{color:var(--muted);width:20%;padding-right:16px}
.rows td:last-child{text-align:right;white-space:nowrap}
.rows tr:nth-child(4) th,.rows tr:nth-child(4) td{padding-top:36px}
.rows a{color:var(--accent);text-underline-offset:4px}

/* faq */
.faq{background:var(--surface)}
.faq-list{margin:clamp(40px,6vw,80px) 0 0 calc(100%/3);max-width:46em}
details{margin:0 0 26px;padding:6px 0}
details[open]{background:#2a1623;margin-left:-24px;margin-right:-24px;padding:14px 24px 20px}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;font:700 clamp(1.25rem,2vw,1.5rem)/1.25 var(--f-display);letter-spacing:-.01em;min-height:44px}
summary::-webkit-details-marker{display:none}
summary:after{content:"";flex:none;width:12px;height:12px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);margin-top:-5px;transition:transform .25s var(--ease)}
details[open] summary:after{transform:rotate(-135deg);margin-top:4px}
details p{margin:12px 0 0;max-width:48ch}

/* cta */
.cta{min-height:100svh;background:#070307;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:32px var(--m) 24px;text-align:center}
.cta-q{display:flex;flex-direction:column;width:100%;font-size:clamp(3.2rem,11vw,10.5rem);line-height:1}
.cta-mid{padding:40px 0}
.cta-row{display:flex;align-items:center;justify-content:center;gap:clamp(20px,8vw,120px);flex-wrap:wrap}
.cta-row .btn{min-width:210px;min-height:58px;font-size:1.0625rem}
.or{font:700 1.125rem/1 var(--f-display);color:var(--muted)}
.cta-note{margin:18px 0 0;color:var(--muted)}

/* footer */
.foot{position:relative;overflow:hidden;min-height:100svh;background:var(--field-2);color:var(--field-2-ink);padding:clamp(60px,12vh,140px) var(--m) 0;display:flex;flex-direction:column;justify-content:space-between}
.foot-invite{margin:0 0 28px;font:700 clamp(2.4rem,5vw,4.5rem)/1 var(--f-display);letter-spacing:-.035em;max-width:9em}
.credits{margin:40px 0 0;font-size:var(--step-small);line-height:1.5;max-width:70em;position:relative;z-index:2}
.credits a{color:#3a1a31}
.wordmark{font:700 clamp(7rem,25vw,24rem)/.8 var(--f-display);letter-spacing:-.05em;color:var(--field-1);white-space:nowrap;transform:translateY(30%);margin-top:24px}

/* motion */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .ln>span{transform:translateY(112%);transition:transform .95s cubic-bezier(.2,.8,.2,1)}
.js .ln:nth-child(2)>span{transition-delay:.11s}
.js .loaded .ln>span{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .ln>span{opacity:1;transform:none;transition:none}
  .band img{height:100%}
}

/* phone */
@media (max-width:760px){
  .statement{font-size:24px}
  .hero{padding-top:96px}
  .display{font-size:14vw}
  .hero-controls{margin-bottom:20px}
  .chip{min-width:200px;min-height:60px;padding:10px 14px}
  .chip-switch{transform:none}
  .hero-readout{position:static;transform:none;margin-top:20px;min-width:0}
  .btn-big{width:100%}
  .intro .statement{max-width:none}
  .split{grid-template-columns:1fr}
  .stage-frag{order:-1;min-height:46svh}
  .stage-clause{padding:28px var(--m) 36px}
  .clause{font-size:9vw}
  .head{font-size:10vw;padding-left:0}
  .list-grid{display:block}
  .list-pic{width:60%;margin:40px 0 0 auto}
  .rows{margin-top:36px}
  .rows tr{display:grid;grid-template-columns:1fr auto}
  .rows th{grid-column:1/-1;width:auto;padding:14px 0 0}
  .rows td{padding:2px 0 14px}
  .faq-list{margin-left:0}
  details[open]{margin-left:calc(var(--m)*-1);margin-right:calc(var(--m)*-1);padding-left:var(--m);padding-right:var(--m)}
  .cta-q{font-size:18vw}
  .cta-row{flex-direction:column;gap:12px}
  .cta-row .btn{width:72%}
  .wordmark{font-size:26vw}
}