/* =========================================================================
   Tower Rush — main stylesheet
   Contents:
   1. Design tokens (variables)    6. Sections and shared blocks
   2. Reset and base               7. Tables
   3. Utilities and containers     8. FAQ accordion
   4. Buttons                      9. CTA band
   5. Header and navigation       10. Footer and misc
   ========================================================================= */

/* ---------- 1. Design tokens -------------------------------------------- */
:root {
  /* Palette: deep-navy night + gold, carried over from the previous design. */
  --ink-900: #070b1c;
  --ink-800: #0b1128;
  --ink-700: #101941;
  --ink-600: #16214e;
  --ink-500: #25357c;
  --violet: #5b32c8;
  --violet-dark: #2a1668;

  --gold-100: #fff3c4;
  --gold-200: #ffe68c;
  --gold-300: #fed030;
  --gold-400: #feba3c;
  --gold-500: #fe9f00;

  --ice: #8fe7ff;
  --green: #3fae63;
  --red: #d64545;

  --bg: #f2f3f7;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --line: #e4e7f0;

  --text: #16192a;
  --text-soft: #4a5068;
  --text-dim: #6d7490;
  --text-on-dark: #ffffff;
  --text-on-dark-soft: #b9c4e6;

  /* Fluid type scale — sizes adapt without media queries. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --fs-h1: clamp(1.9rem, 1.25rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  --fs-h4: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --fs-body: clamp(0.97rem, 0.94rem + 0.18vw, 1.06rem);
  --fs-small: 0.875rem;

  /* Rhythm and shape */
  --container: 1200px;
  --gutter: clamp(1rem, 0.55rem + 2vw, 2.5rem);
  --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
  --gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 8px rgba(16, 25, 65, 0.06);
  --shadow: 0 10px 30px rgba(16, 25, 65, 0.08);
  --shadow-lg: 0 20px 50px rgba(7, 11, 28, 0.18);

  --grad-gold: linear-gradient(180deg, var(--gold-200) 0%, var(--gold-300) 50%, var(--gold-500) 100%);
  --grad-amber: linear-gradient(180deg, #ffd17b 0%, var(--gold-400) 100%);
  --grad-night: linear-gradient(160deg, var(--ink-900) 0%, var(--ink-700) 55%, #33195e 100%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 74px;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps anchor targets clear of the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

ul, ol { padding-left: 1.35em; }
li + li { margin-top: 0.55em; }

strong { font-weight: 700; }

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

::selection { background: var(--gold-300); color: var(--ink-900); }

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

/* ---------- 3. Utilities and containers --------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.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;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--gold-300);
  color: var(--ink-900);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

.stack > * + * { margin-top: 1em; }

/* Spacing utilities, so the markup carries no inline styles. */
.mt-gap { margin-top: var(--gap); }
.mt-section { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }

.grid {
  display: grid;
  gap: var(--gap);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---------- 4. Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85rem 2rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    filter 0.25s var(--ease);
}

.btn--gold {
  background: var(--grad-gold);
  color: #241206;
  box-shadow: 0 8px 20px rgba(254, 159, 0, 0.35);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(254, 159, 0, 0.45); }
.btn--gold:active { transform: translateY(0) scale(0.985); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-dark);
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }

.btn--lg { min-height: 58px; padding: 1rem 2.75rem; font-size: 1.06rem; }
.btn--sm { min-height: 42px; padding: 0.6rem 1.4rem; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn__pulse {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #241206;
  animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

/* Standalone CTA strip placed between content blocks. */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
  margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 1.9rem);
  background: var(--grad-amber);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.cta-inline p {
  margin: 0;
  font-weight: 700;
  color: #3c2400;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
}
.section--dark .cta-inline {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.section--dark .cta-inline p { color: var(--text-on-dark); }

/* ---------- 5. Header and navigation ------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9, 14, 36, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
  padding-block: 0.6rem;
}

.brand { flex: 0 0 auto; }
/* The logo is sized by height; width follows its 440x265 aspect ratio. */
.brand img { height: 50px; width: auto; }
@media (max-width: 480px) { .brand img { height: 42px; } }

.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 0.1rem + 1.1vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; }

.nav__link {
  display: block;
  padding: 0.5rem 0.15rem;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  transition: color 0.2s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--gold-300); }

.header-cta { flex: 0 0 auto; }

/* The in-list CTA is only needed inside the mobile menu panel. */
.nav__cta { display: none; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  margin-left: auto;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--ink-800);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: max-height 0.32s var(--ease);
  }
  .nav.is-open { max-height: min(78vh, 560px); overflow-y: auto; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav__link {
    padding: 0.95rem 0.25rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav__cta { display: block; margin-top: 1rem; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- 6. Sections and shared blocks ------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.65); }
.section--alt { background: var(--surface); }

.section--dark {
  position: relative;
  color: var(--text-on-dark);
  background: var(--grad-night);
}
.section--dark::after {
  /* Subtle grid overlay on top of the dark background. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%);
}
.section--dark > .container { position: relative; z-index: 1; }
.section--dark p { color: var(--text-on-dark-soft); }
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--text-on-dark); }
.section--dark li { color: var(--text-on-dark-soft); }

.section__head {
  max-width: 52rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.section__head--center { margin-inline: auto; text-align: center; }
/* Heading inside .media — the container already provides the spacing. */
.section__head--flush { margin-bottom: 0; }

.section--dark 
.section__head h2 + p { margin-top: 0.9rem; color: var(--text-soft); }
.section--dark .section__head h2 + p { color: var(--text-on-dark-soft); }

.lead { font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem); color: var(--text-soft); }

/* Breadcrumbs */
.breadcrumbs {
  padding-block: 0.9rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs li { margin: 0; display: flex; gap: 0.5rem; align-items: center; }
.breadcrumbs li + li::before { content: "›"; color: var(--text-dim); }
.breadcrumbs a:hover { color: var(--gold-500); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 600; }

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--text-on-dark);
  background: var(--grad-night);
}
/* Text and artwork are separate grid columns, so they can never overlap. */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  padding-block: clamp(2.5rem, 1.8rem + 4vw, 5.5rem);
}
@media (min-width: 992px) {
  .hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

.hero__content { max-width: 46rem; }

.hero__art {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}
@media (min-width: 992px) {
  .hero__art { max-width: 520px; }
}
.hero h1 { color: #fff; }
.hero__lead {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  color: var(--text-on-dark-soft);
}
.hero__lead + .hero__lead { margin-top: 0.9rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
.hero__note {
  margin-top: 1.1rem;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.6);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}
.hero__stats li {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__stats b {
  display: block;
  font-size: 1.2rem;
  color: var(--gold-200);
}
.hero__stats span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Simplified hero for the legal pages — no artwork, single column. */
.hero--page .hero__inner {
  grid-template-columns: 1fr;
  padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
}

/* ---- Table of contents ---- */
.toc {
  margin-top: 2rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.toc h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; }
.toc ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0.35rem 1.5rem;
  margin-top: 1rem;
  padding-left: 1.15em;
}
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 0.35rem 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  transition: color 0.2s var(--ease);
}
.toc a:hover { color: var(--gold-500); text-decoration: underline; }
.toc a[aria-current] { color: #8a5a00; font-weight: 700; }

/* ---- Cards ---- */
.card {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 0.55rem; }
.card p { color: var(--text-soft); }
.card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: var(--grad-gold);
  color: #241206;
}
.card__icon svg { width: 26px; height: 26px; }

.section--dark .card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.section--dark .card p { color: var(--text-on-dark-soft); }
.section--dark .card:hover { background: rgba(255, 255, 255, 0.1); }

/* ---- Text + image ---- */
.media {
  display: grid;
  /* 400px makes tablet columns stack instead of squeezing into two. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.media__figure { margin: 0; }
.media__figure img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Transparent-background images (logos, single objects) sit directly on the
   section background — no card frame around them. */
.media__figure--art img {
  max-width: 360px;
  margin-inline: auto;
  border-radius: 0;
  box-shadow: none;
}

.media--reverse .media__figure { order: -1; }
@media (max-width: 767px) {
  .media--reverse .media__figure { order: 0; }
}
.media__body > * + * { margin-top: 1rem; }

/* ---- Numbered steps ---- */
.steps {
  display: grid;
  /* 205px lets all five steps fit on one row on desktop. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  margin: 0;
  padding: 1.5rem 1.35rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #241206;
  font-weight: 800;
}
.steps h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.steps p { color: var(--text-soft); font-size: 0.97rem; }

.section--dark .steps li {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
/* Needs higher specificity than `.steps p`, or the text stays dark. */
.section--dark .steps p { color: var(--text-on-dark-soft); }

/* ---- Checklist ---- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative;
  padding-left: 2.1rem;
  margin-top: 0.85rem;
}
.checklist li:first-child { margin-top: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--grad-gold);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 6px; top: calc(0.35em + 6px);
  width: 8px; height: 4px;
  border-left: 2px solid #241206;
  border-bottom: 2px solid #241206;
  transform: rotate(-45deg);
}

/* ---- Callout / warning ---- */
.callout {
  display: flex;
  gap: 1rem;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.65rem);
  border-radius: var(--radius);
  background: var(--surface);
  border-left: 5px solid var(--gold-400);
  box-shadow: var(--shadow-sm);
}
.callout__icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--gold-500); }
.callout h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.callout p { color: var(--text-soft); }

.callout--warn {
  background: #fff5f5;
  border-left-color: var(--red);
}
.callout--warn .callout__icon { color: var(--red); }

.section--dark .callout {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}
.section--dark .callout--warn {
  background: rgba(214, 69, 69, 0.16);
  border-left-color: #ff8a8a;
}
.section--dark .callout--warn .callout__icon { color: #ff8a8a; }
.section--dark .callout p { color: var(--text-on-dark-soft); }

/* ---- Expert tip ---- */
.tip {
  padding: clamp(1.35rem, 1rem + 1.2vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--grad-amber);
  box-shadow: var(--shadow);
  color: #2e1c00;
}
.tip h3 { color: #2e1c00; margin-bottom: 0.6rem; }
.tip p { color: #4a2f00; }
.tip__label {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Editorial score: the visible counterpart to the Review schema ---- */
.score {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  width: fit-content;
}
.score__value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.score__meta { display: flex; flex-direction: column; gap: 0.15rem; }
.score__stars { color: var(--gold-500); letter-spacing: 2px; line-height: 1; }
.score__label { font-size: var(--fs-small); color: var(--text-dim); }

/* ---- Pros / cons ---- */
.proscons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gap);
}
.proscons__col {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.proscons__col h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.proscons__col ul { list-style: none; padding: 0; margin: 0; }
.proscons__col li {
  position: relative;
  padding-left: 1.9rem;
  margin-top: 0.75rem;
  color: var(--text-soft);
}
.proscons__col li:first-child { margin-top: 0; }
.proscons__col li::before {
  position: absolute;
  left: 0; top: 0;
  font-weight: 800;
  font-size: 1.1rem;
}
.proscons__pros li::before { content: "+"; color: var(--green); }
.proscons__cons li::before { content: "−"; color: var(--red); }
.proscons__badge {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 1rem;
  color: #fff;
}
.proscons__pros .proscons__badge { background: var(--green); }
.proscons__cons .proscons__badge { background: var(--red); }

.section--dark .proscons__col {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.section--dark .proscons__col li { color: var(--text-on-dark-soft); }

/* ---- Long-form copy block (legal pages) ---- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.6em; }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose a {
  color: #a76a00;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--gold-500); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { color: var(--text-soft); }

.panel {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ---------- 7. Tables --------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}
caption {
  padding: 1rem 1.25rem 0;
  text-align: left;
  font-size: var(--fs-small);
  color: var(--text-dim);
}
thead th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3c2400;
  background: var(--grad-amber);
}
tbody th,
tbody td {
  padding: 0.95rem 1.25rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--text-soft);
}
tbody th { text-align: left; font-weight: 700; color: var(--text); }
tbody tr:nth-child(even) { background: var(--surface-2); }

/* On narrow screens each table row becomes a card. */
@media (max-width: 599px) {
  .table--stack thead { display: none; }
  .table--stack tbody tr {
    display: block;
    padding: 0.35rem 0;
    border-top: 1px solid var(--line);
  }
  .table--stack tbody tr:first-child { border-top: 0; }
  .table--stack tbody th,
  .table--stack tbody td {
    display: block;
    border: 0;
    padding: 0.35rem 1.1rem 0.7rem;
    text-align: left;
  }
  /* The column label becomes a caption above the value, so long text reads left-aligned. */
  .table--stack tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .table--stack tbody th {
    padding-block: 0.7rem;
    background: var(--surface-2);
    border-radius: 10px;
    margin-bottom: 0.35rem;
  }
}

/* ---------- 8. FAQ accordion -------------------------------------------- */
.faq { display: grid; gap: 0.85rem; }

.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--gold-400); }

.faq__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  color: var(--text);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--gold-500);
  border-bottom: 2.5px solid var(--gold-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-4px, -4px); }
.faq__q:hover { color: var(--gold-500); }

.faq__a { padding: 0 1.35rem 1.35rem; color: var(--text-soft); }

.section--dark .faq__item {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.section--dark .faq__q { color: var(--text-on-dark); }
.section--dark .faq__a { color: var(--text-on-dark-soft); }

/* ---------- 9. CTA band ------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  background: var(--grad-night);
  color: var(--text-on-dark);
  text-align: center;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 140%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 20%, rgba(254, 186, 60, 0.28), transparent 62%);
}
.cta-band h2 { color: #fff; }
.cta-band p {
  max-width: 46rem;
  margin: 1rem auto 0;
  color: var(--text-on-dark-soft);
}
.cta-band .btn { margin-top: 2rem; }
.cta-band__note {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- 10. Footer and misc ----------------------------------------- */
.site-footer {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem;
  background: var(--ink-900);
  color: var(--text-on-dark-soft);
  font-size: 0.94rem;
}
.site-footer a { color: var(--text-on-dark-soft); transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--gold-300); }

.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__brand img { height: 64px; width: auto; }
.footer__brand p { margin-top: 1rem; color: rgba(255, 255, 255, 0.55); font-size: 0.88rem; }

.footer__col h3 {
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-top: 0.6rem; }
.footer__col li:first-child { margin-top: 0; }

.footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Partner logos have different aspect ratios — cap both height and width so
   none of them dominates the row. */
.footer__badges img {
  height: auto;
  width: auto;
  max-height: 30px;
  max-width: 130px;
  opacity: 0.75;
  transition: opacity 0.2s var(--ease);
}
.footer__badges a:hover img { opacity: 1; }
.footer__age {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  font-weight: 800;
  color: #fff;
  font-size: 0.9rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer__disclaimer {
  margin-top: 1rem;
  max-width: 70ch;
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}

/* Back-to-top button */
.to-top {
  position: fixed;
  right: clamp(0.85rem, 0.5rem + 1vw, 1.75rem);
  bottom: clamp(0.85rem, 0.5rem + 1vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #241206;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 20px; height: 20px; }

/* Contact form */
.form { display: grid; gap: 1.15rem; max-width: 34rem; }
.form label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.4rem; }
.form input,
.form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form input:focus,
.form textarea:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 4px rgba(254, 186, 60, 0.2);
  outline: none;
}
.form textarea { min-height: 150px; resize: vertical; }
.form__hint { font-size: var(--fs-small); color: var(--text-dim); }

/* Contact details list */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contact-list li { margin: 0; }
.contact-list strong { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }