/* ── home.css ───────────────────────────────────────────────────────────────
   Homepage sections. Structure only — the boxes come from sheet.css.
   Deliberately no hover, transition, shadow, radius, or gradient.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────────────────────
   Left aligned, and on wide viewports the headline and lead sit side by
   side so the pair fills the block rather than floating in a centred
   column. The lead is bottom-aligned so both settle on the same baseline.
   ──────────────────────────────────────────────────────────────────────── */
.hero { text-align: left; }
.hero-eyebrow { margin-bottom: var(--s5); color: var(--accent); }

.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}

.hero-lead {
  margin-top: var(--s5);
  color: var(--fg-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  max-width: 42ch;
}

@media (min-width: 64em) {
  .hero-body {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--s7);
    align-items: end;
  }
  .hero-lead { margin-top: 0; padding-bottom: 0.4em; }
}

/* ── Used by ──────────────────────────────────────────────────────────── */
/* v3 workstream 6 — quote marks turn a name into a citation rather than a
   logo-wall entry. Fits this specific list on purpose ("Your Stepdad" reads
   as a citation, not a testimonial) — not a device for every name on site. */
.credit { font-family: var(--font-display); letter-spacing: var(--track-display); font-size: var(--fs-h3); font-style: italic; }
.credit::before { content: open-quote; }
.credit::after  { content: close-quote; }
.credit { quotes: "\201C" "\201D"; color: var(--fg-muted); }

/* ── Principles: stacked rows, not a card row ─────────────────────────── */
/* ══ What we build for ═══════════════════════════════════════════════════
   Three variations, one visible, chosen by [data-build]. They are deliberately
   not the same skeleton: a ledger, a statement with margin notes, and a
   hanging list. Each has one loud move and stays quiet elsewhere.
   ═════════════════════════════════════════════════════════════════════ */
.build { display: none; }
[data-build="spec"]      .build-spec,
[data-build="statement"] .build-statement,
[data-build="refusals"]  .build-refusals { display: block; }

/* ── A · Spec sheet ────────────────────────────────────────────────────────
   Signature: no headline at all. A kicker in the margin, then rows that pair
   a claim with the fact that backs it. The rules are the only structure.
   ═════════════════════════════════════════════════════════════════════ */
.build-spec { padding: var(--s7) var(--gutter); }
.build-kicker {
  font-family: var(--font-data); font-size: var(--fs-data);
  letter-spacing: var(--track-data); text-transform: uppercase;
  color: var(--fg-faint); max-width: none;
  padding-bottom: var(--s5);
}
.spec-row {
  display: grid; gap: var(--s2);
  padding-block: var(--s5);
  border-top: 1px solid var(--rule);
}
.spec-row:last-child { border-bottom: 1px solid var(--rule); }
.spec-row dt { font-size: var(--fs-h3); font-family: var(--font-display); letter-spacing: var(--track-display); }
.spec-row dd { color: var(--fg-muted); font-size: var(--fs-text); max-width: 58ch; }
@media (min-width: 48em) {
  .build-spec { padding: var(--s8) var(--gutter); }
  .spec-row { grid-template-columns: 1fr 1.3fr; gap: var(--s6); align-items: baseline; }
  .spec-row dt { font-size: var(--fs-h2); }
}

/* ── B · One sentence ──────────────────────────────────────────────────────
   Signature: one oversized statement holds the section; everything else is
   set small and hung beside it, the way a margin note sits next to body copy.
   ═════════════════════════════════════════════════════════════════════ */
.build-statement { padding: var(--s8) var(--gutter); }
.build-statement-lead {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.2vw, 6.4rem);
  line-height: 1.06;
  letter-spacing: var(--track-tight);
  max-width: 20ch;
}
.build-margin { margin-top: var(--s7); display: grid; gap: var(--s5); }
.build-margin p {
  font-size: var(--fs-small); color: var(--fg-muted); max-width: 42ch;
  padding-top: var(--s3); border-top: 1px solid var(--rule);
}
.build-margin b { color: var(--fg); font-weight: 500; }
@media (min-width: 64em) {
  /* Scoped behind [data-build="statement"], same as the display:block rule
     above (line 57) — without the guard, this unconditionally sets
     display:grid at 64em+ regardless of which build variant is selected,
     showing the statement section alongside whichever one actually is. */
  [data-build="statement"] .build-statement {
    display: grid; grid-template-columns: 1.6fr 1fr;
    gap: var(--s8); padding: var(--s9) var(--s5); align-items: start;
  }
  .build-margin { margin-top: 0.6em; }   /* aligns to the statement's first baseline */
}

/* ── C · What we won't do ──────────────────────────────────────────────────
   Signature: the section states refusals, not benefits. Hanging labels at a
   narrow measure; no boxes, no columns, nothing centred.
   ═════════════════════════════════════════════════════════════════════ */
.build-refusals { padding: var(--s7) var(--gutter); }
.build-refusals-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  letter-spacing: var(--track-tight);
  padding-bottom: var(--s5);
}
.refusals { list-style: none; }
.refusals li { padding-block: var(--s5); border-top: 1px solid var(--rule); }
.refusal-what {
  display: block;
  font-family: var(--font-data); font-size: var(--fs-small);
  letter-spacing: 0.04em; text-transform: uppercase;
  /* Struck through: these are the things that are not here. */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--fg-faint);
}
.refusal-why {
  display: block; margin-top: var(--s3);
  font-size: var(--fs-text); color: var(--fg); max-width: 54ch;
}
@media (min-width: 48em) {
  .build-refusals { padding: var(--s8) var(--gutter); }
  .refusals li {
    display: grid; grid-template-columns: 24rem 1fr; gap: var(--s6);
    align-items: baseline;
  }
  .refusal-why { margin-top: 0; }
}

/* ── All-access ───────────────────────────────────────────────────────────
   One markup shape, four arrangements picked by [data-access]. Mobile is
   always the plain stack; the editorial layouts start at 64em, where there is
   width to spend.

   The price/sub/btn/note quartet is wrapped in .access-offer — needed so
   "split" (the only variant actually reachable now that [data-access] has
   no lab-bar control; see groupsHTML() in labbar.js) can place the offer as
   one grid item next to the title instead of individually spanning rows
   under it. Rows sized to a spanning item stretch to match its height, and
   the title's wrapped headline is much taller than the offer's own content
   — that mismatch was the huge dead vertical gaps between price/sub/btn/
   note. centre/masthead/ledger below predate this wrapper and place the
   four items in separate grid cells, so they'd need reworking if revived —
   dead code today, not touched here. ═══════════════════════════════════ */
.access {
  padding-block: var(--s6);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s6);
  text-align: left;
}
.access > * { margin-top: 0; max-width: none; }
/* Only "split" ships today (the other three variants below are dead code
   per this file's own comment); this is the one real desktop vertical-
   rhythm step this section gets, since split's own 64em block otherwise
   just restates the mobile s6 unchanged. */
@media (min-width: 48em) { .access { padding-block: var(--s7); } }

/* Same inverted contrast as the Plugins section-head (sheet.css) — solid
   here rather than the two-thirds/one-third band, since that split exists
   there to leave room for the meta text sharing its row; this headline has
   nothing sharing its line, so a flat fill reads as the same device. Same
   font-size too, so the two waypoints read as one system. */
.access-title {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7vw, 6rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  max-width: 16ch;
  padding: var(--s5) var(--s5);
  margin-inline-start: calc(var(--gutter) * -1);
  margin-inline-end: calc(var(--s5) * -1);
  background: var(--fg);
  color: var(--ground);
}
/* The offer quartet, grouped tighter than a uniform stack: price+sub read
   as one idea (what you get, what it costs), a bigger gap sets the button
   apart as the actual action, and the note sits close under it as a
   footnote to that action rather than a fifth equal-weight line. */
.access-offer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.access-price { display: flex; align-items: baseline; gap: var(--s3); }
.access-figure {
  font-family: var(--font-display);
  font-size: clamp(4.8rem, 9vw, 9.6rem);
  line-height: 0.9;
  letter-spacing: var(--track-tight);
}
.access-per, .access-sub {
  font-family: var(--font-data);
  font-size: var(--fs-data);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.access-sub { margin-bottom: var(--s3); }
.access-btn {
  display: inline-flex;
  padding: var(--s4) var(--s6);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-data);
  font-size: var(--fs-data);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
}
.access-note { color: var(--fg-faint); font-size: var(--fs-small); }

/* ── A. centre — the plain stack, centred ───────────────────────────────── */
@media (min-width: 64em) {
  [data-access="centre"] .access {
    align-items: center; text-align: center; gap: var(--s5);
    padding-block: var(--s9); min-height: 62vh; justify-content: center;
  }
  [data-access="centre"] .access-btn { margin-top: var(--s4); }
}

/* ── B. split — headline left, the offer stacked right on a shared baseline ─
   Two grid items, one row — not four items spanning rows under the title.
   A single spanning item forces every row it spans to stretch to fit it;
   with the title's wrapped headline far taller than the offer's own
   content, that stretched the price/sub/btn/note rows into huge dead gaps.
   Keeping the offer as ONE item (.access-offer) sizes the row to whichever
   side is actually tallest, with no cross-item stretching. */
@media (min-width: 64em) {
  [data-access="split"] .access {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s8);
    align-items: start;
    padding-block: var(--s8);
  }
  [data-access="split"] .access-title {
    grid-column: 1; grid-row: 1;
    /* Fills its own column instead of a fixed ch-width sitting in a much
       wider track — that mismatch was the dead horizontal gap between the
       title and the offer. The base rule's max-width: 16ch is a mobile/
       stacked-layout cap; it has no business constraining this column-filled
       box, so it's overridden away entirely here, not just widened.
       min-width: 0 overrides this grid item's default min-width: auto
       (which resolves to its content's min-content size) — without it, a
       1fr track can grow past its "fair" share to fit the item's content
       instead of the two tracks actually landing at an even 50/50 split. */
    max-width: none; min-width: 0;
    width: 100%; box-sizing: border-box;
  }
  [data-access="split"] .access-offer {
    grid-column: 2; grid-row: 1;
    align-self: center;
    min-width: 0;
    /* Book-ends with the left-anchored title instead of sitting flush-left
       in its own column with dead space beyond it all the way to the
       section's right edge — this content (a price, one sub-copy line, a
       button, a note) never needs anywhere near half the row's width, so
       anchoring it to the far right is what actually closes that gap. */
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }
}

/* ── C. masthead — headline across the full width, terms on a ruled row ──
   The rules do the dividing so the row can breathe without boxes.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 64em) {
  [data-access="masthead"] .access {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--s6);
    padding-block: var(--s6);
  }
  [data-access="masthead"] .access-title {
    grid-column: 1 / -1;
    font-size: clamp(6.4rem, 9vw, 13rem);
    max-width: none; margin-bottom: var(--s8);
  }
  [data-access="masthead"] .access-price,
  [data-access="masthead"] .access-btn,
  [data-access="masthead"] .access-note {
    border-top: 1px solid var(--rule); padding-top: var(--s4);
    align-self: start;
  }
  [data-access="masthead"] .access-price { grid-column: 1; grid-row: 2; }
  [data-access="masthead"] .access-sub   { grid-column: 1; grid-row: 3; margin-top: var(--s2); }
  [data-access="masthead"] .access-btn   { grid-column: 2; grid-row: 2; justify-self: start; border-top-color: transparent; }
  [data-access="masthead"] .access-note  { grid-column: 3; grid-row: 2; max-width: 34ch; }
}

/* ── D. ledger — headline and figure on one line, terms below a rule ────── */
@media (min-width: 64em) {
  [data-access="ledger"] .access {
    display: grid;
    grid-template-columns: 1.5fr auto;
    column-gap: var(--s8);
    row-gap: 0;
    align-items: baseline;
    padding-block: 0 var(--s6);
  }
  /* Row 1 (title + price) sits flush against the section's own top rule —
     no padding-block-start to leave a gap — so the band fills the row
     exactly the way every other two-tone band fills its own section-head,
     top rule to bottom rule. The price figure is the tallest thing in the
     row, so stretching the title to match and centering both within it is
     what actually makes that happen. */
  [data-access="ledger"] .access-title {
    grid-column: 1; grid-row: 1; max-width: 14ch;
    align-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--s5);
  }
  [data-access="ledger"] .access-price {
    grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
  }
  [data-access="ledger"] .access-sub {
    grid-column: 1 / -1; grid-row: 2;
    border-top: 1px solid var(--rule); padding-top: var(--s4);
  }
  [data-access="ledger"] .access-btn  { grid-column: 1; grid-row: 3; justify-self: start; margin-top: var(--s4); }
  [data-access="ledger"] .access-note { grid-column: 2; grid-row: 3; justify-self: end; align-self: center; }
}