/* ==========================================================================
   Mega888 Guide — core stylesheet
   Hand-written, no framework, no external font requests.
   Loaded on every page. Keep it small and cacheable.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  --bg: #080b16;
  --bg-alt: #0c1120;
  --surface: #141b2e;
  --surface-2: #1a2338;
  --surface-3: #212c45;

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #eaeef8;
  --text-soft: #c3ccdf;
  --muted: #8e9bb8;

  --gold: #f6c653;
  --gold-deep: #d9a02a;
  --gold-glow: rgba(246, 198, 83, 0.14);
  --red: #e33a52;
  --green: #38c172;
  --blue: #4d8df6;

  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 26px;

  --shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
  --shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.85);

  --maxw: 1160px;
  --maxw-narrow: 760px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --header-h: 66px;
}

/* --- 2. Reset ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 620px at 84% -8%, rgba(246, 198, 83, 0.11), transparent 60%),
    radial-gradient(920px 560px at -10% 18%, rgba(77, 141, 246, 0.09), transparent 58%),
    radial-gradient(820px 520px at 50% 112%, rgba(246, 198, 83, 0.05), transparent 56%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.14;
  font-weight: 750;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.7vw, 2.45rem); }
h3 { font-size: clamp(1.16rem, 1.02rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.15em; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: 0.45em; }

strong { color: #fff; font-weight: 650; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.12em 0.42em;
  border-radius: 6px;
  color: var(--gold);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--gold); color: #10131f; }

/* --- 3. Layout ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap-narrow { max-width: var(--maxw-narrow); }

.section { padding: 88px 0; }
.section-sm { padding: 52px 0; }
.section-alt {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-head {
  max-width: 680px;
  margin-bottom: 46px;
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--gold-glow);
  border: 1px solid rgba(246, 198, 83, 0.28);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(246, 198, 83, 0.22);
}

.lede { font-size: 1.1rem; color: var(--text-soft); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #10131f;
  padding: 10px 16px;
  z-index: 999;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* --- 4. Header ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(8, 11, 22, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.12rem;
  color: #fff;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex-shrink: 0; }
.brand span em { color: var(--gold); font-style: normal; }

.site-nav { margin-left: auto; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li { margin: 0; }

.site-nav a {
  display: block;
  padding: 8px 13px;
  border-radius: 8px;
  color: var(--text-soft);
  font-size: 0.94rem;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover {
  background: var(--surface-2);
  color: #fff;
  text-decoration: none;
}
.site-nav a[aria-current="page"] { color: var(--gold); }

.nav-cta { margin-left: 10px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--text);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* --- 5. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, #ffe9a8 0%, var(--gold) 42%, var(--gold-deep) 100%);
  color: #16181f;
  box-shadow: 0 12px 26px -14px rgba(246, 198, 83, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-primary:hover { box-shadow: 0 16px 32px -12px rgba(246, 198, 83, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--gold); color: #fff; }

.btn-sm { padding: 10px 18px; font-size: 0.9rem; }
.btn-lg { padding: 17px 34px; font-size: 1.06rem; }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* --- 6. Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  padding: 68px 0 76px;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(246, 198, 83, 0.13), transparent 62%),
    radial-gradient(700px 400px at 8% 12%, rgba(77, 141, 246, 0.11), transparent 60%),
    var(--bg);
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
}

.hero h1 { margin-bottom: 0.45em; }
/* Small capability pills above the H1 */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.hero-chips .badge { font-size: 0.72rem; padding: 5px 12px; }

.hero h1 .accent {
  background: linear-gradient(120deg, var(--gold) 10%, #ffe9a8 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: 1.13rem;
  color: var(--text-soft);
  max-width: 33em;
  margin-bottom: 1.7em;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.86rem;
  color: var(--muted);
}
.hero-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); }

/* Trust strip under hero */
.trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 20px 0;
}
.trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}
.trust-strip svg { width: 19px; height: 19px; color: var(--gold); flex-shrink: 0; }

/* Device mockup */
.device {
  position: relative;
  width: min(320px, 100%);
  margin-inline: auto;
  border-radius: 34px;
  padding: 11px;
  background: linear-gradient(160deg, #2b3550, #12182a 60%);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.device::after {
  content: "";
  position: absolute;
  inset: -34px -34px auto auto;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(246, 198, 83, 0.22), transparent 68%);
  filter: blur(14px);
  z-index: -1;
}
.device-screen {
  border-radius: 26px;
  overflow: hidden;
  background: #0d1526;
  aspect-ratio: 9 / 17.5;
}
.device-screen svg { width: 100%; height: 100%; }

/* --- 7. Cards ----------------------------------------------------------- */
.card {
  position: relative;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* Hairline of light along the top edge, which is what makes a flat panel read
   as a raised surface rather than a rectangle. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}
.card:hover {
  border-color: rgba(246, 198, 83, 0.34);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.9);
}
.card h3 { margin-bottom: 0.45em; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--muted); font-size: 0.97rem; }

/* On a card carrying an icon badge, the badge gets a glow on hover so the whole
   panel responds rather than just the border. */
.card:hover .icon-badge {
  background: rgba(246, 198, 83, 0.2);
  box-shadow: 0 0 22px -6px rgba(246, 198, 83, 0.5);
}

.card-link:hover { text-decoration: none; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--gold-glow);
  border: 1px solid rgba(246, 198, 83, 0.28);
  color: var(--gold);
  margin-bottom: 16px;
}
.icon-badge svg { width: 23px; height: 23px; }

/* Game tile */
.tile {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
  padding: 26px 24px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(246, 198, 83, 0));
}
.tile:hover {
  border-color: rgba(246, 198, 83, 0.34);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.9);
}
.tile h3 { font-size: 1.18rem; margin-bottom: 0.35em; }
.tile p { color: var(--muted); font-size: 0.94rem; margin-bottom: 0; }
.tile .tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

/* --- 8. Steps / timeline ------------------------------------------------ */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 14px;
}
.steps > li {
  position: relative;
  counter-increment: step;
  padding: 26px 28px 26px 88px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.steps > li:hover { border-color: rgba(246, 198, 83, 0.32); transform: translateY(-2px); }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 26px;
  top: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffe9a8 0%, var(--gold) 45%, var(--gold-deep) 100%);
  color: #16181f;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 10px 22px -12px rgba(246, 198, 83, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Connector runs into the gap, so the list reads as a sequence rather than as
   unrelated panels. */
.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 47px;
  top: 76px;
  bottom: -16px;
  width: 2px;
  background: linear-gradient(180deg, rgba(246, 198, 83, 0.42), rgba(246, 198, 83, 0));
}
.steps h3 { font-size: 1.14rem; margin-bottom: 0.35em; }
.steps p { color: var(--muted); font-size: 0.97rem; margin-bottom: 0; }
.steps p + p { margin-top: 0.7em; }

/* --- 9. Tables ---------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.022);
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
  min-width: 480px;
}
caption {
  caption-side: bottom;
  padding: 12px 18px;
  font-size: 0.84rem;
  color: var(--muted);
  text-align: left;
}
th, td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
thead th {
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 800;
}
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.016); }
tbody tr:hover { background: rgba(246, 198, 83, 0.05); }
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 650; color: var(--text-soft); }

/* --- 10. FAQ (works without JS) ---------------------------------------- */
.faq { display: grid; gap: 12px; }

.faq details {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.016));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq details:hover { border-color: var(--border-strong); }
.faq details[open] {
  border-color: rgba(246, 198, 83, 0.4);
  background: linear-gradient(158deg, rgba(246, 198, 83, 0.07), rgba(255, 255, 255, 0.016));
}

.faq summary {
  cursor: pointer;
  padding: 19px 54px 19px 22px;
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary:hover { background: var(--surface-2); }

.faq .faq-body {
  padding: 0 20px 20px;
  color: var(--muted);
  font-size: 0.98rem;
}
.faq .faq-body p:last-child,
.faq .faq-body ul:last-child { margin-bottom: 0; }

/* --- 11. Callouts ------------------------------------------------------- */
.callout {
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(246, 198, 83, 0.15), rgba(246, 198, 83, 0.045));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  margin: 28px 0;
  font-size: 0.97rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout-title {
  display: block;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.3em;
  font-size: 0.94rem;
}
.callout-warn {
  border-left-color: var(--red);
  background: rgba(227, 58, 82, 0.1);
}
.callout-warn .callout-title { color: #ff8b9c; }
.callout-info {
  border-left-color: var(--blue);
  background: rgba(77, 141, 246, 0.1);
}
.callout-info .callout-title { color: #9dc0ff; }

/* --- 12. Breadcrumbs + TOC --------------------------------------------- */
.crumbs {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 18px 0 0;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--border-strong); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current="page"] { color: var(--text-soft); }

.toc {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.016));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 46px;
}
.toc h2 {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1em;
}
.toc ol {
  margin: 0;
  padding-left: 1.25em;
  columns: 2;
  column-gap: 36px;
  font-size: 0.95rem;
}
.toc li { margin-bottom: 0.4em; break-inside: avoid; }

/* --- 13. Page header ---------------------------------------------------- */
.page-head {
  background:
    radial-gradient(760px 300px at 12% -30%, rgba(246, 198, 83, 0.12), transparent 65%),
    var(--bg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 44px;
}
.page-head h1 { margin-bottom: 0.35em; }
.page-head p { color: var(--muted); max-width: 44em; margin-bottom: 0; font-size: 1.05rem; }

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.83rem;
  color: var(--muted);
  margin-top: 18px;
}
.meta-line span { display: flex; align-items: center; gap: 6px; }
.meta-line svg { width: 15px; height: 15px; color: var(--gold); }

/* --- 14. Prose (legal + article pages) --------------------------------- */
.prose { max-width: 72ch; }
.prose h2 {
  margin-top: 2.2em;
  padding-top: 0.2em;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.prose h3 { margin-top: 1.7em; }
.prose > h2:first-child { margin-top: 0; }
.prose ul li, .prose ol li { color: var(--text-soft); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* --- 15. CTA band ------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(246, 198, 83, 0.16), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--bg-alt));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: 66px 0;
}
.cta-band h2 { max-width: 20em; margin-inline: auto; }
.cta-band p {
  color: var(--muted);
  max-width: 46em;
  margin: 0 auto 1.9em;
}

/* --- 16. Footer --------------------------------------------------------- */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 58px 0 30px;
  font-size: 0.93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 34px;
  margin-bottom: 42px;
}
.footer-grid h2 {
  font-size: 0.79rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 1.1em;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.6em; }
.footer-grid a { color: var(--muted); }
.footer-grid a:hover { color: var(--gold); }
.footer-about p { color: var(--muted); font-size: 0.92rem; max-width: 34em; }
.footer-about .brand { margin-bottom: 14px; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
}
.footer-bottom p { margin: 0; }
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal-links li { margin: 0; }

.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--red);
  color: #ff8b9c;
  font-weight: 800;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.rg-notice {
  background: rgba(227, 58, 82, 0.09);
  border: 1px solid rgba(227, 58, 82, 0.32);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 42px;
}
.rg-notice p { margin: 0; color: var(--text-soft); font-size: 0.92rem; }
.rg-notice strong { color: #ff8b9c; }

/* --- 17. Utilities ------------------------------------------------------ */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 26px; }
.mt-4 { margin-top: 40px; }
.mb-3 { margin-bottom: 26px; }
.mb-4 { margin-bottom: 40px; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.badge-gold { background: var(--gold-glow); color: var(--gold); border-color: rgba(246, 198, 83, 0.3); }
.badge-green { background: rgba(56, 193, 114, 0.12); color: var(--green); border-color: rgba(56, 193, 114, 0.3); }

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--gold);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top svg { width: 20px; height: 20px; }

/* --- 18. Form controls (bonus turnover calculator) ---------------------- */
.calc { display: grid; gap: 24px; }

.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.field { display: flex; flex-direction: column; gap: 7px; }

.field > label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-soft);
}

.field .hint {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

.field input,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  padding: 11px 13px;
}

.field input:focus,
.field select:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

/* Unit suffix sitting flush against the input */
.field-affix { display: flex; align-items: stretch; }
.field-affix .affix {
  display: flex;
  align-items: center;
  padding: 0 13px;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  white-space: nowrap;
}
.field-affix input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.calc-out {
  background: var(--surface-2);
  border: 1px solid rgba(246, 198, 83, 0.3);
  border-radius: var(--radius);
  padding: 26px;
}
.calc-out h3 { font-size: 1.05rem; margin-bottom: 1em; }

.calc-out dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 20px;
  margin: 0;
}
.calc-out dt { color: var(--muted); font-size: 0.94rem; }
.calc-out dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.calc-out dd.is-heavy { color: #ff8b9c; }

.calc-verdict {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.98rem;
  color: var(--text-soft);
}
.calc-verdict strong { color: var(--gold); }

.calc-reset {
  margin-top: 16px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.calc-reset:hover { color: var(--gold); }

/* --- Embedded mode: /bonus-calculator/?embed=1 --------------------------- */
/* Another site has framed the page. Strip every piece of site chrome so the
   tool can sit inside someone else's article, and reveal the credit line.
   The class is applied by a small inline script in the page head, before the
   body renders, so there is no flash of the full page. */
.embed-credit { display: none; }

html.is-embedded { background: var(--bg-alt); }

html.is-embedded .site-header,
html.is-embedded .site-footer,
html.is-embedded .to-top,
html.is-embedded .crumbs,
html.is-embedded .page-head,
html.is-embedded .toc,
html.is-embedded .cta-band,
html.is-embedded .rg-notice,
html.is-embedded .skip-link { display: none !important; }

/* Everything after the tool wrapper is page context, not the tool itself:
   the worked example, the FAQ and the embed instructions. */
html.is-embedded #calc-tool ~ * { display: none !important; }

html.is-embedded .section-sm { padding: 16px 0 22px; }
html.is-embedded .wrap { padding-inline: 14px; }
html.is-embedded h2#calculator { font-size: 1.3rem; }

html.is-embedded .embed-credit {
  display: block;
  margin: 20px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
html.is-embedded .embed-credit a { color: var(--muted); text-decoration: underline; }
html.is-embedded .embed-credit a:hover { color: var(--gold); }

/* --- 19. Responsive ----------------------------------------------------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .hero-art { order: -1; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }

  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px 24px;
    margin: 0;
    display: none;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { padding: 13px 14px; font-size: 1rem; border-radius: 10px; }
  .nav-cta { margin: 12px 0 0; }
  .nav-cta .btn { width: 100%; }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc ol { columns: 1; }
}

@media (max-width: 640px) {
  .section { padding: 52px 0; }
  .hero { padding: 44px 0 56px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-out dl { grid-template-columns: 1fr; gap: 4px 0; }
  .calc-out dd { text-align: left; margin-bottom: 10px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .trust-strip ul { justify-content: flex-start; }
  .steps > li { padding: 22px 20px 22px 20px; }
  .steps > li::before {
    position: static;
    margin-bottom: 14px;
  }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --- 20. Motion / print ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, .site-footer, .to-top, .cta-band, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}

/* --- 21. Effect utilities ----------------------------------------------- */
/* Glow blobs, floating badges, gradient text and the WhatsApp button. All pure
   CSS: no images, no runtime cost, and they animate only when the visitor has
   not asked for reduced motion, because the block above zeroes transitions. */

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}
.glow-a {
  width: 270px;
  height: 270px;
  top: -64px;
  right: -44px;
  background: radial-gradient(circle, rgba(246, 198, 83, 0.38), transparent 70%);
}
.glow-b {
  width: 250px;
  height: 250px;
  bottom: -72px;
  left: -52px;
  background: radial-gradient(circle, rgba(77, 141, 246, 0.30), transparent 70%);
}

.hero-art { position: relative; }
.hero-art .device { position: relative; z-index: 1; }

.float-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(20, 27, 46, 0.94);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
.fb-1 { top: 16%; left: -14px; color: var(--green); }
.fb-2 { bottom: 18%; right: -10px; color: var(--gold); }

@keyframes shimmer {
  to { background-position: 210% center; }
}

.hero h1 .accent,
.section-head h2 .grad,
.page-head h1 .grad {
  background: linear-gradient(100deg, #fff 0%, #ffe9a8 22%, var(--gold) 48%, #fff 78%);
  background-size: 210% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 9s linear infinite;
}

/* WhatsApp button. The gradient deliberately stays in the LIGHT half of the
   green range. A deeper green (#0f8a4a) drops dark ink to 3.29:1 and white ink
   to 4.41:1, so neither passes AA. Every stop below clears 7:1 with dark ink. */
.btn-wa {
  color: #06301a;
  border: none;
  background: linear-gradient(135deg, #6ee7a0 0%, #4ade80 45%, #25d366 100%);
  box-shadow: 0 12px 26px -14px rgba(37, 211, 102, 0.9);
}
.btn-wa:hover { filter: brightness(1.03); box-shadow: 0 16px 32px -12px rgba(37, 211, 102, 0.85); }

/* The floating badges would collide with the device on narrow screens. */
@media (max-width: 700px) {
  .float-badge { display: none; }
  .glow-a, .glow-b { opacity: 0.6; }
}

/* --- 22. Asymmetric section layout --------------------------------------- */
/* Sections that open with a .section-head switch from "heading block, then
   full-width content" to a two-column layout: the heading sits in a sticky rail
   on the left while the content scrolls past it on the right.
 *
 * This is done entirely with :has(), so no page markup, copy, heading or link is
 * touched. If :has() is unavailable the layout simply stays as it was, which is
 * a clean fallback rather than a broken one.
 *
 * .section-head.center is excluded, because a centred intro is meant to be
 * centred. */

@media (min-width: 981px) {
  .section > .wrap:has(> .section-head:not(.center)),
  .section-sm > .wrap:has(> .section-head:not(.center)) {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    column-gap: 62px;
    align-items: start;
  }

  .section > .wrap:has(> .section-head:not(.center)) > .section-head,
  .section-sm > .wrap:has(> .section-head:not(.center)) > .section-head {
    grid-column: 1;
    grid-row: 1 / span 50;
    position: sticky;
    top: calc(var(--header-h) + 30px);
    max-width: none;
    margin-bottom: 0;
  }

  .section > .wrap:has(> .section-head:not(.center)) > *:not(.section-head),
  .section-sm > .wrap:has(> .section-head:not(.center)) > *:not(.section-head) {
    grid-column: 2;
  }

  /* The rail is narrower than the old heading block, so its type steps down. */
  .section-head:not(.center) h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
  .section-head:not(.center) p { font-size: 1rem; }

  /* Four abreast would be cramped beside the rail. Two by two reads better and
     gives the tiles room to breathe. */
  .section > .wrap:has(> .section-head:not(.center)) > .grid-4,
  .section-sm > .wrap:has(> .section-head:not(.center)) > .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A hairline between rail and content, so the rail reads as a rail. The rail
     is already position:sticky, which is what anchors this absolutely. */
  .section-head:not(.center)::after {
    content: "";
    position: absolute;
    top: 4px;
    right: -31px;
    width: 1px;
    height: 72px;
    background: linear-gradient(180deg, rgba(246, 198, 83, 0.5), rgba(246, 198, 83, 0));
  }
}

/* --- 23. Rebuilt visual system ------------------------------------------- */
/* Supersedes the glass-panel look. The language here is: flat solid panels with
   a bold left accent bar that slide sideways on hover, oversized ghost numerals
   on ordered steps, a hard rule under every section intro, and hue-shifted
   full-bleed bands. Squared-off buttons rather than pills. */

/* 23a. Cancel the sticky rails from section 22. Layout goes back to a single
   column, but with far bigger headings and a rule under each intro. */
@media (min-width: 981px) {
  .section > .wrap:has(> .section-head:not(.center)),
  .section-sm > .wrap:has(> .section-head:not(.center)) {
    display: block;
    column-gap: 0;
  }
  .section > .wrap:has(> .section-head:not(.center)) > .section-head,
  .section-sm > .wrap:has(> .section-head:not(.center)) > .section-head {
    position: static;
    grid-column: auto;
    grid-row: auto;
    max-width: 820px;
    margin-bottom: 48px;
  }
  .section-head:not(.center)::after { display: none; }
  .section > .wrap:has(> .section-head:not(.center)) > .grid-4,
  .section-sm > .wrap:has(> .section-head:not(.center)) > .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 23b. Display typography. Much larger, tighter, heavier. */
h1 { font-size: clamp(2.3rem, 1.3rem + 4vw, 4.2rem); letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: clamp(1.8rem, 1.25rem + 2.4vw, 3.1rem); letter-spacing: -0.032em; font-weight: 800; }
h3 { letter-spacing: -0.022em; }

/* 23c. Section intros: left bar plus a full-width rule underneath. This is the
   single biggest "editorial" signal on the page. */
.section-head {
  max-width: 820px;
  margin-bottom: 48px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.section-head.center { margin-inline: auto; }

.eyebrow {
  display: inline-block;
  padding: 0 0 0 13px;
  border: 0;
  border-left: 3px solid var(--gold);
  border-radius: 0;
  background: none;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.eyebrow::before { display: none; }

/* 23d. Cards and tiles: flat, no border, bold left accent, slide on hover. */
.card,
.tile {
  background: var(--surface);
  border: 0;
  border-left: 3px solid rgba(246, 198, 83, 0.55);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px 26px;
  overflow: visible;
  transition: transform 0.2s ease, background 0.2s ease, border-left-color 0.2s ease;
}
.card::before,
.tile::before { display: none; }

.card:hover,
.tile:hover {
  transform: translateX(5px);
  background: var(--surface-2);
  border-left-color: var(--gold);
  box-shadow: none;
}
.card:hover .icon-badge { box-shadow: none; background: var(--gold-glow); }

/* 23e. Ordered steps: oversized ghost numerals instead of gold squares, and no
   connector, because the numerals now carry the sequence. */
.steps { gap: 10px; }
.steps > li {
  background: var(--bg-alt);
  border: 0;
  border-left: 3px solid rgba(246, 198, 83, 0.28);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 30px 30px 30px 104px;
}
.steps > li:hover { transform: translateX(5px); border-left-color: var(--gold); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 26px;
  top: 12px;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(246, 198, 83, 0.24);
}
.steps > li:not(:last-child)::after { display: none; }

/* 23f. FAQ rows pick up the same left bar. */
.faq details {
  background: var(--bg-alt);
  border: 0;
  border-left: 3px solid rgba(246, 198, 83, 0.28);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: border-left-color 0.2s ease, background 0.2s ease;
}
.faq details:hover { border-left-color: rgba(246, 198, 83, 0.7); }
.faq details[open] { border-left-color: var(--gold); background: var(--surface); }

/* 23g. Full-bleed tinted bands, hue-shifted from the page background so sections
   separate hard rather than blurring into each other. */
.section-alt {
  background: linear-gradient(180deg, rgba(77, 141, 246, 0.06), rgba(77, 141, 246, 0.015));
  border-top: 1px solid rgba(77, 141, 246, 0.16);
  border-bottom: 1px solid rgba(77, 141, 246, 0.16);
}

/* 23h. Squared-off buttons and inputs. The pill shape was doing a lot of the
   "familiar" work. */
.btn { border-radius: 13px; }
.field input,
.field select { border-radius: 11px; }
.field-affix .affix { border-radius: 11px 0 0 11px; }
.field-affix input { border-radius: 0 11px 11px 0; }

/* 23i. Tables read as data sheets: solid header, no zebra, a hard outer rule. */
.table-wrap {
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
}
thead th { background: rgba(246, 198, 83, 0.09); color: var(--gold); }
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover { background: rgba(255, 255, 255, 0.028); }

/* 23j. The table of contents becomes a plain indexed list, not a panel. */
.toc {
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 26px 0;
}