/* ============================================================
   SnapTask — styles.css
   Official landing page for SnapTask Android application
   "Turn screenshots into real actions."
   ============================================================

   Table of Contents
   ─────────────────
   01  Design Tokens (CSS Custom Properties)
   02  CSS Reset & Base
   03  Typography Utilities
   04  Layout & Container
   05  Section Shared Styles
   06  Buttons
   07  Badge
   08  Navigation
   09  Mobile Menu
   10  Hero Section
   11  Features Section
   12  How It Works Section
   13  Privacy Section
   14  FAQ Accordion
   15  CTA Section
   16  Footer
   17  Animations & Keyframes
   18  Focus & Accessibility
   19  Reduced Motion
   20  Responsive — Tablet  (≤ 1024 px)
   21  Responsive — Compact (≤ 900 px)
   22  Responsive — Mobile  (≤ 640 px)
   23  Responsive — XSmall  (≤ 380 px)
   ============================================================ */

/* ── 01  Design Tokens ────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --c-primary: #4f46e5;
  --c-primary-dark: #4338ca;
  --c-primary-darker: #312e81;
  --c-primary-light: #818cf8;
  --c-primary-pale: #eef2ff;
  --c-secondary: #22d3ee;
  --c-secondary-dark: #0891b2;
  --c-secondary-pale: #ecfeff;

  /* Neutrals */
  --c-bg: #ffffff;
  --c-surface: #f9fafb;
  --c-surface-2: #f3f4f6;
  --c-border: #e5e7eb;
  --c-border-strong: #d1d5db;
  --c-text: #111827;
  --c-text-2: #374151;
  --c-text-3: #6b7280;
  --c-text-4: #9ca3af;

  /* Typography */
  --font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;

  /* Type scale (rem) */
  --text-xs: 0.6875rem; /* 11 px */
  --text-sm: 0.8125rem; /* 13 px */
  --text-base: 1rem; /* 16 px */
  --text-lg: 1.125rem; /* 18 px */
  --text-xl: 1.25rem; /* 20 px */
  --text-2xl: 1.5rem; /* 24 px */
  --text-3xl: 1.875rem; /* 30 px */
  --text-4xl: 2.25rem; /* 36 px */
  --text-5xl: 3rem; /* 48 px */
  --text-6xl: 3.75rem; /* 60 px */
  --text-7xl: 4.5rem; /* 72 px */

  /* Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight: -0.04em;
  --ls-snug: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.08em;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Border radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 28px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --sh-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --sh-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --sh-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.18);
  --sh-primary: 0 6px 20px rgba(79, 70, 229, 0.3);
  --sh-primary-lg: 0 14px 36px rgba(79, 70, 229, 0.38);

  /* Transitions */
  --ease: 200ms ease;
  --ease-slow: 300ms ease;
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Layout */
  --container-max: 1200px;
  --container-px: 1.5rem;
  --nav-h: 64px;

  /* Z-index layers */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 200;
  --z-overlay: 300;
}

/* ── 02  CSS Reset & Base ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Offset anchor jumps so content clears the fixed nav */
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background-color: var(--c-bg);
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--c-text);
}

p {
  color: var(--c-text-3);
  line-height: var(--lh-relaxed);
}

strong {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* ── 03  Typography Utilities ─────────────────────────────────────────── */

/* Inline text link used inside body copy */
.text-link {
  color: var(--c-primary);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease);
}
.text-link:hover {
  border-bottom-color: var(--c-primary);
}

/* ── 04  Layout & Container ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ── 05  Section Shared Styles ────────────────────────────────────────── */

/* Vertical rhythm for every major section */
.section {
  padding-block: var(--sp-32);
}

/* Centred section header block */
.section-header {
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--sp-16);
}

.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-primary-pale);
  padding: 0.3rem 0.875rem;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-4);
}

.section-title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-tight);
}

.section-description {
  font-size: var(--text-lg);
  color: var(--c-text-3);
  line-height: var(--lh-relaxed);
}

/* ── 06  Buttons ──────────────────────────────────────────────────────── */
.btn {
  /* Base shell */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  border-radius: var(--r-lg);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--ease),
    border-color var(--ease),
    color var(--ease),
    box-shadow var(--ease),
    transform var(--ease);
}

/* ── Sizes */
.btn--sm {
  font-size: var(--text-sm);
  padding: 0.5rem 1rem;
  border-radius: var(--r-md);
  gap: 0.375rem;
}
.btn--lg {
  font-size: var(--text-base);
  padding: 0.875rem 1.75rem;
  border-radius: var(--r-xl);
}

/* ── Primary (indigo) */
.btn--primary {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
  box-shadow: var(--sh-primary);
}
.btn--primary:hover {
  background: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  box-shadow: var(--sh-primary-lg);
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--sh-primary);
}

/* ── Ghost (outline on white) */
.btn--ghost {
  background: transparent;
  color: var(--c-text-2);
  border-color: var(--c-border-strong);
}
.btn--ghost:hover {
  background: var(--c-surface);
  border-color: var(--c-text-3);
  color: var(--c-text);
  transform: translateY(-1px);
}
.btn--ghost:active {
  transform: translateY(0);
}

/* ── White (for dark / gradient card backgrounds) */
.btn--white {
  background: #fff;
  color: var(--c-primary);
  border-color: #fff;
  box-shadow: var(--sh-lg);
}
.btn--white:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--sh-xl);
  transform: translateY(-1px);
}
.btn--white:active {
  transform: translateY(0);
}

/* ── Ghost-white (outline on dark backgrounds) */
.btn--ghost-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
}
.btn--ghost-white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}
.btn--ghost-white:active {
  transform: translateY(0);
}

/* ── Icon helpers */
.btn__icon {
  flex-shrink: 0;
}
.btn__icon--right {
  margin-left: 0.125rem;
  transition: transform var(--ease);
}

.btn--ghost:hover .btn__icon--right,
.btn--primary:hover .btn__icon--right,
.btn--ghost-white:hover .btn__icon--right {
  transform: translateX(3px);
}

/* ── Focus ring shared across all variants */
.btn:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
}

/* ── 07  Badge ────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35rem 0.875rem;
  background: rgba(79, 70, 229, 0.07);
  border: 1px solid rgba(79, 70, 229, 0.17);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--sp-5);
}

/* Pulsing status dot */
.badge__dot {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--c-primary);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}

/* ── 08  Navigation ───────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  height: var(--nav-h);

  /* Glassmorphism base — subtle by default */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid transparent;

  transition:
    background-color var(--ease-slow),
    border-color var(--ease-slow),
    box-shadow var(--ease-slow);
}

/* JS adds `.scrolled` after the user has scrolled past 10 px */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--c-border);
  box-shadow: var(--sh-sm);
}

/* Nav flex row */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--sp-6);
}

/* Logo */
.nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.9;
  transition: opacity var(--ease);
}
.nav__logo:hover {
  opacity: 1;
}
.nav__logo img {
  height: 150px;
  width: auto;
  display: block;
}

/* Desktop link list */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-3);
  border-radius: var(--r-md);
  transition:
    color var(--ease),
    background-color var(--ease);
}
.nav__link:hover {
  color: var(--c-text);
  background: var(--c-surface);
}
.nav__link:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

/* Right-side CTA area */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* Hamburger button (hidden on desktop) */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  transition: background-color var(--ease);
}
.nav__burger:hover {
  background: var(--c-surface);
}

.nav__burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition:
    transform var(--ease),
    opacity var(--ease);
}

/* Burger → X animation */
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav__burger:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ── 09  Mobile Menu ──────────────────────────────────────────────────── */
.mobile-menu {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-3) var(--container-px) var(--sp-5);
}

/* The HTML `hidden` attribute already removes the element from flow;
   this is just belt-and-suspenders for JS-toggled visibility */
.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.mobile-menu__link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--c-text-3);
  border-radius: var(--r-lg);
  transition:
    color var(--ease),
    background-color var(--ease);
}
.mobile-menu__link:hover {
  color: var(--c-text);
  background: var(--c-surface);
}

/* CTA variant in mobile menu */
.mobile-menu__link--cta {
  margin-top: var(--sp-2);
  text-align: center;
  background: var(--c-primary);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.mobile-menu__link--cta:hover {
  background: var(--c-primary-dark);
  color: #fff;
}

/* ── 10  Hero Section ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Room for the fixed nav + breathing space */
  padding-top: calc(var(--nav-h) + var(--sp-20));
  padding-bottom: var(--sp-24);
  overflow: hidden;
}

/* ── Background layer */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Subtle dot grid */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 18%,
    rgba(0, 0, 0, 0.55) 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 18%,
    rgba(0, 0, 0, 0.55) 78%,
    transparent 100%
  );
}

/* Colour blobs */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}
.hero__blob--1 {
  width: 680px;
  height: 680px;
  background: radial-gradient(
    ellipse,
    rgba(79, 70, 229, 0.15) 0%,
    transparent 68%
  );
  top: -180px;
  right: -120px;
  animation: blob-drift-a 14s ease-in-out infinite;
}
.hero__blob--2 {
  width: 480px;
  height: 480px;
  background: radial-gradient(
    ellipse,
    rgba(34, 211, 238, 0.12) 0%,
    transparent 68%
  );
  bottom: -80px;
  left: -80px;
  animation: blob-drift-b 18s ease-in-out infinite;
}

/* ── Two-column layout */
.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-16);
}

/* ── Left: copy */
.hero__copy {
  max-width: 580px;
}

.hero__headline {
  font-size: clamp(var(--text-4xl), 5.5vw, var(--text-7xl));
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: 1.04;
  color: var(--c-text);
  margin-bottom: var(--sp-6);
  /* Entrance animation */
  animation: fade-up 0.8s ease both;
  animation-delay: 0.05s;
}

/* Gradient "real actions." span */
.hero__headline-gradient {
  background: linear-gradient(
    130deg,
    var(--c-primary) 0%,
    var(--c-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

.hero__description {
  font-size: var(--text-lg);
  color: var(--c-text-3);
  line-height: var(--lh-relaxed);
  max-width: 500px;
  margin-bottom: var(--sp-8);
  animation: fade-up 0.8s ease both;
  animation-delay: 0.15s;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  animation: fade-up 0.8s ease both;
  animation-delay: 0.25s;
}

/* Trust strip */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
  animation: fade-up 0.8s ease both;
  animation-delay: 0.35s;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-3);
}
.trust-item svg {
  color: var(--c-primary);
  opacity: 0.75;
  flex-shrink: 0;
}

/* ── Right: phone visual */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fade-up 0.9s ease both;
  animation-delay: 0.2s;
}

.hero__phone-wrap {
  position: relative;
  display: inline-flex;
}

/* Ambient glow behind the phone */
.hero__phone-glow {
  position: absolute;
  inset: -64px;
  background: radial-gradient(
    ellipse at center,
    rgba(79, 70, 229, 0.26) 0%,
    rgba(34, 211, 238, 0.13) 45%,
    transparent 70%
  );
  filter: blur(36px);
  border-radius: 50%;
  animation: blob-drift-a 9s ease-in-out infinite;
}

.hero__phone-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  border-radius: var(--r-3xl);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    var(--sh-2xl),
    0 8px 32px rgba(79, 70, 229, 0.18);
  animation: float 7s ease-in-out infinite;
}

/* ── 11  Features Section ─────────────────────────────────────────────── */
.features {
  background: var(--c-surface);
}

/* 3-column grid */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* Individual card */
.feature-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  transition:
    transform var(--ease-slow),
    box-shadow var(--ease-slow),
    border-color var(--ease-slow);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-xl);
  border-color: rgba(79, 70, 229, 0.22);
}

/* Icon container */
.feature-card__icon {
  width: 52px;
  height: 52px;
  background: var(--c-primary-pale);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  margin-bottom: var(--sp-5);
  transition:
    background-color var(--ease),
    color var(--ease),
    transform var(--ease);
}
.feature-card:hover .feature-card__icon {
  background: var(--c-primary);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}

.feature-card__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}

.feature-card__description {
  font-size: var(--text-sm);
  color: var(--c-text-3);
  line-height: var(--lh-relaxed);
}

/* ── 12  How It Works Section ─────────────────────────────────────────── */
.how-it-works {
  background: var(--c-bg);
}

/* 4-column grid of steps */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: var(--sp-16);
}

/* Horizontal connector line spanning the inner steps */
.steps::before {
  content: "";
  position: absolute;
  top: 27px; /* vertically centres on the number bubbles */
  left: calc(100% / 8); /* starts at centre of first bubble */
  right: calc(100% / 8); /* ends at centre of last bubble */
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--c-primary-pale),
    var(--c-primary-light),
    var(--c-secondary-pale)
  );
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--sp-4);
  transition: none;
}

/* Connector div — handled via ::before on parent; hidden per step */
.step__connector {
  display: none;
}

/* Numbered bubble */
.step__number {
  width: 54px;
  height: 54px;
  background: var(--c-bg);
  border: 2px solid var(--c-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  color: var(--c-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-5);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition:
    background-color var(--ease),
    color var(--ease),
    border-color var(--ease);
}
.step:hover .step__number {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

.step__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icon tile */
.step__icon {
  width: 48px;
  height: 48px;
  background: var(--c-primary-pale);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
  transition:
    background-color var(--ease),
    color var(--ease);
}
.step:hover .step__icon {
  background: var(--c-primary);
  color: #fff;
}

.step__title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}

.step__description {
  font-size: var(--text-sm);
  color: var(--c-text-3);
  line-height: var(--lh-relaxed);
}
.step__description strong {
  color: var(--c-text);
}

/* ── 13  Privacy Section ──────────────────────────────────────────────── */
.privacy-section {
  background: var(--c-surface);
}

/* Full-bleed dark gradient card */
.privacy-card {
  position: relative;
  background: linear-gradient(
    140deg,
    var(--c-primary-darker) 0%,
    var(--c-primary-dark) 28%,
    var(--c-primary) 58%,
    #0b6a80 100%
  );
  border-radius: var(--r-3xl);
  padding: var(--sp-24) var(--sp-16);
  overflow: hidden;
  text-align: center;
}

/* Decorative background */
.privacy-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.privacy-card__shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}
.privacy-card__shape--1 {
  width: 540px;
  height: 540px;
  background: rgba(255, 255, 255, 0.06);
  top: -220px;
  right: -60px;
}
.privacy-card__shape--2 {
  width: 360px;
  height: 360px;
  background: rgba(34, 211, 238, 0.12);
  bottom: -80px;
  left: -30px;
}

/* Content layer sits above the blobs */
.privacy-card__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-inline: auto;
}

/* Shield icon */
.privacy-card__icon {
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}

.privacy-card__title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  color: #fff;
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-4);
}

.privacy-card__description {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--lh-relaxed);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}

/* Stats list */
.privacy-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--sp-6);
  row-gap: var(--sp-3);
  margin-bottom: var(--sp-10);
}

.privacy-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.88);
}

.privacy-stat__icon {
  display: flex;
  align-items: center;
  color: var(--c-secondary);
  flex-shrink: 0;
}

/* Override the primary button for dark card context */
.privacy-card .privacy-card__cta.btn--primary {
  background: rgba(255, 255, 255, 0.17);
  border-color: rgba(255, 255, 255, 0.33);
  color: #fff;
  box-shadow: none;
}
.privacy-card .privacy-card__cta.btn--primary:hover {
  background: rgba(255, 255, 255, 0.27);
  box-shadow: none;
}

/* ── 14  FAQ Accordion ────────────────────────────────────────────────── */
.faq {
  background: var(--c-bg);
}

/* Contained list with a single border */
.faq__list {
  max-width: 720px;
  margin-inline: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--c-border);
}
.faq-item:last-child {
  border-bottom: none;
}

/* Question trigger button */
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-align: left;
  gap: var(--sp-4);
  transition:
    background-color var(--ease),
    color var(--ease);
}
.faq-item__question:hover {
  background: var(--c-surface);
  color: var(--c-primary);
}
.faq-item__question[aria-expanded="true"] {
  color: var(--c-primary);
  background: var(--c-primary-pale);
}

/* Chevron icon */
.faq-item__chevron {
  display: flex;
  align-items: center;
  color: var(--c-text-4);
  flex-shrink: 0;
  transition:
    transform var(--ease-slow),
    color var(--ease);
}
.faq-item__question:hover .faq-item__chevron {
  color: var(--c-primary);
}
.faq-item__question[aria-expanded="true"] .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--c-primary);
}

/* Answer panel */
.faq-item__answer {
  padding: 0 var(--sp-6) var(--sp-5);
  background: var(--c-primary-pale);
}
.faq-item__answer[hidden] {
  display: none;
}

.faq-item__answer p {
  font-size: var(--text-sm);
  color: var(--c-text-3);
  line-height: var(--lh-relaxed);
  padding-top: var(--sp-1);
}

.faq-item__question:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

/* ── 15  CTA Section ──────────────────────────────────────────────────── */
.cta-section {
  background: var(--c-surface);
}

.cta-card {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--c-primary) 0%,
    #6366f1 42%,
    var(--c-primary-dark) 100%
  );
  border-radius: var(--r-3xl);
  padding: var(--sp-24) var(--sp-16);
  text-align: center;
  overflow: hidden;
}

.cta-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cta-card__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
}
.cta-card__blob--1 {
  width: 420px;
  height: 420px;
  background: rgba(255, 255, 255, 0.08);
  top: -150px;
  right: -60px;
}
.cta-card__blob--2 {
  width: 300px;
  height: 300px;
  background: rgba(34, 211, 238, 0.14);
  bottom: -70px;
  left: 12%;
}

.cta-card__content {
  position: relative;
  z-index: 1;
  max-width: 580px;
  margin-inline: auto;
}

.cta-card__title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  color: #fff;
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-4);
}

.cta-card__description {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.7);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-10);
}

.cta-card__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

/* ── 16  Footer ───────────────────────────────────────────────────────── */
.site-footer {
  background: var(--c-text); /* near-black #111827 */
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-8);
}

/* Top layout: brand column + nav groups */
.footer__layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-16);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand column */
.footer__brand {
  max-width: 280px;
}

.footer__logo {
  display: inline-block;
  margin-bottom: var(--sp-4);
  opacity: 0.85;
  transition: opacity var(--ease);
}
.footer__logo:hover {
  opacity: 1;
}

/* Invert the logo SVG so it shows white on the dark footer */
.footer__logo img {
  height: 150px;
  width: auto;
  display: block;
}

.footer__tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.45);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-3);
}

.footer__meta {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.28);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

/* Nav groups */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.footer__nav-group {
  display: flex;
  flex-direction: column;
}

.footer__nav-heading {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: var(--sp-4);
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__nav-link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.52);
  transition: color var(--ease);
}
.footer__nav-link:hover {
  color: rgba(255, 255, 255, 0.88);
}
.footer__nav-link:focus-visible {
  outline: 2px solid var(--c-primary-light);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Bottom bar */
.footer__bottom {
  padding-top: var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.footer__copyright {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.32);
}
.footer__copyright .footer__nav-link {
  color: rgba(255, 255, 255, 0.5);
}
.footer__copyright .footer__nav-link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.footer__legal-note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.25);
}
.footer__legal-note .footer__nav-link {
  color: rgba(255, 255, 255, 0.4);
}
.footer__legal-note .footer__nav-link:hover {
  color: rgba(255, 255, 255, 0.75);
}

/* ── 17  Animations & Keyframes ───────────────────────────────────────── */

/* Fade up — used for hero copy entrance */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gentle float — hero phone and glow */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* Organic blob drift A */
@keyframes blob-drift-a {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(28px, -18px) scale(1.06);
  }
  66% {
    transform: translate(-14px, 14px) scale(0.94);
  }
}

/* Organic blob drift B (reversed feel) */
@keyframes blob-drift-b {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-20px, 22px) scale(1.09);
  }
  66% {
    transform: translate(22px, -12px) scale(0.91);
  }
}

/* Badge dot pulse */
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}

/* Scroll-reveal utility (class toggled by IntersectionObserver in script.js) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings */
.reveal:nth-child(2) {
  transition-delay: 0.08s;
}
.reveal:nth-child(3) {
  transition-delay: 0.16s;
}
.reveal:nth-child(4) {
  transition-delay: 0.24s;
}
.reveal:nth-child(5) {
  transition-delay: 0.32s;
}
.reveal:nth-child(6) {
  transition-delay: 0.4s;
}

/* ── 18  Focus & Accessibility ────────────────────────────────────────── */

/* Global fallback focus ring for keyboard users */
:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Forced-colours / high-contrast overrides */
@media (forced-colors: active) {
  .btn--primary {
    border: 2px solid ButtonText;
  }
  .hero__headline-gradient {
    -webkit-text-fill-color: ButtonText;
    background: none;
  }
  .badge {
    border: 1px solid ButtonText;
  }
}

/* ── 19  Reduced Motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__phone-img,
  .hero__blob,
  .hero__phone-glow,
  .badge__dot,
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 20  Responsive — Tablet (≤ 1024 px) ─────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --container-px: 1.25rem;
  }

  /* Features: 2-column */
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero: tighten gap */
  .hero__layout {
    gap: var(--sp-10);
  }
}

/* ── 21  Responsive — Compact (≤ 900 px) ─────────────────────────────── */
@media (max-width: 900px) {
  /* Hero: single column, centred */
  .hero {
    padding-top: calc(var(--nav-h) + var(--sp-12));
    padding-bottom: var(--sp-16);
    min-height: auto;
  }

  .hero__layout {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 600px;
    margin-inline: auto;
    gap: var(--sp-12);
  }

  .hero__copy {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__description {
    max-width: 100%;
  }
  .hero__buttons {
    justify-content: center;
  }
  .hero__trust {
    justify-content: center;
  }

  /* Visual appears above copy on compact */
  .hero__visual {
    order: -1;
  }
  .hero__phone-img {
    max-width: 240px;
  }

  /* How It Works: 2-column, no horizontal connector */
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
  }
  .steps::before {
    display: none;
  }

  /* Align steps left on compact */
  .step {
    flex-direction: row;
    text-align: left;
    gap: var(--sp-4);
    align-items: flex-start;
  }
  .step__content {
    align-items: flex-start;
  }
  .step__number {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  /* Privacy / CTA cards */
  .privacy-card,
  .cta-card {
    padding: var(--sp-16) var(--sp-8);
  }

  /* Footer: single column */
  .footer__layout {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .footer__brand {
    max-width: 100%;
  }
}

/* ── 22  Responsive — Mobile (≤ 640 px) ──────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --container-px: 1rem;
  }

  .section {
    padding-block: var(--sp-20);
  }

  /* Nav: show burger, hide desktop links + CTA */
  .nav__links,
  .nav__actions {
    display: none;
  }
  .nav__burger {
    display: flex;
  }

  /* Hero */
  .hero__headline {
    font-size: clamp(var(--text-3xl), 9vw, var(--text-4xl));
  }
  .hero__phone-img {
    max-width: 200px;
  }

  .hero__trust {
    row-gap: var(--sp-3);
  }
  .trust-item {
    font-size: var(--text-xs);
  }

  /* Section headers */
  .section-title {
    font-size: var(--text-3xl);
  }
  .section-description {
    font-size: var(--text-base);
  }

  /* Features: single column */
  .features__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* How It Works: single column */
  .steps {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* FAQ: tighter padding */
  .faq-item__question {
    padding: var(--sp-4) var(--sp-4);
    font-size: var(--text-sm);
  }
  .faq-item__answer {
    padding: 0 var(--sp-4) var(--sp-4);
  }

  /* Privacy / CTA: smaller radius on narrow screens */
  .privacy-card,
  .cta-card {
    border-radius: var(--r-2xl);
    padding: var(--sp-12) var(--sp-5);
  }
  .privacy-card__title,
  .cta-card__title {
    font-size: var(--text-3xl);
  }
  .privacy-card__description,
  .cta-card__description {
    font-size: var(--text-base);
  }

  /* Stack hero + CTA buttons full-width */
  .hero__buttons,
  .cta-card__buttons {
    flex-direction: column;
    width: 100%;
  }
  .hero__buttons .btn,
  .cta-card__buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer nav: 2 columns */
  .footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  /* Badge: slightly smaller text */
  .badge {
    font-size: 0.6875rem;
  }
}

/* ── 23  Responsive — XSmall (≤ 380 px) ──────────────────────────────── */
@media (max-width: 380px) {
  .hero__headline {
    font-size: var(--text-3xl);
  }

  /* Footer nav single column */
  .footer__nav {
    grid-template-columns: 1fr;
  }

  /* Privacy stats stack vertically */
  .privacy-stats {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
  }
}

/* ============================================================
   PRODUCTION ADDITIONS
   ============================================================
   24  Skip Navigation Link
   25  Active Nav State (aria-current)
   26  Support Page — Hero
   27  Support Page — Two-Column Grid
   28  Support Page — Contact Card
   29  Support Page — Check List
   30  Support Page — Requirements List
   31  Support Page — Permissions List
   32  Support Page — Bottom CTA
   33  Privacy Page — Hero (bridges shared nav)
   34  Privacy Page — Callout Boxes
   35  Privacy Page — Permission Table
   36  Privacy Page — Pledge Banner
   37  Privacy Page — No-Grid
   38  Privacy Page — Contact Block
   39  404 Page
   ============================================================ */

/* ── 24  Skip Navigation Link ─────────────────────────────────────────── */
/* Visually hidden until focused — WCAG 2.4.1 bypass block              */
.skip-link {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  padding: 0.5rem 1rem;
  background: var(--c-primary);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  border-radius: var(--r-md);
  text-decoration: none;
  z-index: 9999;
  /* Hidden off-screen until focused */
  transform: translateY(-200%);
  transition: transform var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ── 25  Active Nav State ─────────────────────────────────────────────── */
/* Applied via aria-current="page" on the active page nav link           */
.nav__link[aria-current="page"] {
  color: var(--c-primary);
  background: var(--c-primary-pale);
}

/* ── 26  Support Page — Hero ──────────────────────────────────────────── */
.support-hero {
  padding-top: calc(var(--nav-h) + var(--sp-20));
  padding-bottom: var(--sp-20);
  background: var(--c-surface);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.support-hero__glow {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(79, 70, 229, 0.09) 0%,
    transparent 68%
  );
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(60px);
  pointer-events: none;
}

.support-hero__content {
  position: relative;
  z-index: 1;
  max-width: 580px;
  margin-inline: auto;
}

.support-hero__title {
  font-size: clamp(var(--text-4xl), 5.5vw, var(--text-6xl));
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-text);
  margin-bottom: var(--sp-4);
}

.support-hero__desc {
  font-size: var(--text-lg);
  color: var(--c-text-3);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-8);
}

.support-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* ── 27  Support Page — Two-Column Grid ───────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 640px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* ── 28  Support Page — Contact Card ─────────────────────────────────── */
.contact-card {
  text-align: center;
  padding: var(--sp-12) var(--sp-8);
  max-width: 620px;
  margin-inline: auto;
}

/* ── 29  Support Page — Check List ───────────────────────────────────── */
.check-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.check-list__item {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--c-text-3);
  line-height: var(--lh-relaxed);
}

.check-list__dot {
  color: var(--c-primary);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

/* ── 30  Support Page — Requirements List ────────────────────────────── */
.req-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--sp-4);
}

.req-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.req-row:last-child {
  border-bottom: none;
}

.req-row dt {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-3);
  flex-shrink: 0;
}

.req-row dd {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  text-align: right;
}

/* Positive signal — "Not declared" */
.req-row dd.ok {
  color: #059669;
}

/* ── 31  Support Page — Permissions List ─────────────────────────────── */
.perm-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.perm-item {
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.perm-code {
  display: inline-block;
  font-family: "SF Mono", "Fira Code", "Courier New", monospace;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  background: var(--c-primary-pale);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-bottom: var(--sp-2);
  word-break: break-all;
}

.perm-desc {
  font-size: var(--text-xs);
  color: var(--c-text-3);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── 32  Support Page — Bottom CTA ───────────────────────────────────── */
.support-cta {
  text-align: center;
  padding: var(--sp-16) 0 var(--sp-8);
}

.support-cta__meta {
  font-size: var(--text-sm);
  color: var(--c-text-4);
  margin-bottom: var(--sp-6);
}

.support-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* Mobile collapses support buttons */
@media (max-width: 480px) {
  .support-hero__actions,
  .support-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .support-hero__actions .btn,
  .support-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .contact-card {
    padding: var(--sp-8) var(--sp-4);
  }
}

/* ── 33  Privacy Page — Hero ──────────────────────────────────────────── */
/* Bridge the fixed shared nav; hero keeps the dark gradient identity     */
.pp-hero {
  background: linear-gradient(140deg, #3730a3 0%, #4f46e5 55%, #6366f1 100%);
  padding: clamp(3rem, 8vw, 5.5rem) 1.5rem clamp(2.75rem, 7vw, 5rem);
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pp-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 160%;
  height: 180%;
  background: radial-gradient(
    ellipse at 65% 35%,
    rgba(34, 211, 238, 0.18) 0%,
    transparent 58%
  );
  pointer-events: none;
}
.pp-hero::after {
  content: "";
  position: absolute;
  bottom: -20%;
  right: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.pp-hero__icon-wrap {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
}
.pp-hero h1 {
  color: #fff;
  position: relative;
  z-index: 1;
  margin-bottom: 0.7rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
}
.pp-hero__sub {
  position: relative;
  z-index: 1;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  margin-bottom: 2.25rem;
}
.pp-hero__badges {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── 34  Privacy Page — Callout Boxes ────────────────────────────────── */
.pp-callout {
  border-radius: var(--r-sm, 6px);
  padding: 1rem 1.25rem;
  margin: 1.1rem 0;
  border-left-width: 4px;
  border-left-style: solid;
}
.pp-callout p {
  font-size: 0.9375rem;
}
.pp-callout--purple {
  background: #eef2ff;
  border-left-color: #4f46e5;
}
.pp-callout--purple p {
  color: #3730a3;
}
.pp-callout--green {
  background: #f0fdf4;
  border-left-color: #22c55e;
}
.pp-callout--green p {
  color: #166534;
}
.pp-callout--cyan {
  background: #ecfeff;
  border-left-color: #22d3ee;
}
.pp-callout--cyan p {
  color: #0e7490;
}
.pp-callout--amber {
  background: #fffbeb;
  border-left-color: #f59e0b;
}
.pp-callout--amber p {
  color: #92400e;
}

/* ── 35  Privacy Page — Permission Table ─────────────────────────────── */
.pp-overflow-x {
  overflow-x: auto;
  margin: 1rem 0;
}
.pp-perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.pp-perm-table th {
  background: #f3f4f6;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 2px solid #e5e7eb;
}
.pp-perm-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  vertical-align: top;
}
.pp-perm-table tr:last-child td {
  border-bottom: none;
}
.pp-perm-table tbody tr:hover td {
  background: #f9fafb;
}

/* ── 36  Privacy Page — Pledge Banner ────────────────────────────────── */
.pp-pledge {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%);
  border: 1px solid #c7d2fe;
  border-radius: var(--r-xl, 16px);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
}
.pp-pledge__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4f46e5, #22d3ee);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-pledge__icon svg {
  width: 28px;
  height: 28px;
}
.pp-pledge__body h3 {
  color: #3730a3;
  margin-top: 0;
}
.pp-pledge__body p {
  color: #3730a3;
  font-size: 0.9375rem;
}

@media (max-width: 620px) {
  .pp-pledge {
    flex-direction: column;
    padding: 1.5rem;
  }
}

/* ── 37  Privacy Page — No-Grid ──────────────────────────────────────── */
.pp-no-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.625rem;
  margin: 1rem 0;
}
.pp-no-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--r-sm, 6px);
}
.pp-no-item__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-no-item__check svg {
  width: 11px;
  height: 11px;
}
.pp-no-item span {
  font-size: 0.84rem;
  font-weight: 500;
  color: #166534;
}

@media (max-width: 400px) {
  .pp-no-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 38  Privacy Page — Contact Block ────────────────────────────────── */
.pp-contact {
  background: linear-gradient(140deg, #3730a3 0%, #4f46e5 55%, #6366f1 100%);
  border-radius: var(--r-3xl, 28px);
  padding: 3rem 2rem 2.75rem;
  text-align: center;
  margin-top: 2.5rem;
  position: relative;
  overflow: hidden;
}
.pp-contact::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 160%;
  background: radial-gradient(
    ellipse,
    rgba(34, 211, 238, 0.16) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.pp-contact h2 {
  color: #fff;
  position: relative;
  z-index: 1;
  margin-bottom: 0.6rem;
}
.pp-contact > p {
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  z-index: 1;
  margin-bottom: 1.75rem;
}
.pp-contact__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  padding: 0.8rem 1.75rem;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
  font-family: var(--font);
  cursor: pointer;
}
.pp-contact__btn:hover {
  background: rgba(255, 255, 255, 0.26);
  text-decoration: none;
}
.pp-contact__note {
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 620px) {
  .pp-contact {
    padding: 2.25rem 1.25rem 2rem;
  }
}

/* ── 39  404 Page ─────────────────────────────────────────────────────── */
.page-404 {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-16) var(--container-px);
  /* Reserve space for fixed nav */
  padding-top: calc(var(--nav-h) + var(--sp-16));
}
.page-404__code {
  font-size: clamp(5rem, 20vw, 10rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  background: linear-gradient(
    130deg,
    var(--c-primary) 0%,
    var(--c-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--sp-4);
}
.page-404__title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}
.page-404__desc {
  font-size: var(--text-lg);
  color: var(--c-text-3);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}
.page-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}