/* Service Blue — shared shell. ONE LIGHT design language across every surface (matches DESIGN.md / the
   marketing site). Linked on every page BEFORE its inline <style>, so page rules still win — this file
   carries the brand tokens + shared components (nav, WCAG focus ring, empty state, the Tier-2 CRUD kit). */

:root{
  color-scheme: light;  /* tells the browser the UA "base canvas" (behind all content) is light */
  /* LIGHT brand palette — the single source of color across all surfaces */
  --canvas:#F8FAFC; --surface:#FFFFFF; --border:#E7ECF2; --border-strong:#D7DEE8;
  --ink:#0B1D33; --ink-2:#475569; --ink-muted:#64748B; --ink-faint:#94A3B8;
  --blue:#0A66FF; --blue-hover:#0954D6; --orange:#FF6A00;
  --ok:#16A34A; --warn:#EA580C; --bad:#DC2626;
  --paid-tx:#16A34A; --paid-bg:#ECFDF3; --paid-bd:#ABEFC6;
  --owed-tx:#DC2626; --owed-bg:#FEF3F2; --owed-bd:#FECDCA;
  --urg-tx:#EA580C;  --urg-bg:#FFF4ED;  --urg-bd:#FFD6A8;
  --info-bg:#EFF6FF; --info-bd:#B2DDFF;
  --sh-elev:0 1px 2px rgba(16,24,40,.05),0 1px 1px rgba(16,24,40,.04);
  --sh-float:0 1px 2px rgba(16,24,40,.06),0 6px 14px rgba(16,24,40,.10);
  /* legacy aliases — existing pages still reference these; repointed to LIGHT so shared bits theme together.
     --navy now = ink (dark text), --paper = white (surface / on-color text), --line = hairline border. */
  --navy:#0B1D33; --paper:#FFFFFF; --gray:#64748B; --line:#E7ECF2;
  --ink-on-orange:#1a0f00;
  /* added 2026-06-10 (component-kit completion): the two values that were hand-copied across pages. */
  --tint-neutral:#F1F5F9;                       /* the calm neutral chip/tint gray (was raw hex in 4+ files) */
  --focus-ring:0 0 0 3px rgba(10,102,255,.15);  /* the blue input focus glow (was hand-written in 8 files) */
}

/* DARK MODE — overrides the same tokens, so anything using var(--…) themes automatically. Toggle = sb-ui.js. */
:root[data-theme="dark"]{
  color-scheme: dark;  /* THE FIX: base canvas goes dark too -> no white "layer underneath" flashing on tab/page repaints */
  --canvas:#0B1220; --surface:#171F30; --border:#2A3850; --border-strong:#3A4A66;  /* surface lifted off canvas + lighter borders so cards separate in dark (DT W2) */
  --ink:#E8EEF6; --ink-2:#B6C2D2; --ink-muted:#8A99AD; --ink-faint:#5F6F85;
  --blue:#4D8DFF; --blue-hover:#6BA1FF; --orange:#FF8A3D;
  --ok:#22C55E; --warn:#FB923C; --bad:#F87171;
  --paid-tx:#4ADE80; --paid-bg:#0E2A1C; --paid-bd:#1C5138;
  --owed-tx:#F87171; --owed-bg:#2A1416; --owed-bd:#5A2A2E;
  --urg-tx:#FB923C;  --urg-bg:#2A1A0E;  --urg-bd:#5A3A1C;
  --info-bg:#0E1E36; --info-bd:#244A6E;
  --sh-elev:0 1px 2px rgba(0,0,0,.45),0 1px 1px rgba(0,0,0,.35);
  --sh-float:0 2px 6px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.5);
  --navy:#E8EEF6; --paper:#171F30; --gray:#8A99AD; --line:#2A3850;
  --ink-on-orange:#1a0f00;
  --tint-neutral:#1B2536;
  --focus-ring:0 0 0 3px rgba(77,141,255,.30);
}
:root[data-theme="dark"] body{ background:var(--canvas); color:var(--ink); }
:root[data-theme="dark"] img.bg{ filter:brightness(.85); }

/* SHARED LEFT NAV (sb-ui.js injects .sbside on every app page) — a grouped, persistent sidebar: the premium
   pattern for an 11-section back office. Collapses to a drawer on mobile. Themes via tokens (dark mode = free). */
:root{ --sb-side-w:236px; }
/* Stable shell from the FIRST PAINT (no JS wait) so moving between pages never blinks/jumps: reserve the rail
   space + paint a placeholder rail via :has(.sbtop) (every app page has a .sbtop), hide the old in-page header,
   and cross-fade page-to-page with the View Transitions API. .has-sbside (added by sb-ui.js) is the fallback
   for browsers without :has(). The soft canvas bg on <html> means any blank frame is never harsh white. */
html{ background:var(--canvas); }
html:has(.sbtop) .sbtop, .has-sbside .sbtop{ display:none; }   /* the sidebar carries the brand + nav now */
@media (min-width:901px){
  html:has(.sbtop) body, .has-sbside body{ padding-left:var(--sb-side-w); }
  html:has(.sbtop) body::before, .has-sbside body::before{ content:""; position:fixed; left:0; top:0; bottom:0; width:var(--sb-side-w);
    background:var(--surface); border-right:1px solid var(--border); z-index:1; }  /* rail placeholder until JS fills it */
}
/* View Transitions removed: on real Chrome the cross-document cross-fade could flash white between pages.
   Instant navigation + instant (cached) CSS + color-scheme:dark = clean, flash-free page swaps. */
/* OPTIMISTIC REVEAL: a returning owner (the inline <head> boot adds .sb-authed from a prior successful login) sees
   the page shell at FIRST PAINT instead of a blank white wait while the auth network call resolves — that wait was
   the navigation flash. sb-auth.js removes .sb-authed (-> reverts to the inline display:none) if the check fails. */
html.sb-authed #app{ display:block !important; }

.sbside{ position:fixed; top:0; left:0; bottom:0; width:var(--sb-side-w); z-index:70;
  background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.sbside-brand{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:19px; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; display:flex; align-items:flex-start; padding:18px 20px 10px; }
.sbside-brand:hover{ opacity:.85; }
.sbside-brand .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); margin-left:3px; margin-top:4px; }
.sbside-scroll{ flex:1 1 auto; overflow-y:auto; padding:2px 12px 14px; scrollbar-width:thin; }
.sbside-scroll::-webkit-scrollbar{ width:6px } .sbside-scroll::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:3px }
.sbside-grp{ margin-top:15px; } .sbside-grp:first-child{ margin-top:4px; }
.sbside-grp-h{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); padding:6px 11px 5px; }
.sbside a{ display:flex; align-items:center; gap:11px; padding:9px 11px; margin:1px 0; border-radius:9px;
  color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:600; line-height:1.15; font-family:"Hanken Grotesk",sans-serif; }
.sbside a svg{ width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:2; opacity:.8; }
.sbside a:hover{ background:var(--tint-neutral); color:var(--ink); }
.sbside a.active{ background:var(--info-bg); color:var(--blue); }
.sbside a.active svg{ opacity:1; }
.sbside a.locked{ opacity:.5; cursor:not-allowed; }   /* menu-lock: section locked until the office is active */
.sbside-foot{ border-top:1px solid var(--border); padding:10px 12px; }
.sbside-dark{ display:flex; align-items:center; gap:9px; width:100%; background:transparent; border:1px solid var(--border-strong);
  border-radius:9px; padding:9px 11px; cursor:pointer; color:var(--ink-2); font-size:13.5px; font-weight:700; font-family:"Hanken Grotesk",sans-serif; }
.sbside-dark svg{ width:16px; height:16px; flex:0 0 16px; fill:none; stroke:currentColor; stroke-width:2; }
.sbside-dark:hover{ background:var(--tint-neutral); color:var(--ink); border-color:var(--ink-faint); }

/* mobile (<=900px): off-canvas drawer behind a slim top bar with a hamburger */
.sbside-top{ display:none; } .sbside-scrim{ display:none; }
@media (max-width:900px){
  .sbside{ transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--sh-float); }
  .sbside.open{ transform:translateX(0); }
  .sbside-top{ display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:65; height:54px; padding:0 12px;
    background:var(--surface); border-bottom:1px solid var(--border); }
  .sbside-burger{ background:transparent; border:0; padding:7px; margin-left:-7px; cursor:pointer; color:var(--ink); display:inline-flex; }
  .sbside-burger svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; }
  .sbside-top .sbside-brand{ padding:0; font-size:18px; }
  .sbside-top .sbside-brand .dot{ margin-top:3px; }
  .sbside-scrim{ display:block; position:fixed; inset:0; background:rgba(11,29,51,.45); z-index:69; opacity:0; pointer-events:none; transition:opacity .2s; }
  .sbside-scrim.open{ opacity:1; pointer-events:auto; }
}

/* WCAG 2.4.7 (focus visible) + 2.4.11: a 2px blue ring (3:1+ on white) on EVERY interactive element. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:8px; }

/* Unified top nav: the brand mark is ALWAYS home; child pages get one consistent "back to My Office". */
.sbtop{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.sbtop .mark{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:20px; color:var(--ink);
  text-decoration:none; display:inline-flex; align-items:center; }
.sbtop .mark .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange);
  display:inline-block; margin-left:2px; transform:translateY(-1px); }
.sbtop a.mark:hover{ opacity:.85; }
/* the back link is a visible CHIP, not bare text — a low-software-literacy owner must read it as "press to get out". */
.sbback{ color:var(--ink-2); text-decoration:none; font-weight:600; font-size:14px; min-height:44px;
  padding:0 14px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface);
  display:inline-flex; align-items:center; gap:4px; box-shadow:var(--sh-elev); }
.sbback:hover{ color:var(--ink); border-color:var(--ink-faint); }

/* Shared empty state — an encouraging "nothing here yet" so a brand-new tenant never sees a blank screen. */
.sbempty{ text-align:center; color:var(--ink-muted); background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:26px 20px; font-size:15px; line-height:1.5; margin:16px 0; box-shadow:var(--sh-elev); }
.sbempty .sbempty-t{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:18px;
  color:var(--ink); margin-bottom:6px; display:block; }

/* shared cross-surface link — threads related areas (the money loop: who owes you <-> profit). 44px tap. */
.sblink{ color:var(--blue); text-decoration:none; font-weight:600; font-size:14px; min-height:44px;
  display:inline-flex; align-items:center; gap:4px; }
.sblink:hover{ color:var(--blue-hover); }

/* ─── Tier-2 CRUD kit: shared fields, bottom-sheet, buttons, toast, confirm, upgrade gate (light) ─── */
/* buttons — blue is the primary action (DESIGN.md); orange is reserved for the brand mark + true urgency. */
.sb-btn{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:15px; min-height:44px; padding:0 18px;
  border:none; border-radius:8px; background:var(--blue); color:#fff; cursor:pointer; box-shadow:var(--sh-elev); }
.sb-btn:hover{ background:var(--blue-hover); }
.sb-btn-ghost{ font-family:"Hanken Grotesk"; font-weight:600; font-size:15px; min-height:44px; padding:0 16px;
  border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--ink-2); cursor:pointer; }
.sb-btn-ghost:hover{ color:var(--ink); border-color:var(--ink-faint); }
.sb-btn-danger{ font-family:"Hanken Grotesk"; font-weight:700; font-size:15px; min-height:44px; padding:0 16px;
  border:1px solid var(--owed-bd); border-radius:8px; background:var(--owed-bg); color:var(--owed-tx); cursor:pointer; }
.sb-btn-danger:hover{ background:#FDE7E7; }
.sb-btn:disabled,.sb-btn-ghost:disabled,.sb-btn-danger:disabled{ opacity:.55; cursor:default; }
/* form fields */
.sb-field{ display:block; margin:0 0 14px; }
.sb-field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.sb-field label .opt{ color:var(--ink-faint); font-weight:400; }
.sb-input,.sb-select,.sb-textarea{ width:100%; min-height:44px; padding:11px 13px; font-family:inherit; font-size:16px;
  color:var(--ink); background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; }
.sb-input:focus,.sb-select:focus,.sb-textarea:focus{ outline:none; border-color:var(--blue); box-shadow:var(--focus-ring); }
.sb-textarea{ min-height:80px; resize:vertical; }
.sb-input::placeholder,.sb-textarea::placeholder{ color:var(--ink-faint); }
/* choice / category chips */
.sb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sb-chip{ font-family:inherit; font-size:14px; font-weight:600; min-height:44px; padding:0 16px; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--ink-2); }
/* selected = BLUE ("you are here") */
.sb-chip.sel{ background:var(--blue); color:#fff; border-color:var(--blue); }
/* bottom-sheet / modal panel for create + edit forms (mobile-first; centers on desktop) */
.sbsheet-back{ position:fixed; inset:0; background:rgba(11,29,51,.45); opacity:0; pointer-events:none;
  transition:opacity .2s; z-index:50; display:flex; align-items:flex-end; justify-content:center; }
.sbsheet-back.on{ opacity:1; pointer-events:auto; }
.sbsheet{ width:100%; max-width:560px; max-height:92vh; overflow:auto; background:var(--surface); border:1px solid var(--border);
  border-radius:16px 16px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom)); transform:translateY(14px);
  transition:transform .2s; box-shadow:var(--sh-float); }
.sbsheet-back.on .sbsheet{ transform:translateY(0); }
@media(min-width:600px){ .sbsheet-back{ align-items:center; } .sbsheet{ border-radius:14px; } }
.sbsheet h3{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:20px; margin:0 0 16px; color:var(--ink); }
.sbsheet-actions{ display:flex; gap:10px; margin-top:6px; } .sbsheet-actions .sb-btn,.sbsheet-actions .sb-btn-ghost{ flex:1; }
/* toast */
#sb-toasts{ position:fixed; top:14px; left:0; right:0; display:flex; flex-direction:column; align-items:center;
  gap:8px; z-index:60; pointer-events:none; }
.sb-toast{ pointer-events:auto; max-width:90vw; font-size:14px; font-weight:600; padding:11px 16px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); box-shadow:var(--sh-float);
  opacity:0; transform:translateY(-8px); transition:opacity .25s,transform .25s; }
.sb-toast.show{ opacity:1; transform:translateY(0); }
.sb-toast.ok{ border-color:var(--paid-bd); } .sb-toast.bad{ border-color:var(--owed-bd); color:var(--owed-tx); } .sb-toast.warn{ border-color:var(--urg-bd); }
/* branded confirm dialog */
.sb-modal-back{ position:fixed; inset:0; background:rgba(11,29,51,.45); opacity:0; transition:opacity .2s; z-index:70;
  display:flex; align-items:center; justify-content:center; padding:20px; }
.sb-modal-back.show{ opacity:1; }
.sb-modal{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; box-shadow:var(--sh-float); }
.sb-modal-msg{ font-size:16px; line-height:1.5; color:var(--ink); margin:0 0 18px; }
.sb-modal-row{ display:flex; gap:10px; } .sb-modal-row button{ flex:1; }
/* Tier-2 upgrade gate — shown when a back-office route 403s tier_upgrade_required for a lower tier */
.sbgate-upgrade{ background:var(--info-bg); border:1px solid var(--info-bd); border-radius:10px; padding:22px; text-align:center; }
.sbgate-upgrade h3{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:20px; margin:0 0 8px; color:var(--ink); }
.sbgate-upgrade p{ color:var(--ink-2); font-size:15px; line-height:1.5; margin:0 0 16px; }

/* ─── RULE 2 — Avatars: a staff member's face wherever their name appears. Built by sbAvatar() in sb-ui.js. ─── */
.sb-avatar{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:50%;
  overflow:hidden; font-family:"Bricolage Grotesque"; font-weight:800; line-height:1; letter-spacing:-.01em;
  vertical-align:middle; user-select:none; }
.sb-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.sb-avatar.sm{ width:28px; height:28px; font-size:11px; }
.sb-avatar.md{ width:40px; height:40px; font-size:15px; }
.sb-avatar.lg{ width:64px; height:64px; font-size:24px; }
/* deterministic CALM tints only (never owed-red) — sbAvatar() picks one from the name hash */
.sb-avatar.t0{ background:var(--tint-neutral); color:var(--ink-2); }
.sb-avatar.t1{ background:var(--info-bg); color:var(--blue); }
.sb-avatar.t2{ background:var(--paid-bg); color:var(--paid-tx); }
.sb-avatar.ring{ box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--border); } /* for overlapping crew stacks */

/* ─── RULE 3 — Person-type icons: client | team | settings. Distinct shapes, currentColor stroke. sbPersonIcon(). ─── */
.pi{ display:inline-flex; vertical-align:middle; flex:0 0 auto; width:16px; height:16px; }
.pi svg{ width:100%; height:100%; display:block; }
.pi.lg{ width:20px; height:20px; }
.pi-client{ color:var(--ink-muted); }   /* the tenant's customer */
.pi-team{ color:var(--blue); }           /* internal tech/teammate */
.pi-settings{ color:var(--ink-muted); }  /* account / config */

/* ═══ KIT COMPLETION 2026-06-10 — the recurring blocks pages kept re-rolling inline (see styleguide.html).
   All NEW selectors: existing pages are unchanged until migrated. Prefer these over bespoke per-page CSS. ═══ */

/* CARD — one surface container (was 8 divergent per-page .card defs, radius 10/12/14/16, padding 14–24). */
.sb-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; box-shadow:var(--sh-elev); }
.sb-card.accent-ok{ border-left:4px solid var(--paid-bd); }    .sb-card.accent-warn{ border-left:4px solid var(--urg-bd); }
.sb-card.accent-bad{ border-left:4px solid var(--owed-bd); }   .sb-card.accent-info{ border-left:4px solid var(--info-bd); }

/* BADGE — one status pill, four meanings (was .badge/.st/.pill/.rolepill/.age, 5–6 variants). Color is NOT the
   sole signal: always include a word/icon inside (WCAG 1.4.1). */
.sb-badge{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; line-height:1;
  padding:5px 10px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); }
.sb-badge.ok{ background:var(--paid-bg); color:var(--paid-tx); border-color:var(--paid-bd); }
.sb-badge.warn{ background:var(--urg-bg);  color:var(--urg-tx);  border-color:var(--urg-bd); }
.sb-badge.bad{ background:var(--owed-bg); color:var(--owed-tx); border-color:var(--owed-bd); }
.sb-badge.info{ background:var(--info-bg); color:var(--blue); border-color:var(--info-bd); }
.sb-badge.neutral{ background:var(--tint-neutral); color:var(--ink-2); border-color:var(--border); }

/* HEADLINE big-number block — the 6 near-identical .headline/.big/.sub copies, unified (fluid clamp). */
.sb-headline{ background:var(--surface); border:1px solid var(--border); border-radius:12px; text-align:center;
  padding:20px 16px; box-shadow:var(--sh-elev); margin-bottom:16px; }
.sb-headline .sb-big{ font-family:"Bricolage Grotesque"; font-weight:800; color:var(--ink); line-height:1; font-size:clamp(40px,12vw,56px); }
.sb-headline .sb-sub{ color:var(--ink-muted); font-size:14px; margin-top:6px; }

/* NEED-LINK GATE — promote the .gate block that was copy-pasted into 10 pages. */
.sbgate{ background:var(--info-bg); border:1px solid var(--info-bd); border-radius:10px; padding:18px 16px;
  color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.sbgate b{ color:var(--ink); }

/* SMS-CONSENT (10DLC/CTIA) — the compliant request.html pattern, standardized so displayed === logged consent.
   Box UNCHECKED by default; inject the business name via textContent ONLY (XSS-safe); Terms/Privacy stay static links. */
.sb-smsbox{ margin-top:18px; border:1px solid var(--info-bd); border-radius:10px; padding:14px 15px; background:var(--info-bg); }
.sb-smshead{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:14px; color:var(--ink); margin-bottom:5px; line-height:1.3; }
.sb-smsdesc{ font-size:12.5px; color:var(--ink-2); line-height:1.45; }
.sb-smsconsent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2); font-weight:400;
  margin-top:11px; padding-top:11px; border-top:1px solid var(--border); text-align:left; line-height:1.45; }
.sb-smsconsent a{ color:var(--blue); font-weight:600; }
.sb-smsconsent input{ appearance:none; -webkit-appearance:none; width:22px; height:22px; margin-top:1px; flex-shrink:0;
  border:2px solid var(--border-strong); border-radius:5px; background:var(--surface); cursor:pointer; position:relative; }
.sb-smsconsent input:checked{ background:var(--blue); border-color:var(--blue); }
.sb-smsconsent input:checked::after{ content:""; position:absolute; left:7px; top:3px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.sb-smsconsent input:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ─── SHARED MARKETING TOP NAV (pricing/about/contact/privacy/terms) — ONE component with a mobile
   hamburger so the link row collapses into a menu instead of clipping at small widths. Markup:
   <header class="sitebar"><a class="brand">…</a><details class="navmenu"><summary><svg…></summary>
   <nav class="sitenav">…links…</nav></details></header>   (pure-CSS <details> toggle, no JS). ─── */
.sitebar{ display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:980px; margin:0 auto; padding:18px 22px; }
.sitebar .brand{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; }
.sitebar .brand .dot{ color:var(--orange); }
.navmenu{ position:relative; }
.navmenu>summary{ display:none; list-style:none; }
.navmenu>summary::-webkit-details-marker{ display:none; }
.navmenu>.sitenav{ display:flex; flex-wrap:wrap; gap:6px; }   /* desktop: links inline (overrides the <details> closed-hide) */
.sitenav a{ color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:600; padding:8px 12px; border-radius:999px; min-height:40px; display:inline-flex; align-items:center; }
.sitenav a:hover{ color:var(--ink); background:var(--surface); }
.sitenav a[aria-current=page]{ color:var(--blue); background:rgba(10,102,255,.08); }
/* secondary in-page section nav (the Terms page anchors: AI Disclosure / Call Recording / SMS) */
.secnav{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 24px; }
.secnav a{ background:var(--surface); border:1px solid var(--border-strong); border-radius:999px; padding:7px 14px; color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:600; }
.secnav a:hover{ color:var(--ink); border-color:var(--ink-faint); }
@media(max-width:600px){
  .navmenu>summary{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer;
    color:var(--ink); border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); }
  .navmenu>summary svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .navmenu[open]>summary{ border-color:var(--blue); color:var(--blue); }
  .navmenu:not([open])>.sitenav{ display:none; }
  .navmenu[open]>.sitenav{ display:flex; flex-direction:column; flex-wrap:nowrap; gap:2px; position:absolute; right:0; top:52px;
    min-width:190px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh-float); padding:8px; z-index:60; }
  .navmenu[open]>.sitenav a{ padding:11px 14px; }
}
