:root{
  /* ── Channel tokens ─────────────────────────────────────────────────────
     Every colour on the site resolves to one of these bases. They are raw
     "R G B" triplets rather than colours so the dozens of alpha variants can
     compose from one value: rgb(var(--lav-rgb)/.14) and rgb(var(--lav-rgb)/.35)
     are the same token at two strengths, not two tokens that can drift apart.

     THIS IS THE THEME SEAM. A light theme redefines these lines inside a
     `@media (prefers-color-scheme: light)` and nothing below :root changes.
     Before this existed, 205 colour literals were written inline across
     base.css and pages.css, so "what colour is a border" had 25 answers.

     --ink-hi is NOT --ink: #F0F4FF and #F4F6FF are four units apart and both
     are in use. They look identical and are not, so they stay separate. */
  --night-rgb:7 11 28; --deep-rgb:12 21 51; --card-rgb:16 24 54; --panel-rgb:10 16 38;
  --ink-rgb:244 246 255; --ink-hi-rgb:240 244 255; --ink-alt-rgb:232 238 255;
  --lav-rgb:180 200 255; --gold-rgb:255 180 92; --sunset-rgb:255 138 61;
  --sky-rgb:78 141 245; --green-rgb:62 207 142;
  --white-rgb:255 255 255; --black-rgb:0 0 0;
  --shadow-rgb:3 6 18; --shadow-2-rgb:4 7 20;

  /* ── Roles: what the rest of the stylesheet actually names ── */
  --night:rgb(var(--night-rgb)); --deep:rgb(var(--deep-rgb));
  --blue:#1E44B8; --sky:rgb(var(--sky-rgb));
  --sunset:rgb(var(--sunset-rgb)); --gold:rgb(var(--gold-rgb)); --peach:#FFD9A8;
  --ink:rgb(var(--ink-rgb)); --ink-dim:rgb(var(--ink-alt-rgb)/.62); --ink-faint:rgb(var(--ink-alt-rgb)/.38);
  --card:rgb(var(--card-rgb)/.72); --line:rgb(var(--lav-rgb)/.14);
  /* Ride/turbulence scale. These are DATA colours — a severe red means severe
     in any theme — so a light theme leaves them alone. */
  --green:rgb(var(--green-rgb)); --yellow:#FFD166; --orange:#FF8A3D; --red:#FF5A5F;

  /* ── The skies. This is the brand, and the main thing a light theme has to
     REDESIGN rather than recolour: a day version is a different climb, not an
     inversion of this one. Named here so that work is confined to :root. ── */
  --zenith:#060919;            /* top of every sky, darkest */
  --horizon:#F5A04C;           /* bottom of every sky, warmest */
  --hero-2:#0B1734; --hero-3:#16307C; --hero-4:#4E62C9; --hero-5:#C4652F;
  --phero-2:#0A1330; --phero-3:#101C44;         /* the shorter page-hero climb */
  --finale-2:#25255E; --finale-3:#B85A2E;

  /* ── Dark bands between the skies ── */
  --band-plane:#0D1230; --band-logbook:#0B1128; --band-tint:#0C1230; --band-showcase:#12142A;
  --tool-top:rgb(18 28 64/.94); --tool-bottom:rgb(10 16 40/.94);
  --globe-top:rgb(12 20 50/.9); --globe-bottom:rgb(8 13 34/.9);
  --globe-line-a:#132250; --globe-line-b:#0A1130;

  /* ── Warm light: sun, clouds, glows, the moon ── */
  --sun-core:rgb(255 214 150/.55); --sun-edge:rgb(255 170 80/.25);
  --cloud-core:rgb(255 236 210/.95); --cloud-edge:rgb(255 214 170/.55);
  --cloud-f-core:rgb(255 240 220/.9); --cloud-f-edge:rgb(255 220 180/.5);
  --glow-icon:rgb(255 160 76/.5); --glow-card:rgb(255 170 90/.09);
  --hint:rgb(255 248 238/.8); --hint-line:rgb(255 248 238/.9);
  --moon-1:#FFF9EC; --moon-2:#F0E8D2; --moon-3:#D9D2BC;
  --moon-glow-in:rgb(255 246 220/.26); --moon-glow-out:rgb(255 246 220/.09);
  --halo:rgb(120 160 255/.26);

  /* ── Reads ON a warm fill, so it stays dark whatever the page does ── */
  --on-gold:#251302; --on-chip:#0C1533; --chip-bg:rgb(244 246 255/.92);
  --ink-max:#FFFFFF; --peach-2:#FFE1B8; --dot-stroke:#0A1330;

  /* ── Shadows ── */
  --shadow-plane:rgb(1 2 8/.6); --shadow-modal:rgb(4 6 16/.6); --shadow-globe:rgb(4 12 40/.55);

  --display:"Archivo",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;font-variation-settings:"wdth" 112}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--sunset)}

/* Scroll reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ═══ NAV ═══ */
header.site{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,border-color .3s,backdrop-filter .3s}
header.site.scrolled{background:rgb(var(--night-rgb)/.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand img{width:30px;height:30px;border-radius:9px;box-shadow:0 2px 10px rgb(var(--black-rgb)/.4)}
.brand-mark{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;font-variation-settings:"wdth" 116}
.nav-link{font-size:14.5px;font-weight:500;color:var(--ink-dim);transition:color .2s}
.nav-link:hover{color:var(--ink)}
.nav-cta{font-family:var(--body);font-size:14.5px;font-weight:700;background:linear-gradient(135deg,var(--sunset),var(--gold));color:var(--on-gold);padding:9px 19px;border-radius:100px;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgb(var(--sunset-rgb)/.35)}
/* The nav's own responsive rules live with the dropdowns in pages.css — below
   900px the whole .nav-links strip becomes the full-screen menu panel, so
   hiding .nav-link here would empty it. */

/* ═══ HERO SKY ═══ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  background:linear-gradient(180deg,var(--zenith) 0%,var(--hero-2) 30%,var(--hero-3) 55%,var(--hero-4) 72%,var(--hero-5) 88%,var(--horizon) 100%)}
.stars{position:absolute;inset:0 0 45% 0;pointer-events:none;
  background-image:radial-gradient(1.2px 1.2px at 12% 22%,rgb(var(--white-rgb)/.9),transparent),radial-gradient(1px 1px at 34% 10%,rgb(var(--white-rgb)/.7),transparent),radial-gradient(1.4px 1.4px at 55% 30%,rgb(var(--white-rgb)/.8),transparent),radial-gradient(1px 1px at 71% 14%,rgb(var(--white-rgb)/.6),transparent),radial-gradient(1.2px 1.2px at 86% 26%,rgb(var(--white-rgb)/.85),transparent),radial-gradient(1px 1px at 24% 38%,rgb(var(--white-rgb)/.5),transparent),radial-gradient(1.1px 1.1px at 64% 6%,rgb(var(--white-rgb)/.75),transparent),radial-gradient(1px 1px at 92% 42%,rgb(var(--white-rgb)/.5),transparent),radial-gradient(1.3px 1.3px at 8% 8%,rgb(var(--white-rgb)/.8),transparent),radial-gradient(1px 1px at 45% 18%,rgb(var(--white-rgb)/.65),transparent);
  animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.sun{position:absolute;left:50%;bottom:4%;width:min(52vw,540px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--sun-core) 0%,var(--sun-edge) 40%,transparent 70%)}
.cloud{position:absolute;pointer-events:none;filter:blur(1px)}
.cloud .puff{position:absolute;background:radial-gradient(circle at 50% 35%,var(--cloud-core),var(--cloud-edge) 60%,transparent 75%);border-radius:50%}
.cl-1{left:-6%;bottom:14%;width:420px;height:130px;animation:drift 68s linear infinite}
.cl-2{left:52%;bottom:6%;width:560px;height:160px;animation:drift 92s linear infinite reverse;opacity:.9}
.cl-3{left:22%;bottom:-2%;width:700px;height:190px;animation:drift 120s linear infinite;opacity:.95}
.cl-4{left:76%;bottom:20%;width:300px;height:100px;animation:drift 75s linear infinite;opacity:.7}
@keyframes drift{from{transform:translateX(-12vw)}to{transform:translateX(112vw)}}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding-top:110px;padding-bottom:80px}
/* The cap, not the measure, is what sets the line count here: the hero's left
   grid column is ~573px on a 1470px laptop, which is narrower than even the
   old 12ch, so max-width never bound and the font size alone decided. At 84px
   this headline took FIVE lines (~430px) and pushed the lede and the buttons
   under the fold. 68px is the largest cap that still lands it in three.
   Measure it after any wording change — a single long word ("turbulence") is
   what forces the extra line. */
.hero h1{font-size:clamp(40px,5.4vw,68px);margin:18px 0 20px;max-width:15ch;
  background:linear-gradient(180deg,var(--ink-max) 55%,var(--peach));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 24px 60px rgb(var(--black-rgb)/.35)}
.hero .lede{color:rgb(var(--ink-hi-rgb)/.82);font-size:clamp(16px,1.8vw,20px);max-width:46ch;text-shadow:0 2px 18px rgb(var(--night-rgb)/.5)}
.cta-row{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--sunset),var(--gold));color:var(--on-gold);font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:-.01em;padding:16px 26px;border-radius:999px;border:none;cursor:pointer;box-shadow:0 14px 40px rgb(var(--sunset-rgb)/.4);transition:transform .18s,box-shadow .18s;will-change:transform}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 54px rgb(var(--sunset-rgb)/.55)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:rgb(var(--ink-hi-rgb)/.85);padding:15px 10px;transition:color .2s,gap .25s}
.btn-ghost:hover{color:var(--ink-max);gap:12px}
.hero-note{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--ink-hi-rgb)/.55)}

/* Mascot as a floating app-icon card */
.hero-art{position:relative;display:flex;justify-content:center;perspective:1000px}
.icon-card{position:relative;width:min(340px,66vw);aspect-ratio:1;border-radius:22%;overflow:hidden;
  box-shadow:0 40px 90px rgb(var(--shadow-2-rgb)/.55),0 8px 28px rgb(var(--shadow-2-rgb)/.4),inset 0 1px 0 rgb(var(--white-rgb)/.35);
  animation:bob 6s ease-in-out infinite;transform-style:preserve-3d;transition:transform .25s ease-out}
.icon-card img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -16px}}
.icon-glow{position:absolute;inset:auto 0 -40px 0;height:90px;margin:0 auto;width:60%;border-radius:50%;background:radial-gradient(ellipse,var(--glow-icon),transparent 70%);filter:blur(18px)}
.hero-badge{position:absolute;z-index:3;background:rgb(var(--panel-rgb)/.78);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:0 16px 44px rgb(var(--shadow-2-rgb)/.5);animation:bob 7s ease-in-out infinite}
.hero-badge .b-top{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.hero-badge .b-main{font-family:var(--display);font-weight:800;font-size:15px;margin-top:2px}
.hb-1{top:6%;right:2%;animation-delay:-2s}
.hb-1 .b-main{color:var(--green)}
.hb-2{bottom:10%;left:-2%;animation-delay:-4s}
.hb-2 .b-main{color:var(--gold)}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;color:var(--hint);font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint::after{content:"";width:1px;height:34px;background:linear-gradient(var(--hint-line),transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center;padding-top:120px}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero .lede{margin:0 auto}
  .cta-row{justify-content:center}
  .hero-art{margin-top:26px}
  .hb-2{left:2%}
}

/* ═══ LIVE FLIGHT CARD ═══ */
.showcase{position:relative;padding:110px 0 40px;background:linear-gradient(180deg,var(--horizon) 0%,var(--band-showcase) 16%,var(--night) 34%)}
.showcase .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
@media (max-width:900px){.showcase .wrap{grid-template-columns:1fr}}
.sec-title{font-size:clamp(32px,4.4vw,52px);margin:14px 0 16px}
.sec-lede{color:var(--ink-dim);font-size:17px;max-width:44ch}
.flight-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:26px 26px 22px;backdrop-filter:blur(14px);box-shadow:0 30px 80px rgb(var(--shadow-rgb)/.6);max-width:520px;justify-self:center;width:100%}
.fc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.fc-flight{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-faint)}
.fc-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:rgb(var(--green-rgb)/.12);border:1px solid rgb(var(--green-rgb)/.3);padding:5px 12px;border-radius:100px}
.fc-route{display:flex;align-items:center;gap:14px}
.fc-city{flex:0 0 auto;text-align:center}
.fc-code{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.02em}
.fc-name{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.fc-line{position:relative;flex:1;height:2px;background:rgb(var(--lav-rgb)/.18);border-radius:2px}
.fc-line .done{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,var(--sky),var(--gold));border-radius:2px;transition:width 2.4s cubic-bezier(.3,0,.2,1)}
.fc-plane{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%) rotate(90deg);transition:left 2.4s cubic-bezier(.3,0,.2,1);filter:drop-shadow(0 3px 8px rgb(var(--black-rgb)/.5))}
.fc-times{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--ink-dim)}
.fc-times b{color:var(--ink);font-weight:500}
.fc-turb{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.fc-turb-label{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
.fc-turb-label b{color:var(--gold);font-weight:500}
.turb-bar{display:flex;gap:3px;height:26px}
.turb-seg{flex:1;border-radius:6px;transform:scaleY(.2);transform-origin:bottom;opacity:.4;transition:transform .5s cubic-bezier(.2,.9,.3,1.3),opacity .5s}
.flight-card.play .turb-seg{transform:scaleY(1);opacity:1}
.t-sm{background:var(--green);height:32%}.t-lt{background:var(--yellow);height:58%}.t-md{background:var(--orange);height:86%}
.turb-seg:nth-child(1){transition-delay:.05s}.turb-seg:nth-child(2){transition-delay:.1s}.turb-seg:nth-child(3){transition-delay:.15s}.turb-seg:nth-child(4){transition-delay:.2s}.turb-seg:nth-child(5){transition-delay:.25s}.turb-seg:nth-child(6){transition-delay:.3s}.turb-seg:nth-child(7){transition-delay:.35s}.turb-seg:nth-child(8){transition-delay:.4s}.turb-seg:nth-child(9){transition-delay:.45s}.turb-seg:nth-child(10){transition-delay:.5s}.turb-seg:nth-child(11){transition-delay:.55s}.turb-seg:nth-child(12){transition-delay:.6s}
.fc-turb-note{margin-top:10px;font-size:13px;color:var(--ink-dim)}
.fc-turb-note b{color:var(--ink)}

/* ═══ FEATURES ═══ */
.features{padding:90px 0}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media (max-width:800px){.feature-grid{grid-template-columns:1fr}}
.feature-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 28px;overflow:hidden;transition:transform .25s ease,border-color .25s;will-change:transform}
.feature-card:hover{transform:translateY(-4px);border-color:rgb(var(--gold-rgb)/.35)}
.feature-card::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow-card),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.feature-card:hover::after{opacity:1}
.feature-card .ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:18px;background:linear-gradient(135deg,rgb(var(--sky-rgb)/.22),rgb(var(--sunset-rgb)/.18));border:1px solid var(--line)}
.feature-card h3{font-size:20px;letter-spacing:-.02em;margin-bottom:9px}
.feature-card p{color:var(--ink-dim);font-size:14.5px}
.grid2{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}

/* ═══ FLIGHT CARD CHIPS ═══ */
.fc-extra{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.fc-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);background:rgb(var(--lav-rgb)/.07);border:1px solid var(--line);padding:6px 12px;border-radius:100px}
.fc-chip.good{color:var(--green);background:rgb(var(--green-rgb)/.1);border-color:rgb(var(--green-rgb)/.28)}

/* ═══ DELAYS TIMELINE ═══ */
.delays{padding:100px 0}
.tl{position:relative;padding-left:28px;display:flex;flex-direction:column;gap:16px;max-width:520px}
.tl::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--sky),var(--gold));border-radius:2px;opacity:.45}
.tl-item{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 17px}
.tl-item::before{content:"";position:absolute;left:-25px;top:17px;width:11px;height:11px;border-radius:50%;background:var(--night);border:2.5px solid var(--sky)}
.tl-item.warn::before{border-color:var(--yellow)}
.tl-item.hon::before{border-color:var(--gold)}
.tl-item.good::before{border-color:var(--green)}
.tl-time{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint)}
.tl-main{font-weight:600;font-size:15px;margin-top:3px}
.tl-sub{color:var(--ink-dim);font-size:13.5px;margin-top:3px;line-height:1.45}
@media (max-width:900px){.delays .grid2{gap:36px}.tl{max-width:none}}

/* ═══ MASCOT QUOTE ═══ */
.mascot-quote{display:flex;align-items:flex-end;gap:13px;max-width:540px;margin:28px auto 0;text-align:left}
.mascot-quote img{width:56px;height:56px;border-radius:16px;box-shadow:0 8px 24px rgb(var(--black-rgb)/.4);flex:0 0 auto}
.mascot-quote p{background:var(--card);border:1px solid var(--line);border-radius:18px 18px 18px 5px;padding:13px 17px;color:var(--ink);font-size:14.5px;line-height:1.5}

/* ═══ AIRCRAFT + SAFETY ═══ */
.plane-sec{padding:100px 0;background:linear-gradient(180deg,var(--night),var(--band-plane) 55%,var(--night))}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px;max-width:440px}
.spec{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 17px}
.spec .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.spec .v{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em;margin-top:5px}
.spec .v small{font-family:var(--body);font-weight:500;font-size:12px;color:var(--ink-dim)}
.shield-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 22px;display:flex;gap:15px;align-items:flex-start}
.shield-card + .shield-card{margin-top:14px}
.shield-card svg{flex:0 0 auto;margin-top:2px}
.shield-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shield-head .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.tier-pill{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:100px}
.tier-spotless{color:var(--green);background:rgb(var(--green-rgb)/.12);border:1px solid rgb(var(--green-rgb)/.3)}
.tier-excellent{color:var(--sky);background:rgb(var(--sky-rgb)/.13);border:1px solid rgb(var(--sky-rgb)/.32)}
.shield-note{color:var(--ink-dim);font-size:14px;margin-top:8px;line-height:1.5}
.shield-note b{color:var(--ink)}

/* ═══ LOGBOOK ═══ */
.logbook{padding:100px 0;text-align:center;background:linear-gradient(180deg,var(--night),var(--band-logbook) 55%,var(--night))}
.logbook .sec-lede{margin:0 auto}
.lb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:880px;margin:44px auto 0}
@media (max-width:760px){.lb-grid{grid-template-columns:repeat(2,1fr)}}
.lb-num{font-family:var(--display);font-weight:800;font-size:clamp(36px,4.6vw,58px);letter-spacing:-.03em;background:linear-gradient(180deg,var(--ink-max) 55%,var(--peach));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.lb-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px}
.lb-records{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px}
.lb-rec{font-size:13.5px;color:var(--ink-dim);background:var(--card);border:1px solid var(--line);border-radius:100px;padding:9px 18px}
.lb-rec b{color:var(--ink)}

/* ═══ TURBULENCE BAND ═══ */
.turb-band{position:relative;padding:100px 0;background:linear-gradient(180deg,var(--night),var(--band-logbook) 50%,var(--night));overflow:hidden}
.turb-band .wrap{text-align:center}
.turb-band .sec-lede{margin:0 auto}
.wave-box{margin:44px auto 0;max-width:860px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px 28px;backdrop-filter:blur(10px)}
.wave-svg{width:100%;height:auto;display:block}
.wave-legend{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.wave-legend span{display:inline-flex;align-items:center;gap:7px}
.dot{width:9px;height:9px;border-radius:50%}
.altitude-note{margin-top:16px;font-size:13.5px;color:var(--ink-faint)}

/* ═══ CALM ═══ */
.calm{padding:120px 0}
.calm .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:900px){.calm .wrap{grid-template-columns:1fr;text-align:center}.calm .sec-lede{margin:0 auto}}
.calm::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(1.2px 1.2px at 7% 24%,rgb(var(--white-rgb)/.8),transparent),radial-gradient(1px 1px at 21% 71%,rgb(var(--white-rgb)/.5),transparent),radial-gradient(1.4px 1.4px at 36% 9%,rgb(var(--white-rgb)/.9),transparent),radial-gradient(1px 1px at 44% 56%,rgb(var(--white-rgb)/.45),transparent),radial-gradient(1.1px 1.1px at 57% 33%,rgb(var(--white-rgb)/.7),transparent),radial-gradient(1px 1px at 66% 84%,rgb(var(--white-rgb)/.5),transparent),radial-gradient(1.3px 1.3px at 79% 21%,rgb(var(--white-rgb)/.85),transparent),radial-gradient(1px 1px at 88% 64%,rgb(var(--white-rgb)/.55),transparent),radial-gradient(1.1px 1.1px at 96% 41%,rgb(var(--white-rgb)/.6),transparent),radial-gradient(1px 1px at 13% 46%,rgb(var(--white-rgb)/.5),transparent);
  background-size:540px 460px;background-repeat:repeat;
  animation:twinkle 6.5s ease-in-out infinite alternate-reverse}
.calm-plane{display:block;justify-self:center;width:min(345px,62vw);height:auto;
  filter:drop-shadow(0 28px 44px var(--shadow-plane));animation:planebob 6.5s ease-in-out infinite}
@keyframes planebob{0%,100%{transform:translateY(0) rotate(-1.8deg)}50%{transform:translateY(-16px) rotate(1.8deg)}}
.check-list{margin-top:26px;max-width:620px;display:flex;flex-direction:column;gap:13px;text-align:left;list-style:none}
@media (max-width:900px){.check-list{margin-left:auto;margin-right:auto}}
.check-list li{list-style:none;display:flex;gap:12px;align-items:flex-start;color:var(--ink-dim);font-size:15px}
.check-list li b{color:var(--ink);font-weight:600}
.check-list .ck{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgb(var(--green-rgb)/.15);border:1px solid rgb(var(--green-rgb)/.4);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}

/* ═══ NIGHT ZONE: stars + a travelling moon over calm → finale ═══ */
.night-zone{position:relative}
.calm{position:relative}
.calm::before,.finale::before{content:"";position:absolute;pointer-events:none;z-index:0;
  background-image:radial-gradient(1.3px 1.3px at 11% 15%,rgb(var(--white-rgb)/.9),transparent),radial-gradient(1px 1px at 27% 62%,rgb(var(--white-rgb)/.5),transparent),radial-gradient(1.5px 1.5px at 41% 28%,rgb(var(--white-rgb)/.8),transparent),radial-gradient(1px 1px at 58% 74%,rgb(var(--white-rgb)/.45),transparent),radial-gradient(1.2px 1.2px at 69% 12%,rgb(var(--white-rgb)/.85),transparent),radial-gradient(1px 1px at 83% 48%,rgb(var(--white-rgb)/.55),transparent),radial-gradient(1.1px 1.1px at 94% 82%,rgb(var(--white-rgb)/.5),transparent),radial-gradient(1px 1px at 18% 88%,rgb(var(--white-rgb)/.4),transparent),radial-gradient(1.2px 1.2px at 49% 52%,rgb(var(--white-rgb)/.6),transparent),radial-gradient(1px 1px at 76% 30%,rgb(var(--white-rgb)/.5),transparent);
  background-size:600px 500px;background-repeat:repeat;
  animation:twinkle 5.5s ease-in-out infinite alternate}
.calm::before{inset:0}
.finale::before{inset:0 0 30% 0;
  /* The only two colour literals left outside :root, and deliberately so:
     in a mask #000 is OPACITY, not a colour. Tokenising it would invite a
     light theme to "fix" it to white and erase whatever it masks. */
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
.calm .wrap,.finale .wrap{position:relative;z-index:1}
.nz-moon{position:absolute;top:84px;right:10%;width:92px;height:92px;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 38% 36%,var(--moon-1),var(--moon-2) 58%,var(--moon-3));
  box-shadow:0 0 46px 16px var(--moon-glow-in),0 0 120px 48px var(--moon-glow-out)}
@media (max-width:700px){.nz-moon{width:62px;height:62px;right:7%;top:54px}}

/* ═══ FINALE ═══ */
.finale{position:relative;margin:60px 0 0;padding:120px 0 130px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,var(--night) 0%,var(--finale-2) 40%,var(--finale-3) 78%,var(--horizon) 100%)}
.finale h2{font-size:clamp(38px,5.6vw,68px);margin:16px 0 14px;background:linear-gradient(180deg,var(--ink-max) 60%,var(--peach-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.finale .sec-lede{margin:0 auto 34px}
.finale .cloud .puff{background:radial-gradient(circle at 50% 35%,var(--cloud-f-core),var(--cloud-f-edge) 60%,transparent 75%)}
.f-cl-1{left:-4%;bottom:2%;width:520px;height:150px;animation:drift 90s linear infinite}
.f-cl-2{left:60%;bottom:-4%;width:640px;height:170px;animation:drift 110s linear infinite reverse}

/* ═══ FOOTER ═══ */
footer.site{border-top:1px solid var(--line);background:var(--night)}
.foot-inner{max-width:1180px;margin:0 auto;padding:28px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;color:var(--ink-faint);font-size:12.5px}
.foot-inner a{color:var(--ink-dim);transition:color .2s}
.foot-inner a:hover{color:var(--ink)}
.foot-spacer{margin-left:auto}

/* ═══ THE FLY-PAST — the last thing on every page ═══
   A thin strip under the footer: the sign-off sits still, the mascot crosses
   it. `overflow:hidden` is what makes it a window rather than a 100vw-wide
   element that gives the whole document a horizontal scrollbar. */
.flystrip{position:relative;overflow:hidden;height:76px;display:flex;align-items:center;
  justify-content:center;border-top:1px solid var(--line);background:var(--night)}
.flystrip-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);text-align:center;padding:0 20px}
.fs-heart{color:var(--sunset);font-size:12px;letter-spacing:0}

/* The span crosses, the <img> inside it bobs — see flyStrip() in layout.js for
   why that cannot be one element. The plane starts and ends fully outside the
   strip, so it reads as passing by rather than appearing and vanishing.

   The mascot is the app's TOP-DOWN logbook render, facing north, so the bob
   keyframes carry a baked-in 90deg to point it along the strip. It has to live
   in the keyframes rather than in a separate rule: one element gets one
   `transform`, and a second declaration would replace the rotation instead of
   adding to it. Order matters too — `rotate` is written last so it applies
   FIRST, leaving translateY to bob the plane up the screen rather than up its
   own rotated axis. */
.flystrip-plane{position:absolute;top:38%;left:0;display:block;
  animation:flypast 26s linear infinite;will-change:transform}
.flystrip-plane img{display:block;width:52px;height:auto;
  animation:flybob 3.4s ease-in-out infinite;filter:drop-shadow(0 8px 16px var(--shadow-plane))}
@keyframes flypast{
  from{transform:translate3d(-120px,-50%,0)}
  to{transform:translate3d(calc(100vw + 120px),-50%,0)}
}
@keyframes flybob{
  0%,100%{transform:translateY(0) rotate(87deg)}
  50%{transform:translateY(-7px) rotate(93deg)}
}

/* The picker: four small chips at the right-hand end, the app's own liveryRow
   shrunk to footer scale. All four show to everyone and the painted three are
   dotted — that is the app's behaviour, the locked ones are the ask. */
.fs-pick{position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;gap:6px}
.fs-lv{position:relative;width:32px;height:32px;padding:3px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1.5px solid transparent;transition:border-color .2s,background .2s}
.fs-lv img{width:100%;height:100%;object-fit:contain}
.fs-lv:hover{background:rgb(var(--lav-rgb)/.08)}
.fs-lv[aria-checked="true"]{border-color:var(--gold);background:rgb(var(--gold-rgb)/.12)}
.fs-lv-pro{position:absolute;top:1px;right:1px;width:5px;height:5px;border-radius:50%;
  background:var(--gold)}

/* Reduced motion gets the joke without the movement: the plane parks off to
   one side rather than disappearing, so the strip still has a plane in it. */
@media (prefers-reduced-motion:reduce){
  .flystrip-plane{animation:none;left:auto;right:33%;transform:translateY(-50%)}
  .flystrip-plane img{animation:none;transform:rotate(90deg)}
}
@media (max-width:560px){
  .flystrip{height:128px}
  .flystrip-note{font-size:9.5px;letter-spacing:.14em;margin-bottom:46px}
  .flystrip-plane img{width:44px}
  .fs-pick{right:auto;left:50%;top:auto;bottom:14px;transform:translateX(-50%)}
}

/* ═══ DOWNLOAD MODAL ═══ */
#dlModal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
#dlModal[hidden]{display:none}
#dlModal .dl-backdrop{position:absolute;inset:0;background:var(--shadow-modal);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#dlModal .dl-card{position:relative;background:var(--deep);border:1px solid var(--line);border-radius:24px;padding:32px 30px 30px;width:min(430px,100%);box-shadow:0 40px 100px rgb(var(--black-rgb)/.6);animation:dlIn .22s cubic-bezier(.2,.9,.3,1.1);text-align:center}
@keyframes dlIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
#dlModal .dl-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:none;border-radius:50%;background:rgb(var(--ink-hi-rgb)/.08);color:var(--ink-dim);font-size:16px;line-height:1;cursor:pointer}
#dlModal .dl-mascot{width:84px;height:84px;border-radius:22px;margin:0 auto 14px;display:block;box-shadow:0 12px 32px rgb(var(--black-rgb)/.45)}
#dlModal .dl-title{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.02em;margin:0 0 6px}
#dlModal .dl-sub{color:var(--ink-dim);font-size:14px;margin-bottom:22px}
.dl-badge{display:flex;align-items:center;justify-content:center;gap:12px;background:rgb(var(--ink-hi-rgb)/.06);border:1px dashed rgb(var(--ink-hi-rgb)/.25);color:var(--ink-dim);border-radius:14px;padding:14px 18px}
.dl-badge-text{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.dl-badge-text .s{font-size:10.5px;opacity:.75;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.dl-badge-text .t{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
@media (max-width:480px){#dlModal{align-items:flex-end;padding:0}#dlModal .dl-card{border-radius:24px 24px 0 0;width:100%;padding-bottom:calc(30px + env(safe-area-inset-bottom))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Landing-page and tool styles.

   base.css above this is the homepage's committed look, lifted verbatim so the
   two can never drift. Everything here is additive: new section types, the
   language switcher, the forecaster. Same tokens, same palette, no new fonts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ NAV: real links + language switcher ═══ */
/* The old `@media (max-width:980px){.nav-links{display:none}}` lived here and
   simply hid the nav on anything narrower — fine when there was nothing to
   open it with, wrong now. It is gone: the breakpoint below turns the strip
   into the mobile panel instead, and it MUST stay equal to the one the burger
   appears at, or there is a band of widths with no nav and no way to get one. */
header.site .brand{margin-right:26px}

.langsw{position:relative;flex:0 0 auto}
.langsw summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--ink-dim);border:1px solid var(--line);border-radius:100px;padding:7px 13px;transition:color .2s,border-color .2s}
.langsw summary::-webkit-details-marker{display:none}
.langsw summary:hover{color:var(--ink);border-color:rgb(var(--gold-rgb)/.4)}
.langsw[open] summary{color:var(--ink);border-color:rgb(var(--gold-rgb)/.5)}
.langsw ul{position:absolute;top:calc(100% + 9px);right:0;z-index:50;min-width:172px;list-style:none;margin:0;padding:7px;
  background:rgb(var(--deep-rgb)/.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:15px;box-shadow:0 24px 60px rgb(var(--shadow-rgb)/.65)}
.langsw ul a{display:block;padding:9px 13px;border-radius:9px;font-size:14px;color:var(--ink-dim);transition:background .15s,color .15s}
.langsw ul a:hover{background:rgb(var(--lav-rgb)/.09);color:var(--ink)}
.langsw ul a[aria-current]{color:var(--gold)}
@media (max-width:520px){.langsw summary span{display:none}.langsw summary{padding:7px 10px}}

/* ═══ NAV MENUS ═══
   Two dropdowns (Features, Learn) put all 21 pages in the sitewide nav. Built
   on <details> like .langsw above, so open/close, Enter, Escape and focus all
   work with no JavaScript — see navItem() in layout.js. */
.nav-links{display:flex;align-items:center;gap:24px;margin-right:auto}
.navmenu{position:relative}
.navmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  font-size:14.5px;font-weight:500;color:var(--ink-dim);transition:color .2s}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary:hover,.navmenu[open] summary{color:var(--ink)}
.nav-chev{transition:transform .22s;opacity:.7}
.navmenu[open] .nav-chev{transform:rotate(180deg)}

/* `width:max-content` lets the panel be as narrow as its shortest locale (the
   Japanese menu is tiny) and the cap stops the longest from running off the
   bar — French "Les turbulences sont-elles dangereuses ?" is 294px of text.
   Labels WRAP rather than nowrap: with nowrap the grid column stayed at 188px
   and simply cut the French labels off mid-word, invisibly, in a menu nobody
   would think to re-measure after a re-translation. Two lines is fine; a
   sliced word is not. */
.nav-panel{position:absolute;top:calc(100% + 16px);left:-20px;z-index:50;
  width:max-content;max-width:min(560px,92vw);
  display:grid;grid-template-columns:repeat(2,minmax(178px,1fr));gap:20px 34px;padding:22px 24px;
  background:rgb(var(--deep-rgb)/.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:18px;box-shadow:0 26px 70px rgb(var(--shadow-rgb)/.65)}
/* A group of four (the routes) would leave a ragged column beside a group of
   two, so it spans the panel and splits its own links instead. */
.nav-panel .wide{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px}
.nav-panel .wide ul{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.nav-group-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px}
.nav-panel ul{list-style:none}
.nav-panel a{display:block;padding:7px 10px;margin-left:-10px;border-radius:9px;font-size:14.5px;
  color:var(--ink-dim);transition:background .15s,color .15s}
.nav-panel a:hover{background:rgb(var(--lav-rgb)/.09);color:var(--ink)}

/* The burger is desktop-hidden and mobile-only; the bars become an X via
   .nav-open on <body>, which is also what reveals the panel. */
.navburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;
  padding:0 8px;background:none;border:1px solid var(--line);border-radius:11px;cursor:pointer}
.navburger .bl{display:block;height:1.8px;border-radius:2px;background:var(--ink-dim);
  transition:transform .24s,opacity .18s}
body.nav-open .navburger .bl1{transform:translateY(6.8px) rotate(45deg)}
body.nav-open .navburger .bl2{opacity:0}
body.nav-open .navburger .bl3{transform:translateY(-6.8px) rotate(-45deg)}

@media (max-width:980px){
  .navburger{display:flex}
  header.site .brand{margin-right:auto}
  /* Full-screen panel below the header bar, everything expanded — no second
     tap to reach a feature. `display:none` rather than a transform so the 21
     links are not in the tab order while the menu is shut. */
  .nav-links{display:none;position:fixed;top:66px;left:0;right:0;bottom:0;z-index:45;
    flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;
    padding:14px 24px 48px;background:rgb(var(--night-rgb)/.985);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-links{display:flex}
  .navmenu{position:static}
  .navmenu summary{display:none}
  .nav-panel{position:static;display:block;width:auto;max-width:none;padding:0;background:none;
    border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-group{margin-bottom:18px}
  .nav-panel .wide{border-top:0;padding-top:0}
  .nav-panel .wide ul{grid-template-columns:1fr}
  .nav-panel a,.nav-links>.nav-link{display:block;padding:11px 12px;margin-left:-12px;
    border-radius:10px;font-size:16px;white-space:normal}
  .nav-links>.nav-link{font-weight:650;color:var(--ink)}
}

/* On a phone the bar carries brand + language + CTA + burger, and at the
   default 22px gap and 19px CTA padding that overflows 414px — "Get the app"
   wrapped onto two lines and pushed the header taller than the panel's `top`,
   opening a strip of page between them. The panel's top offset below MUST
   stay equal to this header's height (11+11 padding + 38 content = 60). */
@media (max-width:520px){
  .nav-inner{gap:12px;padding:11px 16px}
  .nav-cta{padding:9px 15px;font-size:13.5px;white-space:nowrap}
  .nav-links{top:60px}
}

/* ═══ PAGE HERO (every page but the homepage) ═══ */
.page-hero{position:relative;overflow:hidden;padding:150px 0 70px;
  background:linear-gradient(180deg,var(--zenith) 0%,var(--phero-2) 42%,var(--phero-3) 78%,var(--night) 100%)}
.page-hero .stars{inset:0 0 30% 0}
.page-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.page-hero h1{font-size:clamp(36px,5.2vw,64px);margin:18px 0 18px;max-width:16ch;
  background:linear-gradient(180deg,var(--ink-max) 58%,var(--peach));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero .lede{color:rgb(var(--ink-hi-rgb)/.8);font-size:clamp(16px,1.7vw,19px);max-width:48ch}
.page-hero-art{display:flex;justify-content:center}
/* A hero with no art (the forecaster, where the tool itself is the art) goes
   single-column and centred, rather than leaving half the fold empty. */
.page-hero-inner.solo{grid-template-columns:1fr;max-width:820px;margin-inline:auto;text-align:center;padding-bottom:56px}
.page-hero-inner.solo h1{max-width:none;margin-inline:auto;font-size:clamp(34px,4.6vw,56px)}
.page-hero-inner.solo .lede{margin-inline:auto}
.page-hero-inner.solo .cta-row{justify-content:center}
.page-hero-inner.solo .eyebrow{justify-content:center}
@media (max-width:900px){
  .page-hero{padding:128px 0 56px}
  .page-hero-inner{grid-template-columns:1fr;gap:36px}
  .page-hero h1{max-width:none}
}

/* The forecaster's hero: heading, one line, then the form. Tighter than a
   normal page hero on purpose — the point is that both airport fields are
   above the fold on a laptop, so every vertical pixel above them is spent
   deliberately. The tool's own -30px pull-up is cancelled here because it is
   inside this section rather than in a band below it. */
.tool-hero{padding:142px 0 66px}
.tool-hero-head{position:relative;z-index:2;max-width:760px;text-align:center}
.tool-hero-head .eyebrow{justify-content:center}
.tool-hero h1{margin:16px auto 14px;max-width:18ch;font-size:clamp(34px,4.4vw,54px)}
.tool-hero .lede{margin-inline:auto;max-width:52ch}
.tool-hero .tool{margin-top:32px}
.tool-hero-note{position:relative;z-index:3;margin-top:18px;text-align:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
@media (max-width:900px){
  .tool-hero{padding:118px 0 50px}
  .tool-hero .tool{margin-top:26px}
}

/* ═══ BANDS ═══ */
.band{padding:88px 0}
.band.tint{background:linear-gradient(180deg,var(--night),var(--band-tint) 50%,var(--night))}
.band.flip .grid2>*:first-child{order:2}
.band.flip .grid2>*:last-child{order:1}
@media (max-width:900px){
  .band{padding:64px 0}
  .band.flip .grid2>*:first-child,.band.flip .grid2>*:last-child{order:0}
}
.wrap.narrow{max-width:760px}
.sec-title.small{font-size:clamp(24px,3vw,32px)}
.prose p{color:var(--ink-dim);font-size:16.5px;margin-top:15px;max-width:68ch}
.prose p:first-child{margin-top:18px}

/* The "and here is the page about that" row (sectionLinks in sections.js).
   Gold, so it reads as the one thing in the section you can act on, and
   flex-wrapped so two or three links stack cleanly in a narrow column. The
   arrow slides on hover, matching .btn-ghost and .card-more. */
.sec-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.sec-links a{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:15.5px;
  color:var(--gold);transition:gap .25s,color .2s}
.sec-links a span{transition:transform .25s}
.sec-links a:hover{color:var(--ink-max)}
.sec-links a:hover span{transform:translateX(3px)}
.sec-links.center{justify-content:center;margin-top:24px}

/* A section title is sized for the full 1180px wrap. In a two-column band the
   column is ~525px, where the same clamp topped out at 52px and spent four
   lines on a heading — h1 scale, competing with the actual h1 further up the
   page. Half the column's height was the title before a word of the answer. */
.grid2 .sec-title{font-size:clamp(26px,3.2vw,38px);margin:12px 0 14px}

/* ═══ FEATURE CARDS as links ═══ */
a.feature-card{display:block}
.card-more{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);transition:gap .2s}
a.feature-card:hover .card-more{color:var(--peach)}

/* ═══ STEPS ═══ */
ol.steps{counter-reset:s;list-style:none;margin-top:34px;display:flex;flex-direction:column;gap:14px}
ol.steps li{counter-increment:s;position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px 22px 70px}
ol.steps li::before{content:counter(s);position:absolute;left:24px;top:21px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:14px;
  background:linear-gradient(135deg,rgb(var(--sky-rgb)/.3),rgb(var(--sunset-rgb)/.24));border:1px solid var(--line);color:var(--ink)}
ol.steps h3{font-size:18px;margin-bottom:6px}
ol.steps p{color:var(--ink-dim);font-size:14.8px}

/* ═══ FAQ ═══ */
.faq{margin-top:30px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 2px;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--body);font-weight:600;font-size:16.5px;letter-spacing:0;line-height:1.4;flex:1;color:var(--ink)}
.faq-x{flex:0 0 auto;width:16px;height:16px;position:relative;opacity:.55}
.faq-x::before,.faq-x::after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:transform .25s}
.faq-x::before{left:0;top:7px;width:16px;height:2px}
.faq-x::after{left:7px;top:0;width:2px;height:16px}
.faq details[open] .faq-x::after{transform:scaleY(0)}
.faq details[open] summary h3{color:var(--gold)}
.faq-a{padding:0 2px 22px}
.faq-a p{color:var(--ink-dim);font-size:15.3px;margin-top:10px}
.faq-a p:first-child{margin-top:0}

/* ═══ RELATED ═══ */
.related{padding-top:20px}
/* Every `related` section on the site carries exactly four cards, and a 228px
   minimum fitted THREE of them across the 760px narrow wrap — so all 22 pages
   ended on a 3+1 grid with one card stranded on its own row. A 300px minimum
   fits two, which makes it an even 2x2 on desktop and still collapses to a
   single column on a phone. Check this if a related section ever gets a fifth
   card. */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:13px;margin-top:26px}
.rel-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;transition:transform .2s,border-color .2s}
.rel-card:hover{transform:translateY(-3px);border-color:rgb(var(--gold-rgb)/.35)}
.rel-title{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em}
.rel-body{color:var(--ink-dim);font-size:13.5px;line-height:1.45}

/* ═══ FOOTER columns ═══ */
.foot-cols{max-width:1180px;margin:0 auto;padding:52px 24px 8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:30px}
.foot-col h2{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:13px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:14px;color:var(--ink-dim);transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-note{color:var(--ink-faint)}
@media (max-width:600px){.foot-note{display:none}}

/* ═══ DOWNLOAD MODAL: two badges ═══ */
.dl-badges{display:flex;flex-direction:column;gap:10px}
a.dl-badge-live{border-style:solid;border-color:rgb(var(--ink-hi-rgb)/.4);color:var(--ink);transition:border-color .2s,background .2s}
a.dl-badge-live:hover{border-color:var(--gold);background:rgb(var(--gold-rgb)/.1)}

/* ═══ LIVE ACTIVITY CARD ═══ */
.la-phone{width:min(330px,88vw);border-radius:30px;padding:26px 16px 20px;text-align:center;
  background:linear-gradient(180deg,var(--globe-line-a),var(--globe-line-b) 70%);border:1px solid var(--line);box-shadow:0 30px 80px rgb(var(--shadow-rgb)/.6)}
.la-time{font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.03em;line-height:1}
.la-date{font-size:12.5px;color:var(--ink-dim);margin-top:2px}
.la-card{margin-top:22px;background:rgb(var(--panel-rgb)/.86);border:1px solid var(--line);border-radius:18px;padding:14px 15px;text-align:left}
.la-top{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.la-top img{border-radius:5px}
.la-now{margin-left:auto}
.la-head{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;margin:9px 0 12px}
.la-route{display:flex;align-items:center;gap:10px}
.la-code{font-family:var(--mono);font-size:12px;color:var(--ink-dim)}
.la-prog{position:relative;flex:1;height:2px;background:rgb(var(--lav-rgb)/.18);border-radius:2px}
.la-prog i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--sky),var(--gold));border-radius:2px}
.la-prog svg{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(90deg)}
.la-foot{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.la-ride{color:var(--green)}

/* ═══ ROUTE MAP CARD ═══ */
.map-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px;backdrop-filter:blur(10px)}
.map-card svg{width:100%;height:auto;display:block}
.map-layers{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.map-layer{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);background:rgb(var(--lav-rgb)/.07);border:1px solid var(--line);padding:6px 12px;border-radius:100px}

/* ═══ COMPARE TABLE ═══ */
.cmp{margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:14px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.cmp thead th:nth-child(3){color:var(--gold)}
.cmp tbody th{font-weight:500;color:var(--ink-dim)}
.cmp td{text-align:center;width:90px}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}
.cmp .yes{color:var(--green);font-size:16px}
.cmp .no{color:var(--ink-faint)}

/* ═══ BREATHING PACER ═══ */
.breathe{display:flex;flex-direction:column;align-items:center;gap:20px}
.breathe-ring{width:min(210px,58vw);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgb(var(--sky-rgb)/.22),rgb(var(--green-rgb)/.08) 62%,transparent 72%);
  border:1px solid rgb(var(--green-rgb)/.35);animation:breathe 11s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.82)}42%{transform:scale(1)}58%{transform:scale(1)}}
.breathe-word{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.breathe-note{font-size:13.5px;color:var(--ink-faint);text-align:center;max-width:32ch}

/* ═══════════════════════════════════════════════════════════════════════════
   THE TURBULENCE FORECASTER
   ═══════════════════════════════════════════════════════════════════════════ */
.tool{position:relative;z-index:3;margin:-30px auto 0;max-width:940px;padding:0 24px}
.tool-card{background:linear-gradient(180deg,var(--tool-top),var(--tool-bottom));border:1px solid var(--line);
  border-radius:26px;padding:24px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 40px 100px rgb(var(--shadow-rgb)/.65)}
.tool-form{display:grid;grid-template-columns:1fr auto 1fr 1fr auto;gap:12px;align-items:end}
@media (max-width:860px){.tool-form{grid-template-columns:1fr 1fr;gap:10px}.tool-swap{display:none}.tool-go{grid-column:1/-1}}
.tool-field{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0}
/* The date and datetime fields swap with `hidden` as the mode changes, and a
   display: on the class outranks the attribute's own display:none — without
   this the "hidden" one stays on screen and the form grows a sixth column. */
.tool-field[hidden]{display:none}
.tool-field label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.tool-field input{width:100%;background:rgb(var(--lav-rgb)/.06);border:1px solid var(--line);border-radius:13px;
  padding:13px 15px;color:var(--ink);font-family:var(--body);font-size:15px;font-weight:500;transition:border-color .2s,background .2s}
.tool-field input::placeholder{color:var(--ink-faint);font-weight:400}
.tool-field input:focus{outline:none;border-color:rgb(var(--gold-rgb)/.6);background:rgb(var(--lav-rgb)/.1)}
.tool-field input[aria-expanded="true"]{border-color:rgb(var(--gold-rgb)/.6)}
.tool-swap{align-self:end;margin-bottom:6px}
.tool-swap button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgb(var(--lav-rgb)/.06);
  color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s,color .2s,border-color .2s}
.tool-swap button:hover{color:var(--ink);border-color:rgb(var(--gold-rgb)/.5);transform:rotate(180deg)}
.tool-go button{width:100%;white-space:nowrap;background:linear-gradient(135deg,var(--sunset),var(--gold));color:var(--on-gold);
  font-family:var(--display);font-weight:800;font-size:15px;padding:14px 24px;border-radius:13px;border:none;cursor:pointer;
  box-shadow:0 12px 32px rgb(var(--sunset-rgb)/.34);transition:transform .18s,box-shadow .18s}
.tool-go button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 44px rgb(var(--sunset-rgb)/.48)}
.tool-go button:disabled{opacity:.55;cursor:wait}

/* Airport autocomplete */
.ac{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;max-height:286px;overflow-y:auto;
  background:rgb(var(--deep-rgb)/.98);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 60px rgb(var(--shadow-rgb)/.7);padding:6px;list-style:none}
.ac[hidden]{display:none}
.ac li{padding:10px 12px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:11px;transition:background .12s}
.ac li[aria-selected="true"],.ac li:hover{background:rgb(var(--lav-rgb)/.11)}
.ac .ac-code{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--gold);flex:0 0 34px}
.ac .ac-name{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac .ac-city{font-size:12.5px;color:var(--ink-faint);margin-left:auto;flex:0 0 auto}

/* Result */
.tool-out{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.tool-out[hidden]{display:none}
.tool-msg{padding:26px 4px;text-align:center;color:var(--ink-dim);font-size:15px}
.tool-msg b{color:var(--ink);display:block;font-family:var(--display);font-size:18px;margin-bottom:6px}
.tool-spin{width:26px;height:26px;margin:0 auto 14px;border:2px solid rgb(var(--lav-rgb)/.2);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.res-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.res-verdict{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.03em}
.res-verdict.smooth{color:var(--green)}.res-verdict.light{color:var(--yellow)}
.res-verdict.moderate{color:var(--orange)}.res-verdict.severe{color:var(--red)}
.res-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-left:auto}
.res-lede{color:var(--ink-dim);font-size:15.5px;max-width:60ch}

.res-chart{margin-top:22px;position:relative}
.res-chart svg{width:100%;height:auto;display:block;overflow:visible}
.res-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);margin-top:9px}
.res-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.res-legend span{display:inline-flex;align-items:center;gap:6px}

.res-segs{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.res-seg{display:flex;align-items:flex-start;gap:13px;background:rgb(var(--lav-rgb)/.05);border:1px solid var(--line);border-radius:13px;padding:12px 15px}
.res-seg .bar{flex:0 0 3px;align-self:stretch;border-radius:3px;min-height:34px}
.res-seg .s-main{font-weight:600;font-size:14.8px}
.res-seg .s-sub{color:var(--ink-dim);font-size:13.3px;margin-top:3px}
.res-seg .s-time{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);margin-left:auto;flex:0 0 auto;padding-left:10px}

.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-top:20px}
.res-tile{background:rgb(var(--lav-rgb)/.05);border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.res-tile .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.res-tile .v{font-family:var(--display);font-weight:800;font-size:17px;margin-top:4px}

.res-map{margin-top:20px;background:rgb(var(--night-rgb)/.5);border:1px solid var(--line);border-radius:18px;padding:14px}
.res-map svg{width:100%;height:auto;display:block}
/* The forecaster's map is a .routemap as well, so it inherits that element's
   frame and the Mapbox specificity guard with it. The padding has to go: the
   GL canvas is positioned against the padding box, so 14px of it would leave
   the live map sitting in a rim the route-page map does not have. */
.res-map.routemap{padding:0}

.res-cta{margin-top:22px;padding:18px 20px;border-radius:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgb(var(--sunset-rgb)/.14),rgb(var(--sky-rgb)/.1));border:1px solid rgb(var(--gold-rgb)/.3)}
.res-cta img{width:44px;height:44px;border-radius:12px;flex:0 0 auto}
.res-cta .t{flex:1;min-width:190px}
.res-cta .t b{display:block;font-family:var(--display);font-size:16px;letter-spacing:-.02em}
.res-cta .t span{color:var(--ink-dim);font-size:13.5px}
.res-cta button{flex:0 0 auto}
.res-foot{margin-top:16px;font-size:12.3px;color:var(--ink-faint);line-height:1.5}

/* ── The flight picker ──────────────────────────────────────────────────────
   Step 2 of the forecaster: that day's real departures, one row each. A row
   is a <button> because it is a choice, not a link — it stays on the page and
   turns into the forecast above it. */
.pick-head{margin-bottom:16px}
.pick-title{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.6vw,26px);letter-spacing:-.025em}
.pick-sub{color:var(--ink-dim);font-size:14px;margin-top:5px}
.pick-note{margin-top:13px;font-size:12.3px;color:var(--ink-faint)}

.fl-list{display:flex;flex-direction:column;gap:9px}
.fl-row{width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  background:rgb(var(--lav-rgb)/.05);border:1px solid var(--line);border-radius:14px;padding:12px 15px;
  color:inherit;font-family:var(--body);transition:border-color .18s,background .18s,transform .18s}
.fl-row:hover{background:rgb(var(--lav-rgb)/.09);border-color:rgb(var(--gold-rgb)/.45);transform:translateY(-1px)}
.fl-row:focus-visible{outline:2px solid rgb(var(--gold-rgb)/.7);outline-offset:2px}

/* The mark sits on white: airline logos are drawn for light backgrounds and
   a good third of them vanish against the night gradient otherwise. */
.fl-logo{flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--chip-bg);overflow:hidden}
.fl-logo img{width:30px;height:30px;object-fit:contain;display:block}
/* The monogram that replaces a missing mark — see logo() in tool.browser.js. */
.fl-mono{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--on-chip);letter-spacing:.02em}

.fl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fl-top{display:flex;align-items:baseline;gap:9px;min-width:0}
.fl-id{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink);flex:0 0 auto}
.fl-airline{font-size:13.5px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-sub{font-size:12.5px;color:var(--ink-faint)}

.fl-times{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.fl-clock{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14.5px;font-weight:500}
.fl-arrow{width:18px;height:1px;background:rgb(var(--lav-rgb)/.35);display:block;position:relative;font-style:normal}
.fl-arrow::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;
  border-top:1px solid rgb(var(--lav-rgb)/.35);border-right:1px solid rgb(var(--lav-rgb)/.35);transform:rotate(45deg)}
.fl-dur{font-size:12px;color:var(--ink-faint);font-family:var(--mono)}

@media (max-width:620px){
  /* The aircraft line is the first thing to go: it is the least load-bearing
     field on the row, and keeping it forces the clocks to wrap under the
     flight number, which is the one pairing that has to stay readable. */
  .fl-sub{display:none}
  .fl-row{gap:11px;padding:11px 12px}
  .fl-clock{font-size:13px;gap:6px}
  .fl-airline{font-size:12.5px}
}

/* The way out of flight mode, offered under the list and on an empty day. */
.pick-alt{margin-top:18px;padding:15px 17px;border-radius:15px;display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  background:rgb(var(--lav-rgb)/.04);border:1px dashed var(--line)}
.pick-alt .t{flex:1;min-width:180px}
.pick-alt .t b{display:block;font-family:var(--display);font-size:15px;letter-spacing:-.02em}
.pick-alt .t span{color:var(--ink-dim);font-size:13.3px}
.btn-ghost-sm{flex:0 0 auto;font-family:var(--body);font-size:13.5px;font-weight:600;cursor:pointer;
  color:var(--ink);background:rgb(var(--lav-rgb)/.08);border:1px solid var(--line);border-radius:100px;padding:9px 17px;
  transition:border-color .2s,background .2s}
.btn-ghost-sm:hover{border-color:rgb(var(--gold-rgb)/.5);background:rgb(var(--lav-rgb)/.13)}

/* "Pick a different flight" under a result. */
.tool-back{display:inline-flex;align-items:center;gap:7px;margin-top:16px;cursor:pointer;
  background:none;border:none;padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);transition:color .2s}
.tool-back::before{content:"←"}
.tool-back:hover{color:var(--gold)}

/* The picked flight, named above its own forecast. */
.res-flight{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:13px 16px;border-radius:15px;
  background:linear-gradient(135deg,rgb(var(--sky-rgb)/.13),rgb(var(--lav-rgb)/.05));border:1px solid var(--halo)}
.res-flight .t{flex:1;min-width:0}
.rf-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rf-top b{font-family:var(--mono);font-size:15.5px;font-weight:500}
.rf-route{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-faint)}
.rf-sub{font-size:13px;color:var(--ink-dim);margin-top:2px}
.rf-clock{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:15px;font-weight:500}
@media (max-width:620px){.rf-clock{font-size:13.5px}}

/* Example routes under the tool — real internal links, not decoration */
.tool-egs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.tool-egs .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
/* An <a> now, not a <button>: these link to the route pages. inline-flex and
   nowrap because the localized labels are longer than the English ones
   ("Los Angeles to Honolulu", "ロサンゼルスからホノルル") and a chip that wraps
   mid-label looks broken. */
.tool-eg{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);background:rgb(var(--lav-rgb)/.06);
  border:1px solid var(--line);padding:6px 12px;border-radius:100px;cursor:pointer;transition:color .2s,border-color .2s}
.tool-eg:hover{color:var(--ink);border-color:rgb(var(--gold-rgb)/.45)}

@media (prefers-reduced-motion:reduce){
  .breathe-ring,.tool-spin{animation:none}
}

/* Whose clock the departure field is in. Small, but the tool forecasts the
   wrong hour of the day for half the world without it. */
.tool-hint{margin-top:11px;font-size:12.5px;color:var(--ink-faint)}

/* ═══ ROUTE MAP (route pages) ═══
   The SVG globe is the content and paints first; Mapbox is layered over it and
   only appears once it has actually drawn, so a failed load leaves the globe
   rather than a hole. */
.routemap{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--globe-top),var(--globe-bottom))}
.routeglobe{transition:opacity .5s ease}
.routeglobe svg{display:block;width:100%;height:auto}
.rg-ocean{fill:rgb(var(--sky-rgb)/.07)}
.rg-grat{fill:none;stroke:rgb(var(--lav-rgb)/.13);stroke-width:.7}
.rg-route{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round}
.rg-dot{fill:var(--peach);stroke:var(--phero-2);stroke-width:2}
.rg-code{fill:var(--peach);font-family:var(--mono);font-size:13px;text-anchor:middle;letter-spacing:.08em}
/* Scoped by parent on purpose. Mapbox GL JS adds `.mapboxgl-map` to whatever
   element it is given, and its own stylesheet says `position:relative` on that
   class. We inject that stylesheet at runtime, so it lands AFTER ours in the
   cascade — equal specificity, later rule, it wins. The holder went
   position:relative, collapsed to 0 height (its only child is the absolutely
   positioned GL canvas), and since `.has-map` had already faded the SVG globe
   out, the page showed a 430px empty box. One extra class outranks it. */
.routemap .routemap-canvas{position:absolute;inset:0}
.routemap-canvas[hidden]{display:none}
.routemap.has-map .routeglobe{opacity:0;pointer-events:none}
.routemap.has-map{aspect-ratio:760/460}
.routemap-note{margin-top:14px;font-size:13px;color:var(--ink-faint);text-align:center}

/* ═══ ILLUSTRATIONS ═══
   The product renders. They carry their own alpha and sit straight on the page
   background — no card, no border — so the only job here is to size them and
   give them a little lift off the dark. */
.art{margin:0;display:flex;justify-content:center}
.art img{display:block;width:100%;height:auto;max-width:520px;
  filter:drop-shadow(0 26px 60px var(--shadow-globe))}
.art-wide img{max-width:640px}
/* Beside copy rather than above it, 520px filled the column edge to edge and
   outweighed the paragraph it illustrates. A hero or a full-width stack still
   gets the full size — there it is the subject, not the aside. */
.grid2 .art img{max-width:430px}
@media (max-width:860px){.art img,.grid2 .art img{max-width:420px}}
@media (max-width:700px){.routemap.has-map{aspect-ratio:4/3}}

/* ═══ LIVERY PICKER — "Your plane, your colours" ═══
   Mirrors the app's logbook picker (components/logbook/TravelMap.tsx): all
   four planes shown to everyone, the chosen one ringed with a tick, and the
   three painted ones wearing the PRO pill. The app shows the locked ones on
   purpose — the thumbnails are the ask — and a Pro row never vanishes. */
.liverystage{position:relative}
.liverystage .routeglobe{pointer-events:none}

/* The plane rides the great circle by `offset-path`, set per route as an
   inline style in routemap.js. `auto 90deg` because the mascot is a top-down
   render facing north while `auto` points an element's +X along the heading. */
.rg-plane{offset-rotate:auto 90deg;offset-distance:0%;
  animation:flyarc 13s linear infinite;will-change:offset-distance}
@keyframes flyarc{from{offset-distance:0%}to{offset-distance:100%}}

.liverypick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.lv{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 10px 13px;border-radius:18px;cursor:pointer;
  background:rgb(var(--lav-rgb)/.05);border:1.5px solid var(--line);
  transition:border-color .2s,background .2s,transform .2s}
.lv:hover{transform:translateY(-2px);border-color:rgb(var(--gold-rgb)/.4)}
.lv-art{display:flex;align-items:flex-end;justify-content:center;height:62px}
.lv-art img{width:auto;height:100%;object-fit:contain}
.lv-name{font-size:13.5px;font-weight:650;color:var(--ink-dim)}
.lv[aria-checked="true"]{background:rgb(var(--gold-rgb)/.1);border-color:rgb(var(--gold-rgb)/.55)}
.lv[aria-checked="true"] .lv-name{color:var(--ink)}
/* The tick badge. Drawn as a real <path> — the first version built it from two
   crossed linear-gradients and rendered as a pair of unrelated dashes. It is
   the same tick the app's picker uses. */
.lv-tick{position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;
  display:none;align-items:center;justify-content:center;background:var(--gold);color:var(--on-gold)}
.lv[aria-checked="true"] .lv-tick{display:flex}
.lv-pro{position:absolute;top:9px;left:9px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  padding:3px 6px;border-radius:99px;color:var(--gold);background:rgb(var(--gold-rgb)/.14)}
.liverynote{margin-top:16px;text-align:center;color:var(--ink-faint);font-size:13.5px}

@media (prefers-reduced-motion:reduce){
  .rg-plane{animation:none;offset-distance:62%}
}
@media (max-width:620px){
  .liverypick{grid-template-columns:repeat(2,1fr)}
  .lv-art{height:54px}
}

/* ═══ Aircraft pages (src/aircraft.js) ═══
   Every drawing is currentColor; the tones below are the only styling. */
.ac-hero,.ac-cmp,.ac-xs,.ac-flex{margin:0;color:rgb(var(--ink-alt-rgb))}
.ac-hero > svg{display:block;width:100%;max-height:440px}
.ac-hero .ac-body{color:var(--ink)}
.ac-dim path{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke}
.ac-dims{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:14px;color:var(--ink-dim)}
.ac-dims b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin-right:6px}
.ac-cmp{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px}
.ac-cmp svg{display:block;width:100%;max-width:560px;margin:0 auto}
.ac-cmp .ac-body{color:var(--ink);opacity:.9}
.ac-ghost path{fill:none;stroke:var(--gold);stroke-width:2.2;vector-effect:non-scaling-stroke}
.ac-cmp-cap{font-size:14px;color:var(--ink-dim);margin:10px 0 12px;text-align:center}
.ac-cmp-cap b{color:var(--ink)}
.ac-cmp-cap .ac-cmp-other{color:var(--gold)}
.ac-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ac-chip{font:500 12.5px var(--body);color:var(--ink-dim);background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}
.ac-chip:hover{color:var(--ink);border-color:var(--ink-faint)}
.ac-chip[aria-pressed="true"]{color:var(--on-gold);background:var(--gold);border-color:var(--gold)}
.ac-xs{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 18px 16px}
.ac-xs svg{display:block;width:100%;max-width:520px;margin:0 auto}
.ac-wall{color:rgb(var(--ink-alt-rgb));opacity:.85}
.ac-floor{color:var(--ink-faint)}
.ac-seats{color:var(--sky);fill-opacity:.55}
.ac-flex{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px}
.ac-flex svg{display:block;width:100%;overflow:visible}
.ac-flex .body{color:var(--ink)}
.ac-flex .wing-l,.ac-flex .wing-r{color:rgb(var(--ink-alt-rgb));transform-box:view-box}
.ac-flex .wing-l{transform-origin:var(--ox-l) var(--oy);animation:ac-flex-l 5s ease-in-out infinite}
.ac-flex .wing-r{transform-origin:var(--ox-r) var(--oy);animation:ac-flex-r 5s ease-in-out infinite}
@keyframes ac-flex-r{0%,100%{transform:rotate(0)}40%{transform:rotate(calc(var(--flex) * -1))}60%{transform:rotate(calc(var(--flex) * -.7))}}
@keyframes ac-flex-l{0%,100%{transform:rotate(0)}40%{transform:rotate(var(--flex))}60%{transform:rotate(calc(var(--flex) * .7))}}
@media (prefers-reduced-motion:reduce){.ac-flex .wing-l,.ac-flex .wing-r{animation:none}}
.ac-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:760px){.ac-facts{grid-template-columns:repeat(2,1fr)}}
.ac-sources{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:6px;font-size:13.5px}
.ac-sources a{color:var(--ink-dim);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ac-sources a:hover{color:var(--ink)}
.ac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.ac-card{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px 14px;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.ac-card:hover{border-color:var(--ink-faint);transform:translateY(-2px)}
.ac-card svg{display:block;width:100%;aspect-ratio:1;color:rgb(var(--ink-alt-rgb));margin-bottom:6px}
.ac-card-name{font-family:var(--display);font-weight:700;font-size:15px}
.ac-card-sub{font-size:12px;color:var(--ink-faint)}
.ac-ghost[hidden]{display:none}
.ac-bins{color:rgb(var(--ink-alt-rgb));fill-opacity:.22}
.ac-sources span{color:var(--ink-faint);margin-left:6px}
.tool-band .wrap.narrow{text-align:center;margin-bottom:56px}
.tool-band .sec-lede{margin:0 auto}
.tool-band .eyebrow{justify-content:center}

/* ═══ Airline pages (src/airline.js) ═══ */
.al-logo{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--chip-bg);color:var(--on-chip);overflow:hidden;flex:0 0 auto}
.al-logo-lg{width:84px;height:84px}
.al-logo-sm{width:34px;height:34px}
.al-logo img{width:78%;height:78%;object-fit:contain}
.al-mono{font:800 15px var(--display);letter-spacing:.02em}
.al-logo-lg .al-mono{font-size:26px}
.al-hero{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px 26px}
.al-hero-num b{font:800 88px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.al-hero-num span{display:block;font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px}
.al-hero figcaption{font-size:15px;color:var(--ink-dim);max-width:30ch}
.al-tl{margin:0}
.al-tl-line{position:relative;height:2px;background:var(--line);margin:34px 6px 34px}
.al-tl-tick{position:absolute;top:-4px;width:1px;height:10px;background:var(--line)}
.al-tl-tick i{position:absolute;top:14px;left:-14px;font:500 10.5px var(--mono);font-style:normal;color:var(--ink-faint)}
.al-tl-line .al-tl-dot{position:absolute;top:-6px;margin-left:-7px}
.al-tl-dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle}
.al-tl-dot.al-own{background:var(--gold)}
.al-tl-dot.al-regional{border:2px solid var(--gold)}
.al-tl-dot.al-hostile{border:2px solid var(--ink-faint)}
.al-tl-key{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--ink-dim);margin-top:10px}
.al-tl-key i{margin-right:7px}
.al-events{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.al-events li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:14px;color:var(--ink-dim)}
.al-events li b{color:var(--ink);margin-right:6px}
.al-events li span{display:block;margin-top:4px;font-size:13.5px}
.al-events li.al-own{border-left:3px solid var(--gold)}
.al-table{display:grid;gap:8px}
.al-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 16px;color:var(--ink);text-decoration:none}
a.al-row:hover{border-color:var(--ink-faint)}
.al-row-name{font:700 15px var(--display);flex:1}
.al-row-stat{font-size:13.5px;color:var(--ink-dim);text-align:right}
/* Anxious-flyer hero (1 Oct 2026) */
.al-hero{align-items:stretch;text-align:left;gap:18px;padding:28px 28px 26px}
.al-hero-top{display:flex;align-items:center;gap:16px}
.al-hero-top .al-logo-lg{width:64px;height:64px}
.al-badge{display:flex;align-items:center;gap:10px;color:var(--green);background:rgb(var(--green-rgb)/.1);border:1px solid rgb(var(--green-rgb)/.35);border-radius:14px;padding:10px 14px;flex:1}
.al-badge b{display:block;font:800 17px/1.2 var(--display);color:var(--ink)}
.al-badge span{display:block;font-size:13px;color:var(--ink-dim);margin-top:2px}
.al-odds{display:flex;flex-direction:column;gap:4px}
.al-odds-k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.al-odds b{font:800 52px/1.05 var(--display);letter-spacing:-.02em;color:var(--ink)}
.al-hero figcaption{max-width:none}
.al-odds-sub{font-size:13px;color:var(--ink-faint);margin:0}
.al-odds-days{font-size:15px;color:var(--ink-dim);margin:10px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.al-row-stat{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.al-row-badge{font-size:12.5px;color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.al-row-badge.clean{color:var(--green);border-color:rgb(var(--green-rgb)/.4)}
.al-row-odds{font:700 13.5px var(--display);color:var(--ink);min-width:118px;text-align:right}
@media (max-width:640px){.al-odds b{font-size:40px}.al-row-odds{min-width:0}}
.al-oddscard{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid rgb(var(--green-rgb)/.35);border-radius:22px;padding:22px 24px;margin:0 0 18px;color:var(--green)}
.al-oddscard svg{width:34px;height:34px;flex:0 0 auto;margin-top:4px}
.al-oddscard b{display:block;font:800 44px/1.05 var(--display);letter-spacing:-.02em;color:var(--ink);margin-top:4px}
.al-oddscard p{font-size:13.5px;color:var(--ink-faint);margin:6px 0 0}
.al-oddscard .al-odds-days{font-size:15px;color:var(--ink-dim)}
.al-row-badge{display:inline-flex;align-items:center;gap:6px}
.al-row-badge svg{width:15px;height:15px}
.ac-safe{display:flex;gap:12px;align-items:flex-start;margin-top:16px;color:var(--green);background:rgb(var(--green-rgb)/.08);border:1px solid rgb(var(--green-rgb)/.3);border-radius:16px;padding:12px 16px;text-align:left}
.ac-safe svg{flex:0 0 auto;margin-top:1px}
.ac-safe b{display:block;font:800 16px/1.25 var(--display);color:var(--ink);margin-bottom:3px}
.ac-safe span{display:block;font-size:13.5px;color:var(--ink-dim)}
.ac-safe strong{display:block;font:800 26px/1.1 var(--display);letter-spacing:-.01em;color:var(--ink);margin:2px 0 3px}