/* ================================================================
   Shared site header — the "Midnight Intelligence" header design
   originally built for /pricing, now the header for every public
   page (index, domain-search, domain-transfer, register-a-domain,
   pricing). Self-contained: declares its own design tokens so any
   page can load just this file (+ style.css, already everywhere)
   and get a correctly-styled header without pulling in the rest of
   the pricing page's CSS.

   Login/Get Started use this file's own pp2-* button styles: the
   logged-in profile menu (.nav-profile*) and the currency dropdown
   (.currency-toggle*, mounted into #navCurrencyMount) reuse their
   existing real implementations from style.css/main.js/currency.js
   unchanged, exactly as they already work on every other page.
   ================================================================ */

:root{
  /* Same real brand tokens as public/css/style.css / client.css. */
  --pp2-surface:#ffffff;
  --pp2-surface-container-low:#f8f7fb;
  --pp2-surface-container-high:#eef1ff;
  --pp2-on-surface:#111827;
  --pp2-on-surface-variant:#64748b;
  --pp2-primary:#3b5bfd;
  --pp2-on-primary:#ffffff;
  --pp2-border:#eef1f6;
  --pp2-surface-dark:#0f172a;
  --pp2-radius-sm:8px;
  --pp2-shadow-card:0 1px 2px rgba(17,24,39,.04),0 1px 3px rgba(17,24,39,.06);
  --pp2-gutter:24px;
  --pp2-margin-desktop:64px;
  --pp2-margin-mobile:16px;
  --pp2-container-max:1440px;
}

.pp2-announce{width:100%;background:var(--pp2-surface-dark);color:#fff;text-align:center;padding:8px var(--pp2-margin-mobile);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;}
.pp2-announce .dim{opacity:.7;font-style:italic;margin-left:8px;}

.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;vertical-align:middle;}

.pp2-header{position:sticky;top:0;z-index:200;width:100%;background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--pp2-border);}
.pp2-header-inner{height:80px;max-width:var(--pp2-container-max);margin:0 auto;padding:0 var(--pp2-margin-mobile);display:flex;align-items:center;justify-content:space-between;gap:var(--pp2-gutter);}
.pp2-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;}
.pp2-brand .mark{width:28px;height:28px;flex-shrink:0;color:var(--pp2-primary);}
.pp2-brand .mark svg{width:100%;height:100%;}
.pp2-brand-name{font-family:'Manrope',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--pp2-on-surface);}
.pp2-nav{display:none;align-items:center;gap:32px;}
.pp2-nav a{font-size:14px;line-height:20px;letter-spacing:.01em;color:var(--pp2-on-surface-variant);text-decoration:none;font-weight:500;transition:color .15s;}
.pp2-nav a:hover{color:var(--pp2-primary);}
.pp2-nav a.active{color:var(--pp2-primary);font-weight:600;}
.pp2-header-cta{display:flex;align-items:center;gap:20px;}
.pp2-login{font-size:14px;font-weight:600;color:var(--pp2-on-surface-variant);text-decoration:none;}
.pp2-login:hover{color:var(--pp2-on-surface);}
.pp2-btn-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--pp2-primary);color:var(--pp2-on-primary);padding:10px 24px;border-radius:var(--pp2-radius-sm);font-size:14px;font-weight:600;letter-spacing:.01em;border:none;cursor:pointer;text-decoration:none;box-shadow:var(--pp2-shadow-card);transition:background .15s;}
.pp2-btn-primary:hover{background:#2540c9;}

@media(min-width:1024px){ .pp2-nav{display:flex;} }
@media(min-width:768px){ .pp2-header-inner{padding:0 var(--pp2-margin-desktop);} }