/* 1-HOUR SUBMISSION SLA — SINGLE SOURCE (2026-09-16 owner brief). tools/build-sla.py inlines this into every page that
   carries the card or the strip; the form-adjacent line's rule lives in _shared/theme.css (.sla-form) because the consult
   form ships on pages without this region. "1-HOUR" is the dominant element in every variant. */
.sla { padding: 26px 0 30px; }   /* a band between the desk-status strip and the hero: room to breathe on both sides (owner, 2026-09-16) */
.sla + section, .sla + style + section { border-top: 0; }
.sla-card, .sla-strip {
  box-sizing: border-box; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--text);
}
.sla-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 36px; padding: 26px 34px; margin: 0; }
.sla-head { margin: 0; display: flex; flex-direction: column; line-height: 1; }
.sla-num { font-size: clamp(40px, 5.2vw, 64px); font-weight: 600; letter-spacing: -.035em; text-transform: uppercase; color: var(--text); }
.sla-label { margin-top: 8px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sla-body { display: flex; flex-direction: column; gap: 10px; }
/* strip: one row for long service pages */
.sla-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 16px 24px; margin: 0; border-radius: 14px; }
.sla-strip .sla-head { flex-direction: row; align-items: baseline; gap: 10px; }
.sla-strip .sla-num { font-size: 26px; }
.sla-strip .sla-label { margin-top: 0; font-size: 11.5px; }
/* the body wrapper is the flex item, so the row rules belong on it — without this the line's flex-basis is read down
   the column axis and the "slim strip" renders as a 442px band (fixed 2026-09-17) */
.sla-strip .sla-body--strip { flex: 1 1 320px; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
.sla-strip .sla-line { font-size: 15px; max-width: none; flex: 1 1 260px; }
@media (max-width: 720px) {
  .sla { padding: 18px 0 20px; }
  .sla-card { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; margin: 0; border-radius: 16px; }
  .sla-num { font-size: 44px; }
  .sla-line { font-size: 16.5px; }
  .sla-strip { padding: 14px 18px; }
}



/* 2026-09-17 owner brief: the primary message is the dominant text on the right; it carries the whole promise. */
.sla-line { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--text); max-width: 60ch; }
.sla-strip .sla-line { font-size: 16.5px; }
.sla-card .sla-head { align-self: center; }


/* Left block, three levels (owner brief, 2026-09-17): the number anchors, GUARANTEE is the payoff — centred under it,
   ~40% of its size, bold, tracking cut to .04em — and the qualifier sits under that, small and quiet. Centred within
   its own column so it stays centred under the number on every layout; the card centres the block against the text. */
.sla-head { align-items: center; text-align: center; }
.sla-promise { display: block; margin-top: 4px; font-size: clamp(19px, 2.2vw, 27px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; color: var(--text); }
.sla-label { margin-top: 8px; font-size: 11px; letter-spacing: .12em; font-weight: 500; color: var(--muted); }
.sla-strip .sla-head { flex-direction: column; align-items: center; gap: 0; }
.sla-strip .sla-promise { font-size: 13px; margin-top: 2px; }
.sla-strip .sla-label { font-size: 9.5px; margin-top: 4px; }
@media (max-width: 720px) { .sla-card .sla-head { align-self: start; } }

/* Right column (owner, 2026-09-17): one promise, left-aligned, centred on the block. */
.sla-body { align-self: center; text-align: left; }

/* Card (owner, 2026-09-17): the pair — left block + promise — is centred in the card as one unit; the promise column
   sizes to its text (max 60ch) instead of stretching to the card edge, so the empty right half is gone. Text itself stays
   left-aligned. Mobile keeps its single stacked column. */
@media (min-width: 721px) { .sla-card { grid-template-columns: auto minmax(0, 60ch); justify-content: center; } }

/* Movement (owner, 2026-09-17): only the left block breathes — a slow, quiet pulse on GUARANTEE (the payoff), nothing
   on the promise text or the section. Opacity and 2% scale, 2.8s, ease-in-out; off under reduced motion. */
@keyframes sla-breathe { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
.sla-promise { animation: sla-breathe 2.8s ease-in-out infinite; transform-origin: center; will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) { .sla-promise { animation: none; opacity: 1; transform: none; } }


/* Hierarchy (owner brief, 2026-09-17): the guarantee claim leads — large, bold, text colour; the one-hour condition is a
   footnote beneath it — small, muted. Nothing else in the column. */
.sla-line { font-size: clamp(20px, 2vw, 24px); line-height: 1.25; font-weight: 700; color: var(--text); max-width: 60ch; }
.sla-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); max-width: 70ch; }   /* footnote size (owner, 2026-09-17: "much smaller") */
.sla-strip .sla-line { font-size: 17px; }
.sla-strip .sla-note { flex-basis: 100%; margin-top: 3px; font-size: 11px; }

/* Composition pass (owner brief, 2026-09-17) — copy untouched. The left block becomes a mark rather than a headline:
   number and promise scaled down ~30%, tighter stack; the message moves closer, behind a hairline divider, in a narrower
   column so it is not stranded; the note sits tight under the lead as a lighter footnote; card padding trimmed so the card
   gets shorter, not taller. Loaded last so these win. */
.sla-card { gap: 10px 28px; padding: 20px 28px; }
@media (min-width: 721px) { .sla-card { grid-template-columns: auto minmax(0, 44ch); } }
.sla-head .sla-num { font-size: clamp(34px, 3.6vw, 44px); letter-spacing: -.03em; }
.sla-head .sla-promise { margin-top: 2px; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .05em; }
.sla-head .sla-label { margin-top: 5px; font-size: 9.5px; letter-spacing: .11em; }
@media (min-width: 721px) { .sla-card .sla-body { border-left: 1px solid var(--line-soft); padding-left: 28px; } }
.sla-body .sla-line { font-size: clamp(19px, 1.9vw, 22px); line-height: 1.2; }
.sla-body .sla-note { margin-top: 5px; font-size: 11px; line-height: 1.45; color: var(--faint); max-width: 46ch; }
.sla-strip { gap: 6px 22px; padding: 12px 20px; }
.sla-strip .sla-num { font-size: 22px; }
.sla-strip .sla-promise { font-size: 11px; }
.sla-strip .sla-label { font-size: 8.5px; margin-top: 3px; }
.sla-strip .sla-line { font-size: 16px; }
.sla-strip .sla-note { margin-top: 2px; font-size: 10.5px; }

/* Owner, 2026-09-17: the card was the full wrap width with ~700px of content in it, and its surface was not the wizard's.
   Now it is exactly the wizard shell's surface (--glass, --line, 18px) and it shrinks to its content, centred. */
.sla-card, .sla-strip { background: var(--glass); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
@media (min-width: 721px) { .sla-card { width: fit-content; max-width: 100%; margin-inline: auto; } }

/* Owner, 2026-09-17: the message is centred within its column beside the mark. */
@media (min-width: 721px) { .sla-card .sla-body { text-align: center; } .sla-card .sla-line, .sla-card .sla-note { margin-inline: auto; } }

/* Owner, 2026-09-17: the message column sized to its text (capped at 44ch), so the mark and the message sit as one tight
   unit with no slack to the right of the text; the unit is centred in the card, the card in the wrap. */
@media (min-width: 721px) { .sla-card { grid-template-columns: auto max-content; } .sla-card .sla-body { max-width: 44ch; } }

/* Owner, 2026-09-17: same surface as the hero wizard. The wizard is painted by the hero-surface rule
   ([data-hero-surface="tinted-paper"] .wrap .wzs-shell → --surface-tinted + a per-theme border), which cannot reach this
   section, so the card takes the same two tokens directly. */
.sla-card, .sla-strip { background: var(--surface-tinted); border-color: rgba(255, 255, 255, .14); }
:root[data-theme="light"] .sla-card, :root[data-theme="light"] .sla-strip { border-color: rgba(48, 44, 36, .22); }


/* Inline placement, corrected (owner, 2026-09-17): the approved card itself, inside the hero copy column. Same rules as
   everywhere else; only its width and margin are constrained to the column. */
.sla--inline { margin: 22px 0 0; }
.sla--inline .sla-card { width: fit-content; max-width: 100%; margin: 0; padding-inline: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sla--inline { margin: 22px 0 6px; }
/* In the 539px hero column the mark must never break ("1-" / "HOUR"): the number is nowrap and the message column
   is the one that yields. */
@media (min-width: 721px) { .sla--inline .sla-card { grid-template-columns: auto minmax(0, max-content); } }
.sla--inline .sla-num { white-space: nowrap; }
/* Owner, 2026-09-17: over the hero photograph the faint token is not readable — the note takes the text colour at 12px. */
.sla--inline .sla-body .sla-note { color: var(--text); opacity: .86; font-size: 12px; }

/* Band placement (owner, 2026-09-17): the home page's desk-status slot. Full-bleed hairline surface like the band it
   replaced; the strip inside loses its own frame and centres. */
/* Band placement (owner brief, 2026-09-17, "recreate the banner exactly"): full-width cream band under the nav, the hero
   photograph starting directly beneath it. Left: 1-HOUR / GUARANTEE / PREPARATION & SUBMISSION. Thin vertical divider.
   Right: the headline on a rectangular pale-blue block (a background, not a selection), the clock note in dark grey
   beneath. No pulse, no shadow, no gradient. Mobile stacks the blocks and the divider turns horizontal. */
.sla--band { margin: 0; padding: 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(230,224,210,.035); }
:root[data-theme="light"] .sla--band { background: #f4f0e8; border-color: rgba(48,44,36,.12); }
.sla--band .sla-card { width: fit-content; max-width: 100%; margin-inline: auto; padding: 26px 0; gap: 12px 44px; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 721px) { .sla--band .sla-card { grid-template-columns: auto minmax(0, max-content); } }
.sla--band .sla-num { white-space: nowrap; }
.sla--band .sla-promise { animation: none; }
/* ONE divider (owner, 2026-09-18): the card's own body border-left is the anchor — the head's border-right that doubled it
   is gone. Head → divider 40px (grid gap), divider → text 32px; the text column is left-aligned off that edge. */
.sla--band .sla-card { gap: 12px 40px; }
.sla--band .sla-head { padding-right: 0; border-right: 0; }
.sla--band .sla-body { text-align: left; border-left-color: var(--line-strong, rgba(230,224,210,.28)); padding-left: 32px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }   /* 2026-09-18 (owner): the line sits at the vertical centre of the 1-HOUR block */
:root[data-theme="light"] .sla--band .sla-body { border-left-color: rgba(48,44,36,.28); }
.sla--band .sla-body .sla-line, .sla--band .sla-body .sla-note { margin-inline: 0; }
/* No highlight block behind the claim (owner, 2026-09-17). The removed fill was the pale blue #dbe8f5 at
   zero radius — a square pale-blue panel behind text, which reads as a SELECTION rather than
   a designed element, and the blue is off-palette here (this site is graphite/porcelain/mineral/
   brass, no blue anywhere else). The inline-block and its 3px 12px padding went with it: they only
   existed to give that background room, and left the claim indented 12px out of line with the note
   beneath it. Type does the emphasis now — 21px/700 on the band ground. */
.sla--band .sla-line { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--text); }
/* 2026-09-18: the pale-blue block was removed from this line by a later edit but its dark ink stayed — invisible on the dark
   band. Ink follows the theme; light keeps the dark ink it had. */
:root[data-theme="light"] .sla--band .sla-line { color: #14181B; }
.sla--band .sla-body .sla-note { margin-top: 10px; font-size: 13px; color: var(--muted); opacity: 1; }
:root[data-theme="light"] .sla--band .sla-body .sla-note { color: #4d4944; }
@media (max-width: 720px) {
  .sla--band .sla-card { width: 100%; padding: 22px 0; gap: 16px; }
  .sla--band .sla-head { padding-right: 0; padding-bottom: 16px; border-right: 0; border-bottom: 1px solid var(--line-strong, rgba(230,224,210,.28)); align-self: stretch; }
  .sla--band .sla-body { padding-left: 0; border-left: 0; text-align: center; }
  .sla--band .sla-body .sla-line, .sla--band .sla-body .sla-note { margin-inline: auto; }
  :root[data-theme="light"] .sla--band .sla-head { border-bottom-color: rgba(48,44,36,.28); }
  .sla--band .sla-line { font-size: 18px; }
}