/* ==========================================================================
   MARKETING — sections 3, 4, 5
   VISUAL_DENSITY 3. Airy. Nothing here moves (§7.1 lock: no scroll-triggered
   animation of any kind).
   ========================================================================== */

.section-head {
  grid-column: 1 / -1;
  margin-bottom: var(--s-6);
}

.section-head p {
  margin-top: var(--s-3);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.compare-title {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

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

.figure-frame {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  text-align: center;
}

.figure-frame-wide {
  aspect-ratio: 16 / 10;
}

.offer-terms {
  margin-top: var(--s-5);
}

.offer-terms li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-3);
  border-top: 1px solid var(--rule);
}

.offer-terms li span:last-child {
  color: var(--ink-muted);
}

/* --- Section 5: the index (§13.1) ----------------------------------------
   The sixth layout family. A narrow name column against a wide line column,
   rhyming with the report's label-and-value structure so the page does not
   change register when it starts talking about itself.
   One hairline above the group. None between rows. */

.index {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
}

.index-row {
  display: grid;
  /* The page's own 12 columns, so the name column is exactly five of them. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  /* Stage 2 finding 1 (§5.7): the two longest names wrap below about 950px.
     Baseline alignment keeps a wrapped name from shoving its line. */
  align-items: baseline;
  padding-block: var(--s-4);
}

/* 17px at weight 600 is the setting Stage 2 measured the five-column width
   against (§5.7). The build follows the verification. */
.index-name {
  grid-column: 1 / span 5;
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
}

.index-line {
  grid-column: 6 / span 7;
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-muted);
}

/* --- The intake form (§13.3) --------------------------------------------- */

.form-field + .form-field,
.form-field + .choice,
.choice + .form-field,
.choice + .choice {
  margin-top: var(--s-5);
}

.form-actions {
  margin-top: var(--s-5);
}

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

.choice {
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-list {
  margin-top: var(--s-3);
}

.choice-option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-2);
  cursor: pointer;
}

/* The real control stays in the tab order and keeps its semantics. The
   square beside it is what gets seen. */
.choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-box {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--border);
  background: var(--sheet);
}

.choice-option:hover .choice-box {
  border-color: var(--ink-muted);
}

.choice-input:checked + .choice-box {
  border-color: var(--accent);
  background: var(--accent);
}

.choice-input:focus-visible + .choice-box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .offer-figure {
    margin-top: var(--s-6);
  }

  .offer-terms li {
    grid-template-columns: minmax(0, 1fr);
  }

  .index-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-1);
    padding-block: var(--s-3);
  }

  .index-name,
  .index-line {
    grid-column: 1 / -1;
  }
}

/* --- Stage 7: former inline styles ---------------------------------------
   These were style attributes. They moved into the stylesheet so the page can
   ship style-src 'self' with no unsafe-inline. */

.selfaudit-line {
  margin-top: var(--s-2);
}

.selfaudit-frame {
  margin-top: var(--s-5);
}

.offer-lead {
  margin-top: var(--s-4);
}

.figure-frame-second {
  margin-top: var(--s-4);
}

.doc-lead {
  color: var(--ink);
}

.doc-channels {
  margin-top: var(--s-5);
}

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

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

/* --- Certifications (§15.3) -----------------------------------------------
   The same label-and-value readout the instrument uses everywhere else. The
   prior build's note was that raw ID strings read as debug output; in this
   face they read as a record, which is the point. */

.certs {
  grid-column: 1 / -1;
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}

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

.cert-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  align-items: baseline;
  padding-block: var(--s-3);
}

.cert-name {
  grid-column: 1 / span 4;
  font-weight: 600;
  letter-spacing: -0.008em;
}

.cert-fields {
  grid-column: 5 / span 8;
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  align-items: baseline;
}

.cert-value {
  font-size: var(--t-mono-body);
  color: var(--ink);
}

@media (max-width: 767px) {
  .cert-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-2);
  }

  .cert-name,
  .cert-fields {
    grid-column: 1 / -1;
  }
}