/* ===========================================================================
   RAID PRELANDER — DESIGN TOKENS
   Every colour below was MEASURED from Raid's own ad endcards, not chosen.
   Hue census of vivid UI pixels: gold 38-55deg = 28.9%, ember 18-32deg = 4.6%.
   The old Obsidian-Forge ember orange is NOT a Raid colour and is deliberately absent
   (the hex itself is kept out of this file so a grep for it stays a true positive).
   =========================================================================== */
:root{
  /* surface */
  --void:#05070b; --void-2:#080b12; --panel:rgba(13,17,25,0.78); --panel-2:rgba(19,24,38,0.85);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);

  /* type */
  --ink:#ffffff; --dim:#a8b3c6; --dim-2:#6f7c92;

  /* gold — their reward colour */
  --gold:#f4bc31; --gold-hi:#fce581; --gold-lo:#b89f62; --gold-dp:#7d5f18;

  /* their promo-code plate */
  --plate:#6a4fd0; --plate-hi:#eae0ff; --blue:#2b6fe0;

  /* their mystery-box energy green */
  --neon:#4ff778; --neon-dim:#2f8f45;

  --legend:#ffb43a;

  /* ---- 8pt spacing rhythm: every vertical gap is a multiple, nothing ad-hoc ----
     These are the FULL-HEIGHT values. They are overridden further down for short
     viewports, because a popunder does not open maximised: measured, a page laid out
     on fixed 96px gutters puts its CTA 550-700px below the fold in a 1000x600 window.
     Vertical rhythm has to answer to viewport HEIGHT, not only width. */
  --s1:12px; --s2:20px; --s3:32px; --s4:48px; --s5:64px; --s6:80px; --s7:120px;

  /* ---- modular type scale, ratio 1.25, fluid between 360 and 1440 ----
     Width-fluid via vw; height-capped by the short-viewport blocks below, so a wide
     but short window (1366x600) does not render 50px headlines it has no room for. */
  --t-micro:clamp(11px,.30vw + 10px,12.5px);
  --t-small:clamp(13px,.35vw + 12px,14.5px);
  --t-body:clamp(15px,.45vw + 13.5px,17px);
  --t-lead:clamp(17px,.75vw + 14px,21px);
  --t-h3:clamp(20px,1.1vw + 16px,27px);
  --t-h2:clamp(25px,2.2vw + 17px,40px);
  --t-h1:clamp(30px,2.6vw + 20px,50px);
  --t-display:clamp(40px,3.4vw + 26px,68px);

  /* ---- layered elevation: ambient + key + contact, never one flat blur ---- */
  --e1:0 2px 4px rgba(0,0,0,.42), 0 6px 12px rgba(0,0,0,.28);
  --e2:0 4px 12px rgba(0,0,0,.44), 0 16px 32px -8px rgba(0,0,0,.62);
  --e3:0 12px 24px rgba(0,0,0,.46), 0 32px 64px -16px rgba(0,0,0,.86);
  --e-gold:0 0 0 1px rgba(244,188,49,.30), 0 12px 42px -10px rgba(244,188,49,.52);
  --inset-hi:inset 0 1px 1px rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.05);

  --radius:14px; --radius-lg:20px; --radius-sm:9px;
  --head:"Segoe UI Black","Arial Black",system-ui,sans-serif;
  --cond:"Bahnschrift Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ===========================================================================
   Article surface. Self-contained: no webfont, no CDN, no external request.
   The competitor ships 123 scripts and 78 stylesheets; Core Web Vitals is a
   ranking signal and that is a hundredfold difference in request count.
   =========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);background-color:#040608;color:var(--dim);line-height:1.75;
  -webkit-font-smoothing:antialiased; min-height:100vh; font-size: 17px; position:relative; z-index:0;}
body::before {
    content: ""; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at 20% 50%, rgba(244,188,49,0.08), transparent 40%),
                radial-gradient(circle at 80% 30%, rgba(106,79,208,0.08), transparent 40%),
                radial-gradient(circle at 50% 80%, rgba(43,111,224,0.05), transparent 50%);
    animation: driftBackground 30s infinite linear alternate;
    z-index: -2; pointer-events: none;
}
body::after {
    content: ""; position: fixed; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1; pointer-events: none;
    mask-image: radial-gradient(ellipse at 50% 20%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 20%, black 20%, transparent 80%);
}
@keyframes driftBackground {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-3%, 3%) scale(1.05); }
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-underline-offset:4px;text-decoration-thickness: 1px;}

header.site {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 20px clamp(16px,4vw,40px);
  background: rgba(11,14,20,0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(244,188,49,0.2);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  position: sticky; top: 0; z-index: 100;
}
.logo, .hh-logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.hh-logo-icon {
  font-size: 24px; color: transparent;
  background: linear-gradient(135deg, var(--gold), #d4931c);
  -webkit-background-clip: text;
  text-shadow: 0 0 10px rgba(244,188,49,0.3);
}
.hh-logo-text {
  font-family: var(--head); font-size: 20px; color: #fff; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 900;
}
header.site nav a {
  font-family: var(--cond); font-size: 14px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--dim); text-decoration: none; padding: 8px 16px; border-radius: 20px;
  border: 1px solid transparent; transition: all 0.2s ease;
}
header.site nav a:hover {
  color: var(--gold); border-color: rgba(244,188,49,0.3); background: rgba(244,188,49,0.05);
}
footer.site {
  margin-top: var(--s6); padding: 40px clamp(16px,4vw,40px);
  background: linear-gradient(0deg, #040608, transparent);
  border-top: 1px solid rgba(244,188,49,0.1);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.footer-logo {
  font-family: var(--head); font-size: 18px; color: var(--gold); letter-spacing: 3px; text-transform: uppercase;
}
footer.site p {
  font-size: 13px; color: var(--dim-2); max-width: 600px; line-height: 1.6;
}

.crumbs{padding:14px clamp(16px,4vw,40px) 0;font-size:var(--t-micro);color:var(--dim-2)}
.crumbs a{color:var(--dim-2);text-decoration:none}
.crumbs span{margin:0 6px}

.doc{width:100%;max-width:760px;margin:0 auto;padding:var(--s4) clamp(16px,4vw,24px) var(--s6)}
.meta{font-size:var(--t-micro);color:var(--dim-2);margin-bottom:var(--s3)}
.lede{font-size:var(--t-lead);color:var(--dim);line-height:1.55;margin-bottom:var(--s4);
  padding-left:16px;border-left:3px solid var(--gold)}
.author-meta{display:flex;align-items:center;gap:16px;margin:var(--s2) 0 var(--s4);padding:16px;background:rgba(255,255,255,0.03);border-radius:var(--radius);border:1px solid rgba(255,255,255,0.05);}
.author-meta .avatar{width:48px;height:48px;border-radius:50%;background:rgba(244,188,49,0.1);display:flex;align-items:center;justify-content:center;border:1px solid rgba(244,188,49,0.3);}
.author-details{display:flex;flex-direction:column;gap:4px;}
.author-name{font-family:var(--head);font-size:var(--t-body);color:var(--ink);display:flex;align-items:center;gap:8px;}
.author-name .badge{font-family:var(--cond);font-size:10px;text-transform:uppercase;letter-spacing:1px;background:rgba(244,188,49,0.15);color:var(--gold);padding:2px 8px;border-radius:12px;}
.meta-date{font-size:var(--t-micro);color:var(--dim-2);}

h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.2;color:#fff;letter-spacing:0.5px;}
h1{font-size:var(--t-h1);margin:0 0 var(--s2)}
.doc h2{font-family:var(--cond);text-transform:uppercase;letter-spacing:2px;font-size:var(--t-h2);border-left:4px solid var(--gold);padding-left:16px;margin:var(--s5) 0 var(--s4) 0;color:#fff;background:linear-gradient(90deg, rgba(244,188,49,0.1), transparent);padding-top:6px;padding-bottom:6px;}
.doc h3{font-family:var(--cond);text-transform:uppercase;letter-spacing:1px;font-size:var(--t-h3);color:var(--gold);margin:var(--s4) 0 var(--s2) 0;}
p{margin-bottom:var(--s2);max-width:75ch;color:#cbd5e1;}
.note{font-size:var(--t-micro);color:var(--dim-2);line-height:1.5}

/* tables — the competitor ships none, and tables are what gets lifted into
   featured snippets on comparison and specification queries */
table.data{width:100%;border-collapse:separate;border-spacing:0;margin:var(--s4) 0;font-size:var(--t-body);background:rgba(22,27,34,0.4);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);overflow:hidden;}
table.data caption{text-align:left;font-family:var(--cond);font-size:var(--t-small);
  letter-spacing:2px;text-transform:uppercase;color:var(--gold);padding-bottom:12px;font-weight:600;}
table.data th,table.data td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.05);}
table.data thead th{font-family:var(--cond);font-size:var(--t-small);letter-spacing:1px;
  text-transform:uppercase;color:var(--ink);font-weight:600;background:rgba(255,255,255,0.03);}
table.data tbody tr:nth-child(even){background:rgba(0,0,0,0.2);}
table.data tbody tr:last-child td{border-bottom:0}
table.data td:first-child{color:var(--ink);font-weight:500;}

.steps{margin:var(--s3) 0 var(--s3) 20px;display:grid;gap:10px}
.steps li{padding-left:6px}

.callout{padding:20px;border-radius:var(--radius-lg);border:1px solid rgba(244,188,49,.4);
  background:linear-gradient(135deg, rgba(244,188,49,.08), rgba(22,27,34,.6));color:#e2e8f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);position:relative;margin:var(--s4) 0;}
.callout b{color:var(--gold);display:block;margin-bottom:8px;font-family:var(--head);font-size:var(--t-h3);letter-spacing:0.5px;}

/* the tool — the gap a competitor cannot close by rewriting text */
.tool{margin:var(--s3) 0;padding:clamp(14px,2.5vw,22px);border:1px solid rgba(184,159,98,.2);
  border-radius:var(--radius-lg);background:rgba(22,29,44,0.6);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:var(--e3);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;font-family:var(--cond);
  font-size:var(--t-lead);letter-spacing:2px;text-transform:uppercase;text-decoration:none;
  color:#0f172a;background:linear-gradient(180deg, #ffe28a, var(--gold) 50%, #d4931c);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  cursor:pointer;transition:all .2s ease-out; font-weight:700;}
.btn:hover{transform:translateY(-2px); box-shadow: 0 10px 20px rgba(244,188,49,0.3);}
.btn:active{transform:translateY(1px); box-shadow: 0 5px 10px rgba(244,188,49,0.2);}
@keyframes rotateGlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulseGlow { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } }
.verdict{margin-top:12px;font-family:var(--cond);font-size:var(--t-body);letter-spacing:.6px;
  color:var(--neon)}
.verdict.bad{color:var(--legend)}

.cta{margin:var(--s4) 0;padding:clamp(16px,2.5vw,24px);border-radius:var(--radius);
  border:1px solid rgba(244,188,49,.28);
  background:radial-gradient(120% 130% at 50% 0%,rgba(244,188,49,.10),transparent 65%),var(--panel)}
.cta .btn{font-size:var(--t-lead);padding:16px 30px}
.cta .note{margin-top:10px}
/* treatment B — reached only via ?s=<key>, i.e. a link the visitor followed.
   Nothing here inspects who the requester is. */
body.src-paid .cta{border-color:rgba(244,188,49,.55);
  box-shadow:var(--e-gold)}
body.src-paid .cta .btn{width:100%}

details.faq{border-bottom:1px solid var(--line);padding:14px 0}
details.faq summary{cursor:pointer;font-family:var(--head);font-size:var(--t-h3);
  line-height:1.3;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:'+';display:inline-block;width:22px;color:var(--gold)}
details.faq[open] summary::before{content:'\2212'}
details.faq p{margin:10px 0 0 22px;color:var(--dim)}

/* ---------------------------------------------------------------------------
   Diagrams. Inline SVG rather than raster, and that is a cost decision as much
   as a design one: each of these is under 2 KB, scales to any DPI without a
   srcset, needs no decode, and cannot shift layout because the viewBox fixes
   the aspect ratio before a byte of it paints. A photo would cost more than
   the entire rest of the page and buy nothing a comparison table does not.
   They are also ours outright - nothing here is licensed from anyone.
   --------------------------------------------------------------------------- */
figure.viz{margin:var(--s4) 0;padding:clamp(12px,2vw,18px);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel)}
figure.viz svg{width:100%;height:auto;display:block;overflow:visible}
figure.viz figcaption{margin-top:12px;font-size:var(--t-micro);color:var(--dim-2);line-height:1.5}
.vz-h{font-family:var(--cond);font-size:13px;letter-spacing:1.6px;fill:var(--gold)}
.vz-row text{font-family:var(--body);font-size:14px;fill:var(--dim)}
.vz-dim{fill:var(--dim-2)}
.vz-ok{fill:var(--neon)}
.vz-bad{fill:var(--dim-2)}
.vz-div{stroke:var(--line);stroke-width:1}
.vz-track{stroke:var(--line-2);stroke-width:2}
.vz-node{fill:var(--panel);stroke:var(--line-2);stroke-width:2}
.vz-node-hot{stroke:var(--gold);fill:rgba(244,188,49,.12)}
.vz-num{font-family:var(--cond);font-size:13px;fill:var(--dim)}
.vz-lbl{font-family:var(--cond);font-size:13px;letter-spacing:1.1px;fill:var(--ink)}
.vz-hot{fill:var(--gold)}
.vz-sub{font-family:var(--body);font-size:12px;fill:var(--dim-2)}
.vz-bars .vz-lbl{font-family:var(--body);font-size:13px;fill:var(--dim);letter-spacing:0}
/* rx is set as an SVG attribute on the rects, not here: it only became a CSS geometry
   property later than the rest of this file assumes, and a square bar on an old engine is
   a worse failure than one extra attribute per element. */
.vz-bar-bg{fill:rgba(255,255,255,.05)}
.vz-bar{fill:var(--dim-2)}
.vz-bar-hot{fill:var(--gold)}
.vz-bar-ok{fill:var(--neon)}
.vz-box{fill:rgba(255,255,255,.04);stroke:var(--line-2);stroke-width:1}
.vz-box-hot{stroke:var(--gold);fill:rgba(244,188,49,.10)}
@media (max-width:520px){
  .vz-row text,.vz-lbl,.vz-num{font-size:15px}
  .vz-sub{font-size:13px}
}

/* the cluster block - generated, never authored, so the hub-and-spoke graph
   cannot lose an edge when a new article is added */
aside.cluster{margin:var(--s5) 0 0;padding:clamp(16px,2.5vw,22px);border-radius:var(--radius);
  border:1px solid var(--line);background:var(--panel)}
aside.cluster h2{margin:0 0 6px;font-size:var(--t-h3)}
aside.cluster .hub{margin:0 0 12px;font-size:var(--t-small)}
aside.cluster .hub a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(244,188,49,.35)}
aside.cluster ul{list-style:none;display:grid;gap:9px}
aside.cluster li a{color:var(--dim);text-decoration:none;font-size:var(--t-small)}
aside.cluster li a:hover{color:var(--ink)}
aside.cluster li::before{content:'\2192';color:var(--dim-2);margin-right:9px}

/* ---- Gamified Components (HellHades CRO style) ---- */
.hh-hero-dashboard {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  padding: 31px;
  margin: var(--s5) 0;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}
.hh-hero-dashboard::before {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(transparent, transparent, transparent, rgba(244,188,49,1));
  animation: rotateGlow 4s linear infinite;
  z-index: 0;
}
.hh-hero-dashboard::after {
  content: ""; position: absolute; inset: 1px;
  background: linear-gradient(135deg, rgba(11,14,20,0.95), rgba(22,27,34,0.95));
  border-radius: calc(var(--radius-lg) - 1px);
  z-index: 0;
}
.hh-hero-dashboard > * { position: relative; z-index: 1; }
.hh-hero-art {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 30px rgba(244,188,49,0.15);
}
.hh-hero-art img {
  width: 100%; height: 100%; object-fit: cover; display: block; max-height: 350px;
}
.hh-hero-stats {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.hh-hero-stats h3 { margin: 0; font-size: 42px; color: #fff; font-family: var(--head); letter-spacing: 1px; text-transform: uppercase; }
.hh-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.hh-tag { background: rgba(244,188,49,0.1); color: var(--gold); padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(244,188,49,0.3); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.hh-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px;}
.hh-stat-box { background: rgba(0,0,0,0.4); padding: 12px 16px; border-radius: 8px; border-left: 3px solid var(--gold); }
.hh-stat-label { font-size: 11px; color: var(--dim-2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; display: block;}
.hh-stat-value { font-size: 18px; color: #fff; font-weight: bold; font-family: var(--cond); }

.hh-rating-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: var(--s4) 0;
}
.hh-rating-card {
  background: rgba(22,27,34,0.6); border: 1px solid rgba(255,255,255,0.05); padding: 20px; border-radius: var(--radius);
  text-align: center; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s;
  transform: perspective(1000px) rotateX(0) rotateY(0); transform-style: preserve-3d;
}
.hh-rating-card:hover { transform: perspective(1000px) rotateX(4deg) rotateY(-4deg) translateY(-6px) scale(1.02); border-color: rgba(244,188,49,0.5); box-shadow: 15px 15px 30px rgba(0,0,0,0.6), 0 0 20px rgba(244,188,49,0.15); background: rgba(22,27,34,0.95); }
.hh-rating-area { font-family: var(--cond); font-size: 14px; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;}
.hh-rating-stars { color: var(--gold); font-size: 22px; letter-spacing: 4px; text-shadow: 0 0 10px rgba(244,188,49,0.4); }

.hh-skills { display: flex; flex-direction: column; gap: 20px; margin: var(--s5) 0; }
.hh-skill-card {
  display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 24px;
  background: rgba(11,14,20,0.8); border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-lg); align-items: start;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s;
  transform: perspective(1000px) rotateX(0) rotateY(0); transform-style: preserve-3d;
}
.hh-skill-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
  box-shadow: 20px 20px 40px rgba(0,0,0,0.5), 0 0 20px rgba(244,188,49,0.1);
  border-color: rgba(244,188,49,0.3);
}
.hh-skill-icon {
  width: 80px; height: 80px; background: radial-gradient(circle, #222, #000); border: 2px solid var(--gold); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--gold); box-shadow: 0 0 20px rgba(244,188,49,0.2);
}
.hh-skill-info h4 { margin: 0 0 8px 0; font-size: 22px; color: var(--gold); }
.hh-skill-type { display: inline-block; padding: 2px 8px; background: #333; color: #aaa; border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.hh-skill-desc { font-size: 15px; color: var(--dim); line-height: 1.6; margin: 0; }

.value-box {
  display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 30px; margin: var(--s5) 0;
  background: rgba(11,14,20,0.95); border: 2px dashed rgba(244,188,49,0.4); border-radius: var(--radius-lg);
  align-items: center; box-shadow: 0 0 30px rgba(244,188,49,0.1);
}
.value-box img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--gold); }
.value-info h4 { margin: 0 0 12px 0; font-size: 24px; color: var(--gold); text-transform: uppercase; font-family: var(--cond); letter-spacing: 1px;}
.value-info p { color: var(--dim); margin-bottom: 16px; font-size: 15px; }
.value-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.value-list li { background: rgba(255,255,255,0.03); padding: 8px 12px; border-radius: 6px; color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px;}
.value-list li span { color: var(--gold); font-size: 16px; font-family: var(--cond); }

.game-banner {
  display: block; position: relative; margin: var(--s5) 0; padding: 42px; text-decoration: none; text-align: center;
  border: none; clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  transition: transform 0.3s var(--ease-out); box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.game-banner::before {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(transparent, transparent, transparent, rgba(244,188,49,1));
  animation: rotateGlow 5s linear infinite reverse;
  z-index: -2;
}
.game-banner::after {
  content: ""; position: absolute; inset: 1px;
  background: radial-gradient(circle at center, rgba(244,188,49,0.15), transparent 70%), #0a0d12;
  clip-path: polygon(23px 0, 100% 0, 100% calc(100% - 23px), calc(100% - 23px) 100%, 0 100%, 0 23px);
  z-index: -1;
}
.game-banner:hover { transform: translateY(-4px) scale(1.01); }
.game-banner:active { transform: translateY(1px); }
.game-banner > * { position: relative; z-index: 1; }
.game-banner h3 { margin: 0 0 12px 0; font-size: 32px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.8);}
.game-banner p { margin: 0 0 24px 0; font-size: 18px; color: var(--dim-2); }
.game-banner .btn { display: inline-block; font-size: 18px; padding: 16px 40px; }

.author-bio {
  display: flex; gap: 24px; padding: 32px; margin: var(--s6) 0;
  background: rgba(22,27,34,0.6); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.05);
  align-items: center;
}
.author-bio img { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--gold); object-fit: cover; box-shadow: 0 0 20px rgba(244,188,49,0.2); }
.author-bio-info h4 { margin: 0 0 6px 0; font-size: 24px; color: #fff; font-family: var(--head); }
.author-bio-info .title { display: inline-block; padding: 4px 12px; background: rgba(244,188,49,0.15); color: var(--gold); border-radius: 4px; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.author-bio-info p { margin: 0; font-size: 15px; color: var(--dim); line-height: 1.6; }

@media (max-width: 768px) {
  .hh-hero-dashboard, .value-box, .hh-skill-card, .author-bio { grid-template-columns: 1fr; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hh-hero-stats { align-items: center; }
  .hh-tags, .hh-stats-grid { justify-content: center; }
  .value-list { grid-template-columns: 1fr; width: 100%; }
}

/* Multi-geo Language Separation */
.geo-content { display: none !important; }
html[data-lng="en"] .geo-content[data-lang="en"] { display: block !important; }
html[data-lng="jp"] .geo-content[data-lang="jp"] { display: block !important; }
html:not([data-lng="jp"]):not([data-lng="en"]) .geo-content[data-lang="en"] { display: block !important; }

/* ---- imagery -------------------------------------------------------------
   Every img carries width/height, so the box is reserved before a byte lands
   and nothing below it moves as the page loads. */
figure.hero-shot,figure.shot{margin:var(--s3) 0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--panel)}
figure.hero-shot{margin-top:var(--s2)}
figure.hero-shot img,figure.shot img{width:100%;height:auto;display:block}
figure.shot figcaption{padding:9px 14px;font-size:var(--t-micro);color:var(--dim-2);
  border-top:1px solid var(--line);line-height:1.5}

/* ---- CTA band: the one legitimate CSS background on an indexed page --------
   Decorative only, so nothing is lost by having no alt. The overlay is layered
   rather than a flat rgba(0,0,0,.8): a flat wash dims the button by exactly as
   much as it dims the edges, and the button has to stay the brightest thing in
   the block. Radial keeps the centre open, the linear seats the block against
   the page, and --panel is the floor if the image never loads. */
.cta[style*="--band"]{
  background-image:
    radial-gradient(120% 140% at 50% 0%, rgba(244,188,49,.2), transparent 62%),
    linear-gradient(180deg, rgba(11,14,20,.6) 0%, rgba(11,14,20,.85) 55%, rgba(11,14,20,1) 100%),
    url('/assets/media/bg/hero_banner.png');
  background-size:auto, auto, cover;
  background-position:center, center, center;
  background-repeat:no-repeat;
  border-color:rgba(244,188,49,.4)}
.cta[style*="--band"] .note{color:#c9d2e0}

/* ---- ad slots -------------------------------------------------------------
   Labelled, contained, and never above the article's first paragraph - the
   slot for that position does not exist in the enumeration. The label is not
   decoration: an unmarked banner that looks like editorial is the thing that
   costs a site its credibility with readers and its standing with Google. */
aside.ad{margin:var(--s4) 0;text-align:center;position:relative}
aside.ad img{max-width:100%;height:auto;display:block;margin:0 auto;
  border-radius:var(--radius-sm);border:1px solid var(--line)}
aside.ad .adlbl{display:block;margin-top:6px;font-family:var(--cond);font-size:var(--t-micro);
  letter-spacing:2px;text-transform:uppercase;color:var(--dim-2)}
.rail aside.ad{margin:0}

/* ---- wide tables scroll in their own box, never the page ------------------
   The review's comparison table is five columns. At 375px CSS crushes it to
   unreadable rather than overflowing, so nothing looks broken while the most
   important element on the money page becomes useless. A scroll container is
   the fix; the shadow is what tells the reader there is more to the right,
   because a scrollbar alone is invisible on touch until you already scrolled. */
.tscroll{overflow-x:auto;margin:var(--s3) 0;-webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,var(--void-2) 30%,transparent),
             linear-gradient(90deg,transparent,var(--void-2) 70%) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.55),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.55),transparent) 100% 0;
  background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.tscroll table.data{margin:0;min-width:520px}

/* ---- shell: article + sticky rail ---------------------------------------- */
.shell{width:100%;max-width:1120px;margin:0 auto;padding:var(--s4) clamp(16px,4vw,24px) var(--s6);
  display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:clamp(24px,3vw,44px);align-items:start}
.shell > .doc{max-width:760px;margin:0;padding:0}
.rail{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px;font-size:var(--t-small)}
.rail section{border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius-lg);background:rgba(22,27,34,0.4);
  padding:18px 20px;box-shadow: 0 4px 12px rgba(0,0,0,0.1)}
.rail h2{font-family:var(--cond);font-size:var(--t-micro);letter-spacing:2px;text-transform:uppercase;
  color:var(--dim-2);margin:0 0 10px;padding:0;border:0}
.rail ul{list-style:none;margin:0;padding:0}
.rail li{border-top:1px solid var(--line)}
.rail li:first-child{border-top:0}
.rail li a{display:block;padding:9px 0;color:var(--dim);text-decoration:none;line-height:1.35}
.rail li a:hover{color:var(--gold)}
.rail li a[aria-current]{color:var(--gold);font-weight:600}
.rail .hub a{color:var(--ink);font-family:var(--cond);letter-spacing:.4px}
.rail .railcta{border-color:rgba(244,188,49,.32);
  background:radial-gradient(130% 130% at 50% 0%,rgba(244,188,49,.12),transparent 66%),var(--panel)}
.rail .railcta .btn{width:100%;text-align:center;padding:11px 14px;font-size:var(--t-small)}
.rail .railcta p{font-size:var(--t-micro);color:var(--dim-2);margin:9px 0 0;max-width:none}
@media (max-width:1000px){
  .shell{grid-template-columns:minmax(0,1fr);max-width:760px}
  .rail{position:static;margin-top:var(--s4)}
  /* Touch targets. Measured at 36px on a 375px viewport, which is under the ~44px a thumb
     actually needs. Inline links inside prose stay as they are - they are text, and padding
     them would wreck the line rhythm - but the rail and the contents list are navigation
     blocks, where a mis-tap sends the reader to the wrong article. */
  .rail li a{padding:13px 0;min-height:44px;display:flex;align-items:center}
}

/* ---- home: magazine index ------------------------------------------------ */
.home{width:100%;max-width:1120px;margin:0 auto;padding:var(--s4) clamp(16px,4vw,24px) var(--s6)}
.rule{display:flex;align-items:center;gap:11px;margin:var(--s5) 0 var(--s3)}
.rule::before{content:'';width:4px;height:19px;background:var(--gold);border-radius:2px;flex:none}
.rule h2{font-family:var(--cond);font-size:var(--t-h3);letter-spacing:1.6px;text-transform:uppercase;
  margin:0;padding:0;border:0}
.rule span{flex:1;height:1px;background:var(--line)}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{display:flex;flex-direction:column;border:1px solid rgba(184,159,98,.2);border-radius:var(--radius-lg);
  background:rgba(22,29,44,0.6);overflow:hidden;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s;
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);}
.card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--e3),var(--e-gold);}
.card .wash{height:5px;background:linear-gradient(90deg,var(--gold),var(--gold-dp))}
.card.g-start .wash{background:linear-gradient(90deg,var(--neon),var(--neon-dim))}
.card.g-choose .wash{background:linear-gradient(90deg,var(--plate),var(--blue))}
.card .pad{padding:15px 17px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.chip{align-self:flex-start;font-family:var(--cond);font-size:var(--t-micro);letter-spacing:1.5px;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;color:var(--void);background:var(--gold)}
.card.g-start .chip{background:var(--neon)}
.card.g-choose .chip{background:var(--plate-hi)}
.card h3{font-family:var(--head);font-size:var(--t-h3);line-height:1.18;margin:0;letter-spacing:-.01em}
.card h3 a{color:var(--ink);text-decoration:none}
.card:hover h3 a{color:var(--gold)}
.card p{font-size:var(--t-small);color:var(--dim);margin:0;max-width:none;line-height:1.5}
.card .foot{margin-top:auto;padding-top:4px;font-size:var(--t-micro);color:var(--dim-2)}
.lead-card{grid-column:1/-1;border-color:rgba(244,188,49,.30);
  background:radial-gradient(120% 150% at 12% 0%,rgba(244,188,49,.10),transparent 62%),var(--panel)}
.lead-card h3{font-size:var(--t-h2)}
.lead-card p{font-size:var(--t-body);max-width:70ch}
.home .hero{padding:var(--s3) 0 var(--s2)}
.home .hero h1{margin-bottom:10px}
.home .hero p{font-size:var(--t-lead);color:var(--dim);max-width:64ch}

.tool-lead{font-size:var(--t-small);color:var(--dim);margin-bottom:var(--s2)}
.tool-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.tool-row label{font-family:var(--cond);font-size:var(--t-micro);letter-spacing:1.4px;
  text-transform:uppercase;color:var(--dim-2)}
.tool-row select{width:100%;padding:10px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);
  font-family:var(--body);font-size:var(--t-body)}
.tool-row select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
ol.plansteps{margin:12px 0 0;padding-left:20px}
ol.plansteps li{margin-bottom:8px;color:var(--dim);line-height:1.55}
.verdict.bad{color:var(--legend)}