/* The top bar and footer every page shares. scripts/build-chrome.mjs writes their markup into each page;
   common.js opens and closes the menus. Class names start with bar- and foot- so they never meet a page's own
   styles. The look follows the site's Apple-style language: a white translucent bar, white menu panels with a
   soft shadow, an olive Get started pill and a light grey footer. */
:root{--bar-h:52px}
.bar,.foot{--b-bg:#ffffff;--b-ink:#1d1d1f;--b-ink-2:#424245;--b-muted:#6e6e73;--b-line:#d2d2d7;--b-line-soft:rgba(0,0,0,.08);--b-olive:#5A6A17;--b-olive-dark:#434F10;--b-olive-50:#f6f8e8;--b-alt:#f5f5f7;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;color:var(--b-ink)}
.bar *,.foot *{box-sizing:border-box}
.bar ul,.foot ul{margin:0;padding:0;list-style:none}
.bar a,.foot a{text-decoration:none;color:inherit}
.bar svg,.foot svg{display:block;flex:none}
.bar :focus-visible,.foot :focus-visible{outline:2px solid #71831F;outline-offset:3px;border-radius:8px}

/* ---------- Top bar ---------- */
.bar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.bar.scrolled{border-bottom-color:var(--b-line-soft)}
.bar-in{display:flex;align-items:center;gap:18px;height:var(--bar-h);width:100%;max-width:1400px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
@media (min-width:600px){.bar-in{padding-inline:max(clamp(16px,3vw,36px),env(safe-area-inset-left)) max(clamp(16px,3vw,36px),env(safe-area-inset-right))}}
.bar-brand{display:flex;align-items:center;gap:9px;flex:none;padding:9px 0}
.bar-brand img{width:26px;height:26px;object-fit:contain}
.bar-brand .bar-word{width:auto;height:15px}
.bar-nav{flex:1;display:flex;justify-content:center}
.bar-links{display:flex;gap:2px}
.bar-btn,.bar-login,.bar-cta,.bar-menu{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bar-btn{display:flex;align-items:center;gap:5px;height:36px;padding:0 13px;border-radius:999px;font-size:.9375rem;font-weight:500;color:var(--b-ink);opacity:.85;transition:background .2s,opacity .2s}
.bar-btn:hover,.bar-btn[aria-expanded="true"]{opacity:1;background:rgba(0,0,0,.05)}
.bar-btn[data-current]{color:var(--b-olive);opacity:1}
.bar-btn .chev{width:11px;height:11px;transition:transform .25s}
.bar-btn[aria-expanded="true"] .chev,.bar-cta[aria-expanded="true"] .chev{transform:rotate(180deg)}
.bar-drop{position:relative}
.bar-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;min-width:300px;max-width:min(560px,calc(100vw - 32px));padding:10px;border-radius:20px;background:var(--b-bg);box-shadow:0 24px 60px -20px rgba(0,0,0,.3),0 0 0 1px var(--b-line-soft);animation:bar-pop .18s ease-out}
.bar-panel.wide ul{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.bar-panel.wide li.span{grid-column:1 / -1}
.bar-panel.right{left:auto;right:0;transform:none}
@keyframes bar-pop{from{opacity:0;margin-top:-6px}to{opacity:1;margin-top:0}}
.bar-panel a{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:14px;transition:background .15s}
.bar-panel a:hover,.bar-panel a:focus-visible{background:var(--b-alt)}
.bar-panel a[aria-current="page"]{background:var(--b-olive-50)}
.bar-panel b{display:block;font-size:.9375rem;font-weight:600;color:var(--b-ink)}
.bar-panel small{display:block;margin-top:1px;font-size:.8125rem;color:var(--b-muted)}
.bar-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--b-olive-50);color:var(--b-olive)}
.bar-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
@media (min-width:960px){.bar-nav + .bar-actions{margin-left:0}}
.bar-login{display:flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--b-line);font-size:.8125rem;font-weight:500;color:var(--b-ink);transition:border-color .2s,background .2s}
.bar-login:hover{border-color:var(--b-ink)}
.bar-login svg{width:14px;height:14px;fill:none;stroke:var(--b-olive);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bar-cta{display:flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;background:var(--b-olive);color:#fff;font-size:.8125rem;font-weight:500;transition:background .2s}
.bar-cta:hover{background:var(--b-olive-dark)}
.bar-cta .chev{width:11px;height:11px}
.bar-menu{display:none;position:relative;width:44px;height:44px;margin-right:-10px;border-radius:12px}
.bar-menu span{position:absolute;left:13px;right:13px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .3s,top .3s}
.bar-menu span:nth-child(1){top:17px}
.bar-menu span:nth-child(2){top:25px}
.bar.menu-open .bar-menu span:nth-child(1){top:21px;transform:rotate(45deg)}
.bar.menu-open .bar-menu span:nth-child(2){top:21px;transform:rotate(-45deg)}
.bar-sheet{display:none}

@media (max-width:959px){
  .bar-nav,.bar-actions > .bar-login{display:none}
  .bar-actions{margin-left:auto}
  .bar-menu{display:block}
  /* The open sheet hangs below the bar and fills the rest of the screen. It is out of the page's flow, so opening
     and closing it never moves the page or its scroll position; the page behind it stands still meanwhile
     (html.bar-lock, set by common.js). The sheet's inner block is always a hair taller than the sheet, so a swipe
     scrolls the sheet, never the page. */
  .bar-sheet{display:block;position:absolute;top:100%;left:0;right:0;height:0;overflow:hidden;background:#fff;transition:height .4s cubic-bezier(.2,.7,.2,1)}
  .bar.menu-open{background:#fff}
  .bar.menu-open .bar-sheet{height:calc(100vh - var(--bar-h));height:calc(100dvh - var(--bar-h));overflow-y:auto;overscroll-behavior:contain}
  .bar-sheet-in{display:grid;align-content:start;gap:22px;min-height:calc(100% + 1px);padding:14px 16px 32px;padding-bottom:max(32px,env(safe-area-inset-bottom))}
  /* The lock sits on body, not html: body already has overflow-x:hidden, and an overflow on html would stop that
     value reaching the viewport and turn body into the scroll container, which unsticks the bar. */
  body.bar-lock{overflow:hidden}
  html:not(.js) .bar-menu{display:none}
  html:not(.js) .bar-sheet{position:static;height:auto}
  .bar-cta{position:relative}
  .bar-cta::before{content:"";position:absolute;inset:-6px -4px} /* a 44 px tap target around the 32 px pill */
  .bar-sheet h2{margin:0 0 8px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--b-olive)}
  .bar-sheet ul{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .bar-sheet a{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px;border-radius:14px;background:var(--b-alt);font-size:.9375rem;font-weight:500;line-height:1.25}
  .bar-sheet a[aria-current="page"]{background:var(--b-olive-50);color:var(--b-olive)}
  .bar-sheet .bar-ic{width:32px;height:32px;border-radius:10px;background:#fff}
  .bar-sheet .bar-ic svg{width:18px;height:18px}
  .bar-sheet .bar-login{display:flex;justify-content:center;height:48px;font-size:.9375rem}
  .bar-panel,.bar-panel.right{position:fixed;top:calc(var(--bar-h) + 8px);left:16px;right:16px;width:auto;min-width:0;max-width:none;transform:none;max-height:calc(100vh - var(--bar-h) - 24px);max-height:calc(100dvh - var(--bar-h) - 24px);overflow-y:auto}
}
@media (max-width:380px){
  .bar-sheet ul{grid-template-columns:1fr}
  .bar-brand .bar-word{height:13px}
  .bar-cta{padding:0 12px}
}
@media (max-width:330px){.bar-brand .bar-word{display:none}}

/* ---------- Footer ---------- */
.foot{background:var(--b-alt);color:var(--b-muted);font-size:.8125rem;line-height:1.5}
.foot-in{width:100%;max-width:1400px;margin:0 auto;padding:44px clamp(16px,3vw,36px) 28px;padding-inline:max(clamp(16px,3vw,36px),env(safe-area-inset-left)) max(clamp(16px,3vw,36px),env(safe-area-inset-right));padding-bottom:max(28px,env(safe-area-inset-bottom))}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px;padding-bottom:26px;border-bottom:1px solid var(--b-line)}
.foot-brand .bar-brand{color:var(--b-ink)}
.foot-brand p{max-width:26em;margin:14px 0 0}
.foot h2{margin:0 0 10px;font-size:.8125rem;font-weight:600;color:var(--b-ink);letter-spacing:-.005em}
.foot li + li{margin-top:8px}
.foot-col a{color:var(--b-muted)}
.foot-col a:hover{color:var(--b-ink);text-decoration:underline;text-underline-offset:2px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:18px}
.foot-bottom a{color:var(--b-muted)}
.foot-bottom a:hover{color:var(--b-ink)}
.foot-bottom span + span a + a{margin-left:18px}
@media (max-width:859px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1}}
@media (pointer:coarse){.foot-col a{display:inline-block;padding:6px 0}.foot li + li{margin-top:2px}}

@media (prefers-reduced-motion:reduce){.bar *,.foot *{transition:none!important;animation:none!important}}
@media print{.bar,.foot{display:none!important}}