/* Free PPC audit page. Builds on site.css tokens. */
.audit-hero { padding: 72px 0 56px; }
.audit-hero h1 { margin: 0; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; max-width: 18ch; }
.audit-hero h1 b { color: #7FA8FF; font-weight: 600; }
.audit-hero .lede { max-width: 56ch; }
.audit-points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--dark-muted); font-size: 15px; }
.audit-points li::before { content: "✓"; color: #4ADE9B; margin-right: 8px; font-weight: 700; }

.audit-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; align-items: start; }
.audit-form { display: flex; flex-direction: column; gap: 16px; }
.audit-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.drop { position: relative; border: 2px dashed var(--line-strong); border-radius: 14px; padding: 26px 18px; text-align: center; background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--blue); background: var(--blue-tint); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop b { display: block; font-size: 16px; }
.drop span { color: var(--soft); font-size: 14px; }
.drop.has { border-style: solid; border-color: var(--gain); background: var(--gain-tint); }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); font-weight: 400; }
.check-line input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); flex-shrink: 0; }
.audit-msg { padding: 10px 12px; border-radius: 10px; font-size: 14.5px; background: var(--loss-tint); color: var(--loss); }
.howto ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.howto ol b { color: var(--ink); font-weight: 600; }

/* results */
.result-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.score { position: relative; width: 150px; height: 150px; }
.score svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.score .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score .c b { font: 600 44px/1 var(--mono); letter-spacing: -0.04em; }
.score .c span { font-size: 13px; color: var(--soft); }
.grade { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.g-good { background: var(--gain-tint); color: var(--gain); } .g-mid { background: var(--watch-tint); color: var(--watch); } .g-bad { background: var(--loss-tint); color: var(--loss); }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tile { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile span { font-size: 13px; color: var(--soft); }
.tile b { font: 500 24px/1.15 var(--mono); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.tile small { font-size: 12.5px; color: var(--soft); }
.tile.bad b { color: var(--loss); } .tile.good b { color: var(--gain); }
.actions { display: flex; flex-direction: column; gap: 10px; }
.action { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.action .n { width: 32px; height: 32px; border-radius: 16px; background: var(--blue-tint); color: var(--blue-ink); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.action h3 { margin: 0; font-size: 17px; }
.action p { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.action .save { font: 600 17px var(--mono); color: var(--gain); white-space: nowrap; text-align: right; }
.action .save small { display: block; font: 400 12px var(--sans); color: var(--soft); }
.terms { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.terms th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.terms td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.terms td.r, .terms th.r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lists .card h3 { margin: 0 0 4px; font-size: 17px; }
.lists .card p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.audit-cta { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
@media (max-width: 960px) { .audit-wrap { grid-template-columns: minmax(0, 1fr); } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lists { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .audit-form .row2 { grid-template-columns: 1fr; } .result-head { grid-template-columns: minmax(0, 1fr); justify-items: start; } .action { grid-template-columns: 32px minmax(0, 1fr); } .action .save { grid-column: 2; text-align: left; } .audit-hero { padding: 48px 0 40px; } }