@font-face { font-family: "Inter"; src: url("/assets/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Cedarville Cursive"; src: url("/assets/fonts/CedarvilleCursive-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("/assets/fonts/tiempos-headline-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("/assets/fonts/tiempos-headline-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("/assets/fonts/tiempos-headline-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("/assets/fonts/tiempos-headline-medium-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("/assets/fonts/tiempos-headline-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("/assets/fonts/tiempos-headline-semibold-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

:root {
  --card-stock: #F7F6F2; --ink: #2B2B28; --library-blue: #294559; --oak: #8B5E3C;
  --brass: #B28A4A; --cloth-tan: #E6E2D8; --red-pencil: #A33B32;
  --paper: #FFFFFF;
  --panel: #FFFFFF;
  --muted: #55554f;
  --shadow-sm: 0 1px 2px rgba(43, 43, 40, .06), 0 4px 16px -6px rgba(43, 43, 40, .14);
  --rule: rgba(41, 69, 89, .25);
  --font-display: "Tiempos Headline", "Iowan Old Style", Palatino, Georgia, serif;
  --font-ui: "Inter", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1120px;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--card-stock); color: var(--ink); font-family: var(--font-ui); font-size: 1.125rem; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
main { overflow-x: clip; }
a { color: var(--library-blue); text-underline-offset: .15em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--library-blue); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .75rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; outline-color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, .card-title { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -.005em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.625rem, 6vw, 4.5rem); line-height: 1.05; }
h1 em { font-style: italic; color: var(--library-blue); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.375rem; margin-bottom: .25em; }
p { margin: 0 0 1em; }
.eyebrow { font-family: var(--font-ui); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .875rem; color: var(--library-blue); margin-bottom: 1rem; }
.lede { font-size: 1.25rem; max-width: 32em; }
.praise { margin: 0 0 1.25rem; text-wrap: balance; }
h1.praise { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 500; font-style: italic; line-height: 1.12; margin-bottom: 1.25rem; }
.praise-2 { font-family: var(--font-display); font-style: italic; font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.25; color: var(--library-blue); margin: 0 0 1.5rem; }
.praise cite { display: block; font-family: var(--font-ui); font-style: normal; font-weight: 500; font-size: 1rem; color: var(--muted); margin-top: .5rem; letter-spacing: 0; }
.praise cite::before { content: "\2014 "; }
.fine { font-size: .9375rem; color: var(--muted); margin: 0 0 .5rem; }

.masthead { padding: 1.25rem 0 .5rem; }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.lockup { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); }
.lockup img { width: auto; height: clamp(44px, 7vw, 60px); flex: none; }
.lockup-word { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 4.2vw, 2.125rem); letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.lockup:hover .lockup-word { color: var(--library-blue); }
.band { background: var(--library-blue); color: #fff; }
.band-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: .55rem; padding-bottom: .55rem; }
.band-row[hidden] { display: none; }
.band-text { margin: 0; font-weight: 300; }
.band-link { color: #fff; font-weight: 300; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.band-link:hover { color: var(--cloth-tan); }
.band-text strong { font-weight: 300; }
.band-right { margin-left: auto; }
.band-actions { display: inline-flex; align-items: center; gap: 1.25rem; margin: 0; }
.welcome-who { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 300; }
.welcome-who svg { flex: none; }
.welcome-name { color: #fff; font-weight: 300; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.welcome-name:hover { color: var(--cloth-tan); }
.band .btn-ghost { min-height: 42px; padding: .45rem 1.1rem; font-size: 1rem; font-weight: 300; border-radius: 999px; background: transparent; color: #fff; border-color: #fff; }
.band .btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.band .signin-out { font-weight: 300; }
.band a:focus-visible, .band button:focus-visible, .cta-band a:focus-visible, .cta-band button:focus-visible { outline-color: #fff; }
.topnav { display: flex; align-items: center; gap: .25rem 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
.topnav a { display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .25rem; font-weight: 500; text-decoration: none; color: var(--ink); }
.topnav a:hover { color: var(--library-blue); text-decoration: underline; }

.cta-row { display: flex; flex-wrap: wrap; gap: .875rem 1rem; margin: 1.75rem 0 .875rem; }
.qr-panel { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--cloth-tan); border-radius: var(--radius); max-width: 32em; }
.qr-panel img { width: 112px; height: 112px; flex: none; }
.qr-panel p { margin: 0; font-size: 1rem; }
.qr-panel[hidden] { display: none; }
.cta-band .qr-panel { max-width: 34rem; margin-left: auto; margin-right: auto; text-align: left; color: var(--ink); }
.cta-band .qr-panel a { color: var(--library-blue); }

.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: .8rem 1.4rem; border-radius: var(--radius); font-weight: 600; font-size: 1.0625rem; text-decoration: none; border: 2px solid transparent; }
.btn-primary { background: var(--library-blue); color: var(--card-stock); }
.btn-primary:hover { background: #1f3646; }
.btn-secondary { background: transparent; color: var(--library-blue); border-color: var(--library-blue); }
.btn-secondary:hover { background: rgba(41, 69, 89, .08); }
.btn-light { background: var(--card-stock); color: var(--library-blue); }
.btn-light:hover { background: #fff; color: var(--library-blue); }
.btn-cook { min-height: 68px; padding: .85rem 1.6rem .85rem 1.3rem; gap: .85rem; box-shadow: 0 10px 22px -8px rgba(41, 69, 89, .6), 0 2px 0 rgba(0, 0, 0, .08); transition: transform .15s ease, box-shadow .15s ease; }
.btn-cook svg { flex: none; }
.btn-cook-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.25; }
.btn-cook strong { font-size: 1.5rem; font-weight: 700; letter-spacing: .005em; }
.btn-cook small { font-size: 1rem; font-weight: 500; opacity: .88; }
.btn-cook:hover, .btn-cook:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(41, 69, 89, .65), 0 3px 0 rgba(0, 0, 0, .08); }
.btn-cook:active { transform: translateY(1px); box-shadow: 0 4px 10px -6px rgba(41, 69, 89, .6); }
.btn-light.btn-cook { box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .55); }
.how-link { font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .btn-cook, .btn-cook:hover, .btn-cook:active { transition: none; transform: none; } }

.hero { padding: 1.5rem 0 3rem; background: var(--paper); }
.stage { position: relative; container-type: inline-size; aspect-ratio: 1080 / 560; }
.hero-left { position: relative; z-index: 1; width: 44cqi; display: flex; flex-direction: column; padding-top: 5.5cqi; }
.hero-copy { display: grid; align-items: start; }
.hero-copy > .step-copy { grid-area: 1 / 1; }
.step-copy[hidden] { display: none; }
.stage.motion .step-copy { display: block; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.stage.motion .step-copy.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.stage.motion .step-copy .praise-2, .stage.motion .step-copy .lede-still { display: none; }
.stage.jump, .stage.jump * { transition: none !important; }
.stage.paused * { animation-play-state: paused !important; }
.scene-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.005em; margin: 0 0 1rem; text-wrap: balance; }
.praise-end { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 500; font-style: italic; line-height: 1.12; margin: 0 0 1.25rem; }
.lede-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.stage-area { position: absolute; inset: 0; pointer-events: none; }
.hero-art { position: absolute; inset: 0; margin: 0; }
.frame { position: absolute; container-type: inline-size; }
.hero-scene { right: 1cqi; top: 50%; width: 44cqi; aspect-ratio: 10 / 11; transform: translateY(-50%); transition: opacity .7s ease; }
.stage[data-frame] .hero-scene { opacity: 0; }
.frame.wide { right: 0; top: 50%; width: 53cqi; transform: translateY(-50%) scale(.97); opacity: 0; transition: opacity .8s ease, transform .8s ease; }
.frame.ipad { width: 56cqi; }
.stage[data-frame="ipad"] .ipad, .stage[data-frame="books"] .books, .stage[data-frame="imports"] .imports, .stage[data-frame="devices"] .devices { opacity: 1; transform: translateY(-50%); }
.hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; margin-top: 1.5rem; }
.hero-foot .cta-row { margin: 0; }
.dots { display: flex; align-items: center; gap: .3rem; margin-left: .25rem; }
.dots[hidden] { display: none; }
.dot, .dot-pause { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; color: var(--library-blue); }
.dot-pause { display: grid; place-items: center; width: 34px; height: 34px; margin-right: .5rem; border: 2px solid var(--library-blue); border-radius: 50%; }
.dot-pause:hover { background: rgba(41, 69, 89, .08); }
.dot-pause .i-play, .dot-pause[aria-pressed="true"] .i-pause { display: none; }
.dot-pause[aria-pressed="true"] .i-play { display: block; }
.dot { display: grid; place-items: center; height: 24px; padding: 0 3px; }
.dot span { position: relative; display: block; width: 9px; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(41, 69, 89, .28); transition: width .3s ease, background .2s ease; }
.dot:hover span { background: rgba(41, 69, 89, .55); }
.dot.on span { width: 28px; }
.dot.on span::after { content: ""; position: absolute; inset: 0; background: var(--library-blue); transform-origin: 0 50%; animation: dot-fill var(--dur, 5s) linear both; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

[data-tap] { position: relative; }
.tap { position: absolute; z-index: 9; left: 50%; top: 50%; width: 7.2cqi; height: 7.2cqi; margin: -3.6cqi 0 0 -3.6cqi; border-radius: 50%; background: rgba(43, 43, 40, .3); border: .35cqi solid rgba(255, 255, 255, .9); box-shadow: 0 .4cqi 1.4cqi rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; }
.hit > .tap { animation: tap .9s ease-out both; }
@keyframes tap { 0% { opacity: 0; transform: scale(1.4); } 22% { opacity: 1; transform: scale(1); } 45% { transform: scale(.72); } 65% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
.mock-menu li.hit, .sheet-list li.hit, .conv li.hit, .tools-grid li.hit { background: rgba(41, 69, 89, .14); }

.hero-scene .orig { position: absolute; left: 0; top: 3%; width: 82%; height: auto; transform: rotate(-6deg); transform-origin: 50% 50%; filter: drop-shadow(0 12px 22px rgba(43, 43, 40, .22)); transition: transform 1.4s ease-in-out, opacity .7s ease-out; }
.stage[data-card="enter"] .orig { opacity: 0; transform: translate(5%, 44%) scale(1.12) rotate(-2deg); }
.stage[data-card="front"] .orig { transform: translate(5%, 38%) scale(1.12) rotate(-2deg); }
.orig-print { font-family: var(--font-display); }
.orig-hand { font-family: "Cedarville Cursive", "Snell Roundhand", "Segoe Script", cursive; }
.phone { position: absolute; right: 0; bottom: 0; width: 54%; background: var(--ink); border-radius: 12cqi; padding: 2.2cqi; box-shadow: 0 26px 60px rgba(43, 43, 40, .3), 0 4px 12px rgba(43, 43, 40, .18); transition: opacity 1.2s ease-out, transform 1.2s ease-out; }
.stage[data-phone="down"] .phone { opacity: 0; transform: translateY(8%); }
.screen { position: relative; background: var(--card-stock); border-radius: 10cqi; overflow: hidden; font-size: 2.35cqi; line-height: 1.4; }
.phone-2 { right: auto; left: 0; bottom: 3%; width: 46%; z-index: 2; opacity: 0; transform: translateY(8%); transition: opacity .9s ease-out, transform .9s ease-out; }
.phone-2 .screen { border-radius: 9cqi; }
.stage.phone2 .phone-2 { opacity: 1; transform: none; }
.thread { position: absolute; inset: 0; z-index: 2; background: #fff; color: #111; opacity: 0; display: flex; flex-direction: column; transition: opacity .6s ease; }
.stage[data-screen="thread"] .thread { opacity: 1; }
.app { transition: transform .7s ease; }
.stage[data-screen="thread"] .app { transform: translateX(100%); }
.thread-head { display: flex; flex-direction: column; align-items: center; gap: .6cqi; padding: 3.2cqi 2cqi 1.6cqi; background: #f6f6f6; border-bottom: 1px solid #e3e3e6; }
.thread-avatar { display: grid; place-items: center; width: 8cqi; height: 8cqi; border-radius: 50%; background: var(--paper); border: 1px solid var(--cloth-tan); }
.thread-avatar img { width: 5.6cqi; height: auto; }
.thread-initial { background: #8e8e93; border: 0; color: #fff; font-size: 3.4cqi; font-weight: 500; }
.thread-name { font-size: 2cqi; font-weight: 500; color: #111; }
.thread-body { display: flex; flex-direction: column; gap: 1.4cqi; padding: 2.6cqi 2.4cqi; }
.msg { max-width: 80%; border-radius: 3.6cqi; padding: 1.6cqi 2.4cqi; font-size: 2.25cqi; line-height: 1.35; }
.sent { align-self: flex-end; background: #0b84ff; color: #fff; }
.got { align-self: flex-start; background: #e9e9eb; color: #111; }
.msg-photo { width: 72%; padding: .9cqi; border-radius: 3cqi; }
.msg-photo svg { display: block; width: 100%; height: auto; border-radius: 2.2cqi; }
.msg-status { align-self: flex-end; margin: -.6cqi 1.2cqi 0 0 !important; font-size: 1.8cqi; color: #8e8e93; }
.msg-typing { display: flex; gap: .9cqi; padding: 2cqi 2.6cqi; }
.msg-typing span { width: 1.7cqi; height: 1.7cqi; border-radius: 50%; background: #8e8e93; }
.msg-link { display: block; color: #0b6bcb; text-decoration: underline; overflow-wrap: anywhere; }
.thread-foot { margin-top: auto; padding: 1.6cqi 2.4cqi 3cqi; }
.thread-foot span { display: block; border: 1px solid #d9d9de; border-radius: 999px; padding: 1cqi 2.6cqi; font-size: 2cqi; color: #a0a0a6; }
.msg-photo, .msg-status, .msg-typing, .msg-reply { opacity: 0; transform: translateY(2cqi); transition: opacity .6s ease-out, transform .6s ease-out; }
.stage.photo .msg-photo, .stage.delivered .msg-status, .stage.typing .msg-typing, .stage.reply .msg-reply { opacity: 1; transform: none; }
.stage.typing .msg-typing span { animation: scene-dot 1.2s ease-in-out infinite; }
.stage.typing .msg-typing span:nth-child(2) { animation-delay: .2s; }
.stage.typing .msg-typing span:nth-child(3) { animation-delay: .4s; }
.stage.phone2 .msg-ask { opacity: 1; transform: none; transition-delay: .9s; }
.msg-ask { opacity: 0; transform: translateY(2cqi); transition: opacity .6s ease-out, transform .6s ease-out; }
.phone-2 .screen { aspect-ratio: 9 / 18.6; }
.thread-2 { opacity: 1; }
.app-2 { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--card-stock); transform: translateX(100%); }
.app-2 .app-body { flex: 1 1 auto; }
.page.shop-2 { opacity: 1; }
.stage.app2 .app-2 { transform: none; }
.appbar { display: flex; align-items: center; background: var(--paper); border-bottom: 1px solid var(--cloth-tan); padding: 3cqi 3cqi 1.8cqi; }
.appbar img { width: 6.6cqi; height: auto; }
.appbar span { font-family: var(--font-display); font-weight: 400; font-size: 3.4cqi; letter-spacing: -.02em; margin-left: 1.4cqi; color: var(--ink); }
.app-body { position: relative; }
.filed { --pitch: 3.29cqi; --drop: .55cqi; position: relative; isolation: isolate; margin: 2.6cqi; background: var(--paper); border: 1px solid var(--cloth-tan); border-top: .7cqi solid var(--red-pencil); border-radius: 2cqi; padding: var(--pitch) 2.8cqi var(--pitch); }
.filed::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--pitch) - 1px), var(--rule) calc(var(--pitch) - 1px) var(--pitch)); background-position: 0 calc(var(--pitch) - .82cqi + var(--drop));
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(5 * var(--pitch)), transparent calc(10 * var(--pitch))); mask-image: linear-gradient(to bottom, #000 0, #000 calc(5 * var(--pitch)), transparent calc(10 * var(--pitch))); }
.filed p, .filed li { margin: 0; line-height: var(--pitch); }
.filed-num { font-size: 1.9cqi; letter-spacing: .1em; text-transform: uppercase; color: var(--library-blue); font-weight: 600; }
.filed-title { font-family: var(--font-display); font-weight: 600; font-size: 3.1cqi; line-height: var(--pitch) !important; }
.filed-meta { color: var(--muted); font-size: 2.1cqi; }
.filed-h { font-family: var(--font-display); font-weight: 600; font-size: 2.6cqi; margin-top: var(--pitch) !important; }
.filed-ing, .filed-steps { list-style: none; margin: 0; padding: 0; }
.filed-ing li { display: flex; gap: 1cqi; align-items: baseline; }
.filed-ing b { font-weight: 600; white-space: nowrap; }
.filed-steps { counter-reset: s; }
.filed-steps li { counter-increment: s; display: grid; grid-template-columns: 2.6cqi 1fr; gap: 1.2cqi; }
.filed-steps li::before { content: counter(s); font-family: var(--font-display); font-weight: 600; color: var(--library-blue); font-size: 2.6cqi; line-height: var(--pitch); }
.filed-cite { color: var(--muted); font-style: italic; font-size: 2.1cqi; }
.filed-srv { display: flex; align-items: center; gap: 1cqi; font-size: 2.1cqi; }
.srv-label { color: var(--muted); margin-right: .4cqi; }
.srv-btn { display: inline-grid; place-items: center; width: 3.6cqi; height: 3.6cqi; border: 1px solid var(--library-blue); border-radius: 50%; color: var(--library-blue); font-weight: 600; font-size: 2.4cqi; line-height: 1; background: #fff; }
.srv-n { min-width: 3cqi; text-align: center; font-weight: 600; font-size: 2.4cqi; }
.filed-scaled { margin-left: auto; font-size: 1.9cqi; font-weight: 600; color: var(--library-blue); opacity: 0; transition: opacity .4s; }
.n8, .n12, .q8, .q12, .x2, .x3 { display: none; }
.stage.s8 .n4, .stage.s8 .q4, .stage.s12 .n4, .stage.s12 .q4, .stage.s12 .x2 { display: none; }
.stage.s8 .n8, .stage.s8 .q8, .stage.s8 .x2, .stage.s12 .n12, .stage.s12 .q12, .stage.s12 .x3 { display: inline; }
.stage.s8 .filed-scaled, .stage.s12 .filed-scaled { opacity: 1; }
.stage.s8 .filed-ing b, .stage.s12 .filed-ing b, .stage.s8 .srv-n, .stage.s12 .srv-n { animation: scene-flash .7s ease-out; }
@keyframes scene-flash { 0% { color: var(--red-pencil); } 100% { color: inherit; } }
.tabs { display: flex; justify-content: space-evenly; text-align: center; font-size: 1.9cqi; font-weight: 500; padding: 1.8cqi 3cqi 3.6cqi; border-top: 1px solid var(--cloth-tan); background: var(--paper); color: var(--ink); white-space: nowrap; }
.tabs .on { color: var(--library-blue); font-weight: 600; }
.mock-actions { float: right; display: inline-flex; align-items: center; gap: .9cqi; margin: -.5cqi 0 .4cqi 1.2cqi; padding: 0 1.7cqi; min-height: 4.2cqi; border: 1px solid var(--library-blue); border-radius: 999px; background: #fff; color: var(--library-blue); font-size: 1.9cqi; font-weight: 600; line-height: 1; }
.mock-actions svg { width: 2.2cqi; height: 2.2cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mock-menu { position: absolute; z-index: 3; right: 2.8cqi; top: calc(3.29cqi + 4.4cqi); width: 31cqi; margin: 0; padding: 1.1cqi; list-style: none; background: #fff; border: 1px solid var(--cloth-tan); border-radius: 2cqi; box-shadow: 0 10px 26px rgba(43, 43, 40, .22); opacity: 0; transform: scale(.94); transform-origin: 100% 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.menu-menu, .menu-list { top: 7cqi; }
.menu-list { width: 36cqi; }
.stage.menu1 .menu-card, .stage.menu2 .menu-menu, .stage.menu3 .menu-list { opacity: 1; transform: none; }
.mock-menu li { display: flex; align-items: center; gap: 1.4cqi; min-height: 4.7cqi; padding: 0 1.3cqi; border-radius: 1.2cqi; font-size: 2.1cqi; font-weight: 500; line-height: 1; color: var(--ink); transition: background .2s; }
.mock-menu svg { flex: none; width: 2.6cqi; height: 2.6cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mock-danger { color: var(--red-pencil); }
.page { position: absolute; inset: 0; z-index: 1; margin: 0 2.6cqi; padding: 2.8cqi; overflow: hidden; background: #fff; border: 1px solid var(--cloth-tan); border-radius: 2cqi; opacity: 0; transition: opacity .5s ease; }
.stage[data-page="menu"] .menu-page, .stage[data-page="shop"] .shop, .stage[data-page="pantry"] .pantry-page { opacity: 1; }
.page p, .page li { margin: 0; }
.panel-title { font-family: var(--font-display); font-weight: 600; font-size: 3.1cqi; line-height: 1.2; margin-bottom: 1.2cqi !important; }
.menu-when { color: var(--muted); font-size: 2cqi; margin-bottom: 1.4cqi !important; }
.course { margin-top: 1.6cqi !important; font-size: 1.7cqi; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; line-height: 2.6cqi; }
.dishes { list-style: none; margin: 0; padding: 0; }
.dishes li { position: relative; display: flex; align-items: center; min-height: 3.9cqi; padding: 0 .6cqi; font-family: var(--font-display); font-size: 2.4cqi; line-height: 1.2; border-radius: 1cqi; transition: transform .7s ease, opacity .5s ease, box-shadow .3s ease, background .3s ease; }
.dessert .d3 { opacity: 0; transform: translateY(1.5cqi); }
.stage.pie-in .dessert .d3 { opacity: 1; transform: none; }
.stage.pie-top .dessert .d3 { transform: translateY(-7.8cqi); z-index: 2; background: #fff; }
.stage.pie-top .dessert .d1, .stage.pie-top .dessert .d2 { transform: translateY(3.9cqi); }
.stage.pie-in .dessert .d3.hit { box-shadow: 0 .8cqi 2.4cqi rgba(43, 43, 40, .22); background: #fff; }
.shop { padding-bottom: 0; }
.shop-scroll > *, .shop-foot { transition: opacity .8s ease; }
.shop-foot { margin: 2cqi -1.2cqi 0; padding: .4cqi 1.2cqi 1.2cqi; border-radius: 1.6cqi; transition: background .8s ease, transform .8s ease; }
.stage.shop-down .shop-scroll > *:not(.shop-foot) { opacity: .3; }
.stage.shop-down .shop-foot { background: var(--card-stock); transform: translateY(-1cqi); animation: foot-blink 1s ease-in-out 3; }
@keyframes foot-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(41, 69, 89, 0); background: var(--card-stock); } 50% { box-shadow: 0 0 0 .7cqi rgba(41, 69, 89, .45); background: #fff; } }
.shop-chip { margin-bottom: 1.2cqi !important; }
.shop-chip span { display: inline-block; padding: .7cqi 1.9cqi; border-radius: 999px; background: var(--library-blue); color: #fff; font-size: 1.9cqi; font-weight: 600; line-height: 1.3; }
.shop-sub { color: var(--muted); font-size: 1.9cqi; margin-bottom: 1.4cqi !important; }
.shop-aisle { margin-top: 1.2cqi !important; font-size: 1.7cqi; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; line-height: 2.6cqi; }
.shop-lines { list-style: none; margin: 0; padding: 0; }
.shop-lines li { display: flex; align-items: center; gap: 1.2cqi; min-height: 3.9cqi; font-size: 2.15cqi; line-height: 1.3; }
.chk { flex: none; display: grid; place-items: center; width: 2.6cqi; height: 2.6cqi; border-radius: 50%; border: 1px solid var(--rule); background: #fff; transition: background .3s, border-color .3s; }
.chk::after { content: ""; width: 1.3cqi; height: .7cqi; border-left: .35cqi solid #fff; border-bottom: .35cqi solid #fff; transform: translateY(-.2cqi) rotate(-45deg); opacity: 0; }
.shop-lines .txt { flex: 1 1 auto; min-width: 0; }
.shop-lines b { font-weight: 600; white-space: nowrap; }
.by { flex: none; color: var(--muted); font-size: 1.8cqi; display: none; }
.info { flex: none; display: grid; place-items: center; width: 3.4cqi; height: 3.4cqi; color: var(--library-blue); }
.info svg { width: 2.6cqi; height: 2.6cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.shop-a, .shop-b, .shop-c { opacity: 1; }
.stage[data-page="shop"] .shop .shop-lines li, .stage[data-page="shop"] .shop .shop-aisle { opacity: 0; transform: translateY(1.5cqi); transition: opacity .5s ease-out, transform .5s ease-out; }
.stage.shop-a .shop .aisle-1, .stage.shop-a .shop .aisle-1 + .shop-lines li, .stage.shop-a .shop .aisle-2, .stage.shop-a .shop .aisle-2 + .shop-lines li,
.stage.shop-b .shop .aisle-3, .stage.shop-b .shop .aisle-3 + .shop-lines li,
.stage.shop-c .shop .aisle-4, .stage.shop-c .shop .aisle-4 + .shop-lines li, .stage.shop-c .shop .shop-foot-h, .stage.shop-c .shop .pantry-lines li { opacity: 1; transform: none; }
.stage.j1 .line-1 .chk, .stage.j2 .line-2 .chk, .stage.j3 .line-3 .chk, .stage.l4 .line-4 .chk, .stage.l5 .line-5 .chk, .stage.l6 .line-6 .chk, .stage.l7 .line-7 .chk { background: var(--library-blue); border-color: var(--library-blue); }
.stage.j1 .line-1 .chk::after, .stage.j2 .line-2 .chk::after, .stage.j3 .line-3 .chk::after, .stage.l4 .line-4 .chk::after, .stage.l5 .line-5 .chk::after, .stage.l6 .line-6 .chk::after, .stage.l7 .line-7 .chk::after { opacity: 1; }
.stage.j1 .line-1 .txt, .stage.j2 .line-2 .txt, .stage.j3 .line-3 .txt, .stage.l4 .line-4 .txt, .stage.l5 .line-5 .txt, .stage.l6 .line-6 .txt, .stage.l7 .line-7 .txt { color: var(--muted); text-decoration: line-through; }
.stage.j1 .line-1 .by, .stage.j2 .line-2 .by, .stage.j3 .line-3 .by, .stage.l4 .line-4 .by, .stage.l5 .line-5 .by, .stage.l6 .line-6 .by, .stage.l7 .line-7 .by { display: inline; }
.v-oz, .stage.oz .v-cup { display: none; }
.stage.oz .v-oz { display: inline; }
.shop-foot-h { margin-top: 0 !important; padding-top: 1.4cqi; border-top: 1px solid var(--cloth-tan); font-family: var(--font-display); font-weight: 600; font-size: 2.4cqi; line-height: 1.2; margin-bottom: .6cqi !important; }
.pantry-lines li { color: var(--muted); }
.pantry-lines .txt { text-decoration: line-through; }
.plus { flex: none; display: grid; place-items: center; width: 2.6cqi; height: 2.6cqi; border-radius: 50%; border: 1px solid var(--rule); color: var(--library-blue); font-size: 2cqi; line-height: 1; }
.all-done { display: none; align-items: center; gap: 1cqi; margin-bottom: 1.4cqi !important; padding: 1.2cqi 1.6cqi; border-radius: 1.4cqi; background: #e8f3ea; color: #1f5c2e; font-size: 2cqi; line-height: 1.3; }
.all-done span { flex: 1 1 auto; }
.all-done b { white-space: nowrap; }
.all-done svg { flex: none; width: 3cqi; height: 3cqi; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stage.alldone .all-done { display: flex; animation: scene-rise .6s ease-out both; }
.stage.alldone .shop-chip { display: none; }
.shop-2 .shop-lines li { min-height: 4.4cqi; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 2.6cqi 2.8cqi 3.6cqi; background: #fff; border-radius: 3cqi 3cqi 0 0; box-shadow: 0 -8px 30px rgba(43, 43, 40, .22); transform: translateY(105%); transition: transform .5s ease; }
.stage.is-sheet-menus .sheet-menus, .stage.is-sheet-share .sheet-share { transform: none; }
.sheet p { margin: 0; }
.sheet-h { font-family: var(--font-display); font-weight: 600; font-size: 2.8cqi; margin-bottom: 1.4cqi !important; }
.sheet-list { list-style: none; margin: 0; padding: 0; }
.sheet-list li { min-height: 5cqi; display: flex; align-items: center; padding: 0 1.4cqi; border-radius: 1.2cqi; font-size: 2.3cqi; font-weight: 500; transition: background .2s; }
.sheet-new { color: var(--library-blue); }
.sheet-cancel { margin-top: 1.6cqi !important; text-align: center; padding: 1.4cqi; border: 1px solid var(--library-blue); border-radius: 999px; color: var(--library-blue); font-weight: 600; font-size: 2.1cqi; }
.share-to { display: flex; gap: 1.2cqi; align-items: baseline; padding: 1cqi 0; border-bottom: 1px solid var(--cloth-tan); font-size: 2.2cqi; }
.share-to span { color: var(--muted); }
.share-msg { margin: 1.6cqi 0 !important; padding: 1.6cqi; border: 1px solid var(--cloth-tan); border-radius: 1.6cqi; font-size: 2.2cqi; line-height: 1.35; }
.share-send { margin-left: auto !important; width: fit-content; padding: 1.2cqi 3.2cqi; border-radius: 999px; background: var(--library-blue); color: #fff; font-weight: 600; font-size: 2.1cqi; }
.scrim { position: absolute; inset: 0; z-index: 4; background: rgba(43, 43, 40, .38); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.dlg { position: absolute; left: 4cqi; right: 4cqi; top: 50%; z-index: 5; padding: 2.8cqi; background: #fff; border-radius: 2.4cqi; box-shadow: 0 14px 40px rgba(43, 43, 40, .3); opacity: 0; transform: translateY(-50%) scale(.95); transition: opacity .35s ease, transform .35s ease; }
.stage.is-dlg .scrim { opacity: 1; }
.stage.is-dlg .dlg { opacity: 1; transform: translateY(-50%); }
.dlg p { margin: 0; }
.dlg-title { font-family: var(--font-display); font-weight: 600; font-size: 2.9cqi; line-height: 1.2; margin-bottom: 1.6cqi !important; }
.amt-btn { display: inline-block; color: var(--library-blue); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .3cqi; font-weight: 500; }
.dlg-facts { list-style: none; margin: 0 0 1.6cqi; padding: 0; }
.dlg-facts li { display: flex; gap: 1cqi; align-items: baseline; min-height: 3.6cqi; font-size: 2.15cqi; line-height: 1.3; }
.dlg-facts b { font-weight: 600; white-space: nowrap; }
.dlg-aisle { color: var(--muted); }
.conv { position: absolute; left: 2.8cqi; top: 8.6cqi; z-index: 2; width: 26cqi; margin: 0; padding: 1cqi; list-style: none; background: #fff; border: 1px solid var(--cloth-tan); border-radius: 1.8cqi; box-shadow: 0 10px 26px rgba(43, 43, 40, .22); opacity: 0; transform: scale(.94); transform-origin: 0 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.stage.is-conv .conv { opacity: 1; transform: none; }
.conv li { display: flex; align-items: center; gap: 1.2cqi; min-height: 4.4cqi; padding: 0 1.3cqi; border-radius: 1.2cqi; font-size: 2.1cqi; transition: background .2s; }
.conv b { font-weight: 600; }
.conv .tag { color: var(--muted); font-size: 1.8cqi; }
.dlg-close { width: fit-content; padding: 1.1cqi 3cqi; border: 1px solid var(--library-blue); border-radius: 999px; color: var(--library-blue); font-weight: 600; font-size: 2.1cqi; }
.paper { position: absolute; z-index: 6; left: 11cqi; bottom: -2cqi; width: 78cqi; height: 100cqi; padding: 8cqi 6cqi; background: #fff; box-shadow: 0 -10px 50px rgba(43, 43, 40, .35), 0 2px 6px rgba(43, 43, 40, .2); text-align: center; color: var(--ink); opacity: 0; transform: translateY(115%); transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .3s linear; }
.stage.is-paper .paper { opacity: 1; transform: none; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .2s linear; }
.paper p { margin: 0; }
.paper-occasion { font-size: 2cqi; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.paper-title { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 8cqi; line-height: 1.1; margin: 1.4cqi 0 1cqi !important; }
.paper-when { font-family: var(--font-display); font-size: 2.6cqi; color: var(--muted); padding-bottom: 2.6cqi; margin-bottom: 2.6cqi !important; position: relative; }
.paper-when::after { content: ""; position: absolute; left: 35%; right: 35%; bottom: 0; height: 2px; background: var(--red-pencil); opacity: .8; }
.paper-course { margin-top: 2.8cqi !important; font-size: 1.9cqi; letter-spacing: .18em; text-transform: uppercase; color: var(--library-blue); font-weight: 600; }
.paper-dish { font-family: var(--font-display); font-size: 3.2cqi; line-height: 1.3; margin-top: .6cqi !important; }
.paper-foot { position: absolute; left: 0; right: 0; bottom: 7cqi; font-family: var(--font-display); font-style: italic; font-size: 2.3cqi; color: var(--muted); }
.shot { position: absolute; z-index: 3; right: 0; top: 4%; width: 60%; margin: 0; padding: 1.4cqi 1.4cqi 4.4cqi; background: #fff; box-shadow: 0 14px 34px rgba(43, 43, 40, .32); transform: rotate(-4deg) translateY(6%); opacity: 0; transition: opacity .7s ease-out, transform .7s ease-out; }
.shot img { display: block; width: 100%; height: auto; }
.stage.is-shot .shot { opacity: 1; transform: rotate(-4deg); }
.stage.shot-sent .shot { opacity: 0; transform: rotate(-4deg) translate(-6%, 22%) scale(.5); }
.shelf-box { margin-top: 1cqi; padding: 1.8cqi 2cqi; border: 1px solid var(--cloth-tan); border-radius: 1.8cqi; }
.shelf-other { margin-top: 1.6cqi; }
.shelf-h { font-family: var(--font-display); font-weight: 600; font-size: 2.5cqi; margin-bottom: .6cqi !important; }
.shelf-ask { color: var(--muted); font-size: 1.9cqi; line-height: 1.3; }
.shelf-photo { display: flex; align-items: center; gap: 1.4cqi; margin-top: 1.2cqi !important; min-height: 9cqi; opacity: 0; transition: opacity .5s ease; }
.shelf-photo img { width: 12cqi; height: auto; border-radius: 1cqi; flex: none; }
.shelf-reading, .shelf-read { display: none; align-items: center; gap: 1cqi; font-size: 2cqi; color: var(--muted); }
.spin { width: 2.4cqi; height: 2.4cqi; border-radius: 50%; border: .4cqi solid var(--cloth-tan); border-top-color: var(--library-blue); animation: scene-spin .9s linear infinite; }
@keyframes scene-spin { to { transform: rotate(360deg); } }
.stage.shot-sent .shelf-photo { opacity: 1; }
.stage.reading .shelf-reading { display: flex; }
.stage.items .shelf-read { display: flex; }
.shelf-items { list-style: none; margin: 1.2cqi 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8cqi; }
.shelf-items li { padding: .5cqi 1.5cqi; border-radius: 999px; background: var(--card-stock); border: 1px solid var(--cloth-tan); font-size: 1.9cqi; font-weight: 500; line-height: 1.3; }
.shelf-items:not(.on) li { opacity: 0; transform: translateY(1.5cqi); transition: opacity .4s ease-out, transform .4s ease-out; }
.stage.items .shelf-items li { opacity: 1; transform: none; }
.stage.items .shelf-items li:nth-child(2) { transition-delay: .12s; } .stage.items .shelf-items li:nth-child(3) { transition-delay: .24s; } .stage.items .shelf-items li:nth-child(4) { transition-delay: .36s; }
.stage.items .shelf-items li:nth-child(5) { transition-delay: .48s; } .stage.items .shelf-items li:nth-child(6) { transition-delay: .6s; } .stage.items .shelf-items li:nth-child(7) { transition-delay: .72s; }
.stage.items .shelf-items li:nth-child(8) { transition-delay: .84s; } .stage.items .shelf-items li:nth-child(9) { transition-delay: .96s; } .stage.items .shelf-items li:nth-child(10) { transition-delay: 1.08s; }
.stage.items .shelf-items li:nth-child(11) { transition-delay: 1.2s; } .stage.items .shelf-items li:nth-child(12) { transition-delay: 1.32s; }
.stage:not(.items) .shelf-ask { display: block; }
.stage.items .shelf-ask { display: none; }

.ipad { aspect-ratio: 4 / 3; background: var(--ink); border-radius: 3.2cqi; padding: 1.6cqi; box-shadow: 0 26px 60px rgba(43, 43, 40, .3), 0 4px 12px rgba(43, 43, 40, .18); }
.ipad .tap { width: 5cqi; height: 5cqi; margin: -2.5cqi 0 0 -2.5cqi; border-width: .25cqi; }
.ipad-screen { position: relative; height: 100%; border-radius: 2cqi; overflow: hidden; background: var(--card-stock); font-size: 1.55cqi; line-height: 1.4; }
.ipad .appbar { padding: 1.6cqi 2.4cqi 1.1cqi; }
.ipad .appbar img { width: 4cqi; }
.ipad .appbar span { font-size: 2.2cqi; margin-left: 1cqi; }
.ipad-body { position: relative; }
.tools { padding: 2.2cqi 2.6cqi; transition: opacity .5s ease; }
.tools-h { font-family: var(--font-display); font-weight: 600; font-size: 2.6cqi; margin: 0 0 1.4cqi; }
.tools-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqi; }
.tools-grid li { padding: 1.6cqi 1.8cqi; background: #fff; border: 1px solid var(--cloth-tan); border-radius: 1.6cqi; box-shadow: var(--shadow-sm); transition: background .2s; }
.tools-grid b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.9cqi; margin-bottom: .4cqi; }
.tools-grid span { display: block; color: var(--muted); font-size: 1.4cqi; line-height: 1.35; }
.cook { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; background: var(--card-stock); }
.stage.cookpage .tools { opacity: 0; }
.stage.cookpage .cook { opacity: 1; }
.cook-tabs { display: flex; gap: .8cqi; padding: 1.4cqi 2.4cqi .8cqi; border-bottom: 1px solid var(--cloth-tan); background: #fff; }
.ctab { display: inline-flex; align-items: center; gap: 1cqi; padding: .7cqi 1.6cqi; border: 1px solid var(--library-blue); border-radius: 999px; color: var(--library-blue); font-weight: 600; font-size: 1.5cqi; line-height: 1; white-space: nowrap; transition: background .3s, color .3s; }
.ctab.on { background: var(--library-blue); color: #fff; }
.stage.tab-pie .ctab-turkey { background: #fff; color: var(--library-blue); }
.stage.tab-pie .ctab-pie { background: var(--library-blue); color: #fff; }
.ctab .clock { display: none; font-weight: 500; font-variant-numeric: tabular-nums; opacity: .85; }
.stage.timer1 .ctab-turkey .clock, .stage.timer2 .ctab-pie .clock { display: inline; }
.ctab-add { align-self: center; margin-left: auto; color: var(--muted); font-size: 1.5cqi; font-weight: 500; }
.cook-layout { display: grid; grid-template-columns: 1fr 24cqi; gap: 2cqi; padding: 2cqi 2.4cqi; }
.cook-main { position: relative; }
.cook-r { background: #fff; border: 1px solid var(--cloth-tan); border-top: .5cqi solid var(--red-pencil); border-radius: 1.6cqi; padding: 1.6cqi 2.2cqi 2cqi; }
.cook-r2 { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.stage.tab-pie .cook-r1 { opacity: 0; }
.stage.tab-pie .cook-r2 { opacity: 1; }
.cook-r p { margin: 0; }
.cook-title { font-family: var(--font-display); font-weight: 600; font-size: 2.6cqi; line-height: 1.2; margin-bottom: .6cqi !important; }
.cook-h { font-family: var(--font-display); font-weight: 600; font-size: 1.8cqi; margin-top: 1.2cqi !important; margin-bottom: .3cqi !important; }
.cook-ing, .cook-steps { list-style: none; margin: 0; padding: 0; }
.cook-ing li, .cook-steps li { position: relative; display: flex; gap: 1cqi; align-items: baseline; min-height: 2.9cqi; padding-left: 3cqi; font-size: 1.65cqi; line-height: 1.35; transition: color .3s; }
.cook-ing li::before, .cook-steps li::before { content: ""; position: absolute; left: 0; top: .35cqi; width: 2cqi; height: 2cqi; border-radius: 50%; border: 1px solid var(--rule); background: #fff; transition: background .3s, border-color .3s; }
.cook-steps { counter-reset: c; }
.cook-steps li { counter-increment: c; display: block; padding-left: 3cqi; }
.cook-steps li::before { content: counter(c); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.3cqi; color: var(--library-blue); }
.cook-ing b { font-weight: 600; white-space: nowrap; }
.stage.c1 .ci1, .stage.c2 .ci2, .stage.st1 .cs1 { color: var(--muted); text-decoration: line-through; }
.stage.c1 .ci1::before, .stage.c2 .ci2::before, .stage.st1 .cs1::before { background: var(--library-blue); border-color: var(--library-blue); color: #fff; }
.tchip { display: inline-block; padding: .1cqi .9cqi; border: 1px solid var(--library-blue); border-radius: 999px; color: var(--library-blue); font-weight: 600; white-space: nowrap; }
.cook-rail { display: flex; flex-direction: column; gap: 1.2cqi; }
.tc { display: flex; flex-direction: column; gap: .3cqi; padding: 1.4cqi 1.8cqi; background: #fff; border: 1px solid var(--cloth-tan); border-radius: 1.6cqi; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(2cqi); transition: opacity .5s ease-out, transform .5s ease-out; }
.stage.timer1 .tc1, .stage.timer2 .tc2 { opacity: 1; transform: none; }
.tc b { font-family: var(--font-display); font-weight: 600; font-size: 1.7cqi; }
.tc-label { color: var(--muted); font-size: 1.35cqi; }
.tc-clock { font-family: var(--font-display); font-weight: 600; font-size: 3.6cqi; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tc-btns { display: flex; gap: .8cqi; margin-top: .6cqi; }
.tc-btns span { padding: .4cqi 1.4cqi; border: 1px solid var(--library-blue); border-radius: 999px; color: var(--library-blue); font-size: 1.3cqi; font-weight: 600; }
@property --s { syntax: "<integer>"; inherits: false; initial-value: 59; }
.clock-s { --s: 59; counter-reset: s var(--s); }
.clock-s::after { content: counter(s, decimal-leading-zero); }
.stage.timer1 .tc1 .clock-s, .stage.timer1 .ctab-turkey .clock-s { animation: scene-count 60s linear both; }
.stage.timer2 .tc2 .clock-s, .stage.timer2 .ctab-pie .clock-s { animation: scene-count 60s linear both; }
@keyframes scene-count { from { --s: 59; } to { --s: 0; } }

.books { display: flex; align-items: center; justify-content: center; gap: 6cqi; }
.book-cover { width: 30cqi; aspect-ratio: 3 / 4; padding: 4cqi 3cqi; background: #F7F3E8; border-radius: .6cqi 2cqi 2cqi .6cqi; box-shadow: inset .9cqi 0 0 rgba(43, 43, 40, .08), 0 20px 50px rgba(43, 43, 40, .3); text-align: center; transform: rotate(-4deg) translateY(3cqi); opacity: 0; transition: transform .9s ease-out, opacity .9s ease-out; }
.stage.is-book-open .book-cover { transform: rotate(-4deg); opacity: 1; }
.book-cover p { margin: 0; }
.book-cover::before { content: ""; display: block; height: 2px; width: 60%; margin: 0 auto 3cqi; background: var(--red-pencil); opacity: .8; }
.book-title { font-family: var(--font-display); font-weight: 600; font-size: 3.6cqi; line-height: 1.15; }
.book-sub { font-family: var(--font-display); font-style: italic; font-size: 1.9cqi; color: var(--muted); margin-top: 1.4cqi !important; }
.book-year { position: absolute; left: 0; right: 0; bottom: 4cqi; font-size: 1.6cqi; letter-spacing: .18em; color: var(--muted); }
.book-cover { position: relative; }
.book-open { display: flex; width: 54cqi; aspect-ratio: 3 / 2; box-shadow: 0 20px 50px rgba(43, 43, 40, .28); transform: translateY(3cqi); opacity: 0; transition: transform .9s ease-out .25s, opacity .9s ease-out .25s; }
.stage.is-book-open .book-open { transform: none; opacity: 1; }
.book-page { flex: 1 1 0; min-width: 0; padding: 3cqi 2.8cqi; background: #fff; font-size: 1.5cqi; line-height: 1.5; }
.book-left { border-right: 1px solid var(--cloth-tan); box-shadow: inset -2cqi 0 2cqi -2cqi rgba(43, 43, 40, .12); }
.book-right { box-shadow: inset 2cqi 0 2cqi -2cqi rgba(43, 43, 40, .12); background-image: linear-gradient(var(--rule) 1px, transparent 1px); background-size: 100% 2.25cqi; background-position: 0 7.2cqi; }
.book-page p { margin: 0; }
.bp-h, .bp-title { font-family: var(--font-display); font-weight: 600; font-size: 2.4cqi; line-height: 1.2; margin-bottom: 1.2cqi !important; }
.bp-toc { list-style: none; margin: 0; padding: 0; }
.bp-toc li { display: flex; justify-content: space-between; gap: 1cqi; padding: .35cqi 0; border-bottom: 1px dotted var(--rule); }
.bp-num { font-size: 1.3cqi; color: var(--muted); letter-spacing: .1em; }
.bp-cite { font-style: italic; color: var(--muted); margin-bottom: .8cqi !important; }
.bp-ing { list-style: none; margin: 0; padding: 0; }
.bp-ing li { line-height: 2.25cqi; }

.devices { aspect-ratio: 10 / 8; }
.dev { position: absolute; container-type: inline-size; background: var(--ink); box-shadow: 0 20px 50px rgba(43, 43, 40, .28), 0 3px 10px rgba(43, 43, 40, .16); opacity: 0; transform: translateY(3cqi); transition: opacity .6s ease-out, transform .6s ease-out; }
.dev-laptop { left: 0; top: 0; width: 62%; padding: 1.5cqi 1.5cqi 1.1cqi; border-radius: 1.5cqi 1.5cqi 0 0; }
.dev-laptop .dev-screen { aspect-ratio: 16 / 10; border-radius: .5cqi; font-size: 3.2cqi; }
.dev-base { position: absolute; left: -4%; right: -4%; top: 100%; height: 2.2cqi; background: linear-gradient(#4b4a46, var(--ink)); border-radius: 0 0 1.2cqi 1.2cqi; }
.dev-tablet { right: 0; top: 10%; width: 36%; padding: 1.2cqi; border-radius: 2.2cqi; transition-delay: .15s; }
.dev-tablet .dev-screen { aspect-ratio: 3 / 4; border-radius: 1.2cqi; font-size: 5.5cqi; }
.dev-phone { left: 43%; bottom: 0; width: 23%; padding: .9cqi; border-radius: 3cqi; transition-delay: .3s; }
.dev-phone .dev-screen { aspect-ratio: 9 / 18.5; border-radius: 2.4cqi; font-size: 8.3cqi; }
.dev-screen { position: relative; overflow: hidden; background: var(--card-stock); line-height: 1.3; }
.dev .appbar { padding: .65em .9em .55em; }
.dev .appbar img { width: 1.9em; }
.dev .appbar span { font-size: 1.1em; margin-left: .4em; }
.mini-head { display: flex; justify-content: space-between; align-items: center; gap: .6em; margin: .8em .9em .6em; }
.mini-h { font-family: var(--font-display); font-weight: 600; font-size: 1.3em; margin: 0; letter-spacing: -.01em; }
.mini-h b { font-family: var(--font-ui); font-weight: 500; font-size: .72em; color: var(--muted); margin-left: .5em; }
.mini-add { display: inline-flex; align-items: center; gap: .25em; padding: .4em .75em .4em .55em; border-radius: 999px; background: var(--library-blue); color: #fff; font-size: .8em; font-weight: 600; white-space: nowrap; }
.mini-add svg { width: 1.15em; height: 1.15em; }
.mini-tiles { list-style: none; margin: 0 .9em; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.mini-tiles li { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; min-height: 4.6em; padding: .8em; background: #fff; border-radius: .9em; box-shadow: 0 1px 2px rgba(43, 43, 40, .06), 0 3px 8px -4px rgba(43, 43, 40, .18); font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
.mini-tiles svg { width: 1.5em; height: 1.5em; flex: none; color: var(--library-blue); }
.dev-tablet .mini-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dev-tablet .mini-add, .dev-phone .mini-add { display: none; }
.dev-phone .mini-h { font-size: 1.15em; }
.dev-phone .mini-tiles { grid-template-columns: minmax(0, 1fr); gap: .5em; }
.dev-phone .mini-tiles li { flex-direction: row; align-items: center; gap: .6em; min-height: 0; padding: .7em .8em; }
.stage.devices-in .dev { opacity: 1; transform: none; }
.imports { display: flex; justify-content: center; }
.import-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqi; width: 100%; }
.import-grid li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqi; aspect-ratio: 1 / .8; padding: 1.4cqi; background: #fff; border: 1px solid var(--cloth-tan); border-radius: 2cqi; box-shadow: var(--shadow-sm); text-align: center; font-size: 1.9cqi; font-weight: 600; line-height: 1.25; opacity: 0; transform: translateY(3cqi); transition: opacity .5s ease-out, transform .5s ease-out; }
.stage.imports-in .import-grid li { opacity: 1; transform: none; }
.import-grid li:nth-child(2) { transition-delay: .08s; } .import-grid li:nth-child(3) { transition-delay: .16s; } .import-grid li:nth-child(4) { transition-delay: .24s; } .import-grid li:nth-child(5) { transition-delay: .32s; }
.import-grid li:nth-child(6) { transition-delay: .4s; } .import-grid li:nth-child(7) { transition-delay: .48s; } .import-grid li:nth-child(8) { transition-delay: .56s; } .import-grid li:nth-child(9) { transition-delay: .64s; } .import-grid li:nth-child(10) { transition-delay: .8s; }
.mono { display: grid; place-items: center; width: 7cqi; height: 7cqi; border-radius: 50%; background: var(--library-blue); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 3.8cqi; }
.import-free { background: var(--library-blue) !important; color: #fff; border-color: var(--library-blue) !important; }
.import-free b { font-family: var(--font-display); font-size: 2.6cqi; }
.import-free span { font-weight: 500; font-size: 1.8cqi; opacity: .9; }

@keyframes scene-rise { from { opacity: 0; transform: translateY(2cqi); } to { opacity: 1; transform: none; } }
@keyframes scene-dot { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-.7cqi); opacity: 1; } }

.how { padding: 3.5rem 0; }
.steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; align-content: start; }
.steps h3 { margin: .5rem 0 .25rem; }
.steps p { margin-bottom: 0; }
.steps p a { white-space: nowrap; }
.num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--library-blue); color: var(--card-stock); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; grid-row: 1 / span 2; }
.red-pencil { color: var(--red-pencil); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red-pencil); text-decoration-thickness: 2px; text-underline-offset: .2em; }

.features { padding: 3.5rem 0; background: var(--paper); }
.feature-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.feature-grid li { position: relative; background: var(--paper); border: 1px solid var(--cloth-tan); border-radius: var(--radius); padding: 1.5rem 3rem 1.25rem 1.5rem; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature-grid li:hover, .feature-grid li:focus-within { transform: scale(1.03); border-color: var(--library-blue); box-shadow: 0 2px 4px rgba(43, 43, 40, .08), 0 14px 32px -10px rgba(41, 69, 89, .35); }
.feature-icon { display: block; width: 28px; height: 28px; color: var(--library-blue); margin-bottom: .75rem; transition: transform .25s ease; }
.feature-grid li:hover .feature-icon, .feature-grid li:focus-within .feature-icon { transform: scale(1.12); }
.feature-grid h3 { font-size: 1.25rem; margin: 0; }
.feature-open { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.feature-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.feature-open:focus { outline: none; }
.feature-open:focus-visible::after { outline: 3px solid var(--library-blue); outline-offset: 2px; }
.feature-grid p { display: none; }
.feature-go { position: absolute; right: 1rem; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; color: var(--library-blue); background: rgba(41, 69, 89, .08); transition: background .25s ease, color .25s ease, transform .25s ease; }
.feature-grid li:hover .feature-go, .feature-grid li:focus-within .feature-go { background: var(--library-blue); color: #fff; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .feature-grid li, .feature-icon, .feature-go { transition: none; } .feature-grid li:hover, .feature-grid li:focus-within, .feature-grid li:hover .feature-icon, .feature-grid li:hover .feature-go { transform: none; } }
html.boxed { overflow: hidden; }
.box { box-sizing: border-box; width: calc(100vw - 2rem); max-width: 1600px; height: fit-content; max-height: calc(100vh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(43, 43, 40, .4); overflow: auto; }
.box::backdrop { background: rgba(43, 43, 40, .6); }
.box[open] { animation: box-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.box[open]::backdrop { animation: box-scrim .4s ease both; }
@keyframes box-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes box-scrim { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .box[open], .box[open]::backdrop { animation: none; } }
.box-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem 1.5rem 0; }
.box-words { flex: 1 1 auto; min-width: 0; }
.box-title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
.box-text { margin: .35rem 0 0; max-width: 60em; font-size: 1.0625rem; color: var(--muted); }
.box-close { flex: none; display: grid; place-items: center; width: 42px; height: 42px; margin: -.25rem -.25rem 0 0; border: 1px solid var(--cloth-tan); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; transition: background .2s ease; }
.box-close:hover { background: var(--card-stock); }
.box-close:focus-visible { outline: 3px solid var(--library-blue); outline-offset: 2px; }
.box-stage { padding: .5rem 1.5rem 1.5rem; overflow: hidden; }
.box-walk { width: min(100%, calc((100vh - 15rem) * 1080 / 560)); margin: 0 auto; }
.box-walk .hero-scene { right: 50%; transform: translate(50%, -50%); }
.box-walk .frame.wide { right: 50%; transform: translate(50%, -50%) scale(.97); }
.box-walk[data-frame="ipad"] .ipad, .box-walk[data-frame="books"] .books, .box-walk[data-frame="imports"] .imports, .box-walk[data-frame="devices"] .devices { transform: translate(50%, -50%); }
.box-dots { margin: 1rem 0 0; }

.who { padding: 3.5rem 0; }
.who-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.who p:last-child { margin-bottom: 0; }
.recipe-card { position: relative; background: var(--paper); border: 1px solid var(--cloth-tan); border-radius: 10px; padding: 2.25rem 2.25rem 1.75rem; box-shadow: 0 8px 24px rgba(43, 43, 40, .08); transform: rotate(1deg);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px); background-size: 100% 2.1rem; background-position: 0 3.4rem; }
.recipe-card::before { content: ""; position: absolute; left: 2.25rem; right: 2.25rem; top: 2.1rem; height: 2px; background: var(--red-pencil); opacity: .8; }
.recipe-card .card-title { font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-style: italic; margin-top: .75rem; }
.recipe-card p:last-child { margin-bottom: 0; }

.faq { padding: 3.5rem 0 4rem; background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 3rem; align-items: start; }
.faq-list details { border-top: 1px solid var(--cloth-tan); }
.faq-list details:last-child { border-bottom: 1px solid var(--cloth-tan); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 1rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--library-blue); color: var(--library-blue); display: inline-grid; place-items: center; font-family: var(--font-ui); font-weight: 500; font-size: 1.25rem; line-height: 1; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0 0 1.25rem; max-width: 40em; }

.pricing { padding: 3.5rem 0 4rem; }
.pricing-lede { max-width: none; }
.plans { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--cloth-tan); border-radius: var(--radius); padding: 1.75rem 1.5rem 1.5rem; box-shadow: var(--shadow-sm); }
.plan-name { font-family: var(--font-ui); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .875rem; color: var(--muted); margin: 0 0 .5rem; }
.plan-price { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 1rem; }
.plan-amount { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -.01em; color: var(--library-blue); }
.plan-per { font-weight: 500; color: var(--muted); }
.plan-lines { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.plan-lines li { position: relative; padding-left: 1.9rem; font-size: 1.0625rem; line-height: 1.4; }
.plan-lines li::before { content: ""; position: absolute; left: 0; top: .17em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--library-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.pricing-devices { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; font-weight: 600; color: var(--library-blue); }
.pricing-devices svg { flex: none; }
.tip { position: relative; display: inline-block; }
.tip-word { appearance: none; border: 0; padding: 0; margin: 0; background: none; font: inherit; color: inherit; cursor: help; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.tip-word svg { width: .85em; height: .85em; margin-left: .15em; vertical-align: -.05em; fill: none; stroke: var(--library-blue); stroke-width: 2; stroke-linecap: round; }
.tip-text { position: absolute; left: 0; top: calc(100% + .5rem); z-index: 5; width: max-content; max-width: min(22em, 80vw); padding: .7rem .9rem; background: var(--ink); color: #fff; font-size: .9375rem; line-height: 1.4; border-radius: 8px; box-shadow: 0 8px 24px rgba(43, 43, 40, .22); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
.tip:hover .tip-text, .tip-word:focus-visible + .tip-text, .tip-word[aria-expanded="true"] + .tip-text { opacity: 1; visibility: visible; transition-delay: 0s; }
.plan-cta { margin-top: auto; justify-content: center; }
.pricing-more { margin: 1.5rem 0 0; max-width: 60em; color: var(--muted); }

.cta-band { background: var(--library-blue); color: var(--card-stock); padding: 4rem 0; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p a { color: #fff; }
.cta-band p { max-width: 36em; margin-left: auto; margin-right: auto; font-size: 1.1875rem; }
.cta-band .btn { margin: .75rem 0 1.5rem; }

.footer { padding: 2.5rem 0 3rem; }
.footer-grid { display: flex; gap: 1.5rem; align-items: flex-start; }
.footer-mark { width: 72px; flex: none; }
.footer p { margin-bottom: .35em; }

@media (max-width: 860px) {
  .hero { padding-top: 1rem; }
  .who-grid, .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
  .stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 1.25rem; }
  .hero-left, .hero-foot { display: contents; }
  .hero-copy { order: 1; align-items: start; }
  .dots { order: 2; margin: 0; }
  .hero-foot .cta-row { order: 3; }
  .stage-area { order: 4; }
  .hero .lede { font-size: 1.0625rem; }
  .hero h1.praise, .praise-end { font-size: 1.875rem; }
  .stage-area { position: relative; bottom: auto; width: min(100%, 440px); margin: 0 auto; aspect-ratio: 10 / 11; }
  .hero-scene { right: 0; width: 100%; }
  .frame.wide, .frame.ipad { width: 100%; }
  .devices { aspect-ratio: 10 / 11; }
  .dev-laptop { width: 100%; }
  .dev-tablet { top: auto; bottom: 0; width: 50%; }
  .dev-tablet .dev-screen { font-size: 6cqi; }
  .dev-phone { left: 0; width: 34%; }
  .dev-phone .dev-screen { font-size: 8.5cqi; }
  .dots { align-self: center; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .plans { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .recipe-card { transform: none; padding: 2rem 1.5rem 1.5rem; }
  .recipe-card::before { left: 1.5rem; right: 1.5rem; }
  .box { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  .box-head { padding: 1rem 1rem 0; }
  .box-stage { padding: .75rem 1rem 1.5rem; }
  .box-walk { width: 100%; }
}
@media (max-width: 600px) {
  .lockup { gap: .5rem; }
  .topnav a:not(.nav-pricing) { display: none; }
  .band-row { gap: .25rem 1rem; }
  .band-text { font-size: .9375rem; white-space: nowrap; }
  .cta-row .btn { width: 100%; justify-content: center; }
  .btn-cook { justify-content: flex-start; }
  .btn-cook strong { font-size: 1.375rem; }
  .feature-grid { gap: .75rem; }
  .feature-grid li { display: flex; align-items: center; gap: .9rem; padding: 1rem 3rem 1rem 1.1rem; }
  .feature-icon { margin-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .masthead, .cta-band, .btn, .hero-art { display: none; } body { background: #fff; } .qr-panel[hidden] { display: flex; border-color: #999; } }