/* ==========================================================================
   ShrinkShot Cam — Marketing Site Stylesheet
   Vanilla CSS · No dependencies · Light + Dark via prefers-color-scheme
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — derived from app icon & App Store previews */
  --color-green: #6ba348;
  --color-green-hover: #5a8f3c;
  --color-green-soft: #eaf2e3;
  --color-green-muted: #4a6e2e;

  --color-bg: #fdfaf5;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f5f0e8;
  --color-bg-muted: #ede7db;
  --color-neutral-800: #242220; /* brand surface-dark */
  --color-neutral-900: #111010; /* brand darkest / footer */

  --color-text: #111010;
  --color-text-secondary: #3d3a36;
  --color-text-tertiary: #6b6660;
  --color-text-inverse: #fdfaf5;

  --color-border: rgba(17, 16, 16, 0.1);
  --color-border-strong: rgba(17, 16, 16, 0.16);
  --color-shadow: rgba(17, 16, 16, 0.08);
  --color-shadow-strong: rgba(17, 16, 16, 0.14);

  --color-focus: #6ba348;
  --color-danger: #b84040;

  --header-bg: rgba(253, 250, 245, 0.82);
  --header-border: rgba(17, 16, 16, 0.06);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: clamp(2.5rem, 5vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container: 72rem;
  --container-narrow: 42rem;
  --header-height: 4rem;

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 4px 16px var(--color-shadow), 0 1px 3px var(--color-shadow);
  --shadow-lg: 0 12px 40px var(--color-shadow-strong), 0 4px 12px var(--color-shadow);
  --shadow-phone: 0 24px 64px rgba(17, 16, 16, 0.18), 0 8px 24px rgba(17, 16, 16, 0.1);

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-slow: 400ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-green: #8bc45e;
    --color-green-hover: #9dd06f;
    --color-green-soft: #1a2b10;
    --color-green-muted: #a7c78f;

    --color-bg: #0c0c0b;
    --color-bg-elevated: #161614;
    --color-bg-subtle: #1a1917;
    --color-bg-muted: #242220;

    --color-text: #f5f2ec;
    --color-text-secondary: #c8beb3;
    --color-text-tertiary: #8a847c;
    --color-text-inverse: #0c0c0b;

    --color-border: rgba(245, 242, 236, 0.1);
    --color-border-strong: rgba(245, 242, 236, 0.16);
    --color-shadow: rgba(0, 0, 0, 0.35);
    --color-shadow-strong: rgba(0, 0, 0, 0.5);

    --header-bg: rgba(12, 12, 11, 0.82);
    --header-border: rgba(245, 242, 236, 0.08);

    --shadow-phone: 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@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;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(107, 163, 72, 0.08), transparent),
    var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

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

a {
  color: var(--color-green-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease);
}

a:hover {
  color: var(--color-green);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--color-green-soft);
  color: var(--color-text);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background: var(--color-text);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-4);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2.5rem, var(--container-narrow));
}

.section {
  padding-block: var(--space-9);
}

#cta.section {
  padding-bottom: calc(var(--space-9) * 0.2);
}

.section--tight {
  padding-block: var(--space-7);
}

.section--dark {
  --color-bg-elevated: #161614;
  --color-bg-subtle: #1a1917;
  --color-text: #f5f2ec;
  --color-text-secondary: #c8beb3;
  --color-text-tertiary: #8a847c;
  --color-border: rgba(245, 242, 236, 0.1);
  --color-border-strong: rgba(245, 242, 236, 0.16);
  --color-shadow: rgba(0, 0, 0, 0.35);
  --color-green-muted: #a7c78f;
  --color-green-soft: #1a2b10;

  background: #0c0c0b;
  color: var(--color-text);
  color-scheme: dark;
}

.section--dark .section__title {
  color: var(--color-text);
}

.section--dark .split__panel {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  box-shadow: none;
}

.section--dark .split__panel h3 {
  color: var(--color-text);
}

/* Soft mid band — brand accent-100 (#EAF2E3), light green tint distinct from cream */
.section--soft-dark {
  --color-bg-elevated: #fdfaf5;
  --color-bg-subtle: #f3f8ef; /* accent-50 */
  --color-text: #111010;
  --color-text-secondary: #3d3a36;
  --color-text-tertiary: #6b6660;
  --color-border: rgba(74, 110, 46, 0.12);
  --color-border-strong: rgba(74, 110, 46, 0.18);
  --color-green-muted: #4a6e2e;
  --color-green-soft: #c8dfc0; /* accent-200 */

  background: #eaf2e3; /* accent-100 */
  color: var(--color-text);
}

.section--soft-dark .section__title {
  color: var(--color-text);
}

.section--soft-dark .use-case {
  background: #6f9655; /* accent-400 */
  color: #fdfaf5;
  border: 2px solid #4a6e2e; /* accent-500 */
  box-shadow: 0 2px 10px rgba(38, 61, 24, 0.14);
  transform: scale(1);
  transition:
    background 1.4s var(--ease),
    border-color 1.4s var(--ease),
    box-shadow 1.4s var(--ease),
    transform var(--duration-fast) var(--ease);
}

.section--soft-dark .use-case.is-deep {
  background: #4a6e2e; /* accent-500 */
  box-shadow: 0 2px 12px rgba(38, 61, 24, 0.22);
}

.section--soft-dark .use-case:hover {
  background: #4a6e2e; /* accent-500 */
  border-color: #4a6e2e;
  transform: scale(1.03);
  transition-duration: var(--duration-fast);
}

@media (prefers-color-scheme: dark) {
  /* Soft green-dark panel — lighter than full dark (#0c0c0b) */
  .section--soft-dark {
    --color-bg-elevated: #1a2b10;
    --color-bg-subtle: #243518;
    --color-text: #fdfaf5;
    --color-text-secondary: #b0aaa4;
    --color-text-tertiary: #a09890;
    --color-border: rgba(167, 199, 143, 0.16);
    --color-border-strong: rgba(167, 199, 143, 0.24);
    --color-green-muted: #a7c78f;
    --color-green-soft: #1a2b10;

    background: #152010;
    color-scheme: dark;
  }

  .section--soft-dark .use-case {
    background: #6f9655;
    color: #fdfaf5;
    border-color: #4a6e2e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .section--soft-dark .use-case.is-deep {
    background: #4a6e2e;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  }

  .section--soft-dark .use-case:hover {
    background: #4a6e2e;
    border-color: #4a6e2e;
    transform: scale(1.03);
  }
}

.section__header {
  max-width: 40rem;
  margin-bottom: var(--space-7);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.section__logo {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  border-radius: 1.15rem;
  box-shadow: var(--shadow-md);
}

.section__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: calc(var(--text-xs) * 1.25);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-normal);
  text-transform: uppercase;
  text-wrap: pretty;
  color: var(--color-green-muted);
}

.section__eyebrow--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.section__eyebrow-icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.section__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

#how-title s {
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
  opacity: 0.55;
}

#how-title em {
  font-style: normal;
  color: var(--color-green-muted);
}

.section__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   4. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--header-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}

.brand:hover {
  color: var(--color-text);
}

.brand__logo {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-sm);
}

.site-header .brand__logo {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
}

.brand__name {
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition:
    color 480ms var(--ease),
    background-color 480ms var(--ease),
    box-shadow 480ms var(--ease);
}

.nav__link:hover:not(.is-active):not([aria-current="true"]):not([aria-current="page"]) {
  color: var(--color-text);
  background-color: color-mix(in srgb, var(--color-text) 10%, transparent);
  transition-duration: var(--duration-fast);
}

.nav__link.is-active,
.nav__link[aria-current="page"],
.nav__link[aria-current="true"] {
  color: #f5f2ec;
  background-color: color-mix(in srgb, var(--color-neutral-900) 82%, transparent);
}

@media (prefers-color-scheme: dark) {
  .nav__link.is-active,
  .nav__link[aria-current="page"],
  .nav__link[aria-current="true"] {
    color: #111010;
    background-color: color-mix(in srgb, #f5f2ec 82%, transparent);
  }
}

.nav__link.nav__cta {
  margin-left: var(--space-2);
  min-height: 0;
  height: auto;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  gap: 0.35rem;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-normal);
  color: #fff;
  background-color: var(--color-green);
  box-shadow: 0 1px 2px rgba(74, 110, 46, 0.25);
  transition:
    color 480ms var(--ease),
    background-color 480ms var(--ease),
    box-shadow 480ms var(--ease);
}

.nav__link.nav__cta:hover:not(.is-active):not([aria-current="true"]) {
  color: #fff;
  background-color: color-mix(in srgb, var(--color-green-hover) 88%, transparent);
  transition-duration: var(--duration-fast);
}

.nav__link.nav__cta.is-active,
.nav__link.nav__cta[aria-current="page"],
.nav__link.nav__cta[aria-current="true"] {
  color: #fff;
  background-color: color-mix(in srgb, var(--color-green-hover) 88%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-green) 35%, transparent);
}

.nav__cta-icon {
  flex-shrink: 0;
  display: block;
}

.nav-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.nav-toggle__icon {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background var(--duration-fast) var(--ease);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease);
}

.nav-toggle__icon::before {
  top: -6px;
}

.nav-toggle__icon::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-0.5rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--duration) var(--ease),
      transform var(--duration) var(--ease),
      visibility var(--duration) var(--ease);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav__link {
    padding: var(--space-3) calc(var(--space-4) * 1.2);
    font-size: var(--text-base);
  }

  .nav__link.nav__cta {
    margin-left: 0;
    margin-top: var(--space-2);
    justify-content: center;
    min-height: 0;
    padding: var(--space-3) calc(var(--space-4) * 1.2);
    font-size: var(--text-base);
  }
}

/* --------------------------------------------------------------------------
   5. Buttons & badges
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0.75rem 1.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition:
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--color-green);
  color: #fff;
  box-shadow: 0 1px 2px rgba(74, 110, 46, 0.25);
}

.btn--primary:hover {
  background: var(--color-green-hover);
  color: #fff;
}

.btn--secondary {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.btn--secondary:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.btn--ghost:hover {
  color: var(--color-text);
  background: var(--color-bg-subtle);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.app-store-badge {
  /* Official Apple badge artwork — do not restyle, animate, or angle (Marketing Guidelines) */
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  /* Clear space ≈ 1/4 badge height (Apple graphic standards) */
  padding: 0.69rem;
  margin: -0.75rem;
  border-radius: 0.5rem;
  transition: none;
}

.app-store-badge:hover {
  text-decoration: none;
  opacity: 1;
  transform: none;
}

.app-store-badge:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.app-store-badge img {
  display: block;
  /* Onscreen minimum is 40px; slightly larger for CTA legibility, still subordinate */
  height: 40px;
  width: auto;
  max-width: 100%;
}

@media (min-width: 600px) {
  .app-store-badge img {
    height: 48px;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-8) var(--space-9);
  overflow: clip;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.hero__content {
  max-width: 34rem;
}

.hero__title {
  min-height: 2.4em;
  font-size: calc(var(--text-4xl) * 1.2);
  margin-bottom: var(--space-5);
}

.hero__title-text {
  display: inline;
  transition: opacity 700ms var(--ease);
}

.hero__title em {
  font-style: normal;
  color: currentColor;
  transition: color 0.69s var(--ease);
}

.hero__title em.is-accent {
  color: var(--color-green-muted);
}

.hero__title-caret {
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  margin-left: 0.08em;
  vertical-align: -0.05em;
  background: currentColor;
  border-radius: 1px;
  animation: hero-caret-blink 1s steps(1, end) infinite;
  transition: opacity 700ms var(--ease);
}

.hero__title.is-fading .hero__title-text,
.hero__title.is-fading .hero__title-caret {
  opacity: 0;
}

.hero__title.is-reduced-motion .hero__title-caret {
  animation: none;
  opacity: 0;
}

.hero__title.is-reduced-motion em,
.hero__title.is-reduced-motion em.is-accent {
  transition: none;
  color: var(--color-green-muted);
}

@keyframes hero-caret-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.hero__description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__glow {
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 163, 72, 0.22), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.phone-frame {
  position: relative;
  z-index: 1;
  width: min(100%, 18.5rem);
  /* Device chrome is already in the asset — no extra CSS bezel */
  filter: drop-shadow(0 24px 48px rgba(17, 16, 16, 0.22))
    drop-shadow(0 8px 16px rgba(17, 16, 16, 0.12));
  transform: translateY(0);
  transition: transform var(--duration-slow) var(--ease-out);
}

.phone-frame:hover {
  transform: translateY(-6px);
}

.phone-frame img {
  width: 100%;
  height: auto;
}

@media (prefers-color-scheme: dark) {
  .phone-frame {
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.65))
      drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
  }
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__content {
    max-width: 36rem;
    margin-inline: auto;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    /* Extra bottom room for badge “coming soon” caption + Apple clear space */
    margin-bottom: var(--space-7);
  }

  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn,
  .hero__actions .app-store-badge,
  .cta__actions .btn,
  .cta__actions .app-store-badge {
    width: 100%;
  }

  .hero__actions .app-store-badge,
  .cta__actions .app-store-badge {
    justify-content: center;
    margin-inline: 0;
  }

  .hero__actions .app-store-badge picture,
  .cta__actions .app-store-badge picture {
    display: block;
    width: min(100%, 15.3rem);
    margin-inline: auto;
  }

  .hero__actions .app-store-badge img,
  .cta__actions .app-store-badge img {
    /* Explicit size — % width alone fails inside shrink-wrapped <picture> */
    width: 100%;
    height: auto;
  }

  .phone-frame {
    width: 80vw;
  }
}

/* Landscape phones — keep hero readable without excessive vertical scroll */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding-block: var(--space-5);
  }

  .hero__grid {
    grid-template-columns: 1fr 0.7fr;
    text-align: left;
    gap: var(--space-5);
  }

  .hero__content {
    margin-inline: 0;
  }

  .hero__actions,
  .hero__title {
    font-size: clamp(2.1rem, 6vw, 2.7rem);
  }

  .phone-frame {
    width: min(100%, 10rem);
  }

  .section {
    padding-block: var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   7. Feature cards & grids
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.feature-card {
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-green-soft);
  color: var(--color-green-muted);
}

.feature-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.feature-card__title {
  font-size: var(--text-base);
  font-weight: 650;
  margin-bottom: var(--space-2);
}

.feature-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   8. Problem / Why / Use cases
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.split__panel {
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.split__panel h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.split__panel p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

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

.comparison {
  max-width: 56rem;
  margin-inline: auto;
  padding: var(--space-5);
  text-align: center;
  background: color-mix(in srgb, var(--color-neutral-800) 88%, black);
  border-radius: var(--radius-xl);
}

.comparison__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

@media (max-width: 560px) {
  .comparison {
    max-width: 22rem;
  }
}

.comparison__caption {
  margin-top: var(--space-5);
  max-width: 40rem;
  margin-inline: auto;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.use-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.use-case {
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-base);
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-align: center;
}

@media (max-width: 800px) {
  .split {
    grid-template-columns: 1fr;
  }

  .use-cases {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   9. How it works
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  counter-reset: step;
}

.step {
  position: relative;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-green);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-lg);
}

.step:nth-child(4)::before {
  content: "✓";
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.step__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.step__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   10. Screenshots carousel
   -------------------------------------------------------------------------- */
.gallery {
  position: relative;
}

.carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.carousel__track {
  display: flex;
  transition: transform var(--duration-slow) var(--ease-out);
  touch-action: pan-y;
}

.carousel__slide {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-bg-subtle);
}

.carousel__slide img {
  width: min(100%, 18rem);
  /* drop-shadow follows device alpha — box-shadow would paint a white rectangle */
  filter: drop-shadow(0 16px 40px rgba(17, 16, 16, 0.18))
    drop-shadow(0 6px 14px rgba(17, 16, 16, 0.1));
  cursor: zoom-in;
}

@media (prefers-color-scheme: dark) {
  .carousel__slide img {
    filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.55))
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  }
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.carousel__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition:
    background var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.carousel__btn:hover {
  background: var(--color-bg-subtle);
}

.carousel__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.carousel__dots {
  display: flex;
  gap: var(--space-2);
}

.carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition:
    background var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.carousel__dot[aria-current="true"] {
  background: var(--color-green);
  transform: scale(1.25);
}

.carousel__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile swipe hint */
.gallery__hint {
  display: none;
  text-align: center;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

@media (max-width: 700px) {
  .gallery__hint {
    display: block;
  }
}

/* Desktop — show all screenshots in a row; hide pager controls */
@media (min-width: 901px) {
  .carousel {
    overflow: visible;
    background: var(--color-bg-subtle);
  }

  .carousel__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    transform: none !important;
    transition: none;
    touch-action: auto;
  }

  .carousel__slide {
    flex: none;
    width: auto;
    padding: var(--space-5) var(--space-2);
    background: transparent;
  }

  .carousel__slide img {
    width: 100%;
    max-width: 14rem;
  }

  .carousel__controls,
  .gallery__hint {
    display: none;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(0, 0, 0, 0.88);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration) var(--ease),
    visibility var(--duration) var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: min(92vw, 26rem);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

body.lightbox-open {
  overflow: hidden;
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.65rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  background: var(--color-green);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition:
    opacity var(--duration) var(--ease),
    visibility var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    background var(--duration-fast) var(--ease);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-green-hover);
  color: #fff;
  text-decoration: none;
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.back-to-top__icon {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 560px) {
  .back-to-top {
    right: var(--space-3);
    bottom: var(--space-3);
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    gap: 0;
  }

  .back-to-top__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .back-to-top__icon {
    font-size: 1.15rem;
  }
}

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faq {
  max-width: 44rem;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
  color: var(--color-text);
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-tertiary);
  transition: transform var(--duration) var(--ease);
  pointer-events: none;
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
}

.faq__answer {
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.faq__answer p + p {
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   12. Privacy / Support callouts
   -------------------------------------------------------------------------- */
.callout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.callout {
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.callout h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.callout p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

@media (max-width: 700px) {
  .callout-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta {
  margin-inline: auto;
  width: min(100% - 2.5rem, var(--container));
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background:
    linear-gradient(160deg, var(--color-green-soft), var(--color-bg-elevated) 55%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.cta__logo {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.cta__logo img {
  width: 100%;
  height: 100%;
  border-radius: 1.15rem;
  box-shadow: var(--shadow-md);
}

.cta .section__eyebrow {
  margin-bottom: var(--space-3);
}

.cta .section__title {
  margin-bottom: var(--space-3);
}

.cta p {
  max-width: 32rem;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  color: var(--color-text-secondary);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  /* Room for badge clear space + optional “coming soon” caption */
  padding-bottom: var(--space-4);
}

@media (min-width: 901px) {
  .hero__actions .app-store-badge img {
    height: 3.6rem; /* ~20% larger than the 48px desktop default */
  }

  .cta__actions .app-store-badge img {
    height: 3.6rem; /* ~20% larger than the 48px desktop default */
  }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  /* Always dark — independent of page colour scheme */
  --footer-bg: #0c0c0b;
  --footer-text: #f5f2ec;
  --footer-muted: #c8beb3;
  --footer-subtle: #8a847c;
  --footer-border: rgba(245, 242, 236, 0.1);
  --footer-link-hover: #8bc45e;

  margin-top: var(--space-9);
  padding-block: var(--space-7) var(--space-6);
  border-top: 1px solid var(--footer-border);
  background: var(--footer-bg);
  color: var(--footer-text);
  color-scheme: dark;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer .brand {
  color: var(--footer-text);
}

.site-footer .brand:hover {
  color: var(--footer-text);
}

.site-footer__brand p {
  font-size: var(--text-sm);
  color: var(--footer-muted);
  max-width: 16rem;
}

.site-footer__heading {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--footer-subtle);
  margin-bottom: var(--space-3);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__links a {
  font-size: var(--text-sm);
  color: var(--footer-muted);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--footer-link-hover);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--footer-border);
  font-size: var(--text-xs);
  color: var(--footer-subtle);
}

@media (max-width: 800px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   15. Inner pages (Privacy, Support, Changelog)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.page-hero__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}

.page-hero__lead {
  max-width: 40rem;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.page-hero__meta {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.prose {
  padding-block: var(--space-8);
}

.prose .container--narrow > * + * {
  margin-top: var(--space-5);
}

.prose .container--narrow > h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-9);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.prose .container--narrow > h2:first-child,
.prose .container--narrow > h2.mt-0 {
  margin-top: 0;
}

.prose .container--narrow > h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-7);
}

.prose p,
.prose li {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose strong {
  color: var(--color-text);
  font-weight: 600;
}

.toc {
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.toc__title {
  font-size: var(--text-sm);
  font-weight: 650;
  margin-bottom: var(--space-3);
}

.toc ol {
  list-style: decimal;
  padding-left: 1.25rem;
}

.toc a {
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-text-secondary);
}

.toc a:hover {
  color: var(--color-green);
}

/* Support cards */
.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.support-card {
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.support-card h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.support-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

@media (max-width: 600px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
}

/* Changelog */
.changelog {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.release {
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.release__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.release__version {
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--font-mono);
}

.release__date {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.release__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-green-muted);
  background: var(--color-green-soft);
  border-radius: var(--radius-full);
}

.release__list {
  list-style: disc;
  padding-left: 1.25rem;
}

.release__list li {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.release__list li + li {
  margin-top: var(--space-2);
}

.release__list strong {
  color: var(--color-text);
}

/* Contact strip */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.contact-strip p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}

.mt-0 {
  margin-top: 0 !important;
}