:root{
    /* The canvas is tinted and the card surface is white, so panels lift off the page.
       When both were #FFFFFF the whole site read as one flat white sheet. */
    --bg:#F1F5FC; --bg-alt:#E7EEFA; --surface:#FFFFFF; --surface-2:#F8FAFE;
    --navy:#0B1B45; --navy-2:#141F5C;
    --ink:#0F1B36; --ink-2:#48567A; --muted:#7A8AA8;
    --line:#DCE5F4; --line-2:#C6D2E9;
    /* chrome, derived so header/footer/mega-menu follow the theme rather than hard-coding */
    --header-bg:color-mix(in srgb, var(--bg) 88%, transparent);
    --mega-bg:linear-gradient(180deg, var(--surface), var(--surface-2));
    --footer-bg:linear-gradient(180deg,#0B1B45,#0A1436);
    /* accent hues */
    --blue:#2E6BFF; --blue-d:#1E4FD1;
    --violet:#7A4DFF; --cyan:#0FA9CC; --emerald:#0FA672; --amber:#EA9A1F; --rose:#E5468A;
    /* gradients */
    --grad-brand:linear-gradient(120deg,#2E6BFF 0%,#7A4DFF 100%);
    --grad-brand-soft:linear-gradient(120deg,#2E6BFF 0%,#6A8BFF 55%,#7A4DFF 100%);
    --g-blue:linear-gradient(135deg,#4C86FF,#2E6BFF);
    --g-violet:linear-gradient(135deg,#9B6BFF,#6A38F0);
    --g-cyan:linear-gradient(135deg,#2AD0EA,#0B93B8);
    --g-emerald:linear-gradient(135deg,#2BD69C,#079466);
    --g-amber:linear-gradient(135deg,#FCC24B,#E08414);
    --g-rose:linear-gradient(135deg,#F779B0,#DB3179);
    --tint-blue:#EAF1FF; --tint-violet:#F0EBFF; --tint-cyan:#E4F7FB; --tint-emerald:#E2F6EE; --tint-amber:#FDF2DD; --tint-rose:#FCEAF3;
    --gold:#C9922E;
    --shadow-sm:0 1px 2px rgba(15,27,54,.06), 0 4px 12px rgba(15,27,54,.05);
    --shadow:0 2px 8px rgba(15,27,54,.07), 0 20px 44px -20px rgba(46,107,255,.24);
    --shadow-l:0 6px 14px rgba(15,27,54,.1), 0 44px 80px -30px rgba(46,107,255,.34);
    --radius:16px; --maxw:1200px;
    --disp:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
    --body:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
    --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#060C1E; --bg-alt:#0A1229; --surface:#101C3E; --surface-2:#0C1631;
      --navy:#0A1436; --navy-2:#111C46;
      --ink:#EAF0FB; --ink-2:#AEBCD8; --muted:#7C8CAC;
      --line:#1D2A50; --line-2:#283769;
      --header-bg:color-mix(in srgb, var(--bg) 86%, transparent);
      --mega-bg:linear-gradient(180deg, var(--surface), var(--surface-2));
      --footer-bg:linear-gradient(180deg,#0A1436,#060C1E);
      --blue:#5B8CFF; --blue-d:#7AA0FF;
      --violet:#9B7BFF; --cyan:#39C6E4; --emerald:#2BD69C; --amber:#F2B441; --rose:#F06BA6;
      --tint-blue:#122145; --tint-violet:#1C1A4A; --tint-cyan:#0E2E3A; --tint-emerald:#0D2E28; --tint-amber:#2E2413; --tint-rose:#2E1728;
      --shadow-sm:0 1px 2px rgba(0,0,0,.4);
      --shadow:0 2px 8px rgba(0,0,0,.45), 0 20px 44px -20px rgba(0,0,0,.6);
      --shadow-l:0 6px 14px rgba(0,0,0,.5), 0 44px 80px -28px rgba(0,0,0,.72);
    }
  }
  :root[data-theme="light"]{
    --bg:#F1F5FC; --bg-alt:#E7EEFA; --surface:#FFFFFF; --surface-2:#F8FAFE; --navy:#0B1B45; --navy-2:#141F5C;
    --ink:#0F1B36; --ink-2:#48567A; --muted:#7A8AA8; --line:#DCE5F4; --line-2:#C6D2E9;
    --header-bg:color-mix(in srgb, var(--bg) 88%, transparent);
    --mega-bg:linear-gradient(180deg, var(--surface), var(--surface-2));
    --footer-bg:linear-gradient(180deg,#0B1B45,#0A1436);
    --blue:#2E6BFF; --blue-d:#1E4FD1; --violet:#7A4DFF; --cyan:#0FA9CC; --emerald:#0FA672; --amber:#EA9A1F; --rose:#E5468A;
    --tint-blue:#EAF1FF; --tint-violet:#F0EBFF; --tint-cyan:#E4F7FB; --tint-emerald:#E2F6EE; --tint-amber:#FDF2DD; --tint-rose:#FCEAF3;
    --shadow-sm:0 1px 2px rgba(15,27,54,.06),0 4px 12px rgba(15,27,54,.05);
    --shadow:0 2px 8px rgba(15,27,54,.07),0 20px 44px -20px rgba(46,107,255,.24);
    --shadow-l:0 6px 14px rgba(15,27,54,.1),0 44px 80px -30px rgba(46,107,255,.34);
  }
  :root[data-theme="dark"]{
    --bg:#060C1E; --bg-alt:#0A1229; --surface:#101C3E; --surface-2:#0C1631; --navy:#0A1436; --navy-2:#111C46;
    --ink:#EAF0FB; --ink-2:#AEBCD8; --muted:#7C8CAC; --line:#1D2A50; --line-2:#283769;
    --header-bg:color-mix(in srgb, var(--bg) 86%, transparent);
    --mega-bg:linear-gradient(180deg, var(--surface), var(--surface-2));
    --footer-bg:linear-gradient(180deg,#0A1436,#060C1E);
    --blue:#5B8CFF; --blue-d:#7AA0FF; --violet:#9B7BFF; --cyan:#39C6E4; --emerald:#2BD69C; --amber:#F2B441; --rose:#F06BA6;
    --tint-blue:#122145; --tint-violet:#1C1A4A; --tint-cyan:#0E2E3A; --tint-emerald:#0D2E28; --tint-amber:#2E2413; --tint-rose:#2E1728;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 8px rgba(0,0,0,.45),0 20px 44px -20px rgba(0,0,0,.6);
    --shadow-l:0 6px 14px rgba(0,0,0,.5),0 44px 80px -28px rgba(0,0,0,.72);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; }
  h1,h2,h3,h4{ font-family:var(--disp); font-weight:600; letter-spacing:-.02em; line-height:1.12; margin:0; }
  p{ margin:0; }
  a{ color:inherit; text-decoration:none; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  .tnum{ font-variant-numeric:tabular-nums; }
  .gtext{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--disp); font-weight:560; font-size:15px;
    padding:13px 24px; border-radius:10px; cursor:pointer; border:1px solid transparent; transition:filter .15s, box-shadow .15s, transform .15s, border-color .15s, background .15s; white-space:nowrap; }
  .btn svg{ width:16px; height:16px; }
  .btn-primary{ background:var(--grad-brand); color:#fff; box-shadow:0 8px 20px -6px rgba(46,107,255,.5); }
  .btn-primary:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(46,107,255,.55); }
  .btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-2); }
  .btn-outline:hover{ border-color:var(--blue); color:var(--blue); }
  .btn-onnavy{ background:#fff; color:var(--navy); }
  .btn-onnavy:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(0,0,0,.5); }
  .btn-ghost-navy{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); }
  .btn-ghost-navy:hover{ background:rgba(255,255,255,.2); }

  /* UTILITY BAR */
  .util{ background:var(--navy); color:rgba(255,255,255,.95); font-size:13px; font-weight:600; position:relative; overflow:hidden; }
  .util::before{ content:""; position:absolute; inset:0; background:var(--grad-brand); opacity:.16; }
  .util-in{ position:relative; display:flex; align-items:center; justify-content:space-between; height:40px; }
  .util a{ color:rgba(255,255,255,.95); }
  .util .l{ display:flex; gap:24px; align-items:center; }
  .util .l span{ display:inline-flex; align-items:center; gap:7px; }
  .util .l svg{ width:14px; height:14px; opacity:.85; }
  .util .r{ display:flex; gap:20px; align-items:center; }
  .util .r a:hover{ color:#fff; }
  @media (max-width:760px){ .util .l span.addr{ display:none; } }
  @media (max-width:600px){ .util .r{ display:none; } .util .l span:not(:first-child){ display:none; } .util-in{ justify-content:center; } }

  /* NAV */
  header.nav{ position:sticky; top:0; z-index:60; background:var(--header-bg); backdrop-filter:saturate(1.8) blur(20px);
    box-shadow:0 1px 0 var(--line), 0 12px 34px -24px rgba(15,27,54,.55); }
  header.nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--grad-brand); opacity:.55; }
  .nav-in{ display:flex; align-items:center; justify-content:space-between; height:78px; }
  .brand{ display:flex; align-items:center; gap:12px; font-family:var(--disp); color:var(--ink); }
  .brand .hdr-logo{ height:28px; width:auto; display:block; }
  .brand .hdr-logo text{ font-family:var(--disp); font-weight:700; font-size:34px; letter-spacing:-.5px; }
  .brand .hdr-logo .lg-b{ fill:#2166d6; }
  .brand .hdr-logo .lg-g{ fill:#2f9e33; }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .brand .hdr-logo .lg-b{ fill:#6aa0ff; }
    :root:not([data-theme="light"]) .brand .hdr-logo .lg-g{ fill:#57cf61; }
  }
  :root[data-theme="dark"] .brand .hdr-logo .lg-b{ fill:#6aa0ff; }
  :root[data-theme="dark"] .brand .hdr-logo .lg-g{ fill:#57cf61; }
  :root[data-theme="light"] .brand .hdr-logo .lg-b{ fill:#2166d6; }
  :root[data-theme="light"] .brand .hdr-logo .lg-g{ fill:#2f9e33; }
  .nav-links{ display:flex; gap:32px; font-size:15px; font-weight:540; }
  .nav-links a{ position:relative; color:var(--ink); padding:6px 0; transition:color .15s; }
  .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--grad-brand); transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
  .nav-links a:hover, .nav-links a.active{ color:var(--blue); }
  .nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }

  /* ---- Tools mega-menu ------------------------------------------------------
     Column count is driven by the category count, and each column scrolls rather
     than growing the panel, so the catalogue can pass 14 tools without a redesign. */
  .has-mega{ position:relative; display:flex; align-items:center; }
  .mega-trigger{ display:inline-flex; align-items:center; gap:5px; }
  .mega-caret{ width:14px; height:14px; transition:transform .2s ease; }
  .has-mega:hover .mega-caret, .has-mega:focus-within .mega-caret{ transform:rotate(180deg); }

  .mega{ position:absolute; top:100%; left:50%; transform:translate(-50%,6px); margin-top:10px;
    width:min(860px, calc(100vw - 48px)); background:var(--mega-bg); border:1px solid var(--line-2);
    border-radius:18px; box-shadow:0 34px 80px -30px rgba(11,27,69,.5), 0 2px 6px rgba(11,27,69,.08); padding:16px;
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index:60; }
  .has-mega:hover .mega, .has-mega:focus-within .mega{ opacity:1; visibility:visible; pointer-events:auto;
    transform:translate(-50%,0); transition:opacity .18s ease, transform .18s ease, visibility 0s; }
  /* the gap between the trigger and the panel would otherwise close the menu on the way down */
  .mega::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }

  .mega-in{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 18px; }
  .mega-col{ padding:4px; min-width:0; }
  .mega-h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--ink-3); padding:6px 8px 8px; }
  .nav-links .mega-item{ display:flex; align-items:flex-start; gap:11px; padding:8px; border-radius:11px;
    transition:background .15s; min-width:0; }
  .nav-links .mega-item::after{ display:none; }                 /* the nav underline does not belong here */
  .nav-links .mega-item:hover{ background:var(--tint-blue); }
  .mi-ic{ width:32px; height:32px; border-radius:9px; background:var(--cg); color:#fff; display:grid;
    place-items:center; flex-shrink:0; box-shadow:0 7px 14px -6px var(--cshadow); }
  .mi-ic svg{ width:16px; height:16px; }
  .mi-tx{ min-width:0; display:block; }
  .mi-n{ display:flex; align-items:center; gap:7px; font-family:var(--disp); font-weight:620;
    font-size:14px; letter-spacing:-.01em; color:var(--ink); }
  .mi-s{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px; line-height:1.35;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-links .mega-item:hover .mi-n{ color:var(--blue); }

  .nav-links .mega-cta{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:10px;
    padding:13px 16px; border-radius:13px; background:var(--grad-brand); color:#fff;
    font-family:var(--disp); font-weight:620; font-size:14px; }
  .nav-links .mega-cta, .nav-links .mega-cta span, .nav-links .mega-cta svg{ color:#fff; }
  .nav-links .mega-cta::after{ display:none; }
  .nav-links .mega-cta:hover{ color:#fff; filter:brightness(1.06); }
  .nav-links .mega-cta svg{ width:17px; height:17px; flex-shrink:0; }

  /* 5+ categories go to three columns rather than a taller panel */
  @media (min-width:1180px){ .mega-in:has(.mega-col:nth-child(5)){ grid-template-columns:repeat(3, minmax(0,1fr)); } }
  .nav-actions{ display:flex; align-items:center; gap:12px; }
  .theme-btn{ width:40px; height:40px; border-radius:11px; border:1px solid var(--line-2); background:var(--bg-alt); display:grid; place-items:center; cursor:pointer; color:var(--ink-2); transition:border-color .15s, color .15s; }
  .theme-btn:hover{ border-color:var(--blue); color:var(--blue); }
  .theme-btn svg{ width:17px; height:17px; }
  .nav-login{ font-size:15px; font-weight:560; color:var(--ink); }
  .nav-login:hover{ color:var(--blue); }
  .hamburger{ display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); background:var(--bg-alt); cursor:pointer; align-items:center; justify-content:center; color:var(--ink); }
  .hamburger svg{ width:22px; height:22px; }
  .mobile-menu{ display:none; }
  @media (max-width:940px){
    .nav-links,.nav-login{ display:none; }
    .nav-actions .btn-primary{ display:none; }   /* Get Started moves into the menu */
    .hamburger{ display:inline-grid; place-items:center; }
    .mobile-menu{ position:absolute; top:100%; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--line);
      box-shadow:0 24px 44px -18px rgba(15,27,54,.35); padding:14px 26px 20px; flex-direction:column; gap:2px; z-index:59; }
    .mobile-menu.open{ display:flex; }
    .mobile-menu a{ padding:13px 12px; border-radius:10px; font-size:16px; font-weight:560; color:var(--ink); font-family:var(--disp); }
    .mobile-menu a:hover, .mobile-menu a.active{ background:var(--bg-alt); color:var(--blue); }
    .mobile-menu .mm-login{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; }
    /* Tools collapses on a phone — 14 flat links would bury every other nav item */
    .mm-group{ border-radius:10px; }
    .mm-group summary{ display:flex; align-items:center; gap:9px; padding:13px 12px; border-radius:10px;
      font-size:16px; font-weight:560; color:var(--ink); font-family:var(--disp); cursor:pointer;
      list-style:none; min-height:44px; }
    .mm-group summary::-webkit-details-marker{ display:none; }
    .mm-group summary::after{ content:""; width:8px; height:8px; margin-left:auto; border-right:2px solid var(--ink-3);
      border-bottom:2px solid var(--ink-3); transform:rotate(45deg) translateY(-2px); transition:transform .2s; }
    .mm-group[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
    .mm-count{ font-family:var(--mono); font-size:11px; color:var(--ink-3); background:var(--bg-alt);
      border-radius:100px; padding:2px 8px; }
    .mm-cat{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.13em;
      text-transform:uppercase; color:var(--ink-3); padding:12px 12px 4px; }
    .mobile-menu .mm-tool{ padding:11px 12px 11px 22px; font-size:15px; font-weight:520; }
    .mobile-menu .mm-all{ font-weight:640; color:var(--blue); }
    .mobile-menu .btn-primary{ color:#fff; justify-content:center; margin-top:8px; }
  }

  /* HERO */
  .hero{ position:relative; overflow:hidden; color:#fff;
    background:
      radial-gradient(60% 55% at 12% 8%, rgba(46,107,255,.55), transparent 60%),
      radial-gradient(55% 60% at 88% 12%, rgba(122,77,255,.5), transparent 58%),
      radial-gradient(50% 60% at 70% 100%, rgba(15,169,204,.42), transparent 60%),
      linear-gradient(135deg,#0B1B45 0%,#14205C 55%,#1A1E5E 100%); }
  .hero::before{ content:""; position:absolute; inset:0; opacity:.4; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:54px 54px; mask-image:radial-gradient(120% 90% at 30% 0%,#000,transparent 72%); }
  /* padding-block, not the shorthand: .hero-in is also a .wrap, and `padding:44px 0 46px`
     zeroed the inline gutter, so the hero text ran flush to the edge on tablet and phone. */
  .hero-in{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:52px; align-items:center; padding-block:44px 46px; }
  .hero-in .slider{ max-width:820px; }

  /* All slides share one grid cell, so the slider is always as tall as its TALLEST slide.
     With absolute positioning only the active slide had height, so every rotation resized the
     hero and shunted the highlights band up and down the page. */
  .slider{ position:relative; display:grid; align-items:start; }
  .slide{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .28s ease, visibility 0s linear .28s; pointer-events:none; }
  .slide.active{ opacity:1; visibility:visible; transition:opacity .55s ease .2s, visibility 0s; pointer-events:auto; }
  .s-tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:#fff; background:linear-gradient(120deg,rgba(46,107,255,.34),rgba(122,77,255,.34)); border:1px solid rgba(255,255,255,.22); padding:7px 14px; border-radius:100px; }
  .s-tag .dot{ width:7px; height:7px; border-radius:50%; background:#8FE0C0; box-shadow:0 0 0 3px rgba(143,224,192,.28); }
  .slide h1, .slide h2{ font-size:clamp(34px,4.4vw,54px); margin-top:22px; color:#fff; letter-spacing:-.03em; font-weight:700; }
  .slide h1 .u, .slide h2 .u{ background:linear-gradient(100deg,#8FC2FF,#B69BFF,#7FE3EC); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .slide p{ font-size:18.5px; color:rgba(233,240,248,.84); margin-top:20px; max-width:44ch; }
  .hero-cta{ display:flex; gap:13px; margin-top:30px; flex-wrap:wrap; }
  .slider > .hero-cta{ grid-area:2 / 1; }
  .s-top{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; }
  .s-top .hero-trust{ margin-top:0; }
  .hero-trust{ display:flex; gap:26px; margin-top:30px; flex-wrap:wrap; }
  .hero-trust span{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:rgba(233,240,248,.82); }
  .hero-trust svg{ width:17px; height:17px; color:#7FE3B0; }
  select.yr option{ color:#0F1B36; }
  input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:100px; margin-top:16px;
    background:linear-gradient(90deg,#2E6BFF var(--fill,30%),var(--line-2) var(--fill,30%)); outline:none; }
  input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--blue); box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
  .ct{ border-radius:9px; padding:9px 11px; min-width:0; }
  .ct.tax{ background:var(--tint-blue); }
  .ct.sur{ background:var(--tint-amber); }
  .ct.net{ background:var(--tint-emerald); }
  .ct .cl{ display:block; font-size:10.5px; color:var(--ink-2); white-space:nowrap; }
  .ct .cv{ display:block; font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:-.02em; margin-top:2px; white-space:nowrap; }
  .ct.tax .cv{ color:var(--blue); }
  .ct.sur .cv{ color:var(--amber); }
  .ct.net .cv{ color:var(--emerald); }
  @media (max-width:940px){ .hero-in{ grid-template-columns:1fr; gap:44px; padding-block:40px 48px; } }

  /* HIGHLIGHTS */
  .highlights{ background:linear-gradient(180deg,var(--bg),var(--bg-alt)); border-bottom:1px solid var(--line); }
  .hero + .highlights .hl-grid{ padding-block-start:34px; }
  /* padding-block for the same reason as .hero-in — .hl-grid is a .wrap, and the shorthand
     zeroed the inline gutter, so the cards sat flush to the edge on tablet. */
  .hl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-block:28px; }
  .hl{ position:relative; display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 20px; overflow:hidden;
    transition:transform .18s, box-shadow .18s, border-color .18s; }
  .hl::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--cg); }
  .hl:hover{ transform:translateY(-4px); box-shadow:0 18px 38px -20px var(--cshadow); border-color:transparent; }
  .hl .hi{ width:44px; height:44px; border-radius:11px; background:var(--cg); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 9px 18px -7px var(--cshadow); }
  .hl .hi svg{ width:22px; height:22px; }
  .hl .ht{ font-family:var(--disp); font-weight:620; font-size:15.5px; letter-spacing:-.01em; }
  .hl .hs{ font-size:13px; color:var(--ink-2); margin-top:4px; line-height:1.4; }
  /* Auto-fitting variant for pages whose tile count varies (module landing pages). */
  .hl-grid.hl-auto{ grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
  @media (max-width:900px){ .hl-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .hl-grid{ grid-template-columns:1fr; } }


  /* ---- Tools: shared pills, index grid and tool page ----------------------
     Every grid here is auto-fit, so the catalogue can grow past 14 tools and past
     4 categories without a layout change. */
  .pill{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:10px;
    text-transform:uppercase; letter-spacing:.05em; padding:4px 9px; border-radius:100px;
    background:var(--bg-alt); color:var(--ink-2); font-weight:600; white-space:nowrap; flex-shrink:0; }
  .pill.soon{ background:var(--tint-amber); color:var(--amber); }
  .pill.live{ background:var(--tint-emerald); color:var(--emerald); }
  .pill.ai{ background:var(--tint-violet); color:var(--violet); }

  .tool-filters{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
  .tf{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:100px;
    border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
    font-family:var(--disp); font-weight:600; font-size:14px; cursor:pointer;
    transition:border-color .15s, color .15s, background .15s; }
  .tf:hover{ border-color:var(--ink-3); color:var(--ink); }
  .tf span{ font-family:var(--mono); font-size:11px; background:var(--bg-alt); color:var(--ink-3);
    border-radius:100px; padding:2px 7px; }
  /* The brand gradient, not var(--ink): --ink is near-white in dark mode, so an --ink fill
     with white text rendered as white-on-white. A fixed gradient reads in both themes. */
  .tf.active{ background:var(--grad-brand); border-color:transparent; color:#fff;
    box-shadow:0 8px 18px -10px rgba(46,107,255,.6); }
  .tf.active span{ background:rgba(255,255,255,.22); color:#fff; }
  .tf.active:hover{ color:#fff; filter:brightness(1.05); }

  .tool-cat{ margin-bottom:46px; }
  .tool-cat[hidden]{ display:none; }
  .tool-cat-h{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .tool-cat-h h2{ font-size:clamp(18px,2vw,22px); white-space:nowrap; }
  .tool-cat-h .rule{ flex:1; height:1px; background:var(--line); }
  .tool-cat-n{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }

  .tool-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(268px,1fr)); gap:18px; }
  .tool-card{ display:flex; flex-direction:column; gap:9px; position:relative; overflow:hidden;
    background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px;
    transition:transform .18s, box-shadow .18s, border-color .18s; }
  .tool-card[hidden]{ display:none; }
  .tool-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--cg); }
  .tool-card:hover{ transform:translateY(-4px); box-shadow:0 20px 42px -22px var(--cshadow); border-color:transparent; }
  .tc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .tc-ic{ width:44px; height:44px; border-radius:12px; background:var(--cg); color:#fff; display:grid;
    place-items:center; flex-shrink:0; box-shadow:0 9px 18px -7px var(--cshadow); }
  .tc-ic svg{ width:21px; height:21px; }
  .tc-badges{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
  .tc-n{ font-family:var(--disp); font-weight:660; font-size:17px; letter-spacing:-.015em; color:var(--ink); }
  .tc-s{ font-size:14px; color:var(--ink-2); line-height:1.5; }
  .tc-go{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:8px;
    font-family:var(--disp); font-weight:620; font-size:13.5px; color:var(--blue); }
  .tc-go svg{ width:15px; height:15px; transition:transform .18s; }
  .tool-card:hover .tc-go svg{ transform:translateX(3px); }
  .tool-empty{ text-align:center; color:var(--ink-2); padding:30px 0; }
  .tool-all{ text-align:center; margin-top:26px; }
  .tool-all a{ font-family:var(--disp); font-weight:620; color:var(--blue); }

  /* tool page */
  .tool-hero-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:22px 0 18px; }
  .tool-hero-ic{ width:56px; height:56px; border-radius:16px; background:var(--cg); color:#fff;
    display:grid; place-items:center; flex-shrink:0; box-shadow:0 12px 26px -10px var(--cshadow); }
  .tool-hero-ic svg{ width:27px; height:27px; }
  .tool-tagline{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--blue); margin-bottom:6px !important; }
  .tool-points{ list-style:none; display:grid; gap:11px; margin-top:22px; }
  .tool-points li{ display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--ink); }
  .tool-points svg{ width:19px; height:19px; flex-shrink:0; margin-top:2px; color:var(--emerald); }

  .soon-bar{ background:var(--tint-amber); border-bottom:1px solid var(--line); }
  .soon-in{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-block:15px; }
  .soon-in p{ font-size:14.5px; color:var(--ink); }

  .tool-feat{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; }
  .tf-card{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
    border-radius:15px; padding:22px; transition:transform .18s, box-shadow .18s, border-color .18s; }
  .tf-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cg); }
  .tf-card:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -22px var(--cshadow); border-color:transparent; }
  .tf-card h3{ font-family:var(--disp); font-weight:650; font-size:16.5px; letter-spacing:-.01em; }
  .tf-card p{ font-size:14.5px; color:var(--ink-2); margin-top:9px; line-height:1.55; }

  .tool-ai{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:18px; }
  .ta-card{ display:flex; gap:14px; background:var(--surface); border:1px solid var(--line);
    border-radius:15px; padding:22px; }
  .ta-ic{ width:42px; height:42px; border-radius:12px; background:var(--g-violet); color:#fff;
    display:grid; place-items:center; flex-shrink:0; box-shadow:0 9px 18px -7px rgba(122,77,255,.5); }
  .ta-ic svg{ width:20px; height:20px; }
  .ta-card h3{ font-family:var(--disp); font-weight:650; font-size:16px; letter-spacing:-.01em; }
  .ta-card p{ font-size:14.5px; color:var(--ink-2); margin-top:7px; line-height:1.55; }

  .tool-flow{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; }
  .tw-step{ background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:22px; }
  .tw-n{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--blue); }
  .tw-step h3{ font-family:var(--disp); font-weight:650; font-size:16.5px; letter-spacing:-.01em; margin-top:10px; }
  .tw-step p{ font-size:14.5px; color:var(--ink-2); margin-top:8px; line-height:1.55; }

  .tool-stat{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:26px;
    border:1px solid var(--line); border-radius:15px; padding:22px 24px; background:var(--surface);
    border-left:4px solid transparent; border-image:var(--cg) 1; border-image-slice:0 0 0 1; }
  .ts-v{ font-family:var(--disp); font-weight:720; font-size:clamp(28px,3.5vw,40px); letter-spacing:-.03em;
    background:var(--cg); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ts-l{ font-size:15px; color:var(--ink-2); }

  /* SECTION */
  section.blk{ padding:28px 0; position:relative; }
  .sec-head{ max-width:660px; }
  .sec-head.center{ margin:0 auto; text-align:center; }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
    background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--grad-brand); }
  .sec-head h2{ font-size:clamp(30px,3.6vw,44px); margin-top:14px; }
  .sec-head p{ color:var(--ink-2); font-size:18px; margin-top:15px; }

  /* FEATURES — colourful cards */
  .feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
  .feat{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; overflow:hidden;
    transition:box-shadow .2s, transform .2s, border-color .2s; }
  .feat::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--cg); }
  .feat::after{ content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-60px; top:-70px; background:var(--cg); opacity:.09; transition:opacity .2s, transform .2s; }
  .feat:hover{ transform:translateY(-5px); box-shadow:0 20px 44px -20px var(--cshadow); border-color:transparent; }
  .feat:hover::after{ opacity:.16; transform:scale(1.15); }
  .feat .fic{ width:54px; height:54px; border-radius:14px; background:var(--cg); color:#fff; display:grid; place-items:center; margin-bottom:18px; box-shadow:0 10px 22px -8px var(--cshadow); position:relative; }
  .feat .fic svg{ width:26px; height:26px; }
  .feat h3{ font-size:19.5px; position:relative; }
  .feat p{ color:var(--ink-2); font-size:15px; margin-top:9px; position:relative; }
  .feat .more{ font-size:14px; font-weight:600; margin-top:15px; display:inline-flex; align-items:center; gap:6px; position:relative; cursor:pointer;
    background:var(--cg); -webkit-background-clip:text; background-clip:text; color:transparent; transition:gap .15s; }
  .feat .more:hover{ gap:10px; }
  .feat .more svg{ width:14px; height:14px; color:var(--cvar); }
  @media (max-width:900px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .feat-grid{ grid-template-columns:1fr; } }

  /* VALUE */
  .value{ background:linear-gradient(180deg,var(--bg-alt),var(--bg)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  @media (max-width:860px){ }

  /* PROCESS */
  .proc{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:34px; }
  .pcol{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; overflow:hidden; }
  .pcol::before{ content:""; position:absolute; top:0; left:0; width:4px; bottom:0; background:var(--cg); }
  .pcol .pn{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.05em; background:var(--cg); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .pcol .pi{ width:48px; height:48px; border-radius:12px; background:var(--cg); color:#fff; display:grid; place-items:center; margin:14px 0 16px; box-shadow:0 10px 20px -8px var(--cshadow); }
  .pcol .pi svg{ width:24px; height:24px; }
  .pcol h4{ font-size:17px; }
  .pcol p{ color:var(--ink-2); font-size:14px; margin-top:8px; }
  @media (max-width:860px){ .proc{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .proc{ grid-template-columns:1fr; } }

  /* SOLUTIONS */
  .sol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
  .sol{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 22px; font-family:var(--disp); font-weight:560; font-size:16px; transition:border-color .15s, box-shadow .15s, transform .15s; }
  .sol:hover{ border-color:transparent; box-shadow:0 16px 34px -18px var(--cshadow); transform:translateY(-3px); }
  .sol .si{ width:42px; height:42px; border-radius:11px; background:var(--cg); color:#fff; display:grid; place-items:center; box-shadow:0 8px 18px -7px var(--cshadow); }
  .sol .si svg{ width:20px; height:20px; }
  /* status pill inside a jump-link tile — keep it on one line and let the name flex */
  .sol .pill{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em;
    padding:4px 9px; border-radius:100px; background:var(--tint-amber); color:var(--amber); font-weight:600;
    white-space:nowrap; flex-shrink:0; }
  a.sol{ min-width:0; }
  @media (max-width:820px){ .sol-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .sol-grid{ grid-template-columns:1fr; } }

  /* COMPLIANCE BAND */
  .band{ color:#fff; border-radius:24px; padding:42px; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; position:relative; overflow:hidden;
    background:radial-gradient(70% 120% at 10% 10%, rgba(46,107,255,.6), transparent 55%),
      radial-gradient(80% 120% at 100% 90%, rgba(122,77,255,.55), transparent 55%),
      linear-gradient(130deg,#0B1B45,#141F5C); }
  .band::after{ content:""; position:absolute; inset:0; opacity:.35; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:44px 44px;
    mask-image:radial-gradient(90% 90% at 80% 20%,#000,transparent 70%); }
  .band > *{ position:relative; z-index:1; }
  .band h2{ color:#fff; font-size:clamp(26px,3.4vw,38px); }
  .band p{ color:rgba(233,240,248,.84); font-size:17px; margin-top:16px; }
  .band .badges{ display:flex; flex-direction:column; gap:14px; }
  .band .bd{ display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:13px; padding:16px 18px; backdrop-filter:blur(4px); }
  .band .bd .bi{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; color:#fff; background:var(--cg); box-shadow:0 8px 18px -7px rgba(0,0,0,.5); }
  .band .bd .bi svg{ width:21px; height:21px; }
  .band .bd .bt{ font-family:var(--disp); font-weight:600; font-size:15px; }
  .band .bd .bs{ font-size:12.5px; color:rgba(233,240,248,.65); }
  @media (max-width:760px){ .band{ grid-template-columns:1fr; padding:36px 28px; } }

  /* TESTIMONIALS */
  .tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
  .tq{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; display:flex; flex-direction:column; overflow:hidden; }
  .tq::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--cg); }
  .tq .stars{ color:var(--gold); letter-spacing:2px; font-size:14px; }
  .tq p{ font-size:15.5px; color:var(--ink); margin-top:14px; flex:1; line-height:1.55; }
  .tq .who{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
  .tq .av{ width:46px; height:46px; border-radius:12px; background:var(--cg); color:#fff; display:grid; place-items:center; font-family:var(--disp); font-weight:600; box-shadow:0 8px 18px -7px var(--cshadow); }
  .tq .who .nm{ font-family:var(--disp); font-weight:600; font-size:14.5px; }
  .tq .who .rl{ font-size:12.5px; color:var(--muted); }
  @media (max-width:820px){ .tgrid{ grid-template-columns:1fr; } }

  /* CLIENTS MARQUEE */
  .clients{ background:linear-gradient(180deg,var(--bg),var(--bg-alt)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
  .clients .rows{ display:flex; flex-direction:column; gap:16px; margin-top:30px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marq{ display:flex; overflow:hidden; }
  .marq .track{ display:flex; gap:16px; width:max-content; flex-shrink:0; animation:marqL 46s linear infinite; }
  .marq.rev .track{ animation:marqR 40s linear infinite; }
  .marq.slow .track{ animation-duration:56s; }
  .marq:hover .track{ animation-play-state:paused; }
  @keyframes marqL{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 8px)); } }
  @keyframes marqR{ from{ transform:translateX(calc(-50% - 8px)); } to{ transform:translateX(0); } }
  .clogo{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 22px; white-space:nowrap; box-shadow:var(--shadow-sm); }
  .clogo .cm{ width:32px; height:32px; border-radius:9px; background:var(--cg,var(--grad-brand)); color:#fff; display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:14px; flex-shrink:0; }
  .clogo .cn{ font-family:var(--disp); font-weight:600; font-size:16px; color:var(--ink-2); letter-spacing:-.01em; }
  @media (prefers-reduced-motion:reduce){ .marq .track{ animation:none !important; } }

  /* CTA */
  .cta{ position:relative; text-align:center; border-radius:24px; padding:48px 40px; overflow:hidden; color:#fff;
    background:radial-gradient(60% 120% at 15% 15%, rgba(46,107,255,.7), transparent 55%),
      radial-gradient(60% 120% at 85% 85%, rgba(122,77,255,.65), transparent 55%),
      linear-gradient(130deg,#12205A,#1A1E5E); }
  .cta::after{ content:""; position:absolute; inset:0; opacity:.3; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(90% 90% at 50% 0%,#000,transparent 72%); }
  .cta > *{ position:relative; z-index:1; }
  .cta h2{ color:#fff; font-size:clamp(28px,3.6vw,44px); }
  .cta p{ color:rgba(233,240,248,.82); font-size:18px; margin-top:14px; max-width:46ch; margin-inline:auto; }
  .cta .hero-cta{ justify-content:center; margin-top:28px; }

  /* FOOTER */
  footer{ color:rgba(233,240,248,.9); padding:44px 0 26px; margin-top:0; position:relative; overflow:hidden;
    background:var(--footer-bg); }
  /* a soft brand wash keeps the footer from reading as a flat navy slab */
  footer::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(60% 100% at 12% 0%, rgba(46,107,255,.20), transparent 60%),
      radial-gradient(50% 100% at 88% 20%, rgba(122,77,255,.16), transparent 62%); }
  footer > *{ position:relative; z-index:1; }
  footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-brand); }
  .foot-grid{ position:relative; display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:40px; }
  .foot-logo-link{ display:inline-block; }
  .foot-logo{ height:36px; width:auto; display:block; }
  .foot-brand .brand{ color:#fff; }
  .foot-brand .brand .mark{ box-shadow:none; }
  .foot-brand .brand em{ background:linear-gradient(120deg,#8FC2FF,#B69BFF); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .foot-brand p{ font-size:14px; margin-top:16px; max-width:30ch; color:rgba(233,240,248,.82); }
  .foot-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,240,248,.72); margin-bottom:15px; }
  .foot-col a{ display:block; color:rgba(233,240,248,.9); font-size:14px; padding:6px 0; }
  .foot-col a:hover{ color:#fff; }
  .crow{ display:flex; align-items:center; gap:11px; font-size:14px; color:rgba(233,240,248,.9); padding:6px 0; }
  .crow svg{ width:16px; height:16px; opacity:.75; flex-shrink:0; }
  .foot-bot{ position:relative; display:flex; justify-content:space-between; align-items:center; margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:rgba(255,255,255,.92); flex-wrap:wrap; gap:12px; }
.foot-reg{ text-align:center; color:#fff; font-size:13.5px; line-height:1.6; margin-top:12px; }
  @media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }

  /* ===== ROUTER ===== */
  .page{ display:none; }
  .page.active{ display:block; animation:pgIn .45s ease; }
  @keyframes pgIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

  /* PAGE HERO */
  .page-hero{ position:relative; overflow:hidden; color:#fff; padding:48px 0 44px;
    background:radial-gradient(62% 120% at 8% 0%, rgba(46,107,255,.55), transparent 55%),
      radial-gradient(60% 120% at 94% 30%, rgba(122,77,255,.5), transparent 55%),
      radial-gradient(50% 120% at 60% 100%, rgba(15,169,204,.4), transparent 60%),
      linear-gradient(130deg,#0B1B45,#141F5C); }
  .page-hero::before{ content:""; position:absolute; inset:0; opacity:.4; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:52px 52px; mask-image:radial-gradient(120% 90% at 30% 0%,#000,transparent 72%); }
  .ph-in{ position:relative; z-index:1; text-align:center; max-width:760px; margin:0 auto; }
  .ph-crumb{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,240,248,.55); }
  .ph-crumb b{ color:#8FC2FF; font-weight:600; }
  .page-hero h1{ font-size:clamp(34px,4.6vw,54px); margin-top:16px; color:#fff; letter-spacing:-.03em; }
  .page-hero h1 .u{ background:linear-gradient(100deg,#8FC2FF,#B69BFF,#7FE3EC); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .page-hero p{ font-size:19px; color:rgba(233,240,248,.82); margin-top:18px; }

  /* FEATURE ROWS */
  .frow{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:48px 0; border-bottom:1px solid var(--line); }
  .frow:last-of-type{ border-bottom:none; }
  .frow.rev .ftext{ order:2; }
  .ftext h2{ font-size:clamp(25px,2.9vw,34px); margin-top:14px; }
  .ftext > p{ color:var(--ink-2); font-size:16.5px; margin-top:14px; }
  .fbul{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:13px; }
  .fbul li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink); }
  .fbul li .ck{ width:23px; height:23px; border-radius:7px; background:var(--cg); color:#fff; display:grid; place-items:center; flex-shrink:0; margin-top:1px; box-shadow:0 6px 12px -5px var(--cshadow); }
  .fbul li .ck svg{ width:13px; height:13px; }
  .fvisual{ position:relative; border-radius:20px; padding:30px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);
    background:linear-gradient(160deg, color-mix(in srgb, var(--cvar) 10%, var(--surface)), var(--surface)); }
  .fvisual::after{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-70px; top:-80px; background:var(--cg); opacity:.12; }
  .fv-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; }
  .fv-top{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
  .fv-top .ic{ width:38px; height:38px; border-radius:10px; background:var(--cg); color:#fff; display:grid; place-items:center; box-shadow:0 8px 16px -6px var(--cshadow); }
  .fv-top .ic svg{ width:19px; height:19px; }
  .fv-top .tt{ font-family:var(--disp); font-weight:620; font-size:14.5px; }
  .fv-top .ss{ font-size:11.5px; color:var(--muted); }
  .fv-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-2); }
  .fv-row:last-child{ border-bottom:none; }
  .fv-row .mono{ font-family:var(--mono); font-weight:600; color:var(--ink); }
  .fv-row .pill{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:4px 9px; border-radius:100px; background:var(--tint-emerald); color:var(--emerald); font-weight:600; }
  @media (max-width:840px){ .frow{ grid-template-columns:1fr; gap:30px; padding:48px 0; } .frow.rev .ftext{ order:0; } }

  /* PRICING — per-seat plan cards */
  .plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
  .plan{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
    border-radius:20px; padding:32px 28px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s, border-color .18s; }
  .plan::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:20px 20px 0 0; background:var(--cg); }
  .plan:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -20px var(--cshadow); border-color:transparent; }
  .plan.best{ border-color:transparent; box-shadow:0 22px 50px -22px var(--cshadow); }
  .plan .best-tag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:10px;
    letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--grad-brand); padding:4px 11px; border-radius:100px; white-space:nowrap; }
  .plan h3{ font-family:var(--disp); font-size:19px; }
  .plan .plan-sub{ color:var(--ink-2); font-size:14px; margin-top:6px; min-height:40px; }
  .plan .plan-price{ display:flex; align-items:flex-end; gap:8px; margin-top:18px; }
  .plan .plan-price .v{ font-family:var(--disp); font-weight:800; font-size:40px; line-height:1; color:var(--ink); }
  .plan .plan-price .per{ color:var(--muted); font-size:13px; padding-bottom:4px; }
  .plan .plan-cta{ margin-top:22px; width:100%; justify-content:center; }
  .plan ul{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:12px; }
  .plan ul li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
  .plan ul li .ck{ width:21px; height:21px; border-radius:50%; background:var(--cg); color:#fff; display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
  .plan ul li .ck svg{ width:12px; height:12px; }
  .plan-note{ text-align:center; color:var(--muted); font-size:13.5px; margin-top:26px; }
  @media (max-width:900px){ .plan-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
  .pwork{ background:linear-gradient(155deg,var(--navy),var(--navy-2)); border-radius:20px; padding:30px; color:#fff; position:relative; overflow:hidden; }
  .pwork::after{ content:""; position:absolute; inset:0; background:var(--grad-brand); opacity:.16; pointer-events:none; }
  .pwork > *{ position:relative; z-index:1; }
  .pwork h3{ color:#fff; font-size:20px; }
  .pwork ul{ list-style:none; padding:0; margin:20px 0; display:flex; flex-direction:column; gap:15px; }
  .pwork li{ display:flex; gap:12px; font-size:14.5px; color:rgba(233,240,248,.95); }
  .pwork li b{ color:#fff; }
  .pwork li .ci{ width:26px; height:26px; border-radius:8px; background:rgba(43,196,141,.22); color:#8FE0C0; display:grid; place-items:center; flex-shrink:0; }
  .pwork li .ci svg{ width:14px; height:14px; }
  .pwork-wide{ margin-top:22px; }
  .pwork-wide h3{ margin-bottom:18px; }
  .pwork-wide .pwork-inner{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
  .pwork-wide .pwork-inner ul{ flex:1; min-width:280px; display:grid; grid-template-columns:1fr; gap:14px; margin:0; }
  .pwork-wide .pwork-inner .btn{ flex-shrink:0; }
  @media (max-width:760px){ .pwork-wide .pwork-inner{ flex-direction:column; align-items:stretch; } .pwork-wide .pwork-inner ul{ grid-template-columns:1fr; } }

  /* FAQ */
  .faq-list{ max-width:800px; margin:30px auto 0; display:flex; flex-direction:column; gap:12px; }
  .faq{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .faq summary{ list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--disp); font-weight:600; font-size:16.5px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary .pl{ width:26px; height:26px; border-radius:8px; background:var(--tint-blue); color:var(--blue); display:grid; place-items:center; flex-shrink:0; transition:transform .2s; }
  .faq[open] summary .pl{ transform:rotate(45deg); }
  .faq summary .pl svg{ width:14px; height:14px; }
  .faq .a{ padding:0 24px 20px; color:var(--ink-2); font-size:15px; }

  /* BLOG */
  .blog-featured{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:28px; }
  .bf-img{ background:linear-gradient(140deg,var(--blue),var(--violet)); min-height:300px; position:relative; overflow:hidden; }
  .bf-img::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:34px 34px; opacity:.5; }
  .bf-img .ic{ position:absolute; inset:0; margin:auto; width:76px; height:76px; color:rgba(255,255,255,.9); }
  .bf-body{ padding:38px; display:flex; flex-direction:column; justify-content:center; }
  .cat{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--blue); background:var(--tint-blue); padding:5px 11px; border-radius:100px; align-self:flex-start; }
  .bf-body h2{ font-size:clamp(24px,2.6vw,32px); margin-top:16px; }
  .bf-body p{ color:var(--ink-2); font-size:15.5px; margin-top:14px; }
  .bmeta{ display:flex; align-items:center; gap:10px; margin-top:20px; font-size:13px; color:var(--muted); }
  .bmeta .av{ width:30px; height:30px; border-radius:50%; background:var(--grad-brand); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:600; font-family:var(--disp); }
  .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .bcard{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column; }
  .bcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
  .bcard .thumb{ height:150px; position:relative; overflow:hidden; }
  .bcard .thumb::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:26px 26px; opacity:.6; }
  .bcard .bcbody{ padding:22px; display:flex; flex-direction:column; flex:1; }
  .bcard h3{ font-size:17.5px; margin-top:12px; }
  .bcard p{ color:var(--ink-2); font-size:14px; margin-top:9px; flex:1; }
  .bcard .bmeta{ margin-top:16px; }
  @media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } .blog-featured{ grid-template-columns:1fr; } }
  @media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; } }
  .pager{ display:flex; gap:8px; justify-content:center; margin-top:44px; }
  .pager a{ min-width:42px; height:42px; padding:0 12px; border-radius:11px; border:1px solid var(--line-2); display:grid; place-items:center; font-family:var(--disp); font-weight:600; font-size:14.5px; color:var(--ink-2); }
  .pager a.on{ background:var(--grad-brand); color:#fff; border-color:transparent; }
  .pager a:hover:not(.on){ border-color:var(--blue); color:var(--blue); }

  /* ABOUT */
  .about-story{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
  .about-story p{ color:var(--ink-2); font-size:16.5px; margin-top:16px; }
  .story-visual{ border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:linear-gradient(150deg,var(--tint-blue),var(--tint-violet)); min-height:340px; display:grid; place-items:center; position:relative; }
  .story-visual .badge{ background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:26px 30px; text-align:center; }
  .story-visual .badge .m{ width:60px; height:60px; border-radius:16px; background:var(--grad-brand); display:grid; place-items:center; margin:0 auto 14px; box-shadow:0 12px 24px -8px rgba(46,107,255,.6); }
  .story-visual .badge .m svg{ width:30px; height:30px; }
  .story-visual .badge .bt{ font-family:var(--disp); font-weight:700; font-size:19px; }
  .story-visual .badge .bs{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-top:4px; }
  .values{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
  .vcard{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; overflow:hidden; }
  .vcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--cg); }
  .vcard .vi{ width:50px; height:50px; border-radius:13px; background:var(--cg); color:#fff; display:grid; place-items:center; box-shadow:0 10px 20px -8px var(--cshadow); margin-bottom:16px; }
  .vcard .vi svg{ width:24px; height:24px; }
  .vcard h3{ font-size:18.5px; }
  .vcard p{ color:var(--ink-2); font-size:14.5px; margin-top:8px; }
  @media (max-width:840px){ .about-story{ grid-template-columns:1fr; gap:36px; } .values{ grid-template-columns:1fr; } }

  /* CONTACT */
  .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; }
  .cform{ background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:34px; }
  .cform h3{ font-size:22px; }
  .cform .sub{ color:var(--ink-2); font-size:14.5px; margin-top:8px; margin-bottom:22px; }
  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:13.5px; font-weight:560; color:var(--ink-2); margin-bottom:7px; }
  .field input, .field textarea{ width:100%; border:1px solid var(--line-2); border-radius:11px; padding:13px 14px; font-family:var(--body); font-size:15px; color:var(--ink); background:var(--bg); outline:none; transition:border-color .15s, box-shadow .15s; }
  .field input:focus, .field textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--tint-blue); }
  .field.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
  .field.two .field{ margin:0; }
  .cinfo{ display:flex; flex-direction:column; gap:16px; }
  .cinfo-card{ display:flex; gap:15px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; }
  .cinfo-card .ci{ width:46px; height:46px; border-radius:12px; background:var(--cg); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 10px 20px -8px var(--cshadow); }
  .cinfo-card .ci svg{ width:22px; height:22px; }
  .cinfo-card .cl{ font-size:12.5px; color:var(--muted); }
  .cinfo-card .cv{ font-family:var(--disp); font-weight:600; font-size:15.5px; margin-top:3px; }
  .form-ok{ display:none; background:var(--tint-emerald); border:1px solid color-mix(in srgb,var(--emerald) 30%,transparent); color:var(--emerald-d,var(--emerald)); border-radius:12px; padding:14px 16px; font-size:14.5px; font-weight:560; margin-bottom:18px; }
  .form-ok.show{ display:flex; gap:10px; align-items:center; }
  @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:30px; } }

  /* SEO FAQ */
  .faq-seo{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin-top:28px; border-bottom:1px solid var(--line); }
  .fq{ border-top:1px solid var(--line); }
  .fq summary{ list-style:none; cursor:pointer; padding:12px 2px; font-family:var(--disp); font-weight:600; font-size:14.5px; line-height:1.35; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .fq summary::-webkit-details-marker{ display:none; }
  .fq summary .pm{ width:21px; height:21px; border-radius:6px; background:var(--tint-blue); color:var(--blue); display:grid; place-items:center; flex-shrink:0; transition:transform .2s; }
  .fq[open] summary .pm{ transform:rotate(45deg); }
  .fq summary .pm svg{ width:12px; height:12px; }
  .fq .a{ padding:0 2px 13px; font-size:13.5px; color:var(--ink-2); line-height:1.5; }
  @media (max-width:760px){ .faq-seo{ grid-template-columns:1fr; gap:0; } }

  /* footer social */
  .foot-social{ display:flex; gap:10px; margin-top:16px; }
  .foot-social a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:rgba(233,240,248,.82); transition:background .15s, color .15s, transform .15s, border-color .15s; }
  .foot-social a:hover{ background:var(--grad-brand); color:#fff; transform:translateY(-2px); border-color:transparent; }
  .foot-social a svg{ width:18px; height:18px; }
  @keyframes waPulse{ 70%{ box-shadow:0 0 0 14px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } }

  .util-social{ display:flex; align-items:center; gap:16px; }
  .util-social a{ color:rgba(255,255,255,.92); display:inline-flex; align-items:center; transition:color .15s, transform .15s; }
  .util-social a:hover{ color:#fff; transform:translateY(-1px); }
  .util-social a svg{ width:17px; height:17px; }
  .foot-bot a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
  .foot-bot a:hover{ color:#fff; }

  /* LEGAL / PRIVACY */
  .legal{ max-width:820px; margin:0 auto; }
  .legal .updated{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--blue); background:var(--tint-blue); padding:7px 13px; border-radius:100px; margin-bottom:26px; }
  .legal .lead{ font-size:17px; color:var(--ink-2); margin-bottom:8px; }
  .legal h2{ font-size:20px; margin:32px 0 12px; scroll-margin-top:90px; }
  .legal h2 .n{ color:var(--blue); font-family:var(--mono); font-size:14px; margin-right:8px; }
  .legal p{ color:var(--ink-2); margin-bottom:14px; font-size:15.5px; line-height:1.7; }
  .legal strong{ color:var(--ink); font-weight:600; }
  .legal a{ color:var(--blue); }
  .legal ul{ color:var(--ink-2); margin:0 0 16px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
  .legal ul li{ position:relative; padding-left:24px; line-height:1.6; font-size:15.5px; }
  .legal ul li::before{ content:""; position:absolute; left:4px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--grad-brand); }
  .legal .note{ border-left:4px solid var(--blue); background:var(--tint-blue); border-radius:0 12px 12px 0; padding:16px 18px; font-size:14.5px; color:var(--ink-2); margin:22px 0; }

  :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:5px; }
  @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto; } }
/* Blog grid: CTA card that fills the trailing empty cell(s) so the grid never looks unfinished */
.bcard-cta{ display:grid; place-items:center; text-align:center; padding:26px; text-decoration:none; border:none;
  background:linear-gradient(135deg,var(--blue),var(--violet)); color:#fff; }
.bcard-cta b{ font-family:var(--disp); font-size:18px; display:block; margin-bottom:7px; }
.bcard-cta span{ font-size:14px; line-height:1.55; }
@media (max-width:900px){ .bcard-cta{ grid-column:1 / -1 !important; } }

/* ============================================================================
   MOBILE PASS — phones (≤560px)
   Layout collapse, WCAG 2.5.8 tap targets (44px), and safe-area handling for
   notched devices. Kept in one block so the mobile rules are auditable together.
   ========================================================================== */
@media (max-width:560px){

  /* --- layout: the last two grids that still had multiple columns at 375px --- */
  .foot-grid{ grid-template-columns:1fr; gap:30px; }   /* was 1fr 1fr — overflowed and clipped */
  .field.two{ grid-template-columns:1fr; gap:0; }      /* phone + company stacked */
  .field.two .field{ margin-bottom:16px; }

  /* tighter gutters buy ~16px of line length on a 375px screen.
     padding-inline, not the shorthand — the shorthand wiped .hero-in's vertical padding
     and the hero text ran under the highlights band. */
  .wrap{ padding-inline:20px; }

  /* --- tap targets: WCAG 2.5.8 asks for 44x44 --- */
  .hamburger{ width:44px; height:44px; }
  .nav-actions .btn-primary{ min-height:44px; padding:11px 16px; }
  .util-social a,
  .foot-social a{ width:44px; height:44px; }
  .foot-col a{ padding:11px 0; }                        /* 14px text -> 44px row */
  .feat .more,
  .more{ min-height:44px; align-items:center; }
  .faq summary{ min-height:52px; }
  .fq summary{ min-height:52px; }
  .btn{ min-height:44px; }
  .sol{ min-height:56px; }
  .pager a{ min-width:44px; height:44px; }
  .tf{ min-height:44px; }
  .tool-grid{ grid-template-columns:1fr; }
  .soon-in{ flex-direction:column; align-items:flex-start; }
  .ld-con a{ display:flex; align-items:center; min-height:44px; }
  .ld-policy a{ display:inline-block; padding:15px 0; }
  /* the hero pair is redundant on a phone — the same CTAs sit in the header and further down */
  .slider .hero-cta{ display:none; }
  .ph-crumb a{ display:inline-block; padding:15px 5px; }   /* breadcrumbs are navigation; 5px gets short words to 44 wide */
  nav[aria-label] a{ min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center; }

  /* wordmarks are links to home — give them a real hit area */
  .brand{ min-height:44px; }
  .foot-logo-link{ display:inline-flex; align-items:center; min-height:44px; }

  /* footer legal row: separate links on their own line, not inline prose */
  .foot-bot a{ display:inline-block; padding:12px 0; }
  .foot-legal{ display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; }

  /* --- typography: keep long-form readable rather than shrinking it --- */
  .legal h2{ font-size:19px; }
  .article-body{ font-size:16.5px; }

  /* --- footer bottom row reads better stacked than justified --- */
  .foot-bot{ flex-direction:column; align-items:flex-start; gap:10px; }

  /* iOS auto-zooms a focused field whose font-size is below 16px */
  .field input, .field textarea, .field select,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="password"], textarea, select{ font-size:16px; }
  .field input, .field textarea{ min-height:48px; }
  .cform{ padding:24px 20px; }

  /* --- fixed furniture: respect the home indicator / notch --- */
}

/* Clear the iOS home indicator at the foot of the page. */
footer{ padding-bottom:calc(24px + env(safe-area-inset-bottom)); }

/* Landscape phones: the hero does not need full-height padding. */
@media (max-height:520px) and (orientation:landscape){
  .hero-in{ padding-block:28px 32px; }
  .slider{ min-height:0; }
}