/* Spin Winner — base styles (premium-members-club editorial language) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--surface);line-height:var(--line-body);-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0 0 .4em;line-height:var(--line-tight);font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(34px,4.2vw,58px);letter-spacing:-.018em}
h2{font-size:clamp(26px,2.6vw,38px)}
h3{font-size:clamp(20px,1.8vw,24px)}
h4{font-size:18px}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em;margin:0 0 1em}
hr{border:0;border-top:1px solid var(--rule);margin:36px 0}
hr.gold{border-top:1px solid var(--gold)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}

/* ============== HEADER ============== */
.site-header{position:sticky;top:0;z-index:250;background:var(--surface);border-bottom:1px solid var(--rule);backdrop-filter:saturate(1.2)}
.site-header .row{max-width:var(--max-w);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:24px}
.brand-mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark .logo{width:40px;height:40px;border-radius:12px;background:var(--surface-dark);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1;overflow:hidden}
.brand-mark .logo img{width:100%;height:100%;display:block;object-fit:cover}
.brand-mark .name{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1}
.brand-mark .tag{display:block;font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.main-nav a{padding:9px 14px;border-radius:999px;color:var(--ink-2);font-weight:500;font-size:14.5px;white-space:nowrap}
.main-nav a:hover{background:var(--surface-2);color:var(--ink)}
.main-nav a.is-active{background:var(--surface-2);color:var(--ink)}
.main-nav a.cta{margin-left:6px;background:var(--accent);color:#fff;padding:10px 18px;font-weight:600;box-shadow:0 4px 12px rgba(164,25,46,.25)}
.main-nav a.cta:hover{background:var(--accent-2);color:#fff}
.header-right{display:flex;align-items:center;gap:8px}
.header-cta-ghost{padding:9px 14px;border-radius:999px;color:var(--ink-2);font-weight:500;font-size:14.5px;border:1px solid var(--rule)}
.header-cta{padding:10px 16px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;font-size:14.5px;white-space:nowrap}
.header-cta:hover{background:var(--accent-2);color:#fff}

/* hamburger */
.hamburger{display:none;width:42px;height:42px;border-radius:12px;background:var(--surface-2);align-items:center;justify-content:center;position:relative;z-index:300}
.hamburger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:absolute;transition:transform var(--duration) var(--ease),opacity var(--duration) var(--ease)}
.hamburger span:nth-child(1){transform:translateY(-6px)}
.hamburger span:nth-child(2){transform:translateY(0)}
.hamburger span:nth-child(3){transform:translateY(6px)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(0) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(0) rotate(-45deg)}

.mobile-drawer{position:fixed;inset:0;background:rgba(15,26,20,.5);opacity:0;pointer-events:none;transition:opacity var(--duration) var(--ease);z-index:300}
.mobile-drawer .panel{position:absolute;top:0;right:0;height:100dvh;width:min(86vw,360px);background:var(--surface);box-shadow:-12px 0 32px rgba(15,26,20,.18);transform:translateX(100%);transition:transform 280ms var(--ease);display:flex;flex-direction:column;overflow:auto}
.mobile-drawer[data-open="true"]{opacity:1;pointer-events:auto}
.mobile-drawer[data-open="true"] .panel{transform:translateX(0)}
.mobile-drawer header{padding:18px 20px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between}
.mobile-drawer nav{padding:14px}
.mobile-drawer nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.mobile-drawer nav a{display:block;padding:12px 14px;border-radius:10px;color:var(--ink);font-weight:500}
.mobile-drawer nav a:hover{background:var(--surface-2)}
.mobile-drawer nav a.cta{margin-top:12px;background:var(--accent);color:#fff;text-align:center;font-weight:600}
.mobile-drawer .drawer-close{width:36px;height:36px;border-radius:10px;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink)}

/* ============== MAIN ============== */
main{min-height:60vh}
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
section{padding:64px 0;border-bottom:1px solid var(--rule)}
section.tight{padding:40px 0}
section.dark{background:var(--surface-dark);color:#E8F1EA;border-bottom-color:transparent}
section.dark h1,section.dark h2,section.dark h3,section.dark h4{color:#fff}
section.dark a{color:#F6EBC4}
section.band{background:var(--surface-2);border-bottom-color:var(--rule-2)}
section.last{border-bottom:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--accent)}
section.dark .eyebrow{color:var(--gold)}
section.dark .eyebrow::before{background:var(--gold)}
.lede{font-size:18px;color:var(--ink-2);max-width:62ch}

/* ============== HERO ============== */
.hero{padding:72px 0 56px;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,4.4vw,58px);margin-bottom:18px}
.hero h1 u{text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:8px}
.hero .lede{font-size:20px;color:var(--ink-2);max-width:56ch}
.hero-actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.hero-actions .btn{padding:14px 26px;border-radius:999px;font-weight:600;font-size:15.5px;display:inline-flex;align-items:center;gap:10px}
.hero-actions .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(164,25,46,.28)}
.hero-actions .btn-primary:hover{background:var(--accent-2);color:#fff}
.hero-actions .btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--rule-2)}
.hero-trust{display:flex;gap:18px;margin-top:32px;color:var(--ink-3);font-size:14px;flex-wrap:wrap}
.hero-trust strong{color:var(--ink);font-weight:600;display:block;font-size:15px}

.hero-media{position:relative}
.hero-media .tile{aspect-ratio:1/1;background:var(--surface-dark);border-radius:24px;overflow:hidden;position:relative;clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%);box-shadow:var(--shadow-deep)}
.hero-media .tile img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(15,26,20,.45))}
.hero-media .badge{position:absolute;left:-12px;bottom:24px;background:#fff;border:1px solid var(--rule);box-shadow:var(--shadow-lift);padding:14px 18px;border-radius:14px;display:flex;align-items:center;gap:12px;max-width:240px}
.hero-media .badge .b{width:42px;height:42px;border-radius:10px;background:var(--surface-2);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.hero-media .badge strong{display:block;color:var(--ink);font-size:15px}
.hero-media .badge span{color:var(--ink-3);font-size:12.5px}

@media (max-width:899px){
  .hero{padding:48px 0 36px}
  .hero .grid{grid-template-columns:1fr;gap:28px}
  .hero-media{max-width:340px;margin:0 auto}
}

/* ============== FACT STRIP ============== */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.facts .cell{padding:22px 24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:4px}
.facts .cell:last-child{border-right:0}
.facts .cell strong{font-family:var(--font-display);font-size:26px;color:var(--ink);line-height:1.1}
.facts .cell span{color:var(--ink-3);font-size:13.5px;letter-spacing:.04em}

@media (max-width:899px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts .cell:nth-child(2){border-right:0}
  .facts .cell:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
@media (max-width:480px){.facts .cell strong{font-size:22px}}

/* ============== INSTALL BAND ============== */
.install{background:var(--surface-dark);color:#E8F1EA;border-radius:24px;padding:48px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;position:relative;overflow:hidden}
.install::after{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(164,25,46,.18);filter:blur(20px)}
.install h2{color:#fff;font-size:34px;line-height:1.15;margin-bottom:14px}
.install p{color:#B8C9BC;font-size:16.5px;max-width:46ch}
.install .steps{display:flex;flex-direction:column;gap:14px;color:#E8F1EA}
.install .steps li{display:flex;align-items:flex-start;gap:14px;list-style:none}
.install .steps .num{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);color:#F6EBC4;display:inline-flex;align-items:center;justify-content:center;font-weight:600;flex:0 0 auto}
.install .steps strong{color:#fff;display:block;margin-bottom:2px}
.install .steps span{color:#B8C9BC;font-size:14.5px}
.install .cta{margin-top:22px;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;box-shadow:0 12px 28px rgba(164,25,46,.35)}
.install .cta:hover{background:var(--accent-2);color:#fff}

@media (max-width:899px){
  .install{grid-template-columns:1fr;padding:36px 28px;gap:24px}
  .install h2{font-size:26px}
}

/* ============== PRODUCT RAIL ============== */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.rail-head .view-all{font-size:14px;color:var(--accent);font-weight:600}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;margin:0 -4px;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:3px}
.rail .card{scroll-snap-align:start;background:#fff;border:1px solid var(--rule);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}
.rail .card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-lift)}
.rail .card .media{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden;position:relative;clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%)}
.rail .card .media img{width:100%;height:100%;object-fit:cover}
.rail .card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.rail .card .body h3{font-size:17px;margin:0}
.rail .card .body .meta{color:var(--ink-3);font-size:13px}
.rail .card .body p{margin:4px 0 0;font-size:14px;color:var(--ink-2);flex:1}

/* ============== MAGAZINE ============== */
.magazine{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start}
.magazine .lead h2{margin-bottom:12px}
.magazine .lead p{font-size:16.5px;color:var(--ink-2);margin-bottom:14px}
.magazine .sidebar{border-left:1px solid var(--rule);padding-left:36px}
.magazine .sidebar h3{font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.magazine .sidebar dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
.magazine .sidebar dt{color:var(--ink-3);font-size:14px;font-weight:500}
.magazine .sidebar dd{margin:0;color:var(--ink);font-weight:600;font-size:14px}
.magazine .sidebar ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.magazine .sidebar li{display:flex;gap:10px;align-items:flex-start}
.magazine .sidebar li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:9px;flex:0 0 auto}

@media (max-width:899px){
  .magazine{grid-template-columns:1fr;gap:24px}
  .magazine .sidebar{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:18px}
}

/* ============== STEP GRID ============== */
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.step-card{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px 22px 24px;position:relative;transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.step-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.step-num{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);font-size:17px;margin-bottom:12px}
.step-card h3{font-size:18px;margin-bottom:6px}
.step-card p{color:var(--ink-2);font-size:14.5px;margin:0}

@media (max-width:899px){.steps-grid{grid-template-columns:1fr}}

/* ============== TABBED SHELF ============== */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--rule);margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:10px 16px;border-radius:8px 8px 0 0;color:var(--ink-3);font-weight:600;font-size:14.5px;white-space:nowrap;border-bottom:2px solid transparent}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button:hover{color:var(--ink)}

.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.shelf .card{background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.shelf .card:hover{transform:translateY(-2px);border-color:var(--accent)}
.shelf .card .thumb{aspect-ratio:1/1;background:var(--surface-2);position:relative;overflow:hidden}
.shelf .card .thumb img{width:100%;height:100%;object-fit:cover}
.shelf .card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.shelf .card .body strong{font-size:15px;color:var(--ink)}
.shelf .card .body .provider{font-size:12.5px;color:var(--ink-3)}
.shelf .card .body .meta-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}

@media (max-width:899px){.shelf{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.shelf{grid-template-columns:repeat(2,1fr)}.shelf .card .thumb{aspect-ratio:4/3}}

/* ============== FILTERABLE ICON SHELF ============== */
.filter-bar{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px;align-items:center}
.filter-tabs{display:flex;gap:6px;flex-wrap:wrap}
.filter-tabs button{padding:9px 16px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--ink-2);font-weight:500;font-size:14px;cursor:pointer}
.filter-tabs button:hover{border-color:var(--accent);color:var(--ink)}
.filter-tabs button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.filter-input{flex:1;min-width:200px;padding:11px 14px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--ink);font-size:14.5px}
.filter-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

.icon-shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.icon-shelf .tile{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:18px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.icon-shelf .tile:hover{transform:translateY(-2px);border-color:var(--accent)}
.icon-shelf .tile .icon{width:64px;height:64px;border-radius:16px;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%)}
.icon-shelf .tile .icon img{width:100%;height:100%;object-fit:cover}
.icon-shelf .tile strong{font-size:14px;color:var(--ink);font-weight:600}
.icon-shelf .tile span{font-size:12px;color:var(--ink-3)}
.icon-shelf .tile .tag{display:inline-block;margin-top:4px;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

.icon-shelf .empty{grid-column:1/-1;text-align:center;padding:36px 24px;color:var(--ink-3);background:var(--surface-2);border-radius:14px;border:1px dashed var(--rule-2)}

@media (max-width:899px){.icon-shelf{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.icon-shelf{grid-template-columns:repeat(2,1fr)}}

/* ============== THREE PILLAR BAND ============== */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pillar{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.pillar:hover{transform:translateY(-2px);border-color:var(--accent)}
.pillar .icon{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;font-weight:700}
.pillar h3{font-size:18px;margin:6px 0 4px}
.pillar p{margin:0;color:var(--ink-2);font-size:14.5px}
.pillar .link{margin-top:auto;color:var(--accent);font-weight:600;font-size:14px}

@media (max-width:899px){.pillars{grid-template-columns:1fr}}

/* ============== NEWS + FAQ ASYMMETRIC ============== */
.asymmetric{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:36px;align-items:start}
.news-list{display:flex;flex-direction:column;gap:14px}
.news-list article{background:#fff;border:1px solid var(--rule);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.news-list article:hover{transform:translateY(-2px);border-color:var(--accent)}
.news-list .thumb{aspect-ratio:4/3;background:var(--surface-2);overflow:hidden;clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%)}
.news-list .thumb img{width:100%;height:100%;object-fit:cover}
.news-list .body{padding:14px 18px 16px;display:flex;flex-direction:column;gap:6px}
.news-list .body .meta{color:var(--ink-3);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.news-list .body h3{font-size:18px;margin:0;line-height:1.25}
.news-list .body p{color:var(--ink-2);font-size:14px;margin:4px 0 0}

.faq-list details{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:14px 18px;margin-bottom:10px}
.faq-list summary{font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15.5px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:22px;color:var(--accent);font-weight:500;line-height:1}
.faq-list details[open] summary::after{content:"−"}
.faq-list details[open]{border-color:var(--accent);box-shadow:var(--shadow-card)}
.faq-list .body{padding:10px 0 4px;color:var(--ink-2);font-size:14.5px}

@media (max-width:899px){
  .asymmetric{grid-template-columns:1fr;gap:24px}
  .news-list article{grid-template-columns:1fr}
  .news-list .thumb{aspect-ratio:16/9}
}

/* ============== EDITORIAL VISUAL ============== */
.editorial-row{display:grid;grid-template-columns:1fr minmax(0,1fr);gap:36px;align-items:center}
.editorial-row .visual{aspect-ratio:16/10;background:var(--surface-2);border-radius:18px;overflow:hidden;border:1px solid var(--rule);position:relative}
.editorial-row .visual img{width:100%;height:100%;object-fit:cover}
.editorial-row.flip{grid-template-columns:minmax(0,1fr) 1fr}
.editorial-row.flip .visual{order:2}
@media (max-width:899px){
  .editorial-row,.editorial-row.flip{grid-template-columns:1fr;gap:20px}
  .editorial-row.flip .visual{order:0}
}

/* ============== FOOTER ============== */
.site-footer{background:var(--surface-dark);color:#B8C9BC;padding:60px 0 32px}
.site-footer a{color:#E8F1EA}
.site-footer a:hover{color:#fff}
.footer-grid{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.footer-grid h4{color:#fff;font-family:var(--font-sans);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.footer-grid .legal-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;font-size:13px}
.footer-grid .legal-links a{color:#B8C9BC;text-decoration:underline;text-underline-offset:3px}
.footer-bottom{max-width:var(--max-w);margin:36px auto 0;padding:24px var(--gutter) 0;border-top:1px solid #2A3F35;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;color:#7A8A82;font-size:13px}
.footer-bottom .brand-mark .logo{background:#fff;color:var(--ink)}
.footer-bottom .brand-mark .name{color:#fff}
.footer-bottom .brand-mark .tag{color:#7A8A82}
.cookie-btn{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.08);color:#E8F1EA;border:1px solid #2A3F35;font-size:13px;cursor:pointer}
.cookie-btn:hover{background:rgba(255,255,255,.14)}

@media (max-width:899px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr}
}

/* ============== MOBILE STICKY INSTALL ============== */
.mobile-sticky{position:fixed;left:0;right:0;bottom:0;z-index:240;background:rgba(15,26,20,.96);backdrop-filter:saturate(1.2);padding:12px var(--gutter);display:none;border-top:1px solid #2A3F35}
.mobile-sticky a{display:flex;align-items:center;justify-content:center;width:100%;padding:14px 20px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;font-size:16px;gap:10px;box-shadow:0 12px 28px rgba(164,25,46,.45)}
.mobile-sticky a:hover{background:var(--accent-2);color:#fff}

@media (max-width:899px){
  .mobile-sticky{display:block}
  main{padding-bottom:96px}
}

/* ============== RESPONSIVE NAV ============== */
@media (max-width:899px){
  .main-nav,.header-right{display:none}
  .hamburger{display:inline-flex}
}

/* ============== UTILITIES ============== */
.section-head{margin-bottom:32px;max-width:64ch}
.section-head h2{margin-bottom:8px}
.section-head .lede{margin:0}
.text-muted{color:var(--ink-3)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.badge-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.badge-pill.gold{background:var(--gold-soft);color:#5c4009}
.badge-pill.accent{background:var(--accent-soft);color:var(--accent-2)}

.no-grid-overflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));min-width:0}

/* keep grid children min-width 0 to avoid track expansion by media */
.shelf .card,.rail .card,.icon-shelf .tile,.step-card,.pillar{min-width:0}
.shelf img,.rail img,.icon-shelf img{width:100%;height:100%;object-fit:cover;display:block}
.media-fixed{aspect-ratio:16/10}
.media-square{aspect-ratio:1/1}
.media-wide{aspect-ratio:16/9}

/* ============== GAME DETAIL ============== */
.detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:36px;align-items:start}
.detail-grid .visual{aspect-ratio:1/1;background:var(--surface-2);border-radius:18px;overflow:hidden;border:1px solid var(--rule);position:relative}
.detail-grid .visual img{width:100%;height:100%;object-fit:cover}
.detail-grid .meta{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px}
.detail-grid .meta .detail-title{margin:14px 0 8px;font-size:26px;line-height:1.2;font-weight:600;font-family:var(--font-display,inherit);color:var(--ink)}
.detail-grid .meta dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
.detail-grid .meta dt{color:var(--ink-3);font-weight:500;font-size:14px}
.detail-grid .meta dd{margin:0;color:var(--ink);font-weight:600;font-size:14px}
.detail-grid .meta .install{margin-top:18px;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600}
.detail-grid .meta .install:hover{background:var(--accent-2);color:#fff}
@media (max-width:899px){.detail-grid{grid-template-columns:1fr;gap:20px}.detail-grid .visual{aspect-ratio:16/10}}

.breadcrumbs{padding:16px 0 0;color:var(--ink-3);font-size:13.5px}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs li{display:flex;align-items:center;gap:6px}
.breadcrumbs li+li::before{content:"/";color:var(--rule-2)}
.breadcrumbs a{color:var(--ink-2)}
.breadcrumbs a:hover{color:var(--accent)}

/* ============== GENERIC PROSE ============== */
.prose{max-width:68ch;color:var(--ink-2);font-size:16.5px;line-height:1.7}
.prose h2{font-size:28px;margin-top:36px;color:var(--ink)}
.prose h3{font-size:22px;margin-top:28px;color:var(--ink)}
.prose p{margin:0 0 14px}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin-bottom:18px}
.prose li{margin-bottom:6px}
.prose blockquote{border-left:3px solid var(--accent);margin:18px 0;padding:6px 18px;color:var(--ink);background:var(--surface-2);border-radius:0 12px 12px 0}
.cta-banner{margin:36px 0;padding:28px;border-radius:18px;background:var(--surface-dark);color:#E8F1EA;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta-banner strong{color:#fff;display:block;font-family:var(--font-display);font-size:22px;margin-bottom:4px}
.cta-banner a{padding:13px 22px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600}
.cta-banner a:hover{background:var(--accent-2);color:#fff}

/* page intro shared */
.page-intro{padding:48px 0 24px;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)}
.page-intro h1{font-size:clamp(30px,3.6vw,46px);margin-bottom:12px}
.page-intro .lede{font-size:18px;color:var(--ink-2);max-width:62ch}

/* consent panel */
.consent-panel{position:fixed;left:24px;right:24px;bottom:96px;z-index:300;background:#fff;border:1px solid var(--rule);border-radius:18px;padding:22px;box-shadow:var(--shadow-deep);display:none}
.consent-panel[data-open="true"]{display:block}
.consent-panel h3{font-family:var(--font-sans);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.consent-panel p{font-size:14.5px;color:var(--ink-2);margin:0 0 12px}
.consent-panel .opts{display:grid;gap:10px;margin-bottom:14px}
.consent-panel .opts label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;font-size:14px;color:var(--ink-2)}
.consent-panel .opts input{margin-top:3px}
.consent-panel .actions{display:flex;gap:10px;flex-wrap:wrap}
.consent-panel .actions button{padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px}
.consent-panel .actions .accept{background:var(--accent);color:#fff}
.consent-panel .actions .reject{background:var(--surface-2);color:var(--ink)}
@media (max-width:480px){.consent-panel{left:14px;right:14px;bottom:84px}}

/* focus visible */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}