/*
 * Mystique AI landing theme — loaded ONLY by the 12 landing pages, after
 * /assets/css/style.css (which platform pages also load and must not change).
 * Overrides values, never renames tokens: inline styles in demand/, demo and
 * faq use --primary, --muted-foreground, etc.
 */

:root {
  /* Existing token names, refreshed values */
  --background: #03060C;
  --foreground: #EEF6FF;
  --card: #08101D;
  --card-foreground: #EEF6FF;
  --primary: #4BA3FF;
  --primary-foreground: #031019;
  --secondary: #0F1A2B;
  --secondary-foreground: #C7D6EA;
  --muted: #0B1422;
  --muted-foreground: #A3B2C8;
  --accent: #2F6BFF;
  --border: rgba(110, 200, 255, 0.14);

  /* New: teal-to-blue */
  --teal: #2EE6C9;
  --teal-strong: #5FF5DD;
  --blue: #3B7BFF;
  --grad-brand: linear-gradient(120deg, #2EE6C9 0%, #38BDF8 48%, #3B6CFF 100%);
  --glow-teal: rgba(46, 230, 201, 0.22);
  --glow-blue: rgba(59, 108, 255, 0.22);
  --hairline: rgba(255, 255, 255, 0.07);

  --nav-h: 72px;
}

/* ===== BASE ===== */
html {
  scroll-padding-top: calc(var(--nav-h) + 12px);
  background: var(--background);
}

/* html carries the colour so body's z-index:-1 glow layers stay visible */
body {
  padding-top: var(--nav-h);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page-wide ambient glow: teal top-left, blue top-right */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55vw 45vh at 12% -8%, rgba(46, 230, 201, 0.12) 0%, transparent 62%),
    radial-gradient(55vw 55vh at 92% 4%, rgba(59, 108, 255, 0.14) 0%, transparent 62%),
    radial-gradient(70vw 50vh at 50% 110%, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
}

::selection {
  background: rgba(46, 230, 201, 0.32);
  color: #FFFFFF;
}

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

h1 {
  letter-spacing: -0.03em;
}

h2 {
  letter-spacing: -0.02em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1,
  .consent-page-header h1,
  .legal-main > h1 {
    background: linear-gradient(180deg, #FFFFFF 35%, #B9F3FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .consent-page-header h1 .brand-name {
    color: transparent;
  }
}

/* In-copy links */
.section-intro p a,
.demo-proof-text a,
.pricing-sub a,
.contact-info a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: rgba(46, 230, 201, 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.section-intro p a:hover,
.demo-proof-text a:hover,
.pricing-sub a:hover {
  color: var(--teal-strong);
  text-decoration-color: var(--teal-strong);
}

/* ===== NAVBAR (single row) ===== */
.navbar {
  height: var(--nav-h);
  padding: 0;
  background: rgba(3, 6, 12, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  box-shadow: none;
}

.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(46, 230, 201, 0.35) 30%, rgba(59, 108, 255, 0.35) 70%, transparent 100%);
  pointer-events: none;
}

.navbar .container {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  height: 100%;
  padding: 0 2rem;
}

/* logo.png is 600x300 with the wordmark centred on a dark field: crop to the
   wordmark and let the dark field blend into the nav */
.navbar-brand img {
  width: 184px;
  height: 46px;
  max-width: none;
  object-fit: cover;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}

.navbar-nav {
  gap: 1.75rem;
}

.navbar-nav a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted-foreground);
}

.navbar-nav a:hover {
  color: var(--foreground);
}

.navbar-nav a.active {
  color: var(--foreground);
}

.navbar-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}

@media (min-width: 769px) and (max-width: 1000px) {
  .navbar .container { gap: 1rem; padding: 0 1.25rem; }
  .navbar-nav { gap: 1.05rem; }
  .navbar-nav a { font-size: 0.84rem; }
  .navbar-brand img { width: 156px; height: 40px; }
}

/* Nine nav items: tighten a little more just above the hamburger breakpoint */
@media (min-width: 769px) and (max-width: 860px) {
  .navbar .container { gap: 0.75rem; padding: 0 1rem; }
  .navbar-nav { gap: 0.75rem; }
  .navbar-nav a { font-size: 0.8rem; }
  .navbar-brand img { width: 140px; height: 36px; }
}

/* ===== BUTTONS ===== */
.btn-primary,
.btn-outline {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.8rem 1.75rem;
}

.btn-primary {
  background: var(--grad-brand);
  color: #021018;
  box-shadow: 0 10px 30px rgba(46, 230, 201, 0.16), 0 6px 24px rgba(59, 108, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.btn-primary:hover {
  background: linear-gradient(120deg, #5FF5DD 0%, #5CCBFA 48%, #5B85FF 100%);
  box-shadow: 0 14px 38px rgba(46, 230, 201, 0.24), 0 8px 30px rgba(59, 108, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.02);
  color: var(--foreground);
  border: 1px solid rgba(110, 200, 255, 0.32);
  box-shadow: none;
}

.btn-outline:hover {
  background: rgba(46, 230, 201, 0.08);
  border-color: rgba(46, 230, 201, 0.6);
  color: #FFFFFF;
}

/* ===== LABELS ===== */
.section-label {
  color: var(--teal);
  border-color: rgba(46, 230, 201, 0.26);
  background: rgba(46, 230, 201, 0.06);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.hero-number {
  color: var(--teal);
}

/* ===== CARDS ===== */
.card,
.pillar-card,
.outcome-card {
  background: linear-gradient(180deg, rgba(15, 26, 43, 0.7) 0%, rgba(8, 15, 27, 0.82) 100%);
  border: 1px solid rgba(140, 210, 255, 0.1);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.35);
}

.card:hover,
.pillar-card:hover,
.outcome-card:hover {
  border-color: rgba(46, 230, 201, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 50px rgba(0, 0, 0, 0.45), 0 0 50px rgba(46, 230, 201, 0.07);
}

.outcome-check {
  color: var(--teal);
}

.pain-card {
  border-radius: 18px;
}

/* ===== BANDS ===== */
.social-proof {
  background: rgba(255, 255, 255, 0.015);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.pain-section {
  background: transparent;
}

.pricing-band,
.bottom-cta {
  background:
    radial-gradient(800px 380px at 30% 0%, rgba(46, 230, 201, 0.1) 0%, transparent 60%),
    radial-gradient(800px 380px at 75% 100%, rgba(59, 108, 255, 0.12) 0%, transparent 60%),
    #050A14;
  border-top: 1px solid var(--hairline);
}

.pricing-band {
  border-bottom: 1px solid var(--hairline);
}

.everything-band {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.everything-list li::before {
  background: var(--teal);
  box-shadow: 0 0 10px rgba(46, 230, 201, 0.6);
}

.everything-note {
  color: var(--teal);
}

footer {
  background: #02050A;
  border-top: 1px solid var(--hairline);
}

footer nav {
  gap: 1.5rem 2rem;
}

footer .footer-products a {
  color: var(--teal);
}

/* ===== HOMEPAGE SMS DEMO ("See it in action") =====
   Phone + four steps. Finished conversation is static HTML; the inline script
   adds .is-armed (bubbles hidden) and reveals them with .is-shown / .is-lit. */
.demo-section {
  overflow-x: clip;
}

.demo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  margin-top: 1rem;
}

.demo-phone-wrap {
  margin-top: 0;
  flex: 0 0 auto;
}

.demo-phone-glow {
  inset: -40px;
  background: radial-gradient(ellipse at center, rgba(46, 230, 201, 0.16) 0%, rgba(59, 108, 255, 0.12) 40%, transparent 70%);
}

.demo-phone {
  position: relative;
  width: 360px;
  max-width: 100%;
  padding: 0 0 0.5rem;
  border-radius: 44px;
  background: linear-gradient(180deg, #0A1424 0%, #060B15 100%);
  border: 1px solid rgba(110, 200, 255, 0.22);
  box-shadow:
    inset 0 0 0 6px #03060C,
    inset 0 0 0 7px rgba(110, 200, 255, 0.12),
    0 0 0 1px rgba(46, 230, 201, 0.1),
    0 40px 90px rgba(0, 0, 0, 0.6),
    0 0 90px rgba(46, 230, 201, 0.1);
}

.demo-phone-notch {
  width: 112px;
  height: 22px;
  margin-top: 10px;
  border-radius: 0 0 14px 14px;
  background: #03060C;
}

.demo-phone-bar {
  padding: 0.65rem 1.5rem 0.85rem;
  border-bottom: 1px solid var(--hairline);
}

/* Full client name: smaller type, wraps to two lines when it must */
.demo-business-label {
  display: block;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--foreground);
  text-wrap: balance;
}

.demo-thread {
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 1rem 1.1rem 0.75rem;
  gap: 0.55rem;
  text-align: left;
}

.demo-bubble {
  font-size: 0.9rem;
  line-height: 1.42;
  max-width: 80%;
}

.demo-bubble--in {
  background: #13203A;
  border: 1px solid rgba(140, 210, 255, 0.1);
}

.demo-bubble--out,
.pain-msg--out {
  background: var(--grad-brand);
  color: #021018;
}

/* keep style.css's green "booked" bubble in the with/without comparison */
.pain-msg--out.good-confirm {
  background: rgba(65, 219, 154, 0.12);
  color: rgba(160, 255, 220, 0.95);
  border: 1px solid rgba(65, 219, 154, 0.28);
}

.demo-bubble--confirm {
  background: rgba(65, 219, 154, 0.12);
  color: rgba(160, 255, 220, 0.95);
  border: 1px solid rgba(65, 219, 154, 0.32);
}

.demo-stage.is-armed .demo-bubble {
  display: none;
}

.demo-stage.is-armed .demo-bubble.is-shown {
  display: block;
}

/* Mystique typing: three dots in the reply's place */
.demo-typing {
  align-self: flex-end;
  display: inline-flex;
  gap: 5px;
  padding: 0.7rem 0.85rem;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  background: rgba(46, 230, 201, 0.12);
  border: 1px solid rgba(46, 230, 201, 0.25);
  animation: bubbleIn 0.25s ease;
}

.demo-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: demoTyping 1s infinite ease-in-out;
}

.demo-typing span:nth-child(2) { animation-delay: 0.15s; }
.demo-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes demoTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Steps: Answered / Qualified / Booked / Confirmed. Lit by default (no JS,
   reduced motion); dim until reached while the demo plays. */
.demo-progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  position: relative;
  text-align: left;
}

.demo-progress::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, rgba(46, 230, 201, 0.35), rgba(59, 108, 255, 0.35));
}

.demo-progress-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--foreground);
  transition: color 0.35s ease;
}

.demo-progress-dot {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--grad-brand);
  border: 2px solid rgba(46, 230, 201, 0.8);
  box-shadow: 0 0 16px rgba(46, 230, 201, 0.55);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.demo-stage.is-armed .demo-progress-step {
  color: rgba(163, 178, 200, 0.55);
}

.demo-stage.is-armed .demo-progress-dot {
  background: #0A1424;
  border-color: rgba(140, 210, 255, 0.25);
  box-shadow: none;
}

.demo-stage.is-armed .demo-progress-step.is-lit {
  color: var(--foreground);
}

.demo-stage.is-armed .demo-progress-step.is-lit .demo-progress-dot {
  background: var(--grad-brand);
  border-color: rgba(46, 230, 201, 0.8);
  box-shadow: 0 0 16px rgba(46, 230, 201, 0.55);
  transform: scale(1.1);
}

/* Narrow: steps in one compact row under the phone */
@media (max-width: 860px) {
  .demo-stage {
    flex-direction: column;
    gap: 2rem;
  }

  .demo-progress {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 380px;
    gap: 0.25rem;
  }

  .demo-progress::before {
    left: 12%;
    right: 12%;
    top: 9px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(46, 230, 201, 0.35), rgba(59, 108, 255, 0.35));
  }

  .demo-progress-step {
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.82rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .demo-phone {
    width: 100%;
    border-radius: 36px;
  }

  .demo-phone-glow {
    inset: -16px;
  }

  .demo-phone-bar {
    padding: 0.55rem 1rem 0.7rem;
  }

  .demo-thread {
    padding: 0.85rem 0.8rem 0.6rem;
  }

  .demo-bubble {
    font-size: 0.86rem;
    max-width: 84%;
  }
}

/* ===== INNER-PAGE HEROES: teal-to-blue glow =====
   No particle-bubble still here: inner headers centre their text (and legal
   pages run text cards under the corner), so at some width it always sat
   behind the badge, headline or intro. The bubble lives on the homepage. */
.hero,
.consent-page-header {
  position: relative;
  overflow: hidden;
}

.hero {
  padding: 5.5rem 0 4.5rem;
}

.hero--about {
  padding: 6rem 0 4.5rem;
}

.hero--features,
.hero--contact {
  padding: 5.5rem 0 3.5rem;
}

.consent-page-header {
  padding: 5rem 0 2.5rem;
}

.hero::after,
.consent-page-header::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 35% 35%, rgba(46, 230, 201, 0.12) 0%, transparent 100%),
    radial-gradient(40% 40% at 66% 60%, rgba(59, 108, 255, 0.14) 0%, transparent 100%);
}

.hero-glow {
  background: radial-gradient(ellipse at center, rgba(46, 230, 201, 0.14) 0%, rgba(59, 108, 255, 0.08) 45%, transparent 70%);
  max-width: 100%;
}

.legal-main {
  position: relative;
  padding-top: 3.5rem;
}

.legal-page .card h2,
.consent-heading {
  color: var(--teal);
}

.legal-page .card,
.consent-card {
  border-radius: 18px;
}

.legal-page .card a {
  color: var(--teal);
}

/* ===== HOMEPAGE HERO ===== */
.hero-stage {
  padding: 0;
  text-align: left;
  overflow: visible;
  overflow-x: clip;
}

.hero-stage::before,
.hero-stage::after {
  content: none;
}

.hero-pin {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--nav-h));
  padding: 3rem 0;
}

/* Headline, subtext and CTA are visible on first paint, with or without JS */
.hero-stage .hero-content.reveal {
  opacity: 1;
  transform: none;
}

.hero-stage .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-stage h1 {
  max-width: 560px;
  font-size: clamp(2.3rem, min(4.2vw, 6.4vh), 3.6rem);
  line-height: 1.06;
  margin-top: 0.25rem;
}

/* Out-ranks style.css `.hero .container > p:not(.section-label):not(.phone-cta)` */
.hero.hero-stage .container.hero-content > p:not(.section-label):not(.phone-cta) {
  max-width: 520px;
  margin: 1.1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.65;
}

.hero.hero-stage .container.hero-content > p.hero-number {
  margin-top: 0.9rem;
  font-size: 1rem;
}

.hero-stage .hero-actions {
  justify-content: flex-start;
  margin-top: 1.75rem;
}

@media (min-width: 1024px) and (max-height: 760px) {
  .hero-stage h1 { font-size: 2.25rem; }
  .hero.hero-stage .container.hero-content > p.hero-sub:not(.section-label):not(.phone-cta) { font-size: 0.95rem; line-height: 1.55; margin-top: 0.8rem; }
  .hero-stage .hero-actions { margin-top: 1.1rem; }
}

@media (max-width: 1023px) {
  .hero-stage {
    text-align: center;
  }
  .hero-pin {
    flex-direction: column;
    min-height: 0;
    padding: 2rem 0 4rem;
  }
  .hero-stage h1,
  .hero.hero-stage .container.hero-content > p:not(.section-label):not(.phone-cta) {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-stage .hero-actions {
    justify-content: center;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
  }

  body {
    padding-top: var(--nav-h);
  }

  html {
    scroll-padding-top: calc(var(--nav-h) + 12px);
  }

  .navbar .container {
    padding: 0 1rem;
    gap: 1rem;
  }

  .navbar-brand img {
    width: 152px;
    height: 38px;
  }

  .navbar-nav {
    background: #03060C;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }

  .navbar-nav a.active::after {
    content: none;
  }

  .navbar-nav li a {
    border-bottom-color: var(--hairline);
  }

  .hero,
  .hero-main {
    padding: 3rem 1.25rem 3.25rem;
  }

  .hero--about,
  .hero--features,
  .hero--contact,
  .hero--faq {
    padding: 3rem 1.25rem 2.75rem;
  }

  .hero-stage {
    padding: 0;
  }

  .hero-pin {
    padding: 1.25rem 0 3.25rem;
  }

  .hero-stage h1 {
    font-size: 2.1rem;
  }

  .consent-page-header {
    padding: 2.75rem 1.25rem 2rem;
  }

  .legal-main {
    padding-top: 2.25rem;
  }
}

/* ===== PHONE-FRAMED VIDEO =====
   Short vertical clips from /assets/video in the same frame as the homepage
   demo phone. Capped well under the clips' native 400-480px width so they are
   never stretched. Playback (in view only, reduced motion) is inline script. */
.video-phone {
  width: 100%;
  max-width: 320px;
  margin: 2.75rem auto 0;
  text-align: center;
}

.video-phone-frame {
  position: relative;
  padding: 9px;
  border-radius: 42px;
  background: linear-gradient(180deg, #0A1424 0%, #060B15 100%);
  border: 1px solid rgba(110, 200, 255, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(110, 200, 255, 0.08),
    0 0 0 1px rgba(46, 230, 201, 0.1),
    0 34px 80px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(46, 230, 201, 0.1);
}

.video-phone-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 33px;
  background: #03060C;
  object-fit: cover;
}

.video-phone-caption {
  margin: 1rem auto 0;
  max-width: 300px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  text-wrap: balance;
}

/* Two clips side by side, stacking on narrow screens */
.video-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 3.5rem;
  margin-top: 2.75rem;
}

.video-row .video-phone {
  flex: 0 1 300px;
  margin: 0;
}

/* Homepage hero clip. Desktop: right of the headline where the hero still sat,
   sized to the viewport height so frame + caption fit inside the hero.
   Narrower: below the headline and buttons. */
@media (min-width: 1024px) {
  .hero-video {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: max(2rem, calc((100% - 1100px) / 2 + 2rem));
    width: min(300px, calc((100vh - var(--nav-h) - 11rem) * 0.54));
    margin: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 1023px) {
  .hero-video {
    width: min(260px, 72vw);
    margin: 2.25rem auto 0;
  }
}

/* Copy beside a phone video (hero, closing CTA) */
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 3.5rem;
  align-items: center;
  text-align: left;
}

.media-split .video-phone {
  margin: 0;
}

.media-split .hero-sub,
.media-split .media-split-text > p:not(.section-label) {
  max-width: 560px;
  margin: 1.1rem 0 0;
}

.media-split .hero-actions {
  justify-content: flex-start;
  margin-top: 1.75rem;
}

.bottom-cta .media-split h2 {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .media-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    text-align: center;
  }

  .media-split .video-phone {
    margin: 0 auto;
  }

  .media-split .hero-sub,
  .media-split .media-split-text > p:not(.section-label) {
    margin-left: auto;
    margin-right: auto;
  }

  .media-split .hero-actions {
    justify-content: center;
  }
}

/* ===== COMPARISON PAGES ===== */
.answer-box {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  border-left: 3px solid var(--teal);
}

.card.answer-box:hover {
  transform: none;
}

.answer-box h2 {
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.answer-box p {
  color: var(--foreground);
  font-size: 1.05rem;
}

.compare-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 0.95rem;
  background: linear-gradient(180deg, rgba(15, 26, 43, 0.7) 0%, rgba(8, 15, 27, 0.82) 100%);
  border: 1px solid rgba(140, 210, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.35);
}

.compare-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.compare-table th,
.compare-table td {
  padding: 1rem 1.25rem;
  vertical-align: top;
  line-height: 1.55;
  border-top: 1px solid var(--hairline);
}

.compare-table thead th {
  border-top: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: rgba(255, 255, 255, 0.02);
}

.compare-table thead th:last-child {
  color: var(--teal);
}

.compare-table tbody th {
  width: 22%;
  font-weight: 600;
  color: var(--foreground);
}

.compare-table td {
  color: var(--muted-foreground);
}

.compare-table td:last-child {
  color: var(--foreground);
  background: rgba(46, 230, 201, 0.04);
}

.compare-note {
  max-width: 980px;
  margin: 1rem auto 0;
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted-foreground);
}

/* Narrow: each row becomes a block with labelled values */
@media (max-width: 680px) {
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
    width: auto;
  }

  .compare-table tr {
    padding: 1.1rem 1.1rem 1.2rem;
    border-top: 1px solid var(--hairline);
  }

  .compare-table tbody tr:first-child {
    border-top: 0;
  }

  .compare-table tbody th,
  .compare-table td,
  .compare-table td:last-child {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
  }

  .compare-table td {
    margin-top: 0.6rem;
  }

  .compare-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }

  .compare-table td:last-child::before {
    color: var(--teal);
  }
}

.fit-card h3 {
  margin-bottom: 1rem;
}

.fit-card .everything-list {
  margin: 0;
  text-align: left;
}

.pillar-icon.step-num {
  font-weight: 700;
  color: var(--teal);
}

/* A whole card that is one link (compare.html) */
.link-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.link-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
}

.link-card-cta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--teal);
}

.link-card:hover .link-card-cta {
  color: var(--teal-strong);
}

/* ===== REDUCED MOTION (site-wide) ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .card:hover,
  .pillar-card:hover,
  .outcome-card:hover,
  .btn-primary:hover {
    transform: none;
  }
}