/* ==========================================================================
   Chirp website design system ("Journey light", Oct 2026)

   The app is black like watchOS. Colour lives in light: soft blobs of
   colour drifting over a black or white field, never hard edges. One key
   colour (lilac) marks what you can press. Text is white at 100/60/40%.

   Plain CSS custom properties, no build step. The living light itself
   (orb, logo, fields) is drawn by chirp-light.js; the static gradients
   below are its fallback and its stand-in for small surfaces.
   Reference page: design-system.html
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;

  /* Field */
  --ink-0: #000000;            /* page: watchOS black */
  --ink-1: #0B0B10;            /* screens, raised black */
  --ink-2: #141419;            /* cards on black */
  --ink-3: #1C1C23;            /* hover / pressed cards */
  --glass-1: rgba(255, 255, 255, 0.06);
  --glass-2: rgba(255, 255, 255, 0.1);
  --glass-3: rgba(255, 255, 255, 0.16);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --paper: #FFFFFF;            /* the white field the listening light drifts over */
  --paper-ink: #16171D;        /* text on white */

  /* Text: white at 100 / 60 / 40 */
  --text-1: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.6);
  --text-3: rgba(255, 255, 255, 0.4);

  /* Key colour: lilac, only where you act */
  --key: #B8A6FC;
  --key-hover: #CBBDFF;
  --key-press: #A592F5;
  --key-ink: #0B0B10;          /* text on lilac */
  --key-soft: rgba(184, 166, 252, 0.14);
  --key-line: rgba(184, 166, 252, 0.35);

  /* The light: listening-screen colours */
  --mint: #34D399;
  --violet: #A78BFA;
  --sky: #38BDF8;
  --ice: #E6ECFF;
  --pink: #F472B6;
  --fuchsia: #E879F9;
  --orange: #FB923C;
  --amber: #FBBF24;
  --rose: #F43F5E;

  /* Hero logo palette */
  --logo-blue: #5B9CF6;
  --logo-violet: #9278F5;
  --logo-teal: #34C9B5;
  --logo-pool: #FFD98A;

  /* Tile pastels (each app tint moves to its pastel) */
  --tint-sky: #7DD3FC;     /* blue */
  --tint-mint: #6EE7B7;    /* green */
  --tint-aqua: #5EEAD4;    /* teal */
  --tint-lilac: #C4B5FD;   /* purple */
  --tint-peach: #FDBA74;   /* orange */
  --tint-coral: #FCA5A5;   /* red */
  --tint-butter: #FDE68A;  /* yellow */
  --tint-mist: #CBD5E1;    /* gray */

  /* Moods: the journey's three stops, as static light (fallbacks + small surfaces) */
  --mood-mint:
    radial-gradient(60% 55% at 92% 8%, rgba(52, 211, 153, 0.75), transparent 70%),
    radial-gradient(45% 45% at 52% 74%, rgba(167, 139, 250, 0.7), transparent 70%),
    radial-gradient(42% 40% at 10% 18%, rgba(230, 236, 255, 0.8), transparent 70%),
    radial-gradient(55% 50% at 33% 55%, rgba(56, 189, 248, 0.65), transparent 70%),
    radial-gradient(60% 50% at 80% 100%, rgba(52, 211, 153, 0.7), transparent 70%);
  --mood-meadow:
    radial-gradient(70% 60% at 25% 22%, rgba(52, 211, 153, 0.7), transparent 70%),
    radial-gradient(65% 60% at 55% 35%, rgba(167, 139, 250, 0.65), transparent 70%),
    radial-gradient(45% 45% at 62% 62%, rgba(52, 211, 153, 0.6), transparent 70%),
    radial-gradient(40% 40% at 2% 0%, rgba(244, 114, 182, 0.7), transparent 70%),
    radial-gradient(55% 50% at 100% 0%, rgba(167, 139, 250, 0.65), transparent 70%);
  --mood-sunset:
    radial-gradient(55% 55% at 18% 86%, rgba(232, 121, 249, 0.7), transparent 70%),
    radial-gradient(65% 60% at 62% 80%, rgba(232, 121, 249, 0.65), transparent 70%),
    radial-gradient(60% 55% at 58% 16%, rgba(251, 146, 60, 0.7), transparent 70%),
    radial-gradient(45% 45% at 95% 30%, rgba(251, 191, 36, 0.7), transparent 70%),
    radial-gradient(45% 45% at 0% 0%, rgba(244, 63, 94, 0.6), transparent 70%);

  /* Living logo moods: [base, accent, accent] + warm pool */
  --logo-hero:   #5B9CF6, #9278F5, #34C9B5;
  --logo-teal:   #2DD4BF, #38BDF8, #5EEAD4;
  --logo-warm:   #FB923C, #F472B6, #FBBF24;
  --logo-lilac:  #A78BFA, #E879F9, #818CF8;
  --logo-sunny:  #FACC15, #FB923C, #A3E635;
  --logo-pastel: #F9A8D4, #93C5FD, #C4B5FD;

  /* Paper grain (fine, over the light) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Type: SF Pro Rounded where the system has it, Nunito everywhere else */
  --font-rounded: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;                          /* 13 fine print */
  --fs-sm: 0.9375rem;                          /* 15 captions */
  --fs-md: 1.0625rem;                          /* 17 body */
  --fs-lg: 1.25rem;                            /* 20 lede */
  --fs-xl: clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);  /* 22-26 card titles */
  --fs-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);    /* 28-40 */
  --fs-3xl: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);      /* 36-64 section titles */
  --fs-display: clamp(3rem, 1.6rem + 6vw, 6.5rem);     /* 48-104 hero */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-body: 1.5;
  --ls-display: -0.035em;
  --ls-title: -0.02em;
  --ls-caps: 0.08em;        /* small caps labels (footer); no eyebrows above headings */

  /* Spacing: 4pt base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;
  --gutter: 16px;                                  /* phone side gutter */
  --section-y: clamp(72px, 6vw + 40px, 160px);
  --container: 1180px;
  --container-narrow: 760px;

  /* Radii: soft, like the app's cards */
  --r-xs: 8px;
  --r-sm: 14px;   /* list rows */
  --r-md: 22px;   /* tiles */
  --r-lg: 28px;   /* cards */
  --r-xl: 40px;   /* big panels */
  --r-pill: 999px;

  /* Shadows and glows: light, never drop shadows on black */
  --shadow-watch: 0 40px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-paper: 0 30px 60px -30px rgba(22, 23, 29, 0.35);
  --glow-key: 0 0 0 1px var(--key-line), 0 10px 40px -8px rgba(184, 166, 252, 0.55);
  --glow-mint: 0 0 60px -10px rgba(52, 211, 153, 0.55);
  --glow-violet: 0 0 60px -10px rgba(167, 139, 250, 0.55);
  --glow-sunset: 0 0 60px -10px rgba(232, 121, 249, 0.5);
  --focus-ring: 0 0 0 3px var(--ink-0), 0 0 0 5px var(--key);
  --shadow-bubble: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  --shadow-lift: -18px 0 40px -10px rgba(0, 0, 0, 0.9);   /* a watch sitting in front of another */
  --shadow-text: 0 1px 6px rgba(0, 0, 0, 0.6);             /* text over photos and maps */
  --glow-paper: 0 10px 40px -10px rgba(255, 255, 255, 0.5);
  --glow-download: 0 0 0 1px var(--key-line), 0 18px 50px -14px color-mix(in srgb, var(--key) 60%, transparent);
  --glow-download-hover: 0 0 0 1px var(--key-line), 0 22px 60px -12px color-mix(in srgb, var(--key) 80%, transparent);

  /* Overlays */
  --scrim-1: rgba(0, 0, 0, 0.6);       /* nav over the page */
  --scrim-2: rgba(0, 0, 0, 0.75);      /* nav once scrolled */
  --tile-fill: rgba(255, 255, 255, 0.07);
  --text-4: rgba(255, 255, 255, 0.16); /* words not yet read */

  /* Silver: speech bubbles and sheens */
  --silver-hi: rgba(255, 255, 255, 0.24);
  --silver-lo: rgba(200, 206, 216, 0.1);
  --silver-top: rgba(255, 255, 255, 0.32);
  --silver-edge: rgba(255, 255, 255, 0.16);
  --sheen: rgba(255, 255, 255, 0.7);
  --sheen-soft: rgba(255, 255, 255, 0.28);

  /* Soft headings: the blurred copies are white with a breath of the journey */
  --soft-tint-mint: #F1FFF9;
  --soft-tint-violet: #F3EEFF;
  --soft-tint-pink: #FCF0FF;
  --soft-blur-1: 0.03em;   /* soft copies: plain blur… */
  --soft-blur-2: 0.06em;
  --soft-smear-1: 0.03em;  /* …plus a smear this far each way along the 45° diagonal */
  --soft-smear-2: 0.07em;
  --soft-smear-c: color-mix(in srgb, var(--text-1) 35%, transparent);

  /* On the white field */
  --paper-ink-2: rgba(22, 23, 29, 0.72);
  --paper-tint-mint: #17302A;
  --paper-tint-violet: #221D3D;
  --paper-tint-pink: #2E1B33;

  /* Watch hardware (the CSS-drawn frame) */
  --watch-case: linear-gradient(145deg, #2A2A31 0%, #0D0D10 38%, #050506 70%, #1B1B20 100%);
  --watch-crown: repeating-linear-gradient(#3A3A42 0 2px, #1A1A1F 2px 4px);
  --watch-button: linear-gradient(90deg, #121216, #2A2A30);
  --watch-edge: rgba(255, 255, 255, 0.1);
  --watch-edge-hi: rgba(255, 255, 255, 0.15);

  /* Watch UI (watchOS system colours the app uses) */
  --wos-glass: rgba(255, 255, 255, 0.14);  /* round chrome buttons */
  --wos-row: rgba(255, 255, 255, 0.11);    /* list rows */
  --wos-ring: rgba(255, 255, 255, 0.55);   /* empty checkbox */
  --wos-green: #30D158;
  --wos-blue: #0A84FF;
  --wos-listen-ink: rgba(52, 44, 120, 0.78); /* "Tap to stop" over the light */

  /* Built screens: a web page and a map, as they'd look on the watch */
  --web-paper: #FFFFFF;
  --web-ink: #111111;
  --web-muted: #444444;
  --web-bar: #EEF0F3;
  --web-bar-ink: #555555;
  --web-kicker: #0E7490;
  --web-photo-bg: #1E293B;
  --font-serif: Georgia, "Times New Roman", serif;
  --map-land: #1D2126;
  --map-water: #16304A;
  --map-park: #1F3A2C;
  --map-road: #3A3F47;
  --map-lane: #2C3037;
  --map-route: var(--tint-sky);
  --map-route-glow: var(--sky);
  --map-pin: var(--rose);
  --map-card: #1E2026;   /* solid: nothing moves behind it, so no frosted glass */

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 150ms;   /* presses */
  --dur-2: 300ms;   /* hovers, swaps */
  --dur-3: 700ms;   /* reveals */
  --dur-4: 1200ms;  /* light fading in/out */
  --mood-hold: 2.5s; /* journey: each mood holds... */
  --mood-move: 3s;   /* ...then slides to the next */
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text-1);
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-rounded); text-wrap: balance; }
::selection { background: var(--key); color: var(--key-ink); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-4); top: -60px; z-index: 100; background: var(--key); color: var(--key-ink); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-weight: var(--fw-bold); text-decoration: none; }
.skip-link:focus { top: var(--s-4); }

/* ---------- 3. Type ---------- */
.t-display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.t-h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: var(--ls-display); }
.t-h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-title); }
.t-h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.01em; }
.t-lede { font-size: var(--fs-lg); line-height: 1.45; color: var(--text-2); }
.t-body { font-size: var(--fs-md); color: var(--text-2); }
.t-caption { font-size: var(--fs-sm); color: var(--text-2); }
.t-fine { font-size: var(--fs-xs); color: var(--text-3); }
.t-dim { color: var(--text-2); }
.t-faint { color: var(--text-3); }
/* Words that "light up", like the read-along */
.t-lit {
  background: linear-gradient(100deg, var(--mint), var(--sky) 35%, var(--violet) 65%, var(--fuchsia));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Soft-edged headings, done like the logo's c: the letters' own edges go
   soft along a diagonal, softest at the start of the line, with a whisper of
   grain so it reads as an optical defocus rather than a glow. Three copies
   of the words, stacked: crisp on top, a little soft under it, softest at
   the bottom. Each fades out only where the one beneath is already solid,
   so the words keep full strength and only their edges go soft.
   --soft-k (0..1) is how soft: script.js starts every heading sharp and
   raises it as the heading travels up the screen. It slides the masks (at 0
   only the crisp copy shows); the blur itself never changes.
   ChirpLight.soften() builds the layers. The smear along the 45° diagonal is
   a CSS blur plus two drop-shadows offset each way: the GPU draws it in every
   browser. (It used to be an SVG filter; Safari runs those on the CPU and
   re-ran them on every repaint, which dropped scrolling to ~15fps.)
   Layers bleed 0.4em past the text box (padding + negative margin) so the
   masks never crop the blur into hard lines. */
@property --soft-a { syntax: "<angle>"; inherits: true; initial-value: 225deg; }
@property --soft-k { syntax: "<number>"; inherits: true; initial-value: 0.6; }
.soft {
  position: relative; isolation: isolate;
  --soft-off: calc((1 - var(--soft-k)) * 85%); /* pushes the soft bands off the end */
}
.soft-in, .soft-mid, .soft-glow { display: block; padding: 0.4em; }
.soft-in {
  margin: -0.4em;
  -webkit-mask-image: linear-gradient(var(--soft-a), #000 calc(25% + var(--soft-off)), transparent calc(62% + var(--soft-off)));
  mask-image: linear-gradient(var(--soft-a), #000 calc(25% + var(--soft-off)), transparent calc(62% + var(--soft-off)));
}
.soft-mid, .soft-glow {
  will-change: transform; /* own GPU layer: the blur is drawn once and the masks slide over it */
  position: absolute; inset: -0.4em; z-index: -1; pointer-events: none; user-select: none;
  /* the same white as the words, with just a breath of the journey colours */
  background: linear-gradient(var(--soft-a), var(--soft-c1, var(--text-1)) 40%, var(--soft-c2, var(--soft-tint-mint)) 60%, var(--soft-c3, var(--soft-tint-violet)) 80%, var(--soft-c4, var(--soft-tint-pink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.soft-mid {
  filter: blur(var(--soft-blur-1)) drop-shadow(calc(-1 * var(--soft-smear-1)) var(--soft-smear-1) 0.02em var(--soft-smear-c)) drop-shadow(var(--soft-smear-1) calc(-1 * var(--soft-smear-1)) 0.02em var(--soft-smear-c));
  -webkit-mask-image: linear-gradient(var(--soft-a), transparent calc(15% + var(--soft-off)), #000 calc(25% + var(--soft-off)), #000 calc(70% + var(--soft-off)), transparent calc(100% + var(--soft-off)));
  mask-image: linear-gradient(var(--soft-a), transparent calc(15% + var(--soft-off)), #000 calc(25% + var(--soft-off)), #000 calc(70% + var(--soft-off)), transparent calc(100% + var(--soft-off)));
}
.soft-glow {
  z-index: -2;
  filter: blur(var(--soft-blur-2)) drop-shadow(calc(-1 * var(--soft-smear-2)) var(--soft-smear-2) 0.04em var(--soft-smear-c)) drop-shadow(var(--soft-smear-2) calc(-1 * var(--soft-smear-2)) 0.04em var(--soft-smear-c));
  -webkit-mask-image: linear-gradient(var(--soft-a), transparent calc(50% + var(--soft-off)), #000 calc(70% + var(--soft-off)));
  mask-image: linear-gradient(var(--soft-a), transparent calc(50% + var(--soft-off)), #000 calc(70% + var(--soft-off)));
}
/* Crisp at the top right, softest at the bottom left (the start of the line).
   The angle holds still on purpose: animating it repainted every heading every frame. */
/* Arriving: a gentle fade; the softening comes with scrolling */
.js .soft:not(.is-in) > span { opacity: 0; }
.js .soft > span { transition: opacity 1.1s var(--ease-out); }

/* Something you'd say to Chirp: a silver speech bubble. Every example phrase
   on the site uses it. script.js writes the words on as it scrolls into view
   (--say fades the bubble, each .w fades and sharpens in turn). */
.said {
  display: block; width: fit-content; max-width: 100%;
  padding: 10px 15px; border-radius: 18px 18px 18px 6px;
  background: linear-gradient(160deg, var(--silver-hi), var(--silver-lo));
  box-shadow: inset 0 1px 0 var(--silver-top), inset 0 0 0 1px var(--silver-edge), var(--shadow-bubble);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-1);
  opacity: var(--say, 1); translate: 0 calc((1 - var(--say, 1)) * 12px); scale: calc(0.95 + 0.05 * var(--say, 1)); transform-origin: 0 100%;
}
.said .w { transition: opacity 0.25s, filter 0.25s; }
/* A slow silver shimmer passes over now and then */
.said { position: relative; overflow: hidden; isolation: isolate; }
.said::after {
  content: ""; position: absolute; z-index: -1; top: -50%; bottom: -50%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, var(--sheen-soft), transparent);
  transform: skewX(-20deg); animation: said-shimmer 7s var(--ease-soft) infinite; animation-delay: var(--shimmer-delay, 0s); pointer-events: none;
}
@keyframes said-shimmer { 0%, 70% { left: -60%; } 100% { left: 140%; } }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
@media (min-width: 720px) { :root { --gutter: 32px; } }
.section { padding-block: var(--section-y); position: relative; }
.section-head { display: grid; gap: var(--s-4); max-width: 720px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.stack { display: grid; gap: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--btn-h); padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-pill);
  font: var(--fw-bold) var(--fs-md) / 1 var(--font-rounded);
  letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: background var(--dur-2) var(--ease-soft), transform var(--dur-1) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft), color var(--dur-2);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--key); color: var(--key-ink); }
.btn--primary:hover { background: var(--key-hover); box-shadow: var(--glow-key); }
.btn--primary:active { background: var(--key-press); }
.btn--glass { background: var(--glass-2); color: var(--text-1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn--glass:hover { background: var(--glass-3); }
.btn--ghost { background: transparent; color: var(--key); padding-inline: var(--s-2); }
.btn--ghost:hover { color: var(--key-hover); }
.btn--paper { background: var(--paper); color: var(--paper-ink); }
.btn--paper:hover { box-shadow: var(--glow-paper); }
.btn--sm { --btn-h: 36px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn--lg { --btn-h: 58px; padding: 0 var(--s-6); font-size: var(--fs-lg); }

/* Download: our own button, lilac with a slow sheen of light across it.
   The Apple glyph only renders on Apple devices; script.js hides it elsewhere. */
.btn--download {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--key); color: var(--key-ink);
  box-shadow: var(--glow-download);
}
.btn--download::before { /* the sheen */
  content: ""; position: absolute; inset: -40% auto -40% -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, var(--sheen), transparent);
  transform: skewX(-18deg); animation: sheen 5.5s var(--ease-soft) infinite;
}
.btn--download::after { /* light pooling inside */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(60% 120% at 15% 0%, color-mix(in srgb, var(--tint-mint) 55%, transparent), transparent 70%), radial-gradient(60% 120% at 90% 100%, color-mix(in srgb, var(--fuchsia) 40%, transparent), transparent 70%);
}
.btn--download:hover { background: var(--key-hover); box-shadow: var(--glow-download-hover); }
/* Glyph and text share one baseline (inline, not flex items), then the glyph
   drops 0.11em so its ink centre meets the text's cap-height centre. */
.btn--download { display: inline-block; line-height: var(--btn-h); white-space: nowrap; }
.btn--download .apple { display: inline-block; font: 400 1.35em/0 -apple-system, system-ui, sans-serif; position: relative; top: 0.11em; margin: 0 0.3em 0 -0.1em; }
.btn--download .apple[hidden] { display: none; }
@keyframes sheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* Chip: like the app's "Google Search result" pill */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--key-soft); color: var(--key);
  box-shadow: inset 0 0 0 1px var(--key-line);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2; text-decoration: none;
}
.chip--glass { background: var(--glass-2); color: var(--text-1); box-shadow: none; }

/* ---------- 6. Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--scrim-1);
  backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.nav.is-scrolled { border-bottom-color: var(--line); background: var(--scrim-2); }
.nav-inner { display: flex; align-items: center; gap: var(--s-5); height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-rounded); font-weight: var(--fw-heavy); font-size: 1.375rem; letter-spacing: -0.03em; }
.brand img { width: 40px; height: 40px; margin: -4px -4px -4px -6px; }
.nav-links { display: none; gap: var(--s-1); margin-left: auto; }
.nav-links a { padding: 8px 12px; border-radius: var(--r-pill); text-decoration: none; color: var(--text-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); transition: color var(--dur-2), background var(--dur-2); }
.nav-links a:hover { color: var(--text-1); background: var(--glass-1); }
.nav .btn { margin-left: auto; }
@media (min-width: 880px) {
  .nav-links { display: flex; }
  .nav .btn { margin-left: var(--s-2); }
}

/* ---------- 7. The light (static) ---------- */
/* Canvas fields from chirp-light.js sit in .light; the gradient behind them shows until they draw. */
.light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.light > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.light--mint { background: var(--mood-mint); }
.light--meadow { background: var(--mood-meadow); }
.light--sunset { background: var(--mood-sunset); }
.light--paper { background-color: var(--paper); }
/* Haze: the mood sitting at the top of a black page, like onboarding */
.haze { position: absolute; inset: 0 0 auto; height: min(90vh, 900px); pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 10%, transparent 85%); mask-image: linear-gradient(#000 10%, transparent 85%); }
.haze > canvas { width: 100%; height: 100%; opacity: 0.4; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 160px; opacity: 0.18; mix-blend-mode: overlay;
}

/* ---------- 8. Logo / orb ---------- */
/* Living logo: canvas orb + the soft-edged rounded c on top. Static image fallback inside. */
.logo-orb { position: relative; width: var(--logo-size, 160px); aspect-ratio: 1; flex: none; }
.logo-orb > img, .logo-orb > canvas, .logo-orb > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-orb > img { transition: opacity var(--dur-3); }
.logo-orb.is-live > img { opacity: 0; }
.logo-orb--sm { --logo-size: 48px; }
.logo-orb--md { --logo-size: 96px; }
.logo-orb--lg { --logo-size: clamp(160px, 22vw, 260px); }

/* ---------- 9. Watch frame ---------- */
/* An Apple Watch (46mm-ish) drawn in CSS. Screen is 208 x 248 pt (screenshots are 416 x 496). */
.watch {
  --watch-w: 280px;
  position: relative; width: var(--watch-w); max-width: 100%; flex: none;
  padding: calc(var(--watch-w) * 0.052);
  border-radius: calc(var(--watch-w) * 0.25) / calc(var(--watch-w) * 0.235);
  background: var(--watch-case);
  box-shadow: var(--watch-shadow, var(--shadow-watch)), inset 0 0 0 1.5px var(--watch-edge), inset 0 0 0 calc(var(--watch-w) * 0.02) var(--ink-0);
}
.watch::before, .watch::after { content: ""; position: absolute; right: calc(var(--watch-w) * -0.03); border-radius: 0 6px 6px 0; }
.watch::before { /* Digital Crown */
  top: 22%; width: calc(var(--watch-w) * 0.045); height: 15%;
  background: var(--watch-crown);
  box-shadow: inset -1px 0 0 var(--watch-edge-hi);
}
.watch::after { /* side button */
  top: 47%; width: calc(var(--watch-w) * 0.022); height: 19%; right: calc(var(--watch-w) * -0.016);
  background: var(--watch-button);
}
.watch-screen {
  position: relative; aspect-ratio: 208 / 248; overflow: hidden;
  border-radius: calc(var(--watch-w) * 0.2) / calc(var(--watch-w) * 0.19);
  background: var(--ink-0); color: var(--text-1); isolation: isolate;
  container-type: inline-size;
  font-family: var(--font-rounded);
}
.watch-screen > img { width: 100%; height: 100%; object-fit: cover; }
.watch--sm { --watch-w: 200px; }
.watch--md { --watch-w: 260px; }
.watch--lg { --watch-w: clamp(260px, 30vw, 340px); }
.watch-caption { display: grid; gap: 2px; text-align: center; margin-top: var(--s-4); }
.watch-caption b { font-weight: var(--fw-bold); }
.watch-caption span { color: var(--text-2); font-size: var(--fs-sm); }

/* Live watch screen parts (sized in watch points via container units) */
/* .ws goes INSIDE .watch-screen (container units resolve against the screen) */
.ws { position: absolute; inset: 0; --pt: calc(100cqw / 208); }
.ws > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-time { position: absolute; top: calc(var(--pt) * 13); left: 0; right: 0; text-align: center; font-size: calc(var(--pt) * 15); font-weight: 600; font-variant-numeric: tabular-nums; z-index: 3; }
.ws-glass { position: absolute; top: calc(var(--pt) * 14); width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); border-radius: 50%; background: var(--wos-glass); display: grid; place-items: center; z-index: 3; }
.ws-glass svg { width: 52%; height: 52%; }
.ws-glass--l { left: calc(var(--pt) * 12); }
.ws-glass--r { right: calc(var(--pt) * 12); }

/* ---------- 10. Cards ---------- */
.card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: start; gap: var(--s-3);
  padding: clamp(24px, 3vw, 36px);
  background: var(--ink-2); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.card h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.015em; line-height: 1.2; }
.card p { color: var(--text-2); }
/* A soft wash of the card's tint behind the illustration */
.card::before {
  content: ""; position: absolute; z-index: -1; left: -10%; top: -30%; width: 80%; height: 70%;
  border-radius: 50%; background: var(--tint, var(--violet)); opacity: 0.16; filter: blur(50px);
  transition: opacity var(--dur-3) var(--ease-soft);
}
.card:hover::before { opacity: 0.26; }
/* Brush illustrations, painted in light: the white artwork is a mask over a
   slowly moving gradient in the card's tint, with a soft glow behind. */
.ill { --ill-c: var(--tint, var(--mint)); display: block; width: 72px; aspect-ratio: 1; flex: none; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ill-c) 45%, transparent)); }
.ill > i {
  display: block; width: 100%; height: 100%;
  -webkit-mask: var(--ill) center / contain no-repeat; mask: var(--ill) center / contain no-repeat;
  background: linear-gradient(135deg, var(--text-1) 10%, var(--ill-c) 45%, var(--violet) 80%, var(--text-1));
  background-size: 260% 260%; animation: ill-shift 9s ease-in-out infinite alternate;
}
@keyframes ill-shift { from { background-position: 0% 20%; } to { background-position: 100% 80%; } }
.ill--lg { width: 84px; }
.card-ill { margin-bottom: var(--s-2); }
.card--wide { grid-column: 1 / -1; }
.card-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Small feature row: white system-style line icon + text */
.feature { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items: start; }
.feature { --c: var(--tint-lilac); }
.feature svg {
  width: 40px; height: 40px; padding: 9px; border-radius: 13px; color: var(--c);
  background: radial-gradient(90% 90% at 30% 20%, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 0 24px -6px color-mix(in srgb, var(--c) 60%, transparent);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 60%, transparent));
}
.feature b { display: block; font-weight: var(--fw-bold); }
.feature span { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- 11. Tiles (pastel, as in the app) ---------- */
.tile-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tile-row::-webkit-scrollbar { display: none; }
.tile {
  --c: var(--tint-butter);
  position: relative; overflow: hidden; flex: none;
  width: 84px; padding: 12px 4px 10px; border-radius: var(--r-md);
  background: var(--tile-fill);
  display: grid; justify-items: center; gap: 2px; text-align: center;
}
.tile::before { content: ""; position: absolute; left: 50%; top: 14%; width: 90px; height: 64px; transform: translateX(-50%); border-radius: 50%; background: var(--c); opacity: 0.3; filter: blur(16px); }
.tile > * { position: relative; }
.tile-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.tile-sym { width: 28px; height: 28px; color: var(--c); }
.tile-sym svg { width: 100%; height: 100%; }
.tile-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-cap { font-size: 13px; color: var(--text-3); }
.tile--sky { --c: var(--tint-sky); }
.tile--mint { --c: var(--tint-mint); }
.tile--aqua { --c: var(--tint-aqua); }
.tile--lilac { --c: var(--tint-lilac); }
.tile--peach { --c: var(--tint-peach); }
.tile--coral { --c: var(--tint-coral); }
.tile--butter { --c: var(--tint-butter); }
.tile--mist { --c: var(--tint-mist); }
/* News tile: the photo melts into the card */
.news-tile { flex: none; width: 168px; border-radius: var(--r-md); background: var(--tile-fill); overflow: hidden; }
.news-tile .photo { height: 92px; margin-bottom: -18px; background: var(--photo, var(--mood-sunset)); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.news-tile .txt { position: relative; padding: 6px 10px 12px; display: grid; gap: 2px; }
.news-tile small { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--c, var(--tint-sky)); }
.news-tile span { font-size: 15px; line-height: 1.25; }

/* ---------- 12. Steps ---------- */
.steps { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { --tint: var(--mint); display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--line); }
.step:nth-child(2) { --tint: var(--sky); }
.step:nth-child(3) { --tint: var(--fuchsia); }
.step h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.015em; }
.step p { color: var(--text-2); }

/* ---------- 13. Price cards ---------- */
.price-grid { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .price-grid { grid-template-columns: 1fr 1fr; } }
.price { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--s-4); align-content: start; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.price h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); }
.price .amount { font-size: var(--fs-3xl); font-weight: var(--fw-heavy); letter-spacing: var(--ls-display); line-height: 1; }
.price .amount small { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-2); letter-spacing: 0; }
.price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.price li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-1); font-size: var(--fs-lg); line-height: 1.35; }
.price li svg { flex: none; width: 24px; height: 24px; stroke: var(--key); margin-top: 1px; }
.price--pro { box-shadow: inset 0 0 0 1px var(--key-line); }
.price--pro::before { content: ""; position: absolute; z-index: -1; inset: -40% -20% auto auto; width: 90%; height: 90%; background: var(--mood-meadow); filter: blur(40px); opacity: 0.35; }
.price-ill { width: 64px; }
.price--pro .price-ill { --ill-c: var(--fuchsia); }

/* ---------- 14. FAQ ---------- */
.faq { display: grid; gap: var(--s-2); }
.faq details { border-radius: var(--r-md); background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--dur-2); }
.faq details[open] { background: var(--glass-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; padding: var(--s-5); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--key); border-bottom: 2.5px solid var(--key); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--dur-2) var(--ease-soft); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details > p { padding: 0 var(--s-5) var(--s-5); color: var(--text-2); max-width: 62ch; }
.faq a { color: var(--key); }

/* ---------- 15. Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-7); color: var(--text-2); font-size: var(--fs-sm); }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h4 { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer a { text-decoration: none; color: var(--text-2); transition: color var(--dur-2); }
.footer a:hover { color: var(--text-1); }
.acknowledgement { margin-top: var(--s-7); max-width: 62ch; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.footer-base { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; color: var(--text-3); font-size: var(--fs-xs); }

/* ---------- 16. Motion ---------- */
/* Arrivals stay sharp (Jon): things rise and fade in; blur is only for headings leaving */
.js .reveal { opacity: 0; transform: translateY(44px) scale(0.975); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--delay, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Pop: small things (tiles, rows) spring in one after another; stagger with --delay */
.js .pop { opacity: 0; transform: translateY(22px) scale(0.9); transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-spring); transition-delay: var(--delay, 0ms); }
.js .pop.is-in { opacity: 1; transform: none; }
/* ...and inside a tile, its parts follow one by one: day, symbol, value */
.js .tile.pop > *, .js .news-tile.pop > * { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-spring); transition-delay: calc(var(--delay, 0ms) + 160ms + var(--i, 0) * 90ms); }
.js .tile.pop > .tile-sym { transform: translateY(10px) scale(0.5) rotate(-35deg); }
.js .tile.pop.is-in > *, .js .news-tile.pop.is-in > * { opacity: 1; transform: none; }
.tile > :nth-child(2), .news-tile > :nth-child(2) { --i: 1; }
.tile > :nth-child(3) { --i: 2; }
.tile > :nth-child(4) { --i: 3; }
/* Depth: script.js sets --py on [data-speed] as you scroll; `translate` stacks with any transform */
[data-speed] { translate: 0 var(--py, 0px); will-change: translate; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.breathe { animation: breathe 6s var(--ease-soft) infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js .reveal, .js .pop, .js .pop > * { opacity: 1; transform: none; }
  .js .soft > span { opacity: 1 !important; }
  [data-speed] { translate: none; }
}