/* ============================================================
   HOMEPAGE — home.css
   All classes prefixed `hp-` to avoid conflicts.
   Design system matches store_products.css tokens.
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
.hp-page {
  /* Brand palette */
  --hp-primary:         #991b1b;
  --hp-primary-mid:     #e71d36;
  --hp-primary-light:   #f87171;
  --hp-primary-pale:    #fff1f2;

  /* Blue accent (Free Resources tier) */
  --hp-info:            #1d4ed8;
  --hp-info-mid:        #2563eb;
  --hp-info-light:      #60a5fa;
  --hp-info-pale:       #eff6ff;

  /* Text */
  --hp-text:            #0f172a;
  --hp-text-secondary:  #334155;
  --hp-text-muted:      #64748b;

  /* Surfaces */
  --hp-bg:              #f8fafc;
  --hp-bg-subtle:       #f1f5f9;
  --hp-white:           #ffffff;

  /* Border */
  --hp-border:          #e2e8f0;

  /* Hero dark */
  --hp-dark:            #111418;
  --hp-dark-navy:       #0f172a;

  /* Shadows */
  --hp-shadow-xs:       0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --hp-shadow-sm:       0 2px 8px rgba(15, 23, 42, 0.07), 0 1px 4px rgba(15, 23, 42, 0.05);
  --hp-shadow-md:       0 4px 16px rgba(15, 23, 42, 0.09), 0 2px 8px rgba(15, 23, 42, 0.06);
  --hp-shadow-lg:       0 8px 32px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(15, 23, 42, 0.08);
  --hp-shadow-hover:    0 12px 40px rgba(153, 27, 27, 0.18), 0 4px 16px rgba(153, 27, 27, 0.10);

  /* Gradients */
  --hp-gradient-stripe:      linear-gradient(90deg, #991b1b 0%, #e71d36 60%, #f87171 100%);
  --hp-gradient-stripe-blue: linear-gradient(90deg, #1d4ed8 0%, #2563eb 60%, #60a5fa 100%);
  --hp-gradient-btn:      linear-gradient(135deg, #e71d36 0%, #991b1b 100%);
  --hp-gradient-btn-blue: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --hp-gradient-text:   linear-gradient(135deg, #991b1b 0%, #e71d36 100%);

  --hp-radial-top:    radial-gradient(80% 60% at 15% 20%, rgba(231, 29, 54, 0.16) 0%, rgba(231, 29, 54, 0.06) 40%, transparent 70%);
  --hp-radial-bottom: radial-gradient(80% 60% at 85% 80%, rgba(231, 29, 54, 0.16) 0%, rgba(231, 29, 54, 0.06) 40%, transparent 70%);

  /* Shape */
  --hp-radius-sm:       8px;
  --hp-radius-md:       14px;
  --hp-radius-lg:       20px;
  --hp-radius-xl:       28px;
  --hp-radius-pill:     999px;

  /* Typography */
  --hp-font-primary:    "Montserrat", sans-serif;
  --hp-font-secondary:  "Poppins", sans-serif;

  /* Spacing */
  --hp-space-4:   4px;
  --hp-space-8:   8px;
  --hp-space-12:  12px;
  --hp-space-16:  16px;
  --hp-space-24:  24px;
  --hp-space-32:  32px;
  --hp-space-48:  48px;
  --hp-space-64:  64px;
  --hp-space-96:  96px;

  /* Transition */
  --hp-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  font-family: var(--hp-font-primary);
  color: var(--hp-text);
  background-color: var(--hp-bg-subtle);
}


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.hp-container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--hp-space-24);
}

.hp-container--narrow {
  max-width: 720px;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-space-8);
  font-family: var(--hp-font-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--hp-radius-pill);
  cursor: pointer;
  transition:
    background var(--hp-transition),
    border-color var(--hp-transition),
    color var(--hp-transition),
    box-shadow var(--hp-transition),
    transform var(--hp-transition);
  line-height: 1;
  white-space: nowrap;
  padding: var(--hp-space-12) var(--hp-space-24);
}

.hp-btn--lg {
  padding: var(--hp-space-16) var(--hp-space-32);
  font-size: 1rem;
}

.hp-btn--full {
  width: 100%;
}

/* Primary: gradient blue */
.hp-btn--primary {
  background: var(--hp-gradient-btn);
  color: var(--hp-white);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(231, 29, 54, 0.35);
}

.hp-btn--primary:hover {
  box-shadow: 0 6px 20px rgba(231, 29, 54, 0.45);
  transform: translateY(-1px);
}

.hp-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(231, 29, 54, 0.30);
}

.hp-btn--primary:focus-visible {
  outline: 3px solid rgba(231, 29, 54, 0.4);
  outline-offset: 3px;
}

/* Primary (blue): mirrors .hp-btn--primary exactly, swapping the red
   tokens for the blue ones used elsewhere on the page (e.g.
   .hp-tier-card--free) -- same structure, same shadow/hover/active/focus
   pattern, just blue instead of red. */
.hp-btn--primary-blue {
  background: var(--hp-gradient-btn-blue);
  color: var(--hp-white);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.35);
}

.hp-btn--primary-blue:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}

.hp-btn--primary-blue:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30);
}

.hp-btn--primary-blue:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.4);
  outline-offset: 3px;
}

/* Outline (light): secondary CTA on dark backgrounds, e.g. the hero */
.hp-btn--outline-light {
  background: transparent;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.35);
}

.hp-btn--outline-light:hover {
  background: var(--hp-gradient-btn);
  color: var(--hp-white);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(231, 29, 54, 0.45);
  transform: translateY(-1px);
}

.hp-btn--outline-light:active {
  background: var(--hp-gradient-btn);
  color: var(--hp-white);
  border-color: transparent;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(231, 29, 54, 0.30);
}

.hp-btn--outline-light:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

/* Outline: secondary / app store */
.hp-btn--outline {
  background: transparent;
  color: var(--hp-text);
  border-color: var(--hp-border);
}

.hp-btn--outline:hover {
  background: var(--hp-gradient-btn);
  color: var(--hp-white);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(231, 29, 54, 0.45);
  transform: translateY(-1px);
}

.hp-btn--outline:active {
  background: var(--hp-gradient-btn);
  color: var(--hp-white);
  border-color: transparent;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(231, 29, 54, 0.30);
}

.hp-btn--outline:focus-visible {
  outline: 3px solid rgba(231, 29, 54, 0.4);
  outline-offset: 3px;
}


/* ============================================================
   SHARED CARD STRIPE (top gradient bar)
   ============================================================ */
.hp-tier-card__stripe {
  height: 4px;
  background: var(--hp-gradient-stripe);
  border-radius: var(--hp-radius-lg) var(--hp-radius-lg) 0 0;
  flex-shrink: 0;
}


/* ============================================================
   SHARED ICON CELL
   ============================================================ */
.hp-icon-cell {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.10), rgba(231, 29, 54, 0.05));
  border: 1px solid rgba(231, 29, 54, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hp-icon-cell i {
  font-size: 1.375rem;
  color: var(--hp-primary-mid);
}


/* ============================================================
   SHARED IMAGE PLACEHOLDER
   Dashed-border "screenshot coming soon" treatment. Used by the Hero,
   Command Center, and Mobile App sections. Each section's own class
   still carries what differs between them (aspect-ratio, padding,
   background, border-color) — this shared base only carries what is
   identical everywhere.
   ============================================================ */
.hp-image-placeholder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hp-space-16);
  text-align: center;
  border-width: 2px;
  border-style: dashed;
  border-radius: var(--hp-radius-xl);
}

/* Default icon/caption treatment matches the light-background sections
   (Command Center, Mobile App); the Hero overrides both for its dark
   background. */
.hp-image-placeholder-icon {
  font-size: 2.75rem;
  color: var(--hp-primary-light);
}

.hp-image-placeholder-caption {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hp-text-muted);
  margin: 0;
}


/* ============================================================
   SHARED "COMING SOON" BADGE
   Used by the Command Center's Planner Timeline feature and the
   Mobile App's Google Play badge.
   ============================================================ */
.hp-badge-soon {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hp-text-muted);
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-pill);
  padding: 3px 10px;
}


/* ============================================================
   SECTION 1: HERO
   ============================================================ */
.hp-hero {
  position: relative;
  background: linear-gradient(180deg, var(--hp-dark-navy) 0%, #0b0f19 100%);
  padding-block: var(--hp-space-96) var(--hp-space-64);
  overflow: hidden;
}

/* Radial gradient light sources (reuses the page-level radial tokens) */
.hp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hp-radial-top), var(--hp-radial-bottom);
  pointer-events: none;
  z-index: 0;
}

/* Dot pattern overlay */
.hp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Plain flex row: text takes its fixed max-width, media flexes to fill
   whatever's left within .hp-container's own 1160px cap. Replaces an
   earlier version that broke .hp-hero__media out to the full 100vw
   viewport width via absolute positioning -- that meant the image kept
   sliding further right as the viewport grew past any normal desktop
   width, drifting away from the text on ultra-wide screens instead of
   holding a consistent position relative to it. Tying both columns to
   the same container fixes that: past ~1160px the container itself
   stops growing, so the image's position relative to the text is
   locked in exactly like it is at a standard desktop width, no matter
   how wide the actual browser window is. */
.hp-hero__grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--hp-space-64);
  /* Wider than the shared .hp-container's 1160px cap (also applied to
     this element) specifically so there's room for the text column
     (560px) plus the image at its full preferred size (680px) plus the
     gap without either one getting squeezed. Same-specificity rules
     cascade by source order, so this simply wins over .hp-container's
     max-width for this element -- doesn't affect max-width anywhere
     else .hp-container is used. */
  max-width: 1400px;
}

/* Text column. Fixed max-width so wrap points stay predictable; no
   longer needs a readability scrim -- .hp-hero__media (below) is sized
   to its own content now instead of stretching full-bleed across the
   text's height, so image and text no longer share horizontal space at
   any desktop width and there's nothing for the text to contend with. */
.hp-hero__content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  flex-shrink: 0;
}

.hp-hero__headline {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #f8fafc;
  margin-bottom: var(--hp-space-24);
}

.hp-hero__subheadline {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: rgba(248, 250, 252, 0.72);
  line-height: 1.7;
  margin-bottom: var(--hp-space-32);
  max-width: 560px;
}

/* justify-content:center centers within this element's own box, but on
   desktop/wide screens .hp-hero__cta-group below isn't centered in that
   same box -- it's a left-aligned button row that doesn't span the full
   560px column, so its visual center sits left of the column's true
   center. padding-right (with no matching padding-left) shifts the
   centered content left by half that value without needing a separate
   non-centered layout -- reset to 0 on the tablet/mobile breakpoint
   below, where the buttons ARE centered and this offset would misalign
   things again. */
.hp-hero__cta-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-space-8);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hp-primary-light);
  margin-bottom: var(--hp-space-32);
  padding-right: 64px;
}

.hp-hero__cta-prompt i {
  font-size: 1.25rem;
}

.hp-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hp-space-16);
  margin-bottom: var(--hp-space-32);
}

.hp-hero__audience {
  font-size: 0.875rem;
  color: rgba(248, 250, 252, 0.55);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: var(--hp-space-32);
  padding-top: var(--hp-space-24);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Trust-badge strip */
.hp-trust-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-space-12);
  padding: 0;
  margin: 0;
}

.hp-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-space-8);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--hp-radius-pill);
  padding: var(--hp-space-8) var(--hp-space-16);
}

.hp-trust-badge i {
  font-size: 0.9375rem;
  color: var(--hp-primary-light);
}

/* Hero media — a normal flex item now, not an absolutely-positioned
   full-viewport overlay. flex:1 lets it take whatever space is left in
   the row after .hp-hero__content's fixed 560px (see .hp-hero__grid's
   gap above); its own justify-content centers the image within that
   space so there's breathing room on both sides rather than the image
   crowding one edge. Because this space is bounded by .hp-container's
   1160px cap (the same container the text lives in), the image can
   never drift further from the text than it does at a standard desktop
   width, however wide the actual browser gets. */
.hp-hero__media {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* qss_collaborate_desk_shot_2.png (1261x1083, ~1.16:1) — a tight
   two-person crop. width:100%/height:auto preserves this natural aspect
   ratio rather than cropping to fill an unrelated container shape,
   which is what lets both people's faces render without needing any
   masking. max-width caps it at a sensible size once .hp-hero__media
   has more room than the photo needs (e.g. very wide desktop windows
   where .hp-container itself is still capped at 1160px) rather than
   letting it stretch arbitrarily large. No mask-image here: since the
   image no longer overlaps the text at any point, there's nothing for a
   fade to protect — border-radius/box-shadow give it a clean card edge
   instead, consistent with the other real photos on this page (e.g.
   .hp-command-center__image). */
.hp-hero__image {
  width: 100%;
  max-width: 680px;
  height: auto;
  display: block;
  border-radius: var(--hp-radius-xl);
  box-shadow: var(--hp-shadow-lg);
}

/* Unique to the hero's dark background — overrides the light-mode
   defaults on the shared .hp-image-placeholder base. Dead now that the
   real composite above has replaced the placeholder (left in place,
   matching the Command Center section's precedent of not deleting this
   CSS after its placeholder was swapped for a real image). */
.hp-hero__image-placeholder {
  aspect-ratio: 4 / 3;
  padding: var(--hp-space-32);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}

.hp-hero__image-placeholder-icon {
  font-size: 2.5rem;
  color: rgba(248, 250, 252, 0.4);
}

.hp-hero__image-placeholder-caption {
  color: rgba(248, 250, 252, 0.55);
  max-width: 260px;
}

/* Stat-counter widget */
.hp-hero__stats {
  position: relative;
  z-index: 1;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hp-space-48);
  padding: 0;
  margin: var(--hp-space-64) 0 0;
  padding-top: var(--hp-space-48);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hp-stat {
  text-align: center;
  min-width: 140px;
}

.hp-stat__value {
  display: block;
  font-family: var(--hp-font-secondary);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #f8fafc;
  line-height: 1;
  margin-bottom: var(--hp-space-8);
  font-variant-numeric: tabular-nums;
}

.hp-stat__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(248, 250, 252, 0.6);
  letter-spacing: 0.01em;
}


/* ============================================================
   SECTION 1.5: FACILITY HUB TEASER
   ============================================================ */
.hp-facility-hub {
  padding-block: var(--hp-space-96);
  background-color: var(--hp-white);
  text-align: center;
}

/* Scaled up + recolored from the shared 50px inline .hp-icon-cell (used
   elsewhere for small list bullets, e.g. .hp-answer-card/.hp-command-center)
   — this is the lone visual anchor for a whole section, sitting right below
   the dark Hero, so it needs real presence: bigger, solid brand-gradient
   fill instead of the pale tint, and a soft pale "halo" ring instead of a
   thin border. Same section-scoped override pattern as
   .hp-answer-card .hp-icon-cell. */
.hp-facility-hub .hp-icon-cell {
  width: 88px;
  height: 88px;
  margin-inline: auto;
  margin-bottom: var(--hp-space-24);
  border: none;
  border-radius: var(--hp-radius-xl);
  background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-mid) 100%);
  box-shadow: var(--hp-shadow-lg), 0 0 0 8px var(--hp-primary-pale);
}

.hp-facility-hub .hp-icon-cell i {
  font-size: 2.25rem;
  color: #fff;
}

.hp-facility-hub__heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--hp-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--hp-space-16);
}

.hp-facility-hub__text {
  font-size: 1.0625rem;
  color: var(--hp-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--hp-space-32);
}


/* ============================================================
   SECTION 2: MISSION (why QSS exists)
   ============================================================ */
.hp-mission {
  padding-block: var(--hp-space-96);
  background-color: var(--hp-bg);
  text-align: center;
}

.hp-mission__heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--hp-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--hp-space-32);
}

.hp-mission__text {
  font-size: 1.0625rem;
  color: var(--hp-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--hp-space-16);
}

.hp-mission__text:last-child {
  margin-bottom: 0;
}


/* ============================================================
   SECTION 3: FIND ANSWERS (six-card grid)
   ============================================================ */
.hp-answers {
  padding-block: var(--hp-space-96);
  background-color: var(--hp-bg-subtle);
  text-align: center;
}

.hp-answers__heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--hp-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 760px;
  margin: 0 auto var(--hp-space-48);
}

.hp-answers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hp-space-24);
}

.hp-answer-card {
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--hp-shadow-sm);
  transition:
    box-shadow var(--hp-transition),
    transform var(--hp-transition);
}

.hp-answer-card:hover {
  box-shadow: var(--hp-shadow-hover);
  transform: translateY(-4px);
}

.hp-answer-card .hp-icon-cell {
  margin-bottom: var(--hp-space-16);
}

.hp-answer-card__question {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--hp-text);
  line-height: 1.3;
  margin-bottom: var(--hp-space-8);
}

.hp-answer-card__text {
  font-size: 0.9375rem;
  color: var(--hp-text-muted);
  line-height: 1.6;
  margin: 0;
}


/* ============================================================
   SECTION 4: FREE RESOURCES VS QSS PRO
   ============================================================ */
.hp-tiers {
  padding-block: var(--hp-space-96);
  background-color: var(--hp-white);
}

.hp-tiers__intro {
  max-width: 680px;
  margin: 0 auto var(--hp-space-64);
  text-align: center;
}

.hp-tiers__heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--hp-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--hp-space-24);
}

.hp-tiers__text {
  font-size: 1.0625rem;
  color: var(--hp-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--hp-space-12);
}

.hp-tiers__text:last-child {
  margin-bottom: 0;
}

.hp-tiers__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hp-space-32);
  align-items: stretch;
  max-width: 920px;
  margin-inline: auto;
}

.hp-tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg);
  overflow: hidden;
  box-shadow: var(--hp-shadow-sm);
  transition:
    box-shadow var(--hp-transition),
    transform var(--hp-transition);
}

.hp-tier-card:hover {
  box-shadow: var(--hp-shadow-hover);
  transform: translateY(-4px);
}

.hp-tier-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--hp-space-32);
}

.hp-tier-card__name {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--hp-text);
  line-height: 1.3;
  margin-bottom: var(--hp-space-8);
}

.hp-tier-card__subhead {
  font-size: 0.9375rem;
  color: var(--hp-text-muted);
  line-height: 1.5;
  margin-bottom: var(--hp-space-24);
}

.hp-tier-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--hp-space-32);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.hp-tier-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--hp-text-secondary);
  line-height: 1.5;
}

.hp-tier-card__feature i {
  flex-shrink: 0;
  font-size: 1.0625rem;
  color: var(--hp-text-muted);
  line-height: 1.5;
}

/* Pro tier: visually elevated to read as the upgraded option */
.hp-tier-card--pro {
  border-color: rgba(231, 29, 54, 0.25);
  box-shadow:
    0 0 0 1px rgba(231, 29, 54, 0.08),
    0 8px 24px rgba(231, 29, 54, 0.10),
    0 32px 64px rgba(15, 23, 42, 0.08);
}

.hp-tier-card--pro:hover {
  box-shadow:
    0 0 0 1px rgba(231, 29, 54, 0.14),
    0 12px 32px rgba(231, 29, 54, 0.16),
    0 40px 72px rgba(15, 23, 42, 0.10);
}

.hp-tier-card--pro .hp-tier-card__body {
  background: linear-gradient(180deg, var(--hp-primary-pale) 0%, var(--hp-white) 200px);
}

.hp-tier-card--pro .hp-tier-card__feature i {
  color: var(--hp-primary);
}

/* Free tier: visually elevated with a blue palette mirroring Pro's red */
.hp-tier-card--free {
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.08),
    0 8px 24px rgba(37, 99, 235, 0.10),
    0 32px 64px rgba(15, 23, 42, 0.08);
}

.hp-tier-card--free:hover {
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.14),
    0 12px 32px rgba(37, 99, 235, 0.16),
    0 40px 72px rgba(15, 23, 42, 0.10);
}

.hp-tier-card--free .hp-tier-card__stripe {
  background: var(--hp-gradient-stripe-blue);
}

.hp-tier-card--free .hp-tier-card__body {
  background: linear-gradient(180deg, var(--hp-info-pale) 0%, var(--hp-white) 200px);
}

.hp-tier-card--free .hp-tier-card__feature i {
  color: var(--hp-info);
}


/* ============================================================
   SECTION 5: COMMAND CENTER SHOWCASE
   ============================================================ */
.hp-command-center {
  padding-block: var(--hp-space-96);
  background-color: var(--hp-bg);
}

.hp-command-center__intro {
  max-width: 680px;
  margin: 0 auto var(--hp-space-64);
  text-align: center;
}

.hp-command-center__heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--hp-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--hp-space-24);
}

.hp-command-center__text {
  font-size: 1.0625rem;
  color: var(--hp-text-secondary);
  line-height: 1.75;
  margin: 0;
}

.hp-command-center__showcase {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: var(--hp-space-48);
}

/* Screenshot placeholder — see the shared .hp-image-placeholder rules above.
   Sized larger than the hero's composite image since this is the section's
   visual centerpiece. */
.hp-command-center__media {
  position: relative;
}

/* Applies once the real screenshot replaces the placeholder (see TODO in the view) */
.hp-command-center__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--hp-radius-xl);
  box-shadow: var(--hp-shadow-lg);
}

/* Unique to Command Center — the icon and caption match the shared
   .hp-image-placeholder defaults exactly, so no overrides needed there. */
.hp-command-center__image-placeholder {
  aspect-ratio: 16 / 10;
  padding: var(--hp-space-32);
  border-color: rgba(153, 27, 27, 0.22);
  background: var(--hp-white);
  box-shadow: var(--hp-shadow-sm);
}

.hp-command-center__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--hp-space-16);
  padding: 0;
  margin: 0;
}

.hp-command-center__feature {
  display: flex;
  align-items: center;
  gap: var(--hp-space-16);
  padding: var(--hp-space-12);
  border-radius: var(--hp-radius-md);
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
}

.hp-command-center__feature-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hp-text);
  line-height: 1.4;
}

/* Planner timeline: not yet available, so it is styled deliberately muted
   and distinct from the six current features rather than blending in. */
.hp-command-center__feature--soon {
  background: var(--hp-bg-subtle);
  border-style: dashed;
}

.hp-command-center__feature--soon .hp-icon-cell {
  background: rgba(100, 116, 139, 0.08);
  border-color: var(--hp-border);
}

.hp-command-center__feature--soon .hp-icon-cell i {
  color: var(--hp-text-muted);
}

.hp-command-center__feature--soon .hp-command-center__feature-label {
  color: var(--hp-text-secondary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hp-space-8);
}

/* ============================================================
   SECTION 6: PRACTICAL RESOURCES (ten-category grid)
   ============================================================ */
.hp-resources {
  padding-block: var(--hp-space-96);
  background-color: var(--hp-bg-subtle);
  text-align: center;
}

.hp-resources__heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--hp-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 760px;
  margin: 0 auto var(--hp-space-48);
}

.hp-resources__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--hp-space-24);
  padding: 0;
  margin: 0 0 var(--hp-space-48);
}

.hp-resource-card {
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-space-12);
  text-align: center;
  box-shadow: var(--hp-shadow-sm);
  transition:
    box-shadow var(--hp-transition),
    transform var(--hp-transition);
}

.hp-resource-card:hover {
  box-shadow: var(--hp-shadow-hover);
  transform: translateY(-4px);
}

.hp-resource-card__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--hp-text);
  line-height: 1.3;
}

.hp-resources__footer {
  font-size: 0.9375rem;
  color: var(--hp-text-muted);
  max-width: 560px;
  margin: 0 auto;
}


/* ============================================================
   SECTION 7: MOBILE APP SHOWCASE
   ============================================================ */
.hp-mobile-app {
  padding-block: var(--hp-space-96);
  background-color: var(--hp-white);
  border-top: 1px solid var(--hp-border);
}

.hp-mobile-app__showcase {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: var(--hp-space-64);
}

.hp-mobile-app__heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--hp-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--hp-space-24);
}

.hp-mobile-app__text {
  font-size: 1.0625rem;
  color: var(--hp-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--hp-space-32);
  max-width: 480px;
}

/* ---- Badges + QR row ---- */
.hp-mobile-app__downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hp-space-32);
}

.hp-mobile-app__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--hp-space-16);
}

.hp-mobile-app__badge-link {
  display: inline-flex;
  border-radius: var(--hp-radius-sm);
  transition: transform var(--hp-transition), box-shadow var(--hp-transition);
}

.hp-mobile-app__badge-link:hover {
  transform: translateY(-2px);
}

.hp-mobile-app__badge-link:focus-visible {
  outline: 2px solid var(--hp-primary-mid);
  outline-offset: 3px;
  border-radius: var(--hp-radius-sm);
}

.hp-mobile-app__badge-img {
  height: 44px;
  width: auto;
  display: block;
}

/* Google Play: not yet live. Muted + labeled rather than a functioning
   link, matching the Command Center's Planner Timeline "Coming Soon" pattern. */
.hp-mobile-app__badge-link--disabled {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hp-space-8);
  opacity: 0.5;
  cursor: default;
}

.hp-mobile-app__badge-link--disabled:hover {
  transform: none;
}

/* ---- QR code ---- */
.hp-mobile-app__qr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-space-8);
  text-decoration: none;
  border-radius: var(--hp-radius-md);
  transition: transform var(--hp-transition);
}

.hp-mobile-app__qr:hover {
  transform: translateY(-2px);
}

.hp-mobile-app__qr:focus-visible {
  outline: 2px solid var(--hp-primary-mid);
  outline-offset: 3px;
  border-radius: var(--hp-radius-md);
}

.hp-mobile-app__qr-code {
  width: 130px;
  height: 130px;
  padding: 14px;
  background: var(--hp-white);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
  box-shadow: var(--hp-shadow-xs);
}

.hp-mobile-app__qr-caption {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hp-text-muted);
}

/* ---- Phone screenshot placeholder — see the shared .hp-image-placeholder
   rules above, sized for a single portrait phone screen rather than a
   wide dashboard shot ---- */
.hp-mobile-app__media {
  justify-self: center;
  width: 100%;
  /* qss_iphone.png is a staged photo (phone + mug + backdrop), not a
     tight screenshot -- the actual phone screen only fills about half
     the frame's width, so this needs to be substantially wider than a
     tight-crop image would (previously 300px) for the on-screen text to
     render at a legible size. 460px fits the showcase grid's ~1fr
     column at the container's own 1160px max-width without crowding
     the text column (1.2fr). */
  max-width: 460px;
}

/* height: auto keeps the image's real 1320x2868 aspect ratio, so it never
   gets cropped or letterboxed against the container regardless of the
   placeholder's old 9/18 aspect-ratio below. */
.hp-mobile-app__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--hp-radius-xl);
  box-shadow: var(--hp-shadow-lg);
}

/* Dead now that the real image above has replaced the placeholder (left in
   place, matching the Command Center section's precedent of not deleting
   this CSS after its placeholder was swapped for a real image). */
.hp-mobile-app__image-placeholder {
  aspect-ratio: 9 / 18;
  padding: var(--hp-space-24);
  border-color: rgba(153, 27, 27, 0.22);
  background: var(--hp-bg-subtle);
  box-shadow: var(--hp-shadow-sm);
}


/* ============================================================
   SECTION 8: FINAL CALL TO ACTION
   Reuses the Hero's dark gradient + radial-glow treatment so the
   page opens and closes on the same bold, premium note.
   ============================================================ */
.hp-final-cta {
  position: relative;
  background: linear-gradient(180deg, var(--hp-dark-navy) 0%, #0b0f19 100%);
  padding-block: var(--hp-space-96);
  overflow: hidden;
  text-align: center;
}

.hp-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hp-radial-top), var(--hp-radial-bottom);
  pointer-events: none;
  z-index: 0;
}

.hp-final-cta__heading {
  position: relative;
  z-index: 1;
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: var(--hp-space-24);
}

.hp-final-cta__text {
  position: relative;
  z-index: 1;
  font-size: 1.0625rem;
  color: rgba(248, 250, 252, 0.72);
  line-height: 1.75;
  margin: 0 auto var(--hp-space-32);
}

.hp-final-cta__cta-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--hp-space-16);
}


/* ============================================================
   STICKY CTA BAR (homepage-only widget)
   Fixed to the bottom of the viewport. Hidden by default; the
   sticky-cta Stimulus controller toggles --visible once the
   Hero scrolls out of view (and hides it again at the Final
   CTA section / footer). See hero's dark-section comment
   pattern for why this lives inside .hp-page: token scope.
   ============================================================ */
.hp-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--hp-white);
  border-top: 1px solid var(--hp-border);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  opacity: 0;
  /* visibility (not just opacity) keeps the bar's links/button out of the
     tab order while hidden — opacity/transform alone leave them focusable
     off-screen. The delay lets the hide transition finish first. */
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.3s;
}

.hp-sticky-cta--visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

.hp-sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: var(--hp-space-16);
  padding-block: var(--hp-space-12);
}

.hp-sticky-cta__message {
  flex: 1 1 auto;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hp-text);
  margin: 0;
}

.hp-sticky-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--hp-space-12);
  flex-shrink: 0;
}

.hp-sticky-cta__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--hp-text-muted);
  border-radius: var(--hp-radius-sm);
  cursor: pointer;
  transition: background var(--hp-transition), color var(--hp-transition);
}

.hp-sticky-cta__dismiss:hover {
  background: var(--hp-bg-subtle);
  color: var(--hp-text);
}

.hp-sticky-cta__dismiss:focus-visible {
  outline: 2px solid var(--hp-primary-mid);
  outline-offset: 2px;
}

.hp-sticky-cta__dismiss i {
  font-size: 1.125rem;
}


/* ============================================================
   RESPONSIVE — TABLET (768px to 1199px)
   ============================================================ */
@media screen and (max-width: 1199px) {

  /* Hero */
  .hp-hero {
    padding-block: calc(var(--hp-space-64) + 16px) var(--hp-space-64);
  }

  /* Below 1200px, .hp-hero__grid switches from a row to a column --
     align-items:center applies to whichever axis is currently the cross
     axis, so this alone re-centers both children horizontally with no
     extra rules needed, and the row's existing gap becomes the vertical
     spacing between the stacked content and media. */
  .hp-hero__grid {
    flex-direction: column;
  }

  .hp-hero__content {
    text-align: center;
    max-width: 100%;
    flex-shrink: 1;
  }

  .hp-hero__subheadline,
  .hp-hero__audience {
    margin-inline: auto;
  }

  .hp-hero__cta-prompt {
    padding-right: 0;
  }

  .hp-hero__cta-group {
    justify-content: center;
  }

  .hp-trust-strip {
    justify-content: center;
  }

  /* Cap media's own width so the photo doesn't stretch edge-to-edge on
     a tablet-width screen -- .hp-hero__grid's align-items:center (now
     centering horizontally, per the comment above) handles positioning. */
  .hp-hero__media {
    width: 100%;
    max-width: 480px;
  }

  /* Answers: stack to two columns */
  .hp-answers__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hp-space-16);
  }

  /* Tiers: tighten gap at tablet */
  .hp-tiers__grid {
    gap: var(--hp-space-24);
  }

  /* Command Center: stack media above features */
  .hp-command-center__showcase {
    grid-template-columns: 1fr;
    gap: var(--hp-space-32);
  }

  .hp-command-center__media {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }

  .hp-command-center__features {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }

  /* Resources: five columns to two at tablet */
  .hp-resources__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hp-space-16);
  }

  /* Mobile app: stack media above content, centered */
  .hp-mobile-app__showcase {
    grid-template-columns: 1fr;
    gap: var(--hp-space-32);
    text-align: center;
  }

  .hp-mobile-app__media {
    order: -1;
    max-width: 220px;
  }

  .hp-mobile-app__text {
    margin-inline: auto;
  }

  .hp-mobile-app__downloads {
    justify-content: center;
  }

}


/* ============================================================
   RESPONSIVE — MOBILE (below 768px)
   ============================================================ */
@media screen and (max-width: 767px) {

  /* Hero */
  .hp-hero {
    padding-block: var(--hp-space-64) var(--hp-space-48);
  }

  .hp-hero__headline {
    font-size: clamp(2rem, 8vw, 2.4rem);
  }

  .hp-hero__cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hp-hero__cta-group .hp-btn {
    width: 100%;
  }

  .hp-hero__media {
    max-width: 340px;
  }

  .hp-hero__stats {
    gap: var(--hp-space-32);
    margin-top: var(--hp-space-48);
    padding-top: var(--hp-space-32);
  }

  .hp-stat {
    min-width: 100px;
  }

  /* Mission */
  .hp-mission {
    padding-block: var(--hp-space-64);
  }

  .hp-mission__text {
    font-size: 1rem;
  }

  /* Answers */
  .hp-answers {
    padding-block: var(--hp-space-64);
  }

  .hp-answers__heading {
    margin-bottom: var(--hp-space-32);
  }

  .hp-answers__grid {
    grid-template-columns: 1fr;
    gap: var(--hp-space-12);
  }

  .hp-answer-card {
    padding: var(--hp-space-24);
  }

  /* Tiers */
  .hp-tiers {
    padding-block: var(--hp-space-64);
  }

  .hp-tiers__intro {
    margin-bottom: var(--hp-space-48);
  }

  .hp-tiers__grid {
    grid-template-columns: 1fr;
    gap: var(--hp-space-24);
  }

  .hp-tier-card__body {
    padding: var(--hp-space-24);
  }

  /* Command Center */
  .hp-command-center {
    padding-block: var(--hp-space-64);
  }

  .hp-command-center__intro {
    margin-bottom: var(--hp-space-32);
  }

  .hp-command-center__feature {
    padding: var(--hp-space-12) var(--hp-space-16);
  }

  /* Resources */
  .hp-resources {
    padding-block: var(--hp-space-64);
  }

  .hp-resources__heading {
    margin-bottom: var(--hp-space-32);
  }

  .hp-resource-card {
    padding: var(--hp-space-16);
  }

  /* Mobile app */
  .hp-mobile-app {
    padding-block: var(--hp-space-48);
  }

  .hp-mobile-app__downloads {
    flex-direction: column;
    align-items: center;
    gap: var(--hp-space-24);
  }

  .hp-mobile-app__badges {
    justify-content: center;
  }

  /* Final CTA */
  .hp-final-cta {
    padding-block: var(--hp-space-64) var(--hp-space-48);
  }

  .hp-final-cta__cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hp-final-cta__cta-group .hp-btn {
    width: 100%;
  }

  /* Sticky CTA bar: drop the message copy to give the two buttons
     room, expand each button to share the remaining width evenly. */
  .hp-sticky-cta__message {
    display: none;
  }

  .hp-sticky-cta__actions {
    flex: 1 1 auto;
    justify-content: stretch;
  }

  .hp-sticky-cta__actions .hp-btn {
    flex: 1 1 0;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  .hp-btn,
  .hp-answer-card,
  .hp-tier-card,
  .hp-mobile-app__badge-link,
  .hp-mobile-app__qr,
  .hp-sticky-cta {
    transition: none;
  }

  .hp-answer-card:hover,
  .hp-tier-card:hover,
  .hp-mobile-app__badge-link:hover,
  .hp-mobile-app__qr:hover {
    transform: none;
  }

  .hp-btn--primary:hover,
  .hp-btn--outline-light:hover,
  .hp-btn--outline:hover {
    transform: none;
  }

}