/* =========================================================================
   LISTING LAUNCHPAD / PORCHLYTE FORM TOOLS — SHARED DESIGN SYSTEM
   -------------------------------------------------------------------------
   This stylesheet is the cohesive base for every form tool in the suite.
   The shared base below is identical across the suite. Tool-specific rules
   for the Buyer Consultation tool live in the clearly marked block at the
   bottom and only build on the tokens above; they never change them.

   Palette: white + cream surfaces, dark brown type, rust as an accent only.
   Type:    Chapza (display, falls back to Playfair Display) + Inter (body/UI).
   ========================================================================= */

:root {
  /* Brand palette */
  --cream: #efeae3;      /* page + section backgrounds */
  --white: #ffffff;      /* cards, tool surfaces, form fields */
  --tan: #d7c8ba;        /* secondary panels, hover, dividers, pills */
  --brown: #2b1f1b;      /* body text + headings, dark modules */
  --rust: #80441e;       /* accent only: buttons, active state, underlines */

  --text: var(--brown);
  --text-soft: #6f6157;  /* muted brown for sub text */
  --border: #e4dacd;     /* soft warm border */
  --error: #80441e;

  --font-display: "Chapza", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(43, 31, 27, 0.04), 0 6px 20px rgba(43, 31, 27, 0.05);

  --content-width: 760px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }

/* The hidden attribute must always win, even over display rules like flex/grid. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 24px 96px;
}

.screen { display: none; }
.screen.active {
  display: block;
  animation: fadein 0.35s var(--ease);
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== TOOL HEADER (reusable shell — same on every form) ===== */
.tool-header {
  text-align: center;
  margin: 0 0 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.tool-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--brown);
  margin: 0 0 12px;
}
.tool-tagline {
  margin: 0 auto;
  max-width: 540px;
  color: var(--text-soft);
  font-size: 16px;
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--rust);
  color: #fff;
  border: 1px solid var(--rust);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 2px 8px rgba(128, 68, 30, 0.18);
}
.btn-primary:hover {
  background: #6c3818;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(128, 68, 30, 0.24);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: var(--brown);
  color: #fff;
  border: 1px solid var(--brown);
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.2s var(--ease);
}
.btn-secondary:hover { background: #1c1512; transform: translateY(-1px); }

/* Quiet Copy button — tan pill */
.btn-copy {
  background: var(--tan);
  color: var(--brown);
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn-copy:hover { background: #cbb9a8; }
.btn-copy.is-copied { background: var(--rust); color: #fff; }

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ===== FORM ===== */
#form, #loading, #results {
  margin: 0 auto;
}
.form-note {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--rust);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 28px;
  color: var(--text-soft);
  font-size: 14.5px;
}
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.form-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-margin-top: 96px;
}
.form-section-title {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.field-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field.span-2 { grid-column: span 2; }
.field > span,
.field > legend {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-soft);
  text-align: left;
  padding-left: 2px;
}
.field > span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--tan);
  margin-left: 6px;
}
.field input,
.field select,
.field textarea {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  font: inherit;
  color: inherit;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(128, 68, 30, 0.15);
}

.form-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}
.form-actions .microcopy { text-align: center; }
.microcopy {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
}
.form-error {
  color: var(--error);
  font-size: 14px;
  margin: 8px 0 0;
  font-weight: 500;
  background: #fbf1ea;
  border: 1px solid #e7c9b6;
  border-left: 3px solid var(--rust);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

/* ===== SCREEN HEADERS (used on the results screen) ===== */
.screen-header {
  text-align: left;
  margin: 8px 0 28px;
}
.screen-header.center { text-align: center; }
.screen-header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.05;
  color: var(--brown);
  margin: 0 0 12px;
}
.screen-header.center h2.underline { display: inline-block; }
.screen-header.center h2.underline::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--rust);
  border-radius: 2px;
  margin: 14px auto 0;
}
.screen-sub {
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
}

/* ===== LOADING ===== */
.loader {
  text-align: center;
  padding: 72px 0;
}
.loader h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.5vw, 32px);
  color: var(--brown);
  margin: 0 0 8px;
}

/* ===== RESULTS ===== */
.result-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.result-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brown);
  color: #fff;
  padding: 12px 22px;
}
.result-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--tan);
}
.result-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}
.result-body { padding: 22px 22px 8px; }
.content-body {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--brown);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.result-card .card-actions { padding: 0 22px 20px; }

.results-again {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Loading shimmer shown in each card until its content returns */
.shimmer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 10px;
}
.shimmer span {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cream) 25%, #e7ddd0 37%, var(--cream) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.shimmer span:nth-child(1) { width: 100%; }
.shimmer span:nth-child(2) { width: 92%; }
.shimmer span:nth-child(3) { width: 70%; }
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shimmer span { animation: none; }
}

.card-error-msg {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
}

.results-writing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0;
  color: var(--text-soft);
  font-size: 14px;
}
.writing-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rust);
  animation: writing-pulse 1s ease-in-out infinite;
}
@keyframes writing-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .writing-dot { animation: none; }
}

.result-card.just-arrived { animation: card-in 0.35s var(--ease); }
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== FOOTER ===== */
.site-footer {
  margin-top: 56px;
  padding: 26px 0 12px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-disclaimer {
  font-size: 12px;
  color: var(--text-soft);
  margin: 0 auto;
  max-width: 620px;
  opacity: 0.9;
  line-height: 1.55;
}

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

/* ===== RESPONSIVE (shared) ===== */
@media (max-width: 520px) {
  .app { padding: 28px 18px 80px; }
  .result-bar { padding: 11px 18px; }
  .result-body { padding: 18px 18px 6px; }
  .result-card .card-actions { padding: 0 18px 18px; }
  .field.span-2 { grid-column: auto; }
}


/* =========================================================================
   SHARED SHELL, CONTINUED
   Header furniture, the sticky progress rail and the results toolbar. These
   are identical across the suite and are copied here unchanged so every tool
   in the family still feels like the same product.
   ========================================================================= */

.tool-badge-cat {
  display: inline-block;
  background: var(--brown);
  color: var(--tan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.tool-subhead {
  margin: 0 auto;
  max-width: 560px;
  color: var(--rust);
  font-size: clamp(16px, 2.4vw, 19px);
  font-weight: 600;
}
.tool-support {
  margin: 12px auto 0;
  max-width: 560px;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.tool-support em { font-style: italic; }
.tool-header-cta { margin-top: 22px; }
@media (max-width: 520px) {
  .tool-badge { position: static; display: inline-block; margin: 0 8px 0 0; }
}
.progress-rail {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(239, 234, 227, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 0 0 28px;
  box-shadow: 0 4px 14px rgba(43, 31, 27, 0.05);
}
.progress-track {
  height: 5px;
  background: var(--tan);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 9px;
}
.progress-fill {
  display: block;
  height: 100%;
  width: 10%;
  background: var(--rust);
  border-radius: var(--radius-pill);
  transition: width 0.35s var(--ease);
}
.progress-current {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 4px;
  text-align: left;
}
.progress-step {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  white-space: nowrap;
}
.progress-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--brown);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.progress-chevron { color: var(--text-soft); font-size: 12px; }
.progress-menu {
  list-style: none;
  margin: 8px 0 2px;
  padding: 6px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.progress-menu li {
  font-size: 13px;
  color: var(--text-soft);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
}
.progress-menu li:hover { background: var(--tan); color: var(--brown); }
.progress-menu li .n {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--rust);
  min-width: 18px;
}
.progress-menu li.active { background: var(--rust); color: #fff; }
.progress-menu li.active .n { color: #fff; }
@media (max-width: 520px) {
  .progress-menu { grid-template-columns: 1fr; }
}
/* ---- Results toolbar ---- */
.results-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border);
}

/* =========================================================================
   TOOL-SPECIFIC ADDITIONS (SEO + AEO Visibility Audit only)
   Builds on the shared system above and reuses its tokens. Nothing here
   changes the shared components; it only adds the pieces this tool needs.

   One idea runs through all of it: FACTS and WRITING look different on
   screen. Anything the scan established is rendered plainly, with its
   evidence attached. Anything a model wrote sits in a card that arrives
   later, and says so while it is arriving. A member should never have to
   wonder which of the two they are reading.
   ========================================================================= */

/* Status colour, used by check pills, score dials and coverage chips.
   Green and red are deliberately muted so a page full of findings reads as
   a report rather than an alarm. */
:root {
  --pass: #4f6b46;
  --pass-soft: #eaf0e6;
  --warn: #8a6414;
  --warn-soft: #f7efdc;
  --fail: #9a3b22;
  --fail-soft: #f7e6e0;
  --unknown: #6f6157;
  --unknown-soft: #efeae3;
}

/* ---- Form extras ---- */
.section-hint {
  margin: -6px 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
  grid-column: 1 / -1;
}
.field-help {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.needed-inline {
  background: var(--rust); color: #fff; border-radius: var(--radius-pill);
  padding: 1px 8px; font-size: 11px; letter-spacing: 0.04em; font-weight: 600;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 10px;
  margin-top: 4px;
}
.check {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px; color: var(--brown);
  border: 1px solid transparent;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.check:hover { background: #faf7f2; border-color: var(--border); }
.check input { margin-top: 3px; accent-color: var(--rust); }

/* ---- Fix selection ---- */
.option-group { margin-top: 22px; }
.option-group:first-child { margin-top: 6px; }
.option-group-title {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--rust); margin: 0 0 4px;
}
.option-group-blurb { margin: 0 0 12px; font-size: 13px; color: var(--text-soft); }
.option-grid { display: grid; gap: 8px; }
.option {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.option:hover { border-color: var(--tan); }
.option:has(input:checked) { border-color: var(--rust); box-shadow: 0 2px 10px rgba(128, 68, 30, 0.1); }
.option input { margin-top: 4px; accent-color: var(--rust); }
.option-body { display: flex; flex-direction: column; gap: 2px; }
.option-label { font-weight: 600; font-size: 14.5px; color: var(--brown); }
.option-blurb { font-size: 13px; color: var(--text-soft); line-height: 1.5; }

/* =========================================================================
   THE SCANNING SCENE
   A browser window being read, one pass down the page. Calm on purpose: the
   scan is quick, and a frantic loader would oversell what is happening.
   ========================================================================= */
.sc-loader { display: flex; justify-content: center; margin: 0 auto 30px; }
.sc-svg { width: 280px; height: auto; overflow: visible; }
.sc-frame { fill: var(--white); stroke: var(--brown); stroke-width: 2; }
.sc-bar { stroke: var(--border); stroke-width: 1.5; }
.sc-dot { fill: var(--tan); }
.sc-addr { fill: var(--cream); stroke: var(--border); stroke-width: 1; }
.sc-hero { fill: var(--cream); }
.sc-line { stroke: var(--tan); stroke-width: 5; stroke-linecap: round; }
.sc-content > * { opacity: 0.35; }
.sc-hero, .sc-line { animation: sc-lit 3.2s var(--ease) infinite; }
.sc-l1 { animation-delay: 0.5s; }
.sc-l2 { animation-delay: 0.8s; }
.sc-l3 { animation-delay: 1.1s; }
.sc-l4 { animation-delay: 1.4s; }
@keyframes sc-lit {
  0%, 100% { opacity: 0.3; }
  22%, 46% { opacity: 1; }
}
.sc-scan {
  fill: var(--rust); opacity: 0.55;
  animation: sc-pass 3.2s var(--ease) infinite;
}
@keyframes sc-pass {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 0.6; }
  85%  { transform: translateY(98px); opacity: 0.6; }
  100% { transform: translateY(98px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-scan, .sc-hero, .sc-line { animation: none !important; }
  .sc-content > * { opacity: 0.8; }
  .sc-scan { opacity: 0.4; }
}

/* =========================================================================
   SCORECARD
   ========================================================================= */
.scorecard { margin-bottom: 22px; }
.scorecard-top {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--brown);
}
.dial {
  padding: 26px 22px; color: var(--tan); text-align: center;
  border-right: 1px solid rgba(215, 200, 186, 0.18);
}
.dial:last-child { border-right: 0; }
.dial-value {
  font-family: var(--font-display); font-size: 54px; line-height: 1;
  font-weight: 600; color: #fff;
}
.dial-value.band-strong { color: #b9d3ad; }
.dial-value.band-solid { color: #d8e2c6; }
.dial-value.band-partial { color: #e9d7a8; }
.dial-value.band-weak { color: #e8bda0; }
.dial-value.band-invisible { color: #e5a98f; }
.dial-value.band-unknown { color: var(--tan); }
.dial-label {
  margin-top: 8px; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; color: #fff;
}
.dial-band { margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--tan); }
.dial-blurb { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: rgba(215, 200, 186, 0.85); }

.score-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.count-chip {
  font-size: 12.5px; padding: 4px 11px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.count-chip b { font-weight: 700; }
.chip-pass { background: var(--pass-soft); color: var(--pass); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-fail { background: var(--fail-soft); color: var(--fail); }
.chip-unknown { background: var(--unknown-soft); color: var(--unknown); border-color: var(--border); }

.score-meta { margin: 0 0 12px; font-size: 13px; color: var(--text-soft); }
.score-note {
  margin: 0; padding: 12px 14px; background: var(--cream);
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; color: var(--text-soft);
}

/* =========================================================================
   FINDINGS
   ========================================================================= */
.group-card { margin-bottom: 20px; }
.bar-score {
  margin-left: auto; font-family: var(--font-display); font-size: 19px;
  font-weight: 600; color: var(--tan);
}
.group-blurb { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }

.finding-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.finding-list > .finding {
  display: block; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--white); cursor: default;
}
.finding-list > .finding:hover { background: var(--white); }
.finding-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; cursor: pointer; list-style: none;
}
.finding-head::-webkit-details-marker { display: none; }
.finding-head:hover { background: #faf7f2; }
.finding-pill {
  flex: none; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill);
  min-width: 84px; text-align: center;
}
.pill-pass { background: var(--pass-soft); color: var(--pass); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-fail { background: var(--fail); color: #fff; }
.pill-unknown { background: var(--unknown-soft); color: var(--unknown); border: 1px solid var(--border); }
.pill-opportunity { background: var(--tan); color: var(--brown); }
.finding-label { flex: 1; font-size: 14px; font-weight: 500; color: var(--brown); }
.finding-chevron { color: var(--text-soft); font-size: 11px; transition: transform 0.2s var(--ease); }
.check[open] .finding-chevron { transform: rotate(180deg); }
.finding-body { padding: 2px 13px 14px; border-top: 1px solid var(--border); }
.note-field { margin-top: 12px; }
.note-field-label {
  display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--rust); margin-bottom: 4px;
}
.note-field-text { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--brown); }
.check-fail .finding-label { font-weight: 600; }

/* ---- Coverage ---- */
.coverage-title {
  margin: 18px 0 10px; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: var(--text-soft);
}
.coverage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.coverage-chip {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--white);
}
.chip-missing { border-left: 3px solid var(--fail); }
.chip-covered { border-left: 3px solid var(--pass); opacity: 0.75; }
.coverage-q { display: block; font-size: 13.5px; line-height: 1.45; color: var(--brown); }
.coverage-for {
  display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-soft);
}

/* =========================================================================
   WRITTEN CARDS
   ========================================================================= */
.pending .result-bar { opacity: 0.75; }
.pending-note { margin: 0 0 14px; font-size: 13px; color: var(--text-soft); font-style: italic; }

.verdict-card { margin-bottom: 22px; }
.verdict-headline {
  margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(20px, 3vw, 26px);
  line-height: 1.25; font-weight: 600; color: var(--brown);
}
.verdict-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.lblock {
  padding: 14px 16px; background: var(--cream);
  border-radius: var(--radius-sm); border-left: 3px solid var(--tan);
}
.lblock-label {
  display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--rust); margin-bottom: 6px;
}
.lblock-text { margin: 0; font-size: 13.5px; line-height: 1.65; }
.lblock-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.lblock-list li { margin-bottom: 6px; }
.lblock-list li:last-child { margin-bottom: 0; }
.tone-good { border-left-color: var(--pass); }
.tone-bad { border-left-color: var(--fail); }
.tone-unknown { border-left-color: var(--text-soft); }

.first-move {
  margin-top: 18px; padding: 16px 18px; background: var(--brown);
  color: #fff; border-radius: var(--radius-md);
}
.first-move-label {
  display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--tan); margin-bottom: 6px;
}
.first-move p { margin: 0; font-size: 15px; line-height: 1.6; }
.expectations {
  margin: 18px 0 0; padding: 13px 15px; background: var(--cream);
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.65; color: var(--text-soft);
}
.expectations b { color: var(--brown); }

.fh-note {
  margin: 0 0 20px; padding: 16px 18px; background: var(--fail-soft);
  border-left: 3px solid var(--fail); border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.65; color: var(--brown);
}
.fh-note b { color: var(--fail); }

/* ---- Live search ---- */
.research-card { margin-bottom: 22px; }
.research-label {
  margin: 18px 0 6px; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: var(--rust);
}
.sources { margin-top: 18px; font-size: 13px; }
.sources summary { cursor: pointer; color: var(--text-soft); }
.source-list { margin: 10px 0 0; padding-left: 18px; }
.source-list li { margin-bottom: 5px; }
.source-list a { color: var(--rust); word-break: break-word; }

/* ---- Plan ---- */
.plan-card { margin-bottom: 22px; }
.only-three {
  margin: 18px 0; padding: 16px 18px; background: var(--tan);
  border-radius: var(--radius-md);
}
.only-three-label {
  display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--rust); margin-bottom: 8px;
}
.only-three ol { margin: 0; padding-left: 20px; font-size: 14.5px; font-weight: 500; }
.only-three li { margin-bottom: 5px; }
.plan-when {
  margin: 24px 0 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--brown); padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.plan-step { padding: 14px 0; border-bottom: 1px dashed var(--border); }
.plan-step:last-child { border-bottom: 0; }
.plan-step-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-num {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  color: var(--rust); min-width: 22px;
}
.plan-title { font-size: 15.5px; font-weight: 600; color: var(--brown); flex: 1; min-width: 200px; }
.plan-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-size: 10.5px; letter-spacing: 0.04em; padding: 3px 8px;
  border-radius: var(--radius-pill); background: var(--cream);
  color: var(--text-soft); border: 1px solid var(--border); white-space: nowrap;
}
.impact-high { background: var(--rust); color: #fff; border-color: var(--rust); }
.impact-medium { background: var(--tan); color: var(--brown); border-color: var(--tan); }
.plan-step-body { padding-left: 32px; }
.plan-from { margin: 10px 0 0; font-size: 12px; color: var(--text-soft); font-style: italic; }

/* ---- Pieces ---- */
.pieces-group { margin-top: 30px; }
.pieces-group-title {
  margin: 0 0 14px; font-family: var(--font-display); font-size: 21px;
  font-weight: 600; color: var(--brown);
}
.needed-tag {
  margin-left: auto; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; background: var(--tan); color: var(--brown);
  padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
}

/* Search result preview. Close enough to a real result to be useful, in the
   brand's own colours so nobody mistakes it for a screenshot of Google. */
.tag-block { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--border); }
.tag-block:first-of-type { border-top: 0; padding-top: 0; }
.tag-page {
  display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--text-soft); margin-bottom: 10px;
}
.serp {
  padding: 14px 16px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.serp-url { font-size: 12.5px; color: var(--text-soft); margin-bottom: 3px; word-break: break-all; }
.serp-title { font-size: 17px; line-height: 1.35; color: var(--rust); font-weight: 500; margin-bottom: 4px; }
.serp-desc { font-size: 13px; line-height: 1.5; color: var(--brown); }

.tag-fields { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tag-field-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tag-field-label {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--rust);
}
.tag-chars { font-size: 11.5px; color: var(--text-soft); }
.tag-chars.over { color: var(--fail); font-weight: 600; }
.btn-copy-inline { margin-left: auto; padding: 3px 10px; font-size: 11.5px; }
.tag-current { margin-top: 10px; font-size: 12.5px; color: var(--text-soft); }
.tag-current summary { cursor: pointer; }
.tag-current-line { margin: 6px 0 0; word-break: break-word; }
.tag-changed { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-soft); }

.copy-block { margin-top: 18px; }
.copy-block-label {
  display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--rust); margin-bottom: 6px;
}
.copy-block .btn-copy-inline { margin-top: 6px; margin-left: 0; }

.qa-pair { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.qa-pair:first-of-type { border-top: 0; }
.qa-q { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--brown); }
.qa-for {
  margin-left: 8px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--text-soft); background: var(--cream);
  padding: 2px 7px; border-radius: var(--radius-pill); vertical-align: middle;
}
.qa-a { margin: 0; font-size: 14px; line-height: 1.7; color: var(--brown); }

.content-item { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.content-item:first-of-type { border-top: 0; padding-top: 0; }
.content-item-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.content-item-title { font-size: 15.5px; font-weight: 600; color: var(--brown); flex: 1; min-width: 200px; }
.content-item-q { margin: 8px 0 0; font-size: 13px; color: var(--rust); }
.content-item-why { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
.content-outline { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.content-outline li { margin-bottom: 4px; }

.howto-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.65; }
.howto-list li { margin-bottom: 7px; }

.code-wrap { margin-top: 20px; }
.code-label {
  display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--rust); margin-bottom: 6px;
}
.code-block {
  margin: 0; padding: 16px; background: var(--brown); color: #eee5da;
  border-radius: var(--radius-sm); overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; white-space: pre;
}
.code-missing {
  margin: 16px 0 0; padding: 12px 14px; background: var(--warn-soft);
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; color: var(--brown);
}

/* ---- Failure and muted states ---- */
.card-blocked .result-bar, .card-error .result-bar { background: var(--fail); }
.card-muted .result-bar { background: var(--text-soft); }
.blocked-url {
  margin: 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; color: var(--rust); word-break: break-all;
}
.blocked-note { margin: 16px 0 0; font-size: 13px; color: var(--text-soft); }

/* ---- Responsive ---- */
@media (max-width: 620px) {
  .scorecard-top { grid-template-columns: 1fr; }
  .dial { border-right: 0; border-bottom: 1px solid rgba(215, 200, 186, 0.18); }
  .verdict-split { grid-template-columns: 1fr; }
  .finding-pill { min-width: 0; }
  .plan-step-body { padding-left: 0; }
  .coverage-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   PRINT / SAVE AS PDF
   The printed version is the one an agent hands to whoever maintains their
   site, so every finding is opened out rather than left behind a toggle.
   ========================================================================= */
@media print {
  .tool-header-cta, .progress-rail, .results-toolbar, .results-again,
  .results-writing, #form, #loading, .card-actions, .sources,
  .site-footer .footer-disclaimer { display: none !important; }
  body { background: #fff; }
  .app { padding: 0; max-width: 100%; }
  .screen { display: block !important; }
  #form, #loading { display: none !important; }
  .result-card, .plan-step, .tag-block, .qa-pair, .content-item {
    box-shadow: none; break-inside: avoid; page-break-inside: avoid;
  }
  .result-bar, .scorecard-top, .first-move {
    background: #2b1f1b !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .finding-body { display: block !important; }
  .finding-chevron { display: none; }
  .code-block { background: #f4f1ec !important; color: #2b1f1b !important; border: 1px solid #ddd; }
}