/* Leonida Waypoint — shared stylesheet.
   Design language carried over from the approved preview: dark Vice palette,
   Barlow Condensed display headings, neon pink / teal / gold accents.
   Every var(--x) used below is defined in :root for both color schemes. */
:root {
  --bg: #fdf3ec;
  --bg-2: #ffffff;
  --ink: #22131f;
  --ink-soft: #5c4356;
  --line: #eccdbd;
  --pink: #e8316f;
  --pink-deep: #c21852;
  --orange: #f26d21;
  --teal: #0e7d86;
  --teal-soft: #e2f3f4;
  --night: #160a24;
  --night-2: #221038;
  --gold: #ffb43a;
  --chip: #fde8dd;
  --shadow: 0 10px 30px rgba(34, 19, 31, 0.12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12081d;
    --bg-2: #1d0f30;
    --ink: #fdf0e9;
    --ink-soft: #cdb4c6;
    --line: #3a2350;
    --pink: #ff5e8a;
    --pink-deep: #ff5e8a;
    --orange: #ff8a3d;
    --teal: #3ec6cf;
    --teal-soft: #14333d;
    --chip: #2c1746;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Barlow", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
figure { margin: 22px 0; }
figure img { border-radius: 10px; width: 100%; }
figcaption { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; }
/* Long single words (Spanish headings like "Actualizaciones") must
   never push the page sideways on narrow phones: allow an emergency
   mid-word break only when a word alone exceeds the line. With the
   condensed display font loaded this never triggers. */
h1, h2, h3 { overflow-wrap: break-word; }
a { color: var(--pink-deep); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--pink); color: #fff; padding: 10px 16px; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 120;
  background: var(--night);
  color: #fdf0e9;
  border-bottom: 3px solid var(--pink);
}
.topbar-in {
  display: flex; align-items: center; gap: 18px;
  max-width: 1120px; margin: 0 auto; padding: 10px 20px;
}
.brand {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 26px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #fff; text-decoration: none;
  line-height: 1; display: flex; align-items: center; gap: 9px;
}
.brand .brand-mark { width: 26px; height: 26px; flex: none; }
.brand span { color: var(--gold); }
nav.main { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
nav.main a {
  color: #f6d9e8; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 6px 10px; border-radius: 4px;
}
nav.main a:hover { background: rgba(255,255,255,0.12); color: #fff; }
nav.main a[aria-current="page"] { background: var(--pink); color: #fff; }
.menu-btn {
  display: none; margin-left: auto; font: inherit; font-weight: 700; font-size: 15px;
  background: var(--pink); color: #fff; border: none; border-radius: 5px;
  padding: 9px 16px; cursor: pointer; min-height: 44px;
}
@media (max-width: 860px) {
  nav.main { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 560px) {
  /* Header must fit a phone even before the webfont arrives (fallback
     fonts are wider than Barlow Condensed). */
  .topbar-in { gap: 6px; padding: 10px 14px; }
  .brand { font-size: 16px; gap: 4px; min-width: 0; white-space: nowrap; }
  .brand .brand-mark { width: 20px; height: 20px; }
  .menu-btn { padding: 9px 9px; font-size: 14px; flex: none; }
  /* The EN | ES toggle joined the phone header with the Spanish
     edition: its segments keep a 40px-tall tap target and only the
     horizontal padding shrinks a step, so brand + toggle + menu fit
     a 360px-wide phone with no overlap. */
  .lang-toggle { padding: 2px; border-width: 2px; margin-left: 0; gap: 6px; }
  .lang-toggle a { padding: 0 20px; font-size: 13px; min-height: 40px; }
  .lang-toggle .lt-sep { font-size: 14px; padding: 0 8px; }
}
@media (max-width: 370px) {
  /* Under 370px the full two-word wordmark cannot share the header
     with the language toggle and the menu button in any font, so the
     header brand shortens to the pin + LEONIDA (footer and menu keep
     the full wordmark). */
  .topbar .brand span { display: none; }
}
/* Mobile menu: fixed takeover panel, background frozen (JS locks body),
   menu scrolls inside its own container. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--night);
  color: #fdf0e9; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 22px 40px; display: none;
}
.mobile-menu.open { display: block; }
.mobile-menu .mm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobile-menu .mm-close {
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.35);
  border-radius: 5px; padding: 9px 16px; min-height: 44px;
}
.mobile-menu a.mm-link {
  display: block; color: #fff; text-decoration: none; padding: 15px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.mobile-menu a.mm-link small {
  display: block; font-family: "Barlow", sans-serif; font-size: 13.5px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: #d9bcd2;
}
.mobile-menu a.mm-link[aria-current="page"] { color: var(--gold); }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--night); }
.hero img.hero-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}
@media (max-width: 560px) {
  /* Beach key art: keep Jason and Lucia in frame on narrow screens. */
  .hero img.hero-art { object-position: 78% 22%; }
}
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,5,28,0.92) 30%, rgba(16,5,28,0.55) 62%, rgba(16,5,28,0.15) 100%);
}
.hero-in { position: relative; padding: 64px 0 56px; max-width: 680px; }
.hero .kicker, .kicker {
  display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(255,180,58,0.6); padding: 4px 10px; border-radius: 3px;
  background: rgba(16,5,28,0.55);
}
.hero h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(46px, 8vw, 84px); line-height: 0.95; font-weight: 700;
  text-transform: uppercase; margin: 18px 0 14px; letter-spacing: 0.01em;
}
.hero h1 em { font-style: normal; color: var(--pink); }
.hero p.lede { font-size: 19px; color: #f3e2ee; max-width: 34em; margin: 0 0 26px; }
.countdown { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.cd-cell {
  background: rgba(16,5,28,0.72); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px; min-width: 76px; padding: 10px 8px 8px; text-align: center;
}
.cd-cell b {
  display: block; font-family: "Barlow Condensed", sans-serif;
  font-size: 36px; line-height: 1; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.cd-cell span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.cd-note { width: 100%; font-size: 14px; color: #e9cfe0; margin: 2px 0 0; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 16px;
  padding: 12px 22px; border-radius: 5px; border: 2px solid transparent;
}
.btn-pink { background: var(--pink); color: #fff; }
.btn-pink:hover { background: var(--pink-deep); }
.btn-ghost { border-color: rgba(255,255,255,0.7); color: #fff; background: rgba(16,5,28,0.4); }
.btn-ghost:hover { background: rgba(255,255,255,0.14); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-outline { border-color: var(--pink); color: var(--pink-deep); background: transparent; }

/* ---------- fact strip ---------- */
.facts { background: var(--night-2); color: #fdf0e9; }
.facts-in {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
}
.fact { padding: 18px 16px 16px; border-left: 1px solid rgba(255,255,255,0.14); }
.fact:first-child { border-left: none; padding-left: 0; }
.fact b {
  display: block; font-family: "Barlow Condensed", sans-serif; font-size: 26px;
  font-weight: 700; line-height: 1.05; color: #fff;
}
.fact span { font-size: 13.5px; color: #d9bcd2; }

/* ---------- sections & cards ---------- */
section.block { padding: 56px 0 8px; }
.sec-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
h2 {
  font-family: "Barlow Condensed", sans-serif; font-size: clamp(32px, 5vw, 44px);
  font-weight: 700; text-transform: uppercase; line-height: 1; margin: 0;
}
h2 .accent { color: var(--pink); }
.sec-sub { color: var(--ink-soft); max-width: 46em; margin: 6px 0 24px; font-size: 16.5px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 22px; }
.filter {
  font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
  background: var(--bg-2); color: var(--ink); border: 1.5px solid var(--line);
  padding: 7px 16px; border-radius: 999px; min-height: 40px;
}
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.card[hidden] { display: none; }
.card .thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--night-2); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb.text-thumb {
  display: flex; align-items: flex-end; padding: 16px;
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  font-size: 30px; font-weight: 700; line-height: 0.95; color: #fff;
}
.thumb-coral { background: linear-gradient(135deg, #e8316f, #f26d21); }
.thumb-teal { background: linear-gradient(135deg, #0e7d86, #123a6d); }
.thumb-plum { background: linear-gradient(135deg, #5b1e5e, #e8316f); }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
}
.tag-live { background: var(--teal-soft); color: var(--teal); }
.tag-soon { background: var(--chip); color: var(--pink-deep); }
.read-time { font-size: 13px; color: var(--ink-soft); }
.card h3 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--pink-deep); text-decoration: underline; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.card .card-link { margin-top: auto; font-weight: 700; font-size: 14.5px; }

/* ---------- inner page head, breadcrumbs, meta ---------- */
.page-head { padding: 34px 0 6px; }
.crumbs { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--pink-deep); text-decoration: underline; }
.crumbs .sep { margin: 0 7px; color: var(--pink); }
.page-head h1 {
  font-family: "Barlow Condensed", sans-serif; font-size: clamp(38px, 6vw, 58px);
  line-height: 0.98; font-weight: 700; text-transform: uppercase; margin: 10px 0 12px;
}
.page-head h1 .accent { color: var(--pink); }
.page-head .lede { font-size: 18.5px; color: var(--ink-soft); max-width: 44em; margin: 0 0 14px; }
.meta-line {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 14px; color: var(--ink-soft); margin-bottom: 8px;
}
.meta-line .verified { font-weight: 700; color: var(--teal); }
.meta-line .dotsep::before { content: "·"; margin-right: 10px; color: var(--pink); font-weight: 700; }

/* ---------- article layout: prose + sticky right rail ---------- */
.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 38px;
  align-items: start; padding-bottom: 8px;
}
.rail { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 18px; }
.rail-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 18px;
}
.rail-card h3 {
  font-family: "Barlow Condensed", sans-serif; font-size: 20px; text-transform: uppercase;
  margin: 0 0 10px; font-weight: 700;
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li + li { margin-top: 2px; }
.toc-list a {
  display: block; padding: 6px 8px; border-radius: 4px; color: var(--ink);
  text-decoration: none; font-size: 15px; font-weight: 500;
}
.toc-list a:hover { background: var(--teal-soft); color: var(--teal); }
@media (max-width: 960px) {
  .article-layout { grid-template-columns: 1fr; }
  .rail { position: static; order: -1; }
}
.prose { font-size: 17px; max-width: 44em; }
.prose h2 {
  font-size: clamp(28px, 4vw, 36px); margin: 40px 0 12px; scroll-margin-top: 92px;
}
.prose h2:first-child { margin-top: 8px; }
.prose h3 { font-size: 21px; margin: 26px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin-bottom: 7px; }
.prose a { font-weight: 600; }
.prose figure { margin: 22px 0; }
.prose figure img { border-radius: 10px; width: 100%; }
.prose figcaption { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; }

/* quick-facts box (PowerPyx roadmap style) */
.facts-box {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 5px solid var(--pink);
  border-radius: 10px; box-shadow: var(--shadow); padding: 20px 22px; margin: 20px 0 26px;
}
.facts-box h2, .facts-box h3 {
  font-family: "Barlow Condensed", sans-serif; font-size: 22px; text-transform: uppercase;
  margin: 0 0 12px;
}
.facts-box dl { display: grid; grid-template-columns: 190px 1fr; gap: 7px 18px; margin: 0; }
.facts-box dt { font-weight: 700; color: var(--ink-soft); font-size: 15px; }
.facts-box dd { margin: 0; font-size: 15.5px; }
@media (max-width: 560px) { .facts-box dl { grid-template-columns: 1fr; gap: 2px 0; } .facts-box dd { margin-bottom: 8px; } }

/* numbered steps */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 14px; margin: 18px 0 24px; }
.step {
  counter-increment: step; display: grid; grid-template-columns: 46px 1fr; gap: 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
.step::before {
  content: counter(step); display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--pink); color: #fff;
  font-family: "Barlow Condensed", sans-serif; font-size: 24px; font-weight: 700;
}
.step h3 { margin: 2px 0 5px; font-size: 18.5px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.step p + p { margin-top: 8px; }

/* callouts */
.callout {
  border: 1.5px solid var(--teal); background: var(--teal-soft); border-radius: 8px;
  padding: 14px 17px; margin: 18px 0; font-size: 15.5px;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout .callout-label {
  display: block; font-weight: 700; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 4px;
}
.callout-warn { border-color: var(--gold); background: var(--chip); }
.callout-warn .callout-label { color: var(--pink-deep); }

/* sources + related */
.sources { font-size: 14.5px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 34px; }
.sources h3 { font-size: 16px; color: var(--ink); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.sources ul { margin: 0; padding-left: 20px; }
.sources li { margin-bottom: 5px; }

/* ---------- tables (editions, collectibles summary) ---------- */
.table-scroll { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); background: var(--bg-2); }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; padding: 14px 18px; vertical-align: top; }
thead th {
  font-family: "Barlow Condensed", sans-serif; font-size: 21px; text-transform: uppercase;
  letter-spacing: 0.03em; background: var(--night); color: #fff; font-weight: 600;
}
thead th .price { color: var(--gold); }
tbody th { font-weight: 600; color: var(--ink-soft); width: 30%; }
tbody tr + tr { border-top: 1px solid var(--line); }
.table-note { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
td .cell-note { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }

/* ---------- checklist / tracker ---------- */
.check-panel {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 22px; display: grid;
  grid-template-columns: 1fr 260px; gap: 28px;
}
.task {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  font: inherit; background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 13px 4px; cursor: pointer; color: var(--ink); min-height: 48px;
}
.task:last-child { border-bottom: none; }
.box {
  flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 5px;
  border: 2px solid var(--pink); display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
}
.task[aria-pressed="true"] .box { background: var(--pink); }
.task[aria-pressed="true"] .task-text { color: var(--ink-soft); text-decoration: line-through; }
.task-text b { display: block; font-size: 16.5px; }
.task-text span { font-size: 14px; color: var(--ink-soft); }
.task-static { cursor: default; }
.task-static .box { border-color: var(--line); }
.task-static .task-text b { color: var(--ink-soft); }
.progress-side { align-self: start; }
.progress-num {
  font-family: "Barlow Condensed", sans-serif; font-size: 54px; font-weight: 700;
  line-height: 1; color: var(--pink);
}
.progress-bar { height: 12px; border-radius: 6px; background: var(--chip); overflow: hidden; margin: 12px 0 10px; }
.progress-fill { height: 100%; width: 0%; background: var(--pink); border-radius: 6px; transition: width 0.35s ease; }
.progress-side p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.tracker-sec { margin-bottom: 26px; }
.tracker-sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.tracker-sec-head h3 {
  font-family: "Barlow Condensed", sans-serif; font-size: 27px; text-transform: uppercase; margin: 0;
}
.tracker-sec-count { font-weight: 700; color: var(--teal); font-size: 15px; font-variant-numeric: tabular-nums; }
.tracker-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 22px; }
.await-note { font-size: 14.5px; color: var(--ink-soft); margin: 4px 0 14px; }
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } html { scroll-behavior: auto; } }

/* ---------- roadmap phases ---------- */
.roadmap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.phase {
  border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: var(--bg-2);
  box-shadow: var(--shadow);
}
.phase h3 {
  font-family: "Barlow Condensed", sans-serif; font-size: 26px; text-transform: uppercase;
  margin: 0 0 4px; font-weight: 700;
}
.phase .when { font-weight: 700; color: var(--pink-deep); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.phase ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 15.5px; }
.phase li { margin-bottom: 7px; }
.phase li b { color: var(--ink); }

/* ---------- faq ---------- */
.faq-item { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); margin-bottom: 12px; overflow: hidden; }
.faq-q {
  width: 100%; font: inherit; font-weight: 700; font-size: 17px; text-align: left;
  background: none; border: none; padding: 16px 20px; cursor: pointer; color: var(--ink);
  display: flex; justify-content: space-between; gap: 14px; align-items: center; min-height: 52px;
}
.faq-q .chev { color: var(--pink); font-size: 20px; transition: transform 0.2s ease; flex: none; }
.faq-item.open .faq-q .chev { transform: rotate(45deg); }
.faq-a { padding: 0 20px 18px; color: var(--ink-soft); font-size: 15.5px; display: none; }
.faq-item.open .faq-a { display: block; }
.faq-a p { margin: 0; }
.faq-a p + p { margin-top: 10px; }

/* ---------- banner / footer ---------- */
.wide-banner { margin-top: 56px; border-radius: 12px; overflow: hidden; position: relative; }
.wide-banner img { width: 100%; height: 300px; object-fit: cover; }
.wide-banner .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 24px 18px; color: #fff;
  background: linear-gradient(transparent, rgba(16,5,28,0.85));
  font-family: "Barlow Condensed", sans-serif; font-size: clamp(24px, 4vw, 36px);
  text-transform: uppercase; font-weight: 700; line-height: 1.05;
}
footer { margin-top: 64px; background: var(--night); color: #d9bcd2; padding: 38px 0 42px; }
footer .brand { font-size: 22px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; }
footer h3 {
  font-family: "Barlow Condensed", sans-serif; font-size: 18px; text-transform: uppercase;
  color: #fff; margin: 0 0 10px; letter-spacing: 0.05em;
}
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 7px; }
footer a { color: #d9bcd2; text-decoration: none; font-size: 14.5px; }
footer a:hover { color: #fff; text-decoration: underline; }
footer p { font-size: 14px; max-width: 62em; }
.foot-legal { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 26px; padding-top: 18px; }
.foot-legal p { font-size: 13px; color: #a98bab; margin: 0 0 8px; }

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .facts-in { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: none; padding-left: 0; }
  .check-panel { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .facts-in { grid-template-columns: 1fr; }
  .fact { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); }
  .fact:first-child { border-top: none; }
  .hero-in { padding: 44px 0 40px; }
  .foot-grid { grid-template-columns: 1fr; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tbody th { width: auto; padding-bottom: 0; }
  tbody td { padding-top: 4px; }
  tbody td::before { content: attr(data-ed); display: block; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink-deep); }
  .step { grid-template-columns: 38px 1fr; padding: 14px; }
  .step::before { width: 38px; height: 38px; font-size: 20px; }
  .step-check { grid-template-columns: 30px 38px 1fr; }
}

/* ---------- quick version (OSRS quick-guide pattern) ---------- */
.quick-jump {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px;
  font-weight: 700; font-size: 15.5px; text-decoration: none;
  color: var(--teal); border: 1.5px solid var(--teal); border-radius: 999px;
  padding: 8px 16px; background: var(--teal-soft); min-height: 44px;
}
.quick-jump:hover { text-decoration: underline; }
.quick-block {
  border: 1.5px solid var(--teal); background: var(--teal-soft);
  border-radius: 10px; padding: 20px 22px; margin: 18px 0 26px;
  scroll-margin-top: 92px;
}
.quick-block h2 {
  font-size: clamp(24px, 3.4vw, 30px); margin: 0 0 10px; color: var(--teal);
}
.quick-block p { margin: 0 0 10px; font-size: 16px; }
.quick-block ol, .quick-block ul { margin: 0; padding-left: 22px; font-size: 16px; }
.quick-block li { margin-bottom: 6px; }
.quick-block .quick-note { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; }

/* ---------- tickable steps (OSRS interactive checklist pattern) ---------- */
.step-check { grid-template-columns: 30px 46px 1fr; align-items: start; }
.step-box {
  width: 26px; height: 26px; margin-top: 10px; border-radius: 6px; cursor: pointer;
  border: 2px solid var(--teal); background: var(--bg-2); color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1; display: grid; place-items: center;
  padding: 0;
}
.step-check.done .step-box { background: var(--teal); }
.step-check.done h3 { color: var(--ink-soft); text-decoration: line-through; }
.steps-progress { font-size: 14.5px; font-weight: 700; color: var(--teal); margin: 0 0 10px; }

/* ---------- reset + map cross-links ---------- */
.reset-btn {
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  background: none; border: 1.5px solid var(--line); color: var(--ink-soft);
  border-radius: 999px; padding: 8px 16px; min-height: 40px;
}
.reset-btn:hover { border-color: var(--pink); color: var(--pink-deep); }
.map-link { font-weight: 700; }
/* .map-link used to be nowrap, which was safe for short English
   labels ("View on map") but made long Spanish labels ("Marcador de
   demostración de acrobacias") one unbreakable 342px chunk that
   widened the article grid on 360px phones. Labels may wrap. */

/* ---------- Retention modules (Nov 10, 2026) ---------- */
.progress-summary{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px}
.progress-ring-wrap{position:relative;width:104px;height:104px;flex:none}
.progress-ring{width:104px;height:104px;transform:rotate(-90deg)}
.progress-ring-bg{fill:none;stroke:var(--chip);stroke-width:9}
.progress-ring-fg{fill:none;stroke:var(--teal);stroke-width:9;stroke-linecap:round}
.progress-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.progress-ring-num strong{font-size:1.35rem;color:var(--ink);line-height:1.05}
.progress-ring-num small{color:var(--ink-soft);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase}
.progress-main h2,.progress-main h3{margin-bottom:6px}
.progress-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;margin:12px 0}
.progress-cat-head{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;color:var(--ink-soft)}
.progress-cat-head span:first-child{color:var(--ink)}
.progress-cat-val{font-variant-numeric:tabular-nums;white-space:nowrap}
.progress-cat-bar{height:7px;margin-top:4px}
.progress-note{color:var(--ink-soft);font-size:.9rem;margin-top:8px}
@media (max-width:640px){.progress-summary{grid-template-columns:1fr}.progress-cats{grid-template-columns:1fr}.progress-ring-wrap{margin:0 auto}}

/* Language toggle (EN | ES): a bordered segmented pill in the topbar
   before the menu button on every page, both editions. Each segment
   is a full-height tap target, a "|" separator sits between them,
   and the current language is the filled segment. */
.lang-toggle{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.10);border:2px solid rgba(255,255,255,0.50);border-radius:999px;padding:3px;flex:none;margin-left:8px}
.lang-toggle a{color:#fdf0e9;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.05em;padding:0 28px;border-radius:999px;line-height:1;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.lang-toggle .lt-sep{color:rgba(255,255,255,0.70);font-size:16px;font-weight:400;line-height:1;padding:0 10px;flex:none}
.lang-toggle a:hover{background:rgba(255,255,255,0.18)}
.lang-toggle a[aria-current="true"]{background:var(--pink);color:#fff}
@media (max-width:860px){.lang-toggle{margin-left:auto}.menu-btn{margin-left:0}}
/* From Rockstar rail: same card treatment as the Verified Today board. */
.posts-feed{display:grid;gap:14px}
.post-entry{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.post-account{font-weight:700;color:var(--teal);font-size:.92rem}
.post-text{margin:6px 0 10px;color:var(--ink)}
.updates-feed{display:grid;gap:14px}
.update-entry{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.update-entry h3{margin:6px 0}
.update-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.update-meta time{color:var(--ink-soft);font-size:.86rem;font-weight:600}
.update-sources{color:var(--ink-soft);font-size:.86rem;margin-top:8px}
.update-empty{color:var(--ink-soft)}

.unlock-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.unlock-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px}
.unlock-time{font-size:1.12rem;font-weight:700;color:var(--ink);margin:6px 0}
.unlock-count{color:var(--teal);font-weight:700;font-variant-numeric:tabular-nums}
.unlock-rule{color:var(--ink-soft);font-size:.92rem}
.unlock-zone{grid-column:1/-1;color:var(--ink-soft);font-size:.92rem}
@media (max-width:640px){.unlock-panel{grid-template-columns:1fr}}

.email-capture{border-top:1px solid var(--line);padding:6px 0 20px}
.email-capture h2{font-size:1.25rem}
.email-form{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-top:10px}
.email-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--ink);flex:1 1 260px}
.email-form input[type="email"]{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:11px 13px;font-size:1rem;font-family:inherit}
.email-form input[type="email"]:focus{outline:2px solid var(--teal);outline-offset:1px}
.form-note{color:var(--ink-soft);font-size:.88rem;margin-top:10px}
.form-status{color:var(--teal);font-weight:600;margin-top:8px}
.form-status:empty{display:none}

/* Permanent Install button (Nov 11, 2026): replaces the removed
   auto-appearing install card. No pop-ups on this site — the button
   sits in the footer (and on the About page) and acts only on tap.
   The guide panel below renders only after a tap, in-page. */
.install-cta{display:flex;gap:14px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:4px 0 22px;background:var(--chip)}
.install-cta[hidden]{display:none}
.install-cta-text strong{color:var(--ink);display:block;font-size:1.02rem}
.install-cta-text p{color:var(--ink-soft);font-size:.92rem;margin:3px 0 0;max-width:560px}
.install-btn{min-height:44px;flex:0 0 auto}
.install-guide{position:fixed;inset:0;z-index:1300;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,4,20,.62)}
.install-guide-card{background:var(--chip);border:1px solid var(--gold);border-bottom:0;border-radius:16px 16px 0 0;padding:20px;width:min(460px,100%);box-shadow:0 -14px 40px rgba(0,0,0,.5)}
.install-guide-card strong{color:var(--ink);display:block;font-size:1.05rem;margin-bottom:6px}
.install-guide-card p{color:var(--ink-soft);font-size:.95rem;margin:0 0 8px}
.install-guide-card ol{margin:0 0 14px;padding-left:22px;color:var(--ink);font-size:.98rem}
.install-guide-card li{margin-bottom:6px}
@media (min-width:760px){.install-guide{align-items:center}.install-guide-card{border-bottom:1px solid var(--gold);border-radius:16px}}

/* Reports layer (Nov 11, 2026): claim tags in the 60-second box,
   the homepage rail's Latest reports tail, the Updates page strip,
   and the foot-of-article More reports row. */
.tag-na{background:var(--night-2);color:var(--ink-soft)}
.quick-block li .tag{margin-right:6px;vertical-align:1px}
.latest-reports{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.latest-reports h3{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft);margin:0 0 6px}
.latest-reports .lr-link{display:block;font-weight:600;font-size:14.5px;line-height:1.35;padding:5px 0}
.latest-reports .lr-all{display:inline-block;font-weight:700;font-size:13.5px;margin-top:6px}
.reports-strip{display:flex;gap:12px 18px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--teal);background:var(--teal-soft);border-radius:10px;padding:14px 18px}
.reports-strip p{margin:0;color:var(--ink);font-size:15.5px;flex:1 1 320px}
.reports-strip a{font-weight:700;flex:0 0 auto}
.more-reports{border-top:1px solid var(--line);margin-top:30px;padding-top:16px}
.more-reports h3{font-size:16px;color:var(--ink);margin:0 0 8px;text-transform:uppercase;letter-spacing:.06em}
.more-reports ul{margin:0;padding-left:20px}
.more-reports li{margin-bottom:5px}

/* ---------- Homepage redesign (Nov 10, 2026): two columns + right rail,
   section button row with scroll-spy, X-style Rockstar cards ---------- */
/* Section button row: sticky under the topbar (topbar z-index 120,
   this sits at 110 so it slides under, never over, the header). */
.section-nav{position:sticky;top:64px;z-index:110;background:var(--bg);border-bottom:1px solid var(--line)}
.section-nav-in{display:flex;gap:10px;overflow-x:auto;padding:12px 20px;max-width:1120px;margin:0 auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.section-nav-in::-webkit-scrollbar{display:none}
a.sec-btn{flex:none;font-weight:700;font-size:15px;text-decoration:none;color:var(--ink);background:var(--bg-2);border:1.5px solid var(--line);border-radius:999px;padding:11px 22px;min-height:44px;display:inline-flex;align-items:center}
a.sec-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sec-btn:hover{border-color:var(--pink)}
.sec-btn.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Two-column shell: main (~640-720px effective) + 320px right rail. */
.home-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start;max-width:1120px;margin:0 auto;padding:0 20px}
.home-main{min-width:0}
.home-main section.block{padding-top:26px}
.home-main section.block:first-child{padding-top:20px}
.home-main .cards{grid-template-columns:1fr 1fr}
.home-rail{position:sticky;top:140px;display:flex;flex-direction:column;gap:16px;padding-top:20px;min-width:0}
.rail-mod{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;scroll-margin-top:140px}
.rail-mod h2{font-size:24px}
.rail-mod .sec-sub{font-size:14.5px;margin:4px 0 12px}
.rail-mod .sec-head{margin-bottom:4px}
.home-main section.block,.home-progress-full{scroll-margin-top:140px}
/* Mini progress in the rail: ring + % + continue only (progress.js
   renders it from the same state as the full strip and the tracker). */
.progress-mini{display:flex;align-items:center;gap:14px}
.progress-mini .progress-ring-wrap{width:76px;height:76px}
.progress-mini .progress-ring{width:76px;height:76px}
.progress-mini .progress-ring-num strong{font-size:1.05rem}
.progress-mini .btn{padding:10px 16px;font-size:14.5px;flex:1;min-width:0;text-align:center}
/* Phone-only full progress strip (desktop uses the rail mini). */
.home-progress-full{display:none}
/* Confirmed-facts rail card: compact definition rows, small type. */
.rail-facts dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:13.5px}
.rail-facts dt{font-weight:700;color:var(--ink);white-space:nowrap}
.rail-facts dd{margin:0;color:var(--ink-soft)}
/* Verified Today, compact rail variant (updates.js data-compact). */
.updates-compact{display:grid;gap:0}
.update-row{padding:9px 0;border-bottom:1px solid var(--line)}
.update-row:last-child{border-bottom:none}
.update-row .update-meta{margin-bottom:2px}
.update-row h3{font-size:15.5px;margin:0;line-height:1.3}
.rail-more{font-weight:700;font-size:14.5px;display:inline-block;margin-top:10px}
/* X embeds (real twitter-tweet blockquotes upgraded by X's widgets.js;
   the blockquote itself is the blocked-script fallback: a readable
   quote with a link to the post, styled dark to match the rail). */
.x-embeds .twitter-tweet,.x-embeds blockquote.twitter-tweet{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--ink)}
.x-embeds .twitter-tweet a{color:var(--pink)}
.x-embeds .twitter-tweet-rendered{margin:0 0 12px !important;max-width:100% !important}
.x-caption{font-size:14px;line-height:1.45;color:var(--ink-soft);margin:-4px 0 14px}
.x-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.x-card + .x-card{margin-top:12px}
.x-head{display:flex;align-items:flex-start;gap:10px}
.x-avatar{flex:none;width:42px;height:42px;border-radius:50%;background:var(--night);color:var(--gold);display:grid;place-items:center;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:21px;line-height:1}
.x-who{min-width:0;line-height:1.25}
.x-name{display:block;font-weight:700;font-size:15px;color:var(--ink)}
.x-handle{display:block;font-size:13.5px;color:var(--ink-soft)}
.x-mark{margin-left:auto;flex:none;font-weight:700;font-size:17px;color:var(--ink);line-height:1;padding-top:2px}
.x-text{margin:9px 0 8px;font-size:15px;line-height:1.45;color:var(--ink)}
.x-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:9px}
.x-meta time{font-size:13px;color:var(--ink-soft)}
.x-view{font-weight:700;font-size:13.5px;text-decoration:none}
.x-view:hover{text-decoration:underline}
/* Homepage density pass (Nov 10, 2026): tighter section rhythm inside
   the homepage main column only; inner pages keep the 56px default. */
.home-main .sec-sub{margin-bottom:16px}
.home-main .filters{margin:12px 0 16px}
.home-main .cards{gap:16px}
.home-main .card-body{padding:13px 16px 15px;gap:6px}
.home-main .check-panel{padding:16px;gap:20px}
.home-main .task{padding:9px 4px;min-height:44px}
.home-main .faq-item{margin-bottom:9px}
.home-main .faq-q{padding:12px 18px;min-height:48px}
.home-main .wide-banner{margin-top:32px}
/* Compact editions summary on the homepage: two cards side by side with
   price and the deciding differences. The full comparison table lives
   in the Editions Guide. */
.ed-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 6px}
.ed-card{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.ed-card h3{margin:0 0 8px;font-size:19px}
.ed-card h3 .price{color:var(--pink);white-space:nowrap}
.ed-card ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:15px}
.ed-card li{margin-bottom:5px}
@media (max-width:640px){.ed-compare{grid-template-columns:1fr}}
@media (max-width:1023px){
  /* Single column. The two wrappers dissolve so every module can be
     ordered individually: full progress, guides, map, checklist,
     Rockstar, Verified, facts, editions, FAQ. */
  .home-layout{display:flex;flex-direction:column;gap:0}
  .home-main,.home-rail{display:contents}
  .home-rail .rail-mod{margin-top:16px}
  .home-progress-full{display:block;padding:20px 20px 0;max-width:1120px;margin:0 auto;width:100%}
  .mod-guides{order:1}.mod-map{order:2}.mod-checklist{order:3}
  .mod-rockstar{order:4}.mod-verified{order:5}.mod-facts{order:6}
  .mod-editions{order:7}.mod-faq{order:8}
  .rail-mod-progress{display:none}
}
@media (max-width:640px){.home-main .cards{grid-template-columns:1fr}}
@media (max-width:560px){.section-nav{top:60px}.home-layout,.home-progress-full{padding-left:14px;padding-right:14px}.section-nav-in{padding-left:14px;padding-right:14px}}

.checklist-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.print-list{list-style:none;margin:10px 0 4px}
.print-list li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start}
.print-list input[type="checkbox"]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--teal)}
/* ---------- unlock picker + download calculator (Nov 11, 2026) ---------- */
.unlock-panel.one{grid-template-columns:1fr}
.unlock-picker{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 12px}
.unlock-picker label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem;color:var(--ink);flex:1 1 200px}
.unlock-picker select{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;min-height:44px;width:100%}
.dlcalc{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px;margin:18px 0;box-shadow:var(--shadow)}
.dlcalc .calc-row{display:flex;flex-wrap:wrap;gap:12px}
.dlcalc label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem;color:var(--ink);flex:1 1 160px}
.dlcalc input[type="number"],.dlcalc select{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;min-height:44px;width:100%}
.dlcalc .calc-check{flex-direction:row;align-items:center;gap:10px;flex:1 1 100%}
.dlcalc .calc-check input{width:20px;height:20px;accent-color:var(--teal);flex:none}
.dlcalc .presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dlcalc .preset-btn{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;min-height:40px}
.dlcalc .preset-btn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.dlcalc .calc-out{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.dlcalc .calc-big{font-size:1.3rem;font-weight:700;color:var(--ink);margin:4px 0}
.dlcalc .calc-note{color:var(--ink-soft);font-size:.92rem}

@media print{
  body{background:#fff;color:#111}
  .topbar,footer,.no-print,.install-guide,.email-capture{display:none!important}
  .section{padding:8px 0}
  .card,.progress-summary,.update-entry,.unlock-card{background:#fff;border-color:#bbb;color:#111}
  .card p,.muted,.form-note,.progress-cat-head,.update-sources{color:#333}
  h1,h2,h3,.progress-ring-num strong{color:#111}
  a{color:#111;text-decoration:none}
}

/* Suggest form (Nov 11, 2026): three fields only, same honest
   placeholder discipline as the footer email form. Controls reuse the
   field styling of the unlock picker and download calculator. */
.suggest-form{margin-top:12px;display:flex;flex-direction:column;gap:16px;max-width:640px}
.suggest-form fieldset{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0}
.suggest-form legend{font-weight:700;color:var(--ink);padding:0 6px}
.suggest-types{display:flex;flex-wrap:wrap;gap:8px 18px}
.suggest-types label{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink);min-height:40px;cursor:pointer}
.suggest-types input{width:18px;height:18px;accent-color:var(--pink);flex:none}
.suggest-form label.field{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--ink)}
.suggest-form textarea,.suggest-form input[type="email"]{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:11px 13px;font-size:1rem;font-family:inherit;width:100%}
.suggest-form textarea:focus,.suggest-form input[type="email"]:focus{outline:2px solid var(--teal);outline-offset:1px}
.suggest-form .hint{font-weight:400;color:var(--ink-soft);font-size:.88rem}
.suggest-form .btn{align-self:flex-start;min-height:44px}