/* Poppins, self-hosted. SIL Open Font Licence; the licence travels with the
     font at /static/fonts/OFL.txt. Served from our own origin rather than a
     font CDN so the Content-Security-Policy stays at 'self' with no external
     origins -- a security vendor's site should not fetch resources from a
     third party.

     Latin subsets only, three weights, 23 KB in total. font-display:swap, so
     text renders immediately in the fallback and reflows when the font
     arrives: a visitor never waits on invisible text. */
  @font-face {
    font-family:"Poppins"; font-style:normal; font-weight:500;
    font-display:swap;
    src:url("/static/fonts/poppins-500.woff2") format("woff2");
  }
  @font-face {
    font-family:"Poppins"; font-style:normal; font-weight:600;
    font-display:swap;
    src:url("/static/fonts/poppins-600.woff2") format("woff2");
  }
  @font-face {
    font-family:"Poppins"; font-style:normal; font-weight:700;
    font-display:swap;
    src:url("/static/fonts/poppins-700.woff2") format("woff2");
  }
  /* Design system: ported from SecureXcel_Redesign_Prototype. Dark navy
     ground, teal-to-blue accent, boxed gradient cards, metric tiles, a
     five-step flow and a tinted call-to-action band. Token names are kept
     from the previous light theme so every component that already read
     var(--ink), var(--line) and the rest follows the palette without edits. */
  :root {
    --bg:#07111f; --bg2:#0b1728; --panel:#0b1a2d; --card:#0f2035;
    --ink:#f4f8fb; --body:#c7d5e3; --muted:#9fb1c6; --faint:#71869d;
    --line:#1f3853; --line-soft:#162b43; --line-hi:#31506d;
    --accent:#36d6d0; --accent2:#4aa7ff; --accent-dark:#2bb8b3;
    --accent-soft:rgba(54,214,208,.10); --on-accent:#05111d;
    --grad:linear-gradient(135deg,#36d6d0,#4aa7ff);
    --ok:#6fe3a3; --okbg:rgba(111,227,163,.09); --okline:rgba(111,227,163,.30);
    --warn:#ffc46b; --warnbg:rgba(255,196,107,.09); --warnline:rgba(255,196,107,.30);
    --err:#ff9a90; --errbg:rgba(255,138,128,.09); --errline:rgba(255,138,128,.32);
    --radius:16px;
    /* Poppins for display only. Body copy stays on the system UI font: this
       site carries long explanatory paragraphs, and a geometric face is
       harder to read at length than the font the reader's OS is tuned for.
       Self-hosted: no CDN request, nothing for the CSP to allow. */
    --display:"Poppins","Avenir Next","Segoe UI Variable Display","Segoe UI",
              system-ui,-apple-system,"Helvetica Neue",sans-serif;
    --t-hero:clamp(40px,6.6vw,74px);
    --t-title:clamp(28px,3.6vw,40px);
    --t-card:clamp(18px,1.5vw,21px);
    --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.28);
    --shadow-lift:0 2px 4px rgba(0,0,0,.30), 0 18px 48px rgba(0,0,0,.42);
    color-scheme:dark;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body {
    margin:0; color:var(--body);
    background:linear-gradient(180deg,var(--bg),#081421 70%,#06101b) fixed;
    font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  a { color:var(--accent); }
  ::selection { background:rgba(54,214,208,.30); color:#fff; }
  h1,h2,h3,h4 { color:var(--ink); }
  h1, h3.title, .card h4, .svc .item h4, .cta-band h4 {
    font-family:var(--display); font-weight:700; letter-spacing:-.03em; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
  .narrow { max-width:760px; }
  svg.mark { width:1em; height:1.08em; display:block; }

  /* ---------------------------------------------------------- navigation */
  nav.site { border-bottom:1px solid rgba(255,255,255,.07);
             background:rgba(7,17,31,.88);
             backdrop-filter:saturate(1.6) blur(14px);
             -webkit-backdrop-filter:saturate(1.6) blur(14px);
             position:sticky; top:0; z-index:40; }
  nav.site .inner { display:flex; align-items:center; height:72px; }
  nav.site .logo { display:flex; align-items:center; gap:9px; font-weight:800;
                   font-size:21px; letter-spacing:-.02em; color:var(--ink);
                   text-decoration:none; white-space:nowrap; }
  nav.site .logo svg.mark { color:var(--accent); font-size:23px; }
  nav.site .logo .word { display:inline-block; }
  nav.site .logo i { font-style:normal; color:var(--accent); }
  footer.site .brand .word { display:inline-block; }
  footer.site .brand i { font-style:normal; color:var(--accent); }
  nav.site .links { display:flex; gap:4px; align-items:center; margin-left:30px; }
  nav.site .links > a, nav.site .dd-t {
      color:#c6d4e2; text-decoration:none; font-size:14.5px; font-weight:500;
      white-space:nowrap; padding:8px 11px; border-radius:8px;
      display:inline-flex; align-items:center; gap:6px; }
  nav.site .links > a:hover, nav.site .dd:hover .dd-t,
  nav.site .dd:focus-within .dd-t { color:#fff; background:rgba(255,255,255,.06); }
  nav.site .dd-t svg { width:9px; height:6px; opacity:.65; }

  /* Dropdowns. The panel sits flush under the trigger with no gap -- a gap
     would drop :hover on the way down and close the menu under the pointer. */
  nav.site .dd { position:relative; }
  nav.site .dd-p { display:none; position:absolute; top:100%; left:0; z-index:50;
      min-width:290px; padding:10px; background:#0b1a2d;
      border:1px solid var(--line-hi); border-radius:14px;
      box-shadow:0 22px 56px rgba(0,0,0,.55); }
  nav.site .dd:hover .dd-p, nav.site .dd:focus-within .dd-p { display:block; }
  nav.site .dd-p a { display:block; padding:9px 12px; border-radius:8px;
      color:var(--ink); text-decoration:none; font-size:14.5px; white-space:nowrap; }
  nav.site .dd-p a:hover { background:rgba(54,214,208,.09); color:var(--accent); }
  nav.site .dd-p a.tool strong { display:block; font-weight:600; }
  nav.site .dd-p a.tool span { display:block; font-size:12.5px; color:var(--faint);
      white-space:normal; margin-top:1px; }
  nav.site .dd.wide .dd-p { display:none; grid-template-columns:repeat(2,minmax(190px,1fr));
      gap:2px 14px; min-width:470px; padding:16px; }
  nav.site .dd.wide:hover .dd-p, nav.site .dd.wide:focus-within .dd-p { display:grid; }
  nav.site .dd-p .col h5 { margin:6px 12px 4px; font-size:11.5px; font-weight:700;
      text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
  nav.site .dd-p a.all { grid-column:1 / -1; margin-top:6px; padding-top:12px;
      border-top:1px solid var(--line); border-radius:0; color:var(--accent);
      font-weight:600; }
  nav.site .menu .panel .grp { margin:14px 12px 4px; font-size:11.5px;
      font-weight:700; text-transform:uppercase; letter-spacing:.1em;
      color:var(--accent); }
  nav.site .menu .panel .grp:first-child { margin-top:6px; }
  nav.site a.cta { background:var(--grad); color:var(--on-accent); padding:11px 18px;
                   border-radius:10px; font-weight:700; text-decoration:none;
                   font-size:14px; white-space:nowrap; margin-left:auto; }
  nav.site a.cta:hover { filter:brightness(1.08); color:var(--on-accent); }
  nav.site a.cta .brief { display:none; }

  nav.site .menu { display:none; position:relative; margin-left:12px; }
  nav.site .menu summary { list-style:none; cursor:pointer; width:42px; height:42px;
      border-radius:10px; border:1px solid var(--line); display:flex;
      flex-direction:column; align-items:center; justify-content:center; gap:4px;
      background:#0c1b2d; }
  nav.site .menu summary::-webkit-details-marker { display:none; }
  nav.site .menu summary span { display:block; width:17px; height:2px;
                                background:var(--ink); border-radius:2px; }
  nav.site .menu[open] summary { border-color:var(--accent); }
  nav.site .menu .panel { position:absolute; right:0; top:50px;
      min-width:min(230px, calc(100vw - 40px));
      max-width:calc(100vw - 40px);
      background:#0b1a2d; border:1px solid var(--line-hi); border-radius:14px;
      padding:8px; box-shadow:var(--shadow-lift); z-index:50;
      max-height:calc(100vh - 96px); overflow-y:auto; overscroll-behavior:contain; }
  nav.site .menu .panel a { display:flex; align-items:center; min-height:44px;
      padding:10px 12px; color:var(--ink);
      text-decoration:none; font-size:15px; border-radius:8px; }
  nav.site .menu .panel a:hover { background:rgba(54,214,208,.09); }

  /* ---------------------------------------------------------------- hero */
  .hero { padding:96px 0 76px; position:relative; overflow:hidden; color:var(--body); }
  .hero::before { content:""; position:absolute; inset:-24% -18% auto auto;
      width:700px; height:700px; pointer-events:none;
      background:radial-gradient(circle,rgba(54,214,208,.17),transparent 62%); }
  .hero::after { content:""; position:absolute; inset:auto auto -30% -14%;
      width:560px; height:560px; pointer-events:none;
      background:radial-gradient(circle,rgba(74,167,255,.10),transparent 64%); }
  .hero .wrap { position:relative; z-index:2; }
  .hero .eyebrow, .eyebrow { font-size:13px; letter-spacing:.16em;
      text-transform:uppercase; color:var(--accent); font-weight:800;
      display:flex; align-items:center; gap:10px; }
  .hero .eyebrow svg.mark { font-size:15px; }
  .hero h1 { font-size:var(--t-hero); line-height:1.02; letter-spacing:-.045em;
             margin:16px 0 22px; max-width:15ch; color:var(--ink); }
  .hero p.lede { font-size:clamp(17px,1.7vw,20px); line-height:1.62; color:var(--muted);
                 max-width:62ch; margin:0 0 32px; }
  .hero .actions, .actions { display:flex; gap:12px; flex-wrap:wrap; }

  /* The four headline numbers under the hero. Every figure is a fact about
     the product that can be checked, not a marketing superlative. */
  .metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
             margin-top:56px; }
  .metric { padding:22px; border:1px solid var(--line); border-radius:16px;
            background:rgba(15,32,53,.62); }
  .metric strong { display:block; font-family:var(--display); font-size:32px;
                   line-height:1.15; letter-spacing:-.03em; color:var(--ink); }
  .metric span { display:block; font-size:13px; color:var(--muted); margin-top:4px; }

  /* --------------------------------------------------------------- bands */
  .standards { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
               background:#091728; padding:18px 0; }
  .standards .inner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .standards .label { font-size:11.5px; text-transform:uppercase;
      letter-spacing:.1em; color:var(--faint); font-weight:700; margin-right:6px; }
  .standards .chip { font-size:12.5px; color:#b9d6f0; background:rgba(15,32,53,.7);
      border:1px solid #31506d; border-radius:999px; padding:5px 12px;
      white-space:nowrap; }

  .facts { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0; }
  .facts div { background:rgba(15,32,53,.62); border:1px solid var(--line);
               border-radius:16px; padding:22px; }
  .facts .n { display:block; font-family:var(--display); font-size:30px;
              font-weight:700; letter-spacing:-.03em; color:var(--ink);
              line-height:1.15; }
  .facts .l { display:block; font-size:13.5px; color:var(--muted); margin-top:6px; }

  /* ------------------------------------------------------------ sections */
  section { padding:84px 0; }
  /* A form-led page carries little content, so the generous section rhythm
     that suits the homepage leaves it looking empty. */
  section.lean { padding:46px 0 64px; }
  section.alt, section.block, .band {
      background:#091728; border-block:1px solid var(--line); }
  section.tight { padding:56px 0; }
  h2.section { font-family:var(--display); font-size:12.5px;
               text-transform:uppercase; letter-spacing:.16em;
               color:var(--accent); margin:0 0 12px; font-weight:800; }
  h3.title { font-size:var(--t-title); letter-spacing:-.03em; margin:0 0 16px;
             line-height:1.1; max-width:24ch; }
  p.sub { color:var(--muted); max-width:64ch; margin:0 0 36px; font-size:17.5px;
          line-height:1.7; }
  .section-head { display:flex; align-items:flex-end; justify-content:space-between;
                  gap:26px; margin-bottom:32px; }
  .section-head h3.title { margin:0; max-width:20ch; }
  .section-head p.sub { margin:0; max-width:520px; }

  /* --------------------------------------------------------------- cards */
  .grid { display:grid; gap:18px;
          grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
  .card { background:linear-gradient(180deg,rgba(15,32,53,.96),rgba(10,24,41,.96));
          border:1px solid var(--line); border-radius:18px; padding:26px;
          display:flex; flex-direction:column; text-decoration:none;
          transition:border-color .18s, transform .18s, box-shadow .18s; }
  a.card:hover, .card:hover { border-color:var(--line-hi); transform:translateY(-2px);
          box-shadow:var(--shadow); }
  .card .icon { font-size:28px; line-height:1; color:var(--accent); margin:0 0 14px; }
  .card h3 { margin:2px 0 10px; font-size:22px; font-family:var(--display);
             letter-spacing:-.02em; }
  .card h4 { margin:0 0 10px; font-size:var(--t-card); letter-spacing:-.015em;
             line-height:1.3; text-wrap:balance; }
  .card h4 a { color:var(--ink); text-decoration:none; }
  .card:hover h4 a { color:var(--accent); }
  .card p { margin:0 0 16px; color:var(--muted); font-size:15px; flex:1; }
  .card .kicker, .kicker { color:var(--accent); font-weight:800; font-size:14px; }
  .card-foot { display:flex; align-items:center; justify-content:space-between;
               gap:12px; padding-top:4px; }
  .card .more { font-size:14px; font-weight:700; text-decoration:none;
                white-space:nowrap; color:var(--accent); }
  .card .more:hover { text-decoration:underline; }
  .card .ico { display:block; color:var(--accent); font-family:var(--display);
               font-size:12px; letter-spacing:.14em; text-transform:uppercase;
               font-weight:800; margin:0 0 12px; }
  .card .shot { display:block; width:100%; height:auto; aspect-ratio:16/9;
                object-fit:cover; border-radius:12px; margin:0 0 16px;
                background:var(--panel); }
  .tag { display:inline-block; padding:4px 10px; border:1px solid #31506d;
         border-radius:999px; font-size:12px; color:#b9d6f0; margin:0 0 12px;
         align-self:flex-start; }
  .pill { display:inline-block; background:var(--okbg); color:var(--ok);
          border:1px solid var(--okline); border-radius:999px; padding:4px 11px;
          font-size:11.5px; font-weight:700; white-space:nowrap; }

  /* The five-step flow. Boxed steps in a row, a number in the accent colour:
     the prototype's way of showing a process without a diagram. */
  .flow { display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
          align-items:stretch; }
  .flow .step { min-height:124px; display:flex; flex-direction:column;
                justify-content:center; padding:20px;
                background:linear-gradient(180deg,rgba(15,32,53,.96),rgba(10,24,41,.96));
                border:1px solid var(--line); border-radius:16px; }
  .step b { font-size:14px; color:var(--accent); font-family:var(--display); }
  .step strong { color:var(--ink); margin:4px 0 2px; }
  .step span { color:var(--muted); font-size:13px; line-height:1.5; }

  /* Single-subject call to action. The posture review is the engagement most
     visitors are looking for, so it gets a band to itself. */
  .cta-band { border:1px solid var(--line-hi); border-radius:22px;
              background:linear-gradient(135deg,rgba(54,214,208,.13),rgba(83,123,255,.14));
              padding:38px 40px; margin:48px 0 0; display:flex; gap:30px;
              align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .cta-band .copy { flex:1 1 420px; }
  .cta-band h4 { font-family:var(--display); color:var(--ink);
                 font-size:clamp(24px,2.8vw,34px); margin:0 0 8px;
                 letter-spacing:-.03em; line-height:1.15; }
  .cta-band p { margin:0; color:var(--muted); font-size:16px; line-height:1.65;
                max-width:62ch; }

  .person { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap;
            margin:0 0 12px; }
  .person .who { flex:1 1 320px; }
  .person .who .dpo { color:var(--muted); font-size:14px; margin:0 0 14px; }
  .person .who .dpo a { color:var(--accent); }
  .person .who h4 { font-family:var(--display); font-size:var(--t-card);
                    margin:0 0 4px; letter-spacing:-.015em; }
  .person .who .role { color:var(--accent); font-size:14px; font-weight:700;
                       margin:0 0 12px; }

  /* Indeterminate progress. The bar sweeps rather than filling, because we do
     not know how long the work will take and a bar that reaches 90% and stops
     is worse than one that never claims to measure anything. */
  .progress { margin:22px 0 0; padding:16px 18px 15px; border-radius:12px;
              background:rgba(54,214,208,.08);
              border:1px solid rgba(54,214,208,.28); }
  .progress .head { display:flex; justify-content:space-between; align-items:baseline;
                    gap:12px; margin:0 0 10px; font-size:14px; font-weight:700;
                    color:var(--accent); }
  .progress .clock { font-variant-numeric:tabular-nums; font-weight:700; }
  .progress .track { height:8px; border-radius:999px; background:rgba(255,255,255,.08);
                     overflow:hidden; position:relative; }
  .progress .track span { position:absolute; inset:0 auto 0 0; width:38%;
                          border-radius:999px; background:var(--grad);
                          animation:sweep 1.25s ease-in-out infinite; }
  .progress p { margin:11px 0 0; font-size:13.5px; color:var(--muted); line-height:1.55; }
  @keyframes sweep {
    0%   { left:-38%; }
    100% { left:100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .progress .track span { animation:none; left:0; width:100%; opacity:.45; }
    a.card:hover, .card:hover { transform:none; }
  }

  /* Grouped service index: four short lists under headings. */
  .svcgrid { display:grid; gap:18px; margin:0 0 8px;
             grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); }
  .svcgrid .group { background:rgba(15,32,53,.55); border:1px solid var(--line);
                    border-radius:16px; padding:22px 22px 14px; }
  .svcgrid h4 { font-family:var(--display); font-size:12.5px; font-weight:800;
                text-transform:uppercase; letter-spacing:.14em;
                color:var(--accent); margin:0 0 14px; }
  .svcgrid ul { list-style:none; margin:0; padding:0; }
  .svcgrid li { margin:0 0 11px; }
  .svcgrid a { color:var(--ink); text-decoration:none; font-size:15.5px; }
  .svcgrid a:hover { color:var(--accent); }

  /* Saved reports. A table, because the columns are being compared. */
  .reports { width:100%; border-collapse:collapse; font-size:14.5px; }
  .reports th { text-align:left; font-family:var(--display); font-size:12px;
                text-transform:uppercase; letter-spacing:.1em;
                color:var(--faint); padding:0 12px 10px 0;
                border-bottom:1px solid var(--line); font-weight:700; }
  .reports td { padding:14px 12px 14px 0; border-bottom:1px solid var(--line);
                vertical-align:top; }
  .reports td a { color:var(--ink); text-decoration:none; }
  .reports td a:hover { color:var(--accent); }
  .reports .kindtag { display:inline-block; margin-left:8px; font-size:11px;
                      text-transform:uppercase; letter-spacing:.08em;
                      color:var(--faint); border:1px solid var(--line);
                      border-radius:999px; padding:1px 8px; }
  .reports .acts { white-space:nowrap; }
  .reports .acts a, .reports .linkish { font-size:13px; color:var(--muted);
                                        margin-right:10px; }
  .reports form.inline { display:inline; }
  .reports .linkish { background:none; border:0; padding:0; cursor:pointer;
                      font:inherit; font-size:13px; text-decoration:underline; }
  .reports .linkish:hover { color:var(--err); }
  @media (max-width:600px) {
    .reports th:nth-child(3), .reports td:nth-child(3),
    .reports th:nth-child(4), .reports td:nth-child(4) { display:none; }
  }

  /* The free tools, as boxed tiles. */
  .tools { display:grid; gap:18px;
           grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }
  .tools a { display:block; padding:24px; text-decoration:none;
             background:linear-gradient(180deg,rgba(15,32,53,.96),rgba(10,24,41,.96));
             border:1px solid var(--line); border-radius:18px;
             transition:border-color .18s, transform .18s; }
  .tools a:hover { border-color:var(--accent); transform:translateY(-2px); }
  .tools a span.n { display:inline-block; font-family:var(--display); font-size:12px;
                    letter-spacing:.1em; color:var(--accent); font-weight:800;
                    border:1px solid #31506d; border-radius:999px;
                    padding:3px 10px; margin:0 0 14px; text-transform:uppercase; }
  .tools a strong { display:block; font-family:var(--display); color:var(--ink);
                    font-size:var(--t-card); letter-spacing:-.015em; margin:0 0 7px; }
  .tools a p { margin:0; color:var(--muted); font-size:14.5px; line-height:1.6; }
  .tools a:hover strong { color:var(--accent); }

  /* "Review for Free" grid on the dashboard. */
  .svc { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
         margin:0 0 40px; }
  .svc .item { background:linear-gradient(180deg,rgba(15,32,53,.96),rgba(10,24,41,.96));
               border:1px solid var(--line); border-radius:16px; padding:22px; }
  .svc .item .n { font-family:var(--display); font-size:12px; color:var(--accent);
                  display:block; margin:0 0 8px; letter-spacing:.12em; font-weight:800; }
  .svc .item h4 { font-family:var(--display); font-size:var(--t-card);
                  margin:0 0 7px; letter-spacing:-.015em; }
  .svc .item h4 a { color:var(--ink); text-decoration:none; }
  .svc .item h4 a:hover { color:var(--accent); }
  .svc .item p { margin:0; font-size:14.5px; color:var(--muted); line-height:1.6; }
  .svc .item .soon { display:inline-block; font-size:11px; letter-spacing:.08em;
                     text-transform:uppercase; color:var(--muted);
                     border:1px solid var(--line); border-radius:999px;
                     padding:3px 9px; margin-left:8px; vertical-align:2px; }

  /* ------------------------------------------------------------ articles
     Long-form guides. A reading column of about 70 characters, because
     these are read, not scanned, and a sticky contents panel beside it. */
  .article-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px;
                    gap:52px; align-items:start; }
  .article { max-width:74ch; }
  .article > p { font-size:17px; line-height:1.78; color:var(--body); margin:0 0 20px; }
  .article h2 { font-family:var(--display); font-size:clamp(22px,2.4vw,28px);
                letter-spacing:-.025em; margin:52px 0 16px; line-height:1.18;
                scroll-margin-top:96px; }
  .article h2:first-of-type { margin-top:36px; }
  .article .lead p { font-size:19px; line-height:1.7; color:var(--ink); margin:0 0 18px; }
  .article ul.ticks li, .article ol.steps li { font-size:16.5px; line-height:1.7; }
  .article ol.steps li { margin-bottom:16px; }
  .article table.plain { margin:6px 0 22px; font-size:15px; }
  .article table.plain td:first-child { color:var(--ink); font-weight:600; }
  .article pre { margin:6px 0 22px; padding:18px 20px; overflow-x:auto;
                 background:#06101b; border:1px solid var(--line); border-radius:12px;
                 font:13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
                 color:#cde1f2; -webkit-overflow-scrolling:touch; }
  .article pre code { background:none; border:0; padding:0; color:inherit; font-size:inherit; }
  .callout { margin:6px 0 22px; padding:15px 18px; border-radius:12px;
             background:var(--accent-soft); border:1px solid rgba(54,214,208,.28);
             color:var(--body); font-size:15.5px; line-height:1.65; }
  .callout strong { color:var(--accent); }
  .article .refs { font-size:14.5px; color:var(--muted); padding-left:20px; }
  .article .refs li { margin:0 0 8px; }
  .article .legal-note { font-size:13.5px; color:var(--faint); border-top:1px solid var(--line);
                         padding-top:18px; margin-top:38px; line-height:1.65; }
  .res-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin:20px 0 0;
              font-size:13.5px; color:var(--faint); }
  .res-meta b { color:var(--accent); font-weight:700; letter-spacing:.06em;
                text-transform:uppercase; font-size:12px; }
  aside.toc { position:sticky; top:96px; background:#0a1a2c; border:1px solid var(--line);
              border-radius:18px; padding:24px; }
  aside.toc h4 { margin:0 0 12px; font-size:12.5px; text-transform:uppercase;
                 letter-spacing:.14em; color:var(--accent); font-family:var(--display); }
  aside.toc ol { margin:0 0 20px; padding:0; list-style:none; }
  aside.toc li { margin:0 0 9px; font-size:14.5px; line-height:1.45; }
  aside.toc li a { color:var(--muted); text-decoration:none; }
  aside.toc li a:hover { color:var(--accent); }
  aside.toc .btn { width:100%; margin-top:6px; }
  aside.toc .cta-mini { border-top:1px solid var(--line); padding-top:18px; margin-top:6px; }
  aside.toc .cta-mini strong { display:block; color:var(--ink); margin-bottom:6px; }
  aside.toc .cta-mini p { margin:0 0 14px; font-size:14px; color:var(--muted); line-height:1.6; }
  .res-card .meta { font-size:12.5px; color:var(--faint); margin:-6px 0 14px; }
  @media (max-width:980px) {
    /* minmax(0,1fr), not 1fr: a plain 1fr will not shrink below its content,
       so one long line of code widened the whole column past the screen and
       pushed the panel off the right edge. The panel follows the article, so
       the reader meets the content first and the call to action after it. */
    .article-layout { grid-template-columns:minmax(0,1fr); gap:34px; }
    aside.toc { position:static; }
    aside.toc ol { display:none; }
  }

  /* ------------------------------------------------------ service detail */
  .svc-head { padding:64px 0 50px; border-bottom:1px solid var(--line);
              position:relative; overflow:hidden;
              background:radial-gradient(circle at 88% -30%,rgba(54,214,208,.14),transparent 55%),
                         var(--bg); }
  .svc-head .wrap { position:relative; }
  .svc-head h1 { font-size:clamp(32px,4.8vw,54px); letter-spacing:-.04em;
                 margin:12px 0 18px; line-height:1.06; max-width:20ch; }
  .svc-head p.sub { font-size:19px; }
  .crumb { font-size:13.5px; color:var(--faint); }
  .crumb a { color:var(--muted); text-decoration:none; }
  .crumb a:hover { color:var(--accent); }
  ul.ticks { list-style:none; padding:0; margin:0; }
  ul.ticks li { padding:0 0 0 30px; margin:0 0 12px; position:relative;
                color:var(--body); }
  ul.ticks li::before { content:""; position:absolute; left:0; top:7px; width:17px;
      height:17px; border-radius:50%; background:var(--okbg);
      border:1px solid var(--okline); }
  ul.ticks li::after { content:""; position:absolute; left:6px; top:11px; width:5px;
      height:9px; border:solid var(--ok); border-width:0 2px 2px 0;
      transform:rotate(45deg); }
  ol.steps { counter-reset:s; list-style:none; padding:0; margin:0; }
  ol.steps li { counter-increment:s; padding:0 0 0 52px; margin:0 0 22px;
                position:relative; }
  ol.steps li::before { content:counter(s); position:absolute; left:0; top:-2px;
      width:34px; height:34px; border-radius:10px; background:var(--accent-soft);
      border:1px solid rgba(54,214,208,.30);
      color:var(--accent); display:flex; align-items:center; justify-content:center;
      font-size:14px; font-weight:800; }
  ol.steps strong { display:block; margin-bottom:3px; color:var(--ink); }
  ol.steps span { color:var(--muted); font-size:15px; }
  .two { display:grid; gap:48px; grid-template-columns:1.3fr 1fr; align-items:start; }
  aside.box { background:#0a1a2c; border:1px solid var(--line); border-radius:18px;
              padding:26px; position:sticky; top:96px; }
  aside.box h4 { margin:0 0 10px; font-size:17.5px; }
  aside.box p { color:var(--muted); font-size:14.5px; margin:0 0 18px; }
  aside.box dl { margin:0 0 20px; font-size:14px; }
  aside.box dt { color:var(--accent); text-transform:uppercase; letter-spacing:.1em;
                 font-size:10.5px; margin:0 0 3px; font-weight:800; }
  aside.box dd { margin:0 0 14px; color:var(--body); }

  /* --------------------------------------------------------------- forms */
  .formcard { background:linear-gradient(180deg,rgba(15,32,53,.96),rgba(10,24,41,.96));
              border:1px solid var(--line); border-radius:20px;
              padding:38px 36px; max-width:468px; margin:0 auto;
              box-shadow:var(--shadow); }
  .formcard.wide { max-width:660px; }
  .formcard h1 { font-size:27px; letter-spacing:-.03em; margin:0 0 7px; }
  .formcard .intro { color:var(--muted); font-size:15px; margin:0 0 26px; }
  .field { margin:0 0 18px; }
  .field label { display:block; font-size:13.5px; font-weight:600; margin:0 0 7px;
                 color:var(--ink); }
  .field input, .field select, .field textarea {
      width:100%; font:inherit; font-size:15px; padding:12px 14px;
      border:1px solid #24415e; border-radius:10px; background:#0a1a2c;
      color:var(--ink); transition:border-color .14s, box-shadow .14s; }
  .field input:focus, .field select:focus, .field textarea:focus {
      outline:none; border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(54,214,208,.18); }
  .field .hint { font-size:12.5px; color:var(--faint); margin:6px 0 0; }
  .field textarea { min-height:116px; resize:vertical; }
  .divider { display:flex; align-items:center; gap:14px; margin:24px 0;
             color:var(--faint); font-size:13px; }
  .divider::before, .divider::after { content:""; flex:1; height:1px;
                                      background:var(--line); }
  .swap { text-align:center; margin:24px 0 0; font-size:14.5px; color:var(--muted); }
  .contact { font-size:14px; color:var(--muted); background:var(--accent-soft);
             border:1px solid rgba(54,214,208,.25); border-radius:10px;
             padding:11px 14px; margin:0 0 24px; }
  .gnote { font-size:13px; color:var(--faint); background:var(--panel);
           border:1px solid var(--line); border-radius:10px; padding:11px 14px;
           margin:0 0 22px; line-height:1.5; }

  /* ------------------------------------------------------------ buttons */
  .btn { display:inline-flex; align-items:center; justify-content:center;
         background:var(--grad); color:var(--on-accent); border:0;
         border-radius:10px; padding:14px 24px; font-size:15px; font-weight:800;
         cursor:pointer; font-family:inherit; text-decoration:none;
         transition:filter .14s, transform .12s, background .14s; }
  .btn:hover { filter:brightness(1.08); color:var(--on-accent); transform:translateY(-1px); }
  .btn:active { transform:translateY(0); }
  .btn:disabled { background:#2a3f57; color:#7f93a8; cursor:not-allowed; filter:none;
                  transform:none; }
  .btn.ghost, .btn.secondary { background:#0c1b2d; color:var(--ink);
               border:1px solid var(--line-hi); }
  .btn.ghost:hover, .btn.secondary:hover { background:#112640; color:#fff;
                     border-color:var(--accent); filter:none; }
  .btn.google { background:#fff; color:#20262d; border:1px solid var(--line);
                width:100%; gap:10px; }
  .btn.google:hover { background:#eef2f6; color:#20262d; filter:none; }
  .btn.block { width:100%; text-align:center; }

  /* ------------------------------------------------------------ notices */
  .note, .err { border-radius:14px; padding:16px 19px; font-size:14.5px;
                margin:0 0 24px; }
  .note { background:var(--okbg); border:1px solid var(--okline); color:var(--ok); }
  .err  { background:var(--errbg); border:1px solid var(--errline); color:var(--err); }
  .note strong, .err strong { display:block; margin-bottom:4px; }

  /* ----------------------------------------------------------- dropzone */
  .drop { border:2px dashed #2b4a68; border-radius:16px; padding:42px 24px;
          text-align:center; background:#0a1a2c; cursor:pointer;
          transition:border-color .15s, background .15s; }
  .drop:hover { border-color:var(--accent); }
  .drop.over { border-color:var(--accent); background:var(--accent-soft); }
  .drop p { margin:0 0 16px; color:var(--muted); }
  .drop .file { font-weight:600; color:var(--ink); }
  input[type=file] { display:none; }
  .row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:22px; }

  /* ----------------------------------------------------------- forms
     One system for every form on the site: labels above fields, fields full
     width, and the form itself a card so it reads as one object. */
  label.inline { font-size:13.5px; color:var(--muted); display:flex;
                 align-items:center; gap:8px; }
  .lean form:not(.inline):not(.osint-form) {
      background:linear-gradient(180deg,rgba(15,32,53,.96),rgba(10,24,41,.96));
      border:1px solid var(--line); border-radius:20px;
      padding:30px 30px 28px; box-shadow:var(--shadow); }
  .lean form:not(.inline) label.inline {
      display:block !important; font-size:13.5px; font-weight:600;
      color:var(--ink); margin:0; }
  .lean form:not(.inline) label.inline > span { font-weight:400; color:var(--muted) !important; }
  .lean form:not(.inline) label.inline > input:not([type=checkbox]),
  .lean form:not(.inline) label.inline > textarea,
  .lean form:not(.inline) label.inline > select { display:block; margin-top:7px; }
  .lean form:not(.inline) input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
  .lean form:not(.inline) textarea,
  .lean form:not(.inline) select,
  .osint-form input:not([type=checkbox]) {
      width:100%; font:inherit; font-size:15.5px; font-weight:400; padding:13px 15px;
      border:1px solid #24415e; border-radius:10px; background:#0a1a2c;
      color:var(--ink); transition:border-color .14s, box-shadow .14s; }
  .lean form:not(.inline) input::placeholder,
  .lean form:not(.inline) textarea::placeholder,
  .field input::placeholder, .osint-form input::placeholder { color:#6a8097; }
  .lean form:not(.inline) input:focus, .lean form:not(.inline) textarea:focus,
  .lean form:not(.inline) select:focus, .osint-form input:not([type=checkbox]):focus {
      outline:none; border-color:var(--accent);
      box-shadow:0 0 0 4px rgba(54,214,208,.16); }
  .lean form:not(.inline) textarea { min-height:132px; resize:vertical; }
  .lean form:not(.inline) .row {
      display:grid; gap:18px; margin-top:0;
      grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); }
  .lean form:not(.inline) > label.inline,
  .lean form:not(.inline) > .row { margin-bottom:18px; }
  .lean form:not(.inline) > label.inline[style*="margin-top"] { margin-top:0 !important; }
  .lean form:not(.inline) > .row[style*="margin-top"] { margin-top:0 !important; }
  .lean form:not(.inline) .btn { margin-top:8px !important; min-width:210px; }
  input[type=checkbox] { accent-color:var(--accent); }
  @media (max-width:560px) {
    .lean form:not(.inline):not(.osint-form) { padding:22px 18px; border-radius:16px; }
    .lean form:not(.inline) .btn { width:100%; }
  }

  /* ---------------------------------------------------------- residency */
  .residency { background:var(--okbg); border-top:1px solid var(--okline);
               border-bottom:1px solid var(--okline); padding:14px 0;
               font-size:14.5px; color:var(--ok); }
  .residency .inner { display:flex; gap:10px; align-items:flex-start; }
  .residency strong { white-space:nowrap; }

  /* ------------------------------------------------------------- footer */
  footer.site { border-top:1px solid var(--line); padding:56px 0 36px;
                color:var(--muted); font-size:14px; margin-top:0;
                background:rgba(6,16,27,.6); }
  footer.site .cols { display:grid; gap:36px;
                      grid-template-columns:2fr 1fr 1fr 1fr; margin:0 0 34px; }
  footer.site .brand { display:flex; align-items:center; gap:9px; font-weight:800;
      font-size:20px; letter-spacing:-.02em; color:var(--ink); margin:0 0 12px; }
  footer.site .brand svg.mark { color:var(--accent); font-size:22px; }
  footer.site h5 { font-size:13px; text-transform:none; letter-spacing:0;
                   color:var(--ink); margin:0 0 12px; font-weight:700; }
  footer.site a { color:var(--muted); text-decoration:none; display:block;
                  margin:0 0 8px; }
  footer.site a:hover { color:var(--accent); }
  footer.site .legal { border-top:1px solid var(--line); padding-top:20px;
                       font-size:12.5px; color:var(--faint); line-height:1.8; }
  footer.site .legal code { background:#0a1a2c; border:1px solid var(--line);
                            padding:1px 7px; border-radius:5px; }

  table.plain { width:100%; border-collapse:collapse; font-size:15px;
                background:#0a1a2c; border:1px solid var(--line);
                border-radius:14px; overflow:hidden; }
  table.plain th, table.plain td { text-align:left; padding:14px 16px;
                                   border-bottom:1px solid var(--line); }
  table.plain th { font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;
                   color:var(--faint); font-weight:700; }
  table.plain td { color:var(--muted); }
  table.plain tr:last-child td { border-bottom:0; }

  code { background:#0a1a2c; border:1px solid var(--line); border-radius:5px;
         padding:1px 6px; font-size:.9em; color:#cde1f2; }

  @media (max-width:980px) {
    .facts, .metrics { grid-template-columns:repeat(2,1fr); }
    .flow { grid-template-columns:1fr; }
    .flow .step { min-height:auto; }
    .two { grid-template-columns:1fr; gap:36px; }
    aside.box { position:static; }
    footer.site .cols { grid-template-columns:1fr 1fr; gap:32px; }
    .section-head { display:block; }
    .section-head p.sub { margin-top:12px; }
  }
  @media (max-width:860px) {
    .hero { padding:64px 0 52px; }
    nav.site .links { display:none; }
    nav.site .menu { display:block; }
    nav.site a.cta { margin-left:auto; }
    section { padding:60px 0; }
    .residency .inner { flex-direction:column; gap:3px; }
  }
  @media (max-width:860px) {
    nav.site a.cta { min-height:44px; display:inline-flex; align-items:center; }
    footer.site .cols a { display:inline-block; padding:7px 0; }
  }
  @media (max-width:860px) {
    .cta-band { padding:30px 24px; border-radius:20px; gap:20px; }
    .cta-band .btn { width:100%; }
    table.plain { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  }
  @media (max-width:560px) {
    .metrics, .facts { grid-template-columns:1fr; }
    .actions .btn { width:100%; }
  }
  @media (max-width:420px) {
    nav.site a.cta .full { display:none; }
    nav.site a.cta .brief { display:inline; }
    nav.site a.cta { padding:0 16px; min-height:44px; }
    nav.site .logo { font-size:18px; }
    nav.site .logo svg.mark { font-size:20px; }
  }
  @media (max-width:860px) {
    .card .more, .svc .item h4 a, .card h4 a {
      min-height:44px; display:inline-flex; align-items:center; }
  }
  @media (max-width:430px) {
    .btn { padding:14px 22px; font-size:15px; }
    .cta-band { padding:26px 20px; }
    nav.site .menu .panel a { padding:13px 12px; }
    .wrap { padding:0 18px; }
    .hero p.lede { font-size:16.5px; }
    h3.title { font-size:26px; }
    nav.site a.cta { padding:9px 13px; font-size:13.5px; }
    .formcard { padding:26px 22px; }
    footer.site .cols { grid-template-columns:1fr; }
  }

  .osint-form { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
  .osint-form input:not([type=checkbox]) { flex:1 1 300px; width:auto; }
  .osint-form input[type=checkbox] { flex:none; width:auto; }
  .scorebar { display:flex; align-items:baseline; gap:14px; margin:0 0 6px; }
  .scorebar .big { font-size:46px; font-weight:700; letter-spacing:-.03em;
                   line-height:1; color:var(--ink); }
  .scorebar .grade { font-size:17px; color:var(--muted); }
  .sev-row { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 34px; }
  .sev-row .tile { flex:1 1 92px; border:1px solid var(--line); border-radius:12px;
                   padding:14px; text-align:center;
                   background:rgba(15,32,53,.62); }
  .sev-row .tile b { display:block; font-size:22px; line-height:1.2; }
  .sev-row .tile span { font-size:10.5px; text-transform:uppercase;
                        letter-spacing:.07em; color:var(--faint); }
  .fnd { border:1px solid var(--line); border-left:4px solid var(--line);
         border-radius:14px; padding:18px 20px; margin:0 0 13px;
         background:linear-gradient(180deg,rgba(15,32,53,.96),rgba(10,24,41,.96)); }
  .fnd.critical { border-left-color:#ff6b5e; }
  .fnd.high     { border-left-color:#ff9a4d; }
  .fnd.medium   { border-left-color:#f0c14b; }
  .fnd.low      { border-left-color:#6f9bff; }
  .fnd.info     { border-left-color:#8da2b8; }
  .fnd .top { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
              margin:0 0 9px; }
  .fnd .tag { color:#07111f; font-size:10px; font-weight:700; text-transform:uppercase;
              letter-spacing:.06em; padding:3px 9px; border-radius:5px; }
  .fnd .cid { font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
              color:var(--faint); }
  .fnd h4 { margin:0; font-size:16.5px; flex:1 1 100%; }
  .fnd p { margin:0 0 9px; font-size:14.5px; color:var(--body); }
  .fnd .rem { color:var(--muted); margin:0; }
  .fnd .rem code { background:var(--panel); border:1px solid var(--line);
                   border-radius:5px; padding:1px 6px; font-size:12.5px; }
  .facts-table { width:100%; border-collapse:collapse; font-size:14px;
                 margin:0 0 10px; }
  .facts-table th { text-align:left; width:168px; vertical-align:top;
      padding:10px 12px 10px 0; color:var(--faint); font-size:11.5px;
      text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
  .dl-grid { display:grid; gap:16px;
             grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }
  .dl { border:1px solid var(--line); border-radius:var(--radius);
        padding:22px 20px; position:relative;
        background:linear-gradient(180deg,rgba(15,32,53,.96),rgba(10,24,41,.96));
        display:flex; flex-direction:column; }
  .dl.is-detected { border-color:var(--accent); box-shadow:0 0 0 1px rgba(54,214,208,.35); }
  .dl .yours { position:absolute; top:-10px; left:18px; background:var(--grad);
               color:var(--on-accent); font-size:10.5px; font-weight:700; letter-spacing:.06em;
               text-transform:uppercase; padding:3px 10px; border-radius:999px; }
  .dl h4 { margin:0 0 7px; font-size:17.5px; }
  .dl p { margin:0 0 16px; color:var(--muted); font-size:14.5px; flex:1; }
  .dl .btn { width:100%; text-align:center; }
  .dl .hash { font:10.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
              color:var(--faint); word-break:break-all; margin:10px 0 0; flex:0; }
  .dl .unavailable { color:var(--err); font-size:13.5px; }
  .facts-table td { padding:10px 0; border-bottom:1px solid var(--line-soft);
      font:12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
      color:var(--body); word-break:break-word; }