/* AIR design system for dappasol.com. Monochrome at rest, coral only
   under your hands. Motion: transform, opacity, clip-path, background-size.
   Nothing animates at rest. Budget 40KB, paired with air.js (14KB). */

/* 1. FONTS. Hanken Grotesk variable, latin subset, self hosted, weight
   axis 300 to 800. Italic is a separate file, fetched only if painted. */
@font-face {
  font-family: 'Hanken Grotesk Var';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/hanken-grotesk-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk Var';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/hanken-grotesk-latin-italic-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. TOKENS */
.air {
  /* colour, canonical, do not invent new values */
  --bg: #fcfcfb;
  --ink: #1c1c1c;        /* 16.6:1 on bg */
  --dim: #63635f;        /* 5.88:1 on bg, secondary text only, 16px and up */
  --line: #e4e4e0;
  --coral: #ff5a26;      /* surfaces and strokes only, never text on bg */
  --coral-ink: #c8400a;  /* 4.88:1 on bg, the text safe coral */
  --prose: #33332f;      /* 12.4:1, long form body ink, softer than --ink */
  --tint: #f4f4f1;       /* hover ground for rows, derived from line */

  /* motion, MOTION-SPEC L0 */
  --t-fast: 160ms;
  --t-med: 260ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);

  /* layout */
  --shell: 1560px;
  --gutter: clamp(20px, 4vw, 72px);
  --nav-h: 76px;
  --measure: 66ch;

  /* type scale, body 16 to 18, display capped at 6rem */
  --fs-body: clamp(1rem, .93rem + .31vw, 1.125rem);
  --fs-small: clamp(.875rem, .85rem + .1vw, .9375rem);
  --fs-lede: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem);
  --fs-d1: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  --fs-d2: clamp(2.125rem, 1.5rem + 2.7vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.05rem + 1.4vw, 2.25rem);
  --fs-h4: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);

  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk Var', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the spring is only used where linear() is understood, otherwise expo out */
@supports (transition-timing-function: linear(0, 1)) {
  .air {
    --ease-spring: linear(0, .1158 6.25%, .3389 12.5%, .5596 18.75%, .735 25%, .8574 31.25%, .9342 37.5%, .9776 43.75%, .9991 50%, 1.0077 56.25%, 1.0094 62.5%, 1.0058 75%, 1.0019 87.5%, 1);
  }
}

/* 3. MINIMAL RESET */
*, *::before, *::after { box-sizing: border-box; }
:where(.air) :where(h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
:where(.air) :where(ul, ol) { padding-left: 1.2em; }
:where(.air) :where(img, svg, video, canvas) { max-width: 100%; height: auto; display: block; }
:where(.air) a { color: inherit; text-decoration: none; }
:where(.air) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.air) button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.air) table { border-collapse: collapse; width: 100%; }
:where(.air) hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.air ::selection { background: var(--coral); color: var(--ink); }
.air :focus-visible {
  outline: 2px solid var(--coral-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
html { scroll-behavior: smooth; }
.air :is(h1, h2, h3, h4, [id]) { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* 4. LAYOUT PRIMITIVES */
.air-shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.air-section { padding-block: clamp(56px, 9vh, 120px); }
.air-section + .air-section { border-top: 1px solid var(--line); }
.air-measure { max-width: var(--measure); }
.air-lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--dim); max-width: 56ch; }
.air-eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); margin-bottom: .75rem;
}

/* display type. letter-spacing never tighter than -.03em */
.air-d1 { font-size: var(--fs-d1); font-weight: 300; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.air-d2 { font-size: var(--fs-d2); font-weight: 300; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.air-h2 { font-size: var(--fs-h2); font-weight: 300; line-height: 1.1;  letter-spacing: -.02em;  text-wrap: balance; }
.air-h3 { font-size: var(--fs-h3); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; }
.air-h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.air :is(.air-d1, .air-d2, .air-h2, .air-h3) b,
.air :is(.air-d1, .air-d2, .air-h2, .air-h3) strong { font-weight: 800; }

/* the marginalia grid: col 1 free, col 2 the 66ch measure, col 3 the notes rail (now the M1 spine as well), col 4 free. */
.air-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 66ch) minmax(230px, 300px) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  padding: clamp(40px, 7vh, 88px) var(--gutter) clamp(48px, 7vh, 80px);
  max-width: var(--shell);
  margin-inline: auto;
}
.air-article > * { grid-column: 2; }
.air-article > .air-note { grid-column: 3; align-self: start; }
.air-article > .air-wide { grid-column: 2 / 4; }

@media (max-width: 1080px) {
  .air-article { display: block; max-width: 72ch; }
  .air-article > .air-note { margin: 4px 0 28px; }
}

/* 5. MOTION FOUNDATION */
/* reveals: content is fully visible without JS, the .js class opts in */
.js .air-rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.js .air-rv.in { opacity: 1; transform: none; }
/* hidden tab hardening: nothing is ever gated on a transition */
.js.air-instant .air-rv,
.js.air-instant .air-note,
.js.air-instant .air-verdict::before { transition: none !important; transition-delay: 0ms !important; }

/* failsafe: if the head snippet ran but air.js never booted, nothing stays hidden. air.js sets data-air on <html> as it executes. */
.js.air-noscript :is(.air-rv, .air-w-i, .air-note > *) { opacity: 1 !important; transform: none !important; }
.js.air-noscript .air-note::before { transform: scaleX(1) !important; }
.js.air-noscript .air-verdict::before { clip-path: none !important; }
.js.air-noscript .air-hl { background-size: 100% 3px !important; }

/* per word mask rise, grouped by measured line. L1 arrival */
.air-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.air-w-i {
  display: inline-block;
  transform: translateY(115%);
  transition: transform var(--t-slow) var(--ease-out);
}
.air-lines.in .air-w-i { transform: none; }

/* ink words, MOTION-SPEC L5: the one sanctioned effect that is not transform or opacity, because the weight axis is the point. */
.air-iw { transition: font-variation-settings 180ms linear; }

/* 6. NAV */
.air-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 0 0 6px 0;
}
.air-skip:focus { left: 0; }

.air-nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
}
.air-nav-bg {
  position: absolute; inset: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform-origin: top;
  transition: opacity var(--t-med) linear, transform var(--t-med) var(--ease-out);
  pointer-events: none;
}
.air-nav-in {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 100%;
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
  transition: transform var(--t-med) var(--ease-out);
}
/* Brand lockup: the wolf mark plus the wordmark. The mark is a CSS mask filled with
   currentColor, so it is ink at rest and coral under the pointer, obeying the one brand
   rule, and it costs a single cached request instead of inlining 2KB into every page.
   It replaces the coral full stop that stood in for the logo during the Air rollout. */
.air-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em;
}
.air-logo-mark {
  width: 1.28em; height: 1.28em; flex: none;
  background: var(--ink);
  -webkit-mask: url(/assets/air/wolf-mark.svg) center / contain no-repeat;
          mask: url(/assets/air/wolf-mark.svg) center / contain no-repeat;
  transition: background var(--t-fast) linear, transform var(--t-fast) var(--ease-out);
}
.air-logo:hover .air-logo-mark,
.air-logo:focus-visible .air-logo-mark { background: var(--coral); transform: scale(1.06); }
.air-navlinks { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.air-navlinks a {
  font-size: .875rem; font-weight: 500; color: var(--dim);
  padding-bottom: 3px; position: relative;
  background-image: linear-gradient(var(--coral), var(--coral));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
  transition: color var(--t-fast) linear, background-size var(--t-fast) var(--ease-out);
}
.air-navlinks a:hover { color: var(--ink); background-size: 100% 2px; }
.air-navlinks a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--ink);
}
@media (max-width: 700px) {
  .air-navlinks { gap: 14px; font-size: .8125rem; }
  .air-navlinks a.air-nav-hide { display: none; }
}

/* condensed state. air.js adds .air-scrolled where scroll driven
   animation is unavailable. Both paths move opacity and transform only. */
.air-scrolled .air-nav-bg { opacity: 1; transform: scaleY(.79); }
.air-scrolled .air-nav-in { transform: translateY(-8px); }

@supports (animation-timeline: scroll()) {
  .air-nav-bg {
    animation: airNavBg linear both;
    animation-timeline: scroll(root);
    animation-range: 0 110px;
  }
  .air-nav-in {
    animation: airNavIn linear both;
    animation-timeline: scroll(root);
    animation-range: 0 110px;
  }
}
@keyframes airNavBg { from { opacity: 0; transform: scaleY(1); } to { opacity: 1; transform: scaleY(.79); } }
@keyframes airNavIn { from { transform: none; } to { transform: translateY(-8px); } }
/* reduced motion keeps the solid header (legibility), opacity only */
@keyframes airNavBgFade { from { opacity: 0; } to { opacity: 1; } }

/* nav arrives last, 200ms after the headline starts */
.js .air-nav-in > * { animation: airFadeIn var(--t-med) var(--ease-out) 200ms both; }
@keyframes airFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 7. READING PROGRESS */
.air-prog {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80;
  background: transparent; pointer-events: none;
  animation: airProgIntro var(--t-slow) var(--ease-out) both;
}
.air-prog i {
  display: block; height: 100%; background: var(--coral);
  transform-origin: left; transform: scaleX(0);
}
@keyframes airProgIntro { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@supports (animation-timeline: scroll()) {
  .air-prog i {
    animation: airProgGrow linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes airProgGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 8. BUTTONS, MOTION-SPEC L3 */
.air-btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .9375rem; font-weight: 600; line-height: 1;
  padding: 15px 28px; border-radius: 999px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat; background-position: 0 50%; background-size: 0 100%;
  transition: background-size var(--t-fast) var(--ease-out),
              color var(--t-fast) linear,
              transform var(--t-med) var(--ease-spring);
}
.air-btn:hover { background-size: 100% 100%; color: var(--bg); }
.air-btn:active { transform: scale(.98); transition-duration: var(--t-fast); }
/* the one coral CTA per page. Coral only arrives under the pointer.
   The ground is --coral-ink, not --coral: white on --coral is 3.11:1
   and fails AA on the label, white on --coral-ink is 5.01:1. */
.air-btn.air-cta {
  background-image: linear-gradient(var(--coral-ink), var(--coral-ink));
}
.air-btn.air-cta:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--coral-ink); }
/* solid variant for a page's primary action */
.air-btn.air-solid {
  color: var(--bg); background-size: 100% 100%;
  background-image: linear-gradient(var(--ink), var(--ink));
}
.air-btn.air-solid:hover {
  background-image: linear-gradient(var(--coral-ink), var(--coral-ink));
  box-shadow: inset 0 0 0 1px var(--coral-ink);
}
.air-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* the giant contact line */
.air-hello { padding-block: clamp(64px, 12vh, 150px); }
.air-hello a.air-big {
  display: inline-block; position: relative;
  font-size: clamp(3rem, 7.5vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em;
}
.air-hello a.air-big::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 5px; width: 100%;
  background: var(--coral); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.air-hello a.air-big:hover::after,
.air-hello a.air-big:focus-visible::after { transform: scaleX(1); }
.air-hello p { color: var(--dim); margin-top: 24px; max-width: 50ch; }

/* 9. PROSE */
.air-prose { color: var(--prose); font-size: var(--fs-body); line-height: 1.7; }
.air-prose > * + * { margin-top: 1rem; }
.air-prose :is(h2, h3) { color: var(--ink); position: relative; }
.air-prose h2 { font-size: var(--fs-h3); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; margin-top: 2.4rem; }
.air-prose h3 { font-size: var(--fs-h4); font-weight: 700; margin-top: 2rem; }
.air-prose :is(h2, h3) b, .air-prose :is(h2, h3) strong { font-weight: 800; }
.air-prose strong { font-weight: 700; color: var(--ink); }
.air-prose li + li { margin-top: .4rem; }
.air-prose blockquote {
  border-top: 2px solid var(--ink); padding-top: 1rem;
  font-size: var(--fs-lede); color: var(--ink); max-width: 52ch;
}
.air-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em; background: var(--tint); padding: .1em .35em; border-radius: 3px;
}
/* not inside pre: dark prompt blocks set their own colors */
.air-prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; border-radius: 0; }

/* prose links: the coral marker draws left to right, exits to the right */
.air-prose a, .air-link {
  color: var(--ink); font-weight: 500;
  background-image: linear-gradient(var(--coral), var(--coral));
  background-repeat: no-repeat;
  background-position: 100% calc(100% - 1px);
  background-size: 0 3px;
  box-shadow: inset 0 -1px 0 0 var(--line);
  transition: background-size 180ms var(--ease-out), color var(--t-fast) linear;
}
.air-prose a:hover, .air-link:hover,
.air-prose a:focus-visible, .air-link:focus-visible {
  background-position: 0 calc(100% - 1px);
  background-size: 100% 3px;
}

/* key phrase highlight, drawn once by air.js when its paragraph is read */
.air-hl {
  background-image: linear-gradient(var(--coral), var(--coral));
  background-repeat: no-repeat; background-position: 0 97%; background-size: 0 3px;
  transition: background-size 300ms var(--ease-out);
  padding-bottom: 2px;
}
.air-hl.in { background-size: 100% 3px; }

/* heading anchor affordance, air.js injects the link when the heading has an id */
.air-anchor {
  position: absolute; left: -.85em; top: 0;
  color: var(--coral-ink); font-weight: 400; text-decoration: none;
  opacity: 0; transition: opacity var(--t-fast) linear;
}
.air-prose :is(h2, h3):hover .air-anchor,
.air-anchor:focus-visible { opacity: 1; }

/* article furniture */
.air-byline {
  font-size: .875rem; font-weight: 500; color: var(--dim);
  padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px;
}
.air-byline b { color: var(--ink); }

/* 10. MARGIN NOTES */
.air-note {
  font-size: .875rem; line-height: 1.6; color: var(--dim);
  padding-top: 12px; margin-top: 48px;
  position: relative;
}
.air-note b { color: var(--ink); font-weight: 700; }
.air-note::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
  background: var(--coral);
  transform: scaleX(0); transform-origin: left;
}
.js .air-note::before { transition: transform var(--t-med) var(--ease-out); }
.js .air-note > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease-out) 80ms, transform var(--t-med) var(--ease-out) 80ms;
}
.air-note.in::before { transform: scaleX(1); }
.js .air-note.in > * { opacity: 1; transform: none; }
@media (max-width: 1080px) {
  .air-note {
    border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 10px 10px; padding: 12px 16px 14px;
  }
}

/* 11. VERDICT BOX */
.air-verdict {
  position: relative; padding: 22px 26px; margin-block: 8px 36px;
  border-radius: 12px;
}
.air-verdict::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  pointer-events: none;
}
.js .air-verdict::before {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-slow) var(--ease-out);
}
.js .air-verdict.in::before { clip-path: inset(0); }
.air-verdict .air-verdict-t {
  font-size: .8125rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 10px;
}
.air-verdict p { font-size: 1.03125rem; line-height: 1.65; color: var(--ink); }

/* 12. GUIDE ROWS */
.air-rows { border-top: 1px solid var(--line); }
.air-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto 1.4rem;
  align-items: baseline; gap: 18px;
  padding: 22px 12px 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: transform var(--t-fast) var(--ease-out);
}
.air-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--coral); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-fast) var(--ease-out);
}
.air-row:hover, .air-row:focus-visible { transform: translateX(4px); }
.air-row:hover::before, .air-row:focus-visible::before { transform: scaleY(1); }
.air-row-n {
  font-size: .8125rem; font-weight: 600; color: var(--dim);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) linear;
}
.air-row:hover .air-row-n { color: var(--coral-ink); }
.air-row-t { font-size: clamp(1.0625rem, 1.6vw, 1.5rem); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.air-row-m { font-size: .875rem; color: var(--dim); white-space: nowrap; }
.air-row-a {
  font-size: 1.125rem; color: var(--dim); opacity: .55; justify-self: end;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) linear, color var(--t-fast) linear;
}
.air-row:hover .air-row-a { transform: translateX(6px); opacity: 1; color: var(--ink); }
@media (max-width: 640px) {
  .air-row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .air-row-m { grid-column: 2; white-space: normal; }
  .air-row-a { display: none; }
}

/* 13. WORK COVERS AND TILES */
.air-frame { overflow: hidden; border-radius: 4px; }
.air-frame > * { transition: transform var(--t-slow) var(--ease-out); }
a:hover > .air-frame > *, .air-frame:hover > * { transform: scale(1.02); }

.air-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.air-tile {
  aspect-ratio: 16 / 11; border-radius: 6px; overflow: hidden;
  display: grid; align-content: end; padding: 20px;
  transition: transform var(--t-slow) var(--ease-out);
}
.air-tile:hover { transform: translateY(-5px); }
.air-tile span { font-size: clamp(1.0625rem, 1.6vw, 1.5rem); font-weight: 800; line-height: 1.15; color: #fff; }
.air-tile em { font-style: normal; font-size: .8125rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.air-tile.air-punk  { background: linear-gradient(150deg, #2e3440 0%, #14181f 65%, #0b0e13 100%); }
.air-tile.air-henny { background: linear-gradient(150deg, #0f3a2a 0%, #092218 65%, #06170f 100%); }
.air-tile.air-axiom { background: linear-gradient(150deg, #3a2f16 0%, #221b0b 65%, #151006 100%); }
@media (max-width: 860px) { .air-tiles { grid-template-columns: 1fr; } }

/* 14. STAT COUNTERS */
.air-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.air-stat { border-top: 1px solid var(--line); padding-top: 16px; }
.air-stat-v {
  display: block;
  font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.air-stat-l { display: block; font-size: .9375rem; color: var(--dim); margin-top: 8px; max-width: 26ch; }
@media (max-width: 760px) { .air-stats { grid-template-columns: 1fr; } }

/* 15. COPY BUTTONS */
.air-copy {
  border-radius: 999px; padding: 9px 16px; white-space: nowrap;
  font-size: .78125rem; font-weight: 600; line-height: 1;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat; background-position: 0 50%; background-size: 0 100%;
  transition: background-size var(--t-fast) var(--ease-out),
              color var(--t-fast) linear,
              transform var(--t-med) var(--ease-spring);
}
.air-copy:hover { background-size: 100% 100%; color: var(--bg); }
.air-copy:active { transform: scale(.98); }
.air-copy.did {
  color: #fff; background-size: 100% 100%;
  background-image: linear-gradient(var(--coral-ink), var(--coral-ink));
  box-shadow: inset 0 0 0 1.5px var(--coral-ink);
  transform: translateY(-4px);
}

/* 16. FORMS */
.air-form { max-width: 46rem; }
.air-field { margin-bottom: 22px; }
.air-field label {
  display: block; font-size: .875rem; font-weight: 600; color: var(--ink); margin-bottom: 7px;
}
.air-field .air-hint { display: block; font-size: .8125rem; color: var(--dim); margin-top: 6px; }
.air-field :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], select, textarea) {
  width: 100%; background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 14px; font-size: 1rem; line-height: 1.5;
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.air-field textarea { min-height: 8.5rem; resize: vertical; }
.air-field :is(input, select, textarea)::placeholder { color: #9a9a94; }
.air-field :is(input, select, textarea):hover { border-color: #cfcfc9; }
.air-field :is(input, select, textarea):focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 90, 38, .18);
}
.air-field :is(input, select, textarea):focus-visible { outline: none; }
.air-field.air-invalid :is(input, select, textarea) { border-color: var(--coral-ink); }
.air-field .air-err { display: block; font-size: .8125rem; font-weight: 600; color: var(--coral-ink); margin-top: 6px; }
.air-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.air-check input { accent-color: var(--coral-ink); margin-top: .25em; }

/* 17. FINDER */
.air-finder input[type="search"], .air-finder input[type="text"] {
  width: 100%; max-width: 720px;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font-size: clamp(1.375rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.3;
  letter-spacing: -.015em; padding: 6px 2px 12px;
  transition: border-color var(--t-fast) linear;
}
.air-finder input::placeholder { color: #b8b8b2; }
.air-finder input:focus { outline: none; border-bottom-color: var(--coral); }
.air-finder input:focus-visible { outline: none; }
.air-fres { margin-top: 24px; }
.air-fres a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  transition: transform var(--t-fast) var(--ease-out);
}
.air-fres a:hover, .air-fres a:focus-visible { transform: translateX(6px); }
.air-fres .air-ft { font-size: clamp(1rem, 1.7vw, 1.375rem); line-height: 1.3; }
.air-fres a:hover .air-ft { font-weight: 700; }
.air-fres mark { background: transparent; color: var(--coral-ink); font-weight: 700; }
.air-fres .air-fc { margin-left: auto; font-size: .8125rem; color: var(--dim); white-space: nowrap; }
.air-fmeta { font-size: .875rem; color: var(--dim); margin-top: 16px; }
.air-fempty { font-size: 1.0625rem; color: var(--dim); padding: 24px 0; }
.js .air-finder [data-finder-fallback] { display: none; }
/* result rows enter with a short stagger, set inline by air.js */
.js .air-fres a { animation: airRowIn var(--t-med) var(--ease-out) both; }
@keyframes airRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 18. DECK (A/B candidate) */
.air-deck { max-width: 1180px; }
.air-deckbar { display: none; align-items: center; gap: 18px; margin-bottom: 16px; }
.air-deck.on .air-deckbar { display: flex; }
.air-deck-count { font-size: .9375rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 64px; }
.air-deck-count i { font-style: normal; color: var(--coral-ink); }
.air-deck-line { flex: 1; height: 2.5px; background: var(--line); border-radius: 2px; overflow: hidden; }
.air-deck-line i {
  display: block; height: 100%; width: 100%; background: var(--coral);
  transform-origin: left; transform: scaleX(.25);
  transition: transform var(--t-med) var(--ease-out);
}
.air-deck-nav { display: flex; gap: 8px; }
.air-deck-nav button {
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat; background-position: 50% 50%; background-size: 0 0;
  transition: background-size var(--t-fast) var(--ease-out), color var(--t-fast) linear, transform var(--t-med) var(--ease-spring);
}
.air-deck-nav button:hover { background-size: 100% 100%; color: var(--bg); }
.air-deck-nav button:active { transform: scale(.94); }
.air-deck-nav button[disabled] { opacity: .35; pointer-events: none; }
.air-deck-stage { border: 1px solid var(--line); border-radius: 14px; }
/* clip, not hidden, so tabbing to an off stage card cannot scroll the
   frame (hidden is the fallback where clip is unsupported). air.js also
   resyncs the deck on focusin and resets scrollLeft. */
.air-deck.on .air-deck-stage { overflow: hidden; overflow: clip; }
.air-deck-track { display: block; }
.air-deck.on .air-deck-track { display: flex; transition: transform var(--t-slow) var(--ease-out); }
.air-deck-card { padding: clamp(22px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.air-deck-card:last-child { border-bottom: 0; }
.air-deck.on .air-deck-card { flex: 0 0 100%; border-bottom: 0; min-height: 340px; }
.air-deck-card h3 { font-size: var(--fs-h4); font-weight: 800; margin-bottom: 14px; }
.air-deck-card p { color: var(--prose); font-size: .96875rem; line-height: 1.65; max-width: 58ch; }
.air-deck-card p + p { margin-top: 10px; }
.air-deck-card strong { font-weight: 700; color: var(--ink); }
.air-steal {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.air-steal p { flex: 1; }
.air-dhint { font-size: .78125rem; color: var(--dim); margin-top: 12px; }

/* 19. TABLES */
.air-table-wrap { overflow-x: auto; }
.air-table { font-size: .9375rem; line-height: 1.55; margin-block: 10px 32px; }
.air-table th {
  font-size: .8125rem; font-weight: 700; text-align: left;
  padding: 10px 16px 10px 0; border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.air-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.air-table tbody tr { transition: background-color var(--t-fast) linear; }
.air-table tbody tr:hover { background: var(--tint); }

/* 20. FOOTER */
.air-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px;
  padding: 30px 0 46px; border-top: 1px solid var(--line);
  font-size: .875rem; line-height: 1.7; color: var(--dim);
}
.air-foot a {
  color: var(--dim);
  box-shadow: inset 0 -1px 0 0 var(--line);
  background-image: linear-gradient(var(--coral), var(--coral));
  background-repeat: no-repeat; background-position: 100% 100%; background-size: 0 2px;
  transition: background-size 180ms var(--ease-out), color var(--t-fast) linear;
}
.air-foot a:hover { color: var(--ink); background-position: 0 100%; background-size: 100% 2px; }

/* 21. UTILITIES */
.air-dim { color: var(--dim); }
.air-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.air-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;
}
.air-rule { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 34px; }

/* 22. VIEW TRANSITIONS, MOTION-SPEC L2 */
@view-transition { navigation: auto; }
.air-nav { view-transition-name: air-nav; }
.air-foot { view-transition-name: air-foot; }
.air-main { view-transition-name: air-main; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--t-med, 260ms);
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-new(air-main) { animation: airMainIn var(--t-med, 260ms) cubic-bezier(.22, 1, .36, 1) both; }
@keyframes airMainIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 23. REDUCED MOTION. Entrances instant, hovers keep colour but lose
   translation and scale, progress still updates (information), ink and
   view transitions off. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  html { scroll-behavior: auto; }

  .js .air-rv,
  .js .air-rv.in { opacity: 1; transform: none; transition: opacity 120ms linear; }

  .air-w-i, .air-lines.in .air-w-i { transform: none; transition: none; }
  .air-iw { transition: none; font-variation-settings: normal; }

  .js .air-nav-in > * { animation: none; }
  /* the header still condenses, it is a legibility state, but nothing translates */
  .air-nav-bg { animation-name: airNavBgFade; transform: none; transition: opacity 120ms linear; }
  .air-nav-in { animation: none; transform: none; transition: none; }
  .air-scrolled .air-nav-bg { opacity: 1; transform: none; }
  .air-scrolled .air-nav-in { transform: none; }

  /* the progress hairline is information, it keeps working */
  .air-prog { animation: none; clip-path: none; }
  .air-prog i { transition: none; }

  .air-btn, .air-copy, .air-deck-nav button { transition: background-size 1ms linear, color 120ms linear; }
  .air-btn:active, .air-copy:active, .air-deck-nav button:active { transform: none; }
  .air-copy.did { transform: none; }

  .air-prose a, .air-link, .air-navlinks a, .air-foot a { transition: color 120ms linear; background-size: 0 3px; }
  .air-prose a:hover, .air-link:hover, .air-navlinks a:hover, .air-foot a:hover { color: var(--coral-ink); }
  .air-navlinks a:hover, .air-foot a:hover { background-size: 0 2px; }
  .air-prose a:hover, .air-link:hover { background-size: 0 3px; }

  .air-hl { transition: none; }
  .air-hl.in { background-size: 100% 3px; }

  .js .air-note::before, .js .air-note > * { transition: none; }
  .air-note.in::before { transform: scaleX(1); }
  .js .air-note > * { opacity: 1; transform: none; }

  .js .air-verdict::before { transition: none; clip-path: inset(0); }

  .air-row, .air-row::before, .air-row-a, .air-row-n { transition: color 120ms linear; }
  .air-row:hover, .air-row:focus-visible { transform: none; background: var(--tint); }
  .air-row:hover::before, .air-row:focus-visible::before { transform: scaleY(1); }
  .air-row:hover .air-row-a { transform: none; }

  .air-frame > *, a:hover > .air-frame > *, .air-frame:hover > * { transform: none; transition: none; }
  .air-tile, .air-tile:hover { transform: none; transition: none; }

  .air-hello a.air-big::after { transition: none; }

  .js .air-fres a, .air-fres a:hover, .air-fres a:focus-visible { transform: none; transition: none; animation: none; }

  .air-deck.on .air-deck-track { transition: none; }
  .air-deck-line i { transition: none; }

  .air-table tbody tr { transition: none; }
}

/* Fleet additions after the S1 gate: logo dot, FAQ, small-nav fix, Air restyles for the site.js magnet card and WhatsApp button. */

/* wordmark trailing full stop, coral only under your hands */


/* FAQ disclosure component (lifted from S1, now canonical) */
.air-faq details { border-top: 1px solid var(--line); }
.air-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.air-faq summary, .air-jump summary { list-style: none; cursor: pointer; position: relative; padding: 18px 34px 18px 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; transition: color var(--t-fast) linear; }
.air-faq summary::-webkit-details-marker, .air-jump summary::-webkit-details-marker { display: none; }
.air-faq summary::after, .air-jump summary::after { content: "+"; position: absolute; right: 4px; top: 15px; font-size: 1.375rem; font-weight: 300; line-height: 1; color: var(--dim); transition: transform var(--t-med) var(--ease-out), color var(--t-fast) linear; }
.air-faq summary:hover { color: var(--coral-ink); }
.air-faq details[open] summary::after, .air-jump[open] summary::after { transform: rotate(45deg); color: var(--coral-ink); }
.air-faq details > p { color: var(--prose); font-size: 1rem; line-height: 1.7; max-width: 68ch; padding: 0 0 22px; }

/* nav stays one line down to 390 */
@media (max-width: 430px) {
  .air-navlinks { gap: 10px; }
  .air-navlinks a { font-size: .75rem; }
}

/* site.js magnet card, restyled to Air (specificity beats the injected styles) */
.air .dsol-mag { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: none; }
.air .dsol-mag[data-place=popup] { box-shadow: 0 20px 60px rgba(0, 0, 0, .18); }
.air .dsol-eye { color: var(--dim); }
.air .dsol-h { color: var(--ink); }
.air .dsol-sub, .air .dsol-consent, .air .dsol-note { color: var(--dim); }
.air .dsol-open, .air .dsol-send { background: var(--ink); color: var(--bg); border-radius: 8px; transition: background var(--t-fast) linear; }
.air .dsol-open:hover, .air .dsol-send:hover { background: var(--coral-ink); }
.air .dsol-form input[type=email], .air .dsol-form input[type=text] { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.air .dsol-form input:focus { outline: 2px solid var(--coral); border-color: var(--coral); }
.air .dsol-err { color: var(--coral-ink); }

/* site.js WhatsApp button: ink at rest, WhatsApp green under your hands */
.air .wafab { background: #25D366; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.air .wafab:hover, .air .wafab:focus-visible { background: #1eb455; box-shadow: 0 6px 18px rgba(0, 0, 0, .24); }

@media (prefers-reduced-motion: reduce) {
  .air-faq summary::after { transition: none; }
  .air .wafab { transition: none; }
  .air-logo-mark { transition: none; }
  .air-logo:hover .air-logo-mark { transform: none; }
}

/* Fleet round 2, after the L gate: cascade fixes. The .air reset at
   (0,1,1) beat the kit's own rhythm rules. Same values, higher weight. */

body { margin: 0; }

.air .air-prose > * + p,
.air .air-prose > * + ul,
.air .air-prose > * + ol,
.air .air-prose > * + dl,
.air .air-prose > * + figure { margin-top: 1rem; }
.air .air-eyebrow { margin-bottom: .75rem; }

/* magnet buttons: the reset zeroed their padding too */
.air .dsol-open { padding: 12px 20px; font-size: 1rem; }
.air .dsol-send { padding: 11px 18px; font-size: 1rem; }
.air .dsol-x { font-size: 22px; }

/* a marginalia article with no margin notes centres its column */
@supports selector(:has(*)) {
  .air-article:not(:has(.air-note)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 66ch) minmax(0, 1fr);
  }
}

/* 24. STRUCTURE: REDESIGN-SPEC M1 to M4, plus the figure component.
   M1 gives the dead rail a job, M2 lifts numerals into the gutter, M3
   gives short bold labels a line, M4 kills the cream box. All four use
   markup the page already has: with JS off nothing hides, nothing moves. */

/* M1 spine, desktop: grid column 3, sticky across the article, air.js sets grid-row so the sticky area spans it. */
.air-article > .air-spine { grid-column: 3; position: sticky; top: calc(var(--nav-h) + 34px); align-self: start; margin-top: 4px; }
.air-spine ol, .air-jump ol { list-style: none; margin: 0; padding: 0; }
.air-spine ol { padding-left: 22px; }
.air-spine-link { display: block; padding: 7px 0; font-size: .8125rem; font-weight: 400; line-height: 1.4; color: var(--dim); transition: color var(--t-fast) linear; }
.air-spine-link.is-here { color: var(--ink); font-weight: 600; }
/* the hairline the list sits on, filling toward ink as you read */
.air-spine-rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.air-spine-rail b { display: block; height: 100%; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform var(--t-med) var(--ease-out); }
/* the only coral here, and it moves only because you scrolled */
.air-spine-mark { position: absolute; left: 0; top: 16px; width: 12px; height: 2px; background: var(--coral); transition: transform var(--t-med) var(--ease-out); }

/* under 1080px the grid is one column: the same links as a closed disclosure above the prose. Only one of the two shows. */
.air-jump { display: none; margin: 0 0 26px; border-block: 1px solid var(--line); }
.air-jump ol { padding-bottom: 14px; }
.air-jump .air-spine-link { padding: 6px 0; font-size: .9375rem; }
.air-spine-link:hover, .air-spine-link:focus-visible, .air-jump summary:hover { color: var(--ink); }
/* the kit micro label: M3, M4 and the jump summary */
.air .air-prose .air-label, .air-callout-t, .air-jump summary { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 1080px) { .air-article > .air-spine { display: none; } .air-jump { display: block; } }

/* M2 numerals: air.js moves it into its own span. No character is rewritten, only where it is painted. */
.air .air-prose h3.air-numbered { position: relative; font-weight: 700; }
.air .air-numbered .air-num { position: absolute; right: calc(100% + 18px); top: -.14em; font-size: 3rem; font-weight: 300; line-height: 1; color: var(--dim); }
@media (max-width: 1080px) { .air .air-numbered .air-num { position: static; display: block; font-size: 2.25rem; margin-bottom: 2px; } }

/* M3 labels: a short bold run ending in a colon takes its own line. Ordinary bold, and 40 chars or over, is untouched. */
.air .air-prose .air-label { margin-bottom: 3px; }
.air .air-prose > * + p.air-labelled { margin-top: 1.5rem; }

/* M4 callout. No fill, no stripe: hairlines above and below, and a coral tick drawn only under a pointer or focus ring. */
.air-callout { position: relative; border-block: 1px solid var(--line); padding: 18px 0 20px; margin: 1.8rem 0; color: var(--prose); }
.air-callout > * + * { margin-top: .7rem; }
.air-callout-t { margin-bottom: 8px; }
.air-callout::before { content: ""; position: absolute; left: -14px; top: 20px; width: 2px; height: 22px; background: var(--coral); transform: scaleY(0); transform-origin: top; transition: transform var(--t-fast) var(--ease-out); }
.air-callout:hover::before, .air-callout:focus-within::before { transform: none; }
/* failsafe: cream and a static coral side stripe are both banned, so any
   inline box still carrying either renders as the callout */
.air [style*="f6efe0" i], .air [style*="3px solid var(--coral)" i] { background: none !important; border: 0 !important; border-radius: 0 !important; padding-left: 0 !important; border-block: 1px solid var(--line) !important; }

/* the marker still moves, it is information, it just cannot slide */
@media (prefers-reduced-motion: reduce) {
  .air-spine-mark, .air-spine-rail b, .air-spine-link, .air-jump summary, .air-jump summary::after, .air-callout::before { transition: none; }
}

/* FIGURE, wide by default: it bleeds left into the free column, the side
   the spine never uses, so the two cannot collide. .air-measure holds it
   in the prose column. The img keeps its width and height attributes, so
   nothing here sets height and nothing shifts. */
.air-article > .air-figure { grid-column: 1 / 3; }
.air-article > .air-figure.air-measure { grid-column: 2; }
.air-figure { margin: 2rem 0; }
.air-figure img { width: 100%; border: 1px solid var(--line); background: var(--tint); }
.air-figure-c { display: block; font-size: .8125rem; line-height: 1.5; color: var(--dim); margin-top: 10px; max-width: 62ch; }