/*
  NotifyGates landing page — "The Rewards Path" (Starbucks design system, MudBlazor edition).
  Loaded only by Pages/_LayoutLanding.cshtml (the marketing landing page).
  Color/typography tokens for the rest of the app live in Theme/NotifygatesTheme.cs (the shared
  MudTheme), so MudBlazor's own components already render in the Starbucks palette without CSS
  overrides — the universal pill-button + scale(0.95) press lives in notifygates-app.css. This file
  covers what's genuinely specific to this page's own editorial treatment: the Lora serif accent
  (used only for headline moments, per the reference's own "context-specific typeface swap" rule),
  the scroll-snap services row, the combined dark pull-quote band, the two-column feature checklist,
  and the connected "Rewards path" pricing panels with gold progress markers.
  Palette reference: references/starbucks/DESIGN.md.
*/

body.landing-body {
  --sb-green: #006241;
  --sb-green-accent: #00754a;
  --sb-house-green: #1e3932;
  --sb-uplift: #2b5148;
  --sb-green-light: #d4e9e2;
  --sb-gold: #cba258;
  --sb-cream: #f2f0eb;
  --sb-ceramic: #edebe9;
  --sb-white: #ffffff;
  --sb-ink: rgba(18, 22, 20, 0.92);
  --sb-ink-soft: rgba(18, 22, 20, 0.6);
  --sb-line: rgba(18, 22, 20, 0.12);
  --sb-text-white: #ffffff;
  --sb-text-white-soft: rgba(255, 255, 255, 0.72);
  --sb-white-line: rgba(255, 255, 255, 0.16);
  --sb-font: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sb-serif: "Lora", Georgia, "Iowan Old Style", serif;

  background: var(--sb-cream) !important;
  font-family: var(--sb-font);
  color: var(--sb-ink);
}

body.landing-body .sb-serif {
  font-family: var(--sb-serif);
  font-weight: 600;
}

/* ---------- Nav ---------- */

body.landing-body .ng-landing-appbar {
  color: var(--sb-house-green) !important;
  border-bottom: 1px solid var(--sb-line);
  background-color: rgba(242, 240, 235, 0.92) !important;
  backdrop-filter: saturate(1.2) blur(6px);
}

body.landing-body .sb-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.landing-body .sb-logo-lockup img {
  width: 34px;
  height: 34px;
  display: block;
}

/* ---------- SweetAlert2 (contact-form loading spinner + success/error toast) ---------- */
/* Found missing entirely during a verification pass — the app shell's own swal2 overrides live in
   notifygates-app.css, which this page never loads (it has its own theme file), so the contact
   form's toast/spinner were still rendering with SweetAlert2's untouched defaults. */

body.landing-body .swal2-popup {
  border-radius: 12px !important;
  font-family: var(--sb-font) !important;
}

body.landing-body .swal2-title,
body.landing-body .swal2-html-container {
  font-family: var(--sb-font) !important;
  color: var(--sb-ink) !important;
}

body.landing-body .swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--sb-green-accent) !important;
}

body.landing-body .swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--sb-green-accent) !important;
}

body.landing-body .swal2-icon.swal2-error {
  border-color: #c82014 !important;
  color: #c82014 !important;
}

body.landing-body .swal2-timer-progress-bar {
  background: var(--sb-green-accent) !important;
}

body.landing-body .sb-logo-lockup .sb-wordmark {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.16px;
  color: var(--sb-ink);
  white-space: nowrap;
}

body.landing-body .sb-logo-lockup .sb-wordmark span {
  color: var(--sb-green-accent);
}

body.landing-body .ng-landing-nav-links {
  align-items: center;
  gap: 4px;
  margin-right: 20px;
}

body.landing-body .ng-landing-nav-link {
  font-weight: 600;
  font-size: 14px;
  color: var(--sb-house-green);
  text-decoration: none;
  border-radius: 50px;
  padding: 8px 14px;
  transition: color 0.2s ease, background 0.2s ease;
}

body.landing-body .ng-landing-nav-link:hover {
  color: var(--sb-green-accent);
  background: var(--sb-green-light);
}

body.landing-body .ng-landing-header-actions {
  align-items: center;
  gap: 10px;
}

body.landing-body .ng-landing-drawer-nav .mud-nav-link {
  font-weight: 600;
}

body.landing-body .ng-landing-drawer-actions {
  padding: 0 16px;
}

body.landing-body .ng-landing-btn-pill {
  padding-left: 24px;
  padding-right: 24px;
}

body.landing-body .sb-btn-outline-dark {
  color: var(--sb-white) !important;
  border-color: var(--sb-white-line) !important;
}

body.landing-body .sb-btn-outline-dark:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Hero (light cream — the color-block band comes right after, in the stat strip) ---------- */

body.landing-body .sb-hero {
  padding: 88px 0 60px;
}

body.landing-body .sb-hero-heading {
  font-family: var(--sb-serif);
  font-weight: 600;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.08;
  color: var(--sb-house-green);
}

body.landing-body .sb-hero-heading em {
  font-style: italic;
  color: var(--sb-green-accent);
}

/* Blazor's built-in <FocusOnNavigate Selector="h1"> (App.razor) programmatically focuses the
   page's first <h1> after every navigation, for screen-reader/keyboard users — this heading is
   the only real <h1> in the app, so it's the only place the browser's default focus outline is
   ever visible, reading as an unwanted "selection" box around the hero text. Screen readers still
   get the focus move regardless of visible styling, so it's safe to just hide the outline here. */
body.landing-body .sb-hero-heading:focus {
  outline: none;
}

body.landing-body .sb-hero-sub {
  color: var(--sb-ink-soft) !important;
  font-size: 17.5px;
  line-height: 1.65;
  max-width: 46ch;
}

body.landing-body .sb-hero-graphic {
  width: 100%;
  aspect-ratio: 1 / 0.95;
}

/* ---------- Stat band ---------- */

body.landing-body .sb-stat-band {
  background: var(--sb-house-green);
  color: var(--sb-text-white);
  padding: 34px 0;
}

body.landing-body .sb-stat-item {
  border-right: 1px solid var(--sb-white-line);
  padding-right: 28px;
}

body.landing-body .sb-stat-item:last-child {
  border-right: none;
}

@media (max-width: 900px) {
  body.landing-body .sb-stat-item {
    border-right: none;
    border-bottom: 1px solid var(--sb-white-line);
    padding-bottom: 16px;
    padding-right: 0;
  }
  body.landing-body .sb-stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

body.landing-body .sb-stat-label {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sb-green-light);
  margin-bottom: 6px;
}

body.landing-body .sb-stat-value {
  font-family: var(--sb-serif);
  font-weight: 600;
  font-size: 20px;
}

/* ---------- Section rhythm ---------- */

body.landing-body .section {
  padding: 88px 0;
}

body.landing-body .section.section-bg {
  background: var(--sb-ceramic);
}

body.landing-body .sb-section-head {
  max-width: 640px;
  margin-bottom: 44px;
}

body.landing-body .sb-eyebrow {
  color: var(--sb-green) !important;
  font-weight: 700;
  letter-spacing: 0.14em;
}

body.landing-body .sb-section-head h2 {
  font-family: var(--sb-serif);
  font-weight: 600;
  color: var(--sb-house-green);
}

body.landing-body .sb-muted {
  color: var(--sb-ink-soft) !important;
}

/* ---------- Services: static grid (4-up desktop, 2-up tablet, 1-up mobile) ---------- */

body.landing-body .sb-service-card {
  height: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.landing-body .sb-service-card:hover {
  transform: translateY(-3px);
}

/* ---------- Pull-quote band (combined feature narrative) ---------- */

body.landing-body .sb-pull-band {
  background: var(--sb-house-green);
  color: var(--sb-text-white);
}

body.landing-body .sb-pull-band .sb-eyebrow {
  color: var(--sb-green-light) !important;
}

body.landing-body .sb-pull-band h2 {
  color: var(--sb-text-white);
}

body.landing-body .sb-pull-band p {
  color: var(--sb-text-white-soft) !important;
}

body.landing-body .sb-pull-quote {
  font-family: var(--sb-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--sb-text-white);
  border-left: 2px solid var(--sb-gold);
  padding-left: 24px;
}

body.landing-body .sb-pull-quote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--sb-font);
  font-style: normal;
  font-size: 13px;
  color: var(--sb-green-light);
  letter-spacing: 0.04em;
}

/* ---------- Two-column feature checklist ---------- */

body.landing-body .sb-check-item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--sb-line);
}

body.landing-body .sb-check-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sb-green-light);
  color: var(--sb-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 14px;
  font-weight: 800;
}

body.landing-body .sb-check-item h4 {
  font-size: 15.5px;
  margin: 0 0 4px;
  color: var(--sb-house-green);
}

/* ---------- Pricing: Rewards path ---------- */

body.landing-body .sb-path-wrap {
  position: relative;
}

body.landing-body .sb-path-line {
  position: absolute;
  top: 64px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--sb-gold) 0 10px, transparent 10px 18px);
  z-index: 0;
}

@media (max-width: 900px) {
  body.landing-body .sb-path-line {
    display: none;
  }
}

body.landing-body .sb-path-card {
  background: var(--sb-house-green);
  color: var(--sb-text-white);
  position: relative;
  /* No overflow:hidden here — the gold marker badge is deliberately positioned to straddle the
     card's top edge (position:relative; top:-26px, half its own height), and hiding overflow
     would clip that top half off. The CTA button's own bottom radius (.sb-path-cta) already
     matches the card's corners, so nothing actually needs this card to clip its children.
     (The marker's 26px overhang needs the *grid's own* row gap to clear it when cards stack
     on mobile/tablet — see MudGrid's Spacing in Landing.razor's pricing section, not a margin
     here: a margin on this element didn't reliably add real space, since MudGrid computes each
     item's box from its own padding, and this element sits inside that padded item.) */
}

body.landing-body .sb-path-card--featured {
  background: var(--sb-green-accent);
}

/* MudText sets its own explicit text-primary color per Typo variant, which beats plain
   inheritance from .sb-path-card's color — override it here for text sitting on this dark card. */
body.landing-body .sb-path-card .mud-typography {
  color: var(--sb-text-white);
}

body.landing-body .sb-path-marker {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sb-cream);
  border: 3px solid var(--sb-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  top: -26px;
  font-family: var(--sb-serif);
  font-weight: 700;
  color: var(--sb-house-green);
  font-size: 15px;
}

body.landing-body .sb-path-card-body {
  padding: 0 26px 28px;
  margin-top: -14px;
  text-align: center;
}

body.landing-body .sb-path-desc {
  color: var(--sb-text-white-soft) !important;
  min-height: 52px;
}

body.landing-body .sb-path-figure {
  font-family: var(--sb-serif);
  font-weight: 700;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  color: var(--sb-text-white);
}

body.landing-body .sb-path-figure small {
  display: block;
  font-family: var(--sb-font);
  font-weight: 600;
  font-size: 11px;
  color: var(--sb-text-white-soft);
  margin-top: 2px;
}

body.landing-body .sb-path-features {
  border-top: 1px solid var(--sb-white-line);
  border-bottom: 1px solid var(--sb-white-line);
  padding: 16px 0;
  margin: 16px 0;
}

body.landing-body .sb-path-features .mud-typography-body2 {
  color: var(--sb-text-white-soft);
}

body.landing-body .sb-path-check {
  color: var(--sb-gold) !important;
}

body.landing-body .sb-path-cta {
  background-color: var(--sb-white) !important;
  color: var(--sb-green-accent) !important;
  border-radius: 0 0 12px 12px !important;
}

body.landing-body .sb-price-switch {
  display: inline-flex;
  gap: 4px;
  background: var(--sb-white);
  border-radius: 50px;
  padding: 4px;
  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.14), 0 6px 20px rgba(20, 40, 30, 0.1);
  margin-bottom: 44px;
}

body.landing-body .sb-price-tab {
  border: none;
  background: transparent;
  padding: 10px 22px;
  border-radius: 50px;
  font-family: var(--sb-font);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--sb-ink-soft);
}

body.landing-body .sb-price-tab.active {
  background: var(--sb-house-green);
  color: var(--sb-text-white);
}

/* ---------- Contact: split panel ---------- */

body.landing-body .sb-contact-wrap {
  overflow: hidden;
}

body.landing-body .sb-contact-panel-dark {
  background: var(--sb-house-green);
  color: var(--sb-text-white);
  padding: 48px;
}

body.landing-body .sb-contact-panel-dark h3 {
  font-family: var(--sb-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--sb-text-white) !important;
}

body.landing-body .sb-contact-panel-dark p {
  color: var(--sb-text-white-soft) !important;
}

body.landing-body .sb-contact-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--sb-white-line);
  font-size: 14px;
}

body.landing-body .sb-contact-row:first-of-type {
  border-top: none;
}

body.landing-body .sb-contact-row b {
  display: block;
  color: var(--sb-green-light);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

body.landing-body .sb-contact-panel-light {
  padding: 48px;
}

/* ---------- Footer close statement ---------- */

body.landing-body .sb-footer-close {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

body.landing-body .sb-footer-close .sb-serif {
  font-size: clamp(24px, 3.4vw, 38px);
  font-style: italic;
  color: var(--sb-house-green);
}

/* ---------- Rich footer content block (About / Quick links / Contact) ---------- */

body.landing-body .landing-footer {
  background: var(--sb-house-green);
  color: var(--sb-text-white);
  padding-top: 56px;
  padding-bottom: 40px;
}

body.landing-body .landing-footer h6 {
  color: var(--sb-text-white) !important;
}

body.landing-body .landing-footer hr {
  border-color: var(--sb-gold) !important;
  opacity: 1;
}

body.landing-body .landing-footer a {
  color: var(--sb-text-white-soft);
  text-decoration: none;
}

body.landing-body .landing-footer a:hover {
  color: var(--sb-gold) !important;
}

/* ---------- Thin copyright bar (LandingFooter.razor) ---------- */

body.landing-body .ng-landing-copyright {
  text-align: center;
  background: var(--sb-uplift);
  color: var(--sb-text-white-soft);
  padding: 14px 12px;
}

body.landing-body .ng-landing-copyright a {
  color: var(--sb-gold) !important;
}

/* ---------- Frap-style floating scroll-to-top button ---------- */

body.landing-body .scrollToTop {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sb-green-accent);
  color: var(--sb-white);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.24), 0 8px 12px rgba(0, 0, 0, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.landing-body .scrollToTop:active {
  transform: scale(0.95);
}

body.landing-body .scrollToTop i {
  color: var(--sb-white);
}