/* ── Self-hosted fonts (previously Google Fonts) ────────────────────────── */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bungee-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400-italic.woff2') format('woff2');
}

/* ── Design tokens (mirrored from index.css) ─────────────────────────────── */
:root {
  --font-display: 'Bungee', cursive;
  --font-ui:      'Space Grotesk', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --bg-1: #2a1f86;
  --bg-2: #170c4e;
  --bg-3: #0e0730;

  --cyan:   #19e3ff;
  --pink:   #ff3da6;
  --violet: #9b5cff;
  --teal:   #16d6a8;
  --blue:   #2f6bff;
  --peri:   #6d7bff;
  --amber:  #ffb43a;
  --error:  #ff5a5a;

  --text:     #eafaff;
  --body:     #cfc9ff;
  --muted:    #b7b2e8;
  --label:    #9a93c8;
  --disabled: #5b5390;

  --radius-card: 18px;
  --radius-chip: 11px;
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.6;
  color: var(--body);
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--text); }
p { margin: 0; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { opacity: 0.8; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.guide-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.75rem;
  min-height: 62px;
  background: rgba(14, 7, 48, 0.96);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}

.guide-nav-logo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  /* start, not the grid default (stretch): the logo sits in a 1fr column,
     and a stretched link was clickable across all of that column's empty
     space -- 517px wide at 1440px. */
  justify-self: start;
}
.guide-nav-logo:hover { opacity: 1; color: var(--text); }
.guide-nav-ppt { color: var(--cyan); }
/* 72px WebP shown at 24px (22px on phones), same as the app nav. The
   <img>'s width/height attributes reserve the box before it loads. */
.guide-nav-logo-icon { width: 24px; height: 24px; border-radius: 5px; flex-shrink: 0; }

.guide-nav-tabs {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}

.guide-nav-tab {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.guide-nav-tab:hover { color: var(--text); background: rgba(255,255,255,0.06); opacity: 1; }
.guide-nav-tab--active {
  color: var(--cyan);
  background: rgba(25,227,255,0.1);
  text-shadow: 0 0 12px rgba(25,227,255,0.4);
}
.guide-nav-tab--active:hover { opacity: 1; }

.guide-nav-right {
  display: flex;
  justify-content: flex-end;
}

.guide-nav-cta {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  background: var(--pink);
  color: #fff;
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-chip);
  transition: opacity 0.15s;
  /* One line, always. When the nav ran out of room this was the only item
     that could give, so it wrapped into a 3-4 line tower and still pushed
     the nav off-screen. Room is now made by the two-row layout below
     740px instead. */
  white-space: nowrap;
}
.guide-nav-cta:hover { opacity: 0.88; color: #fff; }

/* ── Page shell ──────────────────────────────────────────────────────────── */

.guide-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.guide-main {
  flex: 1;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

/* ── Guide index ─────────────────────────────────────────────────────────── */

.guide-hero {
  text-align: center;
  padding: 1rem 0 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 3rem;
}

.guide-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}

.guide-hero-title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.guide-hero-sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Same typography as .guide-hero-sub, but left-aligned (no margin: 0 auto)
   for the category pages' intro paragraph -- those pages aren't wrapped in
   .guide-hero's centered context, so reusing .guide-hero-sub directly would
   center a 520px block under a left-aligned breadcrumb and title. */
.guide-category-intro {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.guide-section-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 1.25rem;
}

/* Same grid and card treatment as .guide-card-grid/.guide-card below, so
   the two sections read as one system: photo on top, full title, full
   description, no truncation. This is taller than the previous compact
   version -- see the horizontal-scroll override in the mobile media query,
   which is what keeps that height from pushing articles several screens
   down on a phone. */
.guide-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.guide-category-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(20, 12, 60, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 0.15s, background 0.15s;
}
.guide-category-card:hover {
  color: inherit;
  background: rgba(25,227,255,0.04);
  border-color: rgba(25,227,255,0.3);
}

.guide-category-thumb {
  width: 100%;
  /* LOAD-BEARING: do not remove height: auto. It looks redundant next to
     aspect-ratio; it isn't, and dropping it has broken these photos three
     times. The <img> tags carry width/height attributes on purpose (they
     reserve the box before the image loads, so the page doesn't shift),
     and the browser turns height="533" into its own height: 533px style.
     aspect-ratio only sizes a dimension that is auto, so without this line
     the ratio below is silently ignored and every photo renders 533px tall
     in a ~306px column: portrait, one card per screen. Same trap, same
     line, on .article-photo below. */
  height: auto;
  /* 180px height cap, written as a width cap (180 x 16/9 = 320). A
     max-height would clamp the height while width: 100% stays fixed,
     stretching the crop wider than 16:9 in the one-column range
     (641 to ~830px). The card's flex stretch respects max-width, so this
     caps the height and keeps the ratio exact. */
  max-width: 320px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius-card) - 6px);
}

.guide-category-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.25;
}

.guide-category-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
}

.guide-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.guide-card {
  background: rgba(20, 12, 60, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.15s, background 0.15s;
}
.guide-card:hover {
  border-color: rgba(25,227,255,0.3);
  background: rgba(25,227,255,0.04);
  opacity: 1;
}

.guide-card-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}

.guide-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.25;
}

.guide-card-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}

.guide-card-arrow {
  font-size: 0.8rem;
  color: var(--label);
  margin-top: 0.25rem;
}

/* ── Article layout ──────────────────────────────────────────────────────── */

.article-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}

.article-eyebrow a {
  color: var(--cyan);
}

.article-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.article-meta {
  font-size: 0.8rem;
  color: var(--label);
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text);
  margin-top: 1rem;
}

.article-body h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.03em;
}

.article-body p {
  font-size: 1rem;
  color: var(--body);
  line-height: 1.75;
}

.article-body ul, .article-body ol {
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.article-body li {
  font-size: 1rem;
  color: var(--body);
  line-height: 1.65;
}

.article-body strong { color: var(--text); }

.article-body a { color: var(--cyan); }

/* aspect-ratio, not a fixed max-height -- these three photos range from
   landscape (1200x800) to portrait (1200x1600), and a fixed px height
   clamps the intrinsic ratio only once the box gets tall enough to hit it,
   which happens at a different width for every source ratio. On a narrow
   phone the portrait source's intrinsic height at ~340px width (453px)
   exceeded the old 420px cap, producing a 340x420 *portrait* box -- taller
   than wide -- while the landscape sources stayed under the cap and never
   triggered it. aspect-ratio crops every source to the same landscape
   frame at any viewport width, matching .guide-category-thumb's approach.
   That only works together with height: auto, below. */
.article-photo {
  width: 100%;
  /* LOAD-BEARING: do not remove height: auto. The <img> tags keep their
     width/height attributes to reserve space before load, and the browser
     turns height="1600" into its own height: 1600px style. aspect-ratio
     only sizes a dimension that is auto, so without this line it is
     silently ignored: the portrait photo rendered 358x1600 on a phone,
     over four screens tall. See .guide-category-thumb for the same trap. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}

.article-cta-box {
  margin-top: 1rem;
  background: rgba(25,227,255,0.06);
  border: 1px solid rgba(25,227,255,0.2);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.article-cta-box p {
  color: var(--muted);
  font-size: 0.95rem;
}

.article-cta-btn {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.75rem;
  border-radius: var(--radius-chip);
  text-decoration: none;
  transition: opacity 0.15s;
}
.article-cta-btn:hover { opacity: 0.88; color: #fff; }

.article-nav-links {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.article-nav-links a {
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
}
.article-nav-links a:hover { color: var(--cyan); opacity: 1; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.guide-footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--label);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.guide-footer a { color: var(--label); }
.guide-footer a:hover { color: var(--cyan); opacity: 1; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .guide-nav {
    padding: 0 1rem;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
  }
  .guide-nav-logo { font-size: 0.85rem; gap: 0.3rem; }
  .guide-nav-logo-icon { width: 22px; height: 22px; }
  .guide-nav-tab { font-size: 0.68rem; padding: 0.3rem 0.55rem; }
  .guide-nav-cta { font-size: 0.72rem; padding: 0.35rem 0.7rem; }

  .guide-main { padding: 2rem 1rem 4rem; }
  .guide-hero-title { font-size: 1.9rem; }

  /* Horizontal scroll instead of a stacked column -- five full-size cards
     stacked vertically run to ~1550px before the article list even starts.
     Same card, same content, just laid out sideways so the section's
     height is capped at one card's height regardless of how many
     categories there are. 78vw + this row's 0.75rem gap leaves a ~38px
     peek of the next card at 375px (~26px even at 320px, the narrowest
     common phone width) -- enough to read as "there's more this way"
     without shrinking the card itself. The base grid's 1.25rem gap would
     have only left ~18px at 320px, just under the 20px floor, hence the
     tighter gap here specifically. scroll-snap-type: proximity (not mandatory) plus
     touch-action: pan-x specifically so a mostly-vertical swipe over a
     card still scrolls the page instead of getting captured by the
     horizontal snap -- mandatory snap is more prone to that on iOS. */
  .guide-category-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 2rem;
  }
  .guide-category-grid::-webkit-scrollbar {
    display: none;
  }
  .guide-category-card {
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }
  .guide-card-grid { grid-template-columns: 1fr; }
  .article-title { font-size: 1.75rem; }
}

/* Two-row nav: logo + Play Now on top, tabs centred underneath. As one row
   the nav can't fit a phone: logo (131px, nowrap) + four tabs (235px) +
   gaps and padding already exceed a 390px screen before Play Now gets any
   room, so the nav ran to 455px wide at every phone width and mobile
   browsers zoomed the whole page out to ~86% to fit it. 641-700px failed
   too (desktop-size tabs squeezed Play Now into a 70px column), hence
   740px, not 640px, with ~40px headroom over the measured 700px edge.

   Must stay AFTER the 640px block above: that block's grid-template-columns
   and padding: 0 1rem shorthand would otherwise override this layout (and
   zero the vertical padding) on phones. */
@media (max-width: 740px) {
  .guide-nav {
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo cta" "tabs tabs";
    gap: 0.4rem 0.5rem;
    padding-block: 0.55rem;
  }
  .guide-nav-logo { grid-area: logo; }
  .guide-nav-right { grid-area: cta; }
  .guide-nav-tabs { grid-area: tabs; }
}