/* ── section rhythm: contained slab / full-bleed band ── */
.slab{padding:8px 0 30px}
.band{background:linear-gradient(180deg,#0e1116,#0b0d10);border-top:1px solid var(--edge);
border-bottom:1px solid var(--edge);padding:34px 0 32px;margin:8px 0 30px}
.slab-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 16px}
.slab-head h2{margin:0;font-size:clamp(21px,3.4vw,30px);line-height:1.12;letter-spacing:-.022em}
.slab-head p{margin:5px 0 0;color:var(--dim);font-size:14.5px;max-width:36rem}
.seelink{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:10px;
border:1px solid var(--hair);color:var(--ink);text-decoration:none;font:700 14px/1 inherit;
white-space:nowrap;background:rgba(255,255,255,.03)}
.seelink:hover{border-color:var(--acc)}
/* ── rack: compact game cards, chips ride on the art ── */
.rack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rack.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;
background:var(--pit);display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--acc);transform:translateY(-2px)}
.card-art{position:relative}
.card-art img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.chip{position:absolute;font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:4px 7px;
border-radius:6px;background:rgba(8,10,13,.82);backdrop-filter:blur(4px);color:#dfe5ef;
border:1px solid rgba(255,255,255,.10)}
.chip-prov{top:8px;left:8px}
.chip-rtp{top:8px;right:8px;color:var(--acc2)}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 8px}
.card-row strong{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-row em{font-style:normal;font-size:11.5px;color:var(--dimmer);white-space:nowrap}
.playkey{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0 10px 10px;
border-radius:10px;border:1px solid var(--hair);background:rgba(255,255,255,.04);color:var(--ink);
text-decoration:none;font:800 14px/1 inherit}
.playkey:hover{border-color:var(--acc);background:rgba(192,38,211,.12)}
.card p{margin:0 12px 10px;font-size:13.5px;color:var(--dim);line-height:1.45}
/* ── picture tiles ── */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--pit);
display:flex;flex-direction:column;transition:border-color .18s}
.tile:hover{border-color:var(--acc)}
.tile img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.tile-txt{padding:12px 12px 0;flex:1}
.tile-txt h3{margin:0 0 4px;font-size:16px;letter-spacing:-.012em}
.tile-txt p{margin:0 0 11px;font-size:13px;color:var(--dim);line-height:1.45}
.tile .playkey{margin:0 11px 11px}
/* ── figures ── */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);
border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;margin:0 0 26px}
.figure{background:var(--pit);padding:16px 14px}
.figure b{display:block;font-size:clamp(22px,3.6vw,30px);font-weight:800;letter-spacing:-.03em;
color:var(--acc2);line-height:1.05}
.figure span{display:block;margin-top:4px;font-size:12.5px;color:var(--dim);line-height:1.35}
/* ── spotlight ── */
.spot{display:grid;grid-template-columns:.82fr 1.18fr;border:1px solid var(--edge);
border-radius:var(--r);overflow:hidden;background:var(--pit);margin:0 0 26px}
.spot>img{width:100%;height:100%;min-height:210px;object-fit:cover}
.spot-txt{padding:22px 24px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.spot-txt h3{margin:0;font-size:21px;letter-spacing:-.02em}
.spot-txt p{margin:0;color:var(--dim);font-size:15px}
.flag{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2)}
.spot .playkey{margin:5px 0 0;max-width:250px}
.chiprow{display:flex;gap:6px;flex-wrap:wrap}
.chiprow span{font-size:11.5px;font-weight:700;color:#cfd6e2;background:var(--slate);
border:1px solid var(--hair);border-radius:20px;padding:4px 10px}
/* ── mid-page pitch ── */
.pitch{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
border:1px solid var(--edge);border-left:3px solid var(--acc);border-radius:var(--r);
background:linear-gradient(100deg,rgba(192,38,211,.09),rgba(18,21,27,.6));padding:18px 22px;margin:0 0 26px}
.pitch strong{display:block;font-size:17px;margin-bottom:4px;letter-spacing:-.015em}
.pitch p{margin:0;color:var(--dim);font-size:14.5px;max-width:38rem}
/* ── prose ── */
.prose{max-width:38rem;padding:2px 0 20px}
.prose h2{font-size:clamp(20px,3.2vw,28px);line-height:1.16;margin:30px 0 11px;letter-spacing:-.022em}
.prose h3{font-size:18px;margin:24px 0 9px;color:var(--acc2);letter-spacing:-.012em}
.prose p{margin:0 0 13px;color:#c3ccda;font-size:16px}
.prose ul,.prose ol{margin:0 0 15px;padding-left:20px;color:#c3ccda;display:grid;gap:7px}
.prose a{color:var(--acc2);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink)}
.crumb{font-size:12.5px;color:var(--dimmer);padding:16px 0 12px}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--acc2)}
/* ── lead card for inner pages ── */
.lead{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--edge);
background:var(--pit);margin:0 0 22px;isolation:isolate}
.lead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.lead:before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(100deg,#0b0d10 6%,rgba(11,13,16,.88) 44%,rgba(11,13,16,.46) 80%,rgba(11,13,16,.7))}
.lead-in{padding:28px 28px;max-width:42rem}
.lead h1{margin:0 0 9px;font-size:clamp(26px,4.1vw,40px);line-height:1.06;letter-spacing:-.025em}
.lead-sub{margin:0 0 17px;color:#c9d1de;font-size:clamp(15px,1.8vw,17px);max-width:34rem}
.lead-keys{display:flex;gap:10px;flex-wrap:wrap}
.lead-keys .solidbtn,.lead-keys .ghostbtn{min-height:48px;padding:0 20px;font-size:15px}
/* ── qbank ── */
.qbank{display:grid;gap:9px;max-width:44rem;margin:0 0 26px}
.qbank details{border:1px solid var(--edge);border-radius:12px;background:var(--pit);padding:15px 17px}
.qbank details[open]{border-color:var(--acc)}
.qbank summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;
display:flex;gap:10px;align-items:flex-start;min-height:26px}
.qbank summary::-webkit-details-marker{display:none}
.qbank summary:before{content:"+";color:var(--acc2);font-weight:800;flex-shrink:0}
.qbank details[open] summary:before{content:"–"}
.qbank .ans{margin:11px 0 0;color:var(--dim);font-size:14.5px}
/* ── panes / steps / verdicts ── */
.panes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 26px}
.panes.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pane{border:1px solid var(--edge);border-radius:var(--r);background:var(--pit);padding:19px}
.pane h3{margin:0 0 7px;font-size:17px;letter-spacing:-.015em}
.pane p{margin:0;color:var(--dim);font-size:14.5px}
.pane ol,.pane ul{margin:9px 0 0;padding-left:19px;color:var(--dim);font-size:14.5px;display:grid;gap:7px}
.note{border:1px solid var(--edge);border-left:3px solid var(--warn);border-radius:12px;
background:rgba(251,191,36,.05);padding:15px 18px;margin:0 0 20px;max-width:44rem}
.note strong{color:var(--warn)}
.note p{margin:5px 0 0;color:var(--dim);font-size:14.5px}
.verdict{border:1px solid var(--edge);border-radius:var(--r);background:var(--pit);padding:18px;
margin:0 0 12px;max-width:44rem}
.verdict header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.verdict h3{margin:0;font-size:17px}
.score{font-variant-numeric:tabular-nums;font-weight:800;color:var(--acc2);font-size:15px}
.verdict p{margin:0;color:var(--dim);font-size:14.5px}
.keyrow{display:flex;gap:11px;flex-wrap:wrap;margin:20px 0 8px}
.wallets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:0 0 24px}
.wallet{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--pit)}
.wallet-top{height:74px;display:flex;align-items:center;justify-content:center;font:800 19px/1 inherit;
color:#fff;letter-spacing:-.01em}
.w-gcash{background:linear-gradient(135deg,#1f6fe0,#0b2f66)}
.w-maya{background:linear-gradient(135deg,#22b573,#0a3d28)}
.w-qrph{background:linear-gradient(135deg,#6d28d9,#2b0f52)}
.w-bank{background:linear-gradient(135deg,#475569,#1a2029)}
.wallet .body{padding:14px}
.wallet h3{margin:0 0 6px;font-size:16px}
.wallet p{margin:0;color:var(--dim);font-size:13.5px}
/* ── footer ── */
.footzone{border-top:1px solid var(--edge);background:#0d1014;margin-top:34px;padding:26px 0 30px}
.footlinks{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0 0 12px}
.footlinks a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;
color:var(--dim);text-decoration:none}
.footlinks a:hover{color:var(--ink)}
.footzone p{margin:0 0 9px;font-size:13px;color:var(--dimmer);max-width:46rem}
.footzone a.rg{color:var(--acc2)}
.footzone p a,.prose p a,.qbank .ans a{display:inline-block;padding:3px 0}
.age{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;
border:1px solid var(--acc);border-radius:6px;color:var(--acc2);font:800 12px/1 inherit;margin-right:7px}
/* ── responsive ── */
@media(max-width:900px){
.slab{padding:4px 0 22px}
.band{padding:24px 0 22px;margin:4px 0 22px}
.slab-head{flex-direction:column;align-items:stretch;gap:10px}
.seelink{align-self:flex-start}
.rack,.rack.four{grid-template-columns:1fr 1fr}
.tiles,.tiles.three{grid-template-columns:1fr 1fr}
.figures{grid-template-columns:1fr 1fr}
.panes,.panes.two{grid-template-columns:1fr}
.wallets{grid-template-columns:1fr 1fr}
.spot{grid-template-columns:1fr}
.spot>img{min-height:0;height:165px}
.spot-txt{padding:16px 17px}
.pitch{flex-direction:column;align-items:stretch}
.pitch .solidbtn{width:100%}
.lead{border-radius:16px}
.lead:before{background:linear-gradient(180deg,rgba(11,13,16,.5),rgba(11,13,16,.9) 44%,#0b0d10)}
.lead-in{padding:17px 15px 19px}
.lead h1{font-size:clamp(25px,6.6vw,30px)}
.lead-keys{display:grid;grid-template-columns:1fr;width:100%}
.lead-keys a{width:100%}
.footzone{padding:20px 0 26px;margin-bottom:70px}
}
@media(max-width:430px){
.rack,.rack.four,.tiles,.tiles.three,.wallets{grid-template-columns:1fr}
}