.site-footer, main.public { max-width: 68rem; margin: 0 auto; padding: 1.25rem 1.5rem; }
.site-footer { border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.9rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }

main.public h1 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); text-wrap: balance; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; padding: 3rem 0; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
.lede { font-size: 1.15rem; max-width: 48rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.checker form {
    display: grid; gap: var(--space-2); max-width: 48rem; padding: var(--space-5);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.checker label { font-weight: 600; font-size: var(--text-sm); }
.checker label ~ label { margin-top: var(--space-3); }
.checker form > input:not([type="hidden"]) { width: 100%; }
.checker input[type="file"] { padding: var(--space-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); }
.checker .actions { margin: var(--space-2) 0 0; }

.ledger-sample { margin: 0; background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--text); padding: 1rem 1.25rem; }
.ledger-sample figcaption { font: 0.8rem var(--data); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.ledger-sample ol { list-style: none; margin: 0.75rem 0 0; padding: 0; font: 0.9rem/1.4 var(--data); }
.ledger-sample li { display: grid; grid-template-columns: 4.5rem auto; gap: 0.2rem 0.75rem; padding: 0.6rem 0; border-top: 1px dashed var(--border); }
.ledger-sample li > :last-child { grid-column: 2; }
.actor { justify-self: start; overflow-wrap: anywhere; padding: 0 0.4rem; border-radius: 3px; font-size: 0.8rem; }

.features ul { list-style: none; padding: 0; margin: 0; }
.features li { padding: 0.75rem 0; border-top: 1px solid var(--border); max-width: 46rem; }
.shipped li::before { content: "✓"; color: var(--success); font-weight: 700; margin-right: 0.6rem; }
.coming li { color: var(--text-muted); }
.tag { margin-right: 0.5rem; }

.cta { margin: 3rem 0; padding: 2rem; background: var(--brand-ink); color: var(--text); color-scheme: dark; border-radius: 6px; }
.cta h2 { margin-top: 0; }
.cta .button { background: var(--text); border-color: var(--text); color: var(--brand-ink); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--space-5); }
.plan {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 var(--space-5) var(--space-4);
}
.plan ul { grid-row: 3; margin: var(--space-4) 0 0; padding-left: var(--space-5); }
.plan li + li { margin-top: var(--space-2); }
.price { font: 600 2.5rem var(--display); margin: 0; }
.price span { font-size: 1rem; color: var(--text-muted); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--space-4); }
.stat { margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.stat strong { display: block; font: 600 var(--text-3xl)/1.2 var(--display); }
.muted { color: var(--text-muted); font-size: var(--text-sm); }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--space-4); }
.side { padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.side.google { background: var(--warning-bg); }
.side h3 { margin-top: 0; font-size: var(--text-base); }
.side-totals { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.side-totals dd { margin: 0; font-weight: 600; }
.cost-per-lead strong { font: 600 var(--text-3xl)/1.2 var(--display); }
.verdict { margin: var(--space-4) 0; }
.split { display: flex; height: 0.9rem; overflow: hidden; border-radius: var(--radius-full); background: var(--surface-2); }
.split .keywords { background: var(--info); }
.split .ai-max { background: var(--warning); }
td.num, th.num { text-align: right; }
.email-me { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.email-me label { flex-basis: 100%; font-weight: 600; font-size: var(--text-sm); }
.email-me input { flex: 1 1 16rem; }

.connect-steps {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); padding: 0;
    list-style: none; counter-reset: step; font-size: var(--text-sm); color: var(--text-muted);
}
.connect-steps li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 var(--space-2); counter-increment: step; }
.connect-steps li::before {
    content: counter(step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-full); font-weight: 600;
}
.connect-steps li > span { grid-column: 2; }
.connect-steps [aria-current] { color: var(--text); }
.connect-steps [aria-current]::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.connect-steps .done::before { content: "✓"; border-color: var(--success); color: var(--success); }

.connect-dialog {
    width: min(34rem, calc(100vw - 2rem)); padding: var(--space-6);
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.connect-dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.connect-dialog h2 { margin-top: 0; }
.connect-dialog .connect-steps { flex-direction: column; gap: var(--space-4); font-size: var(--text-base); color: var(--text); }
.connect-dialog .connect-steps span { color: var(--text-muted); font-size: var(--text-sm); }
.connect-dialog .actions { margin-bottom: 0; }
.connect-dialog .button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.actor-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr)); gap: var(--space-2); }
.actor-tile { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
.actor-tile strong { display: block; font: 600 var(--text-2xl)/1.2 var(--display); }
.stat-line strong { font: 600 var(--text-3xl)/1.2 var(--display); }
.weeks { display: flex; align-items: flex-end; gap: 2px; height: 8rem; margin-top: var(--space-4); border-bottom: 1px solid var(--border-strong); }
.week { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; }
.week .bar { flex: 1; min-height: 0; }
.week .agency { background: var(--info); }
.week .google { background: var(--warning); }
.weeks-axis { display: flex; justify-content: space-between; margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.callouts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.questions li + li { margin-top: var(--space-3); }
.questions .muted { display: block; }
.ngrams { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }

.estimate {
    margin: var(--space-6) 0; padding: var(--space-5);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.legal { max-width: min(70ch, 42rem); }
.template { background: var(--surface); border: 1px dashed var(--border); margin: 1rem 0; padding: 0.5rem 1.5rem; }

.button-google { min-height: 2.5rem; background: var(--google-bg); border-color: var(--google-border); color: var(--google-text); }
.button-google:hover { background: var(--google-bg); border-color: var(--google-text); }

@media (max-width: 48rem) {
    .hero { grid-template-columns: minmax(0, 1fr); }
    .estimate { padding: var(--space-4); }
}
