/* ==========================================================================
   Catch marketing site — catch.bayanura.com
   Hand-authored CSS, no build step. One file, mobile-first.

   Visual system: "sticker & stitch" — cream paper field, thick ink
   outlines and hard offset shadows (matching the glove mascot's line
   art), baseball-red stitch arcs as the connective motif (a thought's
   flight path), and the app's blue as the single action colour.
   Aligned with the film's Papermorphic rules (2026-09-28): surfaces are
   opaque paper (nothing blurs), shadows are offsets not blurs, grain sits
   on the field only, and stitch red marks one thing per frame.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
}
/* Display face for headlines + wordmark. Single style: Black Italic.
   Served as a basic-latin+punctuation woff2 subset (8.8KB vs the 149KB
   source TTF, kept alongside for re-subsetting — see README). */
@font-face {
  font-family: 'Pliant';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Pliant-BlackItalic-subset.woff2') format('woff2');
}

/* ---- Tokens ---------------------------------------------------------- */

:root {
  --paper: #F6F4ED;        /* cream field, from the ball */
  --card: #FFFFFF;
  --ink: #131210;          /* line art + headings */
  --ink-soft: #4A4840;     /* body text — AA on paper */
  --ink-faint: #605D53;    /* meta text — AA at small sizes on paper and white */
  --stitch: #D4382F;       /* baseball-stitch red */
  --stitch-dark: #B12A22;  /* red that passes AA for text on paper */
  --blue: #2A5BD7;         /* action blue — AA with white text */
  --blue-bright: #5B8DFF;  /* the in-app Catch blue, decorative */
  --blue-ink: #1E44A5;
  /* In-app palette (mirrors the live catch3 PWA light theme — checked
     against the 2026-09-27 captures: white 24px cards, 0 2px 0 hard
     shadows, #2F6BFF strips and pills, #1A1A2E text, flat blue wallpaper) */
  --app-surface: #FFFFFF;
  --app-text: #1A1A2E;
  --app-text-2: #6E6B7B;
  --app-line: rgba(26, 26, 46, 0.08);
  --app-blue: #2F6BFF;
  --app-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  --app-backdrop: #2E7CC4; /* the app's default "Blue" wallpaper — flat, no gradient */
  --shadow: 4px 4px 0 rgba(19, 18, 16, 0.92);
  --shadow-sm: 3px 3px 0 rgba(19, 18, 16, 0.92);
  --radius: 16px;
  --border: 2px solid var(--ink);
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Pliant', 'Plus Jakarta Sans', system-ui, sans-serif;
  --container: 68rem;
  --header-h: 4.25rem;
}

/* ---- Reset-lite ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  /* Paper grain on the field only (Papermorphic): a tiled fractal-noise
     SVG at ~3% over the cream. Cards and UI are opaque, so they stay clean. */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--blue-ink); }
button { font: inherit; cursor: pointer; }
strong { color: var(--ink); font-weight: 700; }
::selection { background: var(--blue-bright); color: #fff; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1.1rem; border-radius: 999px;
  font-weight: 700; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; color: var(--paper); }

/* ---- Layout primitives ---------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 48em) { .container { padding-inline: 2rem; } }

.section { padding-block: 5.5rem; }
@media (min-width: 48em) { .section { padding-block: 8rem; } }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stitch-dark);
  margin-bottom: 1rem;
}
.kicker::before {
  content: '';
  width: 1.75rem; height: 2px;
  background: repeating-linear-gradient(90deg, var(--stitch) 0 5px, transparent 5px 9px);
}

.h-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: 0.005em;
}
h2.h-display { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1.2rem; }

.lede { font-size: clamp(1.125rem, 2.1vw, 1.4375rem); line-height: 1.55; max-width: 30em; }

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

/* Scroll reveal — opt-in, JS adds .in; without JS everything stays visible */
/* Rests visible (never opacity 0), so a fast jump, a screenshot or a
   slow observer never shows an empty section — it only settles the last
   few pixels and the last bit of ink. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0.4; transform: translateY(14px); transition: opacity 0.55s cubic-bezier(.16,1,.3,1), transform 0.55s cubic-bezier(.16,1,.3,1); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ---- Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  border: var(--border);
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(19,18,16,.92); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(19,18,16,.92); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { color: #fff; background: var(--blue-ink); }
.btn-ghost { background: var(--card); color: var(--ink); }
.btn-ghost:hover { color: var(--ink); }

/* Store badges — drawn in-house so the page stays self-contained */
.store-badges { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.badge-store {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1.25rem 0.6rem;
  background: var(--ink);
  color: var(--paper);
  border: var(--border);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  min-height: 3.5rem;
}
.badge-store:hover { color: var(--paper); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(19,18,16,.92); }
.badge-store:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(19,18,16,.92); }
.badge-store svg { width: 1.6rem; height: 1.6rem; flex: none; }
.badge-store .badge-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.badge-store .badge-txt small { font-size: 0.6875rem; font-weight: 500; opacity: 0.85; }
.badge-store .badge-txt span { font-size: 1.0625rem; font-weight: 700; }

/* On dark sections, badges invert to cream */
.on-dark .badge-store { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 3px 3px 0 rgba(0,0,0,.55); }
.on-dark .badge-store:hover { color: var(--ink); }

/* ---- Header ---------------------------------------------------------- */

/* Opaque paper — the film's rule: paper doesn't blur */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  margin-right: auto;
}
.brand svg, .brand img { width: 1.9rem; height: 1.9rem; color: var(--ink); } /* pin: don't inherit link blue */
/* header pairs the app-icon tile with the lettering-only wordmark
   (catch-wordmark.svg — the lockup cropped past its ball glyph) */
.brand .brand-lockup { width: auto; height: 2.1rem; }
.brand-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.55rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.site-nav { display: none; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.4rem 0.2rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--stitch); color: var(--ink); }
.header-cta { display: none; }
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0 0.6rem;
  background: var(--card);
  border: var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.nav-toggle span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform 0.18s ease, opacity 0.18s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-bottom: var(--border);
  background: var(--paper);
}
.mobile-nav.open { display: block; }
.mobile-nav ul { display: grid; gap: 0.25rem; padding: 1rem 1.25rem 1.25rem; }
.mobile-nav a {
  display: block;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 10px;
}
.mobile-nav a:hover { background: var(--card); }
.mobile-nav .mobile-cta { background: var(--blue); color: #fff; text-align: center; margin-top: 0.5rem; border: var(--border); box-shadow: var(--shadow-sm); }

@media (min-width: 56em) {
  .site-nav { display: flex; gap: 1.4rem; }
  .header-cta { display: inline-flex; padding: 0.55rem 1.2rem; font-size: 0.9375rem; white-space: nowrap; }
  .nav-toggle, .mobile-nav { display: none !important; }
}

/* ---- Hero ------------------------------------------------------------ */

.hero { padding-block: 3.5rem 4.5rem; position: relative; }
@media (min-width: 60em) { .hero { padding-block: 5.5rem 7rem; } }

/* One centred column: proof pill, the line, the rotating sub-line, one
   action, then the film at size (benchmark audit 2026-09-30). */
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.6rem;
  padding: 0.3rem 0.85rem 0.3rem 0.4rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}
.hero-proof img { width: 1.15rem; height: 1.15rem; }
.hero .hero-title {
  font-size: clamp(2.9rem, 8.4vw, 6.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 11em;
  text-wrap: balance;
  margin-bottom: 1.4rem;
}
.hero-red, .h-red { color: var(--stitch); }

/* Rotating line — "Catch any [word] and send it to [brand]".
   Flows and wraps naturally like the old site's hero; the brand
   (glyph + name) stays together as one unbreakable unit. */
.hero .hero-rotator { font-size: clamp(1.2rem, 2.5vw, 1.75rem); font-weight: 700; line-height: 1.3; color: var(--ink-soft); text-wrap: balance; margin-bottom: 2rem; max-width: 34em; }
.hero .rot-takeshi {
  display: inline-block;
  width: 1.7em;
  vertical-align: -0.55em;
  margin-right: 0.1em;
}
/* The word/brand swap has no transition of its own — the change rides the
   Takeshi catch: site.js swaps the text the instant the glove snaps shut,
   so the only motion is the app's own catch animation (no sliding text). */
/* the caught thing in stitch red — the one red thing in the frame (no
   gradients, no glow: the film's rule) */
.rot-word { display: inline-block; color: var(--stitch-dark); }
.rot-brand { color: var(--bc, var(--ink)); white-space: nowrap; }
.rot-glyph {
  display: inline-block;
  width: 0.8em; height: 0.8em;
  vertical-align: -0.06em;
  margin-right: 0.18em;
  border-radius: 24%;
}
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.8rem; }
.btn-hero { font-size: 1.125rem; padding: 0.95rem 2.1rem; gap: 0.5rem; }
.btn-hero .btn-hero-chev { width: 1rem; height: 1rem; }
.hero .hero-waitlist { flex: none; width: min(32rem, 100%); } /* not the 22rem flex-basis the final CTA uses: in this column it would become height */
.hero-waitlist .waitlist-form { justify-content: center; }
@media (min-width: 30em) { .hero-waitlist .waitlist-form { flex-wrap: nowrap; } }
.hero-fine { margin-top: 0.7rem; font-size: 0.8125rem; color: var(--ink-faint); }
.hero-fine a { color: inherit; }
.hero-meta { margin-top: 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink-faint); }
.hero-film {
  position: relative;
  width: min(100%, 68rem);
  margin: 3.25rem auto 0;
  padding: 0.6rem;
  background: var(--card);
  border: var(--border);
  border-radius: 22px;
  box-shadow: 6px 6px 0 rgba(19, 18, 16, 0.92);
}
/* the pill straddles the frame's bottom edge, clear of the film's own
   captions */
.film-pill {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem 0.55rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--stitch);
  white-space: nowrap;
  transition: transform 0.12s ease;
}
.film-pill:hover { color: var(--paper); transform: translateY(-1px); }
.film-pill svg { width: 0.95rem; height: 0.95rem; }
.film-pill span { font-weight: 500; opacity: 0.7; }
@media (max-width: 30em) { .film-pill { font-size: 0.8125rem; padding: 0.4rem 0.8rem 0.4rem 0.65rem; } }


/* --- Takeshi sprite animations ---------------------------------------
   The mascot's real animation frames (from the app's PNG sequences),
   packed into horizontal sprite sheets and played with steps(). Static
   fallback (reduced motion / old browsers) holds the final frame. */
.takeshi {
  display: block;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: 100% 0;
  pointer-events: none;
}
.takeshi-catch    { background-image: url('../img/sprite-catch.webp');    background-size: 2900% 100%; }
.takeshi-when     { background-image: url('../img/sprite-when.webp');     background-size: 3000% 100%; }
.takeshi-pass     { background-image: url('../img/sprite-pass.webp');     background-size: 3300% 100%; }
/* the film's end card: Confetti (72 frames, every 2nd packed = 36); the
   static pose is the last frame — confetti settled on the floor */
.takeshi-confetti { background-image: url('../img/sprite-confetti.webp'); background-size: 3600% 100%; }
/* static fallback pose: the pass sequence ends deflated, so rest on a
   mid-throw frame instead (frame 15 of 33 = 43.75%) */
.takeshi-pass  { background-position-x: 43.75%; }
@media (prefers-reduced-motion: no-preference) {
  /* steps(N, jump-none) for an N-frame sheet: treads land on k/(N-1),
     exactly the sheet's frame boundaries. steps(N-1) bleeds two frames. */
  .takeshi-catch    { animation: takeshi-run 2.4s steps(29, jump-none) 0.6s both; }
  .takeshi-when     { animation: takeshi-run 2.5s steps(30, jump-none) infinite; }
  .takeshi-pass     { animation: takeshi-run 2.75s steps(33, jump-none) infinite; }
  .takeshi-confetti { animation: takeshi-run 3s steps(36, jump-none) 0.5s both; animation-play-state: paused; }
  .takeshi-confetti.in { animation-play-state: running; } /* bursts once it scrolls into view (site.js) */
}
@keyframes takeshi-run {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}

/* The stage holds the 16:9 film teaser (assets/video/catch-teaser.*):
   muted, looping, on the film's own paper. Reduced motion holds the
   poster frame (site.js never starts playback). */
.demo-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.demo-stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* composer — the app's real quick-catch card: destination pill + type pill
   header, input line, then mic/attach circles and the dark "Catch!" pill.
   The pills sit on the user's pick from the start (the composer doesn't
   auto-suggest destinations — routing is the user's flick). */
.composer {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--app-surface);
  border-radius: 18px;
  padding: 0.8rem 0.9rem;
  box-shadow: var(--app-shadow);
}
.composer-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.dest-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #F2F3F5;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  padding: 0.28rem 0.6rem 0.28rem 0.32rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--app-text);
  min-width: 0;
}
.mini-tile {
  width: 1.35rem; height: 1.35rem;
  flex: none;
  display: grid;
  place-items: center;
}
.mini-tile img { width: 1.35rem; height: 1.35rem; border-radius: 24%; }
.pill-chev { width: 0.7rem; height: 0.7rem; color: var(--app-text-2); flex: none; }

.type-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--app-blue);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  flex: none;
}
.type-pill svg { width: 0.8rem; height: 0.8rem; }

.composer-input {
  border: 1.5px solid #C9D8F7;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  background: #FDFDFE;
}
.thought-text {
  display: block;
  font-weight: 500;
  color: var(--app-text);
  white-space: nowrap;
  overflow: hidden;
  max-width: var(--tw, 100%);
  border-right: 2px solid var(--app-blue);
  padding-right: 2px;
  font-size: 0.95rem;
  line-height: 1.3;
}
@media (max-width: 26em) { .thought-text { font-size: 0.85rem; } }

.composer-foot { display: flex; align-items: center; gap: 0.45rem; }
.mini-circ {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: #F2F3F5;
  display: grid;
  place-items: center;
  color: #45434E;
  flex: none;
}
.mini-circ svg { width: 0.85rem; height: 0.85rem; }
.catch-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #3E3E45;
  color: #fff;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.catch-btn svg { width: 0.85rem; height: 0.85rem; }

/* ---- Problem strip ---------------------------------------------------- */

.problem { position: relative; }
.problem-card {
  display: grid;
  gap: 2rem;
  align-items: center;
  background: var(--card);
  border: var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 2.25rem 1.75rem;
}
@media (min-width: 54em) {
  .problem-card { grid-template-columns: auto 1fr; padding: 3rem; gap: 3rem; }
}
.problem-card h2 { margin-bottom: 1.1rem; }

/* The "before Catch" vignette: thought bubble held overhead, four apps
   below asking "which one?", nowhere to release it. The loop: bubble pops
   in → apps bob in turn → bubble wobbles, evaporates → apps dim → repeat.
   Without motion (reduced motion / old browsers) the static composition
   still reads: thought + apps + crying glove. */
.problem-stage {
  position: relative;
  width: clamp(11rem, 20vw, 13.5rem);
  margin-inline: auto;
  padding-top: 3.9rem;
  padding-bottom: 3.6rem;
}
.problem-stage img { width: 72%; margin-inline: auto; }
.p-bubble {
  position: absolute;
  top: 0;
  left: 50%;
  background: var(--card);
  border: var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transform: translateX(-50%);
  transform-origin: 35% 115%;
}
.p-bubble::after {
  content: '';
  position: absolute;
  left: 32%;
  bottom: -0.48rem;
  width: 0.75rem; height: 0.75rem;
  background: var(--card);
  border-right: var(--border);
  border-bottom: var(--border);
  transform: rotate(45deg);
}
.p-apps {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
}
/* the real app icons, as stickers */
.p-app {
  width: 2.25rem; height: 2.25rem;
  border-radius: 24%;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(19, 18, 16, 0.92);
  background: var(--card);
}
@media (prefers-reduced-motion: no-preference) {
  .p-bubble { animation: p-bubble 8s ease-in-out infinite; }
  .p-app { animation: p-app 8s ease-in-out infinite var(--pd, 0s); }
  .p-app:nth-child(2) { --pd: 0.35s; }
  .p-app:nth-child(3) { --pd: 0.7s; }
  .p-app:nth-child(4) { --pd: 1.05s; }
}
@keyframes p-bubble {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
  4% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  6%, 52% { opacity: 1; transform: translateX(-50%) scale(1); }
  56% { transform: translateX(-50%) rotate(-2.5deg); }
  62% { transform: translateX(-50%) rotate(2deg); }
  66% { opacity: 1; transform: translateX(-50%) rotate(0deg); }
  78%, 100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.9); }
}
@keyframes p-app {
  0%, 16% { transform: none; opacity: 1; }
  20% { transform: translateY(-7px); }
  24% { transform: none; }
  36% { transform: translateY(-7px); }
  40%, 72% { transform: none; opacity: 1; }
  78%, 94% { opacity: 0.4; }
  100% { opacity: 1; }
}
.problem-card p { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.55; max-width: 30em; }
.problem-card p + p { margin-top: 1.1rem; }

/* ---- Feature split sections ------------------------------------------ */

.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 56em) {
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .split.flip > .split-media { order: 2; }
}
.split h2 { margin-bottom: 1.1rem; }
.split p + p { margin-top: 1rem; }
.split-copy p:not(.fineprint) { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.55; max-width: 26em; }
.fineprint { font-size: 0.8125rem; color: var(--ink-faint); font-weight: 500; max-width: 34em; }
.split-media { position: relative; }
.split-media > img { width: clamp(9rem, 20vw, 13rem); margin-inline: auto; }

/* Phone frame — holds the inbox scene (rebuilt from the real iPhone
   capture, see "Inbox scene" below). */
.phone {
  margin-inline: auto;
  width: min(17.5rem, 80vw);
  background: var(--ink);
  border: var(--border);
  border-radius: 38px;
  padding: 10px;
  box-shadow: var(--shadow);
}
.phone-screen {
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 29px;
  overflow: hidden;
  background: var(--app-backdrop);
}
.phone-inbox .phone-screen { aspect-ratio: 1206 / 2622; container-type: inline-size; background: #3F7FD8; }

/* ==========================================================================
   Scenes — small looping demos built from the app's own UI. Every scene is
   a pure CSS timeline: one duration per scene, every moving part keyed to
   a percentage of it, so the parts stay in sync. site.js adds .is-live
   while a scene is on screen; off screen it holds still. Base styles (no
   animation) are the scene's one telling frame, which is what reduced
   motion shows (the global reduce block collapses every animation).
   ========================================================================== */
.scene { position: relative; overflow: hidden; }
.js .scene:not(.is-live),
.js .scene:not(.is-live) * { animation-play-state: paused !important; }

/* ---- The mini composer — the app's quick-catch card -------------------
   Blue band with the Catch / Task pills, the checkbox line (placeholder
   and typed text stacked in one cell), the footer and the Catch! button,
   grey until there's text. Sized in em so a scene can scale it with
   font-size alone. */
.mc {
  position: relative;
  z-index: 2;
  width: 19em;
  max-width: 88%;
  font-size: 0.8125rem;
  text-align: left;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 1.1em;
  overflow: hidden;
  box-shadow: 0 0.3em 0 rgba(19, 18, 16, 0.92);
}
.mc-band { display: flex; gap: 0.4em; padding: 0.5em 0.55em; background: var(--app-blue); }
.mc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.18em 0.6em 0.18em 0.25em;
  border-radius: 999px;
  background: #fff;
  color: var(--app-text);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.25;
}
.mc-pill img, .mc-pill svg { width: 1.15em; height: 1.15em; flex: none; }
.mc-body { display: flex; align-items: center; gap: 0.6em; padding: 0.8em 0.85em 0.65em; }
.mc-box { width: 1.1em; height: 1.1em; flex: none; border: 1.5px solid var(--app-text); border-radius: 0.3em; }
.mc-line { display: grid; min-width: 0; }
.mc-line > * { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; line-height: 1.3; }
.mc-ph { color: #A09EAB; font-weight: 500; opacity: 0; }
.mc-type { color: var(--app-text); font-weight: 700; }
.mc-chip {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: -0.15em 0.85em 0.65em;
  padding: 0.3em 0.55em;
  border: 1px dashed #B9CBF5;
  border-radius: 0.6em;
  color: var(--app-blue);
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.mc-chip svg { width: 1em; height: 1em; flex: none; }
.mc-foot { display: flex; align-items: center; gap: 0.4em; padding: 0.45em 0.55em; background: #F4F4F7; border-top: 1px solid var(--app-line); }
.mc-ic { width: 1.85em; height: 1.85em; border-radius: 50%; background: #fff; border: 1px solid var(--app-line); display: grid; place-items: center; color: #8C8A97; flex: none; }
.mc-ic svg { width: 0.95em; height: 0.95em; }
.mc-go {
  margin-left: auto;
  padding: 0.22em 0.85em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--app-blue);
  color: #fff;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.95em;
  letter-spacing: 0.01em;
}
.mc-bars { display: inline-flex; align-items: center; gap: 0.18em; height: 1.1em; }
.mc-bars i { width: 0.22em; height: 100%; border-radius: 0.2em; background: var(--stitch); animation: sc-bar 0.9s ease-in-out infinite; }
.mc-bars i:nth-child(2n) { animation-delay: -0.3s; }
.mc-bars i:nth-child(3n) { animation-delay: -0.55s; }
.mc-bars i:nth-child(5n) { animation-delay: -0.15s; }
@keyframes sc-bar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* "Caught!" — the app's toast, as a sticker */
.sc-toast {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem 0.3rem 0.35rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.95rem;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 0);
}
.sc-toast img { width: 1.25rem; height: 1.25rem; }
/* the tap — a soft ring where the finger lands */
.sc-tap {
  position: absolute;
  left: 50%; top: 50%;
  width: 3rem; height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
}

/* ---- Shared timelines ----------------------------------------------------
   Standard (7 s): trigger 8–17% · composer in 17–24% · typing 25–45% ·
   Catch! 49% · out 52–57% · toast 57–86%.
   Late (7 s), for scenes whose trigger is a panel (share sheet, Quick
   Settings): panel 3–27% · composer in 27–33% · typing 35–52% · Catch! 55%
   · out 57–61% · toast 62–88%. */
@keyframes sc-pop {
  0%, 17% { opacity: 0; transform: translateY(8px) scale(0.9); }
  21% { opacity: 1; transform: scale(1.03); }
  24%, 51% { opacity: 1; transform: none; }
  56%, 100% { opacity: 0; transform: translateY(-18px) scale(0.6); }
}
@keyframes sc-ph { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes sc-type {
  0%, 25% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(18, end); }
  45%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes sc-go {
  0%, 24% { background-color: #A3A1AD; transform: none; }
  27%, 47% { background-color: var(--app-blue); transform: none; }
  49% { background-color: var(--app-blue); transform: scale(0.86); }
  52%, 100% { background-color: var(--app-blue); transform: none; }
}
@keyframes sc-toast {
  0%, 55% { opacity: 0; transform: translate(-50%, 10px); }
  59%, 84% { opacity: 1; transform: translate(-50%, 0); }
  89%, 100% { opacity: 0; transform: translate(-50%, 0); }
}
@keyframes sc-tap {
  0%, 9% { opacity: 0; transform: scale(0.3); }
  11% { opacity: 0.9; transform: scale(0.7); }
  17%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes sc-dim { 0%, 17% { opacity: 1; } 21%, 53% { opacity: 0.4; } 58%, 100% { opacity: 1; } }
@keyframes sc-key-a {
  0%, 8% { transform: none; box-shadow: 0 4px 0 var(--ink); }
  10%, 15% { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
  17%, 100% { transform: none; box-shadow: 0 4px 0 var(--ink); }
}
@keyframes sc-key-b {
  0%, 11% { transform: none; box-shadow: 0 4px 0 var(--ink); }
  13%, 15% { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
  17%, 100% { transform: none; box-shadow: 0 4px 0 var(--ink); }
}
@keyframes sc-pop-late {
  0%, 26% { opacity: 0; transform: translateY(8px) scale(0.9); }
  30% { opacity: 1; transform: scale(1.03); }
  33%, 56% { opacity: 1; transform: none; }
  61%, 100% { opacity: 0; transform: translateY(-18px) scale(0.6); }
}
@keyframes sc-ph-late { 0%, 34% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes sc-type-late {
  0%, 35% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(18, end); }
  52%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes sc-go-late {
  0%, 34% { background-color: #A3A1AD; transform: none; }
  37%, 53% { background-color: var(--app-blue); transform: none; }
  55% { background-color: var(--app-blue); transform: scale(0.86); }
  58%, 100% { background-color: var(--app-blue); transform: none; }
}
@keyframes sc-toast-late {
  0%, 61% { opacity: 0; transform: translate(-50%, 10px); }
  65%, 86% { opacity: 1; transform: translate(-50%, 0); }
  90%, 100% { opacity: 0; transform: translate(-50%, 0); }
}
@keyframes sc-tap-late {
  0%, 12% { opacity: 0; transform: scale(0.3); }
  14% { opacity: 0.9; transform: scale(0.7); }
  20%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes sc-dim-late { 0%, 26% { opacity: 1; } 30%, 58% { opacity: 0.35; } 63%, 100% { opacity: 1; } }

/* ---- Capture from anywhere: the bento ---------------------------------
   Seven ways in, each a scene. 6-column grid on desktop: two wide tiles,
   three, then two wide. */
.ways {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 44em) and (max-width: 59.99em) {
  .ways { grid-template-columns: repeat(2, 1fr); }
  .way:last-child { grid-column: 1 / -1; } /* 7 tiles: no orphan in the last row */
}
@media (min-width: 60em) {
  .ways { grid-template-columns: repeat(6, 1fr); }
  .way { grid-column: span 2; }
  .way-wide { grid-column: span 3; }
}
.way {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.way-stage {
  background: var(--paper);
  border-bottom: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.way-dark .way-stage { background: #1C1B19; border-bottom-color: rgba(246, 244, 237, 0.2); }
.ways .scene { height: 14.5rem; display: grid; place-items: center; }
.ways .scene > * { grid-area: 1 / 1; }
.way-copy { display: grid; gap: 0.3rem; padding: 1.05rem 1.2rem 1.25rem; }
.way-tag {
  justify-self: start;
  padding: 0.18rem 0.55rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.way-copy h3 { margin: 0.25rem 0 0; font-size: 1.125rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.way-copy p { font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.5; }

/* keycaps — ⌃ + space / ⌘ + V */
.keycap {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding-inline: 0.75rem;
  background: var(--card);
  border: var(--border);
  border-radius: 9px;
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.keycap-wide { min-width: 6rem; font-size: 0.875rem; letter-spacing: 0.02em; }
.keycap-plus { font-weight: 700; color: var(--ink-faint); padding-inline: 0.15rem; }
.sc-keys { position: absolute; z-index: 3; left: 1rem; bottom: 0.75rem; display: flex; align-items: center; gap: 0.3rem; }
.sc-keys .k-a { animation: sc-key-a 7s infinite; }
.sc-keys .k-b { animation: sc-key-b 7s infinite; }

/* 1 · ⌃ Space over a desktop window */
.win {
  width: min(24rem, 90%);
  height: auto;
  align-self: start;
  margin-top: 1.95rem;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: sc-dim 7s infinite;
}
.win-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.6rem; border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 15%, transparent); background: #F3F1EA; }
.win-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #FF5F57; }
.win-bar i:nth-child(2) { background: #FEBC2E; }
.win-bar i:nth-child(3) { background: #28C840; }
.win-bar span { margin-left: 0.4rem; font-size: 0.75rem; font-weight: 700; color: var(--ink-faint); }
.win-body, .page { display: grid; gap: 0.45rem; padding: 0.8rem 0.9rem; }
.win-body b, .page b { font-size: 0.9rem; color: var(--ink); }
.win-body b { font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.win-body .wl { display: flex; align-items: center; gap: 0.5rem; height: auto; background: none; border-radius: 0; font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; overflow: hidden; }
.win-body .wl::before { content: ""; flex: none; width: 0.72rem; height: 0.72rem; border: 1.5px solid #B9B5A6; border-radius: 50%; box-sizing: border-box; }
.win-body .wl-done { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.win-body .wl-done::before { background: var(--app-blue); border-color: var(--app-blue); box-shadow: inset 0 0 0 2px #fff; }
.win-body { gap: 0.35rem; padding: 0.65rem 0.9rem 0.8rem; }
/* a Mac menu bar across the top of the ⌃ Space tile, so it reads as a desktop */
.mac-bar {
  position: absolute;
  z-index: 1;
  top: 0; left: 0; right: 0;
  height: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 0.85rem;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(19, 18, 16, 0.08);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink);
}
.mac-bar svg { width: 0.75rem; height: 0.75rem; }
.mac-bar b { font-weight: 800; }
.mac-bar em { margin-left: auto; font-style: normal; color: var(--ink-soft); }
.win-body span, .page > span:not(.page-img) { height: 0.5rem; border-radius: 3px; background: #E4E1D8; }
.win-body .short, .page .short { width: 62%; }
.sc-hotkey .mc { animation: sc-pop 7s infinite; }
.sc-hotkey .mc-ph { animation: sc-ph 7s infinite; }
.sc-hotkey .mc-type { animation: sc-type 7s infinite; }
.sc-hotkey .mc-go { animation: sc-go 7s infinite; }
.sc-hotkey .sc-toast { animation: sc-toast 7s infinite; }

/* 5 · Android Quick Settings — pull the shade, tap the tile */
.qs {
  position: absolute;
  z-index: 1;
  top: 0; left: 0; right: 0;
  padding: 1rem 1rem 1.2rem;
  background: #ECE8F3;
  border-bottom: 2px solid var(--ink);
  border-radius: 0 0 1.3rem 1.3rem;
  animation: sc-qs-shade 7s infinite;
}
.qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.qs-t {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.6rem;
  padding: 0 0.8rem;
  border-radius: 1.3rem;
  background: #DAD4E4;
  color: #1D1B20;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.qs-on { background: #C9BFE0; }
.qs-new { background: var(--app-blue); color: #fff; overflow: visible; animation: sc-qs-on 7s infinite; }
.qs-new img { width: 1.35rem; height: 1.35rem; }
.qs-new .sc-tap { animation: sc-tap-late 7s infinite; }
.qs-handle { display: block; width: 2.2rem; height: 0.25rem; margin: 0 auto 0.8rem; border-radius: 3px; background: #9C95A8; }
.sc-qs .mc { opacity: 0; animation: sc-pop-late 7s infinite; }
.sc-qs .mc-ph { animation: sc-ph-late 7s infinite; }
.sc-qs .mc-type { animation: sc-type-late 7s infinite; }
.sc-qs .mc-go { animation: sc-go-late 7s infinite; }
.sc-qs .sc-toast { animation: sc-toast-late 7s infinite; }
@keyframes sc-qs-shade {
  0%, 3% { transform: translateY(-105%); }
  10%, 22% { transform: none; }
  27%, 100% { transform: translateY(-105%); }
}
@keyframes sc-qs-on {
  0%, 15% { background-color: #DAD4E4; color: #1D1B20; }
  16%, 100% { background-color: var(--app-blue); color: #fff; }
}

/* 6 · Share sheet — from a web page, share to Catch */
.page {
  align-self: start;
  width: min(20rem, 88%);
  margin-top: 0.9rem;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  animation: sc-dim-late 7s infinite;
}
.page-url {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: #EEECE6;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.page-url svg { width: 0.7rem; height: 0.7rem; }
.page-img { height: 3.4rem; border-radius: 8px; background: linear-gradient(135deg, #CFDDF7, #E9D9F2); }
.sheet {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  width: min(21rem, 94%);
  padding: 0.5rem 1rem 1rem;
  background: #F2F2F5;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 1.1rem 1.1rem 0 0;
  transform: translate(-50%, 105%);
  animation: sc-sheet 7s infinite;
}
.sheet-grab { display: block; width: 2.2rem; height: 0.25rem; margin: 0 auto 0.75rem; border-radius: 3px; background: #B9B7C0; }
.sheet-apps { display: flex; justify-content: space-between; gap: 0.6rem; }
.sheet-app { position: relative; display: grid; justify-items: center; gap: 0.25rem; font-size: 0.625rem; font-weight: 600; color: #4A4855; }
.sheet-app img, .sheet-app > i { width: 2.7rem; height: 2.7rem; border-radius: 0.7rem; }
.sheet-app > i { background: #D6D4DC; }
.sheet-app .sc-tap { top: 1.35rem; animation: sc-tap-late 7s infinite; }
.sc-share .mc { animation: sc-pop-late 7s infinite; }
.sc-share .mc-ph { animation: sc-ph-late 7s infinite; }
.sc-share .mc-type { animation: sc-type-late 7s infinite; }
.sc-share .mc-go { animation: sc-go-late 7s infinite; }
.sc-share .sc-toast { animation: sc-toast-late 7s infinite; }
@keyframes sc-sheet {
  0%, 4% { transform: translate(-50%, 105%); }
  10%, 22% { transform: translate(-50%, 0); }
  27%, 100% { transform: translate(-50%, 105%); }
}

/* 7 · Paste — ⌘V, the clipboard lands in the composer */
.sc-clip .mc { animation: sc-out 7s infinite; }
.sc-clip .mc-ph { animation: sc-ph-clip 7s infinite; }
.sc-clip .mc-pasted { animation: sc-paste 7s infinite; }
.sc-clip .mc-go { animation: sc-go-clip 7s infinite; }
.sc-clip .sc-toast { animation: sc-toast 7s infinite; }
@keyframes sc-out {
  0%, 51% { opacity: 1; transform: none; }
  57%, 87% { opacity: 0; transform: translateY(-24px) scale(0.7); }
  93%, 100% { opacity: 1; transform: none; }
}
@keyframes sc-ph-clip { 0%, 13% { opacity: 1; } 14%, 56% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes sc-paste {
  0%, 13% { opacity: 0; background-color: transparent; }
  14% { opacity: 1; background-color: #FFEE99; }
  28%, 56% { opacity: 1; background-color: transparent; }
  57%, 100% { opacity: 0; background-color: transparent; }
}
@keyframes sc-go-clip {
  0%, 13% { background-color: #A3A1AD; transform: none; }
  15%, 47% { background-color: var(--app-blue); transform: none; }
  49% { background-color: var(--app-blue); transform: scale(0.86); }
  52%, 56% { background-color: var(--app-blue); transform: none; }
  57%, 100% { background-color: #A3A1AD; transform: none; }
}
.sc-clip .mc { align-self: start; margin-top: 1.1rem; } /* clear of the ⌘ V keycaps */
@media (max-width: 30em) { .sc-hotkey .mc { margin-top: -2.5rem; } }

/* ---- Integrations ----------------------------------------------------- */

.integrations-head { max-width: 44em; margin-inline: auto; text-align: center; }

/* Click-to-expand detail: the catch window aimed at the selected tool */
.int-detail {
  margin-top: 1.5rem;
  background: var(--card);
  border: var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 1.5rem 1.75rem 1.75rem;
}
.int-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.int-detail-brand { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; }
.int-detail-brand img { width: 2rem; height: 2rem; flex: none; border-radius: 24%; }
.int-detail-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--ink);
}
.int-detail-close {
  width: 2.25rem; height: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.int-detail-close:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(19,18,16,.92); }
.int-detail-close svg { width: 0.9rem; height: 0.9rem; }
.int-detail-body { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 54em) { .int-detail-body { grid-template-columns: 1fr 1.15fr; gap: 2.5rem; } }
.intd-desc { font-size: 1rem; color: var(--ink-soft); margin-bottom: 1rem; }
.intd-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
.intd-types { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.intd-type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--app-blue);
  border: none;
  border-radius: 999px;
  padding: 0.38rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.intd-type svg { width: 0.85rem; height: 0.85rem; }
.intd-type[aria-pressed="false"] { background: #E9EBEF; color: var(--ink); }
.intd-type[aria-pressed="false"] svg { color: var(--ink-faint); }
.intd-hint { font-size: 0.875rem; color: var(--ink-faint); }
.intd-stage {
  background: var(--app-backdrop);
  border-radius: 16px;
  padding: 1.25rem;
}
.intd-stage .thought-text { border-right-color: transparent; } /* static preview, no caret */

/* ---- Waits (inbox) + archive ------------------------------------------ */

.split-media > .inbox-mascot {
  position: absolute;
  top: -4rem;
  right: -0.6rem;
  width: clamp(5.25rem, 8.5vw, 6.5rem);
  transform: rotate(-8deg);
  z-index: 2;
}
@media (min-width: 56em) { .split-media > .inbox-mascot { right: 2rem; } }

/* ---- Pricing ------------------------------------------------------------ */

/* Catch Free and Catch Pro, side by side (the film's two cards) */
.pricing-grid {
  display: grid;
  gap: 1.5rem;
  margin: 3.25rem auto 0;
  align-items: stretch;
  max-width: 50rem;
}
@media (min-width: 48em) { .pricing-grid { grid-template-columns: 1fr 1fr; } }

.plan {
  position: relative;
  background: var(--card);
  border: var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 2.25rem 1.9rem 2rem;
  display: flex;
  flex-direction: column;
}
.plan h3 { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.75rem; color: var(--ink); margin-bottom: 0.35rem; }
.plan ul { display: grid; gap: 0.65rem; margin-bottom: 1.9rem; }
.plan li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9720rem; }
.plan li svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--stitch); margin-top: 0.18rem; }
.plan .btn { margin-top: auto; align-self: flex-start; }

.plan-pro { background: var(--ink); color: #DDDACE; }
.plan-pro h3 { color: var(--paper); }
.plan-pro strong { color: var(--paper); }
.plan-pro li svg { color: var(--blue-bright); }
.plan-pro .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 3px 3px 0 rgba(0,0,0,.55); }

/* "14.99 once" — the film's Pro card: the number dominates, "once" wears
   the stitched underline, the three currencies sit beneath */
.plan-price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 4rem);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.plan-pro .plan-price, .plan-pro .plan-price .plan-price-term { color: var(--paper); }
.plan-price .plan-price-term {
  font-size: 0.6em;
  color: var(--ink);
  padding-bottom: 0.05em;
  background: repeating-linear-gradient(90deg, var(--stitch) 0 6px, transparent 6px 11px) bottom / 100% 3px no-repeat;
}
.plan-price-alt {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #B9B5A6;
  margin-bottom: 1.5rem;
}

.plan-free .plan-price { margin-bottom: 1.5rem; }
.plan .slots { margin-bottom: 1.4rem; }
.pricing-note { margin-top: 1.75rem; text-align: center; font-size: 0.9375rem; color: var(--ink-faint); }

/* ---- Integration slots (pricing cards) ------------------------------- */

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

.slots { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.slot { width: 1.6rem; height: 1.6rem; border-radius: 24%; display: block; }
.slot-empty { box-sizing: border-box; border: 2px dashed color-mix(in srgb, var(--ink) 28%, transparent); }
.slot-more { display: grid; place-items: center; width: auto; padding-inline: 0.4rem; border-radius: 0.45rem; background: rgba(246, 244, 237, 0.14); color: var(--paper); font-size: 0.75rem; font-weight: 700; }
.plan-pro .slot:not(.slot-more) { box-shadow: 0 0 0 1.5px rgba(246, 244, 237, 0.28); }

/* ---- FAQ ----------------------------------------------------------------- */

.faq-list { max-width: 46rem; margin: 3rem auto 0; display: grid; gap: 0.9rem; }
.faq-item {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  margin-left: auto;
  flex: none;
  width: 1.7rem; height: 1.7rem;
  display: grid;
  place-items: center;
  border: var(--border);
  border-radius: 50%;
  background: var(--paper);
  font-weight: 700;
  transition: transform 0.18s ease;
}
.faq-item[open] summary::after { content: '–'; transform: rotate(180deg); }
.faq-item .faq-body { padding: 0 1.3rem 1.25rem; font-size: 0.98rem; }
.faq-item .faq-body p + p { margin-top: 0.7rem; }

/* ---- Final CTA ------------------------------------------------------------ */

.cta-final {
  background: var(--ink);
  color: #DDDACE;
  border-top: var(--border);
}
.cta-final .container {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  text-align: center;
  justify-items: center;
}
.cta-final .cta-mascot { width: clamp(11rem, 22vw, 15rem); }
.cta-final h2 { color: var(--paper); margin-bottom: 0.9rem; }
.cta-final h2 .cta-red { color: #E86A5E; } /* the film's "Keep moving." red, lifted for the ink field */
.cta-final .lede { color: #B9B5A6; margin-inline: auto; margin-bottom: 2rem; }
.cta-final .store-badges { justify-content: center; }
.cta-final .cta-desktop-line { margin-top: 1rem; font-size: 0.9375rem; color: #B9B5A6; }
.cta-final .cta-desktop-line a { color: var(--blue-bright); }

/* ---- Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #B9B5A6;
  padding: 3.5rem 0 2.5rem;
  border-top: 2px solid rgba(246, 244, 237, 0.18);
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand .brand-name { color: var(--paper); font-size: 1.7rem; }
.footer-brand p { margin-top: 0.8rem; max-width: 22em; }
/* Bayanura lockup — bone on ink (SPEC.md), sized to the footer text scale */
.footer-bayanura {
  display: block;
  height: 1.6rem;
  width: auto;
  margin-top: 1.25rem;
}
.site-footer h4 {
  color: var(--paper);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.site-footer ul { display: grid; gap: 0.6rem; }
.site-footer a { color: #B9B5A6; text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(246, 244, 237, 0.14);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.875rem;
}

/* ---- CTA mode (see the CTA MODE SWITCH note on <body>) ----------------- */
/* body[data-cta-mode="waitlist"] shows .waitlist-only and hides .launch-only;
   any other value (use "launch") does the reverse. Pure CSS — works without
   JS. */
body:not([data-cta-mode="waitlist"]) .waitlist-only { display: none !important; }
body[data-cta-mode="waitlist"] .launch-only { display: none !important; }

/* Waitlist form (hero + final CTA) */
.waitlist-action { flex: 1 1 22rem; min-width: 0; }

.waitlist-form { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.waitlist-input {
  flex: 1 1 12rem;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 0.75rem 1.3rem;
  background: var(--card);
  border: var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.waitlist-input::placeholder { color: var(--ink-faint); }
.waitlist-form .btn { flex: none; }
.waitlist-note {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.waitlist-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.waitlist-status {
  margin-top: 0.2rem;
  font-weight: 700;
  color: var(--ink);
}
.waitlist-status.is-error { color: var(--stitch-dark); font-weight: 600; }
/* Honeypot — off-canvas, never display:none (some bots skip hidden inputs) */
.waitlist-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Platform cards while the stores aren't live — dashed "soon" chip in the
   button's slot (mirrors the Jira coming-soon card treatment) */
.plat-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 0.55rem 1.2rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-faint);
  border: 2px dashed rgba(19, 18, 16, 0.35);
  border-radius: 999px;
}

/* Second instance in the dark final-CTA section */
.waitlist-on-dark { max-width: 34rem; }
.cta-final .waitlist-on-dark { margin-inline: auto; }
.waitlist-on-dark .waitlist-note { color: rgba(246, 244, 237, 0.72); }
.waitlist-on-dark .waitlist-status { color: var(--paper); }
.waitlist-on-dark .waitlist-status.is-error { color: #FFB4AC; }

/* ==========================================================================
   Film chapter loops + Animatrix motion (2026-09-29)
   Loops are cut from the Catch film (v7B); motion recipes are approved
   Animatrix entries, named on each block. Everything here stands still
   under prefers-reduced-motion (site.js never starts a loop; the global
   reduce block above zeroes the animations).
   ========================================================================== */

/* ---- Chapter loops — pictures-reserve-then-settle -------------------
   The 16:9 box and its poster exist from the first frame, so nothing
   moves when the video arrives. site.js plays a loop only while it's on
   screen and never under reduced motion. */
.film-loop {
  margin: 0;
  background: var(--card);
  border: var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 0.55rem;
}
.film-loop video {
  display: block;
  width: 100%;
  height: auto;
  /* no aspect-ratio here: the width/height attributes reserve the box at
     each loop's real ratio (two loops are cropped below 16:9) */
  object-fit: cover;
  border-radius: 14px;
  background: var(--paper);
  border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.film-loop-wide { max-width: 54rem; margin: 2.5rem auto 0; }
.film-loop-wide + .integrations-grid,
.film-loop-wide + .platforms { margin-top: 2.5rem; }
#integrations .film-loop-wide { margin-bottom: 0.5rem; }

/* ---- Reading hairline — scroll-driven-animation ----------------------
   A stitch-red line under the header fills with page progress. Pure CSS
   scroll timeline; browsers without it simply show no line. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -2px;
      height: 3px;
      background: var(--stitch);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: read-progress linear both;
      animation-timeline: scroll(root block);
      pointer-events: none;
    }
    @keyframes read-progress { to { transform: scaleX(1); } }
  }
}

/* ---- Header over dark — sticky-blocker-hand-off ----------------------
   Over the ink final section the header takes the ink colour, so paper
   never sits on top of ink with a hard seam. site.js sets .is-on-dark. */
.site-header { transition: background-color 0.25s ease, border-color 0.25s ease; }
.site-header.is-on-dark { background: var(--hdr, var(--ink)); border-bottom-color: var(--hdr, var(--ink)); }
.site-header.is-on-dark .site-nav a { color: rgba(246, 244, 237, 0.82); }
.site-header.is-on-dark .site-nav a:hover { color: var(--paper); }
.site-header.is-on-dark .brand .brand-lockup { filter: invert(1) brightness(1.6) sepia(0.15); }
.site-header .brand .brand-lockup { transition: filter 0.25s ease; }

/* ---- The ball — squash-and-stretch ------------------------------------
   Hover the header mark and the ball drops, squashes on the floor and
   springs back like the film's ball; a press squashes it flat. */
@media (prefers-reduced-motion: no-preference) {
  .brand > img:first-child { transform-origin: 50% 100%; }
  .brand:hover > img:first-child { animation: ball-squash 0.62s cubic-bezier(.16,1,.3,1); }
  .brand:active > img:first-child { transform: scale(1.18, 0.82); transition: transform 0.08s ease; }
  @keyframes ball-squash {
    0%   { transform: translateY(0) scale(1, 1); }
    22%  { transform: translateY(-5px) scale(0.9, 1.12); }
    44%  { transform: translateY(0) scale(1.2, 0.8); }
    64%  { transform: translateY(-1px) scale(0.95, 1.05); }
    100% { transform: translateY(0) scale(1, 1); }
  }
}

/* ---- Integration logos — boop -----------------------------------------
   Hovering a card swings its logo once; it always settles back on its
   own, however fast the pointer moves on. Only on clickable cards. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .orbit-app > img { transform-origin: 50% 90%; }
  .orbit-app:hover > img { animation: boop 0.5s cubic-bezier(.16,1,.3,1); }
  @keyframes boop {
    0%   { transform: rotate(0) scale(1); }
    25%  { transform: rotate(-9deg) scale(1.08); }
    55%  { transform: rotate(6deg) scale(1.04); }
    80%  { transform: rotate(-2deg) scale(1); }
    100% { transform: rotate(0) scale(1); }
  }
}

/* ---- Headlines read in order — staggered-view-timeline-reveals --------
   site.js wraps each word of a section headline in .w with its index;
   as the headline scrolls in, words go from soft ink to full ink in
   reading order. The rest state is legible, never blank. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .h-display .w {
      animation: word-ink linear both;
      animation-timeline: view(block);
      animation-range: entry calc(min(var(--wi, 0), 6) * 6%) entry calc(55% + min(var(--wi, 0), 6) * 6%);
    }
    @keyframes word-ink {
      from { opacity: 0.22; }
      to   { opacity: 1; }
    }
  }
}

/* ---- Waitlist — optimistic-then-firm ----------------------------------
   The address appears at once in a dashed row marked "Joining…"; when the
   server confirms, the same row firms up where it stands. On failure it
   says so there and offers a retry. */
.waitlist-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  padding: 0.8rem 1rem;
  border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(.16,1,.3,1);
}
.waitlist-row[hidden] { display: none; }
.waitlist-row .wr-email { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.waitlist-row .wr-state { font-size: 0.875rem; color: var(--ink-faint); }
.waitlist-row.is-pending .wr-state::after { content: "…"; }
.waitlist-row.is-firm { border-style: solid; border-color: var(--ink); box-shadow: var(--shadow-sm); transform: translate(-1px, -1px); }
.waitlist-row.is-firm .wr-state { color: var(--ink); }
.waitlist-row.is-failed { border-color: var(--stitch-dark); }
.waitlist-row.is-failed .wr-state { color: var(--stitch-dark); }
.waitlist-row .wr-retry {
  margin-left: auto;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--blue);
  background: none;
  border: 0;
  padding: 0.2rem 0;
  text-decoration: underline;
  cursor: pointer;
}
.waitlist-on-dark .waitlist-row { background: var(--paper); }


/* ==========================================================================
   Page rhythm (benchmark audit 2026-09-30): paper is the base; two
   full-bleed colour bands (capture on ink, the inbox on the app's own
   blue) and one frameless product band (the device film on the film's
   own paper) break the run of white cards. site.js reads data-header so
   the sticky header takes each band's colour.
   ========================================================================== */
.band { position: relative; }
.band-ink { background: var(--ink); color: #DDDACE; }
.band-blue { background: var(--app-backdrop); color: #fff; }
.band-ink .kicker, .band-blue .kicker { color: #FF8A80; }
.band-ink .h-display, .band-blue .h-display { color: var(--paper); }
.band-ink .lede { color: #B9B5A6; }
.band-ink .way { border-color: var(--paper); box-shadow: 5px 5px 0 #3E3B35; }
.band-blue .split-copy p { color: rgba(255, 255, 255, 0.88); }
.band-blue .split-copy strong { color: #fff; }
.band-blue .phone { box-shadow: 8px 8px 0 rgba(19, 18, 16, 0.55); }
@media (min-width: 56em) { .band-blue .phone { width: min(19.5rem, 80vw); } }

/* Voice leads the capture bento: the film's dogs + CarPlay loop */
.way-voice .way-stage { height: 14.5rem; overflow: hidden; }
.way-voice video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

/* ---- The orbit — 12 apps around a live composer ----------------------
   The ring is laid out with CSS trig on an ellipse; site.js runs the
   catch → fly → land cycle. Phones (and browsers without trig) get a
   grid under the composer; the flight works the same. */
.orbit { position: relative; margin: 3rem auto 0; display: grid; gap: 1.5rem; justify-items: center; }
.orbit-core { order: -1; width: min(19rem, 100%); }
.orbit-core .mc { width: 100%; max-width: none; font-size: 0.875rem; }
.orbit-core .mc-type { white-space: nowrap; }
.orbit-core .mc-go { transition: transform 0.12s ease, background-color 0.2s ease; }
.orbit-core .mc-go.is-idle { background-color: #A3A1AD; }
.orbit-core .mc-go.is-press { transform: scale(0.86); }
/* narrow screens: centred rows, so the 13th app sits in the middle of the
   last row instead of stranded at its start */
.orbit-ring { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; width: 100%; }
.orbit-ring > li { width: calc((100% - 1.2rem) / 3); max-width: 7rem; }
@media (min-width: 30em) { .orbit-ring > li { width: 6.4rem; } }
.orbit-app {
  position: relative;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.3rem 0.6rem;
  background: var(--card);
  border: var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.orbit-app:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(19, 18, 16, 0.92); }
.orbit-app[aria-expanded="true"] { border-color: var(--app-blue); box-shadow: 4px 4px 0 rgba(47, 107, 255, 0.55); }
.orbit-app > img { width: 2.6rem; height: 2.6rem; border-radius: 22%; }
.orbit-app.is-hit { animation: orbit-hit 0.7s cubic-bezier(.16,1,.3,1); }
@keyframes orbit-hit { 0% { transform: none; } 30% { transform: scale(1.14); } 100% { transform: none; } }
.orbit-chip {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--app-blue);
  color: #fff;
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px) scale(0.9);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.orbit-app.show-chip .orbit-chip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.orbit-ball { position: absolute; z-index: 5; left: 0; top: 0; width: 1.6rem; height: 1.6rem; opacity: 0; pointer-events: none; }
.orbit-ball img { width: 100%; height: 100%; display: block; }
@supports (left: calc(cos(0deg) * 1px)) {
  @media (min-width: 60em) {
    .orbit { display: block; height: 34rem; max-width: 64rem; }
    .orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .orbit-ring { display: block; position: absolute; inset: 0; }
    .orbit-ring > li {
      --a: calc(var(--i) / 12 * 1turn - 0.25turn);
      position: absolute;
      left: calc(50% + cos(var(--a)) * 27rem);
      top: calc(50% + sin(var(--a)) * 13.6rem);
      width: 7rem;
      translate: -50% -50%;
    }
  }
}
.int-soon { margin-top: 1.75rem; text-align: center; font-size: 0.9375rem; color: var(--ink-faint); }
.int-soon strong { color: var(--ink); }

/* ---- What Catch can see — the privacy strip --------------------------- */
.privacy {
  margin: 2rem auto 0;
  max-width: 60rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  padding: 1.1rem 1.3rem;
  border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 18px;
}
@media (min-width: 48em) { .privacy { grid-template-columns: auto 1fr 1fr 1fr; align-items: start; gap: 1.25rem; } }
.privacy h3 { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding-top: 0.15rem; }
.privacy p { display: flex; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft); }
.privacy p svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.15rem; color: var(--stitch); }

/* ---- Pricing: what "once" means ---------------------------------------- */
.plan-terms { margin: -0.6rem 0 1.3rem; font-size: 0.875rem; line-height: 1.45; color: #B9B5A6; }

/* ---- Final CTA: every platform, one row ------------------------------- */
.cta-platforms { list-style: none; margin: 1.75rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; }
.cta-platforms li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; font-weight: 600; color: rgba(246, 244, 237, 0.8); }
.cta-platforms svg { width: 1.05rem; height: 1.05rem; }

/* ---- Phones: the sticky action ----------------------------------------- */
.sticky-cta {
  position: fixed;
  z-index: 40;
  left: 0; right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 0.6rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), opacity 0.25s ease;
}
.sticky-cta .btn { pointer-events: auto; box-shadow: 3px 3px 0 rgba(19, 18, 16, 0.92), 0 8px 24px rgba(19, 18, 16, 0.18); }
.sticky-cta.is-away { transform: translateY(130%); opacity: 0; }
@media (min-width: 48em) { .sticky-cta { display: none !important; } }


/* ---- Capture clips (Control Centre, Action Button) -------------------
   Cut from the film, which draws both properly; the stage takes the
   clip's own 2.35:1 frame and the film's paper colour. */
.way-clip .way-stage { aspect-ratio: 2.35; background: #E4E1D8; overflow: hidden; }
.way-clip video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---- Catch for later: the real iOS recording in the phone frame ------- */
.phone-screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- The film, inline — the pill swaps the hero loop for the full film
   with sound and controls; when it ends the loop comes back. */
.hero-film.is-playing .film-pill { opacity: 0; pointer-events: none; }
.hero-film.is-playing .demo-stage { background: #131210; }

/* ---- Platforms: every platform with its logo and its own link --------- */
.plats { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: 1fr 1fr; }
.plat-web { grid-column: 1 / -1; } /* five cards: phones get 2 + 2 + 1 wide */
@media (min-width: 60em) { .plats { gap: 1rem; grid-template-columns: repeat(5, 1fr); } .plat-web { grid-column: auto; } }
.plat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 1.2rem 1.1rem 1.15rem;
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.plat-logo { width: 2rem; height: 2rem; margin-bottom: 0.6rem; color: var(--ink); }
.plat-android .plat-logo { color: #3DDC84; }
.plat-windows .plat-logo { color: #0078D4; }
.plat-web .plat-logo { color: var(--blue); }
.plat-kind { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stitch-dark); }
.plat h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.plat p { font-size: 0.875rem; color: var(--ink-faint); line-height: 1.45; margin-bottom: 0.9rem; }
.plat .btn { margin-top: auto; font-size: 0.875rem; padding: 0.55rem 1.1rem; background: var(--ink); color: var(--paper); }
.plat .btn:hover { color: var(--paper); }
.plat-soon { margin-top: auto; padding: 0.25rem 0.7rem; border: 1.5px dashed color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: var(--ink-faint); }
.plats-sync { margin-top: 1.75rem; text-align: center; font-weight: 500; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.125rem); }

/* ---- Legal pages (privacy/, terms/, cookies/) -------------------------- */
/* The header keeps the brand and a Back to Catch button at every width (the
   page has no site.js, so no mobile menu). The document card holds Termly's
   live policy iframe, which sizes its own height. */
.legal-back { padding: 0.5rem 1.1rem; font-size: 0.9375rem; white-space: nowrap; }
.legal { padding-block: 3rem 5rem; }
@media (min-width: 48em) { .legal { padding-block: 4.5rem 7rem; } }
.legal h1.h-display { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: 1.5rem; text-wrap: balance; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.legal-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.95rem;
  border: var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}
.legal-tabs a:hover { color: var(--ink); box-shadow: var(--shadow-sm); }
.legal-tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.legal-lede { max-width: 40em; margin-bottom: 2rem; }
.legal-doc {
  min-height: 24rem;
  padding: clamp(0.5rem, 2.5vw, 2rem);
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.legal-doc iframe { display: block; width: 100%; border: 0; }
.legal-policy { padding: clamp(1.25rem, 3vw, 2rem); }
.legal-policy section { margin-top: 1.75rem; }
.legal-policy h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.legal-policy p + p { margin-top: 0.75rem; }
.legal-fallback { margin-top: 1.25rem; font-size: 0.875rem; color: var(--ink-faint); }