/* ============================================================
   aircraft.fyi — family design system, "altitude" skin
   MEGA-NAV v5 + MEGA-FOOTER ported verbatim from luck.fyi.
   Only the role tokens, menu contents and logo change — per the
   family blueprint. LIGHT THEME ONLY: light values are :root.
   One hex, three places: theme-color meta = html bg = .mn-shell
   = #ffffff.
   ============================================================ */
:root{
  --ink:#F7F9FB;            /* page background — cool silvery paper */
  --ink-2:#EEF2F6;          /* cards / raised surfaces */
  --ink-3:#E2E9EF;          /* inset / alt surface */
  --line:rgba(26,20,16,.12);
  --line-2:rgba(26,20,16,.22);
  --gold:#B01B2E;           /* SIGNAL role — deep marque crimson, 6.57:1 on paper */
  --signal:#B01B2E;         /* alias — the family's signal colour */
  --gold-deep:#8A0F20;      /* pressed/hover crimson */
  --violet:#8A6D3B;         /* second accent — antique bronze-gold (text-safe, 4.62:1) */
  --crimson:#B01B2E;--crimson-2:#8A0F20;
  --mint:#1E7A44;           /* "verified / in production" role */
  --paper:#F7F9FB;
  --text:#1A1410;           /* espresso near-black, 17.36:1 */
  --muted:#6B5D52;          /* warm taupe, 6.04:1 */
  --radius:18px;--radius-sm:12px;
  --shadow:0 12px 30px -14px rgba(26,20,16,.20);
  --maxw:1120px;
  --display:"Play","Hanken Grotesk",system-ui,sans-serif;   /* display: squared, motorsport */
  --body:"Hanken Grotesk",system-ui,sans-serif;    /* body sans */
}
*{box-sizing:border-box;forced-color-adjust:none}
html::before{content:"";position:fixed;inset:0;background:#F7F9FB;z-index:-1}  /* the floor */
html{background:#F7F9FB;font-optical-sizing:auto;color-scheme:light;forced-color-adjust:none;scrollbar-gutter:stable}   /* NEVER overflow-x here */
body{
  margin:0;overflow-x:hidden;
  background-color:#F7F9FB;background-image:radial-gradient(1200px 720px at 85% -15%,rgba(176,27,46,.05),transparent 60%);
  color:var(--text);font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;forced-color-adjust:none;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0;font-weight:700}
img,svg{max-width:100%}
[id]{scroll-margin-top:96px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.num,td,.spec td{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.skip{position:absolute;left:-9999px;top:0;background:#B01B2E;color:#fff;font-weight:700;padding:.7em 1.2em;border-radius:0 0 10px 0;z-index:10000}.skip:focus{left:0}

/* ---------- cursor policy (family law, every page) ---------- */
*{cursor:default}
a,button,label,summary,select,[role=button],[role=link],[role=tab],.btn,[onclick],
input[type=checkbox],input[type=radio],input[type=range]{cursor:pointer}
input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,[contenteditable=true]{cursor:text}
:disabled,[disabled],[aria-disabled=true]{cursor:not-allowed}

/* ---------- eyebrow / buttons (family) ---------- */
.eyebrow{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:inline-flex;gap:.6em;align-items:center}
.btn{--bg:#B01B2E;--fg:#ffffff;display:inline-flex;align-items:center;gap:.55em;justify-content:center;font-family:var(--display);font-weight:600;font-size:.95rem;padding:.85em 1.4em;border-radius:999px;border:0;cursor:pointer;background:var(--bg);color:var(--fg);transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;box-shadow:0 10px 24px -10px rgba(176,27,46,.45)}
.btn:hover{transform:translateY(1px);filter:brightness(1.05)}
.btn:active{transform:translateY(2px)}
.btn.ghost{--bg:transparent;--fg:var(--text);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(176,27,46,.07)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ===================== MEGA-NAV v5 (ported) ===================== */
.mn{position:sticky;top:0;z-index:500;font-family:var(--body)}
.mn-shell{position:relative;background:#F7F9FB;border-bottom:1px solid var(--line);transition:border-color .3s ease,box-shadow .3s ease}
.mn-shell::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:2;background:linear-gradient(90deg,transparent,rgba(176,27,46,.55),rgba(90,200,232,.55),transparent);opacity:.5;transition:opacity .3s}
.mn.is-scrolled .mn-shell{border-color:var(--line-2);box-shadow:0 16px 44px -26px rgba(26,20,16,.35)}
.mn.is-scrolled .mn-shell::after{opacity:.9}
.mn-bar{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:14px;height:80px;transition:height .3s ease}
.mn.is-scrolled .mn-bar{height:62px}
.mn-logo{display:flex;align-items:center;gap:.5em;flex:0 0 auto;margin-right:auto;font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:-.01em}
.mn-logo:hover .mn-mark{transform:rotate(14deg) scale(1.08)}
.mn-groups{display:flex;align-items:center;gap:1px;flex:0 1 auto}
.mn-group{position:static}
.mn-top{position:relative;display:inline-flex;align-items:center;gap:.45em;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--muted);background:none;border:0;cursor:pointer;padding:.6em .85em;border-radius:999px;transition:color .18s,background .18s;text-decoration:none}
.mn-top .gi{width:17px;height:17px;flex:0 0 auto;opacity:.85;transition:opacity .18s,transform .25s}
.mn-top:hover,.mn-group.is-open .mn-top{color:var(--gold);background:rgba(26,20,16,.06)}
.mn-top:hover .gi,.mn-group.is-open .mn-top .gi{opacity:1;transform:translateY(-1px)}
.mn-top .caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .25s ease;opacity:.7;margin-left:.05em}
.mn-group.is-open .mn-top .caret{transform:rotate(-135deg)}
.mn-group.is-current .mn-top,.mn-direct.is-current{color:var(--text)}
.mn-panel{position:absolute;top:100%;left:0;right:0;background:#F7F9FB;border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);box-shadow:0 26px 56px -32px rgba(26,20,16,.26);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .24s ease,transform .26s cubic-bezier(.2,1,.3,1),visibility .26s;z-index:10}
.mn-group.is-open .mn-panel{opacity:1;visibility:visible;transform:none}
.mn-panel-inner{max-width:var(--maxw);margin:0 auto;padding:26px 22px 28px;display:grid;gap:26px}
.mn-panel-inner > *{opacity:0;transform:translateY(10px);transition:opacity .32s ease,transform .32s ease}
.mn-group.is-open .mn-panel-inner > *{opacity:1;transform:none}
.mn-group.is-open .mn-panel-inner > *:nth-child(1){transition-delay:.05s}
.mn-group.is-open .mn-panel-inner > *:nth-child(2){transition-delay:.1s}
.mn-group.is-open .mn-panel-inner > *:nth-child(3){transition-delay:.15s}
.mn-group.is-open .mn-panel-inner > *:nth-child(4){transition-delay:.2s}
.mn-col-h{font-family:var(--display);font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:0 10px 9px;opacity:.9;border-bottom:1px solid var(--line);margin-bottom:6px}
.mn-col-h.mt{margin-top:18px}
.mn-link{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--text);transition:background .15s}
.mn-link::before{content:"";position:absolute;left:1px;top:50%;transform:translateY(-50%);width:3px;height:0;border-radius:3px;background:linear-gradient(#B01B2E,#5AC8E8);transition:height .2s ease}
.mn-link:hover{background:rgba(26,20,16,.06)}
.mn-link:hover::before{height:58%}
.mn-link .lbl{display:flex;align-items:center;gap:.5em;min-width:0}
.mn-link .cc{font-family:var(--display);font-size:.56rem;font-weight:700;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line-2);border-radius:5px;padding:.1em .4em;flex:0 0 auto}
.mn-link .tag{font-size:.54rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);border:1px solid rgba(180,99,11,.5);border-radius:999px;padding:.12em .5em;flex:0 0 auto}
.mn-link .tag.soon{color:var(--muted);border-color:var(--line-2)}
.mn-link .arr{flex:0 0 auto;color:var(--gold);opacity:0;transform:translateX(-5px);transition:opacity .18s,transform .18s}
.mn-link:hover .arr{opacity:.9;transform:none}
.gens{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.mn-feats{display:flex;flex-direction:column;gap:12px;align-self:start}
.mn-feats>.mn-feat{min-height:132px}
.mn-feat{position:relative;overflow:hidden;border-radius:16px;padding:20px;border:1px solid var(--line-2);background-color:#EAF2FB;background-image:linear-gradient(140deg,rgba(176,27,46,.12),rgba(90,200,232,.12));display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:150px}
.mn-feat-solo{align-self:start}
.mn-feat::before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(176,27,46,.28),transparent 70%);pointer-events:none}
.mn-feat .fe{font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mn-feat .fh{display:block;font-family:var(--display);font-weight:700;line-height:1.1;font-size:1.12rem;color:var(--text);margin:.2em 0 .1em;max-width:18ch}
.mn-feat p{color:var(--muted);font-size:.84rem;margin:0;max-width:34ch}
.mn-feat .fcta{align-self:flex-start;display:inline-flex;align-items:center;gap:.4em;font-family:var(--display);font-weight:700;font-size:.82rem;color:#ffffff;background-color:#B01B2E;background-image:linear-gradient(135deg,#B01B2E,#8A0F20);padding:.55em 1em;border-radius:999px;transition:transform .15s,filter .15s}
.mn-feat .fcta:hover{transform:translateY(1px);filter:brightness(1.06)}
.mn-cta{flex:0 0 auto;display:inline-flex;align-items:center;font-family:var(--display);font-weight:700;font-size:.9rem;padding:.62em 1.25em;border-radius:999px;color:#ffffff;background-color:#B01B2E;background-image:linear-gradient(135deg,#B01B2E,#8A0F20);box-shadow:0 12px 26px -12px rgba(176,27,46,.5);transition:transform .16s,filter .16s;margin-left:6px}
.mn-cta:hover{transform:translateY(1px);filter:brightness(1.06)}
.mn-burger{display:none;flex:0 0 auto;margin-left:8px;width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;background:rgba(26,20,16,.05);cursor:pointer;position:relative}
.mn-burger span,.mn-burger span::before,.mn-burger span::after{position:absolute;left:50%;top:50%;width:20px;height:2px;background:#0E141C;border-radius:2px;transition:transform .32s cubic-bezier(.2,1,.3,1),opacity .2s;content:""}
.mn-burger span{transform:translate(-50%,-50%)}
.mn-burger span::before{transform:translate(-50%,-7px)}
.mn-burger span::after{transform:translate(-50%,5px)}
.mn.is-drawer .mn-burger span{background:transparent}
.mn.is-drawer .mn-burger span::before{transform:translate(-50%,0) rotate(45deg)}
.mn.is-drawer .mn-burger span::after{transform:translate(-50%,0) rotate(-45deg)}
.mn-drawer{position:fixed;inset:0;z-index:490;height:100dvh;background:#F7F9FB;opacity:0;visibility:hidden;transform:translateY(-2%);transition:opacity .38s ease,transform .4s cubic-bezier(.2,1,.3,1),visibility .4s;display:flex;flex-direction:column;padding:14px 0 28px}
.mn.is-drawer .mn-drawer{opacity:1;visibility:visible;transform:none}
.mn-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:6px 22px 16px;max-width:560px;width:100%;margin:0 auto;border-bottom:1px solid var(--line)}
.mn-drawer-scroll{overflow-y:auto;flex:1;padding:10px 22px;max-width:560px;width:100%;margin:0 auto;-webkit-overflow-scrolling:touch}
.mn-acc{border-bottom:1px solid var(--line);opacity:0;transform:translateY(12px)}
.mn.is-drawer .mn-acc{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.mn-acc-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--text);padding:18px 4px}
.mn-acc-top .lhs{display:flex;align-items:center;gap:.65em}
.mn-acc-top .caret{width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s ease;flex:0 0 auto}
.mn-acc.is-open > .mn-acc-top{color:var(--gold)}
.mn-acc.is-open > .mn-acc-top .caret{transform:rotate(-135deg);border-color:var(--gold)}
.mn-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.mn-acc.is-open > .mn-acc-body{grid-template-rows:1fr}
.mn-acc-in{overflow:hidden;min-height:0;padding:0 0 10px}
.mn-mlink{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:10px;color:var(--text);font-family:var(--display);font-weight:600;font-size:.96rem}
.mn-mlink:active,.mn-mlink:hover{background:rgba(26,20,16,.06)}
.mn-mlink .cc{font-size:.56rem;font-weight:700;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line-2);border-radius:5px;padding:.1em .42em}
.mn-acc-direct{display:flex;align-items:center;padding:18px 4px;font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--text);border-bottom:1px solid var(--line)}
.mn-acc-direct:active{color:var(--gold)}
.mn-drawer-foot{max-width:560px;width:100%;margin:16px auto 0;padding:0 22px}
.mn-drawer-foot .mn-cta{width:100%;justify-content:center;font-size:1rem;padding:.85em;margin:0}

/* ---------- scrim: silvery frost, direct child of body ---------- */
.mn-scrim{position:fixed;inset:0;z-index:400;opacity:0;visibility:hidden;pointer-events:none;
  background:rgba(228,236,250,.45);
  -webkit-backdrop-filter:blur(16px) saturate(140%) brightness(1.06);
  backdrop-filter:blur(16px) saturate(140%) brightness(1.06);
  transition:opacity .26s ease,visibility .26s ease}
@media(min-width:961px){html.mn-blur .mn-scrim{opacity:1;visibility:visible;pointer-events:auto}}

/* ---------- page vocabulary (family) ---------- */
.hero{position:relative;padding:84px 0 40px;background:#F7F9FB}
.hero h1{font-size:clamp(2.4rem,7vw,4.6rem);font-weight:700;letter-spacing:-.02em;margin:.35em 0 .25em;max-width:16ch}
.hero h1 .em{color:var(--gold)}
.hero p.lead{font-size:1.12rem;color:var(--muted);max-width:46ch;margin:0 0 1.6em}
.heroCtas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.crumb{font-family:var(--display);font-size:.78rem;color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--gold)}
.section{padding:64px 0;background:#F7F9FB}
.section h2.title{font-size:clamp(1.6rem,4vw,2.4rem);max-width:26ch;margin-bottom:.4em;letter-spacing:-.01em}
.section .sub{color:var(--muted);max-width:60ch;margin:0 0 8px}
.prose p{color:var(--muted);max-width:68ch;margin:0 0 1em}
.prose strong{color:var(--text);font-weight:700}

/* cards (family .acard) */
.acard{background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 1px 2px rgba(26,20,16,.04),0 12px 28px -20px rgba(26,20,16,.22);transition:border-color .2s,transform .2s,box-shadow .2s}
.acard:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 2px 4px rgba(26,20,16,.06),0 20px 40px -20px rgba(26,20,16,.30)}
.acard .sil{background:#F7F9FB;border:1px solid rgba(26,20,16,.08);border-radius:var(--radius-sm);padding:16px;display:flex;align-items:center;justify-content:center;min-height:92px;margin-bottom:16px}
.acard .sil svg{width:100%;max-width:220px;height:auto;color:var(--text)}
.acard h3{font-size:1.3rem;margin:0 0 .15em}
.acard .kicker{color:var(--muted);font-size:.85rem;margin:0 0 16px}
.acard .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:0 0 16px}
.acard .stats .k{color:var(--muted);font-size:.78rem;display:block}
.acard .stats .v{font-weight:700;font-size:.95rem}
.acard a.mini{color:var(--gold);font-family:var(--display);font-weight:600;font-size:.85rem;display:inline-flex;align-items:center;gap:.35em}
.acard a.mini:hover{text-decoration:underline;text-underline-offset:3px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.pillars.two{grid-template-columns:repeat(2,1fr)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}

/* spec table (family table.compare) */
table.compare{width:100%;border-collapse:collapse;margin-top:30px;font-size:.92rem;overflow:hidden;border-radius:var(--radius-sm);background:#F5F7FA;border:1px solid var(--line)}
table.compare th,table.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.compare tr:last-child th,table.compare tr:last-child td{border-bottom:0}
table.compare th{color:var(--muted);font-family:var(--display);font-weight:600;width:40%}
table.compare td{font-weight:700}
table.compare td .src{font-weight:600;font-size:.68rem;color:var(--muted);margin-left:10px;border:1px solid var(--line-2);border-radius:5px;padding:.08em .4em;vertical-align:middle}
table.compare tbody tr:hover{background:rgba(26,20,16,.03)}
.unitrow{margin-top:14px}

/* operators / fleet rows */
.oprow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius-sm);transition:border-color .15s,transform .15s;margin-top:10px}
.oprow:hover{border-color:var(--gold);transform:translateY(-2px)}
.oprow .who{display:flex;align-items:center;gap:12px;min-width:0}
.oprow .who .cc{font-size:.6rem;font-weight:700;color:var(--muted);border:1px solid var(--line-2);border-radius:5px;padding:.12em .45em;flex:0 0 auto}
.oprow .who b{font-family:var(--display);font-size:1rem}
.oprow .who span.note{display:block;color:var(--muted);font-size:.82rem;line-height:1.45}
.oprow .tail{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.oprow .count{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--gold);min-width:64px;text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.oprow .arr{color:var(--gold);width:14px;text-align:center}

/* accordion (single-open enforced in JS) */
.qa{background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:10px;overflow:hidden}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--display);font-weight:700;font-size:.95rem;padding:14px 18px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .caret{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s;flex:0 0 auto}
.qa[open] summary .caret{transform:rotate(-135deg);border-color:var(--gold)}
.qa .body{padding:0 18px 16px;color:var(--muted);font-size:.92rem}

/* callout band */
.callout{background-color:#EAF2FB;background-image:linear-gradient(135deg,rgba(176,27,46,.12),rgba(90,200,232,.12));border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center;margin-top:26px}
.callout p{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,3vw,1.65rem);color:var(--text);margin:0;line-height:1.4}
.note-aff{font-size:.78rem;color:var(--muted);margin-top:10px}

/* ===================== MEGA-FOOTER (ported) ===================== */
.mf{position:relative;border-top:1px solid var(--line);margin-top:64px;padding:54px 0 26px;font-family:var(--body);background:#F7F9FB}
.mf::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(176,27,46,.55),rgba(90,200,232,.55),transparent);opacity:.6}
.mf-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:30px 28px}
.mf-brand .mf-logo{display:flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--text)}
.mf-brand .mf-logo b{color:var(--gold)}
.mf-brand p{color:var(--muted);font-size:.9rem;max-width:34ch;margin:.8em 0 1.1em}
.mf-soc{display:flex;flex-wrap:wrap;gap:8px}
.mf-soc a{display:inline-flex;align-items:center;font-family:var(--display);font-weight:600;font-size:.76rem;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:.4em .8em;transition:.15s}
.mf-soc a:hover{color:var(--gold);border-color:var(--gold)}
.mf .mf-h{font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;opacity:.92;font-weight:700}
.mf ul{list-style:none;margin:0;padding:0}.mf li{margin-bottom:9px}
.mf li a{color:var(--muted);font-size:.87rem;transition:color .15s,padding-left .15s}.mf li a:hover{color:var(--gold);padding-left:3px}
.mf-gens{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.mf-gens-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.mf-gens-head .mf-h{margin:0}
.mf-gens-head a{font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--gold)}
.mf-gens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1px 10px}
.mf-gens-grid a{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-family:var(--display);font-weight:600;font-size:.84rem;padding:8px;border-radius:8px;transition:color .15s,background .15s}
.mf-gens-grid a:hover{color:var(--text);background:rgba(26,20,16,.045)}
.mf-gens-grid a .cc{font-size:.54rem;font-weight:700;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line-2);border-radius:5px;padding:.1em .4em;flex:0 0 auto}
.mf-rg{margin-top:32px;padding:18px 22px;border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line));border-radius:var(--radius-sm);background:#EDF1F6;color:var(--muted);font-size:.79rem;line-height:1.6}
.mf-rg b{color:var(--text)}.mf-rg a{color:var(--mint)}
.mf-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
.mf-legal{display:flex;flex-wrap:wrap;gap:10px 16px}.mf-bot a{color:var(--muted)}.mf-bot a:hover{color:var(--gold)}

/* ---------- responsive (family breakpoints) ---------- */
@media(max-width:960px){
  .mn-groups,.mn-bar > .mn-cta{display:none}
  .mn-burger{display:block}
  .mn-logo{margin-right:0}
  .mf-top{grid-template-columns:repeat(3,1fr);gap:28px}.mf-brand{grid-column:1/-1;max-width:560px}
}
@media(max-width:880px){
  .pillars,.pillars.two{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .grid2{grid-template-columns:1fr}
  .oprow .who span.note{display:none}
}
@media(max-width:620px){.hero{padding:54px 0 24px}.section{padding:48px 0}}
@media(max-width:560px){.mf-top{grid-template-columns:1fr 1fr}.mf-gens-grid{grid-template-columns:1fr 1fr}.mf-bot{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto}
  .mn-shell,.mn-bar,.mn-panel,.mn-panel-inner>*,.mn-link,.mn-drawer,.mn-acc,.mn-acc-body,.mn-cta,.mn-mark,.mn-scrim{transition:none!important}
  .mn-panel{transform:none}
  .btn:hover,.acard:hover,.oprow:hover{transform:none}
}

/* ---------- thriving-guide components ---------- */
.hero-sil{background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:26px 0 0;display:flex;justify-content:center}
.hero-sil{display:flex;justify-content:center}
.hero-sil svg{width:100%;max-width:560px;height:auto;color:#0E141C}
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:20px;background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.statstrip .ss{background:#F5F7FA;padding:14px 10px;text-align:center;position:relative}
.statstrip .ss+.ss::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.statstrip .k{display:block;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.statstrip .v{display:block;font-family:var(--display);font-weight:700;font-size:1.08rem;margin-top:4px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.dmetric{background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px}
.dm-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dm-name{font-family:var(--display);font-weight:700;font-size:.92rem}
.dm-rank{font-family:var(--display);font-weight:700;font-size:.72rem;color:#B01B2E}
/* the rank gauge: crimson fill in a recessed steel channel. The fill is
   the signal, so it takes the brand colour; the track just has to read
   as an empty groove. Silver-on-grey had almost no contrast. */
.dm-bar{height:9px;background:#D5DEE7;border-radius:999px;margin:12px 0;overflow:hidden;
  box-shadow:0 1px 2px rgba(26,20,16,.13) inset}
.dm-bar>span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#8E1626,#B01B2E 55%,#C8203B);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset}
.dm-val{font-family:var(--display);font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.dm-formula{display:block;font-weight:500;font-size:.72rem;color:var(--muted);margin-top:4px}
.verified{font-size:.78rem;color:var(--muted);margin-top:12px;font-family:var(--display);font-weight:600}
@media(max-width:880px){.statstrip{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}.dgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dgrid{grid-template-columns:1fr}}
.oprow.other{background:#EDF1F6}
.oprow.other .count{color:var(--muted)}

/* ---------- mobile-safe tables ---------- */
.tablewrap .spec,.tablewrap .compare{margin-top:0;border:0;border-radius:0;min-width:560px;width:100%}
.tablewrap::-webkit-scrollbar{height:8px}
.tablewrap::-webkit-scrollbar-thumb{background:#D5DDE7;border-radius:999px}
@media(max-width:640px){
  .spec th,.spec td{padding:10px 10px;font-size:.82rem}
  .tablewrap .spec,.tablewrap .compare{min-width:440px}
  .compare th,.compare td{padding:10px 10px;font-size:.82rem}
  .statstrip .v{font-size:.94rem}
  .hero-sil{padding:14px}
}

/* ---------- records list: aligned columns on desktop, 2-row per plane on mobile ---------- */
.reclist{margin-top:26px;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.recrow{display:grid;grid-template-columns:48px minmax(0,1fr) 108px 190px;align-items:center;gap:0 14px;padding:11px 16px;border-top:1px solid var(--line);text-decoration:none;color:var(--text);background:#F7F9FB}
.recrow:first-child{border-top:0}
a.recrow:hover{background:#F5F7FA}
.recrow .rr-main,.recrow .rr-sub{display:contents}
.rr-rank{color:var(--gold);font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.rr-name{font-weight:600;min-width:0}
.rr-len{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
.rr-ft{color:var(--muted);font-size:.82em}
.rr-ff{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.rr-st{color:var(--muted);font-size:.88em}
.recrow.head{background:#F5F7FA;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.recrow.head .rr-rank,.recrow.head .rr-name,.recrow.head .rr-len,.recrow.head .rr-ff,.recrow.head .rr-st{all:unset;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){
  .recrow{grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 12px;padding:11px 14px}
  .recrow .rr-main{display:flex;justify-content:space-between;align-items:baseline;gap:10px;grid-column:2;grid-row:1;min-width:0}
  .recrow .rr-sub{display:flex;gap:10px;align-items:baseline;grid-column:2;grid-row:2}
  .rr-rank{grid-row:1 / span 2;align-self:center}
  .rr-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rr-ff::after{content:"·";margin-left:10px;color:var(--line)}
  .recrow.head{display:none}
}

/* ---------- luck.fyi-family hero energy ---------- */
.hero{background:#F7F9FB;background-image:radial-gradient(1100px 420px at 50% -160px,rgba(176,27,46,.07),rgba(176,27,46,0) 62%)}
.hero h1{font-size:clamp(38px,6vw,64px);letter-spacing:-.03em;line-height:1.04}
.heroChips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 4px;max-width:520px}
.chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#F7F9FB;border:1px solid var(--line);border-radius:14px;padding:10px 10px;font-size:.76rem;line-height:1.25;color:var(--muted);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);text-align:center;min-width:0}
.chip b{color:var(--text);font-weight:700;font-size:.98rem;white-space:nowrap}
.chip span{white-space:normal}
.chip .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- true-scale fleet windows ---------- */
.acard .sil{height:132px;min-height:0;padding:10px;align-items:center;justify-content:center}
.acard .sil svg{max-width:none;width:auto;height:auto;max-height:100%;display:block;margin:0 auto}

/* ---------- IATA brand chips (brand-inspired accent colours, text only — no trademarked logos) ---------- */
.iata{display:inline-flex;align-items:center;justify-content:center;min-width:33px;height:21px;padding:0 7px;border-radius:6px;color:#FFFFFF;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.05em;vertical-align:2px}
.iata.big{height:30px;min-width:46px;font-size:14px;border-radius:8px;vertical-align:6px}
@media (forced-colors:active){.iata{border:1px solid ButtonText}}

/* silbox: the svg width % is measured against the full inner width of the white window */
.acard .sil .silbox{width:100%;display:flex;align-items:center;justify-content:center}
.acard .sil .silbox svg{max-width:none;height:auto}
  .acard .sil .silbox svg{--silw:100%;width:100% !important}

/* ---------- Scale Engine ---------- */
.scalePicks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
.pick{display:flex;flex-direction:column;gap:6px;min-width:0}
.pick span{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pick select{width:100%;background:#F7F9FB;color:var(--text);border:1px solid var(--line);border-radius:11px;padding:11px 12px;font:inherit;font-size:.92rem;font-weight:600;cursor:pointer}
.pick select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scaleStage{background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.scaleStage svg{display:block;width:100%;height:auto;background:#F7F9FB}
.scaleStage text.sl{font-family:var(--display);font-size:15px;font-weight:700;fill:#0E141C}
.scaleStage text.sl2{font-family:var(--ui);font-size:12px;fill:#5B6672}
@media(max-width:640px){.scalePicks{grid-template-columns:1fr}.scaleStage text.sl{font-size:19px}.scaleStage text.sl2{font-size:16px}}

/* ---------- mobile hero: centred, breathing, nothing clipped ---------- */
@media(max-width:640px){
  .hero{padding:40px 0 26px;text-align:center}
  .hero h1{max-width:none;margin:0 auto .35em;font-size:clamp(32px,8.6vw,42px)}
  .hero .lead{margin-left:auto;margin-right:auto;max-width:34ch}
  .hero .crumb,.hero .kicker{justify-content:center}
  .heroChips{margin:20px auto 6px;gap:9px;max-width:100%}
  .heroCtas{justify-content:center;gap:10px;margin-top:20px}
  .heroCtas .btn{flex:1 1 100%;justify-content:center;text-align:center}
  .acard .sil{height:112px}
  .hero-sil{margin-top:8px}
}

/* ================= ANIMATED NAV BRAND — ported verbatim from luck.fyi ================= */
/* ---- the mark ---- */
.mn-mark{width:26px;height:26px;flex:0 0 auto;
  transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.mn-logo:hover .mn-mark{transform:rotate(14deg) scale(1.08)}

.mn-mark .mm-b{position:relative;box-sizing:border-box;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:8px;letter-spacing:-.03em;
  color:#FFFFFF;background:#B01B2E;border:0;border-radius:6px;
  transition:opacity .22s ease, transform .22s ease}

.mn-mark .mm-b.emo{background:transparent;border-radius:0;font-size:17px}
.mn-mark .mm-b.mo{opacity:0;transform:scale(.55) rotate(-25deg)}
.mn-mark .mm-b.mi{opacity:0;transform:scale(.55) rotate(25deg)}

/* ---- the .fyi expander ---- */
.mn-logo .lw{display:inline-flex;align-items:baseline}
.mn-logo b{display:inline-flex;align-items:baseline;font-weight:700;color:var(--signal)}
.mn-logo b .ld{font-style:normal;margin:0 .13em}
.mn-logo b .fw{display:inline-flex;align-items:baseline;overflow:hidden;white-space:nowrap;
  transition:width .32s ease}
.mn-logo b .fwt{display:inline-block;transition:opacity .26s ease, transform .26s ease}
.mn-logo b .fwt.fo{opacity:0;transform:translateY(-72%)}
.mn-logo b .fwt.fi{opacity:0;transform:translateY(72%)}
@media (forced-colors:active){.mn-mark .mm-b{border-color:ButtonText;color:ButtonText}}

/* ---------- fleet filter ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px}
.fchip{display:inline-flex;align-items:center;gap:6px;background:#F7F9FB;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-family:var(--display);font-weight:600;font-size:.84rem;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}
.fchip:hover{border-color:var(--line-2);color:var(--text)}
.fchip .n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:.76rem;opacity:.7}
.fchip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#FFFFFF}
.fchip[aria-pressed="true"] .n{opacity:.85}
.fchip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (forced-colors:active){.fchip[aria-pressed="true"]{background:Highlight;color:HighlightText}}
@media(max-width:640px){
  .filterbar{gap:6px;margin:16px 0 20px}
  .fchip{padding:7px 11px;font-size:.78rem;flex:1 1 auto;text-align:center;justify-content:center}
  .filterbar .fsort-lbl{flex:1 1 100%;text-align:center;margin-bottom:2px}
}

/* verified operator tick */
.vtick{display:inline-block;margin-left:5px;color:var(--mint);font-weight:700;font-size:.8em;cursor:help}

/* ---------- petition ---------- */
.petStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:#F7F9FB}
.petStats .ss{display:flex;flex-direction:column;gap:4px;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.petStats .k{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.petStats .v{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--text);font-variant-numeric:tabular-nums}
.pick input[type=text]{width:100%;background:#F7F9FB;color:var(--text);border:1px solid var(--line);border-radius:11px;padding:12px;font:inherit;font-size:.95rem;cursor:text}
.pick input[type=text]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.slideWrap{--p:0%;position:relative;height:54px;border-radius:999px;background:#F5F7FA;border:1px solid var(--line);overflow:hidden;cursor:grab;user-select:none;display:flex;align-items:center;justify-content:center}
.slideWrap:active{cursor:grabbing}
.slideWrap:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.slideFill{position:absolute;inset:0 auto 0 0;width:var(--p);background:rgba(176,27,46,.14);pointer-events:none}
.slideLabel{position:relative;font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--muted);pointer-events:none}
.slideKnob{position:absolute;top:5px;left:5px;width:42px;height:42px;border-radius:50%;background:var(--gold);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:.82rem;transform:translateX(calc((100% + 0px) * 0));margin-left:calc(var(--p) * 0.92);transition:margin-left .06s linear;pointer-events:none}
.slideWrap.done{background:rgba(10,125,69,.08);border-color:var(--mint);cursor:default}
.slideWrap.done .slideKnob{background:var(--mint)}
.slideWrap.done .slideLabel{color:var(--mint);font-weight:700}
.slideReset{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#F7F9FB;color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1}
.slideReset:hover{color:var(--text);border-color:var(--line-2)}
.slideReset:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:640px){.petStats{grid-template-columns:1fr 1fr}}
@media (forced-colors:active){.slideFill{background:Highlight}.slideKnob{background:ButtonText;color:ButtonFace}}

/* plain bar links (desktop only — the drawer covers mobile) */
.mn-plain{display:none;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--muted);padding:8px 10px;border-radius:9px}
.mn-plain:hover{color:var(--text);background:var(--ink-2)}
.mn-plain:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(min-width:901px){.mn-plain{display:inline-flex;align-items:center}}

/* ---------- compare tool ---------- */
.cmpPicks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px;background:#F7F9FB}
.cmpPicks .pick span i{font-style:normal;color:var(--muted);font-weight:400}
.cmpPicks select{width:100%;background:#F7F9FB;color:var(--text);border:1px solid var(--line);border-radius:11px;padding:12px;font:inherit;font-size:.95rem;font-family:var(--display);font-weight:600;cursor:pointer}
.cmpPicks select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cmpBar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.btn.sm{padding:8px 14px;font-size:.82rem}
td.win{color:var(--mint);font-weight:700}
td.win::after{content:" ▲";font-size:.7em;opacity:.75}
@media(max-width:760px){.cmpPicks{grid-template-columns:1fr}}
@media (forced-colors:active){td.win{color:Highlight}}

/* the hand-written verdict that opens every marquee matchup */
.prose p.verdict{font-family:var(--display);font-size:1.12rem;line-height:1.55;color:var(--text);font-weight:500;background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;margin:0 0 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
@media(max-width:640px){.prose p.verdict{font-size:1.02rem;padding:16px 18px}}

/* ---------- site search ---------- */
.mn-search{display:none;align-items:center;gap:8px;background:#F7F9FB;border:1px solid var(--line);border-radius:999px;padding:7px 10px 7px 12px;color:var(--muted);font-family:var(--display);font-weight:600;font-size:.86rem;cursor:pointer}
.mn-search:hover{border-color:var(--line-2);color:var(--text)}
.mn-search:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mn-search svg{width:15px;height:15px}
.mn-search kbd{font-family:var(--mono,ui-monospace,monospace);font-size:.68rem;background:var(--ink-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--muted)}
.mn-search-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#F7F9FB;color:var(--muted);cursor:pointer;margin-left:auto;margin-right:8px}
.mn-search-icon svg{width:17px;height:17px}
.mn-search-icon:hover{color:var(--text);border-color:var(--line-2)}
.mn-search-icon:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(min-width:901px){.mn-search{display:inline-flex}.mn-search-icon{display:none}}

.srch{position:fixed;inset:0;z-index:620;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.srch[hidden]{display:none}
.srch-scrim{position:absolute;inset:0;background:rgba(26,20,16,.42);backdrop-filter:blur(3px)}
.srch-box{position:relative;width:100%;max-width:600px;background:#F7F9FB;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(26,20,16,.24),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden}
.srch-in{display:flex;align-items:center;gap:10px;padding:14px 14px;border-bottom:1px solid var(--line);background:#F7F9FB}
.srch-in svg{width:18px;height:18px;color:var(--muted);flex:none}
.srch-in input{flex:1;border:0;background:#F7F9FB;color:var(--text);font:inherit;font-size:1.02rem;font-family:var(--display);font-weight:600;cursor:text;outline:none;min-width:0}
.srch-close{background:var(--ink-2);border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:.7rem;font-weight:700;padding:4px 8px;cursor:pointer;flex:none}
.srch-close:hover{color:var(--text)}
.srch-res{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto;background:#F7F9FB}
.srch-res li{border-radius:11px}
.srch-res li.on{background:var(--ink-2)}
.srch-res a{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"k t" "k d";gap:0 12px;align-items:center;padding:11px 12px;text-decoration:none}
.srch-res .sr-k{grid-area:k;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:rgba(176,27,46,.09);border-radius:6px;padding:5px 7px;min-width:74px;text-align:center}
.srch-res .sr-t{grid-area:t;font-family:var(--display);font-weight:700;color:var(--text);font-size:.98rem}
.srch-res .sr-d{grid-area:d;color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-none{padding:22px 14px;color:var(--muted);font-size:.92rem;text-align:center}
.srch-hint{margin:0;padding:10px 14px;border-top:1px solid var(--line);background:#F5F7FA;color:var(--muted);font-size:.74rem;text-align:center}
.srch-hint b{color:var(--text)}
@media(max-width:640px){.srch{padding:8vh 12px 12px}.srch-hint{display:none}.srch-res .sr-k{min-width:64px;font-size:.58rem}}
@media (forced-colors:active){.srch-box{border:2px solid ButtonText}.srch-res li.on{background:Highlight}}

/* compare jump-off on aircraft pages */
.cmpJump{background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;margin:30px 0 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.cmpJumpRow{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:640px){.cmpJump{padding:16px 18px}}

/* ---------- fleet sort + tray + flights board ---------- */
.fsort-lbl{align-self:center;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-right:2px}

.acard{position:relative}
.addcmp{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#F7F9FB;color:var(--muted);font-size:.95rem;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.addcmp:hover{color:var(--text);border-color:var(--line-2)}
.addcmp[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#FFFFFF}
.addcmp:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button.btn.addcmp{position:static;width:auto;height:auto;font-size:.82rem;border-radius:11px}
button.btn.addcmp[aria-pressed="true"]{background:var(--gold);color:#FFFFFF;border-color:var(--gold)}
#trayPill{position:fixed;right:18px;bottom:18px;z-index:150;display:flex;align-items:center;gap:4px;background:#0E141C;border:1px solid #0E141C;border-radius:999px;padding:6px 6px 6px 16px;box-shadow:0 12px 34px rgba(26,20,16,.3)}
#trayPill[hidden]{display:none}
#trayPill a{color:#FFFFFF;font-family:var(--display);font-weight:700;font-size:.88rem;text-decoration:none;padding:6px 4px}
#trayPill button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#FFFFFF;font-size:1rem;cursor:pointer}
#trayPill button:hover{background:rgba(255,255,255,.26)}
@media(max-width:640px){#trayPill{right:12px;bottom:12px}}
@media (forced-colors:active){#trayPill{border:2px solid ButtonText}}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 18px;background:#F7F9FB}
.pn-a{display:flex;flex-direction:column;gap:4px;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.pn-a:hover{border-color:var(--line-2)}
.pn-a.next{text-align:right;align-items:flex-end}
.pn-k{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.pn-a b{font-family:var(--display);color:var(--text);font-size:.98rem}
@media(max-width:520px){.pn{grid-template-columns:1fr}.pn-a.next{text-align:left;align-items:flex-start}}

.flbar{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;background:#F7F9FB}
.flrow{display:grid;grid-template-columns:44px 1fr auto;gap:6px 14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#F7F9FB;margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.flrow.soon{background:#F5F7FA}
.fl-rank{font-family:var(--display);font-weight:700;color:var(--muted);font-size:1.05rem}
.fl-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.fl-route{font-family:var(--display);font-weight:700;color:var(--text);font-size:1.02rem}
.fl-route i{font-style:normal;font-size:.72em;color:var(--muted);font-weight:600;letter-spacing:.04em}
.fl-sub{color:var(--muted);font-size:.85rem}
.fl-sub a{color:var(--gold)}
.fl-note{color:var(--muted)}
.fl-tail{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.fl-tail b{font-family:var(--display);font-size:1.05rem;color:var(--text);font-variant-numeric:tabular-nums}
.fl-st{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.fl-st.fly{color:var(--mint);background:rgba(10,125,69,.09)}
.fl-st.soon{color:var(--gold);background:rgba(176,27,46,.1)}
@media(max-width:640px){.flrow{grid-template-columns:34px 1fr}.fl-tail{grid-column:2;flex-direction:row;align-items:center;gap:10px;margin-top:2px}}

/* ---------- disc opens on the planform mark ---------- */
.mn-mark .mm-b.pln svg{width:78%;height:78%;display:block;margin:auto}

/* ---------- mega nav: never taller than the viewport ---------- */
.mn-panel{max-height:calc(100vh - 88px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.mn-panel::-webkit-scrollbar{width:8px}
.mn-panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}

/* ---------- fleet grid columns ---------- */
.cols-m{display:none}
@media(min-width:901px){
  /* desktop card grids are 3-up by default, never 2 */
  .cardgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cardgrid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cardgrid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cardgrid .acard h3,.cardgrid.cols-4 .acard h3{font-size:1.02rem}
  .cardgrid.cols-4 .acard{padding:16px 16px 14px}
  .cardgrid.cols-4 .acard .kicker{font-size:.72rem}
  .cardgrid.cols-4 .acard .stats .k{font-size:.62rem}
  .cardgrid.cols-4 .acard .stats .v{font-size:.8rem}
}
@media(max-width:900px){
  .cols-d{display:none}
  .cols-m{display:inline-flex}
}
@media(max-width:640px){
  .cardgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cardgrid .acard{padding:14px 12px 12px}
  .cardgrid .acard h3{font-size:.9rem}
  .cardgrid .acard .stats,.cardgrid .acard .mini{display:none}
  .cardgrid .acard .kicker{font-size:.68rem;margin-bottom:2px}
  .cardgrid.mcols-1{grid-template-columns:1fr;gap:14px}
  .cardgrid.mcols-1 .acard{padding:22px 20px 18px}
  .cardgrid.mcols-1 .acard h3{font-size:1.05rem}
  .cardgrid.mcols-1 .acard .stats{display:grid}
  .cardgrid.mcols-1 .acard .mini{display:inline-block}
  .cardgrid.mcols-1 .acard .kicker{font-size:.78rem}
}

/* ---------- desktop: page chrome centered on the page axis ---------- */
@media(min-width:901px){
  .hero .wrap{text-align:center}
  .hero h1,.hero p.lead,.hero .crumb{margin-left:auto;margin-right:auto}
  .hero .heroChips{margin-left:auto;margin-right:auto}
  .heroCtas{justify-content:center}
  .section .eyebrow{display:block;text-align:center}
  .section h2.title{text-align:center;margin-left:auto;margin-right:auto}
  .section .sub{text-align:center;margin-left:auto;margin-right:auto;max-width:64ch}
  .filterbar,.cmpBar,.cmpJumpRow,.flbar{justify-content:center}
  .cmpJump{text-align:center}
  .prose,.prose p{text-align:left}   /* long-form articles stay readable */
}


/* ---------- language pill ---------- */
.lang{position:relative;margin-left:8px}
.lang-btn{display:inline-flex;align-items:center;gap:7px;background:#F7F9FB;border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--muted);font-family:var(--display);font-weight:700;font-size:.78rem;cursor:pointer}
.lang-btn:hover{color:var(--text);border-color:var(--line-2)}
.lang-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang-btn svg{width:15px;height:15px}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:#F7F9FB;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 46px rgba(26,20,16,.16),inset 0 1px 0 rgba(255,255,255,.7);list-style:none;margin:0;padding:6px;z-index:60;max-height:min(70vh,480px);overflow-y:auto}
.lang-menu[hidden]{display:none}
.lang-menu a{display:block;padding:9px 12px;border-radius:9px;color:var(--text);text-decoration:none;font-size:.9rem}
.lang-menu a:hover{background:var(--ink-2)}
.lang-menu a.on{color:var(--gold);font-weight:700}
html[dir="rtl"] .lang-menu{right:auto;left:0}

/* ---------- RTL essentials (Arabic) ---------- */
html[dir="rtl"] .addcmp{right:auto;left:12px}
html[dir="rtl"] .pn-a.next{text-align:left;align-items:flex-start}
html[dir="rtl"] .pn-a:not(.next){text-align:right;align-items:flex-end}
html[dir="rtl"] .fl-tail{align-items:flex-start}
html[dir="rtl"] #trayPill{right:auto;left:18px}
html[dir="rtl"] .srch-res a{grid-template-areas:"t k" "d k"}
.i18n-note{border:1px solid rgba(140,153,166,.4);background:rgba(140,153,166,.06);border-radius:8px;padding:8px 12px;margin:0 0 18px;font-size:.82rem}
.lang-cur{letter-spacing:.06em}

/* ---------- home hero rhythm (desktop) — restored; a write was lost in the outage era ---------- */
@media(min-width:901px){
  .hero.home{padding:76px 0 48px}
  .hero.home h1{margin:.3em auto .18em}
  .hero.home p.lead{margin:0 auto 6px}
.hero.home .heroSearch{margin:24px auto 0}
  .hero.home .heroChips{grid-template-columns:repeat(4,minmax(0,1fr));max-width:780px;margin:26px auto;gap:10px}
  .hero.home .heroCtas{margin:40px 0 0}
}

/* ---------- fleet tools: filter row, then sort + grid together on one tidy line ---------- */
#fleetFilter{margin:20px 0 12px}
.fleetTools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 28px;margin:0 0 22px}
@media(max-width:640px){
  .fleetTools{flex-direction:column;align-items:stretch;gap:12px}
  .fleetTools .filterbar{width:100%;margin:0}
}
.fleetTools .filterbar{margin:0}
.colsbar{gap:8px}

/* more-makers flows across two internal columns inside its panel column */
.mn-2col{columns:2;column-gap:16px}
.mn-2col .mn-link{break-inside:avoid;-webkit-column-break-inside:avoid}


/* nav: dropdown groups live in the right cluster, just left of Records */
@media(min-width:901px){.mn-groups{margin-left:auto}}

/* ---------- the spec table (maker / type / airline pages) ---------- */
.specwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:#F7F9FB;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);margin:18px 0 8px}
.spec{width:100%;border-collapse:collapse;background:#F7F9FB;font-size:.92rem;min-width:560px}
.spec th{font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-2);background:#F5F7FA}
.spec td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle}
.spec tbody tr:last-child td{border-bottom:0}
.spec tbody tr:hover td{background:#F5F7FA}
.spec td a{color:var(--text);font-weight:600;text-decoration:none}
.spec td a:hover{color:var(--gold)}
.spec td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(min-width:901px){.spec th,.spec td{text-align:left}}

/* single-border wrapper for JS-built tables (compare tool) — distinct from .specwrap */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:26px;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm)}

/* airlines panel: majors flow across three internal columns */
.mn-3col{columns:3;column-gap:14px}
.mn-3col .mn-link{break-inside:avoid;-webkit-column-break-inside:avoid}

/* airline headline: hidden in compact grids, back in the roomy ones */
@media(max-width:640px){
  .cardgrid .acard .alh{display:none}
  .cardgrid.mcols-1 .acard .alh{display:block}
}
@media(min-width:901px){
  .cardgrid.cols-4 .acard .alh{display:none}
}

/* ---------- airline pages: the fleet lineup at true scale ---------- */
.allineup{display:flex;align-items:flex-end;gap:2.5%;margin:18px 0 6px;padding:20px 18px 14px;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.allineup .lu{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-decoration:none}
.allineup .lu-s{width:100%}
.allineup .lu-s svg{width:100%;height:auto;display:block}
.allineup .lu-n{font-family:var(--display);font-weight:600;font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.allineup .lu:hover .lu-n{color:var(--gold)}
@media(max-width:640px){.allineup{gap:2%;padding:12px 10px 8px}.allineup .lu-n{font-size:.55rem}}

/* fleet cards: count chip + operator note */
.flcard{position:relative}
.opcount{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.05em;color:var(--gold);background:#F7F9FB;border:1px solid var(--line);border-radius:999px;padding:.3em .7em}
.opnote{color:var(--muted);font-size:.8rem;margin:-8px 0 12px}
@media(max-width:640px){
  .cardgrid .acard .opnote{display:none}
  .cardgrid.mcols-1 .acard .opnote{display:block}
}

/* record chips + facts */
.recrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.recchip{display:inline-block;background:#F7F9FB;border:1px solid var(--line);border-radius:999px;padding:.55em 1.05em;font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--text);text-decoration:none}
.recchip:hover{border-color:var(--gold);color:var(--gold)}
.facts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.facts li{position:relative;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 16px 13px 38px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);font-size:.95rem}
.facts li::before{content:"";position:absolute;left:16px;top:1.2em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.rt-ann{font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-2);border-radius:5px;padding:.12em .45em;margin-left:6px;vertical-align:1px}

/* ---------- how big is it, really? ---------- */
.sizebars{margin:16px 0 0;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);padding:18px 18px 14px;display:grid;gap:11px}
.szrow{display:grid;grid-template-columns:minmax(120px,180px) 1fr 74px;gap:12px;align-items:center}
.szl{font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.szb{position:relative;height:12px;background:#F5F7FA;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.szb i{position:absolute;inset:0 auto 0 0;background:var(--line-2);border-radius:999px}
.szrow.me .szl{color:var(--text)}
.szrow.me .szb i{background:var(--gold)}
.szv{font-family:var(--display);font-weight:700;font-size:.78rem;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:640px){.szrow{grid-template-columns:minmax(86px,110px) 1fr 58px;gap:8px}.szl,.szv{font-size:.66rem}}

/* ---------- the silhouette quiz ---------- */
.quizcard{background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);padding:26px 26px 22px;max-width:620px;margin:14px auto 0}
.qstat{display:flex;justify-content:space-between;font-family:var(--display);font-size:.8rem;color:var(--muted);margin-bottom:10px}
.qstat b{color:var(--text);font-size:1rem;margin-left:6px}
.qsil{height:190px;display:flex;align-items:center;justify-content:center;background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:16px;padding:14px}
.qsil svg{max-height:100%;max-width:100%;height:100%;width:auto}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qopt{background:#F7F9FB;border:1px solid var(--line);border-radius:11px;padding:12px 12px;font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--text);cursor:pointer;text-align:center}
.qopt:hover{border-color:var(--line-2)}
.qopt.ok{border-color:#1E8E3E;color:#1E8E3E;background:#F2FBF5}
.qopt.no{border-color:#C5221F;color:#C5221F;background:#FDF4F4}
.qmsg{text-align:center;color:var(--muted);font-size:.9rem;margin:14px 0 4px;min-height:1.4em}
.qrow{display:flex;justify-content:center;gap:10px;margin-top:6px}
@media(max-width:640px){.qopts{grid-template-columns:1fr}.qsil{height:150px}}

/* hero paragraphs without a class behave like leads (the weird-centering fix) */
.hero .wrap > p:not([class]){max-width:62ch;margin-left:auto;margin-right:auto;color:var(--muted)}

/* retired fleet cards: quieter */
.pastcard .sil{opacity:.55}
.pastcard .opcount{color:var(--muted)}

/* prose gets a proper reading measure — centered column, left-aligned text.
   Fixes the full-width paragraph bug under centered headings, sitewide. */
.prose{max-width:70ch;margin-left:auto;margin-right:auto}

/* every hero CTA row gets breathing room at every width (no coverage gaps) */
.heroCtas{margin-top:26px}

/* temporary launch banner (home) — delete this rule + the div in build.js when done */
.wip{background:#F5F7FA;border-bottom:1px solid var(--line);text-align:center;font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--muted);padding:9px 16px;letter-spacing:.02em}

/* ---------- affiliate: gear card (aircraft pages) + hangar shop (/gear) ---------- */
.gearcard{display:flex;gap:16px;align-items:flex-start;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);padding:18px;margin:8px 0 26px;max-width:70ch;margin-left:auto;margin-right:auto}
.gear-tag{display:inline-block;font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-2);border-radius:6px;padding:.25em .6em;margin-bottom:8px}
.gearcard .gear-body h3{font-size:1.05rem;margin:0 0 6px}
.gearcard .gear-body p{color:var(--muted);font-size:.92rem;margin:0 0 12px}
.gear-cta{display:inline-block;background:var(--gold);color:#FFFFFF;font-family:var(--display);font-weight:700;font-size:.86rem;border-radius:11px;padding:.6em 1.1em;text-decoration:none}
.gear-cta:link,.gear-cta:visited{color:#FFFFFF}
.gear-cta:hover{filter:brightness(1.05)}
.gear-disc{font-size:.72rem;color:var(--muted);margin:12px 0 0;line-height:1.5}
.gearlist{display:grid;gap:16px;max-width:760px;margin:14px auto 0}
.gearitem{background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);padding:22px}
.gearitem h3{font-size:1.15rem;margin:0 0 8px}
.gearitem p{color:var(--muted);margin:0 0 16px}
.gear-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gear-alt{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:11px;padding:.55em 1em}
.gear-alt:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- hangar shop: groups + owned checklist ---------- */
.geargroup{margin:0 0 34px}
.geargroup .eyebrow{text-align:center}
.geargroup > .sub{text-align:center;max-width:60ch}
.gi-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.gi-own{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.04em;color:var(--muted);background:#F7F9FB;border:1px solid var(--line);border-radius:999px;padding:.35em .8em;cursor:pointer;white-space:nowrap}
.gi-own:hover{border-color:var(--line-2);color:var(--text)}
.gi-own[aria-pressed="true"]{color:#FFFFFF;background:#1E8E3E;border-color:#1E8E3E}
.gearitem.owned{border-color:#1E8E3E;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(30,142,62,.25)}

/* ---------- silhouette category legend ---------- */
.sillegend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);padding:18px 20px}
.slg{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--text)}
.slg i{width:16px;height:16px;border-radius:5px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* legend chips: name links + copyable hex */
.slg{display:inline-flex;align-items:center;gap:8px}
.slg-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-family:var(--display);font-weight:600;font-size:.8rem}
.slg-link:hover{color:var(--gold)}
.slg-hex{font-family:var(--mono,ui-monospace,monospace);font-size:.68rem;font-weight:600;color:var(--muted);background:#F5F7FA;border:1px solid var(--line);border-radius:6px;padding:.2em .5em;cursor:pointer;letter-spacing:.02em}
.slg-hex:hover{border-color:var(--line-2);color:var(--text)}
.slg-hex.ok{color:#1E8E3E;border-color:#1E8E3E}

/* ---------- two-tier sources ---------- */
.srcwrap{max-width:64ch;margin:10px auto 0;text-align:left}
.src-sub{display:block;font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.src-primary{margin:0}
.src-further{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* stacked accordions on guide pages */
.qa-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}

/* footer sub-heading spacing when a column stacks two groups */
.mf-h.mt{margin-top:20px}

/* airline cards: IATA tag on its own top line, name beneath */
.acard > .iata{margin-bottom:9px;vertical-align:baseline}

/* ---------- body copy: justified with a natural last line ----------
   hyphens:auto prevents the word-gap "rivers" justification causes on narrow columns. */
p{text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto}
.prose p,.qa .body,.acard p,.alh,.opnote,.gearitem p,.gearcard .gear-body p,.mf-rg{text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto}
/* display, UI and deliberately-centred text keeps its design — never justified */
.lead,.sub,.kicker,.eyebrow,.gear-disc,.dm-formula,
.hero p,.callout p,.statstrip p,.mf p,.pn p,.facts li{
  text-align:inherit;text-align-last:auto;hyphens:none;-webkit-hyphens:none}
/* these centre themselves — keep that, just don't justify them */
.srch-hint,.srch-none{text-align:center;text-align-last:auto;hyphens:none;-webkit-hyphens:none}






/* ---------- hero search: ONE surface that changes shape ----------
   Collapsed it is a pill exactly as tall as .btn (which is .95rem text, .85em padding, no
   border) — the bar's padding is 1px shorter top and bottom to absorb the 1px border.
   As you type the SAME element grows and its corners relax from a pill into a card. */
.heroSearch{position:relative;width:100%;max-width:520px;margin:0 auto 20px;text-align:left;
  background:#F7F9FB;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;
  box-shadow:0 8px 22px -16px rgba(16,32,56,.55);
  transition:border-radius .3s ease,border-color .2s ease,box-shadow .3s ease}
.heroSearch:hover,.heroSearch:focus-within{border-color:#B01B2E;box-shadow:0 12px 28px -16px rgba(176,27,46,.55)}
.heroSearch.on{border-radius:22px;border-color:#B01B2E;box-shadow:0 20px 46px -26px rgba(26,20,16,.45)}
/* the input row — no chrome of its own, it is part of the one surface */
.hs-bar{position:relative;display:flex;align-items:center;gap:11px;
  font-size:16px;line-height:1.5;                 /* 16px: anything smaller makes iOS zoom on focus */
  min-height:calc(.95rem * 3.35 - 2px);           /* .btn = .95rem x (.85 x2 + 1.65); less the 2px border */
  padding:0 1.2em;background:#F7F9FB;border:0}
.hs-i{width:17px;height:17px;flex:none;color:#B01B2E}
.hs-in{flex:1;min-width:0;border:0;outline:none;background:#F7F9FB;color:var(--text);
  font:inherit;line-height:inherit;cursor:text}
.hs-ph{position:absolute;left:calc(1.2em + 28px);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;pointer-events:none;color:var(--muted);white-space:nowrap;
  overflow:hidden;max-width:calc(100% - 1.2em - 40px)}
.hs-cur{display:inline-block;width:1.5px;height:1.05em;background:#B01B2E;margin-left:2px;flex:none;
  animation:hsBlink 1.05s steps(1,end) infinite}
@keyframes hsBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* results live INSIDE that surface — zero height until there is something to show */
.hs-res{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;background:#F7F9FB;
  border:0;border-radius:0;transition:max-height .3s ease,padding .3s ease}
.heroSearch.on .hs-res{max-height:300px;overflow-y:auto;padding:6px}
/* divider belongs to the bar, and only exists once the surface has opened */
.heroSearch.on .hs-bar{border-bottom:1px solid var(--line)}
@media(max-width:520px){.heroSearch{font-size:.9rem}}


@media(prefers-reduced-motion:reduce){.hs-cur{animation:none}.hs-res{transition:none}}

/* ---------- iOS zooms any focused control under 16px — lift them on touch-sized screens ---------- */
@media(max-width:768px){
  .pick select,.pick input[type=text],.cmpPicks select{font-size:16px}
}

/* ---------- Gate Runner ---------- */
.flywrap{margin-top:8px}
.flystage{position:relative;width:100%;height:min(78vh,760px);border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:#8FC4F0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);touch-action:none}
#flyScene{position:absolute;inset:0;width:100%;height:100%;display:block;background:#8FC4F0}
.flyhud{position:absolute;inset:10px 12px auto 12px;display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;pointer-events:none;font-family:var(--display);font-size:.72rem;color:#0E141C}
.fh-l{background:#F7F9FB;border:1px solid var(--line);border-radius:11px;padding:6px 10px;line-height:1.25}
.fh-l b{display:block;font-size:.82rem}
.fh-l span{color:var(--muted)}
.fh-r{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.fh-r span{background:#F7F9FB;border:1px solid var(--line);border-radius:9px;padding:5px 8px;color:var(--muted)}
.fh-r b{color:#0E141C;font-size:.82rem}
/* a real thumb-stick, tucked bottom-left so it never covers the aircraft */
.flystick{position:absolute;left:16px;bottom:16px;z-index:3;width:142px;height:142px;border-radius:50%;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  box-shadow:0 6px 18px -10px rgba(26,20,16,.5);touch-action:none;display:none}
.flyknob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:#F7F9FB;border:1px solid var(--line-2);box-shadow:0 3px 10px -4px rgba(26,20,16,.55);
  display:block;transition:transform .12s ease}
.flystick.on .flyknob{transition:none}
@media(pointer:coarse){.flystick{display:block}}
.flythr{position:absolute;right:16px;bottom:16px;z-index:3;width:56px;height:172px;border-radius:28px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);overflow:hidden;touch-action:none;display:none;
  box-shadow:0 6px 18px -10px rgba(26,20,16,.5)}
.ft-fill{position:absolute;left:0;right:0;bottom:0;height:33%;background:rgba(176,27,46,.22);display:block}
.ft-knob{position:absolute;left:5px;right:5px;height:34px;bottom:calc(33% - 17px);border-radius:17px;
  background:#F7F9FB;border:1px solid var(--line-2);box-shadow:0 3px 10px -4px rgba(26,20,16,.55);display:block}
.ft-val{position:absolute;left:0;right:0;top:8px;text-align:center;font-family:var(--display);font-weight:700;
  font-size:.66rem;color:#B01B2E;pointer-events:none}
@media(pointer:coarse){.flythr{display:block}}
.flymsg{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:22px;background:rgba(255,255,255,.93);backdrop-filter:blur(3px)}
.flymsg[hidden]{display:none}
@keyframes flyHit{
  0%{background:rgba(196,52,43,.92)}
  38%{background:rgba(196,52,43,.72)}
  100%{background:rgba(255,255,255,.93)}
}
@media(prefers-reduced-motion:reduce){.flyend.crash .flyend-card{animation:none}}
.flymsg h3{margin:0;font-family:var(--display);font-size:1.15rem;color:var(--text)}
/* the picker lives inside the overlay, so the whole game fits one screen */
.flypick{width:100%;max-width:520px;display:flex;flex-direction:column;gap:8px;min-height:0}
.flyfilter{width:100%;font-family:var(--body);font-size:16px;color:var(--text);background:#F7F9FB;
  border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.flyfilter:focus{outline:none;border-color:#B01B2E}
.flybands{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.flyband{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);background:#F7F9FB;border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;cursor:pointer}
.flyband.on{color:#B01B2E;border-color:#B01B2E}
.flygrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow-y:auto;min-height:0;
  max-height:min(38vh,260px);padding:2px;text-align:left}
.flyopt{display:flex;flex-direction:column;gap:1px;background:#F7F9FB;border:1px solid var(--line);
  border-radius:11px;padding:7px 9px;cursor:pointer;font-family:var(--body);text-align:left}
.flyopt:hover{border-color:#B01B2E}
.flyopt.on{border-color:#B01B2E;box-shadow:0 0 0 2px rgba(176,27,46,.15)}
.fo-n{font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--text);line-height:1.2}
.fo-m{font-size:.66rem;color:var(--muted)}
.fo-b{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.b-forgiving{color:#2C7A46}.b-tricky{color:#B01B2E}.b-hard{color:#B26A05}.b-brutal{color:#B3352C}
.flynone{grid-column:1/-1;margin:0;padding:14px;color:var(--muted);font-size:.82rem;text-align:center}

.flymsg p{margin:0;max-width:44ch;color:var(--muted);font-size:.92rem;text-align:center}
.flyrow{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.flylab{font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--muted);
  letter-spacing:.07em;text-transform:uppercase}
.flysel{flex:1;min-width:240px;font-family:var(--body);font-size:16px;color:var(--text);
  background:#F7F9FB;border:1px solid var(--line);border-radius:11px;padding:11px 13px;cursor:pointer}
.flysel:focus{outline:none;border-color:#B01B2E}
@media(max-width:640px){.flystage{height:min(74vh,680px)}.fh-r{max-width:52%}}

/* ---------- Blueprint Designer ---------- */
.dzwrap{margin-top:8px}
.dzstage{position:relative;width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:#F7F9FB;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);touch-action:none}
#dzScene{display:block;width:100%;height:auto;background:#F7F9FB;cursor:grab}
#dzScene:active{cursor:grabbing}
.dzhint{position:absolute;left:14px;bottom:12px;margin:0;font-family:var(--display);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);pointer-events:none}
/* one dropdown, one slider — sized like a card so it sits comfortably under the drawing */
.dzbar{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:520px}
.dsel{font-family:var(--body);font-size:16px;color:var(--text);background:#F7F9FB;
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;cursor:pointer;width:100%}
.dsel:focus{outline:none;border-color:#B01B2E}
.dzslide{display:flex;align-items:center;gap:12px;background:#F7F9FB;border:1px solid var(--line);
  border-radius:14px;padding:10px 14px}
.dzslide input[type=range]{flex:1;min-width:0;accent-color:#B01B2E;height:26px;cursor:pointer;background:transparent}
.dpv{font-family:var(--display);font-weight:700;font-size:.84rem;color:var(--gold);
  font-variant-numeric:tabular-nums;min-width:112px;text-align:right;white-space:nowrap}
.dzbtns{display:flex;gap:8px;flex-wrap:wrap}
@media(min-width:900px){.dzstage{max-height:48vh}#dzScene{max-height:48vh}}
.dzout{margin-top:18px}
.dzout label{display:block;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
#dzPrompt{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;
  color:var(--text);background:#F7F9FB;border:1px solid var(--line);border-radius:14px;padding:13px;resize:vertical}
#dzPrompt:focus{outline:none;border-color:#B01B2E}

/* compact hero for the game and tool pages, so the thing itself is above the fold */
.hero.tight{padding-top:18px;padding-bottom:10px}
.hero.tight h1{margin:6px 0 0;font-size:clamp(1.5rem,4.2vw,2.1rem)}

/* ---------- Gate Runner: figures, daily, bests, actions ---------- */
.flydaily{width:100%;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);background:#F7F9FB;border:1px solid var(--line);
  border-radius:11px;padding:9px 12px;cursor:pointer}
.flydaily.on{color:#B01B2E;border-color:#B01B2E;box-shadow:0 0 0 2px rgba(176,27,46,.15)}
.fo-pb{font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#2C7A46}
.flycmp{margin:0;max-width:46ch;color:var(--muted);font-size:.84rem;text-align:center}
.flycmp:empty{display:none}
.flyacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.flyacts a[hidden],.flyacts button[hidden]{display:none}

/* ---------- Gate Runner: result modal ---------- */
.flyend{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(16,35,58,.42);backdrop-filter:blur(2px)}
.flyend[hidden]{display:none}
.flyend-card{position:relative;width:100%;max-width:430px;background:#F7F9FB;border:1px solid var(--line);
  border-radius:18px;padding:22px 20px 18px;box-shadow:0 18px 48px rgba(16,35,58,.22),inset 0 1px 0 rgba(255,255,255,.7);
  display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center}
.flyend.crash .flyend-card{animation:flyHit .5s ease-out}
@keyframes flyHit{
  0%{background:rgba(196,52,43,.92)}
  38%{background:rgba(196,52,43,.72)}
  100%{background:#F7F9FB}
}
.flyendx{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:999px;
  background:#F7F9FB;border:1px solid var(--line);color:var(--muted);font-size:1.15rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.flyendx:hover{color:var(--text);border-color:#B01B2E}
.flyend-card h3{margin:0;font-family:var(--display);font-size:1.2rem;color:var(--text)}
.flyend-card p{margin:0;color:var(--muted);font-size:.9rem;max-width:40ch}

/* crawlable fleet list on the game page */
.flyseo{list-style:none;margin:0;padding:0;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.flyseo li{background:#F7F9FB;border:1px solid var(--line);border-radius:11px;padding:9px 12px;
  display:flex;flex-direction:column;gap:2px}
.flyseo a{font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--text);text-decoration:none}
.flyseo a:hover{color:#B01B2E}
.flyseo span{font-size:.72rem;color:var(--muted)}

/* ---------- Gate Runner: HUD buttons ---------- */
/* .flyhud is pointer-events:none so it never blocks the stick — anything inside it
   that is actually interactive has to opt back in, or taps fall straight through. */
button.fh-l{pointer-events:auto;font:inherit;text-align:left;cursor:pointer;background:rgba(255,255,255,.86);
  border:1px solid var(--line);border-radius:11px;padding:6px 10px;display:flex;flex-direction:column;gap:1px}
button.fh-l:hover{border-color:#B01B2E}
.flypause{position:absolute;right:16px;bottom:16px;z-index:3;width:44px;height:44px;border-radius:999px;
  pointer-events:auto;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--text);
  font-size:.78rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px -10px rgba(26,20,16,.5)}
.flypause:hover{border-color:#B01B2E;color:#B01B2E}
/* on touch the throttle occupies the bottom-right, so sit just above it */
@media(pointer:coarse){.flypause{bottom:198px}}

.b-supersonic{background:#F3E8FF;color:#6B21A8}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mn-note{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.mn-acc-head{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 0 4px}

/* ---------- whole aircraft card is one tap target ----------
   The heading's link is stretched over the entire card with a pseudo-element, rather
   than wrapping the card in an <a>. Nesting a button inside a link is invalid HTML and
   breaks keyboard behaviour, so this keeps one link, one button, both reachable. */
.acard{position:relative}
.acard .cardlink::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.acard .cardlink:focus-visible::after{outline:2px solid var(--gold);outline-offset:3px}
/* the compare button and the explicit footer link stay above the stretched area */
.acard .addcmp{position:absolute;z-index:3}
.acard .mini{position:relative;z-index:2}
/* pointer feedback for the whole card, since all of it is now clickable */
.acard:hover{cursor:pointer}
.acard .addcmp:hover,.acard .mini:hover{cursor:pointer}


/* ---------- FORCED-DARK DEFENCE ----------
   Brave and Chrome on Android run a forced-dark pass over web content and then
   recompute the toolbar colour themselves, ignoring theme-color. Re-asserting the
   palette inside a dark media query tells the client we mean it. Without this the
   browser bar stays dark above a light page. */
@media (prefers-color-scheme: dark){
  html,body{background:#F7F9FB;color:var(--text);color-scheme:light}
  .mn-shell{background:#F7F9FB}
}

/* ---------- self-fetching type photograph ----------
   An unfilled slot must occupy nothing: this is what makes "no photo, no card" true
   rather than leaving a gap or a placeholder on every page that has no free image. */
.photoSlot:empty{display:none}
.typePhoto{margin:26px 0 0;background:#F7F9FB;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.typePhoto img{display:block;width:100%;height:auto}
.photoCredit{padding:10px 16px;font-size:.72rem;line-height:1.4;color:var(--muted);background:#F7F9FB;border-top:1px solid var(--line)}
.photoCredit a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* ---- car renders: fill the silhouette box exactly (cover-crop, centered); cards stay uniform ---- */
.acard .sil.hasimg{padding:0;overflow:hidden;display:block}
.acard .sil.hasimg .carimg{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.acard .sil.hasimg .silfallback{display:none}
.acard .sil.hasimg.imgfail{padding:10px;display:flex;align-items:center;justify-content:center}
.acard .sil.hasimg.imgfail .silfallback{display:flex;width:100%;align-items:center;justify-content:center}
.hero-sil.hasimg{padding:0;overflow:hidden;border:0;background:none;display:block}
.hero-sil.hasimg .carimg{width:100%;height:auto;display:block;border-radius:var(--radius)}
.hero-sil.hasimg .silfallback{display:none}
.hero-sil.hasimg.imgfail{padding:24px;border:1px solid var(--line);background:#F5F7FA;display:flex;justify-content:center}
.hero-sil.hasimg.imgfail .silfallback{display:flex;width:100%;justify-content:center}

/* ---- leaderboard rows (rankings pages) ---- */
.ranklist{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.rankrow{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:14px 18px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--text);transition:transform .15s ease,border-color .15s ease}
.rankrow:hover{transform:translateY(-2px);border-color:var(--gold)}
.rank-n{font-weight:800;font-size:1.15rem;color:var(--muted);min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.rankrow:nth-child(1) .rank-n,.rankrow:nth-child(2) .rank-n,.rankrow:nth-child(3) .rank-n{color:var(--gold)}
.rank-name{font-weight:700;display:block;line-height:1.15}
.rank-sub{color:var(--muted);font-size:.84rem;display:block;margin:2px 0 7px}
.rank-val{font-weight:800;font-size:1.05rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.rankrow .dm-bar{height:6px;margin:0}
.browsegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:22px}
.browsecard{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--text);transition:transform .15s ease,border-color .15s ease}
.browsecard:hover{transform:translateY(-2px);border-color:var(--gold)}
.browsecard .bc-n{font-weight:700}
.browsecard .bc-c{color:var(--muted);font-size:.85rem}

/* ---- footer class row ---- */
.mf-classrow{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px}
.mf-classrow a{color:var(--muted);font-size:.85rem;text-decoration:none}
.mf-classrow a:hover{color:var(--gold)}

/* ---- compare tool ---- */
.cmp-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px}
.cmp-slot{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px}
.cmp-slot label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:6px;font-weight:600}
.cmp-slot select{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--paper);color:var(--text);font:inherit;font-size:.95rem}
.cmp-figure{margin-top:12px;height:96px;display:flex;align-items:center;justify-content:center}
.cmp-figure svg{width:100%;max-width:200px;color:var(--text)}
.cmp-figure img{max-width:100%;max-height:96px;border-radius:8px;object-fit:contain}
.cmp-table{margin-top:26px;width:100%;border-collapse:collapse}
.cmp-table th,.cmp-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:.95rem}
.cmp-table th[scope=row]{color:var(--muted);font-weight:600;white-space:nowrap}
.cmp-table td.best{color:var(--gold);font-weight:800}
.cmp-empty{color:var(--muted);margin-top:24px}

/* ---- quiz ---- */
.quiz-wrap{max-width:560px;margin:24px auto 0}
.quiz-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.quiz-clue{font-size:1.05rem;line-height:1.6;margin:0 0 6px}
.quiz-clue b{color:var(--gold)}
.quiz-opts{display:grid;gap:10px;margin-top:20px}
.quiz-opt{padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);color:var(--text);font:inherit;font-size:1rem;font-weight:600;cursor:pointer;text-align:left;transition:border-color .12s,background .12s}
.quiz-opt:hover{border-color:var(--gold)}
.quiz-opt.correct{background:rgba(30,122,68,.14);border-color:var(--mint);color:var(--mint)}
.quiz-opt.wrong{background:rgba(176,27,46,.1);border-color:var(--gold);color:var(--gold)}
.quiz-score{display:flex;justify-content:space-between;font-weight:700;margin-bottom:16px}
.quiz-score span{color:var(--muted);font-weight:600}

/* ---- canvas games ---- */
.game-stage{margin-top:20px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative}
.game-stage canvas{display:block;width:100%;height:auto;touch-action:none;background:#EFE9E2}
.game-hud{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-weight:700}
.game-hud span{color:var(--muted);font-weight:600}
.game-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(26,20,16,.72);color:#F7F9FB;text-align:center;padding:20px}
.game-over h3{font-size:1.6rem;margin:0}
.design-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.design-tools label{font-size:.82rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px}
.design-tools input[type=text]{padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--paper);color:var(--text);font:inherit;min-width:200px}
.prompt-out{margin-top:18px;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;font-family:ui-monospace,monospace;font-size:.86rem;line-height:1.6;white-space:pre-wrap;color:var(--text)}


/* ---- card hp + production years meta ---- */
.acard .cardmeta{margin:2px 0 10px;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.acard .cardmeta b{color:var(--gold);font-weight:800}

/* ==== GOLD accents + brand mark + engine diagrams ==== */
:root{
  /* the one genuinely gold thing on the site — a nickel-alloy champagne */
  --champagne-1:#F4EACB; --champagne-2:#D8C596; --champagne-3:#BAA77C; --champagne-ink:#3C3319;
  /* accent: polished silver (the crimson stays the only hot signal) */
  --au:#8C99A6; --au-bright:#DCE4EC; --au-ink:#4C5864;
  /* electric: kept yellow for the lightning-bolt association */
  --ev:#E0C15A; --ev-bright:#F3D989; --ev-ink:#6B5214;
}
/* a thin gold line across the very top of every page */
body{}

/* brand mark = HC gold-on-crimson tile (matches favicon) */
.mn-mark{width:30px;height:30px;min-width:30px;padding:0;background:none;border:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;overflow:visible;box-shadow:0 1px 3px rgba(26,20,16,.28)}
.mn-mark svg{width:100%;height:100%;display:block;border-radius:8px}
.mn-logo .ld,.mf-logo .ld{color:var(--au)}

/* engine badge on cards */
.engbadge{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.03em;padding:1px 6px;margin-left:2px;border:1px solid var(--au);color:var(--au-ink);border-radius:5px;vertical-align:middle;background:rgba(140,153,166,.1)}
.engbadge.is-ev{border-color:var(--ev);color:var(--ev-ink);background:linear-gradient(180deg,rgba(243,217,137,.34),rgba(224,193,90,.18))}
.engbadge .eb-h{color:var(--ev-ink);font-weight:900;margin-left:1px}

/* engine diagram block on detail pages */
/* ---- engine layout block ----
   A two-column grid rather than a wrapping flex row: the art gets a fixed
   track and the text gets the rest, so nothing reflows oddly at the point
   flex used to wrap. Stacks to one column on a phone. Same brushed-steel
   surface as the cards, so it reads as part of the set. */
.engblock{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:center;
  margin:20px 0 4px;padding:20px 22px;border:1px solid var(--steel-line);border-radius:var(--radius-sm);
  background-color:var(--steel-2);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 42%,rgba(228,234,240,.55) 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.016) 0 1px,rgba(255,255,255,0) 1px 3px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 22px -18px rgba(26,20,16,.35)}
.engart{display:flex;align-items:center;justify-content:center;min-width:0}
.engdiagram{width:100%;max-width:180px;height:auto;display:block;
  filter:drop-shadow(0 6px 18px rgba(26,20,16,.22))}
.engmeta{min-width:0}
.engmeta .eyebrow{margin-bottom:4px}
.engtitle{margin:.1em 0 .35em;font-size:1.35rem;line-height:1.15}
.engmeta p{color:var(--muted);margin:0;font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:640px){
  /* stack, and let the art sit above the text rather than squeezing beside it */
  .engblock{grid-template-columns:1fr;gap:14px;padding:18px 16px;text-align:center;justify-items:center}
  .engdiagram{max-width:148px}
  .engtitle{font-size:1.2rem}
  .engmeta p{font-size:.88rem}
}

/* footer gold "gold-standard" badge + suggestion line */
.au-badge{display:inline-block;margin:2px 0 10px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;color:var(--champagne-ink);background:linear-gradient(180deg,var(--champagne-1) 0%,var(--champagne-2) 52%,var(--champagne-3) 100%);border:1px solid rgba(140,120,74,.5);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 2px 6px -2px rgba(60,51,25,.45);text-shadow:0 1px 0 rgba(255,255,255,.32)}
.mf-suggest{margin:14px 0 6px;padding:12px 15px;border:1px dashed var(--au);border-radius:var(--radius-sm);color:var(--muted);font-size:.92rem}
.mf-suggest a{color:var(--au);font-weight:700}

/* ==== uniform card rows: reserve name/kicker space so hp line always aligns ==== */
.cardgrid{align-items:stretch}
.acard{display:flex;flex-direction:column;height:100%}
.acard h3{line-height:1.2;min-height:2.4em;margin:0 0 .2em}          /* up to 2 lines */
.acard .kicker{line-height:1.25;min-height:2.5em;margin:0 0 8px}      /* up to 2 lines */
.acard .cardmeta{min-height:1.15em}
.acard .stats{margin-top:0}
.acard a.mini{margin-top:auto}
/* compact grids: scale reserved space with the smaller type */
@media (max-width:640px){ .cardgrid.mcols-1 .acard h3{min-height:2.4em} }

/* ==== scroll reveal (fade-up) ==== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s cubic-bezier(.16,.8,.24,1),transform .65s cubic-bezier(.16,.8,.24,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ==== nav: manufacturer directory + count badges ==== */
.mn-marque-dir{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.mn-mq{justify-content:space-between}
.mn-mq-n{font-size:.7rem;font-weight:800;color:var(--au-ink);background:rgba(140,153,166,.14);border:1px solid var(--au);border-radius:5px;padding:0 6px;min-width:22px;text-align:center;line-height:1.5}

/* ==== homepage stats band ==== */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.statband .stat{background:var(--ink-2);border:1px solid rgba(140,153,166,.34);border-radius:var(--radius-sm);padding:16px 18px}
.statband .stat b{display:block;font-family:var(--display);font-size:1.95rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.statband .stat span{display:block;margin-top:7px;color:var(--muted);font-size:.82rem}
@media (max-width:720px){ .statband{grid-template-columns:repeat(2,1fr)} }

/* ==== shop ==== */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.shopcard{background:#F5F7FA;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s;box-shadow:0 1px 2px rgba(26,20,16,.04),0 12px 28px -20px rgba(26,20,16,.22)}
.shopcard:hover{border-color:var(--au);transform:translateY(-3px);box-shadow:0 2px 4px rgba(26,20,16,.06),0 20px 40px -20px rgba(26,20,16,.3)}
.shopimg{display:block;padding:18px 18px 0}
.shopimg .shopmk{width:100%;height:auto;display:block;border-radius:12px;filter:drop-shadow(0 6px 16px rgba(26,20,16,.2))}
.shopbody{padding:14px 18px 18px;display:flex;flex-direction:column;flex:1}
.shopbody h3{font-size:1.05rem;margin:0 0 .2em}
.shop-tag{color:var(--muted);font-size:.85rem;line-height:1.35;margin:0 0 12px;min-height:2.6em}
.shop-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.shop-price{font-family:var(--display);font-weight:800;font-size:1.2rem}

/* ==== detail: computed deep-stats (uniform borders only) ==== */
.dstat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:6px 0 20px}
.dstat{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.dstat b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.dstat span{display:block;margin-top:5px;color:var(--muted);font-size:.8rem}
.dstat i{display:block;margin-top:7px;color:var(--au-ink);font-style:normal;font-weight:700;font-size:.72rem}
.standings{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:9px}
.standings li{position:relative;padding:11px 14px 11px 34px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.92rem}
.standings li::before{content:"\203A";position:absolute;left:15px;top:10px;color:var(--au);font-weight:800}
.rivals-h{font-size:1.05rem;margin:20px 0 10px}
.rivalrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.rivalchip{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--text)}
.rivalchip:hover{border-color:var(--au)}
.rivalchip span{color:var(--muted);font-size:.82rem}

/* ==== marque: stat-sub label + production timeline (uniform borders) ==== */
.statband .stat .stat-sub{display:block;margin-top:6px;color:var(--au-ink);font-style:normal;font-weight:700;font-size:.72rem}
.mtimeline{list-style:none;margin:0;padding:0}
.mtl{display:grid;grid-template-columns:58px 1fr auto;gap:2px 14px;align-items:center;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--ink-2);margin-bottom:8px}
.mtl-y{grid-row:1 / span 2;align-self:center;font-family:var(--display);font-weight:800;color:var(--au-ink)}
.mtl-name{grid-column:2;grid-row:1;font-weight:700;text-decoration:none;color:var(--text)}
.mtl-name:hover{color:var(--gold)}
.mtl-hp{grid-column:3;grid-row:1;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}
.mtl-st{grid-column:2 / -1;grid-row:2;color:var(--muted);font-size:.78rem}

/* ==== nav reading-progress bar (bottom edge of sticky nav) ==== */
/* reading progress. Same logic as the rank gauge: the fill carries the
   information so it takes the brand colour, and the track only has to
   read as an empty groove. Silver on pale grey was near-invisible. */
.mn-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;z-index:6;overflow:hidden;
  background:rgba(26,20,16,.10)}
.mn-progress i{display:block;height:100%;width:0;border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,#8E1626,#B01B2E 60%,#C8203B);
  box-shadow:0 0 8px rgba(176,27,46,.45)}
body.modal-open{overflow:hidden}

/* ==== fleet bar + single filter button ==== */
.fleetbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.filterbtn{display:flex;width:100%;max-width:520px;margin:14px auto 0;align-items:center;justify-content:center;gap:9px;min-height:calc(.95rem * 3.35 - 2px);padding-top:0;padding-bottom:0}
.filterbtn .fb-i{width:18px;height:18px}
.filt-count{display:inline-flex;align-items:center;gap:.5em;margin-left:.1em;font-size:.92rem;font-weight:600;opacity:.82;letter-spacing:.01em}
.filt-count::before{content:"";width:1px;height:1.05em;background:currentColor;opacity:.38}

/* ==== filters modal ==== */
.fmodal{position:fixed;inset:0;z-index:520;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:720px){.fmodal{align-items:center}}
.fmodal[hidden]{display:none}
.fmodal-back{position:absolute;inset:0;background:rgba(26,20,16,.5);backdrop-filter:blur(2px)}
.fmodal-panel{position:relative;background:#F7F9FB;border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:640px;max-height:86vh;overflow:auto;box-shadow:0 -20px 60px -20px rgba(26,20,16,.4);animation:fmup .28s cubic-bezier(.2,1,.3,1)}
@media(min-width:720px){.fmodal-panel{border-radius:var(--radius);animation:fmin .2s ease}}
@keyframes fmup{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fmin{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
.fmodal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 12px;position:sticky;top:0;background:#F7F9FB}
.fmodal-x{background:none;border:0;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.fmodal-body{padding:4px 22px 8px}
.fmodal-group{padding:14px 0;border-top:1px solid var(--line)}
.fmodal-group:first-child{border-top:0}
.fmodal-group .fsort-lbl{display:block;margin-bottom:10px}
.fmodal-foot{position:sticky;bottom:0;background:#F7F9FB;padding:14px 22px 20px;border-top:1px solid var(--line)}
.fmodal-foot .btn{width:100%}

/* ==== in-grid interludes (CTA + stats), viewport-specific ==== */
.gridfull{grid-column:1/-1}
.gridfull .heroChips,.gridfull .heroCtas{margin:8px auto}
.heroChips.inRow{max-width:820px}
.heroCtas.inRow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(min-width:641px){
  .heroChips.inRow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .only-mobile{display:none!important}
}
@media(max-width:640px){
  .only-desktop{display:none!important}
  .heroCtas.inRow{flex-direction:column;align-items:stretch}
  .heroCtas.inRow .btn{width:100%}
}
#fleetGrid.interludes-off .gridfull{display:none!important}

/* filter count line above the grid */
.fleet-count{text-align:center;margin:26px 0 0;min-height:1.1em;font-size:.86rem;color:var(--muted)}

/* ============================================================
   Y2K racing-menu layer — LIGHT
   Brushed-silver instrument panels, crisp technical labels,
   tabular figures. Borders uniform on all four sides.
   ============================================================ */
:root{
  --steel-1:#FFFFFF; --steel-2:#F1F5F9; --steel-3:#E4EAF0;
  --steel-line:#D7DFE7; --steel-ink:#5F6A77;
}

/* brushed-metal panel: soft top gloss + fine vertical brush grain */
.statband .stat,.heroChips .chip,.dstat,.statstrip{
  background-color:var(--steel-2);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 42%,rgba(228,234,240,.55) 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.016) 0 1px,rgba(255,255,255,0) 1px 3px);
  border:1px solid var(--steel-line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 22px -18px rgba(26,20,16,.35);
}
/* numerals: dark ink, tabular, squared — the readout */
.statband .stat b,.heroChips .chip .num,.dstat b{
  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.015em;
}
/* technical micro-labels */
.statband .stat span,.dstat span,.heroChips .chip>span:not(.num){
  color:var(--steel-ink);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:700;
}
.statband .stat .stat-sub,.dstat i{color:var(--au-ink);letter-spacing:.06em;text-transform:none}

/* detail spec strip: instrument cluster, hairline dividers */
.statstrip .k{color:var(--steel-ink);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;font-weight:700}
.statstrip .v{color:var(--text);font-variant-numeric:tabular-nums}

/* gold energy fill on rank/percentile bars */
.dm-rank{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* standings + rivals pick up the same brushed panel */
.standings li,.rivalchip{
  background-color:var(--steel-2);
  background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.3) 55%,rgba(228,234,240,.5));
  border:1px solid var(--steel-line);
}
.rivalchip span{font-variant-numeric:tabular-nums}

/* wide-tracked eyebrows, squarer headings — game-menu cadence */
.eyebrow{letter-spacing:.24em}
h1,h2.title{letter-spacing:-.015em}

/* tabular figures wherever numbers line up */
.acard .cardmeta,.rank-val,.mtl-hp,.shop-price,.engbadge,.filt-count{font-variant-numeric:tabular-nums}
.engbadge{letter-spacing:.06em}

/* card hover: menu selection */
.acard{transition:transform .18s cubic-bezier(.2,1,.3,1),box-shadow .22s ease,border-color .22s ease}
.acard:hover{border-color:rgba(140,153,166,.6);transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(26,20,16,.06),0 22px 44px -22px rgba(26,20,16,.32),0 0 0 1px rgba(140,153,166,.2)}

/* glossy primary button — Y2K sheen, no one-sided borders */
.btn{background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 52%)}

/* grid sits as close under the filter button as the button does under search */
.hero.home{padding-bottom:0}
.hero.home .heroSearch{margin-bottom:0}
#fleetGrid{margin-top:29px}                      /* matches lead -> search gap */
@media(min-width:901px){ #fleetGrid{margin-top:24px} }

/* screen-reader-only heading (keeps heading order valid without visual change) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* skip-to-content link (visible only on keyboard focus) */
.skiplink{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 18px;background:#B01B2E;color:#fff;
  font-family:var(--display);font-weight:700;border-radius:0 0 var(--radius-sm) var(--radius-sm);text-decoration:none}
.skiplink:focus{left:50%;transform:translateX(-50%);outline:3px solid var(--au);outline-offset:2px}

/* ==== car grid cards: same brushed-metal readout as the stat tiles ==== */
.cardgrid .acard{
  background-color:var(--steel-2);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 42%,rgba(228,234,240,.55) 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.016) 0 1px,rgba(255,255,255,0) 1px 3px);
  border:1px solid var(--steel-line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 22px -18px rgba(26,20,16,.35);
}
/* the image well sits slightly recessed so the render reads as inset in metal */
.cardgrid .acard .sil{
  background:linear-gradient(180deg,#FFFFFF,#F4F7FA);
  border:1px solid rgba(26,20,16,.07);
  box-shadow:0 1px 2px rgba(26,20,16,.05) inset;
}
/* keep the menu-selection hover, layered over the metal */
.cardgrid .acard:hover{
  border-color:rgba(140,153,166,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 44px -22px rgba(26,20,16,.34),0 0 0 1px rgba(140,153,166,.2);
}

/* owner claim prompt on car pages */
.ownclaim{margin:18px 0 6px;padding:14px 18px;border:1px solid rgba(140,153,166,.5);border-radius:var(--radius-sm);
  background:var(--steel-2);font-size:.9rem;color:var(--muted)}
.ownclaim b{color:var(--text)}
.ownclaim a{color:var(--gold);font-weight:700;white-space:nowrap}

/* ==== Apex Line — SVG racing engine ==== */
.apexwrap{margin-top:6px}
.apexstage{position:relative;width:100%;height:min(74vh,720px);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#C9DCEE;touch-action:none;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 34px -26px rgba(26,20,16,.5)}
#apexScene{position:absolute;inset:0;width:100%;height:100%;display:block}
.apexhud{position:absolute;inset:10px 12px auto 12px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:10px;pointer-events:none;font-family:var(--display);font-size:.72rem}
.apexhud .ah-l{pointer-events:auto;cursor:pointer;font:inherit;font-weight:700;font-size:.84rem;color:var(--text);
  background:var(--steel-2);border:1px solid var(--steel-line);border-radius:11px;padding:7px 11px;text-align:left}
.apexhud .ah-l:hover{border-color:var(--au)}
.ah-r{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.ah-r span{background:var(--steel-2);border:1px solid var(--steel-line);border-radius:9px;padding:5px 9px;
  color:var(--steel-ink);text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;font-weight:700}
.ah-r b{color:var(--text);font-size:.84rem;letter-spacing:0;font-variant-numeric:tabular-nums}
.apex-fig{position:absolute;left:0;right:0;bottom:10%;text-align:center;color:var(--text);font-weight:700;
  font-family:var(--display);font-size:.95rem;opacity:0;transition:opacity .3s;pointer-events:none;padding:0 18px;
  text-shadow:0 1px 0 rgba(255,255,255,.7)}
/* touch controls: the wheel springs back, the pedals hold */
.apexstick{position:absolute;left:14px;bottom:14px;z-index:5;width:116px;height:116px;border-radius:50%;
  background:rgba(247,249,251,.78);border:1px solid var(--steel-line);touch-action:none;display:none;
  box-shadow:0 6px 18px -10px rgba(26,20,16,.5)}
/* faint cross so the two axes are discoverable without a caption */
.apexstick::before,.apexstick::after{content:"";position:absolute;background:var(--steel-line);opacity:.6;z-index:1}
.apexstick::before{left:18%;right:18%;top:50%;height:1px}
.apexstick::after{top:18%;bottom:18%;left:50%;width:1px}
.apexknob{position:absolute;z-index:2;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:var(--steel-2);border:1px solid var(--steel-line);display:block;transition:transform .1s ease;
  box-shadow:0 3px 10px -4px rgba(26,20,16,.55)}
.apexstick.on .apexknob{transition:none}
.apexpedal{position:absolute;bottom:14px;z-index:5;width:74px;height:74px;border-radius:18px;display:none;
  align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.08em;border:1px solid var(--steel-line);background:rgba(247,249,251,.9);color:var(--text);
  touch-action:none;box-shadow:0 6px 18px -10px rgba(26,20,16,.5)}
.apexpedal.thr{right:14px}
.apexpedal.brk{right:98px}
.apexpedal.thr.on{background:#1E7A44;color:#fff;border-color:#1E7A44}
.apexpedal.brk.on{background:#B01B2E;color:#fff;border-color:#B01B2E}
@media(pointer:coarse){.apexstick,.apexpedal{display:flex}}
/* a landscape phone is short: shrink the controls so the road stays visible */
@media(pointer:coarse) and (max-height:540px){
  .apexstick{width:94px;height:94px}
  .apexknob{width:40px;height:40px;margin:-20px 0 0 -20px}
  .apexpedal{width:60px;height:60px;font-size:.64rem}
  .apexpedal.brk{right:82px}
}
.apex-over{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:11px;text-align:center;padding:26px;background:rgba(247,249,251,.93)}
.apex-over[hidden]{display:none}
.apex-over h2{margin:0;font-size:1.5rem}
.apex-over p{margin:0;max-width:46ch;color:var(--muted);font-size:.94rem}
.apex-over .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.apexoverx{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:999px;background:var(--steel-2);
  border:1px solid var(--steel-line);color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}
.apexoverx:hover{color:var(--text);border-color:var(--au)}
.apex-hint{color:var(--muted);font-size:.85rem;text-align:center;margin-top:12px}
.apex-pick{margin-top:22px}
.apex-pick-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.apex-pick input{flex:1;min-width:180px;padding:9px 12px;border:1px solid var(--steel-line);border-radius:10px;
  background:var(--paper);color:var(--text);font:inherit;font-size:16px}
.flybands{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.flyband{padding:7px 13px;border:1px solid var(--steel-line);border-radius:999px;background:var(--steel-2);
  color:var(--muted);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;font-family:var(--display)}
.flyband.on{background:var(--gold);border-color:var(--gold);color:#fff}
/* No scroll inside a scroll: the picker flows on the page and the page
   scrolls, which is also what makes every car here a crawlable link. */
/* the ported Gate Runner rule still set max-height and overflow, so both
   are reset here explicitly rather than merely left undeclared */
.flygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;padding:2px;
  max-height:none;min-height:0;overflow:visible}
@media(max-width:640px){.flygrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .flyopt{padding:10px 11px}
  .flyopt .fo-n{font-size:.78rem;padding-right:0}
  .flyopt .fo-b{position:static;display:block;margin-top:3px}}
.flyopt{display:grid;gap:2px;padding:11px 13px;border:1px solid var(--steel-line);border-radius:var(--radius-sm);
  background:var(--steel-2);text-decoration:none;color:var(--text);position:relative}
.flyopt.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.flyopt .fo-n{font-weight:700;font-family:var(--display);font-size:.86rem;line-height:1.2;padding-right:56px}
.flyopt .fo-m{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.flyopt .fo-pb{color:var(--mint);font-size:.72rem;font-weight:700}
.flyopt .fo-b{position:absolute;top:10px;right:11px;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;color:var(--steel-ink)}
.fo-b.b-hypersonic,.fo-b.b-savage{color:var(--gold)}
.flynone{grid-column:1/-1;color:var(--muted);text-align:center;padding:16px}
@media(max-width:640px){.apexstage{height:min(80vh,700px)}.ah-r{max-width:56%}}

/* the brief now sits under the game, where it reads as an explanation */
.apex-brief{margin:16px auto 0;max-width:70ch}
.apex-brief .lead{margin:0;font-size:1.02rem;text-align:center}
@media(pointer:coarse){ .apex-fig{bottom:28%} }

/* a game page opens with one line: the crumb, whose last step is the h1 */
.gcrumb{display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap;margin-bottom:10px}
.gcrumb h1{font:inherit;font-family:var(--display);font-size:inherit;font-weight:700;
  color:var(--text);margin:0;letter-spacing:0;display:inline}

/* ==== head-to-head pages ==== */
.vstable td.win{color:#1E7A44;font-weight:800}
.vstable td.win::after{content:" \2713";font-size:.8em;opacity:.7}
.vslist{display:grid;gap:8px;margin-top:8px}
.vsrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 18px;
  background:var(--steel-2);border:1px solid var(--steel-line);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--text);font-family:var(--display);font-weight:700;font-size:.95rem}
.vsrow:hover{border-color:var(--au)}
.vsrow .vs-a{text-align:right}
.vsrow .vs-b{text-align:left}
.vsrow .vs-x{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-ink);font-weight:700}
@media(max-width:560px){.vsrow{grid-template-columns:1fr;gap:2px;text-align:center}
  .vsrow .vs-a,.vsrow .vs-b{text-align:center}}

/* a car we have not drawn yet: a clean, honest placeholder — never a broken icon */
.sil.imgfail,.hero-sil.imgfail{background:linear-gradient(180deg,#FFFFFF,#EEF2F6);
  border:1px dashed var(--steel-line);position:relative}
.sil.imgfail::after,.hero-sil.imgfail::after{position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;
  font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel-ink);opacity:.6}
.sil.imgfail::after{content:"Not drawn yet"}
.hero-sil.imgfail{min-height:220px}
.hero-sil.imgfail::after{content:"We haven\2019t drawn this car yet";font-size:.78rem;letter-spacing:.14em}

/* trademark / independence notice */
.tmnote{padding:16px 20px;border:1px solid var(--steel-line);border-radius:var(--radius-sm);
  background:var(--steel-2);color:var(--muted);font-size:.84rem;line-height:1.6}
.tmnote b{color:var(--text)}
.tmnote a{color:var(--gold);font-weight:700}

/* what the copyright line actually covers */
.mf-scope{opacity:.72}

/* more-Chinese-cars cards: text-led, no render slot */
.cncard .cn-pt{color:var(--text);font-weight:700;font-size:.86rem;margin:0 0 8px}
.cncard .cn-note{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0}
.cncard h3{margin:.2em 0 .3em}

/* a pointer sitting at the foot of a grid */
.gridtail{margin:22px 0 0;padding:16px 20px;border:1px solid var(--steel-line);border-radius:var(--radius-sm);
  background:var(--steel-2);color:var(--muted);font-size:.9rem;line-height:1.6;text-align:center}
.gridtail b{color:var(--text)}
.gridtail a{color:var(--gold);font-weight:700;white-space:nowrap}

/* extra angles sit beside the hero when a car has them */
.shotgrid{display:grid;gap:12px;margin:26px 0 0}
@media(min-width:760px){.shotgrid{grid-template-columns:1fr 1fr}}
.shotgrid .hero-sil{margin:0}
.shotgrid .hero-sil.extra{padding:24px}
@media(max-width:759px){.shotgrid .hero-sil.extra{padding:14px}}

/* caption under a car's illustration */
.imgnote{margin:10px 0 0;text-align:center;color:var(--muted);font-size:.78rem;line-height:1.5}
.imgnote a{color:var(--gold);font-weight:700}

/* The foot block sits outside .hero.home, so it was falling back to the base
   .heroChips rule — two columns at 520px with no auto margin, hard left. */
.section.only-desktop .heroChips{grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:840px;margin:20px auto 0;gap:12px}
.section.only-desktop .heroCtas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.section.only-desktop .title,.section.only-desktop .eyebrow{text-align:center}