/* Site chrome — the header and the footer every marketing page shares.
   ---------------------------------------------------------------------------
   One stylesheet, loaded by every page, so the header and footer cannot drift
   apart again. The markup that goes with it lives in scripts/chrome.mjs and is
   copied into each page by scripts/sync-chrome.mjs.

   Everything is scoped under `#nav` / `#footer`. These pages set their own
   `.wrap` (760px for legal, 860px for help and the comparison pages) and their
   own `.btn` (13px rather than 14px) for readability, and the header is the
   site's, not the page's: scoping keeps a page's narrower column from shrinking
   the logo and the menu, and keeps the nav's taller button from resizing the
   page's own buttons. The only global rules here are the design tokens the
   chrome needs and `.chrome-ic`, the icon utility the footer badge uses. */

:root{
  --bg:#faf8f5;--ink:#0a0a0a;--orange:#ff6b35;--white:#fff;--cream:#f5f0e8;
  --shadow:3px 3px 0 var(--ink);--shadow-sm:1px 1px 0 var(--ink);--shadow-lg:6px 6px 0 var(--ink);
  --space-1:#0b0e14;--space-2:#05070c;
  --ease-in:cubic-bezier(.25,.46,.45,.94);--ease-bounce:cubic-bezier(.34,1.56,.64,1);
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

#nav{position:sticky;top:0;z-index:40;border-bottom:2px solid var(--ink);background:var(--bg);transition:background .3s,backdrop-filter .3s}
#nav.scrolled{background:rgba(250,248,245,.85);backdrop-filter:blur(12px)}
/* Pinned to the homepage's 1080px, not to the page's column. */
#nav .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1080px;margin:0 auto;padding:0 20px}
#nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
#nav .logo{width:40px;height:40px;border:2px solid var(--ink);box-shadow:var(--shadow-sm);object-fit:cover;display:block;transition:transform .3s}
#nav.scrolled .logo{transform:scale(.9)}
#nav .brand-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:20px;line-height:1}
#nav .brand-name small{display:block;font-weight:700;font-size:10px;letter-spacing:.22em;color:#0a0a0a80;margin-top:2px}
#nav .nav-links{display:flex;align-items:center;gap:26px}
/* `button.link` is the Compare trigger. It shares the link's look but has to be
   a real <button>: the closed dropdown is hidden with `visibility:hidden`, which
   also takes its links out of the tab order, so the only way a keyboard user can
   open the menu is to focus the trigger and let :focus-within reveal it.
   A non-focusable <span> would make the whole dropdown unreachable. */
#nav .nav-links a.link,#nav .nav-links button.link{position:relative;text-decoration:none;font-weight:700;font-size:14px;padding:4px 0}
#nav .nav-links button.link{background:none;border:0;font-family:inherit;color:inherit;line-height:inherit;cursor:pointer}
#nav .nav-links a.link::after,#nav .nav-links button.link::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease-in)}
#nav .nav-links a.link:hover::after,#nav .nav-links button.link:hover::after{transform:scaleX(1)}
/* The page you are on, set from the address by chrome.js. */
#nav .nav-links a.link[aria-current="page"]::after{transform:scaleX(1)}
#nav .nav-drop{position:relative}
#nav .nav-drop .caret{font-size:10px;margin-left:3px}
#nav .nav-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:var(--white);border:2px solid var(--ink);box-shadow:var(--shadow);padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s var(--ease-in),transform .15s var(--ease-in);z-index:50}
/* The menu hangs 8px below the trigger, and that gap used to be dead space:
   moving the cursor down towards a submenu left .nav-drop, hover went false
   and the menu closed before it could be reached. This bridges the gap with an
   invisible strip that belongs to the menu, so the pointer never leaves the
   dropdown on the way in. It inherits visibility, so it is inert while closed. */
#nav .nav-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
#nav .nav-drop:hover .nav-menu,#nav .nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
/* Hovering anywhere in the dropdown keeps the trigger underlined, so the menu
   does not look detached from the thing that opened it. */
#nav .nav-drop:hover > a.link::after,#nav .nav-drop:focus-within > a.link::after,
#nav .nav-drop:hover > button.link::after,#nav .nav-drop:focus-within > button.link::after{transform:scaleX(1)}
#nav .nav-menu a{display:block;padding:8px 10px;text-decoration:none;font-weight:700;font-size:14px;color:var(--ink)}
#nav .nav-menu a:hover{background:var(--cream);color:var(--orange)}
#nav .nav-menu a[aria-current="page"]{background:var(--cream);color:var(--orange)}
#nav .hamburger{display:none;background:var(--white);border:2px solid var(--ink);box-shadow:var(--shadow-sm);width:40px;height:40px;cursor:pointer;align-items:center;justify-content:center}
#nav .hamburger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
#nav .hamburger span::before,#nav .hamburger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
#nav .hamburger span::before{top:-6px}
#nav .hamburger span::after{top:6px}
#nav .mobile-menu{display:none;flex-direction:column;gap:2px;border-bottom:2px solid var(--ink);background:var(--bg);padding:8px 20px 16px}
#nav .mobile-menu a{padding:12px 4px;text-decoration:none;font-weight:700;border-bottom:1px solid #0a0a0a1a}
/* The flattened Compare dropdown: a small caption that is not tappable, with
   the three pages indented under it. */
#nav .mobile-menu .mm-head{display:block;padding:12px 4px 2px;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#0a0a0a73}
#nav .mobile-menu .mm-group a{padding-left:18px;font-weight:600}
#nav .mobile-menu.open{display:flex}
@media(max-width:860px){#nav .nav-links{display:none}#nav .hamburger{display:flex}}

/* The header button ("Add to browser"), at the homepage's weight. */
#nav .btn{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:14px;border:2px solid var(--ink);box-shadow:var(--shadow);padding:13px 22px;background:var(--orange);color:var(--cream);cursor:pointer;text-decoration:none;transition:transform .1s,box-shadow .1s;overflow:hidden}
#nav .btn:hover{transform:translate(2px,2px);box-shadow:var(--shadow-sm)}
#nav .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
#nav .btn.sm{padding:9px 14px;font-size:12px}
/* Shine sweep on hover */
#nav .btn.shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:none}
#nav .btn.shine:hover::after{animation:shine .7s ease}
@keyframes shine{to{left:130%}}

/* ---------------------------------------------------------------------------
   Footer (the descent into space)
   --------------------------------------------------------------------------- */

#footer{position:relative;background:linear-gradient(180deg,var(--space-1) 0%,var(--space-2) 100%);color:#fff;overflow:hidden}
#footer .stars-bg{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff6,transparent),radial-gradient(1px 1px at 70% 60%,#fff5,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#ff6b3566,transparent),radial-gradient(1px 1px at 85% 25%,#fff4,transparent),radial-gradient(1px 1px at 55% 15%,#fff5,transparent),radial-gradient(1.5px 1.5px at 15% 70%,#fff4,transparent),radial-gradient(1px 1px at 90% 85%,#ff6b3555,transparent);
  background-size:cover;opacity:.9;animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.55}}
#footer .wordmark{position:absolute;left:50%;top:7%;transform:translateX(-50%);font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(84px,17vw,260px);color:rgba(255,255,255,.05);letter-spacing:.16em;white-space:nowrap;pointer-events:none;transition:color 1s}
#footer.lit .wordmark{color:rgba(255,255,255,.07)}
#footer .foot-in{position:relative;z-index:3;padding:200px 20px 30px;max-width:1080px;margin:0 auto}
#footer .foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:26px}
@media(max-width:1024px){#footer .foot-cols{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:680px){#footer .foot-cols{grid-template-columns:1fr;text-align:center}}
#footer .foot-col h4{font-weight:600;font-size:14px;letter-spacing:.5px;color:rgba(255,255,255,.9);margin:0 0 14px}
#footer .foot-col a{display:block;text-decoration:none;color:rgba(255,255,255,.55);font-size:14px;line-height:2.2;position:relative;width:fit-content}
@media(max-width:680px){#footer .foot-col a{margin:0 auto}}
#footer .foot-col a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s}
#footer .foot-col a:hover{color:var(--orange)}
#footer .foot-col a:hover::after{transform:scaleX(1)}
#footer .foot-col a[aria-current="page"]{color:var(--orange)}
#footer .foot-badges a{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.25);padding:8px 12px;margin:0 0 10px;color:#fff;transition:transform .2s,box-shadow .2s}
#footer .foot-badges a:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
#footer .foot-badges a::after{display:none}
#footer .foot-div{height:1px;margin:34px 0 18px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
#footer .foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:12px;font-size:13px;color:rgba(255,255,255,.35)}
#footer .foot-bottom a{color:rgba(255,255,255,.5);text-decoration:none;margin-left:16px}
@media(max-width:680px){#footer .foot-bottom{flex-direction:column;text-align:center}#footer .foot-bottom a{margin:0 8px}}

/* Footer particles (Tab Stars) */
#footer .pcanvas{position:absolute;inset:0;z-index:1;pointer-events:none}

/* The Chrome logo, drawn from the <symbol> that ships inside the footer. */
.chrome-ic{display:block;flex:0 0 auto}

@media(prefers-reduced-motion:reduce){
  #footer .stars-bg{animation:none}
  #footer .pcanvas{display:none}
}