/* Visual direction A — dark editorial (owner-approved 3 October 2026). Loaded last on every page.
   One hue: the purple ramp #26215C → #EEEDFE plus hueless neutrals. Brand #5249EC and the semantic
   ok / warn / error colours keep their app values. tokens.css stays generated and untouched; this
   file re-points the surface and text roles for the website only. See DESIGN.md "Visual direction A". */

@font-face { font-family: "Inter Tight"; src: url("/fonts/inter-tight-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* ── Colour roles ─────────────────────────────────────────────────────────── */
html[data-site] {
  --va-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  --va-reveal: var(--motion-slow);
  /* dark is the default (no-JS and dark system appearance) */
  --bg: #15122F; --surface: #1A1640; --card: #1E1A48; --card-hover: #252052; --card-active: #2B255E;
  --line: #2E2960; --ink: #EEEDFE; --ink-2: #B9B5E4; --ink-3: #6F6AA0;
  --brand-fg: #AFA9EC;
  --ui-strong-line: #4A438A;
  --va-accent: #AFA9EC;
  --va-glow: rgba(127, 119, 221, 0.18);
  --va-title: linear-gradient(180deg, #FFFFFF 0%, #EEEDFE 45%, #CECBF6 100%);
  --va-shadow: 0 24px 64px -28px rgba(6, 4, 22, 0.75);
  --va-shadow-hover: 0 28px 72px -28px rgba(6, 4, 22, 0.85);
  color-scheme: dark;
}
html[data-site][data-theme="light"] {
  --bg: #F8F7FE; --surface: #F1F0FB; --card: #FFFFFF; --card-hover: #F6F5FE; --card-active: #EEEDFE;
  --line: #E2E0F2; --ink: #26215C; --ink-2: #4E4878; --ink-3: #A19DC6;
  --brand-fg: #534AB7;
  --ui-strong-line: #AFA9EC;
  --va-accent: #534AB7;
  --va-glow: rgba(127, 119, 221, 0.09);
  --va-title: linear-gradient(180deg, #26215C 0%, #26215C 50%, #3C3489 100%);
  --va-shadow: 0 24px 56px -32px rgba(38, 33, 92, 0.28);
  --va-shadow-hover: 0 28px 64px -32px rgba(38, 33, 92, 0.36);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html[data-site]:not([data-theme]) {
    --bg: #F8F7FE; --surface: #F1F0FB; --card: #FFFFFF; --card-hover: #F6F5FE; --card-active: #EEEDFE;
    --line: #E2E0F2; --ink: #26215C; --ink-2: #4E4878; --ink-3: #A19DC6; --brand-fg: #534AB7;
    --ui-strong-line: #AFA9EC; --va-accent: #534AB7; --va-glow: rgba(127, 119, 221, 0.09);
    --va-title: linear-gradient(180deg, #26215C 0%, #26215C 50%, #3C3489 100%);
    --va-shadow: 0 24px 56px -32px rgba(38, 33, 92, 0.28); --va-shadow-hover: 0 28px 64px -32px rgba(38, 33, 92, 0.36);
    color-scheme: light;
  }
}

html[data-site] body { background: var(--bg); color: var(--ink); }
html[data-site] .site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); border-bottom-color: var(--line); }
html[data-site] .site-footer { background: var(--surface); border-top-color: var(--line); }

/* ── Type ─────────────────────────────────────────────────────────────────── */
html[data-site] h1,
html[data-site] .workflow-head h2,
html[data-site] .stage-title h2,
html[data-site] .small-things h2,
html[data-site] .files-pricing h2,
html[data-site] .help-group h2,
html[data-site] .cta h2,
html[data-site] .number-card strong {
  font-family: var(--va-display); font-weight: 600;
}
html[data-site] :is(.page-head, .help-hero) h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.04em; }
html[data-site] :is(.workflow-head, .small-things, .files-pricing) h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 32px; }
html[data-site] .stage-title h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.08; letter-spacing: -0.03em; }
html[data-site] main h2 { font-family: var(--va-display); font-weight: 600; letter-spacing: -0.025em; }
html[data-site] .help-group h2, html[data-site] .cta h2 { letter-spacing: -0.025em; }
html[data-site] .number-card strong { font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.04em; }
html[data-site] .eyebrow { font: 500 12px/20px "SF Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--va-accent); }

/* ── Homepage hero: centred title, one soft light behind it, screenshot past the grid ── */
html[data-site] .hero-b { position: relative; display: block; text-align: center; padding: 96px 0 0; isolation: isolate; }
html[data-site] .hero-b::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 0; width: min(1100px, 100vw); height: 640px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--va-glow), transparent);
  filter: blur(64px);
}
html[data-site] .hero-b .hero-copy { display: flex; flex-direction: column; align-items: center; }
html[data-site] .hero-b .eyebrow { padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; margin: 0 0 28px; }
html[data-site] .hero-b .mug-title { flex-direction: column; align-items: center; gap: 20px; }
html[data-site] .hero-b .mug-title .mug-mark { width: 48px; height: 48px; margin: 0; }
html[data-site] .hero-b h1 {
  max-width: 13ch; font-size: clamp(44px, 7.4vw, 96px); line-height: 0.98; letter-spacing: -0.045em;
  background: var(--va-title); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em;
}
html[data-site] .hero-lead { max-width: 620px; margin: 28px 0 32px; font-size: 20px; line-height: 30px; color: var(--ink); }
html[data-site] .hero-b .actions { justify-content: center; }
html[data-site] .hero-status { max-width: 560px; margin-top: 16px; }
/* Perspective stack: three captures on a plane tilted 26°; it settles from 40° as it enters,
   and the side layers part by 16px on hover. Phones get the flat reviewed crop. */
html[data-site], html[data-site] body { overflow-x: clip; }
html[data-site] .hero-stack { width: min(1240px, 100vw - 120px); margin: 72px 0 0 50%; transform: translateX(-50%); perspective: 2400px; perspective-origin: 50% 0%; }
html[data-site] .stack-plane {
  position: relative; aspect-ratio: 16 / 8.6; transform-style: preserve-3d; transform-origin: 50% 0%;
  transform: rotateX(26deg); transition: transform calc(var(--motion-slow) * 4) var(--ease-enter);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 97%); mask-image: linear-gradient(180deg, #000 58%, transparent 97%);
}
html.va-hero-pending .stack-plane { transform: rotateX(40deg) translateY(40px); }
html[data-site] .stack-layer { position: absolute; transition: transform calc(var(--motion-quick) * 4) var(--ease-move); }
html[data-site] .stack-layer img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--va-shadow); }
html[data-site] .stack-back  { width: 42%; left: 2%;  top: 0;   transform: translateZ(-180px); }
html[data-site] .stack-mid   { width: 42%; right: 2%; top: 2%;  transform: translateZ(-120px); }
html[data-site] .stack-front { width: 74%; left: 13%; top: 13%; transform: translateZ(0); }
html[data-site] .stack-front img { border-radius: 16px; }
html[data-site] .hero-stack:hover .stack-back { transform: translateZ(-180px) translateX(-16px); }
html[data-site] .hero-stack:hover .stack-mid  { transform: translateZ(-120px) translateX(16px); }

/* The mug appears only inside the demo data of the captures (owner, 3 October 2026). */
html[data-site] .mug-mark { display: none; }

/* ── Surfaces: 1px line, no glow; screenshots get one soft shadow ───────────── */
html[data-site] :is(.stage-shot, .detail-shot) img { box-shadow: var(--va-shadow); transition: transform var(--motion-slow) var(--ease-enter), box-shadow var(--motion-slow) var(--ease-enter); }
html[data-site] .stage-shot:hover img { transform: translateY(-3px); box-shadow: var(--va-shadow-hover); }
html[data-site] :is(.number-card, .flow, .caption-demo, .files-pricing li, .panel, .help-contact, .contact-card, .author-card, #subscribe) { border-color: var(--line); }
html[data-site] :is(.number-card, .files-pricing li, .flow a) { transition: border-color var(--motion-quick) var(--ease-enter), background-color var(--motion-quick) var(--ease-enter); }
html[data-site] :is(.number-card, .files-pricing li):hover, html[data-site] .flow a:hover { border-color: var(--ui-strong-line); }
html[data-site] .stage { border-top-color: var(--line); padding: 72px 0; }
html[data-site] .pill { background: transparent; }
html[data-site] .button:not(.primary) { background: transparent; }
html[data-site] .button.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
html[data-site] .site-nav a[aria-current="page"] { background: var(--card-active); border-color: var(--line); }

/* ── Scroll reveal (visual-a.js adds .va-js and .is-in) ──────────────────────── */
html.va-js [data-va] { opacity: 0; transform: translateY(16px); transition: opacity var(--va-reveal) var(--ease-enter), transform var(--va-reveal) var(--ease-enter); }
html.va-js [data-va].is-in { opacity: 1; transform: none; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  html[data-site] .hero-b { padding-top: 48px; }
  html[data-site] .hero-b::before { height: 420px; filter: blur(48px); }
  html[data-site] .hero-lead { font-size: 18px; line-height: 27px; margin: 20px 0 24px; }
  html[data-site] .hero-stack { width: calc(100vw - 32px); margin-top: 40px; perspective: none; }
  html[data-site] .stack-plane, html.va-hero-pending .stack-plane { aspect-ratio: auto; transform: none; -webkit-mask-image: none; mask-image: none; }
  html[data-site] .stack-back, html[data-site] .stack-mid { display: none; }
  html[data-site] .stack-front { position: static; width: 100%; transform: none; }
  html[data-site] .stack-front img { border-radius: 12px; }
  html[data-site] .stage { padding: 40px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.va-js [data-va] { transform: none; transition: opacity var(--motion-instant) var(--ease-enter); }
  html[data-site] .stage-shot:hover img { transform: none; }
  html.va-hero-pending .stack-plane { transform: rotateX(26deg); }
  html[data-site] .stack-plane, html[data-site] .stack-layer { transition: none; }
}
html[data-site] .hero-b + .numbers { margin-top: 48px; }
html[data-site] .stage-shot figcaption { margin-top: 12px; font-size: 13px; line-height: 19.5px; color: var(--ink-2); }
html[data-site] .stage-shot-compare img { padding: 0; }

/* ── How it works map ───────────────────────────────────────────────────── */
html[data-site] .hiw { margin: 0 0 32px; }
html[data-site] .hiw-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
html[data-site] .hiw-stage { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); min-width: 0; }
html[data-site] .hiw-head { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
html[data-site] .hiw-head strong { font-family: var(--va-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
html[data-site] .hiw-head .icon { width: 18px; height: 18px; color: var(--va-accent); }
html[data-site] .hiw-num { font: 500 12px/1 "SF Mono", ui-monospace, Menlo, monospace; color: var(--ink-2); }
html[data-site] .hiw-stage > .pill { align-self: flex-start; }
html[data-site] .hiw-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; position: relative; }
html[data-site] .hiw-steps::before { content: ""; position: absolute; left: 19px; top: 18px; bottom: 18px; border-left: 1px solid var(--line); }
html[data-site] .hiw-node { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) 8px; gap: 10px; align-items: start; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--ink); text-decoration: none; transition: border-color var(--motion-quick) var(--ease-enter), background-color var(--motion-quick) var(--ease-enter); }
html[data-site] .hiw-node .icon { width: 18px; height: 18px; color: var(--ink-2); background: var(--card); position: relative; }
html[data-site] .hiw-node:hover, html[data-site] .hiw-node:focus-visible { border-color: var(--ui-strong-line); background: var(--card-hover); }
html[data-site] .hiw-node:hover .icon { color: var(--brand-fg); }
html[data-site] .hiw-text { display: grid; gap: 2px; min-width: 0; }
html[data-site] .hiw-text strong { font-size: 14px; font-weight: 500; line-height: 20px; }
html[data-site] .hiw-text span { font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
html[data-site] .hiw-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; display: inline-block; flex: none; }
html[data-site] .hiw-ok { background: var(--ok); } html[data-site] .hiw-demo { background: var(--warn); } html[data-site] .hiw-soon { background: var(--ink-3); }
html[data-site] .hiw-legend { display: flex; flex-wrap: wrap; gap: 20px; margin: 16px 0 0; font-size: 13px; color: var(--ink-2); }
html[data-site] .hiw-legend > span { display: inline-flex; align-items: center; gap: 8px; }
html[data-site] .hiw-legend .hiw-dot { margin: 0; }
html[data-site] .pill.status-soon .dot { background: var(--ink-3); }

/* ── ComfyUI guide, Docs, Connections ───────────────────────────────────── */
html[data-site] .comfy-compact { grid-column: 1 / -1; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
html[data-site] .comfy-compact h3 { margin: 0 0 16px; font-family: var(--va-display); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
html[data-site] .docs-steps { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 8px; }
html[data-site] .docs-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 15px; line-height: 22px; }
html[data-site] .docs-steps li > .pill { min-height: 22px; font-size: 12px; white-space: nowrap; }
html[data-site] .docs-steps li:not(:has(.pill)) { grid-template-columns: 20px minmax(0, 1fr); }
html[data-site] .docs-steps .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--va-accent); }
html[data-site] .docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 64px; }
html[data-site] .docs-toc { position: sticky; top: 88px; font-size: 14px; }
html[data-site] .docs-toc p { margin: 0 0 12px; font: 500 12px/20px "SF Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
html[data-site] .docs-toc ol { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--line); display: grid; gap: 8px; }
html[data-site] .docs-toc a { color: var(--ink-2); text-decoration: none; }
html[data-site] .docs-toc a:hover { color: var(--ink); }
html[data-site] .docs-section { padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
html[data-site] .docs-section:first-child { border-top: 0; padding-top: 8px; }
html[data-site] .docs-section h2 { margin: 8px 0 0; }
html[data-site] .docs-section h3 { margin: 24px 0 8px; font-size: 18px; }
html[data-site] .docs-section .stage-title { display: flex; align-items: center; gap: 16px; }
html[data-site] .conn-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
html[data-site] .conn-list li { display: grid; grid-template-columns: 160px auto; gap: 8px 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
html[data-site] .conn-list li > span:last-child { grid-column: 1 / -1; font-size: 15px; line-height: 22px; color: var(--ink-2); }
html[data-site] .conn-list .pill { justify-self: start; }

/* ── Roadmap ────────────────────────────────────────────────────────────── */
html[data-site] .rm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
html[data-site] .rm-col { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
html[data-site] .rm-col h2 { margin: 0; font-family: var(--va-display); font-size: 28px; letter-spacing: -0.03em; }
html[data-site] .rm-sub { margin: 4px 0 16px; font-size: 14px; color: var(--ink-2); }
html[data-site] .rm-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
html[data-site] .rm-col li { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
html[data-site] .rm-col li strong { font-size: 15px; font-weight: 600; }
html[data-site] .rm-col li span { font-size: 14px; line-height: 21px; color: var(--ink-2); }
html[data-site] .rm-note { margin: 32px 0 64px; font-size: 14px; color: var(--ink-2); }

@media (max-width: 1100px) { html[data-site] .hiw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  html[data-site] .hiw-grid, html[data-site] .rm-grid { grid-template-columns: 1fr; }
  html[data-site] .docs-layout { grid-template-columns: 1fr; gap: 24px; }
  html[data-site] .docs-toc { position: static; }
}
@media (max-width: 600px) {
  html[data-site] .docs-steps li { grid-template-columns: 20px minmax(0, 1fr); }
  html[data-site] .docs-steps li > .pill { grid-column: 2; justify-self: start; }
  html[data-site] .conn-list li { grid-template-columns: 1fr; }
}
html[data-site] .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-site] .hiw-dot { position: relative; }

/* October completion: restrained interaction overrides requested by the owner. */
html[data-site] { --va-rise:12px; --va-lift:-2px; --va-zoom:1.01; }
html[data-site] main { animation:none; }
html[data-site] .theme-toggle { display:inline-flex; }
html[data-site] :is(body,.site-header,.site-footer,.number-card,.panel,.hiw-stage,.rm-col,.docs-steps li,.conn-list li,.author-card,.contact-card,.caption-demo,.cd-row,.stage-copy,h2,p) { transition:background-color var(--motion-quick) var(--ease-enter),color var(--motion-quick) var(--ease-enter),border-color var(--motion-quick) var(--ease-enter); }
html[data-site] .site-header { border-bottom-color:transparent; }
html[data-site] .site-header.is-scrolled { border-bottom-color:var(--line); background:color-mix(in srgb,var(--bg) 96%,transparent); }
html[data-site] :is(.number-card,.files-pricing li,.hiw-stage,.rm-col,.contact-card) { transition:transform var(--motion-quick) var(--ease-move),border-color var(--motion-quick) var(--ease-enter),box-shadow var(--motion-quick) var(--ease-enter),background-color var(--motion-quick) var(--ease-enter); }
@media(hover:hover) {
  html[data-site] :is(.number-card,.files-pricing li,.hiw-stage,.rm-col,.contact-card):hover { transform:translateY(var(--va-lift)); border-color:var(--ui-strong-line); box-shadow:0 8px 24px -20px rgba(6,4,22,.45); }
  html[data-site] :is(.stage-shot,.detail-shot):hover img { transform:scale(var(--va-zoom)); box-shadow:var(--va-shadow-hover); }
}
html[data-site] :is(.text-link,.docs-toc a,.site-footer li a) { text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:left bottom; background-size:0 1px; transition:background-size var(--motion-quick) var(--ease-move),color var(--motion-quick) var(--ease-enter); }
html[data-site] :is(.text-link,.docs-toc a,.site-footer li a):is(:hover,:focus-visible) { background-size:100% 1px; }
html[data-site] :is(button,.button):active:not(:disabled) { transform:scale(var(--press-scale)); }
html[data-site] :focus-visible { outline:3px solid var(--brand-fg); outline-offset:4px; }
html[data-site] .site-nav { position:relative; isolation:isolate; }
html[data-site] .nav-pill { position:absolute; z-index:-1; border:1px solid var(--line); border-radius:999px; background:var(--card-active); transform-origin:left center; pointer-events:none; }
html[data-site] .site-nav.has-pill a[aria-current=page] { background:transparent; border-color:transparent; }
html[data-site] .hero-stack { translate:0 var(--parallax,0px); }
html[data-site] .stack-plane { transform:rotateX(calc(26deg + var(--tilt-x,0deg))) rotateY(var(--tilt-y,0deg)); transition:transform var(--motion-quick) var(--ease-move); }
html[data-site] .hiw-steps::before { transition:border-color var(--motion-quick) var(--ease-enter); }
html[data-site] .hiw-steps:has(a:is(:hover,:focus-visible))::before { border-color:var(--brand-fg); }
html[data-site] .flow-stages:has(a:is(:hover,:focus-visible)) { border-color:var(--brand-fg); }
html[data-site] .stage-shot { position:relative; }
html[data-site] .stage-shot .image-enlarge { margin-top:12px; }
html[data-site] .theme-pair { display:grid; min-width:0; }
html[data-site] .theme-pair > picture { display:block; grid-area:1/1; min-width:0; opacity:0; pointer-events:none; transition:opacity var(--motion-quick) var(--ease-enter); }
html[data-site][data-theme=dark] .theme-pair > .theme-dark,
html[data-site][data-theme=light] .theme-pair > .theme-light { opacity:1; pointer-events:auto; }
html[data-site]:not([data-theme]) .theme-pair > .theme-dark { opacity:1; pointer-events:auto; }
@media(prefers-color-scheme:light) {
 html[data-site]:not([data-theme]) .theme-pair > .theme-dark { opacity:0; }
 html[data-site]:not([data-theme]) .theme-pair > .theme-light { opacity:1; }
}
html[data-site] .image-pending { opacity:0; }
html[data-site] .image-pending.image-ready { opacity:1; transition:opacity var(--motion-quick) var(--ease-enter),transform var(--motion-slow) var(--ease-enter),box-shadow var(--motion-slow) var(--ease-enter); }
html[data-site] .author-mark { display:grid; place-items:center; background:var(--surface); padding:32px; }
html[data-site] .author-mark img { width:128px; height:128px; aspect-ratio:1; object-fit:contain; }
/* Reserve every alternative caption's size while showing only its active state. */
html[data-site] .cd-row > div { display:grid; }
html[data-site] .cd-file { grid-area:1/1; }
html[data-site] .cd-text { display:block; grid-area:2/1; visibility:hidden; }
html[data-site] [data-step=preview] .cd-diff,
html[data-site] [data-step=apply] .cd-after,
html[data-site] [data-step=undo] .cd-row:not(.cd-edited) .cd-before,
html[data-site] [data-step=undo] .cd-edited .cd-later { visibility:visible; }
html[data-site] .cd-status { display:grid; }
html[data-site] .cd-status span { display:block; grid-area:1/1; visibility:hidden; }
html[data-site] [data-step=preview] [data-cd-for=preview],
html[data-site] [data-step=apply] [data-cd-for=apply],
html[data-site] [data-step=undo] [data-cd-for=undo] { visibility:visible; }
html[data-site] [data-step=apply] .cd-mark { background:transparent; }
html[data-site] .cd-mark::after { content:'✓'; display:block; color:var(--ok); opacity:0; scale:.8; transition:opacity var(--motion-quick) var(--ease-enter),scale var(--motion-quick) var(--ease-enter); }
html[data-site] [data-step=apply] .is-written .cd-mark::after { opacity:1; scale:1; }
html[data-site] [data-step=apply] .is-written { border-color:var(--ui-strong-line); }
html[data-site] .back-top { position:fixed; left:24px; bottom:24px; z-index:25; border:1px solid var(--ui-strong-line); border-radius:999px; padding:12px 16px; background:var(--card); color:var(--ink); opacity:0; visibility:hidden; transform:translateY(var(--va-rise)); transition:opacity var(--motion-quick) var(--ease-enter),transform var(--motion-quick) var(--ease-enter),visibility var(--motion-quick); }
html[data-site] .back-top.is-visible { opacity:1; visibility:visible; transform:none; }
html[data-site] .message-launch { animation-timing-function:var(--ease-move); }
html[data-site] .image-viewer { background:var(--card); }
@media(max-width:960px) { html[data-site] .nav-pill { display:none; } html[data-site] .site-nav.has-pill a[aria-current=page] { background:var(--card-active);border-color:var(--line); } }
@media(max-width:760px), (max-width:1024px) and (max-height:500px) {
 html[data-site] { --va-rise:6px; --va-lift:-1px; --va-zoom:1.005; }
 html[data-site] .stack-plane { transform:none; }
 html[data-site] :is(button,.button):active:not(:disabled) { transform:scale(.985); }
 html[data-site] .back-top { left:16px; bottom:24px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
 html[data-site] .hero-stack { translate:none; }
 html[data-site] .stack-plane { transform:none; }
 html[data-site] :is(.number-card,.files-pricing li,.hiw-stage,.rm-col,.contact-card):hover,
 html[data-site] :is(.stage-shot,.detail-shot):hover img,
 html[data-site] :is(button,.button):active:not(:disabled) { transform:none; }
}
html[data-site] .controls { display:flex; flex:none; margin-left:0; }
@media(min-width:961px) { html[data-site] .site-nav { gap:2px; } html[data-site] .site-nav a { padding-inline:10px; } }
@media(max-width:960px) { html[data-site][data-ui-ready] .site-nav { position:absolute; } html[data-site] .nav-toggle { margin-left:auto; } }

/* Mobile reading pass, 3 October 2026.
   One place for the phone type scale, tap size and clearance.
   Desktop rules above stay. Does not restyle screenshots. */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  html[data-site] .hero-b { padding-top: 24px; }
  html[data-site] .hero-b h1 {
    max-width: 18ch;
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.03em;
  }
  html[data-site] :is(.page-head, .help-hero) h1 {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.03em;
  }
  html[data-site] main h2,
  html[data-site] :is(.workflow-head, .small-things, .files-pricing) h2,
  html[data-site] .stage-title h2,
  html[data-site] .rm-col h2,
  html[data-site] .docs-section h2 {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  html[data-site] .hero-lead,
  html[data-site] .stage-line,
  html[data-site] .use-cases {
    font-size: 16px;
    line-height: 1.55;
  }
  html[data-site] .hero-lead { margin: 12px 0 16px; }
  html[data-site] .hero-stack { margin-top: 16px; }
  html[data-site] .stage { padding: 32px 0; }
  html[data-site] .number-card strong { font-size: 28px; line-height: 1.15; }
  html[data-site] .site-header .brand-group,
  html[data-site] .site-header .brand { flex: none; }
  html[data-site] .brand { min-height: 44px; }
  html[data-site] .theme-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
  html[data-site] .nav-toggle { position: relative; }
  @media (max-width: 420px) {
    html[data-site] .nav-toggle span {
      position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    }
    html[data-site] .nav-toggle { width: 44px; min-width: 44px; padding-inline: 0; }
  }
  html[data-site] .hiw-head { min-height: 44px; }
  html[data-site] .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-site] :is(input, textarea, select) { font-size: 16px; }
  html[data-site] body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  html[data-site] body:has(main :is(input, textarea):focus) :is(.message-widget, .back-top) { visibility: hidden; }
}
@media (max-width: 1024px) and (max-height: 500px) {
  html[data-site] .hero-b { padding-top: 8px; }
  html[data-site] .hero-lead { margin: 8px 0; }
}