/* =========================================================================
   Convi — Design tokens + semantic type
   Import: @import url('./colors_and_type.css');
   ========================================================================= */

/* Webfonts — loaded from Google Fonts.
   If you drop TTF files into ./fonts/, replace this with local @font-face rules. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand palette ---------- */
  --indigo-50:  #FBE4F6;
  --indigo-100: #F6C9EE;
  --indigo-200: #EE9CE0;
  --indigo-300: #E667D0;
  --indigo-400: #D63BB8;
  --indigo-500: #9C1794;
  --indigo-600: #820076;   /* PRIMARY — brand magenta */
  --indigo-700: #5C0055;
  --indigo-800: #40003C;
  --indigo-900: #250022;

  --accent-bright: #EC1FA8;  /* bright pink accent for dark-banner highlight words */

  --teal-50:  #EDFCF8;
  --teal-100: #D0F7EC;
  --teal-300: #5EE1C4;
  --teal-500: #14B8A6;     /* positive / send-action */
  --teal-700: #0F766E;

  --rose-50:  #FFF1F3;
  --rose-300: #FDA4AF;
  --rose-500: #F43F5E;     /* negative */
  --rose-700: #BE123C;

  --amber-500: #F59E0B;    /* warning */

  /* ---------- Neutrals ---------- */
  --white:   #FFFFFF;
  --mist:    #F4F6FB;      /* app background, light */
  --cloud:   #EEF1F7;      /* dividers, subtle fills */
  --stone-100: #E6E9F2;    /* card border, light */
  --stone-200: #CFD4E0;
  --stone-300: #A9B0C1;
  --stone-400: #8992A6;
  --slate-500: #5B6478;
  --slate-600: #434B5E;
  --slate-700: #2D3346;
  --slate-800: #1A1F30;
  --slate-900: #111827;
  --ink:     #2E0129;      /* deep plum-black — video/demo panels */

  /* ---------- Semantic (light mode defaults) ---------- */
  --bg:           var(--mist);
  --surface:      var(--white);
  --surface-2:    var(--cloud);
  --border:       var(--stone-100);
  --border-strong:var(--stone-200);
  --divider:      var(--cloud);

  --fg-1:         var(--slate-900);  /* primary text */
  --fg-2:         var(--slate-600);  /* secondary / icon default */
  --fg-3:         var(--stone-400);  /* placeholder / caption */
  --fg-on-primary:var(--white);

  --primary:      var(--indigo-600);
  --primary-hover:var(--indigo-500);
  --primary-press:var(--indigo-700);
  --primary-soft: var(--indigo-50);   /* chip / selected row bg */
  --primary-container: var(--indigo-50);
  --on-primary-container: var(--indigo-600);

  --positive:     var(--teal-500);
  --positive-soft:var(--teal-50);
  --negative:     var(--rose-500);
  --negative-soft:var(--rose-50);
  --warning:      var(--amber-500);

  /* ---------- Spacing (4px grid) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;   /* cards, buttons */
  --r-xl: 24px;   /* sheets, FAB bg */
  --r-pill: 9999px;

  /* ---------- Elevation ---------- */
  /* Glossy card: downward shadow + 1px inset top highlight. */
  --shadow-card:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 4px 12px rgba(17, 24, 39, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-lifted:
    0 2px 6px rgba(17, 24, 39, 0.06),
    0 8px 24px rgba(17, 24, 39, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-fab:
    0 6px 14px rgba(130, 0, 118, 0.36),
    0 2px 4px rgba(130, 0, 118, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --shadow-focus: 0 0 0 3px rgba(130, 0, 118, 0.18);

  /* ---------- Glossy gradients (used on buttons, FAB, splash) ---------- */
  --grad-primary: linear-gradient(135deg, #820076 0%, #EC1FA8 100%);
  --grad-primary-press: linear-gradient(135deg, #5C0055 0%, #C71890 100%);
  --grad-splash: radial-gradient(120% 80% at 50% 20%, #C71890 0%, #820076 45%, #40003C 100%);
  --grad-card-gloss: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 40%);

  /* ---------- Liquid-glass ---------- */
  /* Subtle app background hue so blur has something to blur. */
  --grad-app-bg: radial-gradient(70% 50% at 20% 0%, rgba(130,0,118,0.10) 0%, rgba(130,0,118,0) 60%),
                 radial-gradient(60% 40% at 85% 10%, rgba(236,31,168,0.10) 0%, rgba(236,31,168,0) 60%),
                 var(--mist);
  --glass-bg: rgba(255,255,255,0.62);
  --glass-bg-strong: rgba(255,255,255,0.78);
  --glass-border: rgba(255,255,255,0.6);
  --glass-blur: saturate(1.6) blur(20px);
  --glass-highlight: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0) 45%);
  --shadow-glass:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 8px 24px rgba(17, 24, 39, 0.08);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --dur-screen: 320ms;

  /* ---------- Type ---------- */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-44: 44px;
}

/* ---------- Dark mode ---------- */
[data-theme='dark'] {
  --bg:           var(--ink);
  --surface:      var(--slate-900);
  --surface-2:    var(--slate-800);
  --border:       rgba(255, 255, 255, 0.06);
  --border-strong:rgba(255, 255, 255, 0.12);
  --divider:      rgba(255, 255, 255, 0.06);

  --fg-1:         #F2F4FA;
  --fg-2:         #A9B0C1;
  --fg-3:         #6B7389;
  --primary-soft: rgba(79, 70, 229, 0.18);
  --positive-soft:rgba(20, 184, 166, 0.14);
  --negative-soft:rgba(244, 63, 94, 0.14);

  --shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-lifted:
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --grad-card-gloss: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 40%);
}

/* =========================================================================
   Semantic type classes
   ========================================================================= */

.h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-32);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: 1.25;
  font-weight: 600;
  color: var(--fg-1);
}
.title {
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  line-height: 1.3;
  font-weight: 600;
  color: var(--fg-1);
}
.body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg-1);
}
.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: 1.3;
  font-weight: 500;
  color: var(--fg-2);
}

/* Currency codes (USD, PKR) */
.code {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Numbers — tabular, never shift width */
.num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--fg-1);
}
.num-lg {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.1;
  color: var(--fg-1);
}
.num-xl {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--fs-28);
  line-height: 1.05;
  color: var(--fg-1);
}

.num.pos { color: var(--positive); }
.num.neg { color: var(--negative); }

/* =========================================================================
   Shared layout & component primitives
   ========================================================================= */

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

.sm-container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 640px) {
  .sm-container { padding-inline: 20px; }
}

.sm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-slow) var(--ease-standard),
              box-shadow var(--dur-slow) var(--ease-standard);
}
.sm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lifted);
}

/* Shared site nav — used identically by index.html and pricing.html so the
   header never differs between pages. */
.sm-nav-link { position: relative; padding-bottom: 4px; text-decoration: none; }
.sm-nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-standard); }
.sm-nav-link:hover::after, .sm-nav-link[data-active="true"]::after { transform: scaleX(1); }
.sm-nav-link-no-underline::after { display: none; }
.sm-nav-link[data-active="true"] { color: var(--primary) !important; }

.sm-btn-primary { text-decoration: none; }

.sm-nav-hamburger { display: none; }
#mobile-menu { display: none; }
#mobile-menu.open { display: flex; }
#mobile-menu a { text-decoration: none; }
@media (max-width: 640px) {
  .sm-nav-links-desktop { display: none !important; }
  .sm-nav-hamburger { display: flex !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* INLINE CSS FROM INDEX */
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); }
  a { color: var(--primary); text-decoration: none; }
  a:hover { color: var(--primary-hover); }
  .sm-btn-primary { transition: filter var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
  .sm-btn-primary:hover { filter: brightness(1.05); transform: scale(1.03); }
  .sm-btn-primary:active { transform: scale(0.97); }
  .sm-btn-secondary { transition: background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
  .sm-btn-secondary:hover { background: var(--surface-2); transform: scale(1.02); }
  .sm-btn-secondary:active { transform: scale(0.97); }
  .sm-card { transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
  .sm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lifted); }
  .sm-faq-summary:hover { background: var(--surface-2); }
  .sm-faq-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
  .sm-faq-details:last-child { border-bottom: none !important; }
  .sm-logo-slot image-slot { filter: grayscale(1) opacity(0.7); transition: filter var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
  .sm-logo-wrap:hover image-slot { filter: grayscale(0) opacity(1); transform: scale(1.05); }
  html { scroll-behavior: smooth; }
  .sm-anchor-target { scroll-margin-top: 90px; }
  .sm-logo-chip { box-sizing: border-box; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; padding: 10px 14px; filter: grayscale(1) opacity(0.7); transition: filter var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
  .sm-logo-wrap:hover .sm-logo-chip { filter: grayscale(0) opacity(1); transform: scale(1.05); }
  .sm-nav-link { position: relative; padding-bottom: 4px; }
  .sm-nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-standard); }
  .sm-nav-link:hover::after, .sm-nav-link[data-active="true"]::after { transform: scaleX(1); }
  .sm-nav-link-no-underline::after { display: none; }
  #top { background: var(--grad-app-bg); background-size: 200% 200%; animation: sm-hero-shift 16s ease-in-out infinite; }
  @keyframes sm-hero-shift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
  @keyframes sm-pulse-glow { 0%, 100% { box-shadow: var(--shadow-fab); transform: scale(1); } 50% { box-shadow: 0 0 0 14px rgba(79,70,229,0.10), var(--shadow-fab); transform: scale(1.04); } }
  .sm-play-btn { animation: sm-pulse-glow 2.8s ease-in-out infinite; }
  @keyframes sm-typing-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-3px); opacity: 1; } }
  .sm-typing-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
  .sm-typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-3); display: inline-block; animation: sm-typing-dot 1.2s ease-in-out infinite; }
  .sm-typing-dots span:nth-child(2) { animation-delay: .15s; }
  .sm-typing-dots span:nth-child(3) { animation-delay: .3s; }
  .sm-node-connector { position: relative; }
  .sm-flow-dot { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 6px 2px rgba(79,70,229,0.35); transform: translate(-50%,-50%); animation: sm-flow-move 2.6s linear infinite; animation-delay: var(--flow-delay, 0s); }
  @keyframes sm-flow-move { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
  @media (max-width: 640px) {
    .sm-flow-dot { left: 50%; animation-name: sm-flow-move-v; }
    @keyframes sm-flow-move-v { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  }
  .sm-chat-step { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease-standard), transform 0.4s var(--ease-standard); }
  .sm-chat-step.sm-step-visible { opacity: 1; transform: translateY(0); }
  .sm-reveal-init > div { opacity: 0; transform: translateY(20px); }
  .sm-reveal-init .sm-card, .sm-reveal-init .sm-logo-wrap, .sm-reveal-init .sm-faq-details, .sm-reveal-init .sm-free-item, .sm-reveal-init .sm-node-item { opacity: 0; transform: translateY(16px); }
  .sm-reveal-init.sm-reveal-visible > div { opacity: 1; transform: translateY(0); transition: opacity 0.56s cubic-bezier(0.16,1,0.3,1), transform 0.56s cubic-bezier(0.16,1,0.3,1); }
  .sm-reveal-init.sm-reveal-visible .sm-card, .sm-reveal-init.sm-reveal-visible .sm-logo-wrap, .sm-reveal-init.sm-reveal-visible .sm-faq-details, .sm-reveal-init.sm-reveal-visible .sm-free-item, .sm-reveal-init.sm-reveal-visible .sm-node-item { opacity: 1; transform: translateY(0); transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1) var(--rd, 0ms), transform 0.5s cubic-bezier(0.16,1,0.3,1) var(--rd, 0ms); }
  .sm-reveal-init .sm-card:nth-child(1), .sm-reveal-init .sm-logo-wrap:nth-child(1), .sm-reveal-init .sm-faq-details:nth-child(1), .sm-reveal-init .sm-free-item:nth-child(1), .sm-reveal-init .sm-node-item:nth-child(1) { transition-delay: 0ms; }
  .sm-reveal-init .sm-card:nth-child(2), .sm-reveal-init .sm-logo-wrap:nth-child(2), .sm-reveal-init .sm-faq-details:nth-child(2), .sm-reveal-init .sm-free-item:nth-child(2), .sm-reveal-init .sm-node-item:nth-child(2) { transition-delay: 80ms; }
  .sm-reveal-init .sm-card:nth-child(3), .sm-reveal-init .sm-logo-wrap:nth-child(3), .sm-reveal-init .sm-faq-details:nth-child(3), .sm-reveal-init .sm-free-item:nth-child(3), .sm-reveal-init .sm-node-item:nth-child(3) { transition-delay: 160ms; }
  .sm-reveal-init .sm-card:nth-child(4), .sm-reveal-init .sm-logo-wrap:nth-child(4), .sm-reveal-init .sm-faq-details:nth-child(4), .sm-reveal-init .sm-free-item:nth-child(4), .sm-reveal-init .sm-node-item:nth-child(4) { transition-delay: 240ms; }
  .sm-reveal-init .sm-card:nth-child(5), .sm-reveal-init .sm-logo-wrap:nth-child(5), .sm-reveal-init .sm-faq-details:nth-child(5), .sm-reveal-init .sm-free-item:nth-child(5), .sm-reveal-init .sm-node-item:nth-child(5) { transition-delay: 320ms; }
  .sm-reveal-init .sm-logo-wrap:nth-child(6) { transition-delay: 400ms; }
  .sm-reveal-init .sm-logo-wrap:nth-child(7) { transition-delay: 480ms; }
  .sm-reveal-init .sm-logo-wrap:nth-child(8) { transition-delay: 560ms; }
  .sm-reveal-init .sm-logo-wrap:nth-child(9) { transition-delay: 640ms; }
  .sm-reveal-init .sm-logo-wrap:nth-child(10) { transition-delay: 720ms; }
  .sm-lang-step { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease-standard), transform 0.4s var(--ease-standard); }
  .sm-lang-step.sm-step-visible { opacity: 1; transform: translateY(0); }
  .sm-lang-translated { opacity: 0; transition: opacity 0.3s var(--ease-standard); }
  .sm-lang-translated.sm-step-visible { opacity: 1; }
  .sm-wave-bar { width: 2px; background: rgba(255,255,255,0.85); border-radius: 1px; flex-shrink: 0; transform-origin: center; }
  .sm-waveform-2 .sm-wave-bar { background: rgba(130,0,118,0.4); }
  .sm-wave-playing .sm-wave-bar { animation: sm-wave-pulse 0.9s ease-in-out infinite; }
  @keyframes sm-wave-pulse { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
  .sm-wave-bar:nth-child(2n) { animation-delay: 0.1s; }
  .sm-wave-bar:nth-child(3n) { animation-delay: 0.2s; }
  .sm-wave-bar:nth-child(4n) { animation-delay: 0.3s; }
  .sm-lang-yes-btn { transition: transform 0.15s var(--ease-standard), background 0.15s var(--ease-standard), color 0.15s var(--ease-standard); }
  .sm-lang-yes-btn.sm-lang-tap { background: var(--grad-primary); color: white; transform: scale(0.94); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
  .sm-logo-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .sm-logo-wrap { min-width: 0; }
  .sm-grid-2 > *, .sm-grid-4 > *, .sm-grid-5 > *, .sm-grid-5-logos > * { min-width: 0; }
  .sm-nav-hamburger { display: none; }
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
  .sm-nav-link[data-active="true"] { color: var(--primary) !important; }
  @media (max-width: 640px) {
    .sm-footer-logo { height: 26px !important; }
    :root { --fs-44: 30px; --fs-32: 24px; --fs-28: 22px; --fs-20: 18px; --fs-17: 16px; }
    section, nav, footer { padding-left: 20px !important; padding-right: 20px !important; }
    section { padding-top: 56px !important; padding-bottom: 56px !important; }
    #top { padding-top: 64px !important; padding-bottom: 48px !important; }
    .sm-nav-links-desktop { display: none !important; }
    .sm-nav-hamburger { display: flex !important; }
    .sm-hero-btnrow { flex-direction: column !important; align-items: stretch !important; }
    .sm-hero-btnrow > a { width: 100%; box-sizing: border-box; justify-content: center; }
    .sm-grid-2, .sm-grid-4 { grid-template-columns: 1fr !important; }
    .sm-grid-5 { grid-template-columns: repeat(2,1fr) !important; }
    .sm-grid-5-logos { grid-template-columns: repeat(2,1fr) !important; }
    .sm-phones-3 { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 82% !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
    .sm-phones-3 > div { scroll-snap-align: center; }
    .sm-node-chain { flex-direction: column !important; }
    .sm-node-chain .sm-node-connector { width: 2px !important; height: 20px !important; }
    h1 { font-size: clamp(30px, 9vw, 56px) !important; }
  }
  @media (min-width: 641px) and (max-width: 1024px) {
    .sm-grid-4 { grid-template-columns: repeat(2,1fr) !important; }
    .sm-grid-5 { grid-template-columns: repeat(3,1fr) !important; }
    .sm-grid-5-logos { grid-template-columns: repeat(3,1fr) !important; }
  }

/* PRICING CSS */
/* =========================================================================
   pricing.html — connected plan builder + visual design pass
   Tokens/typography/.sm-card/.sm-container come from colors_and_type.css
   ========================================================================= */

body {
  margin: 0;
  background: var(--grad-app-bg);
  font-family: var(--font-sans);
}

/* Explicit fallback for the native closed-<details> hiding rule — this
   engine wasn't applying it, leaving the Compare table wide enough to
   cause horizontal page overflow even while visually collapsed. */
details:not([open]) > *:not(summary) { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              filter var(--dur-base) var(--ease-standard);
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.btn-primary {
  background: var(--grad-primary);
  color: var(--fg-on-primary);
  box-shadow: var(--shadow-fab);
}
.btn-select {
  width: 100%;
  margin-top: 24px;
  background: var(--surface);
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-select:hover { background: var(--primary-soft); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---------- Section rhythm ---------- */
.section { padding-top: 48px; padding-bottom: 48px; }
@media (max-width: 640px) {
  .section { padding-top: 28px; padding-bottom: 28px; }
  .sm-footer-logo { height: 26px !important; }
}

.section-header { max-width: 640px; margin-bottom: 32px; }
.eyebrow {
  display: block;
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.section-sub { margin-top: 8px; }
.accent-text { color: var(--primary); }

/* ---------- Gradient zones ----------
   Each of these gets its own soft radial bloom, layered over body's shared
   --grad-app-bg base rather than replacing it, so zones read as local
   weather on one continuous surface, not four flat-colored blocks. Only
   magenta-family tokens are used (--primary/--accent-bright/--ink) — no
   teal/rose/amber, since those are reserved for semantic use elsewhere. */
.hero {
  background-image: radial-gradient(60% 70% at 50% 0%, rgba(130, 0, 118, 0.10) 0%, rgba(130, 0, 118, 0) 70%);
}
.managed-section {
  background-image:
    radial-gradient(60% 55% at 50% 100%, rgba(130, 0, 118, 0.10) 0%, rgba(130, 0, 118, 0) 70%),
    radial-gradient(85% 40% at 50% 100%, rgba(46, 1, 41, 0.08) 0%, rgba(46, 1, 41, 0) 70%);
}

/* ---------- Hero ---------- */
.hero { padding-top: 72px; padding-bottom: 56px; text-align: center; }
.hero-sub { max-width: 560px; margin: 16px auto 0; }
.hero-microcopy { margin: 16px 0 0; }
@media (max-width: 640px) {
  .hero { padding-top: 36px; padding-bottom: 28px; }
}

/* ---------- Plans grid ---------- */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.plans-grid > * { min-width: 0; }
@media (max-width: 1024px) {
  .plans-grid { grid-template-columns: 1fr; }
}

.plan-card,
.managed-card,
.addon-card {
  position: relative;
}
.plan-card::after,
.managed-card::after,
.addon-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--primary);
  opacity: var(--pulse-o, 0);
  pointer-events: none;
}

.plan-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
}

/* Growth's "recommended" signal is just this ribbon — same clean white
   card as Starter/Business otherwise, no special background treatment. */
.badge-ribbon {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--grad-primary);
  color: var(--fg-on-primary);
  font-size: var(--fs-12);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

.plan-card.selected,
.managed-card.selected {
  border-color: var(--primary);
  border-width: 2px;
  box-shadow: var(--shadow-lifted), 0 0 0 3px var(--primary-soft);
}

.selected-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: var(--fg-on-primary);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  z-index: 1;
}
.plan-card.selected .selected-badge,
.managed-card.selected .selected-badge { opacity: 1; transform: scale(1); }

.tier-icon-row { height: 56px; display: flex; align-items: center; margin-bottom: 16px; }
.tier-icon,
.addon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px dashed var(--border-strong);
}

.tier-icon svg { width: 55%; height: 55%; }
.tier-icon-starter,
.tier-icon-growth,
.tier-icon-business { width: 48px; height: 48px; }
.tier-icon-managed-start { width: 44px; height: 44px; }
.tier-icon-managed-growth { width: 48px; height: 48px; }
.tier-icon-managed-business { width: 52px; height: 52px; }

.plan-name { margin: 0 0 6px; }
.plan-tagline { margin: 0 0 16px; min-height: 32px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 16px; }
.plan-price .num-xl { font-size: 42px; }
.plan-price .num-lg { font-size: 34px; }
.plan-onboarding { margin: 10px 0 0; }

/* ---------- Stat panel: the one key number (messages/hours), promoted out
   of the feature/row list so it reads as a headline fact, not just another
   line item. Price sits on its own above this, not sharing the box. ---------- */
.stat-panel {
  margin-top: 4px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--primary-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat-key {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stat-key-icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
}
.stat-key-icon svg { width: 14px; height: 14px; }
.stat-key-value {
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--fg-1);
}
.stat-panel .hours-meter { margin-top: 0; }

.pill {
  display: inline-block;
  align-self: flex-start;
  margin: 16px 0 0;
  padding: 4px 12px;
  background: var(--primary-soft);
  color: var(--on-primary-container);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 600;
}

.feature-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--fg-1);
}
.check-icon {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--positive-soft);
  color: var(--positive);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
}
.feature-list li.off { color: var(--fg-3); }
.check-icon.off { background: var(--cloud); color: var(--fg-3); }

/* ---------- Enterprise band ---------- */
.enterprise-band {
  margin-top: 32px;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 32px;
}
.enterprise-inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0;
  max-width: none;
}
.enterprise-icon {
  flex: none;
  width: 48px;
  height: 48px;
  /* Aligned to the heading's line, not the full (heading + body) text
     block: flex-start puts its top at the row's top (same as the copy
     block's top, since copy is the tallest item), then this negative
     margin pulls it up so its own center lands on the heading line's
     center instead of drifting down toward the icon's own full height. */
  margin-top: -11px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.enterprise-icon svg { width: 26px; height: 26px; }
.enterprise-copy { flex: 1; min-width: 200px; }
.enterprise-band .h3,
.enterprise-band .body { color: var(--white); margin: 0; }
.enterprise-band .body { opacity: 0.8; margin-top: 4px; }
.enterprise-band .btn { flex: none; align-self: center; }

.jump-links { margin-top: 24px; }
.jump-links a { color: var(--primary); text-decoration: none; }
.jump-links a:hover { text-decoration: underline; }

.disclaimer-callout {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 640px;
  padding: 16px 20px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.disclaimer-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--fg-on-primary);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.disclaimer-callout p { margin: 0; color: var(--fg-2); }

/* ---------- Compare toggle ---------- */
.compare-toggle summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--primary);
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.compare-toggle summary::-webkit-details-marker { display: none; }
.compare-toggle summary::after { content: '+'; float: right; font-weight: 700; }
.compare-toggle[open] summary::after { content: '\2212'; }

.compare-table-wrap { overflow-x: auto; margin-top: 16px; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
}
.compare-table th,
.compare-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
}
.compare-table thead th {
  color: var(--fg-1);
  font-size: var(--fs-17);
  font-weight: 800;
  text-transform: none;
  letter-spacing: normal;
  background: var(--surface-2);
  border-bottom: 2px solid var(--border-strong);
  padding-top: 16px;
  padding-bottom: 16px;
}
.compare-table tbody th { font-weight: 600; color: var(--fg-1); }

/* Visually stitches the table to the cards above: each plan's column
   carries the same tier icon and a tint keyed to that card's treatment —
   Growth's column reads stronger, matching its featured-card status. */
.compare-col-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  color: var(--primary);
}
.compare-table th:nth-child(2), .compare-table td:nth-child(2),
.compare-table th:nth-child(4), .compare-table td:nth-child(4) {
  background: rgba(130, 0, 118, 0.03);
}
.compare-table th:nth-child(3), .compare-table td:nth-child(3) {
  background: var(--primary-soft);
}
.compare-col-price { display: block; margin-top: 2px; text-transform: none; letter-spacing: normal; }

.compare-group-row td {
  background: var(--surface-2);
  font-size: var(--fs-15);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
  white-space: normal;
  padding-top: 14px;
  padding-bottom: 14px;
}
.compare-yes,
.compare-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.compare-yes { background: var(--positive-soft); color: var(--positive); }
.compare-no { background: var(--cloud); color: var(--fg-3); }

/* ---------- Add-ons ---------- */
.stacking-chip { margin-top: 16px; }

.addons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.addons-grid > * { min-width: 0; }
@media (max-width: 1024px) {
  .addons-grid { grid-template-columns: 1fr; }
}

.addon-card { padding: 32px; transition: box-shadow var(--dur-base) var(--ease-standard); }
.addon-card.locked { opacity: 0.55; }
.addon-icon { width: 52px; height: 52px; margin-bottom: 16px; }
.addon-icon svg { width: 22px; height: 22px; }
.addon-desc { margin-top: 8px; }

.badge-nocap {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  background: var(--positive-soft);
  color: var(--positive);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 600;
}
.addon-note { color: var(--fg-3); margin: 8px 0 0; }

.stepper {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.stepper-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: var(--fs-17);
  line-height: 1;
  cursor: pointer;
}
.stepper-btn:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary); }
.stepper-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.stepper-count { min-width: 24px; text-align: center; }

/* ---------- Managed services grid ---------- */
.managed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.managed-grid > * { min-width: 0; }
@media (max-width: 1024px) {
  .managed-grid { grid-template-columns: 1fr; }
}

.managed-card { padding: 24px; display: flex; flex-direction: column; }
.managed-cap-note { margin-top: 8px; }

.hours-meter {
  margin-top: 16px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--cloud);
  overflow: hidden;
}
.hours-fill { height: 100%; background: var(--grad-primary); }

.managed-rows {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.managed-rows li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-13);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--divider);
}
.managed-rows li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.row-label { color: var(--fg-2); }
.row-value { color: var(--fg-1); font-weight: 600; text-align: left; }

/* ---------- Tooltips ---------- */
.info-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}
.info-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cloud);
  color: var(--fg-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  cursor: help;
}
.tooltip-bubble {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(260px, calc(100vw - 40px));
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 8px 12px;
  background: var(--slate-900);
  color: var(--white);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1.4;
  border-radius: var(--r-sm);
  z-index: 10;
}
/* display:none by default (not opacity:0) so an inactive tooltip — most of
   them, most of the time — can't push the page's scrollable width past the
   viewport on narrow screens just by existing near an edge. */
.info-tip:hover .tooltip-bubble,
.info-tip:focus .tooltip-bubble,
.info-tip:focus-within .tooltip-bubble { display: block; }

/* The compare table's own wrapper scrolls horizontally (overflow-x: auto),
   which — per spec — forces overflow-y to clip too, so a bubble popping
   upward from an early row gets cut off by the wrapper's own top edge.
   Popping down keeps it inside the wrapper's bounds. This is a vertical-
   only override — horizontal placement is handled uniformly below. */
.compare-table .tooltip-bubble {
  bottom: auto;
  top: calc(100% + 8px);
}

/* Horizontal placement: centered (left:50%/translateX(-50%)) is the
   default, but pricing-animations.js measures each bubble against the
   viewport right before it opens and adds one of these to flip the
   anchor when centering would push an edge off-screen — see
   positionTooltip() in pricing-animations.js. Higher specificity (two
   classes) than the plain .tooltip-bubble rule, so they always win. */
.tooltip-bubble.align-left { left: 0; transform: none; }
.tooltip-bubble.align-right { left: auto; right: 0; transform: none; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 20px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--fg-1);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--fg-2);
  border-bottom: 2px solid var(--fg-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-answer { padding: 0 0 16px; }

/* ---------- Closing CTA ---------- */
.closing-cta { text-align: center; }
.closing-cta .body { margin: 8px 0 24px; }

/* ---------- Floating summary bar ---------- */
.summary-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 32px);
  padding: 12px 12px 12px 20px;
  border-radius: var(--r-pill);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 24px);
}
.summary-bar.visible { visibility: visible; }
.summary-bar-plan {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-bar-total { white-space: nowrap; }
.summary-bar .btn-book { min-height: 40px; padding: 0 20px; white-space: nowrap; }

@media (max-width: 640px) {
  .summary-bar { gap: 10px; padding: 10px 10px 10px 16px; bottom: 16px; }
  .summary-bar-plan { display: none; }
}

/* Reserve space at the foot of the page so the floating bar never covers the closing CTA/footer once visible. */
body.summary-bar-visible { padding-bottom: 96px; }

/* ---------- DC Runtime Overrides ---------- */
/* Prevent the runtime from constraining the height, which causes overflowing content to cover subsequent elements (like the footer). */
#dc-root { height: auto !important; }