@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Manrope:wght@400;500;600;700&display=swap');
:root{
  --ink:#0b0e14; --pane:#121826; --pane2:#182033; --line:#2a3348;
  --text:#e8ecf4; --muted:#9aa3b5; --accent:#ff6b5a; --accent2:#ff8f7a; --ok:#3dcf9a;
  --display:'Syne',system-ui,sans-serif; --body:'Manrope',system-ui,sans-serif;
  --pad:max(1rem,env(safe-area-inset-left,0px)); --pad-r:max(1rem,env(safe-area-inset-right,0px));
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --dock-h:3.65rem; --max:920px; --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--text);font-family:var(--body);line-height:1.62;
  overflow-x:clip;padding-bottom:calc(var(--dock-h) + var(--safe-b) + .5rem);
  background:
    radial-gradient(ellipse 70% 45% at 12% -8%, rgba(255,107,90,.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, rgba(61,207,154,.06), transparent 50%),
    linear-gradient(180deg,#080b11 0%, var(--ink) 40%, #0d121c 100%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent2);text-underline-offset:.15em} a:hover{color:#ffb3a6}
button,a{touch-action:manipulation}
::selection{background:rgba(255,107,90,.35);color:#0b0e14}

.pp{min-height:100dvh;display:flex;flex-direction:column;position:relative}
.pp::before{
  content:"";pointer-events:none;position:fixed;inset:0;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bar{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:calc(.55rem + var(--safe-t)) var(--pad) .5rem var(--pad-r);
  position:sticky;top:0;z-index:30;
  background:rgba(11,14,20,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(232,236,244,.07);
}
.word{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--text);text-decoration:none;letter-spacing:-.03em}
.word span{color:var(--accent)}
.bar-cta{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:#140c0a;background:linear-gradient(165deg,var(--accent2),var(--accent));
  padding:.45rem .85rem;border-radius:2px;
}
.age{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid rgba(154,163,181,.28);padding:.25rem .45rem}

.stage{position:relative;z-index:1;min-height:min(74dvh,620px);overflow:hidden;border-bottom:1px solid rgba(232,236,244,.07)}
.stage-bg{position:absolute;inset:0}
.stage-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:.72;filter:saturate(.92) contrast(1.06) brightness(.68)}
.stage-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(11,14,20,.55) 0%, transparent 28%, transparent 72%, rgba(11,14,20,.55) 100%),
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 20%, rgba(11,14,20,.75) 70%, rgba(11,14,20,.97) 100%);
}
.panes{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
  width:min(92vw,520px);margin:1.35rem auto .4rem;aspect-ratio:1.55/1;
  animation:pane-in .7s var(--ease) both;
}
@keyframes pane-in{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane{
  border:1px solid rgba(232,236,244,.16);background:rgba(18,24,38,.45);
  border-radius:3px;position:relative;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.pane::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,14,20,.7))}
.pane .tag{
  position:absolute;top:.45rem;left:.45rem;z-index:2;
  font-family:var(--display);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,236,244,.85);background:rgba(11,14,20,.55);padding:.2rem .4rem;border:1px solid rgba(232,236,244,.12);
}
.pane.you{border-color:rgba(61,207,154,.35)}
.pane.them{border-color:rgba(255,107,90,.4)}
.live-dot{
  position:absolute;top:.55rem;right:.55rem;width:8px;height:8px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 12px rgba(61,207,154,.7);animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.panes,.live-dot{animation:none!important}}

.hero-copy{position:relative;z-index:3;text-align:center;padding:0 1rem 1.15rem;max-width:34rem;margin:0 auto}
.hero-copy .brand{
  font-family:var(--display);font-weight:800;font-size:clamp(1.85rem,7vw,2.55rem);
  letter-spacing:-.045em;line-height:.95;margin:0 0 .45rem;color:var(--text);
  text-shadow:0 10px 32px rgba(0,0,0,.55);
}
.hero-copy .brand a{color:inherit;text-decoration:none}
.hero-copy .brand em{font-style:normal;color:var(--accent)}
.hero-copy h1{
  font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,3.6vw,1.35rem);
  margin:0 0 .55rem;letter-spacing:-.02em;line-height:1.2;
}
.hero-copy.h1-brand h1{font-size:clamp(1.85rem,7vw,2.55rem);font-weight:800;letter-spacing:-.045em}
.hero-copy.h1-brand .brand{display:none}
.lead{margin:0 auto .95rem;color:var(--muted);font-size:clamp(.97rem,2.5vw,1.06rem);max-width:32rem}
.fine{margin:.55rem auto 0;font-size:.74rem;color:#7a8496;max-width:30rem;line-height:1.4}
.crumb{font-size:.76rem;color:#7a8496;margin:0 0 .45rem;text-align:left;font-family:var(--display)}
.crumb a{color:var(--muted);text-decoration:none}

.cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:3.05rem;
  padding:.7rem 1.45rem;background:linear-gradient(165deg,var(--accent2),var(--accent));
  color:#140c0a!important;font-family:var(--display);font-weight:800;font-size:.9rem;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;border-radius:2px;
  box-shadow:0 10px 28px rgba(255,107,90,.28);transition:transform .2s var(--ease),box-shadow .2s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,107,90,.38)}

.rail{
  display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;
  padding:.7rem var(--pad) .85rem;border-bottom:1px solid rgba(232,236,244,.06);
  position:relative;z-index:2;
}
.rail::-webkit-scrollbar{display:none}
.rail a{
  flex:0 0 auto;text-decoration:none;color:var(--muted);font-family:var(--display);
  font-size:.72rem;letter-spacing:.04em;padding:.45rem .7rem;border:1px solid rgba(42,51,72,.9);
  background:rgba(18,24,38,.65);white-space:nowrap;
}
.rail a.on{color:var(--text);border-color:rgba(255,107,90,.45);background:rgba(255,107,90,.1)}

main{position:relative;z-index:2;width:min(var(--max),100%);margin:0 auto;padding:1.35rem var(--pad) 2.2rem}
.aisle h2{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,3.2vw,1.4rem);letter-spacing:-.02em;margin:1.6rem 0 .55rem;line-height:1.2}
.aisle h3{font-family:var(--display);font-weight:650;font-size:1.02rem;margin:1.15rem 0 .4rem}
.aisle p{margin:0 0 .85rem;color:rgba(232,236,244,.9)}
.aisle ul,.aisle ol{margin:0 0 1rem;padding-left:1.15rem;color:rgba(232,236,244,.9)}
.aisle li{margin:.28rem 0}
.aisle details{border-top:1px solid rgba(42,51,72,.8);padding:.65rem 0}
.aisle summary{cursor:pointer;font-family:var(--display);font-weight:600;color:var(--text)}
.aisle blockquote{
  margin:1rem 0;padding:.85rem 1rem;border-left:3px solid var(--accent);
  background:rgba(18,24,38,.55);color:var(--muted);font-style:normal;
}
.ledger,.meter,.score{width:100%;border-collapse:collapse;margin:0 0 1.1rem;font-size:.92rem}
.ledger th,.ledger td,.meter th,.meter td,.score th,.score td{
  border:1px solid rgba(42,51,72,.85);padding:.55rem .65rem;text-align:left
}
.ledger th,.meter th,.score th{background:rgba(18,24,38,.8);font-family:var(--display);font-size:.78rem;letter-spacing:.04em}
.wire{display:grid;gap:.55rem;margin:0 0 1.1rem}
.wire .step{border:1px dashed rgba(42,51,72,.95);padding:.75rem .85rem;background:rgba(18,24,38,.4)}
.wire .n{font-family:var(--display);color:var(--accent);font-size:.72rem;letter-spacing:.1em}
.picker{display:grid;gap:.35rem;margin:0 0 1.2rem}
.picker a{
  display:block;text-decoration:none;color:var(--text);padding:.8rem .9rem;
  border-left:3px solid rgba(255,107,90,.55);background:rgba(18,24,38,.5);
  font-family:var(--display);font-weight:650;
}
.picker a span{display:block;font-family:var(--body);font-weight:400;color:var(--muted);font-size:.88rem;margin-top:.2rem}
.booth{display:grid;gap:.7rem;margin:0 0 1.1rem}
.booth .slot{padding:.85rem;border:1px solid rgba(42,51,72,.9);background:linear-gradient(135deg,rgba(18,24,38,.7),rgba(24,32,51,.45))}
.gate{border:1px solid rgba(255,107,90,.35);padding:1rem;margin:0 0 1.1rem;background:rgba(255,107,90,.06)}
.inline-q{margin:0 0 .75rem}
.inline-q strong{display:block;font-family:var(--display);margin-bottom:.2rem;color:var(--text)}
.note{font-size:.88rem;color:var(--muted)}
.mid-cta{margin:1.4rem 0;text-align:center}

.foot{border-top:1px solid rgba(232,236,244,.07);padding:1.3rem var(--pad) 1.6rem;position:relative;z-index:2}
.foot-nav{display:flex;flex-wrap:wrap;gap:.55rem .95rem;margin-bottom:.7rem}
.foot-nav a{color:var(--muted);text-decoration:none;font-size:.86rem}
.foot-copy{margin:0;font-size:.74rem;color:#6a7385}

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:.55rem var(--pad) calc(.55rem + var(--safe-b));
  background:linear-gradient(180deg,transparent,rgba(8,11,17,.92) 28%);
  display:flex;justify-content:center;
}
.dock .cta{width:min(100%,420px)}

@media(min-width:900px){
  .stage{min-height:min(78dvh,680px)}
  .panes{width:min(560px,48vw)}
  .rail{justify-content:center}
}