/* RS Canonical Chrome v3 (mega-menu + footer v3) - namespaced, no global body. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&family=Inter:wght@400;600;700&display=swap');

/* ============================================================
   RS CANONICAL CHROME v2 - source of truth for logo, nav
   (Products mega-menu), footer, and disclaimer across ALL RS
   product pages. Structure fixed; colors theme per product via
   --rsc-grad-a/--rsc-grad-b/--rsc-gradient (set in each page's :root as
   --rsc-rsc-grad-a/--rsc-rsc-grad-b/--rsc-rsc-gradient). 2026-05-29.
   ============================================================ */
:root{
  --rsc-grad-a:#7C3AED; --rsc-grad-b:#2DD4BF;
  --rsc-gradient:linear-gradient(135deg,#7C3AED,#2DD4BF);
  --rsc-bg:#0A0A0F; --rsc-surface:#12121A; --rsc-surface-2:#1A1A25; --rsc-line:#22222F;
  --rsc-text:#EEEEF0; --rsc-text-dim:#9999AD; --rsc-text-muted:#7C7C90;
}

.skip-link{position:absolute;left:-9999px;top:12px;z-index:1001;background:#FFFFFF;color:#0A0A0F;text-decoration:none;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;padding:12px 16px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.skip-link:focus,.skip-link:focus-visible{left:12px}

/* NAV */
.nav{position:sticky;top:0;background:rgba(10,10,15,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rsc-line);z-index:50}
.nav-inner{max-width:1100px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:14px}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav-logo svg{width:40px;height:51px;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.nav-logo-text{display:flex;flex-direction:column}
.nav-logo-name{font-family:'Space Grotesk','Inter',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.5px;color:#fff;line-height:1.1}
.nav-logo-name .tm{font-size:10px;vertical-align:super;font-weight:400;margin-left:1px}
.nav-logo-tag{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;margin-top:4px;background:var(--rsc-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-spacer{flex:1}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links>a,.nav-item>button{background:none;border:0;color:var(--rsc-text-dim);font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:6px}
.nav-links>a:hover,.nav-item>button:hover{color:var(--rsc-text)}
.caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
.nav-item{position:relative}
.nav-item:hover .caret,.nav-item .mega.open ~ .caret{transform:rotate(-135deg);margin-top:2px}
.nav-cta{background:var(--rsc-gradient);color:#fff!important;padding:10px 20px;border-radius:100px;font-weight:700;font-size:13.5px;text-decoration:none;font-family:'Space Grotesk',sans-serif}
/* Keyboard focus indicator (a11y): visible only for keyboard users, no effect on mouse/touch */
.nav-links>a:focus-visible,.nav-item>button:focus-visible,.nav-cta:focus-visible,.mega-link:focus-visible,.mega-foot a:focus-visible,.nav-toggle:focus-visible,.nav-logo:focus-visible,.footer-col a:focus-visible{outline:3px solid var(--rsc-grad-b);outline-offset:3px;border-radius:6px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--rsc-grad-b);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--rsc-grad-b)}
/* MEGA MENU */
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);width:620px;max-width:92vw;background:var(--rsc-surface);border:1px solid var(--rsc-line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.5);padding:22px;opacity:0;visibility:hidden;transition:.18s}
.nav-item:hover .mega,.mega.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.mega-col h4{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--rsc-text-muted);font-weight:700;margin:4px 0 12px}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:10px;text-decoration:none;transition:background .15s}
.mega-link:hover{background:var(--rsc-surface-2)}
.dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex-shrink:0}
.mega-link .t{display:block;color:var(--rsc-text);font-weight:700;font-size:14px;line-height:1.25}
.mega-link .d{display:block;color:var(--rsc-text-dim);font-weight:400;font-size:12px;margin-top:7px;line-height:1.45}
.mega-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--rsc-line);display:flex;justify-content:flex-end}
.mega-foot a{color:var(--rsc-grad-b);text-decoration:none;font-size:13px;font-weight:600;font-family:'Space Grotesk',sans-serif}
.nav-toggle{display:none;background:none;border:0;color:var(--rsc-text);cursor:pointer}
.nav-toggle svg{width:26px;height:26px;stroke:currentColor;fill:none}
@media (max-width:820px){
  .nav-toggle{display:flex;align-items:center}
  .nav-logo-tag{font-size:8.5px;letter-spacing:.9px;white-space:nowrap}   /* 2026-08-16: keep the tag on one line on phones */
  .nav-links{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:6px;background:var(--rsc-bg);border-bottom:1px solid var(--rsc-line);padding:14px 24px}
  .nav-links.is-open{display:flex}
  /* 2026-08-16: the open phone menu is taller than the screen (3-col Products = ~920px in an 844px viewport) and is pinned to the sticky nav, so the bottom links (EU editions, How It Works, Guides, FAQ, Get Started) were unreachable. Let the panel itself scroll. */
  .nav-links.is-open{max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:28px}
  /* 2026-08-16: while the phone menu is open, lift the nav above the fixed Shield Support bubble (z-index 2147483641) and cookie bar (9999) so they no longer sit on top of the menu items. */
  .nav:has(.nav-links.is-open){z-index:2147483645}
  .nav-item,.nav-links>a,.nav-cta{width:100%}
  .mega{position:static;transform:none;left:auto;right:auto;width:100%;max-width:100%;opacity:1;visibility:visible;box-shadow:none;border:0;background:transparent;padding:8px 0 0;display:none}
  .mega.open{display:block;transform:none}
  /* Touch devices keep a sticky :hover after a tap, so the desktop `.nav-item:hover .mega` rule (specificity 0,3,0) re-applies transform:translateX(-50%) and beats `.mega.open` (0,2,0), shoving the open panel ~50% off the left edge. Reset the hover/focus transform at matching specificity here. Display stays gated by .open above, so hover alone never reveals the panel. */
  .nav-item:hover .mega,.nav-item:focus-within .mega{transform:none}
  .mega-grid{grid-template-columns:1fr;gap:2px}
}

/* FOOTER v3 (2026-08-16) — canonical RS footer. Product columns removed (the
   Products mega-menu is the product navigation). One alignment: left, everywhere.
   Selectors are scoped to footer.rs-footer so leftover page-level footer CSS
   (.footer-legal{text-align:center} etc.) can no longer override the shared file. */
footer.rs-footer{background:var(--rsc-bg);border-top:1px solid var(--rsc-line);margin-top:64px;padding:44px 0 112px;color:var(--rsc-text-muted);font-family:'Inter',sans-serif;font-size:12px;line-height:1.65;text-align:left}
@media (min-width:720px){footer.rs-footer{padding-bottom:88px}}
.rs-footer .footer-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.rs-footer .footer-top{display:flex;flex-direction:column;gap:22px;padding-bottom:26px;border-bottom:1px solid var(--rsc-line)}
@media (min-width:720px){.rs-footer .footer-top{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}}
.rs-footer .footer-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.rs-footer .footer-logo svg{width:36px;height:46px;flex-shrink:0}
.rs-footer .footer-logo-text{display:flex;flex-direction:column}
.rs-footer .footer-brand-name{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:17px;color:#fff;line-height:1.1}
.rs-footer .footer-brand-tag{font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--rsc-text-muted);font-weight:700;margin-top:4px;white-space:nowrap}
.rs-footer .footer-nav{display:flex;flex-wrap:wrap;gap:8px 20px}
@media (min-width:720px){.rs-footer .footer-nav{justify-content:flex-end}}
.rs-footer .footer-nav a{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--rsc-text-dim);text-decoration:none;line-height:1.4;margin:0;padding:0}
.rs-footer .footer-nav a:hover{color:var(--rsc-text)}
.rs-footer .footer-nav a:focus-visible{outline:3px solid var(--rsc-grad-b);outline-offset:3px;border-radius:6px}
.rs-footer .footer-legal{margin:0;padding:22px 0 0;border:0;max-width:none;font-size:12px;line-height:1.65;color:var(--rsc-text-muted);text-align:left}
.rs-footer p{margin:0 0 12px;padding:0;max-width:none;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;text-align:left}
.rs-footer a{font-family:inherit;font-size:inherit}
.rs-footer strong{font-weight:700}
.rs-footer .footer-legal p{margin:0 0 12px;text-align:left}
.rs-footer .footer-legal strong{color:var(--rsc-text-dim)}
.rs-footer .footer-legal a{color:var(--rsc-text-dim);text-decoration:underline;text-underline-offset:2px}
.rs-footer .footer-legal a:hover{color:var(--rsc-text)}
.rs-footer .footer-product-note{padding:12px 14px;border-left:2px solid var(--rsc-line)}
.rs-footer .footer-tm-notice{margin-top:4px;font-size:11.5px;line-height:1.6;color:var(--rsc-text-muted)}
.rs-footer .footer-tm-notice>strong{display:block;margin-bottom:6px}
.rs-footer .footer-entity{margin:14px 0 0;font-size:11.5px;color:var(--rsc-text-muted);opacity:1}
.rs-footer .footer-entity a{color:inherit;text-decoration:underline}
@media print{.nav,.nav-toggle{display:none}footer.rs-footer{background:#fff;border-top:2px solid #111;color:#333;padding-bottom:24px}.rs-footer .footer-nav a,.rs-footer .footer-legal,.rs-footer .footer-tm-notice,.rs-footer .footer-entity,.rs-footer .footer-brand-name{color:#333!important}}

/* Fix 2026-05-30: header carried a second wordmark (.brand-block) on top of the nav logo. Hide it sitewide so only the nav logo shows. */
.brand-block{display:none !important}

/* 3-column products dropdown (desktop only; mobile keeps stacked reset) */
@media (min-width:821px){
  .nav .nav-item .mega{ width:880px; max-width:94vw; }
  .nav .nav-item .mega-grid-3{ display:grid; grid-template-columns:1.1fr 1.1fr .95fr; gap:10px 26px; }
}