/* ============ Audora.One — global styles ============ */

:root {
    --bg: oklch(0.985 0.005 90);
    --bg-2: oklch(0.965 0.008 90);
    --bg-3: oklch(0.94 0.01 90);
    --ink: oklch(0.18 0.01 260);
    --ink-2: oklch(0.38 0.01 260);
    --ink-3: oklch(0.58 0.01 260);
    --rule: oklch(0.90 0.01 260);
    --rule-2: oklch(0.84 0.012 260);
    --accent: oklch(0.55 0.20 260);
    --accent-ink: oklch(0.32 0.18 260);
    --accent-tint: oklch(0.96 0.03 260);
    --accent-tint-2: oklch(0.88 0.08 260);
    --good: oklch(0.62 0.16 145);
    --warn: oklch(0.72 0.16 75);
    --bad: oklch(0.60 0.21 25);
    --paper: #fff;
    --shadow-sm: 0 1px 2px oklch(0.18 0.01 260 / 0.06), 0 1px 1px oklch(0.18 0.01 260 / 0.04);
    --shadow-md: 0 4px 12px oklch(0.18 0.01 260 / 0.06), 0 2px 4px oklch(0.18 0.01 260 / 0.04);
    --shadow-lg: 0 24px 60px oklch(0.18 0.01 260 / 0.10), 0 6px 16px oklch(0.18 0.01 260 / 0.06);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --maxw: 1180px;
    --serif: "Instrument Serif", "Times New Roman", serif;
    --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --accent-ember: oklch(0.68 0.19 35);
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

[data-theme="dark"] {
    --bg: oklch(0.16 0.01 260);
    --bg-2: oklch(0.20 0.012 260);
    --bg-3: oklch(0.24 0.014 260);
    --ink: oklch(0.97 0.005 90);
    --ink-2: oklch(0.78 0.01 260);
    --ink-3: oklch(0.58 0.01 260);
    --rule: oklch(0.30 0.014 260);
    --rule-2: oklch(0.36 0.016 260);
    --accent: oklch(0.72 0.18 260);
    --accent-ink: oklch(0.85 0.14 260);
    --accent-tint: oklch(0.24 0.04 260);
    --accent-tint-2: oklch(0.32 0.10 260);
    --paper: oklch(0.20 0.012 260);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.40);
    --shadow-lg: 0 24px 60px oklch(0 0 0 / 0.50);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    /* Sticky nav is 60px; super users get an extra ~52px admin bar; paid-banner
       is ~40px. 160px reserves enough room above any # anchor target so the
       element's heading is visible, not hidden behind the sticky chrome. */
    scroll-padding-top: 0;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea { font-family: inherit; }

/* ============ Type ============ */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.mono  { font-family: var(--mono); font-feature-settings: "ss01"; }
.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.eyebrow::before {
    content: "";
    width: 18px; height: 1px; background: var(--ink-3);
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; }

/* ============ Layout ============ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; border-top: 1px solid var(--rule); position: relative; }
.section--hero { padding: 28px 0 80px; border-top: 0; }
.section--tight { padding: 64px 0; }

/* ============ Nav ============ */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklch, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
}
.nav__row {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px;
}
.logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--ink);
}
.logo__mark {
    display: inline-flex; align-items: center;
    line-height: 0;
    color: var(--ink);
    text-transform: none; /* keep the SVG's "A" capitalized; .logo above lowercases the wordmark */
    letter-spacing: normal;
}
.logo__mark .audora-mark { display: block; height: 28px; width: auto; }
.nav__links { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--ink-2); }
.nav__links a:hover { color: var(--ink); }
.nav__cta {
    font-size: 13px; padding: 8px 14px; border-radius: 8px;
    background: var(--ink); color: var(--bg);
    display: inline-flex; align-items: center; gap: 6px;
    transition: transform .15s ease;
}
.nav__cta:hover { transform: translateY(-1px); }
.nav__account {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
}
.nav__account:hover { background: var(--bg-3); }
.nav__login { color: var(--ink-2); }
.nav__login:hover { color: var(--ink); }
.nav__logout-form { display: inline; }
.nav__logout {
    font-size: 13px;
    color: var(--ink-3);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.nav__logout:hover { color: var(--ink); }
.theme-toggle {
    padding: 4px 8px;
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1;
}
.theme-toggle:hover { color: var(--ink); }

/* ============ Buttons ============ */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-radius: 10px;
    font-size: 14px; font-weight: 500;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--accent); color: white; }
.btn--accent:hover { transform: translateY(-1px); box-shadow: 0 8px 20px oklch(0.55 0.20 260 / 0.30); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { background: var(--bg-2); }
.btn--lg { padding: 16px 24px; font-size: 15px; border-radius: 12px; }
.btn--sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn--ghost-on-dark {
    background: transparent;
    color: var(--bg);
    border: 1px solid oklch(0.4 0.01 260);
}
.btn--ghost-on-dark:hover { background: oklch(0.25 0.01 260); }

/* ============ Hero ============ */
.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 72px;
    align-items: center;
    padding-top: 48px;
}
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 40px; } }

.hero__pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 8px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    font-size: 12px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}
.hero__pill .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--good);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--good) 25%, transparent);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hero h1 {
    font-family: var(--serif);
    font-size: clamp(48px, 6.5vw, 84px);
    line-height: 1.0;
    margin: 24px 0 20px;
    letter-spacing: -0.025em;
}
.hero h1 em {
    font-style: italic;
    color: var(--accent);
    position: relative;
}

.hero__sub {
    font-size: 18px;
    color: var(--ink-2);
    max-width: 520px;
    line-height: 1.5;
    margin: 0 0 32px;
}

/* URL form */
.urlform {
    background: var(--paper);
    border: 1px solid var(--rule-2);
    border-radius: 14px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-md);
    max-width: 600px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.urlform:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent);
}
.urlform__prefix {
    padding: 0 4px 0 14px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
}
.urlform input {
    flex: 1;
    border: 0; outline: none; background: transparent;
    font-size: 15px;
    padding: 14px 4px;
    color: var(--ink);
    font-family: var(--mono);
    min-width: 0;
}
.urlform input::placeholder { color: var(--ink-3); }
.urlform button {
    background: var(--ink);
    color: var(--bg);
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    transition: transform .15s ease;
}
.urlform button:hover { transform: translateY(-1px); }
.urlform button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.urlform .urlform__paid {
    background: var(--accent); color: white;
}
.urlform .urlform__paid:hover {
    box-shadow: 0 8px 20px color-mix(in oklch, var(--accent) 30%, transparent);
}
@media (max-width: 540px) {
    .urlform { flex-wrap: wrap; }
    .urlform input { flex-basis: 100%; }
    .urlform button { flex: 1; justify-content: center; }
}

.hero__meta {
    display: flex; gap: 20px; margin-top: 18px;
    font-size: 13px; color: var(--ink-3);
    flex-wrap: wrap;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero__meta svg { color: var(--good); }

/* Hero visual — sample audit card */
.hero__visual { position: relative; }

.audit-card {
    background: var(--paper);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 22px;
    position: relative;
    overflow: hidden;
}
.audit-card__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 18px; border-bottom: 1px dashed var(--rule);
    margin-bottom: 18px;
}
.audit-card__url {
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    margin-bottom: 4px;
}
.audit-card__title {
    font-family: var(--serif); font-size: 20px; line-height: 1.1;
}
.score-ring {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
}
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.score-ring__track { stroke: var(--rule); }
.score-ring__fill { stroke: var(--accent); transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.score-ring__num {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--serif);
    letter-spacing: -0.02em;
}

.finding {
    display: flex; gap: 14px; padding: 12px 0;
    border-bottom: 1px dashed var(--rule);
    align-items: flex-start;
    position: relative;
}
.finding:last-child { border-bottom: 0; }
.finding__sev {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}
.finding__sev--high { background: color-mix(in oklch, var(--bad) 15%, transparent); color: var(--bad); }
.finding__sev--med  { background: color-mix(in oklch, var(--warn) 22%, transparent); color: oklch(0.45 0.15 65); }
.finding__sev--low  { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent-ink); }
[data-theme="dark"] .finding__sev--med { color: oklch(0.85 0.16 80); }
[data-theme="dark"] .finding__sev--low { color: var(--accent); }

.finding__body { flex: 1; min-width: 0; }
.finding__title { font-size: 14px; font-weight: 500; line-height: 1.35; margin-bottom: 2px; }
.finding__desc { font-size: 12px; color: var(--ink-3); line-height: 1.4; }

.finding--locked .finding__title,
.finding--locked .finding__desc {
    filter: blur(5px);
    user-select: none;
}
.lock-row-badge {
    position: absolute; right: 0; top: 14px;
    font-size: 10px;
    font-family: var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex; align-items: center; gap: 4px;
}

.audit-card__floater {
    position: absolute;
    bottom: -22px; right: -22px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 12px;
    padding: 12px 16px;
    font-family: var(--mono);
    font-size: 11px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: var(--shadow-lg);
}
.audit-card__floater b { color: var(--accent); font-weight: 500; }

/* ============ Logo bar ============ */
.logobar {
    padding: 36px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.logobar__label {
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 22px;
}
.logobar__row {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 32px;
    opacity: 0.75;
}
.logobar__item {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink-2);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.logobar__item.mono { font-family: var(--mono); font-size: 16px; font-weight: 500; }

/* ============ How it works ============ */
.section__head {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px;
    margin-bottom: 56px;
}
@media (max-width: 860px) { .section__head { grid-template-columns: 1fr; gap: 24px; } }
.section__title {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.025em;
}
.section__title em { font-style: italic; color: var(--accent); }
.section__lede {
    font-size: 17px;
    color: var(--ink-2);
    max-width: 540px;
    align-self: end;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--paper);
    overflow: hidden;
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
    padding: 32px;
    border-right: 1px solid var(--rule);
    position: relative;
}
.step:last-child { border-right: 0; }
@media (max-width: 860px) {
    .step { border-right: 0; border-bottom: 1px solid var(--rule); }
    .step:last-child { border-bottom: 0; }
}
.step__num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.step__title {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.1;
    margin-bottom: 10px;
}
.step__desc { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 18px; }

.step__visual {
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 14px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-2);
    min-height: 72px;
    margin: 0;
    white-space: pre-wrap;
}

/* ============ Report carousel ============ */
.carousel {
    display: grid; grid-template-columns: 280px 1fr; gap: 32px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 860px) { .carousel { grid-template-columns: 1fr; } }
.carousel__tabs {
    display: flex; flex-direction: column;
}
@media (max-width: 860px) { .carousel__tabs { flex-direction: row; overflow-x: auto; } }
.carousel__tab {
    text-align: left;
    padding: 14px 16px;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    color: var(--ink-2);
    display: flex; justify-content: space-between; align-items: center;
    transition: all .15s ease;
    white-space: nowrap;
}
.carousel__tab:hover { color: var(--ink); background: var(--bg-2); }
.carousel__tab[aria-selected="true"] {
    border-left-color: var(--accent);
    color: var(--ink);
    background: var(--accent-tint);
    font-weight: 500;
}
.carousel__tab .score {
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.carousel__panel {
    background: var(--bg-2);
    border-radius: 12px;
    padding: 28px;
    min-height: 380px;
}
.carousel__pane[hidden] { display: none; }
.panel__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--rule);
}
.panel__title { font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.panel__sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.metric-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-bottom: 24px;
}
.metric {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 14px;
}
.metric__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.metric__value { font-family: var(--serif); font-size: 32px; line-height: 1.1; margin-top: 4px; letter-spacing: -0.02em; }
.metric__delta { font-family: var(--mono); font-size: 11px; margin-top: 4px; }
.metric__delta--bad { color: var(--bad); }
.metric__delta--good { color: var(--good); }
.panel__foot {
    border-top: 1px dashed var(--rule);
    padding-top: 18px; margin-top: 4px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.panel__foot .accent { color: var(--accent); }

/* ============ Pricing / upsell ============ */
.pricing {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
}
@media (max-width: 860px) { .pricing { grid-template-columns: 1fr; } }
.plan {
    background: var(--paper);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex; flex-direction: column;
    position: relative;
}
.plan--featured {
    border-color: var(--ink);
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
}
.plan__tag {
    position: absolute; top: -10px; left: 28px;
    background: var(--ink); color: var(--bg);
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 4px;
}
.plan__name { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.plan__price {
    font-family: var(--serif); font-size: 56px; line-height: 1; margin: 14px 0 4px;
    letter-spacing: -0.03em;
}
.plan__price small { font-size: 16px; color: var(--ink-3); font-family: var(--mono); margin-left: 4px; }
.plan__desc { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 22px; min-height: 42px; }
.plan__features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.plan__features li {
    display: flex; gap: 10px; padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px dashed var(--rule);
}
.plan__features li:last-child { border-bottom: 0; }
.plan__features svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); }

/* ============ Agency ============ */
.agency {
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--radius-lg);
    padding: 56px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media (max-width: 860px) { .agency { grid-template-columns: 1fr; padding: 32px; } }
.agency .eyebrow { color: oklch(0.7 0.05 260); }
.agency .eyebrow::before { background: oklch(0.7 0.05 260); }
.agency h2 {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 52px);
    line-height: 1.05;
    margin: 16px 0 16px;
}
.agency h2 em { font-style: italic; color: var(--accent); }
.agency p { color: oklch(0.78 0.01 260); font-size: 16px; max-width: 420px; }

.whitelabel-card {
    background: var(--paper);
    color: var(--ink);
    border-radius: 12px;
    padding: 22px;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.whitelabel-card__brand {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 14px; border-bottom: 1px solid var(--rule);
    margin-bottom: 16px;
}
.whitelabel-card__brand-mark {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--serif); font-size: 18px;
}
.whitelabel-card__brand-mark .blob {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, oklch(0.65 0.18 30), oklch(0.7 0.16 60));
}
.whitelabel-card__row {
    display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;
}
.whitelabel-card__url { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.whitelabel-card__title { font-family: var(--serif); font-size: 22px; margin-top: 4px; }
.whitelabel-card__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.whitelabel-card__metric { background: var(--bg-2); padding: 10px; border-radius: 8px; }
.whitelabel-card__metric-label { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.whitelabel-card__metric-value { font-family: var(--serif); font-size: 24px; }
.whitelabel-card__foot { margin-top: 14px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-align: right; }

/* ============ FAQ ============ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.faq details {
    border-bottom: 1px solid var(--rule);
    padding: 22px 0;
}
.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    font-family: var(--mono); font-size: 22px; color: var(--ink-3);
    transition: transform .2s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
    margin: 14px 0 0;
    color: var(--ink-2);
    max-width: 720px;
    line-height: 1.55;
}

/* ============ Footer ============ */
.footer {
    border-top: 1px solid var(--rule);
    padding: 48px 0 32px;
    font-size: 13px;
    color: var(--ink-3);
}
.footer__row {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 32px;
}
.footer__cols { display: flex; gap: 48px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 8px; }
.footer__col h4 {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink); margin-bottom: 6px;
}
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid var(--rule);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    font-family: var(--mono); font-size: 11px;
}
.footer__brand { max-width: 320px; }
.footer__brand p { margin: 12px 0 0; max-width: 280px; }

/* ============ Loading screen ============ */
.loading-screen {
    min-height: calc(100vh - 60px);
    padding: 40px 28px;
}
/* Two-column layout: sticky status panel on the left, scrollable check list on the right. */
.loading-shell {
    width: 100%; max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 880px) {
    .loading-shell { grid-template-columns: 1fr; gap: 20px; }
}
.loading-status {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 80px;
}
.loading-checklist {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.loading-url {
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.loading-status__heading {
    font-family: var(--serif); font-size: 26px; line-height: 1.05;
    margin: 4px 0 18px;
}
.loading-current {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 18px;
    background: var(--accent-tint);
    border-radius: 8px;
    font-family: var(--mono); font-size: 13px;
    color: var(--ink);
}
.loading-current__label { line-height: 1.3; }
.loading-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin: 16px 0 0; padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.loading-stats__item dt {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3); margin: 0 0 4px;
}
.loading-stats__item dd {
    font-family: var(--serif); font-size: 28px; line-height: 1;
    margin: 0; color: var(--ink);
}
.loading-stats__total { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.progress {
    height: 6px; background: var(--bg-3); border-radius: 999px;
    overflow: hidden; margin-bottom: 8px;
}
.progress__bar {
    height: 100%; width: 0; background: var(--accent);
    transition: width .3s ease;
}
.progress__meta {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    margin-bottom: 24px;
}
.stall-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: color-mix(in oklch, var(--warn) 14%, var(--paper));
    border: 1px solid color-mix(in oklch, var(--warn) 40%, var(--rule));
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.45;
}
.stall-banner strong {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(0.45 0.15 65);
}

.check__slow-pill {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in oklch, var(--warn) 16%, transparent);
    color: oklch(0.42 0.14 65);
    flex-shrink: 0;
    margin-left: 4px;
}

.checklist { display: flex; flex-direction: column; gap: 2px; }
.check {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 6px;
    font-family: var(--mono); font-size: 12px;
    transition: background .2s, color .2s;
    color: var(--ink-3);
    line-height: 1.35;
}
.check--active,
.check--running { background: var(--accent-tint); color: var(--ink); }
.check--done,
.check--passed { color: var(--ink-2); }
.check--failed { color: var(--ink); }
.check--error  { color: var(--bad); }
.check__icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.check__label { flex-shrink: 0; }
.check__summary {
    flex: 1 1 auto;
    color: var(--ink-3);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 8px;
    min-width: 0;
}
.check__time { color: var(--ink-3); font-size: 11px; flex-shrink: 0; }
.check__dot {
    width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid var(--rule-2); display: inline-block;
}
.spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--rule);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Results page ============ */
.results-head {
    display: grid; grid-template-columns: 1fr auto; gap: 32px;
    align-items: center;
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--rule);
}
@media (max-width: 760px) { .results-head { grid-template-columns: 1fr; } }
.results-head .url { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.results-head h1 {
    font-family: var(--serif); font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05; margin: 8px 0 12px;
}
.bigscore {
    display: flex; align-items: center; gap: 24px;
}
.bigscore__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.bigscore__grade {
    font-family: var(--serif); font-size: 24px; line-height: 1;
    margin-top: 4px;
}
.bigscore__meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 6px; }

.subscores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 28px 0;
    align-items: start;
}
@media (max-width: 760px) { .subscores { grid-template-columns: repeat(2, 1fr); } }
.subscore {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.subscore[open] {
    grid-column: 1 / -1;
    border-color: var(--rule-2);
    box-shadow: var(--shadow-sm);
}
.subscore summary {
    list-style: none;
    cursor: pointer;
    display: block;
}
.subscore summary::-webkit-details-marker { display: none; }
.subscore__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.subscore__caret {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
    transition: transform .15s ease;
}
.subscore[open] .subscore__caret { transform: rotate(90deg); }
.subscore__name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.subscore__val {
    font-family: var(--serif); font-size: 36px; line-height: 1; margin: 8px 0 6px;
    letter-spacing: -0.02em;
}
.subscore__bar { height: 4px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.subscore__bar > div { height: 100%; background: var(--accent); transition: width 1s ease; }

.subscore__breakdown {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--rule);
}
.subscore-breakdown__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.subscore-breakdown__row {
    display: grid;
    grid-template-columns: 56px 56px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--rule);
    font-size: 13px;
}
.subscore-breakdown__row:last-child { border-bottom: 0; }
.subscore-breakdown__delta {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--bad);
    text-align: right;
}
.subscore-breakdown__title {
    color: var(--ink-2);
    line-height: 1.4;
}
.subscore-breakdown__lock-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: var(--accent-tint);
    color: var(--accent-ink);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
[data-theme="dark"] .subscore-breakdown__lock-tag { color: var(--accent); }
.subscore-breakdown__math {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-2);
    text-align: right;
}
.subscore-breakdown__math b { color: var(--ink); }
.subscore-breakdown__clamp { color: var(--ink-3); font-size: 11px; margin-left: 6px; }
.subscore-breakdown__empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--mono);
    font-size: 12px;
}
.subscore-breakdown__line { color: var(--ink-2); }
.subscore-breakdown__note { color: var(--ink-3); font-size: 11px; }

.subscore-breakdown__positives {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule);
}
.subscore-breakdown__positives-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.subscore-breakdown__row--positive { border-bottom: 0; padding: 6px 0; }
.subscore-breakdown__delta--good { color: var(--good); font-size: 14px; }
.subscore-breakdown__positive-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: 3px;
    background: color-mix(in oklch, var(--good) 15%, transparent);
    color: var(--good);
    text-align: center;
}

.findings-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    padding: 24px 0;
}
@media (max-width: 760px) { .findings-list { grid-template-columns: 1fr; } }
.finding-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 20px;
    position: relative;
}
.finding-card__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.finding-card__index { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.finding-card__title {
    font-family: var(--serif); font-size: 22px; line-height: 1.15;
    margin: 6px 0 8px; letter-spacing: -0.01em;
}
.finding-card__desc { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.finding-card__cost {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; padding: 6px 10px;
    background: var(--bg-2); border-radius: 6px;
    font-family: var(--mono); font-size: 11px;
    color: var(--ink-2);
}
.finding-card__cost b { color: var(--bad); }

.locked-section {
    background: var(--paper);
    border: 1px dashed var(--rule-2);
    border-radius: var(--radius-lg);
    padding: 40px;
    margin: 32px 0;
    position: relative;
    overflow: hidden;
}
.locked-section__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 22px;
}
.locked-section__title {
    font-family: var(--serif); font-size: 28px;
    display: flex; align-items: center; gap: 12px;
}
.locked-section__meta {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.locked-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 760px) { .locked-grid { grid-template-columns: 1fr; } }
.locked-item {
    background: var(--bg-2);
    border-radius: 10px;
    padding: 16px;
    position: relative;
}
.locked-item__title {
    font-family: var(--serif);
    font-size: 18px;
    filter: blur(6px);
    user-select: none;
}
.locked-item__desc {
    font-size: 13px;
    color: var(--ink-3);
    filter: blur(5px);
    user-select: none;
    margin-top: 6px;
}
.locked-item__sev { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); }
.locked-item__lock {
    position: absolute; top: 14px; right: 14px;
    color: var(--ink-3);
}
.locked-cta {
    margin-top: 28px;
    background: var(--ink); color: var(--bg);
    border-radius: 12px;
    padding: 24px;
    display: grid; grid-template-columns: 1fr auto; gap: 24px;
    align-items: center;
}
@media (max-width: 760px) { .locked-cta { grid-template-columns: 1fr; } }
.locked-cta h3 { font-family: var(--serif); font-size: 28px; line-height: 1.1; margin-bottom: 6px; }
.locked-cta p { color: oklch(0.78 0.01 260); font-size: 14px; max-width: 460px; margin: 0; }

.results-footnote {
    text-align: center; padding: 40px 0 80px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.results-footnote a { color: var(--accent); }

.audit-failed {
    max-width: 540px;
    margin: 80px auto;
    text-align: center;
}
.audit-failed__title {
    font-family: var(--serif);
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 18px 0 18px;
}
.audit-failed__lede {
    color: var(--ink-2);
    font-size: 16px;
    margin: 0 auto 32px;
    max-width: 480px;
}

/* ============ Paid report preview ============ */
.paid-banner {
    background: var(--accent-tint);
    border-bottom: 1px solid var(--rule);
    padding: 12px 0;
    font-family: var(--mono); font-size: 12px;
}
.paid-banner__row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    flex-wrap: wrap;
}
.paid-banner__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.view-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--paper); border: 1px solid var(--rule);
    border-radius: 8px; padding: 3px;
}
.view-toggle__label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-3); padding: 0 8px 0 6px;
}
.view-toggle__btn {
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    color: var(--ink-2); padding: 4px 10px; border-radius: 6px;
    text-decoration: none; transition: background .15s ease, color .15s ease;
}
.view-toggle__btn:hover { background: var(--bg-2); color: var(--ink); }
.view-toggle__btn.is-active { background: var(--ink); color: var(--bg); }

.share-menu { position: relative; display: inline-block; }
.share-menu__dropdown {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--paper); border: 1px solid var(--rule);
    border-radius: 10px; padding: 12px; min-width: 360px;
    box-shadow: var(--shadow-md);
    z-index: 50;
    display: flex; flex-direction: column; gap: 12px;
}
.share-menu__dropdown[hidden] { display: none; }
.share-menu__row { display: flex; flex-direction: column; gap: 6px; }
.share-menu__label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-3);
}
.share-menu__copy { display: flex; gap: 6px; align-items: center; }
.share-menu__copy input {
    flex: 1; min-width: 0;
    font-family: var(--mono); font-size: 11px;
    padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--rule); background: var(--bg-2); color: var(--ink-2);
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0 0;
}
@media (max-width: 960px) { .summary-grid { grid-template-columns: 1fr; } }
.summary-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 20px;
    display: flex; flex-direction: column;
}
.summary-card--wins   { border-top: 3px solid var(--good); }
.summary-card--impact { border-top: 3px solid var(--bad); }
.summary-card--fast   { border-top: 3px solid var(--accent); }
.summary-card__head { margin-bottom: 14px; }
.summary-card__eyebrow {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-3);
}
.summary-card__title {
    font-family: var(--serif); font-size: 22px; line-height: 1.15;
    margin: 4px 0 2px;
}
.summary-card__lede { font-size: 13px; color: var(--ink-2); margin: 0; }
.summary-card__list { list-style: none; padding: 0; margin: 0; counter-reset: summary; }
.summary-card__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px; row-gap: 2px;
    padding: 10px 0;
    border-top: 1px dashed var(--rule);
    counter-increment: summary;
    align-items: start;
    position: relative;
    transition: background .15s ease;
}
.summary-card__item:hover { background: color-mix(in oklch, var(--accent-tint) 40%, transparent); }
/* Anchor wraps the row's three children — display: contents keeps them in the
   grid; the ::after overlay stretches the click target across the whole row. */
.summary-card__link { display: contents; color: inherit; text-decoration: none; }
.summary-card__link::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 4px;
}
.summary-card__item:hover .summary-card__item-title { text-decoration: underline; text-underline-offset: 3px; }
.summary-card__item::before {
    content: counter(summary);
    grid-row: 1 / 3;
    grid-column: 1;
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); border-radius: 50%;
    margin-top: 2px;
}
.summary-card__item .finding__sev { grid-column: 2; justify-self: start; font-size: 9px; padding: 2px 6px; }
.summary-card__item-title {
    grid-column: 2;
    font-size: 14px; line-height: 1.3; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.summary-card__item-meta {
    grid-column: 2;
    font-family: var(--mono); font-size: 10px; color: var(--ink-3);
}

.paid-shell {
    display: grid; grid-template-columns: 280px 1fr; gap: 32px;
    padding: 40px 0;
}
@media (max-width: 860px) { .paid-shell { grid-template-columns: 1fr; } }
.paid-side {
    position: sticky; top: 115px;
    align-self: start;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 20px;
}
.paid-side h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.paid-side a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--ink-2);
}
.paid-side a:hover { background: var(--bg-2); color: var(--ink); }
.paid-side a .num { font-family: var(--mono); color: var(--ink-3); margin-right: 8px; }
.paid-side__foot { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--rule); }
.paid-side__foot .btn { width: 100%; justify-content: center; }

.paid-section {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 16px;
    scroll-margin-top: 160px; /* defensive in case scroll-padding-top is overridden */
}
.paid-section__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--rule);
}
.paid-section__num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; }
.paid-section__title { font-family: var(--serif); font-size: 32px; line-height: 1.05; margin: 4px 0 0; }
.paid-section__meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.paid-section__locked { color: var(--accent); }
.paid-section__empty {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 18px; border-radius: 10px;
    font-size: 14px; color: var(--ink-2);
}
.paid-section__empty--ok    { background: color-mix(in oklch, var(--good) 8%, transparent); color: var(--good); }
.paid-section__empty--skip  { background: var(--bg-2); color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.paid-section__empty--locked { background: color-mix(in oklch, var(--accent) 6%, transparent); color: var(--ink-2); border: 1px dashed color-mix(in oklch, var(--accent) 40%, transparent); }
.paid-section__empty--locked b { color: var(--ink); }

.checks-run__count--failed   { color: var(--bad); }
.checks-run__count--errored  { color: oklch(0.55 0.16 30); }
.checks-run__count--passed   { color: var(--good); }
.checks-run__toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    cursor: pointer; user-select: none;
}
.checks-run__toggle input { accent-color: var(--accent); }
.checks-run__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.checks-run__row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bg-2);
}
.checks-run__row--passed  { background: color-mix(in oklch, var(--good) 5%, transparent); }
.checks-run__row--failed  { background: color-mix(in oklch, var(--bad)  6%, transparent); }
.checks-run__row--error   { background: color-mix(in oklch, var(--warn) 8%, transparent); }
.checks-run.checks-run--hide-passing .checks-run__row--passed { display: none; }
.checks-run__status-icon {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    line-height: 1;
}
.checks-run__row--passed .checks-run__status-icon { background: var(--good); color: white; }
.checks-run__row--failed .checks-run__status-icon { background: var(--bad);  color: white; }
.checks-run__row--error  .checks-run__status-icon { background: oklch(0.55 0.16 30); color: white; }
.checks-run__body { min-width: 0; }
.checks-run__row-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.checks-run__label { font-size: 14px; color: var(--ink); }
.checks-run__category {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-3);
}
.checks-run__summary { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.checks-run__counts { display: flex; gap: 6px; flex-shrink: 0; }
.checks-run__pip {
    font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 4px;
}
.checks-run__pip--issues { background: color-mix(in oklch, var(--bad)  18%, transparent); color: var(--bad); }
.checks-run__pip--ok     { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }

.paid-section__score {
    font-family: var(--serif); font-size: 44px; line-height: 1;
    letter-spacing: -0.02em;
}
.paid-section__score small { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.detail-finding {
    /* Anchor lands well below the sticky nav (60px nav + ~52px admin bar +
       paid-banner). Generous so the headline + bar are both visible. */
    scroll-margin-top: 160px;
    border: 1px solid var(--rule); border-radius: 10px;
    padding: 18px; margin-bottom: 12px;
    background: var(--bg-2);
}
.detail-finding__bar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
    font-family: var(--mono); font-size: 11px;
    color: var(--ink-3);
}
.detail-finding__bar .impact { margin-left: auto; color: var(--bad); }
.finding__device {
    display: inline-flex; align-items: center;
    color: var(--ink-3);
    padding: 2px 5px; border-radius: 4px;
    background: var(--bg-2);
    line-height: 1;
}
.finding__device:hover { color: var(--ink-2); }
.detail-finding__title {
    font-family: var(--serif); font-size: 20px; line-height: 1.2;
    margin-bottom: 6px;
}
.detail-finding__desc { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.detail-finding__desc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.detail-finding__desc a:hover { color: var(--accent-ink); }
.detail-finding__desc code {
    font-family: var(--mono); font-size: 12px;
    padding: 1px 5px; border-radius: 4px;
    background: var(--bg-2); color: var(--ink);
}
.detail-finding__code {
    background: var(--ink); color: var(--bg);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: var(--mono); font-size: 12px;
    margin-top: 12px;
    overflow-x: auto;
    white-space: pre;
}
[data-theme="dark"] .detail-finding__code {
    background: oklch(0.30 0.012 260);
    color: oklch(0.96 0.005 90);
    border: 1px solid oklch(0.38 0.014 260);
}

.fix-row {
    display: grid;
    grid-template-columns: 32px 1fr 60px 100px;
    gap: 16px; align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed var(--rule);
    font-size: 14px;
}
.fix-row__num { font-family: var(--mono); color: var(--ink-3); }
.fix-row__effort { font-family: var(--mono); color: var(--ink-3); font-size: 12px; }
.fix-row__impact { font-family: var(--mono); color: var(--good); font-size: 12px; text-align: right; }
.fix-list__lede { color: var(--ink-2); font-size: 14px; margin: 0 0 18px; }

/* ============ Agency page ============ */
.agency-hero {
    padding: 80px 0 48px;
    text-align: center;
}
.agency-hero .eyebrow { justify-content: center; }
.agency-hero h1 {
    font-family: var(--serif);
    font-size: clamp(48px, 7vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 24px auto 24px;
    max-width: 12ch;
}
.agency-hero h1 em { font-style: italic; color: var(--accent); }
.agency-hero p { font-size: 18px; color: var(--ink-2); max-width: 540px; margin: 0 auto 36px; }
.agency-hero__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.agency-hero__meta { margin-top: 24px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.agency-features {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    padding: 32px 0;
}
@media (max-width: 860px) { .agency-features { grid-template-columns: 1fr; } }
.agency-feature {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 28px;
}
.agency-feature__icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--accent-tint);
    color: var(--accent-ink);
    border-radius: 8px;
    margin-bottom: 18px;
}
[data-theme="dark"] .agency-feature__icon { color: var(--accent); }
.agency-feature h3 { font-family: var(--serif); font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
.agency-feature p { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0; }

.agency-pricing-card {
    background: var(--ink); color: var(--bg);
    border-radius: var(--radius-lg);
    padding: 56px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
    margin: 64px 0;
}
@media (max-width: 860px) { .agency-pricing-card { grid-template-columns: 1fr; padding: 32px; } }
.agency-pricing-card .eyebrow { color: oklch(0.7 0.05 260); }
.agency-pricing-card .eyebrow::before { background: oklch(0.7 0.05 260); }
.agency-pricing-card .price {
    font-family: var(--serif); font-size: 96px; line-height: 1;
    letter-spacing: -0.03em;
    margin-top: 16px;
}
.agency-pricing-card .price small { font-size: 18px; font-family: var(--mono); color: oklch(0.7 0.01 260); }
.agency-pricing-card p { color: oklch(0.78 0.01 260); font-size: 16px; margin-top: 12px; max-width: 380px; }
.agency-pricing-card__ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.agency-pricing-card ul { list-style: none; padding: 0; margin: 0; }
.agency-pricing-card li {
    display: flex; gap: 12px; padding: 10px 0;
    border-bottom: 1px dashed oklch(0.32 0.01 260);
    font-size: 14px;
}
.agency-pricing-card li:last-child { border: 0; }
.agency-pricing-card li svg { color: var(--accent); flex-shrink: 0; margin-top: 4px; }

.agency-quote { padding: 60px 0 100px; text-align: center; }
.agency-quote blockquote {
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 820px;
    margin: 24px auto 0;
    font-style: italic;
}
.agency-quote cite {
    display: block; margin-top: 24px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    font-style: normal;
}

/* ============ Closing CTA ============ */
.closing-cta { text-align: center; max-width: 720px; margin: 0 auto; }
.closing-cta .eyebrow { justify-content: center; }
.closing-cta h2 {
    margin-top: 18px;
    font-family: var(--serif);
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1.05;
    letter-spacing: -0.025em;
}
.closing-cta h2 em { font-style: italic; color: var(--accent); }
.closing-cta p { font-size: 18px; color: var(--ink-2); margin: 20px auto 32px; max-width: 520px; }
.closing-cta__form { display: flex; justify-content: center; }

/* ============ Methodology ============ */
.method {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
    align-items: center;
}
@media (max-width: 860px) { .method { grid-template-columns: 1fr; gap: 32px; } }
.method__lede { font-size: 17px; color: var(--ink-2); margin-top: 20px; max-width: 460px; }
.method__stack-note { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 20px; line-height: 1.6; }
.method-stack {
    display: flex; flex-direction: column; gap: 12px;
    font-family: var(--mono); font-size: 13px;
}
.method-stack .row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
}
.method-stack .row .tag {
    font-size: 10px; letter-spacing: 0.08em;
    padding: 3px 7px; border-radius: 4px;
    background: var(--accent-tint); color: var(--accent-ink);
}
[data-theme="dark"] .method-stack .row .tag { color: var(--accent); }
.method-stack .row .name { flex: 1; color: var(--ink); }
.method-stack .row .meta { color: var(--ink-3); font-size: 11px; }

/* ============ Methodology block (top of results) ============ */
.methodology-block {
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 24px 0;
}
.methodology-block summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.methodology-block summary::-webkit-details-marker { display: none; }
.methodology-block__icon { color: var(--accent); display: inline-flex; }
.methodology-block__hint { margin-left: auto; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-size: 11px; }
.methodology-block[open] .methodology-block__hint { display: none; }
.methodology-block__body { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.methodology-block__body p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0 0 14px; max-width: 720px; }
.methodology-block__body p:last-child { margin-bottom: 0; }
.methodology-block__weights { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.methodology-block__weights .weight {
    font-family: var(--mono);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--paper);
    border: 1px solid var(--rule);
}
.methodology-block__weights .weight--high { color: var(--bad); border-color: color-mix(in oklch, var(--bad) 30%, var(--rule)); }
.methodology-block__weights .weight--med { color: oklch(0.45 0.15 65); border-color: color-mix(in oklch, var(--warn) 30%, var(--rule)); }
[data-theme="dark"] .methodology-block__weights .weight--med { color: oklch(0.85 0.16 80); }
.methodology-block__weights .weight--low { color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent) 30%, var(--rule)); }
[data-theme="dark"] .methodology-block__weights .weight--low { color: var(--accent); }
.methodology-block__note { font-size: 13px; color: var(--ink-3); }

/* ============ Per-finding accordion ============ */
.finding-accordion {
    margin-top: 14px;
    border-top: 1px dashed var(--rule);
    padding-top: 12px;
}
.finding-accordion summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.finding-accordion summary::-webkit-details-marker { display: none; }
.finding-accordion summary:hover { color: var(--ink-2); }
.finding-accordion__caret { transition: transform .15s ease; display: inline-block; }
.finding-accordion[open] .finding-accordion__caret { transform: rotate(90deg); }
.finding-accordion__check {
    margin-left: auto;
    color: var(--ink-3);
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    background: var(--bg-2);
    padding: 2px 6px;
    border-radius: 4px;
}
.finding-accordion__body {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.finding-accordion__row { display: flex; flex-direction: column; gap: 4px; }
.finding-accordion__label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.finding-accordion__value {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}
.finding-accordion__value a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.finding-accordion__hint {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 11px;
    margin-left: 6px;
}
.finding-accordion__effort {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-left: 4px;
}
.finding-accordion__code {
    background: var(--ink);
    color: var(--bg);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.45;
    margin: 0;
    overflow-x: auto;
    max-height: 280px;
    overflow-y: auto;
    white-space: pre;
}
[data-theme="dark"] .finding-accordion__code {
    background: oklch(0.30 0.012 260);
    color: oklch(0.96 0.005 90);
    border: 1px solid oklch(0.38 0.014 260);
}

/* ============ Admin view ============ */
.admin-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 0;
    padding: 14px 18px;
    background: var(--accent-tint);
    border: 1px solid var(--accent-tint-2);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--accent-ink);
}
[data-theme="dark"] .admin-banner { color: var(--accent); }
.admin-banner__icon { font-size: 16px; }
.admin-banner__text { flex: 1; }
.finding-card__premium-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--accent-tint);
    color: var(--accent-ink);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
[data-theme="dark"] .finding-card__premium-tag { color: var(--accent); }

/* ============ Auth pages (login / register) ============ */
.auth-wrap { max-width: 520px; }
.auth-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    box-shadow: var(--shadow-md);
}
.auth-card__title {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 18px 0 12px;
}
.auth-card__title em { font-style: italic; color: var(--accent); }
.auth-card__lede { color: var(--ink-2); font-size: 15px; margin: 0 0 24px; }
.auth-card__errors {
    background: color-mix(in oklch, var(--bad) 8%, transparent);
    border: 1px solid color-mix(in oklch, var(--bad) 30%, var(--rule));
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.auth-card__error {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--bad);
    line-height: 1.5;
}
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form__field { display: flex; flex-direction: column; gap: 6px; }
.auth-form__field span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.auth-form__field input,
.auth-form__field textarea,
.auth-form__field select {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--ink);
    font-family: var(--sans);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-form__field select {
    appearance: none;
    -webkit-appearance: none;
    /* Inline chevron — matches native dropdown affordance without the OS-specific look */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}
.auth-form__field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.auth-form__field input[type="number"]::-webkit-outer-spin-button,
.auth-form__field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.auth-form__field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.auth-form__field input:focus,
.auth-form__field textarea:focus,
.auth-form__field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent);
}
.auth-form__hint {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.5;
}
.auth-form__hint code {
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
}
.auth-card__foot {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed var(--rule);
    font-size: 14px;
    color: var(--ink-3);
}
.auth-card__foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Agency signup — wider card, fieldset groups, stub-payment notice */
.auth-card--wide { max-width: 560px; }
.auth-form__group {
    border: none; padding: 0; margin: 0 0 18px;
}
.auth-form__group legend {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 10px;
}
.auth-form__group .auth-form__field { margin-bottom: 12px; }
.auth-form__group .auth-form__field:last-child { margin-bottom: 0; }
.auth-form__field span small { font-weight: 400; color: var(--ink-3); }

.account-password-form {
    max-width: 480px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 24px;
}

/* ============ Account dashboard ============ */
.account-flash {
    background: var(--accent-tint);
    border: 1px solid var(--accent-tint-2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--accent-ink);
}
[data-theme="dark"] .account-flash { color: var(--accent); }

.account-empty {
    background: var(--bg-2);
    border: 1px dashed var(--rule-2);
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
}
.account-empty p { color: var(--ink-2); font-size: 16px; margin: 0 0 18px; }

.account-audits {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
}
.account-audits__head, .account-audits__row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 0.6fr 0.8fr 32px;
    gap: 16px;
    padding: 14px 20px;
    align-items: center;
}
.account-audits--super .account-audits__head,
.account-audits--super .account-audits__row {
    grid-template-columns: 1.6fr 1fr 1fr 0.7fr 0.5fr 0.7fr 32px;
}
.account-audits__runby {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-audits__head {
    background: var(--bg-2);
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.account-audits__row {
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
    text-decoration: none;
    color: inherit;
    transition: background .12s ease;
}
.account-audits__row:last-child { border-bottom: 0; }
.account-audits__row:hover { background: var(--bg-2); }
.account-audits__hostname {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-audits__date { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.account-audits__tier {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    background: var(--bg-3);
    color: var(--ink-2);
    width: fit-content;
}
.account-audits__tier--paid { background: var(--ink); color: var(--bg); }
.account-audits__score {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
}
.account-audits__status {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
}
.account-audits__status--running, .account-audits__status--queued { color: var(--accent); }
.account-audits__status--failed { color: var(--bad); }
.account-audits__view { color: var(--ink-3); font-family: var(--mono); }
@media (max-width: 760px) {
    .account-audits__head { display: none; }
    .account-audits__row { grid-template-columns: 1fr auto; gap: 6px; padding: 14px 16px; }
    .account-audits__date, .account-audits__tier, .account-audits__status { grid-column: 1; font-size: 11px; }
    .account-audits__score, .account-audits__view { grid-column: 2; }
}

/* ---- Sidebar shell ---- */
.account-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.account-side {
    position: sticky;
    top: 80px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.account-side__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px dashed var(--rule); }
.account-side__name { font-family: var(--serif); font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.account-side__email { font-family: var(--mono); font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.account-side__super {
    align-self: flex-start;
    background: var(--ink);
    color: var(--bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-top: 4px;
}
.account-side__nav { display: flex; flex-direction: column; gap: 4px; }
.account-side__link {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink-2);
    font-size: 15px;
    transition: background .12s ease, color .12s ease;
}
.account-side__link .num {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}
.account-side__link:hover { background: var(--bg-2); color: var(--ink); }
.account-side__link.is-active {
    background: var(--accent-tint);
    color: var(--accent-ink);
}
[data-theme="dark"] .account-side__link.is-active { color: var(--accent); }
.account-side__link.is-active .num { color: inherit; }
.account-side__foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px dashed var(--rule);
}
.account-side__foot .btn { width: 100%; justify-content: center; text-align: center; }

/* ---- Main column ---- */
.account-main { min-width: 0; }
.account-main__head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.account-main__title {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 12px 0 10px;
}
.account-main__lede { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 60ch; margin: 0; }

/* ---- Profile form ---- */
.account-form { max-width: 720px; }
.account-form__row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .account-form__row { grid-template-columns: 1fr 1fr; } }

/* ============ Agency settings page ============ */
.agency-settings__usage {
    margin: 0 0 28px;
    padding: 18px 20px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--bg-2);
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.agency-settings__usage-bar { flex: 1 1 300px; }
.agency-settings__billing-cta { white-space: nowrap; }
.agency-settings__usage-label {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 10px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    letter-spacing: 0.05em; text-transform: uppercase;
}
.agency-settings__usage-label strong { color: var(--ink); font-weight: 600; }
.agency-settings__usage-track {
    height: 8px; background: var(--bg-3); border-radius: 999px; overflow: hidden;
}
.agency-settings__usage-fill {
    height: 100%; background: var(--accent); border-radius: 999px;
    transition: width 0.6s cubic-bezier(.2,.8,.2,1);
}

.agency-settings__logo { margin-bottom: 18px; }
.agency-settings__logo-label {
    display: block;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 8px;
}
.agency-settings__logo-preview {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 16px;
    background: var(--bg-2); border: 1px solid var(--rule); border-radius: 8px;
    margin-bottom: 10px;
}
.agency-settings__logo-preview img { max-height: 60px; max-width: 240px; display: block; }
.agency-settings__logo-empty {
    padding: 12px 16px;
    background: var(--bg-2); border: 1px dashed var(--rule); border-radius: 8px;
    margin-bottom: 10px;
    font-size: 13px; color: var(--ink-3); font-style: italic;
}
.agency-settings__logo-input { display: block; margin-top: 4px; font-size: 13px; }
.agency-settings__logo-remove {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px;
    font-size: 13px; color: var(--ink-2);
    cursor: pointer;
}
.agency-settings__logo-remove input { margin: 0; }

.agency-settings__team-audits {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
}
.agency-settings__team-empty {
    padding: 28px 24px;
    text-align: center;
    background: var(--bg-2); border: 1px dashed var(--rule); border-radius: 10px;
    color: var(--ink-3); font-size: 14px;
}
.agency-settings__team-list {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--rule); border-radius: 10px;
    background: var(--bg-2);
}
.agency-settings__team-row {
    display: grid;
    grid-template-columns: 2fr 1.4fr auto auto auto;
    gap: 4px 16px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
}
.agency-settings__team-row:last-child { border-bottom: none; }
.agency-settings__team-host {
    color: var(--ink); font-weight: 600;
    text-decoration: none;
}
.agency-settings__team-host:hover { color: var(--accent); text-decoration: underline; }
.agency-settings__team-member { color: var(--ink-2); font-size: 13px; }
.agency-settings__team-tier {
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 2px 8px; border-radius: 999px;
    background: var(--bg-3); color: var(--ink-2);
}
.agency-settings__team-tier--paid { background: color-mix(in oklch, var(--accent) 18%, var(--bg-3)); color: var(--accent-ink); }
.agency-settings__team-score {
    font-family: var(--mono); font-weight: 600;
    color: var(--ink); min-width: 28px; text-align: right;
}
.agency-settings__team-time { color: var(--ink-3); font-size: 12px; font-family: var(--mono); }

@media (max-width: 720px) {
    .agency-settings__team-row {
        grid-template-columns: 1fr auto;
        row-gap: 6px;
    }
    .agency-settings__team-member { grid-column: 1 / 3; }
    .agency-settings__team-time   { grid-column: 1 / 3; }
}

.agency-settings__members {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
}
.agency-settings__members-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 16px;
}
.agency-settings__members-head h2 { margin: 0; font-size: 20px; }
.agency-settings__members-count {
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.agency-settings__members-list {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--rule); border-radius: 10px;
    background: var(--bg-2);
}
.agency-settings__member {
    display: grid; gap: 4px 16px;
    grid-template-columns: 1fr 1fr auto auto;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
}
.agency-settings__member:last-child { border-bottom: none; }
.agency-settings__member-name { font-weight: 600; color: var(--ink); }
.agency-settings__member-email { color: var(--ink-2); font-size: 13px; }
.agency-settings__member-role {
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 3px 8px; border-radius: 999px;
    background: var(--bg-3); color: var(--ink-2);
}
.agency-settings__member-joined {
    font-size: 12px; color: var(--ink-3); font-family: var(--mono);
}
.agency-settings__members-hint {
    margin: 14px 0 0;
    font-size: 13px; color: var(--ink-3);
}
.agency-settings__members-hint a { color: var(--accent); text-decoration: underline; }

@media (max-width: 640px) {
    .agency-settings__member {
        grid-template-columns: 1fr; gap: 4px;
    }
    .agency-settings__member-role { justify-self: start; }
}

@media (max-width: 880px) {
    .account-shell { grid-template-columns: 1fr; gap: 24px; }
    .account-side { position: static; }
    .account-side__nav { flex-direction: row; flex-wrap: wrap; }
    .account-side__link { flex: 1 1 auto; }
}

/* ============ Admin dashboard ============ */
.admin-shell { max-width: 1280px; }
.admin-head { margin-bottom: 24px; }
.admin-head--with-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.admin-head__actions { display: flex; gap: 8px; padding-top: 28px; }
.admin-head__title {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 14px 0 8px;
}
.admin-head__lede { color: var(--ink-2); font-size: 15px; max-width: 820px; }

/* Persistent admin bar — rendered globally for super users via layout.antlers.html.
   Sits directly under the main nav, before any page content. */
.admin-bar {
    position: sticky;
    top: 60px;            /* matches .nav row height */
    z-index: 49;
    background: color-mix(in oklch, var(--ink) 96%, transparent);
    color: var(--bg);
    border-bottom: 1px solid color-mix(in oklch, var(--ink) 70%, var(--rule));
    backdrop-filter: blur(8px);
    font-family: var(--mono);
    font-size: 12px;
}
.admin-bar__row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}
.admin-bar__label {
    color: oklch(0.7 0.18 30);
    font-weight: 500;
    letter-spacing: 0.14em;
    font-size: 10px;
    margin-right: 8px;
}
.admin-bar__item {
    padding: 6px 12px;
    border-radius: 6px;
    color: oklch(0.78 0.01 260);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.admin-bar__item:hover { background: oklch(0.28 0.01 260); color: var(--bg); }
.admin-bar__item.is-active {
    background: oklch(0.7 0.18 30);
    color: var(--bg);
    font-weight: 500;
}
[data-theme="dark"] .admin-bar {
    background: color-mix(in oklch, oklch(0.10 0.01 260) 96%, transparent);
    color: oklch(0.97 0.005 90);
    border-bottom-color: oklch(0.32 0.014 260);
}
[data-theme="dark"] .admin-bar__item:hover {
    background: oklch(0.24 0.014 260);
    color: oklch(0.97 0.005 90);
}
.admin-bar__sep {
    width: 1px;
    height: 18px;
    background: oklch(0.4 0.01 260);
    margin: 0 6px;
}

/* Legacy alias kept so any stray .admin-nav references still flow nicely */
.admin-nav { display: none; }

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 40px;
}
.admin-stat {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 18px 20px;
}
.admin-stat__label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.admin-stat__value {
    font-family: var(--serif);
    font-size: 36px;
    line-height: 1;
    margin: 8px 0 6px;
    letter-spacing: -0.02em;
}
.admin-stat__foot { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.admin-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.admin-quicklink {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
    display: block;
}
.admin-quicklink:hover { border-color: var(--accent); transform: translateY(-1px); }
.admin-quicklink h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 6px; }
.admin-quicklink p { color: var(--ink-2); font-size: 13px; line-height: 1.5; }

.admin-section { margin-bottom: 40px; }
.admin-section h2 {
    font-family: var(--serif);
    font-size: 26px;
    margin-bottom: 14px;
}

/* Per-provider spend rollup on /admin/cost */
.admin-cost-rollup {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--bg-2);
}
.admin-cost-rollup__row {
    display: grid;
    grid-template-columns: 160px 1fr 60px 90px;
    align-items: center;
    gap: 12px;
}
.admin-cost-rollup__name { font-size: 14px; color: var(--ink); }
.admin-cost-rollup__bar {
    height: 10px;
    background: var(--bg-3);
    border-radius: 999px;
    overflow: hidden;
}
.admin-cost-rollup__bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
    background: var(--accent);
}
.admin-cost-rollup__bar-fill--claude     { background: oklch(0.62 0.16 30); }
.admin-cost-rollup__bar-fill--openai     { background: oklch(0.62 0.16 145); }
.admin-cost-rollup__bar-fill--perplexity { background: oklch(0.62 0.18 235); }
.admin-cost-rollup__bar-fill--mistral    { background: oklch(0.62 0.18 290); }
.admin-cost-rollup__pct  { font-size: 12px; color: var(--ink-3); text-align: right; }
.admin-cost-rollup__cost { font-size: 14px; color: var(--ink); text-align: right; }

/* Provider chips inside the per-audit cost table */
.admin-cost-row__providers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.admin-cost-chip {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--ink-2);
    cursor: help;
}
.admin-cost-chip--claude     { background: color-mix(in oklch, oklch(0.62 0.16 30)  20%, transparent); color: oklch(0.42 0.16 30); }
.admin-cost-chip--openai     { background: color-mix(in oklch, oklch(0.62 0.16 145) 20%, transparent); color: oklch(0.42 0.16 145); }
.admin-cost-chip--perplexity { background: color-mix(in oklch, oklch(0.62 0.18 235) 20%, transparent); color: oklch(0.42 0.18 235); }
.admin-cost-chip--mistral    { background: color-mix(in oklch, oklch(0.62 0.18 290) 20%, transparent); color: oklch(0.42 0.18 290); }
[data-theme="dark"] .admin-cost-chip--claude     { color: oklch(0.78 0.16 30); }
[data-theme="dark"] .admin-cost-chip--openai     { color: oklch(0.78 0.16 145); }
[data-theme="dark"] .admin-cost-chip--perplexity { color: oklch(0.78 0.18 235); }
[data-theme="dark"] .admin-cost-chip--mistral    { color: oklch(0.78 0.18 290); }
.admin-failed-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.admin-failed-head h2 { margin-bottom: 0; }
.admin-failed-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-failed-actions form { display: inline; }
.admin-failed-actions .btn { padding: 8px 14px; font-size: 13px; }

.admin-audits-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.admin-audits-filters__q,
.admin-audits-filters__select {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: var(--mono);
    color: var(--ink);
}
.admin-audits-filters__q { flex: 1; min-width: 220px; }
.admin-audits-filters__clear { color: var(--ink-3); font-size: 12px; padding: 0 8px; }
.admin-audit-row:hover { background: var(--bg-2); }
.admin-status-completed { color: var(--good); }
.admin-status-running, .admin-status-queued { color: var(--accent); }
.admin-status-failed { color: var(--bad); }

.admin-table-wrap {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.admin-table th {
    text-align: left;
    background: var(--bg-2);
    padding: 12px 16px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.admin-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.admin-table tbody tr:hover { background: var(--bg-2); }
.admin-table__detail td {
    background: var(--bg-2);
    border-top: 0;
    padding: 14px 16px 18px;
    color: var(--ink-2);
    font-size: 12px;
}
.admin-table__detail .admin-method { margin: 4px 0; line-height: 1.5; }
.admin-table__detail .admin-method b { color: var(--ink); }
.admin-table .mono, .admin-shell .mono { font-family: var(--mono); font-size: 12px; }
.admin-table .ink-3, .admin-shell .ink-3 { color: var(--ink-3); }
.admin-table .ink-2, .admin-shell .ink-2 { color: var(--ink-2); }

.admin-check__handle { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.admin-check__class { color: var(--ink-3); font-size: 11px; margin-top: 2px; }

.admin-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    background: var(--bg-3);
    color: var(--ink-2);
}
.admin-pill--performance   { background: color-mix(in oklch, var(--accent) 20%, transparent); color: var(--accent-ink); }
.admin-pill--seo           { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }
.admin-pill--accessibility { background: color-mix(in oklch, var(--warn) 22%, transparent); color: oklch(0.45 0.15 65); }
.admin-pill--security      { background: color-mix(in oklch, var(--bad) 18%, transparent); color: var(--bad); }
.admin-pill--conversion    { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent-ink); }
.admin-pill--ok            { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }
[data-theme="dark"] .admin-pill--accessibility { color: oklch(0.85 0.16 80); }
[data-theme="dark"] .admin-pill--performance,
[data-theme="dark"] .admin-pill--conversion { color: var(--accent); }

.admin-sev { font-family: var(--mono); font-size: 12px; }
.admin-sev--high { color: var(--bad); }
.admin-sev--med  { color: oklch(0.45 0.15 65); }
[data-theme="dark"] .admin-sev--med { color: oklch(0.85 0.16 80); }
.admin-sev--low  { color: var(--ink-3); }

.admin-status { font-family: var(--mono); font-size: 12px; }
.admin-status--ok      { color: var(--good); }
.admin-status--missing { color: var(--bad); }

.admin-foot { color: var(--ink-3); font-size: 13px; margin-top: 24px; }
.admin-foot code { background: var(--bg-2); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.admin-empty {
    background: var(--bg-2);
    border: 1px dashed var(--rule-2);
    border-radius: 10px;
    padding: 32px;
    text-align: center;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 13px;
}
.admin-exc {
    max-width: 540px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.admin-llm-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 16px;
}
.admin-llm-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--rule);
    margin-bottom: 14px;
}
.admin-llm-card__name { font-family: var(--serif); font-size: 24px; }
.admin-llm-card__model { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.admin-llm-card__status {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}
.admin-llm-card__status--active { background: color-mix(in oklch, var(--good) 20%, transparent); color: var(--good); }
.admin-llm-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--bg-2);
}
.admin-llm-totals__item { display: flex; flex-direction: column; gap: 4px; }
.admin-llm-totals__label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.admin-llm-totals__value {
    font-size: 22px;
    color: var(--ink);
}
.admin-llm-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 16px;
    padding: 12px 14px;
    margin-top: 10px;
    border: 1px dashed var(--rule);
    border-radius: 8px;
    background: color-mix(in oklch, var(--bg-2) 60%, transparent);
}
.admin-llm-card__stat { display: flex; flex-direction: column; gap: 2px; }
.admin-llm-card__stat-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.admin-llm-card__stat-value {
    font-size: 15px;
    color: var(--ink);
}
.admin-llm-card__row {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    font-size: 13px;
    align-items: baseline;
}
.admin-llm-card__label {
    min-width: 100px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.admin-llm-card__detail { margin-top: 14px; }
.admin-llm-card__detail summary {
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    list-style: none;
    padding: 8px 0;
}
.admin-llm-card__detail summary::-webkit-details-marker { display: none; }
.admin-llm-card__detail summary:hover { color: var(--ink); }
.admin-llm-card__code {
    background: var(--ink);
    color: var(--bg);
    border-radius: 6px;
    padding: 14px 16px;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 480px;
    overflow-y: auto;
    white-space: pre-wrap;
}
[data-theme="dark"] .admin-llm-card__code {
    background: oklch(0.30 0.012 260);
    color: oklch(0.96 0.005 90);
    border: 1px solid oklch(0.38 0.014 260);
}

.admin-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-score-pill {
    display: inline-block;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 6px 12px;
    font-family: var(--mono);
    font-size: 12px;
}

.admin-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 4px 24px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 18px 22px;
    font-size: 13px;
}
.admin-meta-grid > div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.admin-meta-grid > div:last-child { border-bottom: 0; }
.admin-meta__label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    min-width: 110px;
}
.admin-meta__value { flex: 1; word-break: break-word; }

.admin-subscore-list { display: flex; flex-direction: column; gap: 8px; }
.admin-subscore {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}
.admin-subscore[open] { border-color: var(--rule-2); }
.admin-subscore summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1.5fr auto 24px;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
}
.admin-subscore summary::-webkit-details-marker { display: none; }
.admin-subscore summary:hover { background: var(--bg-2); }
.admin-subscore__name {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.admin-subscore__value { font-family: var(--serif); font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
.admin-subscore__caret { color: var(--ink-3); font-family: var(--mono); transition: transform .15s ease; text-align: right; }
.admin-subscore[open] .admin-subscore__caret { transform: rotate(90deg); }
.admin-subscore__body {
    border-top: 1px dashed var(--rule);
    padding: 14px 18px 16px;
    background: var(--bg-2);
}
.admin-subscore__rows { display: flex; flex-direction: column; gap: 0; }
.admin-subscore__row {
    display: grid;
    grid-template-columns: 48px 56px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rule);
    font-size: 13px;
}
.admin-subscore__row:last-child { border-bottom: 0; }
.admin-subscore__math {
    text-align: right;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-2);
}
.admin-subscore__math b { color: var(--ink); }
.admin-subscore__positives {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule);
}
.admin-subscore__pos-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}

.admin-finding-detail {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--bg-2);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.55;
}
.admin-finding-detail p { margin: 0 0 8px; color: var(--ink-2); }
.admin-finding-detail p:last-child { margin-bottom: 0; }
.admin-finding-detail summary { cursor: pointer; }
.admin-finding-evidence summary {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 6px 0;
}

/* ============ Audora.One — branded screens ============ */
/* Brand surface for every screen that's been ported. Selectors chain the
   theme attribute on <html> AND the screen label on <body> so the rule's
   specificity (0,2,0) beats the bare [data-theme="dark"] block (0,1,0)
   that comes earlier in the file. The `account` screen is intentionally
   excluded — it stays on the legacy palette until rebranded.

   Adding a new screen: append the [data-screen-label="X"] selector to both
   the light and dark blocks below. */
[data-theme="light"] [data-screen-label="home"],
[data-theme="light"] [data-screen-label="audit"],
[data-theme="light"] [data-screen-label="agency"],
[data-theme="light"] [data-screen-label="paid"],
[data-theme="light"] [data-screen-label="admin"],
[data-theme="light"] [data-screen-label="account"] {
    --bg:    #FAFAF7;
    --bg-2:  #F4F4EF;
    --bg-3:  #EAEAE5;
    --rule:  #EAEAE5;
    --accent:      var(--accent-ember);
    --accent-ink:  oklch(0.55 0.20 35);
    --accent-tint: oklch(0.95 0.04 35);
}
[data-theme="dark"] [data-screen-label="home"],
[data-theme="dark"] [data-screen-label="audit"],
[data-theme="dark"] [data-screen-label="agency"],
[data-theme="dark"] [data-screen-label="paid"],
[data-theme="dark"] [data-screen-label="admin"],
[data-theme="dark"] [data-screen-label="account"] {
    /* Brand dark canvas. Lifted from #0A0A0A → #161616 so cards/paper feel
       layered rather than punched out of pure black. Inks/bg-2/bg-3 inherit
       from the [data-theme="dark"] block; only base surface + accent change. */
    --bg:    #161616;
    --bg-2:  oklch(0.23 0.008 260);
    --bg-3:  oklch(0.28 0.010 260);
    --accent:      var(--accent-ember);
    --accent-tint: oklch(0.28 0.05 35);
}

.report-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

/* ============ Link preview card (Social section) ============ */
.link-preview-card {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--bg-2);
    border-radius: 10px;
    border: 1px solid var(--bg-3);
}
.link-preview-card__lede {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
}
.link-preview-card__mock {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    max-width: 520px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.link-preview-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 1.91 / 1;
    object-fit: cover;
    background-color: #f4f4f5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.link-preview-card__body {
    padding: 12px 14px;
    color: #18181b;
}
.link-preview-card__url {
    font-size: 11px;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.link-preview-card__title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 4px;
    color: #09090b;
}
.link-preview-card__desc {
    font-size: 13px;
    line-height: 1.45;
    color: #52525b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============ AI Says — top-of-report multi-LLM perception panel ============ */
.ai-says {
    margin: 32px 0 28px;
    padding: 28px;
    border-radius: 14px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
}
.ai-says__head { margin-bottom: 18px; }
.ai-says__title {
    font-family: var(--serif);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    margin: 6px 0 6px;
}
.ai-says__lede {
    color: var(--ink-2);
    font-size: 14px;
    max-width: 640px;
    margin: 0;
}
.ai-says__consensus {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--bg-3);
    border: 1px solid var(--rule);
}
.ai-says__consensus-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.ai-says__consensus-label {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.3;
    color: var(--ink);
}
.ai-says__consensus--positive { background: color-mix(in oklch, var(--good) 12%, var(--bg-2)); border-color: color-mix(in oklch, var(--good) 30%, var(--rule)); }
.ai-says__consensus--positive .ai-says__consensus-eyebrow { color: var(--good); }
.ai-says__consensus--mixed    { background: color-mix(in oklch, var(--warn) 14%, var(--bg-2)); border-color: color-mix(in oklch, var(--warn) 30%, var(--rule)); }
.ai-says__consensus--mixed .ai-says__consensus-eyebrow { color: oklch(0.45 0.15 65); }
.ai-says__consensus--negative { background: color-mix(in oklch, var(--bad) 12%, var(--bg-2)); border-color: color-mix(in oklch, var(--bad) 30%, var(--rule)); }
.ai-says__consensus--negative .ai-says__consensus-eyebrow { color: var(--bad); }

.ai-says__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.ai-says-card__citations {
    border-top: 1px dashed var(--rule);
    padding-top: 12px;
    margin-top: 4px;
}
.ai-says-card__citations ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.ai-says-card__citations a {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--accent-tint);
    transition: background .12s ease;
}
.ai-says-card__citations a:hover { background: var(--accent-tint-2); }
.ai-says-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.ai-says-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ai-says-card__provider {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent);
}
.ai-says-card__sentiment {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px;
}
.ai-says-card__sentiment--positive { background: color-mix(in oklch, var(--good) 14%, transparent); color: var(--good); }
.ai-says-card__sentiment--neutral  { background: var(--bg-3); color: var(--ink-2); }
.ai-says-card__sentiment--mixed    { background: color-mix(in oklch, var(--warn) 18%, transparent); color: oklch(0.45 0.15 65); }
.ai-says-card__sentiment--negative { background: color-mix(in oklch, var(--bad) 14%, transparent); color: var(--bad); }
.ai-says-card__pitch {
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    color: var(--ink);
}
.ai-says-card__identity {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-2);
}
.ai-says-card__identity > div { width: 100%; }
.ai-says-card__chip {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 4px;
    background: var(--accent-tint);
    color: var(--accent-ink);
}
.ai-says-card__chip--muted { background: var(--bg-3); color: var(--ink-3); }
.ai-says-card__row { font-size: 13px; color: var(--ink-2); }
.ai-says-card__reason {
    font-size: 13px; color: var(--ink-2);
    margin: 0; line-height: 1.5;
    font-style: italic;
}
.ai-says-card__list-eyebrow {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 4px;
}
.ai-says-card__list-eyebrow--bad { color: var(--bad); }
.ai-says-card__list ul {
    margin: 0; padding-left: 18px;
    font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.ai-says-card__verdict {
    padding: 10px 12px; border-radius: 6px;
    background: color-mix(in oklch, var(--good) 6%, var(--bg-2));
}
.ai-says-card__verdict--warn { background: color-mix(in oklch, var(--warn) 12%, var(--bg-2)); }
.ai-says-card__verdict p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }

/* ============ Branded report chrome (white-label) ============
   Rendered by partials/report-chrome-head.antlers.html and
   partials/report-chrome-foot.antlers.html when brand.is_branded.
   Replaces the global nav/footer on white-labeled audit reports. */
.report-chrome-head {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}
.report-chrome-head__row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0;
}
.report-chrome-head__brand { display: flex; align-items: center; gap: 10px; }
.report-chrome-head__logo { max-height: 36px; width: auto; display: block; }
.report-chrome-head__name {
    font-family: var(--display, var(--sans)); font-size: 20px; font-weight: 600;
    color: var(--ink);
}

.report-chrome-foot {
    margin-top: 64px; padding: 28px 0;
    border-top: 1px solid var(--rule);
    background: var(--bg-2);
}
.report-chrome-foot__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.report-chrome-foot__brand { display: flex; align-items: center; gap: 10px; }
.report-chrome-foot__logo { max-height: 24px; width: auto; }
.report-chrome-foot__name { font-weight: 600; color: var(--ink); }
.report-chrome-foot__powered {
    font-size: 13px; color: var(--ink-3); font-family: var(--mono);
}
.report-chrome-foot__powered a {
    color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--ink-3);
}
.report-chrome-foot__powered a:hover { color: var(--ink); }

/* ============ Admin · Audit steps + LLM call inspector ============ */
.admin-step--error  td:first-child { color: var(--bad); }
.admin-step--failed td:first-child { color: var(--warn); }
.admin-step--passed td:first-child { color: var(--good); }
.admin-step__error {
    display: block; padding: 6px 10px;
    background: color-mix(in oklch, var(--bad) 10%, var(--bg-2));
    border-left: 3px solid var(--bad);
    border-radius: 4px;
    font-family: var(--mono); font-size: 11px;
    color: var(--bad); white-space: pre-wrap; word-break: break-word;
}

.admin-pill--bad {
    background: color-mix(in oklch, var(--bad) 18%, transparent);
    color: var(--bad);
    margin-left: 8px;
}

.admin-llm-list { display: flex; flex-direction: column; gap: 8px; }
.admin-llm-call {
    border: 1px solid var(--rule); border-radius: 8px;
    background: var(--bg-2);
    overflow: hidden;
}
.admin-llm-call--bad { border-color: color-mix(in oklch, var(--bad) 50%, var(--rule)); }
.admin-llm-call__head {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto auto auto;
    gap: 14px; align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
}
.admin-llm-call__head::-webkit-details-marker { display: none; }
.admin-llm-call[open] .admin-llm-call__head {
    border-bottom: 1px solid var(--rule);
}
.admin-llm-call__provider { font-weight: 600; color: var(--ink); text-transform: capitalize; }
.admin-llm-call__model    { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.admin-llm-call__status {
    font-family: var(--mono); font-size: 11px;
    padding: 2px 8px; border-radius: 999px;
}
.admin-llm-call__status--ok  { background: color-mix(in oklch, var(--good) 16%, transparent); color: var(--good); }
.admin-llm-call__status--bad { background: color-mix(in oklch, var(--bad) 18%, transparent); color: var(--bad); }
.admin-llm-call__check   { font-size: 11px; }
.admin-llm-call__latency { font-size: 11px; }
.admin-llm-call__time    { font-size: 11px; }
.admin-llm-call__error-pill {
    background: var(--bad); color: white;
    font-family: var(--mono); font-size: 10px;
    padding: 2px 6px; border-radius: 4px;
}
.admin-llm-call__body { padding: 14px 16px; background: var(--bg); }
.admin-llm-call__section { margin-bottom: 14px; }
.admin-llm-call__section:last-child { margin-bottom: 0; }
.admin-llm-call__label {
    display: block;
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-3); margin-bottom: 6px;
}
.admin-llm-call__error-block {
    border-left: 3px solid var(--bad);
    background: color-mix(in oklch, var(--bad) 8%, var(--bg-2));
    color: var(--bad);
}

@media (max-width: 720px) {
    .admin-llm-call__head { grid-template-columns: 1fr; gap: 4px; }
}

/* ============ Audit upgrade · Feature list ============ */
.upgrade-features {
    display: flex; flex-direction: column; gap: 8px;
    margin: 0 0 24px;
    padding: 16px 18px;
    background: var(--bg-2); border: 1px solid var(--rule); border-radius: 10px;
}
.upgrade-feature { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.upgrade-feature__icon { color: var(--good); font-weight: 600; flex-shrink: 0; }

/* Free-report upsell card (rendered inside audit.antlers.html) */
.audit-upsell {
    margin: 24px 0;
    padding: 22px 24px;
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 12%, var(--bg-2)), var(--bg-2));
    border: 1.5px solid var(--accent);
    border-radius: 12px;
    display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.audit-upsell__copy { flex: 1 1 280px; }
.audit-upsell__title { margin: 0 0 4px; font-size: 18px; color: var(--ink); }
.audit-upsell__lede { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.audit-upsell__cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 22px;
    background: var(--accent); color: white; border-radius: 8px;
    font-weight: 600; text-decoration: none;
    white-space: nowrap;
}
.audit-upsell__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in oklch, var(--accent) 30%, transparent); }
.audit-upsell__price { font-size: 13px; opacity: 0.85; }

/* Home-page dual CTA (free vs paid) */
.url-form__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.url-form__buttons .btn { flex: 1 1 auto; }

/* ============ Agency signup · Payment Element ============ */
.payment-form { display: flex; flex-direction: column; gap: 20px; }
.payment-form__plans {
    border: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.payment-form__plans legend {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 8px; grid-column: 1 / -1;
}
.payment-form__plan {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 18px;
    background: var(--bg-2); border: 1.5px solid var(--rule); border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.payment-form__plan:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 8%, var(--bg-2));
}
.payment-form__plan input { position: absolute; opacity: 0; }
.payment-form__plan-title { font-weight: 600; color: var(--ink); font-size: 14px; }
.payment-form__plan-amount {
    font-family: var(--display, var(--sans));
    font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1;
}
.payment-form__plan-amount small {
    font-family: var(--mono); font-size: 12px; font-weight: 400;
    color: var(--ink-3); margin-left: 2px;
}
.payment-form__plan-badge {
    position: absolute; top: 8px; right: 8px;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--good);
    background: color-mix(in oklch, var(--good) 18%, transparent);
    padding: 2px 6px; border-radius: 4px;
}

.payment-form__field { display: flex; flex-direction: column; gap: 8px; }
.payment-form__field > label {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-3);
}
.payment-form__element {
    padding: 12px;
    background: var(--bg-2); border: 1px solid var(--rule); border-radius: 8px;
    min-height: 48px;
}
.payment-form__loading { color: var(--ink-3); font-size: 13px; padding: 14px 4px; }
.payment-form__spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: payment-form-spin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes payment-form-spin { to { transform: rotate(360deg); } }

/* ============ Admin · Pricing ============ */
.pricing-grid {
    display: grid; gap: 16px;
    grid-template-columns: 1fr;
    margin-top: 8px;
}
@media (min-width: 720px)  { .pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .pricing-grid { grid-template-columns: 1fr 1fr 1fr; } }

.pricing-card {
    background: var(--bg-2);
    border: 1px solid var(--rule); border-radius: 12px;
    padding: 22px 24px;
}
.pricing-card__head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    margin-bottom: 16px;
}
.pricing-card__label { margin: 0; font-size: 18px; }
.pricing-card__sku { font-size: 11px; margin-top: 4px; }
.pricing-card__price {
    font-family: var(--display, var(--sans));
    font-size: 36px; font-weight: 600; line-height: 1; color: var(--ink);
}
.pricing-card__currency { font-size: 22px; color: var(--ink-3); margin-right: 2px; }
.pricing-card__stripe-id {
    font-size: 12px; margin-bottom: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pricing-card__stripe-id code { color: var(--ink-2); font-size: 11px; }
.pricing-card__warn {
    background: color-mix(in oklch, var(--warn) 10%, var(--bg-2));
    border-left: 3px solid var(--warn);
    padding: 10px 12px; border-radius: 4px;
    font-size: 13px; color: var(--ink-2);
    margin-bottom: 16px;
}
.pricing-card__form { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.pricing-card__form .auth-form__field { margin: 0; }
.pricing-card__form button { align-self: flex-start; }
.pricing-card__history { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.pricing-card__history summary { cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.pricing-card__history summary:hover { color: var(--accent); }
.pricing-card__history-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pricing-card__history-list li {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline;
    padding: 6px 0; font-size: 12px;
    border-bottom: 1px dashed var(--rule);
}
.pricing-card__history-list li:last-child { border-bottom: none; }
.pricing-card__history-list code { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ Admin · Agencies ============ */
.admin-filters { display: flex; gap: 8px; align-items: center; }
.admin-filters__input,
.admin-filters__select {
    padding: 8px 12px; font-size: 13px;
    background: var(--bg-2); border: 1px solid var(--rule); border-radius: 8px;
    color: var(--ink);
}
.admin-empty {
    padding: 28px 20px; text-align: center;
    background: var(--bg-2); border: 1px dashed var(--rule); border-radius: 10px;
    color: var(--ink-3); font-size: 14px; font-style: italic;
}
.admin-back {
    display: inline-block; margin-bottom: 6px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    text-decoration: none;
}
.admin-back:hover { color: var(--accent); }

.admin-section { margin-top: 36px; }
.admin-section__title { margin: 0 0 14px; font-size: 18px; }

.admin-agency__swatch {
    display: inline-block;
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1px solid var(--rule);
    vertical-align: middle;
}
.admin-agency__swatch--empty {
    background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 4px, var(--bg-3) 4px, var(--bg-3) 8px);
}
.admin-agency__name {
    font-weight: 600; color: var(--ink); text-decoration: none;
}
.admin-agency__name:hover { color: var(--accent); text-decoration: underline; }
.admin-agency__slug {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    margin-top: 2px;
}
.admin-agency-detail__logo {
    max-height: 48px; max-width: 200px;
    border: 1px solid var(--rule); border-radius: 8px;
    padding: 6px 10px; background: var(--bg-2);
}

.admin-quota {
    font-family: var(--mono); font-size: 13px;
}
.admin-quota__sep { color: var(--ink-3); }

.admin-status--active          { color: var(--good); }
.admin-status--succeeded       { color: var(--good); }
.admin-status--pending_payment { color: var(--warn); }
.admin-status--requires_action { color: var(--warn); }
.admin-status--suspended       { color: var(--bad); }
.admin-status--failed          { color: var(--bad); }
.admin-status--refunded        { color: var(--ink-3); }
.admin-stat__value--warn       { color: var(--warn); }
.admin-stat__value--bad        { color: var(--bad); }

.admin-pill--super  { background: color-mix(in oklch, var(--accent) 22%, transparent); color: var(--accent-ink); }
.admin-pill--role   { background: var(--bg-3); color: var(--ink-2); }
.admin-pill--free   { background: var(--bg-3); color: var(--ink-3); }
.admin-pill--paid   { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }

/* ============ Admin · Analytics dashboard ============ */
.analytics-range {
    display: inline-flex; gap: 4px;
    padding: 4px;
    background: var(--bg-2); border: 1px solid var(--rule); border-radius: 999px;
}
.analytics-range__btn {
    padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-family: var(--mono);
    color: var(--ink-2); text-decoration: none;
}
.analytics-range__btn.is-active {
    background: var(--accent); color: white;
}
.analytics-grid {
    display: grid; gap: 16px;
    grid-template-columns: 2fr 1fr;
    margin-bottom: 16px;
}
.analytics-grid--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) {
    .analytics-grid, .analytics-grid--two { grid-template-columns: 1fr; }
}

.analytics-card {
    background: var(--bg-2); border: 1px solid var(--rule); border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 16px;
}
.analytics-card__head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px;
}
.analytics-card__pill {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    padding: 3px 10px; border-radius: 999px; background: var(--bg-3);
}
.analytics-card__big {
    font-family: var(--display, var(--sans));
    font-size: 36px; font-weight: 600; color: var(--ink); line-height: 1;
    margin-bottom: 4px;
}
.analytics-card__sub { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.analytics-card__row {
    display: flex; gap: 18px;
    margin-top: 12px;
    font-size: 12px; font-family: var(--mono); color: var(--ink-3);
}
.analytics-card__row b { color: var(--ink); font-weight: 600; }

.analytics-sparkline-wrap { margin: 8px 0; }
.analytics-sparkline { width: 100%; height: 60px; display: block; }

.analytics-empty {
    padding: 24px; text-align: center;
    font-size: 13px; color: var(--ink-3); font-style: italic;
}

.analytics-list {
    list-style: none; margin: 0; padding: 0;
    counter-reset: rank;
}
.analytics-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px; align-items: center;
    padding: 8px 0; border-bottom: 1px dashed var(--rule);
    font-size: 13px;
}
.analytics-list li:last-child { border-bottom: none; }
.analytics-list li::before {
    counter-increment: rank;
    content: counter(rank, decimal-leading-zero);
    font-family: var(--mono); font-size: 10px; color: var(--ink-3);
}
.analytics-list code {
    color: var(--ink); font-family: var(--mono); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis;
}
.analytics-list__count {
    font-family: var(--mono); color: var(--ink-2); font-weight: 600;
}

.analytics-bucket {
    font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 2px 6px; border-radius: 4px;
    background: var(--bg-3); color: var(--ink-3);
}
.analytics-bucket--search { background: color-mix(in oklch, var(--good) 18%, var(--bg-3)); color: var(--good-ink, var(--ink-2)); }
.analytics-bucket--social { background: color-mix(in oklch, var(--accent) 18%, var(--bg-3)); color: var(--accent-ink); }
.analytics-bucket--direct { background: color-mix(in oklch, var(--warn) 18%, var(--bg-3)); }

.analytics-active-list {
    list-style: none; margin: 0; padding: 0;
}
.analytics-active-list li {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
    padding: 6px 0; font-size: 12px; font-family: var(--mono); color: var(--ink-2);
}
.analytics-active-list code { color: var(--ink); }

.analytics-funnel {
    list-style: none; margin: 0; padding: 0;
    counter-reset: step;
}
.analytics-funnel li {
    counter-increment: step;
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 14px; align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}
.analytics-funnel li:last-child { border-bottom: none; }
.analytics-funnel li::before {
    content: counter(step);
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    width: 22px; text-align: center;
    background: var(--bg-3); border-radius: 999px; padding: 4px 0;
}
.analytics-funnel__label { color: var(--ink); }
.analytics-funnel__count {
    font-family: var(--mono); font-weight: 600; color: var(--ink); font-size: 18px;
}

.analytics-events {
    list-style: none; margin: 0; padding: 0;
}
.analytics-event {
    display: grid;
    grid-template-columns: 200px 140px 1fr auto;
    gap: 12px; align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rule);
    font-size: 12px;
}
.analytics-event:last-child { border-bottom: none; }
.analytics-event__name {
    font-family: var(--mono); color: var(--accent); font-weight: 600;
}
.analytics-event__who { color: var(--ink-2); }
.analytics-event__props {
    font-family: var(--mono); color: var(--ink-3); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.analytics-event__time { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }

@media (max-width: 720px) {
    .analytics-event { grid-template-columns: 1fr; gap: 4px; }
}

/* ============ Misc ============ */
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
[hidden] { display: none !important; }