/* =====================================================================
   CNP-INSTRUMENT-APPLY.CSS · v2.0 · "The Instrument" propagation layer
   costandprofitability.com
   ---------------------------------------------------------------------
   PURPOSE: make the site's EXISTING classes adopt the base Instrument
   aesthetic (cream / ink / burnt-orange / Newsreader / IBM Plex Mono)
   with ZERO markup changes. Ships byte-identical on all 6 languages.

   v2 = v1 (sections 1–10, unchanged) + Phase B (sections 11–19):
   references/sources readout cards, inline-CTA tickets, related-card
   ticket treatment, fieldnotes perforation, serif ledes, figure frames,
   and — critically — CTA-band re-assertions at the specificity the
   real templates demand (see SPECIFICITY REALITY below).

   LOAD ORDER: enqueue LAST — after cnp-praxis.css, profile.css,
   cnp-praxis-discoverability.css, cnp-elevate.css, whale.css and every
   per-template inline <style>. Rules win by load order at equal
   specificity, and by doubled-class specificity where a template
   out-guns a plain `body .x` selector.

   SPECIFICITY REALITY (verified against live HTML on 16 Jul 2026 —
   /cost-to-serve/, /customer-profitability-analysis/, /whale-curve/):
   - The whale template scopes EVERYTHING under `.wc` → (0,2,0)+.
   - The SEO template (customer-profitability-…) scopes under `.praxis`
     — and on THAT template `praxis` IS a body class. We still NEVER
     write a `.praxis` selector (v1 discipline, some bodies lack it);
     where we must beat `.praxis .x .y` (0,3,0) we double or triple a
     class on the target instead: `.x.x` / `.x.x.x`. Zero !important.
   - cnp-praxis-discoverability.css styles .related/.rcard at
     (0,1,0)–(0,3,0) and .cnp-fieldnotes at (0,1,1)–(0,3,2).

   ADDITIVE + REVERSIBLE: no structural/layout changes, restyle only.
   Removing this single file restores the pre-Instrument look exactly.

   OUT OF SCOPE (deliberately absent):
   - NAVIGATION (.nav-praxis, .mega-*) and FOOTER chrome (.footer-*):
     untouched. Shared-chrome ancestors are actively excluded via the
     CHROME GUARD :not() below wherever a target class (.btn, .chip,
     .btn-arrow) could also occur inside them. No Phase-B selector can
     match inside nav/footer (all are content-component classes).
   - Dark sections/cards with inline light-on-dark text (.card-dark,
     .section-dark, .sec-dark, .rcard.cta, .tier-card--dark): their
     text colours are inline or semantic — repainting the ground would
     break them. Excluded by :not() or simply not targeted.
   - .cc-answer "In short" aside (SEO template): styled 100% inline in
     the markup and ALREADY on-target (#FBF9F3 / #DCD3C2 / mono orange
     label). Beating inline styles needs !important for zero visual
     gain — left alone.
   - Whale-curve internals (.wv-*, .qcard, .zone, .step): whale.css is
     already Instrument-voiced (mono orange .sn/.qk, serif .qh). Not
     re-painted.

   MULTI-LANGUAGE RULE: PT/ES/FR copy runs 30–40% longer than EN.
   NO rule below sets a fixed height or fixed width on a text container.
   Buttons/chips/eyebrows all keep white-space:normal and grow.

   CHROME GUARD (reused across risky selectors):
     :not(:is(.nav-praxis, .mega, .mobile-menu, .nav-mobile-overlay,
              .footer-praxis, .footer, .site-header, .site-nav,
              .site-footer) *)
   ===================================================================== */


/* ---------------------------------------------------------------------
   1 · TOKENS — the Instrument palette on :root
   Namespaced --cnp-*; coexists with the theme's own vars and with
   cnp-elevate's --el-* tokens. Safe to re-declare if cnp-instrument.css
   is also enqueued (identical values).
   --------------------------------------------------------------------- */
:root{
  /* surfaces */
  --cnp-cream:       #F5EEE1;   /* page ground */
  --cnp-cream-2:     #efe7da;   /* recessed panel / CTA band */
  --cnp-cream-3:     #e9dfce;   /* deeper recess / internal rules */
  --cnp-card:        #FBF6EB;   /* card face, lifted off the page */

  /* ink */
  --cnp-ink:         #2A211B;
  --cnp-soft:        #7d7062;
  --cnp-soft-2:      #9C8E7C;

  /* accent — ONE dominant accent per context. Brand red #E51A4B stays
     a rare signature and is deliberately NOT used anywhere in this file. */
  --cnp-orange:        #C75B22;  /* the accent, on cream */
  --cnp-orange-bright: #E2761A;  /* the accent, on dark surfaces */
  --cnp-orange-text:   #A8481A;  /* AA-safe orange for running text/hover */

  /* hardware */
  --cnp-notch:       #e7ddca;
  --cnp-hair:        #DED3BF;   /* hairline rules, card borders */
  --cnp-green:       #1D9E75;   /* live/status dot */

  /* type stacks — Newsreader / Hanken Grotesk / IBM Plex Mono are
     already enqueued site-wide; these only declare safe fallbacks */
  --cnp-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --cnp-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cnp-mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* rhythm */
  --cnp-radius:      16px;
  --cnp-radius-sm:   10px;
  --cnp-shadow-soft: 0 1px 0 rgba(42,33,27,.04), 0 12px 28px -20px rgba(42,33,27,.22);
  --cnp-shadow-card: 0 1px 0 rgba(42,33,27,.05), 0 18px 40px -24px rgba(42,33,27,.28);
  --cnp-notch-bg:    var(--cnp-cream);
}


/* ---------------------------------------------------------------------
   2 · PAGE GROUND — warm Instrument cream, gently
   Only the page-level ground moves from the old paper (#F3EEE4) to the
   Instrument cream (#F5EEE1) — a near-imperceptible warm shift. Section
   wrappers (.sec / .pf-sec / .sec-sm) intentionally keep their own
   backgrounds: overriding them blind could nuke dark bands that share
   the element (e.g. `class="sec dark-section"`). The nav paints its own
   background and is unaffected.
   --------------------------------------------------------------------- */
body{ background-color: var(--cnp-cream); }
body .cc-pf{ background: var(--cnp-cream); color: var(--cnp-ink); }

/* generic hairline divider (used on industry/method pages) */
body .cc-pf .rule,
body .sec .rule,
body .sec-sm .rule{ border-color: var(--cnp-hair); }


/* ---------------------------------------------------------------------
   3 · EYEBROWS / KICKERS — mono, uppercase, tracked, burnt-orange
   The single most recognisable Instrument cue. Light-surface variants
   get #C75B22; dark-surface variants (.eyebrow-dark, .ccwk-*) get the
   brighter #E2761A so they read on ink.
   Out-cascades cnp-elevate `body .eyebrow{letter-spacing:.2em}` and
   `body .cc-pf .pf-kicker{color:var(--orange-text)}` by load order.
   --------------------------------------------------------------------- */
body .eyebrow,
body .kicker,
body .kicker-orange,
body .pf-eyebrow,
body .pf-kicker,
body .hv2-eyebrow,
body .k{
  font-family: var(--cnp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.6;                 /* wraps to 2 lines in PT/FR, stays legible */
  color: var(--cnp-orange);
}
/* re-declare at cnp-elevate's exact specificity so we win by order */
body .cc-pf .pf-eyebrow,
body .cc-pf .pf-kicker{
  font-family: var(--cnp-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cnp-orange);
}
/* dark-surface eyebrows: brighter orange for contrast on ink */
body .eyebrow-dark,
body .ccwk-eyebrow,
body .ccwk-k{
  font-family: var(--cnp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--cnp-orange-bright);
}


/* ---------------------------------------------------------------------
   4 · SECTION NUMBERS / STAT FIGURES — serif figures, mono captions
   Figures: Newsreader with lining numerals (the "readout" voice).
   Captions: mono, tracked, uppercase — colour is NOT forced (opacity
   does the muting) so captions survive on both light AND dark bands.
   No font-size overrides: existing scales stay, only the voice changes.
   --------------------------------------------------------------------- */
body .stat-num,
body .dc-num,
body .mc-num,
body .mono-num{
  font-family: var(--cnp-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
body .stat-label{
  font-family: var(--cnp-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.7;                 /* captions wrap to 2–3 lines in PT/FR */
  margin-top: 6px;
  opacity: .78;                     /* mutes on any surface without a colour */
}
/* ledger rule above each stat — mirrors the Instrument stat band.
   currentColor keeps it correct on the dark stats band AND light grids. */
body .stat-item{
  border-top: 2px solid currentColor;
  padding-top: 14px;
  min-width: 0;
}
/* small ID numbers: the mono "instrument serial" voice */
body .section-num{
  font-family: var(--cnp-mono);
  font-weight: 500;
  letter-spacing: .1em;
  font-variant-numeric: lining-nums;
  color: var(--cnp-orange);
}
body .review-num{
  font-family: var(--cnp-mono);
  font-weight: 500;
  letter-spacing: .08em;
  font-variant-numeric: lining-nums;
  color: var(--cnp-soft);
}


/* ---------------------------------------------------------------------
   5 · SERIF HEADINGS + LEDES
   .serif adopts the Newsreader display voice; serif italics inside the
   big headings carry the accent (the Instrument em-accent). Ledes get
   the calm reading measure (~65ch, em-based so it scales with the
   translation) — colour only forced on known-light contexts.
   [v2 NOTE: section 16 below re-voices ledes to Newsreader serif at
   higher specificity — these v1 rules remain as the colour/measure
   base for templates the v2 rule reaches identically.]
   --------------------------------------------------------------------- */
body .serif{
  font-family: var(--cnp-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}
body .h1-hero em,
body .h2-section em,
body .serif em{
  font-style: italic;
  color: var(--cnp-orange);
}

body .lede,
body .pf-lede,
body .hv2-lede,
body .hero-lede,
body .ccwk-lede{
  font-family: var(--cnp-sans);
  font-size: clamp(16px, 2.2vw, 18.5px);
  line-height: 1.6;
  max-width: 65ch;                  /* measure, never a fixed width */
}
/* colour only where the surface is known-light. .hero-lede and
   .ccwk-lede sit on dark heroes/bands — they keep their own colour. */
body .lede,
body .hv2-lede{ color: var(--cnp-soft); }
body .cc-pf .pf-lede{ color: var(--cnp-soft); max-width: 65ch; }


/* ---------------------------------------------------------------------
   6 · BUTTONS — the Instrument tiers
   primary = solid burnt-orange pill · ghost/outline = hairline pill
   dark = solid-ink pill · ghost-dark = cream hairline (dark surfaces).
   All grow with their label: white-space normal, no fixed width, so a
   PT CTA like "Peça o seu Diagnóstico de Rentabilidade" wraps the pill.
   CHROME GUARD: .btn also occurs in the nav CTA and mobile menu — those
   ancestors are excluded, so nav/footer keep today's look exactly.
   --------------------------------------------------------------------- */
body .btn:not(:is(.nav-praxis, .mega, .mobile-menu, .nav-mobile-overlay, .footer-praxis, .footer, .site-header, .site-nav, .site-footer) *){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  white-space: normal;              /* labels may wrap — never truncate */
  line-height: 1.25;
  font-family: var(--cnp-sans);
  font-weight: 600;
  border-radius: 999px;             /* the Instrument pill (was 4px) */
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease,
              color .12s ease, background-color .12s ease,
              border-color .12s ease;
}
body .btn:focus-visible{
  outline: 2px solid var(--cnp-orange);
  outline-offset: 3px;
}

/* tier 1 — primary: solid orange pill */
body .btn-primary:not(:is(.nav-praxis, .mega, .mobile-menu, .nav-mobile-overlay, .footer-praxis, .footer, .site-header, .site-nav, .site-footer) *){
  background: var(--cnp-orange);
  border-color: var(--cnp-orange);
  color: #FBF6EB;
  padding: 13px 22px;
  box-shadow: 0 2px 0 rgba(42,33,27,.14);
}
body .btn-primary:not(:is(.nav-praxis, .mega, .mobile-menu, .nav-mobile-overlay, .footer-praxis, .footer, .site-header, .site-nav, .site-footer) *):hover{
  background: var(--cnp-orange);
  color: #FBF6EB;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(199,91,34,.28);
}

/* tier 2 — ghost / outline / download: hairline ink pill */
body .btn-ghost,
body .btn-outline,
body .btn-download{
  background: transparent;
  border: 1.5px solid var(--cnp-ink);
  color: var(--cnp-ink);
  padding: 12px 21px;
}
body .btn-ghost:hover,
body .btn-outline:hover,
body .btn-download:hover{
  background: transparent;
  border-color: var(--cnp-orange);
  color: var(--cnp-orange-text);
}

/* dark tier — solid ink pill (light surfaces only by convention) */
body .btn-dark{
  background: var(--cnp-ink);
  border-color: var(--cnp-ink);
  color: var(--cnp-cream);
  padding: 12px 21px;
}
body .btn-dark:hover{
  background: var(--cnp-orange);
  border-color: var(--cnp-orange);
  color: #FBF6EB;
}

/* ghost on DARK surfaces: cream hairline, never ink-on-ink */
body .btn-ghost-dark{
  background: transparent;
  border: 1.5px solid rgba(245,238,225,.55);
  color: #F5EEE1;
  padding: 12px 21px;
}
body .btn-ghost-dark:hover{
  border-color: #F5EEE1;
  color: #FFFFFF;
  background: rgba(245,238,225,.06);
}

/* arrow modifier: the icon glides, the label still wraps freely */
body .btn-arrow:not(:is(.nav-praxis, .mega, .mobile-menu, .nav-mobile-overlay, .footer-praxis, .footer, .site-header, .site-nav, .site-footer) *){
  gap: 8px;
}
body .btn-arrow:not(:is(.nav-praxis, .mega, .mobile-menu, .nav-mobile-overlay, .footer-praxis, .footer, .site-header, .site-nav, .site-footer) *) :is(.arrow, svg){
  flex: 0 0 auto;
  transition: transform .18s ease;
}
body .btn-arrow:not(:is(.nav-praxis, .mega, .mobile-menu, .nav-mobile-overlay, .footer-praxis, .footer, .site-header, .site-nav, .site-footer) *):hover :is(.arrow, svg){
  transform: translateX(3px);
}


/* ---------------------------------------------------------------------
   7 · CHIPS / PILLS / BADGES — outline pill, mono uppercase
   The Instrument chip: transparent, 1px orange hairline, mono caps.
   Chips grow with their label and may wrap to two lines in FR — that is
   correct behaviour; a clipped chip is not.
   .tier-badge / .maturity-badge keep their COLOURS untouched: they carry
   semantic state (maturity levels, tier coding) set by page JS.
   --------------------------------------------------------------------- */
body .chip:not(:is(.nav-praxis, .mega, .mobile-menu, .nav-mobile-overlay, .footer-praxis, .footer, .site-header, .site-nav, .site-footer) *),
body .svc-pill,
body .ccwk-tk-pill,
body .case-badge,
body .cat-badge,
body .category-badge{
  font-family: var(--cnp-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--cnp-ink);
  background: transparent;
  border: 1px solid var(--cnp-orange);
  border-radius: 999px;
  padding: 5px 12px;
  text-align: center;
}
/* semantic badges: Instrument voice + shape only — colours stay theirs */
body .tier-badge,
body .maturity-badge{
  font-family: var(--cnp-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  border-radius: 999px;
}
/* hero badge: sits on an unknown (possibly dark) hero — currentColor
   keeps it legible on any surface, no colour forced */
body .hero-badge{
  font-family: var(--cnp-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
}
/* meta line (not boxed): mono caption voice */
body .svc-meta{
  font-family: var(--cnp-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--cnp-soft);
}


/* ---------------------------------------------------------------------
   8 · CARDS — hairline, cream face, restrained shadow
   The subtle Instrument card: --cnp-card face lifted off the page by a
   1px hairline + soft warm shadow. Out-cascades cnp-elevate's
   `body .card{border-radius:6px}` at equal specificity by load order.
   Hover elevation from cnp-elevate (.svc-card:hover etc.) still applies
   — deliberate coexistence.
   --------------------------------------------------------------------- */
body :is(.card, .svc-card, .audience-card, .ai-insight-card, .author-card){
  background: var(--cnp-card);
  border: 1px solid var(--cnp-hair);
  border-radius: var(--cnp-radius);
  box-shadow: var(--cnp-shadow-soft);
  color: var(--cnp-ink);
  min-width: 0;
}
body .card-raised{
  background: var(--cnp-card);
  border: 1px solid var(--cnp-hair);
  border-radius: var(--cnp-radius);
  box-shadow: var(--cnp-shadow-card);
}
/* image header inside audience cards follows the card's new radius */
body .audience-card .audience-card-img{
  overflow: hidden;
  border-radius: calc(var(--cnp-radius) - 1px) calc(var(--cnp-radius) - 1px) 0 0;
}


/* ---------------------------------------------------------------------
   9 · CTA BANDS — the Instrument CTA: recessed cream, ruled
   The approved demo's final CTA is a recessed cream-2 band with ink
   type, orange em-accent and the primary orange pill. Inner colour
   overrides are strong enough to beat any legacy dark-band text rules.
   [v2 NOTE: section 11 re-asserts all of this at the specificity the
   whale (.wc .cta-band) and SEO (.praxis-scoped) templates require —
   these v1 rules stay as the base for weakly-scoped templates.]
   --------------------------------------------------------------------- */
body .cta-band,
body .cta-footer{
  background: var(--cnp-cream-2);
  color: var(--cnp-ink);
  border-top: 1px solid var(--cnp-hair);
  border-bottom: 1px solid var(--cnp-hair);
  --cnp-notch-bg: var(--cnp-cream-2);   /* future tears punch to this surface */
}
/* headings: ink, with the serif em-accent */
body :is(.cta-band, .cta-footer) :is(h2, h3, .h2-section, .cta-content h2){
  color: var(--cnp-ink);
}
body :is(.cta-band, .cta-footer) :is(h2, .h2-section) em{
  font-style: italic;
  color: var(--cnp-orange);
}
/* body copy: soft ink — beats legacy light-on-dark text rules */
body :is(.cta-band, .cta-footer) :is(p, .lede, .cta-content p, .cta-body p, .cta-body){
  color: var(--cnp-soft);
}
/* eyebrows inside the band go accent orange, not the dark-band bright */
body :is(.cta-band, .cta-footer) :is(.eyebrow, .eyebrow-dark, .kicker){
  color: var(--cnp-orange);
}
/* outline buttons inside the band must be ink hairline, never cream */
body :is(.cta-band, .cta-footer) :is(.btn-ghost, .btn-ghost-dark, .btn-outline){
  border-color: var(--cnp-ink);
  color: var(--cnp-ink);
  background: transparent;
}
body :is(.cta-band, .cta-footer) :is(.btn-ghost, .btn-ghost-dark, .btn-outline):hover{
  border-color: var(--cnp-orange);
  color: var(--cnp-orange-text);
}
/* legacy dark-band glow decoration reads wrong on cream — retire it
   (decorative only; restored the moment this file is removed) */
body :is(.cta-band, .cta-footer) .glow{ display: none; }


/* ---------------------------------------------------------------------
   10 · REDUCED MOTION — every glide in this layer stands down
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body .btn,
  body .btn-arrow :is(.arrow, svg){ transition: none; }
  body .btn-primary:hover{ transform: none; }
  body .btn-arrow:hover :is(.arrow, svg){ transform: none; }
}


/* =====================================================================
   ▼▼▼  PHASE B (v2) — verified against live markup, 16 Jul 2026  ▼▼▼
   Sources of truth: fetched HTML of /cost-to-serve/,
   /customer-profitability-analysis/, /whale-curve/ + whale.css +
   cnp-praxis-discoverability.css + CLASS_inventory. Every class named
   below was observed on the live site.
   ===================================================================== */

/* ---------------------------------------------------------------------
   11 · CTA BANDS, RE-ASSERTED — beating the real templates
   Verified live: all three page templates paint .cta-band as a dark
   "--night" band with a radial glow (a .glow div on whale/SEO, a
   ::before radial on cost-to-serve) at up to (0,3,0) specificity
   (.wc .cta-band h2 / .cnp-redesign .cta-band p / .praxis-scoped).
   Section 9's (0,1,1)–(0,2,1) rules LOSE there, so the flip to
   recessed cream is re-declared here with a doubled class — (0,2,1)+
   on the band, (0,3,1)+ on inner elements. Zero !important.
   SAFETY: band contents verified on all three pages = eyebrow, h2(+em),
   p, .cta-row/.cta-btns buttons, .glow, svg arrows — every one of them
   is re-inked below, so flipping the ground cannot strand light text.
   --------------------------------------------------------------------- */
body .cta-band.cta-band,
body .cta-footer.cta-footer{
  background: var(--cnp-cream-2);
  color: var(--cnp-ink);
  border-top: 1px solid var(--cnp-hair);
  border-bottom: 1px solid var(--cnp-hair);
  --cnp-notch-bg: var(--cnp-cream-2);
}
/* the night-band glow, in both incarnations: the .glow div (whale/SEO
   markup) and the ::before radial (cost-to-serve CSS). Decorative only
   — verified: no template puts content in .cta-band::before. */
body .cta-band.cta-band .glow,
body .cta-footer.cta-footer .glow,
body .cta-band.cta-band::before{ display: none; }

/* headings: ink, serif em-accent (covers <em> and <em class="em-orange">) */
body .cta-band.cta-band :is(h2, h3, .h2-section),
body .cta-footer.cta-footer :is(h2, h3){
  color: var(--cnp-ink);
}
body .cta-band.cta-band :is(h2, .h2-section) em{
  font-style: italic;
  color: var(--cnp-orange);
}
/* body copy (covers bare p, .body-text, .cta-content p) */
body .cta-band.cta-band p,
body .cta-footer.cta-footer p{
  color: var(--cnp-soft);
}
/* eyebrows: accent orange — beats `.wc .eyebrow.dark` (0,3,0). The
   whale eyebrow's ::before dash is already orange; it stays. */
body .cta-band.cta-band :is(.eyebrow, .eyebrow-dark, .kicker),
body .cta-footer.cta-footer :is(.eyebrow, .eyebrow-dark, .kicker){
  color: var(--cnp-orange);
}
/* cream-hairline ghosts become ink hairline on the cream band */
body .cta-band.cta-band :is(.btn-ghost, .btn-ghost-dark, .btn-outline),
body .cta-footer.cta-footer :is(.btn-ghost, .btn-ghost-dark, .btn-outline){
  border: 1.5px solid var(--cnp-ink);
  color: var(--cnp-ink);
  background: transparent;
}
body .cta-band.cta-band :is(.btn-ghost, .btn-ghost-dark, .btn-outline):hover,
body .cta-footer.cta-footer :is(.btn-ghost, .btn-ghost-dark, .btn-outline):hover{
  border-color: var(--cnp-orange);
  color: var(--cnp-orange-text);
  background: transparent;
}
/* .btn-dark ("Contact us" on the SEO template) stays the solid-ink
   tier — strong on cream, already the Instrument dark pill */
body .cta-band.cta-band .btn-dark{
  background: var(--cnp-ink);
  border-color: var(--cnp-ink);
  color: var(--cnp-cream);
}


/* ---------------------------------------------------------------------
   12 · REFERENCES / SOURCES — the recessed readout card
   Verified live markup (whale-curve, all languages — the declutter
   fragment ships the same classes):
     section.sec.cnp-refs > .wrap > .sec-head(.eyebrow + h2.serif)
       > ol.cnp-reflist > li > span.rf-type + div.rf-body
           > p.rf-cite(span.rf-au, em) + p.rf-note
   Page CSS (inline <style>) styles it at (0,2,0)–(0,3,1); everything
   below is body-prefixed one step above. The list becomes a single
   readout ticket: #FBF9F3 ground, #DED3BF hairline, perforated top
   edge (dashed rule + two notch circles punching to the page cream),
   ledger rules between entries.
   --------------------------------------------------------------------- */
body .cnp-refs .cnp-reflist{
  position: relative;
  list-style: none;
  background: #FBF9F3;                       /* readout ground */
  border: 1px solid var(--cnp-hair);
  border-top: 2px dashed var(--cnp-hair);    /* the perforation */
  border-radius: 8px 8px var(--cnp-radius) var(--cnp-radius);  /* stub top, card bottom */
  padding: 6px 26px 10px;
  box-shadow: var(--cnp-shadow-soft);
}
/* tear notches at both ends of the perforated edge. They punch through
   to the surface behind (--cnp-notch-bg, defaults to page cream). The
   list sits inside .wrap (≥20px side padding on every template), so a
   12px overhang can never cause horizontal overflow at 375px. */
body .cnp-refs .cnp-reflist::before,
body .cnp-refs .cnp-reflist::after{
  content: "";
  position: absolute;
  top: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cnp-notch-bg);
  box-shadow: inset 0 0 0 1px var(--cnp-notch),
              inset 0 1px 2px rgba(42,33,27,.06);
}
body .cnp-refs .cnp-reflist::before{ left: -11px; }
body .cnp-refs .cnp-reflist::after{ right: -11px; }

/* entries: subtle ledger rules INSIDE the card (the card's own edges
   take over at top and bottom) */
body .cnp-refs .cnp-reflist li{
  border-top: 1px solid var(--cnp-cream-3);
  padding: 18px 0;
}
body .cnp-refs .cnp-reflist li:first-child{ border-top: 0; }
body .cnp-refs .cnp-reflist li:last-child{ border-bottom: 0; }  /* page CSS closes the list with a rule — the card edge does it now */

/* the mono type tag ("Book" / "Paper") — already orange on the page;
   unified to the Instrument tracking */
body .cnp-refs .rf-type{
  font-family: var(--cnp-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cnp-orange);
}
/* citation + annotation voices */
body .cnp-refs .rf-cite{ color: var(--cnp-ink); }
body .cnp-refs .rf-note{ color: var(--cnp-soft); }
/* links stay inline; orange only on hover */
body .cnp-refs .cnp-reflist a{ color: inherit; }
body .cnp-refs .cnp-reflist a:hover{ color: var(--cnp-orange-text); }

@media (max-width: 560px){
  body .cnp-refs .cnp-reflist{ padding: 4px 18px 8px; }
}

/* .pf-refs — the references block on the methods-profile template
   (CLASS_inventory; inner markup not fetched, so only safe generic
   moves: the readout ground on the container, ledger rules on any
   list entries, hover-orange links). */
body .cc-pf .pf-refs{
  background: #FBF9F3;
  border: 1px solid var(--cnp-hair);
  border-radius: var(--cnp-radius);
  padding: 20px 24px;
}
body .cc-pf .pf-refs li{
  border-top: 1px solid var(--cnp-cream-3);
  padding: 12px 0;
}
body .cc-pf .pf-refs li:first-child{ border-top: 0; }
body .cc-pf .pf-refs a:hover{ color: var(--cnp-orange-text); }


/* ---------------------------------------------------------------------
   13 · INLINE CTA / EXAMPLE TICKET — .cta-inline
   Verified in two incarnations:
   (a) SEO template (customer-profitability-…): a bare div —
       <div class="cta-inline"><b>…</b><br>…<br><a class="btn">…</a></div>
       with NO page CSS at all → fully defined here.
   (b) whale template: .wc .cta-inline (flex, orange left rule) at
       (0,2,0) → the (0,2,1) rules below re-ground it without touching
       its flex layout (display is deliberately NOT set).
   Treatment: readout ticket — hairline cream card, orange spine, mono
   label, CSS barcode. The barcode is a fixed 88×14px decorative strip
   (contains no text, so a fixed footprint is safe in all languages).
   --------------------------------------------------------------------- */
body :is(.wc, .seo-body) .cta-inline{
  background: #FBF9F3;
  border: 1px solid var(--cnp-hair);
  border-left: 3px solid var(--cnp-orange);
  border-radius: var(--cnp-radius-sm);
  padding: 22px 26px;
  margin: 34px 0;
  box-shadow: var(--cnp-shadow-soft);
  color: var(--cnp-ink);
}
/* the barcode: in the SEO div it stacks below the button; in the whale
   flex row it becomes the last (fixed) flex item — both correct */
body :is(.wc, .seo-body) .cta-inline::after{
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 88px;
  height: 14px;
  margin-top: 16px;
  background:
    repeating-linear-gradient(90deg,
      var(--cnp-ink) 0 2px,  transparent 2px 5px,
      var(--cnp-ink) 5px 6px,  transparent 6px 9px,
      var(--cnp-ink) 9px 12px, transparent 12px 14px,
      var(--cnp-ink) 14px 15px, transparent 15px 19px);
  opacity: .5;
}
/* SEO-template lead-in <b>: the ticket's mono label. Kept inline —
   the markup's own <br> handles the line break, so no layout change. */
body .seo-body .cta-inline b{
  font-family: var(--cnp-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cnp-orange);
}
/* untiered .btn inside the ticket → ink hairline pill (the SEO div's
   button carries no tier class; tiers keep their own look) */
body .seo-body .cta-inline .btn:not(.btn-primary):not(.btn-dark){
  border: 1.5px solid var(--cnp-ink);
  color: var(--cnp-ink);
  background: transparent;
  padding: 11px 20px;
  margin-top: 12px;
}
body .seo-body .cta-inline .btn:not(.btn-primary):not(.btn-dark):hover{
  border-color: var(--cnp-orange);
  color: var(--cnp-orange-text);
}
/* whale's own label/sub spans are already serif/soft — untouched */


/* ---------------------------------------------------------------------
   14 · RELATED / FURTHER-READING CARDS — .rcard as a mini-ticket
   Verified: cnp-praxis-discoverability.css styles .related/.rcard at
   (0,1,0)–(0,3,0). The .rcard.cta variant is a DARK conversion card
   (ink ground, white text, orange radial) — excluded everywhere; it
   keeps its night look deliberately.
   NOTE: my base rule out-guns the page's .rcard:hover border-color, so
   the hover states are re-declared here (page's translateY(-3px) hover
   transform still applies — transform is never touched).
   --------------------------------------------------------------------- */
body .related .rcard:not(.cta){
  background: var(--cnp-card);
  border: 1px solid var(--cnp-hair);
  border-radius: var(--cnp-radius);
  box-shadow: var(--cnp-shadow-soft);
}
body .related .rcard:not(.cta):hover{
  border-color: var(--cnp-orange);
  box-shadow: var(--cnp-shadow-card);
}
/* kicker: the mono "instrument serial" in accent orange */
body .related .rcard:not(.cta) .rk{
  font-family: var(--cnp-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cnp-orange);
}
/* arrow line keeps its mono voice; hover colour matches the tier */
body .related .rcard:not(.cta):hover .arrow{ color: var(--cnp-orange-text); }
/* section eyebrow above the grid is caught by section 3 already */


/* ---------------------------------------------------------------------
   15 · FIELD NOTES — perforate the subscription ticket
   Verified: .cnp-fieldnotes (cnp-praxis-discoverability.css) is already
   on-system (#FBF9F3 ground, mono orange .fn-ey, Newsreader .fn-h).
   v2 only upgrades the hardware: Instrument radius, hairline unify,
   perforated top edge. Notches only ≥720px: below that the aside can
   run edge-to-edge (margin:48px auto, no side padding on the body), and
   an overhanging notch would cause horizontal scroll at 375px.
   --------------------------------------------------------------------- */
body .cnp-fieldnotes{
  position: relative;
  border-color: var(--cnp-hair);
  border-radius: var(--cnp-radius);
  border-top: 2px dashed var(--cnp-hair);
  box-shadow: var(--cnp-shadow-soft);
}
@media (min-width: 720px){
  body .cnp-fieldnotes::before,
  body .cnp-fieldnotes::after{
    content: "";
    position: absolute;
    top: -12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cnp-notch-bg);
    box-shadow: inset 0 0 0 1px var(--cnp-notch),
                inset 0 1px 2px rgba(42,33,27,.06);
  }
  body .cnp-fieldnotes::before{ left: -11px; }
  body .cnp-fieldnotes::after{ right: -11px; }
}


/* ---------------------------------------------------------------------
   16 · LEDES / INTROS — the Newsreader reading voice
   Phase-B decision: ledes move from Hanken to Newsreader serif with a
   generous measure (the Instrument "read note" voice). Doubled classes
   beat the templates' scoped rules (`.wc .lede`, `.hero-dark .lede`,
   `.cnp-redesign .lede`, all (0,2,0)); .hero-lede needs a triple to
   beat the SEO template's `.praxis .seo-hero .hero-lede` (0,3,0).
   Colour is NOT set here — v1 section 5 already handles colour per
   surface, and dark heroes keep their own light ink.
   --------------------------------------------------------------------- */
body .lede.lede,
body .pf-lede.pf-lede,
body .hv2-lede.hv2-lede,
body .hero-lede.hero-lede.hero-lede,
body .drop-intro{
  font-family: var(--cnp-serif);
  font-weight: 400;
  font-size: clamp(17px, 2.3vw, 20px);
  line-height: 1.58;
  letter-spacing: 0;
  max-width: 65ch;
}
/* serif italic em inside a lede carries the accent on light ground */
body .lede.lede em,
body .pf-lede.pf-lede em{
  font-style: italic;
  color: var(--cnp-orange-text);
}
/* the SEO template's definition emphasis (<em class="def"> opening the
   lede) — the serif-italic key sentence, kept ink for reading comfort */
body .seo-body em.def{
  font-family: var(--cnp-serif);
  font-style: italic;
  color: var(--cnp-ink);
}


/* ---------------------------------------------------------------------
   17 · FIGURE FRAMES — .fig (SEO template diagrams)
   Verified: <figure class="fig" style="margin:30px 0;max-width:760px">
   holding an inline SVG + an inline-styled mono figcaption (already
   on-voice). v2 adds the recessed Instrument frame around the plate.
   The figcaption's inline styles are left alone — beating them needs
   !important for no visual gain.
   --------------------------------------------------------------------- */
body .seo-content .fig{
  box-sizing: border-box;
  background: var(--cnp-cream-2);
  border: 1px solid var(--cnp-cream-3);
  border-radius: var(--cnp-radius-sm);
  padding: 14px 12px 8px;
}
body .seo-content .fig svg{
  display: block;
  max-width: 100%;
  height: auto;
}


/* ---------------------------------------------------------------------
   18 · SMALL MONO SERIALS — remaining kickers found on live pages
   .xk  = cross-link "Proof" strip kicker (xlink block, all templates)
   .aip-eyebrow = AI-prompt panel label (JS-injected, .cnp-aip scoped)
   .aip-disc    = AI-panel disclaimer — mono caption, colour NOT forced
                  (panel surface varies), opacity mutes instead
   .step-num    = numbered how-it-works steps (health-check template)
   --------------------------------------------------------------------- */
body .cnp-xl .xk,
body .cnp-aip .aip-eyebrow{
  font-family: var(--cnp-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--cnp-orange);
}
body .cnp-aip .aip-disc{
  font-family: var(--cnp-mono);
  font-size: 10.5px;
  line-height: 1.6;
  opacity: .75;
}
body .step-num{
  font-family: var(--cnp-mono);
  font-weight: 500;
  letter-spacing: .1em;
  font-variant-numeric: lining-nums;
  color: var(--cnp-orange);
}


/* ---------------------------------------------------------------------
   19 · CARD GEOMETRY UNIFICATION — shape only, zero colour
   Cards on templates NOT fetched this pass (blog, profitaudit,
   costctrl, home). Their surfaces are unverified, so ONLY geometry is
   unified (radius + soft shadow): safe on light AND dark faces.
   Backgrounds, borders and text colours are deliberately untouched —
   .tier-card--dark et al. keep their night look intact.
   --------------------------------------------------------------------- */
body :is(.related-card, .insight-card, .method-card, .feature-card,
         .deliverable-card, .problem-card, .week-card, .tier-card,
         .q-card){
  border-radius: var(--cnp-radius);
  box-shadow: var(--cnp-shadow-soft);
  min-width: 0;
}


/* ---------------------------------------------------------------------
   20 · REDUCED MOTION — Phase-B glides stand down too
   (No new transitions were added in Phase B; hover colour shifts remain,
   which is correct — only movement must stop.)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body .related .rcard:not(.cta):hover{ box-shadow: var(--cnp-shadow-soft); }
}

/* =====================================================================
   END CNP-INSTRUMENT-APPLY.CSS v2
   Remove this single file to revert every change above (v1 + Phase B).
   ===================================================================== */

/* ===== §20 Home stats band -> Instrument readout ticket 16jul-d ===== */
body .stats-band{background:transparent !important;border:0 !important;padding:clamp(22px,4vh,46px) 0}
body .stats-band::before,body .stats-band::after{background:none !important;content:none !important}
body .stats-band .container{position:relative;background:#FBF9F3 !important;border:1px solid #DED3BF !important;border-radius:13px !important;box-shadow:0 1px 0 rgba(42,33,27,.05),0 20px 46px -30px rgba(42,33,27,.28) !important;padding:34px clamp(24px,3vw,48px) 34px !important;overflow:visible}
body .stats-band .container::before,body .stats-band .container::after{content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:#F3EEE4;box-shadow:inset 0 0 0 1px #DED3BF}
body .stats-band .container::before{left:-11px}
body .stats-band .container::after{right:-11px}
body .stats-band .stats-grid{position:static;gap:0}
body .stats-band .stats-grid::after{content:"";position:absolute;right:26px;top:18px;width:64px;height:15px;opacity:.55;background:repeating-linear-gradient(90deg,#2A211B 0 2px,transparent 2px 5px,#2A211B 5px 6px,transparent 6px 9px,#2A211B 9px 11px,transparent 11px 14px,#2A211B 14px 15px,transparent 15px 19px)}
body .stats-band .stat-item{border-left:1px solid #e4dcc9;padding:0 clamp(16px,2vw,34px)}
body .stats-band .stat-item:first-child{border-left:0;padding-left:0}
body .stats-band .stat-num{color:#C75B22 !important;font-family:'Newsreader',Georgia,serif !important;font-weight:500;line-height:1}
body .stats-band .stat-label{color:#7d7062 !important;font-family:'IBM Plex Mono',ui-monospace,monospace !important;text-transform:uppercase;letter-spacing:.11em;font-size:12px;line-height:1.4;margin-top:8px}
@media(max-width:640px){body .stats-band .stat-item{border-left:0;border-top:1px solid #e4dcc9;padding:14px 0}body .stats-band .stats-grid::after{display:none}}

/* ===== §21 Home newsletter (field-notes) -> Instrument card 16jul-f ===== */
body .section-pad:has(> .container input){background:transparent !important}
body .section-pad:has(> .container input) > .container{position:relative;background:#FBF9F3 !important;border:1px solid #DED3BF;border-radius:14px;box-shadow:0 1px 0 rgba(42,33,27,.05),0 20px 46px -30px rgba(42,33,27,.28);padding:clamp(32px,5vw,54px) clamp(26px,4vw,58px) !important}
body .section-pad:has(> .container input) > .container::before,body .section-pad:has(> .container input) > .container::after{content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:#F3EEE4;box-shadow:inset 0 0 0 1px #DED3BF}
body .section-pad:has(> .container input) > .container::before{left:-11px}
body .section-pad:has(> .container input) > .container::after{right:-11px}
body .section-pad:has(input) h1,body .section-pad:has(input) h2,body .section-pad:has(input) h3{color:#1A1714 !important}
body .section-pad:has(input) p,body .section-pad:has(input) small,body .section-pad:has(input) li{color:#5b564f !important}
body .section-pad:has(input) input{background:#fff !important;border:1px solid #DED3BF !important;color:#1A1714 !important}