/* =============================================================
   Sample-audit proof page (/sample-audit). Self-contained styles.
   Extracted from the asset's inline <style> so it complies with the
   site CSP (style-src 'self'; no unsafe-inline). Brand webfonts come
   from css/fonts.css (linked alongside this file); the scorecard bar
   fills use width/tone classes instead of inline style= attributes.

   NOTE: the base primitives below — the *{box-sizing} reset, the body
   rule, and .eyebrow/.eyebrow.blue — are INTENTIONALLY duplicated from
   base.css/home.css. This page is self-contained and CSP-isolated: it
   deliberately links only fonts.css + this file for its component styles,
   so it cannot rely on base.css being present. Keep these duplicated rules
   in sync with base.css if the brand baseline ever changes. Do not delete.
   ============================================================= */
:root{
  --cream:#f7f4ee; --paper:#fbfaf7; --white:#fff; --ink:#111; --ink-2:#37332d;
  --ink-3:#4a453e; --muted:#65615b; --line:rgba(17,17,17,0.11);
  --blue:#2a6df4; --green:#0e8a4a; --rust:#ad5425; --danger:#d13030;
  --display:"Fraunces",Georgia,serif; --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.5;}
.wrap{max-width:1000px;margin:0 auto;padding:48px 24px 72px;}
.eyebrow{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.eyebrow.blue{color:var(--blue);}
em{font-style:italic;}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px;}
.page-head h1{font-family:var(--display);font-weight:650;font-size:clamp(32px,5vw,52px);line-height:1;letter-spacing:0;margin:10px 0 0;max-width:620px;}
.sample-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;}
.sample-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rust);}

/* browser panel */
.panel{background:var(--white);border:1px solid var(--line);box-shadow:0 30px 70px rgba(17,17,17,.1);}
.bar{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-bottom:1px solid rgba(17,17,17,.1);}
.bar i{width:10px;height:10px;border-radius:50%;background:#d7d1c6;}
.bar em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--muted);}
.body{padding:28px;}

.report-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line);}
.report-top .mock-h{font-family:var(--display);font-weight:620;font-size:30px;margin:6px 0 0;}
.score{display:grid;place-items:center;width:88px;height:88px;border:1px solid var(--line);background:#f9fbff;flex:0 0 auto;}
.score strong{font-family:var(--display);font-size:34px;line-height:1;color:var(--green);}
.score span{font-size:12px;color:var(--muted);font-weight:600;margin-top:4px;}

.opp{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start;margin:22px 0;}
.opp-card{border:1px solid rgba(42,109,244,.18);background:#f5f8ff;padding:20px;}
.opp-card .v{font-family:var(--display);font-weight:650;font-size:46px;line-height:1;color:var(--blue);margin:6px 0;}
.opp-card .v small{font-size:16px;}
.opp-card p{margin:0;font-size:13px;color:var(--muted);}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-self:stretch;}
.kpi{border:1px solid var(--line);background:var(--white);padding:14px;}
.kpi span{display:block;font-size:12px;color:var(--muted);}
.kpi strong{display:block;font-family:var(--display);font-weight:620;font-size:24px;margin:4px 0;}
.kpi p{margin:0;font-size:12px;color:var(--muted);}

.sec-label{margin:24px 0 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.findings{display:grid;gap:8px;}
.finding{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;background:#f8f7f4;border:1px solid rgba(17,17,17,.08);}
.finding .dot{width:9px;height:9px;border-radius:50%;}
.finding strong{font-weight:600;font-size:14px;}
.finding em{font-style:normal;font-weight:800;font-size:14px;}
.d-danger{background:var(--danger);} .d-warn{background:var(--rust);} .d-info{background:var(--blue);}

.scorecard{margin-top:8px;display:grid;gap:10px;}
.row{display:grid;grid-template-columns:minmax(140px,200px) 1fr auto;gap:16px;align-items:center;}
.row span.lab{font-size:14px;}
.track{height:6px;background:#f0eee9;border-radius:3px;overflow:hidden;}
.fill{display:block;height:100%;border-radius:3px;}
.row span.num{font-size:13px;color:var(--muted);min-width:54px;text-align:right;font-variant-numeric:tabular-nums;}

/* Scorecard bar fills — one class per width value (.w-58 … .w-88).
   The site CSP (style-src 'self'; no inline style= / no style-src-attr
   'unsafe-inline') BLOCKS inline width (style="width:…" or style="--w:…"),
   so encoding each width as a class is the correct CSP-safe tradeoff. */
.fill.w-58{width:58%;} .fill.w-61{width:61%;} .fill.w-69{width:69%;}
.fill.w-78{width:78%;} .fill.w-82{width:82%;} .fill.w-88{width:88%;}
.fill.t-danger{background:var(--danger);} .fill.t-rust{background:var(--rust);} .fill.t-green{background:var(--green);}

.exports{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-3);background:var(--white);}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);}

.cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px;}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:13px 24px;border-radius:999px;background:var(--blue);color:#fff;font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 10px 26px rgba(42,109,244,.18);}
.cta-note{font-size:13px;color:var(--muted);max-width:320px;}
@media (max-width:720px){ .opp{grid-template-columns:1fr;} .kpis{grid-template-columns:1fr;} .report-top{flex-direction:column;} }