:root{
  --ground:#e4e0d4; --paper:#faf8f1; --card:#fffdf7; --tint:#f4f1e7;
  --ink:#0d1b2a; --ink-soft:#55606d; --ink-faint:#8d9099;
  --line:#e7e1d1; --night:#07182d; --night-2:#102b49; --cream:#fdf7ea;
  --glow:#ff8f1f; --glow-soft:#ffb763; --glow-wash:rgba(255,143,31,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.shell{max-width:1420px;margin:0 auto;padding:16px}
.sheet{background:var(--paper);border-radius:34px}
.wrap{max-width:1200px;margin:0 auto;padding:0 44px}
/* font-family is named here on purpose: app/globals.css paints h1-h6 in the
   interior face with an element rule, and an element rule beats what a heading
   would inherit from body. GATE: __tests__/v16-heading-font.test.ts */
h1,h2,h3{margin:0;font-family:"Inter",system-ui,sans-serif;font-weight:400;letter-spacing:-.036em;line-height:.96;text-wrap:balance}
h1{font-size:clamp(38px,5vw,66px);font-weight:390}
h2{font-size:clamp(34px,4.4vw,58px)}
h3{font-size:clamp(23px,2.6vw,34px);letter-spacing:-.03em}
p{margin:0}
a{color:inherit}
.kick{font-family:"Inter",sans-serif;font-weight:500;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--glow)}

/* buttons with real depth, like the template */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;
  border-radius:999px;border:1px solid transparent;background:var(--card);color:var(--ink);
  font-family:"Inter",sans-serif;font-weight:400;font-size:15.5px;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(13,27,42,.12),0 8px 20px rgba(13,27,42,.14);
  transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s ease,background .18s ease}
/* Hover belongs to a mouse: on a phone a tap would leave the lift stuck. A
   finger gets the press instead, on pointer-down (Emil audit 2026-09-27, P5;
   styleguide §3 "Press, hover, focus and touch"). */
@media (hover:hover) and (pointer:fine){
.btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(13,27,42,.12),0 14px 30px rgba(13,27,42,.18)}
}
.btn:active{transform:scale(.97);transition-duration:.12s;box-shadow:0 1px 2px rgba(13,27,42,.14),0 4px 10px rgba(13,27,42,.14)}
.btn-ink{background:var(--ink);color:var(--cream);
  box-shadow:0 2px 4px rgba(13,27,42,.28),0 12px 26px rgba(13,27,42,.26)}
@media (hover:hover) and (pointer:fine){.btn-ink:hover{background:#14293e;box-shadow:0 3px 6px rgba(13,27,42,.28),0 18px 36px rgba(13,27,42,.3)}}
.btn-glow{background:var(--glow);color:#26140a;
  box-shadow:0 2px 4px rgba(160,70,0,.3),0 12px 28px rgba(255,143,31,.42)}
@media (hover:hover) and (pointer:fine){.btn-glow:hover{background:#ffa03c;box-shadow:0 3px 6px rgba(160,70,0,.3),0 18px 38px rgba(255,143,31,.5)}}
.acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
.acts-note{margin:12px 0 0 4px;font-size:13.5px;color:var(--ink-soft)}

/* motion */
.rv{opacity:0;transform:translateY(48px) scale(.985);
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
.pl-glide{opacity:0;transform:translate(120px,48px) scale(1.03);
  transition:opacity 1.9s cubic-bezier(.16,1,.3,1),transform 1.9s cubic-bezier(.16,1,.3,1)}
.pl-glide.in{opacity:1;transform:translate(var(--dx,0px),var(--dy,0px))}
.pl-push{opacity:0;transform:scale(1.22) translateY(34px);
  transition:opacity 1.6s cubic-bezier(.16,1,.3,1),transform 2.1s cubic-bezier(.16,1,.3,1)}
.pl-push.in{opacity:1;transform:none}
.end .art.pl-tail{opacity:0;transform:translateX(80px) rotate(2.5deg);
  transition:opacity 1.8s ease,transform 2.2s cubic-bezier(.16,1,.3,1)}
.end .art.pl-tail.in{opacity:.16;transform:none}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -9px}}
.floaty.in{animation:floaty 7s ease-in-out 2.2s infinite}
.rv,.pl-glide,.pl-push,.pl-tail{will-change:transform,opacity}

nav{position:sticky;top:10px;z-index:80;display:flex;align-items:center;gap:20px;
  margin:0 0 14px;padding:10px 14px 10px 26px;background:rgba(255,253,247,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;
  box-shadow:0 1px 0 rgba(13,27,42,.06),0 12px 30px rgba(13,27,42,.09)}
nav .mark{display:flex;align-items:center}
/* Founder-picked wordmark size 2026-09-01: D (38px) on desktop, stepped to
   30px on phones so the pill bar keeps its proportions. */
nav .mark img{height:38px;width:auto;display:block;object-fit:contain;object-position:left center}
@media(max-width:640px){nav .mark img{height:30px}}
nav .login{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--night);text-decoration:none;white-space:nowrap;
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:999px;
  background:rgba(13,27,42,.11);border:1px solid rgba(13,27,42,.24);
  transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s ease}
@media (hover:hover) and (pointer:fine){nav .login:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(13,27,42,.12),0 10px 22px rgba(13,27,42,.14)}}
nav .login:active{transform:scale(.97);transition-duration:.12s}
/* nav's flex gap is 20px, so -16px lands the pair exactly 4px apart */
nav .btn{min-height:40px;padding:0 20px;font-size:14.5px;margin-left:-16px;white-space:nowrap;box-shadow:0 1px 2px rgba(13,27,42,.14),0 5px 12px rgba(13,27,42,.12)}
/* The six menu headings (6 Oct 2026) need about 1200px of bar, so below that
   the phone menu takes over (the five links before them needed about 1040px).
   The desktop row and its dropdowns are ./masthead-styles.ts. */

/* 1 hero */
.hero{position:relative;padding:44px 0 0;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero .art{position:absolute;right:2%;top:18%;width:48%;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 14%,#000 34%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 14%,#000 34%)}
.hero .art img{width:100%;height:auto;display:block}
/* The hero's two lines swapped tags so the page's H1 could carry its search
   phrase (lib/seo/page-registry.ts) without touching the founder-approved Dia
   headline. Neither line changed size, weight, colour, spacing or place: the
   headline restates here what it used to inherit from the h1 rule above, and
   the line under it restates what it used to get as a plain p. */
.hero .hero-line{margin:0;margin-top:20px;max-width:14ch;
  font-family:"Inter",system-ui,sans-serif;font-size:clamp(38px,5vw,66px);font-weight:390;
  letter-spacing:-.036em;line-height:.96;text-wrap:balance}
.hero .sub{margin-top:24px;font-size:19px;color:var(--ink-soft);max-width:31ch}
.hero h1.sub{font-family:"Inter",system-ui,sans-serif;font-weight:300;
  letter-spacing:normal;line-height:1.5;text-wrap:wrap}
/* Dia headline (beui chromatic-text-reveal, vanilla port; brand ambers) */
@property --dia-sweep{syntax:'<percentage>';inherits:false;initial-value:-14%}
.dia{position:relative;display:inline-grid;white-space:nowrap;font-weight:650;margin-top:.16em}
.dia-size{visibility:hidden;grid-area:1/1;padding-bottom:.14em}
.dia-word{grid-area:1/1;position:absolute;left:0;top:0;
  background-clip:text;-webkit-background-clip:text;color:transparent;
  background-size:100% 100%;background-repeat:no-repeat;padding-bottom:.14em;margin-bottom:-.14em;
  --dia-sweep:-14%;
  background-image:linear-gradient(90deg,
    var(--ink) 0%, var(--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%)}
.dia-word.sweep{transition:--dia-sweep 1.56s cubic-bezier(.45,0,.55,1),
  opacity .28s ease-out, filter .36s ease-out, transform .36s ease-out;
  --dia-sweep:114%;opacity:1;filter:blur(0);transform:translateY(0)}
.dia-word.enter{opacity:.56;filter:blur(6px);transform:translateY(5px)}
.sr-dia{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (prefers-reduced-motion: reduce){.dia-word{--dia-sweep:114%}.dia-word.sweep{transition:none}}
/* T2 trust ledge (founder pick 2026-09-02): hairline rule under the CTAs,
   numbers over plain-English labels, no instrument styling */
.figs{position:relative;display:flex;gap:44px;margin-top:26px;z-index:2;
  border-top:1px solid var(--line);padding:22px 0 70px;width:min(440px,100%)}
.figs div{display:flex;flex-direction:column;gap:4px}
.figs b{font-weight:450;font-size:30px;letter-spacing:-.03em;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.figs span{font-weight:300;font-size:15px;color:var(--ink-soft)}
.figs b span{font-family:inherit;font-weight:inherit;font-size:inherit;color:inherit}
/* slot-roll digit ticker (beui number-ticker, vanilla port; motion.js) */
.tick-d{display:inline-block;position:relative;overflow:hidden;height:1.1em;width:1ch;vertical-align:bottom}
.tick-col{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;
  transition:transform .95s cubic-bezier(.16,1,.3,1);will-change:transform}
.tick-col span{height:1.1em;display:flex;align-items:center;justify-content:center;line-height:1}
.live b span{font-family:inherit;font-size:inherit;letter-spacing:inherit;color:inherit;text-transform:none}
@media (prefers-reduced-motion: reduce){.tick-col{transition:none}}
@media(max-width:900px){.hero .art{position:relative;right:auto;top:auto;width:94%;margin:32px auto -12px}}

/* 2 navy band - full bleed inside the sheet, not a card */
.band{background:var(--night);color:var(--cream);padding:88px 0}
.band .grid{display:grid;gap:44px;align-items:center}
@media(min-width:960px){.band .grid{grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:64px}}
.band h2{color:var(--cream)}
.band .note{margin-top:18px;font-size:17px;color:#9db6cc;max-width:32ch}
.band svg{width:100%;height:auto;display:block}

/* draw-on */
.draw{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.in .draw{stroke-dashoffset:0}
.in .draw.dly{transition-delay:.55s}
.pop{opacity:0;transition:opacity .55s ease}
.in .pop{opacity:1}
.in .pop.q1{transition-delay:.45s}.in .pop.q2{transition-delay:.85s}
.in .pop.q3{transition-delay:1.25s}.in .pop.q4{transition-delay:1.6s}
.ring{stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset 1.4s ease .8s}
.in .ring{stroke-dashoffset:57}

/* 3 try one - one stacked card, question above, working below */
.trysec{padding:88px 0}
.tryhead{text-align:center;max-width:52ch;margin:0 auto}
.trycard{max-width:760px;margin:44px auto 0;background:var(--card);border-radius:26px;overflow:hidden;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 28px 70px rgba(13,27,42,.1)}
.q-top{padding:38px 40px}
/* subject chip + topic, the dashboard hero's k2 pattern on a light card
   (founder, 2026-09-02: no more mono-caps "text · text" labels) */
.qmeta{display:flex;align-items:center;gap:10px;margin:0}
.qmeta .chip{font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 11px;border-radius:999px;
  background:rgba(255,143,31,.16);color:#8f4a00}
.qmeta span:last-child{font-size:13px;font-weight:500;color:var(--ink-soft)}
.qtext{margin-top:14px;font-size:clamp(19px,2vw,23px);font-weight:300;letter-spacing:-.018em;line-height:1.3}
.tabs{display:flex;gap:8px;margin-top:18px}
.tab{font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink-faint)}
.tab.on{background:var(--glow);color:#26140a;border-color:var(--glow)}
.opts{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.opt{display:flex;align-items:center;gap:13px;padding:14px 17px;border-radius:12px;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;text-align:left;
  font-family:inherit;font-weight:300;font-size:16.5px;color:var(--ink);
  transition:border-color .18s ease,background .18s ease}
@media (hover:hover) and (pointer:fine){.opt:hover{border-color:var(--glow-soft)}}
.opt .k{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:11.5px;width:24px;height:24px;flex:none;
  display:grid;place-items:center;border-radius:7px;background:var(--tint);color:var(--ink-soft)}
.opt.correct{border-color:var(--glow);background:var(--glow-wash)}
.opt.correct .k{background:var(--glow);color:#26140a}
.opt.wrong{opacity:.42}
.q-bottom{background:var(--night);padding:26px 40px 30px;color:var(--cream)}
.q-bottom .lbl{font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--glow)}
.work{margin-top:10px;min-height:96px;font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:15px;color:#9db6cc}
.work .l{opacity:0;transition:opacity .45s ease;padding:5px 0}
.work .l.on{opacity:1}
.work .l em{font-style:normal;color:var(--glow)}

/* 4 prepare switcher */
.prep{padding:0 0 88px}
.prephead{margin-bottom:30px}
.bento{display:grid;gap:16px}
@media(min-width:940px){.bento{grid-template-columns:6fr 5fr}}
.switch{position:relative;min-height:430px;background:var(--night);border-radius:26px;overflow:hidden;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.switch .pane{position:absolute;inset:0;opacity:0;transform:scale(.985);
  transition:opacity .45s ease,transform .55s ease;display:flex;flex-direction:column;
  justify-content:center;padding:34px;pointer-events:none}
.switch .pane.on{opacity:1;transform:none}
.switch .lbl{font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--glow);margin-bottom:18px}
.switch svg{width:100%;height:auto;display:block}
.picker{background:var(--card);border-radius:26px;padding:34px 30px;display:flex;flex-direction:column;
  justify-content:center;box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.picker .row{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;
  padding:14px 12px;border-radius:14px;border:1px solid transparent;cursor:pointer;
  text-align:left;font-family:inherit;background:none;color:var(--ink);width:100%;
  transition:background .2s ease,border-color .2s ease,padding-left .2s ease}
@media (hover:hover) and (pointer:fine){.picker .row:hover{background:var(--tint)}}
.picker .row.on{background:var(--glow-wash);border-color:rgba(255,143,31,.42);padding-left:18px}
.picker .n{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint)}
.picker .row.on .n{color:var(--glow)}
.picker b{font-weight:300;font-size:clamp(19px,2vw,25px);letter-spacing:-.028em}
.picker .free{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink-faint);margin-top:16px;padding-left:12px}
.picker .free em{font-style:normal;color:var(--glow)}

/* start group: big card + two below, like the template's apply-in-minutes */
.startsec{padding:0 0 88px}
.bigcard{position:relative;overflow:hidden;background:var(--night);color:var(--cream);border-radius:26px;
  padding:46px;min-height:410px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.bigcard h2{color:var(--cream)}
.bigcard .cnt{color:#9db6cc}
.bigcard .art{position:absolute;inset:0;z-index:0;pointer-events:none}
.bigcard .art img{width:100%;height:100%;object-fit:cover;object-position:70% 42%;display:block}
.bigcard .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(7,24,45,.92) 26%,rgba(7,24,45,.4) 56%,rgba(7,24,45,0) 76%)}
.bigcard .top,.bigcard .btm{position:relative;z-index:2}
.bigcard .note{margin-top:16px;font-size:16.5px;color:var(--ink-soft);max-width:28ch}
/* the 3D airport card: a start-group bigcard whose picture is video, kept in colour */
.airsec{padding:136px 0 96px;border-top:1px solid var(--line);margin-top:40px}
.airhead{margin-bottom:32px}
/* the card title is a sub-heading of the section, drawn at the h2 size it had */
.aircard .airtitle{font-size:clamp(34px,4.4vw,58px);letter-spacing:-.036em;color:var(--cream)}
.airhead .subjkick{color:#c85e00}
.aircard{min-height:520px}
.aircard .art video{width:100%;height:100%;object-fit:cover;display:block}
/* the recording is the point, so the shade stays behind the words only: a
   short fade from the left edge, clear from 40% across */
.aircard .scrim{background:linear-gradient(100deg,rgba(7,24,45,.72) 0%,rgba(7,24,45,.38) 24%,rgba(7,24,45,0) 40%)}
.aircard .top{text-shadow:0 1px 14px rgba(7,24,45,.6)}
.aircard .cnt{color:#e3ebf3}
.duo{display:grid;gap:16px;margin-top:16px}
@media(min-width:880px){.duo{grid-template-columns:1fr 1fr}}
.duo .cardl{background:var(--night);color:var(--cream);border-radius:26px;padding:46px;
  display:flex;flex-direction:column;gap:18px;justify-content:flex-start;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.duo .cardl h3{color:var(--cream)}
.duo .cardr{background:var(--card);border-radius:26px;padding:46px;
  display:flex;flex-direction:column;gap:14px;justify-content:flex-start;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.bub{max-width:82%;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.4}
.bub.me{align-self:flex-end;background:var(--glow);color:#26140a;border-bottom-right-radius:5px}
.bub.them{align-self:flex-start;background:var(--tint);color:var(--ink);border-bottom-left-radius:5px}
.duo .cardr h3{margin-top:0}
.alsoin{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.04em;color:var(--ink-faint);line-height:1.7;margin-top:6px}

/* subject-card furniture */
/* subject counts as the trust-ledge micro pattern: weighted number, plain
   label, amber point between the two facts (no mono-caps "text · text") */
.cnt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:300;color:var(--ink-soft);margin-top:14px;white-space:nowrap;max-width:none}
.cnt b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.cnt i{width:5px;height:5px;border-radius:50%;background:var(--glow);flex:none}
.bigcard .cnt b,.cardl .cnt b{color:var(--cream)}
.duo .cardl .acts2,.duo .cardr .acts2{margin-top:auto;padding-top:18px}
.acts2{display:flex;flex-wrap:wrap;gap:10px}
.btn.sm{min-height:40px;padding:0 20px;font-size:14.5px}
.btn.ghostd{background:transparent;border:1px solid rgba(253,247,234,.3);color:var(--cream);box-shadow:none}
@media (hover:hover) and (pointer:fine){.btn.ghostd:hover{background:rgba(253,247,234,.08)}}
.duo .cardl,.duo .cardr{gap:12px}
.subchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.schip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;
  color:var(--ink-soft);background:var(--card)}

/* question tabs */
.tab{background:transparent;cursor:pointer}
.qpane{display:none}
.qpane.on{display:block}
.qhandg{transform-origin:140px 98px;transform:rotate(15deg);
  transition:transform 1.9s cubic-bezier(.4,0,.2,1) .3s}
.qpane.go .qhandg{transform:rotate(-90deg)}
.pd{opacity:0;transition:opacity .5s ease 2s}
.qpane.go .pd{opacity:1}
.plan{position:relative}
.badge{position:absolute;top:-12px;left:28px;background:var(--glow);color:#26140a;
  font-family:"Inter",sans-serif;font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(255,143,31,.4)}

/* greyscale subject imagery, colour on hover */
.bigcard .art img{filter:grayscale(1);opacity:.8;transition:filter .55s ease,opacity .55s ease}
@media (hover:hover) and (pointer:fine){.bigcard:hover .art img{filter:grayscale(0);opacity:1}}
.duo .cardl,.duo .cardr{position:relative;overflow:hidden}
.duo .cardl > *:not(.subimg):not(.cardscrim),.duo .cardr > *:not(.subimg){position:relative;z-index:2}
.subimg{position:absolute;z-index:1;pointer-events:none}
.subimg img{width:100%;height:auto;display:block;filter:grayscale(1);opacity:.3;
  transition:filter .55s ease,opacity .55s ease,transform .7s ease}
.si-l{inset:0;width:auto}
.si-l img{width:100%;height:100%;object-fit:cover;object-position:62% 32%}
.cardscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(112deg,rgba(7,24,45,.92) 30%,rgba(7,24,45,.35) 62%,rgba(7,24,45,.05) 82%)}
.si-r{right:-2%;bottom:-8%;width:38%}
.si-r img{opacity:.38}
@media (hover:hover) and (pointer:fine){.duo .cardl:hover .subimg img,.duo .cardr:hover .subimg img{filter:grayscale(0);opacity:1;transform:scale(1.03)}}
.si-l img{opacity:.78}
@media (hover:none){
  .bigcard .art img{filter:none;opacity:.8}
  .subimg img{filter:none;opacity:.55}}

/* translucent set dressing */
.trysec{position:relative;overflow:hidden}
.trysec .wrap{position:relative;z-index:2}
.tryart{position:absolute;left:-10%;top:52%;transform:translateY(-40%);width:44%;
  opacity:.13;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 96%);
  mask-image:linear-gradient(to right,#000 62%,transparent 96%)}
.tryart img{width:100%;height:auto;display:block}
.pricewrap{position:relative;overflow:hidden}
.priceart{position:absolute;right:-4%;top:-2%;width:64%;opacity:.12;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%)}
.priceart img{width:100%;height:auto;display:block}
.pricing{position:relative;z-index:1}

/* live stats strip */
.livestrip{padding:64px 28px 0;max-width:1200px;margin:0 auto}
.livestrip .wrap{padding:0}
.live{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border-radius:26px;
  box-shadow:0 2px 4px rgba(13,27,42,.05),0 24px 60px rgba(13,27,42,.07);overflow:hidden}
.live > div{padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.live > div + div{border-left:1px solid var(--line)}
/* live counters in the trust-ledge register: weighted Inter number, plain
   lowercase label, the live dot in the brand green (no mono caps) */
.live b{font-family:"Inter",sans-serif;font-weight:450;font-size:clamp(30px,3vw,40px);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.live .lab{display:flex;align-items:center;gap:8px;font-family:"Inter",sans-serif;
  font-size:15px;font-weight:300;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.live i{width:7px;height:7px;border-radius:50%;background:#2f7d51;flex:none;
  animation:lpulse 2.4s infinite}
@keyframes lpulse{0%{box-shadow:0 0 0 0 rgba(47,125,81,.4)}70%{box-shadow:0 0 0 8px rgba(47,125,81,0)}100%{box-shadow:0 0 0 0 rgba(47,125,81,0)}}
@media(max-width:760px){.live{grid-template-columns:1fr}
  .live > div{padding:20px 24px}
  .live > div + div{border-left:0;border-top:1px solid var(--line)}}

/* band lesson */
.lesson{border-radius:18px;overflow:hidden;background:#07182d;box-shadow:0 24px 60px rgba(4,12,24,.5)}
.lesson canvas{width:100%;height:auto;display:block}

/* worked-solution player */
.ws-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ws-stage svg{width:100%;height:auto;display:block}
.ws-narr{margin:10px 2px 0;min-height:44px;font-size:14.5px;line-height:1.45;color:#c4d5e4;
  transition:opacity .15s ease}
.ws-ctl{display:flex;align-items:center;gap:12px;margin-top:10px}
.ws-ctl button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(253,247,234,.3);
  background:transparent;color:var(--cream);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:border-color .18s ease,background .18s ease}
@media (hover:hover) and (pointer:fine){.ws-ctl button:hover{border-color:var(--glow);background:rgba(255,143,31,.1)}}
.ws-ctl input[type="range"]{flex:1;accent-color:var(--glow);height:22px;cursor:pointer}
.ws-ctl #wsTime{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:11.5px;color:#9db6cc;min-width:44px;text-align:right}
@media(max-width:560px){.ws-stage{grid-template-columns:1fr}}

/* phone pass */
@media(max-width:760px){
  .wrap{padding:0 22px}
  nav{margin:0 0 12px;padding:8px 10px 8px 18px;gap:8px}
  nav .btn{margin-left:-4px}
  /* Two pills beside a 30px wordmark on a 390px phone: keep each on one line. */
  nav .login,nav .btn{white-space:nowrap;padding:0 10px;font-size:13.5px}
  .hero{padding:42px 0 0}
  .figs{gap:32px;margin-top:22px;padding:18px 0 44px}
  .figs b{font-size:26px}
  .band{padding:60px 0}
  .trysec{padding:60px 0}
  .q-top{padding:26px 22px}
  .q-bottom{padding:20px 22px 24px}
  .prep{padding:0 0 60px}
  .switch{min-height:330px}
  .switch .pane{padding:20px}
  .picker{padding:24px 20px}
  .startsec{padding:0 0 60px}
  .bigcard{padding:28px 24px;min-height:360px}
  .bigcard .scrim{background:linear-gradient(to top,rgba(7,24,45,.94) 34%,rgba(7,24,45,.3) 70%,rgba(7,24,45,.1))}
  .airsec{padding:88px 0 64px;margin-top:24px}
  .aircard{min-height:440px}
  .aircard .scrim{background:linear-gradient(to bottom,rgba(7,24,45,.7) 0%,rgba(7,24,45,0) 34%,rgba(7,24,45,0) 74%,rgba(7,24,45,.55) 100%)}
  .duo .cardl,.duo .cardr{padding:28px 24px}
  .duo .cardl{min-height:300px}
  .pricing{padding:52px 18px 8px}
  .end{min-height:280px}
}

/* 5 pricing - detached, on the ground outside the sheet */
.pricing{padding:40px 28px 8px;max-width:1200px;margin:0 auto}
.pricehead{text-align:center;max-width:44ch;margin:0 auto 40px}
/* /plans writes this heading as the document's H1 (it IS the page a visitor
   landed on); the landing's own pricing section keeps its h2. Both draw at the
   size and weight the h2 always had. */
.pricehead h1{font-size:clamp(34px,4.4vw,58px);font-weight:400}
.pricehead .note{margin-top:14px;color:var(--ink-soft);font-size:16.5px}
.plans{display:grid;gap:16px}
@media(min-width:880px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{padding:38px 32px;display:flex;flex-direction:column;background:var(--card);border-radius:26px;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.1)}
.plan .t{font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.plan .a{font-weight:400;font-size:50px;letter-spacing:-.034em;margin:18px 0 2px;
  font-variant-numeric:tabular-nums;line-height:1}
.plan .w{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-faint);text-decoration:line-through}
.plan ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px;flex:1}
.plan li{font-size:15.5px;color:var(--ink-soft);padding-left:18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:2px;background:var(--glow)}
.plan .btn{margin-top:28px}
.plan .note{margin-top:12px;font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-faint)}
.plan.hi{background:var(--night);color:var(--cream)}
.plan.hi .t,.plan.hi .w,.plan.hi .note{color:#6f8ba5}
.plan.hi li{color:#c4d5e4}

/* 6 closing card back on the ground */
.endshell{max-width:1420px;margin:16px auto 0;padding:0 16px}
.end{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;background:var(--paper);border-radius:34px}
.end .art{position:absolute;right:-10%;bottom:-30%;width:56%;z-index:1;opacity:.16;pointer-events:none}
.end .art img{width:100%;height:auto;display:block}
.end .inner{position:relative;z-index:2;padding:56px 24px}
footer{max-width:1420px;margin:0 auto;padding:26px 44px 34px;font-size:14.5px;color:var(--ink-faint);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
footer a{text-decoration:none}
/* A footer link is one line of 14.5px text, 17-21px tall. On a touch screen an
   invisible layer grows each one into the row and column gaps (7px and 14px
   each side, so neighbours never overlap); the drawn footer does not move. */
@media (pointer:coarse){footer a{position:relative}footer a::after{content:"";position:absolute;inset:-7px -14px}}
footer .sp{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  /* Fewer and gentler, not zero (Emil audit 2026-09-27, P8): colour and
     opacity still ease, which helps a reader follow a change; anything that
     moves stops moving. */
  html{scroll-behavior:auto}
  *{transition-property:opacity,color,background-color,border-color,box-shadow,filter!important}
  .btn:active,nav .login:active{transform:none}
  @media (hover:hover) and (pointer:fine){.btn:hover,nav .login:hover{transform:none}}
  .rv,.pl-glide,.pl-push{opacity:1!important;transform:none!important}
  .end .art.pl-tail{opacity:.16!important;transform:none!important}
  .floaty.in{animation:none!important}
  .live i{animation:none!important}
  .draw{stroke-dashoffset:0!important}.pop{opacity:1!important}
  .ring{stroke-dashoffset:57!important}.work .l{opacity:1}}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

/* addendum: the phone menu (founder pick 2026-09-20, probe B2: probe A's
   buttons with probe B's dropdown card). Below 1200px (1040px until the six-heading menu of 6 Oct 2026, 900px until the Emil
   audit's P4, where the five links wrapped) Log in leaves the bar and a 44px
   button opens a card anchored under it. Values are the probe's. At 1200px and
   wider none of this draws. */
.mm-btn,.mm-panel,.mm-scrim{display:none}
@media(max-width:1199px){
  .shell>nav{gap:8px}
  .shell>nav .mark{min-height:44px;flex:none}
  .shell>nav>.login{display:none}
  .shell>nav>.btn{min-height:44px;padding:0 14px;font-size:13.5px;margin-left:auto}
  /* the menu button borrows the Log in pill's surface so it reads as the same family */
  .mm-btn{flex:none;width:44px;height:44px;border-radius:999px;padding:0;cursor:pointer;
    display:grid;place-items:center;color:var(--night);
    background:rgba(13,27,42,.11);border:1px solid rgba(13,27,42,.24);-webkit-tap-highlight-color:transparent}
  .mm-btn svg{width:20px;height:20px;overflow:visible}
  .mm-btn line{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transform-origin:10px 10px;
    transition:transform .22s ease}
  .mm-btn[aria-expanded="true"] .l1{transform:translateY(3.5px) rotate(45deg)}
  .mm-btn[aria-expanded="true"] .l2{transform:translateY(-3.5px) rotate(-45deg)}
  .mm-scrim{display:block;position:fixed;inset:0;z-index:70;background:rgba(7,24,45,.46);opacity:0;
    transition:opacity .22s ease}
  .mm-scrim.in{opacity:1}
  /* anchored to the bar: absolute inside the sticky nav, so it follows it */
  .mm-panel{display:block;position:absolute;left:0;right:0;top:calc(100% + 8px);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}
  .mm-panel[hidden]{display:none}
  .mm-panel.in{opacity:1;transform:none}
  /* The card takes focus after a tap and never draws a ring of its own. After a touch or a click nothing in the menu draws one
     either: iOS Safari rings whatever a script focuses, so the component marks the page while the last input was a pointer. */
  .mm-panel:focus{outline:none}
  html.ra-menu-pointer .mm-btn:focus-visible,html.ra-menu-pointer .mm-panel :focus-visible{outline:none}
  .mm-panel .mm-row{display:flex;align-items:center;justify-content:space-between;min-height:50px;
    font-size:17px;font-weight:400;letter-spacing:-.012em;text-decoration:none;color:var(--ink);
    border-bottom:1px solid var(--line)}
  /* the row's chevron, which is always its last child: a row may also hold the
     NEW! tag, whose letters are spans this rule must not reach */
  .mm-panel .mm-row > span:last-child{color:var(--ink-faint);font-size:18px}
  /* html only: hiding the body's overflow as well makes the body the bar's
     scroll container, and the sticky bar then drops back to the top of the
     document the moment the menu opens on a scrolled page. */
  html.ra-menu-open{overflow:hidden}
  html.ra-menu-open .shell>nav{background:var(--card)}
  html.ra-menu-open .shell>nav>.btn{visibility:hidden}
  .mm-panel .mm-cta{margin-top:16px;display:flex;flex-direction:column;gap:10px}
  nav .mm-cta .btn{margin-left:0;min-height:52px;padding:0 28px;font-size:16px;justify-content:center;white-space:nowrap}
  nav .mm-cta .login{margin-left:0;min-height:52px;padding:0 20px;font-size:16px;justify-content:center}
}
@media(max-width:760px){.shell>nav{padding:6px 6px 6px 18px}}
@media(max-width:379px){.shell>nav .mark img{height:26px}.shell>nav{padding-left:14px}}

/* addendum: the small subject chips became real links to /subjects/<slug>, so they
   need the anchor reset the mockup's inert spans never required. The resting
   look is unchanged. */
a.schip{text-decoration:none;display:inline-block;
  transition:border-color .18s ease,color .18s ease}
@media (hover:hover) and (pointer:fine){a.schip:hover{border-color:var(--glow-soft);color:var(--ink)}}



/* ─── 2026-10-06: section 2, the subjects in one row (simple, polished, nothing hidden) ─── */
.subjsec{padding:104px 0 72px;background:var(--night);color:var(--cream)}
.subjsec h2{color:var(--cream)}
.subjhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.subjkick{margin:0 0 12px;font:500 12px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.subjarrows{display:flex;align-items:center;gap:10px;flex:none}
.subjall{margin-right:8px;font-size:15px;font-weight:500;color:var(--cream);text-decoration:underline;text-decoration-color:rgba(253,247,234,.35);text-underline-offset:5px;transition:text-decoration-color .2s ease}
@media (hover:hover) and (pointer:fine){.subjall:hover{text-decoration-color:var(--glow)}}
.subjall:focus-visible{outline:2px solid var(--glow);outline-offset:4px;border-radius:4px}
.subjarrow{width:48px;height:48px;border-radius:50%;border:1px solid rgba(253,247,234,.22);background:transparent;color:var(--cream);display:grid;place-items:center;cursor:pointer;
  transition:transform .16s cubic-bezier(.23,1,.32,1),opacity .2s ease,border-color .2s ease,background-color .2s ease}
.subjarrow:active:not(:disabled){transform:scale(.94)}
.subjarrow:disabled{opacity:.28;cursor:default}
@media (hover:hover) and (pointer:fine){.subjarrow:hover:not(:disabled){border-color:var(--glow);background:rgba(255,143,31,.1)}}
.subjviewport{position:relative;margin:0 -44px}
.subjviewport::before,.subjviewport::after{content:"";position:absolute;top:0;bottom:24px;width:18px;z-index:2;pointer-events:none;transition:opacity .3s ease}
.subjviewport::before{left:0;background:linear-gradient(90deg,rgba(7,24,45,.55),rgba(7,24,45,0))}
.subjviewport::after{right:0;background:linear-gradient(270deg,rgba(7,24,45,.55),rgba(7,24,45,0))}
.at-start .subjviewport::before,.at-end .subjviewport::after{opacity:0}
.subjcards{list-style:none;margin:0;padding:4px 44px 24px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px) / 3);gap:20px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:44px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.subjcards::-webkit-scrollbar{display:none}
.subjcard{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card);color:var(--ink);border-radius:28px;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s ease}
.subjart{position:relative;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#fbfaf6;box-shadow:inset 0 0 0 1px rgba(13,27,42,.04)}
.subjart img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.23,1,.32,1)}
.subjidx{position:absolute;left:14px;top:12px;font:500 11px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--ink-faint)}
.subjbody{position:relative;padding:20px 14px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.subjlink{display:flex;flex-direction:column;flex:1;padding:10px 10px 18px;border-radius:28px;color:inherit;text-decoration:none;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.subjlink:active{transform:scale(.985)}
.subjgo-arrow{position:absolute;right:4px;bottom:0;width:38px;height:38px;border-radius:50%;background:var(--tint);display:grid;place-items:center;color:var(--ink);font-style:normal;transition:background-color .2s ease,color .2s ease}
.subjbody h3{margin:0;font-size:clamp(21px,1.9vw,24px)}
.subjline{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.subjbody .cnt{margin-top:8px;margin-right:48px}
.subjcard a:focus-visible,.pb-tile a:focus-visible,.subjarrow:focus-visible,.tq .opt:focus-visible,.tq-ctl button:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .subjcard:hover{transform:translateY(-4px);box-shadow:0 34px 60px -28px rgba(0,0,0,.7)}
  .subjcard:hover .subjart img{transform:scale(1.035)}
  .subjcard:hover .subjgo-arrow{background:var(--night);color:var(--cream)}
}
.subjtrack{position:relative;height:3px;border-radius:3px;background:rgba(253,247,234,.14);overflow:hidden;max-width:220px;margin:6px auto 0}
.subjtrack span{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--glow);will-change:transform}
/* Whole cards only: three fill the column on a laptop, two on a tablet. */
@media(max-width:1080px) and (min-width:761px){.subjcards{grid-auto-columns:calc((100% - 20px) / 2)}}
/* No card edge past the column on a laptop or tablet (two reviews, 6 Oct): the
   row ends at the column, the arrows and the track say there is more. */
@media(min-width:761px){
  .subjviewport{margin:0}
  .subjviewport::before,.subjviewport::after{display:none}
  .subjcards{padding:4px 0 24px;scroll-padding-left:0}
}
@media(max-width:760px){
  .subjsec{padding:72px 0 52px}
  .subjarrow{display:none}
  .subjall{margin-right:0}
  .subjviewport{margin:0 -22px}
  .subjviewport::before,.subjviewport::after{width:12px}
  .subjcards{padding:4px 22px 22px;grid-auto-columns:80%;gap:14px;scroll-padding-left:22px}
  /* too narrow for the counts and the arrow on one line: the arrow gets its own */
  .subjbody{padding-bottom:52px}
  .subjbody .cnt{margin-right:0}
}
@media (prefers-reduced-motion: reduce){.subjcard,.subjart img{transition:none}}

/* ─── 2026-10-06: section 3, one real question on the page's own try card ─── */
.trysec{padding:96px 0}
.trycard.tq{max-width:880px}
.tq .qmeta{flex-wrap:wrap;row-gap:6px}
.tq .qmeta .chip{white-space:nowrap}
.tq .opts{margin-top:22px}
.tq .opt{position:relative;transition:border-color .18s ease,background-color .18s ease,opacity .3s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.tq .opt:active:not(:disabled){transform:scale(.985)}
.tq .opt:disabled{cursor:default}
/* right and wrong as the practice room marks them (components/v16/tokens.ts) */
.tq .opt.good{border-color:rgba(0,188,125,.30);background:rgba(0,188,125,.10)}
.tq .opt.good .k{background:#009966;color:#fff}
.tq .opt.bad{border-color:rgba(238,52,59,.30);background:rgba(238,52,59,.10)}
.tq .opt.bad .k{background:#ee343b;color:#fff}
.tq .opt.dim{opacity:.55}
.tq-bottom{padding:24px 28px 26px}
.tq-bottom .lbl{margin:0 0 14px 12px}
.tq-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#dfeaf5;box-shadow:0 0 0 1px rgba(253,247,234,.08)}
.tq-stage .pq-cv{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter .5s ease,opacity .5s ease}
.tq-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.23,1,.32,1)}
.tq-reveal.open{grid-template-rows:1fr}
.tq-revealin{min-height:0;overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity .45s ease .12s,transform .6s cubic-bezier(.23,1,.32,1) .05s}
.tq-reveal.open .tq-revealin{opacity:1;transform:none}
.tq-narr{margin:14px 12px 0;min-height:46px}
.tq-narr p{margin:0}
.tq-cap{animation:tqCap .45s cubic-bezier(.23,1,.32,1)}
@keyframes tqCap{from{opacity:0;transform:translateY(5px)}}
.tq-explore{display:grid;gap:8px}
.tq-explore label{display:flex;align-items:center;gap:14px;font-size:12.5px;color:#9db6cc}
.tq-explore input{flex:1;accent-color:var(--glow);height:22px;cursor:pointer}
.tq-ctl{margin:12px 0 0 12px}
.tq-ctl button:disabled{opacity:.35;cursor:default}
.tq-ctl button:active:not(:disabled){transform:scale(.94)}
.tq-segs{flex:1;display:flex;gap:5px}
.ws-ctl .tq-seg{position:relative;flex:1 1 0;width:auto;height:18px;display:flex;align-items:center;border:0;border-radius:0;background:none;padding:0;cursor:pointer}
@media (hover:hover) and (pointer:fine){.ws-ctl .tq-seg:hover{background:none}.ws-ctl .tq-seg:hover::before{background:rgba(253,247,234,.3)}}
.ws-ctl .tq-seg:disabled{cursor:default}
.tq-seg::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:3px;background:rgba(253,247,234,.16)}
.tq-seg i{position:absolute;left:0;right:0;height:3px;border-radius:3px;background:var(--glow);transform-origin:left center}
@media (pointer:coarse){.ws-ctl .tq-seg{height:32px}}
/* Founder pick A (2026-10-06): on a laptop the question sits left and the
   animation right, so the whole demo fits one screen. Exact probe values. */
@media(min-width:1024px){
  .trycard.tq{max-width:1180px;display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr)}
  .tq .q-top{padding:40px 36px;display:flex;flex-direction:column;justify-content:center}
  .tq .qtext{font-size:22px}
  .tq-bottom{padding:24px 24px 22px}
  .tq-stage{aspect-ratio:16/11}
}
.tq-step{font-variant-numeric:tabular-nums;font-size:11.5px;color:#9db6cc;min-width:28px;text-align:right}
@media(max-width:760px){
  .trysec{padding:72px 0}
  .tq .q-top{padding:26px 22px}
  .tq-bottom{padding:18px 14px 20px}
  .tq-stage{aspect-ratio:4/5;border-radius:14px;transition:aspect-ratio .6s cubic-bezier(.23,1,.32,1)}
  /* shorter while the question is open; it grows once there is a solution to show */
  .tq-stage.ask{aspect-ratio:4/3}
  .tq-bottom .lbl,.tq-narr{margin-left:6px;margin-right:6px}
  .tq-ctl{margin-left:6px}
}
@media (prefers-reduced-motion: reduce){.tq-cap{animation:none}.tq-stage,.tq-stage .pq-cv,.tq-reveal,.tq-revealin{transition:none}}

/* ─── 2026-10-06: section 4, "All you need to fly" (bento, founder pick B) ─── */
.prep2{padding:96px 0 40px}
.prep2 .prephead{margin-bottom:32px}
.pb{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(6,minmax(0,1fr))}
.pb-tile{grid-column:span 2}
.pb-bank,.pb-papers{grid-column:span 3}
.pb-tile a{display:flex;flex-direction:column;height:100%;padding:10px;background:var(--card);border-radius:28px;color:inherit;text-decoration:none;
  box-shadow:0 0 0 1px rgba(13,27,42,.05),0 1px 2px rgba(13,27,42,.04),0 18px 40px -22px rgba(13,27,42,.22);transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s ease}
.pb-stage{position:relative;height:270px;border-radius:20px;overflow:hidden;
  background:radial-gradient(110% 90% at 50% 0%,#f7f3e8 0%,#ece6d6 78%);box-shadow:inset 0 0 0 1px rgba(13,27,42,.05)}
.pb-bank .pb-stage,.pb-papers .pb-stage{height:310px}
.pb-text{position:relative;padding:18px 14px 12px;display:grid;gap:4px}
.pb-text b{font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.pb-text span{font-size:14.5px;line-height:1.45;color:var(--ink-soft);padding-right:48px}
.pb-go{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:var(--tint);display:grid;place-items:center;color:var(--ink);transition:background-color .2s ease,color .2s ease}
.pb-tile a:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.pb-tile a:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(13,27,42,.06),0 28px 50px -24px rgba(13,27,42,.3)}.pb-tile a:hover .pb-go{background:var(--night);color:var(--cream)}}
@media(max-width:939px){.pb{grid-template-columns:1fr}.pb-tile,.pb-bank,.pb-papers{grid-column:auto}.pb-stage,.pb-bank .pb-stage,.pb-papers .pb-stage{height:260px}}

.vg{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
/* the tiles only move while the bento is on screen */
.pb:not(.playing) .vg *,.pb:not(.playing) .vg *::before{animation-play-state:paused!important}
.vg-meta{margin:0;font:500 10px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* question banks: one card at a time, as the practice runner draws it */
.vg-deck{position:relative;width:min(84%,350px);height:236px;margin-top:22px}
.vg-dcard{position:absolute;inset:0;padding:18px 20px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(13,27,42,.06),0 20px 40px -22px rgba(13,27,42,.35);
  animation:vgDeck 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes vgDeck{
  0%,28%{transform:none;opacity:1;z-index:3}
  33%{transform:translateX(-118%) rotate(-10deg);opacity:0;z-index:3}
  34%{transform:translateY(-26px) scale(.88);opacity:0;z-index:1}
  40%,64%{transform:translateY(-26px) scale(.88);opacity:.5;z-index:1}
  70%,94%{transform:translateY(-13px) scale(.94);opacity:.85;z-index:2}
  100%{transform:none;opacity:1;z-index:3}}
.vg-q{margin:5px 0 10px;font-size:15.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.vg-opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vg-opts li{display:flex;align-items:center;gap:8px;height:32px;white-space:nowrap;overflow:hidden;padding:0 9px;border-radius:10px;background:#faf9f5;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;color:var(--ink)}
.vg-opts i{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:var(--tint)}
.vg-opts li.ok i{animation:vgOkI 9s infinite;animation-delay:inherit}
@keyframes vgOkI{0%,10%{background:var(--tint);color:var(--ink)}14%,30%{background:#19a35b;color:#fff}36%,100%{background:var(--tint);color:var(--ink)}}
.vg-verdict{margin:10px 0 0;display:flex;align-items:center;gap:10px;font-size:13px;opacity:0;animation:vgWork 9s infinite}
.vg-verdict b{color:#0f6b3a;font-weight:600}
.vg-verdict span{margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--tint);font-size:11.5px;font-weight:500;color:var(--ink)}
.vg-opts li.ok{animation:vgOk 9s infinite}
@keyframes vgOk{0%,10%{background:#faf9f5;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}14%,30%{background:#e7f7ee;box-shadow:inset 0 0 0 1.5px #19a35b;color:#0f6b3a}36%,100%{background:#faf9f5;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}}
.vg-work{margin:6px 0 0;font:500 11px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#b4560a;opacity:0;animation:vgWork2 9s infinite}
@keyframes vgWork2{0%,19%{opacity:0;transform:translateY(5px)}24%,30%{opacity:1;transform:none}34%,100%{opacity:0}}
@keyframes vgWork{0%,15%{opacity:0;transform:translateY(5px)}20%,30%{opacity:1;transform:none}34%,100%{opacity:0}}

/* past papers: stamp cards, an ink stamp landing on each */
.vg-papers{display:flex;gap:16px;justify-content:center;align-items:center}
.vg-stampcard{position:relative;width:min(27%,156px);aspect-ratio:3/4.1;padding:14px 13px;display:flex;flex-direction:column;gap:8px;background:#fffdf7;
  -webkit-mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 0 0/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 100%/14px 51% repeat-x;
  mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 0 0/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 100%/14px 51% repeat-x;
  filter:drop-shadow(0 14px 18px rgba(13,27,42,.16));transform:rotate(calc((var(--i) - 1) * 4deg)) translateY(calc(var(--i) * 0px))}
.vg-stamphead{display:flex;justify-content:space-between;align-items:baseline;font:500 9px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--ink-faint)}
.vg-stamphead b{font:400 18px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:0}
.vg-stampcard p{margin:4px 0 0;font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.vg-when{font-size:11px;line-height:1.3;color:var(--ink-soft)}
.vg-lines{display:grid;gap:6px;margin-top:4px}
.vg-lines i{height:4px;border-radius:2px;background:rgba(13,27,42,.09)}
.vg-lines i:nth-child(2){width:80%}.vg-lines i:nth-child(3){width:58%}
.vg-ink{position:absolute;left:50%;bottom:38px;translate:-50% 0;padding:5px 10px;border:2px solid #19a35b;border-radius:8px;color:#19a35b;
  font:700 11px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;opacity:0;rotate:-8deg;animation:vgInk 4.8s cubic-bezier(.23,1,.32,1) infinite}
@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: two overlapping clocks */
.vg-mock{place-items:center}
.vg-dark{position:absolute;left:calc(50% - 34px);top:calc(50% - 74px);width:196px;height:180px;border-radius:30px;padding:18px 18px 16px 66px;background:#101820;color:var(--cream);
  display:flex;flex-direction:column;box-shadow:0 22px 40px -20px rgba(0,0,0,.55)}
.vg-dlabel{font:500 9.5px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;color:#7f93a8}
.vg-dark b{margin-top:4px;font:500 26px "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vg-dq{margin-top:6px;font-size:11px;color:#c4d5e4}
.vg-dgrid{margin-top:10px;display:grid;grid-template-columns:repeat(10,8px);gap:3px}
.vg-dgrid i{width:8px;height:8px;border-radius:2px;background:rgba(253,247,234,.12)}
.vg-dgrid i.ans{background:var(--cream)}
.vg-dgrid i.flg{background:var(--glow)}
.vg-dgrid i.cur{box-shadow:0 0 0 1.5px var(--glow);background:transparent}
.vg-dark small{font-size:15px;color:#7f93a8}
.vg-dfoot{margin-top:auto;font-size:10px;color:#7f93a8}
.vg-clock{position:absolute;left:calc(50% - 156px);top:calc(50% - 96px);width:176px;height:176px;border-radius:38px;background:linear-gradient(160deg,#ffffff,#eeece6);
  box-shadow:0 0 0 1px rgba(13,27,42,.05),0 26px 44px -20px rgba(13,27,42,.4)}
.vg-dial{position:absolute;inset:16px;border-radius:50%}
.vg-dial i{position:absolute;left:50%;top:0;width:1.5px;height:7px;margin-left:-.75px;background:rgba(13,27,42,.22);transform-origin:50% 72px}
.vg-dial i.maj{height:11px;width:2px;background:rgba(13,27,42,.55)}
.vg-dial i:nth-child(-n+18):not(.maj){background:#3ccf7a}
.vg-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:3px}
.vg-hand.h{width:4px;height:36px;margin-left:-2px;background:var(--ink);rotate:-30deg}
.vg-hand.m{width:3px;height:56px;margin-left:-1.5px;background:var(--ink);rotate:174deg;animation:vgSpin 360s linear infinite}
.vg-hand.s{width:1.5px;height:64px;margin-left:-.75px;background:#ff8f1f;animation:vgSpin 60s linear infinite}
.vg-hub{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)}}

/* RTR part 2: Inspora's voice-model card */
.vc2{width:min(86%,340px);padding:16px 18px 16px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(13,27,42,.06),0 22px 44px -22px rgba(13,27,42,.4)}
.vc2-h{display:flex;justify-content:space-between;align-items:center}
.vc2-st{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#c85e00;transition:color .2s ease}
.vc2-st.you{color:#244f94}
.vc2-st.ok{color:#0f6b3a}
.vc2-eq{display:inline-flex;gap:2px;align-items:center;height:11px}
.vc2-eq i{width:2px;height:100%;border-radius:1px;background:currentColor;animation:vc2Eq .6s ease-in-out infinite alternate}
.vc2-eq i:nth-child(2){animation-delay:-.2s}.vc2-eq i:nth-child(3){animation-delay:-.4s}
.vc2-st.ok .vc2-eq i{animation:none;transform:scaleY(.35)}
@keyframes vc2Eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.vc2-close{font-size:12px;color:var(--ink-faint)}
.vc2-rib{display:block;width:100%;height:96px;margin:6px 0 4px}
.vc2-text{margin:0;min-height:42px;font-size:14.5px;line-height:1.4;font-weight:500;letter-spacing:-.01em}
.vc2-text span{color:rgba(13,27,42,.18);transition:color .18s ease}
.vc2-text span.said{color:var(--ink)}
.vc2-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.vc2-score{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:#0f6b3a;opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .3s cubic-bezier(.23,1,.32,1)}
.vc2-score.show{opacity:1;transform:none}
.vc2-score i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#19a35b;color:#fff;font-size:10px}
.vc2-b{width:44px;height:32px;border-radius:10px;display:grid;place-items:center;background:#f1efe8;transition:background-color .2s ease,color .2s ease}
.vc2-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.vc2-b.hot{background:var(--night);color:#fff}

/* airline cadet assessments: a timed spatial task */
.vg-task{width:min(88%,320px);padding:16px 16px 14px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(13,27,42,.06),0 22px 44px -22px rgba(13,27,42,.4)}
.vg-taskhead{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.vg-tring svg{display:block;width:20px;height:20px;transform:rotate(-90deg)}
.vg-cue{margin:12px 0 12px;font-size:13px;color:var(--ink-soft)}
.vg-cue b{color:var(--ink);font-weight:600}
.vg-pics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vg-pics .pic{position:relative;aspect-ratio:1;border-radius:12px;background:#f6f4ee;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.vg-pics svg{width:80%;height:80%}
.vg-pics .dial{fill:#fff;stroke:rgba(13,27,42,.18);stroke-width:1.2}
.vg-pics .tk{stroke:rgba(13,27,42,.35);stroke-width:1.4;stroke-linecap:round}
.vg-pics .needle{stroke:#3f7bd6;stroke-width:2.2;stroke-linecap:round}
.vg-pics .wings{fill:#1a2a40}
.vg-pics .up{fill:none;stroke:#19a35b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vg-pics .down{fill:none;stroke:#e5484d;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vg-pics em{position:absolute;left:5px;top:3px;font-style:normal;font-size:9.5px;color:var(--ink-faint)}
.vg-pics .pic.ok{animation:vgPick 6s infinite}
@keyframes vgPick{0%,52%{background:#f6f4ee;box-shadow:inset 0 0 0 1px var(--line)}58%,94%{background:#e7f7ee;box-shadow:inset 0 0 0 1.5px #19a35b}100%{background:#f6f4ee}}
.vg-tring circle{fill:none;stroke:#ff8f1f;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:50.3;animation:vgRing 6s linear infinite}
@keyframes vgRing{from{stroke-dashoffset:0}to{stroke-dashoffset:50.3}}

@media(max-width:560px){
  .vg-clock{left:calc(50% - 150px);transform:scale(.9)}.vg-dark{left:calc(50% - 26px);transform:scale(.9)}
  .vg-deck{width:88%;height:236px;margin-top:0}
  .vg-q{font-size:14px}
  .vg-opts li{height:30px;font-size:12px;padding:0 7px}
  .vg-stampcard{width:42%}
  .vg-stampcard:nth-child(3){display:none}
}
@media (prefers-reduced-motion: reduce){
  .vg *,.vg *::before{animation:none!important}
  .vg-dcard:not(:first-child){opacity:0}
  .vg-work,.vg-ink{opacity:1}
  .vg-opts li.ok{background:#e7f7ee;box-shadow:inset 0 0 0 1.5px #19a35b;color:#0f6b3a}
    }

/* ─── 2026-10-06: the footer, grouped columns (founder pick 1) ─── */
footer.fx{display:block;max-width:1420px;margin:0 auto;padding:72px 44px 34px;color:var(--ink-soft)}
.fx-top{display:grid;gap:36px 28px;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr))}
.fx-brand img{display:block;height:30px;width:auto}
.fx-brand p{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:34ch}
.fx-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fx-col b{margin-bottom:6px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.fx-col a{font-size:14.5px;line-height:1.35;color:var(--ink-soft);transition:color .15s ease}
@media (hover:hover) and (pointer:fine){.fx-col a:hover,.fx-legal a:hover{color:var(--ink)}}
.fx-bottom{margin-top:64px;padding-top:24px;border-top:1px solid rgba(13,27,42,.1);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13.5px;color:var(--ink-faint)}
.fx-legal{display:flex;gap:22px}
.fx-legal a{color:var(--ink-soft);transition:color .15s ease}
@media(max-width:1100px){.fx-top{grid-template-columns:repeat(3,minmax(0,1fr))}.fx-brand{grid-column:1/-1}}
@media(max-width:620px){.fx-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){footer.fx{padding:52px 22px 30px}.fx-bottom{flex-direction:column;align-items:flex-start;gap:12px}}

.dn-nav{--dn-ease:cubic-bezier(.23,1,.32,1)}

/* the desktop row */
.dn-row{display:none;list-style:none;margin:0 0 0 auto;padding:0;gap:2px;align-items:center}
@media(min-width:1200px){.dn-row{display:flex}.shell>nav.dn-nav>.login{margin-left:18px}}
.dn-item{position:relative}
.dn-trig{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){.dn-trig:hover{color:var(--ink);background:rgba(13,27,42,.05)}}
.dn-trig[aria-expanded="true"]{color:var(--ink);background:rgba(13,27,42,.07)}
.dn-trig:active{transform:scale(.97)}
.dn-chev{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}
[aria-expanded="true"] > .dn-chev{transform:rotate(180deg);opacity:.9}
/* NEW! above the trigger word, the live bar's placement, out of flow */
.dn-lbl{position:relative}
.dn-trig.is-new .new-tag{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 3px);font-size:10px}

/* anchored cards */
.dn-pop{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}
.dn-pop[data-state="open"]{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 */
.dn-pop::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 */
.dn-instant .dn-pop{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. */
.dn-pop.c{padding:24px;border-radius:22px;min-width:260px}
.dn-pop.c.bank{width:520px}
.dn-pop.c.guides{width:670px}
.dn-pop.c.exams,.dn-pop.c.cadet{width:420px}
.dn-pop.c.tools{width:310px}
.dc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.dc-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.dc-a{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)}
.dc-a.two{padding:11px 14px;align-items:flex-start;gap:14px}
.dn-pop.c.exams .dc-list,.dn-pop.c.cadet .dc-list{gap:6px}
@media (hover:hover) and (pointer:fine){.dc-a:hover{background:var(--tint)}}
.dc-a:active{transform:scale(.98)}
.dc-t{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:400;line-height:1.4;letter-spacing:-.005em;white-space:nowrap}
.dc-t .new-tag{font-size:11px}
.dc-a small{display:block;color:var(--ink-soft);font-size:13.5px;font-weight:300;line-height:1.45;white-space:nowrap}
.dn-nav .dc-a:focus-visible{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. */
.dc-tx{display:flex;flex-direction:column;min-width:0;gap:4px}
.dc-g{flex:none;display:grid;place-items:center;color:var(--ink-soft);opacity:.8;transition:color .12s ease,background-color .12s ease}
.dc-g svg,.dnm .dnm-g svg{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){.dc-a:hover .dc-g{color:var(--ink)}}
.dc-a.two .dc-g{opacity:1;width:40px;height:40px;border-radius:12px;background:rgba(13,27,42,.05);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.dc-a.two:hover .dc-g{background:var(--card)}}

/* phone: the live menu card, with the groups as accordion sections */
.dnm .dnm-sec{border-bottom:1px solid var(--line)}
.dnm .dnm-head{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}
.dnm .dnm-head:active{background:var(--tint)}
.dnm .dnm-head .dn-chev{margin-left:auto;width:14px;height:14px;opacity:.55}
.dnm .dnm-head .new-tag{font-size:12px}
/* the open section shows the tag on its own row; one tag at a time */
.dnm .dnm-sec[data-open] .dnm-head .new-tag{visibility:hidden}
.dnm .dnm-body{padding:0 0 12px;display:flex;flex-direction:column;
  opacity:1;transform:none;transition:opacity .2s ease,transform .22s var(--dn-ease)}
@starting-style{.dnm .dnm-body{opacity:0;transform:translateY(-6px)}}
.dnm .dnm-body[hidden]{display:none}
.dnm .dnm-link{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}
.dnm .dnm-link:active{background:var(--tint)}
.dnm .dnm-link .new-tag{font-size:11px}
.dnm .dnm-g{flex:none;display:grid;place-items:center;color:var(--ink-soft)}
.dnm .dnm-link:has(small){gap:14px}
.dnm .dnm-link:has(small) .dnm-g{width:40px;height:40px;border-radius:12px;background:rgba(13,27,42,.05);color:var(--ink)}
.dnm .dnm-txt{display:flex;flex-direction:column;min-width:0;padding:10px 0}
.dnm .dnm-t{display:flex;align-items:center;gap:8px;line-height:1.35}
.dnm .dnm-txt small{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 */
.dnm .dnm-link.page{justify-content:space-between;color:var(--ink)}
.dnm .dnm-link.page span{color:var(--ink-faint)}

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

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

/* the NEW! tag (founder-approved mockup, 21 September 2026) */
.new-tag{display:inline-flex;font-weight:650;letter-spacing:.01em;line-height:1}
.new-tag > span{display:inline-block;color:var(--rest);will-change:transform,color}
.new-tag > span:nth-child(1){--i:0;--rest:#ff8f1f}
.new-tag > span:nth-child(2){--i:1;--rest:#ff5e3a}
.new-tag > span:nth-child(3){--i:2;--rest:#e8336f}
.new-tag > span:nth-child(4){--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)}
}
.new-tag > span{animation:new-tag-sunset 1.8s ease-in-out 2 both;animation-delay:calc(var(--i) * .2s)}
.new-tag[data-wave="a"] > span{animation-name:new-tag-sunset-again;animation-iteration-count:1}
.new-tag[data-wave="b"] > span{animation-name:new-tag-sunset;animation-iteration-count:1}
@media (prefers-reduced-motion: reduce){.new-tag > span{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 */
.new-tag-sr{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 */
footer .new-tag{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 */
.v16-root .sb .new-tag{font-size:11px;margin-left:auto;transition:opacity .2s .12s}
.v16-root .app.rail .sb .new-tag{opacity:0;transition:opacity .15s}
/* the phone dock's More sheet, beside the label */
.v16-root .pmore .pmore-row .new-tag{font-size:12px}