/* Same Navy + Sky Blue + White palette as the concise landing page —
   see tlsbreak/index.html for the accessibility rationale
   (the accent is #0071e3, not the raw #00A8E8 the color-combination
   guide suggested, since #00A8E8 fails WCAG AA contrast on white). */
:root{
  --bg:#fff;--bg-subtle:#f3f6fb;--ink:#12123a;--muted:#5a5a6e;--muted-2:#6b6b78;
  --blue:#0071e3;--blue-hover:#0059b3;--line:rgba(18,18,58,.12);
  --radius-lg:22px;--radius-md:16px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;background:var(--bg)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
section{padding:clamp(48px,7vw,88px) 0}
.section-subtle{background:var(--bg-subtle)}

/* Deliberately just brand + nav — no audience strip. That content
   (the "Built for..." audience strip) is the commercial page's pitch, not
   this page's job (proving the lab is technically real); repeating it
   here only ate into this page's own header space for no benefit.

   header itself stays full-bleed (the border-bottom line should span the
   whole viewport), but its CONTENT is capped by the same .wrap max-width
   as the page body — otherwise, past ~1080px+padding, the logo/nav (which
   used to hug the true screen edge via the header's own padding) drift
   away from the body content's left/right edges, which are capped and
   centered. .header-inner supplies the actual flex layout. */
header{padding:clamp(12px,2.2vh,18px) 0;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-size:15px}
.brand-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;height:2.1em;width:2.1em;background:var(--blue);color:#fff;border-radius:.4em;overflow:hidden;font-family:inherit;font-weight:800}
.badge-letter{font-size:.8em;line-height:1;height:1em;display:flex;align-items:center;justify-content:center}
.badge-bar{width:1em;height:.115em;background:#fff;margin:.12em 0;flex-shrink:0}
.brand-stack{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.16em;line-height:1}
.brand-word{font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--blue);font-size:.72em;line-height:1;white-space:nowrap}
.brand-word .cap{font-size:1.2em}
.hnav{display:flex;align-items:center;gap:18px;white-space:nowrap}
/* Fixed width + left-align, same value on the concise page: "How it
   works →" and "← Overview" are different lengths, so right-aligning
   each to its own natural width put their LEFT edges at different x
   positions between the two pages — a click landing on, say, the "w" in
   "works" would land on the "O" in "Overview" after navigating, since
   the shorter text's start sits further right. Pinning both to the same
   left-aligned box (sized to the longer phrase) keeps that x position
   consistent across the click-through. */
.hnav-link{font-size:13px;font-weight:600;color:var(--muted-2);width:100px;display:inline-block;text-align:left}
.hnav-link:hover{color:var(--blue)}
.navcta{border:1.5px solid var(--line);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--ink)}
.navcta:hover{border-color:var(--blue);color:var(--blue)}

.kicker{color:#0066cc;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;margin-bottom:14px}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;text-align:center;color:var(--ink);margin:0 auto 16px;max-width:760px}
.sub{text-align:center;font-size:clamp(1rem,1.5vw,1.15rem);color:var(--muted);max-width:660px;margin:0 auto 44px}

.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}

.cve-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cve-pill{font-size:13px;background:var(--bg-subtle);color:var(--muted);padding:8px 16px;border-radius:999px}
.cve-pill b{color:var(--ink);font-weight:700}

.families-figure{background:var(--bg-subtle);border-radius:var(--radius-lg);padding:clamp(18px,4vw,36px)}
.fam-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:var(--radius-md);padding:24px 22px}
.fam-icon{flex-shrink:0;width:30px;height:30px;color:var(--blue);display:flex;align-items:center;justify-content:center}
.fam-icon svg{width:22px;height:22px}
.fam-body{min-width:0}
.fam-card h3{font-size:1.02rem;font-weight:700;color:var(--ink);margin-bottom:7px}
.fam-compress{color:var(--muted);font-size:.88rem;line-height:1.5}

.cta-row{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:13px 26px;font-size:15.5px;font-weight:600}
.btn:hover{background:var(--blue-hover)}
.secondary{color:#0066cc;font-size:15.5px;font-weight:600}
.secondary:hover{color:var(--blue-hover)}

.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-size:1.05rem;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted-2);font-size:1.4rem;font-weight:300;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:14px;color:var(--muted);font-size:.97rem;line-height:1.65}

@media(max-width:700px){
  .grid--2{grid-template-columns:1fr}
  .hnav-link{display:none}
}

.site-footer{border-top:1px solid var(--line);margin-top:48px;padding:28px 0 36px;font-size:13px;color:var(--muted-2,#6b6b78)}
.site-footer .foot-inner{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.site-footer a{color:var(--blue);font-weight:600}
.site-footer a:hover{color:var(--blue-hover)}
.site-footer .foot-note{flex-basis:100%;font-size:12px}
.ctr{text-align:center}