:root{
    --primary:#005387; --bright:#00689E; --blue:#6D9FC2; --blue-light:#A9C0DE; --blue-pale:#DFE6EF;
    --slate:#687989; --bg-deep:#03283F; --bg:#05273D; --surface:#0A3550; --surface2:#0E4063;
    --text:#DFE6EF; --muted:#A9C0DE; --dim:#6D9FC2; --faint:#687989;
    --granted:#2E9E5B; --pending:#6D9FC2; --orange:#E5521A;
    --blue-rgb:109,159,194;
    --maxw:1240px; --ease:cubic-bezier(0.22,0.72,0,1);
    font-family:'Roboto','Segoe UI',Arial,sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  section[id]{scroll-margin-top:90px;}
  body{background:var(--bg-deep); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ::selection{background:rgba(var(--blue-rgb),0.35); color:#fff;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

  .grid-bg{position:absolute; inset:0; pointer-events:none; opacity:0.5;
    background-image:linear-gradient(rgba(var(--blue-rgb),0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--blue-rgb),0.06) 1px,transparent 1px);
    background-size:54px 54px; mask-image:radial-gradient(120% 120% at 70% 0%,#000 30%,transparent 80%);}

  /* nav */
  nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:rgba(3,40,63,0.72); border-bottom:1px solid rgba(var(--blue-rgb),0.14);}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:74px;}
  .brand img{height:48px; width:auto;}
  .nav-links{display:flex; align-items:center; gap:26px;}
  .nav-links a{font-size:15px; color:var(--muted); transition:color 0.2s; white-space:nowrap;}
  .nav-links a:hover{color:#fff;}
  .nav-links a.current{color:#fff;}
  .btn{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:500; padding:11px 20px; border-radius:8px; transition:all 0.25s var(--ease); cursor:pointer; border:1px solid transparent;}
  .btn-primary{background:var(--bright); color:#fff; box-shadow:0 4px 16px rgba(0,104,158,0.35);}
  .btn-primary:hover{background:var(--primary); transform:translateY(-1px); box-shadow:0 8px 26px rgba(0,104,158,0.5);}
  .btn-ghost{border-color:rgba(var(--blue-rgb),0.4); color:var(--blue-light);}
  .btn-ghost:hover{border-color:var(--blue); background:rgba(var(--blue-rgb),0.08);}
  .nav-links a.nav-signin, a.nav-signin.nav-bar-auth{border:1px solid rgba(var(--blue-rgb),0.4); color:var(--blue-light); padding:7px 16px; border-radius:8px; font-size:14px; white-space:nowrap;}
  .nav-links a.nav-signin:hover, a.nav-signin.nav-bar-auth:hover{border-color:var(--blue); background:rgba(var(--blue-rgb),0.08); color:#fff;}
  /* Signed-in account menu styling lives in js/features/account-menu.js */
  /* mobile hamburger toggle — hidden on desktop, shown at <=900px */
  .nav-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
    background:transparent; border:1px solid rgba(var(--blue-rgb),0.4); border-radius:8px; color:var(--blue-light);
    cursor:pointer; transition:border-color .2s, color .2s;}
  .nav-toggle:hover{border-color:var(--blue); color:#fff;}
  .nav-toggle svg{width:22px; height:22px;}
  .nav-toggle .ico-close{display:none;}
  nav.nav-open .nav-toggle .ico-open{display:none;}
  nav.nav-open .nav-toggle .ico-close{display:block;}
  /* bar-level auth (Sign in / account chip) — only used on mobile, hidden on desktop */
  .nav-bar-auth{display:none;}

  /* hero */
  .hero{position:relative; padding:88px 0 60px; overflow:hidden; background:radial-gradient(900px 600px at 78% -10%,rgba(0,104,158,0.32),transparent 62%);}
  .hero-glyph{position:absolute; left:-90px; bottom:-120px; z-index:1; width:min(46vw,520px); height:auto; opacity:0.06; pointer-events:none; user-select:none;}
  /* Full-bleed hero: copy aligns to the site gutter on the left, map runs to the right viewport edge. */
  .hero-in{position:relative; display:grid; grid-template-columns:minmax(0,600px) 1fr; gap:56px; align-items:center;
    padding-left:max(32px, calc((100vw - var(--maxw)) / 2 + 32px));}
  .eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:2.5px; color:var(--blue); text-transform:uppercase; margin-bottom:22px;}
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--blue); opacity:0.7;}
  h1{font-size:clamp(44px,6vw,76px); line-height:1.04; font-weight:300; letter-spacing:-1.5px; color:#fff;}
  h1 b{font-weight:700; color:var(--blue-light);}
  .lead{margin-top:24px; font-size:21px; line-height:1.55; color:var(--muted); font-weight:300; max-width:540px;}
  .hero-cta{margin-top:34px; display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
  .hero-note{margin-top:20px; font-size:14px; color:var(--faint);}

  .mapcard{position:relative; aspect-ratio:16/9; width:100%; border-radius:16px 0 0 16px; overflow:hidden; background:linear-gradient(160deg,#062c46,#04223a); border:1px solid rgba(var(--blue-rgb),0.28); border-right:none; box-shadow:0 30px 80px rgba(0,0,0,0.55);}
  .mapcard img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block;}
  .mapcard .gl{position:absolute; inset:0; background-image:linear-gradient(rgba(var(--blue-rgb),0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--blue-rgb),0.10) 1px,transparent 1px); background-size:38px 38px;}
  .mapcard svg{position:absolute; inset:0; width:100%; height:100%;}
  .chip{position:absolute; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; background:rgba(5,39,61,0.9); border:1px solid rgba(var(--blue-rgb),0.4); border-radius:999px; padding:7px 13px; color:var(--blue-light); backdrop-filter:blur(6px);}
  .chip .dot{width:9px; height:9px; border-radius:3px;}
  .coord{position:absolute; bottom:16px; left:16px; font-family:'Roboto Mono',monospace; font-size:12px; color:var(--blue); letter-spacing:0.5px; opacity:0.85;}

  /* hero map: live-signal overlay. Pins mark real change types on the map:
     green = newly pegged, purple = ownership change, orange = status change,
     red = surrendered/withdrawn. Static by default; animated under no-preference. */
  .mapcard{--mk-new:#34d399; --mk-own:#a78bfa; --mk-stat:#f5a524; --mk-drop:#f56565;}
  .hero-ovl{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;}
  .hero-scan{position:absolute; left:0; right:0; height:130px; top:-130px; opacity:0;
    background:linear-gradient(180deg,transparent,rgba(var(--blue-rgb),0.14) 58%,rgba(190,224,255,0.30) 92%,transparent);
    mix-blend-mode:screen;}
  .hmk{position:absolute; display:flex; align-items:center; gap:0;}
  /* monochrome "GPS target": centre dot + steady ring + radar ping. The map's
     polygon already carries the category colour, so the marker stays neutral. */
  .hmk-dot{position:relative; width:7px; height:7px; border-radius:50%; flex:none;
    background:#eaf3fa; box-shadow:0 0 9px rgba(190,224,255,0.95);}
  .hmk-dot::before{content:""; position:absolute; inset:-5px; border-radius:50%;
    border:1px solid rgba(219,233,245,0.78); box-shadow:0 0 0 1px rgba(3,16,26,0.5);}
  .hmk-dot::after{content:""; position:absolute; inset:-5px; border-radius:50%;
    border:1px solid rgba(190,224,255,0.6); opacity:0;}
  /* leader line: surveyor connector from target to label. Dark halo keeps the
     thin white line legible over the light, colourful basemap. */
  .hmk-line{flex:none; width:22px; height:2px; align-self:center; border-radius:2px; margin-left:7px;
    background:linear-gradient(90deg, rgba(255,255,255,0.98), rgba(255,255,255,0.55));
    box-shadow:0 0 3px rgba(3,16,26,0.9), 0 1px 2px rgba(3,16,26,0.7);}
  .hmk-label{font-size:11px; font-weight:600; letter-spacing:0.35px; white-space:nowrap; color:#eaf3fa;
    background:rgba(6,24,38,0.72); border:1px solid rgba(var(--blue-rgb),0.42);
    border-radius:7px; padding:5px 10px; backdrop-filter:blur(8px); box-shadow:0 8px 24px rgba(0,0,0,0.5);}
  .hmk--left{flex-direction:row-reverse;}
  .hmk--left .hmk-line{margin-left:0; margin-right:7px; background:linear-gradient(270deg, rgba(255,255,255,0.98), rgba(255,255,255,0.55));}

  /* intro band: function index (pills) + the data sources, in one band */
  .caps{border-top:1px solid rgba(var(--blue-rgb),0.12); border-bottom:1px solid rgba(var(--blue-rgb),0.12); background:rgba(10,53,80,0.2); scroll-margin-top:90px;}
  .caps-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 8px; padding:18px 0 11px;}
  .caps-in a{font-size:13.5px; font-weight:500; letter-spacing:0.3px; color:var(--muted); padding:6px 15px; border:1px solid rgba(var(--blue-rgb),0.2); border-radius:999px; transition:color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);}
  .caps-in a:hover{color:#fff; border-color:var(--blue); background:rgba(var(--blue-rgb),0.1);}
  .caps-src{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px 11px; padding:0 0 17px; font-size:13px; color:var(--faint); text-align:center;}
  .caps-src strong{color:var(--muted); font-weight:500;}
  .caps-src .src{color:var(--dim); font-weight:600; letter-spacing:0.3px;}
  .caps-src .sep{opacity:0.4;}

  /* sections */
  .band{padding:96px 0; position:relative;}
  .chmark{font-size:13px; font-weight:700; letter-spacing:2.5px; color:var(--slate); text-transform:uppercase; margin-bottom:16px;}
  h2{font-size:clamp(30px,4vw,44px); line-height:1.1; font-weight:300; letter-spacing:-1px; color:#fff; max-width:680px;}
  h2 b{font-weight:700; color:var(--blue-light);}
  .sub{margin-top:18px; font-size:19px; line-height:1.6; color:var(--muted); font-weight:300; max-width:640px;}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .split.rev .copy{order:2;}
  .shot{border-radius:14px; overflow:hidden; border:1px solid rgba(var(--blue-rgb),0.22); box-shadow:0 20px 50px rgba(0,0,0,0.45);}

  /* live embed demo */
  .embed-demo{margin-top:54px;}
  .embed-label{font-size:16px; color:var(--muted); text-align:center;}
  .embed-label b{color:var(--blue-light);}
  .embed-frame{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; margin-top:16px; border:1px solid rgba(var(--blue-rgb),0.28); box-shadow:0 24px 60px rgba(0,0,0,0.5); background:#04223a;}
  .embed-frame iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:none;}

  /* problem */
  .problem{background:linear-gradient(180deg,var(--bg-deep),var(--bg));}
  .pain{list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:16px;}
  .pain li{display:flex; gap:13px; font-size:17px; color:var(--muted);}
  .pain li svg{flex-shrink:0; width:21px; height:21px; color:var(--orange); margin-top:1px;}
  .wedge{margin-top:30px; padding:2px 0 2px 24px; border-left:2px solid var(--blue); font-size:21px; color:var(--text); line-height:1.55;}
  .wedge b{color:var(--blue-light);}

  /* layer chips (Pillar A) */
  .chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:26px;}
  .chips span{font-size:13px; color:var(--muted); background:rgba(255,255,255,0.04); border:1px solid rgba(var(--blue-rgb),0.2); border-radius:999px; padding:7px 14px;}

  /* signal cards (Pillar B) */
  .features{background:var(--bg);}
  .sgrid{margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .scard{background:linear-gradient(160deg,var(--surface),var(--bg)); border:1px solid rgba(var(--blue-rgb),0.18); border-radius:13px; padding:26px 24px; transition:all 0.3s var(--ease);}
  .scard:hover{border-color:rgba(var(--blue-rgb),0.45); transform:translateY(-3px);}
  .scard h3{font-size:18px; font-weight:700; color:#fff; margin-bottom:8px;}
  .scard p{font-size:14.5px; color:var(--muted); line-height:1.55; font-weight:300;}

  .signal-demo{margin-top:36px;}
  .signal-demo-label{font-size:15px; color:var(--muted); margin-bottom:16px;}
  .signal-demo-label b{color:var(--blue-light); font-weight:600;}
  .sigcards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
  .sigcard{background:var(--bg-deep); border:1px solid rgba(var(--blue-rgb),0.22); border-radius:12px; padding:18px 20px; box-shadow:0 16px 40px rgba(0,0,0,0.42);}
  .sig-tid{display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:'Roboto Mono',monospace; font-size:15px; font-weight:700; color:#fff; margin-bottom:14px;}
  .sig-badge{font-family:'Roboto',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:0.4px; padding:3px 10px; border-radius:999px; white-space:nowrap; color:#fff;}
  .sig-red{background:var(--orange);}
  .sig-green{background:var(--granted);}
  .sig-list{list-style:none; display:flex; flex-direction:column; gap:9px;}
  .sig-list li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text);}
  .sig-list li.off{color:var(--faint);}
  .sig-list svg{width:15px; height:15px; flex-shrink:0; color:var(--faint);}
  .sig-list .sig-warn{color:var(--orange);}
  .sig-list .sig-ok{color:var(--granted);}
  .sig-pts{margin-left:auto; font-family:'Roboto Mono',monospace; font-size:12.5px; color:var(--dim);}
  .more{margin-top:26px; font-size:15px; color:var(--dim);}

  /* AI split cards */
  .ai{background:linear-gradient(180deg,var(--bg),var(--bg-deep));}
  .ai-row{margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start;}
  .ai-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
  .ai-actions .btn{font-size:14px; padding:9px 15px;}
  .ai-card{background:linear-gradient(160deg,var(--surface),var(--bg)); border:1px solid rgba(var(--blue-rgb),0.2); border-radius:16px; overflow:hidden;}
  .ai-card .body{padding:30px 30px 26px;}
  .ai-card h3{font-size:23px; font-weight:700; color:#fff; margin-bottom:10px;}
  .ai-card p{font-size:16px; color:var(--muted); line-height:1.6; font-weight:300;}
  .ai-card .shot{border-radius:0; border:none; border-top:1px solid rgba(var(--blue-rgb),0.18); box-shadow:none;}
  /* example prompt, styled to mirror the in-app Ask bar */
  .prompt{margin:16px 0 0; display:flex; align-items:center; gap:11px; background:rgba(3,30,47,0.92); border:1px solid rgba(var(--blue-rgb),0.28); border-radius:12px; padding:9px 9px 9px 15px;}
  .prompt-ico{width:18px; height:18px; color:var(--dim); flex-shrink:0;}
  .prompt-text{flex:1; min-width:0; font-size:15px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .prompt-ask{flex-shrink:0; font-size:13px; font-weight:600; color:#fff; background:var(--bright); border-radius:8px; padding:7px 17px;}

  /* cta band */
  .ctaband{padding:58px 0; text-align:center; background:radial-gradient(600px 300px at 50% 50%,rgba(0,104,158,0.18),transparent 70%);}
  .ctaband h3{font-size:30px; font-weight:300; color:#fff; margin-bottom:22px;}
  .ctaband h3 b{font-weight:700; color:var(--blue-light);}

  /* audience */
  .who{background:var(--bg);}
  .who-grid{margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .who-card{border-left:2px solid rgba(var(--blue-rgb),0.4); padding:6px 0 6px 24px;}
  .who-card h3{font-size:20px; font-weight:700; color:#fff; margin-bottom:9px;}
  .who-card p{font-size:15.5px; color:var(--muted); line-height:1.6; font-weight:300;}

  .tgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:38px;}
  .tcard{background:var(--surface); border:1px solid rgba(var(--blue-rgb),0.16); border-radius:14px; padding:28px 26px; margin:0;}
  .tcard blockquote{margin:0; font-size:18px; line-height:1.55; color:var(--text); font-weight:300;}
  .tcard blockquote::before{content:"\201C"; color:var(--blue); font-size:30px; line-height:0; vertical-align:-10px; margin-right:3px; font-weight:700;}
  .tcard figcaption{margin-top:18px; display:flex; flex-direction:column; gap:2px;}
  .tname{font-size:15px; font-weight:700; color:#fff;}
  .trole{font-size:13.5px; color:var(--dim);}

  .founder-band .split{align-items:center;}
  .founder-photo img{border-radius:16px; border:1px solid rgba(var(--blue-rgb),0.22); box-shadow:0 24px 60px rgba(0,0,0,0.5); width:100%; max-width:380px;}
  .founder-cv{margin-top:22px; font-size:13.5px; letter-spacing:0.3px; color:var(--dim);}
  .founder-connect{margin-top:24px;}

  .faq-list{margin-top:34px; max-width:880px;}
  .faq-item{border-bottom:1px solid rgba(var(--blue-rgb),0.16);}
  .faq-item summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 2px; font-size:18px; font-weight:500; color:#fff;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+"; font-size:26px; font-weight:300; color:var(--blue); line-height:1; transition:transform 0.25s var(--ease); flex-shrink:0;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item summary:hover{color:var(--blue-light);}
  .faq-a{padding:0 2px 22px;}
  .faq-a p{font-size:15.5px; line-height:1.65; color:var(--muted); font-weight:300; max-width:780px;}

  /* pricing */
  .pricing{background:var(--bg-deep);}
  .price-grid{margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;}
  .pcard{background:linear-gradient(160deg,var(--surface),var(--bg)); border:1px solid rgba(var(--blue-rgb),0.2); border-radius:16px; padding:34px 30px; display:flex; flex-direction:column;}
  .pcard.feature{border-color:var(--blue); box-shadow:0 0 0 1px rgba(var(--blue-rgb),0.3),0 24px 60px rgba(0,0,0,0.45); position:relative;}
  .pcard.feature::before{content:"Most popular"; position:absolute; top:-12px; left:30px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; background:var(--bright); padding:5px 12px; border-radius:999px;}
  .pcard.value{position:relative;}
  .pcard.value::before{content:"Best value"; position:absolute; top:-12px; left:30px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--blue-light); background:var(--surface); border:1px solid var(--blue); padding:4px 11px; border-radius:999px;}
  .ptier{font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--blue);}
  .pamt{margin:16px 0 6px; font-size:40px; font-weight:300; color:#fff; letter-spacing:-1px;}
  .pamt span{font-size:16px; color:var(--muted); font-weight:400;}
  /* The amount itself is span-wrapped for live price binding — keep it at the big price size, not the muted "/ month" suffix size. */
  .pamt #premiumPriceAmount, .pamt #proPriceAmount{font-size:inherit; color:inherit; font-weight:inherit; letter-spacing:inherit;}
  .pdesc{font-size:14px; color:var(--muted); min-height:40px;}
  /* LAUNCH-NOTICE: temporary Premium launch banner — remove on/after 2026-07-01 */
  .launch-notice{margin:34px auto 0; max-width:760px; padding:14px 22px; background:rgba(var(--blue-rgb),0.10); border:1px solid var(--blue); border-radius:12px; font-size:14.5px; line-height:1.6; color:var(--blue-light); text-align:center;}
  .launch-notice strong{color:#fff; font-weight:700;}
  .plist{list-style:none; margin:20px 0 28px; display:flex; flex-direction:column; gap:11px;}
  .plist li{display:flex; gap:10px; font-size:14.5px; color:var(--text);}
  .plist li svg{flex-shrink:0; width:17px; height:17px; color:var(--granted); margin-top:2px;}
  .pcard .btn{width:100%; justify-content:center; margin-top:auto;}

  /* close */
  .close{padding:118px 0; text-align:center; position:relative; overflow:hidden; background:radial-gradient(700px 420px at 50% 120%,rgba(0,104,158,0.30),transparent 70%);}
  .close h2{margin:0 auto; max-width:720px; font-size:clamp(34px,5vw,52px);}
  .close .sub{margin:20px auto 36px;}
  .close .hero-cta{justify-content:center;}

  footer{border-top:1px solid rgba(var(--blue-rgb),0.14); padding:52px 0 38px; background:var(--bg-deep);}
  .foot-in{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;}
  .foot-brand img{height:42px; width:auto; margin-bottom:14px;}
  .foot-brand p{font-size:14px; color:var(--faint); max-width:320px; line-height:1.6;}
  .socials{display:flex; gap:16px; margin-top:18px;}
  .socials a{color:var(--dim); transition:color 0.2s, transform 0.2s;}
  .socials a:hover{color:#fff; transform:translateY(-2px);}
  .socials svg{width:20px; height:20px; display:block;}
  .foot-col h4{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue); margin-bottom:15px;}
  .foot-col a{display:block; font-size:15px; color:var(--muted); margin-bottom:10px; transition:color 0.2s;}
  .foot-col a:hover{color:#fff;}
  .foot-bottom{margin-top:44px; padding-top:22px; border-top:1px solid rgba(var(--blue-rgb),0.1); display:flex; justify-content:space-between; font-size:13px; color:var(--faint); flex-wrap:wrap; gap:12px;}

  /* Mid widths (small laptops): tighten the nav so all links stay on one line
     down to the 900px collapse point, instead of wrapping. */
  @media (max-width:1080px){
    .nav-links{gap:14px;}
    .nav-links a{font-size:13px;}
    .nav-links a.nav-signin{padding:6px 12px; font-size:12.5px;}
    .nav-links a.btn{padding:9px 14px; font-size:13.5px;}
  }

  @media (max-width:900px){
    .hero-in,.split,.ai-row,.foot-in{grid-template-columns:1fr; gap:38px;}
    .hero-in{padding-left:32px; padding-right:32px;}
    .mapcard{border-radius:16px; border-right:1px solid rgba(var(--blue-rgb),0.28); aspect-ratio:16/9; min-height:0;}
    .split.rev .copy{order:0;}
    .sgrid,.price-grid,.who-grid,.tgrid,.sigcards{grid-template-columns:1fr;}
    h1{font-size:44px;} h2{font-size:32px;} .close h2{font-size:34px;}
    /* collapse the inline links into a full-height hamburger drawer */
    .nav-toggle{display:inline-flex; margin-left:12px;}
    /* surface Sign in / account chip on the bar; hide the in-drawer copies */
    .nav-bar-auth{display:inline-flex; margin-left:auto;}
    .nav-links .nav-signin, .nav-links .acct-chip{display:none;}
    /* absolute (not fixed) because the nav's backdrop-filter makes it the
       containing block for fixed children; height is pinned to the viewport. */
    .nav-links{position:absolute; top:100%; left:0; right:0;
      height:calc(100vh - 74px); height:calc(100dvh - 74px);
      flex-direction:column; align-items:stretch; gap:0;
      background:linear-gradient(180deg,#04273d,#03283f);
      border-top:1px solid rgba(var(--blue-rgb),0.14);
      padding:8px 0 max(28px, env(safe-area-inset-bottom)); overflow-y:auto;
      visibility:hidden; opacity:0; transform:translateY(-6px);
      transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;}
    nav.nav-open .nav-links{visibility:visible; opacity:1; transform:none;}
    .nav-links a{font-size:17px; padding:16px 32px; width:100%; border-bottom:1px solid rgba(var(--blue-rgb),0.08);}
    .nav-links a:hover{background:rgba(var(--blue-rgb),0.06); color:#fff;}
    .nav-links a.current{color:#fff; box-shadow:inset 3px 0 0 var(--bright);}
    .nav-links a.nav-signin{border:none; border-radius:0; padding:16px 32px; font-size:17px;}
    .nav-links a.btn{margin:auto 24px 4px; padding:15px 20px; width:auto; justify-content:center;
      font-size:16px; border-bottom:none; box-shadow:0 8px 24px rgba(0,104,158,0.4);}
    .acct-chip{padding:12px 32px;}
  }

  /* Hero markers shrink on phones, where the map image is small. */
  @media (max-width:600px){
    .hmk-dot{width:5px; height:5px;}
    .hmk-dot::before,.hmk-dot::after{inset:-4px;}
    .hmk-line{width:13px; height:1.5px; margin-left:5px;}
    .hmk--left .hmk-line{margin-left:0; margin-right:5px;}
    .hmk-label{font-size:9px; padding:3px 7px; border-radius:5px; letter-spacing:0.2px;}
  }

  /* ===== Motion pass ===== */
  /* All entrance motion is gated on no-preference, so reduced-motion users
     get the final state immediately. Hidden states are scoped under html.js
     so a no-JS browser also renders everything. */
  @media (prefers-reduced-motion: no-preference){
    html.js .reveal{opacity:0; transform:translateY(20px);
      transition:opacity .7s var(--ease), transform .7s var(--ease);}
    html.js .reveal.is-in{opacity:1; transform:none;}

    /* hero entrance */
    html.js .hero .eyebrow,
    html.js .hero h1,
    html.js .hero .lead,
    html.js .hero .hero-cta,
    html.js .hero .hero-note{opacity:0; transform:translateY(16px);
      animation:nm-rise .8s var(--ease) forwards;}
    html.js .hero .eyebrow{animation-delay:.05s;}
    html.js .hero h1{animation-delay:.14s;}
    html.js .hero .lead{animation-delay:.26s;}
    html.js .hero .hero-cta{animation-delay:.38s;}
    html.js .hero .hero-note{animation-delay:.48s;}

    /* hero map wipes in from the right */
    html.js .hero .mapcard{clip-path:inset(0 0 0 100%);
      animation:nm-wipe 1.1s var(--ease) .2s forwards;}

    /* hero map: live-signal motion. Image drifts slowly, a scan line sweeps,
       and the pins fade up in sequence after the map has wiped in (~1.3s),
       each dot emitting a repeating radar ping. */
    html.js .mapcard img{animation:nm-drift 28s ease-in-out 1.3s infinite alternate;}
    html.js .hero-scan{animation:nm-scan 7.5s linear 2s infinite;}
    html.js .hmk{opacity:0; transform:translateY(8px); animation:nm-rise .6s var(--ease) forwards;}
    html.js .hmk-dot::after{animation:nm-ping 2.8s ease-out infinite;}
  }
  @keyframes nm-rise{to{opacity:1; transform:none;}}
  @keyframes nm-wipe{to{clip-path:inset(0 0 0 0);}}
  @keyframes nm-drift{from{transform:scale(1.0);} to{transform:scale(1.03) translate(-0.6%,-0.4%);}}
  @keyframes nm-ping{0%{opacity:0.65; transform:scale(1);} 80%,100%{opacity:0; transform:scale(2.5);}}
  @keyframes nm-scan{0%{opacity:0; top:-130px;} 7%{opacity:1;} 90%{opacity:1;} 100%{opacity:0; top:100%;}}

  /* keep hero content above the reticle/grid */
  .hero .hero-in{position:relative; z-index:3;}

  /* targeting reticle: thin hairlines that track the cursor inside the hero */
  .reticle{position:absolute; inset:0; pointer-events:none; z-index:1;
    opacity:0; transition:opacity .35s ease;}
  .reticle::before,.reticle::after{content:""; position:absolute;
    background:rgba(var(--blue-rgb),0.16);}
  .reticle::before{left:0; right:0; height:1px; top:var(--ry,50%);}
  .reticle::after{top:0; bottom:0; width:1px; left:var(--rx,50%);}
  .hero.reticle-on .reticle{opacity:1;}
  @media (prefers-reduced-motion: reduce){ .reticle{display:none;} }
  @media (pointer:coarse){ .reticle{display:none;} }

  .btn.magnetic{will-change:transform;}

  /* lightbox: click any screenshot to enlarge */
  .shot{cursor:zoom-in; transition:filter .2s var(--ease);}
  .shot:hover{filter:brightness(1.06);}
  .lb{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:4vmin;
    background:rgba(3,16,26,0.86); backdrop-filter:blur(6px);
    opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s var(--ease);}
  .lb.open{opacity:1; visibility:visible;}
  .lb-img{max-width:96vw; max-height:92vh; width:auto; height:auto; border-radius:12px;
    border:1px solid rgba(var(--blue-rgb),0.3); box-shadow:0 40px 120px rgba(0,0,0,0.72);
    transform:scale(0.97); transition:transform .25s var(--ease); cursor:default;}
  .lb.open .lb-img{transform:scale(1);}
  .lb-close{position:absolute; top:20px; right:24px; width:44px; height:44px; border:none; border-radius:50%;
    background:rgba(255,255,255,0.08); color:#fff; font-size:26px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .2s;}
  .lb-close:hover{background:rgba(255,255,255,0.18);}
  @media (prefers-reduced-motion: reduce){ .lb,.lb-img,.shot{transition:none;} }

  /* ===== sub-page hero (product + pricing pages) ===== */
  .page-hero{position:relative; padding:60px 0 28px; overflow:hidden;
    background:radial-gradient(900px 520px at 80% -20%,rgba(0,104,158,0.26),transparent 62%);
    border-bottom:1px solid rgba(var(--blue-rgb),0.12);}
  .page-hero .wrap{position:relative; z-index:2;}
  .breadcrumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:var(--faint); margin-bottom:22px;}
  .breadcrumb a{color:var(--dim); transition:color .2s;}
  .breadcrumb a:hover{color:#fff;}
  .breadcrumb .sep{opacity:0.5;}
  .page-hero h1{font-size:clamp(36px,5vw,58px); line-height:1.06; font-weight:300; letter-spacing:-1.2px; color:#fff; max-width:880px;}
  .page-hero h1 b{font-weight:700; color:var(--blue-light);}
  .page-hero .lead{margin-top:22px; max-width:700px;}
  .page-hero .hero-cta{margin-top:28px;}

  /* generic prose for sub-page body copy */
  .prose p{font-size:17px; line-height:1.7; color:var(--muted); font-weight:300; max-width:760px; margin-top:18px;}
  .prose p b{color:var(--text); font-weight:500;}
  .prose p a{color:var(--blue-light); border-bottom:1px solid rgba(var(--blue-rgb),0.4);}
  .prose p a:hover{color:#fff; border-color:var(--blue);}

  /* contextual "learn more" link used in homepage sections */
  .learn-more{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:15px; font-weight:600;
    color:var(--blue-light); border-bottom:1px solid rgba(var(--blue-rgb),0.4); padding-bottom:2px;
    transition:color .2s, border-color .2s;}
  .learn-more:hover{color:#fff; border-color:var(--blue);}
  .learn-more svg{width:16px; height:16px;}

  /* ===== related-pages cross-link grid (foot of every sub-page) ===== */
  .related{background:var(--bg); border-top:1px solid rgba(var(--blue-rgb),0.12);}
  .rgrid{margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .rcard{display:flex; flex-direction:column; background:linear-gradient(160deg,var(--surface),var(--bg));
    border:1px solid rgba(var(--blue-rgb),0.18); border-radius:13px; padding:24px 22px; transition:all .3s var(--ease);}
  .rcard:hover{border-color:rgba(var(--blue-rgb),0.45); transform:translateY(-3px);}
  .rcard h3{font-size:17px; font-weight:700; color:#fff; margin-bottom:7px;}
  .rcard p{font-size:14px; color:var(--muted); line-height:1.55; font-weight:300; flex:1;}
  .rcard .arr{color:var(--blue-light); font-size:14px; margin-top:14px; font-weight:600;}
  @media (max-width:900px){ .rgrid{grid-template-columns:1fr;} }