/* ohiyo.gg. One stylesheet for every page, no build step.
   Direction: a day in a valley. The first screen is a sunlit meadow with the Ohiyo mark in
   stone and Kikka beside it; then pale green bands, a starry night behind the privacy
   section, sunrise behind the mission, morning at the end. Soft
   shapes and soft shadows. The paintings are in assets/scenery; the markup around them is
   written by scripts/site-scenery.py. */

@font-face { font-family: "Sora"; src: url("assets/fonts/sora-latin-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --paper: #fbf8f0;
  --paper-deep: #e3f0da;
  --sand: #fbe9cd;
  --ink: #16241d;
  --muted: #4a5a51;
  --blue: #62b0dc;
  --blue-edge: #23678f;
  --leaf: #2f7a4d;
  --leaf-soft: #d6ebd0;
  --sky-soft: #d9ecf6;
  --sun: #f5b651;
  --sun-soft: #fbe3b8;
  --green: #76a783;
  --coral: #e8704f;
  --hair: rgb(22 36 29 / 10%);
  --line: rgb(22 36 29 / 16%);
  --card: #fffdf8;
  --night: #0e1b29;
  --night-raised: rgb(255 255 255 / 7%);
  --night-line: rgb(255 255 255 / 15%);
  --night-muted: #b7c3cc;
  --app: #171716;
  --app-raised: #232220;
  --app-line: rgb(255 255 255 / 10%);
  --app-muted: #a9a59c;
  --shadow-s: 0 1px 2px rgb(22 36 29 / 6%), 0 8px 18px -10px rgb(22 36 29 / 20%);
  --shadow: 0 1px 2px rgb(22 36 29 / 6%), 0 20px 44px -20px rgb(22 36 29 / 26%);
  --shadow-l: 0 2px 4px rgb(22 36 29 / 6%), 0 44px 80px -32px rgb(22 36 29 / 42%);

  --font-display: "Sora", ui-rounded, system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-small: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --text-h3: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --text-h2: clamp(2rem, 1.25rem + 3.2vw, 3.75rem);
  --text-hero: clamp(2.75rem, 1.4rem + 5.6vw, 5.5rem);

  --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --wrap: 74rem;
  --radius: 20px;
  --radius-l: 28px;
  --edge: 0px;
  --wave: clamp(28px, 5vw, 76px);

  --fast: 150ms;
  --normal: 360ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* A stronger ease-out for things arriving on screen: quick off the mark, long settle. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--text-base)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-hero); letter-spacing: -0.045em; line-height: 0.98; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-color: var(--blue); text-decoration-thickness: 0.14em; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--blue-edge); outline-offset: 3px; border-radius: 6px; }
.band--night :focus-visible, .footer :focus-visible { outline-color: var(--blue); }
::selection { background: var(--blue); color: var(--ink); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7rem 1rem; background: var(--ink); color: var(--paper); border-radius: 12px; font-weight: 600; }
.skip-link:focus { top: 1rem; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--muted); max-width: 34rem; }
.eyebrow { font: 700 0.8125rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* The Kikka mark, tinted by `color`. */
.mark { display: inline-block; width: 1.75rem; aspect-ratio: 746 / 700; background: currentColor; -webkit-mask: url("kikka.svg") center / contain no-repeat; mask: url("kikka.svg") center / contain no-repeat; }

/* A word on a sticker. */
.hl { position: relative; z-index: 0; display: inline-block; }
.hl::after { content: ""; position: absolute; z-index: -1; left: -3%; right: -3%; bottom: 0.03em; height: 0.36em; background: var(--hl, var(--sun)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M5 15C40 6 80 4 114 7s56 7 81 3' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M5 15C40 6 80 4 114 7s56 7 81 3' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.9em 1.5em; border: 1px solid var(--hair); border-radius: 999px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow-s);
  font: 700 1rem/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: scale(0.98); box-shadow: var(--shadow-s); }
.btn--go { background: var(--leaf); border-color: transparent; color: #fdfbf4; }
.btn--go:hover { background: #286b43; }
.btn--lg { font-size: 1.125rem; padding: 1.05em 1.8em; }
.btn--sm { font-size: 0.9375rem; padding: 0.72em 1.2em; }
.band--night .btn { background: rgb(255 255 255 / 8%); border-color: var(--night-line); color: #f3f6ee; box-shadow: none; }
.band--night .btn:hover { background: rgb(255 255 255 / 15%); box-shadow: none; }
.band--night .btn:active { box-shadow: none; }
.band--night .btn--go { background: var(--blue); border-color: transparent; color: var(--night); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; transition: background-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease); }
.nav.is-stuck { background: rgb(251 248 240 / 94%); box-shadow: 0 1px 0 var(--hair), 0 12px 30px -20px rgb(22 36 29 / 35%); }
.nav__in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font: 800 1.375rem/1 var(--font-display); letter-spacing: -0.04em; }
.brand .mark { width: 2rem; }
.brand b { color: var(--blue-edge); font-weight: 800; }
.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2rem); margin-left: auto; font-weight: 700; font-size: 1rem; }
.nav__links a { text-decoration: none; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.nav__links a:hover { border-bottom-color: var(--blue); }
@media (max-width: 860px) { .nav__links { display: none; } .nav__in > .btn { margin-left: auto; } }

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* The first screen is one painting, edge to edge: the meadow, the stone mark, Kikka beside it.
   The words sit on the bright sky at the left. The backdrop is the painting's own sky, so
   nothing flashes while it loads. The screen is as tall as the painting is at this width. */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; margin-top: -4.5rem; min-height: calc(100vw * 905 / 1738); padding-block: clamp(5.25rem, 2rem + 4.2vw, 6.5rem) calc(var(--wave) + clamp(1.75rem, -6rem + 10vw, 8rem)); background: linear-gradient(90deg, #f4ecd6 0%, #cfdcea 22%, #9ec9ef 48%, #86bff3 100%); }
/* Two patches of light so the menu and the words read clearly whatever part of the painting is
   behind them: a veil across the top, and a soft haze behind the copy. Both come after the
   painting in the page, so they are drawn over it and under the text. */
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 8.5rem; background: linear-gradient(180deg, rgb(255 251 240 / 78%), rgb(255 251 240 / 46%) 48%, rgb(255 251 240 / 0%)); pointer-events: none; }
.hero__in { position: relative; width: min(100% - 2 * var(--gutter), var(--wrap)); }
.hero__in::before { content: ""; position: absolute; z-index: -1; left: -14%; top: -22%; width: 66%; height: 144%; background: radial-gradient(closest-side, rgb(255 251 240 / 62%), rgb(255 251 240 / 34%) 55%, rgb(255 251 240 / 0%)); pointer-events: none; }
/* The words stop short of the stone mark, which begins 47% of the way across the painting. */
.hero__copy { display: grid; gap: clamp(1.1rem, 0.8rem + 1vw, 1.75rem); justify-items: start; max-width: calc(45.5vw - max(var(--gutter), (100vw - var(--wrap)) / 2)); }
/* Three lines, as painted: each of the first two is one line whatever the width. */
.hero h1 { font-size: clamp(2.75rem, 0.3rem + 4.1vw, 4.75rem); text-wrap: wrap; }
.hero__line { display: block; white-space: nowrap; }
/* A stroke of sun-yellow paint under the last word. */
.hero .hl::after { left: -7%; right: -9%; bottom: -0.1em; height: 0.3em; rotate: -1.6deg; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 30' preserveAspectRatio='none'%3E%3Cpath d='M3 21C38 12 86 7 132 8c30 1 58 4 84 2-18 6-46 7-70 9-48 4-98 6-143 7z'/%3E%3Cpath d='M9 17C60 8 120 4 214 9' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 30' preserveAspectRatio='none'%3E%3Cpath d='M3 21C38 12 86 7 132 8c30 1 58 4 84 2-18 6-46 7-70 9-48 4-98 6-143 7z'/%3E%3Cpath d='M9 17C60 8 120 4 214 9' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hero .lead { max-width: 30rem; color: #1d2c25; font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem); line-height: 1.35; }
/* The small print lands on the tree line at some widths, so it carries its own light backing. */
.hero__facts { margin-left: -0.75em; padding: 0.3em 0.75em; border-radius: 999px; background: rgb(255 252 242 / 90%); font-size: 0.9375rem; color: #1d2c25; font-weight: 600; }

/* On tablets and phones the words would run into the stone mark, so they go first, on open
   sky, with the stone mark and Kikka below them. */
@media (max-width: 999px) {
  .hero { --meadow-w: max(100vw, min(190vw, 68rem)); align-items: start; min-height: 0; padding-block: 6.25rem calc(var(--meadow-w) * 0.485 + var(--wave)); background: linear-gradient(180deg, #d3e6f8 0%, #b3d5f4 48%, #8fc3f2 100%); }
  .hero::after, .hero__in::before { display: none; }
  .hero__copy { max-width: 40rem; }
  .hero h1 { font-size: clamp(2.75rem, 1.6rem + 5vw, 4.5rem); text-wrap: balance; }
  .hero__facts { margin-left: 0; padding: 0; background: none; }
  .hero__line { display: inline; white-space: normal; }
}

/* ── The app, right under the first screen ───────────────────────────────── */
/* Tucked up towards the meadow's edge, so the app is the next thing you see. */
/* The window sits straight (a tilt blurs its text) and the phone stands at its bottom
   right corner, over the empty side of the chat instead of over the channel list. */
.peek { position: relative; isolation: isolate; width: min(100%, 66rem); margin: calc(var(--space-section) * -0.4) auto clamp(3rem, 7vw, 6rem); padding: 0 6.5% 7% 0; }
/* A soft pool of shade under the two devices, so they rest on the page. */
.peek::before { content: ""; position: absolute; inset: 14% 3% -3% 3%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(31 92 58 / 26%), transparent); filter: blur(26px); }
.peek .window { border-radius: 18px; border-color: rgb(22 36 29 / 18%); box-shadow: 0 2px 4px rgb(22 36 29 / 8%), 0 42px 80px -32px rgb(22 36 29 / 50%); }
.peek .window__bar { position: relative; padding: 11px 14px; background: linear-gradient(#f8f4eb, #efeadf); }
.peek .window__bar span { position: absolute; left: 50%; min-width: 36%; margin: 0; padding: 5px 14px; border-radius: 999px; background: rgb(22 36 29 / 7%); text-align: center; transform: translateX(-50%); }
.cta { display: flex; flex-wrap: wrap; gap: 0.9rem 0.9rem; padding-bottom: var(--edge); }
.window { margin: 0; border: 1px solid rgb(22 36 29 / 14%); border-radius: 16px; background: var(--app); box-shadow: var(--shadow-l); overflow: hidden; }
.window__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #f3efe6; border-bottom: 1px solid var(--hair); }
.window__bar i { width: 10px; height: 10px; border-radius: 50%; background: #e3a48c; }
.window__bar i:nth-child(2) { background: #ecc57a; }
.window__bar i:nth-child(3) { background: #9cc9a2; }
.window__bar span { margin-left: 0.6rem; font: 600 0.75rem/1 var(--font-body); color: var(--muted); }
.window img { display: block; width: 100%; height: auto; }
.phone { position: absolute; right: 0; bottom: 0; width: 20.5%; margin: 0; border: clamp(5px, 0.62vw, 8px) solid #0d0d0c; border-radius: clamp(20px, 2.9vw, 38px); background: #0d0d0c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 2px 4px rgb(22 36 29 / 10%), 0 34px 60px -22px rgb(22 36 29 / 64%); overflow: hidden; }
/* The strip a phone keeps for itself: clock, camera island, battery. */
.phone__bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 7.5% 10% 3.5%; background: #1e1c1d; color: #f3f1ea; font: 700 clamp(7px, 0.8vw, 11px)/1 var(--font-body); }
.phone__bar i { position: absolute; left: 50%; top: 56%; width: 29%; height: 44%; border-radius: 999px; background: #000; transform: translate(-50%, -50%); }
.phone__bar b { width: 20%; height: 0.7em; border-radius: 3px; background: linear-gradient(90deg, #f3f1ea 64%, rgb(243 241 234 / 32%) 64%); }
.phone img { display: block; width: 100%; height: auto; }
/* On a phone, show the phone. The desktop window is unreadable at that size. */
@media (max-width: 560px) {
  .peek { padding: 0; }
  .peek::before { inset: 8% -4% -3%; }
  .peek .window { display: none; }
  .phone { position: relative; right: auto; bottom: auto; width: min(74%, 17.5rem); margin-inline: auto; border-width: 7px; border-radius: 36px; }
  .phone__bar { font-size: 10px; }
}

.band { position: relative; isolation: isolate; padding-block: var(--space-section); }
.band--paper { background: var(--paper); }
.band--deep { background: linear-gradient(180deg, #e3f0da, #edf5e6); }
.band--sand { background: var(--sand); }
.band--sun { background: #fec383; }
.band--sky { background: #afd9f7; }
.band--night { background: #0e1c2e; color: #f3f6ee; }
.band--night .lead, .band--night .eyebrow { color: var(--night-muted); }
.wave { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: var(--wave); display: block; fill: currentColor; pointer-events: none; }
.band--paper > .wave { color: var(--paper); }
.band--deep > .wave { color: #e3f0da; }
.band--sand > .wave { color: var(--sand); }
.band--sun > .wave { color: #fdc688; }
.band--sky > .wave { color: #c3e1f5; }
.band--night > .wave { color: #0e1c2e; }
.band:has(+ .band), .band:has(+ .footer) { padding-bottom: calc(var(--space-section) + var(--wave)); }
.head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.25rem, 4vw, 3.75rem); max-width: 46rem; }

/* ── How it works ────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); list-style: none; margin: 0; padding: 0; }
.step { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.1rem, 2vw, 1.6rem); background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.step__num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--sky-soft); color: var(--blue-edge); font: 800 1.25rem/1 var(--font-display); }
.step:nth-child(2) .step__num { background: var(--sun-soft); color: #7a4a06; }
.step:nth-child(3) .step__num { background: var(--leaf-soft); color: #1f5a37; }
.step p { color: var(--muted); }
.mock { display: grid; align-content: center; gap: 0.6rem; min-height: 10rem; padding: 1.1rem; border-radius: 16px; background: var(--app); color: #f2f4f5; font-size: var(--text-small); line-height: 1.3; }
.mock__label { font: 700 0.6875rem/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-muted); }
.mock__field { display: flex; align-items: center; min-height: 2.5rem; padding: 0 0.85rem; border-radius: 10px; background: var(--app-raised); border: 1px solid var(--app-line); font-weight: 600; }
.mock__field--dots { letter-spacing: 0.25em; color: var(--app-muted); }
.caret { width: 2px; height: 1.1em; margin-left: 2px; background: var(--blue); animation: blink 1.1s steps(1) infinite; }
.mock__row { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.mock__row--quiet { color: var(--app-muted); }
.mock__tile { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--blue); color: #10100f; font: 800 0.8125rem/1 var(--font-display); }
.mock__glyph { display: grid; place-items: center; width: 1.5rem; color: var(--app-muted); font-weight: 700; }
.mock__glyph svg { width: 1rem; height: 1rem; }
.mock__link { justify-content: space-between; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; overflow: hidden; }
.mock__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__copy { flex: none; padding: 0.35rem 0.6rem; border-radius: 8px; background: var(--blue); color: #10100f; font: 700 0.6875rem/1 var(--font-display); }
.faces { display: flex; align-items: center; }
.faces img { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--app); margin-left: -0.5rem; }
.faces img:first-child { margin-left: 0; }
.faces span { margin-left: 0.6rem; color: var(--app-muted); font-weight: 600; }
@media (max-width: 820px) { .steps { grid-template-columns: minmax(0, 1fr); } .mock { min-height: 0; } }

/* ── What's inside ───────────────────────────────────────────────────────── */
.rows { display: grid; gap: clamp(4rem, 8vw, 7.5rem); }
.row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 5rem); align-items: center; }
.row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.row--flip .row__art { order: 2; }
.row__copy { display: grid; gap: 1rem; justify-items: start; }
.row__copy p { color: var(--muted); max-width: 30rem; }
.row__copy .note { font-size: var(--text-small); padding: 0.55rem 0.8rem; border: 2px dashed var(--line); border-radius: 12px; }
@media (max-width: 820px) { .row, .row--flip { grid-template-columns: minmax(0, 1fr); } .row--flip .row__art { order: 0; } }

.yours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; }
.yours__themes { display: grid; gap: 0.9rem; }
.yours__card { margin: 0; border-radius: var(--radius-l); overflow: hidden; background: var(--app); box-shadow: var(--shadow-l); transform: rotate(-2deg); }
.yours__card img { display: block; width: 100%; height: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--leaf-soft); font: 600 var(--text-small)/1.1 var(--font-body); }
.chips li:nth-child(3n + 1) { background: var(--sun-soft); }
.chips li:nth-child(4n + 2) { background: var(--sky-soft); }

.room { display: grid; gap: 1.25rem; padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: var(--radius-l); background: var(--app); color: #f2f4f5; box-shadow: var(--shadow-l); }
.room__head { display: flex; align-items: center; gap: 0.6rem; font: 700 1rem/1 var(--font-display); }
.room__head svg { width: 1.1rem; height: 1.1rem; color: var(--app-muted); }
.room__head span { margin-left: auto; font: 600 0.8125rem/1 var(--font-body); color: var(--app-muted); }
.room__people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.room__people li { display: grid; justify-items: center; gap: 0.6rem; padding: 1.1rem 0.5rem; border-radius: 16px; background: var(--app-raised); font-weight: 600; font-size: var(--text-small); }
.room__people img { width: clamp(3rem, 7vw, 4.25rem); height: auto; aspect-ratio: 1; border-radius: 50%; }
.room__people .is-talking img { outline: 3px solid var(--green); outline-offset: 3px; animation: talk 1.6s var(--ease) infinite; }
.room__controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.room__controls span { padding: 0.5rem 0.8rem; border-radius: 999px; background: var(--app-raised); border: 1px solid var(--app-line); font: 600 0.8125rem/1 var(--font-body); }
.room__controls .leave { margin-left: auto; background: var(--coral); border-color: var(--coral); color: #10100f; }

.also { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--hair); border-radius: var(--radius-l); background: var(--card); box-shadow: var(--shadow); }

/* ── The lock ────────────────────────────────────────────────────────────── */
.lock__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lock__copy { display: grid; gap: 1.4rem; }
.lock__copy h2 .hl { --hl: rgb(98 176 220 / 75%); }
.plain-list { display: grid; gap: 0.9rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.plain-list li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--night-line); color: #eef2f5; }
.plain-list b { color: var(--paper); font: 700 0.8125rem/1.5 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.lock__links { display: flex; flex-wrap: wrap; gap: 0.9rem; padding-bottom: var(--edge); }
@media (max-width: 900px) { .lock__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .plain-list li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } }

.lockdemo { position: sticky; top: 6.5rem; display: grid; gap: 1.1rem; padding: clamp(1.1rem, 2.5vw, 1.75rem); border: 1px solid var(--night-line); border-radius: var(--radius-l); background: rgb(13 26 42 / 78%); box-shadow: 0 34px 70px -34px rgb(0 0 0 / 70%); }
.lockdemo__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lockdemo__switch { display: flex; align-items: center; gap: 0.9rem; cursor: pointer; font: 700 1.0625rem/1.2 var(--font-display); user-select: none; }
.lockdemo__track { position: relative; flex: none; width: 4.25rem; height: 2.4rem; border: 1px solid rgb(255 255 255 / 30%); border-radius: 999px; background: rgb(255 255 255 / 8%); transition: background-color var(--normal) var(--ease); }
.lockdemo__knob { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: calc(2.4rem - 8px); height: calc(2.4rem - 8px); border-radius: 50%; background: #f3f6ee; color: var(--night); transition: transform var(--normal) var(--ease-pop); }
.lockdemo__knob svg { width: 1rem; height: 1rem; }
.lockdemo__knob .shackle { transform-origin: 16.5px 11px; transform: rotate(-32deg); transition: transform var(--normal) var(--ease-pop); }
.lockdemo__input:checked + .lockdemo__switch .lockdemo__track { background: var(--green); }
.lockdemo__input:checked + .lockdemo__switch .lockdemo__knob { transform: translateX(1.85rem); }
.lockdemo__input:checked + .lockdemo__switch .shackle { transform: rotate(0deg); }
.lockdemo__input:focus-visible + .lockdemo__switch .lockdemo__track { outline: 3px solid var(--blue); outline-offset: 3px; }
.lockdemo .when-on, .lockdemo__input:checked ~ * .when-off, .lockdemo__input:checked + .lockdemo__switch .when-off { display: none; }
.lockdemo__input:checked ~ * .when-on, .lockdemo__input:checked + .lockdemo__switch .when-on { display: revert; }
.panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.pane { display: grid; align-content: start; gap: 0.8rem; margin: 0; padding: 1rem; min-height: 11rem; border-radius: 16px; background: rgb(6 14 23 / 55%); border: 1px solid var(--night-line); }
.pane figcaption { font: 700 0.6875rem/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); }
.pane__msg { justify-self: start; max-width: 100%; padding: 0.6rem 0.85rem; border-radius: 14px 14px 14px 4px; background: var(--blue); color: #0e1b29; font-weight: 600; }
.pane__stored { font: 500 0.8125rem/1.5 var(--font-mono); overflow-wrap: anywhere; color: var(--paper); }
.pane__stored.when-on { color: var(--green); }
.pane__verdict { align-self: end; font-size: var(--text-small); color: var(--night-muted); }
.pane__verdict b { color: var(--paper); }
@media (max-width: 460px) { .panes { grid-template-columns: minmax(0, 1fr); } .pane { min-height: 0; } }

/* ── Mission ─────────────────────────────────────────────────────────────── */
.mission__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.mission h2 { font-size: clamp(2.4rem, 1.2rem + 5vw, 5rem); letter-spacing: -0.045em; line-height: 0.98; }
.mission .eyebrow { color: var(--ink); margin-bottom: 1.25rem; }
.mission__body { display: grid; gap: 1rem; font-size: var(--text-lead); line-height: 1.5; font-weight: 500; }
.mission__sign { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; font: 700 0.9375rem/1 var(--font-display); }
.mission__sign .mark { width: 2.25rem; }
@media (max-width: 820px) { .mission__in { grid-template-columns: minmax(0, 1fr); } }

/* ── Free ────────────────────────────────────────────────────────────────── */
.nos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
.nos li { display: grid; gap: 0.6rem; padding-top: 1.25rem; border-top: 2px solid #9ccaa3; }
.nos p { color: var(--muted); }
@media (max-width: 720px) { .nos { grid-template-columns: minmax(0, 1fr); } }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(3rem, 6vw, 5rem); }
.duo--flush { margin-top: 0; }
.card { display: grid; align-content: start; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid var(--hair); border-radius: var(--radius-l); background: var(--card); box-shadow: var(--shadow); }
.card--sand { background: linear-gradient(160deg, #fdf1da, #fbe5c3); }
.card--night { background: linear-gradient(160deg, #162b3e, #0e1b29); border-color: transparent; color: #f3f6ee; }
.card--night p { color: var(--night-muted); }
.card--night .btn { background: rgb(255 255 255 / 8%); border-color: var(--night-line); color: #f3f6ee; box-shadow: none; }
.card--night .btn:hover { background: rgb(255 255 255 / 15%); box-shadow: none; }
.card--night .btn:active { box-shadow: none; }
.card--night .btn--go { background: var(--blue); border-color: transparent; color: var(--night); }
.card__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: auto; padding-top: 0.4rem; padding-bottom: var(--edge); }
.tmpl { display: grid; gap: 0.8rem; }
.tmpl__link { justify-self: start; padding: 0.7rem 0.95rem; border: 1px solid var(--hair); border-radius: 12px; background: var(--card); font: 500 0.8125rem/1.3 var(--font-mono); }
.tmpl .chips li { background: var(--card); }
.term { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 14px; background: var(--night-raised); border: 1px solid var(--night-line); font: 500 0.8125rem/1.4 var(--font-mono); overflow-x: auto; }
.term code { white-space: nowrap; color: var(--paper); }
.term code::before { content: "$ "; color: var(--green); }
.term button { margin-left: auto; flex: none; padding: 0.45rem 0.75rem; border: 0; border-radius: 999px; background: #f3f6ee; color: var(--night); font: 700 0.75rem/1 var(--font-display); cursor: pointer; }
@media (max-width: 820px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* ── Questions ───────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__list { display: grid; gap: 0.8rem; }
.faq details { border: 1px solid var(--hair); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-s); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; cursor: pointer; list-style: none; font: 700 1.0625rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--leaf-soft); color: #1f5a37; font: 800 1.1rem/1 var(--font-display); transition: transform var(--normal) var(--ease-pop); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.25rem 1.2rem; color: var(--muted); max-width: 40rem; }
@media (max-width: 820px) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* ── Last call ───────────────────────────────────────────────────────────── */
.final__in { position: relative; display: grid; gap: 1.5rem; justify-items: start; min-height: clamp(14rem, 24vw, 20rem); align-content: center; }
.final h2 { max-width: 12ch; }
.final p { justify-self: start; padding: 0.4rem 0.85rem; border-radius: 999px; background: rgb(255 253 248 / 82%); color: var(--ink); font-weight: 500; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { position: relative; padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; background: #12211a; color: #f3f6ee; }
.footer > .wave { color: #12211a; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.footer .brand b { color: var(--blue); }
.footer__blurb { margin-top: 1rem; color: var(--night-muted); max-width: 20rem; font-size: var(--text-small); }
.footer h2 { font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-muted); margin-bottom: 1rem; }
.footer ul { display: grid; gap: 0.6rem; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-decoration-color: var(--blue); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--night-line); color: var(--night-muted); font-size: var(--text-small); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__grid > :first-child { grid-column: 1 / -1; } }

/* ── Text pages: privacy, terms, threat model, status ────────────────────── */
.legal { max-width: 48rem; padding-block: clamp(2.5rem, 6vw, 5rem) calc(var(--space-section) + var(--wave)); }
.legal > * + * { margin-top: 1.1rem; }
.legal h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); margin-top: 0.75rem; }
.legal h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.875rem); letter-spacing: -0.025em; margin-top: 2.75rem; }
.legal h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
.legal ul, .legal ol { padding-left: 1.25rem; display: grid; gap: 0.55rem; }
.legal-updated { color: var(--muted); font-weight: 500; }
.legal code, .status-code { font-family: var(--font-mono); font-size: 0.875em; }
.muted { color: var(--muted); font-size: var(--text-small); }
.threat-callout, .status-card { padding: 1.1rem 1.25rem; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-s); }
.threat-callout { background: #fdf1da; }
.threat-grid, .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.threat-grid > div { display: grid; gap: 0.5rem; align-content: start; padding: 1.1rem 1.25rem; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--card); }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pill { flex: none; padding: 0.4rem 0.75rem; border-radius: 999px; font: 700 0.6875rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.pill.ok { background: var(--leaf-soft); color: #1f5a37; }
.pill.bad { background: #f9d5c8; color: #8a2f14; }
.status-code { margin: 0; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--night); color: var(--paper); overflow-x: auto; line-height: 1.5; }
.table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--card); }
.cmp { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: 0.9375rem; }
.cmp th, .cmp td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { font: 700 0.75rem/1.3 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; background: #eef5e8; border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td:first-child { font-weight: 600; }

/* ── Scenery (paintings in assets/scenery, markup from scripts/site-scenery.py) ── */
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Scenes that are off screen hold still (site.js marks the ones in view). */
.js .scene:not(.is-live) *, .js .scene:not(.is-live) *::before { animation-play-state: paused !important; }
/* The stage is the painting's own box, pinned to the bottom right. Everything placed on it uses
   percentages, so the glow stays on the sun and Kikka stays on her hill at any width. */
.scene__stage { position: absolute; right: 0; bottom: 0; width: max(100%, 40rem); aspect-ratio: 1672 / 941; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top, 24%), #000 calc(100% - var(--fade-bottom, 0%)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top, 24%), #000 calc(100% - var(--fade-bottom, 0%)), transparent); }
.scene__paint { display: block; width: 100%; height: 100%; }
/* The meadow covers the whole first screen. Its stage is still the painting's own box, scaled
   up to cover and pinned bottom right, so the stone mark and Kikka stay in view at any shape
   and everything placed on the painting stays where it belongs. */
.scene--meadow { container-type: size; }
.scene--meadow .scene__stage { --fade-top: 0%; aspect-ratio: 1738 / 905; }
@supports (width: 1cqh) { .scene--meadow .scene__stage { width: max(100cqw, calc(100cqh * 1738 / 905)); } }
@media (max-width: 999px) { .scene--meadow .scene__stage { --fade-top: 15%; width: var(--meadow-w); } }
/* Birds far off, high in the painted sky: above the words on a wide screen, below them on a narrow one. */
.scene--meadow .flock--far { top: 8%; }
.scene--night .scene__stage { --fade-top: 10%; }
.scene__glow { position: absolute; width: 24%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgb(255 240 190 / 70%) 0%, rgb(255 224 160 / 30%) 38%, transparent 70%); animation: breathe 9s ease-in-out infinite alternate; }
.scene--meadow .scene__glow { left: 9.3%; top: 39%; width: 30%; }
.scene--sunrise .scene__glow { left: 82%; top: 72%; width: 46%; }
.scene--night .scene__glow { left: 94.6%; top: 11%; width: 16%; background: radial-gradient(circle, rgb(253 243 207 / 34%) 0%, rgb(253 243 207 / 10%) 40%, transparent 70%); animation-duration: 6s; }
.scene__sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Birds: each wing is its own stroke and turns around the body. */
.flock { position: absolute; left: 0; top: 17%; width: 9rem; height: 4.5rem; animation: fly 44s linear infinite; }
.flock--far { top: 31%; width: 6.5rem; height: 2.6rem; opacity: 0.55; animation-duration: 96s; animation-delay: -38s; }
.flock--sun { top: 44%; width: 8rem; animation-duration: 60s; animation-delay: -22s; }
.scene--morning .flock--far { top: 22%; animation-delay: -64s; }
.bird { position: absolute; width: 1.9rem; overflow: visible; fill: none; stroke: #3d586d; stroke-width: 2.3; stroke-linecap: round; animation: bob 2.6s ease-in-out infinite alternate; }
.flock--far .bird { width: 0.95rem; stroke-width: 3; }
.flock--sun .bird { width: 1.5rem; stroke: #9a4a2a; }
.bird--1 { left: 0; top: 42%; }
.bird--2 { left: 36%; top: 0; animation-delay: -0.9s; }
.bird--3 { left: 70%; top: 54%; animation-delay: -1.7s; }
.bird--4 { left: 18%; top: 78%; animation-delay: -0.4s; }
.bird--5 { left: 56%; top: 30%; animation-delay: -1.3s; }
.wing--l { animation: flap-l 0.44s ease-in-out infinite alternate; }
.wing--r { animation: flap-r 0.44s ease-in-out infinite alternate; }
.bird--2 .wing { animation-duration: 0.5s; animation-delay: -0.2s; }
.bird--3 .wing { animation-duration: 0.39s; animation-delay: -0.1s; }
.bird--4 .wing { animation-duration: 0.47s; animation-delay: -0.3s; }
.bird--5 .wing { animation-duration: 0.42s; animation-delay: -0.15s; }

/* Butterflies: the wings close and open, the body wanders. */
.butterfly { position: absolute; width: clamp(0.95rem, 1.5vw, 1.4rem); overflow: visible; animation: flit 15s ease-in-out infinite alternate; }
.bw { fill: #fff3c9; }
.bw--l, .bw--r { animation: flutter 0.2s ease-in-out infinite alternate; }
.butterfly--1 { left: 13%; bottom: 17%; }
.butterfly--2 { left: 47%; bottom: 22%; animation-duration: 19s; animation-delay: -6s; }
.butterfly--2 .bw { fill: #f8bd8e; }
.butterfly--3 { left: 68%; bottom: 15%; animation-duration: 17s; animation-delay: -11s; }
.butterfly--3 .bw { fill: #d9ecfb; }
.butterfly--4 { left: 70%; bottom: 33%; animation-duration: 13s; }
.butterfly--5 { left: 58%; bottom: 18%; animation-duration: 18s; animation-delay: -7s; }
.butterfly--5 .bw { fill: #f8bd8e; }

/* Seeds lifting off the meadow. */
.seed { position: absolute; bottom: 16%; width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / 90%); opacity: 0; animation: lift 13s linear infinite; }
.seed--1 { left: 8%; }
.seed--2 { left: 21%; bottom: 24%; animation-delay: -3s; animation-duration: 16s; }
.seed--3 { left: 33%; animation-delay: -7s; }
.seed--4 { left: 52%; bottom: 20%; animation-delay: -1.5s; animation-duration: 15s; }
.seed--5 { left: 64%; animation-delay: -9s; }
.seed--6 { left: 78%; bottom: 22%; animation-delay: -5s; animation-duration: 17s; }
.seed--7 { left: 91%; animation-delay: -11s; }

/* Leaves on the wind, like the ones painted into the meadow. They cross the right side of the
   picture, away from the words. */
.leaf { position: absolute; top: -4%; width: clamp(0.7rem, 1.15vw, 1.2rem); aspect-ratio: 2.3; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #c3cf62, #86a03d); opacity: 0; animation: leaf-fall 21s linear infinite; }
.leaf--1 { left: 97%; }
.leaf--2 { left: 84%; animation-duration: 26s; animation-delay: -9s; background: linear-gradient(135deg, #d9c75a, #a8a13c); }
.leaf--3 { left: 74%; top: 6%; animation-duration: 18s; animation-delay: -4s; }
.leaf--4 { left: 104%; top: 12%; animation-duration: 24s; animation-delay: -15s; width: clamp(0.9rem, 1.5vw, 1.6rem); filter: blur(1px); }
.leaf--5 { left: 63%; animation-duration: 29s; animation-delay: -20s; background: linear-gradient(135deg, #d9c75a, #a8a13c); }
.leaf--6 { left: 91%; top: 20%; animation-duration: 22s; animation-delay: -12s; width: clamp(0.55rem, 0.9vw, 0.95rem); }


.scene__kikka { position: absolute; right: 7%; bottom: 16%; width: 17%; height: auto; transform-origin: 50% 100%; animation: breathing 4.8s ease-in-out infinite alternate; }

/* Night. */
.stars { fill: #fff3cf; }
.stars--1 { animation: twinkle 4.2s ease-in-out infinite alternate; }
.stars--2 { animation: twinkle 5.8s ease-in-out -2s infinite alternate; }
.stars--3 { animation: twinkle 7.4s ease-in-out -1s infinite alternate; }
.shooting-star { position: absolute; top: 5%; left: 70%; width: clamp(5rem, 9vw, 8rem); height: 2px; border-radius: 2px; background: linear-gradient(to right, transparent, #fff8e0); opacity: 0; rotate: 24deg; animation: shoot 13s ease-in infinite 3s; }
.firefly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffe9a3; box-shadow: 0 0 10px 3px rgb(255 226 140 / 50%); animation: wander 15s ease-in-out infinite alternate, glimmer 3.4s ease-in-out infinite alternate; }
.firefly--1 { left: 7%; bottom: 9%; }
.firefly--2 { left: 29%; bottom: 5%; animation-delay: -5s, -1.2s; }
.firefly--3 { left: 52%; bottom: 8%; animation-delay: -9s, -2.1s; }
.firefly--4 { left: 71%; bottom: 4%; animation-delay: -3s, -0.6s; }
.firefly--5 { left: 90%; bottom: 10%; animation-delay: -11s, -2.8s; }
.firefly--6 { left: 17%; bottom: 13%; animation-delay: -7s, -1.9s; }
.firefly--7 { left: 41%; bottom: 3%; animation-delay: -2s, -0.3s; }
.firefly--8 { left: 62%; bottom: 12%; animation-delay: -13s, -2.4s; }
.firefly--9 { left: 82%; bottom: 6%; animation-delay: -6s, -1.5s; }
/* One column of text has no star-free side, so the twinkling stars step back. */
@media (max-width: 900px) { .scene--night .scene__sky { opacity: 0.35; } }

/* Sunrise: rays turn slowly behind the sun, cut off where the hill starts. */
.scene__rays { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 74%, 80% 79%, 62% 86%, 40% 94%, 24% 100%, 0 100%); }
.rays { position: absolute; left: 82%; top: 71%; width: 96%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(rgb(255 246 208 / 26%) 0deg 5deg, transparent 5deg 18deg); -webkit-mask-image: radial-gradient(circle, transparent 0 15%, #000 19%, transparent 62%); mask-image: radial-gradient(circle, transparent 0 15%, #000 19%, transparent 62%); animation: turn 150s linear infinite; }

@keyframes fly { from { transform: translate(-14vw, 6vh); } to { transform: translate(114vw, -10vh); } }
@keyframes bob { from { translate: 0 -3px; } to { translate: 0 4px; } }
@keyframes flap-l { from { transform: rotate(26deg); } to { transform: rotate(-30deg); } }
@keyframes flap-r { from { transform: rotate(-26deg); } to { transform: rotate(30deg); } }
@keyframes flutter { from { transform: scaleX(1); } to { transform: scaleX(0.18); } }
@keyframes flit { 0% { translate: 0 0; rotate: -8deg; } 22% { translate: 3rem -2.2rem; rotate: 12deg; } 47% { translate: 6.2rem -0.5rem; rotate: -6deg; } 71% { translate: 8.6rem -3.1rem; rotate: 10deg; } 100% { translate: 11.5rem -1.2rem; rotate: -10deg; } }
@keyframes leaf-fall { 0% { translate: 0 0; rotate: 20deg; opacity: 0; } 8% { opacity: 0.9; } 50% { translate: -12rem 14rem; rotate: 250deg; } 88% { opacity: 0.85; } 100% { translate: -26rem 30rem; rotate: 520deg; opacity: 0; } }
@keyframes lift { 0% { translate: 0 0; opacity: 0; } 12% { opacity: 0.9; } 70% { opacity: 0.7; } 100% { translate: 7rem -11rem; opacity: 0; } }
@keyframes breathing { from { transform: scale(1); } to { transform: scale(1.022, 1.03); } }
@keyframes breathe { from { opacity: 0.55; scale: 0.94; } to { opacity: 1; scale: 1.06; } }
@keyframes twinkle { from { opacity: 0.2; } to { opacity: 1; } }
@keyframes shoot { 0% { translate: 0 0; opacity: 0; } 2% { opacity: 1; } 9% { translate: 13rem 5.8rem; opacity: 0; } 100% { translate: 13rem 5.8rem; opacity: 0; } }
@keyframes wander { 0% { transform: translate(0, 0); } 50% { transform: translate(34px, -26px); } 100% { transform: translate(-18px, -50px); } }
@keyframes glimmer { from { opacity: 0.12; } to { opacity: 1; } }
@keyframes turn { to { rotate: 360deg; } }
/* ── Motion ──────────────────────────────────────────────────────────────── */
@keyframes blink { 50% { opacity: 0; } }
@keyframes talk { 0%, 100% { outline-offset: 3px; } 50% { outline-offset: 6px; } }
.step, .card, .also { transition: translate var(--normal) var(--ease), box-shadow var(--normal) var(--ease); }
@media (hover: hover) { .step:hover, .card:hover, .also:hover { translate: 0 -4px; box-shadow: var(--shadow-l); } }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease), translate var(--normal) var(--ease), box-shadow var(--normal) var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* The app preview arrives in two beats instead of as one slab: the window rises first,
   the phone follows a moment later from a little lower. Transform and opacity only,
   and never from nothing: each starts at nearly full size. */
.js .peek.reveal { opacity: 1; transform: none; }
.js .peek .window, .js .peek .phone, .js .peek::before { opacity: 0; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .peek .window { transform: translateY(22px) scale(0.985); }
.js .peek .phone { transform: translateY(40px) scale(0.97); transition-delay: 90ms; }
.js .peek.is-in .window, .js .peek.is-in .phone, .js .peek.is-in::before { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .peek .window, .js .peek .phone, .js .peek::before { opacity: 1; transform: none; transition: none; }
}