/* mond: one painting, all year.
   The home page opens on a painting of a meadow by a lake (seasons.js): drag the sun and the year turns, flip the
   theme and night falls. The rest of the site is the paper it's painted on, by day and by night, and it takes its
   accent from the season the painting shows (html[data-season]: set in each page's head, then kept in step by
   seasons.js). The painted panels further down are stills of the same painting (scripts/render-paintings.mjs). */

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/instrument-serif-italic.woff2") format("woff2");
}

/* registered, so a change of season (or of day and night) fades across the page instead of jumping */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #ec772b; }
@property --accent-ink { syntax: "<color>"; inherits: true; initial-value: #ad4710; }
@property --accent-soft { syntax: "<color>"; inherits: true; initial-value: #fbe5d4; }

:root {
  color-scheme: light;
  /* the paper. seasons.js reads --paper-day and --paper-night for the painting's edges, and sets --paper itself
     while the light changes, so the page and the picture turn together */
  --paper-day: #faf8f3;
  --paper-night: #0c0e1a;
  --paper: var(--paper-day);
  --card: #ffffff;
  --card-2: #f2efe7;
  --well: rgba(44, 36, 84, 0.05);
  --label: #1c1b23;
  --label-2: #5e5c69;
  --label-3: #8e8c99;
  --sep: rgba(44, 36, 84, 0.12);
  --ink: #15141b; /* buttons */
  --ink-hover: #2f2d3a;
  --on-ink: #ffffff;
  --shade: 26, 28, 84; /* violet navy, the painting's shadows: reads on every season's sky */
  --lime: #8adb2e; /* the app's green */
  --lime-soft: #eaf8d9;
  --green-ink: #2e7a00;
  --red: #d70015;
  --focus: #3346d3;
  /* glass that keeps the painting's colour (saturated, not drained) */
  --glass: rgba(250, 248, 243, 0.64);
  --glass-solid: rgba(250, 248, 243, 0.94);
  --glass-well: rgba(255, 255, 255, 0.55);
  --glass-line: rgba(255, 255, 255, 0.7);
  --card-shadow: 0 1px 2px rgba(var(--shade), 0.05), 0 24px 48px -32px rgba(var(--shade), 0.34);
  /* the painted panels while their picture loads, and the colour above the waitlist card's picture */
  --paint-bg: linear-gradient(#4f66c9, #8d9fe4 60%, #c3c0de);
  --final-top: #4c63c8;
  /* season accents: autumn until the page says otherwise */
  --accent: #ec772b;
  --accent-ink: #ad4710; /* text and links: at least 4.5:1 on the paper */
  --accent-soft: #fbe5d4;
  --sky-ink: var(--accent-ink);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4' fill='none' stroke='%23143000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* one stroke of a flat brush, for the nav's marker, the eyebrows and the dabs */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M3.5 21.5C3 15 7.5 10.5 14 9.5c10-1.5 19-.3 30-1.7 14-1.8 28-.4 42-1.2 11-.6 21-.2 26.5 3 4 2.4 5.3 6 3.7 8.8 2.4 2.2 2 6.6-.6 8.8 1.4 3.2-2.2 6.4-7.6 6.6-14 .6-26-.8-40 .4-14 1.2-28-.2-41 .8-9 .6-17 .4-20.6-3-2.8-2.6-1.8-6.2-2.9-10.5ZM16 15.2c24-1 48-.4 76-1.6l.2.9c-28.2 1.3-52.2.8-76.2 1.6ZM30 26.6c22-.9 46-.2 74-1l.1.8c-28 .9-52 .2-74.1 1ZM10 21c14-.4 24-.1 36-.6v.7c-12 .5-22 .3-36 .6Z'/%3E%3C/svg%3E");
  --wrap: 1180px;
  --gutter: 40px;
  --nav-top: 14px;
  --nav-h: 58px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  transition: --accent 1.2s ease, --accent-ink 1.2s ease, --accent-soft 1.2s ease;
}

/* the seasons, by day: winter's lavender sky, spring's new leaves, summer's sun, the orange tree in autumn */
[data-season="winter"] { --accent: #7c86e0; --accent-ink: #4651b5; --accent-soft: #e7e7fa; }
[data-season="spring"] { --accent: #79c142; --accent-ink: #3a7a16; --accent-soft: #e5f3d6; }
[data-season="summer"] { --accent: #f0b22e; --accent-ink: #8a5800; --accent-soft: #f9eecd; }
[data-season="autumn"] { --accent: #ec772b; --accent-ink: #ad4710; --accent-soft: #fbe5d4; }

/* ---------- Night ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: var(--paper-night);
  --card: #141730;
  --card-2: #1a1e3b;
  --well: rgba(255, 255, 255, 0.05);
  --label: #f1f0f7;
  --label-2: #a8aac3;
  --label-3: #7b7e9b;
  --sep: rgba(255, 255, 255, 0.1);
  --ink: #f3f2f8;
  --ink-hover: #ffffff;
  --on-ink: #0c0e1a;
  --lime-soft: rgba(138, 219, 46, 0.14);
  --green-ink: #a6e86a;
  --red: #ff7a7a;
  --focus: #aab6ff;
  --glass: rgba(16, 19, 42, 0.56);
  --glass-solid: rgba(20, 23, 48, 0.95);
  --glass-well: rgba(255, 255, 255, 0.08);
  --glass-line: rgba(255, 255, 255, 0.13);
  --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 48px -30px rgba(0, 0, 0, 0.75);
  --paint-bg: linear-gradient(#0f1850, #23306f 60%, #2a3168);
  --final-top: #0d164c;
  --accent: #ff9a55;
  --accent-ink: #ffb27f;
  --accent-soft: rgba(255, 154, 85, 0.15);
}
[data-theme="dark"][data-season="winter"] { --accent: #98a3ff; --accent-ink: #b9c1ff; --accent-soft: rgba(152, 163, 255, 0.16); }
[data-theme="dark"][data-season="spring"] { --accent: #9be06a; --accent-ink: #b6eb8e; --accent-soft: rgba(155, 224, 106, 0.14); }
[data-theme="dark"][data-season="summer"] { --accent: #ffd060; --accent-ink: #ffd877; --accent-soft: rgba(255, 208, 96, 0.14); }
[data-theme="dark"][data-season="autumn"] { --accent: #ff9a55; --accent-ink: #ffb27f; --accent-soft: rgba(255, 154, 85, 0.15); }

/* while the theme changes on pages without the painting, everything eases over with it
   (on the home page the painting eases the paper itself: see seasons.js) */
.theme-fade body, .theme-fade body *, .theme-fade body *::before, .theme-fade body *::after {
  transition-property: background-color, border-color, color, fill, stroke, box-shadow, opacity, outline-color !important;
  transition-duration: 1.2s !important;
  transition-timing-function: ease !important;
}
.theme-fade[data-painting] body { transition: none !important; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--label);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
a, button, summary, input, .dots span { -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* Headlines: a clean sans with an italic serif accent */
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(3rem, min(5.4vw, 9.6vh), 5.6rem); line-height: 1.02; letter-spacing: -0.036em; word-spacing: 0.07em; }
h2 { font-size: clamp(2.2rem, 4.3vw, 3.8rem); line-height: 1.06; letter-spacing: -0.034em; word-spacing: 0.05em; }
h3 { font-size: 23px; line-height: 1.18; letter-spacing: -0.022em; }
h1 em, h2 em {
  font-family: var(--serif);
  font-size: 1.1em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 0.9;
}

/* a label with a stroke of the season's colour behind it */
.section-eyebrow {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 6px 15px;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.005em;
}
.section-eyebrow::before {
  content: "";
  position: absolute;
  inset: -1px -3px;
  z-index: -1;
  background: var(--accent-soft);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
}
.section-lead { max-width: 34rem; margin-top: 18px; font-size: 20px; line-height: 1.45; color: var(--label-2); }
.section-head { max-width: 780px; margin-bottom: 56px; }

/* ---------- Floating glass nav ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: max(var(--nav-top), env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  pointer-events: none; /* only the bar itself takes clicks */
}
.header-inner {
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  max-width: 1160px;
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 9px 0 14px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  backdrop-filter: blur(22px) saturate(185%);
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 0 0 1px rgba(var(--shade), 0.06), 0 14px 34px -18px rgba(var(--shade), 0.5);
  transition: box-shadow 0.35s, background-color 0.35s;
}
.header.scrolled .header-inner { box-shadow: inset 0 0 0 1px var(--glass-line), 0 0 0 1px rgba(var(--shade), 0.08), 0 16px 40px -16px rgba(var(--shade), 0.5); }
[data-theme="dark"] .header-inner { box-shadow: inset 0 0 0 1px var(--glass-line), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 14px 34px -16px rgba(0, 0, 0, 0.7); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  /* the same italic serif as "today?" and "dose." in the headlines; it ships with the site, so it looks the same everywhere */
  font-family: var(--serif);
  font-style: italic;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.brand span { padding-right: 0.06em; translate: 0 1px; }
.brand img, .notif img, .final-icon {
  border-radius: 22.5%;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16);
}
.brand img { width: 32px; height: 32px; transition: rotate 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
.brand-sm { gap: 8px; font-size: 22px; }
.brand-sm img { width: 22px; height: 22px; }

/* the links: plain text with room around it, and a stroke of paint under the section you're looking at */
.nav {
  position: relative;
  isolation: isolate;
  display: flex;
  gap: 6px;
  font-size: 15px;
  font-weight: 550;
}
.nav a {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--label-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav a:hover, .nav a[aria-current] { color: var(--label); }
.nav-dab {
  position: absolute;
  z-index: -1;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--w, 0);
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
  opacity: 0;
  transform: translateX(var(--x, 0)) scaleX(0.6);
  transition: transform 0.5s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.5s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.25s;
  pointer-events: none;
}
.nav[data-dab] .nav-dab { opacity: 1; transform: translateX(var(--x, 0)); }
[data-theme="dark"] .nav-dab { background: color-mix(in srgb, var(--accent) 34%, transparent); }
/* other pages mark their own link (or the section it's in) with the same stroke */
.nav a[aria-current="page"]::before, .nav a.is-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px -3px;
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
  pointer-events: none;
}
[data-theme="dark"] .nav a[aria-current="page"]::before, [data-theme="dark"] .nav a.is-section::before { background: color-mix(in srgb, var(--accent) 34%, transparent); }

.header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; }

/* day and night */
.theme-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--label-2);
  background: transparent;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.theme-btn::before { content: ""; position: absolute; inset: -4px; } /* 48px tap area */
.theme-btn:hover { color: var(--label); background: var(--glass-well); }
.theme-btn:active { transform: scale(0.92); }
.theme-btn svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.3s;
}
.theme-btn .i-sun { opacity: 0; transform: rotate(-120deg) scale(0.3); }
[data-theme="dark"] .theme-btn .i-sun { opacity: 1; transform: none; }
[data-theme="dark"] .theme-btn .i-moon { opacity: 0; transform: rotate(120deg) scale(0.3); }

.web-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  padding: 0 12px 0 14px;
  margin-right: 6px;
  border-radius: 999px;
  background: transparent;
  color: var(--label-2);
  font-size: 15px;
  font-weight: 550;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.web-btn::before { content: ""; position: absolute; inset: -4px -2px; } /* 48px tall tap area */
.web-btn svg { flex: none; width: 14px; height: 14px; }
.web-btn:hover { color: var(--label); background: var(--glass-well); }
.web-btn:active { transform: scale(0.96); }
/* "Web version" says it; the long label is for screen readers (aria-label) */
.web-btn .wb-long { display: none; }

.pill-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 19px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 8px 18px -10px rgba(var(--shade), 0.7);
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.pill-btn::before { content: ""; position: absolute; inset: -4px -2px; } /* 48px tall tap area */
.pill-btn:hover { background: var(--ink-hover); }
.pill-btn:active { transform: scale(0.96); }
/* once you've joined there's nothing left to sign up for; the web version button stays */
.js .header.joined .pill-btn { display: none; }

/* the nav has to fit: first the web link goes icon-only, then the centre links go, all with room to spare */
/* (icon-only, it keeps its aria-label and a faint ring so it still reads as a button) */
@media (min-width: 901px) and (max-width: 1080px) {
  .web-btn { width: 40px; padding: 0; margin-right: 4px; box-shadow: inset 0 0 0 1px var(--glass-line); }
  .web-btn .wb-short { display: none; }
}
@media (max-width: 900px) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .nav { display: none; }
  .header-actions { grid-column: 2; }
}
@media (max-width: 520px) {
  .web-btn { width: 38px; padding: 0; margin-right: 2px; box-shadow: inset 0 0 0 1px var(--glass-line); }
  .web-btn .wb-short { display: none; }
}
/* the smallest phones (320px): logo only, so the buttons never run into the wordmark; the link keeps its aria-label */
@media (max-width: 374px) {
  .header-inner .brand span { display: none; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header-inner { background: var(--glass-solid); }
}

/* ---------- Hero: the painting (seasons.js draws it into the canvas) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: clamp(720px, 100vh, 1120px);
  height: clamp(720px, 100svh, 1120px);
  padding: calc(var(--nav-top) + var(--nav-h) + clamp(28px, 6.5vh, 72px)) 24px 0;
  text-align: center;
  color: #fff;
  /* shows until WebGL draws, and stays if it can't: the painting's first frame, a winter dawn by the lake */
  background: linear-gradient(to bottom, #4a62c6 0%, #8d9fe6 40%, #f2c6c8 57%, #a89fdf 61%, #8f9fd0 68%, #dcdaf2 80%, #f1f0fa 91%, var(--paper) 100%);
  touch-action: pan-y; /* horizontal drags belong to the sun */
}
[data-theme="dark"] .hero {
  /* by night: a January night by the lake */
  background: linear-gradient(to bottom, #0b1446 0%, #1b2d72 40%, #3b4c92 57%, #34438a 61%, #24357a 68%, #4b5894 80%, #20264a 91%, var(--paper) 100%);
}
.year-canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.hero[data-ready] .year-canvas { opacity: 1; }
/* a soft veil behind the words; the scene makes it stronger when the sky is pale (--veil) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 40% at 50% 30%, rgba(var(--shade), var(--veil, 0.22)), rgba(var(--shade), 0));
}
.hero.can-grab { cursor: grab; }
.hero.grabbing, .hero.grabbing * { cursor: grabbing !important; }
.hero a:focus-visible, .hero button:focus-visible { outline-color: #fff; }

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  pointer-events: none; /* the sky underneath stays draggable and tappable */
}
.hero-inner .wl-field, .hero-inner a, .hero-inner button, .hero-inner input, .hero-inner .soon { pointer-events: auto; }
.hero h1 { max-width: 12em; text-shadow: 0 2px 34px rgba(var(--shade), 0.34); }
.lead {
  max-width: 34rem;
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 3px rgba(var(--shade), 0.3), 0 1px 14px rgba(var(--shade), 0.55);
}

/* Coming soon pill */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 15px 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.soon i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.soon i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--lime);
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.hero-cta { position: relative; z-index: 3; width: 100%; max-width: 470px; margin-top: clamp(26px, 4vh, 38px); }

/* the sun's date tag, under the sun (seasons.js moves it with --x / --y) */
.year-range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sun-tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 13px 8px;
  border-radius: 14px;
  background: rgba(var(--shade), 0.3);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 10px 26px -14px rgba(var(--shade), 0.7);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translateX(-50%);
  transition: opacity 0.5s ease;
  will-change: transform;
}
.hero[data-ready] .sun-tag { opacity: 1; }
.year-range:focus-visible ~ .sun-tag { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 0 0 3px #fff; }
.tag-date { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1; letter-spacing: 0; }
.tag-note { display: none; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.1; letter-spacing: 0; color: #ffe1a1; }
.sun-tag[data-noted] .tag-note { display: block; }
.tag-day { font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; opacity: 0.86; font-variant-numeric: tabular-nums; }
.tag-hint {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
  transition: grid-template-rows 0.45s ease, opacity 0.45s ease, margin 0.45s ease;
}
.tag-hint > span { overflow: hidden; }
.hero[data-hint] .tag-hint { grid-template-rows: 1fr; opacity: 1; margin-top: 3px; }

/* night only: the Big Dipper's name, under it while its lines are drawn */
.dipper-tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(var(--shade), 0.9);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, 6px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.dipper-tag[data-on] { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, 0); }

/* words that follow the light: "Drag the sun" by day, "Drag the moon" by night */
.w-night { display: none; }
[data-theme="dark"] .w-day { display: none; }
[data-theme="dark"] .w-night { display: inline; }

/* ---------- Waitlist form ---------- */
.waitlist { position: relative; max-width: 470px; margin: 0 auto; }
.wl-field {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 20px 44px -20px rgba(var(--shade), 0.6);
  transition: box-shadow 0.2s, background-color 0.2s;
}
.wl-field:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--lime), 0 0 0 4px rgba(138, 219, 46, 0.4), 0 20px 44px -20px rgba(var(--shade), 0.6); }
.wl-field input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 8px 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--label);
  font-size: 17px;
  text-align: left;
  outline: none;
}
.wl-field input::placeholder { color: #807e8c; opacity: 1; }
.wl-field input:-webkit-autofill { transition: background-color 600000s, color 600000s; }
.wl-field button {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s, transform 0.15s, opacity 0.15s;
}
.wl-field button:hover { background: var(--ink-hover); }
.wl-field button:active { transform: scale(0.97); }
.wl-field button:disabled { opacity: 0.55; cursor: progress; }
.wl-field button:focus-visible { outline-color: var(--focus); }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-msg {
  min-height: 1.45em;
  margin-top: 14px;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 0 3px rgba(var(--shade), 0.3), 0 1px 12px rgba(var(--shade), 0.5);
}
/* in the painting the message floats under the form, so the land (measured from the form) never moves */
.hero .wl-msg { position: absolute; left: 0; right: 0; top: calc(100% + 2px); }
.hero .wl-msg:empty { display: none; }
.waitlist[data-state="error"] .wl-field { background: #fff; box-shadow: inset 0 0 0 2px var(--red), 0 20px 44px -20px rgba(var(--shade), 0.6); }
.waitlist[data-state="error"] .wl-msg {
  width: fit-content;
  max-width: 100%;
  /* the negative bottom margin cancels the pill's padding, so the error takes the same room as the hint */
  margin: 14px auto -10px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #d70015;
  font-weight: 600;
  text-shadow: none;
}
.hero .waitlist[data-state="error"] .wl-msg { margin: 12px auto 0; }
.waitlist[data-state="done"] .wl-field { display: none; }
.waitlist[data-state="done"] .wl-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  padding: 16px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 44px -20px rgba(var(--shade), 0.6);
  color: #1c1b23;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  text-shadow: none;
  animation: settle 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero .waitlist[data-state="done"] .wl-msg { position: static; }
.waitlist[data-state="done"] .wl-msg::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lime) var(--check) center / 15px no-repeat;
  animation: pop 0.5s 0.1s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
@keyframes settle { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes pop { from { transform: scale(0); } }

/* by night: dark glass */
[data-theme="dark"] .wl-field {
  background: rgba(18, 21, 44, 0.74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 20px 44px -20px rgba(0, 0, 0, 0.75);
}
[data-theme="dark"] .wl-field:focus-within { background: rgba(18, 21, 44, 0.92); box-shadow: inset 0 0 0 2px var(--lime), 0 0 0 4px rgba(138, 219, 46, 0.3); }
[data-theme="dark"] .wl-field input::placeholder { color: #9a9db6; }
[data-theme="dark"] .waitlist[data-state="error"] .wl-field { background: rgba(18, 21, 44, 0.92); box-shadow: inset 0 0 0 2px var(--red); }
[data-theme="dark"] .waitlist[data-state="done"] .wl-msg { background: rgba(20, 23, 48, 0.9); color: #f1f0f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 44px -20px rgba(0, 0, 0, 0.8); }

/* ---------- The app, rising out of the meadow ---------- */
.showcase {
  --peek: clamp(96px, 13vh, 150px);
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center; /* stays centred even when the art is wider than the screen */
  margin-top: calc(-1 * var(--peek));
  overflow-x: clip;
  pointer-events: none; /* taps on the meadow behind go through to the painting */
}
.showcase-art {
  position: relative;
  flex: none;
  width: 64em;
  height: 36em;
  font-size: clamp(11px, 1.02vw, 15px);
  /* the phones sink into the paper the way the painting does */
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 64%, transparent 99%);
}

/* iPhone frame */
.device {
  position: relative;
  width: 20em;
  padding: 0.15em;
  border-radius: 3.25em;
  background: linear-gradient(150deg, #d4d4d8 0%, #7c7c82 32%, #c3c3c8 52%, #6a6a70 78%, #b0b0b5 100%);
  box-shadow: 0 2.4em 4.2em -1.8em rgba(var(--shade), 0.5), 0 0.8em 1.4em -0.8em rgba(0, 0, 0, 0.25);
}
.device::before, .device::after {
  content: "";
  position: absolute;
  width: 0.22em;
  background: linear-gradient(90deg, #6a6a70, #bdbdc2);
}
.device::before { right: -0.19em; top: 11.5em; height: 5em; border-radius: 0 0.2em 0.2em 0; }
.device::after {
  left: -0.19em;
  top: 7.6em;
  height: 2.2em;
  border-radius: 0.2em 0 0 0.2em;
  box-shadow: 0 3.6em 0 #8f8f95, 0 7.4em 0 #8f8f95;
}
.screen { position: relative; overflow: hidden; border: 0.45em solid #050505; border-radius: 3.1em; background: #000; }
.screen img { width: 100%; }
/* by night the phone goes dark too: the night screen lies on top of the day one */
.screen .s-night { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
[data-theme="dark"] .screen .s-night { opacity: 1; }

.showcase-art .device-front { z-index: 3; margin: 0 auto; }
.showcase-art .device-left, .showcase-art .device-right { position: absolute; top: 3.6em; left: 22em; }
.showcase-art .device-left { z-index: 1; transform: translateX(-60%) rotate(-9deg) scale(0.87); }
.showcase-art .device-right { z-index: 2; transform: translateX(60%) rotate(9deg) scale(0.87); }

/* small glass cards floating around the phones */
.float {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.7em 1.15em 0.7em 0.7em;
  border-radius: 1.3em;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 1.2em 2.4em -1em rgba(var(--shade), 0.55);
  color: #1c1b23;
  font-size: 0.95em;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
}
.float b { display: block; font-weight: 600; letter-spacing: -0.015em; }
.float p > span { display: block; font-size: 0.87em; color: #5e5c69; }
.float-ic { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; }
.float-ic svg { width: 1.3em; height: 1.3em; }
.float-flame { background: #fff1df; color: #ff8a00; }
.float-streak { top: 6.2em; left: 1.2em; rotate: -3deg; }

/* iOS notification banner */
.notif {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px 11px 11px;
  border-radius: 22px;
  background: rgba(250, 250, 252, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.04), 0 16px 36px -14px rgba(var(--shade), 0.45);
  color: #1d1d1f;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
}
.notif img { width: 38px; height: 38px; flex: none; }
.notif > div { flex: 1; min-width: 0; }
.notif-top { display: flex; justify-content: space-between; gap: 12px; }
.notif-top b { font-weight: 600; }
.notif-top span { flex: none; font-size: 13px; color: rgba(60, 60, 67, 0.6); }
.notif-hero { position: absolute; z-index: 4; top: 3.4em; right: -0.6em; width: 21em; padding: 0.75em 1.05em 0.75em 0.75em; border-radius: 1.45em; font-size: 0.95em; rotate: 2deg; }
.notif-hero img { width: 2.55em; height: 2.55em; }
.notif-hero .notif-top span { font-size: 0.87em; }

/* iOS by night */
[data-theme="dark"] .float { background: rgba(30, 32, 52, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1.2em 2.4em -1em rgba(0, 0, 0, 0.7); color: #f2f2f7; }
[data-theme="dark"] .float p > span { color: rgba(235, 235, 245, 0.62); }
[data-theme="dark"] .float-flame { background: rgba(255, 138, 0, 0.18); }
[data-theme="dark"] .notif { background: rgba(38, 38, 46, 0.8); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 16px 36px -14px rgba(0, 0, 0, 0.7); color: #f2f2f7; }
[data-theme="dark"] .notif-top span { color: rgba(235, 235, 245, 0.6); }

.js .showcase-art .device-front { animation: rise 1s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .showcase-art .device-left, .js .showcase-art .device-right { animation: rise 1s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .showcase .float, .js .showcase .notif-hero { animation: drop 0.7s 1.05s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
.js .showcase .notif-hero { animation-delay: 1.3s; }
@keyframes rise { from { opacity: 0; translate: 0 64px; } }
@keyframes drop { from { opacity: 0; translate: 0 -14px; scale: 0.94; } }

/* ---------- Painted panels: stills of the painting, by day and by night ---------- */
.paint { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.paint img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.paint-night { opacity: 0; transition: opacity 1.5s ease; }
[data-theme="dark"] .paint-night { opacity: 1; }
/* only the picture for the current light loads, until the switch is about to be used (app.js adds .both-themes) */
:root:not(.both-themes):not([data-theme="dark"]) .paint-night,
:root:not(.both-themes)[data-theme="dark"] .paint-day { display: none; }

/* ---------- Sections ---------- */
.section { padding: 104px 0; }
#how { padding-top: 64px; }

/* ---------- Try it: the real app in a phone (the web replica in an <iframe>, app.js) ---------- */
.try { padding: 40px 0 24px; }
.try-head { margin: 0 auto 36px; text-align: center; }
.try-head .section-lead { margin-left: auto; margin-right: auto; }
.try-stage {
  --w: 340; /* the screen's width in css px: the app (402 × 874) is scaled to it */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}
.try-side { display: flex; flex-direction: column; gap: 22px; }
.try-side-a { align-items: flex-end; }
.try-side-b { align-items: flex-start; }
.try-tips { display: flex; flex-direction: column; gap: 18px; list-style: none; }
.try-side-a .try-tips { align-items: flex-end; }
.try-tips .float { position: relative; z-index: auto; font-size: 15px; }
.try-side-a li:nth-child(1) { rotate: -2.5deg; }
.try-side-a li:nth-child(2) { rotate: 1.5deg; margin-right: 26px; }
.try-side-b li:nth-child(1) { rotate: 2deg; }
.try-side-b li:nth-child(2) { rotate: -1.5deg; margin-left: 30px; }
.try-ic-lime { background: var(--lime-soft); color: var(--green-ink); }
.try-ic-blue { background: #e3efff; color: #0a7ae6; }
.try-ic-violet { background: #eeeaff; color: #6a4fd8; }
[data-theme="dark"] .try-ic-lime { background: rgba(138, 219, 46, 0.18); color: var(--lime); }
[data-theme="dark"] .try-ic-blue { background: rgba(10, 132, 255, 0.2); color: #64b2ff; }
[data-theme="dark"] .try-ic-violet { background: rgba(140, 110, 255, 0.22); color: #b4a4ff; }

/* the handwritten note, pointing at the phone */
.try-note { display: flex; flex-direction: column; align-items: flex-end; margin-right: -18px; color: var(--accent-ink); rotate: -4deg; }
.try-note span { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1; letter-spacing: -0.01em; }
.try-note svg { width: 104px; height: 61px; margin-top: 4px; }

.try-phone .device { font-size: calc(var(--w) / 18.8 * 1px); } /* 20em of frame = 18.8em of screen = --w px */
.try-phone .screen { aspect-ratio: 402 / 874; isolation: isolate; }
.try-phone .screen img { height: 100%; object-fit: cover; }
.demo-frame {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 402px; height: 874px; border: 0;
  transform: scale(calc(var(--w) / 402));
  transform-origin: 0 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.screen[data-live] .demo-frame { opacity: 1; pointer-events: auto; }

/* on touch screens the phone waits for a tap, so a swipe down the page doesn't get caught in the app */
.try-start { display: none; }
@media (pointer: coarse) {
  .try-start {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 36%; /* over the open space between the calendar and the cards */
    border-radius: inherit;
    background: linear-gradient(to bottom, transparent 45%, rgba(var(--shade), 0.28));
  }
  .try-start span {
    display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px;
    background: var(--ink); color: var(--on-ink); font-size: 16px; font-weight: 600;
    box-shadow: 0 14px 30px -12px rgba(var(--shade), 0.7);
  }
  .screen[data-started] .try-start { display: none; }
  .screen:not([data-started]) .demo-frame { pointer-events: none; }
}
[data-theme="dark"] .try-start span { background: #f5f5f7; color: #0b0b0c; }

.try-foot { max-width: 34rem; margin: 30px auto 0; text-align: center; font-size: 15px; color: var(--label-2); }
.try-foot a { color: var(--label); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.try-foot a::after { content: " ↗"; }

@media (max-height: 860px) and (min-width: 901px) { .try-stage { --w: 310; } }
@media (max-width: 900px) {
  .try-stage { --w: 310; grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; }
  .try-side { display: contents; }
  .try-note { order: -1; align-items: center; margin: 0 0 6px; rotate: -3deg; }
  .try-note svg { width: 64px; height: 50px; rotate: 62deg; }
  .try-phone { order: 0; }
  .try-tips { order: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
  .try-side-b .try-tips { margin-top: 12px; }
  .try-tips .float { font-size: 14px; margin: 0 !important; padding: 0.55em 1em 0.55em 0.55em; }
  .try-tips .float p > span { display: none; }
  .try-tips .float-ic { width: 2.1em; height: 2.1em; }
}
@media (max-width: 374px) { .try-stage { --w: 270; } }
@media (prefers-reduced-motion: reduce) { .demo-frame { transition: none; } }

/* ---------- How it works ---------- */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.how-figure { min-width: 0; }
.how-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 56px 24px;
  border-radius: 36px;
  background: var(--paint-bg);
  box-shadow: var(--card-shadow);
}
.how-panel .paint img { object-position: 50% 62%; }
.how-panel .device { z-index: 1; }
.device-lg { font-size: 14.5px; }

.spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: #15141b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(var(--shade), 0.35);
  transition: transform 0.2s, background-color 0.2s, color 0.2s;
}
.spot.on { transform: scale(1.18); background: var(--lime); color: #143000; }
.spot:focus-visible { outline-color: #fff; }

.notes { margin-top: 40px; border-top: 1px solid var(--sep); }
.notes li { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--sep); }
.num {
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.notes li.on .num { background: var(--lime); color: #143000; transform: scale(1.08); }
.notes b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.notes p { margin-top: 2px; font-size: 16px; color: var(--label-2); }

/* ---------- Features: three tiles, three seasons ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile {
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: hidden;
  padding: 34px 34px 0;
  border-radius: 30px;
  background: var(--card);
  box-shadow: var(--card-shadow);
}
.tile-text p { margin-top: 8px; font-size: 17px; color: var(--label-2); }
.tile-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 240px;
  margin: auto -34px 0;
  padding: 24px 16px;
  background: var(--paint-bg);
}
.tile-visual > :not(.paint, .fx-star, .fx-mote) { width: 100%; }
.tile-visual .paint img { object-position: 50% 70%; }
.dots { display: none; }
.visual-stack { padding: 24px 0; }
.homescreen { padding: 24px 14px; }

/* supplement carousel */
.carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 0 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 18px 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: #6e6e73;
}
.chip-on {
  height: 52px;
  padding-right: 22px;
  background: #fff;
  color: #1d1d1f;
  font-size: 16px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 12px 26px -12px rgba(var(--shade), 0.5);
}
.chip-ic { position: relative; flex: none; width: 30px; height: 30px; }
.chip-ic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(0, 0, 0, 0.1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}
.chip-ic::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--c); }
.chip-on .chip-ic { width: 36px; height: 36px; }
.chip-on .chip-ic::after { inset: 11px; }

/* reminder on a lock screen */
.notif-stack { position: relative; isolation: isolate; max-width: 340px; padding-bottom: 10px; }
.notif-stack::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 30px;
  border-radius: 0 0 18px 18px;
  background: rgba(250, 250, 252, 0.5);
  box-shadow: 0 10px 22px -12px rgba(var(--shade), 0.35);
}
.notif-stack .notif { gap: 10px; padding: 10px 13px 10px 10px; border-radius: 20px; font-size: 14px; }
.notif-stack .notif img { width: 34px; height: 34px; }
.notif-stack .notif-top span { font-size: 12px; }

/* medium Home Screen widget */
.hs-row { display: flex; justify-content: center; container-type: inline-size; }
.widget {
  flex: none;
  display: grid;
  grid-template-columns: 6.6em minmax(0, 1fr);
  gap: 1.1em;
  width: 21.125em;
  height: 9.875em;
  padding: 1em;
  border-radius: 1.4em;
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 0.7em 1.6em -0.9em rgba(var(--shade), 0.55);
  font-size: 13px;
  font-size: min(16px, 100cqi / 21.3);
  line-height: 1.2;
}
.wm-left { display: flex; flex-direction: column; align-items: center; }
.w-title { align-self: flex-start; font-size: 0.875em; font-weight: 700; }
.wm-ring { position: relative; width: 4.2em; height: 4.2em; margin: auto 0; }
.wm-ring svg { display: block; width: 100%; height: 100%; }
.wm-ring circle { fill: none; stroke-width: 5; }
.wm-ring .rt { stroke: rgba(0, 0, 0, 0.08); }
.wm-ring .ra { stroke: var(--lime); stroke-linecap: round; }
.wm-ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.6875em; line-height: 1.05; color: #6e6e73; }
.wm-ring span b { font-family: var(--rounded); font-size: 1.45em; color: #1d1d1f; }
.w-btn {
  display: block;
  align-self: stretch;
  padding: 0.45em 0.6em;
  border-radius: 999px;
  background: var(--lime);
  color: #143000;
  font-size: 0.8125em;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.wm-list { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; font-size: 0.8125em; }
.wm-list li { display: flex; align-items: center; gap: 0.55em; min-width: 0; }
.wm-list li > i { flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--c); }
.wm-list li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wm-list svg { flex: none; width: 1.35em; height: 1.35em; }
.w-ok { padding: 0.2em; border-radius: 50%; background: var(--lime); color: #143000; }
.w-add { color: #8e8e93; }
.wm-list .wm-more { justify-content: center; font-size: 0.85em; color: #6e6e73; }

/* the same, in iOS dark mode */
[data-theme="dark"] .chip { background: rgba(30, 30, 38, 0.72); color: #aeaeb2; }
[data-theme="dark"] .chip-on { background: #1c1c1e; color: #f2f2f7; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 12px 26px -12px rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .chip-ic::before { background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, 0.14) 0); }
[data-theme="dark"] .notif-stack::after { background: rgba(38, 38, 46, 0.5); }
[data-theme="dark"] .widget { background: #1c1c1e; color: #f2f2f7; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 0.7em 1.6em -0.9em rgba(0, 0, 0, 0.8); }
[data-theme="dark"] .wm-ring .rt { stroke: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .wm-ring span, [data-theme="dark"] .wm-list .wm-more, [data-theme="dark"] .w-add { color: #98989f; }
[data-theme="dark"] .wm-ring span b { color: #f2f2f7; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 80px; align-items: start; }
.faq-wrap .section-head { position: relative; margin-bottom: 0; }
.faq, .faq-list { overflow: hidden; border-radius: 26px; background: var(--card); box-shadow: var(--card-shadow); }
.faq details, .faq-list details { position: relative; }
.faq details + details::before, .faq-list details + details::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 0;
  height: 1px;
  background: var(--sep);
}
.faq summary, .faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 19px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--label);
  transition: background-color 0.15s;
}
.faq summary:hover, .faq-list summary:hover { background: var(--well); }
.faq summary::-webkit-details-marker, .faq-list summary::-webkit-details-marker { display: none; }
/* a plus that turns into a cross, on a dab of the season's colour */
.faq summary::after, .faq-list summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 2px 12px no-repeat,
    var(--accent-soft);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.2s;
}
.faq details[open] summary::after, .faq-list details[open] summary::after { transform: rotate(135deg); }
.faq details p { max-width: 40rem; padding: 0 22px 22px; margin-top: -6px; color: var(--label-2); }
.faq-list details p { margin: -4px 0 0; padding: 0 22px 22px; font-size: 17px; line-height: 1.6; color: var(--label-2); }
.faq details a, .faq-list details a { color: var(--accent-ink); text-underline-offset: 3px; }
.more-links { margin-top: 22px; font-size: 16px; color: var(--label-2); }
.more-links a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }

/* ---------- The waitlist card: the whole year, painted ---------- */
.final { padding: 32px 0 112px; }
.final-card {
  /* the still in use (styles below pick it by width, like the <picture>): height / width, and where the form's
     bottom sits on it, up from the bottom. The card's bottom padding is that much of the picture, so the form always
     ends just above the sun's path; above the picture, if the text needs more sky, the card shows its top colour */
  --ar: 0.7818;
  --fb: 0.44;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 84px 32px calc(100% * var(--ar) * var(--fb));
  border-radius: 40px;
  background: var(--final-top);
  box-shadow: var(--card-shadow);
  color: #fff;
  text-align: center;
}
.final-card .paint img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  object-fit: fill;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%);
  mask-image: linear-gradient(to bottom, transparent, #000 10%);
}
.final-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 40% at 50% 24%, rgba(var(--shade), 0.34), rgba(var(--shade), 0));
}
/* a box the size of the picture, for the date tag under the sun on the last day (like the painting's own) */
.final-card { container-type: inline-size; --sun-x: 0.9188; --sun-y: 0.7259; --sun-r: 0.0297; }
.final-frame { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; aspect-ratio: 1 / var(--ar); pointer-events: none; }
.final-tag {
  position: absolute;
  left: min(calc(var(--sun-x) * 100%), calc(100% - 76px));
  top: calc(var(--sun-y) * 100% + var(--sun-r) * 100cqw + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 13px 8px;
  border-radius: 14px;
  background: rgba(var(--shade), 0.3);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 10px 26px -14px rgba(var(--shade), 0.7);
  color: #fff;
  white-space: nowrap;
  transform: translateX(-50%);
}
.final-tag .tag-note { display: block; }
.final-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.final-icon { width: 96px; height: 96px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 26px 50px -20px rgba(var(--shade), 0.8); }
.final h2 { margin: 28px 0 14px; text-shadow: 0 2px 34px rgba(var(--shade), 0.4); }
.final-lead { max-width: 30rem; margin-bottom: 30px; font-size: 20px; line-height: 1.45; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 14px rgba(var(--shade), 0.55); }
.final .waitlist { width: 100%; }
.final-card a:focus-visible, .final-card button:focus-visible { outline-color: #fff; }
@media (max-width: 960px) {
  .final-card { --ar: 1.1842; --fb: 0.42; --sun-y: 0.7487; --sun-r: 0.045; }
}
@media (max-width: 600px) {
  .final-card { --ar: 2.2381; --fb: 0.36; --sun-y: 0.7378; --sun-r: 0.0716; }
}

/* ---------- Footer ---------- */
.footer { padding: 0 0 max(40px, calc(env(safe-area-inset-bottom) + 20px)); font-size: 14px; color: var(--label-2); }
.footer-inner { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; padding-top: 28px; }
.footer-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--gutter), env(safe-area-inset-left));
  right: max(var(--gutter), env(safe-area-inset-right));
  height: 1px;
  background: var(--sep);
}
.footer-links { display: flex; gap: 24px; margin-left: auto; }
.footer-links a { text-decoration: none; white-space: nowrap; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--label); }
.footer-aside { flex-basis: 100%; font-family: var(--serif); font-style: italic; font-size: 17px; letter-spacing: 0; color: var(--label-3); }
.took-it {
  position: relative;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 6px;
  font: inherit;
  color: var(--label-2);
  text-decoration: underline dotted color-mix(in srgb, var(--label-3) 70%, transparent);
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.took-it:hover { color: var(--label); }
.took-it[aria-pressed="true"] { color: var(--green-ink); text-decoration: none; }
.took-it[aria-pressed="true"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  vertical-align: -3px;
  border-radius: 50%;
  background: var(--lime) var(--check) center / 11px no-repeat;
  animation: pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

/* ---------- Little things (app.js) ---------- */
/* a note at the bottom of the screen */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  max-width: min(92vw, 440px);
  padding: 12px 20px 12px 14px;
  border-radius: 999px;
  background: var(--glass-solid);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 0 0 1px rgba(var(--shade), 0.08), 0 18px 40px -16px rgba(var(--shade), 0.55);
  color: var(--label);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  transform: translate(-50%, 24px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
  pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast::before {
  content: "";
  flex: none;
  width: 22px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
  rotate: -12deg;
}

/* a shooting star across a painted panel: a tail and a bright head */
.fx-star {
  position: absolute;
  left: calc(var(--x) - var(--len, 110px));
  top: var(--y);
  z-index: 1;
  width: var(--len, 110px);
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--tail, rgba(255, 255, 255, 0.9)));
  transform-origin: 100% 50%;
  rotate: var(--a, 30deg);
  pointer-events: none;
  animation: fx-star var(--t, 1s) cubic-bezier(0.25, 0.6, 0.35, 1) forwards;
}
.fx-star::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px var(--glow, rgba(196, 210, 255, 0.95));
}
@keyframes fx-star {
  from { opacity: 0; translate: 0 0; }
  14% { opacity: 1; }
  70% { opacity: 1; }
  to { opacity: 0; translate: var(--dx) var(--dy); }
}
/* specks of colour: pollen off a painted meadow, sparks off a star, a puff of joy */
.fx-mote {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: var(--s, 6px);
  height: calc(var(--s, 6px) * 0.6);
  margin: calc(var(--s, 6px) * -0.3) 0 0 calc(var(--s, 6px) * -0.5);
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 1px 2px rgba(var(--shade), 0.35); /* fireflies swap this for a glow */
  rotate: var(--r, 0deg);
  pointer-events: none;
  animation: fx-mote var(--t, 1.6s) cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes fx-mote {
  from { opacity: 0; translate: 0 0; scale: 0.4; }
  15% { opacity: 1; scale: 1; }
  to { opacity: 0; translate: var(--dx) var(--dy); scale: 0.7; }
}
/* a dab of paint on the paper, where you clicked */
.fx-dab {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 5;
  width: var(--s, 34px);
  height: calc(var(--s, 34px) * 0.5);
  margin: calc(var(--s, 34px) * -0.25) 0 0 calc(var(--s, 34px) * -0.5);
  background: var(--c, var(--accent));
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
  rotate: var(--r, 0deg);
  opacity: 0.85;
  pointer-events: none;
  animation: dab-in 0.32s cubic-bezier(0.3, 1.6, 0.5, 1) both, dab-out 1.4s 2.4s ease forwards;
}
@keyframes dab-in { from { scale: 0.2 0.6; opacity: 0; } }
@keyframes dab-out { to { opacity: 0; scale: 1.06; } }
/* a gold star for reading every answer */
.gold-star {
  position: absolute;
  right: 6px;
  top: -8px;
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 38% 34%, #fff6c9, #ffd23f 42%, #e89a07);
  clip-path: polygon(50% 0, 61.8% 35.4%, 98% 35.4%, 68.6% 57.2%, 79.4% 91.6%, 50% 70.6%, 20.6% 91.6%, 31.4% 57.2%, 2% 35.4%, 38.2% 35.4%);
  filter: drop-shadow(0 6px 10px rgba(232, 154, 7, 0.45));
  rotate: 12deg;
  animation: gold-in 1.1s cubic-bezier(0.3, 1.25, 0.5, 1) both;
  pointer-events: none;
}
@keyframes gold-in {
  from { opacity: 0; translate: 0 -160px; rotate: -200deg; scale: 0.4; }
  60% { opacity: 1; }
}
/* on the content pages it lands right after the questions' heading */
.gold-star.is-inline { position: relative; display: inline-block; top: auto; right: auto; width: 0.8em; height: 0.8em; margin-left: 0.3em; vertical-align: -0.04em; }
/* stars across the whole window (the meteor shower away from the painting) */
.fx-layer { position: fixed; inset: 0; z-index: 65; overflow: hidden; pointer-events: none; }

/* ---------- The finale: you joined, the year runs out into fireworks, and then it's day one ----------
   data-finale on the hero (or the waitlist card): "run" clears the words off the picture, "midnight" shows the
   message. app.js / fun.js set it; the painting does the rest (seasons.js finale), the card gets DOM fireworks */
.hero-inner, .final-inner { transition: opacity 0.8s ease, translate 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease, visibility 0s; }
[data-finale] > .hero-inner, [data-finale] > .final-inner {
  opacity: 0;
  translate: 0 -16px;
  filter: blur(8px);
  visibility: hidden;
  transition: opacity 0.6s ease, translate 0.8s cubic-bezier(0.4, 0, 0.6, 1), filter 0.6s ease, visibility 0s 0.6s;
}
.finale {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--nav-top) + var(--nav-h) + clamp(48px, 13vh, 140px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  color: #fff;
  text-align: center;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s 1s;
}
.final-card .finale { top: 84px; }
.finale p { opacity: 0; translate: 0 18px; filter: blur(6px); transition: opacity 0.8s ease, translate 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease; }
.finale-kicker {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-shadow: 0 0 3px rgba(var(--shade), 0.3), 0 1px 14px rgba(var(--shade), 0.6);
}
.finale-title {
  max-width: 12em;
  font-family: var(--display);
  font-size: clamp(2.6rem, min(5.4vw, 9.6vh), 5.2rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.036em;
  word-spacing: 0.07em;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(var(--shade), 0.5);
}
.final-card .finale-title { font-size: clamp(2.2rem, 4.3vw, 3.8rem); }
.finale-title em { font-family: var(--serif); font-size: 1.1em; font-style: italic; font-weight: 400; letter-spacing: -0.012em; }
[data-finale="midnight"] > .finale { visibility: visible; transition-delay: 0s; }
[data-finale="midnight"] > .finale p { opacity: 1; translate: 0 0; filter: none; }
[data-finale="midnight"] > .finale .finale-title { transition-delay: 0.6s; }

/* fireworks in the card: a rocket, a flash, a ring of sparks that droop as they fade */
.fx-burst { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 0; height: 0; pointer-events: none; }
.fx-burst::after {
  content: "";
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), var(--c1) 30%, transparent 70%);
  opacity: 0;
  animation: fx-flash 0.6s ease-out var(--launch) forwards;
}
.fx-burst .fx-rocket {
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fff, rgba(255, 214, 140, 0));
  animation: fx-rocket var(--launch) cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
}
.fx-burst .fx-spark {
  position: absolute;
  left: -5px;
  top: -1px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 6px 1px var(--c);
  rotate: var(--a);
  opacity: 0;
  animation: fx-spark var(--t, 1.5s) cubic-bezier(0.1, 0.75, 0.3, 1) var(--launch) forwards;
}
@keyframes fx-rocket {
  from { opacity: 0; translate: 0 var(--rise); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  to { opacity: 0; translate: 0 0; }
}
@keyframes fx-flash {
  from { opacity: 0.9; scale: 0.3; }
  to { opacity: 0; scale: 1.6; }
}
@keyframes fx-spark {
  from { opacity: 1; translate: 0 0; scale: 1.3 1; }
  65% { opacity: 1; }
  to { opacity: 0; translate: var(--dx) calc(var(--dy) + 26px); scale: 0.4 0.8; }
}
/* the logo's streak, like the app's */
.streak-bubble {
  position: fixed;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: #fff1df;
  color: #c25e00;
  font: 700 13px/1 var(--rounded);
  box-shadow: 0 8px 18px -8px rgba(194, 94, 0, 0.6);
  pointer-events: none;
  animation: bubble 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.streak-bubble svg { width: 13px; height: 13px; color: #ff8a00; }
@keyframes bubble {
  from { opacity: 0; translate: -50% 6px; scale: 0.6; }
  18% { opacity: 1; translate: -50% -6px; scale: 1; }
  75% { opacity: 1; }
  to { opacity: 0; translate: -50% -26px; }
}

/* ---------- Edge glow after joining (the app's logging "ritual") ---------- */
.glow {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  filter: blur(16px);
  animation: glow 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.glow::before {
  content: "";
  position: absolute;
  inset: -10px;
  padding: 22px;
  background: conic-gradient(from 210deg, #2cc7b4, #0a84ff, #8adb2e, #ffb340, #2cc7b4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@keyframes glow { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; translate: 0 28px; transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; translate: none; }
/* the feature cards reveal one by one on larger screens and together on phones */
@media (min-width: 721px) {
  .js .gallery.reveal { opacity: 1; translate: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { transition: none; }
  .js .reveal { opacity: 1; translate: none; transition: none; }
  .js .showcase-art .device, .js .showcase .float, .js .showcase .notif-hero, .soon i::after,
  .waitlist[data-state="done"] .wl-msg, .waitlist[data-state="done"] .wl-msg::before,
  .gold-star, .took-it[aria-pressed="true"]::before { animation: none; }
  .year-canvas, .sun-tag, .tag-hint, .dipper-tag, .paint-night, .screen .s-night, .nav-dab, .theme-btn svg { transition: none; }
  .fx-star, .fx-mote, .streak-bubble { display: none; }
  .fx-dab { animation: dab-out 0.01s 2.4s forwards; }
  .glow { display: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .showcase-art { font-size: clamp(11px, 1.5vw, 14px); }
  .float-streak { left: 0; }
  .notif-hero { right: -1.4em; }

  .how { grid-template-columns: 1fr; gap: 0; }
  .how-copy { display: contents; }
  .how-copy .section-eyebrow { order: 1; justify-self: start; }
  .how-copy h2 { order: 2; }
  .how-copy .section-lead { order: 3; margin-bottom: 56px; }
  .how-figure { order: 4; width: 100%; max-width: 560px; justify-self: center; }
  .how-copy .notes { order: 5; margin-top: 56px; }

  /* tiles stack, with the painting on the right */
  .bento { grid-template-columns: 1fr; }
  .tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 0 0 0 40px; }
  .tile-visual { align-self: stretch; min-height: 280px; margin: 0; }

  .faq-wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  :root { --gutter: 20px; --nav-top: 10px; --nav-h: 54px; }
  html { scroll-padding-top: 80px; }
  body { font-size: 16px; }
  .header { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .header-inner { padding: 0 7px 0 10px; }
  .header-actions { gap: 6px; }
  .pill-btn { height: 38px; padding: 0 15px; font-size: 14px; }
  .pill-btn::before { inset: -5px -3px; }
  .web-btn { height: 38px; font-size: 14px; }
  .web-btn::before { inset: -5px -3px; }
  .theme-btn { width: 38px; height: 38px; }
  .brand img { width: 30px; height: 30px; }
  .brand { font-size: 25px; }

  h2 { font-size: clamp(2.1rem, 9.6vw, 2.75rem); }
  h3 { font-size: 22px; }
  .section { padding: 80px 0; }
  #how { padding-top: 40px; }
  .section-head { margin-bottom: 32px; }
  .section-eyebrow { margin-bottom: 14px; font-size: 13px; }
  .section-lead { font-size: 18px; }

  /* hero */
  .hero { padding: calc(var(--nav-top) + var(--nav-h) + 34px) 18px 0; }
  .soon { margin-bottom: 16px; font-size: 13px; }
  .hero h1 { font-size: clamp(2.6rem, 11.5vw, 3.4rem); }
  .lead { max-width: 25em; margin-top: 14px; font-size: 17px; }
  .hero-cta { margin-top: 26px; }
  .tag-date { font-size: 19px; }

  /* the phones */
  .showcase { --peek: 72px; }
  .showcase-art { height: 27em; font-size: min(13px, 3.4vw); }
  .showcase .float { display: none; }
  .notif-hero { top: 2.6em; left: 50%; right: auto; width: 21.5em; margin-left: -10.75em; font-size: 1.04em; rotate: none; }
  .notif-hero { background: rgba(250, 250, 252, 0.94); }
  [data-theme="dark"] .notif-hero { background: rgba(38, 38, 46, 0.94); }

  .wl-field button { padding: 0 16px; font-size: 15px; }

  /* how it works */
  .how-panel { padding: 40px 16px; border-radius: 28px; }
  .device-lg { font-size: min(12.5px, calc((100vw - 104px) / 20)); }
  .how-copy .section-lead { margin-bottom: 40px; }
  .how-copy .notes { margin-top: 40px; }
  .notes li { gap: 16px; padding: 16px 0; }
  .notes b { font-size: 18px; }

  /* features: swipeable cards with page dots */
  .gallery { margin: 0 calc(-1 * var(--gutter)); }
  .bento {
    display: flex;
    gap: 12px;
    padding: 2px 0 24px var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento::after { content: ""; flex: 0 0 calc(var(--gutter) - 12px); }
  .tile {
    display: flex;
    flex: 0 0 min(360px, calc(100% - 56px));
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 26px 22px 0;
    border-radius: 26px;
    scroll-snap-align: start;
  }
  .tile-visual { align-self: stretch; min-height: 220px; margin: auto -22px 0; }
  .js .gallery .tile.reveal { opacity: 1; translate: none; transition: none; }
  .dots { display: flex; justify-content: center; margin-top: -4px; }
  .dots span { display: grid; place-items: center; width: 17px; height: 24px; cursor: pointer; }
  .dots span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sep); transition: background-color 0.25s, width 0.25s; }
  .dots span.on::before { width: 14px; border-radius: 999px; background: var(--accent); }

  /* FAQ */
  .faq-wrap { gap: 28px; }
  .faq, .faq-list { border-radius: 22px; }
  .faq summary, .faq-list summary { font-size: 17px; padding: 17px 20px; }
  .faq details + details::before, .faq-list details + details::before { left: 20px; }
  .faq details p, .faq-list details p { padding: 0 20px 20px; }

  /* the waitlist card: wider on phones so the email field gets the room it has in the hero */
  .final { padding: 16px 0 72px; }
  .final .wrap { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .final-card { padding: 60px 12px calc(100% * var(--ar) * var(--fb)); border-radius: 30px; }
  .final-card .finale { top: 60px; padding: 0 16px; }
  .final h2, .final-lead { padding-inline: 8px; }
  .final-icon { width: 76px; height: 76px; }
  .final h2 { margin: 22px 0 12px; }
  .final-lead { margin-bottom: 26px; font-size: 17px; }

  /* footer */
  .footer-inner { flex-direction: column; gap: 12px; text-align: center; }
  .footer-links { order: 1; margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
  .footer-meta { order: 2; }
  .footer-aside { order: 3; }
}

/* small phones: a touch smaller so "you@example.com" still fits next to the button */
@media (max-width: 374px) {
  .wl-field input { font-size: 16px; }
  .wl-field button { padding: 0 14px; font-size: 14px; }
}

/* the narrowest phones: the email field and its button stack */
@media (max-width: 359px) {
  .wl-field, .wl-field:focus-within, .waitlist[data-state="error"] .wl-field,
  [data-theme="dark"] .wl-field, [data-theme="dark"] .wl-field:focus-within {
    flex-direction: column;
    border-radius: 28px;
  }
  .wl-field input { flex: none; width: 100%; padding: 0 16px; }
  .wl-field button { width: 100%; }
}

/* ---------- Article pages: guides, the creatine tracker page, privacy, 404 ---------- */
.article { max-width: 780px; padding-top: calc(var(--nav-top) + var(--nav-h) + 56px); padding-bottom: 88px; }
.crumbs { margin-bottom: 22px; font-size: 14px; color: var(--label-2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--label-3); }
.crumbs a { text-underline-offset: 3px; }
.crumbs a:hover { color: var(--label); }
.article h1 { max-width: 14em; font-size: clamp(2.5rem, 6.2vw, 4.4rem); }
.article-lead { max-width: 38rem; margin-top: 22px; font-size: 21px; line-height: 1.5; letter-spacing: -0.018em; color: var(--label); }
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 22px; font-size: 15px; color: var(--label-2); }
.article-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.15s;
}
.btn:hover { background: var(--ink-hover); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-ghost { background: var(--card); color: var(--label); box-shadow: inset 0 0 0 1px var(--sep); }
.btn-ghost:hover { background: var(--card-2); }
.text-link { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }

/* the short version: a note pinned with a stroke of paint */
.tldr { position: relative; margin-top: 38px; padding: 24px 26px 26px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); }
.tldr::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 22px;
  width: 92px;
  height: 22px;
  background: var(--accent);
  opacity: 0.8;
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
  rotate: -3deg;
}
.tldr-title { margin-bottom: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--accent-ink); }
.tldr ul { padding-left: 1.2em; list-style: disc; font-size: 17px; line-height: 1.55; }
.tldr li + li { margin-top: 8px; }
.tldr li::marker { color: var(--accent); }
.toc { margin-top: 18px; padding: 20px 24px 22px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--sep); }
.toc-title { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--label-2); }
.toc ol { padding-left: 1.3em; list-style: decimal; columns: 2; column-gap: 32px; font-size: 16px; line-height: 1.4; }
.toc li { break-inside: avoid; padding: 3px 0; }
.toc li::marker { color: var(--label-3); }
.toc a { text-underline-offset: 3px; }
.toc a:hover { color: var(--accent-ink); }

.prose { margin-top: 12px; font-size: 18px; line-height: 1.68; color: color-mix(in srgb, var(--label) 82%, var(--paper)); }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 60px; font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.032em; word-spacing: 0; color: var(--label); }
.prose h2 + * { margin-top: 14px; }
.prose h3 { margin-top: 34px; font-size: 21px; color: var(--label); }
.prose h3 + * { margin-top: 10px; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--label-3); }
.prose a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 600; color: var(--label); }
.prose sup { font-size: 0.72em; line-height: 0; white-space: nowrap; }
.prose sup a { text-decoration: none; padding: 0 1px; font-weight: 600; }
.note { padding: 18px 22px; border-radius: 18px; background: var(--card-2); font-size: 16px; line-height: 1.6; color: var(--label-2); }
.note strong { color: var(--label); }

.table-wrap { overflow-x: auto; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sep); }
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.table-wrap table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.table-wrap th, .table-wrap td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sep); }
.table-wrap thead th { background: var(--card-2); font-size: 14px; font-weight: 700; color: var(--label); }
.table-wrap tbody th { font-weight: 600; color: var(--label); }
.table-wrap tr:last-child th, .table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap .is-mond th, .table-wrap .is-mond td { background: var(--lime-soft); }

.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.card { position: relative; padding: 24px 24px 26px; border-radius: 22px; background: var(--card); box-shadow: var(--card-shadow); }
.card h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.2; color: var(--label); }
.card p { font-size: 16px; line-height: 1.55; color: var(--label-2); }
.prose .card h3, .prose .card p { margin-top: 0; }

.sources { padding-left: 1.5em; list-style: decimal; font-size: 15px; line-height: 1.55; color: var(--label-2); }
.sources li + li { margin-top: 10px; }
.sources li { overflow-wrap: anywhere; }
.related { display: grid; gap: 12px; margin-top: 20px; }
.related a {
  display: block;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--label);
  transition: transform 0.2s, box-shadow 0.2s;
}
.related a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 24px 44px -28px rgba(var(--shade), 0.45); }
.related a span { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--label-2); }

.pagehero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 72px; align-items: center; padding-top: calc(var(--nav-top) + var(--nav-h) + 56px); padding-bottom: 64px; }
.pagehero h1 { max-width: 9em; font-size: clamp(2.8rem, 5.6vw, 4.8rem); }
.pagehero-figure { min-width: 0; }
.pagehero-figure .how-panel { padding: 48px 24px; }
.article-body { padding-top: 24px; }
.article-body .prose { margin-top: 0; }

/* 404: a star to wish on */
.wish {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-height: 320px;
  margin-top: 36px;
  padding: 28px 24px 30px;
  border-radius: 28px;
  background: var(--paint-bg);
  box-shadow: var(--card-shadow);
  color: #fff;
  text-align: center;
}
.wish .paint img { object-position: 50% 40%; }
.wish p { min-height: 1.4em; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; letter-spacing: 0; text-shadow: 0 1px 14px rgba(var(--shade), 0.8); }
.wish-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #1c1b23;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 16px 30px -16px rgba(var(--shade), 0.8);
  transition: transform 0.15s, background-color 0.2s;
}
.wish-btn:hover { background: #fff; }
.wish-btn:active { transform: scale(0.96); }
.wish-btn:focus-visible { outline-color: #fff; }
.wish + .related { margin-top: 28px; }

@media (max-width: 1080px) {
  .pagehero { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .pagehero-figure { max-width: 560px; }
}

@media (max-width: 720px) {
  .article { padding-top: calc(var(--nav-top) + var(--nav-h) + 32px); padding-bottom: 64px; }
  .pagehero { padding-top: calc(var(--nav-top) + var(--nav-h) + 32px); gap: 32px; }
  .pagehero-figure .how-panel { padding: 36px 16px; border-radius: 28px; }
  .article-body { padding-top: 8px; }
  .article-lead { font-size: 19px; }
  .prose { font-size: 17px; }
  .prose h2 { margin-top: 48px; }
  .toc ol { columns: 1; }
  .card-grid { grid-template-columns: 1fr; }
  .tldr { padding: 20px 20px 22px; }
  .btn { height: 50px; }
  .wish { min-height: 280px; }
}