/* ============================================================
   cnp-ai-prompts.css
   Design layer for the AI Costing Prompt Hub (15 pages x EN/PT/ES).
   Scoped to .cnpnp.ai-hub and .cnpnp.ai-prompt so it never leaks
   into the rest of the Praxis site. Builds on the live newpages base
   (token vars, fonts, .wrap/.narrow/.sec). Token fallbacks are declared
   here too so the fragments preview standalone.
   Brand: Praxis. Paper, orange, green, contained red. Never blue.
   Newsreader / Hanken Grotesk / IBM Plex Mono. Zero em dash.
   ============================================================ */

.cnpnp.ai-hub,
.cnpnp.ai-prompt,
.cnpnp.ai-prompt {
  --paper:#F3EEE4; --paper2:#EDE6D8; --surface:#FBF9F3; --surface2:#F6F1E6;
  --ink:#1A1714; --ink2:#4A4138; --ink-dark:#14110D; --dark:#1A1714;
  --muted:#9A8E7E; --muted2:#756859; --line:#DCD3C2; --line2:#C9BEAA;
  --orange:#C75B22; --orange-bright:#E2761A; --orange-soft:#E2761A;
  --green:#1C7A57; --green-soft:#3E9B74; --green-deep:#155C42; --red:#B23A2E;
  --wheat:#E8DBC2;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --serif:'Newsreader', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
  /* editorial Praxis rhythm (matches /how-we-work/, home) */
  --w-wide:1240px; --w-read:760px; --rail:40px;
  --t-display:clamp(34px,4vw,52px); --t-h2:clamp(26px,3vw,38px);
  --t-h3:clamp(21px,2.1vw,26px); --t-lede:19px;
  --ease:cubic-bezier(.2,.6,.2,1);
  color:var(--ink); font-family:var(--sans); font-size:17.5px; line-height:1.62;
}

/* ---- editorial layout: wide column, responsive rail, tall section rhythm ---- */
.cnpnp.ai-hub .wrap, .cnpnp.ai-prompt .wrap { max-width:var(--w-wide); margin-inline:auto; box-sizing:border-box; }
.cnpnp.ai-hub .narrow, .cnpnp.ai-prompt .narrow { max-width:var(--w-wide); margin-inline:auto; box-sizing:border-box; }
.cnpnp.ai-hub .sec, .cnpnp.ai-prompt .sec { padding-block:clamp(64px,6.5vw,88px); }
.cnpnp.ai-hub > section + section,
.cnpnp.ai-prompt > section + section { border-top:1px solid var(--line); }

/* ---- shared element resets the AI pages rely on ---- */
.cnpnp.ai-hub h1, .cnpnp.ai-prompt h1,
.cnpnp.ai-hub h2, .cnpnp.ai-prompt h2,
.cnpnp.ai-hub h3, .cnpnp.ai-prompt h3,
.cnpnp.ai-hub h4, .cnpnp.ai-prompt h4 { margin:0; font-weight:400; }
.cnpnp.ai-hub h2, .cnpnp.ai-prompt h2 { font-family:var(--serif); font-size:var(--t-h2); line-height:1.08; letter-spacing:-0.01em; max-width:26ch; }
.cnpnp.ai-hub h3, .cnpnp.ai-prompt h3 { font-family:var(--serif); font-size:var(--t-h3); line-height:1.18; }
.cnpnp.ai-hub h2 + p, .cnpnp.ai-prompt h2 + p { margin-top:16px; }
.cnpnp.ai-hub p, .cnpnp.ai-prompt p { font-size:17.5px; line-height:1.62; color:var(--ink2); margin:0 0 16px; max-width:72ch; text-wrap:pretty; }
.cnpnp.ai-hub p:last-child, .cnpnp.ai-prompt p:last-child { margin-bottom:0; }
.cnpnp.ai-hub a, .cnpnp.ai-prompt a { color:var(--orange); text-decoration:none; text-underline-offset:3px; }
.cnpnp.ai-hub p a, .cnpnp.ai-prompt p a { text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--line2); transition:text-decoration-color .15s; }
.cnpnp.ai-hub p a:hover, .cnpnp.ai-prompt p a:hover { text-decoration-color:var(--orange); }
.cnpnp.ai-hub strong, .cnpnp.ai-prompt strong { color:var(--ink); font-weight:700; }
.cnpnp.ai-hub em, .cnpnp.ai-prompt em { font-style:italic; color:var(--orange); }
.cnpnp.ai-hub .lede em, .cnpnp.ai-prompt .lede em,
.cnpnp.ai-hub .geo-box em, .cnpnp.ai-prompt .geo-box em { color:var(--ink); }

/* ---- centre the content column on sections that have no .wrap
   (the persona pages put content directly inside .sec) ---- */
.cnpnp.ai-prompt > section > :where(h2,h3,p,ul,ol,.section-num,.worked,.rcards,.table-wrap,.hero-cta,.inshort),
.cnpnp.ai-hub > section > :where(h2,h3,p,ul,ol,.section-num,.worked,.rcards,.table-wrap,.hero-cta,.inshort) {
  max-width:var(--w-wide);
  margin-inline:auto;
}

/* ============================================================
   1 - HERO  (svc-hero)
   ============================================================ */
.cnpnp .svc-hero { padding:clamp(48px,6vw,78px) 0 clamp(28px,3vw,40px); }
.cnpnp .svc-hero .wrap { max-width:var(--w-wide); margin:0 auto; }
.cnpnp.ai-prompt > .svc-hero > :where(.eyebrow,h1,.lede,.hero-cta,.hero-note) { max-width:var(--w-wide); margin-inline:auto; }

.cnpnp .svc-hero .eyebrow {
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); margin:0 0 18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.cnpnp .svc-hero .eyebrow a { color:var(--muted2); }
.cnpnp .svc-hero .eyebrow a:hover { color:var(--orange); }
.cnpnp .svc-hero h1 {
  font-family:var(--serif); font-weight:400; font-size:var(--t-display);
  line-height:1.03; letter-spacing:-0.015em; max-width:19ch; margin:18px 0 0;
}
.cnpnp .svc-hero .lede {
  font-size:var(--t-lede); line-height:1.55; color:var(--ink2); max-width:62ch; margin:22px 0 0; text-wrap:pretty;
}
.cnpnp .svc-hero .hero-note {
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted);
  margin:24px 0 0; max-width:none;
}

/* hub gets a stronger hero with the prompt -> model motif (injected by JS) */
.cnpnp.ai-hub .svc-hero { padding:clamp(58px,7vw,92px) 0 clamp(30px,3.5vw,44px); }
.cnpnp.ai-hub .svc-hero .wrap { position:relative; }
.cnpnp .hero-motif {
  margin:38px auto 0; max-width:var(--w-wide); padding-inline:var(--rail);
  padding-top:28px; border-top:1px solid var(--line);
}

/* ---- buttons (.btn-primary / .btn-ghost, with or without .btn) ---- */
.cnpnp .hero-cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:28px 0 0; max-width:none; }
.cnpnp.ai-hub .btn-primary, .cnpnp.ai-prompt .btn-primary {
  display:inline-flex; align-items:center; gap:8px; background:var(--orange); color:#fff;
  font-family:var(--sans); font-weight:600; font-size:15px; padding:14px 26px; border-radius:10px;
  text-decoration:none; transition:background .15s, transform .15s, box-shadow .15s;
}
.cnpnp.ai-hub .btn-primary:hover, .cnpnp.ai-prompt .btn-primary:hover {
  background:var(--orange-bright); transform:translateY(-2px); box-shadow:0 14px 28px -18px rgba(199,91,34,.8);
}
.cnpnp.ai-hub .btn-ghost, .cnpnp.ai-prompt .btn-ghost {
  display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--ink);
  font-family:var(--sans); font-weight:600; font-size:15px; padding:14px 24px; border-radius:10px;
  border:1px solid var(--line2); text-decoration:none; transition:border-color .15s, color .15s, transform .15s;
}
.cnpnp.ai-hub .btn-ghost:hover, .cnpnp.ai-prompt .btn-ghost:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }

/* ============================================================
   2 - SECTION NUMBER LABEL  ( ● --- label )
   ============================================================ */
.cnpnp .section-num {
  display:flex; align-items:center; gap:13px; margin:0 0 16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2);
}
.cnpnp .section-num .n { color:var(--orange); font-size:9px; line-height:1; }
.cnpnp .section-num .rule { width:38px; height:1px; background:var(--line2); display:inline-block; }

.cnpnp.ai-hub .grp, .cnpnp.ai-prompt .grp {
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted2); font-weight:500; margin:0 0 16px;
}
.cnpnp.ai-hub h3.grp + .rcards, .cnpnp.ai-prompt h3.grp + .rcards { margin-top:0; }
.cnpnp.ai-hub h3.grp, .cnpnp.ai-prompt h3.grp { margin-top:30px; }

/* lede / fineprint / clean-list helpers used across the pages */
.cnpnp.ai-hub .lede, .cnpnp.ai-prompt .lede { font-size:18px; line-height:1.62; color:var(--ink2); }
.cnpnp.ai-hub .fineprint, .cnpnp.ai-prompt .fineprint {
  font-family:var(--mono); font-size:12.5px; line-height:1.55; color:var(--muted2); margin-top:14px; max-width:78ch;
}
.cnpnp.ai-hub .clean-list, .cnpnp.ai-prompt .clean-list {
  list-style:none; margin:18px 0 0; padding:0; max-width:74ch; display:grid; gap:12px;
}
.cnpnp.ai-hub .clean-list li, .cnpnp.ai-prompt .clean-list li {
  position:relative; padding-left:24px; font-size:17px; line-height:1.6; color:var(--ink2); text-wrap:pretty;
}
.cnpnp.ai-hub .clean-list li::before, .cnpnp.ai-prompt .clean-list li::before {
  content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%;
  background:var(--orange);
}

/* ============================================================
   3 - GEO ANSWER BOX  (geo-box "In short")
   contained "in short" card on paper, matches the live /how-we-work/ .inshort
   (JS wraps the section content into .inshort on both wrapped and
    no-wrap persona layouts)
   ============================================================ */
.cnpnp .geo-box h2 {
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted2); margin:0 0 9px;
}
.cnpnp .inshort {
  max-width:var(--w-read); margin-inline:0; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:12px;
  padding:24px 28px;
}
.cnpnp .geo-box .inshort p, .cnpnp .geo-box p {
  font-family:var(--sans); font-size:17px; line-height:1.58; color:var(--ink); margin:0; max-width:68ch;
}
.cnpnp .geo-box .inshort p + p { margin-top:12px; }

/* ============================================================
   4 - THE PROMPT CARD  (centrepiece)
   dark premium code block, copy button, mono prompt text
   ============================================================ */
.cnpnp .prompt-block { padding-top:clamp(64px,6.5vw,88px); }
.cnpnp.ai-hub .prompt-card, .cnpnp.ai-prompt .prompt-card {
  position:relative; background:var(--ink-dark);
  border:1px solid #2C261E; border-radius:14px;
  margin:18px 0 0; max-width:840px; overflow:hidden;
  box-shadow:0 30px 60px -42px rgba(20,17,13,.85), 0 2px 0 rgba(255,255,255,.02) inset;
}
.cnpnp .prompt-card::before {
  /* top chrome bar with a mono label and three quiet dots */
  content:"PROMPT"; display:flex; align-items:center; height:42px; padding:0 18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:#7E7563;
  border-bottom:1px solid #251F18; background:#17130F;
}
.cnpnp .prompt-card[data-label]::before { content:attr(data-label); }
.cnpnp .prompt-card .copy-btn {
  position:absolute; top:7px; right:10px; z-index:2;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.06em;
  color:var(--wheat); background:#26201A; border:1px solid #3A322789; border-radius:6px;
  padding:7px 13px; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.cnpnp .prompt-card .copy-btn:hover { background:var(--orange); color:#fff; border-color:var(--orange); }
.cnpnp .prompt-card .copy-btn.done { background:var(--green); color:#fff; border-color:var(--green); }
.cnpnp .prompt-card .prompt-text {
  margin:0; padding:22px 24px 24px; max-width:none;
  font-family:var(--mono); font-size:13.5px; line-height:1.72; color:#E7DCC6;
  white-space:pre-wrap; word-break:break-word; tab-size:2;
  overflow-x:auto;
}
/* the compact guardrail variant */
.cnpnp .prompt-card.small { max-width:760px; }
.cnpnp .prompt-card.small::before { content:"GUARDRAIL"; }
.cnpnp .prompt-card.small[data-label]::before { content:attr(data-label); }
.cnpnp .prompt-card.small .prompt-text { font-size:13.5px; padding:18px 22px 20px; color:#F0E7D3; }

/* dotted decoration on the chrome bar */
.cnpnp .prompt-card { --dots:0; }

/* ============================================================
   5 - TABLES  (cnp-table inside .table-wrap)
   ============================================================ */
.cnpnp .table-wrap { margin:18px auto 0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px; }
.cnpnp .cnp-table {
  width:100%; border-collapse:collapse; font-size:14.5px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.cnpnp .cnp-table thead th {
  background:var(--ink-dark); color:var(--wheat); font-family:var(--mono); font-weight:500;
  font-size:11.5px; letter-spacing:.04em; text-align:left; padding:13px 16px; white-space:nowrap;
}
.cnpnp .cnp-table tbody td {
  padding:12px 16px; border-top:1px solid var(--line); color:var(--ink2);
  font-variant-numeric:tabular-nums; vertical-align:top;
}
.cnpnp .cnp-table tbody td:first-child { color:var(--ink); font-weight:500; }
.cnpnp .cnp-table tbody tr:nth-child(even) td { background:rgba(220,211,194,.22); }
.cnpnp .cnp-table tbody tr.total td {
  border-top:2px solid var(--orange); font-weight:700; color:var(--ink);
  background:rgba(199,91,34,.07);
}
.cnpnp .cnp-table tbody tr:hover td { background:rgba(199,91,34,.06); }

/* mobile: copy-js stamps data-label on each td, we flip to cards */
@media (max-width:680px) {
  .cnpnp .cnp-table.is-cards { border:0; background:transparent; }
  .cnpnp .cnp-table.is-cards thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .cnpnp .cnp-table.is-cards tbody tr {
    display:block; background:var(--surface); border:1px solid var(--line); border-radius:9px;
    margin-bottom:12px; padding:6px 4px;
  }
  .cnpnp .cnp-table.is-cards tbody tr:nth-child(even) td { background:transparent; }
  .cnpnp .cnp-table.is-cards tbody td {
    display:flex; justify-content:space-between; gap:18px; border-top:1px solid var(--line);
    padding:9px 16px; text-align:right;
  }
  .cnpnp .cnp-table.is-cards tbody td:first-child { border-top:0; }
  .cnpnp .cnp-table.is-cards tbody td::before {
    content:attr(data-label); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted2); text-align:left; flex:0 0 auto; padding-top:2px;
  }
  .cnpnp .cnp-table.is-cards tbody td:empty { display:none; }
}

/* ============================================================
   6 - WORKED EXAMPLE  (.worked with .formula)
   ============================================================ */
.cnpnp .worked {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:30px 34px; margin:20px auto 0;
}
.cnpnp .worked h3 {
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted2); margin:28px 0 10px;
}
.cnpnp .worked > h3:first-child { margin-top:0; }
.cnpnp .worked p { color:var(--ink2); }
.cnpnp .worked .formula {
  font-family:var(--mono); font-size:15px; line-height:1.6; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  padding:14px 18px; margin:0 0 8px; max-width:none; text-wrap:pretty;
}
.cnpnp .worked .formula strong {
  color:var(--orange); font-weight:700; font-size:1.08em; white-space:nowrap;
}
/* the conclusion lines (result of a step) get a stronger frame */
.cnpnp .worked .formula:has(strong) {
  border-left:3px solid var(--orange); background:rgba(199,91,34,.05);
}

/* ============================================================
   7 - TOKEN BOX  (honest note + optional diagram)
   ============================================================ */
.cnpnp .token-box { background:var(--paper2); }
.cnpnp .token-box h2 { color:var(--ink); }
.cnpnp .token-box .diagram-wrap {
  max-width:var(--w-wide); margin:24px 0 0; padding-inline:0;
}
.cnpnp .token-box .diagram-wrap > .diagram {
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:32px 30px 22px;
}
.cnpnp .token-box .figcap {
  font-family:var(--mono); font-size:13.5px; color:var(--muted2); line-height:1.55;
  margin:16px 0 0; max-width:76ch; text-align:left; text-wrap:pretty;
}

/* ============================================================
   8 - GUARDRAIL  (callout wrapping a small prompt-card)
   ============================================================ */
.cnpnp .guardrail h2 { color:var(--ink); }
.cnpnp .guardrail h2::before {
  content:"GUARDRAIL"; display:block; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; color:var(--green); margin-bottom:8px;
}

/* ============================================================
   9 - TRUST / CTA STRIP  (dark conversion band)
   ============================================================ */
.cnpnp .trust-strip {
  background:var(--dark); color:var(--wheat); margin-top:0;
}
.cnpnp .trust-strip h2 { color:#FBF7EF; max-width:24ch; }
.cnpnp .trust-strip h2::before {
  content:""; display:block; width:30px; height:2px; background:var(--orange); margin-bottom:18px;
}
.cnpnp .trust-strip p { color:#C9C0AF; font-size:18px; line-height:1.62; }
.cnpnp .trust-strip p a { color:var(--orange-bright); }
.cnpnp .trust-strip .hero-cta { margin-top:26px; }
.cnpnp .trust-strip .btn-ghost { color:var(--wheat); border-color:#4A4138; }
.cnpnp .trust-strip .btn-ghost:hover { color:#fff; border-color:var(--orange); }

/* ============================================================
   10 - LIBRARY / RELATED CARDS  (rcards / rcard, .feature)
   ============================================================ */
.cnpnp .rcards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 auto 0;
}
.cnpnp .rcard {
  position:relative; display:flex; flex-direction:column; gap:9px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:22px 24px; text-decoration:none;
  color:var(--ink); overflow:hidden; isolation:isolate;
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cnpnp .rcard::before {
  content:""; position:absolute; top:0; left:0; height:3px; width:0; background:var(--orange);
  transition:width .22s var(--ease);
}
.cnpnp .rcard:hover { border-color:var(--line2); transform:translateY(-3px); box-shadow:0 26px 50px -34px rgba(26,23,20,.42); }
.cnpnp .rcard:hover::before { width:100%; }
.cnpnp .rcard .rc-t {
  font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.14; letter-spacing:-0.01em;
}
.cnpnp .rcard .rc-d { font-size:14.5px; line-height:1.55; color:var(--muted2); text-wrap:pretty; }
.cnpnp .rcard::after {
  content:"\2192"; font-family:var(--mono); color:var(--orange); font-size:15px; margin-top:2px; opacity:0;
  transform:translateX(-4px); transition:opacity .16s, transform .16s;
}
.cnpnp .rcard:hover::after { opacity:1; transform:translateX(0); }

/* the feature card (avoid-ai-hallucinations) spans full width and leads */
.cnpnp .rcard.feature {
  grid-column:1 / -1; flex-direction:row; align-items:center; gap:24px; flex-wrap:wrap;
  background:linear-gradient(180deg, var(--surface), var(--paper2));
  border-color:var(--line2); border-left:3px solid var(--orange); padding:28px 32px;
}
.cnpnp .rcard.feature .rc-t { font-size:24px; flex:1 1 auto; }
.cnpnp .rcard.feature .rc-d { font-size:15.5px; flex:2 1 320px; color:var(--ink2); }
.cnpnp .rcard.feature::after { align-self:center; font-size:20px; opacity:1; transform:none; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:900px) {
  .cnpnp .rcards { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .cnpnp .rcards { grid-template-columns:1fr; }
  .cnpnp .rcard.feature { flex-direction:column; align-items:flex-start; }
  .cnpnp .worked { padding:24px 20px; }
  .cnpnp .prompt-card .prompt-text { font-size:13px; }
  .cnpnp .svc-hero { padding:56px 0 24px; }
}

/* ============================================================
   ============================================================
   PART A ELEVATION  (v3)
   Give each section its own identity, the way /how-we-work/ does:
   background rhythm + at least one dark band, a numbered spine,
   a real result box, a bolder hero motif, deeper prompt cards.
   All keyed off existing classes + JS-stamped section tags, so the
   content HTML never changes.
   ============================================================
   ============================================================ */

/* ---- 1 · BACKGROUND RHYTHM ----------------------------------
   JS stamps data-band on each top-level section. Defaults to paper;
   surface / surface2 / dark create the alternation. */
.cnpnp.ai-hub > section[data-band="surface"],
.cnpnp.ai-prompt > section[data-band="surface"] { background:var(--surface); }
.cnpnp.ai-hub > section[data-band="surface2"],
.cnpnp.ai-prompt > section[data-band="surface2"] { background:var(--surface2); }
.cnpnp.ai-hub > section[data-band="dark"],
.cnpnp.ai-prompt > section[data-band="dark"] { background:var(--dark); }
/* when two coloured bands meet, keep one hairline only */
.cnpnp.ai-hub > section[data-band] + section[data-band],
.cnpnp.ai-prompt > section[data-band] + section[data-band] { border-top:0; }
.cnpnp.ai-hub > section[data-band="dark"],
.cnpnp.ai-prompt > section[data-band="dark"] { border-top:0; }

/* ---- 2 · NUMBERED SPINE -------------------------------------
   The existing .section-num markers become a chained spine: a small
   orange numeral, a hairline, the label, plus a vertical connector
   dropping toward the next marker. */
.cnpnp .section-num {
  position:relative; display:flex; align-items:center; gap:14px; margin:0 0 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2);
}
.cnpnp .section-num .n {
  font-size:11px; font-weight:600; color:var(--orange); letter-spacing:.08em;
  font-variant-numeric:tabular-nums; line-height:1;
}
.cnpnp .section-num .rule { width:34px; height:1px; background:var(--line2); display:inline-block; }
/* vertical connector tick rising into each marker */
.cnpnp .section-num::before {
  content:""; position:absolute; left:0; top:-26px; width:1px; height:20px;
  background:linear-gradient(var(--line2), transparent);
}
.cnpnp.ai-hub > section[data-band="dark"] .section-num,
.cnpnp.ai-prompt > section[data-band="dark"] .section-num { color:#A99D8A; }
.cnpnp.ai-hub > section[data-band="dark"] .section-num .n,
.cnpnp.ai-prompt > section[data-band="dark"] .section-num .n { color:var(--orange-bright); }
.cnpnp.ai-hub > section[data-band="dark"] .section-num .rule,
.cnpnp.ai-prompt > section[data-band="dark"] .section-num .rule { background:#4A4138; }

/* ---- 3 · WORKED EXAMPLE: real result box --------------------
   The conclusion .formula lines (those containing <strong>) become a
   result card with a big orange figure. */
.cnpnp .worked .formula:has(strong) {
  position:relative; border:1px solid var(--line2); border-left:4px solid var(--orange);
  background:#fff; border-radius:11px; padding:18px 22px; margin:6px 0 14px;
  font-size:16px; color:var(--ink2); line-height:1.55;
  box-shadow:0 14px 30px -26px rgba(199,91,34,.5);
}
.cnpnp .worked .formula:has(strong) strong {
  color:var(--orange); font-weight:700; font-size:1.34em; letter-spacing:-0.01em;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* the "Assumption flagged" last line is a quieter, neutral box */
.cnpnp .worked .formula:has(strong):last-child {
  border-left-color:var(--muted2); box-shadow:none; background:var(--paper);
}
.cnpnp .worked .formula:has(strong):last-child strong { color:var(--ink); font-size:1em; }

/* ---- 4 · PROMPT CARD: more presence -------------------------
   Orange top accent, a theme dot in the chrome bar, deeper shadow. */
.cnpnp.ai-hub .prompt-card, .cnpnp.ai-prompt .prompt-card {
  box-shadow:0 40px 80px -50px rgba(20,17,13,.9), 0 2px 0 rgba(255,255,255,.02) inset;
}
.cnpnp .prompt-card::after {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--orange), var(--orange-bright) 60%, transparent);
  z-index:3;
}
.cnpnp .prompt-card::before { padding-left:34px; }
.cnpnp .prompt-card .chrome-dot {
  position:absolute; top:16px; left:18px; width:9px; height:9px; border-radius:50%;
  background:var(--orange); z-index:3; box-shadow:0 0 0 3px rgba(199,91,34,.18);
}

/* ---- 5 · PLATFORM TABLE in its own band ---------------------- */
.cnpnp.ai-hub > section[data-section="platform"] .cnp-table { box-shadow:0 26px 50px -40px rgba(20,17,13,.4); }

/* ---- 6 · DARK BAND text colours ------------------------------ */
.cnpnp.ai-hub > section[data-band="dark"] :where(p,li),
.cnpnp.ai-prompt > section[data-band="dark"] :where(p,li) { color:#C9C0AF; }
.cnpnp.ai-hub > section[data-band="dark"] :where(h2,h3),
.cnpnp.ai-prompt > section[data-band="dark"] :where(h2,h3) { color:#FBF7EF; }
.cnpnp.ai-hub > section[data-band="dark"] .clean-list li::before,
.cnpnp.ai-prompt > section[data-band="dark"] .clean-list li::before { background:var(--orange-bright); }
.cnpnp.ai-hub > section[data-band="dark"] strong,
.cnpnp.ai-prompt > section[data-band="dark"] strong { color:#FBF7EF; }
.cnpnp.ai-hub > section[data-band="dark"] a:not(.btn):not(.btn-primary):not(.btn-ghost),
.cnpnp.ai-prompt > section[data-band="dark"] a:not(.btn):not(.btn-primary):not(.btn-ghost) { color:var(--orange-bright); }

/* ---- 7 · HERO MOTIF (hub): animated draw on load ------------- */
.cnpnp .hero-motif svg { max-width:860px; }
@media (prefers-reduced-motion:no-preference) {
  .cnpnp .hero-motif .draw { stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200);
    animation:cnp-draw 1.1s var(--ease) .25s forwards; }
  .cnpnp .hero-motif .fade { opacity:0; animation:cnp-fade .6s ease .6s forwards; }
}
@keyframes cnp-draw { to { stroke-dashoffset:0; } }
@keyframes cnp-fade { to { opacity:1; } }

/* ---- 8 · TRUST / CTA band weight (match cta-band) ------------ */
.cnpnp .trust-strip { padding-block:clamp(58px,7vw,92px); }
.cnpnp .trust-strip h2 { font-size:var(--t-h2); }

/* ---- 9 · GUARDRAIL band (subs): differentiated ground -------- */
.cnpnp.ai-prompt > section.guardrail { background:var(--surface2); }


/* rail responsivo a condizer com o site (.wrap praxis: 1080->20px, 480->16px) */
@media (max-width:1080px){ .cnpnp.ai-hub, .cnpnp.ai-prompt { --rail:20px; } }
@media (max-width:480px){ .cnpnp.ai-hub, .cnpnp.ai-prompt { --rail:16px; } }

/* RAIL UNIFORME: cada seccao inset igual ao .container do site (1240 centrado + 40px).
   Background full-width (banda), conteudo alinhado ao header (96px..1256px @1366). */
.cnpnp.ai-hub > section, .cnpnp.ai-prompt > section,
.cnpnp.ai-hub > .svc-hero, .cnpnp.ai-prompt > .svc-hero {
  padding-inline: max(40px, calc((100% - var(--w-wide)) / 2 + 40px));
}
/* os filhos ja nao precisam de margin-inline:auto nem padding-inline proprio */
.cnpnp.ai-hub > section > :where(h2,h3,p,ul,ol,.section-num,.worked,.rcards,.table-wrap,.hero-cta,.inshort,.prompt-card,.diagram-wrap),
.cnpnp.ai-prompt > section > :where(h2,h3,p,ul,ol,.section-num,.worked,.rcards,.table-wrap,.hero-cta,.inshort,.prompt-card,.diagram-wrap){
  margin-inline:0; padding-inline:0;
}
.cnpnp.ai-hub .wrap, .cnpnp.ai-prompt .wrap, .cnpnp.ai-hub .narrow, .cnpnp.ai-prompt .narrow,
.cnpnp .svc-hero .wrap { padding-inline:0 !important; margin-inline:0 !important; max-width:none !important; }