@font-face {
  font-family: "Fraunces";
  src: url("assets/Fraunces.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --coal: #180c09;
  --coal-soft: #291511;
  --paper: #f7efe3;
  --paper-bright: #fffaf2;
  --ink: #23130e;
  --ink-soft: #68564c;
  --ember: #f15b2a;
  --ember-deep: #bd3917;
  --saffron: #ffc25b;
  --sage: #263c31;
  --sage-bright: #c9d7bc;
  --line: rgba(49, 26, 18, 0.15);
  --light-line: rgba(255, 250, 242, 0.16);
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; background: var(--coal); }
body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { color: inherit; font: inherit; }
::selection { color: var(--paper-bright); background: var(--ember-deep); }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  padding: 0.8rem 1.05rem;
  border-radius: 999px;
  background: var(--paper-bright);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform 0.2s;
}
.skip-link:focus { transform: none; }
.page-progress { position: fixed; z-index: 600; inset: 0 0 auto; height: 3px; pointer-events: none; }
.page-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--ember), var(--saffron)); }

.site-header {
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 82px;
  padding: 0.9rem clamp(1.1rem, 3.4vw, 3.2rem);
  color: var(--paper-bright);
  border-bottom: 1px solid transparent;
  transition: min-height 0.3s var(--ease), background 0.3s, border-color 0.3s;
}
.site-header[data-scrolled] {
  min-height: 68px;
  background: color-mix(in srgb, var(--coal) 88%, transparent);
  border-color: var(--light-line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; gap: 0.68rem; justify-self: start; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.brand span { font: 620 1.55rem/1 var(--display); letter-spacing: -0.02em; }
.chapter-nav { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.8rem); }
.chapter-nav a {
  position: relative;
  color: color-mix(in srgb, var(--paper-bright) 64%, transparent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.chapter-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.55rem;
  height: 2px;
  background: var(--ember);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease);
}
.chapter-nav a:hover, .chapter-nav a[aria-current="location"] { color: var(--paper-bright); }
.chapter-nav a[aria-current="location"]::after { transform: scaleX(1); }
.nav-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.68rem 1rem 0.68rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.nav-cta:hover { color: var(--ink); background: var(--paper-bright); transform: translateY(-1px); }
.nav-cta span { color: var(--saffron); }

.eyebrow {
  color: var(--ember-deep);
  font: 720 0.69rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.display {
  font-family: var(--display);
  font-size: clamp(3.4rem, 7.2vw, 7.6rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.display--plain { font-size: clamp(3rem, 5.2vw, 5.5rem); line-height: 1.02; letter-spacing: -0.015em; }
.display em { color: var(--ember-deep); font-weight: 330; }
.chapter-lede {
  max-width: 39rem;
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 1.45vw, 1.25rem);
  line-height: 1.62;
}
.section-shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 4.5rem); }
.card-label { font: 720 0.67rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.9rem 1.3rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}
.button:hover { transform: translateY(-2px); }
.button--ember { color: #fff; border-color: var(--ember); background: var(--ember); box-shadow: 0 18px 40px -22px rgba(241, 91, 42, 0.9); }
.button--ember:hover { border-color: var(--ember-deep); background: var(--ember-deep); }
.button--outline { color: var(--ink); border-color: var(--line); }
.button--outline:hover { border-color: var(--ink); }
.button--light { color: var(--ink); border-color: var(--paper-bright); background: var(--paper-bright); }

.hero {
  position: relative;
  min-height: max(780px, 100svh);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(8.5rem, 17vh, 12rem) clamp(1.25rem, 6.4vw, 7rem) clamp(6rem, 10vh, 8rem);
  color: var(--paper-bright);
  background:
    radial-gradient(circle at 75% 48%, rgba(241, 91, 42, 0.18), transparent 26%),
    radial-gradient(circle at 12% 110%, rgba(111, 41, 21, 0.44), transparent 38%),
    var(--coal);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}
.hero-glow {
  position: absolute;
  width: 30rem;
  aspect-ratio: 1;
  right: 16vw;
  top: 30%;
  border-radius: 50%;
  background: rgba(255, 96, 34, 0.2);
  filter: blur(100px);
  animation: breathe 5s ease-in-out infinite alternate;
}
@keyframes breathe { to { transform: scale(1.18); opacity: 0.55; } }
.hero-copy { position: relative; z-index: 3; max-width: 760px; }
.hero-copy .eyebrow { margin-bottom: 2rem; color: var(--saffron); }
.hero .display { font-size: clamp(4.2rem, 9.6vw, 10.4rem); }
.hero .display em { color: var(--saffron); }
.hero-lede { max-width: 39rem; margin-top: 2.1rem; color: rgba(255, 250, 242, 0.68); font-size: clamp(1.05rem, 1.5vw, 1.28rem); }
.hero-lede strong { color: var(--paper-bright); font-weight: 650; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.text-link { color: rgba(255, 250, 242, 0.78); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.text-link span { display: inline-block; margin-left: 0.45rem; color: var(--saffron); transition: transform 0.2s; }
.text-link:hover span { transform: translateY(3px); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 2rem; padding: 0; list-style: none; }
.hero-proof li { padding: 0.52rem 0.72rem; border: 1px solid var(--light-line); border-radius: 999px; color: rgba(255, 250, 242, 0.62); font: 600 0.65rem/1 var(--mono); letter-spacing: 0.04em; }
.hero-reel { position: relative; z-index: 3; justify-self: center; width: min(100%, 440px); padding-inline: 1.3rem; text-align: center; }
.reel-aura { position: absolute; z-index: -1; inset: 12% -4% 8%; border-radius: 50%; background: rgba(241, 91, 42, 0.22); filter: blur(60px); }
.reel-shell {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  margin-inline: auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2.2rem;
  background: linear-gradient(145deg, #5a433c, #0d0806 22%, #1b100c);
  box-shadow: 0 60px 110px -45px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255,255,255,0.08) inset;
  transform: rotate(2.25deg);
}
.reel-shell::after { content: ""; position: absolute; inset: 8px; z-index: 2; pointer-events: none; border-radius: 1.75rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.reel-shell video { width: 100%; height: 100%; object-fit: cover; border-radius: 1.75rem; }
.reel-chrome { position: absolute; z-index: 3; left: 1.2rem; right: 1.2rem; bottom: 1rem; display: flex; justify-content: space-between; padding: 0.52rem 0.7rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; color: rgba(255,255,255,0.84); background: rgba(13,8,6,0.55); backdrop-filter: blur(12px); font: 650 0.58rem/1 var(--mono); letter-spacing: 0.04em; }
.reel-control { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 1.2rem; padding: 0.65rem 0.9rem; border: 1px solid var(--light-line); border-radius: 999px; color: rgba(255,250,242,0.78); background: transparent; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.reel-control:hover { color: var(--paper-bright); border-color: rgba(255,255,255,0.4); }
.reel-control span:first-child { color: var(--saffron); }
.asset-note { margin-top: 0.72rem; color: rgba(255,250,242,0.38); font: 650 0.6rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.hero-scroll { position: absolute; z-index: 3; left: clamp(1.25rem, 6.4vw, 7rem); bottom: 2rem; display: flex; align-items: center; gap: 0.65rem; color: rgba(255,250,242,0.42); font: 650 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.hero-scroll span { width: 38px; height: 1px; background: var(--ember); }

.signal-strip { overflow: hidden; padding-block: 0.86rem; color: var(--paper-bright); background: var(--ember-deep); }
.signal-track { display: flex; width: max-content; align-items: center; gap: 1.3rem; animation: signal 26s linear infinite; }
.signal-track span { font: 650 0.73rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.signal-track i { color: var(--saffron); font-style: normal; }
@keyframes signal { to { transform: translateX(-50%); } }

.story { display: grid; grid-template-columns: 170px minmax(0, 1fr); width: min(100%, 1560px); margin-inline: auto; padding: 0 clamp(1.25rem, 2vw, 2.5rem); }
.story-rail { align-self: start; position: sticky; top: 130px; padding: 4.5rem 1.2rem 2rem 0; }
.story-rail > p { margin-bottom: 1.3rem; color: var(--ink-soft); font: 700 0.62rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.story-rail ol { display: grid; gap: 0.86rem; padding: 0; list-style: none; }
.story-rail a { display: flex; gap: 0.72rem; color: color-mix(in srgb, var(--ink) 42%, transparent); font-size: 0.72rem; font-weight: 700; text-decoration: none; transition: color 0.2s; }
.story-rail a span { font-family: var(--mono); font-size: 0.62rem; }
.story-rail a:hover, .story-rail a[aria-current="step"] { color: var(--ember-deep); }
.story-content { min-width: 0; border-left: 1px solid var(--line); }
.chapter { position: relative; padding: clamp(5rem, 10vw, 9rem) clamp(1.3rem, 5vw, 6.5rem); }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter-heading { position: relative; z-index: 2; }
.chapter-heading .eyebrow { margin-bottom: 1.8rem; }
.chapter-heading .display { margin-bottom: 2rem; }
.chapter-heading--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.chapter-heading--split .display { margin-bottom: 0; }
.chapter-heading--split .chapter-lede { padding-bottom: 0.4rem; }

.capture-system { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(380px, 1.12fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(3rem, 7vw, 6rem); }
.capture-method .card-label { margin-bottom: 0.9rem; color: var(--ember-deep); }
.capture-ladder { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.capture-ladder li { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.8rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.capture-ladder li:nth-child(3) { color: var(--paper-bright); margin: 0.35rem -1.1rem 0; padding-inline: 1.1rem; border: 0; border-radius: 15px; background: var(--coal); box-shadow: 0 18px 40px -28px rgba(24, 12, 9, 0.8); }
.ladder-number { padding-top: 0.2rem; color: var(--ember-deep); font: 700 0.63rem/1 var(--mono); }
.capture-ladder b { font-size: 1rem; }
.capture-ladder p { max-width: 35rem; margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.8rem; }
.capture-ladder li:nth-child(3) p { color: rgba(255,250,242,0.58); }
.ladder-state { padding: 0.38rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font: 700 0.54rem/1 var(--mono); text-transform: uppercase; }
.capture-ladder li:nth-child(3) .ladder-state { border-color: var(--light-line); color: var(--saffron); }
.capture-visual { position: relative; min-height: 520px; display: grid; align-content: center; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden; border-radius: 30px; color: var(--paper-bright); background: radial-gradient(circle at 40% 25%, #592117, transparent 36%), linear-gradient(145deg, #2a120d, #100806); box-shadow: 0 40px 80px -55px rgba(24,12,9,0.9); }
.capture-visual::before { content: ""; position: absolute; inset: 0; opacity: 0.1; background-image: radial-gradient(circle, #fff 0.7px, transparent 0.8px); background-size: 15px 15px; }
.capture-visual--device { min-height: 0; padding: 0; overflow: visible; border-radius: 0; color: inherit; background: none; box-shadow: none; justify-items: center; }
.capture-visual--device::before { content: none; }
.capture-visual--device .device-phone { width: 100%; max-width: 320px; }
.capture-visual--device .asset-note { margin-top: 1rem; text-align: center; color: var(--ink-soft); }
.recipe-ready-card { position: relative; z-index: 2; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--light-line); border-radius: 22px; background: rgba(255,255,255,0.065); backdrop-filter: blur(12px); }
.recipe-ready-kicker { display: flex; justify-content: space-between; gap: 1rem; color: rgba(255,250,242,0.48); font: 700 0.56rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.recipe-ready-kicker span:last-child { color: var(--sage-bright); }
.recipe-ready-card > p { max-width: 12ch; margin-top: 2rem; font: 420 clamp(2.2rem, 4.8vw, 4.7rem)/0.93 var(--display); letter-spacing: -0.025em; }
.recipe-ready-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; padding: 0; list-style: none; }
.recipe-ready-meta li { padding: 0.48rem 0.64rem; border: 1px solid var(--light-line); border-radius: 999px; color: rgba(255,250,242,0.7); font: 650 0.58rem/1 var(--mono); }
.recipe-fragments { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.recipe-fragments span { padding: 0.48rem 0.62rem; border: 1px solid var(--light-line); border-radius: 999px; color: rgba(255,250,242,0.68); background: rgba(0,0,0,0.15); font: 650 0.58rem/1 var(--mono); }
.capture-result { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.7rem; margin-top: 1.5rem; color: var(--sage-bright); font-size: 0.76rem; }
.capture-result span { width: 0.58rem; aspect-ratio: 1; border-radius: 50%; background: #75c976; box-shadow: 0 0 0 6px rgba(117,201,118,0.12); }
.capture-principle { margin-top: clamp(3rem, 7vw, 6rem); padding-top: 2.2rem; border-top: 1px solid var(--line); }
.capture-principle > div { max-width: 48rem; color: var(--ink-soft); }
.capture-principle b { color: var(--ink); }
.capture-principle > div p { margin-top: 0.5rem; font-size: 0.92rem; }

.recipe { background: var(--paper-bright); }
.recipe-stage { position: relative; display: grid; grid-template-columns: 0.75fr 0.9fr 0.8fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-top: clamp(3rem, 7vw, 6rem); padding: clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; border-radius: 34px; background: linear-gradient(135deg, #e6d4be, #f7ede1 60%, #dac2ac); }
.recipe-stage::before { content: ""; position: absolute; inset: 0; opacity: 0.18; background-image: linear-gradient(105deg, transparent 48%, rgba(103,70,50,0.18) 49%, transparent 50%); background-size: 22px 22px; }
.recipe-backdrop { position: relative; height: 470px; overflow: hidden; border-radius: 24px; opacity: 0.7; transform: rotate(-4deg) translateX(-8%); box-shadow: 0 34px 60px -42px rgba(35,19,14,0.6); }
.recipe-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent, rgba(230,212,190,0.65)); }
.recipe-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.recipe-device { position: relative; z-index: 2; }
.device-phone { position: relative; padding: 8px; border-radius: 36px; background: linear-gradient(145deg, #4f463f, #0f0b09 22%, #211a16); box-shadow: 0 42px 80px -42px rgba(19,10,8,0.9), inset 0 1px rgba(255,255,255,0.3); }
.device-phone::after { content: ""; position: absolute; z-index: 2; top: 2.15%; left: 50%; width: 25%; height: 3%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.device-phone > img { width: 100%; border-radius: 29px; }
.recipe-device .device-phone { max-width: 300px; margin-inline: auto; }
.recipe-device .asset-note { color: var(--ink-soft); }
.recipe-notes { position: relative; z-index: 2; display: grid; gap: 1.3rem; padding: 0; list-style: none; }
.recipe-notes li { display: grid; grid-template-columns: 2.1rem 1fr; column-gap: 0.8rem; }
.recipe-notes span { grid-row: span 2; color: var(--ember-deep); font: 700 0.62rem/1 var(--mono); padding-top: 0.25rem; }
.recipe-notes b { font-size: 0.92rem; }
.recipe-notes p { margin-top: 0.25rem; color: var(--ink-soft); font-size: 0.78rem; }

.sources { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; color: var(--paper-bright); background: var(--sage); }
.sources::before { content: ""; position: absolute; inset: 0; opacity: 0.12; background: radial-gradient(circle at 70% 30%, var(--sage-bright), transparent 35%); pointer-events: none; }
.source-copy, .source-screens { position: relative; z-index: 2; }
.source-copy .display { margin-bottom: 2rem; }
.sources .eyebrow { color: var(--sage-bright); }
.sources .display em { color: var(--sage-bright); }
.sources .chapter-lede { color: rgba(255,250,242,0.62); }
.creator-promise { margin-top: 2rem; padding: 1.2rem 1.25rem; border: 1px solid rgba(201,215,188,0.23); border-radius: 18px; background: rgba(255,255,255,0.045); }
.creator-promise span { color: var(--sage-bright); font: 720 0.67rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.creator-promise p { margin-top: 0.6rem; color: rgba(255,250,242,0.62); font-size: 0.84rem; }
.source-screens { min-height: 680px; display: grid; place-items: center; }
.source-demo { width: min(66%, 300px); margin: 0; }
.source-demo--site { width: 100%; }
.source-demo--phone { width: 100%; max-width: 250px; justify-self: center; }
.source-demo--pad { width: min(100%, 470px); justify-self: center; }
.pad-frame { padding: 10px; border-radius: 30px; background: linear-gradient(145deg, #4f463f, #0f0b09 22%, #211a16); box-shadow: 0 52px 95px -40px rgba(0,0,0,0.95), inset 0 1px rgba(255,255,255,0.3); }
.pad-frame img { width: 100%; border-radius: 21px; }
.browser-frame { overflow: hidden; border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; background: #221510; box-shadow: 0 52px 95px -40px rgba(0,0,0,0.95); }
.browser-bar { display: flex; align-items: center; gap: 0.32rem; padding: 0.55rem 0.8rem; background: rgba(255,255,255,0.07); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,250,242,0.22); }
.browser-bar b { margin-inline: auto; color: rgba(255,250,242,0.6); font: 650 0.6rem/1 var(--mono); letter-spacing: 0.06em; }
.browser-frame img { display: block; width: 100%; height: auto; }
.source-demo .device-phone { box-shadow: 0 52px 95px -40px rgba(0,0,0,0.95); }
.source-demo video { display: block; width: 100%; aspect-ratio: 806 / 1752; border-radius: 29px; background: #0e0b09; object-fit: cover; }
.source-demo figcaption { display: grid; gap: 0.35rem; margin-top: 1rem; text-align: center; }
.source-demo figcaption span { color: var(--sage-bright); font: 720 0.62rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.source-demo figcaption b { color: rgba(255,250,242,0.72); font-size: 0.82rem; }

.cook { overflow: hidden; color: var(--paper-bright); background: var(--coal); }
.cook-glow { position: absolute; width: 38rem; aspect-ratio: 1; top: 14%; left: 36%; border-radius: 50%; background: rgba(241,91,42,0.13); filter: blur(110px); }
.cook .eyebrow { color: var(--saffron); }
.cook .display em { color: var(--saffron); }
.cook .chapter-lede { color: rgba(255,250,242,0.62); }
.cook-stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(3rem, 7vw, 6rem); }
.cook-device { max-width: 360px; margin-inline: auto; }
.cook-device .device-phone { box-shadow: 0 55px 100px -42px #000; }
.cook-caption { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.9rem; color: rgba(255,250,242,0.44); font: 650 0.6rem/1 var(--mono); text-transform: uppercase; white-space: nowrap; }
.cook-caption b { color: var(--sage-bright); }
.cook-copy { display: grid; gap: 1rem; }
.voice-stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(360px, 1.22fr) minmax(280px, 0.78fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(3.5rem, 8vw, 7rem); }
.voice-device { width: 100%; max-width: 360px; margin-inline: auto; }
.voice-copy h3 { margin-top: 1rem; font: 420 clamp(1.9rem, 3.4vw, 3rem)/1.08 var(--display); letter-spacing: -0.02em; }
.voice-copy > p:last-child { max-width: 34rem; margin-top: 1rem; color: rgba(255,250,242,0.62); line-height: 1.62; }
.voice-copy .card-label { color: var(--saffron); }
.intelligence-card, .timer-card { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--light-line); border-radius: 24px; background: rgba(255,255,255,0.045); }
.intelligence-card .card-label { color: var(--saffron); }
.intelligence-card h3, .scale-copy h3, .merge-story h3, .ownership-card h3 { margin-top: 0.9rem; font: 430 clamp(1.8rem, 3.6vw, 3.1rem)/1.02 var(--display); letter-spacing: -0.02em; }
.intelligence-card > p:last-child { max-width: 38rem; margin-top: 1rem; color: rgba(255,250,242,0.55); font-size: 0.9rem; }
.timer-card { display: grid; min-height: 210px; align-content: center; background: radial-gradient(circle at 85% 15%, rgba(201, 215, 188, 0.12), transparent 42%), rgba(255,255,255,0.045); }
.timer-card > div { max-width: 32rem; }
.timer-card .card-label { color: rgba(255,250,242,0.48); }
.timer-digits { margin-top: 0.8rem; color: var(--sage-bright); font: 520 clamp(3.1rem, 6vw, 5.4rem)/0.9 var(--mono); letter-spacing: -0.08em; }
.timer-card span { display: block; margin-top: 1rem; color: rgba(255,250,242,0.42); font: 650 0.6rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.scale-lab { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--light-line); }
.scale-copy .eyebrow { margin-bottom: 1rem; }
.scale-copy > p:not(.eyebrow):not(.scale-readout) { max-width: 34rem; margin-top: 1rem; color: rgba(255,250,242,0.55); }
.scale-controls { display: inline-flex; gap: 0.35rem; margin-top: 1.5rem; padding: 0.35rem; border: 1px solid var(--light-line); border-radius: 999px; background: rgba(255,255,255,0.04); }
.scale-controls button { min-width: 64px; padding: 0.7rem 0.85rem; border: 0; border-radius: 999px; color: rgba(255,250,242,0.64); background: transparent; font: 720 0.82rem/1 var(--mono); cursor: pointer; }
.scale-controls button[aria-pressed="true"] { color: var(--coal); background: var(--saffron); }
.scale-readout { margin-top: 1.4rem; font: 430 clamp(1.4rem, 2.4vw, 2rem)/1.2 var(--display); }
.scale-readout span { color: rgba(255,250,242,0.35); text-decoration: line-through; text-decoration-thickness: 1px; }
.scale-readout i { padding-inline: 0.35rem; color: rgba(255,250,242,0.38); font-style: normal; }
.scale-readout b { color: var(--saffron); font-weight: 480; }
.scale-device { max-width: 290px; justify-self: center; }
.dial-shot { display: none; }
.dial-shot.is-active { display: block; }

.plan { background: var(--paper-bright); }
.plan-grid { display: grid; grid-template-columns: minmax(220px, 0.65fr) minmax(300px, 1fr) minmax(220px, 0.65fr); gap: clamp(1rem, 3vw, 2rem); align-items: center; margin-top: clamp(3rem, 7vw, 6rem); }
.plan-card { margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 28px; background: var(--paper); }
.plan-card .device-phone { max-width: 270px; margin-inline: auto; }
.plan-card figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0.25rem 0.15rem; font-size: 0.76rem; }
.plan-card figcaption span { color: var(--ember-deep); font: 720 0.62rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.merge-story { position: relative; z-index: 2; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 26px; color: var(--paper-bright); background: var(--sage); box-shadow: 0 30px 60px -40px rgba(38,60,49,0.8); }
.merge-story .card-label { color: var(--sage-bright); }
.merge-story h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.merge-story > p:last-child { margin-top: 1.2rem; color: rgba(255,250,242,0.58); font-size: 0.82rem; }
.merge-lines { display: grid; gap: 0.45rem; margin-top: 1.4rem; }
.merge-lines span, .merge-lines strong { padding: 0.68rem 0.8rem; border: 1px solid rgba(201,215,188,0.2); border-radius: 10px; font: 680 0.7rem/1 var(--mono); }
.merge-lines span { color: rgba(255,250,242,0.6); text-decoration: line-through; }
.merge-lines i { justify-self: center; color: var(--sage-bright); font-style: normal; }
.merge-lines strong { color: var(--coal); border-color: var(--sage-bright); background: var(--sage-bright); }
.dinner-reveal { position: relative; min-height: 660px; overflow: hidden; margin-top: clamp(4rem, 8vw, 7rem); border-radius: 34px; color: var(--paper-bright); background: var(--coal); }
.dinner-reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dinner-reveal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,9,6,0.86), rgba(20,9,6,0.08) 72%), linear-gradient(0deg, rgba(20,9,6,0.5), transparent 55%); }
.dinner-reveal figcaption { position: absolute; z-index: 2; left: clamp(1.5rem, 5vw, 4.5rem); bottom: clamp(1.7rem, 5vw, 4rem); max-width: 620px; }
.dinner-reveal figcaption p { font: 380 clamp(2.3rem, 5vw, 5rem)/0.96 var(--display); letter-spacing: -0.025em; }
.dinner-reveal figcaption span { display: block; margin-top: 1rem; color: rgba(255,250,242,0.58); font: 650 0.68rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

.everywhere { background: #eee1d1; }
.device-lineup { display: grid; grid-template-columns: 1.5fr 0.62fr 0.42fr; gap: clamp(0.8rem, 2.5vw, 2rem); align-items: end; margin-top: clamp(3rem, 7vw, 6rem); }
.device-mac { filter: drop-shadow(0 36px 30px rgba(35,19,14,0.2)); }
.device-mac > div { overflow: hidden; border: 9px solid #17120f; border-bottom-width: 15px; border-radius: 14px; background: #17120f; }
.device-mac img { width: 100%; }
.device-ipad { padding: 8px; border-radius: 20px; background: #17120f; box-shadow: 0 30px 50px -32px rgba(35,19,14,0.6); }
.device-ipad img { border-radius: 13px; }
.device-lineup > .device-phone { border-radius: 27px; padding: 6px; }
.device-lineup > .device-phone > img { border-radius: 22px; }
.ownership-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); }
.ownership-card { position: relative; min-height: 330px; padding: 1.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,250,242,0.46); }
.ownership-index { position: absolute; top: 1.3rem; right: 1.3rem; color: var(--ember-deep); font: 700 0.62rem/1 var(--mono); }
.ownership-card .card-label { color: var(--ink-soft); }
.ownership-card h3 { font-size: clamp(1.7rem, 2.7vw, 2.5rem); }
.ownership-card > p:last-child { margin-top: 1rem; color: var(--ink-soft); font-size: 0.86rem; }
.ownership-card code { padding: 0.08rem 0.25rem; border-radius: 4px; background: rgba(35,19,14,0.08); font-family: var(--mono); font-size: 0.8em; }

.founder-note { padding: clamp(4.5rem, 8vw, 7rem) clamp(1.3rem, 7vw, 8rem); border-block: 1px solid var(--line); background: #f1e3d2; }
.founder-note__inner { width: min(100%, 880px); margin-inline: auto; }
.founder-note .eyebrow { margin-bottom: 1.5rem; }
.founder-note h2 { font: 430 clamp(1.75rem, 3vw, 2.7rem)/1.18 var(--display); letter-spacing: -0.012em; }
.founder-note__inner > p:last-child { max-width: 710px; margin-top: 1.35rem; color: var(--ink-soft); font-size: clamp(0.98rem, 1.4vw, 1.12rem); }
.founder-note a { color: var(--ember-deep); font-weight: 720; text-underline-offset: 0.18em; }

.pricing { padding: clamp(5rem, 10vw, 9rem) 0; background: var(--paper); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: clamp(3rem, 6vw, 5rem); }
.plan-card-pricing { position: relative; display: grid; gap: 2rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: 28px; background: var(--paper-bright); }
.plan-card-pricing--plus { color: var(--paper-bright); border-color: var(--coal); background: var(--coal); box-shadow: 0 34px 70px -50px rgba(24,12,9,0.9); }
.plan-ribbon { position: absolute; top: 1.2rem; right: 1.2rem; padding: 0.45rem 0.62rem; border-radius: 999px; color: var(--coal); background: var(--saffron); font: 720 0.58rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.plan-name { color: var(--ember-deep); font: 720 0.7rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.plan-card-pricing--plus .plan-name { color: var(--saffron); }
.plan-price { margin-top: 1.2rem; font: 500 clamp(2.4rem, 4vw, 3.7rem)/0.95 var(--display); letter-spacing: -0.02em; }
.plan-price span { color: var(--ink-soft); font: 500 0.76rem/1.3 var(--ui); letter-spacing: 0; }
.plan-card-pricing--plus .plan-price span { color: rgba(255,250,242,0.48); }
.plan-note { margin-top: 0.8rem; color: var(--ink-soft); font-size: 0.82rem; }
.plan-card-pricing--plus .plan-note { color: rgba(255,250,242,0.5); }
.plan-card-pricing ul { display: grid; gap: 0.75rem; padding: 0; list-style: none; color: var(--ink-soft); font-size: 0.86rem; }
.plan-card-pricing li::before { content: "✓"; margin-right: 0.7rem; color: var(--ember-deep); font-weight: 800; }
.plan-card-pricing--plus ul { color: rgba(255,250,242,0.66); }
.plan-card-pricing--plus li::before { color: var(--sage-bright); }
.plan-card-pricing .button { align-self: end; }
.pricing-foot { margin-top: 1.2rem; color: var(--ink-soft); font-size: 0.78rem; }

.faq { padding: clamp(5rem, 10vw, 9rem) 0; border-top: 1px solid var(--line); background: var(--paper-bright); }
.faq-layout { display: grid; grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.faq .eyebrow { margin-bottom: 1.5rem; }
.faq .display { font-size: clamp(3.5rem, 7vw, 6.5rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { position: relative; padding: 1.35rem 2.2rem 1.35rem 0; cursor: pointer; list-style: none; font-size: 1rem; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; color: var(--ember-deep); font: 400 1.4rem/1 var(--ui); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { max-width: 66ch; padding: 0 2rem 1.35rem 0; color: var(--ink-soft); font-size: 0.91rem; }
.faq-item a { color: var(--ember-deep); }

.final-cta { position: relative; min-height: 820px; overflow: hidden; display: grid; place-items: center; padding: 6rem 1.3rem; color: var(--paper-bright); background: var(--coal); text-align: center; }
.final-dish { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.58; filter: saturate(0.85) contrast(1.08); }
.final-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(24,12,9,0.22), rgba(24,12,9,0.92) 82%), linear-gradient(0deg, rgba(24,12,9,0.76), transparent 50%); }
.final-fire { position: absolute; z-index: 2; width: 38rem; aspect-ratio: 1; border-radius: 50%; background: rgba(241,91,42,0.18); filter: blur(100px); }
.final-content { position: relative; z-index: 3; max-width: 1100px; }
.final-content .eyebrow { color: var(--saffron); }
.final-content .display { margin-top: 2rem; font-size: clamp(3.5rem, 7vw, 7.4rem); line-height: 1; }
.final-content .display em { color: var(--saffron); }
.final-content .button { margin-top: 2.2rem; }
.final-note { margin-top: 0.9rem; color: rgba(255,250,242,0.48); font-size: 0.75rem; }
.share-prompt { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-top: 2.2rem; color: rgba(255,250,242,0.54); font-size: 0.82rem; }
.share-prompt button { padding: 0; border: 0; border-bottom: 1px solid var(--saffron); color: var(--saffron); background: none; cursor: pointer; }

.site-footer { display: grid; grid-template-columns: 1.15fr 0.7fr 0.85fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding: clamp(3rem, 7vw, 5rem) clamp(1.3rem, 5vw, 5.5rem); color: var(--paper-bright); background: var(--coal); border-top: 1px solid var(--light-line); }
.footer-brand .brand { width: max-content; }
.footer-brand > p { margin-top: 1rem; color: rgba(255,250,242,0.45); font: 420 1.2rem/1.2 var(--display); }
.footer-links { display: grid; align-content: start; gap: 0.7rem; }
.footer-links a { width: max-content; color: rgba(255,250,242,0.56); font-size: 0.8rem; text-decoration: none; }
.footer-links a:hover { color: var(--paper-bright); }
.footer-heading { margin-bottom: 0.15rem; color: var(--paper-bright); font: 720 0.64rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.footer-legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid var(--light-line); color: rgba(255,250,242,0.34); font: 600 0.61rem/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.footer-legal a { color: inherit; text-underline-offset: 0.18em; }
.footer-legal a:hover { color: var(--paper-bright); }

.reveal { opacity: 1; transform: none; }
.reveal.reveal-pending { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.reveal-pending.is-visible { opacity: 1; transform: none; }
.reveal.reveal-pending[data-delay="1"] { transition-delay: 0.09s; }
.reveal.reveal-pending[data-delay="2"] { transition-delay: 0.18s; }
.reveal.reveal-pending[data-delay="3"] { transition-delay: 0.27s; }
.reveal.reveal-pending[data-delay="4"] { transition-delay: 0.36s; }

@media (max-width: 1160px) {
  .story { grid-template-columns: 1fr; padding: 0; }
  .story-rail { display: none; }
  .story-content { border-left: 0; }
  .chapter { padding-inline: clamp(1.3rem, 6vw, 5rem); }
  .sources .display { line-height: 0.92; }
  .capture-system { grid-template-columns: minmax(0, 0.9fr) minmax(350px, 1.1fr); }
  .recipe-stage { grid-template-columns: 0.6fr 0.85fr 0.8fr; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .chapter-nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 9rem; }
  .hero-copy { max-width: 790px; }
  .hero .display { font-size: clamp(4rem, 15vw, 7.8rem); }
  .hero-reel { width: min(100%, 400px); margin-top: 2rem; }
  .hero-scroll { display: none; }
  .capture-system, .sources, .cook-stage, .voice-stage, .scale-lab { grid-template-columns: 1fr; }
  .voice-stage .voice-copy { order: 0; }
  .voice-stage .voice-device { order: 1; }
  .capture-visual { min-height: 460px; }
  .recipe-stage { grid-template-columns: 0.65fr 1fr; }
  .recipe-backdrop { height: 410px; }
  .recipe-notes { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); margin-top: 1rem; }
  .recipe-notes li { grid-template-columns: 1.7rem 1fr; }
  .source-screens { min-height: 680px; max-width: 620px; width: 100%; margin-inline: auto; }
  .source-demo { width: min(54%, 300px); }
  .source-demo--pad { width: min(100%, 440px); }
  .cook-device { max-width: 330px; }
  .scale-device { max-width: 280px; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .merge-story { grid-column: 1 / -1; grid-row: 1; }
  .ownership-grid { grid-template-columns: 1fr; }
  .ownership-card { min-height: auto; }
  .plans, .faq-layout { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-header { min-height: 68px; padding-inline: 1rem; }
  .site-header .brand span { font-size: 1.35rem; }
  .nav-cta { padding: 0.65rem 0.82rem; font-size: 0.72rem; }
  .nav-cta span { display: none; }
  .hero { padding-inline: 1.2rem; padding-bottom: 4.5rem; }
  .hero .display { font-size: clamp(3.8rem, 20vw, 6.2rem); }
  .hero-lede { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-proof { gap: 0.4rem; }
  .hero-reel { padding-inline: 2rem; }
  .reel-shell { transform: rotate(1deg); border-radius: 1.9rem; }
  .display { font-size: clamp(3.1rem, 15vw, 5.2rem); }
  .display--plain { font-size: clamp(2.8rem, 12vw, 4.4rem); }
  .chapter { padding-block: 5rem; }
  .chapter-heading--split { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .capture-ladder li { grid-template-columns: 1.7rem 1fr; }
  .ladder-state { grid-column: 2; justify-self: start; }
  .capture-visual { min-height: 430px; margin-inline: -0.3rem; padding: 1.15rem; border-radius: 24px; }
  .recipe-ready-card > p { font-size: clamp(2.4rem, 13vw, 4rem); }
  .recipe-fragments span { font-size: 0.52rem; }
  .capture-principle { grid-template-columns: 1fr; }
  .recipe-stage { grid-template-columns: 1fr; margin-inline: -0.3rem; }
  .recipe-backdrop { position: absolute; inset: 1rem auto 1rem -18%; width: 62%; height: auto; }
  .recipe-device { margin-left: 17%; }
  .recipe-notes { grid-template-columns: 1fr; margin-top: 1.5rem; padding: 1.2rem; border-radius: 18px; background: rgba(255,250,242,0.7); }
  .source-screens { min-height: 0; }
  .source-demo { width: min(76%, 280px); }
  .source-demo--pad { width: min(100%, 400px); }
  .timer-digits { font-size: 3.2rem; }
  .plan-grid { grid-template-columns: 1fr; }
  .merge-story { grid-column: auto; grid-row: auto; }
  .plan-card .device-phone { max-width: 260px; }
  .dinner-reveal { min-height: 600px; margin-inline: -0.3rem; }
  .dinner-reveal::after { background: linear-gradient(0deg, rgba(20,9,6,0.9), transparent 78%); }
  .dinner-reveal figcaption { left: 1.3rem; right: 1.3rem; bottom: 1.5rem; }
  .device-lineup { grid-template-columns: 1fr 0.72fr; }
  .device-mac { grid-column: 1 / -1; }
  .device-lineup > .device-phone { display: none; }
  .final-cta { min-height: 720px; text-align: left; place-items: end start; }
  .final-content .display { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .share-prompt { justify-content: flex-start; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-legal { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .signal-track, .hero-glow { animation: none; }
  .signal-track { transform: translateX(-12%); }
  .button, .nav-cta, .text-link span { transition: none; }
}