/* =====================================================================
   Awake landing site
   ---------------------------------------------------------------------
   Single stylesheet, no build step. Sections in order:

     01  Fonts
     02  Tokens (color, type, space, radius, motion)
     03  Reset and base
     04  Layout primitives
     05  Typography
     06  Buttons and links
     07  Site header and nav
     08  Site footer
     09  Hero
     10  Screenshots
     11  Screen tour (gallery)
     12  Challenge showcase
     13  How it works
     14  Features
     15  Privacy panel
     16  FAQ
     17  Prose pages (privacy, terms, support)
     18  Error page
     19  Motion and reveal
     20  Print

   Every value comes from a custom property on :root. If you find yourself
   typing a raw px or hex outside section 02, add a token instead.
   ===================================================================== */


/* =====================================================================
   01  Fonts
   Self-hosted Inter, copied from the app's assets/fonts. No network request.
   ===================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =====================================================================
   02  Tokens
   ===================================================================== */

:root {
  /* --- Brand constants -------------------------------------------------
     These two are the app's own colors: the adaptive icon background and
     the light splash background. Everything else is derived from them.  */
  --brand-navy: #0f3040;
  --brand-cream: #fffce1;
  --brand-amber: #f8c127;

  /* --- Light palette (default) ---------------------------------------- */
  --surface: #fffce1;
  --surface-2: #fbf6d2;
  --surface-3: #f3edc0;
  --surface-inverse: #0b242f;

  --on-surface: #0f3040;
  --on-surface-muted: #4a6675;
  --on-inverse: #f4f1dd;
  --on-inverse-muted: #9db4c0;

  --outline: #e2dbb2;
  --outline-strong: #cdc496;

  /* --accent      fills interactive surfaces (buttons, focus rings)
     --accent-text is the same idea for type and icons sitting directly on
                   --surface. They differ in light mode because the amber
                   only reaches 1.6:1 on cream, so text uses a bronze that
                   clears AA at 5.5:1 while keeping the warmth. */
  --accent: #0f3040;
  --accent-on: #fffce1;
  --accent-text: #8a5e00;
  --accent-soft: #ece5b7;

  /* --live is the "shipping now" dot. Green rather than brand amber so it
     reads as a status, not as decoration, and so it survives on both
     surfaces. Both values clear AA against their own background. */
  --live: #0f7a52;

  /* Phone frame around a real screenshot. Constant across both themes: a
     device is a physical object and reads wrong when it inverts. */
  --shot-frame: #0f3040;
  --shot-frame-edge: #16465b;

  --header-wash: rgb(255 252 225 / 0.82);
  --shadow-sm: 0 1px 2px rgb(15 48 64 / 0.06);
  --shadow-md: 0 10px 30px -12px rgb(15 48 64 / 0.22);
  --shadow-lg: 0 30px 70px -30px rgb(15 48 64 / 0.35);

  /* --- Type scale -------------------------------------------------------
     Fluid between a 360px and a 1440px viewport. step-0 is body copy.    */
  --step--1: clamp(0.82rem, 0.792rem + 0.12vw, 0.895rem);
  --step-0: clamp(1rem, 0.964rem + 0.16vw, 1.08rem);
  --step-1: clamp(1.125rem, 1.07rem + 0.24vw, 1.26rem);
  --step-2: clamp(1.3rem, 1.187rem + 0.5vw, 1.6rem);
  --step-3: clamp(1.5rem, 1.283rem + 0.96vw, 2.1rem);
  --step-4: clamp(1.8rem, 1.42rem + 1.69vw, 2.85rem);
  --step-5: clamp(2.15rem, 1.494rem + 2.92vw, 3.9rem);
  --step-6: clamp(2.55rem, 1.86rem + 3.07vw, 4.3rem);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono',
    Menlo, Consolas, monospace;

  --leading-tight: 1.06;
  --leading-snug: 1.22;
  --leading-normal: 1.65;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.08em;

  --measure: 68ch;
  --measure-short: 46ch;

  /* --- Spacing scale ---------------------------------------------------- */
  --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;

  /* Inner padding shared by every boxed component (.toc, .callout,
     .trouble, .contact-card) so they breathe as one system. Fluid, because
     a flat 2rem eats a 390px screen and looks mean on a 1440px one. */
  --card-pad-x: clamp(1.25rem, 0.88rem + 1.52vw, 2.25rem);
  --card-pad-y: clamp(1.25rem, 1.06rem + 0.76vw, 1.75rem);

  --section-y: clamp(4rem, 2.6rem + 6.2vw, 8.5rem);
  --container: 72rem;
  --container-narrow: 44rem;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

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

  /* --- Motion ------------------------------------------------------------
     Short distances, short durations. Section 19 turns all of it off under
     prefers-reduced-motion.                                              */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 520ms;

  color-scheme: light dark;
}

/* --- Dark palette -------------------------------------------------------
   Applied when the system asks for it, unless the visitor has explicitly
   chosen light with the toggle ([data-theme] wins, see below).           */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface: #0b242f;
    --surface-2: #0f3040;
    --surface-3: #16465b;
    --surface-inverse: #fffce1;

    --on-surface: #f4f1dd;
    --on-surface-muted: #9db4c0;
    --on-inverse: #0f3040;
    --on-inverse-muted: #4a6675;

    --outline: #1d445a;
    --outline-strong: #2d6280;

    --accent: #f8c127;
    --accent-on: #0f3040;
    --accent-text: #f8c127;
    --accent-soft: #1a4359;

    --live: #57d6a1;

    --shot-frame: #06171f;
    --shot-frame-edge: #16465b;

    --header-wash: rgb(11 36 47 / 0.82);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 10px 30px -12px rgb(0 0 0 / 0.55);
    --shadow-lg: 0 30px 70px -30px rgb(0 0 0 / 0.75);
  }
}

/* Manual override. Duplicated rather than nested so that choosing dark on a
   light system, and light on a dark system, both work. */
:root[data-theme='dark'] {
  --surface: #0b242f;
  --surface-2: #0f3040;
  --surface-3: #16465b;
  --surface-inverse: #fffce1;

  --on-surface: #f4f1dd;
  --on-surface-muted: #9db4c0;
  --on-inverse: #0f3040;
  --on-inverse-muted: #4a6675;

  --outline: #1d445a;
  --outline-strong: #2d6280;

  --accent: #f8c127;
  --accent-on: #0f3040;
  --accent-text: #f8c127;
  --accent-soft: #1a4359;

  --live: #57d6a1;

  --shot-frame: #06171f;
  --shot-frame-edge: #16465b;

  --header-wash: rgb(11 36 47 / 0.82);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 10px 30px -12px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 30px 70px -30px rgb(0 0 0 / 0.75);
}

:root[data-theme='dark'] { color-scheme: dark; }
:root[data-theme='light'] { color-scheme: light; }


/* =====================================================================
   03  Reset and base
   ===================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}

body {
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-normal);
  min-block-size: 100svb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'cv08' 1, 'ss03' 1;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

input,
button,
textarea,
select { font: inherit; color: inherit; }

::selection {
  background-color: var(--accent);
  color: var(--accent-on);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link. Visible the moment it takes focus, nowhere otherwise. */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* =====================================================================
   04  Layout primitives
   ===================================================================== */

.container {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.container--narrow {
  inline-size: min(100% - (var(--gutter) * 2), var(--container-narrow));
}

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

.section + .section { padding-block-start: 0; }

.section--edged {
  border-block-start: 1px solid var(--outline);
  padding-block-start: var(--section-y);
}

.section__head {
  max-inline-size: var(--measure);
  margin-block-end: var(--space-7);
}

.section__head > * + * { margin-block-start: var(--space-4); }

.stack > * + * { margin-block-start: var(--flow, var(--space-4)); }


/* =====================================================================
   05  Typography
   ===================================================================== */

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

h1 {
  font-size: var(--step-5);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 { font-size: var(--step-4); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li { text-wrap: pretty; }

.eyebrow {
  display: block;
  color: var(--accent-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Status pill: version and shipping state, above the headline. The dot is a
   flat fill, not an animation, so it says "released" rather than "loading". */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-full);
  background-color: var(--surface-2);
  color: var(--on-surface-muted);
  font-size: var(--step--1);
  font-weight: 500;
}

.status__dot {
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent);
}

.status strong {
  color: var(--on-surface);
  font-weight: 600;
}

.status__sep {
  color: var(--outline-strong);
  user-select: none;
}

.lede {
  max-inline-size: var(--measure);
  color: var(--on-surface-muted);
  font-size: var(--step-1);
}

.muted { color: var(--on-surface-muted); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}


/* =====================================================================
   06  Buttons and links
   ===================================================================== */

a {
  color: inherit;
  text-decoration-color: var(--outline-strong);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color var(--dur) var(--ease),
    text-decoration-color var(--dur) var(--ease);
}

a:hover { text-decoration-color: currentColor; }

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--on-surface);
  --btn-border: var(--outline-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.72em 1.35em;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-full);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-on);
  --btn-border: var(--accent);
}

.btn--ghost { --btn-bg: transparent; }
.btn--ghost:hover { background-color: var(--surface-2); }

.btn--lg { padding: 0.82em 1.5em; }

/* Store button. Two lines, like the official badge, but built from the
   site's own tokens so it themes with everything else. */
.btn--store {
  padding: 0.6em 1.5em 0.6em 1.25em;
  text-align: start;
}

.btn--store .btn__icon { inline-size: 1.6em; block-size: 1.6em; }

.btn__stack { display: grid; line-height: 1.2; }

.btn__stack small {
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0.75;
}

.btn__stack span {
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--on-surface-muted);
  --btn-border: var(--outline);
  cursor: not-allowed;
}

.btn[disabled]:hover,
.btn[aria-disabled='true']:hover {
  transform: none;
  box-shadow: none;
}

.btn__icon { flex: none; inline-size: 1.15em; block-size: 1.15em; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
}

.link-arrow svg {
  flex: none;
  inline-size: 1.1em;
  block-size: 1.1em;
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover svg { transform: translateX(3px); }

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.cta-note {
  margin-block-start: var(--space-4);
  color: var(--on-surface-muted);
  font-size: var(--step--1);
}


/* =====================================================================
   07  Site header and nav
   ===================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid transparent;
  background-color: var(--header-wash);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: border-color var(--dur) var(--ease);
}

.site-header.is-stuck { border-block-end-color: var(--outline); }

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.brand__mark {
  flex: none;
  inline-size: 1.9rem;
  block-size: 1.9rem;
}

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

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  color: var(--on-surface-muted);
  font-size: var(--step-0);
  font-weight: 500;
  text-decoration: none;
}

.nav__link:hover { color: var(--on-surface); }

.nav__link[aria-current='page'] {
  color: var(--on-surface);
  font-weight: 600;
}

/* Icon buttons: theme toggle, nav toggle */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--outline);
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--on-surface);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.icon-btn:hover {
  background-color: var(--surface-2);
  border-color: var(--outline-strong);
}

.icon-btn svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* The theme toggle swaps which glyph is drawn. Both live in the markup so
   there is no flash and no JS-authored DOM. */
.theme-toggle__moon { display: none; }
:root[data-theme='dark'] .theme-toggle__sun { display: none; }
:root[data-theme='dark'] .theme-toggle__moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle__sun { display: none; }
  :root:not([data-theme='light']) .theme-toggle__moon { display: block; }
}

/* Without JS the toggle cannot persist anything, so it is not shown. */
.theme-toggle { display: none; }
.js .theme-toggle { display: inline-flex; }

/* The hamburger only exists when JS can drive it. */
.nav-toggle { display: none; }

@media (width < 48rem) {
  .js .nav-toggle { display: inline-flex; }

  /* Collapsed panel. Only under .js: with JS off the list stays in flow and
     the site remains navigable. */
  .js .nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    max-block-size: calc(100svb - 100%);
    overflow-y: auto;
    display: none;
    padding: var(--space-3) var(--gutter) var(--space-6);
    border-block-end: 1px solid var(--outline);
    background-color: var(--surface);
    box-shadow: var(--shadow-md);
  }

  .js .nav[data-open='true'] { display: block; }

  .js .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .nav__link {
    display: block;
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--outline);
    font-size: var(--step-1);
  }

  .js .nav__list li:last-child .nav__link { border-block-end: 0; }

  /* Without JS, keep the row from crowding the brand. */
  .nav__list { flex-wrap: wrap; gap: var(--space-4); }
  .site-header__inner { flex-wrap: wrap; }
}

@media (width >= 48rem) {
  .nav-toggle { display: none !important; }
}


/* =====================================================================
   08  Site footer
   ===================================================================== */

.site-footer {
  margin-block-start: var(--section-y);
  border-block-start: 1px solid var(--outline);
  padding-block: var(--space-7);
  color: var(--on-surface-muted);
  font-size: var(--step--1);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-footer__brand { max-inline-size: 26ch; }

.site-footer__tagline { margin-block-start: var(--space-3); }

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
}

.site-footer__group h2 {
  margin-block-end: var(--space-3);
  color: var(--on-surface);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.site-footer__group ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__group a { text-decoration: none; }
.site-footer__group a:hover { color: var(--on-surface); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--outline);
}


/* =====================================================================
   09  Hero
   ===================================================================== */

.hero {
  position: relative;
  padding-block: clamp(3rem, 1.6rem + 6vw, 7rem) var(--section-y);
  overflow: hidden;
}

/* A single quiet radial wash behind the hero. No gradients elsewhere. */
.hero::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: 50%;
  z-index: -1;
  inline-size: min(120vw, 70rem);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--accent-soft) 0%,
    transparent 62%
  );
  opacity: 0.55;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (width >= 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-8);
  }
}

.hero__title {
  margin-block-start: var(--space-4);
  font-size: var(--step-6);
  max-inline-size: 19ch;
}

/* Keeps the last two words of the headline together so it never orphans. */
.nowrap { white-space: nowrap; }

.hero__lede {
  margin-block-start: var(--space-5);
  max-inline-size: 48ch;
  color: var(--on-surface-muted);
  font-size: var(--step-1);
}

.hero__cta { margin-block-start: var(--space-6); }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-block-start: var(--space-7);
  padding: 0;
  list-style: none;
  color: var(--on-surface-muted);
  font-size: var(--step--1);
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__proof svg {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--accent-text);
}

.hero__art {
  display: flex;
  justify-content: center;
}

/* Two real captures, fanned. Percentage widths and margins so the whole
   arrangement scales with the column instead of breaking at one size. */
.hero__shots {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  inline-size: min(100%, 30rem);
}

.hero__shots .shot {
  position: relative;
  flex: none;
  inline-size: 56%;
}

.hero__shots .shot:first-child {
  z-index: 2;
  rotate: -3deg;
}

.hero__shots .shot:last-child {
  z-index: 1;
  margin-inline-start: -18%;
  margin-block-start: 11%;
  rotate: 4deg;
}


/* =====================================================================
   10  Screenshots

   .shot frames a real capture in a phone body. Width-driven by default; the
   tour in section 11 flips it to height-driven so every panel in the strip
   lines up on one baseline.
   ===================================================================== */

.shot {
  padding: 0.4rem;
  border: 1px solid var(--shot-frame-edge);
  border-radius: 1.9rem;
  background-color: var(--shot-frame);
  box-shadow: var(--shadow-lg);
}

.shot img {
  inline-size: 100%;
  block-size: auto;
  border-radius: 1.55rem;
}


/* =====================================================================
   11  Screen tour

   A snap-scrolling filmstrip. Seven panels never fit a viewport at a size
   where the text inside them is still readable, so the strip scrolls at
   every breakpoint rather than reflowing into a grid that shrinks them.
   It bleeds to the viewport edges so the last panel is visibly cut off,
   which is what tells you there is more to the right.
   ===================================================================== */

.tour {
  --panel-h: clamp(21rem, 15rem + 22vw, 30rem);
  /* Half the height clears a framed 6:13 capture with room to spare, so
     every panel shares one column width and the captions below them all
     start on the same left edge. */
  --panel-w: calc(var(--panel-h) * 0.5);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--panel-w);
  gap: var(--space-6);
  margin-block-start: var(--space-7);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block-end: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--gutter);
  scrollbar-color: var(--outline-strong) transparent;
  scrollbar-width: thin;
}

.tour:focus-visible { outline-offset: -2px; }

/* Edge fades. A mask rather than an overlay, so the strip dissolves into
   whatever the page background is and both themes are handled for free.

   [data-fade] is written by the script, and only for an edge that actually
   has content past it, so the fade is a scroll affordance rather than
   decoration: it appears on the right until you reach the end, then moves
   to the left. With the script blocked the attribute never appears and the
   strip simply cuts off at the viewport edge, which is the behaviour this
   replaces. Physical `to right` because a gradient has no logical form; the
   site is LTR. */
.tour[data-fade] {
  --fade: clamp(2rem, 5vw, 4.5rem);
}

.tour[data-fade='end'] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
}

.tour[data-fade='start'] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade));
  mask-image: linear-gradient(to right, transparent, #000 var(--fade));
}

.tour[data-fade='both'] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade),
    #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade),
    #000 calc(100% - var(--fade)), transparent);
}

/* A mask would clip the keyboard focus ring at both ends and make it look
   broken, so drop it while the strip has focus. */
.tour:focus-visible[data-fade] {
  -webkit-mask-image: none;
  mask-image: none;
}

.tour__panel { scroll-snap-align: start; }

.tour__media {
  display: flex;
  justify-content: center;
  block-size: var(--panel-h);
}

/* Height-driven inside the strip, so every panel shares one top and bottom
   edge no matter what the capture's own aspect ratio is. */
.tour__media .shot { block-size: 100%; }
.tour__media .shot img { block-size: 100%; inline-size: auto; }

.tour__caption { margin-block-start: var(--space-5); }

.tour__caption h3 {
  font-size: var(--step-1);
  margin-block-end: var(--space-2);
}

.tour__caption p {
  color: var(--on-surface-muted);
  font-size: var(--step--1);
}

.tour-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  color: var(--on-surface-muted);
  font-size: var(--step--1);
}

.tour-hint svg { flex: none; inline-size: 1.1rem; block-size: 1.1rem; }


/* =====================================================================
   12  Challenge showcase
   ===================================================================== */

.challenges {
  display: grid;
  gap: 1px;
  margin-block-start: var(--space-7);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  background-color: var(--outline);
  overflow: hidden;
}

@media (width >= 40rem) {
  .challenges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 62rem) {
  .challenges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.challenge {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--surface);
  transition: background-color var(--dur) var(--ease);
}

.challenge:hover { background-color: var(--surface-2); }

/* Seven items never fill a two- or three-up grid evenly, so the last one
   takes the whole final row instead of leaving a bare cell behind. */
@media (width >= 40rem) {
  .challenge--wide { grid-column: 1 / -1; }
}

.challenge__icon {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  color: var(--accent-text);
}

.challenge__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--step-1);
  font-weight: 600;
}

.challenge__meta {
  color: var(--on-surface-muted);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.challenge p {
  color: var(--on-surface-muted);
  font-size: var(--step-0);
  max-inline-size: 42ch;
}

.challenge--wide p { max-inline-size: 62ch; }


/* =====================================================================
   13  How it works
   ===================================================================== */

.steps {
  display: grid;
  gap: var(--space-7);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (width >= 52rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}

.step {
  position: relative;
  padding-block-start: var(--space-5);
  border-block-start: 2px solid var(--outline-strong);
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-block-end: var(--space-3);
  color: var(--accent-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}

.step h3 { margin-block-end: var(--space-3); }

.step p { color: var(--on-surface-muted); max-inline-size: 38ch; }


/* =====================================================================
   14  Features
   ===================================================================== */

.features {
  display: grid;
  gap: var(--space-7) var(--space-6);
  margin-block-start: var(--space-7);
  padding: 0;
  list-style: none;
}

@media (width >= 44rem) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 68rem) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.feature__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-end: var(--space-4);
  color: var(--accent-text);
}

.feature h3 {
  font-size: var(--step-1);
  margin-block-end: var(--space-2);
}

.feature p { color: var(--on-surface-muted); max-inline-size: 40ch; }


/* =====================================================================
   15  Privacy panel
   The one inverted block on the page. It earns the emphasis.
   ===================================================================== */

.privacy-panel {
  border-radius: var(--radius-xl);
  background-color: var(--surface-inverse);
  color: var(--on-inverse);
  padding: clamp(2rem, 1.2rem + 3.6vw, 4rem);
}

.privacy-panel .eyebrow { color: var(--brand-amber); }
.privacy-panel h2 { max-inline-size: 20ch; }

.privacy-panel__lede {
  margin-block-start: var(--space-4);
  max-inline-size: var(--measure);
  color: var(--on-inverse-muted);
  font-size: var(--step-1);
}

.privacy-facts {
  display: grid;
  gap: var(--space-5) var(--space-6);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

@media (width >= 44rem) {
  .privacy-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.privacy-facts li {
  display: flex;
  gap: var(--space-3);
  color: var(--on-inverse-muted);
}

.privacy-facts strong {
  display: block;
  color: var(--on-inverse);
  font-weight: 600;
}

.privacy-facts svg {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.2em;
  color: var(--brand-amber);
}

.privacy-panel__foot { margin-block-start: var(--space-7); }

.privacy-panel .link-arrow { color: var(--brand-amber); }


/* Closing call to action. Bordered rather than filled: the inverted privacy
   panel is already the one heavy block on the page, and two of them fight. */
.closer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: clamp(1.75rem, 1.1rem + 2.8vw, 3rem) var(--card-pad-x);
  border: 1px solid var(--outline-strong);
  border-radius: var(--radius-xl);
  background-color: var(--surface-2);
}

.closer h2 { font-size: var(--step-3); max-inline-size: 20ch; }

.closer p {
  margin-block-start: var(--space-3);
  max-inline-size: 44ch;
  color: var(--on-surface-muted);
}


/* =====================================================================
   16  FAQ
   Built on <details> so it works with JS disabled. JS only adds
   single-open behaviour.
   ===================================================================== */

.faq {
  margin-block-start: var(--space-7);
  border-block-start: 1px solid var(--outline);
}

.faq__item { border-block-end: 1px solid var(--outline); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  list-style: none;
}

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

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

.faq__q::after {
  content: '';
  flex: none;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.15em;
  transition: rotate var(--dur) var(--ease);
}

.faq__item[open] .faq__q::after { rotate: 225deg; translate: 0 0.15em; }

.faq__a {
  padding-block-end: var(--space-6);
  max-inline-size: var(--measure);
  color: var(--on-surface-muted);
}

.faq__a > * + * { margin-block-start: var(--space-4); }


/* =====================================================================
   17  Prose pages
   privacy.html, terms.html, support.html
   ===================================================================== */

.page-head {
  padding-block: var(--space-8) var(--space-7);
  border-block-end: 1px solid var(--outline);
}

.page-head h1 { max-inline-size: 18ch; }

.page-head .lede { margin-block-start: var(--space-5); }

.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-5);
  color: var(--on-surface-muted);
  font-size: var(--step--1);
}

.prose {
  padding-block: var(--space-8);
  max-inline-size: var(--measure);
}

.prose > * + * { margin-block-start: var(--space-5); }

.prose h2 {
  margin-block-start: var(--space-8);
  font-size: var(--step-3);
  scroll-margin-block-start: 6rem;
}

.prose h3 {
  margin-block-start: var(--space-6);
  font-size: var(--step-1);
}

.prose h2 + *,
.prose h3 + * { margin-block-start: var(--space-4); }

/* Prose list styling applies to plain lists only. A list or item that
   carries its own class is a component (.troubleshoot, .trouble, .toc) and
   owns its box: without the :not([class]) guard these element selectors are
   more specific than the component's own class and silently flatten its
   padding. */
.prose ul:not([class]),
.prose ol:not([class]) {
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.prose li:not([class]) { padding-inline-start: var(--space-1); }

.prose li::marker { color: var(--on-surface-muted); }

/* :not(.btn) so a button dropped into prose keeps its own label color:
   this rule is more specific than .btn and would otherwise win. */
.prose a:not(.btn) { color: var(--accent-text); font-weight: 500; }

.prose strong { font-weight: 600; }

.prose code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

/* Table of contents on the long legal pages */
.toc {
  padding: var(--card-pad-y) var(--card-pad-x);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  background-color: var(--surface-2);
}

.toc h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.toc ol {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.toc a { color: inherit; font-weight: 500; text-decoration: none; }
.toc a:hover { color: var(--accent-text); text-decoration: underline; }

/* A callout for the disclaimers that must not be skimmed past */
.callout {
  padding: var(--card-pad-y) var(--card-pad-x);
  border: 1px solid var(--outline-strong);
  border-inline-start: 3px solid var(--accent-text);
  border-radius: var(--radius-md);
  background-color: var(--surface-2);
}

.callout > * + * { margin-block-start: var(--space-3); }

.callout__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-0);
  font-weight: 600;
}

.callout__title svg {
  flex: none;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  color: var(--accent-text);
}

/* Permission table. Scrolls inside itself rather than the page. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  inline-size: 100%;
  min-inline-size: 34rem;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: start;
}

.table-wrap th,
.table-wrap td {
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--outline);
  vertical-align: top;
  text-align: start;
}

.table-wrap thead th {
  background-color: var(--surface-2);
  font-weight: 600;
  white-space: nowrap;
}

.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td { border-block-end: 0; }

.table-wrap tbody th {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 500;
  white-space: nowrap;
}

.table-wrap td { color: var(--on-surface-muted); }

/* Troubleshooting entries on support.html */
.troubleshoot {
  display: grid;
  gap: var(--space-5);
  margin-block-start: var(--space-6);
  padding: 0;
  list-style: none;
}

.trouble {
  padding: var(--card-pad-y) var(--card-pad-x);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
}

/* One rhythm for everything in the card, so the paragraph that follows a
   step list is spaced like the one that precedes it. */
.trouble > * + * { margin-block-start: var(--space-4); }

.trouble h3 { font-size: var(--step-1); }

.trouble ol {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  color: var(--on-surface-muted);
}

.contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--card-pad-y) var(--card-pad-x);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  background-color: var(--surface-2);
}

.contact-card p { max-inline-size: 40ch; color: var(--on-surface-muted); }
.contact-card strong { display: block; color: var(--on-surface); }


/* =====================================================================
   18  Error page
   ===================================================================== */

.error-page {
  display: grid;
  place-items: center;
  min-block-size: 60svb;
  padding-block: var(--space-9);
  text-align: center;
}

/* Scoped with the parent so it outranks the `.error-page p` rule below,
   which would otherwise repaint the number with the muted body color. */
.error-page .error-page__code {
  font-size: var(--step-6);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--accent-text);
  line-height: 1;
}

.error-page h1 { margin-block-start: var(--space-5); }

.error-page p {
  margin: var(--space-5) auto 0;
  max-inline-size: var(--measure-short);
  color: var(--on-surface-muted);
}

.error-page .cta-group {
  justify-content: center;
  margin-block-start: var(--space-6);
}


/* =====================================================================
   19  Motion and reveal
   Reveal classes only bite when JS is present, so content is never hidden
   from a visitor without JavaScript.
   ===================================================================== */

.js .reveal {
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--dur-slow) var(--ease),
    translate var(--dur-slow) var(--ease);
}

.js .reveal.is-visible { opacity: 1; translate: 0 0; }

@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;
  }

  .js .reveal { opacity: 1; translate: none; }
  .btn:hover { transform: none; }
}


/* =====================================================================
   20  Print
   The legal pages get printed and filed. Make that not embarrassing.
   ===================================================================== */

@media print {
  .site-header,
  .site-footer__nav,
  .skip-link,
  .cta-group,
  .toc { display: none; }

  body { background: #fff; color: #000; font-size: 11pt; }

  .prose { max-inline-size: none; }

  a::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
  a[href^='#']::after { content: ''; }
}