/* Consequences of Failure: landing page.
   Brand: knowledge/brand/COF-BRAND-GUIDE.md v1. Ink ground, warm white text, cobalt identity,
   hero yellow for action (one focal per view), danger red only with an icon or a word.
   Flat fills and hard extrusions. No purple, no glows, no soft shadows. */

/* ---------- Fonts (OFL, self-hosted, Latin subset) ---------- */
@font-face{font-family:"Anton";font-weight:400;font-display:swap;src:url("../fonts/Anton-Regular.woff2") format("woff2")}
@font-face{font-family:"Black Ops One";font-weight:400;font-display:swap;src:url("../fonts/BlackOpsOne-Regular.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:400;font-display:swap;src:url("../fonts/BarlowCondensed-Regular.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url("../fonts/BarlowCondensed-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url("../fonts/BarlowCondensed-Bold.woff2") format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:400;font-display:swap;src:url("../fonts/ChakraPetch-Regular.woff2") format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url("../fonts/ChakraPetch-SemiBold.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --ink:#151B29;
  --ink-deep:#0F1420;
  --ink-2:#1A2233;
  --ink-3:#212A3F;
  --line:#2E3953;
  --line-2:#3A4766;
  --white:#F4EEDC;
  --muted:rgba(244,238,220,.76);
  --faint:rgba(244,238,220,.56);
  --yellow:#FFD52A;
  --cobalt:#2455C7;
  --cobalt-deep:#1B3F94;
  --red:#C63D39;

  --f-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --f-plate:"Black Ops One",Impact,sans-serif;
  --f-body:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-mono:"Chakra Petch",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ch:12px;               /* chamfer */
  --wrap:1200px;
  --gutter:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
@media (min-width:720px){:root{--gutter:32px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--ink);color:var(--white);font:400 1.1875rem/1.5 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:400}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--cobalt);color:var(--white)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--yellow);color:var(--ink);padding:10px 16px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.y{color:var(--yellow)}

/* ---------- Wordmark (from the game's src/styles/brand-wordmark.css) ---------- */
.ww-mark{--ww-y:var(--yellow);--ww-c:var(--cobalt);--ww-k:var(--ink);--ww-w:var(--white);
  --ww-edge:.035em .035em 0 var(--ww-k),-.035em .035em 0 var(--ww-k),.035em -.035em 0 var(--ww-k),-.035em -.035em 0 var(--ww-k),0 .045em 0 var(--ww-k),0 -.035em 0 var(--ww-k),.045em 0 0 var(--ww-k),-.035em 0 0 var(--ww-k);
  --ww-drop:.05em .06em 0 var(--ww-c),.065em .08em 0 var(--ww-c),.08em .1em 0 var(--ww-c),.095em .12em 0 var(--ww-k);
  display:inline-flex;flex-direction:column;align-items:center;padding-bottom:.08em;color:var(--ww-w);line-height:1;text-transform:uppercase;font-synthesis:none;letter-spacing:0}
.ww-main{display:block;font-family:var(--f-display);font-size:.64em;line-height:.98;white-space:nowrap;letter-spacing:.01em;color:var(--ww-w);text-shadow:var(--ww-edge),var(--ww-drop)}
.ww-sub{display:flex;align-items:center;justify-content:center;gap:.14em;font-family:var(--f-display);font-size:.96em;line-height:.95;white-space:nowrap;margin-top:.02em;letter-spacing:.01em}
.ww-fail{color:var(--ww-y);text-shadow:var(--ww-edge),var(--ww-drop)}
.ww-of{font-family:var(--f-plate);font-size:.34em;line-height:1;color:var(--ww-k);background:var(--ww-y);padding:.2em .24em .14em;letter-spacing:.02em;text-shadow:none;clip-path:polygon(.26em 0,100% 0,100% calc(100% - .26em),calc(100% - .26em) 100%,0 100%,0 .26em);box-shadow:inset 0 0 0 .07em var(--ww-k)}

/* ---------- Buttons ---------- */
.btn{--bg:var(--ink-3);--fg:var(--white);--ext:transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.8em 1.35em;border:0;background:none;color:var(--fg);font:700 1rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .2s var(--ease)}
.btn::before,.btn::after{content:"";position:absolute;inset:0;clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.btn::before{z-index:-1;background:var(--bg)}
.btn::after{z-index:-2;background:var(--ext);transform:translate(4px,4px);transition:transform .2s var(--ease)}
.btn:hover{transform:translate(-2px,-2px)}
.btn:hover::after{transform:translate(6px,6px)}
.btn:active{transform:translate(2px,2px)}
.btn:active::after{transform:translate(1px,1px)}
.btn-yellow{--bg:var(--yellow);--fg:var(--ink);--ext:var(--cobalt)}
.btn-ghost{--bg:rgba(15,20,32,.72);--fg:var(--white);--ext:transparent}
.btn-ghost::after{z-index:-2;inset:0;background:var(--white);transform:none;clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch),2px calc(var(--ch) + 1px),2px calc(100% - 2px),calc(100% - var(--ch) - 1px) calc(100% - 2px),calc(100% - 2px) calc(100% - var(--ch) - 1px),calc(100% - 2px) 2px,calc(var(--ch) + 1px) 2px,2px calc(var(--ch) + 1px))}
.btn-ghost:hover::after{transform:none;background:var(--yellow)}
.btn-ghost[aria-disabled="true"],.btn.is-disabled{cursor:default}
.btn-ghost[aria-disabled="true"]:hover,.btn.is-disabled:hover{transform:none}
.btn-ghost[aria-disabled="true"]:hover::after{background:var(--white)}
.btn.is-disabled:hover::after{background:var(--line-2)}
.btn.is-disabled{--fg:var(--muted)}
.btn.is-disabled::after{background:var(--line-2)}
.btn-sm{min-height:40px;padding:.6em 1em;font-size:.875rem;--ch:9px}
.btn-lg{min-height:56px;padding:.95em 1.6em;font-size:1.0625rem}
.btn-block{width:100%}
.btn .ic{width:1.15em;height:1.15em}
.soon-plate{font-family:var(--f-plate);font-size:.64em;letter-spacing:.06em;line-height:1;padding:.4em .5em .32em;background:var(--cobalt);color:var(--white);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .25s,border-color .25s;border-bottom:1px solid transparent}
.site-header.is-solid{background:rgba(21,27,41,.96);border-bottom-color:var(--line)}
@supports (backdrop-filter:blur(8px)){.site-header.is-solid{background:rgba(21,27,41,.9);backdrop-filter:blur(8px)}}
.bar{display:flex;align-items:center;gap:24px;height:64px;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.brand img{width:32px;height:32px}
.brand-name{font:400 1.125rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.brand-of{font-family:var(--f-plate);font-size:.62em;color:var(--ink);background:var(--yellow);padding:.18em .28em .1em;vertical-align:.2em;margin:0 .1em}
.nav{display:none;gap:4px}
.nav a{position:relative;padding:12px 12px;font:600 .9375rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--white);transition:color .2s}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.nav a:hover{color:var(--yellow)}
.nav a:hover::after{transform:scaleX(1)}
@media (min-width:900px){.nav{display:flex}}
@media (max-width:430px){.brand-name{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;display:grid;grid-template-rows:1fr auto;min-height:100vh;min-height:100svh;background:var(--ink);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-video,.hero-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-scrim{position:absolute;inset:0;background:rgba(21,27,41,.3)}
/* Flat, hard-edged ink panel behind the copy (brand: "on busy art, put the mark on an Ink band") */
.hero-scrim::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:rgba(21,27,41,.55);clip-path:polygon(0 14%,100% 0,100% 100%,0 100%)}
@media (min-width:1024px){
  .hero-video,.hero-poster{width:128%;max-width:none;object-position:50% 45%}
  .hero-scrim::before{top:0;right:auto;height:auto;width:min(56%,820px);clip-path:polygon(0 0,100% 0,78% 100%,0 100%)}
}
.hero-scrim::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:min(9vw,110px);background:var(--ink);clip-path:polygon(0 100%,100% 0,100% 100%)}
.hero-inner{position:relative;z-index:2;align-self:end;padding-top:110px;padding-bottom:18px}
.hero-title{margin:0 0 14px;line-height:0}
.hero-title .ww-mark{font-size:clamp(82px,min(24vw,21vh),196px)}
.tagline{display:inline-block;margin:0 0 18px;padding:.5em .75em .45em;background:var(--ink);font:700 clamp(.9375rem,2.1vw,1.25rem)/1.15 var(--f-body);letter-spacing:.18em;text-transform:uppercase;box-shadow:5px 5px 0 var(--cobalt)}
.tag-y{color:var(--yellow)}
.hero-lede{max-width:34ch;margin:0 0 22px;font-size:clamp(1.125rem,1.7vw,1.3125rem);line-height:1.4;color:var(--white);text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),0 -1px 0 var(--ink),-1px 0 0 var(--ink),0 2px 0 var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 16px}
.wishlist-note{min-height:1.5em;margin:10px 0 0;font-size:1rem;color:var(--white);text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink)}
.wishlist-note:empty{min-height:0;margin:0}
.watch-link{display:inline-flex;align-items:center;gap:12px;margin-top:18px;min-height:44px;font:700 1rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--white);text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink)}
.watch-link .mono{font-weight:600;color:var(--yellow);letter-spacing:.04em}
.watch-dot{display:grid;place-items:center;width:40px;height:40px;background:var(--cobalt);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background-color .2s}
.watch-dot .ic{width:18px;height:18px;fill:var(--white);stroke:none;margin-left:2px}
.watch-link:hover .watch-dot{background:var(--cobalt-deep)}
.watch-link:hover{color:var(--yellow)}
.hero-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.hero-status{margin:0;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);background:rgba(15,20,32,.8);color:var(--white);cursor:pointer;transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.icon-btn .ic{width:18px;height:18px}
.icon-btn .ic-play{display:none}
.icon-btn .ic-pause,.icon-btn .ic-play{fill:currentColor;stroke:none}
.icon-btn[aria-pressed="true"] .ic-play{display:block}
.icon-btn[aria-pressed="true"] .ic-pause{display:none}

@media (min-width:900px){
  .hero-inner{padding-bottom:24px}
  .hero-title{margin-bottom:18px}
}
/* Phones: the video sits above the title (sharper, and the copy gets clean ink) */
@media (max-width:699px){
  .hero{display:block;min-height:0}
  .hero-media{position:relative;inset:auto;aspect-ratio:1/1;max-height:62svh;width:100%}
  .hero-scrim{background:rgba(21,27,41,.12)}
  .hero-scrim::before{display:none}
  .hero-scrim::after{height:18vw}
  .hero-inner{margin-top:-15vw;padding-top:0;padding-bottom:8px}
  .hero-title .ww-mark{font-size:clamp(78px,24.5vw,120px)}
  .hero-lede{text-shadow:none;color:var(--muted)}
  .tagline{background:var(--ink-3)}
  .wishlist-note,.watch-link{text-shadow:none}
  .hero-foot{padding-top:14px;border-top:1px solid var(--line);margin-top:10px}
}
@media (max-width:420px){.tagline{letter-spacing:.13em}}

/* ---------- Sections ---------- */
.section{position:relative;padding-block:clamp(64px,9vw,120px)}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:600 .875rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.plate{font-family:var(--f-plate);font-size:.9375rem;letter-spacing:.04em;line-height:1;padding:.42em .55em .34em;background:var(--yellow);color:var(--ink);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.h-display{margin:0 0 20px;font:400 clamp(2.5rem,6.2vw,4.75rem)/.95 var(--f-display);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
.lead{font-size:clamp(1.25rem,1.9vw,1.4375rem);line-height:1.42;color:var(--white)}
.section p{color:var(--muted)}
.section .lead{color:var(--white)}
.section-head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.section-head.row{max-width:none;display:grid;gap:8px 48px;align-items:end}
@media (min-width:960px){.section-head.row{grid-template-columns:1.3fr 1fr}.section-head.row .h-display{margin-bottom:0}}
.section-sub{font-size:1.1875rem;max-width:60ch;text-wrap:pretty}
.lead,.hero-lede,.card-body p,.feat p{text-wrap:pretty}

/* Framed media: ink keyline + hard cobalt extrusion, like the wordmark */
.frame{position:relative;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--cobalt),8px 8px 0 3px var(--ink)}

/* ---------- The game ---------- */
.game-grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.game-grid{grid-template-columns:5fr 7fr;gap:64px}}
.game-copy p:last-child{margin-bottom:0}
.game-shot{margin:0 8px 8px 0;background:var(--ink-2)}
.game-shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.game-shot figcaption{position:absolute;left:0;bottom:0;padding:6px 10px;background:var(--ink);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.pillars{display:grid;grid-template-columns:1fr;gap:12px;margin-top:clamp(48px,7vw,88px)}
@media (min-width:600px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{display:grid;grid-template-columns:40px 1fr;gap:0 16px;align-items:start;padding:20px 20px 18px;background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--cobalt)}
.pillar-ic{grid-row:span 2}
@media (min-width:1024px){.pillar{display:block;padding:22px 22px 20px}}
.pillar-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:0;background:var(--cobalt);color:var(--white);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.pillar-ic .ic{width:20px;height:20px}
@media (min-width:1024px){.pillar-ic{margin-bottom:16px}}
.pillar h3{margin:2px 0 6px;font:700 1.1875rem/1.15 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--white)}
.pillar p{margin:0;font-size:1.0625rem;line-height:1.4}

/* ---------- Teaser band ---------- */
.teaser{position:relative;overflow:hidden;background:var(--ink-deep);border-block:1px solid var(--line);padding-block:clamp(72px,11vw,150px);text-align:center}
.rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from -3deg at 50% 50%,rgba(36,85,199,.30) 0deg 7deg,transparent 7deg 20deg);pointer-events:none}
.rays-soft{background:repeating-conic-gradient(from -3deg at 70% 40%,rgba(36,85,199,.12) 0deg 7deg,transparent 7deg 20deg)}
.teaser-inner{position:relative}
.stamp{display:inline-block;margin:0 0 22px;padding:.5em .8em .42em;border:2px solid var(--yellow);color:var(--yellow);background:var(--ink);font:400 .9375rem/1 var(--f-plate);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg)}
.stamp-sm{font-size:.8125rem;margin-bottom:20px}
.teaser-title{max-width:17ch;margin:0 auto 22px;font:400 clamp(2.5rem,7.4vw,6rem)/.94 var(--f-display);text-transform:uppercase;text-wrap:balance;text-shadow:3px 3px 0 var(--ink)}
.teaser-line{margin:0 auto;max-width:44ch;text-wrap:balance;font-size:clamp(1.1875rem,2vw,1.4375rem);color:var(--muted)}

/* ---------- Features (bento) ---------- */
.bento{display:grid;grid-template-columns:1fr;gap:16px}
.card{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);overflow:hidden;min-width:0}
.card-media{position:relative;overflow:hidden;background:var(--ink-deep);aspect-ratio:16/10}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-media img{transform:scale(1.03)}
.card-body{padding:20px 22px 24px;border-top:3px solid var(--ink)}
.card-body p{margin:0;font-size:1.0625rem;line-height:1.45}
.card h3{margin:0 0 10px;font:400 clamp(1.625rem,2.4vw,2rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.tag{display:inline-block;margin:0 0 12px!important;padding:.42em .55em .34em;background:var(--cobalt);color:var(--white)!important;font:400 .75rem/1 var(--f-plate)!important;letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:3px;aspect-ratio:4/3;background:var(--ink)}
.duo figure{position:relative;margin:0;overflow:hidden;min-height:0}
.duo img{object-position:50% 0}
.duo figcaption{position:absolute;left:8px;bottom:8px;padding:6px 9px 5px;background:var(--ink);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
.duo figure:last-child figcaption{color:var(--yellow)}
.c-dogs .card-media{aspect-ratio:1/1}
.c-dogs .card-media img{object-position:50% 20%}
.c-powers .card-media img{object-position:20% 50%}
.c-railgun .card-media img{object-position:70% 50%}
.c-airliner .card-media img{object-position:0 50%}

@media (min-width:640px) and (max-width:959px){
  .bento{grid-template-columns:1fr 1fr}
  .c-vanbot,.c-war,.c-careers{grid-column:1/-1}
  .c-careers .duo{aspect-ratio:16/10}
}
@media (min-width:960px){
  .bento{grid-template-columns:repeat(12,1fr);gap:20px}
  .card-media{aspect-ratio:auto;flex:1 1 auto;min-height:220px}
  .c-vanbot{grid-column:span 7}.c-vanbot .card-media{aspect-ratio:16/9;flex:none}
  .c-breach{grid-column:span 5}
  .c-careers{grid-column:span 5}.c-careers .duo{aspect-ratio:auto}
  .c-war{grid-column:span 7}.c-war .card-media{aspect-ratio:16/9;flex:none}
  .c-powers{grid-column:span 8}.c-powers .card-media{aspect-ratio:16/9;flex:none}
  .c-dogs{grid-column:span 4}.c-dogs .card-media{aspect-ratio:auto}
  .c-railgun{grid-column:span 7}.c-railgun .card-media{aspect-ratio:16/9;flex:none}
  .c-airliner{grid-column:span 5}
  .card-media img{position:absolute;inset:0}
  .duo figure img{position:absolute;inset:0}
}

/* ---------- Watch ---------- */
.watch{background:var(--ink-deep);border-block:1px solid var(--line)}
.player{margin:0 8px 8px 0;background:#000;aspect-ratio:16/9}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.player-cover{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;background:url("../media/showcase-poster.webp") center/cover no-repeat;cursor:pointer}
.player-cover::before{content:"";position:absolute;inset:0;background:rgba(21,27,41,.28);transition:background-color .2s}
.player-cover:hover::before{background:rgba(21,27,41,.12)}
.big-play{position:relative;display:grid;place-items:center;width:clamp(72px,9vw,104px);height:clamp(72px,9vw,104px);background:var(--yellow);color:var(--ink);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);transition:transform .2s var(--ease)}
.player-cover:hover .big-play{transform:scale(1.06)}
.big-play .ic{width:40%;height:40%;fill:var(--ink);stroke:none;margin-left:6%}
.player-len{position:absolute;right:12px;bottom:12px;padding:6px 10px;background:var(--ink);font-size:.875rem;letter-spacing:.08em;color:var(--white)}
.player.is-playing .player-cover{display:none}

/* ---------- Companion ---------- */
.companion-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.companion-grid{grid-template-columns:repeat(2,1fr)}.feat-lead{grid-column:1/-1}.companion-grid .feat:last-child{grid-column:1/-1}}
@media (min-width:1000px){.companion-grid{grid-template-columns:repeat(3,1fr);gap:16px}.companion-grid .feat:last-child{grid-column:auto}}
.feat{display:flex;flex-direction:column;padding:22px 22px 24px;background:var(--ink-2);border:1px solid var(--line);transition:border-color .2s}
.feat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.feat-ic{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);background:var(--ink);color:var(--white)}
.feat-ic .ic{width:22px;height:22px}
.later{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line-2);font:600 .75rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.later .ic{width:13px;height:13px}
.feat h3{margin:0 0 8px;font:700 1.3125rem/1.1 var(--f-body);letter-spacing:.06em;text-transform:uppercase}
.feat p{margin:0;font-size:1.0625rem;line-height:1.45}
.feat-lead{position:relative;overflow:hidden;background:var(--cobalt);border-color:var(--cobalt);padding:clamp(24px,4vw,40px)}
.feat-lead .feat-ic{background:var(--ink);border-color:var(--ink);color:var(--yellow);width:52px;height:52px}
.feat-lead .feat-ic .ic{width:26px;height:26px}
.feat-lead .later{border-color:rgba(244,238,220,.6);color:var(--white)}
.feat-lead h3{font:400 clamp(2.25rem,5vw,3.5rem)/.95 var(--f-display);letter-spacing:.01em;margin-bottom:12px;text-shadow:3px 3px 0 var(--ink)}
.feat-lead p{font-size:clamp(1.1875rem,1.8vw,1.375rem);max-width:52ch;color:var(--white)}
.lead-grid{display:grid;gap:24px;align-items:end}
@media (min-width:860px){.lead-grid{grid-template-columns:1fr auto;gap:48px}}
.steps{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.steps li{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;padding:14px 16px 16px;background:var(--ink);font:400 clamp(1.5rem,2.6vw,2rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
@media (min-width:860px){.steps li{flex:none;width:132px}}
.steps .mono{font-size:.8125rem;font-weight:600;letter-spacing:.1em;color:var(--yellow)}

/* ---------- Beta ---------- */
.beta{overflow:hidden}
.beta-grid{position:relative;display:grid;gap:40px;align-items:start}
@media (min-width:960px){.beta-grid{grid-template-columns:5fr 6fr;gap:64px}}
.beta-points{display:grid;gap:10px;margin-top:24px}
.beta-points li{display:flex;align-items:center;gap:10px;font-size:1.0625rem;color:var(--white)}
.beta-points .ic{width:20px;height:20px;padding:3px;background:var(--cobalt);color:var(--white);stroke-width:3}
.beta-panel{margin:0 8px 8px 0;background:var(--ink-2);padding:clamp(22px,4vw,36px)}
.form-title{margin:0 0 20px;font:400 clamp(1.75rem,3vw,2.25rem)/1 var(--f-display);text-transform:uppercase}
.field{margin:0 0 20px;padding:0;border:0;min-width:0}
.field label,.field legend{display:block;margin:0 0 8px;padding:0;font:600 .9375rem/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.req,.opt{margin-left:3px;font:600 .6875rem/1 var(--f-mono);letter-spacing:.12em;color:var(--faint);vertical-align:.1em}
.req{color:var(--yellow)}
.field input[type="email"],.field input[type="text"]{width:100%;height:54px;padding:0 16px;border:2px solid var(--line-2);border-radius:0;background:var(--ink-deep);color:var(--white);font-size:1.1875rem;transition:border-color .2s}
.field input::placeholder{color:rgba(244,238,220,.42)}
.field input:hover{border-color:#52618a}
.field input:focus{outline:none;border-color:var(--yellow)}
.field input:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.field input[aria-invalid="true"]{border-color:var(--red)}
.err{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:6px 10px;border-left:3px solid var(--red);background:rgba(198,61,57,.12);font-size:1rem;color:var(--white)!important}
.err .ic{width:18px;height:18px;color:var(--red)}
.err[hidden]{display:none}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;cursor:pointer;margin:0!important;letter-spacing:normal!important}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:2px solid var(--line-2);background:var(--ink-deep);font:600 1rem/1 var(--f-body);letter-spacing:.04em;text-transform:none;color:var(--white);transition:background-color .2s,border-color .2s}
.chip:hover span{border-color:#52618a}
.chip input:checked + span{background:var(--cobalt);border-color:var(--cobalt)}
.chip input:checked + span::before{content:"";width:12px;height:7px;border:solid var(--white);border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg)}
.chip input:focus-visible + span{outline:3px solid var(--yellow);outline-offset:2px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.check{position:relative;display:flex!important;align-items:flex-start;gap:12px;cursor:pointer;font:400 1.0625rem/1.4 var(--f-body)!important;letter-spacing:normal!important;text-transform:none!important}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{display:grid;place-items:center;flex:none;width:24px;height:24px;margin-top:1px;border:2px solid var(--line-2);background:var(--ink-deep);transition:background-color .2s,border-color .2s}
.check .box .ic{width:16px;height:16px;stroke-width:3;color:var(--ink);opacity:0}
.check:hover .box{border-color:#52618a}
.check input:checked + .box{background:var(--yellow);border-color:var(--yellow)}
.check input:checked + .box .ic{opacity:1}
.check input:focus-visible + .box{outline:3px solid var(--yellow);outline-offset:2px}
.check input[aria-invalid="true"] + .box{border-color:var(--red)}
.form-status{min-height:1.4em;margin:12px 0 0;font-size:1rem;color:var(--white)!important}
.form-status:empty{min-height:0;margin:0}
.form-status.is-error:not(:empty){padding:8px 12px;border-left:3px solid var(--red);background:rgba(198,61,57,.12)}
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"] .btn-label::after{content:"...";display:inline-block;width:1.2em;text-align:left}
.beta-done{padding:8px 0}
.beta-done:focus{outline:none}
.done-ic{display:grid;place-items:center;width:56px;height:56px;margin-bottom:18px;background:var(--yellow);color:var(--ink);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.done-ic .ic{width:28px;height:28px;stroke-width:3}
.beta-done p{color:var(--muted)}
.preview-note{margin-top:18px;padding:10px 12px;border:1px dashed var(--line-2);font-size:.8125rem;letter-spacing:.04em;color:var(--muted)!important}

/* ---------- Store band ---------- */
.store{background:var(--ink-deep);border-top:1px solid var(--line);padding-block:clamp(40px,6vw,64px)}
.store-inner{display:grid;gap:24px;align-items:center}
@media (min-width:900px){.store-inner{grid-template-columns:1fr auto;gap:48px}}
.store-title{margin:0 0 8px;font:400 clamp(2rem,4vw,3rem)/1 var(--f-display);text-transform:uppercase}
.store p{margin:0;color:var(--muted);max-width:52ch}
.store-ctas{display:flex;flex-wrap:wrap;gap:14px 16px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);border-top:1px solid var(--line);padding-top:48px}
.foot-grid{display:grid;gap:28px;align-items:end;padding-bottom:32px}
@media (min-width:860px){.foot-grid{grid-template-columns:auto 1fr}}
.ww-small{font-size:64px}
.foot-tag{margin:14px 0 0;font:700 .875rem/1.2 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 8px}
@media (min-width:860px){.foot-nav{justify-content:flex-end}}
.foot-nav a{padding:10px 8px;font:600 .9375rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--white);transition:color .2s}
.foot-nav a:hover{color:var(--yellow)}
.foot-legal{padding-bottom:32px}
.foot-legal p{margin:0;padding-top:20px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--faint)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .card:hover .card-media img{transform:none}
}