/* ==========================================================================
   Springs Dental Group · Invisalign landing (selling version)
   Design tokens and components carried over from the test page
   (archive/test-page/styles.css).

   1. Tokens   2. Base   3. Layout   4. Components   5. Sections
   6. Sticky CTA   7. Motion
   ========================================================================== */


/* 1. TOKENS
   ========================================================================== */

:root {
  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 380;
  --display-tracking: -0.022em;
  --display-variation: "WONK" 0;

  --text-hero: clamp(2.875rem, 12.8vw, 5.75rem);
  --text-h2-xl: clamp(2.375rem, 1.5rem + 4vw, 4.5rem);
  --text-h2: clamp(2.125rem, 1.55rem + 2.6vw, 3.5rem);
  --text-statement: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --text-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --text-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --text-small: 0.875rem;
  --text-eyebrow: 0.8125rem;  /* small caps labels: BONUS 1/2, contact titles (13 px) */
  --leading-display: 1.04;
  --leading-body: 1.65;
  --measure: 34rem;

  /* Colour: palette */
  --ink-950: #070F16;
  --ink-900: #0B1620;
  --ink-850: #101F2C;
  --ink-800: #172A39;
  --paper: #EDE8DE;
  --paper-soft: #C8CECD;
  --paper-muted: #A3B0B7;
  --aqua: #7CC4BE;
  --aqua-bright: #A3DAD4;
  --beige: #F3EBDD;
  --beige-deep: #E8DDCB;
  --beige-ink: #17232D;
  --beige-ink-soft: #2E3A43;
  --beige-ink-muted: #47525A;
  --teal-deep: #1C5A5B;

  /* Colour: semantic (dark is the default theme) */
  --bg: var(--ink-900);
  --bg-raised: var(--ink-850);
  --text: var(--paper);
  --text-soft: var(--paper-soft);
  --text-muted: var(--paper-muted);
  --accent: var(--aqua);
  --line: rgba(237, 232, 222, 0.14);
  --line-strong: rgba(237, 232, 222, 0.32);
  --btn-bg: var(--aqua);
  --btn-bg-hover: var(--aqua-bright);
  --btn-text: var(--ink-950);
  --focus: var(--aqua-bright);
  --ph-line: rgba(237, 232, 222, 0.3);
  --tbd-bg: rgba(124, 196, 190, 0.12);

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --container: 75rem;

  /* Shape */
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-panel: clamp(1.75rem, 5vw, 3.5rem);
  --radius-pill: 999px;

  /* Sticky bar height, reserved at the bottom of the page on phones */
  --sticky-h: 4.5rem;

  /* Header: logo height plus the header's vertical padding (logo is taller from 900 px) */
  --logo-h: 2.75rem;
  --header-h: calc(var(--logo-h) + var(--space-sm) * 2);
}

/* Light beige theme: the bonus block. */
.theme-beige {
  --bg: var(--beige);
  --bg-raised: var(--beige-deep);
  --text: var(--beige-ink);
  --text-soft: var(--beige-ink-soft);
  --text-muted: var(--beige-ink-muted);
  --accent: var(--teal-deep);
  --line: rgba(23, 35, 45, 0.14);
  --line-strong: rgba(23, 35, 45, 0.34);
  --btn-bg: var(--beige-ink);
  --btn-bg-hover: #25353F;
  --btn-text: var(--beige);
  --focus: var(--teal-deep);
  --ph-line: rgba(23, 35, 45, 0.38);
  --tbd-bg: rgba(28, 90, 91, 0.1);
}


/* 2. BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-lg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  font-variation-settings: var(--display-variation);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

p {
  text-wrap: pretty;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  z-index: 200;
  top: var(--space-xs);
  left: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Shared headline voice */
.hero__title,
.h2,
.visit__title,
.final__title,
.step__title,
.bonus-card__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--leading-display);
  text-wrap: balance;
}

.h2 {
  font-size: var(--text-h2);
}

/* Placeholder text waiting for Brendan's confirmation. Easy to grep: "TBD". */
.tbd {
  padding-inline: 0.2em;
  border-radius: 4px;
  background: var(--tbd-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* 3. LAYOUT
   ========================================================================== */

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--text);
}

.section-cta {
  margin-top: var(--space-2xl);
}

.split {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-3xl);
    align-items: start;
  }
}


/* 4. COMPONENTS
   ========================================================================== */

/* ---- Button ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: var(--space-xs) var(--space-xl);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.btn--primary:hover {
  background: var(--btn-bg-hover);
}

.btn:focus-visible {
  border-radius: var(--radius-pill);
}

.section-cta .btn,
.hero__actions .btn {
  width: 100%;
}

@media (min-width: 600px) {
  .section-cta .btn,
  .hero__actions .btn {
    width: auto;
  }

  .btn {
    white-space: nowrap;
  }
}

/* ---- Logo (header) -------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.logo__img {
  width: auto;
  height: var(--logo-h);
}

@media (min-width: 900px) {
  :root { --logo-h: 3.25rem; }
}

/* ---- Photo frame --------------------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo--placeholder {
  outline: 1px dashed var(--ph-line);
  outline-offset: -1px;
}

.tbd-tag {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: rgba(7, 15, 22, 0.78);
  color: var(--paper);
  font-size: var(--text-small);
  line-height: 1.4;
}


/* 5. SECTIONS
   ========================================================================== */

/* ---- Header ------------------------------------------------------------- */
.site-header {
  padding-block: var(--space-sm);
}

/* Flex row: no inline line box under the logo, so the header is exactly logo + padding. */
.site-header__inner {
  display: flex;
  align-items: center;
}

/* ---- 1. Hero --------------------------------------------------------------
   Phone budget (390 x 844): header, three-line title, subhead, FREE badge,
   button and promise fit the first screen; the photo starts on it and is cut by the fold. */
/* Up to 900 px the hero fills the first screen under the header with equal padding above
   and below; the photo takes the height that is left (at least 10rem). If the screen is
   too short for that, the hero simply grows past the fold. */
.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--space-lg);
}

.hero__grid {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
}

.hero__title {
  font-size: clamp(2rem, 10vw, 5.25rem);
  line-height: 1;
}

.hero__line {
  display: block;
}

.hero__title em {
  color: var(--accent);
}

.hero__sub {
  max-width: var(--measure);
  margin-top: var(--space-md);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.free-badge {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: fit-content;
  max-width: 100%;
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: rgba(124, 196, 190, 0.08);
}

.free-badge__big {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--accent);
}

.free-badge__text {
  display: grid;
  gap: 0.1rem;
}

.free-badge__label {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
}

.free-badge__note {
  font-size: var(--text-small);
  line-height: 1.35;
  color: var(--text-soft);
  text-wrap: balance;
}

.hero__bonus {
  max-width: var(--measure);
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-soft);
}

.hero__bonus strong {
  color: var(--text);
  font-weight: 600;
}

.hero__bonus em {
  font-style: normal;
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* Phones: tighter vertical rhythm inside the hero, so the bonus line fits and the first
   screen keeps equal gaps above and below on a 390 x 844 screen. */
@media (max-width: 899px) {
  .hero__grid { gap: var(--space-md); }
  .hero__sub { margin-top: var(--space-sm); }
  .free-badge { margin-top: var(--space-md); }
  .hero__actions { margin-top: var(--space-md); }
}

.hero__actions {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.hero__promise {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  color: var(--text-soft);
}

.hero__media {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.photo--hero {
  flex: 1 1 auto;
  width: 100%;
  min-height: 10rem;
  max-height: 34rem;
}

.photo--hero img {
  position: absolute;
  inset: 0;
}

/* "Illustrative image" on AI-edited photos (SHOW_REAL_PHOTOS = false) */
.photo__label {
  position: absolute;
  left: 0.625rem;
  bottom: 0.625rem;
  z-index: 1;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(7, 15, 22, 0.66);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* phones: the frame is wider than the photo, so keep both faces in view */
.photo--hero img {
  object-position: 50% 30%;
}

/* 3D aligner. Phones: centred in its own space under the hero photo, before the next section.
   The canvas fills the box; the image is the fallback. */
.hero__aligner {
  --aligner-w: min(74%, 22rem);
  position: absolute;
  z-index: 1;
  top: calc(100% + var(--space-2xl));
  left: 50%;
  width: var(--aligner-w);
  aspect-ratio: 4 / 3;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Phones: the gap between the hero photo and the next heading holds the aligner box
   (74% of the content width, 4:3, at most 22rem wide) with the same 3rem above and below it.
   The hero already ends 1.5rem under the photo, so the next section adds the rest. */
@media (max-width: 899px) {
  .pain {
    padding-top: calc(var(--space-2xl) * 2 - var(--space-lg) + min(0.74 * (100vw - 2 * var(--gutter)), 22rem) * 0.75);
  }
}

.hero__aligner-fallback,
.hero__aligner-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__aligner-fallback {
  padding: 12%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

.hero__aligner-canvas {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.4));
  animation: aligner-in 0.6s ease both;
}

.hero__aligner.is-3d .hero__aligner-fallback {
  display: none;
}

@keyframes aligner-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 600px) {
  /* Button and promise side by side; the promise drops below as a whole when space runs out. */
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-lg);
  }

  .hero__promise {
    text-align: left;
    white-space: nowrap;
  }
}

@media (min-width: 900px) {
  /* The hero fills the first screen under the header and centres its content,
     so the gap above (below the header) equals the gap below (to the fold).
     Capped on very tall screens; on short ones the padding keeps both gaps equal. */
  .hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: min(calc(100vh - var(--header-h)), 64rem);
    min-height: min(calc(100svh - var(--header-h)), 64rem);
    padding-block: var(--space-2xl);
  }

  .hero__grid {
    display: grid;
    flex: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-3xl);
    align-items: center;
  }

  .hero__media {
    display: block;
  }

  .hero__title {
    font-size: clamp(3.25rem, 5.4vw, 5.25rem);
  }

  .hero__sub {
    margin-top: var(--space-lg);
    font-size: var(--text-lead);
    line-height: 1.55;
  }

  .free-badge {
    margin-top: var(--space-xl);
  }

  .hero__actions {
    margin-top: var(--space-xl);
  }

  .photo--hero {
    aspect-ratio: 5 / 4;
    min-height: 0;
    max-height: none;
    border-radius: var(--radius-lg);
  }

  /* Desktop: the aligner turns centred on the photo's top-right corner. Sizes are in cqw
     (1% of the photo column's width). The model is about 40cqw across; its centre sits at
     93% of the photo width and about 6cqw above the photo's top edge. When the page margin on the
     right is narrower than that (about 1024-1300 px windows), the model moves left just
     enough to stay inside the window. */
  .hero {
    --edge-gap: max(var(--gutter), (100vw - var(--container)) / 2);
    overflow-x: clip;
  }

  .hero__media {
    container-type: inline-size;
  }

  .hero__aligner {
    top: -34cqw;
    right: max(-21cqw, -1 * (var(--edge-gap) - 0.5rem + 1.5cqw));
    bottom: auto;
    left: auto;
    width: 56cqw;
    aspect-ratio: 1 / 1;
    transform: none;
  }
}

/* ---- 2. This consultation is for you if ---------------------------------- */
.pain-list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.pain-card {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.pain-card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.pain-card__text::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-bottom: var(--space-sm);
  border-radius: 2px;
  background: var(--accent);
}

.pain-card__doubt {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.pain-card__answer {
  margin-top: var(--space-xs);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-soft);
}

@media (min-width: 600px) {
  .pain-card {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-lg);
    padding: var(--space-lg);
  }
}

@media (min-width: 768px) {
  .pain-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .pain-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .pain-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding: var(--space-md) var(--space-md) var(--space-xl);
  }

  .pain-card__text {
    padding-inline: var(--space-xs);
  }

  .pain-card__doubt {
    font-size: var(--text-h3);
  }
}

/* ---- 3. Why Invisalign, in life terms ---------------------------------- */
.why-invisalign {
  padding-top: 0;
}

.why-invisalign__grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-areas:
    "title"
    "moments"
    "note";
}

.why-invisalign__title { grid-area: title; }
.moments { grid-area: moments; }

.why-invisalign__note {
  grid-area: note;
  align-self: start;
  max-width: 26rem;
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent);
  color: var(--text-soft);
}

.moment {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--line);
}

.moment:last-child {
  border-bottom: 1px solid var(--line);
}

.moment dt {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.9rem + 2.8vw, 4rem);
  font-weight: var(--display-weight);
  line-height: 1;
  letter-spacing: var(--display-tracking);
}

.moment dd {
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--text-soft);
}

@media (min-width: 600px) {
  .moment {
    grid-template-columns: minmax(min-content, 1.15fr) minmax(0, 1fr);
    column-gap: var(--space-lg);
    align-items: baseline;
  }
}

@media (min-width: 900px) {
  .why-invisalign__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title moments"
      "note  moments";
    column-gap: var(--space-3xl);
    row-gap: var(--space-xl);
  }
}

/* ---- 4. What happens at the visit (deeper panel) ------------------------- */
.visit {
  padding-block: calc(var(--section-y) * 1.1);
  border-radius: var(--radius-panel);
  background: var(--bg-raised);
}

.visit__title {
  max-width: 9em;
  font-size: var(--text-h2-xl);
  line-height: 1;
}

.steps {
  display: grid;
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}

.step__marker {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.step__num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 4vw, 6rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--accent);
}

.step__rule {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.photo--step {
  aspect-ratio: 4 / 3;
  margin-top: var(--space-lg);
}

.step__title {
  margin-top: var(--space-lg);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  line-height: 1.1;
}

.step__text {
  margin-top: var(--space-xs);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--text-soft);
}

.step__honesty {
  margin-top: var(--space-md);
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-style: italic;
  font-weight: var(--display-weight);
  line-height: 1.32;
  letter-spacing: -0.01em;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-3xl);
  }

  .step:not(:last-child) .step__rule::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ---- 5. Bonus stack (light beige panel) --------------------------------- */
.bonus {
  margin-top: var(--space-xl);
  padding-block: var(--section-y);
  border-radius: var(--radius-panel);
  background: var(--bg);
  color: var(--text);
}

.bonus__head {
  max-width: 40rem;
}

.bonus__lead {
  margin-top: var(--space-lg);
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--text-soft);
}

.bonus-list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.bonus-card {
  padding: var(--space-md) var(--space-md) var(--space-xl);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.bonus-card__media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  background: #F6F0E5;
}

.bonus-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Drawn icon instead of the vendor's product photo (SHOW_VENDOR_PHOTOS = false) */
.bonus-card__icon {
  display: block;
  width: 100%;
  height: 100%;
  padding: 14% 22%;
  color: var(--teal-deep);
}

.bonus-card__label,
.bonus-card__title,
.bonus-card__text {
  padding-inline: var(--space-xs);
}

.bonus-card__label {
  margin-top: var(--space-lg);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.bonus-card__title {
  margin-top: var(--space-xs);
  font-size: var(--text-h3);
  line-height: 1.2;
}

.bonus-card__text {
  margin-top: var(--space-xs);
  color: var(--text-soft);
}

.bonus__terms {
  max-width: 44rem;
  margin-top: var(--space-xl);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .bonus-list {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-lg);
  }
}

/* ---- Why Springs: text cards in the rhythm of the "for you if" cards ------- */
.why-list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.why-card {
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.why-card__num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.why-card__title {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.why-card__text {
  margin-top: var(--space-xs);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-soft);
}

/* ---- 3b. Daily routine (same cards as "Why Springs") ------------------------ */
.routine__lead {
  max-width: var(--measure);
  margin-top: var(--space-md);
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--text-soft);
}

.routine__note {
  max-width: var(--measure);
  margin-top: var(--space-lg);
  font-size: var(--text-small);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .why-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .why-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .why-card {
    padding: var(--space-xl) var(--space-lg);
  }
}

/* ---- 6. Doctor ------------------------------------------------------------ */
.doctor__grid {
  display: grid;
  gap: var(--space-2xl);
}

.photo--doctor {
  aspect-ratio: 4 / 5;
  max-width: 26rem;
}

.doctor__lead {
  max-width: var(--measure);
  margin-top: var(--space-sm);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--text-soft);
}

.doctor__name {
  width: fit-content;
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.3;
}

.doctor__cred,
.doctor__bio {
  width: fit-content;
  margin-top: var(--space-xs);
  color: var(--text-soft);
}

.doctor__approach,
.doctor__quote p {
  max-width: 28rem;
  margin-top: var(--space-xl);
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-statement);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
}

/* The quote is a full sentence from her page: one step smaller than the short approach line,
   and without the side rule (Ilya, 2026-10-16). */
.doctor__quote p {
  max-width: 32rem;
  padding-left: 0;
  border-left: 0;
  font-size: var(--text-h3);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.doctor__quote footer {
  width: fit-content;
  margin-top: var(--space-sm);
  color: var(--text-soft);
}

@media (min-width: 900px) {
  .doctor__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-3xl);
    align-items: center;
  }
}

/* ---- 7. Clinic ------------------------------------------------------------ */
.clinic {
  padding-top: 0;
}

.clinic__grid {
  display: grid;
  gap: var(--space-xl);
}

.clinic__tagline {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-style: italic;
  font-weight: var(--display-weight);
  line-height: 1.3;
  color: var(--accent);
}

.clinic__body {
  max-width: var(--measure);
  margin-top: var(--space-lg);
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--text-soft);
}

.mosaic {
  display: grid;
  gap: var(--space-sm);
}

.photo--suite,
.photo--comfort {
  aspect-ratio: 3 / 2;
}

/* Portrait source photos: keep the chair and the tray in frame at every ratio. */
.photo--suite img { object-position: 50% 62%; }
.photo--comfort img { object-position: 50% 62%; }

.clinic__cta {
  margin-top: 0;
}

@media (min-width: 900px) {
  .clinic__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "copy mosaic"
      "cta  mosaic";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-3xl);
    row-gap: var(--space-xl);
  }

  .clinic__copy { grid-area: copy; }
  .clinic__cta { grid-area: cta; align-self: start; }

  .mosaic {
    grid-area: mosaic;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-md);
  }

  .photo--suite {
    border-radius: var(--radius-lg);
  }

  .photo--comfort {
    aspect-ratio: 1 / 1;
    margin-bottom: -2.5rem;
    border-radius: var(--radius-lg);
  }
}

/* ---- 8, 9. Reviews and stories (hidden until confirmed) ------------------ */
.reviews__list,
.cases__list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.review-card,
.case-card {
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.review-card figure {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.review-card__stars {
  color: var(--accent);
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
}

.review-card blockquote {
  flex: 1;
  margin-top: var(--space-sm);
}

.review-card blockquote p {
  font-family: var(--font-display);
  font-size: calc(var(--text-h3) * 0.9);
  font-weight: var(--display-weight);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.review-card figcaption {
  margin-top: var(--space-lg);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--text-soft);
}

.review-card__name {
  color: var(--text);
  font-weight: 600;
}

.review-card a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text-soft);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
}

.review-card a:hover {
  color: var(--text);
}

/* Emoji on the review cards: decorative, one per card. Phones: all in the top-right corner.
   From 768 px: where the user marked them (on the top edge, by the name line, in the top corner,
   over the bottom corner). */
.review-card {
  --emoji: 3.25rem;
  position: relative;
}

.review-card__emoji {
  position: absolute;
  z-index: 1;
  top: calc(var(--emoji) * -0.15);
  right: var(--space-2xs);
  width: var(--emoji);
  height: var(--emoji);
  pointer-events: none;
  filter: drop-shadow(0 0.5rem 0.75rem rgb(0 0 0 / 0.35));
}

.review-card__emoji--edge {
  transform: rotate(8deg);
}

.review-card__emoji--footer {
  transform: rotate(-6deg);
}

.review-card__emoji--corner-in {
  transform: rotate(-10deg);
}

.review-card__emoji--corner-out {
  transform: rotate(6deg);
}

.reviews__rating {
  margin-top: var(--space-md);
  color: var(--text-soft);
}

.reviews__rating [aria-hidden] {
  color: var(--accent);
  letter-spacing: 0.12em;
}

.reviews__score {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text);
}

.case-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--display-weight);
}

.case-card__facts {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.case-card__facts dt {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (min-width: 768px) {
  .reviews__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .review-card {
    --emoji: 4.25rem;
  }

  .review-card__emoji--edge {
    top: calc(var(--emoji) * -0.4);
  }

  .review-card__emoji--footer {
    top: auto;
    right: var(--space-3xl);
    bottom: 2.25rem;
  }

  /* keeps the name line clear of the emoji next to it */
  .review-card--emoji-footer figcaption {
    padding-right: calc(var(--space-3xl) - var(--space-lg) + var(--emoji) + var(--space-xs));
  }

  .review-card__emoji--corner-in {
    top: calc(var(--emoji) * -0.2);
    right: var(--space-md);
  }

  .review-card__emoji--corner-out {
    top: auto;
    right: calc(var(--emoji) * -0.5);
    bottom: calc(var(--emoji) * -0.33);
  }
}

/* ---- 10. Honest answers --------------------------------------------------- */
.accordion details {
  border-top: 1px solid var(--line);
}

.accordion details:last-child {
  border-bottom: 1px solid var(--line);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.5rem;
  padding-block: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--display-weight);
  line-height: 1.25;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary:hover {
  color: var(--accent);
}

.accordion__icon {
  position: relative;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--accent);
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease;
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.accordion details[open] .accordion__icon::after {
  transform: rotate(0deg);
}

.accordion details > p {
  max-width: var(--measure);
  padding-bottom: var(--space-lg);
  color: var(--text-soft);
}

/* Three small bars after the question while its voice answer plays (app.js adds .is-playing). */
.accordion__sound {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 0.75em;
  margin-left: 0.5em;
  vertical-align: baseline;
}

.accordion details.is-playing .accordion__sound {
  display: inline-flex;
}

.accordion__sound i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: bottom;
  animation: sound-bar 0.9s ease-in-out infinite;
}

.accordion__sound i:nth-child(2) {
  animation-delay: -0.3s;
}

.accordion__sound i:nth-child(3) {
  animation-delay: -0.6s;
}

@keyframes sound-bar {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .accordion__sound i {
    animation: none;
    transform: scaleY(0.7);
  }
}

/* ---- 11. Final CTA (deeper panel) ---------------------------------------- */
.final {
  padding-bottom: var(--section-y);
}

.final__panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl) var(--space-md);
  border-radius: var(--radius-panel);
  background: var(--ink-850);
  text-align: center;
}

.final__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

/* keeps the text on the water image at AA contrast */
.final__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(16, 31, 44, 0.82), rgba(16, 31, 44, 0.35) 75%);
}

.final__content {
  position: relative;
  z-index: 1;
}

.final__title {
  max-width: 16em;
  margin-inline: auto;
  font-size: var(--text-h2);
  line-height: 1.08;
}

.final__title span,
.final__title em {
  display: block;
}

.final__title em {
  margin-top: 0.2em;
  color: var(--accent);
}

.final .btn {
  width: 100%;
  max-width: 24rem;
  margin-top: var(--space-xl);
  padding-inline: var(--space-md);
}

.contact {
  display: grid;
  gap: var(--space-lg);
  justify-content: center;
  margin-top: var(--space-2xl);
}

.contact dt {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.contact dd {
  margin-top: var(--space-2xs);
  line-height: 1.5;
}

.contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
}

@media (min-width: 600px) {
  .final .btn {
    width: auto;
  }
}

@media (min-width: 900px) {
  .final__panel {
    padding: var(--space-4xl) var(--space-3xl);
  }

  .contact {
    grid-auto-flow: column;
    gap: var(--space-3xl);
  }
}

/* ---- Footer ----------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
  background: var(--ink-950);
  color: var(--text-muted);
  font-size: var(--text-small);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.site-footer__logo {
  align-self: flex-start; /* the footer column would stretch it on phones */
  width: auto;
  height: 2.5rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-lg);
}

/* Dentist identification line (doctor block and footer) */
.id-line {
  margin-top: var(--space-sm);
  font-size: var(--text-small);
  color: var(--text-muted);
}

.site-footer__id {
  margin-top: 0;
}

/* ® in display headings: small and raised, so it doesn't weigh on the line */
.reg {
  font-size: 0.42em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.04em;
}

/* Align trademark lines: offer note (A4) next to the consultation and gifts, attribution (A3) in the footer */
.offer-note {
  max-width: var(--measure);
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.site-footer__legal {
  flex-basis: 100%;
  max-width: 48rem;
  font-size: 0.75rem;
  line-height: 1.45;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  width: fit-content;
  color: var(--text-soft);
  text-underline-offset: 0.25em;
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--space-xl);
  }
}


/* 6. STICKY CTA (phones only)
   Hidden while the hero or the final CTA is on screen (app.js toggles .is-visible).
   ========================================================================== */

.sticky-cta {
  display: none;
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
  }

  .sticky-cta {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: rgba(7, 15, 22, 0.94);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .sticky-cta.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }

  .sticky-cta__label {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.2;
  }

  .sticky-cta__btn {
    min-height: 3rem;
    padding-inline: var(--space-xl);
  }
}

/* One calm pulse (app.js adds the class at most three times, at least 8 s apart). */
.sticky-cta__btn.is-pulsing {
  animation: pulse 1.2s ease-out 1;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(124, 196, 190, 0.4); transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { box-shadow: 0 0 0 14px rgba(124, 196, 190, 0); transform: scale(1); }
}


/* 7. MOTION
   ========================================================================== */

/* Fade and rise on scroll. Only when JS runs (it adds .js to <html>). */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}