/* =============================================================================
 * Testaumate — site layer
 *
 * Page-specific layout ONLY. Loads last, after tokens -> base -> components,
 * so it composes on top of the shared kit without editing it.
 * Every value binds a role token; no raw colours (see brand/README.md rule 1).
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Masthead — the short page header on inner pages.
 * The homepage uses the kit's full .hero; every other page uses this.
 * -------------------------------------------------------------------------- */
.masthead {
  padding-block: var(--space-20) var(--space-12);
  background: var(--color-surface-canvas);
  border-bottom: 1px solid var(--color-border-default);
}
.masthead h1 { margin-top: var(--space-3); max-width: 20ch; }
.masthead .lead { margin-top: var(--space-5); max-width: 62ch; }
.masthead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

@media (max-width: 640px) {
  .masthead { padding-block: var(--space-12) var(--space-10); }
}

/* -----------------------------------------------------------------------------
 * Split — prose on one side, an evidence panel on the other.
 * Used for the three product sections and both how-it-works deep dives.
 * .split--flip puts the panel on the left at desktop width without changing
 * source order, so the reading order stays correct for screen readers.
 * -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.split + .split { margin-top: var(--space-24); }
.split h2 { margin-top: var(--space-3); }
.split .lead { margin-top: var(--space-5); }
.split--flip .split__body { order: 2; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .split + .split { margin-top: var(--space-16); }
  .split--flip .split__body { order: 0; }
}

/* -----------------------------------------------------------------------------
 * Feature list — the checkmark list that carries each section's specifics.
 * -------------------------------------------------------------------------- */
.featurelist { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.featurelist li {
  position: relative;
  padding-left: var(--space-8);
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
}
.featurelist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  /* White check layered ON TOP of the gradient disc (first background layer
     paints topmost). A CSS mask can't do this — a white stroke is fully
     opaque in the alpha channel, so it would punch nothing out. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8.5 10.5 15.5 7 12' stroke='white' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    var(--grad-teal);
  box-shadow: var(--glow-teal);
}
.featurelist li b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

/* -----------------------------------------------------------------------------
 * Trace rows — the evidence/run panels (self-heal, run report, orchestrator).
 * These sit inside the kit's .hero-panel and extend .panel-row's vocabulary
 * with a stacked variant: chip, then a line of detail, then mono metadata.
 * -------------------------------------------------------------------------- */
.trace {
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  margin-bottom: var(--space-3);
}
.trace:last-child { margin-bottom: 0; }
.trace__chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: var(--font-weight-semibold);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}
.trace__chip--heal { background: var(--color-info-surface); color: var(--color-info-text); }
.trace__chip--pass { background: var(--color-success-surface); color: var(--color-success-text); }
.trace__chip--flag { background: var(--color-warning-surface); color: var(--color-warning-text); }
.trace__text {
  margin-top: var(--space-3);
  font-size: var(--type-body-md-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.trace__meta {
  margin-top: var(--space-2);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--color-text-muted);
}

/* Locator pair: the broken selector struck through, the re-authored one below. */
.loc {
  display: block;
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  line-height: 1.5;
  word-break: break-all;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
}
.loc--old { text-decoration: line-through; color: var(--color-danger-text); background: var(--color-danger-surface); }
.loc--new { color: var(--color-success-text); background: var(--color-success-surface); }

/* -----------------------------------------------------------------------------
 * Pipeline — the kit's .pipeline is a 7-column strip (Systaumate's 7 phases).
 * Testaumate's pipeline is 6 steps, so the column count is overridden here
 * rather than in the kit, which is correct as-is for its own product.
 * -------------------------------------------------------------------------- */
.pipeline--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .pipeline--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .pipeline--6 { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------------------
 * Self-check — the 9-symptom diagnostic and its meter.
 * Progressive enhancement: with JS off the checkboxes still tick, the meter
 * simply never updates, so nothing is broken or invisible.
 * -------------------------------------------------------------------------- */
.selfcheck { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-10); align-items: start; }
@media (max-width: 900px) { .selfcheck { grid-template-columns: 1fr; gap: var(--space-8); } }

.symptoms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 640px) { .symptoms { grid-template-columns: 1fr; } }

.sym {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard),
              background var(--motion-duration-fast) var(--motion-easing-standard);
}
.sym:hover { border-color: var(--color-border-strong); }
.sym.checked {
  border-color: var(--color-accent-subtle-border);
  background: var(--teal-bg);
  color: var(--color-text-primary);
}
.sym input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--teal-h); cursor: pointer; }

.meter { padding: var(--space-6); position: sticky; top: calc(var(--size-header-height) + var(--space-6)); }
@media (max-width: 900px) { .meter { position: static; } }
.meter__score {
  font-family: var(--font-family-mono);
  font-size: var(--type-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.meter__bar {
  margin-top: var(--space-4);
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--grad-teal);
  transition: width var(--motion-duration-base) var(--motion-easing-standard);
}
.meter__verdict {
  margin-top: var(--space-5);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-muted);
}
.meter__verdict b { color: var(--color-text-primary); }
.meter .btn { margin-top: var(--space-6); }

@media (prefers-reduced-motion: reduce) { .meter__fill { transition: none; } }

/* -----------------------------------------------------------------------------
 * Comparison table — must scroll inside itself, never widen the page.
 * -------------------------------------------------------------------------- */
.cmp { overflow-x: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: var(--color-surface-raised); }
.cmp table { width: 100%; min-width: 640px; border-collapse: collapse; }
.cmp th, .cmp td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--type-body-md-size);
  border-bottom: 1px solid var(--color-border-default);
}
.cmp thead th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-surface-canvas);
  white-space: nowrap;
}
.cmp tbody th { font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td { color: var(--color-text-muted); }
.cmp .yes { color: var(--color-success-text); font-weight: var(--font-weight-semibold); }
.cmp .no  { color: var(--color-text-muted); }

/* -----------------------------------------------------------------------------
 * Pricing tiers
 * -------------------------------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

.tier { display: flex; flex-direction: column; height: 100%; position: relative; }
.tier--featured { border-color: var(--color-accent-subtle-border); box-shadow: var(--elevation-3); }
.tier__ribbon {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: var(--space-6);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--grad-teal);
  color: var(--color-text-on-accent);
  font-size: 11.5px;
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--glow-teal);
}
.tier__price {
  margin-top: var(--space-4);
  font-size: var(--type-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.tier__desc { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); }
.tier .featurelist { margin-top: var(--space-6); }
.tier .btn { margin-top: var(--space-8); align-self: flex-start; }
/* Push the CTA to the bottom so the three buttons line up across unequal cards. */
.tier .featurelist { flex: 1; align-content: start; }

.pricing-note { margin-top: var(--space-8); text-align: center; font-size: var(--type-body-sm-size); color: var(--color-text-muted); }

/* -----------------------------------------------------------------------------
 * FAQ — native <details>, so it works with JS off and is keyboard-accessible
 * for free. The marker is replaced with a rotating chevron.
 * -------------------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: var(--space-3); }
.faq details {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  overflow: hidden;
}
.faq details[open] { border-color: var(--color-accent-subtle-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--type-body-lg-size);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > p {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-lg-line);
}
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* -----------------------------------------------------------------------------
 * Personas — a card with a role badge above the heading.
 * -------------------------------------------------------------------------- */
.persona__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.persona--primary .persona__badge { background: var(--grad-teal); color: var(--color-text-on-accent); box-shadow: var(--glow-teal); }

/* -----------------------------------------------------------------------------
 * Card tag — the small label above a card heading ("The differentiator").
 * -------------------------------------------------------------------------- */
.card__tag {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--type-body-sm-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-link);
}

/* -----------------------------------------------------------------------------
 * 404 — a standalone page with no header or footer, so it centres in the
 * viewport rather than sitting under chrome that isn't there.
 * -------------------------------------------------------------------------- */
.errpage { min-height: 100vh; display: grid; place-items: center; text-align: center; }
/* .brand is a flex row, so text-align alone would leave it left-aligned. */
.errpage .brand { justify-content: center; }
.errpage__actions,
.errpage__links { display: flex; flex-wrap: wrap; justify-content: center; }
.errpage__actions { gap: var(--space-3); margin-top: var(--space-8); }
.errpage__links { gap: var(--space-5); margin-top: var(--space-10); }

/* -----------------------------------------------------------------------------
 * Legal pages (privacy) — long-form prose in a narrow measure.
 * -------------------------------------------------------------------------- */
.prose { max-width: 760px; }
.prose h2 { margin-top: var(--space-12); font-size: var(--type-h3); }
.prose h2:first-of-type { margin-top: var(--space-8); }
.prose p, .prose ul { margin-top: var(--space-4); color: var(--color-text-muted); line-height: var(--type-body-lg-line); }
.prose ul { padding-left: var(--space-6); }
.prose li { margin-top: var(--space-2); }
.prose a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; }

/* -----------------------------------------------------------------------------
 * Roadmap badge — mirrors the convention the product app already uses
 * ("Coming in R1.1"). Anything not built yet carries one, so the copy and the
 * screenshots never contradict each other.
 * -------------------------------------------------------------------------- */
.roadmap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-info-surface);
  color: var(--color-info-text);
  border: 1px solid var(--color-info-border);
  font-size: 11.5px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  vertical-align: middle;
}
h3 .roadmap, h2 .roadmap { margin-left: var(--space-3); }
.featurelist li .roadmap { margin-left: var(--space-2); }

/* A featurelist row that is roadmap, not shipped: hollow the check so the list
   reads at a glance as "these are in, these are coming". */
.featurelist li.is-roadmap::before {
  background: var(--color-surface-sunken);
  box-shadow: none;
  border: 1.5px dashed var(--color-border-strong);
}

/* -----------------------------------------------------------------------------
 * Product screenshots — real captures of the app.
 * -------------------------------------------------------------------------- */
.shot {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--elevation-3);
  background: var(--color-surface-raised);
}
.shot img { display: block; width: 100%; height: auto; }
.shot__caption {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-surface-canvas);
  font-size: var(--type-body-sm-size);
  color: var(--color-text-muted);
}

/* The matrix example — the one concrete, real differentiator. */
.matrix-callout {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--teal-bg);
  border: 1px solid var(--color-accent-subtle-border);
}
.matrix-callout p { color: var(--color-text-secondary); font-size: var(--type-body-md-size); line-height: var(--type-body-lg-line); }
.matrix-callout code {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
}