/* ---------- type ------------------------------------------------------
   IBM Plex is served from this domain rather than Google's CDN. A font
   request to a third party carries the visitor's IP address there before
   they have agreed to anything, which is the kind of quiet transfer this
   site exists to point out. Self-hosting also drops two DNS lookups and
   two TLS handshakes from every page load.
   IBM Plex is licensed under the SIL Open Font License 1.1; the licence
   travels with the files at /fonts/OFL.txt. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/IBMPlexSans-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/IBMPlexSans-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/IBMPlexSans-Bold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/IBMPlexMono-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/IBMPlexMono-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2')}

  /* Token declarations used to live here. They now live in one place, in the
     v4 block further down, so that OS colour preference can't repaint the
     composition and so nothing outranks the sectional surfaces. The rules
     below this point still reference the token names and resolve from v4. */
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg); color: var(--text);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.5; -webkit-font-smoothing: antialiased;
  }
  .mono{ font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; }
  a{ color: var(--accent); }
  .wrap{ max-width: 760px; margin: 0 auto; padding: 0 24px; }
  .wrap-wide{ max-width: 960px; margin: 0 auto; padding: 0 24px; }

  /* ---------- Site nav ---------- */
  .site-nav{ position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 30; }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 20px; flex-wrap: wrap; }
  .nav-inner .brand{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:0.01em; text-decoration:none; color: var(--text); }
  .brand-icon{ width: 20px; height: auto; display: block; }
  .nav-links{ display:flex; align-items:center; gap: 26px; font-size: 14px; }
  .nav-links a{ color: var(--text-dim); text-decoration:none; padding: 4px 0; border-bottom: 2px solid transparent; }
  .nav-links a:hover{ color: var(--text); }
  .nav-links a.active{ color: var(--text); border-bottom-color: var(--accent); }
  .nav-cta{ background: var(--accent); color:#06131A; font-weight:600; font-size:13.5px; padding: 9px 16px; border-radius: 2px; text-decoration:none; white-space:nowrap; }
  .nav-cta:hover{ filter: brightness(1.08); }

  /* ---------- Footer ---------- */
  .site-footer{ border-top: 1px solid var(--line); padding: 44px 0 30px; }
  .footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 36px; }
  .footer-brand{ max-width: 300px; }
  .footer-brand .brand{ display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom: 10px; text-decoration:none; color: var(--text); }
  .footer-brand p{ color: var(--text-faint); font-size: 13px; margin: 0; }
  .footer-links{ display:flex; gap: 48px; flex-wrap: wrap; }
  .footer-col h5{ font-size: 12.5px; color: var(--text-faint); margin: 0 0 10px; font-weight: 600; letter-spacing:.06em; }
  .footer-col a{ display:block; color: var(--text-dim); text-decoration:none; font-size: 13.5px; margin-bottom: 8px; }
  .footer-col a:hover{ color: var(--text); }
  .footer-bottom{ margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-faint); }

  /* ---------- Shared buttons ---------- */
  .btn-primary{ background: var(--accent); color:#06131A; border:none; border-radius:2px; padding:12px 20px; font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
  .btn-primary:hover{ filter: brightness(1.08); }

  /* ---------- Home hero ---------- */
  .home-hero{ position: relative; overflow: hidden; padding: 96px 0 64px; border-bottom: 1px solid var(--line); min-height: 480px; display: flex; align-items: center; }
  .home-hero-art{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .home-hero-photo{ width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; filter: saturate(0.94) brightness(0.9); }
  .home-hero-line{ position: absolute; left: 0; right: 0; top: 54%; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(56,180,230,0.85), transparent); }
  .home-hero-points{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
  .home-hero-scrim{
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, var(--bg) 0%, var(--bg) 34%, rgba(11,18,32,0.85) 50%, rgba(11,18,32,0.4) 72%, rgba(11,18,32,0.05) 92%);
  }
  .home-hero .wrap{ position: relative; z-index: 2; }
  .home-hero-caption{
    position: absolute; right: 24px; bottom: 20px; z-index: 2;
    font-size: 11.5px; letter-spacing: 0.03em;
    color: rgba(229,231,235,0.55); text-align: right; line-height: 1.6;
  }
  @media (max-width: 720px){
    .home-hero{ min-height: 420px; padding: 72px 0 48px; }
    .home-hero-scrim{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 38%, rgba(11,18,32,0.88) 58%, rgba(11,18,32,0.55) 100%); }
    .home-hero-caption{ display: none; }
  }
  .home-hero h1{ font-size: clamp(32px,5vw,50px); line-height: 1.1; font-weight:600; letter-spacing:-0.01em; margin: 0 0 20px; max-width: 15ch; }
  .home-hero p.lede{ color: var(--text-dim); font-size: 18px; max-width: 54ch; margin: 0 0 32px; }
  .hero-foot{ margin-top: 14px; font-size: 12.5px; color: var(--text-faint); }

  /* ---------- Value / steps grids ---------- */
  .section{ padding: 48px 0; border-bottom: 1px solid var(--line); }
  .section-label{ font-size: 13px; color: var(--text-faint); margin: 0 0 10px; font-weight: 600; }
  .section h2{ font-size: 24px; font-weight:600; margin: 0 0 30px; letter-spacing:-0.005em; max-width: 26ch; }
  .section h2.tight{ margin-bottom: 14px; }
  .section > p.desc{ color: var(--text-dim); font-size: 15px; max-width: 62ch; margin: 0 0 28px; }

  .value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .value-icon{ width: 30px; height: 30px; margin-bottom: 16px; color: var(--accent); }
  .value-icon svg{ width: 100%; height: 100%; display: block; }

  .report-preview{ display:flex; gap: 30px; align-items:center; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 28px 30px; flex-wrap: wrap; position: relative; }
  .report-preview-icon{ width: 64px; height: auto; flex-shrink: 0; order: -1; }
  .report-preview-grade{ width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size: 27px; font-weight:600; flex-shrink: 0; font-family:'IBM Plex Mono', monospace; }
  .report-preview-checks{ display:flex; flex-direction:column; gap: 11px; flex: 1; min-width: 220px; }
  .rp-row{ display:flex; align-items:center; gap: 10px; font-size: 14px; color: var(--text-dim); }
  .rp-row .status-dot{ margin-top: 0; flex-shrink: 0; }

  .risk-list{ display:flex; flex-direction:column; }
  .risk-item{ padding: 18px 0; border-top: 1px solid var(--line); display: flex; gap: 16px; align-items: flex-start; }
  .risk-item:first-child{ border-top: none; padding-top: 0; }
  .risk-icon{ width: 22px; height: 22px; margin-top: 2px; color: var(--accent); flex-shrink: 0; }
  .risk-icon svg{ width: 100%; height: 100%; display: block; }
  .risk-item-body h4{ font-size: 15.5px; font-weight:600; margin: 0 0 6px; }
  .risk-item-body p{ color: var(--text-dim); font-size: 14px; margin: 0; max-width: 66ch; }
  .risk-stat{ margin-top: 22px; padding: 16px 18px; background: var(--panel); border-left: 3px solid var(--warn); border-radius: 2px; font-size: 13.5px; color: var(--text-dim); }

  .stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .stat-card{ background: var(--bg); padding: 22px 20px; }
  .stat-num{ font-size: 30px; color: var(--accent); font-weight:600; margin-bottom: 8px; }
  .stat-card p{ color: var(--text-dim); font-size: 13px; margin: 0; }

  .faq-list{ display:flex; flex-direction:column; }
  .faq-item{ padding: 18px 0; border-top: 1px solid var(--line); }
  .faq-item:first-child{ border-top: none; padding-top: 0; }
  .faq-item h4{ font-size: 15.5px; font-weight:600; margin: 0 0 8px; }
  .faq-item p{ color: var(--text-dim); font-size: 14px; margin: 0; max-width: 66ch; }
  .value-card{ background: var(--bg); padding: 26px 22px; }
  .value-card h4{ font-size: 15.5px; font-weight:600; margin: 0 0 8px; }
  .value-card p{ color: var(--text-dim); font-size: 13.5px; margin: 0; }

  .steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: 28px; }
  .step .step-num{ color: var(--accent); font-size: 13px; font-weight:600; margin-bottom: 8px; }
  .step h4{ font-size: 16px; font-weight:600; margin: 0 0 8px; }
  .step p{ color: var(--text-dim); font-size: 14px; margin: 0; }

  .positioning p{ color: var(--text-dim); font-size: 16px; line-height: 1.7; max-width: 66ch; margin: 0 0 16px; }
  .positioning p:last-child{ margin-bottom: 0; }

  /* ---------- Blog ---------- */
  .blog-list{ display:flex; flex-direction:column; }
  .blog-card{ padding: 26px 0; border-top: 1px solid var(--line); text-decoration:none; color:inherit; display:block; }
  .blog-card:first-child{ border-top: none; padding-top: 0; }
  .blog-card .date{ font-size: 12.5px; color: var(--text-faint); margin-bottom: 8px; }
  .blog-card h3{ font-size: 19px; font-weight:600; margin: 0 0 8px; color: var(--text); }
  .blog-card p{ color: var(--text-dim); font-size: 14.5px; margin: 0; max-width: 62ch; }
  .blog-card .read-more{ display:inline-block; margin-top: 10px; font-size: 13px; color: var(--accent); }

  .blog-teaser-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background: var(--line); border: 1px solid var(--line); }
  .blog-teaser-grid .blog-card{ background: var(--bg); padding: 24px; border-top: none; }

  .post-head{ padding: 52px 0 22px; border-bottom: 1px solid var(--line); }
  .post-head .date{ font-size: 13.5px; color: var(--text-faint); margin-bottom: 12px; }
  .post-head h1{ font-size: clamp(28px,4.2vw,38px); line-height: 1.18; font-weight:600; margin: 0; max-width: 20ch; letter-spacing:-0.005em; }
  .post-body{ padding: 34px 0 8px; max-width: 660px; }
  .post-body p{ color: var(--text-dim); font-size: 16px; line-height: 1.75; margin: 0 0 20px; }
  .post-body h3{ color: var(--text); font-size: 18px; font-weight:600; margin: 34px 0 12px; }
  .post-foot{ padding: 24px 0 56px; }
  .back-link{ display:inline-block; font-size: 13.5px; color: var(--accent); text-decoration:none; }

  /* ---------- Scan box (shared by home + product) ---------- */
  .scan-box{ background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; display:flex; max-width: 560px; align-items:center; }
  .scan-box .prompt{ padding: 0 4px 0 14px; color: var(--accent); font-size: 14px; white-space: nowrap; }
  .scan-box input{ flex:1; background: transparent; border:none; outline:none; color: var(--text); font-family:'IBM Plex Mono', monospace; font-size: 14px; padding: 12px 6px; min-width: 0; }
  .scan-box input::placeholder{ color: var(--text-faint); }
  .scan-box button{ background: var(--accent); color:#06131A; border:none; border-radius:2px; padding: 11px 18px; font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; white-space:nowrap; }
  .scan-box button:hover{ filter: brightness(1.08); }
  .scan-box button:disabled{ opacity:.6; cursor:default; }

  /* ---------- Product page ---------- */
  .product-head{ padding: 44px 0 34px; border-bottom: 1px solid var(--line); }
  .product-head h1{ font-size: clamp(26px,4vw,36px); line-height:1.15; font-weight:600; letter-spacing:-0.01em; margin: 0 0 14px; max-width: 20ch; }
  .product-head p{ color: var(--text-dim); font-size: 16px; max-width: 56ch; margin: 0 0 28px; }

  #report{ display:none; }
  .report-head{ padding: 44px 0 26px; border-bottom: 1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap: 30px; align-items:center; }
  .grade-circle{ width: 88px; height: 88px; border-radius: 50%; border: 2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size: 32px; font-weight:600; flex-shrink:0; }
  .report-head h2{ margin: 0 0 6px; font-size: 19px; font-weight:600; }
  .report-head .target{ color: var(--accent); }
  .report-head p{ margin: 0; color: var(--text-dim); font-size: 14.5px; max-width: 58ch; }

  .split-bar{ height: 40px; border-radius: 3px; overflow:hidden; display:flex; border:1px solid var(--line); }
  .split-seen{ background: var(--accent-dim); width: 22%; display:flex; align-items:center; justify-content:center; }
  .split-unseen{ background: var(--panel-2); width: 78%; display:flex; align-items:center; justify-content:center; }
  .split-seen span, .split-unseen span{ font-size: 12.5px; font-weight:600; }
  .split-seen span{ color: var(--accent); }
  .split-unseen span{ color: var(--text-faint); }
  .split-legend{ display:flex; justify-content:space-between; margin-top: 10px; font-size: 13px; color: var(--text-dim); }

  .check{ display:grid; grid-template-columns: 22px 1fr auto; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); align-items:start; }
  .check:first-of-type{ border-top:none; }
  .status-dot{ width: 10px; height: 10px; border-radius:50%; margin-top: 6px; }
  .status-dot.pass{ background: var(--pass); }
  .status-dot.warn{ background: var(--warn); }
  .status-dot.fail{ background: var(--fail); }
  .check-name{ font-weight:600; font-size: 15px; margin-bottom: 3px; }
  .check-body p{ margin:0; color: var(--text-dim); font-size: 14px; }
  .check-tag{ align-self:start; font-size: 12px; font-weight:600; color: var(--text-faint); border: 1px solid var(--line); border-radius:2px; padding: 3px 7px; white-space:nowrap; }

  .unseen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background: var(--line); border: 1px solid var(--line); }
  .unseen-group{ background: var(--bg); padding: 20px 22px; }
  .unseen-icon{ width: 36px; height: 36px; margin-bottom: 12px; }
  .unseen-group h4{ margin: 0 0 10px; font-size: 13.5px; font-weight:600; color: var(--text); display:flex; align-items:center; justify-content:space-between; gap: 10px; }
  .unseen-group ul{ margin: 0 0 14px; padding-left: 18px; color: var(--text-dim); font-size: 13.5px; }
  .unseen-group li{ margin-bottom: 5px; }

  .drill-toggle{ background:none; border: 1px solid var(--line); color: var(--accent); font-size: 12.5px; font-weight:600; border-radius: 2px; padding: 4px 8px; cursor:pointer; white-space:nowrap; }
  .drill-toggle:hover{ border-color: var(--accent); }
  .drill-panel{ display:none; margin-top: 4px; }
  .drill-panel.open{ display:block; }
  .drill-q{ padding: 12px 0; border-top: 1px solid var(--line); }
  .drill-q:first-child{ border-top:none; }
  .drill-q p.prompt-text{ margin: 0 0 8px; font-size: 13.5px; color: var(--text); font-weight:500; }
  .drill-q select{ width:100%; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; color: var(--text); font-family: inherit; font-size: 13.5px; padding: 8px 10px; }
  .drill-q select:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
  .howto-link{ display:inline-block; margin-top: 8px; font-size: 12.5px; color: var(--accent); text-decoration:none; }
  .howto-link:hover{ text-decoration: underline; }
  .drill-feedback{ margin: 8px 0 0; font-size: 12.5px; color: var(--text-faint); display:none; padding-left: 10px; border-left: 2px solid var(--line); }
  .drill-feedback.show{ display:block; }
  .drill-feedback.flag{ color: var(--warn); border-left-color: var(--warn); }
  .drill-feedback.ok{ color: var(--pass); border-left-color: var(--pass); }

  .readiness-meter{ margin-top: 34px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap:wrap; }
  .readiness-meter .label{ font-size: 13.5px; color: var(--text-dim); }
  .readiness-meter .count{ font-size: 15px; font-weight:600; font-variant-numeric:tabular-nums; }
  .readiness-track{ flex: 1 1 160px; height: 6px; background: var(--panel-2); border-radius: 3px; overflow:hidden; min-width: 120px; }
  .readiness-fill{ height: 100%; background: var(--accent); width: 0%; transition: width .25s ease; }

  .disclaimer{ background: var(--panel); border: 1px solid var(--accent-dim); border-left: 3px solid var(--accent); padding: 18px 22px; border-radius: 2px; font-size: 14px; color: var(--text-dim); }
  .disclaimer strong{ color: var(--text); }

  .cta h3{ font-size: 22px; font-weight:600; margin: 0 0 10px; }
  .cta p{ color: var(--text-dim); font-size: 15px; margin: 0 0 22px; max-width: 56ch; }
  .cta-row{ display:flex; gap: 10px; flex-wrap:wrap; max-width: 520px; }
  .cta-row input{ flex:1; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 14px; }
  .cta-row input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
  .cta-row button{ background: var(--text); color: var(--bg); border:none; border-radius: 2px; padding: 12px 20px; font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; }
  .cta-row button:hover{ filter: brightness(1.1); }
  .cta-note{ margin-top: 12px; font-size: 12.5px; color: var(--text-faint); }
  .cta-success{ display:none; color: var(--pass); font-size: 14px; margin-top: 14px; }

  .fade-in{ animation: fadeIn .5s ease both; }
  @keyframes fadeIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

  .notfound{ padding: 90px 0; }
  .notfound h1{ font-size: 30px; margin: 0 0 12px; }
  .notfound p{ color: var(--text-dim); }

  @media (max-width: 720px){
    .value-grid, .steps-grid, .blog-teaser-grid, .stat-grid{ grid-template-columns: 1fr; }
    .report-head{ grid-template-columns: 1fr; text-align:left; }
    .unseen-grid{ grid-template-columns: 1fr; }
    .check{ grid-template-columns: 18px 1fr; }
    .check-tag{ grid-column: 2; margin-top: 4px; }
    .scan-box{ flex-wrap: wrap; }
    .scan-box .prompt{ padding-top: 10px; }
    .footer-links{ gap: 28px; }
  }

  :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }


/* ============================================================
   Trufend UI system v4
   Light page by default. Dark is a deliberate, sectional accent.

   Every component below paints with tokens only. No hardcoded
   surface colours, so a block renders correctly on whichever
   surface it is dropped into. `.surface-dark` re-declares the
   tokens for its subtree; that is the ONLY place dark is defined.
   ============================================================ */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --bg:#FFFFFF;
  --bg-deep:#F4F7FB;
  --surface:#F6F8FB;
  --surface-2:#EDF2F7;
  --surface-3:#E3EAF3;
  --line:#DCE4EE;
  --line-soft:#EAEFF5;
  --line-strong:#C3CFDE;
  --text:#0B1220;
  --text-dim:#46566B;
  --text-faint:#5E6C82;

  /* The accent is the teal from the logo mark. On white the mark's own
     #079CD7 only reaches 3.1:1, so text and button fills use darker
     derivations of the same hue that clear 4.5:1. */
  --accent:#0891C9;
  --accent-ink:#056F99;
  --accent-btn:#057AA8;
  --accent-btn-hover:#046688;
  --on-accent:#FFFFFF;
  --accent-soft:#E6F5FC;
  --accent-line:#AFDCF0;

  --pass:#12864A;
  --warn:#9A6206;
  --fail:#C2281F;
  --pass-soft:#E7F6ED;
  --warn-soft:#FDF3E2;
  --fail-soft:#FDECEA;
  --pass-line:#A8DCC0;
  --warn-line:#EFD09B;
  --fail-line:#F2B8B2;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06),0 4px 12px rgba(11,18,32,.05);
  --shadow-md:0 12px 32px rgba(11,18,32,.09);

  /* legacy aliases: the older rule block still references these names, so
     map them onto the v4 tokens rather than leaving them resolving to the
     old hardcoded dark values. */
  --panel:var(--surface);
  --panel-2:var(--surface-2);
  --panel-3:var(--surface-3);
  --accent-dim:var(--accent-soft);
  --radius:12px;
  color-scheme:light;
}

.surface-dark{
  --bg:#0B1220;
  --bg-deep:#070E18;
  --surface:#111B29;
  --surface-2:#172334;
  --surface-3:#1C2A3D;
  --line:#2B3A4E;
  --line-soft:#213044;
  --line-strong:#3D536E;
  --text:#F6F8FB;
  --text-dim:#C0CBD8;
  --text-faint:#8A9AAD;

  /* On a dark surface the logo teal carries its own weight, so the button
     is the mark's exact #079CD7 with the dark ink on top. */
  --accent:#38B4E6;
  --accent-ink:#9BDBF5;
  --accent-btn:#079CD7;
  --accent-btn-hover:#38B4E6;
  --on-accent:#06111F;
  --accent-soft:#0B2E42;
  --accent-line:#17527A;

  --pass:#4ADE80;
  --warn:#FBC65A;
  --fail:#FB7C72;
  --pass-soft:#11301F;
  --warn-soft:#33260B;
  --fail-soft:#3A1715;
  --pass-line:#1F5637;
  --warn-line:#5A441A;
  --fail-line:#5E2A26;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 18px 50px rgba(0,0,0,.28);

  /* legacy aliases: the older rule block still references these names, so
     map them onto the v4 tokens rather than leaving them resolving to the
     old hardcoded dark values. */
  --panel:var(--surface);
  --panel-2:var(--surface-2);
  --panel-3:var(--surface-3);
  --accent-dim:var(--accent-soft);
  --radius:12px;
  color-scheme:dark;
  background:var(--bg);
  color:var(--text);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.62;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent-ink)}
button,input,select{font:inherit}
.wrap{max-width:900px;margin:0 auto;padding:0 28px}
.wrap-wide{max-width:1180px;margin:0 auto;padding:0 32px}
.mono{font-family:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;letter-spacing:0}

/* ---------- nav : light, with a much larger lockup ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(130%);
}
.nav-inner{min-height:88px;padding:0;gap:28px;flex-wrap:nowrap;display:flex;align-items:center;justify-content:space-between}
.nav-inner .brand{display:flex;align-items:center;gap:0;text-decoration:none;color:var(--text)}
.brand-lockup{display:block;height:50px;width:auto}
/* the mark is four pieces so it can be recoloured for a dark background,
   where the navy half of the stem would otherwise vanish */
.brand-lockup .bl-word{fill:var(--text)}
.brand-lockup .bl-bar-a{fill:#7FCDEC}
.brand-lockup .bl-bar-b{fill:#079CD7}
.brand-lockup .bl-stem-a{fill:#0880B0}
.brand-lockup .bl-stem-b{fill:#053552}
.nav-links{display:flex;align-items:center;gap:30px;font-size:15px}
.nav-links a{color:var(--text-dim);text-decoration:none;padding:31px 0 29px;border-bottom:2px solid transparent;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active{border-bottom-color:var(--accent)}
.nav-cta,.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-btn);color:var(--on-accent);border:1px solid transparent;
  border-radius:9px;font-weight:700;text-decoration:none;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.nav-cta{padding:11px 18px;font-size:14px}
.nav-cta:hover,.btn-primary:hover{background:var(--accent-btn-hover);transform:translateY(-1px)}

/* ---------- hero : full-bleed photograph ---------- */
.home-hero{
  position:relative;
  padding:104px 0 78px;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-deep);
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home-hero > .wrap-wide{width:100%}
.home-hero-art{position:absolute;inset:0;z-index:0;overflow:hidden}
.home-hero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;display:block;
  filter:saturate(.8) contrast(1.06) brightness(.78);
}
.hero-photo-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(7,14,24,.94) 0%,rgba(7,14,24,.9) 34%,rgba(7,14,24,.72) 58%,rgba(7,14,24,.5) 80%,rgba(7,14,24,.42) 100%),
    linear-gradient(180deg,rgba(7,14,24,.5) 0%,transparent 26%,transparent 62%,rgba(7,14,24,.62) 100%);
}
.home-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;
  background-image:linear-gradient(rgba(180,200,220,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(180,200,220,.1) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg,black,transparent 60%);
}
.hero-datum{position:absolute;left:0;right:0;top:0;height:1px;z-index:2;background:linear-gradient(90deg,transparent 0%,rgba(56,180,230,.9) 22%,rgba(56,180,230,.9) 78%,transparent 100%);box-shadow:0 0 16px rgba(56,180,230,.45)}
.hero-datum span{position:absolute;right:0;top:-30px;padding:4px 9px;border:1px solid rgba(56,180,230,.5);border-radius:5px;background:rgba(8,16,28,.82);color:#BFE7F7;font:600 10.5px/1.4 'IBM Plex Sans',sans-serif;text-transform:uppercase;letter-spacing:.09em}
.home-hero .wrap-wide{position:relative;z-index:3}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:64px;align-items:center}
.hero-copy{max-width:660px}
.hero-kicker{display:flex;align-items:center;gap:10px;color:#D3DEEA;font-size:13.5px;font-weight:600;margin-bottom:22px}
.signal-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(56,180,230,.16)}
.home-hero h1{font-size:clamp(44px,5.4vw,70px);line-height:1.02;letter-spacing:-.045em;font-weight:700;margin:0 0 24px;max-width:13ch}
.home-hero p.lede{font-size:18.5px;line-height:1.62;max-width:56ch;margin:0 0 32px}
.hero-proof{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:#C4D2E1}
.hero-proof span{display:flex;align-items:center;gap:8px}
.hero-proof span::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.75}

/* live scan counter: only rendered when the real figure clears the threshold */
.hero-counter{margin-top:30px;display:flex;align-items:baseline;gap:11px;font-size:13.5px}
.hero-counter strong{font:700 27px/1 'IBM Plex Sans',sans-serif;letter-spacing:-.03em}
.hero-counter .hc-label{max-width:22ch;line-height:1.35}

/* the floating stat panel, now sitting on the full-bleed photo */
.hero-visual{
  position:relative;border:1px solid rgba(180,204,230,.22);border-radius:var(--radius-lg);
  background:rgba(8,16,28,.6);backdrop-filter:blur(14px);
  padding:24px 24px 22px;box-shadow:0 28px 80px rgba(0,0,0,.34);min-height:0;
}
.hero-visual{margin:0}
.hero-visual-top{display:flex;align-items:center;gap:10px;color:#CFE0F3;font:700 11px/1.4 'IBM Plex Sans',sans-serif;letter-spacing:.09em}
.hero-card-icon{width:30px;height:30px;margin-right:2px;flex:0 0 30px}

/* The card carries the argument the whole site rests on: a thin measured band
   and a much larger unmeasured one. The solid part is what a scan verifies;
   the hatched part is everything it cannot reach, drawn as absence rather
   than as a second colour competing for attention. */
.hv-split{display:flex;height:9px;border-radius:999px;overflow:hidden;margin:19px 0 4px;
  background:rgba(255,255,255,.06);border:1px solid rgba(184,204,226,.14)}
.hv-seen{width:20%;background:linear-gradient(90deg,#079CD7,#5AC4EE);box-shadow:0 0 12px rgba(56,180,230,.45)}
.hv-unseen{width:80%;background:repeating-linear-gradient(118deg,
  rgba(184,204,226,.15) 0 4px, rgba(184,204,226,.04) 4px 9px)}
@keyframes hvSeen{from{width:0}to{width:20%}}
@keyframes hvUnseen{from{width:0}to{width:80%}}
.hv-seen{animation:hvSeen .75s .35s cubic-bezier(.22,.61,.36,1) both}
.hv-unseen{animation:hvUnseen .85s .6s cubic-bezier(.22,.61,.36,1) both}

.hv-rows{list-style:none;margin:0;padding:0}
.hv-row{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:0 11px;
  align-items:baseline;padding-top:15px}
.hv-row+.hv-row{margin-top:14px;border-top:1px solid rgba(184,204,226,.14)}
.hv-mark{width:9px;height:9px;border-radius:50%;align-self:center}
.is-seen .hv-mark{background:#38B4E6;box-shadow:0 0 0 4px rgba(56,180,230,.17)}
.is-unseen .hv-mark{border:1px solid rgba(184,204,226,.55)}
.hv-label{font-size:13.5px;font-weight:600;color:#EDF3F9;letter-spacing:-.01em}
.hv-num{font:700 15px/1 'IBM Plex Mono',monospace;color:#fff}
.is-unseen .hv-num{color:#A9BBCE}
.hv-detail{grid-column:2/-1;margin-top:6px;font-size:12.4px;line-height:1.52;color:#AEC0D3}

.scan-box{max-width:610px;background:var(--surface);border:1px solid var(--line-strong);border-radius:11px;padding:5px;display:flex;align-items:center;box-shadow:var(--shadow-sm)}
.scan-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.scan-box .prompt{padding:0 2px 0 13px;color:var(--text-faint);font-size:13px}
.scan-box input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:14px;padding:12px 8px;min-width:0}
.scan-box input::placeholder{color:var(--text-faint)}
.scan-box button{background:var(--accent-btn);color:var(--on-accent);border:0;border-radius:8px;padding:11px 18px;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.scan-box button:hover{background:var(--accent-btn-hover)}
.home-hero .scan-box{background:rgba(9,17,29,.72);border-color:rgba(150,180,215,.38);backdrop-filter:blur(10px)}
.home-hero .scan-box input{color:#F6F8FB}
.home-hero .scan-box input::placeholder{color:#9FB3C8}
.home-hero .scan-box .prompt{color:#9FB3C8}
.home-hero .scan-box button{background:#079CD7;color:#06111F}
.home-hero .scan-box button:hover{background:#38B4E6}

/* ---------- sections ---------- */
.section{padding:86px 0;border-bottom:1px solid var(--line-soft);background:var(--bg)}
.section-muted{background:var(--surface)}
.section-report{background:linear-gradient(180deg,#0D1725,#0B1421)}
.section-scope{background:var(--surface)}
.section-intro{max-width:720px;margin-bottom:38px}
.section-intro.split-intro{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);gap:70px;align-items:end}
.section-label{font:700 11.5px/1.4 'IBM Plex Sans',sans-serif;letter-spacing:.13em;color:var(--accent-ink);margin:0 0 12px;text-transform:uppercase}
.section h2,.cta-panel h2{font-size:clamp(30px,3.5vw,43px);line-height:1.1;letter-spacing:-.035em;font-weight:700;margin:0;max-width:18ch;color:var(--text)}
.section h2.tight{margin-bottom:0}
.section p.desc,.section-intro .desc{color:var(--text-dim);font-size:15.5px;line-height:1.7;max-width:62ch;margin:0}

.icon-mark{display:inline-flex;align-items:center;justify-content:center;color:var(--accent-ink);flex:0 0 auto}
.icon-mark svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.feature-icon,.risk-icon,.step-icon,.unseen-icon-mark,.report-preview-icon{border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);border-radius:10px}
.feature-icon{width:48px;height:48px;padding:11px}
.risk-icon{width:42px;height:42px;padding:9px}
.step-icon{width:40px;height:40px;padding:9px}
.unseen-icon-mark{width:42px;height:42px;padding:9px}
.report-preview-icon{width:44px;height:44px;padding:10px}
.inline-arrow{width:18px;height:18px;margin-left:6px;vertical-align:-4px;border:0;background:none;padding:0}

.report-preview{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-md)}
.report-preview-heading{padding:26px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border-right:1px solid var(--line-soft);background:var(--surface-2)}
.report-preview-heading h3{font-size:18px;margin:2px 0 0;letter-spacing:-.02em;color:var(--text)}
.report-label{font:700 10.5px/1 'IBM Plex Sans',sans-serif;color:var(--text-faint);letter-spacing:.1em}
.report-preview-grade{width:62px;height:62px;border-radius:50%;border:1px solid var(--accent-line);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font:700 23px/1 'IBM Plex Mono',monospace;color:var(--accent-ink)}
.report-preview-checks{display:flex;flex-direction:column;gap:0;min-width:0;background:var(--bg)}
.rp-row{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px 22px;border-bottom:1px solid var(--line-soft);font-size:13.5px;color:var(--text-dim)}
.rp-row:last-child{border-bottom:0}
.rp-row span:last-child{font:700 10.5px/1 'IBM Plex Sans',sans-serif;color:var(--text-faint);letter-spacing:.08em}
.status-dot{width:8px;height:8px;border-radius:50%;margin:0;flex:0 0 auto}
.status-dot.pass{background:var(--pass)}
.status-dot.warn{background:var(--warn)}
.status-dot.fail{background:var(--fail)}

.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:none;border:0}
.value-card{position:relative;min-height:290px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:26px;overflow:hidden;box-shadow:var(--shadow-sm)}
.value-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.8}
.value-card-number{position:absolute;right:22px;top:24px;color:var(--text-faint);font-size:11px}
.value-card h3{font-size:19px;line-height:1.28;margin:24px 0 9px;letter-spacing:-.02em;color:var(--text)}
.value-card p{font-size:14px;line-height:1.68;color:var(--text-dim);margin:0}

.risk-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.risk-item{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:22px;border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.risk-item:first-child{padding-top:22px;border-top:1px solid var(--line)}
.risk-item-wide{grid-column:1/-1}
.risk-item-body h3{font-size:16.5px;line-height:1.3;margin:2px 0 7px;letter-spacing:-.015em;color:var(--text)}
.risk-item-body p{font-size:13.8px;line-height:1.65;color:var(--text-dim);margin:0}

.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{border-top:1px solid var(--line-strong);padding:22px 2px 0}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.step .step-num{color:var(--text-faint);font-size:11px;margin:0}
.step h3{font-size:18px;margin:0 0 8px;letter-spacing:-.02em;color:var(--text)}
.step p{color:var(--text-dim);font-size:14px;line-height:1.65;margin:0}

.scope-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:70px;align-items:center}
.scope-copy p:not(.section-label){font-size:16px;line-height:1.75;color:var(--text-dim);max-width:55ch;margin:22px 0 0}
.scope-visual{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--bg);box-shadow:var(--shadow-sm)}
.scope-row{display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:center;padding:24px 26px}
.scope-row+ .scope-row{border-top:1px solid var(--line)}
.scope-visible{background:linear-gradient(90deg,var(--accent-soft),transparent)}
.scope-number{font-size:28px;font-weight:600;color:var(--accent-ink)}
.scope-row strong{display:block;font-size:14.5px;color:var(--text)}
.scope-row div span{display:block;color:var(--text-faint);font-size:12.5px;margin-top:4px}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;background:none;border:0}
.stat-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:25px;box-shadow:var(--shadow-sm)}
.stat-num{font-size:36px;line-height:1;color:var(--accent-ink);font-weight:600;margin-bottom:14px}
.stat-card p{color:var(--text-dim);font-size:13.5px;line-height:1.6;margin:0}

.faq-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:70px;align-items:start}
.faq-heading{position:sticky;top:120px}
.faq-heading .desc{margin-top:16px}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:0;background:transparent}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 34px 20px 0;font-weight:600;font-size:15px;line-height:1.45;position:relative;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:2px;top:18px;color:var(--accent-ink);font:500 21px/1 'IBM Plex Sans',sans-serif}
.faq-item[open] summary::after{content:"−"}
.faq-item p{color:var(--text-dim);font-size:14px;line-height:1.7;margin:0;padding:0 36px 20px 0;max-width:64ch}

.blog-teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:none;border:0}
.blog-teaser-grid .blog-card{display:block;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:26px;text-decoration:none;transition:border-color .18s ease,transform .18s ease;box-shadow:var(--shadow-sm)}
.blog-teaser-grid .blog-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.blog-card .date{font-size:10.5px;color:var(--text-faint);margin-bottom:14px;letter-spacing:.08em}
.blog-card h3{font-size:20px;line-height:1.25;margin:0 0 9px;color:var(--text)}
.blog-card p{font-size:14px;line-height:1.65;color:var(--text-dim)}
.blog-card .read-more{display:inline-flex;align-items:center;margin-top:16px;color:var(--accent-ink);font-size:13px}

.cta-section{padding:78px 0 92px;background:var(--bg)}
.cta-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.7fr);gap:24px 60px;align-items:end;padding:38px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#102039,#0B1625);box-shadow:var(--shadow-md)}
.cta-panel h2{max-width:14ch}
.cta-panel>div>p:not(.section-label){color:var(--text-dim);font-size:14.5px;max-width:55ch;margin:15px 0 0}
.cta-row{display:flex;gap:8px;max-width:none;align-items:center}
.cta-row input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line-strong);border-radius:9px;padding:12px 13px;color:var(--text)}
.cta-row button{background:var(--accent-btn);color:var(--on-accent);border:0;border-radius:9px;padding:12px 17px;font-weight:700;white-space:nowrap;cursor:pointer}
.cta-row button:hover{background:var(--accent-btn-hover)}
.cta-note,.cta-success{grid-column:2;font-size:11.5px;color:var(--text-faint);margin:0}
.cta-success{color:var(--pass)}

/* ---------- product page + report ---------- */
.product-head{padding:72px 0 52px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.product-head h1{font-size:clamp(38px,5vw,54px);line-height:1.04;letter-spacing:-.04em;font-weight:700;max-width:13ch;margin:0 0 18px;color:var(--text)}
.product-head p{font-size:16px;line-height:1.65;color:var(--text-dim);max-width:60ch;margin:0 0 28px}

/* report summary : the one dark panel on the product page */
.report-summary{
  margin-top:30px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.rs-head{padding:28px 30px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.rs-grade{
  width:96px;height:96px;border-radius:50%;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px solid currentColor;font-family:'IBM Plex Mono',monospace;
}
.rs-grade b{font-size:34px;line-height:1;font-weight:700}
.rs-grade span{font-size:9.5px;letter-spacing:.14em;margin-top:5px;opacity:.85}
.rs-grade.g-strong{color:#4ADE80}
.rs-grade.g-ok{color:#FBC65A}
.rs-grade.g-weak{color:#FB7C72}
.rs-domain{font:600 25px/1.2 'IBM Plex Sans',sans-serif;letter-spacing:-.03em;margin:0 0 6px;word-break:break-all}
.rs-verdict{font-size:15px;line-height:1.6;margin:0;max-width:58ch}
.rs-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;letter-spacing:.06em}

.rs-tallies{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-soft)}
.rs-tally{padding:18px 22px;display:flex;align-items:center;gap:13px;border-right:1px solid var(--line-soft);cursor:pointer;background:none;border-top:0;border-bottom:0;border-left:0;text-align:left;width:100%;color:inherit;transition:background .15s ease}
.rs-tally:last-child{border-right:0}
.rs-tally:hover{background:rgba(255,255,255,.05)}
.rs-tally[aria-pressed="true"]{background:rgba(255,255,255,.09)}
.rs-tally-num{font:700 27px/1 'IBM Plex Sans',sans-serif;letter-spacing:-.03em}
.rs-tally-lab{font-size:12.5px;line-height:1.3}
.rs-tally.t-fail .rs-tally-num{color:#FB7C72}
.rs-tally.t-warn .rs-tally-num{color:#FBC65A}
.rs-tally.t-pass .rs-tally-num{color:#4ADE80}

.rs-bar{display:flex;height:7px;width:100%}
.rs-bar i{display:block;height:100%}
.rs-bar .b-fail{background:#FB7C72}
.rs-bar .b-warn{background:#FBC65A}
.rs-bar .b-pass{background:#4ADE80}
.rs-bar .b-none{background:var(--line)}

/* findings */
.findings{margin-top:34px}
.findings-group{margin-bottom:30px}
.findings-group-head{display:flex;align-items:center;gap:11px;margin:0 0 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--text-faint)}
.findings-group-head .fg-count{padding:2px 8px;border-radius:20px;font-size:11px;letter-spacing:.04em;border:1px solid var(--line)}
.fg-fail .fg-count{color:var(--fail);border-color:var(--fail-line);background:var(--fail-soft)}
.fg-warn .fg-count{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.fg-pass .fg-count{color:var(--pass);border-color:var(--pass-line);background:var(--pass-soft)}

.finding{
  border:1px solid var(--line);border-radius:11px;background:var(--bg);
  margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-sm);
}
.finding.f-fail{border-left:3px solid var(--fail)}
.finding.f-warn{border-left:3px solid var(--warn)}
.finding.f-pass{border-left:3px solid var(--pass)}
.finding.f-unknown{border-left:3px solid var(--line-strong)}
.finding > summary{
  list-style:none;cursor:pointer;padding:17px 46px 17px 20px;position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;
}
.finding > summary::-webkit-details-marker{display:none}
.finding > summary::after{
  content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.finding[open] > summary::after{transform:translateY(-30%) rotate(225deg)}
.finding > summary:hover{background:var(--surface)}
.f-badge{
  font:700 10.5px/1 'IBM Plex Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 8px;border-radius:5px;border:1px solid transparent;white-space:nowrap;
}
.f-fail .f-badge{color:var(--fail);background:var(--fail-soft);border-color:var(--fail-line)}
.f-warn .f-badge{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}
.f-pass .f-badge{color:var(--pass);background:var(--pass-soft);border-color:var(--pass-line)}
.f-unknown .f-badge{color:var(--text-faint);background:var(--surface-2);border-color:var(--line)}
.f-name{font-size:15px;font-weight:600;line-height:1.35;color:var(--text);min-width:0}
.f-tag{font:600 10.5px/1 'IBM Plex Sans',sans-serif;letter-spacing:.08em;color:var(--text-faint);border:1px solid var(--line);border-radius:6px;padding:5px 7px;white-space:nowrap}
.f-body{padding:2px 20px 20px 20px;border-top:1px solid var(--line-soft)}
.f-detail{font-size:14px;line-height:1.7;color:var(--text-dim);margin:16px 0 0;max-width:70ch}
.f-fix{margin-top:16px;padding:16px 18px;border-radius:9px;background:var(--surface);border:1px solid var(--line)}
.f-fix h5{margin:0 0 9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-weight:600}
.f-fix ol{margin:0;padding-left:19px;font-size:13.8px;line-height:1.72;color:var(--text-dim)}
.f-fix li+li{margin-top:5px}
.f-fix code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--text)}
.findings-empty{padding:22px;border:1px dashed var(--line-strong);border-radius:11px;color:var(--text-dim);font-size:14px;text-align:center}

.report-section-title{display:flex;align-items:baseline;gap:14px;margin:44px 0 6px;flex-wrap:wrap}
.report-section-title h3{font-size:21px;letter-spacing:-.025em;margin:0;color:var(--text)}
.report-section-title .rst-note{font-size:13px;color:var(--text-faint);margin:0}

.split-bar{height:46px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);display:flex;overflow:hidden}
/* White sat on the light end of the old gradient at 3.6:1 and vanished. Both
   ends are now dark enough to carry it: 5.3:1 and 7.1:1. */
.split-seen{background:linear-gradient(90deg,#05739E,#045F80);display:flex;align-items:center;
  justify-content:center;color:#fff;font:600 12.5px/1 'IBM Plex Sans',sans-serif;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;padding:0 8px}
.split-unseen{background:var(--surface-3);width:78%;display:flex;align-items:center;
  justify-content:center;color:var(--text-dim);font:500 12.5px/1 'IBM Plex Sans',sans-serif;
  white-space:nowrap;overflow:hidden;padding:0 8px}
/* A fifth of a narrow screen cannot hold four words, so below this width each
   half says the short version rather than showing a clipped long one. */
/* An older block sets a colour on the span itself, which outranks the colour
   set on its parent here. That is what put teal text on a teal bar. */
.split-seen span,.split-unseen span{color:inherit;font:inherit;letter-spacing:inherit}
@media (max-width:820px){
  .split-seen span,.split-unseen span{display:none}
  .split-seen::after{content:"~20%"}
  .split-unseen::after{content:"~80% needs credentials, code or documents"}
}
@media (max-width:560px){
  .split-bar{height:40px}
  .split-unseen::after{content:"~80% not visible from here"}
}
@media (max-width:400px){
  .split-unseen::after{content:"~80% not visible"}
}
.split-legend{font-size:12px;color:var(--text-faint)}

.unseen-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;background:none;border:0}
.unseen-group{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:20px;box-shadow:var(--shadow-sm)}
.unseen-group h4{font-size:14.5px;margin:14px 0 10px;color:var(--text)}
.unseen-group ul{font-size:13px;line-height:1.55;color:var(--text-dim);margin:0;padding-left:18px}
.drill-toggle{border:1px solid var(--line-strong);border-radius:7px;padding:5px 8px;background:var(--surface);color:var(--text-dim);cursor:pointer;font-size:12px}
.drill-q select{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;color:var(--text);font-family:inherit;font-size:13.5px;padding:9px 11px}
.readiness-meter{margin-top:34px;padding:17px 21px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.readiness-track{flex:1 1 160px;height:6px;background:var(--surface-3);border-radius:3px;overflow:hidden;min-width:120px}
.readiness-track > div{height:100%;background:var(--accent);border-radius:3px}
.disclaimer{border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent-line);border-left:3px solid var(--accent);padding:18px 22px;font-size:14px;color:var(--text-dim)}

/* ---------- guide route ---------- */
.guide-head{padding:72px 0 54px;background:var(--surface);border-bottom:1px solid var(--line-soft)}
.guide-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:52px;align-items:start}
.guide-head h1{font-size:clamp(34px,4.4vw,50px);line-height:1.06;letter-spacing:-.04em;font-weight:700;margin:0 0 18px;max-width:17ch;color:var(--text)}
.guide-head p{color:var(--text-dim);font-size:16px;line-height:1.7;margin:0;max-width:58ch}
.guide-note{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.guide-note strong{display:block;margin-bottom:7px;font-size:14.5px;color:var(--text)}
.guide-note p{font-size:13.5px;line-height:1.65}
.index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.index-card{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:22px;box-shadow:var(--shadow-sm)}
.index-card-top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.index-card-top h3{font-size:15px;margin:0;letter-spacing:-.01em;color:var(--text)}
.index-card ul{margin:0;padding-left:17px;font-size:13px;line-height:1.6}
.index-card li+li{margin-top:7px}
.index-card a{color:var(--text-dim);text-decoration:none}
.index-card a:hover{color:var(--accent-ink);text-decoration:underline}
.guide-group{padding:52px 0;border-bottom:1px solid var(--line-soft)}
.guide-group:nth-child(even){background:var(--surface)}
.group-head{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;margin-bottom:22px}
.group-head h2{font-size:26px;letter-spacing:-.03em;margin:0;color:var(--text)}
.group-icon{width:42px;height:42px;padding:9px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);border-radius:10px}
.group-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.group-label{font:600 12.5px/1 'IBM Plex Sans',sans-serif;color:var(--text-faint);margin:0}
.q{border:1px solid var(--line);border-radius:10px;background:var(--bg);margin-bottom:9px;overflow:hidden;box-shadow:var(--shadow-sm)}
.q > summary{list-style:none;cursor:pointer;padding:16px 44px 16px 19px;font-weight:600;font-size:15px;line-height:1.45;position:relative;color:var(--text)}
.q > summary::-webkit-details-marker{display:none}
.q > summary::after{content:"+";position:absolute;right:18px;top:13px;color:var(--accent-ink);font:500 21px/1 'IBM Plex Sans',sans-serif}
.q[open] > summary::after{content:"−"}
.q > summary:hover{background:var(--surface)}
.lookup{padding:2px 19px 19px;border-top:1px solid var(--line-soft);font-size:14px;line-height:1.72;color:var(--text-dim)}
.lookup p{margin:14px 0 0}
.lookup strong{color:var(--text)}
.lookup code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--text)}
.lookup ol,.lookup ul{margin:12px 0 0;padding-left:19px}
.lookup li+li{margin-top:5px}
.callout{margin-top:14px;padding:15px 17px;border-radius:9px;background:var(--accent-soft);border:1px solid var(--accent-line);font-size:13.8px;line-height:1.68;color:var(--text-dim)}
.callout strong{color:var(--text)}
.guide-foot{padding:34px 0 46px;font-size:13px;color:var(--text-faint);line-height:1.7}

/* ---------- blog ---------- */
.post-head{padding:74px 0 32px;background:var(--surface);border-bottom:1px solid var(--line-soft)}
.post-head h1{font-size:clamp(34px,4.5vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:700;max-width:18ch;color:var(--text)}
.post-body{max-width:730px;padding:42px 0 10px}
.post-body p{font-size:16.5px;line-height:1.8;color:var(--text-dim)}
.post-body h3{font-size:21px;letter-spacing:-.02em;margin-top:40px;color:var(--text)}

/* ---------- footer : dark anchor ---------- */
.site-footer{padding:52px 0 34px;border-top:0}
/* the footer carries the same blue mark as the header; only the wordmark
   changes, because the dark ink it is drawn in would be lost on this panel */
.surface-dark .brand-lockup .bl-word{fill:#FFFFFF}
.footer-brand .brand{display:flex;align-items:center;gap:8px;margin-bottom:12px;text-decoration:none;color:var(--text)}
.footer-brand p{color:var(--text-dim)}
.footer-bottom{color:var(--text-faint)}
.footer-col h5{color:var(--text-faint)}
.footer-col a{color:var(--text-dim);text-decoration:none}
.footer-col a:hover{color:var(--text)}

.report-notice.is-info{background:var(--accent-soft);border-color:var(--accent-line);border-left-color:var(--accent)}
.report-notice{background:var(--warn-soft);border:1px solid var(--warn-line);border-left:3px solid var(--warn);border-radius:9px;padding:14px 17px;margin-bottom:18px;font-size:13.5px;line-height:1.6;color:var(--text-dim)}
.rs-grade.g-none{color:var(--text-faint)}
.report-scope-note{font-size:13.5px;color:var(--text-faint);margin:14px 0 0;max-width:70ch;line-height:1.65}
.rs-grade-sm{width:64px;height:64px;border-width:2px}
.rs-grade-sm b,.rs-grade-sm{font:700 22px/1 'IBM Plex Mono',monospace}
.seo-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin-bottom:22px}
@media (max-width:760px){.seo-head{grid-template-columns:1fr}}

@media (max-width:460px){
  /* the bar keeps its gutter now, so the row has less to play with: the mark
     and the button give back just enough to stay on one line */
  .brand-lockup{height:36px}
  .nav-cta{padding:8px 13px;font-size:12.5px}
  .nav-links{gap:10px 12px;font-size:13.5px;flex-wrap:wrap}
  .nav-links a{white-space:nowrap}
}


/* Free Tools dropdown. The trigger is a real link to /tools/ so it still
   works with JavaScript disabled; the panel is progressive enhancement. */
.nav-drop{position:relative;display:inline-flex}
.nav-drop > a{display:inline-flex;align-items:center;gap:6px}
.nav-drop > a::after{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.75}
.nav-panel{position:absolute;top:100%;left:-14px;min-width:288px;background:var(--bg);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(11,18,32,.14);
  padding:8px;display:none;z-index:60}
.nav-drop.open .nav-panel{display:block}
.nav-panel a{display:block;padding:10px 12px;border-radius:8px;border-bottom:0;
  font-size:14px;font-weight:600;color:var(--text);text-decoration:none}
.nav-panel a small{display:block;font-weight:400;font-size:12.5px;color:var(--text-faint);
  margin-top:2px;line-height:1.45}
.nav-panel a:hover,.nav-panel a:focus-visible{background:var(--surface);color:var(--accent-ink)}
@media (max-width:760px){
  .nav-drop{position:static;display:block;width:100%}
  .nav-panel{position:static;min-width:0;box-shadow:none;margin:4px 0 8px;width:100%}
}

/* the bar is sticky, so an anchored section has to leave room for it */
.section[id],[id].section{scroll-margin-top:104px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-layout,.scope-layout,.guide-grid{grid-template-columns:1fr;gap:42px}
  .hero-copy{max-width:700px}
  .home-hero h1{max-width:13ch}
  .section-intro.split-intro{grid-template-columns:1fr;gap:18px;align-items:start}
  .faq-layout{grid-template-columns:1fr;gap:34px}
  .faq-heading{position:static}
  .cta-panel{grid-template-columns:1fr}
  .cta-note,.cta-success{grid-column:1}
  .index-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .wrap,.wrap-wide{padding:0 20px}
  .site-nav{position:relative}
  /* .wrap-wide's side padding is overridden here, so it has to come back
     with it or the menu and the button run into the screen edge */
  .nav-inner{min-height:64px;gap:14px;flex-wrap:wrap;padding:12px 20px}
  .brand-lockup{height:42px}
  .nav-links{order:3;width:100%;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:4px;font-size:14px}
  .nav-links a{padding:10px 0}
  .home-hero{padding:64px 0 72px;min-height:0}
  .hero-photo-scrim{background:linear-gradient(180deg,rgba(7,14,24,.72) 0%,rgba(7,14,24,.86) 45%,rgba(7,14,24,.95) 100%)}
  .hero-layout{gap:34px}
  .home-hero h1{font-size:clamp(39px,11vw,52px);max-width:none}
  .home-hero p.lede{font-size:16.5px}
  .hero-datum{display:none}
  .hero-visual{padding:20px 20px 19px}
  .hv-detail{font-size:12.1px}
  .scan-box{flex-wrap:wrap;padding:6px}
  .scan-box .prompt{padding-top:6px}
  .scan-box input{min-width:calc(100% - 70px)}
  .scan-box button{width:100%}
  .section{padding:62px 0}
  .section h2,.cta-panel h2{font-size:32px;max-width:none}
  .value-grid,.steps-grid,.stat-grid,.blog-teaser-grid,.risk-list,.unseen-grid,.report-preview,.index-grid{grid-template-columns:1fr}
  .value-card{min-height:0}
  .risk-item-wide{grid-column:auto}
  .report-preview-heading{border-right:0;border-bottom:1px solid var(--line-soft)}
  .scope-row{grid-template-columns:78px 1fr;padding:20px}
  .scope-number{font-size:24px}
  .cta-panel{padding:25px 20px}
  .cta-row{flex-direction:column;align-items:stretch}
  .rs-head{grid-template-columns:1fr;gap:18px}
  .rs-tallies{grid-template-columns:1fr}
  .rs-tally{border-right:0;border-bottom:1px solid var(--line-soft)}
  .finding > summary{grid-template-columns:auto minmax(0,1fr);row-gap:9px}
  .f-tag{grid-column:2}
  .group-head{grid-template-columns:auto 1fr;gap:12px}
  .group-label{grid-column:2;grid-row:2}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- site search ------------------------------------------------
   The magnifier sits between the nav links and the call to action, and opens
   a panel over the page. A panel rather than a field in the bar: the nav has
   no room for one at 1100px, and results need space to show what they are. */
.nav-search{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;border:1px solid transparent;border-radius:10px;
  background:none;color:var(--text-dim);cursor:pointer;
  transition:color .16s ease,background .16s ease,border-color .16s ease}
.nav-search svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round}
.nav-search:hover{color:var(--text);background:var(--surface);border-color:var(--line)}
.nav-search:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.s-panel[hidden]{display:none}
.s-panel{position:fixed;inset:0;z-index:120}
.s-scrim{position:absolute;inset:0;background:rgba(11,18,32,.42);
  backdrop-filter:blur(2px);animation:s-fade .14s ease-out}
.s-box{position:relative;margin:10vh auto 0;width:min(640px,calc(100% - 32px));
  background:var(--bg);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 70px rgba(11,18,32,.28);overflow:hidden;
  animation:s-rise .16s ease-out}
@keyframes s-fade{from{opacity:0}to{opacity:1}}
@keyframes s-rise{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .s-scrim,.s-box{animation:none}
}

.s-field{display:flex;align-items:center;gap:11px;padding:14px 14px 13px 16px;
  border-bottom:1px solid var(--line-soft)}
.s-mag{flex:0 0 auto;width:19px;height:19px;fill:none;stroke:var(--text-faint);
  stroke-width:1.9;stroke-linecap:round}
.s-field input{flex:1 1 auto;min-width:0;border:0;outline:0;background:none;
  font:500 16.5px/1.4 inherit;color:var(--text);padding:4px 0}
.s-field input::placeholder{color:var(--text-faint);font-weight:400}
.s-field input::-webkit-search-cancel-button{display:none}
.s-close{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);
  color:var(--text-faint);border-radius:7px;padding:4px 8px;cursor:pointer;
  font:600 11.5px/1 'IBM Plex Sans',sans-serif;letter-spacing:.04em}
.s-close:hover{color:var(--text);border-color:var(--line-strong)}

.s-list{list-style:none;margin:0;padding:6px;max-height:min(58vh,440px);overflow-y:auto}
.s-row a{display:flex;align-items:flex-start;gap:12px;padding:10px 11px;border-radius:10px;
  text-decoration:none;color:inherit}
.s-row.on a{background:var(--accent-soft)}
.s-ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;background:var(--surface-2);
  border:1px solid var(--line-soft);margin-top:1px}
.s-ico svg{width:15px;height:15px;fill:none;stroke:var(--text-faint);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.s-row.on .s-ico{background:#fff;border-color:var(--accent-line)}
.s-row.on .s-ico svg{stroke:var(--accent-ink)}
.s-body{flex:1 1 auto;min-width:0}
.s-title{display:block;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-desc{display:block;font-size:12.8px;line-height:1.45;color:var(--text-dim);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-tag{flex:0 0 auto;align-self:center;font:600 10.5px/1 'IBM Plex Sans',sans-serif;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);
  background:var(--surface);border:1px solid var(--line-soft);border-radius:999px;
  padding:5px 8px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-row.on .s-tag{color:var(--accent-ink);border-color:var(--accent-line);background:#fff}
.s-list mark{background:#FDF0C4;color:inherit;border-radius:3px;padding:0 1px}
.s-row.on mark{background:#FFE9A8}

.s-hint{padding:12px 12px 4px;font:600 11px/1 'IBM Plex Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.s-suggs{display:flex;flex-wrap:wrap;gap:8px;padding:10px 11px 12px}
.s-sugg{border:1px solid var(--line);background:var(--bg);
  border-radius:999px;padding:6px 12px;font-size:13px;color:var(--text-dim);cursor:pointer}
.s-sugg:hover{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.s-empty{padding:18px 14px 20px}
.s-empty strong{display:block;font-size:14.5px;margin-bottom:5px}
.s-empty span{display:block;font-size:13.5px;color:var(--text-dim);line-height:1.6}
.s-empty a{color:var(--accent-ink)}
.s-status{margin:0;padding:9px 16px;border-top:1px solid var(--line-soft);
  background:var(--surface);font-size:12px;color:var(--text-faint)}

html.s-open{overflow:hidden}

@media (max-width:760px){
  .s-box{margin-top:0;width:100%;height:100%;border:0;border-radius:0}
  .s-list{max-height:calc(100vh - 118px)}
  .s-tag{display:none}
  .s-title,.s-desc{white-space:normal}
  .s-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* ---------- homepage dashboard ----------------------------------------
   Two running totals under the hero. The numbers count up from zero when the
   band comes into view, and the bar under each panel is the same figures as a
   proportion, so the shape of a result reads before any number is. */
/* The panel sits inside the hero with no background of its own, so the
   photograph carries on behind it. The tiles are frosted rather than solid
   for the same reason: enough contrast to read a number on, not so much that
   the mountains stop at the panel edge. */
.hero-dash{position:relative;margin-top:64px;padding-top:30px}
.hero-dash[hidden]{display:none}
.hero-dash-head{font-size:clamp(20px,2.2vw,26px);line-height:1.15;letter-spacing:-.03em;
  font-weight:600;margin:0 0 16px;color:#E6EDF6}
.dash-total{font-variant-numeric:tabular-nums;color:#7FCDEC;font-weight:700}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dash-panel{background:rgba(9,17,29,.52);border:1px solid rgba(150,180,215,.26);
  border-radius:14px;padding:18px 20px 16px;backdrop-filter:blur(10px) saturate(120%)}
.dash-panel-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.dash-panel-head h3{margin:0;font-size:17px;letter-spacing:-.02em}
.dash-panel-head h3{color:#E6EDF6}
.dash-panel-head span{font:500 13px/1 'IBM Plex Sans',sans-serif;color:#9FB3C8}

.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.dash-stat{display:flex;flex-direction:column;gap:4px;padding:11px 12px 10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:10px}
.dash-stat strong{font-size:clamp(20px,2.2vw,25px);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.05;color:#F2F6FB}
.dash-stat span{font:600 11px/1.2 'IBM Plex Sans',sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:#9FB3C8}
.dash-stat.is-pass strong{color:#6EE7A8}
.dash-stat.is-fail strong{color:#F4A0A0}
.dash-stat.is-error strong{color:#E8C170}

.dash-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.08);margin-bottom:11px}
.dash-bar .seg{width:0}
/* the figures fade in with the count so the zeros they start from are not
   the first thing read */
.hero-dash:not(.is-ready) .dash-total,
.hero-dash:not(.is-ready) .dash-stat strong{opacity:.35}
.dash-total,.dash-stat strong{transition:opacity .4s ease}
.seg-pass{background:#3DBE84}
.seg-warn{background:#D9A441}
.seg-fail{background:#D96A6A}
.seg-error{background:#5C6B80}

.dash-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0;
  font-size:12px;color:#9FB3C8}
.dash-legend .key{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:-8px}
.key-pass{background:#3DBE84}
.key-warn{background:#D9A441}
.key-fail{background:#D96A6A}
.key-error{background:#5C6B80}

@media (max-width:860px){
  .dash-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero-dash{margin-top:48px;padding-top:26px}
  .dash-stats{grid-template-columns:repeat(2,1fr)}
}


/* the line under a scan box: the one acceptance the site asks for */
.scan-terms{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-faint);max-width:56ch}
.home-hero .scan-terms{color:#9FB3C8}
.scan-terms a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.home-hero .scan-terms a{color:#BDD3EC}

/* ---------- privacy and terms ----------------------------------------- */
.legal-head{padding:64px 0 34px;background:var(--surface);border-bottom:1px solid var(--line-soft)}
.legal-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font:700 11px/1 'IBM Plex Sans',sans-serif;letter-spacing:.14em;color:var(--accent-ink)}
.legal-eyebrow span{flex:0 0 22px;height:1px;background:var(--accent-line)}
.legal-head h1{font-size:clamp(32px,4.2vw,44px);line-height:1.08;letter-spacing:-.035em;margin:0 0 14px}
.legal-lede{font-size:17.5px;line-height:1.65;color:var(--text-dim);margin:0;max-width:60ch}
.legal-date{margin:18px 0 0;font:500 13px/1 'IBM Plex Sans',sans-serif;color:var(--text-faint)}

.legal-body{padding:40px 0 70px}
.legal-body h2{font-size:23px;line-height:1.22;letter-spacing:-.025em;margin:40px 0 12px;color:var(--text)}
.legal-body p{font-size:16.5px;line-height:1.78;color:#22303F;margin:0 0 18px;max-width:72ch}
.legal-body ul{margin:0 0 20px;padding-left:22px;font-size:16.5px;line-height:1.75;color:#22303F;max-width:72ch}
.legal-body li+li{margin-top:9px}
.legal-body strong{color:var(--text)}
.legal-body a{color:var(--accent-ink)}
.legal-body .mono{font-family:'IBM Plex Mono',monospace;font-size:14.5px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.legal-summary{margin:0 0 12px;padding:22px 26px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 12px 12px 0}
.legal-summary h2{margin:0 0 12px;font-size:17px;letter-spacing:-.015em}
.legal-summary ul{margin:0;font-size:15.5px;line-height:1.7}

/* the row of legal links the blog and tool footers carry */
.footer-legal{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:0 22px;font-size:13px}
.footer-legal a{color:var(--text-dim);text-decoration:none}
.footer-legal a:hover{color:var(--text);text-decoration:underline}
.site-footer .footer-legal a{color:#9FB3C8}
.site-footer .footer-legal a:hover{color:#F6F8FB}

/* the consent banner replaces the old notice: a real choice, two buttons of
   equal weight, and nothing loads until one of them is pressed */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:rgba(9,17,29,.96);border-top:1px solid rgba(150,180,215,.26);
  backdrop-filter:blur(12px) saturate(130%);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.consent-bar.is-in{transform:none}
.consent-bar.is-out{transform:translateY(100%)}
.consent-inner{max-width:1180px;margin:0 auto;padding:16px 32px;
  display:flex;align-items:center;gap:28px}
.consent-text{flex:1 1 auto}
.consent-text p{margin:0;font-size:13.5px;line-height:1.6;color:#C6D3E2}
.consent-text strong{color:#F2F6FB;font-weight:600}
.consent-text a{color:#8FC2FF}
.consent-sub{margin-top:4px !important;color:#9FB3C8 !important;font-size:12.5px !important}
.consent-actions{flex:0 0 auto;display:flex;gap:10px}
.consent-btn{border-radius:8px;padding:10px 20px;font-size:13.5px;font-weight:600;
  cursor:pointer;border:1px solid transparent}
.consent-no{border-color:rgba(150,180,215,.4);background:rgba(255,255,255,.07);color:#F2F6FB}
.consent-no:hover{background:rgba(255,255,255,.13);border-color:rgba(150,180,215,.6)}
.consent-yes{background:#079CD7;color:#06111F}
.consent-yes:hover{background:#38B4E6}
.consent-btn:focus-visible{outline:2px solid #5AC4EE;outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .consent-bar{transition:none} }
@media (max-width:760px){
  .consent-inner{flex-direction:column;align-items:stretch;gap:14px;padding:16px 20px}
  .consent-actions{gap:10px}
  .consent-btn{flex:1 1 0}
}

/* ---------- waiting for a report ----------
   Ten to thirty seconds of other people's DNS and TLS. The panel names the
   checks that are running and counts real seconds. The sweep down the list is
   decoration: no row here is a result, and none of them claims to be. */
.scanning{padding:30px 0 46px;scroll-margin-top:96px}
.scanning[hidden]{display:none}
.scanning-card{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:linear-gradient(150deg,#0C1524 0%,#111C2C 100%);
  padding:28px 30px 26px;box-shadow:var(--shadow-md)}
.scanning-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(to right,rgba(120,150,190,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(120,150,190,.10) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(120% 90% at 82% 0%,black 12%,transparent 78%)}
.scanning-beam{position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(56,180,230,.14) 45%,rgba(127,205,236,.28) 50%,
    rgba(56,180,230,.14) 55%,transparent 100%);
  animation:scanBeam 3.4s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes scanBeam{0%{transform:translateY(-180px)}100%{transform:translateY(520px)}}

.scanning-head{position:relative;display:flex;align-items:flex-start;gap:14px;
  padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid rgba(150,180,215,.18)}
.scanning-who{flex:1 1 auto;min-width:0}
.scanning-pulse{flex:0 0 auto;width:11px;height:11px;margin-top:7px;border-radius:50%;
  background:#38B4E6;box-shadow:0 0 0 0 rgba(56,180,230,.6);animation:scanPulse 1.7s ease-out infinite}
@keyframes scanPulse{
  0%{box-shadow:0 0 0 0 rgba(56,180,230,.55)}
  70%{box-shadow:0 0 0 13px rgba(56,180,230,0)}
  100%{box-shadow:0 0 0 0 rgba(56,180,230,0)}}
.scanning-target{margin:0 0 6px;font-size:13px;color:#9FB3C8;word-break:break-all}
.scanning-target b{color:#EAF3FA;font-weight:600}
.scanning-target i{display:inline-block;width:8px;height:15px;margin-left:3px;vertical-align:-2px;
  background:#38B4E6;animation:scanCaret 1.1s steps(1) infinite}
@keyframes scanCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.scanning h2{margin:0;font-size:clamp(19px,2.2vw,24px);letter-spacing:-.025em;color:#F2F7FC}
.scanning-clock{flex:0 0 auto;margin:0;font-size:13px;color:#9FB3C8;font-variant-numeric:tabular-nums}
.scanning-clock b{font-size:25px;font-weight:600;color:#7FCDEC;letter-spacing:-.02em}

.scanning-cols{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.scanning-label{margin:0 0 12px;font:700 11px/1.4 'IBM Plex Sans',sans-serif;letter-spacing:.11em;color:#8DA3BA}
.scanning-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.scanning-list li{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13.5px;
  color:#8FA5BC;animation:scanRow 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * .11s)}
@keyframes scanRow{0%,100%{color:#8FA5BC}18%{color:#F2F7FC}}
.scanning-dot{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:#3B5168;
  animation:scanDot 2.6s ease-in-out infinite;animation-delay:inherit}
@keyframes scanDot{0%,100%{background:#3B5168;transform:scale(1)}
  18%{background:#38B4E6;transform:scale(1.55)}}

.scanning-note{position:relative;margin:24px 0 0;padding-top:18px;font-size:13px;line-height:1.65;
  color:#A9BDD2;border-top:1px solid rgba(150,180,215,.16);max-width:78ch}

@media (max-width:700px){
  .scanning-card{padding:22px 20px}
  .scanning-cols{grid-template-columns:1fr;gap:20px}
  .scanning-head{flex-wrap:wrap}
  .scanning-clock{width:100%;order:3}
}
@media (prefers-reduced-motion:reduce){
  .scanning-beam{display:none}
  .scanning-list li,.scanning-dot,.scanning-pulse,.scanning-target i{animation:none}
  .scanning-dot{background:#38B4E6}
}