/* =========================================
   E-Prescription App Landing Page Styles
   Modern, Colorful, Animated, Professional
   ========================================= */

/* Reset & Base */
.landing-page {
  font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #334155;
  line-height: 1.6;
  overflow-x: hidden;
  background: #fff;
}

.landing-page * {
  box-sizing: border-box;
}

/* Animated Background */
.landing-bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: floatShape 20s infinite ease-in-out;
}

.bg-shape-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #0d9488, #7c3aed);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
}

.bg-shape-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  bottom: 10%;
  left: -5%;
  animation-delay: 5s;
}

.bg-shape-3 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  top: 50%;
  right: 20%;
  animation-delay: 10s;
}

.bg-shape-4 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #10b981, #0d9488);
  bottom: 20%;
  left: 30%;
  animation-delay: 15s;
}

@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(50px, -50px) rotate(5deg); }
  50% { transform: translate(-30px, -20px) rotate(-3deg); }
  75% { transform: translate(-40px, 30px) rotate(2deg); }
}

/* Navigation */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  transition: all 0.3s ease;
}

.landing-nav.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.landing-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0f766e;
  font-weight: 700;
  font-size: 20px;
  transition: transform 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
}

.landing-logo:hover {
  transform: scale(1.02);
}

.landing-logo img {
  height: 36px;
  width: auto;
  border-radius: 50%;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-nav-links a {
  text-decoration: none;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  white-space: nowrap;
}

.landing-nav-links a:hover {
  color: #0d9488;
}

.landing-nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0d9488, #7c3aed);
  transition: width 0.3s ease;
}

.landing-nav-links a:hover::after {
  width: 100%;
}

.landing-nav-cta {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  color: #fff !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3);
  white-space: nowrap;
  display: inline-block;
}

.landing-nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4) !important;
  color: #fff !important;
}

.landing-nav-cta::after {
  display: none !important;
}

/* Doctor Login button - stays outlined so it does not out-shout the filled
   "Get Started Free" CTA beside it, but now carries a highlight ring and a
   short attention pulse: the root url is the marketing page, so a doctor who
   already has an account has to be steered here rather than to sign-up. */
.landing-nav-signin {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: #fff !important;
  color: #0f766e !important;
  padding: 9px 20px !important;
  border: 2px solid #0d9488;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap;
  position: relative;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.13);
  /* Runs three times and stops - a permanent pulse reads as an error state
     and gets tuned out within seconds. */
  animation: signinAttention 2.2s ease-out 1.2s 3;
}

@keyframes signinAttention {
  0%, 100% { box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.13); }
  50%      { box-shadow: 0 0 0 9px rgba(13, 148, 136, 0.05); }
}

/* Vestibular safety, and it also keeps the button still for anyone who has
   asked the OS to stop animations. */
@media (prefers-reduced-motion: reduce) {
  .landing-nav-signin {
    animation: none;
  }
}

.landing-nav-signin:hover {
  background: #0d9488 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.28);
}

.landing-nav-signin::after {
  display: none !important;
}

.landing-nav-signin i {
  font-size: 15px;
}

.landing-mobile-menu .landing-nav-signin {
  justify-content: center;
  padding: 12px 16px !important;
  font-size: 16px;
}

.landing-nav .landing-mobile-toggle {
  /* Two classes, so this beats the application-wide icon-button rule in
     app/custom-style.css - `button:has(> .fa, ...)` - which is one type plus
     one class and was therefore winning. That rule exists to centre an icon
     and space it from its label; it is not allowed to decide whether a button
     is on screen, which is how the hamburger came to sit in the bar at 1920px
     next to the full desktop menu it replaces. */
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: #334155;
  cursor: pointer;
  padding: 8px;
  transition: color 0.2s ease;
}

.landing-mobile-toggle:hover {
  color: #0d9488;
}

.landing-mobile-menu {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding: 20px;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease;
}

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

.landing-mobile-menu a {
  text-decoration: none;
  color: #475569;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.landing-mobile-menu a:hover {
  background: #f0fdfa;
  color: #0d9488;
}

.landing-mobile-menu .landing-nav-cta {
  display: block;
  text-align: center;
  margin-top: 8px;
}

/* Hero Section */
.landing-hero {
  padding: 140px 0 100px;
  background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 50%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.landing-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.landing-hero-content {
  animation: slideInLeft 0.8s ease-out;
}

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

.landing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  animation: fadeInDown 0.6s ease-out;
}

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

.landing-hero-content h1 {
  font-size: 52px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.gradient-text {
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.landing-hero-content p {
  font-size: 18px;
  color: #64748b;
  margin-bottom: 32px;
  line-height: 1.7;
  max-width: 480px;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.landing-hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.btn-landing-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-landing-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-landing-primary:hover::before {
  left: 100%;
}

.btn-landing-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(13, 148, 136, 0.4);
  color: #fff;
}

.btn-landing-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #0d9488;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid #0d9488;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-landing-secondary:hover {
  background: #f0fdfa;
  transform: translateY(-3px);
  color: #0d9488;
  box-shadow: 0 8px 25px rgba(13, 148, 136, 0.15);
}

/* Explicit route to sign-in for a doctor who already has an account. The hero
   CTAs above it are both sign-up paths, so without this the only way in is
   spotting the nav button - which is behind the hamburger on mobile.
   Built as a card with a real button: a sentence with a link in it does not
   read as something to press. */
.landing-signin-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 26px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #d7e3ea;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
  max-width: 560px;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out 0.7s both;
}

/* Teal accent rail, drawn rather than using border-left so the card's rounded
   corner is not squared off on that edge. */
.landing-signin-hint::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%);
}

.signin-hint-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

.signin-hint-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

.signin-hint-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.signin-hint-text span {
  display: block;
  font-size: 13px;
  color: #64748b;
}

.signin-hint-btn {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.signin-hint-btn:hover,
.signin-hint-btn:focus {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.42);
}

.signin-hint-btn i {
  font-size: 12px;
}

/* Below this the three columns stop fitting side by side and the button gets
   squeezed to a sliver, so stack and let it span the card. */
@media (max-width: 560px) {
  .landing-signin-hint {
    flex-wrap: wrap;
    gap: 12px;
  }

  .signin-hint-text {
    flex: 1 1 calc(100% - 56px);
    /* The hero centres its text at this width; left-aligning keeps the copy
       tied to the icon beside it instead of drifting to the middle. */
    text-align: left;
  }

  .signin-hint-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* The patient's door onto a page written for doctors. Same card shape as the
   doctor sign-in hint above it, in the blue that tells the two apart. */
.landing-patient-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #cfe3f2;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
  max-width: 560px;
  position: relative;
  overflow: hidden;
}

.landing-patient-cta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
}

.patient-cta-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.patient-cta-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

.patient-cta-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.patient-cta-text span {
  display: block;
  font-size: 13px;
  color: #64748b;
}

.patient-cta-btn {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.patient-cta-btn:hover,
.patient-cta-btn:focus {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.42);
}

.patient-cta-btn i {
  font-size: 12px;
}

/* Same breakpoint as the sign-in hint: below it the button is squeezed to a
   sliver, so stack and let it span the card. */
@media (max-width: 560px) {
  .landing-patient-cta {
    flex-wrap: wrap;
    gap: 12px;
  }

  .patient-cta-text {
    flex: 1 1 calc(100% - 56px);
    text-align: left;
  }

  .patient-cta-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Patients arriving at the top bar get a plain link, not another button
   competing with "Get Started Free" - that one is for doctors. */
.landing-nav-book {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: #0369a1 !important;
  font-weight: 600 !important;
}

.landing-nav-book:hover {
  color: #0284c7 !important;
}

.landing-hero-trust {
  display: flex;
  align-items: center;
  /* The trust line names what the free plan is NOT - a trial - so it is longer
     than the two short chips it replaced. Wrapping keeps it inside a narrow
     phone instead of pushing the hero sideways; on a wide screen there is
     nothing to wrap, so the row is unchanged. */
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px;
  color: #64748b;
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-item i {
  color: #10b981;
  font-size: 16px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.landing-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slideInRight 0.8s ease-out;
}

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

.landing-hero-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.landing-hero-image {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  animation: floatImage 4s ease-in-out infinite;
}

@keyframes floatImage {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}


.hero-floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: #0f172a;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: floatCard 4s ease-in-out infinite;
}

.hero-floating-card i {
  font-size: 20px;
  color: #0d9488;
}

.card-1 {
  top: 20px;
  right: -20px;
  animation-delay: 0s;
}

.card-2 {
  bottom: 40px;
  left: -30px;
  animation-delay: 1.5s;
}

.card-3 {
  bottom: 20px;
  right: 10px;
  animation-delay: 3s;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

/* Trust Bar */
.landing-trust {
  padding: 60px 0;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  z-index: 1;
}

.landing-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

.landing-trust-item {
  text-align: center;
  animation: fadeInUp 0.6s ease-out both;
}

.landing-trust-item:nth-child(1) { animation-delay: 0.1s; }
.landing-trust-item:nth-child(2) { animation-delay: 0.2s; }
.landing-trust-item:nth-child(3) { animation-delay: 0.3s; }
.landing-trust-item:nth-child(4) { animation-delay: 0.4s; }

/* A word rather than a counted figure, so it needs to sit on the same optical
   line as the numbers beside it without overflowing its column. */
.landing-trust-word {
  font-size: 34px;
  letter-spacing: -0.01em;
}

.landing-trust-number {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}

.landing-trust-label {
  font-size: 14px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Sections Common */
.landing-section {
  padding: 100px 0;
  position: relative;
  z-index: 1;
}

.landing-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
  color: #0d9488;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.landing-section-header h2 {
  font-size: 36px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.landing-section-header p {
  font-size: 18px;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

.landing-section-alt {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Features */
.landing-features-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.landing-feature-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 36px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.landing-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #7c3aed);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.landing-feature-card:hover::before {
  transform: scaleX(1);
}

.landing-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: #0d9488;
}

.landing-feature-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
  transition: transform 0.3s ease;
}

.landing-feature-card:hover .landing-feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.landing-feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.landing-feature-card p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* How It Works */
.landing-steps {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.landing-step {
  text-align: center;
  position: relative;
}

.landing-step-number {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
  transition: transform 0.3s ease;
}

.landing-step:hover .landing-step-number {
  transform: scale(1.15) rotate(10deg);
}

.landing-step h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.landing-step p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Pricing */
.landing-pricing-grid {
  /* Four tiers now that Enterprise sits alongside the three self-serve ones.
     Widened from 1100px so the cards do not squeeze; drops to 2-up and then
     1-up below. */
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}

/* Two rows of three rather than one row of six. Six cards in a line is
   unreadable at any width, and the split also does the explaining: everyday
   plans, then the video tiers. Each row keeps its own narrower max-width so
   three cards sit at a comfortable reading size instead of stretching. */
.landing-pricing-grid.is-three {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1040px;
  /* Equal-height cards. The default `start` left each card at its natural
     height, so a tier with one bullet fewer ended shorter than the ones beside
     it and the row of buttons stepped up and down. */
  align-items: stretch;
}

.landing-pricing-grid.is-three > .landing-pricing-card {
  display: flex;
  flex-direction: column;
}

/* Pushes the call to action to the bottom of every card, so the three line up
   however many features sit above them. */
.landing-pricing-grid.is-three > .landing-pricing-card .landing-pricing-features {
  flex: 1 0 auto;
}

/* A plan name of three words - "Choose Video Pro Plus" - wrapped onto two
   lines and made that one button taller than its neighbours. */
.landing-pricing-grid.is-three > .landing-pricing-card .btn-landing-primary,
.landing-pricing-grid.is-three > .landing-pricing-card .btn-landing-secondary {
  white-space: nowrap;
  font-size: 14.5px;
  padding-left: 12px;
  padding-right: 12px;
}

.landing-pricing-rowhead {
  max-width: 1040px;
  margin: 38px auto 18px;
  padding: 0 20px;
  text-align: center;
}

.landing-pricing-rowhead h3 {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
}

.landing-pricing-rowhead p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
}

/* The quiet second line under an allowance - minutes are what is sold, this
   is what they mean in patients. Deliberately small and grey: it explains, it
   does not compete with the number above it. */
.landing-pricing-sub {
  /* Its own line under the allowance, reading as a note on the line above
     rather than as another feature. */
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 2px;
}

/* Enterprise sits below both rows, full width, so it stops competing with the
   six priced tiers for attention. */
.landing-pricing-enterprise {
  max-width: 1040px;
  margin: 34px auto 0;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  border-radius: 16px;
  color: #e6fffb;
}

.landing-pricing-enterprise h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.landing-pricing-enterprise h3 i { margin-right: 8px; }

.landing-pricing-enterprise p {
  font-size: 13.5px;
  margin: 0 0 12px;
  color: #c7f5ef;
}

.landing-pricing-enterprise ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
}

.landing-pricing-enterprise li {
  font-size: 13px;
  color: #e6fffb;
}

.landing-pricing-enterprise li i { margin-right: 7px; color: #5eead4; }

.landing-pricing-ent-cta { text-align: center; min-width: 220px; }

.landing-pricing-ent-cta .landing-pricing-talk {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.landing-pricing-ent-cta .btn-landing-primary {
  background: #fff;
  color: #0f766e;
  border-color: #fff;
}

.landing-pricing-ent-cta .landing-pricing-alt-cta { color: #c7f5ef; }

@media (max-width: 1180px) {
  .landing-pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  .landing-pricing-grid.is-three { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  .landing-pricing-rowhead { max-width: 760px; }
  .landing-pricing-enterprise { max-width: 760px; }
}

@media (max-width: 760px) {
  .landing-pricing-enterprise {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }
  .landing-pricing-enterprise ul { grid-template-columns: 1fr; }
}

/* ===== Time & money saved ===== */
.landing-roi {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.landing-roi-panel {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.landing-roi-inputs {
  padding: 36px 32px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

.landing-roi-inputs h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.landing-roi-inputs h4 i {
  color: #0d9488;
}

.landing-roi-field {
  display: block;
  margin-bottom: 16px;
}

.landing-roi-field span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.landing-roi-field span em {
  font-style: normal;
  font-weight: 500;
  color: #94a3b8;
}

.landing-roi-field input {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-roi-field input:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.14);
}

.landing-roi-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
}

.landing-roi-results {
  padding: 36px 32px;
  background: linear-gradient(160deg, #0f766e 0%, #134e6f 55%, #4c1d95 100%);
  color: #fff;
}

.landing-roi-headline {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.landing-roi-figure {
  display: block;
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.landing-roi-unit {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.landing-roi-sub {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.landing-roi-sub strong {
  color: #5eead4;
}

.landing-roi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px 0;
}

.landing-roi-stat {
  text-align: center;
  padding: 16px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
}

.landing-roi-stat-value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: #fbbf24;
}

.landing-roi-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.landing-roi-payback {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: rgba(94, 234, 212, 0.14);
  border: 1px solid rgba(94, 234, 212, 0.35);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
}

.landing-roi-payback i {
  margin-top: 3px;
  color: #5eead4;
}

.landing-roi-payback strong {
  color: #5eead4;
}

.landing-roi-results .btn-landing-primary {
  background: #fff;
  color: #0f766e;
  box-shadow: none;
}

.landing-roi-results .btn-landing-primary:hover {
  background: #f0fdfa;
  color: #0f766e;
}

.landing-roi-assumption {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.landing-roi-inline {
  width: 52px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.landing-roi-inline:focus {
  outline: none;
  border-color: #5eead4;
}

.landing-roi-where {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 48px auto 0;
  padding: 0 20px;
}

.landing-roi-where-item {
  padding: 26px 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.landing-roi-where-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

.landing-roi-where-item i {
  font-size: 22px;
  color: #0d9488;
}

.landing-roi-where-item h4 {
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.landing-roi-where-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #64748b;
}

@media (max-width: 900px) {
  .landing-roi-panel {
    grid-template-columns: 1fr;
  }

  .landing-roi-inputs {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .landing-roi-where {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .landing-roi-figure {
    font-size: 54px;
  }

  .landing-roi-split {
    grid-template-columns: 1fr;
  }
}

/* The paid storage top-up, shown in brackets beside each plan's storage line.
   Muted and one size down so it reads as an option, not as part of the plan. */
.landing-pricing-addon {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

/* Billing period toggle */
.landing-billing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  max-width: 380px;
  margin: 0 auto 40px;
  padding: 5px;
  background: #f1f5f9;
  border-radius: 999px;
}

.landing-billing-toggle button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.landing-billing-toggle button:hover {
  color: #0f766e;
}

.landing-billing-toggle button.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.landing-billing-save {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Savings line under each price. The monthly variant is muted rather than
   hidden so the card keeps the same height when the toggle flips - otherwise
   the whole grid jumps every time a doctor compares the two options. */
.landing-pricing-save {
  min-height: 22px;
  margin: -8px 0 20px;
  font-size: 13px;
  font-weight: 700;
  color: #b45309;
}

.landing-pricing-save.is-placeholder {
  font-weight: 500;
  color: #94a3b8;
}

@media (max-width: 480px) {
  .landing-billing-toggle {
    max-width: 100%;
  }

  .landing-billing-toggle button {
    flex-direction: column;
    gap: 4px;
    padding: 9px 12px;
    font-size: 14px;
  }
}

.landing-pricing-card {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
}

.landing-pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #7c3aed);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.landing-pricing-card:hover::before {
  transform: scaleX(1);
}

.landing-pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: #0d9488;
}

.landing-pricing-card.popular {
  border-color: #0d9488;
  box-shadow: 0 20px 50px rgba(13, 148, 136, 0.2);
  transform: scale(1.03);
  background: linear-gradient(180deg, #fff 0%, #f0fdfa 100%);
}

.landing-pricing-card.popular:hover {
  transform: scale(1.03) translateY(-8px);
}

.landing-pricing-card.popular::before {
  transform: scaleX(1);
}

.landing-pricing-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
}

.landing-pricing-card.popular .landing-pricing-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.landing-pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  color: #fff;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

.landing-pricing-card h3 {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.landing-pricing-price {
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
  line-height: 1;
}

.landing-pricing-price span {
  font-size: 18px;
  font-weight: 500;
  color: #64748b;
  -webkit-text-fill-color: #64748b;
}

.landing-pricing-period {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 24px;
}

.landing-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
}

.landing-pricing-features li {
  padding: 10px 0;
  font-size: 14px;
  color: #475569;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* A feature line that carries an explanatory sub-line.
   NOT done with flex-wrap on the base li: the text of these items is a bare
   text node, so it becomes an ANONYMOUS flex item, and an anonymous item that
   is wider than the space left beside the tick wraps to its own row before it
   will shrink - which put the tick alone on one line and the sentence under
   it. Block layout with the tick taken out of flow has no such problem and
   leaves every other feature line exactly as it was. */
.landing-pricing-features li.has-sub {
  display: block;
  position: relative;
  padding-left: 26px;
}

.landing-pricing-features li.has-sub > i {
  position: absolute;
  left: 0;
  top: 13px;
}

.landing-pricing-features li i {
  margin-top: 3px;
  font-size: 16px;
}

.landing-pricing-features li i.fa-check-circle {
  color: #10b981;
}

.landing-pricing-features li i.fa-times-circle {
  color: #ef4444;
}

.landing-pricing-card .btn-landing-primary,
.landing-pricing-card .btn-landing-secondary {
  width: 100%;
  justify-content: center;
}

.landing-pricing-note {
  margin-top: 12px;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

/* Payment Info */
.landing-payment-info {
  max-width: 600px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.payment-card {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  color: #fff;
  box-shadow: 0 20px 50px rgba(13, 148, 136, 0.3);
  animation: fadeInUp 0.8s ease-out;
}

.payment-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  backdrop-filter: blur(10px);
}

.payment-card h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.payment-card p {
  font-size: 15px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.payment-card strong {
  color: #fbbf24;
  font-size: 18px;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  margin-top: 12px;
}

.btn-whatsapp:hover {
  background: #128c7e;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  color: #fff;
}

.btn-whatsapp-large {
  padding: 16px 32px;
  font-size: 16px;
}

/* Testimonials */
.landing-testimonials-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.landing-testimonial-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.landing-testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.landing-testimonial-card:hover::before {
  transform: scaleX(1);
}

.landing-testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.landing-testimonial-stars {
  color: #f59e0b;
  font-size: 14px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.landing-testimonial-text {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}

.landing-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.landing-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.landing-testimonial-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.landing-testimonial-info span {
  font-size: 13px;
  color: #64748b;
}

.testimonial-cta {
  background: linear-gradient(135deg, #0f766e 0%, #7c3aed 100%) !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-cta::before {
  display: none;
}

.testimonial-cta-content {
  text-align: center;
  color: #fff;
}

.testimonial-cta-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  backdrop-filter: blur(10px);
}

.testimonial-cta h3 {
  color: #fff;
  margin-bottom: 8px;
  font-size: 22px;
}

.testimonial-cta p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
}

.testimonial-cta .btn-landing-primary {
  background: #fff;
  color: #0d9488;
}

.testimonial-cta .btn-landing-primary:hover {
  background: #f0fdfa;
}

/* FAQ */
.landing-faq-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.landing-faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.landing-faq-item:hover {
  border-color: #0d9488;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.1);
}

.landing-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.landing-faq-question:hover {
  color: #0d9488;
}

.landing-faq-question i {
  color: #0d9488;
  transition: transform 0.3s ease;
  font-size: 14px;
}

.landing-faq-item.active .landing-faq-question i {
  transform: rotate(180deg);
}

.landing-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.landing-faq-item.active .landing-faq-answer {
  max-height: 300px;
  padding: 0 24px 20px;
}

.landing-faq-answer p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* CTA Section */
.landing-cta {
  padding: 100px 0;
  background: linear-gradient(135deg, #0f766e 0%, #7c3aed 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.landing-cta-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.landing-cta h2 {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}

.landing-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
}

.btn-landing-large {
  padding: 18px 48px !important;
  font-size: 18px !important;
}

.landing-cta .btn-landing-primary {
  background: #fff;
  color: #0d9488;
  font-size: 18px;
  padding: 16px 40px;
}

.landing-cta .btn-landing-primary:hover {
  background: #f0fdfa;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  color: #0d9488;
}

.landing-cta-note {
  margin-top: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* Footer */
.landing-footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 60px 0 30px;
  position: relative;
  z-index: 1;
}

.landing-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.landing-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.landing-footer-brand {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.landing-footer-desc {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.landing-footer-social {
  display: flex;
  gap: 12px;
}

.landing-footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.3s ease;
}

.landing-footer-social a:hover {
  background: #0d9488;
  color: #fff;
  transform: translateY(-3px);
}

.landing-footer h4 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.landing-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-footer-links li {
  margin-bottom: 10px;
}

.landing-footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

.landing-footer-links a:hover {
  color: #0d9488;
  padding-left: 4px;
}

.landing-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.landing-footer-bottom a {
  color: #0d9488;
  text-decoration: none;
}

.landing-footer-bottom a:hover {
  text-decoration: underline;
}

/* Animations */
.landing-fade-up {
  opacity: 1;
  transform: translateY(0);
}

/* Payment Modal */
.landing-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.landing-modal {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideInUp 0.4s ease;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

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

.landing-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.landing-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.payment-modal-content {
  text-align: center;
}

.payment-modal-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 36px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(13, 148, 136, 0.3);
}

.payment-modal-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.payment-modal-plan {
  font-size: 16px;
  color: #64748b;
  margin-bottom: 24px;
}

.payment-modal-plan strong {
  color: #0d9488;
}

.payment-instructions {
  text-align: left;
  margin-bottom: 28px;
}

.payment-step {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #0d9488;
}

.step-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.step-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.step-content p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 8px;
}

.bkash-number {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px dashed #0d9488;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 700;
  color: #0d9488;
}

.bkash-number i {
  font-size: 20px;
}

.btn-landing-full {
  width: 100%;
  justify-content: center;
}

/* Responsive */
@media (max-width: 992px) {
  .landing-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .landing-hero-content p {
    max-width: 100%;
  }

  .landing-hero-buttons {
    justify-content: center;
  }

  .landing-hero-trust {
    justify-content: center;
  }

  .landing-hero-visual {
    order: -1;
  }

  .landing-hero-content h1 {
    font-size: 40px;
  }

  .landing-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-pricing-grid,
  .landing-pricing-grid.is-three {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .landing-pricing-rowhead { max-width: 400px; margin-top: 30px; }

  .landing-pricing-card.popular {
    transform: none;
  }

  .landing-pricing-card.popular:hover {
    transform: translateY(-8px);
  }

  .landing-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1280px) {
  .landing-nav-links {
    gap: 22px;
  }
}

/* The bar collapses to the menu button wherever the full row would not fit
   on one line: logo + seven links + the CTA need about 1,050px of CSS width,
   which a 1366/1440 laptop at 125-150% zoom (or a 1920 screen at 175%) does
   not have. This used to switch at 768px, so 769-1100px squeezed every label
   onto two lines. */
@media (max-width: 1100px) {
  .landing-nav-links {
    display: none;
  }

  .landing-nav .landing-mobile-toggle {
    /* inline-flex, not block: the icon is centred by the shared icon-button
       rule, and matching its display keeps the glyph in the middle of the
       44px tap target. */
    display: inline-flex;
  }

  .landing-mobile-menu {
    display: flex;
  }
}

@media (max-width: 768px) {
  .landing-hero {
    padding: 120px 0 60px;
  }

  .landing-hero-content h1 {
    font-size: 32px;
  }

  .landing-hero-content p {
    font-size: 16px;
  }

  .hero-floating-card {
    display: none;
  }

  .landing-features-grid {
    grid-template-columns: 1fr;
  }

  .landing-steps {
    grid-template-columns: 1fr;
  }

  .landing-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .landing-footer-grid {
    grid-template-columns: 1fr;
  }

  .landing-section {
    padding: 70px 0;
  }

  .landing-section-header h2 {
    font-size: 28px;
  }

  .landing-cta h2 {
    font-size: 28px;
  }

  .landing-cta p {
    font-size: 16px;
  }

  .landing-pricing-price {
    font-size: 36px;
  }

  .landing-modal {
    padding: 24px;
  }
  
  .landing-trust-inner {
    gap: 40px;
  }
  
  .landing-trust-word {
    font-size: 26px;
  }

  .landing-trust-number {
    font-size: 32px;
  }
}

/* Demo Video Section */
.landing-demo {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
}

.landing-demo-frame {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.landing-demo-player {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 18px;
  overflow: hidden;
  /* Shown as-is until vm.demo.poster is set, so the no-poster state still
     looks deliberate rather than like a failed image. */
  background: linear-gradient(135deg, #0f766e 0%, #0f172a 55%, #7c3aed 100%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  cursor: pointer;
}

.landing-demo-player iframe,
.landing-demo-player video,
.landing-demo-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

.landing-demo-poster {
  transition: transform 0.5s ease, opacity 0.3s ease;
  opacity: 0.92;
}

.landing-demo-player:hover .landing-demo-poster {
  transform: scale(1.03);
  opacity: 1;
}

.landing-demo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  font-size: 28px;
  padding-left: 6px; /* optically centre the triangle */
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(13, 148, 136, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: demoPulse 2.4s ease-out infinite;
}

.landing-demo-player:hover .landing-demo-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 14px 40px rgba(13, 148, 136, 0.6);
}

@keyframes demoPulse {
  0%   { box-shadow: 0 10px 30px rgba(13, 148, 136, 0.5), 0 0 0 0 rgba(13, 148, 136, 0.45); }
  70%  { box-shadow: 0 10px 30px rgba(13, 148, 136, 0.5), 0 0 0 26px rgba(13, 148, 136, 0); }
  100% { box-shadow: 0 10px 30px rgba(13, 148, 136, 0.5), 0 0 0 0 rgba(13, 148, 136, 0); }
}

.landing-demo-duration {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.landing-demo-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .landing-demo-play {
    width: 64px;
    height: 64px;
    font-size: 22px;
  }

  .landing-demo-cta {
    flex-direction: column;
  }

  .landing-demo-cta .btn-landing-primary,
  .landing-demo-cta .btn-landing-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* "How to register" video card, inside How It Works. The player frame, play
   button and duration pill are the demo section's own classes above. */
.landing-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 20px;
  color: #0f766e;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  animation: fadeInUp 0.8s ease-out 0.7s both;
}

.landing-guide-link i {
  font-size: 20px;
}

.landing-guide-link span {
  color: #64748b;
  font-weight: 500;
}

.landing-guide-link:hover,
.landing-guide-link:focus {
  color: #0d9488;
  text-decoration: underline;
}

.landing-step-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0d9488;
  text-decoration: none;
}

.landing-step-link:hover,
.landing-step-link:focus {
  color: #0f766e;
  text-decoration: underline;
}

.landing-guide {
  max-width: 1000px;
  margin: 56px auto 0;
  padding: 32px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 36px;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  /* Clear of the fixed header when reached through #/how-to-register. */
  scroll-margin-top: 90px;
}

.landing-guide-text .section-badge {
  margin-bottom: 14px;
}

.landing-guide-text h3 {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px;
}

.landing-guide-text p {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  margin: 0 0 24px;
}

.landing-guide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.landing-guide-open {
  color: #0f766e;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.landing-guide-open:hover,
.landing-guide-open:focus {
  color: #0d9488;
  text-decoration: underline;
}

.landing-guide-title {
  position: absolute;
  left: 20px;
  bottom: 18px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(15, 23, 42, 0.4);
}

/* Covers the empty frame until Loom's player reports ready. Clicks pass
   through, so the video is never blocked by it. */
.landing-guide-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #0f766e 0%, #0f172a 55%, #7c3aed 100%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .landing-guide {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 40px 20px 0;
    padding: 22px;
  }
}

@media (max-width: 560px) {
  .landing-guide-actions .btn-landing-primary {
    width: 100%;
    justify-content: center;
  }
}

/* Scroll fix, scoped to this page only.
   The shared app shell (theme/_layout.scss) sets body{overflow:hidden} and
   .app{height:100%} so the dashboard's own .content-wrap can own scrolling.
   The landing page isn't wrapped in .content-wrap, so it inherited the clipped
   body and couldn't scroll to the bottom. core.js toggles body.landing-page-active
   while this state is active, so this override only ever applies here. */
body.landing-page-active {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /* The shell's 50px padding-bottom is dashboard slack. Here it sat below the
     dark footer as a pale #E5E9EC strip at the very end of the page — the same
     bar login.css already zeroes for the sign-in screen. */
  padding-bottom: 0;
}

body.landing-page-active .app {
  height: auto;
  min-height: 100%;
}

/* ---------------------------------------------------------------------------
   Video testimonials ("In their own words")
   Sits above the written testimonials in #testimonials and is hidden entirely
   until vm.videoStories has an entry. Follows the demo player's shape: 16:9
   box, brand gradient behind it so the no-poster state looks deliberate
   rather than like a failed image.
   --------------------------------------------------------------------------- */
.landing-stories {
  max-width: 1200px;
  margin: 0 auto 44px;
  padding: 0 20px;
}

.landing-stories-lead {
  text-align: center;
  margin-bottom: 24px;
}

.landing-stories-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.landing-stories-lead p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 15px;
}

.landing-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.landing-story {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.landing-story:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.landing-story-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: linear-gradient(135deg, #0f766e 0%, #0f172a 55%, #7c3aed 100%);
  overflow: hidden;
}

.landing-story-frame iframe,
.landing-story-frame video,
.landing-story-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* No poster supplied: the doctor's initial on the brand gradient. Set to the
   top-left rather than centred, because the play button owns the centre of the
   tile and the two were drawing on top of each other. */
.landing-story-blank {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 14px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.landing-story-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #0f766e;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.3);
  transition: transform 0.25s ease, background 0.25s ease;
}

.landing-story-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

/* Nudges the triangle onto the optical centre of the circle. */
.landing-story-play i {
  margin-left: 4px;
}

.landing-story-body {
  padding: 20px 22px 22px;
}

.landing-story-quote {
  margin: 0 0 12px;
  color: #334155;
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
}

.landing-story-who strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
}

.landing-story-who span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 992px) {
  .landing-stories-grid { grid-template-columns: repeat(2, 1fr); }
}

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


/* ---------------------------------------------------------------------------
   Enterprise tier: no published price, so the card sells a conversation.
   --------------------------------------------------------------------------- */
.landing-pricing-card.enterprise {
  border-color: #0f766e;
  background: linear-gradient(180deg, #f8fdfc 0%, #ffffff 60%);
}

/* Sized to sit on the same baseline as the numeric prices beside it. */
.landing-pricing-talk {
  font-size: 34px;
  color: #0f766e;
}

.landing-pricing-alt-cta {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: #0f766e;
  font-size: 14px;
  font-weight: 600;
}

.landing-pricing-alt-cta:hover {
  color: #0d9488;
  text-decoration: underline;
}

.landing-pricing-note {
  margin: 12px 0 0;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

/* Value line on the pricing cards. Replaces the old "Save X BDT" discount
   line: the price said per day, and how fast the doctor's own reclaimed time
   covers it. Given more weight than the saving ever had, because it is the
   argument that actually sells the plan. */
.landing-pricing-value {
  margin: 10px 0 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.landing-pricing-value b {
  display: block;
  font-size: 15px;
  color: #0f5c56;
}

/* ---------------------------------------------------------------------------
   Licensed-business details. A doctor moving their patient list onto someone
   else's servers is making a trust decision as much as a purchase, so the
   trade licence and a physical address are given real estate rather than
   being buried in the small print.
   --------------------------------------------------------------------------- */
.landing-legal {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.landing-legal-line {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.landing-legal-line strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.landing-legal-line i {
  margin-right: 5px;
  opacity: 0.75;
}

/* Same claim, restated where the money decision is actually made. */
.landing-pricing-trust {
  max-width: 1320px;
  margin: 28px auto 0;
  padding: 0 20px;
  text-align: center;
  color: #64748b;
  font-size: 13.5px;
}

.landing-pricing-trust i {
  color: #0f766e;
  margin-right: 6px;
}

/* The plan-review note. Sits above the licence line and is deliberately a
   touch wider and calmer than it: it answers a worry rather than making a
   claim, so it should read as a footnote, not a banner. */
.landing-pricing-review {
  max-width: 820px;
  margin: 30px auto 0;
  padding: 14px 20px;
  text-align: center;
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.65;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.landing-pricing-review b { color: #334155; }

.landing-pricing-review i {
  color: #0f766e;
  margin-right: 6px;
}

/* =========================================================
   AI branding
   -----------------------------------------------------------------
   The product's one real differentiator is the AI, and the page said
   so only in body copy. These rules give it the page's loudest pill,
   its only dark panel and a marked pair of feature cards, without
   touching any existing rule: everything below is either a new class
   or a modifier on one, so the previous look is exactly what a
   visitor still sees anywhere these classes are absent.
   ========================================================= */

/* Nav ---------------------------------------------------- */
.landing-logo-ai {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #fff;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
}

.landing-nav-links .landing-nav-ai {
  color: #7c3aed;
  font-weight: 700;
}

.landing-mobile-menu .landing-mobile-ai {
  color: #7c3aed;
  font-weight: 700;
}

/* Hero --------------------------------------------------- */
.landing-hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.landing-hero-badges .landing-hero-badge {
  margin-bottom: 0;
}

.landing-hero-badge-ai {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 40%, #7c3aed 100%);
  color: #fff;
  padding: 9px 18px;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.landing-hero-badge-ai i {
  font-size: 14px;
}

/* A light sweep across the pill every few seconds - enough to catch the eye
   on a page a doctor is skimming, slow enough not to nag. */
.landing-hero-badge-ai::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-20deg);
  animation: aiPillSweep 4.5s ease-in-out infinite;
}

@keyframes aiPillSweep {
  0%, 55% { left: -60%; }
  85%, 100% { left: 120%; }
}

.landing-hero-badge-soft {
  background: rgba(15, 23, 42, 0.05);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* The AI band ------------------------------------------- */
.landing-ai {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 100px 0;
  background: radial-gradient(1200px 500px at 15% 0%, #123258 0%, rgba(18, 50, 88, 0) 60%), #0b1220;
  color: #e2e8f0;
}

.landing-ai-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.4;
  pointer-events: none;
  animation: aiOrbDrift 18s ease-in-out infinite;
}

.landing-ai-orb-1 {
  width: 480px;
  height: 480px;
  background: #0d9488;
  top: -180px;
  left: -120px;
}

.landing-ai-orb-2 {
  width: 420px;
  height: 420px;
  background: #7c3aed;
  bottom: -200px;
  right: -100px;
  animation-delay: 6s;
}

@keyframes aiOrbDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -30px); }
}

.landing-ai-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.landing-ai-header {
  text-align: center;
  margin-bottom: 54px;
}

.landing-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.1);
  border: 1px solid rgba(94, 234, 212, 0.25);
  color: #5eead4;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 18px;
}

.landing-ai-header h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 16px;
}

.landing-ai-gradient {
  background: linear-gradient(135deg, #5eead4 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-ai-header p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.72);
  max-width: 680px;
  margin: 0 auto;
}

.landing-ai-header p em {
  font-style: normal;
  color: #ffffff;
  font-weight: 600;
}

.landing-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.landing-ai-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 34px 30px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.landing-ai-card:hover {
  transform: translateY(-6px);
  border-color: rgba(94, 234, 212, 0.45);
  box-shadow: 0 24px 50px rgba(2, 6, 23, 0.5);
}

.landing-ai-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.35);
  margin-bottom: 20px;
}

.landing-ai-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
}

.landing-ai-card p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(226, 232, 240, 0.72);
  margin: 0 0 18px;
}

.landing-ai-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.1);
  color: #5eead4;
  font-size: 12.5px;
  font-weight: 600;
}

.landing-ai-foot {
  text-align: center;
  margin-top: 48px;
}

.landing-ai-foot .btn-landing-primary {
  box-shadow: 0 12px 30px rgba(13, 148, 136, 0.45);
}

.landing-ai-foot-note {
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  color: rgba(226, 232, 240, 0.6);
}

/* Feature grid: the two AI cards are marked, not just first ------ */
.landing-feature-card-ai {
  border-color: rgba(124, 58, 237, 0.3);
  background: linear-gradient(180deg, #fbf9ff 0%, #ffffff 55%);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.08);
}

/* The gradient rule at the top of a card is a hover reward everywhere else.
   On these two it stays on, so the pair reads as one group at a glance. */
.landing-feature-card-ai::before {
  transform: scaleX(1);
}

.landing-feature-card-ai::after {
  content: 'AI';
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #fff;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3);
}

@media (max-width: 992px) {
  .landing-hero-badges {
    justify-content: center;
  }

  .landing-ai {
    padding: 80px 0;
  }

  .landing-ai-header h2 {
    font-size: 32px;
  }

  .landing-ai-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 768px) {
  .landing-ai {
    padding: 64px 0;
  }

  .landing-ai-header h2 {
    font-size: 27px;
  }

  .landing-ai-header p {
    font-size: 16px;
  }

  .landing-ai-grid {
    grid-template-columns: 1fr;
  }

  .landing-ai-card {
    padding: 28px 24px;
  }

  .landing-hero-badge-ai,
  .landing-hero-badge-soft {
    font-size: 12.5px;
    padding: 8px 14px;
  }
}

/* Vestibular safety: nothing here carries meaning, so it can all stop. */
@media (prefers-reduced-motion: reduce) {
  .landing-hero-badge-ai::after,
  .landing-ai-orb {
    animation: none;
  }
}

/* A hyphen is a legal line break, and at this column width the headline broke
   as "The AI-Powered E-" / "Prescription App" - the brand name split in two.
   Both halves are held together instead, so the line breaks at a space. */
.landing-nobreak,
.landing-hero-content h1 .gradient-text {
  white-space: nowrap;
}

/* Cards in the AI band carry different amounts of copy; without this the
   tag under each one sat at a different height across the row. */
.landing-ai-card {
  display: flex;
  flex-direction: column;
}

.landing-ai-card p {
  flex: 1 0 auto;
}

.landing-ai-card-tag {
  align-self: flex-start;
}

/* The two AI feature cards carry the brand gradient on their icon too, so the
   pair reads as one group even with the ribbon out of view. */
.landing-feature-card-ai .landing-feature-icon {
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

/* =========================================================
   Hero: the AI stage
   -----------------------------------------------------------------
   The hero used to be a pale mint-to-sky wash with a flat panel on
   the right, and it read as washed out next to the AI band further
   down the page. It is now the darkest, most saturated thing on the
   site: a moving aurora behind the copy, a faint grid over it, and a
   looping mock of the pad drafting a prescription. Nothing here is
   content - every claim the mock makes is written in the column
   beside it - so all of it stops for prefers-reduced-motion.
   ========================================================= */

.landing-hero {
  padding: 150px 0 110px;
  /* A lit navy rather than a flat one: the section carries its own colour even
     before the aurora above it. */
  background:
    radial-gradient(120% 85% at 82% -10%, #14336b 0%, rgba(20, 51, 107, 0) 58%),
    radial-gradient(90% 70% at 0% 100%, #0d3b45 0%, rgba(13, 59, 69, 0) 62%),
    linear-gradient(165deg, #0a1a3c 0%, #0a1330 48%, #0b1a3b 100%);
  color: #e2e8f0;
  border-bottom: 1px solid rgba(94, 234, 212, 0.12);
}

/* The aurora. Four soft colour fields drifting against each other - cheaper
   and calmer than an animated mesh gradient, and it degrades to a static
   wash if the animation is turned off. */
.landing-hero::before {
  content: '';
  position: absolute;
  top: -25%;
  left: -15%;
  right: -15%;
  bottom: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 8% 12%, rgba(16, 185, 129, 0.62) 0%, rgba(16, 185, 129, 0) 78%),
    radial-gradient(58% 58% at 92% 6%, rgba(139, 92, 246, 0.68) 0%, rgba(139, 92, 246, 0) 78%),
    radial-gradient(64% 64% at 76% 82%, rgba(56, 189, 248, 0.5) 0%, rgba(56, 189, 248, 0) 76%),
    radial-gradient(52% 52% at 16% 96%, rgba(244, 114, 182, 0.4) 0%, rgba(244, 114, 182, 0) 76%),
    radial-gradient(46% 46% at 48% 44%, rgba(13, 148, 136, 0.3) 0%, rgba(13, 148, 136, 0) 82%);
  filter: blur(46px);
  opacity: 1;
  animation: heroAurora 22s ease-in-out infinite alternate;
}

@keyframes heroAurora {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2.5%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
}

/* A faint engineering grid, masked so it fades out before the edges. */
.landing-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 38%, #000 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(75% 65% at 50% 38%, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.landing-hero-inner {
  z-index: 2;
}

/* One slow diagonal light across the whole section. */
.landing-hero .landing-hero-sheen {
  position: absolute;
  top: -60%;
  bottom: -60%;
  width: 38%;
  left: -50%;
  z-index: 1;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(165, 243, 252, 0.07) 50%, rgba(255, 255, 255, 0) 100%);
  animation: heroSheen 13s ease-in-out infinite;
}

@keyframes heroSheen {
  0%, 12% { left: -50%; }
  70%, 100% { left: 120%; }
}

/* --- the copy, re-lit for a dark stage --- */
.landing-hero-content h1 {
  color: #ffffff;
  text-shadow: 0 2px 30px rgba(2, 6, 23, 0.4);
}

.landing-hero .gradient-text {
  background: linear-gradient(135deg, #5eead4 0%, #a5b4fc 55%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-hero-content p {
  color: rgba(226, 232, 240, 0.78);
}

.landing-hero .landing-hero-badge-soft {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.landing-hero .btn-landing-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.landing-hero .btn-landing-secondary:hover {
  background: rgba(94, 234, 212, 0.14);
  border-color: rgba(94, 234, 212, 0.6);
  color: #ffffff;
}

.landing-hero .landing-guide-link {
  color: #5eead4;
}

.landing-hero .landing-guide-link span {
  color: rgba(226, 232, 240, 0.6);
}

.landing-hero .landing-hero-trust {
  color: rgba(226, 232, 240, 0.7);
}

.landing-hero .trust-item i {
  color: #5eead4;
}

/* The two door cards (doctor sign-in, patient booking) become glass. */
.landing-hero .landing-signin-hint,
.landing-hero .landing-patient-cta {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.landing-hero .signin-hint-text strong,
.landing-hero .patient-cta-text strong {
  color: #ffffff;
}

.landing-hero .signin-hint-text span,
.landing-hero .patient-cta-text span {
  color: rgba(226, 232, 240, 0.68);
}

/* --- the bar floats over the dark hero until the page moves --- */
.landing-nav:not(.scrolled):not(.menu-open) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing-nav:not(.scrolled):not(.menu-open) .landing-logo {
  color: #ffffff;
}

.landing-nav:not(.scrolled):not(.menu-open) .landing-nav-links a {
  color: rgba(255, 255, 255, 0.82);
}

.landing-nav:not(.scrolled):not(.menu-open) .landing-nav-links a:hover {
  color: #5eead4;
}

.landing-nav:not(.scrolled):not(.menu-open) .landing-nav-links .landing-nav-ai {
  color: #c4b5fd;
}

.landing-nav:not(.scrolled):not(.menu-open) .landing-mobile-toggle {
  color: #ffffff;
}

.landing-nav.menu-open {
  background: rgba(255, 255, 255, 0.98);
}

/* --- the pad, drafting --- */
.ai-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.ai-stage-glow {
  position: absolute;
  top: -12%;
  left: -12%;
  width: 124%;
  height: 124%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(124, 58, 237, 0.5) 0%, rgba(13, 148, 136, 0.28) 38%, rgba(6, 11, 24, 0) 70%);
  filter: blur(50px);
  animation: aiStagePulse 7s ease-in-out infinite;
}

@keyframes aiStagePulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.ai-window {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(2, 6, 23, 0.94) 100%);
  box-shadow: 0 34px 70px rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: floatImage 6s ease-in-out infinite;
}

.ai-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.ai-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.ai-dot:first-child { background: rgba(248, 113, 113, 0.65); }
.ai-dot:nth-child(2) { background: rgba(251, 191, 36, 0.65); }
.ai-dot:nth-child(3) { background: rgba(52, 211, 153, 0.65); }

.ai-window-title {
  flex: 1 1 auto;
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.6);
  letter-spacing: 0.2px;
}

.ai-window-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #fff;
  background: linear-gradient(135deg, #0d9488 0%, #7c3aed 100%);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
}

.ai-window-body {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 22px;
}

/* A light sweeping down the pad while the draft is being built. */
.ai-window-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -140px;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(94, 234, 212, 0) 0%, rgba(94, 234, 212, 0.16) 50%, rgba(94, 234, 212, 0) 100%);
  animation: aiScan 9s linear infinite;
}

@keyframes aiScan {
  0%, 15% { transform: translateY(0); opacity: 0; }
  18% { opacity: 1; }
  29% { transform: translateY(460px); opacity: 0; }
  100% { transform: translateY(460px); opacity: 0; }
}

.ai-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-ask i {
  color: #5eead4;
  font-size: 14px;
}

/* Typewriter: a fixed character count in a monospaced face, so the width can
   be stepped one character at a time. */
.landing-page .ai-ask-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 27ch;
  font-family: 'DejaVu Sans Mono', 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  color: #e2e8f0;
  animation: aiType 9s steps(27, end) infinite;
}

@keyframes aiType {
  0%, 2% { width: 0; }
  17%, 88% { width: 27ch; }
  94%, 100% { width: 0; }
}

.ai-caret {
  width: 2px;
  height: 15px;
  background: #5eead4;
  animation: aiCaret 0.9s steps(1, end) infinite;
}

@keyframes aiCaret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.ai-thinking {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 2px 4px;
  font-size: 12.5px;
  animation: aiThink 9s ease-in-out infinite;
}

.ai-thinking em {
  font-style: normal;
  margin-left: 6px;
  color: rgba(226, 232, 240, 0.6);
}

.ai-think-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5eead4;
  animation: aiThinkDot 1.1s ease-in-out infinite;
}

.ai-think-dot:nth-child(2) { animation-delay: 0.16s; }
.ai-think-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes aiThink {
  0%, 16% { opacity: 0; }
  19%, 26% { opacity: 1; }
  30%, 100% { opacity: 0; }
}

@keyframes aiThinkDot {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.45; }
  35% { transform: translateY(-4px); opacity: 1; }
}

.ai-rx {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.ai-rx li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(94, 234, 212, 0.55);
  animation: aiRxIn 9s ease-out infinite both;
}

.ai-rx li:nth-child(2) { animation-delay: 0.4s; }
.ai-rx li:nth-child(3) { animation-delay: 0.8s; }

@keyframes aiRxIn {
  0%, 25% { opacity: 0; transform: translateY(10px); }
  32%, 87% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(10px); }
}

.ai-rx-n {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
  background: #5eead4;
}

.ai-rx b {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.ai-rx em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.62);
  white-space: nowrap;
}

/* The pad prints Bangla timing, so the mock shows Bangla timing. */
.landing-page .ai-bn {
  font-family: 'Noto Sans Bengali', 'SolaimanLipi', 'Nirmala UI', 'Kalpurush', sans-serif;
}

.ai-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5eead4;
  background: rgba(94, 234, 212, 0.1);
  animation: aiDone 9s ease-out infinite both;
}

@keyframes aiDone {
  0%, 42% { opacity: 0; transform: translateY(8px); }
  49%, 87% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(8px); }
}

@media (max-width: 992px) {
  .landing-hero {
    padding: 130px 0 80px;
  }

  .ai-stage {
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .ai-window-body {
    padding: 16px 14px 18px;
  }

  .landing-page .ai-ask-text {
    font-size: 11.5px;
  }

  .ai-rx b {
    font-size: 12.5px;
  }

  .ai-rx em {
    font-size: 11px;
  }
}

/* Nothing in the stage carries meaning, so all of it can stop. */
@media (prefers-reduced-motion: reduce) {
  .landing-hero::before,
  .ai-stage-glow,
  .ai-window,
  .ai-window-body::after,
  .ai-caret,
  .ai-think-dot,
  .landing-page .ai-ask-text {
    animation: none;
  }

  .landing-page .ai-ask-text {
    width: 27ch;
  }

  .ai-thinking {
    animation: none;
    opacity: 0;
  }

  .ai-rx li,
  .ai-done {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* The three chips ride around the pad, not over it: the pad is the thing
   being read, and at the old positions one of them sat on the medicine rows
   and another was clipped by the right edge of the window. */
.ai-stage .hero-floating-card {
  z-index: 3;
}

.ai-stage .card-1 {
  top: -58px;
  right: 34px;
  left: auto;
}

.ai-stage .card-2 {
  bottom: -22px;
  left: -34px;
  top: auto;
}

.ai-stage .card-3 {
  bottom: -24px;
  right: 40px;
}

@media (max-width: 1180px) {
  .ai-stage .card-2 {
    left: -8px;
  }
}

/* The counters sit between the hero and the AI band. Left white they cut the
   two dark sections into stripes; on the same dark ground the top of the page
   reads as one block and the gradient numbers carry it. */
.landing-trust {
  background: #0a1330;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.landing-trust .landing-trust-label {
  color: rgba(226, 232, 240, 0.62);
}

/* How the AI is actually used, in the order a doctor meets it. */
.landing-ai-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin: 0 0 40px;
}

.landing-ai-step {
  flex: 1 1 0;
  max-width: 320px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.landing-ai-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #06231f;
  background: linear-gradient(135deg, #5eead4 0%, #a5b4fc 100%);
}

.landing-ai-step b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.landing-ai-step em {
  display: block;
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.62);
}

.landing-ai-step-arrow {
  align-self: center;
  color: rgba(94, 234, 212, 0.55);
  font-size: 18px;
}

@media (max-width: 860px) {
  .landing-ai-flow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .landing-ai-step {
    max-width: none;
  }

  .landing-ai-step-arrow {
    transform: rotate(90deg);
    font-size: 16px;
  }
}

/* On a phone the pad is taller than the headline it is illustrating, and with
   the visual ordered first a visitor met the mock before they were told what
   the product is. Copy first, then the pad. Tablets keep the original order:
   there the pad and the headline share a screen. */
@media (max-width: 768px) {
  .landing-hero-visual {
    order: 2;
    margin-top: 28px;
  }
}

/* All features, area by area (the block under the Features cards). */
.landing-allf {
  max-width: 1200px;
  margin: 72px auto 0;
  padding: 0 20px;
}
.landing-allf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.landing-allf-head h3 {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}
.landing-allf-head p {
  font-size: 15px;
  color: #64748b;
  margin: 0 0 10px;
}
.landing-allf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: #64748b;
}
.landing-allf-legend .landing-allf-tag { margin: 0 4px 0 0; }
.landing-allf-toggle {
  border: 2px solid #0d9488;
  background: #fff;
  color: #0d9488;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease;
}
.landing-allf-toggle:hover { background: #0d9488; color: #fff; }
.landing-allf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.landing-allf-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 22px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.landing-allf-card:hover {
  border-color: #99d5cc;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}
.landing-allf-card header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.landing-allf-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.landing-allf-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 1px 0 3px;
}
.landing-allf-card header p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}
.landing-allf-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.landing-allf-card li {
  display: flex;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
}
.landing-allf-card li .fa-check {
  color: #0d9488;
  margin-top: 4px;
  font-size: 12px;
}
.landing-allf-card li b { color: #0f172a; font-weight: 600; }
.landing-allf-tag {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  border-radius: 6px;
  padding: 0 7px;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}
.landing-allf-tag.is-optional { background: #eef2ff; color: #4338ca; }
.landing-allf-tag.is-paid { background: #fff7ed; color: #b45309; }
.landing-allf-tag.is-new { background: #ecfdf5; color: #047857; }
.landing-allf-more {
  border: 0;
  background: none;
  color: #0d9488;
  font-weight: 700;
  font-size: 13.5px;
  padding: 8px 0 2px;
}
.landing-allf-more:hover { text-decoration: underline; }
.landing-allf-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 36px;
  text-align: center;
}
.landing-allf-cta span { color: #64748b; font-size: 14px; }
.landing-allf-cta span a { color: #0d9488; font-weight: 600; }

@media (max-width: 1024px) {
  .landing-allf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .landing-allf { margin-top: 48px; padding: 0 16px; }
  .landing-allf-head h3 { font-size: 22px; }
  .landing-allf-toggle { width: 100%; }
  .landing-allf-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .landing-allf-card { padding: 18px 16px 12px; }
}

/* The hero's first paragraph carries the hook, so it is set apart from the
   explanation under it. */
.landing-hero-lead {
  font-size: 1.08em;
  color: #cfe3f5;
  font-weight: 500;
}

/* Public practice overview */
.practice-highlights{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.practice-highlights span{padding:7px 11px;border:1px solid rgba(94,234,212,.25);border-radius:24px;color:#99f6e4;font-size:13px;background:rgba(13,148,136,.1)}
.patient-registration-link{display:inline-block;margin:12px 0;color:#5eead4;font-weight:600}.practice-overview{padding:72px 0;background:#f8fafc;color:#0f172a}.practice-overview .landing-section-header h2{color:#0f172a}.practice-overview .landing-section-header p{color:#475569}.practice-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.practice-overview-grid article{padding:24px;border:1px solid #e2e8f0;border-radius:16px;background:#fff}.practice-overview h3{font-size:20px;line-height:1.4;color:#0f766e;margin:0 0 12px}.practice-overview p{font-size:16px;line-height:1.7;color:#475569}.practice-patient-panel{display:flex;align-items:center;gap:18px;margin-top:24px;padding:28px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:16px}.practice-patient-panel>div{flex:1}.practice-patient-panel a{white-space:nowrap}.practice-patient-panel .btn-landing-secondary{color:#0f766e;border-color:#0f766e}.practice-patient-panel p{margin:0}@media(max-width:1000px){.practice-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-patient-panel{flex-wrap:wrap}.practice-patient-panel>div{flex-basis:100%}}@media(max-width:540px){.practice-overview-grid{grid-template-columns:1fr}.practice-overview{padding:44px 0}.practice-patient-panel a{width:100%;text-align:center;white-space:normal}}

.practice-overview .landing-container{max-width:1200px;margin:0 auto;padding:0 24px}.landing-page,.landing-page button,.landing-page a{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.landing-hero-content,.landing-hero-content h1,.landing-hero-content p,.landing-hero-buttons,.landing-hero-badges,.landing-hero-visual{animation:none!important}.landing-hero .landing-fade-up{opacity:1!important;transform:none!important}@media(prefers-reduced-motion:reduce){.landing-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.practice-highlights span{color:#115e59;background:#ccfbf1;border-color:#99f6e4}.patient-registration-link{color:#0f766e}.landing-hero-badge-soft{color:#115e59;background:#ccfbf1;border-color:#99f6e4}

.landing-hero .landing-hero-badge{animation:none!important;opacity:1!important}.landing-hero-badge-ai{background:#0f766e!important;color:#fff!important}.landing-hero-badge-soft{opacity:1!important}

.landing-page,.landing-page :not(.fa){font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Bengali",sans-serif!important}

/* Quiet supporting details so the heading and primary action lead the hero. */
.landing-hero .practice-highlights {
  gap: 10px 20px;
  margin: 22px 0 26px;
}
.landing-hero .practice-highlights span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.6;
}
.landing-hero .practice-highlights span::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: #2dd4bf;
}
.landing-hero .hero-floating-card {
  background: #17213b;
  color: #e2e8f0;
  border: 1px solid #354361;
  border-radius: 10px;
  padding: 11px 14px;
  gap: 9px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
  transform: none;
}
.landing-hero .hero-floating-card i {
  color: #5eead4;
  font-size: 16px;
}
.landing-hero .landing-hero-badge-ai {
  background: rgba(20, 184, 166, .12) !important;
  color: #99f6e4 !important;
  border: 1px solid rgba(45, 212, 191, .3);
  box-shadow: none;
}
.landing-hero .landing-hero-badge-ai::after { display: none; }
.landing-hero .landing-hero-badge-soft {
  background: rgba(148, 163, 184, .06);
  border-color: rgba(148, 163, 184, .2);
  color: #cbd5e1;
}
.landing-hero .patient-registration-link { color: #5eead4; }

/* Keep the public landing page on its colourful dark palette throughout. */
.landing-page { background: #0b102a; color: #e2e8f0; }
.landing-page .landing-hero {
  background: radial-gradient(ellipse at 0% 15%, rgba(8,145,178,.28), transparent 55%),
              radial-gradient(ellipse at 100% 0%, rgba(99,102,241,.24), transparent 55%), #0b102a;
}
.landing-page .landing-section,
.landing-page .practice-overview {
  background: radial-gradient(ellipse at 10% 0%, rgba(13,148,136,.14), transparent 65%), #0c1430;
  color: #e2e8f0;
}
.landing-page .landing-section-alt {
  background: radial-gradient(ellipse at 90% 10%, rgba(124,58,237,.18), transparent 65%), #11132f;
}
.landing-page #features {
  background: radial-gradient(ellipse at 0% 50%, rgba(8,145,178,.15), transparent 65%), #0c1430;
}
.landing-page #pricing {
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.2), transparent 65%), #10122e;
}
.landing-page #faq {
  background: radial-gradient(ellipse at 100% 100%, rgba(13,148,136,.15), transparent 65%), #0b142b;
}
.landing-page .landing-section h2,
.landing-page .landing-section h3,
.landing-page .landing-section h4,
.landing-page .practice-overview h2,
.landing-page .practice-overview h3 { color: #f1f5f9; }
.landing-page .landing-section p,
.landing-page .practice-overview p,
.landing-page .landing-section .landing-section-header p { color: #bac8de; }
.landing-page .section-badge,
.landing-page .landing-section-label { color: #5eead4; }
.landing-page .practice-overview-grid article,
.landing-page .landing-feature-card,
.landing-page .landing-testimonial-card,
.landing-page .landing-story,
.landing-page .landing-allf-card,
.landing-page .landing-faq-item {
  background: linear-gradient(145deg, rgba(30,41,74,.9), rgba(16,25,49,.95));
  border-color: #334263;
  box-shadow: 0 12px 32px rgba(2,6,23,.12);
}
.landing-page .practice-overview-grid article:nth-child(2n) {
  background: linear-gradient(145deg, #272044, #151b36);
}
.landing-page .practice-patient-panel {
  background: linear-gradient(120deg, #103735, #172b43 65%, #252043);
  border-color: #285c60;
}
.landing-page .practice-patient-panel h3 { color: #99f6e4; }
.landing-page .practice-patient-panel .btn-landing-secondary {
  color: #e2e8f0; background: rgba(255,255,255,.04); border-color: #568589;
}
.landing-page .landing-pricing-card {
  background: linear-gradient(145deg, #1d2546, #111a34);
  border-color: #344466;
}
.landing-page .landing-pricing-card.popular {
  background: linear-gradient(145deg, #173b40, #142c3c 55%, #232344);
  border-color: #2dd4bf;
}
.landing-page .landing-pricing-card.enterprise {
  background: linear-gradient(145deg, #272148, #18233d);
  border-color: #8b7fc9;
}
.landing-page .landing-pricing-price,
.landing-page .landing-pricing-price span,
.landing-page .landing-pricing-talk,
.landing-page .landing-pricing-value b,
.landing-page .landing-testimonial-info strong,
.landing-page .landing-story-who strong,
.landing-page .landing-allf-card li b,
.landing-page .landing-faq-question { color: #f1f5f9; }
.landing-page .landing-pricing-features li,
.landing-page .landing-pricing-period,
.landing-page .landing-pricing-note,
.landing-page .landing-pricing-trust,
.landing-page .landing-pricing-review,
.landing-page .landing-pricing-value,
.landing-page .landing-testimonial-info span,
.landing-page .landing-story-who span,
.landing-page .landing-allf-card li,
.landing-page .landing-allf-legend,
.landing-page .landing-allf-cta span { color: #bac8de; }
.landing-page .landing-allf-card li { border-color: #334263; }
.landing-page .landing-section .btn-landing-secondary,
.landing-page .landing-allf-toggle {
  background: rgba(255,255,255,.04); color: #99f6e4; border-color: #427675;
}
.landing-page .landing-billing-toggle { background: #17223f; border-color: #344466; }
.landing-page .landing-billing-toggle button { color: #bac8de; }
.landing-page .landing-billing-toggle button.active { background: #285058; color: #fff; }
.landing-page .landing-pricing-value,
.landing-page .landing-pricing-trust { background: rgba(20,184,166,.08); border-color: #285c60; }
.landing-page .landing-pricing-review { background: #17223f; border-color: #344466; }
.landing-page .landing-pricing-rowhead h3 { color: #e8eefc; }
.landing-page .landing-pricing-rowhead p,
.landing-page .landing-pricing-sub { color: #93a4c0; }
.landing-page .landing-pricing-review b { color: #dbe6f6; }
.landing-page .landing-guide { background: #17223f; border-color: #344466; }
.landing-page .landing-guide-open,
.landing-page .landing-step-link,
.landing-page .landing-pricing-alt-cta,
.landing-page .landing-allf-more { color: #5eead4; }
.landing-page .landing-nav,
.landing-page .landing-nav.scrolled,
.landing-page .landing-nav.menu-open,
.landing-page .landing-mobile-menu { background: #101831; border-color: #2c3756; }
.landing-page .landing-nav .landing-logo,
.landing-page .landing-nav .landing-nav-links a,
.landing-page .landing-nav .landing-mobile-toggle,
.landing-page .landing-mobile-menu a { color: #e2e8f0; }
/* Match the standalone preview to the same dark hero. */
.landing-page .public-patient-entry,
.landing-page .public-ai-preview { background: #17213b; border-color: #354361; color: #e2e8f0; }
.landing-page .public-patient-entry strong,
.landing-page .public-ai-preview h3,
.landing-page .public-ai-preview-head,
.landing-page .public-ai-row { color: #f1f5f9; }
.landing-page .public-patient-entry p,
.landing-page .public-ai-row small { color: #bac8de; }
.landing-page .public-patient-entry a { color: #5eead4; }
.landing-page .public-ai-preview-head { border-color: #354361; }
.landing-page .public-ai-preview .public-ai-case,
.landing-page .public-ai-footer { background: #101a31; color: #99cfcf; }
.landing-page .public-ai-row b,
.landing-page .public-ai-preview-head span { background: #1a4148; color: #99f6e4; }
.landing-page .landing-hero-content h1 { color: #fff; }
.landing-page .landing-hero-content p { color: #bac8de; }
.landing-page .landing-hero .practice-highlights span { color: #cbd5e1; }
.landing-page .landing-hero .landing-hero-badge-ai {
  background: rgba(20,184,166,.12)!important; color: #99f6e4!important; border-color: #285c60;
}
.landing-page .landing-hero .landing-hero-badge-soft {
  background: rgba(148,163,184,.06)!important; color: #cbd5e1!important; border-color: #344466;
}

.landing-page .landing-roi-panel,
.landing-page .landing-roi-where-item {
  background: #17223f; border-color: #344466;
}
.landing-page .landing-roi-inputs {
  background: #17223f; border-color: #344466;
}
.landing-page .landing-roi-field input {
  background: #0e1831; color: #f1f5f9; border-color: #425270;
}
.landing-page .landing-roi-field span { color: #cbd5e1; }
.landing-page .landing-pricing-addon { color: #a9bad4; }
.landing-page .landing-feature-card:nth-child(3n+2),
.landing-page .landing-allf-card:nth-child(3n+2) {
  background: linear-gradient(145deg, #252047, #161d37);
}
.landing-page .landing-feature-card:nth-child(3n),
.landing-page .landing-allf-card:nth-child(3n) {
  background: linear-gradient(145deg, #15333a, #131f37);
}
.landing-page .landing-section .landing-faq-question:hover { color: #5eead4; }
.landing-page .landing-nav .landing-nav-links .landing-nav-ai { color: #c4b5fd; }

.landing-page .landing-trust {background:#0a1330;border-color:#293657}
.landing-page .landing-trust-label {color:#bac8de}
.landing-page .landing-pricing-price {background-image:linear-gradient(135deg,#5eead4,#c4b5fd)}
.landing-page .landing-pricing-price span {-webkit-text-fill-color:#bac8de}
.landing-page .landing-pricing-price [data-plan-price] {font-size:48px;font-weight:800;color:#99f6e4;-webkit-text-fill-color:#99f6e4}
.landing-page .landing-nav-signin {background:#17213b;color:#99f6e4;border-color:#427675;box-shadow:none;animation:none}

/* Stronger landing-page actions, with consistent dark surfaces. */
.landing-page .landing-nav .landing-nav-signin,
.landing-page .landing-mobile-menu .landing-nav-signin {
  background: #115e59 !important; color: #fff !important; border: 1px solid #2a8b82;
  padding: 11px 22px !important; min-height: 44px; border-radius: 10px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.18); animation: none;
}
.landing-page .landing-nav .landing-nav-signin:hover,
.landing-page .landing-mobile-menu .landing-nav-signin:hover { background: #134e4a !important; border-color: #47a69c; }
.landing-page .signin-hint-btn,
.landing-page .btn-landing-primary,
.landing-page .landing-nav-cta { background: #115e59 !important; color: #fff !important; }
.landing-page .signin-hint-btn:hover,
.landing-page .btn-landing-primary:hover,
.landing-page .landing-nav-cta:hover { background: #134e4a !important; }
.landing-page .btn-landing-secondary,
.landing-page .landing-hero .btn-landing-secondary,
.landing-page .landing-section .btn-landing-secondary,
.landing-page .practice-patient-panel .btn-landing-secondary,
.landing-page .landing-cta .btn-landing-secondary,
.landing-page .landing-allf-toggle {
  background: #1e293b !important; color: #f1f5f9 !important; border-color: #52647c;
  min-height: 44px;
}
.landing-page .btn-landing-secondary:hover,
.landing-page .landing-allf-toggle:hover { background: #334155 !important; color: #fff !important; border-color: #8295ad; }
.landing-page .patient-cta-btn { background: #075985; color: #fff !important; }
.landing-page .patient-cta-btn:hover { background: #0c4a6e; }
.landing-page .landing-billing-toggle { background: #0f172a; }
.landing-page .landing-billing-toggle button { background: transparent; color: #cbd5e1; min-height: 44px; }
.landing-page .landing-billing-toggle button.active { background: #115e59; color: #fff; }
.landing-page .landing-allf-tag { background: #173934; color: #b4f0df; border: 1px solid #285c55; }
.landing-page .landing-allf-tag.is-paid { background: #392b18; color: #f6d39c; border-color: #665034; }
.landing-page .landing-nav-signin:focus-visible,
.landing-page .signin-hint-btn:focus-visible,
.landing-page .btn-landing-primary:focus-visible,
.landing-page .btn-landing-secondary:focus-visible,
.landing-page .landing-billing-toggle button:focus-visible,
.landing-page .landing-allf-toggle:focus-visible { outline: 3px solid #5eead4; outline-offset: 4px; }

/* Getting started: vector doctor portrait and a connected four-step journey. */
.landing-page .getting-started-journey { max-width: 1160px; margin: 0 auto; }
.landing-page .getting-started-doctor { display:flex; align-items:center; gap:32px; padding:30px; border:1px solid #315363; border-radius:20px; background:linear-gradient(120deg,#12363d,#18243c); }
.landing-page .getting-started-doctor > svg { flex:0 0 150px; width:150px; height:150px; }
.landing-page .getting-started-doctor h3 { margin:6px 0 10px; color:#f1f5f9; font-size:26px; line-height:1.35; }
.landing-page .getting-started-doctor p { margin:0 0 18px; color:#bac8de; line-height:1.7; }
.landing-page .getting-started-eyebrow { display:block; color:#88d9cd; font-size:11px; letter-spacing:1.2px; font-weight:600; text-transform:uppercase; }
.landing-page .getting-started-track { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:0; margin:32px 0 0; list-style:none; }
.landing-page .getting-started-step { position:relative; min-width:0; }
.landing-page .getting-started-step:not(:last-child)::before { content:""; position:absolute; height:2px; background:#355368; left:48px; right:-20px; top:23px; }
.landing-page .getting-started-marker { position:relative; display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:16px; border-radius:50%; background:#134e4a; color:#e0fffa; border:1px solid #438a81; font-size:15px; font-weight:700; }
.landing-page .getting-started-step-body { height:calc(100% - 64px); padding:22px; border:1px solid #334263; border-radius:14px; background:#17223b; }
.landing-page .getting-started-symbol { display:block; width:34px; height:34px; margin-bottom:16px; color:#70d4c5; }
.landing-page .getting-started-step:nth-child(2) .getting-started-symbol { color:#a9b7ff; }
.landing-page .getting-started-step:nth-child(3) .getting-started-symbol { color:#f3cc8a; }
.landing-page .getting-started-step:nth-child(4) .getting-started-symbol { color:#8fd1fa; }
.landing-page .getting-started-step h4 { color:#f1f5f9; margin:10px 0; font-size:18px; line-height:1.4; }
.landing-page .getting-started-step p { color:#bac8de; font-size:14px; line-height:1.75; margin:0; }
.landing-page .getting-started-help { color:#bac8de; font-size:13px; text-align:center; margin:24px 0 0; }
@media(max-width:900px) { .landing-page .getting-started-track { grid-template-columns:repeat(2,minmax(0,1fr)); } .landing-page .getting-started-step:nth-child(2)::before { display:none; } }
@media(max-width:600px) {
 .landing-page .getting-started-doctor { flex-direction:column; gap:16px; padding:24px 20px; text-align:center; }
 .landing-page .getting-started-doctor > svg { flex-basis:auto; width:120px; height:120px; }
 .landing-page .getting-started-doctor h3 { font-size:23px; }
 .landing-page .getting-started-doctor .btn-landing-primary { width:100%; justify-content:center; padding:13px 16px; }
 .landing-page .getting-started-track { grid-template-columns:1fr; gap:18px; }
 .landing-page .getting-started-step { display:flex; gap:14px; }
 .landing-page .getting-started-marker { flex:0 0 40px; width:40px; height:40px; margin-top:16px; }
 .landing-page .getting-started-step-body { height:auto; flex:1; padding:20px; }
 .landing-page .getting-started-step:not(:last-child)::before { display:block; top:57px; bottom:-34px; left:19px; right:auto; height:auto; width:2px; }
 .landing-page .getting-started-symbol { width:28px; height:28px; margin-bottom:12px; }
}

/* ---------------------------------------------------------------------------
   Doctors' voices slider ("ডাক্তারদের কথা")
   ---------------------------------------------------------------------------
   Sits near the top of the page, above the AI band. Bangla, because the people
   quoted are Bangladeshi doctors and that is the language they said it in; the
   written grid further down stays in English.

   The track is a real horizontally-scrolling element with scroll-snap, NOT a
   transform carousel. That matters: with JavaScript off, or before it runs,
   the section is still a usable, swipeable row of cards rather than five
   stacked quotes or one frozen slide. The arrows, dots and autoplay in
   landing-runtime.js / LandingController are enhancements on top of it.
--------------------------------------------------------------------------- */
.landing-voices {
  padding: 72px 0;
  background: #f8fafc;
  overflow: hidden;
}

.landing-voices-head {
  max-width: 720px;
  margin: 0 auto 36px;
  padding: 0 20px;
  text-align: center;
}

.landing-voices-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 16px;
  border-radius: 24px;
  background: #ccfbf1;
  color: #115e59;
  font-size: 13px;
  font-weight: 600;
}

.landing-voices-head h2 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.45;
  color: #0f172a;
}

.landing-voices-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #475569;
}

.landing-voices-slider {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* scrollbar hidden on purpose - the dots below are the position indicator,
   and a native bar under a card looks like a bug on a marketing page. */
.landing-voices-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0;
}

.landing-voices-track::-webkit-scrollbar { display: none; }
.landing-voices-track:focus { outline: none; }
.landing-voices-track:focus-visible { outline: 3px solid #0d9488; outline-offset: 6px; border-radius: 24px; }

.landing-voice {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}

.landing-voice-photo {
  position: relative;
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
}

.landing-voice-photo img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  background: #e2e8f0;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px #5eead4, 0 10px 26px rgba(15, 23, 42, .18);
}

/* The quote mark rides the photo rather than the text, so a long Bangla
   sentence never has to wrap around it. */
.landing-voice-quotemark {
  position: absolute;
  right: -6px;
  bottom: 4px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-size: 16px;
}

.landing-voice-body { flex: 1; min-width: 0; }

.landing-voice-stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 14px;
}

.landing-voice-quote {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  font-size: 21px;
  line-height: 1.95;
  font-weight: 500;
  color: #1e293b;
}

.landing-voice-who strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #0f172a;
}

.landing-voice-role,
.landing-voice-place {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
}

.landing-voice-place {
  margin-top: 2px;
  color: #0f766e;
  font-weight: 600;
}

/* Controls */
.landing-voices-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}

.landing-voices-arrow {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  color: #0f766e;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.landing-voices-arrow:hover {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

.landing-voices-arrow:focus-visible { outline: 3px solid #0d9488; outline-offset: 3px; }

.landing-voices-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-voices-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.landing-voices-dot.is-active {
  width: 30px;
  border-radius: 6px;
  background: #0f766e;
}

.landing-voices-dot:focus-visible { outline: 3px solid #0d9488; outline-offset: 3px; }

@media (max-width: 860px) {
  .landing-voice {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 22px;
    padding: 32px 24px;
  }
  .landing-voice-photo,
  .landing-voice-photo img { flex-basis: 140px; width: 140px; height: 140px; }
  /* flex:1 means "take the leftover height" once the card is a column, which
     is what left a short quote pinned to the top of a tall card. */
  .landing-voice-body { flex: 0 1 auto; }
  .landing-voice-quotemark { right: 2px; bottom: 8px; width: 38px; height: 38px; font-size: 14px; }
  .landing-voice-quote { font-size: 18px; line-height: 1.9; }
  .landing-voices-head h2 { font-size: 26px; }
}

@media (max-width: 560px) {
  .landing-voices { padding: 48px 0; }
  .landing-voices-slider { padding: 0 16px; }
  .landing-voice { padding: 28px 20px; }
  .landing-voice-quote { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-voices-track { scroll-behavior: auto; }
}

/* Dark palette, to match the rest of the public page. */
.landing-page .landing-voices {
  background: radial-gradient(ellipse at 15% 0%, rgba(124, 58, 237, .18), transparent 62%), #0c1430;
}
.landing-page .landing-voices-head h2 { color: #f1f5f9; }
.landing-page .landing-voices-head p { color: #bac8de; }
.landing-page .landing-voices-tag {
  background: rgba(20, 184, 166, .12);
  border: 1px solid rgba(45, 212, 191, .3);
  color: #99f6e4;
}
.landing-page .landing-voice {
  background: linear-gradient(145deg, rgba(30, 41, 74, .92), rgba(16, 25, 49, .96));
  border-color: #334263;
  box-shadow: 0 16px 40px rgba(2, 6, 23, .3);
}
.landing-page .landing-voice-photo img { border-color: #1b2342; }
.landing-page .landing-voice-quotemark { background: #134e4a; color: #99f6e4; }
.landing-page .landing-voice-quote { color: #e8eefc; }
.landing-page .landing-voice-who strong { color: #f1f5f9; }
.landing-page .landing-voice-role { color: #bac8de; }
.landing-page .landing-voice-place { color: #5eead4; }
.landing-page .landing-voices-arrow {
  background: #17223f;
  border-color: #427675;
  color: #99f6e4;
}
.landing-page .landing-voices-arrow:hover { background: #115e59; border-color: #47a69c; color: #fff; }
.landing-page .landing-voices-dot { background: #3a4867; }
.landing-page .landing-voices-dot.is-active { background: #2dd4bf; }

/* ---------------------------------------------------------------------------
   Hero voice card
   ---------------------------------------------------------------------------
   The testimonial a visitor reads without scrolling. It lives in the hero grid
   as a third child, between the copy and the pad mock, and the placement rules
   below are what put it in the right-hand column above the mock on a desktop
   and first on a phone. Source order stays copy -> voices -> visual so that a
   screen reader and a no-CSS render both still lead with what the product is.

   All five doctors share one grid cell, so the card is as tall as the longest
   quote and does not resize as it rotates - which matters when the pad mock is
   sitting directly underneath it.
--------------------------------------------------------------------------- */
.hero-voices {
  width: 100%;
  max-width: 520px;
  padding: 24px 26px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
  text-align: left;
}

.hero-voices-stack { display: grid; }

.hero-voice {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}

.hero-voice.is-on { opacity: 1; visibility: visible; }

.hero-voice-stars {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.hero-voice-quote {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.9;
  font-weight: 500;
  color: #1e293b;
}

.hero-voice-who {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hero-voice-photo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  background: #e2e8f0;
  box-shadow: 0 0 0 3px #5eead4;
}

.hero-voice-id { min-width: 0; }

.hero-voice-id strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #0f172a;
}

.hero-voice-role,
.hero-voice-place {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: #64748b;
}

.hero-voice-place { color: #0f766e; font-weight: 600; }

.hero-voices-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.hero-voices-dots { display: flex; align-items: center; gap: 8px; }

.hero-voices-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.hero-voices-dot.is-active { width: 24px; border-radius: 5px; background: #0f766e; }
.hero-voices-dot:focus-visible { outline: 3px solid #0d9488; outline-offset: 3px; }

.hero-voices-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #0f766e;
  white-space: nowrap;
  text-decoration: none;
}

.hero-voices-more:hover { color: #0d9488; }
.hero-voices-more:focus-visible { outline: 3px solid #0d9488; outline-offset: 3px; }

/* Desktop: fill the gap over the pad mock. The copy column spans both rows so
   it keeps its own vertical centring; the card and the mock share column two. */
@media (min-width: 993px) {
  .landing-hero-inner {
    grid-template-rows: auto auto;
    align-items: center;
  }
  .landing-hero-content { grid-column: 1; grid-row: 1 / span 2; }
  .hero-voices { grid-column: 2; grid-row: 1; justify-self: center; margin-bottom: 4px; }
  .landing-hero-visual { grid-column: 2; grid-row: 2; }
}

/* One column from here down. The card goes first - ahead of both the copy and
   the mock - because being seen without scrolling is the whole point of it. */
@media (max-width: 992px) {
  /* The column count is restated rather than inherited: the prerendered copy
     of this page carries its own hero rules that only collapse at 900px, and
     between 901 and 992 a three-item two-column grid puts the card where the
     headline should be. */
  /* minmax(0, 1fr) and min-width: 0, not a bare 1fr: a 1fr track never
     shrinks below its widest item's min-content, which at 320px pushed the
     whole hero 19px past the right edge, where overflow: hidden cut it off. */
  .landing-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .landing-hero-inner > * { min-width: 0; }
  .hero-voices { order: -2; margin: 0 auto 8px; }
  .landing-hero-content { order: 0; }
}

@media (max-width: 560px) {
  .hero-voices { padding: 20px 18px 14px; border-radius: 16px; }
  .hero-voice-quote { font-size: 15.5px; line-height: 1.85; margin-bottom: 16px; }
  .hero-voice-photo { width: 58px; height: 58px; flex-basis: 58px; }
  .hero-voice-id strong { font-size: 15px; }
  .hero-voice-role, .hero-voice-place { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-voice { transition: none; }
}

/* Dark palette. */
.landing-page .hero-voices {
  background: rgba(23, 33, 59, .86);
  border-color: #354361;
  box-shadow: 0 14px 36px rgba(2, 6, 23, .34);
}
.landing-page .hero-voice-quote { color: #e8eefc; }
.landing-page .hero-voice-id strong { color: #f1f5f9; }
.landing-page .hero-voice-role { color: #bac8de; }
.landing-page .hero-voice-place { color: #5eead4; }
.landing-page .hero-voice-photo { box-shadow: 0 0 0 3px #2dd4bf; }
.landing-page .hero-voices-foot { border-top-color: #2b3a5c; }
.landing-page .hero-voices-dot { background: #3a4867; }
.landing-page .hero-voices-dot.is-active { background: #2dd4bf; }
.landing-page .hero-voices-more { color: #5eead4; }
.landing-page .hero-voices-more:hover { color: #99f6e4; }

/* Side gutters. The section headers, the time-saved panel and the getting-
   started track sit straight inside a full-width section with no container,
   so below their max-width they ran edge to edge: headings and lead text
   touched the screen edge on phones and the panel's rounded corners were cut
   off. */
.landing-section-header { padding-left: 20px; padding-right: 20px; }
.landing-page .getting-started-journey { padding-left: 20px; padding-right: 20px; }
@media (max-width: 1040px) {
  .landing-roi-panel { margin-left: 20px; margin-right: 20px; }
}
@media (max-width: 860px) {
  /* Enterprise box and the plan-review note are centred by max-width alone. */
  .landing-pricing-enterprise,
  .landing-pricing-review { margin-left: 20px; margin-right: 20px; }
}
@media (max-width: 480px) {
  /* was max-width: 100%, which put the pill's edges on the screen edge */
  .landing-billing-toggle { margin-left: 16px; margin-right: 16px; }
}

/* Small phones (320-360px CSS width, or a larger phone at a big font zoom).
   The bar, the pad mock and the wide CTAs were sized for 375px and up: the
   menu button sat 3px off the edge, the mock's Bangla timing was cut off, and
   button labels broke onto two or three lines. Layout only - nothing here
   changes what is shown. */
@media (max-width: 360px) {
  .landing-nav-inner { padding: 0 12px; }
  .landing-logo { gap: 8px; font-size: 17px; }
  .landing-logo img { height: 32px; }
  .landing-nav .landing-mobile-toggle { padding: 6px; font-size: 22px; }

  .ai-rx li { flex-wrap: wrap; row-gap: 4px; }
  .ai-rx em { white-space: normal; }

  .landing-page .btn-landing-primary,
  .landing-page .btn-landing-secondary { padding-left: 18px; padding-right: 18px; }
  .landing-page .btn-landing-large { padding: 16px 20px !important; font-size: 17px !important; }
  .practice-patient-panel { padding: 22px 16px; }
  .landing-section-header,
  .landing-page .getting-started-journey { padding-left: 16px; padding-right: 16px; }
  .landing-roi-panel { margin-left: 12px; margin-right: 12px; }
  .landing-guide-link { flex-wrap: wrap; justify-content: center; }
  .landing-pricing-enterprise,
  .landing-pricing-review { margin-left: 12px; margin-right: 12px; }
  .landing-roi-inputs,
  .landing-roi-results { padding-left: 18px; padding-right: 18px; }
  .landing-page .getting-started-doctor { padding: 22px 16px; }
  .landing-page .getting-started-doctor .btn-landing-primary { padding-left: 12px; padding-right: 12px; }
}

/* Tablets and narrow laptops now get the menu button too; keep the opened
   menu's rows and buttons a readable width instead of stretching them across
   a 1,000px screen. */
@media (min-width: 600px) and (max-width: 1100px) {
  .landing-mobile-menu > a { max-width: 480px; }
}