/* CareerHiKe — legal portal.
   One stylesheet. No framework, no build step, no web fonts.
   A page about privacy should not call a third party in order to render, and a
   legal document should not depend on a script to be readable.

   ── On the JavaScript that now exists ──────────────────────────────────────
   `enhance.js` adds navigation conveniences — a reading-progress bar, a
   back-to-top control, table-of-contents highlighting, section filtering and
   heading anchors. Every one of them is an ENHANCEMENT. Nothing it does is
   required to read, search, print or link to any part of a document: with
   scripting disabled the pages below render exactly as they always have, just
   without the conveniences. No sentence of legal text is produced by script.

   ── Layout ────────────────────────────────────────────────────────────────
   Documents are a single measured column. From 1100px the table of contents
   moves into a sticky rail beside the text — placed with CSS grid rather than
   by moving it in the markup, so the source order (and therefore the reading
   order, and the printed order) is untouched. */

:root {
  /* Neutrals carry a slight cool bias toward the accent, so greys read as
     chosen rather than as the browser default. */
  --ink:        #14161a;   /* body text */
  --ink-soft:   #4d5460;
  --ink-mute:   #6b7280;
  --line:       #e4e7ec;
  --line-soft:  #eef0f4;
  --bg:         #ffffff;
  --bg-tint:    #f8f9fb;
  --bg-sink:    #f2f4f8;
  --accent:     #2f3ee0;   /* used sparingly: links, focus, active state */
  --accent-ink: #1e2ac4;
  --accent-wash:#eef0fe;

  --radius:     10px;
  --radius-lg:  14px;
  --measure:    72ch;      /* comfortable line length for long prose */
  --table-measure: 940px;  /* tables: wider than prose, still bounded */
  --rail:       264px;     /* sticky contents column */
  --masthead:   65px;      /* keep in step with .bar padding */

  --shadow-sm: 0 1px 2px rgba(16, 18, 27, .04);
  --shadow-md: 0 4px 16px rgba(16, 18, 27, .07), 0 1px 2px rgba(16, 18, 27, .04);

  /* ── Chrome ───────────────────────────────────────────────────────────────
     The header and footer are a BRAND surface, not a theme surface. They were
     the same white as the page, so the frame dissolved into the document and
     nothing read as "this is the top of a site".

     Deliberately dark blue-gray in BOTH themes rather than following the
     palette: a chrome that inverts with the theme is just the same page colour
     again, one mode later. Slate rather than navy, and desaturated, so it
     reads as considered infrastructure instead of decoration. */
  --chrome:        #1b2432;   /* header — near-neutral slate */
  /* The footer carries the BRAND hue rather than the header's neutral: same
     family, deeper and bluer, so the page closes on something that belongs to
     CareerHiKe instead of on more grey. Darker than the header in luminance as
     well as bluer, so it still reads as the base of the page. */
  --chrome-deep:   #16204a;   /* footer — deep brand indigo */
  --chrome-line:   #2b3547;   /* dividers on the header */
  --chrome-deep-line: #2a3663; /* dividers on the footer, tinted to match it */
  --chrome-ink:    #ffffff;
  --chrome-mute:   #a8b3c4;
  --chrome-soft:   #93a0b3;
  --chrome-accent: #9aa5ff;   /* the brand indigo, lifted to carry on a dark ground */
  --chrome-wash:   #2b3555;   /* active nav pill */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:      #e8eaee;
    --ink-soft: #b7bdc8;
    --ink-mute: #8f96a3;
    --line:     #262a31;
    --line-soft:#1c1f26;
    --bg:       #0d0f13;
    --bg-tint:  #12151a;
    --bg-sink:  #171b21;
    --accent:   #8f9bff;
    --accent-ink:#aab3ff;
    --accent-wash:#1a1f38;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);

    /* Against a #0d0f13 page the light-mode chrome would sit at 1.23:1 — it
       would blend exactly the way the white chrome blended on white. So the
       chrome LIFTS here instead of deepening: a raised surface, still slate,
       still clearly the frame rather than the document. */
    --chrome:        #26334a;
    --chrome-deep:   #1c2650;
    --chrome-line:   #364561;
    --chrome-deep-line: #33417a;
    --chrome-mute:   #aab6c8;
    --chrome-soft:   #94a2b6;
    --chrome-accent: #a3adff;
    --chrome-wash:   #37436b;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Email addresses and URLs are single unbreakable tokens. On a narrow phone
     they are the one thing that can push a page wider than the screen, so they
     are allowed to break rather than overflow. */
  overflow-wrap: break-word;
}

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ── Focus: visible, consistent, never removed ───────────────────────────── */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 5px;
}

/* ── Masthead ────────────────────────────────────────────────────────────── */
/* A dark slate band, so the top of the site is unmistakably the top of the
   site. Nothing structural changed here — same brand, same seven links, same
   order. Only the surface it sits on. */
.masthead {
  position: sticky; top: 0; z-index: 20;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
  /* Carries the band a few pixels over the content so the edge reads as a
     boundary rather than a drawn line. Kept very low: a legal portal should
     look composed, not lifted off the screen. */
  box-shadow: 0 1px 3px rgba(9, 13, 22, .16), 0 6px 20px -12px rgba(9, 13, 22, .28);
}
.bar {
  max-width: 1080px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--chrome-ink);
  font-weight: 660; font-size: 1.02rem; letter-spacing: -.01em;
}
/* The app's own mark. Sized in CSS as well as in the width/height attributes so
   the box is reserved before the image decodes — an icon that pops in and
   shifts the masthead is the cheapest possible layout shift to avoid. */
.mark {
  width: 24px; height: 24px; flex: none;
  border-radius: 6px;   /* mirrors the rounded tile the app renders it in */
  display: block;
}
.primary { display: flex; gap: 4px; flex-wrap: wrap; }
.primary a {
  color: var(--chrome-mute); text-decoration: none;
  font-size: .93rem; font-weight: 500;
  padding: 6px 11px; border-radius: 7px;
  transition: color .15s ease, background-color .15s ease;
}
.primary a:hover {
  color: var(--chrome-ink);
  background: rgba(255, 255, 255, .07);
}
/* The current page reads as a held state, not a hover that stuck: brand accent
   on a tinted pill, one weight heavier. */
.primary a[aria-current="page"] {
  color: var(--chrome-ink);
  background: var(--chrome-wash);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
/* Focus has to be visible on the dark band too — the global accent outline is
   tuned for a white page and dims against slate. */
.masthead a:focus-visible {
  outline: 3px solid var(--chrome-accent);
  outline-offset: 2px;
}

/* Reading progress — injected by enhance.js, sits on the masthead's edge.
   Purely indicative: it reports position, it does not control anything. */
.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 0; background: var(--chrome-accent);
  transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce) { .progress { transition: none; } }

/* ── Page shell ──────────────────────────────────────────────────────────── */
.page {
  max-width: 1240px; margin: 0 auto;
  padding: 60px 28px 96px;
}
.page > *:not(.grid):not(.hero):not(.note):not(.spec):not(.cmp) { max-width: var(--measure); }
/* Tables read better wider than prose: 72ch is a comfortable line of text
   and a cramped five-column comparison. They take the full measured column
   and are allowed to run past it, up to the page width. */
.page > .spec, .page > .cmp { max-width: var(--table-measure); }

/* From 1100px the contents rail sits beside the prose. `:has()` keeps this to
   pages that actually have a table of contents; anywhere else — and in any
   browser without support — the single-column layout above is what renders. */
@media (min-width: 1100px) {
  .page:has(.toc) {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) var(--rail);
    column-gap: 72px;
    align-items: start;
    max-width: 1240px;
  }
  .page:has(.toc) > * { grid-column: 1; min-width: 0; }
  .page:has(.toc) > .toc {
    grid-column: 2;
    grid-row: 1 / span 200;   /* tall enough to sticky against the whole page */
    position: sticky;
    top: calc(var(--masthead) + 28px);
    max-height: calc(100vh - var(--masthead) - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
  }
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1 {
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem);
  line-height: 1.1; letter-spacing: -.03em;
  margin: 0 0 16px; font-weight: 700;
  text-wrap: balance;
}
/* Sections are the unit a reader navigates by, so they are given real
   separation: a hairline above, generous space, and a size that is clearly a
   step up from body text rather than bold body text. */
h2 {
  font-size: 1.45rem; line-height: 1.3; letter-spacing: -.02em;
  margin: 64px 0 14px; font-weight: 660;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--masthead) + 24px);
  text-wrap: balance;
  position: relative;
}
/* The first heading after the lede/TOC needs no rule — there is nothing above
   it to separate from. */
.toc + h2, .lede + h2, .meta + h2 { border-top: 0; padding-top: 0; margin-top: 40px; }

h1 + .meta + .lede, h1 + .lede { margin-top: 0; }
p  { margin: 0 0 20px; }
ul, ol { margin: 0 0 22px; padding-left: 26px; }
li { margin: 10px 0; }
li::marker { color: var(--ink-mute); }
strong { font-weight: 640; color: var(--ink); }
em { font-style: italic; }

.lede {
  font-size: 1.16rem; line-height: 1.65;
  color: var(--ink-soft); margin-bottom: 36px;
}
/* The version stamp is the first thing a careful reader checks, so it is given
   the weight of a fact rather than of a footnote. */
.meta {
  color: var(--ink-mute); font-size: .88rem;
  margin: 0 0 34px; padding-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.meta time { color: var(--ink-soft); font-weight: 560; }
.fine { color: var(--ink-mute); font-size: .92rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }

/* Heading anchors — injected, revealed on hover or keyboard focus. Gives every
   section a copyable address without putting a symbol in the heading text. */
.anchor {
  position: absolute; left: -0.85em; top: 30px;
  opacity: 0; text-decoration: none; color: var(--ink-mute);
  font-weight: 400; padding: 0 .18em;
  transition: opacity .12s ease, color .12s ease;
}
h2:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--accent); }
@media (max-width: 1099px) { .anchor { display: none; } }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.crumb ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0; margin: 0 0 20px; font-size: .87rem; color: var(--ink-mute);
}
.crumb li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumb a { color: var(--ink-mute); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

/* ── Home ────────────────────────────────────────────────────────────────── */
.hero { max-width: var(--measure); }
.eyebrow {
  color: var(--ink-mute); font-size: .8rem; font-weight: 640;
  margin: 0 0 14px; text-transform: uppercase; letter-spacing: .1em;
}
.hero-sub { font-size: 1.16rem; color: var(--ink-soft); margin-bottom: 0; }

.grid {
  display: grid; gap: 16px; margin: 52px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.card {
  display: flex; flex-direction: column; padding: 26px 26px 22px;
  background: var(--bg-tint);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .14s ease, box-shadow .14s ease,
              transform .14s ease, background .14s ease;
}
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--bg);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card h2 {
  margin: 0 0 9px; font-size: 1.06rem; font-weight: 650; color: var(--ink);
  border-top: 0; padding-top: 0; letter-spacing: -.012em;
}
.card p { margin: 0 0 16px; font-size: .95rem; color: var(--ink-mute); line-height: 1.62; }
.go { font-size: .88rem; font-weight: 620; color: var(--accent); margin-top: auto; }
.card:hover .go { color: var(--accent-ink); }

.note {
  margin-top: 64px; padding-top: 36px;
  border-top: 1px solid var(--line-soft); max-width: var(--measure);
}
.note h2 { margin-top: 0; border-top: 0; padding-top: 0; }

/* ── Table of contents ───────────────────────────────────────────────────── */
.toc {
  background: var(--bg-tint);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 22px 10px; margin: 0 0 44px;
}
/* This is an <h2> in the markup — it labels the contents landmark — so it has
   to opt out of the section styling that every other h2 gets. */
.toc-title {
  margin: 0 0 12px; font-size: .74rem; font-weight: 660;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-mute);
  border-top: 0; padding-top: 0;
}
.toc ol {
  columns: 2; column-gap: 36px; padding-left: 20px; margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}
.toc li { margin: 5px 0; font-size: .93rem; break-inside: avoid; }
.toc a {
  color: var(--ink-soft); text-decoration: none;
  display: inline-block; padding: 1px 0;
  border-bottom: 1px solid transparent;
}
.toc a:hover { color: var(--accent); border-bottom-color: currentColor; }
/* Scroll-spy state, set by enhance.js. */
.toc a.active { color: var(--accent-ink); font-weight: 600; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* In the sticky rail the list is a single narrow column with a guide rail, and
   the current section is marked against it. */
@media (min-width: 1100px) {
  .toc { background: transparent; border: 0; padding: 0; box-shadow: none; }
  .toc-title { padding-left: 14px; }
  .toc ol {
    columns: 1; padding-left: 0; margin: 0;
    list-style: none; border-left: 2px solid var(--line);
  }
  .toc li { margin: 0; }
  .toc a {
    display: block; padding: 6px 12px; margin-left: -2px;
    border-left: 2px solid transparent; border-bottom: 0;
    line-height: 1.45; font-size: .9rem;
  }
  .toc a:hover { border-bottom: 0; background: var(--bg-tint); color: var(--accent); }
  .toc a.active { border-left-color: var(--accent); background: var(--accent-wash); }
}

/* Contents disclosure — injected, and only offered below 1100px where the
   list would otherwise fill the first screen. Navigation collapses; the
   document never does. */
.toc-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toc-toggle {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 30px; height: 30px; margin: -6px -6px -6px 0; flex: none;
  border-radius: 7px; color: var(--ink-mute);
  display: grid; place-items: center;
}
/* An explicit `display` beats the user agent's `[hidden] { display: none }`,
   so the attribute has to be honoured here or the control stays on screen at
   desktop widths where there is nothing to collapse. */
.toc-toggle[hidden] { display: none; }
.toc-toggle::before {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.toc.is-collapsed .toc-toggle::before {
  transform: rotate(-45deg) translate(-1px, 1px);
}
.toc-toggle:hover { color: var(--ink); background: var(--bg-sink); }
.toc.is-collapsed { padding-bottom: 18px; }

/* Section filter — injected. Narrows the contents list to matching sections;
   it never hides document text, only entries in this navigation list. */
.toc-search {
  width: 100%; margin: 0 0 12px; padding: 8px 12px;
  font: inherit; font-size: .9rem;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
}
.toc-search::placeholder { color: var(--ink-mute); }
.toc-search:focus-visible { border-color: var(--accent); }
.toc-empty {
  margin: 2px 0 12px; font-size: .86rem; color: var(--ink-mute);
}
@media (min-width: 1100px) { .toc-search { margin-left: 0; } }

/* ── Panels & steps ──────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 26px; margin: 0 0 32px;
  box-shadow: var(--shadow-sm);
}
.panel > *:last-child { margin-bottom: 0; }
.panel h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.steps { margin-bottom: 14px; }
.steps li { margin: 11px 0; }
.contact { text-align: left; }
.addr { font-size: 1.24rem; font-weight: 620; margin-bottom: 4px; }

.back { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
.back a { text-decoration: none; font-weight: 560; }
.back a:hover { text-decoration: underline; }

/* Back to top — injected. Appears once the reader is well down the page. */
.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 30;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); color: var(--ink-soft);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  cursor: pointer; font-size: 17px; line-height: 1;
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease,
              color .12s ease, border-color .12s ease;
}
.totop.show { opacity: 1; visibility: visible; }
.totop:hover { color: var(--accent); border-color: var(--accent); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* One step darker than the header, so the page ends on a deliberate anchor
   rather than trailing off into the same white as the text above it. Same
   columns, same links, same wording — only the surface and its typography. */
.siteend {
  border-top: 1px solid var(--chrome-deep-line);
  background: var(--chrome-deep);
  color: var(--chrome-mute);
  padding: 60px 24px 32px;
}
.cols {
  max-width: 1080px; margin: 0 auto;
  display: grid; gap: 34px;
  grid-template-columns: 2fr 1fr 1fr;
}
.col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.col a {
  color: var(--chrome-mute); text-decoration: none; font-size: .93rem;
  transition: color .15s ease;
}
.col a:hover { color: var(--chrome-accent); text-decoration: underline; }
.col a:focus-visible { outline: 3px solid var(--chrome-accent); outline-offset: 2px; }

/* Brand lock-up. The logo is the one thing added here; it sits with the
   wordmark it already had, so the footer opens with the mark the header opens
   with and the page is bracketed by the same identity. */
.fbrand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--chrome-ink); margin-bottom: 2px;
}
.fmark { width: 26px; height: 26px; border-radius: 7px; display: block; flex: none; }
.fname {
  font-weight: 660; margin: 0; color: var(--chrome-ink);
  letter-spacing: -.01em; font-size: 1rem;
}
.ftitle {
  font-size: .76rem; font-weight: 660; text-transform: uppercase;
  letter-spacing: .08em; color: var(--chrome-ink); margin: 0 0 3px;
}
.fmuted { color: var(--chrome-soft); font-size: .93rem; margin: 0; line-height: 1.6; }

.legalline {
  max-width: 1080px; margin: 44px auto 0;
  padding-top: 22px; border-top: 1px solid var(--chrome-deep-line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.legalline p { margin: 0; font-size: .88rem; color: var(--chrome-soft); }
.legalline a { color: var(--chrome-soft); text-decoration: none; }
.legalline a:hover { color: var(--chrome-accent); text-decoration: underline; }

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .bar { padding: 11px 16px; gap: 10px; }
  .brand { margin-right: 0; }
  .primary { gap: 2px; margin: 0 -6px; }
  .primary a { font-size: .87rem; padding: 7px 8px; }
  .page { padding: 34px 18px 72px; }
  h2 { margin-top: 48px; padding-top: 26px; }
  .panel, .toc { padding-left: 18px; padding-right: 18px; }
  .siteend { padding-left: 18px; padding-right: 18px; }
  .totop { right: 14px; bottom: 14px; }
  /* Touch targets: comfortable rather than dense. */
  .col a, .toc a { padding: 7px 0; display: inline-block; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
/* Everything injected is navigation, and navigation does not belong on paper —
   but every word of the document does, which is why nothing here is ever
   collapsed or hidden by default on screen either. */
/* ── Tables ───────────────────────────────────────────────────────────────
   Used by the Premium explanation on About. Two shapes:

     .spec  label / value pairs
     .cmp   a side-by-side comparison of the two credit balances

   Both are real tables with real header cells, so a screen reader announces
   "AI Credits, Included, Resume analysis" rather than reading a grid of loose
   text. On a phone they STACK rather than scroll sideways: a three-column
   comparison whose cells hold seven-item lists cannot be made narrow enough to
   read at 360px, and a table you have to drag horizontally is a table most
   people give up on. The stacked form repeats each column's name above its
   value, which is why every comparison cell carries `data-col`.

   `role` attributes are NOT needed here: the stacking rules below change the
   display of the ROWS and CELLS only in the narrow breakpoint, where each row
   is re-announced through its own visible heading and the data-col labels. */
.spec, .cmp {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  /* Fixed layout so a long cell cannot widen the table past its column — an
     auto-layout table sizes to its widest unbreakable content, which pushed the
     whole page (and therefore every paragraph on it) wider than a phone. */
  table-layout: fixed;
  margin: 1.1rem 0 1.4rem;
  font-size: .97rem;
}
.spec caption, .cmp caption { text-align: left; }
/* Cells are CENTRED, and only these two pages use these classes — About's
   "Why go Premium" tables and the Gameplay stage table.

   `vertical-align: middle` matters as much as the horizontal centring here: with
   `top`, a one-word value sat at the ceiling of a row whose neighbour wrapped to
   three lines, which is what made the columns look unaligned in the first place.

   List cells are handled below: the block is centred, its items are not. */
.spec th, .spec td, .cmp th, .cmp td {
  border: 1px solid var(--line);
  overflow-wrap: anywhere;
  padding: .6rem .7rem;
  text-align: center;
  vertical-align: middle;
}
.spec thead th, .cmp thead th {
  background: var(--bg-tint);
  font-weight: 650;
}
.spec tbody th[scope="row"], .cmp tbody th[scope="row"] {
  background: var(--bg-tint);
  font-weight: 600;
  width: 42%;
}
.cmp tbody th[scope="row"] { width: 26%; }
.cmp thead td { border: 0; background: transparent; }
/* Lists inside a cell carry the seven feature names without bullets crowding
   the column.

   `inline-block` + `text-align: left` centres the LIST inside the centred cell
   while keeping its seven items aligned with each other. Centring the items
   themselves would give every feature name a different left edge and make the
   column unreadable — a ragged left is far worse than a ragged right, because
   the eye loses where each line begins. */
ul.cell {
  display: inline-block;
  text-align: left;
  margin: 0; padding: 0; list-style: none;
}
ul.cell li { margin: 0 0 .2rem; }
ul.cell li:last-child { margin-bottom: 0; }

/* Visually hidden, still announced — used for table captions. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  /* A two-column label/value table still reads as a table at 390px, so `.spec`
     stays tabular — stacking it would turn structured information back into the
     loose text blocks this layout replaced. Only the three-column comparison
     stacks, because its cells hold seven-item lists and no phone is wide enough
     for that. */
  .spec { font-size: .93rem; }
  .spec tbody th[scope="row"] { width: 45%; }
  .spec th, .spec td { padding: .5rem .55rem; }

  /* The comparison becomes one card per row: the row name as its heading, then
     each column's value beneath its own name. Still tabular information —
     labelled rows and labelled columns — rather than prose. */
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
  }
  .cmp tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0 0 .7rem;
    overflow: hidden;
  }
  .cmp th, .cmp td { border: 0; }
  .cmp tbody th[scope="row"] {
    width: auto;
    background: var(--bg-tint);
    border-bottom: 1px solid var(--line);
  }
  .cmp td[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-mute);
    margin-bottom: .15rem;
  }
  .cmp td + td { border-top: 1px solid var(--line-soft); }
}

/* ── Gameplay: video and its pre-publication placeholder ──────────────────
   The video is `media-src 'self'` in /_headers — without that directive the
   site's `default-src 'none'` blocks playback outright, which is silent and
   looks like a broken file rather than a policy. */
.videowrap { margin: 1.4rem 0 1.6rem; }
.videowrap video {
  display: block;
  width: 100%;
  height: auto;
  /* Reserve the space before metadata loads, so the page does not jump when
     the poster arrives. */
  aspect-ratio: 16 / 9;
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.videowrap figcaption {
  margin-top: .5rem;
  color: var(--ink-mute);
  font-size: .92rem;
}

/* Shown until the film exists. Deliberately not a fake player: an empty video
   frame reads as something broken, and this page is indexed. */
.placeholder {
  margin: 1.4rem 0 1.6rem;
  padding: 1.5rem 1.4rem;
  background: var(--bg-tint);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}
.placeholder .ph-title {
  margin: 0 0 .35rem;
  font-weight: 650;
  color: var(--ink);
}
.placeholder p:last-child { margin-bottom: 0; color: var(--ink-soft); }

/* ── Gameplay walkthrough animation ───────────────────────────────────────
   Six stages lighting in sequence over a 12s loop.

   Every timing value lives HERE rather than on the elements because the site's
   CSP is `style-src 'self'`: an inline `style="--i:3"` would be blocked, so the
   stagger is expressed as six nth-child delays instead of a custom property.

   It is a real ordered list with real text, so it is readable and indexable
   whether or not the animation runs — which matters because this is what the
   page shows until the film exists, and what it falls back to afterwards. */
.wt { margin: 1.4rem 0 1.6rem; }
.wt-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
  margin: 0;
  padding: 1.25rem 1rem;
  list-style: none;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  counter-reset: wt;
}
.wt-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  /* The resting state. The animation only ever brightens from here, so a
     browser that runs no animation still shows a complete, legible diagram. */
  opacity: .55;
  animation: wt-on 12s linear infinite;
}
.wt-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ink-mute);
  box-shadow: 0 0 0 0 var(--accent-wash);
  animation: wt-dot 12s linear infinite;
}
.wt-name { font-size: .9rem; font-weight: 600; color: var(--ink); }
.wt-step:nth-child(1), .wt-step:nth-child(1) .wt-dot { animation-delay: 0s; }
.wt-step:nth-child(2), .wt-step:nth-child(2) .wt-dot { animation-delay: 2s; }
.wt-step:nth-child(3), .wt-step:nth-child(3) .wt-dot { animation-delay: 4s; }
.wt-step:nth-child(4), .wt-step:nth-child(4) .wt-dot { animation-delay: 6s; }
.wt-step:nth-child(5), .wt-step:nth-child(5) .wt-dot { animation-delay: 8s; }
.wt-step:nth-child(6), .wt-step:nth-child(6) .wt-dot { animation-delay: 10s; }

@keyframes wt-on {
  0%, 2%    { opacity: .55; }
  5%, 15%   { opacity: 1; }
  19%, 100% { opacity: .55; }
}
@keyframes wt-dot {
  0%, 2%  { background: var(--ink-mute); box-shadow: 0 0 0 0 var(--accent-wash); transform: scale(1); }
  5%, 15% { background: var(--accent); box-shadow: 0 0 0 6px var(--accent-wash); transform: scale(1.15); }
  19%, 100% { background: var(--ink-mute); box-shadow: 0 0 0 0 var(--accent-wash); transform: scale(1); }
}

.wt figcaption {
  margin-top: .6rem;
  color: var(--ink-mute);
  font-size: .92rem;
}

@media (max-width: 640px) {
  /* Two rows of three rather than six cramped columns. */
  .wt-steps { grid-template-columns: repeat(3, 1fr); gap: .9rem .5rem; }
}

/* Motion is decoration here: the sequence is already stated by the order of the
   list and by the table below it. Anyone who has asked for less motion gets the
   finished diagram, fully lit, with nothing moving. */
@media (prefers-reduced-motion: reduce) {
  .wt-step, .wt-dot { animation: none; }
  .wt-step { opacity: 1; }
  .wt-dot { background: var(--accent); }
}

@media print {
  .masthead, .siteend, .skip, .back, .toc, .totop, .progress, .anchor,
  .toc-search, .toc-empty { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .page { padding: 0; max-width: none; display: block; }
  .page > * { max-width: none; }
  h2 { border-top: 1px solid #ccc; break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}