/* =========================================================================
   Studio3D — inner marketing pages: About, Contact, Features, Pricing.

   Built only on the tokens in system.css. No legacy --border / --ease-quick /
   --ease-out / --pad-base here, so this sheet survives main.css being rebuilt
   underneath it. Loaded after main.css, which is what lets the few overrides
   at the top of this file undo rules those pages must not inherit.

   Rules this file holds itself to (see /DESIGN-SYSTEM.md):
     - radii are only var(--r-chip) 8, var(--r-card) 14, var(--r-pill) 999
     - every border is 1px solid var(--hairline)
     - durations are only --t-quick / --t-base / --t-slow, easing only --ease
     - accent appears on exactly three things: the token cost figures in the
       pricing table (live data), the lowest-rate readout beside them, and
       focus rings. Nothing decorative, no headings, no bullets, no rules.
     - cards do not move on hover; the hairline brightens
   ========================================================================= */

/* ------------------------------------------------------ inherited fixes ---
   main.css hangs a lime radial glow off every page hero. Decorative accent is
   not permitted, and a blurred lime cloud behind an <h1> is as decorative as
   it gets. Also drop its blanket centring — these pages set alignment per
   section, because ten consecutive centred blocks is one silhouette. */

.s3-pg-hero::before { content: none; }

.s3-pg-hero,
.s3-pg .s3-pg-hero { text-align: left; }

/* main.css still carries the older button: a 100px pill that lifts 1px on
   hover behind a lime glow, on a transition of its own invention. Inside
   these pages the system button applies — card radius, no shadow, nothing
   moves, and only the three permitted durations. */
.s3-pg .s3-btn {
  padding: 14px 26px;
  border-radius: var(--r-card);
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  transition: background var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease),
              color var(--t-quick) var(--ease);
}

.s3-pg .s3-btn:hover  { transform: none; box-shadow: none; }
.s3-pg .s3-btn-primary { font-weight: 700; }
.s3-pg .s3-btn-bare    { padding-inline: 0; background: none; }

/* --------------------------------------------------------------- shell --- */

.s3-pg {
  overflow: clip;
}

.s3-pg-hero {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px) clamp(20px, 3vw, 34px);
}

/* Two band weights. Sections alternate between them so consecutive blocks
   differ in something other than their contents. */
.s3-pg-band       { padding-block: clamp(64px, 7vw, 112px); }
.s3-pg-band-tight { padding-block: clamp(40px, 4.5vw, 68px); }

/* The one background change available: a raised plate ruled top and bottom. */
.s3-pg-raised {
  background: var(--surface-1);
  border-block: 1px solid var(--hairline);
}

.s3-pg-center {
  text-align: center;
}

.s3-pg-center .s3-h1 {
  margin-inline: auto;
}

.s3-pg-center .s3-lede {
  margin-inline: auto;
}

.s3-pg .s3-h1 { margin-bottom: 20px; }
.s3-pg .s3-h2 { margin-bottom: 16px; }

/* --------------------------------------------------------- reading column -
   About and Contact are prose. A story page is a measure, not a card grid. */

.s3-pg-prose p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

.s3-pg-prose p:last-child { margin-bottom: 0; }

.s3-pg-note,
.s3-pg-lead-note {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--faint);
  max-width: 62ch;
}

.s3-pg-lead-note {
  margin: 0 0 clamp(28px, 3vw, 40px);
  color: var(--muted);
  font-size: 16px;
}

.s3-pg-lead-note a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-quick) var(--ease);
}

.s3-pg-lead-note a:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------- definition list --
   About's commitments. Ruled rows, not cards — five short essays do not want
   five boxes around them. */

.s3-pg-terms {
  margin: clamp(32px, 4vw, 48px) 0 0;
  border-top: 1px solid var(--hairline);
}

.s3-pg-term {
  padding-block: 24px;
  border-bottom: 1px solid var(--hairline);
}

.s3-pg-term dt {
  margin-bottom: 8px;
  color: var(--text);
}

.s3-pg-term dd {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 68ch;
}

/* ---------------------------------------------------------- feature rows --
   Text and the real render that operation produces, alternating sides. The
   alternation is what keeps consecutive sections from being the same box. */

.s3-pg-rows > .s3-pg-row + .s3-pg-row {
  border-top: 1px solid var(--hairline);
}

.s3-pg-row {
  padding-block: clamp(56px, 6.5vw, 100px);
}

.s3-pg-row-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}

.s3-pg-row-flip .s3-pg-row-text  { order: 2; }
.s3-pg-row-flip .s3-pg-row-media { order: 1; }

/* A row whose render has not been imported falls back to the reading measure
   rather than leaving an empty framed box beside the text. */
.s3-pg-row-solo .s3-pg-row-inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--w-narrow);
  margin-inline: auto;
}

.s3-pg-row-media {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-1);
  aspect-ratio: 4 / 3;
}

.s3-pg-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------------- spec blocks --
   The replacement for an icon-per-feature grid: real values, in mono, ruled. */

.s3-pg-specs {
  margin: clamp(26px, 3vw, 34px) 0 0;
  border-top: 1px solid var(--hairline);
}

.s3-pg-spec {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: baseline;
  gap: 18px;
  padding-block: 11px;
  border-bottom: 1px solid var(--hairline);
}

.s3-pg-spec dt { margin: 0; }

.s3-pg-spec dd {
  margin: 0;
  color: var(--text);
}

/* =========================================================================
   PRICING — everything below the `inherited fixes` block is scoped to
   `.s3-pg-pricing`, the class page-pricing.php puts on <main>. Only that fixes
   block is shared; nothing after it reaches /about/, /features/ or /contact/.

   Accent budget for the page, counted: the nine token figures in the cost
   table (live data), the cheapest rate and its flag, the one filled CTA, and
   focus rings. Nothing decorative.
   ========================================================================= */

/* ------------------------------------------------------- inherited fixes ---
   main.css still ships two older components under names the design system now
   uses for type utilities: `.s3-readout` was an absolutely-positioned plate on
   the old product stage, and `.s3-spec` a padded gradient panel. Both outrank
   system.css in the cascade, and the readout in particular flies out of flow
   and lands on top of whatever is at the top-left of its container — which is
   what put a dark "RATE" box over every pack name, and a dark plate around
   every stage number in the pipeline rail. Restore the system definitions for
   every page on this sheet — /features/ marks up its spec rows the same way.
   `:where()` keeps them at zero specificity, so every rule further down still
   wins. pdp.css and home.css do the same thing for their own surfaces. */

.s3-pg :where(.s3-readout) {
  display: inline-block;
  position: static;
  inset: auto;
  z-index: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--faint);
}

.s3-pg :where(.s3-spec) {
  display: inline;
  position: static;
  padding: 0;
  gap: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Every control on this page is a thumb target on a phone. The system button
   lands at 43px; one pixel short is still short. */
.s3-pg-pricing .s3-btn { min-height: 44px; }

/* ------------------------------------------------------------------ head --
   Left aligned, like every other page. Headline and lede on the left, the four
   figures a buyer came for on the right — so the answer to "what does one
   model cost me" is above the fold rather than three sections down.

   Those four were a stack of thin rows and read as a footnote. They are the
   reason the page exists, so they are now a 2x2 plate of display numerals, cut
   by one hairline cross. */

.s3-pg-pricing .s3-pg-top {
  padding-block: clamp(52px, 6.5vw, 100px) clamp(30px, 3.6vw, 52px);
}

.s3-pg-top-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(30px, 4.5vw, 84px);
}

.s3-pg-top-text .s3-h1 {
  max-width: 17ch;
  margin: 0 0 20px;
}

.s3-pg-top-text .s3-lede { margin: 0; max-width: 54ch; }

.s3-pg-glance {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}

.s3-pg-glance-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 128px;
  padding: clamp(16px, 1.6vw, 22px);
  background: var(--surface-1);
}

.s3-pg-glance-key {
  margin: 0 0 auto;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}

.s3-pg-glance-val {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.s3-pg-glance-unit { margin: 0; display: block; }

/* ------------------------------------------------------------ split band --
   Heading and caveat on the left, the table on the right. Two columns of
   unequal weight, so this band cannot be mistaken for the one above it. */

.s3-pg-split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(30px, 5vw, 90px);
}

.s3-pg-split-aside .s3-lede { margin: 0; max-width: 42ch; }
.s3-pg-split-aside .s3-pg-note { max-width: 42ch; }

.s3-pg-aside-link {
  margin-top: 20px;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 5px;
}

.s3-pg-aside-link:hover { text-decoration-color: currentColor; }

/* --------------------------------------------------- section heading block */

.s3-pg-head {
  margin-bottom: clamp(28px, 3.2vw, 46px);
  max-width: 68ch;
}

.s3-pg-head .s3-lede { margin: 0; }

/* ------------------------------------------------------------ cost table --
   Operation, condition, price. The figures are computed from the plugin's
   credit map in page-pricing.php — the single source for every token number
   on the site. Cost figures are live data, so they carry the accent. */

.s3-pg-costs {
  border-top: 1px solid var(--hairline);
}

/* Nine rows that all looked the same weight, so the table read as a receipt.
   Each row now carries a bar whose length is this cost over the largest cost in
   the table — arithmetic on two figures already printed on the row, drawn
   rather than restated. The token figure is the loudest thing in the block. */
.s3-pg-cost {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) 118px;
  align-items: baseline;
  gap: 6px 20px;
  padding-block: clamp(15px, 1.5vw, 20px);
  border-bottom: 1px solid var(--hairline);
}

.s3-pg-cost-op {
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
}

.s3-pg-cost-note {
  display: block;
  text-align: right;
}

.s3-pg-cost-val {
  grid-row: 1;
  grid-column: 3;
  font-family: var(--mono);
  font-size: clamp(19px, 1.6vw, 24px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  text-align: right;
  color: var(--accent);
  white-space: nowrap;
}

.s3-pg-cost-unit {
  margin-left: 5px;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* A gauge beside the figure, not a rule under the row: it belongs to the number
   it sits beneath, and at 118px the spread from the cheapest operation to the
   dearest is legible at a glance. */
.s3-pg-cost-bar {
  grid-row: 2;
  grid-column: 3;
  display: block;
  height: 3px;
  margin-top: 9px;
  background: var(--glass-1);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.s3-pg-cost-bar i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.s3-pg-free {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--faint);
  max-width: 64ch;
}

/* ------------------------------------------------------------ token packs -
   Three cards. No "most popular" — that was a claim about an array index.
   What differs between them is the rate, which is arithmetic on the two
   numbers already printed on the card, and the counts, which are the balance
   divided by the prices in the table above. */

.s3-pg-packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}

.s3-pg-pack {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 38px);
}

.s3-pg-pack-best { border-color: var(--hairline-2); }

/* Name and balance share the shelf so the price below has the card to itself. */
.s3-pg-pack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

.s3-pg-pack-name {
  color: var(--text);
  margin: 0;
}

.s3-pg-pack-price {
  margin: clamp(20px, 2vw, 26px) 0 4px;
  font-size: clamp(40px, 3.6vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.s3-pg-pack-balance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.s3-pg-pack-num {
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--text);
}

.s3-pg-pack-unit {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}

/* How far this pack's rate has come down against the dearest rate on the page.
   Both ends of the scale are prices printed here; nothing is asserted. */
.s3-pg-pack-bar {
  display: block;
  height: 3px;
  margin: 0 0 clamp(20px, 2vw, 26px);
  background: var(--glass-1);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.s3-pg-pack-bar i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--glass-3);
  border-radius: inherit;
}

.s3-pg-pack-bar-best i { background: var(--accent); }

.s3-pg-pack-buys {
  margin: 0 0 18px;
  border-top: 1px solid var(--hairline);
}

.s3-pg-pack-buy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-block: 11px;
  border-bottom: 1px solid var(--hairline);
}

.s3-pg-pack-buy dt {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}

.s3-pg-pack-buy dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.s3-pg-pack-rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 10px;
}

.s3-pg-pack-rate-val {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* Live data: the cheapest rate on the page, and the flag that says so. */
.s3-pg-rate-best { color: var(--accent); }

.s3-pg-pack-flag {
  margin: 0 0 16px;
  color: var(--accent);
}

.s3-pg-pack-cta {
  margin-top: auto;
  width: 100%;
}

.s3-pg-footnote {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--faint);
  max-width: 86ch;
}

/* ------------------------------------------------------- pay as you go ----
   A real product option. It used to be a framed box at the reading measure,
   which read as a footnote to the packs. It is now a band of its own, on the
   third background value the page has — so the silhouette between the packs and
   the two-axes plate is not two identical dark rectangles — with the six real
   amounts as a grid of targets rather than a row of chips. */

.s3-pg-topup-band {
  background: var(--surface-2);
  border-block: 1px solid var(--hairline);
}

.s3-pg-topup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}

.s3-pg-topup .s3-h2 { margin: 0 0 14px; }

.s3-pg-topup .s3-lede {
  margin: 0;
  max-width: 52ch;
}

.s3-pg-topup-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.s3-pg-topup-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  min-height: 108px;
  padding: 18px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: background var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease);
}

.s3-pg-topup-tile:hover {
  background: var(--surface-3);
  border-color: var(--hairline-2);
}

.s3-pg-topup-amt {
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.s3-pg-topup-tok {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.s3-pg-topup .s3-pg-note { margin-top: 20px; }

/* ------------------------------------------------------------- two axes ---
   Generate it, or buy it finished. Cards on a raised plate, so they use
   --surface-2 per the translucency ladder rather than glass. */

.s3-pg-versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.s3-pg-vs {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  transition: border-color var(--t-base) var(--ease);
}

.s3-pg-vs:hover { border-color: var(--hairline-2); }

.s3-pg-vs .s3-h3 { margin: 0 0 12px; color: var(--text); }

.s3-pg-vs-text {
  margin: 0 0 clamp(20px, 2.2vw, 26px);
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 54ch;
}

.s3-pg-vs-list {
  margin: 0 0 clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--hairline);
}

/* 140px is what "EXTENDED LICENCE" needs at the readout's tracking; anything
   narrower wraps a two-word label onto two lines. */
.s3-pg-vs-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 18px;
  padding-block: 12px;
  border-bottom: 1px solid var(--hairline);
}

.s3-pg-vs-row dt { margin: 0; }

.s3-pg-vs-row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.s3-pg-vs > .s3-pg-vs-cta {
  margin-top: auto;
  align-self: flex-start;
}

.s3-pg-vs-acts {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.s3-pg-vs-acts .s3-pg-vs-cta { margin-top: 0; }

/* ---------------------------------------------------------------- panel ---
   Used for the contact success state. Static surface, hairline, no glass —
   glass is only for chrome floating over media. */

.s3-pg-panel {
  padding: clamp(24px, 3vw, 34px);
}

.s3-pg-panel h2 { color: var(--text); margin-bottom: 8px; }

.s3-pg-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

/* ----------------------------------------------------------- contact form -
   Full width of the reading column. The three-card aside it used to share the
   row with published placeholder addresses and is gone. */

.s3-pg-alert {
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  background: var(--surface-1);
  color: var(--text);
  font-size: 15px;
}

.s3-pg-form {
  display: grid;
  gap: 18px;
}

.s3-pg-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.s3-pg-field {
  display: grid;
  gap: 8px;
  margin: 0;
}

.s3-pg-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.s3-pg-optional {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-left: 6px;
}

/* main.css stamps the WooCommerce field look onto bare inputs with
   !important, so these have to win outright rather than by sheet order. */
.s3-pg .s3-pg-form input[type="text"],
.s3-pg .s3-pg-form input[type="email"],
.s3-pg .s3-pg-form textarea {
  width: 100% !important;
  padding: 13px 16px !important;
  background: var(--surface-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-chip) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  transition: border-color var(--t-quick) var(--ease) !important;
}

.s3-pg .s3-pg-form input[type="text"]:hover,
.s3-pg .s3-pg-form input[type="email"]:hover,
.s3-pg .s3-pg-form textarea:hover {
  border-color: var(--hairline-2) !important;
}

.s3-pg .s3-pg-form textarea {
  resize: vertical;
  min-height: 150px;
}

.s3-pg-form .s3-btn {
  justify-self: start;
}

/* ------------------------------------------------------- closing section -- */

.s3-pg-close .s3-lede {
  margin-bottom: 28px;
}

.s3-pg-close-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

/* ------------------------------------------------------------ responsive -- */

/* Pricing: the two-column bands collapse well before the card grids do, because
   a 44ch aside beside a nine-row table stops working first. */
@media (max-width: 1080px) {
  .s3-pg-top-inner,
  .s3-pg-split,
  .s3-pg-versus,
  .s3-pg-topup {
    grid-template-columns: minmax(0, 1fr);
  }

  .s3-pg-top-inner { gap: clamp(28px, 4vw, 44px); }

  .s3-pg-top-text .s3-h1 { max-width: 20ch; }
  .s3-pg-glance { max-width: 620px; }
  .s3-pg-split-aside .s3-lede,
  .s3-pg-split-aside .s3-pg-note { max-width: 64ch; }
  .s3-pg-topup .s3-lede { max-width: 64ch; }
}

@media (max-width: 900px) {
  .s3-pg-packs {
    grid-template-columns: minmax(0, 1fr);
  }

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

  /* On one column the render always follows its text, whichever side it took
     on the desktop layout. */
  .s3-pg-row-flip .s3-pg-row-text  { order: 1; }
  .s3-pg-row-flip .s3-pg-row-media { order: 2; }
}

@media (max-width: 560px) {
  .s3-pg-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .s3-pg-spec {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .s3-pg-cost {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .s3-pg-cost-op {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .s3-pg-cost-note {
    grid-row: 2;
    grid-column: 1;
    text-align: left;
  }

  .s3-pg-cost-val {
    grid-row: 2;
    grid-column: 2;
  }

  .s3-pg-cost-bar {
    grid-row: 3;
    grid-column: 2;
    width: 92px;
    margin-top: 7px;
  }

  .s3-pg-form .s3-btn {
    justify-self: stretch;
  }

  /* Pricing on a phone. Nothing shrinks below the system's own type sizes;
     what changes is how many things sit on a line. */
  .s3-pg-glance {
    grid-template-columns: minmax(0, 1fr);
  }

  .s3-pg-glance-cell { min-height: 0; }

  .s3-pg-glance-val { white-space: normal; }

  .s3-pg-topup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s3-pg-vs-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .s3-pg-pack-buy {
    align-items: flex-start;
  }

  .s3-pg-vs-acts,
  .s3-pg-vs > .s3-pg-vs-cta {
    align-self: stretch;
  }

  .s3-pg-pricing .s3-pg-close-acts .s3-btn-glass { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .s3-pg-lead-note a,
  .s3-pg .s3-pg-form input,
  .s3-pg .s3-pg-form textarea {
    transition: none !important;
  }
}

/* =========================================================================
   SPLIT TYPE — the primitive behind [data-s3-split] and [data-s3-words].

   assets/js/pages.js rewrites the heading as one <span class="s3-split-mask">
   per word, each holding a <span class="s3-split-word">, with the spaces left
   as real text nodes between them so wrapping still works. Until it does — and
   forever under prefers-reduced-motion — the heading is plain text and none of
   this applies.

   `overflow: clip` with a clip margin rather than `overflow: hidden`: hidden on
   a box exactly one line tall shears the descenders off, and a heading with a
   clipped 'g' is worse than no animation at all. The clip margin buys the room
   without adding a padding box that would make every masked heading measure
   taller than it draws. A browser too old for `overflow: clip` drops the
   declaration and the word simply slides in unmasked.
   ========================================================================= */

.s3-split-mask {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: .22em;
  vertical-align: bottom;
}

.s3-split-word { display: inline-block; }

/* =========================================================================
   410 GONE — template-parts/page-gone.php.

   One short band. Nothing to fill a page with, and nothing invented to do it.
   ========================================================================= */

.s3-gone .s3-pg-hero { padding-block: clamp(48px, 5.5vw, 82px) 0; }
.s3-gone .s3-readout { margin: 0 0 18px; }
.s3-gone .s3-h1 { margin: 0 0 18px; }
.s3-gone .s3-lede { margin: 0 0 30px; }

.s3-gone-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding-bottom: clamp(40px, 5vw, 80px);
}

/* =========================================================================
   HOW IT WORKS — /how-it-works/, rendered by template-parts/page-how-it-works.

   The page is a pipeline, so it is built as one: a band that holds while its
   five stages travel sideways with the bill assembling beside them, then the
   two renders of one real job pair in a single frame with a scrubbed seam, then
   the cost ladder as a visible control rather than a row in a table.

   Accent budget, counted: the token figures and measured medians inside the
   rail and the file table (live data), the running total in the rail head (live
   data), the scroll progress bar (the active state of a control), the one
   filled CTA at the foot, and focus rings. The stage numbers and the spine are
   --faint / --text: a step number is neither an action nor a measurement.

   Band order and what changes between each pair — no two consecutive bands are
   the same box:
     1 head        --w-base    text left, data right   page background
     2 rail        bleed       held, horizontal        --surface-1, ruled
     3 pair        --w-base    media left, text right  page background
     4 ladder      --w-narrow  left                    inverted
     5 downloads   --w-wide    2-col                   --surface-1, ruled
     6 close       --w-narrow  left                    page background
   ========================================================================= */

/* The rail sticks below the nav rather than under it. 68px mirrors --s3-nav-h
   in nav.css, which is declared on .s3-nav and so cannot be inherited here. */
.s3-hiw { --s3-rail-top: 68px; }

body.admin-bar .s3-hiw { --s3-rail-top: 100px; }

@media screen and (max-width: 782px) {
  body.admin-bar .s3-hiw { --s3-rail-top: 114px; }
}

@media screen and (max-width: 600px) {
  body.admin-bar .s3-hiw { --s3-rail-top: 68px; }
}

/* Live data — a token cost or a measured median. */
.s3-hiw-live { color: var(--accent); }

/* -------------------------------------------------------------- 1 · head -- */

.s3-hiw-top {
  padding-block: clamp(52px, 6.5vw, 100px) clamp(30px, 3.6vw, 52px);
}

.s3-hiw-top-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(30px, 4.5vw, 80px);
}

.s3-hiw-top-text .s3-h1 { max-width: 16ch; margin: 0 0 20px; }
.s3-hiw-top-text .s3-lede { margin: 0; max-width: 54ch; }

.s3-hiw-strip {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}

.s3-hiw-strip-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 116px;
  padding: clamp(16px, 1.6vw, 22px);
  background: var(--surface-1);
}

.s3-hiw-strip-key {
  margin: 0 0 auto;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}

.s3-hiw-strip-val {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* -------------------------------------------------------------- 2 · rail --
   Two layouts from one set of rules.

   Below 900x620 — every phone, and any short window — the band is a plain
   vertical stack of five panels at their natural height. That is the whole fix
   for the 390px defect: the held layout gave each panel a fixed height and let
   its flex children shrink past their content, so a long prompt escaped its
   blockquote and printed over the spec list beneath it. A stack cannot do that,
   and a phone has no room to hold a panel and read it anyway.

   Above that, assets/js/pages.js adds .is-rail and the band becomes a sticky
   hold whose track is scrubbed sideways. Even there the panels scroll inside
   themselves rather than squeezing, so a short viewport clips nothing. */

.s3-hiw-rail {
  background: var(--surface-1);
  border-block: 1px solid var(--hairline);
  padding-block: clamp(46px, 5vw, 78px);
}

.s3-hiw-rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.s3-hiw-rail-head .s3-h2 { margin: 0; max-width: 18ch; }

/* The running total. It only means something while the track is moving, so it
   is the one thing here that appears with the held layout. */
.s3-hiw-rail-spent {
  display: none;
  margin: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.s3-hiw-rail-spent-v {
  font-family: var(--mono);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.s3-hiw-rail-spent-v em {
  margin-left: 6px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

/* The spine. Five ruled ticks; the one you are on takes the rule and the text
   up to full. Neutral, not lime — a position marker is not an action. */
.s3-hiw-spine {
  display: none;
  list-style: none;
  margin: 0 auto clamp(18px, 2vw, 26px);
  padding-inline: var(--gutter);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
}

.s3-hiw-spine-tick {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 12px 0 0;
  border-top: 1px solid var(--hairline);
  color: var(--faint);
  transition: color var(--t-base) var(--ease),
              border-top-color var(--t-base) var(--ease);
}

.s3-hiw-spine-tick.is-on {
  color: var(--text);
  border-top-color: var(--text);
}

.s3-hiw-spine-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.s3-hiw-spine-name {
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s3-hiw-viewport {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  border-block: 1px solid var(--hairline);
}

/* Separators are borders on the panels rather than a coloured gap behind the
   track: a background here would also paint the gutter padding at each end and
   read as a seam down the edge of the viewport. */
.s3-hiw-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.s3-hiw-stage {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--surface-1);
}

.s3-hiw-stage + .s3-hiw-stage { border-top: 1px solid var(--hairline); }

.s3-hiw-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* A step number is neither an action nor a measurement. It stays --faint. */
.s3-hiw-stage-no { color: var(--faint); }
.s3-hiw-stage-free { color: var(--muted); }

.s3-hiw-stage-title { margin: 0 0 10px; color: var(--text); }

.s3-hiw-stage-body {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}

.s3-hiw-stage-shot {
  margin: 0 0 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface-2);
  overflow: hidden;
  min-height: 180px;
}

.s3-hiw-stage-shot img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}

.s3-hiw-stage-prompt {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

.s3-hiw-stage-prompt p {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.62;
  color: var(--text);
}

.s3-hiw-stage-prompt footer { color: var(--faint); }

.s3-hiw-stage-spec {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.s3-hiw-stage-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-block: 11px;
  border-bottom: 1px solid var(--hairline);
}

.s3-hiw-stage-spec-row dt {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

/* A four-character mono value keeps its line — "15 tok" breaking after the
   number reads as a fault. The exception is the list of PBR maps the install
   actually produced, five names on a good day: at nowrap that row ran 468px
   wide inside a 420px panel and was silently clipped by the track's overflow.
   The template measures the string and adds .s3-hiw-spec-wide, so the rule
   follows the data rather than a hardcoded row index. */
.s3-hiw-stage-spec-row dd {
  margin: 0;
  min-width: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
  text-align: right;
}

.s3-hiw-stage-spec-row dd.s3-hiw-spec-wide {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Token costs inside a panel stay --text, deliberately. The running total in
   the band's head is the live figure the reader is actually watching climb;
   five more lime numbers travelling past it would compete with it and blow the
   accent budget on the loudest band of the page. The markup keeps .s3-hiw-live
   on them because it is the same class of data — this rule is what decides they
   are not painted with it, and it is stated rather than left to specificity. */
.s3-hiw-stage-spec-row dd.s3-hiw-live { color: var(--text); }

.s3-hiw-stage-spec-solo dt { color: var(--text); }

.s3-hiw-stage-note { margin: 14px 0 0; color: var(--faint); }

.s3-hiw-bar {
  display: none;
  height: 2px;
  margin-top: clamp(16px, 1.8vw, 24px);
  background: var(--glass-1);
  overflow: hidden;
}

.s3-hiw-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---- the held state, added by assets/js/pages.js only when it can drive it
   and only above 900x620. Everything in this group is scoped to .is-rail, so
   the stacked layout above is what a phone, a short window and a reader with
   reduced motion all get. */

/* The height of a held band is a SCROLL BUDGET, not a layout box: one viewport
   to be seen in, plus exactly as many pixels as the track has to travel. The
   "children fill 70% of the band" rule is measured against the hold, which is
   the only box that is ever on screen, and the hold is 100% full at every
   scroll position. Measuring the children against `height` instead compares
   them with the sideways travel, which nobody ever sees as vertical space. */
.s3-hiw-rail.is-rail {
  padding-block: 0;
  height: calc(100svh - var(--s3-rail-top) + var(--rail-scroll, 0px));
}

.s3-hiw-rail.is-rail .s3-hiw-rail-hold {
  position: sticky;
  top: var(--s3-rail-top);
  height: calc(100svh - var(--s3-rail-top));
  display: flex;
  flex-direction: column;
  padding-block: clamp(20px, 2.4vw, 34px);
}

.s3-hiw-rail.is-rail .s3-hiw-rail-spent { display: flex; }
.s3-hiw-rail.is-rail .s3-hiw-spine { display: grid; }
.s3-hiw-rail.is-rail .s3-hiw-bar { display: block; }

.s3-hiw-rail.is-rail .s3-hiw-viewport {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  padding-inline: 0;
  overflow: hidden;
}

.s3-hiw-rail.is-rail .s3-hiw-track {
  flex-direction: row;
  height: 100%;
  padding-inline: var(--gutter);
  will-change: transform;
}

/* Depth. --in is how much of the panel is inside the viewport, written by JS on
   every scrub tick; what is not yet in front of you is quieter. */
.s3-hiw-rail.is-rail .s3-hiw-stage {
  flex: 0 0 auto;
  width: min(420px, 82vw);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: calc(.34 + .66 * var(--in, 1));
}

.s3-hiw-rail.is-rail .s3-hiw-stage + .s3-hiw-stage {
  border-top: 0;
  border-left: 1px solid var(--hairline);
}

/* On the two panels whose specs ARE the content, the list takes the slack
   instead of being pushed to the foot with a void above it. */
.s3-hiw-rail.is-rail .s3-hiw-k-ops .s3-hiw-stage-spec,
.s3-hiw-rail.is-rail .s3-hiw-k-files .s3-hiw-stage-spec {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/* The two blocks that take the slack in a held panel — and the ONLY two allowed
   to shrink. Each has somewhere for the overflow to go: the render crops, the
   prompt scrolls. Everything else in the panel keeps its content height, which
   is the fix for the defect where a squeezed blockquote printed straight over
   the spec list under it. */
.s3-hiw-rail.is-rail .s3-hiw-stage-shot,
.s3-hiw-rail.is-rail .s3-hiw-stage-prompt {
  flex: 1 1 auto;
  min-height: 0;
}

.s3-hiw-rail.is-rail .s3-hiw-stage > * { flex-shrink: 0; }

.s3-hiw-rail.is-rail .s3-hiw-stage-shot { flex-shrink: 1; overflow: hidden; }

.s3-hiw-rail.is-rail .s3-hiw-stage-prompt {
  flex-shrink: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A laptop reports 1440x900 and then gives the page about 780 of it once the
   browser has taken its chrome. The held panel is one viewport tall, so those
   80 pixels are the difference between a panel that fits and one the reader has
   to scroll inside. Nothing is removed — the same five blocks, measured tighter.
   Scoped to .is-rail so the stacked layout, which has all the height it wants,
   never sees any of it. */
@media (min-width: 900px) and (max-height: 880px) {
  /* The band's own chrome first — hold padding, the gap under the heading, the
     gap under the spine, the gap above the progress rule. Four gaps that cost
     nothing to tighten and together hand ~70px back to the panels. */
  .s3-hiw-rail.is-rail .s3-hiw-rail-hold { padding-block: 14px; }
  .s3-hiw-rail.is-rail .s3-hiw-rail-head { margin-bottom: 14px; }
  .s3-hiw-rail.is-rail .s3-hiw-spine { margin-bottom: 12px; }
  .s3-hiw-rail.is-rail .s3-hiw-bar { margin-top: 12px; }

  .s3-hiw-rail.is-rail .s3-hiw-stage { padding: 20px; }
  .s3-hiw-rail.is-rail .s3-hiw-stage-head { margin-bottom: 10px; }
  .s3-hiw-rail.is-rail .s3-hiw-stage-title { margin-bottom: 8px; }

  .s3-hiw-rail.is-rail .s3-hiw-stage-body {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .s3-hiw-rail.is-rail .s3-hiw-stage-shot,
  .s3-hiw-rail.is-rail .s3-hiw-stage-prompt { margin-bottom: 12px; }

  .s3-hiw-rail.is-rail .s3-hiw-stage-shot,
  .s3-hiw-rail.is-rail .s3-hiw-stage-shot img { min-height: 130px; }

  .s3-hiw-rail.is-rail .s3-hiw-stage-prompt { padding: 14px; }
  .s3-hiw-rail.is-rail .s3-hiw-stage-spec-row { padding-block: 8px; }
  .s3-hiw-rail.is-rail .s3-hiw-stage-note { margin-top: 10px; }
}

/* -------------------------------------------------------------- 3 · pair --
   One frame, not two. The textured render is masked over the mesh and the seam
   is driven by scroll position — two frames side by side prove nothing about
   alignment, and alignment is the entire claim. With scripting off the mask
   rests at the middle and the caption under each half names which is which. */

.s3-hiw-pair-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(28px, 4vw, 76px);
}

.s3-hiw-compare { margin: 0; }

.s3-hiw-compare-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline);
  border-radius: var(--r-block);
  background: var(--surface-1);
  overflow: hidden;
}

.s3-hiw-compare-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s3-hiw-compare-b { clip-path: inset(0 50% 0 0); }

.s3-hiw-compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--text) 62%, transparent);
}

.s3-hiw-compare-cap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
}

.s3-hiw-compare-half {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s3-hiw-compare-half-b { text-align: right; align-items: flex-end; }

.s3-hiw-compare-name { font-size: 15px; color: var(--text); }
.s3-hiw-compare-cap .s3-spec { color: var(--muted); }

.s3-hiw-pair-text .s3-h2 { margin: 0 0 14px; max-width: 14ch; }
.s3-hiw-pair-text .s3-lede { margin: 0 0 clamp(22px, 2.4vw, 32px); }

.s3-hiw-pair-note {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 16px;
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.s3-hiw-pair-more { margin: clamp(18px, 2vw, 26px) 0 0; font-size: 15px; }

.s3-hiw-pair-more a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-quick) var(--ease);
}

.s3-hiw-pair-more a:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------ 4 · ladder --
   The cost/time ladder as a control. Inverted band, so the one place the page
   goes light is the place every figure on it is live. */

.s3-hiw-ladder-band {
  padding-block: clamp(52px, 5.5vw, 92px);
}

.s3-hiw-ladder-band .s3-h2 { margin: 0 0 14px; max-width: 18ch; }
.s3-hiw-ladder-band .s3-lede { margin: 0 0 clamp(26px, 3vw, 40px); }

.s3-hiw-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
}

.s3-hiw-rung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 96px 74px;
  align-items: center;
  gap: 10px 18px;
  padding-block: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
}

.s3-hiw-rung-name { font-size: 16px; line-height: 1.35; }

.s3-hiw-rung-bar {
  display: block;
  height: 3px;
  background: color-mix(in srgb, var(--accent-ink) 18%, transparent);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.s3-hiw-rung-bar i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--accent-ink);
  border-radius: inherit;
}

.s3-hiw-rung-tok {
  font-family: var(--mono);
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.s3-hiw-rung-tok em {
  margin-left: 5px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}

.s3-hiw-rung-time {
  text-align: right;
  white-space: nowrap;
}

/* .s3-spec sets its own --muted, so system.css's `.s3-invert :where(span)
   { color: inherit }` never reaches it and the readout lands on the lime
   band at 1.03:1. Same treatment .s3-lede gets there. */
.s3-hiw-ladder-band .s3-spec {
  color: color-mix(in srgb, var(--accent-ink) 72%, transparent);
}

.s3-hiw-rung-sum { font-weight: 500; }
.s3-hiw-rung-sum .s3-hiw-rung-name { font-size: 17px; }

.s3-hiw-ladder-note {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 68ch;
}

.s3-hiw-ladder-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------- 5 · downloads -- */

.s3-hiw-out-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 84px);
}

.s3-hiw-out .s3-h2 { margin: 0 0 14px; max-width: 16ch; }
.s3-hiw-out .s3-lede { margin: 0 0 clamp(24px, 2.6vw, 34px); max-width: 52ch; }

.s3-hiw-files {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.s3-hiw-file {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 18px;
  padding-block: clamp(14px, 1.5vw, 19px);
  border-bottom: 1px solid var(--hairline);
}

.s3-hiw-file dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--text);
}

.s3-hiw-file dd { margin: 0; }

.s3-hiw-file-size {
  grid-column: 3;
  font-family: var(--mono);
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.s3-hiw-file-n { grid-column: 2; color: var(--faint); }

/* The same three medians drawn to scale against the largest. Neutral: the
   figure beside it is already the live value, and doubling the accent on one
   fact is how a page ends up with lime everywhere. */
.s3-hiw-file-bar {
  grid-column: 1 / -1;
  height: 2px;
  margin-top: 6px;
  background: var(--glass-1);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.s3-hiw-file-bar i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: color-mix(in srgb, var(--text) 42%, transparent);
  border-radius: inherit;
}

.s3-hiw-out-note {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--faint);
  max-width: 62ch;
}

.s3-hiw-out-limits .s3-h3 { margin: 0 0 16px; color: var(--text); }

.s3-hiw-limits {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.s3-hiw-limit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--hairline);
}

.s3-hiw-limit dt {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.s3-hiw-limit dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}

/* ------------------------------------------------------------- 6 · close -- */

.s3-hiw-close .s3-h2 { margin: 0 0 14px; max-width: 20ch; }
.s3-hiw-close .s3-lede { margin: 0 0 28px; }

.s3-hiw-close-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

/* =========================================================================
   PROMPTS — /prompts/, rendered by template-parts/page-prompts.

   This was /showcase/: a thumbnail grid of the generation table, which two
   thirds of the way through is also the shop, only smaller and without a
   checkout. The prompt was the caption. Here the prompt is the object and the
   render is the evidence beside it, because the text is the one thing on this
   install that exists nowhere else on the site.

   Rows, not cells. A contact sheet is the shop's language and repeating it here
   is what made the two pages read as duplicates.

   Accent budget, counted: the filter tab that is currently on (an active
   control), the one live headline figure in the "in full" band, the one filled
   CTA, and focus rings. Deliberately NOT the per-row cost figures: on a page
   where every number is live, marking every number stops meaning anything.

     1 head    --w-base   text left, data right  page background
     2 in full --w-wide   quote, then 2-col      --surface-1, ruled
     3 list    --w-wide   ruled rows             page background
     4 corpus  --w-narrow left                   inverted
     5 close   --w-narrow left                   page background
   ========================================================================= */

.s3-prm-live { color: var(--accent); }

/* ---------------------------------------------------------------- 1 · head */

.s3-prm-top {
  padding-block: clamp(52px, 6.5vw, 100px) clamp(28px, 3.4vw, 46px);
}

.s3-prm-top-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(30px, 4.5vw, 80px);
}

.s3-prm-top-text .s3-h1 { max-width: 15ch; margin: 0 0 20px; }
.s3-prm-top-text .s3-lede { margin: 0; max-width: 54ch; }

.s3-prm-strip {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}

.s3-prm-strip-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 116px;
  padding: clamp(16px, 1.6vw, 22px);
  background: var(--surface-1);
}

.s3-prm-strip-key {
  margin: 0 0 auto;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}

.s3-prm-strip-val {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ------------------------------------------------------------- 2 · in full */

.s3-prm-one-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(20px, 2.2vw, 30px);
}

.s3-prm-one-head .s3-h2 { margin: 0; max-width: 20ch; }
.s3-prm-one-meta { margin: 0; color: var(--faint); white-space: nowrap; }

/* The prompt itself. Mono, because it is a string that was typed into a field,
   and a rule down the left rather than a box: it is a quotation, not a card. */
.s3-prm-quote {
  margin: 0 0 clamp(28px, 3vw, 44px);
  padding: 0 0 0 clamp(18px, 2vw, 30px);
  border-left: 1px solid var(--hairline);
}

.s3-prm-quote p {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
  color: var(--text);
  max-width: 86ch;
}

.s3-prm-quote-sm { margin: 0 0 14px; }
.s3-prm-quote-sm p { font-size: 14px; line-height: 1.7; color: var(--muted); }

.s3-prm-one-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 72px);
}

.s3-prm-one-cols { display: grid; gap: clamp(24px, 2.6vw, 36px); }

.s3-prm-set { margin: 0; border-top: 1px solid var(--hairline); }

.s3-prm-set-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 11px;
  border-bottom: 1px solid var(--hairline);
}

.s3-prm-set-row dt { margin: 0; font-size: 15px; color: var(--muted); }

.s3-prm-set-row dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}

/* Two headed groups inside one list, so "asked for" and "came back" are never
   confused for each other. */
.s3-prm-set-head { padding-block: 18px 6px; border-bottom-color: transparent; }
.s3-prm-set-head:first-child { padding-top: 10px; }
.s3-prm-set-total dd { font-size: 16px; }

/* The one live figure the page paints: what this prompt cost to run. Stated at
   this specificity because the dd rule above would otherwise win and quietly
   turn the page's single accent into --text. */
.s3-prm-set-row dd.s3-prm-live { color: var(--accent); }

.s3-prm-one-tex .s3-readout { margin: 0 0 10px; }
.s3-prm-one-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--faint); }

.s3-prm-seam { margin: 0; }

.s3-prm-seam-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline);
  border-radius: var(--r-block);
  background: var(--surface-2);
  overflow: hidden;
}

.s3-prm-seam-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s3-prm-seam-b { clip-path: inset(0 50% 0 0); }

.s3-prm-seam-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--text) 62%, transparent);
}

/* flex-direction is stated because main.css still carries a legacy `.s3-spec`
   component that sets `flex-direction: column`, and this caption wears both
   classes. Without it the two ends of the seam stack instead of facing each
   other. */
.s3-prm-seam-cap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  color: var(--faint);
}

/* ---------------------------------------------------------------- 3 · list */

.s3-prm-tabs-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 28px;
  padding-bottom: clamp(18px, 2vw, 26px);
}

/* Real links carrying a real query argument, filtered server side — they work
   with scripting off, which is why they are links and not buttons. */
.s3-prm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.s3-prm-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--glass-1);
  font-size: 15px;
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
  transition: background var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease),
              color var(--t-quick) var(--ease);
}

.s3-prm-tab:hover {
  background: var(--glass-2);
  border-color: var(--hairline-2);
  color: var(--text);
}

/* The active state of a control — one of the things lime is for. */
.s3-prm-tab.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.s3-prm-tab-n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

.s3-prm-tabs-note { margin: 0; color: var(--faint); }

.s3-prm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

/* The render column is sized to the TEXT, not the other way round. A 268px
   square made every row 268px tall while the prompt beside it ran to 200, and
   the list read as a column of holes. */
.s3-prm-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) clamp(150px, 15vw, 208px);
  align-items: start;
  gap: clamp(18px, 2.2vw, 40px);
  padding-block: clamp(22px, 2.4vw, 34px);
  border-bottom: 1px solid var(--hairline);
}

.s3-prm-row-no { padding-top: 4px; color: var(--faint); }

.s3-prm-row-prompt {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  max-width: 84ch;
}

.s3-prm-row-tex {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 84ch;
}

.s3-prm-row-untex span:last-child { color: var(--faint); }

.s3-prm-row-spec {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.s3-prm-row-spec > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.s3-prm-row-spec dt { margin: 0; }
.s3-prm-row-spec dd { margin: 0; color: var(--muted); }

.s3-prm-row-buy {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-quick) var(--ease);
}

.s3-prm-row-buy:hover { text-decoration-color: currentColor; }

.s3-prm-row-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface-1);
  overflow: hidden;
}

.s3-prm-row-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: opacity var(--t-base) var(--ease);
}

/* Nothing moves; the render comes up to full. */
.s3-prm-row:hover .s3-prm-row-media img,
.s3-prm-row:focus-within .s3-prm-row-media img { opacity: 1; }

.s3-prm-row-flag {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  background: var(--surface-1);
  color: var(--muted);
}

.s3-prm-empty { padding-block: clamp(20px, 3vw, 44px); }
.s3-prm-empty .s3-h2 { margin: 0 0 14px; }
.s3-prm-empty .s3-lede { margin: 0 0 28px; }

/* -------------------------------------------------------------- 4 · corpus */

.s3-prm-corpus { padding-block: clamp(52px, 5.5vw, 92px); }

.s3-prm-corpus .s3-h2 { margin: 0 0 14px; max-width: 18ch; }
.s3-prm-corpus .s3-lede { margin: 0 0 clamp(26px, 3vw, 40px); }

.s3-prm-corpus .s3-spec {
  color: color-mix(in srgb, var(--accent-ink) 72%, transparent);
}

.s3-prm-bars {
  list-style: none;
  margin: 0 0 clamp(26px, 3vw, 38px);
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
}

.s3-prm-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 150px) 112px;
  align-items: center;
  gap: 4px 18px;
  padding-block: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
}

.s3-prm-bar-key { font-size: 16px; line-height: 1.35; }

.s3-prm-bar-track {
  display: block;
  height: 3px;
  background: color-mix(in srgb, var(--accent-ink) 18%, transparent);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.s3-prm-bar-track i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--accent-ink);
  border-radius: inherit;
}

.s3-prm-bar-val {
  font-family: var(--mono);
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.s3-prm-bar-range { grid-column: 1 / -1; }

.s3-prm-facts {
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
}

.s3-prm-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
}

.s3-prm-fact dt { margin: 0; font-size: 15px; }

.s3-prm-fact dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.s3-prm-corpus-note {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 68ch;
}

.s3-prm-corpus-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------- 5 · close */

/* Tighter than .s3-pg-band-tight. A closing band is a heading, a sentence and
   two controls; at the shared padding those three fill barely two thirds of the
   band and the page ends in a hole. */
.s3-prm-close,
.s3-hiw-close { padding-block: clamp(34px, 3.4vw, 52px); }

.s3-prm-close .s3-h2 { margin: 0 0 14px; max-width: 20ch; }
.s3-prm-close .s3-lede { margin: 0 0 28px; }

.s3-prm-close-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

/* ------------------------------------------------- how-it-works · prompts --
   RESPONSIVE. Nothing shrinks below the system's own type sizes; what changes
   is how many things sit on a line. */

@media (max-width: 1180px) {
  .s3-hiw-out-inner,
  .s3-prm-one-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .s3-hiw-out .s3-lede { max-width: 64ch; }

  .s3-prm-seam-media { aspect-ratio: 16 / 10; }
}

@media (max-width: 1080px) {
  .s3-hiw-top-inner,
  .s3-prm-top-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 44px);
  }

  .s3-hiw-top-text .s3-h1,
  .s3-prm-top-text .s3-h1 { max-width: 20ch; }

  .s3-hiw-strip,
  .s3-prm-strip { max-width: 620px; }
}

@media (max-width: 900px) {
  .s3-hiw-pair-inner { grid-template-columns: minmax(0, 1fr); }
  .s3-hiw-compare-media { aspect-ratio: 16 / 10; }
  .s3-hiw-pair-text .s3-h2 { max-width: 20ch; }

  .s3-hiw-rung {
    grid-template-columns: minmax(0, 1fr) 84px 66px;
  }

  .s3-hiw-rung-bar { display: none; }

  .s3-prm-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px 18px;
  }

  /* The render moves under the text rather than being squeezed into a column
     too narrow to read a triangle count beside. */
  .s3-prm-row-media {
    grid-column: 2;
    max-width: 320px;
    margin-top: 4px;
  }
}

@media (max-width: 640px) {
  .s3-hiw-strip,
  .s3-prm-strip { grid-template-columns: minmax(0, 1fr); }

  .s3-hiw-strip-row,
  .s3-prm-strip-row { min-height: 0; }

  .s3-hiw-file {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .s3-hiw-file dt { grid-column: 1; }
  .s3-hiw-file-size { grid-column: 2; grid-row: 1; }
  .s3-hiw-file-n { grid-column: 1 / -1; grid-row: 2; }

  .s3-hiw-pair-note { grid-template-columns: minmax(0, 1fr); }

  /* A prompt is reading matter on a phone, so it comes up to body size. */
  .s3-prm-row-prompt { font-size: 16px; }
  .s3-hiw-stage-body { font-size: 16px; }

  .s3-prm-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .s3-prm-bar-track { display: none; }

  .s3-hiw-close-acts .s3-btn,
  .s3-prm-close-acts .s3-btn-primary { flex: 1 1 100%; }
}

@media (max-width: 520px) {
  .s3-prm-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .s3-prm-row-no { padding-top: 0; }
  .s3-prm-row-media { grid-column: 1; max-width: none; }
  .s3-prm-row-tex { grid-template-columns: minmax(0, 1fr); }
  .s3-prm-row-spec { flex-direction: column; gap: 8px; }
  .s3-prm-one-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 420px) {
  .s3-hiw-rung {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }

  .s3-hiw-rung-name { grid-column: 1 / -1; }
  .s3-hiw-rung-time { text-align: left; }
}

/* =========================================================================
   HELP CENTRE — /help/, rendered by template-parts/page-help.

   Was six consecutive accordion groups and nothing else. Answers are two or
   three lines each, so an accordion concealed nothing and cost a click: they
   are open, set as plain typography across a reading measure, with a sticky
   topic index beside them and a search that filters server side.

   Accent budget: the live figures inside answers that quote a token cost or a
   measured size, the one filled CTA at the foot, and focus rings.

     1 head      --w-base    2-col   page background
     2 answers   --w-wide    2-col   --surface-1, ruled
     3 close     --w-narrow  left    page background
   ========================================================================= */

/* `hidden` has to win over the display values below, or a filtered-out answer
   stays on the page. */
.s3-hlp [hidden] { display: none !important; }

/* ---------------------------------------------------------------- 1 · head */

.s3-hlp-top {
  padding-block: clamp(52px, 6.5vw, 100px) clamp(28px, 3.4vw, 46px);
}

.s3-hlp-top-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(28px, 4.5vw, 76px);
}

.s3-hlp-top-text .s3-h1 { max-width: 12ch; margin: 0 0 20px; }
.s3-hlp-top-text .s3-lede { margin: 0; max-width: 54ch; }

.s3-hlp-search { margin: 0; }

.s3-hlp-search-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.s3-hlp-search-row {
  display: flex;
  gap: 10px;
}

/* main.css stamps the WooCommerce field look onto bare inputs with
   !important, so these have to win outright rather than by sheet order. */
.s3-pg .s3-hlp-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 16px !important;
  background: var(--surface-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-chip) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color var(--t-quick) var(--ease) !important;
}

.s3-pg .s3-hlp-search input[type="search"]:hover { border-color: var(--hairline-2) !important; }
.s3-pg .s3-hlp-search input[type="search"]::placeholder { color: var(--faint); }

.s3-hlp-search .s3-btn { flex: 0 0 auto; min-height: 48px; }

.s3-hlp-search-note { margin: 12px 0 0; color: var(--faint); }

/* ------------------------------------------------------------- 2 · answers */

.s3-hlp-inner {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 88px);
}

.s3-hlp-index {
  position: sticky;
  top: 92px;
}

.s3-hlp-index-title { display: block; margin: 0 0 14px; }

.s3-hlp-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.s3-hlp-index li { border-bottom: 1px solid var(--hairline); }

.s3-hlp-index li.is-empty { opacity: .35; }

.s3-hlp-index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 11px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-quick) var(--ease);
}

.s3-hlp-index a:hover { color: var(--text); }

.s3-hlp-index-n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.s3-hlp-index-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 22px;
}

.s3-hlp-index-foot .s3-btn { min-height: 0; font-size: 14px; }

.s3-hlp-group + .s3-hlp-group { margin-top: clamp(40px, 4.5vw, 68px); }

.s3-hlp-group-title {
  margin: 0 0 clamp(18px, 2vw, 26px);
  scroll-margin-top: 96px;
}

.s3-hlp-list {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.s3-hlp-qa {
  display: grid;
  grid-template-columns: minmax(0, 27ch) minmax(0, 1fr);
  align-items: start;
  gap: 8px 40px;
  padding-block: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--hairline);
}

.s3-hlp-q {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--text);
}

.s3-hlp-a {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 66ch;
}

.s3-hlp-a a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-quick) var(--ease);
}

.s3-hlp-a a:hover { text-decoration-color: currentColor; }

.s3-hlp-none {
  padding-block: clamp(24px, 3vw, 40px);
}

.s3-hlp-none .s3-h3 { margin: 0 0 10px; color: var(--text); }

.s3-hlp-none p {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

.s3-hlp-none-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* --------------------------------------------------------------- 3 · close */

.s3-hlp-close .s3-h2 { margin: 0 0 14px; }
.s3-hlp-close .s3-lede { margin: 0 0 28px; }

.s3-hlp-close-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

@media (max-width: 1080px) {
  .s3-hlp-top-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 40px);
  }

  .s3-hlp-top-text .s3-h1 { max-width: 16ch; }
  .s3-hlp-search { max-width: 620px; }
}

@media (max-width: 900px) {
  .s3-hlp-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 3vw, 40px);
  }

  .s3-hlp-index { position: static; }

  .s3-hlp-index-foot { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }

  .s3-hlp-qa {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .s3-hlp-search-row { flex-wrap: wrap; }
  .s3-hlp-search .s3-btn { flex: 1 1 100%; }
  .s3-hlp-close-acts .s3-btn-primary { flex: 1 1 100%; }
}

/* Reduced motion. assets/js/pages.js creates nothing at all under this
   preference, so .is-rail is never added and the stacked layout above is
   already what renders. These rules are the belt to that braces: if the class
   is on the element when the preference flips mid-session, the band goes back
   to being a band before the next paint rather than after a teardown. */
@media (prefers-reduced-motion: reduce) {
  .s3-hiw-rail,
  .s3-hiw-rail.is-rail {
    height: auto;
    padding-block: clamp(46px, 5vw, 78px);
  }

  .s3-hiw-rail.is-rail .s3-hiw-rail-hold {
    position: static;
    height: auto;
    padding-block: 0;
  }

  .s3-hiw-rail.is-rail .s3-hiw-viewport {
    overflow: visible;
    max-width: var(--w-wide);
    padding-inline: var(--gutter);
    flex: none;
  }

  .s3-hiw-rail.is-rail .s3-hiw-track {
    flex-direction: column;
    height: auto;
    padding-inline: 0;
    transform: none !important;
  }

  .s3-hiw-rail.is-rail .s3-hiw-stage {
    width: auto;
    height: auto;
    overflow: visible;
    opacity: 1;
  }

  .s3-hiw-rail.is-rail .s3-hiw-stage + .s3-hiw-stage {
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }

  .s3-hiw-rail.is-rail .s3-hiw-stage-shot,
  .s3-hiw-rail.is-rail .s3-hiw-stage-prompt { flex: 0 0 auto; }

  .s3-hiw-rail.is-rail .s3-hiw-bar,
  .s3-hiw-rail.is-rail .s3-hiw-spine,
  .s3-hiw-rail.is-rail .s3-hiw-rail-spent { display: none; }

  .s3-hiw-compare-b,
  .s3-prm-seam-b { clip-path: inset(0 50% 0 0) !important; }

  .s3-prm-row-media img { opacity: 1; }
}

/* =========================================================================
   CONTACT — /contact/, rendered by page-contact.php.

   Everything below is scoped to `.s3-pg-contact`, the class that template puts
   on <main>, plus the `html.s3c-motion` gate its inline script sets. Nothing
   here reaches /about/, /features/, /pricing/ or the shared .s3-pg-form rules
   further up this sheet — the contact form is built on its own controls so the
   two can be rebuilt independently.

   Band order, and what changes between each pair — no two consecutive bands
   are the same box:
     1 head     --w-base    asymmetric 2-col   page background
     2 routes   full bleed  2 ruled cells      --surface-1, ruled top + bottom
     3 write    --w-base    asymmetric 2-col   page background

   ACCENT BUDGET, counted: the submit button once the consent box is ticked,
   and focus rings (system.css). Nothing else. The checked box is deliberately
   monochrome — the button turning lime is the whole signal, and two lime
   things would halve the value of both.

   FIELD SIZES: every control is 16px at every width. Below 16px iOS Safari
   rescales the viewport on focus and the reader has to pinch back out, which
   on a form is the difference between sending the message and leaving.
   ========================================================================= */

/* ------------------------------------------------------------- the gate ---
   These are the ONLY rules that hide anything, and they apply only when the
   inline script has confirmed JS is running and reduced motion is not asked
   for. Remove `s3c-motion` — which the script's own timeout, its catch block
   and its stuck-element check all do — and the page is simply visible. */

html.s3c-motion .s3-pg-contact [data-s3c-in],
html.s3c-motion .s3-pg-contact [data-s3c-cell],
html.s3c-motion .s3-pg-contact [data-s3c-field],
html.s3c-motion .s3-pg-contact [data-s3c-rail] {
  opacity: 0;
}

html.s3c-motion .s3-pg-contact-word-i {
  transform: translateY(110%);
}

/* …and this takes the gate back off, one element at a time, the moment the
   script starts driving that element itself. Equal specificity to the rules
   above, so it has to sit after them. Without it a tween that ends with
   clearProps hands the element straight back to `opacity: 0`. */
html.s3c-motion .s3-pg-contact .is-in {
  opacity: 1;
}

html.s3c-motion .s3-pg-contact-word-i.is-in {
  transform: none;
}

/* ================================================================ 1 · head */

.s3-pg-contact-head {
  padding-block: clamp(56px, 7.5vw, 124px) clamp(44px, 5.5vw, 86px);
}

/* Asymmetric on purpose: a centred column was what made this page read as a
   default template. The spec block sits on the baseline of the lede rather
   than the top of the heading, so the two columns are not a pair of boxes. */
.s3-pg-contact-head-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
  gap: clamp(36px, 5vw, 92px);
}

.s3-pg-contact-title {
  margin: 0 0 22px;
  max-width: 13ch;
}

/* The mask each word rises out of. The padding/negative-margin pair gives
   descenders room to exist inside an overflow:hidden box. */
.s3-pg-contact-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.s3-pg-contact-word-i {
  display: inline-block;
}

.s3-pg-contact-lede {
  margin: 0;
  max-width: 52ch;
}

/* ------------------------------------------------------------- direct line -
   A spec block, which /DESIGN-SYSTEM.md §9 names as the replacement for an
   icon-per-feature grid: real values, ruled, no boxes. Two rows, because the
   site has one address and one stated reply window and nothing else to say. */

.s3-pg-contact-direct {
  margin: 0;
  display: grid;
  align-content: end;
}

.s3-pg-contact-direct-row {
  position: relative;
  display: grid;
  gap: 8px;
  padding-block: 16px;
}

.s3-pg-contact-direct-row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--hairline);
  transform: scaleX(1);
  transform-origin: left center;
}

/* The rules draw themselves in when the head arrives. A class and a CSS
   transition rather than a tweened custom property: if GSAP were ever unable
   to animate the variable, the rule would stay at scale 0 forever. */
html.s3c-motion .s3-pg-contact-direct-row::after {
  transform: scaleX(0);
  transition: transform var(--t-slow) var(--ease);
}

html.s3c-motion .s3-pg-contact-direct-row:nth-child(2)::after {
  transition-delay: var(--t-quick);
}

html.s3c-motion .s3-pg-contact-direct-row.is-drawn::after {
  transform: scaleX(1);
}

.s3-pg-contact-direct dt {
  margin: 0;
}

.s3-pg-contact-direct dd {
  margin: 0;
}

/* The address is a standalone link, so it owns a 44px tap target. The padding
   grows the hit box and the matching negative margin keeps the row the height
   it drew at, so the rule underneath does not move. */
.s3-pg-contact-mail {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
  font-family: var(--mono);
  font-size: clamp(15px, 1.3vw, 19px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  word-break: break-word;
  transition: color var(--t-quick) var(--ease);
}

.s3-pg-contact-mail:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* ============================================================== 2 · routes */
/* Full bleed: the band's surface and its two hairlines are cut by both
   viewport edges, while the cells stay on the container grid. That is the one
   rhythm break the page needs, and it costs no layout maths. */

.s3-pg-contact-routes {
  background: var(--surface-1);
  border-block: 1px solid var(--hairline);
}

.s3-pg-contact-routes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The whole cell is the link, so the tap target is the cell. */
.s3-pg-contact-route {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(32px, 3.6vw, 58px) clamp(26px, 3vw, 48px);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-base) var(--ease);
}

.s3-pg-contact-route:first-child { padding-inline-start: 0; }
.s3-pg-contact-route:last-child  { padding-inline-end: 0; }

.s3-pg-contact-route:hover {
  background: var(--glass-1);
}

/* The divider is a pseudo-element rather than a border so it can draw. */
.s3-pg-contact-route + .s3-pg-contact-route::before {
  content: "";
  position: absolute;
  inset-block: clamp(32px, 3.6vw, 58px);
  inset-inline-start: 0;
  width: 1px;
  background: var(--hairline);
  transform: scaleY(1);
  transform-origin: top center;
}

html.s3c-motion .s3-pg-contact-route + .s3-pg-contact-route::before {
  transform: scaleY(0);
  transition: transform var(--t-slow) var(--ease);
}

html.s3c-motion .s3-pg-contact-route.is-drawn + .s3-pg-contact-route::before,
html.s3c-motion .s3-pg-contact-route + .s3-pg-contact-route.is-drawn::before {
  transform: scaleY(1);
}

.s3-pg-contact-route-title {
  margin: 0;
  color: var(--text);
}

.s3-pg-contact-route-text {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
}

.s3-pg-contact-route-link {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-2);
  text-underline-offset: 5px;
  transition: text-decoration-color var(--t-quick) var(--ease);
}

.s3-pg-contact-route:hover .s3-pg-contact-route-link {
  text-decoration-color: currentColor;
}

/* =============================================================== 3 · write */

.s3-pg-contact-write {
  padding-block: clamp(56px, 6.5vw, 108px) clamp(72px, 9vw, 144px);
}

.s3-pg-contact-write-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 5vw, 96px);
}

.s3-pg-contact-form-title {
  margin: 0 0 clamp(24px, 2.6vw, 34px);
}

.s3-pg-contact-col .s3-h2 {
  max-width: 16ch;
}

/* ------------------------------------------------------------ the alerts --
   No red exists in this palette and no accent is spendable here, so an alert
   is a brighter surface, a brighter hairline and a marker dot. It carries the
   one thing that was actually wrong, never "something went wrong". */

.s3-pg-contact-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 26px;
  padding: 16px 20px;
  max-width: 64ch;
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-chip);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.s3-pg-contact-alert::before,
.s3-pg-contact-err::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 0.55em;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* ------------------------------------------------------------- the fields */

.s3-pg-contact-form {
  display: grid;
  gap: 20px;
}

.s3-pg-contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.s3-pg-contact-field {
  display: grid;
  gap: 9px;
  margin: 0;
}

.s3-pg-contact-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.s3-pg-contact-opt {
  margin-left: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* main.css stamps the WooCommerce field look onto every bare input with
   !important, so these have to win outright rather than by sheet order. */
.s3-pg .s3-pg-contact-input {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  background: var(--surface-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-chip) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  transition: border-color var(--t-quick) var(--ease),
              background var(--t-quick) var(--ease) !important;
}

.s3-pg .s3-pg-contact-input:hover {
  border-color: var(--hairline-2) !important;
}

.s3-pg .s3-pg-contact-input:focus {
  background: var(--surface-2) !important;
  border-color: var(--hairline-2) !important;
}

.s3-pg .s3-pg-contact-textarea {
  min-height: 200px !important;
  resize: vertical;
}

/* ------------------------------------------------------------- the consent
   Required, unticked by default, and blocking in three places: `required`
   stops the browser submitting, the inline script replaces the native bubble
   with the line below, and studio3d_handle_contact() refuses the POST. Only
   the third one is load-bearing.

   The label is the tap target — full width, 44px minimum, and clicking
   anywhere in it toggles the box. */

.s3-pg-contact-consent {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.s3-pg-contact-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 44px;
  padding-block: 10px;
  color: var(--text);
  cursor: pointer;
}

/* 28px, not 24: the radius scale bottoms out at 10px, and 10px on a 24px box
   leaves 4px of straight edge per side, which reads as a radio button. At 28px
   there is 8px of flat edge and it is unmistakably a checkbox. */
.s3-pg-contact-boxwrap {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-top: -1px;
}

.s3-pg-contact-box {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-chip);
  cursor: pointer;
  /* A checkbox holds no typed text and so never triggers the iOS focus zoom,
     but it is still a form control on this page and every form control on this
     page is 16px. It changes nothing visually — the box is drawn, not set. */
  font-size: 16px;
  transition: background var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease);
}

.s3-pg-contact-consent-label:hover .s3-pg-contact-box {
  border-color: var(--text);
}

/* Monochrome on purpose — see the accent budget at the top of this block. */
.s3-pg-contact-box:checked {
  background: var(--glass-3);
  border-color: var(--text);
}

.s3-pg-contact-tick {
  position: absolute;
  inset: 0;
  margin: auto;
  color: var(--text);
  opacity: 0;
  transform: scale(0.55);
  pointer-events: none;
  transition: opacity var(--t-quick) var(--ease),
              transform var(--t-quick) var(--ease);
}

.s3-pg-contact-box:checked + .s3-pg-contact-tick {
  opacity: 1;
  transform: scale(1);
}

.s3-pg-contact-consent-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

.s3-pg-contact-consent-note {
  margin: 0 0 0 42px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.s3-pg-contact-consent-note a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-2);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-quick) var(--ease);
}

.s3-pg-contact-consent-note a:hover {
  text-decoration-color: currentColor;
}

.s3-pg-contact-err {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 0 42px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* [hidden] has to win over the display above or the message never goes away. */
.s3-pg-contact-err[hidden] {
  display: none;
}

/* ------------------------------------------------------------ the one CTA -
   Glass until the box is ticked, lime after. That state change is the single
   accent on the page and the only feedback the reader needs that the form is
   now sendable. The button is never `disabled`: a disabled control cannot be
   focused and cannot explain itself, so it stays live and says why instead. */

.s3-pg-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 8px;
}

.s3-pg-contact-actions-note {
  font-size: 14px;
  color: var(--muted);
}

.s3-pg .s3-pg-contact-submit {
  min-height: 48px;
  padding: 14px 30px;
  border-radius: var(--r-card);
  background: var(--glass-1);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  transition: background var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease),
              color var(--t-quick) var(--ease);
}

.s3-pg .s3-pg-contact-submit:hover {
  background: var(--glass-2);
  border-color: var(--hairline-2);
}

/* :has() and the JS fallback class are written as SEPARATE rules on purpose.
   In one selector list an engine without :has() would drop both and the
   button would never arm at all. */
.s3-pg .s3-pg-contact-form:has(.s3-pg-contact-box:checked) .s3-pg-contact-submit {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 700;
}

.s3-pg .s3-pg-contact-form.is-armed .s3-pg-contact-submit {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 700;
}

.s3-pg .s3-pg-contact-form:has(.s3-pg-contact-box:checked) .s3-pg-contact-submit:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--text));
}

.s3-pg .s3-pg-contact-form.is-armed .s3-pg-contact-submit:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--text));
}

/* --------------------------------------------------------------- the sent */

.s3-pg-contact-sent {
  padding: clamp(28px, 3.4vw, 44px);
  max-width: 62ch;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

.s3-pg-contact-sent .s3-h2 {
  margin: 0 0 12px;
  color: var(--text);
}

.s3-pg-contact-sent p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

.s3-pg-contact-sent .s3-pg-contact-sent-more {
  margin-top: 20px;
}

/* Also standalone, so also a 44px target. */
.s3-pg-contact-link {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-2);
  text-underline-offset: 5px;
  transition: text-decoration-color var(--t-quick) var(--ease);
}

.s3-pg-contact-link:hover {
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------- the rail */

.s3-pg-contact-rail {
  /* The row is as tall as the form, so the rail has somewhere to travel; with
     the container's `align-items: start` it would collapse to its own height
     and sticky would have no range at all. */
  align-self: stretch;
}

.s3-pg-contact-rail-inner {
  /* 68px is --s3-nav-h in nav.css, which is declared on .s3-nav and therefore
     cannot be inherited here. */
  position: sticky;
  top: calc(68px + 28px);
}

.s3-pg-contact-rail-title {
  margin: 0;
  color: var(--text);
}

.s3-pg-contact-rail-list {
  margin: 20px 0 0;
  border-top: 1px solid var(--hairline);
}

.s3-pg-contact-rail-item {
  padding-block: 18px;
  border-bottom: 1px solid var(--hairline);
}

.s3-pg-contact-rail-item dt {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}

.s3-pg-contact-rail-item dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* ============================================================ responsive == */

@media (max-width: 1120px) {
  .s3-pg-contact-head-inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(30px, 4vw, 46px);
  }

  .s3-pg-contact-direct {
    max-width: 460px;
  }

  .s3-pg-contact-title {
    max-width: 15ch;
  }
}

@media (max-width: 1000px) {
  .s3-pg-contact-write-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(44px, 6vw, 68px);
  }

  /* Nothing to stick to once the rail is a block under the form. */
  .s3-pg-contact-rail-inner {
    position: static;
  }

  .s3-pg-contact-col .s3-h2 {
    max-width: 22ch;
  }
}

@media (max-width: 760px) {
  .s3-pg-contact-routes-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .s3-pg-contact-route,
  .s3-pg-contact-route:first-child,
  .s3-pg-contact-route:last-child {
    padding-inline: 0;
    padding-block: clamp(28px, 5vw, 40px);
  }

  /* The divider turns with the layout: a rule above the second cell. */
  .s3-pg-contact-route + .s3-pg-contact-route::before {
    inset-block: 0 auto;
    inset-inline: 0;
    width: auto;
    height: 1px;
    transform: scaleX(1);
    transform-origin: left center;
  }

  html.s3c-motion .s3-pg-contact-route + .s3-pg-contact-route::before {
    transform: scaleX(0);
  }

  html.s3c-motion .s3-pg-contact-route.is-drawn + .s3-pg-contact-route::before,
  html.s3c-motion .s3-pg-contact-route + .s3-pg-contact-route.is-drawn::before {
    transform: scaleX(1);
  }
}

@media (max-width: 620px) {
  .s3-pg-contact-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .s3-pg-contact-actions {
    align-items: stretch;
  }

  /* A 390px phone gets the full width rather than a 148px button floating in
     a 342px column. */
  .s3-pg .s3-pg-contact-submit {
    width: 100%;
  }

  .s3-pg-contact-actions-note {
    width: 100%;
  }

  .s3-pg-contact-consent-note,
  .s3-pg-contact-err {
    margin-left: 0;
  }
}

/* ======================================================== reduced motion == */
/* The gate class is never added when the preference is set, so these are the
   belt to its braces: if the class is somehow present, nothing is hidden and
   nothing transitions. */

@media (prefers-reduced-motion: reduce) {
  html.s3c-motion .s3-pg-contact [data-s3c-in],
  html.s3c-motion .s3-pg-contact [data-s3c-cell],
  html.s3c-motion .s3-pg-contact [data-s3c-field],
  html.s3c-motion .s3-pg-contact [data-s3c-rail] {
    opacity: 1 !important;
  }

  html.s3c-motion .s3-pg-contact-word-i {
    transform: none !important;
  }

  html.s3c-motion .s3-pg-contact-direct-row::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  html.s3c-motion .s3-pg-contact-route + .s3-pg-contact-route::before {
    transform: none !important;
    transition: none !important;
  }

  .s3-pg-contact *,
  .s3-pg-contact *::before,
  .s3-pg-contact *::after {
    transition: none !important;
  }
}