/* ============================================================================
   Pipeline · Craft pass (v1)
   ----------------------------------------------------------------------------
   Purpose: give the page ONE typographic voice, ONE neutral ramp, ONE button
   geometry, and truthful grid alignment. No structural redesign.

   Why this file exists
   --------------------
   The page had drifted into seven eyebrow classes, eight button geometries,
   three different near-blacks, cool greys on a warm paper, and every heading
   set in Inter 600 at one of two sizes. Instrument Serif was declared in the
   design system and used zero times.

   Design decisions encoded here
   -----------------------------
   1. TWO VOICES. Inter carries structure. Instrument Serif italic carries the
      authorial line — used exactly three times on the page so it reads as a
      signature, not a gimmick.
   2. ONE NEUTRAL RAMP, warm. Paper -> ink, both warm. No cool blue-greys.
   3. NUMBERS GET DISPLAY SIZE. A statistic set at body size is decoration.
   4. ALIGNMENT IS TRUTHFUL. Baselines and footers line up across columns.
   5. THREE BUTTON GEOMETRIES ONLY. Primary pill, text link, ghost-on-dark.
   ========================================================================== */

.pipeline-finished{
  /* --- neutral ramp: warm ------------------------------------------------ */
  --ink:oklch(20% .012 70);
  --ink-soft:oklch(37% .010 70);
  --ink-mute:oklch(49% .009 72);
  --rule:oklch(88% .009 75);
  --rule-strong:oklch(80% .011 75);
  --paper:oklch(98.4% .006 80);
  --night:oklch(20% .010 72);
  --night-soft:oklch(26% .010 72);

  --text-primary:var(--ink);
  --text-secondary:var(--ink-soft);
  --text-tertiary:var(--ink-mute);
  --border:var(--rule);

  /* --- type scale: fluid, round, role-named ------------------------------ */
  --fs-display:clamp(37px,5.05vw,72px);
  --fs-h2:clamp(31px,3.25vw,50px);
  --fs-h2-sm:clamp(26px,2.35vw,34px);
  --fs-h3:clamp(22px,2vw,29px);
  --fs-lead:clamp(16.5px,1.15vw,18.5px);
  --fs-figure:clamp(36px,3.5vw,46px);
  --fs-meta:13px;
  --fs-micro:11px;

  /* tracking collapses as size grows — never one value for all sizes */
  --tr-display:-.038em;
  --tr-h2:-.028em;
  --tr-h3:-.018em;

  /* --- rhythm ------------------------------------------------------------ */
  --section-y:clamp(68px,7vw,108px);
  --panel-radius:16px;
  --card-radius:12px;
}

/* ---------------------------------------------------------------------------
   1. TYPOGRAPHY — the two-voice system
   ------------------------------------------------------------------------ */

.pipeline-finished .hero-title{
  font-size:var(--fs-display);
  line-height:1.03;
  letter-spacing:var(--tr-display);
  max-width:15ch;
  text-wrap:balance;
}

/* The authorial line. Serif italic, slightly larger than the sans above it —
   optical sizing compensates for the serif's lower stroke contrast. */
.pipeline-finished .story-hero-finish{
  display:block;
  margin-top:.08em;
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:1.07em;
  line-height:1;
  letter-spacing:-.012em;
  color:var(--ink);
}

.pipeline-finished .section-title{
  font-size:var(--fs-h2);
  line-height:1.07;
  letter-spacing:var(--tr-h2);
  max-width:23ch;
}

/* Utility sections sit one step down so the page has two levels, not seven
   subtly different ones. */
.pipeline-finished :is(#how,#stack,#fit,#faq,#book) .section-title{
  font-size:var(--fs-h2-sm);
  letter-spacing:var(--tr-h3);
  max-width:26ch;
}

/* Second appearance of the serif voice — one only. */
.pipeline-finished #growth-problem-title .dim{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:1.04em;
  letter-spacing:-.012em;
  color:var(--ink);
}

/* Third and last appearance: the closing statement. */
.pipeline-finished .dark-final h2{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(31px,3.6vw,48px);
  line-height:1.06;
  letter-spacing:-.012em;
  max-width:24ch;
}

.pipeline-finished .story-audience-card h3,
.pipeline-finished .story-workstream-copy h3{
  font-size:var(--fs-h3);
  line-height:1.12;
  letter-spacing:var(--tr-h3);
  font-weight:600;
  text-wrap:balance;
}

.pipeline-finished .lede,
.pipeline-finished .story-section-intro .lede{
  font-size:var(--fs-lead);
  line-height:1.6;
  letter-spacing:-.006em;
  color:var(--ink-soft);
  max-width:54ch;
}

/* One eyebrow voice. Seven classes reduced to one appearance. */
.pipeline-finished :is(.story-pain-eyebrow,
                       .story-research-eyebrow,
                       .story-audience-eyebrow,
                       .pq-difference-kicker,
                       .sec-kicker){
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 18px;
  line-height:1.4;
}
/* .story-section-intro is a two-column grid. A kicker inserted as a sibling
   would claim column one and push the heading into column two, so it has to
   span the full row. The grid's row-gap is the same as its column gap, which
   would strand the kicker 70px above its heading — collapse it on desktop and
   let the kicker carry its own spacing. */
.pipeline-finished .story-section-intro>.sec-kicker{grid-column:1/-1}
@media(min-width:1001px){
  .pipeline-finished .story-section-intro{row-gap:0}
}
.pipeline-finished #why-different .pq-difference-kicker{color:oklch(73% .010 75)}

/* Numerals are tabular everywhere they can be compared. */
.pipeline-finished :is(.program-price,.program-monthly,.program-total,.program-meeting-fee,
                       .story-deal-proof strong,.pqroi,.story-research-finding strong){
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"ss01" 1;
}

/* ---------------------------------------------------------------------------
   2. NUMBERS CARRY WEIGHT
   ------------------------------------------------------------------------ */

/* A statistic at body size is decoration. Give it display presence and let the
   sentence read as the explanation beneath it. */
.pipeline-finished .story-research-finding{
  font-size:15.5px;
  line-height:1.62;
  color:var(--ink-soft);
  margin:0;
}
.pipeline-finished .story-research-finding strong{
  display:block;
  font-size:var(--fs-figure);
  font-weight:600;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--ink);
  margin:0 0 12px;
}
/* The implication is our advice, not the evidence — it needs air and a step
   of contrast so the two do not read as one run-on paragraph. */
.pipeline-finished .story-research-implication{
  margin:16px 0 0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink);
  padding-left:14px;
  border-left:2px solid var(--accent);
}

.pipeline-finished .program-price{
  font-size:clamp(38px,3.8vw,52px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.045em;
  color:var(--ink);
}

/* Founder proof: ink, not a third orange block. Restraint protects the accent. */
.pipeline-finished .story-deal-proof strong{
  color:var(--ink);
  font-size:clamp(26px,2.2vw,32px);
  letter-spacing:-.03em;
  font-weight:600;
}
.pipeline-finished .story-deal-proof>div{border-top:1px solid var(--rule-strong);padding-top:14px}
.pipeline-finished .story-deal-proof span{display:block;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--ink-mute)}

/* ---------------------------------------------------------------------------
   3. ALIGNMENT THAT IS ACTUALLY TRUE
   ------------------------------------------------------------------------ */

/* Research: icons of equal optical size, sources anchored to a shared baseline. */
.pipeline-finished .story-research-findings{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,46px);
  align-items:stretch;
}
.pipeline-finished .story-research-findings>article{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.pipeline-finished .story-research-icon{
  width:26px;height:26px;
  stroke-width:1.5;
  margin:0 0 22px;
  display:block;
  flex:0 0 auto;
}
.pipeline-finished .story-research-findings .story-research-source{
  margin-top:auto;
  padding-top:22px;
}
.pipeline-finished .story-research-source a{
  font-size:12.5px;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
/* direct child only — an arrow glyph inside the link was being turned into a
   block and dropping onto its own line */
.pipeline-finished .story-research-source > span{
  display:block;
  margin-top:5px;
  font-size:12px;
  line-height:1.5;
  color:var(--ink-mute);
  text-wrap:pretty;
}
.pipeline-finished .story-research-source a span{white-space:nowrap}

/* Business types: four cards must share a baseline, not four private ones. */
.pipeline-finished .story-audience-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  grid-auto-rows:auto;
}
.pipeline-finished .story-audience-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--card-radius);
  border:1px solid var(--rule);
  background:var(--paper);
}
@supports (grid-template-rows:subgrid){
  .pipeline-finished .story-audience-card{
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 4;
    row-gap:0;
  }
}
.pipeline-finished .story-audience-category{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 20px;
}
.pipeline-finished .story-audience-category svg{
  width:21px;height:21px;
  stroke-width:1.5;
  flex:0 0 auto;
}
.pipeline-finished .story-audience-category p{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0;
}
.pipeline-finished .story-audience-card h3{margin:0 0 16px}
.pipeline-finished .story-audience-benefit{
  font-size:15.5px;
  line-height:1.62;
  color:var(--ink-soft);
  margin:0 0 22px;
}
.pipeline-finished .story-audience-note{
  margin:auto 0 0;
  padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:12px;
  line-height:1.5;
  color:var(--ink-mute);
}
/* The highlight was arbitrary — one card in four, with no stated reason.
   Replace the peach fill with a hairline accent and a quiet label. */
.pipeline-finished .story-audience-card--technical{
  background:var(--paper);
  border-color:var(--rule-strong);
  box-shadow:inset 0 2px 0 var(--accent);
}

/* ---------------------------------------------------------------------------
   3b. PROGRAM ROWS — number them, don't decorate them
   ------------------------------------------------------------------------ */

/* The three rows carried tiny glyph icons, one of which was missing entirely
   and the other two read as meaningless. Replace them with the numbered
   index already used in the technology section, so the motif is shared. */
.pipeline-finished .story-workstreams{counter-reset:ws}
.pipeline-finished .story-workstreams article{
  counter-increment:ws;
  align-items:center;
}
.pipeline-finished .story-workstream-copy>img{display:none}
.pipeline-finished .story-workstream-copy::before{
  content:counter(ws,decimal-leading-zero) " /";
  display:block;
  margin-bottom:16px;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.14em;
  color:var(--accent);
}
.pipeline-finished .story-workstream-copy h3{margin-top:0}
.pipeline-finished .story-workstream-copy p{max-width:44ch}

/* ---------------------------------------------------------------------------
   4. ONE BUTTON GEOMETRY, THREE ROLES
   ------------------------------------------------------------------------ */

.pipeline-finished :is(.btn,.btn--primary,.btn--ghost,.dark-cta__button){
  border-radius:var(--radius-pill);
  min-height:48px;
  padding:0 26px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.01em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .18s var(--ease-premium),background .18s ease,color .18s ease,border-color .18s ease;
}
.pipeline-finished .btn--primary,
.pipeline-finished .dark-cta__button{
  background:var(--accent);
  color:#fff;
  border:1px solid transparent;
}
.pipeline-finished .btn--primary:hover,
.pipeline-finished .dark-cta__button:hover{background:oklch(58% .19 40)}
.pipeline-finished .btn--ghost{
  background:transparent;
  border:1px solid var(--rule-strong);
  color:var(--ink);
}
.pipeline-finished #why-different .btn--ghost,
.pipeline-finished .dark-final .btn--ghost{
  border-color:oklch(46% .010 75)!important;
  color:oklch(96% .008 80)!important;
}
.pipeline-finished .text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:2px;
  transition:border-color .18s ease;
}
.pipeline-finished .text-link:hover{border-color:var(--ink)}

/* ---------------------------------------------------------------------------
   5. SURFACES — one near-black, one radius language
   ------------------------------------------------------------------------ */

.pipeline-finished :is(.dark-cta,.dark-principle,.dark-final){
  background:var(--night)!important;
  border-radius:var(--panel-radius)!important;
  color:oklch(97% .008 80);
}
.pipeline-finished #why-different{
  --bg-page:var(--night);
  --text-primary:oklch(97% .008 80);
  --text-secondary:oklch(80% .010 75);
  --border:oklch(40% .010 75);
  background:var(--night);
}

/* ---------------------------------------------------------------------------
   6. DISCLOSURES — a control, not a default triangle
   ------------------------------------------------------------------------ */

.pipeline-finished :is(.pc-details,.finish-comparison,.finish-workspace,.pqroi-breakdown,.program-dna-checks,.faq-item)>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  list-style:none;
  cursor:pointer;
  min-height:56px;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
}
.pipeline-finished :is(.pc-details,.finish-comparison,.finish-workspace,.pqroi-breakdown,.program-dna-checks,.faq-item)>summary::-webkit-details-marker{display:none}
.pipeline-finished :is(.pc-details,.finish-comparison,.finish-workspace,.pqroi-breakdown,.program-dna-checks,.faq-item)>summary::after{
  content:"";
  width:11px;height:11px;
  flex:0 0 auto;
  border-right:1.5px solid var(--ink-mute);
  border-bottom:1.5px solid var(--ink-mute);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .2s var(--ease-premium),border-color .2s ease;
}
.pipeline-finished :is(.pc-details,.finish-comparison,.finish-workspace,.pqroi-breakdown,.program-dna-checks,.faq-item)[open]>summary::after{
  transform:rotate(225deg) translateY(-3px);
  border-color:var(--accent);
}
/* FAQ questions are set at 18px/600 by their own rule; keep the chevron from
   inheriting that weight. */
.pipeline-finished .faq-item>summary{font-size:18px;font-weight:600;letter-spacing:-.015em}
.pipeline-finished .faq-item>p{color:var(--ink-soft);font-size:15.5px;line-height:1.65;padding-bottom:24px;max-width:70ch}

/* The FAQ list was capped at 860px and left floating against 400px of empty
   page. Give it the same two-column rhythm as the rest of the page. */
@media(min-width:1001px){
  .pipeline-finished #faq>.container{
    display:grid;
    grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
    gap:clamp(32px,4.5vw,80px);
    align-items:start;
  }
  .pipeline-finished #faq .section-head{margin-bottom:0;position:sticky;top:112px;align-self:start}
  .pipeline-finished #faq .reveal{max-width:none!important}
}
/* the old text plus signs are now redundant */
.pipeline-finished :is(.finish-comparison,.finish-workspace)>summary>span[aria-hidden]{display:none}
.pipeline-finished #why-different :is(.pqroi-breakdown,.finish-workspace)>summary{color:oklch(96% .008 80)}

/* ---------------------------------------------------------------------------
   7. NAVIGATION AND ANCHORS
   ------------------------------------------------------------------------ */

/* Translucent paper over a near-black panel produced a grey band across the
   dark sections. Slightly denser paper plus a real hairline fixes the read. */
.pipeline-finished .site-nav{
  background:oklch(98.4% .006 80 / .95);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.15) blur(14px);
}
.pipeline-finished .nav-inner{height:100%}
.pipeline-finished .nav-links a{
  font-size:14.5px;
  letter-spacing:-.006em;
  color:var(--ink-soft);
  transition:color .16s ease;
}
.pipeline-finished .nav-links a:hover{color:var(--ink)}
/* The shared button rule re-showed the nav CTA where the header had already
   collapsed to a menu, and it overlapped the menu control. */
@media(max-width:820px){
  .pipeline-finished .site-nav .btn{display:none!important}
}

/* The featured card tinted its secondary action orange while its neighbours
   stayed ink — read as a bug rather than emphasis. */
.pipeline-finished #tiers .text-link{color:var(--ink)}
.pipeline-finished .program-calculate{
  background:none;
  border:0;
  border-bottom:1px solid var(--rule-strong);
  padding:0 0 2px;
  cursor:pointer;
  font:500 15px/1.4 var(--font-sans);
  letter-spacing:-.01em;
  color:var(--ink)!important;
}
.pipeline-finished .program-calculate:hover{border-color:var(--ink)}

/* Anchor jumps used to land under the sticky bar. */
.pipeline-finished :is(section[id],[id="clients"]){scroll-margin-top:104px}

/* ---------------------------------------------------------------------------
   8. IMAGE TREATMENT
   ------------------------------------------------------------------------ */

/* The portrait was shot on a cool grey seamless, which fights the warm paper.
   A touch of sepia reconciles it without faking a colour grade. */
.pipeline-finished .story-founder-layout figure img{
  filter:sepia(.07) saturate(.96) contrast(1.02);
  border-radius:10px;
}
.pipeline-finished .story-founder-layout figcaption{
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  margin-top:16px;
}
.pipeline-finished .story-founder-layout figcaption span{
  display:block;
  margin-top:3px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:500;
}

/* ---------------------------------------------------------------------------
   9. SECTION RHYTHM
   ------------------------------------------------------------------------ */

.pipeline-finished .section{padding-block:var(--section-y)}
.pipeline-finished :is(#stack,#faq){padding-block:clamp(52px,5vw,72px)}
.pipeline-finished .story-section-intro{margin-bottom:clamp(28px,3.4vw,44px)}

/* ---------------------------------------------------------------------------
   10. FINAL DETAILS
   ------------------------------------------------------------------------ */

/* The hero illustration is a JPEG with its own near-white plate. Fighting it
   with a blend left a faint rectangle; instead, commit to it as an image
   plate with a hairline so the edge reads as deliberate. */
.pipeline-finished .hero-media .visual{
  border-radius:12px;
  box-shadow:0 0 0 1px var(--rule);
  background:#fdfcf8;
}
/* The wave field read as decoration competing with the headline. */
.pipeline-finished #growth-kickstart .wave-layer{opacity:.32}

/* Timeline lanes: same geometry, warm neutral instead of a dull mid-grey. */
.pipeline-finished .story-outbound-lane{
  background:oklch(91% .008 78);
  border-radius:6px;
  overflow:hidden;
}
.pipeline-finished .story-content-lane{border-radius:6px}
.pipeline-finished .story-outbound-lane>span{font-size:14px;letter-spacing:-.005em}

/* Restored editorial illustrations — real assets, captioned. */
.pipeline-finished .story-illustration{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:#fdfcf8;
  box-shadow:0 0 0 1px var(--rule);
}
.pipeline-finished .story-illustration img{display:block;width:100%;height:auto}
.pipeline-finished .story-illustration figcaption{
  padding:10px 14px 12px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
  border-top:1px solid var(--rule);
}

/* ---------------------------------------------------------------------------
   15. PROOF STRIP — client evidence directly before pricing
   Pricing sits at 37% of page depth and the client logo wall at 69%. These two
   cards put named, already-published results in front of the price instead of
   behind it. Numbers match the case study pages they link to.
   ------------------------------------------------------------------------ */
.pipeline-finished .proof-strip{
  padding-top:clamp(48px,6vw,80px);
  padding-bottom:clamp(48px,6vw,80px);
}
.pipeline-finished .proof-strip-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:32px;
}
.pipeline-finished .proof-strip-card{
  display:block;
  padding:28px;
  border:1px solid var(--rule-strong);
  border-radius:var(--panel-radius);
  background:var(--paper);
  text-decoration:none;
  color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.pipeline-finished .proof-strip-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.pipeline-finished .proof-strip-metric{
  margin:0 0 12px;
  font:600 clamp(19px,1.6vw,23px)/1.25 var(--font-sans);
  letter-spacing:-.02em;
  color:var(--ink);
}
.pipeline-finished .proof-strip-text{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.6;
  color:var(--text-secondary);
}
.pipeline-finished .proof-strip-link{
  font:500 14px/1 var(--font-sans);
  color:var(--accent);
}
.pipeline-finished .tiers-more{
  margin:28px 0 0;
  font:400 15px/1.5 var(--font-sans);
}
.pipeline-finished .tiers-more a{
  color:var(--accent);
  text-decoration:none;
}
.pipeline-finished .tiers-more a:hover{text-decoration:underline}
@media(max-width:768px){
  .pipeline-finished .proof-strip-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   14. #why-different workspace — one screen visible, extras folded
   The workspace viewer used to sit inside a collapsed <details>, so the product
   screenshot was invisible until someone expanded it. It now renders inline;
   only the four extra screens stay behind "More of PQ Intel". The controls also
   needed dark-panel colours, since they inherited a light surface.
   ------------------------------------------------------------------------ */
.pipeline-finished .finish-workspace{
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid oklch(40% .010 75);
}
.pipeline-finished .finish-workspace-label{
  margin:0 0 20px;
  font:600 13px/1.4 var(--font-sans);
  letter-spacing:.02em;
  color:oklch(0.82 0.012 75);
}
.pipeline-finished #why-different .pq-intel-choices button{
  color:oklch(0.90 0.010 80);
  background:oklch(0.28 0.010 72);
  border-color:oklch(0.40 0.010 75);
}
.pipeline-finished #why-different .pq-intel-choices button[aria-pressed="true"]{
  color:oklch(0.99 0.005 80);
  background:oklch(0.78 0.15 48);
  border-color:oklch(0.78 0.15 48);
}
.pipeline-finished #why-different .pq-intel-caption h3{color:oklch(0.97 0.008 80)}
.pipeline-finished #why-different .pq-intel-caption p{color:oklch(0.82 0.012 75)}
.pipeline-finished #why-different .pq-intel-figure figcaption{color:rgba(255,255,255,.55)}
.pipeline-finished #why-different .pq-intel-figure img{
  border-radius:10px;
  border:1px solid oklch(0.40 0.010 75);
}
.pipeline-finished #why-different .pq-intel-more>summary{color:oklch(0.90 0.010 80)}

/* ---------------------------------------------------------------------------
   13. STAGE SECTIONS — background matched to each illustration's plate
   The artwork bleeds past the container (.split-visual .visual is 106% wide),
   so the section background has to be the illustration's own plate colour or
   the image reads as a pasted card. Values sampled from the JPEG corners.
   ------------------------------------------------------------------------ */
.pipeline-finished #stage-social{background:#FBF2EB}
.pipeline-finished #stage-outreach{background:#FDF1E5}
.pipeline-finished #stage-search{background:#FDFDFD}

/* ---------------------------------------------------------------------------
   12. #why-different — restored to its pre-styling treatment
   The section markup was restored verbatim from deployment 812d098d (the last
   deploy before this craft layer existed). These values are measured from that
   deployment, not estimated, so the section renders exactly as it did then:
   an orange sentence-case kicker, and a lede at oklch(0.82) rather than the
   oklch(0.37) this layer was forcing, which was unreadable on the dark panel.
   ------------------------------------------------------------------------ */
.pipeline-finished #why-different{background:oklch(0.23 0.012 70)}

.pipeline-finished #why-different .pq-difference-kicker{
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:600;
  line-height:1.65;
  letter-spacing:normal;
  text-transform:none;
  color:oklch(0.78 0.15 48);
  margin:0 0 16px;
}

.pipeline-finished #why-different .pq-difference-head .lede{
  color:oklch(0.82 0.012 75);
  font-size:clamp(1.05rem,1.15vw,1.25rem);
  line-height:1.55;
  letter-spacing:normal;
  max-width:572px;
}

.pipeline-finished #why-different .section-title{
  line-height:1.12;
  letter-spacing:-.04em;
}

/* ---------------------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------------------ */

@media(max-width:1000px){
  .pipeline-finished .story-audience-grid{grid-template-columns:1fr;gap:16px}
  .pipeline-finished .story-audience-card{
    display:flex!important;
    grid-row:auto!important;
    grid-template-rows:none!important;
  }
  .pipeline-finished .story-research-findings{grid-template-columns:1fr;gap:32px}
  .pipeline-finished .story-research-findings .story-research-source{margin-top:0;padding-top:18px}
}

@media(max-width:760px){
  .pipeline-finished .hero-title{max-width:100%;text-wrap:pretty}
  .pipeline-finished .story-hero-finish{font-size:1.02em;white-space:normal}
  .pipeline-finished .section-title{max-width:100%;text-wrap:pretty}
  .pipeline-finished .dark-final h2{max-width:100%}
  .pipeline-finished .story-deal-proof>div{padding-top:12px}
  /* wide mono tracking forced these labels onto two lines */
  .pipeline-finished .story-audience-category p{font-size:10px;letter-spacing:.08em}
  .pipeline-finished .program-target{text-wrap:pretty}
}

@media(prefers-reduced-motion:reduce){
  .pipeline-finished :is(.btn,.text-link,summary::after){transition:none}
}