/* A320 Knowledge — site styles.
   Layout: one strict column grid with hairline rules, panel-placard labels in
   B612 (the face Airbus drew for its cockpit screens) and the logo's Montserrat
   for everything you read. Colour stays monochrome, like the logo; the only
   colours are the cockpit's own, used for what they mean on the flight deck:
   green for correct and normal, amber for caution, red for a warning. */

:root {
  /* dark first: the logo's charcoal ground */
  --bg: #121315;
  --bg-2: #18191C;
  --surface: #1E2024;
  --surface-2: #26292E;
  --line: rgba(236, 238, 242, 0.09);
  --line-strong: rgba(236, 238, 242, 0.18);
  --fg: #ECEEF1;
  --fg-2: #C3C7CE;
  --muted: #8B9099;
  --steel: #A9BDCD;          /* the overhead panel's blue-grey, lifted for text */
  --steel-ink: #6E8CA6;
  --invert-bg: #ECEEF1;
  --invert-fg: #121315;
  --ok: #3FD27A;
  --ok-soft: rgba(63, 210, 122, 0.12);
  --caution: #F2A53A;
  --caution-soft: rgba(242, 165, 58, 0.12);
  --warn: #F0555A;
  --warn-soft: rgba(240, 85, 90, 0.12);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --scrim: rgba(18, 19, 21, 0.82);
  --mark-ink: #A6A6A8;       /* the logo's own light grey linework */
  --stage-top: #1B1E22;
  --stage-bottom: #121417;
  --stage-glow: 0.26;
  --stage-dot: rgba(236, 238, 242, 0.06);

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  /* one typeface across the site: Montserrat for text, headings, labels and figures */
  --font-read: var(--font-body);
  --font-data: var(--font-body);
  --font-cockpit: var(--font-body);
  /* B612 Mono only where the page imitates a cockpit screen, and for codes */
  --font-screen: "B612 Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  --step-5: clamp(2.75rem, 1.2rem + 6vw, 5.75rem);

  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 1200px;
  --header-h: 64px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F2F2F1;
    --bg-2: #EAEAE8;
    --surface: #FFFFFF;
    --surface-2: #F5F5F4;
    --line: rgba(20, 22, 26, 0.10);
    --line-strong: rgba(20, 22, 26, 0.2);
    --fg: #17181B;
    --fg-2: #3A3D44;
    --muted: #6A6F78;
    --steel: #3F5B72;
    --steel-ink: #3F5B72;
    --invert-bg: #17181B;
    --invert-fg: #F2F2F1;
    --ok: #0E8A44;
    --ok-soft: rgba(14, 138, 68, 0.10);
    --caution: #A9620A;
    --caution-soft: rgba(169, 98, 10, 0.10);
    --warn: #C42B31;
    --warn-soft: rgba(196, 43, 49, 0.09);
    --shadow: 0 20px 50px rgba(20, 22, 26, 0.12);
    --scrim: rgba(242, 242, 241, 0.85);
    --mark-ink: #2B2C2F;
    --stage-top: #E9EAE8;
    --stage-bottom: #DDDFDC;
    --stage-glow: 0.18;
    --stage-dot: rgba(20, 22, 26, 0.07);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F2F2F1;
  --bg-2: #EAEAE8;
  --surface: #FFFFFF;
  --surface-2: #F5F5F4;
  --line: rgba(20, 22, 26, 0.10);
  --line-strong: rgba(20, 22, 26, 0.2);
  --fg: #17181B;
  --fg-2: #3A3D44;
  --muted: #6A6F78;
  --steel: #3F5B72;
  --steel-ink: #3F5B72;
  --invert-bg: #17181B;
  --invert-fg: #F2F2F1;
  --ok: #0E8A44;
  --ok-soft: rgba(14, 138, 68, 0.10);
  --caution: #A9620A;
  --caution-soft: rgba(169, 98, 10, 0.10);
  --warn: #C42B31;
  --warn-soft: rgba(196, 43, 49, 0.09);
  --shadow: 0 20px 50px rgba(20, 22, 26, 0.12);
  --scrim: rgba(242, 242, 241, 0.85);
  --mark-ink: #2B2C2F;
  --stage-top: #E9EAE8;
  --stage-bottom: #DDDFDC;
  --stage-glow: 0.18;
  --stage-dot: rgba(20, 22, 26, 0.07);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--steel-ink); color: #fff; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--invert-bg); color: var(--invert-fg); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 16px; }

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-weight: 500; }
.lede { font-size: var(--step-1); color: var(--fg-2); max-width: 60ch; line-height: 1.55; }
.muted { color: var(--muted); }
.display { font-size: var(--step-5); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; }
.h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; }
.h2 { font-size: var(--step-3); font-weight: 700; }
.h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- buttons ----------
   One family everywhere: a pill with a soft lift on hover and a press on click. A button
   with an arrow carries it in its own small disc, which slides as the button is hovered. */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 48px; padding: 0 1.45em; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s ease, border-color .25s ease, color .25s ease;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn:has(> .arrow) { padding-right: 0.5em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: .08s; }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
/* a sheen that crosses the button once on hover */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.16) 48%, transparent 66%);
  transform: translateX(-110%); transition: transform .8s var(--ease-out);
}
.btn:hover::before { transform: translateX(110%); }
.btn-primary {
  background: var(--invert-bg); color: var(--invert-fg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.18), 0 10px 26px -14px rgba(0,0,0,0.55);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(0,0,0,0.16), 0 16px 34px -14px rgba(0,0,0,0.6); }
.btn-ghost {
  border-color: var(--line-strong); color: var(--fg);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-ghost:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.btn-ghost::before { background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--fg) 10%, transparent) 48%, transparent 66%); }
.btn-sm { min-height: 38px; padding: 0 1.1em; font-size: 0.8125rem; }
.btn-sm:has(> .arrow) { padding-right: 0.4em; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[disabled]::before { display: none; }
/* the arrow drawn, so it matches Montserrat's stroke on every system */
.arrow::after {
  content: ""; display: inline-block; width: 0.95em; height: 0.7em; vertical-align: -0.04em; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'%3E%3Cpath d='M1 7h16M11 1.5 17 7l-6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'%3E%3Cpath d='M1 7h16M11 1.5 17 7l-6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .35s var(--ease-out);
}
a:hover > .arrow::after { transform: translateX(3px); }
/* in a button, the arrow sits in a disc */
.btn > .arrow {
  display: inline-grid; place-items: center; flex: none; width: 2.15em; height: 2.15em; border-radius: 50%;
  background: color-mix(in srgb, currentColor 11%, transparent);
  transition: background-color .3s ease, transform .35s var(--ease-out);
}
.btn > .arrow::after { width: 0.85em; height: 0.62em; vertical-align: 0; }
.btn:hover > .arrow { background: color-mix(in srgb, currentColor 18%, transparent); transform: translateX(2px); }
.btn:hover > .arrow::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn > .arrow, .arrow::after { transition: none; }
  .btn:hover { transform: none; }
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--fg-2);
  white-space: nowrap;
}
.chip-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.chip-caution { color: var(--caution); border-color: color-mix(in srgb, var(--caution) 45%, transparent); }
.chip-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.mark { display: inline-block; flex: none; background-color: var(--mark-ink);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat; mask: url("../img/mark.svg") center / contain no-repeat; }
.brand-mark { width: 36px; height: 36px; }
/* A320 and KNOWLEDGE share one centre line, the mark's: with a line height of 1, Montserrat's
   capitals sit centred in the line box, so centring the boxes centres the capitals */
.brand-word { display: flex; align-items: center; gap: 11px; line-height: 1; }
.brand-word b, .brand-word span { display: block; line-height: 1; }
.brand-word b { font-family: var(--font-display); font-weight: 800; font-size: 1.3125rem; letter-spacing: 0.02em; margin-right: -0.02em; }
.brand-word span { font-family: var(--font-display); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.46em; margin-right: -0.46em; color: var(--fg-2); }
@media (max-width: 380px) { .brand-word span { letter-spacing: 0.32em; margin-right: -0.32em; } }
/* The top bar: three menus (Training, Library, Company). One underline (.nav-ink, placed by
   site.js) glides to the trigger under the pointer and settles back under the menu that holds the
   current page. One card (.nav-pop) sits behind the open menu and, moving from menu to menu,
   reshapes itself to the next one while the menus cross-fade on it. Without the script, a menu
   opens under its trigger on hover or focus. */
.nav { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: 0.875rem; line-height: 1;
  padding: 12px 13px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); cursor: pointer;
  transition: color .3s ease;
}
.nav-trigger:hover, .nav-trigger.is-current, .nav-trigger[aria-expanded="true"] { color: var(--fg); }
.nav-trigger:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.nav-chev { width: 9px; height: 6px; background: currentColor; opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='m1 1 3.5 3.5L8 1' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='m1 1 3.5 3.5L8 1' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .45s var(--ease-out), opacity .3s ease; }
.nav-trigger:hover .nav-chev { opacity: 0.9; }
.nav-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); opacity: 1; }
.nav:not(.has-ink) .nav-trigger.is-current::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; background: var(--fg); border-radius: 2px; }

/* the card, and the menus on it: both hang 8 px below the bar (and its 1 px border) */
.nav-pop, .nav-panel { position: absolute; left: 0; top: calc(50% + var(--header-h) / 2 + 9px); }
.nav-pop {
  width: var(--w, 0px); height: var(--h, 0px); border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow), 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translate(var(--x, 0px), -8px) scale(0.97); transform-origin: var(--ax, 50%) 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .45s var(--ease-out), width .45s var(--ease-out), height .45s var(--ease-out), opacity .22s ease, visibility 0s linear .45s;
}
/* the notch that points at the open menu's trigger */
.nav-pop::before {
  content: ""; position: absolute; top: -6px; left: var(--ax, 50%); width: 11px; height: 11px; margin-left: -5.5px;
  background: var(--surface); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong);
  border-top-left-radius: 3px; transform: rotate(45deg); transition: left .45s var(--ease-out);
}
.nav-pop.is-open { opacity: 1; visibility: visible; transform: translate(var(--x, 0px), 0) scale(1); transition-delay: 0s; }
.nav-pop.no-anim, .nav-pop.no-anim::before, .nav-panel.no-anim { transition: none; }
.nav-panel {
  z-index: 1; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(calc(var(--x, 0px) + var(--dx, 0px)));
  transition: opacity .18s ease, transform .45s var(--ease-out), visibility 0s linear .45s;
}
/* a bridge over the gap between the bar and the menu, so the pointer can cross it */
.nav-panel.is-open::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.nav-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease .05s, transform .45s var(--ease-out), visibility 0s; }
.nav-panel-in { display: grid; gap: 6px; padding: 10px; }
.nav-panel-training { width: 384px; }
.nav-panel-library { width: 592px; }
.nav-panel-company { width: 360px; }
.nav-cols { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 8px; }
.nav-list { display: grid; gap: 2px; align-content: start; }
.nav-link {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px;
  text-decoration: none; color: var(--fg); transition: background-color .25s ease;
}
.nav-link:hover, .nav-link:focus-visible { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.nav-link:focus-visible, .nav-feature:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
/* the icon tile: a small flight-deck display, black glass in either theme. At rest the glyphs sit
   at standby brightness; pointed at (or for the page you're on) the display powers up: the glyphs
   fade to full, a bloom in the tile's own colour (--acc) fades in behind them and the bezel takes
   the colour. Only opacity and colour change, so it's smooth. */
.nav-ico {
  --acc: 63, 224, 127;
  position: relative; isolation: isolate; overflow: hidden; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(160deg, #1A1D22 0%, #0B0D10 100%);
  border: 1px solid rgba(236, 238, 242, 0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.5), 0 3px 8px -4px rgba(0,0,0,0.45);
  transition: border-color .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
/* the bloom, and the glass's sheen over everything */
.nav-ico::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .55s cubic-bezier(.2,.7,.2,1);
  background: radial-gradient(75% 75% at 50% 62%, rgba(var(--acc), 0.30), rgba(var(--acc), 0.06) 60%, transparent 80%); }
.nav-ico::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 38%, transparent 55%); }
.nav-ico svg { width: 40px; height: 40px; display: block; }
.nav-ico .disp { opacity: 0.76; transition: opacity .55s cubic-bezier(.2,.7,.2,1); }
:root[data-theme="light"] .nav-ico { border-color: rgba(20,22,26,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px -5px rgba(20,22,26,0.45); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nav-ico { border-color: rgba(20,22,26,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px -5px rgba(20,22,26,0.45); } }
a:hover > .nav-ico, a:focus-visible > .nav-ico, .nav-link[aria-current="page"] > .nav-ico,
.mnav-group a[aria-current="page"] > .nav-ico {
  border-color: rgba(var(--acc), 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.5), 0 6px 18px -8px rgba(var(--acc), 0.55); }
a:hover > .nav-ico::before, a:focus-visible > .nav-ico::before, .nav-link[aria-current="page"] > .nav-ico::before, .mnav-group a[aria-current="page"] > .nav-ico::before { opacity: 1; }
a:hover > .nav-ico .disp, a:focus-visible > .nav-ico .disp, .nav-link[aria-current="page"] > .nav-ico .disp, .mnav-group a[aria-current="page"] > .nav-ico .disp { opacity: 1; }
.nav-link { transition: background-color .4s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .nav-ico, .nav-ico::before, .nav-ico .disp { transition: none; } }
.nav-txt { display: grid; gap: 3px; min-width: 0; }
.nav-txt b { display: flex; align-items: center; font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.nav-txt small { font-size: 0.78rem; line-height: 1.35; color: var(--muted); }
/* the page you are on: a green dot after its name */
.nav-link[aria-current="page"] .nav-txt b::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--ok); }
/* the latest article, on the flight deck's dark ground in either theme */
.nav-feature {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px; min-height: 100%;
  padding: 18px; border-radius: 12px; text-decoration: none; color: #ECEEF1;
  background: linear-gradient(160deg, #1B1E22 0%, #0F1113 100%); border: 1px solid rgba(236, 238, 242, 0.08);
}
.nav-feature::before { content: ""; position: absolute; inset: auto -30% -55% -30%; height: 90%; z-index: -1;
  background: radial-gradient(closest-side, rgba(63, 224, 127, 0.22), transparent); transition: transform .6s var(--ease-out), opacity .4s ease; opacity: 0.7; }
.nav-feature:hover::before { transform: translateY(-12%); opacity: 1; }
.nav-feature-k { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #3FE07F; }
.nav-feature b { font-size: 1rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.nav-feature-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: rgba(236, 238, 242, 0.75); transition: color .25s ease; }
.nav-feature:hover .nav-feature-go { color: #ECEEF1; }
/* no script: each menu opens under its own trigger, on its own card */
html:not(.js) .nav-item { position: relative; }
html:not(.js) .nav-panel { top: calc(100% + 10px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow); }
html:not(.js) .nav-item:hover .nav-panel, html:not(.js) .nav-item:focus-within .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-pop, .nav-pop::before, .nav-panel { transition: opacity .15s ease, visibility 0s linear .15s; }
  .nav-pop.is-open, .nav-panel.is-open { transition: opacity .15s ease; }
  .nav-chev, .nav-ico { transition: none; }
}
.nav-ink {
  position: absolute; left: 0; bottom: 3px; height: 2px; width: 0; border-radius: 2px; background: var(--fg);
  opacity: 0; pointer-events: none; will-change: transform, width;
  transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .25s ease;
}
.nav-ink.is-on { opacity: 1; }
.nav-ink.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .nav-ink { transition: opacity .2s ease; } }
/* from page to page: a soft cross-fade where the browser can, the header held still */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
/* a menu sliding out past the window's edge is cut there, never widening the page */
.site-header { overflow-x: clip; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--fg-2);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .35s var(--ease-out);
}
.icon-btn:hover { color: var(--fg); border-color: var(--line-strong); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 18px; height: 18px; }
.menu-btn { display: none; }
/* the full top bar (three menus) needs about 940 px; below that, the menu button */
@media (max-width: 959px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .header-actions { margin-left: auto; }
  .header-cta { display: none; }
}
.mobile-nav {
  position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0; z-index: 49;
  background: var(--bg); overflow-y: auto;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.mobile-nav a {
  display: flex; justify-content: space-between; align-items: center; text-decoration: none;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.mobile-nav a small { font-family: var(--font-data); font-size: 0.6875rem; color: var(--muted); font-weight: 600; letter-spacing: .12em; }
.mobile-nav .btn { margin-top: 24px; width: 100%; }
/* the phone menu: the same three groups, each item with its icon and line */
.mnav-group { display: grid; gap: 2px; padding-block: 18px 12px; border-bottom: 1px solid var(--line); }
.mnav-label { padding: 0 4px 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.mobile-nav .mnav-group a { justify-content: flex-start; gap: 14px; padding: 9px 4px; border-bottom: 0; font-size: 1.0625rem; border-radius: 12px; }
.mobile-nav .mnav-group a .nav-txt b { font-size: 1.0625rem; }
.mobile-nav .mnav-group a small { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; }
.mobile-nav > .btn { justify-content: center; font-size: 1rem; padding: 0 1.45em; min-height: 54px; border-bottom: 1px solid transparent; }
.mobile-nav .mnav-group a[aria-current="page"] .nav-txt b::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--ok); }
.mobile-nav:not([hidden]) .mnav-group, .mobile-nav:not([hidden]) > .btn { animation: mnav-in .5s var(--ease-out) both; }
.mobile-nav .mnav-group:nth-child(2) { animation-delay: .05s; }
.mobile-nav .mnav-group:nth-child(3) { animation-delay: .1s; }
.mobile-nav > .btn { animation-delay: .15s; }
@keyframes mnav-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .mobile-nav:not([hidden]) .mnav-group, .mobile-nav:not([hidden]) > .btn { animation: none; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }
.section-head.split { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 720px) { .section-head.split { grid-template-columns: 1fr; } }
.rule-label {
  display: flex; align-items: center; gap: 14px;
}
.rule-label::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(48px, 8vw, 96px) clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--line); }
.page-hero .h1 { max-width: 16ch; }
.page-hero .lede { margin-top: 18px; }
.page-hero .eyebrow { margin-bottom: 18px; display: block; }
.page-hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { color: var(--muted); font-size: 0.875rem; margin-top: 16px; max-width: 36ch; }
.footer-mail { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--fg-2); font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.footer-mail svg { width: 17px; height: 17px; flex: none; color: var(--ok); }
.footer-mail:hover { color: var(--fg); }
.footer-col h4 { font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a { text-decoration: none; color: var(--fg-2); font-size: 0.9375rem; }
.footer-col a:hover { color: var(--fg); }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: var(--muted); font-size: 0.8125rem; }
.footer-base p { max-width: 70ch; }

/* ---------- the dark photo heroes (home, Company, Contact) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); background: #0c0d0f; color: #F2F3F5; }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; filter: saturate(0.75) contrast(1.05); animation: hero-settle 2.6s cubic-bezier(.2,.7,.2,1) both; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 85% at 50% 40%, rgba(10,11,13,0.80) 0%, rgba(10,11,13,0.62) 55%, rgba(10,11,13,0.88) 100%),
    linear-gradient(0deg, rgba(10,11,13,0.95) 0%, rgba(10,11,13,0) 40%);
}
.hero-tagline { max-width: 38ch; margin-top: clamp(26px, 3vw, 38px); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.7; letter-spacing: 0.002em; color: rgba(242,243,245,0.78); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(32px, 3.6vw, 44px); }
.hero .btn { min-height: 54px; font-size: 1rem; }
.hero .btn-primary { background: #F2F3F5; color: #121315; box-shadow: inset 0 1px 0 #fff, 0 12px 32px -14px rgba(0,0,0,0.8); }
.hero .btn-primary:hover { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 18px 40px -14px rgba(0,0,0,0.85), 0 0 0 4px rgba(242,243,245,0.12); }
.hero .btn-primary::before { background: linear-gradient(105deg, transparent 30%, rgba(18,19,21,0.08) 48%, transparent 66%); }
.hero .btn-ghost { color: #F2F3F5; border-color: rgba(242,243,245,0.32); background: rgba(242,243,245,0.06); }
.hero .btn-ghost:hover { border-color: rgba(242,243,245,0.7); background: rgba(242,243,245,0.12); }
.hero .btn-ghost::before { background: linear-gradient(105deg, transparent 30%, rgba(242,243,245,0.14) 48%, transparent 66%); }
.hero .btn:focus-visible { outline-color: #F2F3F5; }
.hero-title, .hero-tagline, .hero-cta, .hero-q { animation: hero-rise 0.9s cubic-bezier(.2,.7,.2,1) both; }
.hero-tagline { animation-delay: .08s; } .hero-cta { animation-delay: .16s; } .hero-q { animation-delay: .24s; }
@keyframes hero-rise { from { opacity: 0.25; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
/* the home hero, like the pricing page's: the photo and its dark backing fade into the page
   below the figures, so the figures stay on dark and the page carries on with no hard edge */
.hero-home { --fade: clamp(150px, 15vw, 250px); background: var(--bg); border-bottom: 0; padding-bottom: calc(var(--fade) - clamp(30px, 4vw, 50px)); }
.hero-home::before { content: none; }
.hero-home + .airlines { padding-top: clamp(4px, 1vw, 14px); }
.hero-home .hero-photo { background: #0c0d0f;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade)), rgba(0,0,0,0.55) calc(100% - var(--fade) * 0.45), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--fade)), rgba(0,0,0,0.55) calc(100% - var(--fade) * 0.45), transparent 100%); }
.hero-home .hero-photo img { filter: saturate(0.9) contrast(1.08); }
/* lit from the left, where the words are: a dark wash that lifts toward the right, a faint
   ECAM-green glow behind the headline, the bottom darkened for the figures, and a fine grain */
.hero-home .hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(48% 44% at 26% 42%, rgba(63,224,127,0.09), transparent 70%),
    linear-gradient(90deg, rgba(10,11,13,0.90) 0%, rgba(10,11,13,0.74) 40%, rgba(10,11,13,0.46) 72%, rgba(10,11,13,0.62) 100%),
    linear-gradient(0deg, rgba(10,11,13,0.95) 0%, rgba(10,11,13,0) 42%); }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(44px, 6vw, 88px) clamp(36px, 4vw, 56px); }
.hero-copy { min-width: 0; }
/* two sentences, each its own block: the promise in white, the contrast in grey, a little air between them */
.hero-title { margin: 0; max-width: 11.5ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 1.25rem + 3.9vw, 4.25rem); line-height: 1.04; letter-spacing: -0.032em; color: #FFFFFF; text-wrap: balance; }
.hero-title span { display: block; margin-top: 0.18em; color: rgba(242,243,245,0.5); }
/* the question of the day, as a glass card: always on the dark hero, so it carries the dark
   theme's colours in either theme; it leans toward the pointer (home.js) */
.hero-q { min-width: 0;
  --surface: rgba(28,31,35,0.72); --surface-2: rgba(242,243,245,0.07); --line: rgba(236,238,242,0.13); --line-strong: rgba(236,238,242,0.24);
  --fg: #ECEEF1; --fg-2: #C3C7CE; --muted: #8B9099; --ok: #3FD27A; --ok-soft: rgba(63,210,122,0.13); --warn: #F0555A; --warn-soft: rgba(240,85,90,0.13);
  --caution: #F2A53A; --caution-soft: rgba(242,165,58,0.12); --invert-bg: #ECEEF1; --invert-fg: #121315; color: var(--fg); }
/* the card sits flat and still. Its light: a thin green light travels slowly round the edge (as on
   the pricing page's A320 Knowledge+ card), and where there's a mouse a soft light sits under the
   pointer, on the glass and on the nearby edge (home.js eases it). The answers arrive one after
   another, and the right one fills with green when it's chosen. */
@property --q-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --q-lit { syntax: "<number>"; inherits: true; initial-value: 0; }
.hero-q .qcard { position: relative; isolation: isolate; border-radius: 22px; padding: clamp(20px, 2.4vw, 30px); border-color: rgba(242,243,245,0.12);
  background: linear-gradient(180deg, rgba(30,33,38,0.82), rgba(18,20,23,0.88)); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), 0 0 60px -20px rgba(63,224,127,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
  --mx: 50%; --my: 0%; --q-lit: 0; transition: --q-lit .6s ease, box-shadow .6s ease; }
.hero-q .qcard.is-lit { --q-lit: 1; box-shadow: 0 46px 90px -40px rgba(0,0,0,0.95), 0 0 70px -18px rgba(63,224,127,0.16), inset 0 1px 0 rgba(255,255,255,0.08); }
.hero-q .qcard::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background:
    radial-gradient(240px circle at var(--mx) var(--my), rgba(242,243,245, calc(0.55 * var(--q-lit))), transparent 70%),
    conic-gradient(from var(--q-beam), transparent 0deg, rgba(63,224,127,0.0) 20deg, rgba(63,224,127,0.85) 70deg, rgba(63,224,127,0.25) 110deg, transparent 150deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: q-beam 9s linear infinite; }
@keyframes q-beam { to { --q-beam: 360deg; } }
.hero-q .qcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242,243,245, calc(0.06 * var(--q-lit))), transparent 65%); }
.hero-q .opts li { animation: q-in .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-q .opts li:nth-child(1) { animation-delay: .42s; } .hero-q .opts li:nth-child(2) { animation-delay: .5s; }
.hero-q .opts li:nth-child(3) { animation-delay: .58s; } .hero-q .opts li:nth-child(4) { animation-delay: .66s; }
@keyframes q-in { from { opacity: 0; transform: translateY(8px); } }
.hero-q .opt { transition: border-color .25s ease, background-color .25s ease, transform .25s ease; }
.hero-q .opt:hover:not([disabled]) { transform: translateX(2px); }
.hero-q .opt.is-correct, .hero-q .opt.is-wrong { background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; animation: q-fill .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-q .opt.is-correct { background-image: linear-gradient(90deg, rgba(63,210,122,0.20), rgba(63,210,122,0.08)); }
.hero-q .opt.is-wrong { background-image: linear-gradient(90deg, rgba(240,85,90,0.18), rgba(240,85,90,0.07)); }
@keyframes q-fill { from { background-size: 0% 100%; } }
.hero-q .qcard-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; }
.hero-q .qcard-top > .cluster { grid-column: 1 / -1; grid-row: 2; }
.hero-q .qdate { grid-column: 2; grid-row: 1; font-size: 0.8125rem; font-weight: 500; color: rgba(242,243,245,0.7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-q .qdate-short { display: none; }
@media (max-width: 420px) { .hero-q .qdate-long { display: none; } .hero-q .qdate-short { display: inline; } .hero-q .qcard-top .eyebrow { letter-spacing: 0.14em; } }
.hero-q .qcard-top .eyebrow { white-space: nowrap; }
.hero-q .qcard-top .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #3FE07F; }
.hero-q .qcard-top .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: live-dot 2.4s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: 0.35; } }
.hero-q .qtext { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); }
.hero-q .opts { margin-top: 18px; gap: 8px; }
@media (max-width: 960px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .hero-home .hero-photo::after { background:
    radial-gradient(70% 40% at 30% 20%, rgba(63,224,127,0.08), transparent 70%),
    linear-gradient(180deg, rgba(10,11,13,0.66) 0%, rgba(10,11,13,0.80) 45%, rgba(10,11,13,0.92) 100%); }
}
@media (max-width: 520px) {
  .hero-split .hero-cta .btn { width: 100%; justify-content: space-between; }
  .hero-split .hero-cta .btn-ghost { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hero-q .qcard::before, .hero-q .opts li, .hero-q .opt.is-correct, .hero-q .opt.is-wrong, .hero-q .qcard-top .eyebrow::before { animation: none; } .hero-q .opt:hover:not([disabled]) { transform: none; } }

/* ---------- the training tools (home) ----------
   A two-tone heading like the hero's, with a short line beside it. Each tool is a card whose top
   is a stage: a soft light in the tool's own colour (green for the trainer, amber for ECAM, the
   overhead's blue-grey for the cockpit) and the screen itself rising out of it, framed like a
   display unit, its foot running into the card. On hover the card lifts, the screen rises and the
   light brightens; the card's link is a pill whose arrow fills. */
.tools-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 60px); }
.tools-head .stack { gap: 16px; }
.tools-head > .stack:only-child { grid-column: 1 / -1; }
.tools-title { max-width: 16ch; font-size: clamp(2.1rem, 1.2rem + 2.7vw, 3.4rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.tools-title span { display: block; margin-top: 0.12em; color: var(--muted); }
.arts-side { display: grid; gap: 22px; justify-items: start; }
.arts-side .tools-lede { padding-bottom: 0; }
.tools-lede { color: var(--fg-2); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0938rem); line-height: 1.7; max-width: 40ch; padding-bottom: 0.35em; }
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.tool { --glow: 63, 224, 127; position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--surface);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
  transition: border-color .4s ease, transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.tool-ecam { --glow: 242, 165, 58; }
.tool-cockpit { --glow: 120, 160, 196; }
.tool:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--glow), 0.08); }
.tool:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.tool-feature { grid-column: 1 / -1; }
.tool-stage { position: relative; padding: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 40px) 0; overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(var(--glow), var(--stage-glow)), transparent 70%),
    radial-gradient(circle at 1px 1px, var(--stage-dot) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(180deg, var(--stage-top), var(--stage-bottom));
  border-bottom: 1px solid var(--line); }
.tool-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(70% 90% at 50% 100%, rgba(var(--glow), var(--stage-glow)), transparent 70%); }
.tool:hover .tool-stage::before { opacity: 1; }
.tool-shot { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: #0c0d0f;
  border-radius: 14px 14px 0 0; border: 1px solid rgba(242,243,245,0.16); border-bottom: 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.05) inset, 0 30px 60px -28px rgba(0,0,0,0.65), 0 0 0 6px rgba(var(--glow), 0.04);
  transform: translateY(6px); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.tool-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 32%); }
.tool-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.tool:hover .tool-shot { transform: translateY(0); box-shadow: 0 -1px 0 rgba(255,255,255,0.06) inset, 0 36px 70px -28px rgba(0,0,0,0.7), 0 0 0 6px rgba(var(--glow), 0.07); }
.tool:hover .tool-shot img { transform: scale(1.025); }
.tool-body { display: grid; gap: 12px; flex: 1; align-content: start; padding: clamp(22px, 2.6vw, 32px); }
.tool-body .h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.625rem); font-weight: 700; letter-spacing: -0.022em; }
.tool-body p { color: var(--fg-2); font-size: 0.9688rem; line-height: 1.65; max-width: 46ch; }
.tools .tool-go { justify-self: start; margin-top: auto; display: inline-flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 6px 0 18px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--fg) 3%, transparent);
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: -0.005em; color: var(--fg);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
.tools .tool-body > .tool-go { margin-top: 10px; }
.tools .tool-go .arrow { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--fg) 9%, transparent); transition: background-color .35s ease, transform .45s var(--ease-out); }
.tools .tool-go .arrow::after { width: 0.8em; height: 0.6em; vertical-align: 0; }
.tool:hover .tool-go { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-fg); }
.tool:hover .tool-go .arrow { background: color-mix(in srgb, var(--invert-fg) 12%, transparent); transform: translateX(2px); }
.tool:hover .tool-go .arrow::after { transform: none; }
@media (min-width: 900px) {
  .tool-feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .tool-feature .tool-stage { border-bottom: 0; border-right: 1px solid var(--line); padding-bottom: 0; display: flex; align-items: flex-end; }
  .tool-feature .tool-shot { width: 100%; aspect-ratio: 16 / 9.6; }
  .tool-feature .tool-body { align-content: center; padding: clamp(32px, 4vw, 56px); gap: 14px; }
  .tool-feature .tool-body .h3 { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -0.028em; }
  .tool-feature .tool-body p { font-size: 1.0625rem; max-width: 38ch; }
}
@media (max-width: 860px) {
  .tools-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 680px) {
  .tools { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tool, .tool-shot, .tool-shot img, .tool-stage::before, .tools .tool-go, .tools .tool-go .arrow { transition: none; }
  .tool:hover, .tool:hover .tool-shot { transform: none; }
  .tool:hover .tool-shot img { transform: none; }
}

/* ---------- question of the day ---------- */
.qotd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .qotd { grid-template-columns: 1fr; } }

/* ---------- question card (quiz, bank, home) ---------- */
.qcard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(20px, 3vw, 32px); }
.qcard-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.qtext { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.opts { display: grid; gap: 10px; margin-top: 22px; list-style: none; padding: 0; }
.opt {
  width: 100%; text-align: left; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 11px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  font-size: 0.9875rem; line-height: 1.4; transition: border-color .15s ease, background-color .15s ease;
}
.opt:hover:not([disabled]) { border-color: var(--fg-2); background: var(--surface-2); }
.opt .key {
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--font-data); font-size: 0.8125rem; border: 1px solid var(--line-strong); color: var(--fg-2);
}
.opt .verdict { font-family: var(--font-data); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.opt[disabled] { cursor: default; }
.opt.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.opt.is-correct .key { border-color: var(--ok); color: var(--ok); }
.opt.is-correct .verdict { color: var(--ok); }
.opt.is-wrong { border-color: var(--warn); background: var(--warn-soft); }
.opt.is-wrong .key { border-color: var(--warn); color: var(--warn); }
.opt.is-wrong .verdict { color: var(--warn); }
.opt.is-dim { opacity: 0.5; }
.qnote { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); color: var(--fg-2); font-size: 0.875rem; }
.qfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }

/* ---------- progress ---------- */
.bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--fg); border-radius: 4px; transition: width .3s ease; }
.bar.ok > i { background: var(--ok); }
.segbar { display: flex; gap: 3px; }
.segbar i { flex: 1; height: 4px; border-radius: 3px; background: var(--line-strong); }
.segbar i.ok { background: var(--ok); }
.segbar i.bad { background: var(--warn); }
.segbar i.now { background: var(--fg); }

/* ---------- articles ---------- */
.article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .article-list { grid-template-columns: 1fr; } }
/* an article card: the cover framed inside the card, a coloured kind (green for a deep dive, amber
   for an exclusive) with the reading time, the title, two or three lines, and a pill to read it
   that fills when the card is pointed at. The card lifts and the cover wakes to full colour. */
.acard { --kind: 63, 224, 127; position: relative; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--surface);
  transition: border-color .4s ease, transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.acard:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 28px 56px -34px rgba(0,0,0,0.55); }
.acard:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.acard-img { position: relative; margin: 8px 8px 0; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 15px; background: #0c0d0f; }
.acard-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 30%, transparent 62%, rgba(10,11,13,0.35) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.acard-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.04); transition: transform .9s var(--ease-out), filter .6s ease; }
.acard:hover .acard-img img { transform: scale(1.04); filter: saturate(1) contrast(1.04); }
.acard-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 28px); }
.acard-body .h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4375rem); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; }
.acard-body p { color: var(--fg-2); font-size: 0.9375rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.acard-kind { display: inline-flex; align-items: center; gap: 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--kind)); }
.acard-kind::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.acard-kind.is-exclusive { --kind: 242, 165, 58; }
:root[data-theme="light"] .acard { --kind: 14, 138, 68; } :root[data-theme="light"] .acard-kind.is-exclusive { --kind: 169, 98, 10; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .acard { --kind: 14, 138, 68; } :root:not([data-theme="dark"]) .acard-kind.is-exclusive { --kind: 169, 98, 10; } }
.acard-time { font-size: 0.8125rem; color: var(--muted); }
.acard-go { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 5px 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--fg) 3%, transparent);
  font-family: var(--font-display); font-weight: 600; font-size: 0.8438rem; color: var(--fg); transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
.acard-body p { margin-bottom: 10px; }
.acard-go .arrow { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--fg) 9%, transparent); transition: background-color .35s ease, transform .45s var(--ease-out); }
.acard-go .arrow::after { width: 0.8em; height: 0.6em; vertical-align: 0; }
.acard:hover .acard-go { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-fg); }
.acard:hover .acard-go .arrow { background: color-mix(in srgb, var(--invert-fg) 12%, transparent); transform: translateX(2px); }
.acard:hover .acard-go .arrow::after { transform: none; }
@media (prefers-reduced-motion: reduce) { .acard, .acard-img img, .acard-go, .acard-go .arrow { transition: none; } .acard:hover { transform: none; } .acard:hover .acard-img img { transform: none; } }

.prose { font-family: var(--font-read); font-size: 1.0625rem; line-height: 1.8; color: var(--fg); max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--font-display); font-size: 1.6rem; margin-top: 2.2em; letter-spacing: -0.015em; }
.prose h3 { font-family: var(--font-display); font-size: 1.2rem; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.45em; }
.prose strong { font-weight: 650; }
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2.4em; }
.prose blockquote { margin: 1.6em 0; padding-left: 1.2em; border-left: 2px solid var(--line-strong); color: var(--fg-2); font-style: italic; }
.prose a { color: var(--steel); }
.prose code { font-family: var(--font-screen); font-size: 0.85em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 4px; }
.prose .insights { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; }
.article-head { padding-block: clamp(48px, 7vw, 88px) 32px; }
.article-head .h1 { max-width: 20ch; font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); }
.article-cover { border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; margin-bottom: 48px; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; padding-bottom: 96px; }
@media (max-width: 980px) { .article-layout { grid-template-columns: 1fr; } .article-aside { display: none; } }
.article-aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; display: grid; gap: 14px; font-size: 0.875rem; }
.article-aside a { text-decoration: none; color: var(--muted); display: block; padding: 4px 0; line-height: 1.4; }
.article-aside a:hover { color: var(--fg); }

/* ---------- misc layout ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 28px; }
.cluster { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(20px, 3vw, 28px); }
.photo { border-radius: var(--radius); overflow: hidden; background: #0c0d0f; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* a <picture> lays out as its <img> alone, so the image rules above apply as they are */
picture { display: contents; }
.list-rows { display: grid; }
.list-rows > * { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding-block: 20px; border-top: 1px solid var(--line); }
.list-rows > *:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 600px) { .list-rows > * { grid-template-columns: 1fr; gap: 6px; } }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 0.875rem; color: var(--fg-2); }
.notice::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--caution); }

/* ---------- app teaser ---------- */
.appband { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .appband { grid-template-columns: 1fr; } }
.appmark { aspect-ratio: 1; max-width: 420px; width: 100%; margin-inline: auto; border-radius: 23%; border: 1px solid var(--line); background: #1F1F1F; box-shadow: var(--shadow); display: grid; place-items: center; }
.appmark .mark { width: 64%; height: 64%; background-color: #A6A6A8; }
.featurelist { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; }
.featurelist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; padding-block: 16px; border-top: 1px solid var(--line); align-items: start; }
.fl-mark { width: 20px; height: 20px; margin-top: 2px; }
.featurelist li:last-child { border-bottom: 1px solid var(--line); }
.featurelist .data { color: var(--muted); font-size: 0.8125rem; padding-top: 2px; }
.featurelist b { display: block; font-weight: 600; }
.featurelist span { color: var(--fg-2); font-size: 0.9375rem; }

/* ---------- canvas apps (ECAM trainer, cockpit) ---------- */
.app-shell { padding-block: 28px 64px; }
.stage {
  position: relative; background: #0B0C0E; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.stage canvas { display: block; width: 100%; height: auto; touch-action: manipulation; }
.stage canvas.clickable { cursor: pointer; }
.toast {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 10px; font-size: 0.875rem; background: rgba(20,21,24,0.94); color: #F2F3F5;
  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 30px rgba(0,0,0,0.4); pointer-events: none;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.bad { border-color: rgba(240,85,90,0.6); }
.toast.good { border-color: rgba(63,210,122,0.6); }

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

/* ---------- Tech Quiz archive ---------- */
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.quiz-tile {
  display: grid; grid-template-rows: auto 1fr; grid-auto-rows: auto; gap: 14px; min-height: 176px; padding: 18px 18px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.quiz-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.quiz-tile-top { display: flex; justify-content: space-between; align-items: center; }
.quiz-no { font-size: 1.75rem; line-height: 1; }
.quiz-topics { color: var(--fg-2); font-size: 0.8125rem; line-height: 1.45; }
.quiz-tile-foot { display: flex; align-items: end; }
.quiz-score { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; font-size: 0.8125rem; }
.quiz-score .data { font-size: 0.9375rem; }
[aria-pressed="true"].btn-ghost { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }

.quiz-shell { max-width: 820px; padding-block: 40px 96px; display: grid; gap: 24px; }
.quiz-head { display: grid; gap: 14px; }
.quiz-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.debrief { display: grid; gap: 28px; }
.debrief-score { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.debrief-big { font-size: clamp(3rem, 2rem + 4vw, 4.5rem); line-height: 1; color: var(--ok); }
.review { list-style: none; margin: 0; padding: 0; display: grid; }
.review li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-block: 18px; border-top: 1px solid var(--line); }
.review-no { color: var(--muted); font-size: 0.8125rem; padding-top: 3px; }
.review-q { font-weight: 600; line-height: 1.45; }
.review-a { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--fg-2); font-size: 0.9375rem; }
.review-you { font-size: 0.875rem; }

/* ---------- Adaptive Trainer ---------- */
.ring { position: relative; width: 148px; height: 148px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .ring-bg { stroke: var(--line-strong); }
.ring .ring-fg { stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.ring-label b { font-size: 1.75rem; font-weight: 400; }
.ring-label span { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* the front page: one next step, the panel, the systems map */
.tr { padding-block: clamp(36px, 6vw, 72px) clamp(56px, 7vw, 96px); }
.tr-wrap { display: grid; gap: clamp(36px, 5vw, 56px); }
.tr-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.tr-hero > * { min-width: 0; }
.tr-main { display: grid; gap: 18px; justify-items: start; }
.tr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.tr-line > * + *::before { content: "·"; margin-right: 12px; color: var(--muted); }
.tr-name { font: inherit; letter-spacing: inherit; color: var(--fg-2); margin: 0; }
.tr-live { display: inline-flex; align-items: center; color: var(--ok); }
.tr-live::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-left: 8px; box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 80%, transparent); }
.tr-line > span:empty { display: none; }
.tr-title { font-family: var(--font-display); font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; max-width: 15ch; }
.tr-title span { display: block; color: var(--muted); margin-top: 0.12em; }
.tr-title span:empty { display: none; }
.tr-sub { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.6; max-width: 46ch; margin: 0; }
.tr-sub b { color: var(--fg); font-weight: 600; }
.tr-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 6px; }
.tr-meta { font-size: 0.875rem; color: var(--muted); }
.tr-links { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--line); justify-self: stretch; }
.tr-link { font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--fg-2); background: none; border: 0; padding: 4px 0; cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; transition: color .2s ease; }
.tr-link:hover:not([disabled]) { color: var(--fg); }
.tr-link .data { color: var(--muted); font-weight: 500; }
.tr-link[disabled] { opacity: .45; cursor: default; }
.tr-link[aria-expanded="true"] { color: var(--fg); }
.tr-how { display: grid; gap: 14px; justify-self: stretch; animation: sched-in .35s ease; }
.tr-how p { margin: 0; color: var(--fg-2); font-size: 0.9375rem; line-height: 1.6; max-width: 56ch; }
.tr-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tr-ladder li { display: grid; gap: 2px; text-align: center; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--line); }
.tr-ladder b { font-size: 0.9375rem; font-weight: 600; }
.tr-ladder small { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tr-ladder .is-miss { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.tr-ladder .is-miss b { color: var(--warn); }
@media (max-width: 520px) { .tr-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tr-panel { display: grid; gap: 24px; align-content: start; padding: clamp(20px, 2.6vw, 28px); }
.tr-k { font-family: var(--font-data); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0; }
.tr-ring-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.tr-ring { width: 108px; height: 108px; }
.tr-ring .ring-label b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.tr-ring .ring-fg { transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ok) 40%, transparent)); }
.tr-ring-t { display: grid; gap: 6px; }
.tr-ring-t p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
.tr-ring-t b { color: var(--fg); font-weight: 600; }
.tr-block-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.tr-block-h > span:last-child { font-size: 0.8125rem; color: var(--fg-2); }
.tr-log { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; }
.tr-log i { aspect-ratio: 1; max-width: 100%; border-radius: 4px; background: var(--line); }
.tr-log i.on { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.tr-log i.today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--fg) 30%, transparent); }
.tr-log i.on.today { background: var(--ok); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--ok) 60%, transparent); }
.tr-fc { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.tr-fc > div { display: grid; grid-template-rows: auto 56px auto; gap: 4px; text-align: center; }
.tr-fc em { font-style: normal; font-size: 0.6875rem; color: var(--fg-2); }
.tr-fc span { align-self: end; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--steel) 38%, transparent); }
.tr-fc small { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tr-fc .is-today span { background: var(--fg); }
.tr-fc .is-today em { color: var(--fg); font-weight: 600; }
/* a first visit: the panel explains instead of showing empty charts */
.tr.is-first #tr-days-block, .tr.is-first #tr-week-block, .tr.is-first #tr-how-btn, .tr.is-first #tr-how, .tr-first-only { display: none; }
.tr.is-first .tr-first-only { display: block; }
.tr-first-p { margin: 0 0 14px; font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
.tr-panel .tr-ladder { gap: 5px; }
.tr-panel .tr-ladder b { font-size: 0.8125rem; }
.tr-panel .tr-ladder li { padding: 9px 2px; }
@media (min-width: 901px) and (max-width: 1120px) { .tr-panel .tr-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.d-short, .n-short { display: none; }
@media (max-width: 900px) { .tr-hero { grid-template-columns: minmax(0, 1fr); } }

.tr-map-sec { display: grid; gap: 14px; }
.tr-map-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; }
.tr-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.75rem; color: var(--muted); }
.tr-key span { display: inline-flex; align-items: center; gap: 6px; }
.tr-key span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--line-strong); }
.tr-key .k-weak::before { background: var(--caution); }
.tr-key .k-mid::before { background: var(--steel); }
.tr-key .k-strong::before { background: var(--ok); }
.tr-map { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tr-tile { --acc: var(--steel); position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: space-between; gap: 8px; min-height: 116px; min-width: 0; text-align: left;
  padding: 12px 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent); background: var(--bg-2); color: var(--fg); font: inherit; cursor: pointer; transition: border-color .3s ease; }
.tr-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 85% at 50% 125%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 65%); opacity: .55; transition: opacity .45s ease; }
.tr-tile::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--acc) var(--cover, 0%), var(--line) var(--cover, 0%)); }
.tr-tile:hover, .tr-tile[aria-pressed="true"] { border-color: color-mix(in srgb, var(--acc) 65%, transparent); }
.tr-tile:hover::before, .tr-tile[aria-pressed="true"]::before { opacity: 1; }
.tr-tile.is-weak { --acc: var(--caution); }
.tr-tile.is-strong { --acc: var(--ok); }
.tr-tile.is-unseen { --acc: var(--muted); border-color: var(--line); }
.tr-tile.is-unseen::before { opacity: 0; }
.tr-tile.is-unseen:hover, .tr-tile.is-unseen[aria-pressed="true"] { border-color: var(--line-strong); }
.tr-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 18px; }
.tr-code { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; color: var(--acc); white-space: nowrap; }
.tr-due { font-size: 0.625rem; font-weight: 600; color: var(--fg-2); background: var(--line); padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.tr-focus { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #121315; background: var(--caution); padding: 2px 5px; border-radius: 4px; }
.tr-tile-name { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tr-pct { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--acc); }
.tr-tile.is-unseen .tr-pct { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.tr-detail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.tr-detail-t { display: grid; gap: 2px; min-width: 0; }
.tr-detail-t b { font-size: 1rem; font-weight: 600; }
.tr-detail-t span { font-size: 0.8125rem; color: var(--fg-2); }
.tr-foot { font-size: 0.8125rem; margin: 0; }
@media (max-width: 1000px) { .tr-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tr-line .tr-name { flex-basis: 100%; }
  .tr-line .tr-live::before { content: none; margin: 0; }
  .d-long { display: none; } .d-short { display: inline; }
  .tr-map { gap: 6px; }
  .tr-tile { min-height: 92px; padding: 10px 10px 14px; gap: 6px; }
  .tr-tile::after { left: 10px; right: 10px; bottom: 7px; }
  .tr-tile-name { font-size: 0.75rem; }
  .n-long { display: none; } .n-short { display: inline; }
  .tr-pct { font-size: 1.1875rem; }
  .tr-tile.is-unseen .tr-pct { font-size: 0.6875rem; }
  .tr-due { padding: 1px 5px; }
  .tr-focus { font-size: 0.5rem; padding: 2px 4px; letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) { .tr-tile, .tr-tile::before, .tr-ring .ring-fg { transition: none; } .tr-how { animation: none; } }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; font: inherit; }
.linklike.eyebrow { text-decoration: none; font-family: var(--font-display); }
.linklike.danger { color: var(--warn); }

/* ---------- articles index, contact ---------- */
.substack-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }

/* ---------- ECAM trainer ---------- */
.segbar i.done { background: color-mix(in srgb, var(--fg) 35%, transparent); }
.mode-switch { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 14px; }
.mode-switch button { text-align: left; padding: 10px 14px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; }
.mode-switch button b { display: block; font-weight: 600; font-size: 0.9375rem; }
.mode-switch button small { display: block; color: var(--muted); font-size: 0.75rem; }
.mode-switch [aria-checked="true"] { background: var(--invert-bg); color: var(--invert-fg); }
.mode-switch [aria-checked="true"] small { color: color-mix(in srgb, var(--invert-fg) 65%, transparent); }
.scen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.scen { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--surface); transition: border-color .15s ease, transform .15s ease; }
.scen:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.scen-screen { background: #000; padding: 16px 16px 14px; display: grid; gap: 4px; min-height: 76px; align-content: center; border-bottom: 1px solid var(--line); }
.scen-title { font-family: var(--font-cockpit); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em; line-height: 1.3; }
.scen-title.is-warn { color: #FF2D2D; }
.scen-title.is-caut { color: #FFA51F; }
.scen-body { padding: 14px 16px 16px; display: grid; gap: 10px; align-content: start; }
.scen-body p { font-size: 0.8125rem; line-height: 1.45; }

.run-head { display: grid; gap: 10px; margin-bottom: 18px; }
.run-head .linklike { justify-self: start; }
.run-title-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; }
.run-title { font-family: var(--font-cockpit); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: 0.01em; font-weight: 700; }
.run-flight { font-size: 0.875rem; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; color: var(--fg-2); }
.seg [aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-fg); }
.icon-btn.is-off .wave { opacity: 0; }
.icon-btn.is-off { color: var(--muted); }
.run-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .run-grid { grid-template-columns: 1fr; } }
.run-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 1000px) { .run-panel { position: static; } }
.run-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.run-progress .data { font-size: 0.75rem; }
.run-card { display: grid; gap: 12px; }
.run-card p { font-size: 0.9375rem; line-height: 1.5; }
.run-card .btn { justify-self: start; }
.ewd-line { font-family: var(--font-screen); font-size: 0.875rem !important; background: #000; color: #2FD8F5; padding: 10px 12px; border-radius: 8px; overflow-wrap: anywhere; }
.hint { padding: 10px 12px; border-radius: 8px; background: var(--caution-soft); color: var(--fg); font-size: 0.875rem; }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.mini-stats dt { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mini-stats dd { margin: 2px 0 0; }
.run-start { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 9, 11, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 16px; }

/* ---------- cockpit ---------- */
.ck-row { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .ck-row { grid-template-columns: 1fr; } }
.tip { position: absolute; z-index: 2; max-width: 240px; padding: 6px 10px; border-radius: 8px; background: rgba(20,21,24,0.94); color: #F2F3F5; border: 1px solid rgba(255,255,255,0.14); font-family: var(--font-cockpit); font-size: 0.75rem; letter-spacing: .03em; pointer-events: none; white-space: nowrap; }
.positions { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-on { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
.check { display: flex; gap: 10px; align-items: center; font-size: 0.875rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ok); }

/* long labels wrap instead of widening their column */
.quiz-shell > *, .qotd > *, .run-grid > *, .ck-row > *, .bank-dash > *, .grid-2 > *, .appband > * { min-width: 0; }
.qcard-top .chip { white-space: normal; line-height: 1.35; }
@media (max-width: 520px) {
  .opt { grid-template-columns: 30px minmax(0, 1fr); }
  .opt .verdict { grid-column: 2; }
  .opt .verdict:empty { display: none; }
}

/* on a phone the drawn panels pan sideways at a size a finger can use */
.pan-hint { display: none; font-size: 0.8125rem; color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) {
  .stage.pan { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .stage.pan canvas { width: 820px; max-width: none; }
  .stage.pan.pan-wide canvas { width: 1040px; }
  .pan-hint { display: block; }
}
@media (max-width: 760px) { .toast { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 1000px) { .run-grid .run-panel { order: -1; } }
.prose .insights h3 { margin-top: 0; }

/* ---------- the brand band ---------- */
.brand-photo { aspect-ratio: 1; max-width: 560px; }
.brand-photo img { filter: grayscale(1) contrast(1.02); }

/* ---------- the cockpit's areas and displays ---------- */
.ck-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 14px; }
.ck-tabs button { text-align: left; padding: 10px 14px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; min-width: 0; }
.ck-tabs button b { display: block; font-weight: 600; font-size: 0.9375rem; }
.ck-tabs button small { display: block; color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-tabs [aria-selected="true"] { background: var(--invert-bg); color: var(--invert-fg); }
.ck-tabs [aria-selected="true"] small { color: color-mix(in srgb, var(--invert-fg) 65%, transparent); }
@media (max-width: 640px) { .ck-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ck-displays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1280px) { .ck-row.wide .ck-displays { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ck-displays figure { margin: 0; display: grid; gap: 8px; }
.du { background: #000; border-radius: 12px; padding: 10px; border: 1px solid var(--line); box-shadow: inset 0 0 0 6px #15171A; }
.du canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.ck-displays figcaption { font-family: var(--font-data); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ck-title { font-family: var(--font-cockpit); font-size: 1.25rem; letter-spacing: .02em; }
.knob-pop { position: absolute; z-index: 3; min-width: 240px; max-width: calc(100% - 16px); padding: 12px; border-radius: 14px; background: rgba(18,19,22,0.97); color: #F2F3F5; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 16px 40px rgba(0,0,0,0.5); display: grid; gap: 10px; }
.pop-head { display: flex; align-items: baseline; gap: 10px; }
.pop-head b { font-family: var(--font-cockpit); letter-spacing: .03em; font-size: 0.9375rem; }
.pop-head .data { color: #FCE891; font-size: 0.9375rem; margin-left: auto; }
.pop-x { background: none; border: 0; color: rgba(242,243,245,0.7); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.pop-row { display: flex; flex-wrap: wrap; gap: 6px; }
.knob-pop .btn-ghost { color: #F2F3F5; border-color: rgba(242,243,245,0.28); }
.knob-pop .btn-ghost:hover { border-color: #F2F3F5; }
.knob-pop .btn.is-on { background: #F2F3F5; color: #121315; border-color: #F2F3F5; }
.stack > *, .stack-lg > * { min-width: 0; }

/* ---------- your progress ---------- */
.text-ok { color: var(--ok); } .text-caution { color: var(--caution); } .text-warn { color: var(--warn); }
.pg-small { font-size: 0.8125rem; }
.rule-label::after { order: 1; }
.rule-label > :not(:first-child) { order: 2; }
.pg-link { text-decoration: none; color: var(--fg-2); }
.pg-link:hover { color: var(--fg); }
.pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-strong); }
.pg-stats > div { padding: 18px 18px 0 0; display: grid; gap: 4px; align-content: start; }
.pg-stats > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.pg-stats dt { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pg-stats dd { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.1; }
.pg-stats dd.pg-sub, .pg-facts dd.pg-sub { font-size: 0.8125rem; margin: 0; line-height: 1.4; }
@media (max-width: 680px) {
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .pg-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 18px; }
}
.pg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.heat-scroll { overflow-x: auto; padding-bottom: 4px; }
.heat { --gap: 4px; display: grid; gap: 6px; min-width: 330px; }
.heat-months, .heat-grid { display: grid; grid-template-columns: repeat(26, minmax(8px, 22px)); column-gap: var(--gap); }
.heat-months { font-size: 0.6875rem; color: var(--muted); height: 1.1em; }
.heat-months span { white-space: nowrap; }
.heat-grid { grid-template-rows: repeat(7, auto); grid-auto-flow: column; row-gap: var(--gap); }
.heat i, .heat-legend i { display: block; border-radius: 3px; background: var(--line); }
.heat i { aspect-ratio: 1; width: 100%; max-width: 100%; }
.heat-legend i { width: 11px; height: 11px; }
.heat i.heat-future { background: transparent; }
.heat i.is-today { outline: 1px solid var(--fg-2); outline-offset: 1px; }
.heat .l1, .heat-legend .l1 { background: color-mix(in srgb, var(--ok) 28%, transparent); }
.heat .l2, .heat-legend .l2 { background: color-mix(in srgb, var(--ok) 50%, transparent); }
.heat .l3, .heat-legend .l3 { background: color-mix(in srgb, var(--ok) 75%, transparent); }
.heat .l4, .heat-legend .l4 { background: var(--ok); }
.heat-legend { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; justify-content: flex-start; }
.pg-activity { display: grid; grid-template-columns: minmax(0, auto) minmax(180px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pg-facts { margin: 0; display: grid; gap: 18px; align-content: start; border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }
.pg-facts dt { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pg-facts dd { margin: 4px 0 0; font-size: 1.5rem; line-height: 1.15; }
@media (max-width: 900px) {
  .pg-activity { grid-template-columns: 1fr; }
  .pg-facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pg-facts dd { font-size: 1.25rem; }
  .pg-facts dt { letter-spacing: 0.12em; }
}
.heat-legend span { margin-inline: 4px; }
@media (min-width: 900px) { .heat { --gap: 5px; } }
.pg-systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
@media (max-width: 760px) { .pg-systems { grid-template-columns: 1fr; } }
.pg-pair > .stack { align-content: start; }
.pg-sys {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(60px, 120px) 40px; gap: 14px; align-items: center;
  padding-block: 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.pg-sys:hover .pg-sys-name b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.pg-sys-name { display: grid; min-width: 0; }
.pg-sys-name b { font-weight: 600; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sys-name .muted { font-size: 0.75rem; }
.pg-pct { font-size: 0.8125rem; text-align: right; color: var(--fg-2); }
@media (max-width: 560px) {
  .pg-sys { grid-template-columns: 48px minmax(0, 1fr) 40px; row-gap: 8px; }
  .pg-sys .bar { grid-column: 2; grid-row: 2; }
  .pg-sys .pg-pct { grid-column: 3; grid-row: 1; }
  .pg-sys-name b { white-space: normal; }
}
.pg-list { display: grid; }
.pg-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding-block: 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; min-width: 0;
}
.pg-row:hover .pg-row-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.pg-row-name { display: flex; gap: 10px; align-items: baseline; min-width: 0; font-size: 0.9375rem; }
.pg-next .pg-row-name { font-weight: 600; }
.ecam-name { font-family: var(--font-cockpit); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em; }
.ecam-name.is-caut { color: var(--caution); }
.ecam-name.is-warn { color: var(--warn); }
.pg-code { width: 100%; font-family: var(--font-screen); font-size: 0.75rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--fg-2); resize: none; word-break: break-all; }
.pg-import { display: grid; gap: 8px; }
.pg-import label { font-weight: 600; }
.pg-import-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-import-row input {
  flex: 1 1 220px; min-width: 0; min-height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--fg); font-family: var(--font-data); font-size: 0.8125rem;
}
.pg-import-row input:focus { outline: 2px solid var(--fg-2); outline-offset: 1px; }
.icon-btn[aria-current="page"] { color: var(--fg); border-color: var(--fg-2); }

/* ---------- cockpit: find a control ---------- */
.ck-find { position: relative; display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 0 12px 0 14px; min-height: 46px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.ck-find:focus-within { border-color: var(--fg-2); }
.ck-find > svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.ck-find input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 0.9375rem; padding: 12px 0; outline: none; }
.ck-find input::placeholder { color: var(--muted); }
.ck-find kbd { font-family: var(--font-data); font-size: 0.75rem; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 6px; }
@media (hover: none) { .ck-find kbd { display: none; } }
.ck-results {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); max-height: 360px; overflow-y: auto;
}
.ck-results li { display: grid; gap: 2px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.ck-results li b { font-weight: 600; font-size: 0.9375rem; }
.ck-results li span { font-size: 0.8125rem; color: var(--muted); }
.ck-results li[aria-selected="true"] { background: var(--surface-2); }
.ck-results li.ck-none { cursor: default; color: var(--muted); font-size: 0.875rem; }
#ck-panel:focus { outline: none; }
#ck-panel:focus-visible { outline: 2px solid var(--fg-2); outline-offset: 2px; }

/* ---------- cockpit: guided tours ---------- */
.ck-tools { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 14px 24px; align-items: center; }
@media (max-width: 980px) { .ck-tools { grid-template-columns: 1fr; } }
.ck-tours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ck-tours .eyebrow { margin-right: 6px; }
.chip-btn {
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); cursor: pointer;
  min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chip-btn:hover { border-color: var(--fg-2); color: var(--fg); }
.chip-btn[aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
.tour-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tour-head .data { white-space: nowrap; }
.tour-bar { margin: 2px 0 4px; }
.tour-after { border-left: 2px solid var(--ok); padding-left: 12px; color: var(--fg); }

/* the memory strip on a quiz tile: a mark per question, by its box */
.qstrip { display: flex; gap: 2px; }
.qstrip i { flex: 1; height: 6px; border-radius: 2px; background: var(--line); }
.qstrip i.b1 { background: color-mix(in srgb, var(--ok) 25%, transparent); }
.qstrip i.b2 { background: color-mix(in srgb, var(--ok) 42%, transparent); }
.qstrip i.b3 { background: color-mix(in srgb, var(--ok) 62%, transparent); }
.qstrip i.b4 { background: color-mix(in srgb, var(--ok) 82%, transparent); }
.qstrip i.b5 { background: var(--ok); }
.qstrip i.miss { background: var(--warn); opacity: .75; }

/* ---------- ECAM Trainer: the procedure, ticked off ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.proc { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.proc-head { display: flex; justify-content: space-between; align-items: baseline; }
.proc-head .data { font-size: 0.75rem; }
.proc-list { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 2px; background: #000; border-radius: 10px; max-height: min(34vh, 300px); overflow-y: auto; font-family: var(--font-screen); font-size: 0.75rem; line-height: 1.5; }
.proc-title { font-family: "B612", var(--font-screen); font-weight: 700; letter-spacing: .02em; padding: 4px 0 2px; }
.proc-title.is-caut { color: #FFA51F; } .proc-title.is-warn { color: #FF2D2D; }
.proc-line { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 2px 4px; border-radius: 5px; color: #2FD8F5; overflow-wrap: anywhere; }
.proc-line.k-read { color: #E8EAED; }
.proc-line.k-clr { color: #E8EAED; opacity: .85; }
.proc-tick { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(232,234,237,.35); transform: translateY(1px); }
.proc-line.is-done { color: rgba(232,234,237,.55); }
.proc-line.is-done .proc-tick { border: 0; background: #3FD27A; -webkit-mask: none; position: relative; }
.proc-line.is-done .proc-tick::after { content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border: solid #000; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.proc-line.is-now { background: rgba(255,255,255,.08); }
.proc-line.is-now .proc-tick { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.proc-more { color: rgba(232,234,237,.55); font-family: var(--font-body); font-size: 0.75rem; padding: 6px 4px 2px; }
@media (max-width: 980px) { .proc-list { max-height: none; } }

/* ---------- A320 Systems Questions's chapters ---------- */
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.chapter-tile { display: grid; gap: 14px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.chapter-head { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.chapter-head:hover .h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.chapter-head .data { font-size: 0.6875rem; letter-spacing: 0.08em; }
.parts { display: flex; flex-wrap: wrap; gap: 6px; }
.part {
  min-width: 32px; height: 28px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 7px;
  border: 1px solid var(--line-strong); font-family: var(--font-data); font-size: 0.75rem; color: var(--fg-2); text-decoration: none;
}
.part:hover { border-color: var(--fg-2); color: var(--fg); }
.part.is-done { border-color: color-mix(in srgb, var(--ok) 55%, transparent); color: var(--ok); }
.part.is-full { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

/* ---------- the airline band (home) ----------
   Two copies of the list side by side scroll as one; at -50% the second copy sits exactly where
   the first began, so the loop never jumps. Each logo is a mask painted in one colour, sized by
   --h (in band ems, so that every logo covers about the same area) and --r (its proportions). */
.airlines { padding-block: clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--line); background: var(--bg); }
.airlines-head { display: flex; justify-content: center; margin-bottom: clamp(22px, 3vw, 34px); }
.airlines-head .eyebrow { color: var(--muted); text-align: center; text-wrap: balance; }
@media (max-width: 640px) { .airlines-head .eyebrow { letter-spacing: 0.2em; } }
.marquee {
  --band: clamp(22px, 1.6vw + 14px, 30px);
  display: flex; overflow: hidden; font-size: var(--band);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; animation: al-scroll 75s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-track li { display: flex; align-items: center; padding-inline: clamp(22px, 2.6vw, 42px); height: 2.2em; }
.marquee-track .al { position: relative; display: block; height: calc(var(--h) * 1em); width: calc(var(--h) * var(--r) * 1em); }
/* pointed at, a logo shows in its own colours: the same SVG as an image, faded in over its one-tone mask */
.marquee-track .al img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s ease; }
.marquee-track li:hover .al img { opacity: 1; }
.marquee-track li:hover .al i { opacity: 0; }
.marquee-track i {
  position: relative; display: block; width: 100%; height: 100%;
  background-color: var(--fg-2); opacity: 0.72;
  /* the logo itself is the mask-image, set on each one (a url() in a custom property would
     resolve against this stylesheet's folder, not the page's) */
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: opacity .3s ease, background-color .3s ease;
}

@keyframes al-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; padding-inline: 16px; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; flex: 1 1 100%; row-gap: 10px; }
  .marquee-copy { display: none; }
}

/* ---------- about ---------- */
/* ---------- the Company page (about.html) ----------
   The night flight deck full width, the title and who we are over it; then the team's story with
   its three values; what we make as a bento (the platform large, YouTube and the newsletter beside
   it); how we check our content, with its sources; and a way in on the flight deck's dark ground. */
/* the captain's shoulder on the right two-thirds, feathered into the dark behind the words */
.ab-hero .ab-hero-photo { left: 36%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.ab-hero .ab-hero-photo img { object-position: 38% 50%; filter: saturate(0.92) contrast(1.04) brightness(0.92); }
.ab-hero::before { background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.55) 0%, rgba(10, 11, 13, 0.1) 60%, rgba(10, 11, 13, 0) 100%),
    linear-gradient(0deg, rgba(10, 11, 13, 0.85) 0%, rgba(10, 11, 13, 0) 40%); }
.ab-hero-inner { min-height: clamp(560px, 80vh, 800px); display: flex; flex-direction: column; justify-content: flex-end; padding-block: clamp(96px, 14vw, 160px) clamp(52px, 7vw, 96px); }
.ab-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #3FE07F; }
.ab-hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.ab-hero-title { margin-top: 22px; max-width: 16ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem); line-height: 0.98; letter-spacing: -0.045em; color: #fff; text-wrap: balance; }
.ab-hero-title span { display: block; color: rgba(242, 243, 245, 0.5); }
.ab-hero-lede { margin-top: 26px; max-width: 44ch; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.6; color: rgba(242, 243, 245, 0.8); }
.ab-hero-cta { margin-top: 38px; gap: 12px; }
/* who we are */
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ab-story-head { display: grid; gap: 16px; }
.ab-story-head .h2 { max-width: 14ch; letter-spacing: -0.03em; text-wrap: balance; }
.ab-story-copy { display: grid; gap: 22px; padding-top: 6px; }
.ab-story-copy p { color: var(--fg); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.65; letter-spacing: -0.005em; max-width: 52ch; }
.ab-values { list-style: none; margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.ab-values li { display: grid; gap: 10px; align-content: start; padding: 32px clamp(20px, 3vw, 36px) 8px 0; min-width: 0; }
.ab-values li + li { padding-left: clamp(20px, 3vw, 36px); border-left: 1px solid var(--line); }
.ab-value-ico { width: 44px; height: 44px; margin-bottom: 8px; border-radius: 13px; display: grid; place-items: center; color: var(--ok); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.ab-value-ico svg { width: 22px; height: 22px; }
.ab-values b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; }
.ab-values p { color: var(--fg-2); font-size: 0.9375rem; line-height: 1.6; max-width: 34ch; }
/* what we make: a bento */
.ab-bento { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
.ab-tile { position: relative; display: grid; align-content: start; gap: 12px; min-width: 0; padding: clamp(26px, 3vw, 36px); border-radius: 24px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  transition: border-color .35s ease, transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.ab-tile:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.6); }
.ab-tile:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.ab-tile .h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.ab-tile p { color: var(--fg-2); font-size: 0.9375rem; line-height: 1.6; max-width: 46ch; }
.ab-tile .tool-go { margin-top: 8px; }
.ab-tile-ico { width: 46px; height: 46px; margin-bottom: 10px; border-radius: 14px; display: grid; place-items: center; color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--line); transition: color .35s ease, border-color .35s ease, background-color .35s ease; }
.ab-tile-ico svg { width: 22px; height: 22px; }
.ab-tile:hover .ab-tile-ico { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); }
.ab-tile-main { grid-row: span 2; padding: 0; overflow: hidden; align-content: stretch; grid-template-rows: auto 1fr; gap: 0; }
.ab-tile-shot { aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: #0c0d0f; border-bottom: 1px solid var(--line); }
.ab-tile-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ab-tile-main:hover .ab-tile-shot img { transform: scale(1.03); }
.ab-tile-body { display: grid; gap: 12px; align-content: start; padding: clamp(26px, 3vw, 36px); }
/* accuracy */
.ab-accuracy-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ab-accuracy-intro { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 32px); display: grid; gap: 16px; }
.ab-accuracy-intro > p { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.65; max-width: 44ch; }
.ab-accuracy-photo { margin-top: 14px; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 22px; }
.ab-principles { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: none; }
.ab-principles li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 8px; padding-block: 30px; border-top: 1px solid var(--line); }
.ab-principles li:first-child { border-top-color: var(--line-strong); }
.ab-principles li:last-child { border-bottom: 1px solid var(--line); }
.ab-n { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--ok); padding-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ab-principles b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; }
.ab-principles p { margin-top: 10px; color: var(--fg-2); font-size: 1rem; line-height: 1.65; max-width: 56ch; }
/* the way in */
.ab-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end;
  padding: clamp(32px, 5vw, 64px); border-radius: 28px; color: #F2F3F5; background: #0A0C0B; border: 1px solid rgba(63, 224, 127, 0.22);
  box-shadow: 0 0 70px rgba(63, 224, 127, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.ab-cta::before { content: ""; position: absolute; inset: -40% 30% auto -10%; height: 140%; z-index: -1; background: radial-gradient(closest-side, rgba(63, 224, 127, 0.14), transparent); pointer-events: none; }
.ab-cta-mark { position: absolute; z-index: -1; right: -70px; bottom: -90px; width: 340px; height: 340px; opacity: 0.07; background-color: #A6A6A8; pointer-events: none; }
.ab-cta-copy { display: grid; gap: 14px; }
.ab-cta .eyebrow { color: #3FE07F; }
.ab-cta .h2 { max-width: 16ch; color: #fff; letter-spacing: -0.03em; text-wrap: balance; }
.ab-cta p { color: rgba(242, 243, 245, 0.72); max-width: 46ch; line-height: 1.6; }
.ab-cta .btn-primary { background: #F2F3F5; color: #121315; box-shadow: inset 0 1px 0 #fff, 0 12px 32px -14px rgba(0, 0, 0, 0.8); }
.ab-cta .btn-primary::before { background: linear-gradient(105deg, transparent 30%, rgba(18, 19, 21, 0.08) 48%, transparent 66%); }
.ab-cta .btn-ghost { color: #F2F3F5; border-color: rgba(242, 243, 245, 0.3); background: rgba(242, 243, 245, 0.05); }
.ab-cta .btn-ghost:hover { border-color: rgba(242, 243, 245, 0.7); background: rgba(242, 243, 245, 0.1); }
.ab-note { margin-top: 28px; max-width: 760px; font-size: 0.8125rem; line-height: 1.65; color: var(--muted); }
.ab-note b { color: var(--fg-2); }
.ab-note a { color: var(--fg-2); text-underline-offset: 3px; }
@media (max-width: 900px) {
  .ab-story-grid, .ab-accuracy-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-accuracy-intro { position: static; }
  .ab-bento { grid-template-columns: minmax(0, 1fr); }
  .ab-tile-main { grid-row: auto; }
  .ab-cta { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 900px) {
  .ab-hero { --ph: clamp(280px, 78vw, 480px); }
  .ab-hero .ab-hero-photo { left: 0; bottom: auto; height: var(--ph); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .ab-hero-inner { min-height: 0; padding-top: calc(var(--ph) - 56px); }
  .ab-hero .ab-hero-photo img { object-position: 46% 50%; }
  .ab-hero::before { background: linear-gradient(0deg, rgba(10, 11, 13, 0.9) 0%, rgba(10, 11, 13, 0) 50%); }
}
@media (max-width: 720px) {
  .ab-values { grid-template-columns: minmax(0, 1fr); }
  .ab-values li, .ab-values li + li { padding: 26px 0; border-left: 0; }
  .ab-values li + li { border-top: 1px solid var(--line); }
  .ab-hero-inner { min-height: clamp(520px, 86vh, 720px); }
}
@media (prefers-reduced-motion: reduce) { .ab-tile, .ab-tile-shot img { transition: none; } .ab-tile:hover { transform: none; } }
/* the Contact page: the Company page's parts, with the audio panel's CALL lights in its hero */
.ct-hero .ab-hero-photo img { object-position: 74% 50%; }
.ct-write { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line-strong); }
.ct-write-copy { display: grid; gap: 14px; min-width: 0; }
.ct-write-copy .h2 { letter-spacing: -0.03em; text-wrap: balance; }
.ct-write-copy p { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.6; max-width: 48ch; }
.ct-write-act { display: flex; flex-wrap: wrap; gap: 12px; }
.ct-copy { gap: 9px; }
.ct-copy svg { width: 16px; height: 16px; flex: none; }
.ct-copy.is-copied { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ct-org { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 32px; align-items: center;
  padding: clamp(28px, 4vw, 44px); border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ct-org::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--ok), transparent); opacity: .6; }
.ct-org .ab-value-ico { margin: 0; align-self: start; width: 56px; height: 56px; border-radius: 16px; }
.ct-org .ab-value-ico svg { width: 26px; height: 26px; }
.ct-org-copy { display: grid; gap: 10px; }
.ct-org .h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; }
.ct-org p { color: var(--fg-2); max-width: 60ch; line-height: 1.6; }
@media (max-width: 900px) {
  .ct-hero .ab-hero-photo img { object-position: 70% 50%; }
  .ct-write, .ct-org { grid-template-columns: minmax(0, 1fr); }
  .ct-org .btn { justify-self: start; }
}

/* ---------- the world map (home) ----------
   The countries as solid shapes: the rest of the world in a quiet tone, the pilots' countries in
   ECAM green, each with a marker that breathes. Pointing at a country lifts it and dims the rest. */
.pilots { --wm-on: var(--ok); }
.pilots-head { display: grid; justify-items: center; text-align: center; gap: 14px; margin-bottom: clamp(26px, 4vw, 48px); }
.pilots-head .h2 { max-width: 25ch; text-wrap: balance; }
.worldmap { position: relative; max-width: 1100px; margin-inline: auto; }
.worldmap > svg, .worldmap > .wm-static { display: block; width: 100%; height: auto; overflow: visible; }
.wm-land { fill: color-mix(in srgb, var(--fg) 10%, var(--bg)); stroke: var(--bg); stroke-width: 0.6; stroke-linejoin: round; }
.wm-shape {
  fill: color-mix(in srgb, var(--wm-on) 46%, var(--bg)); stroke: var(--bg); stroke-width: 0.6; stroke-linejoin: round;
  cursor: pointer; transition: fill .35s ease;
}
.wm-pin { fill: var(--wm-on); stroke: var(--bg); stroke-width: 1.1; transition: r .3s var(--ease-out); }
.wm-pulse { fill: var(--wm-on); opacity: 0; transform-box: fill-box; transform-origin: center; animation: wm-pulse 3.2s ease-out infinite; animation-delay: calc(var(--i) * -0.29s); pointer-events: none; }
.wm-hit { fill: transparent; cursor: pointer; }
@keyframes wm-pulse { 0% { opacity: 0.5; transform: scale(0.6); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
.worldmap.has-active .wm-c:not(.is-active) .wm-shape { fill: color-mix(in srgb, var(--wm-on) 22%, var(--bg)); }
.worldmap.has-active .wm-c:not(.is-active) .wm-pin { opacity: 0.45; }
.wm-c.is-active .wm-shape { fill: var(--wm-on); }
.wm-c.is-active .wm-pin { r: 3.6; }
.wm-tip {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 14px));
  padding: 7px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600;
  background: var(--invert-bg); color: var(--invert-fg); box-shadow: 0 10px 26px -12px rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: reduce) { .wm-pulse { animation: none; } }

/* ---------- the hero's figures ----------
   Large, light numerals with a short ECAM-green rule and a line of context under each. With the
   script, the digits roll in like an odometer (each column a strip of 0-9 that slides to its
   digit, the right-hand columns turning more), then the green plus turns into place. */
.figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 34px); margin-bottom: clamp(30px, 4vw, 50px); border-top: 1px solid rgba(242,243,245,0.16); text-align: left;
}
.figure { display: grid; gap: 16px; align-content: start; min-width: 0; color: inherit; text-decoration: none; }
.fig-n {
  display: flex; align-items: flex-start; font-weight: 300; font-size: clamp(2.5rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1; letter-spacing: -0.045em; white-space: nowrap; color: #FFFFFF; font-variant-numeric: tabular-nums;
}
.fig-v {
  display: inline-flex; padding-block: 0.06em; margin-block: -0.06em;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, rgba(0,0,0,0.6)); mask-image: linear-gradient(180deg, #000 35%, rgba(0,0,0,0.6));
}
.fig-plus { display: inline-block; margin-left: 0.04em; color: var(--hero-on, #3FE07F); font-weight: 400; transform-origin: 50% 55%; }
.fig-lab { display: grid; gap: 4px; font-size: 0.9375rem; font-weight: 500; color: rgba(242,243,245,0.82); }
.fig-lab::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: #3FE07F; margin-bottom: 8px; transform-origin: 0 50%; }
.fig-ext { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.45em; vertical-align: 0.04em; background: currentColor; opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
a.figure .fig-lab { transition: color .25s ease; }
a.figure:hover .fig-lab, a.figure:focus-visible .fig-lab { color: #FFFFFF; }
a.figure:focus-visible { outline: 2px solid #F2F3F5; outline-offset: 6px; border-radius: 6px; }
@media (max-width: 760px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .fig-n { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 2.75rem); }
  .fig-lab { font-size: 0.8125rem; }
}
/* the odometer: a column per digit, its strip of digits slides to place */
.od-col { position: relative; display: inline-block; height: 1.12em; overflow: hidden; }
.od-strip { display: flex; flex-direction: column; will-change: transform; }
.od-strip > span { display: block; height: 1.12em; line-height: 1.12em; text-align: center; }
.od-sep { display: inline-block; line-height: 1.12em; }
/* until the script has built the odometer, the digits and plus wait (2.5 s at most, should it fail) */
.js .figures:not(.is-armed):not(.is-static) .fig-v, .js .figures:not(.is-armed):not(.is-static) .fig-plus { opacity: 0; animation: fig-show 0s 2.5s forwards; }
@keyframes fig-show { to { opacity: 1; } }
/* armed: the script has built the odometer and holds the figures at their start */
.figures.is-armed .fig-plus { opacity: 0; transform: scale(0.3) rotate(-90deg); filter: blur(6px); }
.figures.is-armed .fig-lab::before { transform: scaleX(0); }
.figures.is-armed .fig-lab > * { opacity: 0; transform: translateY(8px); }
.figures.is-armed .fig-lab { color: rgba(242,243,245,0); }
.figures.is-run .fig-lab { color: rgba(242,243,245,0.82); transition: color .7s ease calc(var(--d) + 0.25s); }
.figures.is-run .fig-lab > * { opacity: 1; transform: none; transition: opacity .7s ease calc(var(--d) + 0.3s), transform .8s var(--ease-out) calc(var(--d) + 0.3s); }
.figures.is-run .fig-lab::before { transform: scaleX(1); transition: transform .9s var(--ease-out) calc(var(--d) + 0.15s); }
.figures.is-run .fig-plus { animation: fig-plus 1.1s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--d) + 1.35s); }
@keyframes fig-plus {
  0% { opacity: 0; transform: scale(0.3) rotate(-90deg); filter: blur(6px); text-shadow: 0 0 0 rgba(63,224,127,0); }
  55% { opacity: 1; transform: scale(1.18) rotate(6deg); filter: blur(0); text-shadow: 0 0 22px rgba(63,224,127,0.85); }
  78% { transform: scale(0.96) rotate(-2deg); }
  100% { opacity: 1; transform: none; filter: blur(0); text-shadow: 0 0 0 rgba(63,224,127,0); }
}
@media (prefers-reduced-motion: reduce) { .figures.is-run .fig-plus { animation: none; opacity: 1; transform: none; filter: none; } }

/* ---------- the articles band (home) ----------
   The cards scroll as one loop, like the airline band: two copies side by side, the second
   hidden from screen readers, fading at both edges and pausing under the pointer or focus. */
.amarquee {
  display: flex; overflow: hidden; padding-block: 12px 44px; margin-block: -12px -44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.amarquee-track { display: flex; flex: none; animation: al-scroll 70s linear infinite; }
.amarquee:hover .amarquee-track, .amarquee:focus-within .amarquee-track { animation-play-state: paused; }
.amarquee-track { align-items: stretch; }
.amarquee-track .acard { flex: none; width: clamp(290px, 29vw, 400px); margin-right: 22px; }
@media (prefers-reduced-motion: reduce) {
  .amarquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .amarquee-track { animation: none; }
  .amarquee-copy { display: none; }
}

/* the top bar's link to another site (YouTube) carries a small outbound arrow */
.nav-ext { display: inline-block; width: 0.55em; height: 0.55em; margin-left: 0.4em; vertical-align: 0.1em; background: currentColor; opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .25s ease, transform .35s var(--ease-out); }
a:hover .nav-ext { opacity: 1; transform: translate(1px, -1px); }
/* the wordmark's propeller turns while the pointer is on the wordmark (site.js) */
/* it turns about its hub, which sits below the middle of the drawing: (526, 586) of mark.svg's 1056 x 1016,
   drawn centred in a square box, is 49.8% across and 57.4% down it */
.brand-mark { transform-origin: 49.8% 57.4%; will-change: transform; }

/* ---------- the Tech Quiz sign-up (home) ----------
   One card: the offer on the left, the email field and its button as one pill on the right, the
   propeller mark large and faint in the corner. Stacks on a phone. */
.subscribe {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4.5vw, 56px); border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ok) 9%, var(--surface)) 0%, var(--surface) 55%);
  border: 1px solid var(--line);
}
.subscribe-mark { position: absolute; z-index: -1; right: -60px; top: -70px; width: 300px; height: 300px; opacity: 0.08; pointer-events: none; }
.subscribe-copy { display: grid; gap: 14px; min-width: 0; }
.subscribe-copy .h2 { max-width: 18ch; text-wrap: balance; }
.subscribe-copy .lede { max-width: 40ch; }
.subscribe-try { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-weight: 600; font-size: 0.9375rem; color: var(--ok); text-decoration: none; }
.subscribe-try:hover { text-decoration: underline; text-underline-offset: 4px; }
.subscribe-form { display: grid; gap: 12px; min-width: 0; }
.subscribe-field {
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line-strong);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.subscribe-field:focus-within { border-color: color-mix(in srgb, var(--fg) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 8%, transparent); }
.subscribe-field input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; outline: 0; background: transparent;
  font: 500 1rem var(--font-body); color: var(--fg);
}
.subscribe-field input::placeholder { color: var(--muted); }
.subscribe-field .btn { flex: none; min-height: 44px; }
.subscribe-note { font-size: 0.8125rem; color: var(--muted); padding-left: 18px; min-height: 1.4em; }
.subscribe-note.is-error { color: var(--warn); }
.subscribe-note.is-done { color: var(--ok); }
.subscribe-field.is-error { border-color: var(--warn); }
@media (max-width: 820px) { .subscribe { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
  .subscribe-field { flex-wrap: wrap; border-radius: 22px; }
  .subscribe-field input { flex-basis: 100%; }
  .subscribe-field .btn { width: 100%; }
}

/* ---------- FAQs ----------
   A search field under the title; the topics down the left (a row of pills on a phone), each
   lighting up as its group passes; the questions as rows that open smoothly (faq.js). */
/* the header: the panel on an approach (the E/WD, the gear panel and the ND), dark in both themes;
   the words and the search over its darker left side, the gear lights and the ND glowing beyond */
.faq-hero { position: relative; isolation: isolate; overflow: hidden; color: #F2F3F5; background: #0B0C0E;
  padding-block: clamp(84px, 11vw, 148px) clamp(64px, 8vw, 112px); }
.faq-hero-photo { position: absolute; inset: 0; z-index: -2; }
.faq-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 62%; filter: saturate(0.95) contrast(1.05);
  animation: hero-settle 2.8s cubic-bezier(.2, .7, .2, 1) both; }
.faq-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
    linear-gradient(90deg, rgba(11, 12, 14, 0.96) 0%, rgba(11, 12, 14, 0.9) 42%, rgba(11, 12, 14, 0.5) 66%, rgba(11, 12, 14, 0.2) 100%),
    linear-gradient(0deg, rgba(11, 12, 14, 0.85) 0%, rgba(11, 12, 14, 0) 38%),
    linear-gradient(180deg, rgba(11, 12, 14, 0.55) 0%, rgba(11, 12, 14, 0) 30%); }
.faq-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1; background: linear-gradient(90deg, rgba(63, 224, 127, 0.5), transparent 70%); }
.faq-lit { display: inline-flex; align-items: center; gap: 10px; color: #3FE07F; }
.faq-lit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.faq-hero .h1 { margin-top: 20px; max-width: 13ch; color: #FFFFFF; letter-spacing: -0.035em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); }
.faq-hero .lede { margin-top: 20px; max-width: 46ch; color: rgba(242, 243, 245, 0.8); }
.faq-hero .faq-search svg { z-index: 1; color: rgba(242, 243, 245, 0.6); }
.faq-hero .faq-search input { color: #FFFFFF; background: rgba(14, 15, 17, 0.6); border-color: rgba(242, 243, 245, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px -20px rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.faq-hero .faq-search input::placeholder { color: rgba(242, 243, 245, 0.5); }
.faq-hero .faq-search input:focus { border-color: rgba(242, 243, 245, 0.6); box-shadow: 0 0 0 4px rgba(242, 243, 245, 0.1); }
.faq-hero .faq-search:focus-within svg { color: #FFFFFF; }
.faq-hero .faq-found { color: rgba(242, 243, 245, 0.6); }
@media (max-width: 720px) {
  .faq-hero-photo img { object-position: 72% 60%; }
  .faq-hero::before { background: linear-gradient(180deg, rgba(11, 12, 14, 0.7) 0%, rgba(11, 12, 14, 0.82) 55%, rgba(11, 12, 14, 0.95) 100%); }
}
.faq-search { position: relative; display: flex; align-items: center; max-width: 560px; margin-top: 32px; }
.faq-search svg { position: absolute; left: 20px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; transition: color .25s ease; }
.faq-search input {
  width: 100%; height: 56px; padding: 0 116px 0 52px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--fg); font: 500 1rem var(--font-body); -webkit-appearance: none; appearance: none;
  transition: border-color .25s ease, box-shadow .3s ease;
}
.faq-search input::placeholder { color: var(--muted); }
.faq-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-search input:focus { outline: none; border-color: color-mix(in srgb, var(--fg) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 8%, transparent); }
.faq-search:focus-within svg { color: var(--fg); }
.faq-found { position: absolute; right: 24px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.faq-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-index { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 32px); display: grid; gap: 2px; min-width: 0; }
.faq-index .eyebrow { margin-bottom: 12px; }
.faq-index a {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 10px; text-decoration: none;
  font-weight: 500; font-size: 0.9rem; color: var(--fg-2); transition: color .25s ease, background-color .25s ease, opacity .25s ease;
}
.faq-index a span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .25s ease; }
.faq-index a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.faq-index a[aria-current="true"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.faq-index a[aria-current="true"] span { color: var(--ok); }
.faq-index a.is-empty { opacity: 0.35; pointer-events: none; }
.faq-groups { display: grid; gap: clamp(48px, 6vw, 72px); min-width: 0; }
.faq-group { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px); }
.faq-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); }
.faq-n { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.faq { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 6px; }
.faq-plus { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong);
  transition: background-color .3s ease, border-color .3s ease, transform .5s var(--ease-out); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px;
  border-radius: 2px; background: var(--fg); transition: transform .5s var(--ease-out), background-color .3s ease; }
.faq-plus::after { transform: rotate(90deg); }
.faq summary:hover .faq-plus { border-color: color-mix(in srgb, var(--fg) 55%, transparent); }
.faq[open] .faq-plus { background: var(--fg); border-color: var(--fg); transform: rotate(180deg); }
.faq[open] .faq-plus::before, .faq[open] .faq-plus::after { background: var(--bg); }
.faq[open] .faq-plus::after { transform: rotate(0deg); }
.faq-a p { margin: 0; padding: 0 56px 26px 0; max-width: 68ch; color: var(--fg-2); line-height: 1.7; }
.faq-a a { color: var(--fg); text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color .25s ease; }
.faq-a a:hover { text-decoration-color: currentColor; }
.faq mark { color: inherit; background: var(--ok-soft); box-shadow: inset 0 -1.5px 0 var(--ok); border-radius: 3px; padding: 0 1px; }
.faq.is-flash { animation: faq-flash 1.8s ease; }
@keyframes faq-flash { 0%, 30% { background: var(--ok-soft); } 100% { background: transparent; } }
.faq-empty { display: grid; gap: 8px; padding: 32px 0; color: var(--fg-2); }
.faq-empty a { color: var(--fg); }
.faq-more {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4.5vw, 56px); border-radius: calc(var(--radius) + 6px); border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ok) 9%, var(--surface)) 0%, var(--surface) 55%);
}
.faq-more-mark { position: absolute; z-index: -1; right: -60px; top: -70px; width: 300px; height: 300px; opacity: 0.08; pointer-events: none; }
.faq-more .h2 { max-width: 18ch; text-wrap: balance; }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-index { position: static; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .faq-index::-webkit-scrollbar { display: none; }
  .faq-index .eyebrow { display: none; }
  .faq-index a { flex: none; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }
  .faq-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .faq-search input { padding-right: 96px; }
  .faq summary { font-size: 1rem; gap: 16px; }
  .faq-a p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .faq-plus, .faq-plus::before, .faq-plus::after { transition: none; } .faq.is-flash { animation: none; } }

/* ---------- pricing ----------
   Two plans as cards: Free on the page's surface, A320 Knowledge+ on the flight deck at night
   with a green beam circling its border and its glow breathing. The cards share their rows
   (subgrid), so the names, prices, buttons and lists line up across them. Behind the cards a
   spotlight follows the pointer. Then the route for training organisations and the billing
   questions. pricing.js: the billing switch and the price counting to its new value, the
   entrance, the tilt and the spotlight. */
@property --pr-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pr { --ecam: #3FE07F; --ecam-deep: #12B05A; --deck: #0A0C0B; --deck-ink: #F2F3F5; --spring: cubic-bezier(.34, 1.18, .4, 1);
  --pr-glow: color-mix(in srgb, var(--ok) 12%, transparent); padding-bottom: clamp(88px, 11vw, 136px); overflow-x: clip; }
.pr-lit { display: inline-flex; align-items: center; gap: 10px; color: var(--ok); }
.pr-lit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
/* the header: the pedestal from above, the thrust levers framing the billing switch, dark in
   both themes; the cards rise over its lower edge */
.pr-head { position: relative; isolation: isolate; overflow: hidden; text-align: center; color: #F2F3F5; background: var(--bg);
  padding-block: clamp(72px, 10vw, 132px) clamp(190px, 21vw, 250px); }
/* the photo and its shading fade together into the page's own colour, so the cards rise over a
   soft dissolve rather than an edge, in either theme */
.pr-hero-photo { position: absolute; inset: 0; z-index: -2; background: #0B0C0E;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%); }
.pr-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: saturate(0.85) contrast(1.06) brightness(0.98);
  animation: hero-settle 2.8s cubic-bezier(.2, .7, .2, 1) both; }
.pr-hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(64% 56% at 50% 36%, rgba(11, 12, 14, 0.76) 0%, rgba(11, 12, 14, 0.5) 58%, rgba(11, 12, 14, 0.28) 100%),
    linear-gradient(180deg, rgba(11, 12, 14, 0.7) 0%, rgba(11, 12, 14, 0) 26%, rgba(11, 12, 14, 0) 55%, rgba(11, 12, 14, 0.55) 100%); }
.pr-head .pr-lit { color: #3FE07F; }
.pr-head .pr-title { color: #FFFFFF; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); }
.pr-head .pr-lede { color: rgba(242, 243, 245, 0.8); }
.pr-head .pr-trust li { color: rgba(242, 243, 245, 0.82); }
.pr-head .pr-trust svg { color: #3FE07F; }
.pr-head .pr-bill { background: rgba(14, 15, 17, 0.55); border-color: rgba(242, 243, 245, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -18px rgba(0, 0, 0, 0.8); }
.pr-head .pr-bill button { color: rgba(242, 243, 245, 0.6); }
.pr-head .pr-bill button:hover { color: rgba(242, 243, 245, 0.85); }
.pr-head .pr-bill button[aria-pressed="true"] { color: #FFFFFF; }
.pr-head .pr-bill button:focus-visible { outline-color: #F2F3F5; }
.pr-head .pr-pill { background: rgba(242, 243, 245, 0.12); box-shadow: inset 0 0 0 1px rgba(242, 243, 245, 0.18), 0 2px 8px rgba(0, 0, 0, 0.3); }
.pr-head .pr-save { color: #3FE07F; background: rgba(63, 224, 127, 0.14); }
.pr-title { margin-top: 22px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.75rem); line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.pr-lede { margin: 22px auto 0; max-width: 44ch; color: var(--fg-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; text-wrap: balance; }
.pr-trust { list-style: none; margin: 30px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.pr-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.005em; color: var(--fg-2); }
.pr-trust svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
/* the billing switch: a glass pill, the chosen term lit, the light sliding between them */
.pr-bill-row { display: flex; justify-content: center; margin-top: 44px; }
.pr-bill { position: relative; display: inline-flex; padding: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -18px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pr-bill button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 0.9rem var(--font-display); color: var(--muted); transition: color .3s ease; -webkit-tap-highlight-color: transparent; }
.pr-bill button:hover { color: var(--fg-2); }
.pr-bill button[aria-pressed="true"] { color: var(--fg); }
.pr-bill button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.pr-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent), 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform .55s var(--spring), width .55s var(--spring); }
html:not(.js) .pr-bill button[aria-pressed="true"] { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.pr-save { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ok); padding: 3px 8px; border-radius: 999px; background: var(--ok-soft); font-variant-numeric: tabular-nums; }
/* the cards */
.pr-grid { position: relative; z-index: 2; margin-top: calc(-1 * clamp(150px, 17vw, 200px)); }
.pr-spot { position: absolute; z-index: 0; width: 680px; height: 680px; left: -9999px; top: -9999px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(circle, var(--pr-glow), transparent 62%); }
.pr-grid:hover .pr-spot { opacity: 1; }
.pr-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: 28px;
  max-width: 1000px; margin: 0 auto; perspective: 1600px; }
.pr-card { position: relative; grid-row: span 6; display: grid; grid-template-rows: subgrid; min-width: 0; border-radius: 26px; scroll-margin-top: calc(var(--header-h) + 40px);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, var(--shadow);
  transform-style: preserve-3d; transition: transform .35s var(--ease-out), border-color .4s ease; }
.pr-card:hover { border-color: var(--line-strong); }
.pr-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; z-index: 2;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.08), transparent 62%); }
.pr-card:hover .pr-glare { opacity: 1; }
.pr-inner { position: relative; z-index: 3; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; padding: clamp(28px, 3.6vw, 44px); transform: translateZ(30px); }
.pr-card.prem { color: var(--deck-ink); border: 1.5px solid transparent;
  background: linear-gradient(var(--deck), var(--deck)) padding-box, conic-gradient(from var(--pr-beam), transparent 0deg, var(--ecam) 55deg, var(--ecam-deep) 115deg, transparent 200deg, transparent 360deg) border-box;
  box-shadow: 0 0 60px rgba(63, 224, 127, 0.12), 0 40px 80px -24px rgba(0, 0, 0, 0.65); animation: pr-beam 5s linear infinite, pr-breathe 4.6s ease-in-out infinite; }
.pr-card.prem .pr-inner::before { content: ""; position: absolute; inset: -30px -10px auto; height: 260px; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 50% 0%, rgba(63, 224, 127, 0.13), transparent 70%); }
@keyframes pr-beam { to { --pr-beam: 360deg; } }
@keyframes pr-breathe { 0%, 100% { box-shadow: 0 0 50px rgba(63, 224, 127, 0.10), 0 40px 80px -24px rgba(0, 0, 0, 0.65); } 50% { box-shadow: 0 0 90px rgba(63, 224, 127, 0.22), 0 40px 80px -24px rgba(0, 0, 0, 0.65); } }
.pr-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) translateZ(40px); z-index: 4; white-space: nowrap; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px; color: #04130A; background: linear-gradient(180deg, #5BF09A, #2DD06F); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 24px -6px rgba(63, 224, 127, 0.55); }
/* rows: the name and line, the price, the button, the list's label, the list, the foot */
.pr-row-head { display: grid; gap: 12px; align-content: start; }
.pr-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; }
.pr-name { white-space: nowrap; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }
.pr-plus { margin-left: 0.04em; color: var(--ecam); }
.pr-chip { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.pr-line { color: var(--fg-2); font-size: 0.9375rem; line-height: 1.55; max-width: 38ch; }
.prem .pr-line { color: rgba(242, 243, 245, 0.7); }
.pr-row-price { padding-top: 30px; }
.pr-price { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-family: var(--font-display); line-height: 1; }
.pr-amt { font-weight: 800; font-size: clamp(3.25rem, 2.6rem + 2.2vw, 4.25rem); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pr-amt .cur, .pr-amt .cents { font-size: 0.45em; letter-spacing: -0.01em; vertical-align: 0.95em; }
.pr-amt .cur { margin-right: 4px; opacity: 0.6; font-weight: 700; }
.pr-price .term { font-size: 0.9375rem; font-weight: 600; opacity: 0.5; }
.pr-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; min-height: 24px; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.prem .pr-note { color: rgba(242, 243, 245, 0.55); }
.pr-note b { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; color: var(--ecam); background: rgba(63, 224, 127, 0.12); box-shadow: inset 0 0 0 1px rgba(63, 224, 127, 0.25); }
.pr-row-cta { padding-top: 28px; display: grid; gap: 14px; align-content: start; }
/* the buttons: the site's own, full width; A320 Knowledge+'s lit in the ECAM green */
.pr-btn { width: 100%; min-height: 56px; font-size: 0.9688rem; }
.pr-btn-lit { color: #04130A; background: linear-gradient(180deg, #5BF09A 0%, #2DD06F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -12px rgba(63, 224, 127, 0.65); }
.pr-btn-lit:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.3), 0 20px 44px -12px rgba(63, 224, 127, 0.8); }
.pr-btn-lit::before { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 66%); }
.pr-btn-lit > .arrow { background: rgba(4, 19, 10, 0.12); }
.pr-btn-lit:focus-visible { outline-color: var(--ecam); }
.prem .btn-ghost { color: var(--deck-ink); }
.pr-sub { text-align: center; font-size: 0.8125rem; color: var(--muted); }
.prem .pr-sub { color: rgba(242, 243, 245, 0.5); }
.pr-lead { display: flex; align-items: center; gap: 14px; padding: 36px 0 18px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.pr-lead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.prem .pr-lead { color: var(--ecam); }
.prem .pr-lead::after { background: linear-gradient(90deg, rgba(63, 224, 127, 0.35), rgba(63, 224, 127, 0.05)); }
.pr-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; align-content: start; }
.pr-feats li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 13px; align-items: start; font-size: 0.9375rem; line-height: 1.45; }
.pr-feats li small { display: block; margin-top: 3px; font-size: 0.8125rem; line-height: 1.45; color: rgba(242, 243, 245, 0.48); }
.pr-feats li em { font-style: normal; font-weight: 700; color: var(--ecam); }
.pr-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: -1px; background: var(--ok-soft); color: var(--ok); }
.pr-tick svg { width: 12px; height: 12px; }
.prem .pr-tick { background: rgba(63, 224, 127, 0.13); color: var(--ecam); box-shadow: inset 0 0 0 1px rgba(63, 224, 127, 0.18), 0 0 12px rgba(63, 224, 127, 0.14); }
.pr-feats li.off { color: var(--muted); opacity: 0.55; }
.pr-feats li.off .pr-tick { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.pr-feats li.off .pr-t { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.pr-groups { display: grid; gap: 26px; align-content: start; }
.pr-groups .pr-feats { margin-top: -14px; }
.pr-grp { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.prem .pr-grp { color: rgba(242, 243, 245, 0.42); }
/* Free's foot: what A320 Knowledge+ adds, one tap away */
.pr-unlock { padding-top: 32px; align-self: end; }
.pr-unlock a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 18px 20px; border-radius: 18px; text-decoration: none; color: var(--fg);
  background: var(--bg-2); border: 1px solid var(--line); transition: border-color .35s ease, background-color .35s ease, transform .35s var(--ease-out); }
.pr-unlock a:hover { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); transform: translateY(-1px); }
.pr-unlock b { display: block; font-size: 0.9375rem; font-weight: 700; }
.pr-unlock a > span:first-child > span { display: block; margin-top: 4px; font-size: 0.8125rem; line-height: 1.5; color: var(--fg-2); }
.pr-unlock-go { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); transition: transform .35s var(--ease-out); }
.pr-unlock-go::after { content: ""; width: 15px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'%3E%3Cpath d='M1 7h16M11 1.5 17 7l-6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'%3E%3Cpath d='M1 7h16M11 1.5 17 7l-6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pr-unlock a:hover .pr-unlock-go { transform: translateX(3px); }
.pr-renew { max-width: 620px; margin: 32px auto 0; text-align: center; font-size: 0.8125rem; line-height: 1.65; color: var(--muted); text-wrap: balance; }
/* the entrance: the header rises, then the cards, A320 Knowledge+ last with a little spring */
.js .pr-rise { opacity: 0; transform: translateY(32px); }
.js.pr-played .pr-rise { animation: pr-rise 1s cubic-bezier(.16, 1, .3, 1) forwards; }
.js.pr-played .pr-rise.d1 { animation-delay: .08s; } .js.pr-played .pr-rise.d2 { animation-delay: .18s; } .js.pr-played .pr-rise.d3 { animation-delay: .28s; }
.js .pr-card-rise { opacity: 0; transform: translateY(64px); }
.js.pr-played .pr-card-rise { animation: pr-cardrise 1.15s var(--spring) .4s forwards; }
.js.pr-played .pr-card-rise.prem { animation: pr-cardrise 1.15s var(--spring) .54s forwards, pr-beam 5s linear .9s infinite, pr-breathe 4.6s ease-in-out .9s infinite; }
@keyframes pr-rise { to { opacity: 1; transform: none; } }
@keyframes pr-cardrise { to { opacity: 1; transform: none; } }
/* below the cards */
.pr-section { margin-top: clamp(88px, 11vw, 136px); }
.pr-sec-head { text-align: center; display: grid; gap: 14px; justify-items: center; }
.pr-sec-head .h2 { font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.pr-org { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; max-width: 1000px; margin: 0 auto;
  padding: clamp(28px, 4vw, 44px); border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pr-org::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--ok), transparent); opacity: .6; }
.pr-org-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--ok); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); align-self: start; }
.pr-org-ico svg { width: 26px; height: 26px; }
.pr-org-copy { display: grid; gap: 10px; }
.pr-org .h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; }
.pr-org p { color: var(--fg-2); max-width: 56ch; line-height: 1.6; }
.pr-qs { max-width: 800px; margin: 40px auto 0; border-top: 1px solid var(--line-strong); }
/* A320 Knowledge+ isn't on sale yet: its button says so */
.pr-toast { position: fixed; z-index: 60; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(520px, calc(100% - 32px));
  padding: 16px 20px; border-radius: 18px; background: var(--deck); color: var(--deck-ink); border: 1px solid rgba(63, 224, 127, 0.4); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); font-size: 0.875rem; line-height: 1.55;
  animation: pr-toast .45s var(--ease-out); }
.pr-toast a { color: var(--ecam); font-weight: 600; }
@keyframes pr-toast { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 820px) {
  .pr-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 34px; max-width: 560px; }
  .pr-card, .pr-inner { display: flex; flex-direction: column; grid-row: auto; }
  .pr-card.prem { order: -1; }
  .pr-unlock-space { display: none; }
  .pr-org { grid-template-columns: minmax(0, 1fr); }
  .pr-org .btn { justify-self: start; }
}
@media (max-width: 420px) {
  .pr-bill button { padding: 0 16px; }
  .pr-trust { flex-direction: column; align-items: center; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pr-rise, .js .pr-card-rise { opacity: 1 !important; transform: none !important; }
}

/* ---------- the Tech Quiz page ----------
   A dark hero over the FCU at night that fades into the page, like the pricing page's; the quiz on
   a card rising over its lower edge, a ten-segment bar across its top that fills green or red as
   each question is answered; then the score: a ring that fills as the number counts up, the
   systems missed with the way into the trainer, and every answer to look back over. */
.tq-head { position: relative; isolation: isolate; overflow: hidden; color: #F2F3F5; background: var(--bg);
  padding-block: clamp(64px, 9vw, 120px) clamp(150px, 16vw, 210px); }
.tq-photo { position: absolute; inset: 0; z-index: -2; background: #0B0C0E;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.55) 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0.55) 76%, transparent 100%); }
.tq-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: saturate(0.9) contrast(1.06); animation: hero-settle 2.6s cubic-bezier(.2,.7,.2,1) both; }
.tq-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,11,13,0.9) 0%, rgba(10,11,13,0.72) 45%, rgba(10,11,13,0.5) 100%), radial-gradient(50% 50% at 25% 40%, rgba(63,224,127,0.08), transparent 70%); }
.tq-head-in { display: grid; justify-items: start; gap: 0; }
.tq-ed { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #3FE07F; }
.tq-ed i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.tq-title { margin: clamp(16px, 2vw, 22px) 0 0; max-width: 13ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 1.3rem + 3.8vw, 4.25rem); line-height: 1.04; letter-spacing: -0.032em; color: #fff; text-wrap: balance; }
.tq-title span { display: block; margin-top: 0.14em; color: rgba(242,243,245,0.5); }
.tq-lede { margin-top: clamp(20px, 2.6vw, 30px); max-width: 52ch; font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem); line-height: 1.7; color: rgba(242,243,245,0.78); }
.tq-facts { list-style: none; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; display: flex; gap: clamp(26px, 4vw, 48px); }
.tq-facts li { display: grid; gap: 2px; }
.tq-facts b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.tq-facts span { font-size: 0.8125rem; color: rgba(242,243,245,0.62); }
.tq-ed, .tq-title, .tq-lede, .tq-facts { animation: hero-rise 0.9s cubic-bezier(.2,.7,.2,1) both; }
.tq-title { animation-delay: .06s; } .tq-lede { animation-delay: .12s; } .tq-facts { animation-delay: .18s; }

.tq-stage { position: relative; z-index: 2; max-width: 860px; margin: calc(-1 * clamp(110px, 12vw, 160px)) auto 0; border-radius: 26px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 50px 100px -50px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.03) inset; }
.tq-bar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; padding: 16px clamp(18px, 3vw, 32px) 0; }
.tq-bar i { height: 4px; border-radius: 4px; background: var(--line-strong); transition: background-color .5s ease, box-shadow .5s ease; }
.tq-bar i.is-now { background: var(--fg-2); }
.tq-bar i.is-ok { background: var(--ok); box-shadow: 0 0 10px -2px var(--ok); }
.tq-bar i.is-bad { background: var(--warn); }
.tq-body { padding: clamp(22px, 3vw, 40px) clamp(20px, 3.4vw, 44px) clamp(26px, 3.4vw, 44px); }
.tq-body .qcard-inner .qtext { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.38; letter-spacing: -0.015em; text-wrap: pretty; }
.tq-in { animation: tq-in .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tq-in { from { opacity: 0; transform: translateY(10px); } }

.tq-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: center; }
.tq-ring { position: relative; width: clamp(128px, 18vw, 168px); aspect-ratio: 1; max-width: 100%; }
.tq-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tq-ring circle { fill: none; stroke-width: 7; }
.tq-ring-bg { stroke: var(--line-strong); }
.tq-ring-fg { stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ok) 45%, transparent)); }
.tq-ring-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.tq-ring-n b { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tq-ring-n span { font-size: 0.875rem; color: var(--muted); margin-top: 4px; }
.tq-score-t { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.tq-score-t .h2 { letter-spacing: -0.03em; }
.tq-score-t p { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.6; max-width: 44ch; }
.tq-share { margin-top: 4px; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.tq-share:hover { color: var(--fg); text-decoration-color: currentColor; }
.tq-offer { margin-top: clamp(26px, 3.4vw, 38px); display: grid; gap: 12px; padding: clamp(20px, 2.6vw, 28px); border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 9%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 26%, var(--line)); }
.tq-offer .eyebrow { color: var(--ok); }
.tq-offer-t { color: var(--fg-2); font-size: 1.0313rem; line-height: 1.65; max-width: 58ch; }
.tq-offer-t b { color: var(--fg); font-weight: 600; }
.tq-offer .cluster { margin-top: 6px; gap: 12px; }
.tq-review-h { margin-top: clamp(28px, 3.6vw, 40px); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.tq-review { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.tq-review li { border-bottom: 1px solid var(--line); }
.tq-review summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 2px; cursor: pointer; list-style: none; }
.tq-review summary::-webkit-details-marker { display: none; }
.tq-rv-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.tq-review .is-ok .tq-rv-mark { background: var(--ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent); }
.tq-review .is-ok .tq-rv-mark::after { content: ""; width: 10px; height: 10px; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.3 2.3 2.2 4.7-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.3 2.3 2.2 4.7-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tq-review .is-bad .tq-rv-mark { background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.tq-review .is-bad .tq-rv-mark::after { content: ""; width: 9px; height: 9px; background: var(--warn);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3 3 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3 3 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tq-rv-t { display: grid; gap: 3px; min-width: 0; font-size: 0.9688rem; line-height: 1.45; }
.tq-rv-t small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tq-rv-a { display: grid; gap: 6px; padding: 0 2px 18px 40px; font-size: 0.9375rem; }
.tq-rv-yours { color: var(--warn); }
.tq-rv-right { color: var(--ok); font-weight: 600; }
.tq-review details[open] .faq-plus { transform: rotate(45deg); }
.tq + .subscribe-band, .tq .subscribe-band { margin-top: clamp(24px, 4vw, 48px); }
@media (max-width: 640px) {
  .tq-score { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .tq-rv-a { padding-left: 2px; }
}
@media (prefers-reduced-motion: reduce) { .tq-in { animation: none; } .tq-ring-fg { transition: none; } }

/* ---------- the Adaptive Trainer's focus mode: a session with the site stepped back ---------- */
body.is-focus .site-header, body.is-focus .site-footer, body.is-focus .mobile-nav { display: none; }
.focus { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.focus-bar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.focus-bar-in { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px)); }
.focus-x { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.focus-x::before, .focus-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; border-radius: 1px; background: var(--fg-2); transform: translate(-50%, -50%) rotate(45deg); }
.focus-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.focus-x:hover { border-color: var(--fg-2); background: var(--surface); }
.focus-mid { display: grid; gap: 8px; min-width: 0; }
.focus-title { font-family: var(--font-data); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-track { height: 3px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.focus-track i { display: block; height: 100%; width: 100%; background: var(--fg); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.focus-n { font-size: 0.875rem; font-weight: 600; color: var(--fg-2); min-width: 3.4em; text-align: right; }
.focus-stage { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) max(20px, env(safe-area-inset-right, 0px)) 72px max(20px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 22px; }
.focus-stage > * { min-width: 0; }
.focus #session-stage { border: 0; background: transparent; padding: 0; transition: opacity .22s ease, transform .22s ease; }
.focus #session-stage.is-out { opacity: 0; transform: translateY(6px); pointer-events: none; }
.focus .qcard-top { flex-wrap: nowrap; }
.focus .qcard-top .eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus .qcard-top .chip { white-space: nowrap; }
.focus-keys { margin: 0; font-size: 0.8125rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.focus-keys kbd { font-family: var(--font-data); font-size: 0.6875rem; font-weight: 600; color: var(--fg-2); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
@media (hover: none), (pointer: coarse) { .focus-keys { display: none; } }

/* after an answer: when it comes back */
.focus .qfoot { align-items: center; }
.focus .qfoot:empty { display: none; }
.sched { flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; animation: sched-in .4s cubic-bezier(.2,.7,.2,1); }
@keyframes sched-in { from { opacity: 0; } }
.sched-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sched-boxes { display: flex; gap: 4px; flex: none; }
.sched-boxes i { width: 16px; height: 6px; border-radius: 2px; background: var(--line-strong); transition: background-color .35s ease; }
.sched-boxes i.on { background: var(--ok); }
.sched-boxes.is-miss i.on { background: var(--warn); }
.sched-t { display: grid; gap: 1px; min-width: 0; }
.sched-t b { font-size: 0.9375rem; font-weight: 600; }
.sched-t small { font-size: 0.8125rem; color: var(--muted); }
.sched-guess { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.sched-guess::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; transition: background-color .2s ease; }
.sched-guess:hover { border-color: var(--fg-2); }
.sched-guess[aria-pressed="true"] { color: var(--caution); border-color: color-mix(in srgb, var(--caution) 50%, transparent); }
.sched-guess[aria-pressed="true"]::before { background: var(--caution); }
/* on a phone the line and Next sit in a dock at the bottom, under the thumb */
@media (max-width: 640px) {
  .focus-bar-in { gap: 14px; }
  .focus-stage { padding-bottom: 24px; }
  .focus .qfoot { position: sticky; bottom: 0; z-index: 5; margin: 18px -20px 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); display: grid; gap: 12px; }
  .focus .qfoot { grid-template-columns: minmax(0, 1fr); }
  .focus .qfoot > .btn.btn-primary { width: auto; justify-self: stretch; justify-content: space-between; }
  .sched { flex: none; }
}

/* the debrief */
.focus .debrief { display: block; animation: sched-in .5s ease; }
.db-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 48px); align-items: start; }
.db-score { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 22px; }
.db-btns { gap: 12px; margin-top: 6px; }
.db-side { display: grid; gap: 10px; min-width: 0; }
.db-rows { display: grid; gap: 8px; }
.db-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.db-row b { display: block; font-size: 0.9375rem; font-weight: 600; }
.db-row small { display: block; font-size: 0.8125rem; color: var(--muted); }
.db-val { font-size: 1.125rem; font-weight: 700; text-align: right; }
.db-val.is-ok { color: var(--ok); }
.db-val.is-bad { color: var(--warn); }
.db-move { display: inline-flex; align-items: center; gap: 8px; }
.db-move i { font-style: normal; font-weight: 500; color: var(--muted); }
.db-move em { font-style: normal; color: var(--ok); }
.db-miss { display: grid; gap: 8px; margin-top: 8px; }
.db-miss-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--caution) 28%, transparent); background: color-mix(in srgb, var(--caution) 5%, transparent); transition: border-color .2s ease; }
.db-miss-row:hover { border-color: color-mix(in srgb, var(--caution) 60%, transparent); }
.db-code { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; color: var(--caution); }
.db-miss-row b { font-size: 0.875rem; font-weight: 600; min-width: 0; }
.db-miss-row > span:last-child { font-size: 0.75rem; color: var(--fg-2); white-space: nowrap; }
@media (max-width: 860px) { .db-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .focus #session-stage, .focus-track i { transition: none; } .sched, .focus .debrief { animation: none; } }