/* The front page map. The canvas draws light; every word is HTML laid over it. */
.scene-page .site-header { position:absolute; inset:0 0 auto; z-index:7; }

.hero { position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse 70% 80% at 72% 52%, #121634 0%, #0a0b16 55%, #07080f 100%); }
.hero-stage { position:absolute; inset:0; z-index:1; }
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:manipulation; }
/* The map runs the full width; the copy sits on a dark fade so it stays readable over it. */
.hero-stage::after { content:''; position:absolute; inset:0 auto 0 0; width:min(52vw,720px); pointer-events:none; background:linear-gradient(90deg, rgba(8,9,18,.92) 0%, rgba(8,9,18,.7) 55%, rgba(8,9,18,0) 100%); }

/* words on the map */
.mlabels { position:absolute; inset:0; pointer-events:none; }
.mlabel { position:absolute; left:0; top:0; white-space:nowrap; font:500 .78rem/1.2 var(--sans); }
.mlabel.region { display:flex; gap:6px; align-items:baseline; color:rgba(220,226,255,.78); letter-spacing:.02em; }
.mlabel.region b { font:600 .82rem var(--display); letter-spacing:.01em; }
.mlabel.region i { font:500 .72rem var(--mono); font-style:normal; color:rgba(160,170,220,.7); }

/* the copy, left of the map */
.hero-copy { position:relative; z-index:4; width:min(500px,38vw); margin-left:max(40px,6vw); padding:140px 0 90px; min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:0; pointer-events:none; }
.hero-copy > * { pointer-events:auto; }
.hero-copy .eyebrow { color:#9fb0ff; }
.hero-copy h1 { font:700 clamp(2.5rem,4.6vw,4.4rem)/1.0 var(--display); letter-spacing:-.035em; margin:14px 0 0; text-wrap:balance; }
.hero-sub { margin:18px 0 0; color:var(--muted); font-size:1.12rem; line-height:1.5; max-width:36ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:20px; }
.hero .cta { background:#8f9cff; color:#0a0b16; }
.hero .cta:hover, .hero .cta:focus-visible { box-shadow:0 0 34px 4px rgba(143,156,255,.5); }
.ghost-link { min-height:44px; display:inline-flex; align-items:center; padding:0 4px; background:none; border:0; color:var(--ink); font:500 .95rem var(--sans); text-decoration:underline; text-decoration-color:rgba(143,156,255,.6); text-underline-offset:.25em; }
.ghost-link[hidden] { display:none; }


@media (max-width:760px) {
  .hero { display:flex; flex-direction:column; }
  .hero-stage { position:relative; height:min(46vh,360px); margin:60px 0 10px; }
  .hero-copy { width:auto; margin:0; padding:0 18px 56px; min-height:0; }
  .hero-copy h1 { font-size:clamp(2.1rem,9vw,2.8rem); }
  .mlabel.region b { font-size:.72rem; } .mlabel.region i { display:none; }
    }
/* ---- below the map: one screen per beat */
.beats { display:flex; flex-direction:column; gap:clamp(90px,12vw,160px); padding:clamp(80px,10vw,140px) 0 120px; }
.beat { width:min(1240px,calc(100% - 40px)); margin-inline:auto; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:clamp(28px,4vw,64px); align-items:center; }
.beat-wide, .beat-sort { grid-template-columns:minmax(0,1fr); }
.beat-wide .beat-copy, .beat-sort .beat-copy { max-width:62ch; }
.beat-copy h2 { font:700 clamp(1.9rem,3.2vw,3rem)/1.04 var(--display); letter-spacing:-.03em; margin:12px 0 16px; text-wrap:balance; }
.beat-copy p { color:var(--muted); font-size:1.08rem; line-height:1.6; }
.beat-copy .eyebrow { color:#9fb0ff; }
.beat-points { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; color:var(--muted); }
.beat-points li { display:grid; grid-template-columns:80px minmax(0,1fr); gap:8px; }
.beat-points b { font-weight:600; }
.beat-points li:nth-child(1) b { color:var(--now); } .beat-points li:nth-child(2) b { color:var(--later); } .beat-points li:nth-child(3) b { color:var(--dim); }
.shot { margin:0; border-radius:16px; overflow:hidden; border:1px solid rgba(143,156,255,.22); background:#0e1020;
  box-shadow:0 40px 100px -30px rgba(80,100,255,.35), 0 20px 50px rgba(0,0,0,.55); }
.shot img { width:100%; height:auto; }
.shot-pair { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:22px; align-items:end; }
.beat-team .shot { opacity:.96; }

/* the sorting: 214 dots settle into three piles */
.sorter { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; padding:28px; border-radius:18px; border:1px solid var(--line); background:linear-gradient(180deg,#0f1226,#0b0d1b); }
.sort-dots { display:grid; grid-template-columns:repeat(auto-fill,minmax(14px,1fr)); gap:6px; }
.sort-dots i { aspect-ratio:1; border-radius:50%; background:#aab5ff; opacity:.75; box-shadow:0 0 6px rgba(143,156,255,.5); transition:background .6s, opacity .6s, box-shadow .6s; }
.sort-dots i.now { background:var(--now); opacity:1; box-shadow:0 0 10px rgba(61,211,155,.6); }
.sort-dots i.later { background:var(--later); opacity:1; box-shadow:none; }
.sort-dots i.no { background:#3a4060; opacity:.45; box-shadow:none; }
.sort-tally { display:grid; gap:14px; }
.sort-tally p { display:flex; align-items:baseline; gap:12px; padding:14px 16px; border-radius:12px; color:var(--muted); }
.sort-tally b { font:700 2.4rem/1 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; min-width:2.2ch; }
.sort-tally .now { background:rgba(61,211,155,.1); } .sort-tally .now b { color:var(--now); }
.sort-tally .later { background:rgba(242,180,60,.09); } .sort-tally .later b { color:var(--later); }
.sort-tally .no { background:rgba(120,128,170,.1); } .sort-tally .no b { color:var(--ink); }

.beat-cta { width:min(760px,calc(100% - 40px)); margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.beat-cta h2 { font:700 clamp(2.2rem,4vw,3.4rem)/1.02 var(--display); letter-spacing:-.035em; }
.beat-cta p { color:var(--muted); font-size:1.08rem; }
.beat-cta .cta { background:#8f9cff; color:#0a0b16; }
.beat-fine { font-size:.8rem!important; color:var(--dim)!important; margin-top:10px; }

@media (max-width:900px) {
  .beat, .shot-pair, .sorter { grid-template-columns:minmax(0,1fr); }
  .sort-dots { grid-template-columns:repeat(auto-fill,minmax(10px,1fr)); gap:4px; }
  .sort-tally { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .sort-tally p { flex-direction:column; gap:4px; padding:10px; font-size:.82rem; }
  .sort-tally b { font-size:1.7rem; }
}


.hero-actions[hidden] { display:none; }
@media (max-width:760px) { .hero-stage::after { display:none; } }

/* the two promises, in the hero */
.hero-points { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; max-width:440px; }
.hero-points li { display:grid; gap:2px; padding:12px 16px; border-radius:14px; border:1px solid rgba(143,156,255,.25); background:rgba(12,14,30,.72); }
.hero-points b { font:650 1.02rem var(--display); color:var(--ink); }
.hero-points li:first-child b { color:#a8b4ff; } .hero-points li:last-child b { color:#3dd39b; }
.hero-points span { color:var(--muted); font-size:.95rem; }
.hero-actions .cta { display:inline-flex; align-items:center; text-decoration:none; }
.adopt { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:22px; align-items:center; }
.adopt .sorter { grid-template-columns:minmax(0,1fr); }
.adopt .sort-tally { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.adopt .sort-tally p { flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; font-size:.85rem; }
.adopt .sort-tally b { font-size:1.8rem; }
.beat-cta { scroll-margin-top:100px; }
.beat-cta:focus { outline:none; }
.cta-form { width:min(520px,100%); text-align:left; margin-top:10px; }
@media (max-width:900px) { .adopt { grid-template-columns:minmax(0,1fr); } }

/* the name of the dot under the pointer */
.mtip { position:absolute; left:0; top:0; z-index:6; pointer-events:none; white-space:nowrap; padding:4px 10px; border-radius:8px;
  background:rgba(12,14,30,.88); border:1px solid rgba(143,156,255,.3); color:var(--ink); font:500 .8rem var(--sans); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.mtip[hidden] { display:none; }