/* ============================================================
   Smile Simulator — site stylesheet
   Structure, layout, and components. All brand values come
   from tokens.css. Load tokens.css BEFORE this file.
   ============================================================ */

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

p { margin: 0; }
/* The UA gives <figure> a 40px side margin, which silently narrows any
   figure used as a grid/flex child. */
figure { margin: 0; }
img { max-width: 100%; display: block; }

/* Link colouring deliberately excludes buttons, so link state and button
   variant can never fight over `color`.
   Why :where(): it contributes ZERO specificity, so these rules stay exactly
   as weak as a bare `a` (0,0,1) and `a:hover` (0,1,1). A plain :not(.btn)
   would raise them to (0,1,1)/(0,2,1) and start overriding component rules
   like .nav-login. Without the exclusion, `a:hover` (0,1,1) outweighs
   `.btn` (0,1,0) and every button label flips to the link colour on hover. */
a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:not(:where(.btn)) { color: var(--link); }
a:not(:where(.btn)):hover { color: var(--link-hover); }

/* Focus ring uses `outline`, deliberately NOT box-shadow.
   box-shadow is unsafe for focus: every component that sets its own shadow
   (.btn, .card) has equal specificity (0,1,0) and lands later in this file,
   so it silently wins and the focus ring vanishes on exactly the elements
   that need it most. `outline` is a separate property that no component here
   declares, so nothing can clobber it, and modern browsers draw it following
   border-radius. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* On indigo/dark surfaces the blue ring has too little contrast to see. */
.nav :focus-visible,
.section-dark :focus-visible,
.footer :focus-visible {
  outline-color: var(--ss-white);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -6);
  z-index: 400;
  padding: var(--space-3) var(--space-5);
  background: var(--ss-white);
  color: var(--brand);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: top var(--dur-med) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Container ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-desktop);
}

/* ---------- Section rhythm ---------- */
.section { padding: var(--space-13) 0; }
.section-soft { background: var(--surface-soft); }
.section-dark { background: var(--surface-dark); color: var(--text-on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--text-on-dark); }
.section-dark p { color: rgba(255, 255, 255, 0.92); }

/* Reusable diagonal section endings. Alternate the direction on neighboring
   sections to create a balanced rhythm while keeping one consistent slope. */
.section-slant {
  --section-slope: var(--space-10);
  position: relative;
  margin-bottom: calc(0px - var(--section-slope));
  padding-bottom: calc(var(--space-13) + var(--section-slope));
}
.section-slant-left {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--section-slope)), 0 100%);
}
.section-slant-right {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--section-slope)));
}

/* Flanking em dashes are pseudo-elements so the 17 labels stay plain text.
   Deliberately inline-block rather than inline-flex: as flex items the dashes
   would be pinned to the container edges once a long label wrapped, stranding
   them away from the words. Inline, they wrap with the text they bracket. */
.section-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.section-label::before { content: "\2014"; margin-right: var(--space-2); }
.section-label::after { content: "\2014"; margin-left: var(--space-2); }
.section-dark .section-label { color: var(--accent-on-dark); }

.section-header { max-width: 720px; margin-bottom: var(--space-9); }
.section-header.is-centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-header h2 { font-size: var(--fs-h2); }
.section-header p {
  margin-top: var(--space-4);
  font-size: var(--fs-body-lg);
  color: var(--text-body);
}
.section-dark .section-header p { color: var(--text-on-dark-muted); }

/* ---------- Buttons ----------
   VARIANT API. A variant sets ONLY the custom properties below. It must not
   declare background / color / box-shadow directly, and no state rule
   (:hover, :active) may re-declare a colour. State rules read the same
   variables the variant sets, so a variant and a state can never fight over
   specificity, and source order never decides a colour.

   To add a variant, set only these:
     --btn-bg            background colour
     --btn-bg-image      background image (gradient) or none
     --btn-fg            label colour
     --btn-ring          inset ring (we use no borders), rest state
     --btn-ring-hover    inset ring on hover
     --btn-shadow        outer shadow, rest state
     --btn-shadow-hover  outer shadow on hover

   The ring/shadow defaults are fully transparent shadows rather than `none`
   so every button always composites the same two-shadow list, which keeps
   box-shadow transitions smooth instead of snapping. */
.btn {
  --btn-bg: transparent;
  --btn-bg-image: none;
  --btn-fg: var(--brand);
  --btn-ring: 0 0 0 0 rgba(0, 0, 0, 0);
  --btn-ring-hover: var(--btn-ring);
  --btn-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  --btn-shadow-hover: var(--btn-shadow);
  --btn-lift: -2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  line-height: 1;
  padding: var(--space-4) var(--space-6);
  /* No borders anywhere. Outlined variants use an inset ring instead, so
     every button has an identical box and the primary's sheen can be
     clipped to the full rounded shape with no unsheened rim. */
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;

  background-color: var(--btn-bg);
  background-image: var(--btn-bg-image);
  color: var(--btn-fg);
  box-shadow: var(--btn-ring), var(--btn-shadow);

  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              background-color var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out);
}
.btn:hover {
  transform: translateY(var(--btn-lift));
  box-shadow: var(--btn-ring-hover), var(--btn-shadow-hover);
}
.btn:active { transform: translateY(0); }

.btn-lg { font-size: var(--fs-body); padding: var(--space-5) var(--space-7); }

/* Content-section CTAs use a slightly larger label. Hero and header buttons
   sit outside .section, so their established sizing remains unchanged. */
.section .btn { font-size: 15px; }

/* Primary: the slanted brand gradient with the orchid glow. The gradient
   itself never changes on hover, so the button always holds its brand
   colors. A sheen sweeps across instead. */
.btn-primary {
  --btn-bg-image: var(--ss-gradient-btn);
  --btn-fg: var(--ss-white);
  --btn-shadow: var(--shadow-glow);
  --btn-shadow-hover: 0 14px 38px rgba(232, 132, 243, 0.42);
  /* Sheen colour is a variable because the sweep has to be visible against
     whatever --btn-bg the variant chose: white light reads on the gradient
     but disappears completely on a white button. */
  --btn-sheen: rgba(255, 255, 255, 0.55);

  position: relative;
  overflow: hidden;              /* clips the sheen to the rounded shape.
                                    Does not clip the glow: box-shadow is
                                    painted outside the overflow area. */
}

/* The sheen: a soft, skewed band of light parked just off the left edge.
   Skewed to sit at the same slant as the gradient, and taller than the
   button so the slant never leaves a gap at the corners. */
.btn-primary::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 42%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--btn-sheen) 50%,
    transparent 100%
  );
  transform: translateX(-165%) skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover::after {
  animation: btn-sheen 1050ms var(--ease-out) 1;
}

@keyframes btn-sheen {
  from { transform: translateX(-165%) skewX(-18deg); }
  to   { transform: translateX(340%) skewX(-18deg); }
}

/* Primary buttons ON a dark indigo surface cannot stay gradient: the
   gradient's midpoint is the same indigo as those backgrounds, so the button
   loses its centre against them. Every dark surface takes the same
   replacement — solid white with a deep indigo label — so a CTA reads
   identically whether it sits in the nav or in a dark section. White on
   indigo is also the strongest contrast available here (12.6:1). Scoped by
   context rather than hardcoded to a component, so future dark-surface CTAs
   are covered automatically. The sheen is untouched: it lives on ::after and
   still sweeps. */
.nav .btn-primary,
.section-dark .btn-primary {
  --btn-bg-image: none;
  --btn-bg: var(--ss-white);
  --btn-fg: var(--brand);
  /* Indigo rather than white: a white sheen over a white button is a no-op. */
  --btn-sheen: rgba(var(--ss-deep-indigo-rgb), 0.16);
}
/* The nav CTA moves its icon on hover instead of lifting, so the lift is
   switched off here rather than by overriding transform in a state rule. */
.nav .btn-primary { --btn-lift: 0; }

/* Secondary: sits on light surfaces. Ringed in a soft indigo tint rather
   than a neutral grey, so it reads as part of the brand palette. */
.btn-secondary {
  --btn-bg: var(--surface-card);
  --btn-fg: var(--text-heading);
  --btn-ring: inset 0 0 0 2px var(--ss-indigo-100);
  --btn-ring-hover: inset 0 0 0 2px var(--ss-vivid-blue);
  --btn-shadow: var(--shadow-sm);
  --btn-shadow-hover: var(--shadow-md);
}

/* Ghost: for use on dark/indigo surfaces. Inverts to a solid white button
   on hover, which is a colour change, so it is expressed as variables. */
.btn-ghost {
  --btn-fg: var(--ss-white);
  --btn-ring: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
  --btn-ring-hover: inset 0 0 0 2px var(--ss-white);
}
.btn-ghost:hover {
  --btn-bg: var(--ss-white);
  --btn-fg: var(--brand);
}

/* White: solid white button for pairing with .btn-ghost on a gradient
   band (e.g. the final CTA), where two gradient-on-gradient buttons would
   risk the same midpoint-blending problem the nav CTA had. */
.btn-white {
  --btn-bg: var(--ss-white);
  --btn-fg: var(--brand);
  --btn-shadow: var(--shadow-md);
  --btn-shadow-hover: var(--shadow-lg);
}
.btn-white:hover { --btn-fg: var(--accent-hover); }

.btn-block { width: 100%; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--ss-indigo-100);
  color: var(--brand);
}
.badge-orchid { background: var(--ss-orchid-100); color: var(--ss-orchid-600); }
.badge-blue { background: var(--ss-blue-100); color: var(--ss-blue-700); }
:root[data-theme="dark"] .badge { color: var(--text-heading); }
:root[data-theme="dark"] .badge-orchid { color: var(--accent-on-dark); }
:root[data-theme="dark"] .badge-blue { color: var(--accent); }

/* ---------- Utility ---------- */
.gradient-text {
  background: var(--ss-gradient-diagonal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-accent { color: var(--accent); }

/* ============================================================
   Navigation — always-collapsed slide-out menu
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--nav-surface);
}
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  height: var(--nav-height);
}
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: 52px; width: auto; }

.nav-links {
  display: flex;
  align-items: stretch;
  height: 100%;
  justify-self: end;
}
.nav-item { position: relative; height: 100%; }
.nav-item > a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  padding: 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.nav-item > a:hover,
.nav-item.is-active > a { color: var(--ss-white); }
.nav-item > a svg { width: 12px; height: 12px; transition: transform var(--dur-med) var(--ease-out); }
.nav-item:hover > a svg { transform: rotate(180deg); }

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: var(--space-2);
  background: var(--ss-white);
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  box-shadow: var(--shadow-xl);
  z-index: 300;
}
.nav-item:hover .dropdown { display: block; }
.dropdown a {
  display: block;
  padding: 11px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text-body);
}
.dropdown a:hover { background: var(--surface-soft); color: var(--brand); }

.nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-5);
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 52px;
  height: 28px;
  padding: 3px;
  border: 1px solid var(--theme-toggle-border);
  border-radius: var(--radius-pill);
  background: var(--theme-toggle-track);
  color: var(--theme-toggle-icon);
  cursor: pointer;
  transition: background-color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              filter var(--dur-med) var(--ease-out);
}
.theme-toggle:hover { background: var(--theme-toggle-track-hover); }
.theme-toggle svg {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--theme-toggle-knob);
  box-shadow: var(--shadow-sm);
}
.theme-toggle .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle {
  justify-content: flex-end;
  border-color: var(--theme-toggle-border);
  background: var(--theme-toggle-track);
  color: var(--theme-toggle-icon);
}
:root[data-theme="dark"] .theme-toggle:hover { background: var(--theme-toggle-track-hover); }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: block;
  background: var(--theme-toggle-knob);
  box-shadow: 0 0 0 1px var(--theme-toggle-knob-ring);
}
.theme-toggle--panel { display: none; }
.nav-login {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.nav-login:hover { color: var(--ss-white); }
/* Font size deliberately not set: inherits the .btn base (14px). */
.nav-cta { padding: var(--space-3) var(--space-5); }
.nav-demo-cta {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  margin: auto var(--space-6) var(--space-6);
}
.nav-panel-login {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 var(--space-6) var(--space-6);
}
.nav-panel-header { display: none; }

/* The nav CTA's hover is the arrow travelling, not the button lifting. */
.nav-cta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav-cta:hover svg { transform: translateX(4px); }

.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ss-white);
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop { display: none; }

/* The primary links stay in the slide-out panel at every viewport width. */
  .nav-links {
    position: fixed;
    top: 0; right: 0; left: auto;
    width: min(86vw, 380px);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    background: var(--nav-surface);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 250;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.nav-open .nav-links { transform: translateX(0); }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 240;
  }
  body.nav-open .nav-backdrop { display: block; }
  body.nav-open { overflow: hidden; }

  .nav-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  .nav-panel-controls { display: flex; align-items: center; gap: var(--space-2); }
  .nav-panel-logo-link img { height: 40px; width: auto; }
  .nav-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    color: var(--ss-white);
    cursor: pointer;
  }
  .nav-panel-close svg { width: 22px; height: 22px; }

  .nav-item {
    height: auto;
    position: static;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  .nav-item > a {
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    height: auto;
    font-size: var(--fs-body);
  }
  .nav-item > a svg { width: 14px; height: 14px; }
  .nav-item.open > a svg { transform: rotate(180deg); }

  .dropdown {
    display: none;
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0 0 var(--space-3);
    min-width: 0;
  }
  .nav-item:hover .dropdown { display: none; }
  .nav-item.open .dropdown { display: block; }
  .dropdown a { color: rgba(255, 255, 255, 0.78); padding: var(--space-3) var(--space-6); }
  .dropdown a:hover { background: rgba(255, 255, 255, 0.08); color: var(--ss-white); }

@media (max-width: 1024px) {
  .nav-inner { height: var(--nav-height-mobile); grid-template-columns: auto 1fr; }
  .nav-logo img { height: 44px; }
  .nav-actions .nav-login { display: none; }
}

@media (max-width: 640px) {
  .nav-inner { gap: var(--space-2); }
  .nav-logo img { width: 120px; height: auto; }
  .nav-actions { gap: var(--space-2); }
  .nav-cta {
    gap: var(--space-2);
    padding: var(--space-3);
    font-size: 13px;
  }
  .nav-cta svg { display: none; }
  .nav-burger { width: 40px; height: 44px; padding: 0 var(--space-2); }
  .theme-toggle--desktop { display: none; }
  .theme-toggle--panel { display: inline-flex; }
}

@media (max-width: 500px) {
  .nav-logo img { width: 136px; }
}

@media (max-width: 360px) {
  .nav-inner { gap: var(--space-2); }
  .nav-logo img { width: 120px; }
  .nav-actions { gap: var(--space-2); }
  .nav-cta { padding: 10px 12px; font-size: 12px; }
  .nav-burger { width: 36px; height: 40px; padding: 0 5px; }
}

/* ============================================================
   Hero
   ============================================================ */
/* Content-sized rather than viewport-filling so the next section enters the
   page sooner and the paired media stays the visual focus. */
.hero {
  --hero-slope: var(--space-10);
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-bottom: calc(-1 * var(--hero-slope));
  padding: var(--space-12) 0 calc(var(--space-12) + var(--hero-slope));
  background: var(--surface-tech);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-slope)), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-slope)), 0 100%);
}
.hero > .container { width: 100%; }
/* Dot grid, masked to fade out before it reaches the edges so it reads as
   texture behind the content rather than as a pattern with a border. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(72% 68% at 50% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(72% 68% at 50% 50%, #000 0%, transparent 78%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-9);
  align-items: center;
}
.hero h1 {
  font-size: 52px;
  line-height: 1.08;
  margin-top: var(--space-5);
}
.hero h1 .text-accent {
  display: inline-block;
  white-space: nowrap;
}
.hero-lede {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  margin-top: var(--space-5);
  max-width: 520px;
}
/* Stacked lede paragraphs (e.g. a multi-paragraph split section) get a
   tighter gap between themselves than the larger gap under the heading. */
.hero-lede + .hero-lede { margin-top: var(--space-4); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
/* Modifiers for reuse as a standalone "CTA row" outside the hero: centered
   under a section, and/or a bigger gap when it follows a grid rather than
   a paragraph. */
.hero-actions.is-centered { justify-content: center; }
.hero-actions.is-spaced { margin-top: var(--space-9); }
.hero-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-body);
  margin-top: var(--space-4);
}
.hero-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }

.hero-panel {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

/* Hero before/after — the panel's visual is a two-up: the patient's own
   photo beside the simulated result looping silently. Both cells are locked
   to one aspect ratio and cropped to fill, so a portrait photo and a taller
   phone-shot video still read as a matched pair. */
.hero-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  width: 100%;
  position: relative;
  align-items: start;
  padding: var(--space-3) 0 var(--space-7);
}
.hero-compare-item {
  position: relative;
  margin: 0;
  padding-bottom: var(--space-6);
}
.hero-compare-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-soft);
  box-shadow: var(--shadow-lg);
}
.hero-compare-media img,
.hero-compare-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-compare-media video { transform: scale(1.01); }
.hero-compare-caption {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 60px;
  padding: var(--space-3);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-heading);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.hero-compare-caption-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}
.hero-compare-caption-icon.is-after {
  color: var(--ss-white);
  background: var(--accent);
  border-color: var(--accent);
}
.hero-compare-caption-icon svg { width: 19px; height: 19px; }
.hero-compare-arrow {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--accent);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
}
.hero-compare-arrow svg { width: 24px; height: 24px; }

@media (max-width: 1024px) {
  .hero {
    --hero-slope: var(--space-9);
    padding: var(--space-11) 0 calc(var(--space-11) + var(--hero-slope));
  }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-panel { max-width: 720px; }
  /* No order override here — .hero-panel (the before/after media) stays in
     its natural DOM position, after .hero-text, once the grid stacks to one
     column. Text centers to match, since a left-aligned block reading
     against a centered heading/CTA row below it looks unbalanced once
     there's no second column to justify the left edge against. */
  .hero-text { text-align: center; }
  .hero-actions { justify-content: center; }
  .hero h1 { font-size: 40px; }
  .hero-lede { max-width: none; }
}
@media (max-width: 640px) {
  .hero {
    --hero-slope: var(--space-7);
    padding: var(--space-10) 0 calc(var(--space-10) + var(--hero-slope));
  }
  .hero h1 { font-size: 32px; }
  .hero h1 .text-accent { display: inline; white-space: normal; }
  .hero-compare { gap: var(--space-4); padding-bottom: var(--space-6); }
  .hero-compare-item { padding-bottom: var(--space-5); }
  .hero-compare-caption {
    left: var(--space-1);
    right: var(--space-1);
    min-height: 48px;
    gap: var(--space-1);
    padding: var(--space-2);
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .hero-compare-caption-icon { width: 24px; height: 24px; }
  .hero-compare-caption-icon svg { width: 15px; height: 15px; }
  .hero-compare-arrow { top: 40%; width: 40px; height: 40px; }
  .hero-compare-arrow svg { width: 19px; height: 19px; }
  .hero-actions .btn { width: 100%; }
}

/* ============================================================
   Page hero — inner-page header. Carries the page's single h1.
   ============================================================ */
/* Same tech surface and dot grid as the homepage .hero, so an inner page's
   header reads as the same family of page opening rather than a flat band. The
   mask is taller and narrower than the homepage's: a page hero is a short,
   centered column of text, so the fade has to reach the top and bottom edges
   over much less vertical room. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 80px 0;
  background: var(--surface-tech);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(68% 92% at 50% 50%, #000 0%, transparent 82%);
  mask-image: radial-gradient(68% 92% at 50% 50%, #000 0%, transparent 82%);
}
.page-hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.page-hero h1 { font-size: var(--fs-h1); }
.page-hero p {
  margin-top: var(--space-4);
  font-size: var(--fs-body-lg);
  color: var(--text-body);
}

@media (max-width: 1024px) {
  .page-hero { padding: 56px 0; }
  .page-hero h1 { font-size: 34px; }
}
@media (max-width: 640px) {
  .page-hero { padding: 40px 0; }
  .page-hero h1 { font-size: 28px; }
}

/* ============================================================
   Contact page
   ============================================================ */
.contact-section { padding: var(--space-10) 0; }
.contact-card {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.required-mark { color: var(--accent); }
.contact-form {
  display: grid;
  gap: var(--space-5);
}
.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.contact-field {
  display: grid;
  gap: var(--space-2);
}
.contact-field label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  background: var(--surface-page);
  color: var(--text-body);
  font: inherit;
}
.contact-field input,
.contact-field select {
  min-height: 48px;
  padding: 0 var(--space-4);
}
.contact-field textarea {
  min-height: 144px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}
.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover { border-color: var(--brand); }
.contact-form .btn { justify-self: start; }

@media (max-width: 640px) {
  .contact-section { padding: var(--space-9) 0; }
  .contact-card { padding: var(--space-6); }
  .contact-form-row { grid-template-columns: 1fr; }
  .inner-page .contact-field { text-align: left; }
  .contact-form .btn { width: 100%; }
}

/* ============================================================
   Live demo page
   ============================================================ */
/* The tech surface and dot grid this page used to declare for itself are the
   shared .page-hero treatment now, so all that is left here is the width: the
   demo page carries a longer intro than the other page heroes. */
.demo-page .page-hero-inner { max-width: 820px; }
.demo-page .page-hero-inner > p {
  max-width: 660px;
  margin-right: auto;
  margin-left: auto;
}
.section.demo-section { padding: var(--space-9) 0; }
#simulator-demo {
  display: flex;
  justify-content: center;
}
.demo-placeholder {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.demo-placeholder-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-gradient-btn);
  color: var(--ss-white);
  box-shadow: var(--shadow-lg);
}
.demo-placeholder-icon svg { width: 34px; height: 34px; }
.demo-placeholder-label {
  display: inline-flex;
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(var(--ss-deep-indigo-rgb), 0.08);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-heading);
}
.demo-placeholder h2 { font-size: var(--fs-h2); }
.demo-placeholder p {
  margin-top: var(--space-4);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.demo-disclaimer {
  max-width: 860px;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-body);
}

@media (max-width: 640px) {
  .section.demo-section { padding: var(--space-7) 0; }
  .demo-placeholder-icon { width: 64px; height: 64px; }
  .demo-placeholder h2 { font-size: 26px; }
  .demo-placeholder p { font-size: var(--fs-body); }
}

/* ============================================================
   Branded 404 page
   ============================================================ */
.error-page .page-hero { padding: var(--space-12) 0; }
.error-page .page-hero-inner { max-width: 820px; }
.not-found-code {
  display: block;
  margin: 0 0 var(--space-5);
  background: var(--ss-gradient-diagonal);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-family: var(--font-heading);
  font-size: clamp(64px, 10vw, 128px);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.06em;
}
.error-page .page-hero-inner > p {
  max-width: 700px;
  margin: var(--space-4) auto 0;
  color: var(--text-body);
  font-size: var(--fs-body-lg);
}
.error-page .page-hero .hero-actions { margin-top: var(--space-7); }

@media (max-width: 640px) {
  .error-page .page-hero { padding: var(--space-10) 0; }
  .error-page .page-hero-inner > p { font-size: var(--fs-body); }
  .error-page .page-hero .btn { width: 100%; }
}

/* ============================================================
   Steps (how it works)
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}
.steps.is-triple { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
/* Adjacent block margins collapse to whichever is larger, not their sum —
   so this has to clear .section-header's own margin-bottom (space-9,
   48px) outright, not just add to it. Set to the total gap actually
   wanted (80px), which leaves 40px of clear air above the peeking circle
   (40px above the card, set below) once the collapse resolves. */
.section-header + .steps.is-triple { margin-top: var(--space-11); }
.steps.is-triple .step {
  /* Local var so the padding and the dot's pull-up offset (below) can never
     drift out of sync — the dot's overhang is derived from this value. */
  --triple-pad: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--triple-pad);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.steps.is-triple .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.steps.is-triple .step h3 { color: var(--text-heading); font-size: var(--fs-h4); }
.steps.is-triple .step p { color: var(--text-body); font-size: calc(var(--fs-body) + 1px); }
/* Pulled up by its own padding plus half its height, so the circle's
   vertical center lands exactly on the card's top edge. */
.steps.is-triple .step-dot {
  width: 72px;
  height: 72px;
  font-size: 24px;
  margin: calc(-1 * var(--triple-pad) - 36px) auto var(--space-4);
  background: var(--accent);
  color: var(--ss-white);
  border: 2px solid var(--ss-white);
}
.step { text-align: center; }
.step-dot {
  counter-increment: step;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ss-white);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.step-dot::before { content: counter(step); }
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.step p { color: var(--text-body); font-size: var(--fs-sm); }

/* Homepage setup flow: one lightweight connected process instead of three
   independent cards. The numbered markers remain the strongest visual cue. */
.steps.is-triple.setup-flow {
  position: relative;
  max-width: 1200px;
  margin: var(--space-11) auto 0;
  padding: 0;
  list-style: none;
  gap: var(--space-12);
}
.setup-flow::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 27px;
  left: calc(16.666% + 28px);
  right: calc(16.666% + 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--highlight));
  opacity: 0.55;
}
.steps.is-triple.setup-flow .step {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.steps.is-triple.setup-flow .step:hover {
  transform: none;
  box-shadow: none;
}
.steps.is-triple.setup-flow .step-dot {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-5);
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: var(--ss-gradient-btn);
  font-size: var(--fs-h4);
  box-shadow: 0 0 0 8px var(--surface-dark), var(--shadow-md);
}
.section-dark .setup-flow .step h3 {
  color: var(--text-on-dark);
}
.section-dark .setup-flow .step p {
  max-width: 280px;
  margin-inline: auto;
  color: var(--text-on-dark);
  font-size: var(--fs-body);
}
.setup-section .section-header p {
  color: var(--text-on-dark);
}

/* ============================================================
   Timeline — vertical rail whose fill tracks scroll position.

   The rail is two stacked layers on .timeline itself: ::before is the
   full-height unfilled track, ::after is the gradient fill, sized by
   --timeline-fill. JS writes only that one property (see main.js), so
   scrolling never touches layout — just a height on an already-composited
   element. With JS off the track still renders; it simply stays unfilled.
   ============================================================ */
.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: timeline;
  --rail-x: 50%;
}
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--rail-x);
  width: 4px;
  margin-left: -2px;
  border-radius: var(--radius-pill);
}
.timeline::before { bottom: 0; background: var(--ss-indigo-100); }
.timeline::after {
  height: var(--timeline-fill, 0%);
  background: var(--accent);
  /* Painted over the track, so it needs to win the stacking order without
     pulling the items (which sit above both) down with it. */
  z-index: 1;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-9);
  z-index: 2;
}
.timeline-item + .timeline-item { margin-top: var(--space-10); }
/* Alternating sides. The card is the only child that moves; the marker is
   absolutely positioned to the rail and so is unaffected by column order.
   Each card is capped and pushed toward the rail rather than filling its
   half of the container — on a wide viewport a full-column card makes the
   media oversized and strands the copy far from the numbered marker. */
.timeline-item:nth-child(odd) .timeline-card { grid-column: 1; justify-self: end; }
.timeline-item:nth-child(even) .timeline-card { grid-column: 2; justify-self: start; }

.timeline-marker {
  counter-increment: timeline;
  position: absolute;
  left: var(--rail-x);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  /* Unreached markers read as part of the empty track; the ring is the
     section background so the track appears to pass behind, not through. */
  background: var(--ss-indigo-100);
  color: var(--accent);
  box-shadow: 0 0 0 6px var(--surface-soft);
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.timeline-marker::before { content: counter(timeline); }
.timeline-item.is-reached .timeline-marker {
  background: var(--accent);
  color: var(--ss-white);
  transform: translate(-50%, -50%) scale(1.08);
}

.timeline-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.timeline-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.timeline-media { aspect-ratio: 1; background: var(--ss-indigo-100); }
.timeline-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.timeline-text { padding: var(--space-7); }
.timeline-text h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.timeline-text p { color: var(--text-body); font-size: var(--fs-body); }

/* Below 1024px the rail moves to the left edge and every card sits beside
   it in one column, so the alternating layout collapses without reflowing
   the marker logic. */
@media (max-width: 1024px) {
  .timeline { --rail-x: 24px; }
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 72px;
  }
  .timeline-item:nth-child(even) .timeline-card,
  .timeline-item:nth-child(odd) .timeline-card { grid-column: 1; justify-self: stretch; }
  .timeline-card { max-width: none; }
  .timeline-marker { top: 40px; }
}
@media (max-width: 640px) {
  .timeline { --rail-x: 20px; }
  .timeline-item { padding-left: 56px; }
  .timeline-item + .timeline-item { margin-top: var(--space-8); }
  .timeline-marker { width: 40px; height: 40px; font-size: var(--fs-sm); }
  .timeline-text { padding: var(--space-6); }
}

/* ============================================================
   Card grid
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.card p { color: var(--text-body); font-size: var(--fs-sm); }

/* A card whose feature is not on every plan carries a badge beside its
   heading instead of a separate line, so the plan gate reads as part of the
   title rather than a caveat bolted on after. */
.card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card-title-row h3 { margin-bottom: 0; }
.card-title-row .badge { flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   Feature spotlight rows (features page)
   Each feature is its own full-bleed section, cycling plain, soft, and
   dark backgrounds, with a true two-column 50/50 split inside: an icon
   tile on one side, the copy on the other. One idea per band, so a
   headline reads at a glance while scrolling past, instead of a dense
   card grid competing for attention all at once.
   ============================================================ */
.feature-band { padding: var(--space-10) 0; }
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}
.feature-visual { display: flex; justify-content: center; }
.feature-icon-tile {
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-card);
  background: var(--ss-indigo-100);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.feature-icon-tile svg { width: 116px; height: 116px; }
/* Photo or video in place of the icon tile. Portrait simulation media uses the
   same 4:5 frame as the homepage gallery. Product feature artwork opts into a
   larger square modifier so its UI details remain legible without cropping. */
.feature-media {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-soft);
  box-shadow: var(--shadow-lg);
}
.feature-media--square {
  max-width: 520px;
  aspect-ratio: 1;
  translate: 0 0;
  transition: var(--transition-lift);
}
.feature-comparison {
  width: 100%;
  max-width: 520px;
  translate: 0 0;
  transition: var(--transition-lift);
}
.feature-media img,
.feature-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The source is letterboxed a hair inside its own frame; the nudge hides the
   seam that would otherwise show as a dark hairline at the rounded corners. */
.feature-media video { transform: scale(1.01); }

@media (hover: hover) and (pointer: fine) {
  .feature-media--square:hover,
  .feature-comparison:hover {
    translate: 0 var(--card-lift);
    box-shadow: var(--shadow-xl);
  }
}

.feature-eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--accent);
}
.feature-copy h2 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.feature-copy p { font-size: var(--fs-body-lg); color: var(--text-body); }
.feature-copy .card-title-row { margin-bottom: var(--space-4); }
.feature-copy .card-title-row h2 { margin-bottom: 0; }
/* The checklist under "Embed on Your Website in Minutes" reuses the
   pricing plan's checkmark list verbatim: same meaning (included items),
   same treatment, no need for a second component. */
.feature-copy .pricing-features { margin-top: var(--space-6); margin-bottom: 0; }

/* Treatment breadth is a supporting proof point for the core simulation,
   so it sits between feature one and the remaining feature spotlights. */
.treatment-options-section { scroll-margin-top: var(--space-13); }
.treatment-options-section .section-header { margin-inline: auto; }
.treatment-featured {
  max-width: 900px;
  margin: 0 auto var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--ss-gradient-diagonal);
  color: var(--text-on-dark);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.treatment-featured-label {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.treatment-featured h3 { color: var(--text-on-dark); }
.treatment-featured p {
  max-width: 620px;
  margin: var(--space-3) auto 0;
  color: var(--text-on-dark-muted);
  font-size: var(--fs-body-lg);
}
.treatment-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}
.treatment-group {
  padding: var(--space-7);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}
.treatment-group h3 {
  min-height: 48px;
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.treatment-group ul {
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}
.treatment-group li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  color: var(--text-body);
  line-height: var(--lh-snug);
  transition: color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}
.treatment-group li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: translateY(-50%);
  transition: left var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.treatment-group li + li { border-top: 1px solid var(--border-soft); }
@media (hover: hover) and (pointer: fine) {
  .treatment-group li:hover {
    padding-left: calc(var(--space-6) + var(--space-1));
    color: var(--accent);
  }
  .treatment-group li:hover::before {
    left: var(--space-1);
    background: var(--highlight);
  }
}
.treatment-request {
  max-width: 760px;
  margin: var(--space-8) auto 0;
  padding: var(--space-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.related-link { margin-top: var(--space-3); font-weight: var(--fw-semibold); }
.related-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.related-link a::after { content: "\2192"; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ss-indigo-100);
  color: var(--text-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.pipeline-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.pipeline-stages span {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ss-indigo-100);
  color: var(--text-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.pipeline-stages svg { width: 16px; height: 16px; color: var(--border-strong); flex-shrink: 0; }

/* A band that lands on .section-dark needs its own contrast pass: the
   light-indigo fills used everywhere else (icon tile, chips, pipeline
   pills, checklist text) go muddy against the deep indigo section
   background, and the eyebrow's default accent blue is too close in
   value to read against it. --accent-on-dark is the same fix already
   used for .section-label in a dark section. */
.section-dark .feature-icon-tile { background: rgba(255, 255, 255, 0.14); color: var(--ss-white); }
.section-dark .feature-eyebrow { color: var(--accent-on-dark); }
.section-dark .feature-copy p { color: rgba(255, 255, 255, 0.92); }
.section-dark .chip,
.section-dark .pipeline-stages span { background: rgba(255, 255, 255, 0.14); color: var(--ss-white); }
.section-dark .pipeline-stages svg { color: rgba(255, 255, 255, 0.4); }
.section-dark .pricing-features li { color: rgba(255, 255, 255, 0.92); }
/* The tick is normally filled with --ss-gradient-btn, which passes through
   --ss-deep-indigo at its 40% stop — the exact colour of --surface-dark. On a
   dark band the middle of every tick was therefore painted in the background
   colour and vanished. Solid white on dark instead, and a soft disc behind it
   so the mark reads as deliberate rather than as a stray glyph. */
.section-dark .pricing-features li::before {
  background: var(--ss-white);
  /* Above the disc below. Both are positioned, so this orders them explicitly
     rather than relying on ::after coming later in paint order and covering
     the tick — and it avoids a negative z-index, which would resolve against
     the section rather than the list item. */
  z-index: 1;
}
.section-dark .pricing-features li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -4px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  z-index: 0;
}

@media (max-width: 1024px) {
  /* Icon on top, copy below, on every row regardless of its desktop side,
     matching the site's stacked text+image convention. */
  .feature-row { grid-template-columns: 1fr; gap: var(--space-7); }
  .feature-visual { order: -1; }
  .feature-icon-tile { width: 240px; height: 240px; }
  .feature-icon-tile svg { width: 84px; height: 84px; }
  .feature-media { max-width: 260px; }
  .feature-media--square { max-width: 520px; }
  .treatment-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treatment-group:last-child { grid-column: 1 / -1; }
  .treatment-group h3 { min-height: 0; }
}
@media (max-width: 640px) {
  .feature-band { padding: var(--space-8) 0; }
  .feature-icon-tile { width: 160px; height: 160px; }
  .feature-icon-tile svg { width: 56px; height: 56px; }
  .feature-media { max-width: 220px; }
  .feature-media--square { max-width: 100%; }
  .treatment-featured { padding: var(--space-7) var(--space-6); }
  .treatment-groups { grid-template-columns: 1fr; }
  .treatment-group:last-child { grid-column: auto; }
  .treatment-group { padding: var(--space-6); }
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--ss-indigo-100);
  color: var(--accent);
}
.card-icon svg { width: 24px; height: 24px; }

/* The homepage benefit cards carry more copy than the shared card pattern.
   Give that copy full body sizing and make the hover state feel intentional
   without implying that the non-clickable cards are controls. `translate`
   stays independent from the scroll-reveal animation's `transform`. */
.benefits-section .card {
  position: relative;
  overflow: hidden;
  translate: 0 0;
  /* The transition is declared with the other lifting cards, next to .reveal. */
}
.benefits-section .card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--ss-gradient-btn);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.benefits-section .card p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.benefits-section .card-icon {
  transition: transform var(--dur-slow) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .benefits-section .card:hover {
    translate: 0 var(--card-lift);
    border-color: var(--ss-indigo-100);
    box-shadow: var(--shadow-xl);
  }
  .benefits-section .card:hover::before { transform: scaleX(1); }
  .benefits-section .card:hover .card-icon {
    transform: translateY(-2px) scale(1.06);
    background: var(--ss-gradient-btn);
    color: var(--ss-white);
    box-shadow: var(--shadow-md);
  }
}

/* ============================================================
   Split (text + image)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}
.split-image img { border-radius: var(--radius-card); box-shadow: var(--shadow-lg); }

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: var(--space-7); }
  .split-image { order: -1; position: static; }
}

/* A lighter, smaller alternative to .hero-panel for split sections telling
   a shorter story (one image + one line), so every image-carrying section
   doesn't reuse the exact hero treatment. */
.split-visual {
  border-radius: var(--radius-card);
  padding: var(--space-9);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
/* border-radius/box-shadow: 0/none override .split-image img. That rule is
   meant for photos; this panel holds mark-mouth.webp, a transparent PNG, and
   a box-shadow on a transparent image paints a visible rectangle behind the
   invisible pixels. Same reason the hero panel uses drop-shadow filter
   instead of box-shadow for this exact image. */
.split-visual img {
  width: 62%;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 10px 20px rgba(3, 35, 78, 0.18));
}
.split-visual-caption {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  color: var(--text-heading);
  text-align: center;
}

/* ============================================================
   Example results — the same side-by-side view patients receive.
   ============================================================ */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-7);
  row-gap: var(--space-10);
}

.results-showcase,
.pricing-section,
.faq-section {
  scroll-margin-top: var(--nav-height);
}
.results-showcase .section-header {
  margin-bottom: var(--space-11);
}

.results-showcase .hero-actions {
  margin-top: var(--space-11);
}

.result-example {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}

.result-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: end;
}

.result-side {
  position: relative;
  min-width: 0;
}

.result-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.result-media img,
.result-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-media video {
  transform: scale(1.01);
}
.result-media .result-video--bonding {
  transform: scale(1.25);
}
.result-media [hidden] { display: none; }

.result-label {
  display: block;
  margin-top: var(--space-2);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.result-mode-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: inline-flex;
  transform: translate(-50%, calc(-100% - var(--space-2)));
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: rgba(var(--ss-deep-indigo-rgb), 0.72);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

.result-mode {
  min-width: 48px;
  min-height: 28px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.result-mode.is-active {
  color: var(--ss-white);
  background: var(--ss-gradient-btn);
  box-shadow: 0 2px 8px rgba(88, 80, 236, 0.32);
}

.result-mode:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.result-caption {
  padding-top: var(--space-4);
  margin-top: var(--space-3);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--text-heading);
  border-top: 1px solid var(--border-soft);
}
/* ============================================================
   Stats band — large numbers on a dark section.
   ============================================================ */
.stats-section .section-header { max-width: 920px; }
.stats-section .section-header p {
  max-width: 760px;
  margin-inline: auto;
  color: var(--text-on-dark);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  text-align: center;
}
/* Same hover as .benefits-section .card. `translate` rather than `transform`,
   so the lift stays independent of the scroll-reveal's transform. The
   transition is declared with the other lifting cards, next to .reveal. */
.stat {
  position: relative;
  overflow: hidden;
  padding: var(--space-7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  box-shadow: 0 16px 40px rgba(3, 17, 52, 0.22);
  translate: 0 0;
}
.stat-number {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: 44px;
  line-height: var(--lh-tight);
  color: var(--accent-on-dark);
  transition: transform var(--dur-slow) var(--ease-out);
}
.stat-label {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-on-dark);
}

@media (hover: hover) and (pointer: fine) {
  .stats-section .stat:hover,
  .stats-section .stat:focus-within {
    translate: 0 var(--card-lift);
    border-color: rgba(232, 132, 243, 0.62);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08));
    box-shadow: 0 22px 48px rgba(3, 17, 52, 0.3), 0 10px 28px rgba(232, 132, 243, 0.12);
  }
  .stats-section .stat:hover .stat-number,
  .stats-section .stat:focus-within .stat-number { transform: scale(1.06); }
}

/* ============================================================
   Differentiation comparison table
   ============================================================ */
.comparison-section,
.team-section {
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-tech);
}
.comparison-section::before,
.team-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(72% 68% at 50% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(72% 68% at 50% 50%, #000 0%, transparent 78%);
}
.comparison-section .section-header { max-width: 820px; }
.comparison-table-wrap {
  max-width: 1060px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.comparison-table th,
.comparison-table td {
  padding: var(--space-6);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}
.comparison-table thead th {
  background: var(--surface-soft);
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}
.comparison-table thead th:first-child {
  width: 22%;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-body);
}
.comparison-table thead th:nth-child(3) {
  background: var(--brand);
  color: var(--ss-white);
}
.comparison-table tbody th {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}
.comparison-table tbody td {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.comparison-table tbody td:nth-child(2) { background: var(--surface-soft); }
.comparison-table tbody td:nth-child(3) { background: rgba(var(--ss-deep-indigo-rgb), 0.045); }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }
.comparison-cell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.comparison-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
}
.comparison-status svg { width: 16px; height: 16px; }
.comparison-status--neutral {
  background: var(--ss-indigo-100);
  color: var(--brand);
}
.comparison-status--no {
  background: rgba(var(--ss-deep-indigo-rgb), 0.08);
  color: var(--text-body);
}
.comparison-status--yes {
  background: rgba(30, 158, 106, 0.12);
  color: var(--success);
}

@media (max-width: 640px) {
  .comparison-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .comparison-table,
  .comparison-table tbody { display: block; }
  .comparison-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .comparison-table tbody tr {
    display: block;
    overflow: hidden;
    margin-bottom: var(--space-6);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--surface-card);
    box-shadow: var(--shadow-md);
  }
  .comparison-table tbody tr:last-child { margin-bottom: 0; }
  .comparison-table tbody th,
  .comparison-table tbody td {
    display: block;
    width: 100%;
    padding: var(--space-5);
    border-bottom: 0;
  }
  .comparison-table tbody th {
    background: var(--brand);
    color: var(--ss-white);
  }
  .comparison-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-heading);
  }
  .comparison-table tbody td:nth-child(3) {
    border-top: 1px solid var(--border-soft);
  }
}

/* ============================================================
   Team grid
   ============================================================ */
.team-section .section-header { max-width: 960px; }
.team-section .section-header h2 { text-wrap: balance; }
.team-heading-lock { white-space: nowrap; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  max-width: 1120px;
  margin: 0 auto;
}
/* Same hover as .benefits-section .card, down to the gradient bar that sweeps
   in from the left: overflow clips that bar to the rounded corners. The
   transition is declared with the other lifting cards, next to .reveal. */
.team-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-7);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  translate: 0 0;
}
.team-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--ss-gradient-btn);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Headshot, cut to a transparent-cornered circle. No background colour: the
   photo's own circle sits a hair inside the element's, so any fill would
   surface as a thin bright ring around every face. */
.team-avatar {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-pill);
  object-fit: cover;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.team-card h3 { font-size: var(--fs-h4); }
.team-role {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--accent);
}
.team-company {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-heading);
}
.team-bio {
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover,
  .team-card:focus-within {
    translate: 0 var(--card-lift);
    border-color: var(--ss-indigo-100);
    box-shadow: var(--shadow-xl);
  }
  .team-card:hover::before,
  .team-card:focus-within::before { transform: scaleX(1); }
  .team-card:hover .team-avatar,
  .team-card:focus-within .team-avatar {
    transform: translateY(-2px) scale(1.06);
    box-shadow: var(--shadow-lg);
  }
}

/* ============================================================
   FAQs
   ============================================================ */
.faq-section .section-header { max-width: 860px; }
.faq-list {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-4);
}

/* Full /faqs/ page: the same .faq-list/.faq-item styling as the homepage
   teaser, grouped under a heading per category so eighteen questions read as
   a table of contents rather than one long list. */
.faq-groups {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-11);
}
.faq-group h2 {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h3);
}
.faq-group .faq-list { max-width: none; margin: 0; }
.faq-item {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.faq-item[open] {
  border-color: var(--ss-indigo-100);
  box-shadow: var(--shadow-md);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* An SVG child, not a ::after text glyph. A "+" character's ink never sits
   dead-center in its own em box, so flex-centering the glyph still reads as
   off-center; an SVG has no font metrics to fight and centers exactly. */
.faq-toggle {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-indigo-100);
  color: var(--accent);
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out);
}
.faq-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-med) var(--ease-out);
}
.faq-item[open] .faq-toggle {
  background: var(--accent);
  color: var(--ss-white);
}
.faq-item[open] .faq-toggle svg { transform: rotate(180deg); }
.faq-item summary:focus-visible {
  outline: 3px solid rgba(var(--ss-deep-indigo-rgb), 0.24);
  outline-offset: -3px;
}
.faq-answer { padding: 0 var(--space-7) var(--space-7); }
.faq-answer p {
  max-width: 780px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

@media (hover: hover) and (pointer: fine) {
  .faq-item:hover {
    border-color: var(--ss-indigo-100);
    box-shadow: var(--shadow-md);
  }
}

/* ============================================================
   Pricing plans
   ============================================================ */
.pricing-section .section-header { max-width: 760px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-9);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  translate: 0 0;
  /* Same hover as .benefits-section .card. The transition is declared with the
     other lifting cards, next to .reveal. */
}
.pricing-card--featured {
  border: 2px solid var(--highlight);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}
.pricing-popular {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ss-gradient-btn);
  color: var(--ss-white);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.pricing-card-header { min-height: 88px; }
/* h3 inside the homepage section (under its h2), h2 on the pricing page where
   each plan is a top-level section of the document. Same visual treatment. */
.pricing-card :is(h2, h3) {
  margin-bottom: var(--space-2);
  font-size: var(--fs-h4);
}
.pricing-card-header p {
  font-size: var(--fs-sm);
  color: var(--text-body);
}
.plan-price {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: 44px;
  line-height: var(--lh-tight);
  color: var(--text-heading);
  margin: var(--space-5) 0 var(--space-7);
}
.plan-price .plan-price-currency { font-size: 32px; }
.plan-price .plan-price-period {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  color: var(--text-body);
}
.pricing-features {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.pricing-features li {
  position: relative;
  padding-left: var(--space-7);
  color: var(--text-body);
  line-height: var(--lh-snug);
}
.pricing-features li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--ss-gradient-btn);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricing-card .btn { margin-top: auto; }
.pricing-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.pricing-card > .btn { pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .pricing-card:hover,
  .pricing-card:focus-within {
    translate: 0 var(--card-lift);
    border-color: var(--ss-indigo-100);
    box-shadow: var(--shadow-xl);
  }
  .pricing-card--featured:hover,
  .pricing-card--featured:focus-within {
    border-color: var(--highlight);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
  }
  .pricing-card:hover > .btn {
    transform: translateY(var(--btn-lift));
    box-shadow: var(--btn-ring-hover), var(--btn-shadow-hover);
  }
  .pricing-card:hover > .btn-primary::after {
    animation: btn-sheen 1050ms var(--ease-out) 1;
  }
}

@media (max-width: 1024px) {
  .compare-grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-6); }
  .team-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .result-example { padding: var(--space-3); }
  .result-pair { gap: var(--space-3); }
  .result-mode-toggle { transform: translate(-50%, calc(-100% - var(--space-1))); }
  .result-mode { min-width: 44px; padding-inline: var(--space-2); }
  .results-showcase .section-header { margin-bottom: var(--space-10); }
  .results-showcase .hero-actions { margin-top: var(--space-10); }
  .team-grid { width: 100%; max-width: none; }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: left;
  }
  .stat {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-5);
  }
  .stat-number { font-size: 34px; }
  .stat-label { margin-top: 0; }
  .faq-item summary {
    padding: var(--space-5);
    font-size: var(--fs-body);
  }
  .faq-answer { padding: 0 var(--space-5) var(--space-5); }
  .pricing-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .pricing-card { padding: var(--space-7) var(--space-6); }
  .pricing-card-header { min-height: 0; }
  .plan-price { font-size: 38px; }
}

/* ============================================================
   Three-plan grid (pricing page + homepage summary)
   ============================================================ */
.pricing-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1180px;
}
/* Three across is tighter than two, so the card padding steps down a notch. */
.pricing-grid--triple .pricing-card { padding: var(--space-8) var(--space-7); }
.pricing-grid--triple .pricing-card-header { min-height: 104px; }

.pricing-note {
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-body);
}
/* ============================================================
   Plan comparison table
   ============================================================ */
.plan-table-hint {
  display: none;
  margin-bottom: var(--space-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-body);
}
.plan-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}
.plan-table {
  width: 100%;
  /* Below this the feature labels wrap to three lines and the columns stop
     reading as a comparison, so the wrapper scrolls instead. */
  min-width: 760px;
  border-collapse: collapse;
}
.plan-table thead th {
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  text-align: center;
  vertical-align: bottom;
}
.plan-table-name { display: block; }
.plan-table-cost {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-body);
}
.plan-table tbody th {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  text-align: left;
}
.plan-table td {
  padding: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-body);
  text-align: center;
  vertical-align: middle;
}
.plan-table td strong {
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.plan-table tbody tr + tr :is(th, td) { border-top: 1px solid var(--border-soft); }

/* Growth is column three in both the head (th,th,th,th) and the body
   (th,td,td,td), so one nth-child tints the recommended plan end to end
   without a class on all fifteen cells. */
.plan-table :is(th, td):nth-child(3) { background: var(--surface-accent); }

/* The feature column outruns narrow screens, so it pins while the plans
   scroll under it. Needs its own background to cover the tinted column. */
.plan-table :is(thead th:first-child, tbody th) {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 240px;
  background: var(--surface-card);
}

.plan-table :is(td.is-yes, td.is-no)::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.plan-table td.is-yes::before {
  background: var(--ss-gradient-btn);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* A dash, drawn rather than typed: the source table used an em dash for
   "not included" and site copy carries none. */
.plan-table td.is-no::before {
  background: var(--border-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================
   Tooltips
   ============================================================ */
.tip {
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--space-1);
}
.tip-btn {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--accent);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.tip-btn svg { width: 16px; height: 16px; }
.tip-btn:hover { color: var(--link-hover); }

/* Fixed, not absolute: the bubble has to escape both the table wrapper's
   overflow-x and the section's clip-path, either of which would slice it.
   main.js positions it from the trigger's viewport rect, and also reparents
   it to <body> at load: .reveal animates with transform and fills forwards,
   and any transform on an ancestor (even the identity one left behind) makes
   that ancestor the containing block for position: fixed. Left in the table
   the bubble would resolve against the wrapper instead of the viewport. That
   reparenting is why the state classes below sit on the bubble and not on
   .tip, which is no longer its ancestor. */
.tip-bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 350;
  width: max-content;
  max-width: min(280px, calc(100vw - var(--space-6)));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-darker);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.tip-bubble.is-open {
  opacity: 1;
  visibility: visible;
}
/* --tip-arrow is set by main.js: when the bubble is clamped to the viewport
   edge its centre no longer sits over the trigger, so the arrow is placed
   from the trigger instead of at a fixed 50%. */
.tip-bubble::after {
  content: "";
  position: absolute;
  left: var(--tip-arrow, 50%);
  translate: -50% 0;
  border: 6px solid transparent;
}
.tip-bubble:not(.is-below)::after {
  top: 100%;
  border-top-color: var(--surface-darker);
}
.tip-bubble.is-below::after {
  bottom: 100%;
  border-bottom-color: var(--surface-darker);
}

/* ============================================================
   Add-on packs
   ============================================================ */
.addons-section .section-header p {
  max-width: 560px;
  margin-inline: auto;
}
.addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  max-width: 900px;
  margin: 0 auto;
}
.addon-card {
  --addon-accent: var(--ss-vivid-blue);
  --addon-accent-2: var(--ss-deep-indigo);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: var(--space-8);
  border: 1px solid color-mix(in srgb, var(--addon-accent) 22%, var(--border-soft));
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-card) 93%, var(--addon-accent)), var(--surface-card) 58%);
  box-shadow: var(--shadow-lg);
  text-align: left;
  transition: var(--transition-lift),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.addon-card--video {
  --addon-accent: var(--ss-bright-orchid);
  --addon-accent-2: var(--ss-vivid-blue);
}
.addon-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--space-1);
  background: linear-gradient(90deg, var(--addon-accent-2), var(--addon-accent));
}
.addon-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--addon-accent) 14%, transparent);
  filter: blur(8px);
}
.addon-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--addon-accent-2);
}
.addon-card h3 {
  margin-top: var(--space-4);
  font-size: var(--fs-h4);
}
.addon-credits {
  align-self: flex-start;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--addon-accent) 24%, var(--border-soft));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--addon-accent) 9%, var(--surface-card));
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}
.addon-purchase {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--addon-accent) 18%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-card) 86%, var(--addon-accent));
}
.addon-purchase + .btn { margin-top: var(--space-5); }
.addon-price {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: 48px;
  line-height: var(--lh-tight);
  color: var(--text-heading);
}
.addon-price .addon-price-currency {
  margin-right: 2px;
  font-size: 28px;
  vertical-align: top;
}
.addon-meta {
  max-width: 96px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-body);
}
.addon-footnote {
  max-width: 640px;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-body);
}

@media (hover: hover) and (pointer: fine) {
  .addon-card:hover {
    translate: 0 var(--card-lift);
    border-color: color-mix(in srgb, var(--addon-accent) 58%, var(--border-soft));
    box-shadow: var(--shadow-xl);
  }
}

@media (max-width: 1024px) {
  .pricing-grid--triple {
    grid-template-columns: 1fr;
    gap: var(--space-9);
    max-width: 480px;
  }
  .pricing-grid--triple .pricing-card-header { min-height: 0; }
  .plan-table-hint { display: block; }
}

@media (max-width: 640px) {
  .plan-table-hint { display: none; }
  .plan-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .plan-table {
    display: block;
    min-width: 0;
    border-collapse: separate;
  }
  /* Keep the column headers available to assistive technology while the
     visual mobile layout repeats each plan name inside every feature card. */
  .plan-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .plan-table tbody {
    display: grid;
    gap: var(--space-4);
  }
  .plan-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
  }
  .plan-table tbody th {
    position: static;
    grid-column: 1 / -1;
    min-width: 0;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-soft);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    text-align: center;
  }
  .plan-table tbody td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 88px;
    padding: var(--space-3) var(--space-2);
    border-top: 0;
    background: var(--surface-card);
    text-align: center;
  }
  .plan-table tbody td + td { border-left: 1px solid var(--border-soft); }
  .plan-table tbody tr + tr :is(th, td) { border-top: 0; }
  .plan-table tbody td:nth-child(3) { background: var(--surface-accent); }
  .plan-table tbody td::after {
    order: -1;
    margin-bottom: var(--space-2);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-heading);
  }
  .plan-table tbody td:nth-child(2)::after { content: "Starter"; }
  .plan-table tbody td:nth-child(3)::after { content: "Growth"; }
  .plan-table tbody td:nth-child(4)::after { content: "Pro"; }
  .addon-grid { grid-template-columns: 1fr; max-width: 400px; }
  .addon-card { min-height: 304px; padding: var(--space-7) var(--space-6); }
}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  background: var(--surface-dark);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: var(--space-11) var(--space-9);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: var(--ss-white); font-size: var(--fs-h2); }
.cta-band p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-body-lg);
  margin: var(--space-4) auto 0;
  max-width: 560px;
}
.cta-band .btn { margin-top: var(--space-7); }

/* Homepage demo CTA: a full-width orchid band that leads directly into the
   indigo footer. The content remains container-bound, but there is no card. */
@property --cta-glow-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 420px;
}
.final-cta-section {
  --cta-glow-size: 420px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-12) 0;
  animation: cta-bands-pulse 8s var(--ease-in-out) infinite;
  background:
    radial-gradient(
      circle var(--cta-glow-size) at center,
      var(--ss-bright-orchid) 0% 20%,
      color-mix(in srgb, var(--ss-bright-orchid) 90%, var(--ss-white)) 24% 34%,
      color-mix(in srgb, var(--ss-bright-orchid) 80%, var(--ss-white)) 38% 49%,
      color-mix(in srgb, var(--ss-bright-orchid) 68%, var(--ss-white)) 53% 64%,
      color-mix(in srgb, var(--ss-bright-orchid) 56%, var(--ss-white)) 68% 77%,
      transparent 84%
    ),
    color-mix(in srgb, var(--ss-bright-orchid) 48%, var(--ss-white));
}
@keyframes cta-bands-pulse {
  0%, 100% { --cta-glow-size: 400px; }
  50% { --cta-glow-size: 460px; }
}
.final-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(var(--ss-deep-indigo-rgb), 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 110% at 50% 50%, #000 0%, transparent 82%);
  mask-image: radial-gradient(70% 110% at 50% 50%, #000 0%, transparent 82%);
}
.cta-band--showcase {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cta-band--showcase h2 {
  color: var(--ss-deep-blue);
}
.cta-band--showcase p {
  max-width: 640px;
  color: var(--ss-deep-blue);
  font-weight: var(--fw-semibold);
}
.final-cta-section .btn-primary {
  --btn-bg-image: none;
  --btn-bg: var(--ss-deep-indigo);
  --btn-fg: var(--ss-white);
  --btn-sheen: rgba(255, 255, 255, 0.24);
  --btn-shadow: var(--shadow-lg);
  --btn-shadow-hover: var(--shadow-xl);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--nav-surface);
  color: var(--text-on-dark-muted);
  padding: var(--space-10) 0 var(--space-7);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(160px, 0.7fr));
  align-items: start;
  gap: var(--space-12);
}
.footer-logo {
  display: inline-block;
}
.footer-logo img {
  width: auto;
  height: 48px;
}
.footer-tagline {
  max-width: 440px;
  margin-top: var(--space-5);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Footer column headings are real headings for hierarchy/a11y,
   sized down visually. */
.footer-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ss-white);
  margin: 0 0 var(--space-5);
}
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.footer-links a {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}
.footer-links a:hover { color: var(--ss-white); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-sm);
}
.footer-bottom-note { color: var(--text-on-dark-muted); }

/* ============================================================
   Responsive: grids collapse
   ============================================================ */
@media (max-width: 1024px) {
  .section { padding: var(--space-12) 0; }
  .section.section-slant {
    --section-slope: var(--space-9);
    margin-bottom: calc(0px - var(--section-slope));
    padding-bottom: calc(var(--space-12) + var(--section-slope));
  }
  .container { padding: 0 24px; }
  .steps, .steps.is-triple { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .steps.is-triple.setup-flow { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .card-grid, .card-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(140px, 1fr));
    gap: var(--space-8);
  }
  .section-header h2 { font-size: 28px; }
}
@media (max-width: 640px) {
  .section { padding: var(--space-11) 0; }
  .section.section-slant {
    --section-slope: var(--space-7);
    margin-bottom: calc(0px - var(--section-slope));
    padding-bottom: calc(var(--space-11) + var(--section-slope));
  }
  .container { padding: 0 var(--container-pad-mobile); }
  .steps, .steps.is-triple { grid-template-columns: 1fr; gap: var(--space-7); }
  .steps.is-triple.setup-flow {
    grid-template-columns: 1fr;
    gap: var(--space-9);
    max-width: 420px;
  }
  .setup-flow::before {
    top: 28px;
    bottom: 28px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .steps.is-triple.setup-flow .step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: var(--space-5);
    padding: 0;
    text-align: left;
  }
  .steps.is-triple.setup-flow .step-dot {
    grid-row: 1 / span 2;
    margin: 0;
  }
  .section-dark .setup-flow .step p {
    max-width: none;
    margin-inline: 0;
  }
  .card-grid, .card-grid-2 { grid-template-columns: 1fr; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline {
    max-width: 100%;
    margin-inline: auto;
  }
  .footer-links { align-items: center; }
  .cta-band { padding: var(--space-9) var(--space-6); }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ============================================================
   Inner-page mobile alignment
   The homepage already centers its stacked mobile sections. Inner pages use
   this body hook so their content follows the same rhythm without changing
   the desktop layouts or the homepage's existing component rules.
   ============================================================ */
@media (max-width: 640px) {
  .inner-page main,
  .inner-page .feature-copy,
  .inner-page .pricing-card,
  .inner-page .addon-card {
    text-align: center;
  }

  .inner-page .feature-copy .card-title-row {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .inner-page .pipeline-stages { justify-content: center; }

  /* Treatment categories and rows stay left aligned for faster scanning,
     while the surrounding section heading remains centered. */
  .inner-page .treatment-group { text-align: left; }
  .inner-page .treatment-group li {
    display: grid;
    grid-template-columns: var(--space-2) minmax(0, 1fr);
    justify-content: stretch;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    text-align: left;
  }
  .inner-page .treatment-group li::before {
    position: static;
    transform: none;
  }

  /* Checkmark lists stay left aligned everywhere on mobile, even when the
     surrounding card or feature copy is centered. */
  .pricing-features {
    width: 100%;
    justify-items: start;
    text-align: left;
  }
  .pricing-features li {
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  .inner-page .addon-card { align-items: center; }
  .inner-page .addon-credits { align-self: center; }
  .inner-page .addon-purchase {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .inner-page .addon-meta {
    max-width: none;
    text-align: center;
  }
  .inner-page .addon-card .btn { align-self: stretch; }

  /* Match the homepage FAQ pattern: category headings, questions, and
     answers read from the left, with the disclosure control on the right. */
  .inner-page .faqs-page-section :is(.faq-group, .faq-item, .faq-answer) {
    text-align: left;
  }

  .inner-page .plan-table tbody th { text-align: center; }
}

/* ============================================================
   Scroll reveal
   ============================================================ */
/* A transition, not a @keyframes animation with fill-mode: forwards. The
   revealed end state has to be a real, cascade-computed style, not a frame
   the browser is merely "holding": when a .reveal element scrolls far enough
   off-screen, some browsers evict its compositing layer to reclaim GPU
   memory, and on repromotion occasionally fail to reconstitute a held
   animation frame, repainting the element back at its opacity:0 starting
   keyframe instead. That is what makes cards and FAQ rows vanish after
   scrolling away and back. A transition has no held frame to lose: its end
   state is just the plain .in-view rule below. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: var(--transition-reveal);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Every card that lifts on hover is also a .reveal, and `transition` is a
   shorthand: two rules declaring it on one element do not merge, the winner
   discards the loser. A card that declared only its lift lost the whole
   declaration to .reveal above — same specificity, declared later — so its
   translate had no transition and the lift snapped instantly. That is why
   these are collected here instead of living on each component: every selector
   has to out-specify .reveal, and every one has to name both halves.

   Adding a new lifting card means adding it here, not just giving it a
   :hover. Scoped by an ancestor purely to clear .reveal's specificity. */
.benefits-section .card,
.team-grid .team-card,
.pricing-grid .pricing-card,
.addon-grid .addon-card {
  transition: var(--transition-lift), var(--transition-reveal);
}
/* The stats card also brightens its gradient, which the shared lift list does
   not cover. */
.stats-section .stat {
  transition: var(--transition-lift),
              background var(--dur-med) var(--ease-out),
              var(--transition-reveal);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in-view { opacity: 1; transform: none; }
  .final-cta-section { animation: none; --cta-glow-size: 420px; }
  * { transition: none !important; }
  /* Every card lift reads its distance from this one token, so zeroing it here
     cancels the lift everywhere at once — including on cards added later. */
  :root { --card-lift: 0px; }
  .btn:hover, .card:hover { transform: none; }
  .treatment-group li:hover { padding-left: var(--space-6); }
  .treatment-group li:hover::before { left: 0; }
  .benefits-section .card:hover .card-icon { transform: none; }
  .team-card:hover .team-avatar,
  .team-card:focus-within .team-avatar { transform: none; }
  .stats-section .stat:hover .stat-number,
  .stats-section .stat:focus-within .stat-number { transform: none; }
  /* No sheen sweep, and no arrow travel. The glow still strengthens on
     hover, so the button keeps a clear hover state. */
  .btn-primary:hover::after { animation: none; }
  .nav-cta:hover svg { transform: none; }
}