/* ==========================================================================
   PRIMITIVES v1 - the reusable premium layer (2026-07 whole-site elevation).

   Load order: tokens -> frame -> components -> PRIMITIVES -> surveyed ->
   signature -> broker -> borderglow (linked from [locale]/layout.tsx).

   Contract: these are the shared compositions every page reaches for BEFORE
   writing page-local CSS. Page-local <style> is reserved for genuinely
   bespoke, subject-native compositions (the demo calibration bay, the cards
   twin bench, the scenarios simulation sheet). Everything here is
   token-driven, AA-checked against the dark ground, motion-gated by
   html.no-motion / prefers-reduced-motion, and complete as a static frame.

   Index:
     1. .slab-grid        canonical card grid (retires per-page redefinitions)
     2. .cta-band         contextual funnel CTA band (replaces drawing-set
                          footers on funnel pages), data-funnel="photon|piam"
     3. .related-strip    quiet related-pages strip (max 3, no sheet numbers)
     4. .evidence-surface warm-white document/evidence island (tonal rhythm)
     5. .flow-rail        identity-flow visual: source -> policy -> credential
                          -> door -> audit; CSS-only travelling signal
     6. .proof-stage      framed product-proof stage with header rail + ticks
     7. .buyer-paths      two-door funnel selector (Photon / PIAM)
     8. .outcome-compare  before/after comparison with datum divider
     9. .scenario-steps   operational timeline with mono time markers
    10. .disclosure       accessible details/summary
    11. .fact-plate       verified-fact artefact (facts.json values only)
    12. SECTION VOCABULARY  .section-head, .eyebrow, .proof-kicker, .cta-row
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SLAB GRID - the one canonical definition. data-cols="2" opts into a
      two-up editorial layout; default auto-fits. Pages must not redefine.
   -------------------------------------------------------------------------- */
.slab-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin-top:36px;
}
.slab-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){
  .slab-grid[data-cols="2"]{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   2. CTA BAND - one clear next action, funnel-correct. The closing move on
      commercial pages: a statement, one primary pill, one quiet secondary,
      and a single supporting fact line. Never more than one primary.
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative;
  /* stand-alone separation only. Where the band closes a sequence of sections -
     which is every use on the site today - the join model in surveyed.v1.css
     zeroes this and takes the gap out of the preceding section's tail instead,
     so the band's own frame is never squashed. Tune the join THERE, not here. */
  margin-top:var(--space-section);
  /* block padding is --space-cta-pad (tokens.v1.css) because the join
     arithmetic has to complement it exactly; the inline value is local. */
  padding:var(--space-cta-pad) clamp(24px,5vw,64px);
  border-top:1px solid var(--hairline-strong);
  border-bottom:1px solid var(--hairline);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0) 45%),
    var(--bg-1);
}
.cta-band .wrap{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.cta-band-kicker{
  font-size:var(--t-label);font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-3);
}
/* text-wrap:balance so the 22ch measure cannot leave a single short word
   stranded on the last line (four pages read that way) */
.cta-band-title{
  text-wrap:balance;
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.08;letter-spacing:-0.02em;
  color:var(--ink-1);max-width:22ch;margin:0;
}
.cta-band-support{font-size:.95rem;line-height:1.55;color:var(--ink-lede);max-width:52ch;margin:0}
/* .cta-row is the construct-neutral name for this same row - see §12. Keep both
   selectors on ONE rule; a second declaration elsewhere is the duplicate trap. */
.cta-band-actions,.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.cta-band-note{font-size:.8rem;color:var(--ink-3)}
/* Funnel accent: the left rule states which funnel is speaking. */
.cta-band::before{
  content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
  background:var(--blue);
}
.cta-band[data-funnel="photon"]::before{background:var(--amber)}

/* Closing footnote under a section's CTAs (certification disclosure, cross-link
   note). Promoted here from healthcare's page-local block when education needed
   the same disclosure: shared markup must not depend on one page's <style>, or
   the class silently renders unstyled elsewhere. */
.journey-note{
  margin-top:22px;
  font-size:13.5px;line-height:1.6;
  color:var(--ink-3);max-width:62ch;
}
.journey-note a{
  color:var(--sky,#6ea8ff);
  text-decoration:underline;text-underline-offset:2px;
}

/* --------------------------------------------------------------------------
   3. RELATED STRIP - the quiet cross-link row that replaces the drawing-set
      footer where related pages genuinely help. Maximum three; plain labels.
   -------------------------------------------------------------------------- */
.related-strip{
  /* the separator when the strip CLOSES a section that has other content above
     it (about, citadel, cni, education, healthcare, public-sector) - an interval
     inside a section, not a join. The two joining shapes (strip alone in its own
     section, strip in a bare .wrap after a CTA band) are handled by the join
     model in surveyed.v1.css, which zeroes or retunes this margin. */
  margin-top:var(--space-section);
  padding-top:28px;
  border-top:1px solid var(--hairline);
  display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;
}
.related-strip-label{
  font-size:var(--t-label);font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-4);margin-right:8px;
}
.related-strip a{
  position:relative;
  font-size:.9rem;font-weight:600;color:var(--ink-2);
  border-bottom:1px solid var(--hairline-strong);
  padding-bottom:2px;
  transition:color .3s var(--ease-out-soft),border-color .3s var(--ease-out-soft);
}
/* invisible hit-area expansion to the 40px tap floor (the visible row is
   ~25px; growing the box would detach the underline from the label) */
.related-strip a::after{
  content:'';position:absolute;left:0;right:0;top:-9px;bottom:-8px;
}
.related-strip a:hover{color:var(--ink-1);border-color:var(--hairline-bright)}
.related-strip a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
/* phones: the wrapped multi-column row reads ragged at 390 - stack the links
   as one quiet list, label on its own line */
@media (max-width:560px){
  .related-strip{flex-direction:column;align-items:flex-start;gap:14px}
  .related-strip-label{margin-right:0}
}

/* --------------------------------------------------------------------------
   4. EVIDENCE SURFACE - a dark, elevated "evidence island" for specimen
      records, policy excerpts and worked figures. Keeps the document/ledger
      structure but reads as a considered dark surface (elevated backdrop,
      hairline border, an amber record stripe) rather than a warm-white paper
      panel - so it never breaks the near-black idiom of the page it sits on.
      Inherits the page's dark ink tokens; no light remap.
   -------------------------------------------------------------------------- */
.evidence-surface{
  background:var(--bg-elev);
  color:var(--ink-2);
  border:1px solid var(--hairline-strong);
  border-top:2px solid var(--stamp);
  border-radius:var(--r-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 48px -24px rgba(0,0,0,.6);
  padding:clamp(24px,4vw,48px);
}
/* Phones: the 24px inline inset stacked on the page's own 28px gutter put a
   nested .evidence-title 53px from the screen edge against the page h1's 28px,
   so the island's headings read as a second, misaligned column. 13px brings
   them to 41px - close enough to the page datum to scan as one column, wide
   enough that the frame still reads as a framed island. Block padding is
   untouched (the surface must keep its vertical breathing room), and the
   legal .doc-sheet composes this rule: its .clause-n margin numbers go static
   below 1020px, so they do not depend on this inset. */
@media (max-width:560px){
  .evidence-surface{padding-inline:13px}
}
.evidence-surface .kicker{color:var(--ink-3)}
/* Header row: a document title + a mono reference, like a controlled record.
   Wraps on narrow viewports so a long mono reference never clips or overflows. */
.evidence-head{
  display:flex;justify-content:space-between;gap:8px 16px;align-items:baseline;
  flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid var(--hairline-strong);
}
.evidence-title{font-size:1.05rem;font-weight:700;color:var(--ink-1);margin:0;min-width:0}
.evidence-ref{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink-3);overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   5. FLOW RAIL - the identity signal travelling from source record to door.
      Markup contract:
        <ol class="flow-rail" data-accent="amber|blue">
          <li class="fr-stop" data-active><span class="fr-dot"></span>
            <span class="fr-label">HR record</span>
            <span class="fr-note">joiner event</span></li>
          ...
        </ol>
      The connector draws between stops; a slow signal pulse travels the rail
      (opacity-only). Static frame: all stops and connectors fully drawn.
   -------------------------------------------------------------------------- */
.flow-rail{
  list-style:none;margin:36px 0 0;padding:0;
  display:flex;align-items:flex-start;
  counter-reset:frstop;
}
.fr-stop{
  position:relative;flex:1 1 0;min-width:0;
  padding:26px 12px 0 0;
}
.fr-dot{
  position:absolute;top:0;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg-3);
  border:1.5px solid var(--annot);
}
.fr-stop[data-active] .fr-dot{
  background:var(--blue);border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
}
.flow-rail[data-accent="amber"] .fr-stop[data-active] .fr-dot{
  background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 0 4px rgba(245,156,0,.15);
}
/* Connector between this stop's dot and the next */
.fr-stop:not(:last-child)::before{
  content:'';position:absolute;top:4px;left:14px;right:2px;height:1px;
  background:var(--hairline-strong);
}
/* The travelling signal: a soft light running the connector. Opacity-only. */
html.js:not(.no-motion) .fr-stop:not(:last-child)::after{
  content:'';position:absolute;top:3px;left:14px;width:26px;height:3px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(96,165,250,0), var(--glow-pulse), rgba(96,165,250,0));
  opacity:0;
  animation:fr-signal 5.5s var(--ease-out-soft) infinite;
  animation-delay:calc(var(--i,0)*0.9s);
}
.flow-rail[data-accent="amber"] .fr-stop:not(:last-child)::after{
  background:linear-gradient(90deg, rgba(245,156,0,0), rgba(245,156,0,.55), rgba(245,156,0,0));
}
@keyframes fr-signal{
  0%{left:12px;opacity:0}
  8%{opacity:.9}
  22%{left:calc(100% - 30px);opacity:0}
  100%{left:calc(100% - 30px);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .fr-stop:not(:last-child)::after{animation:none;opacity:0}
}
html.no-motion .fr-stop:not(:last-child)::after{animation:none;opacity:0}
.fr-label{
  display:block;font-size:.85rem;font-weight:700;color:var(--ink-1);
  letter-spacing:.01em;
}
.fr-note{
  display:block;margin-top:3px;
  font-family:var(--font-mono);font-size:var(--t-small);letter-spacing:.8px;
  text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:720px){
  .flow-rail{flex-direction:column;gap:0}
  .fr-stop{padding:0 0 22px 26px}
  .fr-dot{top:4px}
  .fr-stop:not(:last-child)::before{top:16px;left:4px;right:auto;bottom:2px;width:1px;height:auto}
  html.js:not(.no-motion) .fr-stop:not(:last-child)::after{display:none}
}

/* --------------------------------------------------------------------------
   6. PROOF STAGE - the framed surface real product material sits on: UI
      captures, worked documents, live components. Registration ticks in the
      corners; a header rail carrying a mono designation and a status slot.
   -------------------------------------------------------------------------- */
.proof-stage{
  position:relative;
  margin-top:36px;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-2);
  background:var(--bg-1);
  box-shadow:var(--shadow-slab);
}
.proof-stage::before,
.proof-stage::after{
  content:'';position:absolute;width:10px;height:10px;pointer-events:none;
  border-color:var(--annot);border-style:solid;
}
.proof-stage::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px}
.proof-stage::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0}
.ps-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:10px 16px;
  border-bottom:1px solid var(--hairline);
}
.ps-designation{
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);
}
.ps-status{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-3);
}
.ps-status .pulse-dot{width:6px;height:6px}
.ps-body{padding:clamp(18px,3vw,32px)}
.ps-body > img, .ps-body > video{display:block;max-width:100%;height:auto;border-radius:var(--r-1)}
/* Annotation footer: measured values under the stage, tabular. */
.ps-annot{
  display:flex;gap:24px;flex-wrap:wrap;
  padding:10px 16px;
  border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:var(--t-small);letter-spacing:.6px;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   7. BUYER PATHS - the two-funnel selector. Two doors, two accents, one
      decision. Use once per page at most (home, solutions).
   -------------------------------------------------------------------------- */
.buyer-paths{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  margin-top:36px;
}
@media (max-width:820px){.buyer-paths{grid-template-columns:1fr}}
.bp-door{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:clamp(24px,3.6vw,40px);
  background:var(--bg-1);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-2);
  box-shadow:var(--edge);
  transition:border-color .3s var(--ease-out-soft),transform .46s var(--ease-monument);
}
.bp-door::before{
  content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;
  border-radius:var(--r-1);
  background:var(--blue);
}
.bp-door[data-path="photon"]::before{background:var(--amber)}
.bp-door:hover{border-color:var(--hairline-bright)}
html.js:not(.no-motion) .bp-door:hover{transform:translateY(-2px)}
.bp-eyebrow{
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);
}
.bp-door[data-path="photon"] .bp-eyebrow{color:var(--amber-ink)}
.bp-door[data-path="piam"] .bp-eyebrow{color:var(--sky)}
.bp-title{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.15;letter-spacing:-0.015em;color:var(--ink-1);margin:0}
/* the flexible row: the doors are equal height but their titles and outcomes
   are not, so the SLACK has to live in one named place or the tail drifts. With
   it here, every door's tail (facts + actions, identical heights) is pushed to
   the same baseline and the two CTA rows line up - measured 12px apart before,
   because margin-top:auto on .bp-actions computed to 0 once the column's own
   gaps had absorbed the free space. */
.bp-outcome{font-size:.95rem;line-height:1.55;color:var(--ink-lede);margin:0;max-width:44ch;flex:1 1 auto}
.bp-facts{
  display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 0;padding:0;list-style:none;
  font-family:var(--font-mono);font-size:var(--t-small);letter-spacing:.6px;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.bp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px}

/* --------------------------------------------------------------------------
   8. OUTCOME COMPARE - the honest before/after. Two columns separated by a
      drawn datum; "before" is muted, "after" carries the accent. No fake
      numbers: cells hold statements or facts.json figures only.
   -------------------------------------------------------------------------- */
.outcome-compare{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:36px;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-2);
  overflow:hidden;
  background:var(--bg-1);
}
@media (max-width:720px){.outcome-compare{grid-template-columns:1fr}}
.oc-col{padding:clamp(20px,3vw,32px);position:relative}
.oc-col + .oc-col{border-left:1px dashed var(--datum)}
@media (max-width:720px){.oc-col + .oc-col{border-left:0;border-top:1px dashed var(--datum)}}
.oc-col[data-state="before"]{background:color-mix(in srgb, var(--scrim) 45%, transparent)} /* theme-aware dim: was a black literal that stayed black on paper */
.oc-label{
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-4);display:block;margin-bottom:14px;
}
.oc-col[data-state="after"] .oc-label{color:var(--amber-ink)}
.oc-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.oc-col li{
  font-size:.92rem;line-height:1.5;color:var(--ink-lede);
  padding-left:18px;position:relative;
}
.oc-col li::before{
  content:'';position:absolute;left:2px;top:.55em;width:7px;height:1.5px;
  background:var(--annot);
}
.oc-col[data-state="after"] li{color:var(--ink-2)}
.oc-col[data-state="after"] li::before{background:var(--amber)}

/* --------------------------------------------------------------------------
   9. SCENARIO STEPS - an operational story told as a timeline. Mono time
      markers give the sequence weight; content stays prose.
   -------------------------------------------------------------------------- */
.scenario-steps{
  list-style:none;margin:36px 0 0;padding:0;
  display:grid;gap:0;
}
.sc-step{
  position:relative;
  /* the marker track floors at 92px and grows to fit: .sc-when is nowrap, so a
     fixed 92px silently clipped any longer marker (credential-management's
     "04 - Suspend / Replace" measured 145px of content in the 92px track at 820
     and 1440). minmax can only grow the track, so every page whose markers fit
     92px is unchanged, and .sc-what already carries min-width:0 so the prose
     column still shrinks rather than pushing the row wide. */
  display:grid;grid-template-columns:minmax(92px, max-content) 1fr;gap:18px;
  padding:18px 0;
}
.sc-step:not(:last-child){border-bottom:1px solid var(--hairline)}
.sc-when{
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:700;
  letter-spacing:.8px;color:var(--amber);
  font-variant-numeric:tabular-nums;
  padding-top:2px;white-space:nowrap;
}
.sc-what{min-width:0}
.sc-title{font-size:.98rem;font-weight:700;color:var(--ink-1);margin:0 0 4px}
.sc-detail{font-size:.92rem;line-height:1.55;color:var(--ink-lede);margin:0;max-width:62ch}
@media (max-width:560px){
  .sc-step{grid-template-columns:1fr;gap:6px}
}

/* --------------------------------------------------------------------------
   10. DISCLOSURE - accessible progressive detail. Native details/summary,
       styled; the marker is drawn, focus ring per tokens.
   -------------------------------------------------------------------------- */
.disclosure{
  border-bottom:1px solid var(--hairline);
}
.disclosure summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 2px;
  font-size:.98rem;font-weight:600;color:var(--ink-1);
}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary::after{
  content:'+';flex:none;
  font-family:var(--font-mono);font-size:15px;color:var(--ink-3);
  transition:transform .3s var(--ease-out-soft);
}
.disclosure[open] summary::after{content:'−';color:var(--amber-ink)}
.disclosure summary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.disclosure-body{
  padding:0 2px 18px;
  font-size:.93rem;line-height:1.6;color:var(--ink-lede);
  max-width:66ch;
}

/* --------------------------------------------------------------------------
   11. FACT PLATE - a verified figure presented as an instrument reading.
       Values come from facts.json ONLY; the label states exactly what the
       number is. Quiet by design - proof does not shout.
   -------------------------------------------------------------------------- */
.fact-plate{
  display:inline-flex;flex-direction:column;gap:4px;
  padding:14px 18px;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-1);
  background:var(--bg-2);
  box-shadow:var(--edge);
  min-width:130px;
}
.fp-value{
  font-size:1.35rem;font-weight:700;letter-spacing:-0.01em;
  color:var(--ink-1);font-variant-numeric:tabular-nums;
}
.fp-label{
  font-size:var(--t-label);font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ink-3);line-height:1.35;
}
.fact-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* --------------------------------------------------------------------------
   12. SECTION VOCABULARY - the four constructs the census found every page
       re-inventing. All FOUR ARE LANDING ZONES: they are additive, and no
       page is repointed onto them in this change. Adopt them instead of a new
       page-local class, and delete the local clone in the same edit.

       Explicitly OUT OF SCOPE: the five legal routes (/privacy, /terms, /dpa,
       /cookies, /imprint). Their .clause / .doc-sheet h2 register is a
       deliberate document voice on the light paper surface - do not sweep them
       into this vocabulary.
   -------------------------------------------------------------------------- */

/* .section-head - the eyebrow -> heading -> lede stack. The census found 47
   distinct markup shapes doing this one job behind 13 bespoke wrapper classes
   (am-head, cp-head, cc-head, ph-head, pp-head, seq-head, trust-head, jy-intro,
   handoff-head, api-group-head, pp-matrix-head, ph-inst-head, sector-select),
   each re-inventing the vertical rhythm, so the offsets differ per page.
   Order is always eyebrow -> heading -> lede. */
.section-head{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:36px;
  max-width:var(--measure);
}
.section-head[data-align="center"]{align-items:center;text-align:center;margin-inline:auto}
/* a subordinate head inside a section that already has one */
.section-head[data-size="sub"]{gap:10px;margin-bottom:24px}

/* .eyebrow - one micro-label, tinted by attribute. Replaces seven measured
   signatures across fourteen class names (.cf-eyebrow, .cap-eyebrow,
   .af-eyebrow and .bp-eyebrow were four byte-identical copies of the same blue
   label under four names, one per page <style> block). The size is the shared
   --t-label tier, so it floors at 11px on a phone like every other micro-label.
   .kicker stays as it is: the bracketed { } section marker is the one
   deliberately distinctive form, not a plain eyebrow.
   "blue" resolves to --sky (#60a5fa), which is what all four blue clones
   actually measured - --blue itself fails AA on the dark ground. */
.eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--t-label);font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow[data-tint="blue"]{color:var(--sky)}
.eyebrow[data-tint="amber"]{color:var(--amber-ink)}
.eyebrow[data-tint="quiet"]{color:var(--ink-4)}

/* .proof-kicker - the proof-band eyebrow. .proof-band is a real shared
   construct on 19 pages but never had its own eyebrow, so eight pages borrowed
   .cta-band-kicker (a class named for a band they are not in) and each re-added
   the same display/margin correction locally. Declared here at exactly the
   values those eight already compute, so adopting it is a no-op; the amber
   comes from uplift.v1.css's higher-specificity .proof-band .k on the pages
   that also carry .k. */
.proof-kicker{
  display:block;
  font-size:var(--t-label);font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 10px;
}

/* .cta-row - a construct-neutral action row. .cta-band-actions is namespaced to
   the CTA band, so a button pair anywhere else grew a page-local class:
   .home-cta-row, .am-cta-row, .cc-cta-row, .cp-cta-row, .tr-cta-row and
   .ph-cta-row are byte-identical apart from the name and the margin-top.
   .cta-band-actions keeps its name, and .cta-row is added to THAT rule (§2
   above) rather than declared again here - a second declaration would be the
   documented duplicate-rule trap, and it would silently move every CTA band's
   action row from margin-top:6px to 8px. One definition, two names. */