/* Main menu with dropdowns. Shared by every page (loaded after the page's own CSS). */
.nav{ position:static; display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.menu{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); margin:0; padding:0; list-style:none; }
.menu > li{ position:relative; }
.nav .menu > li > a{ display:block; padding:10px 0; }
.nav .sub{ /* scoped: pages use .sub for subtitles too */
  display:none; position:absolute; top:100%; left:-18px; z-index:50; min-width:250px;
  margin:0; padding:10px 0; list-style:none; text-align:left;
  background:#f2f0ec; border:1px solid rgba(20,43,58,.16);
}
.has-sub:hover > .sub, .has-sub:focus-within > .sub{ display:block; }
.nav .sub a:not(.pill){
  display:block; padding:9px 18px; font-size:14px; font-weight:500; opacity:.82;
  white-space:nowrap; text-decoration:none; color:var(--fg);
}
.nav .sub a:not(.pill):hover, .nav .sub a:not(.pill):focus-visible{ opacity:1; text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:2px; text-underline-offset:5px; }
.nav .sub a[aria-current="page"]{ opacity:1; text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:2px; text-underline-offset:5px; }
.sub .sub-all{ border-bottom:1px solid rgba(20,43,58,.12); margin-bottom:6px; }
.menu-btn{
  display:none; height:38px; padding:0 16px; border:1px solid var(--fg); border-radius:999px;
  background:transparent; color:var(--fg); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
}
.menu-btn:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; }
.chrome .nav > .pill{ display:inline-flex; }

@media (max-width:980px){
  .chrome .nav{ order:0; flex-basis:auto; overflow:visible; gap:10px; }
  .chrome .nav > .pill{ height:38px; padding:0 16px; font-size:13.5px; }
  .menu-btn{ display:inline-flex; align-items:center; }
  .nav .menu{
    display:none; position:fixed; left:0; right:0; top:var(--menu-top, 72px); bottom:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:0; overflow-y:auto;
    padding:8px var(--gutter, 18px) max(28px, env(safe-area-inset-bottom, 0px));
    background:#f2f0ec; border-top:1px solid rgba(20,43,58,.16);
  }
  .nav.is-open .menu{ display:flex; }
  .nav .menu > li{ border-bottom:1px solid rgba(20,43,58,.12); padding:6px 0 10px; }
  .nav .menu > li > a:not(.pill){ display:block; font-size:18px; font-weight:700; opacity:1; padding:12px 0 6px; }
  .nav .sub, .has-sub:hover > .sub, .has-sub:focus-within > .sub{ display:block; position:static; min-width:0; padding:0; border:0; background:transparent; }
  .nav .sub a:not(.pill){ display:block; padding:9px 0; font-size:16px; }
  .sub .sub-all{ display:none; }
}
.nav .menu > li > a[aria-current]{ opacity:1; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; text-decoration-color:var(--brand); }
@media (max-width:980px){ .nav .menu > li > a[aria-current]{ text-decoration:none; } }
.chrome.menu-open{ z-index:100; }

/* Logo lockup, standard everywhere: wordmark and tagline share one width inside the brackets. */
.lockup{ display:inline-flex; flex-direction:column; align-items:stretch; gap:6px; padding:8px 14px; width:auto; }
.lockup img, .foot-brand .lockup img, .site-foot .foot-brand .lockup img{ display:block; height:30px; width:auto; }
.lockup span{ display:block; width:0; min-width:100%; font-size:10.5px; font-weight:500; letter-spacing:.02em; line-height:1; white-space:nowrap; text-align:justify; text-align-last:justify; }
@media (max-width:720px){
  .lockup{ padding:7px 12px; gap:5px; }
  .lockup img, .foot-brand .lockup img, .site-foot .foot-brand .lockup img{ height:24px; }
  .lockup span{ font-size:8.6px; }
}

/* Bracket proportions taken from the brand lockup: stroke ~4% of height, arms ~19% of height. */
.lockup{ padding:10px 16px 9px; gap:7px; }
.lockup::before, .lockup::after{ content:""; position:absolute; top:0; bottom:0; width:12px; border:3px solid var(--brand); }
.lockup::before{ left:0; border-right:0; }
.lockup::after{ right:0; border-left:0; }
.lockup span{ color:var(--fg-soft, rgba(20,43,58,.68)); }
.foot .lockup span, .site-foot .lockup span{ color:rgba(255,255,255,.72); }
@media (max-width:720px){
  .lockup{ padding:8px 13px 7px; gap:5px; }
  .lockup::before, .lockup::after{ width:10px; border-width:2.5px; }
  .lockup::before{ border-right:0; }
  .lockup::after{ border-left:0; }
}
/* Even inner space: the tagline's descenders (p, y) need ~2px more below so the ink sits the same distance from both bracket arms. */
.lockup{ padding-bottom:11.5px; }
@media (max-width:720px){ .lockup{ padding-bottom:9px; } }
/* Footer links get "padding:6px 0"; give the footer lockup back the same inner space as the header one. */
.foot a.lockup, .site-foot a.lockup{ display:inline-flex; padding:10px 16px 11.5px; }
@media (max-width:720px){ .foot a.lockup, .site-foot a.lockup{ padding:8px 13px 9px; } }

/* Footer on white (every page) */
.foot, .site-foot{ background:#fff !important; color:var(--fg-soft, rgba(20,43,58,.68)) !important; border-top:1px solid rgba(20,43,58,.14); font-size:13.5px; line-height:1.6; }
.foot h2, .site-foot h2{ color:var(--fg, #142B3A) !important; font-size:11.5px; letter-spacing:.07em; }
.foot a, .site-foot a{ color:inherit; }
.foot a:hover, .site-foot a:hover, .foot a:focus-visible, .site-foot a:focus-visible{ color:var(--fg, #142B3A) !important; }
.foot a:focus-visible, .site-foot a:focus-visible{ outline-color:var(--fg, #142B3A); }
.foot-legal, .site-foot .foot-legal{ color:var(--fg-faint, rgba(20,43,58,.52)) !important; border-top-color:rgba(20,43,58,.12) !important; font-size:12px; }
.foot .lockup, .site-foot .lockup{ color:var(--fg, #142B3A); }
.foot .lockup span, .site-foot .lockup span{ color:var(--fg-soft, rgba(20,43,58,.68)); }
.band + .foot{ border-top:0; }
/* Shorter bracket arms */
.lockup::before, .lockup::after{ width:7px; }
@media (max-width:720px){ .lockup::before, .lockup::after{ width:6px; } }

/* Mega panels: each tab opens its own panel on desktop; tabs with a demo add the animated steps card (nav.js runs it).
   Markup comes from scroll-landing-work/tools/sync_nav.py. Phones use the plain .sub lists instead. */
.mega{ display:none; }
@media (min-width:981px){
  .menu > li.has-mega{ position:static; }
  .has-mega > .sub, .has-mega:hover > .sub, .has-mega:focus-within > .sub{ display:none; }
  .mega{
    --mx:clamp(28px,3vw,48px);
    position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:55;
    width:min(1180px, calc(100vw - 2 * clamp(16px,3.4vw,44px)));
    display:grid; grid-template-columns:minmax(210px,270px) minmax(0,1fr); gap:clamp(24px,3vw,48px);
    max-height:calc(100vh - var(--hdr, 72px) - 16px); overflow-y:auto;
    padding:clamp(28px,2.8vw,40px) var(--mx); text-align:left; color:var(--fg);
    background:#fff; border:1px solid rgba(20,43,58,.14);
    visibility:hidden; transition:visibility 0s linear .2s; /* grace period so the pointer can travel from tab to panel */
  }
  .mega.has-demo{ grid-template-columns:minmax(200px,250px) minmax(0,1fr) minmax(250px,290px); }
  .mega::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:18px; }
  .has-mega:hover > .mega, .has-mega:focus-within > .mega{ visibility:visible; transition-delay:0s; }
  .menu:has(.has-mega:hover) .has-mega:not(:hover) > .mega{ visibility:hidden; transition:none; } /* switching tabs swaps at once */
}
.mega p{ margin:0; }
.mega-label{ font-size:12.5px; font-weight:700; letter-spacing:.045em; color:var(--fg-soft, rgba(20,43,58,.68)); }
.mega-intro{ padding-right:clamp(16px,2vw,32px); border-right:1px solid rgba(20,43,58,.12); }
.nav .mega a.mega-head{
  display:block; margin-top:12px; font-size:clamp(24px,2vw,30px); font-weight:500; letter-spacing:-.034em; line-height:1.1;
  text-wrap:balance; color:var(--fg); opacity:1;
}
.mega-items{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px clamp(20px,2.4vw,36px); align-content:start; }
.mega:not(.has-demo) .mega-items{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.nav .mega a.mega-item{ text-decoration:none; display:block; padding:10px 0; color:var(--fg); opacity:1; white-space:normal; }
.mega-item b{ display:block; font-size:16.5px; font-weight:600; letter-spacing:-.012em; line-height:1.3; }
.mega-item span{ display:block; margin-top:4px; font-size:14px; font-weight:400; line-height:1.45; color:var(--fg-soft, rgba(20,43,58,.68)); }
.nav .mega a.mega-head:hover, .nav .mega a.mega-head:focus-visible, .nav .mega a.mega-head[aria-current],
.nav .mega a.mega-item:hover b, .nav .mega a.mega-item:focus-visible b, .nav .mega a.mega-item[aria-current] b{
  color:var(--fg); text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:2px; text-underline-offset:5px;
}
.mega-demo{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; align-self:start; padding:clamp(22px,2vw,30px); background:#f2f0ec; }
.mega-steps{ position:relative; margin:0; padding:0; list-style:none; display:grid; gap:14px; }
.mega-steps::before, .mega-steps::after{ content:""; position:absolute; left:4px; top:8px; width:1px; background:rgba(20,43,58,.18); bottom:8px; }
.mega-steps::after{ bottom:auto; height:var(--p, 0px); background:var(--brand); transition:height .6s var(--ease, ease); }
.mega-steps li{ position:relative; padding-left:24px; font-size:14.5px; font-weight:500; line-height:1.35; color:var(--fg-faint, rgba(20,43,58,.52)); transition:color .4s var(--ease, ease); }
.mega-steps li::before{
  content:""; position:absolute; z-index:1; left:0; top:.35em; width:9px; height:9px; box-sizing:border-box;
  border:1.5px solid rgba(20,43,58,.3); border-radius:50%; background:#f2f0ec; transition:background .4s, border-color .4s;
}
.mega-steps li.is-done{ color:var(--fg-soft, rgba(20,43,58,.68)); }
.mega-steps li.is-done::before{ border-color:var(--brand); }
.mega-steps li.is-on{ color:var(--fg); }
.mega-steps li.is-on::before{ border-color:var(--brand); background:var(--brand); }
.mega-demo .pill{ margin-top:4px; }
@media (min-width:981px) and (max-width:1180px){
  .mega.has-demo{ grid-template-columns:minmax(0,1fr) minmax(240px,270px); }
  .mega.has-demo .mega-intro{ grid-column:1 / -1; border-right:0; padding:0 0 18px; border-bottom:1px solid rgba(20,43,58,.12); }
  .mega.has-demo .mega-items{ grid-template-columns:minmax(0,1fr); }
  .mega:not(.has-demo) .mega-items{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* Lockup, tight fit (2026-10-03): the tagline's own width sets the lockup width, the wordmark (trimmed to its letters)
   stretches to exactly that width, the two sit close, and the brackets close in around them. Overrides the rules above. */
.lockup, .foot a.lockup, .site-foot a.lockup{ display:inline-flex; flex-direction:column; align-items:stretch; width:max-content; gap:5px; padding:6px 9px 7.5px; }
.lockup img, .foot-brand .lockup img, .site-foot .foot-brand .lockup img{ display:block; width:0; min-width:100%; height:auto; }
.lockup span{ width:auto; min-width:0; font-size:11.5px; letter-spacing:.03em; text-align:left; text-align-last:auto; }
.lockup::before, .lockup::after{ width:6px; border-width:2.5px; }
@media (max-width:720px){
  .lockup, .foot a.lockup, .site-foot a.lockup{ gap:4px; padding:5px 8px 6.5px; }
  .lockup span{ font-size:9.5px; }
  .lockup::before, .lockup::after{ width:5px; border-width:2px; }
}
/* Brackets hug the text: shorter arms, about 3px of air between each stroke and the letters */
.lockup, .foot a.lockup, .site-foot a.lockup{ padding:4px 6px 5.5px; }
.lockup::before, .lockup::after{ width:4px; }
@media (max-width:720px){
  .lockup, .foot a.lockup, .site-foot a.lockup{ padding:3.5px 5px 5px; }
  .lockup::before, .lockup::after{ width:3.5px; }
}

/* menu intro heading: readable size and spacing, no link underline (was 14px, underlined and cramped) */
html .nav .mega a.mega-head{ font-size:clamp(22px,1.8vw,28px) !important; line-height:1.22 !important; letter-spacing:-.02em !important; word-spacing:.04em; text-decoration:none !important; max-width:16ch; }
html .nav .mega a.mega-head:hover{ text-decoration:underline !important; text-decoration-color:var(--brand,#29B5E8); text-underline-offset:5px; }