/* ============================================================
   MATTERA v2 · Sections (forest theme)
   ============================================================ */

/* ---------- Section heading ---------- */
.sec-head { max-width: 800px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 22px; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head p { margin: 20px 0 0; }

/* Drop the leading eyebrow dash on these section eyebrows (all views). */
.problem .sec-head .eyebrow::before,
.solution .split-copy .eyebrow::before,
.doc-intel .sec-head .eyebrow::before,
.features .sec-head .eyebrow::before,
.process .sec-head .eyebrow::before,
.results .sec-head .eyebrow::before { display: none; }

/* ---------- Problem ---------- */
.problem { position: relative; }
/* Constrain the sec-head to the left half of the container so its right edge
   aligns with the hero's center divider (left: 50%), keeping the right half
   clear for the clock. */
.problem .sec-head { max-width: 50%; }
.problem .sec-head h2 { max-width: 22ch; }
.problem .sec-head p.lead { max-width: 56ch; }
.clock-wrap {
  /* Centered in the right column — midpoint between center divider and right gutter */
  position: absolute;
  left: calc(75% - var(--frame) / 2);
  transform: translateX(-50%);
  top: calc(clamp(105px, 8vw, 155px) + 15px);
  width: clamp(345px, 30vw, 460px);
  aspect-ratio: 300 / 215;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.problem .sec-head, .problem .problem-grid { position: relative; z-index: 1; }

/* SVG clock face */
.clock-face-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.clock-num {
  font-family: 'Michroma', var(--sans);
  font-weight: 400;
  font-size: 29px;
  fill: rgb(var(--court));
  stroke: rgb(var(--court));
  stroke-width: 1.2;
  paint-order: stroke fill;
}

.clock-starburst { filter: brightness(0); opacity: 0.35; }
/* numbers + outer dots pick up the court azure (rail color) */
.clock-dot       { fill: rgb(var(--court)); opacity: 0.45; }
.clock-num       { opacity: 0.55; }
.clock-svg__hand--minute path,
.clock-svg__hand--hour path { fill: #0B1622; }

@media (max-width: 760px) {
  .sec-head-row { display: block; }
  .clock-wrap { display: none; }
}

.problem-grid { margin-top: clamp(90px, 10vw, 140px); display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.problem-card { padding: clamp(26px, 2.6vw, 38px); display: flex; flex-direction: column; gap: 14px; min-height: 268px; border-right: 1px solid var(--line); transition: background .3s var(--ease); }
.problem-card:last-child { border-right: none; }
.problem-card:hover { background: rgba(221,232,248,.03); }
.pc-num { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--ember); }
.pc-title { font-family: var(--sans); font-size: clamp(20px, 1.9vw, 25px); font-weight: 500; letter-spacing: -.01em; line-height: 1.14; margin: 0; color: var(--cream); }
.pc-body { font-size: 14.5px; color: var(--sage); line-height: 1.58; margin: 0; }
.pc-stat { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.pc-stat b { font-family: var(--sans); font-size: 30px; font-weight: 600; color: var(--cream); letter-spacing: -.02em; line-height: 1; }
.pc-stat span { font-family: var(--mono); font-size: 11px; color: var(--sage-dim); letter-spacing: .02em; }

/* ---------- Document Intelligence ---------- */
.doc-intel-stage { margin-top: clamp(48px, 6vw, 80px); height: 380px; position: relative; margin-inline: calc(-1 * var(--edge-offset)); }

/* scanner wrapper — mask fades content to transparent at edges instead of
   painting a colored overlay, so there is no visible box boundary */
.di-wrap {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 clamp(48px, 9vw, 130px), #000 calc(100% - clamp(48px, 9vw, 130px)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0%, #000 clamp(48px, 9vw, 130px), #000 calc(100% - clamp(48px, 9vw, 130px)), transparent 100%);
}
/* ambient glow left of scanner */
.di-glow { position: absolute; z-index: 3; pointer-events: none;
  top: calc(50% - 135px); bottom: calc(50% - 135px);
  left: calc(50% - 40px); right: 50%;
  background: linear-gradient(to left, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0.05) 60%, transparent 100%); }
/* scanner line */
.di-line { position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(50% - 135px); bottom: calc(50% - 135px);
  width: 1.5px; z-index: 4; pointer-events: none;
  background: #3B82F6;
  box-shadow: 0 0 3px rgba(59,130,246,0.6), 0 0 8px rgba(59,130,246,0.25); }
/* scroll container */
.di-outer { position: absolute; inset: 0; display: flex; align-items: center; z-index: 2; }
.di-strip { display: flex; align-items: center; gap: 44px; will-change: transform; }
/* card shell */
.di-card  { flex-shrink: 0; position: relative; width: 200px; height: 270px; }
.di-doc-layer, .di-code-layer { position: absolute; inset: 0; }
.di-doc-layer  { z-index: 2; }
.di-code-layer { z-index: 1; overflow: hidden; clip-path: inset(0 0 0 100%); }
/* paper doc card */
.di-doc-card, .di-code-card { width: 100%; height: 100%; position: relative; }
.di-doc-card-in {
  width: 100%; height: 100%; background: #fff; border: 1px solid #E0E0E0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
/* code output card */
.di-code-card-in {
  width: 100%; height: 100%; background: #F5F4F1; border: 1px solid #E5E3DE;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
/* corner fold */
.di-fold { position: absolute; top: 0; right: 0; width: 16px; height: 16px; pointer-events: none; }
/* skeleton elements */
.di-l   { flex-shrink: 0; height: 3px; background: #E0E0E0; border-radius: 0.5px; }
.di-sb  { flex-shrink: 0; height: 6px; background: #EBEBEB; border-radius: 0.5px; width: 100%; }
.di-gap { height: 3px; flex-shrink: 0; }
.di-hr  { height: 1px; background: #ECECEC; flex-shrink: 0; }
.di-hdr { padding: 12px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.di-sq  { width: 10px; height: 10px; background: #E0E0E0; border-radius: 1px; flex-shrink: 0; }
.di-rect { width: 28px; height: 10px; border: 1px solid #E0E0E0; border-radius: 1px; flex-shrink: 0; }
.di-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: hidden; }
/* code pre */
.di-pre { font-family: var(--mono); font-size: 9.5px; line-height: 13px; padding: 12px; height: 100%; margin: 0; white-space: pre; overflow: hidden; }
.di-k { color: #1E6B8A; } .di-s { color: #2D7A4F; } .di-n { color: #B45309; } .di-w { color: rgba(10,10,11,0.4); }
/* pdf table */
.di-tbl { border: 1px solid #E0E0E0; border-radius: 1px; overflow: hidden; margin-top: 6px; }
.di-tr  { display: flex; } .di-tr-b { border-bottom: 1px solid #ECECEC; }
.di-tc  { flex: 3; padding: 5px 6px; display: flex; align-items: center; }
.di-tc-l { flex: 2; border-right: 1px solid #ECECEC; }
.di-box { border: 1px solid #E0E0E0; border-radius: 1px; padding: 6px; display: flex; flex-direction: column; gap: 5px; flex: 1; margin-top: 6px; }
.di-pdf-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6px; flex-shrink: 0; }
.di-badge { width: 36px; height: 10px; background: #EBEBEB; border-radius: 1px; }
/* spreadsheet */
.di-grid { border: 1px solid #E0E0E0; border-radius: 1px; overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 4px; }
.di-thead { display: flex; border-bottom: 1px solid #D8D8D8; background: #FAFAF9; flex-shrink: 0; }
.di-chk-cell { width: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-right: 1px solid #E8E8E8; }
.di-chk  { width: 6px; height: 6px; border: 1px solid #D4D4D4; border-radius: 0.5px; }
.di-hcell { flex: 1; padding: 4px 3px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #E8E8E8; }
.di-hcell-l { flex: 1.3; background: #F0F0EE; border-right-color: #D8D8D8; justify-content: flex-start; }
.di-hcell-e { border-right: none; }
.di-dr  { display: flex; flex: 1; border-bottom: 1px solid #F0F0F0; min-height: 0; }
.di-dc  { flex: 1; padding: 0 3px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #F0F0F0; }
.di-dc-l { flex: 1.3; background: #F9F9F7; border-right: 1px solid #E4E4E4; justify-content: flex-start; }
.di-dc-e { border-right: none; }
/* photo */
.di-thumb { flex: 1; display: flex; align-items: center; justify-content: center; margin: 12px 12px 0; border: 1px solid #E8E8E8; border-radius: 2px; background: #FAFAF9; overflow: hidden; }
.di-thumb svg { width: 32px; height: 32px; }
.di-photo-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
/* email */
.di-email-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: hidden; }
.di-erow { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.di-einput { flex: 1; height: 10px; border: 1px solid #E8E8E8; border-radius: 1px; }

/* ---------- Solution ---------- */
.solution { background: transparent; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
.sol-list { margin-top: 30px; display: flex; flex-direction: column; }
.sol-item { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.sol-item:last-child { border-bottom: 1px solid var(--line); }
.sol-ic { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 0; display: grid; place-items: center; color: var(--cream); }
.sol-ic svg { width: 16px; height: 16px; }
.sol-tx h4 { margin: 0 0 5px; font-size: 16.5px; font-weight: 600; color: var(--cream); letter-spacing: -.01em; }
.sol-tx p { margin: 0; font-size: 14.5px; color: var(--sage); line-height: 1.55; }

/* line-framed "intelligence" panel */
.panel { border: 1px solid var(--line); background: rgba(221,232,248,.02); padding: clamp(20px, 2vw, 28px); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.panel-head .t { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.panel-head .s { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); }
.bars { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.bar { display: grid; grid-template-columns: 116px 1fr 52px; gap: 14px; align-items: center; }
.bar .k { font-family: var(--mono); font-size: 12px; color: var(--cream-2); }
.bar .track { height: 6px; background: rgba(221,232,248,.10); overflow: hidden; }
.bar .track i { display: block; height: 100%; background: var(--cream); opacity: .85; }
.bar .v { font-family: var(--mono); font-size: 11px; text-align: right; color: var(--sage); }

/* ---------- Features (sticky-scene stack) ---------- */
/* Single sticky wrapper: heading + all 3 cards move as one unit.
   When container.bottom ≤ (75px + sceneH), sticky releases and the
   ENTIRE block scrolls up normally — no JS heading translation needed. */
.features .sec-head {
  padding: 14px 0 22px;
  /* NOT sticky — moves with .feat-scene */
}
.feat-scene {
  position: sticky;
  top: 75px;
  z-index: 2;
  /* height set by JS: headingH + gap + stackH */
}
.feat-stack {
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
  overflow: hidden;
  /* height set by JS: cardH + 60 */
}
.feat-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: var(--green);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(280px, 26vw, 340px);
}
.feat-row > .feat-row-half {
  padding: clamp(28px, 2.6vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feat-row > .feat-row-half + .feat-row-half { border-left: 1px solid var(--line); }

.features .feat-stack > .feat-row:nth-of-type(1) { z-index: 1; }
.features .feat-stack > .feat-row:nth-of-type(2) { z-index: 2; }
.features .feat-stack > .feat-row:nth-of-type(3) { z-index: 3; }

/* Suppress reveal class on feat-rows: JS owns opacity + transform.
   Specificity (0,4,1) beats html.js-fx .reveal.in (0,3,1). */
@media (prefers-reduced-motion: no-preference) {
  html.js-fx .features .feat-row.reveal,
  html.js-fx .features .feat-row.reveal.in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: none;
  }
}


.feat-ic { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 0; display: grid; place-items: center; margin-bottom: 22px; color: var(--cream); }
.feat-ic svg { width: 19px; height: 19px; }
.feat-row h3 { font-family: var(--sans); font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; letter-spacing: -.01em; margin: 0 0 10px; line-height: 1.14; color: var(--cream); }
.feat-row p { margin: 0; font-size: 14.5px; color: var(--sage); line-height: 1.6; max-width: 52ch; }
.feat-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--cream-2); border: 1px solid var(--line); border-radius: 0; padding: 4px 9px; white-space: nowrap; }

/* exposure viz inside wide card */
.exposure-viz { border: 1px solid var(--line); padding: 22px; height: 100%; background: rgba(221,232,248,.02); }
.ev-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ev-head .t { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.ev-head .n { font-family: var(--sans); font-size: 24px; font-weight: 600; color: var(--cream); }
.ev-bars { display: flex; flex-direction: column; gap: 13px; }
.ev-bar { display: grid; grid-template-columns: 84px 1fr 52px; gap: 12px; align-items: center; }
.ev-bar .lab { font-family: var(--mono); font-size: 12px; color: var(--cream-2); }
.ev-bar .track { height: 8px; background: rgba(221,232,248,.10); overflow: hidden; }
.ev-bar .track i { display: block; height: 100%; background: var(--cream); }
.ev-bar .amt { font-family: var(--mono); font-size: 11px; text-align: right; color: var(--sage); }

/* ---------- Process (alternating timeline) ---------- */
.process { overflow: hidden; }
.proc-timeline {
  position: relative;
  margin-top: clamp(60px, 8vw, 100px);
  max-width: 1100px;
  margin-inline: auto;
}
.proc-stack {
  position: relative;
}
.proc-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
}
.proc-line-progress {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--cream);
  opacity: .35;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  pointer-events: none;
  will-change: transform;
}
.proc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.proc-step {
  position: relative;
  margin-bottom: clamp(140px, 16vw, 220px);
  min-height: 80px;
}
.proc-step:last-child { margin-bottom: 0; }
/* Steps reveal with opacity only (no transform) so JS can measure node
   positions accurately without the translate3d offset throwing it off. */
@media (prefers-reduced-motion: no-preference) {
  html.js-fx .proc-step.reveal { transform: none; }
}
.proc-step--left {
  padding-right: calc(50% + clamp(28px, 3.5vw, 56px));
  text-align: right;
}
.proc-step--right {
  padding-left: calc(50% + clamp(28px, 3.5vw, 56px));
  text-align: left;
}
.proc-node {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--cream);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px var(--green);
}
.proc-card {
  display: inline-block;
  max-width: 360px;
}
.ps-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
}
.ps-title {
  font-family: var(--sans);
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 500;
  line-height: 1.18;
  color: var(--cream);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.ps-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ember);
  text-transform: uppercase;
}
.proc-summary {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.proc-summary p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sage);
  text-wrap: pretty;
}
.proc-summary p.ps-lead { margin-bottom: 6px; }
.proc-summary p.ps-lead b { color: var(--cream); font-weight: 600; }
.proc-summary p:last-child { margin-bottom: 0; }
.proc-summary p b { color: var(--cream); font-weight: 600; }

/* ---------- Results ---------- */
.results { background: transparent; }
.res-grid { margin-top: clamp(46px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.res-cell { padding: clamp(28px, 3vw, 42px) clamp(22px, 2.4vw, 32px); border-right: 1px solid var(--line); }
.res-cell:last-child { border-right: none; }
.res-num { font-family: var(--sans); font-size: clamp(44px, 5vw, 66px); font-weight: 600; letter-spacing: -.03em; line-height: .95; color: var(--cream); }
.res-num .u { font-size: .5em; color: var(--ember); margin-left: 3px; font-weight: 500; }
.res-lab { margin-top: 14px; font-size: 14px; color: var(--sage); line-height: 1.5; max-width: 26ch; }
.res-foot { margin-top: clamp(30px, 4vw, 46px); font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--sage-dim); text-align: center; }

/* ---------- FAQ ---------- */
.faq-wrap { margin-top: clamp(40px, 5vw, 58px); max-width: 880px; margin-inline: auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; background: none; border: none; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; font-family: var(--sans); font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; letter-spacing: -.01em; color: var(--cream); }
.faq-q .pm { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--ember); border-radius: 1px; transition: transform .4s var(--ease-out), opacity .3s; }
.faq-q .pm::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-q .pm::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item.open .pm::after { transform: scaleY(0); opacity: 0; }
.faq-a { overflow: hidden; height: 0; transition: height .45s var(--ease-out); }
.faq-a-inner { padding: 0 4px 28px; font-size: 15.5px; color: var(--sage); line-height: 1.65; }

/* ---------- Final CTA ---------- */
.cta { text-align: center; position: relative; overflow: hidden; }
/* Halftone CA bear — clip box spans exactly between the frame lines so the
   bear can never bleed into the gutters; the bear anchors right with its
   rear nudged past the line, so the clip cuts it there. Ghost level lives
   here (wrapper opacity) — the shader renders at full contrast inside. */
.cta-bear-clip { position: absolute; inset: 0 var(--frame); overflow: hidden; pointer-events: none; }
.cta-bear {
  position: absolute;
  right: calc(-4% - 150px);
  bottom: -50px;
  height: 106%;
  aspect-ratio: 2 / 1;
  opacity: 0.055;
}
/* Centered 880px column — override the page gutter (it would eat ~456px
   on wide screens and squash the heading to a tight column). */
.cta .container { max-width: 880px; margin-inline: auto; padding-inline: clamp(24px, 4vw, 48px); }
.cta h2 .em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.cta p { margin: 24px auto 0; max-width: 540px; color: var(--cream-2); }
.cta-actions { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-fine { margin-top: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-dim); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; gap: 44px; }
  .feat-row--wide { grid-template-columns: 1fr; }
  /* CTA bear: below the desktop layout the section grows taller as content
     wraps, which (with height-based sizing) widens the 2:1 bear and pushes
     its left-facing head off-screen when right-anchored. Anchor to the face
     side instead so the head stays in view with a small gap; the rear trails
     off the right edge, mirroring the full-width composition. */
  .cta-bear { right: auto; left: clamp(16px, 3vw, 44px); }
}
@media (max-width: 760px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-card { border-right: none; border-bottom: 1px solid var(--line); }
  .problem-card:last-child { border-bottom: none; }
  /* Clock is hidden here, so drop the 50% reservation that was squishing
     the problem heading to the left half. */
  .problem .sec-head { max-width: 100%; }
  /* Center these section headers on mobile (process already noted below). */
  .problem .sec-head,
  .features .sec-head,
  .results .sec-head,
  .process .sec-head { text-align: center; margin-inline: auto; }
  .problem .sec-head .eyebrow,
  .features .sec-head .eyebrow,
  .results .sec-head .eyebrow,
  .process .sec-head .eyebrow { justify-content: center; }
  /* Solution: center only the eyebrow + heading (not the paragraph or list). */
  .solution .split-copy .eyebrow { display: flex; justify-content: center; }
  .solution .split-copy > h2 { text-align: center; }
  /* Disable sticky stacking on mobile — rows flow naturally */
  .features .sec-head { position: static; padding-bottom: 0; }
  .feat-scene { position: static; height: auto !important; }
  .feat-stack { overflow: visible; height: auto !important; display: flex; flex-direction: column; gap: 28px; }
  .feat-row { position: static; grid-template-columns: 1fr; transform: none !important; }
  .feat-row > .feat-row-half + .feat-row-half { border-left: none; border-top: 1px solid var(--line); }
  .feat-spacer { display: none; }
  .res-grid { grid-template-columns: 1fr 1fr; }
  .res-cell:nth-child(2n) { border-right: none; }
}
/* Process timeline stays centered (alternating cards) down to 600px. Below
   that, alternating cards can't fit either side of a centered line, so it
   becomes CENTERED-STACKED. The continuous line is replaced by clean
   connector segments that live only in the gaps BETWEEN steps — the line
   never crosses the centered text. Each step is a centered column:
   node → label → connector segment dropping toward the next node. */
@media (max-width: 600px) {
  /* Retire the continuous through-text line (and its scrub overlay). */
  .proc-line, .proc-line-progress { display: none; }

  .proc-step, .proc-step--left, .proc-step--right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    margin-bottom: 0;
    min-height: 0;
  }
  /* Node flows at the top-center of each step (not absolute). */
  .proc-node { position: static; top: auto; left: auto; transform: none; }
  .proc-card { max-width: 100%; margin-top: 16px; }

  /* Connector: a centered guiding segment that floats in the gap between
     steps — detached from the text above (margin-top) AND from the next
     node below (margin-bottom), so each square sits independently above its
     label rather than touching the line. Last step has none. */
  .proc-step:not(:last-child)::after {
    content: "";
    width: 1px;
    height: clamp(72px, 12vw, 120px);
    margin-top: 30px;
    margin-bottom: 30px;
    background: var(--line);
  }

  /* CTA bear: on phones the section is very tall, so height-based sizing
     balloons the 2:1 bear into a hyper-zoomed sliver. Size by width instead
     (larger, left-anchored from the 1080 rule) so it stays a bold watermark
     with the head + neck clearly in view; the body/rear trail off the right. */
  .cta-bear {
    height: auto;
    width: min(260%, 840px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}
@media (max-width: 480px) { .res-grid { grid-template-columns: 1fr; } .res-cell { border-right: none; border-bottom: 1px solid var(--line); } .res-cell:last-child { border-bottom: none; } }