/**
 * s2.css — S2 "For Businesses" only, on top of onrecord.css (design.md Part II;
 * docs/design-on-record/screens-spec.md §S2, tokens in design-v2.md).
 *
 * Everything shared — decks, seams, stencils, the type ramp, chips, `.tiers-grid`
 * / `.tier`, `.manifest`, `.ledger__*`, the reveal system — lives in onrecord.css
 * and is reused verbatim. This file holds only S2's own compositions: DECK 01's
 * claim/audit-plate split, the em-dash fact rows, the audit plate itself, the
 * ledger column measure, and DECK 05's spread row.
 *
 * S2 is THE NO-MEDIA EXCEPTION (design-v2 §7): no viewfinder, no hero video, no
 * `has-hero` body class — so nothing here styles a hero, by design.
 * Every value is var(--token) from public-tokens.css / tokens.css.
 */

/* ═══════════ DECK 01 — the offer ═══════════ */

/* S2 opens on a seam instead of a hero, so the very first stencil would sit at
   scroll-0 flush against the sticky 64px nav — and, being translateY(-50%), half
   of it would disappear under the opaque nav band. The lead seam drops clear of
   the chrome; every later seam on the page keeps the shared rhythm. */
.seam--lead {
  margin-block-start: clamp(48px, 7vw, 88px);
}

/* Two columns (design-v2 §5): the claim on the reading edge, the audit plate
   beside it; they stack on one column below ~900px of available inline size. */
.offer-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 4.5vw, 72px);
}
.offer-cols__claim {
  flex: 1.3 1 460px;
}

/* The h1 is the only display line on this screen (no hero to carry it), so it
   must never break to a one-word orphan. `text-wrap: balance` is a break hint,
   not a visual value — the size and leading stay the `.t-h1sub` tokens. */
.offer__h1 {
  text-wrap: balance;
}

/* The sanctioned line — the ONE primacy claim, on its accent keyline (the same
   pattern S1's business deck uses; design-v2 §3.5 accent ration). */
.sanctioned-line {
  max-inline-size: 46ch;
  margin-block-start: 22px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--color-accent);
}

/* The two supporting facts as em-dash rows — full sentences with no natural
   key/value split, so they are a dash-marked list, not a `.manifest` grid. */
.fact-rows {
  margin-block-start: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-inline-size: 62ch;
}
.fact-rows__item {
  display: flex;
  gap: 12px;
  color: var(--color-ink-soft);
  font-size: var(--text-body-lat-size);
  line-height: var(--text-body-lat-leading);
}
:lang(ar) .fact-rows__item {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-body-ar-size);
  line-height: var(--text-body-ar-leading);
}
.fact-rows__item::before {
  content: "—";
  flex: 0 0 auto;
  color: var(--color-ink-muted);
}

.deck__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 32px;
}

/* The audit plate (design-v2 §10): the one fact a buyer can go and verify, set
   as evidence rather than as prose — mono 13/1.75 inside a DASHED marker
   keyline. The dash is the point: this is an annotation on the record, not a
   card. `--color-marker` is decorative-only by contract, so the text inside
   carries its own ink token. */
.audit-plate {
  flex: 1 1 320px;
  max-inline-size: 460px;
  padding: clamp(20px, 2.6vw, 28px);
  border: var(--seam-size) dashed var(--color-marker);
  background: var(--color-bg-deep);
}
.audit-plate__label {
  margin-block-end: 10px;
}
.audit-plate__fact {
  font-family: var(--font-stack-mono);
  font-size: var(--text-label-lat);
  line-height: 1.75;
  color: var(--color-ink-soft);
}
/* IBM Plex Mono carries no Arabic glyphs — the AR plate takes Readex at the
   Arabic label tier (design-v2 §4.2: AR labels replace mono labels at 15px). */
:lang(ar) .audit-plate__label {
  margin-block-end: 10px;
}
.audit-plate__fact {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  line-height: 1.85;
}

/* ═══════════ DECK 02 — packages ═══════════ */

/* `.tiers-grid` / `.tier` / `.tier__count` / `.tier__price` / `.tier__inclusions`
   / `.tier__chip` all come from onrecord.css §13. Only the name needs a rule
   here: it is a <p> carrying the `.t-h3` SIZE class (never a heading rank on
   this screen), and it must inherit the inverted ink on the featured card. */
.tier__name {
  color: inherit;
}
.tier__chip {
  align-self: flex-start;
}

/* ═══════════ DECK 03 — the record ═══════════ */

/* No two-column split here (S2's record deck has no prose column of its own —
   screens-spec §S2): the ledger runs alone at a readable measure. */
.record-ledger {
  max-inline-size: 860px;
}
/* The ledger's empty-plate label carries `.t-mono-key` (S1 parity), and that
   class has no `:lang(ar)` branch — IBM Plex Mono ships no Arabic glyphs, so the
   AR label fell to a system fallback at 12px, under the 15px Arabic label floor
   (design-v2 §4.2 / §11). Scoped here rather than in onrecord.css, which this
   screen does not own; S1 carries the same construct and needs the same fix. */
:lang(ar) .ledger__empty-label,
:lang(ar) .ledger__asof {
  font-family: var(--font-stack-text-ar);
  font-weight: 500;
  font-size: var(--text-label-ar);
  text-transform: none;
}
/* The as-of line's own date island stays Latin mono — a timestamp is chrome. */
:lang(ar) .ledger__asof bdi {
  font-family: var(--font-stack-mono);
  font-weight: 400;
  font-size: var(--text-micro-lat);
}
.deck-body {
  max-inline-size: 62ch;
  color: var(--color-ink-soft);
  font-size: var(--text-body-lat-size);
  line-height: var(--text-body-lat-leading);
}
:lang(ar) .deck-body {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-body-ar-size);
  line-height: var(--text-body-ar-leading);
}

/* ═══════════ DECK 04 — how it works (the mechanism moment) ═══════════ */

.how-manifest {
  margin-block-start: clamp(32px, 4vw, 48px);
}

/* ═══════════ DECK 05 — next step ═══════════ */

/* The spread row: chip on the reading edge, legal line pushed to the inline-end,
   both dropping to their own line when there is no room. */
.next-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px clamp(24px, 4vw, 56px);
}
.next-row__legal {
  flex: 1 1 420px;
  max-inline-size: 66ch;
  text-align: end;
  font-size: var(--text-legal-lat);
  line-height: 1.65;
  color: var(--color-ink-muted);
}
:lang(ar) .next-row__legal {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-legal-ar);
  line-height: 1.9;
}
/* Wrapped (single-column) the end-alignment reads as a ragged orphan — return it
   to the reading edge the moment the row stacks. */
@media (max-width: 767px) {
  .next-row__legal {
    text-align: start;
  }
}