/* Clear Ads PPC Auditor — dummy mockup styles */
:root {
  --navy: #25145F;
  --purple: #4F41F5;
  --ink: #1A1A1A;
  --off: #F8F8F8;
  --white: #FFFFFF;
  --muted: #5B5870;
  --line: #E4E2EE;
  --pale: #F1EFFE;
  --good: #137A4B;  --good-bg: #E3F5EC;
  --par: #7A5B00;   --par-bg: #FCF3D9;
  --bad: #B42318;   --bad-bg: #FDE8E6;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(37,20,95,.06), 0 8px 24px rgba(37,20,95,.06);
  --head: "Poppins", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--off); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--navy); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--purple); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header / footer ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.logo img { height: 34px; width: auto; display: block; }
.nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.site-footer { padding: 32px 0 48px; color: var(--muted); font-size: .875rem; border-top: 1px solid var(--line); margin-top: 64px; background: var(--white); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.site-footer img { height: 26px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--head); font-weight: 600; font-size: .9rem; padding: 11px 18px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, transform .15s, box-shadow .15s; white-space: nowrap; }
.btn:focus-visible { outline: 3px solid rgba(79,65,245,.35); outline-offset: 2px; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: #3E31DB; box-shadow: 0 6px 18px rgba(79,65,245,.3); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #1B0E4A; }
.btn-ghost { background: var(--white); color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--purple); color: var(--purple); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Badges ---------- */
.sample-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--pale); color: var(--purple); font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px dashed rgba(79,65,245,.5); white-space: nowrap; }
.sample-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.eyebrow { font-family: var(--head); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); margin-bottom: 8px; }
.rating { display: inline-flex; align-items: center; gap: 6px; font-family: var(--head); font-weight: 600; font-size: .85rem; padding: 4px 12px; border-radius: 999px; }
.rating svg { width: 14px; height: 14px; }
.r-good { background: var(--good-bg); color: var(--good); }
.r-par { background: var(--par-bg); color: var(--par); }
.r-bad { background: var(--bad-bg); color: var(--bad); }

/* ---------- Landing ---------- */
.hero { padding: 72px 0 56px; background:
  radial-gradient(600px 400px at 95% -10%, rgba(79,65,245,.14), transparent 70%),
  radial-gradient(500px 300px at -5% 110%, rgba(37,20,95,.08), transparent 70%), var(--off); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero .lede { font-size: 1.15rem; color: var(--muted); max-width: 34em; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 24px; padding: 0; list-style: none; font-size: .92rem; color: var(--navy); font-weight: 500; }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { width: 18px; height: 18px; color: var(--purple); }

.drop { background: var(--white); border: 2px dashed #C9C4F2; border-radius: 20px; padding: 40px 28px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; box-shadow: var(--shadow); position: relative; }
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--purple); background: #FBFAFF; outline: none; }
.drop.over { transform: scale(1.01); }
.drop-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; background: var(--pale); display: grid; place-items: center; color: var(--purple); }
.drop-icon svg { width: 30px; height: 30px; }
.drop h2 { font-size: 1.3rem; margin-bottom: 6px; }
.drop .files { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 20px; padding: 0; list-style: none; }
.drop .files li { font-size: .8rem; background: var(--off); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--navy); }
.drop .files li em { font-style: normal; color: var(--muted); }
.drop-note { margin-top: 16px; font-size: .82rem; color: var(--muted); }
.drop.loading .drop-body { opacity: .25; }
.drop-loading { display: none; position: absolute; inset: 0; place-items: center; align-content: center; gap: 12px; font-family: var(--head); font-weight: 600; color: var(--navy); }
.drop.loading .drop-loading { display: grid; }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--pale); border-top-color: var(--purple); animation: spin .8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.section { padding: 64px 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.step { background: var(--white); border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); }
.step-n { width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--head); font-weight: 600; margin-bottom: 14px; }
.privacy-band { background: var(--navy); color: #E9E6FF; border-radius: 20px; padding: 40px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.privacy-band h2 { color: #fff; }
.privacy-band p { margin: 0; }
.shield { width: 72px; height: 72px; border-radius: 20px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; }
.shield svg { width: 36px; height: 36px; }
.checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.check { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.check h3 { font-size: .98rem; }
.check p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ---------- Dashboard ---------- */
.dash-head { padding: 40px 0 8px; }
.dash-head .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.dash-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 6px; }
.meta { display: flex; gap: 8px 18px; flex-wrap: wrap; color: var(--muted); font-size: .92rem; align-items: center; }
.toc { display: flex; gap: 6px; overflow-x: auto; padding: 14px 0; margin-top: 16px; border-top: 1px solid var(--line); scrollbar-width: none; }
.toc a { font-size: .84rem; color: var(--navy); text-decoration: none; padding: 6px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); white-space: nowrap; font-weight: 500; }
.toc a:hover { border-color: var(--purple); color: var(--purple); }
.toc a b { color: var(--purple); font-family: var(--head); margin-right: 4px; }

.block { background: var(--white); border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); padding: 32px; margin-top: 28px; scroll-margin-top: 90px; }
.block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.block-head h2 { margin-bottom: 4px; }
.block-head p { margin: 0; color: var(--muted); max-width: 46em; }
.block-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--navy); color: #fff; font-family: var(--head); font-size: .85rem; font-weight: 600; margin-right: 10px; vertical-align: 3px; }

/* Section header: eyebrow + headline + criteria */
.sec-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sec-top .eyebrow { margin: 0; }
.headline { font-size: clamp(1.45rem, 2.8vw, 2.05rem); font-weight: 700; letter-spacing: -.015em; margin: 10px 0 6px; }
.headline.sm { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 6px; }
.criteria { color: var(--muted); font-size: .92rem; margin: 0 0 24px; max-width: 54em; }
.sec-split { height: 1px; background: var(--line); margin: 36px 0 28px; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; }
.kpi { border-radius: 14px; padding: 20px; background: var(--off); border: 1px solid var(--line); min-width: 0; }
.kpi .v { font-family: var(--head); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--navy); line-height: 1.1; letter-spacing: -.02em; }
.kpi .k { font-size: .86rem; color: var(--muted); margin-top: 6px; }
.kpi .s { font-size: .76rem; color: var(--muted); margin-top: 6px; opacity: .85; }
.kpi.dark { background: var(--navy); border-color: var(--navy); }
.kpi.dark .v { color: #fff; }
.kpi.dark .k, .kpi.dark .s { color: #C9C2F5; }
.kpi.wide .v { font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
.kpi .rating.big { font-size: 1.1rem; padding: 6px 16px; margin-top: 4px; }

/* Two signals: one card per brand */
.signals { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: linear-gradient(180deg, #FCFBFF, var(--white)); display: grid; gap: 18px; align-content: start; }
.bcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.bcard-head h3 { font-size: 1.3rem; margin: 0; }
.metric-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.metric-name { font-family: var(--head); font-weight: 600; color: var(--navy); font-size: .92rem; }
.metric-vals { margin-top: 4px; font-size: .95rem; }
.metric-vals b { font-family: var(--head); font-size: 1.35rem; color: var(--ink); }
.pshare { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--pale); border-radius: 12px; padding: 14px 16px; }
.pshare-v { font-family: var(--head); font-weight: 700; font-size: 1.9rem; color: var(--purple); line-height: 1; }
.takeaway { margin-top: 20px; display: flex; gap: 16px; align-items: center; background: var(--navy); color: #fff; border-radius: 12px; padding: 16px 20px; }
.takeaway p { margin: 0; }
.takeaway-lbl { flex: none; font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; background: var(--purple); padding: 5px 10px; border-radius: 6px; }

/* Callout */
.callout { margin-top: 22px; padding: 18px 22px; border-radius: 12px; background: var(--pale); border-left: 4px solid var(--purple); color: var(--navy); }
.callout p { margin: 0; }
.callout-lbl { font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); margin-bottom: 4px; }

/* Waste breakdown */
.breakdown { margin: 18px 0 4px; }
.bd-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.bd-a { background: var(--bad); }
.bd-b { background: #E8907F; }
.bd-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 10px; font-size: .9rem; color: var(--muted); }
.bd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.bd-legend b { color: var(--ink); }

.compare { margin: 12px 0 0; display: grid; gap: 8px; }
.cbar { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 10px; font-size: .88rem; }
.cbar .track { height: 10px; background: var(--off); border-radius: 0 4px 4px 0; }
.cbar .fill { height: 100%; border-radius: 0 4px 4px 0; }
.fill-brand { background: var(--purple); }
.fill-cat { background: #B8B3D9; }
.cbar .v { text-align: right; font-weight: 600; color: var(--ink); }
.split { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.split div { font-size: .84rem; color: var(--muted); }
.split b { color: var(--ink); font-weight: 600; }
.reading { margin-top: 20px; padding: 16px 20px; border-radius: 12px; background: var(--pale); color: var(--navy); border-left: 4px solid var(--purple); }
.reading strong { font-family: var(--head); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat { border-radius: 12px; padding: 16px 18px; background: var(--off); border: 1px solid var(--line); }
.stat .k { font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.stat .v { font-family: var(--head); font-weight: 700; font-size: 1.55rem; color: var(--navy); line-height: 1.15; }
.stat.dark { background: var(--navy); border-color: var(--navy); }
.stat.dark .k { color: #C9C2F5; }
.stat.dark .v { color: #fff; }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { background: var(--navy); color: #fff; font-family: var(--head); font-weight: 500; font-size: .78rem; letter-spacing: .03em; text-align: left; padding: 11px 14px; white-space: nowrap; }
td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr:nth-child(even) td { background: #FAF9FF; }
tbody tr:hover td { background: var(--pale); }
th.r, td.r { text-align: right; font-variant-numeric: tabular-nums; }
td.term { font-weight: 500; color: var(--navy); }
.tag { display: inline-block; font-size: .74rem; padding: 2px 8px; border-radius: 6px; background: var(--off); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.hi { color: var(--bad); font-weight: 600; }
.ok { color: var(--good); font-weight: 600; }
.tbl-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: .84rem; color: var(--muted); }
.sub-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 0 12px; flex-wrap: wrap; }
.sub-h h3 { margin: 0; }
.mini-bar { display: inline-block; height: 8px; border-radius: 0 3px 3px 0; background: var(--purple); vertical-align: middle; margin-right: 8px; }

.gauge { display: flex; gap: 6px; margin-top: 6px; }
.gauge span { flex: 1; height: 8px; border-radius: 4px; background: var(--line); }
.gauge.lvl-1 span:nth-child(1) { background: var(--good); }
.gauge.lvl-2 span:nth-child(-n+2) { background: #D99A00; }
.gauge.lvl-3 span { background: var(--bad); }
.gauge-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: 4px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.placements { display: grid; gap: 14px; }
.pl { display: grid; grid-template-columns: 130px 1fr 72px; gap: 12px; align-items: center; font-size: .9rem; }
.pl .track { height: 22px; background: var(--off); border-radius: 0 4px 4px 0; position: relative; }
.pl .fill { height: 100%; background: var(--purple); border-radius: 0 4px 4px 0; }
.pl .fill.worst { background: var(--bad); }
.pl .v { font-weight: 600; text-align: right; }
.pl-sub { grid-column: 2 / 4; font-size: .78rem; color: var(--muted); margin-top: -8px; }

.actions { list-style: none; padding: 0; margin: 0; counter-reset: a; display: grid; gap: 12px; }
.actions li { counter-increment: a; display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: start; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.actions li::before { content: counter(a); width: 36px; height: 36px; border-radius: 10px; background: var(--purple); color: #fff; display: grid; place-items: center; font-family: var(--head); font-weight: 700; }
.actions h3 { margin: 0 0 4px; }
.actions p { margin: 0; color: var(--muted); font-size: .92rem; }
.actions .impact { font-family: var(--head); font-weight: 600; color: var(--navy); font-size: .92rem; white-space: nowrap; text-align: right; }
.actions .impact span { display: block; font-family: var(--body); font-weight: 400; font-size: .76rem; color: var(--muted); }
.download-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; align-items: center; }
.help-card { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 28px; border-radius: 14px; background: var(--navy); color: #E2DEFF; }
.help-card h3 { color: #fff; font-size: 1.2rem; margin-bottom: 4px; }
.help-card p { margin: 0; }
.help-card .btn-primary { background: #fff; color: var(--navy); }
.help-card .btn-primary:hover { background: var(--pale); }

/* ---------- Share card ---------- */
.share-layout { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 36px; align-items: center; }
.score-card { width: 100%; max-width: 480px; background: #FFFFFF; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(37,20,95,.14); font-family: var(--body); }
.sc-top { padding: 26px 28px 20px; background: #FFFFFF; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.sc-top img { height: 30px; width: auto; display: block; }
.sc-top .sc-label { font-family: var(--head); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); text-align: right; line-height: 1.3; }
.sc-score { background: #25145F; color: #FFFFFF; padding: 26px 28px; display: flex; align-items: center; gap: 22px; }
.sc-ring { width: 108px; height: 108px; flex: none; position: relative; }
.sc-ring svg { width: 108px; height: 108px; display: block; }
.sc-ring .n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 2.1rem; color: #FFFFFF; line-height: 1; }
.sc-ring .n small { display: block; font-size: .7rem; font-weight: 500; color: #C9C2F5; text-align: center; margin-top: 2px; }
.sc-score h3 { color: #FFFFFF; font-size: 1.25rem; margin: 0 0 4px; }
.sc-score p { margin: 0; color: #C9C2F5; font-size: .88rem; }
.sc-rows { padding: 10px 28px 6px; }
.sc-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); gap: 12px; }
.sc-row:last-child { border-bottom: 0; }
.sc-row span:first-child { font-weight: 500; color: #1A1A1A; }
.sc-foot { background: #4F41F5; color: #FFFFFF; padding: 14px 28px; font-family: var(--head); font-weight: 600; font-size: .9rem; text-align: center; }
.share-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.share-btns .btn { padding: 10px 14px; }
.share-note { font-size: .84rem; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: .9rem; transition: transform .25s; z-index: 50; max-width: 90vw; }
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .share-layout, .two-col { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr 1fr; }
  .stats, .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .hero { padding: 40px 0; }
  .signals, .steps, .checks { grid-template-columns: 1fr; }
  .block { padding: 22px 18px; border-radius: 14px; }
  .privacy-band { grid-template-columns: 1fr; padding: 28px; }
  .actions li { grid-template-columns: 36px 1fr; }
  .actions .impact { grid-column: 2; text-align: left; }
  .nav .hide-sm { display: none; }
  .takeaway { flex-direction: column; align-items: flex-start; }
  .kpi { padding: 16px; }
  .pl { grid-template-columns: 100px 1fr 60px; }
  .sc-score { flex-direction: column; text-align: center; }
}

/* ---------- Print (PDF download) ---------- */
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; font-size: 11pt; }
  .site-header { position: static; border: 0; }
  .site-header .nav, .toc, .no-print, .share-btns, .download-row, .help-card .btn, .toast, .site-footer .links { display: none !important; }
  .block { box-shadow: none; border: 1px solid #ccc; break-inside: avoid-page; page-break-inside: avoid; padding: 18px; margin-top: 14px; }
  .block.allow-break { break-inside: auto; page-break-inside: auto; }
  tr { break-inside: avoid; }
  .score-card { box-shadow: none; }
  .signals, .two-col, .share-layout { grid-template-columns: 1fr 1fr; }
  .stats, .kpis { grid-template-columns: repeat(4, 1fr); }
  .callout, .takeaway, .kpi, .bcard { break-inside: avoid; }
  .sec-split { margin: 18px 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href]::after { content: ""; }
}

/* Upload + example audit */
.bench{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.bench label{flex:1;min-width:150px;font-size:13px;color:#555;display:flex;flex-direction:column;gap:4px}
.bench input{padding:9px 10px;border:1px solid #d6d8e4;border-radius:8px;font:inherit}
.upload-msg{color:#c0392b;font-size:14px;margin-top:10px;min-height:1em}
.example{padding-top:24px}
.example-card{display:block;margin-top:20px;padding:24px;border:1px solid #e3e5ef;border-radius:16px;background:#fff;box-shadow:0 8px 30px rgba(20,20,60,.06);text-decoration:none;color:inherit}
.example-card:hover{border-color:#4F41F5}
.ex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.ex-kpi{background:#f6f7fb;border-radius:12px;padding:14px}
.ex-kpi .v{font:600 26px Poppins,sans-serif}.ex-kpi .v small{font-size:13px;color:#777}
.ex-kpi .k{font-size:13px;color:#555;margin-top:4px}
.ex-table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14px}
.ex-table th,.ex-table td{padding:8px 10px;border-bottom:1px solid #eee;text-align:left}
.ex-table .r{text-align:right}
.blur{filter:blur(4px);user-select:none}
@media(max-width:760px){.ex-grid{grid-template-columns:1fr 1fr}}

/* ---------- Sample audit section (v3 revamp) ---------- */
.sample { --teal:#22C1A4; --coral:#F0544F; }
.sample-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.sample-head p { margin:0; }
.sample-tag { font:600 .75rem var(--head); text-transform:uppercase; letter-spacing:.08em; color:var(--purple); background:var(--pale); border:1px dashed var(--purple); padding:6px 12px; border-radius:999px; }
.sample-card { background:var(--white); border-radius:20px; padding:22px; box-shadow:0 2px 4px rgba(37,20,95,.06),0 18px 48px rgba(79,65,245,.12); border:1px solid var(--line); }
.s-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.s-tile { border-radius:14px; padding:16px 18px; background:var(--off); border:1px solid var(--line); position:relative; }
.s-tile .k { font-size:.82rem; color:var(--muted); font-weight:500; }
.sig-top { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.sig-v { font:700 1.9rem var(--head); color:var(--navy); margin:4px 0 8px; letter-spacing:-.02em; }
.sig-v small { font-size:.8rem; font-weight:500; color:var(--muted); }
.sig-v.bad { color:var(--coral); } .sig-v.good { color:var(--good); }
.bar-row, .pl { display:grid; grid-template-columns:70px 1fr 52px; gap:8px; align-items:center; font-size:.8rem; color:var(--muted); margin-top:6px; }
.pl { grid-template-columns:100px 1fr 46px; margin-top:10px; }
.bar-row b, .pl b { color:var(--navy); text-align:right; font-variant-numeric:tabular-nums; }
.bar { height:8px; background:#E9E7F5; border-radius:99px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:99px; }
.b-you { background:linear-gradient(90deg,var(--purple),var(--teal)); }
.b-cat { background:#B9B4D6; }
.s-score { grid-row:span 2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(160deg,var(--navy),#3B2A9A); border:0; color:#fff; }
.s-score .k { color:#CFC9F5; margin-top:8px; font-size:.9rem; }
.s-score .ring { width:150px; height:150px; }
.s-score .ring circle:first-child { stroke:rgba(255,255,255,.14); }
.ring-v { position:absolute; top:50%; left:50%; transform:translate(-50%,-62%); font-family:var(--head); }
.ring-v b { font-size:2.6rem; } .ring-v small { font-size:.95rem; opacity:.75; }
.s-waste { display:flex; gap:14px; align-items:center; background:linear-gradient(135deg,#FFF5F4,#fff); border-color:#F8D3D0; }
.donut { width:84px; height:84px; flex:none; }
.legend { display:flex; gap:12px; flex-wrap:wrap; font-size:.78rem; color:var(--muted); }
.legend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; }
.s-capped { background:linear-gradient(135deg,#E9FAF5,#fff); border-color:#BFEDE1; }
.s-capped p { margin:0; }
.s-place { background:linear-gradient(135deg,var(--pale),#fff); border-color:#DCD7FB; }
.s-sig { background:#fff; border-left:4px solid var(--purple); }
.s-sig + .s-sig { border-left-color:var(--teal); }
.s-bottom { display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:14px; margin-top:14px; }
.s-table-wrap { border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.s-table-wrap .ex-table { margin:0; width:100%; }
.s-cta { border-radius:14px; padding:20px; color:#fff; background:linear-gradient(135deg,var(--purple),#7B5CFF 55%,var(--teal)); display:flex; flex-direction:column; justify-content:center; }
.s-cta h3 { color:#fff; font-size:1.15rem; } .s-cta p { opacity:.9; font-size:.92rem; }
.btn-cta { background:#fff; color:var(--navy); box-shadow:0 6px 18px rgba(0,0,0,.15); align-self:flex-start; }
.btn-cta:hover { transform:translateY(-1px); }
.s-call { color:#fff; font-size:.85rem; margin-top:10px; opacity:.9; }
.drop.pulse { box-shadow:0 0 0 4px rgba(79,65,245,.35); transition:box-shadow .3s; }
/* Variant B: dark band */
.sample-b { background:linear-gradient(180deg,var(--navy),#1A0E47); }
.sample-b h2 { color:#fff; } .sample-b .muted, .sample-b .eyebrow { color:#CFC9F5; }
.sample-b .sample-tag { background:rgba(255,255,255,.08); color:#fff; border-color:#9F95FF; }
.sample-b .sample-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.sample-b .s-score { background:linear-gradient(160deg,var(--purple),#22C1A4); }
/* Variant C: light, tinted, minimal */
.sample-c { background:linear-gradient(180deg,var(--pale),var(--off)); }
.sample-c .sample-card { box-shadow:none; background:transparent; border:0; padding:0; }
.sample-c .s-tile, .sample-c .s-table-wrap { background:#fff; box-shadow:var(--shadow); border-color:transparent; }
.sample-c .s-score { background:#fff; color:var(--navy); }
.sample-c .s-score .k { color:var(--muted); } .sample-c .s-score .ring circle:first-child { stroke:#ECEAFB; }
.sample-c .s-sig { border-left:0; border-top:4px solid var(--purple); }
.sample-c .s-sig + .s-sig { border-top-color:var(--teal); }
@media (max-width: 900px) {
  .s-grid { grid-template-columns:1fr 1fr; }
  .s-score { grid-row:auto; grid-column:span 2; }
  .s-bottom { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .s-grid { grid-template-columns:1fr; } .s-score { grid-column:auto; }
  .sample-card { padding:14px; }
}
.sample-b .s-table-wrap { background:#fff; }
.sample-b .s-tile .muted, .sample-b .s-table-wrap .k { color:var(--muted); }

.drop .files.files-3{flex-direction:column;align-items:stretch;max-width:560px;margin:18px auto 20px;gap:10px}
.drop .files.files-3 li{border-radius:12px;padding:10px 16px;text-align:left;display:flex;flex-direction:column;gap:2px;background:#fff;border-left:4px solid var(--navy)}
.drop .files.files-3 li b{font-size:.92rem;font-weight:600}
.drop .files.files-3 li span{font-size:.76rem;color:var(--muted)}
.progress-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.progress-list li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 14px;border:1px solid #e3e6ee;border-radius:10px;background:#fff;font-size:14px}
.progress-list .pf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.progress-list small{color:#7a8194;font-weight:400}
.progress-list .pf-state{white-space:nowrap;color:#7a8194;display:flex;align-items:center;gap:6px}
.progress-list li.done .pf-state{color:#1f9d55;font-weight:600}
.progress-list li.reading .pf-state{color:#2b59c3;font-weight:600}
.mini-spin{width:14px;height:14px;border:2px solid #c9d3ee;border-top-color:#2b59c3;border-radius:50%;display:inline-block;animation:pfspin .8s linear infinite}
@keyframes pfspin{to{transform:rotate(360deg)}}
.pf-note{font-size:13px;margin:8px 0 0}
.date-warn{background:#fff7e6;border:1px solid #f3c86b;border-radius:12px;padding:14px 18px;margin:0 0 18px}
.date-warn ul{margin:6px 0 0;padding-left:18px}
.kpi .src{font-size:12px;color:#7a8194;margin-top:6px}
.tbl-tools{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.linkbtn{background:none;border:0;padding:0;color:var(--purple);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:underline}
details.more{margin-top:14px}details.more summary{cursor:pointer;color:var(--purple);font-weight:600;font-size:.9rem}
.drop{min-width:0;max-width:100%;box-sizing:border-box}
.drop .files li{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;min-width:0}

/* v8 hero */
.badge-free{display:inline-block;font-family:var(--head);font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--purple);padding:8px 16px;border-radius:999px;margin-bottom:18px}
.hero-v8 h1{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.1}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn-outline{border:2px solid var(--purple);color:var(--purple)}
.hero-sample{position:relative;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:24px;display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center}
.hero-sample .sample-tag{position:absolute;top:12px;right:14px}
.hs-score{position:relative;text-align:center}
.hs-score .ring{width:180px;height:180px}
.hs-score .ring-v{position:absolute;top:90px;left:50%;transform:translate(-50%,-50%)}
.hs-score .ring-v b{font-size:2.6rem}
.hs-cards{display:grid;gap:12px}
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0 8px}
.qa{background:var(--off);border:1px solid var(--line);border-radius:14px;padding:18px}
.qa h3{margin:0 0 8px}.qa-a{margin:0}.qa .good{color:#159a82}.qa .bad{color:#d8403b}
.upload-box{max-width:820px}
@media (max-width:900px){.hero-sample{grid-template-columns:1fr;justify-items:center}.hs-cards{width:100%}.qa-grid{grid-template-columns:1fr}}
.btn-big{padding:14px 26px;font-size:1.05rem}
.hero-sample .sample-tag{top:-14px;right:20px;background:#fff}

/* v9 polish */
h1,h2{font-weight:700;letter-spacing:-.01em}
.section h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.hero-v8{background:radial-gradient(60% 70% at 85% 20%,rgba(79,65,245,.22),transparent 70%),radial-gradient(50% 60% at 10% 90%,rgba(34,193,164,.14),transparent 70%),linear-gradient(160deg,#F4F2FF 0%,#FFFFFF 60%,#EEF0FF 100%)}
.alt{background:linear-gradient(180deg,#F4F2FF,#FAF9FF)}
.chips{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;font-weight:600;color:var(--navy);font-size:.95rem;box-shadow:0 4px 14px rgba(37,20,95,.08)}
.ci{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.ci svg{width:17px;height:17px}
.chip-g .ci{background:linear-gradient(135deg,#FF8A5B,#F0544F)}
.chip-p .ci{background:linear-gradient(135deg,#7B6CFF,#4F41F5)}
.chip-t .ci{background:linear-gradient(135deg,#3DDBB9,#14A88C)}
.hero-sample{box-shadow:0 2px 4px rgba(37,20,95,.06),0 24px 60px rgba(79,65,245,.22);border:1px solid rgba(79,65,245,.12)}
.ring2{width:190px;height:190px;filter:drop-shadow(0 6px 16px rgba(240,140,60,.35))}
.ring2 .arc{animation:ringfill 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes ringfill{from{stroke-dasharray:0 314.16}}
@media (prefers-reduced-motion:reduce){.ring2 .arc{animation:none}}
.ring-v2{position:absolute;top:95px;left:50%;transform:translate(-50%,-50%);font-family:var(--head)}
.ring-v2 b{font-size:3.4rem;font-weight:800;color:var(--navy)}.ring-v2 small{font-size:1rem;color:var(--muted)}
.score-label{display:inline-block;margin:6px 0 4px;padding:4px 12px;border-radius:999px;background:#FFF4DC;color:#9A6400;font-weight:700;font-size:.85rem}
.s-tile{box-shadow:0 6px 18px rgba(37,20,95,.07)}
.hero-sample .s-tile{border-left:4px solid var(--purple)}
.hero-sample .s-tile:nth-child(2){border-left-color:#F0544F}
.check,.qa{background:#fff;border:1px solid var(--line);border-top:4px solid var(--purple);border-radius:14px;box-shadow:0 8px 22px rgba(37,20,95,.07)}
.check:nth-child(2),.qa:nth-child(2){border-top-color:#F0544F}
.check:nth-child(3),.qa:nth-child(3){border-top-color:#22C1A4}
.check:nth-child(4){border-top-color:#F5B42A}
.soft-close .help-card{background:linear-gradient(135deg,#25145F,#4F41F5);color:#fff;border:0}
.soft-close .help-card h3,.soft-close .help-card p{color:#fff}
.soft-close .btn-primary{background:#fff;color:var(--navy)}
@media (max-width:600px){.chip{font-size:.9rem}}
/* v10: placement as three stats; flexible bar rows (fixed px columns squeezed the track and value at mid widths) */
.pl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.pl3-i{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.pl3-i b{font-family:var(--head);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl3-i i{display:block;width:70%;height:6px;border-radius:3px;margin:6px 0}
.pl3-i span{font-size:.78rem;color:var(--muted);line-height:1.2}
.bar-row{grid-template-columns:auto minmax(24px,1fr) auto}
.bar-row span{min-width:56px}
.s-bottom>*{min-width:0}.s-table-wrap{overflow-x:auto}
.pl-head{font-family:var(--head);font-size:1rem;font-weight:700;color:var(--navy);margin:0 0 4px}