/* ---------- 01 the pile ---------- */
.pile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pile article{background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;border-radius:8px;padding:24px;min-height:clamp(220px,24vw,320px);display:flex;flex-direction:column;gap:12px;transition:background .5s var(--ease),box-shadow .5s}
.pile article:hover{background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--line-strong) inset}
.pile .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--mute)}
.pile h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.05;letter-spacing:-.04em;margin-top:auto}
.pile p{font-size:13px;color:var(--soft);line-height:1.45}
.pile article::after{content:"";height:2px;width:38px;background:var(--grad);border-radius:2px;margin-top:6px;opacity:.75}
@media(max-width:900px){.pile{grid-template-columns:1fr}.pile article{min-height:0}}

/* ---------- 02 day timeline ---------- */
.day{position:relative}
.day-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,90px);align-items:start}
.day-clock{position:sticky;top:110px}
.clock{font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,7vw,6.2rem);letter-spacing:-.06em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:opacity .3s}
.clock-sub{margin-top:14px;font-size:.92rem;color:var(--soft);max-width:30ch;min-height:3.2em}
.day-steps{display:flex;flex-direction:column;gap:clamp(18px,3vw,34px);padding-bottom:14vh}
.step{border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,34px);background:linear-gradient(180deg,rgba(17,19,46,.55),rgba(11,13,34,.25));opacity:.42;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .7s,box-shadow .7s}
.step.on{opacity:1;transform:none;border-color:var(--line-strong);box-shadow:0 30px 70px -50px rgba(129,140,248,.85)}
.step .t{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:12px}
.step .t b{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--violet);font-weight:500}
.step h3{font-family:var(--display);font-size:clamp(1.3rem,2.1vw,1.85rem);letter-spacing:-.04em;line-height:1.06;margin-bottom:8px}
.step p{color:var(--soft);font-size:.95rem;line-height:1.55;max-width:46ch}
.step .who{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:.74rem;color:var(--mute)}
.step .who i{width:5px;height:5px;border-radius:50%;background:var(--green)}
@media(max-width:860px){.day-grid{grid-template-columns:1fr}.day-clock{position:static;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}.clock-sub{min-height:0;margin:0}.day-steps{padding-bottom:0}.step{opacity:1;transform:none}}

/* ---------- 03 queue marquee ---------- */
.queue{border-block:1px solid var(--line);padding-block:clamp(22px,3vw,34px);overflow:hidden;background:rgba(11,13,34,.5)}
.queue-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.queue-head .ok{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.queue-head .count{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.04em;min-width:2ch}
.mq{display:flex;gap:12px;width:max-content;animation:mq 34s linear infinite}
.queue:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq span{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;white-space:nowrap;font-size:.82rem;color:var(--soft);box-shadow:0 0 0 1px var(--line) inset;background:rgba(255,255,255,.02)}
.mq span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grad)}
.mq span em{font-style:normal;color:var(--paper)}
@media(prefers-reduced-motion:reduce){.mq{animation:none}}

/* ---------- 04 roles ---------- */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.role{position:relative;border-radius:8px;overflow:hidden;min-height:clamp(220px,24vw,300px);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.role::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:opacity .5s}
.role:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line-strong) inset,0 34px 60px -40px rgba(129,140,248,.8)}
.role:hover::before{opacity:1}
.role .art{position:absolute;inset:0 0 40% 0;opacity:.5;background:radial-gradient(120% 90% at 20% 0%,rgba(129,140,248,.35),transparent 60%)}
.role .tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);position:relative}
.role h3{position:relative;font-family:var(--display);font-weight:400;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.04em;line-height:1.08}
.role p{position:relative;font-size:13px;color:var(--soft);line-height:1.45}
/* full-viewport sections + light panels (the reference alternates) */
.sec.tall{min-height:100svh;display:flex;align-items:center;padding-block:clamp(64px,8vh,120px)}
.inverse{background:#f4f4f4;color:#090909}
.inverse .lead,.inverse .body,.inverse .sec-head .side{color:rgba(9,9,9,.66)}
.inverse .idx,.inverse .small{color:rgba(9,9,9,.55)}
.inverse .idx::before{background:rgba(9,9,9,.25)}
.inverse .path,.inverse .pile article{background:#fff;box-shadow:0 0 0 1px rgba(9,9,9,.1) inset}
.inverse .steps3 article{border-top-color:rgba(9,9,9,.25)}
.inverse .btn-ghost{color:#090909;box-shadow:0 0 0 1px rgba(9,9,9,.35) inset;background:none}
.inverse .btn-ghost:hover{background:rgba(9,9,9,.06)}
@media(max-width:900px){.roles{grid-template-columns:1fr 1fr}.role{min-height:200px}}
@media(max-width:560px){.roles{grid-template-columns:1fr}}

/* ---------- 05 steps ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);counter-reset:s}
.steps3 article{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--line-strong)}
.steps3 article::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--violet)}
.steps3 h3{font-family:var(--display);font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.035em;line-height:1.1}
.steps3 p{font-size:.9rem;color:var(--soft);line-height:1.6}
@media(max-width:780px){.steps3{grid-template-columns:1fr}}

/* ---------- 06 proof ---------- */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,80px);align-items:center}
.proof img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-radius:16px;filter:saturate(.9)}
.proof blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.7vw,2.4rem);line-height:1.12;letter-spacing:-.045em}
.proof cite{display:block;margin-top:20px;font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.proof .fine{margin-top:22px;font-size:.78rem;color:var(--mute);max-width:44ch}
@media(max-width:820px){.proof{grid-template-columns:1fr}.proof img{aspect-ratio:16/10}}

/* ---------- 07 paths ---------- */
.paths{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.path{border-radius:16px;padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:14px;box-shadow:0 0 0 1px var(--line) inset}
.path.hot{background:linear-gradient(160deg,rgba(99,102,241,.16),rgba(167,139,250,.07) 55%,rgba(7,8,26,.4));box-shadow:0 0 0 1px rgba(167,139,250,.35) inset}
.path h3{font-family:var(--display);font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.04em;line-height:1.05}
.path p{font-size:.92rem;color:var(--soft);line-height:1.6;max-width:42ch}
.path .price{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.05em}
.path .price small{font-family:var(--text);font-size:.8rem;letter-spacing:0;color:var(--mute);font-weight:400}
.path .btn{align-self:flex-start;margin-top:auto}
@media(max-width:820px){.paths{grid-template-columns:1fr}}

/* ---------- close ---------- */
.close{padding-block:clamp(90px,14vh,170px);border-top:1px solid var(--line)}
.close .d2{max-width:14ch}
.close .composer{margin-top:38px}
.close-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;font-size:.78rem;color:var(--mute)}
.close-meta a{color:var(--soft);border-bottom:1px solid var(--line-strong);padding-bottom:2px}
footer{border-top:1px solid var(--line);padding:34px var(--edge) 96px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.76rem;color:var(--mute);position:relative;z-index:1}
footer a{color:var(--soft)}