/* Metric-matched fallback for Proxima Nova. size-adjust is MEASURED, not
   guessed, so the fallback occupies the same box as the webfont and the swap
   cannot move the page.

   This lived inline in landing/pricing/blog/tools only, while content.css and
   the token stack below name 'pn-fallback' for EVERY page — so /features,
   /partners, /tips, /terms, /privacy and /refund were silently falling through
   to un-adjusted Arial and had no metric matching at all. Defined here, it
   reaches every page that loads tokens.css. */
@font-face{font-family:'pn-fallback';src:local('Arial'),local('Liberation Sans'),local('Arimo'),local('Nimbus Sans'),local('Helvetica');size-adjust:98.9%;ascent-override:100%;descent-override:100%;line-gap-override:0%}

/* Second fallback face, tuned for DISPLAY text only.
   Headings and body copy do not need the same compromise value, and forcing one
   number on both is why the .page-title boundaries could never be closed: a body
   sweep put the optimum at 98.9%, but at that value the shared .page-title wraps
   to one line FEWER than Proxima on four pages, each at its own width —
   /partners 412px (69px of shift), /features 390 + 540, /tools 320 + 340,
   /blog 480.

   Measured on Windows against REAL Arial (this VPS has none, so it cannot be
   calibrated here), checking the 6 failing points against 11 currently-clean
   control points so a fix cannot silently break a width that already worked:
       98.9% -> 2/8 fixed        103% -> 7/8
       101%  -> 3/8              104% -> 8/8, zero controls broken  <-- chosen
       102%  -> 5/8              105%+ -> 8/8 but regresses /partners at 428px
   Body copy stays on the 98.9% face above; only .page-title uses this one. */
@font-face{font-family:'pn-fallback-display';src:local('Arial'),local('Liberation Sans'),local('Arimo'),local('Nimbus Sans'),local('Helvetica');size-adjust:104%;ascent-override:100%;descent-override:100%;line-gap-override:0%}

:root{
  /* backgrounds */
  --bg:#0a0a0a;
  --surface:#1a1a1a;
  --surface-2:#111;
  /* borders */
  --border:#222;
  --border-2:#333;
  --border-soft:#444;
  /* text */
  --text:#fff;
  --text-soft:#ddd;
  --text-body:#ccc;
  --text-muted:#bbb;
  --text-muted-2:#aaa;
  --text-faint:#888;
  --text-dim:#666;
  /* brand */
  --primary:#4499ff;
  --link:#0066cc;
  --link-hover:#0052a3;
  --amber:#f5a623;
  --green:#155724;
  --error:#ff8888;
  /* type */
  --font:Arial, sans-serif;

  /* ── shared shell tokens ───────────────────────────────────────────────
     These used to live in landing.html's inline <style> only, which is why
     the logo was 22px there and 18px everywhere else. Defined once here so
     every page that loads tokens.css renders the same header. */
  --font-display:'proxima-nova','pn-fallback',Arial,sans-serif;
  --font-body:'proxima-nova','pn-fallback',Arial,sans-serif;
  --blue:#4499ff;
  --blue-dark:#0066cc;
  --blue-deeper:#0052a3;
  --radius:12px;
  --radius-sm:8px;
  --logo-size:20px;
  --logo-size-sm:18px;
  /* Type floor. Nothing user-facing may go below --fs-min. Badges and chips
     use --fs-chip; real navigation and body copy use --fs-ui and up. */
  --fs-min:13px;
  --fs-chip:13px;
  --fs-ui:15px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CANONICAL SITE SHELL  (sh-* namespace)
   ─────────────────────────────────────────────────────────────────────────
   One header and one footer for every public marketing page. The markup is
   injected server-side by sendPage() in index.js at the <!--SHELL_NAV--> and
   <!--SHELL_FOOTER--> markers, so a link added here appears on all pages at
   once. Before this existed there were SIX different nav item sets, THREE
   logo sizes and THREE footer implementations across 12 files.

   The sh- prefix deliberately does not collide with the older `nav`,
   `.header`, `.logo`, `.footer-links` rules still present in some pages'
   inline <style> blocks, so nothing inherits half of one system and half
   of the other.

   No backdrop-filter here on purpose: blur on a sticky element repaints the
   whole strip on every scroll frame and measurably hurts mobile paint cost.
   A solid near-opaque background looks the same and costs nothing.
   ═════════════════════════════════════════════════════════════════════════ */

/* Hidden by translate rather than left:-9999px. The off-screen-left trick adds
   to the document's scrollable width (measured: 429px against a 390px viewport),
   which shows up as phantom horizontal overflow in every audit even though
   nothing visible is out of bounds. */
.sh-skip{position:absolute;left:0;top:0;transform:translateY(-200%);background:var(--surface);color:var(--text);padding:10px 16px;border-radius:0 0 8px 0;z-index:400;font-size:var(--fs-ui);font-weight:700;text-decoration:none}
.sh-skip:focus{transform:translateY(0)}

/* Height is pinned so a webfont swap cannot re-wrap the nav and shove the
   page down — that exact bug measured CLS 0.278 on /partners. */
.sh-header{background:var(--surface-2);border-bottom:1px solid var(--border);padding:14px 40px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:200;gap:16px;min-height:66px}

.sh-logo{font-family:var(--font-display);font-size:var(--logo-size);font-weight:800;color:var(--text);text-decoration:none;letter-spacing:.5px;white-space:nowrap;flex:0 0 auto}
.sh-logo span{color:var(--blue)}

.sh-nav{display:flex;align-items:center;gap:0}
.sh-nav a{color:var(--text-muted);font-family:var(--font-body);font-size:var(--fs-ui);font-weight:600;text-decoration:none;margin-left:22px;white-space:nowrap;transition:color .2s}
.sh-nav a:hover{color:var(--text)}
.sh-nav a[aria-current="page"]{color:var(--text)}
/* The one saturated blue on the page is reserved for actions. Everything
   else is greyscale so the eye learns that blue means "this is clickable".
   Styled on the CLASS, not as `.sh-nav a.sh-cta` — the mobile bar copy of this
   button sits outside .sh-nav, and scoping it to the nav left it rendering as a
   plain underlined link in the header on every phone. */
a.sh-cta{background:var(--blue-dark);color:#fff;padding:10px 22px;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:var(--fs-ui);font-weight:800;text-decoration:none;
  white-space:nowrap;line-height:1.2;display:inline-flex;align-items:center}
a.sh-cta:hover{background:var(--blue-deeper);color:#fff;text-decoration:none}
a.sh-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media(max-width:1080px){
  .sh-header{padding:14px 24px}
  .sh-nav a{margin-left:16px}
}

/* ── mobile: disclosure menu ──────────────────────────────────────────────
   Seven items do not fit one phone row. The previous approach — a nowrap row
   with overflow-x:auto and justify-content:flex-end — kept the header height
   stable but opened ALREADY SCROLLED TO THE END: a 390px visitor saw a clipped
   "ign In" and the CTA, with Features, Pricing, Free Tools, Blog and Business
   Tools & Services all off-screen left. Five of seven links invisible.

   The panel is position:absolute, so opening it cannot shift the page (no CLS),
   and the CTA stays in the bar where it is always tappable. */
.sh-burger{display:none}
@media(max-width:899px){
  .sh-header{padding:10px 14px;min-height:58px;flex-wrap:nowrap;gap:10px;position:sticky}
  .sh-logo{font-size:var(--logo-size-sm);margin-right:auto}
  .sh-burger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:42px;height:38px;background:transparent;border:1px solid var(--border-2);border-radius:var(--radius-sm);
    color:var(--text);font-size:17px;line-height:1;cursor:pointer;padding:0}
  .sh-burger:hover{border-color:var(--blue)}
  .sh-burger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .sh-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;
    background:var(--surface-2);border-bottom:1px solid var(--border);box-shadow:0 18px 40px rgba(0,0,0,.6);
    padding:6px 0 10px;max-height:calc(100vh - 58px);overflow-y:auto}
  .sh-header.is-open .sh-nav{display:flex}
  .sh-nav a{margin-left:0;padding:13px 18px;font-size:16px;border-bottom:1px solid var(--border)}
  .sh-nav a:last-child{border-bottom:none}
  /* The signup CTA lives in the bar on mobile, so its duplicate inside the
     panel would be a second identical link — hide it rather than repeat it. */
  .sh-nav a.sh-cta{display:none}
  .sh-cta-bar{display:inline-flex!important;flex:0 0 auto;padding:9px 16px}
}
/* ── dc-20260802: header CTA was clipped 8px at 375px ──────────────────────────
   The row needs 369px of a 347px content box and every child is
   flex:0 0 auto + nowrap, so the CTA overflowed the right edge (measured
   right=383 vs clientW=375; ancestor overflow-x:hidden meant it was cut
   rather than scrollable, which is why it read as broken instead of tight).
   Reclaim 43px from padding, gap, logo and button below 430px. min-height
   stays pinned at 58px — do not let this reintroduce the nav CLS. */
@media(max-width:430px){
  .sh-header{padding:10px 10px;gap:8px}
  .sh-logo{font-size:16.5px;letter-spacing:.3px}
  .sh-cta-bar{padding:9px 12px!important;font-size:14px}
  .sh-burger{width:38px}
}

@media(min-width:900px){
  /* `a.sh-cta-bar`, not `.sh-cta-bar` — the base button rule is `a.sh-cta`
     (0,1,1), which outranks a bare class and left two identical Start Free Week
     buttons in the desktop header. */
  a.sh-cta-bar{display:none}
}
/* No JS: show the links as a wrapped row so every one stays reachable. */
.no-js-nav{display:none}

.sh-footer{background:var(--surface-2);border-top:1px solid var(--border);padding:44px 24px;text-align:center;margin-top:0}
.sh-footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;margin-bottom:20px}
.sh-footer-links a{color:var(--text-muted-2);font-family:var(--font-body);font-size:var(--fs-ui);text-decoration:none;transition:color .2s}
.sh-footer-links a:hover{color:var(--text)}
.sh-footer-copy{color:var(--text-muted);font-size:14px}
.sh-footer-copy a{color:var(--blue);text-decoration:underline}
.sh-footer :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}