/* ===========================================================
   PlainMind — landing page
   Light + dark with JS-driven [data-theme] override.
   =========================================================== */

/* -----------------------------------------------------------
   Light tokens (default)
   ----------------------------------------------------------- */
:root,
:root[data-theme="light"] {
  /* Brand palette */
  --warm-cream: #F7F3EC;
  --warm-cream-soft: #FBF8F2;
  --graphite: #2C3136;
  --mist-teal: #7BAFB0;
  --mist-teal-deep: #6CA0A1;
  --mist-teal-soft: rgba(123, 175, 176, 0.14);
  --soft-amber: #E5B24E;
  --stone: #D9D2C7;
  --midnight: #1A1E23;

  /* Semantic */
  --bg: var(--warm-cream);
  --bg-soft: var(--warm-cream-soft);
  --bg-card: #FFFFFF;
  --bg-card-soft: #FBF8F2;
  --bg-input: #FFFFFF;
  --text: var(--graphite);
  --text-secondary: rgba(44, 49, 54, 0.66);
  --text-tertiary: rgba(44, 49, 54, 0.46);
  --divider: rgba(44, 49, 54, 0.10);
  --divider-strong: rgba(44, 49, 54, 0.16);
  --accent: var(--mist-teal-deep);
  --accent-bright: var(--mist-teal);
  --accent-hover: #5E9091;
  --accent-soft: var(--mist-teal-soft);
  --highlight: var(--soft-amber);
  --input-border: rgba(44, 49, 54, 0.16);

  /* Filter-type colors (locked — match the app content-type palette) */
  --filter-link:    #5F8FA0;  /* steel teal */
  --filter-image:   #9985A8;  /* dusty lavender */
  --filter-pdf:     #B86060;  /* warm terracotta */
  --filter-text:    #BC9050;  /* muted ochre */
  --filter-podcast: #6E7DA8;  /* muted indigo */
  --filter-place:   #6EA86E;  /* sage */
  --filter-music:   linear-gradient(135deg, #FA8FBC 0%, #FF5478 50%, #FF8A3D 100%);

  /* Shadows */
  --icon-shadow: 0 1px 4px rgba(44, 49, 54, 0.08);
  --phone-shadow: 0 30px 60px rgba(44, 49, 54, 0.18), 0 10px 20px rgba(44, 49, 54, 0.08);
  --card-shadow: 0 1px 2px rgba(44, 49, 54, 0.04), 0 4px 16px rgba(44, 49, 54, 0.05);

  /* Hero backdrop */
  --hero-glow: rgba(123, 175, 176, 0.16);

  /* Phone screen surface */
  --phone-screen-bg: #FFFFFF;
  --phone-screen-text: #2C3136;
  --phone-screen-meta: rgba(44, 49, 54, 0.5);
  --phone-screen-divider: rgba(44, 49, 54, 0.10);
  --phone-screen-chip-bg: #F2EEE7;

  color-scheme: light;
}

/* -----------------------------------------------------------
   Dark tokens (matches the new mockup)
   ----------------------------------------------------------- */
:root[data-theme="dark"] {
  /* Background lifted to #1A1E23 per DESIGN_SYSTEM.md locked decision #1
     (warmer, matches the app). The soft/card surfaces are lifted above it
     so the dark elevation ladder stays correct (page darker than cards). */
  --bg: #1A1E23;
  --bg-soft: #20252C;
  --bg-card: #252A32;
  --bg-card-soft: #2A2F38;
  --bg-input: rgba(255, 255, 255, 0.04);
  --text: rgba(255, 255, 255, 0.94);
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-tertiary: rgba(255, 255, 255, 0.44);
  --divider: rgba(255, 255, 255, 0.08);
  --divider-strong: rgba(255, 255, 255, 0.14);
  --accent: #8FC5C6;
  --accent-bright: #A7D4D5;
  --accent-hover: #A7D4D5;
  --accent-soft: rgba(143, 197, 198, 0.14);
  --highlight: var(--soft-amber);
  --input-border: rgba(255, 255, 255, 0.14);

  /* Filter-type colors — lightened for contrast on the dark background */
  --filter-link:    #7FA9B8;
  --filter-image:   #B3A1C0;
  --filter-pdf:     #D08585;
  --filter-text:    #D2AC72;
  --filter-podcast: #93A0C9;
  --filter-place:   #8CC48C;
  --filter-music:   linear-gradient(135deg, #FFA6C9 0%, #FF6E8E 50%, #FFA055 100%);

  --icon-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  --phone-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 10px 20px rgba(0, 0, 0, 0.35);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);

  --hero-glow: rgba(143, 197, 198, 0.12);

  --phone-screen-bg: #23282F;
  --phone-screen-text: rgba(255, 255, 255, 0.92);
  --phone-screen-meta: rgba(255, 255, 255, 0.5);
  --phone-screen-divider: rgba(255, 255, 255, 0.10);
  --phone-screen-chip-bg: rgba(255, 255, 255, 0.06);

  color-scheme: dark;
}

/* ===========================================================
   Spacing / radii / layout tokens
   =========================================================== */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --section-pad: clamp(48px, 7vh, 88px);

  /* Motion easings (see Animation primitives section) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* entrances / transitions — calm */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);     /* active-state changes */
}

/* ===========================================================
   Reset + base
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  /* Sticky footer: column flex so <main> grows to fill and the footer
     rests at the viewport bottom on short pages, end-of-content on long. */
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* The single page <main> takes all leftover vertical space. */
body > main { flex: 1 0 auto; }

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

/* Inline icon from the sprite: <svg class="icon"><use href="assets/icons.svg#icon-x"/></svg>
   Inherits `color` (stroke/fill use currentColor), so chips/sections tint by
   setting color (e.g. color: var(--filter-link)). Size via font-size or overrides. */
.icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
}

::selection {
  background: rgba(229, 178, 78, 0.32);
  color: var(--text);
}

a { color: inherit; }
button { font: inherit; }

/* -----------------------------------------------------------
   Accessibility — skip link, focus rings, screen-reader-only
   ----------------------------------------------------------- */

/* Visually hidden, still exposed to assistive tech. */
.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-to-content: off-screen until focused, then pinned above the header. */
.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1000;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--card-shadow);
  transform: translateY(calc(-100% - var(--space-2xl)));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

/* Brand-colored focus ring for keyboard users; mouse focus stays clean. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ===========================================================
   Animation primitives — systemic, reusable motion library
   -----------------------------------------------------------
   Trigger model (composable):
     • Put `.anim-host` on the container (a feature mockup). It is also
       the element the IntersectionObserver tags with `.in-view`.
     • Put an `.anim-*` class on the child element(s) to animate.
   Looping/entrance animations are PAUSED by default and run when:
     • desktop (>=769px): the parent `.anim-host` is hovered
     • mobile  (<=768px): the parent `.anim-host` has `.in-view`
   `.anim-tap-ripple` is one-shot, fired by adding `.firing` via JS.
   `.anim-chip-slide` is transition-driven via --slide-x / --slide-w.
   All motion is disabled under prefers-reduced-motion.
   =========================================================== */

@keyframes pm-pulse-glow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-soft); }
  50%      { transform: scale(1.06); box-shadow: 0 0 20px 4px var(--accent-soft); }
}
@keyframes pm-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pm-fade-cycle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.12; }
}
@keyframes pm-tap-ripple {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(14); opacity: 0; }
}

/* Looping pulse + glow (e.g. PlainMind share icon, iCloud sync icon).
   Resting state is scale(1); base element style shows through until triggered. */
.anim-pulse-glow {
  animation: pm-pulse-glow 3s var(--ease-standard) infinite;
  animation-play-state: paused;
  will-change: transform;
}

/* One-shot entrance flourish. Base style = visible end-state (fill-mode none),
   so content reads complete pre-trigger and replays the entrance on trigger. */
.anim-fade-in-up {
  animation: pm-fade-in-up 0.6s var(--ease-out-expo);
  animation-play-state: paused;
}

/* Composable visibility pulse for cycling sets (e.g. library filter results).
   Feature code adds per-child `animation-delay` for stagger. */
.anim-fade-cycle {
  animation: pm-fade-cycle 1.5s var(--ease-standard) infinite;
  animation-play-state: paused;
}

/* Circular ripple from element center, one-shot. Fired by toggling `.firing`. */
.anim-tap-ripple { position: relative; }
.anim-tap-ripple::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-soft);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.anim-tap-ripple.firing::after {
  animation: pm-tap-ripple 0.7s var(--ease-out-expo);
}

/* Sliding active-chip highlight. Feature sets --slide-x / --slide-w; the
   transition does the gliding. (The moving element sits behind the chips.) */
.anim-chip-slide {
  transform: translateX(var(--slide-x, 0));
  width: var(--slide-w, auto);
  transition: transform 0.5s var(--ease-standard), width 0.5s var(--ease-standard);
}

/* Triggers ------------------------------------------------- */
@media (min-width: 769px) {
  .anim-host:hover .anim-pulse-glow,
  .anim-host:hover .anim-fade-in-up,
  .anim-host:hover .anim-fade-cycle {
    animation-play-state: running;
  }
}
@media (max-width: 768px) {
  .anim-host.in-view .anim-pulse-glow,
  .anim-host.in-view .anim-fade-in-up,
  .anim-host.in-view .anim-fade-cycle {
    animation-play-state: running;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anim-pulse-glow,
  .anim-fade-in-up,
  .anim-fade-cycle,
  .anim-chip-slide,
  .anim-tap-ripple::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Light/dark image swap based on theme */
:root[data-theme="light"] .light-only,
:root:not([data-theme]) .light-only { display: block; }
:root[data-theme="light"] .dark-only,
:root:not([data-theme]) .dark-only  { display: none; }
:root[data-theme="dark"]  .light-only { display: none; }
:root[data-theme="dark"]  .dark-only  { display: block; }

/* ===========================================================
   Layout primitives
   =========================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
  width: 100%;
}

/* ===========================================================
   Typography
   =========================================================== */
.display {
  font-family: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  font-size: clamp(40px, 6.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.display-sm {
  font-family: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.accent {
  font-style: italic;
  color: var(--accent);
  font-weight: 600;
}

.lede {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 460px;
}

.body-md {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg);
  max-width: 420px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-lg);
}

.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  width: fit-content;
}
.learn-more:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.learn-more span { transition: transform 0.18s ease; }
.learn-more:hover span { transform: translateX(2px); }

/* ===========================================================
   Pill badge
   =========================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--accent-soft);
  color: var(--accent-bright);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
}

/* ===========================================================
   Buttons
   =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.08s ease;
  min-height: 40px;
  white-space: nowrap;
}
.btn:active { transform: scale(0.99); }
.btn-outline {
  background: transparent;
  color: var(--accent-bright);
  border-color: var(--accent);
}
.btn-outline:hover {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

/* ===========================================================
   Header
   =========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-lg) clamp(20px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.header-icon {
  width: 32px;
  height: 32px;
  border-radius: 22%;
  box-shadow: var(--icon-shadow);
}
.header-wordmark {
  font-family: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  margin-left: auto;
  margin-right: var(--space-xl);
}
.site-nav a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.18s ease;
}
.site-nav a:hover { color: var(--text); }

.header-cta { padding: 10px 18px; font-size: 14px; min-height: 38px; }

@media (max-width: 760px) {
  .site-nav, .header-cta { display: none; }
  .site-header { padding-top: 14px; padding-bottom: 14px; }
}

/* ===========================================================
   Hero
   =========================================================== */
.hero {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  padding-top: clamp(40px, 7vh, 80px);
  padding-bottom: var(--section-pad);
  align-items: center;
}

@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
}
.hero-content .display { margin-top: var(--space-sm); }

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hero-visual::before {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hero-glow);
  filter: blur(40px);
  z-index: 0;
}
.hero-visual > * { position: relative; z-index: 1; }

/* ===========================================================
   Trust signals
   =========================================================== */
.trust-signals {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  font-size: 13px;
  color: var(--text-secondary);
}
.trust-signals li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}
.trust-signals svg { color: var(--accent); flex-shrink: 0; }
.trust-signals--centered { justify-content: center; }

/* ===========================================================
   Signup embed (SureContact, scoped)
   =========================================================== */
.signup-embed { width: 100%; max-width: 460px; }
.signup-embed--final { margin: var(--space-xl) auto 0; }

.signup-embed input,
.signup-embed input[type="email"],
.signup-embed input[type="text"] {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--input-border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  margin-bottom: 8px;
}
.signup-embed input::placeholder { color: var(--text-tertiary); }
.signup-embed input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.signup-embed button,
.signup-embed button[type="submit"] {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.08s ease;
  min-height: 46px;
}
.signup-embed button:hover { background: var(--accent-hover); }
.signup-embed button:active { transform: scale(0.99); }

.signup-embed label { font-size: 13px; color: var(--text-secondary); }

/* ===========================================================
   Desktop app mockup (hero)
   =========================================================== */
.desktop-mock {
  width: 100%;
  max-width: 560px;
  background: var(--bg-card);
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--phone-shadow);
  overflow: hidden;
  font-size: 11px;
  color: var(--text);
}

.desktop-mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-card-soft);
  border-bottom: 1px solid var(--divider);
}
.desktop-mock__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.desktop-mock__title {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.desktop-mock__title-icon {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accent);
}

.desktop-mock__body {
  display: grid;
  grid-template-columns: 130px 1fr;
  min-height: 360px;
}

.desktop-mock__sidebar {
  background: var(--bg-card-soft);
  border-right: 1px solid var(--divider);
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 10.5px;
  color: var(--text-secondary);
  position: relative;
}
.desktop-mock__sb-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: default;
}
.desktop-mock__sb-item--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.desktop-mock__sb-item--active svg { color: var(--accent); }
.desktop-mock__sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  margin-left: 4px;
  flex-shrink: 0;
}
.desktop-mock__sb-label {
  margin: 10px 8px 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.desktop-mock__sb-item--bottom {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
}

.desktop-mock__main {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  min-width: 0;
}

.desktop-mock__title-main {
  font-family: "New York", ui-serif, Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.desktop-mock__chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.desktop-mock__chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--phone-screen-chip-bg);
  font-size: 10px;
  color: var(--text-secondary);
}
.desktop-mock__chip--active {
  background: var(--text);
  color: var(--bg);
}

.desktop-mock__section {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 4px 0 0;
}

.desktop-mock__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.desktop-mock__row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
}
.desktop-mock__thumb {
  width: 36px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--phone-screen-chip-bg);
}
.desktop-mock__thumb--coastal { background: linear-gradient(135deg, #7BAFB0, #4A6F70); }
.desktop-mock__thumb--sunset  { background: linear-gradient(135deg, #E5B24E, #C75D5D); }
.desktop-mock__thumb--paper   { background: linear-gradient(135deg, #F0E6D2, #C4B89F); }
.desktop-mock__thumb--audio   { background: linear-gradient(135deg, #2C3136, #4A5158); }
.desktop-mock__thumb--mountain{ background: linear-gradient(135deg, #6B7E8C, #8FA1AC); }
.desktop-mock__thumb--note    { background: linear-gradient(135deg, #D9D2C7, #B4ADA1); }

.desktop-mock__row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.desktop-mock__row-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desktop-mock__row-meta {
  font-size: 9.5px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.desktop-mock__tag {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.desktop-mock__fab {
  position: absolute;
  bottom: 14px;
  right: 16px;
  display: flex;
  gap: 6px;
}
.desktop-mock__fab-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 540px) {
  .desktop-mock__body { grid-template-columns: 100px 1fr; min-height: 320px; }
  .desktop-mock__sidebar { font-size: 9.5px; }
  .desktop-mock__row-title { font-size: 10.5px; }
}

/* ===========================================================
   Phone mockups — shared frame
   =========================================================== */
.phone-mock {
  position: relative;
  width: 260px;
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  background: #0B0E12;
  padding: 6px;
  box-shadow: var(--phone-shadow);
  flex-shrink: 0;
}

:root[data-theme="dark"] .phone-mock { background: #050709; }

.phone-mock__notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: #0B0E12;
  border-radius: 12px;
  z-index: 2;
}
:root[data-theme="dark"] .phone-mock__notch { background: #050709; }

.phone-mock__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: var(--phone-screen-bg);
  overflow: hidden;
  color: var(--phone-screen-text);
  font-size: 10.5px;
  padding: 32px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  padding: 0 6px;
  color: var(--phone-screen-text);
  height: 13px;
}
.status-bar__icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mock-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  font-size: 11px;
}
.mock-toolbar__lead { color: var(--accent); font-weight: 500; font-size: 13px; }
.mock-toolbar__title { font-weight: 700; font-size: 13px; color: var(--phone-screen-text); }
.mock-toolbar__action { color: var(--accent); font-size: 11px; }

.mock-chips {
  display: flex;
  gap: 5px;
  padding: 0 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.mock-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--phone-screen-chip-bg);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--phone-screen-text);
  white-space: nowrap;
}
.mock-chip--active {
  background: var(--phone-screen-text);
  color: var(--phone-screen-bg);
}

.mock-section-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--phone-screen-meta);
  padding: 0 6px;
  margin: 4px 0 0;
}

.mock-list {
  list-style: none;
  margin: 0;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}
.mock-item {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mock-item__thumb {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-item__thumb--red       { background: linear-gradient(135deg, #C73838, #8E2727); }
.mock-item__thumb--spotify   { background: #000000; }
.mock-item__thumb--design    { background: linear-gradient(135deg, #B8D4D5, #7BAFB0); }
.mock-item__thumb--sunset    { background: linear-gradient(135deg, #E5B24E, #C75D5D); }
.mock-item__thumb--note      { background: linear-gradient(135deg, #F0E6D2, #C4B89F); }
.mock-item__thumb--mountain  { background: linear-gradient(135deg, #6B7E8C, #8FA1AC); }

.mock-item__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.mock-item__title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--phone-screen-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-item__meta {
  font-size: 9.5px;
  color: var(--phone-screen-meta);
}

/* ===========================================================
   Phone mockup: Share sheet
   =========================================================== */
.phone-mock--share .phone-mock__screen {
  padding: 32px 0 0;
  gap: 0;
}
.mock-share {
  margin: 6px 10px;
  background: var(--phone-screen-bg);
  border: 1px solid var(--phone-screen-divider);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mock-share__apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 0.5px solid var(--phone-screen-divider);
}
.mock-share__app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  color: var(--phone-screen-text);
  text-align: center;
}
.mock-share__app-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mock-share__app-icon--brand {
  background: var(--warm-cream);
  box-shadow: 0 2px 6px rgba(44, 49, 54, 0.10);
}
.mock-share__app-icon--brand img { width: 100%; height: 100%; object-fit: cover; }
.mock-share__app--featured { color: var(--accent); font-weight: 600; }

.mock-share__actions { display: flex; flex-direction: column; }
.mock-share__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px;
  border-bottom: 0.5px solid var(--phone-screen-divider);
  font-size: 10.5px;
  color: var(--phone-screen-text);
}
.mock-share__action:last-child { border-bottom: none; }
.mock-share__action-icon { color: var(--phone-screen-meta); }
.mock-share__action-icon .icon { width: 16px; height: 16px; }

/* F.1 — share-sheet URL preview row + app-tile glyphs */
.share-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 10px;
  border-bottom: 0.5px solid var(--phone-screen-divider);
}
.share-preview__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 1px 4px rgba(44, 49, 54, 0.12);
}
.share-preview__icon img { width: 100%; height: 100%; object-fit: cover; }
.share-preview__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.share-preview__title {
  font-weight: 600;
  font-size: 9.5px;
  color: var(--phone-screen-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-preview__url { font-size: 8.5px; color: var(--phone-screen-meta); }
.share-preview__options {
  flex: none;
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  background: var(--phone-screen-chip-bg);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
}
.mock-share__app-icon .icon { width: 22px; height: 22px; }
.mock-share__app-icon--tesla {
  background: #E31937;
  color: #fff;
  font-family: "New York", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

/* ===========================================================
   F.2 — Library / Auto-Organize mockup
   (NOTE: the 12s chip-cycle + item-fade timing needs an
   in-browser tuning pass — built without visual verification.)
   =========================================================== */
.phone-mock--library .phone-mock__screen { gap: 4px; }
.lib-header {
  text-align: center;
  font-family: "New York", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--phone-screen-text);
  padding: 2px 0 1px;
}
.lib-chips {
  display: flex;
  gap: 5px;
  padding: 0 6px 2px;
  overflow: hidden;
}
.lib-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--phone-screen-chip-bg);
  color: var(--phone-screen-text);
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
}
.lib-chip .icon { width: 11px; height: 11px; color: var(--fc); }
.lib-chip--all {  /* resting active state */
  background: color-mix(in srgb, var(--fc) 16%, transparent);
  color: var(--fc);
}
.lib-section {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--phone-screen-meta);
  padding: 1px 0;
}
.lib-list {
  list-style: none;
  margin: 0;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  overflow: hidden;
}
.lib-item { display: flex; align-items: center; gap: 8px; }
.lib-item__main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.lib-item__title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--phone-screen-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-item__pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  align-self: flex-start;
  padding: 1.5px 6px;
  border-radius: var(--radius-pill);
  font-size: 8px;
  font-weight: 600;
  color: var(--fc);
  background: color-mix(in srgb, var(--fc) 12%, transparent);
}
.lib-item__pill .icon { width: 9px; height: 9px; }
.lib-thumb { width: 38px; height: 38px; border-radius: 8px; flex: none; }
.lib-thumb--rose   { background: linear-gradient(135deg, #E8A0B4, #C75D7A); }
.lib-thumb--coffee { background: linear-gradient(135deg, #C9A07A, #7A5230); }
.lib-thumb--ink    { background: linear-gradient(135deg, #3A3F47, #15181D); }
.lib-thumb--lav    { background: linear-gradient(135deg, #B3A1C0, #8A77A6); }
.lib-thumb--paper  { background: linear-gradient(135deg, #F0E6D2, #C9BBA0); }
.lib-thumb--castle { background: linear-gradient(135deg, #8FB8E0, #5E7FB0); }

.mock-tabbar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; margin-top: auto; }
.mock-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 500;
  color: var(--phone-screen-meta);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.mock-tab .icon { width: 13px; height: 13px; }
.mock-tab--active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.mock-fab {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mock-fab .icon { width: 15px; height: 15px; }

/* Cycle: active chip steps All→Links→Images→PDFs→Text→Place (2s each, 12s loop);
   items fade to ~0.16 when their type isn't the active filter. */
@keyframes pm-lib-chip {
  0%, 15%     { background: color-mix(in srgb, var(--fc) 16%, transparent); color: var(--fc); }
  16.7%, 100% { background: var(--phone-screen-chip-bg); color: var(--phone-screen-text); }
}
@keyframes pm-lib-link  { 0%, 31% { opacity: 1; } 35%, 100% { opacity: 0.16; } }
@keyframes pm-lib-image { 0%, 15% { opacity: 1; } 19%, 31% { opacity: 0.16; } 35%, 48% { opacity: 1; } 52%, 100% { opacity: 0.16; } }
@keyframes pm-lib-text  { 0%, 15% { opacity: 1; } 19%, 64% { opacity: 0.16; } 69%, 81% { opacity: 1; } 85%, 100% { opacity: 0.16; } }
@keyframes pm-lib-place { 0%, 15% { opacity: 1; } 19%, 81% { opacity: 0.16; } 85%, 100% { opacity: 1; } }

.lib-chips .lib-chip { animation: pm-lib-chip 12s var(--ease-standard) infinite; animation-play-state: paused; }
.lib-chips .lib-chip:nth-child(1) { animation-delay: 0s; }
.lib-chips .lib-chip:nth-child(2) { animation-delay: 2s; }
.lib-chips .lib-chip:nth-child(3) { animation-delay: 4s; }
.lib-chips .lib-chip:nth-child(4) { animation-delay: 6s; }
.lib-chips .lib-chip:nth-child(5) { animation-delay: 8s; }
.lib-chips .lib-chip:nth-child(6) { animation-delay: 10s; }
.lib-item--link  { animation: pm-lib-link 12s var(--ease-standard) infinite; animation-play-state: paused; }
.lib-item--image { animation: pm-lib-image 12s var(--ease-standard) infinite; animation-play-state: paused; }
.lib-item--text  { animation: pm-lib-text 12s var(--ease-standard) infinite; animation-play-state: paused; }
.lib-item--place { animation: pm-lib-place 12s var(--ease-standard) infinite; animation-play-state: paused; }

@media (min-width: 769px) {
  .anim-host:hover .lib-chip,
  .anim-host:hover .lib-item { animation-play-state: running; }
}
@media (max-width: 768px) {
  .anim-host.in-view .lib-chip,
  .anim-host.in-view .lib-item { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-chip, .lib-item { animation: none !important; }
}

/* ===========================================================
   F.3 — Powerful Search empty state
   =========================================================== */
.phone-mock--search .phone-mock__screen { gap: 4px; }
.qs-header {
  font-family: "New York", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  padding: 2px 6px 1px;
}
.qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 6px; }
.qs-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 9px;
  border-radius: 10px;
  background: var(--phone-screen-chip-bg);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--phone-screen-text);
}
.qs-card .icon { width: 15px; height: 15px; color: var(--accent); }
.recent-header { font-size: 9px; font-weight: 600; color: var(--phone-screen-meta); padding: 5px 6px 0; }
.recent-list { list-style: none; margin: 0; padding: 0 6px; display: flex; flex-direction: column; }
.recent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 2px;
  font-size: 10px;
  color: var(--phone-screen-text);
  border-bottom: 0.5px solid var(--phone-screen-divider);
}
.recent-list .recent-row:last-child { border-bottom: none; }
.recent-row__x { color: var(--phone-screen-meta); font-size: 9px; }

.search-input {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: auto 6px 0;
  padding: 7px 10px;
  background: var(--phone-screen-chip-bg);
  border-radius: 10px;
  font-size: 11px;
}
.search-input .icon { width: 14px; height: 14px; color: var(--phone-screen-meta); }
.search-input__ph { flex: 1; color: var(--phone-screen-meta); }
.search-input__x { color: var(--phone-screen-meta); font-size: 10px; }

.kb-hint { display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 2px; }
.kb-row { height: 13px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--phone-screen-chip-bg) 0 16px, transparent 16px 20px); }
.kb-row--2 { margin: 0 8px; }
.kb-row--3 { margin: 0 22px; }

.mock-fab--active { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Sequence: ripple on "Recently saved" → it goes selected → recent rows fade-in-up
   (staggered). One-shot; .anim-fade-in-up runs via the primitives' host trigger. */
.recent-list .recent-row:nth-child(1) { animation-delay: 0.45s; }
.recent-list .recent-row:nth-child(2) { animation-delay: 0.6s; }
.recent-list .recent-row:nth-child(3) { animation-delay: 0.75s; }
@media (min-width: 769px) {
  .anim-host:hover .qs-card--recent { background: var(--accent-soft); color: var(--accent); }
  .anim-host:hover .qs-card--recent .icon { color: var(--accent); }
}
@media (max-width: 768px) {
  .anim-host.in-view .qs-card--recent { background: var(--accent-soft); color: var(--accent); }
}

/* ===========================================================
   F.4 — Settings (Calm Private Space)
   =========================================================== */
.phone-mock--settings .phone-mock__screen { gap: 4px; }
.set-header {
  font-family: "New York", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 17px;
  text-align: center;
  color: var(--phone-screen-text);
  padding: 2px 0;
}
.set-section {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--phone-screen-meta);
  padding: 6px 8px 2px;
}
.set-card {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 6px;
  padding: 10px;
  border-radius: 12px;
  background: var(--phone-screen-chip-bg);
}
.set-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.set-card__icon .icon { width: 18px; height: 18px; }
.set-card__text { display: flex; flex-direction: column; gap: 1px; }
.set-card__title { font-size: 10.5px; font-weight: 600; color: var(--phone-screen-text); }
.set-card__sub { font-size: 9px; color: var(--phone-screen-meta); }
.set-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 6px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--phone-screen-chip-bg);
  font-size: 10.5px;
  color: var(--phone-screen-text);
}
.set-row__val { color: var(--phone-screen-meta); }
.set-row__lead { display: inline-flex; align-items: center; gap: 7px; }
.set-row__lead .icon { width: 15px; height: 15px; color: var(--accent); }
.set-row__right { display: inline-flex; align-items: center; gap: 6px; }
.set-chevron { width: 13px; height: 13px; color: var(--phone-screen-meta); }
.stats-badge {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

/* CSS-only count-up 0→247 (no JS). Rest shows 247; animates up on trigger. */
@property --pm-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.stats-badge__num {
  --pm-count: 247;
  counter-reset: pmcount var(--pm-count);
  animation: pm-count-up 2s var(--ease-out-expo);
  animation-play-state: paused;
}
.stats-badge__num::after { content: counter(pmcount); }
@keyframes pm-count-up { from { --pm-count: 0; } to { --pm-count: 247; } }

@media (min-width: 769px) {
  .anim-host:hover .stats-badge__num { animation-play-state: running; }
}
@media (max-width: 768px) {
  .anim-host.in-view .stats-badge__num { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-badge__num { animation: none !important; --pm-count: 247; }
}

/* ===========================================================
   Phone mockup: Search
   =========================================================== */
.mock-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  margin: 2px 4px;
  background: var(--phone-screen-chip-bg);
  border-radius: 10px;
  font-size: 11px;
}
.mock-search-bar__icon { color: var(--phone-screen-meta); }
.mock-search-bar__text { flex: 1; color: var(--phone-screen-text); }
.mock-search-bar__clear { color: var(--phone-screen-meta); }

/* ===========================================================
   Phone mockup: Map
   =========================================================== */
.phone-mock--map .phone-mock__screen { padding: 0; gap: 0; }
.mock-map { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }
.mock-map__bg {
  position: relative;
  flex: 1;
  background:
    radial-gradient(circle at 40% 35%, #C8DCC8 0%, #B8D4B8 30%, transparent 60%),
    radial-gradient(circle at 70% 60%, #D4E4D4 0%, transparent 50%),
    linear-gradient(180deg, #E8EFE0 0%, #DDE6D2 100%);
  overflow: hidden;
}
.mock-map__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 48%, rgba(255,255,255,0.4) 49%, rgba(255,255,255,0.4) 51%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.3) 49%, rgba(255,255,255,0.3) 51%, transparent 52%);
  background-size: 60px 60px, 40px 40px;
  opacity: 0.6;
}
.mock-map__pin {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}
.mock-map__card {
  background: var(--phone-screen-bg);
  padding: 12px 14px;
  border-top: 0.5px solid var(--phone-screen-divider);
}
.mock-map__card h4 {
  font-family: "New York", ui-serif, Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 3px;
  color: var(--phone-screen-text);
}
.mock-map__meta {
  font-size: 10px;
  color: var(--phone-screen-meta);
  margin: 0 0 8px;
}
.mock-map__buttons {
  display: flex;
  gap: 6px;
}
.mock-map__btn {
  flex: 1;
  padding: 6px 8px;
  background: var(--phone-screen-chip-bg);
  border-radius: 8px;
  font-size: 10px;
  text-align: center;
  color: var(--phone-screen-text);
}

/* ===========================================================
   Highlights (4-col band)
   =========================================================== */
.highlights {
  padding-top: 0;
  padding-bottom: var(--section-pad);
}
.highlights-card {
  background: var(--bg-card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3.5vw, 36px);
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  box-shadow: var(--card-shadow);
}
@media (min-width: 760px)  { .highlights-card { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .highlights-card { grid-template-columns: repeat(4, 1fr); } }

.highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.highlight__icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}
.highlight h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
}
.highlight p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

/* ===========================================================
   Feature blocks
   =========================================================== */
.features {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}
@media (min-width: 900px) {
  .features { grid-template-columns: 1fr 1fr; }
}

.feature-block {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.feature-block__visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: var(--space-lg) 0 var(--space-2xl);
  min-height: 280px;
}

.feature-block--image-left .feature-block__visual,
.feature-block--image-right .feature-block__visual {
  order: 1;
}
.feature-block--image-left .feature-block__text,
.feature-block--image-right .feature-block__text {
  order: 2;
}

.feature-block__text {
  display: flex;
  flex-direction: column;
}
.feature-block .display-sm { margin-bottom: var(--space-md); }

/* ===========================================================
   Privacy band
   =========================================================== */
.privacy-band { padding-bottom: var(--section-pad); }
.privacy-band__card {
  background: var(--bg-card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3.5vw, 36px);
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  box-shadow: var(--card-shadow);
}
@media (min-width: 760px) {
  .privacy-band__card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.privacy-band__pitch {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.privacy-band__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.privacy-band__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.privacy-band__sub {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0;
}

.privacy-band__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: center;
}
.privacy-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.privacy-stat__value {
  font-family: "New York", ui-serif, Georgia, serif;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.privacy-stat__pct {
  font-size: 0.6em;
  color: var(--text-secondary);
  font-weight: 500;
  margin-left: 1px;
}
.privacy-stat__value--word {
  font-style: italic;
  color: var(--accent);
}
.privacy-stat__label {
  font-size: 11.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

/* ===========================================================
   Final CTA
   =========================================================== */
.final-cta {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final-cta__heading {
  max-width: 780px;
  margin: 0 auto var(--space-md);
}
.final-cta .signup-embed--final {
  max-width: 520px;
}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer {
  border-top: 1px solid var(--divider);
  padding: var(--space-2xl) 0;
  background: var(--bg-soft);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.site-footer__brand .header-wordmark { font-size: 18px; }
.site-footer__copy {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.site-footer__right {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.site-footer__links { display: flex; gap: var(--space-xl); }
.site-footer__links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13px;
  transition: color 0.18s ease;
}
.site-footer__links a:hover { color: var(--text); }

@media (max-width: 720px) {
  .site-footer__inner { justify-content: center; text-align: center; }
  .site-footer__right { width: 100%; justify-content: center; }
}

/* ===========================================================
   Theme toggle
   =========================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}
.theme-toggle__icon {
  display: inline-flex;
  align-items: center;
  width: 16px;
  height: 16px;
  position: relative;
  color: var(--accent);
}
.theme-toggle__icon svg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.theme-toggle[data-mode="light"] .theme-toggle__sun { opacity: 1; }
.theme-toggle[data-mode="dark"]  .theme-toggle__moon { opacity: 1; }
.theme-toggle[data-mode="system"] .theme-toggle__sys { opacity: 1; }
.theme-toggle__label { letter-spacing: 0.01em; }

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

/* ====================================================================
   Policy pages (/privacy, /terms)
   Termageddon embeds inject their own HTML. The .policy-embed wrapper
   neutralizes their default styling so the policy text inherits the
   page's typography, colors, and theme.
   ==================================================================== */

.policy-page main {
  padding-top: 2rem;
}

.policy.container {
  max-width: 760px;
  padding-top: 2rem;
  padding-bottom: 5rem;
}

.policy-header {
  margin-bottom: 2.5rem;
}

.policy-header .display-sm {
  margin-bottom: 1.25rem;
}

.policy-intro {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1rem 0;
}

.policy-intro--quiet {
  color: var(--text-tertiary);
  font-size: 0.95rem;
}

.policy-intro a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.policy-intro a:hover {
  color: var(--accent-hover);
}

.policy-intro code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 0.05em 0.4em;
  background: var(--accent-soft);
  border-radius: 4px;
}

/* --- Termageddon embed: neutralize injected styling -------------------
   Force everything inside to inherit page colors and typography.
   Override hardcoded width/height attributes on .policy_embed_div.
   ------------------------------------------------------------------- */

.policy-embed {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--divider);
}

.policy-embed,
.policy-embed * {
  font-family: inherit;
  color: var(--text);
  background: transparent !important;
  box-sizing: border-box;
}

.policy_embed_div {
  width: 100% !important;
  height: auto !important;
  display: block;
  color: var(--text);
}

.policy-embed h1,
.policy-embed h2,
.policy-embed h3,
.policy-embed h4,
.policy-embed h5,
.policy-embed h6 {
  font-family: "New York", ui-serif, Georgia, serif !important;
  color: var(--text) !important;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.policy-embed h1 { font-size: 1.6rem; }
.policy-embed h2 { font-size: 1.35rem; }
.policy-embed h3 { font-size: 1.15rem; }
.policy-embed h4,
.policy-embed h5,
.policy-embed h6 { font-size: 1rem; }

.policy-embed p,
.policy-embed li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0.5rem 0;
}

.policy-embed ul,
.policy-embed ol {
  padding-left: 1.4rem;
  margin: 0.75rem 0;
}

.policy-embed a {
  color: var(--accent) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.policy-embed a:hover {
  color: var(--accent-hover) !important;
}

.policy-embed strong,
.policy-embed b {
  color: var(--text) !important;
  font-weight: 600;
}

.policy-embed hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 2rem 0;
}

.policy-embed table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.policy-embed th,
.policy-embed td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--divider);
  vertical-align: top;
  color: var(--text);
}

.policy-embed th {
  background: var(--bg-soft) !important;
  font-weight: 600;
}

/* Mobile: shrink intro typography a touch */
@media (max-width: 600px) {
  .policy.container {
    padding-top: 1rem;
    padding-bottom: 3rem;
  }
  .policy-header {
    margin-bottom: 1.75rem;
  }
  .policy-intro {
    font-size: 1rem;
  }
}

/* ====================================================================
   Theme transition (light ↔ dark fade)
   Applies a 250ms ease transition on color-related properties whenever
   the data-theme attribute changes. Scoped to .theme-ready so the
   first-paint render (before the class is added) is instant — no
   visible flash from default to actual theme.

   Uses :where() to set specificity to (0,0,0), so any element with its
   own transition rule (buttons, inputs, etc.) keeps its specific
   transition timing and is NOT overridden by this universal rule.

   The existing prefers-reduced-motion media query (search for it in
   this file) already disables all transitions, so reduced motion is
   handled automatically.
   ==================================================================== */

:where(html.theme-ready) * {
  transition: background-color 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease,
              fill 0.25s ease,
              stroke 0.25s ease,
              box-shadow 0.25s ease;
}

/* ====================================================================
   Phone-mock scroll entrance animation
   Each .phone-mock starts faded out + slightly lowered, transitions
   to fully visible + neutral position when it enters the viewport
   (IntersectionObserver adds .in-view class — see inline JS in
   index.html). One-shot — runs once per mockup.

   Uses cubic-bezier(0.16, 1, 0.3, 1) for an "ease-out-expo" feel that
   matches the calm brand — fast at the start, gentle settle at the end.

   Reduced motion: just show them, no animation.
   ==================================================================== */

.phone-mock {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.phone-mock.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .phone-mock {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}