/* =====================================================================
   CNP-METHOD-INSTRUMENT.CSS · v1.0 · Instrument layer for METHOD pages
   costandprofitability.com · verified against live /cost-to-serve/
   (fetched 16 Jul 2026) + cost-to-serve.TEMPLATE.css + cnp-diagrams.css
   + cnp-praxis-discoverability.css + praxis-heroart/hero-system.css
   ---------------------------------------------------------------------
   PURPOSE: bring the method-page template (body class
   page-template-cnp-<method>-praxis) onto the approved Instrument/
   ticket system used by the homepage hero (home-v2-frag-*-inst.html).

   LOAD ORDER: enqueue AFTER cnp-instrument-apply-v2.css (last of all
   CSS). ENQUEUE GATE: method-page templates ONLY (is_page_template()
   matching 'cnp-*-praxis', excluding cnp-home-praxis). Selectors are
   body-prefixed content classes; the gate is the primary scope.

   CHROME GUARD: no selector in this file can match inside
   .nav-praxis, .mega, .mobile-menu, .footer-praxis, .footer-regional
   or any nav/footer descendant — every target is a content-band class
   (.hero-dark, .section*, .cta-band, .cnp-*, .cc-answer, .grid-*,
   .diagram, .cnp-fig, .faq-*, .related is width-only).

   THE BAND: content band = .wrap = max-width:1240px, margin:auto,
   padding:0 40px (22px under 740px), box-sizing:border-box
   → visible content edge = 1160px. Free-standing cards (.cnp-aip,
   .cnp-fieldnotes, .cc-wtable…) align to the 1160 CONTENT edge;
   .wrap-based sections keep the 1240 box.

   LANGUAGE-AGNOSTIC: classes only, no text targeting; no fixed height
   or fixed width on any text container (PT/ES/FR run 30-40% longer).

   !IMPORTANT LEDGER (each beats an inline style= or an unknown-origin
   cap; nothing else in the file uses it):
     [A] .cc-answer inline card hardware (max-width/radius/border/
         shadow/padding are inline in the markup)
     [B] section-01 grid children (inline max-width:780px / 880px,
         margin:48px auto 0, text-align:center)
     [C] stat-card captions (inline font-size:15px + color)
     [D] .cnp-refs .wrap width (fragment caps it at 820px; origin of
         the cap unverified logged-out, so belt-and-braces)
   ===================================================================== */


/* ---------------------------------------------------------------------
   0 · TOKENS — identical to cnp-instrument-apply-v2 (safe re-declare)
   --------------------------------------------------------------------- */
:root{
  --cnp-cream:       #F5EEE1;
  --cnp-cream-2:     #efe7da;
  --cnp-cream-3:     #e9dfce;
  --cnp-card:        #FBF6EB;
  --cnp-ink:         #2A211B;
  --cnp-soft:        #7d7062;
  --cnp-soft-2:      #9C8E7C;
  --cnp-orange:        #C75B22;
  --cnp-orange-bright: #E2761A;
  --cnp-orange-text:   #A8481A;
  --cnp-notch:       #e7ddca;
  --cnp-hair:        #DED3BF;
  --cnp-green:       #1D9E75;
  --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;
  --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);
}


/* ---------------------------------------------------------------------
   1 · THE 1240 BAND — one width for every section          (fixes #8)
   .wrap is already 1240; .wrap-narrow (FAQ) rejoins the band. The FAQ
   answers keep their 70ch reading measure (template rule untouched).
   --------------------------------------------------------------------- */
body .section .wrap-narrow{
  max-width: 1240px;          /* was 940px — the "centered ~60%" FAQ */
}


/* =====================================================================
   2 · HERO — the Instrument 2-column ticket hero      (fixes #1, #4)
   Live markup: section.hero-dark (+ .heroart.hero-ent added at runtime
   by praxis-hero-system) > .wrap > .eyebrow / h1 / .lede / .cta-row /
   .meta. The night poster becomes the home hero's cream ground; the
   2-column grid only engages when the new .mh-aside ticket column
   exists (see METHOD_fix_spec.md §1 — markup change). Without the
   markup the hero simply renders single-column on cream: safe interim.
   ===================================================================== */

/* ground flip: night poster → Instrument cream */
body .hero-dark.hero-dark{
  background: var(--cnp-cream);
  color: var(--cnp-ink);
  padding: clamp(56px, 9vh, 104px) 0 clamp(48px, 8vh, 88px);
}
/* retire the night hardware: template dot-grid ::before + orange glow
   ::after, and the runtime heroart art layers (.heroart::before/::after,
   .heroart.dark variants — all ≤(0,2,1); this is (0,2,2)) */
body .hero-dark.hero-dark::before,
body .hero-dark.hero-dark::after{
  content: none;
}

/* type: the Instrument scale (matches home hv2) */
body .hero-dark .eyebrow{
  font-family: var(--cnp-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--cnp-orange);            /* was rgba(255,255,255,.55) */
}
body .hero-dark h1{
  font-family: var(--cnp-serif);
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -.016em;
  color: var(--cnp-ink);               /* was #fff */
  text-wrap: initial;                  /* kill balance: single-line when width allows */
}
body .hero-dark h1 em{
  font-style: italic;
  color: var(--cnp-orange);            /* was --orange-bright (dark-surface tint) */
}
body .hero-dark .lede{
  color: var(--cnp-soft);              /* was rgba(255,255,255,.68) */
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.6;
  max-width: 36em;
}
body .hero-dark .meta{
  color: var(--cnp-soft-2);            /* was rgba(255,255,255,.45) */
}
/* ghost CTA: cream hairline → ink hairline pill (beats template
   .btn-ghost-dark (0,1,0) AND apply-v2 body .btn-ghost-dark (0,1,1)) */
body .hero-dark .btn-ghost-dark{
  border: 1.5px solid var(--cnp-ink);
  color: var(--cnp-ink);
  background: transparent;
}
body .hero-dark .btn-ghost-dark:hover{
  border-color: var(--cnp-orange);
  color: var(--cnp-orange-text);
  background: transparent;
}

/* --- the 2-column grid: engages ONLY when the ticket column exists --- */
body .wrap:has(> .mh-aside){
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);   /* ~58/42 */
  column-gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
body .wrap:has(> .mh-aside) > *{ min-width: 0; }
body .mh-copy{ min-width: 0; }
body .mh-aside{ min-width: 0; }

/* --- the readout ticket (self-contained: mirrors home hv2-aside) --- */
body .mh-ticket{
  position: relative;
  background: var(--cnp-card);
  border: 1px solid var(--cnp-hair);
  border-radius: var(--cnp-radius);
  box-shadow: var(--cnp-shadow-card);
  overflow: visible;
  font-family: var(--cnp-sans);
  color: var(--cnp-ink);
  min-width: 0;
  max-width: 100%;
  --cnp-notch-bg: var(--cnp-cream);    /* tear notches punch to the hero ground */
}
body .mh-ticket .cnp-inst-card__top{
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline;
  gap: 4px 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--cnp-hair);
}
body .mh-ticket .cnp-inst-card__label{
  font-family: var(--cnp-mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cnp-soft); line-height: 1.6;
}
body .mh-ticket .cnp-inst-card__id{
  font-family: var(--cnp-mono);
  font-size: 11px; letter-spacing: .1em;
  color: var(--cnp-orange); white-space: nowrap;
}
body .mh-ticket .cnp-inst-card__body{ padding: 20px; }
body .mh-ticket .cnp-inst-figure{
  margin: 0;
  background: var(--cnp-cream-2);
  border: 1px solid var(--cnp-cream-3);
  border-radius: var(--cnp-radius-sm);
  padding: 12px 10px 8px;
  min-width: 0;
}
body .mh-ticket .cnp-inst-figure svg{ display: block; width: 100%; height: auto; }
body .mh-ticket .mh-cap{
  padding: 8px 4px 2px;
  font-family: var(--cnp-mono);
  font-size: 10.5px; letter-spacing: .03em; line-height: 1.7;
  color: var(--cnp-soft);
}
body .mh-ticket .cnp-inst-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px 20px 18px;
  font-family: var(--cnp-sans);
}
body .mh-ticket .cnp-inst-stat{ padding: 0 14px; min-width: 0; }
body .mh-ticket .cnp-inst-stat:first-child{ padding-left: 0; }
body .mh-ticket .cnp-inst-stat + .cnp-inst-stat{ border-left: 1px solid var(--cnp-cream-3); }
body .mh-ticket .cnp-inst-stat__fig{
  display: block;
  font-family: var(--cnp-serif);
  font-weight: 500; font-style: italic;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.1; letter-spacing: -.01em;
  color: var(--cnp-ink);
}
body .mh-ticket .cnp-inst-stat__fig em{ font-style: italic; color: var(--cnp-orange); }
body .mh-ticket .cnp-inst-stat__cap{
  display: block; margin-top: 6px;
  font-family: var(--cnp-mono);
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.7; color: var(--cnp-soft-2);
}
body .mh-ticket .cnp-inst-tear{
  position: relative; height: 0;
  border-top: 2px dashed var(--cnp-hair);
  margin: 2px 0;
}
body .mh-ticket .cnp-inst-tear::before,
body .mh-ticket .cnp-inst-tear::after{
  content: "";
  position: absolute; top: -11px;
  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 .mh-ticket .cnp-inst-tear::before{ left: -12px; }
body .mh-ticket .cnp-inst-tear::after{ right: -12px; }
body .mh-ticket .cnp-inst-card__bottom{
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 10px 14px;
  padding: 12px 20px 16px;
}
body .mh-ticket .cnp-inst-admit{
  font-family: var(--cnp-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.8; color: var(--cnp-soft); min-width: 0;
}
body .mh-ticket .cnp-inst-barcode{
  display: inline-block; flex: 0 0 auto;
  width: 88px; height: 22px;
  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: .82;
}

/* hero responsive: ticket drops below the copy, like the home */
@media (max-width: 920px){
  body .wrap:has(> .mh-aside){
    grid-template-columns: 1fr;
    row-gap: 34px;
  }
  body .mh-aside{ max-width: 560px; width: 100%; }
}
@media (max-width: 480px){
  body .mh-ticket .cnp-inst-stats{ grid-template-columns: 1fr; padding: 8px 20px 14px; }
  body .mh-ticket .cnp-inst-stat{ padding: 10px 0; }
  body .mh-ticket .cnp-inst-stat + .cnp-inst-stat{ border-left: 0; border-top: 1px solid var(--cnp-cream-3); }
  body .mh-ticket .cnp-inst-barcode{ width: 60px; height: 16px; }
}


/* ---------------------------------------------------------------------
   3 · TYPE SCALE — Instrument voice on the section headings  (fixes #4)
   Newsreader 500 display; kill text-wrap:balance (headings single-line
   when width allows); serif em-accent everywhere. Fonts themselves are
   already Newsreader/Hanken/Plex Mono in the template — this aligns
   weight, tracking and wrapping to the home.
   --------------------------------------------------------------------- */
body .section h2,
body .cta-band h2{
  font-weight: 500;
  letter-spacing: -.016em;
  text-wrap: initial;
}
body .section h2 em{ font-style: italic; color: var(--cnp-orange); }
/* dark band keeps the brighter accent for contrast */
body .section-dark.section-dark h2 em{ color: var(--cnp-orange-bright); }


/* =====================================================================
   4 · "IN SHORT" CARD — the Instrument readout            (fixes #2)
   Live markup: .section > .wrap > aside.cc-answer, styled 100% INLINE
   (max-width:820px; #FBF9F3; 1px #DCD3C2; 3px orange spine; radius 8).
   The inner label/h2/p are already on-voice (mono orange label,
   Newsreader h2). This upgrades the hardware to the Instrument card
   and opens it to the full band.  !important ledger [A].
   ===================================================================== */
body .section .wrap > .cc-answer{
  max-width: none !important;          /* [A] beats inline 820px — full band */
  background: var(--cnp-card) !important;      /* [A] card face, off the page */
  border: 1px solid var(--cnp-hair) !important;/* [A] hairline */
  border-left: 3px solid var(--cnp-orange) !important; /* [A] keep the orange spine */
  border-radius: var(--cnp-radius) !important; /* [A] Instrument radius */
  padding: 26px 30px !important;               /* [A] card padding */
  box-shadow: var(--cnp-shadow-soft);
}


/* ---------------------------------------------------------------------
   5 · STAT TRIO — serif figures, mono captions             (fixes #2)
   Live markup: .section-paper-2 > .wrap > .grid-3 > .card ×3, each
   h4 (inline: Newsreader 34px orange) + p (inline: 15px --ink-2).
   Card face comes from apply-v2 §8; re-asserted here for standalone
   safety. Figures gain the readout italic; captions flip to the mono
   caption voice.  !important ledger [C].
   --------------------------------------------------------------------- */
body .grid-3 > .card{
  background: var(--cnp-card);
  border: 1px solid var(--cnp-hair);
  border-radius: var(--cnp-radius);
  box-shadow: var(--cnp-shadow-soft);
  padding: 26px 28px;
  min-width: 0;
}
body .grid-3 > .card h4{
  font-weight: 500;
  font-style: italic;                  /* the readout figure, as on the home ticket */
  letter-spacing: -.01em;
  line-height: 1.1;
}
body .grid-3 > .card > p{
  font-family: var(--cnp-mono);
  font-size: 12.5px !important;        /* [C] beats inline 15px */
  color: var(--cnp-soft) !important;   /* [C] beats inline var(--ink-2) */
  letter-spacing: .02em;
  line-height: 1.7 !important;         /* [C] beats inline 1.6 (mono needs air) */
  text-transform: none;                /* full sentences — no caps in 6 languages */
}


/* =====================================================================
   6 · SECTION "01 THE PROBLEM" — fill the band            (fixes #3, #5)
   Live markup: .section > .wrap > div[max-width:780px] (copy)
                              + div[max-width:880px, centered] (.diagram + caption)
   Becomes a 2-column Instrument spread: copy left, framed figure right.
   The grid ONLY engages when the .diagram has been populated (see spec
   §5 — the div ships EMPTY today: dead data-diagram="whale" convention).
   While empty, the whole figure block is hidden: no 300px blank, no
   orphan caption.  !important ledger [B].
   ===================================================================== */

/* interim: hide the empty-diagram block (placeholder never populated) */
body .section .wrap > div:has(> .diagram:empty){ display: none; }

/* the spread: engages once the diagram exists */
body .section .wrap:has(> div > .diagram:not(:empty)){
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 60px);
  align-items: center;
}
body .section .wrap:has(> div > .diagram:not(:empty)) > div{
  max-width: none !important;          /* [B] beats inline 780px / 880px */
  margin: 0 !important;                /* [B] beats inline 48px auto 0 */
  text-align: left !important;         /* [B] beats inline center */
  min-width: 0;
}

/* the recessed Instrument frame around the plate (same as home figure) */
body .section .diagram{
  background: var(--cnp-cream-2);
  border: 1px solid var(--cnp-cream-3);
  border-radius: var(--cnp-radius-sm);
  padding: 14px 12px 8px;
  min-height: 0;                       /* template forces 300px — the SVG sizes it now */
  margin: 0;
}
body .section .diagram svg{ display: block; width: 100%; height: auto; }
/* the mono caption below the plate stays; align with the frame */
body .section .diagram + p{ padding: 0 4px; }

@media (max-width: 980px){
  body .section .wrap:has(> div > .diagram:not(:empty)){
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
}


/* =====================================================================
   7 · INJECTED DIAGRAMS (.cnp-fig) — readable anywhere    (fixes #6)
   cnp-diagrams.css draws transparent-background, ink-stroke SVGs with
   a muted mono caption — designed for cream, INVISIBLE on .section-dark
   (the auto-injected marginCascade lands there today). Every .cnp-fig
   now sits on its own light readout plate, so it reads on ANY ground.
   Placement itself is a JS fix (spec §6/§7) — this guarantees contrast
   wherever the figures land, before and after that fix.
   ===================================================================== */
body figure.cnp-fig{
  background: var(--cnp-card);
  border: 1px solid var(--cnp-hair);
  border-radius: var(--cnp-radius-sm);
  padding: 18px 16px 12px;
  box-shadow: var(--cnp-shadow-soft);
  max-width: 760px;
  margin: 40px auto;
  min-width: 0;
}
body figure.cnp-fig figcaption{
  color: var(--cnp-soft);              /* fixed caption colour on every ground */
  padding: 2px 4px 0;
}
/* on the dark band, plate edges need the hairline to read as a card */
body .section-dark figure.cnp-fig{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.5);
}
/* after the injector retarget (spec §6): both figures side by side in
   a .fig-row at the end of #how .wrap, filling the band */
body .fig-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
body .fig-row figure.cnp-fig{ max-width: none; margin: 0; }
@media (max-width: 980px){
  body .fig-row{ grid-template-columns: 1fr; }
}


/* =====================================================================
   8 · CTA BAND — "Start with your customer book"          (fixes #9)
   Template paints .cta-band as a night band (h2 #fff, p rgba white,
   .eyebrow.dark rgba(255,255,255,.55), orange radial ::before) at up
   to (0,2,0). Re-asserted here at (0,3,1)+ — triple class — so the
   flip to the recessed Instrument cream band wins on the method
   template regardless of apply-v2 load order. Zero !important.
   ===================================================================== */
body .cta-band.cta-band.cta-band{
  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);
}
body .cta-band.cta-band.cta-band::before{ content: none; }   /* the radial glow */
body .cta-band.cta-band.cta-band h2{
  color: var(--cnp-ink);
  max-width: none;                     /* was 22ch — heading joins the band */
}
body .cta-band.cta-band.cta-band h2 em{
  font-style: italic;
  color: var(--cnp-orange);
}
body .cta-band.cta-band.cta-band p{ color: #4a443d !important; }
body .cta-band.cta-band.cta-band .eyebrow{
  color: var(--cnp-orange);            /* covers .eyebrow AND .eyebrow.dark */
}
body .cta-band.cta-band.cta-band .btn-ghost-dark{
  border: 1.5px solid var(--cnp-ink);
  color: var(--cnp-ink);
  background: transparent;
}
body .cta-band.cta-band.cta-band .btn-ghost-dark:hover{
  border-color: var(--cnp-orange);
  color: var(--cnp-orange-text);
  background: transparent;
}


/* =====================================================================
   9 · THE TAIL — every block joins the band               (fixes #8)
   Free-standing cards align to the 1160 content edge (= .wrap content
   width); 22px side gaps under 740px mirror the .wrap padding.
   NOTE: on the live page #cnp-tail-standard hides .cnp-ap, .cc-wtable,
   section.cnp-aip and section.related with display:none!important —
   these rules style them for the environments where they render
   (preview/logged-in); they are inert on hidden elements.
   ===================================================================== */
body .cnp-aip.cnp-aip{                 /* was max-width:860px */
  max-width: none;
  width: min(1160px, calc(100% - 44px));
  margin-inline: auto;
}
body .cnp-ap.cnp-ap{                   /* was max-width:1140px */
  max-width: none;
  width: min(1160px, calc(100% - 44px));
  margin-inline: auto;
  padding-inline: 0;
}
body .cnp-ap .sap{ max-width: none; }  /* inner dark card was 1000px, centered */
body .cnp-xl{
  width: min(1160px, calc(100% - 44px));
  margin-inline: auto;
}
body figure.cc-wtable{                 /* worked-example table, if shown */
  max-width: none;
  width: min(1160px, calc(100% - 44px));
  margin-inline: auto;
}
body .cc-learnnext{
  width: min(1160px, calc(100% - 44px));
  margin-inline: auto;
}
/* .related > .wrap is already the 1240 band (discoverability CSS). */


/* ---------------------------------------------------------------------
   10 · FIELD NOTES — constrain to the band               (fixes #10)
   Was max-width:1240px with NO side padding → its card edge (and the
   apply-v2 tear notches, +11px each side) overhung the 1160 content
   edge on wide screens and touched the viewport on tablets. Now the
   card edge sits exactly on the content edge; notches (from apply-v2
   §15, ≥720px only) stay well inside the 1240 box.
   --------------------------------------------------------------------- */
body .cnp-fieldnotes.cnp-fieldnotes{
  max-width: none;
  width: min(1160px, calc(100% - 44px));
  margin-inline: auto;
}


/* =====================================================================
   11 · REFERENCES — full band, 2-column ledger            (fixes #11)
   Fragment structure (verified on whale-curve; refs render logged-in
   on this template): section.sec.cnp-refs > .wrap > .sec-head +
   ol.cnp-reflist > li (.rf-type + .rf-body). The fragment caps its
   .wrap at 820px — rejoin the 1240 band and let the ticket fill it
   with a 2-column reference ledger at wide widths. The apply-v2 §12
   readout-ticket treatment (perforated top, notches, ledger rules)
   is preserved: columns live INSIDE the same card.
   !important ledger [D] — the 820px cap's origin is unverified
   (possibly inline); the band cap stays correct either way.
   ===================================================================== */
body section.cnp-refs .wrap,
body .cnp-refs-b1 .wrap{
  max-width: 1240px !important;        /* [D] beats the fragment's 820px cap */
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 740px){
  body section.cnp-refs .wrap,
  body .cnp-refs-b1 .wrap{ padding-inline: 22px; }
}
/* 16jul: 2-column ledger removed — references render as full-width horizontal
   bars (one reference per row: type | title+authors | annotation), styled by
   the cnp-references mu-plugin inline CSS. No column layout. */


/* ---------------------------------------------------------------------
   12 · OVERFLOW + MOTION GUARDS
   No fixed width on any text container above; every grid track is
   minmax(0,…); tear notches overhang ≤12px inside ≥22px wrap padding
   → no horizontal scroll down to 360px.
   --------------------------------------------------------------------- */
body .section .wrap,
body .hero-dark .wrap,
body .cta-band .wrap{ min-width: 0; }

@media (prefers-reduced-motion: reduce){
  body .hero-dark .btn-ghost-dark,
  body .cta-band .btn-ghost-dark{ transition: none; }
}

/* =====================================================================
   END CNP-METHOD-INSTRUMENT.CSS v1
   Remove this single file to restore the pre-Instrument method page.
   ===================================================================== */

/* ===== §13 CTA band -> Instrument readout card 16jul-i ===== */
body .cta-band.cta-band{background:transparent !important;padding-block:clamp(24px,4vh,48px)}
body .cta-band .wrap{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(36px,5vw,56px) clamp(28px,4vw,58px) !important;max-width:1160px;margin-inline:auto}
body .cta-band .wrap::before,body .cta-band .wrap::after{content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:#F3EEE4;box-shadow:inset 0 0 0 1px #DED3BF}
body .cta-band .wrap::before{left:-11px}
body .cta-band .wrap::after{right:-11px}

/* ===== §14 Hero LinkedIn Instrument card image (right 40%) 16jul-j ===== */
body .mh-card{display:block;width:100%;aspect-ratio:900/1125;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:14px;box-shadow:0 1px 0 rgba(42,33,27,.05),0 24px 54px -30px rgba(42,33,27,.42);border:1px solid #DED3BF}