/* The `hidden` attribute is UA-level `display:none`, and ANY author `display`
   declaration outranks it -- so `.chat{display:flex}` below kept the panel on
   screen after `panel.hidden = true`. The X fired, the state changed, and
   nothing moved. One rule, before everything, so no future `display` can
   silently defeat a hidden attribute again. */
[hidden]{display:none!important}

/* Pilot Placer — the whole site's stylesheet.
   Extracted from index.html on 2026-09-05, when the site stopped being one page.
   Six pages each carrying their own copy of 171 lines of CSS is six chances for the
   brand to drift, and the drift is always silent — nobody diffs two stylesheets.
   One file, cached once, and a colour changes in one place. */
:root{
    --navy:#0B1D3A; --navy-deep:#071527; --navy-line:#16304F; --navy-panel:#0F2547;
    --burgundy:#6B0F24; --burgundy-deep:#4E0A1A;
    --brass:#B8892B; --brass-bright:#D6A64A;
    --paper:#F7F5F2; --paper-sunk:#EFEBE6; --paper-line:#DDD6CC;
    --ink:#10161F; --ink-soft:#4A5462;
    --silver-flat:#C4C4C4;
    --silver:linear-gradient(100deg,#6E7479 0%,#C9CED3 18%,#FFFFFF 34%,#AEB4BA 47%,#E8EBEE 62%,#8A9096 82%,#C9CED3 100%);
    --silver-edge:linear-gradient(100deg,#8A9096,#E8EBEE 40%,#AEB4BA 70%,#6E7479);
    --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
    --measure:66ch;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
       font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance;margin:0}
  a{color:inherit}
  .wrap{max-width:1080px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
  .narrow{max-width:var(--measure)}
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
           color:var(--brass);margin:0 0 1rem}
  .metal{color:#D3D8DD;background:var(--silver);-webkit-background-clip:text;background-clip:text;
         -webkit-text-fill-color:transparent}
  @supports not (background-clip:text){.metal{-webkit-text-fill-color:#D3D8DD}}
  .rule-metal{height:1px;border:0;background:var(--silver-edge);opacity:.8;margin:0}
  .trim-brass{height:2px;border:0;margin:0;
    background:linear-gradient(90deg,transparent,var(--brass) 18%,var(--brass-bright) 50%,var(--brass) 82%,transparent)}

  /* ---- navy sections: the dress uniform. metal + brass live only here ---- */
  .navy{background:var(--navy);color:#E6EAEF}
  .navy h2,.navy h3{color:#F2F5F8}
  .navy .lede{color:#B9C4D2}

  /* HERO
     ⛔ NO TOP PADDING. It had `clamp(3.5rem,9vw,7rem)`, which on a desktop put
     112px of empty navy above the nav — the first screenful was dead space and
     the photograph was pushed most of the way down it. The nav's own 1.1rem is
     the whole gap now, and the masthead starts immediately under it. */
  header.hero{background:
      radial-gradient(120% 90% at 78% -10%, #14315A 0%, transparent 60%),
      linear-gradient(180deg,var(--navy) 0%, var(--navy-deep) 100%);
    color:#E6EAEF;padding:0}
  /* The top bar runs wider than the 1080px reading column, because it has to hold
     the mark, the catchphrase and six links on one line. The COPY stays at 1080 —
     a 1500px line of body text is unreadable, and this is the only element on the
     page that earns the extra width. */
  .wrap--bar{max-width:1560px}
  .hero__copy{padding-top:clamp(2rem,4.5vw,3.4rem);
              padding-bottom:clamp(2.6rem,6vw,4.4rem)}
  /* The second paragraph is deliberately quieter than the first. The one above it
     is the argument; this is the reassurance, and a reassurance set at the same
     weight as the argument reads as a second argument. */
  .hero .lede--soft{font-size:clamp(1rem,1.7vw,1.1rem);color:#93A3B7;max-width:58ch;
                    margin-top:1.2rem;border-left:1px solid var(--navy-line);
                    padding-left:1.1rem}
  h1{font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1.06;letter-spacing:-.005em;max-width:16ch}
  h1 em{font-style:normal}
  .hero .lede{font-size:clamp(1.05rem,2vw,1.22rem);max-width:52ch;margin:1.6rem 0 0;color:#B9C4D2}
  .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:2.4rem 0 clamp(3rem,7vw,5rem)}

  /* THE MASTHEAD BAND — the home page's photograph, edge to edge.
     Full-bleed because the picture is the argument the page opens with, and a
     1080px box of it on a 2000px monitor reads as a stock thumbnail. The height
     is the ladder band's height, which is what the operator asked for: a wide,
     shallow band leaves room for the actions to sit inside it instead of below.
     `object-position: center 22%` is measured, not taste — the source is 16:9 and
     the band is roughly 4:1, so 43% of the frame survives, and 22% from the top
     is the window that holds the captain's head, the wings and the nose together.
     Center-cropping decapitates him. */
  .masthead{position:relative;background:var(--navy-deep);overflow:hidden;
            line-height:0;margin:0}
  .masthead img{display:block;width:100%;height:clamp(280px,40vw,640px);
                object-fit:cover;object-position:center 26%}
  /* Same lesson as the ladder band: the scrim is built for the BRIGHTEST part of
     the photograph (the sun on the wet ramp, bottom left — exactly where the
     buttons sit), not its average. */
  .masthead::after{content:"";position:absolute;inset:auto 0 0;height:62%;
                   pointer-events:none;background:linear-gradient(0deg,
                     rgba(7,21,39,.95) 0%, rgba(7,21,39,.80) 34%,
                     rgba(7,21,39,.42) 66%, transparent 100%)}
  .masthead__actions{position:absolute;left:0;right:0;bottom:0;z-index:2;
                     line-height:1.55;padding-bottom:clamp(1.1rem,2.6vw,2rem)}
  .masthead__actions .hero-actions{margin:0}
  /* The line above the single button. It replaced two buttons whose labels asked a
     visitor to sort themselves into "new" or "already flying" before they had been
     offered anything — and both went to the same place. */
  .hero-kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
               text-transform:uppercase;color:var(--brass-bright);margin:0 0 .8rem;
               text-shadow:0 1px 10px rgba(7,21,39,.9)}
  .masthead__actions .cta,.masthead__actions .cta-outline{
    box-shadow:0 2px 18px rgba(7,21,39,.55)}
  .masthead__actions .cta-outline{background:rgba(7,21,39,.45);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .masthead__actions .cta-quiet{color:#C6D2E0;text-shadow:0 1px 10px rgba(7,21,39,.9)}
  /* Below ~40rem the band is too short to hold three actions over a face without
     covering it, so they drop out of the picture and sit under it. The scrim goes
     with them — with nothing to make legible it is just a dark stripe. */
  @media (max-width:40rem){
    .masthead{line-height:1.55}
    .masthead::after{display:none}
    .masthead__actions{position:static;padding:1.6rem 0 0}
    .masthead__actions .hero-actions>a{width:100%;text-align:center}
    .masthead__actions .cta-quiet{width:auto;text-align:left}
  }
  .cta{display:inline-block;background:var(--brass);color:var(--navy-deep);text-decoration:none;
       font-weight:600;letter-spacing:.02em;padding:.85rem 1.6rem;border-radius:2px;
       transition:background .18s ease}
  .cta:hover,.cta:focus-visible{background:var(--brass-bright)}
  /* The two doors are the same size on purpose. They are not a primary and a
     secondary action — they are two different people, and the page has no
     business deciding which of them matters more before either has clicked. */
  .cta-outline{display:inline-block;background:transparent;color:var(--brass-bright);
       text-decoration:none;font-weight:600;letter-spacing:.02em;padding:.85rem 1.6rem;
       border:1px solid var(--brass);border-radius:2px;
       transition:background .18s ease,color .18s ease}
  .cta-outline:hover,.cta-outline:focus-visible{background:var(--brass);color:var(--navy-deep)}
  .cta-quiet{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:#8FA0B4;text-decoration:none;
             border-bottom:1px solid #2A4568;padding-bottom:2px}
  .cta-quiet:hover,.cta-quiet:focus-visible{color:#C6D2E0;border-color:var(--brass)}
  :focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px}

  /* THE LADDER BAND — full-bleed, immediately under the hero.
     The image is doing an argument, not decoration: Cessna, light twin, King Air,
     airliner, left to right, which IS the career this product is about. That is
     why it is captioned. An uncaptioned aspirational photo on a site whose whole
     promise is "sourced, or we say we don't know" reads as the one unearned
     thing on the page.
     The top fade is not a flourish — the hero above it ends in navy, and without
     it the image starts on a hard horizontal seam. */
  .ladder{position:relative;background:var(--navy-deep);overflow:hidden}
  .ladder img{display:block;width:100%;height:clamp(240px,38vw,460px);object-fit:cover;
              object-position:center 62%}
  .ladder::before{content:"";position:absolute;inset:0 0 auto;height:38%;pointer-events:none;
                  background:linear-gradient(180deg,var(--navy-deep) 0%,transparent 100%)}
  /* The bottom scrim is doing legibility work, not styling. The first version
     faded to --navy over 52% and the caption sat on the bright wet ramp and the
     sun's reflection — invisible in the render, which is the only place it was
     ever going to show up. Text over a photograph needs a scrim built for the
     BRIGHTEST part of that photograph, not the average one. */
  .ladder::after{content:"";position:absolute;inset:auto 0 0;height:70%;pointer-events:none;
                 background:linear-gradient(0deg,
                   rgba(7,21,39,.97) 0%, rgba(7,21,39,.88) 28%,
                   rgba(7,21,39,.55) 60%, transparent 100%)}
  /* z-index is load-bearing here. `::after` is generated as the LAST child of
     .ladder, so without this the scrim paints OVER the caption instead of
     behind it — the text was still there, dimmed by its own legibility layer,
     which looks exactly like a scrim that is too weak and is why the first fix
     was to make it darker. Making it darker made it worse. */
  .ladder__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
               padding:0 0 clamp(1rem,3vw,2rem)}
  .ladder__cap p{font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.75rem);
                 color:#F2F5F9;margin:0;max-width:34ch;line-height:1.25;
                 text-shadow:0 1px 14px rgba(7,21,39,.85)}
  .ladder__cap span{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
                    text-transform:uppercase;color:var(--brass-bright);margin-bottom:.6rem}

  /* the hero's closing band — a uniform stripe */
  .stripe{display:grid;grid-template-columns:1fr;gap:0}
  .stripe .bar{height:6px;background:var(--burgundy)}

  section{padding:clamp(3.5rem,8vw,6rem) 0}
  h2{font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.15;max-width:20ch}
  .lede{font-size:1.06rem;color:var(--ink-soft);max-width:56ch}
  .navy .lede{color:#B9C4D2}

  /* refusal cards */
  .grid3{display:grid;gap:1.6rem;margin-top:2.8rem;
         grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .card{background:var(--navy-panel);border:1px solid var(--navy-line);border-radius:3px;
        padding:1.5rem 1.35rem}
  .card h3{font-size:1.22rem;margin-bottom:.55rem}
  .card p{margin:0;font-size:.95rem;color:#AFBBCA}

  /* the screening dossier — the page's centrepiece */
  .dossier{background:var(--paper-sunk);border:1px solid var(--paper-line);border-radius:3px;
           overflow:hidden;margin-top:2.6rem}
  .dossier-head{background:var(--burgundy);color:#F6ECEE;padding:1.15rem 1.5rem;
                display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline}
  .dossier-head .name{font-family:var(--display);font-size:1.5rem}
  .dossier-head .flag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
                      text-transform:uppercase;background:#F6ECEE;color:var(--burgundy-deep);
                      padding:.25rem .55rem;border-radius:2px}
  .dossier-body{padding:1.5rem}
  .dossier-body p{margin:0 0 1rem;font-size:.98rem}
  .dossier-body p:last-child{margin-bottom:0}
  dl.meta{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;margin:1.4rem 0 0;
          padding-top:1.25rem;border-top:1px solid var(--paper-line);font-size:.88rem}
  dl.meta dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
             color:var(--ink-soft);padding-top:.15rem}
  dl.meta dd{margin:0}
  .allegation{font-size:.83rem;color:var(--ink-soft);font-style:italic;margin-top:1.25rem;
              padding-top:1rem;border-top:1px solid var(--paper-line)}

  /* treadmill figures */
  .figures{display:grid;gap:1.5rem;margin-top:2.8rem;
           grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .fig .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(2rem,4.5vw,2.9rem);
          line-height:1;color:#F2F5F8}
  .fig .l{font-size:.9rem;color:#AFBBCA;margin-top:.6rem;max-width:26ch}
  .fig{border-top:1px solid var(--navy-line);padding-top:1.1rem}

  /* pledge */
  .pledge{background:var(--paper);border-left:3px solid var(--brass);padding:1.4rem 1.6rem;
          margin-top:2.4rem;max-width:60ch}
  .pledge p{margin:0;font-family:var(--display);font-size:1.28rem;line-height:1.45}
  .pledge cite{display:block;font-family:var(--mono);font-style:normal;font-size:.72rem;
               letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:.9rem}

  ul.plain{list-style:none;padding:0;margin:1.6rem 0 0}
  ul.plain li{padding:.7rem 0 .7rem 1.5rem;border-bottom:1px solid var(--paper-line);
              position:relative;font-size:.97rem}
  ul.plain li:before{content:"";position:absolute;left:0;top:1.15rem;width:7px;height:7px;
                     background:var(--burgundy);border-radius:50%}
  .navy ul.plain li{border-color:var(--navy-line);color:#C6D2E0}
  .navy ul.plain li:before{background:var(--brass)}

  footer{background:var(--navy-deep);color:#7E8DA1;padding:3rem 0;font-size:.85rem}
  /* ⛔ THE FLEX BELONGS ON THE ROW, NOT ON THE WRAP. This said `footer .wrap{display:flex}`,
     which was right when the footer was two spans side by side — and it made the new three-column
     grid inside it a FLEX ITEM, sized to its own content: 304px of a 1000px wrap, so the columns
     stacked and it looked like the grid was broken. The grid was fine; its container was not. */
  footer .wrap{display:block}
  footer .footrow{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
  footer a{color:#A9B7C8}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Added when the site grew past one page ─────────────────────────────── */

/* Navigation. It did not exist while there was one page, and a six-page site
   with no way between them is worse than a one-page site. */
.nav{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;
     padding:1.1rem 0;border-bottom:1px solid var(--navy-line)}
/* The catchphrase, beside the mark. It is a child of `.nav__mark` and not a
   sibling: `.nav__mark` carries `margin-right:auto`, so anything placed after it
   is pushed to the right-hand end of the bar with the links. Inside the mark it
   stays with the logo, and the pair wraps as one unit. */
.nav__tag{font-family:var(--display);font-size:clamp(1rem,1.6vw,1.45rem);
          font-weight:500;color:var(--brass-bright);letter-spacing:.01em;
          line-height:1.15;padding-left:.4rem}
/* On a phone it goes under the logo rather than disappearing — it is the
   catchphrase, and the small screen is where a visitor sees least of the page. */
@media (max-width:52rem){
  .nav .nav__mark{flex-wrap:wrap;row-gap:.35rem}
  .nav__tag{flex-basis:100%;padding-left:0}
}
.nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
       color:#8FA0B4;text-decoration:none;padding:.35rem 0}
.nav a:hover,.nav a:focus-visible{color:var(--brass-bright)}
.nav a[aria-current="page"]{color:#E6EAEF;border-bottom:1px solid var(--brass)}
.nav .nav__mark{margin-right:auto;display:flex;align-items:center;gap:.7rem}
.nav .nav__mark img{height:2.1rem;width:auto;display:block}

/* A page's opening band, when it is not the home page's full hero. */
/* The padding goes on the WRAP, not on the header. The closing stripe is a child
   of the header and comes after the wrap, so header padding-bottom put the space
   BELOW the stripe and left the lede's last line sitting on top of it. */
.pagehead{background:linear-gradient(180deg,var(--navy) 0%, var(--navy-deep) 100%);
          color:#E6EAEF}
.pagehead > .wrap{padding-bottom:clamp(2.5rem,6vw,4rem)}
.pagehead h1{font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:1.08;max-width:18ch;
             margin:clamp(2rem,5vw,3.2rem) 0 0}
.pagehead .lede{font-size:clamp(1.02rem,1.8vw,1.18rem);max-width:56ch;margin:1.4rem 0 0;
                color:#B9C4D2}

/* A photograph used inside a page rather than as the hero band. */
.plate{position:relative;margin:clamp(2rem,5vw,3.2rem) 0;border-radius:3px;overflow:hidden;
       background:var(--navy-deep)}
/* A plate opening a section already has the section's own top padding above it;
   its own margin on top of that reads as a hole rather than as breathing room. */
.plate:first-child{margin-top:0}
.plate img{display:block;width:100%;height:clamp(200px,30vw,360px);object-fit:cover}
.plate figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
                  text-transform:uppercase;color:#7E8DA1;padding:.7rem 0 0}
.paper .plate figcaption{color:#6B7280}

/* A numbered walk-through. Used on the screening page. */
/* A pull quote. It was used on the pledge page from the day that page was written
   and there was never a rule for it — it rendered as a browser-default blockquote,
   indented and unstyled, on a page whose whole job is to sound like it means it. */
.pull{margin:clamp(2rem,5vw,3rem) 0;padding:0 0 0 1.4rem;
      border-left:2px solid var(--brass)}
.pull p{margin:0;font-family:var(--display);font-size:clamp(1.35rem,2.8vw,1.9rem);
        line-height:1.32;color:#F2F5F9}
.pull cite{display:block;margin-top:.9rem;font-family:var(--mono);font-size:.7rem;
           letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--brass-bright)}
/* On a light section the quote has to take the page's ink, not the navy palette. */
section:not(.navy) .pull p{color:var(--ink)}
section:not(.navy) .pull cite{color:var(--ink-soft)}

/* ── THE SCREENING QUESTIONNAIRE ─────────────────────────────────────────────
   Every box is optional and the page has to LOOK it. A form styled with the
   usual required-field urgency argues against the one thing the copy promises:
   that a blank stays unknown rather than becoming a zero. Hence the placeholder
   reading "unanswered" rather than a greyed-out 0, and no error colouring on an
   empty field anywhere. */
.quiz{margin:2.4rem 0 0}
.quiz fieldset{border:0;border-top:1px solid var(--paper-line);margin:0 0 2.4rem;
               padding:1.4rem 0 0}
.quiz legend{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
             text-transform:uppercase;color:var(--brass);padding:0 .9rem 0 0}
.quiz legend span{color:var(--ink-soft);letter-spacing:.12em}
.quiz__note{font-size:.88rem;color:var(--ink-soft);margin:.2rem 0 0;max-width:62ch}
.quiz__grid{display:grid;gap:1rem 1.6rem;margin-top:1.4rem;
            grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.quiz label{display:block;font-size:.82rem;color:var(--ink-soft);
            font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.quiz label span{text-transform:none;letter-spacing:0;font-family:var(--body);opacity:.75}
.quiz input[type=text],.quiz input[type=email],.quiz select{
  display:block;width:100%;margin-top:.4rem;font:inherit;font-size:1rem;
  background:#FFF;border:1px solid var(--paper-line);border-radius:2px;
  padding:.62rem .7rem;color:var(--ink)}
.quiz input::placeholder{color:#9AA3AE;font-size:.9rem}
.quiz input:focus-visible,.quiz select:focus-visible{border-color:var(--brass);outline:none;
  box-shadow:0 0 0 3px rgba(176,141,74,.18)}
.quiz__checks{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center}
.quiz__checks .quiz__label{flex-basis:100%;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.3rem}
/* `.quiz label` is mono/uppercase for the field captions, and it outranks a plain
   `.quiz__consent` — which is why the consent line first shipped SHOUTING. The
   class is qualified so the sentence-shaped labels read as sentences. */
.quiz__checks label,.quiz label.quiz__consent{display:flex;align-items:center;gap:.5rem;
  font-family:var(--body);font-size:.95rem;text-transform:none;letter-spacing:0;color:var(--ink)}
.quiz label.quiz__consent{margin-top:1.2rem;max-width:62ch}
.quiz__checks input,.quiz__consent input{width:1.05rem;height:1.05rem;margin:0;accent-color:var(--brass)}
.quiz__foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.quiz__foot button{font:inherit;border:0;cursor:pointer}
.quiz__foot button:disabled{opacity:.55;cursor:default}
.quiz__err{color:var(--burgundy);font-size:.9rem;max-width:52ch}

/* The result. It is a table because it is five rows of the same three facts, and
   because "you have not told us yours" has to sit in the same column as a real
   answer rather than being hidden as an empty cell. */
.quiz__out{margin-top:2.8rem;border-left:2px solid var(--brass);padding-left:1.4rem}
.quiz__out h3{font-size:clamp(1.4rem,3vw,2rem);line-height:1.2;margin:0 0 .4rem}
.quiz__table{width:100%;border-collapse:collapse;margin:1.4rem 0 0;font-size:.95rem}
.quiz__table th{text-align:left;font-weight:600;font-family:var(--body);padding:.6rem 1rem .6rem 0;
  border-bottom:1px solid var(--paper-line);white-space:nowrap}
.quiz__table td{padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--paper-line);
  color:var(--ink-soft)}
.quiz__table tr.m td:last-child{color:#2F6B45}
.quiz__table tr.s td:last-child{color:var(--burgundy)}
/* An unknown is set in the mono face, not in a warning colour. It is not a
   failure — it is the one row that tells the pilot what to go and look up. */
.quiz__table tr.u td:last-child{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;
  color:var(--ink-soft)}
.quiz__caveat{font-size:.9rem;color:var(--ink-soft);margin:1.2rem 0 0;max-width:62ch}

/* A run of one- or two-word items — the qualification ladder, the hour categories.
   Set as a wrapped grid rather than as `ul.plain`, which gives nine full-width
   rules for the word "Night" and reads as a page of empty lines. */
.beats{display:grid;gap:0 1.6rem;margin:1.8rem 0 0;padding:0;list-style:none;
       grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.beats li{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
          padding:.62rem 0;border-top:1px solid var(--paper-line);color:var(--ink-soft)}
.navy .beats li{border-color:var(--navy-line);color:#C6D2E0}

/* A step list. Only ever inside a .navy section — `.steps p` is set light grey,
   which is invisible on paper. */
.steps{list-style:none;padding:0;margin:2.4rem 0 0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 1.6rem 3.4rem;margin:0 0 1.6rem;
          border-bottom:1px solid var(--navy-line)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;
                  font-family:var(--display);font-size:1.9rem;color:var(--brass);line-height:1}
.steps h3{margin:0 0 .4rem;font-size:1.15rem}
.steps p{margin:0;color:#B9C4D2}
.paper .steps li{border-color:var(--paper-line)}
.paper .steps p{color:#4B5563}

/* An honest "not built yet" block. Better than a dead link or a fake page. */
.soon{border:1px dashed var(--navy-line);border-radius:3px;padding:1.4rem 1.6rem;
      margin:2rem 0;color:#9AA9BB;font-size:.95rem}
.soon b{color:#E6EAEF;display:block;margin-bottom:.4rem}
.paper .soon{border-color:var(--paper-line);color:#4B5563}
.paper .soon b{color:var(--ink)}

/* ── The intake conversation ────────────────────────────────────────────────
   Anchored bottom-right on every page. Brass, because it is the primary action
   on a site whose only other call to action is an empty membership anchor. */
.ask-open{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:40;
  min-height:54px;padding:14px 22px;border:none;border-radius:2px;cursor:pointer;
  background:var(--brass);color:var(--navy-deep);font-family:var(--sans);font-weight:600;
  font-size:.95rem;letter-spacing:.01em;box-shadow:0 8px 28px rgba(3,10,20,.5)}
.ask-open:hover{background:var(--brass-bright)}
.chat{position:fixed;right:0;bottom:0;z-index:50;width:min(430px,100vw);
  max-height:min(84vh,680px);display:flex;flex-direction:column;
  background:var(--navy-panel);border:1px solid var(--navy-line);
  border-radius:3px 3px 0 0;box-shadow:0 -14px 48px rgba(3,10,20,.6)}
@media(min-width:540px){.chat{right:20px;bottom:20px;border-radius:3px}}
.chat__head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.95rem 1.1rem;border-bottom:1px solid var(--navy-line);color:#E6EAEF}
.chat__head b{font-family:var(--display);font-size:1.15rem;font-weight:500}
.chat__head span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-bright);margin-top:.15rem}
.chat__x{background:none;border:none;color:#8FA0B4;font-size:1.6rem;line-height:1;cursor:pointer;
  padding:.2rem .5rem;min-height:44px;min-width:44px}
.chat__log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.8rem}
.chat__hello{color:#9AA9BB;font-size:.9rem;line-height:1.6}
.chat__msg{max-width:88%;padding:.7rem .95rem;font-size:.95rem;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere;border-radius:3px}
.chat__msg--you{align-self:flex-end;background:var(--brass);color:var(--navy-deep);font-weight:500}
.chat__msg--bot{align-self:flex-start;background:#132C4F;color:#DDE5EF;
  border-left:2px solid var(--brass)}
.chat__foot{padding:.85rem 1.1rem;border-top:1px solid var(--navy-line)}
.chat__foot textarea{width:100%;min-height:56px;background:var(--navy-deep);
  border:1px solid var(--navy-line);color:#E6EAEF;padding:.65rem .8rem;border-radius:2px;
  font:inherit;font-size:16px;resize:vertical}
.chat__foot button{width:100%;margin-top:.6rem;background:var(--brass);color:var(--navy-deep);
  border:none;padding:.7rem;border-radius:2px;font:inherit;font-weight:600;cursor:pointer}
.chat__foot button:disabled{opacity:.5;cursor:default}
.chat__note{color:#6E7F94;font-size:.68rem;margin-top:.6rem;line-height:1.5}

/* `.masthead-shot` lived here — the boxed version of the picture a visitor meets
   first. It is now `.masthead`, full-bleed, up with the rest of the hero. The
   note worth keeping from it: the logo used to sit on the page TWICE, once in the
   nav and again beneath it. The nav keeps the mark; the band keeps the
   photograph; neither repeats the other. */

/* A card that is a link. Same frame as a static card — a reader should not have to
   discover which ones are clickable by hovering over all of them. */
.card--link{display:block;text-decoration:none;color:inherit;
            transition:border-color .18s ease,transform .18s ease}
.card--link:hover,.card--link:focus-visible{border-color:var(--brass);transform:translateY(-2px)}
.card--link h3{color:var(--brass-bright)}

/* The sourcing note beside a statement on an aircraft page: where it came from, or that we
   do not hold it. It is set quieter than the claim ON PURPOSE — it qualifies the claim, it
   is not a second claim. */
.plain .note{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
             font-style:normal;color:var(--ink-soft);margin-top:.3rem}
.navy .plain .note{color:#8FA0B4}

/* ── THE QUESTIONNAIRE'S OPENING SECTION ─────────────────────────────────────
   Operator, 2026-09-06: "the questions should be right at the top of the page and
   a person shouldn't need to scroll down to see them." So this section gives up
   the standard top padding — the page header above it is already short, and the
   first question has to be on the first screen. */
.quiz-open{padding-top:clamp(1.6rem,3vw,2.4rem)}
.quiz-open .quiz{margin-top:0}
.q-first legend{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.1rem);
                text-transform:none;letter-spacing:0;color:var(--ink)}

/* The choice cards. A radio that everyone can answer, laid out so the person who has
   never flown meets a question about their AMBITION rather than eight empty hour boxes. */
.quiz__choices{display:grid;gap:.7rem;margin-top:1.4rem;
               grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.quiz__choices label{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  border:1px solid var(--paper-line);border-radius:3px;padding:.85rem 1rem;background:#FFF;
  font-family:var(--body);text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease}
.quiz__choices label:hover{border-color:var(--brass)}
.quiz__choices input{margin:.25rem 0 0;accent-color:var(--brass);flex:0 0 auto}
.quiz__choices span{display:block;line-height:1.45}
.quiz__choices b{display:block;font-weight:600;margin-bottom:.15rem}
.quiz__choices span{color:var(--ink-soft);font-size:.88rem}
.quiz__choices b{color:var(--ink);font-size:1rem}
.quiz__choices label:has(input:checked){border-color:var(--brass);
  box-shadow:0 0 0 2px rgba(184,137,43,.18)}
.quiz__choices--tight label{padding:.7rem .9rem}

/* ── THE ACCORDIONS ──────────────────────────────────────────────────────────
   Operator: "we might want to create accordions in [the] areas so if it isn't a
   section the person knows how to answer they can click that box and it closes the
   accordion up."
   `<details>` rather than a JS widget: it opens and closes with no script at all,
   it is keyboard-operable for free, and a browser find-in-page can still see inside
   it. The only JavaScript is the skip box, which has to clear the fields too. */
details.q{border-top:1px solid var(--paper-line);margin:0}
details.q summary{cursor:pointer;list-style:none;padding:1.2rem 0;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";margin-left:auto;font-size:1.1rem;line-height:1;
  color:var(--ink-soft);font-family:var(--body)}
details.q[open] summary::after{content:"–"}
details.q summary:hover{color:var(--brass-bright)}
.q__hint{font-family:var(--body);font-size:.85rem;letter-spacing:0;text-transform:none;
         color:var(--ink-soft)}
.q__body{padding:0 0 1.8rem}
.q__skip{display:flex!important;align-items:center;gap:.55rem;margin:0 0 1.1rem;
  font-family:var(--body)!important;font-size:.92rem!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--ink-soft)!important;cursor:pointer}
.q__skip input{width:1.05rem;height:1.05rem;margin:0;accent-color:var(--brass)}
/* A skipped section says so on its own summary — a collapsed section and a skipped one
   look identical otherwise, and the person cannot tell which they did. */
details.q--skipped summary{color:var(--ink-soft);opacity:.75}
details.q--skipped summary::before{content:"skipped · ";font-size:.7rem;color:var(--ink-soft)}

/* /start-here only. The header is a question, not a headline, and every pixel it spends is a
   pixel the first answer is pushed below. Measured: this brings the ninth choice card above a
   900px fold. */
.pagehead--tight h1{font-size:clamp(1.9rem,4vw,2.7rem);margin-top:clamp(1.2rem,3vw,2rem)}
.pagehead--tight > .wrap{padding-bottom:clamp(1.4rem,3vw,2.2rem)}
.pagehead--tight .lede{margin-top:1rem}

/* Operator, 2026-09-06: "this section should be right next to the headline that is above it so
   that it tightens up the top of the page even more and gets the person right to the questions."
   Two columns instead of a stack. Bottom-aligned so the lede's last line sits on the headline's
   baseline rather than floating in the middle of it. */
.pagehead--tight .pagehead__row{display:grid;gap:clamp(1.2rem,4vw,3rem);align-items:end;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.pagehead--tight .pagehead__row h1{max-width:14ch;margin-top:clamp(1rem,2.4vw,1.6rem)}
.pagehead--tight .pagehead__row .lede{margin:0 0 .35rem;max-width:46ch}
/* Under ~52rem two columns would be two very narrow ones. Back to the stack. */
@media (max-width:52rem){
  .pagehead--tight .pagehead__row{grid-template-columns:1fr;gap:.9rem}
  .pagehead--tight .pagehead__row h1{max-width:none}
}

/* ── THE FOOTER ──────────────────────────────────────────────────────────────
   Operator, 2026-09-06: "I just saw there is no footer to the website." There was
   one — two lines of small print — which is the same as not having one: a person
   reaching the end of a page found nothing to do and nowhere to go. Three columns,
   a way to contact us, and the funding line that the whole product rests on.
   "All the links don't need to be there": five, not eleven. */
.foot{display:grid;gap:2.2rem clamp(2rem,5vw,4rem);padding:0 0 2.6rem;
      grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.foot__mark img{height:2.4rem;width:auto;display:block;margin-bottom:1rem}
.foot p{margin:0 0 .7rem;font-size:.85rem;line-height:1.6;max-width:38ch}
.foot__pledge{font-family:var(--display);font-size:1.05rem;color:#B9C4D2;
              border-left:2px solid var(--brass);padding-left:.9rem;margin-top:1.1rem}
.foot span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
           text-transform:uppercase;color:var(--brass);margin-bottom:.9rem}
.foot__links{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.foot__links a,.foot__contact a{color:#B9C4D2;text-decoration:none;font-size:.9rem;
  border-bottom:1px solid transparent}
.foot__links a:hover,.foot__links a:focus-visible,
.foot__contact a:hover,.foot__contact a:focus-visible{color:#E6EAEF;border-color:var(--brass)}
footer .footrow{border-top:1px solid var(--navy-line);padding-top:1.4rem;font-size:.78rem}