:root {
  --ink: #1f2924;
  --muted: #667069;
  --paper: #f4efe5;
  --cream: #fbf8f0;
  --peach: #f2ad8f;
  --mint: #8fc2ad;
  --lilac: #c6b3e8;
  --butter: #f3da7a;
  --line: rgba(31, 41, 36, .16);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #176ea1; outline-offset: 4px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .8rem 1rem; color: white; background: #111; }
.skip-link:focus { top: 1rem; }
.eyebrow { margin: 0 0 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.brand { font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 700; letter-spacing: -.055em; text-decoration: none; }
.brand span { color: #e36f53; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border-radius: 999px; padding: .85rem 1.25rem; font-weight: 700; text-decoration: none; }
.button-dark { color: white; background: var(--ink); }
.button-light { color: var(--ink); background: white; }
.text-link { display: inline-flex; min-height: 48px; align-items: center; gap: .5rem; font-weight: 700; text-underline-offset: .2rem; }

.site-header { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 clamp(1rem, 4vw, 4rem); border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
.site-header[data-scrolled="true"] { border-color: var(--line); background: rgba(244,239,229,.82); backdrop-filter: blur(18px); }
.site-header nav { display: flex; gap: 1.6rem; }
.site-header nav a { font-size: .82rem; text-decoration: none; }
.header-cta { justify-self: end; border-radius: 999px; padding: .55rem .9rem; color: white; background: var(--ink); font-size: .75rem; font-weight: 700; text-decoration: none; }

.hero { position: relative; min-height: 100svh; padding: clamp(8rem, 14vh, 11rem) clamp(1rem, 6vw, 6rem) 3rem; background: radial-gradient(circle at 12% 18%, #f9d7c8 0 12rem, transparent 32rem), radial-gradient(circle at 90% 55%, #d8cff0 0 10rem, transparent 34rem), var(--paper); }
.hero-copy { position: relative; z-index: 2; max-width: 54rem; }
.hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(5rem, 12vw, 11rem); font-weight: 500; line-height: .79; letter-spacing: -.08em; }
.hero-deck { max-width: 41rem; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.45; }
.hero-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; }
.hero-stage { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(20rem, 1.1fr) minmax(24rem, .9fr); align-items: end; max-width: 78rem; min-height: 36rem; margin: 4rem auto 0; }
.open-book { position: relative; z-index: 1; height: 23rem; filter: drop-shadow(0 28px 35px rgba(61,51,38,.18)); transform: perspective(1000px) rotateX(11deg) rotateZ(-2deg); transform-origin: center bottom; }
.book-spread { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.book-page { padding: 2.5rem; border: 1px solid #d1c7b4; background: #faf5e8; }
.book-page-left { border-radius: 1.2rem .2rem .4rem 1.2rem; box-shadow: inset -12px 0 18px rgba(93,78,55,.08); }
.book-page-right { border-radius: .2rem 1.2rem 1.2rem .4rem; box-shadow: inset 12px 0 18px rgba(93,78,55,.07); }
.book-page span { display: block; margin-bottom: 2.5rem; color: #817665; font-family: Georgia, serif; font-size: .8rem; }
.book-page i { display: block; height: 2px; margin: 1.15rem 0; background: #ddd4c4; }
.book-page i:nth-of-type(2), .book-page i:nth-of-type(5) { width: 83%; }
.phone { position: relative; z-index: 2; display: grid; grid-template-columns: .8fr 1.2fr; min-height: 34rem; margin-left: -4rem; overflow: hidden; border: 8px solid #1d2421; border-radius: 2.6rem; color: white; background: #233a32; box-shadow: 0 35px 80px rgba(35,44,39,.25); }
.phone-presence { position: relative; display: flex; align-items: flex-end; min-width: 0; padding: 1.2rem; overflow: hidden; border-right: 1px solid rgba(255,255,255,.12); }
.glow { position: absolute; border-radius: 50%; filter: blur(25px); opacity: .78; transition: transform .8s ease, opacity .8s ease; }
.glow-peach { width: 18rem; height: 20rem; left: -10rem; top: 0; background: radial-gradient(circle, var(--peach), transparent 68%); }
.glow-mint { width: 16rem; height: 19rem; right: -10rem; bottom: -4rem; background: radial-gradient(circle, var(--mint), transparent 68%); }
.phone-presence p { position: relative; z-index: 2; max-width: 8ch; margin: 0; font-family: Georgia, serif; font-size: clamp(1.3rem, 2.7vw, 2.6rem); line-height: .98; }
.phone-answer { display: flex; flex-direction: column; min-width: 0; padding: 1.3rem; }
.phone-status { display: flex; justify-content: space-between; gap: .8rem; color: #b8c7c0; font-size: .68rem; }
.phone-response { margin: auto 0; }
.phone-response small { color: #bdd1c8; }
.phone-response p { margin: .6rem 0; font-family: Georgia, serif; font-size: clamp(1.25rem, 2.5vw, 2.25rem); line-height: 1.15; }
.demo-button { min-height: 46px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #222a26; background: var(--peach); font: inherit; font-weight: 700; cursor: pointer; }
.phone[data-phase="hearing"] .glow-peach { transform: translate(5rem, 3rem) scale(1.2); }
.phone[data-phase="hearing"] .glow-mint { transform: translate(-3rem, -2rem); opacity: 1; }
.phone[data-phase="answer"] .glow-peach { transform: translate(1rem, 6rem) scale(.8); opacity: .5; }
.hero-truth { margin: 2rem auto 0; color: var(--muted); font-size: .78rem; text-align: center; }

.problem { padding: clamp(8rem, 18vw, 17rem) clamp(1rem, 7vw, 7rem); color: #f7f2e8; background: #1f2924; }
.problem h2, .problem-line, .problem-answer { max-width: 70rem; }
.problem h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(3.3rem, 8vw, 8rem); font-weight: 500; line-height: .95; letter-spacing: -.06em; }
.problem-line { margin: 2.5rem 0 0; color: #aab6b0; font-size: clamp(1.3rem, 3vw, 2.4rem); line-height: 1.35; }
.problem-answer { margin: 7rem 0 0 auto; color: var(--peach); font-family: Georgia, serif; font-size: clamp(2.5rem, 6vw, 6rem); text-align: right; }

.moment { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 9rem); padding: clamp(8rem, 14vw, 14rem) clamp(1rem, 6vw, 6rem); background: var(--cream); }
.moment-copy { align-self: start; position: sticky; top: 9rem; }
.moment h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(4rem, 8vw, 8rem); font-weight: 500; line-height: .88; letter-spacing: -.065em; }
h2 em { color: #bd6046; font-weight: 500; }
.moment-sequence { margin: 0; padding: 0; list-style: none; }
.moment-sequence li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 2rem 0 3rem; border-top: 1px solid var(--line); }
.moment-sequence li > span { color: var(--muted); font-size: .72rem; }
.moment-sequence strong { font-family: Georgia, serif; font-size: clamp(1.7rem, 3vw, 3.1rem); font-weight: 500; }
.moment-sequence p { grid-column: 2; max-width: 37rem; margin: .8rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }

.language-story { position: relative; min-height: 100svh; overflow: hidden; padding: clamp(8rem, 14vw, 14rem) clamp(1rem, 6vw, 6rem); background: #dcd1f0; }
.language-backdrop { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; gap: 4rem; color: rgba(74,48,96,.08); font-family: Georgia, serif; font-size: clamp(3rem, 10vw, 11rem); transform: rotate(-6deg) scale(1.15); }
.language-copy, .translation-example { position: relative; z-index: 1; }
.language-copy { max-width: 76rem; }
.language-copy h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(3.4rem, 7.5vw, 7.8rem); font-weight: 500; line-height: .94; letter-spacing: -.06em; }
.language-copy > p:last-child { max-width: 41rem; margin: 2rem 0 0; color: #665d6e; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.55; }
.translation-example { display: grid; grid-template-columns: .7fr 1.3fr; max-width: 64rem; margin: 7rem 0 0 auto; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 30px 80px rgba(74,48,96,.15); }
.translation-example > div { padding: clamp(1.5rem, 4vw, 3rem); background: rgba(255,255,255,.72); }
.translation-example > div:last-child { color: white; background: #5d436f; }
.translation-example small { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.translation-example p { margin: 1rem 0 0; font-family: Georgia, serif; font-size: clamp(1.25rem, 2.5vw, 2.3rem); line-height: 1.35; }

.memory-story { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; min-height: 100svh; padding: clamp(8rem, 14vw, 14rem) clamp(1rem, 6vw, 6rem); background: #f3d7c9; }
.memory-copy h2, .tangent-copy h2, .focus-copy h2, .access-copy h2, .privacy-copy h2, .not-reader h2, .finale h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(3.7rem, 7.5vw, 7.5rem); font-weight: 500; line-height: .92; letter-spacing: -.06em; }
.memory-copy > p:last-child, .tangent-copy > p:last-child, .focus-copy > p:last-child, .access-copy > p:last-child, .finale-copy > p { max-width: 41rem; margin: 2rem 0 0; color: #675f59; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.6; }
.margin-notes { position: relative; min-height: 36rem; }
.note { position: absolute; width: min(25rem, 88%); padding: 1.5rem; border: 1px solid rgba(68,48,37,.12); border-radius: 1.1rem; background: #fffaf0; box-shadow: 0 24px 60px rgba(68,48,37,.12); }
.note span { color: #8c7669; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.note p { margin: 1rem 0 0; font-family: Georgia, serif; font-size: 1.5rem; line-height: 1.35; }
.note-one { top: 0; left: 0; transform: rotate(-3deg); }
.note-two { top: 12rem; right: 0; transform: rotate(4deg); background: #efe4fb; }
.note-three { bottom: 0; left: 8%; transform: rotate(-1deg); background: #f8e99f; }

.tangent-story { position: relative; display: grid; place-items: center; min-height: 100svh; overflow: hidden; padding: 8rem 1rem; color: white; background: #24372f; }
.tangent-copy { position: relative; z-index: 2; max-width: 70rem; text-align: center; }
.tangent-copy h2 em { color: var(--peach); }
.tangent-copy > p:last-child { margin-inline: auto; color: #bdc9c4; }
.tangent-orbit { position: absolute; inset: 0; }
.tangent-orbit span { position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .7rem 1rem; color: #afbbb5; font-size: .75rem; }
.tangent-orbit span:nth-child(1) { left: 5%; top: 18%; transform: rotate(-8deg); }
.tangent-orbit span:nth-child(2) { right: 7%; top: 14%; transform: rotate(9deg); }
.tangent-orbit span:nth-child(3) { left: 11%; bottom: 16%; transform: rotate(5deg); }
.tangent-orbit span:nth-child(4) { right: 10%; bottom: 20%; transform: rotate(-7deg); }
.tangent-orbit span:nth-child(5) { right: 23%; top: 48%; }

.focus-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; min-height: 100svh; padding: clamp(8rem, 14vw, 14rem) clamp(1rem, 6vw, 6rem); background: #d8c7ef; }
.focus-copy > p:last-child { color: #635a6c; }
.thread-demo { position: relative; padding: clamp(2.5rem, 6vw, 5rem); border-radius: 2rem; background: #fbf7ed; box-shadow: 0 30px 80px rgba(69,49,87,.15); }
.thread-demo > p { margin: .4rem 0; color: #a39991; font-family: Georgia, serif; font-size: clamp(1.2rem, 2.5vw, 2.1rem); line-height: 1.55; }
.thread-demo .thread-current { position: relative; z-index: 2; color: var(--ink); }
.thread-current::after { content: ""; position: absolute; z-index: -1; left: -.3rem; right: -.3rem; bottom: .1rem; height: 76%; background: #bee1e3; }
.thread-line { position: absolute; left: 2rem; top: -5rem; bottom: 3rem; width: 2px; background: linear-gradient(transparent, #a46bc0 18%, #dd9479); }
.return-marker { display: flex; align-items: center; gap: .8rem; margin-top: 3rem; color: #745f7c; }
.return-marker span { width: .85rem; height: .85rem; border-radius: 50%; background: #a46bc0; box-shadow: 0 0 0 .55rem rgba(164,107,192,.14); }

.access-story { min-height: 100svh; padding: clamp(8rem, 14vw, 14rem) clamp(1rem, 6vw, 6rem); border-block: 3px solid var(--ink); background: var(--butter); }
.access-copy { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: 5rem; align-items: end; }
.access-copy .eyebrow { grid-column: 1 / -1; }
.access-copy > p:last-child { color: #5d5742; }
.access-modes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 5rem; }
.access-modes span { min-height: 56px; display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: .6rem; padding: .7rem 1rem; background: #fff4bc; font-size: clamp(1rem, 2vw, 1.45rem); font-weight: 800; }
.access-modes span:nth-child(2), .access-modes span:nth-child(5), .access-modes span:nth-child(7) { color: white; background: var(--ink); }
.access-note { margin: 5rem 0 0; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 5rem); }

.privacy-story { padding: clamp(8rem, 14vw, 14rem) clamp(1rem, 6vw, 6rem); background: #e7efe8; }
.privacy-copy { max-width: 75rem; }
.privacy-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 6rem; background: rgba(35,54,46,.18); }
.privacy-points > div { min-height: 18rem; padding: 2rem; background: #e7efe8; }
.privacy-points strong { display: block; font-family: Georgia, serif; font-size: 1.8rem; font-weight: 500; }
.privacy-points p { color: #647068; line-height: 1.6; }

.not-reader { min-height: 90svh; padding: clamp(8rem, 14vw, 14rem) clamp(1rem, 6vw, 6rem); color: white; background: #1c211f; }
.not-reader h2 { max-width: 80rem; }
.not-reader h2 em { color: var(--mint); }
.refusals { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 6rem; }
.refusals span { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .85rem 1.1rem; color: #bec7c2; }

.finale { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 8rem 1rem; text-align: center; background: #eed4c6; }
.finale-haze { position: absolute; inset: 0; }
.finale-haze span { position: absolute; width: 40rem; height: 40rem; border-radius: 50%; filter: blur(50px); opacity: .58; }
.finale-haze span:nth-child(1) { left: -10rem; top: -14rem; background: #e99778; }
.finale-haze span:nth-child(2) { right: -11rem; bottom: -16rem; background: #91c3b0; }
.finale-haze span:nth-child(3) { right: 26%; top: 15%; background: #c5afe5; }
.finale-copy { position: relative; z-index: 2; max-width: 75rem; }
.finale h2 em { color: #874e72; }
.finale-copy > p { margin-inline: auto; }
.finale-copy .button { margin-top: 2.2rem; box-shadow: 0 14px 35px rgba(45,38,43,.12); }
.finale-copy .alpha-note { margin-top: 1rem; color: #705f66; font-size: .72rem; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 9rem; padding: 2rem clamp(1rem, 4vw, 4rem); background: var(--paper); }
footer p { margin: 0; color: var(--muted); font-size: .78rem; text-align: center; }
footer p:last-child { justify-self: end; }

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .75s ease, transform .75s cubic-bezier(.22,.8,.24,1); }
.reveal[data-visible="true"] { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero-stage, .moment, .memory-story, .focus-story { grid-template-columns: 1fr; }
  .hero-stage { min-height: 50rem; }
  .open-book { width: 90%; height: 18rem; }
  .phone { width: min(34rem, 90%); min-height: 31rem; margin: -3rem 0 0 auto; }
  .moment-copy { position: static; }
  .memory-story { gap: 3rem; }
  .access-copy { grid-template-columns: 1fr; }
  .access-copy > p:last-child { margin-top: 2rem; }
  .privacy-points { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .site-header { height: 58px; }
  .header-cta { padding: .5rem .7rem; }
  .hero { padding-top: 7.5rem; }
  .hero h1 { font-size: clamp(4.6rem, 25vw, 7.2rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-stage { min-height: 40rem; margin-top: 3rem; }
  .open-book { width: 100%; height: 12rem; }
  .book-page { padding: 1.3rem; }
  .book-page span { margin-bottom: 1rem; }
  .book-page i:nth-of-type(n+4) { display: none; }
  .phone { grid-template-columns: .78fr 1.22fr; width: 95%; min-height: 27rem; margin-top: -1rem; border-width: 6px; border-radius: 2rem; }
  .phone-presence { padding: .9rem; }
  .phone-answer { padding: 1rem; }
  .phone-response p { font-size: 1.35rem; }
  .moment-sequence li { grid-template-columns: 2rem 1fr; }
  .translation-example { grid-template-columns: 1fr; margin-top: 4rem; }
  .margin-notes { min-height: 43rem; }
  .note { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; margin-bottom: 1rem; transform: none; }
  .tangent-orbit span:nth-child(5) { display: none; }
  .thread-demo { padding: 2rem 1.4rem 2rem 2.5rem; }
  .thread-line { left: 1.2rem; }
  .privacy-points { grid-template-columns: 1fr; }
  .privacy-points > div { min-height: auto; }
  footer { grid-template-columns: 1fr; text-align: center; }
  footer .brand, footer p:last-child { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .button, .demo-button, .access-modes span, .note { border: 2px solid ButtonText; }
  .glow, .finale-haze { display: none; }
  .thread-current::after { background: Highlight; }
}