/* ==========================================================================
   LAYOUT — §6.3 grid, §6.5 the two states, §6.6 section inventory
   Strict 12 column, max 1200, contained. Single column below 768px.
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  row-gap: var(--s-5);
}

/* One padding rule for sections. Variants change the custom property, never
   the declaration, so nothing cancels anything out. */
.section {
  --section-pad: var(--s-9);
  padding-block: var(--section-pad);
  border-top: 1px solid var(--rule);
}

.section-tight {
  --section-pad: var(--s-7);
}

.section-open {
  border-top: 0;
}

/* --- Section 1: hero (§6.6 single-column focused action) ----------------- */

.hero {
  padding-block: var(--s-8) var(--s-7);
}

/* State one only: the field is the fold. Nothing else above it. */
body[data-state="idle"] .hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-copy {
  grid-column: 1 / span 9;
}

.hero-sub {
  margin-top: var(--s-4);
  color: var(--ink-muted);
  max-width: 48ch;
}

/* §6.5: the one deliberate asymmetry. The field sits in the left seven
   columns. The report opens full width beneath it. */
.hero-form {
  grid-column: 1 / span 7;
  margin-top: var(--s-6);
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.field-help {
  margin-top: var(--s-3);
}

/* §6.5's one exception. A text link, never a second button, sitting inside
   the field's own block so it reads as part of the control. */
.field-branch {
  margin-top: var(--s-4);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.field-branch-note {
  margin-top: var(--s-1);
}

.field-error {
  margin-top: var(--s-3);
  color: var(--ink);
}

.field-error:empty {
  display: none;
}

/* State two: the hero collapses to a single line and gets out of the way. */
body[data-state="report"] .hero {
  padding-block: var(--s-4) 0;
}

.section-report {
  --section-pad: var(--s-3);
}

.report-slot {
  grid-column: 1 / -1;
}

.hero-resume {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
}

.hero-resume-subject {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
}

/* --- The self-audit strip (§6.7 pre-audit state) ------------------------- */

.selfaudit {
  padding-block: var(--s-6);
  border-top: 1px solid var(--rule);
}

.selfaudit-inner {
  grid-column: 1 / -1;
}

/* --- Section 3: what it checks, and what it does not ---------------------- */

.compare-a {
  grid-column: 1 / span 6;
}

.compare-b {
  grid-column: 7 / span 6;
}

.compare-list {
  margin-top: var(--s-4);
}

/* One hairline per group, not one per row (§6.3). The rule under the column
   title is the group's hairline. The rows are held apart by rhythm, which is
   also what keeps the marketing sections at density 3 while the readout runs
   at 7. */
.compare-list li {
  padding-block: var(--s-2);
  color: var(--ink-muted);
}

/* --- Section 4: the mockup offer (§6.6 asymmetric split with real image) -- */

.offer-copy {
  grid-column: 1 / span 7;
}

.offer-figure {
  grid-column: 8 / span 5;
}

.offer-form {
  margin-top: var(--s-6);
  max-width: 30rem;
}

.offer-note {
  margin-top: var(--s-3);
}

/* --- Section 5: footer (§6.6 plain rule-separated row) -------------------- */

.footer {
  padding-block: var(--s-6) var(--s-7);
  border-top: 1px solid var(--rule);
}

.footer-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.footer-mark {
  font-weight: 600;
  color: var(--accent-text);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

/* --- Document pages (privacy) -------------------------------------------- */

.doc {
  grid-column: 1 / span 8;
  padding-block: var(--s-8) var(--s-9);
}

.doc > * + * {
  margin-top: var(--s-4);
}

.doc h2 {
  margin-top: var(--s-7);
}

.doc p,
.doc li {
  max-width: var(--measure);
  color: var(--ink-muted);
}

.doc li {
  padding-block: var(--s-1);
}

.doc dt {
  font-weight: 600;
  color: var(--ink);
}

.doc dd {
  margin: 0 0 var(--s-3);
  max-width: var(--measure);
  color: var(--ink-muted);
}

/* --- State switching ------------------------------------------------------
   Three states since the §13 extension. Blocks are visible by default and
   hidden per state, so nothing has to guess a display type back.

   idle    the field is the fold
   running an audit is in flight
   report  the visitor's report holds the primary column
   direct  no website, no audit, straight to the offer (§13.2)             */

[hidden] {
  display: none;
}

/* The report and its resume strip: absent before an audit, and absent from
   the direct path entirely, where no audit ever runs. */
body[data-state="idle"] .when-report,
body[data-state="direct"] .when-report {
  display: none;
}

body[data-state="running"] .when-idle,
body[data-state="report"] .when-idle,
body[data-state="direct"] .when-idle {
  display: none;
}

body:not([data-state="direct"]) .when-direct {
  display: none;
}

/* Stage 8 defect. The h1 lived inside a block that was display:none once a
   report rendered, so in the report and direct states the document had no
   top level heading at all, in the state that matters most. It now leaves
   the layout without leaving the outline. Absolutely positioned grid items
   are out of flow, so nothing shifts. */
body:not([data-state="idle"]) .hero-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Anything that only makes sense because an audit happened. §13.2 takes
   "what the audit checks" off the direct path for the same reason it takes
   the report off it: that visitor skipped the audit. */
body[data-state="direct"] .when-audit {
  display: none;
}

/* --- Single column below 768px, no exceptions (§6.3) --------------------- */

@media (max-width: 767px) {
  .hero-copy,
  .hero-form,
  .compare-a,
  .compare-b,
  .offer-copy,
  .offer-figure,
  .doc {
    grid-column: 1 / -1;
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    --section-pad: var(--s-7);
  }

  .compare-b {
    margin-top: var(--s-5);
  }

  /* The field is still the fold on a phone. Only the padding gives way. */
  .hero {
    padding-block: var(--s-7) var(--s-6);
  }
}