/* ==========================================================================
   AirPilot design system

   Three-colour system, in the manner of minut.com:

     PRIMARY   #181A2A   ink. Body text on light, and full-bleed dark bands.
     SECONDARY #C7D5E3   soft blue-grey. The third surface, so contrast does
                         not have to come from the accent.
     ACCENT    #FF5E1F   used sparingly and deliberately — one line of a
                         headline, icon badges, ticks, a single CTA. Never as
                         a large field, which is what made the old hero shout.

   Ground is a warm off-white; cards are pure white. Headings are a display
   serif at weight 400 with generous leading — the opposite of the tight
   grotesk this replaced. Body is Figtree, as on the reference site.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  --ground:#FBF9F7;
  --surface:#FFFFFF;

  --primary:#181A2A;
  --primary-soft:#242739;
  --secondary:#C7D5E3;
  --secondary-deep:#25364A;
  --accent:#FF5E1F;

  --text:#181A2A;
  --muted:#57544F;
  --faint:#8A8681;
  --line:rgba(24,26,42,.12);
  --line-strong:rgba(24,26,42,.26);

  /* on a dark band */
  --d-head:#FFFFFF;
  --d-text:#C4C1CE;
  --d-line:rgba(255,255,255,.16);
  --d-line-strong:rgba(255,255,255,.34);

  --success:#1F8A5B;
  --alert:#D6452F;

  --font:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-plate:22px;
  --radius-full:9999px;
  --plate-gap:10px;

  --ease:cubic-bezier(.4,0,.2,1); --fast:120ms; --base:180ms; --slow:320ms; --reveal:480ms;
  --content:1200px; --prose:66ch; --section-y:112px; --nav-h:72px;
}
@media(max-width:768px){ :root{ --section-y:76px; --nav-h:64px; --plate-gap:6px;
  --radius-plate:16px; } }

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--font);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip}
img,svg,video{max-width:100%;display:block}
.mcard>img,.orb img,[style*="aspect-ratio"] img{height:auto}
h1,h2,h3,h4,h5{font-family:var(--font-display);margin:0;font-weight:700;color:var(--primary);
  line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent);color:#fff}

/* --- Type --------------------------------------------------------------- */
.display{font-size:clamp(2.3125rem,4.6vw,3.375rem);line-height:1.04;font-weight:700;
  letter-spacing:-.042em;color:var(--primary)}
h1,.h1{font-size:clamp(2.0625rem,4vw,3.125rem);line-height:1.04;letter-spacing:-.04em}
h2,.h2{font-size:clamp(1.6875rem,3.3vw,2.625rem);line-height:1.06;letter-spacing:-.034em}
h3,.h3{font-size:1.3125rem;line-height:1.25;letter-spacing:-.022em}
h4,.h4{font-family:var(--font);font-size:1rem;line-height:1.4;font-weight:500;
  letter-spacing:-.011em;color:var(--primary)}
/* One line of a headline in the accent — the reference site's signature move. */
.hl-accent{color:var(--accent)}
h1+.lead,h2+.lead,h3+.lead,.display+.lead{margin-top:18px}
.lead{font-size:1.125rem;line-height:1.55;letter-spacing:-.006em;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.875rem;line-height:1.5}
.caption{font-size:.8125rem;line-height:1.45;letter-spacing:.005em;color:var(--faint)}
.overline{display:block;font-family:var(--font);font-size:.75rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.center .overline{text-align:center}
.prose{max-width:var(--prose)}
.prose p+p{margin-top:1.1em}
.prose h2{font-size:1.75rem}
.prose h3{font-size:1.375rem}
.prose :is(h2,h3,h4){margin-top:2em}
.prose :is(h2,h3,h4)+p,.prose :is(h2,h3,h4)+ul{margin-top:.7em}
.prose a{color:var(--accent)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
strong{font-weight:600;color:var(--primary)}

/* Figures that sit in columns or want a steady width. */
.price,.stat b,.orb-card .v,.code,.refno,table,.ptile,.meter .threshold b{
  font-variant-numeric:tabular-nums}

/* --- Layout ------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:24px}
@media(max-width:640px){.wrap{padding-inline:20px}}
.section{padding-block:var(--section-y)}
.section-sm{padding-block:calc(var(--section-y) * .58)}
/* Full-bleed bands. The page alternates ground / white / ink / secondary. */
.bg-white{background:var(--surface)}
.bg-stone{background:var(--secondary)}
.bg-stone,.bg-stone .lead,.bg-stone .muted{color:var(--secondary-deep)}
.bg-stone h1,.bg-stone h2,.bg-stone h3,.bg-stone h4,.bg-stone strong{color:var(--primary)}
.bg-dark{background:var(--primary);color:var(--d-text)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:var(--d-head)}
.bg-dark .lead,.bg-dark .muted{color:var(--d-text)}
.bg-dark strong{color:#fff}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:44px}}
.center{text-align:center}
.center .prose,.center .lead{margin-inline:auto}
.stack>*+*{margin-top:16px}
.head{max-width:780px;margin:0 auto 56px;text-align:center}
.head .lead{margin-inline:auto;max-width:54ch}
.wrap>.head:last-child{margin-bottom:0}

/* --- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:15.5px;font-weight:500;line-height:1;
  padding:0 24px;height:48px;border-radius:var(--radius-full);
  border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-soft)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:#E85012}
.btn-secondary{background:transparent;color:var(--primary);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--primary);background:var(--surface)}
.btn-ghost{background:none;border:none;padding:0;height:auto;color:var(--accent);
  text-decoration:underline;text-underline-offset:4px}
.btn-lg{height:52px;padding:0 28px}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn[disabled],.btn[aria-disabled=true]{background:var(--line);color:var(--faint);
  border-color:transparent;cursor:not-allowed;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-row.center{justify-content:center}
/* On the ink band the solid button goes white and the outline goes white. */
.bg-dark .btn-primary{background:#fff;color:var(--primary)}
.bg-dark .btn-primary:hover{background:#F0EEEC}
.bg-dark .btn-secondary{color:#fff;border-color:var(--d-line-strong)}
.bg-dark .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* --- Top bar ------------------------------------------------------------ */
/* Announcement bar above the chrome. It scrolls away with the page; the header
   below it is what stays sticky. Text is ink, not white: white on the accent is
   3.1:1 and fails AA, whereas ink on the accent measures 5.6:1. */
.topbar{background:var(--accent);color:var(--primary)}
.topbar-in{max-width:1340px;margin-inline:auto;padding:9.16px 24px;
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  font-size:13.34px;font-weight:500;line-height:1.4;text-align:center}
.topbar-in .sep{opacity:.5}
.topbar-in a{color:var(--primary);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.topbar-in a:hover{text-decoration-thickness:2px}
@media(max-width:640px){
  .topbar-in{padding:6.87px 20px;font-size:12.42px;gap:6px}
  .topbar-in .sep{display:none}
}

/* --- Header ------------------------------------------------------------- */
/* Light bar on the ground colour, wordmark only — the icon is gone. */
.header{position:sticky;top:0;z-index:80;background:var(--ground);
  border-bottom:1px solid var(--line);
  transition:background var(--base) var(--ease),box-shadow var(--base) var(--ease)}
/* Once content is passing underneath, the bar goes translucent and blurs what
   is behind it. Desktop only: backdrop-filter turns .header into a containing
   block for position:fixed descendants, which would trap the off-canvas mobile
   nav inside the 64px bar. */
@media(min-width:1025px){
  .scrolled .header{background:rgba(251,249,247,.85);
    -webkit-backdrop-filter:blur(14px) saturate(1.6);
    backdrop-filter:blur(14px) saturate(1.6);
    box-shadow:0 4px 20px rgba(24,26,42,.06)}
}
@media(max-width:1024px){
  .scrolled .header{box-shadow:0 4px 18px rgba(24,26,42,.07)}
}
.header-in{display:flex;align-items:center;gap:26px;height:var(--nav-h);
  max-width:1340px;margin-inline:auto;padding-inline:24px}
@media(max-width:640px){.header-in{padding-inline:20px;gap:14px}}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
/* Optically centred against the wordmark's cap height, not its em box. */
.brand-mark{width:27px;height:27px;flex-shrink:0;margin-top:-1px}
/* Uppercase and widely tracked, as in the dark Cloudflare-styled version. */
.brand-name{font-family:var(--font-display);font-weight:700;
  font-size:1.1875rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--primary);line-height:1}
.nav{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;font-size:15px;
  font-weight:500;letter-spacing:-.006em;color:var(--primary);text-decoration:none;border-radius:var(--radius-sm);
  background:none;border:none;cursor:pointer;
  transition:background var(--fast),color var(--fast)}
.nav-link:hover{background:rgba(24,26,42,.05)}
.nav-link.is-active{color:var(--accent)}
.nav-item{position:relative}
.chev{transition:transform var(--base) var(--ease);opacity:.55}
.nav-item.open .chev{transform:rotate(180deg)}
.header-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-link,.header-cta .btn{white-space:nowrap}

/* Mega-menu */
.menu{position:absolute;top:calc(100% + 12px);left:-14px;width:460px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 22px 50px rgba(24,26,42,.14);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity var(--base) var(--ease),
  transform var(--base) var(--ease),visibility var(--base)}
.nav-item.open .menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu-card{display:flex;gap:13px;padding:13px;border-radius:var(--radius-md);
  text-decoration:none;transition:background var(--fast) var(--ease)}
.menu-card:hover{background:var(--ground)}
.menu-ico{flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-full);
  background:var(--secondary);color:var(--secondary-deep);display:grid;place-items:center}
.menu-ico svg{width:18px;height:18px}
.menu-txt{display:block;min-width:0}
.menu-txt strong{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-weight:500;font-size:15px;letter-spacing:-.008em;color:var(--primary);margin-bottom:2px}
.menu-txt span{display:block;font-size:14px;line-height:1.45;color:var(--muted)}
#audience-menu{width:390px}
.tag{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-full);
  border:1px solid var(--line-strong);color:var(--muted)}
.tag-live{background:var(--accent);border-color:var(--accent);color:#fff}
.tag-soon{background:var(--secondary);border-color:transparent;color:var(--secondary-deep)}
.tag-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.bg-dark .tag{border-color:var(--d-line-strong);color:var(--d-text)}
.bg-dark .tag-live{background:var(--accent);border-color:var(--accent);color:#fff}

/* Mobile nav */
.burger{display:none;width:40px;height:40px;border:1px solid var(--line-strong);
  background:none;border-radius:var(--radius-sm);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:1.5px;background:var(--primary);
  border-radius:2px;transition:transform var(--base) var(--ease),opacity var(--fast)}
.burger span+span{margin-top:4.5px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1024px){
  .burger{display:flex}
  .nav,.header-cta{display:none}
  .header-in{justify-content:space-between}
  body.menu-open{overflow:hidden}
  /* Closed panels are display:none — an off-screen transform would extend the
     document's scrollable width and leave the links keyboard-focusable. */
  .header .nav{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    background:var(--ground);z-index:85;margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:18px 20px 120px;overflow-y:auto}
  body.menu-open .header .nav{display:flex;animation:navin var(--slow) var(--ease)}
  @keyframes navin{from{transform:translateX(100%)}to{transform:none}}
  .nav-link{font-size:18px;padding:16px 4px;border-radius:0;border-bottom:1px solid var(--line)}
  .nav-link:hover{background:none}
  .nav-item{position:static}
  .menu{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;padding:0;display:none;background:none}
  #audience-menu{width:auto}
  .nav-item.open .menu{display:block}
  .menu-card{padding:14px 4px;border-bottom:1px solid var(--line);border-radius:0}
  .menu-card:hover{background:none}
  .header-cta{display:none;position:fixed;left:0;right:0;bottom:0;padding:14px 20px;
    background:var(--surface);border-top:1px solid var(--line);gap:10px;z-index:90}
  body.menu-open .header-cta{display:flex;animation:ctain var(--slow) var(--ease)}
  @keyframes ctain{from{transform:translateY(110%)}to{transform:none}}
  .header-cta .btn{flex:1;height:46px;font-size:16px}
}

/* --- Hero band ---------------------------------------------------------- */
/* The ink band, not an accent field. The accent appears only on one headline
   line and one badge, which is what keeps it from shouting. */
/* The textured plate from the earlier Cloudflare-styled hero, carried over to
   the navy: a fine dot grid over the fill, plus a warm glow rising out of the
   bottom edge. On the dark ground the dots are light rather than dark, and the
   glow is the accent rather than white.
   isolation:isolate is what lets the layers sit above the plate's own
   background — without a stacking context they would paint behind it. */
.plate{position:relative;margin:var(--plate-gap);background:var(--primary);
  color:var(--d-text);padding-block:78px 84px;border-radius:var(--radius-plate);
  overflow:hidden;isolation:isolate;
  box-shadow:0 10px 30px rgba(24,26,42,.10)}
.plate::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.065) 1px,transparent 1px);
  background-size:6px 6px}
.plate::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 54% 42% at 50% 106%,
    rgba(255,255,255,.26),rgba(199,213,227,.10) 42%,rgba(199,213,227,0) 74%)}
.plate-copy,.hero-split{position:relative;z-index:1}
.plate h1,.plate h2,.plate h3{color:var(--d-head)}
.plate .lead{color:var(--d-text);font-size:1.0625rem;max-width:34rem}
.plate-copy{max-width:var(--content);margin-inline:auto;
  padding-inline:calc(24px - var(--plate-gap))}
.plate .btn-row{margin-top:34px}
.plate .btn-primary{background:#fff;color:var(--primary)}
.plate .btn-primary:hover{background:#F0EEEC}
.plate .btn-secondary{color:#fff;border-color:var(--d-line-strong)}
.plate .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:#fff}
.plate-sm{padding-block:78px}
@media(max-width:768px){.plate{padding-block:52px 58px}.plate-sm{padding-block:54px}}
/* Hero split: copy left, circular media right. */
.hero-split{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;
  max-width:var(--content);margin-inline:auto;
  padding-inline:calc(24px - var(--plate-gap))}
@media(max-width:940px){.hero-split{grid-template-columns:1fr;gap:48px}}
@media(max-width:640px){.hero-split{padding-inline:20px}}

/* Announcement chip */
.chip{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 8px;
  padding:8px 16px;margin-bottom:26px;border:1px solid var(--d-line-strong);
  border-radius:var(--radius-full);color:#fff;font-size:14px;text-decoration:none;
  transition:background var(--fast) var(--ease)}
.chip:hover{background:rgba(255,255,255,.1)}
.chip u{text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.chip u{display:none}}

/* --- Orb: the circular media lockup ------------------------------------- */
/* The reference site's signature raster treatment. A photograph masked to a
   circle with a thin accent ring, a transparent product render breaking the
   circle's edge, and a small product-UI card overlapping the opposite side.
   The overlap is the whole point — it stops the photo reading as a sticker. */
.orb{position:relative;width:100%;max-width:520px;margin-inline:auto;
  aspect-ratio:1;isolation:isolate;--ring:7px;--ring-gap:5px}
/* The ring stands off the photograph rather than bordering it, so the band
   behind shows through the gap — as on the reference site, where the ring
   reads as a halo the product and UI card can cross in front of. */
.orb::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:calc(-1 * (var(--ring) + var(--ring-gap)));
  border:var(--ring) solid var(--accent);border-radius:50%}
.orb-photo{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.orb-photo img{width:100%;height:100%;object-fit:cover}
/* Device cut-out, seated over the lower-left rim. */
.orb-device{position:absolute;left:4%;bottom:-2%;width:34%;z-index:2;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.34))}
.orb-device.right{left:auto;right:4%}
/* Floating product-UI card over the upper-right rim. */
.orb-card{position:absolute;right:-4%;top:6%;z-index:2;min-width:158px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:var(--radius-md);padding:13px 15px;
  box-shadow:0 14px 34px rgba(24,26,42,.22)}
.orb-card .k{display:block;font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.orb-card .v{display:block;font-family:var(--font-display);font-weight:700;font-size:1.625rem;line-height:1;letter-spacing:-.03em;
  color:var(--primary)}
.orb-card .s{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12px;
  color:var(--muted)}
.orb-card .dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0}
/* Accent icon badge riding the rim, as on the reference. */
.orb-badge{position:absolute;z-index:2;width:64px;height:64px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  top:2%;left:8%;box-shadow:0 10px 24px rgba(24,26,42,.24)}
.orb-badge svg{width:26px;height:26px}
@media(max-width:940px){.orb{max-width:420px;--ring:6px;--ring-gap:4px}}
@media(max-width:520px){
  .orb{max-width:300px;--ring:4px;--ring-gap:3px}
  .orb-card{min-width:132px;padding:10px 12px;right:-8%}
  .orb-card .v{font-size:1.375rem}
  .orb-badge{width:50px;height:50px}
  .orb-badge svg{width:21px;height:21px}
}

/* --- Inner-page hero ---------------------------------------------------- */
.hero{padding-block:80px 88px;position:relative}
@media(max-width:940px){.hero{padding-block:52px 60px}}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero h1{margin-bottom:18px}
.hero .lead{margin-bottom:30px;max-width:34rem}
.hero-media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;
  background:var(--secondary)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--line)}
.trust li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.trust svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
.bg-dark .trust{border-color:var(--d-line)}
.bg-dark .trust li,.plate .trust li{color:var(--d-text)}

/* --- Cells: hairline column grid ---------------------------------------- */
.cells{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.cells>*{padding:34px 30px;border-left:1px solid var(--line)}
.cells>*:first-child{border-left:none;padding-left:0}
.cells.c2{grid-template-columns:repeat(2,1fr)}
.cells.c4{grid-template-columns:repeat(4,1fr)}
.bg-dark .cells>*{border-color:var(--d-line)}
@media(max-width:940px){
  .cells,.cells.c4{grid-template-columns:repeat(2,1fr)}
  .cells>*:nth-child(odd){border-left:none;padding-left:0}
  .cells>*:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:640px){
  .cells,.cells.c2,.cells.c4{grid-template-columns:1fr}
  .cells>*{border-left:none;padding:26px 0;border-bottom:1px solid var(--line)}
  .cells>*:last-child{border-bottom:none}
}
.frame{position:relative}

/* --- Cards -------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px}
.bg-white .card{background:var(--ground)}
.bg-dark .card{background:var(--primary-soft);border-color:var(--d-line)}
.bg-stone .card{background:var(--surface);border-color:transparent}
.card-link{text-decoration:none;display:block;
  transition:border-color var(--base) var(--ease),transform var(--base) var(--ease),
  box-shadow var(--base) var(--ease)}
.card-link:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(24,26,42,.09);
  border-color:var(--line-strong)}
.card h3,.card h4{margin-bottom:8px}
.card p{color:var(--muted);font-size:15px;line-height:1.55}
.bg-dark .card p{color:var(--d-text)}
/* One cell filled accent, used at most once per grid. Needs the doubled class
   to outrank the per-band .card overrides above, which are more specific. */
.card.card-accent{background:var(--accent);border-color:var(--accent)}
.card-accent h3,.card-accent h4{color:#fff}
.card-accent p{color:rgba(255,255,255,.9)}
.card-accent .ico{color:#fff;background:rgba(255,255,255,.18)}

/* Icons sit in a soft secondary disc, as on the reference. */
.ico{width:44px;height:44px;border-radius:var(--radius-full);background:var(--secondary);
  color:var(--secondary-deep);display:grid;place-items:center;margin-bottom:18px}
.ico svg{width:22px;height:22px}
.ico-navy{background:var(--accent);color:#fff}
.bg-dark .ico{background:rgba(255,255,255,.1);color:#fff}
.num{width:32px;height:32px;border-radius:var(--radius-full);background:var(--primary);
  color:#fff;display:grid;place-items:center;font-family:var(--font);
  font-size:13px;font-weight:700;margin-bottom:16px;flex-shrink:0}
.bg-dark .num{background:var(--accent)}

/* Media card */
.mcard{overflow:hidden;padding:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);display:flex;flex-direction:column}
.mcard>img{aspect-ratio:16/10;object-fit:cover;width:100%}
.mcard-body{padding:26px;flex:1;display:flex;flex-direction:column}
.mcard-body .go{margin-top:auto;padding-top:20px;font-weight:500;font-size:15px;
  color:var(--accent);display:inline-flex;align-items:center;gap:7px}
.card-link:hover .go .arr{transform:translateX(4px)}
.arr{transition:transform var(--base) var(--ease);display:inline-block}

/* --- Device stage ------------------------------------------------------- */
/* Transparent device renders on a drawn ground. Paints no panel of its own so
   it never shows an edge against whatever band it sits in. */
.stage{position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate;
  background:transparent;aspect-ratio:16/10}
.stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 40% 58% at 50% 52%,rgba(255,94,31,.14),
    rgba(255,94,31,0) 72%)}
.stage-device{position:relative;z-index:1;width:auto;height:auto;
  max-width:50%;max-height:74%;filter:drop-shadow(0 22px 26px rgba(24,26,42,.22))}
.stage .ground{position:absolute;z-index:0;left:50%;bottom:15%;translate:-50% 0;
  width:42%;height:6%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(24,26,42,.22),transparent 70%);filter:blur(6px)}
.bg-dark .stage-device{filter:drop-shadow(0 22px 30px rgba(0,0,0,.55))}
.bg-dark .stage .ground{background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%)}
.mcard .stage{aspect-ratio:16/10;border-bottom:1px solid var(--line);background:var(--ground)}

/* --- Feature list ------------------------------------------------------- */
/* Ticks ride in accent discs, as on the reference site. */
.checks{display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;
  color:var(--muted)}
.checks .tick{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--accent);
  color:#fff;display:grid;place-items:center;margin-top:2px}
.checks .tick svg{width:12px;height:12px}
.bg-dark .checks li,.plate .checks li{color:var(--d-text)}
.cols2{columns:2;column-gap:44px}
.cols2 li{break-inside:avoid;margin-bottom:14px}
@media(max-width:680px){.cols2{columns:1}}

/* --- Versus panel ------------------------------------------------------- */
.versus{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--line)}
@media(max-width:768px){.versus{grid-template-columns:1fr}}
.versus-side{padding:38px 34px}
.versus-bad{background:var(--surface)}
.versus-good{background:var(--primary)}
.versus-good h3{color:var(--d-head)}
.versus-side h3{font-size:1.4375rem;line-height:1.14;letter-spacing:-.026em;margin-bottom:22px}
.versus-row{display:flex;gap:11px;align-items:flex-start;padding:13px 0;font-size:15px;
  line-height:1.5;border-top:1px solid var(--line);color:var(--muted)}
.versus-row:first-of-type{border-top:none}
.versus-good .versus-row{color:var(--d-text);border-top-color:var(--d-line)}
.versus-row svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--faint)}
.versus-good .versus-row svg{color:var(--accent)}

/* --- Compare table ------------------------------------------------------ */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);-webkit-overflow-scrolling:touch;
  /* A scrollable table that gives no sign it scrolls reads as a broken one.
     The fade on the right edge is the affordance, and it is painted on the
     scroll container so it stays put while the content moves under it. */
  background-image:linear-gradient(to right,transparent calc(100% - 48px),rgba(24,26,42,.05));
  background-attachment:local,scroll}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
th,td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--muted);
  /* Without a floor, the last column of a wide table gets squeezed to a
     sliver and its sentence stacks one or two words per line, which drags the
     whole row to several hundred pixels and leaves every other cell padded out
     with blank space. That is what a five-column comparison did to the first
     published article. */
  min-width:136px}
th:first-child,td:first-child{min-width:104px}
thead th{background:var(--ground);font-family:var(--font);font-weight:500;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td strong{color:var(--primary)}
td.num-cell,th.num-cell{text-align:right;font-variant-numeric:tabular-nums}
.yes{color:var(--accent);font-weight:600}
.no{color:var(--faint)}

/* --- Pricing ------------------------------------------------------------ */
.plan{display:flex;flex-direction:column;position:relative;background:var(--surface)}
.plan.featured{border-color:var(--primary)}
.plan-badge{position:absolute;top:-12px;left:28px;background:var(--accent);
  border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--ground)}
.price{font-family:var(--font-display);font-weight:700;font-size:2.875rem;line-height:1;letter-spacing:-.038em;
  color:var(--primary);margin:10px 0 4px}
.price .cur{font-size:1.5rem;vertical-align:.42em;margin-right:2px}
.price .per{font-family:var(--font);font-size:.875rem;font-weight:400;color:var(--muted);
  margin-left:7px;letter-spacing:0}
.plan .checks{margin:22px 0 28px}
.plan .btn{margin-top:auto;width:100%}
.pnote{font-size:13.5px;color:var(--faint);margin-top:14px;text-align:center}

/* --- Stats -------------------------------------------------------------- */
.stat{text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:3rem;font-weight:700;
  line-height:1;letter-spacing:-.04em;color:var(--primary);margin-bottom:10px}
.stat span{font-size:14px;color:var(--muted);line-height:1.5;display:block}
.bg-dark .stat b{color:var(--d-head)}
.bg-dark .stat span{color:var(--d-text)}

/* --- Steps / flow ------------------------------------------------------- */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 0;
  border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .num{margin-bottom:0}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.flow-node{padding:30px 26px;position:relative;border-left:1px solid var(--line)}
.flow-node:first-child{border-left:none;padding-left:0}
.bg-dark .flow-node{border-color:var(--d-line)}
.flow-node b{display:flex;align-items:center;gap:8px;font-family:var(--font);font-size:11.5px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  margin-bottom:12px}
.flow-node strong{display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.125rem;letter-spacing:-.024em;color:var(--primary);margin-bottom:8px;line-height:1.25}
.bg-dark .flow-node strong{color:var(--d-head)}
.flow-node span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.bg-dark .flow-node span{color:var(--d-text)}
.flow-node .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
@media(max-width:840px){
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow-node:nth-child(odd){border-left:none;padding-left:0}
  .flow-node:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:460px){
  .flow{grid-template-columns:1fr}
  .flow-node{border-left:none;padding:24px 0;border-bottom:1px solid var(--line)}
  .flow-node:last-child{border-bottom:none}
}

/* --- Marquee ------------------------------------------------------------ */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:18px;background:var(--ground);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 46s linear infinite}
.marquee ul{display:flex;flex-shrink:0}
.marquee li{display:flex;align-items:center;gap:9px;padding-inline:26px;font-size:14px;
  color:var(--muted);white-space:nowrap}
.marquee svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Motion: access flow ------------------------------------------------ */
.anim{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--surface);padding:28px 26px}
.bg-dark .anim{background:var(--primary-soft);border-color:var(--d-line)}
.anim>*{position:relative;z-index:1}
.flowline{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-bottom:26px}
.flowline::before{content:"";position:absolute;left:8%;right:8%;top:11px;height:1px;
  background:var(--line)}
.bg-dark .flowline::before{background:var(--d-line)}
.flowline::after{content:"";position:absolute;top:8px;left:8%;width:7px;height:7px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(255,94,31,.18);
  animation:pulse-run 12s var(--ease) infinite}
@keyframes pulse-run{
  0%,4%{left:8%;opacity:0} 8%{opacity:1} 30%{left:36%} 55%{left:64%} 80%{left:92%}
  92%,100%{left:92%;opacity:0}}
.flowstep{text-align:center;padding-top:26px;position:relative}
.flowstep::before{content:"";position:absolute;top:6px;left:50%;translate:-50% 0;
  width:11px;height:11px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line-strong);animation:step-lit 12s var(--ease) infinite}
.bg-dark .flowstep::before{background:var(--primary-soft);border-color:var(--d-line-strong)}
.flowstep:nth-child(1)::before{animation-delay:0s}
.flowstep:nth-child(2)::before{animation-delay:3s}
.flowstep:nth-child(3)::before{animation-delay:6s}
.flowstep:nth-child(4)::before{animation-delay:9s}
@keyframes step-lit{
  0%,3%{background:var(--surface);border-color:var(--line-strong)}
  6%,22%{background:var(--accent);border-color:var(--accent)}
  27%,100%{background:var(--surface);border-color:var(--line-strong)}}
.flowstep b{display:block;font-size:13px;font-weight:500;color:var(--primary);margin-bottom:3px}
.bg-dark .flowstep b{color:var(--d-head)}
.flowstep span{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.bg-dark .flowstep span{color:var(--d-text)}
@media(max-width:520px){
  .flowline{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .flowline::before,.flowline::after{display:none}
}
.codecard{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;
  background:var(--ground)}
.bg-dark .codecard{background:rgba(255,255,255,.05);border-color:var(--d-line)}
.codecard .k{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
.code{display:flex;gap:6px}
.code i{font-style:normal;font-family:var(--font-mono);font-size:20px;line-height:1;
  color:var(--primary);min-width:14px;text-align:center;animation:digit 12s steps(1) infinite}
.bg-dark .code i{color:var(--d-head)}
.code i:nth-child(1){animation-delay:0s}
.code i:nth-child(2){animation-delay:.1s}
.code i:nth-child(3){animation-delay:.2s}
.code i:nth-child(4){animation-delay:.3s}
@keyframes digit{0%,22%{opacity:.25} 26%,84%{opacity:1} 88%,100%{opacity:.25}}
.codestate{font-size:12px;padding:5px 11px;border-radius:var(--radius-full);
  border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap;
  animation:codestate 12s var(--ease) infinite}
@keyframes codestate{
  0%,24%{color:var(--muted)} 30%,80%{color:var(--success);border-color:var(--success)}
  88%,100%{color:var(--faint)}}

/* --- Portfolio graphic -------------------------------------------------- */
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ptile{border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 14px;
  background:var(--ground)}
.ptile b{display:block;font-size:13px;font-weight:500;color:var(--primary);margin-bottom:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile .row{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.ptile .led{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(31,138,91,.14)}
.ptile.watch .led{animation:led-watch 9s var(--ease) infinite}
@keyframes led-watch{
  0%,32%{background:var(--success);box-shadow:0 0 0 3px rgba(31,138,91,.14)}
  40%,72%{background:var(--accent);box-shadow:0 0 0 3px rgba(255,94,31,.2)}
  80%,100%{background:var(--success);box-shadow:0 0 0 3px rgba(31,138,91,.14)}}
@media(max-width:520px){.portfolio{grid-template-columns:repeat(2,1fr)}}

@media(prefers-reduced-motion:reduce){
  .flowline::after,.flowstep::before,.code i,.codestate,.meter i,.noisewarn,
  .ptile.watch .led,.marquee-track{animation:none!important}
  .noisewarn{opacity:1}
  .meter i{height:52%}
  .flowstep::before{background:var(--accent);border-color:var(--accent)}
}

/* --- Callout ------------------------------------------------------------ */
.callout{border-left:3px solid var(--accent);background:transparent;padding:4px 0 4px 24px}
.callout p{color:var(--muted);font-size:1rem;line-height:1.6}
.bg-dark .callout p{color:var(--d-text)}

/* --- Forms -------------------------------------------------------------- */
.field{display:block;margin-bottom:18px}
.field>label,.label{display:block;font-size:14px;font-weight:600;color:var(--primary);
  margin-bottom:7px}
.hint{font-size:13.5px;color:var(--faint);margin-top:6px}
.input,input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=date],select,textarea{
  width:100%;height:48px;padding:0 15px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:16px;
  color:var(--primary);transition:border-color var(--fast) var(--ease);appearance:none}
textarea{height:auto;min-height:126px;padding:13px 15px;line-height:1.55;resize:vertical}
select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2357544F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--faint)}
[aria-invalid=true]{border-color:var(--alert)!important}
.err{display:none;color:var(--alert);font-size:13.5px;margin-top:6px}
.err.show{display:flex;gap:6px;align-items:center}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.55;
  color:var(--muted)}
.consent input{width:18px;height:18px;min-width:18px;margin-top:3px;accent-color:var(--accent)}
.consent a{color:var(--accent)}

/* Option cards (wizard) */
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
@media(max-width:640px){.opts.two{grid-template-columns:1fr}}
.opt{position:relative;display:flex;gap:14px;align-items:flex-start;min-height:68px;
  padding:18px 20px;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-md);cursor:pointer;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.opt:hover{border-color:var(--primary)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt-mark{flex-shrink:0;width:20px;height:20px;border-radius:var(--radius-full);
  border:1px solid var(--line-strong);display:grid;place-items:center;margin-top:2px;
  background:var(--surface);transition:all var(--fast) var(--ease)}
.opt-mark svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity var(--fast)}
.opt-body{min-width:0}
.opt-body b{display:block;font-weight:600;font-size:16px;color:var(--primary);margin-bottom:3px}
.opt-body span{display:block;font-size:14px;line-height:1.55;color:var(--muted)}
.opt:has(input:checked){border-color:var(--accent);background:#FFF6F2}
.opt:has(input:checked) .opt-mark{background:var(--accent);border-color:var(--accent)}
.opt:has(input:checked) .opt-mark svg{opacity:1}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}

/* --- Wizard ------------------------------------------------------------- */
.wiz{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start}
@media(max-width:1024px){.wiz{grid-template-columns:1fr;gap:0}}
.progress{position:sticky;top:var(--nav-h);z-index:60;height:3px;background:var(--line)}
.progress-bar{height:100%;background:var(--accent);width:0;
  transition:width var(--slow) var(--ease)}
.stepwrap{min-height:440px}
.stepcount{font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:block}
.wstep{display:none}
.wstep.active{display:block;animation:stepin var(--base) var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wstep h2:focus,.wstep h2:focus-visible{outline:none}
.wstep h2{margin-bottom:10px;font-size:clamp(1.75rem,2.8vw,2.25rem)}
.wstep .lead{margin-bottom:26px}
.wnav{display:flex;gap:14px;align-items:center;margin-top:32px;padding-top:24px;
  border-top:1px solid var(--line)}
.wnav .btn-primary{margin-left:auto}
.summary{position:sticky;top:calc(var(--nav-h) + 26px);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;overflow:hidden;
  box-shadow:0 10px 30px rgba(24,26,42,.06)}
.summary h3{font-size:1.25rem;margin-bottom:4px}
.summary-list{margin:16px 0;font-size:14px}
.summary-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.summary-list li:last-child{border-bottom:none}
.summary-list .k{color:var(--muted);flex-shrink:0}
.summary-list .v{font-weight:600;text-align:right;color:var(--primary)}
.summary-empty{color:var(--faint);font-size:14px;padding:18px 0;text-align:center}
.reassure{display:flex;gap:10px;align-items:flex-start;background:var(--ground);
  border-radius:var(--radius-sm);padding:13px;font-size:13px;line-height:1.5;
  color:var(--muted);margin-top:4px}
.reassure b{display:block;color:var(--primary);font-size:13.5px;margin-bottom:2px}
.reassure .lk{font-size:17px;line-height:1;flex-shrink:0}
@media(max-width:1024px){
  .summary{position:fixed;left:0;right:0;bottom:0;top:auto;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none;padding:16px 20px;
    z-index:70;max-height:62vh;overflow-y:auto;box-shadow:0 -14px 34px rgba(24,26,42,.14)}
  .summary-list,.summary h3+p{display:none}
  .summary.open .summary-list,.summary.open h3+p{display:block}
  .summary-toggle{display:flex!important}
  .stepwrap{padding-bottom:150px;min-height:0}
}
.summary-toggle{display:none;width:100%;justify-content:space-between;align-items:center;
  background:none;border:none;padding:0;cursor:pointer;font-weight:600;color:var(--primary)}
.notsure{margin-top:16px}
.notsure summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:7px;list-style:none}
.notsure summary::-webkit-details-marker{display:none}
.notsure[open] summary{margin-bottom:12px}
.notsure .body{font-size:14px;line-height:1.6;color:var(--muted);background:var(--ground);
  padding:16px;border-radius:var(--radius-sm);max-width:var(--prose)}
.talk{margin-top:24px;font-size:14px;color:var(--muted)}
.talk a{color:var(--accent)}
.confirm-hero{text-align:center;max-width:620px;margin-inline:auto}
.confirm-ico{width:70px;height:70px;border-radius:var(--radius-full);background:var(--accent);
  color:#fff;display:grid;place-items:center;margin:0 auto 24px}
.confirm-ico svg{width:32px;height:32px}
.refno{font-family:var(--font-mono);font-size:18px;letter-spacing:.06em;background:var(--surface);
  border:1px dashed var(--line-strong);border-radius:var(--radius-sm);padding:13px 20px;
  display:inline-block;margin-top:8px;color:var(--primary)}

/* --- Coming soon / notify ---------------------------------------------- */
.soon-badge{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--secondary);color:var(--secondary-deep);font-family:var(--font);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 15px;border-radius:var(--radius-full);margin-bottom:20px}
.soon-badge svg{width:14px;height:14px;flex-shrink:0}
.bg-dark .soon-badge{background:rgba(255,255,255,.12);color:#fff}
.notify{display:flex;gap:10px;max-width:470px;margin-top:8px}
.notify input{flex:1}
@media(max-width:520px){.notify{flex-direction:column}.notify .btn{width:100%}}

/* --- FAQ ---------------------------------------------------------------- */
.faq{border-top:1px solid var(--line);max-width:var(--prose);margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:1.125rem;
  letter-spacing:-.018em;color:var(--primary);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:29px;width:9px;height:9px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);transition:transform var(--base) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq .a{padding:0 44px 24px 0;color:var(--muted);font-size:15.5px;line-height:1.65}
.faq .a p+p{margin-top:.9em}
.faq .a a{color:var(--accent)}

/* --- Footer ------------------------------------------------------------- */
.footer{background:var(--primary);color:var(--d-text);padding-block:64px 30px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:44px 28px}
@media(max-width:940px){.footer-grid{grid-template-columns:1fr 1fr;gap:34px 24px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer h4{font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px}
.footer a{color:var(--d-text);text-decoration:none;transition:color var(--fast)}
.footer a:hover{color:#fff}
.footer li{margin-bottom:11px;line-height:1.45}
.footer .brand-name{color:#fff}
.footer-bot{margin-top:52px;padding-top:26px;border-top:1px solid var(--d-line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:13px;color:rgba(255,255,255,.45)}
.footer-note{max-width:34ch;margin-top:16px;line-height:1.55;font-size:14px;color:var(--d-text)}

/* --- Motion ------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(10px)}
.reveal.in{opacity:1;transform:none;
  transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--primary);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}
[hidden]{display:none!important}

/* --- Access system shot -------------------------------------------------- */
/* The Smart Access hero: the unit on a real door, the screen the guest uses,
   and the state it reports back. Everything scales from --w so the device keeps
   true proportions at any size: a phone is roughly 2.05:1, its corner radius
   about 13% of its width, and its bezel about 3.5%. Getting those wrong is what
   makes a mockup read as a rounded rectangle rather than a phone. */
.access-shot{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;
  margin-inline:auto;overflow:visible}
.as-photo{position:absolute;left:0;top:0;width:78%;height:86%;border-radius:var(--radius-lg);
  overflow:hidden;background:var(--secondary);
  box-shadow:0 18px 44px rgba(24,26,42,.16)}
.as-photo img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:26% center}
/* State chip riding the photo's top edge. */
.as-chip{position:absolute;left:6%;top:6%;z-index:4;display:inline-flex;align-items:center;
  gap:8px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;
  font-size:12px;font-weight:500;color:var(--primary);white-space:nowrap;
  box-shadow:0 10px 26px rgba(24,26,42,.2)}
.as-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(31,138,91,.16)}

/* --- Phone ---------------------------------------------------------------- */
.phone{--w:236px;position:absolute;right:0;bottom:0;z-index:3;width:var(--w)}
.phone-body{width:var(--w);height:calc(var(--w) * 1.9);
  border-radius:calc(var(--w) * .135);background:#101219;
  padding:calc(var(--w) * .034);
  box-shadow:0 2px 0 rgba(255,255,255,.09) inset,
             0 30px 60px -12px rgba(24,26,42,.42),
             0 8px 18px rgba(24,26,42,.18)}
.phone-screen{height:100%;border-radius:calc(var(--w) * .104);background:var(--surface);
  overflow:hidden;display:flex;flex-direction:column;position:relative}
.phone-status{display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--w) * .05) calc(var(--w) * .075) calc(var(--w) * .012);
  font-size:calc(var(--w) * .046);font-weight:600;color:var(--primary);letter-spacing:0}
.phone-status .bars{display:flex;align-items:flex-end;gap:2px}
.phone-status .bars i{display:block;width:2px;background:var(--primary);border-radius:1px}
.phone-status .bars i:nth-child(1){height:3px}
.phone-status .bars i:nth-child(2){height:5px}
.phone-status .bars i:nth-child(3){height:7px}
.phone-status .batt{width:15px;height:8px;border:1.2px solid var(--primary);border-radius:2.5px;
  position:relative;opacity:.9}
.phone-status .batt::before{content:"";position:absolute;inset:1.5px;right:4px;
  background:var(--primary);border-radius:1px}
.phone-status .batt::after{content:"";position:absolute;right:-3px;top:2.5px;width:1.5px;
  height:3px;background:var(--primary);border-radius:0 1px 1px 0;opacity:.5}

.phone-app{flex:1;display:flex;flex-direction:column;
  padding:calc(var(--w) * .055) calc(var(--w) * .075) calc(var(--w) * .07)}
.phone-brand{font-family:var(--font-display);font-weight:700;
  font-size:calc(var(--w) * .036);letter-spacing:.16em;color:var(--accent);
  margin-bottom:calc(var(--w) * .085)}
.phone-prop{font-size:calc(var(--w) * .068);font-weight:500;letter-spacing:-.015em;
  color:var(--primary);line-height:1.25;margin-bottom:calc(var(--w) * .015)}
.phone-dates{font-size:calc(var(--w) * .046);color:var(--muted)}
.phone-rule{height:1px;background:var(--line);margin:calc(var(--w) * .075) 0}
.phone-label{font-size:calc(var(--w) * .037);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:calc(var(--w) * .04)}
.phone-code{display:flex;gap:calc(var(--w) * .026)}
.phone-code i{font-style:normal;font-family:var(--font-mono);
  font-size:calc(var(--w) * .085);line-height:1;color:var(--primary);
  background:var(--ground);border:1px solid var(--line);border-radius:calc(var(--w) * .032);
  flex:1;text-align:center;padding:calc(var(--w) * .042) 0}
.phone-cta{display:flex;align-items:center;justify-content:center;gap:calc(var(--w) * .03);margin-top:auto;
  background:var(--accent);color:#fff;border-radius:999px;
  padding:calc(var(--w) * .055) 0;font-size:calc(var(--w) * .056);font-weight:500;
  margin-top:calc(var(--w) * .07);
  box-shadow:0 6px 16px rgba(255,94,31,.32)}
.phone-cta svg{width:calc(var(--w) * .062);height:calc(var(--w) * .062);stroke-width:2.4}
.phone-note{text-align:center;font-size:calc(var(--w) * .04);color:var(--faint);
  margin-top:calc(var(--w) * .042);line-height:1.4}

@media(max-width:1120px){.phone{--w:200px}}
@media(max-width:940px){.access-shot{max-width:520px}.phone{--w:212px}}
@media(max-width:560px){
  .access-shot{max-width:380px}
  .phone{--w:152px}
  .as-chip{font-size:10.5px;padding:6px 11px;gap:6px}
  .as-photo{width:86%;height:74%}
}
.phone-status-r{display:flex;align-items:center;gap:5px}

/* Arrival detail, so the screen carries the content a real one would. */
.phone-hint{margin-top:calc(var(--w) * .07);padding:calc(var(--w) * .05);
  background:var(--ground);border-radius:calc(var(--w) * .04)}
.phone-hint b{display:block;font-size:calc(var(--w) * .037);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  margin-bottom:calc(var(--w) * .022)}
.phone-hint span{display:block;font-size:calc(var(--w) * .044);line-height:1.45;
  color:var(--muted)}

/* --- Booking timeline ----------------------------------------------------- */
/* Replaces the earlier four-dot flow, which read as a wireframe. This is shaped
   like a record from the dashboard: one booking, every action we took on it,
   timestamped. It shows the service doing the work rather than diagramming it. */
.tl{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px 20px;box-shadow:0 14px 40px rgba(24,26,42,.10);max-width:440px}
.tl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.tl-head b{display:block;font-size:15px;font-weight:600;letter-spacing:-.012em;
  color:var(--primary);margin-bottom:3px}
.tl-head span.sub{display:block;font-size:12.5px;color:var(--muted)}
.tl-status{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  background:rgba(31,138,91,.1);color:var(--success);border-radius:999px;
  padding:5px 11px;font-size:11.5px;font-weight:500;white-space:nowrap}
.tl-status i{width:6px;height:6px;border-radius:50%;background:var(--success)}
.tl-list{position:relative;margin-top:18px;display:grid;gap:0}
/* One continuous rail behind the markers. */
.tl-list::before{content:"";position:absolute;left:6px;top:11px;bottom:13px;width:1.5px;
  background:var(--line-strong);opacity:.5}
.tl-list li{position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:baseline;gap:12px;padding:0 0 0 26px;min-height:32px}
.tl-list li+li{margin-top:4px}
.tl-dot{position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line-strong);box-sizing:border-box}
.tl-list li.done .tl-dot{background:var(--accent);border-color:var(--accent)}
.tl-list li.live .tl-dot{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,94,31,.18);animation:tl-pulse 2.6s var(--ease) infinite}
@keyframes tl-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(255,94,31,.16)}
  50%{box-shadow:0 0 0 7px rgba(255,94,31,.05)}}
.tl-label{font-size:13.5px;line-height:1.45;color:var(--primary)}
.tl-list li:not(.done):not(.live) .tl-label{color:var(--faint)}
.tl-label em{font-style:normal;font-family:var(--font-mono);font-weight:500;
  letter-spacing:.02em}
.tl-time{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);white-space:nowrap}
.tl-foot{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.tl-foot svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
@media(max-width:940px){.tl{max-width:none}}
@media(max-width:420px){
  .tl{padding:18px 16px 16px}
  .tl-label{font-size:12.5px}
  .tl-time{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){.tl-list li.live .tl-dot{animation:none}}

/* --- Sound level readout -------------------------------------------------- */
/* A snapshot of the moment a threshold is crossed. Only the chart animates:
   crossfading the reading and the status label between two values meant two of
   them were briefly on screen at once, and a dashboard that flickers its own
   numbers looks broken rather than live. */
.nm{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px 18px;box-shadow:0 14px 40px rgba(24,26,42,.09);max-width:640px;
  margin-inline:auto}
.nm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.nm-k{font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:8px}
.nm-num{display:block;font-family:var(--font-display);font-weight:700;font-size:2.25rem;
  line-height:1;letter-spacing:-.03em;color:var(--primary)}
.nm-unit{font-size:1rem;font-weight:500;color:var(--muted);margin-left:5px;
  font-family:var(--font);letter-spacing:0}
.nm-state{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;border-radius:999px;
  padding:6px 12px;font-size:11.5px;font-weight:500;white-space:nowrap;
  background:rgba(255,94,31,.12);color:var(--accent)}
.nm-state i{width:6px;height:6px;border-radius:50%;background:currentColor}

.nm-plot{position:relative;margin-top:20px;height:104px;display:flex;align-items:flex-end;
  gap:3px}
/* Heights are fixed per bar so the plot agrees with the reading above it.
   Bars under the threshold sit in the secondary tone; the crossing does the
   explaining, which no amount of animation would do better. */
.nm-plot i{flex:1;min-width:0;border-radius:2px 2px 0 0;height:var(--h);
  background:linear-gradient(180deg,var(--secondary) 0%,rgba(199,213,227,.45) 100%)}
.nm-plot i.over{background:linear-gradient(180deg,var(--accent) 0%,rgba(255,94,31,.5) 100%)}
.nm-plot i:last-child{animation:nm-live 2.4s var(--ease) infinite}
@keyframes nm-live{0%,100%{opacity:1}50%{opacity:.62}}
.nm-line{position:absolute;left:0;right:0;bottom:74%;z-index:2;pointer-events:none;
  border-top:1.5px dashed var(--line-strong)}
.nm-line b{position:absolute;left:0;top:-19px;font-family:var(--font-mono);font-size:10.5px;
  font-weight:400;letter-spacing:.04em;color:var(--faint);background:var(--surface);
  padding:0 8px 0 0}
.nm-axis{display:flex;justify-content:space-between;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;
  color:var(--faint)}
.nm-warn{display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;
  border-radius:var(--radius-sm);background:rgba(255,94,31,.07);
  font-size:12.5px;line-height:1.4;color:var(--primary)}
.nm-warn svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
@media(max-width:520px){
  .nm{padding:18px 16px 14px}
  .nm-num{font-size:1.875rem}
  .nm-plot{height:84px;gap:2px}
}
@media(prefers-reduced-motion:reduce){.nm-plot i:last-child{animation:none}}

/* --- Form send failure ---------------------------------------------------- */
/* Shown only when the enquiry did not reach us, with a route that will. */
.sendfail{margin-top:14px;padding:13px 15px;border-radius:var(--radius-sm);
  background:rgba(214,69,47,.07);border:1px solid rgba(214,69,47,.22);
  font-size:14px;line-height:1.5;color:var(--primary)}
.sendfail a{color:var(--alert);font-weight:500}
.sendfail:focus{outline:2px solid var(--alert);outline-offset:3px}
/* Honeypot: off-screen for bots to find, never announced or reachable. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Blog ----------------------------------------------------------------- */
/* Post cards reuse .mcard, so they inherit the hover and the 16:10 media box.
   A post without a cover image gets a typographic plate instead of a grey
   rectangle, which keeps the grid even while the image library is thin. */
.post-grid{align-items:stretch}
.post-card .mcard-body{gap:0}
.post-card h3{margin-bottom:10px}
.post-card-plate{display:flex;align-items:flex-end;aspect-ratio:16/10;padding:22px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(140deg,var(--secondary) 0%,#E4EDF5 55%,var(--ground) 100%)}
.post-card-plate span{font-family:var(--font);font-size:11.5px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--secondary-deep)}
.post-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.post-meta{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;color:var(--faint)}
.post-meta .sep{opacity:.6}
.post-card .go{padding-top:16px}

.blog-empty{max-width:var(--prose);margin-inline:auto;text-align:center;
  padding:56px 32px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg)}
.blog-empty .lead{margin:16px auto 28px}

/* --- One post ------------------------------------------------------------- */
.post-head{max-width:var(--prose);margin-inline:auto}
/* No top border on the byline when the cover is what precedes the title. */
.post-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;
  font-size:14px;font-weight:500;color:var(--accent);text-decoration:none}
.post-back:hover{text-decoration:underline;text-underline-offset:3px}
.post-head h1{font-size:clamp(1.875rem,3.4vw,2.75rem)}
.post-head .lead{margin-top:18px}
.post-byline{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--faint)}
.post-byline .sep{opacity:.6}
/* The cover leads the page, above the title. The back link sits in a slim bar
   over it so navigation stays at the top without pushing the image down. */
.post-backbar{padding:26px 0 18px}
/* Aligned to the cover's edge, not the outer container. Otherwise the page
   opens with three different left margins: the link, the cover and the title. */
.post-backbar .wrap{max-width:1040px;padding-inline:24px}
.post-backbar .post-back{margin-bottom:0}
.post-cover{max-width:1040px;margin:0 auto;padding-inline:24px}
.post-cover img{width:100%;height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--line)}

/* The article itself. Markdown output is plain HTML, so the styling has to
   live here rather than on classes the author would have to remember. */
.post-body{margin-inline:auto;font-size:1.0625rem;line-height:1.7;color:var(--muted)}
.post-body>*+*{margin-top:1.15em}
.post-body :is(h2,h3,h4){color:var(--primary);scroll-margin-top:calc(var(--nav-h) + 24px)}
.post-body h2{margin-top:2.1em}
.post-body h3{margin-top:1.7em}
.post-body :is(ul,ol){padding-left:1.35em;margin-top:1.1em}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin-top:.5em;padding-left:.2em}
.post-body li::marker{color:var(--accent)}
.post-body blockquote{margin:1.6em 0;padding:2px 0 2px 24px;
  border-left:3px solid var(--accent)}
.post-body blockquote p{font-size:1.125rem;line-height:1.55;color:var(--primary)}
.post-body img{border-radius:var(--radius-md);border:1px solid var(--line);margin-block:1.6em}
.post-body hr{height:1px;border:none;background:var(--line);margin-block:2.4em}
.post-body code{font-family:var(--font-mono);font-size:.875em;padding:2px 6px;
  border-radius:4px;background:rgba(24,26,42,.06);color:var(--primary)}
.post-body pre{overflow-x:auto;padding:20px 22px;border-radius:var(--radius-md);
  background:var(--primary);color:var(--d-text);font-size:13.5px;line-height:1.6}
.post-body pre code{background:none;padding:0;color:inherit}
.post-body .tablewrap{margin-block:1.8em}
/* The table sits inside the text column, aligned with the prose on both
   edges. Breaking it out wider was tried and looked wrong: it hangs off the
   measure and lines up with nothing else on the page. The fix for a table
   that does not fit is fewer columns and shorter cells, which guards.py now
   enforces, not more width. */
.post-body table{min-width:420px}

.post-cta{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;
  padding:44px 46px;border-radius:var(--radius-lg);background:var(--primary);
  color:var(--d-text)}
.post-cta h2{color:var(--d-head);font-size:clamp(1.5rem,2.4vw,2rem)}
.post-cta .lead{color:var(--d-text);font-size:1.0625rem}
.post-cta .btn-row{justify-content:flex-end}
.post-cta .btn-primary{background:#fff;color:var(--primary)}
.post-cta .btn-primary:hover{background:#F0EEEC}
.post-cta .btn-secondary{color:#fff;border-color:var(--d-line-strong)}
.post-cta .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* --- Free guide ----------------------------------------------------------- */
.guide-hero{gap:64px;align-items:start}
.guide-form{box-shadow:0 18px 44px rgba(24,26,42,.10);position:sticky;
  top:calc(var(--nav-h) + 26px)}
/* Stands in for a real cover shot until the PDF exists and has one. */
.guide-cover{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  aspect-ratio:1.45/1;padding:26px;border-radius:var(--radius-md);
  background:linear-gradient(150deg,var(--primary) 0%,var(--primary-soft) 58%,#2E3247 100%);
  box-shadow:0 12px 26px rgba(24,26,42,.22)}
.guide-cover-kicker{font-family:var(--font);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.guide-cover strong{font-family:var(--font-display);font-size:1.375rem;line-height:1.1;
  letter-spacing:-.028em;color:#fff}
.guide-cover-note{font-size:12px;color:var(--d-text)}
.guide-form [data-done] .btn{margin-top:14px}

@media(max-width:1024px){
  .post-cta{grid-template-columns:1fr;gap:26px;padding:36px 32px}
  .post-cta .btn-row{justify-content:flex-start}
  .guide-hero{grid-template-columns:1fr;gap:44px}
  .guide-form{position:static}
}
@media(max-width:640px){
  .post-cover,.post-backbar .wrap{padding-inline:20px}
  .post-body{font-size:1rem}
  .blog-empty{padding:40px 22px}
  .post-cta{padding:30px 22px}
}


/* ── Author card ───────────────────────────────────────────────────────────
   Sits at the foot of every article. A named human with a checkable profile
   is the trust signal an organisation byline cannot be, and this topic is
   somebody's front door. */
.author-card{display:flex;gap:20px;align-items:flex-start;max-width:760px;
  margin:0 auto;padding:24px;border:1px solid var(--line);border-radius:16px;
  background:var(--ground)}
.author-badge{flex:0 0 auto;width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  font-weight:600;font-size:19px;letter-spacing:.02em}
.author-body{min-width:0}
.author-body h3{margin:0 0 2px;font-size:17px}
.author-body p{margin:0 0 8px;font-size:14.5px;color:var(--muted);line-height:1.55}
.author-role{font-size:13px!important;color:var(--faint)!important;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px!important}
.author-links{margin:0!important}
.author-links a{color:var(--accent);font-weight:500;text-decoration:none;
  border-bottom:1px solid rgba(255,94,31,.35)}
.author-links a:hover{border-bottom-color:var(--accent)}
@media(max-width:560px){
  .author-card{flex-direction:column;gap:14px;padding:20px}
  .author-badge{width:48px;height:48px;font-size:17px}
}

/* ── Article diagrams ──────────────────────────────────────────────────────
   Inline SVG, per docs/07 §10, so they stay crisp, inherit the palette and
   carry real text that a screen reader and an extraction system can both
   read. The caption beneath restates the sequence in words on purpose. */
.ap-figure{margin:32px 0;padding:0}
.ap-figure .ap-diagram{display:block;width:100%;height:auto;
  max-width:100%;overflow:visible}
.ap-figure figcaption{margin-top:10px;font-size:13px;color:var(--muted);
  line-height:1.5}
@media(max-width:700px){
  /* A five-step flow will not fit a phone column, so let it scroll rather
     than shrink the labels to nothing. */
  .ap-figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ap-figure .ap-diagram{min-width:560px}
  .ap-figure figcaption{min-width:0}
}
/* Credit line under a third-party image. Required by every licence we
   publish under, so it is styled to be read, not hidden. */
.ap-figure .credit{margin-top:8px;font-size:12.5px;color:var(--faint)}
.ap-figure .credit a{color:var(--muted)}

/* Blog cards show the cover at the ratio it was composed at.
   The generic .mcard is 16/10, and cropping a 16/9 cover into it takes about
   5% off each side, which is exactly where the headline starts. These are
   designed covers with type on them, not decorative photographs, so the card
   matches the artwork rather than the other way round. */
.post-card>img{aspect-ratio:16/9}