/* My Cookbase website. Colors come from FallPalette (LeafArt.swift) and the day/night scene
   palettes (TreeSceneView.swift). Night is the default; light mode switches to the day palette. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-soft-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Scroll progress for the before/after story (--p) and the Decoder drawing (--d). */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --d { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  /* Night scene */
  --sky-1: #0C0B2A;
  --sky-2: #1E1946;
  --sky-3: #3D2C5C;
  --hill-far: #342B5E;
  --hill-mid: #2A2149;
  --ground-1: #241A36;
  --ground-2: #110C1B;
  --gl1: #8A4A22;
  --gl2: #7A2E1A;
  --gl3: #9A7A2E;
  --gl4: #5A2A1A;
  --trunk-edge: #1F140F;
  --trunk-mid: #33231A;
  --bark-line: rgb(90 64 48 / .5);
  --star-opacity: 1;

  /* FallPalette, dark */
  --bg: #17131F;
  --bg-2: #221C30;
  --card: #2E2638;
  --text: #F0DFC4;
  --text-2: #C9B08F;
  --accent: #F59A55;
  --hairline: #4C4057;
  --olive: #A3B54A;
  --leaf-deep: #EB6B2A;
  /* The app's primaryTop (#C8561F) a shade darker, so white button text clears 4.5:1. */
  --btn-top: #BD4F1C;
  --btn-bottom: #A8431A;
  --nav-bg: rgb(23 19 31 / .72);
  --shadow: rgb(0 0 0 / .55);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 24px;
  --nav-h: 52px;
}

@media (prefers-color-scheme: light) {
  :root {
    --sky-1: #F3C58B;
    --sky-2: #FBE2C0;
    --sky-3: #FFF1DC;
    --hill-far: #EDB97C;
    --hill-mid: #D98B45;
    --ground-1: #A0602D;
    --ground-2: #6B3A1A;
    --gl1: #E8853A;
    --gl2: #D9531E;
    --gl3: #F2B84B;
    --gl4: #B5451B;
    --trunk-edge: #4A2C18;
    --trunk-mid: #6B4226;
    --bark-line: rgb(124 80 48 / .5);
    --star-opacity: 0;

    --bg: #FFF6E8;
    --bg-2: #FBE2C0;
    --card: #FFFBF4;
    --text: #5C3A21;
    --text-2: #7C5030;
    --accent: #A8431A;
    --hairline: #E9C9A0;
    --olive: #7A8B2E;
    --nav-bg: rgb(255 246 232 / .78);
    --hero-lede: #5C3A21;
    --shadow: rgb(92 58 33 / .28);
  }
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-optical-sizing: auto;
  font-weight: 450;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: clamp(40px, 5.4vw, 76px); }
h3 { font-size: clamp(32px, 3.8vw, 52px); }

p { margin: 0; }

a { color: var(--accent); }

img { max-width: 100%; height: auto; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  translate: 0 -150%;
}
.skip-link:focus-visible { translate: 0 0; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.lede {
  font-size: clamp(19px, 1.1vw + 13px, 24px);
  line-height: 1.4;
  color: var(--text-2);
  margin-top: 20px;
  max-width: 30em;
  text-wrap: pretty;
}

.note { margin-top: 14px; color: var(--text-2); }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgb(200 86 31 / .7), inset 0 1px 0 rgb(255 255 255 / .18);
  transition: filter .2s ease, translate .2s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { translate: 0 1px; }
.btn-small {
  min-height: 34px;
  padding: 6px 16px;
  font-size: 14px;
  box-shadow: none;
}

.cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 32px;
}
.cta-note {
  font-size: 15px;
  color: var(--text-2);
}

/* Nav */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
}
.nav-inner {
  height: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  font-size: 20px;
  white-space: nowrap;
}
.brand-leaf { width: 26px; height: 26px; flex: none; }
.nav-links {
  display: none;
  margin-left: auto;
  gap: 28px;
}
.nav-links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
}
.nav-links a:hover { color: var(--text); }
.nav .btn-small { margin-left: auto; white-space: nowrap; }
@media (max-width: 359px) {
  .nav-inner { gap: 12px; padding: 0 16px; }
  .brand { font-size: 18px; }
  .btn-small { padding: 6px 12px; }
}

@media (min-width: 820px) {
  .nav-links { display: flex; }
  .nav .btn-small { margin-left: 8px; }
}

/* 1. Hero */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 48%, var(--sky-3) 86%);
}
.scene, .scene > * { position: absolute; }
.scene { inset: 0; z-index: -1; }
.scene-stars {
  inset: 0 0 auto 0;
  width: 100%;
  height: 78%;
  fill: #F6EBD0;
  opacity: var(--star-opacity);
}
.scene-moon {
  top: calc(var(--nav-h) + 14px);
  right: 26%;
  width: clamp(40px, 4.4vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 38%, rgb(143 140 123 / .5) 0 11%, transparent 12%),
    radial-gradient(circle at 62% 55%, rgb(143 140 123 / .5) 0 8%, transparent 9%),
    radial-gradient(circle at 45% 70%, rgb(143 140 123 / .5) 0 6.5%, transparent 7.5%),
    radial-gradient(circle at 68% 32%, rgb(143 140 123 / .5) 0 4.5%, transparent 5.5%),
    linear-gradient(135deg, #D2CEBC, #A9A695);
  opacity: var(--star-opacity);
}
.scene-moon::before {
  content: "";
  position: absolute;
  inset: -230%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(201 198 216 / .2) 12%, rgb(201 198 216 / 0) 70%);
}
.scene-hills {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30%;
}
.hill-far { fill: var(--hill-far); }
.hill-mid { fill: var(--hill-mid); }
.ground-top { stop-color: var(--ground-1); }
.ground-bottom { stop-color: var(--ground-2); }
.scene-trunk {
  top: 0;
  bottom: 0;
  right: -20vw;
  width: 40vw;
  height: 100%;
}
.trunk-edge { stop-color: var(--trunk-edge); }
.trunk-mid { stop-color: var(--trunk-mid); }
.bark-lines { stroke: var(--bark-line); }
.scene-leaves {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  height: clamp(54px, 9%, 104px);
  pointer-events: none;
}
.gl1 { fill: var(--gl1); }
.gl2 { fill: var(--gl2); }
.gl3 { fill: var(--gl3); }
.gl4 { fill: var(--gl4); }

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 9svh) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wordmark {
  font-weight: 600;
  font-size: clamp(42px, 14vw, 128px);
  white-space: nowrap;
  line-height: .95;
  letter-spacing: -0.02em;
}
.hero-tagline {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-size: clamp(21px, 2vw, 30px);
  margin-top: 10px;
  text-wrap: balance;
}
.hero-lede {
  margin-top: 18px;
  padding: 0 4vw;
  color: var(--hero-lede, var(--text-2));
  font-size: clamp(17px, .7vw + 13px, 21px);
  max-width: 22em;
}
.hero .cta-group { align-items: center; margin-top: 28px; }
.hero-device {
  margin: 44px 0 0;
  --w: min(270px, 70vw);
  margin-bottom: calc(var(--w) * -.95);
}

.falling-leaf {
  position: absolute;
  z-index: 4;
  left: 9%;
  bottom: 2.4%;
  width: 46px;
  height: 46px;
  rotate: 74deg;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / .25));
}

@media (prefers-reduced-motion: no-preference) {
  .falling-leaf { animation: leaf-fall 7s .5s both; }
  .hero-copy { animation: rise 1.2s .1s both cubic-bezier(.2, .7, .2, 1); }
  .hero-device { animation: rise 1.4s .35s both cubic-bezier(.2, .7, .2, 1); }
}

@keyframes rise {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

/* A leaf drifting down: it swings side to side, tipping as it goes, then lies down. */
@keyframes leaf-fall {
  0% { translate: 18vw -92svh; rotate: -18deg; opacity: 0; animation-timing-function: ease-in-out; }
  6% { opacity: 1; }
  22% { translate: 2vw -70svh; rotate: 32deg; animation-timing-function: ease-in-out; }
  42% { translate: 15vw -47svh; rotate: -22deg; animation-timing-function: ease-in-out; }
  62% { translate: 1vw -25svh; rotate: 40deg; animation-timing-function: ease-in-out; }
  82% { translate: 8vw -7svh; rotate: 10deg; animation-timing-function: ease-out; }
  100% { translate: 0 0; rotate: 74deg; opacity: 1; }
}

@media (min-width: 960px) {
  .hero-inner {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    text-align: left;
    padding-top: var(--nav-h);
    padding-left: 48px;
    padding-right: 48px;
  }
  .hero .cta-group { align-items: flex-start; }
  .hero-lede { padding: 0; }
  .wordmark { font-size: clamp(72px, 7vw, 116px); }
  .hero-device {
    --w: min(320px, calc((100svh - 150px) * .45));
    margin: 0;
    justify-self: center;
    align-self: end;
    margin-bottom: max(2svh, 18px);
  }
  .scene-trunk {
    right: 2vw;
    width: clamp(220px, 19vw, 330px);
  }
  .scene-moon { right: 27%; top: 15%; }
  .falling-leaf { left: 11%; width: 56px; height: 56px; }
}

/* Phone and iPad frames, drawn in CSS around the screenshots */

.phone {
  --w: 270px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * .03);
  border-radius: calc(var(--w) * .17);
  background: #121014;
  box-shadow:
    0 0 0 calc(var(--w) * .008) #5d5662,
    0 0 0 calc(var(--w) * .014) #2a262d,
    0 calc(var(--w) * .12) calc(var(--w) * .22) calc(var(--w) * -.06) var(--shadow);
}
.phone-screen {
  position: relative;
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--w) * .14);
  overflow: hidden;
  background: #000;
}
.phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-screen::after {
  content: "";
  position: absolute;
  /* Measured from the iPhone 18 Pro screenshots, so it lines up with one drawn into a shot. */
  top: 1.6%;
  left: 50%;
  width: 23.5%;
  height: 4.2%;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}
/* An iPad frame, for when there is an iPad screenshot whose recipe fits on one screen. */
.ipad {
  --w: min(960px, 100%);
  width: var(--w);
  margin: 0 auto;
  padding: clamp(8px, 1.6vw, 18px);
  border-radius: clamp(18px, 3vw, 38px);
  background: #121014;
  box-shadow:
    0 0 0 2px #5d5662,
    0 0 0 4px #2a262d,
    0 40px 80px -30px var(--shadow);
}
.ipad-screen {
  aspect-ratio: 4 / 3;
  border-radius: clamp(10px, 1.8vw, 22px);
  overflow: hidden;
  background: #fff;
}
.ipad-screen img { display: block; width: 100%; height: 100%; }

/* 2. Before and after */

.story {
  position: relative;
  height: 380vh;
  background: var(--bg);
  --app-text: #F0DFC4;
  --app-text-2: #C9B08F;
}
@media (prefers-color-scheme: light) {
  .story { --app-text: #5C3A21; --app-text-2: #7C5030; }
}
.story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 20px;
  --art-h: calc(100svh - var(--nav-h) - 210px);
}
.story-captions {
  display: grid;
  max-width: 34rem;
  min-height: 150px;
}
.story-captions .eyebrow { grid-area: 1 / 1; margin: 0; }
.caption {
  grid-area: 2 / 1;
  align-self: start;
  margin-top: 10px;
}
.caption-title {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.caption-body {
  margin-top: 10px;
  color: var(--text-2);
  font-size: clamp(17px, .8vw + 12px, 22px);
  max-width: 24em;
}
.caption-1 { opacity: calc(1 - clamp(0, (var(--p) - .13) / .07, 1)); }
.caption-2 { opacity: calc(clamp(0, (var(--p) - .21) / .07, 1) * (1 - clamp(0, (var(--p) - .47) / .07, 1))); }
.caption-3 { opacity: clamp(0, (var(--p) - .55) / .07, 1); }
.caption-1 { translate: 0 calc(clamp(0, (var(--p) - .13) / .07, 1) * -12px); }
.caption-2 { translate: 0 calc((1 - clamp(0, (var(--p) - .21) / .07, 1)) * 12px + clamp(0, (var(--p) - .47) / .07, 1) * -12px); }
.caption-3 { translate: 0 calc((1 - clamp(0, (var(--p) - .55) / .07, 1)) * 12px); }

.story-art {
  position: relative;
  min-height: 0;
}

/* The cluttered blog page */
.blog {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100%, 380px);
  height: min(100%, 640px);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  color: #2b2b2b;
  box-shadow: 0 30px 60px -30px var(--shadow), 0 0 0 1px rgb(0 0 0 / .06);
  container-type: inline-size;
  /* Once the clutter is gone the page closes in around the ingredient list, then fades. */
  --bk: clamp(0, (var(--p) - .27) / .1, 1);
  clip-path: inset(calc(var(--lt, 0) * var(--bk) * 1px) 0 calc(var(--lb, 0) * var(--bk) * 1px) 0 round 16px);
  opacity: calc(1 - clamp(0, (var(--p) - .37) / .06, 1));
}
.blog-bar {
  padding: 2.6cqw 4cqw;
  background: #ececef;
  border-bottom: 1px solid #ddd;
}
.blog-url {
  display: block;
  padding: 1.2cqw 3cqw;
  border-radius: 999px;
  background: #fff;
  color: #555;
  font: 3.3cqw/1.3 var(--sans);
  text-align: center;
}
.blog-page {
  padding: 0 5.5cqw;
  font-family: var(--sans);
}
.blog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3cqw 0;
  border-bottom: 1px solid #eee;
}
.blog-logo {
  font: italic 700 4.2cqw/1 Georgia, "Times New Roman", serif;
  color: #c0392b;
}
.blog-menu {
  width: 5cqw;
  height: 3.4cqw;
  background: linear-gradient(#444 0 18%, transparent 18% 41%, #444 41% 59%, transparent 59% 82%, #444 82%);
}
.blog-title {
  margin-top: 3.4cqw;
  font: 700 5.6cqw/1.15 Georgia, "Times New Roman", serif;
  color: #1d1d1d;
}
.blog-meta {
  margin-top: 1.6cqw;
  font-size: 3cqw;
  color: #888;
}
.blog-story {
  margin-top: 2.6cqw;
  font: 3.4cqw/1.45 Georgia, "Times New Roman", serif;
  color: #444;
}
.blog-ad {
  margin-top: 3cqw;
  height: 15cqw;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #f1f1f1 0 8px, #e6e6e6 8px 16px);
  border: 1px solid #ddd;
  font-size: 2.6cqw;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #999;
}
.blog-h {
  margin-top: 3.4cqw;
  font: 700 4cqw/1.2 Georgia, "Times New Roman", serif;
  color: #1d1d1d;
}
.blog-list {
  margin: 1.4cqw 0 0;
  padding: 0;
  list-style: none;
}
.blog-list li {
  font: 3.7cqw/1.62 var(--sans);
  color: #333;
  white-space: nowrap;
}
.blog-wall {
  margin-top: 1.6cqw;
  font: 3.3cqw/1.45 var(--sans);
  color: #444;
}
.blog-popup {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 34%;
  padding: 5cqw;
  border-radius: 12px;
  background: #fff7f0;
  box-shadow: 0 20px 40px rgb(0 0 0 / .25), 0 0 0 1px rgb(0 0 0 / .06);
  text-align: center;
  font-size: 3.6cqw;
  color: #333;
}
.blog-popup p:first-child {
  font: 700 5cqw/1.2 Georgia, "Times New Roman", serif;
  margin-bottom: 1.4cqw;
}
.blog-popup-btn {
  display: inline-block;
  margin-top: 3cqw;
  padding: 1.6cqw 6cqw;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-weight: 700;
}
.blog-cookies {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.2cqw 5cqw;
  background: #2b2b2b;
  color: #eee;
  font-size: 3.2cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blog-cookies span {
  padding: 1.2cqw 3.4cqw;
  border-radius: 6px;
  background: #fff;
  color: #222;
  font-weight: 700;
}

/* Clutter clears one piece at a time. */
.clutter {
  --k: clamp(0, (var(--p) - var(--cs)) / .1, 1);
  opacity: calc(1 - var(--k));
  scale: calc(1 - var(--k) * .05);
}
.c5 { --cs: .1; translate: 0 calc(var(--k) * 30px); }
.c6 { --cs: .12; translate: 0 calc(var(--k) * 100%); }
.c3 { --cs: .16; }
.c2 { --cs: .19; }
.c1 { --cs: .22; }
.c4 { --cs: .25; }

/* The Steps view the recipe lands in */
.story-phone {
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
  container-type: inline-size;
  --w: min(300px, 80vw, calc(var(--art-h) * .45));
  /* The ingredients and steps arrive first; the phone and its cards form around them last. */
  --ph: clamp(0, (var(--p) - .84) / .1, 1);
  background: color-mix(in srgb, #121014 calc(var(--ph) * 100%), transparent);
  box-shadow:
    0 0 0 calc(var(--w) * .008) color-mix(in srgb, #5d5662 calc(var(--ph) * 100%), transparent),
    0 0 0 calc(var(--w) * .014) color-mix(in srgb, #2a262d calc(var(--ph) * 100%), transparent),
    0 calc(var(--w) * .12) calc(var(--w) * .22) calc(var(--w) * -.06) color-mix(in srgb, var(--shadow) calc(var(--ph) * 100%), transparent);
}
.story-phone .phone-screen {
  background: linear-gradient(color-mix(in srgb, var(--app-bg) calc(var(--ph) * 100%), transparent), color-mix(in srgb, var(--app-bg-2) calc(var(--ph) * 100%), transparent));
}
.story-phone .phone-screen::after { opacity: var(--ph); }
.app {
  --app-bg: #221C30;
  --app-card: #2E2638;
  --app-text: #F0DFC4;
  --app-text-2: #C9B08F;
  --app-accent: #F59A55;
  --app-line: #4C4057;
  --app-bg-2: #17131F;
  container-type: inline-size;
  padding: 13.5cqw 4.5cqw 0;
  color: var(--app-text);
  font-family: var(--sans);
}
@media (prefers-color-scheme: light) {
  .app {
    --app-bg: #FFF6E8;
    --app-card: #FFFBF4;
    --app-text: #5C3A21;
    --app-text-2: #7C5030;
    --app-accent: #A8431A;
    --app-line: #E9C9A0;
    --app-bg-2: #FBE2C0;
  }
}
.app-bar {
  display: flex;
  align-items: center;
  gap: 3cqw;
}
.app-round {
  flex: none;
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: var(--app-card);
  border: 1px solid var(--app-line);
  opacity: var(--ph);
}
.app-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font: 5.6cqw/1.2 var(--serif);
  font-variation-settings: "SOFT" 100;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: clamp(0, (var(--p) - .42) / .06, 1);
}
.app-tabs {
  display: flex;
  margin-top: 4cqw;
  padding: 1cqw;
  border-radius: 999px;
  background: var(--app-card);
  font-size: 3.9cqw;
  font-weight: 600;
  opacity: var(--ph);
}
.app-tabs span {
  flex: 1;
  text-align: center;
  padding: 1.6cqw 0;
  border-radius: 999px;
  color: var(--app-text-2);
}
.app-tabs .on {
  background: var(--app-accent);
  color: #241A12;
}
@media (prefers-color-scheme: light) {
  .app-tabs .on { color: #fff; }
}
.app-info {
  display: flex;
  align-items: center;
  gap: 3cqw;
  margin-top: 3cqw;
  font-size: 3.9cqw;
  color: var(--app-text-2);
  opacity: var(--ph);
}
.app-pill {
  padding: 1.2cqw 3cqw;
  border-radius: 999px;
  border: 1px solid var(--app-accent);
  color: var(--app-text);
}
.app-step {
  margin-top: 3cqw;
  padding: 3.2cqw 4cqw 3.6cqw;
  border-radius: 4.5cqw;
  background: color-mix(in srgb, var(--app-card) calc(var(--ph) * 100%), transparent);
  border: 1px solid color-mix(in srgb, var(--app-line) calc(var(--ph) * 100%), transparent);
}
.app-step-title {
  font: 6cqw/1.1 var(--serif);
  font-variation-settings: "SOFT" 100;
  opacity: clamp(0, (var(--p) - var(--hs)) / .06, 1);
}
.s1 { --hs: .44; }
.s2 { --hs: .52; }
.s3 { --hs: .6; }
.app-step ul {
  margin: 2cqw 0 0;
  padding: 0;
  list-style: none;
}
.ing, .app-step li {
  position: relative;
  padding-left: 1.1em;
  font-size: 4.5cqw;
  line-height: 1.5;
  white-space: nowrap;
}
.ing::before, .app-step li::before {
  content: "";
  position: absolute;
  left: .4em;
  top: .72em;
  width: .26em;
  height: .26em;
  border-radius: 50%;
  background: currentColor;
}
.ing b, .app-step li b { font-weight: 700; }
.ing i, .app-step li i {
  font-style: normal;
  color: var(--app-text-2);
  font-size: .86em;
}
.app-step-text {
  margin-top: 1.4cqw;
  font-size: 4.1cqw;
  line-height: 1.35;
  opacity: clamp(0, (var(--p) - var(--ts)) / .08, 1);
}
.s1 .app-step-text { --ts: .66; }
.s2 .app-step-text { --ts: .75; }
.s3 .app-step-text { --ts: .84; }

/* Ingredients in flight. main.js measures where each one starts (the blog list) and lands
   (its step), and sets --fx/--fy/--fw and --tx/--ty/--tw in px. */
.chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.chip {
  --l: clamp(0, (var(--p) - var(--s)) / .18, 1);
  --e: calc(var(--l) * var(--l) * (3 - 2 * var(--l)));
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  width: calc((var(--fw) + (var(--tw) - var(--fw)) * var(--e)) * 1px);
  translate:
    calc((var(--fx) + (var(--tx) - var(--fx)) * var(--e) + sin(var(--e) * 3.1416) * var(--arc)) * 1px)
    calc((var(--fy) + (var(--ty) - var(--fy)) * var(--e)) * 1px);
}
.chip > span {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.chip-from {
  font-size: calc(var(--ffs) * 1px);
  line-height: calc(var(--flh) * 1px);
  /* Dark on the blog page, then cream once the page has fallen away. */
  color: color-mix(in srgb, var(--app-text) calc(clamp(0, (var(--p) - .37) / .06, 1) * 100%), #333);
  opacity: clamp(0, 1 - var(--e) * 1.8, 1);
}
.chip-to {
  font-size: calc(var(--tfs) * 1px);
  line-height: calc(var(--tlh) * 1px);
  color: var(--app-text);
  opacity: clamp(0, (var(--e) - .4) * 1.8, 1);
}
.chip-to i { color: var(--app-text-2); }
.js .chips { display: block; }
.js .story-art [data-slot] { opacity: 0; }

/* Without scroll timelines, main.js steps the story as each of these crosses mid-screen. */
.story-marks { position: absolute; inset: 0; pointer-events: none; }
.story-marks i { position: absolute; left: 0; right: 0; }
.story-marks i:nth-child(1) { top: 0; height: 30%; }
.story-marks i:nth-child(2) { top: 30%; height: 30%; }
.story-marks i:nth-child(3) { top: 60%; height: 40%; }

@media (min-width: 960px) {
  .story { height: 420vh; }
  .story-stage {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    column-gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--nav-h) + 20px) 48px 20px;
    --art-h: calc(100vh - var(--nav-h) - 60px);
  }
  .story-captions { min-height: 260px; align-content: start; }
  .story-art { height: var(--art-h); }
  .blog { width: min(100%, 440px); height: min(100%, 700px); }
  .story-phone { --w: min(320px, calc(var(--art-h) * .45)); }
}

/* 3, 5-7. Chapters: text beats beside a phone that changes with them */

.chapter {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8vh var(--gutter);
}
.beat + .beat, .topic + .topic { margin-top: 0; }
.beat {
  padding: 9vh 0 6vh;
}
.beat-text { max-width: 34rem; }
.beat-text h3 { font-size: clamp(32px, 4vw, 54px); }
.beat-figure {
  position: relative;
  margin: 48px 0 0;
  display: flex;
  justify-content: center;
}
.beat-figure .phone { --w: min(280px, 72vw); }

.lock-screen {
  margin: 32px 0 0;
  max-width: 340px;
}
.lock-screen img {
  display: block;
  width: 100%;
  border-radius: 5% / 26%;
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / .55);
}
.lock-screen figcaption {
  margin-top: 10px;
  font-size: 15px;
  color: var(--text-2);
}

@media (min-width: 960px) {
  .js .chapter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 64px;
    padding: 0 48px;
  }
  .js .chapter .topic,
  .js .chapter .beat { display: contents; }
  .js .beat-text {
    grid-column: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12vh 0;
  }
  .js .beat-figure {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 0;
    height: 100vh;
    margin: 0;
    align-items: center;
    opacity: 0;
    transition: opacity .3s ease .8s;
  }
  .js .chapter-6 .beat-figure { grid-row: 1 / span 6; }
  .js .beat-figure.is-active {
    opacity: 1;
    z-index: 2;
    transition: opacity .8s ease;
  }
  .js .beat-figure.was-active { z-index: 1; }
  .js .beat-figure .phone { --w: min(330px, calc((100vh - 140px) * .45)); }
}

/* 4. Decoder */

.decoder {
  padding: 16vh 0 14vh;
  background:
    radial-gradient(60% 40% at 70% 20%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--bg);
}
.decoder-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: 48px;
}
.legend {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: var(--text-2);
  font-size: 15px;
}
.legend li { display: flex; align-items: center; gap: 8px; }
.swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 2px solid currentColor;
}
.swatch-a { color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.swatch-b { color: var(--olive); background: color-mix(in srgb, var(--olive) 24%, transparent); }
.swatch-m { color: var(--leaf-deep); background: color-mix(in srgb, var(--leaf-deep) 45%, transparent); }

.decoder-figure { margin: 0; }
.decoder-figure figcaption,
.ipad-figure figcaption {
  margin-top: 16px;
  text-align: center;
  color: var(--text-2);
  font-size: 15px;
}
.decoder-diagram {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
  font-family: var(--sans);
}
.decoder-diagram .g0 { --st: 0; }
.decoder-diagram .g1 { --st: .14; }
.decoder-diagram .g2 { --st: .28; }
.decoder-diagram .g3 { --st: .42; }
.decoder-diagram .g4 { --st: .58; }
.decoder-diagram .g5 { --st: .74; }
.decoder-diagram .cell,
.decoder-diagram .dg-bar {
  --k: clamp(0, (var(--d) - var(--st)) / .2, 1);
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--k));
  stroke-linejoin: round;
}
.decoder-diagram .cell {
  fill: transparent;
  stroke: var(--text-2);
  stroke-width: 1.5;
}
.decoder-diagram .cell.a { fill: color-mix(in srgb, var(--accent) calc(var(--k) * 12%), transparent); stroke: color-mix(in srgb, var(--accent) 70%, var(--text-2)); }
.decoder-diagram .cell.b { fill: color-mix(in srgb, var(--olive) calc(var(--k) * 15%), transparent); stroke: color-mix(in srgb, var(--olive) 70%, var(--text-2)); }
.decoder-diagram .cell.m {
  fill: color-mix(in srgb, var(--leaf-deep) calc(var(--k) * 40%), transparent);
  stroke: var(--leaf-deep);
  stroke-width: 3;
}
.decoder-diagram .dg-bar { fill: none; stroke-width: 5; stroke-linecap: round; }
.dg-bar-a { stroke: var(--accent); }
.dg-bar-b { stroke: var(--olive); }
.decoder-diagram text {
  opacity: clamp(0, (var(--d) - var(--st) - .08) / .12, 1);
  fill: var(--text);
}
.decoder-diagram .label { font-size: 19px; dominant-baseline: central; }
.decoder-diagram .step { font-size: 18px; font-weight: 600; dominant-baseline: central; }
.decoder-diagram .step-m { font-weight: 700; }
.dg-branch-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-anchor: middle;
}
.dg-branch-label.dg-a { fill: var(--accent); }
.dg-branch-label.dg-b { fill: var(--olive); }

.ipad-figure {
  max-width: 1200px;
  margin: 12vh auto 0;
  padding: 0 var(--gutter);
}
.real-decoder {
  margin: 12vh auto 0;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.real-decoder .phone { --w: min(300px, 72vw); }
.real-decoder figcaption {
  margin-top: 20px;
  text-align: center;
  color: var(--text-2);
  font-size: 15px;
}

@media (min-width: 960px) {
  .decoder-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    padding: 0 48px;
    gap: 64px;
  }
}

/* 8. Highlights */

.highlights { padding: 14vh 0; }
.highlights h2 { text-align: center; }
.tiles {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.tile {
  padding: 28px;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--hairline);
}
.tile h3 { font-size: 30px; margin-top: 24px; }
.tile p { margin-top: 10px; color: var(--text-2); max-width: 26em; }
.tile-art {
  position: relative;
  height: 170px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 70%, var(--card));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  overflow: hidden;
}
.mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.mini-row .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-2);
  flex: none;
}
.flag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-left: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 13px;
  white-space: nowrap;
  font-weight: 600;
}
.flag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.art-print { align-items: center; }
.sheet {
  width: 120px;
  height: 150px;
  margin-top: 40px;
  padding: 14px 12px;
  border-radius: 4px;
  background: #fffdf8;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / .45);
  rotate: -4deg;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sheet-title { height: 8px; width: 70%; border-radius: 4px; background: #5C3A21; }
.sheet-grid {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  height: 46px;
  border: 1px solid #b89a76;
}
.sheet-grid i { border-left: 1px solid #b89a76; }
.sheet-grid i:first-child { border-left: 0; background: repeating-linear-gradient(#fffdf8 0 7px, #b89a76 7px 8px); }
.sheet-grid i:nth-child(5) { background: rgb(235 107 42 / .35); }
.sheet-lines { display: flex; flex-direction: column; gap: 6px; }
.sheet-lines i { height: 5px; border-radius: 3px; background: #d9c3a5; }
.sheet-lines i:nth-child(2) { width: 80%; }
.sheet-lines i:nth-child(4) { width: 60%; }
.art-feats { align-items: center; flex-direction: row; justify-content: center; gap: 0; }
.feat-leaf { width: 70px; height: 70px; }
.feat-leaf.f1 { rotate: -24deg; filter: hue-rotate(28deg) saturate(1.2); translate: 10px 14px; }
.feat-leaf.f2 { rotate: 6deg; width: 86px; height: 86px; translate: 0 -8px; }
.feat-leaf.f3 { rotate: 34deg; filter: hue-rotate(-16deg) saturate(.8); translate: -10px 16px; }
.toast {
  position: absolute;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.mini-btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 420px) {
  .flag { margin-left: 0; }
}
@media (max-width: 360px) {
  .flag { white-space: normal; }
  .tile { padding: 22px; }
}

@media (min-width: 760px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { padding: 36px; }
}

/* 9. Pricing */

.pricing {
  padding: 14vh 0;
  background:
    radial-gradient(50% 50% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--bg);
}
.pricing-head { text-align: center; }
.pricing-head .lede { margin-left: auto; margin-right: auto; }
.plans {
  list-style: none;
  padding: 0;
  margin: 56px auto 0;
  max-width: 980px;
  display: grid;
  gap: 16px;
}
.plan {
  padding: 28px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--hairline);
}
.plan h3 { font-size: 26px; }
.price {
  margin-top: 14px;
  color: var(--text-2);
}
.price span {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-size: 44px;
  line-height: 1;
  color: var(--text);
}
.plan-what { margin-top: 18px; font-weight: 600; }
.plan-more { margin-top: 4px; color: var(--text-2); }
.plan-best { position: relative; border: 2px solid var(--leaf-deep); }
.plan-badge {
  position: absolute;
  top: -13px;
  left: 24px;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(var(--btn-top), var(--btn-bottom));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.price s {
  margin-left: 6px;
  color: var(--text-2);
}
.promise {
  margin-top: 48px;
  text-align: center;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-size: clamp(24px, 2.4vw, 34px);
  text-wrap: balance;
}
.fineprint {
  margin: 14px auto 0;
  max-width: 40em;
  text-align: center;
  color: var(--text-2);
  font-size: 15px;
}

@media (min-width: 760px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

/* 10. Closing */

.closing {
  padding: 16vh 0 18vh;
  text-align: center;
  background: linear-gradient(var(--bg), var(--bg-2));
}
.closing-leaf { width: 72px; height: 72px; }
.closing h2 { margin-top: 20px; }
.closing .lede { margin-left: auto; margin-right: auto; }
.closing .cta-group { align-items: center; }

.footer {
  padding: 40px 0 48px;
  border-top: 1px solid var(--hairline);
  background: var(--bg-2);
  font-size: 15px;
  color: var(--text-2);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  font-size: 19px;
  color: var(--text);
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.footer-links a { color: var(--text-2); }
.footer-links a:hover { color: var(--text); }
.footer-legal { width: 100%; font-size: 13px; }

/* Scroll-driven motion: CSS scroll timelines where supported, IntersectionObserver otherwise
   (main.js adds .sda when CSS handles it). Reduced motion shows every end state. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story {
      animation: story-progress linear both;
      animation-timeline: view();
      animation-range: contain 0% contain 100%;
    }
    .decoder-figure {
      animation: decoder-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 58%;
    }
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }
  }
}

@keyframes story-progress { from { --p: 0; } to { --p: 1; } }
@keyframes decoder-draw { from { --d: 0; } to { --d: 1; } }
@keyframes reveal {
  from { opacity: 0; translate: 0 32px; }
  to { opacity: 1; translate: 0 0; }
}

/* Fallback: IntersectionObserver sets --p, --d and .in */
.io .story { transition: --p 2.2s cubic-bezier(.45, 0, .25, 1); }
.io .decoder-figure { transition: --d 3s cubic-bezier(.45, 0, .3, 1); }
.io .decoder-figure.in { --d: 1; }
.io .reveal { opacity: 0; translate: 0 32px; transition: opacity .9s ease, translate .9s cubic-bezier(.2, .7, .2, 1); }
.io .reveal.in { opacity: 1; translate: 0 0; }

/* No JavaScript: no scroll story, just its end state. */
html:not(.js) .story { height: auto; --p: 1; animation: none; }
html:not(.js) .story-stage { position: relative; height: auto; min-height: 100vh; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story { height: auto; --p: 1; }
  .story-stage { position: relative; height: auto; min-height: 100vh; }
  .story-art { min-height: calc(var(--art-h) + 20px); }
  .js .chips { display: none; }
  .js .story-art [data-slot] { opacity: 1; }
  .decoder-figure { --d: 1; }
  .js .beat-figure { transition: none !important; }
  .btn { transition: none; }
}

/* 404 page */
.not-found { min-height: 100vh; display: grid; place-items: center; }
.not-found h1 { margin-top: 20px; font-size: clamp(36px, 5vw, 64px); }