:root {
  --r: 1112.5px;   /* half-width of the lens asset's bounding box (2225px wide in Figma) */
  --rv: 1154.5px;  /* half-height of the lens asset's bounding box (2309px tall) — taller than --r only
                       because the box leaves room for the drop shadow to fade out unclipped; the
                       visible ring itself is a true circle (confirmed by scanning the exported PNG's
                       alpha channel), not a capsule. */
  --cx-a: 966.5px; --cy-a: -7.5px;
  --cx-b: 434.5px; --cy-b: 960.5px;
  --cx-c: 1483.5px; --cy-c: 960.5px;

  --ink: #011417;
  --paper: #f4f2ee;
  --rim: rgba(255, 255, 255, 0.75);

  /* Single source of truth for the section's side padding — .pre-footer and
     .closing-cta break out to full-bleed via a negative margin sized to
     exactly cancel it (see below), so the two values must stay in lockstep
     at every breakpoint or the full-bleed either falls short of the edge or
     overshoots it into a horizontal scrollbar. */
  --section-pad: 80px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  font-family: "Inter", sans-serif;
  color: var(--ink);
}

.scroll-note {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(1, 20, 23, 0.8);
  color: #fff;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ---------- Scroll rig ----------
   Leaving the hero is gesture-triggered, not scroll-scrubbed:
   `html.lock-scroll` blocks scrolling entirely until the fade finishes, at
   which point script.js removes the class. The hero itself is a fixed,
   full-viewport overlay sitting on top of the rest of the page (which
   starts in normal flow at y=0, right underneath it) — so leaving it is
   just an opacity fade of the overlay, not a scroll/growth handoff. */

html.lock-scroll,
html.lock-scroll body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

.hero-wrapper {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 30;
  transition: opacity 700ms ease;
}
.hero-wrapper.hero-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05080a;
}

/* Fixed 1920x1080 design canvas, scaled to cover the viewport via JS (--scale) */
.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
}

/* ---------- Backgrounds ---------- */

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
}

.bg {
  position: absolute;
  top: 0;
  width: 960px;
  height: 1080px;
  overflow: hidden;
}
.bg img {
  position: absolute;
  max-width: none;
}
.bg-left { left: 0; }
.bg-right { left: 960px; }

/* Exact crop/pan from Figma (data-node-id 1:1630 / 1:1631) — not a generic
   object-fit:cover, which crops differently than the hand-placed focal
   point Figma specifies. */
.bg-left img { width: 123.16%; height: 136.79%; left: 0.15%; top: -22.08%; }
.bg-right img { width: 118.3%; height: 131.34%; left: -0.05%; top: -21.19%; }
.bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

/* Blurred copies: only the "exactly-one-lens" regions are punched through
   by the SVG masks (mask circle positions are updated live by script.js, in
   step with the lens motion). Verified by checking A/B/C circle-membership
   at sampled points on a native-res Figma export, not by eye: every sampled
   point inside a 2-way or 3-way overlap was sharp; every point inside
   exactly one lens was blurred — a distance-from-center vignette does not
   fit that data (a farther, but overlapping, point was sharper than a
   nearer, single-lens-only point). */
.bg-blur {
  filter: blur(14px) saturate(1.05);
  z-index: 2;
  will-change: filter;
  contain: strict;
}
.bg-blur-b { mask: url(#mask-b-only); -webkit-mask: url(#mask-b-only); }
.bg-blur-c { mask: url(#mask-c-only); -webkit-mask: url(#mask-c-only); }

.defs-svg { position: absolute; }

/* ---------- Vesica (live 3-circle intersection, recomputed every frame) ----------
   No separately computed/exported shape at all: three nested divs, each
   clipped to one lens's circle (A, then B inside A, then C inside B). The
   browser composites nested clip-paths itself, so the innermost div's
   visible area IS the true A∩B∩C intersection — a real geometric product
   of the same circles the rings sit on, not a second, independent source
   of truth. filter:drop-shadow sits on the outer wrapper rather than the
   innermost div so it reads the final, already-clipped silhouette instead
   of the innermost circle's own (unclipped) shape. */

.vesica-stack {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35));
}
.vesica-clip {
  position: absolute;
  inset: 0;
}
.vesica-fill {
  background: var(--paper);
}

/* ---------- Lens rings (decorative glass edge) ----------
   Sit ABOVE the vesica stack: the ring asset is mostly transparent in its
   center, so the bright vesica shows straight through it, while the glass
   rim itself still renders on top at the shape's edge — matching the Figma
   reference, where the thin ring line visibly crosses the bright panel's
   boundary rather than disappearing under it. */
.lens-ring {
  position: absolute;
  width: calc(var(--r) * 2);
  height: calc(var(--rv) * 2);
  z-index: 4;
  opacity: 0;
  transform: scale(0);
  will-change: transform, opacity;
  pointer-events: none;
}
.lens-ring img {
  width: 100%;
  height: 100%;
  display: block;
}
.lens-ring-a { left: calc(var(--cx-a) - var(--r)); top: calc(var(--cy-a) - var(--rv)); }
.lens-ring-b { left: calc(var(--cx-b) - var(--r)); top: calc(var(--cy-b) - var(--rv)); }
.lens-ring-c { left: calc(var(--cx-c) - var(--r)); top: calc(var(--cy-c) - var(--rv)); }

/* ---------- Center content ---------- */

.center-content {
  position: absolute;
  left: 617px;
  top: 300px;
  width: 685px;
  z-index: 10;
  text-align: center;
  opacity: 0;
  transform: scale(0.85);
  will-change: transform, opacity;
}

.cta-label {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  margin: 0 0 20px;
}

.headline {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 76px;
  line-height: 1.15;
  margin: 0 0 32px;
}
.headline em { font-style: italic; }

.subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 20px;
}

.body-text {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 32px;
  color: #333;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #e3e5e5;
  border: none;
  padding: 20px 36px;
  cursor: pointer;
  color: var(--ink);
}
.btn-left { border-radius: 100px 0 0 100px; }
.btn-right { border-radius: 0 100px 100px 0; }
/* 75px, overlapping each button by ~24-25px on either side — matches the
   icon's actual box (Figma node 1:1657) relative to the two button boxes
   either side of it (1:1655/1:1656). The asset itself already paints its
   own circular background (#C7CBCB) and glyph, so no separate CSS
   background/border-radius is needed here. */
.btn-icon {
  width: 75px;
  height: 75px;
  display: block;
  z-index: 2;
  margin: 0 -25px;
  flex: none;
}
.btn-icon img { width: 100%; height: 100%; display: block; }

/* ---------- Diagnosis section (post-hero) ----------
   Plain, normal-flow content. No pinning, no decorative arcs carried over
   from the hero — those weren't verifiable against the Figma file and are
   gone until there's a concrete source for them. */

.diagnosis-section {
  position: relative;
  background: var(--paper);
  padding: 140px var(--section-pad) 0;
}

/* Decorative lens rings, behind the content (see .body-lenses z-index vs.
   the z-index:2 below) — position/rotation are driven every scroll frame
   from script.js (updateBodyLenses). A much bigger circle than it looks:
   at 2800px wide with ~420px on-screen (~15%), the visible sliver reads as
   a gentle, barely-curved line hugging the edge rather than a shape
   reaching toward the middle — matching Figma's actual reference. Clipped
   by .body-lenses' own overflow:hidden. */
.body-lenses {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.body-lens {
  position: absolute;
  width: 2800px;
  height: auto;
  opacity: 0.45;
  will-change: transform;
}
/* Each lens rotates around its own point far outside the element (and the
   viewport) — a true rotation, not spin-in-place: since a plain circle's
   silhouette doesn't change when it spins around its own center, that
   motion was imperceptible regardless of speed. Pivoting around a distant
   point instead sweeps the whole visible sliver through a wide, slow arc.
   The pivot is placed DIAGONALLY from the visible sliver (not directly
   above/below it) on purpose: the sliver sits on the circle's far
   horizontal edge, so a pivot directly above/below puts the radius vector
   nearly vertical, which makes the tangent — the actual direction of
   motion — nearly horizontal, reading as a flat side-to-side slide rather
   than a rotation. A diagonal pivot gives the tangent real vertical
   component too, so it reads as swinging/arcing instead. Left/right pivot
   in different directions so they trace distinct arcs. */
.body-lens-left { left: -2380px; top: -700px; transform-origin: -1000px -1750px; }
.body-lens-right { right: -2380px; top: 1900px; transform-origin: 3600px 5050px; }

.diagnosis-intro,
.cards-intro,
.cards-row,
.lens-portrait-block,
.both-sides-intro,
.both-sides-grid,
.why-section,
.pre-footer,
.closing-cta {
  position: relative;
  z-index: 2;
}

.eyebrow-small {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin: 0 0 16px;
}

.diagnosis-headline {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 32px;
}
.diagnosis-headline em { font-style: italic; }

.diagnosis-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto 140px;
}

/* Staggered shift-up + fade-in, triggered from script.js the moment the
   hero finishes fading away (not by scroll position — see the comment in
   index.html above .diagnosis-intro for why). */
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }
.reveal-item.reveal-2 { transition-delay: 0.12s; }
.reveal-item.reveal-3 { transition-delay: 0.24s; }

.diagnosis-buttons { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pill {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 100px;
  cursor: pointer;
}
.pill-dark { background: var(--ink); color: #fff; border: none; }
.pill-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }

.diagnosis-copy p { font-size: 15px; line-height: 1.6; color: #333; margin: 0 0 20px; }
.diagnosis-copy strong { color: var(--ink); }
.diagnosis-conclusion { font-family: "Playfair Display", serif; font-size: 20px; color: var(--ink) !important; }

.cards-intro { text-align: center; max-width: 700px; margin: 0 auto 60px; }

.cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 160px;
}

.feature-card {
  border-radius: 24px;
  padding: 32px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card.is-visible { opacity: 1; transform: translateY(0); }
.feature-card:nth-child(2) { transition-delay: 0.12s; }
.feature-card:nth-child(3) { transition-delay: 0.24s; }

.card-yellow { background: #f7f0d2; }
.card-purple { background: #e8e2f2; }
.card-teal { background: #dbe8e6; }

.card-number { font-family: "Playfair Display", serif; font-size: 28px; opacity: 0.5; }
.feature-card h3 { font-family: "Inter", sans-serif; font-size: 19px; margin: 12px 0 20px; }
.card-audience { margin-bottom: 14px; font-size: 13px; }
.card-audience strong { display: block; margin-bottom: 2px; }
.card-audience p { margin: 0; color: #555; }

.lens-portrait-block {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: center;
}

.lens-portrait {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1.5px solid rgba(1, 20, 23, 0.25);
  overflow: hidden;
  position: relative;
  transition: border-color 0.6s ease;
}
.lens-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.lens-portrait.is-visible { border-color: transparent; }
.lens-portrait.is-visible img { opacity: 1; transform: scale(1); }

.lens-quote p {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  margin: 0 0 20px;
}
.lens-quote cite {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Built for both sides (image + copy grid) ---------- */

.both-sides-intro { text-align: center; max-width: 700px; margin: 160px auto 60px; }

.both-sides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 160px;
}
.both-sides-photo {
  border-radius: 16px;
  overflow: hidden;
  min-height: 340px;
}
.both-sides-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.both-sides-copy {
  border: 1.5px dashed rgba(1, 20, 23, 0.3);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.both-sides-copy h3 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  margin: 8px 0 16px;
}
.both-sides-copy h3 em { font-style: italic; }
.both-sides-copy p:not(.eyebrow-small) { font-size: 15px; line-height: 1.6; color: #333; margin: 0; }

/* ---------- Why Confidere ---------- */

.why-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto 160px;
  align-items: start;
}
.why-intro p:not(.eyebrow-small) { font-size: 15px; line-height: 1.6; color: #333; margin: 0 0 28px; }

.why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.why-list li { display: flex; gap: 20px; align-items: flex-start; }
.why-number {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  color: #9a9a9a;
  flex: none;
  width: 40px;
}
.why-list h3 { font-size: 18px; margin: 0 0 6px; }
.why-list p { font-size: 14px; line-height: 1.55; color: #555; margin: 0; }

/* ---------- Pre-Footer (Figma node 10:379) ---------- */

/* Full-bleed: breaks out of .diagnosis-section's own 80px side padding via
   negative margin sized to exactly cancel it, reaching the true viewport
   edge rather than sitting as a centered, boxed-in rectangle. */
.pre-footer {
  margin: 0 calc(-1 * var(--section-pad));
  aspect-ratio: 1879 / 738;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.pre-footer-bg { position: absolute; inset: 0; }
.pre-footer-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.pre-footer-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.pre-footer-panel {
  position: relative;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 40px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
}
.pre-footer-icon { width: 38px; height: 38px; flex: none; }
.pre-footer-icon img { width: 100%; height: 100%; display: block; }
.pre-footer-panel p {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 30px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

/* ---------- Closing CTA ---------- */

/* Full-bleed, same technique as .pre-footer — the text column keeps its
   own readable max-width via .closing-content instead, so only the
   wordmark/Venn graphic actually use the extra width. */
.closing-cta {
  text-align: center;
  margin: 0 calc(-1 * var(--section-pad));
  padding-bottom: 40px;
  /* .footer-venn (1400px) can still be wider than the viewport on a narrow
     screen — not just its ring children, already clipped by their own
     wrapper. This contains it the same way .body-lenses contains the
     body-lens elements. */
  overflow: hidden;
  /* Matches .footer-venn's own ratio so the section is exactly as tall as
     the graphic behind it, then centers the text/wordmark group inside
     that height — otherwise the text sits pinned to the top with the rest
     of the venn graphic as dead space below it. */
  aspect-ratio: 1920 / 1080;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.closing-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Venn watermark behind the closing CTA — same 3-lens arrangement and
   asset as the hero (proportions taken from BASE.a/b/c in script.js,
   scaled by footerVennScale = 1400/1920, the same ratio as this box to the
   hero's 1920x1080 stage). Plays the hero's own forming animation
   (playFooterVennIntro) when scrolled into view, dimmed down from the
   hero's full opacity since it's a secondary closing bookend sitting
   behind CTA text, not the main event. overflow:hidden on the container
   clips the rings' natural overhang so they can't force a horizontal
   scrollbar. */
.footer-venn {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.footer-vesica-stack {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.footer-vesica-clip { position: absolute; inset: 0; }
.footer-vesica-fill { background: var(--paper); }
.footer-venn-ring {
  position: absolute;
  width: 115.86%;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
.footer-venn-a { left: 50.3%; top: -0.7%; }
.footer-venn-b { left: 22.6%; top: 88.9%; }
.footer-venn-c { left: 77.3%; top: 88.9%; }

.closing-wordmark {
  position: relative;
  z-index: 1;
}
.closing-headline {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 72px;
  line-height: 1.05;
  margin: 0 0 24px;
}
.closing-headline em { font-style: italic; }
/* Figma's actual sizing (Subtitle Medium, 30px) — noticeably bigger than
   a typical sub-line, part of why this read as "bare bones" before. */
.closing-sub { font-size: 30px; font-weight: 500; margin: 0 0 40px; color: var(--ink); }

/* Two independent buttons (verified per Figma node 10:182/10:183) — not
   the hero's split-pill-with-center-circle pattern, which doesn't appear
   in the footer at all: a filled pill with a trailing yellow arrow badge,
   plus a separate outline pill. */
.closing-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}
.closing-buttons .pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.pill-filled { background: #e5e5ea; border: none; padding: 6px 6px 6px 30px; color: var(--ink); }
.pill-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffe46b;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pill-arrow img { width: 12px; height: 12px; }
.closing-buttons .pill-outline { border-width: 2px; padding: 14px 30px; }

.closing-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}
.closing-links span { background: rgba(227, 229, 229, 0.35); padding: 6px 10px; border-radius: 100px; }
.closing-tagline { font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0 0 4px; }
.closing-tagline-bold { font-weight: 700; }
.closing-wordmark {
  display: block;
  width: 100%;
  max-width: 1800px;
  margin: 56px auto 0;
  opacity: 0.6;
}
.lens-quote cite span { font-weight: 400; color: #666; }

.page-end-bar {
  height: 18px;
  background: linear-gradient(
    to right,
    #f4f4f4 0%,
    #c9adf4 10%,
    #b7bde2 30%,
    #b4cdc8 50%,
    #d9d899 70%,
    #ffe36b 90%,
    #f4f4f4 100%
  );
}

/* ============================================================
   Responsive
   The hero needs none of this: its whole scene is one 1920x1080 canvas
   scaled as a unit (see --scale / updateScale in script.js), so its type
   and layout already scale together at any viewport size. Everything below
   is normal document flow and gets the usual treatment instead — less side
   padding, grids collapsing to one column, smaller display type once the
   desktop sizes no longer fit.
   ============================================================ */

@media (max-width: 900px) {
  :root { --section-pad: 40px; }

  .diagnosis-section { padding-top: 100px; }

  .diagnosis-intro { grid-template-columns: 1fr; gap: 32px; margin-bottom: 80px; }
  .diagnosis-headline { font-size: 34px; }

  .cards-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 100px; }

  .lens-portrait-block { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
  .lens-portrait { width: 200px; height: 200px; }

  .both-sides-intro { margin: 100px auto 40px; }
  .both-sides-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 100px; }
  .both-sides-photo { min-height: 260px; }
  .both-sides-copy { padding: 28px; }

  .why-section { grid-template-columns: 1fr; gap: 40px; margin-bottom: 100px; }

  /* No fixed aspect-ratio here on mobile: the photo fills whatever height
     the text panel actually needs instead of a desktop-tuned ratio leaving
     it either cramped or mostly empty at phone widths. */
  .pre-footer { aspect-ratio: auto; padding: 32px 20px; }
  .pre-footer-panel { padding: 24px 20px; gap: 16px; }
  .pre-footer-panel p { font-size: 20px; }
  .pre-footer-icon { width: 30px; height: 30px; }

  /* The desktop aspect-ratio only exists to match #footerVenn's height so
     the CTA copy centers against the graphic — at phone widths that ratio
     is far shorter than the copy needs. Swap it for min-height:100vh
     instead of dropping it outright: same "fill the screen, copy centered
     on the graphic" effect as the hero, but min- (not a fixed height)
     so taller copy at very narrow widths still grows the section rather
     than getting clipped. */
  .closing-cta { aspect-ratio: auto; min-height: 100vh; }
  .closing-headline { font-size: 44px; }
  .closing-sub { font-size: 20px; }
  .closing-buttons { flex-direction: column; align-items: stretch; }
  .closing-buttons .pill { justify-content: center; }
  .closing-links { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  :root { --section-pad: 20px; }

  .diagnosis-section { padding-top: 88px; }
  .diagnosis-headline { font-size: 28px; }
  .diagnosis-conclusion { font-size: 17px; }

  .cards-intro { margin-bottom: 40px; }
  .feature-card { padding: 24px; }

  .closing-headline { font-size: 34px; }
  .closing-sub { font-size: 18px; }

  /* Cover-fit now crops the hero's design-space WIDTH on a narrow phone (see
     updateScale in script.js) instead of letterboxing — the headline/
     subtitle/buttons stay clear of that crop because they're short lines
     centered with margin to spare inside their 685px box, but body-text
     wraps close to the full box width and was getting its edges clipped.
     Narrowing just this element (not the whole center-content, which the
     rest of the layout stays keyed to) keeps it inside the visible slice
     on every mainstream phone aspect ratio, with margin to spare. */
  .body-text { max-width: 460px; margin-left: auto; margin-right: auto; }

  /* .body-lens's offsets/pivot were tuned (over several rounds) to hug the
     edge with a specific sliver/arc at desktop widths — they're fixed px,
     not proportional, so at phone widths the same numbers put most or all
     of the lens INSIDE the viewport instead of just a sliver of it.
     Hiding it below the point where that breaks down is simpler and more
     honest than fighting fixed geometry tuned for a completely different
     scale; updateBodyLenses() keeps updating a hidden element harmlessly. */
  .body-lenses { display: none; }
}