/* Site Decay -- "your website's regular check-up".
   A clinic's report card, not a hacker terminal: readings with a status,
   plain-English findings, one clear next step. Tokens first; components
   only ever use tokens, so both themes resolve as a set. */

:root {
  --paper: #F3F5F2;
  --surface: #FFFFFF;
  --ink: #17231F;
  --muted: #5B6B66;
  --line: #D9E0DB;
  --brand: #1F5E50;
  --brand-ink: #FFFFFF;
  --brand-soft: #E3EEEA;
  --good: #2E7D4F;
  --good-soft: #E4F2E9;
  --warn: #A8700F;
  --warn-soft: #FBF1DC;
  --bad: #B4432A;
  --bad-soft: #F9E6E1;
  --focus: #E0A93E;
  --shadow: 0 1px 2px rgba(23, 35, 31, .06), 0 8px 24px rgba(23, 35, 31, .05);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.7rem;
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  --radius: 10px;
  --wrap: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1614;
    --surface: #16201D;
    --ink: #E4ECE8;
    --muted: #93A39D;
    --line: #26332F;
    --brand: #6BB7A2;
    --brand-ink: #0F1614;
    --brand-soft: #1C2E29;
    --good: #6CC08C;
    --good-soft: #17291F;
    --warn: #E0A93E;
    --warn-soft: #2C2415;
    --bad: #EE7A5E;
    --bad-soft: #301B16;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1614;
  --surface: #16201D;
  --ink: #E4ECE8;
  --muted: #93A39D;
  --line: #26332F;
  --brand: #6BB7A2;
  --brand-ink: #0F1614;
  --brand-soft: #1C2E29;
  --good: #6CC08C;
  --good-soft: #17291F;
  --warn: #E0A93E;
  --warn-soft: #2C2415;
  --bad: #EE7A5E;
  --bad-soft: #301B16;
  --shadow: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--body);
}
a { color: var(--brand); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-3); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: var(--step-2); font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: var(--step-1); font-weight: 650; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 46rem; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .92em; }
.eyebrow { font: 600 var(--step--1)/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -- header / footer -------------------------------------------------------- */
.site-head { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; flex-wrap: wrap; }
.brand { font: 700 1.2rem/1 var(--display); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
.brand-mark { width: 24px; height: 24px; flex: none; color: var(--brand); }
.nav { display: flex; gap: 1.25rem; align-items: center; font-size: var(--step--1); }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--brand); }
.theme-toggle { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 99px; padding: .25rem .6rem; font: inherit; font-size: var(--step--1); cursor: pointer; }
.site-foot { margin-top: 5rem; border-top: 1px solid var(--line); padding: 2rem 0 3rem; font-size: var(--step--1); color: var(--muted); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.site-foot a { color: var(--muted); }

/* -- buttons / forms -------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: 8px; padding: .8rem 1.2rem; font: 700 var(--step-0)/1 var(--body); background: var(--brand); color: var(--brand-ink); cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 700; font-size: var(--step--1); }
input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 8px; padding: .75rem .9rem;
}
input:focus, textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
textarea { min-height: 7rem; resize: vertical; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--bad); font-weight: 700; margin-top: .6rem; }

/* -- home -------------------------------------------------------------------- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 3rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.hero h1 { max-width: 16ch; }
.hero .lede { font-size: var(--step-1); color: var(--muted); margin-top: 1.1rem; max-width: 36ch; }
.check-form { display: flex; gap: .6rem; margin-top: 2rem; max-width: 34rem; flex-wrap: wrap; }
.check-form input { flex: 1 1 16rem; font-size: var(--step-1); padding: .85rem 1rem; font-family: var(--mono); }
.check-form .btn { flex: 0 0 auto; padding: 1rem 1.3rem; }
.check-note { margin-top: .75rem; font-size: var(--step--1); color: var(--muted); }

/* the specimen report card beside the hero -- what a check-up looks like */
.specimen { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.specimen-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: .7rem; margin-bottom: .3rem; }
.specimen-head .mono { color: var(--muted); }

.section { padding: 3.5rem 0 0; }
.section-head { display: grid; gap: .6rem; margin-bottom: 1.8rem; max-width: 44rem; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: grid; gap: .7rem; align-content: start; }
.plan--care { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.plan .price { font: 700 var(--step-2)/1 var(--display); }
.plan .price small { font: 400 var(--step--1) var(--body); color: var(--muted); }
.plan-price .price { font: 700 var(--step-3)/1 var(--display); }
.plan-price small { color: var(--muted); }
.plan ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: var(--step--1); }
.plan .btn { margin-top: .4rem; align-self: end; }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.checklist .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--brand); margin-top: .5rem; }
.data-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.data-strip > div { background: var(--surface); padding: 1.2rem; display: grid; gap: .3rem; }
.data-strip .num { font: 700 var(--step-2)/1.1 var(--display); font-variant-numeric: tabular-nums; }

/* -- report readings --------------------------------------------------------- */
.report { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.report-head h1 { font-size: var(--step-2); overflow-wrap: anywhere; }
.score { font: 700 var(--step-0)/1 var(--body); border-radius: 99px; padding: .5rem .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.score--good { background: var(--good-soft); color: var(--good); }
.score--warn { background: var(--warn-soft); color: var(--warn); }
.score--bad { background: var(--bad-soft); color: var(--bad); }
.readings { list-style: none; margin: 0; padding: 0; }
.reading { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 0 1.1rem; padding: 1rem 1.4rem 1rem 0; border-bottom: 1px solid var(--line); }
.reading:last-child { border-bottom: 0; }
.reading::before { content: ""; border-radius: 0 3px 3px 0; background: var(--line); }
.reading--good::before { background: var(--good); }
.reading--warn::before { background: var(--warn); }
.reading--bad::before { background: var(--bad); }
.reading-label { font-weight: 700; }
.reading-finding { margin-top: .15rem; }
.reading-extra { margin-top: .5rem; display: grid; gap: .25rem; font-size: var(--step--1); color: var(--muted); }
.reading-extra b { color: var(--ink); font-weight: 700; }
.pill { font: 700 var(--step--1)/1 var(--body); border-radius: 99px; padding: .35rem .65rem; align-self: start; white-space: nowrap; }
.pill--good { background: var(--good-soft); color: var(--good); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--bad { background: var(--bad-soft); color: var(--bad); }
.pill--unknown { background: var(--brand-soft); color: var(--muted); }
.specimen .reading { padding: .7rem 0 .7rem 0; grid-template-columns: 5px minmax(0, 1fr) auto; gap: 0 .8rem; }
.specimen .reading-finding { font-size: var(--step--1); color: var(--muted); }

.check-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; padding-top: 2.5rem; }
.side { display: grid; gap: 1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; display: grid; gap: .8rem; }
.card--brand { background: var(--brand-soft); border-color: transparent; }
.loading { padding: 2.5rem 1.4rem; display: grid; gap: .8rem; }
.loading-bar { height: 6px; border-radius: 99px; background: var(--brand-soft); overflow: hidden; }
.loading-bar span { display: block; height: 100%; width: 35%; background: var(--brand); border-radius: 99px; animation: sweep 1.4s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .loading-bar span { animation: none; width: 100%; opacity: .5; } }
.report-foot { padding: .9rem 1.4rem; font-size: var(--step--1); color: var(--muted); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* -- care / message pages ---------------------------------------------------- */
.page { padding-top: 3rem; display: grid; gap: 1.5rem; }
.care-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.stack { display: grid; gap: 1rem; }

/* -- public stats (pulse partial classes) ------------------------------------ */
.pulse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: .35rem; align-content: start; }
.stat--wide { grid-column: 1 / -1; }
.stat--decay { border-left: 4px solid var(--bad); }
.stat-label { font: 600 var(--step--1)/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat-value { font: 700 var(--step-1)/1.3 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-of { font: 400 var(--step--1) var(--body); color: var(--muted); }
.stat-note { font-size: var(--step--1); color: var(--muted); }
.pulse-updated { margin-top: 1rem; font-size: var(--step--1); color: var(--muted); font-family: var(--mono); }
.pulse-link { font-weight: 700; }
.chart-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; font-size: var(--step--1); margin-bottom: 1rem; color: var(--muted); }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin-right: .3rem; }
.swatch--dead, .bar--dead { background: var(--bad); fill: var(--bad); }
.swatch--live, .bar--live { background: var(--good); fill: var(--good); }
.gridline { stroke: var(--line); stroke-width: 1; }
.gridline-label { fill: var(--muted); font: 10px var(--mono); }
.chart-endlabels { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--muted); margin-top: .4rem; gap: 1rem; }
.chart-table-wrap { overflow-x: auto; margin-top: 1.5rem; }
.chart-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.chart-table caption { text-align: left; color: var(--muted); padding-bottom: .5rem; }
.chart-table th, .chart-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.chart-table .row--dead td:last-child { color: var(--bad); font-weight: 700; }

@media (max-width: 860px) {
  .hero-grid, .check-layout, .care-grid { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .nav { gap: .9rem; }
}

/* -- guides ------------------------------------------------------------------ */
.guide h2 { margin-top: 1rem; }
.guide ol, .guide ul { display: grid; gap: .55rem; padding-left: 1.3rem; margin: 0; }
.guide .check-form { margin-top: .5rem; }

/* -- screenshots of problems + Google preview --------------------------------- */
.shot-fig { margin: .8rem 0 0; display: grid; gap: .35rem; }
.shot-fig img { width: 100%; max-width: 34rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: block; }
.shot-fig--mobile img { max-width: 13rem; }
.shot-fig figcaption, .serp figcaption { font-size: var(--step--1); color: var(--muted); }
.serp { margin: .8rem 0 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; max-width: 34rem; display: grid; gap: .15rem; font-family: Arial, Helvetica, sans-serif; }
.serp-site { font-size: .8rem; color: #202124; }
.serp-title { font-size: 1.15rem; color: #1a0dab; line-height: 1.3; }
.serp-desc { font-size: .85rem; color: #4d5156; line-height: 1.45; }
.serp-desc--none { font-style: italic; color: #70757a; }
.serp figcaption { font-family: var(--body); margin-top: .4rem; }

.code-evidence { margin: .8rem 0 0; display: grid; gap: .45rem; max-width: 36rem; }
.code-evidence summary { cursor: pointer; font-weight: 700; color: var(--brand); width: fit-content;
  border: 1.5px solid var(--brand); border-radius: 8px; padding: .5rem .85rem; list-style: none; }
.code-evidence summary::-webkit-details-marker { display: none; }
.code-evidence summary::after { content: " ▾"; }
.code-evidence[open] summary::after { content: " ▴"; }
.code-evidence > p { font-size: var(--step--1); color: var(--muted); }
.code-evidence pre { margin: 0; background: #1B2421; color: #D6E2DD; border-radius: 8px; padding: .75rem .9rem; overflow-x: auto; font: .78rem/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
.code-evidence mark { background: #F9E6E1; color: #8E2B17; border-radius: 3px; padding: 0 2px; }
.code-evidence-link { font-size: var(--step--1); }

/* -- more details table ------------------------------------------------------- */
.details { border-top: 1px solid var(--line); padding: 1.1rem 1.4rem .4rem; }
.details-title { font-size: var(--step-1); margin-bottom: .6rem; }
.details-scroll { overflow-x: auto; }
.details-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.details-table th, .details-table td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.details-table tr:last-child th, .details-table tr:last-child td { border-bottom: 0; }
.details-table th { font-weight: 700; white-space: nowrap; padding-right: 1.2rem; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .55rem; vertical-align: 1px; background: var(--line); }
.dot--good { background: var(--good); }
.dot--warn { background: var(--warn); }
.dot--note { background: var(--muted); opacity: .45; }
@media (max-width: 560px) { .details-table th { white-space: normal; } }

.btn--small { padding: .5rem .8rem; font-size: var(--step--1); }
.all-clear { margin: 0; padding: .9rem 1.4rem; background: var(--good-soft); color: var(--good); font-weight: 700; border-bottom: 1px solid var(--line); }

.score-sub { margin: 0; padding: .6rem 1.4rem; font-size: var(--step--1); color: var(--muted); border-bottom: 1px solid var(--line); }
.handle-it { margin-top: .6rem; font-size: var(--step--1); font-weight: 700; }
.forward { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between;
           padding: 1rem 1.4rem; border-top: 1px solid var(--line); font-size: var(--step--1); }
.forward > div:first-child { display: grid; gap: .15rem; }
.forward span { color: var(--muted); }
.forward-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* -- agencies form ------------------------------------------------------------ */
.interests { border: 0; padding: 0; margin: 0; display: grid; gap: .35rem; }
.interests legend { font-weight: 700; font-size: var(--step--1); margin-bottom: .35rem; }
.check { display: flex; gap: .55rem; align-items: center; font-size: var(--step--1); }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--brand); }
@media (max-width: 860px) { .plans[style] { grid-template-columns: 1fr !important; } }

.evidence { display: grid; gap: .1rem; }
.evidence .mono { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }

/* -- tools ------------------------------------------------------------------------ */
.nav-menu { position: relative; }
.nav-menu summary { cursor: pointer; list-style: none; color: var(--ink); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: " ▾"; color: var(--muted); }
.nav-menu summary:hover { color: var(--brand); }
.nav-menu-list { position: absolute; right: 0; top: calc(100% + .6rem); z-index: 10; min-width: 15rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .4rem; display: grid; }
.nav-menu-list a { padding: .55rem .7rem; border-radius: 6px; display: grid; gap: .1rem; }
.nav-menu-list a:hover { background: var(--brand-soft); color: var(--ink); }
.nav-menu-list small { color: var(--muted); font-size: .8rem; }
.hero--tool { padding-bottom: 1rem; }
.hero--tool h1 { max-width: 20ch; margin-top: .6rem; }
.hero--tool .lede { font-size: var(--step-1); color: var(--muted); margin-top: 1rem; max-width: 40ch; }
.eyebrow a { color: inherit; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.tool-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; display: grid; gap: .4rem; }
.tool-item a { text-decoration: none; }
.tool-item h2 { font-size: var(--step-1); color: var(--brand); }
.tool-section { border-top: 1px solid var(--line); padding: 1.1rem 1.4rem 1.2rem; display: grid; gap: .7rem; }
.tool-section .details-title { margin-bottom: 0; }
.tool-note { font-size: var(--step--1); color: var(--muted); max-width: 60ch; }
.tool-handle { padding: .2rem 1.4rem 1rem; margin: 0; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ways-axis { font: 600 .75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.way { border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 8px; padding: .8rem .9rem; display: grid; gap: .55rem; align-content: start; min-width: 0; }
.way--good { border-top-color: var(--good); }
.way--warn { border-top-color: var(--warn); }
.way--bad { border-top-color: var(--bad); }
.way-head { display: flex; justify-content: space-between; align-items: start; gap: .5rem; flex-wrap: wrap; }
.way-start { font-weight: 500; overflow-wrap: anywhere; }
.hops { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--line); display: grid; gap: .45rem; }
.hop { display: grid; gap: .05rem; position: relative; font-size: var(--step--1); }
.hop::before { content: ""; position: absolute; left: calc(-.9rem - 5px); top: .45rem; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.hop:last-child::before { background: var(--brand); }
.hop--stop::before { background: var(--bad); }
.hop-url { overflow-wrap: anywhere; font-size: .8rem; }
.hop-code { color: var(--muted); font-variant-numeric: tabular-nums; }
.hop-code--bad { color: var(--bad); font-weight: 700; }
.way-verdict { font-size: var(--step--1); }
.name-chip { display: inline-block; background: var(--brand-soft); border-radius: 4px; padding: .05rem .4rem; margin: 0 .3rem .3rem 0; font-size: .8rem; }
.small-mono { font-size: .76rem; overflow-wrap: anywhere; }
.details-table td { overflow-wrap: anywhere; }
.compare thead th { font-weight: 700; font-size: .8rem; padding-bottom: .6rem; }
.chain-title { font-size: var(--step-0); margin-top: .4rem; }
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: var(--step--1); }
.chain li { display: grid; gap: .1rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 8px; }
.chain .muted { font-size: .8rem; }
.chain-role { font: 600 .72rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chain-end--good { background: var(--good-soft); border-color: transparent !important; }
.chain-end--warn { background: var(--warn-soft); border-color: transparent !important; }
.chain-end--bad { background: var(--bad-soft); border-color: transparent !important; }
.protos { display: flex; flex-wrap: wrap; gap: .3rem; }
.proto { font: 600 .74rem/1 var(--body); border-radius: 99px; padding: .3rem .5rem; white-space: nowrap; }
.proto--on { background: var(--good-soft); color: var(--good); }
.proto--old { background: var(--warn-soft); color: var(--warn); }
.proto--off { color: var(--muted); text-decoration: line-through; border: 1px dashed var(--line); }
.reading-tool { margin-top: .5rem; font-size: var(--step--1); }
@media (max-width: 640px) { .ways { grid-template-columns: 1fr; } .ways-axis { display: none; } }
.dot--bad { background: var(--bad); }
.tool-section > * { min-width: 0; }
@media (max-width: 640px) {
  /* Label above value on phones, so long values get the full width. */
  .tool-section .details-table:not(.compare) tr { display: grid; padding: .5rem 0; border-bottom: 1px solid var(--line); }
  .tool-section .details-table:not(.compare) th,
  .tool-section .details-table:not(.compare) td { border: 0; padding: .1rem 0; white-space: normal; }
  .compare th[scope="row"] { white-space: normal; min-width: 6rem; }
}
@media (max-width: 860px) { .check-layout { grid-template-columns: minmax(0, 1fr); } }
.reading-label, .reading-finding, .way-verdict { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .compare { table-layout: fixed; }
  .compare th, .compare td { white-space: normal; overflow-wrap: anywhere; padding-right: .4rem; }
  .compare th[scope="row"] { width: 28%; min-width: 0; }
  .compare .proto { white-space: normal; }
}
.tool-headline { margin: 0; padding: .9rem 1.4rem; font: 700 var(--step-1)/1.3 var(--display); border-bottom: 1px solid var(--line); text-wrap: balance; overflow-wrap: anywhere; }
.tool-headline--bad { color: var(--bad); background: var(--bad-soft); }
.tool-headline--warn { color: var(--warn); background: var(--warn-soft); }
.tool-headline--good { color: var(--good); background: var(--good-soft); }
.tool-section--ways { border-top: 0; }
.tool-findings-title { padding: 1.1rem 1.4rem .2rem; border-top: 1px solid var(--line); margin: 0; }
/* compact four-ways grid inside the check-up's certificate reading */
.ways--mini { margin-top: .7rem; gap: .5rem; }
.ways--mini .way { padding: .55rem .7rem; gap: .3rem; border-top-width: 3px; }
.ways--mini .way-start { font-size: .82rem; }
.ways--mini .way-verdict { font-size: .82rem; color: var(--muted); }
.ways--mini .pill { font-size: .72rem; padding: .25rem .5rem; }
.fail-shot { margin: 0; padding: 1rem 1.4rem 0; display: grid; gap: .5rem; }
.fail-shot img { width: 100%; max-width: 38rem; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: block; box-shadow: var(--shadow); }
.fail-shot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; max-width: 38rem; font-size: var(--step--1); color: var(--muted); }
.fail-shot figcaption .mono { overflow-wrap: anywhere; }
.fail-shot figcaption a { font-weight: 700; white-space: nowrap; }
/* -- email setup tool --------------------------------------------------------- */
.questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.question { border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 8px; padding: .9rem 1rem; display: grid; gap: .3rem; align-content: start; }
.question--good { border-top-color: var(--good); }
.question--warn { border-top-color: var(--warn); }
.question--bad { border-top-color: var(--bad); }
.question-q { font-weight: 700; font-size: var(--step--1); }
.question-a { font: 700 var(--step-2)/1.1 var(--display); }
.question--good .question-a { color: var(--good); }
.question--warn .question-a { color: var(--warn); }
.question--bad .question-a { color: var(--bad); }
.question--note .question-a { color: var(--muted); }
.question-d { font-size: var(--step--1); color: var(--muted); }
.fix-text { margin-top: .5rem; font-size: var(--step--1); }
.record { margin-top: .5rem; display: flex; gap: .5rem; align-items: start; flex-wrap: wrap; }
.record pre, .raw-record { margin: 0; flex: 1 1 16rem; min-width: 0; background: var(--brand-soft); color: var(--ink); border-radius: 8px; padding: .6rem .8rem; font: .8rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) { .questions { grid-template-columns: 1fr; } }

.plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; }
@media (max-width: 860px) { .plans--two { grid-template-columns: 1fr; } }

/* Agency lead samples (/s/<token>) */
.sample-list { display: grid; gap: 1rem; }
.sample-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: .8rem; }
.sample-head h3 { margin: .2rem 0 .1rem; }
.sample-head .mono { font-size: var(--step--1); overflow-wrap: anywhere; }
.sample-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sample-findings li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.sample-breakdown { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.bars { margin: 0; display: grid; gap: .45rem; }
.bars > div { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: .6rem; align-items: center; }
.bars dt { font-size: var(--step--1); }
.bars dd { margin: 0; display: flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; }
.bars dd span { display: block; height: .55rem; width: var(--w); min-width: 2px; background: var(--brand); border-radius: 99px; opacity: .8; }
.bars dd b { font-size: var(--step--1); }

/* Share bar on reports (never the bad things: see sharecard.py) */
.share { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between;
         border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1rem; }
.share > div:first-child { display: grid; gap: .15rem; }
.share span { color: var(--muted); }
.share-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.unlock { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }
.unlock > div:first-child { flex: 1 1 26rem; display: grid; gap: .4rem; }
.unlock-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.locked-wrap { overflow-x: auto; }
.locked { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.locked th { text-align: left; color: var(--muted); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.locked td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.lock { display: inline-block; min-width: 7rem; border-radius: 4px; background: var(--line); color: transparent; user-select: none; }
.list-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0; }
.list-tools input[type=search] { flex: 1 1 16rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.full-list select, .full-list input { padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }

/* /app control panel (2026-10-14) */
.app-body { background: var(--paper); }
.app { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }
.app-side { background: var(--surface); border-right: 1px solid var(--line); padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: 0; height: 100vh; }
.app-nav { display: grid; gap: .2rem; }
.app-nav a { padding: .55rem .7rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.app-nav a:hover { background: var(--brand-soft); }
.app-nav a.on { background: var(--brand-soft); color: var(--brand); }
.app-tag { font-size: .7rem; background: var(--brand); color: var(--brand-ink); border-radius: 99px; padding: .1rem .45rem; margin-left: .3rem; }
.app-side-foot { margin-top: auto; font-size: var(--step--1); display: grid; gap: .2rem; overflow-wrap: anywhere; }
.app-plan { font-weight: 700; }
.app-main { padding: 1.6rem clamp(16px, 3vw, 2.4rem); min-width: 0; }
.app-main .wrap { max-width: none; padding: 0; }
.app-main .page { padding-top: 0; }
.app-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .8rem; margin-bottom: 1.2rem; }
.app-head-stats { display: flex; gap: .4rem; flex-wrap: wrap; }
.app-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.app-stat { text-decoration: none; color: var(--ink); }
a.app-stat:hover { border-color: var(--brand); }
.app-big { font: 700 2rem/1.1 var(--display); }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  /* Phones: brand + sign out on one line, the tabs on one scrolling line below (grok, 2026-10-14) */
  .app-side { position: static; height: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .4rem .8rem; padding: .55rem 16px .3rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-nav { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .1rem; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .app-nav a { padding: .4rem .6rem; white-space: nowrap; font-size: var(--step--1); }
  .app-side-foot { margin-top: 0; grid-column: 2; grid-row: 1; }
  .app-side-foot .muted, .app-side-foot .app-plan, .app-side-foot br { display: none; }
}

.watch-add { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.watch-add input, .watch-add select { padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.watch-box { display: grid; gap: .5rem; }
.watch-box .row { display: flex; gap: .5rem; flex-wrap: wrap; }

.nav-app { background: var(--brand); color: var(--brand-ink) !important; border-radius: 8px; padding: .35rem .8rem; font-weight: 700; }
.locked .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0 .8rem; }
.build-progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: .6rem; }
.build-progress span { display: block; height: 100%; width: var(--w, 5%); background: var(--brand); transition: width .6s ease; }
.guide-answer { font-size: var(--step-1); line-height: 1.55; padding: .9rem 1.1rem; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 8px 8px 0; margin: .4rem 0 1rem; }
.guide-faq dt { font-weight: 700; margin-top: .9rem; }
.guide-faq dd { margin: .25rem 0 0; }
.guide-related ul { padding-left: 1.1rem; display: grid; gap: .3rem; }
.report-finding { font-size: var(--step-1); line-height: 1.55; }
.report-finding b { font: 700 var(--step-2)/1 var(--display); color: var(--brand); }
.report-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .8rem; margin: 1rem 0 1.4rem; }
.report-strip .card { display: grid; gap: .3rem; }
.report-strip b { font: 700 var(--step-2)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.report-method { max-width: 46rem; }
.report-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .8rem; margin: 1.2rem 0; }