/* ========================================================================== 
   SalutApp public wrapper POC
   Scope: /public/* unauthenticated portal only.
   Brand tokens were grounded in uploaded HealthApp/SalutApp CSS:
   #5e92e3, #3f6ec2, #10233f, #627898, #f5f9ff, #edf4fd.
   ========================================================================== */
:root {
  --sp-primary: #5e92e3;
  --sp-primary-dark: #3f6ec2;
  --sp-ink: #10233f;
  --sp-muted: #627898;
  --sp-bg: #f5f9ff;
  --sp-bg-alt: #edf4fd;
  --sp-surface: rgba(255, 255, 255, 0.94);
  --sp-surface-strong: #ffffff;
  --sp-line: rgba(23, 52, 95, 0.10);
  --sp-line-strong: rgba(23, 52, 95, 0.18);
  --sp-coral: #df4067;
  --sp-shadow-sm: 0 10px 26px rgba(20, 42, 84, 0.08);
  --sp-shadow-md: 0 18px 44px rgba(20, 42, 84, 0.12);
  --sp-shadow-lg: 0 30px 90px rgba(20, 42, 84, 0.18);
  --sp-radius-sm: .95rem;
  --sp-radius-md: 1.25rem;
  --sp-radius-lg: 1.65rem;
  --sp-radius-xl: 2.25rem;
  --sp-focus: 0 0 0 .22rem rgba(94, 146, 227, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.salut-public-shell {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--sp-ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(94, 146, 227, .13), transparent 24%),
    radial-gradient(circle at 92% 0%, rgba(223, 64, 103, .08), transparent 22%),
    linear-gradient(180deg, #fbfdff 0%, var(--sp-bg) 42%, var(--sp-bg-alt) 100%);
  overflow-x: hidden;
}
body.salut-public-shell a { color: inherit; }
body.salut-public-shell :focus-visible { outline: none; box-shadow: var(--sp-focus); }
.sp-skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 2000;
  padding: .65rem 1rem;
  border-radius: .85rem;
  background: var(--sp-ink);
  color: #fff !important;
  text-decoration: none;
}
.sp-skip-link:focus { top: 1rem; }

/* Header */
.sp-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid rgba(23, 52, 95, .08);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px);
  transition: box-shadow .2s ease, background-color .2s ease;
}
.sp-header.is-scrolled { box-shadow: 0 10px 30px rgba(18, 40, 74, .08); background: rgba(255,255,255,.96); }
.sp-navbar { min-height: 4.75rem; }
.sp-brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 850; letter-spacing: -.02em; color: var(--sp-ink) !important; }
.sp-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #fff 0%, #ecf4ff 100%);
  border: 1px solid rgba(94, 146, 227, .18);
  box-shadow: 0 10px 26px rgba(63, 110, 194, .12);
}
.sp-brand__text { font-size: 1.15rem; }
.sp-navbar__toggle { border: 1px solid var(--sp-line); border-radius: .95rem; padding: .55rem .7rem; }
.sp-nav-list { gap: .2rem; }
.sp-nav-list .nav-link {
  border-radius: .95rem;
  color: var(--sp-muted);
  font-weight: 750;
  font-size: .94rem;
  padding: .62rem .8rem !important;
}
.sp-nav-list .nav-link:hover,
.sp-nav-list .nav-link:focus,
.sp-nav-list .nav-link.active { color: var(--sp-primary-dark); background: rgba(94, 146, 227, .10); }
.sp-header-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.sp-lang-btn { border: 1px solid var(--sp-line); border-radius: .95rem; color: var(--sp-muted); font-weight: 800; background: rgba(255,255,255,.78); }
.sp-lang-menu { border: 1px solid var(--sp-line); border-radius: 1rem; box-shadow: var(--sp-shadow-sm); }
.sp-lang-menu .active { background: var(--sp-primary-dark); }

/* Buttons */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.65rem;
  border-radius: 1rem;
  padding: .68rem 1rem;
  font-weight: 850;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sp-btn:hover,
.sp-btn:focus-visible { transform: translateY(-1px); }
.sp-btn--lg { min-height: 3.1rem; padding: .84rem 1.15rem; border-radius: 1.1rem; }
.sp-btn--primary {
  --bs-btn-color: #0e2342;
  --bs-btn-bg: var(--sp-primary);
  --bs-btn-border-color: rgba(63, 110, 194, .16);
  --bs-btn-hover-color: #0e2342;
  --bs-btn-hover-bg: var(--sp-primary);
  --bs-btn-hover-border-color: rgba(63, 110, 194, .28);
  --bs-btn-active-color: #0e2342;
  --bs-btn-active-bg: var(--sp-primary-dark);
  --bs-btn-active-border-color: rgba(63, 110, 194, .34);
  background: linear-gradient(180deg, #97b9ec 0%, var(--sp-primary) 100%);
  color: #0e2342 !important;
  border-color: rgba(63, 110, 194, .16);
  box-shadow: 0 14px 28px rgba(63, 110, 194, .18);
}
.sp-btn--primary:hover,
.sp-btn--primary:focus-visible {
  color: #0e2342 !important;
  background: linear-gradient(180deg, #a3c3f0 0%, var(--sp-primary) 100%);
  border-color: rgba(63, 110, 194, .28);
  filter: brightness(1.02);
  box-shadow: 0 18px 36px rgba(63, 110, 194, .22);
}
.sp-btn--light {
  --bs-btn-color: var(--sp-ink);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--sp-line-strong);
  --bs-btn-hover-color: var(--sp-ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: rgba(94, 146, 227, .36);
  --bs-btn-active-color: var(--sp-ink);
  --bs-btn-active-bg: #f8fbff;
  --bs-btn-active-border-color: rgba(94, 146, 227, .42);
  background: #fff;
  color: var(--sp-ink) !important;
  border-color: var(--sp-line-strong);
  box-shadow: var(--sp-shadow-sm);
}
.sp-btn--light:hover,
.sp-btn--light:focus-visible {
  background: #fff;
  color: var(--sp-ink) !important;
  border-color: rgba(94, 146, 227, .36);
  box-shadow: 0 16px 36px rgba(20, 42, 84, .14);
}
.sp-btn--ghost {
  --bs-btn-color: var(--sp-muted);
  --bs-btn-bg: rgba(255,255,255,.48);
  --bs-btn-border-color: var(--sp-line);
  --bs-btn-hover-color: var(--sp-ink);
  --bs-btn-hover-bg: rgba(255,255,255,.72);
  --bs-btn-hover-border-color: rgba(94,146,227,.26);
  --bs-btn-active-color: var(--sp-ink);
  --bs-btn-active-bg: rgba(255,255,255,.82);
  --bs-btn-active-border-color: rgba(94,146,227,.32);
  background: rgba(255,255,255,.48);
  color: var(--sp-muted) !important;
  border-color: var(--sp-line);
}
.sp-btn--ghost:hover,
.sp-btn--ghost:focus-visible {
  background: rgba(255,255,255,.72);
  color: var(--sp-ink) !important;
  border-color: rgba(94,146,227,.26);
}
.sp-inline-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; color: var(--sp-primary-dark) !important; font-weight: 800; text-decoration: none; }
.sp-inline-link:hover { text-decoration: underline; }

/* Hero */
.sp-hero { position: relative; padding: 5rem 0 3.6rem; }
.sp-hero h1,
.sp-page-hero h1 { margin: .95rem 0 .9rem; max-width: 46rem; font-weight: 900; letter-spacing: -.055em; line-height: .96; font-size: clamp(2.65rem, 6vw, 5.8rem); color: #0e2342; }
.sp-lead,
.sp-page-hero p { max-width: 45rem; color: var(--sp-muted); font-size: clamp(1.03rem, 2vw, 1.22rem); line-height: 1.68; }
.sp-kicker { display: inline-flex; align-items: center; gap: .45rem; color: var(--sp-primary-dark); font-weight: 900; letter-spacing: .075em; text-transform: uppercase; font-size: .78rem; }
.sp-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.sp-hero-visual { position: relative; min-height: 30rem; border-radius: var(--sp-radius-xl); border: 1px solid rgba(94, 146, 227, .14); background: linear-gradient(140deg, rgba(255,255,255,.96), rgba(240,248,255,.76)); box-shadow: var(--sp-shadow-lg); overflow: hidden; }
.sp-hero-visual::before { content: ""; position: absolute; inset: 1rem; border-radius: calc(var(--sp-radius-xl) - .7rem); border: 1px solid rgba(255,255,255,.78); pointer-events: none; }
.sp-hero-visual__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; transform: scale(1.03); }
.sp-demo-card { position: absolute; width: min(15.5rem, 42vw); padding: 1rem; border-radius: 1.25rem; border: 1px solid rgba(255,255,255,.84); background: rgba(255,255,255,.88); box-shadow: 0 16px 44px rgba(18, 40, 74, .12); backdrop-filter: blur(14px); }
.sp-demo-card span { display: block; color: var(--sp-primary-dark); font-weight: 900; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.sp-demo-card strong { display: block; margin-top: .25rem; font-size: 1.45rem; line-height: 1; color: var(--sp-ink); }
.sp-demo-card p { margin: .35rem 0 0; color: var(--sp-muted); font-size: .84rem; line-height: 1.35; }
.sp-demo-card--calendar { left: 1.2rem; bottom: 1.2rem; }
.sp-demo-card--record { right: 1.2rem; top: 1.2rem; }
.sp-visual-note { display: inline-flex; align-items: center; gap: .45rem; margin: .9rem 0 0; color: var(--sp-muted); font-size: .86rem; }
.sp-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.4rem; }
.sp-stat-row > div { padding: 1rem 1.1rem; border-radius: 1.25rem; background: rgba(255,255,255,.76); border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-sm); }
.sp-stat-row strong { display: block; font-size: 1rem; color: var(--sp-ink); }
.sp-stat-row span { display: block; margin-top: .25rem; color: var(--sp-muted); font-size: .9rem; }

/* Page hero */
.sp-page-hero { padding: 5rem 0 3rem; text-align: center; }
.sp-page-hero__inner { max-width: 58rem; margin: 0 auto; }
.sp-page-hero p { margin-left: auto; margin-right: auto; }


/* Sections */
.sp-section { padding: 4.8rem 0; }
.sp-section--soft { background: rgba(255,255,255,.42); border-top: 1px solid rgba(23,52,95,.06); border-bottom: 1px solid rgba(23,52,95,.06); }
.sp-section--timeline { background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.45)); }
.sp-section--demo { background: linear-gradient(135deg, rgba(63,110,194,.08), rgba(223,64,103,.05)); }
.sp-section-head { max-width: 48rem; margin: 0 auto 2.2rem; text-align: center; }
.sp-section-head--wide { max-width: 60rem; }
.sp-section-head h2,
.sp-section h2,
.sp-final-cta h2 { margin: .55rem 0 .65rem; color: var(--sp-ink); font-size: clamp(2rem, 3.6vw, 3.35rem); line-height: 1.02; font-weight: 900; letter-spacing: -.04em; }
.sp-section-head p,
.sp-section p { color: var(--sp-muted); line-height: 1.65; }

/* Cards */
.sp-card,
.sp-module-card,
.sp-persona-card,
.sp-step-card,
.sp-scenario,
.sp-choice-panel,
.sp-trust-band,
.sp-modal {
  border: 1px solid var(--sp-line);
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow-sm);
}
.sp-card { padding: 1.35rem; border-radius: var(--sp-radius-lg); }
.sp-card--strong { background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); box-shadow: var(--sp-shadow-md); }
.sp-card h3,
.sp-module-card h3,
.sp-persona-card h3,
.sp-step-card h3,
.sp-scenario h3 { margin: .85rem 0 .45rem; font-size: 1.08rem; line-height: 1.2; color: var(--sp-ink); font-weight: 850; }
.sp-card p,
.sp-module-card p,
.sp-persona-card p,
.sp-step-card p,
.sp-scenario p { margin: 0; font-size: .95rem; }
.sp-icon { display: inline-grid; place-items: center; width: 2.85rem; height: 2.85rem; border-radius: 1rem; color: var(--sp-primary-dark); background: rgba(94,146,227,.12); }
.sp-icon i { font-size: 1.3rem; }
.sp-module-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.sp-module-card { padding: 1rem; border-radius: 1.25rem; min-height: 12rem; }
.sp-module-card i { display: inline-grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: .9rem; margin-bottom: .25rem; color: var(--sp-primary-dark); background: rgba(94,146,227,.11); }
.sp-persona-card { padding: 1.25rem; border-radius: var(--sp-radius-lg); background: linear-gradient(180deg, #fff 0%, rgba(248,251,255,.88) 100%); }
.sp-persona-card i { color: var(--sp-coral); font-size: 1.55rem; }

/* Steps */
.sp-step-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.sp-step-grid--wide { grid-template-columns: repeat(5, minmax(10rem, 1fr)); overflow-x: auto; padding-bottom: .35rem; }
.sp-step-card { position: relative; padding: 1.2rem; border-radius: var(--sp-radius-lg); min-height: 13rem; background: rgba(255,255,255,.82); }
.sp-step-card span { display: inline-flex; align-items: center; justify-content: center; width: 2.55rem; height: 2.55rem; border-radius: .95rem; background: var(--sp-ink); color: #fff; font-weight: 900; font-size: .86rem; }

/* Demo / scenarios */
.sp-choice-panel { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; border-radius: var(--sp-radius-xl); background: rgba(255,255,255,.72); }
.sp-choice-panel--stacked { grid-template-columns: 1fr; }
.sp-choice-panel__item { min-height: 10rem; padding: 1.15rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--sp-line); }
.sp-choice-panel__item i { font-size: 1.65rem; color: var(--sp-primary-dark); }
.sp-choice-panel__item strong { display: block; margin-top: .7rem; font-size: 1.08rem; color: var(--sp-ink); }
.sp-choice-panel__item span { display: block; margin-top: .4rem; color: var(--sp-muted); font-size: .94rem; line-height: 1.55; }
.sp-scenario-list { display: grid; gap: 1rem; max-width: 56rem; margin: 0 auto; }
.sp-scenario { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; align-items: start; padding: 1.2rem; border-radius: var(--sp-radius-lg); }
.sp-scenario > span { display: inline-flex; width: 2.6rem; height: 2.6rem; border-radius: .95rem; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, var(--sp-primary), var(--sp-primary-dark)); font-weight: 900; }
.sp-check-list { display: grid; gap: .85rem; padding: 0; margin: 1.2rem 0 0; list-style: none; }
.sp-check-list li { display: flex; gap: .65rem; color: var(--sp-muted); }
.sp-check-list i { color: var(--sp-primary-dark); flex: 0 0 auto; }


/* Pricing */
.sp-page-hero--pricing { background: linear-gradient(135deg, rgba(94,146,227,.12), rgba(255,255,255,.0)); }
.sp-pricing-hero-note { display: inline-flex; align-items: flex-start; gap: .5rem; margin: 1.1rem auto 0; padding: .78rem 1rem; border-radius: 1rem; background: rgba(94,146,227,.10); color: var(--sp-primary-dark) !important; font-size: .94rem !important; font-weight: 850; }
.sp-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; align-items: stretch; }
.sp-pricing-grid--full { grid-template-columns: repeat(auto-fit, minmax(15.75rem, 1fr)); }
.sp-pricing-card { display: flex; flex-direction: column; min-height: 100%; padding: 1.2rem; border-radius: var(--sp-radius-xl); border: 1px solid var(--sp-line); background: rgba(255,255,255,.88); box-shadow: var(--sp-shadow-sm); }
.sp-pricing-card.is-featured { background: linear-gradient(180deg, #17345f 0%, #10233f 100%); color: #f3f8ff; box-shadow: var(--sp-shadow-lg); transform: translateY(-.4rem); }
.sp-pricing-card__head p { min-height: 5.6rem; margin: .65rem 0 0; color: var(--sp-muted); line-height: 1.6; }
.sp-pricing-card.is-featured .sp-pricing-card__head p,
.sp-pricing-card.is-featured .sp-check-list li,
.sp-pricing-card.is-featured .sp-price-note,
.sp-pricing-card.is-featured .sp-support-note { color: rgba(243,248,255,.76); }
.sp-pricing-card h3 { margin: .9rem 0 0; color: var(--sp-ink); font-size: 1.35rem; font-weight: 900; }
.sp-pricing-card.is-featured h3 { color: #fff; }
.sp-pricing-badge { display: inline-flex; width: fit-content; padding: .42rem .65rem; border-radius: 999px; background: rgba(94,146,227,.12); color: var(--sp-primary-dark); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.sp-pricing-card.is-featured .sp-pricing-badge { background: rgba(255,255,255,.12); color: #d8e8ff; }
.sp-price { display: flex; align-items: baseline; gap: .55rem; margin-top: 1.3rem; flex-wrap: wrap; }
.sp-price strong { color: var(--sp-ink); font-size: clamp(1.75rem, 3.6vw, 2.7rem); line-height: 1; font-weight: 950; letter-spacing: -.05em; }
.sp-price span,
.sp-price small { color: var(--sp-muted); font-weight: 800; }
.sp-pricing-card.is-featured .sp-price strong { color: #fff; }
.sp-pricing-card.is-featured .sp-price span,
.sp-pricing-card.is-featured .sp-price small { color: rgba(243,248,255,.76); }
.sp-price-note { margin: .45rem 0 0; color: var(--sp-muted); font-weight: 800; }
.sp-support-note { display: flex; gap: .55rem; align-items: flex-start; margin: 1rem 0 0; padding: .78rem .85rem; border-radius: 1rem; background: rgba(94,146,227,.08); color: var(--sp-muted); font-size: .9rem; line-height: 1.45; font-weight: 750; }
.sp-support-note i { color: var(--sp-primary-dark); flex: 0 0 auto; }
.sp-pricing-card.is-featured .sp-support-note { background: rgba(255,255,255,.08); }
.sp-pricing-card.is-featured .sp-support-note i { color: #bcd5ff; }
.sp-pricing-card__action { margin-top: auto; padding-top: 1.2rem; }
.sp-pricing-footnote { display: inline-flex; align-items: flex-start; gap: .5rem; margin: 1.2rem 0 0; color: var(--sp-muted); font-weight: 750; }
.sp-pricing-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.sp-pricing-preview-card { padding: 1rem; border-radius: 1.25rem; border: 1px solid var(--sp-line); background: rgba(255,255,255,.86); box-shadow: var(--sp-shadow-sm); }
.sp-pricing-preview-card.is-featured { border-color: rgba(94,146,227,.28); box-shadow: var(--sp-shadow-md); background: linear-gradient(180deg, #fff 0%, #f7fbff 100%); }
.sp-pricing-preview-card > span { display: inline-flex; margin-bottom: .55rem; color: var(--sp-primary-dark); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.sp-pricing-preview-card h3 { margin: 0 0 .5rem; color: var(--sp-ink); font-size: 1.02rem; font-weight: 900; }
.sp-price--compact { margin-top: .2rem; }
.sp-price--compact strong { font-size: 1.38rem; }
.sp-pricing-preview-card p { margin: .35rem 0 0; color: var(--sp-muted); font-size: .88rem; font-weight: 750; }
.sp-upgrade-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.sp-upgrade-card { padding: 1.1rem; border-radius: var(--sp-radius-lg); border: 1px solid var(--sp-line); background: rgba(255,255,255,.86); box-shadow: var(--sp-shadow-sm); }
.sp-upgrade-card h3 { margin: .9rem 0 .45rem; font-size: 1.05rem; font-weight: 900; color: var(--sp-ink); }
.sp-upgrade-card p { margin: 0; color: var(--sp-muted); line-height: 1.55; font-size: .94rem; }
.sp-comparison-wrap { overflow-x: auto; border-radius: var(--sp-radius-lg); border: 1px solid var(--sp-line); background: rgba(255,255,255,.92); box-shadow: var(--sp-shadow-sm); }
.sp-comparison-table { width: 100%; min-width: 56rem; border-collapse: collapse; }
.sp-comparison-table th,
.sp-comparison-table td { padding: .92rem 1rem; border-bottom: 1px solid var(--sp-line); text-align: left; vertical-align: top; color: var(--sp-muted); line-height: 1.45; }
.sp-comparison-table thead th { position: sticky; top: 0; background: #f7fbff; color: var(--sp-primary-dark); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 900; }
.sp-comparison-table tbody th { color: var(--sp-ink); font-weight: 900; }
.sp-comparison-table tbody tr:last-child th,
.sp-comparison-table tbody tr:last-child td { border-bottom: 0; }
.sp-trust-band--pricing { background: linear-gradient(135deg, #17345f 0%, #10233f 100%); color: #f3f8ff; box-shadow: var(--sp-shadow-lg); }
.sp-trust-band--pricing .sp-kicker { color: #bcd5ff; }
.sp-trust-band--pricing h2 { color: #fff; }
.sp-trust-band--pricing p { color: rgba(243,248,255,.76); }
.sp-faq { max-width: 58rem; margin: 0 auto; }
.sp-faq .accordion-item { border: 1px solid var(--sp-line); border-radius: 1rem !important; overflow: hidden; margin-bottom: .75rem; background: rgba(255,255,255,.88); box-shadow: var(--sp-shadow-sm); }
.sp-faq .accordion-button { color: var(--sp-ink); font-weight: 900; background: rgba(255,255,255,.88); box-shadow: none; }
.sp-faq .accordion-button:not(.collapsed) { color: var(--sp-primary-dark); background: #f7fbff; }
.sp-faq .accordion-body { color: var(--sp-muted); line-height: 1.65; }

/* Trust / CTA / Footer */
.sp-trust-band { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.45rem; border-radius: var(--sp-radius-xl); background: linear-gradient(135deg, #fff 0%, #f8fbff 100%); }
.sp-trust-band p { max-width: 55rem; }
.sp-disclaimer { display: inline-flex; gap: .5rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 1rem; background: rgba(223,64,103,.08); color: #8f2440 !important; font-weight: 700; }
.sp-final-cta { padding: 3rem 0; }
.sp-final-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.6rem; border-radius: var(--sp-radius-xl); background: linear-gradient(135deg, #17345f 0%, #10233f 100%); color: #f3f8ff; box-shadow: var(--sp-shadow-lg); }
.sp-final-cta__inner .sp-kicker { color: #bcd5ff; }
.sp-final-cta__inner h2 { color: #fff; margin-bottom: .5rem; }
.sp-final-cta__inner p { color: rgba(243,248,255,.76); margin: 0; }
.sp-final-cta__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.sp-final-cta__actions .sp-btn--ghost { color: #fff !important; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.sp-footer { padding: 3rem 0 1.5rem; background: rgba(255,255,255,.70); border-top: 1px solid var(--sp-line); }
.sp-footer-brand { display: flex; align-items: center; gap: .65rem; color: var(--sp-ink); font-weight: 900; }
.sp-footer-copy { margin: 1rem 0 .35rem; color: var(--sp-muted); max-width: 26rem; }
.sp-footer-small { margin: 0; color: var(--sp-muted); font-size: .88rem; }
.sp-footer h3 { font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; color: var(--sp-primary-dark); margin-bottom: .85rem; }
.sp-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.sp-footer-links a { color: var(--sp-muted); text-decoration: none; font-weight: 750; }
.sp-footer-links a:hover { color: var(--sp-primary-dark); text-decoration: underline; }
.sp-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; margin-top: 2rem; border-top: 1px solid var(--sp-line); color: var(--sp-muted); font-size: .88rem; }

/* Modal / forms */
.sp-modal { border-radius: 1.35rem; overflow: hidden; }
.sp-modal .modal-header,
.sp-modal .modal-footer { border-color: var(--sp-line); }
.sp-form-note { padding: .85rem 1rem; border-radius: 1rem; background: rgba(94,146,227,.09); color: var(--sp-muted); }
.sp-modal .form-control { border-radius: .95rem; border-color: var(--sp-line-strong); min-height: 2.75rem; }
.sp-modal .form-control:focus { border-color: rgba(94,146,227,.48); box-shadow: var(--sp-focus); }

@media (max-width: 1199.98px) {
  .sp-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-upgrade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-pricing-card.is-featured { transform: none; }
}
@media (max-width: 991.98px) {
  .sp-header-actions { align-items: stretch; padding-top: .9rem; }
  .sp-header-actions .sp-btn,
  .sp-header-actions .dropdown { flex: 1 1 auto; }
  .sp-lang-btn { width: 100%; }
  .sp-hero { padding-top: 3.2rem; }
  .sp-hero-visual { min-height: 24rem; }
  .sp-stat-row { grid-template-columns: 1fr; }
  .sp-trust-band,
  .sp-final-cta__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 767.98px) {
  .sp-section { padding: 3.5rem 0; }
  .sp-hero h1, .sp-page-hero h1 { letter-spacing: -.04em; }
  .sp-module-grid,
  .sp-step-grid,
  .sp-upgrade-grid,
  .sp-choice-panel { grid-template-columns: 1fr; }
  .sp-demo-card { position: relative; inset: auto; width: auto; margin: .75rem; }
  .sp-hero-visual { display: flex; flex-direction: column; justify-content: flex-end; min-height: 30rem; }
  .sp-hero-visual__image { height: 65%; bottom: auto; }
}

/* Use-case narrative: Why small details matter */
.sp-section--story {
  background:
    radial-gradient(circle at 12% 10%, rgba(94,146,227,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.54));
}
.sp-story-panel {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 1.4rem;
  align-items: start;
}
.sp-story-panel__intro {
  position: sticky;
  top: 6rem;
  padding: 1.25rem;
}
.sp-story-panel__intro h2 {
  margin: .8rem 0 .8rem;
  color: var(--sp-ink);
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1;
}
.sp-story-panel__intro p {
  color: var(--sp-muted);
  font-size: 1.02rem;
  line-height: 1.72;
  margin: 0;
}
.sp-story-card {
  position: relative;
  padding: 1.45rem;
  border-radius: var(--sp-radius-xl);
  border: 1px solid rgba(94,146,227,.16);
  background: rgba(255,255,255,.90);
  box-shadow: var(--sp-shadow-md);
  overflow: hidden;
}
.sp-story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(94,146,227,.08), rgba(223,64,103,.04));
  pointer-events: none;
}
.sp-story-card__marker {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1.2rem;
  color: var(--sp-primary-dark);
  background: #fff;
  border: 1px solid rgba(94,146,227,.18);
  box-shadow: var(--sp-shadow-sm);
  font-size: 1.35rem;
}
.sp-story-card__copy,
.sp-story-takeaway {
  position: relative;
}
.sp-story-card__copy {
  margin-top: 1rem;
  display: grid;
  gap: .7rem;
}
.sp-story-card__copy p {
  margin: 0;
  color: var(--sp-muted);
  line-height: 1.72;
}
.sp-story-card__copy p:first-child {
  color: var(--sp-ink);
  font-size: 1.12rem;
  font-weight: 850;
}
.sp-story-takeaway {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 1.2rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #17345f 0%, #10233f 100%);
  color: #f3f8ff;
  font-weight: 850;
  line-height: 1.55;
}
.sp-story-takeaway i {
  color: #bcd5ff;
  flex: 0 0 auto;
  margin-top: .15rem;
}
@media (max-width: 991.98px) {
  .sp-story-panel { grid-template-columns: 1fr; }
  .sp-story-panel__intro { position: static; padding: 0; }
}

/* Title centering guardrails
   Scope: public wrapper page and section titles only.
   Purpose: keep every public h1/h2 title visually centered even when the
   section layout uses split columns, trust bands, cards, or modal headers. */
body.salut-public-shell .sp-hero h1,
body.salut-public-shell .sp-page-hero h1,
body.salut-public-shell .sp-section h2,
body.salut-public-shell .sp-final-cta h2,
body.salut-public-shell .sp-modal .modal-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body.salut-public-shell .sp-hero .sp-kicker,
body.salut-public-shell .sp-page-hero__inner .sp-kicker,
body.salut-public-shell .sp-section-head .sp-kicker,
body.salut-public-shell .sp-story-panel__intro .sp-kicker,
body.salut-public-shell .sp-trust-band .sp-kicker,
body.salut-public-shell .sp-final-cta__inner .sp-kicker,
body.salut-public-shell .sp-modal .modal-header .sp-kicker {
  justify-content: center;
}
body.salut-public-shell .sp-story-panel__intro,
body.salut-public-shell .sp-card--strong,
body.salut-public-shell .sp-trust-band > div,
body.salut-public-shell .sp-final-cta__inner > div,
body.salut-public-shell .sp-modal .modal-header > div {
  text-align: center;
}
body.salut-public-shell .sp-card--strong h2,
body.salut-public-shell .sp-story-panel__intro h2,
body.salut-public-shell .sp-trust-band h2,
body.salut-public-shell .sp-final-cta h2 {
  max-width: 46rem;
}



/* ==========================================================================
   Integrated public auth/demo flow layout
   Scope: login, registration and demo pages before authentication.
   Keeps the authenticated application shell untouched after successful login.
   ========================================================================== */
body.salut-public-shell.auth-brand-page,
body.salut-public-shell.login-sheet-page,
body.salut-public-shell.register-brand-page,
body.salut-public-shell.confirmation-brand-page {
  background:
    radial-gradient(circle at 8% 4%, rgba(94, 146, 227, .13), transparent 24%),
    radial-gradient(circle at 92% 0%, rgba(223, 64, 103, .08), transparent 22%),
    linear-gradient(180deg, #fbfdff 0%, var(--sp-bg) 42%, var(--sp-bg-alt) 100%);
  color: var(--sp-ink);
}
body.salut-public-shell .sp-footer label,
body.salut-public-shell .sp-modal label,
body.salut-public-shell .sp-placeholder-form label {
  color: var(--sp-ink);
}
.sp-auth-integrated-section {
  position: relative;
  padding: 3.3rem 0 4.4rem;
}
.sp-auth-integrated-section .sheet-shell,
.sp-auth-integrated-section .auth-brand-shell {
  min-height: 0;
  width: min(100%, 1140px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  align-items: stretch;
  gap: 1.15rem;
}
.sp-auth-integrated-section .auth-brand-shell--compact {
  max-width: 960px;
}
.sp-auth-integrated-section .sheet-hero,
.sp-auth-integrated-section .auth-brand-hero {
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-xl);
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(237,244,253,.72));
  box-shadow: var(--sp-shadow-md);
  color: var(--sp-ink);
}
.sp-auth-integrated-section .sheet-card,
.sp-auth-integrated-section .auth-brand-card,
.sp-auth-integrated-section .auth-card {
  margin-top: 0;
  min-height: 0;
  border-radius: var(--sp-radius-xl);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--sp-shadow-lg);
}
.sp-auth-integrated-section .hero-title,
.sp-auth-integrated-section .auth-brand-title {
  max-width: 100%;
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -.045em;
}
.sp-auth-integrated-section .hero-copy,
.sp-auth-integrated-section .auth-brand-copy {
  max-width: 34rem;
}
.sp-auth-integrated-section .hero-stat-row,
.sp-auth-integrated-section .auth-brand-stat-row,
.sp-auth-integrated-section .demo-setup-promo-grid {
  flex-wrap: wrap;
}
.sp-auth-integrated-section .btn-primary,
.sp-auth-integrated-section button.btn-primary,
.sp-auth-integrated-section .demo-wizard-btn.btn-primary {
  border: 0;
  border-radius: 1rem;
  background: linear-gradient(180deg, #97b9ec 0%, var(--sp-primary) 100%);
  color: #0e2342;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(63,110,194,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sp-auth-integrated-section .btn-primary:hover,
.sp-auth-integrated-section button.btn-primary:hover,
.sp-auth-integrated-section .demo-wizard-btn.btn-primary:hover,
.sp-auth-integrated-section .btn-primary:focus-visible,
.sp-auth-integrated-section button.btn-primary:focus-visible,
.sp-auth-integrated-section .demo-wizard-btn.btn-primary:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 18px 36px rgba(63,110,194,.26);
  color: #0e2342;
}
.sp-auth-integrated-section .btn-outline-light,
.sp-auth-integrated-section .demo-return-login-link,
.sp-auth-integrated-section .demo-remove-secondary-link {
  border-radius: 1rem;
}
.sp-auth-integrated-section .footer-links a,
.sp-auth-integrated-section .text-link,
.sp-auth-integrated-section .demo-return-login-link {
  color: #bcd4fb;
}
.sp-auth-integrated-section .login-demo-entry__button {
  text-decoration: none;
}
.sp-auth-integrated-section .auth-bg--recovery,
.sp-auth-integrated-section .container-fluid.py-4 {
  background: transparent !important;
  padding: 0 !important;
}
.sp-auth-integrated-section .auth-card--register {
  background: linear-gradient(180deg, #17345f 0%, #12284a 100%);
  color: #f3f8ff;
}
.sp-auth-integrated-section .card-title {
  color: #fff;
  font-weight: 900;
}
.sp-auth-integrated-section .auth-card--register label,
.sp-auth-integrated-section .auth-card--register .form-check-label,
.sp-auth-integrated-section .auth-card--register .form-label {
  color: rgba(255,255,255,.92);
}
.sp-auth-integrated-section .auth-card--register .form-text,
.sp-auth-integrated-section .auth-card--register #crackTimeEstimate {
  color: rgba(243,248,255,.74) !important;
}
.sp-auth-integrated-section .demo-success-actions .btn,
.sp-auth-integrated-section .confirmation-actions .btn {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.15rem;
}
body.salut-public-shell .sp-header-actions .sp-btn--ghost[href*="login.php"] {
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .sp-auth-integrated-section .sheet-shell,
  .sp-auth-integrated-section .auth-brand-shell {
    grid-template-columns: 1fr;
  }
  .sp-auth-integrated-section .sheet-hero,
  .sp-auth-integrated-section .auth-brand-hero {
    order: 0;
  }
  .sp-auth-integrated-section .sheet-card,
  .sp-auth-integrated-section .auth-brand-card,
  .sp-auth-integrated-section .auth-card {
    order: 1;
  }
}
@media (max-width: 575.98px) {
  .sp-auth-integrated-section {
    padding: 2rem 0 3rem;
  }
  .sp-auth-integrated-section .sheet-hero,
  .sp-auth-integrated-section .auth-brand-hero,
  .sp-auth-integrated-section .sheet-card,
  .sp-auth-integrated-section .auth-brand-card,
  .sp-auth-integrated-section .auth-card {
    border-radius: 1.35rem;
  }
}

/* ==========================================================================
   Demo setup public integration scroll fix
   Scope: /modules/demo_setup.php when rendered inside the public wrapper.
   Context: the original standalone demo wizard was constrained to a viewport-fit
   layout. After public header/footer integration, the page must be allowed to
   grow and scroll normally so every wizard step and action remains reachable.
   ========================================================================== */
body.salut-public-shell.sp-demo-setup-flow,
body.salut-public-shell.demo-setup-page {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden;
}
body.salut-public-shell.sp-demo-setup-flow .sp-page,
body.salut-public-shell.demo-setup-page .sp-page,
body.salut-public-shell.sp-demo-setup-flow .sp-main,
body.salut-public-shell.demo-setup-page .sp-main,
body.salut-public-shell.sp-demo-setup-flow .sp-auth-integrated-section,
body.salut-public-shell.demo-setup-page .sp-auth-integrated-section,
body.salut-public-shell.sp-demo-setup-flow .sp-auth-flow-inner,
body.salut-public-shell.demo-setup-page .sp-auth-flow-inner {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
body.salut-public-shell.sp-demo-setup-flow .demo-setup-shell,
body.salut-public-shell.demo-setup-page .demo-setup-shell {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: flex-start !important;
}
body.salut-public-shell.sp-demo-setup-flow .demo-setup-hero,
body.salut-public-shell.demo-setup-page .demo-setup-hero,
body.salut-public-shell.sp-demo-setup-flow .demo-wizard-card,
body.salut-public-shell.demo-setup-page .demo-wizard-card,
body.salut-public-shell.sp-demo-setup-flow .demo-wizard-form,
body.salut-public-shell.demo-setup-page .demo-wizard-form,
body.salut-public-shell.sp-demo-setup-flow .demo-step-panel,
body.salut-public-shell.demo-setup-page .demo-step-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
body.salut-public-shell.sp-demo-setup-flow .demo-wizard-card,
body.salut-public-shell.demo-setup-page .demo-wizard-card {
  align-self: flex-start !important;
}
body.salut-public-shell.sp-demo-setup-flow .demo-wizard-actions,
body.salut-public-shell.demo-setup-page .demo-wizard-actions {
  position: sticky;
  bottom: 1rem;
  z-index: 5;
  margin-top: 1.35rem;
  padding: .85rem;
  border-radius: 1rem;
  background: rgba(18, 40, 74, .92);
  backdrop-filter: blur(12px);
}
body.salut-public-shell.sp-demo-setup-flow .demo-privacy-panel,
body.salut-public-shell.demo-setup-page .demo-privacy-panel {
  position: fixed;
}
@media (max-width: 991.98px) {
  body.salut-public-shell.sp-demo-setup-flow .demo-wizard-actions,
  body.salut-public-shell.demo-setup-page .demo-wizard-actions {
    bottom: .65rem;
  }
}

/* ============================================================================
   PUBLIC_QA_INTEGRATION_20260527_START
   Scope: public wrapper QA follow-up after auth/demo integration.
   ========================================================================== */
.sp-navbar__mobile-controls {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
}
.sp-navbar__mobile-controls .sp-lang-btn {
  min-height: 3rem;
  min-width: 5.2rem;
  padding-inline: .75rem;
  background: #fff;
  color: var(--sp-ink);
  border-color: var(--sp-line-strong);
  box-shadow: var(--sp-shadow-sm);
}
.sp-navbar__mobile-controls .sp-lang-menu {
  z-index: 1060;
}
@media (max-width: 991.98px) {
  .sp-navbar {
    min-height: 4.35rem;
  }
  .sp-navbar > .container {
    gap: .65rem;
  }
  .sp-brand__text {
    font-size: clamp(1.05rem, 5vw, 1.35rem);
  }
  .sp-brand__mark {
    width: 2.75rem;
    height: 2.75rem;
  }
  .sp-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    padding-top: .4rem;
  }
  .sp-header-actions .sp-btn {
    width: 100%;
  }
  .sp-nav-list .nav-link {
    padding: .78rem 1rem !important;
    font-size: 1.02rem;
  }
}
@media (max-width: 575.98px) {
  .sp-navbar > .container {
    padding-inline: 1rem;
  }
  .sp-navbar__mobile-controls .sp-lang-btn {
    min-width: 4.95rem;
  }
}

body.salut-public-shell .sp-btn {
  white-space: normal;
  text-align: center;
}
@media (max-width: 575.98px) {
  .sp-hero--home .sp-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .sp-hero--home .sp-hero-actions .sp-btn {
    width: 100%;
    min-width: 0;
    min-height: 3.35rem;
    padding-inline: .68rem;
    font-size: .94rem;
    line-height: 1.12;
  }
}

.sp-hero-visual--app-screen {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.sp-hero-visual--app-screen .sp-hero-visual__image {
  opacity: .42;
  filter: saturate(.92) contrast(.96);
}
.sp-hero-app-card {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  padding: 1rem;
  border-radius: 1.55rem;
  border: 1px solid rgba(255,255,255,.86);
  background: rgba(255,255,255,.9);
  box-shadow: var(--sp-shadow-lg);
  backdrop-filter: blur(16px);
}
.sp-hero-app-card__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .9rem;
}
.sp-hero-app-card__logo {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(94,146,227,.16);
  box-shadow: var(--sp-shadow-sm);
  flex: 0 0 auto;
}
.sp-hero-app-card__head span:not(.sp-hero-app-card__logo) {
  display: block;
  color: var(--sp-primary-dark);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sp-hero-app-card__head strong {
  display: block;
  margin-top: .15rem;
  color: var(--sp-ink);
  font-size: 1.15rem;
  line-height: 1.1;
  font-weight: 950;
}
.sp-hero-app-card__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .58rem;
}
.sp-hero-app-button {
  display: grid;
  place-items: center;
  gap: .38rem;
  min-height: 5.25rem;
  padding: .65rem .45rem;
  border-radius: 1rem;
  border: 1px solid rgba(94,146,227,.16);
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
  color: var(--sp-ink) !important;
  text-decoration: none;
  text-align: center;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.08;
  box-shadow: 0 10px 22px rgba(20,42,84,.07);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sp-hero-app-button i {
  color: var(--sp-primary-dark);
  font-size: 1.25rem;
}
.sp-hero-app-button:hover,
.sp-hero-app-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(94,146,227,.34);
  box-shadow: 0 16px 30px rgba(20,42,84,.12);
}
@media (max-width: 767.98px) {
  .sp-hero-visual--app-screen {
    min-height: 24rem;
    padding: 1rem;
  }
  .sp-hero-visual--app-screen .sp-hero-visual__image {
    height: 100%;
  }
  .sp-hero-app-card__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sp-hero-app-button {
    min-height: 4.6rem;
    font-size: .72rem;
  }
}
@media (max-width: 390px) {
  .sp-hero-app-card__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sp-comparison-mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .sp-comparison-wrap {
    display: none;
  }
  .sp-comparison-mobile {
    display: grid;
    gap: 1rem;
  }
  .sp-comparison-mobile-card {
    padding: 1rem;
    border-radius: var(--sp-radius-lg);
    border: 1px solid var(--sp-line);
    background: rgba(255,255,255,.9);
    box-shadow: var(--sp-shadow-sm);
  }
  .sp-comparison-mobile-card h3 {
    margin: 0 0 .8rem;
    color: var(--sp-ink);
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -.02em;
  }
  .sp-comparison-mobile-card dl {
    display: grid;
    gap: .65rem;
    margin: 0;
  }
  .sp-comparison-mobile-card dl > div {
    padding: .75rem;
    border-radius: 1rem;
    background: rgba(94,146,227,.07);
    border: 1px solid rgba(94,146,227,.10);
  }
  .sp-comparison-mobile-card dt {
    margin: 0 0 .2rem;
    color: var(--sp-primary-dark);
    font-size: .75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .sp-comparison-mobile-card dd {
    margin: 0;
    color: var(--sp-muted);
    line-height: 1.45;
    font-weight: 720;
  }
}

.sp-page-hero--legal {
  background: linear-gradient(135deg, rgba(94,146,227,.10), rgba(255,255,255,0));
}
.sp-legal-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: 1rem;
  padding: .68rem .9rem;
  border-radius: 999px;
  background: rgba(94,146,227,.10);
  color: var(--sp-primary-dark) !important;
  font-weight: 850;
}
.sp-legal-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
}
.sp-legal-sidebar {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 1rem;
}
.sp-legal-toc,
.sp-legal-support,
.sp-legal-card {
  border: 1px solid var(--sp-line);
  background: rgba(255,255,255,.9);
  box-shadow: var(--sp-shadow-sm);
  border-radius: var(--sp-radius-lg);
}
.sp-legal-toc,
.sp-legal-support {
  padding: 1rem;
}
.sp-legal-toc strong,
.sp-legal-support strong {
  display: block;
  margin-bottom: .7rem;
  color: var(--sp-ink);
  font-weight: 950;
}
.sp-legal-toc a {
  display: flex;
  gap: .5rem;
  padding: .55rem .6rem;
  border-radius: .85rem;
  color: var(--sp-muted);
  text-decoration: none;
  font-weight: 760;
  line-height: 1.25;
}
.sp-legal-toc a::before {
  content: "";
  width: .42rem;
  height: .42rem;
  margin-top: .42rem;
  border-radius: 999px;
  background: rgba(94,146,227,.45);
  flex: 0 0 auto;
}
.sp-legal-toc a:hover,
.sp-legal-toc a:focus-visible {
  color: var(--sp-ink);
  background: rgba(94,146,227,.08);
}
.sp-legal-support p {
  color: var(--sp-muted);
  line-height: 1.55;
}
.sp-legal-content {
  display: grid;
  gap: 1rem;
}
.sp-legal-card {
  padding: clamp(1.05rem, 2.4vw, 1.55rem);
  scroll-margin-top: 6rem;
}
.sp-legal-card h2 {
  margin: 0 0 .55rem;
  color: var(--sp-ink);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -.025em;
}
.sp-legal-card p {
  color: var(--sp-muted);
  line-height: 1.72;
  margin: 0;
}
.sp-legal-card p + p {
  margin-top: .9rem;
}
@media (max-width: 860px) {
  .sp-legal-layout {
    grid-template-columns: 1fr;
  }
  .sp-legal-sidebar {
    position: static;
    order: 2;
  }
  .sp-legal-content {
    order: 1;
  }
}
/* PUBLIC_QA_INTEGRATION_20260527_END */

/* ============================================================================
   QA feedback follow-up 20260527
   Scope: public wrapper header language flags + home visual connected areas.
   ============================================================================ */
/* PUBLIC_QA_FEEDBACK_LANGUAGE_BADGES_START */
.sp-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
.sp-lang-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 780;
}
.sp-lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.05rem;
  height: 1.45rem;
  padding: 0 .42rem;
  flex: 0 0 auto;
  border-radius: .48rem;
  border: 1px solid rgba(94,146,227,.28);
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
  color: var(--sp-primary-dark);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 4px 10px rgba(20,42,84,.08);
  font-size: .78rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.sp-lang-btn .sp-lang-badge {
  min-width: 2.25rem;
  height: 1.55rem;
}
.sp-lang-menu .active .sp-lang-badge {
  border-color: rgba(255,255,255,.48);
  background: rgba(255,255,255,.16);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 2px 8px rgba(15,35,70,.12);
}
/* PUBLIC_QA_FEEDBACK_LANGUAGE_BADGES_END */

/* PUBLIC_QA_HOME_ALERTS_CENTERED_MOBILEFIT_START */

.sp-hero-visual--family-context {
  display: block;
  min-height: 31rem;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
}
.sp-hero-visual--family-context::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(233,242,255,.05)),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.18), transparent 22%);
  pointer-events: none;
}
.sp-hero-visual--family-context .sp-hero-visual__image {
  opacity: 1;
  transform: scale(1.01);
  object-position: 82% center;
  object-fit: cover;
  z-index: -1;
}
.sp-home-alerts {
  position: absolute;
  top: 1.15rem;
  left: 1.15rem;
  bottom: 1.15rem;
  width: min(14.8rem, 44%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .78rem;
  justify-content: center;
  align-items: stretch;
  pointer-events: none;
}
.sp-home-alert {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  gap: .62rem;
  width: 100%;
  min-height: 4rem;
  padding: .64rem .75rem;
  border-radius: 1.15rem;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 16px 34px rgba(18,40,74,.14);
  backdrop-filter: blur(8px) saturate(1.04);
}
.sp-home-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .82rem;
  background: linear-gradient(180deg, rgba(155,194,255,.34), rgba(94,146,227,.18));
  color: var(--sp-primary-dark);
  font-size: 1rem;
  flex: 0 0 auto;
}
.sp-home-alert__body {
  min-width: 0;
  display: grid;
  gap: .08rem;
  flex: 1 1 auto;
}
.sp-home-alert__body strong,
.sp-home-alert__body span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-home-alert__body strong {
  color: var(--sp-ink);
  font-size: .95rem;
  font-weight: 950;
  line-height: 1.12;
}
.sp-home-alert__body span {
  color: var(--sp-muted);
  font-size: .75rem;
  font-weight: 760;
}
.sp-home-alert__time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .52rem;
  border-radius: 999px;
  background: rgba(15,35,70,.06);
  color: var(--sp-ink);
  font-size: .75rem;
  font-weight: 900;
  white-space: nowrap;
  flex: 0 0 auto;
}
.sp-home-alert--primary,
.sp-home-alert--secondary,
.sp-home-alert--tertiary {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}
@media (max-width: 1199.98px) {
  .sp-home-alerts {
    width: min(13.8rem, 45%);
  }
  .sp-home-alert {
    min-height: 3.85rem;
  }
}
@media (max-width: 991.98px) {
  .sp-hero-visual--family-context {
    min-height: 29rem;
  }
  .sp-hero-visual--family-context .sp-hero-visual__image {
    object-position: 84% center;
  }
  .sp-home-alerts {
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    width: min(13rem, 46%);
    gap: .7rem;
  }
  .sp-home-alert {
    min-height: 3.7rem;
    padding: .58rem .68rem;
  }
}
@media (max-width: 767.98px) {
  .sp-hero-visual--family-context {
    min-height: 26.5rem;
  }
  .sp-hero-visual--family-context .sp-hero-visual__image {
    object-position: 88% center;
  }
  .sp-home-alerts {
    top: .85rem;
    left: .85rem;
    bottom: .85rem;
    width: min(12.4rem, 48%);
    gap: .6rem;
  }
  .sp-home-alert {
    min-height: 3.25rem;
    gap: .5rem;
    padding: .52rem .58rem;
    border-radius: 1rem;
  }
  .sp-home-alert__icon {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: .72rem;
    font-size: .9rem;
  }
  .sp-home-alert__body strong {
    font-size: .82rem;
  }
  .sp-home-alert__body span {
    font-size: .68rem;
  }
  .sp-home-alert__time {
    padding: .24rem .42rem;
    font-size: .64rem;
  }
}
@media (max-width: 430px) {
  .sp-hero-visual--family-context {
    min-height: 25rem;
  }
  .sp-home-alerts {
    width: min(11.75rem, 49%);
    gap: .54rem;
  }
  .sp-home-alert {
    min-height: 3.1rem;
  }
  .sp-home-alert__body strong {
    font-size: .78rem;
  }
  .sp-home-alert__body span {
    font-size: .64rem;
  }
}
@media (max-width: 767.98px) {
  .sp-hero-visual--family-context .sp-hero-visual__image {
    object-fit: contain;
    object-position: right center;
    transform: none;
  }
}
/* PUBLIC_QA_HOME_ALERTS_CENTERED_MOBILEFIT_END */
/* PUBLIC_QA_HOME_ALERTS_COMPACT_END */

/* ============================================================================
   PUBLIC_QA_HOME_ALERTS_MOBILE_FRAME_FIX_20260527
   Scope: mobile rendering of the home hero visual.
   Fixes the inherited mobile rule that forced the image to 65% height and left
   a large empty lower frame. The mobile frame now follows the illustration
   aspect ratio and the alert stack is vertically centered inside it.
   ========================================================================== */
@media (max-width: 767.98px) {
  .sp-hero-visual--family-context {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    display: block !important;
  }
  .sp-hero-visual--family-context .sp-hero-visual__image {
    inset: 0;
    width: 100%;
    height: 100% !important;
    bottom: auto;
    object-fit: cover;
    object-position: center center;
    transform: none;
  }
  .sp-home-alerts {
    top: 50%;
    left: .72rem;
    bottom: auto;
    transform: translateY(-50%);
    width: clamp(13.35rem, 62%, 15.25rem);
    gap: .48rem;
  }
  .sp-home-alert {
    min-height: 2.95rem;
    padding: .46rem .55rem;
    gap: .48rem;
    border-radius: .95rem;
  }
  .sp-home-alert__icon {
    width: 1.82rem;
    height: 1.82rem;
    border-radius: .68rem;
    font-size: .82rem;
  }
  .sp-home-alert__body strong {
    font-size: .76rem;
    letter-spacing: -.01em;
  }
  .sp-home-alert__body span {
    font-size: .62rem;
  }
  .sp-home-alert__time {
    padding: .22rem .38rem;
    font-size: .6rem;
  }
}
@media (max-width: 430px) {
  .sp-home-alerts {
    width: clamp(12.85rem, 64%, 14.25rem);
    left: .62rem;
  }
  .sp-home-alert {
    min-height: 2.78rem;
    padding: .42rem .5rem;
  }
  .sp-home-alert__icon {
    width: 1.7rem;
    height: 1.7rem;
  }
  .sp-home-alert__body strong {
    font-size: .72rem;
  }
  .sp-home-alert__body span {
    font-size: .58rem;
  }
  .sp-home-alert__time {
    font-size: .56rem;
  }
}
/* PUBLIC_QA_HOME_ALERTS_MOBILE_FRAME_FIX_20260527_END */

/* ============================================================================
   PUBLIC_QA_HOME_ALERTS_SPACING_MOBILECOMPACT_20260527
   Scope: add safer left-frame spacing for the alert chips on desktop/mobile,
   and reduce chip scale on mobile so they feel lighter over the image.
   ========================================================================== */
.sp-home-alerts {
  left: 1.45rem;
  width: min(14.15rem, 41.5%);
}
@media (max-width: 1199.98px) {
  .sp-home-alerts {
    left: 1.3rem;
    width: min(13.3rem, 42.5%);
  }
}
@media (max-width: 991.98px) {
  .sp-home-alerts {
    left: 1.15rem;
    width: min(12.55rem, 43%);
  }
}
@media (max-width: 767.98px) {
  .sp-home-alerts {
    left: .98rem;
    width: clamp(11.15rem, 52%, 12.2rem);
    gap: .42rem;
  }
  .sp-home-alert {
    min-height: 2.56rem;
    padding: .38rem .46rem;
    gap: .4rem;
    border-radius: .88rem;
  }
  .sp-home-alert__icon {
    width: 1.58rem;
    height: 1.58rem;
    border-radius: .58rem;
    font-size: .74rem;
  }
  .sp-home-alert__body strong {
    font-size: .69rem;
  }
  .sp-home-alert__body span {
    font-size: .56rem;
  }
  .sp-home-alert__time {
    padding: .18rem .32rem;
    font-size: .54rem;
  }
}
@media (max-width: 430px) {
  .sp-home-alerts {
    left: .9rem;
    width: clamp(10.7rem, 51%, 11.65rem);
    gap: .38rem;
  }
  .sp-home-alert {
    min-height: 2.4rem;
    padding: .34rem .42rem;
  }
  .sp-home-alert__icon {
    width: 1.48rem;
    height: 1.48rem;
    font-size: .68rem;
  }
  .sp-home-alert__body strong {
    font-size: .64rem;
  }
  .sp-home-alert__body span {
    font-size: .52rem;
  }
  .sp-home-alert__time {
    font-size: .5rem;
  }
}
/* PUBLIC_QA_HOME_ALERTS_SPACING_MOBILECOMPACT_20260527_END */


/* ============================================================================
   PUBLIC_QA_HOME_ALERTS_DESKTOP_MOBILE_TUNE_20260527
   Scope: final responsive tuning for the home hero alert stack.
   - Desktop/tablet: keep the alerts vertically centered with comfortable left
     spacing and slightly shorter cards.
   - Mobile: ensure the compact chip version actually applies, preserve a clear
     left margin from the inner frame, and reduce the chip height so the image
     remains the main visual.
   ========================================================================== */
@media (min-width: 768px) {
  .sp-home-alerts {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    left: 1.5rem;
    width: min(15.4rem, 42%);
    gap: .66rem;
  }
  .sp-home-alert {
    min-height: 3.55rem;
    padding: .52rem .68rem;
    gap: .56rem;
    border-radius: 1.05rem;
  }
  .sp-home-alert__icon {
    width: 1.98rem;
    height: 1.98rem;
    border-radius: .74rem;
    font-size: .92rem;
  }
  .sp-home-alert__body strong {
    font-size: .9rem;
  }
  .sp-home-alert__body span {
    font-size: .72rem;
  }
  .sp-home-alert__time {
    padding: .26rem .46rem;
    font-size: .7rem;
  }
}
@media (max-width: 767.98px) {
  .sp-home-alerts {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    left: 1.12rem;
    width: clamp(10.1rem, 47.5%, 11rem);
    gap: .34rem;
  }
  .sp-home-alert {
    min-height: 2.18rem;
    padding: .28rem .38rem;
    gap: .34rem;
    border-radius: .8rem;
  }
  .sp-home-alert__icon {
    width: 1.38rem;
    height: 1.38rem;
    border-radius: .5rem;
    font-size: .64rem;
  }
  .sp-home-alert__body strong {
    font-size: .6rem;
    line-height: 1.02;
  }
  .sp-home-alert__body span {
    font-size: .48rem;
  }
  .sp-home-alert__time {
    padding: .15rem .26rem;
    font-size: .46rem;
  }
}
@media (max-width: 430px) {
  .sp-home-alerts {
    left: 1rem;
    width: clamp(9.6rem, 46.5%, 10.4rem);
    gap: .32rem;
  }
  .sp-home-alert {
    min-height: 2.06rem;
    padding: .26rem .34rem;
  }
  .sp-home-alert__icon {
    width: 1.3rem;
    height: 1.3rem;
    font-size: .6rem;
  }
  .sp-home-alert__body strong {
    font-size: .57rem;
  }
  .sp-home-alert__body span {
    font-size: .45rem;
  }
  .sp-home-alert__time {
    padding: .14rem .22rem;
    font-size: .43rem;
  }
}
/* PUBLIC_QA_HOME_ALERTS_DESKTOP_MOBILE_TUNE_20260527_END */

/* ============================================================================
   PUBLIC_QA_HOME_MOBILE_NO_HORIZONTAL_SCROLL_20260527
   Scope: /public/index.php mobile only.
   Prevent page-level horizontal scroll from the home hero composition while
   keeping the alert stack and illustration clipped inside their own frame.
   ========================================================================== */
@media (max-width: 767.98px) {
  html,
  body.salut-public-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }
  body.salut-public-shell .sp-page,
  body.salut-public-shell .sp-main,
  body.salut-public-shell .sp-hero--home,
  body.salut-public-shell .sp-hero--home .container,
  body.salut-public-shell .sp-hero--home .row,
  body.salut-public-shell .sp-hero--home [class*="col-"] {
    max-width: 100%;
    min-width: 0;
  }
  body.salut-public-shell .sp-hero--home,
  body.salut-public-shell .sp-hero--home .container {
    overflow-x: clip;
  }
  body.salut-public-shell .sp-hero--home .row {
    margin-left: 0;
    margin-right: 0;
  }
  body.salut-public-shell .sp-hero--home .row > * {
    min-width: 0;
  }
  body.salut-public-shell .sp-hero--home .sp-hero-visual,
  body.salut-public-shell .sp-hero--home .sp-hero-actions,
  body.salut-public-shell .sp-hero--home .sp-inline-link {
    max-width: 100%;
  }
  body.salut-public-shell .sp-hero--home .sp-hero-visual {
    width: 100%;
  }
  body.salut-public-shell .sp-hero--home h1,
  body.salut-public-shell .sp-hero--home .sp-lead {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alerts {
    max-width: calc(100% - 2rem);
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert {
    max-width: 100%;
  }
}
/* PUBLIC_QA_HOME_MOBILE_NO_HORIZONTAL_SCROLL_20260527_END */


/* ============================================================================
   PUBLIC_QA_HOME_VISUAL_RESTORE_MOBILE_IMAGE_20260527
   Scope: /public/index.php hero visual only.
   - Restore the left-aligned alert cards inside the illustration frame.
   - Make the mobile illustration taller and more prominent while preserving
     the no-horizontal-scroll guard.
   - Suppress the old illustration footer note/icon if an older template or
     translation still emits it.
   ========================================================================== */
body.salut-public-shell .sp-hero--home .sp-visual-note {
  display: none !important;
}
body.salut-public-shell .sp-hero--home .sp-hero-visual--family-context {
  position: relative;
  overflow: hidden;
}
body.salut-public-shell .sp-hero--home .sp-hero-visual--family-context .sp-hero-visual__image {
  opacity: 1;
  z-index: 0;
}
body.salut-public-shell .sp-hero--home .sp-hero-visual--family-context::before,
body.salut-public-shell .sp-hero--home .sp-hero-visual--family-context::after {
  z-index: 1;
}
body.salut-public-shell .sp-hero--home .sp-home-alerts {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3;
  pointer-events: none;
}
body.salut-public-shell .sp-hero--home .sp-home-alert {
  flex-shrink: 0;
}
@media (min-width: 768px) {
  body.salut-public-shell .sp-hero--home .sp-home-alerts {
    top: 50%;
    bottom: auto;
    left: 1.45rem;
    transform: translateY(-50%);
    width: min(15.4rem, 42%);
    gap: .64rem;
    align-items: stretch;
  }
}
@media (max-width: 767.98px) {
  body.salut-public-shell .sp-hero--home .sp-hero-visual--family-context {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    min-height: clamp(18.25rem, 72vw, 21.5rem) !important;
    margin-inline: auto;
  }
  body.salut-public-shell .sp-hero--home .sp-hero-visual--family-context .sp-hero-visual__image {
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    transform: none;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alerts {
    top: 50%;
    bottom: auto;
    left: .95rem;
    transform: translateY(-50%);
    width: clamp(9.9rem, 48%, 11.25rem);
    max-width: calc(100% - 1.9rem);
    gap: .36rem;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert {
    min-height: 2.16rem;
    padding: .28rem .38rem;
    gap: .34rem;
    border-radius: .8rem;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert__icon {
    width: 1.34rem;
    height: 1.34rem;
    border-radius: .5rem;
    font-size: .62rem;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert__body strong {
    font-size: .59rem;
    line-height: 1.02;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert__body span {
    font-size: .47rem;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert__time {
    padding: .14rem .24rem;
    font-size: .44rem;
  }
}
@media (max-width: 430px) {
  body.salut-public-shell .sp-hero--home .sp-hero-visual--family-context {
    min-height: clamp(18rem, 76vw, 20.5rem) !important;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alerts {
    left: .85rem;
    width: clamp(9.45rem, 46.5%, 10.45rem);
    gap: .32rem;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert {
    min-height: 2.02rem;
    padding: .25rem .34rem;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert__icon {
    width: 1.24rem;
    height: 1.24rem;
    font-size: .58rem;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert__body strong {
    font-size: .56rem;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert__body span {
    font-size: .44rem;
  }
  body.salut-public-shell .sp-hero--home .sp-home-alert__time {
    font-size: .41rem;
  }
}
/* PUBLIC_QA_HOME_VISUAL_RESTORE_MOBILE_IMAGE_20260527_END */


/* =====================================================
   SalutApp Stripe public pricing checkout flow — Phase 5A
   Scope: public pricing plan handoff + authenticated checkout confirmation.
===================================================== */
.sp-billing-flow { padding-top: clamp(2.4rem, 7vw, 5.2rem); }
.sp-billing-flow__shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: clamp(1.2rem, 4vw, 2rem); align-items: stretch; }
.sp-billing-flow__hero, .sp-billing-flow__card { border: 1px solid rgba(22, 58, 114, .10); border-radius: 1.7rem; background: rgba(255,255,255,.92); box-shadow: 0 24px 58px rgba(18, 40, 74, .10); }
.sp-billing-flow__hero { padding: clamp(1.4rem, 4vw, 2.2rem); }
.sp-billing-flow__hero h1 { max-width: 15ch; margin: .45rem 0 .85rem; color: #10233f; font-size: clamp(2rem, 6vw, 4.2rem); font-weight: 950; letter-spacing: -.05em; line-height: .96; }
.sp-billing-flow__hero p { max-width: 58ch; color: #526987; font-size: clamp(1rem, 2vw, 1.16rem); line-height: 1.7; }
.sp-billing-flow__card { padding: clamp(1.2rem, 3vw, 1.55rem); }
.sp-billing-flow__badge { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .7rem; padding: .35rem .65rem; border-radius: 999px; background: rgba(13, 167, 154, .10); color: #096e65; font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sp-billing-flow__card h2 { margin: 0 0 .45rem; color: #10233f; font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 900; }
.sp-billing-flow__price { margin: 0 0 .65rem; color: #0b6f61; font-size: clamp(1.2rem, 3vw, 1.75rem); font-weight: 950; }
.sp-billing-flow__muted, .sp-billing-flow__privacy { color: #5d718f; line-height: 1.55; }
.sp-billing-flow__privacy { display: flex; gap: .55rem; margin: 1rem 0 0; padding: .85rem; border: 1px solid rgba(22, 58, 114, .10); border-radius: 1rem; background: rgba(247,251,255,.82); font-size: .9rem; }
.sp-billing-flow__privacy i { color: #527dcc; margin-top: .18rem; }
.sp-billing-flow__actions { display: grid; gap: .75rem; margin-top: 1rem; }
.sp-billing-flow__notice { display: grid; gap: .35rem; margin: 1rem 0; padding: .9rem; border-radius: 1rem; line-height: 1.45; }
.sp-billing-flow__notice--warning { border: 1px solid rgba(188, 122, 16, .28); background: rgba(255, 248, 228, .85); color: #5f3b08; }
.sp-billing-flow__notice--success { border: 1px solid rgba(13, 167, 154, .24); background: rgba(232, 251, 247, .88); color: #0a675f; }
.sp-billing-flow__back { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-weight: 850; }
.auth-billing-intent { display: grid; gap: .25rem; margin: .85rem 0 1rem; padding: .85rem; border: 1px solid rgba(82, 125, 204, .18); border-radius: 1rem; background: rgba(247, 251, 255, .88); color: #10233f; font-size: .92rem; }
.auth-billing-intent span { color: #5d718f; line-height: 1.45; }
@media (max-width: 991.98px) { .sp-billing-flow__shell { grid-template-columns: 1fr; } }


/* =====================================================
   SalutApp checkout confirmation visual polish — Phase 5A.2
   Scope: checkout confirmation navy card + purchase-intent CTA suppression.
===================================================== */
.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout {
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(145deg, #10294a 0%, #0b1f3a 100%);
  color: #f8fbff;
  box-shadow: 0 28px 74px rgba(13, 31, 58, .26);
}

.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-billing-flow__badge {
  background: rgba(255,255,255,.12);
  color: #dcecff;
}

.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout h2,
.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-billing-flow__price {
  color: #ffffff;
}

.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-billing-flow__muted,
.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-billing-flow__privacy,
.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-inline-link {
  color: rgba(248,251,255,.78);
}

.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-billing-flow__privacy {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.08);
}

.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-billing-flow__privacy i,
.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-inline-link i {
  color: #a8c7ff;
}

.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-billing-flow__notice--warning {
  border-color: rgba(255,214,130,.35);
  background: rgba(255,248,228,.12);
  color: #fff1c2;
}

.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-billing-flow__notice--success {
  border-color: rgba(136,232,210,.32);
  background: rgba(232,251,247,.11);
  color: #d7fff7;
}

.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-btn--primary {
  border-color: rgba(255,255,255,.18);
  background: #8db8ff;
  color: #0d2342;
}

.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-btn--primary:disabled,
.sp-billing-checkout-confirm-page .sp-billing-flow__card--checkout .sp-btn--primary.disabled {
  opacity: .78;
  color: #0d2342;
}

/* =====================================================
   SalutApp checkout confirmation visual hardening — Phase 5A.2.1
   Scope: force checkout card branding even when browser has cached earlier public CSS.
===================================================== */
.sp-billing-flow--checkout-confirm .sp-billing-flow__shell {
  align-items: center;
}

.sp-billing-flow__card--checkout {
  border-color: rgba(255,255,255,.14) !important;
  background: linear-gradient(145deg, #10294a 0%, #0b1f3a 100%) !important;
  color: #f8fbff !important;
  box-shadow: 0 28px 74px rgba(13, 31, 58, .26) !important;
}

.sp-billing-flow__card--checkout .sp-billing-flow__badge {
  background: rgba(255,255,255,.12) !important;
  color: #dcecff !important;
}

.sp-billing-flow__card--checkout h2,
.sp-billing-flow__card--checkout .sp-billing-flow__price {
  color: #ffffff !important;
}

.sp-billing-flow__card--checkout .sp-billing-flow__muted,
.sp-billing-flow__card--checkout .sp-billing-flow__privacy,
.sp-billing-flow__card--checkout .sp-inline-link {
  color: rgba(248,251,255,.78) !important;
}

.sp-billing-flow__card--checkout .sp-billing-flow__privacy {
  border-color: rgba(255,255,255,.13) !important;
  background: rgba(255,255,255,.08) !important;
}

.sp-billing-flow__card--checkout .sp-billing-flow__privacy i,
.sp-billing-flow__card--checkout .sp-inline-link i {
  color: #a8c7ff !important;
}

.sp-billing-flow__card--checkout .sp-billing-flow__notice--warning {
  border-color: rgba(255,214,130,.35) !important;
  background: rgba(255,248,228,.12) !important;
  color: #fff1c2 !important;
}

.sp-billing-flow__card--checkout .sp-billing-flow__notice--success {
  border-color: rgba(136,232,210,.32) !important;
  background: rgba(232,251,247,.11) !important;
  color: #d7fff7 !important;
}

.sp-billing-flow__card--checkout .sp-btn--primary {
  border-color: rgba(255,255,255,.18) !important;
  background: #8db8ff !important;
  color: #0d2342 !important;
}

.sp-billing-flow__card--checkout .sp-btn--primary:disabled,
.sp-billing-flow__card--checkout .sp-btn--primary.disabled {
  opacity: .82;
  color: #0d2342 !important;
}


/* =====================================================
   SalutApp checkout confirmation layout balance — Phase 5A.2.2
   Scope: give purchase/review card at least half of the desktop page.
===================================================== */
@media (min-width: 992px) {
  .sp-billing-flow--checkout-confirm .sp-billing-flow__shell {
    grid-template-columns: minmax(280px, .85fr) minmax(560px, 1.15fr) !important;
    gap: clamp(1.4rem, 3vw, 2.2rem) !important;
  }

  .sp-billing-flow--checkout-confirm .sp-billing-flow__hero {
    align-self: center;
  }

  .sp-billing-flow--checkout-confirm .sp-billing-flow__card--checkout {
    width: 100% !important;
    min-height: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}


/* =====================================================
   SalutApp public pricing comparison consolidation — Phase 5B.1.3
   Scope: preserve the existing branded comparison table as the only plan-boundary comparison.
===================================================== */
.sp-comparison-promise {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: .85rem;
  color: var(--sp-primary-dark);
  font-weight: 850;
}

.sp-comparison-promise i {
  margin-top: .14rem;
  color: var(--sp-primary);
}


/* =====================================================
   SalutApp public pricing branded comparison icons — Phase 5B.1.4
   Scope: keep the existing branded comparison table, adding visual status cues only.
===================================================== */
.sp-comparison-value {
  display: inline-flex;
  align-items: flex-start;
  gap: .72rem;
  color: var(--sp-muted);
  font-weight: 760;
  line-height: 1.45;
}

.sp-comparison-value i {
  flex: 0 0 auto;
  margin-top: .16rem;
  font-size: .98rem;
  width: 1.18rem;
  min-width: 1.18rem;
  display: inline-flex;
  justify-content: center;
}

.sp-comparison-value--is-included,
.sp-comparison-value--is-always {
  color: var(--sp-primary-dark);
  font-weight: 850;
}

.sp-comparison-value--is-included i {
  color: var(--sp-primary);
}

.sp-comparison-value--is-always i {
  color: #315fa6;
}

.sp-comparison-value--is-premium {
  color: var(--sp-primary-dark);
  font-weight: 900;
}

.sp-comparison-value--is-premium i {
  color: #5e92e3;
}

.sp-comparison-value--is-limited {
  color: #526987;
  font-weight: 820;
}

.sp-comparison-value--is-limited i {
  color: #7fa5dd;
}

.sp-comparison-value--is-locked {
  color: #7c8ca3;
  font-weight: 760;
}

.sp-comparison-value--is-locked i {
  color: #9aabc0;
}

.sp-comparison-mobile-card dd .sp-comparison-value {
  justify-content: flex-end;
  text-align: right;
}

@media (max-width: 575.98px) {
  .sp-comparison-mobile-card dd .sp-comparison-value {
    justify-content: flex-start;
    text-align: left;
  }
}


/* =====================================================
   SalutApp public pricing branded comparison icon spacing — Phase 5B.1.4.1
   Scope: small readability polish for icon/text spacing only.
===================================================== */
/* The base rules above now reserve a fixed icon slot and increase the icon/text gap. */