/* ============================================
   ResidenceSafe — Homepage-only styles
   Extracted from inline <style> and migrated
   to DS --rs-* token system.
   ============================================ */

/* REMOVED: heroFloat + dangerPulse keyframes (Phase 2 Apple-clean) */

/* ============================================
   HERO — Dark Aurora
   ============================================ */
.hero {
  padding-top: 120px;
  padding-bottom: var(--rs-space-20);
  background: var(--rs-midnight-800);
  min-height: 85vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* REMOVED: .hero::before aurora + .hero::after divider line (Phase 1 Apple-clean) */

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rs-space-16);
  align-items: center;
}

.hero-content { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2);
  background: var(--rs-ink-a10);
  color: var(--rs-ink-400);
  font-size: 12px;
  font-weight: var(--rs-weight-bold);
  padding: var(--rs-space-2) 18px;
  border-radius: var(--rs-radius-pill);
  margin-bottom: var(--rs-space-6);
  border: 1px solid var(--rs-ink-a20);
  letter-spacing: var(--rs-tracking-wide);
  
}

.hero h1 {
  font-size: clamp(38px, 5vw, 52px);
  font-weight: var(--rs-weight-semibold);
  color: var(--rs-fg-inverse);
  line-height: 1.12;
  letter-spacing: var(--rs-tracking-snug);
  margin-bottom: var(--rs-space-6);
}
.hero h1 span { color: var(--rs-ink-400); }

.hero-text {
  font-size: clamp(var(--rs-text-md), 2vw, var(--rs-text-lg));
  color: var(--rs-white-65);
  line-height: var(--rs-leading-relaxed);
  margin-bottom: var(--rs-space-8);
}

.hero .btn-secondary {
  background: var(--rs-white-06);
  border-color: var(--rs-white-15);
  color: var(--rs-fg-inverse);
  
}
.hero .btn-secondary:hover {
  background: var(--rs-white-12);
  border-color: var(--rs-white-30);
  color: var(--rs-fg-inverse);
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--rs-space-6);
  margin-top: var(--rs-space-10);
  padding-top: var(--rs-space-8);
  border-top: 1px solid var(--rs-white-10);
}
.hero-trust img { height: 56px; width: auto; opacity: 0.7; transition: all var(--rs-duration-base) var(--rs-ease-standard); border-radius: var(--rs-radius-sm); }
.hero-trust img:hover { opacity: 1; }

/* Hero CTA: store badges are the primary action (direct download),
   with the secondary "how it works" as an inline text link. */
.store-badges--hero {
  margin-top: var(--rs-space-8);
  gap: var(--rs-space-4);
}
.store-badges--hero img { height: 52px; }
.hero-secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--rs-space-2);
  color: var(--rs-white-70);
  font-size: var(--rs-text-sm);
  font-weight: var(--rs-weight-semibold);
  text-decoration: none;
  transition: color var(--rs-duration-base) var(--rs-ease-standard);
}
.hero-secondary-link:hover { color: var(--rs-fg-inverse); }

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hero-visual img {
  max-height: 560px;
  width: auto;
  filter: drop-shadow(0 20px 60px var(--rs-dark-a30));
  position: relative;
  z-index: 1;
}

/* ============================================
   URGENCY STRIP
   ============================================ */
.urgency-strip { background: var(--rs-ink-600); }
.urgency-strip p { color: #ffffff; }
.urgency-strip a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================
   DESTRUCTION OF ALTERNATIVES — 3D Tilt
   ============================================ */
.alternatives {
  padding: var(--rs-space-20) 0;
  background: var(--rs-bg-canvas);
}

.alt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--rs-space-5);
  margin-top: var(--rs-space-12);
}
.alt-card {
  display: flex;
  gap: var(--rs-space-4);
  padding: var(--rs-space-6);
  background: var(--rs-neutral-50);
  border-radius: var(--rs-radius-md);
  transition: background var(--rs-duration-base) var(--rs-ease-standard);
}
.alt-card:hover {
  background: var(--rs-neutral-100);
}
/* REMOVED: .alt-card hover dangerPulse (Phase 2) */

.alt-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: var(--rs-danger-50);
  color: var(--rs-danger-500);
  border-radius: var(--rs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.alt-icon svg { width: 22px; height: 22px; }

.alt-card h3 { font-size: var(--rs-text-md); font-weight: var(--rs-weight-bold); color: var(--rs-fg-primary); margin-bottom: 6px; }
.alt-card p { font-size: var(--rs-text-base); color: var(--rs-fg-secondary); line-height: 1.5; }

.alt-conclusion {
  margin-top: 56px;
  padding: 40px 40px 36px;
  background: var(--rs-midnight-800);
  border-radius: var(--rs-radius-lg);
  position: relative;
  overflow: hidden;
  text-align: center;
}
/* REMOVED: .alt-conclusion::before (decorative orb, P4c) */
.alt-conclusion-text {
  font-size: clamp(var(--rs-text-lg), 3vw, 26px);
  color: var(--rs-white-85);
  font-weight: var(--rs-weight-semibold);
  line-height: 1.45;
  margin-bottom: var(--rs-space-6);
}
.alt-conclusion .alt-emphasis { color: var(--rs-ink-400); font-weight: var(--rs-weight-bold); }
.alt-conclusion .alt-cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2);
  color: var(--rs-fg-inverse);
  font-size: 16px;
  font-weight: var(--rs-weight-semibold);
  text-decoration: none;
  padding: var(--rs-space-3) 28px;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-ink-500);
  border: 1px solid var(--rs-ink-400);
  transition: background var(--rs-duration-base) var(--rs-ease-standard), border-color var(--rs-duration-base) var(--rs-ease-standard);
}
.alt-conclusion .alt-cta-link:hover {
  background: var(--rs-ink-400);
  border-color: var(--rs-ink-300, #7B9AF7);
}

/* ============================================
   HOW IT WORKS — Shimmer Connector
   ============================================ */
.how-it-works {
  padding: var(--rs-space-20) 0;
  background: var(--rs-bg-surface);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rs-space-10);
  margin-top: 56px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: calc(16.66% + 20px);
  right: calc(16.66% + 20px);
  height: 3px;
  background: var(--rs-ink-500);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--rs-duration-hero) ease;
}
.steps.active::before { transform: scaleX(1); }

.step { text-align: center; position: relative; }
.step-number {
  width: 80px; height: 80px;
  background: var(--rs-action-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--rs-space-6);
  position: relative;
  z-index: 1;
}
.step-number svg { width: 36px; height: 36px; color: var(--rs-fg-on-accent); stroke: var(--rs-fg-on-accent); fill: none; }

.step h3 { font-size: var(--rs-text-lg); font-weight: var(--rs-weight-bold); color: var(--rs-fg-primary); margin-bottom: var(--rs-space-3); }
.step p { font-size: 16px; color: var(--rs-fg-tertiary); line-height: var(--rs-leading-relaxed); max-width: 300px; margin: 0 auto; }

.step-mockup { margin-top: var(--rs-space-6); }
.step-mockup img { max-height: 280px; width: auto; border-radius: var(--rs-radius-lg); filter: drop-shadow(0 8px 24px var(--rs-dark-a10)); }

.how-cta { text-align: center; margin-top: var(--rs-space-12); }

/* ============================================
   WHY RESIDENCESAFE (FEATURES) — Bento
   ============================================ */
.features {
  padding: var(--rs-space-20) 0;
  background: var(--rs-bg-canvas);
  position: relative;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rs-space-5);
  margin-top: var(--rs-space-12);
  position: relative;
}
.feature-card {
  display: flex;
  gap: var(--rs-space-4);
  padding: var(--rs-space-6);
  background: var(--rs-neutral-50);
  border-radius: var(--rs-radius-md);
  transition: background var(--rs-duration-base) var(--rs-ease-standard);
}
.feature-card:hover {
  background: var(--rs-neutral-100);
}

.feature-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: var(--rs-ink-50);
  color: var(--rs-ink-500);
  border-radius: var(--rs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon svg { width: 22px; height: 22px; }

.feature-card h3 { font-size: var(--rs-text-md); font-weight: var(--rs-weight-bold); color: var(--rs-fg-primary); margin-bottom: 6px; }
.feature-card p { font-size: var(--rs-text-base); color: var(--rs-fg-secondary); line-height: 1.5; }

/* ============================================
   SOCIAL PROOF — Quote Accent
   ============================================ */
.social-proof {
  padding: var(--rs-space-20) 0;
  background: var(--rs-bg-surface);
}
.social-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--rs-space-6);
  margin-top: var(--rs-space-12);
}
.social-proof-card {
  background: var(--rs-neutral-50);
  border-radius: var(--rs-radius-lg);
  padding: var(--rs-space-8);
  position: relative;
  transition: background var(--rs-duration-base) var(--rs-ease-standard);
}
.social-proof-card:hover { background: var(--rs-neutral-100); }
.social-proof-card::before {
  content: '\201C';
  position: absolute;
  top: 12px; right: 20px;
  font-size: 100px;
  line-height: 1;
  color: var(--rs-ink-a06);
  font-family: var(--rs-font-display);
  pointer-events: none;
}
.social-proof-card p { font-size: var(--rs-text-md); color: var(--rs-fg-secondary); line-height: var(--rs-leading-loose); margin-bottom: var(--rs-space-4); position: relative; }
.social-proof-card .attribution { font-weight: var(--rs-weight-semibold); color: var(--rs-fg-primary); font-size: var(--rs-text-base); margin-bottom: 0; position: relative; }

/* ============================================
   PRIVACY — Animated Counters
   ============================================ */
.privacy-section {
  padding: var(--rs-space-24) 0;
  background: var(--rs-midnight-800);
  color: var(--rs-fg-inverse);
  position: relative;
  overflow: hidden;
}

.privacy-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rs-space-16); align-items: center; }

.privacy-content .section-label { color: var(--rs-white-70); background: var(--rs-ink-a10); font-size: 12px; line-height: normal; margin-bottom: var(--rs-space-5); }
.privacy-content .section-title { color: var(--rs-fg-inverse); }
.privacy-content p { color: var(--rs-white-70); font-size: var(--rs-text-md); line-height: var(--rs-leading-loose); margin-bottom: var(--rs-space-5); }
.privacy-content p.highlight { color: var(--rs-fg-inverse); font-weight: var(--rs-weight-medium); font-style: italic; }

.privacy-content-centered { max-width: 720px; margin: 0 auto; text-align: center; }
.privacy-content-centered .section-title { color: var(--rs-fg-inverse); }
.privacy-content-centered p { color: var(--rs-white-70); font-size: var(--rs-text-md); line-height: var(--rs-leading-loose); margin-bottom: var(--rs-space-5); }
.privacy-content-centered p.highlight { color: var(--rs-fg-inverse); font-weight: var(--rs-weight-medium); font-style: italic; margin-bottom: 0; }

/* ============================================
   NORMALIZATION — Starfield
   ============================================ */
.normalization-section {
  padding: var(--rs-space-20) 0;
  background: var(--rs-midnight-800);
  border-top: 1px solid var(--rs-white-08);
  position: relative;
  overflow: hidden;
}
/* REMOVED: .normalization-section::after (decorative orb, P4c) */
.normalization-section .section-label { color: var(--rs-white-70); background: var(--rs-ink-a10); font-size: 12px; line-height: normal; margin-bottom: var(--rs-space-5); }
.normalization-section .section-title { color: var(--rs-fg-inverse); margin: 0 auto var(--rs-space-12); }
.normalization-section p { color: var(--rs-white-70); font-size: var(--rs-text-md); line-height: var(--rs-leading-loose); max-width: var(--rs-content-reading); margin: 0 auto var(--rs-space-5); }
.normalization-section .highlight-line { color: var(--rs-fg-inverse); font-weight: var(--rs-weight-semibold); font-size: 18px; }

.reality-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rs-space-6); max-width: var(--rs-content-default); margin: 0 auto 56px; }
.reality-card {
  background: var(--rs-white-04);
  border-radius: var(--rs-radius-md);
  padding: 28px var(--rs-space-6);
  text-align: center;
  transition: background var(--rs-duration-base) var(--rs-ease-standard);
}
.reality-card:hover {
  background: var(--rs-white-08);
}
.reality-card-icon { margin-bottom: var(--rs-space-4); }
.reality-card-icon svg { width: 36px; height: 36px; stroke: var(--rs-white-70); }
.reality-card-stat {
  font-size: clamp(40px, 5vw, 52px);
  font-weight: var(--rs-weight-bold);
  color: var(--rs-ink-400);
  line-height: 1;
  margin-bottom: var(--rs-space-2);
  letter-spacing: var(--rs-tracking-snug);
}
.reality-card-heading {
  font-size: var(--rs-text-sm);
  font-weight: var(--rs-weight-semibold);
  color: var(--rs-white-70);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--rs-space-3);
}
.reality-card p { font-size: var(--rs-text-base); color: var(--rs-white-70); line-height: var(--rs-leading-relaxed); margin: 0; }

.reality-bottom { max-width: var(--rs-content-reading); margin: 0 auto; text-align: center; }
.reality-bottom p { color: var(--rs-white-60); font-size: 16px; line-height: var(--rs-leading-loose); margin: 0 auto var(--rs-space-5); }
.reality-bottom .highlight-line {
  color: var(--rs-fg-inverse);
  font-weight: var(--rs-weight-semibold);
  font-size: 19px;
  line-height: 1.5;
  padding: var(--rs-space-6) var(--rs-space-8);
  background: var(--rs-ink-a06);
  border: 1px solid var(--rs-ink-a15);
  border-radius: var(--rs-radius-md);
  margin-top: var(--rs-space-2);
}

/* ============================================
   IDENTITY — Parallax Ready
   ============================================ */
.identity-section { padding: var(--rs-space-20) 0; background: var(--rs-bg-surface); }
.identity-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rs-space-16); align-items: center; }
.identity-text .section-title { margin-bottom: var(--rs-space-8); }
.identity-text p { color: var(--rs-fg-secondary); font-size: var(--rs-text-md); line-height: var(--rs-leading-loose); margin-bottom: var(--rs-space-5); }
.identity-text .section-label { font-size: 12px; line-height: normal; margin-bottom: var(--rs-space-5); }
.identity-text .identity-cta { margin-top: var(--rs-space-10); }
.identity-visual { display: flex; justify-content: center; align-items: center; }
.identity-visual img { max-height: 500px; width: auto; filter: drop-shadow(0 16px 48px var(--rs-dark-a12)); will-change: transform; transition: transform 0.1s linear; }

/* ============================================
   PRICING — Featured Glow
   ============================================ */
.pricing { padding: var(--rs-space-20) 0; background: var(--rs-neutral-50); }

.pricing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rs-space-6); margin-top: 56px; align-items: start; }

.pricing-card {
  background: var(--rs-bg-surface);
  border-radius: var(--rs-radius-xl);
  padding: 36px var(--rs-space-8);
  transition: background var(--rs-duration-base) var(--rs-ease-standard);
  position: relative;
}
.pricing-card:hover {
  background: var(--rs-neutral-50);
}

.pricing-card.featured {
  background: var(--rs-bg-surface);
  border: 2px solid var(--rs-ink-500);
}
.pricing-card.featured:hover { background: var(--rs-neutral-25); }

.pricing-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--rs-action-primary);
  color: var(--rs-fg-on-accent);
  font-size: var(--rs-text-sm);
  font-weight: var(--rs-weight-bold);
  padding: 6px var(--rs-space-5);
  border-radius: var(--rs-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pricing-card .tier-name { font-size: 22px; font-weight: var(--rs-weight-bold); color: var(--rs-fg-primary); margin-bottom: var(--rs-space-1); }
.pricing-card .tier-desc { font-size: var(--rs-text-sm); color: var(--rs-fg-tertiary); margin-bottom: var(--rs-space-6); }

.pricing-card .price { margin-bottom: var(--rs-space-2); }
.pricing-card .price-amount {
      font-variant-numeric: tabular-nums; font-size: var(--rs-text-5xl); font-weight: var(--rs-weight-bold); color: var(--rs-fg-primary); line-height: 1; }
.pricing-card .price-currency { font-size: var(--rs-text-xl); font-weight: var(--rs-weight-bold); color: var(--rs-fg-primary); vertical-align: top; }
.pricing-card .price-period { font-size: 16px; color: var(--rs-fg-disabled); font-weight: var(--rs-weight-regular); }
.pricing-card .price-annual { font-size: var(--rs-text-sm); color: var(--rs-fg-disabled); margin-bottom: 28px; }

.pricing-features { list-style: none; margin-bottom: var(--rs-space-8); }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; padding: var(--rs-space-2) 0; font-size: var(--rs-text-base); color: var(--rs-fg-secondary); line-height: var(--rs-leading-normal); }
.pricing-features li .check { flex-shrink: 0; width: 20px; height: 20px; color: var(--rs-success-500); margin-top: 2px; }
.pricing-features li .check svg { width: 18px; height: 18px; }
.pricing-features li .dash { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--rs-neutral-300); font-weight: var(--rs-weight-bold); margin-top: 2px; }

.pricing-card .btn { width: 100%; justify-content: center; }

.pricing-extras { text-align: center; margin-top: var(--rs-space-8); }
.pricing-extras p { font-size: var(--rs-text-base); color: var(--rs-fg-tertiary); }

.pricing-note { text-align: center; margin-top: var(--rs-space-4); }
.pricing-note p { font-size: 18px; font-weight: var(--rs-weight-semibold); color: var(--rs-fg-primary); }

/* ============================================
   TRUST — Marquee
   ============================================ */
.trust {
  padding: var(--rs-space-12) 0;
  background: var(--rs-neutral-50);
  border-top: 1px solid var(--rs-border-default);
  border-bottom: 1px solid var(--rs-border-default);
}
.trust-logos { display: flex; align-items: center; justify-content: center; gap: var(--rs-space-12); flex-wrap: wrap; }
.trust-logos img { height: 56px; width: auto; opacity: 0.7; transition: opacity var(--rs-duration-base) var(--rs-ease-standard); border-radius: var(--rs-radius-sm); }
.trust-logos img:hover { opacity: 1; }

.trust-label { font-size: var(--rs-text-sm); font-weight: var(--rs-weight-semibold); color: var(--rs-fg-disabled); text-transform: uppercase; letter-spacing: var(--rs-tracking-wide); text-align: center; margin-bottom: var(--rs-space-6); }

/* Final CTA overrides */
.final-cta .section-title { position: relative; font-size: clamp(36px, 5vw, var(--rs-text-5xl)); font-weight: var(--rs-weight-bold); }
.final-cta .section-subtitle, .final-cta .btn-group, .final-cta .store-badges { position: relative; }
.final-cta .section-subtitle { margin: 0 auto var(--rs-space-10); }
.final-cta .highlight-amount { color: var(--rs-ink-400); }

/* ============================================
   HOMEPAGE UTILITY OVERRIDES
   ============================================ */
.hero-highlight { color: var(--rs-ink-400); }
.hero-text { margin-bottom: 36px; font-size: var(--rs-text-base); }
.store-badges { margin-top: var(--rs-space-5); }
.urgency-strip { text-align: center; padding: 18px 0; }
.urgency-strip p { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #ffffff !important; }
.urgency-strip a { display: inline-block; padding: 11px 4px; font-weight: 800; color: #ffffff !important; text-decoration: underline; text-underline-offset: 3px; }
.link-accent { color: var(--rs-ink-400); }
.link-light { color: var(--rs-white-90); text-decoration: underline; text-underline-offset: 2px; }
.link-dotted { color: inherit; text-decoration: underline dotted; }
.brand-white { color: var(--rs-neutral-0); font-weight: 700; }
.pricing-note-sm { font-size: var(--rs-text-sm); color: var(--rs-neutral-500); margin-top: var(--rs-space-2); }
.pricing-summary { margin-top: var(--rs-space-6); }
/* .cta-links moved to shared.css */

/* ============================================
   PHASE 3: LAYOUT VARIETY — Homepage
   ============================================ */

/* --- REJECT CARD GRID (method vs. reason) --- */
/* --- REJECT LIST (compact crossed-out alternatives) --- */
.reject-list {
  margin: var(--rs-space-12) auto 0;
  max-width: 920px;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rs-space-2) var(--rs-space-10);
}
.reject-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: var(--rs-space-3);
  padding: var(--rs-space-4) 0;
  border-bottom: 1px solid var(--rs-border-subtle, rgba(19,23,48,.06));
}
.reject-x {
  color: var(--rs-danger-500);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.reject-name {
  font-weight: 600;
  color: var(--rs-fg-primary);
  text-decoration: line-through;
  text-decoration-color: var(--rs-danger-500);
  text-decoration-thickness: 2px;
  white-space: nowrap;
}
.reject-why {
  font-size: var(--rs-text-sm);
  color: var(--rs-fg-secondary);
  line-height: 1.5;
}

/* --- SPLIT FEATURES (alternating left-right) --- */
.split-features {
  margin-top: var(--rs-space-12);
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-6);
}
.split-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rs-space-5);
}
.split-feature-card {
  display: flex;
  gap: var(--rs-space-4);
  padding: var(--rs-space-6);
  background: var(--rs-neutral-50);
  border-radius: var(--rs-radius-md);
  transition: background var(--rs-duration-base) var(--rs-ease-standard);
}
.split-feature-card:hover {
  background: var(--rs-neutral-100);
}
.sf-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--rs-ink-50);
  color: var(--rs-ink-500);
  border-radius: var(--rs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-icon svg { width: 22px; height: 22px; }
.split-feature-card h3 { font-size: var(--rs-text-md); font-weight: 700; color: var(--rs-fg-primary); margin-bottom: 6px; }
.split-feature-card p { font-size: var(--rs-text-base); color: var(--rs-fg-secondary); line-height: 1.5; }
.split-feature-row:nth-child(even) { padding-left: var(--rs-space-10); }

/* ============================================
   TRUST PILLARS
   ============================================ */
.trust-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rs-space-8);
  margin-top: var(--rs-space-20);
}
.trust-pillar {
  background: var(--rs-neutral-50);
  border: 1px solid var(--rs-neutral-100);
  border-radius: var(--rs-radius-xl);
  padding: var(--rs-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-4);
}
.trust-pillar-icon {
  width: 48px;
  height: 48px;
  background: var(--rs-ink-a08);
  border-radius: var(--rs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rs-ink-500);
  flex-shrink: 0;
}
.trust-pillar-icon svg { width: 22px; height: 22px; }
.trust-pillar h3 { font-size: var(--rs-text-md); font-weight: 700; color: var(--rs-fg-primary); margin: 0; }
.trust-pillar p { font-size: var(--rs-text-base); color: var(--rs-fg-secondary); line-height: var(--rs-leading-relaxed); margin: 0; flex: 1; }
.trust-pillar .link-accent { font-size: var(--rs-text-sm); margin-top: auto; }

/* ============================================
   FOR WHO / AUDIENCE CARDS
   ============================================ */
.for-who { padding: var(--rs-space-20) 0; background: var(--rs-white); }
.audience-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rs-space-6);
  margin-top: var(--rs-space-20);
}
.audience-card {
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-4);
  padding: var(--rs-space-8);
  border: 1.5px solid var(--rs-neutral-100);
  border-radius: var(--rs-radius-xl);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  background: var(--rs-white);
}
.audience-card:hover {
  border-color: var(--rs-action-primary);
  box-shadow: var(--rs-shadow-lg);
  transform: translateY(-2px);
}
.audience-card-icon {
  width: 44px;
  height: 44px;
  background: var(--rs-ink-a08);
  border-radius: var(--rs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rs-ink-500);
  flex-shrink: 0;
}
.audience-card-icon svg { width: 20px; height: 20px; }
.audience-card h3 { font-size: var(--rs-text-md); font-weight: 700; color: var(--rs-fg-primary); margin: 0; }
.audience-card p { font-size: var(--rs-text-base); color: var(--rs-fg-secondary); line-height: var(--rs-leading-relaxed); margin: 0; flex: 1; }
.audience-card-cta { font-size: var(--rs-text-sm); font-weight: 600; color: var(--rs-action-primary); margin-top: auto; }

/* ============================================
   MINI FAQ
   ============================================ */
.mini-faq { padding: var(--rs-space-20) 0; background: var(--rs-neutral-50); }
.faq-list {
  max-width: 760px;
  margin: var(--rs-space-12) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-3);
}
.faq-item {
  background: var(--rs-white);
  border: 1px solid var(--rs-neutral-100);
  border-radius: var(--rs-radius-lg);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--rs-neutral-200); }
.faq-question {
  padding: var(--rs-space-5) var(--rs-space-6);
  font-size: var(--rs-text-base);
  font-weight: 600;
  color: var(--rs-fg-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rs-space-4);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--rs-fg-tertiary);
  flex-shrink: 0;
  transition: transform .2s;
}
.faq-item[open] .faq-question::after { transform: rotate(45deg); }
.faq-answer {
  padding: 0 var(--rs-space-6) var(--rs-space-5);
}
.faq-answer p { font-size: var(--rs-text-base); color: var(--rs-fg-secondary); line-height: var(--rs-leading-relaxed); margin: 0; }
.faq-more { text-align: center; margin-top: var(--rs-space-8); font-size: var(--rs-text-base); }

/* ============================================
   COUNTRY STRIP
   ============================================ */
.country-strip { padding: var(--rs-space-20) 0; background: var(--rs-white); }
.country-flags-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--rs-space-4);
  margin-top: var(--rs-space-12);
}
.country-flag-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rs-space-2);
  padding: var(--rs-space-5) var(--rs-space-3);
  border: 1px solid var(--rs-neutral-100);
  border-radius: var(--rs-radius-lg);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
  background: var(--rs-white);
}
.country-flag-card:hover {
  border-color: var(--rs-action-primary);
  box-shadow: var(--rs-shadow-md);
}
.country-flag-emoji { font-size: 32px; line-height: 1; }
.country-flag-name { font-size: var(--rs-text-sm); font-weight: 600; color: var(--rs-fg-secondary); text-align: center; }
.country-strip-cta { text-align: center; margin-top: var(--rs-space-8); font-size: var(--rs-text-base); }

/* ============================================
   RESPONSIVE (homepage-specific)
   ============================================ */
@media (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--rs-space-12); text-align: center; }
  .hero-content { max-width: 100%; margin: 0 auto; }
  .hero .btn-group { justify-content: center; }
  .hero .store-badges { justify-content: center; }
  .hero-trust { justify-content: center; }
  .hero-visual img { max-height: 420px; }
  .steps { grid-template-columns: 1fr; gap: var(--rs-space-12); }
  .steps::before { display: none; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .split-feature-row { grid-template-columns: 1fr; }
  .split-feature-row:nth-child(even) { padding-left: 0; }
  .privacy-inner { grid-template-columns: 1fr; }
  .identity-inner { grid-template-columns: 1fr; text-align: center; }
  .identity-visual img { max-height: 380px; }
  .pricing-cards { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .pricing-card.featured { transform: none; }
  .trust-pillars { grid-template-columns: 1fr; }
  .audience-cards { grid-template-columns: 1fr; }
  .country-flags-grid { grid-template-columns: repeat(4, 1fr); }
  }

@media (max-width: 767px) {
  .hero { padding-top: 100px; padding-bottom: var(--rs-space-16); min-height: auto; }
  .hero-visual { margin-top: var(--rs-space-10); }
  .hero-visual img { max-height: 340px; }
  .alt-grid { grid-template-columns: 1fr; }
  .reject-list { grid-template-columns: 1fr; gap: 0; }
  .reject-row { grid-template-columns: auto 1fr; row-gap: var(--rs-space-1); }
  .reject-why { grid-column: 2; }
  .alt-conclusion { padding: 28px var(--rs-space-6) 24px; margin-left: 0; margin-right: 0; }
  .features-grid { grid-template-columns: 1fr; }
  .split-feature-row { grid-template-columns: 1fr; }
  .hero-trust { flex-wrap: wrap; gap: var(--rs-space-4); }
  .hero-trust img { height: 36px; }
  .trust-logos img { height: 36px; }
  .trust-logos { gap: var(--rs-space-6); }
  .social-proof-grid { grid-template-columns: 1fr; }
  .reality-cards { grid-template-columns: 1fr; gap: var(--rs-space-4); }
  .country-flags-grid { grid-template-columns: repeat(4, 1fr); }
  .split-feature-row:nth-child(even) { padding-left: 0; }
  .audience-card { padding: var(--rs-space-6); }
  .trust-pillar { padding: var(--rs-space-6); }
  .step p { max-width: 100%; }
}

@media (max-width: 480px) {
  .country-flags-grid { grid-template-columns: repeat(3, 1fr); }
  .split-feature-card { flex-direction: column; }
}

/* ============================================
   THE 4 DIMENSIONS OF PROOF
   ============================================ */
.dimensions {
  padding: var(--rs-space-20) 0;
  background: var(--rs-bg-surface);
}
.dimensions-grid {
  margin-top: var(--rs-space-12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rs-space-6);
}
.dimension-card {
  position: relative;
  background: var(--rs-bg-base, #fff);
  border-radius: var(--rs-radius-lg);
  padding: var(--rs-space-8);
  border: 1px solid var(--rs-border-subtle, rgba(19,23,48,.06));
}
.dimension-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--rs-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rs-ink-500);
  margin-bottom: var(--rs-space-5);
}
.dimension-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--rs-radius-md);
  background: var(--rs-ink-50);
  color: var(--rs-ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--rs-space-4);
}
.dimension-icon svg { width: 26px; height: 26px; }
/* Green accent on the 4th dimension (Proof) — breaks the all-blue monochrome */
.dimensions-grid .dimension-card:nth-child(4) .dimension-tag { color: var(--rs-success-600); }
.dimensions-grid .dimension-card:nth-child(4) .dimension-icon { background: var(--rs-success-50); color: var(--rs-success-600); }
.dimension-card h3 {
  font-size: var(--rs-text-lg);
  margin-bottom: var(--rs-space-2);
}
.dimension-card p {
  font-size: var(--rs-text-sm);
  line-height: 1.6;
  color: var(--rs-fg-secondary, var(--rs-midnight-600));
  margin: 0;
}
.dimensions-footer {
  margin-top: var(--rs-space-10);
  text-align: center;
  max-width: var(--rs-content-reading);
  margin-left: auto;
  margin-right: auto;
}
.dimensions-footer-text {
  font-size: var(--rs-text-base);
  line-height: 1.7;
  color: var(--rs-fg-secondary, var(--rs-midnight-600));
}
.dimensions-links {
  margin-top: var(--rs-space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rs-space-4) var(--rs-space-8);
}
@media (max-width: 1023px) {
  .dimensions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dimensions-grid { grid-template-columns: 1fr; }
  .dimensions-links { flex-direction: column; gap: var(--rs-space-3); }
}