@font-face{font-family:"Inter";font-style:normal;font-weight:200 700;font-display:swap;src:url("/daylight/inter-opsz-v20-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:200 700;font-display:swap;src:url("/daylight/inter-opsz-v20-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* OPTION B, DAYLIGHT (founder pick, 11 Oct 2026), version 12.
   Layout: the airliner window is the page's one visual idea: the subjects are a row of cabin windows and the close is one
   still cabin window (the window that opened into the photo as you scrolled was "disorienting", founder, 12 Oct 2026). The
   hero is type only: its window showed the subject row's own photos again (founder, 12 Oct 2026), and a photo appears in
   one section only. Colour: the brand's warm paper with a faint grain, ink type, a soft colour glow under what each section
   shows (the founder's pick of the gallery directions, A), amber only on the one action in view. No dark bands (probe C).
   Motion (founder, 12 Oct 2026): only the blinds lift on their own, once, as you reach them, the RTR pills tick once, and the
   two films (RTR and the live airport) loop while they are on screen, with no control. The subject row moves only by hand;
   the headline and the bento play once and rest. Nothing is pinned: the page moves exactly as far as you scroll.
   System (founder, 12 Oct 2026: "the whole landing page doesn't have the same level of consistency"): every section takes
   its spacing, corners, type sizes and control sizes from the tokens below and sets none of its own. The showcases are RTR
   and airline cadet prep (founder, 12 Oct 2026: the solved PAPI question leaves the landing). */
html:has(.dl){
  /* --fg3 is the fine print's grey: 4.5:1 or more on the paper, the cards, the footer and the glows' tint (it was #7a848e,
     3.2:1 on the footer, found by the Fable comparison and check-craft.js, 12 Oct 2026) */
  --bg:#faf8f1; --ground:#efebe0; --card:#fffdf7; --fg:#0d1b2a; --fg2:#45515e; --fg3:#56626e; --line:rgba(13,27,42,.1);
  --night:#07182d; --cream:#fdf7ea; --slate:#9db6cc;
  --panel:#fffdf7; --panel-2:#f3f0e7; --accent:#ff8f1f; --accent-ink:#1b0f02; --dia-ink:#0d1b2a;
  --bezel-1:#fbf9f4; --bezel-2:#e8e2d5;
  --opt-bg:rgba(255,255,255,.06); --opt-line:rgba(253,247,234,.16); --opt-key:rgba(255,255,255,.1);
  --nav-solid:rgba(250,248,241,.8);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --g:20px; --ease:cubic-bezier(.22,1,.36,1);
  /* the side gutters, never under a notch or a rounded corner when a phone is held sideways */
  --gl:max(var(--g),env(safe-area-inset-left,0px)); --gr:max(var(--g),env(safe-area-inset-right,0px));
  /* the system: space above every section, inside a night band and under a section's head */
  --sec:144px; --band-pad:120px; --head-gap:48px; --grid-gap:24px; --card-pad:30px;
  /* the figures under the hero are the hero's proof, not a section of their own, so they sit half a section's gap below it */
  --strip:72px;
  /* corners: a band, a card or a screen, anything inside a card, a control; pills and round buttons are round */
  --r-band:40px; --r-card:28px; --r-inner:20px; --r-ctl:14px;
  /* type: the one scale and its weights are in type.css (founder, 12 Oct 2026: the text was "too varied") */
  /* every icon button */
  --ctl:44px;
  /* a card on a night band */
  --night-card:#0d2039; --night-line:rgba(253,247,234,.1);
  color-scheme:light;
}
@media (min-width:700px){html:has(.dl){--g:32px}}
@media (min-width:1200px){html:has(.dl){--g:48px}}
@media (max-width:370px){html:has(.dl){--g:16px}}
@media (max-width:899px){html:has(.dl){--sec:112px;--strip:48px;--band-pad:88px;--head-gap:36px;--grid-gap:16px;--card-pad:20px;--r-band:32px;--r-card:24px;--r-inner:18px}}
/* Shared parts for the three landing directions. Each option sets the tokens; these rules only read them.
   Tokens every option defines: --bg --fg --fg2 --fg3 --line --panel --panel-2 --accent --accent-ink --ok --bad --ease */
.dl *:where(:not(.v16-root *)),.dl *:where(:not(.v16-root *))::before,.dl *:where(:not(.v16-root *))::after{box-sizing:border-box}
html:has(.dl){-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;-webkit-tap-highlight-color:transparent}
body:has(.dl){margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.5;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
.dl img:where(:not(.v16-root *)),.dl video:where(:not(.v16-root *)),.dl canvas:where(:not(.v16-root *)){display:block;max-width:100%}
.dl a:where(:not(.v16-root *)){color:inherit;text-decoration:none}
.dl button:where(:not(.v16-root *)){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.dl h1:where(:not(.v16-root *)),.dl h2:where(:not(.v16-root *)),.dl h3:where(:not(.v16-root *)),.dl h4:where(:not(.v16-root *)),.dl p:where(:not(.v16-root *)),.dl ul:where(:not(.v16-root *)),.dl ol:where(:not(.v16-root *)),.dl figure:where(:not(.v16-root *)){margin:0}
.dl ul:where(:not(.v16-root *)),.dl ol:where(:not(.v16-root *)){padding:0;list-style:none}
.dl :focus-visible:where(:not(.v16-root *)){outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.dl .sr:where(:not(.v16-root *)){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dl .i:where(:not(.v16-root *)){width:1em;height:1em;stroke-width:1.75;flex:none}
.dl .wrap:where(:not(.v16-root *)){width:100%;max-width:1240px;margin-inline:auto;padding-left:var(--gl,var(--g));padding-right:var(--gr,var(--g))}
.dl .num:where(:not(.v16-root *)){font-variant-numeric:tabular-nums}

/* ---------- type ---------- */
.dl .display:where(:not(.v16-root *)){font-weight:300;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.dl .title:where(:not(.v16-root *)){font-weight:300;letter-spacing:-.035em;line-height:1.04;text-wrap:balance;font-size:clamp(36px,6.4vw,76px)}
.dl .lede:where(:not(.v16-root *)){font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--fg2);max-width:34ch;text-wrap:pretty}
.dl .small:where(:not(.v16-root *)){font-size:13px;line-height:1.45;color:var(--fg3)}

/* ---------- buttons ---------- */
.dl .btn:where(:not(.v16-root *)){display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;
  font-size:16px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;
  transition:transform .16s var(--ease),translate .4s var(--ease),background .2s ease,box-shadow .2s ease,color .2s ease}
.dl .btn-glow:where(:not(.v16-root *)){background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 30px -10px rgba(255,143,31,.65)}
.dl .btn-line:where(:not(.v16-root *)){color:var(--fg);box-shadow:0 0 0 1px var(--line) inset}
.dl .btn-solid:where(:not(.v16-root *)){background:var(--fg);color:var(--bg)}
.dl .link:where(:not(.v16-root *)){display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:16px;color:var(--fg);padding-block:11px;margin-block:-11px;transition:opacity .1s var(--ease)}
.dl .link .i:where(:not(.v16-root *)){transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .dl .btn-glow:hover:where(:not(.v16-root *)){background:#ffa03c;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 40px -10px rgba(255,143,31,.8)}
  .dl .btn-line:hover:where(:not(.v16-root *)){box-shadow:0 0 0 1px var(--fg2) inset}
  .dl .link:hover .i:where(:not(.v16-root *)){transform:translateX(4px)}
}
.dl .btn:active:where(:not(.v16-root *)){transform:scale(.97)}

/* ---------- nav ---------- */
.dl .nav:where(:not(.v16-root *)){position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:transform .2s var(--ease),background .4s,box-shadow .4s,backdrop-filter .4s}
.dl .nav-in:where(:not(.v16-root *)){display:flex;align-items:center;gap:12px;height:64px}
.dl .nav .logo:where(:not(.v16-root *)){height:26px;width:auto;color:var(--nav-fg,var(--fg))}
.dl .nav-links:where(:not(.v16-root *)){display:none;gap:28px;margin-left:36px;font-size:14px;font-weight:450;color:var(--nav-fg2,var(--fg2))}
.dl .nav-links a:where(:not(.v16-root *)){transition:color .25s}
.dl .nav-cta:where(:not(.v16-root *)){margin-left:auto;display:flex;align-items:center;gap:8px}
.dl .nav-cta .btn:where(:not(.v16-root *)){height:40px;padding:0 16px;font-size:14px}
.dl .nav .menu:where(:not(.v16-root *)){position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1px var(--nav-line,var(--line)) inset;color:var(--nav-fg,var(--fg));transition:transform .16s var(--ease)}
.dl .nav .menu .i:where(:not(.v16-root *)){font-size:18px}
.dl .nav .login:where(:not(.v16-root *)){display:none;font-size:14px;font-weight:500;color:var(--nav-fg,var(--fg));padding:0 10px}
.dl .nav.is-solid:where(:not(.v16-root *)){background:var(--nav-solid);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 1px 0 var(--line)}
.dl .nav.is-away:where(:not(.v16-root *)){transform:translateY(-100%);transition-duration:.3s}
@media (min-width:980px){.dl .nav-links:where(:not(.v16-root *)){display:flex}.dl .nav .menu:where(:not(.v16-root *)){display:none}.dl .nav .login:where(:not(.v16-root *)){display:inline-flex}}
@media (min-width:980px) and (hover:hover) and (pointer:fine){.dl .nav-links a:hover:where(:not(.v16-root *)){color:var(--nav-fg,var(--fg))}}
/* at 320 px the bar still fits: a smaller logo and button; under 300 px the button says "Sign up" */
@media (max-width:349px){.dl .nav .logo:where(:not(.v16-root *)){height:22px}.dl .nav-cta .btn:where(:not(.v16-root *)){padding:0 10px}}
@media (max-width:299px){.dl .nav-more:where(:not(.v16-root *)){display:none}}

/* ---------- reveals (only blocks below the first screen ever wait) ---------- */
.dl .rv-wait:where(:not(.v16-root *)){opacity:0;transform:translate3d(0,12px,0)}
.dl .rv-in:where(:not(.v16-root *)){transition:opacity .5s var(--ease) var(--d,0ms),transform .5s var(--ease) var(--d,0ms)}
.dl [data-rv="fade"].rv-wait:where(:not(.v16-root *)){transform:none}
.dl [data-rv="scale"].rv-wait:where(:not(.v16-root *)){transform:scale(.97)}

/* ---------- the hero line (founder pick, 2 Sep 2026): a fixed prefix and a subject revealed by a warm sweep ---------- */
@property --dia-sweep{syntax:'<percentage>';inherits:false;initial-value:114%}
.dl .dia:where(:not(.v16-root *)){position:relative;display:inline-grid;white-space:nowrap;font-weight:600}
.dl .dia-size:where(:not(.v16-root *)){visibility:hidden;grid-area:1/1;padding-bottom:.12em}
.dl .dia-word:where(:not(.v16-root *)){grid-area:1/1;position:absolute;left:0;right:0;top:0;width:max-content;max-width:100%;margin-inline:auto;padding-bottom:.12em;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  --dia-sweep:114%;
  background-image:linear-gradient(90deg,
    var(--dia-ink) 0%, var(--dia-ink) calc(var(--dia-sweep) - 14%),
    #ffd9a8 calc(var(--dia-sweep) - 14%), #ffb763 calc(var(--dia-sweep) - 7%),
    #ff8f1f calc(var(--dia-sweep) + 0%), #e2660c calc(var(--dia-sweep) + 7%),
    #b8480a calc(var(--dia-sweep) + 14%),
    transparent calc(var(--dia-sweep) + 14%), transparent 100%)}
.dl .dia-word.enter:where(:not(.v16-root *)){--dia-sweep:-14%;transition:none;opacity:.56;filter:blur(6px);transform:translateY(5px)}
.dl .dia-word.sweep:where(:not(.v16-root *)){transition:--dia-sweep 1.56s cubic-bezier(.45,0,.55,1),opacity .6s ease,filter .8s ease,transform .8s var(--ease);
  --dia-sweep:114%;opacity:1;filter:blur(0);transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.dl .dia-word:where(:not(.v16-root *)),.dl .dia-word.enter:where(:not(.v16-root *)),.dl .dia-word.sweep:where(:not(.v16-root *)){--dia-sweep:114%;opacity:1;filter:none;transform:none;transition:none}}
/* on a screen too narrow for the widest subject at the display size, a subject may take two lines */
@media (max-width:359px){.dl .dia:where(:not(.v16-root *)){white-space:normal}.dl .dia-word:where(:not(.v16-root *)){text-align:center}}

/* ---------- films and stills ---------- */
.dl .film:where(:not(.v16-root *)){position:relative;overflow:hidden;background:#0a1626}
.dl .film > video:where(:not(.v16-root *)),.dl .film > img:where(:not(.v16-root *)),.dl .film > canvas:where(:not(.v16-root *)),.dl .film > picture:where(:not(.v16-root *)),.dl .film > picture img:where(:not(.v16-root *)){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dl .film video:where(:not(.v16-root *)),.dl .film img:where(:not(.v16-root *)),.dl .bigwin img:where(:not(.v16-root *)){pointer-events:none;-webkit-touch-callout:none}





/* ---------- carousel ---------- */













/* ---------- the RTR call ---------- */






/* Listen: the call's real recordings, on a tap */






@keyframes eq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}








@keyframes onair{0%{box-shadow:0 0 0 0 rgba(255,143,31,.6)}80%,100%{box-shadow:0 0 0 9px rgba(255,143,31,0)}}
















/* ---------- split-flap cells ---------- */














@keyframes flapTop{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes flapBottom{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}

/* ---------- plans ---------- */
.dl .plans:where(:not(.v16-root *)){display:grid;gap:14px}
.dl .plan:where(:not(.v16-root *)){position:relative;border-radius:26px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:18px}
.dl .plan h3:where(:not(.v16-root *)){font-size:15px;font-weight:500;letter-spacing:-.005em}
.dl .plan .price:where(:not(.v16-root *)){display:flex;align-items:baseline;gap:8px}
.dl .plan .price b:where(:not(.v16-root *)){font-size:48px;line-height:1;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.dl .plan ul:where(:not(.v16-root *)){display:grid;gap:11px;font-size:15px;line-height:1.4}
.dl .plan li:where(:not(.v16-root *)){display:flex;gap:10px;align-items:flex-start}
.dl .plan li .i:where(:not(.v16-root *)){margin-top:2px;font-size:16px;color:var(--fg3)}
.dl .plan .btn:where(:not(.v16-root *)){width:100%;margin-top:auto}
@media (min-width:900px){.dl .plans:where(:not(.v16-root *)){grid-template-columns:repeat(3,1fr);align-items:stretch}}

/* ---------- footer ---------- */
.dl .foot:where(:not(.v16-root *)){padding-block:72px 40px;font-size:14px}
.dl .foot-top:where(:not(.v16-root *)){display:grid;gap:36px}
.dl .foot .logo:where(:not(.v16-root *)){height:24px;width:auto}
.dl .foot-blurb:where(:not(.v16-root *)){max-width:36ch;color:var(--fg3);margin-top:16px;line-height:1.55}
.dl .foot-cols:where(:not(.v16-root *)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
.dl .foot-cols h4:where(:not(.v16-root *)){font-size:13px;font-weight:500;margin-bottom:12px}
.dl .foot-cols ul:where(:not(.v16-root *)){display:grid;gap:9px;color:var(--fg3)}
.dl .foot-base:where(:not(.v16-root *)){display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);color:var(--fg3);font-size:13px}
.dl .foot-base span:last-child:where(:not(.v16-root *)){margin-left:auto}
@media (min-width:900px){.dl .foot-top:where(:not(.v16-root *)){grid-template-columns:minmax(0,1.2fr) minmax(0,3fr)}.dl .foot-cols:where(:not(.v16-root *)){grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- the probe's own note: what each picture is, top to bottom (not part of the design) ---------- */







/* ---------- press, tap and touch (Emil Kowalski's skills, 12 Oct 2026): every control answers the moment a finger or a mouse
   presses it, in 100 to 160 ms; the browser's grey tap box is off (html above) because each control has its own press. Tap
   areas are at least 44 px; where the drawing is smaller, an invisible layer grows the area and nothing moves ---------- */
.dl a:where(:not(.v16-root *)),.dl button:where(:not(.v16-root *)),.dl [role="tab"]:where(:not(.v16-root *)){touch-action:manipulation}
.dl button:where(:not(.v16-root *)),.dl [role="tab"]:where(:not(.v16-root *)),.dl .btn:where(:not(.v16-root *)){-webkit-user-select:none;user-select:none}
.dl .nav-cta .btn:where(:not(.v16-root *)){position:relative}
.dl .nav-cta .btn:where(:not(.v16-root *))::after,.dl .nav .menu:where(:not(.v16-root *))::after{content:"";position:absolute;inset:-2px}
.dl .nav-in > a:first-child:where(:not(.v16-root *)){display:inline-flex;align-items:center;min-height:44px}
.dl .nav .menu:active:where(:not(.v16-root *)){transform:scale(.97)}
.dl .link:active:where(:not(.v16-root *)),.dl .nav-in > a:first-child:active:where(:not(.v16-root *)){opacity:.6}
/* a browser without overflow:clip (Safari before 16) must not let the glows widen the page */
@supports not (overflow:clip){.dl main:where(:not(.v16-root *)){overflow-x:hidden}}

/* The three bento vignettes (rebuilt from the founder's Inspora picks of 6 Oct 2026). The app cards inside
   are always the app's own light cards; the tile around them is the option's. Each scene plays once when the bento
   is seen and rests (vg.js holds its keyframes there); a pointer on a tile plays it again. */
.dl .bento:where(:not(.v16-root *)){display:grid;gap:14px}
.dl .tile a:where(:not(.v16-root *)){position:relative;display:flex;flex-direction:column;height:100%;border-radius:30px;padding:10px;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.dl .tile .stage:where(:not(.v16-root *)){position:relative;height:280px;border-radius:22px;overflow:hidden;container-type:inline-size}
.dl .tile-txt:where(:not(.v16-root *)){padding:18px 64px 12px 14px;display:grid;gap:5px}
.dl .tile-txt h3:where(:not(.v16-root *)){font-size:21px;line-height:1.2;font-weight:500;letter-spacing:-.02em}
.dl .tile-txt p:where(:not(.v16-root *)){font-size:15px;line-height:1.45;color:var(--fg2)}
.dl .tile-go:where(:not(.v16-root *)){position:absolute;right:16px;bottom:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s,transform .5s var(--ease)}
.dl .tile-go .i:where(:not(.v16-root *)){font-size:17px}
.dl .tile a:active:where(:not(.v16-root *)){transform:scale(.985)}
/* one row of three from 1200 px, one column under it (version 21: the Air Navigation course tile went with the course, offline
   since 12 Oct 2026); in a row of three a tile is about a phone's width, which the scenes below size themselves to */
@media (min-width:1200px){.dl .bento:where(:not(.v16-root *)){grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.dl .vg:where(:not(.v16-root *)){position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;color:#0d1b2a;font-family:var(--font)}
.dl .vg-meta:where(:not(.v16-root *)){font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#7b8794}

/* question banks: one card at a time, the right option marked green, the working underneath */
.dl .vg-bank:where(:not(.v16-root *)){place-items:center}
.dl .vg-streak:where(:not(.v16-root *)){position:absolute;top:16px;left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 9px;border-radius:999px;
  background:#0d1b2a;color:#fdf7ea;font-size:12px;font-weight:500;box-shadow:0 10px 24px -12px rgba(0,0,0,.6);white-space:nowrap}
.dl .vg-streak i:where(:not(.v16-root *)){width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 50% 60%,#ffd29e 0 25%,#ff8f1f 55%,#c85e00 100%);box-shadow:0 0 10px rgba(255,143,31,.7)}
.dl .vg-streak b:where(:not(.v16-root *)){font-weight:600}
.dl .vg-deck:where(:not(.v16-root *)){position:relative;width:min(86%,350px);height:220px;margin-top:40px}
.dl .vg-dcard:where(:not(.v16-root *)){position:absolute;inset:0;padding:16px 18px;border-radius:20px;background:#fff;
  box-shadow:0 0 0 1px rgba(13,27,42,.06),0 22px 44px -24px rgba(13,27,42,.45);animation:vgDeck 9s infinite;animation-delay:calc(var(--k) * -3s - .6s)}
@keyframes vgDeck{
  0%{transform:translate3d(0,0,0) scale(1);opacity:1}
  30%{transform:translate3d(0,0,0) scale(1);opacity:1}
  36%{transform:translate3d(-112%,-4%,0) rotate(-7deg);opacity:0}
  37%{transform:translate3d(0,24px,0) scale(.88);opacity:0}
  66%{transform:translate3d(0,24px,0) scale(.88);opacity:.55}
  70%{transform:translate3d(0,12px,0) scale(.94);opacity:.85}
  97%{transform:translate3d(0,12px,0) scale(.94);opacity:.85}
  100%{transform:translate3d(0,0,0) scale(1);opacity:1}}
/* a scene plays two seconds (vg.js REST), in which the top card stays on top, the second at the back and the third between */
.dl .vg-dcard:nth-child(1):where(:not(.v16-root *)){z-index:3}.dl .vg-dcard:nth-child(2):where(:not(.v16-root *)){z-index:1}.dl .vg-dcard:nth-child(3):where(:not(.v16-root *)){z-index:2}
.dl .vg-q:where(:not(.v16-root *)){margin:6px 0 11px;font-size:15px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.dl .vg-opts:where(:not(.v16-root *)){display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dl .vg-opts li:where(:not(.v16-root *)){display:flex;align-items:center;gap:8px;height:32px;padding:0 9px;border-radius:10px;background:#faf9f5;box-shadow:inset 0 0 0 1px #e8e5dc;font-size:13px;white-space:nowrap;overflow:hidden}
.dl .vg-opts i:where(:not(.v16-root *)){font-style:normal;flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:10.5px;font-weight:600;background:#f1efe8}
.dl .vg-opts li.ok:where(:not(.v16-root *)){animation:vgOk 9s infinite;animation-delay:calc(var(--k) * -3s - .6s)}
.dl .vg-opts li.ok i:where(:not(.v16-root *)){animation:vgOkI 9s infinite;animation-delay:calc(var(--k) * -3s - .6s)}
@keyframes vgOk{0%,9%{background:#faf9f5;box-shadow:inset 0 0 0 1px #e8e5dc;color:#0d1b2a}13%,31%{background:#e6f8f2;box-shadow:inset 0 0 0 1.5px #00bc7d;color:#00704a}36%,100%{background:#faf9f5;box-shadow:inset 0 0 0 1px #e8e5dc;color:#0d1b2a}}
@keyframes vgOkI{0%,9%{background:#f1efe8;color:#0d1b2a}13%,31%{background:#00bc7d;color:#fff}36%,100%{background:#f1efe8;color:#0d1b2a}}
.dl .vg-verdict:where(:not(.v16-root *)){margin-top:10px;display:flex;align-items:center;gap:10px;font-size:13px;opacity:0;animation:vgWork 9s infinite;animation-delay:calc(var(--k) * -3s - .6s)}
.dl .vg-verdict b:where(:not(.v16-root *)){color:#00704a;font-weight:600}
.dl .vg-verdict span:where(:not(.v16-root *)){margin-left:auto;padding:4px 10px;border-radius:999px;background:#f1efe8;font-size:11.5px;font-weight:500}
.dl .vg-work:where(:not(.v16-root *)){margin-top:6px;font-size:11.5px;font-weight:500;color:#b4560a;opacity:0;animation:vgWork2 9s infinite;animation-delay:calc(var(--k) * -3s - .6s)}
@keyframes vgWork{0%,14%{opacity:0;transform:translateY(5px)}19%,31%{opacity:1;transform:none}35%,100%{opacity:0}}
@keyframes vgWork2{0%,18%{opacity:0;transform:translateY(5px)}23%,31%{opacity:1;transform:none}35%,100%{opacity:0}}

/* past papers: an ink stamp lands on each sitting */
.dl .vg-papers:where(:not(.v16-root *)){display:flex;gap:14px;justify-content:center;align-items:center}
.dl .vg-stampcard:where(:not(.v16-root *)){position:relative;width:min(27%,150px);aspect-ratio:3/4.1;padding:14px 12px;display:flex;flex-direction:column;gap:7px;background:#fffdf7;border-radius:4px;
  box-shadow:0 1px 0 rgba(13,27,42,.04),0 18px 34px -20px rgba(13,27,42,.55);rotate:calc((var(--i) - 1) * 3deg);translate:0 calc((var(--i) - 1) * (var(--i) - 1) * 8px);
  -webkit-mask:radial-gradient(circle 4px at 50% 0,transparent 98%,#000) 0 0/14px 51% repeat-x,radial-gradient(circle 4px at 50% 100%,transparent 98%,#000) 0 100%/14px 51% repeat-x;
  mask:radial-gradient(circle 4px at 50% 0,transparent 98%,#000) 0 0/14px 51% repeat-x,radial-gradient(circle 4px at 50% 100%,transparent 98%,#000) 0 100%/14px 51% repeat-x}
.dl .vg-stamphead:where(:not(.v16-root *)){display:flex;justify-content:space-between;align-items:baseline;font-size:9px;font-weight:500;letter-spacing:.08em;color:#7b8794;text-transform:uppercase}
.dl .vg-stamphead b:where(:not(.v16-root *)){font-size:18px;font-weight:300;letter-spacing:0;color:#0d1b2a;font-variant-numeric:tabular-nums}
.dl .vg-stampcard p:where(:not(.v16-root *)){margin-top:4px;font-size:13.5px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.dl .vg-when:where(:not(.v16-root *)){font-size:10.5px;line-height:1.3;color:#5d6b79}
.dl .vg-lines:where(:not(.v16-root *)){display:grid;gap:6px;margin-top:4px}
.dl .vg-lines i:where(:not(.v16-root *)){height:4px;border-radius:2px;background:rgba(13,27,42,.08)}
.dl .vg-lines i:nth-child(2):where(:not(.v16-root *)){width:80%}.dl .vg-lines i:nth-child(3):where(:not(.v16-root *)){width:56%}
.dl .vg-ink:where(:not(.v16-root *)){position:absolute;left:50%;bottom:30px;translate:-50% 0;rotate:-8deg;padding:4px 9px;border:2px solid #00a36c;border-radius:7px;color:#00a36c;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:0;animation:vgInk 4.8s infinite;animation-delay:calc(var(--i) * 1.6s)}
@keyframes vgInk{0%,8%{opacity:0;transform:scale(1.8)}14%{opacity:.95;transform:scale(.94)}18%,88%{opacity:.9;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}

/* mock exams: the exam clock and a dot-matrix time-left display */
.dl .vg-mock:where(:not(.v16-root *)){place-items:center}
.dl .vg-dark:where(:not(.v16-root *)){position:absolute;left:calc(50% - 30px);top:calc(50% - 82px);width:206px;height:184px;border-radius:30px;padding:18px 18px 16px 62px;display:flex;flex-direction:column;
  background:#0b1520;color:#fdf7ea;box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 30px 50px -26px rgba(0,0,0,.7)}
.dl .vg-dlabel:where(:not(.v16-root *)){font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#7f93a8}
.dl .vg-matrix:where(:not(.v16-root *)){width:132px;height:26px;margin-top:8px}
.dl .vg-dq:where(:not(.v16-root *)){margin-top:9px;font-size:11px;color:#c4d5e4}
.dl .vg-dgrid:where(:not(.v16-root *)){margin-top:9px;display:grid;grid-template-columns:repeat(10,8px);gap:3px}
.dl .vg-dgrid i:where(:not(.v16-root *)){width:8px;height:8px;border-radius:2px;background:rgba(253,247,234,.12)}
.dl .vg-dgrid i.ans:where(:not(.v16-root *)){background:#fdf7ea}
.dl .vg-dgrid i.flg:where(:not(.v16-root *)){background:#ff8f1f}
.dl .vg-dgrid i.cur:where(:not(.v16-root *)){box-shadow:0 0 0 1.5px #ff8f1f;background:transparent}
.dl .vg-dfoot:where(:not(.v16-root *)){margin-top:auto;font-size:10px;color:#7f93a8}
.dl .vg-clock:where(:not(.v16-root *)){position:absolute;left:calc(50% - 152px);top:calc(50% - 98px);width:176px;height:176px;border-radius:40px;
  background:linear-gradient(160deg,#ffffff,#eceae3);box-shadow:0 1px 0 #fff inset,0 30px 50px -24px rgba(0,0,0,.55)}
.dl .vg-dial:where(:not(.v16-root *)){position:absolute;inset:16px;border-radius:50%}
.dl .vg-dial i:where(:not(.v16-root *)){position:absolute;left:50%;top:0;width:1.5px;height:7px;margin-left:-.75px;background:rgba(13,27,42,.22);transform-origin:50% 72px}
.dl .vg-dial i.maj:where(:not(.v16-root *)){height:11px;width:2px;background:rgba(13,27,42,.55)}
.dl .vg-dial i.grn:not(.maj):where(:not(.v16-root *)){background:#00bc7d}
.dl .vg-hand:where(:not(.v16-root *)){position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:3px}
.dl .vg-hand.h:where(:not(.v16-root *)){width:4px;height:36px;margin-left:-2px;background:#0d1b2a;rotate:-30deg}
.dl .vg-hand.m:where(:not(.v16-root *)){width:3px;height:56px;margin-left:-1.5px;background:#0d1b2a;rotate:174deg;animation:vgSpin 360s linear infinite}
.dl .vg-hand.s:where(:not(.v16-root *)){width:1.5px;height:64px;margin-left:-.75px;background:#ff8f1f;animation:vgSpin 60s linear infinite}
.dl .vg-hub:where(:not(.v16-root *)){position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#ff8f1f;box-shadow:0 0 0 2px #fff}
@keyframes vgSpin{to{transform:rotate(360deg)}}

/* airline cadet assessments: the spatial orientation task */




@keyframes vgRing{from{stroke-dashoffset:0}to{stroke-dashoffset:50.3}}













@keyframes vgPick{0%,52%{background:#f6f4ee;box-shadow:inset 0 0 0 1px #e8e5dc}58%,94%{background:#e6f8f2;box-shadow:inset 0 0 0 1.5px #00bc7d}100%{background:#f6f4ee}}

/* a scene sizes itself to its tile, not to the screen (version 21): a narrow tile is a phone's single column or a laptop's row
   of three alike */
@container (max-width:520px){
  .dl .vg-clock:where(:not(.v16-root *)){left:calc(50% - 146px);transform:scale(.9)}.dl .vg-dark:where(:not(.v16-root *)){left:calc(50% - 24px);transform:scale(.9)}
  .dl .vg-deck:where(:not(.v16-root *)){width:min(88%,350px);height:218px;margin-top:38px}
  .dl .vg-q:where(:not(.v16-root *)){font-size:14px}
  .dl .vg-opts li:where(:not(.v16-root *)){height:30px;font-size:12px;padding:0 7px}
  .dl .vg-stampcard:where(:not(.v16-root *)){width:40%}
  .dl .vg-stampcard:nth-child(3):where(:not(.v16-root *)){display:none}
}
@container (max-width:330px){.dl .vg-clock:where(:not(.v16-root *)){left:calc(50% - 138px);transform:scale(.82)}.dl .vg-dark:where(:not(.v16-root *)){left:calc(50% - 26px);transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){
  .dl .vg *:where(:not(.v16-root *)),.dl .vg *:where(:not(.v16-root *))::before{animation:none!important}
  .dl .vg-dcard:not(:first-child):where(:not(.v16-root *)){opacity:0}
  .dl .vg-dcard:first-child .vg-verdict:where(:not(.v16-root *)),.dl .vg-dcard:first-child .vg-work:where(:not(.v16-root *)),.dl .vg-ink:where(:not(.v16-root *)){opacity:1}
  .dl .vg-dcard:first-child .vg-opts li.ok:where(:not(.v16-root *)){background:#e6f8f2;box-shadow:inset 0 0 0 1.5px #00bc7d;color:#00704a}
}
/* without scripts nothing plays the scenes once and rests them, so they show the same resting frame as reduced motion */
html:not(.js) .dl .vg *:where(:not(.v16-root *)),html:not(.js) .dl .vg *:where(:not(.v16-root *))::before{animation:none!important}
html:not(.js) .dl .vg-dcard:not(:first-child):where(:not(.v16-root *)){opacity:0}
html:not(.js) .dl .vg-dcard:first-child .vg-verdict:where(:not(.v16-root *)),html:not(.js) .dl .vg-dcard:first-child .vg-work:where(:not(.v16-root *)),html:not(.js) .dl .vg-ink:where(:not(.v16-root *)){opacity:1}
html:not(.js) .dl .vg-dcard:first-child .vg-opts li.ok:where(:not(.v16-root *)){background:#e6f8f2;box-shadow:inset 0 0 0 1.5px #00bc7d;color:#00704a}


/* paper, not a screen: a grain too faint to notice and too present to miss when it is gone */
body:has(.dl){background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .16 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}



/* ---------- the system's pieces ---------- */
/* every section: its head (its name in two or three words and one short line under it, nothing above the name), then what it
   shows. How the head is set is the heading design's (heads-N.css). */
.dl .sec:where(:not(.v16-root *)){padding-top:var(--sec)}
.dl .sec-head:where(:not(.v16-root *)){display:grid;gap:16px;justify-items:center;text-align:center;margin-bottom:var(--head-gap)}
.dl .sec-head .title:where(:not(.v16-root *)){font-size:var(--t-title);font-weight:var(--w-title)}
.dl .sec-head .lede:where(:not(.v16-root *)){margin:0}
/* a night band: where our 3D plays, rounded at both ends */
.dl .band:where(:not(.v16-root *)){margin-top:var(--sec);padding-block:var(--band-pad);border-radius:var(--r-band)}
.dl .band-foot:where(:not(.v16-root *)){display:grid;justify-items:center;text-align:center;gap:14px;margin-top:40px}
/* a screen: the one frame our 3D plays in (a film or the live side view) */
.dl .screen:where(:not(.v16-root *)){position:relative;overflow:hidden;border-radius:var(--r-card);background:#0a1626;isolation:isolate}
.dl .screen:where(:not(.v16-root *))::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px var(--night-line) inset}
/* a card on a night band */

/* a statement: the one size between a title and the body */
.dl .statement:where(:not(.v16-root *)){font-size:var(--t-h3)}

/* ---------- nav ---------- */
.dl .nav:where(:not(.v16-root *)){--nav-fg:#0d1b2a;--nav-fg2:#45515e;--nav-line:rgba(13,27,42,.16)}
.dl .nav .btn-solid:where(:not(.v16-root *)){background:#0d1b2a;color:#fdf7ea}
/* scrolled, the bar lifts off the page as one floating capsule; nothing in it moves */
.dl .nav.is-solid:where(:not(.v16-root *)){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.dl .nav-in:where(:not(.v16-root *)){position:relative;isolation:isolate}
.dl .nav-in:where(:not(.v16-root *))::before{content:"";position:absolute;z-index:-1;inset:6px calc(var(--gr) - 14px) 6px calc(var(--gl) - 14px);border-radius:999px;opacity:0;transform:scale(.98);
  background:rgba(250,248,241,.78);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 0 0 1px rgba(13,27,42,.08),0 18px 40px -24px rgba(13,27,42,.35);transition:opacity .2s var(--ease),transform .25s var(--ease)}
.dl .nav.is-solid .nav-in:where(:not(.v16-root *))::before{opacity:1;transform:none}
.dl .nav.is-away .nav-in:where(:not(.v16-root *))::before{backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .2s var(--ease),transform .25s var(--ease),backdrop-filter 0s .3s,-webkit-backdrop-filter 0s .3s}
/* a translucent surface turns solid for a visitor who asks for less transparency */
@media (prefers-reduced-transparency:reduce){.dl .nav-in:where(:not(.v16-root *))::before{background:#faf8f1;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ---------- the window blind: a cabin shade, lifted to show the view ---------- */
.dl .blind:where(:not(.v16-root *)){--lip:18px;position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;
  background:
    radial-gradient(110% 26% at 50% 100%,rgba(255,231,196,.5),rgba(255,231,196,0) 70%),
    linear-gradient(90deg,rgba(13,27,42,.13),rgba(13,27,42,0) 16%,rgba(13,27,42,0) 84%,rgba(13,27,42,.13)),
    repeating-linear-gradient(180deg,rgba(13,27,42,.028) 0 1px,rgba(13,27,42,0) 1px 5px),
    linear-gradient(180deg,#f5f1e8 0%,#ede7da 58%,#e2dbcc 100%)}
.dl .blind:where(:not(.v16-root *))::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--lip) * 1.5);background:linear-gradient(180deg,rgba(2,6,12,.36),rgba(2,6,12,0))}
.dl .blind .lip:where(:not(.v16-root *)){position:absolute;left:0;right:0;bottom:0;height:var(--lip);
  background:linear-gradient(180deg,#d6cebe 0%,#f7f4ed 20%,#ece6da 68%,#cfc6b5 100%);box-shadow:0 -1px 0 rgba(255,255,255,.75)}
.dl .blind .lip:where(:not(.v16-root *))::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--lip) * 2.6);height:calc(var(--lip) * .32);translate:-50% -50%;border-radius:999px;
  background:linear-gradient(180deg,rgba(13,27,42,.26),rgba(13,27,42,.08));box-shadow:0 1px 0 rgba(255,255,255,.85)}
.dl .cw-pane .blind:where(:not(.v16-root *)){--lip:11px;transform:translateY(0);transition:transform .8s cubic-bezier(.32,.72,0,1)}
.dl .cw-pane .blind.up:where(:not(.v16-root *)){transform:translateY(calc(-100% - var(--lip) * 1.6))}

.dl .hero-line:where(:not(.v16-root *)){font-size:var(--t-display);color:var(--fg)}
.dl .hero-h1:where(:not(.v16-root *)){margin:18px auto 0;font-size:clamp(16px,1.5vw,21px);line-height:1.42;font-weight:400;color:var(--fg2);max-width:24ch;text-wrap:balance}
.dl .hero-acts:where(:not(.v16-root *)){display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;margin-top:26px}

@media (prefers-reduced-motion:no-preference){
  .dl .hero .hero-line:where(:not(.v16-root *)),.dl .hero .hero-h1:where(:not(.v16-root *)),.dl .hero .hero-acts:where(:not(.v16-root *)){animation:rise .45s var(--ease) backwards}
  .dl .hero .hero-h1:where(:not(.v16-root *)){animation-delay:.05s}.dl .hero .hero-acts:where(:not(.v16-root *)){animation-delay:.1s}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- the hero: type only (founder, 12 Oct 2026: its window repeated the subject row's photos). The close: one still
   cabin window (the window that opened into the photo as you scrolled was "disorienting"); the page scrolls, the window does
   not change size, and its blind lifts once like the subject windows' (media/ph/<photo>-h.webp, the window's own crop) ---------- */
.dl .hero:where(:not(.v16-root *)){padding-top:calc(104px + env(safe-area-inset-top,0px));text-align:center}
.dl .bigwin:where(:not(.v16-root *)){display:flex;justify-content:center;margin-top:44px}
.dl .bigwin .cw-bezel:where(:not(.v16-root *)){width:min(66vw,300px);padding:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 1px rgba(13,27,42,.07) inset,0 46px 80px -46px rgba(13,27,42,.6)}
.dl .bigwin .cw-pane .blind:where(:not(.v16-root *)){--lip:16px}
.dl .close:where(:not(.v16-root *)){text-align:center}
.dl .close .display:where(:not(.v16-root *)){font-size:var(--t-display);max-width:11ch;margin-inline:auto}
.dl .close-head:where(:not(.v16-root *)){display:grid;justify-items:center;text-align:center;margin-bottom:var(--head-gap)}
.dl .close .btn:where(:not(.v16-root *)){margin-top:28px}
.dl .close .bigwin:where(:not(.v16-root *)){margin-top:0}
.dl .close:where(:not(.v16-root *)){padding-bottom:var(--sec)}
@media (min-width:900px){
  .dl .hero:where(:not(.v16-root *)){padding-top:124px}.dl .hero-h1:where(:not(.v16-root *)){margin-top:18px}.dl .hero-acts:where(:not(.v16-root *)){margin-top:22px}
  .dl .bigwin:where(:not(.v16-root *)){margin-top:56px}.dl .bigwin .cw-bezel:where(:not(.v16-root *)){width:420px;padding:15px}.dl .bigwin .cw-pane .blind:where(:not(.v16-root *)){--lip:20px}
}

/* ---------- the figures (founder, 12 Oct 2026, on version 12's third probe: "can we make this better somehow? i dont like the
   design of this section as of now"): one paper card, three figures side by side with hairlines between them, and the trust
   line as a pill under it. Version 21 (founder, 13 Oct 2026: "can we make this section smaller? rn it takes up too much space"):
   the three stay in one row on a phone too, the numbers are a price's size, the card is tighter and the strip sits --strip
   under the hero, half a section's gap ---------- */
.dl .figs:where(:not(.v16-root *)){text-align:center}
.dl .figs.sec:where(:not(.v16-root *)){padding-top:var(--strip)}
.dl .trust:where(:not(.v16-root *)){margin-top:8px;font-size:var(--t-small);color:var(--fg2)}
.dl .stats:where(:not(.v16-root *)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px;margin-inline:auto;border-radius:var(--r-card);background:var(--card);
  box-shadow:0 0 0 1px var(--line) inset,0 30px 60px -40px rgba(13,27,42,.35)}
.dl .stat:where(:not(.v16-root *)){display:grid;gap:6px;justify-items:center;align-content:start;padding:18px 6px}
.dl .stat + .stat:where(:not(.v16-root *)){border-left:1px solid var(--line)}
.dl .stat b:where(:not(.v16-root *)){line-height:1}
.dl .stat > span:where(:not(.v16-root *)){font-size:var(--t-meta);line-height:1.35;color:var(--fg2);max-width:16ch}
.dl .figs .trust:where(:not(.v16-root *)){display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:36px;padding:6px 15px 6px 12px;border-radius:999px;
  background:rgba(13,27,42,.05);box-shadow:0 0 0 1px rgba(13,27,42,.06) inset;font-size:var(--t-small);color:var(--fg)}
.dl .figs .trust .i:where(:not(.v16-root *)){font-size:17px;color:#00a36c}
@media (min-width:700px){
  .dl .stat:where(:not(.v16-root *)){gap:8px;padding:26px 20px}
  .dl .stat > span:where(:not(.v16-root *)){font-size:var(--t-small);max-width:28ch}
  .dl .figs .trust:where(:not(.v16-root *)){margin-top:18px}
}

/* ---------- RTR: the night band ---------- */
/* Headings, probe 1 (founder, 12 Oct 2026: the section headings were "too wordly and too big and ugly"): each section's name in
   two or three words, semibold and centred, with its one line under it in grey. Sizes are type.css's. */
.dl .sec-head:where(:not(.v16-root *)){gap:10px}
.dl .sec-head .title:where(:not(.v16-root *)){letter-spacing:-.025em;line-height:1.1}
.dl .sec-head .lede:where(:not(.v16-root *)){font-size:var(--t-lead);line-height:1.45;color:var(--fg2);max-width:46ch;text-wrap:balance}

/* version 36 (founder, 13 Oct 2026, of version 35's three icons: "3 flat ink tick"): six tiles. Each stage is the page's tile stage
   holding one icon drawn flat in the page's ink, 40 px on a 1.5 stroke, with no colour of its own, no gloss and no shadow. Its tick is
   in ink too, a 20 px disc with a cream check at the icon's corner, ringed in the stage's own colour. Once, when half of the tiles
   are in view, each icon settles from 92% and its tick draws in, 90 ms apart; then they rest. Under reduced motion, or without
   scripts, they are at rest and ticked from the start. Two across on a phone and beside the film, three across from 700 to 1,099 px.
   Before this, version 20's probe 2: each icon glossy, in two of the page's sky and sea tones, with a green tick. */
.dl .rw-six .rw-pills:where(:not(.v16-root *)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--grid-gap);height:100%}
.dl .rw-six li:where(:not(.v16-root *)){display:flex;flex-direction:column;border-radius:var(--r-card);padding:calc(var(--r-card) - var(--r-inner));background:var(--card);
  box-shadow:0 0 0 1px var(--line) inset,0 1px 0 rgba(255,255,255,.9) inset,0 24px 48px -34px rgba(13,27,42,.4)}
.dl .t-stage:where(:not(.v16-root *)){position:relative;flex:1 1 auto;display:grid;place-items:center;min-height:112px;border-radius:var(--r-inner)}
.dl .t-name:where(:not(.v16-root *)){display:flex;align-items:center;min-height:52px;padding:10px 10px 4px;line-height:1.25;letter-spacing:-.01em;color:var(--fg)}
@media (min-width:700px) and (max-width:1099px){.dl .rw-six .rw-pills:where(:not(.v16-root *)){grid-template-columns:repeat(3,minmax(0,1fr))}}
.dl .rw-icons .t-stage:where(:not(.v16-root *)){background:radial-gradient(120% 90% at 50% 0%,#f3efe4 0%,#ebe6d9 60%,#e5dfd0 100%)}
.dl .t-icon:where(:not(.v16-root *)){position:relative;display:grid;place-items:center;color:var(--fg)}
.dl .t-icon .i:where(:not(.v16-root *)){position:relative;font-size:40px;stroke-width:1.5}
.dl .t-tick:where(:not(.v16-root *)){position:absolute;top:-10px;right:-16px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--fg);
  box-shadow:0 0 0 3px #efe9dd}
.dl .t-tick svg:where(:not(.v16-root *)){width:13px;height:13px;fill:none;stroke:#fdf7ea;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
/* the tick waits for its moment without animating into the wait: the transitions belong to the moment the tiles are reached
   (version 33) */
@media (prefers-reduced-motion:no-preference){
  html.js .dl .rw-six:not(.ticked) .t-tick:where(:not(.v16-root *)){opacity:0;transform:scale(.5)}
  html.js .dl .rw-six:not(.ticked) .t-tick path:where(:not(.v16-root *)){stroke-dashoffset:1}
  html.js .dl .rw-icons:not(.ticked) .t-icon:where(:not(.v16-root *)){transform:scale(.92);opacity:.6}
  .dl .t-tick path:where(:not(.v16-root *)){stroke-dasharray:1}
  .dl .rw-six.ticked .t-icon:where(:not(.v16-root *)){transition:transform .5s var(--ease) calc(var(--i) * 90ms),opacity .4s var(--ease) calc(var(--i) * 90ms)}
  .dl .rw-six.ticked .t-tick:where(:not(.v16-root *)){transition:opacity .25s var(--ease) calc(.45s + var(--i) * 90ms),transform .35s var(--ease) calc(.45s + var(--i) * 90ms)}
  .dl .rw-six.ticked .t-tick path:where(:not(.v16-root *)){transition:stroke-dashoffset .35s var(--ease) calc(.57s + var(--i) * 90ms)}
}
/* version 28 (founder, 13 Oct 2026, on the tiles beside the film: "can you make this area like 20 percent smaller so that the video
   area is larger than this?"): where the tiles sit beside the film (from 1,100 px) they take 32% of the row instead of 40%, a
   fifth less, and the film takes the rest */
@media (min-width:1100px){.dl .rtr .rtr-grid:where(:not(.v16-root *)){grid-template-columns:minmax(0,2.125fr) minmax(0,1fr)}}

.dl .rtr-grid:where(:not(.v16-root *)){display:grid;gap:var(--grid-gap)}
.dl .rtr-film:where(:not(.v16-root *)){aspect-ratio:9/16;width:min(100%,calc(84svh * 9 / 16));margin-inline:auto}
.dl .rtr-film video:where(:not(.v16-root *)){opacity:0;transition:opacity .2s var(--ease)}
.dl .rtr-film video.is-playing:where(:not(.v16-root *)){opacity:1}
/* the film's captions span its middle three fifths, so beside the pills it needs a box at least 1.1 times as wide as it is tall:
   from 1100 px; narrower than that it runs the full width in its own 16:9 */
@media (min-width:700px) and (max-width:1099px){.dl .rtr-film:where(:not(.v16-root *)){aspect-ratio:16/9;width:100%}}
@media (min-width:1100px){
  .dl .rtr-grid:where(:not(.v16-root *)){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
  .dl .rtr-film:where(:not(.v16-root *)){aspect-ratio:auto;width:100%;min-height:540px}
}
/* a phone held sideways sees the whole film and the whole closing window */
@media (orientation:landscape) and (max-height:500px){
  .dl .rtr-film:where(:not(.v16-root *)){aspect-ratio:16/9;width:min(100%,calc(84svh * 16 / 9))}
  .dl .bigwin .cw-bezel:where(:not(.v16-root *)){width:min(300px,56svh)}
}

/* ---------- the subjects: a row of cabin windows ---------- */
.dl .cabin-row:where(:not(.v16-root *)){display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px var(--gr) 18px var(--gl);scroll-padding-left:var(--gl);scroll-padding-right:var(--gr)}
.dl .cabin-row:where(:not(.v16-root *))::-webkit-scrollbar{display:none}
.dl .cw:where(:not(.v16-root *)){flex:none;width:min(40vw,200px);scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:center;text-align:center}
.dl .cw-bezel:where(:not(.v16-root *)){display:block;width:100%;aspect-ratio:2/3;padding:9px;border-radius:46% / 31%;background:linear-gradient(160deg,var(--bezel-1),var(--bezel-2));transition:transform .16s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 1px rgba(13,27,42,.07) inset,0 24px 44px -28px rgba(13,27,42,.55)}
.dl .cw-pane:where(:not(.v16-root *)){position:relative;display:block;width:100%;height:100%;border-radius:44% / 30%;overflow:hidden;background:#2a3442;isolation:isolate}
.dl .cw-pane img:where(:not(.v16-root *)){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .3s var(--ease);color:transparent}
.dl .cw-pane:where(:not(.v16-root *))::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px rgba(13,27,42,.2) inset,0 10px 22px rgba(0,0,0,.32) inset;
  background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 34%)}
.dl .cw b:where(:not(.v16-root *)){font-size:15px;line-height:1.25;font-weight:500;letter-spacing:-.015em;overflow-wrap:anywhere}
.dl .cw:active .cw-bezel:where(:not(.v16-root *)){transform:scale(.97)}
/* a window's count is fine print on the row's light, so it takes the darker grey (version 22: read across the whole row, the
   count of a window that starts off the screen fell to 4.25:1) */
.dl .cw span.num:where(:not(.v16-root *)){display:block;margin-top:-10px;font-size:13px;color:var(--fg2)}
@media (hover:hover) and (pointer:fine){.dl .cw:hover .cw-pane img:where(:not(.v16-root *)){transform:scale(1.07)}}
.dl .cabin-foot:where(:not(.v16-root *)){display:none}
.dl .cabin-go:where(:not(.v16-root *)){width:var(--ctl);height:var(--ctl);padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:var(--fg);background:var(--card);
  box-shadow:0 0 0 1px var(--line) inset;cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease,transform .16s var(--ease)}
.dl .cabin-go:not(:disabled):active:where(:not(.v16-root *)){transform:scale(.97)}
.dl .cabin-go .i:where(:not(.v16-root *)){font-size:20px}
.dl .cabin-go:disabled:where(:not(.v16-root *)){opacity:.32;cursor:default}
.dl .cabin-go:focus-visible:where(:not(.v16-root *)){outline:2px solid var(--accent);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .dl .cabin-foot:where(:not(.v16-root *)){display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
  .dl .cabin-go:not(:disabled):hover:where(:not(.v16-root *)){background:#0d1b2a;color:#fdf7ea}
}
@media (min-width:940px){
  .dl .cabin-row:where(:not(.v16-root *)){--edge:max(var(--g),calc((100vw - 1240px) / 2 + var(--g)));gap:40px;padding-inline:var(--edge);scroll-padding-inline:var(--edge)}
  /* the row's light sits under its windows, which start at the column, not at the screen's edge */
  .dl .cabin:where(:not(.v16-root *)){--gi:30% 2% 2% max(2%,calc((100vw - 1240px) / 2))}
  .dl .cw:where(:not(.v16-root *)){width:236px}
}

/* ---------- airline cadet prep: the section and its probe's layout ---------- */
/* airline cadet prep (founder, 12 Oct 2026: in the solved PAPI question's place), built the showcase way: its name and line,
   what it shows, a card beside it, one amber action. No "best" claim (brand kit), and the count of games is the one live in
   the app (lib/cadet-content/live-games.ts). Everything it shows is in the app now, in the app's own words. */
.dl .cadet-grid:where(:not(.v16-root *)){display:grid;gap:var(--grid-gap)}
@media (min-width:900px){.dl .cadet-grid:where(:not(.v16-root *)){grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}

.dl .cadet .band-foot .small:where(:not(.v16-root *)){margin-top:-2px}
.dl .cadet-end:where(:not(.v16-root *)){margin-top:56px;text-align:center}
/* a screen of the app drawn in the page keeps the app's own sizes and colours, as the bento's app cards do */
.dl .app:where(:not(.v16-root *)){font-family:var(--font);color:#0d1b2a}
.dl .app .i:where(:not(.v16-root *)){font-size:16px}
/* a word with a hyphen in it (Co-ordination) never breaks at the hyphen */
.dl .nb:where(:not(.v16-root *)){white-space:nowrap}

/* the airline tabs, as version 14's cadet layout draws them (cadet-3.css), shared by version 22's probes */
.dl .a-tabs:where(:not(.v16-root *)){display:inline-flex;justify-self:start;gap:4px;padding:4px;border-radius:999px;background:#f1f2f5;margin-bottom:14px}
.dl .a-tabs button:where(:not(.v16-root *)){position:relative;height:40px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:500;color:#5d6b79;white-space:nowrap;transition:transform .16s var(--ease)}
.dl .a-tabs button:where(:not(.v16-root *))::after{content:"";position:absolute;inset:-3px 0}
.dl .a-tabs button:active:where(:not(.v16-root *)){transform:scale(.97)}
.dl .a-tabs button[aria-selected="true"]:where(:not(.v16-root *)){background:#fff;color:#0d1b2a;box-shadow:0 1px 2px rgba(13,27,42,.12),0 0 0 1px rgba(13,27,42,.06)}
.dl .a-tabs button:focus-visible:where(:not(.v16-root *)){outline:2px solid #0d1b2a;outline-offset:2px}

/* version 24 (version 23 with the phone following the tap): the games on a laptop and a phone. The devices are drawn here (a dark
   lid and its base, a phone's glass, its camera and gesture bar); what is on their screens are frames of our own games, each shown
   whole: a screen takes its frames' own shape, so the device never cuts the game. Under them, the airline's tests in its own
   order, each a button that puts its game on both screens at once */
.dl .cadet-grid.c-dev-host:where(:not(.v16-root *)){display:block}
.dl .c-dev-tabs:where(:not(.v16-root *)){display:flex;justify-content:center;margin-bottom:28px}
.dl .c-dev-tabs .a-tabs:where(:not(.v16-root *)){margin:0}
.dl .c-devs:where(:not(.v16-root *)){display:grid}
.dl .c-dev:where(:not(.v16-root *)){grid-area:1/1;display:grid;gap:30px;justify-items:center;min-width:0}
.dl .c-dev.off:where(:not(.v16-root *)){visibility:hidden}
.dl .c-scene:where(:not(.v16-root *)){position:relative;width:min(100%,860px);padding:0 9% 7% 0}
.dl .c-laptop:where(:not(.v16-root *)){margin:0}
.dl .c-lid:where(:not(.v16-root *)){position:relative;display:block;padding:2.2%;border-radius:var(--r-inner) var(--r-inner) 6px 6px;background:#0f1a27;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 40px 70px -40px rgba(13,27,42,.6)}
.dl .c-lid-in:where(:not(.v16-root *)){position:relative;display:block;aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:#eef1f4}
.dl .c-lid-in img:where(:not(.v16-root *)),.dl .c-scr img:where(:not(.v16-root *)){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .22s var(--ease)}
.dl .c-lid-in img.on:where(:not(.v16-root *)),.dl .c-scr img.on:where(:not(.v16-root *)){opacity:1}
.dl .c-base:where(:not(.v16-root *)){display:block;height:14px;margin:0 -5%;border-radius:0 0 14px 14px;background:linear-gradient(#dfe3e8,#b9c0c8);box-shadow:0 18px 30px -18px rgba(13,27,42,.45)}
.dl .c-phone:where(:not(.v16-root *)){position:absolute;right:0;bottom:0;width:23%;margin:0}
/* the phone's screen is its frames' own shape (540 by 1243: the game's 390 by 844 with a phone's strips above and below), so
   its corners fall on the strips; the glass round it is the screen's corner plus the bezel */
.dl .c-glass:where(:not(.v16-root *)){display:block;padding:4.5%;border-radius:15.4% / 7.06%;background:#0f1a27;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 30px 50px -24px rgba(13,27,42,.65)}
.dl .c-scr:where(:not(.v16-root *)){position:relative;display:block;aspect-ratio:540/1243;overflow:hidden;border-radius:12% / 5.21%;background:#eef1f4}
.dl .c-scr:where(:not(.v16-root *))::before,.dl .c-scr:where(:not(.v16-root *))::after{content:"";position:absolute;z-index:1;left:50%;transform:translate(-50%,-50%);border-radius:999px}
.dl .c-scr:where(:not(.v16-root *))::before{top:2%;width:3.2%;aspect-ratio:1;background:#0f1a27}
.dl .c-scr:where(:not(.v16-root *))::after{top:99%;width:30%;aspect-ratio:30/1.1;background:rgba(13,27,42,.3)}
.dl .c-chips:where(:not(.v16-root *)){display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;padding:0;list-style:none}
/* a test is a chip that puts its game on the laptop; the one on screen is the ink chip, as a pressed tab is the white one */
.dl .c-chip:where(:not(.v16-root *)),.dl .c-chips li.none:where(:not(.v16-root *)){display:block;height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--card);
  box-shadow:0 0 0 1px var(--line) inset;font:inherit;font-size:var(--t-small);font-weight:var(--w-ui);line-height:44px;color:var(--fg);white-space:nowrap}
.dl .c-chip:where(:not(.v16-root *)){cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .16s var(--ease)}
.dl .c-chip[aria-pressed="true"]:where(:not(.v16-root *)){background:#0d1b2a;color:#fdf7ea;box-shadow:none}
.dl .c-chip:active:where(:not(.v16-root *)){transform:scale(.97)}
.dl .c-chip:focus-visible:where(:not(.v16-root *)){outline:2px solid #0d1b2a;outline-offset:2px}
.dl .c-chips li.none:where(:not(.v16-root *)){color:var(--fg2);font-weight:400;box-shadow:0 0 0 1px var(--line) inset;background:none}
@media (hover:hover) and (pointer:fine){.dl .c-chip[aria-pressed="false"]:hover:where(:not(.v16-root *)){background:#fff}}
@media (prefers-reduced-motion:reduce){.dl .c-lid-in img:where(:not(.v16-root *)),.dl .c-scr img:where(:not(.v16-root *)){transition:none}.dl .c-chip:active:where(:not(.v16-root *)){transform:none;opacity:.7}}
@media (max-width:699px){
  .dl .c-scene:where(:not(.v16-root *)){padding:0 10% 9% 0}
  .dl .c-phone:where(:not(.v16-root *)){width:27%}
  .dl .c-chip:where(:not(.v16-root *)),.dl .c-chips li.none:where(:not(.v16-root *)){padding:0 14px}
}
/* version 26 (founder, 13 Oct 2026, on the gap under the cadet section's button: "gap b/w them is too big"): the closing count
   sits one grid gap under the action and its note, not 56 px away */
.dl .cadet .cadet-end:where(:not(.v16-root *)){margin-top:var(--grid-gap)}


/* ---------- all you need to fly: the animations do the talking ---------- */
/* corners that nest: the stage's corner is the tile's less the tile's padding. A press shows under a hover too, and the hover's
   shadow fades in on its own layer instead of repainting the tile */
.dl .tile a:where(:not(.v16-root *)){border-radius:var(--r-card);padding:calc(var(--r-card) - var(--r-inner));background:var(--card);box-shadow:0 0 0 1px var(--line) inset;transition:transform .25s var(--ease)}
.dl .tile a:where(:not(.v16-root *))::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 30px 60px -36px rgba(13,27,42,.4);transition:opacity .25s var(--ease)}
.dl .tile a:active:where(:not(.v16-root *)){transform:scale(.98);transition-duration:.16s}
.dl .tile .stage:where(:not(.v16-root *)){border-radius:var(--r-inner);background:radial-gradient(120% 90% at 50% 0%,#f3efe4 0%,#ebe6d9 60%,#e5dfd0 100%)}
.dl .tile-txt:where(:not(.v16-root *)){padding:16px 64px 10px 14px}
.dl .tile-txt p:where(:not(.v16-root *)){display:none}
.dl .tile-go:where(:not(.v16-root *)){width:var(--ctl);height:var(--ctl);background:var(--panel-2);color:var(--fg);bottom:12px}
@media (min-width:940px){.dl .bento .tile .stage:where(:not(.v16-root *)){height:330px}}
@media (hover:hover) and (pointer:fine){.dl .tile a:hover:where(:not(.v16-root *)){transform:translateY(-4px)}.dl .tile a:hover:where(:not(.v16-root *))::after{opacity:1}.dl .tile a:hover:active:where(:not(.v16-root *)){transform:translateY(-4px) scale(.98)}.dl .tile a:hover .tile-go:where(:not(.v16-root *)){background:#0d1b2a;color:#fdf7ea}}

/* ---------- the airport: the same screen our other 3D plays in, nothing laid over the film ---------- */
.dl .air-card:where(:not(.v16-root *)){display:block;aspect-ratio:4/5;max-height:88svh;width:100%}
.dl .air-card picture:where(:not(.v16-root *)),.dl .air-card video:where(:not(.v16-root *)),.dl .air-card picture img:where(:not(.v16-root *)){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dl .air-card video:where(:not(.v16-root *)){opacity:0;transition:opacity .2s var(--ease)}
.dl .air-card video.is-playing:where(:not(.v16-root *)){opacity:1}
.dl .air-live:where(:not(.v16-root *)){display:inline-flex;align-items:center;gap:8px;font-size:var(--t-small);color:var(--fg2)}
/* the live dot pulses three times: a ring that grows and fades, not a repainted shadow */
.dl .air-live i:where(:not(.v16-root *)){position:relative;width:8px;height:8px;border-radius:50%;background:#00bc7d}
.dl .air-live i:where(:not(.v16-root *))::after{content:"";position:absolute;inset:0;border-radius:50%;background:#00bc7d;opacity:0}
.dl .air-live.rv-in i:where(:not(.v16-root *))::after{animation:live 2s var(--ease) 1.2s 3}
@keyframes live{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.5);opacity:0}}
.dl .air-foot:where(:not(.v16-root *)){display:grid;justify-items:center;text-align:center;gap:14px;margin-top:32px}
@media (min-width:900px){
  .dl .air-card:where(:not(.v16-root *)){aspect-ratio:16/8}
  .dl .air-foot:where(:not(.v16-root *)){grid-template-columns:auto 1fr auto;justify-items:start;align-items:center;text-align:left;gap:24px}
}

/* ---------- plans ---------- */
.dl .plans-sec:where(:not(.v16-root *)){text-align:center}
.dl .plans:where(:not(.v16-root *)){text-align:left}
.dl .plan:where(:not(.v16-root *)){border-radius:var(--r-card);background:var(--card);box-shadow:0 0 0 1px var(--line) inset}
.dl .plan .price b:where(:not(.v16-root *)){line-height:1}
.dl .plan .price:where(:not(.v16-root *)){padding-bottom:18px;border-bottom:1px solid var(--line)}
.dl .plan li .i:where(:not(.v16-root *)){box-sizing:content-box;width:12px;height:12px;padding:4px;margin-top:0;border-radius:50%;font-size:12px;stroke-width:2.6;color:var(--fg);background:rgba(13,27,42,.06)}
/* one paid plan since version 18 (founder, 13 Oct 2026): Pro carries the ring the 3-month plan had, and the two cards sit
   side by side at the width of two, not stretched across a row of three */
.dl .plan.pro:where(:not(.v16-root *)){box-shadow:0 0 0 1.5px var(--fg) inset,0 50px 90px -50px rgba(13,27,42,.45)}
@media (min-width:900px){.dl .plans:where(:not(.v16-root *)){grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}}

.dl .foot:where(:not(.v16-root *)){background:var(--ground)}
.dl .foot .logo:where(:not(.v16-root *)){color:var(--fg)}
/* ---------- probe C, paper only: no dark bands. Our 3D keeps its own dark inside its screen; the cards beside it are paper cards ---------- */
/* the call: a paper card, ink words, the readback in the app's working brown; amber only while Listen plays */
/* the explainer: its side view stays at dusk inside its screen; the question card, the label and the options are paper */




/* ---------- background A, a soft colour glow under what each section shows (the founder's pick of the gallery directions,
   12 Oct 2026). The page stays paper. Behind each section's picture a soft cloud of colour sits a little below it and spreads
   well past its edges, so the picture seems lit from underneath: the colour is strongest at the picture's sides and foot,
   where it shows, not at its middle, which the picture covers. It reaches a little way past the picture's foot and stops well
   short of the next section, whatever the picture's height. Each probe sets the colours (--glow). Nothing moves. ---------- */
.dl main:where(:not(.v16-root *)){overflow-x:clip}
.dl .bigwin:where(:not(.v16-root *)),.dl .rtr-grid:where(:not(.v16-root *)),.dl .cabin:where(:not(.v16-root *)),.dl .cadet-grid:where(:not(.v16-root *)),.dl .bento:where(:not(.v16-root *)),.dl .air-wrap:where(:not(.v16-root *)),.dl .plans:where(:not(.v16-root *)){position:relative;isolation:isolate}
.dl .bigwin:where(:not(.v16-root *))::before,.dl .rtr-grid:where(:not(.v16-root *))::before,.dl .cabin:where(:not(.v16-root *))::before,.dl .cadet-grid:where(:not(.v16-root *))::before,.dl .bento:where(:not(.v16-root *))::before,.dl .air-wrap:where(:not(.v16-root *))::before,.dl .plans:where(:not(.v16-root *))::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:var(--gi,8% -9% max(-16%,-88px) -9%);
  background:var(--glow);filter:blur(var(--gb,40px))}
.dl .bigwin:where(:not(.v16-root *)){--gi:14% max(calc(50% - 380px),-24px) -9%}
.dl .cabin:where(:not(.v16-root *)){--gi:30% 2% 2% 2%}
/* a glow is painted with its picture, in the page's positioned layer and after everything static; so what follows a picture
   (its action, its closing line, the row's buttons) joins that layer, later, and stays above the light instead of under it */
.dl .sec-head:where(:not(.v16-root *)),.dl .band-foot:where(:not(.v16-root *)),.dl .cabin-foot:where(:not(.v16-root *)),.dl .air-foot:where(:not(.v16-root *)),.dl .statement:where(:not(.v16-root *)){position:relative}
@media (max-width:899px){
  .dl .bigwin:where(:not(.v16-root *))::before,.dl .rtr-grid:where(:not(.v16-root *))::before,.dl .cabin:where(:not(.v16-root *))::before,.dl .cadet-grid:where(:not(.v16-root *))::before,.dl .bento:where(:not(.v16-root *))::before,.dl .air-wrap:where(:not(.v16-root *))::before,.dl .plans:where(:not(.v16-root *))::before{--gb:30px}
  .dl .rtr-grid:where(:not(.v16-root *)),.dl .cadet-grid:where(:not(.v16-root *)),.dl .bento:where(:not(.v16-root *)),.dl .air-wrap:where(:not(.v16-root *)),.dl .plans:where(:not(.v16-root *)){--gi:6% -7% max(-10%,-56px) -7%}
}

/* glow probe 3, a colour each: every section's picture gets its own pair of sun and sky colours, so the page changes light
   as it goes down. No purple anywhere (the brand kit: natural light, never a purple-to-blue wash). The glow is defined on
   each element so it reads that element's own pair. */
.dl .bigwin:where(:not(.v16-root *)),.dl .rtr-grid:where(:not(.v16-root *)),.dl .cabin:where(:not(.v16-root *)),.dl .cadet-grid:where(:not(.v16-root *)),.dl .bento:where(:not(.v16-root *)),.dl .air-wrap:where(:not(.v16-root *)),.dl .plans:where(:not(.v16-root *)){--glow:radial-gradient(34% 44% at 14% 60%,rgba(var(--g1),.74),rgba(var(--g1),0) 72%),
  radial-gradient(36% 46% at 86% 54%,rgba(var(--g2),.74),rgba(var(--g2),0) 72%),
  radial-gradient(58% 36% at 52% 90%,rgba(var(--g1),.48),rgba(var(--g1),0) 72%)}
.dl .hero .bigwin:where(:not(.v16-root *)){--g1:255,156,86;--g2:255,192,150}
.dl .rtr-grid:where(:not(.v16-root *)){--g1:112,170,240;--g2:110,208,188}
.dl .cabin:where(:not(.v16-root *)){--g1:255,172,112;--g2:248,204,110}
.dl .cadet-grid:where(:not(.v16-root *)){--g1:250,168,150;--g2:252,206,128}
.dl .bento:where(:not(.v16-root *)){--g1:110,204,182;--g2:132,184,245}
.dl .air-wrap:where(:not(.v16-root *)){--g1:112,164,235;--g2:255,184,132}
.dl .plans:where(:not(.v16-root *)){--g1:255,156,86;--g2:250,180,160}
.dl .close .bigwin:where(:not(.v16-root *)){--g1:250,170,150;--g2:255,192,132}

/* ---------- the type scale (founder, 12 Oct 2026: "the text on the website is too varied rn, the fonts and their sizes dont
   seem to make sense. som places the headings are smaller than the other text"). Eight sizes, each with one job, and three
   weights. Every rule that sets text on the page reads them here, so nothing sizes itself; a section's name is always its
   biggest text. A drawn app screen (.vg, the bento scenes) keeps the app's own sizes. ---------- */
/*   display  the hero line and the close            80 laptop, 44 phone
     title    a section's name                       40, 28 (the founder's pick, version 14's first probe)
     price    a plan's price; the three figures      32, 24 (version 21: "can we make this section smaller?")
     h3       a card's or a tile's title; a closing line under a section    21, 19
     lead     the line under a section's name; the hero's subtitle          19, 17
     body     list items, the RTR pills, the tests   17
     small    buttons, links, labels, captions       15
     meta     counts, fine print                     13
     weights: 600 for every heading and number, 500 for controls and labels, 400 for reading */
/* written in rem (1 rem is 16 px at the browser's default), so a visitor who sets a larger default text size gets larger text;
   at the default every size is the px value above. The display is semibold like every other heading: the founder picked
   version 16's probe A (12 Oct 2026) */
html:has(.dl){--t-display:clamp(2.75rem,5.6vw,5rem);--t-title:clamp(1.75rem,2.8vw,2.5rem);--t-price:clamp(1.5rem,2.25vw,2rem);--t-h3:clamp(1.1875rem,1.5vw,1.3125rem);
  --t-lead:clamp(1.0625rem,1.35vw,1.1875rem);--t-body:1.0625rem;--t-small:.9375rem;--t-meta:.8125rem;--w-display:600;--w-title:600;--w-strong:600;--w-ui:500}
body:has(.dl){font-size:var(--t-body)}
/* display */
.dl .display:where(:not(.v16-root *)){font-weight:var(--w-display);letter-spacing:-.035em}
/* price */
.dl .plan .price b:where(:not(.v16-root *)),.dl .stat b:where(:not(.v16-root *)){font-size:var(--t-price);font-weight:var(--w-strong);letter-spacing:-.03em}
/* h3 */
.dl .statement:where(:not(.v16-root *)){font-size:var(--t-h3);font-weight:var(--w-strong);letter-spacing:-.015em;line-height:1.3}
.dl .plan h3:where(:not(.v16-root *)),.dl .tile-txt h3:where(:not(.v16-root *)){font-size:var(--t-h3);font-weight:var(--w-strong);letter-spacing:-.015em;line-height:1.25}
/* lead */
.dl .hero-h1:where(:not(.v16-root *)){font-size:var(--t-lead)}
/* body */
.dl .rw-pills li:where(:not(.v16-root *)){font-size:var(--t-body);font-weight:var(--w-ui)}
/* small */
.dl .btn:where(:not(.v16-root *)),.dl .link:where(:not(.v16-root *)),.dl .nav-cta .btn:where(:not(.v16-root *)),.dl .nav-links:where(:not(.v16-root *)),.dl .nav .login:where(:not(.v16-root *)),.dl .a-tabs button:where(:not(.v16-root *)){font-size:var(--t-small);font-weight:var(--w-ui)}
.dl .cw b:where(:not(.v16-root *)){font-size:var(--t-small);font-weight:var(--w-ui)}
.dl .plan ul:where(:not(.v16-root *)),.dl .foot:where(:not(.v16-root *)),.dl .foot-cols h4:where(:not(.v16-root *)){font-size:var(--t-small)}
.dl .foot-cols h4:where(:not(.v16-root *)){font-weight:var(--w-strong)}
/* meta */
.dl .small:where(:not(.v16-root *)),.dl .cw span.num:where(:not(.v16-root *)),.dl .foot-base:where(:not(.v16-root *)){font-size:var(--t-meta)}


/* version 29 (founder, 13 Oct 2026: "can we make the windoe open aniomation a bit faster? like its open a bit later now"): a blind
   lifts in half a second, not 0.8 */
.dl .cw-pane .blind:where(:not(.v16-root *)){transition:transform .5s cubic-bezier(.32,.72,0,1)}
/* ---------- the RTR film's radio calls as a conversation, each with the mic badge (version 32; founder, 13 Oct 2026: "i like
   conversation one, but lets polish it and add a mic option to show that its actually spoken", then, of version 31's three ways,
   "mic badge"). Each call a bubble over the film, yours on the right in the paper's cream and the controller's on the left in the
   night glass, a call coming in at the foot and its reply pushing it up, as a chat reads. Each bubble narrows to a point on its
   speaker's side and rises from that corner, and an exchange leaves as one, lifting away whole. Before the speaker's name, the
   simulator's mic (yours) or the radio's speaker (the controller's); after it, a level meter that moves while the call is said
   (caps-v36.js says when, from the film's own clock). The speaker's colour is the simulator's own (sand for you, mint for the
   controller: components/rtr-v16/journey/journey.module.css), never the amber of an action.
   Version 33 (Emil Kowalski's skills, 13 Oct 2026), the same look with these faults fixed:
     - a reply takes its full row at once and the call above it is moved up by a transform (caps-v33.js), where the row grew by
       layout on every frame and its edge sliced the reply's words as it opened
     - an exchange leaves on the page's ease-out, not an ease-in that held it still for its first 100 ms; so does the end line
     - the bubbles fade, not their group, so the controller's glass keeps its frost as it goes (a fading group cut the blur off
       from the film from the first frame)
     - your cream is solid (at 96% the film moved behind your words)
     - the badge and the meter are drawn at the weight of the name, and sit on its first line when a long name wraps
     - for a visitor who asks for less transparency the glass is solid, and for more contrast it is darker
   Version 36 (founder, 13 Oct 2026, of version 35's two meters: "2 steady"): the meter's four bars bounce at a steady beat while the
   call is said, each bar on its own beat, drawn by the browser alone (no level is worked out on any frame), and they hold where
   they are while the film is held ---------- */
.dl .caps:where(:not(.v16-root *)){--cap-atc:#bddace;--cap-pilot-ink:#875519;--cap-glass:rgba(13,32,57,.78);--cap-cream:#fdf7ea;--cap-tail:6px;
  --cap-pop:.36s var(--ease);--cap-fade:.2s var(--ease);--cap-away:.3s var(--ease);
  position:absolute;inset:0;z-index:3;pointer-events:none;color:var(--cream)}
.dl .caps p:where(:not(.v16-root *)){margin:0}
.dl .cap-phase:where(:not(.v16-root *)){display:none}
/* the shade at the film's foot under the end line */
.dl .caps:where(:not(.v16-root *))::before{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(to top,rgba(6,14,26,.72),rgba(6,14,26,.36) 45%,rgba(6,14,26,0));
  opacity:0;transition:opacity .4s var(--ease)}
.dl .caps.ending:where(:not(.v16-root *))::before{opacity:1}
.dl .cap-end:where(:not(.v16-root *)){position:absolute;left:var(--grid-gap);right:var(--grid-gap);bottom:clamp(20px,7%,44px);text-align:center;font-size:var(--t-h3);
  font-weight:600;letter-spacing:-.015em;line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.5);opacity:0;transform:translateY(4px);
  transition:opacity .16s var(--ease),transform .16s var(--ease)}
.dl .cap-end.on:where(:not(.v16-root *)){opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}

/* the conversation at the film's foot; one exchange at a time, each in the same place. A leaving exchange lifts away while its
   bubbles fade; only then do its rows close, unseen */
.dl .cap-log:where(:not(.v16-root *)){position:absolute;left:var(--grid-gap);right:var(--grid-gap);bottom:var(--grid-gap)}
.dl .cap-ex:where(:not(.v16-root *)){position:absolute;left:0;right:0;bottom:0;display:grid;transform:translateY(-12px);transition:transform var(--cap-away)}
.dl .cap-ex.on:where(:not(.v16-root *)){transform:none;transition:none}
.dl .cap:where(:not(.v16-root *)){display:grid;grid-template-rows:0fr;max-width:min(82%,400px)}
.dl .cap.on:where(:not(.v16-root *)){grid-template-rows:1fr}
.dl .cap + .cap.on:where(:not(.v16-root *)){margin-top:8px}
.dl .cap-ex:not(.on) .cap:where(:not(.v16-root *)){transition:grid-template-rows 0s .3s,margin-top 0s .3s}
.dl .cap-in:where(:not(.v16-root *)){display:block;min-height:0;overflow:hidden;opacity:0;transform:translateY(10px) scale(.94);
  transition:opacity var(--cap-fade),transform var(--cap-pop)}
.dl .cap.on .cap-in:where(:not(.v16-root *)){opacity:1;transform:none}
/* a reply waits a beat (0.1 s), so the call above has moved out of its place before it shows */
.dl .cap + .cap.on .cap-in:where(:not(.v16-root *)){transition:opacity var(--cap-fade) .1s,transform var(--cap-pop) .06s}
.dl .cap-ex:not(.on) .cap-in:where(:not(.v16-root *)){transition:opacity var(--cap-away),transform 0s .3s}
.dl .cap-in > *:where(:not(.v16-root *)){padding-inline:14px}
.dl .cap-in > :first-child:where(:not(.v16-root *)){padding-top:10px}
.dl .cap-in > :last-child:where(:not(.v16-root *)){padding-bottom:12px}
.dl .cap-who:where(:not(.v16-root *)){display:flex;align-items:flex-start;gap:6px;font-size:var(--t-meta);font-weight:600;letter-spacing:.06em;line-height:1.5;text-transform:uppercase}
.dl .cap-say:where(:not(.v16-root *)){display:block;font-size:var(--t-lead);line-height:1.4}
/* yours on the right in cream, narrowing to its point at the foot on your side; the controller's on the left in the glass */
.dl .cap[data-who="pilot"]:where(:not(.v16-root *)){justify-self:end}
.dl .cap[data-who="pilot"] .cap-in:where(:not(.v16-root *)){transform-origin:100% 100%;background:var(--cap-cream);color:var(--fg);border-radius:var(--r-inner) var(--r-inner) var(--cap-tail) var(--r-inner);
  box-shadow:0 0 0 1px rgba(13,27,42,.06) inset,0 1px 2px rgba(2,8,16,.16),0 16px 32px -18px rgba(2,8,16,.62)}
.dl .cap[data-who="pilot"] .cap-who:where(:not(.v16-root *)){color:var(--cap-pilot-ink)}
.dl .cap[data-who="atc"]:where(:not(.v16-root *)){justify-self:start}
.dl .cap[data-who="atc"] .cap-in:where(:not(.v16-root *)){transform-origin:0 100%;background:var(--cap-glass);border-radius:var(--r-inner) var(--r-inner) var(--r-inner) var(--cap-tail);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 0 0 1px var(--night-line) inset,0 1px 0 rgba(253,247,234,.06) inset,0 16px 32px -18px rgba(2,8,16,.62)}
.dl .cap[data-who="atc"] .cap-who:where(:not(.v16-root *)){color:var(--cap-atc)}

/* the mic or speaker before the name, and the meter after it, which moves only while the call is said; both sit on the name's
   first line */
.dl .cap-tag:where(:not(.v16-root *)){display:inline-grid;place-items:center;height:1.5em}
.dl .cap-tag svg:where(:not(.v16-root *)){width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dl .cap-meter:where(:not(.v16-root *)){display:inline-flex;align-items:center;gap:2px;height:10px;margin:calc((1.5em - 10px) / 2) 0 0 2px;opacity:0;transition:opacity .2s var(--ease)}
.dl .cap.speaking .cap-meter:where(:not(.v16-root *)){opacity:1}
.dl .cap-meter i:where(:not(.v16-root *)){width:2px;height:100%;border-radius:999px;background:currentColor;transform:scaleY(.28)}
@keyframes cap-level{from{transform:scaleY(.28)}to{transform:scaleY(1)}}
.dl .cap.speaking .cap-meter i:where(:not(.v16-root *)){animation:cap-level .32s ease-in-out infinite alternate}
.dl .cap.speaking .cap-meter i:nth-child(2):where(:not(.v16-root *)){animation-duration:.27s;animation-delay:-.1s}
.dl .cap.speaking .cap-meter i:nth-child(3):where(:not(.v16-root *)){animation-duration:.36s;animation-delay:-.2s}
.dl .cap.speaking .cap-meter i:nth-child(4):where(:not(.v16-root *)){animation-duration:.3s;animation-delay:-.05s}
.dl .caps.held .cap.speaking .cap-meter i:where(:not(.v16-root *)){animation-play-state:paused}
@media (prefers-reduced-transparency:reduce){.dl .caps:where(:not(.v16-root *)){--cap-glass:rgb(13,32,57)}.dl .cap[data-who="atc"] .cap-in:where(:not(.v16-root *)){-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.dl .caps:where(:not(.v16-root *)){--cap-glass:rgba(13,32,57,.94)}}
@media (prefers-reduced-motion:reduce){.dl .caps:where(:not(.v16-root *)),.dl .caps *:where(:not(.v16-root *)),.dl .caps:where(:not(.v16-root *))::before{transition:none!important}.dl .caps .cap-meter i:where(:not(.v16-root *)){animation:none!important}}

/* ---------- the hero's runway (version 32; founder, 13 Oct 2026, of version 31's three drawings: "runway", and "can runway have
   some dim lights on its sides? like sort of how they go in waves of sorts?"). One drawing behind the hero's words, in the page's
   ink at a whisper: a runway seen from its threshold, the figures card sitting on its piano keys, its edges running toward the
   headline and fading before it. Its box runs from the top of the page to 60 px under the card's top edge, and the figures are
   lifted over it. It comes twice, in page pixels (make-hero-art.py): the phone's under 900 px, the laptop's from 900; a narrower
   screen sees the middle of it, and a wider one sees it carry on past its own box.
   Version 33 (Emil Kowalski's apple-design and break-ui skills, 13 Oct 2026): the drawing keeps clear of the hero's actions
   (hero-art-v33-runway.html), and its foot fades over its last 24 px, under the card, where it stopped on a straight edge beside
   the card on a wide screen ---------- */
.dl .hero:where(:not(.v16-root *)){position:relative;isolation:isolate}
.dl .figs:where(:not(.v16-root *)){position:relative}
.dl .hero-art:where(:not(.v16-root *)){position:absolute;left:0;right:0;top:0;bottom:calc(-1 * var(--strip) - 60px);z-index:-1;pointer-events:none;color:var(--fg);overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 24px,#000 26%,rgba(0,0,0,.45) 48%,transparent 74%);mask-image:linear-gradient(to top,transparent 0,#000 24px,#000 26%,rgba(0,0,0,.45) 48%,transparent 74%)}
.dl .hero-art svg:where(:not(.v16-root *)){position:absolute;left:50%;bottom:0;display:block;max-width:none;overflow:visible}
.dl .hero-art .wide:where(:not(.v16-root *)){margin-left:-720px}
.dl .hero-art .tall:where(:not(.v16-root *)){margin-left:-195px;display:none}
@media (max-width:899px){.dl .hero-art .wide:where(:not(.v16-root *)){display:none}.dl .hero-art .tall:where(:not(.v16-root *)){display:block}}
/* its edge lights are dim lamps, and a wave of light runs up both edges toward the headline, the lamps nearest first (each lamp's
   place along the runway, --k, sets when the wave reaches it). Version 34 (founder, 13 Oct 2026, asked whether the wave should
   rest after about four waves, as the reviews advised: "yes"): it runs four times as the page opens, about as long as the
   headline's pass, and the lamps then rest dimly lit. It holds while the hero is off screen (hero-art-v32.js marks it away) and
   does not run at all under reduced motion, where the lamps stay dimly lit */
.dl .hero-art .lamp:where(:not(.v16-root *)){opacity:.32;animation:rwy-wave 3.6s linear 4;animation-delay:calc(.6s + var(--k) * 60ms)}
.dl .hero-art.away .lamp:where(:not(.v16-root *)){animation-play-state:paused}
@keyframes rwy-wave{0%,100%{opacity:.32}5%{opacity:1}22%{opacity:.32}}
@media (prefers-reduced-motion:reduce){.dl .hero-art .lamp:where(:not(.v16-root *)){animation:none;opacity:.5}}

/* reduced motion: a press answers in opacity instead of scale, and nothing moves under the pointer either */
@media (prefers-reduced-motion:reduce){
  .dl .tile a:active:where(:not(.v16-root *)),.dl .btn:active:where(:not(.v16-root *)),.dl .cw:active .cw-bezel:where(:not(.v16-root *)),.dl .cabin-go:not(:disabled):active:where(:not(.v16-root *)),.dl .nav .menu:active:where(:not(.v16-root *)),.dl .a-tabs button:active:where(:not(.v16-root *)),.dl .nav-in:where(:not(.v16-root *))::before{transform:none}
  .dl .tile a:active:where(:not(.v16-root *)),.dl .btn:active:where(:not(.v16-root *)),.dl .cw:active .cw-bezel:where(:not(.v16-root *)),.dl .cabin-go:not(:disabled):active:where(:not(.v16-root *)),.dl .nav .menu:active:where(:not(.v16-root *)),.dl .a-tabs button:active:where(:not(.v16-root *)){opacity:.7}
}
@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){
  .dl .tile a:hover:where(:not(.v16-root *)),.dl .tile a:hover:active:where(:not(.v16-root *)),.dl .link:hover .i:where(:not(.v16-root *)){transform:none}
  .dl .cw:hover .cw-pane img:where(:not(.v16-root *)){transform:scale(1.04)}
}

/* ---------- version 33 (founder, 13 Oct 2026: "looks good, run the emil skills on it again and get feedback from fable 5.1 before
   we finalise this"). Version 32 checked against Emil Kowalski's skills (design engineering, the animation review, animation
   performance, mobile-native, break-ui, Apple design) and by Fable 5.1, and fixed where they found a fault. Nothing here changes
   how the page looks at the browser's default text size, apart from the faults themselves; each rule names what it fixes ---------- */

/* the hero's subject is readable within about 200 ms of each change: its sweep starts at the word's first letter, unblurred, and
   slows as it ends (it started from nothing and was blurred, so the line was empty for 0.4 s at every change), and the subject on
   the line leaves in a short fade rather than in one frame (engine-v33.js) */
@media (prefers-reduced-motion:no-preference){
  .dl .dia-word.enter:where(:not(.v16-root *)){--dia-sweep:0%;filter:none}
  .dl .dia-word.sweep:where(:not(.v16-root *)){transition:--dia-sweep 1.2s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),transform .5s var(--ease);filter:none}
  .dl .dia-word.sweep.leave:where(:not(.v16-root *)){opacity:0;transition:opacity .14s var(--ease)}
}
/* a visitor who sets a larger text size: the subject may take two lines at any width (it could under 360 px only), and the line
   is never set larger than 15% of the screen's width, so "Radio Telephony." stays on a phone at Chrome's Large and Very large.
   At the default size neither changes anything from 294 px up */
.dl .dia:where(:not(.v16-root *)){white-space:normal}
.dl .dia-word:where(:not(.v16-root *)){text-align:center}
html:has(.dl){--t-display:min(clamp(2.75rem,5.6vw,5rem),15vw)}

/* the nav with larger text: the breakpoints are written in em, so they move with the visitor's text size. " for free" goes when
   the bar is too narrow for it (under 300 px at the default), the smaller logo comes at 349 px at the default, the menu button never
   gives way, and the links take over from the menu only where they fit (980 px at the default) */
.dl .nav .menu:where(:not(.v16-root *)){flex-shrink:0}
@media (max-width:349px){.dl .nav .logo:where(:not(.v16-root *)){height:26px}.dl .nav-cta .btn:where(:not(.v16-root *)){padding:0 16px}}
@media (max-width:21.8125em){.dl .nav .logo:where(:not(.v16-root *)){height:22px}.dl .nav-cta .btn:where(:not(.v16-root *)){padding:0 10px}}
@media (max-width:299px){.dl .nav-more:where(:not(.v16-root *)){display:inline}}
@media (max-width:18.6875em){.dl .nav-more:where(:not(.v16-root *)){display:none}}
@media (min-width:980px) and (max-width:61.24em){.dl .nav-links:where(:not(.v16-root *)){display:none}.dl .nav .menu:where(:not(.v16-root *)){display:grid}.dl .nav .login:where(:not(.v16-root *)){display:none}}
/* a link or "Log in" never breaks onto two lines (980 to 1,019 px did), and the links sit closer under 1,100 px */
.dl .nav-links a:where(:not(.v16-root *)),.dl .nav .login:where(:not(.v16-root *)){white-space:nowrap}
@media (min-width:980px) and (max-width:1099px){.dl .nav-links:where(:not(.v16-root *)){gap:18px;margin-left:20px}}
/* the nav's links and "Log in" answer a press, as every other control does */
.dl .nav-links a:where(:not(.v16-root *)),.dl .nav .login:where(:not(.v16-root *)){transition:color .25s,opacity .1s var(--ease)}
.dl .nav-links a:active:where(:not(.v16-root *)),.dl .nav .login:active:where(:not(.v16-root *)){opacity:.6}

/* keyboard focus is an ink ring (amber on paper was 1.9 to 2.2:1, under the 3:1 a focus ring needs, and amber is the one action's
   colour); a subject window's ring follows its oval bezel; and a control reached with Shift+Tab is never parked under the bar */
.dl :focus-visible:where(:not(.v16-root *)){outline-color:var(--fg)}
.dl .cabin-go:focus-visible:where(:not(.v16-root *)){outline-color:var(--fg)}
.dl .cw:focus-visible:where(:not(.v16-root *)){outline:none}
.dl .cw:focus-visible .cw-bezel:where(:not(.v16-root *)){outline:2px solid var(--fg);outline-offset:3px}
html:has(.dl){scroll-padding-top:80px}

/* the figures with larger text: each number and its label are held to their own cell (they crossed the hairline and, at 320 px,
   ran into one another). At the default size the numbers stay 24 px from 360 px up */
.dl .stat:where(:not(.v16-root *)){container-type:inline-size}
.dl .stat b:where(:not(.v16-root *)){font-size:min(var(--t-price),28.5cqi)}
.dl .stat > span:where(:not(.v16-root *)){font-size:min(var(--t-meta),15.5cqi)}
@media (min-width:700px){.dl .stat > span:where(:not(.v16-root *)){font-size:min(var(--t-small),15.5cqi)}}

/* buttons that are links open no preview on a long press; the subject row keeps a sideways swipe to itself at its ends */
.dl .btn:where(:not(.v16-root *)){-webkit-touch-callout:none}
.dl .cabin-row:where(:not(.v16-root *)){overscroll-behavior-x:contain}

/* the RTR tiles: their tick waits for its moment without animating into the wait (the transitions ran backwards at load, before
   the section was reached), and the six names share their first line (a one-line name sat 13 px under its two-line neighbour's) */
@media (prefers-reduced-motion:no-preference){
  .dl .t-icon:where(:not(.v16-root *)),.dl .t-tick:where(:not(.v16-root *)),.dl .t-tick path:where(:not(.v16-root *)){transition:none}
  .dl .rw-six.ticked .t-icon:where(:not(.v16-root *)){transition:transform .5s var(--ease) calc(var(--i) * 90ms),opacity .4s var(--ease) calc(var(--i) * 90ms)}
  .dl .rw-six.ticked .t-tick:where(:not(.v16-root *)){transition:opacity .25s var(--ease) calc(.45s + var(--i) * 90ms),transform .35s var(--ease) calc(.45s + var(--i) * 90ms)}
  .dl .rw-six.ticked .t-tick path:where(:not(.v16-root *)){transition:stroke-dashoffset .35s var(--ease) calc(.57s + var(--i) * 90ms)}
}
.dl .t-name:where(:not(.v16-root *)){align-items:flex-start;min-height:calc(2.5em + 14px)}

/* airline cadet prep. A tapped test's game comes in over the one before, which stays whole under it (both faded at once, so the
   light screen behind flashed between two dark games); a switch of airline cross-fades the same way, as a test does, and its pill
   eases its colours. Under reduced motion both stay a cut */
@media (prefers-reduced-motion:no-preference){
  .dl .c-lid-in img:where(:not(.v16-root *)),.dl .c-scr img:where(:not(.v16-root *)){transition:opacity 0s .22s}
  .dl .c-lid-in img.on:where(:not(.v16-root *)),.dl .c-scr img.on:where(:not(.v16-root *)){z-index:1;transition:opacity .22s var(--ease)}
  .dl .c-dev:where(:not(.v16-root *)){transition:opacity .2s var(--ease)}
  .dl .c-dev:not(.off):where(:not(.v16-root *)){z-index:1}
  .dl .c-dev.off:where(:not(.v16-root *)){opacity:0;transition:opacity 0s .2s,visibility 0s .2s}
  .dl .c-dev.off .c-chips:where(:not(.v16-root *)){visibility:hidden}
  .dl .a-tabs button:where(:not(.v16-root *)){transition:transform .16s var(--ease),background-color .2s ease,color .2s ease,box-shadow .2s ease}
}
/* a test's name may take two lines when the text is large (the longest ran into the gutter); at the default every chip is one
   line, 44 px high, as before */
.dl .c-chip:where(:not(.v16-root *)),.dl .c-chips li.none:where(:not(.v16-root *)){height:auto;min-height:44px;max-width:100%;white-space:normal;line-height:1.3;padding-block:calc((44px - 1.3em) / 2);text-align:center}
/* a long press on a game's picture opens no image menu */
.dl .c-scene img:where(:not(.v16-root *)){pointer-events:none;-webkit-touch-callout:none}
/* a phone held sideways sees both devices whole after a tap, as it sees the whole film and the whole closing window */
@media (orientation:landscape) and (max-height:500px){.dl .c-scene:where(:not(.v16-root *)){width:min(100%,calc((100svh - 160px) * 1.49))}}
/* on a laptop the tests wrap evenly: IndiGo's seven as five and two, Air India's six as three and three (one was left alone) */
@media (min-width:900px){.dl .c-chips:where(:not(.v16-root *)){max-width:580px}}

/* practice and exams at 320 px: the exam card stays on its stage ("1:59:3", "mock pap") */
@container (max-width:330px){.dl .vg-clock:where(:not(.v16-root *)){left:calc(50% - 142px);transform:scale(.74)}.dl .vg-dark:where(:not(.v16-root *)){left:calc(50% - 46px);transform:scale(.74)}}

/* the footer. On a phone the copyright starts at the column; on a laptop the links sit on one line each (six wrapped at 1,440 px);
   and with larger text it keeps two columns until five fit (the words ran into each other at 900 px) */
@media (max-width:699px){.dl .foot-base span:last-child:where(:not(.v16-root *)){margin-left:0}}
@media (min-width:1200px){.dl .foot-top:where(:not(.v16-root *)){grid-template-columns:minmax(0,1fr) minmax(0,3fr)}.dl .foot-cols:where(:not(.v16-root *)){grid-template-columns:repeat(5,auto);justify-content:space-between}}
@media (min-width:900px) and (max-width:56.24em){.dl .foot-top:where(:not(.v16-root *)){grid-template-columns:none}.dl .foot-cols:where(:not(.v16-root *)){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* a picture that never arrives is hidden, so its frame's own fill shows instead of the browser's broken-picture mark */
.dl img.ra-failed:where(:not(.v16-root *)){visibility:hidden}

/* without scripts, the controls that need them do not show: the airline tabs and the subject row's arrows (IndiGo's view and a
   swipeable row remain) */
html:not(.js) .dl .a-tabs:where(:not(.v16-root *)),html:not(.js) .dl .cabin-foot:where(:not(.v16-root *)){visibility:hidden}

/* the paper's grain, drawn once from the SVG on the body (make-grain.py, the same pixels the page drew at load until version 32, to
   within one level) and shipped as files for each screen density, so nothing is drawn or encoded while the page loads */
body:has(.dl){background-image:url("/daylight/grain-2x.webp");
  background-image:-webkit-image-set(url("/daylight/grain-1x.webp") 1x,url("/daylight/grain-2x.webp") 2x,url("/daylight/grain-3x.webp") 3x);
  background-image:image-set(url("/daylight/grain-1x.webp") 1x,url("/daylight/grain-2x.webp") 2x,url("/daylight/grain-3x.webp") 3x);
  background-size:180px 180px}

/* the page pads its own bar and hero for a phone's notch, so the preview's page around it adds nothing (it padded the hero twice) */
html:has(.dl){padding-top:0;padding-bottom:0}

/* ---------- version 34 (founder, 13 Oct 2026, on version 33) ---------- */
/* "the phone screen border is missing on the part that overlaps the laptop screen": version 33 lifted the game coming in over the
   one before (z-index 1), and nothing held that lift inside its own screen, so the laptop's game also rose over the phone's glass
   where the phone stands in front of the laptop. Each screen now keeps its pictures' order to itself */
.dl .c-lid-in:where(:not(.v16-root *)),.dl .c-scr:where(:not(.v16-root *)){isolation:isolate}

.dl :where(h1,h2,h3,h4,h5,h6):where(:not(.v16-root *)){font-family:inherit}
.dl .dn-nav:where(:not(.v16-root *)){--dn-ease:cubic-bezier(.23,1,.32,1)}

/* the desktop row */
.dl .dn-row:where(:not(.v16-root *)){display:none;list-style:none;margin:0 0 0 auto;padding:0;gap:2px;align-items:center}
/* Signed in, "Open the app" stands alone where Log in stood (REA-48), not 4px
   from Pricing as the second of the pair would. Below 1200px the phone rule
   for .btn already places it. */
@media(min-width:1200px){.dl .dn-row:where(:not(.v16-root *)){display:flex}.dl .shell>nav.dn-nav>.login:where(:not(.v16-root *)),.dl .shell>nav.dn-nav>.open-app:where(:not(.v16-root *)){margin-left:18px}}
.dl .dn-item:where(:not(.v16-root *)){position:relative}
.dl .dn-trig:where(:not(.v16-root *)){appearance:none;border:0;background:transparent;font:inherit;font-size:14.5px;font-weight:400;
  color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;
  border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease,color .15s ease,transform .16s var(--dn-ease)}
@media (hover:hover) and (pointer:fine){.dl .dn-trig:hover:where(:not(.v16-root *)){color:var(--ink);background:rgba(13,27,42,.05)}}
.dl .dn-trig[aria-expanded="true"]:where(:not(.v16-root *)){color:var(--ink);background:rgba(13,27,42,.07)}
.dl .dn-trig:active:where(:not(.v16-root *)){transform:scale(.97)}
.dl .dn-chev:where(:not(.v16-root *)){width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round;opacity:.6;transition:transform .2s var(--dn-ease),opacity .15s ease}
.dl [aria-expanded="true"] > .dn-chev:where(:not(.v16-root *)){transform:rotate(180deg);opacity:.9}
/* NEW! above the trigger word, the live bar's placement, out of flow */
.dl .dn-lbl:where(:not(.v16-root *)){position:relative}
.dl .dn-trig.is-new .new-tag:where(:not(.v16-root *)){position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 3px);font-size:10px}

/* anchored cards */
.dl .dn-pop:where(:not(.v16-root *)){position:absolute;top:calc(100% + 18px);left:0;z-index:2;width:max-content;min-width:230px;
  background:var(--card);border-radius:20px;padding:8px;
  box-shadow:0 0 0 1px rgba(13,27,42,.06),0 2px 4px rgba(13,27,42,.05),0 22px 48px rgba(13,27,42,.16);
  transform-origin:var(--ox,50%) top;opacity:0;transform:translateY(-4px) scale(.97);visibility:hidden;
  transition:opacity .13s ease,transform .13s var(--dn-ease),visibility 0s linear .13s}
.dl .dn-pop[data-state="open"]:where(:not(.v16-root *)){opacity:1;transform:none;visibility:visible;
  transition:opacity .18s ease,transform .2s var(--dn-ease),visibility 0s}
/* the gap between the trigger and its card still counts as inside */
.dl .dn-pop:where(:not(.v16-root *))::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
/* one menu already open: the next opens at once, no delay and no replay */
.dl .dn-instant .dn-pop:where(:not(.v16-root *)){transition-duration:0s!important;transition-delay:0s!important}

/* one card family, plain links only. Room over decoration: generous
   padding, 44px single-line rows, a clear gutter between columns. */
.dl .dn-pop.c:where(:not(.v16-root *)){padding:24px;border-radius:22px;min-width:260px}
.dl .dn-pop.c.bank:where(:not(.v16-root *)){width:520px}
.dl .dn-pop.c.guides:where(:not(.v16-root *)){width:670px}
.dl .dn-pop.c.exams:where(:not(.v16-root *)),.dl .dn-pop.c.cadet:where(:not(.v16-root *)){width:420px}
.dl .dn-pop.c.tools:where(:not(.v16-root *)){width:310px}
.dl .dc-list:where(:not(.v16-root *)){list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.dl .dc-cols:where(:not(.v16-root *)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.dl .dc-a:where(:not(.v16-root *)){display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:44px;padding:0 14px;margin:0 -14px;border-radius:12px;
  text-decoration:none;color:var(--ink);transition:background-color .12s ease,transform .16s var(--dn-ease)}
.dl .dc-a.two:where(:not(.v16-root *)){padding:11px 14px;align-items:flex-start;gap:14px}
.dl .dn-pop.c.exams .dc-list:where(:not(.v16-root *)),.dl .dn-pop.c.cadet .dc-list:where(:not(.v16-root *)){gap:6px}
@media (hover:hover) and (pointer:fine){.dl .dc-a:hover:where(:not(.v16-root *)){background:var(--tint)}}
.dl .dc-a:active:where(:not(.v16-root *)){transform:scale(.98)}
.dl .dc-t:where(:not(.v16-root *)){display:flex;align-items:center;gap:8px;font-size:15px;font-weight:400;line-height:1.4;letter-spacing:-.005em;white-space:nowrap}
.dl .dc-t .new-tag:where(:not(.v16-root *)){font-size:11px}
.dl .dc-a small:where(:not(.v16-root *)){display:block;color:var(--ink-soft);font-size:13.5px;font-weight:300;line-height:1.45;white-space:nowrap}
.dl .dn-nav .dc-a:focus-visible:where(:not(.v16-root *)){outline:2px solid var(--glow);outline-offset:-2px}
/* the row's glyph (founder pick, 6 October 2026: icons probe C). A plain row
   carries it bare in the soft ink; a row with a line under it carries it in a
   40px tile. The house glyphs are bare svgs that take their line from the
   sheet, as the sidebar's do. */
.dl .dc-tx:where(:not(.v16-root *)){display:flex;flex-direction:column;min-width:0;gap:4px}
.dl .dc-g:where(:not(.v16-root *)){flex:none;display:grid;place-items:center;color:var(--ink-soft);opacity:.8;transition:color .12s ease,background-color .12s ease}
.dl .dc-g svg:where(:not(.v16-root *)),.dl .dnm .dnm-g svg:where(:not(.v16-root *)){width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.dl .dc-a:hover .dc-g:where(:not(.v16-root *)){color:var(--ink)}}
.dl .dc-a.two .dc-g:where(:not(.v16-root *)){opacity:1;width:40px;height:40px;border-radius:12px;background:rgba(13,27,42,.05);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.dl .dc-a.two:hover .dc-g:where(:not(.v16-root *)){background:var(--card)}}

/* phone: the live menu card, with the groups as accordion sections */
.dl .dnm .dnm-sec:where(:not(.v16-root *)){border-bottom:1px solid var(--line)}
.dl .dnm .dnm-head:where(:not(.v16-root *)){appearance:none;border:0;background:none;width:calc(100% + 20px);margin:0 -10px;display:flex;align-items:center;gap:10px;
  min-height:54px;padding:0 10px;border-radius:14px;transition:background-color .12s ease;font:inherit;font-size:17px;font-weight:400;letter-spacing:-.012em;color:var(--ink);
  cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.dl .dnm .dnm-head:active:where(:not(.v16-root *)){background:var(--tint)}
.dl .dnm .dnm-head .dn-chev:where(:not(.v16-root *)){margin-left:auto;width:14px;height:14px;opacity:.55}
.dl .dnm .dnm-head .new-tag:where(:not(.v16-root *)){font-size:12px}
/* the open section shows the tag on its own row; one tag at a time */
.dl .dnm .dnm-sec[data-open] .dnm-head .new-tag:where(:not(.v16-root *)){visibility:hidden}
.dl .dnm .dnm-body:where(:not(.v16-root *)){padding:0 0 12px;display:flex;flex-direction:column;
  opacity:1;transform:none;transition:opacity .2s ease,transform .22s var(--dn-ease)}
@starting-style{.dl .dnm .dnm-body:where(:not(.v16-root *)){opacity:0;transform:translateY(-6px)}}
.dl .dnm .dnm-body[hidden]:where(:not(.v16-root *)){display:none}
.dl .dnm .dnm-link:where(:not(.v16-root *)){display:flex;align-items:center;gap:12px;min-height:46px;padding:0 10px;margin:0 -10px;border-radius:12px;
  text-decoration:none;color:var(--ink-soft);font-size:15.5px;font-weight:400;-webkit-tap-highlight-color:transparent;
  transition:background-color .12s ease}
.dl .dnm .dnm-link:active:where(:not(.v16-root *)){background:var(--tint)}
.dl .dnm .dnm-link .new-tag:where(:not(.v16-root *)){font-size:11px}
.dl .dnm .dnm-g:where(:not(.v16-root *)){flex:none;display:grid;place-items:center;color:var(--ink-soft)}
.dl .dnm .dnm-link:has(small):where(:not(.v16-root *)){gap:14px}
.dl .dnm .dnm-link:has(small) .dnm-g:where(:not(.v16-root *)){width:40px;height:40px;border-radius:12px;background:rgba(13,27,42,.05);color:var(--ink)}
.dl .dnm .dnm-txt:where(:not(.v16-root *)){display:flex;flex-direction:column;min-width:0;padding:10px 0}
.dl .dnm .dnm-t:where(:not(.v16-root *)){display:flex;align-items:center;gap:8px;line-height:1.35}
.dl .dnm .dnm-txt small:where(:not(.v16-root *)){margin-top:3px;font-size:13.5px;font-weight:300;line-height:1.4;color:var(--ink-soft)}
/* the section's own page: the first row, in ink, with the menu's chevron */
.dl .dnm .dnm-link.page:where(:not(.v16-root *)){justify-content:space-between;color:var(--ink)}
.dl .dnm .dnm-link.page span:where(:not(.v16-root *)){color:var(--ink-faint)}

/* the phone card leaves faster than it arrives */
.dl .mm-panel.dnm:not(.in):where(:not(.v16-root *)){transition-duration:.14s,.16s}

@media (prefers-reduced-motion:reduce){
  .dl .dn-pop:where(:not(.v16-root *)),.dl .dn-pop[data-state="open"]:where(:not(.v16-root *)){transform:none!important}
  .dl .dn-chev:where(:not(.v16-root *)){transition:none}
  .dl .dnm .dnm-body:where(:not(.v16-root *)){transform:none}
}

/* the NEW! tag (founder-approved mockup, 21 September 2026) */
.dl .new-tag:where(:not(.v16-root *)){display:inline-flex;font-weight:650;letter-spacing:.01em;line-height:1}
.dl .new-tag > span:where(:not(.v16-root *)){display:inline-block;color:var(--rest);will-change:transform,color}
.dl .new-tag > span:nth-child(1):where(:not(.v16-root *)){--i:0;--rest:#ff8f1f}
.dl .new-tag > span:nth-child(2):where(:not(.v16-root *)){--i:1;--rest:#ff5e3a}
.dl .new-tag > span:nth-child(3):where(:not(.v16-root *)){--i:2;--rest:#e8336f}
.dl .new-tag > span:nth-child(4):where(:not(.v16-root *)){--i:3;--rest:#c2255c}
@keyframes new-tag-sunset{
  0%{color:var(--rest);transform:translateY(0)}
  14%{color:#ff5e3a;transform:translateY(-.24em)}
  28%{color:#e8336f;transform:translateY(0)}
  50%{color:#c2255c;transform:translateY(0)}
  72%{color:#ff8f1f;transform:translateY(0)}
  100%{color:var(--rest);transform:translateY(0)}
}
/* Same frames under a second name: switching names is what restarts the wave on hover. */
@keyframes new-tag-sunset-again{
  0%{color:var(--rest);transform:translateY(0)}
  14%{color:#ff5e3a;transform:translateY(-.24em)}
  28%{color:#e8336f;transform:translateY(0)}
  50%{color:#c2255c;transform:translateY(0)}
  72%{color:#ff8f1f;transform:translateY(0)}
  100%{color:var(--rest);transform:translateY(0)}
}
.dl .new-tag > span:where(:not(.v16-root *)){animation:new-tag-sunset 1.8s ease-in-out 2 both;animation-delay:calc(var(--i) * .2s)}
.dl .new-tag[data-wave="a"] > span:where(:not(.v16-root *)){animation-name:new-tag-sunset-again;animation-iteration-count:1}
.dl .new-tag[data-wave="b"] > span:where(:not(.v16-root *)){animation-name:new-tag-sunset;animation-iteration-count:1}
@media (prefers-reduced-motion: reduce){.dl .new-tag > span:where(:not(.v16-root *)){animation:none!important;transform:none!important}}
/* the ", new" a screen reader hears in place of the letters: hidden by this sheet itself, so it never
   leans on a utility class the page around the link may not load */
.dl .new-tag-sr:where(:not(.v16-root *)){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}

/* the public masthead places its own tags (above "Tools" in the desktop row, beside the
   heading and the row in the phone menu): components/landing/v16/masthead-styles.ts */
/* beside "Live airports" in the footer, in proportion with its 14.5px links */
.dl footer .new-tag:where(:not(.v16-root *)){font-size:11px;margin-left:12px}
/* the app sidebar: at the row's right edge, where a count sits, and folded away with it in the rail */
.dl .v16-root .sb .new-tag:where(:not(.v16-root *)){font-size:11px;margin-left:auto;transition:opacity .2s .12s}
.dl .v16-root .app.rail .sb .new-tag:where(:not(.v16-root *)){opacity:0;transition:opacity .15s}
/* the phone dock's More sheet, beside the label */
.dl .v16-root .pmore .pmore-row .new-tag:where(:not(.v16-root *)){font-size:12px}

.dl .nav:where(:not(.v16-root *)){--ink:var(--fg);--ink-soft:var(--fg2);--ink-faint:var(--fg3);--tint:var(--panel-2);--glow:var(--fg)}
.dl .nav-in>.dn-nav:where(:not(.v16-root *)){display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:100%}
.dl .dn-nav>.mark:where(:not(.v16-root *)){display:inline-flex;align-items:center;min-height:44px;flex:none;transition:opacity .1s var(--ease)}
.dl .dn-nav>.mark:active:where(:not(.v16-root *)){opacity:.6}
.dl .dn-nav>.mark img:where(:not(.v16-root *)){display:block;height:26px;width:auto}
.dl .nav .dn-row:where(:not(.v16-root *)){margin:0 0 0 40px;gap:28px}
.dl .nav .dn-trig:where(:not(.v16-root *)){height:44px;padding:0;border-radius:0;font-size:var(--t-small);font-weight:var(--w-ui);
  color:var(--nav-fg2,var(--fg2));transition:color .25s,opacity .1s var(--ease)}
.dl .nav .dn-trig[aria-expanded="true"]:where(:not(.v16-root *)){color:var(--nav-fg,var(--fg));background:none}
.dl .nav .dn-trig:active:where(:not(.v16-root *)){transform:none;opacity:.6}
@media (hover:hover) and (pointer:fine){.dl .nav .dn-trig:hover:where(:not(.v16-root *)){color:var(--nav-fg,var(--fg));background:none}}
.dl .dn-nav>.login:where(:not(.v16-root *)),.dl .dn-nav>.open-app:where(:not(.v16-root *)){margin-left:auto}
.dl .dn-nav>.btn:where(:not(.v16-root *)){position:relative;height:40px;padding:0 16px}
.dl .dn-nav>.btn:where(:not(.v16-root *))::after{content:"";position:absolute;inset:-2px}
.dl .nav .btn-ink:where(:not(.v16-root *)){background:#0d1b2a;color:#fdf7ea}
.dl .nav .mm-btn:where(:not(.v16-root *)),.dl .nav .mm-panel:where(:not(.v16-root *)){display:none}
@media (max-width:1199px){
  .dl .nav .dn-nav>.login:where(:not(.v16-root *)){display:none}
  .dl .dn-nav>.btn:where(:not(.v16-root *)){margin-left:auto}
  .dl .nav .mm-btn:where(:not(.v16-root *)){position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;
    box-shadow:0 0 0 1px var(--nav-line,var(--line)) inset;color:var(--nav-fg,var(--fg));transition:transform .16s var(--ease)}
  .dl .nav .mm-btn:where(:not(.v16-root *))::after{content:"";position:absolute;inset:-2px}
  .dl .nav .mm-btn:active:where(:not(.v16-root *)){transform:scale(.97)}
  .dl .nav .mm-btn svg:where(:not(.v16-root *)){width:18px;height:18px;overflow:visible}
  .dl .nav .mm-btn line:where(:not(.v16-root *)){stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transform-origin:10px 10px;transition:transform .22s ease}
  .dl .nav .mm-btn[aria-expanded="true"] .l1:where(:not(.v16-root *)){transform:translateY(3.5px) rotate(45deg)}
  .dl .nav .mm-btn[aria-expanded="true"] .l2:where(:not(.v16-root *)){transform:translateY(-3.5px) rotate(-45deg)}
  .dl .nav .mm-panel:where(:not(.v16-root *)){display:block;position:absolute;left:calc(var(--gl) - 14px);right:calc(var(--gr) - 14px);top:calc(100% + 2px);
    background:var(--card);border-radius:26px;padding:6px 18px 16px;box-shadow:0 2px 4px rgba(13,27,42,.12),0 24px 60px rgba(13,27,42,.28);
    opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top right;
    transition:opacity .2s ease,transform .24s cubic-bezier(.16,1,.3,1);
    max-height:calc(100dvh - 100% - 34px);overflow-y:auto;overscroll-behavior:contain}
  .dl .nav .mm-panel[hidden]:where(:not(.v16-root *)){display:none}
  .dl .nav .mm-panel.in:where(:not(.v16-root *)){opacity:1;transform:none}
  .dl .nav .mm-panel:focus:where(:not(.v16-root *)){outline:none}
  html.ra-menu-pointer .dl .nav .mm-btn:focus-visible:where(:not(.v16-root *)),html.ra-menu-pointer .dl .nav .mm-panel :focus-visible:where(:not(.v16-root *)){outline:none}
  .dl .nav .mm-panel .mm-row:where(:not(.v16-root *)){display:flex;align-items:center;justify-content:space-between;min-height:50px;font-size:17px;
    font-weight:400;letter-spacing:-.012em;color:var(--fg);border-bottom:1px solid var(--line)}
  .dl .nav .mm-panel .mm-row>span:last-child:where(:not(.v16-root *)){color:var(--fg3);font-size:18px}
  .dl .nav .mm-panel .mm-cta:where(:not(.v16-root *)){margin-top:16px;display:flex;flex-direction:column;gap:10px}
  .dl .nav .mm-cta .login:where(:not(.v16-root *)){display:flex;align-items:center;justify-content:center;min-height:50px}
  html.ra-menu-open:has(.dl){overflow:hidden}
  html.ra-menu-open .dl .nav-in:where(:not(.v16-root *))::before{opacity:1;transform:none}
  html.ra-menu-open .dl .dn-nav>.btn:where(:not(.v16-root *)){visibility:hidden}
}
@media (max-width:21.8125em){.dl .dn-nav>.mark img:where(:not(.v16-root *)){height:22px}.dl .dn-nav>.btn:where(:not(.v16-root *)){padding:0 10px}}
@media (prefers-reduced-motion:reduce){.dl .nav .mm-panel:where(:not(.v16-root *)){transform:none}.dl .nav .mm-btn line:where(:not(.v16-root *)){transition:none}}
.dl .foot a:where(:not(.v16-root *)){transition:color .25s,opacity .1s var(--ease)}
.dl .foot a:active:where(:not(.v16-root *)){opacity:.6}
@media (hover:hover) and (pointer:fine){.dl .foot a:hover:where(:not(.v16-root *)){color:var(--fg)}}
/* REA-115: the What's new line at the top of the hero, in the What's new page's own pill */
.dl .wn-strip:where(:not(.v16-root *)){display:flex;justify-content:center;margin:0 0 18px}
.dl .wn-strip a:where(:not(.v16-root *)){display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border-radius:999px;background:var(--card);
  box-shadow:0 0 0 1px var(--line) inset;font-size:var(--t-small);font-weight:var(--w-ui);color:var(--fg);transition:opacity .1s var(--ease)}
.dl .wn-strip a:active:where(:not(.v16-root *)){opacity:.6}
.dl .wn-strip i:where(:not(.v16-root *)){position:relative;width:9px;height:9px;border-radius:50%;background:#00bc7d}
.dl .wn-strip i:where(:not(.v16-root *))::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #00bc7d;opacity:0}
@media (prefers-reduced-motion:no-preference){.dl .wn-strip i:where(:not(.v16-root *))::after{animation:wn-ping 1.8s var(--ease) 3}}
@keyframes wn-ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.dl .wn-strip .i:where(:not(.v16-root *)){font-size:16px;color:var(--fg2)}

body:has(.dl)>.mm-scrim{display:none}
@media (max-width:1199px){
  body:has(.dl)>.mm-scrim{display:block;position:fixed;inset:0;z-index:45;background:rgba(7,24,45,.46);opacity:0;transition:opacity .22s ease}
  body:has(.dl)>.mm-scrim.in{opacity:1}
}