/* CandidPDF — one stylesheet, no external assets, no build step.

   Four things in here are load-bearing rather than decorative:

   1. Every colour is a token declared in :root and redeclared in the dark
      block. tools/a11y.test.mjs parses this file, pairs the tokens the way the
      pages actually pair them, and fails the build under 4.5:1. Introduce a
      colour by editing a token, never by inlining a hex in a rule, or it goes
      unchecked.

   2. Gradients get their endpoints declared as tokens (--wash-1, --wash-2) and
      those endpoints are contrast-tested like any other background. sRGB
      interpolation keeps every intermediate luminance between the two, so
      testing the ends bounds the whole ramp. Text NEVER sits on a gradient
      whose ends are not tokens.

   3. The severity colours are a presentation of facts the engine reported.
      They are not a score, a grade, or a rating, and nothing in the markup
      says "good" or "bad" -- the sentence next to the colour carries the
      meaning, so the page still works with the colour removed.

   4. No inline style attributes anywhere, in markup or generated. The deployed
      CSP is `style-src 'self'` with no 'unsafe-inline', which silently zeroes
      them: the split bar shipped as style="width:18.6%" and rendered as an
      empty grey track in production while every local check passed. Widths
      that must be computed are set through the CSSOM, which CSP does not
      block. tools/viewport.test.mjs now fails on any CSP violation. */

:root {
  color-scheme: light dark;

  /* --- surfaces --- */
  --bg: #fbfcfe;
  --wash-1: #eef3fc;
  --wash-2: #fbfcfe;
  --panel: #ffffff;
  --panel-2: #f5f8fd;
  --line: #dde4ef;

  /* --- ink --- */
  --ink: #0d1526;
  --ink-soft: #4d5a70;

  /* --- brand and the one electric accent --- */
  --brand: #0f2f56;
  --on-brand: #ffffff;
  --accent: #0b53d8;
  --accent-soft: #e6eeff;
  --on-accent: #ffffff;

  /* --- carried forward --- */
  --brand-soft: #e6eeff;
  --warn-bg: #fdf4e3;
  --warn-line: #e6c68b;
  --ok: #1d6b3f;
  --bad: #9a2c2c;

  /* --- severity: applied by rule, not by taste. See sevOf() in results.js --- */
  --sev-critical: #a52020;
  --sev-critical-bg: #fdecea;
  --sev-critical-line: #f0b4ae;
  --sev-caution: #8a5300;
  --sev-caution-bg: #fdf4e3;
  --sev-caution-line: #e6c68b;
  --sev-clear: #146b3a;
  --sev-clear-bg: #e9f6ee;
  --sev-clear-line: #a9d8bd;

  /* --- form --- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --measure: 34rem;

  --shadow-1: 0 1px 2px rgba(13, 21, 38, 0.05);
  --shadow-2: 0 1px 2px rgba(13, 21, 38, 0.05), 0 8px 24px -14px rgba(13, 21, 38, 0.22);
  --shadow-3: 0 2px 4px rgba(13, 21, 38, 0.05), 0 18px 40px -20px rgba(13, 21, 38, 0.3);
  --ring: 0 0 0 1px rgba(11, 83, 216, 0.16);

  /* --- type. No webfont: the deployed CSP is default-src 'none' and adding
         one would mean either loosening it or shipping a licensed binary, so
         the pairing is built from faces the platform already has. --- */
  --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "SF Pro Display", ui-sans-serif, -apple-system, "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mark: ui-serif, Georgia, "Times New Roman", serif;

  /* --- motion --- */
  --dur-fast: 130ms;
  --dur: 240ms;
  --dur-slow: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #080e1c;
    --wash-1: #101b35;
    --wash-2: #080e1c;
    --panel: #111a2e;
    --panel-2: #16223c;
    --line: #25324e;

    --ink: #e9effc;
    --ink-soft: #9db0d0;

    --brand: #9dc4e8;
    --on-brand: #071021;
    --accent: #78aeff;
    --accent-soft: #152444;
    --on-accent: #071021;

    --brand-soft: #152444;
    --warn-bg: #2a2318;
    --warn-line: #6b5730;
    --ok: #6cc08d;
    --bad: #e08585;

    --sev-critical: #ff9d95;
    --sev-critical-bg: #2b1917;
    --sev-critical-line: #6b3630;
    --sev-caution: #e8b968;
    --sev-caution-bg: #2a2318;
    --sev-caution-line: #6b5730;
    --sev-clear: #74c795;
    --sev-clear-bg: #15241b;
    --sev-clear-line: #2f5a41;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px -16px rgba(0, 0, 0, 0.85);
    --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.5), 0 22px 48px -22px rgba(0, 0, 0, 0.95);
    --ring: 0 0 0 1px rgba(120, 174, 255, 0.22);
  }
}

/* Smooth cross-document transitions where the browser supports them; a silent
   no-op everywhere else, and disabled entirely under reduced motion below. */
@view-transition { navigation: auto; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--font-ui);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  /* The wash. Both endpoints are tokens and both are contrast-tested. */
  background-image: linear-gradient(180deg, var(--wash-1) 0%, var(--wash-2) 46rem);
  background-repeat: no-repeat;
}

main { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.13;
  letter-spacing: -0.025em;
  font-weight: 700;
}

a { color: var(--accent); text-underline-offset: 0.15em; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

svg.icon { flex: none; width: 1.25rem; height: 1.25rem; }

/* ------------------------------------------------------------------ motion

   Everything below is opt-in through a class, so a page with JavaScript
   turned off shows the finished state rather than an empty one: .reveal is
   only applied by motion.js, which immediately marks the first screen ready.

   The last block is the important one. Reduced motion is not "slightly less
   motion" -- it is none, including the count-up and the bar sweep, both of
   which are driven from JS that checks the same media query. */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease-spring);
}

@keyframes fold-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes shimmer {
  from { background-position: -140% 0; }
  to { background-position: 240% 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal.is-in { opacity: 1; transform: none; }
  .skeleton { animation: none !important; background-image: none !important; }
}

/* ---------------------------------------------------------------- chrome */

header.site {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 700 1.22rem/1 var(--font-mark);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.03em;
}
.wordmark-text span { color: var(--accent); }
.mark { width: 1.55rem; height: 1.55rem; flex: none; }

header.site nav { display: flex; gap: 1.25rem; font-size: 0.92rem; }
header.site nav a { color: var(--ink-soft); text-decoration: none; }
header.site nav a:hover { color: var(--accent); text-decoration: underline; }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  padding: 1.75rem 1.25rem 3rem;
}
footer.site p {
  max-width: 52rem;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.65;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

/* ---------------------------------------------------------------- hero */

.hero { padding: 3rem 0 2.5rem; display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 56rem) {
  .hero { grid-template-columns: 1.05fr 1fr; gap: 3.25rem; }
  .hero h1 { font-size: clamp(2.4rem, 4.2vw, 3.5rem); max-width: 13ch; }
}
.hero h1 {
  font-size: clamp(2.35rem, 8vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 1.15rem;
  max-width: 16ch;
}
.hero h1 .accent { color: var(--accent); }
.subhead {
  font-size: clamp(1.04rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 38rem;
  margin: 0;
  line-height: 1.55;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0.7rem; }
.hero-sub { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }

.btn {
  display: inline-block;
  font-weight: 650;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur-fast) var(--ease);
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-3); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
.btn-quiet { background: var(--panel); color: var(--accent); border-color: var(--line); box-shadow: var(--shadow-1); }

/* --- the interactive sample card --- */

.probe {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  padding: 1.4rem 1.4rem 1.25rem;
  margin: 0;
}
.probe-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.probe-num {
  font-family: var(--font-display);
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.probe-unit { font-size: 0.9rem; font-weight: 650; color: var(--ink-soft); }
.probe-bad .probe-num { color: var(--sev-critical); }
.probe-good .probe-num { color: var(--sev-clear); }
.probe-good { margin-top: 0.75rem; }

.probe-bar {
  display: flex;
  height: 0.6rem;
  border-radius: 99px;
  overflow: hidden;
  background: var(--sev-critical);
  margin: 0.95rem 0 0.6rem;
}
.probe-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sev-clear);
  transition: width var(--dur-slow) var(--ease-spring), background var(--dur) var(--ease);
}
.probe-bar.is-focus span { background: var(--accent); }

.probe-caption { margin: 0 0 0.9rem; font-size: 0.87rem; color: var(--ink-soft); min-height: 2.9em; line-height: 1.45; }

.probe-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.probe-cat {
  font: inherit;
  font-size: 0.79rem;
  font-weight: 650;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.probe-cat:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); filter: none; box-shadow: none; }
.probe-cat:active:not(:disabled) { transform: translateY(1px); }
.probe-cat[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.probe-hint { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.probe-foot { margin-top: 0.8rem; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- upload */

.upload {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 1.75rem;
  margin: 1rem 0 3.5rem;
}
.upload h2 { margin: 0 0 1.1rem; font-size: 1.35rem; }

.dropzone {
  display: block;
  position: relative;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--brand-soft);
  padding: 2.1rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
/* The real input is clipped for styling, so it keeps focus but shows no ring.
   Put the ring on the visible control instead, or keyboard users are lost. */
.dropzone:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.dropzone:hover { border-color: var(--accent); }
.dropzone.dragging {
  border-color: var(--accent);
  border-style: solid;
  transform: scale(1.012);
  box-shadow: var(--shadow-3), var(--ring);
}
.dropzone.has-file { border-style: solid; border-color: var(--accent); }
.dropzone input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.dz-main { display: block; font-weight: 700; font-size: 1.05rem; }
.dz-sub { display: block; margin-top: 0.4rem; font-size: 0.88rem; color: var(--ink-soft); }

button {
  font: inherit;
  font-weight: 650;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
button:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-2); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--shadow-1); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secondary { background: var(--panel); color: var(--accent); border-color: var(--line); }

#upload-form { display: grid; gap: 1rem; justify-items: start; }
#upload-form button { width: 100%; }
@media (min-width: 34rem) { #upload-form button { width: auto; } }

.status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  font-size: 0.94rem;
  animation: fold-in var(--dur) var(--ease);
}
.status.error { border-left-color: var(--bad); color: var(--bad); }

.privacy {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 10px;
}
.privacy h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.privacy p { margin: 0 0 0.5rem; font-size: 0.86rem; line-height: 1.6; }
.privacy p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- blocks */

section { scroll-margin-top: 1.5rem; }
section h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); }

.section-head { max-width: 44rem; margin-bottom: 1.5rem; }
.section-head h2 { margin: 0 0 0.5rem; }
.section-head p { margin: 0; color: var(--ink-soft); }

/* --- three-step flow --- */

.steps { padding: 1rem 0 2.5rem; }
.step-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.step {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.35rem 1.5rem;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--accent); }
.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.step-icon svg { width: 1.4rem; height: 1.4rem; }
.step-n {
  position: absolute;
  top: 1.4rem;
  right: 1.35rem;
  font: 700 0.78rem/1 var(--font-display);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.step h3 { margin: 0 0 0.35rem; font-size: 1.08rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; }

/* --- honesty block: the signature element --- */

.honesty {
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 5vw, 3rem);
  margin: 1rem 0 3.5rem;
  box-shadow: var(--shadow-3);
}
.honesty .eyebrow { color: var(--on-brand); }
.honesty h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
  max-width: 18ch;
}
.honesty p { max-width: 42rem; color: var(--on-brand); }
.honesty .lead { font-size: clamp(1.08rem, 2vw, 1.28rem); font-weight: 650; margin: 0 0 0.9rem; }
.honesty .claim {
  font-size: 0.92rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid currentColor;
}

/* --- scanned-document block --- */

.scanned {
  border: 1px solid var(--sev-critical-line);
  background: var(--sev-critical-bg);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
  margin: 0 0 3.5rem;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.scanned .icon { color: var(--sev-critical); width: 1.6rem; height: 1.6rem; margin-top: 0.15rem; }
.scanned h2 { margin: 0 0 0.4rem; font-size: 1.25rem; }
.scanned p { margin: 0; max-width: 44rem; }
.scanned strong { color: var(--sev-critical); }

/* --- personas --- */

.personas { margin: 0 0 3.5rem; }
.persona-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.persona {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}
.persona:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.persona h3 { margin: 0 0 0.4rem; font-size: 1.08rem; }
.persona p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; }

/* --- measured numbers --- */

.measured { margin: 0 0 3.5rem; }
.stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0 0 1rem;
}
.stats > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-1);
}
.stats dt { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.35; }
.stats dd {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- pricing */

.bands {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.25rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.bands > li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.3rem 1.4rem;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bands > li:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--accent); }
.pages { display: block; font-size: 0.8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; }
.price {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0.25rem 0 0.9rem;
}
.deliverables {
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.deliverables li { margin-bottom: 0.4rem; padding-left: 1.3rem; position: relative; }
.deliverables li:last-child { margin-bottom: 0; }
.deliverables li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.42em;
  width: 0.42rem;
  height: 0.22rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.pricing { margin: 0 0 1rem; }
.fineprint { font-size: 0.88rem; color: var(--ink-soft); max-width: 44rem; }

/* ---------------------------------------------------------------- results */

.doc-meta {
  color: var(--ink-soft);
  font-size: 0.84rem;
  margin: 0.75rem 0 0.85rem;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The verdict. One panel, one dominant number, one sentence -- everything the
   phone acceptance test measures. */

.verdict {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-2);
  padding: 1.4rem 1.35rem 1.35rem;
  border-top: 5px solid var(--line);
}
.verdict.sev-critical { border-top-color: var(--sev-critical); }
.verdict.sev-caution { border-top-color: var(--sev-caution); }
.verdict.sev-clear { border-top-color: var(--sev-clear); }

.verdict-count {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin: 0;
  font-size: 1rem;
}
.verdict-num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 17vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.verdict-unit {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.sev-critical .verdict-num { color: var(--sev-critical); }
.sev-caution .verdict-num { color: var(--sev-caution); }
.sev-clear .verdict-num { color: var(--sev-clear); }

.verdict-line { margin: 0.7rem 0 0; font-size: 1.02rem; line-height: 1.45; }
.verdict-scope { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }

/* The alarm. Our most arresting true sentence, and it gets the loudest
   treatment on the site -- but it is still a sentence, so a reader who cannot
   see the colour loses nothing. */
.alarm {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0.9rem 0 0;
  padding: 0.85rem 0.95rem;
  background: var(--sev-critical-bg);
  border: 1px solid var(--sev-critical-line);
  border-left: 5px solid var(--sev-critical);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  animation: fold-in var(--dur-slow) var(--ease);
}
.alarm .icon { color: var(--sev-critical); margin-top: 0.1rem; }
.alarm strong { color: var(--sev-critical); }

/* --- the green half of the arc --- */

.card.success { border-top: 5px solid var(--sev-clear); }
.card.success > h2 { display: flex; align-items: center; gap: 0.5rem; }
.h-icon { color: var(--sev-clear); }

.success-count { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; margin: 0.2rem 0 0.9rem; }
.success-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sev-clear);
}
.success-unit { font-size: 0.95rem; font-weight: 650; color: var(--ink-soft); }
.success-guard { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }

/* Proportional, and written out underneath. On a document where we fix 18%
   the green segment is 18% wide -- that is the honest picture, not a
   decoration, so it must never be styled to look fuller than it is. The width
   is set through the CSSOM by results.js; an inline style attribute would be
   dropped by the CSP and the bar would read as empty. */
.split { margin: 0 0 1rem; }
.split-bar {
  display: flex;
  height: 0.6rem;
  border-radius: 99px;
  overflow: hidden;
  background: var(--line);
}
.split-bar .seg {
  display: block;
  height: 100%;
  width: 0;
  transition: width var(--dur-slow) var(--ease-spring);
}
.split-bar .seg-ok { background: var(--sev-clear); }
.split-bar .seg-human { background: var(--sev-critical); }
.split-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.55rem 0 0; font-size: 0.87rem; }
.split-key .key { display: inline-flex; align-items: center; gap: 0.35rem; }
.split-key .key .icon { width: 1rem; height: 1rem; }
.split-key .key-ok .icon { color: var(--sev-clear); }
.split-key .key-human .icon { color: var(--sev-critical); }

/* One priced button. The price is not a separate line to read and then act
   on; it is the action. */
.buy-row { margin: 0.35rem 0 0.5rem; }
.cta-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.95rem 1.2rem;
  font-size: 1.05rem;
  text-align: left;
}
.cta-main { font-weight: 700; }
.cta-price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; }

.chips-ok { margin-top: 1rem; }
.chip-ok { border-left-color: var(--sev-clear); }
.chip-icon-ok { background: var(--sev-clear-bg); color: var(--sev-clear); }

/* --- category chips --- */

.chips { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
@media (min-width: 40rem) { .chips { grid-template-columns: 1fr 1fr; } }
.chip {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  border-left: 4px solid var(--line);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.chip.sev-critical { border-left-color: var(--sev-critical); }
.chip.sev-caution { border-left-color: var(--sev-caution); }
.chip.sev-clear { border-left-color: var(--sev-clear); }
.chip-icon { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent); flex: none; }
.chip-icon svg { width: 1.1rem; height: 1.1rem; }
.chip-body { min-width: 0; flex: 1; }
.chip-label { display: block; font-weight: 650; font-size: 0.96rem; line-height: 1.3; }
.chip-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; margin-top: 0.3rem; font-size: 0.83rem; color: var(--ink-soft); }
.chip-count { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }

.tag { display: inline-block; font-size: 0.73rem; font-weight: 650; padding: 0.1rem 0.5rem; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.tag.automated { color: var(--ok); }
.tag.human { color: var(--bad); }
.tag.mixed { color: var(--ink-soft); }

/* --- cards, notes, folds --- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.35rem;
  margin: 1.1rem 0;
  box-shadow: var(--shadow-1);
}
.card > h2 { margin-top: 0; font-size: 1.15rem; }
.card > h3 { font-size: 1rem; }

.note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  font-size: 0.89rem;
  margin: 0.85rem 0;
}
.note strong { display: block; margin-bottom: 0.2rem; }

.figures { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; margin: 0.5rem 0 1rem; padding: 0; list-style: none; }
.figures div { min-width: 7rem; }
.figures dt, .fig-label { font-size: 0.78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
.figures dd, .fig-value {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.tables-card .statement {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 1.04rem;
  margin-top: 0;
}
.tables-card .statement .icon { color: var(--ink-soft); margin-top: 0.2rem; }
.remainder-card > h2 { margin-bottom: 0.3rem; }

details.fold > summary {
  position: relative;
  padding-right: 2rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease);
}
details.fold > summary:hover { color: var(--accent); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 0.5rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-spring), top var(--dur) var(--ease-spring);
}
details.fold[open] > summary::after { top: 0.75rem; transform: rotate(-135deg); }
details.fold > summary h2 { display: inline; margin: 0; font-size: 1.15rem; }
.fold-note { display: block; margin-top: 0.2rem; font-size: 0.85rem; font-weight: 400; color: var(--ink-soft); }
details.fold[open] > summary { margin-bottom: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.8rem; }
/* Open animates; close is instant. Animating the close would mean taking the
   open/closed state away from the browser, and native <details> is where the
   keyboard and screen-reader behaviour comes from. */
details.fold[open] > .fold-body { animation: fold-in var(--dur) var(--ease-spring); }
.fold-body > *:last-child { margin-bottom: 0; }

.rules { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: 0.85rem; }
.rule-list { margin: 0; padding: 0; list-style: none; }
.rule-list > li { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.rule-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.rule-head { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: baseline; }
.rule-head strong { font-size: 0.97rem; }
.rule-help { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--ink-soft); }

/* --- what is left, one line per item --- */

.left-head { margin: 1.4rem 0 0.4rem; font-size: 0.95rem; }
.left-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.left-item { border-top: 1px solid var(--line); }
.left-item:first-child { border-top: 0; }
.left-line { display: flex; gap: 0.7rem; align-items: flex-start; line-height: 1.45; }
.left-line .icon { color: var(--ink-soft); margin-top: 0.15rem; transition: color var(--dur-fast) var(--ease); }
.left-item > .left-line { padding: 0.8rem 0; }
.left-fold > summary {
  padding: 0.8rem 1.6rem 0.8rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.left-fold > summary:hover .icon { color: var(--accent); }
.left-fold > summary::-webkit-details-marker { display: none; }
.left-fold > summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1.15rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-spring), top var(--dur) var(--ease-spring);
}
.left-fold[open] > summary::after { top: 1.3rem; transform: rotate(-135deg); }
.left-detail {
  margin: 0 0 0.9rem;
  padding: 0 0 0 2rem;
  list-style: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
  animation: fold-in var(--dur) var(--ease-spring);
}
.left-detail li { margin-bottom: 0.35rem; }
.left-detail li:last-child { margin-bottom: 0; }

/* --- the sample report --- */

.sample-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}
.sample-banner p { margin: 0; }
.sample-banner a { font-weight: 650; }

/* --- small print, forms --- */

.stub-note { font-size: 0.83rem; color: var(--ink-soft); }
.lede { max-width: 44rem; }
.hero-text { min-width: 0; }

.emailform { display: grid; gap: 0.7rem; justify-items: start; margin-top: 0.6rem; }
.emailform input[type="email"] {
  font: inherit;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--ink);
  width: min(24rem, 100%);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.emailform input[type="email"]:focus { border-color: var(--accent); box-shadow: var(--ring); }
.emailform button { text-align: left; line-height: 1.35; }
.consent { font-size: 0.81rem; color: var(--ink-soft); max-width: 34rem; margin: 0; }

.scroll-x { overflow-x: auto; }

/* --- loading: a skeleton of the real thing, not a bare spinner --- */

.skeleton {
  border-radius: var(--radius-sm);
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--panel-2) 0%, var(--line) 42%, var(--panel-2) 84%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
  color: transparent;
}
.sk-line { height: 0.85rem; margin: 0.55rem 0; }
.sk-num { height: 3.4rem; width: 8rem; margin: 0.2rem 0 1rem; }
.sk-w-90 { width: 90%; }
.sk-w-70 { width: 70%; }
.sk-w-50 { width: 50%; }
.sk-bar { height: 0.6rem; border-radius: 99px; margin: 1rem 0 0.6rem; }

.spinner {
  display: inline-block;
  width: 0.85em; height: 0.85em;
  margin-right: 0.45em;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -0.1em;
}

/* --- 404 --- */

.oops { padding: 3.5rem 0 2rem; max-width: 40rem; }
.oops h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); margin: 0 0 0.9rem; letter-spacing: -0.04em; }
.oops p { color: var(--ink-soft); font-size: 1.05rem; }
.oops .hero-cta { margin-top: 1.6rem; }

/* --- phone budget ---

   The arc -- red number, sentence, green number, priced button -- has to land
   inside 844px, and every line added above the button eats into that. These
   are the millimetres that buy the guard sentence its place.
   tools/viewport.test.mjs fails the build if this stops adding up. */

@media (max-width: 30rem) {
  .card, .verdict { padding-left: 1.1rem; padding-right: 1.1rem; }
  .card { margin: 0.85rem 0; }
  .verdict { padding-top: 1.15rem; padding-bottom: 1.15rem; }
  .verdict-num { font-size: clamp(3rem, 15vw, 4rem); }
  .verdict-line { margin-top: 0.6rem; font-size: 0.99rem; }
  .success-num { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .success-count { margin-bottom: 0.65rem; }
  .split { margin-bottom: 0.7rem; }
  .success-guard { margin-bottom: 0.7rem; }
  .alarm { margin-top: 0.75rem; }
  .sample-banner { padding: 0.7rem 0.9rem; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}