/* dekx site — page layout and motion. Colors, type, radii and components come from ../styles.css. */
:root { --edge: clamp(20px, 5vw, 64px); --wrap: 1120px; --measure: 62ch; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: hidden; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--edge); position: relative; }

/* — header: the original dekx bar (site-header.js) on the paper tokens — */
site-header { display: block; position: sticky; top: 0; z-index: 50; }
header.site { background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 16px clamp(12px, 1.6vw, 26px); max-width: 1560px; margin: 0 auto; }
.bar .mark { justify-self: start; }
.bar nav { justify-self: end; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.bar .theme-wrap { justify-self: center; display: grid; grid-template-columns: auto 26px auto; align-items: center; gap: 3px; }
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.mark:hover { color: var(--color-text); }
.mark b { font-family: var(--font-body); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.mark .dot { color: var(--color-logo); }
.mark .lg-l { stroke: var(--color-neutral-500); }
.mark .lg-n { stroke: var(--color-neutral-700); }
.mark .lg-c { fill: var(--color-logo); }
.theme { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--color-ink-soft); transition: color .18s; }
.theme:hover { color: var(--color-accent); }
.theme svg { display: block; transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
html[data-theme="dark"] .theme svg { transform: rotate(180deg); }
.theme-label { grid-row: 1; position: relative; font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-700); line-height: 1.3; background: transparent; border: 0; padding: 0; cursor: pointer; white-space: nowrap; transition: color .18s; }
.theme-label:hover { color: var(--color-accent); }
.theme-label.lt { grid-column: 3; justify-self: start; }
.theme-label.dk { grid-column: 1; justify-self: end; visibility: hidden; }
html[data-theme="dark"] .theme-label.lt { visibility: hidden; }
html[data-theme="dark"] .theme-label.dk { visibility: visible; }
.sp { position: absolute; left: 0; right: 0; top: 0; height: 1px; display: block; pointer-events: none; }
.sp b { position: absolute; top: 0; width: 2px; height: 2px; border-radius: 50%; opacity: 0; }
.sp b:nth-child(1) { left: 16%; animation-delay: 0s; }
.sp b:nth-child(2) { left: 47%; animation-delay: .9s; }
.sp b:nth-child(3) { left: 76%; animation-delay: 1.7s; }
.theme-label.dk .sp b { background: var(--color-text); animation: dekx-rise 2.6s linear infinite; }
.theme-label.lt .sp b { background: var(--color-ink-soft); animation: dekx-fall 2.6s linear infinite; }
@keyframes dekx-rise { 0% { transform: translateY(2px) scale(.7); opacity: 0; } 18% { opacity: .95; } 70% { opacity: .5; } 100% { transform: translateY(-15px) scale(1); opacity: 0; } }
@keyframes dekx-fall { 0% { transform: translateY(12px) scale(.7); opacity: 0; } 22% { opacity: .75; } 70% { opacity: .35; } 100% { transform: translateY(26px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sp { display: none; } }
.bar nav a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); text-decoration: none; white-space: nowrap; }
.bar nav a:hover { color: var(--color-text); }
.bar nav a[aria-current] { color: var(--color-accent-700); }
.bar nav a.btn { color: var(--color-accent-700); border: 1px solid var(--color-accent-400); padding: 7px 14px; font-weight: 500; }
.bar nav a.btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-paper); }
.cdown { display: inline-flex; align-items: baseline; gap: 8px; flex: none; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.cdown .lb { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-700); }
.cdown .vv em { font-style: normal; color: var(--color-accent-700); }
@media (max-width: 1000px) { .bar .hide-sm { display: none; } }
@media (max-width: 900px) { .bar .theme-label { display: none; } .bar .theme-wrap { grid-template-columns: 26px; } }
.btn { white-space: nowrap; }

/* — dark theme: image handling (tokens flip in ../styles.css) — */
html[data-theme="dark"] .photo-frame img { mix-blend-mode: normal; filter: grayscale(1) contrast(1.05) brightness(.85) sepia(.15); }
html[data-theme="dark"] .photo-frame::after { opacity: .55; }
html[data-theme="dark"] .bg-photo img { mix-blend-mode: screen; filter: grayscale(1) invert(1) contrast(1.1); }
html[data-theme="dark"] footer img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
html[data-theme="dark"] .grain::before { mix-blend-mode: overlay; opacity: .14; }

/* — rail: the old site's section scroll-spy, right edge — */
.rail { position: fixed; right: 6px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.rail a { display: flex; align-items: center; gap: 9px; color: var(--color-neutral-700); text-decoration: none; padding: 2px 0; }
.rail span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(5px); transition: opacity .2s, transform .2s; white-space: nowrap; background: color-mix(in srgb, var(--color-bg) 85%, transparent); padding: 1px 4px; border-radius: 3px; }
.rail i { display: block; width: 6px; height: 1.5px; background: color-mix(in srgb, var(--color-text) 30%, transparent); transition: width .2s, background .2s; }
.rail a:hover span { opacity: 1; transform: none; }
.rail a:hover i { width: 13px; background: var(--color-neutral-700); }
.rail a[data-on] i { width: 11px; background: var(--color-accent); }
.rail a[data-on] span { color: var(--color-accent-700); opacity: 1; transform: none; }
@media (max-width: 900px) { .rail { display: none; } }

/* — sections — */
section { position: relative; padding: clamp(40px, 5vw, 64px) 0; }
section#top { padding-top: 0; }
section + section { border-top: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); }
.section-head { max-width: 760px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 50px); margin-bottom: var(--space-4); }
.section-head .lede { max-width: var(--measure); }
.section-head:has(.one-line) { max-width: none; }
.section-head h2.one-line { font-size: clamp(26px, 4vw, 48px); white-space: nowrap; }
@media (max-width: 640px) { .section-head h2.one-line { white-space: normal; } }
.lead { margin-top: clamp(24px, 3vw, 36px); display: flex; align-items: center; gap: 16px; font-family: var(--font-heading); font-style: italic; font-size: 19px; color: var(--color-ink-soft); }
.lead a { color: inherit; text-decoration: none; min-width: 0; text-wrap: initial; }
.lead a:only-of-type { flex: 1 1 auto; }
.lead .multi { flex: 1 1 auto; min-width: 0; }
.lead a:hover { color: var(--color-accent); }
.lead svg { flex: none; color: var(--color-accent); }
.lead .arrow { animation: nudge 2.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* faint background sketches sit behind a section's content */
.bg-sketch { position: absolute; pointer-events: none; opacity: 0.32; color: var(--color-line); z-index: 0; }
.bg-sketch svg { width: 100%; height: auto; display: block; overflow: visible; }
section > .wrap { z-index: 1; }

/* — reveal on scroll (quiet) — */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* — hero — */
.hero { padding-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 clamp(32px, 5vw, 56px); align-items: start; }
.hero-head { grid-column: 1 / -1; margin-bottom: var(--space-6); }
.hero-head h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.08; margin: 0; max-width: none; text-wrap: balance; }
.hero > div:first-child { min-width: 0; }
.hero h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.08; margin-bottom: var(--space-6); }
.hero .lede { max-width: 54ch; margin-bottom: var(--space-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: var(--space-8); }
.facts { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; list-style: none; font-family: var(--font-mono); font-size: 13px; color: var(--color-ink-soft); }
.facts li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.hero-art { position: relative; }
.hero-art figcaption { text-align: center; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 24px; } .hero-art { max-width: 300px; margin: 0 auto; } }

/* the desk sketch */
/* — photo scenes: real photographs pulled into the paper-and-ink world — grayscale, washed in the ink-blue, feathered into the ground, with the drawn lens animating on top — */
.photo-scene { position: relative; }
.photo-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; line-height: 0; width: min(100%, 300px); margin: 0 auto; }
.photo-frame img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.1) brightness(1.12) sepia(.18); mix-blend-mode: multiply; }
.photo-frame::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); mix-blend-mode: color; opacity: .75; pointer-events: none; }
.photo-frame::before { content: none; }
.lens-overlay { position: absolute; inset: 0; z-index: 3; color: var(--color-paper); filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--color-text) 40%, transparent)); }
.lens-overlay .accent { color: var(--color-accent-300); }
.lens-overlay .highlight { opacity: .9; }
.bg-photo { position: absolute; right: -4%; top: 4%; width: min(46vw, 560px); aspect-ratio: 3 / 2; opacity: .22; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 100%); }
.bg-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
@media (max-width: 860px) { .bg-photo { width: 70vw; top: 0; opacity: .14; } }
footer .credit { font-size: 12px; color: var(--color-neutral-600); flex-basis: 100%; }
.desk .lens { animation: sweep 9s ease-in-out infinite; transform-origin: center; }
@keyframes sweep { 0%, 8% { transform: translate(0, 0); } 45%, 55% { transform: translate(96px, -8px); } 92%, 100% { transform: translate(0, 0); } }
.desk .lens-glow { animation: glow 9s ease-in-out infinite; }
@keyframes glow { 0%, 10%, 90%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }
.desk .highlight { stroke-dasharray: 100; stroke-dashoffset: 100; animation: trace 9s ease-in-out infinite; }
@keyframes trace { 0%, 12% { stroke-dashoffset: 100; } 50%, 58% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 100; } }
.desk .steam { animation: rise 3.4s ease-in-out infinite; }
.desk .steam:nth-child(2) { animation-delay: 1.1s; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }

/* — compare: three columns — */
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(24px, 3vw, 36px); }
.compare .card { min-height: 220px; }
.compare .card h3 { font-size: 24px; margin: 0; }
.compare .is-dekx { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.compare ul { margin: 0; padding-left: 20px; color: var(--color-text); }
.compare li + li { margin-top: 6px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* — investigation steps — */
.invest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); margin-top: clamp(24px, 3vw, 36px); align-items: start; }
.steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 44px; }
.steps::before { content: ""; position: absolute; left: 13px; top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-text) 30%, transparent) 0 5px, transparent 5px 10px); }
.steps .runner { position: absolute; left: 9px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent); animation: run 14s linear infinite; }
@keyframes run { 0% { top: 10px; } 100% { top: calc(100% - 20px); } }
.steps li { position: relative; padding: 0 0 26px; }
.steps li:last-child { padding-bottom: 0; }
.steps .num { position: absolute; left: -44px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg); border: 1.5px solid color-mix(in srgb, var(--color-text) 45%, transparent); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-soft); }
.steps strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 1.3; }
.steps span { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--color-ink-soft); margin-top: 3px; }
.result { position: sticky; top: 96px; }
.result .card { padding: var(--space-8); }
.result .card-kicker { display: flex; align-items: center; gap: 8px; }
.result .card-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.result h4 { font-size: 24px; margin: var(--space-2) 0 var(--space-3); }
.result p { color: var(--color-text); }
.result code { background: var(--color-surface); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; }
.cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed color-mix(in srgb, var(--color-text) 20%, transparent); }
.cites .tag { background: var(--color-surface); color: var(--color-ink-soft); }
@media (max-width: 860px) { .invest { grid-template-columns: 1fr; } .result { position: static; } }

/* — how it works: four sheets around one sketch — */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(24px, 3vw, 36px); }
.how .card h3 { font-size: 22px; margin: 0; }
.how .card p { margin: 0; }
.how-art { grid-column: 1 / -1; margin: 8px auto 0; max-width: 820px; width: 100%; }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; } }
/* ticket → platform checks → docs/code/samples/similar resolutions (together) → fix: three-phase pulses on a 7.5s loop */
.flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow .q0 path, .flow .q1 path, .flow .q2 path { stroke-dasharray: 18 82; stroke-dashoffset: 118; }
.flow .q0 path { animation: fq0 7.5s ease-in-out infinite; }
.flow .q1 path { animation: fq1 7.5s ease-in-out infinite; }
.flow .q2 path { animation: fq2 7.5s ease-in-out infinite; }
@keyframes fq0 { 0% { stroke-dashoffset: 118; opacity: 0; } 3% { opacity: 1; } 18% { stroke-dashoffset: 0; opacity: 1; } 21%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fq1 { 0%, 22% { stroke-dashoffset: 118; opacity: 0; } 25% { opacity: 1; } 46% { stroke-dashoffset: 0; opacity: 1; } 49%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fq2 { 0%, 51% { stroke-dashoffset: 118; opacity: 0; } 54% { opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 1; } 78%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.flow .node { transform-box: fill-box; transform-origin: center; }
.flow .ticket { animation: wiggle 7.5s ease-in-out infinite; }
@keyframes wiggle { 0%, 2% { transform: rotate(0); } 3% { transform: rotate(-4deg); } 5% { transform: rotate(3deg); } 7%, 100% { transform: rotate(0); } }
.flow .platform { animation: pbump 7.5s ease-in-out infinite; }
@keyframes pbump { 0%, 17% { transform: scale(1); } 21% { transform: scale(1.07); } 27%, 100% { transform: scale(1); } }
.flow .src { animation: bump 7.5s ease-in-out infinite; }
@keyframes bump { 0%, 45% { transform: scale(1); } 49% { transform: scale(1.06); } 55%, 100% { transform: scale(1); } }
.flow .fix { animation: land 7.5s ease-in-out infinite; }
@keyframes land { 0%, 74% { transform: scale(1); } 79% { transform: scale(1.12); } 86%, 100% { transform: scale(1); } }
.flow .halo { transform-box: fill-box; transform-origin: center; animation: halo 7.5s ease-out infinite; }
@keyframes halo { 0%, 77% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; }}

/* — platform — */
.platform { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); gap: 20px; margin-top: clamp(24px, 3vw, 36px); align-items: start; }
.platform .card h3 { font-size: 23px; margin: 0; }
.platform .card p { margin: 0; }
pre.yaml { margin: var(--space-3) 0 0; padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-md); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--color-text); }
pre.yaml .k { color: var(--color-accent-700); }
pre.yaml .c { color: var(--color-neutral-600); }
.sources { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 8px; }
.sources li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); font-size: 15px; }
.sources li span { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-soft); text-align: right; }
.mcp-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: center; }
.mcp-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
@media (max-width: 900px) { .platform { grid-template-columns: 1fr; } .mcp-card { grid-template-columns: 1fr; } }

/* chips with pulses along the wires */
.wires .wire { stroke-dasharray: 100; }
.wires .pulse { stroke-dasharray: 7 93; stroke-dashoffset: 100; animation: pulse 3.2s linear infinite; }
.wires .pulse:nth-of-type(2) { animation-delay: .5s; }
.wires .pulse:nth-of-type(3) { animation-delay: 1s; }
.wires .pulse:nth-of-type(4) { animation-delay: 1.5s; }
.wires .pulse:nth-of-type(5) { animation-delay: 2s; }
.wires .pulse:nth-of-type(6) { animation-delay: 2.5s; }
.wires .pulse:nth-of-type(7) { animation-delay: .8s; }
.wires .pulse:nth-of-type(8) { animation-delay: 1.9s; }
.wires .pulse:nth-of-type(9) { animation-delay: 2.8s; }
.wires .pulse:nth-of-type(10) { animation-delay: 1.3s; }
@keyframes pulse { to { stroke-dashoffset: 0; } }
.wires .core { animation: breathe 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* — why: numbered reasons — */
.why { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 0; }
.why article { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; padding: 20px 0; border-top: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); align-items: baseline; }
.why article:last-child { border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); }
.why .n { font-family: var(--font-heading); font-style: italic; font-size: 30px; color: var(--color-accent); }
.why h3 { font-size: 24px; margin: 0; }
.why .sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-soft); margin-top: 6px; }
.why p { margin: 0; }
.why .facts { margin-top: 12px; }
@media (max-width: 760px) { .why article { grid-template-columns: 48px minmax(0, 1fr); } .why article p, .why article .facts { grid-column: 2; } }

/* — outcomes: before → after — */
.outcomes { margin-top: clamp(24px, 3vw, 36px); list-style: none; padding: 0; display: grid; gap: 0; }
.outcomes li { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 0; border-top: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); }
.outcomes li:last-child { border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); }
.outcomes .before { color: var(--color-ink-soft); }
.outcomes .after strong { color: var(--color-text); font-weight: 600; }
.outcomes .arr { color: var(--color-accent); display: grid; place-items: center; }
.outcomes .arr svg path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.outcomes li.in .arr svg path { animation: arrow .9s ease-out forwards; }
@keyframes arrow { to { stroke-dashoffset: 0; } }
.outcomes small { display: block; margin-top: 4px; font-size: 14px; }
@media (max-width: 640px) { .outcomes li { grid-template-columns: 1fr; gap: 6px; } .outcomes .arr { justify-content: start; } .outcomes .arr svg { transform: rotate(90deg); } }

/* — beyond the ticket — */
.beyond { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(24px, 3vw, 36px); }
.beyond .card h3 { font-size: 23px; margin: 0; }
.beyond .card p { margin: 0; }
.beyond .sketch { margin-bottom: var(--space-2); max-width: 120px; }
@media (max-width: 760px) { .beyond { grid-template-columns: 1fr; } }
.gap-line { stroke-dasharray: 4 4; animation: blink 2.8s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.drift-b { animation: diverge 5s ease-in-out infinite; transform-origin: left center; }
@keyframes diverge { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
.bug-leg { animation: twitch 1.8s ease-in-out infinite; transform-origin: center; }
.bug-leg:nth-of-type(2) { animation-delay: .4s; }
@keyframes twitch { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }

/* — blog teaser — */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(24px, 3vw, 36px); }
.post { display: flex; flex-direction: column; gap: 10px; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-paper); border: 1px solid var(--color-divider); text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.post .meta { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-soft); display: flex; gap: 10px; }
.post h3 { font-size: 22px; margin: 0; }
.post p { margin: 0; color: var(--color-ink-soft); font-size: 15px; flex: 1; }
.post .more { color: var(--color-accent-700); font-weight: 600; font-size: 15px; }
@media (max-width: 760px) { .posts { grid-template-columns: 1fr; } }

/* — waitlist — */
.waitlist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.waitlist h2 { font-size: clamp(32px, 4.4vw, 50px); }
.wl-form { display: flex; gap: 10px; max-width: 480px; }
.wl-form .input { flex: 1; border-radius: 999px; padding-inline: 18px; }
.wl-form .btn { white-space: nowrap; }
.wl-note { font-size: 14px; color: var(--color-ink-soft); margin-top: 10px; }
.wl-ok { display: none; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-accent-100); border-radius: var(--radius-md); color: var(--color-accent-800); }
.wl-ok.show { display: block; }
.waitlist .tray { width: 100%; max-width: 460px; margin: 0 auto; }
.photo-frame.laptop-frame { width: 100% !important; aspect-ratio: 815 / 590; border-radius: 0; background: var(--color-bg); }
.photo-frame.laptop-frame img, .laptop-frame .laptop-cover { mix-blend-mode: multiply; filter: grayscale(1) sepia(.35) hue-rotate(175deg) saturate(1.6) contrast(1.1) brightness(1.06); }
.photo-frame.laptop-frame::after { content: none; }
.laptop-frame img { position: absolute; width: 122.7%; height: auto; max-width: none; left: -11.04%; top: -5.08%; }
.laptop-cover { position: absolute; left: 44%; top: 75.3%; width: 11.9%; height: 4.6%; background: rgb(231 230 226); box-shadow: 0 0 6px 4px rgb(231 230 226); border-radius: 4px; }
.laptop-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.laptop-overlay text { fill: var(--color-text); font-family: var(--font-body); font-size: 22px; }
.laptop-overlay .h { font-weight: 600; font-size: 23px; }
.laptop-overlay .m { font-family: var(--font-mono); font-size: 18px; }
.laptop-overlay [fill="var(--color-accent)"] { fill: var(--color-accent-700); }
.laptop-overlay .s { fill: var(--color-ink-soft); }
.laptop-overlay .rule { stroke: var(--color-text); stroke-opacity: .12; stroke-width: 1.5; }
.laptop-overlay .live { animation: blink 2.4s ease-in-out infinite; }
html[data-theme="dark"] .photo-frame.laptop-frame img, html[data-theme="dark"] .laptop-frame .laptop-cover { filter: grayscale(1) invert(1) sepia(.35) hue-rotate(175deg) saturate(1.6) contrast(1.05) brightness(.9); mix-blend-mode: screen; }
.wl-row.r0 { animation: wl-row0 10s ease-out infinite; }
.wl-row.r0 .wl-flash { animation: wl-flash0 10s ease-out infinite; }
@keyframes wl-row0 { 0%, 4.0% { opacity: 0; transform: translateY(10px); } 7.0%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wl-flash0 { 0%, 4.0% { opacity: 0; } 6.0% { opacity: 1; } 18.0%, 100% { opacity: 0; } }
.wl-row.r1 { animation: wl-row1 10s ease-out infinite; }
.wl-row.r1 .wl-flash { animation: wl-flash1 10s ease-out infinite; }
@keyframes wl-row1 { 0%, 17.0% { opacity: 0; transform: translateY(10px); } 20.0%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wl-flash1 { 0%, 17.0% { opacity: 0; } 19.0% { opacity: 1; } 31.0%, 100% { opacity: 0; } }
.wl-row.r2 { animation: wl-row2 10s ease-out infinite; }
.wl-row.r2 .wl-flash { animation: wl-flash2 10s ease-out infinite; }
@keyframes wl-row2 { 0%, 30.0% { opacity: 0; transform: translateY(10px); } 33.0%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wl-flash2 { 0%, 30.0% { opacity: 0; } 32.0% { opacity: 1; } 44.0%, 100% { opacity: 0; } }
.wl-row.r3 { animation: wl-row3 10s ease-out infinite; }
.wl-row.r3 .wl-flash { animation: wl-flash3 10s ease-out infinite; }
@keyframes wl-row3 { 0%, 43.0% { opacity: 0; transform: translateY(10px); } 46.0%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wl-flash3 { 0%, 43.0% { opacity: 0; } 45.0% { opacity: 1; } 57.0%, 100% { opacity: 0; } }
.wl-row.r4 { animation: wl-row4 10s ease-out infinite; }
.wl-row.r4 .wl-flash { animation: wl-flash4 10s ease-out infinite; }
@keyframes wl-row4 { 0%, 56.0% { opacity: 0; transform: translateY(10px); } 59.0%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wl-flash4 { 0%, 56.0% { opacity: 0; } 58.0% { opacity: 1; } 70.0%, 100% { opacity: 0; } }
.wl-row.r5 { animation: wl-row5 10s ease-out infinite; }
.wl-row.r5 .wl-flash { animation: wl-flash5 10s ease-out infinite; }
@keyframes wl-row5 { 0%, 69.0% { opacity: 0; transform: translateY(10px); } 72.0%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wl-flash5 { 0%, 69.0% { opacity: 0; } 71.0% { opacity: 1; } 83.0%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wl-row, .wl-row .wl-flash { animation: none !important; } .wl-row .wl-flash { opacity: 0; } }
@media (max-width: 860px) { .waitlist { grid-template-columns: 1fr; } .wl-form { flex-direction: column; } }

/* — footer — */
footer { padding: 28px 0 36px; border-top: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); font-size: 14px; color: var(--color-ink-soft); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
footer nav a { white-space: nowrap; }
footer .wrap > span:not(.credit) { white-space: nowrap; }
.cdown[hidden] { display: none !important; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--color-accent); }
footer img { height: 22px; mix-blend-mode: multiply; }

/* — blog pages — */
.blog-hero { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(20px, 3vw, 32px); max-width: 780px; }
.blog-hero h1 { font-size: clamp(36px, 5vw, 60px); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--space-6); }
.filters .count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-soft); }
.filters .seg-opt { white-space: nowrap; }
.featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-paper); border: 1px solid var(--color-divider); margin: var(--space-6) 0 clamp(32px, 5vw, 56px); }
.featured h2 { font-size: clamp(26px, 3.4vw, 38px); }
.featured h2 a { color: inherit; text-decoration: none; }
.featured h2 a:hover { color: var(--color-accent); }
.featured .cover { position: relative; border-radius: var(--radius-md); overflow: hidden; line-height: 0; margin: 0; }
.featured .cover img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.08) brightness(1.08) sepia(.15); mix-blend-mode: multiply; }
.featured .cover::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); mix-blend-mode: color; opacity: .75; pointer-events: none; }
html[data-theme="dark"] .featured .cover img { mix-blend-mode: normal; filter: grayscale(1) contrast(1.05) brightness(.85) sepia(.15); }
html[data-theme="dark"] .featured .cover::after { opacity: .55; }
@media (max-width: 760px) { .featured { grid-template-columns: 1fr; } }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-top: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); }
.post-list li:last-child { border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); }
.post-list a { display: grid; grid-template-columns: 140px minmax(0, 1fr) 60px; gap: 20px; padding: 24px 0; text-decoration: none; color: inherit; align-items: baseline; }
.post-list a:hover h3 { color: var(--color-accent); }
.post-list .meta { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-soft); display: grid; gap: 4px; }
.post-list h3 { font-size: 23px; margin: 0 0 6px; transition: color .18s; }
.post-list p { margin: 0; color: var(--color-ink-soft); font-size: 16px; }
.post-list .read { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-soft); text-align: right; }
@media (max-width: 640px) { .post-list a { grid-template-columns: 1fr; gap: 8px; } .post-list .read { text-align: left; } }
.upcoming { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
@media (max-width: 760px) { .upcoming { grid-template-columns: 1fr; } }

/* — article — */
.article-head { padding-top: clamp(32px, 4vw, 56px); max-width: 780px; }
.article-head h1 { font-size: clamp(34px, 4.8vw, 56px); }
.article-head .meta { font-family: var(--font-mono); font-size: 13px; color: var(--color-ink-soft); display: flex; gap: 12px; flex-wrap: wrap; }
.article-head .back { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; text-decoration: none; margin-bottom: var(--space-6); }
.prose { max-width: 700px; font-size: 18.5px; line-height: 1.7; padding-bottom: clamp(32px, 4vw, 56px); }
.prose p { margin-bottom: 1.3em; }
.prose h2 { font-size: 30px; margin-top: 1.6em; }
.prose .pull { font-family: var(--font-heading); font-style: italic; font-size: 26px; line-height: 1.4; color: var(--color-accent-800); border-left: 2px solid var(--color-accent); padding-left: 22px; margin: 1.6em 0; }
.prose .box { background: var(--color-paper); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); margin: 2em 0; }
.prose .box h3 { margin-top: 0; }
.prose strong { font-weight: 600; }
.prose a { text-decoration: underline; }
.article-side { position: absolute; right: var(--edge); top: 0; width: 260px; }
@media (max-width: 1100px) { .article-side { display: none; } }
.article-grid { position: relative; }

/* — early access page — */
.ea-hero { padding-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ea-hero h1 { font-size: clamp(36px, 5vw, 60px); }
@media (max-width: 860px) { .ea-hero { grid-template-columns: 1fr; } }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(24px, 3vw, 36px); align-items: stretch; }
.tiers .card h3 { font-size: 24px; margin: 0; }
.tiers .price { font-family: var(--font-heading); font-size: 36px; margin: var(--space-2) 0; }
.tiers .price small { font-family: var(--font-body); font-size: 15px; color: var(--color-ink-soft); }
.tiers ul { margin: var(--space-3) 0 var(--space-4); padding-left: 20px; color: var(--color-text); }
.tiers li + li { margin-top: 6px; }
.tiers .btn { margin-top: auto; }
.tiers .is-featured { background: var(--color-accent-100); border-color: var(--color-accent-300); }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }
.faq { margin-top: clamp(24px, 3vw, 36px); max-width: 780px; }
.faq details { border-top: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); }
.faq summary { cursor: pointer; font-family: var(--font-heading); font-size: 21px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--color-ink-soft); max-width: 62ch; }

/* — compact rhythm: sections at ~70% height; images scale down, never crop — */
section .card { padding: 18px 20px; gap: 6px; }
section .card-body, section .card p { font-size: 15.5px; line-height: 1.5; }
.section-head h2 { margin-bottom: var(--space-2); }
.section-head .lede, .hero .lede { font-size: 18px; line-height: 1.45; margin-bottom: 0; }
.lead { font-size: 17px; }
.hero-head { margin-bottom: var(--space-3); }
.hero { grid-template-columns: minmax(0, 1fr) 230px; }
.photo-frame { width: min(100%, 230px); }
.hero .lede { margin-bottom: var(--space-4); }
.hero-art figcaption { font-size: 12px; margin-top: 6px; }
.compare { gap: 14px; }
.compare .card { min-height: 0; }
.compare .card h3 { font-size: 20px; }
.steps li { padding-bottom: 12px; }
.steps strong { font-size: 18px; }
.steps span { font-size: 12.5px; margin-top: 1px; }
.result .card { padding: 20px 22px; }
.result h4 { font-size: 21px; margin: 4px 0 8px; }
.result p { font-size: 15.5px; margin-bottom: 8px; }
.cites { margin-top: 10px; padding-top: 10px; gap: 6px; }
.how { gap: 14px; }
.how-art { max-width: 640px; margin: 0 auto; }
.how .card h3 { font-size: 20px; }
.platform { gap: 14px; }
.platform .card h3 { font-size: 20px; }
pre.yaml { font-size: 12px; line-height: 1.45; padding: 12px 14px; margin-top: 8px; }
.sources { gap: 4px; margin-top: 8px; }
.sources li { padding-bottom: 4px; font-size: 14.5px; }
.mcp-card { gap: 16px; }
.mcp-card .wires { max-width: 400px; justify-self: center; width: 100%; }
.why article { padding: 12px 0; gap: 4px 18px; }
.why h3 { font-size: 20px; }
.why .n { font-size: 24px; }
.why .sub { margin-top: 2px; font-size: 11px; }
.why p { font-size: 15.5px; line-height: 1.5; }
.why .facts { margin-top: 6px; font-size: 12px; gap: 4px 16px; }
.outcomes li { padding: 9px 0; font-size: 16px; }
.outcomes small { font-size: 13px; margin-top: 2px; }
.beyond { gap: 14px; }
.beyond .sketch { max-width: 76px; margin-bottom: 0; }
.beyond .card h3 { font-size: 20px; }
.posts { gap: 14px; }
.post { padding: 18px 20px; gap: 6px; }
.post h3 { font-size: 19px; }
.post p { font-size: 14.5px; }
.waitlist h2 { font-size: clamp(28px, 3.6vw, 42px); }
section { padding: clamp(26px, 3.2vw, 40px) 0; }
section#top { padding-top: 0; }
.lead { margin-top: 16px; }
.section-head h2.one-line, .section-head h2 { margin-bottom: 6px; }
.compare, .invest, .how, .platform, .why, .outcomes, .beyond, .posts { margin-top: 18px; }
.hero { grid-template-columns: minmax(0, 1fr) 200px; padding-top: 24px; }
.photo-frame { width: min(100%, 200px); }
.facts { gap: 6px 18px; font-size: 12.5px; }
.how-art { max-width: 560px; }
.mcp-card .wires { max-width: 340px; }
.platform .card-body { margin-bottom: 0; }
.outcomes li { padding: 6px 0; }
.result { top: 80px; }
.wl-note { margin: 6px 0 0; }
.waitlist .lede { margin-bottom: 12px; }
.section-head { max-width: none; }
.section-head .lede { max-width: 78ch; }
.steps li { padding-bottom: 9px; }
.steps strong { line-height: 1.2; }
.steps span { line-height: 1.35; }
pre.yaml { font-size: 11.5px; line-height: 1.35; }
@media (min-width: 1180px) { .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
.beyond .card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.beyond .card .sketch { grid-row: 1; max-width: 56px; }
.beyond .card h3 { grid-row: 1; grid-column: 2; }
.beyond .card .card-body { grid-column: 1 / -1; }
.post .meta { font-size: 11.5px; }
.post p { line-height: 1.45; }
.hero .lede { max-width: none; }
.post .meta { white-space: nowrap; flex-wrap: wrap; gap: 4px 10px; line-height: 1.3; }
.hero-head { margin-bottom: 8px; }
.compare ul { margin: 0; padding-left: 18px; }
.compare li + li { margin-top: 2px; }
.compare .card-body, .compare li { font-size: 15px; }
.hero-art figcaption { font-size: 11.5px; line-height: 1.35; }
.how-art { max-width: 500px; }
.platform { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr); }
.steps li { padding-bottom: 6px; }
.steps .num { width: 24px; height: 24px; left: -42px; font-size: 10px; }
.mcp-card .wires { max-width: 300px; }
.platform .card { padding: 16px 18px; }
.waitlist { gap: 24px; }
.hero { grid-template-columns: minmax(0, 1fr) 190px; }
.photo-frame { width: min(100%, 190px); }
.hero .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; gap: 12px; }
.hero .compare .is-dekx { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% + 6px)); }
.hero .compare .card { padding: 14px 16px; }
.hero .compare .card h3 { font-size: 18px; }
@media (max-width: 560px) { .hero .compare { grid-template-columns: 1fr; } .hero .compare .is-dekx { width: 100%; } }

/* ═══ phones ═══ */
.flow-m, .wires-m { display: none; }
@media (max-width: 640px) {
  .flow-d, .wires-d, .bg-photo, .bg-sketch { display: none; }
  .mark { padding: 8px 0; }
  .bar nav a.btn { min-height: 44px; display: inline-flex; align-items: center; }
  footer .wrap > a { display: inline-flex; align-items: center; min-height: 44px; }
  .flow-m { display: block; max-width: 340px; }
  .wires-m { display: block; max-width: 360px !important; margin: 0 auto; }
  /* first section: headline → photo → text → boxes */
  .hero { display: flex; flex-direction: column; gap: 14px; }
  .hero-head { order: 0; margin-bottom: 0; }
  .hero-art { order: 1; max-width: 180px; margin: 0 auto; }
  .photo-frame { width: 180px; }
  .hero > div:not(.hero-head) { order: 2; }
  .hero-head h1 { font-size: clamp(32px, 9vw, 40px); }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  .facts li { display: block; position: relative; padding-left: 14px; white-space: normal; line-height: 1.35; }
  .facts li::before { position: absolute; left: 0; top: .5em; }
  /* header fits one row at 360px */
  .bar { gap: 10px; padding: 6px 14px; }
  .bar nav { gap: 14px; }
  .bar nav a:not(.btn)[href$="#top"] { display: none; }
  .bar nav a { padding: 14px 0; }
  .bar nav a.btn { padding: 10px 14px; }
  .theme { width: 44px; height: 44px; }
  .bar .theme-wrap { grid-template-columns: 44px; }
  /* tap targets ≥ 44px */
  footer nav { gap: 0 20px; }
  footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
  footer .wrap { gap: 8px 24px; }
  footer .wrap { display: grid; justify-content: start; gap: 6px; }
  footer .wrap > span { display: block; white-space: normal !important; }
  .waitlist .tray { justify-self: center; }
  .seg-opt { min-height: 44px; padding-inline: 14px; }
  .filters .count { margin-left: 0; flex-basis: 100%; }
  .faq details { padding: 6px 0; }
  .faq summary { padding: 12px 0; min-height: 44px; font-size: 19px; }
  .lead { font-size: 16px; }
  .lead a { padding: 10px 0; }
  .post-list a { padding: 18px 0; }
  .wl-form .btn, .wl-form .input { min-height: 48px; }
  /* density */
  .section-head h2 { font-size: clamp(26px, 7.4vw, 32px); }
  .section-head h2.one-line { font-size: clamp(24px, 7vw, 30px) !important; }
  .featured { padding: 20px; }
  .result .card { padding: 18px; }
  .why article { grid-template-columns: 36px minmax(0, 1fr); }
  .why .n { font-size: 20px; }
  .prose { font-size: 17.5px; }
  .prose .pull { font-size: 22px; padding-left: 16px; }
  .prose .box { padding: 18px 20px; }
  .tiers .price { font-size: 30px; }
  .article-head .back { white-space: nowrap; min-height: 44px; margin-bottom: 8px; }
  .article-head .meta span { white-space: nowrap; }
  .article-head h1 { font-size: clamp(30px, 8.4vw, 38px); }
}

/* — alternating alignment: sections lean left / right; outer space on the leaning side −35% (phones stay centred) — */
@media (min-width: 761px) {
  #top > .wrap, #how > .wrap, #why > .wrap, #beyond > .wrap, #waitlist > .wrap { margin-left: max(0px, (100% - var(--wrap)) / 2 * .65); margin-right: auto; padding-left: calc(var(--edge) * .65); }
  #investigation > .wrap, #platform > .wrap, #outcomes > .wrap, #log > .wrap { margin-right: max(0px, (100% - var(--wrap)) / 2 * .65); margin-left: auto; padding-right: calc(var(--edge) * .65); }
  #investigation .section-head, #platform .section-head, #outcomes .section-head, #log .section-head { text-align: right; margin-left: auto; }
  #investigation .section-head .lede, #platform .section-head .lede, #outcomes .section-head .lede, #log .section-head .lede { margin-left: auto; }
  #investigation > .wrap > .lead, #platform > .wrap > .lead, #outcomes > .wrap > .lead, #log > .wrap > .lead { justify-content: flex-end; text-align: right; }
  #investigation > .wrap > .lead > *, #platform > .wrap > .lead > *, #outcomes > .wrap > .lead > *, #log > .wrap > .lead > * { flex: 0 1 auto; }
}

/* how-it-works flow: wider for the five-stage diagram */
.how-art.flow-d { max-width: 624px; }
.how-art.flow-m { max-width: 272px !important; }

/* early access: image removed — single column */
.waitlist { grid-template-columns: minmax(0, 1fr) !important; }
.waitlist > div { max-width: none; }
.waitlist .lede { max-width: 78ch; }
@media (min-width: 641px) { #waitlist .waitlist h2 { white-space: nowrap; font-size: clamp(26px, 3.4vw, 42px); } }

/* beyond: photo thumbnails in the sketch slot (same 3:2 box as the drawings) */
.beyond .sketch-photo { position: relative; margin: 0; border-radius: 6px; overflow: hidden; isolation: isolate; line-height: 0; }
.beyond .sketch-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(1.06); }
.beyond .sketch-photo::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); mix-blend-mode: color; opacity: .75; pointer-events: none; }
html[data-theme="dark"] .beyond .sketch-photo img { filter: grayscale(1) contrast(1.05) brightness(.82); }

.wl-note.err { color: var(--color-danger, #a8432f); }
.wl-form.busy .btn { opacity: .6; cursor: progress; }

.beyond .sketch-photo.is-natural img { filter: saturate(1.15) hue-rotate(-6deg) contrast(1.05); }
.beyond .sketch-photo.is-natural::after { content: none; }
html[data-theme="dark"] .beyond .sketch-photo.is-natural img { filter: saturate(1.1) hue-rotate(-6deg) brightness(.85); }

[data-cat][hidden] { display: none !important; }

/* article extras: code, lists, tags */
.prose ul { padding-left: 1.2em; margin: 0 0 1.3em; }
.prose li { margin-bottom: .45em; }
.prose pre { background: var(--color-paper); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 14px 18px; overflow-x: auto; font-size: 13.5px; line-height: 1.55; margin: 0 0 1.3em; }
.prose code { font-family: var(--font-mono); font-size: .88em; }
.prose pre code { font-size: inherit; }
.prose .tags { display: flex; flex-wrap: wrap; gap: 8px 14px; font-family: var(--font-mono); font-size: 13px; color: var(--color-ink-soft); }

/* articles: right-hand space −15% (prose grows into it; side sketch narrows to make room) */
.prose { max-width: min(100%, calc(700px + .15 * (100vw - max(0px, (100vw - var(--wrap)) / 2) - var(--edge) - 700px))); }
.article-side { width: 210px; }