/* ══════════════════════════════════════════════════════════════════
   site-chrome.css — ONE header and ONE footer for every page.

   Loaded last on every public page, after design-system.css and
   marketing-page.css / seo-page.css / tool-pages.css, so it is the
   final word on the chrome no matter what a page did before.

   The markup it styles is generated by scripts/chrome/chrome.js and
   applied by scripts/chrome/normalize-chrome.js. Behaviour lives in
   /assets/js/site-nav.js. Do not hand-edit a page's header or footer —
   the next normalise run will overwrite it.

   Colour law, same as the app: black and white carry the chrome.
   Lavender only marks the brand dot and the current page.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --chrome-max:1180px;
  --chrome-pad:clamp(20px,4vw,40px);
  --chrome-h:64px;
  --chrome-ez:cubic-bezier(.25,1,.35,1);
}

/* ══════════════ HEADER ══════════════ */
/* The bar is full-bleed (so the sticky blur spans the viewport) while
   its CONTENTS sit inside a centred max-width column. The padding
   trick does that without an inner wrapper. */
.nav{
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center;
  gap:clamp(16px,2.6vw,32px);
  height:var(--chrome-h);
  padding:0 max(var(--chrome-pad), calc((100% - var(--chrome-max)) / 2));
  background:color-mix(in srgb, var(--paper,#ffffff) 82%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
          backdrop-filter:blur(16px) saturate(180%);
  border:0; box-shadow:none;
  transition:box-shadow .25s var(--chrome-ez);
}
.nav.stuck{ box-shadow:0 1px 0 var(--line,rgba(11,11,15,.08)); }

/* landing / pricing wrap their row in .nav-in — flatten it so the
   bar's own padding sets the geometry for both historical markups */
.nav .nav-in{
  flex:1; min-width:0;
  width:100%; max-width:none; height:auto; margin:0; padding:0;
  display:flex; align-items:center; gap:clamp(16px,2.6vw,32px);
}

/* ── brand ── */
.nav-brand,
.nav .logo{
  display:inline-flex; align-items:center; flex:none;
  font-family:var(--font-body,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif);
  font-size:17px; font-weight:700; letter-spacing:-.035em;
  color:var(--ink,#0B0B0F); text-decoration:none;
}
.nav-brand .dot,
.nav .logo .logo-dot,
.nav .logo .brand-dot,
.nav .logo span{ color:var(--lav,#5B44E4); }

/* The mark alone carries the brand — no wordmark beside it. The logo
   artwork only fills ~58% of its own square, so the box is set larger
   than the N appears; 38px renders a mark of roughly 22px. */
.nav-brand img,
.nav .logo img{
  width:38px; height:38px; display:block; flex:none;
}

/* ── the link row ── */
.nav-mid,
.nav-links{
  display:flex; align-items:center; gap:clamp(4px,1vw,10px);
  margin:0; min-width:0;
}

/* Top-level items: the two menu triggers and the two plain links all
   render identically, so the bar reads as one row of peers rather
   than buttons-next-to-links. */
.nav-top,
.nav-trigger,
.nav-mid > a,
.nav-links a{
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 10px; border:0; background:none; border-radius:8px;
  font-family:var(--font-body,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif);
  font-size:14px; font-weight:500; letter-spacing:-.014em;
  color:var(--ink-mute,#5B5B63); text-decoration:none; white-space:nowrap;
  cursor:pointer;
  transition:color .18s var(--chrome-ez), background .18s var(--chrome-ez);
}
.nav-top:hover,
.nav-trigger:hover,
.nav-mid > a:hover,
.nav-links a:hover{ color:var(--ink,#0B0B0F); }

/* current page / current section */
.nav-top[aria-current="page"],
.nav-mid > a[aria-current="page"],
.nav-links a[aria-current="page"],
.nav-trigger[aria-current="true"],
.nav-links a.on{ color:var(--ink,#0B0B0F); font-weight:600; }

.nav-caret{
  width:13px; height:13px; flex:none; margin-top:1px;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.55; transition:transform .22s var(--chrome-ez), opacity .18s var(--chrome-ez);
}
.nav-group.open .nav-caret{ transform:rotate(180deg); opacity:1; }
.nav-group.open .nav-trigger{ color:var(--ink,#0B0B0F); background:var(--paper-deep,#FAFAFA); }

/* ── dropdown panel ──
   A bare list of five words would just be a slower flat nav, so each
   row carries a one-line blurb: the label says where it goes, the
   blurb says whether it's worth going. */
.nav-group{ position:relative; }
.nav-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:80;
  min-width:330px; padding:7px;
  background:var(--paper,#fff); border-radius:14px;
  box-shadow:var(--shadow-3,0 0 0 1px rgba(11,11,15,.08), 0 26px 60px -34px rgba(11,11,15,.28));
  animation:nav-pop .16s var(--chrome-ez);
}
@keyframes nav-pop{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }
.nav-panel[hidden]{ display:none; }
.nav-panel a{
  display:block; padding:9px 11px; border-radius:9px;
  text-decoration:none; white-space:normal;
  transition:background .15s var(--chrome-ez);
}
.nav-panel a:hover,
.nav-panel a:focus-visible{ background:var(--paper-deep,#FAFAFA); }
.nav-panel a strong{
  display:block;
  font-size:13.5px; font-weight:600; letter-spacing:-.016em;
  color:var(--ink,#0B0B0F);
}
.nav-panel a span{
  display:block; margin-top:2px;
  font-size:12.5px; font-weight:450; line-height:1.45;
  color:var(--ink-mute,#5B5B63);
}
.nav-panel a[aria-current="page"] strong{ color:var(--lav-deep,#4733C0); }

.nav-r{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }

/* ── header buttons — identical everywhere ── */
.nav .btn-ink,
.nav .btn-dark{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; padding:0 17px;
  border:0; border-radius:999px;
  background:var(--ink,#0B0B0F); color:#fff !important;
  font-size:13.5px; font-weight:600; letter-spacing:-.015em;
  text-decoration:none; white-space:nowrap;
  transition:opacity .18s var(--chrome-ez);
}
.nav .btn-ink:hover,
.nav .btn-dark:hover{ background:var(--ink,#0B0B0F); opacity:.87; transform:none; }
.nav .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; padding:0 14px;
  border:0; border-radius:999px;
  background:transparent; color:var(--ink-mute,#5B5B63) !important;
  font-size:13.5px; font-weight:500; letter-spacing:-.015em;
  text-decoration:none; white-space:nowrap;
  transition:color .18s var(--chrome-ez), background .18s var(--chrome-ez);
}
.nav .btn-ghost:hover{ color:var(--ink,#0B0B0F) !important; background:var(--paper-deep,#FAFAFA); border:0; }
.nav .btn-line{
  box-shadow:inset 0 0 0 1px var(--line-strong,rgba(11,11,15,.15));
  background:transparent; color:var(--ink,#0B0B0F) !important;
}
.nav .btn-line:hover{ box-shadow:inset 0 0 0 1px var(--ink,#0B0B0F); }

/* the signed-in widget auth.js injects — forced onto the same metrics */
.nav .nuvex-nav-auth{ gap:8px !important; }
.nav .nuvex-nav-auth ._dash{
  height:36px !important; border-radius:999px !important;
  padding:0 16px !important; font-size:13.5px !important;
  background:var(--ink,#0B0B0F) !important; color:#fff !important;
}
.nav .nuvex-nav-auth ._av{
  width:34px !important; height:34px !important;
  border:0 !important; border-radius:50% !important;
  background:var(--ink,#0B0B0F) !important; color:#fff !important;
  font-size:12.5px !important; font-weight:600 !important;
}
.nav .nuvex-nav-auth ._menu{
  border:0 !important; border-radius:14px !important;
  background:var(--paper,#ffffff) !important;
  box-shadow:var(--shadow-3,0 0 0 1px rgba(11,11,15,.08), 0 26px 60px -34px rgba(11,11,15,.28)) !important;
  padding:6px !important;
}

/* ── burger ── */
.nav-burger{
  display:none; flex:none; order:3;
  width:38px; height:38px;
  align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
  border:0; border-radius:9px; background:none; cursor:pointer;
}
.nav-burger span{
  display:block; width:17px; height:1.7px; border-radius:2px;
  background:var(--ink,#0B0B0F);
  transition:transform .24s var(--chrome-ez), opacity .18s var(--chrome-ez);
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.7px) rotate(-45deg); }

/* ══════════════ MOBILE SHEET ══════════════
   Below 820px the previous chrome set `.nav-mid{display:none}` and
   stopped there — which left phones with no site navigation at all.
   The links now move into a full-height sheet instead of vanishing. */
@media (max-width:820px){
  .nav-burger{ display:flex; }
  .nav-r{ order:2; margin-left:auto; }
  .nav-r .btn-ghost{ display:none; }

  .nav-mid{
    position:fixed; inset:var(--chrome-h) 0 0; z-index:75;
    display:flex; flex-direction:column; align-items:stretch;
    gap:0; padding:8px var(--chrome-pad) 40px;
    background:var(--paper,#fff);
    overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s var(--chrome-ez), transform .2s var(--chrome-ez), visibility .2s;
  }
  .nav-sheet-open .nav-mid{ opacity:1; visibility:visible; transform:none; }
  .nav-sheet-open{ overflow:hidden; }

  /* In the sheet a section name is a heading, not a control — tapping
     it must never be a dead end, so its panel stays open. */
  .nav-group{ position:static; }
  .nav-trigger{
    width:100%; justify-content:flex-start; padding:16px 2px 8px;
    font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-faint,#8E8E96); pointer-events:none;
  }
  .nav-caret{ display:none; }
  .nav-panel{
    position:static; min-width:0; padding:0; margin:0;
    background:none; box-shadow:none; animation:none;
  }
  .nav-panel[hidden]{ display:block; }
  .nav-panel a{ padding:11px 2px; border-radius:0; box-shadow:inset 0 -1px 0 var(--line,rgba(11,11,15,.08)); }
  .nav-panel a strong{ font-size:15px; }
  .nav-top{
    padding:16px 2px; border-radius:0;
    font-size:15px; font-weight:600; color:var(--ink,#0B0B0F);
    box-shadow:inset 0 -1px 0 var(--line,rgba(11,11,15,.08));
  }
}
@media (max-width:560px){
  :root{ --chrome-h:58px; }
}

/* legacy: /account and /settings once put their links in .nav-r */
.nav .nav-link{
  padding:0 2px;
  font-size:14px; font-weight:500; letter-spacing:-.014em;
  color:var(--ink-mute,#5B5B63); text-decoration:none; white-space:nowrap;
  background:none; border:0;
  transition:color .18s var(--chrome-ez);
}
.nav .nav-link:hover{ color:var(--ink,#0B0B0F); }
.nav .nav-link.active{ color:var(--ink,#0B0B0F); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  .nav-panel{ animation:none; }
  .nav-mid,.nav-burger span,.nav-caret{ transition:none; }
}

/* ══════════════ FOOTER ══════════════
   One four-column sitemap plus a legal strip. This is the page's second
   navigation: every section of the site is reachable from the bottom of
   every page, which is the cheapest fix for "I can't find the dashboard".
   ═══════════════════════════════════════════════════════════════════ */
footer.foot{
  display:block;
  margin:0; padding:0;
  border:0; border-top:1px solid var(--line,rgba(11,11,15,.08));
  background:var(--paper,#ffffff);
}
footer.foot .foot-inner{
  width:100%; max-width:var(--chrome-max); margin-inline:auto;
  padding:clamp(40px,5vw,56px) var(--chrome-pad) clamp(24px,3vw,32px);
  display:block; text-align:left;
}

/* sitemap grid */
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);
  gap:clamp(24px,3vw,40px);
  align-items:start;
}
.foot-about{ max-width:30ch; }
.foot-brand{
  display:inline-flex; align-items:center;
  font-size:17px; font-weight:700; letter-spacing:-.035em;
  color:var(--ink,#0B0B0F); text-decoration:none;
}
.foot-brand .dot{ color:var(--lav,#5B44E4); }
.foot-blurb{
  margin-top:10px;
  font-size:13px; font-weight:450; line-height:1.6; color:var(--ink-mute,#5B5B63);
  letter-spacing:-.008em;
}
.foot-col{ display:flex; flex-direction:column; gap:0; min-width:0; }
.foot-col h4,
.foot-col .foot-col-title{
  margin:0 0 12px;
  font-family:var(--font-body,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif);
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint,#8E8E96);
}
.foot-col a{
  display:block; padding:5px 0;
  font-size:13.5px; font-weight:450; letter-spacing:-.012em;
  color:var(--ink-mute,#5B5B63); text-decoration:none;
  transition:color .18s var(--chrome-ez);
}
.foot-col a:hover{ color:var(--ink,#0B0B0F); }

/* legal strip */
.foot-base{
  margin-top:clamp(32px,4vw,44px); padding-top:20px;
  border-top:1px solid var(--line,rgba(11,11,15,.08));
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.foot-copy{
  font-size:12.5px; font-weight:450; color:var(--ink-faint,#8E8E96); letter-spacing:-.008em;
}
.foot-legal{ display:flex; flex-wrap:wrap; gap:18px; }
.foot-legal a{
  font-size:12.5px; font-weight:450; color:var(--ink-faint,#8E8E96); text-decoration:none;
  transition:color .18s var(--chrome-ez);
}
.foot-legal a:hover{ color:var(--ink,#0B0B0F); }

/* legacy single-row footers keep working while they exist */
.foot-nav{ display:flex; flex-wrap:wrap; gap:18px; }
.foot-nav a{
  font-size:13px; font-weight:450; color:var(--ink-mute,#5B5B63); text-decoration:none;
  transition:color .18s var(--chrome-ez);
}
.foot-nav a:hover{ color:var(--ink,#0B0B0F); }
.foot-links{ display:flex; flex-wrap:wrap; gap:20px; }
.foot-links a{
  font-size:13px; font-weight:450; color:var(--ink-mute,#5B5B63); text-decoration:none;
}
.foot-links a:hover{ color:var(--ink,#0B0B0F); }

@media (max-width:900px){
  .foot-grid{ grid-template-columns:1fr 1fr; row-gap:32px; }
  .foot-about{ grid-column:1/-1; max-width:44ch; }
}
@media (max-width:520px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-base{ justify-content:flex-start; }
}