/* ============================================================ SyncMate Support Site — Global Stylesheet Mobile-first responsive design ── Design System Overview ────────────────────────────────── BREAKPOINTS Base (0 – 374px) Smallest phone fallback 375px+ Standard mobile baseline 768px+ Tablet overrides (2-col grids, wider gaps) 1024px+ Desktop overrides (3-col grids, max-width containers expand, hero two-column grid) COLOUR PALETTE (CSS custom properties) --bg #0f1115 Page background (near-black) --card #151821 Card/surface background --text #e9ecf1 Primary text (high contrast on --bg) --muted #a8b3c4 Secondary / de-emphasised text --accent #ff3b30 Red accent (iOS-style destructive / brand) --link #8ab4ff Interactive links and focus ring colour SPACING SCALE --space-xs 0.25rem (4px) Micro gap — icon-to-text, tight rows --space-sm 0.50rem (8px) Small gap — paragraph margins, list items --space-md 1.00rem (16px) Default gap — card padding (mobile), p margin --space-lg 1.50rem (24px) Medium gap — card padding (tablet+), nav gap --space-xl 2.00rem (32px) Large gap — section padding, hero bottom --space-2xl 3.00rem (48px) Extra-large — desktop section padding BORDER RADII --radius-sm 8px Minor elements (focus ring, skip link) --radius-md 12px Accordion summary, details-body --radius-lg 16px Cards, hero-icon (mobile), hero-screenshot --radius-xl 20px Hero-icon at tablet+ TYPOGRAPHY SCALE (fluid via clamp) h1 clamp(2rem, 8vw, 3.5rem) 32px → 56px h2 clamp(1.25rem, 4vw + 0.25rem, 2rem) 20px → 32px h3 clamp(1.0625rem, 2vw + 0.5rem, 1.375rem) 17px → 22px h4 clamp(1rem, 1.5vw + 0.5rem, 1.125rem) 16px → 18px h5/h6 clamp(0.875rem, 1vw + 0.5rem, 1rem) 14px → 16px body clamp(1rem, 1vw + 0.75rem, 1.125rem) 16px → 18px hero-title clamp(1.75rem, 8vw, 3.5rem) 28px → 56px hero-tagline clamp(1rem, 1vw + 0.625rem, 1.125rem) 16px → 18px feature-card p clamp(1rem, 0.5vw + 0.75rem, 1.0625rem) 16px → 17px footer/muted clamp(0.8125rem, 0.3vw + 0.65rem, 0.9375rem) 13px → 15px inline code 0.875em (relative) — FAQ
 elements

   GRID PATTERNS
     .features-grid   1-col mobile → 2-col tablet (768px) → 3-col desktop (1024px)
     .phase-grid      1-col below 375px; auto-fill minmax(160px,1fr) at 375px+
     .hero-container  stacked → two-column grid at 1024px (1fr 1fr)
     .container       max-width: 860px, centred
     .features-container  max-width: 1100px, centred

   DESIGN PATTERNS
     Focus ring   ring-2: 2px solid outline, 3px offset, --focus-ring-color (#8ab4ff)
                  Applied to: a, .nav-brand, .nav-links a, details summary, footer a
                  Skip link uses white ring on --accent background
     Touch target min-height: 44px (--touch-target-min) on .nav-brand, .nav-links a,
                  details summary — satisfies WCAG 2.1 AA SC 2.5.5
     Card hover   translateY(-2px) + depth shadow + border-color highlight
     Accordion    / pattern; +/- icon via ::after pseudo-element
     Reduced motion  @media (prefers-reduced-motion: reduce) disables all transitions
                     and card transform

   Base breakpoints: 375px (mobile), 768px (tablet), 1024px (desktop)
   ============================================================ */

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
  /* Colour palette */
  --bg: #0f1115;
  --card: #151821;
  --text: #e9ecf1;
  --muted: #a8b3c4;
  --accent: #ff3b30;
  --link: #8ab4ff;

  /* ── Spacing scale ──────────────────────────────────────── */
  /* Base values (mobile-first, 375px baseline)               */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */

  /* ── Border radii ───────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ── Focus ring (WCAG 2.1 AA — keyboard navigation) ─────── */
  /* ring-2 pattern: 2px solid outline with 3px offset.        */
  /* #8ab4ff provides sufficient contrast on --bg (#0f1115).   */
  --focus-ring-color: #8ab4ff;  /* matches --link */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* ── Minimum touch target (WCAG 2.5.5) ─────────────────── */
  --touch-target-min: 44px;
}

/* ============================================================
   Box-model reset
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================================
   Prevent horizontal scroll on all viewports (Safari iOS)
   Ensures no section or element can cause page-level overflow.
   ============================================================ */
html,
body {
  overflow-x: hidden;
}

/* ============================================================
   Base (mobile-first — 375px and up)
   All declarations here apply from the smallest viewport.
   Overrides for larger viewports follow in @media blocks.
   ============================================================ */

/* Body — fluid base type scale 16px → 18px
   Minimum of 1rem (16px) satisfies WCAG mobile readability requirement. */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem); /* 16px → 18px */
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  /* Prevent long URLs / words from causing horizontal overflow on mobile */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Fluid Headings ─────────────────────────────────────────
   Pattern: clamp(min, preferred, max)
   h1 follows the project spec: clamp(3rem, 8vw, 5rem)
   ─────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(2rem, 8vw, 3.5rem); /* 32px → 56px; peaks at ~44px on 375px screen */
  margin: 0 0 var(--space-md);
  line-height: 1.1;
  font-weight: 800;
}

h2 {
  font-size: clamp(1.25rem, 4vw + 0.25rem, 2rem); /* 20px → 32px */
  margin: var(--space-lg) 0 var(--space-sm);
  line-height: 1.2;
  font-weight: 700;
}

h3 {
  font-size: clamp(1.0625rem, 2vw + 0.5rem, 1.375rem); /* 17px → 22px */
  margin: var(--space-md) 0 var(--space-xs);
  line-height: 1.3;
  font-weight: 600;
}

h4 {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem); /* 16px → 18px */
  margin: var(--space-sm) 0 var(--space-xs);
  line-height: 1.4;
  font-weight: 600;
}

h5, h6 {
  font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); /* 14px → 16px */
  margin: var(--space-sm) 0 var(--space-xs);
  line-height: 1.4;
  font-weight: 600;
}

p {
  margin: var(--space-sm) 0;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s, text-decoration-color 0.2s;
}

a:hover,
a:focus-visible {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(233, 236, 241, 0.4);
  text-underline-offset: 3px;
}

/* ring-2 focus pattern — WCAG 2.1 AA visible keyboard indicator */
a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

/* ============================================================
   Accessibility: .sr-only utility + skip link
   .sr-only — visually hidden but announced by screen readers
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: revealed on focus for keyboard users.
   Both :focus and :focus-visible are listed for maximum
   assistive technology compatibility (:focus triggers in
   screen readers that don't dispatch :focus-visible).     */
.sr-only:focus,
.sr-only:focus-visible {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  width: auto;
  height: auto;
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  z-index: 1000;
  /* Explicit white ring so skip link is visible against accent bg */
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ============================================================
   Layout — .container
   Mobile:  16px side padding (var(--space-md))
   Tablet:  24px side padding (var(--space-lg))
   Desktop: 32px side padding (var(--space-xl))
   ============================================================ */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md); /* 24px top, 16px sides on mobile */
}

/* ── 768px breakpoint: more breathing room ────────────────── */
@media (min-width: 768px) {
  .container {
    padding: var(--space-xl) var(--space-lg); /* 32px top, 24px sides */
  }
}

/* ── 1024px breakpoint: generous desktop padding ─────────── */
@media (min-width: 1024px) {
  .container {
    padding: var(--space-xl) var(--space-xl); /* 32px all sides */
  }
}

/* ============================================================
   Navigation
   ============================================================ */
nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  /* Allow nav to wrap on very small viewports (< 360px) */
  flex-wrap: wrap;
}

/* Nav brand — fluid 16px → 20px
   display: inline-flex + min-height = 44px touch target (WCAG 2.5.5) */
.nav-brand {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min); /* 44px touch target */
}

/* ring-2 focus for nav brand */
.nav-brand:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;   /* prevents overflow on very narrow viewports */
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── 375px: comfortable nav gap for most phones ──────────── */
@media (min-width: 375px) {
  .nav-links {
    gap: var(--space-md);
  }
}

/* ── 768px: wider nav gap for tablet and above ───────────── */
@media (min-width: 768px) {
  .nav-links {
    gap: var(--space-lg);
  }
}

/* Nav link text — fluid 14px → 15px
   display: inline-flex + min-height = 44px touch target (WCAG 2.5.5)
   14px minimum chosen for compact iOS-native nav aesthetic; body text
   (not navigation chrome) carries the 16px minimum requirement.       */
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: clamp(0.875rem, 0.5vw + 0.6rem, 0.9375rem); /* 14px → 15px */
  transition: color 0.2s;
  /* Touch target: minimum 44×44px per WCAG 2.1 AA SC 2.5.5 */
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min); /* 44px */
  padding: 0 var(--space-xs);          /* small horizontal padding widens hit area */
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  color: var(--text);
}

/* ring-2 focus for nav links — overrides base a:focus-visible
   with a slightly larger border-radius for nav context        */
.nav-links a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  /* Ensure long URLs and words in legal/FAQ pages don't cause
     horizontal overflow on narrow mobile viewports              */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* More padding on tablet and above */
@media (min-width: 768px) {
  .card {
    padding: var(--space-lg);
    margin: var(--space-md) 0;
  }
}

/* Card hover — subtle lift with depth shadow and border highlight */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Touch active state — press-down feedback on tap */
.card:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition-duration: 0.1s;
}

/* ============================================================
   Hero Section
   Mobile:  stacked single-column layout
   Desktop: two-column grid at 1024px+
   ============================================================ */
.hero {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-container {
  padding-bottom: var(--space-xl);
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap; /* stack icon + text on very narrow viewports */
}

/* App icon — 64px base, grows on wider screens */
.hero-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  object-fit: cover;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0; /* allow flex child to shrink below intrinsic content width */
}

/* Hero h1 — fluid 28px → 56px, matching h1 scale */
.hero-title {
  font-size: clamp(1.75rem, 8vw, 3.5rem);
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
}

/* Hero tagline — fluid 16px → 18px */
.hero-tagline {
  font-size: clamp(1rem, 1vw + 0.625rem, 1.125rem);
  color: var(--muted);
  margin: 0;
}

/* Hero screenshot placeholder */
.hero-screenshot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  background: var(--card);
  margin: 0;
}

/* Label inside screenshot placeholder — fluid 12px → 14px */
.hero-screenshot-label {
  font-size: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── 768px: larger icon and taller screenshot ─────────────── */
@media (min-width: 768px) {
  .hero-icon {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-xl);
  }

  .hero-brand {
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
  }

  .hero-screenshot {
    min-height: 300px;
  }
}

/* ── 1024px: two-column hero grid ─────────────────────────── */
@media (min-width: 1024px) {
  .hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-2xl);
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  .hero-brand {
    margin-bottom: 0;
  }

  .hero-icon {
    width: 96px;
    height: 96px;
  }

  .hero-screenshot {
    min-height: 360px;
  }
}

/* ============================================================
   Feature Highlights Section
   Mobile:  single-column stack
   Tablet:  single-column (cards are wide enough)
   Desktop: 3-column grid at 1024px+
   ============================================================ */
.features {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.features-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

@media (min-width: 768px) {
  .features-container {
    padding: var(--space-xl) var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .features-container {
    padding: var(--space-2xl) var(--space-xl);
  }
}

/* Grid: single column by default, 2-column on tablet, 3-column on desktop */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* ── 768px: two-column feature grid ──────────────────────── */
@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

/* Feature cards — extend base .card with flex column layout */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Feature icon — emoji placeholder, fluid 32px → 40px */
.feature-icon {
  font-size: clamp(2rem, 3vw + 0.5rem, 2.5rem);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

/* Feature card heading — inherits h3 scale */
.feature-card h3 {
  margin: 0 0 var(--space-xs);
  color: var(--text);
}

/* Feature card body text — minimum 16px on mobile (WCAG readability) */
.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 0.5vw + 0.75rem, 1.0625rem); /* 16px → 17px */
  line-height: 1.65;
}

/* ============================================================
   App Store Download CTA Section
   Mobile-first, centered layout
   ============================================================ */
.cta {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  gap: var(--space-md);
}

/* CTA heading — inherits h2 scale */
.cta-heading {
  margin: 0;
  color: var(--text);
}

/* Subtext — fluid 16px → 17px */
.cta-subtext {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 0.5vw + 0.75rem, 1.0625rem);
}

/* App Store button — pill-shaped, accent background
   min-height / min-width ensure WCAG 2.5.5 44px touch target */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0 var(--space-xl);
  min-height: var(--touch-target-min);   /* 44px — WCAG 2.5.5 */
  min-width: 200px;
  background: var(--text);
  color: var(--bg);
  font-size: clamp(1rem, 0.5vw + 0.75rem, 1.0625rem); /* 16px → 17px */
  font-weight: 600;
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  /* Prevent text underline from base a:hover rule */
  text-decoration: none;
}

/* Hover — accent color background per task spec (#ff3b30) */
.cta-button:hover {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 59, 48, 0.35);
}

/* Active / press-down state */
.cta-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.25);
  transition-duration: 0.08s;
}

/* ring-2 focus pattern — WCAG 2.1 AA keyboard navigation */
.cta-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xl);
  text-decoration: none;
}

/* Apple logo icon inside button */
.cta-button-icon {
  flex-shrink: 0;
}

/* ── Reduced motion: disable hover lift on CTA button ─────── */
@media (prefers-reduced-motion: reduce) {
  .cta-button:hover {
    transform: none;
    box-shadow: none;
  }

  .cta-button:active {
    transform: none;
  }
}

/* ============================================================
   FAQ Accordion — /
   ============================================================ */
details {
  margin: var(--space-sm) 0;
  /* Prevent accordion from exceeding viewport width */
  min-width: 0;
}

/* Summary row — fluid 16px
   min-height: 44px ensures WCAG 2.5.5 touch target compliance
   Base padding uses var(--space-md) on both axes for narrowest
   phones (<375px); 375px+ restores the larger horizontal padding. */
details summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-md);             /* 16px all sides on < 375px */
  min-height: var(--touch-target-min); /* 44px touch target */
  background: var(--card);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s;
  user-select: none;
  -webkit-user-select: none;
  /* Allow long question text to wrap on narrow viewports */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Remove native disclosure marker */
details summary::-webkit-details-marker {
  display: none;
}

details summary::-moz-list-bullet {
  display: none;
}

/* +/− icon */
details summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: var(--space-md);
  line-height: 1;
  transition: color 0.2s, transform 0.2s ease;
  display: inline-block; /* enables transform */
}

details[open] summary {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: #1a1f2b;
}

details[open] summary::after {
  content: "\2212";
  color: var(--link);
}

details summary:hover,
details summary:focus-visible {
  background: #1a1f2b;
}

details summary:hover::after {
  color: var(--text);
}

/* Touch active state — press-down feedback */
details summary:active {
  background: #1e2330;
  transition-duration: 0.05s;
}

/* ring-2 focus for accordion summary elements */
details summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Accordion body
   Base padding uses var(--space-md) on horizontal for narrowest phones
   (< 375px); 375px+ restores var(--space-lg) horizontal via media query. */
.details-body {
  background: var(--card);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-md) var(--space-md) var(--space-lg); /* < 375px */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 375px: restore comfortable accordion padding for standard phones ── */
@media (min-width: 375px) {
  details summary {
    padding: var(--space-md) var(--space-lg);
  }

  .details-body {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }
}

.details-body p:first-child {
  margin-top: 0;
}

.details-body p:last-child {
  margin-bottom: 0;
}

.details-body ol,
.details-body ul {
  margin: var(--space-sm) 0;
  padding-left: var(--space-lg);
}

.details-body li {
  margin: var(--space-xs) 0;
}

/* Inline code elements (used in FAQ answers) */
.details-body code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace;
  font-size: 0.875em; /* relative to parent — stays readable */
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: var(--link);
  word-break: break-all; /* prevent long code strings from overflowing */
}

/* ============================================================
   Phase Grid (six-phase cycle breakdown)
   ============================================================ */
.phase-grid {
  display: grid;
  /* Base: single column for very small screens (< 375px) */
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

/* ── 375px: two-column phase grid for standard phones and up ─ */
@media (min-width: 375px) {
  .phase-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.phase-item {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: var(--space-md);
}

/* Phase item label — fluid 14px → 15px */
.phase-item strong {
  display: block;
  font-size: clamp(0.875rem, 0.3vw + 0.75rem, 0.9375rem);
  margin-bottom: var(--space-xs);
  color: var(--text);
}

/* Phase item description — fluid 13px → 14px
   Compact grid cells — slightly below 16px is acceptable for
   dense data grids where context is clear from surrounding labels. */
.phase-item span {
  font-size: clamp(0.8125rem, 0.3vw + 0.7rem, 0.875rem);
  color: var(--muted);
  line-height: 1.5;
}

/* ============================================================
   Note box (informational callout)
   ============================================================ */
.note-box {
  background: rgba(138, 180, 255, 0.08);
  border-left: 3px solid var(--link);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  font-size: clamp(0.875rem, 0.3vw + 0.7rem, 0.9375rem); /* 14px → 15px */
  color: var(--muted);
}

/* ============================================================
   FAQ section label (category divider)
   ============================================================ */
.faq-section-label {
  font-size: clamp(0.6875rem, 0.2vw + 0.55rem, 0.75rem); /* 11px → 12px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--space-xl) 0 var(--space-sm);
}

/* ============================================================
   Footer
   ============================================================ */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: var(--space-2xl);
}

footer .container {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  color: var(--muted);
  font-size: clamp(0.8125rem, 0.3vw + 0.65rem, 0.9375rem); /* 13px → 15px */
}

/* Footer layout: links row + copyright stacked on mobile,
   row with space-between on tablet and above               */
.footer-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .footer-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }
}

/* Footer links group — inline, wraps on small screens */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

/* Copyright line — no extra margin */
.footer-copy {
  margin: 0;
}

footer a {
  color: var(--muted);
}

footer a:hover,
footer a:focus-visible {
  color: var(--text);
}

/* ring-2 focus for footer links — explicit rule ensures the ring
   is clearly visible against the footer background colour        */
footer a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

/* ============================================================
   Accessibility: prefers-reduced-motion
   Disables all transitions and transforms for users who have
   requested reduced motion in their OS / browser settings.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Disable card lift */
  .card:hover {
    transform: none;
  }

  /* Disable summary icon transform */
  details summary::after {
    transition: none;
  }
}

/* ============================================================
   375px baseline override block
   Micro-adjustments for the smallest common phone width.
   Uses min-width so styles cascade upward to tablet/desktop.
   Nav gap and phase-grid overrides for 375px are co-located
   with their respective rule groups above for clarity.
   ============================================================ */

/* ============================================================
   @media print — clean, readable output for printed pages
   Strategy:
     - Force white background with black text throughout
     - Hide chrome: navigation, footer, interactive controls
     - Remove decorative shadows and hover transforms
     - Prevent cards/accordions from splitting across page breaks
     - Expand  accordions so content is visible in print
     - Show full URLs for links so printed text remains useful
   ============================================================ */
@media print {
  /* ── Page setup ──────────────────────────────────────────── */
  @page {
    margin: 1.5cm 2cm;
  }

  /* ── Reset backgrounds to white, text to black ───────────── */
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* ── Override CSS custom properties for print ────────────── */
  :root {
    --bg:   #fff;
    --card: #fff;
    --text: #000;
    --muted: #444;
    --link:  #000;
  }

  /* ── Hide elements that are not useful on paper ─────────── */
  nav,
  footer,
  .sr-only,
  .hero-screenshot,
  .card:hover,
  details summary::after {
    display: none !important;
  }

  /* ── Keep the hero brand (app name + icon) visible ───────── */
  .hero-brand {
    display: flex !important;
  }

  .hero-icon {
    display: block !important;
  }

  /* ── Reset hero to single-column for print ───────────────── */
  .hero-container {
    display: block !important;
    padding: 0 !important;
  }

  /* ── Typography: use slightly tighter print sizes ────────── */
  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  h1 {
    font-size: 22pt;
    page-break-after: avoid;
  }

  h2 {
    font-size: 16pt;
    page-break-after: avoid;
  }

  h3 {
    font-size: 13pt;
    page-break-after: avoid;
  }

  h4, h5, h6 {
    font-size: 11pt;
    page-break-after: avoid;
  }

  /* ── Cards: keep each card on one page if possible ───────── */
  .card,
  .feature-card,
  .phase-item,
  .note-box,
  details {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    margin-bottom: 0.5cm;
  }

  /* ── Accordion: expand all  for print ───────────── */
  details {
    display: block !important;
  }

  details summary {
    cursor: default;
    background: #f5f5f5 !important;
    color: #000 !important;
    font-weight: 700;
    padding: 6pt 10pt;
    page-break-after: avoid;
  }

  .details-body {
    display: block !important;
    padding: 6pt 10pt 10pt;
    border-top: 1px solid #ccc !important;
    background: #fff !important;
  }

  /* ── Feature grid: 2-column for print (fits A4/letter) ───── */
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4cm !important;
  }

  /* ── Phase grid: 2-column for print ─────────────────────── */
  .phase-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.3cm !important;
  }

  /* ── Container: remove max-width constraint for print ─────── */
  .container,
  .features-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ── Links: append URL after link text ──────────────────── */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555 !important;
  }

  /* Suppress URL display for nav-brand and same-page anchors */
  .nav-brand::after,
  a[href^="#"]::after {
    content: "" !important;
  }

  /* ── Note boxes: simple left-border callout ──────────────── */
  .note-box {
    border-left: 3px solid #000 !important;
    background: #f9f9f9 !important;
    padding: 6pt 10pt !important;
  }

  /* ── FAQ section labels ──────────────────────────────────── */
  .faq-section-label {
    font-weight: 700;
    font-size: 9pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #444 !important;
    margin-top: 1cm;
    page-break-after: avoid;
  }

  /* ── Suppress transitions and transforms ────────────────── */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Content page utilities
   Used on privacy.html, terms.html, and faq.html to reduce
   inline styles in the markup.
   ============================================================ */

/* Card heading — removes the default top margin so the heading
   sits flush at the top of the card (replaces style="margin-top:0") */
.card-heading {
  margin-top: 0;
}

/* Date / last-updated line and other page-level meta text.
   Used for: "Last Updated" dates on policy pages, intro text on FAQ. */
.page-meta {
  color: var(--muted);
  margin-top: 0;
  margin-bottom: var(--space-md); /* 16px — comfortable spacing before first card */
  font-size: clamp(0.8125rem, 0.3vw + 0.65rem, 0.9375rem); /* matches footer scale */
}

/* Content sub-heading inside card body — h3 used as section divider
   replaces inline style="font-size:1rem; margin-top:...; margin-bottom:..." */
.content-subheading {
  font-size: 1rem;           /* 16px — matches body minimum */
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text);
}

/* First content-subheading inside a card — no extra top margin */
.content-subheading--first {
  margin-top: 0;
}

/* Warning / accent-bordered card (Medical Disclaimer)
   replaces inline style="border-left: 4px solid var(--accent, ...)" */
.card--accent-border {
  border-left: 4px solid var(--accent);
}

/* ============================================================
   End of stylesheet
   Breakpoint summary:
     Base (0 – 374px) : Smallest phone fallback
     375px+           : Standard mobile baseline
     768px+           : Tablet overrides (2-col features-grid, wider gaps)
     1024px+          : Desktop overrides (3-col features-grid, hero 2-col)
     print            : @media print — white bg, black text, expanded
                        accordions, 2-col grids, page-break-inside: avoid

   Accessibility summary (WCAG 2.1 AA):
     Focus indicators : ring-2 pattern (--focus-ring-width: 2px,
                        --focus-ring-offset: 3px) via CSS variables.
                        Applied to: a, .nav-brand, .nav-links a,
                        details summary, footer a.
                        Skip link uses white ring on accent bg.
     Touch targets    : min-height: var(--touch-target-min) = 44px
                        on .nav-brand, .nav-links a, details summary
                        (WCAG SC 2.5.5 — Target Size).
     Screen readers   : .sr-only utility hides content visually.
                        Skip link on all pages reveals on :focus /
                        :focus-visible for both AT and keyboard nav.
   ============================================================ */