/* Yoma site (web/site): one site made from the two before it. The waitlist's world (aubergine book cloth, cream
   foil type, lavender light, Besley over Hanken Grotesk; Frank Ruhl Libre over Heebo in Hebrew) and its hero book;
   the product site's content, told as one story. Tokens are the waitlist's, which are the product site's.

   MOTION CONTRACT. One focal object, the 3D book at the top. Every other section moves only where the scroll
   carries meaning, and only through one variable: site.js writes --p (0..1, the section's own progress) on any
   [data-scrub] element, and the CSS below turns it into transforms, opacity and clip-paths. Nothing is hidden
   by default without JS, nothing animates layout, and with prefers-reduced-motion every section shows its final,
   readable state (the pinned sections unpin). */
:root {
  --cloth: #2b1a40; --cloth-2: #3a2656; --cloth-3: #4a3369;
  --foil: #f4ede0; --foil-2: #d9cde9; --foil-3: #b9a9d2;
  --paper: #f5f2f9; --paper-2: #ebe5f3; --lav: #cdbfea; --lav-2: #bfaee4;
  --ink: #1e1529; --ink-2: #463b58; --ink-3: #5f5472;
  --rule: #d9cfe6; --accent: #6f45e0; --accent-ink: #5431c4;
  --wait: #f3c969; --wait-bg: rgba(243, 201, 105, .13); --wait-ink: #fbe6b6;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --nav: 64px;
  --dir: 1;
  --display: "Besley", Georgia, serif;
  --text: "Hanken Grotesk", system-ui, sans-serif;
  --app: Inter, "Hanken Grotesk", system-ui, sans-serif;
  --app-serif: "Playfair Display", Georgia, serif;
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .045' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 -.2'/%3E%3C/filter%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .9' numOctaves='2' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 -.22'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23w)' opacity='.15'/%3E%3Crect width='220' height='220' filter='url(%23h)' opacity='.1'/%3E%3C/svg%3E");
  color-scheme: light;
}
:root[lang="he"] { --display: "Frank Ruhl Libre", "Times New Roman", serif; --text: "Heebo", "Arial Hebrew", system-ui, sans-serif; --app: "Heebo", system-ui, sans-serif; --app-serif: "Frank Ruhl Libre", serif; }
[dir="rtl"] { --dir: -1; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--text); font-feature-settings: "lnum" 1; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -.015em; }
:root[lang="he"] h1, :root[lang="he"] h2, :root[lang="he"] h3, :root[lang="he"] h4 { letter-spacing: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--foil); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--foil); color: var(--cloth); padding: 12px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.band { padding-left: 24px; padding-right: 24px; padding-inline: var(--gut); }
.wrap { max-width: calc(var(--maxw) - 2 * var(--gut)); margin: 0 auto; }
.dark { background-color: var(--cloth); color: var(--foil); background-image: var(--weave); }
.light { background: var(--paper); color: var(--ink); }

/* launch switch: <html class="prelaunch"> or <html class="launched"> (the LAUNCHED flag in the page's head) */
html:not(.launched) .post, .launched .pre { display: none !important; }

/* ============ type */
.kicker { font: 600 .95rem/1.3 var(--text); color: var(--foil-3); display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.kicker::before { content: ""; width: 28px; height: 1.5px; background: currentColor; flex: none; }
.light .kicker { color: var(--accent-ink); }
h1 { font-size: clamp(2.2rem, 4.3vw, 4.3rem); line-height: .98; font-weight: 800; letter-spacing: -.025em; }
h1 span, h1 em { display: block; }
h1 em, h2 em { font-style: italic; font-weight: 600; }
.dark h1 em, .dark h2 em { color: var(--lav); }
.light h2 em { color: var(--accent-ink); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.02; font-weight: 800; letter-spacing: -.022em; }
h2.sm { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.4rem; line-height: 1.15; font-weight: 700; }
.lede { font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.55; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.dark .lede { color: var(--foil-2); }
.sec { padding-top: 88px; padding-bottom: 88px; padding-block: clamp(64px, 9vw, 128px); }
.sec-head { max-width: 860px; margin-bottom: clamp(32px, 5vw, 64px); }
.sec-head .lede { margin-top: 16px; }
.tlink { display: inline-block; padding-block: 10px; line-height: 1.5; color: var(--accent-ink); font-weight: 600; text-underline-offset: 4px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.dark .tlink { color: var(--lav); }

/* ============ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .2s, box-shadow .25s; }
.btn-foil { background: var(--foil); color: var(--cloth); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 6px 16px -6px rgba(0, 0, 0, .5); }
.btn-foil:hover { transform: translateY(-1px); background: #fffaf0; }
.btn-ink { background: var(--cloth); color: var(--foil); box-shadow: 0 10px 20px -12px rgba(20, 12, 30, .6); }
.btn-ink:hover { background: var(--cloth-2); transform: translateY(-1px); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn[disabled] { cursor: progress; opacity: .8; transform: none; }

/* store badges (after launch) */
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px 0 16px; border-radius: 12px; background: #0b0810; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transition: transform .25s var(--ease), box-shadow .2s; }
.store:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 10px 22px -10px rgba(0, 0, 0, .6); }
.store svg { width: 24px; height: 24px; flex: none; }
.store span { display: flex; flex-direction: column; font: 600 1.15rem/1.05 "Hanken Grotesk", sans-serif; letter-spacing: -.01em; text-align: start; }
.store small { font-size: .75rem; font-weight: 500; letter-spacing: .02em; opacity: .85; }
.get .micro { margin-top: 12px; }

/* ============ header */
.top { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(244, 237, 224, .12); }
.top .wrap { display: flex; align-items: center; gap: 12px; height: var(--nav); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.45rem/1 "Besley", Georgia, serif; letter-spacing: -.01em; min-height: 44px; }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 2px; margin-inline-start: auto; }
.nav a, .lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--foil-2); transition: color .2s, background-color .2s; }
.nav a:hover, .lang:hover { color: var(--foil); background: rgba(244, 237, 224, .08); }
.nav a[aria-current="true"] { color: var(--foil); background: rgba(244, 237, 224, .1); }
.lang { border: 1px solid rgba(244, 237, 224, .22); margin-inline-start: 6px; }
.top .btn { min-height: 44px; padding: 0 18px; font-size: .95rem; margin-inline-start: 6px; }
@media (max-width: 1060px) { .nav { display: none; } .lang { margin-inline-start: auto; } }
@media (max-width: 860px) { .top .btn { display: none; } }

/* ============ forms (the waitlist's, with its Buttondown wiring) */
.signup { width: 100%; max-width: 540px; }
.field { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(15, 8, 24, .45); box-shadow: inset 0 0 0 1.5px rgba(244, 237, 224, .22); transition: box-shadow .2s; }
.field:focus-within { box-shadow: inset 0 0 0 2px var(--lav); }
.field input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; padding: 0 12px 0 20px; font-size: 1.05rem; color: var(--foil); outline: none; direction: ltr; text-align: start; }
:root[lang="he"] .field input { text-align: right; padding: 0 20px 0 12px; }
.field input::placeholder { color: var(--foil-3); opacity: 1; }
.field .btn { min-height: 52px; }
.signup .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: none; animation: spin .8s linear infinite; }
.signup[aria-busy="true"] .spin { display: inline-block; }
@keyframes spin { to { transform: rotate(1turn); } }
.micro { margin-top: 12px; font-size: .9rem; font-weight: 600; color: var(--foil-2); }
.founder-line { margin-top: 10px; font-size: .98rem; line-height: 1.5; color: var(--foil); max-width: 34em; }
.founder-line b { color: var(--lav); font-weight: 700; }
.promise { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.5; color: var(--foil-2); max-width: 36em; }
.promise svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--lav); }
.promise a { color: var(--foil); text-underline-offset: 3px; white-space: nowrap; display: inline-block; padding: 2px 0; }
.msg:empty { display: none; }
.msg { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: .95rem; line-height: 1.45; }
.msg svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.msg[data-tone="error"] { background: rgba(255, 158, 170, .12); color: #ffd3d9; box-shadow: inset 0 0 0 1px rgba(255, 158, 170, .45); }
.msg[data-tone="wait"] { background: var(--wait-bg); color: var(--wait-ink); box-shadow: inset 0 0 0 1px rgba(243, 201, 105, .5); }
.msg[data-tone="wait"] svg { color: var(--wait); }
@media (max-width: 560px) {
  .field { flex-direction: column; border-radius: 22px; }
  .field input { flex: none; padding: 0 16px; }
  .field .btn { width: 100%; }
}
.joined { max-width: 540px; padding: 22px 22px 20px; border-radius: 22px; background: rgba(15, 8, 24, .4); box-shadow: inset 0 0 0 1.5px rgba(205, 191, 234, .4); }
.joined h3 { font-size: 1.35rem; }
.joined > p { margin-top: 6px; color: var(--foil-2); }
.poll { margin: 18px 0 0; padding: 0; border: 0; }
.poll legend { font-weight: 700; padding: 0; margin-bottom: 10px; }
.poll .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.poll button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(244, 237, 224, .1); color: var(--foil); font-weight: 600; cursor: pointer; }
.poll button[aria-pressed="true"] { background: var(--foil); color: var(--cloth); }
.poll .thanks { margin-top: 8px; font-size: .92rem; color: var(--foil-2); min-height: 1.4em; }
.joined .share { margin-top: 16px; }

/* ============ stage: the hero, the book's flight and the sample book share one sticky canvas (the waitlist's) */
.stage { position: relative; }
main { background-color: var(--cloth); background-image: var(--weave); }
.stage.dark { background: none; }
#gl { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100svh; z-index: 0; opacity: 0; transition: opacity .7s ease; touch-action: pan-y; -webkit-tap-highlight-color: transparent; outline: none; }
.gl-on #gl { opacity: 1; }
.gl-on .rm-gap #gl { opacity: 0; transition: opacity .2s; }
.no-gl #gl { display: none; }
.stage.flying #gl { z-index: 2; pointer-events: none; }
#gl.grab { cursor: grab; }
#gl.grab:active { cursor: grabbing; }
.flow { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.no-gl .flow { margin-top: 0; }
.flow a, .flow button, .flow input, .flow label, .flow form, .flow .joined { pointer-events: auto; }
.hero { padding-top: 20px; padding-bottom: 40px; min-height: calc(100vh - var(--nav)); min-height: calc(100svh - var(--nav)); display: flex; align-items: center; }
.hero .wrap { width: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-copy { min-width: 0; }
.hero h1 { margin-bottom: 20px; }
.lede-short { display: none; }
.hero .signup, .hero .get { margin-top: 28px; }
.slot { position: relative; height: min(74svh, 700px); min-height: 420px; }
.still { position: absolute; inset: 0; margin: auto; display: none; object-fit: contain; width: 100%; height: 100%; }
.no-gl .still { display: block; }
.memo { position: absolute; inset-inline-start: 0; bottom: 8%; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 999px; direction: ltr;
  background: var(--foil); color: var(--cloth); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7); font: 600 .9rem/1.15 "Hanken Grotesk", sans-serif; transform: rotate(-3deg); pointer-events: none; transition: opacity .4s; }
[dir="rtl"] .memo { transform: rotate(3deg); font-family: "Heebo", sans-serif; }
.stage.flying .memo, .stage.is-open .memo { opacity: 0; }
.memo .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.memo .dot svg { width: 14px; height: 14px; }
.memo small { display: block; font-weight: 500; color: var(--ink-3); margin-top: 2px; font-size: .8rem; }
.memo .wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.memo .wave i { width: 2.5px; border-radius: 2px; background: var(--accent); }
@media (max-width: 860px) {
  .hero { padding-top: 18px; padding-bottom: 0; min-height: 0; display: block; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero .kicker { font-size: .9rem; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(2rem, 9.2vw, 3.2rem); margin-bottom: 12px; }
  .lede-long { display: none; }
  .lede-short { display: block; font-size: 1.05rem; }
  .hero .signup, .hero .get { margin-top: 18px; }
  .micro { margin-top: 10px; font-size: .84rem; }
  .founder-line { font-size: .92rem; margin-top: 8px; }
  .promise { font-size: .88rem; margin-top: 8px; }
  .slot { height: 33svh; min-height: 230px; max-height: 420px; margin-top: 18px; }
  .memo { bottom: 6%; transform: rotate(-3deg) scale(.86); transform-origin: left bottom; }
  [dir="rtl"] .memo { transform: rotate(3deg) scale(.86); transform-origin: right bottom; }
}
.bridge { height: 50vh; height: 50svh; }
@media (max-width: 860px) { .bridge { height: 6svh; } }
.no-gl .bridge { height: 0; }
.demo { position: relative; height: 280vh; height: 280svh; padding-left: 0; padding-right: 0; padding-inline: 0; }
.demo-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(var(--nav) + 20px) var(--gut) 18px; }
.no-gl .demo { height: auto; }
.no-gl .demo-pin { position: static; height: auto; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .demo { height: 100vh; height: 100svh; } }
.demo-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 40px; align-items: end; width: 100%; }
.demo-head h2 em { display: block; }
.demo-head .calm { display: none; }
@media (prefers-reduced-motion: reduce) { .demo-head .scrubby { display: none; } .demo-head .calm { display: inline; } .no-gl .demo-head .calm { display: none; } }
.caps { position: relative; min-height: 4.6em; align-self: end; }
.caps [data-cap] { position: absolute; inset: auto 0 0 0; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .55s var(--ease); pointer-events: none; }
#stage[data-spread="0"] [data-cap="0"], #stage[data-spread="1"] [data-cap="1"], #stage[data-spread="2"] [data-cap="2"],
#stage[data-spread="3"] [data-cap="3"], #stage[data-spread="4"] [data-cap="4"], #stage[data-spread="free"] [data-cap="free"] { opacity: 1; transform: none; }
.caps [data-cap="static"] { display: none; }
.no-gl .caps [data-cap] { display: none; }
.no-gl .caps [data-cap="static"] { display: block; position: static; opacity: 1; transform: none; }
.no-gl .caps { min-height: 0; }
/* reduced motion: the book does not turn by itself, so it gets the plain description instead of the scroll captions */
@media (prefers-reduced-motion: reduce) { .caps [data-cap] { display: none; } .caps [data-cap="static"] { display: block; position: static; opacity: 1; transform: none; } .caps { min-height: 0; } }
.demo-head .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.demo-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.demo-head p { color: var(--foil-2); font-size: 1rem; line-height: 1.5; }
#readSlot { position: relative; margin: 14px auto 10px; width: 100%; max-height: 70svh; }
.no-gl #readSlot { aspect-ratio: 1600 / 1185; max-width: 1100px; max-height: none; margin-top: 28px; }
.nogl-only, .no-gl .gl-only { display: none; }
.no-gl .nogl-only { display: inline; }
@media (max-width: 860px) {
  .demo { height: 240vh; height: 240svh; }
  .demo-pin { padding-top: calc(var(--nav) + 12px); padding-bottom: 12px; grid-template-rows: auto auto; align-content: center; }
  /* no controls under the book: the spread sits right under its caption, as tall as the screen's width allows */
  #readSlot { height: calc((100vw - 16px) / 1.36); max-height: 52svh; margin-top: 3svh; margin-bottom: 4svh; }
  .caps { min-height: 4.4em; }
  .demo-head { grid-template-columns: minmax(0, 1fr); }
  .demo-head h2 { font-size: 1.75rem; }
  .demo-head p { font-size: .95rem; }
  .demo-head .long { display: none; }
}
@media (min-width: 861px) { .demo-head .short { display: none; } }

/* ============ the paper sheet (a printed page lying on the table) */
.sheet { position: relative; border-radius: 3px; background: #f6f1e6; box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 26px 40px -22px rgba(22, 16, 30, .5); }
.sheet img { border-radius: 3px; width: 100%; }

/* ============ HOW: a minute of talking becomes a page, then a book (pinned; the scroll drives it) */
.how { position: relative; height: 300vh; height: 300svh; padding-left: 0; padding-right: 0; padding-inline: 0;
  --a: clamp(0, var(--p, 1) / .3, 1);
  --b: clamp(0, (var(--p, 1) - .36) / .24, 1);
  --c: clamp(0, (var(--p, 1) - .68) / .22, 1); }
.how-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; display: flex; align-items: center; padding: calc(var(--nav) + 16px) var(--gut) 24px; overflow: hidden; }
.how-grid { width: 100%; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.how h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.steps { list-style: none; margin: clamp(24px, 3.4vw, 40px) 0 0; padding: 0; position: relative; display: grid; gap: 6px; }
.steps::before { content: ""; position: absolute; inset-inline-start: 9px; top: 12px; bottom: 12px; width: 2px; background: var(--rule); }
.steps::after { content: ""; position: absolute; inset-inline-start: 9px; top: 12px; bottom: 12px; width: 2px; background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.steps li { position: relative; padding: 8px 0 12px; padding-inline-start: 40px; opacity: .42; transition: opacity .5s var(--ease); }
.steps li::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-3); transition: box-shadow .4s var(--ease); z-index: 1; }
.how[data-step="0"] .steps li:nth-child(1), .how[data-step="1"] .steps li:nth-child(2), .how[data-step="2"] .steps li:nth-child(3) { opacity: 1; }
.how[data-step="0"] .steps li:nth-child(1)::before, .how[data-step="1"] .steps li:nth-child(-n+2)::before, .how[data-step="2"] .steps li::before { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 6px var(--paper), inset 0 0 0 10px var(--accent); }
.steps time { font: 700 .92rem/1 var(--text); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 1.45rem; margin-top: 8px; }
.steps p { color: var(--ink-2); margin-top: 6px; max-width: 32em; }
.steps .spec { font-size: .9rem; color: var(--ink-3); margin-top: 8px; font-weight: 500; }
/* the art: a phone listening, a page being set, a cover closing over it */
.how-art { position: relative; height: min(70svh, 600px); min-height: 440px; }
.how-art > * { position: absolute; }
.how .rec-ph { inset-inline-start: 4%; top: 50%; transform-origin: 50% 50%; zoom: .86;
  transform: translate(calc(var(--dir) * var(--b) * -16%), -50%) rotate(calc(var(--dir) * var(--b) * -7deg)) scale(calc(1 - var(--b) * .1));
  opacity: calc(1 - var(--c) * .92 - var(--b) * .25); }
.how-book { inset-inline-end: 6%; top: 50%; width: min(300px, 46%); aspect-ratio: 340 / 483; perspective: 1600px;
  transform: translate(calc(var(--dir) * var(--c) * -22%), calc(-50% + (1 - var(--b)) * 14%)) rotate(calc(var(--dir) * (1 - var(--c)) * 2.5deg)) scale(calc(1 + var(--c) * .1));
  opacity: clamp(0, var(--b) * 3, 1); }
.how-page { position: absolute; inset: 0; clip-path: inset(0 0 calc((1 - var(--b)) * 100%) 0); }
.how-page img { height: 100%; object-fit: cover; }
/* a printer's sweep while the page is being set */
.how-page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(111, 69, 224, .55), transparent) bottom / 100% 3px no-repeat; transform: translateY(calc((var(--b) - 1) * 100% + 1px)); opacity: calc((1 - var(--b)) * 4 * var(--b)); }
.how-block { position: absolute; top: 1.5%; bottom: 1.5%; inset-inline-start: 100%; width: 10px; background: repeating-linear-gradient(0deg, #efe7d5 0 2px, #ddd2ba 2px 3px); border-radius: 0 3px 3px 0; opacity: var(--c); }
[dir="rtl"] .how-block { border-radius: 3px 0 0 3px; }
.how-cover { position: absolute; inset: -2% -1.5%; inset-inline-start: -4px; transform-origin: left center; transform: rotateY(calc((1 - var(--c)) * -178deg)); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 6px 6px 2px; overflow: hidden;
  box-shadow: 0 30px 50px -24px rgba(22, 16, 30, .65), inset 0 0 0 1px rgba(0, 0, 0, .15); }
[dir="rtl"] .how-cover { transform-origin: right center; transform: rotateY(calc((1 - var(--c)) * 178deg)); border-radius: 6px 2px 2px 6px; }
.how-cover img { width: 100%; height: 100%; object-fit: cover; }
.how-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .08) 4%, transparent 10%); }
[dir="rtl"] .how-cover::after { background: linear-gradient(270deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .08) 4%, transparent 10%); }
.how-art .tag { inset-inline-end: 0; bottom: 4%; display: flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 999px; background: var(--cloth); color: var(--foil); font: 600 .88rem/1 var(--text); box-shadow: 0 12px 24px -12px rgba(20, 12, 30, .6); opacity: var(--c); transform: translateY(calc((1 - var(--c)) * 12px)); }
.how-art .tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--lav); }
/* the parts the scroll moves every frame get their own layer, so a frame is a composite, not a repaint */
.how .rec-ph, .how-book, .how-cover, .deal .sheet, .lay-book, .shelf-end span { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .how .rec-ph, .how-book, .how-cover, .deal .sheet, .lay-book, .shelf-end span { will-change: auto; } }
/* the transcript: words arrive as the scroll goes, then the filler words are struck through */
.said { font: 400 15px/1.55 var(--app); color: #2c2440; }
.said .w { opacity: .14; transition: opacity .25s; }
.said .w.on { opacity: 1; }
.said .um { text-decoration-line: line-through; text-decoration-color: transparent; text-decoration-thickness: 2px; transition: text-decoration-color .5s var(--ease), color .5s; }
.how.edited .said .um { text-decoration-color: var(--accent); color: #8a80a0; }
.voice { margin-top: 0; display: grid; grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr)); gap: 18px clamp(20px, 3vw, 40px); padding-top: 26px; border-top: 1.5px solid var(--ink); }
.voice h3 { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.voice h4 { margin: 0; font: 700 1rem/1.3 var(--text); }
.voice p { color: var(--ink-2); margin-top: 4px; font-size: .98rem; }
.voice-band { padding-top: 8px; padding-bottom: clamp(56px, 7vw, 96px); }
@media (max-width: 860px) {
  .how { height: 260svh; }
  .how-pin { align-items: stretch; padding-top: calc(var(--nav) + 14px); padding-bottom: 20px; }
  .how-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .how .kicker { display: none; }
  .how h2 { font-size: 1.6rem; }
  .steps { margin-top: 12px; min-height: 8.6em; }
  .steps::before, .steps::after { display: none; }
  .steps li { position: absolute; inset: 0 0 auto 0; padding: 0; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
  .steps li::before { display: none; }
  .how[data-step="0"] .steps li:nth-child(1), .how[data-step="1"] .steps li:nth-child(2), .how[data-step="2"] .steps li:nth-child(3) { opacity: 1; transform: none; }
  .steps h3 { font-size: 1.2rem; margin-top: 4px; }
  .steps p { font-size: .95rem; margin-top: 4px; }
  .steps .spec { display: none; }
  .how-art { height: auto; min-height: 0; }
  .how .rec-ph { zoom: .64; inset-inline-start: 2%; }
  .how-book { width: min(44%, 250px); inset-inline-end: 4%; }
  .how-art .tag { display: none; }  /* on a phone the label would sit on the cover */
  .voice { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .voice > div:not(:first-child) { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; }
  .voice > div:not(:first-child)::before { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); margin-top: 7px; }
  .voice > div:not(:first-child) p { grid-column: 2; font-size: .92rem; }
}

/* ============ the app's own phone (scoped; the app's lavender, not the site's cloth) */
.ph { width: 300px; height: 624px; border-radius: 42px; background: #1c1624; padding: 8px; flex: none; box-shadow: inset 0 0 0 1.5px #3b3346, 0 40px 60px -30px rgba(15, 8, 24, .55), 0 10px 20px -10px rgba(15, 8, 24, .35); direction: ltr; text-align: left; }
.ph[dir="rtl"] { direction: rtl; text-align: right; }
.ph .scr { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #fbf9fd; font: 13px/1.45 var(--app); color: #2c2440; }
.ph .scr.night { background: radial-gradient(120% 70% at 50% 30%, #1d1b36 0%, #0d0c18 100%); color: #e6e0ff; }
.ph .sb { display: flex; justify-content: space-between; align-items: center; padding: 13px 24px 4px; font: 600 12px/1 "Hanken Grotesk", sans-serif; direction: ltr; }
.ph .sb i { display: inline-block; width: 18px; height: 9px; border-radius: 2.5px; border: 1.4px solid currentColor; opacity: .8; }
.ph .tb { display: flex; align-items: center; gap: 8px; padding: 8px 16px 6px; }
.ph .tb .spc { flex: 1; }
.ph .mut { color: #6c6080; }
.ph .scr.night .mut { color: #9a93c4; }
.ph .btnp { background: #6f45e0; color: #fff; border-radius: 999px; padding: 7px 14px; font: 600 12.5px/1 var(--app); }
.ph .pad { padding: 0 18px; }
.ph .chip { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e3d9f0; background: #fff; border-radius: 999px; padding: 5px 10px; min-height: 0; font: 500 11.5px/1 var(--app); color: #4a4060; white-space: nowrap; }
.ph .chip.on { background: #efe8fb; border-color: #cdbdf3; color: #5b3fc4; font-weight: 600; }
.ph .chip.auto { background: #f3effb; border-style: dashed; border-color: #cdbdf3; color: #5b3fc4; }
.ph .chip.auto::before { content: "✦"; font-size: 9px; }
.ph .night .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #d9d2f7; }
.ph .night .chip.on { background: rgba(169, 139, 255, .22); border-color: #a98bff; color: #fff; }
.ph .night .chip.auto { background: rgba(169, 139, 255, .12); border-color: rgba(169, 139, 255, .5); color: #d8ccff; }
.ph .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph .tray { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #eee8f6; padding: 10px 12px 20px; border-radius: 18px 18px 0 0; }
.ph .night .tray { background: #15142a; border-color: rgba(255, 255, 255, .08); }
.ph .tray .goes { font: 500 10.5px/1.3 var(--app); color: #6c6080; margin-bottom: 8px; }
.ph .tray .goes b { color: #4f4275; }
.ph .night .tray .goes { color: #9a93c4; } .ph .night .tray .goes b { color: #d8ccff; }
.ph .mic { width: 38px; height: 38px; border-radius: 50%; background: #6f45e0; display: grid; place-items: center; flex: none; box-shadow: 0 6px 12px -2px rgba(20, 12, 30, .28); }
.ph .mic::before { content: ""; width: 46%; height: 46%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E") center/contain no-repeat; }
.ph .mic.big { width: 84px; height: 84px; background: #7d5cf0; box-shadow: 0 0 0 12px rgba(125, 92, 240, .18), 0 0 0 26px rgba(125, 92, 240, .08); }
.ph .trow { display: flex; align-items: center; gap: 6px; }
.ph .mod { background: #fff; border: 1px solid #ece4f7; border-radius: 14px; padding: 10px 12px; margin-top: 10px; }
.ph .mod .ml { font: 600 10px/1 var(--app); letter-spacing: .1em; text-transform: uppercase; color: #6c6080; margin-bottom: 7px; display: flex; justify-content: space-between; }
.ph[dir="rtl"] .mod .ml { letter-spacing: 0; font-size: 11px; }
.ph .txt { font: 400 15px/1.5 var(--app); color: #2c2440; }
.ph .night .txt { color: #a49dcc; font-size: 14px; }
.ph .caret { display: inline-block; width: 1.5px; height: 17px; background: #6f45e0; vertical-align: -3px; margin-inline-start: 1px; }
.ph .tg { width: 32px; height: 19px; border-radius: 999px; background: #6f45e0; position: relative; flex: none; display: inline-block; }
.ph .tg::after { content: ""; position: absolute; top: 2px; inset-inline-end: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ph .bubble { background: #fff3ee; border-radius: 14px 14px 14px 4px; padding: 7px 11px; font: italic 500 15px/1.3 var(--app-serif); color: #5a3a30; display: inline-block; margin-top: 2px; }
.ph[dir="rtl"] .bubble { font-style: normal; border-radius: 14px 14px 4px 14px; }
.ph .hwave { display: flex; gap: 2px; align-items: center; height: 34px; flex: 1; direction: ltr; }
.ph .hwave i { flex: 1; border-radius: 2px; background: #a98bff; }
.ph .wavebig { display: flex; gap: 2.5px; align-items: center; justify-content: center; height: 40px; margin-top: 14px; direction: ltr; }
.ph .wavebig i { width: 3px; border-radius: 2px; background: #a98bff; }
.ph .ph-photos { display: grid; gap: 4px; margin-top: 12px; }
.ph .ph-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.ph .ttl { font: 600 11.5px/1.4 var(--app); color: #6c6080; margin-top: 10px; }
.ph .ttl b { color: #5b3fc4; }
/* listening: the bars move only while the transcript is still arriving */
.ph .hwave i { transform-origin: 50% 50%; }
.how.talking .rec-ph .hwave i { animation: talk .9s ease-in-out infinite alternate; }
.how.talking .rec-ph .hwave i:nth-child(3n) { animation-duration: .7s; } .how.talking .rec-ph .hwave i:nth-child(4n+1) { animation-duration: 1.1s; animation-delay: -.3s; }
@keyframes talk { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }

/* ============ SHAPE: three days, three layouts (dealt out of one stack by the scroll) */
.shape { --d: clamp(0, (var(--p, 1) - .1) / .34, 1); overflow: hidden; }
.shape .sec-head { margin-bottom: clamp(28px, 4vw, 52px); }
.deal { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); max-width: 980px; }
.deal li { position: relative; }
.deal .sheet { transform: translateX(calc(var(--dir) * (1 - var(--d)) * (1 - var(--i)) * 104%)) rotate(calc((1 - var(--d)) * (var(--i) - 1) * 5deg + var(--r, 0deg))) translateY(calc((1 - var(--d)) * 10px)); z-index: calc(3 - var(--i)); }
.deal li:nth-child(1) .sheet { --r: -1.2deg; } .deal li:nth-child(3) .sheet { --r: 1.2deg; }
.deal li:nth-child(2) .sheet { z-index: 3; }
.deal .lbl { margin-top: 18px; opacity: var(--d); transform: translateY(calc((1 - var(--d)) * 10px)); }
.deal b { display: block; font: 700 1.2rem/1.2 var(--display); }
.deal span { display: block; color: var(--ink-2); margin-top: 4px; font-size: .98rem; line-height: 1.45; }
@media (max-width: 860px) {
  .deal { gap: 10px; }
  .deal .lbl { margin-top: 10px; }
  .deal b { font-size: 1rem; }
  .deal span { font-size: .84rem; }
}

/* ============ JOURNALS: the text scrolls, the phone and the page beside it change with it */
.journals { background: var(--lav); color: var(--ink); }
.journals .lede { color: #352a48; }
.jstage { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); }
.jitem { min-height: 78vh; min-height: 78svh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; transition: opacity .5s var(--ease); }
.js .jitem { opacity: .38; }
.js .jitem.on { opacity: 1; }
.jitem .for { font: italic 600 1.1rem/1.2 var(--display); color: #3f2a78; }
.jitem h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.02; margin-top: 8px; }
.jitem > p { margin-top: 12px; color: #352a48; max-width: 32em; }
.jitem dl { margin: 18px 0 0; display: grid; gap: 10px; max-width: 32em; }
.jitem dt { font-weight: 700; font-size: .92rem; }
.jitem dd { margin: 2px 0 0; color: #352a48; }
.jdevice { position: sticky; top: calc(var(--nav) + 4vh); height: calc(100vh - var(--nav) - 8vh); height: calc(100svh - var(--nav) - 8vh); min-height: 560px; }
.jset { position: absolute; inset: 0; pointer-events: none; }
.jset .ph { position: absolute; top: 50%; inset-inline-start: 6%; zoom: .9; transform: translateY(calc(-50% + 70px)) rotate(calc(var(--dir) * -2deg)); opacity: 0; transition: transform .8s var(--ease), opacity .45s var(--ease); }
.jset .sheet { position: absolute; top: 50%; inset-inline-end: 4%; width: min(300px, 44%); transform: translateY(calc(-46% + 90px)) rotate(calc(var(--dir) * 5deg)); opacity: 0; transition: transform .9s var(--ease) .06s, opacity .5s var(--ease) .06s; }
.jset.on .ph { opacity: 1; transform: translateY(-50%) rotate(calc(var(--dir) * -2deg)); }
.jset.on .sheet { opacity: 1; transform: translateY(-46%) rotate(calc(var(--dir) * 3deg)); }
.jset.was .ph { opacity: 0; transform: translateY(calc(-50% - 60px)) rotate(calc(var(--dir) * -2deg)); }
.jset.was .sheet { opacity: 0; transform: translateY(calc(-46% - 70px)) rotate(calc(var(--dir) * 2deg)); }
.jset figcaption { position: absolute; bottom: 0; inset-inline-end: 4%; width: min(300px, 44%); font-size: .88rem; color: #3f3352; opacity: 0; transition: opacity .4s; }
.jset.on figcaption { opacity: 1; }
.jmore { margin-top: clamp(32px, 5vw, 64px); border-top: 1.5px solid var(--ink); padding-top: 22px; display: grid; grid-template-columns: minmax(0, .8fr) repeat(4, minmax(0, 1fr)); gap: 16px clamp(18px, 2.6vw, 36px); }
.jmore h3 { font-size: 1.3rem; }
.jmore h4 { font: 700 1.08rem/1.25 var(--display); }
.jmore p { color: #352a48; font-size: .95rem; margin-top: 4px; line-height: 1.5; }
.example-note { margin-top: 18px; font-size: .88rem; color: #3f3352; }
@media (max-width: 1060px) { .jmore { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jmore > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .jstage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jdevice { order: -1; top: var(--nav); height: 50svh; min-height: 0; z-index: 2; margin: 0 calc(-1 * var(--gut)); background: linear-gradient(var(--lav) 88%, rgba(205, 191, 234, 0)); }
  .jset .ph { zoom: .5; inset-inline-start: calc(var(--gut) + 4%); }
  .jset .sheet { width: min(42%, 230px); inset-inline-end: calc(var(--gut) + 4%); }
  .jset figcaption { display: none; }
  .jitem { min-height: 56svh; justify-content: flex-start; padding: 4svh 0 10svh; }
  .jitem .for { font-size: .95rem; }
  .jitem h3 { font-size: 1.6rem; }
  .jitem > p { font-size: .98rem; }
  .jitem dl { display: none; }
  .jmore { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ============ DESIGN: every journal comes with its own book (pinned; the scroll takes you along the shelf) */
.design { position: relative; height: 330vh; height: 330svh; padding-left: 0; padding-right: 0; padding-inline: 0; --ed-bg: #3a1616; background-color: var(--ed-bg); transition: background-color .7s var(--ease); }
.design-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; display: flex; align-items: center; padding: calc(var(--nav) + 12px) var(--gut) 20px; overflow: hidden; }
.design-grid { width: 100%; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto; gap: 24px clamp(28px, 5vw, 80px); align-items: center; }
.design h2 { font-size: clamp(1.75rem, 2.7vw, 2.45rem); }
.design h2 em { display: block; }
.ed-txts { position: relative; margin-top: clamp(20px, 3vw, 36px); min-height: 12.5em; }
.ed-txt { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.ed-txt.on { opacity: 1; transform: none; }
.ed-txt h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; line-height: 1; }
.ed-txt .kind { font: italic 600 1.12rem/1.3 var(--display); color: var(--foil-2); margin-top: 6px; }
:root[lang="he"] .ed-txt .kind { font-style: normal; font-weight: 500; }
.ed-txt p:last-child { color: var(--foil-2); margin-top: 12px; max-width: 30em; }
.ed-show { position: relative; height: min(58svh, 520px); min-height: 360px; display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; }
.ed-covers { position: relative; height: 100%; perspective: 1400px; }
.ed-covers img { position: absolute; top: 50%; left: 50%; width: min(100%, 260px); aspect-ratio: 340 / 483; object-fit: cover; border-radius: 2px 6px 6px 2px; box-shadow: 0 34px 44px -22px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0, 0, 0, .1);
  opacity: 0; transform: translate(-50%, -50%) rotateY(calc(var(--dir) * -32deg)) translateX(calc(var(--dir) * 30px)); transition: opacity .5s var(--ease), transform .8s var(--ease); }
[dir="rtl"] .ed-covers img { border-radius: 6px 2px 2px 6px; }
.ed-covers img.on { opacity: 1; transform: translate(-50%, -50%) rotateY(calc(var(--dir) * -14deg)); }
.ed-covers img.was { opacity: 0; transform: translate(-50%, -50%) rotateY(calc(var(--dir) * 24deg)) translateX(calc(var(--dir) * -40px)); }
.ed-spreads { position: relative; height: 100%; }
.ed-spread { position: absolute; inset: 0; margin: auto; height: fit-content; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .65); opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.ed-spread.on { opacity: 1; transform: none; }
.ed-spread img { width: 100%; aspect-ratio: 640 / 908; object-fit: cover; background: #f2ece0; }
.ed-spread::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 42%, rgba(60, 40, 20, .14) 49%, rgba(60, 40, 20, .24) 50%, rgba(60, 40, 20, .12) 51%, transparent 58%); pointer-events: none; }
.spines { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 6px; padding: 0 10px; border-bottom: 12px solid rgba(10, 4, 14, .55); height: 150px; width: max-content; margin-inline: auto; }
.spine { --c: #7a2e2a; --tc: #f4ede0; width: 50px; border: 0; border-radius: 3px 3px 0 0; background: var(--c); color: var(--tc); display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 .95rem/1 var(--display); letter-spacing: .06em; transition: transform .45s var(--ease), filter .3s; box-shadow: inset 3px 0 0 rgba(255, 255, 255, .12), inset -4px 0 0 rgba(0, 0, 0, .18); position: relative; padding: 0; }
:root[lang="he"] .spine { letter-spacing: 0; transform: none; }
.spine::before, .spine::after { content: ""; position: absolute; left: 8px; right: 8px; height: 1.5px; background: currentColor; opacity: .55; }
.spine::before { top: 12px; } .spine::after { bottom: 12px; }
.spine:not([aria-selected="true"]) { filter: brightness(.82) saturate(.85); }
.spine[aria-selected="true"] { transform: rotate(180deg) translateY(16px); }
:root[lang="he"] .spine[aria-selected="true"] { transform: translateY(-16px); }
.ed-foot { grid-column: 1 / -1; color: var(--foil-2); font-size: .95rem; max-width: 52em; text-align: center; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .design { height: auto; } .design-pin { position: static; height: auto; } }
@media (max-width: 860px) {
  .design { height: 300svh; }
  .design-pin { align-items: flex-start; padding-top: calc(var(--nav) + 14px); padding-bottom: 20px; }
  .design-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .design h2 { font-size: 1.55rem; }
  .ed-txts { margin-top: 14px; min-height: 7.2em; }
  .ed-txt h3 { font-size: 1.3rem; } .ed-txt .kind { font-size: .95rem; }
  .ed-txt .kind { font-size: .95rem; }
  .ed-txt p:last-child { font-size: .9rem; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ed-show { height: 41svh; min-height: 220px; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: 12px; }
  .ed-covers img { width: 92%; }
  .spines { height: 96px; gap: 4px; border-bottom-width: 9px; }
  .spine { width: 40px; font-size: .78rem; }
  .spine::before { top: 8px; } .spine::after { bottom: 8px; }
  .ed-foot, .design .kicker { display: none; }
}

/* ============ PRINT: the printed book lies down on the table; light slides over glossy paper, then the matte paper swallows it (pinned) */
.print { background: var(--paper-2); }
.print-stage { position: relative; height: 230vh; height: 230svh;
  --e: clamp(0, var(--p, 1) / .28, 1);
  --s: clamp(0, (var(--p, 1) - .3) / .32, 1);
  --g: clamp(0, (var(--p, 1) - .66) / .14, 1); }
.print-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; display: flex; align-items: center; padding: calc(var(--nav) + 16px) var(--gut) 24px; overflow: hidden; }
.print-grid { width: 100%; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lay { perspective: 1600px; margin: 0; }
.lay-book { position: relative; transform-origin: 50% 80%; transform: rotateX(calc((1 - var(--e)) * 38deg)) translateY(calc((1 - var(--e)) * 50px)) scale(calc(.94 + var(--e) * .14)); }
.lay img { width: 100%; }
.sheen { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(100deg, transparent 37%, rgba(255, 255, 255, .45) 44%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .45) 52%, transparent 59%) 0 0 / 300% 100% no-repeat;
  background-position: calc(88% - var(--s) * 50%) 0; opacity: calc(clamp(0, var(--e) * 3 - 2, 1) * (1 - var(--g))); }
/* matte: the same page, a touch flatter and warmer */
.lay-book::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(240, 228, 206, .2); opacity: var(--g); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* both light layers keep to the book itself: the render's own alpha is the mask (paths are relative to this file) */
.sheen, .lay-book::after { -webkit-mask-image: url(img/book-open.webp); mask-image: url(img/book-open.webp); }
:root[lang="he"] .sheen, :root[lang="he"] .lay-book::after { -webkit-mask-image: url(img/he-book-open.webp); mask-image: url(img/he-book-open.webp); }
.lay figcaption { margin-top: 18px; font-size: 1rem; color: var(--ink-2); text-align: center; display: grid; }
.lay figcaption > span { grid-area: 1 / 1; }
.lay figcaption .g { opacity: clamp(0, 1 - var(--g) * 2, 1); }
.lay figcaption .m { opacity: clamp(0, var(--g) * 2 - 1, 1); }
.lay figcaption b { color: var(--ink); }
.print-facts { padding-bottom: clamp(56px, 8vw, 112px); }
.facts { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
.facts li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.facts li b { font-weight: 700; }
.facts li span { color: var(--ink-2); }
@media (max-width: 860px) {
  .print-stage { height: 210svh; }
  .print-pin { padding-top: calc(var(--nav) + 18px); }
  .print-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .print .kicker { display: none; }
  .print h2 { font-size: 1.6rem; }
  .print-head .lede { font-size: .98rem; margin-top: 10px !important; }
  .lay { margin-top: 2svh; }
  .lay-book { transform: rotateX(calc((1 - var(--e)) * 38deg)) translateY(calc((1 - var(--e)) * 40px)) scale(calc(1 + var(--e) * .18)); }
  .lay figcaption { font-size: .95rem; min-height: 3em; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; font-size: .95rem; }
}

/* ============ CONTENTS: the app around the book, as a contents page */
.inside { background: var(--paper); color: var(--ink); }
.inside-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.inside h2 { font-size: clamp(2.4rem, 5vw, 4rem); font-style: italic; font-weight: 600; letter-spacing: -.01em; }
:root[lang="he"] .inside h2 { font-style: normal; font-weight: 500; }
.contents { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.contents li { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 16px 0 15px; border-bottom: 1px solid var(--rule); }
.contents b { font: 700 clamp(1.08rem, 1.5vw, 1.24rem)/1.25 var(--display); }
.contents i { align-self: end; margin-bottom: .42em; border-bottom: 1.5px dotted #a99cbd; }
.contents .pg { font: 600 .95rem/1 var(--text); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.contents p { grid-column: 1 / -1; margin-top: 5px; color: var(--ink-2); font-size: .98rem; line-height: 1.5; max-width: 40em; }
@media (max-width: 860px) { .inside-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .inside h2 { font-size: 2.3rem; } .contents li { padding: 12px 0; } .contents p { font-size: .92rem; } }

/* ============ PRICING: plans only. No book prices on this page (owner, 2026-10-18). */
.pricing { background: var(--paper-2); }
.plans { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(22, 16, 30, .55); max-width: 1080px; }
.plan { padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; }
.plan.free { background: #fff; }
.plan h3 { font-size: 1.8rem; font-weight: 800; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.price b { font: 800 clamp(2.4rem, 4vw, 3.2rem)/1 var(--display); letter-spacing: -.02em; }
:root[lang="he"] .price b { letter-spacing: 0; }
.price span { color: var(--ink-2); }
.plan.dark .price span { color: var(--foil-2); }
.plan .sub { margin-top: 6px; color: var(--ink-2); }
.plan.dark .sub { color: var(--foil-2); }
.plan ul { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 12px; align-items: baseline; }
.plan li::before { content: ""; flex: none; width: 14px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-3px); color: var(--accent); }
.plan.dark li::before { color: var(--lav); }
.perks { margin-top: 4px; padding: 18px 20px 6px; border-radius: 18px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(244, 237, 224, .14); }
.perks h4 { font: 700 1.1rem/1.25 var(--display); }
.perks ul { margin: 12px 0 12px; }
.perks li b { color: var(--foil); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.founder { margin-top: 18px; max-width: 1080px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; padding: 20px clamp(20px, 3vw, 36px); border-radius: 22px; background-color: var(--cloth); background-image: var(--weave); color: var(--foil); }
.founder .seal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--foil); color: var(--cloth); font: 800 1.05rem/1 var(--display); box-shadow: inset 0 0 0 3px var(--foil), inset 0 0 0 4.5px var(--cloth); }
.founder .seal small { display: block; font: 600 .62rem/1.1 var(--text); }
.founder h3 { font-size: 1.3rem; }
.founder p { color: var(--foil-2); margin-top: 2px; }
.founder .amt { font: 800 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--display); white-space: nowrap; text-align: end; }
.founder .amt s { font: 600 1rem/1 var(--text); color: var(--foil-3); margin-inline-end: 6px; }
.founder .amt small { display: block; font: 600 .86rem/1.4 var(--text); color: var(--foil-2); }
.pricing .note { margin-top: 16px; font-size: .92rem; color: var(--ink-3); max-width: 62em; }
@media (max-width: 860px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan h3 { font-size: 1.5rem; }
  .plan ul { gap: 7px; margin: 14px 0 18px; }
  .perks { padding: 14px 14px 4px; }
  .founder { grid-template-columns: auto minmax(0, 1fr); }
  .founder .amt { grid-column: 1 / -1; text-align: start; }
  .founder .seal { width: 54px; height: 54px; font-size: .9rem; }
  .plan .btn { width: 100%; }
}

/* ============ FAQ */
.faq { background: #fff; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); gap: clamp(20px, 5vw, 80px); align-items: start; }
.faq-side { position: sticky; top: 96px; }
.faq-side p { color: var(--ink-2); margin-top: 12px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1.5px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 60px; padding: 12px 0; font: 700 1.12rem/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 40em; }
.qa { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 3.4vw, 48px); border-top: 1.5px solid var(--ink); padding-top: 26px; }
.qa dt { font: 700 1.12rem/1.3 var(--display); }
.qa dd { margin: 6px 0 0; color: var(--ink-2); max-width: 34em; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq-side { position: static; } .qa { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 18px; } .qa dt { font-size: 1.04rem; } .qa dd { font-size: .96rem; } }

/* ============ close: the form, and a year of books rising onto the shelf */
.close { padding-top: 96px; padding-bottom: 0; padding-block: clamp(72px, 10vw, 136px) 0; overflow: hidden; --s: clamp(0, (var(--p, 1) - .15) / .45, 1); }
.close .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.close h2 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); line-height: .98; }
.close .lede { margin-top: 18px; }
.shelf-end { display: flex; align-items: flex-end; gap: 4px; margin: clamp(56px, 7vw, 96px) auto 0; padding: 0 16px; width: max-content; max-width: 100%; border-bottom: 12px solid #160c22; height: 190px; }
.shelf-end span { flex: none; border-radius: 2px 2px 0 0; display: flex; align-items: center; justify-content: center; box-shadow: inset 2px 0 0 rgba(255, 255, 255, .1), inset -3px 0 0 rgba(0, 0, 0, .2); overflow: hidden;
  transform: translateY(calc((1 - clamp(0, var(--s) * 13 - var(--k), 1)) * 110%)); }
.shelf-end span i { font: normal 700 .8rem/1 var(--display); letter-spacing: .05em; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
:root[lang="he"] .shelf-end span i { letter-spacing: 0; transform: none; font-weight: 600; font-size: .86rem; }
.shelf-end span.lean { rotate: 9deg; transform-origin: 100% 100%; margin-inline-start: 2px; }
[dir="rtl"] .shelf-end span.lean { rotate: -9deg; transform-origin: 0 100%; }
.shelf-wrap { overflow: hidden; }
@media (max-width: 860px) { .close .wrap { grid-template-columns: minmax(0, 1fr); } .shelf-end { height: 140px; gap: 3px; } .shelf-end span:nth-child(-n+4) { display: none; } .shelf-end span i { font-size: .68rem; } }
footer { border-top: 1px solid rgba(244, 237, 224, .12); padding-top: 28px; padding-bottom: 36px; font-size: .95rem; color: var(--foil-3); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 8px; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--foil-2); text-decoration: none; }
footer nav a:hover { color: var(--foil); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) { footer .wrap { gap: 4px 16px; } }

/* ============ one entrance, for blocks that are not scroll-driven (site.js adds .in) */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .contents.rv { opacity: 1; transform: none; }
.js .contents.rv li { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js .contents.rv.in li { opacity: 1; transform: none; }
.js .contents.rv.in li:nth-child(2) { transition-delay: .05s; } .js .contents.rv.in li:nth-child(3) { transition-delay: .1s; } .js .contents.rv.in li:nth-child(4) { transition-delay: .15s; }
.js .contents.rv.in li:nth-child(5) { transition-delay: .2s; } .js .contents.rv.in li:nth-child(6) { transition-delay: .25s; } .js .contents.rv.in li:nth-child(7) { transition-delay: .3s; }

/* ============ phones: one rhythm, a shorter page */
@media (max-width: 860px) {
  .sec { padding-top: 56px; padding-bottom: 56px; padding-block: 56px; }
  .sec-head { margin-bottom: 24px; }
  .sec-head .lede { margin-top: 10px; font-size: 1rem; }
  h2 { font-size: 1.8rem; }
  h2.sm { font-size: 1.6rem; }
  .kicker { margin-bottom: 10px; }
  .close { padding-top: 64px; padding-block: 64px 0; }
  footer { padding-top: 20px; }
  footer .wrap > p:first-of-type { display: none; }
}

/* ============ reduced motion: every scroll-driven section shows its finished state, nothing is pinned
   but the sample book (which waits open, the visitor's to turn) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .rv, .js .contents.rv li { opacity: 1 !important; transform: none !important; }
  [data-scrub] { --p: 1 !important; }
  .how { height: auto; }
  .how-pin { position: static; height: auto; min-height: 0; padding-block: clamp(64px, 9vw, 128px); }
  .how .steps li { opacity: 1 !important; position: static !important; transform: none !important; }
  .how .steps { min-height: 0; }
  .how .steps li + li { margin-top: 14px; }
  .how-art { height: 520px; }
  .design { height: auto; }
  .design-pin { position: static; height: auto; min-height: 0; padding-block: clamp(64px, 9vw, 128px); }
}
@media (prefers-reduced-motion: reduce) {
  /* the six designs, all at once: covers in a row, their notes below */
  .design-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-show { height: auto; min-height: 0; display: block; }
  .ed-covers { height: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; perspective: none; }
  .ed-covers img, .ed-covers img.on, .ed-covers img.was { position: static; opacity: 1; transform: none; width: 100%; }
  .ed-spreads, .spines { display: none; }
  .design-copy { display: contents; } .ed-show { order: 1; } .ed-txts { order: 2; } .ed-foot { order: 3; }
  .ed-txts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 18px; min-height: 0; margin-top: 0; }
  .ed-txt p:last-child { font-size: .92rem; }
  .ed-txt, .ed-txt.on, .ed-txt.was { position: static; opacity: 1; transform: none; }
  .ed-txt h3 { font-size: 1.3rem; } .ed-txt .kind { font-size: .95rem; }
  .print-stage { height: auto; } .print-pin { position: static; height: auto; min-height: 0; padding-block: clamp(64px, 9vw, 128px) 32px; } .lay-book::after { display: none; }
  .sheen { display: none; }
  .lay figcaption { display: block; } .lay figcaption > span { display: block; opacity: 1 !important; } .lay figcaption > span + span { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) { .how-art { height: 380px; } .ed-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ed-txts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ed-txt p:last-child { display: block; -webkit-line-clamp: unset; } .ed-foot { display: block; } }

/* ============ Hebrew: faces with no true italic take colour and weight, never a synthetic slant */
:root[lang="he"] em, :root[lang="he"] .jitem .for, :root[lang="he"] .ph .bubble { font-style: normal; }
:root[lang="he"] h1 em, :root[lang="he"] h2 em { font-weight: 500; }
:root[lang="he"] .brand { font-family: "Frank Ruhl Libre", serif; font-weight: 800; letter-spacing: 0; }
:root[lang="he"] .kicker, :root[lang="he"] .micro { letter-spacing: 0; }