:root{
  --ink:#1d0b24; --night:#2e0f33; --plum:#4a1a4a;
  --red:#d63f4a; --orange:#ff7f1a; --gold:#ffc83d; --pink:#ff6b6b;
  --cream:#f2ead0; --grass:#4f9d3a; --grass-d:#2f6b2a; --blue:#2a52be; --blue-d:#1b3585; --sky:#12163a;
  --px:4px;
  --h:'Press Start 2P',ui-monospace,monospace;
  --b:'VT323',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--night);color:var(--cream);font:24px/1.25 var(--b);-webkit-font-smoothing:none;overflow-x:hidden}
img{image-rendering:pixelated;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--h);font-weight:400;margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:4px solid var(--gold);outline-offset:3px}

/* pixel-notched box */
.px{position:relative;background:var(--sky);
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--cream),0 var(--px) 0 0 var(--cream),calc(-1*var(--px)) 0 0 0 var(--cream),var(--px) 0 0 0 var(--cream),
             0 calc(var(--px)*2) 0 0 rgba(0,0,0,.35)}

/* buttons */
.btn{font:14px/1 var(--h);color:#fff;background:var(--blue);border:0;padding:16px 20px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;
  box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),inset 0 -6px 0 0 var(--blue-d),inset 0 6px 0 0 #5d84ee;
  transition:transform .08s}
.btn:hover{background:#3a64d8;transform:translateY(-2px)}
.btn:active{transform:translateY(2px)}
.btn-sm{font-size:11px;padding:12px 14px}
.btn-big{font-size:16px;padding:22px 28px;background:var(--red);box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),inset 0 -6px 0 0 #9c2733,inset 0 6px 0 0 #ff7a7a}
.btn-big:hover{background:#e84f5a}
.btn-ghost{background:var(--gold);color:var(--ink);font-size:13px;padding:20px 24px;box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),inset 0 -6px 0 0 #d9961a,inset 0 6px 0 0 #fff0a8}
.btn-ghost:hover{background:#ffd86a}
.fine{font-size:20px;opacity:.8;margin:14px 0 0}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:68px;display:flex;align-items:center;gap:24px;padding:0 20px;background:rgba(29,11,36,.92);border-bottom:4px solid var(--ink);backdrop-filter:blur(4px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:10px/1.4 var(--h);color:var(--gold)}
.brand-icon{width:32px;height:32px;box-shadow:0 0 0 3px var(--cream)}
.nav nav{margin-left:auto;display:flex;gap:6px}
.nav nav a{font:11px var(--h);text-decoration:none;padding:12px 12px;color:var(--cream)}
.nav nav a:hover{color:var(--gold)}
.nav nav a:hover::before{content:'\25B6 ';color:var(--gold);font-size:8px}

/* hero */
.hero{position:relative;padding:130px 20px 0;overflow:hidden;
  background:linear-gradient(180deg,#8e2f4f 0 12%,#c13a4c 12% 24%,#e34f46 24% 36%,#f2682f 36% 50%,#ff8a1f 50% 62%,#ffb133 62% 72%,#2e0f33 72%);}
.sky{position:absolute;inset:0;pointer-events:none}
.sun{position:absolute;left:50%;bottom:22%;width:360px;height:360px;margin-left:-180px;background:#ffd24d;clip-path:polygon(0 50%,6% 36%,14% 24%,26% 14%,38% 8%,50% 6%,62% 8%,74% 14%,86% 24%,94% 36%,100% 50%,100% 100%,0 100%);opacity:.85;
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 18px);mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 18px)}
.cloud{position:absolute;height:12px;width:120px;background:#ff8f8f;box-shadow:12px -12px 0 #ff8f8f,36px -12px 0 #ff8f8f,60px -24px 0 #ffa9a0,24px 12px 0 #d94b57,84px 0 0 #ffa9a0,-12px 0 0 #ff8f8f;opacity:.8;animation:drift 90s linear infinite}
.c1{top:16%;left:6%} .c2{top:26%;left:58%;animation-duration:120s;transform:scale(1.3)} .c3{top:12%;left:80%;animation-duration:70s;transform:scale(.8)}
@keyframes drift{from{translate:-120px 0}to{translate:140px 0}}
.hero-inner{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center;padding-bottom:70px}
.est{font:11px var(--h);color:var(--gold);letter-spacing:1px;margin:0 0 20px;text-shadow:3px 3px 0 var(--ink)}
.logo{display:flex;flex-direction:column;gap:8px;font-size:clamp(30px,4.3vw,62px);line-height:1;color:var(--gold);
  text-shadow:0 4px 0 #e08a14,0 8px 0 #a85a0e,4px 4px 0 var(--ink),-4px 4px 0 var(--ink),0 12px 0 var(--ink)}
.logo span:last-child{color:#fff3b8}
.lede{font-size:34px;line-height:1.1;margin:32px 0 28px;color:#fff;text-shadow:3px 3px 0 var(--ink);max-width:16em}
.lede b{color:var(--gold);font-weight:400}
.logo{margin-bottom:20px}
.hero .est{margin:0 0 40px}
.cta-row{display:flex;flex-direction:column;gap:44px;align-items:flex-start}

/* TV */
.tv-wrap{position:relative}
.tv{margin:0;position:relative;filter:drop-shadow(0 12px 0 rgba(29,11,36,.55));animation:bob 5s ease-in-out infinite}
.tv img{display:block;width:100%;background:#1b0f24;border:4px solid var(--ink)}
.tv canvas{position:absolute;left:12.6%;top:18.5%;width:60%;height:48.5%;opacity:0;pointer-events:none;image-rendering:pixelated;transition:opacity .05s}
.tv canvas.on{opacity:1}
@keyframes bob{50%{transform:translateY(-8px)}}
.tv-remote{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.tv-cap{font:10px/1.5 var(--h);color:var(--gold);text-align:center;min-width:9em;text-shadow:2px 2px 0 var(--ink)}
.grass{position:absolute;left:0;right:0;bottom:0;height:34px;background:var(--grass);box-shadow:inset 0 8px 0 #6bbb4d}
.grass::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px;
  background:repeating-linear-gradient(90deg,transparent 0 12px,var(--grass) 12px 16px,transparent 16px 28px,#6bbb4d 28px 32px,transparent 32px 52px);}

/* ticker */
.ticker{background:var(--ink);border-block:4px solid var(--gold);overflow:hidden;white-space:nowrap;padding:14px 0}
.ticker-track{display:inline-flex;animation:tick 40s linear infinite}
.ticker span{font:12px var(--h);color:var(--gold);padding-right:0}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:100px 20px}
.wrap{max-width:1180px;margin:0 auto}
.sec-title{font-size:clamp(20px,3.6vw,38px);line-height:1.3;color:#fff;text-shadow:4px 4px 0 var(--ink);margin-bottom:20px}
.sec-title small{display:block;font-size:11px;color:var(--orange);margin-bottom:16px;letter-spacing:2px}
.sec-sub{font-size:28px;max-width:34em;margin:0 0 44px;opacity:.92}

/* story */
.story{background:linear-gradient(180deg,var(--night),#3a1442)}
.dialog{display:flex;gap:28px;padding:28px;margin:44px 0 70px;background:var(--blue-d);--px:6px}
.dialog-face{width:180px;align-self:flex-end;margin:-70px 0 -28px;flex:none;filter:drop-shadow(6px 0 0 rgba(0,0,0,.3))}
.dialog-body{position:relative;flex:1;padding-bottom:12px}
.who{font:12px var(--h);color:var(--gold);margin:0 0 14px}
.typed p{font-size:30px;line-height:1.2;margin:0 0 14px;min-height:1.2em}
.typed .cursor::after{content:'\2588';animation:blink .6s steps(2) infinite;margin-left:2px;color:var(--gold)}
.skipbtn{position:absolute;right:0;bottom:-6px;background:none;border:0;color:var(--gold);font:16px var(--h);cursor:pointer;animation:hop 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes hop{50%{transform:translateY(5px)}}
.pillars{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.pillars li{padding:28px 24px;background:#241047;transition:transform .15s}
.pillars li:hover{transform:translateY(-6px)}
.ico{display:grid;place-items:center;width:56px;height:56px;background:var(--red);color:#fff;font:22px var(--h);margin-bottom:20px;box-shadow:0 -4px 0 var(--ink),0 4px 0 var(--ink),-4px 0 0 var(--ink),4px 0 0 var(--ink)}
.pillars li:nth-child(2) .ico{background:var(--blue)} .pillars li:nth-child(3) .ico{background:#c28b00}
.pillars h3{font-size:13px;line-height:1.5;margin-bottom:12px;color:var(--gold)}
.pillars p{margin:0;font-size:25px}

/* games */
.games{background:var(--grass-d);background-image:
  repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 8px,transparent 8px 16px),repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 8px,transparent 8px 16px)}
.games .sec-title small{color:var(--gold)}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 28px}
.shot{padding:0;border:0;cursor:zoom-in;color:inherit;text-align:left;font:inherit;display:flex;flex-direction:column;background:var(--ink);transition:transform .15s;--px:4px}
.shot:hover{transform:translateY(-8px) rotate(-1deg)}
.shot:nth-child(even):hover{transform:translateY(-8px) rotate(1deg)}
.shot img{display:block;width:100%;aspect-ratio:2622/1206;object-fit:cover}
.shot-cap{display:block;padding:12px 14px 14px;font-size:21px;line-height:1.1;color:var(--cream)}
.shot-cap b{display:block;font:10px/1.5 var(--h);color:var(--gold);margin-bottom:6px;font-weight:400}

/* cast */
.cast{background:radial-gradient(circle at 70% 30%,#5a2358 0,var(--night) 60%)}
.select{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:start}
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:var(--sky);border:0;color:var(--cream);cursor:pointer;padding:8px 4px 6px;font:8px var(--h);display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:0 -4px 0 #5a5a8a,0 4px 0 #5a5a8a,-4px 0 0 #5a5a8a,4px 0 0 #5a5a8a;transition:transform .1s}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;background:linear-gradient(#3b2a6b,#241047)}
.tile:hover{transform:translateY(-4px)}
.tile.on{box-shadow:0 -4px 0 var(--gold),0 4px 0 var(--gold),-4px 0 0 var(--gold),4px 0 0 var(--gold);background:#3a2a1a;animation:flash 1s steps(2) infinite}
.tile.on span{color:var(--gold)}
@keyframes flash{50%{box-shadow:0 -4px 0 var(--orange),0 4px 0 var(--orange),-4px 0 0 var(--orange),4px 0 0 var(--orange)}}
.profile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:end;padding:28px;min-height:420px;background:linear-gradient(135deg,#241047,#12163a);--px:6px;overflow:visible}
.portrait{align-self:end;margin:-70px 0 -28px;text-align:center}
.portrait img{max-height:380px;width:auto;margin:0 auto;filter:drop-shadow(0 10px 0 rgba(0,0,0,.35));animation:pop .25s steps(3)}
@keyframes pop{from{transform:translateY(24px);opacity:0}}
.pinfo{align-self:center}
.pinfo h3{font-size:24px;color:var(--gold);text-shadow:3px 3px 0 var(--ink)}
.tag{font:11px/1.6 var(--h);color:var(--orange);margin:12px 0 18px}
.pinfo p:last-child{font-size:27px;margin:0}

/* chapters */
.chapters{background:linear-gradient(180deg,#3a1442,var(--night))}
.levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:x}
.lv{display:flex;gap:16px;align-items:center;padding:16px 18px;background:#1b0f3a;transition:transform .12s,background .12s}
.lv:hover{transform:translateY(-4px);background:#2a1860}
.lv b{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--orange);color:var(--ink);font:15px var(--h);box-shadow:0 -4px 0 var(--ink),0 4px 0 var(--ink),-4px 0 0 var(--ink),4px 0 0 var(--ink)}
.lv:nth-child(3n+2) b{background:var(--gold)} .lv:nth-child(3n) b{background:var(--pink)}
.lv h3{font-size:11px;line-height:1.6;color:#fff;margin-bottom:4px}
.lv p{margin:0;font-size:21px;opacity:.8;line-height:1}

/* play */
.play{background:linear-gradient(180deg,var(--night) 0,#7a2650 55%,#e34f46 100%);padding-bottom:140px}
.play-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center}
.toss{padding:20px;background:#12163a;--px:6px}
.score{display:flex;justify-content:space-between;font:11px var(--h);color:#9fb0ff;margin-bottom:14px}
.score b{color:var(--gold);font-weight:400}
.lane{position:relative;height:300px;overflow:hidden;background:linear-gradient(180deg,#3b8b34,#2f6b2a);}
.board{position:absolute;left:50%;top:18px;width:240px;margin-left:-120px}
.bag{position:absolute;left:50%;bottom:10px;width:48px;height:48px;margin-left:-24px;image-rendering:pixelated}
.pop{position:absolute;left:0;right:0;top:46%;text-align:center;font:16px var(--h);color:var(--gold);text-shadow:3px 3px 0 var(--ink);opacity:0}
.pop.show{animation:popUp 1.1s steps(8) forwards}
@keyframes popUp{0%{opacity:1;transform:translateY(10px)}80%{opacity:1}100%{opacity:0;transform:translateY(-28px)}}
.toss .btn{width:100%;margin-top:20px;background:var(--red);box-shadow:0 -4px 0 var(--ink),0 4px 0 var(--ink),-4px 0 0 var(--ink),4px 0 0 var(--ink),inset 0 -6px 0 #9c2733,inset 0 6px 0 #ff7a7a}

/* footer */
.foot{background:var(--ink);text-align:center;padding:50px 20px 60px;border-top:4px solid var(--gold)}
.logo-sm{font:14px var(--h);color:var(--gold);margin:0 0 16px}
.foot p{margin:8px 0}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(20,6,26,.94);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:16px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:78vh;border:4px solid var(--cream)}
.lightbox p{font:12px var(--h);color:var(--gold);margin:0}
.lb-x{position:absolute;top:20px;right:20px}

/* responsive */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:30px}
  .shots{grid-template-columns:repeat(2,1fr)}
  .select,.play-inner{grid-template-columns:1fr}
  .levels{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:22px}
  .nav nav{display:none}.nav .btn{margin-left:auto}
  .hero{padding-top:100px}
  .sun{width:240px;height:240px;margin-left:-120px}
  .sec{padding:70px 16px}
  .shots,.levels{grid-template-columns:1fr}
  .dialog{flex-direction:column;padding:20px;margin-top:80px}
  .dialog-face{width:130px;align-self:center;margin:-110px 0 0}
  .typed p{font-size:26px}
  .profile{grid-template-columns:1fr;text-align:center;padding:20px}
  .portrait{margin:-70px 0 0}
  .portrait img{max-height:240px}
  .roster{grid-template-columns:repeat(4,1fr);gap:10px}
  .tv-remote{gap:8px}
  .btn-big{font-size:13px;padding:18px 18px}
  .lede{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* deal box */
.deal{list-style:none;margin:28px 0 8px;padding:18px 20px;background:#241047;--px:4px;display:grid;gap:10px}
.deal li{font-size:25px;line-height:1.1}
.deal b{font:11px var(--h);color:var(--ink);background:var(--gold);padding:4px 8px;margin-right:10px;display:inline-block;vertical-align:2px}
.fine a{color:var(--gold)}

/* sub pages */
.page-head{padding:130px 20px 60px;background:linear-gradient(180deg,#8e2f4f 0 20%,#c13a4c 20% 40%,#e34f46 40% 60%,#f2682f 60% 80%,#ff8a1f 80%);border-bottom:8px solid var(--ink)}
.page-title{font-size:clamp(28px,5vw,56px);color:var(--gold);text-shadow:0 4px 0 #a85a0e,4px 4px 0 var(--ink),0 8px 0 var(--ink);margin:6px 0 18px}
.lede-sm{font-size:30px;margin:0;color:#fff;text-shadow:3px 3px 0 var(--ink)}
.page-head .est{margin-bottom:10px}
.doc{background:linear-gradient(180deg,var(--night),#3a1442);padding-top:60px}
.narrow{max-width:820px}
.nav nav a[aria-current]{color:var(--gold)}
.jump{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.jump a{font:10px var(--h);padding:12px 14px;background:var(--blue);color:#fff;text-decoration:none;box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink)}
.jump a:hover{background:#3a64d8}
.doc-h{font-size:16px;color:var(--gold);text-shadow:3px 3px 0 var(--ink);margin:48px 0 24px;line-height:1.5}
.doc-h:first-of-type{margin-top:8px}
.qa{margin:0 0 22px;padding:0;background:#1b0f3a}
.qa summary{cursor:pointer;list-style:none;padding:18px 54px 18px 20px;font:12px/1.7 var(--h);color:#fff;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';position:absolute;right:18px;top:50%;translate:0 -50%;font:18px var(--h);color:var(--orange)}
.qa[open] summary::after{content:'\2212'}
.qa[open] summary{color:var(--gold)}
.qa summary:hover{background:#2a1860}
.qa p{margin:0;padding:4px 22px 22px;font-size:26px}
.qa a,.prose a{color:var(--gold)}
.qa b,.prose b{color:#fff;font-weight:400;background:rgba(255,200,61,.18);padding:0 4px}
.cta-box{margin-top:56px;padding:28px;text-align:center;background:#241047}
.cta-box p{font-size:30px;margin:0 0 24px}
.prose p,.prose li{font-size:26px;line-height:1.3}
.prose h2{font-size:14px;line-height:1.6;color:var(--gold);text-shadow:3px 3px 0 var(--ink);margin:42px 0 14px}
.summary{padding:24px 28px;background:#241047;margin:0 0 36px}
.summary h2{margin-top:0}
.summary ul{margin:0;padding-left:26px}
.summary li{margin:6px 0}
@media (max-width:680px){.qa summary{font-size:11px}.qa p{font-size:24px}.page-head{padding-top:100px}}

/* phone chip + controller section */
.phone-chip{position:absolute;right:-6px;bottom:44px;width:42%;text-decoration:none;color:#fff;background:transparent;padding:0;z-index:3;transition:transform .15s;
  box-shadow:none;transform:rotate(2deg)}
.phone-chip:hover{transform:rotate(0) translateY(-4px)}
.phone-chip img{display:block;width:100%}
.phone-chip>span:not(.iphone){display:block;padding:8px 10px;font:8px/1.5 var(--h);background:var(--ink);color:var(--cream)}
.phone-chip b{background:var(--red);color:#fff;padding:2px 5px;margin-right:6px;font-weight:400}
.controller{background:linear-gradient(180deg,#3a1442,#12163a)}
.ctl-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.ctl-fig{margin:0}

.ctl-fig figcaption{font:10px var(--h);color:#7dffb0;text-align:center;margin-top:24px}
.ctl-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.ctl-list li{font-size:28px;display:flex;gap:14px;align-items:center}
.ctl-list b{flex:none;width:40px;height:40px;display:grid;place-items:center;background:var(--gold);color:var(--ink);font:14px var(--h);box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink)}
@media (max-width:1000px){.ctl-grid{grid-template-columns:1fr;gap:36px}.phone-chip{width:46%;right:0;bottom:56px}}
@media (max-width:680px){.phone-chip{position:static;width:100%;margin:22px 0 0;transform:none}.phone-chip span{font-size:9px}}

.ctl-list em{font-style:normal;color:var(--gold)}

/* iPhone frame (landscape) */
.iphone{position:relative;display:block;padding:2.4% 2.6%;background:linear-gradient(135deg,#3a3a42,#17171c 40%,#2a2a31);border-radius:7.5% / 15%;
  box-shadow:inset 0 0 0 2px #55555e,inset 0 0 0 6px #0b0b0e,0 18px 0 rgba(0,0,0,.35),0 0 0 3px #0b0b0e;transform:rotate(-1.5deg)}
.iphone img{display:block;width:100%;height:auto;border-radius:5.4% / 11.5%;image-rendering:auto;background:#000}
.iphone .island{position:absolute;left:3.7%;top:50%;width:1.6%;height:16%;translate:0 -50%;background:#000;border-radius:999px;box-shadow:0 0 0 1px #1c1c20}
.iphone .sbtn{position:absolute;background:#2a2a31;box-shadow:inset 0 0 0 1px #0b0b0e}
.iphone .s1{top:-1.4%;left:14%;width:7%;height:1.4%;border-radius:3px 3px 0 0}
.iphone .s2{top:-1.4%;left:24%;width:7%;height:1.4%;border-radius:3px 3px 0 0}
.iphone .s3{bottom:-1.4%;right:12%;width:12%;height:1.4%;border-radius:0 0 3px 3px}
.iphone .s4{top:-1.4%;right:20%;width:0;height:0}
.iphone.mini{padding:3%;border-radius:8% / 16%;transform:none;box-shadow:inset 0 0 0 1px #55555e,inset 0 0 0 3px #0b0b0e;border-radius:8% / 16%}
.iphone.mini img{border-radius:6% / 12%}
.iphone.mini .island{left:4.4%;width:1.8%;height:15%}
.phone-chip{padding:0;background:transparent;box-shadow:none}

.phone-chip>span:not(.iphone){margin-top:10px;background:var(--ink);box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink)}

.btn-soon{cursor:default;background:#5a4a6a;box-shadow:0 -4px 0 var(--ink),0 4px 0 var(--ink),-4px 0 0 var(--ink),4px 0 0 var(--ink),inset 0 -6px 0 #3e3050,inset 0 6px 0 #7a6a8a;color:var(--cream);animation:soon 1.2s steps(2) infinite}
.btn-soon:hover{background:#5a4a6a;transform:none}
.btn-soon:active{transform:none}
@keyframes soon{50%{color:var(--gold)}}

/* smaller hero buttons */
.hero .btn-big{font-size:12px;padding:16px 20px}
.hero .btn-ghost{font-size:10px;padding:14px 18px}
.hero .cta-row{gap:32px}