/* Hallmark · shape: Feature Stack · genre: editorial · theme: Studio (by request), re-papered warm with dark bands after the user's reference · job: buy · draw: 511d9d
 * hero: Stage · nav: edge-aligned dark bar · footer: colophon block · imagery: three generated stills (Higgsfield, asked for by the user, built from the owner’s own tablet photo) as the hero ground and the reading desk, the product built in three slots · signature: a six-scene tablet demo in the hero, each tool shown by an orange tap as it opens, reads, marks and turns a page
 * axes: light/roman-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V4 · weakest: R, the page now carries three built screens; each shows a different job (open, write, swipe) and none repeats a state */
/* Hallmark · waive 84 · three built samples in slots, the tablet holds private notes · a capture of the tablet would publish the owner's folder names and handwritten notes on a public page */
/* Hallmark · waive 65 · the prompt pins it, the user asked to follow the reMarkable site · cream paper and a serif are the reference the user named, the orange keeps the project apart from it */
/* Hallmark · dismissed 58 · the page count includes the file names and labels inside three rebuilt tablet screens, the copy itself stays under the budget */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --scr-l: 60.42%; --scr-t: 11.51%; --scr-w: 30.95%; --scr-h: 72.7%;
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-book: "EB Garamond", ui-serif, Georgia, serif;
  --color-accent-2: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink));
  --color-tint: color-mix(in oklab, var(--color-ink) 10%, transparent);
  --color-tint-2: color-mix(in oklab, var(--color-ink) 17%, transparent);
  --color-dark-tint: color-mix(in oklab, var(--color-on-dark) 14%, transparent);
  --color-dark-tint-2: color-mix(in oklab, var(--color-on-dark) 22%, transparent);
  --color-dark-rule: color-mix(in oklab, var(--color-on-dark) 18%, transparent);
  --nav-space: 64px;
  --text-moment: clamp(1.75rem, 1.4vw + 1.1rem, 2.5rem);
}

/* ---------- shared material ---------- */

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-4xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.on-dark { color: var(--color-on-dark); }
.on-dark :focus-visible { outline-color: var(--color-accent); }

.nb { white-space: nowrap; }
.call { display: block; font: 400 var(--text-sm)/1.4 var(--font-code); color: var(--color-muted); overflow-wrap: anywhere; }

/* flat controls: a tinted default, an outlined second, one orange primary */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); background: var(--color-tint); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-tint-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--line { background: transparent; border-color: var(--color-ink); }
.btn--line:hover { background: var(--color-tint); }
.on-dark .btn { background: var(--color-dark-tint); color: var(--color-on-dark); }
.on-dark .btn:hover { background: var(--color-dark-tint-2); }
.on-dark .btn--line { background: transparent; border-color: var(--color-on-dark); }
.on-dark .btn--line:hover { background: var(--color-dark-tint); }
.btn--primary, .on-dark .btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover, .on-dark .btn--primary:hover { background: var(--color-accent-2); }
.btn--s { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
html:not(.js) [data-copy] { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* a set: an ink rule opens it, hairlines part the rows */
.set { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.set > * { border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-md); padding-block: var(--space-md); }
.facts dt { font-weight: 500; }
.facts dd { margin: 0; color: var(--color-ink-2); }

/* the page's one reveal */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* pen strokes that draw in */
.spec { overflow: visible; }
.spec path { --d: 0ms; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spec .d2 { --d: 450ms; } .spec .d3 { --d: 850ms; }
.spec .spec__ink { stroke: var(--color-ink-2); }
.spec .spec__rub { stroke: var(--color-paper); stroke-width: 12; }
.spec__page { fill: var(--color-paper-hi); stroke: var(--color-rule); stroke-width: 1; }
.js .spec path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 700ms var(--ease-in-out), opacity 1ms linear; transition-delay: calc(var(--i, 0) * 50ms + 200ms + var(--d)); }
.js .is-in .spec path, .js .spec.is-in path { stroke-dashoffset: 0; opacity: 1; }

/* ---------- a tablet screen, rebuilt ---------- */

.shot { container-type: inline-size; aspect-ratio: 3 / 4; width: min(100%, 400px); margin: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); }
.shot[data-slot] { background: var(--color-paper-hi); color: var(--color-ink); }
.ui { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 2.6cqw; background: var(--color-paper-hi); font: 400 2.3cqw/1.3 var(--font-body); color: var(--color-ink); }
/* the real file view: its top bar, folder icon and dock are cut from a tablet screenshot */
.ui__bar { display: block; width: calc(100% + 5.2cqw); max-width: none; height: auto; margin: 0 -2.6cqw; }
.ui__head { display: flex; align-items: baseline; gap: 0 1.4cqw; margin-top: 2.4cqw; }
.ui__title { font: 400 4.6cqw/1.1 var(--font-display); letter-spacing: -0.02em; }
.ui__crumb { white-space: nowrap; }
.ui__crumb::before { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin: 0 0.75em 0.1em 0.1em; border-top: 0.14em solid currentColor; border-right: 0.14em solid currentColor; transform: rotate(45deg); }
.ui__sort { margin-left: auto; white-space: nowrap; }
.ui__sort::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin: 0 0.15em 0.28em 0.65em; border-top: 0.14em solid currentColor; border-right: 0.14em solid currentColor; transform: rotate(135deg); }
.ui__folders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3cqw 2cqw; margin: 4cqw 0 0; padding: 0; list-style: none; }
.ui__folders li { position: relative; display: flex; align-items: center; gap: 1.3cqw; min-width: 0; font-weight: 500; white-space: nowrap; }
.ui__fold { flex: none; width: 3.1cqw; height: auto; }
.ui__folders .tap { left: 1.6cqw; }
.ui__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4cqw 2.6cqw; margin: 5cqw 0 0; padding: 0; list-style: none; }
.ui__grid li { display: grid; min-width: 0; }
.ui__grid b { margin-top: 1.4cqw; overflow: hidden; font-size: 2.1cqw; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui__grid small { font-size: 1.9cqw; color: var(--color-muted); }
.thumb { position: relative; display: block; aspect-ratio: 210 / 272; border: 1px solid var(--color-rule); background: var(--color-paper-hi); }
.thumb--board::after { content: ""; position: absolute; inset: 22% 0 28% 0; background: var(--color-board); }
.thumb--note { border-radius: 0 6% 6% 0 / 0 5% 5% 0; }
.thumb--note::before { content: ""; position: absolute; inset: 0 auto 0 5%; border-left: 1px solid var(--color-ink-2); }
.thumb--note::after { content: ""; position: absolute; inset: 14% 16% 46% 16%; background: repeating-linear-gradient(to bottom, var(--color-muted) 0, var(--color-muted) 1px, transparent 1px, transparent 8px); }
.thumb--text::after { content: ""; position: absolute; inset: 12% 12% 34% 12%; background: repeating-linear-gradient(to bottom, var(--color-rule) 0, var(--color-rule) 1px, transparent 1px, transparent 6px); }
.ui__dock { position: absolute; left: 50%; bottom: 4.7%; width: 21cqw; height: auto; translate: -50% 0; }

/* where Claude taps */
.tap { position: absolute; left: 50%; top: 50%; z-index: 2; width: 14cqw; aspect-ratio: 1; margin: -7cqw 0 0 -7cqw; border: 2px solid var(--color-accent); border-radius: 50%; background: color-mix(in oklab, var(--color-accent) 20%, transparent); pointer-events: none; }
.js .tap { animation: tap-in 320ms var(--ease-out) 300ms both; }
@keyframes tap-in { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }

/* ---------- the hero demo: six scenes, each a tool at work ---------- */

.demo { position: absolute; left: 50%; top: 50%; width: max(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; translate: -50% -50%; }
/* wider than 16:9 (the hero caps at 1080px tall, so ≥ ~1920px wide): keep the photo's
   1920 composition instead of zooming it, and fade its sides into the fabric */
@container (min-aspect-ratio: 1.8) {
  /* photo scale = the ultra-wide background's cover scale (2688×1520 photo inside a 3574×1520 canvas), so the weave lines up */
  .demo { width: max(100cqh * 2688 / 1520, min(100cqw, 100cqh * 3574 / 1520) * 2688 / 3574); }
  .demo .device__photo { -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
}
/* a photographed tablet with the live screen laid exactly on its display */
.device { position: absolute; inset: 0; }
.device__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.device picture { display: block; width: 100%; height: 100%; }
.device .shot { overflow: hidden; position: absolute; left: var(--scr-l); top: var(--scr-t); width: var(--scr-w); height: var(--scr-h); aspect-ratio: auto; border-radius: 0; box-shadow: none; mix-blend-mode: multiply; }
.device .shot, .device .ui, .device .page { background: var(--color-screen); color: var(--color-ink); }
.still { position: relative; justify-self: center; width: min(100%, 480px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); --scr-l: 22.24%; --scr-t: 44.75%; --scr-w: 54.34%; --scr-h: 41.29%; }
.still > .device { inset: -68.9% auto auto -11.75%; width: 125%; aspect-ratio: 9 / 16; }
.page { position: absolute; inset: 0; background: var(--color-paper-hi); }
.page svg { width: 100%; height: 100%; }
.page--b { transform: translateX(100%); }
.pg-title { font-family: var(--font-display); font-size: 21px; letter-spacing: -0.02em; fill: var(--color-ink); }
.pg-text { font-family: var(--font-body); font-size: 13px; font-variant-numeric: tabular-nums; fill: var(--color-ink-2); }
.pg-note { font-family: var(--font-body); font-size: 11px; fill: var(--color-ink-2); }
.pg-small { font-family: var(--font-body); font-size: 10px; fill: var(--color-muted); }
.pg-rule, .pg-ico { fill: none; stroke: var(--color-ink-2); stroke-width: 1; }
.pg-rule { stroke: var(--color-rule); }
.pg-hand path { fill: none; stroke: var(--color-ink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.pg-hl { fill: var(--color-highlight); transform-box: fill-box; transform-origin: left; }
.pg-mark { fill: none; stroke: var(--color-accent); stroke-width: 1.8; stroke-linecap: round; }
/* ---------- hero demo: one 13 s timeline, end state = start state ---------- */
/* without JS or with reduced motion it rests on the highlighted page (no animation below applies) */
.demo .ui--files { z-index: 3; opacity: 0; }
.demo .tap, .js .demo .tap { opacity: 0; }
.demo .shot > .tap { width: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; }
.ui--b .ui__crumb:first-of-type { position: relative; }
.demo :is(.ui--files, .page, .tap, .scan, .fswipe__finger) { will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
  .js .demo .pg-mark { stroke-dasharray: 1; }
  .js .demo :is(.ui--a, .ui--b, .page--a, .page--b, .scan, .pg-mark, .pg-hl, .fswipe__finger, .fswipe__trail, .tap), .js .hero .demo__steps li { animation-duration: 13000ms; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: both; animation-delay: 0s; }
  .js .demo .ui--a { animation-name: d-ui-a; }
  .js .demo .ui--b { animation-name: d-ui-b; }
  .js .demo .page--a { animation-name: d-page-a; }
  .js .demo .page--b { animation-name: d-page-b; }
  .js .demo .scan { animation-name: d-scan; }
  .js .demo .pg-mark { animation-name: d-mark; }
  .js .demo .pg-hl { animation-name: d-hl; }
  .js .demo .fswipe__finger { animation-name: d-finger; }
  .js .demo .fswipe__trail { animation-name: d-trail; }
  .js .demo .tap[data-for="0"] { animation-name: d-tap-0; }
  .js .demo .tap[data-for="1"] { animation-name: d-tap-1; }
  .js .demo .tap[data-for="3"] { animation-name: d-tap-3; }
  .js .demo .tap[data-for="4"] { animation-name: d-tap-4; }
  .js .demo .tap[data-for="6"] { animation-name: d-tap-6; }
  .js .demo .tap[data-for="7"] { animation-name: d-tap-7; }
  .js .hero .demo__steps li[data-for="0"] { animation-name: d-cap-0; }
  .js .hero .demo__steps li[data-for="1"] { animation-name: d-cap-1; }
  .js .hero .demo__steps li[data-for="2"] { animation-name: d-cap-2; }
  .js .hero .demo__steps li[data-for="3"] { animation-name: d-cap-3; }
  .js .hero .demo__steps li[data-for="4"] { animation-name: d-cap-4; }
  .js .hero .demo__steps li[data-for="5"] { animation-name: d-cap-5; }
  .js .hero .demo__steps li[data-for="6"] { animation-name: d-cap-6; }
  .js .hero .demo__steps li[data-for="7"] { animation-name: d-cap-7; }
  .js .hero.is-held :is(.demo *, .demo__steps li) { animation-play-state: paused; }
}
@keyframes d-ui-a {
  0% { opacity: 1; }
  10.769% { opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  13.077% { opacity: 0; }
  97.692% { opacity: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { opacity: 1; }
}
@keyframes d-ui-b {
  0% { opacity: 0; animation-timing-function: step-end; }
  10.769% { opacity: 1; }
  23.846% { opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  26.154% { opacity: 0; }
  87.692% { opacity: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  90% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes d-page-a {
  0% { transform: none; }
  68.462% { transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  72.308% { transform: translateX(-100%); animation-timing-function: step-end; }
  90.769% { transform: none; }
  100% { transform: none; }
}
@keyframes d-page-b {
  0% { transform: translateX(100%); }
  68.462% { transform: translateX(100%); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  72.308% { transform: none; animation-timing-function: step-end; }
  90.769% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@keyframes d-scan {
  0% { opacity: 0; transform: translateY(0); animation-timing-function: step-end; }
  27.692% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  33.846% { opacity: 1; transform: translateY(100%); }
  35% { opacity: 0; transform: translateY(100%); animation-timing-function: step-end; }
  35.385% { opacity: 0; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes d-mark {
  0% { opacity: 0; stroke-dashoffset: 1; animation-timing-function: step-end; }
  41.538% { opacity: 1; stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  45.385% { opacity: 1; stroke-dashoffset: 0; animation-timing-function: step-end; }
  90.769% { opacity: 0; stroke-dashoffset: 1; }
  100% { opacity: 0; stroke-dashoffset: 1; }
}
@keyframes d-hl {
  0% { transform: scaleX(0); }
  54.615% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  57.692% { transform: none; animation-timing-function: step-end; }
  90.769% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}
@keyframes d-finger {
  0% { opacity: 0; transform: none; animation-timing-function: step-end; }
  65.385% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  70.769% { opacity: 1; transform: translateX(-170px); }
  72.692% { opacity: 0; transform: translateX(-170px); animation-timing-function: step-end; }
  73.077% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes d-trail {
  0% { opacity: 0; stroke-dashoffset: 1; animation-timing-function: step-end; }
  65.385% { opacity: 1; stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  70.769% { opacity: 1; stroke-dashoffset: 0; }
  72.692% { opacity: 0; stroke-dashoffset: 0; animation-timing-function: step-end; }
  73.077% { opacity: 0; stroke-dashoffset: 1; }
  100% { opacity: 0; stroke-dashoffset: 1; }
}
@keyframes d-tap-0 {
  0% { opacity: 0; transform: scale(2.2); animation-timing-function: step-end; }
  1.923% { opacity: 0; transform: scale(2.2); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  4.385% { opacity: 1; transform: none; }
  9.615% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  11% { opacity: 0; transform: none; animation-timing-function: step-end; }
  11.154% { opacity: 0; transform: scale(2.2); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes d-tap-1 {
  0% { opacity: 0; transform: scale(2.2); animation-timing-function: step-end; }
  15% { opacity: 0; transform: scale(2.2); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  17.462% { opacity: 1; transform: none; }
  22.692% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  24.077% { opacity: 0; transform: none; animation-timing-function: step-end; }
  24.231% { opacity: 0; transform: scale(2.2); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes d-tap-3 {
  0% { opacity: 0; transform: scale(2.2); animation-timing-function: step-end; }
  38.077% { opacity: 0; transform: scale(2.2); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  40.538% { opacity: 1; transform: none; }
  43.462% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  44.846% { opacity: 0; transform: none; animation-timing-function: step-end; }
  45% { opacity: 0; transform: scale(2.2); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes d-tap-4 {
  0% { opacity: 0; transform: scale(2.2); animation-timing-function: step-end; }
  51.154% { opacity: 0; transform: scale(2.2); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  53.615% { opacity: 1; transform: none; }
  56.538% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  57.923% { opacity: 0; transform: none; animation-timing-function: step-end; }
  58.077% { opacity: 0; transform: scale(2.2); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes d-tap-6 {
  0% { opacity: 0; transform: scale(2.2); animation-timing-function: step-end; }
  79.231% { opacity: 0; transform: scale(2.2); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  81.692% { opacity: 1; transform: none; }
  84.615% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  86% { opacity: 0; transform: none; animation-timing-function: step-end; }
  86.154% { opacity: 0; transform: scale(2.2); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes d-tap-7 {
  0% { opacity: 0; transform: scale(2.2); animation-timing-function: step-end; }
  91.154% { opacity: 0; transform: scale(2.2); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  93.615% { opacity: 1; transform: none; }
  96.538% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  97.923% { opacity: 0; transform: none; animation-timing-function: step-end; }
  98.077% { opacity: 0; transform: scale(2.2); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes d-cap-0 {
  0% { opacity: 1; }
  11.923% { opacity: 1; }
  13.154% { opacity: 0; }
  98.769% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes d-cap-1 {
  0% { opacity: 0; }
  11.923% { opacity: 0; }
  13.154% { opacity: 1; }
  25% { opacity: 1; }
  26.231% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-cap-2 {
  0% { opacity: 0; }
  25% { opacity: 0; }
  26.231% { opacity: 1; }
  37.308% { opacity: 1; }
  38.538% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-cap-3 {
  0% { opacity: 0; }
  37.308% { opacity: 0; }
  38.538% { opacity: 1; }
  50.385% { opacity: 1; }
  51.615% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-cap-4 {
  0% { opacity: 0; }
  50.385% { opacity: 0; }
  51.615% { opacity: 1; }
  63.462% { opacity: 1; }
  64.692% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-cap-5 {
  0% { opacity: 0; }
  63.462% { opacity: 0; }
  64.692% { opacity: 1; }
  78.846% { opacity: 1; }
  80.077% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-cap-6 {
  0% { opacity: 0; }
  78.846% { opacity: 0; }
  80.077% { opacity: 1; }
  88.462% { opacity: 1; }
  89.692% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-cap-7 {
  0% { opacity: 0; }
  88.462% { opacity: 0; }
  89.692% { opacity: 1; }
  98.769% { opacity: 1; }
  100% { opacity: 0; }
}


.demo__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: 30rem; margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-dark-rule); }
.demo__steps { display: grid; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.demo__steps li { display: grid; gap: var(--space-3xs); color: var(--color-on-dark); }
.demo__steps b { font-weight: 500; }
.demo__steps code { font: 400 var(--text-sm)/1.4 var(--font-code); color: var(--color-on-dark-2); }
.demo__bar .btn { min-height: 44px; }
.js .demo__steps li { grid-area: 1 / 1; opacity: 0; }
.js .demo__steps li[data-for="4"] { opacity: 1; }
html:not(.js) [data-demo-toggle] { display: none; }
html:not(.js) .demo__steps li:not([data-for="4"]) { display: none; }

/* ---------- nav: an edge-aligned dark bar ---------- */

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-fabric); color: var(--color-on-dark); border-bottom: var(--rule-hair) solid var(--color-dark-rule); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-space); }
.switch { position: relative; display: inline-flex; padding: var(--space-2xs); border: var(--rule-hair) solid var(--color-dark-rule); border-radius: var(--radius-pill); background: var(--color-dark-tint); }
.switch a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); font: 400 var(--text-lg)/1 var(--font-display); letter-spacing: -0.01em; color: var(--color-on-dark-2); white-space: nowrap; text-decoration: none; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.switch a:hover { color: var(--color-on-dark); background: var(--color-dark-tint); }
.switch a[aria-current="page"] { color: var(--color-ink); background: var(--color-on-dark); view-transition-name: switch-on; }
.switch a[aria-current="page"]:hover { background: var(--color-on-dark); }
@view-transition { navigation: auto; }
::view-transition-group(switch-on) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
.nav__links { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.nav__links a, .footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 400; color: var(--color-on-dark-2); white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.nav__links a:hover, .footer__links a:hover { color: var(--color-on-dark); text-decoration-color: var(--color-accent); }

/* ---------- hero: Stage, on the dark ---------- */

.hero { position: relative; container-type: size; width: 100%; aspect-ratio: 16 / 9; min-height: 560px; max-height: 1080px; overflow: hidden; background: var(--color-fabric); color: var(--color-on-dark); }
/* very wide screens: the same photo, outpainted to ~2.35:1. Its centre is pixel-identical to the
   16:9 photo, so the demo (with its screen overlay) sits on top and only its soft edges blend in. */
@media (min-width: 1941px) {
  .hero { background: var(--color-fabric) url("assets/hero-ultra.jpg") center / cover no-repeat; }
  .hero--view { background-image: url("assets/view-ultra.jpg"); }
}
/* wider than the outpainted canvas (hero is 1080px tall here, canvas 2539×1080): don't zoom further —
   the photo would crop the tablet. Keep it at full height and let its ends run out into the cloth's colour. */
@media (min-width: 2555px) {
  .hero { --edge-l: #263723; --edge-r: #1b2c1b; background: linear-gradient(to right, var(--edge-l), transparent 10%, transparent 90%, var(--edge-r)) center / 2539px 1080px no-repeat, url("assets/hero-ultra.jpg") center / 2539px 1080px no-repeat, linear-gradient(to right, var(--edge-l) 50%, var(--edge-r) 50%); }
  .hero--view { --edge-l: #556d4a; --edge-r: #435b3e; background-image: linear-gradient(to right, var(--edge-l), transparent 10%, transparent 90%, var(--edge-r)), url("assets/view-ultra.jpg"), linear-gradient(to right, var(--edge-l) 50%, var(--edge-r) 50%); }
}
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; height: 100%; }
.hero h1 { max-width: none; font-size: var(--text-display-s); line-height: 1.04; }
.hero .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero .line > span { display: block; }
.hero .lead { max-width: 40ch; margin-top: var(--space-lg); color: var(--color-on-dark); }
.hero .actions { margin-top: var(--space-xl); }


.js .hero .line > span { animation: line-up 700ms var(--ease-out) both; }
.js .hero .line:nth-child(2) > span { animation-delay: 90ms; }
.js .hero .rise { animation: rise 560ms var(--ease-out) 240ms both; }
.js .demo .shot { animation: rise 700ms var(--ease-out) 400ms both; }
@keyframes line-up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- the free companion ---------- */

.companion { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.companion__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.companion__fig { display: grid; justify-items: center; }
.companion__fig .mini { width: min(100%, 300px); margin: 0; }
.companion__text { display: grid; gap: var(--space-lg); }
.companion__text .lead { max-width: 42ch; color: var(--color-ink-2); }
.companion__text .actions { margin-top: var(--space-xs); }
.mini { position: relative; width: min(100%, 250px); aspect-ratio: 3 / 4; margin-bottom: var(--space-md); overflow: hidden; background: var(--color-paper-hi); border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); }
.mini svg { width: 100%; height: 100%; }
.mini .pg-title { font-size: 26px; }
.mini__t { font-size: 17px; }
.mini .pg-hand path { stroke-width: 7; }
.mini__marks path { stroke-width: 2.2; }
.tile--view .pg-hl { display: none; }
.js .tile--view.is-in .scan { animation: scan 1300ms var(--ease-in-out) 500ms 1 both; }

/* ---------- use cases: a prompt, and what happens on the page ---------- */

.uses { padding-block: var(--section-gap-s) var(--section-gap); }
.read, .tutor { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.read__photo { position: relative; aspect-ratio: 1744 / 2336; overflow: hidden; border-radius: var(--radius-card); --scr-l: 17.66%; --scr-t: 17%; --scr-w: 59.35%; --scr-h: 58.78%; }
.read__photo .device__photo { height: 100%; }

/* the e-book view, rebuilt: Pope's Iliad as the tablet sets it */
.ep { overflow: hidden; }
.ep__page { position: absolute; inset: 0 9.5cqw 0 0; padding: 10cqw 3cqw 0 8cqw; font: 400 3.4cqw/1.36 var(--font-book); color: var(--color-ink); }
.ep__page p { margin: 0; text-wrap: pretty; }
.ep__book { font-size: 5.6cqw; text-align: center; }
.ep__page .ep__arg { margin-top: 5cqw; font-size: 3.8cqw; text-align: center; }
.ep__page .ep__h { margin-top: 3cqw; font-size: 3.3cqw; text-align: center; }
.ep__page .ep__p { margin-top: 3cqw; text-align: justify; text-indent: 1.6em; hyphens: auto; }
.ep mark { color: inherit; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 60% / 100% 74%; }
.ep .hl-a { --hl: var(--color-hl-green); }
.ep .hl-g { --hl: var(--color-hl-yellow); }
.ep__tools, .ep__close { position: absolute; top: 0; z-index: 1; height: auto; }
.ep__tools { right: 0; width: 8.333%; height: 100%; }
.ep__close { left: 0; width: 6.667%; }
.ep__dot { position: absolute; left: 93.58%; top: 10.75%; z-index: 2; width: 1.75%; aspect-ratio: 1; border-radius: 50%; background: var(--color-hl-yellow); transition: background-color var(--dur-short) var(--ease-out); }

.read__chat { display: grid; gap: var(--space-md); align-content: start; }
.read__chat h3 { font-size: var(--text-moment); line-height: 1.1; }
.read__chat .btn { justify-self: start; }
html:not(.js) [data-read-replay] { display: none; }

/* a prompt, as typed into Claude */
.prompt { display: grid; gap: var(--space-2xs); margin-block: var(--space-sm) 0; padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink); }
.prompt__who { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.prompt--s { margin: 0; padding: var(--space-sm) var(--space-md); font-size: var(--text-md); }
:is(.prompt__text, .msg__text) .c { opacity: 0; }
:is(.prompt__text, .msg__text) .c.on { opacity: 1; }
.caret { position: relative; display: inline-block; width: 0; }
.caret::after { content: ""; position: absolute; left: 1px; top: -0.95em; width: 2px; height: 1.15em; background: var(--color-accent); animation: blink 900ms steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.log { display: grid; margin: var(--space-sm) 0 var(--space-xs); padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.log li { position: relative; display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.log b { font-weight: 500; color: var(--color-ink); }
.log__say { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-sm); align-items: baseline; color: var(--color-ink); }
.swatch { display: inline-block; width: 0.9em; height: 0.9em; margin-left: var(--space-3xs); vertical-align: -0.1em; border-radius: 50%; }
.swatch--a { background: var(--color-hl-green); }
.swatch--g { background: var(--color-hl-yellow); }

/* the run, only with the script: 0 typing, 1 read, 2 answer, 3 green, 4 yellow, 5 done */
.js .read .log li { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .read:is([data-at="1"], [data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"]) li[data-at="1"],
.js .read:is([data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"]) li[data-at="2"],
.js .read:is([data-at="3"], [data-at="4"], [data-at="5"]) li[data-at="3"],
.js .read:is([data-at="4"], [data-at="5"]) li[data-at="4"],
.js .read[data-at="5"] li[data-at="5"] { opacity: 1; transform: none; }
.log li::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
.js .read[data-at="1"] li[data-at="1"]::after, .js .read[data-at="3"] li[data-at="3"]::after, .js .read[data-at="4"] li[data-at="4"]::after { transform: none; transition: transform 900ms var(--ease-in-out); }
.js .read mark { background-size: 0% 74%; }
.js .read[data-at="3"] .hl-a, .js .read[data-at="4"] .hl-g { transition: background-size var(--t) var(--ease-in-out) var(--w); }
.js .read:is([data-at="3"], [data-at="4"], [data-at="5"]) .hl-a, .js .read:is([data-at="4"], [data-at="5"]) .hl-g { background-size: 100% 74%; }
.js .read:not([data-at="4"], [data-at="5"]) .ep__dot { background: var(--color-hl-green); }
.js .read[data-at="1"] .scan { animation: scan 1000ms var(--ease-in-out) 1 both; }

/* three smaller cases */
.cases { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); gap: var(--gap-columns); margin: var(--section-gap-s) 0 0; padding: 0; list-style: none; }
.case { display: grid; align-content: start; gap: var(--space-md); padding: var(--space-xl) var(--space-lg) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); }
.case .mini { justify-self: center; width: min(100%, 230px); margin-bottom: var(--space-xs); }
.case h3 { font-size: var(--text-title); line-height: 1.2; }
.case .prompt { background: var(--color-paper-hi); }
.case__ink path { stroke-width: 2.2; }
.case__ink .case__curve { stroke-width: 2.6; }
.case__box, .case__thumb { fill: none; stroke: var(--color-rule); stroke-width: 1; }
.case__thumb { stroke: var(--color-ink-2); }
.case__tap { transform-box: fill-box; transform-origin: center; fill: color-mix(in oklab, var(--color-accent) 20%, transparent); stroke: var(--color-accent); stroke-width: 2; }
.case__files { opacity: 0; }
.case--nav[data-s="1"] .case__files { opacity: 1; }
.case--nav[data-s="1"] .case__doc { opacity: 0; }
.case--nav .case__files, .case--nav .case__doc { transition: opacity var(--dur-short) var(--ease-out); }
/* one swipe for every page turn: a finger with a trail, right to left */
.fswipe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.fswipe__trail { fill: none; stroke: color-mix(in oklab, var(--color-accent) 55%, transparent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.fswipe__finger { fill: color-mix(in oklab, var(--color-accent) 20%, transparent); stroke: var(--color-accent); stroke-width: 2; opacity: 0; }
.js :is(.navshot[data-step="3"], .case--nav[data-s="3"]) .fswipe__trail { animation: fswipe-trail 800ms var(--ease-in-out) both; }
.js :is(.navshot[data-step="3"], .case--nav[data-s="3"]) .fswipe__finger { animation: fswipe-finger 800ms var(--ease-in-out) both; }
@keyframes fswipe-trail { 0% { opacity: 1; stroke-dashoffset: 1; } 70% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes fswipe-finger { 0% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translateX(-170px); } 100% { opacity: 0; transform: translateX(-170px); } }
/* Find the page: 0 files, 1 tap, 2 Lecture 5 opens on page 5, 3 swipe left, 4 page 6 */
.case__p1 { transform: translateX(-300px); }
.case__p2 { transform: none; }
.js .case--nav:is([data-s="0"], [data-s="1"], [data-s="2"], [data-s="3"]) .case__p1 { transform: none; }
.js .case--nav:is([data-s="0"], [data-s="1"], [data-s="2"], [data-s="3"]) .case__p2 { transform: translateX(300px); }
.js .case--nav[data-s="4"] :is(.case__p1, .case__p2) { transition: transform var(--dur-long) var(--ease-in-out); }
.js .case--nav[data-s="3"] .js .case--nav[data-s="3"] 
/* each case replays while in view: 0 reset, 1 first marks, 2 the rest */
.js .case .spec path { stroke-dashoffset: 1; opacity: 0; transition: none; }
.js .case[data-s="1"] .s1, .js .case[data-s="2"] :is(.s1, .s2) { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 640ms var(--ease-in-out) var(--d), opacity 1ms linear var(--d); }
.js .case[data-s="2"] .case__curve { transition-duration: 1100ms, 1ms; }
.js .case[data-s="1"] .scan { animation: scan 900ms var(--ease-in-out) 1 both; }
.js .case--nav[data-s="0"] .case__doc { opacity: 0; }
.js .case--nav[data-s="0"] .case__files { opacity: 1; }
.js .case--nav .case__tap { opacity: 0; }
.js .case--nav[data-s="1"] .case__tap { animation: tap-in 320ms var(--ease-out) 250ms both; }

/* ---------- the rm-view page ---------- */

.page-view { --color-fabric: var(--color-fabric-light); }
.hero__call { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-dark); }
.hero__call .call { display: inline; color: var(--color-on-dark); }
.vshot .diagram { width: 100%; height: 100%; }
.vshot__marks path { stroke-width: 9; }
.js .vshot .hand path { animation: ink 380ms var(--ease-in-out) both; animation-delay: calc(700ms + var(--i) * 160ms); }
.js .vshot .spec path { animation: ink 600ms var(--ease-in-out) both; animation-delay: calc(2700ms + var(--d)); }
.js .vshot .scan { animation: scan-loop 3600ms var(--ease-in-out) 3200ms infinite both; }
/* RM View use case: a homework check in the chat */
.thread { display: grid; gap: var(--space-sm); margin: var(--space-xs) 0; padding: 0; list-style: none; }
.msg { display: grid; gap: var(--space-2xs); }
.msg--you { justify-self: start; padding: var(--space-sm) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); font-size: var(--text-lead); color: var(--color-ink); }
.msg--claude { padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); border-left: 2px solid var(--color-accent); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink); }
.msg--tool { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-sm); align-items: baseline; padding-left: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.msg--tool b { font-weight: 500; color: var(--color-ink); }
.msg--tool .call { overflow-wrap: normal; }
.msg--note { padding-left: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.ws__t { font-size: 15px; }
.ws__rub { fill: none; stroke: black; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ws__eraser { opacity: 0; }
.ws__tap { position: absolute; z-index: 3; width: 6cqw; aspect-ratio: 1; border: 2px solid var(--color-accent); border-radius: 50%; background: color-mix(in oklab, var(--color-accent) 18%, transparent); translate: -50% -50%; opacity: 0; pointer-events: none; }
.ws__tap--er { left: 96.5%; top: 23.1%; }
.ws__tap--pen { left: 96.5%; top: 7.75%; }
.js .tutor .msg { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .tutor .msg.is-on { opacity: 1; transform: none; }
.js .tutor .ws__fix path, .js .tutor .ws__hand path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.js .tutor.is-written .ws__hand path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 560ms var(--ease-in-out) var(--w), opacity 1ms linear var(--w); }
.js .tutor:is([data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"]) .ws__fix path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 360ms var(--ease-in-out) var(--w), opacity 1ms linear var(--w); }
/* at 3 you fix it: tap eraser, rub out the 8, tap pen, write 10 */
.js .tutor .ws__rub { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .tutor:is([data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"]) .ws__rub { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms linear 750ms; }
.js .tutor[data-at="3"] .ws__eraser { animation: ws-eraser 2000ms linear both; }
.js .tutor[data-at="3"] .ws__pen { animation: ws-pen 2000ms linear both; }
.js .tutor[data-at="3"] .ws__tap--er { animation: ws-tap 520ms var(--ease-out) 150ms both; }
.js .tutor[data-at="3"] .ws__tap--pen { animation: ws-tap 520ms var(--ease-out) 1800ms both; }
@keyframes ws-eraser { 0%, 14.9% { opacity: 0; } 15%, 89.9% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes ws-pen { 0%, 14.9% { opacity: 1; } 15%, 89.9% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes ws-tap { from { opacity: 0; scale: 0.6; } 30% { opacity: 1; } to { opacity: 0; scale: 1.3; } }
.js .tutor:is([data-at="1"], [data-at="5"]) .scan { animation: scan 1000ms var(--ease-in-out) 1 both; }
html:not(.js) [data-tutor-replay] { display: none; }
.js .companion.companion .scan { animation: scan-loop 3600ms var(--ease-in-out) 900ms infinite both; }
@keyframes ink { from { stroke-dashoffset: 1; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes scan-loop { 0% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateY(100%); } 52%, 100% { opacity: 0; transform: translateY(100%); } }

.upsell { padding-block: var(--section-gap-s); background: var(--color-ink); }
.upsell__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; }
.upsell__text { display: grid; gap: var(--space-lg); justify-items: start; }
.upsell .lead { color: var(--color-on-dark-2); }

/* ---------- the sheet: pinned beside three moments ---------- */

.stage { padding-bottom: var(--section-gap-s); }
.stage__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.stage__pin { position: sticky; top: calc(var(--nav-space) + var(--space-lg)); }
.stage__text { padding-bottom: var(--space-4xl); }

.sheet-fig { width: fit-content; margin: 0; }
.sheet-wrap { height: clamp(360px, calc(100dvh - 176px), 720px); aspect-ratio: 3 / 4; box-shadow: var(--shadow-sheet); border-radius: var(--radius-card); }
.sheet[data-slot] { width: 100%; height: 100%; border-radius: var(--radius-card); background: var(--color-paper-hi); }
.diagram { width: 100%; height: 100%; }
.ruling { fill: none; stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.print { font-family: var(--font-body); font-size: 104px; font-variant-numeric: tabular-nums; fill: var(--color-ink-2); }
.print--title { font-family: var(--font-display); font-size: 100px; letter-spacing: -0.02em; fill: var(--color-ink); }
.hand path, .claude > * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hand path { stroke: var(--color-ink); stroke-width: 7; }
.claude > * { stroke: var(--color-accent); stroke-width: 9; }

.scan { position: absolute; inset: 0; z-index: 2; border-top: var(--rule-hair) solid var(--color-accent); opacity: 0; pointer-events: none; }

/* states, only once the script is there: 0 blank, 1 written, 2 measured, 3 marked */
.js .hand path, .js .claude > * { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 380ms var(--ease-in-out), opacity 1ms linear; transition-delay: calc(var(--i, 0) * 130ms); }
.js .claude ellipse { transition-duration: 760ms, 1ms; }
.js .sheet-fig:is([data-state="1"], [data-state="2"], [data-state="3"]) .hand path,
.js .sheet-fig[data-state="3"] .claude > * { stroke-dashoffset: 0; opacity: 1; }
.js .sheet-fig[data-state="2"] .scan { animation: scan 1200ms var(--ease-in-out) 1; }
@keyframes scan { from { opacity: 1; transform: translateY(0); } 88% { opacity: 1; } to { opacity: 0; transform: translateY(100%); } }

.stage__text h2 { margin-bottom: var(--space-2xl); }
.moments { margin: 0; padding: 0; list-style: none; counter-reset: moment; }
.moment { position: relative; counter-increment: moment; display: grid; grid-template-columns: var(--space-2xl) minmax(0, 1fr); align-content: center; row-gap: var(--space-sm); min-height: 62dvh; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); }
.moment::before { content: counter(moment); grid-row: 1 / span 3; font: 400 var(--text-moment)/1.1 var(--font-display); color: var(--color-muted); }
.moment > * { grid-column: 2; }
.moment h3 { font-size: var(--text-moment); line-height: 1.1; }
.moment p { max-width: 46ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
.moment::after { content: ""; position: absolute; inset: -1px 0 auto 0; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }

@media (min-width: 60rem) {
  .js .moment, .js .moment p { transition: color var(--dur-long) var(--ease-out); }
  .js .moment::after { transition: transform 700ms var(--ease-out); }
  .js .moment:not(.is-active), .js .moment:not(.is-active) p { color: var(--color-muted); }
  .js .moment.is-active::after { transform: none; }
}

/* ---------- remote: Claude operates the tablet ---------- */

.remote { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-on-dark); }
.remote__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.remote .lead { margin-top: var(--space-lg); color: var(--color-on-dark-2); }
.steps { display: grid; margin-top: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-dark-rule); }
.step { position: relative; display: grid; gap: var(--space-3xs); padding-block: var(--space-md) var(--space-lg); border-top: var(--rule-hair) solid var(--color-dark-rule); color: var(--color-on-dark-2); transition: color var(--dur-short) var(--ease-out); }
.step button { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.005em; white-space: nowrap; text-align: left; cursor: pointer; }
.step button::before { content: ""; position: absolute; inset: 0; }
.step button:focus-visible { outline-offset: 4px; }
.step p { max-width: 46ch; }
.step:hover, .step:has([aria-pressed="true"]) { color: var(--color-on-dark); }
.step::after { content: ""; position: absolute; inset: -1px 0 auto 0; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out); pointer-events: none; }
.step:has([aria-pressed="true"])::after { transform: none; }

.navshot .tap { display: none; }
.navshot[data-step="1"] .tap[data-for="1"], .navshot[data-step="2"] .tap[data-for="2"] { display: block; }
.js .navshot .tap { animation: tap-in 320ms var(--ease-out) 300ms both; }
.navshot .ui { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.navshot[data-step="1"] .ui--a, .navshot[data-step="2"] .ui--b, .navshot[data-step="3"] .ui--doc { z-index: 1; opacity: 1; }
.ui--doc { padding: 0; }
.ui--doc svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- six tools ---------- */

.tools { padding-block: var(--section-gap) var(--section-gap-s); }
.head-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-3xl); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.head-split .lead { color: var(--color-ink-2); }
.tool { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr) minmax(0, 2fr); gap: var(--gap-columns); align-items: center; min-height: 96px; padding-block: var(--space-md); }
.tool p { color: var(--color-ink-2); }
.tool .spec { justify-self: end; width: 160px; max-width: 100%; height: 48px; }

/* ---------- how it connects: a diagram of the real path ---------- */

.wire { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.wire__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 4fr) minmax(0, 2fr) minmax(0, 4fr); align-items: stretch; margin: 0; padding: 0; list-style: none; }
.wire__node { display: grid; align-content: start; gap: var(--space-sm); min-height: 200px; padding: var(--space-xl) var(--space-lg); background: var(--color-paper-hi); border-radius: var(--radius-card); }
.wire__node h3 { font-size: var(--text-moment); line-height: 1.1; }
.wire__node p { color: var(--color-ink-2); }
.wire__link { position: relative; align-self: center; display: grid; justify-items: center; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.wire__link span { padding-bottom: var(--space-sm); }
.wire__link::after { content: ""; width: 100%; height: 1px; background: var(--color-accent); transform-origin: left; }
.js .wire__link::after { transform: scaleX(0); transition: transform 600ms var(--ease-in-out); transition-delay: calc(var(--i) * 100ms + 200ms); }
.js .is-in .wire__link::after { transform: none; }

/* ---------- setup ---------- */

.setup { padding-block: var(--section-gap); }
.setup__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.setup__text h2 { margin-bottom: var(--space-xl); }
.setup__next { display: grid; gap: var(--space-md); align-content: start; justify-items: start; padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-card); }
.setup__next h3 { font-size: var(--text-moment); line-height: 1.1; }
.setup__next p { max-width: 46ch; color: var(--color-ink-2); }
.code { min-width: 0; margin: 0; background: var(--color-paper-2); border-radius: var(--radius-card); }
.code pre { margin: 0; padding: var(--space-xl); overflow-x: auto; font: 400 var(--text-sm)/1.75 var(--font-code); color: var(--color-ink); }
.code pre:focus-visible { outline-offset: -2px; }
.code code { font: inherit; }
.code figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 60px; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- the offer, and the close ---------- */

.offer { padding-bottom: var(--section-gap-l); }
.offer h2 { max-width: 22ch; margin-bottom: var(--space-2xl); }
.offer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan { display: grid; align-content: start; gap: var(--space-lg); padding-inline: var(--space-2xl); border-left: var(--rule-hair) solid var(--color-rule); }
.plan:first-child { padding-left: 0; border-left: 0; }
.plan:last-child { padding-right: 0; }
.plan h3 { font-size: var(--text-section); line-height: 1.05; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); font: 400 var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.005em; }
.plan .btn { justify-self: start; margin-top: var(--space-md); }
.plan--parts { align-self: start; }
.plan--parts h3 { font-size: var(--text-moment); }
.parts li { display: grid; gap: var(--space-3xs); padding-block: var(--space-md); }
.parts b { font-weight: 500; }
.parts span { color: var(--color-ink-2); }

/* ---------- footer: a colophon block, on the dark ---------- */

.footer { padding-block: var(--space-3xl); background: var(--color-dark); color: var(--color-on-dark); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.footer__mark { font: 400 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.footer__body { display: grid; gap: var(--space-md); color: var(--color-on-dark-2); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: 0; padding: 0; list-style: none; }
.footer__legal { font-size: var(--text-sm); }
.footer__note { font-size: var(--text-lead); color: var(--color-on-dark); }

/* ---------- narrower screens ---------- */

@media (max-width: 60rem) {
  .nav__links { display: none; }
  .switch a { min-height: 40px; padding: 0 var(--space-sm); font-size: 1.0625rem; }

  .hero { container-type: inline-size; aspect-ratio: auto; min-height: 0; max-height: none; --scr-l: 22.24%; --scr-t: 44.75%; --scr-w: 54.34%; --scr-h: 41.29%; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); height: auto; padding-top: var(--space-2xl); }
  .hero__grid::after { content: ""; height: 160cqw; }
  .demo { top: auto; bottom: 0; width: 150cqw; aspect-ratio: 9 / 16; translate: -50% 0; }


  .companion__grid, .upsell__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .companion__fig .mini { width: min(100%, 240px); }
  .setup__next { padding: var(--space-lg); }

  .stage__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .stage__text { display: contents; }
  .stage__text h2 { order: 1; margin-bottom: 0; }
  .stage__pin { order: 2; position: static; }
  .moments { order: 3; }
  .sheet-fig { width: 100%; max-width: 400px; }
  .sheet-wrap { width: 100%; height: auto; }
  .moment { min-height: 0; padding-block: var(--space-lg); grid-template-columns: var(--space-xl) minmax(0, 1fr); }
  .moment::after { display: none; }

  .read, .tutor { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .msg--tool { grid-template-columns: minmax(0, 1fr); }
  .read__photo { aspect-ratio: 4 / 5; }
  .read__photo > .device { inset: -22.03% auto auto -18.59%; width: 144.9%; height: auto; aspect-ratio: 1744 / 2336; }
  .cases { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-top: var(--space-3xl); }
  .case { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--space-lg); padding: var(--space-lg); }
  .case .mini { grid-row: 1 / span 2; align-self: start; width: 100%; margin: 0; }
  .case .prompt--s { padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); }
  .remote__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .still { justify-self: start; }
  .steps { margin-top: var(--space-xl); }

  .head-split, .setup__grid, .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .wire__row { grid-template-columns: minmax(0, 1fr); }
  .wire__node { min-height: 0; padding: var(--space-lg); }
  .wire__link { justify-items: start; padding: var(--space-md) var(--space-lg); }
  .wire__link::after { width: var(--space-2xl); }
  .head-split { row-gap: var(--space-md); margin-bottom: var(--space-xl); }
  .tool { grid-template-columns: minmax(0, 1fr) 120px; gap: var(--space-2xs) var(--space-md); min-height: 0; padding-block: var(--space-lg); }
  .tool .spec { grid-column: 2; grid-row: 1 / span 2; width: 120px; height: 36px; }
  .tool h3, .tool .call { grid-column: 1; }
  .tool p { grid-column: 1 / -1; margin-top: var(--space-2xs); }

  .offer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .plan { padding-inline: 0; border-left: 0; }
  .plan + .plan { padding-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
  .footer { padding-block: var(--space-2xl); }
}

@media (max-width: 40rem) {
  .hero .actions .btn, .companion .actions .btn { flex: 1 1 auto; }
  .code pre { padding: var(--space-lg); }
  .code figcaption { padding-left: var(--space-lg); }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
}

/* ---------- reduced motion: everything drawn, still ---------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .hero .line > span, .js .hero .rise, .js .demo .shot, .js .tap { opacity: 1; transform: none; transition: none; animation: none; }
  .js .hand path, .js .claude > *, .js .spec path { stroke-dashoffset: 0; opacity: 1; transition: none; }
  .js .sheet-fig .scan { animation: none; }
  .js .demo .pg-mark { stroke-dashoffset: 0; opacity: 1; }
  .js .demo .pg-hl { transform: none; }
  .js .demo .page, .demo .ui--files, .navshot .ui, .js .demo__steps li { transition: none; }
  [data-demo-toggle] { display: none; }
  .js .moment, .js .moment p, .step, .ui--doc { transition: none; }
  .js .moment::after { transform: none; transition: none; }
  .step::after { transition: none; }
  .js .wire__link::after, .js .tile--control .pg-hl { transform: none; transition: none; }
  .js .tile--view.is-in .scan { animation: none; }
  .btn { transition: none; }
  .switch a { transition: none; }
  ::view-transition-group(switch-on) { animation: none; }
  .js .vshot .hand path, .js .vshot .spec path { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .js .vshot .scan, .js .companion.companion .scan { animation: none; }
  .js .tutor .msg, .js .tutor .ws__fix path, .js .tutor .ws__hand path { opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; }
  .js .tutor .scan { animation: none; }
  .js .fswipe__trail, .js .fswipe__finger { animation: none; }
  .js .tutor .ws__rub { stroke-dashoffset: 0; transition: none; }
  .js .tutor .ws__eraser, .js .tutor .ws__pen, .js .tutor .ws__tap { animation: none; }
  .js .read .log li, .js .read mark, .ep__dot { opacity: 1; transform: none; transition: none; }
  .js .read mark { background-size: 100% 74%; }
  .js .read .scan, .js .case .scan, .caret { display: none; }
  .js .case .spec path { stroke-dashoffset: 0; opacity: 1; }
  .case--nav .case__files, .case--nav .case__doc, .case--nav :is(.case__p1, .case__p2) { transition: none; }
}

/* Legal pages (Impressum, Datenschutz) */
.legal { padding-block: var(--space-3xl) var(--section-gap-s); }
.legal__body { max-width: 68ch; }
.legal h1 { font-size: var(--text-section); margin-bottom: var(--space-lg); }
.legal h2 { font-size: var(--text-title); margin-top: var(--space-2xl); margin-bottom: var(--space-sm); }
.legal h3 { font-size: var(--text-lg); margin-top: var(--space-xl); margin-bottom: var(--space-xs); }
.legal p, .legal ul, .legal address { margin: 0 0 var(--space-md); color: var(--color-ink-2); font-style: normal; }
.legal ul { padding-left: 1.2em; }
.legal a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; }
.legal__lead { font-size: var(--text-lead); color: var(--color-muted); }
.legal__stand { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.todo { background: var(--color-highlight); color: var(--color-ink); padding: 0 0.2em; }
@media (max-width: 40rem) { .legal { padding-block: var(--space-2xl) var(--space-3xl); } }
.plan__note { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }