:root{
  --green:#51BC56; --green-dk:#3ea143; --navy:#1C2A3B; --navy-2:#3A4F66;
  --ink:#1C2A3B; --muted:#5c6b7d; --line:#e1e8ed; --bg:#ffffff; --bg-2:#FAFBFC;
  --amber:#c8860a; --red:#c8442f;
  --radius:12px; --shadow:0 1px 2px rgba(28,42,59,.06),0 8px 24px rgba(28,42,59,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6}
h1,h2,h3{font-family:"Space Grotesk",Inter,-apple-system,Segoe UI,sans-serif;line-height:1.2;margin:0 0 .5em}
h1{font-size:2.4rem;letter-spacing:-.02em}
h2{font-size:1.5rem;margin-top:0}
h3{font-size:1.1rem}
a{color:var(--green-dk);text-underline-offset:3px}
a:hover{color:var(--navy)}
main{max-width:1000px;margin:0 auto;padding:0 20px 64px}
header.site{max-width:1000px;margin:0 auto;padding:20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
header.site .brand{display:flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;font-size:1.05rem}
header.site .brand strong{font-family:"Space Grotesk",sans-serif}
header.site .dot{color:var(--green)}
header.site nav a{margin-left:18px;font-size:.95rem;color:var(--navy-2);text-decoration:none}
header.site nav a:hover{color:var(--green-dk);text-decoration:underline}
/* the real site mark, self-hosted; 208px source rendered at 44px = retina-safe */
header.site .brand-logo{height:44px;width:auto;display:block;flex:0 0 auto}
header.site .brand-label{font-weight:500}
footer.site{border-top:1px solid var(--line);max-width:1000px;margin:0 auto;padding:24px 20px 60px;color:var(--muted);font-size:.9rem}
.small{font-size:.85rem;color:var(--muted);margin:.25em 0}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* hero */
.hero{padding:24px 0 8px}
.hero.narrow{max-width:720px}
.lede{font-size:1.15rem;color:var(--navy-2);max-width:44em}
#audit-form{display:flex;gap:10px;margin:24px 0 8px;flex-wrap:wrap}
#audit-form input{flex:1 1 320px;min-width:0;padding:14px 16px;font:inherit;border:2px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink)}
#audit-form input:focus{outline:none;border-color:var(--green)}
button,#audit-form button{background:var(--green);color:#fff;border:0;border-radius:var(--radius);
  padding:14px 22px;font:600 1rem/1 Inter,sans-serif;cursor:pointer;font-family:inherit}
button:hover{background:var(--green-dk)}
button[disabled]{opacity:.55;cursor:default}
.email-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.email-row label{font-size:.9rem;color:var(--navy-2)}
.email-row .opt{color:var(--muted)}
.email-row input{padding:10px 12px;font:inherit;font-size:.95rem;border:1px solid var(--line);border-radius:8px;min-width:220px}
.email-row .small{flex:1 1 100%;margin:0}
.err{color:var(--red);font-weight:500;background:#fdf1ef;border:1px solid #f3cdc5;padding:10px 14px;border-radius:8px}

/* status */
.status-box{display:flex;gap:16px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:12px 0 24px}
.status-line{margin:0;font-weight:600}
.spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--green);animation:spin 1s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* category cards */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:16px 0 32px}
.cat-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.cat-card h3{margin-bottom:.3em}
.w{font-size:.8rem;color:var(--muted);font-family:Inter,sans-serif;font-weight:500}
.how{color:var(--navy-2)}
.what{border-top:1px solid var(--line);margin-top:40px;padding-top:28px}

/* report */
.report-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}
.overall{display:flex;align-items:baseline;gap:6px;padding:14px 22px;border-radius:var(--radius);color:#fff;background:var(--navy)}
.overall.good{background:var(--green)} .overall.okay{background:var(--amber)} .overall.bad{background:var(--red)}
.overall .big{font:700 3rem/1 "Space Grotesk",sans-serif}
.overall .outof{opacity:.8;font-size:.9rem}
.report-meta h1{font-size:1.6rem;margin-bottom:.15em}
.report-meta .target{margin:0;font-weight:500;word-break:break-all}
.permalink{font-size:.85rem;color:var(--muted);word-break:break-all;margin:.4em 0 0}
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.gauge{border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:center}
.gauge .num{font:700 2.2rem/1 "Space Grotesk",sans-serif}
.gauge .num.good{color:var(--green-dk)} .gauge .num.okay{color:var(--amber)} .gauge .num.bad{color:var(--red)}
.gauge .lab{font-weight:600;margin:.2em 0}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:0 0 18px;box-shadow:var(--shadow)}
.card h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.score-chip{font:600 .8rem/1 Inter,sans-serif;padding:5px 9px;border-radius:99px;background:var(--bg-2);color:var(--navy-2)}
.score-chip.good{background:#eaf7eb;color:var(--green-dk)} .score-chip.okay{background:#fdf3e0;color:var(--amber)} .score-chip.bad{background:#fdeeeb;color:var(--red)}
.pill{display:inline-block;font:600 .72rem/1 Inter,sans-serif;padding:5px 8px;border-radius:99px;white-space:nowrap}
.pill.pass{background:#eaf7eb;color:var(--green-dk)}
.pill.warn{background:#fdf3e0;color:var(--amber)}
.pill.fail{background:#fdeeeb;color:var(--red)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
.results td,.checklist td,.checklist th,.vitals td{border-top:1px solid var(--line);padding:10px 8px;vertical-align:top;text-align:left}
.results tr:first-child td,.checklist thead th{border-top:0}
.results td:first-child{width:104px} .c-w{width:56px;color:var(--muted);text-align:right !important}
.measured{margin:.2em 0 0} .fix{color:var(--navy-2)}
.measured,.fix,.fixes li,.fixes li *{overflow-wrap:anywhere;word-break:break-all;min-width:0}
.fixes li strong,.fixes li .pill{word-break:normal}
.results td,.checklist td{overflow-wrap:anywhere}
.vitals td:nth-child(odd){color:var(--muted);width:23%}
.fixes li{margin-bottom:14px}
.raw{font-size:.85rem;padding-left:18px;max-height:420px;overflow:auto}
.raw li{margin-bottom:6px;word-break:break-word}
.raw code{background:var(--bg-2);padding:1px 5px;border-radius:4px;font-size:.78rem}
details summary{cursor:pointer;font-weight:500;padding:6px 0}
.media{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.media-col{min-width:0}
.media figure{margin:0 0 16px}
.media img,.media video{max-width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);display:block}
.media video{width:100%;max-height:560px;object-fit:contain}
.media figure img{width:auto;margin:0 auto}
.media .foldshot img{max-height:560px;object-fit:contain}
.media .fullshot img{max-height:560px;width:100%;object-fit:cover;object-position:top}
.media figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}
.narrative p{max-width:46em}
.cta-card{background:var(--bg-2)}
.prose h2{margin-top:32px}
.checklist{margin-bottom:28px}
.checklist tfoot td{border-top:2px solid var(--line);font-weight:600}
@media (max-width:640px){
  h1{font-size:1.9rem} body{font-size:16px}
  .overall .big{font-size:2.4rem}
  .results td:first-child{width:90px}
}
.card.notice{background:#fdf3e0;border-color:#f0dcb4}
.card.notice h2{color:var(--amber)}

/* ads — reserve the space up front so the page never jumps when a unit fills.
   `display:block` lives here rather than in a style attribute on the <ins>. */
.ad-unit{display:block;margin:28px 0;padding:10px 0;min-height:300px;text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.ad-unit .ad-label{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.ad-unit ins.adsbygoogle{display:block;min-height:250px;width:100%}
@media (max-width:600px){.ad-unit{min-height:280px}.ad-unit ins.adsbygoogle{min-height:230px}}