/* ═══════════════════════════════════════════════════════════════
   SECTION LIBRARY — shared CSS for the reusable page sections that
   previously lived as page-local <style> blocks (canonical versions
   copied from sales-enablement.html).

   Load AFTER styles.css:
     <link rel="stylesheet" href="assets/styles.css">
     <link rel="stylesheet" href="assets/section-library.css">

   Sections covered here:
     .contrast        — before/after two-column comparison
     .use-cases       — sage band with a grid of white case cards
     .results         — metric grid with dot-matrix numbers

   Everything else (hero, problem, product-showcase, aspects, steps,
   testimonial, pricing, founders, social-proof, bottom-cta, footer)
   is already in styles.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Before / After contrast ──
   "Before" = warm paper, dimmed, ink dots; "after" = crisp surface,
   sage dots. Red overline on the before (the thing to fix), sage on
   the after (the solution). */
.contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contrast-before {
  background: var(--surface-warm);
  padding: 72px 56px;
  position: relative;
}

.contrast-before::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, oklch(18% 0.008 var(--hue) / 0.06) 1px, transparent 1.5px);
  background-size: 16px 16px;
  pointer-events: none;
}

.contrast-before > * { position: relative; }

.contrast-after {
  background: var(--surface);
  padding: 72px 56px;
  border-left: 1px solid var(--line);
}

.contrast .overline { margin-bottom: 28px; }
.contrast-before .overline { color: var(--primary); }
.contrast-before .overline::before { background: var(--primary); }

.contrast h3 {
  font-family: 'Newsreader', serif;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 24px;
  line-height: 1.2;
  color: var(--ink);
}

.contrast-list { list-style: none; }

.contrast-list li {
  padding: 14px 0;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--body-color);
  border-bottom: 1px solid var(--line);
}

.contrast-list li:last-child { border-bottom: none; }

.contrast-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

.contrast-before .contrast-list li::before { background: var(--faint); }
.contrast-after  .contrast-list li::before { background: var(--secondary); }

/* ── Use-case cards on a sage band ── */
.use-cases {
  padding: 96px 64px;
  background: var(--secondary);
  position: relative;
}

.use-cases::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1.5px);
  background-size: 16px 16px;
  pointer-events: none;
}

.use-cases > * { position: relative; }

.use-cases .section-header h2 { color: var(--white); }

.case-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.case-card {
  background: var(--white);
  border-radius: 12px;
  padding: 32px 28px;
}

.case-card .overline { margin-bottom: 14px; }

.case-card h3 {
  font-family: 'Newsreader', serif;
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--ink);
  line-height: 1.25;
}

.case-card p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: var(--body-color);
  line-height: 1.6;
}

/* ── Results — dot-matrix metric numbers ── */
.results { padding: 96px 64px; background: var(--white); }

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.result-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
}

.result-number {
  display: inline-flex;
  gap: 5px;
  align-items: flex-end;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--secondary);
}

/* Non-digit unit next to the dot digits (%, ×, pts…) */
.result-unit {
  font-family: 'DM Mono', monospace;
  font-size: 22px;
  line-height: 1;
  align-self: flex-end;
  color: var(--secondary);
}

.result-item p {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ═══ Branded image sections — masked-dot photo treatment ═══
   These pair with assets/shimmer-mask.js: each media block holds a
   cover <img> plus a <canvas class="shimmer-mask" data-shimmer-preset>
   that paints the halftone veil over it. The photo shows even before
   the canvas paints (and if JS is off).

   Image guidance: people photos with the subject's face in the upper
   third (the mask's focal reveal defaults there), ≥1200px on the long
   edge. Placeholders live in assets/people/. */

/* ── Split portrait — sage band, photo one side, content the other ──
   Homepage reference: "No portal, it comes to you" (reach-surfaces).
   Photo left by default; add .split-portrait--flip for photo right
   (use data-shimmer-preset="portrait-right" on the canvas then). */
.split-portrait {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.40fr) minmax(0, 0.60fr);
  align-items: stretch;
  min-height: clamp(480px, 58vh, 660px);
  background: var(--secondary);
}

.split-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1.5px);
  background-size: 16px 16px;
  pointer-events: none;
}

.split-portrait--flip { grid-template-columns: minmax(0, 0.60fr) minmax(0, 0.40fr); }
.split-portrait--flip .split-portrait__media { order: 2; }

.split-portrait__media {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.split-portrait__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.split-portrait__media .shimmer-mask {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

.split-portrait__content {
  position: relative;
  z-index: 1;
  padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-portrait__content h2 {
  font-family: 'Newsreader', serif;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--white);
  max-width: 22ch;
  text-wrap: balance;
  margin: 0;
}

.split-portrait__content h2 em {
  font-style: italic;
  color: color-mix(in oklab, var(--white) 78%, var(--secondary));
}

.split-portrait__sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: color-mix(in oklab, var(--white) 88%, var(--secondary));
  max-width: 48ch;
  margin: 20px 0 0;
  text-wrap: pretty;
}

.split-portrait__content .cta-row { justify-content: flex-start; margin-top: 32px; }

@media (max-width: 860px) {
  .split-portrait,
  .split-portrait--flip { grid-template-columns: 1fr; }
  .split-portrait__media { order: 0; min-height: 320px; }
  .split-portrait__content { padding: 40px 24px 56px; }
}

/* ── Image band — full-bleed masked photo between sections ──
   Homepage reference: the feature-band photo. Sits between a light
   section (above) and a sage section (below); the veil fades
   white → sage vertically. Canvas preset: data-shimmer-preset="band".
   Optional .image-band__caption overlays an overline + line of text. */
.image-band {
  position: relative;
  min-height: clamp(360px, 52vh, 620px);
  overflow: hidden;
}

.image-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.image-band .shimmer-mask {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

.image-band__caption {
  position: absolute;
  left: clamp(24px, 5vw, 64px);
  bottom: clamp(28px, 4vw, 48px);
  z-index: 1;
}

.image-band__caption .overline { color: var(--white); }
.image-band__caption .overline::before { background: var(--white); }

.image-band__caption p {
  font-family: 'Newsreader', serif;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--white);
  max-width: 26ch;
  line-height: 1.25;
  margin: 10px 0 0;
  text-wrap: balance;
}

/* ── Portrait CTA — sage closing call with a masked portrait ──
   Homepage reference: "Personalized. Automated. Invisible." Use on
   .bottom-cta.bottom-cta--sage (styles.css provides the sage band);
   these rules add the right-side portrait and keep the copy clear
   of it. Canvas preset: data-shimmer-preset="portrait-right". */
.bottom-cta--sage { position: relative; overflow: hidden; text-align: left; }

.bottom-cta--sage > h2,
.bottom-cta--sage > p {
  position: relative;
  z-index: 2;
  padding-right: 48%;
}

.bottom-cta--sage > .cta-row {
  position: relative;
  z-index: 2;
  justify-content: flex-start;
}

.bottom-cta__portrait {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: auto;
  width: 44%;
  z-index: 1;
  overflow: hidden;
}

.bottom-cta__portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 12%;
  display: block;
}

.bottom-cta__portrait .shimmer-mask {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

@media (max-width: 860px) {
  .bottom-cta--sage > h2,
  .bottom-cta--sage > p { padding-right: 0; }
  .bottom-cta__portrait { display: none; }
}

/* ── Shared: masked-photo media block ──
   A cover <img> with the shimmer canvas painted over it. Give the
   block a size (grid track, aspect-ratio, or min-height) and drop in
   an <img> + <canvas class="shimmer-mask" data-shimmer-preset>. */
.masked-media { position: relative; overflow: hidden; }
.masked-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.masked-media .shimmer-mask {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

/* ── (A) Hero — split with masked portrait ──
   Light hero: copy left, masked portrait right (canvas preset so the
   photo dissolves into the page). The image-carrying counterpart to
   the centered hero. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: stretch;
  gap: clamp(32px, 5vw, 72px);
  min-height: calc(100vh - 73px);
  background: var(--canvas);
}
.hero-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 80px) 0 clamp(40px, 5vw, 80px) clamp(40px, 5vw, 72px);
}
.hero-split .hero-tagline { margin: 0 0 24px; max-width: 16ch; }
.hero-split .hero-sub { margin: 0 0 32px; max-width: 46ch; }
.hero-split .cta-row { justify-content: flex-start; }
.hero-split__media { position: relative; overflow: hidden; min-height: clamp(420px, 60vh, 680px); }

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__content { padding: clamp(40px, 8vw, 64px) clamp(24px, 5vw, 40px) 0; text-align: center; align-items: center; }
  .hero-split .hero-tagline, .hero-split .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-split .cta-row { justify-content: center; }
  .hero-split__media { min-height: 340px; }
}

/* ── (B) Feature row — framed screenshot + copy, alternating ──
   A product image in a rounded, shadowed frame beside copy. Add
   .feature-row--flip to swap sides. Homepage reference: delivery
   stages. Not masked — a crisp screenshot is the point. */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  padding: clamp(64px, 8vw, 120px) clamp(24px, 5vw, 64px);
  background: var(--canvas);
  max-width: 1240px;
  margin: 0 auto;
}
.feature-row--flip .feature-row__copy { order: 2; }
.feature-row__copy .overline { margin-bottom: 18px; }
.feature-row__copy h3 {
  font-family: 'Newsreader', serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 16px;
}
.feature-row__copy h3 em { font-style: italic; color: var(--sage-deep); }
.feature-row__copy p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--body-color);
  max-width: 52ch;
  margin: 0;
}
.feature-row__shot img {
  width: 100%;
  display: block;
  border-radius: 16px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  box-shadow: 0 2px 0 rgba(18,28,26,0.10), 0 44px 88px -30px rgba(18,28,26,0.45);
}
@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: 32px; }
  .feature-row--flip .feature-row__copy { order: 0; }
}

/* ── (C) Image + checklist split ──
   Masked photo one side, a dot-list of capabilities the other. Sage
   band. Add .image-check--flip for photo on the right. */
.image-check {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  background: var(--secondary);
}
.image-check__media { min-height: clamp(420px, 52vh, 600px); }
.image-check--flip .image-check__media { order: 2; }
.image-check__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 72px);
}
.image-check__body h2 {
  font-family: 'Newsreader', serif;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
  margin: 0 0 24px;
  max-width: 20ch;
}
.image-check__body h2 em { font-style: italic; color: color-mix(in oklab, var(--white) 78%, var(--secondary)); }
.image-check__body .dot-list li { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.14); font-size: 14px; }
.image-check__body .dot-list li::before { background: var(--white); }
@media (max-width: 860px) {
  .image-check, .image-check--flip { grid-template-columns: 1fr; }
  .image-check__media { order: 0; min-height: 320px; }
}

/* ── (D) Photo gallery grid ──
   Three masked photos with captions — moments, roles, scenarios.
   Finer dots (data-cell="14") read better at card size. */
.photo-grid {
  padding: clamp(64px, 8vw, 112px) clamp(24px, 5vw, 64px);
  background: var(--canvas);
}
.photo-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
}
.photo-grid__item {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: var(--white);
}
.photo-grid__item img { object-position: center 20%; }
.photo-grid__caption {
  margin: 16px 2px 0;
  font-family: 'Newsreader', serif;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}
.photo-grid__caption span {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 860px) { .photo-grid__grid { grid-template-columns: 1fr; max-width: 420px; } }

/* ── (E) Stat band — metrics over a masked photo ──
   Full-bleed masked photo with dot-matrix numbers over a bottom ink
   scrim so white text stays legible. Numbers must be real. */
.stat-band {
  position: relative;
  min-height: clamp(420px, 56vh, 640px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.stat-band__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 40%, oklch(18% 0.008 var(--hue) / 0.55) 100%);
}
.stat-band__stats {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px);
}
.stat-band__stat .result-number { color: var(--white); margin-bottom: 10px; }
.stat-band__stat .result-unit { color: var(--white); }
.stat-band__stat p {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
@media (max-width: 860px) { .stat-band__stats { grid-template-columns: 1fr 1fr; } }

/* ── (F) Quote + masked portrait ──
   A testimonial beside a masked portrait — human proof. Warm paper;
   add .quote-portrait--flip to put the portrait on the right. */
.quote-portrait {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
  background: var(--surface-warm);
}
.quote-portrait--flip .quote-portrait__media { order: 2; }
.quote-portrait__media { min-height: clamp(440px, 56vh, 640px); }
.quote-portrait__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px) clamp(32px, 5vw, 80px);
}
.quote-portrait__body blockquote {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
}
.quote-portrait__body blockquote em { font-style: italic; color: var(--sage-deep); }
.quote-portrait__attr { display: flex; flex-direction: column; gap: 2px; }
.quote-portrait__attr strong { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; color: var(--ink); }
.quote-portrait__attr span { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
  .quote-portrait, .quote-portrait--flip { grid-template-columns: 1fr; }
  .quote-portrait__media { order: 0; min-height: 340px; }
}

/* ═══ Phone screenshot sections ═══
   Real iPhone bezel from experience-screens.css (.device.device--phone).
   Two ways to fill the screen:
     • CSS-illustrated surface — the iMessage thread below uses the
       shared .sms-* components (static, no JS). Same look as the
       homepage hero phone. Needs experience-screens.css.
     • A real screenshot — drop an <img> into .device-screen and add
       .device-screen--shot (the image covers the 9/19.5 screen).
   Load experience-screens.css after styles.css on any page using these. */

/* A phone screen filled by a real mobile screenshot instead of CSS. */
.device--phone .device-screen--shot { background: var(--white); }
.device--phone .device-screen--shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── (G) Phone split — copy + a phone ──
   A phone device beside copy (the mobile counterpart to Feature row).
   Sage band so the dark bezel pops. Add .phone-split--flip for the
   phone on the left. */
.phone-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  padding: clamp(56px, 7vw, 104px) clamp(24px, 5vw, 64px);
  background: var(--secondary);
  position: relative;
}
.phone-split::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1.5px);
  background-size: 16px 16px;
  pointer-events: none;
}
.phone-split > * { position: relative; }
.phone-split--flip .phone-split__copy { order: 2; }
.phone-split__copy .overline { margin-bottom: 18px; }
.phone-split__copy .overline,
.phone-split__copy .overline::before { color: var(--white); background-color: var(--white); }
.phone-split__copy .overline { color: var(--white); }
.phone-split__copy h2 {
  font-family: 'Newsreader', serif;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
  margin: 0 0 18px;
  max-width: 18ch;
}
.phone-split__copy h2 em { font-style: italic; color: color-mix(in oklab, var(--white) 78%, var(--secondary)); }
.phone-split__copy p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  max-width: 46ch;
  margin: 0;
}
.phone-split__copy .cta-row { justify-content: flex-start; margin-top: 30px; }
.phone-split__device { display: flex; justify-content: center; }
@media (max-width: 860px) {
  .phone-split { grid-template-columns: 1fr; }
  .phone-split--flip .phone-split__copy { order: 0; }
  .phone-split__copy { text-align: center; }
  .phone-split__copy h2 { margin-left: auto; margin-right: auto; }
  .phone-split__copy .cta-row { justify-content: center; }
}

/* ── (H) Phone trio — three phones, multi-surface ──
   Three phones on a dark band showing the channels Invisible reaches
   through. The middle phone lifts for rhythm. */
.phone-trio {
  padding: clamp(56px, 7vw, 104px) clamp(24px, 5vw, 64px);
  background: var(--ink);
  position: relative;
}
.phone-trio .section-header h2 { color: var(--white); }
.phone-trio .section-header h2 em { color: rgba(255,255,255,0.72); }
.phone-trio__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  max-width: 1080px;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
}
.phone-trio .device--phone { width: min(100%, 300px); }
.phone-trio__row > :nth-child(2) { transform: translateY(-28px); }
.phone-trio__label {
  margin-top: 18px;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
}
@media (max-width: 860px) {
  .phone-trio__row { grid-template-columns: 1fr; gap: 48px; max-width: 320px; }
  .phone-trio__row > :nth-child(2) { transform: none; }
}

/* ── (I) Phone hero — copy left, phone in a light hero ──
   A hero built around a phone screenshot (the homepage hero pattern,
   generalized). Light page; the bezel provides the contrast. */
.phone-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  min-height: calc(100vh - 73px);
  padding: clamp(40px, 5vw, 72px);
  background: var(--canvas);
}
.phone-hero__content { display: flex; flex-direction: column; justify-content: center; }
.phone-hero .hero-tagline { margin: 0 0 24px; max-width: 15ch; }
.phone-hero .hero-sub { margin: 0 0 32px; max-width: 44ch; }
.phone-hero .cta-row { justify-content: flex-start; }
.phone-hero__device { display: flex; justify-content: center; }
.phone-hero .device--phone { width: min(100%, 320px); }
@media (max-width: 860px) {
  .phone-hero { grid-template-columns: 1fr; min-height: 0; text-align: center; }
  .phone-hero .hero-tagline, .phone-hero .hero-sub { margin-left: auto; margin-right: auto; }
  .phone-hero .cta-row { justify-content: center; }
  .phone-hero__content { order: 0; }
}

/* ── Pricing: 3-tier modifier ──
   styles.css .pricing-grid is 2-up (760px max). Add this class on
   .pricing-grid when a page has three tiers. */
.pricing-grid--three {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
}

@media (max-width: 900px) {
  .pricing-grid--three { grid-template-columns: 1fr; max-width: 420px; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .contrast { grid-template-columns: 1fr; }
  .contrast-after { border-left: none; border-top: 1px solid var(--line); }
  .contrast-before, .contrast-after { padding: 48px 24px; }
  .use-cases, .results { padding: 56px 24px; }
  .case-cards { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .result-grid { grid-template-columns: 1fr; }
}