/* style.css — non-critical styles. Loaded asynchronously via the print/onload swap in ; safe to keep small and dependency-free. */ .section{padding:72px 0;background:#fff} .section.alt{background:var(--surface-2)} .section-h{font-size:clamp(1.4rem,2.8vw,2rem);letter-spacing:-.02em;margin:0 0 .35rem;font-weight:800;color:var(--ink)} .section-sub{color:var(--ink-3);margin:0 0 2.5rem;font-size:1.05rem;max-width:680px} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:880px){.cards{grid-template-columns:1fr;gap:16px}} .card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow)} .card .num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(91,108,255,.1);color:var(--brand);font-weight:700;margin-bottom:.75rem} .card h3{margin:.25rem 0 .5rem;font-size:1.1rem;letter-spacing:-.01em} .card p{margin:0;color:var(--ink-3);font-size:.96rem} .sample{background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow)} .sample-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem} .sample-head .grade{font-weight:700;font-size:1.15rem;color:var(--brand);background:rgba(91,108,255,.08);padding:6px 12px;border-radius:999px} .sample-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:36px} @media (max-width:880px){.sample-grid{grid-template-columns:1fr;gap:24px}} .sample-grid h4{font-size:1rem;margin:0 0 1rem;letter-spacing:-.01em} .check-list{list-style:none;padding:0;margin:0;display:grid;gap:.55rem} .check-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;padding:.5rem .25rem;border-bottom:1px dashed var(--border);font-size:.95rem} .check-list li:last-child{border-bottom:0} .check-list .score{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;background:var(--muted)} .dot.ok{background:var(--accent)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)} .rec-list{margin:0;padding-left:1.2rem;display:grid;gap:.75rem;color:var(--ink-3);font-size:.96rem} .rec-list strong{color:var(--ink);display:block;margin-bottom:.15rem} .rec-list code{background:var(--surface-2);padding:1px 6px;border-radius:4px;font-size:.85em;color:var(--ink-2)} .waitlist{background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:var(--shadow);max-width:720px} .waitlist .status{margin:.75rem 0 0;font-size:.92rem;min-height:1.2em} .waitlist .status.ok{color:var(--accent)} .waitlist .status.err{color:var(--bad)} .waitlist .consent{display:flex;align-items:flex-start;gap:.5rem;margin-top:.85rem;font-size:.9rem;color:var(--ink-3);cursor:pointer;line-height:1.4} .waitlist .consent input[type=checkbox]{margin-top:.2rem;width:1rem;height:1rem;flex:0 0 1rem;accent-color:var(--brand)} .waitlist .consent input[type=checkbox]:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px} .waitlist .proof{color:var(--muted)} .waitlist .proof:empty{display:none} .waitlist-thanks{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:20px 22px;color:var(--ink);max-width:720px} .waitlist-thanks strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:.35rem} .waitlist-thanks p{margin:.25rem 0 0;color:var(--ink-3);font-size:.95rem} .faq{display:grid;gap:14px;max-width:820px} .faq details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 18px} .faq details[open]{box-shadow:var(--shadow)} .faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--brand);font-size:1.4rem;line-height:1;transition:transform .2s ease} .faq details[open] summary::after{content:"−"} .faq p{margin:.75rem 0 0;color:var(--ink-3);font-size:.97rem} footer{padding:48px 0 32px;background:#fff;border-top:1px solid var(--border);margin-top:0} .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap} .foot-nav{display:flex;gap:1.25rem} .foot-nav a{color:var(--ink-3);font-size:.95rem} .muted{color:var(--muted)} /* ----- Audit result card (audit.html) ----- */ .result-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow);margin-top:24px} .result-head{display:flex;align-items:center;gap:24px;padding-bottom:1.5rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem;flex-wrap:wrap} .ring{width:128px;height:128px;flex:0 0 128px;border-radius:50%;background:conic-gradient(var(--ring-color) 0 var(--ring-deg),#e5e7ef var(--ring-deg) 360deg);display:grid;place-items:center;position:relative} .ring::before{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%} .ring>span{position:relative;font-weight:800;font-size:1.75rem;color:var(--ink);font-variant-numeric:tabular-nums} .result-meta h2{margin:0 0 .25rem;font-size:1.3rem;letter-spacing:-.01em;word-break:break-word} .result-meta .url{color:var(--ink-3);font-size:.92rem;margin:0 0 .75rem;word-break:break-word} .grade-pill{display:inline-block;padding:6px 14px;border-radius:999px;font-weight:700;font-size:1.05rem;background:rgba(91,108,255,.1);color:var(--brand)} .grade-pill.grade-A,.grade-pill.grade-B{background:rgba(16,185,129,.12);color:#047857} .grade-pill.grade-C{background:rgba(245,158,11,.14);color:#92400e} .grade-pill.grade-D,.grade-pill.grade-F{background:rgba(239,68,68,.12);color:#b91c1c} .result-meta .blurb{margin:.75rem 0 0;color:var(--ink-3);font-size:.96rem} .result-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px} @media (max-width:880px){.result-grid{grid-template-columns:1fr;gap:24px}} .result-grid h3{font-size:1.05rem;margin:0 0 1rem;letter-spacing:-.01em} .rec-list{counter-reset:rec} .rec-list li{counter-increment:rec;padding-left:1.75rem;position:relative} .rec-list li::before{content:counter(rec);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:.78rem;font-weight:700;display:grid;place-items:center;line-height:1} .error-card{background:#fff;border:1px solid var(--border);border-left:4px solid var(--bad);border-radius:12px;padding:18px 22px;color:var(--ink);margin-top:24px;display:flex;gap:14px;align-items:flex-start} .error-card svg{width:24px;height:24px;flex:0 0 24px;color:var(--bad);margin-top:2px} .error-card h3{margin:0 0 .25rem;font-size:1rem} .error-card p{margin:0;color:var(--ink-3);font-size:.95rem} .loading{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 22px;margin-top:24px;color:var(--ink-3)} .spinner{width:22px;height:22px;border:2.5px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;flex:0 0 22px} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}} /* visually hidden for screen-reader-only labels we want to keep available */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}