/* Shared site header (announcement bar + nav + mega) extracted from homepage. */
:root {
  --pe-blue:#2563EB;--pe-blue-rgb:37,99,235;--pe-red:#EF4444;--pe-amber:#F59E0B;--pe-green:#10B981;
  --pe-grad:linear-gradient(95deg,#2563EB 0%,#EF4444 35%,#F59E0B 68%,#10B981 100%);
  --pe-grad-alt:linear-gradient(95deg,#7EE0D4 0%,#34D4B5 45%,#8B5CF6 100%);
  --pe-accent:var(--pe-blue);--pe-accent-rgb:var(--pe-blue-rgb);--pe-accent-light:#4f86f0;--pe-accent-deep:#1b4fc2;
  --pe-accent-fg:#ffffff;--pe-accent-tint:#cfe0ff;--pe-accent-soft:rgba(37,99,235,.14);--pe-accent-2:#f0bd62;
  --pe-bg:#0a0b10;--pe-bg-soft:#11131c;--pe-surface:#13151d;--pe-surface-2:#1c1f29;--pe-surface-3:#202832;
  --pe-border:rgba(255,255,255,.08);--pe-border-strong:rgba(255,255,255,.14);--pe-line:rgba(255,255,255,.065);
  --pe-ink:#f1f5f9;--pe-ink-soft:#cbd5e1;--pe-ink-muted:#94a3b8;--pe-ink-dim:#64748b;
  --pe-success:var(--pe-green);--pe-warning:var(--pe-amber);--pe-danger:#dd5f5f;--pe-danger-rgb:221,95,95;
  --pe-font:"Inter",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;--pe-font-display:"Inter",system-ui,sans-serif;
  --pe-display-1:clamp(48px,7.6vw,104px);--pe-display-2:clamp(40px,6vw,80px);--pe-title:clamp(34px,4vw,56px);--pe-title-sm:clamp(24px,2.4vw,34px);--pe-lead:clamp(17px,1.5vw,21px);
  --pe-text-2xs:10px;--pe-text-xs:11px;--pe-text-sm:12px;--pe-text-md:13px;--pe-text-base:14px;--pe-text-lg:15px;--pe-text-xl:16px;--pe-text-2xl:18px;--pe-text-3xl:22px;
  --pe-w-medium:500;--pe-w-semibold:600;--pe-w-bold:700;--pe-w-extrabold:800;--pe-w-black:900;
  --pe-lh-tight:1.02;--pe-lh-snug:1.2;--pe-lh-normal:1.5;--pe-lh-relaxed:1.55;
  --pe-ls-tight:-.04em;--pe-ls-snug:-.02em;--pe-ls-normal:-.005em;--pe-ls-wide:.04em;--pe-ls-wider:.08em;
  --pe-space-1:4px;--pe-space-2:8px;--pe-space-3:12px;--pe-space-4:16px;--pe-space-5:24px;--pe-space-6:32px;--pe-space-7:48px;--pe-space-8:64px;--pe-space-9:96px;
  --pe-r-xs:8px;--pe-r-sm:12px;--pe-r-md:18px;--pe-r-lg:24px;--pe-r-xl:32px;--pe-r-pill:999px;--pe-r-app-sm:6px;--pe-r-app-md:8px;--pe-r-app-lg:11px;
  --pe-shadow-soft:0 10px 28px rgba(0,0,0,.26);--pe-shadow-modal:0 24px 70px rgba(0,0,0,.48);
  --pe-shadow-card:0 1px 0 rgba(255,255,255,.05) inset,0 20px 48px -28px rgba(0,0,0,.78),0 4px 12px -6px rgba(0,0,0,.5);
  --pe-shadow-card-hover:0 1px 0 rgba(255,255,255,.09) inset,0 34px 72px -30px rgba(0,0,0,.82),0 10px 26px -12px rgba(37,99,235,.30);
  --pe-ring:0 0 0 3px rgba(37,99,235,.35);
  --pe-ease-standard:cubic-bezier(.2,.8,.2,1);--pe-ease-spring:cubic-bezier(.2,1.5,.4,1);--pe-ease-out:cubic-bezier(.22,.61,.36,1);--pe-dur-fast:.14s;--pe-dur-base:.3s;--pe-dur-slow:.5s;
  --pe-container:1280px;--pe-gutter:28px;--pe-control-h:36px;
}
:root {
        --bg:        #0a0b10;
        --bg-soft:   #11131c;
        --surface:   #13151d;
        --surface-2: #1c1f29;
        --border:    rgba(255, 255, 255, .08);
        --border-2:  rgba(255, 255, 255, .14);
        --ink:       #f1f5f9;
        --ink-soft:  #cbd5e1;
        --ink-mute:  #94a3b8;
        --ink-dim:   #64748b;

        /* 4-color primary palette — Google-inspired but our own shades */
        --pe-blue:   #2563EB; /* indigo blue */
        --pe-red:    #EF4444; /* vermilion */
        --pe-yellow: #F59E0B; /* marigold */
        --pe-green:  #10B981; /* emerald */
        --teal:    #10B981;   /* legacy alias → emerald */
        --teal-2:  #0E9E70;
        --coral:   #EF4444;   /* legacy alias → vermilion */
        --coral-2: #D63939;
        --violet:  #2563EB;   /* legacy alias → indigo blue */
        --grad:    linear-gradient(95deg, #2563EB 0%, #EF4444 35%, #F59E0B 68%, #10B981 100%);

        --r-xs: 8px;
        --r-s:  12px;
        --r-m:  18px;
        --r-l:  24px;
        --r-xl: 32px;

        --shadow-glow: 0 24px 80px -20px rgba(37, 99, 235, .28), 0 12px 40px -16px rgba(239, 68, 68, .2);
        --shadow-lift: 0 12px 36px -12px rgba(0, 0, 0, .6);

        --font: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
        --font-display: "Inter", system-ui, sans-serif;
      }
:root {
        --ease: cubic-bezier(.22, .61, .36, 1);
        --card-shadow:       0 1px 0 rgba(255,255,255,.05) inset, 0 20px 48px -28px rgba(0,0,0,.78), 0 4px 12px -6px rgba(0,0,0,.5);
        --card-shadow-hover: 0 1px 0 rgba(255,255,255,.09) inset, 0 34px 72px -30px rgba(0,0,0,.82), 0 10px 26px -12px rgba(37,99,235,.30);
      }

#scrollBar {
        position: fixed; top: 0; left: 0; height: 2px;
        width: 0%; z-index: 9999;
        background: var(--grad);
        transition: width .12s linear;
        will-change: width;
      }
.nav {
        position: fixed; top: 0; left: 0; right: 0; z-index: 100;
        display: grid; grid-template-columns: auto 1fr auto auto;
        align-items: center; gap: 20px;
        padding: 14px 28px;
        margin: 0;
        max-width: none;
        width: 100%;
        background: #ffffff;
        border: 0;
        border-bottom: 1px solid rgba(10,11,16,.08);
        border-radius: 0;
        box-shadow: none;
        transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease, border-color .25s ease;
      }
.nav.menu-open {
        background: rgba(255, 255, 255, .96);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border-bottom-color: rgba(10, 11, 16, .08);
      }
.nav .brand-mark { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px #fff) drop-shadow(0 0 34px rgba(255,255,255,.7)); }
.nav .brand .bw-white { text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 12px #fff, 0 0 24px #fff, 0 0 44px rgba(255,255,255,.8); }
.nav .brand .bw-grad { text-shadow: none; }
.nav-links > a, .nav-mega-trigger { text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 12px #fff, 0 0 24px #fff, 0 0 46px rgba(255,255,255,.85); }
.nav.scrolled .brand-mark { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #fff) drop-shadow(0 0 26px rgba(255,255,255,.6)); }
.nav.scrolled .brand .bw-white { text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 13px #fff, 0 0 26px rgba(255,255,255,.72); }
.nav.scrolled .brand .bw-grad { text-shadow: none; }
.nav-links .mega-feature-cta, .nav-links .mega-cta-block { text-shadow: none !important; }
.nav.scrolled .nav-links > a, .nav.scrolled .nav-mega-trigger { text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 13px #fff, 0 0 26px rgba(255,255,255,.72); }
.nav.scrolled {
        background: #ffffff;
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-bottom-color: rgba(10, 11, 16, .1);
        box-shadow:
          inset 0 -1px 0 rgba(10, 11, 16, .04),
          0 10px 28px -16px rgba(10, 11, 16, .14);
      }
.nav > .brand,
      .nav > .nav-links,
      .nav > .nav-cta,
      .nav > .nav-toggle {
        max-width: none;
      }
.brand {
        display: inline-flex; align-items: center; gap: 0;
        color: #0a0b10; text-decoration: none; font-weight: 700;
        letter-spacing: -.01em; font-size: 15.5px;
        padding: 4px 8px 4px 4px;
      }
.brand-mark {
        /* Use the actual brand PNG (P with camera lens) as the website logo. */
        width: 32px; height: 32px; border-radius: 9px;
        background: #0a0b10 url("assets/brand-mark.png") center/cover no-repeat;
        box-shadow: 0 4px 16px -2px rgba(160, 32, 240, .35);
        display: inline-block;
        color: transparent; font-size: 0;
        flex-shrink: 0;
        margin-right: 10px;
      }
.brand-mark > * { display: none !important; }
.brand .bw-white { margin-right: 4px; color: #0a0b10; }
.brand .bw-white, .brand .bw-grad { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.brand .bw-grad {
        /* Match CTA button gradient. */
        background: var(--grad);
        -webkit-background-clip: text; background-clip: text;
        color: transparent; -webkit-text-fill-color: transparent;
      }
.nav-links {
        display: flex; gap: 2px; justify-content: center;
        font-size: 14px;
      }
.nav-links a {
        position: relative;
        color: #4b5563; text-decoration: none;
        padding: 8px 16px;
        border-radius: 999px;
        font-weight: 500;
        transition: color .18s ease, background .18s ease, box-shadow .2s ease;
      }
.nav-links a:hover {
        color: #0a0b10;
        background: rgba(10, 11, 16, .055);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .9),
          inset 0 -1px 0 rgba(10, 11, 16, .04),
          0 1px 2px rgba(10, 11, 16, .04);
      }
.nav-links a:active {
        background: rgba(10, 11, 16, .08);
      }
.nav-links a[aria-current] {
        color: #0a0b10;
        background: rgba(10, 11, 16, .07);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .85),
          inset 0 0 0 1px rgba(10, 11, 16, .05);
      }
.nav-links a:focus-visible {
        outline: 2px solid var(--pe-blue, #2563EB);
        outline-offset: 2px;
      }
.nav-mega-wrap { position: static; display: inline-flex; }
.nav-mega-trigger {
        display: inline-flex; align-items: center; gap: 5px;
        color: #4b5563; background: none; border: 0; cursor: pointer;
        font: inherit; font-size: 14px; font-weight: 500;
        padding: 8px 14px; border-radius: 999px;
        text-shadow: none;
        transition: color .18s ease, background .18s ease;
      }
.nav-mega-trigger .nav-caret { width: 10px; height: 10px; opacity: .65; transition: transform .28s ease; }
.nav-mega-wrap:hover .nav-mega-trigger,
      .nav-mega-wrap:focus-within .nav-mega-trigger { color: #0a0b10; background: rgba(10,11,16,.06); }
.nav-mega-wrap:hover .nav-caret,
      .nav-mega-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.mega {
        /* --mega-top / --mega-pad are measured at runtime (see script below):
           the box top sits exactly at the trigger's bottom so there's no dead
           gap the cursor can cross, and the transparent padding-top bridges down
           to the visible card, which lands snug just below the nav row. */
        position: fixed; top: 84px; left: 50%;
        transform: translateX(-50%) translateY(-10px) scale(.985);
        transform-origin: top center;
        width: min(1040px, 95vw); padding-top: 22px; z-index: 200;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .22s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility .22s;
      }
.nav-mega-wrap:hover .mega,
      .nav-mega-wrap:focus-within .mega,
      .mega.open {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateX(-50%) translateY(0) scale(1);
      }
.nav-mega-wrap.has-drop { position: relative; }
.drop {
        position: absolute; top: 100%; right: 0; padding-top: 12px;
        width: 300px; z-index: 200;
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(-8px) scale(.98); transform-origin: top right;
        transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility .2s;
      }
.nav-mega-wrap.has-drop:hover .drop,
      .nav-mega-wrap.has-drop:focus-within .drop,
      .drop.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.drop-inner { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 18px; }
.drop-inner > a { display: flex; align-items: flex-start; gap: 11px; padding: 8px 10px; border-radius: 12px; text-decoration: none; transition: background .15s ease; }
.drop-inner > a:hover { background: rgba(10,11,16,.05); }
.drop-note { margin: 8px 4px 2px; padding-top: 10px; border-top: 1px solid rgba(10,11,16,.08); font-size: 11.5px; line-height: 1.4; color: #8a93a3; }
.mega-inner, .drop-inner {
        background: linear-gradient(180deg, #ffffff, #fbfcfe);
        border: 1px solid rgba(10,11,16,.08);
        box-shadow: 0 1px 1px rgba(10,11,16,.04), 0 8px 20px -12px rgba(10,11,16,.18), 0 30px 64px -26px rgba(10,11,16,.3);
        border-radius: 22px;
      }
.mega-inner {
        display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: 6px 26px;
        padding: 22px; align-items: stretch; overflow: hidden;
      }
.mega-inner > .mega-col:nth-of-type(3) { padding-right: 6px; }
.mega-ic { position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(10,11,16,.06), inset 0 1px 0 rgba(255,255,255,.6); }
.mega-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 62%); pointer-events: none; }
.mega-h { margin: 2px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8a93a3; }
.mega-col > a { display: block; padding: 8px 10px; border-radius: 12px; text-decoration: none; transition: background .15s ease; }
.mega-col > a:hover { background: rgba(10,11,16,.05); }
.mega-t { display: block; font-size: 14px; font-weight: 600; color: #0a0b10; letter-spacing: -.005em; }
.mega-d { display: block; font-size: 12px; color: #6b7280; margin-top: 1px; }
.nav-links .mega-feature {
        display: flex; flex-direction: column; justify-content: center; gap: 15px;
        overflow: hidden; min-height: 240px;
        border-radius: 0 22px 22px 0; padding: 22px; text-decoration: none; grid-column: 4; grid-row: 1 / -1; margin: -22px -22px -22px 0;
        background: linear-gradient(180deg, #eef3fa, #dfe8f3);
        box-shadow: inset 0 0 0 1px rgba(10,11,16,.08);
        transition: transform .2s ease, box-shadow .2s ease;
      }
.nav-links .mega-feature:hover { background: linear-gradient(180deg, #e8eff8, #d6e2f0); box-shadow: inset 0 0 0 1px rgba(10,11,16,.12); }
.mega-feature img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 22px 46px -18px rgba(10,11,16,.55), 0 2px 6px rgba(10,11,16,.12); }
.mega-feature-shade { display: none; }
.mega-feature-body { display: flex; flex-direction: column; gap: 6px; }
.mega-feature-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #2563eb; }
.mega-feature-title { font-size: 16px; font-weight: 780; line-height: 1.22; color: #0a0b10; letter-spacing: -.01em; }
.nav-links .mega-feature-cta { align-self: flex-start; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: #0a0b10; color: #ffffff; font-size: 12.5px; font-weight: 800; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.nav-links .mega-feature-cta:hover { background: #1a1d28; }
.nav-links a.mega-feature-cta:hover,
      .nav-links a.mega-feature-cta:focus,
      .nav-links a.mega-feature-cta:focus-visible { color: #ffffff; }
.nav-links .mega-feature .mega-feature-cta { border: 0; }
.nav-links .mega-feature .mega-feature-cta:hover { border-color: rgba(255,255,255,.5); }
.nav-links .mega-feature:hover .mega-feature-cta { transform: translateX(2px); }
.nav-links .mega-col > a, .nav-links .drop-inner > a { position: relative; transition: background .16s ease, transform .16s ease; }
.nav-links .mega-col > a:hover, .nav-links .drop-inner > a:hover { background: rgba(37,99,235,.06); transform: translateX(2px); }
.nav-links .mega-col > a .mega-ic, .nav-links .drop-inner > a .mega-ic { transition: transform .18s ease, box-shadow .18s ease; }
.nav-links .mega-col > a:hover .mega-ic, .nav-links .drop-inner > a:hover .mega-ic { transform: scale(1.07); }
.mega-t { transition: color .15s ease; }
.nav-links .mega-col > a:hover .mega-t, .nav-links .drop-inner > a:hover .mega-t { color: #1b3fa8; }
.mega-h { font-size: 10.5px; letter-spacing: .14em; color: #9aa3b2; margin-bottom: 9px; }
.mega-inner > .mega-col:nth-of-type(3) { border-right-color: rgba(10,11,16,.07); }
.mega-d { color: #7c8494; }
.mega.mega--pricing { width: min(780px, 94vw); }
.mega-inner--pricing { grid-template-columns: 0.95fr 1.5fr; gap: 8px 30px; align-items: center; }
.mega-cta-block { align-self: stretch; justify-content: center; margin-top: 10px; }
.nav-links .mega-col > a.mega-cta-block:hover { background: #1a1d28; transform: none; }
.mega-compare { border: 1px solid rgba(10,11,16,.1); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px -18px rgba(10,11,16,.32); }
.mega-col > a { display: flex; align-items: flex-start; gap: 11px; }
.mega-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(10,11,16,.05); }
.mega-ic svg { width: 18px; height: 18px; }
.mega-txt { display: block; min-width: 0; }
.mega-tag { display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #b45309; background: rgba(245,158,11,.16); vertical-align: middle; }
.mega-note { grid-column: 1 / 4; margin: 12px 2px 0; padding-top: 12px; border-top: 1px solid rgba(10,11,16,.08); font-size: 11.5px; line-height: 1.4; color: #8a93a3; }
@media (max-width: 880px) {
.nav-mega-wrap { display: block; width: 100%; }
.nav-mega-trigger { width: 100%; justify-content: space-between; text-shadow: none; padding: 10px 14px; }
.mega, .drop {
          position: static !important; transform: none !important;
          left: auto !important; right: auto !important; top: auto !important;
          width: 100% !important; padding: 0 !important; z-index: auto;
          opacity: 1 !important; visibility: visible !important; pointer-events: auto;
          max-height: 0; overflow: hidden; transition: max-height .3s ease;
        }
.nav-mega-wrap.open > .mega, .nav-mega-wrap.open > .drop { max-height: 1600px; }
.mega-inner, .drop-inner {
          display: block !important; background: transparent !important;
          border: 0 !important; box-shadow: none !important;
          -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
          padding: 2px 0 8px !important; border-radius: 0 !important; gap: 0 !important;
        }
.mega-col { margin-bottom: 4px; }
.nav-links .mega-col > a, .nav-links .drop-inner > a { padding: 9px 12px; }
.mega-feature, .mega-note, .drop-note, .mega-compare { display: none !important; }
.mega-h { padding: 6px 12px 2px; margin: 0; }
.nav-caret { transition: transform .28s ease; }
.nav-mega-wrap.open .nav-caret { transform: rotate(180deg); }
}
@media (max-width: 880px) {
.nav-mega-wrap { border-radius: 12px; overflow: hidden; }
.nav-mega-wrap.open { background: rgba(10,11,16,.03); }
.nav-mega-trigger { font-size: 15px; font-weight: 700; }
.nav-mega-wrap.open > .mega, .nav-mega-wrap.open > .drop { max-height: 760px; }
.mega, .drop { transition: max-height .28s cubic-bezier(.2,.8,.2,1); }
.mega-inner, .drop-inner { padding: 2px 6px 10px !important; }
.mega-col { margin: 0; padding: 0; }
.mega-col + .mega-col { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(10,11,16,.07); }
.mega-h { padding: 8px 10px 4px !important; margin: 0 !important; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.nav-links .mega-col > a, .nav-links .drop-inner > a {
          display: flex !important; align-items: center; gap: 12px;
          padding: 10px !important; border-radius: 11px;
        }
.nav-links .mega-col > a:active { background: rgba(37,99,235,.09); }
.mega-ic { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; display: inline-grid; place-items: center; flex: 0 0 auto; }
.mega-ic svg { width: 19px; height: 19px; }
.mega-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mega-t { font-size: 15px; font-weight: 650; color: #0a0b10; line-height: 1.2; }
.mega-d { font-size: 12px; color: #64748b; line-height: 1.25; white-space: normal; }
.mega-tag { margin-left: 6px; }
}
.nav-cta {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 16px; border-radius: 999px;
        background: #0a0b10; color: #ffffff;
        text-decoration: none; font-weight: 600; font-size: 13.5px;
        letter-spacing: -.005em;
        transition: transform .15s, box-shadow .15s, background .15s;
        box-shadow: 0 4px 14px -4px rgba(10, 11, 16, .35);
        white-space: nowrap;
      }
.nav-cta:hover {
        transform: translateY(-1px);
        background: #1a1d28;
        box-shadow: 0 8px 22px -6px rgba(10, 11, 16, .45);
      }
.nav-toggle {
        display: none;
        width: 40px; height: 40px;
        border: 1px solid rgba(0,0,0,.12);
        background: rgba(255,255,255,.6);
        border-radius: 10px;
        cursor: pointer; padding: 0;
        align-items: center; justify-content: center;
      }
.nav-toggle:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.nav-toggle .bars { position: relative; width: 18px; height: 14px; display: block; }
.nav-toggle .bars::before,
      .nav-toggle .bars::after,
      .nav-toggle .bars span {
        content: ""; position: absolute; left: 0; right: 0; height: 2px;
        background: #0a0b10; border-radius: 2px;
        transition: transform .25s ease, top .2s ease, opacity .15s ease;
      }
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars span { top: 6px; }
.nav-toggle .bars::after { top: 12px; }
.nav.menu-open .nav-toggle .bars::before { top: 6px; transform: rotate(45deg); }
.nav.menu-open .nav-toggle .bars::after { top: 6px; transform: rotate(-45deg); }
.nav.menu-open .nav-toggle .bars span { opacity: 0; }
@media (max-width: 880px) {
.nav {
          /* Mobile: nav-links becomes an absolute slide-down panel (out of
             flow), so only brand + CTA + hamburger remain in the grid. With
             the old 4-col "auto 1fr auto auto" the CTA fell into the stretchy
             1fr column and ballooned across the header. Put the flexible space
             on the brand side instead so the CTA sizes to its content. */
          grid-template-columns: 1fr auto auto;
          gap: 8px;
          padding: 10px 14px;
          width: 100%;
          margin: 0;
          border-radius: 0;
        }
.nav-toggle { display: inline-flex; }
.nav-links {
          position: absolute; top: calc(100% + 6px); left: 0; right: 0;
          flex-direction: column; gap: 2px;
          padding: 10px;
          background: rgba(255,255,255,.96);
          backdrop-filter: saturate(180%) blur(14px);
          -webkit-backdrop-filter: saturate(180%) blur(14px);
          border: 1px solid rgba(10, 11, 16, .07);
          border-radius: 14px;
          box-shadow: 0 16px 36px -12px rgba(10, 11, 16, .22);
          font-size: 15px;
          /* Bound the drawer to the viewport and scroll inside it, so an
             expanded mega-menu (e.g. Compare) can always be scrolled instead of
             running off the bottom of the screen with no way to reach items. */
          max-height: calc(100vh - 84px);
          max-height: calc(100dvh - 84px);
          overflow-y: auto;
          overscroll-behavior: contain;
          -webkit-overflow-scrolling: touch;
          /* Single reliable show/hide: display toggle (no visibility/opacity
             edge cases). Hidden by default; .menu-open reveals it. */
          display: none;
        }
.nav-links a {
          padding: 12px 14px; border-radius: 10px;
          width: 100%;
        }
.nav.menu-open .nav-links {
          display: flex;
        }
.nav-cta { padding: 7px 14px; font-size: 13px; }
}
@media (max-width: 380px) {
.brand { font-size: 14px; }
.nav-cta { padding: 6px 12px; font-size: 12px; }
}
.foot-logo .brand-mark { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 3px 9px -6px rgba(124,77,255,.30); }
.foot-bigmark .bw-white { color: var(--ink); font-size: inherit; margin-right: 0.18em; }
.foot-bigmark .bw-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: inherit; }
.foot-wordmark .bw-white { color: var(--ink); margin-right: 4px; }
.foot-wordmark .bw-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (max-width: 820px) {
.foot-logo .brand-mark { width: 46px; height: 46px; border-radius: 13px; }
}
@media (max-width: 1024px) {
.nav { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 768px) {
.nav-links a {
          padding: 12px 14px;
          border-radius: 9px;
          font-size: 14.5px;
        }
.nav-toggle { display: inline-flex !important; }
.nav-cta { padding: 8px 14px !important; font-size: 13.5px !important; }
}
@media (max-width: 480px) {
.nav { padding: 10px 14px; }
.brand .bw-white, .brand .bw-grad { font-size: 14px !important; }
.brand-mark { width: 28px !important; height: 28px !important; }
}
@media (max-width: 360px) {
.nav-cta { padding: 7px 11px !important; font-size: 12.5px !important; }
.brand .bw-white, .brand .bw-grad { font-size: 13px !important; }
}
.btn:focus-visible, .nav-cta:focus-visible { outline: 2px solid #5b8cff; outline-offset: 3px; }
.nav { top: 40px !important; }
#scrollBar { top: 40px !important; }
.flbar { position: fixed; top: 0; left: 0; right: 0; z-index: 400; height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(90deg, #0f766e, #10B981); color: #fff; font: 800 13.5px/1 system-ui; text-decoration: none; padding: 0 14px; box-sizing: border-box; }
.flbar:hover { filter: brightness(1.06); }
.flbar .flbar-badge { background: rgba(255,255,255,.22); border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.flbar .arw { font-weight: 900; }
@media (max-width: 620px) {
.nav { top: 54px !important; }
#scrollBar { top: 54px !important; }
.flbar { height: 54px; font-size: 12px; line-height: 1.3; padding: 0 12px; text-align: center; }
.flbar .flbar-badge { display: none; }
}
.nav.scrolled { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* content offset for fixed bar+nav */
body { padding-top: 40px; }
@media (max-width:620px){ body { padding-top: 54px; } }