/* ============================================================
   Stratus Strata - Financial Planner microsite styles
   Purple app-home theme (finPlan_Application_Home palette).
   ============================================================ */

/* ---------- Purple gradient hero ---------- */
.fp-hero {
  background: linear-gradient(135deg, var(--fp-brand-start) 0%, var(--fp-brand-end) 60%, #b794f4 100%);
  padding-bottom: 88px;
}

.fp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image:
    radial-gradient(circle at 15% 45%, rgba(255, 255, 255, 0.4) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.25) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.fp-hero .hero-canvas,
.fp-hero .hero-strata {
  display: none;
}

.fp-hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
  pointer-events: none;
}

.fp-hero-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fp-hero .sds-badge--fp {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.fp-hero h1 {
  color: #ffffff;
}

.fp-hero .lede {
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
}

.fp-hero .hero-trust {
  color: rgba(255, 255, 255, 0.78);
}

.fp-hero .hero-trust b {
  color: #ffffff;
}

.fp-hero .hero-trust svg {
  color: rgba(255, 255, 255, 0.85);
}

.fp-hero .hero-ctas .sds-btn--primary {
  background: #ffffff;
  color: var(--fp-brand-start);
  border-color: #ffffff;
  font-weight: 700;
}

.fp-hero .hero-ctas .sds-btn--primary:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--fp-brand-end);
}

.fp-hero .hero-ctas .sds-btn--secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.fp-hero .hero-ctas .sds-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.fp-hero .browser-frame__viewport {
  background: var(--cloud-50);
}

/* ---------- Proof cards ---------- */
.fp-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.fp-proof-card {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  font-family: var(--font-body);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.04);
  transition: var(--transition-hover);
}

.fp-proof-card:hover {
  box-shadow:
    0 12px 28px rgba(90, 103, 216, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
  border-color: rgba(90, 103, 216, 0.2);
}

.fp-proof-card__chip {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.fp-proof-card__chip.chip--fp {
  background: linear-gradient(135deg, var(--fp-brand-start), var(--fp-brand-end));
  color: #ffffff;
}

.fp-proof-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-display);
  margin-bottom: 6px;
}

.fp-proof-card p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
  text-wrap: pretty;
}

.why-item .chip.chip--fp {
  background: linear-gradient(135deg, var(--fp-brand-start), var(--fp-brand-end));
  color: #ffffff;
}

/* ---------- UI snippet embeds ---------- */
.fp-hero .hero-grid {
  align-items: center;
}

.fp-hero .hero-grid > div:has([data-fp-hero-screenshot]) {
  display: flex;
  justify-content: center;
}

/* Keep Three.js strata bands from painting through the screenshot column. */
.fp-hero .hero-canvas {
  clip-path: inset(0 0 22% 0);
}

.fp-hero-screenshot {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: #f4f6f9;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  /* No-JS fallback; financial-planner.js sets the scaled height. */
  aspect-ratio: 980 / 900;
}

.fp-hero-screenshot .sds-browserframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 980px;
  transform-origin: top left;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.fp-hero .sds-browserframe__body {
  padding: 0;
  overflow: hidden;
}

.fp-hero__frame {
  display: block;
  width: 980px;
  height: 900px;
  border: 0;
  background: #f3f3f3;
}

.why-grid .ms-embed {
  margin: 0;
}

.fp-rich-cards {
  margin-top: 0;
}

.fp-longanchor--alt > .section {
  background: var(--surface-card);
  border-block: 1px solid var(--line-hairline);
}

.section:has(+ .fp-longanchor) {
  padding-bottom: var(--space-9);
}

.section + .fp-longanchor > .section {
  padding-top: var(--space-9);
}

/* ---------- Package + feature matrix ---------- */
.fp-pkg-banner {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  background: var(--ink-900);
  border-radius: var(--radius-2xl);
  padding: 40px 48px;
  color: var(--text-inverse);
  font-family: var(--font-body);
}

.fp-pkg-banner__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(90, 103, 216, 0.38), transparent 60%),
    radial-gradient(90% 120% at 0% 100%, rgba(20, 184, 166, 0.24), transparent 55%);
  pointer-events: none;
}

.fp-pkg-banner__stats {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px;
  align-items: flex-end;
}

.fp-pkg-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fp-pkg-stat__n {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-5xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: #ddd6fe;
}

.fp-pkg-stat__l {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--text-inverse-muted);
}

.fp-pkg-banner__note {
  position: relative;
  margin: 24px 0 0;
  max-width: 760px;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-inverse);
  text-wrap: pretty;
}

.dc-matrix {
  margin-top: 24px;
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised);
  padding: 4px 32px 24px;
  font-family: var(--font-body);
}

.dc-matrix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: flex-end;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}

.dc-matrix__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.dc-matrix__legend .dc-status {
  width: 26px;
  height: 26px;
  padding: 0;
  justify-content: center;
}

.dc-matrix__group + .dc-matrix__group {
  border-top: 1px solid var(--line-soft);
}

.dc-matrix__grouphead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 0 10px;
}

.dc-matrix__groupchip {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.dc-matrix__grouptitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-display);
}

.dc-matrix__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dc-matrix__row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
}

.dc-matrix__row:first-child {
  border-top: 0;
}

.dc-matrix__feat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dc-matrix__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-display);
}

.dc-matrix__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  color: var(--text-muted);
  text-wrap: pretty;
}

.dc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 28px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dc-status svg {
  flex: none;
}

.dc-status--in {
  background: var(--fp-100);
  color: var(--fp-700);
}

.dc-status--soon {
  background: transparent;
  color: var(--fp-600);
  border: 1.5px dashed var(--fp-300);
}

/* ---------- Pricing strip ---------- */
.fp-pricing {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  margin-top: 32px;
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-raised);
  padding: 48px 56px;
  font-family: var(--font-body);
}

.fp-pricing__band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--fp-brand-start), var(--fp-brand-end), var(--fp-teal));
}

.fp-pricing__amount {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.fp-pricing__value {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-5xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--text-display);
}

.fp-pricing__unit {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  max-width: 340px;
}

.fp-pricing__note {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
  margin: 14px 0 0;
  max-width: 620px;
  text-wrap: pretty;
}

.fp-pricing__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .fp-hero .hero-grid--even {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .fp-hero-screenshot {
    max-width: min(760px, 100%);
    margin-inline: auto;
  }
}

@media (max-width: 980px) {
  .fp-proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fp-pricing {
    grid-template-columns: 1fr;
  }

  .fp-pricing__actions {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .fp-hero-screenshot,
  .fp-hero [data-animate="screenshot"] {
    display: none;
  }

  .fp-pkg-banner {
    padding: 32px 28px;
  }

  .fp-pkg-banner__stats {
    gap: 18px 36px;
  }

  .fp-pkg-stat__n {
    font-size: var(--text-4xl);
  }

  .dc-matrix {
    padding: 4px 20px 18px;
  }

  .dc-matrix__legend {
    justify-content: flex-start;
  }

  .fp-pricing {
    padding: 40px 30px;
  }
}

@media (max-width: 560px) {
  .fp-proof-grid {
    grid-template-columns: 1fr;
  }

  .dc-matrix__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}