/* ==========================================================================
   lx.css — the shared landing-system primitives.

   Split out of home.css when /playbooks needed the same card, the same film
   player and the same section rhythm. Anything used by more than one public
   page lives here; anything used by exactly one lives in that page's own
   stylesheet (home.css, catalogue.css).

   Dark plates name a `background-color` under their gradient. That is a real
   fallback, and it is the only way anything walking the DOM — a contrast
   audit, the next person reading this — can tell what the section sits on.
   ========================================================================== */

/* --------------------------------------------------------------------------
   shared
   -------------------------------------------------------------------------- */
.lx-ic { display:inline-grid; place-items:center; flex:none; }
.lx-ic svg { width:1.15em; height:1.15em; display:block; }

.lx-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--t-xs); font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-ink); margin:0;
}
.lx-eyebrow .lx-ic { color:var(--brand); }

.lx-sec { padding-block:clamp(56px, 6.4vw, 104px); position:relative; }
.lx-sec-alt { background:var(--bg-alt); }

.lx-sec-dark {
  background-color:#041124;
  background-image:
    radial-gradient(100% 90% at 12% 0%, #0b2a5f 0%, transparent 55%),
    radial-gradient(90% 80% at 95% 20%, rgba(254,120,7,.20) 0%, transparent 58%);
  color:#dbe6f5; overflow:clip;
}
.lx-sec-dark .lx-head h2 { color:#fff; }
.lx-sec-dark .lx-sub { color:#a9c0de; }
.lx-sec-dark .lx-eyebrow { color:var(--orange-300); }
.lx-sec-dark .lx-eyebrow .lx-ic { color:var(--orange-300); }
.lx-sec-dark .lx-badge-ai {
  background:rgba(254,120,7,.16); border-color:rgba(254,120,7,.4); color:var(--orange-300);
}
.lx-sec-dark .lx-chip {
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#a9c0de;
}

.lx-head { max-width:62ch; margin-bottom:clamp(32px, 3.6vw, 56px); }
.lx-head h2 {
  font-family:var(--font-display); font-size:var(--t-4xl); line-height:1.08;
  letter-spacing:var(--tracking-display); margin:14px 0 0; color:var(--ink);
}
.lx-sub { margin-top:16px; font-size:var(--t-lg); line-height:1.6; color:var(--ink-2); }

.lx-grid { display:grid; gap:clamp(16px, 1.6vw, 24px); }
.lx-grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.lx-grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width: 1080px) { .lx-grid-4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 980px)  { .lx-grid-3 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  {
  .lx-grid-3, .lx-grid-4 { grid-template-columns:1fr; }
}

.lx-more { display:flex; justify-content:center; margin-top:clamp(28px, 3vw, 44px); }
.lx-cta { display:flex; flex-wrap:wrap; gap:12px; }
.lx-cta-center { justify-content:center; }
.lx-cta .btn { gap:9px; }

.lx-chip {
  display:inline-flex; align-items:center; padding:4px 10px;
  border-radius:var(--r-full); font-size:var(--t-xs); font-weight:650;
  background:var(--surface-3); color:var(--ink-2); border:1px solid var(--line);
}
.lx-badge {
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:var(--r-full); font-size:var(--t-xs); font-weight:700;
  background:var(--surface-3); color:var(--ink-2); border:1px solid var(--line);
}
.lx-badge .lx-ic svg { width:.95em; height:.95em; }
.lx-badge-ai {
  background:var(--brand-wash); border-color:color-mix(in srgb, var(--brand) 32%, transparent);
  color:var(--brand-ink);
}

/* a glass button for dark plates — .btn-ghost is tuned for light surfaces */
.btn-glass {
  --btn-bg:rgba(255,255,255,.09); --btn-ink:#fff;
  --btn-line:rgba(255,255,255,.30);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn-glass:hover { --btn-bg:rgba(255,255,255,.17); }
.btn-glass .lx-ic svg { width:1.05em; height:1.05em; }

/* scroll reveal — additive, and inert when the visitor asks for less motion */
.reveal { opacity:1; }
html:not(.no-js) .reveal { opacity:0; transform:translateY(18px); }
html:not(.no-js) .reveal.in {
  opacity:1; transform:none;
  transition:opacity .62s var(--ease-out), transform .62s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .reveal { opacity:1; transform:none; transition:none; }
}

/* --------------------------------------------------------------------------
   3 — playbook cards
   -------------------------------------------------------------------------- */
.lx-card {
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
             border-color .2s linear;
}
.lx-card:hover {
  transform:translateY(-5px); box-shadow:var(--sh-3);
  border-color:color-mix(in srgb, var(--pb-accent) 42%, var(--line));
}
.lx-card-art {
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--pb-accent) 26%, var(--navy-800)), var(--navy-900));
}
.lx-card-art img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease-out);
}
.lx-card:hover .lx-card-art img { transform:scale(1.05); }
.lx-card-ico {
  position:absolute; left:14px; top:12px; font-size:22px; line-height:1;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.lx-card-art.is-plain::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 20% 0%,
    color-mix(in srgb, var(--pb-accent) 38%, transparent), transparent 62%);
}
.lx-card-play {
  position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center;
  gap:7px; padding:7px 13px 7px 11px; border-radius:var(--r-full); cursor:pointer;
  background:rgba(2,10,28,.78); color:#fff; font-size:var(--t-xs); font-weight:700;
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:translateY(6px);
  transition:opacity .22s linear, transform .22s var(--ease-out), background .16s linear;
}
.lx-card:hover .lx-card-play, .lx-card-play:focus-visible { opacity:1; transform:none; }
.lx-card-play:hover { background:var(--brand); border-color:transparent; }
.lx-card-play svg { width:13px; height:13px; fill:currentColor; }
@media (hover: none) { .lx-card-play { opacity:1; transform:none; } }

.lx-card-body {
  display:flex; flex-direction:column; flex:1;
  padding:clamp(16px, 1.5vw, 22px);
}
.lx-card-body h3 {
  font-family:var(--font-display); font-size:var(--t-lg); line-height:1.22;
  letter-spacing:-.012em; margin:0;
}
.lx-card-body h3 a { color:var(--ink); }
.lx-card-body h3 a:hover { color:var(--brand-ink); text-decoration:none; }
.lx-card-line {
  margin:8px 0 0; font-size:var(--t-sm); color:var(--ink-2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lx-card-take {
  display:flex; gap:8px; margin:13px 0 0; padding:10px 12px;
  background:var(--surface-inset); border-radius:var(--r-sm);
  font-size:var(--t-sm); color:var(--ink); line-height:1.45;
  border-left:3px solid var(--pb-accent);
}
.lx-card-take .lx-ic { color:var(--pb-accent); margin-top:1px; }
.lx-card-who {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:7px;
  margin:10px 0 0; font-size:var(--t-xs); color:var(--ink-3); line-height:1.45;
}
.lx-card-who span {
  flex:none; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  font-size:10px; color:var(--ink-3); opacity:.8;
}
.lx-card-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.lx-card-foot {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-top:auto; padding-top:14px;
  font-size:var(--t-xs); color:var(--ink-3);
}
.lx-card-meta b { color:var(--ink-2); font-weight:750; }
.lx-card-price b {
  font-size:var(--t-md); font-weight:800; color:var(--ink);
  font-family:var(--font-display);
}
.lx-card-go {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
  font-size:var(--t-sm); font-weight:700; color:var(--brand-ink);
}
.lx-card-go:hover { text-decoration:none; }
.lx-card-go .lx-ic { transition:transform .22s var(--ease-out); }
.lx-card:hover .lx-card-go .lx-ic { transform:translateX(4px); }

/* --------------------------------------------------------------------------
   the film player — one engine, two stagings (landing theatre, catalogue modal)
   -------------------------------------------------------------------------- */
.sff-frame {
  position:relative; border-radius:clamp(14px, 1.4vw, 22px); overflow:hidden;
  background:#000;
  box-shadow:0 30px 90px rgba(2,14,40,.55), 0 0 0 1px rgba(255,255,255,.10),
             0 0 0 8px rgba(255,255,255,.035);
}
.sff-stage { position:relative; aspect-ratio:16 / 9; background:#000; }
.sff-video { width:100%; height:100%; display:block; object-fit:contain; background:#000; }

/* the poster veil: title + big play, gone the moment the film starts */
.sff-veil {
  position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 50%, rgba(2,10,28,.34), rgba(2,10,28,.10) 70%);
  transition:opacity .32s var(--ease), visibility .32s;
}
.sff.is-playing .sff-veil { opacity:0; visibility:hidden; }
.sff-cap-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; margin:0 0 9px;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#8ea6c8;
}
.sff-cap-meta i {
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--pb-accent, var(--brand));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pb-accent, var(--brand)) 26%, transparent);
}
.sff-cap-meta b { color:var(--orange-300); font-weight:800; }
.sff-big {
  position:absolute; inset:0; margin:auto; width:clamp(66px, 6.6vw, 96px);
  aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; cursor:pointer;
  transition:transform .3s var(--ease-out), background .2s linear;
}
.sff-big span { display:grid; place-items:center; }
.sff-big svg { width:38%; height:38%; fill:currentColor; margin-left:8%; }
.sff-big:hover { transform:scale(1.08); background:rgba(254,120,7,.9); border-color:transparent; }
.sff-big::after {
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); animation:sffPulse 2.8s ease-out infinite;
}
@keyframes sffPulse {
  0% { transform:scale(1); opacity:.7; } 100% { transform:scale(1.35); opacity:0; }
}
@media (prefers-reduced-motion: reduce) { .sff-big::after { animation:none; } }

.sff-figure { margin:0; }
.sff-cap {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:clamp(14px, 1.5vw, 20px);
}
.sff-cap h3 {
  font-family:var(--font-display); font-weight:800; color:#fff; margin:0;
  font-size:var(--t-xl); line-height:1.14; letter-spacing:-.018em;
}
.sff-cap p { margin:6px 0 0; color:#a9c0de; font-size:var(--t-sm); line-height:1.5;
  max-width:56ch; }
.sff-cap .btn { flex:none; gap:7px; }

.sff-top {
  position:absolute; left:0; top:0; right:0;
  padding:14px clamp(14px, 1.8vw, 22px);
  background:linear-gradient(180deg, rgba(2,10,28,.78), transparent);
  color:#fff; font-weight:700; font-size:var(--t-sm);
  opacity:0; transition:opacity .25s linear; pointer-events:none;
}
.sff.is-playing.is-live .sff-top { opacity:1; }

.sff-load { position:absolute; inset:0; display:grid; place-items:center; }
.sff-load i {
  width:34px; height:34px; border-radius:50%; display:block;
  border:2.5px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation:sffSpin .85s linear infinite;
}
@keyframes sffSpin { to { transform:rotate(360deg); } }

/* ---- chrome ---- */
.sff-chrome {
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:clamp(26px, 3vw, 40px) clamp(10px, 1.4vw, 18px) clamp(8px, 1vw, 14px);
  background:linear-gradient(180deg, transparent, rgba(2,10,28,.55) 32%, rgba(2,10,28,.93));
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .22s linear, transform .22s var(--ease);
}
.sff.is-live .sff-chrome, .sff:focus-within .sff-chrome {
  opacity:1; transform:none; pointer-events:auto;
}
.sff-seek {
  position:relative; height:20px; display:flex; align-items:center;
  cursor:pointer; touch-action:none;
}
.sff-seek:focus-visible { outline:2px solid var(--orange-300); outline-offset:3px;
  border-radius:var(--r-full); }
.sff-rail-bar {
  position:relative; height:4px; width:100%; border-radius:var(--r-full);
  background:rgba(255,255,255,.26); overflow:hidden;
  transition:height .16s var(--ease);
}
.sff-seek:hover .sff-rail-bar, .sff-seek:focus-visible .sff-rail-bar { height:7px; }
.sff-rail-bar i { position:absolute; inset:0 auto 0 0; display:block; border-radius:inherit; }
.sff-rail-bar .buf { background:rgba(255,255,255,.28); width:0; }
.sff-rail-bar .fil {
  background:linear-gradient(90deg, var(--orange-400), var(--orange-300)); width:0;
}
.sff-knob {
  position:absolute; top:50%; left:0; width:13px; height:13px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.5);
  transform:translate(-50%, -50%) scale(0); transition:transform .16s var(--ease-out);
}
.sff-seek:hover .sff-knob, .sff-seek:focus-visible .sff-knob { transform:translate(-50%,-50%) scale(1); }
.sff-tip {
  position:absolute; bottom:calc(100% + 8px); transform:translateX(-50%);
  background:rgba(2,10,28,.94); color:#fff; font-size:var(--t-xs); font-weight:700;
  padding:4px 8px; border-radius:var(--r-xs); pointer-events:none; white-space:nowrap;
  border:1px solid rgba(255,255,255,.16);
}

.sff-bar { display:flex; align-items:center; gap:6px; padding-top:4px; color:#fff; }
.sff-grow { flex:1 1 auto; }
.sff-btn {
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-sm); color:#fff; background:transparent; cursor:pointer;
  border:1px solid transparent; transition:background .14s linear;
}
.sff-btn svg { width:21px; height:21px; }
.sff-btn:hover { background:rgba(255,255,255,.15); }
.sff-btn:focus-visible { outline:2px solid var(--orange-300); outline-offset:1px; }
.sff-btn[aria-pressed="true"] { background:rgba(254,120,7,.26); color:#ffd4ab; }
.sff-time {
  font-size:var(--t-xs); font-weight:650; color:#d4e0f2; font-variant-numeric:tabular-nums;
  padding-inline:4px; white-space:nowrap;
}
.sff-time i { color:#7f95b6; font-style:normal; margin-inline:3px; }

/* the voice control — a named button, not just a speaker glyph */
.sff-voice { display:flex; align-items:center; gap:4px; }
.sff-voice-lab {
  font-size:var(--t-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#a9bdd9;
}
.sff-voice-btn[aria-pressed="false"] { background:rgba(255,255,255,.10); color:#ffb9b9; }
.sff-vol {
  width:0; opacity:0; height:4px; accent-color:var(--orange-400); cursor:pointer;
  transition:width .2s var(--ease), opacity .2s linear, margin .2s var(--ease);
}
.sff-voice:hover .sff-vol, .sff-voice:focus-within .sff-vol {
  width:78px; opacity:1; margin-inline:6px 2px;
}

/* the language switch — always visible, never buried */
.sff-langs {
  display:flex; align-items:center; gap:3px; padding:3px 3px 3px 10px;
  border-radius:var(--r-full); background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18); margin-inline:4px;
}
.sff-langs-lab {
  font-size:var(--t-xs); font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#a9bdd9; margin-right:5px;
}
.sff-lang {
  padding:5px 11px; border-radius:var(--r-full); font-size:var(--t-xs);
  font-weight:700; color:#d4e0f2; cursor:pointer; background:transparent;
  border:0; transition:background .14s linear, color .14s linear;
}
.sff-lang:hover { background:rgba(255,255,255,.14); }
.sff-lang.is-on {
  background:linear-gradient(180deg, var(--orange-400), var(--orange-500)); color:#fff;
}
.sff-lang:focus-visible { outline:2px solid #fff; outline-offset:1px; }

/* The same control, rendered in two places: CSS decides which one is live so
   the language choice is never pushed into a menu on a phone. */
.sff-langs-cap { display:none; margin-top:12px; }
@media (max-width: 780px) {
  .sff-bar .sff-langs { display:none; }
  .sff-langs-cap {
    display:inline-flex; background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.16);
    padding:5px 5px 5px 12px;
  }
  /* the pills are the language control on a phone, so they are a real target */
  .sff-langs-cap .sff-lang { padding:9px 15px; font-size:var(--t-sm); }
  .sff-voice-lab { display:none; }
  .sff-btn { width:34px; height:34px; }
  .sff-btn svg { width:19px; height:19px; }
}
@media (max-width: 430px) {
  .sff-time i, .sff-time span { display:none; }
  .sff-bar { gap:2px; }
}

/* ---- the three-dot menu ---- */
.sff-menu {
  position:absolute; right:clamp(10px, 1.4vw, 18px); bottom:clamp(58px, 5vw, 76px);
  z-index:5; width:min(290px, calc(100% - 24px));
  background:rgba(6,18,42,.97); color:#fff;
  border:1px solid rgba(255,255,255,.15); border-radius:var(--r-md);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}
.sff-menu-in { max-height:min(58vh, 380px); overflow-y:auto; padding:6px; }
.sff-menu h4 {
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:#8ea6c8; margin:10px 10px 5px; font-weight:750;
}
.sff-menu h4:first-child { margin-top:4px; }
.sff-row {
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px;
  border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:600; color:#e6eefb;
  background:transparent; border:0; cursor:pointer; text-align:left;
}
.sff-row:hover { background:rgba(255,255,255,.11); }
.sff-row:focus-visible { outline:2px solid var(--orange-300); outline-offset:-2px; }
.sff-row .v { margin-left:auto; color:#9db3d2; font-weight:650; font-size:var(--t-xs); }
.sff-row[aria-checked="true"] { color:#ffd4ab; }
.sff-row[aria-checked="true"] .v { color:var(--orange-300); }
.sff-row[disabled] { opacity:.55; cursor:default; }
.sff-row[disabled]:hover { background:transparent; }
.sff-sw {
  margin-left:auto; width:36px; height:20px; border-radius:var(--r-full);
  background:rgba(255,255,255,.22); position:relative; flex:none;
  transition:background .16s linear;
}
.sff-sw::after {
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:transform .18s var(--ease-out);
}
.sff-row[aria-checked="true"] .sff-sw { background:var(--orange-400); }
.sff-row[aria-checked="true"] .sff-sw::after { transform:translateX(16px); }
.sff-note {
  padding:2px 11px 10px; font-size:var(--t-xs); color:#8ea6c8; line-height:1.45;
}

/* fullscreen: the chrome sits on the film, never beside it */
.sff-frame:fullscreen, .sff-frame:-webkit-full-screen {
  border-radius:0; box-shadow:none; width:100%; height:100%;
  display:grid; place-items:center; background:#000;
}
.sff-frame:fullscreen .sff-stage { width:100%; height:100%; aspect-ratio:auto; }

/* ---- the copy beside the player ---- */
.sff-side { padding-top:clamp(6px, 1vw, 18px); color:#dbe6f5; }
.sff-side .lx-eyebrow { color:var(--orange-300); }
.sff-side .lx-eyebrow .lx-ic { color:var(--orange-300); }
.sff-h {
  font-family:var(--font-display); font-weight:800; color:#fff; margin:14px 0 0;
  font-size:var(--t-2xl); line-height:1.12; letter-spacing:-.02em;
}
.sff-p { margin:12px 0 0; color:#b7cae6; font-size:var(--t-md); line-height:1.6; }
.sff-p strong { color:#fff; }
.sff-facts { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:14px; }
.sff-facts li { display:flex; gap:12px; align-items:flex-start; }
.sff-facts .lx-ic {
  width:34px; height:34px; border-radius:var(--r-sm); background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16); color:var(--orange-300);
}
.sff-facts span { font-size:var(--t-sm); color:#9db3d2; line-height:1.5; }
.sff-facts b { display:block; color:#fff; font-size:var(--t-md); margin-bottom:2px; }
.sff-side .btn { margin-top:22px; gap:8px; }
@media (max-width: 1080px) {
  .sff-side { padding-top:4px; }
  .sff-h { font-size:var(--t-xl); }
}

/* ---- the film rail ---- */
.sff-rail {
  position:relative; margin-top:clamp(24px, 2.6vw, 38px);
  padding-top:clamp(18px, 2vw, 26px); border-top:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; gap:8px;
}
.sff-rail-track {
  display:flex; gap:12px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity; padding:4px 2px 10px;
  scrollbar-width:none;
}
.sff-rail-track::-webkit-scrollbar { display:none; }
.sff-rail-nav {
  width:38px; height:38px; flex:none; border-radius:50%; display:grid;
  place-items:center; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#c8d8ee; transition:background .14s linear, color .14s linear;
}
.sff-rail-nav svg { width:18px; height:18px; }
.sff-rail-nav.next svg { transform:rotate(180deg); }
.sff-rail-nav:hover { background:rgba(255,255,255,.17); color:#fff; }
@media (max-width: 720px) { .sff-rail-nav { display:none; } }

.sff-chip {
  flex:0 0 auto; width:clamp(136px, 15vw, 178px); scroll-snap-align:start;
  background:transparent; border:0; padding:0; cursor:pointer; text-align:left;
  border-radius:var(--r-md); transition:transform .22s var(--ease-out);
}
.sff-chip:hover { transform:translateY(-3px); }
.sff-chip:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.sff-chip-art {
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-sm); background:var(--navy-800);
  border:2px solid transparent; transition:border-color .18s linear;
}
.sff-chip-art img { width:100%; height:100%; object-fit:cover; display:block; }
.sff-chip-ico {
  position:absolute; left:7px; top:6px; font-size:15px; line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.sff-chip-time {
  position:absolute; right:5px; bottom:5px; padding:2px 6px; border-radius:4px;
  background:rgba(2,10,28,.82); color:#fff; font-size:10px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.sff-chip.is-on .sff-chip-art { border-color:var(--pb-accent, var(--brand)); }
.sff-chip-name {
  display:block; margin-top:8px; font-size:var(--t-xs); font-weight:700;
  color:#9db3d2; line-height:1.35;
}
.sff-chip:hover .sff-chip-name { color:#e3ecf9; }
.sff-chip.is-on .sff-chip-name { color:#fff; }

/* --------------------------------------------------------------------------
   9 — FAQ
   -------------------------------------------------------------------------- */
.lx-faq-grid {
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(26px, 3.4vw, 60px); align-items:start;
}
@media (max-width: 940px) { .lx-faq-grid { grid-template-columns:1fr; } }
.lx-faq-aside h2 {
  font-family:var(--font-display); font-weight:800; font-size:var(--t-3xl);
  line-height:1.08; letter-spacing:-.024em; margin:14px 0 0; color:var(--ink);
}
.lx-faq-cta {
  margin-top:26px; padding:22px; border-radius:var(--r-md);
  background:var(--brand-wash);
  border:1px solid color-mix(in srgb, var(--brand) 24%, transparent);
}
.lx-faq-cta h3 { font-family:var(--font-display); font-size:var(--t-md); margin:0;
  color:var(--ink); }
.lx-faq-cta p { margin:8px 0 16px; font-size:var(--t-sm); color:var(--ink-2);
  line-height:1.5; }
.lx-faq-more {
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:var(--t-sm); font-weight:700; color:var(--brand-ink);
}

/* --------------------------------------------------------------------------
   10 — closing + mobile sticky CTA
   -------------------------------------------------------------------------- */
.lx-close {
  padding-block:clamp(56px, 6.4vw, 100px); text-align:center; color:#fff;
  background-color:#041947;
  background-image:
    radial-gradient(90% 120% at 50% 0%, #0b2a5f 0%, #041947 48%, #020e28 100%);
}
.lx-close h2 {
  font-family:var(--font-display); font-weight:900; color:#fff; margin:0;
  font-size:var(--t-4xl); line-height:1.08; letter-spacing:-.026em;
}
.lx-close p {
  margin:16px auto 0; max-width:62ch; color:#b7cae6; font-size:var(--t-lg);
  line-height:1.6;
}
.lx-close .lx-cta { margin-top:30px; }

.lx-sticky {
  position:fixed; left:0; right:0; bottom:0; z-index:58;
  display:none; align-items:center; gap:14px;
  padding:11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(4,25,71,.14);
  transform:translateY(110%); transition:transform .3s var(--ease-out);
}
.lx-sticky > div { flex:1; min-width:0; }
.lx-sticky strong { display:block; font-size:var(--t-sm); color:var(--ink); }
.lx-sticky span { display:block; font-size:var(--t-xs); color:var(--ink-3); margin-top:2px; }
.lx-sticky .btn { flex:none; }
@media (max-width: 820px) {
  .lx-sticky { display:flex; }
  .lx-sticky.is-on { transform:none; }
}

/* --------------------------------------------------------------------------
   dark theme — the light surfaces only; the three dark plates are fixed
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .lx-step-n {
  box-shadow:0 0 0 8px var(--bg-alt), 0 8px 20px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lx-step-n {
    box-shadow:0 0 0 8px var(--bg-alt), 0 8px 20px rgba(0,0,0,.4);
  }
}

/* The footer carries a 96px top margin so it never crowds the last section of
   an ordinary page. This page ends on a dark full-bleed CTA, and that margin
   painted a band of page background between two dark surfaces. */
main:has(> .lx-close) + .site-footer { margin-top:0; }