/* WOLF ASCENT — site styles, following the game's neon menus (candidate 202, 27 Sep 2026): night surfaces, thin
   violet borders, hot pink for primary actions and selection, light violet for labels and outlines, a restrained
   pink-to-purple gradient for rules. Rajdhani for display, IBM Plex Mono for small technical labels. Red survives
   only as the explicit error colour. */

@font-face { font-family: "Rajdhani"; src: url("/fonts/Rajdhani-Medium.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --night: #06070b;            /* page background, text on pink buttons */
  --ink: #0b0a12;              /* inputs, code, footer: a step above night */
  --panel: #130f1d;            /* cards, menus, secondary buttons */
  --track: #261f36;            /* recessed controls, keycaps, progress tracks */
  --hair: rgba(201, 143, 255, .22);
  --hair-strong: rgba(201, 143, 255, .45);
  --steel: #a8a1bd;            /* muted lavender: supporting copy, metadata */
  --soft: #d9d3e8;             /* long body copy */
  --bone: #f0ebfa;             /* cool white: headings, body */
  --pink: #ff2691;             /* primary actions, selection, progress */
  --pink-hover: #ff4da5;
  --purple: #914dff;           /* edge light, gradient end */
  --violet: #c98fff;           /* secondary actions, small labels, outlines */
  --error: #ff6b6b;            /* explicit errors only */
  --focus: #c98fff;
  --brand-gradient: linear-gradient(90deg, var(--pink), var(--purple));
  --glow: 0 0 18px rgba(255, 38, 145, .16);
  --glow-strong: 0 0 22px rgba(255, 38, 145, .28);
  --display: "Rajdhani", "Arial Narrow", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--bone); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font: 17px/1.6 var(--body); background: var(--night); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bone); text-decoration-color: rgba(201, 143, 255, .7); text-underline-offset: 3px; }
a:hover { color: var(--pink); text-decoration-color: var(--pink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { background: rgba(255, 38, 145, .35); color: var(--bone); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .02em; line-height: 1.05; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(44px, 8vw, 96px); text-transform: uppercase; }
h2 { font-size: clamp(32px, 4.6vw, 52px); text-transform: uppercase; }
h3 { font-size: 26px; }
p { margin: 0 0 1em; max-width: 68ch; }
.mono, .kicker, .label { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.kicker { color: var(--violet); font-size: 13px; margin: 0 0 12px; display: block; }
.muted { color: var(--steel); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--pink); color: var(--night); padding: 10px 16px; z-index: 100; font-weight: 600; }
.skip:focus { left: 16px; top: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(6, 7, 11, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.site-header::before { content: ""; display: block; height: 3px; background: var(--brand-gradient); }
.nav { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: .06em; color: var(--bone); text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.brand:hover { color: var(--bone); }
.brand-mark { width: 38px; height: 38px; object-fit: contain; flex: none; }
.brand:hover .brand-mark { filter: drop-shadow(0 0 8px rgba(255, 38, 145, .35)); }
.nav-links { display: flex; gap: 22px; margin: 0 0 0 auto; padding: 0; list-style: none; align-items: center; }
.nav-links a { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--steel); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--pink); }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; margin-left: auto; background: var(--panel); border: 1px solid var(--violet); color: var(--bone); font: 13px var(--mono); letter-spacing: .1em; padding: 8px 12px; cursor: pointer; }
  .nav-links { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 0 16px; }
  .nav-open .nav-links { display: flex; }
  .nav-links .btn { margin-top: 8px; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; font: 600 16px var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--violet); color: var(--bone); background: rgba(19, 15, 29, .82); cursor: pointer;
  transition: box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease; }
.btn:hover { border-color: var(--pink); color: var(--bone); box-shadow: var(--glow-strong); }
.btn-primary { background: var(--pink); color: var(--night); border-color: var(--pink); box-shadow: var(--glow); }
.btn-primary:hover { background: var(--pink-hover); border-color: var(--pink-hover); color: var(--night); box-shadow: var(--glow-strong); }
.btn-small { min-height: 38px; padding: 0 14px; font-size: 14px; }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: var(--night); border-bottom: 0; padding: 0 14px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Frame idiom from the game: hairline box with accent ticks at the top-left corner. */
.frame { position: relative; border: 1px solid var(--hair); background: rgba(19, 15, 29, .72); padding: 24px; }
.frame::before, .frame::after { content: ""; position: absolute; left: -1px; top: -1px; background: var(--accent, var(--pink)); }
.frame::before { width: 28px; height: 2px; }
.frame::after { width: 2px; height: 14px; }
.frame.y { --accent: var(--violet); }

/* Hero: layered scene. The valley is split into a far and a near layer, the aircraft floats in front,
   and site.js drifts each layer at its own rate on scroll and toward a fine pointer (none under reduced motion). */
.hero { position: relative; min-height: min(88vh, 820px); display: grid; align-items: center; isolation: isolate; border-bottom: 1px solid var(--hair); overflow: hidden; }
.hero-scene { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-scene .layer { position: absolute; inset: -8% -5%; }
.hero-scene .layer img { width: 100%; height: 100%; object-fit: cover; }
[data-parallax] .layer-far, [data-parallax] .layer-near, [data-parallax] .layer-craft, [data-parallax] .layer-cast {
  transform: translate3d(calc(var(--mx, 0) * var(--dx) * 1px), calc(var(--sy, 0) * var(--k) * 1px + var(--my, 0) * var(--dy) * 1px), 0);
}
.layer-far { --k: .5; --dx: -8; --dy: -5; }
.layer-near { --k: .32; --dx: -18; --dy: -9; }
.layer-craft { --k: .16; --dx: -34; --dy: -16; }
.layer-cast { --k: .05; --dx: -50; --dy: -18; }
.hero.is-moving .layer-far, .hero.is-moving .layer-near, .hero.is-moving .layer-craft, .hero.is-moving .layer-cast { will-change: transform; }
@media (prefers-reduced-motion: reduce) { [data-parallax] .layer-far, [data-parallax] .layer-near, [data-parallax] .layer-craft, [data-parallax] .layer-cast { transform: none; } }
/* Four of the passengers, waist up, rising out of the bottom edge below the aircraft. The fade is baked into the
   image's transparency; a light tone-down keeps them from out-shining HELIWOLF. */
.hero-cast { position: absolute; z-index: 1; bottom: 0; right: max(var(--gutter), calc((100vw - var(--max)) / 2));
  width: clamp(360px, 40vw, 600px); height: auto; pointer-events: none; filter: brightness(.94) saturate(.92); }
.advisory.quip { font-style: italic; color: var(--soft); }
.eula-check { padding: 12px 14px; border: 1px solid var(--hair-strong); background: rgba(201, 143, 255, .06); }
.eula-check a { color: var(--violet); }
.prose.eula h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 1.6em; }
.motion-toggle { margin-top: 14px; font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel); background: rgba(6,7,11,.55); border: 1px solid var(--hair-strong); padding: 6px 10px; cursor: pointer; }
.nowrap { white-space: nowrap; }
.motion-toggle:hover, .motion-toggle:focus-visible { color: var(--bone); border-color: var(--pink); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,7,11,.2) 0%, rgba(6,7,11,.1) 45%, rgba(6,7,11,.85) 88%, var(--night) 100%), radial-gradient(ellipse at 74% 50%, rgba(145,77,255,.20), transparent 55%), radial-gradient(ellipse at 8% 100%, rgba(255,38,145,.10), transparent 45%); }
.hero-mark { display: block; width: 84px; height: 84px; object-fit: contain; margin: 0 0 22px -4px; }
.hero-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: center; padding-top: 72px; padding-bottom: 64px; }
.hero-copy { position: relative; z-index: 1; }
.hero-craft { width: 150%; max-width: none; height: auto; margin-left: -30%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
/* A playing video would re-run the CSS filter every frame, so the clip goes without the drop shadow. The clip's frame
   leaves room for the whole rotor sweep, so it is drawn larger than the still, with the spare space trimmed back. */
.hero-craft.is-clip { filter: none; aspect-ratio: 2 / 1; width: 290%; margin: -26% 0 -20% -92%; }
/* Beside the copy, the rotor tips would sweep behind the headline. They fade out before the text column; the
   fuselage starts at 34.4% of the frame and stays whole. Phones stack the aircraft above the copy instead. */
@media (min-width: 901px) {
  .hero-craft.is-clip { -webkit-mask-image: linear-gradient(90deg, transparent 29.5%, #000 33.8%); mask-image: linear-gradient(90deg, transparent 29.5%, #000 33.8%); }
}
.hero h1 { color: var(--bone); margin-bottom: 8px; font-size: clamp(44px, 6.2vw, 92px); white-space: nowrap; }
.hero h1 .accent { color: var(--pink); }
.hero .tagline { font: 500 clamp(16px, 2vw, 22px) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); margin-bottom: 24px; }
.hero .sub { font-size: 19px; max-width: 52ch; color: var(--soft); }
.rating-line { margin-top: 18px; font: 13px var(--mono); letter-spacing: .08em; color: var(--steel); text-transform: uppercase; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 24px; gap: 0; }
  .hero-craft { order: -1; width: 100%; margin: 0; }
  .hero-craft.is-clip { width: 190%; margin: -16% 0 -22% -45%; }
  /* Phones: the four sit directly under the aircraft, above the headline, instead of after all the copy. */
  .hero-cast { position: relative; order: -1; z-index: 1; justify-self: center; width: min(96vw, 540px); margin: -6% auto 10px; }
  .hero-mark { width: 64px; height: 64px; margin-bottom: 16px; }
}

/* Sections */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section + .section { border-top: 1px solid var(--hair); }
.section-head { display: grid; gap: 8px; margin-bottom: 40px; }
.lede { font-size: 20px; color: var(--soft); max-width: 64ch; }

.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.feature + .feature { margin-top: clamp(56px, 8vw, 96px); }
.feature:nth-child(even) .feature-media { order: 2; }
.feature-media { position: relative; }
.feature-media img { border: 1px solid var(--hair); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.feature-media::before { content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 2px; background: var(--pink); z-index: 1; }
.feature ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.feature li { padding-left: 22px; position: relative; color: var(--soft); }
.feature li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--brand-gradient); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature:nth-child(even) .feature-media { order: 0; } }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card h3 { font-size: 22px; margin-bottom: 6px; }
.card p { color: var(--soft); font-size: 16px; margin: 0; }

.sorties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); border-top: 1px solid var(--hair); }
.sorties li { display: grid; grid-template-columns: 56px 1fr; gap: 4px 12px; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--hair); }
.sorties .num { font: 600 30px var(--display); color: var(--pink); grid-row: span 3; line-height: 1; }
.sorties .title { font: 600 22px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.sorties .region { font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.sorties .summary { color: var(--soft); font-size: 15px; margin: 0; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.shots figure { position: relative; overflow: hidden; border: 1px solid var(--hair); margin: 0; transition: border-color 140ms ease; }
.shots figure:hover { border-color: var(--hair-strong); }
.shots a { display: block; }
.shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease, filter .4s ease; }
.shots figure:hover img, .shots a:focus-visible img { transform: scale(1.03); filter: brightness(1.08); }
.shots figcaption { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(180deg, transparent, rgba(6,7,11,.9)); }
.shots.large { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.shots.wide img { aspect-ratio: 16 / 9; }
/* Menu captures keep their own shape: a tall crop of the campaign list beside the 16:10 loading screen, sized so
   the two stand the same height (822/340 = 3.87 x 1000/1600). */
.shots.ui { grid-template-columns: minmax(0, 1fr) minmax(0, 3.87fr); align-items: start; }
.shots.ui img { aspect-ratio: auto; height: auto; }
.shots.ui figcaption { position: static; background: var(--panel); padding: 8px 10px; border-top: 1px solid var(--hair); }
@media (max-width: 560px) {
  .shots.ui { grid-template-columns: 1fr; }
  .shots.ui figure:first-child { width: min(240px, 70%); justify-self: center; }
}
.tag { display: inline-block; font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
  border: 1px solid var(--hair-strong); background: rgba(6, 7, 11, .72); padding: 1px 6px; margin-right: 6px; vertical-align: 1px; }
.jump { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 22px; }
.jump a { font: 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--steel); padding: 6px 0; border-bottom: 2px solid transparent; }
.jump a:hover { color: var(--bone); border-bottom-color: var(--pink); }

/* Concept-art band on the home page: the image across the full width, the copy below it in clear space. */
.standoff .wrap { display: grid; gap: clamp(24px, 3vw, 36px); }
.standoff-art, .cta-art { position: relative; margin: 0; border: 1px solid var(--hair); background: var(--panel); }
.standoff-art::before, .cta-art::before { content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 2px; background: var(--pink); z-index: 1; }
.standoff-art img, .cta-art img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.standoff-art figcaption { padding: 8px 12px; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); border-top: 1px solid var(--hair); }
.standoff-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px clamp(24px, 4vw, 56px); align-items: end; }
.standoff-copy .kicker { grid-column: 1; }
.standoff-copy h2 { grid-column: 1; margin: 0; }
.standoff-copy .lede { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 860px) {
  .standoff-copy { grid-template-columns: 1fr; }
  .standoff-copy .lede { grid-column: 1; grid-row: auto; margin-top: 8px; }
}

/* Lightbox */
dialog.lightbox { max-width: min(96vw, 1600px); width: 100%; padding: 0; border: 1px solid var(--hair); background: var(--night); color: var(--bone); }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.lightbox img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: #000; }
.lightbox-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font: 13px var(--mono); letter-spacing: .06em; }
.lightbox-bar .caption { flex: 1; }

/* CTA band */
.cta-band { background: linear-gradient(90deg, rgba(255,38,145,.12), rgba(145,77,255,.08) 45%, rgba(6,7,11,0) 80%), var(--panel); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 48px; padding-bottom: 48px; }
.cta-band h2 { margin: 0; }
.cta-band.has-art .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); }
.cta-art figcaption { position: absolute; right: 10px; bottom: 10px; }
@media (max-width: 860px) { .cta-band.has-art .wrap { grid-template-columns: 1fr; } }

/* Download page */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.platform .platform-title { display: flex; align-items: center; gap: 10px; font-size: 26px; text-transform: none; }
.platform .meta { font: 13px var(--mono); letter-spacing: .06em; color: var(--steel); text-transform: uppercase; margin-bottom: 14px; }
.platform .status { display: inline-block; font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--hair); }
.platform .status { border-color: var(--hair-strong); color: var(--steel); }
.platform .status.ok { color: var(--night); background: var(--pink); border-color: var(--pink); }
.reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.reqs h3 { font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); margin: 0 0 6px; }
.reqs ul { margin: 0; padding-left: 18px; color: var(--soft); font-size: 15px; }
@media (max-width: 560px) { .reqs { grid-template-columns: 1fr; } }

form.panel-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label, .field legend { font: 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.field input[type=text], .field input[type=email], .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font: 16px var(--body); color: var(--bone);
  background: var(--ink); border: 1px solid var(--hair-strong); border-radius: 0; }
.field [aria-invalid=true] { border-color: var(--error); }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pink); outline: none; box-shadow: 0 0 0 1px var(--pink), var(--glow); }
.field .hint { font-size: 14px; color: var(--steel); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; color: var(--soft); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pink); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
.field-error, .validation-summary-errors, span.field-validation-error { color: var(--error); font-size: 14px; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { border-left: 3px solid var(--violet); padding: 12px 16px; background: rgba(201,143,255,.08); margin-bottom: 20px; }
.notice.error { border-left-color: var(--error); background: rgba(255,107,107,.1); }
.or-line { display: flex; align-items: center; gap: 12px; color: var(--steel); font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.download-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; }
@media (max-width: 960px) { .download-layout { grid-template-columns: 1fr; } }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.steps li::before { content: counter(step, decimal-leading-zero); font: 600 20px var(--display); color: var(--pink); }
code, .cmd { font: 14px var(--mono); background: var(--ink); border: 1px solid var(--hair); padding: 2px 6px; }
.cmd { display: block; padding: 10px 12px; overflow-x: auto; white-space: pre; margin: 0 0 1em; }

/* Support */
.faq-group + .faq-group { margin-top: 36px; }
details.faq { border-bottom: 1px solid var(--hair); }
details.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font: 600 20px var(--display); letter-spacing: .02em; position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 24px var(--mono); color: var(--violet); }
details.faq[open] summary::after { content: "–"; }
details.faq .answer { padding: 0 0 18px; color: var(--soft); }
details.faq .answer ul { margin: 0 0 1em; padding-left: 20px; }
table.controls { width: 100%; border-collapse: collapse; font-size: 15px; }
table.controls th, table.controls td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.controls th { font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); font-weight: 400; }
kbd { font: 13px var(--mono); padding: 2px 7px; background: var(--track); border: 1px solid var(--hair-strong); border-bottom: 2px solid var(--violet); white-space: nowrap; }
.support-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: start; }
.support-layout > .support-main { grid-column: 1; grid-row: 1; min-width: 0; }
.support-layout > .toc { grid-column: 2; grid-row: 1; }
.toc { position: sticky; top: 90px; display: grid; gap: 8px; }
@media (max-width: 960px) {
  .support-layout { grid-template-columns: 1fr; }
  .support-layout > .support-main, .support-layout > .toc { grid-column: 1; grid-row: auto; }
  .toc { position: static; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
  .toc .kicker { grid-column: 1 / -1; }
}
h2.group-title { font: 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--violet); margin: 0 0 12px; }
.toc a { font: 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--steel); }
.toc a:hover { color: var(--pink); }

/* Press / legal */
.advisory { font-size: 14px; color: var(--steel); max-width: 60ch; margin: 6px 0 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.facts dt { font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); padding-top: 3px; }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 8px; } }
.prose h2 { font-size: 30px; margin-top: 40px; }
.prose h3 { font-size: 22px; margin-top: 28px; }
.prose ul { padding-left: 20px; max-width: 68ch; }
.page-head { padding: clamp(56px, 8vw, 96px) 0 32px; border-bottom: 1px solid var(--hair); background: radial-gradient(ellipse at 20% 0%, rgba(145,77,255,.18), transparent 60%), radial-gradient(ellipse at 0% 0%, rgba(255,38,145,.08), transparent 40%); }
.page-head h1 { font-size: clamp(40px, 6vw, 72px); }
.credits-group + .credits-group { margin-top: 28px; }
.credits-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* Footer */
.site-footer { border-top: 1px solid var(--hair); padding: 48px 0 40px; margin-top: 0; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.footer-grid h2 { font: 12px var(--mono); letter-spacing: .12em; color: var(--steel); margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-grid a { text-decoration: none; color: var(--soft); font-size: 15px; }
.footer-grid a:hover { color: var(--pink); }
.footer-grid a.footer-brand { font-size: 22px; color: var(--bone); }
.footer-brand .brand-mark { width: 48px; height: 48px; }
.footer-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--steel); display: grid; gap: 6px; }
.footer-legal p { max-width: none; margin: 0; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Utilities (inline styles are blocked by the Content Security Policy) */
.small { font-size: 14px; }
.xsmall { font-size: 13px; }
.xxsmall { font-size: 12px; }
.m0 { margin: 0; }
.mt4 { margin-top: 4px; } .mt6 { margin: 6px 0 0; } .mt8 { margin-top: 8px; } .mt14 { margin: 14px 0 0; }
.mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; } .mt28 { margin-top: 28px; } .mt40 { margin-top: 40px; }
.mb16 { margin-bottom: 16px; }
.h2-sm { font-size: 34px; }
.bare { border: 0; padding: 0; margin: 0; }
.break { word-break: break-all; }
.choice { border: 1px solid var(--hair); padding: 12px; }
.align-start { align-items: start; }
figure.shot { margin: 0; }

.field label.choice { font: inherit; text-transform: none; letter-spacing: normal; color: var(--bone); }
.field label.choice strong { font-family: var(--display); font-size: 20px; letter-spacing: .04em; }
.legal-caps { text-transform: uppercase; font-size: 15px; letter-spacing: .02em; font-weight: 600; }