/* ============================================================
   NightAI — The Night Watch
   Cinematic obsidian + antique gold, editorial serif voice
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #05070d;
  --bg-card:      #0a0d16;
  --bg-card-2:    #10131c;
  --border:       rgba(200,184,122,0.12);
  --accent-1:     #c8b87a;
  --accent-2:     #a8905a;
  --accent-grad:  linear-gradient(135deg, #e4d5a4, #c8b87a, #a8905a);
  --text:         #eee6d2;
  --text-muted:   #8a8a9a;
  --text-dim:     #4a4438;
  --red:          #e05e6a;
  --green:        #5eca8a;
  --radius:       2px;
  --radius-sm:    2px;
  --shadow:       0 8px 40px rgba(0,0,0,0.85);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.75);
  --font:         'Inter', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --nav-h:        64px;

  /* ── Motion system ──────────────────────────────────────────────────── */
  --dur-fast:     0.22s;
  --dur-med:      0.45s;
  --dur-slow:     0.75s;
  --dur-xslow:    1.1s;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);   /* snappy out */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* springy */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --stagger:      0.12s;

  /* Moon orbit ─────────────────────────────────────────────────────────── */
  --moon-bob-dur:    8s;
  --moon-bob-dist:   18px;
  --particle-orbit:  12s;

  /* Dashboard compat aliases ─────────────────────────────────────────── */
  --clr-surface:    #0a0d16;
  --clr-border:     rgba(200,184,122,0.12);
  --clr-text:       #eee6d2;
  --clr-text-muted: #8a8a9a;
}

/* Ensure main content layers sit above the fixed starfield + cursor glow + particles */
.hero, .marquee-strip, .trust-strip, .stats-band, .problem, .video-demo, .hiw, .industries, .features, .roadmap, .roi, .testimonials, .pricing, .demo, .faq, .cta-banner, .footer {
  position: relative;
  z-index: 1;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  /* Inertial scroll on touch devices */
  -webkit-overflow-scrolling: touch;
}

html {
  /* Prevent horizontal overflow in WebView browsers (FB Messenger, IG, TikTok) —
     body alone is not sufficient; html must also constrain. */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Container ────────────────────────────────────────────── */
.container {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Section Spacing ──────────────────────────────────────── */
.section {
  padding: 140px 0;
}

/* Snap sections fill the viewport and center content */
.hero,
.hiw.section,
.features.section,
.roadmap.section,
.roi-compact.section,
.demo.section,
.pricing.section,
.faq.section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* scroll-snap removed — Lenis handles smooth momentum scrolling */

/* ── Section Header ───────────────────────────────────────── */
.section__header {
  text-align: center;
  margin-bottom: 88px;
}
/* Pricing section has ROI strip + billing note below header — tighten the gap */
.pricing .section__header { margin-bottom: 36px; }
.section__title {
  font-size: clamp(44px, 6.5vw, 80px);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 20px;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
.section__sub {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.78;
}

/* ── Accent Text — flat antique gold, italic serif ─────────── */
.gradient-text {
  color: var(--accent-1);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
}
.btn--sm  { padding: 9px 18px; font-size: 14px; }
.btn--lg  { padding: 16px 32px; font-size: 16px; }
.btn--xl  { padding: 20px 36px; font-size: 17px; }
.btn--full { width: 100%; }

.btn--primary {
  background: var(--accent-grad);
  color: #0e0d08;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(200,184,122,0.28), 0 2px 8px rgba(0,0,0,0.3);
}
.btn--primary:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(200,184,122,0.42), 0 4px 12px rgba(0,0,0,0.35);
}

.btn--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--accent-1);
  border: 1.5px solid var(--accent-1);
}
.btn--outline:hover {
  background: rgba(200,184,122,0.1);
  transform: translateY(-1px);
}

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: rgba(3,0,10,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: height 0.45s var(--ease-out), background 0.45s var(--ease-out),
              backdrop-filter 0.45s, border-color 0.45s, box-shadow 0.45s;
}
.nav.scrolled {
  height: 52px;
  background: rgba(3,0,10,0.92);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border-bottom-color: rgba(200,184,122,0.08);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4), 0 1px 0 rgba(200,184,122,0.06);
}
.nav__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
}
.nav__logo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: transform 0.45s var(--ease-out), font-size 0.45s var(--ease-out);
}
.nav.scrolled .nav__logo { font-size: 17px; }
.nav__logo-icon {
  width: 26px; height: 26px; flex-shrink: 0; margin-right: 6px;
  transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out);
}
.nav.scrolled .nav__logo-icon { width: 22px; height: 22px; }
.nav__logo span { color: var(--accent-1); font-family: var(--font-display); font-style: italic; font-weight: 400; margin-left: -2px; text-shadow: 0 0 14px rgba(200,184,122,0.9), 0 0 30px rgba(200,184,122,0.45); }

/* ── Italic gold "AI" — reusable accent (Night Watch voice) ─ */
.ai-gold { color: var(--accent-1); font-family: var(--font-display); font-style: italic; font-weight: 400; }

.nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s;
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent-grad);
  transition: width 0.35s var(--ease-out);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(200,184,122,0.3);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { width: 100%; }
/* Active section link */
.nav__links a.nav-active { color: var(--accent-1); }
.nav__links a.nav-active::after { width: 100%; }

.nav__cta { margin-left: 8px; }
.nav__links-login-mobile { display: none; }
@media (max-width: 860px) { .nav__links-login-mobile { display: block; } }

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding: 4px;
}
.nav__hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ── Mobile/tablet nav open state (hamburger toggled) ─────── */
@media (max-width: 860px) {
  .nav__links--open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(3,0,10,0.97);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px 24px;
    gap: 4px;
    animation: slideDown 0.22s var(--ease-out) both;
    z-index: 99;
  }
  .nav__links--open li a {
    display: block;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .nav__links--open li:last-child a { border-bottom: none; }
  /* Log In entry — gold tint to stand out from nav links */
  .nav__links--open .nav__links-login-mobile a {
    color: var(--accent-1);
    opacity: 0.85;
  }
  /* Animate hamburger to X when open */
  .nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── Grain overlay ────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  will-change: transform; /* promote to own compositor layer */
}

.hero__mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 75% 15%, rgba(26,15,46,0.85) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(200,184,122,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}
/* Purple atmosphere behind the moon — Night Watch signature */
.hero__glow--1 {
  width: 720px; height: 720px;
  background: radial-gradient(circle, #7a5aa0 0%, #4a2f7a 45%, transparent 70%);
  top: -160px; right: -160px; left: auto;
  opacity: 0.45;
  mix-blend-mode: screen;
}
.hero__glow--2 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 65%);
  bottom: -80px; left: -60px;
  opacity: 0.18;
}

/* ── Hero: full-viewport centered layout ─────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(var(--nav-h) + 10px) 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Moon: large atmospheric background element */
.hero__moon-bg {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-48%);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.moon-svg {
  width: clamp(260px, 34vw, 480px);
  height: auto;
  filter: drop-shadow(0 0 80px rgba(200,184,122,0.18)) drop-shadow(0 0 160px rgba(168,144,90,0.10));
  opacity: 0.38;
  animation: moonBob 9s ease-in-out infinite;
  will-change: transform;
}
@media (max-width: 860px) {
  .hero__moon-bg {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: -60px;
    top: auto;
  }
  .moon-svg {
    width: 320px;
    opacity: 0.14;
  }
}

/* Centered hero copy */
.hero__center {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding-bottom: 40px;
}
.moon-halo {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(200,184,122,0.18) 0%, transparent 28%),
    radial-gradient(circle, rgba(122,90,160,0.42) 22%, rgba(74,47,122,0.22) 48%, transparent 72%);
  animation: haloPulse 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
.moon-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(200,184,122,0.12);
  pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.moon-ring--1 {
  width: 110%; height: 110%;
  animation: ringRotate 22s linear infinite;
  border-style: dashed;
  border-color: rgba(200,184,122,0.09);
}
.moon-ring--2 {
  width: 130%; height: 130%;
  animation: ringRotate 38s linear infinite reverse;
  border-color: rgba(200,184,122,0.05);
}

/* ── Hero badge ────────────────────────────────────────────── */

.hero__badge {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  will-change: transform, opacity;
}
.hero__badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(200,184,122,0.25);
  animation: dotPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

.hero__title {
  font-size: clamp(62px, 9.5vw, 136px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  font-family: var(--font-display);
}
@media (max-width: 480px) {
  .hero__title { font-size: clamp(48px, 13vw, 72px); }
}
.hero__line {
  display: block;
  opacity: 1;
  transform: none;
  margin-bottom: 0.08em;
}
.no-js .hero__line { opacity: 1; transform: none; }

.hero__sub {
  font-size: 19px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 52px;
  line-height: 1.82;
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}
.hero__sub-muted {
  opacity: 0.55;
  font-style: italic;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}

.hero__stats {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}

/* ── Hero scroll indicator ─────────────────────────────────── */
.hero__scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(200,184,122,0.55), transparent);
  transform-origin: top;
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0; transform: scaleY(0); }
  40%, 60% { opacity: 1; transform: scaleY(1); }
}
@media (max-width: 600px) { .hero__scroll-hint { display: none; } }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
@media (max-width: 860px) { .stat { align-items: center; } }
.stat__num {
  font-size: 26px;
  font-weight: 800;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.stat__label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.stat__div   { width: 1px; height: 36px; background: var(--border); }

/* ── Hero wordmark (old) — kept as compat; hide gracefully ─ */
.hero__wordmark { display: none; }

/* ── JS reveal — base hidden state ────────────────────────── */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
  transition:
    opacity  var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.js-reveal.revealed { opacity: 1; transform: translateY(0); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes moonBob {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-18px) rotate(1deg); }
}
@keyframes haloPulse {
  0%,100% { opacity: 0.7; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.05); }
}
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(200,184,122,0.25); }
  50%     { box-shadow: 0 0 0 6px rgba(200,184,122,0.10); }
}


/* ── Trust Bar ─────────────────────────────────────────────── */
.trust-bar {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  overflow: hidden;
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.trust-bar__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 8px;
  white-space: nowrap;
}
.trust-bar__items {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.trust-bar__item span { font-size: 18px; }
.trust-bar__div {
  width: 1px;
  height: 20px;
  background: var(--border);
}

/* ── Marquee strip ────────────────────────────────────────── */
.marquee-strip {
  border-top: 1px solid rgba(200,184,122,0.08);
  border-bottom: 1px solid rgba(200,184,122,0.08);
  padding: 14px 0;
  overflow: hidden;
  background: rgba(200,184,122,0.015);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee-sep { color: var(--accent-1); opacity: 0.4; font-size: 14px; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── Stats band ───────────────────────────────────────────── */
.stats-band {
  padding: 100px 0;
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.stats-band__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.stats-band__item {
  flex: 1;
  text-align: center;
  padding: 0 48px;
}
.stats-band__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 100px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
}
.stats-band__pct,
.stats-band__unit {
  font-size: 0.48em;
  letter-spacing: -0.01em;
  vertical-align: super;
}
.stats-band__unit { vertical-align: baseline; font-size: 0.38em; letter-spacing: 0.04em; }
.stats-band__label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  line-height: 1.7;
  text-transform: uppercase;
}
.stats-band__div {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(200,184,122,0.20), transparent);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .stats-band__grid { flex-direction: column; gap: 48px; }
  .stats-band__div  { width: 60px; height: 1px; background: linear-gradient(to right, transparent, rgba(200,184,122,0.20), transparent); }
  .stats-band__item { padding: 0 24px; }
}

/* ── Problem / Solution ───────────────────────────────────── */
.problem { background: var(--bg-card); }
.problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.problem__col {
  padding: 52px 48px;
  border-radius: 18px;
  border: 1px solid var(--border);
}
.problem__col--bad  { background: rgba(224,94,106,0.04); border-color: rgba(224,94,106,0.14); }
.problem__col--good { background: rgba(200,184,122,0.04); border-color: rgba(200,184,122,0.18); box-shadow: 0 0 80px rgba(200,184,122,0.06); }

.col__tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 6px 14px;
  border-radius: 40px;
  display: inline-block;
}
.col__tag--red   { background: rgba(255,77,109,0.12); color: var(--red); }
.col__tag--green { background: rgba(74,222,128,0.12); color: var(--green); }

.problem__list li {
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 15.5px;
  color: var(--text);
  position: relative;
}
.problem__list li:last-child { border-bottom: none; }
.problem__col--bad .problem__list li::before {
  content: '\2715';
  position: absolute;
  left: 0;
  top: 15px;
  font-size: 11px;
  font-weight: 800;
  color: var(--red);
  opacity: 0.7;
}
.problem__col--good .problem__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 4' stroke='%23E8A063' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ── How It Works ─────────────────────────────────────────── */
.hiw__steps {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.hiw__step {
  flex: 1;
  min-width: 220px;
  max-width: 320px;
  text-align: center;
  padding: 48px 38px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
/* Editorial top-line accent on hover */
.hiw__step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,184,122,0.5), transparent);
  opacity: 0;
  transition: opacity 0.35s;
}
.hiw__step:hover::before { opacity: 1; }
.hiw__step:hover {
  border-color: rgba(200,184,122,0.40);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 24px rgba(200,184,122,0.10);
  transform: translateY(-5px);
}
.step__num {
  font-size: 80px;
  font-weight: 900;
  line-height: 0.9;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  opacity: 0.18;
  font-family: var(--font-display);
  letter-spacing: -0.04em;
}
.step__icon { font-size: 36px; margin-bottom: 16px; }
.hiw__step h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 12px; }
.hiw__step p  { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; }

.hiw__arrow {
  font-size: 20px;
  color: rgba(200,184,122,0.20);
  flex-shrink: 0;
  letter-spacing: 0.1em;
  font-weight: 300;
}

/* ── Industries ───────────────────────────────────────────── */
.industries { background: var(--bg-card); }
.industries__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.industry__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s, background 0.3s, box-shadow 0.3s;
  cursor: default;
  position: relative;
}
.industry__card:hover {
  border-color: rgba(200,184,122,0.40);
  background: rgba(200,184,122,0.05);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(200,184,122,0.08);
  transform: translateY(-4px);
}
/* Slim gold accent divider between name and stat */
.industry__card > span:first-child::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent-1);
  opacity: 0.25;
  margin: 6px auto 0;
}
.industry__card > span:first-child { font-size: 15px; color: var(--text); font-weight: 600; }
.industry__card span { font-size: 13px; color: var(--text-muted); }
.industry__card .industry__stat {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-1);
  padding: 3px 10px;
  background: rgba(200,184,122,0.07);
  border: 1px solid rgba(200,184,122,0.18);
  border-radius: 40px;
  margin-top: 2px;
}

/* ── Features — Bento grid ────────────────────────────────── */
/* ── Bento Grid ──────────────────────────────────────────── */
.features__bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature__card--wide { grid-column: span 2; }
/* Wide cards: larger text */
.feature__card--wide h3 { font-size: 24px; margin-bottom: 14px; }
.feature__card--wide p  { font-size: 15.5px; line-height: 1.75; }
.feature__card--wide .feature__icon-wrap { width: 52px; height: 52px; }
/* Collapse to 2-col on tablet */
@media (max-width: 900px) {
  .features__bento { grid-template-columns: repeat(2, 1fr); }
  .feature__card--wide { grid-column: span 2; }
}
/* Single col on mobile */
@media (max-width: 540px) {
  .features__bento { grid-template-columns: 1fr; }
  .feature__card--wide { grid-column: span 1; }
}
.feature__card {
  padding: 40px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.feature__card:hover {
  border-color: rgba(200,184,122,0.40);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 24px rgba(200,184,122,0.10);
  transform: translateY(-5px);
}
.feature__card::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,184,122,0.09) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.feature__card:hover::after { opacity: 1; }
.feature__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(200,184,122,0.07);
  border: 1px solid rgba(200,184,122,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--accent-1);
  transition: background 0.3s, border-color 0.3s;
}
.feature__card:hover .feature__icon-wrap {
  background: rgba(200,184,122,0.13);
  border-color: rgba(200,184,122,0.28);
}
.feature__icon { font-size: 32px; margin-bottom: 16px; }
.feature__card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 12px; }
.feature__card p  { font-size: 14.5px; color: var(--text-muted); line-height: 1.72; }

/* Gold accent variant — Natural Voice IVR card */
.feature__card--gold {
  border-color: rgba(200,184,122,0.28);
  background: linear-gradient(145deg, rgba(200,184,122,0.07) 0%, var(--bg-card) 60%);
  box-shadow: 0 4px 32px rgba(200,184,122,0.08), inset 0 1px 0 rgba(200,184,122,0.12);
}
.feature__card--gold .feature__icon-wrap {
  background: rgba(200,184,122,0.18);
  border-color: rgba(200,184,122,0.38);
  box-shadow: 0 0 18px rgba(200,184,122,0.15);
}
.feature__card--gold::after {
  opacity: 0.25 !important;
}
.feature__card--gold:hover {
  border-color: rgba(200,184,122,0.5);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 40px rgba(200,184,122,0.15);
}

/* ── Testimonials ─────────────────────────────────────────── */
.testimonials { background: var(--bg); }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.testimonial__card {
  padding: 44px 38px;
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,184,122,0.10);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.testimonial__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,184,122,0.16);
  border-color: rgba(200,184,122,0.25);
}
/* Founder card variant */
.testimonial__card--founder {
  text-align: left;
}
.testimonial__card--founder::before { display: none; }
.testimonial__card--founder h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.founder-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-1);
  background: rgba(200,184,122,0.1);
  border: 1px solid rgba(200,184,122,0.25);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

/* Large decorative quote mark */
.testimonial__card::before {
  content: '\201C';
  position: absolute;
  top: -16px;
  right: 24px;
  font-size: 140px;
  font-family: var(--font-display);
  color: var(--accent-1);
  opacity: 0.05;
  line-height: 1;
  pointer-events: none;
}
.testimonial__stars { font-size: 14px; letter-spacing: 3px; color: var(--accent-1); }
.testimonial__quote {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  flex: 1;
  font-style: normal;
  position: relative;
  padding-left: 0;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(200,184,122,0.10);
  padding-top: 18px;
}
.testimonial__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  color: #0e0d08;
}
.testimonial__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.testimonial__role {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.testimonial__metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-1);
  background: rgba(200,184,122,0.08);
  border: 1px solid rgba(200,184,122,0.18);
  border-radius: 20px;
  padding: 5px 14px;
  margin-top: 4px;
  align-self: flex-start;
}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { background: var(--bg); }
.faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faq__item {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq__item.open { border-color: rgba(200,184,122,0.35); }
.faq__question {
  width: 100%;
  background: var(--bg-card);
  border: none;
  padding: 15px 24px;
  text-align: left;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: background 0.2s;
}
.faq__question:hover { background: var(--bg-card-2); }
.faq__chevron {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(200,184,122,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.3s var(--ease-out), background 0.2s;
  color: var(--accent-1);
}
.faq__item.open .faq__chevron {
  transform: rotate(180deg);
  background: rgba(200,184,122,0.18);
}
.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-in-out), padding 0.25s;
  background: var(--bg-card);
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  padding: 0 24px;
}
.faq__item.open .faq__answer {
  max-height: 400px;
  padding: 16px 24px 24px;
}

/* ── Pricing ──────────────────────────────────────────────── */
.pricing { background: var(--bg-card); }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto 40px;
}
.pricing__grid--single {
  grid-template-columns: 1fr;
  max-width: 480px;
  text-align: center;
}
.pricing__grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 780px;
}
.pricing__grid--single .pricing__features {
  text-align: left;
  display: inline-block;
}
.pricing__enterprise-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 10px;
  background: rgba(200,184,122,0.06);
  border: 1px solid rgba(200,184,122,0.18);
  border-radius: 12px;
  padding: 20px 28px;
  margin: 16px auto 0;
  max-width: 480px;
}
.pricing__enterprise-strip strong {
  display: block;
  font-size: 14px;
  color: var(--text);
}
.pricing__enterprise-strip span {
  font-size: 13px;
  color: var(--text-muted);
}
.pricing__features--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.pricing__tagline {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
  text-align: center;
}
.pricing__trust {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.pricing__trust span {
  font-size: 12px;
  color: var(--text-muted);
  border: 1px solid rgba(200,184,122,0.2);
  border-radius: 20px;
  padding: 4px 12px;
}
.pricing__affirm-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin: 18px auto 0;
  max-width: 480px;
}
.pricing__card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 40px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s;
}
.pricing__card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,184,122,0.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(200,184,122,0.08);
}
.pricing__card--featured {
  border-color: rgba(200,184,122,0.5);
  background: var(--bg-card-2);
  box-shadow: 0 0 0 1px rgba(200,184,122,0.22), 0 0 60px rgba(200,184,122,0.16), 0 0 120px rgba(168,144,90,0.08);
  transform: translateZ(0);
  will-change: box-shadow;
  animation: cardGlow 3.5s ease-in-out infinite;
}
.pricing__card--featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(200,184,122,0.4), 0 0 80px rgba(200,184,122,0.28), 0 24px 60px rgba(0,0,0,0.55);
}

.pricing__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-grad);
  color: #0e0d08;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 20px;
  border-radius: 40px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pricing__tier {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-1);
  margin-bottom: 18px;
}
.pricing__price {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
  font-family: var(--font-display);
}
.pricing__price--contact {
  font-size: 36px;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pricing__note {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.pricing__features {
  margin: 20px 0 28px;
  flex: 1;
}
.pricing__features li {
  padding: 10px 0 10px 26px;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(200,184,122,0.07);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text-muted);
  position: relative;
}
.pricing__features li:first-child { border-top: 1px solid rgba(200,184,122,0.07); }
.pricing__features li:last-child { border-bottom: none; }
.pricing__features li.included { color: var(--text); }
.pricing__features li.included::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3' stroke='%23E8A063' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.pricing__infra {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 12px;
}
.pricing__affirm {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 6px 0 14px;
  opacity: 0.85;
}
.pricing__affirm-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(200,184,122,0.08);
  border: 1px solid rgba(200,184,122,0.2);
  border-radius: 12px;
  padding: 14px 20px;
  margin: 28px auto 0;
  max-width: 680px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}
.pricing__disclaimer {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 640px;
  margin: 20px auto 0;
}
/* Onboard plan card Affirm note */
.ob-plan__affirm {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
  opacity: 0.8;
  letter-spacing: 0.01em;
}

/* ── Video Demo Section ──────────────────────────────────── */
.video-demo {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.video-demo__player {
  max-width: 900px;
  margin: 0 auto 64px;
}
.video-demo__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(200,184,122,0.2);
  background: var(--bg-card);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 60px rgba(200,184,122,0.06);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.video-demo__frame:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow: 0 32px 100px rgba(0,0,0,0.7), 0 0 80px rgba(200,184,122,0.1);
  border-color: rgba(200,184,122,0.35);
}
.video-demo__frame iframe,
.video-demo__frame video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.video-demo__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(9,9,15,0.95), rgba(5,5,8,0.98));
}
.video-demo__play-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0e0d08;
  box-shadow: 0 8px 40px rgba(200,184,122,0.35), 0 0 60px rgba(200,184,122,0.15);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
  cursor: pointer;
}
.video-demo__play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 50px rgba(200,184,122,0.5), 0 0 80px rgba(200,184,122,0.25);
}
.video-demo__play-btn svg {
  margin-left: 4px; /* optical center for play triangle */
}
.video-demo__coming {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.video-demo__hint {
  font-size: 14px;
  color: var(--text-muted);
}

/* Stats row below the video */
.video-demo__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.video-demo__stat {
  text-align: center;
  padding: 28px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.video-demo__stat:hover {
  transform: translateY(-3px);
  border-color: rgba(200,184,122,0.3);
}
.video-demo__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--accent-1);
  line-height: 1;
  margin-bottom: 8px;
}
.video-demo__stat-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .video-demo__stats { grid-template-columns: 1fr; gap: 12px; }
  .video-demo__play-btn { width: 64px; height: 64px; }
  .video-demo__play-btn svg { width: 32px; height: 32px; }
}

/* ── Pricing Teaser ──────────────────────────────────────── */
.pricing__teaser {
  max-width: 640px;
  margin: 0 auto 40px;
}
.pricing__teaser-card {
  background: var(--bg);
  border: 1px solid rgba(200,184,122,0.25);
  border-radius: 24px;
  padding: 56px 48px;
  text-align: center;
  position: relative;
  box-shadow: 0 0 60px rgba(200,184,122,0.08), 0 24px 80px rgba(0,0,0,0.4);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.pricing__teaser-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 80px rgba(200,184,122,0.14), 0 32px 100px rgba(0,0,0,0.5);
}
.pricing__teaser-icon {
  color: var(--accent-1);
  margin-bottom: 24px;
  opacity: 0.7;
}
.pricing__teaser-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.pricing__teaser-sub {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 auto 32px;
}
.pricing__teaser-includes {
  text-align: left;
  background: rgba(200,184,122,0.04);
  border: 1px solid rgba(200,184,122,0.12);
  border-radius: 16px;
  padding: 28px 32px;
}
.pricing__teaser-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-1);
  margin-bottom: 16px;
}
.pricing__teaser-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.pricing__teaser-list li {
  font-size: 13.5px;
  color: var(--text);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.pricing__teaser-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3' stroke='%23E8A063' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.pricing__teaser-note {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 12px;
}

@media (max-width: 640px) {
  .pricing__teaser-card { padding: 40px 24px; }
  .pricing__teaser-list { grid-template-columns: 1fr; }
  .pricing__teaser-includes { padding: 20px 20px; }
}

/* ── HIPAA Disclaimer (footer) ───────────────────────────── */
.footer__hipaa-notice {
  border-top: 1px solid rgba(200,184,122,0.1);
  padding: 16px 0;
  background: rgba(200,184,122,0.03);
}
.footer__hipaa-notice p {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.footer__hipaa-notice strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Demo ─────────────────────────────────────────────────── */

/* Tab switcher */
.demo__tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 5px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.demo__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.demo__tab svg { flex-shrink: 0; }
.demo__tab--active {
  background: rgba(200,184,122,0.12);
  color: var(--accent-1);
  border: 1px solid rgba(200,184,122,0.22);
}
.demo__tab:not(.demo__tab--active):hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

/* Layout */
.demo__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}
.demo__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Device shell */
.demo__device {
  width: 280px;
  background: #08080e;
  border-radius: 36px;
  border: 2px solid rgba(200,184,122,0.20);
  padding: 12px 0 0;
  box-shadow: var(--shadow), 0 0 40px rgba(200,184,122,0.06), inset 0 1px 0 rgba(200,184,122,0.10);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.demo__device-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.demo__device-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
}

/* Panels */
.demo__panel {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* SMS panel */
.demo__sms-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
.demo__sms-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c8b87a, #a8905a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #0a0d16;
  flex-shrink: 0;
}
.demo__sms-info { flex: 1; min-width: 0; }
.demo__sms-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo__sms-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.demo__live-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green);
  background: rgba(94,202,138,0.12);
  border: 1px solid rgba(94,202,138,0.25);
  border-radius: 5px;
  padding: 2px 6px;
  flex-shrink: 0;
}

/* Message area */
.demo__messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 8px;
  flex: 1;
  overflow-y: auto;
  max-height: 280px;
  scrollbar-width: none;
}
.demo__messages::-webkit-scrollbar { display: none; }
.demo__messages--voice { max-height: 220px; }

/* Messages */
.demo__message {
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-line;
}
.demo__message--system {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  text-align: center;
  font-size: 11px;
  border-radius: 8px;
}
.demo__message--bot {
  background: rgba(200,184,122,0.09);
  border: 1px solid rgba(200,184,122,0.18);
  color: var(--text);
  align-self: flex-start;
  max-width: 90%;
  border-bottom-left-radius: 4px;
}
.demo__message--user {
  background: rgba(100,90,160,0.18);
  border: 1px solid rgba(120,110,190,0.22);
  color: var(--text);
  align-self: flex-end;
  max-width: 80%;
  border-bottom-right-radius: 4px;
}
.demo__message--ai {
  background: rgba(200,184,122,0.09);
  border: 1px solid rgba(200,184,122,0.18);
  color: var(--text);
  align-self: flex-start;
  max-width: 92%;
  border-bottom-left-radius: 4px;
}
.demo__message--caller {
  background: rgba(80,100,180,0.15);
  border: 1px solid rgba(100,120,200,0.20);
  color: var(--text-muted);
  align-self: flex-end;
  max-width: 80%;
  border-bottom-right-radius: 4px;
  font-style: italic;
}
.demo__message--confirm {
  background: rgba(200,184,122,0.14);
  border: 1px solid rgba(200,184,122,0.38);
  color: var(--accent-1);
  font-weight: 600;
  text-align: center;
  border-radius: 12px;
}

/* Typing indicator */
.demo__typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 12px;
}
.demo__typing-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c8b87a, #a8905a);
  font-size: 8px;
  font-weight: 700;
  color: #0a0d16;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.demo__typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  background: rgba(200,184,122,0.09);
  border: 1px solid rgba(200,184,122,0.18);
  border-radius: 12px;
  padding: 7px 12px;
}
.demo__typing-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-1);
  opacity: 0.4;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.demo__typing-dots span:nth-child(1) { animation-delay: 0s; }
.demo__typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.demo__typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* Voice panel */
.demo__voice-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
.demo__voice-ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(94,202,138,0.12);
  border: 1px solid rgba(94,202,138,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green);
}
.demo__voice-ring.ringing {
  animation: voiceRing 0.7s ease-in-out infinite alternate;
}
@keyframes voiceRing {
  from { box-shadow: 0 0 0 0 rgba(94,202,138,0.4); }
  to   { box-shadow: 0 0 0 10px rgba(94,202,138,0); }
}
.demo__voice-ring.active {
  background: rgba(94,202,138,0.18);
  border-color: rgba(94,202,138,0.45);
}
.demo__voice-info { flex: 1; min-width: 0; }
.demo__voice-business {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.demo__voice-status {
  font-size: 11px;
  color: var(--text-muted);
}
.demo__voice-status.connected { color: var(--green); }
.demo__voice-timer {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.4s;
}
.demo__voice-timer.visible { opacity: 1; }

/* Waveform */
.demo__waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 40px;
  padding: 8px 14px 4px;
}
.demo__waveform .wave-bar {
  width: 3px;
  background: var(--accent-1);
  border-radius: 2px;
  opacity: 0.3;
  transform-origin: center bottom;
  transition: opacity 0.3s;
}
.demo__waveform.speaking .wave-bar {
  opacity: 0.8;
  animation: waveAnimate var(--dur, 0.6s) ease-in-out infinite alternate;
}
@keyframes waveAnimate {
  from { transform: scaleY(0.2); }
  to   { transform: scaleY(1); }
}

/* Speaker labels in transcript */
.demo__speaker-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 2px 0 2px 2px;
  margin-top: 4px;
}
.demo__speaker-label--ai   { color: var(--accent-1); }
.demo__speaker-label--caller { color: rgba(120,130,220,0.85); }

/* Controls */
.demo__controls { display: flex; gap: 12px; }

/* ── Live chat input ─────────────────────────────────────────────────────  */
.demo__chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.demo__chat-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  min-width: 0;
}
.demo__chat-input::placeholder { color: var(--text-muted); }
.demo__chat-input:focus {
  border-color: rgba(200,184,122,0.35);
  background: rgba(255,255,255,0.08);
}
.demo__chat-send {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0d16;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.demo__chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.demo__chat-send:hover:not(:disabled) { opacity: 0.85; }

/* ── Voice tab — phone number CTA ────────────────────────────────────  */
.demo__voice-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 24px;
  flex: 1;
  text-align: center;
}
.demo__voice-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 220px;
}
.demo__phone-number {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.demo__phone-actions {
  display: flex;
  gap: 10px;
}
.demo__phone-actions .btn {
  font-size: 13px;
  padding: 9px 18px;
}
.demo__messages--chat { max-height: 200px; }

/* Steps sidebar */
.demo__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 8px;
}
.demo__step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  font-size: 15px;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.3s;
}
.demo__step-item:last-child { border-bottom: none; }
.demo__step-item:not(.active) { opacity: 0.22; }
.demo__step-item.active { opacity: 1; color: var(--text); }
.demo__step-conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding-top: 4px;
}
.demo__step-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  transform: scale(0.65);
  transition: background 0.4s, box-shadow 0.4s, transform 0.4s;
}
.demo__step-dot.active {
  background: var(--accent-1);
  box-shadow: 0 0 10px var(--accent-1), 0 0 20px rgba(200,184,122,0.4);
  transform: scale(1);
}
.demo__step-line {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.07);
  margin-top: 4px;
}
.demo__step-copy { flex: 1; }
.demo__step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  transition: color 0.3s;
}
.demo__step-item.active .demo__step-title { color: var(--accent-1); }
.demo__step-desc {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo__step-item.active .demo__step-desc { color: var(--text); }

/* Below-demo CTA strip */
.demo__cta-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
  text-align: center;
}
.demo__cta-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phone screen navigation
   Three screens (home, sms, call) slide inside the .demo__device shell.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container that clips all screens to the phone body */
.phone-screens {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Each screen is absolutely stacked, slides in/out via transform */
.phone-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #08080e;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Active = on screen */
.phone-screen--active { transform: translateX(0); }
/* Partial exit to the left when a sub-screen is pushed forward */
.phone-screen--exit-left { transform: translateX(-28%); }

/* ── Home / Contact Card ─────────────────────────────────────────────────── */
.phone-contact-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px 4px;
}
.phone-avatar-lg {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4d5a4, #c8b87a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #0a0d16;
  margin-bottom: 6px;
  box-shadow: 0 0 32px rgba(200,184,122,0.35), 0 0 64px rgba(200,184,122,0.12);
}
.phone-avatar-lg--call {
  background: linear-gradient(135deg, #5eca8a, #38a86a);
  box-shadow: 0 0 32px rgba(94,202,138,0.4), 0 0 64px rgba(94,202,138,0.12);
  animation: phoneCallGlow 2.6s ease-in-out infinite alternate;
}
@keyframes phoneCallGlow {
  from { box-shadow: 0 0 20px rgba(94,202,138,0.3); }
  to   { box-shadow: 0 0 48px rgba(94,202,138,0.6), 0 0 90px rgba(94,202,138,0.2); }
}
.phone-contact-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.phone-contact-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

/* ── Action buttons (Message / Call) ─────────────────────────────────────── */
.phone-action-row {
  display: flex;
  gap: 20px;
  padding: 14px 28px 6px;
  justify-content: center;
}
.phone-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: color 0.2s;
}
.phone-action-btn:hover { color: var(--text); }

.phone-action-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: rgba(200,184,122,0.10);
  border: 1px solid rgba(200,184,122,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-1);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.phone-action-btn:hover .phone-action-icon {
  background: rgba(200,184,122,0.20);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(200,184,122,0.2);
}
.phone-action-icon--book {
  background: rgba(147,112,219,0.12);
  border-color: rgba(147,112,219,0.28);
  color: #c8b87a;
}
.phone-action-btn:hover .phone-action-icon--book {
  background: rgba(147,112,219,0.22);
  box-shadow: 0 6px 20px rgba(147,112,219,0.22);
}
.phone-action-icon--call {
  background: rgba(94,202,138,0.10);
  border-color: rgba(94,202,138,0.22);
  color: var(--green);
}
.phone-action-btn:hover .phone-action-icon--call {
  background: rgba(94,202,138,0.20);
  box-shadow: 0 6px 20px rgba(94,202,138,0.2);
}

.phone-home-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.22);
  text-align: center;
  padding: 4px 20px 8px;
  letter-spacing: 0.01em;
}
.phone-home-bar {
  display: flex;
  justify-content: center;
  padding: 10px 0 13px;
}
.phone-home-indicator {
  width: 100px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.16);
}

/* ── Phone nav bar (top of sub-screens) ───────────────────────────────────── */
.phone-nav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(8,8,14,0.85);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
  z-index: 1;
}
.phone-nav-bar--transparent {
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
}
.phone-back-btn {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent-1);
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.phone-back-btn:hover { background: rgba(200,184,122,0.12); }

.phone-nav-contact {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.phone-nav-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4d5a4, #c8b87a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: #0a0d16;
  flex-shrink: 0;
}
.phone-nav-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-nav-status {
  font-size: 10px;
  color: var(--green);
}

/* ── SMS screen message area fills available space ────────────────────────── */
.phone-screen .demo__messages--chat {
  flex: 1;
  max-height: none;
}

/* ── Call screen body ─────────────────────────────────────────────────────── */
.phone-call-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 24px 16px;
  text-align: center;
}
.phone-call-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 210px;
  margin: 4px 0 8px;
}
.phone-number-display {
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 14px;
}
.phone-dial-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 210px;
}
.phone-dial-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 100px;
  background: var(--green);
  color: #0a0d16;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.18s;
  box-shadow: 0 4px 22px rgba(94,202,138,0.38);
}
.phone-dial-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(94,202,138,0.5);
}
.phone-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s;
}
.phone-copy-btn:hover { background: rgba(255,255,255,0.11); }

/* ── Booking demo wizard ─────────────────────────────────────────────────── */
.demo-book {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
}
.demo-book::-webkit-scrollbar { display: none; }

.db-prompt {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 4px;
  line-height: 1.5;
}
.db-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin: 0;
}

/* Service cards */
.db-cards { display: flex; flex-direction: column; gap: 8px; }
.db-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  text-align: left;
  font-family: inherit;
}
.db-card:hover {
  background: rgba(200,184,122,0.10);
  border-color: rgba(200,184,122,0.30);
  transform: translateY(-1px);
}
.db-card__name { font-size: 13px; font-weight: 600; color: var(--text); }
.db-card__dur  { font-size: 11px; color: #fff; font-weight: 500; }

/* Date chips — horizontal scroll strip, always visible above the slots box */
.db-dates {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 14px 6px;
  margin: 0 -14px;
  flex-shrink: 0;
}
.db-dates::-webkit-scrollbar { display: none; }
.db-date-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.db-date-chip[aria-selected="true"] {
  background: rgba(200,184,122,0.15);
  border-color: var(--gold);
}
.db-date-chip__day { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.db-date-chip__num { font-size: 14px; font-weight: 700; color: var(--text); }

/* Time slots — own scroll box so dates above stay visible */
.db-slots {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  min-height: 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,184,122,0.25) transparent;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: start;
}
.db-slots::-webkit-scrollbar { width: 3px; }
.db-slots::-webkit-scrollbar-thumb { background: rgba(200,184,122,0.25); border-radius: 2px; }
.db-slot {
  padding: 9px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}
.db-slot:not([disabled]):hover {
  background: rgba(200,184,122,0.12);
  border-color: rgba(200,184,122,0.35);
}
.db-slot--taken {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.db-no-slots,
.db-slots-loading {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 12px 0;
  margin: 0;
}

/* Info form */
.db-form { display: flex; flex-direction: column; gap: 6px; }
.db-label { font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.db-input {
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 2px;
}
.db-input::placeholder { color: rgba(255,255,255,0.28); }
.db-input:focus {
  border-color: rgba(200,184,122,0.45);
  background: rgba(255,255,255,0.09);
}

/* Primary CTA */
.db-btn {
  margin-top: 4px;
  padding: 11px 16px;
  border-radius: 100px;
  background: var(--gold);
  color: #0a0d16;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  text-align: center;
}
.db-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.db-btn--ghost {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text);
}
.db-btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* Booking summary */
.db-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
}
.db-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.db-summary__row:last-child { border-bottom: none; }
.db-summary__row span { color: var(--text-muted); }
.db-summary__row strong { color: var(--text); font-weight: 600; text-align: right; max-width: 58%; }

/* Success state */
.db-success {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 8px 0 4px;
}
.db-success .db-btn { width: 100%; }
.db-success__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(94,202,138,0.15);
  border: 2px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--green);
  margin-bottom: 4px;
}
.db-success__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.db-success__sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 6px;
  max-width: 220px;
}

/* ── Nav logo intro ───────────────────────────────────────── */
/*
  The logo is rendered immediately (opacity:1) so there's no
  flash. GSAP adds a one-shot subtle entrance animation.
*/
#navLogo {
  opacity: 0;
  transform: translateX(-10px) scale(0.94);
  will-change: transform, opacity;
}

/* ── CTA Banner ───────────────────────────────────────────── */
.cta-banner { background: var(--bg); padding: 0 0 140px; }
.cta-banner__inner {
  position: relative;
  text-align: center;
  padding: 160px 80px;
  border-radius: 24px;
  border: 1px solid rgba(200,184,122,0.18);
  background: rgba(255,255,255,0.01);
  overflow: hidden;
}
.cta-banner__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(200,184,122,0.13) 0%, transparent 65%);
  pointer-events: none;
}
/* Atmospheric ghost wordmark */
.cta-banner__inner::after {
  content: 'NightAI';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(80px, 16vw, 220px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200,184,122,0.035);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}
.cta-banner__inner > * { position: relative; z-index: 1; }
.cta-banner__glow {
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(200,184,122,0.10), transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.cta-banner__inner h2 {
  font-size: clamp(42px, 5.8vw, 76px);
  font-weight: 600;
  margin-bottom: 22px;
  position: relative;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.cta-banner__inner p {
  font-size: 19px;
  color: var(--text-muted);
  margin-bottom: 52px;
  position: relative;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.78;
}
.cta-banner__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.cta-banner__trust span {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.cta-banner__trust-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-dim);
}

/* ── Section eyebrow upgrade ──────────────────────────────── */
.section__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0.9;
}
.section__eyebrow::before,
.section__eyebrow::after {
  content: '';
  display: block;
  height: 1px;
  width: 40px;
  background: var(--accent-1);
  opacity: 0.35;
}

/* ── Premium button upgrades ──────────────────────────────── */
/* Focus rings for accessibility */
.btn:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
}

/* ── Pricing affirm note ──────────────────────────────────── */
.pricing__affirm {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: left;
  margin: 4px 0 20px;
  opacity: 0.75;
}



/* ── Trust Strip ──────────────────────────────────────────── */
.trust-strip {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.trust-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.trust-strip__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  white-space: nowrap;
}
.trust-strip__logos {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-strip__logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.trust-strip__logo:hover { opacity: 1; }
.trust-strip__logo svg { color: var(--accent-1); }
.trust-strip__sep {
  width: 1px;
  height: 18px;
  background: var(--border);
}

/* ── Roadmap ─────────────────────────────────────────────── */
.roadmap__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.roadmap__item {
  padding: 18px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.roadmap__item--live  { border-color: rgba(200,184,122,0.4); }
.roadmap__item--soon  { border-color: rgba(120,120,180,0.3); }
.roadmap__item--planned { opacity: 0.7; }
.roadmap__item h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 8px 0 6px;
}
.roadmap__item p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.roadmap__status {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.roadmap__status--live    { color: var(--accent-1); }
.roadmap__status--soon    { color: #a0a0e0; }
.roadmap__status--planned { color: var(--text-muted); }
.roadmap__note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
}
@media (max-width: 1100px) {
  .roadmap__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .roadmap__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 580px) {
  .roadmap__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .roadmap__grid { grid-template-columns: 1fr; }
}

/* ── ROI Calculator ──────────────────────────────────────── */
.roi { background: var(--bg-card); }
.roi__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}
.roi__inputs {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.roi__field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}
.roi__slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.roi__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(200,184,122,0.15);
  outline: none;
  cursor: pointer;
}
.roi__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-grad);
  border: 2px solid var(--bg);
  box-shadow: 0 0 12px rgba(200,184,122,0.4);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.roi__slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 20px rgba(200,184,122,0.6);
}
.roi__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-grad);
  border: 2px solid var(--bg);
  box-shadow: 0 0 12px rgba(200,184,122,0.4);
  cursor: pointer;
}
.roi__value {
  min-width: 48px;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-1);
  font-family: 'Inter', sans-serif;
}
.roi__results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.roi__result-card {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  text-align: center;
}
.roi__result-card--primary {
  border-color: rgba(200,184,122,0.3);
  background: linear-gradient(135deg, rgba(200,184,122,0.08), rgba(200,184,122,0.02));
}
.roi__result-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.roi__result-num {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-1);
  line-height: 1.1;
  transition: all 0.3s ease;
}
.roi__result-num--sm {
  font-size: 28px;
}
.roi__result-num--green {
  color: #6ee7b7;
}
.roi__result-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.roi__result-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Pricing extras ──────────────────────────────────────── */
.pricing__period {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
}
.pricing__features li.excluded {
  opacity: 0.35;
  color: var(--text-muted);
}
.pricing__features li.excluded::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--text-dim);
  border-radius: 1px;
  transform: translateY(-50%);
}
.pricing__compare-note {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 20px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  padding: 80px 0 0;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(200,184,122,0.3), transparent) 1;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer__brand p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 280px;
}
.footer__links { display: flex; gap: 64px; }
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__col h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.footer__col a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--accent-1); text-shadow: 0 0 8px rgba(200,184,122,0.40); }
.footer__bottom {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}
.footer__bottom p {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

/* ── Animation ────────────────────────────────────────────── */
@keyframes cardGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(200,184,122,0.22), 0 0 60px rgba(200,184,122,0.14), 0 0 120px rgba(168,144,90,0.08); }
  50%      { box-shadow: 0 0 0 1px rgba(200,184,122,0.40), 0 0 80px rgba(200,184,122,0.26), 0 0 160px rgba(168,144,90,0.14); }
}
/* Rotating gradient border on featured pricing card */
@property --pricing-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes pricingBorderRotate {
  to { --pricing-angle: 360deg; }
}
.pricing__card--featured::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  background: conic-gradient(from var(--pricing-angle), transparent 30%, rgba(200,184,122,0.5) 50%, transparent 70%);
  z-index: -1;
  animation: pricingBorderRotate 4s linear infinite;
}
.pricing__card--featured { overflow: visible; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInMessage {
  from { 
    opacity: 0; 
    transform: translateY(8px) scale(0.95);
  }
  to   { 
    opacity: 1; 
    transform: translateY(0) scale(1);
  }
}

@keyframes glow {
  0%   { box-shadow: inset 0 0 20px rgba(200,184,122,0.08), 0 0 30px rgba(200,184,122,0.08); }
  50%  { box-shadow: inset 0 0 30px rgba(200,184,122,0.16), 0 0 50px rgba(200,184,122,0.16); }
  100% { box-shadow: inset 0 0 20px rgba(200,184,122,0.08), 0 0 30px rgba(200,184,122,0.08); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Interactive Enhancements ────────────────────────────── */
.pricing__card:hover {
  animation: cardGlow 2s ease-in-out;
}

.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

.btn:active::after {
  width: 300px;
  height: 300px;
}

a[href^="#"] {
  position: relative;
}

.hero__badge {
  /* badge pulses once on load via GSAP; CSS fallback is immediate show */
  opacity: 1;
  transform: none;
}
.hero__sub,
.hero__actions,
.hero__stats {
  opacity: 1;
  transform: none;
}

/* ── Starfield ───────────────────────────────────────────── */
.starfield {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.starfield::before,
.starfield::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.starfield::before {
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 8%,  rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 30%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 5%,  rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 12%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 35%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 5%  45%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 55%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 70%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 60%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 75%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 50%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 80%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 85%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 90%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 95%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 88%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 92%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 38%, rgba(228,213,164,0.50) 0%, transparent 100%),
    radial-gradient(2px 2px at 38% 18%, rgba(200,184,122,0.40) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 42%, rgba(228,213,164,0.35) 0%, transparent 100%),
    radial-gradient(2px 2px at 82% 72%, rgba(200,184,122,0.50) 0%, transparent 100%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
.starfield::after {
  background-image:
    radial-gradient(1px 1px at 7%  22%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 42%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 58%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 78%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 33%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 55%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 3%  68%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 80%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 48%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 62%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 18%, rgba(255,255,255,0.8) 0%, transparent 100%);
  animation: twinkle 9s ease-in-out infinite alternate-reverse;
}

@keyframes twinkle {
  0%   { opacity: 0.5; }
  50%  { opacity: 1;   }
  100% { opacity: 0.6; }
}
/* Canvas warp replaces CSS pseudo-element stars */
.starfield--canvas::before,
.starfield--canvas::after {
  display: none !important;
}

/* ── Moon ─────────────────────────────────────────────────── */
.hero__moon {
  display: none; /* legacy selector — replaced by .hero__moon-col */
}
.moon-particle {
  position: absolute;
  width: var(--p-size, 4px);
  height: var(--p-size, 4px);
  border-radius: 50%;
  background: rgba(228,213,164, var(--p-alpha, 0.85));
  filter: blur(var(--p-blur, 1.5px));
  top:  var(--p-y, 50%);
  left: var(--p-x, 50%);
  will-change: transform, opacity;
  animation:
    particlePulse var(--p-dur, 3s) var(--ease-in-out) infinite var(--p-delay, 0s) alternate,
    particleDrift var(--p-orbit, 14s) linear infinite var(--p-delay, 0s);
}

@keyframes particlePulse {
  from { opacity: 0.25; transform: scale(0.8); }
  to   { opacity: 1;    transform: scale(1.2); }
}

@keyframes particleDrift {
  0%   { transform: translateX(0px) translateY(0px); }
  25%  { transform: translateX(calc(var(--p-rx, 8px) * 1)) translateY(calc(var(--p-ry, 4px) * -1)); }
  50%  { transform: translateX(calc(var(--p-rx, 8px) * -0.5)) translateY(calc(var(--p-ry, 4px) * 1.5)); }
  75%  { transform: translateX(calc(var(--p-rx, 8px) * -1)) translateY(calc(var(--p-ry, 4px) * -0.5)); }
  100% { transform: translateX(0px) translateY(0px); }
}



/* ── Reduced motion — disable all non-essential animation ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.001ms !important;
    animation-iteration-count: 1   !important;
    transition-duration:  0.001ms !important;
    scroll-behavior: auto !important;
  }
  .moon-svg, .moon-ring, .moon-halo { animation: none; }
  .moon-particle { animation: none; opacity: 0.6; }
  .hero__line,
  .js-reveal    { opacity: 1 !important; transform: none !important; }
  #navLogo      { opacity: 1 !important; transform: none !important; }
  .hero__badge,
  .hero__sub,
  .hero__actions,
  .hero__stats  { opacity: 1 !important; transform: none !important; }
  .starfield::before,
  .starfield::after { animation: none; }
}

/* ── Reduced graphics mode — disables heavy visuals for low-end devices ───── */
.reduced-graphics .starfield::before,
.reduced-graphics .starfield::after {
  animation: none !important;
  opacity: 0.35 !important;
}

.reduced-graphics .moon-particle,
.reduced-graphics .moon-ring,
.reduced-graphics .moon-halo,
.reduced-graphics .moon-svg {
  animation: none !important;
  opacity: 0.7 !important;
  filter: none !important;
}

.reduced-graphics .nav,
.reduced-graphics .cta-banner__inner,
.reduced-graphics .dash-plan-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.reduced-graphics .grain { display: none !important; }
.reduced-graphics * { will-change: auto !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .pricing__grid  { grid-template-columns: 1fr; }
  .pricing__card--featured { transform: none; }
  .pricing__card--featured:hover { transform: translateY(-4px); }
}

@media (max-width: 900px) {
  .problem__grid  { grid-template-columns: 1fr; }
  .demo__content  { grid-template-columns: 1fr; }
  .demo__steps    { display: none; }
  .footer__inner  { grid-template-columns: 1fr; }
  .footer__links  { flex-wrap: wrap; gap: 36px; }
  .hiw__arrow     { display: none; }
  .hiw__steps     { flex-direction: column; align-items: center; }
  .trust-bar__div { display: none; }
  .roi__grid      { grid-template-columns: 1fr; }
  .roi__result-row { grid-template-columns: 1fr; }
  .trust-strip__sep { display: none; }
  .testimonials__grid { grid-template-columns: 1fr; }
}

/* ── Tablet (portrait tablets, small windows ~721–860px) ─────── */
@media (max-width: 860px) {
  /* Collapse nav to hamburger on tablet */
  .nav__links, .nav__cta, .nav__login { display: none; }
  .nav__hamburger { display: flex; }

  .section { padding: 100px 0; }
  .section__header { margin-bottom: 60px; }

  /* Loosen tight heading line-heights that cause vertical scrunching */
  .hero__title  { line-height: 1.08; }
  .section__title { line-height: 1.12; }

  /* Drop forced full-height at tablet — content should breathe naturally */
  .hero,
  .hiw.section,
  .features.section,
  .roadmap.section,
  .roi-compact.section,
  .demo.section,
  .pricing.section,
  .faq.section { min-height: auto; }

  /* Eyebrow tag — shrink decorative lines so they don't overflow */
  .section__eyebrow {
    gap: 10px;
    font-size: 10px;
    justify-content: center;
    text-align: center;
  }
  .section__eyebrow::before,
  .section__eyebrow::after {
    width: 24px;
    flex-shrink: 0;
  }
}

@media (max-width: 720px) {
  .section { padding: 88px 0; }
  .hero__title { font-size: clamp(44px, 11vw, 60px); line-height: 1.1; }
  .moon-svg { width: min(280px, 88vw); }
  /* (scroll-snap removed globally — no override needed */
  .hero,
  .hiw.section,
  .features.section,
  .roadmap.section,
  .roi-compact.section,
  .demo.section,
  .pricing.section,
  .faq.section { min-height: auto; }

  /* Eyebrow tags — tighter lines, fully centered on phone */
  .section__eyebrow::before,
  .section__eyebrow::after { width: 16px; }
}

/* ════════════════════════════════════════════════════════════
   Shared Form Styles (used by /get-started onboard page)
   ════════════════════════════════════════════════════════════ */

.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.field__req { color: var(--accent-1); }

.field input,
.field select {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.field input::placeholder { color: var(--text-dim); }
.field input:focus,
.field select:focus {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(200,184,122,0.15);
}
.field input.error,
.field select.error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255,77,109,0.12);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238575a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.error-banner {
  background: rgba(255,77,109,0.10);
  border: 1px solid rgba(255,77,109,0.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: #ff6b8a;
  margin-bottom: 14px;
  display: none;
}
.error-banner.visible { display: block; }


/* ════════════════════════════════════════════════════════════
   Onboarding Page  (/get-started)
   ════════════════════════════════════════════════════════════ */

.onboard {
  min-height: 100vh;
  padding: calc(var(--nav-h) + 48px) 0 80px;
  position: relative;
  z-index: 1;
}
.onboard .container {
  max-width: 680px;
}

/* ── Progress indicator ───────────────────────────────────── */
.onboard__progress {
  margin-bottom: 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.onboard__step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.onboard__track {
  display: none;
}
.onboard__dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 700;
  transition: all 0.35s ease;
  flex-shrink: 0;
}
.onboard__dot.active {
  border-color: var(--accent-1);
  color: var(--accent-1);
  background: rgba(200,184,122,0.08);
}
.onboard__dot.completed {
  border-color: var(--accent-1);
  background: var(--accent-1);
  color: var(--bg);
}
.onboard__line {
  display: none;
}
.onboard__labels {
  display: none;
}
.onboard__label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
  transition: color 0.2s;
  text-align: center;
  padding: 0 2px;
}
.onboard__label.active {
  color: var(--accent-1);
  font-weight: 600;
}

/* ── Step wrapper ─────────────────────────────────────────── */
.onboard__step[hidden] { display: none; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Step header ──────────────────────────────────────────── */
.onboard__header {
  text-align: center;
  margin-bottom: 40px;
}
.onboard__header h1 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  margin-bottom: 8px;
}
.onboard__header p {
  font-size: 15px;
  color: var(--text-muted);
}

/* ── Plan cards ───────────────────────────────────────────── */
.onboard__grid-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.ob-plan {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.22s, transform 0.22s;
  font-family: var(--font);
  color: var(--text);
}
.ob-plan:hover {
  border-color: rgba(200,184,122,0.35);
  background: rgba(200,184,122,0.03);
  transform: translateY(-1px);
}
.ob-plan.selected {
  border-color: var(--accent-1);
  background: rgba(200,184,122,0.06);
  box-shadow: 0 0 0 1px var(--accent-1), 0 4px 24px rgba(200,184,122,0.10);
}
.ob-plan--popular {
  border-color: rgba(200,184,122,0.28);
}
.ob-plan__tag {
  position: absolute;
  top: -1px;
  right: 20px;
  background: var(--accent-grad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0 0 8px 8px;
}
.ob-plan__header { flex: 1; }
.ob-plan__name {
  font-size: 16px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.ob-plan__pricing {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ob-plan__amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent-1);
}
.ob-plan__period {
  font-size: 13px;
  color: var(--text-muted);
}
.ob-plan__monthly {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.ob-plan__monthly strong { color: var(--text); }

.ob-plan__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.ob-plan__features li {
  font-size: 13px;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
}
.ob-plan__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
  font-size: 12px;
}

/* ── Form layout ──────────────────────────────────────────── */
.onboard__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}
.onboard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Actions ──────────────────────────────────────────────── */
.onboard__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.onboard__actions--split {
  justify-content: space-between;
}
.onboard__actions--split .btn:last-child {
  flex: 1;
  max-width: 280px;
  font-size: 14px;
}

.onboard__legal {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 16px;
  line-height: 1.5;
}
.onboard__legal a {
  color: var(--text-muted);
  text-decoration: underline;
}

.onboard__note {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 12px;
}
.onboard__note a {
  color: var(--text-muted);
  text-decoration: underline;
}

/* ── Success screen ───────────────────────────────────────── */
.onboard__step--success {
  text-align: center;
  animation: slideInRight 0.4s ease both;
}
.ob-success__check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(74,222,128,0.12);
  border: 2px solid rgba(74,222,128,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  margin: 0 auto 24px;
  animation: successScale 0.5s var(--ease-spring) both 0.1s;
}
@keyframes successScale {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.onboard__step--success h1 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}
.ob-success__subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 32px;
  line-height: 1.7;
}
.ob-success__summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 32px;
  text-align: left;
}
.ob-success__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.ob-success__row span { font-size: 14px; color: var(--text-muted); }
.ob-success__row strong { font-size: 14px; }
.ob-success__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.ob-success__next {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
  text-align: left;
}
.ob-success__next h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}
.ob-success__next ol {
  list-style: none;
  counter-reset: steps;
}
.ob-success__next li {
  counter-increment: steps;
  font-size: 14px;
  color: var(--text-muted);
  padding: 8px 0 8px 32px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.ob-success__next li:last-child { border-bottom: none; }
.ob-success__next li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(200,184,122,0.10);
  color: var(--accent-1);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Trust pills (step 1) ────────────────────────────────────────────────── */
.ob-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}
.ob-trust-pills span {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  background: rgba(74,222,128,0.07);
  border: 1px solid rgba(74,222,128,0.18);
  border-radius: 20px;
  padding: 4px 12px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ── Stripe payment CTA (success step) ──────────────────────────────────── */
.ob-stripe-cta {
  margin-bottom: 24px;
  animation: slideInRight 0.4s ease both 0.25s;
}
.ob-stripe-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, rgba(168,144,90,0.15), rgba(200,184,122,0.05));
  border: 1.5px solid rgba(200,184,122,0.30);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.ob-stripe-cta__copy { flex: 1; text-align: left; }
.ob-stripe-cta__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.ob-stripe-cta__sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.btn--stripe {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  background: linear-gradient(135deg, #635bff, #4f46e5);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(200,184,122,0.35);
  flex-shrink: 0;
}
.btn--stripe:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(200,184,122,0.45);
}

/* ── Mobile onboard ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ob-plan {
    flex-direction: column;
    gap: 12px;
  }
  .ob-plan__features { min-width: 0; }
  .onboard__row { grid-template-columns: 1fr; }
  .onboard__actions--split { flex-direction: column-reverse; }
  .onboard__actions--split .btn:last-child { max-width: none; }
  .onboard__step-indicator { gap: 4px; }
  .onboard__label { font-size: 9px; }
  .onboard__step--success .onboard__actions { flex-direction: column; }
  .ob-stripe-cta__inner { flex-direction: column; text-align: center; }
  .ob-stripe-cta__copy  { text-align: center; }
  .btn--stripe           { width: 100%; justify-content: center; }
  .ob-services          { gap: 12px; }
  .ob-service__bubble   { width: 56px; height: 56px; }
  .ob-payment-option    { flex-wrap: wrap; }
  .ob-payment-option .btn { width: 100%; justify-content: center; }
  .ob-toggle-row        { flex-direction: row; }
  .btn--call            { width: 100%; justify-content: center; }
  .ob-quote__item       { flex-wrap: wrap; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════════
   Managed Setup (Step 4)
   ═══════════════════════════════════════════════════════════════ */

.ob-services {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 36px 0 32px;
}
.ob-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 160px;
}
.ob-service__bubble {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(200,184,122,0.08);
  border: 1.5px solid rgba(200,184,122,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-1);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.ob-service__bubble:hover {
  background: rgba(200,184,122,0.15);
  border-color: var(--accent-1);
  transform: translateY(-2px);
}
.ob-service__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.ob-service__role {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: -4px;
}
.ob-managed__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 32px;
}
.ob-managed__card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.ob-managed__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-managed__list li {
  font-size: 14px;
  color: var(--text-muted);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.ob-managed__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   Quote & Payment (Step 5)
   ═══════════════════════════════════════════════════════════════ */

.ob-quote__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.ob-quote__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
}
.ob-quote__row span { font-size: 14px; color: var(--text-muted); }
.ob-quote__row strong { font-size: 14px; }
.ob-quote__row--muted span,
.ob-quote__row--muted strong { color: var(--text-dim); font-size: 13px; }
.ob-quote__price { font-size: 22px !important; color: var(--accent-1) !important; font-weight: 800 !important; }
.ob-quote__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.ob-quote__note {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 14px;
  line-height: 1.5;
}
.ob-payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.ob-payment-option {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color 0.2s, background 0.2s;
}
.ob-payment-option:hover {
  border-color: rgba(200,184,122,0.35);
  background: rgba(200,184,122,0.03);
}
.ob-payment-option__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(200,184,122,0.1);
  border: 1px solid rgba(200,184,122,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-1);
  flex-shrink: 0;
}
.ob-payment-option__body {
  flex: 1;
  min-width: 0;
}
.ob-payment-option__body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.ob-payment-option__body p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Service Config Toggles (Step 4)
   ═══════════════════════════════════════════════════════════════ */

.ob-config-section {
  margin-bottom: 28px;
}
.ob-config__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.ob-config__hint {
  font-size: 12px;
  color: #f87171;
  margin-top: 10px;
}
.ob-service-toggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-svc-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.ob-svc-toggle:hover {
  border-color: rgba(200,184,122,0.35);
  background: rgba(200,184,122,0.04);
}
.ob-svc-toggle.selected {
  border-color: var(--accent-1);
  background: rgba(200,184,122,0.08);
}
.ob-svc-toggle__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(200,184,122,0.08);
  border: 1px solid rgba(200,184,122,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-1);
  flex-shrink: 0;
}
.ob-svc-toggle.selected .ob-svc-toggle__icon {
  background: rgba(200,184,122,0.20);
}
.ob-svc-toggle__body {
  flex: 1;
  min-width: 0;
}
.ob-svc-toggle__body strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.ob-svc-toggle__body span {
  font-size: 12px;
  color: var(--text-muted);
}
.ob-svc-toggle__check {
  color: var(--accent-1);
  font-weight: 700;
  font-size: 17px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.ob-svc-toggle.selected .ob-svc-toggle__check {
  opacity: 1;
}

/* HIPAA yes/no toggle */
.ob-toggle-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ob-toggle-btn {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ob-toggle-btn:hover {
  border-color: rgba(200,184,122,0.4);
  color: var(--text);
}
.ob-toggle-btn--active {
  border-color: var(--accent-1);
  color: var(--accent-1);
  background: rgba(200,184,122,0.08);
}

/* ═══════════════════════════════════════════════════════════════
   Itemized Quote (Step 5)
   ═══════════════════════════════════════════════════════════════ */

.ob-quote-services {
  margin-bottom: 28px;
}
.ob-quote__section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 10px 0 4px;
}
.ob-quote__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0 6px 14px;
  border-left: 2px solid rgba(200,184,122,0.2);
  margin: 4px 0;
}
.ob-quote__item span {
  font-size: 13px;
  color: var(--text-muted);
}
.ob-quote__item strong {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  margin-left: 12px;
}
.ob-quote__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 6px;
}
.ob-quote__total-row > span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ob-quote__coverage {
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(200,184,122,0.04);
  border: 1px solid rgba(200,184,122,0.12);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 12px 0 4px;
  line-height: 1.6;
}
.ob-quote__coverage-label {
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 4px;
}

/* Book a Call button — green, same form factor as btn--stripe */
.btn--call {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  background: linear-gradient(135deg, #c8b87a, #c8b87a);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(34,197,94,0.35);
  flex-shrink: 0;
}
.btn--call:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(34,197,94,0.45);
}

/* ═══════════════════════════════════════════════════════════════
   Connect Dashboard (legacy — kept for reference)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Connect Dashboard (Step 4)
   ═══════════════════════════════════════════════════════════════ */

/* Trust / session info bar */
.ob-connect__info {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ob-connect__info span {
  background: rgba(200,184,122,.12);
  border: 1px solid rgba(200,184,122,.28);
  border-radius: 20px;
  color: var(--accent-1);
  font-size: 12px;
  padding: 4px 12px;
}

/* Provider list */
.ob-providers {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Provider card */
.ob-provider {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.ob-provider--connected {
  border-color: rgba(52,211,153,.4);
  background: rgba(52,211,153,.05);
}

/* Card header row */
.ob-provider__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 16px;
}
.ob-provider__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ob-provider__icon svg { display: block; }
.ob-provider__meta { flex: 1; min-width: 0; }
.ob-provider__name {
  font-size: 15px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 2px;
}
.ob-provider__desc {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

/* Status badge */
.ob-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(200,184,122,.12);
  color: var(--accent-1);
  border: 1px solid rgba(200,184,122,.28);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .25s, color .25s, border-color .25s;
}
.ob-status-badge--connected {
  background: rgba(52,211,153,.15);
  color: #6ee7b7;
  border-color: rgba(52,211,153,.4);
}

/* Action row (Sign Up link + Connect button) */
.ob-provider__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 16px;
}
.ob-provider__signup {
  font-size: 12px;
  color: var(--accent-1);
  text-decoration: none;
}
.ob-provider__signup:hover { text-decoration: underline; }

/* Expandable credential form */
.ob-provider__form {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 20px;
  animation: slideDown .22s ease both;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Small helper text under inputs */
.field__hint {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}
.field__hint a { color: var(--accent-1); text-decoration: none; }
.field__hint a:hover { text-decoration: underline; }

/* ── Password strength meter (O9) ──────────────────────────────────────── */
.pw-strength { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pw-strength__bar { flex: 1; height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.pw-strength__fill { height: 100%; width: 0; border-radius: 2px; transition: width .25s ease, background .25s ease; }
.pw-strength__label { font-size: 11px; font-weight: 600; min-width: 48px; text-align: right; }
.pw-strength[data-level="0"] .pw-strength__fill { width: 0; }
.pw-strength[data-level="1"] .pw-strength__fill { width: 25%; background: #ef4444; }
.pw-strength[data-level="1"] .pw-strength__label { color: #ef4444; }
.pw-strength[data-level="2"] .pw-strength__fill { width: 50%; background: #f59e0b; }
.pw-strength[data-level="2"] .pw-strength__label { color: #f59e0b; }
.pw-strength[data-level="3"] .pw-strength__fill { width: 75%; background: #c8b87a; }
.pw-strength[data-level="3"] .pw-strength__label { color: #c8b87a; }
.pw-strength[data-level="4"] .pw-strength__fill { width: 100%; background: #10b981; }
.pw-strength[data-level="4"] .pw-strength__label { color: #10b981; }

/* "(optional)" label beside input label */
.ob-field-optional {
  font-size: 11px;
  color: #64748b;
  margin-left: 6px;
  font-weight: 400;
}

/* Validate & Connect CTA inside form */
.ob-validate-btn {
  align-self: flex-start;
}

/* Error text inside provider card */
.ob-connect-error {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 13px;
  padding: 10px 14px;
  margin-top: 12px;
}

/* Session unavailable banner */
#ob-connect-session-error {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 14px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

/* Activate CTA */
.ob-activate {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  animation: fadeIn .4s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.ob-activate__inner {
  text-align: center;
  background: linear-gradient(135deg, rgba(168,144,90,.15), rgba(200,184,122,.08));
  border: 1px solid rgba(200,184,122,.32);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 420px;
  width: 100%;
}
.ob-activate__inner h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #f1f5f9;
}
.ob-activate__inner p {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 20px;
}

/* ── Connect Dashboard — mobile ── */
@media (max-width: 600px) {
  .ob-provider__header { flex-wrap: wrap; gap: 10px; }
  .ob-provider__actions { flex-wrap: wrap; }
  .ob-activate__inner { padding: 22px 18px; }
  .ob-connect__info { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   Auth Page (/login)
   ═══════════════════════════════════════════════════════════════ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 16px 40px;
}

.auth-card {
  background: rgba(255,254,250,.03);
  border: 1px solid rgba(200,184,122,0.14);
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
}

.auth-card__header { text-align: center; margin-bottom: 28px; }
.auth-card__icon {
  width: 56px;
  height: 56px;
  background: rgba(200,184,122,.12);
  border: 1px solid rgba(200,184,122,.30);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--accent-1);
}
.auth-card__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  font-family: var(--font-display);
}
.auth-card__sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.auth-card__error {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 13px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.auth-card__form { display: flex; flex-direction: column; gap: 18px; }
.auth-card__submit { width: 100%; justify-content: center; margin-top: 4px; }
.auth-card__demo { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; margin-top: 16px; }
.auth-card__footer {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  margin: 16px 0 0;
}
.auth-card__footer a { color: var(--accent-1); text-decoration: none; }
.auth-card__footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   Dashboard Page (/dashboard)
   ═══════════════════════════════════════════════════════════════ */

/* Splash loading screen */
.dash-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05070d;
}
.dash-splash[hidden] {
  display: none !important;
}
.dash-splash__inner { text-align: center; }
.dash-splash__logo {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dash-splash__logo span { color: var(--accent-1); text-shadow: 0 0 10px rgba(200,184,122,0.8), 0 0 22px rgba(200,184,122,0.4); }
.dash-splash__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(200,184,122,.20);
  border-top-color: var(--accent-1);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Nav right slot */
.dash-nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dash-nav__biz {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dashboard main */
.dash-page { padding: 80px 0 60px; min-height: 100vh; }
.dash-page[hidden] { display: none !important; }

/* ── Dashboard tab navigation ── */
.dash-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(200,184,122,.15);
  padding-bottom: 0;
  flex-wrap: wrap;
}
.dash-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 10px 16px 12px;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  position: relative;
}
.dash-tab:hover:not(:disabled) { color: var(--text); }
.dash-tab--active,
.dash-tab.dash-tab--active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.dash-tab--disabled,
.dash-tab:disabled {
  color: rgba(255,255,255,.2);
  cursor: not-allowed;
  opacity: .5;
}
.dash-tab__badge {
  background: rgba(200,184,122,.12);
  border: 1px solid rgba(200,184,122,.2);
  border-radius: 4px;
  color: var(--gold);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  margin-left: 6px;
  opacity: .7;
  padding: 1px 5px;
  text-transform: uppercase;
  vertical-align: middle;
}
.dash-tab-panel { display: block; }
.dash-tab-panel[hidden] { display: none !important; }

/* ── Welcome header ── */
.dash-welcome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.dash-welcome__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: .01em;
  font-family: var(--font-display);
}
.dash-welcome__sub {
  font-size: 14px;
  color: #94a3b8;
  margin: 0;
}
.dash-welcome__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #c8b87a;
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.28);
  border-radius: 20px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
}
/* ── Plan + status bar ── */
.dash-plan-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 28px;
}
.dash-plan-bar__left {
  display: flex;
  gap: 40px;
  align-items: center;
}
.dash-plan-bar__tier,
.dash-plan-bar__status {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-plan-bar__tier-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 20px;
  background: linear-gradient(135deg, rgba(168,144,90,.18), rgba(200,184,122,.12));
  color: var(--accent-1);
}
.dash-plan-bar__tier-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 2px;
}
.dash-plan-bar__tier-value {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}
.dash-plan-bar__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
}
.dash-plan-bar__dot--live { background: #34d399; animation: dotBreathe 2.5s ease-in-out infinite; }
@keyframes dotBreathe {
  0%, 100% { box-shadow: 0 0 4px rgba(52,211,153,0.4), 0 0 0 0 rgba(52,211,153,0.2); }
  50%      { box-shadow: 0 0 8px rgba(52,211,153,0.6), 0 0 0 4px rgba(52,211,153,0.08); }
}
.dash-plan-bar__dot--setup { background: #fbbf24; }

/* ── Phone number chip ─────────────────────────────────────────────────────── */
.dash-plan-bar__phone {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
}
.dash-plan-bar__phone svg {
  color: #94a3b8;
  flex-shrink: 0;
}

/* ── Plan usage progress bar ───────────────────────────────────────────────── */
.dash-plan-bar__usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  max-width: 300px;
  flex: 1;
}
.dash-plan-bar__usage-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.dash-plan-bar__usage-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dash-plan-bar__usage-count {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}
.dash-plan-bar__usage-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.dash-plan-bar__usage-fill {
  height: 100%;
  border-radius: 3px;
  background-image: linear-gradient(90deg, var(--accent-2), var(--accent-1), #e4d5a4, var(--accent-1));
  background-size: 200% 100%;
  animation: progressSweep 3s ease-in-out infinite;
  transition: width 0.6s var(--ease-spring);
}
@keyframes progressSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.dash-plan-bar__usage-fill--warn {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.dash-plan-bar__usage-fill--over {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* ── Account setup progress steps ─────────────────────────────────────────── */
.dash-setup-steps {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Connector line */
.dss-connector {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.08);
  min-width: 18px;
  max-width: 48px;
  transition: background .3s;
}
.dss-connector--done {
  background: #34d399;
}

/* Step */
.dss-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
}
.dss-step__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: #475569;
  transition: border-color .25s, background .25s, color .25s;
}
.dss-step__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #475569;
  white-space: nowrap;
  transition: color .25s;
}

/* Done state */
.dss-step--done .dss-step__circle {
  background: rgba(52,211,153,.15);
  border-color: #34d399;
  color: #34d399;
}
.dss-step--done .dss-step__label {
  color: #34d399;
}

/* Active state (current step to complete) */
.dss-step--active .dss-step__circle {
  background: rgba(200,184,122,.12);
  border-color: var(--accent-1);
  color: var(--accent-1);
  box-shadow: 0 0 10px rgba(200,184,122,.3);
  animation: dss-pulse 2s ease-in-out infinite;
}
.dss-step--active .dss-step__label {
  color: var(--accent-1);
}
@keyframes dss-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(200,184,122,.25); }
  50%       { box-shadow: 0 0 14px rgba(200,184,122,.55); }
}

@media (max-width: 600px) {
  .dss-step__label { display: none; }
  .dss-connector   { min-width: 10px; }
}

/* Stats grid */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.dash-stat-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.3),
    0 4px 16px rgba(0,0,0,0.2),
    0 12px 40px rgba(0,0,0,0.15);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-med) var(--ease-spring),
              box-shadow var(--dur-med) var(--ease-out);
}
.dash-stat-card:hover {
  border-color: rgba(255,255,255,.12);
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    inset 0 0 30px rgba(200,184,122,0.03),
    0 2px 4px rgba(0,0,0,0.3),
    0 8px 24px rgba(0,0,0,0.25),
    0 16px 48px rgba(0,0,0,0.18);
}
.dash-stat-card--accent {
  border-color: rgba(200,184,122,.22);
  background: linear-gradient(135deg, rgba(168,144,90,.08), rgba(200,184,122,.04));
}
.dash-stat-card__icon {
  color: var(--accent-1);
  margin-bottom: 14px;
  opacity: .7;
}
.dash-stat-card--accent .dash-stat-card__icon { color: var(--accent-1); opacity: 1; }
.dash-stat-card__value {
  font-size: 32px;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0 0 4px;
  line-height: 1;
}
.dash-stat-card__label {
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
  font-weight: 600;
}
.dash-stat-card__sub { font-size: 12px; color: #64748b; margin: 0; }

/* ── Two-column layout ── */
.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.dash-calendar-wrap,
.dash-upcoming-wrap {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 20px 22px 16px;
}
.dash-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}

/* ── Calendar ── */
.dash-calendar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-cal-nav-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
}
.dash-cal-nav-btn:hover { border-color: rgba(255,255,255,.2); color: #f1f5f9; }
.dash-cal-month {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  min-width: 120px;
  text-align: center;
}

.dash-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dash-cal-head {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0;
  letter-spacing: .08em;
}
.dash-cal-day {
  position: relative;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  padding: 7px 0;
  border-radius: 6px;
  cursor: default;
  transition: background .15s;
}
.dash-cal-day--empty { visibility: hidden; }
.dash-cal-day--today    { color: var(--text); font-weight: 700; background: rgba(200,184,122,.15); border-radius: 8px; }
.dash-cal-day--has-appt { color: #e2e8f0; font-weight: 600; }
.dash-cal-day--has-appt::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-1);
}
.dash-cal-day--today.dash-cal-day--has-appt::after { background: var(--accent-1); }

/* ── Upcoming mini list ── */
.dash-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}
.dash-upcoming-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  transition: border-color .2s;
}
.dash-upcoming-item:hover { border-color: rgba(255,255,255,.1); }
.dash-upcoming-item__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}
.dash-upcoming-item__day {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-1);
  letter-spacing: .06em;
}
.dash-upcoming-item__hour {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}
.dash-upcoming-item__info { flex: 1; min-width: 0; }
.dash-upcoming-item__name {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-upcoming-item__reason {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-upcoming-item__badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Activity section ── */
/* ── Dashboard Setup Quote ── */
/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD — QUOTE TAB
   ════════════════════════════════════════════════════════════════════════════ */

.dq-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 48px;
}

/* Hero */
.dq-hero {
  text-align: center;
  padding: 40px 24px 36px;
}
.dq-hero__kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-1);
  background: rgba(200,184,122,.1);
  border: 1px solid rgba(200,184,122,.2);
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 20px;
}
.dq-hero__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 16px;
}
.dq-hero__sub {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Feature grid */
.dq-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.dq-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 18px 18px;
  transition: border-color .18s;
}
.dq-feature:hover {
  border-color: rgba(200,184,122,.25);
}
.dq-feature__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(200,184,122,.1);
  color: var(--accent-1);
  margin-top: 1px;
}
.dq-feature__body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.dq-feature__body p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* CTA */
.dq-cta {
  background: linear-gradient(135deg, rgba(200,184,122,.07) 0%, rgba(200,184,122,.03) 100%);
  border: 1px solid rgba(200,184,122,.2);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
}
.dq-cta__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
}
.dq-cta__desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 460px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.dq-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dq-btn-book {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
}
.dq-cta__phone-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}
.dq-cta__phone-widget {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  letter-spacing: 0.02em;
}
.dq-cta__phone-widget svg {
  color: var(--accent, #c8b87a);
  flex-shrink: 0;
}
.dq-cta__phone-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 600px) {
  .dq-features { grid-template-columns: 1fr; }
  .dq-cta { padding: 28px 20px; }
  .dq-hero { padding: 24px 16px 28px; }
}

/* Legacy DSQ styles (kept for CSS rule completeness) */
.dash-setup-quote {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(200,184,122,0.2);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 28px;
}
.dash-setup-quote .dash-panel-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.dsq-note {
  font-size: 13px; color: var(--text-muted); margin-bottom: 20px;
}
.dsq-toggles {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
}
.dsq-selectors {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.dsq-select-group {
  display: flex; flex-direction: column; gap: 4px;
}
.dsq-select-group span {
  font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
}
.dsq-select-group select {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; font-size: 14px; font-family: inherit;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8a9a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}
.dsq-select-group select option {
  background: var(--bg-card); color: var(--text);
}
.dsq-quote-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;
}
.dsq-quote-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 18px 20px;
}
.dsq-quote-card h3 {
  font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px;
}
.dsq-items .ob-quote__item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 14px; color: var(--text-muted);
}
.dsq-items .ob-quote__item strong { color: var(--text); }
.dsq-total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px;
  font-size: 15px; color: var(--text);
}
.dsq-total strong {
  font-size: 18px; font-weight: 800; color: var(--accent-1);
}
.dsq-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.dsq-actions .btn {
  padding: 14px 32px; font-size: 15px; font-weight: 600;
}
.dsq-or {
  font-size: 13px; color: var(--text-muted);
}

.btn--secondary {
  background: var(--bg-card-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--secondary:hover {
  border-color: rgba(200,184,122,0.45);
  color: var(--accent-1);
  transform: translateY(-1px);
}
@media (max-width: 700px) {
  .dsq-quote-cards { grid-template-columns: 1fr; }
  .dsq-toggles { flex-direction: column; }
}

.dash-activity {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 20px 22px 16px;
  margin-bottom: 40px;
}
.dash-loading, .dash-empty {
  text-align: center;
  color: #64748b;
  padding: 32px 0;
  font-size: 14px;
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
}
.dash-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-table td {
  padding: 12px;
  font-size: 14px;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.dash-table tbody tr:hover td { background: rgba(255,255,255,.02); }

/* Status badges */
.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: capitalize;
  letter-spacing: .02em;
}
.status-badge--scheduled  { background: rgba(200,184,122,.12);  color: var(--accent-1); }
.status-badge--completed  { background: rgba(148,163,184,.12);  color: #94a3b8; }
.status-badge--cancelled  { background: rgba(239,68,68,.12);   color: #fca5a5; }
.status-badge--noshow     { background: rgba(251,191,36,.12);  color: #fbbf24; }

/* ── Demo banner ── */
.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #a8905a, #c8b87a);
  color: #fff;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .45rem 1rem;
}
.demo-banner a {
  color: #fff;
  text-decoration: underline;
  margin-left: .75rem;
}

/* ── Demo mode — banner sits above nav and scrolls away ── */
.demo-mode .demo-banner {
  position: relative;
  z-index: 200;
}
.demo-mode .nav {
  position: sticky;
  top: 0;
  z-index: 150;
}
.demo-mode .dash-page {
  padding-top: 20px;
}

/* ── Dashboard mobile ── */
@media (max-width: 900px) {
  .dash-stats     { grid-template-columns: repeat(2, 1fr); }
  .dash-two-col   { grid-template-columns: 1fr; }
  .dash-plan-bar  { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .dash-stats     { grid-template-columns: repeat(2, 1fr); }
  .dash-welcome   { flex-direction: column; }
  /* hide Reason column — leaves Client / Date / Duration / Status / Actions */
  .dash-table th:nth-child(3), .dash-table td:nth-child(3) { display: none; }
  .auth-card      { padding: 28px 20px; }
  /* tighten lateral padding inside dashboard pages */
  .dash-page .container { padding-left: 14px; padding-right: 14px; }
  /* shrink setup-step circles so 5 steps fit on a 320px phone */
  .dss-step__circle     { width: 24px; height: 24px; font-size: 10px; }
  .dss-connector        { min-width: 8px; }
}
@media (max-width: 480px) {
  /* single-column stat cards — each card gets full width on very small phones */
  .dash-stats { grid-template-columns: 1fr; }
  /* reduce top padding — phones scroll rather than see all at once */
  .dash-page  { padding-top: 60px; }
  /* hide Duration column — table still has Client / Date / Status / Actions */
  .dash-table th:nth-child(4), .dash-table td:nth-child(4) { display: none; }
  /* calendar sync buttons: wrap + stretch so they don't overflow at 320px */
  .dash-cal-sync__btns { flex-wrap: wrap; }
  .dash-cal-sync__btn  { flex: 1 1 auto; justify-content: center; min-width: 80px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD — PREMIUM FX SYSTEM
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Premium shadows (shared) ─────────────────────────────────────────────── */
.dash-calendar-wrap,
.dash-upcoming-wrap,
.dash-activity,
.bl-plan-card,
.an-stat-card,
.an-panel,
.an-chart-section,
.byok-card,
.dash-settings-section,
.bl-usage-card,
.dash-today {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.3),
    0 4px 16px rgba(0,0,0,0.2),
    0 12px 40px rgba(0,0,0,0.15);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-med) var(--ease-spring),
              box-shadow var(--dur-med) var(--ease-out);
}
.dash-calendar-wrap:hover,
.dash-upcoming-wrap:hover,
.dash-activity:hover,
.an-stat-card:hover,
.an-panel:hover,
.an-chart-section:hover,
.bl-usage-card:hover {
  border-color: rgba(255,255,255,.10);
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    inset 0 0 30px rgba(200,184,122,0.02),
    0 2px 4px rgba(0,0,0,0.3),
    0 8px 24px rgba(0,0,0,0.25),
    0 16px 48px rgba(0,0,0,0.18);
}

/* ── Entrance animation classes ───────────────────────────────────────────── */
.fx-hidden {
  opacity: 0;
  transform: translateY(20px);
}
.fx-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) {
  .fx-hidden { opacity: 1; transform: none; }
  .fx-visible { transition: none; }
}

/* ── Tab cross-fade classes ───────────────────────────────────────────────── */
.fx-tab-exit {
  animation: tabFadeOut 180ms var(--ease-out) forwards;
}
.fx-tab-enter {
  animation: tabFadeIn 280ms var(--ease-spring) forwards;
}
@keyframes tabFadeOut {
  to { opacity: 0; transform: translateX(-10px); }
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Skeleton loading shimmer ─────────────────────────────────────────────── */
.dash-skeleton {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.dash-skeleton::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.dash-skeleton--line { height: 14px; margin: 8px 0; }
.dash-skeleton--stat { height: 36px; width: 80px; margin-bottom: 8px; }
.dash-skeleton--card { height: 56px; }

/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD — NEW INTERACTIVE COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Refresh button ──────────────────────────────────────────────────────── */
.dash-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(200,184,122,.08);
  border: 1px solid rgba(200,184,122,.20);
  border-radius: 8px;
  color: var(--clr-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dash-refresh-btn:hover { background: rgba(200,184,122,.16); color: var(--accent-1); }
.dash-refresh-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── "Next appointment" countdown pill ───────────────────────────────────── */
.dash-next-appt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.25);
  border-radius: 999px;
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 500;
}
.dash-next-appt__icon { font-size: 13px; }

/* ── Badge pills ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.badge--accent { background: rgba(200,184,122,.15); color: var(--accent-1); }
.badge--muted  { background: rgba(255,255,255,.07); color: var(--clr-text-muted); }

/* ── Status badges (shared) ──────────────────────────────────────────────── */
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-badge--scheduled { background: rgba(200,184,122,.12); color: var(--accent-1); }
.status-badge--confirmed { background: rgba(52,211,153,.12); color: #6ee7b7; }
.status-badge--completed { background: rgba(148,163,184,.12); color: #94a3b8; }
.status-badge--cancelled { background: rgba(239,68,68,.1); color: #f87171; }
.status-badge--noshow    { background: rgba(251,146,60,.1); color: #fb923c; }

/* ── Today's Schedule section ────────────────────────────────────────────── */
.dash-today {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.dash-today__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dash-today__title { font-size: 14px; font-weight: 600; color: var(--clr-text); }
.dash-today__date  { font-size: 12px; color: var(--clr-text-muted); margin-left: auto; }
.dash-today__list  { display: flex; flex-direction: column; gap: 8px; }
.dash-today__empty { font-size: 13px; color: var(--clr-text-muted); margin: 8px 0 0; }

.dash-today__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--clr-border);
  position: relative;
  transition: background .15s;
}
.dash-today__item:hover { background: rgba(255,255,255,.07); }
.dash-today__item--now  { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.05); }
.dash-today__item--past { opacity: .55; }

.dash-today__now-badge {
  position: absolute;
  top: -9px;
  left: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: #34d399;
  color: #064e3b;
  letter-spacing: .03em;
}

.dash-today__time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 68px;
  flex-shrink: 0;
}
.dash-today__time-start { font-size: 13px; font-weight: 600; color: var(--clr-text); }
.dash-today__time-end   { font-size: 11px; color: var(--clr-text-muted); }

.dash-today__body { flex: 1; min-width: 0; }
.dash-today__name { font-size: 13px; font-weight: 600; color: var(--clr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-today__reason { font-size: 11px; color: var(--clr-text-muted); margin-top: 2px; }

.dash-today__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Quick action buttons (confirm / cancel) ─────────────────────────────── */
.dash-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, color .15s, opacity .15s;
}
.dash-action-btn:disabled { opacity: .4; cursor: not-allowed; }
.dash-action-btn--confirm {
  background: rgba(52,211,153,.12);
  color: #6ee7b7;
  border-color: rgba(52,211,153,.25);
}
.dash-action-btn--confirm:hover:not(:disabled) { background: rgba(52,211,153,.22); }
.dash-action-btn--cancel {
  background: rgba(239,68,68,.08);
  color: #f87171;
  border-color: rgba(239,68,68,.2);
}
.dash-action-btn--cancel:hover:not(:disabled) { background: rgba(239,68,68,.16); }

/* ── Sparkline canvas inside stat card ───────────────────────────────────── */
.dash-sparkline {
  display: block;
  margin-top: 8px;
  opacity: .8;
  border-radius: 2px;
}

/* ── Calendar: appointment dots ──────────────────────────────────────────── */
.dash-cal-day__dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 2px;
}
.dash-cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.dash-cal-dot--scheduled { background: var(--accent-1); }
.dash-cal-dot--confirmed { background: #34d399; }
.dash-cal-dot--completed { background: #64748b; }
.dash-cal-dot--cancelled { background: #ef4444; }

/* ── Demo: clickable calendar days ── */
.demo-cal-day-clickable {
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.demo-cal-day-clickable:hover {
  background-color: rgba(200,184,122,.15);
  border-color: rgba(200,184,122,.4);
}

.dash-cal-day--selected {
  background: rgba(200,184,122,.15) !important;
  border-color: rgba(200,184,122,.40) !important;
  color: var(--accent-1);
}

/* ── Calendar day detail panel ───────────────────────────────────────────── */
.dash-cal-detail {
  margin-top: 8px;
  padding: 14px 16px;
  background: rgba(200,184,122,.05);
  border: 1px solid rgba(200,184,122,.18);
  border-left: 3px solid var(--accent-1);
  border-radius: 10px;
  animation: fdIn .15s ease;
}
@keyframes fdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.dash-cal-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-1);
}
.dash-cal-detail__close {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: none;
  color: var(--clr-text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-cal-detail__close:hover { background: rgba(255,255,255,.14); color: #e2e8f0; }
.dash-cal-detail__empty { font-size: 12px; color: var(--clr-text-muted); }

.dash-cal-detail__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.dash-cal-detail__item:last-child { border-bottom: none; }
.dash-cal-detail__time { font-size: 12px; font-weight: 600; color: var(--clr-text); min-width: 60px; }
.dash-cal-detail__body { flex: 1; min-width: 0; }
.dash-cal-detail__name { display: block; font-size: 12px; font-weight: 600; color: var(--clr-text); }
.dash-cal-detail__reason { font-size: 11px; color: var(--clr-text-muted); }
.dash-cal-detail__actions { display: flex; gap: 4px; }

/* ── Calendar sync bar ───────────────────────────────────────────────────── */
.dash-cal-sync {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--clr-border);
  flex-wrap: wrap;
}
.dash-cal-sync__label {
  font-size: 11px;
  color: var(--clr-text-muted);
  white-space: nowrap;
}
.dash-cal-sync__btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dash-cal-sync__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.dash-cal-sync__btn:hover { background: rgba(200,184,122,.12); color: var(--accent-1); border-color: rgba(200,184,122,.3); }

/* Calendar URL copy panel */
.dash-cal-sync-detail {
  margin-top: 10px;
  padding: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  animation: fdIn .15s ease;
}
.dash-cal-sync-detail__label { font-size: 12px; color: var(--clr-text-muted); margin-bottom: 8px; }
.dash-cal-sync-detail__url-row { display: flex; gap: 8px; align-items: center; }
.dash-cal-sync-detail__url {
  flex: 1;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #94a3b8;
  font-family: monospace;
  min-width: 0;
}
.dash-cal-sync-detail__hint { font-size: 11px; color: var(--clr-text-muted); margin-top: 6px; }
.dash-cal-sync-detail__close {
  margin-top: 10px;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  cursor: pointer;
}

/* ── Activity filter tabs ────────────────────────────────────────────────── */
.dash-filter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dash-filter-tab {
  padding: 5px 12px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dash-filter-tab:hover { background: rgba(255,255,255,.06); color: var(--clr-text); }
.dash-filter-tab.active {
  background: rgba(200,184,122,.12);
  color: var(--accent-1);
  border-color: rgba(200,184,122,.28);
}

/* ── Activity table enhancements ─────────────────────────────────────────── */
.dash-table__date  { white-space: nowrap; }
.dash-table__actions { white-space: nowrap; }
.dash-table .dash-action-btn { padding: 3px 8px; font-size: 10px; }

/* Small note below table */
.dash-table-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--clr-text-muted);
  text-align: center;
}

/* ── Pricing ROI trust bar ───────────────────────────────────────────────── */
.pricing__roi-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(200,184,122,.06);
  border: 1px solid rgba(200,184,122,.16);
  border-radius: 14px;
  padding: 18px 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 0;
}
.pricing__roi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 28px;
}
.pricing__roi-num   { font-size: 28px; font-weight: 700; color: var(--accent-1); line-height: 1; font-family: var(--font-display); }
.pricing__roi-label { font-size: 12px; color: var(--clr-text-muted); margin-top: 4px; max-width: 140px; }
.pricing__roi-div   { width: 1px; height: 40px; background: rgba(200,184,122,.18); flex-shrink: 0; }

@media (max-width: 640px) {
  .pricing__roi-bar     { flex-direction: column; gap: 12px; padding: 18px 16px; }
  .pricing__roi-div     { width: 60px; height: 1px; }
  .dash-today__item     { flex-wrap: wrap; gap: 8px; }
  .dash-cal-sync        { flex-direction: column; align-items: flex-start; }
  /* filter tabs: hide scrollbar, allow finger-swipe */
  .dash-filter-tabs     { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dash-filter-tabs::-webkit-scrollbar { display: none; }
  /* appointment table: scroll horizontally instead of breaking layout */
  .dash-table           { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUILT TO GROW SECTION
   ═══════════════════════════════════════════════════════════════════════ */

.grow__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.grow__card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,184,122,0.12);
  border-radius: 14px;
  padding: 32px 28px;
  transition: border-color 0.3s, transform 0.3s;
}
.grow__card:hover {
  border-color: rgba(200,184,122,0.3);
  transform: translateY(-2px);
}
.grow__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200,184,122,0.1);
  border-radius: 12px;
  margin-bottom: 18px;
  color: var(--accent-1);
}
.grow__card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary, #fff);
}
.grow__card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .grow__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Roadmap upsell highlight ── */
.roadmap__item--highlight {
  border-color: rgba(200,184,122,0.4) !important;
  background: rgba(200,184,122,0.04);
  position: relative;
}
.roadmap__upsell-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-1);
  background: rgba(200,184,122,0.15);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANALYTICS TAB
   ═══════════════════════════════════════════════════════════════════════ */

.an-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.an-stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 22px 20px;
  text-align: center;
}
.an-stat-card--accent {
  border-color: rgba(200,184,122,0.25);
  background: rgba(200,184,122,0.04);
}
.an-stat-card__value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.an-stat-card--accent .an-stat-card__value { color: var(--accent-1); }
.an-stat-card__label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}
.an-stat-card__sub {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  margin-top: 2px;
}

.an-chart-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 28px;
}
.an-chart-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.an-chart-wrap {
  margin-top: 16px;
  overflow: hidden;
}
.an-chart-wrap canvas {
  display: block;
  width: 100%;
}

.an-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.an-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.an-two-col .an-panel { margin-bottom: 0; }

/* Bar charts (horizontal) */
.an-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.an-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.an-bar-row__label {
  font-size: 12px;
  color: var(--text-muted);
  width: 48px;
  text-align: right;
  flex-shrink: 0;
}
.an-bar-row__track {
  flex: 1;
  height: 22px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  overflow: hidden;
}
.an-bar-row__fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(200,184,122,0.6), rgba(200,184,122,0.3));
  border-radius: 6px;
  transition: width 0.6s ease;
  min-width: 2px;
}
.an-bar-row__fill--day {
  background: linear-gradient(90deg, rgba(120,160,212,0.6), rgba(120,160,212,0.3));
}
.an-bar-row__count {
  font-size: 12px;
  color: var(--text-muted);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* Status breakdown bars */
.an-status-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.an-status-row__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.an-status-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.an-status-row__label {
  font-size: 13px;
  color: #ddd;
  flex: 1;
}
.an-status-row__pct {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.an-status-row__count {
  font-size: 12px;
  color: var(--text-muted);
  width: 32px;
  text-align: right;
}
.an-status-row__track {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.an-status-row__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* Top services */
.an-services-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.an-service-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.an-service-row__rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-1);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.an-service-row__name {
  font-size: 13px;
  color: #ddd;
  width: 180px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.an-service-row__bar {
  flex: 1;
  height: 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  overflow: hidden;
}
.an-service-row__fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(200,184,122,0.5), rgba(200,184,122,0.2));
  border-radius: 5px;
  transition: width 0.6s ease;
  min-width: 2px;
}
.an-service-row__count {
  font-size: 12px;
  color: var(--text-muted);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .an-stats { grid-template-columns: repeat(2, 1fr); }
  .an-two-col { grid-template-columns: 1fr; }
  .an-service-row__name { width: 120px; }
}
@media (max-width: 480px) {
  .an-stats { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BILLING TAB
   ═══════════════════════════════════════════════════════════════════════ */

.bl-plan-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,184,122,0.2);
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 28px;
}
.bl-plan-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.bl-plan-card__label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.bl-plan-card__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-1);
}
.bl-plan-card__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}
.bl-plan-card__badge--active {
  background: rgba(107,203,119,0.15);
  color: #6BCB77;
}
.bl-plan-card__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.bl-plan-detail {
  text-align: center;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
}
.bl-plan-detail__label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.bl-plan-detail__value {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.bl-plan-detail__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.bl-minutes-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 6px;
}

.bl-minutes-bar__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--green);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.bl-invoice-row {
  display: grid;
  grid-template-columns: 100px 120px 80px 80px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.bl-invoice-row:last-child {
  border-bottom: none;
}

.bl-usage {
  margin-bottom: 28px;
}
.bl-usage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.bl-usage-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
}
.bl-usage-card__icon {
  color: var(--accent-1);
  margin-bottom: 10px;
}
.bl-usage-card__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.bl-usage-card__label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}
.bl-usage-note {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin-top: 16px;
  font-style: italic;
}

.bl-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.bl-statement {
  border-color: rgba(200,184,122,0.18);
}
.bl-statement__period {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.bl-estimate-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.bl-estimate-status--within-included,
.bl-estimate-status--no-minute-cap {
  background: rgba(107,203,119,0.14);
  color: #6BCB77;
}
.bl-estimate-status--overage-accruing {
  background: rgba(255,193,7,0.16);
  color: #F2C94C;
}
.bl-estimate-status--missing-rate {
  background: rgba(255,107,107,0.16);
  color: #FF8A8A;
}
.bl-estimate-status--internal-account {
  background: rgba(147,197,253,0.14);
  color: #93C5FD;
}
.bl-statement-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.bl-statement-metric {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}
.bl-statement-metric__label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.bl-statement-metric__value {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.bl-line-items {
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.bl-line-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-size: 13px;
}
.bl-line-item span,
.bl-line-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.bl-line-item strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bl-line-item--total {
  color: var(--text-body);
  font-weight: 700;
}
.bl-line-item--total strong {
  color: var(--accent-1);
}
.bl-statement-note {
  margin-top: 14px;
  color: rgba(255,255,255,0.46);
  font-size: 12px;
  line-height: 1.5;
}
.bl-payment-placeholder {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.08);
  margin-top: 12px;
  color: var(--text-muted);
}
.bl-payment-placeholder svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.bl-payment-placeholder__title {
  font-size: 14px;
  font-weight: 600;
  color: #ddd;
  margin-bottom: 4px;
}
.bl-payment-placeholder__sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.bl-invoices-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 12px;
}

/* ── API usage breakdown ─────────────────────────────────────────────────── */
.bl-usage-period {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.bl-api-usage-grid {
  margin-top: 12px;
}
.bl-api-usage-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text-muted);
}
.bl-api-usage-row--header {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bl-api-usage-row span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bl-api-usage-row__service {
  text-transform: capitalize;
  color: var(--text-body);
}

/* ── BYOK settings section ───────────────────────────────────────────────── */
.byok-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.byok-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 20px;
}
.byok-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.byok-card__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-body);
}
.byok-card__status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: var(--text-muted);
}
.byok-card__status--connected {
  background: rgba(52,211,153,.12);
  color: #34d399;
}
.byok-card__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.byok-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.byok-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(0,0,0,.2);
  color: var(--text-body);
  font-family: inherit;
  transition: border-color .2s;
}
.byok-input:focus {
  outline: none;
  border-color: var(--accent-1);
}

@media (max-width: 900px) {
  .bl-plan-card__details { grid-template-columns: 1fr; }
  .bl-statement-summary { grid-template-columns: 1fr; }
  .bl-usage-grid { grid-template-columns: repeat(2, 1fr); }
  .byok-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .bl-usage-grid { grid-template-columns: 1fr; }
  .bl-line-item { grid-template-columns: 1fr; gap: 4px; }
  .bl-line-item strong { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM VISUAL EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Cursor Glow — ambient light following mouse ──────────────────── */
.cursor-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,184,122,0.07) 0%, rgba(200,184,122,0.03) 30%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s;
  will-change: left, top;
  opacity: 0;
}
.cursor-glow--visible { opacity: 1; }
@media (max-width: 768px) {
  .cursor-glow { display: none; }
}

/* ── 2. Scroll Progress Bar ──────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent-grad);
  z-index: 9999;
  transition: width 0.05s linear;
  box-shadow: 0 0 12px rgba(200,184,122,0.5), 0 0 30px rgba(200,184,122,0.2);
}

/* ── 3. Card Internal Spotlight Hover ─────────────────────────────────── */
.js-spotlight {
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-opacity: 0;
  position: relative;
  overflow: hidden;
}
.js-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    350px circle at var(--spot-x) var(--spot-y),
    rgba(200,184,122,0.10) 0%,
    rgba(200,184,122,0.04) 40%,
    transparent 70%
  );
  opacity: var(--spot-opacity);
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}
.js-spotlight:hover::before { opacity: 1; }
.js-spotlight > * { position: relative; z-index: 2; }

/* ── 4. Animated Gradient Border (conic rotation) ─────────────────────── */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateBorder { to { --border-angle: 360deg; } }

.feature__card,
.roadmap__item,
.testimonial__card,
.hiw__step,
.industry__card {
  --border-glow: rgba(200,184,122,0);
  border: 1px solid var(--border);
  transition: border-color 0.4s, transform 0.4s var(--ease-out), box-shadow 0.4s;
}

/* Animated border on hover — uses a pseudo with conic gradient */
.feature__card:hover,
.roadmap__item:hover,
.testimonial__card:hover,
.hiw__step:hover {
  border-color: transparent;
  animation: rotateBorder 3s linear infinite;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    conic-gradient(from var(--border-angle), rgba(200,184,122,0.05), rgba(200,184,122,0.45), rgba(228,213,164,0.6), rgba(200,184,122,0.45), rgba(200,184,122,0.05)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 28px rgba(200,184,122,0.10), 0 12px 40px rgba(0,0,0,0.5);
}

/* ── 5. Animated Hero Gradient Text ───────────────────────────────────── */
@property --grad-pos {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@keyframes shiftGradient {
  0%   { --grad-pos: 0%; }
  50%  { --grad-pos: 100%; }
  100% { --grad-pos: 0%; }
}
.gradient-text {
  color: var(--accent-1);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

/* ── 6. Section Gradient Dividers ─────────────────────────────────────── */
.section + .section::before,
.stats-band + .section::before,
.trust-strip + .section::before {
  content: '';
  display: block;
  max-width: 600px;
  height: 1px;
  margin: 0 auto 0;
  background: linear-gradient(90deg, transparent, rgba(200,184,122,0.25), transparent);
}

/* ── 7. Floating Ambient Particles ────────────────────────────────────── */
.ambient-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(200,184,122,0.25);
  filter: blur(1px);
  animation: floatParticle var(--fp-dur) ease-in-out infinite;
  animation-delay: var(--fp-delay);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes floatParticle {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  15%  { opacity: var(--fp-alpha); }
  50%  { transform: translate(var(--fp-dx), var(--fp-dy)) scale(1.3); opacity: var(--fp-alpha); }
  85%  { opacity: var(--fp-alpha); }
  100% { transform: translate(calc(var(--fp-dx) * -0.5), calc(var(--fp-dy) * 2)) scale(0.8); opacity: 0; }
}
@media (max-width: 768px) {
  .ambient-particles { display: none; }
}

/* ── 8. Enhanced Card Hover — Lift + Glow ─────────────────────────────── */
.feature__card:hover { transform: translateY(-8px); }
.hiw__step:hover { transform: translateY(-6px); }
.industry__card:hover { transform: translateY(-4px) !important; }
.roadmap__item:hover { transform: translateY(-4px); }
.testimonial__card:hover { transform: translateY(-6px); }

/* ── 9. Enhanced Hero Title — Larger, More Dramatic ───────────────────── */
.hero__title {
  font-size: clamp(52px, 7.5vw, 96px) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.0 !important;
}

/* ── 10. Stats Band — Glass effect ────────────────────────────────────── */
.stats-band {
  background: rgba(200,184,122,0.02) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(200,184,122,0.08);
  border-bottom: 1px solid rgba(200,184,122,0.08);
}
.stats-band__num {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 11. Video Demo Frame — Premium glow ──────────────────────────────── */
.video-demo__frame {
  box-shadow:
    0 0 0 1px rgba(200,184,122,0.15),
    0 4px 60px rgba(200,184,122,0.08),
    0 20px 80px rgba(0,0,0,0.6);
}
.video-demo__play-btn {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
}
.video-demo__frame:hover .video-demo__play-btn {
  transform: scale(1.12);
  box-shadow: 0 0 50px rgba(200,184,122,0.35);
}

/* ── 12. Pricing Teaser — Shimmer border ──────────────────────────────── */
.pricing__teaser-card {
  animation: rotateBorder 4s linear infinite;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    conic-gradient(from var(--border-angle), rgba(200,184,122,0.08), rgba(200,184,122,0.35), rgba(228,213,164,0.5), rgba(200,184,122,0.35), rgba(200,184,122,0.08)) border-box !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 0 60px rgba(200,184,122,0.08), 0 20px 80px rgba(0,0,0,0.5) !important;
}

/* ── 13. ROI Result Card Glow ─────────────────────────────────────────── */
.roi__result-card--primary {
  animation: rotateBorder 5s linear infinite;
  background:
    linear-gradient(var(--bg-card-2), var(--bg-card-2)) padding-box,
    conic-gradient(from var(--border-angle), rgba(200,184,122,0.05), rgba(200,184,122,0.30), rgba(228,213,164,0.4), rgba(200,184,122,0.30), rgba(200,184,122,0.05)) border-box;
  border: 1.5px solid transparent;
}

/* ── 14. CTA Banner — Enhanced glow backdrop ──────────────────────────── */
.cta-banner__inner {
  box-shadow: 0 0 100px rgba(200,184,122,0.08), 0 0 200px rgba(200,184,122,0.04);
}

/* ── 16. Magnetic Button Styles ───────────────────────────────────────── */
.btn--primary {
  transition: all 0.3s var(--ease-out), transform 0.15s ease-out;
}
.btn--primary:hover {
  box-shadow:
    0 4px 20px rgba(200,184,122,0.35),
    0 8px 40px rgba(200,184,122,0.20),
    0 0 80px rgba(200,184,122,0.12);
}

/* ── 17. Marquee — Gradient fade edges ────────────────────────────────── */
.marquee-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

/* ── 18. FAQ — Enhanced interaction ───────────────────────────────────── */
.faq__item {
  transition: border-color 0.3s, background 0.3s;
}
.faq__item:hover {
  border-color: rgba(200,184,122,0.25);
  background: rgba(200,184,122,0.02);
}
.faq__item.open {
  border-color: rgba(200,184,122,0.20);
  background: rgba(200,184,122,0.03);
}

/* ── 19. Smooth section entrance — blur reveal helper ─────────────────── */
.gsap-blur-reveal {
  filter: blur(8px);
  opacity: 0;
}

/* ── 20. Text Shimmer — Apple-style light sweep on gradient text ──────── */
@property --shimmer-x {
  syntax: '<percentage>';
  initial-value: -100%;
  inherits: false;
}
@keyframes textShimmer {
  0%   { --shimmer-x: -100%; }
  100% { --shimmer-x: 200%; }
}
.hero__line .gradient-text {
  position: relative;
}
.hero__line .gradient-text::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(253,248,236,0.25) 45%,
    rgba(253,248,236,0.45) 50%,
    rgba(253,248,236,0.25) 55%,
    transparent 80%
  );
  background-size: 200% 100%;
  background-position: var(--shimmer-x) 0;
  animation: textShimmer 4s ease-in-out infinite;
  animation-delay: 2s;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ── 21. (Removed — parallax replaced by scroll-snap) ────────────────── */

/* ── 22. Scroll-scrub reveal helper ───────────────────────────────────── */
.scrub-reveal {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.scrub-reveal.revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── 23. Footer stagger reveal ────────────────────────────────────────── */
.footer__brand,
.footer__col {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.footer__brand.revealed,
.footer__col.revealed {
  opacity: 1;
  transform: none;
}

/* ── 24. Section eyebrow — slide-in line accent ───────────────────────── */
.section__eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 0;
  transition: padding-left 0.5s var(--ease-out);
}
.section__eyebrow::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 50%;
  width: 0;
  height: 1.5px;
  background: var(--accent-grad);
  transform: translateY(-50%);
  transition: width 0.6s var(--ease-out);
  border-radius: 1px;
}
.section__eyebrow.eyebrow-visible {
  padding-left: 28px;
}
.section__eyebrow.eyebrow-visible::before {
  width: 20px;
}

/* ── 25. Pricing tier card hover glow trail ───────────────────────────── */
.pricing__tier-card {
  --glow-x: 50%;
  --glow-y: 50%;
}
.pricing__tier-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--glow-x) var(--glow-y),
    rgba(200,184,122,0.08) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.pricing__tier-card:hover::after { opacity: 1; }

/* ── 26. Smooth nav link transition for active state ──────────────────── */
.nav__links a {
  transition: color 0.3s var(--ease-out);
}

/* ── Reduce motion: disable all premium effects ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cursor-glow,
  .ambient-particles,
  .scroll-progress { display: none !important; }
  .gradient-text { animation: none; }
  .hero__line .gradient-text::after { animation: none; display: none; }
  .pricing__teaser-card,
  .roi__result-card--primary { animation: none; }
  .feature__card:hover,
  .roadmap__item:hover,
  .testimonial__card:hover,
  .hiw__step:hover { animation: none; }
  .js-spotlight::before { display: none; }
  .footer__brand,
  .footer__col { opacity: 1; transform: none; }
  .section__eyebrow { padding-left: 28px; }
  .section__eyebrow::before { width: 20px; }
  /* (scroll-snap removed globally) */
}

/* ═══════════════════════════════════════════════════════════════════════════
   100K AGENCY REDESIGN — SECTION UPGRADES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stats Band: Giant Count-Up Numbers ───────────────────────────────────── */
.stats-band__num {
  font-family: var(--font-display);
  font-size: clamp(56px, 10vw, 100px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 10px;
}
.stats-band__item {
  text-align: center;
  padding: 40px 32px;
}
.stats-band__label {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 200px;
  display: block;
  margin: 0 auto;
}
.stats-band {
  padding: 80px 0;
}

/* ── How It Works: Pinned Scroll ─────────────────────────────────────────── */
.hiw__pin-outer {
  min-height: 300vh;
  position: relative;
}

.hiw__pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hiw__panels {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 32px;
  min-height: 360px;
}

.hiw__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 32px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  pointer-events: none;
}

.hiw__panel--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hiw__panel-num {
  font-family: var(--font-display);
  font-size: clamp(80px, 16vw, 160px);
  font-weight: 600;
  line-height: 1;
  color: var(--accent-1);
  opacity: 0.12;
  position: absolute;
  top: -20px;
  left: 20px;
  pointer-events: none;
  user-select: none;
}

.hiw__panel-body {
  position: relative;
  z-index: 1;
  padding-top: 80px;
}

.hiw__panel-body h3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hiw__panel-body p {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 32px;
}

.hiw__progress {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.hiw__prog-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200, 184, 122, 0.25);
  transition: background 0.4s, transform 0.4s;
}

.hiw__prog-dot--active {
  background: var(--accent-1);
  transform: scale(1.3);
}

/* Mobile: disable pinned scroll, show stacked steps */
@media (max-width: 768px) {
  .hiw__pin-outer { min-height: auto; }
  .hiw__pin-inner { position: static; height: auto; padding: 0 0 60px; }
  .hiw__panels { position: static; min-height: auto; padding: 0; }
  .hiw__panel { position: static; opacity: 1; transform: none; pointer-events: auto;
    margin-bottom: 48px; }
  .hiw__panel--active { opacity: 1; transform: none; }
  .hiw__panel-num { position: static; font-size: 48px; opacity: 0.15; display: block; margin-bottom: -20px; }
  .hiw__panel-body { padding-top: 0; }
  .hiw__progress { display: none; }
}

/* ── Roadmap: Vertical Timeline ──────────────────────────────────────────── */
.roadmap__timeline {
  position: relative;
  padding: 40px 0 60px;
  max-width: 880px;
  margin: 0 auto;
}

.roadmap__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--accent-1) 0%,
    rgba(120, 100, 180, 0.5) 50%,
    rgba(80, 80, 80, 0.2) 100%
  );
  transform: translateX(-50%);
}

.roadmap__timeline .roadmap__item {
  position: relative;
  width: 44%;
  margin-bottom: 48px;
  padding: 24px 28px;
}

.roadmap__timeline .roadmap__item--left {
  margin-right: auto;
  text-align: right;
  padding-right: 40px;
}

.roadmap__timeline .roadmap__item--right {
  margin-left: auto;
  text-align: left;
  padding-left: 40px;
}

/* Dot on the timeline line */
.roadmap__dot {
  position: absolute;
  top: 28px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 2;
}

.roadmap__item--left .roadmap__dot {
  right: -7px;
}

.roadmap__item--right .roadmap__dot {
  left: -7px;
}

.roadmap__dot--live {
  background: var(--accent-1);
  box-shadow: 0 0 16px rgba(200, 184, 122, 0.7);
}

.roadmap__dot--soon {
  background: rgba(140, 120, 220, 0.9);
  box-shadow: 0 0 16px rgba(140, 120, 220, 0.6);
}

.roadmap__dot--planned {
  background: rgba(100, 100, 100, 0.5);
}

.roadmap__timeline .roadmap__item h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.roadmap__timeline .roadmap__item p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Mobile roadmap: single column */
@media (max-width: 700px) {
  .roadmap__line { left: 16px; }
  .roadmap__timeline .roadmap__item { width: 100%; margin-left: 0 !important; margin-right: 0 !important;
    text-align: left !important; padding-left: 40px !important; padding-right: 16px !important; }
  .roadmap__item--left .roadmap__dot,
  .roadmap__item--right .roadmap__dot { left: -7px; right: auto; }
}

/* ── Testimonials: Infinite Marquee ──────────────────────────────────────── */
@keyframes marqueeLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.testimonials__marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  padding: 20px 0 40px;
}

.testimonials__track {
  display: flex;
  gap: 24px;
  width: max-content;
}

.testimonials__track--fwd {
  animation: marqueeLeft 35s linear infinite;
  margin-bottom: 24px;
}

.testimonials__track--rev {
  animation: marqueeRight 45s linear infinite;
}

.testimonials__track:hover {
  animation-play-state: paused;
}

.testimonials__track .testimonial__card {
  min-width: 360px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__track--fwd,
  .testimonials__track--rev { animation: none; }
}

/* ── Video Demo: Full-Bleed with Aura ────────────────────────────────────── */
.video-demo__player {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0 40px;
}

.video-demo__aura {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 184, 122, 0.2) 0%, rgba(200, 184, 122, 0.05) 50%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: auraPulse 4s ease-in-out infinite alternate;
  z-index: 0;
}

.video-demo__frame {
  position: relative;
  z-index: 1;
  width: min(90vw, 1100px);
  border: none !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

@keyframes auraPulse {
  from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.88); }
  to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* ── CTA Banner: Full Viewport Aurora ────────────────────────────────────── */
.cta-banner {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(200, 184, 122, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(168, 144, 90, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 50% 80%, rgba(200, 184, 122, 0.04) 0%, transparent 60%);
  animation: auroraShift 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes auroraShift {
  0%   { opacity: 0.6; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.05) translate(2%, -2%); }
  100% { opacity: 0.7; transform: scale(0.97) translate(-2%, 3%); }
}

.cta-banner__inner {
  position: relative;
  z-index: 1;
}

.cta-banner__inner h2 {
  font-size: clamp(44px, 7vw, 90px);
}

/* ── Section eyebrow utility ─────────────────────────────────────────────── */
.section__eyebrow {
  font-size: 11px;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  display: block;
  margin-bottom: 16px;
}

/* ── HIW section header spacing ─────────────────────────────────────────── */
.hiw .section__header {
  margin-bottom: 0;
  padding-bottom: 60px;
}

/* ── Roadmap upsell badge fix ────────────────────────────────────────────── */
.roadmap__upsell-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-1);
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM VISUAL OVERHAUL — $100K Agency-Grade Polish
   Apple Product Page × Linear.app × Stripe
   Appended 2026-03-21 — DO NOT modify styles above this line
   ════════════════════════════════════════════════════════════════════════════ */


/* ── 1. HIW Panels — Premium Glass Card Treatment ──────────────────────── */

/* Override: make HIW panels look like premium glass cards */
.hiw__panel-body {
  background: rgba(9,9,15,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(200,184,122,0.12);
  border-radius: 20px;
  padding: 48px 40px !important;
  position: relative;
  overflow: hidden;
}

/* Top accent line on active panel */
.hiw__panel--active .hiw__panel-body::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-1), transparent);
}

/* Step icon circle — positioned top-right of the card */
.hiw__panel-icon {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(200,184,122,0.18), rgba(200,184,122,0.06));
  border: 1px solid rgba(200,184,122,0.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-1);
  box-shadow: 0 0 20px rgba(200,184,122,0.12);
  transition: box-shadow 0.4s, border-color 0.4s, background 0.4s;
}
.hiw__panel--active .hiw__panel-icon {
  background: linear-gradient(135deg, rgba(200,184,122,0.25), rgba(200,184,122,0.10));
  border-color: rgba(200,184,122,0.45);
  box-shadow: 0 0 32px rgba(200,184,122,0.22);
}

/* Make step numbers glow more dramatically */
.hiw__panel-num {
  text-shadow: 0 0 120px rgba(200,184,122,0.5), 0 0 60px rgba(200,184,122,0.2);
}

/* Glowing left accent bar on active panel */
.hiw__panel--active .hiw__panel-body::after {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 2px;
  background: var(--accent-grad);
  box-shadow: 0 0 16px rgba(200,184,122,0.5);
}

/* Ambient glow behind active panel */
.hiw__pin-inner::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200,184,122,0.06) 0%, transparent 70%);
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Progress bar instead of dots */
.hiw__progress-bar {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 3px;
  background: rgba(200,184,122,0.15);
  border-radius: 2px;
  overflow: hidden;
  z-index: 10;
}

.hiw__progress-fill {
  height: 100%;
  background: var(--accent-1);
  border-radius: 2px;
  transition: width 0.4s var(--ease-out);
  box-shadow: 0 0 12px rgba(200,184,122,0.5);
}


/* ── 2. Glass Morphism Card System — upgrade ALL card types ────────────── */

/* Universal glass card upgrade */
.feature__card,
.testimonial__card,
.industry__card,
.roadmap__timeline .roadmap__item,
.pricing__teaser-card,
.roi__result-card {
  background: rgba(9,9,15,0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,184,122,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(200,184,122,0.06);
  transition: all 0.5s cubic-bezier(0.22,1,0.36,1);
}

/* Dramatic hover lift with glow */
.feature__card:hover,
.testimonial__card:hover,
.industry__card:hover,
.roadmap__timeline .roadmap__item:hover,
.pricing__teaser-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(200,184,122,0.25) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(200,184,122,0.08), inset 0 1px 0 rgba(200,184,122,0.12) !important;
}


/* ── 3. Founder/Testimonial Cards — Premium Treatment ──────────────────── */

.testimonial__card--founder {
  background: linear-gradient(135deg, rgba(9,9,15,0.8), rgba(200,184,122,0.04)) !important;
  border: 1px solid rgba(200,184,122,0.15) !important;
  padding: 36px 32px !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer accent on top */
.testimonial__card--founder::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-1), var(--accent-2), transparent);
  background-size: 200% 100%;
  animation: shimmerLine 3s ease-in-out infinite;
  opacity: 1;
  font-size: 0 !important;
  line-height: 0 !important;
}

@keyframes shimmerLine {
  0%, 100% { opacity: 0.4; background-position: -200% 0; }
  50% { opacity: 1; background-position: 200% 0; }
}

.testimonial__card--founder::after {
  content: '';
  position: absolute;
  top: -50%; right: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at top right, rgba(200,184,122,0.06), transparent 60%);
  pointer-events: none;
}

.founder-badge {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2)) !important;
  color: #05070d !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
  border: none !important;
}

.testimonial__card--founder h3 {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}

.testimonial__metric {
  font-size: 12px !important;
  color: var(--accent-1) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(200,184,122,0.1) !important;
}


/* ── 4. Industries — Horizontal Scroll ─────────────────────────────────── */

.industries__grid {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 20px 0 40px;
  cursor: default;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.industries__grid::-webkit-scrollbar { display: none; }

.industry__card { cursor: grab; }
.industries__grid:active .industry__card { cursor: grabbing; }

.industry__card {
  min-width: 260px !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start;
  padding: 32px 28px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.industry__card span:first-child {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.industry__stat {
  font-size: 13px;
  color: var(--accent-1);
  opacity: 0.8;
}

/* CTA card at end */
.industry__card--cta {
  background: linear-gradient(135deg, rgba(200,184,122,0.1), rgba(200,184,122,0.03)) !important;
  border: 1px dashed rgba(200,184,122,0.3) !important;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  min-width: 260px;
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
}


/* ── 5. Feature Cards — Bento Grid Visual Weight ───────────────────────── */

.feature__card {
  padding: 36px 32px !important;
  border-radius: 18px !important;
  position: relative;
  overflow: hidden;
}

.feature__card::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40% !important; right: -30% !important;
  width: 180% !important; height: 120% !important;
  background: radial-gradient(ellipse at bottom right, rgba(200,184,122,0.04), transparent 60%) !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

.feature__card--wide {
  background: linear-gradient(135deg, rgba(9,9,15,0.7), rgba(200,184,122,0.03)) !important;
}

.feature__icon-wrap {
  width: 48px !important; height: 48px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(200,184,122,0.12), rgba(200,184,122,0.04)) !important;
  border: 1px solid rgba(200,184,122,0.15) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: 20px !important;
  color: var(--accent-1) !important;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
}

.feature__card:hover .feature__icon-wrap {
  transform: scale(1.1) rotate(-5deg) !important;
  box-shadow: 0 0 20px rgba(200,184,122,0.15) !important;
}


/* ── 6. Problem/Solution Cards Enhancement ─────────────────────────────── */

.problem__col {
  background: rgba(9,9,15,0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px !important;
  padding: 40px 36px !important;
  border: 1px solid rgba(200,184,122,0.08);
  position: relative;
  overflow: hidden;
}

.problem__col--bad {
  border-color: rgba(224,94,106,0.15) !important;
}

.problem__col--bad::before {
  content: '';
  position: absolute;
  top: -30%; left: -30%;
  width: 160%; height: 100%;
  background: radial-gradient(ellipse, rgba(224,94,106,0.04), transparent 60%);
  pointer-events: none;
}

.problem__col--good {
  border-color: rgba(94,202,138,0.15) !important;
}

.problem__col--good::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 160%; height: 100%;
  background: radial-gradient(ellipse, rgba(94,202,138,0.04), transparent 60%);
  pointer-events: none;
}

.col__tag {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 8px 20px !important;
  border-radius: 24px !important;
  display: inline-block !important;
  margin-bottom: 24px !important;
}

.col__tag--red {
  background: rgba(224,94,106,0.12) !important;
  color: #e05e6a !important;
  border: 1px solid rgba(224,94,106,0.2);
}

.col__tag--green {
  background: rgba(94,202,138,0.12) !important;
  color: #5eca8a !important;
  border: 1px solid rgba(94,202,138,0.2);
}

.problem__list li {
  position: relative;
  padding-left: 28px;
}

.problem__col--bad .problem__list li::before {
  content: '\2715' !important;
  position: absolute !important;
  left: 0 !important;
  color: rgba(224,94,106,0.7) !important;
  font-weight: 700 !important;
}

.problem__col--good .problem__list li::before {
  content: '\2713' !important;
  position: absolute !important;
  left: 0 !important;
  color: rgba(94,202,138,0.8) !important;
  font-weight: 700 !important;
}


/* ── 7. Pricing Teaser Premium ─────────────────────────────────────────── */

.pricing__teaser-card {
  border-radius: 24px !important;
  padding: 56px 48px !important;
  position: relative;
  overflow: hidden;
}

.pricing__teaser-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-grad);
}

.pricing__teaser-card::after {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(200,184,122,0.06), transparent 70%);
  pointer-events: none;
}

.pricing__teaser-icon svg {
  color: var(--accent-1) !important;
  filter: drop-shadow(0 0 20px rgba(200,184,122,0.3));
}

.pricing__teaser-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 600 !important;
}

.pricing__teaser-list li::before {
  content: '\2713';
  color: var(--accent-1);
  font-weight: 700;
  margin-right: 10px;
}

.pricing__enterprise-strip {
  background: rgba(9,9,15,0.6) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(200,184,122,0.1) !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  margin-top: 40px;
}


/* ── 8. ROI Calculator Visual Upgrade ──────────────────────────────────── */

.roi__grid {
  background: rgba(9,9,15,0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,184,122,0.1) !important;
  border-radius: 24px !important;
  padding: 48px 40px !important;
  overflow: hidden;
  position: relative;
}

.roi__grid::after {
  content: '';
  position: absolute;
  bottom: -30%; right: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200,184,122,0.05), transparent 70%);
  pointer-events: none;
}

.roi__result-card--primary {
  background: linear-gradient(135deg, rgba(200,184,122,0.08), rgba(200,184,122,0.02)) !important;
  border: 1px solid rgba(200,184,122,0.2) !important;
  border-radius: 16px !important;
}

.roi__result-num {
  font-family: var(--font-display) !important;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── 9. FAQ Premium Accordion ──────────────────────────────────────────── */

.faq__item {
  background: rgba(9,9,15,0.5) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(200,184,122,0.08) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.faq__item.open,
.faq__item:has(.faq__question[aria-expanded="true"]) {
  border-color: rgba(200,184,122,0.2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.faq__question {
  padding: 24px 28px !important;
  font-weight: 600 !important;
}

.faq__chevron {
  transition: transform 0.3s var(--ease-out);
}

.faq__question[aria-expanded="true"] .faq__chevron {
  transform: rotate(180deg);
}


/* ── 10. Animations — CSS utility classes for GSAP targets ─────────────── */

/* Black hole entrance — elements start invisible, GSAP animates them in */
.fly-in-left, .fly-in-right, .wormhole-in, .rise-in {
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* Subtle floating animation for idle cards */
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Pulsing glow on founder badge */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(200,184,122,0.2); }
  50% { box-shadow: 0 0 25px rgba(200,184,122,0.4), 0 0 50px rgba(200,184,122,0.1); }
}

.founder-badge {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Animated gradient border for pricing */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ── 11. Responsive overrides for premium styles ───────────────────────── */

@media (max-width: 768px) {
  .hiw__panel-body {
    padding: 32px 24px !important;
  }
  .hiw__progress-bar {
    bottom: 32px;
    width: 140px;
  }
  .problem__col {
    padding: 28px 24px !important;
  }
  .pricing__teaser-card {
    padding: 36px 24px !important;
  }
  .roi__grid {
    padding: 32px 24px !important;
  }
  .industries__grid {
    gap: 14px;
    padding: 16px 0 32px;
  }
  .industry__card {
    min-width: 220px !important;
    padding: 24px 20px !important;
  }
  .testimonial__card--founder {
    padding: 28px 24px !important;
  }
  .testimonial__card--founder h3 {
    font-size: 20px !important;
  }
}

@media (max-width: 480px) {
  .feature__card {
    padding: 28px 22px !important;
  }
  .industry__card {
    min-width: 200px !important;
  }
  .faq__question {
    padding: 20px 22px !important;
  }
}

/* ── Pricing Tiers ───────────────────────────────────────────────────────── */
.pricing__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto 48px;
}
@media (max-width: 860px) {
  .pricing__tiers { grid-template-columns: 1fr; max-width: 480px; }
}
.pricing__tier-card {
  background: rgba(9,9,15,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,184,122,0.1);
  border-radius: 20px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
}
.pricing__tier-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,184,122,0.2);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 32px rgba(200,184,122,0.06);
}
.pricing__tier-card--featured {
  border-color: rgba(200,184,122,0.25);
  background: linear-gradient(135deg, rgba(9,9,15,0.8), rgba(200,184,122,0.04));
}
.pricing__tier-card--featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-grad);
}
.pricing__tier-popular {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #05070d;
  padding: 5px 12px;
  border-radius: 20px;
}
.pricing__tier-badge {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.pricing__tier-sub {
  font-size: 13px;
  color: var(--accent-1);
  margin-bottom: 28px;
  font-weight: 500;
}
.pricing__tier-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.pricing__tier-list li {
  font-size: 14px;
  color: var(--text-muted);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.pricing__tier-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-1);
  font-weight: 700;
}

/* ── Polish fixes ────────────────────────────────────────────────────────── */

/* HIW: step numbers must sit in FRONT of the glass card */
.hiw__panel-num {
  z-index: 2 !important;
  pointer-events: none;
}

/* Remove decorative lines flanking the eyebrow labels — they look out of place */
.section__eyebrow::before,
.section__eyebrow::after {
  display: none !important;
}

/* ROI box: trim the excess space in the corners */
.roi__grid {
  padding: 36px 32px !important;
}
.roi__grid::after {
  display: none !important;
}
.roi__glow { display: none; }

/* Industries: show a thin custom scrollbar as hint */
.industries__grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,184,122,0.3) transparent;
}
.industries__grid::-webkit-scrollbar {
  height: 4px;
}
.industries__grid::-webkit-scrollbar-track {
  background: transparent;
}
.industries__grid::-webkit-scrollbar-thumb {
  background: rgba(200,184,122,0.3);
  border-radius: 2px;
}

/* Feature cards: uniform height for clean bento rectangle */
.features__bento {
  grid-auto-rows: 1fr;
}
.feature__card {
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI POLISH BATCH 3 — 2026-03-22
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Section eyebrow: block layout, zero flanking lines ─────────────── */
.section__eyebrow {
  display: block !important;
  text-align: center !important;
}
.section__eyebrow::before,
.section__eyebrow::after {
  display: none !important;
  content: none !important;
}

/* ── 2. Section titles: prevent vertical text clipping ─────────────────── */
.section__title {
  line-height: 1.14 !important;
  overflow: visible !important;
  padding-bottom: 2px;
}
.hero__title {
  line-height: 1.06 !important;
  overflow: visible !important;
  padding-bottom: 4px;
}

/* ── 3. Buttons: default padding when no size modifier is present ───────── */
/* Applies to any .btn that has neither --sm, --lg nor --xl */
.btn:not([class*="btn--sm"]):not([class*="btn--lg"]):not([class*="btn--xl"]) {
  padding: 13px 26px;
  font-size: 15px;
  line-height: 1.4;
}
/* Ghost/outline borders: ensure they don't compress text */
.btn--ghost,
.btn--outline {
  line-height: 1.4;
}

/* ── 4. HIW section header: comfortable spacing for timeline ────────────── */
.hiw .section__header {
  margin-bottom: 64px !important;
}

/* ── 6. Pricing tier badges: styled as pill/tag ─────────────────────────── */
.pricing__tier-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent-1) !important;
  background: rgba(200,184,122,0.10) !important;
  border: 1px solid rgba(200,184,122,0.28) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  margin-bottom: 16px !important;
}
.pricing__tier-card--featured .pricing__tier-badge {
  background: rgba(200,184,122,0.18) !important;
  border-color: rgba(200,184,122,0.45) !important;
}

/* ── 7. Moon: stable bottom-right anchor — no media query jump ──────────── */
.hero__moon-bg {
  position: absolute !important;
  right: -80px !important;
  bottom: -120px !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
@media (max-width: 860px) {
  .hero__moon-bg {
    right: -40px !important;
    bottom: -80px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
  .moon-svg {
    width: 260px !important;
    opacity: 0.13 !important;
  }
}

/* ── 8. Roadmap status tags: more visible, consistent at card top ────────── */
.roadmap__timeline .roadmap__item .roadmap__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  padding: 4px 12px !important;
  margin-bottom: 10px !important;
}
.roadmap__status--soon {
  background: rgba(130,110,220,0.18) !important;
  color: #c0b0ff !important;
  border: 1px solid rgba(130,110,220,0.32) !important;
}
.roadmap__status--live {
  background: rgba(200,184,122,0.18) !important;
  color: var(--accent-1) !important;
  border: 1px solid rgba(200,184,122,0.32) !important;
}
.roadmap__status--planned {
  background: rgba(100,100,100,0.14) !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(100,100,100,0.22) !important;
}

/* ── 9. ROI Calculator: visual polish ──────────────────────────────────── */
.roi__grid {
  gap: 32px !important;
  align-items: start;
}
.roi__inputs {
  background: rgba(9,9,15,0.55);
  border: 1px solid rgba(200,184,122,0.1);
  border-radius: 18px;
  padding: 32px 28px !important;
}
.roi__field {
  margin-bottom: 28px;
}
.roi__field:last-child {
  margin-bottom: 0;
}
.roi__field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.roi__value {
  min-width: 64px;
  text-align: right;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-1);
  font-family: var(--font-display);
}
.roi__results {
  gap: 14px !important;
}
.roi__result-card {
  border-radius: 16px !important;
  padding: 24px 22px !important;
}
.roi__result-card--primary {
  padding: 32px 28px !important;
  border-color: rgba(200,184,122,0.28) !important;
}
.roi__result-label {
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 8px !important;
}
.roi__result-num {
  background: var(--accent-grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 52px !important;
}
.roi__result-num--sm {
  font-size: 30px !important;
}
.roi__result-num--green {
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #5eca8a, #3eb870) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.roi__result-note {
  font-size: 11px !important;
  margin-top: 6px !important;
  opacity: 0.7;
}

/* ── 10. HIW: replace pinned scroll with static 3-column grid ────────────── */

/* Kill the 300vh scroll space */
.hiw__pin-outer {
  min-height: auto !important;
}

/* Un-stick the inner wrapper */
.hiw__pin-inner {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
  padding: 0 !important;
}

/* Grid container */
.hiw__panels {
  position: static !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  padding: 0 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Each panel is always visible */
.hiw__panel {
  position: relative !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Progress bar / dots: not needed in static layout */
.hiw__progress-bar,
.hiw__progress { display: none !important; }

/* Number: stays inside the card, peeking from top-left */
.hiw__panel-num {
  position: absolute !important;
  top: 12px !important;
  left: 20px !important;
  z-index: 10 !important;
  font-size: clamp(72px, 10vw, 110px) !important;
  opacity: 0.13 !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

/* Panel body: glass card, full height, room at top for number */
.hiw__panel-body {
  background: rgba(9,9,15,0.72) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(200,184,122,0.13) !important;
  border-radius: 20px !important;
  padding: 96px 36px 40px !important;
  position: relative !important;
  z-index: 1 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

/* Gold top accent on every panel (not just active) */
.hiw__panel-body::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 20% !important; right: 20% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--accent-1), transparent) !important;
  display: block !important;
}

.hiw__panel-body h3 {
  margin-bottom: 14px !important;
}
.hiw__panel-body p {
  margin-bottom: 28px !important;
  flex: 1 !important;
}

/* Reduce section padding now that there's no 300vh gap */
.hiw.section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}
.hiw .section__header {
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
}

/* Mobile: single column */
@media (max-width: 860px) {
  .hiw__panels {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }
  .hiw__panel-num {
    font-size: 60px !important;
  }
  .hiw__panel-body {
    padding: 80px 28px 32px !important;
  }
}

/* ── 11. Founding client spots grid ─────────────────────────────────────── */
.founding__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1060px;
  margin: 0 auto 32px;
}
@media (max-width: 860px) {
  .founding__grid { grid-template-columns: 1fr; max-width: 480px; }
}

.founding__card {
  background: rgba(9,9,15,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(200,184,122,0.12);
  border-radius: 20px;
  padding: 36px 32px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s;
}
.founding__card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,184,122,0.28);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(200,184,122,0.07);
}
/* Top accent line */
.founding__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, rgba(200,184,122,0.35) 50%, transparent 90%);
}
.founding__card--featured {
  border-color: rgba(200,184,122,0.3);
  background: linear-gradient(160deg, rgba(12,10,20,0.9), rgba(200,184,122,0.04));
}
.founding__card--featured::before {
  background: var(--accent-grad);
  height: 2px;
  opacity: 0.8;
}

/* Large faint spot number watermark */
.founding__spot-num {
  position: absolute;
  top: 10px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-1);
  opacity: 0.06;
  user-select: none;
  pointer-events: none;
}

.founding__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.founding__icon {
  font-size: 28px;
  line-height: 1;
}
.founding__badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-1);
  background: rgba(200,184,122,0.1);
  border: 1px solid rgba(200,184,122,0.25);
  border-radius: 20px;
  padding: 4px 12px;
}

.founding__card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.founding__card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.founding__perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(200,184,122,0.08);
  padding-top: 14px;
}
.founding__perks li {
  font-size: 13px;
  color: var(--text-muted);
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
.founding__perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6l2.8 2.8L10.5 3' stroke='%23E8A063' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.founding__cta {
  margin-top: 4px;
}
.founding__card--featured .founding__cta {
  font-weight: 700;
}

.founding__note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
  opacity: 0.8;
}

/* ── Login Page ──────────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 40px) 24px 60px;
  position: relative;
  overflow: hidden;
}

/* Ambient floating orbs */
.login-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}
.login-orb--1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(200,184,122,0.07) 0%, transparent 70%);
  top: -80px; right: -120px;
  animation: loginOrbFloat 14s ease-in-out infinite;
}
.login-orb--2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(168,144,90,0.05) 0%, transparent 70%);
  bottom: -60px; left: -100px;
  animation: loginOrbFloat 18s ease-in-out infinite reverse;
}
@keyframes loginOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.04); }
}

.login-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Header: badge + title + subtitle */
.login-header {
  text-align: center;
  margin-bottom: 28px;
}

.login-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 10px;
}
.login-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Main login card */
.login-card {
  width: 100%;
  background: rgba(9,9,15,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(200,184,122,0.15);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,184,122,0.04);
  position: relative;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.login-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Shimmer top accent line */
.login-card__accent {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,184,122,0.5) 50%, transparent 100%);
  width: 100%;
}

.login-card__body {
  padding: 36px 36px 24px;
}

/* Placeholder while Clerk loads */
.login-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 0;
  min-height: 160px;
}
.login-placeholder p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.login-placeholder .spinner {
  width: 28px; height: 28px;
  border: 2px solid rgba(200,184,122,0.25);
  border-top-color: var(--accent-1);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Error state */
.login-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(224,94,106,0.08);
  border: 1px solid rgba(224,94,106,0.28);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #ff6b8a;
  font-size: 13.5px;
  line-height: 1.55;
}
.login-error svg { flex-shrink: 0; margin-top: 2px; }
.login-error a { color: var(--accent-1); text-decoration: underline; }

/* Card footer — security badge */
.login-card__footer {
  padding: 14px 36px 20px;
  border-top: 1px solid rgba(200,184,122,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-security-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.login-security-badge svg { opacity: 0.5; }

/* Below-card section */
.login-below {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.login-below__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--text-dim);
  font-size: 12px;
}
.login-below__divider::before,
.login-below__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(200,184,122,0.1);
}
.login-demo-btn {
  width: 100%;
}
.login-below__hint {
  font-size: 11.5px;
  color: var(--text-dim);
  margin: -2px 0 6px;
}
.login-below__help,
.login-below__support {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.login-below__help a,
.login-below__support a {
  color: var(--accent-1);
  transition: opacity 0.2s;
}
.login-below__help a:hover,
.login-below__support a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* Clerk component overrides */
#clerk-sign-in-mount {
  width: 100%;
  display: flex;
  justify-content: center;
}
#clerk-sign-in-mount .cl-rootBox {
  width: 100% !important;
  max-width: 100% !important;
}
#clerk-sign-in-mount .cl-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
}
#clerk-sign-in-mount .cl-footerAction {
  margin-top: 8px !important;
}
#clerk-sign-in-mount form {
  width: 100% !important;
}

/* Entry animation for header elements */
.login-header .login-title {
  opacity: 0;
  transform: translateY(10px);
  animation: loginHeaderIn 0.55s var(--ease-out) 0.2s forwards;
}
.login-header .login-subtitle {
  opacity: 0;
  transform: translateY(10px);
  animation: loginHeaderIn 0.55s var(--ease-out) 0.3s forwards;
}
@keyframes loginHeaderIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Below-card fade-in */
.login-below {
  opacity: 0;
  animation: loginHeaderIn 0.5s var(--ease-out) 0.5s forwards;
}

/* Responsive */
@media (max-width: 480px) {
  .login-card__body { padding: 28px 22px 18px; }
  .login-card__footer { padding: 12px 22px 16px; }
  .login-title { font-size: 36px; }
}

/* ── Onboarding overlay (dashboard) ─────────────────────── */
.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(5,5,10,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: obFadeIn 0.35s var(--ease-out) forwards;
}
@keyframes obFadeIn { from { opacity:0; } to { opacity:1; } }
.ob-card {
  width: 100%;
  max-width: 440px;
  background: rgba(9,9,15,0.95);
  border: 1px solid rgba(200,184,122,0.18);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 80px rgba(0,0,0,0.8);
  animation: obSlideIn 0.4s var(--ease-out) forwards;
}
@keyframes obSlideIn { from { opacity:0; transform:translateY(20px) scale(0.97); } to { opacity:1; transform:none; } }
.ob-card__accent {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,184,122,0.55) 50%, transparent 100%);
}
.ob-card__body { padding: 36px 36px 28px; }
.ob-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: 16px;
}
.ob-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-1);
  box-shadow: 0 0 6px var(--accent-1);
  animation: pulse 2s ease infinite;
}
.ob-title {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.ob-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.ob-field { margin-bottom: 18px; }
.ob-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 7px;
  letter-spacing: 0.03em;
}
.ob-field input {
  width: 100%;
  background: rgba(26,26,46,0.8);
  border: 1px solid rgba(200,184,122,0.2);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.ob-field input:focus { border-color: var(--accent-1); }
.ob-error {
  background: rgba(224,94,106,0.1);
  border: 1px solid rgba(224,94,106,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #ff6b8a;
  margin-bottom: 16px;
}
.ob-submit {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  font-size: 15px;
}
.ob-card__footer {
  padding: 12px 36px 18px;
  border-top: 1px solid rgba(200,184,122,0.06);
  display: flex;
  justify-content: center;
}
.ob-security {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
}

/* ── Legal/Disclaimer micro-copy ────────────────────────── */
.legal-footnote {
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 16px;
  padding: 0 24px;
}
.roi__disclaimer {
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 12px;
  padding: 0 16px;
  line-height: 1.6;
}
.cancel-note {
  font-size: 11px;
  color: var(--text-dim);
  display: block;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — Clean Horizontal Flow
   ═══════════════════════════════════════════════════════════════════════════ */
.hiw__flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.hiw__stage {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: left;
  transition: border-color 0.2s;
}

.hiw__stage:hover {
  border-color: rgba(200,184,122,0.25);
}

.hiw__stage--last {
  grid-column: 1 / -1;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.hiw__num {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  flex-shrink: 0;
  width: 52px;
  letter-spacing: -0.03em;
  margin-top: 2px;
}

.hiw__stage-body {
  flex: 1;
}

.hiw__stage-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.hiw__stage-desc {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.hiw__divider { display: none; }

@media (max-width: 640px) {
  .hiw__flow {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .hiw__stage--last {
    grid-column: unset;
    max-width: unset;
  }

  .hiw__num {
    font-size: 34px;
    width: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROI CALCULATOR — Compact
   ═══════════════════════════════════════════════════════════════════════════ */
.roi-compact__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid rgba(200,184,122,0.08);
  border-radius: 16px;
  padding: 40px;
}

.roi-compact__sliders {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.roi-compact__field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.roi-compact__field label {
  font-size: 14px;
  color: var(--text-muted);
  min-width: 80px;
  flex-shrink: 0;
}

.roi-compact__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(200,184,122,0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.roi-compact__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-1);
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px rgba(200,184,122,0.3);
  cursor: pointer;
}

.roi-compact__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-1);
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px rgba(200,184,122,0.3);
  cursor: pointer;
}

.roi-compact__val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-1);
  min-width: 48px;
  text-align: right;
}

.roi-compact__result {
  text-align: center;
}

.roi-compact__result-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.roi-compact__result-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  color: var(--accent-1);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 24px;
}

.roi-compact__disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .roi-compact__body {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px 20px;
  }

  .roi-compact__field label {
    min-width: 70px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING — Tier Price Display
   ═══════════════════════════════════════════════════════════════════════════ */
.pricing__tier-price {
  margin: 24px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(200,184,122,0.08);
  border-bottom: 1px solid rgba(200,184,122,0.08);
  text-align: center;
}

.pricing__tier-setup {
  margin-bottom: 16px;
}

.pricing__price-old {
  font-size: 15px;
  color: var(--text-dim);
  text-decoration: line-through;
  margin-right: 10px;
}

.pricing__price-now {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-1);
  letter-spacing: -0.02em;
}

.pricing__price-label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pricing__tier-monthly {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}

.pricing__price-amount {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
}

.pricing__tier-monthly--quote {
  justify-content: flex-start;
}
.pricing__price-amount--quote {
  font-size: 28px;
  letter-spacing: 0;
  color: var(--accent-1);
}

/* ── Single Quote Card ────────────────────────────────────────────────── */
.pricing__quote-card {
  max-width: 640px;
  margin: 0 auto 40px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(200,184,122,0.18);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pricing__tier-pills {
  display: flex;
  gap: 0;
  padding: 6px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(200,184,122,0.08);
}
.pricing__tier-pill {
  flex: 1;
  padding: 11px 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
  text-align: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pricing__tier-pill:hover:not(.pricing__tier-pill--active) {
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.pricing__tier-pill--active {
  color: var(--accent-1);
  background: rgba(200,184,122,0.1);
  border-color: rgba(200,184,122,0.22);
  transform: scale(1.02);
}
.pricing__quote-body {
  padding: 32px 36px 28px;
}
.pricing__quote-header {
  text-align: center;
  margin-bottom: 28px;
}
.pricing__quote-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.pricing__quote-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.pricing__quote-price {
  padding: 20px 0;
  border-top: 1px solid rgba(200,184,122,0.08);
  border-bottom: 1px solid rgba(200,184,122,0.08);
}
.pricing__quote-amount {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--accent-1);
  display: block;
  letter-spacing: -0.01em;
}
.pricing__quote-period {
  display: block;
  font-size: 11.5px;
  color: var(--accent-1);
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

/* Feature panels */
.pricing__feature-panels { min-height: 200px; }
.pricing__feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  animation: pqFadeIn 0.25s var(--ease-out);
}
.pricing__feature-list li {
  position: relative;
  padding: 9px 0 9px 24px;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  line-height: 1.5;
}
.pricing__feature-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--accent-1);
  font-weight: 700;
  font-size: 12px;
}
.pricing__feature-list li:last-child { border-bottom: none; }

@keyframes pqFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.pricing__quote-compare {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin: 0 0 20px;
  font-style: italic;
  opacity: 0.75;
}
.pricing__quote-cta {
  font-size: 15px;
  padding: 14px 24px;
}

@media (max-width: 600px) {
  .pricing__quote-body { padding: 24px 20px 20px; }
  .pricing__tier-pill { font-size: 12px; padding: 9px 4px; }
  .pricing__quote-amount { font-size: 28px; }
}

.pricing__price-per {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 400;
}

.pricing__founding-note {
  text-align: center;
  margin: 40px auto 48px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 620px;
  line-height: 1.7;
}

/* Billing note bar */
.pricing__billing-note {
  max-width: 780px;
  margin: 28px auto 28px;
  padding: 14px 24px;
  background: rgba(200,184,122,0.04);
  border: 1px solid rgba(200,184,122,0.18);
  border-radius: 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}
.pricing__billing-note strong {
  color: var(--accent-1);
  font-weight: 600;
}

/* ROI anchor strip */
.pricing__roi-strip {
  max-width: 880px;
  margin: 0 auto 32px;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(9,9,15,0.7);
  border: 1px solid rgba(200,184,122,0.15);
  border-radius: 16px;
  overflow: hidden;
}
.pricing__roi-stat {
  flex: 1;
  padding: 20px 24px;
  text-align: center;
  position: relative;
}
.pricing__roi-stat + .pricing__roi-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 16%; bottom: 16%;
  width: 1px;
  background: rgba(200,184,122,0.12);
}
.pricing__roi-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 4px;
}
.pricing__roi-label {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .pricing__roi-strip { flex-direction: column; }
  .pricing__roi-stat + .pricing__roi-stat::before {
    left: 16%; right: 16%; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
}

/* Comparison anchor line below setup fee */
.pricing__compare {
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: center;
  margin: 10px 0 16px;
  font-style: italic;
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING — WOW FACTOR OVERHAUL
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wider grid */
.pricing__tiers { max-width: 1060px !important; }

/* All-inclusive baseline strip */
.pricing__baseline {
  max-width: 920px;
  margin: 0 auto 40px;
  background: rgba(200,184,122,0.03);
  border: 1px solid rgba(200,184,122,0.1);
  border-radius: 14px;
  padding: 18px 28px;
  text-align: center;
}
.pricing__baseline-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.pricing__baseline-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
}
.pricing__baseline-items span {
  font-size: 13px;
  color: var(--text-muted);
  padding-left: 17px;
  position: relative;
}
.pricing__baseline-items span::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-1);
  font-weight: 700;
  font-size: 11px;
}

/* Monthly / Annual billing toggle */
.pricing__toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.pricing__toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(9,9,15,0.6);
  border: 1px solid rgba(200,184,122,0.15);
  border-radius: 40px;
  padding: 4px;
  gap: 2px;
}
.pricing__toggle-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 36px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
}
.pricing__toggle-btn--active {
  background: rgba(200,184,122,0.14);
  color: var(--accent-1);
}
.pricing__toggle-btn:hover:not(.pricing__toggle-btn--active) {
  color: var(--text);
}
.pricing__toggle-save {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #05070d;
  padding: 3px 9px;
  border-radius: 12px;
  line-height: 1.5;
}

/* Future price (teaser of upcoming rate) */
.pricing__future-price {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  opacity: 0.75;
}
.pricing__future-price s {
  text-decoration-color: rgba(200,184,122,0.45);
}

/* Billing period / founding rate label */
.pricing__price-period {
  font-size: 11.5px;
  color: var(--accent-1);
  margin-top: 8px;
  font-weight: 500;
  letter-spacing: 0.02em;
  min-height: 18px;
  opacity: 0.8;
}

/* Setup fee line — moved below feature list */
.pricing__tier-setup-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-bottom: 20px;
  border-top: 1px solid rgba(200,184,122,0.08);
  border-bottom: 1px solid rgba(200,184,122,0.08);
  text-align: center;
}
/* Make setup "now" price smaller than monthly amount */
.pricing__tier-setup-line .pricing__price-now {
  font-size: 22px !important;
}
.pricing__tier-setup-line .pricing__price-label {
  display: inline !important;
  margin-top: 0 !important;
}

.pricing__financing-note {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin: 12px 0 0;
  font-weight: 500;
}

/* Featured card: gradient price amount + elevated card + glow */
.pricing__tier-card--featured {
  transform: translateY(-8px);
  box-shadow: 0 0 80px rgba(200,184,122,0.09), 0 20px 64px rgba(0,0,0,0.6);
}
.pricing__tier-card--featured:hover {
  transform: translateY(-14px) !important;
}
.pricing__tier-card--featured .pricing__price-amount {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 860px) {
  .pricing__baseline { padding: 16px 18px; }
  .pricing__baseline-items { gap: 6px 16px; }
  .pricing__tier-card--featured { transform: none; }
  .pricing__tier-card--featured:hover { transform: translateY(-6px) !important; }
}

/* ── Pricing card wow factor ────────────────────────────────── */
@keyframes pricing-border-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(200,184,122,0.18),
                0 0 80px rgba(200,184,122,0.08),
                0 20px 64px rgba(0,0,0,0.6);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(200,184,122,0.32),
                0 0 140px rgba(200,184,122,0.22),
                0 20px 64px rgba(0,0,0,0.6),
                inset 0 0 30px rgba(200,184,122,0.04);
  }
}
@keyframes shimmer-price {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes featured-top-sweep {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}
.pricing__tier-card {
  will-change: transform;
}
.pricing__tier-card--featured {
  animation: pricing-border-pulse 3.5s ease-in-out infinite;
}
.pricing__tier-card--featured::before {
  animation: featured-top-sweep 3.5s ease-in-out infinite;
}
.pricing__tier-card--featured .pricing__price-amount {
  background: linear-gradient(
    90deg,
    var(--accent-1) 20%,
    #fff8de 45%,
    var(--accent-2) 55%,
    var(--accent-1) 80%
  );
  background-size: 200% auto;
  animation: shimmer-price 2.8s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pricing__tier-card:not(.pricing__tier-card--featured):hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.5),
              0 0 40px rgba(200,184,122,0.08),
              inset 0 0 20px rgba(200,184,122,0.03);
}

/* ── Settings Tab ──────────────────────────────────────────────────────────── */
.dash-settings-section { margin-bottom: 32px; }
.dash-settings-hint {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: -8px 0 16px;
}
.dash-settings-status {
  font-size: 13px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
}
.dash-settings-status--ok  { background: rgba(107,203,119,.12); color: #6BCB77; }
.dash-settings-status--err { background: rgba(224,108,117,.12); color: #e06c75; }

/* Schedule grid */
.sched-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
}
.sched-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 10px 14px;
}
.sched-row__day {
  width: 96px;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text);
  flex-shrink: 0;
}
.sched-row__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 76px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--clr-text-muted);
}
.sched-row__toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent-1);
  cursor: pointer;
}
.sched-row--open .sched-row__toggle { color: var(--clr-text); }
.sched-row__times { display: flex; align-items: center; gap: 8px; flex: 1; }
.sched-row__time-input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  color: var(--clr-text);
  font-size: 13px;
  padding: 5px 8px;
  width: 108px;
  transition: opacity .15s;
  color-scheme: dark;
}
.sched-row__time-input:focus { outline: none; border-color: var(--accent-1); }
.sched-row__time-input:disabled { opacity: .35; cursor: not-allowed; }
.sched-row__sep { font-size: 12px; color: var(--clr-text-muted); }
.sched-save-row { margin-top: 16px; display: flex; align-items: center; gap: 12px; }

@media (max-width: 640px) {
  .sched-grid { max-width: none; }
  .sched-row {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 14px;
  }
  .sched-row__day { width: auto; flex: 1 1 auto; font-size: 14px; }
  .sched-row__toggle { width: auto; flex: 0 0 auto; }
  .sched-row__times {
    flex: 1 1 100%;
    width: 100%;
    gap: 10px;
  }
  .sched-row__time-input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    font-size: 16px;
    padding: 9px 10px;
  }
  .sched-save-row { flex-wrap: wrap; }
  .sched-save-row .btn { width: 100%; }
}

/* Blackout dates */
.blk-add-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.blk-add-form__date,
.blk-add-form__reason {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  color: var(--clr-text);
  font-size: 13px;
  padding: 8px 10px;
  color-scheme: dark;
}
.blk-add-form__date   { width: 152px; flex-shrink: 0; }
.blk-add-form__reason { flex: 1; min-width: 160px; }
.blk-add-form__date:focus,
.blk-add-form__reason:focus { outline: none; border-color: var(--accent-1); }
.blk-list { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.blk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}
.blk-item__left  { display: flex; flex-direction: column; gap: 2px; }
.blk-item__date  { font-weight: 600; color: var(--clr-text); }
.blk-item__reason { color: var(--clr-text-muted); font-size: 12px; }
.blk-item__del {
  background: none;
  border: 1px solid rgba(224,108,117,.3);
  color: #e06c75;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
}
.blk-item__del:hover { background: rgba(224,108,117,.15); }
.blk-empty { font-size: 13px; color: var(--clr-text-muted); padding: 12px 0; }

/* ── Holiday quick-select ───────────────────────────────────────────────── */
.blk-holidays { margin-bottom: 16px; }
.blk-holidays__label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--clr-text-muted); margin: 0 0 8px;
}
.blk-holidays__grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.blk-holiday-btn {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 6px 10px;
  background: rgba(200,184,122,0.07);
  border: 1px solid rgba(200,184,122,0.22);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
  color: var(--clr-text);
}
.blk-holiday-btn:hover:not(:disabled) {
  background: rgba(200,184,122,0.15);
  border-color: rgba(200,184,122,0.5);
}
.blk-holiday-btn--blocked,
.blk-holiday-btn:disabled {
  opacity: .4; cursor: default;
  background: transparent;
}
.blk-holiday-btn__label { font-size: 12px; font-weight: 600; }
.blk-holiday-btn__date  { font-size: 10px; color: var(--clr-text-muted); font-weight: 400; }

/* ── Integrations tab ──────────────────────────────────────────────────────── */
.integ-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
}
.integ-status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--clr-text-muted);
}
.integ-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.integ-dot--on   { background: #6BCB77; box-shadow: 0 0 6px #6BCB7788; }
.integ-dot--off  { background: rgba(255,255,255,.2); }
.integ-dot--warn { background: #F6AD55; box-shadow: 0 0 6px #F6AD5588; }
.integ-actions  { display: flex; gap: 8px; flex-shrink: 0; }

.dash-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dash-badge--ok       { background: rgba(107,203,119,.15); color: #6BCB77; }
.dash-badge--warn     { background: rgba(246,173, 85,.15); color: #F6AD55; }
.dash-badge--platform { background: rgba(200,184,122,.15);  color: #c8b87a; }

.integ-booking-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.integ-booking-link-input {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--clr-text);
  font-family: inherit;
}

/* ── Google Calendar setup wizard ─────────────────────────────────────────── */
.integ-wizard-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e8e6e3);
  margin: 20px 0 6px;
}
.integ-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.integ-mode-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: rgba(255,255,255,.02);
  position: relative;
}
.integ-mode-card:hover { border-color: rgba(200,184,122,.3); background: rgba(200,184,122,.04); }
.integ-mode-card:has(input:checked) {
  border-color: rgba(200,184,122,.6);
  background: rgba(200,184,122,.08);
}
.integ-mode-card__icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.integ-mode-card__body { flex: 1; }
.integ-mode-card__body strong { font-size: 14px; color: var(--text, #e8e6e3); display: block; margin-bottom: 4px; }
.integ-mode-card__body p { font-size: 12px; color: var(--text-muted, #8a8885); margin: 4px 0 0; line-height: 1.5; }
.integ-mode-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #c8b87a;
  background: rgba(200,184,122,.15);
  border: 1px solid rgba(200,184,122,.3);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.integ-existing-picker {
  margin-top: 10px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--text, #e8e6e3);
  font-size: 13px;
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SALES REVITALIZATION — Design System Additions 2026-04-06
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Antique gold accent — AI/tech badges, secondary hovers ─────────────── */
:root {
  --accent-electric: #c8b87a;
  --accent-electric-dim: rgba(200,184,122,0.18);
  --accent-electric-ring: rgba(200,184,122,0.28);
}

/* ── Hero viewport fix — desktop only; mobile uses auto via media query above ─ */
@media (min-width: 861px) {
  .hero {
    min-height: 100svh;
  }
}
/* ── Mobile hero: add bottom breathing room + scale sub text ─────────────── */
@media (max-width: 860px) {
  .hero {
    padding-bottom: 72px;
  }
  .hero__sub {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .hero {
    padding-bottom: 64px;
  }
  .hero__sub {
    font-size: 15px;
    margin-bottom: 36px;
  }
  .hero__stats {
    gap: 16px;
  }
  .hero__actions {
    margin-bottom: 40px;
  }
}

/* ── Kill starfield on reduced motion only ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #starfield { display: none !important; }
}

/* ── CTA button shimmer sweep ────────────────────────────────────────────── */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: shimmerSweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSweep {
  0%   { left: -100%; }
  45%  { left: 160%; }
  100% { left: 160%; }
}

/* ── Glassmorphism card upgrades ─────────────────────────────────────────── */
.feature__card {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.feature__card:hover {
  border-color: var(--accent-electric-ring) !important;
  box-shadow: 0 0 0 1px var(--accent-electric-ring),
              0 24px 60px rgba(0,0,0,0.5),
              0 0 40px var(--accent-electric-dim) !important;
}
.testimonial__card {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.testimonial__card:hover {
  border-color: var(--accent-electric-ring) !important;
}

/* ── 3D card tilt CSS base ───────────────────────────────────────────────── */
.feature__card,
.testimonial__card,
.industry__card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Industries section — horizontal scroll row ──────────────────────────── */
.features.section { min-height: auto; padding: 80px 0; }

.industries {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Override: compact cards, proper horizontal scroll row */
.industries__grid {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
  gap: 14px !important;
  padding: 8px 0 24px !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbar */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent) !important;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent) !important;
}
.industries__grid::-webkit-scrollbar { display: none !important; }
.industries__grid.is-dragging { cursor: grabbing !important; }
.industries__grid.is-dragging .industry__card { pointer-events: none; }

.industry__card {
  min-width: 190px !important;
  max-width: 190px !important;
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  background: rgba(9,9,15,0.7) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(200,184,122,0.10) !important;
  border-radius: 16px !important;
  padding: 22px 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: inherit !important;
}
.industry__card::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,184,122,0.25), transparent);
}
.industry__card:hover {
  border-color: var(--accent-electric-ring) !important;
  box-shadow: 0 0 0 1px var(--accent-electric-ring),
              0 12px 32px rgba(0,0,0,0.4),
              0 0 20px var(--accent-electric-dim) !important;
  transform: translateY(-4px) !important;
}

.industry__icon {
  width: 22px;
  height: 22px;
  color: rgba(200, 184, 122, 0.75);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.industry__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.industry__name {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 16px !important;
  font-weight: 600;
  color: var(--text, #e8e6e3);
  margin: 0;
}
.industry__hook {
  font-size: 12px !important;
  line-height: 1.5;
  color: var(--text-muted, #9ca3af);
  margin: 0;
}

/* ── AI Waveform component ───────────────────────────────────────────────── */
.waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 32px;
}
.waveform__bar {
  width: 3px;
  border-radius: 2px;
  background: var(--accent-1, #c8b87a);
  transform-origin: center;
  animation: waveAnim var(--wave-dur, 0.8s) ease-in-out infinite alternate;
  animation-delay: var(--wave-delay, 0s);
}
@keyframes waveAnim {
  from { transform: scaleY(0.2); opacity: 0.4; }
  to   { transform: scaleY(1);   opacity: 1; }
}

/* ── Nav link hover wave — prep for GSAP char split ─────────────────────── */
.nav__links a .char {
  display: inline-block;
  will-change: transform;
}

/* ── Liquid CTA hover — ::before fill replaces spotlight ────────────────── */
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.28s ease;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.btn--primary:hover::before {
  transform: scaleY(1);
}
.btn--primary > * {
  position: relative;
  z-index: 1;
}
.integ-wizard-confirm { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD + ADMIN VISUAL UPGRADE — 2026-04-06
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GSAP word-split helpers ─────────────────────────────────────────────── */
.dash-word-wrap { display: inline-block; overflow: hidden; }
.dash-word-inner { display: inline-block; }

/* ── Stat cards: glassmorphism + gold top accent ─────────────────────────── */
.dash-stat-card {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 16px !important;
  position: relative;
}
.dash-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,184,122,0.2), transparent);
  pointer-events: none;
}
.dash-stat-card--accent::before {
  background: linear-gradient(90deg, transparent, rgba(200,184,122,0.45), transparent);
}
.dash-stat-card--accent {
  background: linear-gradient(135deg, rgba(200,184,122,0.10), rgba(200,184,122,0.04)) !important;
  box-shadow: 0 0 40px rgba(200,184,122,0.06), 0 12px 40px rgba(0,0,0,0.25) !important;
}
.dash-stat-card--accent .dash-stat-card__value {
  background: linear-gradient(135deg, #e4d5a4, #c8b87a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Shimmer on accent card ──────────────────────────────────────────────── */
.dash-stat-card--accent::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.04) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: dashCardShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dashCardShimmer {
  0%   { background-position: 200% 0; }
  50%  { background-position: -200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Active tab: gold underline indicator ────────────────────────────────── */
.dash-tab {
  position: relative;
}
.dash-tab--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--accent-grad, linear-gradient(90deg, #c8b87a, #e4d5a4));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(200,184,122,0.4);
}

/* ── Calendar + upcoming panels: glass + top accent ─────────────────────── */
.dash-calendar-wrap,
.dash-upcoming-wrap,
.dash-today,
.dash-activity,
.an-panel,
.bl-panel,
.bl-plan-card {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  position: relative;
}
.dash-calendar-wrap::before,
.dash-upcoming-wrap::before,
.dash-today::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,184,122,0.15), transparent);
  pointer-events: none;
}

/* ── Appointment row hover: gold left bar ────────────────────────────────── */
.dash-appt-row,
.dash-today__item,
.appt-row {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  border-left: 2px solid transparent;
}
.dash-appt-row:hover,
.dash-today__item:hover,
.appt-row:hover {
  background: rgba(200,184,122,0.05) !important;
  border-left-color: rgba(200,184,122,0.4);
  transform: translateX(3px);
}

/* ── Settings sections: subtle glass upgrade ─────────────────────────────── */
.dash-settings-section {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── ADMIN — glassmorphism panel upgrade ─────────────────────────────────── */
.admin-panel,
.admin-card,
.admin-biz-card {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
.admin-biz-card:hover {
  border-color: rgba(200,184,122,0.28) !important;
  box-shadow: 0 0 0 1px rgba(200,184,122,0.28),
              0 16px 48px rgba(0,0,0,0.4),
              0 0 32px rgba(200,184,122,0.05) !important;
  transform: translateY(-3px) !important;
}

/* ── Admin sidebar nav: gold hover indicator ─────────────────────────────── */
.admin-nav__item:hover {
  background: rgba(200,184,122,0.08) !important;
  border-color: rgba(200,184,122,0.2) !important;
  color: #eee6d2 !important;
}
.admin-nav__item--active {
  background: rgba(200,184,122,0.14) !important;
  border-color: rgba(200,184,122,0.3) !important;
  color: #c8b87a !important;
}
.admin-nav__item--active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--accent-electric, #c8b87a);
  border-radius: 0 2px 2px 0;
}

/* ── Admin stat/metric cards ─────────────────────────────────────────────── */
.admin-metric-card,
.admin-stat {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: transform 0.25s ease, border-color 0.25s ease !important;
}
.admin-metric-card:hover,
.admin-stat:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(200,184,122,0.25) !important;
}

/* ── Dashboard splash: smooth fade out ───────────────────────────────────── */
.dash-splash {
  transition: opacity 0.4s ease !important;
}
.dash-splash.fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── FX entrance: more dramatic baseline ─────────────────────────────────── */
.fx-hidden {
  opacity: 0 !important;
  transform: translateY(32px) scale(0.97) !important;
}
.fx-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.55s var(--ease-out),
              transform 0.55s var(--ease-spring) !important;
}

/* ── Tab transitions: snappier ───────────────────────────────────────────── */
@keyframes tabFadeOut {
  to { opacity: 0; transform: translateX(-14px) scale(0.99); }
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateX(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO PHONE — absolutely positioned decorative element, left side
   ══════════════════════════════════════════════════════════════════════════ */
.hero__phone-float {
  position: absolute;
  left: clamp(16px, calc(50% - 660px), 100px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0; /* GSAP animates in */
}
.hero__phone-float::before {
  content: '';
  position: absolute;
  inset: -60px;
  background: radial-gradient(ellipse at center, rgba(200,184,122,0.12) 0%, transparent 65%);
  pointer-events: none;
}
/* Tablet (641 – 1049 px): show phone below hero copy, centered */
@media (min-width: 641px) and (max-width: 1049px) {
  .hero__phone-float {
    display: flex !important;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    order: 2;
    justify-content: center;
    align-self: center;
    margin-top: 48px;
    padding-bottom: 60px;
  }
  .hero__phone-float .phone-frame {
    width: 200px;
    height: 410px;
    border-radius: 32px;
  }
}

/* Laptop (1050 – 1280 px): phone peeks from left edge, scaled and softened */
@media (min-width: 1050px) and (max-width: 1280px) {
  .hero__phone-float { left: -44px; }
}

/* Mobile (≤ 640 px): show phone BELOW hero copy, centered and scaled down.
   The hero is a column-flex container; order:2 pushes it after .container. */
@media (max-width: 640px) {
  .hero__phone-float {
    display: flex !important;
    position: relative;
    left: auto;
    top: auto;
    transform: none;        /* cleared by GSAP's translateX/scale animation */
    order: 2;               /* appear after .container text in column-flex hero */
    justify-content: center;
    align-self: center;
    margin-top: 40px;
    padding-bottom: 52px;
  }
  /* Scale the frame down so the phone fits a phone-width viewport */
  .hero__phone-float .phone-frame {
    width: 160px;
    height: 330px;
    border-radius: 27px;
    box-shadow:
      0 0 0 5px #131318,
      0 0 0 6px rgba(255,255,255,0.05),
      0 24px 60px rgba(0,0,0,0.55),
      0 0 48px rgba(200,184,122,0.07);
  }
}

/* hero keyword word stagger */
.hero__line--kw {
  display: flex;
  gap: 0.28em;
  justify-content: center;
  flex-wrap: nowrap;
}
.hero__kw {
  display: inline-block;
  opacity: 0; /* animated in by GSAP */
}
@media (prefers-reduced-motion: reduce), (max-width: 480px) {
  .hero__kw { opacity: 1 !important; }
}
@media (max-width: 480px) {
  /* Prevent "Built. Deployed. Managed." from overflowing narrow viewports */
  .hero__line--kw { flex-wrap: wrap; row-gap: 0.1em; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE MOCKUP
   ══════════════════════════════════════════════════════════════════════════ */
.phone-frame {
  width: 224px;
  height: 460px;
  background: #0b0b10;
  border-radius: 38px;
  border: 1.5px solid rgba(255,255,255,0.1);
  box-shadow:
    0 0 0 7px #131318,
    0 0 0 8.5px rgba(255,255,255,0.05),
    0 40px 100px rgba(0,0,0,0.65),
    0 0 80px rgba(200,184,122,0.07);
  position: relative;
  overflow: hidden;
  animation: phoneFloat 7s ease-in-out infinite;
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%       { transform: translateY(-14px) rotate(-1.5deg); }
}
.phone-notch {
  width: 76px;
  height: 22px;
  background: #0b0b10;
  border-radius: 0 0 14px 14px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  border: 1.5px solid rgba(255,255,255,0.07);
  border-top: none;
}
/* Hero phone inner screen — named pmock-screen to avoid conflict with IVR demo .phone-screen */
.pmock-screen {
  padding: 6px 14px 18px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 22px);
  box-sizing: border-box;
  gap: 0;
}
.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
  padding-top: 2px;
}
.phone-status-bar svg { opacity: 0.4; }
.phone-call-hdr {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.phone-agent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c8b87a 0%, #a8905a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(200,184,122,0.35);
}
.phone-agent-info { display: flex; flex-direction: column; gap: 3px; }
.phone-agent-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.01em;
}
.phone-agent-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}
.phone-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 8px rgba(46,204,113,0.7);
  animation: phoneLivePulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes phoneLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(1.4); }
}
.phone-timer { font-variant-numeric: tabular-nums; }

/* waveform inside phone */
.phone-wf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 44px;
  margin-bottom: 14px;
  background: rgba(200,184,122,0.06);
  border-radius: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(200,184,122,0.1);
}
.phone-wf .waveform__bar {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #9b85ff 0%, #5b4de0 100%);
  min-height: 4px;
}

/* chat bubbles */
.phone-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.phone-bubble {
  border-radius: 14px;
  padding: 8px 11px;
  font-size: 10.5px;
  line-height: 1.55;
  max-width: 88%;
}
.phone-bubble--user {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid rgba(255,255,255,0.06);
}
.phone-bubble--ai {
  background: rgba(200,184,122,0.12);
  color: rgba(255,255,255,0.85);
  align-self: flex-start;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid rgba(200,184,122,0.18);
}
.phone-confirm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(46,204,113,0.1);
  border: 1px solid rgba(46,204,113,0.22);
  color: #2ecc71;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}
.phone-side-btn {
  position: absolute;
  right: -3px;
  top: 90px;
  width: 3px;
  height: 46px;
  background: rgba(255,255,255,0.08);
  border-radius: 0 3px 3px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   FEATURE CARD — icon glow pulse on hover
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes iconGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(200,184,122,0.25); }
  50%       { box-shadow: 0 0 28px rgba(200,184,122,0.55), 0 0 56px rgba(200,184,122,0.12); }
}
.feature__card:hover .feature__icon-wrap {
  animation: iconGlow 1.8s ease-in-out infinite;
}
.feature__card--gold:hover .feature__icon-wrap {
  animation: iconGlow 1.4s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   INDUSTRIES — drag hint
   ══════════════════════════════════════════════════════════════════════════ */
.industries__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 11px;
  color: rgba(200,184,122,0.35);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 0.5s ease;
  user-select: none;
  pointer-events: none;
}
.industries__hint svg { opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════════════
   ONLINE BOOKING SHOWCASE — homepage section + booking page preview card
   ═════════════════════════════════════════════════════════════════════ */

/* Hero sub-link (below hero buttons) */
.hero__book-cta {
  font-size: 13px;
  color: var(--text-muted, #8a8a9a);
  margin-top: 14px;
  text-align: center;
}
.hero__book-cta a {
  color: var(--accent-1, #c8b87a);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(200,184,122,.4);
}
.hero__book-cta a:hover { text-decoration-color: var(--accent-1, #c8b87a); }

/* Section layout */
.book-showcase { overflow: hidden; }
.book-showcase__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.book-showcase__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-1, #c8b87a);
  margin-bottom: 14px;
}
.book-showcase__title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 600;
  color: var(--text, #eee6d2);
  line-height: 1.15;
  margin-bottom: 18px;
}
.book-showcase__sub {
  font-size: 15px;
  color: var(--text-muted, #8a8a9a);
  line-height: 1.7;
  margin-bottom: 26px;
}
.book-showcase__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
  padding: 0;
}
.book-showcase__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text, #eee6d2);
  line-height: 1.5;
}
.book-showcase__list li::before {
  content: "✓";
  color: var(--accent-1, #c8b87a);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Preview card shell */
.bk-preview {
  background: rgba(9,9,15,.96);
  border: 1px solid rgba(200,184,122,.14);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  position: relative;
  user-select: none;
}

/* Business header row */
.bk-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.bk-preview__biz {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #eee6d2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bk-preview__biz-icon { font-size: 16px; }
.bk-preview__step-tag {
  font-size: 10px;
  color: var(--accent-1, #c8b87a);
  background: rgba(200,184,122,.1);
  border: 1px solid rgba(200,184,122,.22);
  border-radius: 20px;
  padding: 3px 9px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Decorative step progress */
.bk-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
}
.bk-prog-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.bk-prog-dot--done   { background: rgba(200,184,122,.15); color: var(--accent-1,#c8b87a); border: 1.5px solid rgba(200,184,122,.45); }
.bk-prog-dot--active { background: rgba(200,184,122,.22); color: var(--accent-1,#c8b87a); border: 1.5px solid var(--accent-1,#c8b87a); box-shadow: 0 0 0 3px rgba(200,184,122,.12); }
.bk-prog-dot--todo   { background: rgba(255,255,255,.04); color: rgba(255,255,255,.3); border: 1.5px solid rgba(255,255,255,.1); }
.bk-prog-line { flex: 1; height: 2px; background: rgba(255,255,255,.08); }
.bk-prog-line--done  { background: rgba(200,184,122,.38); }

/* Mini calendar */
.bk-cal { margin-bottom: 14px; }
.bk-cal__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.bk-cal__arr { font-size: 16px; color: rgba(255,255,255,.3); }
.bk-cal__month { font-size: 12px; font-weight: 600; color: var(--text, #eee6d2); }
.bk-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.bk-cal__head { font-size: 9px; text-align: center; color: rgba(255,255,255,.3); padding: 2px 0; font-weight: 600; }
.bk-cal__day  { font-size: 11px; text-align: center; padding: 5px 2px; border-radius: 4px; color: rgba(255,255,255,.35); }
.bk-cal__day--av  { color: var(--text, #eee6d2); }
.bk-cal__day--off { opacity: .25; }
.bk-cal__day--sel { background: rgba(200,184,122,.22); color: var(--accent-1,#c8b87a); font-weight: 700; border-radius: 4px; }

/* Pick-a-time label */
.bk-pick-label { font-size: 11px; color: rgba(255,255,255,.45); margin: 0 0 8px; }

/* Time slot chips */
.bk-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 18px;
}
.bk-slot {
  font-size: 10px; text-align: center;
  padding: 7px 4px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.4);
}
.bk-slot--av    { color: var(--text, #eee6d2); border-color: rgba(255,255,255,.15); }
.bk-slot--taken { opacity: .25; text-decoration: line-through; }
.bk-slot--sel   { background: rgba(200,184,122,.2); border-color: rgba(200,184,122,.55); color: var(--accent-1,#c8b87a); font-weight: 600; }

/* Bottom CTA row (decorative) */
.bk-preview__cta { display: flex; gap: 8px; }
.bk-preview__back {
  padding: 9px 14px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; font-size: 12px; color: rgba(255,255,255,.4);
}
.bk-preview__next {
  flex: 1; padding: 9px;
  background: rgba(200,184,122,.9); border-radius: 7px;
  font-size: 12px; font-weight: 700; color: #1a1208; text-align: center;
}

/* Powered-by badge inside card */
.bk-preview__powered {
  text-align: center;
  margin-top: 14px;
  font-size: 10px;
  color: rgba(255,255,255,.3);
}
.bk-preview__powered a { color: rgba(200,184,122,.6); text-decoration: none; }

/* Responsive */
@media (max-width: 860px) {
  .book-showcase__inner { grid-template-columns: 1fr; gap: 48px; }
  .book-showcase__preview { order: -1; }
  .bk-preview { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 520px) {
  .bk-slots { grid-template-columns: repeat(3, 1fr); }
}

/* ══ end Online Booking Showcase ══════════════════════════════════════ */
   ═════════════════════════════════════════════════════════════════════ */

/* ── Booking Page CTA (Overview — shown when business is live) ── */
.dash-booking-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 22px;
  background: rgba(200,184,122,.07);
  border: 1px solid rgba(200,184,122,.22);
  border-radius: 12px;
  flex-wrap: wrap;
}
.dash-booking-cta__icon { font-size: 20px; flex-shrink: 0; }
.dash-booking-cta__body { flex: 1; min-width: 180px; }
.dash-booking-cta__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold, #c8b87a);
  margin: 0 0 5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dash-booking-cta__url {
  width: 100%;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted, #a0a0a0);
  cursor: pointer;
  font-family: var(--ff-mono, monospace);
}

/* ── Appointment Detail Drawer ── */
.dash-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.dash-drawer:not([hidden]) { pointer-events: auto; }
.dash-drawer[hidden] { display: none; }
.dash-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .25s ease;
}
.dash-drawer:not([hidden]) .dash-drawer__backdrop { opacity: 1; }
.dash-drawer__panel {
  position: relative;
  width: min(440px, 100vw);
  background: var(--bg-card, #12121a);
  border-left: 1px solid rgba(255,255,255,.07);
  height: 100%;
  overflow-y: auto;
  padding: 28px 24px 40px;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.dash-drawer:not([hidden]) .dash-drawer__panel { transform: none; }
.dash-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.dash-drawer__title { font-size: 16px; font-weight: 600; margin: 0; }
.dash-drawer__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 20px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.dash-drawer__close:hover { background: rgba(255,255,255,.07); }
.dash-drawer__body { font-size: 14px; }
.dash-drawer__field { margin-bottom: 18px; }
.dash-drawer__field-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.dash-drawer__field-value { font-size: 15px; color: var(--text, #e0e0e0); }
.dash-drawer__actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

/* table rows get pointer cursor when drawer is available */
.dash-table tbody tr { cursor: pointer; }
.dash-table tbody tr:hover td { background: rgba(255,255,255,.025); }

/* ── Analytics date-range toggle ── */
.an-range-btns {
  display: flex;
  gap: 4px;
}
.an-range-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.an-range-btn:hover { color: var(--text); background: rgba(255,255,255,.05); }
.an-range-btn--active {
  background: rgba(200,184,122,.12);
  border-color: rgba(200,184,122,.35);
  color: var(--gold, #c8b87a);
}

/* ── Mobile bottom tab nav ── */
@media (max-width: 560px) {
  .dash-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    margin-bottom: 0;
    padding: 8px 6px env(safe-area-inset-bottom, 8px);
    background: rgba(9,9,15,.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: none;
    justify-content: space-around;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dash-tab {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    padding: 6px 8px 4px;
    border-bottom: none;
    border-top: 2px solid transparent;
    margin-bottom: 0;
    min-width: 48px;
  }
  .dash-tab--active,
  .dash-tab.dash-tab--active {
    border-bottom-color: transparent;
    border-top-color: var(--gold);
  }
  .dash-page { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Retention Modal ────────────────────────────────────────────────────────── */
.dash-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 900;
}
.dash-modal-backdrop[hidden] { display: none; }
.dash-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 901; background: #0a0d16; border: 1px solid rgba(200,184,122,0.18);
  border-radius: 14px; padding: 28px; width: min(480px, calc(100vw - 32px));
  color: #eee6d2;
}
.dash-modal[hidden] { display: none; }
.dash-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dash-modal__title  { font-size: 18px; font-weight: 700; margin: 0; }
.dash-modal__close  { background: none; border: none; cursor: pointer; font-size: 18px; color: #c8b87a; padding: 4px 8px; border-radius: 6px; }
.dash-modal__close:hover { background: rgba(255,255,255,.07); }
.dash-modal__body   { margin-bottom: 20px; font-size: 14px; line-height: 1.6; color: #d6cdb5; }
.dash-modal__footer { display: flex; gap: 10px; flex-wrap: wrap; }
.retention-offer-card {
  background: rgba(200,184,122,0.08); border: 1px solid rgba(200,184,122,0.24); border-radius: 10px;
  padding: 18px; margin-top: 12px;
}
.retention-offer-card__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c8b87a; margin: 0 0 6px; }
.retention-offer-card__value { font-size: 22px; font-weight: 800; color: #eee6d2; margin: 0 0 6px; }
.retention-offer-card__sub   { font-size: 13px; color: #d6cdb5; margin: 0; }

/* ── Support drawer form fields ─────────────────────────────────────────────── */
.dash-form-group  { margin-bottom: 16px; }
.dash-label       { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted, #888); margin-bottom: 6px; }
.dash-select,
.dash-input,
.dash-textarea    {
  width: 100%; box-sizing: border-box;
  background: #111118; border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--text, #e0e0e0);
  font-family: inherit;
  color-scheme: dark;
}
.dash-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.dash-select option { background: #111118; color: #e0e0e0; }
.dash-select:focus,
.dash-input:focus,
.dash-textarea:focus { outline: none; border-color: #c8b87a; }
.dash-textarea    { resize: vertical; min-height: 100px; }

/* ── Pricing tier name — display font, gold → cream gradient ────────────── */
.pricing__tier-name {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 4px;
  background: linear-gradient(135deg, #fdf8ec 0%, #e4d5a4 40%, #c8b87a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pricing__tier-card--enterprise .pricing__tier-name {
  font-size: 40px;
}

/* ── Enterprise tier card — full-width horizontal layout ────────────────── */
.pricing__tier-card--enterprise {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 36px 48px;
}
.pricing__enterprise-left {
  flex: 1;
}
.pricing__enterprise-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
.pricing__tier-card--enterprise .pricing__price-amount {
  font-size: 38px;
}
@media (max-width: 860px) {
  .pricing__tier-card--enterprise {
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 32px;
    gap: 24px;
  }
  .pricing__enterprise-right {
    align-items: flex-start;
    width: 100%;
  }
  .pricing__enterprise-right .btn {
    width: 100%;
    text-align: center;
  }
}

/* ── Pricing — "See example bill" text link ────────────────────────────── */
.pricing__bill-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--accent-1);
  letter-spacing: 0.04em;
  padding: 0 0 16px;
  text-align: center;
  width: 100%;
  display: block;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.pricing__bill-link:hover { opacity: 1; text-decoration: underline; }

/* ── Example Bill Modal ─────────────────────────────────────────────────── */
.bill-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 24px;
  animation: billFadeIn 0.2s ease;
}
.bill-modal[hidden] { display: none; }
@keyframes billFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bill-modal__box {
  background: rgba(9, 9, 15, 0.97);
  border: 1px solid rgba(200, 184, 122, 0.22);
  border-radius: 20px;
  padding: 36px 40px 32px;
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 60px rgba(200,184,122,0.06);
  animation: billSlideUp 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes billSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.bill-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--text-muted, #9ca3af);
  line-height: 1; padding: 4px 8px; border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.bill-modal__close:hover { color: var(--text, #e0e0e0); background: rgba(255,255,255,0.06); }
.bill-modal__title {
  font-family: var(--font-display, serif);
  font-size: 22px; font-weight: 700;
  color: var(--text, #e0e0e0); margin: 0 0 4px;
}
.bill-modal__scenario {
  font-size: 13px; color: var(--text-muted, #9ca3af);
  margin: 0 0 24px; line-height: 1.5;
}
.bill-modal__table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.bill-modal__table td {
  padding: 10px 0; font-size: 14px;
  color: var(--text-muted, #9ca3af);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.bill-modal__amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-modal__row--overage td { color: rgba(200, 184, 122, 0.85); }
.bill-modal__row--total td {
  padding-top: 14px; font-size: 16px;
  color: var(--text, #e0e0e0);
  border-bottom: none; border-top: 1px solid rgba(200,184,122,0.2);
}
.bill-modal__row--total .bill-modal__amount { color: var(--accent-1, #c8b87a); font-size: 20px; }
.bill-modal__note {
  font-size: 12px; color: var(--text-dim, #6b7280);
  line-height: 1.6; margin: 0; font-style: italic;
}
@media (max-width: 520px) {
  .bill-modal__box { padding: 28px 24px 24px; }
  .bill-modal__title { font-size: 19px; }
}

/* ── Pricing ─ "See example bill" text link ──────────────────────────────── */
.pricing__bill-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--accent-1);
  letter-spacing: 0.04em;
  padding: 0 0 16px;
  text-align: center;
  width: 100%;
  display: block;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.pricing__bill-link:hover { opacity: 1; text-decoration: underline; }

/* ── Example Bill Modal ────────────────────────────────────────── */
.bill-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 24px;
  animation: billFadeIn 0.2s ease;
}
.bill-modal[hidden] {
  display: none;
}
@keyframes billFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bill-modal__box {
  background: rgba(9, 9, 15, 0.95);
  border: 1px solid rgba(200, 184, 122, 0.22);
  border-radius: 20px;
  padding: 36px 40px 32px;
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(200, 184, 122, 0.06);
  animation: billSlideUp 0.25s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
@keyframes billSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.bill-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--text-muted, #9ca3af);
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.bill-modal__close:hover {
  color: var(--text, #e0e0e0);
  background: rgba(255, 255, 255, 0.06);
}
.bill-modal__title {
  font-family: var(--font-display, serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #e0e0e0);
  margin: 0 0 4px;
}
.bill-modal__scenario {
  font-size: 13px;
  color: var(--text-muted, #9ca3af);
  margin: 0 0 24px;
  line-height: 1.5;
}
.bill-modal__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.bill-modal__table td {
  padding: 10px 0;
  font-size: 14px;
  color: var(--text-muted, #9ca3af);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}
.bill-modal__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bill-modal__row--overage td {
  color: rgba(200, 184, 122, 0.85);
}
.bill-modal__row--total td {
  padding-top: 14px;
  font-size: 16px;
  color: var(--text, #e0e0e0);
  border-bottom: none;
  border-top: 1px solid rgba(200, 184, 122, 0.2);
}
.bill-modal__row--total .bill-modal__amount {
  color: var(--accent-1, #c8b87a);
  font-size: 20px;
}
.bill-modal__note {
  font-size: 12px;
  color: var(--text-dim, #6b7280);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}
@media (max-width: 520px) {
  .bill-modal__box { padding: 28px 24px 24px; }
  .bill-modal__title { font-size: 19px; }
}

/* ── Pricing Calculator ──────────────────────────────────────── */
.pricing__calc {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px 40px;
  margin-top: 28px;
  position: relative;
  overflow: hidden;
}

.pricing__calc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(200,184,122,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.pricing__calc-header {
  text-align: center;
  margin-bottom: 40px;
}

.pricing__calc-header h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 600;
}

.pricing__calc-header p { color: var(--text-muted); font-size: 0.95rem; }

.pricing__calc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}

.pricing__calc-slider-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pricing__calc-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.pricing__calc-amount {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  color: var(--accent-1);
  line-height: 1;
  font-weight: 600;
}

.pricing__calc-amount span {
  font-size: 1rem;
  color: var(--text-muted);
  font-family: var(--font);
  font-weight: 400;
  margin-left: 2px;
}

.pricing__calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  background: rgba(200,184,122,0.15);
}

.pricing__calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4d5a4, #c8b87a);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(200,184,122,0.18);
  transition: box-shadow var(--dur-fast);
}

.pricing__calc-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 8px rgba(200,184,122,0.22); }

.pricing__calc-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-1);
  cursor: pointer;
  border: none;
}

.pricing__calc-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.pricing__calc-meta { display: flex; gap: 10px; flex-wrap: wrap; }

.pricing__calc-pill {
  background: rgba(200,184,122,0.07);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pricing__calc-pill strong { color: var(--text); }

.pricing__calc-output { display: flex; flex-direction: column; gap: 18px; }

.pricing__calc-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pricing__calc-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.pricing__calc-features-list li::before {
  content: '';
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  background-color: var(--accent-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%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' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.pricing__calc-features-list li.calc-feature--new { color: var(--text); }
.pricing__calc-features-list li.calc-feature--new::before { background-color: var(--green); }

.pricing__calc-cta { margin-top: 4px; }

@media (max-width: 700px) {
  .pricing__calc-body { grid-template-columns: 1fr; gap: 32px; }
  .pricing__calc { padding: 32px 20px; }
}

/* ── Enterprise upright card ─────────────────────────────────── */
.pricing__tier-card--enterprise-upright {
  border-color: rgba(240,235,224,0.18);
  background: rgba(15,14,20,0.85);
  position: relative;
  overflow: hidden;
}

.pricing__tier-card--enterprise-upright::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(240,235,224,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.pricing__tier-card--enterprise-upright .pricing__tier-name {
  background: linear-gradient(135deg, #eee6d2, #c8b87a, #eee6d2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing__tier-card--enterprise-upright .pricing__price-amount {
  background: linear-gradient(135deg, #eee6d2, #c8b87a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: clamp(2rem, 5vw, 2.6rem);
}

.pricing__tier-card--enterprise-upright:hover {
  border-color: rgba(240,235,224,0.32);
  transform: translateY(-6px);
}

/* ── Compare section ──────────────────────────────────────────────────── */
.compare .section__header { margin-bottom: 2.5rem; }
.compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 820px;
  margin: 0 auto 1rem;
}
.compare__col {
  border-radius: 16px;
  padding: 2rem;
}
.compare__col--them {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  opacity: 1;
}
.compare__col--us {
  background: rgba(200,184,122,0.06);
  border: 1px solid rgba(200,184,122,0.22);
}
.compare__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: var(--text-muted);
}
.compare__col--us .compare__label {
  color: var(--accent-1);
}
.compare__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.compare__item {
  font-size: 0.92rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.4;
  color: var(--text-muted);
}
.compare__item::before {
  position: absolute;
  left: 0;
  font-size: 0.85rem;
  font-weight: 700;
}
.compare__item--no::before {
  content: '✕';
  color: rgba(255,255,255,0.45);
}
.compare__item--yes {
  color: var(--text);
}
.compare__item--yes::before {
  content: '✓';
  color: var(--accent-1);
}
@media (max-width: 600px) {
  .compare__grid { grid-template-columns: 1fr; }
  .compare__col--them { display: none; }
}

.compare__proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 820px;
  margin: 0 auto;
}
.compare__proof-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1rem;
  text-align: center;
}
.compare__proof-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--accent-1);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.compare__proof-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.compare__cta {
  text-align: center;
  margin-top: 1.75rem;
}
.compare__cta-note {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
@media (max-width: 700px) {
  .compare__proof { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .compare__proof { grid-template-columns: 1fr; }
}

/* ── Performance guarantee ────────────────────────────────────────────── */
.pricing__guarantee {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  max-width: 680px;
  margin: 1.5rem auto 0;
  padding: 1.25rem 1.5rem;
  background: rgba(200,184,122,0.06);
  border: 1px solid rgba(200,184,122,0.2);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.pricing__guarantee svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-1);
}
.pricing__guarantee strong {
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   WCAG 2.1 AA — skip links, screen-reader-only text, high-contrast,
   font-scale overrides, user preference controls panel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Visually hidden but screen-reader accessible ──────────────────────── */
.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 navigation link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 99999;
  padding: 10px 20px;
  background: var(--bg);
  color: var(--accent-1);
  border: 2px solid var(--accent-1);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: top 0s;
}
.skip-link:focus-visible {
  top: 1rem;
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
}

/* ── prefers-contrast: more — boost key design tokens ──────────────────── */
@media (prefers-contrast: more) {
  :root {
    --text-muted:  #d4cfc5;
    --border:      rgba(200,184,122,0.5);
    --bg-card:     #0a0a12;
    --accent-1:    #e8d89a;
  }
}

/* ── High-contrast mode (user-toggled via a11y panel) ──────────────────── */
html.high-contrast {
  --bg:          #000000;
  --bg-card:     #0a0a0a;
  --bg-card-2:   #111111;
  --text:        #ffffff;
  --text-muted:  #e0e0e0;
  --text-dim:    #aaaaaa;
  --border:      rgba(255,255,255,0.4);
  --accent-1:    #ffd700;
  --accent-2:    #e6c200;
  --accent-grad: linear-gradient(135deg, #ffe87a, #ffd700, #e6c200);
  --red:         #ff6b6b;
  --green:       #7affd4;
}

/* ── Reduced-motion mode (user-toggled via a11y panel) ──────────────────── */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ── Zoom overrides (user-toggled via a11y panel) ───────────────────── */
/* Levels: 75 80 90 100 110 125 150 175 200 — stored as integer string in data-zoom */
html[data-zoom="75"]  { zoom: 0.75; }
html[data-zoom="80"]  { zoom: 0.80; }
html[data-zoom="90"]  { zoom: 0.90; }
html[data-zoom="110"] { zoom: 1.10; }
html[data-zoom="125"] { zoom: 1.25; }
html[data-zoom="150"] { zoom: 1.50; }
html[data-zoom="175"] { zoom: 1.75; }
html[data-zoom="200"] { zoom: 2.00; }


/* ── Accessibility control panel ────────────────────────────────────────── */
.a11y-trigger {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9000;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.a11y-trigger:hover,
.a11y-trigger:focus-visible {
  background: rgba(200,184,122,0.12);
  border-color: var(--accent-1);
  color: var(--accent-1);
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
}
.a11y-trigger[aria-expanded="true"] {
  background: rgba(200,184,122,0.15);
  border-color: var(--accent-1);
  color: var(--accent-1);
  transform: translateY(-1px);
}

.a11y-panel {
  position: fixed;
  bottom: 76px;
  left: 24px;
  z-index: 9000;
  width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  padding: 16px;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom left;
  transition:
    opacity 0.18s var(--ease-out),
    transform 0.18s var(--ease-out),
    visibility 0s linear 0.18s;
  visibility: hidden;
}
.a11y-panel[hidden] {
  display: block;
}
.a11y-panel[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
  visibility: visible;
}
.a11y-panel__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.a11y-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(200,184,122,0.06);
}
.a11y-panel__row:last-child { border-bottom: none; }
.a11y-panel__label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.a11y-panel__controls {
  display: flex;
  gap: 4px;
}
.a11y-panel__zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}
.a11y-panel__zoom-val {
  min-width: 40px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
html[data-zoom] .a11y-panel__zoom-val {
  color: var(--accent-1);
}
.a11y-panel__btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  font-family: var(--font);
}
.a11y-panel__btn:hover,
.a11y-panel__btn--active {
  background: rgba(200,184,122,0.18);
  border-color: var(--accent-1);
  color: var(--accent-1);
}
.a11y-panel__btn:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}
.a11y-panel__toggle {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
  overflow: hidden;
}
.a11y-panel__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transform: translate(0, -50%);
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.18s ease;
  will-change: transform;
}
.a11y-panel__toggle[aria-checked="true"] {
  background: rgba(200,184,122,0.25);
  border-color: var(--accent-1);
  box-shadow: inset 0 0 0 1px rgba(200,184,122,0.12);
}
.a11y-panel__toggle[aria-checked="true"]::after {
  transform: translate(20px, -50%);
  background: var(--accent-1);
}
.a11y-panel__toggle:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
}

/* ── Booking widget — accessible calendar & slots ── */
.book-cal-day:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
  border-radius: 6px;
}
.book-slot:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}
.book-svc-card:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── WCAG 2.1 AA CONTRAST FIXES ─────────────────────────────────────────────
   Specific overrides for elements that fail the 4.5:1 minimum contrast ratio.
   Uses #aaa0a0 (≥4.5:1 on #05070d) instead of --text-dim (#4a4438 ~1.7:1).
   Login subtitle gets #b0a8a0 (≥4.5:1 on the card's near-black bg).
   ───────────────────────────────────────────────────────────────────────── */
.trust-strip__label {
  color: #aaa0a0;
}
.trust-strip__logos span {
  color: #c4bdb0;
}
.login-header .login-subtitle,
.login-subtitle {
  color: #c8c0b8;
}
.login-security-badge {
  color: #8a8a9a;
}
.compare__label {
  color: #c8c0b8;
}
.compare__item {
  color: #c8c0b8;
}
.cancel-note {
  color: #8a8a9a;
}
.roi-compact__disclaimer {
  color: #8a8a9a;
}
.industries__hint {
  color: #8a8a9a;
}
.login-below__hint {
  color: #8a8a9a;
}
.login-below__divider {
  color: #8a8a9a;
}
.footer__bottom p {
  color: #8a8a9a;
}

/* ── WCAG 2.1 AA LINK-IN-TEXT-BLOCK FIX ────────────────────────────────────
   Inline links inside prose text must be distinguishable by more than color.
   `text-decoration: underline` is the simplest compliant solution (WCAG 1.4.1).
   Scoped to known offending selectors so other link styles are not affected.
   ───────────────────────────────────────────────────────────────────────── */
.hero__sub a,
.book-consent a,
.footer__bottom a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── SCROLLABLE REGION KEYBOARD FIX ────────────────────────────────────────
   Horizontally scrollable containers must be keyboard-reachable (WCAG 2.1.1).
   Added via HTML tabindex="0"; CSS defines visible focus indicator.
   ───────────────────────────────────────────────────────────────────────── */
.industries__grid:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE MOBILE — comprehensive overrides
   Applied LAST so they win over scattered component rules above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container: tighter side padding on phones ──────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
}

/* ── Section spacing: fewer dead pixels on phones ───────────────────────── */
@media (max-width: 520px) {
  .section { padding: 72px 0; }
  .section__header { margin-bottom: 36px; }
  .section__title { font-size: clamp(28px, 9vw, 42px); line-height: 1.1; }
  .section__sub   { font-size: 15px; line-height: 1.65; }
}

/* ── Trust strip: stack label above logos on narrow phones ──────────────── */
@media (max-width: 540px) {
  .trust-strip { padding: 20px 0; }
  .trust-strip__inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .trust-strip__logos {
    gap: 12px 16px;
    justify-content: center;
  }
}

/* ── Hero: sub text, buttons, and stats on small phones ─────────────────── */
@media (max-width: 480px) {
  .hero__sub {
    font-size: 16px;
    line-height: 1.68;
    margin-bottom: 36px;
    padding: 0 4px;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 44px;
    padding: 0 12px;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero__stats {
    gap: 16px;
    justify-content: center;
  }
  .stat__num   { font-size: 22px; }
  .stat__label { font-size: 11px; }
  .stat__div   { height: 24px; }
}

/* ── Demo: center the phone device when sidebar is hidden ───────────────── */
@media (max-width: 900px) {
  .demo__player {
    width: 100%;
    margin: 0 auto;
  }
  .demo__device {
    margin: 0 auto;
  }
}

/* ── Demo CTA strip: tighten note on phones ─────────────────────────────── */
@media (max-width: 480px) {
  .demo__cta-strip { margin-top: 36px; }
  .demo__cta-note  { font-size: 12px; }
  .cancel-note     { display: block; margin-top: 4px; }
}

/* ── HIW: reduce number size and padding on phones ──────────────────────── */
@media (max-width: 480px) {
  .hiw__num { font-size: 30px; width: 38px; }
  .hiw__stage { padding: 14px 18px; gap: 12px; }
}

/* ── Features bento: reduce card padding on phones ──────────────────────── */
@media (max-width: 520px) {
  .feature__card { padding: 22px 18px; }
}

/* ── Compare: tighten the NightAI column on phones ─────────────────────── */
@media (max-width: 600px) {
  .compare__col--us { padding: 1.5rem; }
  .compare__proof-num { font-size: 1.5rem; }
}

/* ── Industries: hide scroll hint on very small phones ─────────────────── */
@media (max-width: 380px) {
  .industries__hint { display: none; }
}

/* ── CTA banner: much tighter padding on mobile ─────────────────────────── */
@media (max-width: 860px) {
  .cta-banner { padding-bottom: 100px; }
  .cta-banner__inner { padding: 80px 40px; }
}
@media (max-width: 540px) {
  .cta-banner { padding-bottom: 64px; }
  .cta-banner__inner {
    padding: 52px 20px;
    border-radius: 16px;
  }
  .cta-banner__inner h2 { font-size: clamp(30px, 9vw, 48px); margin-bottom: 16px; }
  .cta-banner__inner p  { font-size: 16px; margin-bottom: 36px; }
  .cta-banner__trust {
    flex-direction: column;
    gap: 6px;
  }
  .cta-banner__trust-dot { display: none; }
}

/* ── Footer: tighter on very small screens ──────────────────────────────── */
@media (max-width: 480px) {
  .footer { padding-top: 0; }
  .footer__links { gap: 28px; }
  .footer__hipaa-notice p { font-size: 11.5px; line-height: 1.6; }
}

/* ── FAQ: full-width question button on narrow phones ───────────────────── */
@media (max-width: 480px) {
  .faq__question { font-size: 14px; padding: 18px 14px; }
  .faq__answer p  { font-size: 14px; padding: 0 14px 18px; }
}

/* ── ROI compact: tighter padding on very small phones ─────────────────── */
@media (max-width: 480px) {
  .roi-compact__body { padding: 24px 16px; border-radius: 12px; }
  .roi-compact__field label { min-width: 60px; font-size: 13px; }
  .roi-compact__val { font-size: 16px; min-width: 40px; }
}

/* ── Roadmap: tighten item padding on phones ────────────────────────────── */
@media (max-width: 700px) {
  .roadmap__timeline .roadmap__item { padding: 18px 16px 18px 40px !important; margin-bottom: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Night Watch · Compare table — vs voicemail / answering svc / receptionist
   ═══════════════════════════════════════════════════════════════════════ */
.nw-compare__table {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, 1fr);
  border: 1px solid var(--border);
  background: rgba(10,13,22,0.55);
  margin: 32px 0 56px;
  font-family: var(--font);
  overflow: hidden;
}
.nw-compare__row {
  display: contents;
}
.nw-compare__cell {
  padding: 18px 16px;
  border-bottom: 1px solid rgba(200,184,122,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  position: relative;
}
.nw-compare__cell--feat {
  justify-content: flex-start;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--text);
  background: rgba(5,7,13,0.6);
  border-right: 1px solid rgba(200,184,122,0.08);
}
.nw-compare__cell--us {
  background: linear-gradient(180deg, rgba(200,184,122,0.06), rgba(200,184,122,0.02));
  border-left: 1px solid rgba(200,184,122,0.18);
  border-right: 1px solid rgba(200,184,122,0.18);
}
.nw-compare__row--head .nw-compare__cell {
  border-bottom: 1px solid rgba(200,184,122,0.18);
  background: rgba(5,7,13,0.85);
  padding-top: 22px; padding-bottom: 22px;
}
.nw-compare__row--head .nw-compare__cell--us {
  background: linear-gradient(180deg, rgba(200,184,122,0.14), rgba(200,184,122,0.04));
}
.nw-compare__opt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nw-compare__opt--us {
  color: var(--accent-1);
  font-weight: 500;
}
.nw-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(94,202,138,0.12);
  color: #5eca8a;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid rgba(94,202,138,0.25);
}
.nw-check--us {
  background: rgba(200,184,122,0.18);
  color: var(--accent-1);
  border-color: rgba(200,184,122,0.5);
  box-shadow: 0 0 14px rgba(200,184,122,0.25);
}
.nw-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(224,94,106,0.08);
  color: rgba(224,94,106,0.7);
  font-size: 18px;
  font-weight: 400;
  border: 1px solid rgba(224,94,106,0.15);
}
.nw-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(138,138,154,0.08);
  color: var(--text-muted);
  font-size: 16px;
  border: 1px solid rgba(138,138,154,0.15);
}
.nw-compare__row--cost .nw-compare__cell { padding: 26px 16px; flex-direction: column; gap: 4px; }
.nw-compare__row--cost b {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--text);
}
.nw-compare__row--cost .nw-compare__cell--us b { color: var(--accent-1); }
.nw-compare__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}
.nw-compare__row:last-child .nw-compare__cell { border-bottom: none; }

@media (max-width: 900px) {
  .nw-compare__table {
    grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(80px, 1fr));
    font-size: 12px;
  }
  .nw-compare__cell { padding: 12px 8px; }
  .nw-compare__cell--feat { font-size: 14px; }
  .nw-compare__row--cost b { font-size: 20px; }
  .nw-check, .nw-x, .nw-dash { width: 22px; height: 22px; font-size: 13px; }
  .nw-compare__opt { font-size: 9px; letter-spacing: 0.14em; }
}

/* =====================================================================
   Night Watch app surfaces: dashboard + admin
   ===================================================================== */
.dash-page,
.dash-drawer,
.dash-modal,
body .admin-layout,
body #adminSplash,
body #admin-toast {
  font-family: var(--font);
}

.dash-page h2,
.dash-page h3,
.dash-section-title,
.dash-drawer__title,
.dash-modal__title,
body .admin-main h2,
body .admin-main h3,
body .admin-page-title,
body .admin-biz-heading,
body .admin-card__title,
body .admin-section-title,
body .modal__title,
body .fin-section {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #eee6d2 !important;
  line-height: 1.18 !important;
}

.dash-section-title,
body .admin-card__title,
body .admin-section-title,
body .fin-section {
  margin-bottom: 16px;
}

.dash-today__date,
.dash-table__date,
.dash-upcoming-item__time,
.dash-upcoming-item__day,
.dash-upcoming-item__hour,
.dash-today__time,
.dash-today__time-start,
.dash-today__time-end,
.dash-cal-detail__time,
.dash-plan-bar__usage-count,
.dash-plan-bar__phone span,
.dash-drawer__field-value,
.call-id,
.call-row__id,
.call-row__time,
.timestamp,
body .retell-id-badge,
body .admin-biz-id,
body .business-id,
body .uuid,
body .admin-id,
body .call-id,
body .fin-rates,
body .admin-table td[headers*="id"],
body .fin-table td[headers*="id"] {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

.dash-stat-card__value,
.an-stat-card__value,
.bl-usage-card__value,
.bl-plan-detail__value,
body .ov-card__value,
body .fin-card__value,
body .lg-stat-card__value,
body .lg-progress-card__percent,
body .admin-nav__count {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}

.dash-stat-card__label,
.an-stat-card__label,
.bl-usage-card__label,
.bl-plan-detail__label,
body .ov-card__label,
body .fin-card__label,
body .lg-stat-card__label,
body .admin-table th,
body .fin-table th {
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #8a8a9a !important;
}

.dash-stat-card--accent .dash-stat-card__value,
.an-stat-card--accent .an-stat-card__value,
body .fin-card--green .fin-card__value,
body .fin-card--amber .fin-card__value,
body .ov-card__icon--gold,
body .ov-card__icon--green,
body .fin-margin--amber {
  background: none !important;
  -webkit-text-fill-color: #c8b87a !important;
  color: #c8b87a !important;
}

.dash-tabs {
  border-bottom: 1px solid rgba(200,184,122,0.12) !important;
}
.dash-tab,
.dash-filter-tab,
.an-range-btn {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.dash-tab--active,
.dash-tab.dash-tab--active {
  background: transparent !important;
  border-bottom: 2px solid #c8b87a !important;
  border-top-color: transparent !important;
  color: #c8b87a !important;
}
.dash-tab--active::after {
  display: none !important;
}
.dash-filter-tab.active,
.an-range-btn--active {
  background: transparent !important;
  border-color: rgba(200,184,122,0.24) !important;
  border-bottom: 2px solid #c8b87a !important;
  color: #c8b87a !important;
}
@media (max-width: 560px) {
  .dash-tab--active,
  .dash-tab.dash-tab--active {
    border-top-color: transparent !important;
    border-bottom: 2px solid #c8b87a !important;
  }
}

.dash-stat-card,
.an-stat-card,
.bl-usage-card,
.bl-plan-card,
.bl-panel,
.dash-calendar-wrap,
.dash-upcoming-wrap,
.dash-activity,
.dash-today,
.an-panel,
.an-chart-section,
body .admin-card,
body .admin-section,
body .biz-card,
body .ov-card,
body .fin-card,
body .modal {
  border-color: rgba(200,184,122,0.12) !important;
}

.dash-table,
body .admin-table,
body .fin-table {
  border-collapse: collapse !important;
}
.dash-table th,
body .admin-table th,
body .fin-table th {
  border-bottom: 1px solid rgba(200,184,122,0.12) !important;
}
.dash-table tbody tr,
body .admin-table tbody tr,
body .fin-table tbody tr {
  box-shadow: none !important;
  border-bottom: 1px solid rgba(200,184,122,0.12) !important;
}
.dash-table td,
body .admin-table td,
body .fin-table td {
  border-bottom: 0 !important;
}
.dash-table tbody tr:hover td,
body .admin-table tbody tr:hover td,
body .fin-table tbody tr:hover td {
  background: rgba(200,184,122,0.035) !important;
}
.dash-table tbody tr:last-child,
body .admin-table tbody tr:last-child,
body .fin-table tbody tr:last-child {
  border-bottom: none !important;
}

.dash-upcoming-item,
.dash-today__item,
.dash-cal-detail__item {
  box-shadow: none !important;
  border-color: rgba(200,184,122,0.12) !important;
}
.dash-today__item:hover,
.dash-upcoming-item:hover,
.dash-appt-row:hover,
.appt-row:hover {
  background: rgba(200,184,122,0.045) !important;
  border-left-color: #c8b87a !important;
  transform: none !important;
}

.dash-stat-card__icon,
.bl-usage-card__icon,
.dash-cal-day--selected,
.dash-cal-day--today,
.dash-cal-day--has-appt::after,
.dash-cal-dot--scheduled,
.dash-cal-dot--confirmed,
.badge--accent,
.dash-badge--platform,
.dash-creator-badge,
.dash-next-appt,
.dash-plan-bar__dot--live,
.dss-step--done .dss-step__circle,
.dss-connector--done,
.an-service-row__rank,
body .admin-sidebar__brand-text span,
body .admin-form-row label,
body .admin-status-row label,
body .admin-check input,
body .admin-creator-badge,
body #lg-draft-badge {
  color: #c8b87a !important;
}

.dash-creator-badge,
.dash-badge--platform,
.badge--accent,
.dash-next-appt,
.dash-action-btn--confirm,
.status-badge--confirmed,
.bl-plan-card__badge--active,
.dss-step--done .dss-step__circle,
body .admin-creator-badge,
body #lg-draft-badge {
  background: rgba(200,184,122,0.10) !important;
  border-color: rgba(200,184,122,0.24) !important;
}

.dash-cal-day--has-appt::after,
.dash-cal-dot--scheduled,
.dash-cal-dot--confirmed,
.dash-plan-bar__dot--live,
.dss-step--done .dss-step__circle,
.dss-connector--done {
  background: #c8b87a !important;
}

.dash-plan-bar__dot--live {
  animation: none !important;
  box-shadow: 0 0 8px rgba(200,184,122,0.35) !important;
}

.dash-action-btn--confirm,
.status-badge--confirmed,
.bl-plan-card__badge--active,
body .fin-margin--green {
  color: #c8b87a !important;
}

.dash-cal-day--selected,
.dash-cal-day--today {
  background: rgba(200,184,122,0.12) !important;
  color: #eee6d2 !important;
}

body .btn-admin--primary {
  background: #c8b87a !important;
  border-color: #c8b87a !important;
  color: #05070d !important;
}

body #lg-draft-badge {
  background: #c8b87a !important;
  color: #05070d !important;
}

body .admin-check input {
  accent-color: #c8b87a !important;
}

.dash-plan-bar__usage-fill,
.an-bar-row__fill,
.an-bar-row__fill--day,
.an-service-row__fill,
body .usage-bar__fill,
body .lg-progress-card__fill,
body .lg-prospect-pipeline__step--active::before {
  background: #c8b87a !important;
  box-shadow: none !important;
}

.dash-page input[type="range"],
body .admin-layout input[type="range"] {
  accent-color: #c8b87a;
}
.dash-page input[type="range"]::-webkit-slider-runnable-track,
body .admin-layout input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(200,184,122,0.26);
}
.dash-page input[type="range"]::-webkit-slider-thumb,
body .admin-layout input[type="range"]::-webkit-slider-thumb {
  background: #c8b87a;
}
.dash-page input[type="range"]::-moz-range-track,
body .admin-layout input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(200,184,122,0.26);
}
.dash-page input[type="range"]::-moz-range-thumb,
body .admin-layout input[type="range"]::-moz-range-thumb {
  background: #c8b87a;
  border-color: #c8b87a;
}

.dash-modal {
  background: #0a0d16 !important;
  border: 1px solid rgba(200,184,122,0.18) !important;
}
.retention-offer-card {
  background: rgba(200,184,122,0.08) !important;
  border-color: rgba(200,184,122,0.24) !important;
}
.dash-modal__close,
.retention-offer-card__label,
.retention-offer-card__value {
  color: #c8b87a !important;
}
.dash-modal__body,
.retention-offer-card__sub {
  color: #d6cdb5 !important;
}
.dash-input:focus,
.dash-select:focus,
.dash-textarea:focus,
.byok-input:focus,
.sched-row__time-input:focus,
.blk-add-form__date:focus,
.blk-add-form__reason:focus {
  border-color: #c8b87a !important;
  box-shadow: 0 0 0 3px rgba(200,184,122,0.08) !important;
}

body .admin-bg__grid {
  background-image:
    linear-gradient(rgba(200,184,122,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,184,122,0.025) 1px, transparent 1px) !important;
}

body .admin-sidebar__brand-text {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  color: #eee6d2 !important;
}
body .admin-nav__item {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border-color: transparent !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  color: #8a8a9a !important;
}
body .admin-nav__item:hover {
  background: rgba(200,184,122,0.04) !important;
  border-color: transparent !important;
  border-left-color: rgba(200,184,122,0.32) !important;
  color: #eee6d2 !important;
}
body .admin-nav__item--active {
  background: rgba(200,184,122,0.055) !important;
  border-color: transparent !important;
  border-left-color: #c8b87a !important;
  color: #c8b87a !important;
}
body .admin-nav__item--active::before {
  display: none !important;
}
body .admin-nav__count {
  background: rgba(200,184,122,0.10) !important;
  color: #c8b87a !important;
}
body .admin-card__title::after {
  background: linear-gradient(to right, rgba(200,184,122,0.12), transparent) !important;
}

body .ov-card__icon--blue,
body .badge--new,
body .badge--scheduled,
body .badge--confirmed,
body .badge--converted,
body .badge--completed,
body .badge--pending,
body .badge--contacted,
body .badge--active,
body .status-chip--ok,
body .billing-plan-badge--active,
body .dot--active,
body .dot--connected {
  color: #c8b87a !important;
  border-color: rgba(200,184,122,0.28) !important;
}
body .ov-card__icon--blue,
body .badge--new,
body .badge--scheduled,
body .badge--confirmed,
body .badge--converted,
body .badge--completed,
body .badge--pending,
body .badge--contacted,
body .badge--active,
body .status-chip--ok,
body .billing-plan-badge--active {
  background: rgba(200,184,122,0.10) !important;
}
body .dot--active,
body .dot--connected {
  background: #c8b87a !important;
  box-shadow: 0 0 8px rgba(200,184,122,0.35) !important;
}
body .dot--pending {
  background: #5a5e6e !important;
  color: #5a5e6e !important;
  box-shadow: none !important;
}
body .badge--lost,
body .badge--cancelled,
body .badge--no_show,
body .badge--inactive,
body .status-chip--bad,
body #admin-toast.toast--err,
body .admin-readonly-banner {
  color: var(--red, #e05e6a) !important;
  border-color: rgba(224,94,106,0.32) !important;
}
body .badge--lost,
body .badge--cancelled,
body .badge--no_show,
body .badge--inactive,
body .status-chip--bad,
body .admin-readonly-banner {
  background: rgba(224,94,106,0.08) !important;
}

body .retell-id-badge,
body .admin-biz-id,
body .business-id,
body .uuid {
  font-size: 11px !important;
  color: #5a5e6e !important;
}

/* =====================================================================
   Operational cleanup pass: dashboard + admin
   ===================================================================== */
body:has(.dash-page) .nav,
body:has(.admin-layout) .nav {
  background: rgba(5,7,13,0.96) !important;
  border-bottom: 1px solid rgba(200,184,122,0.12) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:has(.dash-page) .starfield,
body .admin-bg__grid {
  opacity: 0.28 !important;
}

.dash-page,
body .admin-layout {
  color: #d6cdb5 !important;
}

.dash-welcome {
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(200,184,122,0.12) !important;
}

.dash-welcome__title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #eee6d2 !important;
}

.dash-welcome__sub,
.dash-nav__biz,
.dash-table-note,
.dash-loading,
.dash-empty,
body .ov-card__sub,
body .biz-card__meta,
body .admin-biz-sub,
body .fin-card__sub,
body .lg-progress-card__copy,
body .lg-progress-card__scale,
body .fin-rates {
  color: #8a8a9a !important;
}

.dash-tabs {
  gap: 0 !important;
  margin-bottom: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dash-tab {
  border-radius: 0 !important;
  padding: 11px 14px 12px !important;
}

.dash-tab:hover:not(:disabled),
.dash-filter-tab:hover:not(:disabled),
.an-range-btn:hover:not(:disabled) {
  background: rgba(200,184,122,0.045) !important;
  color: #eee6d2 !important;
}

.dash-stat-card,
.an-stat-card,
.bl-usage-card,
.bl-plan-card,
.bl-panel,
.dash-calendar-wrap,
.dash-upcoming-wrap,
.dash-activity,
.dash-today,
.dash-settings-section,
.dash-booking-cta,
.an-panel,
.an-chart-section,
body .admin-card,
body .admin-section,
body .biz-card,
body .ov-card,
body .fin-card,
body .lg-stat-card,
body .lg-progress-card,
body .modal {
  background: rgba(9,12,20,0.82) !important;
  border: 1px solid rgba(200,184,122,0.12) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dash-stat-card::before,
.dash-stat-card::after,
.dash-calendar-wrap::before,
.dash-upcoming-wrap::before,
.dash-today::before,
body .ov-card::after,
body .lg-progress-card::after {
  display: none !important;
}

.dash-stat-card:hover,
.an-stat-card:hover,
.bl-usage-card:hover,
.bl-plan-card:hover,
.bl-panel:hover,
.dash-calendar-wrap:hover,
.dash-upcoming-wrap:hover,
.dash-activity:hover,
.dash-today:hover,
.dash-settings-section:hover,
.an-panel:hover,
.an-chart-section:hover,
body .admin-card:hover,
body .admin-section:hover,
body .biz-card:hover,
body .ov-card:hover,
body .fin-card:hover,
body .lg-stat-card:hover,
body .lg-progress-card:hover,
body .admin-biz-card:hover,
body .admin-metric-card:hover,
body .admin-stat:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(200,184,122,0.22) !important;
}

.dash-stat-card {
  min-height: 112px !important;
  padding: 18px 56px 18px 18px !important;
}

.dash-stat-card__icon,
body .ov-card__icon {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  margin: 0 !important;
  opacity: 0.38 !important;
}

.dash-stat-card__value {
  font-size: 30px !important;
  margin: 16px 0 7px !important;
}

.dash-stat-card__label,
body .ov-card__label,
body .fin-card__label,
body .lg-stat-card__label {
  line-height: 1.35 !important;
}

.dash-sparkline {
  opacity: 0.82 !important;
}

.dash-plan-bar {
  background: rgba(9,12,20,0.74) !important;
  border: 1px solid rgba(200,184,122,0.12) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  margin-bottom: 24px !important;
}

.dash-plan-bar__tier-icon,
.dash-plan-bar__phone,
.dash-next-appt,
.dash-booking-cta__icon {
  background: rgba(200,184,122,0.08) !important;
  border: 1px solid rgba(200,184,122,0.16) !important;
  border-radius: 6px !important;
  color: #c8b87a !important;
  box-shadow: none !important;
}

.dash-plan-bar__tier-label,
.dash-plan-bar__usage-label,
.dss-step__label,
body .lg-progress-card__kicker,
body .lg-progress-card__percent-label {
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #8a8a9a !important;
}

.dash-plan-bar__tier-value,
.dash-plan-bar__status,
.dash-cal-month,
body .lg-progress-card__title {
  color: #eee6d2 !important;
}

.dash-plan-bar__usage-track,
body .usage-bar,
body .lg-progress-card__bar,
body .lg-progress-card__segment--empty {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(200,184,122,0.10) !important;
  box-shadow: none !important;
}

.dss-step__circle {
  border-width: 1px !important;
  background: rgba(255,255,255,0.035) !important;
  box-shadow: none !important;
}

.dss-step--active .dss-step__circle,
.dss-step--done .dss-step__circle {
  animation: none !important;
  box-shadow: none !important;
}

.dash-panel-header {
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(200,184,122,0.10) !important;
}

.dash-today__list,
.dash-upcoming-list {
  gap: 0 !important;
}

.dash-today__item,
.dash-upcoming-item,
.dash-cal-detail__item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(200,184,122,0.12) !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
}

.dash-today__item:last-child,
.dash-upcoming-item:last-child,
.dash-cal-detail__item:last-child {
  border-bottom: 0 !important;
}

.dash-today__item:hover,
.dash-upcoming-item:hover,
.dash-cal-detail__item:hover,
.dash-appt-row:hover,
.appt-row:hover {
  background: rgba(200,184,122,0.04) !important;
  border-left-color: #c8b87a !important;
  transform: none !important;
}

.dash-today__name,
.dash-upcoming-item__name,
body .biz-card__name,
body .lg-company-name,
body .lg-email-cell {
  color: #eee6d2 !important;
}

.dash-today__reason,
.dash-upcoming-item__reason,
body .lg-company-meta {
  color: #8a8a9a !important;
}

.dash-calendar {
  gap: 3px !important;
}

.dash-cal-head {
  color: #5a5e6e !important;
}

.dash-cal-day {
  border-radius: 4px !important;
  color: #8a8a9a !important;
}

.dash-cal-day--selected,
.dash-cal-day--today,
.dash-cal-day--has-appt {
  color: #eee6d2 !important;
}

.dash-cal-nav-btn,
.dash-cal-detail__close,
body .pagination button {
  background: transparent !important;
  border: 1px solid rgba(200,184,122,0.14) !important;
  border-radius: 6px !important;
  color: #8a8a9a !important;
  box-shadow: none !important;
}

.dash-cal-nav-btn:hover,
.dash-cal-detail__close:hover,
body .pagination button:hover:not(:disabled) {
  background: rgba(200,184,122,0.06) !important;
  border-color: rgba(200,184,122,0.28) !important;
  color: #c8b87a !important;
}

.dash-table,
body .admin-table,
body .fin-table,
body .lg-table {
  background: transparent !important;
}

.dash-table th,
body .admin-table th,
body .fin-table th,
body .lg-table th {
  background: rgba(200,184,122,0.035) !important;
  padding: 11px 12px !important;
  color: #8a8a9a !important;
}

.dash-table td,
body .admin-table td,
body .fin-table td,
body .lg-table td {
  padding: 12px !important;
  color: #d6cdb5 !important;
}

.dash-table tbody tr,
body .admin-table tbody tr,
body .fin-table tbody tr,
body .lg-table tbody tr {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(200,184,122,0.12) !important;
}

.dash-table tbody tr:hover td,
body .admin-table tbody tr:hover td,
body .fin-table tbody tr:hover td,
body .lg-table tbody tr:hover td {
  background: rgba(200,184,122,0.04) !important;
}

body:has(.dash-page) .status-badge,
.dash-page .dash-badge,
.dash-page .badge,
body:has(.admin-layout) .badge,
body:has(.admin-layout) .status-chip,
body:has(.admin-layout) .billing-plan-badge,
body:has(.admin-layout) .biz-card__plan,
body:has(.admin-layout) .admin-sidebar__badge,
body:has(.admin-layout) .retell-id-badge {
  border-radius: 999px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body .admin-sidebar {
  background: rgba(6,8,14,0.98) !important;
  border-right: 1px solid rgba(200,184,122,0.12) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body .admin-sidebar__brand {
  border-bottom: 1px solid rgba(200,184,122,0.12) !important;
  gap: 12px !important;
  justify-content: space-between !important;
  padding: 18px 18px 16px !important;
}

body .admin-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: #eee6d2 !important;
  text-decoration: none !important;
}

body .admin-brand-lockup__mark {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(200,184,122,0.18) !important;
  border-radius: 8px !important;
  background: rgba(200,184,122,0.07) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  box-shadow: inset 0 1px 0 rgba(238,230,210,0.05) !important;
}

body .admin-brand-lockup__mark img {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

body .admin-brand-lockup__name {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: #eee6d2 !important;
  white-space: nowrap !important;
}

body .admin-brand-lockup__name span {
  color: #c8b87a !important;
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  margin-left: -2px !important;
  text-shadow: none !important;
}

body .admin-sidebar__badge {
  background: transparent !important;
  border: 1px solid rgba(200,184,122,0.18) !important;
  color: #c8b87a !important;
  flex: 0 0 auto !important;
}

body .admin-splash-logo.admin-brand-lockup {
  justify-content: center !important;
  gap: 12px !important;
}

body .admin-splash-logo .admin-brand-lockup__mark {
  width: 42px !important;
  height: 42px !important;
}

body .admin-splash-logo .admin-brand-lockup__mark img {
  width: 24px !important;
  height: 24px !important;
}

body .admin-splash-logo .admin-brand-lockup__name {
  font-size: 28px !important;
}

body .admin-nav {
  padding-top: 10px !important;
}

body .admin-nav__item {
  min-height: 38px !important;
  margin-bottom: 1px !important;
  padding: 9px 12px !important;
}

body .admin-nav__item svg,
body .admin-nav__icon {
  opacity: 0.62 !important;
}

body .admin-nav__item--active svg,
body .admin-nav__item--active .admin-nav__icon {
  opacity: 1 !important;
}

body .admin-main {
  color: #d6cdb5 !important;
}

body .admin-page-title {
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(200,184,122,0.12) !important;
}

body .overview-grid,
body .fin-cards,
body .lg-stats-row {
  margin-bottom: 22px !important;
}

body .ov-card,
body .fin-card,
body .lg-stat-card {
  min-height: 112px !important;
}

body .ov-card__icon {
  width: 34px !important;
  height: 34px !important;
  background: transparent !important;
  border: 1px solid rgba(200,184,122,0.14) !important;
}

body .ov-card__value,
body .fin-card__value,
body .lg-stat-card__value,
body .lg-progress-card__percent {
  color: #eee6d2 !important;
  -webkit-text-fill-color: #eee6d2 !important;
}

body .biz-card__dot,
body .dot--active,
body .dot--connected,
body .dot--pending {
  box-shadow: none !important;
}

body .dot--pending,
body .badge--pending {
  color: #8a8a9a !important;
  border-color: rgba(90,94,110,0.42) !important;
  background: rgba(90,94,110,0.12) !important;
}

body .admin-card__title::after,
body .admin-section-title::after {
  background: rgba(200,184,122,0.12) !important;
}

.dash-page .btn,
body:has(.admin-layout) .btn,
body .btn-admin,
.dash-action-btn,
.dash-filter-tab,
.an-range-btn {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.dash-page .btn:hover,
body:has(.admin-layout) .btn:hover,
body .btn-admin:hover,
.dash-action-btn:hover,
.dash-filter-tab:hover,
.an-range-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

body .btn-admin--success {
  background: #c8b87a !important;
  color: #05070d !important;
}

body .btn-admin--danger,
body .btn-admin[style*="var(--red)"] {
  background: var(--red, #e05e6a) !important;
  border-color: var(--red, #e05e6a) !important;
  color: #fff !important;
}

.dash-input,
.dash-select,
.dash-textarea,
.dash-cal-sync-detail__url,
.byok-input,
.sched-row__time-input,
.blk-add-form__date,
.blk-add-form__reason,
body .inline-select,
body .biz-search-bar input,
body .admin-form-row input,
body .admin-form-row select,
body .admin-form-row textarea,
body .admin-status-row select,
body .lead-notes,
body #system-output {
  background: rgba(5,7,13,0.74) !important;
  border: 1px solid rgba(200,184,122,0.14) !important;
  border-radius: 6px !important;
  color: #eee6d2 !important;
  box-shadow: none !important;
}

.dash-input::placeholder,
.dash-textarea::placeholder,
body .biz-search-bar input::placeholder,
body .admin-form-row input::placeholder,
body .admin-form-row textarea::placeholder,
body .lead-notes::placeholder {
  color: #5a5e6e !important;
}

.dash-input:focus,
.dash-select:focus,
.dash-textarea:focus,
.dash-cal-sync-detail__url:focus,
.byok-input:focus,
.sched-row__time-input:focus,
.blk-add-form__date:focus,
.blk-add-form__reason:focus,
body .inline-select:focus,
body .biz-search-bar input:focus,
body .admin-form-row input:focus,
body .admin-form-row select:focus,
body .admin-form-row textarea:focus,
body .admin-status-row select:focus,
body .lead-notes:focus {
  border-color: rgba(200,184,122,0.42) !important;
  box-shadow: 0 0 0 3px rgba(200,184,122,0.08) !important;
  outline: none !important;
}

body .lg-progress-card__stagebar,
body .lg-progress-card__legend,
body .lg-prospect-pipeline,
body .lg-summary-pill,
body .lg-draft-card,
body .admin-readonly-banner,
.dash-cal-detail {
  background: rgba(5,7,13,0.54) !important;
  border: 1px solid rgba(200,184,122,0.12) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body .lg-progress-card__fill,
body .lg-progress-card__legend-dot,
body .lg-prospect-pipeline__step--done::before,
body .lg-prospect-pipeline__step--active::before,
.dash-plan-bar__usage-fill,
body .usage-bar__fill {
  background: #c8b87a !important;
}

body:has(.admin-layout) .enc-warning,
body:has(.admin-layout) #admin-toast.toast--err,
body:has(.admin-layout) .badge--lost,
body:has(.admin-layout) .badge--cancelled,
body:has(.admin-layout) .badge--no_show,
body:has(.admin-layout) .badge--inactive,
body:has(.admin-layout) .status-chip--bad,
body:has(.dash-page) .status-badge--cancelled,
body:has(.dash-page) .status-badge--noshow {
  color: var(--red, #e05e6a) !important;
  border-color: rgba(224,94,106,0.32) !important;
  background: rgba(224,94,106,0.08) !important;
}

@media (max-width: 600px) {
  .dash-stat-card {
    padding-right: 18px !important;
  }

  .dash-stat-card__icon,
  body .ov-card__icon {
    position: static !important;
    margin-bottom: 12px !important;
  }

  .dash-panel-header {
    align-items: flex-start !important;
  }
}

/* Dashboard mobile layout hardening */
@media (max-width: 760px) {
  body:has(.dash-page) {
    overflow-x: hidden;
  }

  .dash-page {
    padding: 72px 0 40px !important;
  }

  .dash-page .container {
    width: 100%;
    max-width: none;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .dash-nav__right {
    gap: 8px;
    min-width: 0;
  }

  .dash-nav__biz {
    max-width: 28vw;
    font-size: 12px;
  }

  .dash-nav__right .btn,
  .dash-refresh-btn {
    min-height: 34px;
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  .dash-tabs {
    flex-wrap: nowrap !important;
    gap: 6px;
    margin: 0 -14px 22px;
    padding: 0 14px 8px;
    overflow-x: auto;
    border-bottom: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dash-tabs::-webkit-scrollbar {
    display: none;
  }

  .dash-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 13px 10px !important;
    border: 1px solid rgba(200,184,122,.14);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    margin-bottom: 0;
  }

  .dash-tab--active,
  .dash-tab.dash-tab--active {
    background: rgba(200,184,122,.11);
    border-color: rgba(200,184,122,.32);
  }

  .dash-tab--active::after {
    display: none;
  }

  .dash-welcome {
    gap: 12px;
    margin-bottom: 20px;
  }

  .dash-welcome__text,
  .dash-welcome__actions,
  .dash-next-appt {
    width: 100%;
    min-width: 0;
  }

  .dash-welcome__title {
    font-size: 24px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .dash-welcome__sub {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .dash-plan-bar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 10px !important;
  }

  .dash-plan-bar__left {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dash-plan-bar__status,
  .dash-plan-bar__phone,
  .dash-plan-bar__usage,
  .dash-setup-steps {
    width: 100%;
    min-width: 0;
  }

  .dash-plan-bar__phone {
    justify-content: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dash-plan-bar__usage {
    max-width: none;
  }

  .dash-setup-steps {
    justify-content: space-between;
    overflow: hidden;
  }

  .dash-stats,
  .an-stats,
  .bl-statement-summary,
  .bl-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dash-stat-card,
  .an-stat-card,
  .bl-usage-card {
    padding: 16px 14px !important;
    border-radius: 10px !important;
  }

  .dash-stat-card__value,
  .an-stat-card__value,
  .bl-statement-metric__value,
  .bl-usage-card__value {
    font-size: 26px !important;
  }

  .dash-calendar-wrap,
  .dash-upcoming-wrap,
  .dash-activity,
  .dash-today,
  .an-panel,
  .an-chart-section,
  .bl-panel,
  .bl-plan-card,
  .dash-settings-section,
  .byok-card {
    padding: 16px !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
  }

  .dash-panel-header,
  .bl-plan-card__header,
  .integ-status-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }

  .dash-panel-header > div,
  .dash-panel-header .dash-filter-tabs,
  .integ-actions,
  .integ-booking-link-row,
  .dash-cal-sync-detail__url-row {
    width: 100%;
  }

  .dash-section-title {
    font-size: 15px;
    line-height: 1.25;
  }

  .dash-calendar-nav {
    width: 100%;
    justify-content: space-between;
  }

  .dash-cal-month {
    flex: 1;
    min-width: 0;
    font-size: 13px;
  }

  .dash-calendar {
    gap: 3px;
  }

  .dash-cal-head {
    font-size: 9px;
    letter-spacing: 0;
  }

  .dash-cal-day {
    min-height: 34px;
    padding: 7px 0 5px;
    border-radius: 7px;
  }

  .dash-today__item,
  .dash-upcoming-item,
  .dash-cal-detail__item {
    align-items: flex-start;
  }

  .dash-today__actions,
  .dash-cal-detail__actions,
  .dash-table__actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .dash-action-btn,
  .dash-cal-sync__btn,
  .integ-actions .btn,
  .integ-booking-link-row .btn,
  .dash-cal-sync-detail__url-row .btn {
    min-height: 34px;
    justify-content: center;
  }

  .dash-filter-tabs {
    margin: 0 -2px 12px;
  }

  .dash-filter-tab,
  .an-range-btn {
    flex: 0 0 auto;
    min-height: 34px;
  }

  .dash-table {
    min-width: 620px;
  }

  .dash-activity {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .an-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .an-chart-wrap canvas {
    min-width: 520px;
  }

  .an-two-col {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .an-bar-row,
  .an-service-row {
    gap: 8px;
  }

  .an-service-row__name {
    width: 96px !important;
  }

  .bl-plan-card__details,
  .bl-statement-summary,
  .byok-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .bl-plan-detail {
    text-align: left;
  }

  .bl-api-usage-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bl-api-usage-row {
    min-width: 500px;
  }

  .integ-actions,
  .integ-booking-link-row,
  .dash-cal-sync-detail__url-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .integ-booking-link-input,
  .dash-cal-sync-detail__url,
  .byok-input,
  .dash-input,
  .dash-select,
  .dash-textarea {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .dash-nav__biz {
    display: none;
  }

  .dash-nav__right {
    margin-left: auto;
  }

  .dash-nav__right .btn:not(.dash-refresh-btn) {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .dash-page {
    padding-top: 66px !important;
  }

  .dash-tabs {
    margin-bottom: 18px;
  }

  .dash-welcome__title {
    font-size: 22px;
  }

  .dash-stats,
  .an-stats,
  .bl-statement-summary,
  .bl-usage-grid {
    grid-template-columns: 1fr !important;
  }

  .bl-line-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .bl-line-item strong {
    text-align: left;
  }

  .dash-stat-card {
    min-height: auto;
  }

  .dash-today__time {
    align-items: flex-start;
    min-width: 58px;
  }

  .dash-upcoming-item {
    flex-wrap: wrap;
  }

  .dash-cal-detail__item {
    flex-wrap: wrap;
  }

  .bl-payment-placeholder {
    flex-direction: column;
    padding: 16px;
  }
}

@media (max-width: 380px) {
  .dash-page .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .dash-nav__right {
    gap: 6px;
  }

  .dash-nav__right .btn:not(.dash-refresh-btn) {
    font-size: 11px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .dash-refresh-btn {
    width: 34px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dash-refresh-btn span,
  .dash-refresh-btn .btn__label {
    display: none;
  }
}

/* ── Call & SMS Log ─────────────────────────────────────────────────────── */
.calls-biz-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(200,184,122,0.2);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.calls-biz-tab:hover {
  background: rgba(200,184,122,0.06);
  border-color: rgba(200,184,122,0.35);
  color: var(--gold);
}
.calls-biz-tab--active {
  background: rgba(200,184,122,0.12);
  border-color: rgba(200,184,122,0.5);
  color: var(--gold);
}
.calls-chip {
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid rgba(200,184,122,0.2);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.calls-chip:hover {
  background: rgba(200,184,122,0.06);
  border-color: rgba(200,184,122,0.35);
  color: var(--gold);
}
.calls-chip--active {
  background: rgba(200,184,122,0.12);
  border-color: rgba(200,184,122,0.5);
  color: var(--gold);
}
.call-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.call-detail-grid__full {
  grid-column: 1 / -1;
}
.call-detail-field {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,184,122,0.12);
  border-radius: 8px;
  padding: 12px 14px;
}
.call-detail-field__label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.call-detail-field__value {
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  font-family: inherit;
}
.call-detail-field__value--mono {
  font-family: monospace;
  font-size: 12px;
  color: #a0c4a0;
  word-break: break-all;
}
.call-detail-field__value--muted {
  color: var(--text-muted);
}