/*
 * TurboFlow AI — visual polish layer
 * Layered after the original page styles so the existing structure remains intact.
 */

:root {
  --tf-nav-offset: 106px;
  --tf-glass-line: rgba(255, 255, 255, 0.16);
  --tf-glass-line-soft: rgba(255, 255, 255, 0.1);
  --tf-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 106, 0, 0.035),
    0 28px 80px rgba(0, 0, 0, 0.26);
}

html {
  scroll-padding-top: calc(var(--tf-nav-offset) + env(safe-area-inset-top, 0px));
}

body {
  min-width: 0;
}

#particle-canvas {
  width: 100% !important;
  max-width: 100%;
}

section[id],
#top {
  scroll-margin-top: calc(var(--tf-nav-offset) + env(safe-area-inset-top, 0px));
}

.nav-shell {
  top: calc(12px + env(safe-area-inset-top, 0px));
}

.nav-shell.scrolled {
  top: calc(7px + env(safe-area-inset-top, 0px));
}

.footer {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

.toast {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

/* Component-level type tuning: no global font-size override. */
.nav-link {
  font-size: 15px;
}

.nav-cta {
  font-size: 14px;
}

.eyebrow {
  font-size: 13px;
}

.hero-proof {
  font-size: 14px;
}

.dash-brand {
  font-size: 13px;
}

.dash-status {
  font-size: 11px;
}

.panel-label {
  font-size: 11px;
}

.message {
  font-size: 13px;
}

.metric-badge {
  font-size: 9px;
}

.metric-caption {
  font-size: 10px;
}

.lead-name {
  font-size: 11px;
}

.lead-meta {
  font-size: 10px;
}

.floating-chip {
  font-size: 12px;
}

.stat-label {
  font-size: 15.5px;
}

.service-copy,
.process-item p {
  font-size: 16px;
}

.pricing-result {
  font-size: 11px;
}

.pricing-summary {
  font-size: 15px;
}

.pricing-features li {
  font-size: 14px;
}

.pricing-footnote {
  font-size: 12.5px;
}

.care-copy,
.care-plan-description,
.care-plan li,
.care-terms p {
  font-size: 16px;
}

.care-feature strong,
.care-plan h4 {
  font-size: 14px;
}

.care-feature span {
  font-size: 12.5px;
}

.care-exclusions {
  font-size: 12px;
}

.contact-link {
  font-size: 15px;
}

.field label {
  font-size: 12px;
}

.form-note {
  font-size: 12px;
}

.footer-tagline {
  font-size: 14px;
}

.footer-nav {
  font-size: 13.5px;
}

.footer-bottom {
  font-size: 12px;
}

/* Keep the large figure and its suffix visually independent. */
.stat-number {
  gap: clamp(8px, 1vw, 14px);
}

.stat-number > [data-count] {
  flex: 0 0 auto;
  letter-spacing: -0.07em;
}

.stat-number .stat-suffix {
  flex: 0 0 auto;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.stat-number-steps {
  flex-wrap: nowrap;
}

.stat-number-steps .stat-suffix {
  font-size: clamp(18px, 0.34em, 26px);
  font-weight: 760;
  letter-spacing: 0.01em;
}

/* Preserve hierarchy while adding a restrained liquid-glass layer. */
.nav,
.dashboard,
.service-card,
.process-visual,
.tf-demo-shell,
.pricing-card,
.care-shell,
.care-plan,
.care-terms,
.faq-list,
.contact-shell,
.nav-links.mobile-open {
  border-color: var(--tf-glass-line-soft);
  box-shadow: var(--tf-glass-shadow);
}

.nav {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.075), transparent 42%),
    rgba(7, 7, 8, 0.72);
}

.dashboard {
  width: min(108%, 600px);
  background:
    radial-gradient(520px circle at 18% 0%, rgba(255, 255, 255, 0.09), transparent 44%),
    radial-gradient(440px circle at 90% 100%, rgba(255, 106, 0, 0.075), transparent 52%),
    linear-gradient(145deg, rgba(22, 22, 24, 0.91), rgba(7, 7, 8, 0.94));
  will-change: transform;
}

.service-card {
  min-height: 410px;
  background:
    radial-gradient(380px circle at 8% 2%, rgba(255, 255, 255, 0.065), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016));
}

.process-visual {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 106, 0, 0.13), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012));
}

.tf-demo-shell {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(600px circle at 5% 5%, rgba(255, 106, 0, 0.12), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.017));
  box-shadow: var(--tf-glass-shadow);
}

.pricing-card {
  min-height: 690px;
}

.care-shell {
  border-color: rgba(255, 255, 255, 0.145);
}

.care-feature,
.care-plan,
.care-terms {
  min-height: 126px;
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
}

.faq-list {
  position: relative;
  overflow: hidden;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  background:
    radial-gradient(520px circle at 15% 0%, rgba(255, 106, 0, 0.07), transparent 50%),
    rgba(255, 255, 255, 0.022);
}

.contact-shell {
  border-color: rgba(255, 255, 255, 0.145);
}

.tf-liquid {
  --tf-glass-x: 50%;
  --tf-glass-y: 18%;
}

.nav-links.tf-liquid,
.care-plan.tf-liquid,
.care-terms.tf-liquid {
  position: relative;
}

.tf-glass-sheen {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.3;
  background:
    radial-gradient(
      340px circle at var(--tf-glass-x) var(--tf-glass-y),
      rgba(255, 255, 255, 0.18),
      rgba(255, 154, 60, 0.045) 28%,
      transparent 64%
    );
  mix-blend-mode: screen;
  transition: opacity 220ms ease;
}

.tf-liquid:hover > .tf-glass-sheen {
  opacity: 0.48;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav,
  .dashboard,
  .service-card,
  .process-visual,
  .tf-demo-shell,
  .pricing-card,
  .care-shell,
  .care-plan,
  .care-terms,
  .faq-list,
  .contact-shell,
  .nav-links.mobile-open {
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    backdrop-filter: blur(12px) saturate(135%);
  }

  .nav,
  .dashboard,
  .nav-links.mobile-open {
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav,
  .dashboard,
  .service-card,
  .process-visual,
  .tf-demo-shell,
  .pricing-card,
  .care-shell,
  .care-plan,
  .care-terms,
  .faq-list,
  .contact-shell,
  .nav-links.mobile-open {
    background-color: rgba(15, 15, 16, 0.96);
  }
}

/* The first frame contains three complete groups; JavaScript only applies motion. */
.trust-strip .marquee {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
}

.trust-strip .marquee-group,
.trust-strip .marquee-item {
  flex-shrink: 0;
}

.trust-strip .marquee-item {
  white-space: nowrap;
}

.trust-strip.tf-marquee-ready {
  outline-offset: -3px;
}

.trust-strip.tf-marquee-ready .marquee {
  animation: none;
  will-change: transform;
}

.trust-strip.tf-marquee-ready .marquee-group {
  flex: 0 0 auto;
}

.trust-strip.tf-marquee-static .marquee {
  transform: translate3d(0, 0, 0) !important;
  will-change: auto;
}

.trust-strip:focus-visible {
  outline: 2px solid var(--orange-2);
}

/* Transparent comparison of the two managed operating plans. */
.pricing-tax-note {
  max-width: 780px;
  margin: 18px auto 0;
  color: #a7a7ac;
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}

.care-shell.care-comparison {
  display: block;
  min-width: 0;
  padding: clamp(28px, 4vw, 52px);
}

.care-comparison-header {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: 0 auto 34px;
  text-align: center;
}

.care-comparison-header .eyebrow {
  margin-inline: auto;
}

.care-comparison-title {
  max-width: 760px;
  margin: 16px auto 14px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.care-comparison-intro {
  margin: 0;
  color: #b7b7bc;
  font-size: 16px;
  line-height: 1.75;
}

.care-plan-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}

.care-plan {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 28px;
  overflow: hidden;
}

.care-plan--full {
  border-color: rgba(255, 106, 0, 0.38);
  background:
    radial-gradient(440px circle at 100% 0%, rgba(255, 106, 0, 0.14), transparent 55%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 106, 0, 0.025));
}

.care-plan-kicker {
  margin-bottom: 14px;
  color: var(--orange-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.care-plan h4 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.care-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px 12px;
  margin: 18px 0 16px;
}

.care-plan-price strong {
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: clamp(31px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.care-plan-price span {
  color: #8f8f94;
  font-size: 13px;
  font-weight: 720;
}

.care-plan-description {
  min-height: 58px;
  margin: 0 0 24px;
  color: #bcbcc1;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.care-plan-list-title,
.care-plan-exclusions strong {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.care-plan ul {
  display: grid;
  gap: 12px;
  margin: 14px 0 24px;
  padding: 0;
  list-style: none;
}

.care-plan li {
  position: relative;
  min-width: 0;
  padding-left: 24px;
  color: #d0d0d3;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.care-plan li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--orange-2);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.32);
}

.care-plan-exclusions {
  margin-top: auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.2);
}

.care-plan-exclusions p {
  margin: 8px 0 0;
  color: #99999f;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.care-plan-time-note {
  display: block;
  margin: -10px 0 24px 24px;
  color: #9f9fa5;
  font-size: 14px;
  line-height: 1.55;
}

.care-action {
  width: 100%;
  margin-top: 22px;
}

.care-terms {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  min-height: 0;
  margin-top: 18px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(420px circle at 8% 0%, rgba(255, 106, 0, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.02);
}

.care-terms p {
  margin: 0;
  color: #b7b7bc;
  line-height: 1.7;
}

.care-terms p + p {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@keyframes tf-process-pulse {
  from {
    transform: translate3d(0, -110%, 0);
  }

  to {
    transform: translate3d(0, 110%, 0);
  }
}

@media (max-width: 1100px) {
  .dashboard {
    width: min(94%, 600px);
  }
}

@media (max-width: 820px) {
  :root {
    --tf-nav-offset: 100px;
  }

  .nav-shell,
  .nav-shell.scrolled {
    top: calc(8px + env(safe-area-inset-top, 0px));
  }

  .nav-links.mobile-open {
    max-height: calc(
      100dvh - var(--tf-nav-offset) - env(safe-area-inset-top, 0px) -
        env(safe-area-inset-bottom, 0px)
    );
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.menu-open .nav-shell {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%);
  }

  .hero {
    padding-top: calc(155px + env(safe-area-inset-top, 0px));
  }

  .hero-visual-wrap {
    min-width: 0;
    overflow: clip;
  }

  .dashboard {
    width: 94%;
  }

  .pricing-card {
    min-height: auto;
  }

  .care-plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .care-plan-description {
    min-height: 0;
  }

  .service-card {
    min-height: 350px;
  }

  .tf-glass-sheen {
    opacity: 0.22;
  }

  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(22px);
  }

  .cursor,
  .cursor-dot {
    display: none;
  }
}

@media (max-width: 590px) {
  :root {
    --tf-nav-offset: 94px;
  }

  .hero {
    padding-top: calc(137px + env(safe-area-inset-top, 0px));
  }

  .dashboard {
    width: 100%;
  }

  .dash-brand {
    min-width: 0;
    font-size: 12px;
  }

  .dash-status {
    flex: 0 0 auto;
    font-size: 10px;
  }

  .message {
    font-size: 13px;
  }

  .stat-number {
    font-size: clamp(52px, 18vw, 72px);
  }

  .stat-number-steps .stat-suffix {
    font-size: clamp(18px, 6vw, 24px);
  }

  .process-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    height: auto;
    min-height: 0;
    padding: 24px;
  }

  .process-visual::before {
    opacity: 0.1;
    mask-image: linear-gradient(#000, transparent);
  }

  .flow-node {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 88px;
    padding: 18px 20px;
    border-radius: 22px;
    font-size: 15px;
    animation: none;
  }

  .flow-node > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
  }

  .flow-node strong {
    margin: 0;
    font-size: 27px;
    line-height: 1;
  }

  .node-1 {
    order: 1;
  }

  .line-1 {
    order: 2;
  }

  .node-2 {
    order: 3;
  }

  .line-2 {
    order: 4;
  }

  .node-3 {
    order: 5;
  }

  .flow-line {
    position: relative;
    inset: auto;
    justify-self: center;
    width: 2px;
    height: 28px;
    transform: none;
    background: rgba(255, 106, 0, 0.25);
  }

  .flow-line::after {
    inset: 0;
    transform: translate3d(0, -110%, 0);
    background: linear-gradient(180deg, transparent, #ff8f3f, transparent);
    animation: tf-process-pulse 1.8s linear infinite;
  }

  .line-2::after {
    animation-delay: -0.9s;
  }

  .line-3 {
    display: none;
  }

  .faq-list {
    padding-inline: 16px;
    border-radius: 22px;
  }

  .pricing-price {
    min-width: 0;
  }

  .pricing-price strong {
    max-width: 100%;
    font-size: clamp(39px, 13vw, 46px);
  }

  .care-shell,
  .care-plan,
  .care-terms,
  .contact-shell,
  .tf-demo-shell,
  .pricing-card,
  .service-card {
    max-width: 100%;
  }

  .footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

@media (pointer: coarse) {
  .tf-glass-sheen {
    display: none;
  }

  .nav,
  .dashboard,
  .service-card,
  .process-visual,
  .tf-demo-shell,
  .pricing-card,
  .care-shell,
  .care-plan,
  .care-terms,
  .faq-list,
  .contact-shell,
  .nav-links.mobile-open {
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    backdrop-filter: blur(8px) saturate(125%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-strip .marquee {
    animation: none !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .tf-glass-sheen {
    display: none;
  }

  .flow-line::after {
    animation: none !important;
  }

  .dashboard {
    will-change: auto;
  }
}