/* Homepage v3 — configurator-first, uses style.css tokens for one visual world with the rest of the site. */
.hm-hero{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;padding:40px 0 36px}
.hm-hero::before{content:"";position:absolute;inset:-40px 0;background:radial-gradient(760px 460px at 30% 45%,rgba(0,136,201,.16),transparent 62%);pointer-events:none}
.hm-shot{position:relative;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.hm-shot img{width:100%;height:auto;display:block}
.hm-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hm-shot video.on{opacity:1}
.hm-shot .badge{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(6,8,13,.78);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 14px;font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;color:#fff}
.hm-shot .badge b{color:var(--blue-lit);font-weight:400}
/* the eyebrow sits inside the h1 so the heading carries the search phrase (GSC 2026-10-21: home ranks 11-18 for custom arcade machines); it keeps its old look */
.hm-hero h1 .eyebrow{display:block;margin:0 0 10px;line-height:1.5;font-weight:400}
.hm-hero .eyebrow{color:var(--blue-lit);font-family:var(--display);text-transform:uppercase;font-size:.76rem;letter-spacing:.16em}
.hm-hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.98;margin:10px 0 0}
.hm-hero .sub{color:#dfe5ef;font-size:1.05rem;margin:16px 0 12px;max-width:44ch}
.hm-hero .microproof{color:var(--muted);font-size:.9rem;margin-bottom:18px}.hm-hero .microproof b{color:var(--text)}
.hm-pick-t{font-family:var(--display);text-transform:uppercase;font-size:.82rem;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.hm-pick{display:flex;flex-direction:column;gap:8px}
.hm-pick a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;background:var(--panel);border:1px solid rgba(53,64,127,.55);border-radius:8px;padding:12px 14px;text-decoration:none;color:inherit;min-height:56px;transition:border-color .12s,background .12s}
.hm-pick a:hover,.hm-pick a:focus-visible{border-color:var(--blue);background:rgba(0,136,201,.08)}
.hm-pick a.on{border-color:var(--blue);background:rgba(0,136,201,.1)}
.hm-pick b{display:block;font-family:var(--display);text-transform:uppercase;font-size:.92rem}
.hm-pick span{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.hm-pick .price{font-family:var(--display);color:var(--amber);font-size:.95rem;white-space:nowrap}
.hm-hero .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.hm-hero .cta .btn-coin{text-decoration:none;display:inline-block}
.hm-hero .cta .more{color:var(--blue-lit);text-decoration:none;font-family:var(--display);text-transform:uppercase;font-size:.82rem;letter-spacing:.04em}
/* Clarity 2026-09-23: taps landing just beside these two buttons on phones. 44px is the minimum tap target. */
.hm-hero .cta .btn-coin,.hm-hero .cta .more{min-height:44px;display:inline-flex;align-items:center}
.hm-hero .cta .more{padding:10px 8px;margin:-10px -8px}
a.badge{text-decoration:none}
/* Clarity 2026-09-23: 32 of 67 mobile dead taps were on the hero film. The whole film (badge included) is now one
   named link to the Final Boss; a link wrapping the media is valid HTML and one tab stop. */
a.hm-shot{display:block;color:inherit;text-decoration:none}
a.hm-shot:focus-visible{outline:3px solid var(--blue-lit);outline-offset:-3px}
/* line-up grouped */
.hm-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.hm-group{background:var(--panel);border:1px solid rgba(53,64,127,.5);border-radius:10px;overflow:hidden}
.hm-group .gh{padding:14px 18px;border-bottom:1px solid rgba(53,64,127,.4)}
.hm-group .gh b{font-family:var(--display);text-transform:uppercase;font-size:.95rem}.hm-group .gh span{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.hm-group .gm{display:flex;gap:10px;padding:14px}
.hm-gm{flex:1;text-decoration:none;color:inherit;background:var(--bg);border:1px solid rgba(53,64,127,.4);border-radius:8px;overflow:hidden;display:block}
.hm-gm .im{height:120px;background:radial-gradient(ellipse at 50% 80%,#141a2e,#0d0f18)}.hm-gm .im img{width:100%;height:100%;object-fit:contain;display:block}
.hm-gm b{display:block;font-family:var(--display);text-transform:uppercase;font-size:.72rem;padding:8px 8px 0;line-height:1.2}
.hm-gm span{display:block;color:var(--amber);font-family:var(--display);font-size:.76rem;padding:2px 8px 10px}
/* how it works */
.hm-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:22px}
/* Full-bleed cinematic hero on desktop: the media fills the band edge to edge and the copy sits
   over it on the right. Below 960px the original stacked card layout takes over unchanged. */
@media(min-width:961px){
  /* Full-screen film hero: the video owns the whole viewport with nothing over it, and every
     word of the copy sits below the fold. Runs edge to edge and up behind the fixed header. */
  .hm-hero{display:block;margin-inline:calc(50% - 50vw);margin-top:-110px;padding:0;min-height:0}
  .hm-hero::before{display:none}
  .hm-shot{position:relative;height:100vh;border-radius:0;box-shadow:none;max-width:none;margin:0;background:#080810}
  /* Dennis, bug sheet row 59: "in desktop view, final boss marquee is cut off — want to see the whole arcade
     top and bottom." The clip is 16:9; with object-fit:cover any window WIDER than 16:9 crops top AND bottom
     (measured with research/_r59-measure.mjs: 13% at 1920x800, 12.5% at 2560x1080, 8.3% at 1536x720), and the
     render only carries ~10% headroom above the marquee — so past ~10% the marquee lost its top. `contain`
     keeps the whole machine in frame at every window shape. The letterbox is invisible: the clip's own
     background is rgb(8,8,16), which .hm-shot now matches exactly. */
  .hm-shot img,.hm-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
  /* only a soft top wash so the header stays readable, and a fade into the page at the bottom */
  /* left scrim carries the headline; it is fully clear by 66% so the machine and players are untouched */
  .hm-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,11,18,.92) 0%,rgba(8,11,18,.72) 26%,rgba(8,11,18,.28) 48%,rgba(8,11,18,0) 66%),linear-gradient(180deg,rgba(8,11,18,.62) 0%,rgba(8,11,18,.12) 16%,rgba(8,11,18,0) 34%,rgba(8,11,18,0) 74%,rgba(8,11,18,.9) 100%)}
  /* The page's only h1 lifts out of the copy block and sits over the video, aligned to the
     content column. Mobile leaves it in normal flow, so there is still exactly one h1. */
  .hm-hero h1{position:absolute;z-index:3;margin:0;pointer-events:none;
    top:clamp(9rem,24vh,17rem);left:max(3vw,calc((100vw - 1180px)/2));
    width:min(14ch,46vw);font-size:clamp(2.6rem,4.6vw,4.8rem);line-height:1;letter-spacing:.015em;
    color:#fff;opacity:.88;text-shadow:0 2px 2px rgba(0,0,0,.72),0 8px 28px rgba(0,0,0,.64);
    transform-origin:left center;will-change:opacity,transform}
  .hm-shot .badge{z-index:2;top:auto;left:auto;right:max(3vw,calc((100vw - 1180px)/2));transform:none;bottom:30px}
  /* Row 406 picker sits BELOW the film, in normal flow (Louis 2026-09-22). It was overlaid on the film:
     it collided with the headline on Dennis's monitor, and on windows under 820px tall a span-hiding
     rule blanked every label and price. Kept as a 2x2 grid so all four fit on one screen. */
  .hm-over{max-width:820px}
  .hm-over .hm-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  /* static on purpose: it must not become the h1's containing block, and it never overlaps the video */
  .hm-hero>div:not(.hm-shot){position:static;max-width:1180px;margin:0 auto;padding:52px 5vw 8px}
}
/* short desktop windows: pull the headline up and down in size so it fits the shorter film */
@media(min-width:961px) and (max-height:820px){
  .hm-hero h1{top:clamp(5.5rem,14vh,8rem);font-size:clamp(2rem,3.4vw,3.2rem)}
}
/* all widths: breathing room above the picker and between the cards and the facts line */
.hm-over{margin-top:20px}
.hm-over .hm-facts{margin:12px 0 0}
/* clip on body, never on .page: .page is capped at 1180px and would crop the full-bleed hero.
   Global, because the hero bleeds full width on phones too. */
body{overflow-x:clip}
@media(max-width:960px){
  /* Clarity 2026-10-21: half of phone visitors leave before 15% of the page; the film sat under ~66px of empty
     space (.page top padding + hero padding). Start it right under the bar, as desktop already does. */
  .hm-hero{grid-template-columns:1fr;gap:22px;padding:0 0 28px;margin-top:-2.4rem}
  /* phones get the video too, edge to edge at its native 16:9 rather than boxed in a small card */
  .hm-shot{max-width:none;margin-inline:calc(50% - 50vw);border-radius:0;aspect-ratio:16/9}
  .hm-shot img,.hm-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hm-shot .badge{top:auto;bottom:12px;left:12px;right:auto;font-size:.64rem;padding:7px 12px;white-space:nowrap}   /* phones: off the marquee, onto the kick panel, one line */
  .hm-shot .badge b{display:none}   /* the explainer is in the headline below anyway */
  .hm-hero h1{font-size:2.1rem}
  .hm-groups{grid-template-columns:1fr}
  .hm-steps{grid-template-columns:1fr 1fr}
}
/* motion (OpenRouter plan 2026-08-17): one-way reveals, transform+opacity only, reduced-motion -> final */
.rv{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.hm-hero h1 .w{display:inline-block;opacity:0;transform:translateY(18px);animation:wRise .72s cubic-bezier(.16,1,.3,1) both}
@keyframes wRise{to{opacity:1;transform:none}}
.hm-pick a{opacity:0;transform:translateY(10px);animation:chip .5s cubic-bezier(.33,1,.68,1) both}
@keyframes chip{to{opacity:1;transform:none}}
.hm-rule{display:block;height:2px;background:var(--blue-lit);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1);margin:8px 0 4px;width:44px;border-radius:2px}
.hm-rule.in{transform:scaleX(1)}
@media(max-width:960px){.rv{transform:translateY(22px) scale(.985)}.hm-hero h1 .w{transform:translateY(12px)}}
html[data-motion="final"] .rv,html[data-motion="final"] .hm-pick a,html[data-motion="final"] .hm-hero h1 .w{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
html[data-motion="final"] .hm-rule{transform:scaleX(1)!important;transition:none!important}


/* Built around you (sheet rows 268-271, 9/1). Replaces Why Phantom; How it works removed at his request.
   His purple #7926DA is 2.91:1 on the page background - it fails even large-text contrast, so it paints the
   decorative glyphs only (no contrast requirement) and TEXT uses #A353FF, the same hue, 4.92 on the page AND 4.58 on the panel.
   ⛔ Measure against --panel too, not just the page: #9D49FF passed the page at 4.54 and failed the
   cards at 4.22, and axe caught it. */
.hm-bay{--bay-ac:#A353FF;--bay-glyph:#7926DA}
.hm-bay h2 em{color:var(--bay-ac);font-style:normal}
.hm-bay .bay-sub{color:var(--muted);font-size:1.05rem;max-width:62ch;margin:14px 0 26px}
.hm-bay .bay-sub b{color:var(--bay-ac);font-weight:400}
.bay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bay-card{border:1px solid rgba(53,64,127,.55);border-radius:10px;background:var(--panel);padding:20px 18px}
.bay-card h3{font-family:var(--display);text-transform:uppercase;font-size:.95rem;letter-spacing:.03em;margin:14px 0 8px;color:var(--text)}
.bay-card p{color:var(--muted);font-size:.94rem;margin:0}
/* Clarity 2026-09-23: phone visitors tapped these cards and nothing happened, so each is a link now. */
a.bay-card{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
a.bay-card:hover,a.bay-card:focus-visible{border-color:var(--blue-lit)}
a.bay-card h3::after{content:" \2192";color:var(--blue-lit)}
.bay-i,.bay-shield{width:34px;height:34px;fill:none;stroke:var(--bay-glyph);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.bay-bar{display:grid;grid-template-columns:auto 1fr 1fr;gap:20px;align-items:start;margin-top:16px;padding:20px;border:1px solid rgba(53,64,127,.55);border-radius:10px;background:var(--panel)}
.bay-bar .bay-shield{width:40px;height:40px}
.bay-bar p{color:var(--muted);font-size:.92rem;margin:0}
.bay-bt{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--bay-ac)!important;font-size:.86rem;margin:0 0 6px!important}
.bay-bt-lg{font-size:1.15rem}
.bay-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;margin-top:16px;padding:24px;border:1px solid rgba(53,64,127,.55);border-radius:10px;background:radial-gradient(700px 300px at 20% 50%,rgba(121,38,218,.14),transparent 70%),var(--panel)}
.bay-cta p{color:var(--muted);margin:0}
.bay-act{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.bay-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.bay-chips li{border:1px solid rgba(53,64,127,.6);border-radius:999px;padding:6px 12px;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
@media(max-width:960px){.bay-grid{grid-template-columns:1fr 1fr}.bay-bar{grid-template-columns:1fr}.bay-cta{grid-template-columns:1fr}}
@media(max-width:620px){.bay-grid{grid-template-columns:1fr}}