/*
  Final subpage polish for the public DA Smarketing AI demo.
  Scope: company shell + Patient View only.
  The Clinic Dashboard is rendered separately inside its iframe and is not styled here.
*/

/* Make the header feel like a page within the main DA Smarketing site. */
.page-shell .site-nav a[aria-current="page"] {
  position: relative;
  color: var(--accent-blue);
}

.page-shell .site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-blue);
}

/* The main website uses a 44px mark plus live Plus Jakarta Sans brand text. */
.page-shell .da-brand,
.page-shell .subpage-footer-brand {
  position: relative;
  display: grid;
  grid-template-columns: 44px max-content;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.page-shell .da-brand img,
.page-shell .subpage-footer-brand img {
  grid-column: 1;
  grid-row: 1 / 3;
  display: block;
  width: 44px;
  max-width: none;
  height: 44px;
  object-fit: contain;
  object-position: center;
}

.page-shell .da-brand::before,
.page-shell .subpage-footer-brand::before {
  content: "DA SMARKETING";
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: #0f172a;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.page-shell .da-brand::after,
.page-shell .subpage-footer-brand::after {
  content: "DIGITAL MARKETING SOLUTIONS";
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 4px;
  color: #94a3b8;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2em;
  white-space: nowrap;
}

/* Keep the intro confident but let visitors reach the interactive product sooner. */
.page-shell .homepage-hero {
  min-height: 700px;
  padding-top: 144px;
  padding-bottom: 48px;
  gap: 64px;
}

.page-shell .hero-main h1 {
  max-width: 720px;
  font-size: clamp(52px, 5vw, 80px);
}

.page-shell .hero-copy {
  max-width: 620px;
}

/* The product preview is important context, so don't leave it dependent on an entrance-animation paint layer. */
.page-shell .hero-showcase {
  opacity: 1;
  transform: none;
  animation: none;
}

.page-shell .hero-product-card {
  min-height: 540px;
}

.page-shell .hero-chat-flow {
  margin-top: 46px;
}

/* Give the live demo a clearer product boundary without making it look like another app shell. */
.page-shell #live-demo.experience-card {
  border: 1px solid rgba(15, 23, 42, .07);
  box-shadow: 0 28px 72px -42px rgba(15, 23, 42, .32);
}

.page-shell #patientView .patient-layout {
  grid-template-columns: 350px minmax(0, 1fr);
}

.page-shell #patientView .channel-panel,
.page-shell #patientView .prompt-panel {
  background: #fff;
}

/* Patient View typography follows the actual company site weights: 400/500/700/800 only. */
.page-shell #patientView,
.page-shell #patientView button,
.page-shell #patientView input {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.page-shell #patientView .guide-label strong,
.page-shell #patientView .channel-button strong,
.page-shell #patientView .tour-heading div > strong,
.page-shell #patientView .tour-steps li strong,
.page-shell #patientView .device-stage-heading strong,
.page-shell #patientView .chat-title strong,
.page-shell #patientView .empty-chat strong,
.page-shell #patientView .suggestion-chip > strong {
  font-weight: 700;
}

.page-shell #patientView .guide-label > span,
.page-shell #patientView .tour-heading div > span,
.page-shell #patientView #tourProgress,
.page-shell #patientView .tour-steps li > span,
.page-shell #patientView .suggestion-chip > span {
  font-weight: 800;
}

.page-shell #patientView .channel-button small,
.page-shell #patientView .channel-preview-note,
.page-shell #patientView .tour-steps li small,
.page-shell #patientView .device-stage-heading > span,
.page-shell #patientView .chat-title small,
.page-shell #patientView .empty-chat p,
.page-shell #patientView .empty-chat > span,
.page-shell #patientView .privacy-note,
.page-shell #patientView .prompt-helper,
.page-shell #patientView .composer input {
  font-weight: 400;
}

.page-shell #patientView .phone-statusbar {
  font-weight: 600;
}

.page-shell #patientView .prompt-panel .try-box {
  padding: 18px;
  border: 1px solid var(--slate-100);
  border-radius: 18px;
  background: var(--slate-50);
}

.page-shell .prompt-helper {
  margin: -3px 0 13px 33px;
  color: var(--slate-400);
  font-size: 9px;
  line-height: 1.55;
}

.page-shell #patientView .prompt-panel .suggestion-chip {
  background: #fff;
}

.page-shell #patientView .prompt-panel .suggestion-chip:hover {
  background: #fff;
}

/* Replace text-glyph capability icons with crisp line icons, matching the main site's icon language. */
.page-shell .capability-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  font-size: 0;
  transition: transform .3s ease, box-shadow .3s ease;
}

.page-shell .capability-icon::before {
  content: "";
  width: 29px;
  height: 29px;
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.page-shell .capability-icon.blue {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #2563eb;
  box-shadow: 0 10px 24px -18px rgba(37,99,235,.65);
}

.page-shell .capability-icon.blue::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a4%204%200%200%201-4%204H8l-5%203V7a4%204%200%200%201%204-4h10a4%204%200%200%201%204%204z%22%2F%3E%3Cpath%20d%3D%22M8%209h8%22%2F%3E%3Cpath%20d%3D%22M8%2013h5%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a4%204%200%200%201-4%204H8l-5%203V7a4%204%200%200%201%204-4h10a4%204%200%200%201%204%204z%22%2F%3E%3Cpath%20d%3D%22M8%209h8%22%2F%3E%3Cpath%20d%3D%22M8%2013h5%22%2F%3E%3C%2Fsvg%3E");
}

.page-shell .capability-icon.dark-icon {
  border: 1px solid rgba(147,197,253,.16);
  background: rgba(255,255,255,.09);
  color: #60a5fa;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.page-shell .capability-icon.dark-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M12%202v3%22%2F%3E%3Cpath%20d%3D%22M12%2019v3%22%2F%3E%3Cpath%20d%3D%22M2%2012h3%22%2F%3E%3Cpath%20d%3D%22M19%2012h3%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M12%202v3%22%2F%3E%3Cpath%20d%3D%22M12%2019v3%22%2F%3E%3Cpath%20d%3D%22M2%2012h3%22%2F%3E%3Cpath%20d%3D%22M19%2012h3%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
}

.page-shell .capability-icon.green {
  border: 1px solid #d1fae5;
  background: #ecfdf5;
  color: #059669;
  box-shadow: 0 10px 24px -18px rgba(5,150,105,.55);
}

.page-shell .capability-icon.green::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m16%2011%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m16%2011%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
}

.page-shell .capability-card:hover .capability-icon {
  transform: translateY(-2px) scale(1.05);
}

/* Trust labels use the same real Plus Jakarta Sans face rather than a synthetic heavy weight. */
.page-shell .sales-cta-trust span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Match the main website's understated footer treatment and give the subpage a clear way back. */
.subpage-footer {
  border-top: 1px solid var(--slate-100);
  background: rgba(255, 255, 255, .76);
  backdrop-filter: blur(10px);
}

.subpage-footer-inner {
  width: min(1280px, calc(100% - 64px));
  min-height: 124px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.subpage-footer p {
  margin: 0;
  color: var(--slate-400);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}

.subpage-footer-links {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
}

.subpage-footer-links a {
  color: var(--slate-500);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease;
}

.subpage-footer-links a:hover {
  color: var(--accent-blue);
}

@media (max-width: 1120px) {
  .page-shell #patientView .patient-layout {
    grid-template-columns: 330px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .page-shell .homepage-hero {
    padding-top: 124px;
    padding-bottom: 54px;
    gap: 48px;
  }

  .page-shell .hero-product-card {
    min-height: 540px;
  }

  /* On smaller screens, put the quick-start prompts before the long phone canvas. */
  .page-shell #patientView .patient-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "channels"
      "prompts"
      "device";
  }

  .page-shell #patientView .channel-panel {
    grid-area: channels;
    border-right: 0;
    border-bottom: 1px solid var(--slate-100);
  }

  .page-shell #patientView .prompt-panel {
    grid-area: prompts;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--slate-100);
  }

  .page-shell #patientView .device-stage {
    grid-area: device;
  }

  .page-shell #patientView .prompt-panel .try-box {
    max-width: 620px;
    margin: 0;
  }

  .page-shell .da-brand,
  .page-shell .subpage-footer-brand {
    grid-template-columns: 40px max-content;
    column-gap: 13px;
    min-height: 40px;
  }

  .page-shell .da-brand img,
  .page-shell .subpage-footer-brand img {
    width: 40px;
    height: 40px;
  }

  .page-shell .da-brand::before,
  .page-shell .subpage-footer-brand::before {
    font-size: 18px;
  }

  .page-shell .da-brand::after,
  .page-shell .subpage-footer-brand::after {
    font-size: 8px;
  }

  .subpage-footer-inner {
    width: min(100% - 40px, 760px);
    min-height: 0;
    padding: 34px 0;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
  }

  .subpage-footer-brand {
    justify-self: center;
  }

  .subpage-footer-links {
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .page-shell .homepage-hero {
    min-height: 0;
    padding-top: 104px;
    padding-bottom: 52px;
    gap: 36px;
  }

  .page-shell .hero-main h1 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .page-shell .hero-product-card {
    min-height: 475px;
  }

  .page-shell .hero-chat-flow {
    margin-top: 34px;
  }

  .page-shell .da-brand {
    grid-template-columns: 34px max-content;
    column-gap: 10px;
    min-height: 34px;
  }

  .page-shell .da-brand img {
    width: 34px;
    height: 34px;
  }

  .page-shell .da-brand::before {
    font-size: 14px;
    letter-spacing: -.025em;
  }

  .page-shell .da-brand::after {
    margin-top: 2px;
    font-size: 6.3px;
    letter-spacing: .16em;
  }

  .page-shell #patientView .channel-panel {
    padding-bottom: 18px;
  }

  .page-shell #patientView .prompt-panel {
    padding: 17px 15px 18px;
  }

  .page-shell #patientView .prompt-panel .try-box {
    padding: 14px;
    border-radius: 15px;
  }

  .page-shell .prompt-helper {
    margin: -2px 0 12px 33px;
    font-size: 8px;
  }

  .page-shell #patientView .device-stage {
    padding-top: 24px;
  }

  .page-shell .capability-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .page-shell .capability-icon::before {
    width: 21px;
    height: 21px;
  }

  .subpage-footer-inner {
    width: calc(100% - 28px);
    padding: 30px 0 36px;
  }

  .page-shell .subpage-footer-brand {
    grid-template-columns: 38px max-content;
    column-gap: 12px;
    min-height: 38px;
  }

  .page-shell .subpage-footer-brand img {
    width: 38px;
    height: 38px;
  }

  .page-shell .subpage-footer-brand::before {
    font-size: 16px;
  }

  .page-shell .subpage-footer-brand::after {
    font-size: 7px;
    letter-spacing: .18em;
  }

  .subpage-footer p {
    font-size: 8px;
    letter-spacing: .12em;
  }

  .subpage-footer-links {
    gap: 18px;
  }

  .subpage-footer-links a {
    font-size: 9px;
  }
}