/* ============================================================
   BreakOff — design language: "Descent"

   Palette is taken from a real jump rather than from dark-mode
   convention: deep blue at altitude, pale horizon, cloud, then
   warm earth at landing.

   The site is HYBRID, and the split is meaningful:
     dark  = in the air   (hero, the jump, the Watch — a dark UI)
     light = on the ground (logbook, gear, stats, pricing — a light UI)
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* altitude */
  --navy-900:#04121F;
  --navy-800:#071A2B;
  --navy-700:#0C2537;
  --navy-600:#143349;
  --navy-500:#1D4463;

  /* horizon + ground */
  --horizon:#7FB2D4;
  --horizon-dim:#4E7E9E;
  --bone:#F4F1EA;
  --bone-2:#EAE5DA;
  --bone-3:#DED7C8;

  /* ink — muted values are set for WCAG AA (4.5:1) against the WORST
     background they sit on, not the best. --ink-3 is checked against
     bone-2 (#EAE5DA), the darker of the two light surfaces. */
  --ink:#0B1720;        /* 16.1:1 on bone */
  --ink-2:#41535F;      /*  7.1:1 on bone */
  --ink-3:#5B6971;      /*  4.5:1 on bone-2, 5.0:1 on bone */

  /* on dark — --pale-3 checked against navy-800, the lighter surface */
  --pale:#EAF2F7;       /* 15.6:1 on navy-800 */
  --pale-2:#9FB6C4;     /*  8.4:1 on navy-800 */
  --pale-3:#6A8596;     /*  4.5:1 on navy-800, 4.9:1 on navy-900 */

  /* signal — orange is the primary action colour.
     --orange is a FILL colour: at 2.8:1 on bone it must never be used for
     text on a light surface. --orange-ink is the text-safe variant (4.5:1). */
  --orange:#FF5A1F;
  --orange-ink:#C03300;
  --orange-dark:#C93A0B;
  --orange-soft:rgba(255,90,31,.12);
  --ochre:#E0A32E;
  --violet:#8B7DD8;
  --red:#E5484D;
  /* green is now a STATUS accent only (recorded / saved / verified),
     tying back to the app icon without owning the identity.
     --green is a FILL/dark-surface colour (2.3:1 on bone — never text on light);
     --green-ink is the text-safe variant for light surfaces. */
  --green:#12B76A;
  --green-ink:#0C7645;

  /* rules */
  --rule-dark:rgba(234,242,247,.14);
  --rule-dark-2:rgba(234,242,247,.28);
  --rule-light:rgba(11,23,32,.14);
  --rule-light-2:rgba(11,23,32,.26);

  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  /* Vertical rhythm trimmed ~20% from the first pass — the homepage read
     longer than the story needed, especially on a phone. */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.4rem; --s5:3.8rem; --s6:5.4rem;
  --maxw:1240px;
  --nav-h:62px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- surfaces ----------
   Every section declares which world it belongs to. All component
   colours below resolve through these variables, so one class flips
   an entire section between the air and the ground.                */
.air{
  --bg:var(--navy-800);
  --fg:var(--pale);
  --fg-2:var(--pale-2);
  --fg-3:var(--pale-3);
  --rule:var(--rule-dark);
  --rule-2:var(--rule-dark-2);
  --panel:rgba(234,242,247,.045);
  background:var(--bg);color:var(--fg);
}
.air-deep{--bg:var(--navy-900)}
.ground{
  --bg:var(--bone);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --fg-3:var(--ink-3);
  --rule:var(--rule-light);
  --rule-2:var(--rule-light-2);
  --panel:rgba(11,23,32,.035);
  background:var(--bg);color:var(--fg);
}
.ground-warm{--bg:var(--bone-2)}

/* the horizon: a real band where the air becomes the ground.
   Needs its own height — at height:0 it collapses into a hard cut. */
.horizon-edge{
  height:clamp(90px,13vw,170px);
  background:linear-gradient(180deg,
    var(--navy-900) 0%,
    var(--navy-500) 34%,
    rgba(127,178,212,.62) 66%,
    var(--bone-2) 88%,
    var(--bone) 100%);
}

/* ---------- layout ---------- */
.wrap{width:min(var(--maxw),calc(100% - 2.5rem));margin-inline:auto}
.wrap-narrow{width:min(780px,calc(100% - 2.5rem));margin-inline:auto}
section{padding:var(--s6) 0;position:relative;scroll-margin-top:calc(var(--nav-h) + 10px)}
@media(max-width:760px){section{padding:var(--s4) 0}body{font-size:16px}}

/* ---------- sticky mobile CTA ----------
   The homepage is long and "Download free" is otherwise buried in the
   burger menu. This appears once the visitor has left the hero and is
   hidden again at the footer so it never covers the real CTA.        */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:none;align-items:center;gap:.8rem;
  padding:.7rem clamp(.9rem,4vw,1.2rem);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  background:rgba(4,18,31,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--rule-dark-2);
  transform:translateY(110%);transition:transform .3s var(--ease);
}
.sticky-cta.visible{transform:none}
.sticky-cta-text{flex:1;min-width:0}
.sticky-cta-text b{
  display:block;color:var(--pale);font-size:.88rem;
  font-variation-settings:'wdth' 100,'wght' 650;line-height:1.2;
}
.sticky-cta-text span{
  font-family:var(--mono);font-size:.54rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--pale-3);
}
.sticky-cta .btn{flex-shrink:0}
@media(max-width:760px){.sticky-cta{display:flex}}
@media(prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* ---------- type ----------
   Archivo is a variable face; headlines run wide and heavy for a
   signage / instrument-panel feel, never italic, never a serif.   */
.display{
  font-family:var(--sans);
  font-variation-settings:'wdth' 112,'wght' 780;
  font-size:clamp(2.3rem,5.4vw,4.3rem);
  line-height:.98;letter-spacing:-.025em;
  color:var(--fg);text-wrap:balance;
  margin-bottom:1rem;
}
/* the light-surface accent uses the text-safe orange: the fill orange is
   2.8:1 on bone, which fails even the large-text threshold */
.display em{font-style:normal;color:var(--orange-ink)}
.air .display em{color:var(--ochre)}
.display-sm{font-size:clamp(1.8rem,3.4vw,2.7rem);font-variation-settings:'wdth' 108,'wght' 760}
.display-xl{font-size:clamp(2.8rem,7vw,5.6rem)}

h3{font-variation-settings:'wdth' 100,'wght' 650;letter-spacing:-.01em}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:1.1rem;
}
.air .eyebrow{color:var(--ochre)}
.eyebrow::before{content:"";width:20px;height:2px;background:currentColor}
.eyebrow-plain::before{display:none}

.lede{
  font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.58;
  color:var(--fg-2);max-width:62ch;
}
.lede strong,.prose strong{color:var(--fg);font-variation-settings:'wdth' 100,'wght' 650}

.prose p{margin-bottom:1.1rem;color:var(--fg-2);max-width:70ch}
.prose h3{font-size:1.15rem;color:var(--fg);margin:2.3rem 0 .7rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.1rem;color:var(--fg-2)}
.prose li{margin-bottom:.5rem;padding-left:.3rem}
.prose li::marker{color:var(--orange-ink)}
.prose a,.link{color:var(--orange-ink);border-bottom:1px solid currentColor;padding-bottom:1px}
.air .prose a,.air .link{color:var(--ochre)}

.mono{font-family:var(--mono)}
/* tabular figures everywhere numbers matter */
.num,.stat-v,.price-amt,.replay-alt{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--mono);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.95rem 1.6rem;border-radius:2px;
  transition:transform .18s var(--ease),background .18s,color .18s,border-color .18s;
  white-space:nowrap;border:1px solid transparent;
}
.btn-primary{background:var(--orange);color:var(--navy-900)}
.btn-primary:hover{background:var(--orange-dark);color:#fff;transform:translateY(-2px)}
.btn-ghost{border-color:var(--rule-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg);background:var(--panel)}
.btn-sm{padding:.62rem 1.05rem;font-size:.64rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--s3)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-inline:clamp(1rem,3.5vw,2.2rem);
  background:rgba(7,26,43,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule-dark);
}
.nav-brand{
  display:flex;align-items:center;gap:.55rem;color:var(--pale);
  font-family:var(--mono);font-weight:700;font-size:.86rem;letter-spacing:.1em;
}
.nav-brand img{width:26px;height:26px;border-radius:5px}
.nav-links{display:flex;align-items:center;gap:clamp(.6rem,1.3vw,1.3rem)}
.nav-links a{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pale-2);transition:color .18s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ochre)}
.nav-links a.btn-primary{color:var(--navy-900)}
.nav-links a.btn-primary:hover{color:#fff}
.nav-links a.btn-ghost{color:var(--pale);border-color:var(--rule-dark-2)}
.nav-burger{display:none;width:38px;height:38px;flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:81}
.nav-burger span{display:block;width:21px;height:2px;background:var(--ochre);transition:transform .22s var(--ease),opacity .16s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  display:none;position:fixed;inset:0;z-index:79;background:var(--navy-900);
  padding:calc(var(--nav-h) + 1.6rem) 1.7rem 2rem;flex-direction:column;gap:0;overflow-y:auto;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  font-family:var(--mono);font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pale);border-bottom:1px solid var(--rule-dark);padding:1.05rem 0;
}
.mobile-menu a.btn-primary{color:var(--navy-900);border-bottom:0;margin-top:1.2rem;justify-content:center}
body.nav-open{overflow:hidden}
@media(max-width:960px){.nav-links{display:none}.nav-burger{display:flex}}

/* ---------- descent bar ----------
   A thin altitude readout pinned under the nav. Replaces the old
   floating side rail: less decoration, more instrument.           */
.descent{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:70;height:26px;
  display:flex;align-items:center;gap:.8rem;
  padding-inline:clamp(1rem,3.5vw,2.2rem);
  background:rgba(4,18,31,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-dark);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pale-3);
  opacity:0;transform:translateY(-100%);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  pointer-events:none;
}
.descent.visible{opacity:1;transform:none}
.descent-phase{color:var(--ochre);min-width:74px}
.descent-track{flex:1;height:2px;background:var(--rule-dark);position:relative;overflow:hidden}
.descent-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ochre);transition:width .15s linear}
.descent-alt{color:var(--pale);min-width:76px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:760px){.descent{display:none}}

/* ---------- section marker ----------
   Oversized tabular numeral + rule. Replaces the outlined ghost number. */
.chapter{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;
  margin-bottom:1.6rem;
}
.chapter-num{
  font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  color:var(--bg);background:var(--accent,var(--orange));
  padding:.34rem .6rem;border-radius:2px;
}
.air .chapter-num{color:var(--navy-900)}
.chapter-meta{display:flex;align-items:baseline;gap:.8rem;border-top:1px solid var(--rule);padding-top:.55rem}
.chapter-meta b{
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg);
}
.chapter-meta small{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.acc-orange{--accent:var(--orange)}
.acc-ochre{--accent:var(--ochre)}
.acc-horizon{--accent:var(--horizon)}
.acc-violet{--accent:var(--violet)}
.acc-green{--accent:var(--green)}

/* ---------- data blocks ----------
   Hairline-ruled panels, not floating rounded cards.  */
.grid{display:grid;gap:0;border-top:1px solid var(--rule)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

.card{
  padding:1.8rem 1.6rem 1.8rem 0;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.grid-2 .card,.grid-3 .card,.grid-4 .card{padding-right:1.6rem}
.grid-2 .card:not(:nth-child(2n)),
.grid-3 .card:not(:nth-child(3n)),
.grid-4 .card:not(:nth-child(4n)){border-right:1px solid var(--rule);padding-left:1.6rem}
.grid-2 .card:nth-child(2n),.grid-3 .card:nth-child(3n),.grid-4 .card:nth-child(4n){padding-left:1.6rem}
.grid > .card:first-child{padding-left:0}
@media(max-width:620px){
  .grid .card{border-right:0!important;padding-left:0!important;padding-right:0}
}
.card h3{font-size:1.08rem;color:var(--fg);margin-bottom:.5rem}
.card p{color:var(--fg-2);font-size:.95rem;margin:0}
.card-accent::before{
  content:"";position:absolute;left:0;top:0;width:26px;height:2px;background:var(--accent,var(--orange));
}
@media(max-width:620px){.card-accent::before{width:20px}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split-narrow{grid-template-columns:1.05fr .95fr}
@media(max-width:900px){.split,.split-narrow{grid-template-columns:minmax(0,1fr);gap:2.4rem}}

/* ---------- telemetry strip ----------
   Instrument-panel readout used in the hero.  */
.telemetry{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule-dark-2);border-bottom:1px solid var(--rule-dark-2);
}
@media(max-width:700px){.telemetry{grid-template-columns:repeat(2,minmax(0,1fr))}}
.telemetry div{padding:.9rem 1rem .9rem 0}
.telemetry div + div{border-left:1px solid var(--rule-dark);padding-left:1rem}
@media(max-width:700px){
  .telemetry div:nth-child(odd){border-left:0;padding-left:0}
  .telemetry div:nth-child(-n+2){border-bottom:1px solid var(--rule-dark)}
}
.telemetry dt{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pale-3);margin-bottom:.3rem;
}
.telemetry dd{
  font-family:var(--mono);font-weight:700;font-size:clamp(.95rem,1.6vw,1.2rem);
  color:var(--pale);font-variant-numeric:tabular-nums;
}
.telemetry dd span{font-size:.62em;color:var(--pale-3);margin-left:.2em}

/* ---------- stats ---------- */
.stats{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3rem)}
.stat-v{font-family:var(--mono);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);color:var(--fg);letter-spacing:-.02em}
.stat-v span{font-size:.55em;color:var(--fg-3);margin-left:.15em}
.stat-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3);margin-top:.25rem}

/* ---------- devices ---------- */
.phone{
  position:relative;width:100%;max-width:282px;margin-inline:auto;
  border-radius:36px;padding:8px;background:#0B1720;
  box-shadow:0 26px 60px rgba(4,18,31,.35),0 0 0 1px rgba(11,23,32,.18);
}
.air .phone{box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(234,242,247,.14)}
.phone img{border-radius:28px;width:100%}
.phone::after{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:72px;height:19px;background:#0B1720;border-radius:11px}
.watch{
  position:relative;width:100%;max-width:180px;margin-inline:auto;
  border-radius:42px;padding:8px;background:#161C21;
  box-shadow:0 20px 44px rgba(0,0,0,.5),0 0 0 1px rgba(234,242,247,.16);
}
.watch img{border-radius:34px;width:100%;background:#000}
.device-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.2rem,3vw,2.2rem)}

/* ---------- safety ---------- */
.safety{border:1px solid var(--ochre);border-left-width:3px;padding:1.4rem 1.6rem;background:rgba(224,163,46,.08)}
.safety-head{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ochre);margin-bottom:.6rem;
}
.ground .safety-head{color:#9A6D0C}
.safety p{color:var(--fg-2);font-size:.95rem;margin:0}
.safety strong{color:var(--fg)}
.safety-slim{
  border-top:1px solid var(--rule);padding-top:1.1rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);
}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--rule-2)}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:.94rem}
th,td{padding:.95rem 1.1rem .95rem 0;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-3);font-weight:700;
}
td:first-child{color:var(--fg)}
.cell-yes{color:var(--green-ink);font-family:var(--mono);font-size:.74rem;font-weight:700}
.cell-no{color:var(--fg-3);font-family:var(--mono);font-size:.74rem}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule-2)}
@media(max-width:760px){.price-grid{grid-template-columns:minmax(0,1fr)}}
.price-card{padding:2.2rem 2rem 2.2rem 0;display:flex;flex-direction:column;position:relative;border-bottom:1px solid var(--rule)}
.price-card:first-child{border-right:1px solid var(--rule)}
@media(max-width:760px){.price-card{border-right:0!important;padding-right:0}}
.price-card.featured{padding-left:2rem;background:var(--panel)}
@media(max-width:760px){.price-card.featured{padding-left:1.4rem}}
.price-tag{
  position:absolute;top:1.3rem;right:0;
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--orange);color:#fff;padding:.3rem .6rem;border-radius:2px;
}
.price-name{font-family:var(--mono);font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--fg-3);margin-bottom:1rem}
.price-amt{font-family:var(--sans);font-variation-settings:'wdth' 108,'wght' 780;font-size:3rem;color:var(--fg);letter-spacing:-.03em;line-height:1}
.price-amt small{font-family:var(--mono);font-size:.9rem;color:var(--fg-3);font-weight:400;letter-spacing:0}
.price-note{font-size:.86rem;color:var(--orange-ink);margin-top:.45rem;font-family:var(--mono)}
.price-list{list-style:none;margin:1.5rem 0;display:flex;flex-direction:column;gap:.6rem;flex:1}
.price-list li{position:relative;padding-left:1.4rem;color:var(--fg-2);font-size:.94rem}
.price-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--green)}
.price-list li.muted{color:var(--fg-3)}
.price-list li.muted::before{background:var(--fg-3);opacity:.5}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.2rem 0;cursor:pointer;list-style:none;
  font-size:1.02rem;font-variation-settings:'wdth' 100,'wght' 600;color:var(--fg);transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange-ink)}
.faq summary::after{
  content:"";flex-shrink:0;width:11px;height:11px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg) translateY(-2px);transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq-body{padding:0 0 1.3rem;color:var(--fg-2);max-width:72ch}
.faq-body p+p{margin-top:.75rem}

/* ---------- footer ---------- */
.footer{background:var(--navy-900);color:var(--pale);padding:var(--s5) 0 2rem;--fg:var(--pale);--fg-2:var(--pale-2);--fg-3:var(--pale-3);--rule:var(--rule-dark)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem;margin-bottom:2.8rem}
@media(max-width:820px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
@media(max-width:480px){.footer-top{grid-template-columns:minmax(0,1fr)}}
.footer h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;color:var(--pale-3);margin-bottom:.9rem;font-weight:700}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer ul a{color:var(--pale-2);font-size:.9rem;transition:color .18s}
.footer ul a:hover{color:var(--ochre)}
.footer-brand p{color:var(--pale-3);font-size:.88rem;margin-top:.7rem;max-width:34ch}
.footer-base{
  border-top:1px solid var(--rule-dark);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--pale-3);
}
.footer-base a:hover{color:var(--ochre)}

/* ---------- endorsement band ----------
   Shared by index.html and about.html. Lives here rather than in a page's
   inline <style> so the two can never drift apart again.               */
.endorse{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.8rem,4.5vw,4rem);align-items:center}
@media(max-width:860px){.endorse{grid-template-columns:minmax(0,1fr);gap:2rem}}
.endorse-photo{position:relative}
.endorse-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%}
.endorse-badge{
  position:absolute;left:0;bottom:0;background:var(--orange);color:#fff;
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:.5rem .8rem;
}
.endorse-quote{
  font-variation-settings:'wdth' 106,'wght' 700;
  font-size:clamp(1.45rem,2.9vw,2.25rem);line-height:1.16;letter-spacing:-.022em;color:var(--fg);
}
.endorse-name{
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--rule);
  font-variation-settings:'wdth' 100,'wght' 700;font-size:1.12rem;color:var(--fg);
}
.endorse-role{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin-top:.3rem}
.endorse-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.endorse-chips span{
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-2);border:1px solid var(--rule-2);padding:.35rem .7rem;
}
.endorse-chips span.hero-chip{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.air .endorse-chips span.hero-chip{background:var(--pale);color:var(--navy-900);border-color:var(--pale)}

/* ---------- section photography ----------
   An <img>, not a CSS background: AVIF paints reliably in <picture>
   but can silently fail to render as a CSS background in some engines. */
.section-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;user-select:none}
.section-veil{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- reveal ---------- */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- helpers ---------- */
.center{text-align:center;margin-inline:auto}
.center .lede{margin-inline:auto}
.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}
.mb3{margin-bottom:var(--s3)}.mb4{margin-bottom:var(--s4)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hairline{height:1px;background:var(--rule);border:0}