:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

.dir-a {
  --bg: oklch(0.135 0.004 270);
  --bg-2: oklch(0.175 0.005 270);
  --bg-3: oklch(0.215 0.006 270);
  --line: oklch(1 0 0 / 0.08);
  --line-strong: oklch(1 0 0 / 0.16);
  --text: oklch(0.97 0.003 270);
  --text-2: oklch(0.855 0.006 270);
  --text-3: oklch(0.78 0.008 270);
  --btn: oklch(0.97 0.003 270);
  --btn-text: oklch(0.16 0.004 270);
  --btn-hover: oklch(0.88 0.004 270);
  --hue: 58;
  --accent: oklch(0.76 0.16 var(--hue));
  --focus: oklch(0.76 0.16 var(--hue));
  --success: oklch(0.8 0.15 150);
  --danger: oklch(0.72 0.17 25);
  --font-display: "Geist", system-ui, sans-serif;
  --font-text: "DM Sans", system-ui, sans-serif;
  --t-hero: clamp(3rem, 8vw, 7rem);
  --t-h2: clamp(2rem, 4.6vw, 3.75rem);
  --t-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --t-lede: clamp(1.125rem, 1.6vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-full: 999px;
  --shadow-2: 0 4px 16px oklch(0 0 0 / 0.35);
  --shadow-3: 0 16px 48px oklch(0 0 0 / 0.45);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --d-base: 220ms;
  background: var(--bg); color: var(--text);
  font-family: var(--font-text); font-size: var(--t-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; margin: 0; min-height: 100svh;
}
:root[data-theme="light"] .dir-a {
  --bg: oklch(0.985 0.002 270);
  --bg-2: oklch(0.958 0.003 270);
  --bg-3: oklch(0.925 0.004 270);
  --line: oklch(0.2 0.01 270 / 0.1);
  --line-strong: oklch(0.2 0.01 270 / 0.2);
  --text: oklch(0.17 0.006 270);
  --text-2: oklch(0.39 0.008 270);
  --text-3: oklch(0.5 0.008 270);
  --btn: oklch(0.17 0.006 270);
  --btn-text: oklch(0.985 0.002 270);
  --btn-hover: oklch(0.3 0.006 270);
  --accent: oklch(0.55 0.16 50);
  --focus: oklch(0.55 0.16 50);
  --success: oklch(0.5 0.14 150);
  --danger: oklch(0.52 0.19 25);
  --shadow-2: 0 8px 24px oklch(0.2 0.01 270 / 0.1);
  --shadow-3: 0 30px 80px oklch(0.2 0.01 270 / 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.wrap { margin: 0 auto; max-width: 1200px; padding-inline: 20px; }
@media (min-width: 640px) { .wrap { padding-inline: 32px; } }
.lede { font-size: var(--t-lede); color: var(--text-2); line-height: 1.45; text-wrap: pretty; }
.small { font-size: var(--t-small); color: var(--text-2); }
section { padding-block: clamp(80px, 12vw, 160px); }

/* buttons and forms */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding-inline: 28px; border-radius: var(--r-full); border: 0; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: background var(--d-base) var(--ease), transform 160ms steps(2, end); white-space: nowrap; }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-2); opacity: 0; transition: opacity var(--d-base) var(--ease); pointer-events: none; }
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }
.btn.solid { background: var(--btn); color: var(--btn-text); }
.btn.solid:hover { background: var(--btn-hover); }
.btn.ghost { border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.btn.ghost:hover { border-color: var(--text-2); }
.btn.sm { min-height: 44px; padding-inline: 18px; font-size: var(--t-small); }
.field { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 34rem; }
@media (min-width: 640px) { .field { flex-direction: row; } }
.field input { flex: 1; min-width: 0; min-height: 48px; padding-inline: 20px; border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); font: inherit; font-size: 1rem; }
.field input::placeholder { color: var(--text-3); }
.field input:focus-visible { outline-offset: 0; border-color: transparent; border-radius: var(--r-full); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-msg { display: none; max-width: 44ch; }
.form-msg.ok { color: var(--text); } .form-msg.err { color: var(--danger); }
:root[data-form="sent"] .get form { display: none; } :root[data-form="sent"] .get .form-msg.ok { display: flex; gap: 10px; }
:root[data-form="error"] .get .form-msg.err { display: block; }
:root[data-form="error"] .get input { border-color: var(--danger); }

/* steam on/off */
.when-steam { display: none; } :root[data-steam="on"] .when-steam { display: inline-flex; }
:root[data-steam="on"] .when-form { display: none !important; }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; height: 64px; display: flex; align-items: center; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in oklch, var(--bg) 72%, transparent); border-bottom: 1px solid transparent; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; min-height: 44px; }
.brand img { width: 195px; height: 25px; image-rendering: pixelated; }
.nav-links { display: none; gap: 28px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text-2); font-size: var(--t-small); min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.nav-links a:hover { color: var(--text); }
@media (min-width: 800px) { .nav-links { display: flex; } }
.nav-cta { display: inline-flex; gap: 10px; align-items: center; }

/* hero */
.hero h1 { font-size: var(--t-hero); max-width: 13ch; margin-inline: auto; }
.hero .lede { max-width: 58ch; margin: 28px auto 0; }
.hero .get { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero .get form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.hero .meta { margin-top: 4px; color: var(--text-2); font-size: var(--t-small); max-width: 62ch; text-wrap: pretty; }
.hero-art { position: relative; width: 100%; max-width: 1200px; margin: clamp(32px, 5vw, 56px) auto 0; padding-inline: 20px; }
@media (min-width: 640px) { .hero-art { padding-inline: 32px; } }
.hero-art .art { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-3); aspect-ratio: 3840 / 1240; }
.hero-art .art img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
@media (max-width: 639px) { .hero-art .art { aspect-ratio: 16 / 10; } .hero-art .art img { object-position: 50% 50%; } }

/* show (screenshot bleed) */
.show { overflow-x: clip; }
.show .grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .show .grid { grid-template-columns: 4fr 8fr; gap: 56px; } }
.show h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.show .shot { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-3); background: var(--bg-2); }
@media (min-width: 960px) { .show .shot { width: calc(100% + 18vw); max-width: none; } }
.show .shot img { width: 100%; }
.show .lede { margin-top: 20px; }
.row-list { display: grid; gap: 8px; margin-top: 24px; color: var(--text-2); }
.row-list li { display: flex; gap: 12px; align-items: baseline; }
.row-list li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; background: var(--text-3); transform: translateY(-2px); }

/* feature frames */
.frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow-2); }
.frame img { width: 100%; }
.feature h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: var(--t-h3); line-height: 1.2; }
.feature p { color: var(--text-2); margin-top: 8px; text-wrap: pretty; }
.feature .facts { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { font-size: var(--t-small); color: var(--text-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 4px 12px; }
.two { display: grid; gap: 48px; align-items: end; }
@media (min-width: 800px) { .two { grid-template-columns: 1fr 1fr; gap: 40px; } }
.two .frame { margin-bottom: 20px; }
.sec-head { font-size: var(--t-h2); max-width: 20ch; }
.sec-lede { margin-top: 20px; max-width: 58ch; }

/* animate: text left, big gif right */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 5fr 7fr; gap: 64px; } .split.flip > :first-child { order: 2; } }
.split h2 { font-size: var(--t-h2); }

/* band */
.band { position: relative; background: var(--bg-2); }
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 48px; background: var(--bg-2); mask: url(assets/dither-ramp.png) repeat-x; -webkit-mask: url(assets/dither-ramp.png) repeat-x; mask-size: 16px 48px; -webkit-mask-size: 16px 48px; pointer-events: none; z-index: 1; }
.band::before { top: -48px; transform: scaleY(-1); }
.band::after { bottom: -48px; }
.band > .wrap { position: relative; z-index: 2; }
.band .frame { background: var(--bg-3); }
.band .sec-head { margin-inline: auto; text-align: center; }
.band .sec-lede { margin-inline: auto; text-align: center; }
.band .two { margin-top: 56px; }

/* export */
.sheet { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.sheet img { image-rendering: pixelated; width: min(100%, 384px); }
.sheet figcaption { margin-top: 16px; font-size: var(--t-small); color: var(--text-3); font-family: ui-monospace, "Martian Mono", monospace; }
.formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* modes: desktop window with the iPad overlapping */
.ipad { background: oklch(0.12 0.004 270); border-radius: 28px; padding: 12px; box-shadow: var(--shadow-3), inset 0 0 0 1px oklch(1 0 0 / 0.14); }
.ipad img { border-radius: 16px; display: block; }
.modes-stage { position: relative; margin-top: 56px; }
.modes-stage .desk { width: 100%; }
@media (min-width: 800px) { .modes-stage .desk { width: 76%; } .modes-stage .ipad { position: absolute; right: 0; bottom: -10%; width: 46%; } .modes-stage { margin-bottom: 12%; } }
@media (max-width: 799px) { .modes-stage .ipad { margin-top: 24px; } }
.modes { display: grid; gap: 32px; margin-top: 56px; }
@media (min-width: 800px) { .modes { grid-template-columns: 1fr 1fr; gap: 40px; } }
.modes li { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.modes h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.2; }
.modes p { color: var(--text-2); margin-top: 8px; }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: var(--t-small); color: var(--text-2); }
.status::before { content: ""; width: 8px; height: 8px; background: var(--accent); }

/* pair: desktop and iPad side by side with a link badge between */
.pair { position: relative; display: grid; gap: 24px; align-items: center; margin-top: 56px; }
@media (min-width: 800px) { .pair { grid-template-columns: 7fr 5fr; gap: 40px; } }
.pair .badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; background: var(--btn); color: var(--btn-text); box-shadow: var(--shadow-2); }
@media (min-width: 800px) { .pair .badge { left: calc(58.33% + 0px); } }
@media (max-width: 799px) { .pair .badge { display: none; } }
.pair .frame { box-shadow: var(--shadow-3); }
.steps { display: grid; gap: 28px 32px; margin-top: 48px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { border-top: 1px solid var(--line-strong); padding-top: 16px; }
.steps h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; line-height: 1.25; }
.steps p { color: var(--text-2); margin-top: 8px; font-size: var(--t-small); }
.steps .frame { margin-bottom: 16px; }
.steps .frame img { aspect-ratio: 16 / 10; object-fit: cover; }

/* pricing */
.plans { display: grid; gap: 24px; margin-top: 48px; }
@media (min-width: 800px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { padding: 28px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-2); display: flex; flex-direction: column; gap: 16px; }
.plan h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.2; }
.plan .price { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 4vw, 3.25rem); letter-spacing: -0.03em; line-height: 1; }
.plan .price small { display: block; font-family: var(--font-text); font-weight: 400; font-size: var(--t-small); color: var(--text-2); letter-spacing: 0; margin-top: 8px; }
.plan p { color: var(--text-2); }
.plan .btn { align-self: flex-start; margin-top: auto; }
.notes { display: grid; gap: 24px 32px; margin-top: 48px; }
@media (min-width: 800px) { .notes { grid-template-columns: 1fr 1fr; } }
.notes li { border-top: 1px solid var(--line-strong); padding-top: 16px; }
.notes h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; line-height: 1.25; }
.notes p { color: var(--text-2); margin-top: 8px; font-size: var(--t-small); }
.tbc { display: inline-block; vertical-align: middle; font-family: ui-monospace, "Martian Mono", monospace; font-size: 0.75rem; color: var(--text); border: 1px dashed var(--danger); border-radius: 6px; padding: 2px 6px; margin-left: 8px; letter-spacing: 0; }

/* roadmap */
.road { margin-top: 48px; border-top: 1px solid var(--line-strong); }
.road li { display: grid; gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line-strong); }
@media (min-width: 800px) { .road li { grid-template-columns: 11rem 1fr; } }
.road .when { font-size: var(--t-small); color: var(--text-3); }
.road h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; line-height: 1.3; }
.road p { color: var(--text-2); margin-top: 4px; }

/* pillars */
.pillars { display: grid; gap: 40px 32px; }
@media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillars li { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.pillars h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.2; }
.pillars p { color: var(--text-2); margin-top: 8px; }

/* runs on */
.os { display: grid; gap: 24px; margin-top: 48px; }
@media (min-width: 800px) { .os { grid-template-columns: repeat(3, 1fr); } }
.os li { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); }
.os h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; }
.os p { color: var(--text-2); margin-top: 8px; font-size: var(--t-small); }
.os .req { margin-top: 16px; display: grid; gap: 4px; }

/* faq */
.faq { margin-top: 32px; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; font-size: 1.125rem; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-3); font-weight: 400; font-size: 1.5rem; line-height: 1; transition: transform var(--d-base) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding-bottom: 20px; color: var(--text-2); max-width: 64ch; }

/* closing */
.close { text-align: center; position: relative; overflow: hidden; }
.close .get { position: relative; margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.close .get form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }

footer { border-top: 1px solid var(--line); padding: 48px 0 40px; font-size: var(--t-small); color: var(--text-2); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
footer ul { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
footer a:hover { color: var(--text); }

/* review strip, not part of the design */
.review { position: fixed; right: 12px; bottom: 12px; z-index: 50; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font: 12px/1 ui-monospace, monospace; }
.review button { border: 1px solid var(--line-strong); background: var(--bg-3); color: var(--text); padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; min-height: 32px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* sub pages */
.page-head { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 72px); }
.page-head h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); max-width: 16ch; }
.crumb { font-size: var(--t-small); color: var(--text-2); margin-bottom: 16px; }
.crumb a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumb a:hover { color: var(--text); }
.cards { display: grid; gap: 32px 28px; margin-top: 48px; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: block; text-decoration: none; color: inherit; }
.card .frame img { aspect-ratio: 16 / 10; object-fit: cover; }
.card .frame { transition: border-color var(--d-base) var(--ease); }
.card:hover .frame { border-color: var(--line-strong); }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.2; margin-top: 16px; }
.card p { color: var(--text-2); margin-top: 8px; font-size: var(--t-small); text-wrap: pretty; }
.card .more { display: inline-block; margin-top: 8px; font-size: var(--t-small); color: var(--accent); }
.defs { display: grid; gap: 28px 32px; margin-top: 48px; }
@media (min-width: 640px) { .defs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .defs { grid-template-columns: repeat(3, 1fr); } }
.defs li { border-top: 1px solid var(--line-strong); padding-top: 16px; }
.defs h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; line-height: 1.25; }
.defs p { color: var(--text-2); margin-top: 8px; font-size: var(--t-small); }
.showcase { display: grid; gap: 28px 24px; margin-top: 48px; }
@media (min-width: 640px) { .showcase { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .showcase { grid-template-columns: repeat(4, 1fr); } }
.showcase .tile { aspect-ratio: 1; border-radius: var(--r-md); background: var(--bg-3); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.showcase .tile img { image-rendering: pixelated; width: 100%; height: 100%; object-fit: contain; }
.showcase .tile.pending { border: 1px dashed var(--line-strong); }
.showcase .tile .tbc { margin: 0; }
.showcase h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; margin-top: 16px; }
.showcase p { color: var(--text-2); margin-top: 8px; font-size: var(--t-small); }
.next-up { padding-block: 0; }
.next { display: flex; flex-direction: column; gap: 8px; padding: 32px 0; border-top: 1px solid var(--line-strong); text-decoration: none; }
.next .display { font-size: var(--t-h2); }
.next:hover .display { color: var(--accent); }

/* one features page */
.jump { padding-block: 0 24px; }
.jumps { display: flex; flex-wrap: wrap; gap: 8px; }
.jumps a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); text-decoration: none; font-size: var(--t-small); color: var(--text-2); }
.jumps a:hover { color: var(--text); border-color: var(--text-2); }
.part { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line-strong); scroll-margin-top: 64px; }
.part-head { font-size: var(--t-h2); }
h3.sub-head { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.08; max-width: 20ch; }

/* home hero: sticky while the run scrolls, collage and tools fly apart */
.hero-spacer { position: relative; }
.hero { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; text-align: center; padding-top: clamp(64px, 8vw, 96px); }
.hero-spacer.scrub .hero { height: 100svh; justify-content: flex-start; }
.hero-spacer.scrub .hero-art { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; will-change: transform; }
.hero-spacer.scrub .cue { display: none; }
.hero-run { display: none; height: 70vh; }
@media (min-width: 1024px) { .hero-run { height: 100vh; } }
.hero .layer { position: absolute; inset: 0; pointer-events: none; margin: 0; }
.hero-text { position: relative; }
.hero-logo { display: block; width: fit-content; margin: 0 auto 32px; }
.hero-logo img { image-rendering: pixelated; }
@media (max-width: 520px) { .hero-logo img { width: 333px; } }
.hero .hero-text h1 { font-size: clamp(2.5rem, 6.4vw, 5.5rem); max-width: 19ch; margin-inline: auto; }
.hero .lede { max-width: 58ch; margin: 28px auto 0; }
.hero .get { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero .get form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.hero .meta { margin-top: 4px; color: var(--text-2); font-size: var(--t-small); }
.tool-wrap { position: absolute; left: var(--px, var(--x)); top: var(--py, var(--y)); transform: translate(-50%, -50%); }
@media (min-width: 640px) { .tool-wrap { left: var(--x); top: var(--y); } }
@media (max-width: 639px) { .desk-only { display: none; } }
[data-pxfield]:not(.hero) { position: relative; }
.pxfield { position: absolute; inset: 0; pointer-events: none; image-rendering: pixelated; }
[data-pxfield] > .wrap { position: relative; }
[data-pxfield] > .hero-text { position: relative; }
.tool { display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--bg-3); box-shadow: var(--shadow-2); color: oklch(0.82 0.1 var(--hue)); transform: rotate(var(--r0)); }
.tool svg { display: block; }
.tool.far { width: 32px; height: 32px; opacity: 0.75; } .tool.far svg { width: 16px; height: 16px; }
.tool.mid { width: 40px; height: 40px; } .tool.mid svg { width: 20px; height: 20px; }
.tool.near { width: 44px; height: 44px; } .tool.near svg { width: 20px; height: 20px; }
@media (min-width: 640px) { .tool.far { width: 40px; height: 40px; } .tool.far svg { width: 18px; height: 18px; } .tool.mid { width: 48px; height: 48px; } .tool.near { width: 60px; height: 60px; } .tool.near svg { width: 28px; height: 28px; } }
.tool.on { background: oklch(0.52 0.19 var(--hue)); border-color: oklch(0.64 0.19 var(--hue)); color: #fff; }
:root[data-theme="light"] .tool { color: oklch(0.48 0.16 var(--hue)); }
:root[data-theme="light"] .tool.on { color: #fff; }

/* feature grid: one claim, one loop */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; margin-top: 48px; }
@media (min-width: 640px) { .fgrid { gap: 36px 28px; } }
@media (min-width: 1024px) { .fgrid { grid-template-columns: repeat(3, 1fr); } }
.fgrid .loop { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--bg-3); display: grid; place-items: center; }
.fgrid .loop picture { display: block; width: 100%; height: 100%; min-height: 0; }
.fgrid .loop img { width: 100%; height: 100%; object-fit: cover; }
.fgrid .loop.pending { border-style: dashed; border-color: var(--line-strong); }
.fgrid .loop .tbc { margin: 0; }
.fgrid h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; line-height: 1.25; margin-top: 16px; }
.fgrid p { color: var(--text-2); margin-top: 8px; font-size: var(--t-small); text-wrap: pretty; }
.fgrid.presets .loop { aspect-ratio: 1; }
@media (min-width: 1024px) { .fgrid.five { grid-template-columns: repeat(5, 1fr); gap: 32px 20px; } .fgrid.four { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; } }
.fgrid.presets .loop img { image-rendering: pixelated; object-fit: contain; }
.fgrid .loop img[src$="characters.png"] { image-rendering: pixelated; object-fit: contain; padding: 16px; }


/* polish: grid hover, active chip, scroll cue, motion pause */
.fgrid .loop { transition: border-color var(--d-base) var(--ease); }
.fgrid li:hover .loop { border-color: var(--line-strong); }
.jumps a { transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease), background var(--d-base) var(--ease); }
.jumps a.is-active { color: var(--text); border-color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); }
.cue { position: relative; display: inline-grid; grid-template-columns: repeat(3, 6px); gap: 0; margin-top: 40px; min-width: 44px; min-height: 44px; place-content: center; align-items: end; color: var(--text-2); }
.cue i { display: block; width: 6px; height: 6px; background: currentColor; }
.cue i:nth-child(2) { margin-bottom: -6px; }
.cue:hover { color: var(--text); }
.motion-toggle { font: inherit; font-size: var(--t-small); color: inherit; background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm); min-height: 44px; padding-inline: 14px; cursor: pointer; }
.motion-toggle:hover { color: var(--text); border-color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .btn, .card .frame, .fgrid .loop { transition: none; } .btn:hover { transform: none; } }
.fgrid .loop.map img { image-rendering: pixelated; }
.fgrid .loop.px { background: oklch(0.15 0.008 270); border-color: oklch(1 0 0 / 0.1); }
.fgrid .loop.px img { object-fit: contain; image-rendering: pixelated; padding: 8px; }
.loop.px.tall { aspect-ratio: 6 / 7; border-radius: var(--r-md); overflow: hidden; border: 1px solid oklch(1 0 0 / 0.1); background: oklch(0.15 0.008 270); display: grid; place-items: center; }
.loop.px.tall img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; padding: 12px; }
.loop picture { display: block; width: 100%; height: 100%; }
.notes.doc { grid-template-columns: 1fr; max-width: 72ch; margin-top: 24px; }
.notes.doc p { font-size: var(--t-body, 1rem); }
.notes.doc a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }