/*
Theme Name: DeyPlay
Theme URI: https://deyplay.ng
Author: DeyPlay
Description: Free Nigerian games, one place. A cinematic dark games directory: hero slider, rails, game pages, Play click logging, creator claim flow.
Version: 1.4.1
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: deyplay
*/
:root{
  --bg:#121417;--surface:#1b1e23;--ink:#f6f5f2;--ink-70:#a9adb5;--ink-20:#2c3038;
  --green:#1a9a4a;--green-deep:#0e7c3a;--green-tint:#12301d;--on-green:#f6f5f2;--live:#f0603c;--overlay:#121417cc;
  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;
  --r-sm:4px;--r-card:6px;--r-sheet:20px;--lift:0 1px 2px rgba(0,0,0,.08);
  --ease:cubic-bezier(.2,0,0,1);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:inherit}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font-body)}
a{color:var(--green);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
.h1{font:800 28px/1.1 var(--font-display);letter-spacing:-.025em}
.h2{font:700 22px/1.15 var(--font-display);letter-spacing:-.01em}
.h3{font:600 18px/1.25 var(--font-body)}
.small{font-size:14px;line-height:1.45;color:var(--ink-70)}
.cap{font:500 12px/1.35 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-70);font-variant-numeric:tabular-nums}
@media(min-width:1024px){.h1{font-size:40px}.h2{font-size:28px}.h3{font-size:20px}}

/* shell */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);border-bottom:1px solid var(--ink-20)}
.wm{font:800 22px/1 var(--font-display);letter-spacing:-.03em;display:inline-flex;gap:.35em;color:var(--ink)}
.wm b{font-weight:800;color:var(--green)}
.top .spacer{flex:1}
.top nav{display:none;gap:var(--s6);align-items:center}
.top nav a{color:var(--ink);font-weight:500}
.top nav a.on{color:var(--green)}
.theme{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink-70)}
.theme:hover{background:var(--surface)}
.search-top{display:none;flex:0 1 420px}
.input{width:100%;height:40px;padding:0 var(--s4) 0 40px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--ink-20);color:var(--ink);font:inherit;outline:none}
.input:focus{border-color:var(--green)}
.inwrap{position:relative}
.inwrap svg{position:absolute;left:12px;top:11px;width:18px;height:18px;stroke:var(--ink-70);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main{max-width:1200px;margin:0 auto;padding:var(--s6) var(--s4) 96px}
@media(min-width:1024px){
  .top{padding:var(--s3) var(--s6)}
  .top nav,.search-top{display:flex}
  main{padding:var(--s8) var(--s6) var(--s12)}
  .tabbar{display:none!important}
}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;background:var(--surface);border-top:1px solid var(--ink-20);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 8px;color:var(--ink-70);font-size:11px;font-weight:500}
.tabbar a.on{color:var(--ink)}
.tabbar a.on svg{stroke:var(--green)}
.tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* home */
.hero{margin-bottom:var(--s8)}
.hero .h1{margin-bottom:var(--s1)}
.rail{margin-bottom:var(--s8)}
@media(min-width:1024px){.rail{margin-bottom:var(--s12)}}
.rail-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s3)}
.rail-head a{font-weight:600;font-size:14px}
.row{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--s4));padding:0 var(--s4) var(--s1);scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row>*{flex:0 0 calc((100% - var(--s3)*1.3)/2.3);scroll-snap-align:start}
@media(min-width:640px){.row>*{flex-basis:calc((100% - var(--s4)*2.5)/3.5)}}
@media(min-width:1024px){.row{margin:0;padding:0;gap:var(--s4);overflow:visible;display:grid;grid-template-columns:repeat(6,1fr)}.row>*{flex:none}.row>*:nth-child(n+7){display:none}}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(5,1fr)}}

.card{display:block;background:var(--surface);border-radius:var(--r-card);overflow:hidden;color:var(--ink);transition:transform 180ms var(--ease),box-shadow 180ms var(--ease);position:relative}
.card:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.card:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cover{aspect-ratio:3/4;background:var(--ink-20)}
.cover svg{width:100%;height:100%}
.card .body{padding:var(--s3)}
.card .t{font:600 16px/1.25 var(--font-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
@media(min-width:1024px){.card .t{font-size:18px}}
.card .s{font-size:14px;color:var(--ink-70);margin-bottom:var(--s2)}
.card .m{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.tag{padding:2px var(--s2);border:1px solid var(--ink-20);border-radius:var(--r-sm);font:500 12px/1.35 var(--font-body);color:var(--ink-70)}
.quick{position:absolute;top:var(--s2);right:var(--s2);height:32px;padding:0 var(--s3);border-radius:var(--r-sm);background:var(--green);color:var(--on-green);font-weight:600;font-size:14px;display:none;align-items:center;gap:6px}
@media(hover:hover){.card:hover .quick{display:inline-flex}}
.quick svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.feat{display:block;position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;color:#f6f5f2;background:var(--ink-20)}
.feat svg{width:100%;height:100%;position:absolute;inset:0}
.feat .shade{position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(to top,var(--overlay),#12141700)}
.feat .label{position:absolute;top:var(--s3);left:var(--s3);font:500 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;background:#121417cc;padding:6px var(--s2);border-radius:var(--r-sm)}
.feat .text{position:absolute;left:var(--s4);bottom:var(--s4);right:var(--s4)}
.feat .text .h1{color:#f6f5f2}
.feat .text p{opacity:.85;font-size:14px}
@media(min-width:1024px){.feat{aspect-ratio:21/9}.feat .text{left:var(--s6);bottom:var(--s6)}}

/* buttons */
.btn{height:48px;padding:0 var(--s6);border-radius:var(--r-sm);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);transition:background 180ms var(--ease);width:100%}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--green);color:var(--on-green)}
.btn.primary:hover,.btn.primary:active{background:var(--green-deep)}
.btn.secondary{border:1px solid var(--ink);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(min-width:640px){.btn{width:auto;min-width:200px}}

.badge{display:inline-flex;align-items:center;gap:var(--s1);height:24px;padding:0 var(--s2);border-radius:var(--r-sm);font:500 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.badge.v{background:var(--green-tint);color:var(--green)}
.badge.u{background:var(--ink-20);color:var(--ink-70)}
.badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* game page */
.gp{display:grid;gap:var(--s6);position:relative}
.gp .hero-cover{margin:calc(-1*var(--s6)) calc(-1*var(--s4)) 0;aspect-ratio:4/3;background:var(--ink-20);overflow:hidden}
.gp .hero-cover svg{width:100%;height:100%}
@media(min-width:1024px){
  .gp{grid-template-columns:7fr 5fr;column-gap:var(--s12);align-items:start}
  .gp .hero-cover{margin:0;aspect-ratio:16/9;border-radius:var(--r-card);grid-column:1}
  .gp .side{grid-column:2;grid-row:1/span 3;position:sticky;top:88px}
  .gp .more{grid-column:1}
}
.gp .side{display:grid;gap:var(--s4)}
.gp .studio{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.gp .stats{display:flex;gap:var(--s6);color:var(--ink-70);font-size:14px}
.gp .stats b{display:block;color:var(--ink);font:700 22px/1.15 var(--font-display);font-variant-numeric:tabular-nums}
.gp .desc{max-width:640px}
.shots{display:flex;gap:var(--s3);overflow-x:auto;margin:0 calc(-1*var(--s4));padding:0 var(--s4);scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots>div{flex:0 0 70%;aspect-ratio:4/3;background:var(--ink-20);border-radius:var(--r-card);overflow:hidden}
.shots svg{width:100%;height:100%}
@media(min-width:640px){.shots>div{flex-basis:40%}}
@media(min-width:1024px){.shots{margin:0;padding:0}.shots>div{flex-basis:32%}}
.links{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:14px}
.links a{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.links svg{width:16px;height:16px;stroke:var(--ink-70);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.claim{font-size:14px;color:var(--ink-70)}
.claim a{color:var(--ink-70);text-decoration:underline}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-70);font-size:14px;margin-bottom:var(--s4)}
.back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* search */
.chips{display:flex;gap:var(--s2);overflow-x:auto;margin:var(--s4) calc(-1*var(--s4)) var(--s6);padding:0 var(--s4);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:36px;padding:0 var(--s4);border-radius:var(--r-sm);border:1px solid var(--ink-20);font-weight:500;font-size:14px;color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.empty{padding:var(--s12) 0;text-align:center;color:var(--ink-70)}
.empty .h3{color:var(--ink);margin-bottom:var(--s2)}

/* creators */
.cr{max-width:640px}
.cr .lead{font-size:18px;color:var(--ink-70);margin:var(--s3) 0 var(--s8)}
.cr h2{margin:var(--s8) 0 var(--s3)}
.plans{display:grid;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:640px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--surface);border-radius:var(--r-card);padding:var(--s4)}
.plan .price{font:700 28px/1.1 var(--font-display);margin:var(--s2) 0}
.plan .price span{font:400 14px/1 var(--font-body);color:var(--ink-70)}
.plan ul{margin:var(--s3) 0 0;padding-left:18px;color:var(--ink-70);font-size:14px}
.plan li{margin-bottom:4px}
.free{display:grid;gap:var(--s2);font-size:14px;color:var(--ink-70)}
.free li{list-style:none}
.free ul{padding:0;margin:0;display:grid;gap:6px}
.free b{color:var(--ink);font-weight:600}

/* toast + sheet */
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(16px);background:var(--ink);color:var(--bg);padding:10px var(--s4);border-radius:var(--r-sm);font-size:14px;font-weight:500;opacity:0;transition:opacity 240ms var(--ease),transform 240ms var(--ease);pointer-events:none;z-index:20;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
@media(min-width:1024px){.toast{bottom:32px}}
.sheet-bg{position:fixed;inset:0;background:var(--overlay);display:none;z-index:30}
.sheet-bg.open{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding:var(--s6) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform 240ms var(--ease);z-index:31;max-width:560px;margin:0 auto}
.sheet.open{transform:none}
@media(min-width:640px){.sheet{bottom:auto;top:50%;transform:translate(0,-40%);border-radius:var(--r-card);opacity:0;pointer-events:none;transition:opacity 240ms var(--ease),transform 240ms var(--ease)}.sheet.open{opacity:1;pointer-events:auto;transform:translateY(-50%)}}
.sheet .h3{margin-bottom:var(--s2)}
.sheet p{color:var(--ink-70);font-size:14px;margin-bottom:var(--s4)}
.sheet .input{padding-left:var(--s4);margin-bottom:var(--s3)}
.sheet .btn{width:100%}
.sheet .close{margin-top:var(--s2);width:100%;height:44px;color:var(--ink-70);font-weight:500}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px;z-index:50}

/* cinematic */
html,body{background:#0b0c0f}
:root{--bg:#0b0c0f;--surface:#15171c;--ink-20:#262a31}
.top{background:transparent;border-bottom:0;position:fixed;left:0;right:0;background:linear-gradient(to bottom,#0b0c0fcc,#0b0c0f00)}
.top.solid{background:#0b0c0fee;backdrop-filter:blur(12px)}
main{padding-top:0}
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,var(--glow,#1a9a4a) 0%,transparent 70%);opacity:.22;transition:background 600ms var(--ease)}
.hero-slider{position:relative;margin:0 calc(-1*var(--s4));height:100svh;min-height:520px;overflow:hidden}
@media(min-width:1024px){.hero-slider{margin:0 calc(-1*var(--s6));height:100vh}}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 600ms var(--ease);display:flex;align-items:flex-end}
.slide.on{opacity:1}
.slide .art{position:absolute;inset:0}
.slide .art svg{width:100%;height:100%}
.slide .fade{position:absolute;inset:0;background:linear-gradient(to top,#0b0c0f 0%,#0b0c0fcc 28%,#0b0c0f00 60%),linear-gradient(to right,#0b0c0fcc 0%,#0b0c0f00 55%)}
.slide .copy{position:relative;padding:0 var(--s4) 88px;max-width:640px;display:grid;gap:var(--s3)}
@media(min-width:1024px){.slide .copy{padding:0 var(--s12) 120px}}
.slide .eyebrow{font:500 13px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#f6f5f2b3;display:flex;gap:var(--s2);align-items:center}
.slide .eyebrow .badge{height:22px}
.slide .title{font:800 40px/1 var(--font-display);letter-spacing:-.03em;color:#f6f5f2}
@media(min-width:640px){.slide .title{font-size:56px}}
@media(min-width:1024px){.slide .title{font-size:72px}}
.slide .line{color:#f6f5f2d9;font-size:16px;max-width:520px}
.slide .ctas{display:flex;gap:var(--s3);margin-top:var(--s2)}
.slide .ctas .btn{width:auto;min-width:0;padding:0 var(--s6)}
.btn.ghost{background:#ffffff1f;border-radius:var(--r-sm);color:#f6f5f2;backdrop-filter:blur(8px)}
.btn.ghost:hover{background:#ffffff33}
.dots{position:absolute;left:var(--s4);bottom:var(--s4);display:flex;gap:6px;z-index:2}
@media(min-width:1024px){.dots{left:var(--s12);bottom:var(--s8)}}
.dots button{height:4px;width:14px;border-radius:2px;background:#ffffff4d;transition:width 240ms var(--ease),background 240ms var(--ease)}
.dots button.on{width:32px;background:#f6f5f2}
.arrows{position:absolute;right:var(--s4);bottom:var(--s4);display:flex;gap:var(--s2);z-index:2}
@media(min-width:1024px){.arrows{right:var(--s12);bottom:var(--s8)}}
.arrows button{width:40px;height:40px;border-radius:20px;background:#ffffff1f;color:#f6f5f2;display:grid;place-items:center;backdrop-filter:blur(8px)}
.arrows svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rails{position:relative;padding-top:var(--s8)}
@media(min-width:1024px){.rails{padding-top:var(--s12)}}
.card{background:transparent;border-radius:var(--r-card)}
.card .cover{aspect-ratio:3/4;border-radius:var(--r-card);overflow:hidden;position:relative;box-shadow:0 8px 24px #00000066;background:var(--surface)}
.card .cover:after{content:"";position:absolute;inset:0;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px #ffffff14}
.card:hover{transform:translateY(-4px) scale(1.02);box-shadow:none}
.card:hover .cover{box-shadow:0 16px 40px #00000099}
.card .body{padding:var(--s2) 2px 0}
.card .t{font-size:15px}
.card .s{font-size:13px;margin-bottom:var(--s1)}
.row>*{flex-basis:calc((100% - var(--s3)*0.6)/1.6)}
@media(min-width:640px){.row>*{flex-basis:calc((100% - var(--s4)*1.5)/2.5)}}
@media(min-width:1024px){.row{grid-template-columns:repeat(4,1fr)}.row>*:nth-child(n+5){display:none}}
.grid{grid-template-columns:repeat(1,1fr)}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
.rail-head .h2{color:#f6f5f2}
.rail-head a{color:#f6f5f2b3}
.rail-head a:hover{color:var(--green)}
.gp .hero-cover{margin:0 calc(-1*var(--s4));aspect-ratio:auto;height:56vh;min-height:360px;position:relative;background:#0b0c0f}
.gp .hero-cover svg{position:absolute;inset:0;width:100%;height:100%}
.gp .hero-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0b0c0f 0%,#0b0c0f99 35%,#0b0c0f00 70%)}
@media(min-width:1024px){.gp .hero-cover{margin:0 calc(-1*var(--s6));height:62vh;border-radius:0;grid-column:1/-1}.gp .side{grid-column:1;grid-row:auto;position:static;margin-top:calc(-1*var(--s12))}.gp>div:nth-child(3){grid-column:2;margin-top:calc(-1*var(--s12))}.gp .desc{grid-column:1}.gp .more{grid-column:1/-1}}
.gp .side{margin-top:calc(-1*var(--s12));position:relative}
.gp .h1{font-size:40px;letter-spacing:-.03em}
@media(min-width:1024px){.gp .h1{font-size:56px}}
.gp .side .btn{width:auto;min-width:200px}
.gp .ctas{display:flex;gap:var(--s3)}
.pad{padding:var(--s6) var(--s4)}
@media(min-width:1024px){.pad{padding:var(--s12) var(--s6)}}
.back{position:absolute;top:calc(72px + env(safe-area-inset-top,0px));left:var(--s4);z-index:3;color:#f6f5f2;background:#ffffff1f;padding:8px 12px;border-radius:var(--r-sm);backdrop-filter:blur(8px)}
.tabbar{background:#0b0c0fee;backdrop-filter:blur(12px);border-top:1px solid #ffffff14}

/* WordPress bits */
.alignfull{margin:0 calc(-1*var(--s4))}
.gp .desc p+p{margin-top:var(--s3)}
.wp-block-image img{border-radius:var(--r-card)}
.pagination{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s8)}
.pagination .page-numbers{padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--ink-20);color:var(--ink)}
.pagination .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.admin-bar .top{top:32px}
@media(max-width:782px){.admin-bar .top{top:46px}}
.field{display:grid;gap:6px;margin-bottom:var(--s4)}
.field label{font-size:14px;font-weight:500}
.notice-inline{padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--surface);font-size:14px;margin-bottom:var(--s4)}
.dash table{width:100%;border-collapse:collapse;font-size:14px}
.dash th,.dash td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--ink-20)}
.dash th{color:var(--ink-70);font-weight:500}
.dash .n{font-variant-numeric:tabular-nums;font-weight:600}

/* spotlight banner: a second paid slot between rails */
.spot{display:block;position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;margin-bottom:var(--s8);color:#f6f5f2;box-shadow:0 16px 48px #00000080}
@media(min-width:640px){.spot{aspect-ratio:21/9}}
@media(min-width:1024px){.spot{aspect-ratio:3/1;margin-bottom:var(--s12)}}
.spot .art{position:absolute;inset:0}
.spot .art img,.spot .art svg{width:100%;height:100%;object-fit:cover;display:block}
.spot .fade{position:absolute;inset:0;background:linear-gradient(to right,#0b0c0fe6 0%,#0b0c0f99 45%,#0b0c0f00 75%),linear-gradient(to top,#0b0c0fb3,#0b0c0f00 50%)}
.spot .copy{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);display:grid;gap:var(--s2);max-width:520px}
@media(min-width:1024px){.spot .copy{left:var(--s8);bottom:var(--s8)}}
.spot .eyebrow{font:500 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#f6f5f2b3}
.spot .title{font:800 28px/1 var(--font-display);letter-spacing:-.03em}
@media(min-width:1024px){.spot .title{font-size:40px}}
.spot .line{font-size:15px;color:#f6f5f2d9}
.spot .ctas{display:flex;gap:var(--s3);margin-top:var(--s2)}
.spot .ctas .btn{width:auto;min-width:0;height:44px;padding:0 var(--s4)}
.spot:hover .art img,.spot:hover .art svg{transform:scale(1.02)}
.spot .art img,.spot .art svg{transition:transform 600ms var(--ease)}

/* hero: thumbnail carousel + video */
.slide .art video{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:1024px){
/* rails: more air under the heading, portrait Top 10 */
.rail-head{margin-bottom:var(--s6)}
@media(min-width:1024px){.rail-head{margin-bottom:var(--s8)}}
.rail-top10 .row>*{flex-basis:calc((100% - var(--s3)*1.4)/2.4)}
@media(min-width:640px){.rail-top10 .row>*{flex-basis:calc((100% - var(--s4)*2.5)/3.5)}}
@media(min-width:1024px){.rail-top10 .row{grid-template-columns:repeat(6,1fr)}.rail-top10 .row>*:nth-child(n+5){display:block}.rail-top10 .row>*:nth-child(n+7){display:none}}
.rail-top10 .card .cover .num{position:absolute;right:6px;bottom:-8px;font:800 96px/1 var(--font-display);letter-spacing:-.06em;color:#f6f5f2;opacity:.92;text-shadow:0 4px 24px #000000cc;pointer-events:none}
@media(min-width:1024px){.rail-top10 .card .cover .num{font-size:112px;right:8px;bottom:-10px}}
.rail-top10 .card .cover:before{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,#0b0c0fcc,#0b0c0f00);z-index:1}
.rail-top10 .card .cover .num{z-index:2}

/* all cards are portrait posters; Top 10 adds the rank number */
.row>*{flex-basis:calc((100% - var(--s3)*1.4)/2.4)}
@media(min-width:640px){.row>*{flex-basis:calc((100% - var(--s4)*2.5)/3.5)}}
@media(min-width:1024px){.row{grid-template-columns:repeat(6,1fr)}.row>*:nth-child(n+5){display:block}.row>*:nth-child(n+7){display:none}}
.grid{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(6,1fr)}}

/* Play now: the dominant button */
.btn.primary{min-width:168px;padding:0 var(--s8);font-weight:700}
.btn .ico-play{width:16px;height:16px;fill:currentColor;stroke:none}
.slide .ctas .btn.primary,.spot .ctas .btn.primary,.gp .ctas .btn.primary{min-width:180px}
.slide .ctas .btn.ghost,.spot .ctas .btn.ghost,.gp .ctas .btn.ghost{padding:0 var(--s4)}
@media(min-width:1024px){.slide .ctas .btn.primary{height:56px;min-width:208px;font-size:17px}.slide .ctas .btn.ghost{height:56px}}

/* wide screens: edge to edge with fluid gutters, no 1200px box */
:root{--gutter:clamp(16px,3.5vw,64px)}
main{max-width:none;padding-left:var(--gutter);padding-right:var(--gutter)}
.hero-slider{margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter))}
@media(min-width:1024px){.hero-slider{margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter))}.slide .copy{padding-left:var(--gutter)}.dots{left:var(--gutter)}.arrows{right:var(--gutter)}.top{padding-left:var(--gutter);padding-right:var(--gutter)}}
.slide .copy{padding-left:var(--gutter)}
.dots{left:var(--gutter)}.arrows{right:var(--gutter)}
.row{margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
@media(min-width:1024px){.row{margin:0;padding:0}}
.gp .hero-cover{margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter))}
@media(min-width:1024px){.gp .hero-cover{margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter))}}
.pad{padding-left:0;padding-right:0}
.back{left:var(--gutter)}
.wm{gap:0}

/* bolder type, quieter tags, no tile outline, footer */
.slide .title{font-weight:900;letter-spacing:-.035em}
.h1,.gp .h1,.spot .title{font-weight:900;letter-spacing:-.03em}
.h2,.rail-head .h2{font-weight:800;letter-spacing:-.02em}
.card .t{font-weight:700}
.card .s{font-weight:500}
.tag{background:var(--surface);border:0;color:var(--ink-70);padding:3px var(--s2)}
.card .cover:after{display:none}
.site-footer{margin-top:var(--s12);padding:var(--s12) var(--gutter) calc(var(--s12) + 72px);border-top:1px solid var(--ink-20);color:var(--ink-70);font-size:14px}
@media(min-width:1024px){.site-footer{padding-bottom:var(--s12)}}
.site-footer .inner{display:grid;gap:var(--s8)}
@media(min-width:1024px){.site-footer .inner{grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s12)}}
.site-footer .brand .wm{font-size:28px;margin-bottom:var(--s3);display:inline-flex}
.site-footer .brand p{max-width:360px}
.site-footer h4{margin:0 0 var(--s3);font:700 13px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer a{color:var(--ink-70)}
.site-footer a:hover{color:var(--ink)}
.site-footer .legal{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--ink-20);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;font-size:13px}

/* category tag: deep translucent green */
.tag{background:#0e7c3a33;color:#8fd6a8;border:0}
.tag:hover{background:#0e7c3a4d}

/* wordmark: Inter 800, the "a" in Play is a play glyph with a counter */
.wm{font-weight:800;letter-spacing:-.03em;display:inline-flex;align-items:baseline;gap:0}
.wm b{font-weight:800;color:var(--green);display:inline-flex;align-items:baseline;gap:0}
.wm .wm-a{height:.72em;width:auto;display:inline-block;position:relative;top:.02em;margin:0 .01em;fill:currentColor;stroke:none}

/* wordmark legibility: bigger in the header, heavier glyph */
.top .wm{font-size:26px}
@media(min-width:1024px){.top .wm{font-size:28px}}
.wm .wm-a{height:.76em;top:.03em;margin:0 .015em 0 .02em}

/* wordmark: all caps, DEYPLAY with the play glyph as the A */
.wm{letter-spacing:-.02em}
.wm .wm-a{height:.74em;top:.02em;margin:0 .02em}
.wm .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* lockup: standalone play mark + title-case wordmark */
.wm{display:inline-flex;align-items:center;gap:.32em;font-weight:800;letter-spacing:-.03em}
.wm b{font-weight:800;color:var(--green)}
.wm .mark{height:1.05em;width:auto;color:var(--green);fill:currentColor;flex:none}
.wm span{display:inline-block;line-height:1}

/* lockup 5: mark at 1.3x cap height, tucked against the D */
.wm{gap:.12em;align-items:center}
.wm .mark{height:1.3em;margin-left:-.04em}
.wm span{margin-top:.04em}
.top .wm{font-size:24px}
@media(min-width:1024px){.top .wm{font-size:26px}}

/* inner pages: a hero band under the fixed nav, on every page */
.page-hero{position:relative;margin:0 calc(-1*var(--gutter));padding:calc(112px + env(safe-area-inset-top,0px)) var(--gutter) var(--s8);min-height:34vh;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2);overflow:hidden;background:radial-gradient(80% 120% at 20% 0%,var(--hero-tint,#0e7c3a) 0%,transparent 60%),#0b0c0f}
.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0b0c0f 0%,#0b0c0f00 70%);pointer-events:none}
.page-hero>*{position:relative}
.page-hero .eyebrow{font:500 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#f6f5f2b3}
.page-hero .h1{font-size:36px}
.page-hero .lead{font-size:17px;color:#f6f5f2d9;max-width:560px;margin:0}
.page-hero .inwrap{max-width:720px;margin-top:var(--s3)}
@media(min-width:1024px){.page-hero{padding-top:calc(144px + env(safe-area-inset-top,0px));padding-bottom:var(--s12);min-height:40vh}.page-hero .h1{font-size:56px}.page-hero .lead{font-size:18px}}
.page-hero.quiet{min-height:0;background:#0b0c0f}
.page-hero.quiet:before{display:none}
.page-body{padding-top:var(--s8)}
@media(min-width:1024px){.page-body{padding-top:var(--s12)}}
.pad{padding-top:0}
/* creators: use the width */
.cr{max-width:1200px}
.cr .free ul{grid-template-columns:1fr}
@media(min-width:1024px){.cr .free ul{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s12)}.plans{grid-template-columns:repeat(3,1fr);gap:var(--s6)}.plan{padding:var(--s6)}}
.cr .actions{margin-top:var(--s8);display:flex;gap:var(--s3);flex-wrap:wrap}
.cr .actions .btn{width:auto;min-width:220px}
/* footer lockup: same colours as the header */
.site-footer .wm{color:var(--ink)}
.site-footer .wm b{color:var(--green)}

/* plans without prices */
.plan .h3{font-weight:700}
.plan ul{margin-top:var(--s2)}

/* ===== creators landing page ===== */
.lp-hero{position:relative;margin:0 calc(-1*var(--gutter));height:100svh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:#0b0c0f}
@media(min-width:1024px){.lp-hero{height:100vh}}
.lp-hero .art{position:absolute;inset:0}
.lp-hero .art img,.lp-hero .art svg{width:100%;height:100%;object-fit:cover;display:block}
.lp-hero .fade{position:absolute;inset:0;background:linear-gradient(to top,#0b0c0f 0%,#0b0c0fcc 30%,#0b0c0f1a 65%),linear-gradient(to right,#0b0c0fcc 0%,#0b0c0f00 60%)}
.lp-hero .copy{position:relative;padding:0 var(--gutter) 96px;max-width:860px;display:grid;gap:var(--s4)}
@media(min-width:1024px){.lp-hero .copy{padding-bottom:128px}}
.lp-hero .eyebrow{font:500 13px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#f6f5f2b3}
.lp-hero .title{font:900 44px/1 var(--font-display);letter-spacing:-.035em;color:#f6f5f2;margin:0}
@media(min-width:640px){.lp-hero .title{font-size:64px}}
@media(min-width:1024px){.lp-hero .title{font-size:80px}}
.lp-hero .lead{font-size:18px;color:#f6f5f2d9;max-width:600px;margin:0}
@media(min-width:1024px){.lp-hero .lead{font-size:20px}}
.lp-hero .ctas{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.lp-hero .ctas .btn{width:auto}

.lp-section{padding:var(--s12) 0}
@media(min-width:1024px){.lp-section{padding:96px 0}}
.lp-section .intro{max-width:720px;margin-bottom:var(--s8)}
.lp-section .intro .h1{margin-bottom:var(--s3)}
.lp-section .intro p{font-size:17px;color:var(--ink-70);margin:0}
@media(min-width:1024px){.lp-section .intro{margin-bottom:var(--s12)}.lp-section .intro p{font-size:19px}}

.lp-light{background:#f6f5f2;color:#121417;margin:0 calc(-1*var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);--ink:#121417;--ink-70:#4a4f57;--ink-20:#dad9d4;--surface:#ffffff;--green:#0e7c3a;--green-deep:#0a5a2a}
.lp-light .h1,.lp-light .h2,.lp-light .h3{color:#121417}

.ftile-grid{display:grid;gap:var(--s4)}
@media(min-width:640px){.ftile-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.ftile-grid{grid-template-columns:repeat(4,1fr);gap:var(--s6)}}
.ftile{background:var(--surface);border-radius:var(--r-card);padding:var(--s6);display:grid;gap:var(--s3);align-content:start;min-height:220px}
.ftile .ico{width:44px;height:44px;border-radius:10px;background:#0e7c3a33;display:grid;place-items:center}
.ftile .ico svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ftile .h3{font-weight:700}
.ftile p{margin:0;color:var(--ink-70);font-size:15px}

.svc-grid{display:grid;gap:var(--s4)}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.svc{background:var(--surface);border-radius:var(--r-card);padding:var(--s8) var(--s6);display:flex;flex-direction:column;gap:var(--s4);min-height:520px;box-shadow:0 1px 2px #00000014,0 12px 32px #00000014}
.svc .num{font:800 13px/1 var(--font-body);letter-spacing:.06em;color:var(--green)}
.svc .h2{font-size:28px;font-weight:800;letter-spacing:-.02em}
.svc .sub{font-size:16px;color:var(--ink-70);margin:0}
.svc ul{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:12px;color:var(--ink)}
.svc li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.svc li:before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:9px;background:#0e7c3a33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.svc .foot{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--ink-20);font-size:14px;color:var(--ink-70)}
.lp-light .btn.secondary{border-color:#121417;color:#121417}

.lp-cta{margin:0 calc(-1*var(--gutter));padding:96px var(--gutter);text-align:center;background:radial-gradient(60% 80% at 50% 100%,#0e7c3a66 0%,transparent 70%),#0b0c0f}
.lp-cta .h1{margin-bottom:var(--s3)}
.lp-cta p{color:var(--ink-70);font-size:17px;max-width:560px;margin:0 auto var(--s8)}
.lp-cta .ctas{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.lp-cta .ctas .btn{width:auto}

/* dark content band: distinct from the hero */
.lp-band{background:#111318;margin:0 calc(-1*var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);border-top:1px solid #ffffff14}
.lp-band .ftile{background:#0b0c0f}
.lp-section .intro .eyebrow{font:500 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-bottom:var(--s3)}
.lp-light .intro .eyebrow{color:#0e7c3a}

/* ===== ITC Franklin Gothic Std: Book for body, Medium for titles ===== */
@font-face{font-family:"ITC Franklin Gothic Std";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/franklin-book.woff2") format("woff2"),url("assets/fonts/franklin-book.woff") format("woff")}
@font-face{font-family:"ITC Franklin Gothic Std";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/franklin-medium.woff2") format("woff2"),url("assets/fonts/franklin-medium.woff") format("woff")}

:root{--font-display:"ITC Franklin Gothic Std","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-body:"ITC Franklin Gothic Std","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html,body{font-weight:400}
/* only two weights exist: everything heavy becomes Medium */
h1,h2,h3,h4,.h1,.h2,.h3,.slide .title,.spot .title,.lp-hero .title,.page-hero .h1,.card .t,.btn,.wm,.wm b,.wm span,.svc .h2,.svc .num,.ftile .h3,.plan .h3,.site-footer h4,.badge,.cap,.tag,.rail-head a,.chip,.chips .chip,.top nav a,.tabbar a,b,strong,.free b,.gp .stats b,.gp .studio span,.slide .eyebrow,.spot .eyebrow,.page-hero .eyebrow,.lp-hero .eyebrow,.lp-section .intro .eyebrow,.lp-hero .ctas .btn,.rail-top10 .card .cover .num{font-weight:500}
.card .s{font-weight:400}
.slide .title,.lp-hero .title,.page-hero .h1,.h1,.gp .h1{letter-spacing:-.015em}
.h2,.rail-head .h2,.svc .h2,.h3,.card .t,.wm{letter-spacing:-.005em}
.cap,.badge,.slide .eyebrow,.spot .eyebrow,.page-hero .eyebrow,.lp-hero .eyebrow,.site-footer h4{letter-spacing:.08em}
.rail-top10 .card .cover .num{letter-spacing:-.02em}

/* ===== game page v2 ===== */
.gd-hero{position:relative;margin:0 calc(-1*var(--gutter));height:88svh;min-height:540px;display:flex;align-items:flex-end;overflow:hidden;background:#0b0c0f}
@media(min-width:1024px){.gd-hero{height:92vh}}
.gd-hero .art{position:absolute;inset:0}
.gd-hero .art img,.gd-hero .art svg,.gd-hero .art video{width:100%;height:100%;object-fit:cover;display:block}
.gd-hero .fade{position:absolute;inset:0;background:linear-gradient(to top,#0b0c0f 0%,#0b0c0fd9 28%,#0b0c0f1a 62%),linear-gradient(to right,#0b0c0fcc 0%,#0b0c0f00 60%)}
.gd-hero .copy{position:relative;padding:0 var(--gutter) var(--s12);max-width:820px;display:grid;gap:var(--s3)}
@media(min-width:1024px){.gd-hero .copy{padding-bottom:88px}}
.gd-hero .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);font:500 13px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#f6f5f2b3}
.gd-hero .title{font:500 40px/1 var(--font-display);letter-spacing:-.015em;color:#f6f5f2;margin:0}
@media(min-width:640px){.gd-hero .title{font-size:56px}}
@media(min-width:1024px){.gd-hero .title{font-size:76px}}
.gd-hero .line{font-size:17px;color:#f6f5f2d9;max-width:560px;margin:0}
@media(min-width:1024px){.gd-hero .line{font-size:19px}}
.gd-hero .ctas{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.gd-hero .ctas .btn{width:auto}
@media(max-width:639px){.gd-hero .ctas{display:grid;grid-template-columns:1fr 1fr}.gd-hero .ctas .btn{width:100%;min-width:0}}
.gd-hero .meta{display:flex;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s3);color:#f6f5f2b3;font-size:13px}
.gd-hero .meta b{display:block;color:#f6f5f2;font:500 20px/1.2 var(--font-display);font-variant-numeric:tabular-nums}
.gd-back{position:absolute;top:calc(84px + env(safe-area-inset-top,0px));left:var(--gutter);z-index:3;display:inline-flex;align-items:center;gap:6px;color:#f6f5f2;background:#ffffff1f;padding:8px 12px;border-radius:var(--r-sm);backdrop-filter:blur(8px);font-size:14px}
.gd-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.gd-body{display:grid;gap:var(--s8);padding:var(--s8) 0 0}
@media(min-width:1024px){.gd-body{grid-template-columns:minmax(0,7fr) minmax(280px,4fr);column-gap:var(--s12);padding-top:var(--s12)}}
.gd-shots{grid-column:1/-1;display:flex;gap:var(--s3);overflow-x:auto;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter) var(--s1);scroll-snap-type:x mandatory;scrollbar-width:none}
.gd-shots::-webkit-scrollbar{display:none}
.gd-shots>div{flex:0 0 78%;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--surface);scroll-snap-align:start;box-shadow:0 8px 24px #00000066}
.gd-shots>div img,.gd-shots>div svg{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:640px){.gd-shots>div{flex-basis:46%}}
@media(min-width:1024px){.gd-shots{margin:0;padding:0}.gd-shots>div{flex-basis:calc((100% - var(--s4)*2)/3)}}
.gd-about{display:grid;gap:var(--s4);max-width:680px}
.gd-about .h2{margin-bottom:var(--s1)}
.gd-about p{color:#f6f5f2d9}
.gd-links{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.gd-links a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 var(--s4);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:14px;font-weight:500}
.gd-links a:hover{background:#262a31}
.gd-links svg{width:16px;height:16px;stroke:var(--ink-70);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gd-claim{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-card);background:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;font-size:14px;color:var(--ink-70)}
.gd-claim a{color:var(--ink);font-weight:500}
.gd-side{display:grid;gap:var(--s4);align-content:start}
.gd-card{background:var(--surface);border-radius:var(--r-card);padding:var(--s6)}
.gd-card .h3{margin-bottom:var(--s3)}
.gd-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px var(--s4);font-size:14px}
.gd-card dt{color:var(--ink-70)}
.gd-card dd{margin:0;color:var(--ink);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.gd-card .tags{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.gd-rails{margin-top:var(--s12)}

/* screenshots: fixed height, natural width, so portrait and landscape both show whole */
.gd-shots>div{flex:0 0 auto;aspect-ratio:auto;height:300px;width:auto}
.gd-shots>div img,.gd-shots>div svg{height:100%;width:auto;object-fit:contain;display:block}
@media(min-width:640px){.gd-shots>div{height:380px;flex-basis:auto}}
@media(min-width:1024px){.gd-shots>div{height:440px;flex-basis:auto}.gd-shots{overflow-x:auto;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter) var(--s2)}}

.slide .art img{object-position:center 30%}
.gd-hero .art img{object-position:center 30%}

/* waitlist: status chips, coming-soon rail */
.card .status{position:absolute;top:8px;left:8px;z-index:2;font:500 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:var(--r-sm);background:#0b0c0fcc;color:#f6f5f2;backdrop-filter:blur(6px)}
.card .status.soon{background:#0e7c3acc}
.rail-soon .card .cover:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0b0c0f66,transparent 50%)}
.wl-count{font-size:14px;color:var(--ink-70)}
.wl-count b{color:var(--ink);font-weight:500}
.sheet .wl-only{display:none}
.sheet.waitlist .claim-only{display:none}
.sheet.waitlist .wl-only{display:block}

/* five feature tiles */
@media(min-width:640px){.ftile-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media(min-width:1024px){.ftile-grid{grid-template-columns:repeat(5,1fr);gap:var(--s4)}.ftile{padding:var(--s4);min-height:200px}}

/* ===== submit page ===== */
.submit-grid{display:grid;gap:var(--s8)}
@media(min-width:1024px){.submit-grid{grid-template-columns:minmax(0,7fr) minmax(280px,4fr);column-gap:var(--s12)}}
.submit-form{max-width:720px;display:grid;gap:var(--s3)}
.submit-form .h3{margin:var(--s4) 0 var(--s1)}
.submit-form .field.two{display:grid;gap:var(--s3)}
@media(min-width:640px){.submit-form .field.two{grid-template-columns:1fr 1fr}}
.submit-form .input{height:44px;padding:0 var(--s3)}
.submit-form textarea.input{height:auto;padding:var(--s3);resize:vertical;line-height:1.5}
.submit-form select.input{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9adb5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat}
.submit-form .input.file{padding:9px var(--s3);font-size:14px;color:var(--ink-70)}
.submit-form .input.file::file-selector-button{background:var(--ink-20);color:var(--ink);border:0;border-radius:var(--r-sm);padding:4px 10px;margin-right:10px;font:inherit}
.choice{display:grid;gap:var(--s3)}
@media(min-width:640px){.choice{grid-template-columns:1fr 1fr}}
.choice label{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);border-radius:var(--r-card);background:var(--surface);cursor:pointer;border:1px solid transparent}
.choice label:has(input:checked){border-color:var(--green)}
.choice input{margin-top:3px;accent-color:var(--green)}
.choice b{display:block;font-weight:500}
.choice small{display:block;color:var(--ink-70);font-size:13px;margin-top:2px}
.talk{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);border-radius:var(--r-card);background:#0e7c3a26;cursor:pointer;font-size:14px}
.talk input{margin-top:3px;accent-color:var(--green)}
.submit-preview{align-self:start;position:sticky;top:96px}
.pv-fallback{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#1a9a4a,#0b0c0f);color:#f6f5f2;font:500 64px var(--font-display)}
#pv-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pv-hero{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(135deg,#1a9a4a,#0b0c0f)}
.pv-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-hero .fade{position:absolute;inset:0;background:linear-gradient(to top,#0b0c0f 0%,#0b0c0fcc 35%,transparent 70%)}
.pv-hero .copy{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);display:grid;gap:6px}
.pv-hero .eyebrow{font:500 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#f6f5f2b3}
.pv-hero .title{font:500 24px/1 var(--font-display);color:#f6f5f2}
.pv-hero .line{font-size:13px;color:#f6f5f2d9}
.pv-hero .btn{width:auto;min-width:0;height:36px;padding:0 var(--s4);font-size:14px;justify-self:start;margin-top:4px}

/* spotlight: no nested anchors; a cover link under the copy, buttons above it */
.spot{display:block;cursor:pointer}
.spot .spot-link{position:absolute;inset:0;z-index:1;border-radius:var(--r-card)}
.spot .art,.spot .fade{z-index:0}
.spot .copy{z-index:2}
.spot .copy .ctas .btn{position:relative;z-index:3}

/* mobile hardening for WordPress-rendered images */
.gd-shots>div{height:280px;flex:0 0 auto;width:auto;max-width:86vw;display:flex;align-items:center;justify-content:center}
.gd-shots>div img{height:100%;width:auto;max-width:none;object-fit:contain;display:block}
@media(min-width:640px){.gd-shots>div{height:380px;max-width:60vw}}
@media(min-width:1024px){.gd-shots>div{height:440px;max-width:none}}
.gd-hero .art img,.slide .art img,.spot .art img,.lp-hero .art img{width:100%;height:100%;max-width:none;object-fit:cover}
.card .cover img{width:100%;height:100%;max-width:none;object-fit:cover}
img[sizes="auto" i],img[sizes^="auto," i]{contain-intrinsic-size:auto}
.gd-hero{min-height:520px;height:88svh}
.gd-hero .copy{padding-bottom:var(--s8)}
@media(max-width:639px){.gd-hero .title{font-size:36px}.gd-hero .meta{gap:var(--s4)}.gd-hero .meta b{font-size:17px}.gd-body{padding-top:var(--s6)}.gd-card{padding:var(--s4)}.gd-card dl{grid-template-columns:1fr;gap:4px}.gd-card dd{text-align:left;margin-bottom:8px}}