/* site-nav.css: the homepage's header, menu sheet and footer, for every page that is not the
   homepage (blog, comparisons, guides, legal). Copied from index.html's own rules, which stay
   inline there. Language switching is homepage-only, so the language rules are not here. */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
  .logo { font-family: "Anton", var(--display); font-weight: 400; font-size: 20px; line-height: 1; letter-spacing: .02em; color: var(--text); display: inline-flex; align-items: center; gap: .1em; }
  /* lockup: barbell-H mark + HIIGNITE. in Anton (see brand/hiignite-logo-ember) */
  .logo .logo-mark { height: 1.13em; width: auto; fill: var(--accent); flex: none; }
  .logo .logo-word { display: block; }
  .logo .logo-dot { display: inline-block; width: .176em; height: .176em; margin-left: .094em; background: var(--accent); }
  /* The leading HI of the wordmark carries the accent, like the block. */
  .logo .logo-hi { color: var(--accent-head); }
  /* theme toggle (light/dark switch) */
  .theme-toggle { position: relative; display: inline-flex; align-items: center; width: 58px; height: 32px; border-radius: 100px; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; padding: 3px; flex: none; transition: border-color .18s, background .18s; }
  .theme-toggle:hover { border-color: var(--accent-line); }
  .theme-toggle .tt-thumb { position: absolute; top: 3px; left: 3px; width: 26px; height: 24px; border-radius: 100px; background: var(--accent); box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb),.7); transition: transform .24s var(--ease-out); }
  html.t-light .theme-toggle .tt-thumb { transform: translateX(26px); }
  .theme-toggle .tt-ic { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; color: var(--muted); transition: color .2s; }
  .theme-toggle .tt-ic svg { width: 15px; height: 15px; }
  .theme-toggle .tt-moon { color: #11100e; }
  html.t-light .theme-toggle .tt-moon { color: var(--muted); }
  html.t-light .theme-toggle .tt-sun { color: #11100e; }
  /* nav */
  header.nav { position: sticky; top: 0; z-index: 50; background: rgba(20,20,26,.72); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
  .nav-links { display: flex; gap: 30px; }
  .nav-links a { font-size: 14px; font-weight: 500; color: var(--text-2); transition: color .16s; }
  .nav-links a:hover { color: var(--text); }
  .nav-cta { display: flex; gap: 12px; align-items: center; }
  .nav-cta .btn-ghost { display: inline-flex; }
  @media (max-width: 900px) { .nav-links { display: none; } .nav-cta .btn-ghost { display: none; } }
  /* Mobile nav (< 900px, one layout for every phone and small tablet): logo · CTA ·
     menu button. Four flexible items (logo, language pill, theme toggle, CTA) clipped
     the CTA at 320px; language, theme and the section links move into the sheet. */
  .nav-menu-btn { display: none; width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); place-items: center; cursor: pointer; flex: none; transition: background .18s, border-color .18s, color .18s; }
  .nav-menu-btn svg { width: 20px; height: 20px; }
  .nav-menu-btn .ic-close { display: none; }
  .nav-menu-btn[aria-expanded="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
  .nav-menu-btn[aria-expanded="true"] .ic-open { display: none; }
  .nav-menu-btn[aria-expanded="true"] .ic-close { display: block; }
  .nav-sheet, .nav-dim { display: none; }
  @media (max-width: 900px) {
    .nav-inner { gap: 10px; }
    .nav-inner .logo { min-width: 0; flex-shrink: 1; }
    .nav-cta { gap: 8px; }
    .nav-cta .theme-toggle { display: none; }
    .nav-cta .btn-accent { height: 40px; padding: 0 16px; font-size: 14px; }
    .nav-menu-btn { display: grid; }

    .nav-dim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(8,8,12,.5); opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; }
    .nav-sheet { display: block; position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain; background: var(--bg-2); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px -30px rgba(0,0,0,.5); transform: translateY(104%); visibility: hidden; transition: transform .28s var(--ease-out), visibility .28s; }
    html.nav-open { overflow: hidden; }
    html.nav-open .nav-dim { opacity: 1; visibility: visible; }
    html.nav-open .nav-sheet { transform: none; visibility: visible; }
  }
  /* 600–900px: a 420px panel under the menu button instead of a full-width sheet */
  @media (min-width: 600px) and (max-width: 900px) {
    .nav-sheet { top: 78px; bottom: auto; left: auto; right: 24px; width: 420px; max-height: calc(100dvh - 96px); border-bottom: 1px solid var(--line); border-radius: 18px; padding-bottom: 22px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); transform: translateY(-8px); opacity: 0; transition: transform .22s var(--ease-out), opacity .22s, visibility .22s; }
    .nav-sheet .sheet-grab { display: none; }
    html.nav-open .nav-sheet { opacity: 1; }
  }
  @media (max-width: 599.98px) { .nav-inner { padding: 0 16px; } }
  /* CTA never wraps or clips: below 340px "Start free" becomes "Start" */
  @media (max-width: 339.98px) { .nav-cta .cta-rest { display: none; } .nav-cta .btn-accent { padding: 0 14px; } }
  /* wordmark collapses to the mark alone under 300px */
  @media (max-width: 299.98px) { .nav-inner .logo-word { display: none; } .nav-inner .logo { font-size: 26px; } }
  @media (prefers-reduced-motion: reduce) { .nav-sheet, .nav-dim { transition: none; } }
  .sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 14px; }
  .sheet-links { display: grid; }
  .sheet-links a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--text); }
  .sheet-links a::after { content: "→"; font-family: var(--body); color: var(--accent-text); }
  .sheet-sec { display: flex; justify-content: space-between; margin: 22px 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
  .sheet-theme { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
  .sheet-theme button { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-family: var(--body); font-weight: 600; font-size: 14px; color: var(--text-2); transition: background .16s, color .16s; }
  .sheet-theme button[aria-checked="true"] { background: var(--text); color: var(--bg); }
  .sheet-cta { width: 100%; justify-content: center; margin-top: 22px; min-height: 50px; }
  footer { border-top: 1px solid var(--line); padding: 60px 0 40px; margin-top: 40px; }
  .foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
  .foot-grid p { font-size: 14px; color: var(--muted); max-width: 30ch; margin-top: 14px; }
  .foot-links { display: flex; gap: 56px; flex-wrap: wrap; }
  .foot-col h3 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }
  .foot-col a { display: block; font-size: 15px; color: var(--text-2); margin-bottom: 10px; transition: color .15s; }
  .foot-col a:hover { color: var(--accent-text); }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 12px; }
html.t-light header.nav { background: rgba(248,242,232,.74); }

  /* footer sign-up: the homepage's newsletter form, on every page */
  .waitlist-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 460px; }
  .waitlist-form input { flex: 1; min-width: 0; font-family: var(--body); font-size: 15px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--text); outline: none; transition: border-color .18s, box-shadow .18s; }
  .waitlist-form input::placeholder { color: var(--muted); }
  .waitlist-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
  /* ALTCHA widget — full-width row under the input+button, themed via design tokens so it tracks light/dark. */
  .waitlist-form altcha-widget {
    flex: 0 0 100%; max-width: 100%; font-family: var(--body); font-size: 13px;
    --altcha-border-width: 1px; --altcha-border-radius: 10px; --altcha-max-width: 100%;
    --altcha-color-base: var(--bg-2); --altcha-color-border: var(--line-2);
    --altcha-color-border-focus: var(--accent); --altcha-color-text: var(--text);
    --altcha-color-footer-bg: var(--bg-2); --altcha-color-error-text: #e5484d;
  }
  .waitlist-note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 15px; letter-spacing: .02em; }
  .waitlist-note.is-ok { color: var(--accent-text); }
  .waitlist-note.is-err { color: #e5484d; }
  /* Footer newsletter — the waitlist form, demoted out of the conversion path. */
  .foot-news { margin-top: 22px; max-width: 360px; }
  .foot-news h3 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
  .foot-news .waitlist-form { max-width: 360px; }
  .foot-news .waitlist-note { margin-top: 12px; }
  @media (max-width: 560px) { .waitlist-form { flex-direction: column; align-items: stretch; } .waitlist-form .btn { width: 100%; justify-content: center; } }