/* ─────────────────────────────────────────
   Smart Inventory — landing page styles

   Layered on top of design-tokens.css and subpage-shared.css. This file
   intentionally re-declares the .nav, .nav-brand, .nav-links, and .nav-cta
   selectors so that landing's transparent-over-hero variant can override the
   shared opaque-glass nav. Every other shared component (.cta-strip, .footer,
   .nav-toggle, .nav-drawer) is reused from subpage-shared.css verbatim.

   subpage-shared.css ships a `.page-content p, .page-content li` rule
   (16px body copy, ink2, line-height 1.75, margin-bottom 14px) intended
   for the long-form FAQ/Privacy/Terms pages. The landing also lives
   inside <main class="page-content">, so without intervention every
   <p> here inherits subpage body-copy styling and clobbers .hero-lead,
   .section-sub, .pricing-tier__period, .pricing-note, etc. The reset
   block below is specificity-matched to `.page-content p` (0,1,1) and
   loads later, so it wins. Class-specific rules in this file then set
   the real values.

   Source design: docs/reference/new-design/Smart Inventory Landing.html
   Tracking: GitHub issue #841 (landing) under umbrella #838.
───────────────────────────────────────── */

@import url('design-tokens.css');

/* ── LANDING <p>/<li> RESET ─────────────────────────────
   Counter-act `.page-content p, .page-content li` from subpage-shared.css.
   See the file header above for full explanation. */
.section p,
.section li,
.hero p,
.hero li {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  margin-bottom: 0;
}

@import url('design-tokens.css');

/* ── LANDING PAGE-CONTENT FULL-BLEED OVERRIDE ──────────
   The shared `.page-content` rule in subpage-shared.css constrains content to
   max-width: 840px with 80px 5% padding, which is the right behaviour for
   subpages (FAQ, Privacy, etc.) but breaks the landing hero and full-width
   sections. Scope the override to body.landing so subpages stay untouched.
   Tracking: GitHub issue #1020. */
body.landing .page-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ── SCROLL-AWARE NAV ──────────────────────────────────
   Initial state (above the hero, body :not(.scrolled)): transparent
   background, white wordmark/links, no border. Once landing.js toggles
   body.scrolled past ~120px the styles fall back to the shared glass nav
   defined in subpage-shared.css. */
body:not(.scrolled) .nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
body:not(.scrolled) .nav-brand span,
body:not(.scrolled) .nav-links a,
body:not(.scrolled) .nav-cta a.secondary,
body:not(.scrolled) .nav-toggle {
  color: #fff;
}
body:not(.scrolled) .nav-toggle svg { stroke: #fff; }
.nav,
.nav-brand span,
.nav-links a,
.nav-cta a.secondary,
.nav-toggle {
  transition: background 0.3s ease, backdrop-filter 0.3s ease,
              border-color 0.3s ease, color 0.3s ease;
}
.nav-brand,
.nav-brand:hover,
.nav-brand:focus-visible,
.nav-brand * {
  text-decoration: none !important;
}

/* ── FLOAT ANIMATION (phone mockups) ──────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-phones .phone-float,
  .phone-float { animation: none; }
}

/* ── PHONE FRAME COMPONENT ────────────────────────────── */
.phone {
  position: relative;
  flex-shrink: 0;
  width: 260px;
  height: 540px;
  background: #0a0a0a;
  border-radius: 40px;
  padding: 10px 8px;
  box-shadow: 0 30px 80px rgba(11, 30, 90, 0.28),
              inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.phone--noshadow { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: #000;
  overflow: hidden;
  position: relative;
}
.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phone--sm { width: 220px; height: 458px; border-radius: 34px; }
.phone--sm .phone-screen { border-radius: 27px; }
.phone--md { width: 247px; height: 513px; border-radius: 38px; }
.phone--md .phone-screen { border-radius: 30px; }
.phone--lg { width: 260px; height: 540px; }
.phone--xs { width: 170px; height: 354px; border-radius: 26px; padding: 8px 6px; }
.phone--xs .phone-screen { border-radius: 20px; }

/* ── HERO ───────────────────────────────────────────────
   Uses the bundle's Hero variant A (dark navy gradient + dual phones + stats
   row). The bundle prototype's default TWEAK is variant C (light) — variant A
   was chosen deliberately so the landing's first paint matches the dark
   page-hero used on every subpage (FAQ, privacy, terms) for
   brand consistency. Tracked in #841 / umbrella #838. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 5% 80px;
  background: linear-gradient(140deg,
              var(--blueDark) 0%, var(--blueDeep) 50%, #2a0d4a 100%);
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 700px at 15% -10%, rgba(30, 95, 230, 0.20) 0%, transparent 60%),
    radial-gradient(circle 600px at 85% 110%, rgba(229, 57, 53, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 6px 14px 6px 8px;
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-eyebrow .badge {
  background: var(--accent-gradient);
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}
.hero-eyebrow .label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}
.hero h1 {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 800;
  color: #fff;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero h1 .accent {
  background: linear-gradient(110deg, #93c5fd 20%, #fca5a5 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Hero lead paragraph. Note the `.hero` ancestor — it's there to outrank
   subpage-shared.css's `.page-content p` rule (specificity 0,1,1), which
   would otherwise win and stamp body-copy styling on the hero subtitle. */
.hero .hero-lead {
  font-size: 19px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 0 32px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 40px;
}
.play-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0a0a0a;
  color: #fff;
  padding: 13px 22px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.play-btn:hover { transform: translateY(-2px); text-decoration: none; }
.play-btn--light {
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.play-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.play-btn-text .small { font-size: 11px; font-weight: 500; opacity: 0.7; }
.play-btn-text .big { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.web-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  transition: background 0.2s;
}
.web-btn:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-stat .val {
  color: #fff;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-stat .label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-family: var(--font-mono);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.hero-phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
}
.hero-phones .phone-float {
  position: absolute;
  animation: float 6s ease-in-out infinite;
}
.hero-phones .phone-float--left { left: 5%; top: 15%; z-index: 1; }
.hero-phones .phone-float--right { right: 5%; top: 5%; z-index: 2; animation-delay: 1s; }

/* ── SECTION SHELL ─────────────────────────────────────── */
.section {
  padding: 120px 5%;
  background: #fff;
}
.section--surface { background: var(--surface); }
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 80px; }
.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(30, 95, 230, 0.1);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
}
.eyebrow--red { background: rgba(229, 57, 53, 0.1); color: var(--red); }
/* Anchor jumps from the nav (#features, #how-it-works, #pricing, #screenshots,
   #faq) must land below the 68px fixed nav. Same offset used on subpages. */
.section[id] { scroll-margin-top: 100px; }

.section h2,
.showcase h2 {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.035em;
  line-height: 1.05;
  /* subpage-shared.css's `.page-content h2 { margin: 56px 0 20px }` rule
     leaks into the landing (specificity 0,1,1 same as ours, but it sets
     margin-top while we only set margin-bottom). Reset both sides so the
     gap between an eyebrow pill and its h2 is just the eyebrow's own
     margin-bottom (20px) — not 76px (20 + 56). Includes .showcase because
     that section uses class="showcase" not "section". */
  margin: 0 0 18px;
}
.section h3,
.showcase h3 {
  /* Same defensive reset for h3 — .page-content h3 sets margin: 32px 0 12px. */
  margin-top: 0;
}

/* ── LANDING <p>/<li> CLASS SPECIFICITY BUMPS ─────────────────
   The reset block at the top of this file zeros margin-bottom on every
   landing <p>/<li>. Class-specific rules below (like .pricing-tier__period)
   set their own values — but if they're single-class selectors (0,1,0) they
   lose to subpage-shared.css's `.page-content p` (0,1,1). Bumping each
   landing-only paragraph rule with a parent context gives it (0,2,0) so it
   wins reliably. */
.section-head .section-sub {
  font-size: 18px;
  color: var(--ink2);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}
.pricing-tier .pricing-tier__desc {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.55;
  margin-bottom: 16px;
}
.pricing-tier .pricing-tier__period {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  margin-bottom: 10px;
}
.pricing-tier .pricing-tier__perks {
  /* subpage-shared.css's `.page-content ul { padding-left: 24px }` indents the
     perk list — we need flush-left here. */
  padding-left: 0;
  margin: 0;
}
.section .pricing-note {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.55;
}
.section-sub {
  font-size: 18px;
  color: var(--ink2);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── FEATURES GRID ─────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 26px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(30, 95, 230, 0.1);
  border-color: rgba(30, 95, 230, 0.4);
}
.feature-card.feature-card--red:hover {
  box-shadow: 0 16px 40px rgba(229, 57, 53, 0.1);
  border-color: rgba(229, 57, 53, 0.4);
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30, 95, 230, 0.1), rgba(30, 95, 230, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--blue);
}
.feature-card--red .feature-icon {
  background: linear-gradient(135deg, rgba(229, 57, 53, 0.1), rgba(229, 57, 53, 0.2));
  color: var(--red);
}
.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.feature-card p {
  font-size: 14.5px;
  color: var(--ink2);
  line-height: 1.65;
}

/* ── HOW IT WORKS ──────────────────────────────────────── */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.how-card-illus {
  aspect-ratio: 3 / 4;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 20px 0;
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.how-card-illus .step-num {
  position: absolute;
  top: 20px;
  left: 24px;
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 700;
  color: rgba(30, 95, 230, 0.1);
  letter-spacing: -0.05em;
  line-height: 1;
}
.how-card-illus .phone { transform: translateY(15%); }
.how-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.how-meta .step-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.05em;
}
.how-meta .rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.how-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.how-card p {
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.65;
}

/* ── HOW IT WORKS — skeleton / fade-in (#1458) ──────────
   Before the lazy image finishes loading the phone-screen shows a pulsing
   grey skeleton instead of a solid black rectangle. Once the <img> fires
   its load event, landing.js removes the .img-loading class and the image
   fades in via the .img-loaded transition.
   Scoped to #how-it-works so hero phone images (eager, above-fold) are
   unaffected. */
@keyframes landing-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
#how-it-works .phone-screen.img-loading {
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: landing-skeleton-shimmer 1.4s ease-in-out infinite;
}
/* Start hidden; fade in on load */
#how-it-works .phone-screen img {
  opacity: 0;
  transition: opacity 0.35s ease;
}
#how-it-works .phone-screen.img-loaded img {
  opacity: 1;
}
/* After fade-in restore the normal dark screen background */
#how-it-works .phone-screen.img-loaded {
  background: #000;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  #how-it-works .phone-screen.img-loading { animation: none; }
  #how-it-works .phone-screen img { transition: none; opacity: 1; }
}

/* ── SCREENSHOTS GALLERY — skeleton / fade-in (#1460) ───────
   Same pattern as #1458 above, applied to the horizontal-scroll
   showcase gallery. Each .showcase-card contains a <picture> element
   that wraps the lazy-loaded screenshot.  landing.js marks the
   <picture> as .img-loading on DOM ready and swaps to .img-loaded
   when the inner <img> fires its load (or error) event.
   @keyframes landing-skeleton-shimmer is declared once above and
   reused here. */
#screenshots .showcase-card picture.img-loading {
  display: block;
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: landing-skeleton-shimmer 1.4s ease-in-out infinite;
}
/* Start hidden; fade in on load */
#screenshots .showcase-card picture img {
  opacity: 0;
  transition: opacity 0.35s ease;
}
#screenshots .showcase-card picture.img-loaded img {
  opacity: 1;
}
/* After fade-in restore normal picture display */
#screenshots .showcase-card picture.img-loaded {
  background: none;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  #screenshots .showcase-card picture.img-loading { animation: none; }
  #screenshots .showcase-card picture img { transition: none; opacity: 1; }
}

/* ── APP SHOWCASE (horizontal snap-scroll) ─────────────── */
.showcase {
  padding: 120px 0;
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.showcase-head { padding: 0 5%; }
.showcase-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 20px 5% 60px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 5%;
}
.showcase-card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 320px;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 44px rgba(11, 30, 90, 0.12);
  transition: transform 0.25s, box-shadow 0.25s;
}
.showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(11, 30, 90, 0.18);
}
.showcase-card img {
  width: 100%;
  height: auto;
  display: block;
}
.showcase-card-foot {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  background: #fff;
}
.showcase-card-foot .idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.showcase-card-foot .lbl {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

/* ── PRICING TIERS ─────────────────────────────────────── */
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
.pricing-tier {
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.pricing-tier--free {
  background: #ffffff;
  color: #0a0f1e;
  border: 1px solid var(--border);
}
.pricing-tier--premium {
  background: linear-gradient(140deg, var(--blueDeep), var(--blueDark));
  border: 1px solid rgba(30, 95, 230, 0.33);
  box-shadow: 0 12px 32px rgba(11, 30, 90, 0.18);
  color: #fff;
}
.pricing-tier--hero {
  background: linear-gradient(140deg, var(--blueDeep) 0%, var(--blueDark) 60%, #2a0d4a 100%);
  border: 1px solid var(--blue);
  box-shadow: 0 24px 60px rgba(30, 95, 230, 0.33), 0 0 0 1px rgba(30, 95, 230, 0.25) inset;
  transform: translateY(-8px);
  padding: 32px 22px 26px;
  color: #fff;
}
.pricing-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, var(--red), var(--redDeep));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 0 20px 0 12px;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
.pricing-tier__label {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--ink3);
}
.pricing-tier--premium .pricing-tier__label,
.pricing-tier--hero .pricing-tier__label { color: rgba(255, 255, 255, 0.7); }
.pricing-tier__price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.pricing-tier__price {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.pricing-tier--premium .pricing-tier__price,
.pricing-tier--hero .pricing-tier__price { color: #fff; }
.pricing-tier__price--hero { font-size: 44px; }
.pricing-tier__period-inline {
  font-size: 14px;
  color: var(--ink3);
}
.pricing-tier__desc {
  font-size: 13px;
  color: var(--ink2);
  margin-bottom: 16px;
}
.pricing-tier__period {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.pricing-tier__equiv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pricing-tier__equiv-row:empty { margin-bottom: 0; }
.pricing-tier__equiv {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
}
.pricing-save {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(229, 57, 53, 0.2);
  color: #fca5a5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pricing-save--hero { background: var(--red); color: #fff; }
.pricing-tier__cta {
  display: block;
  text-align: center;
  border-radius: 11px;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  transition: transform 0.15s, opacity 0.15s;
}
.pricing-tier__cta:hover { text-decoration: none; opacity: 0.9; transform: translateY(-1px); }
.pricing-tier__cta--free {
  background: var(--surface2);
  color: var(--ink);
  padding: 11px 0;
  font-size: 14.5px;
  margin-bottom: 16px;
}
.pricing-tier__cta--premium {
  background: #fff;
  color: var(--blueDark);
  padding: 11px 0;
  font-size: 14.5px;
}
.pricing-tier__cta--hero {
  background: linear-gradient(135deg, var(--blue), var(--red));
  color: #fff;
  padding: 13px 0;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(229, 57, 53, 0.33);
}
.pricing-tier__perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pricing-tier__perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink2);
}
.pricing-tier__tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(30, 95, 230, 0.1);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pricing-unlocks {
  margin-top: 48px;
  padding: 36px 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.pricing-unlocks__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.pricing-unlocks__eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.pricing-unlocks__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.pricing-unlocks__note {
  font-size: 13px;
  color: var(--ink3);
}
.pricing-unlocks__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.pricing-unlocks__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink2);
}
.pricing-unlocks__tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pricing-note {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.55;
}

/* ── FAQ TEASER ────────────────────────────────────────── */
.faq-teaser {
  max-width: 840px;
  margin: 0 auto;
}
.faq-teaser .faq-list { margin-bottom: 32px; }
.faq-teaser-foot {
  text-align: center;
  font-size: 14px;
  color: var(--ink3);
}
.faq-teaser-foot a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.faq-teaser-foot a:hover { text-decoration: underline; }

/* ── RESPONSIVE ────────────────────────────────────────── */
/* Aligned with the 900px breakpoint used by subpage-shared.css so the nav
   collapse, hero stack, and perks collapse all happen at the same width. */
@media (max-width: 980px) {
  .pricing-tiers { grid-template-columns: repeat(2, 1fr); }
  .pricing-tier--hero { transform: none; }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-phones { height: 520px; }
  .hero h1 { font-size: clamp(40px, 9vw, 64px); }
  .how-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 600px) {
  .section { padding: 80px 5%; }
  .hero { padding: 110px 5% 60px; }
  /* Clamp floor lowered to 32px so the headline fits within a 375px viewport
     without overflowing. 9vw of 375px = ~33.75px, landing comfortably above
     the 32px floor. overflow-wrap / word-break on .hero h1 provide a hard
     fallback for long words (e.g. long single-word translations). */
  .hero h1 { font-size: clamp(32px, 9vw, 56px); }
  .hero-phones { height: 440px; }
  .hero-phones .phone { transform: scale(0.78); transform-origin: top center; }
  .hero-stats { gap: 20px; }
  .section-head { margin-bottom: 56px; }
  .pricing-tiers { grid-template-columns: 1fr; }
  .pricing-unlocks { padding: 24px 20px; }
}

/* ── DARK MODE OVERRIDES ─────────────────────────────────
   Auto-applies when the user's OS is in dark mode (prefers-color-scheme: dark).
   Strategy: invert page surface to near-black navy (#070a14) and lift every
   on-light element (h2/h3, body text, eyebrows, cards, FAQ items) so they
   read on the dark background. Hero, CTA strip, and pricing premium cards
   are ALREADY dark in light mode — they don't need overrides. */
@media (prefers-color-scheme: dark) {
  /* Base canvas */
  body { background: #070a14; color: rgba(255, 255, 255, 0.85); }

  /* Section surfaces */
  .section { background: #070a14; }
  .section--surface { background: #0d1526; }

  /* Headings + body copy on sections */
  .section h2,
  .section h3,
  .showcase h2,
  .showcase h3 { color: #ffffff; }
  .section-head .section-sub { color: rgba(255, 255, 255, 0.6); }
  .section-head .section-sub em { color: #ffffff; }

  /* Built-for trust band */
  .built-for-band {
    background: #070a14;
    border-top-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.05);
  }
  .built-for-band__label { color: rgba(255, 255, 255, 0.4); }
  .built-for-band__items { color: rgba(255, 255, 255, 0.75); }

  /* Feature cards */
  .feature-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .feature-card h3 { color: #ffffff; }
  .feature-card p { color: rgba(255, 255, 255, 0.62); }

  /* How it works — phone illustration card */
  .how-card-illus {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .how-card-illus .step-num { color: rgba(255, 255, 255, 0.08); }
  .how-card h3 { color: #ffffff; }
  .how-card p { color: rgba(255, 255, 255, 0.62); }
  .step-label { color: #93c5fd; }
  .rule { background: rgba(255, 255, 255, 0.08); }

  /* Screenshots gallery */
  .showcase { background: #0d1526; }
  .showcase-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  }
  .showcase-card-foot {
    background: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(255, 255, 255, 0.06);
  }
  .showcase-card-foot .lbl { color: #ffffff; }
  .showcase-card-foot .idx { color: #93c5fd; }

  /* Pricing — Free card already styled (#1a2340 + light text) earlier.
     Premium cards stay dark gradient in both modes. Just lift body text. */
  .pricing-tier--premium {
    /* Without this override, the brand navy gradient (var(--blueDeep) →
       var(--blueDark)) gets visually swallowed by the near-black dark mode
       body. Brighten the gradient so the card stays distinguishable. */
    background: linear-gradient(140deg, #1c2747, #131c36);
    border-color: rgba(30, 95, 230, 0.45);
  }
  .pricing-tier--hero {
    /* Hero card keeps its plum top-stop for richness, just lifts both ends. */
    background: linear-gradient(140deg, #1c2747 0%, #131c36 60%, #3a154f 100%);
    border-color: var(--blue);
  }
  .pricing-tier .pricing-tier__desc { color: rgba(255, 255, 255, 0.7); }
  .pricing-tier .pricing-tier__perks li { color: rgba(255, 255, 255, 0.78); }
  .pricing-tier__perks .pricing-tier__tick {
    background: rgba(30, 95, 230, 0.18);
    color: #93c5fd;
  }
  .pricing-tier--free .pricing-tier__period-inline { color: rgba(255, 255, 255, 0.5); }
  .pricing-tier__cta--free {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  /* Pricing — "Every Premium plan unlocks" block */
  .pricing-unlocks {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
  }
  .pricing-unlocks__title { color: #ffffff; }
  .pricing-unlocks__note { color: rgba(255, 255, 255, 0.45); }
  .pricing-unlocks__item { color: rgba(255, 255, 255, 0.8); }

  /* FAQ teaser items — switch to dark glass cards */
  .faq-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .faq-item[open] {
    background: rgba(30, 95, 230, 0.06);
    border-color: rgba(30, 95, 230, 0.4);
  }
  .faq-item summary { color: #ffffff; }
  .faq-item summary::after {
    background: rgba(255, 255, 255, 0.08);
    color: #93c5fd;
  }
  .faq-item[open] summary::after { background: var(--blue); color: #ffffff; }
  .faq-body { color: rgba(255, 255, 255, 0.7); }
  .faq-teaser-foot { color: rgba(255, 255, 255, 0.5); }

  /* Stat tiles (if present anywhere in landing) */
  .stat-tile {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* ── LANDING CTA STRIP — enhanced over the shared subpage version ───────
   subpage-shared.css gives every page a compact `.cta-strip` (padding 64px,
   centered h2 + p + buttons). The landing version needs more presence:
   taller padding, larger headline, an inner max-width wrapper, and a contact
   strip with the support email under the buttons. Scoped to
   .cta-strip--landing so FAQ/Privacy/Terms strips stay untouched. */
.cta-strip--landing {
  padding: 120px 5%;
  position: relative;
  overflow: hidden;
}
.cta-strip--landing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.cta-strip--landing::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 57, 53, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.cta-strip--landing .cta-strip-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.cta-strip--landing h2 {
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 20px;
}
.cta-strip--landing p {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 40px;
}
.cta-strip--landing .actions { margin-bottom: 48px; }
.cta-strip--landing .cta-contact {
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-strip--landing .cta-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
}
.cta-strip--landing .cta-contact a:hover { color: #fff; text-decoration: none; }
.cta-strip--landing .cta-contact-icon { opacity: 0.5; }

/* GET IT ON / Google Play two-line label (matches Play Store badge convention).
   .cta-btn-primary's existing styling stays — we just stack the two text rows
   inside a flex column where the eyebrow ("GET IT ON") sits above the wordmark
   ("Google Play") at smaller / more muted sizes. Applies to all .cta-btn-primary
   instances, not just the landing — they all use the same badge. */
.cta-btn-primary__meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.cta-btn-primary__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(10, 31, 92, 0.65);
}
.cta-btn-primary__label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
@media (max-width: 600px) {
  .cta-strip--landing { padding: 80px 5%; }
  .cta-strip--landing p { font-size: 17px; }
}