/* Workshop home POCs -- shared base. Consumes static/shared/tokens.css.
   Paper, ink, one signal. Hairlines, not shadows. Inter speaks, Mono measures. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Undo the app-shell lock in tokens.css. The window is the ONE scroller:
   overflow on body stays visible, because a body that is its own scroll box
   nests inside the viewport's, and on a phone the finger's scroll caught in
   the inner one stuck mid-page and short of the foot (2026-09-24). */
html, body { height: auto; width: auto; }
html { overflow-x: hidden; }
body { overflow: visible; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }

/* -- Top bar ------------------------------------------------------------- */
.top {
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--paper-edge);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; color: var(--ink-mute); }
.brand img { width: 22px; height: 22px; }
.brand b { color: var(--ink); font-weight: 500; letter-spacing: .14em; }
.top-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.top-nav a { color: var(--ink-mute); }
.top-nav a:hover { color: var(--ink); }
.top-nav .btn { color: var(--ink); }

/* -- Buttons: outlined = action, filled = state ------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--pencil); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: border-color var(--dur-hover), background var(--dur-hover);
}
/* Brand 06: hover is a 1px accent outline. The ink slab is RETIRED; .ink and
   .btn-primary both take the tokens.css primary: outlined accent, glow on hover. */
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn.ink, .btn.btn-primary { background: var(--paper); border-color: var(--accent); color: var(--accent); }
.btn.ink:hover, .btn.btn-primary:hover { background: var(--accent-glow); }
.btn.ink .stamp { color: var(--accent); opacity: .7; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn .stamp { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); font-weight: 400; }

.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--pencil); color: var(--ink-mute); background: var(--paper);
}
.tag.state { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag.warm { background: var(--paper-warm); border-color: var(--paper-warm); }

/* -- Demo frame ----------------------------------------------------------- */
.demo {
  position: relative;
  border: 1px solid var(--pencil); border-radius: var(--r-lg);
  background: var(--paper-warm);
  overflow: hidden;
}
.demo-bar {
  height: 44px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 0 12px; border-bottom: 1px solid var(--paper-edge); background: var(--paper);
}
.seg { display: inline-flex; border: 1px solid var(--pencil); border-radius: var(--r-sm); padding: 2px; gap: 2px; background: var(--paper); }
.seg button { height: 26px; padding: 0 12px; border-radius: var(--r-xs); font-size: 13px; font-weight: 500; color: var(--ink-mute); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--accent); color: #fff; }
.demo-bar-right { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-mute); }
.demo-stage { position: relative; aspect-ratio: 16 / 9.4; background: var(--paper-warm); }
/* --fw/--fh/--fs (demo.js fitFrames): when the stage is narrower than
   the tools' desktop shell, the frame renders at the shell's minimum width
   and scales down to fit, so the tool is never clipped or flipped into its
   phone layout inside a desktop page. Unset = the frame fills the stage. */
.demo-stage iframe { position: absolute; inset: 0; width: var(--fw, 100%); height: var(--fh, 100%); transform: scale(var(--fs, 1)); transform-origin: 0 0; border: 0; background: var(--paper-warm); opacity: 0; transition: opacity var(--dur-enter) var(--ease); }
.demo-stage iframe.show { opacity: 1; }
.demo-stage iframe.live { pointer-events: auto; }

/* take-control veil: sits over the iframe while the script runs */
.veil {
  position: absolute; inset: 0; z-index: 5; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px;
  background: transparent; transition: background var(--dur-state);
}
.veil:hover { background: rgba(255,255,255,.28); }
.veil .cta {
  transform: translateY(6px); opacity: 0;
  transition: opacity var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px 0 12px;
  background: var(--ink); color: var(--paper); border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-float);
}
.veil .cta .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-ink); }
.veil:hover .cta, .veil:focus-visible .cta { opacity: 1; transform: none; }
.veil.off { display: none; }

/* scripted cursor: one blue dot with a soft ring, drawn in the parent */
.cur {
  position: absolute; z-index: 6; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  pointer-events: none; opacity: 0;
  transition: transform 900ms cubic-bezier(.3,.9,.25,1), opacity var(--dur-state);
}
.cur.show { opacity: 1; }
.cur::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.cur::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--accent); opacity: .35; transition: transform 240ms var(--ease), opacity 240ms; }
.cur.press::after { transform: scale(.55); opacity: .9; }
.cur.press::before { transform: scale(.85); }


.demo-restart { display: none; }
.demo.taken .demo-restart { display: inline-flex; }
.demo.taken .demo-live-note { display: inline-flex; }
.demo-live-note { display: none; align-items: center; gap: 6px; }
.demo-live-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* -- Module cards --------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.card { border: 1px solid var(--paper-edge); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; display: flex; flex-direction: column; }
.card .thumb { aspect-ratio: 4 / 3; background: var(--paper-warm); overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.card .cap-line { color: var(--ink-mute); font-size: 14px; }
.card .acts { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.card .plus { font-size: 13px; color: var(--ink-mute); display: none; }
.card .plus a { color: var(--accent); }
.card.dashed { border-style: dashed; }
.card.dashed .thumb { opacity: .6; }

/* -- Process strip: reads as a drawing sheet ------------------------------- */
.process { border-top: 1px solid var(--ink-soft); border-bottom: 1px solid var(--paper-edge); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); }
.step { padding: 22px 20px 26px 0; border-right: 1px solid var(--paper-edge); margin-right: 20px; }
.step:last-child { border-right: 0; margin-right: 0; }
.step .n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.step h3 { color: var(--ink); font-size: 16px; font-weight: 500; margin: 6px 0 6px; letter-spacing: -.005em; }
.step p { font-size: 14px; color: var(--ink-mute); max-width: 30ch; }
.step .out { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.step .who { margin-top: 10px; font-size: 12px; color: var(--ink-mute); }

/* -- Typography ------------------------------------------------------------ */
h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.025em; font-weight: 500; max-width: 14ch; }
.lede { font-size: 18px; line-height: 1.45; color: var(--ink-mute); max-width: 52ch; }
h2 { font-size: 24px; letter-spacing: -.015em; font-weight: 500; }
.sub { color: var(--ink-mute); font-size: 15px; }

section { padding: 40px 0; }
.foot { padding: 28px 0 48px; font-size: 13px; color: var(--ink-mute); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot a { color: var(--ink); }

/* -- Persona (POC only): who is looking at the page --------------------- */
.for-rep, .for-staff, .for-visitor, .for-signed { display: none !important; }
body[data-persona="visitor"] .for-visitor { display: revert !important; }
body[data-persona="customer"] .for-signed,
body[data-persona="rep"] .for-signed,
body[data-persona="staff"] .for-signed { display: revert !important; }
body[data-persona="rep"] .for-rep, body[data-persona="staff"] .for-rep { display: revert !important; }
body[data-persona="staff"] .for-staff { display: revert !important; }
body[data-persona="staff"] .card .plus { display: block; }

.persona {
  position: fixed; left: 16px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  background: var(--ink); color: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-float);
  font-family: var(--font-mono); font-size: 11px;
}
.persona .seg { border-color: rgba(255,255,255,.25); background: transparent; }
.persona .seg button { color: rgba(255,255,255,.7); font-family: var(--font-body); }
.persona .seg button.on { background: var(--accent); color: #fff; }
.persona a { color: rgba(255,255,255,.7); margin-left: 6px; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--paper-edge); margin-right: 0; padding-right: 0; }
  .step:last-child { border-bottom: 0; }
  .demo-stage { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .cur { transition: none; }
}

/* ==========================================================================
   Landing D + Studio (Stable / Alpha lanes). See docs/specs/Stable Alpha Split.md
   ========================================================================== */

/* Alpha is a token remap on the root, never a second component stylesheet. */
html[data-lane="alpha"] {
  color-scheme: dark;
  --paper: #1A1816; --paper-warm: #232019; --paper-deep: #2A2723;
  --paper-edge: #3A3733; --pencil: #4A463F;
  --ink: #F4F2ED; --ink-soft: #DCD8CF; --ink-mute: #A39C8E; --graphite: #C8C2B6;
  --accent: var(--accent-ink); --accent-deep: #5A8BFF;
  --section-rule: #3A3733;
  --shadow-canvas: 0 2px 6px rgba(0,0,0,.45);
}
html[data-lane="alpha"] body { background: var(--paper); color: var(--ink); }

/* Lane switcher bar: renders only for alpha personas (see .for-alpha). */
.lane-bar { border-bottom: 1px solid var(--paper-edge); background: var(--paper); }
.lane-bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 44px; gap: 18px; }
.lane-bar .lane-right { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--ink-mute); }
.lane-bar .lane-right a { color: var(--ink-mute); }
.lane-bar .lane-right a:hover { color: var(--ink); }
.lane-seg a { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: var(--r-xs); font-size: 13px; font-weight: 500; color: var(--ink-mute); }
.lane-seg a:hover { color: var(--ink); }
.lane-seg a.on { background: var(--accent); color: #fff; }
.lane-seg .stamp { font-family: var(--font-mono); font-size: 11px; font-weight: 400; opacity: .75; }
html[data-lane="alpha"] .lane-bar { border-bottom-color: var(--accent); }

/* Landing D: centered hero, demo directly under it (promo v1 placement). */
.hero-d { text-align: center; padding: 56px 0 30px; }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow .arrow { color: var(--accent); font-size: 14px; letter-spacing: 0; }
.hero-d h1 { margin: 14px 0 8px; }
.hero-d .subhead { font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.hero-d .lede { margin: 16px auto 0; }
.hero-d .hero-cta { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* Studio: tile-first modules. One anchor per tile, nothing else on it. */
.studio-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 36px 0 22px; }
.studio-head .stamp-line { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tile { display: block; border: 1px solid var(--paper-edge); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; color: var(--ink); transition: border-color var(--dur-hover), transform var(--dur-state) var(--ease); }
.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.tile .thumb { aspect-ratio: 4 / 3; background: var(--paper-warm); overflow: hidden; }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .body { padding: 14px 16px 16px; }
.tile .name { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.tile .cap-line { color: var(--ink-mute); font-size: 14px; margin-top: 4px; }
.tile.preview { border-style: dashed; }
.tile.preview .thumb { opacity: .7; }

.studio-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; padding: 40px 0 48px; border-top: 1px solid var(--paper-edge); margin-top: 36px; }
.studio-cols h2 { font-size: var(--text-lg); margin-bottom: 12px; }
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--paper-edge); font-size: 14px; }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; }
.row .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.row a { color: var(--ink); }
.row a:hover { color: var(--accent); }

.stable-frame { display: block; width: 100%; height: calc(100vh - 44px); border: 0; background: var(--paper); }
body[data-persona="stable"] .stable-frame { height: 100vh; }

/* Persona visibility for the lane POCs */
.for-alpha, .for-stable, .for-public { display: none !important; }
body[data-persona="alpha"] .for-alpha { display: revert !important; }
body[data-persona="stable"] .for-stable { display: revert !important; }
body[data-persona="public"] .for-public { display: revert !important; }
.lane-bar.for-alpha { display: none !important; }
body[data-persona="alpha"] .lane-bar.for-alpha { display: block !important; }

@media (max-width: 900px) { .studio-cols { grid-template-columns: 1fr; } }

/* The persona chip is POC chrome, not part of either lane: pin its colours. */
html[data-lane="alpha"] .persona { background: #2A2723; color: #F4F2ED; border: 1px solid #4A463F; }

/* -- Landing D, round 2 ---------------------------------------------------- */
.home-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.top { background: transparent; }
.top .motto { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; }
.top .motto .arrow { color: var(--accent); font-size: 14px; letter-spacing: 0; }
.hero-d { padding: clamp(40px, 6vw, 72px) 0 26px; }
.hero-d h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; margin: 0 auto 14px; max-width: 20ch; }
.hero-d .subhead { font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.hero-d .lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; max-width: 58ch; margin: 14px auto 0; }
.hero-d .hero-cta { margin-top: 22px; }
.demo-bar { position: relative; }
.demo-bar .demo-ctl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@keyframes ctl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(36,95,240,.45); background: var(--accent-glow); }
  8%   { box-shadow: 0 0 0 12px rgba(36,95,240,0); background: var(--paper); }
  100% { box-shadow: 0 0 0 0 rgba(36,95,240,0); background: var(--paper); }
}
.demo-ctl.pulse { animation: ctl-pulse 7s ease-out infinite; }
.demo-ctl.pulse:hover { animation: none; }
.demo .veil .cta { display: none; }
@media (prefers-reduced-motion: reduce) { .demo-ctl.pulse { animation: none; } }
@media (max-width: 900px) { .demo-bar .demo-ctl { position: static; transform: none; order: 3; width: 100%; justify-content: center; margin-top: 8px; } .demo-bar { flex-wrap: wrap; } .top .motto { display: none; } }

/* -- Landing D, round 3: tighter hero, hover helper, faster cursor --------- */
.hero-d { padding: clamp(22px, 3.2vw, 38px) 0 16px; }
.hero-d h1 { margin-bottom: 8px; }
.hero-d .lede { margin-top: 10px; }
.hero-d .hero-cta { margin-top: 14px; }
.top-nav .btn.btn-primary { color: var(--accent); }
.cur { transition: transform 620ms cubic-bezier(.3,.9,.25,1), opacity var(--dur-state); }
.veil:hover { background: rgba(255,255,255,.10); cursor: pointer; }

/* Hover helper: a paper label riding above the pointer, and a soft accent
   glow beneath it that follows the hand. Both are stage-positioned by the
   driver; only their offsets live here. */
.demo-stage .glow {
  position: absolute; z-index: 4; left: 0; top: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(36,95,240,.22) 0%, rgba(36,95,240,.10) 38%, rgba(36,95,240,0) 70%);
  transition: opacity 260ms var(--ease);
}
.demo-stage .glow.show { opacity: 1; }
.demo-stage .hint {
  position: absolute; z-index: 7; left: 0; top: 0; pointer-events: none;
  padding: 7px 12px; border-radius: var(--r-md);
  background: var(--paper); color: var(--ink); border: 1px solid var(--accent);
  font-size: 13px; font-weight: 500; white-space: nowrap; letter-spacing: -.005em;
  box-shadow: var(--shadow-float), 0 0 0 4px rgba(36,95,240,.10);
  opacity: 0; transition: opacity 180ms var(--ease);
}
.demo-stage .hint::before {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px;
  background: var(--paper); border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
}
.demo-stage .hint { margin: -50px 0 0; }
.demo-stage .hint { translate: -50% 0; }
.demo-stage .hint.show { opacity: 1; }
@media (hover: none) { .demo-stage .hint, .demo-stage .glow { display: none; } }
@media (prefers-reduced-motion: reduce) { .cur { transition: none; } }

/* -- Landing D: How it works as a process flow (promo v1 nodes), real project rows -- */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3.5vw, 44px); }
.p-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); }
.process h2, .flow-real h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.process { border-top: 1px solid var(--paper-edge); border-bottom: 0; padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 56px); }
.flow { --flow-gap: clamp(24px, 4vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--flow-gap); }
.flow-step { position: relative; }
.flow-num {
  width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--ink);
}
.flow-step:not(:last-child)::before { content: ''; position: absolute; top: 22px; left: 52px; right: calc(-1 * var(--flow-gap) - 8px); height: 1px; background: var(--ink); }
.flow-step h3 { font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; letter-spacing: -.015em; margin: 14px 0 8px; color: var(--ink); }
.flow-step p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); max-width: 36ch; }
.flow-step .out { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.flow-step .out .tag { color: var(--ink); border-color: var(--ink-soft); height: 22px; font-size: 11px; }

@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; }
  .flow-step { padding-left: 60px; }
  .flow-num { position: absolute; left: 0; top: 0; }
  .flow-step:not(:last-child)::before { top: 52px; left: 22px; bottom: calc(-1 * var(--flow-gap) - 8px); width: 1px; height: auto; right: auto; }
}

/* -- Take-control prompt: hover helper on pointer screens, bar button on touch -- */
.demo-bar .demo-ctl { display: none; }
/* A pure player (mountDemo control:false): the veil neither invites nor
   reacts, and the bar never offers Take control. */
.demo.no-control .veil { cursor: default; }
.demo.no-control .veil:hover { background: transparent; }
.demo.no-control .demo-bar .demo-ctl, .demo.no-control .demo-stage .hint, .demo.no-control .demo-stage .glow { display: none !important; }
.demo.taken .demo-bar .demo-ctl { display: inline-flex; animation: none; }
@media (hover: none) { .demo-bar .demo-ctl { display: inline-flex; } }
@media (max-width: 900px) {
  .demo-bar { height: auto; padding-top: 8px; padding-bottom: 8px; }
  .demo-bar .demo-ctl { margin-top: 8px; }
}
@media (max-width: 600px) { .top-nav a:not(.btn) { display: none; } }

/* -- Landing D, round 4: subhead voice, bolder lower sections, flow arrows --- */
.hero-d .subhead { font-style: italic; font-weight: 500; letter-spacing: -.005em; }
.hero-d .lede { max-width: 66ch; }
.process h2, .flow-real h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -.025em; }
.process { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 88px); }
.flow-num { width: 56px; height: 56px; font-size: 15px; }
.flow-step:not(:last-child)::before { top: 28px; left: 64px; }
.flow-step h3 { font-size: clamp(22px, 2.2vw, 30px); margin: 20px 0 10px; }
.flow-step p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; max-width: 34ch; }
.flow-step .out { margin-top: 16px; gap: 8px; }
.flow-step .out .tag { height: 26px; font-size: 12px; padding: 0 9px; }
/* From the Workshop.. to the Install (real-row.js): its own full-bleed
   warm band, photos first, so it never reads as a second copy of the demo.
   A row of project tiles: collapsed, a photo spine; open, the session
   capture and the install photo side by side at the width the row measured
   (--open-w), revealed as the card grows. */
.flow-real { background: var(--paper-warm); border-top: 1px solid var(--paper-edge); padding: clamp(56px, 7vw, 96px) 0; }
.ra-head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.ra-head p { margin: 14px auto 0; max-width: 56ch; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-mute); }
.ra-wide { width: min(1720px, calc(100% - 48px)); margin: 0 auto; }
.ra-row { --collapsed: 96px; display: flex; gap: 12px; height: var(--open-h, 560px); }
.ra-card {
  position: relative; flex: 0 0 var(--collapsed); min-width: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--paper-edge); border-radius: var(--r-lg); background: var(--paper);
  transition: flex-basis 560ms var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.ra-card:hover:not(.is-open) { box-shadow: 0 0 0 1px var(--accent); }
.ra-card.is-open { flex-basis: var(--open-w); cursor: default; }
.ra-cover { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity var(--dur-enter) var(--ease); }
.ra-card.is-open .ra-cover { opacity: 0; }
.ra-spine {
  position: absolute; inset: auto 0 0 0; height: 60%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px;
  background: linear-gradient(transparent, rgba(26, 24, 22, .62)); color: #fff; transition: opacity var(--dur-state) var(--ease);
}
.ra-spine span, .ra-soon span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 15px; font-weight: 500; white-space: nowrap; }
.ra-card.is-open .ra-spine { opacity: 0; }
/* No case study yet: a click lays the note sideways over the tile. */
.ra-soon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(26, 24, 22, .72); color: #fff; opacity: 0; pointer-events: none; transition: opacity var(--dur-state) var(--ease);
}
.ra-soon span { transform: rotate(180deg) translateY(-12px); transition: transform var(--dur-enter) var(--ease); }
.ra-card.is-soon .ra-soon { opacity: 1; }
.ra-card.is-soon .ra-soon span { transform: rotate(180deg); }
.ra-card.is-soon .ra-spine { opacity: 0; }
.ra-open {
  position: absolute; top: 0; left: 0; bottom: 0; width: var(--open-w); display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-state) var(--ease);
}
.ra-card.is-open .ra-open { opacity: 1; pointer-events: auto; transition-delay: 220ms; }
.ra-pair { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 4px; background: var(--paper); }
.ra-pane { position: relative; margin: 0; overflow: hidden; background: var(--paper-deep); }
.ra-pane video, .ra-pane > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ra-chip {
  position: absolute; top: 14px; left: 14px; height: 28px; padding: 0 12px; display: inline-flex; align-items: center;
  border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-canvas);
}
/* Full screen sits top-right on each pane and shows on hover (always on touch). */
.ra-pane .perf-fs-expand { top: 14px; right: 14px; opacity: 0; }
.ra-pane:hover .perf-fs-expand, .ra-pane .perf-fs-expand:focus-visible { opacity: 1; }
@media (hover: none) { .ra-pane .perf-fs-expand { opacity: 1; } }
/* Clear of the shell's Close button: the frame centres it, so 56px of room
   above and below. */
.ra-fs-media { display: block; max-width: 100%; max-height: calc(100% - 112px); object-fit: contain; border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
.ra-meta { height: 72px; flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 22px; border-top: 1px solid var(--paper-edge); background: var(--paper); }
.ra-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ra-tags { display: inline-flex; gap: 6px; }
.ra-line { font-size: 14px; color: var(--ink-mute); }
@media (max-width: 760px) {
  .ra-row { flex-direction: column; height: auto; }
  .ra-card { flex: 0 0 88px; }
  .ra-card.is-open { flex-basis: var(--open-h); }
  .ra-open { width: 100%; }
  .ra-spine { height: 100%; align-items: center; justify-content: flex-start; padding: 0 18px; background: linear-gradient(90deg, rgba(26, 24, 22, .6), transparent); }
  .ra-spine span, .ra-soon span { writing-mode: horizontal-tb; transform: none; }
  .ra-soon span { transform: translateX(-12px); }
  .ra-card.is-soon .ra-soon span { transform: none; }
  .ra-pair { grid-template-columns: 1fr; grid-template-rows: 1.07fr 1fr; }
  .ra-meta { height: auto; min-height: 76px; padding: 12px 16px; }
}
@media (max-width: 760px) {
  .flow-step { padding-left: 72px; }
  .flow-step:not(:last-child)::before { top: 64px; left: 28px; }
}
/* Background canvas scrolls WITH the page: absolute at document size, not fixed. */
body { position: relative; }
.home-bg { position: absolute; inset: 0 auto auto 0; z-index: -1; pointer-events: none; }
/* Hierarchy: subhead up, paragraph down a step. */
.hero-d .subhead { font-size: clamp(24px, 2.6vw, 34px); }
.hero-d .lede { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; }
/* Both tool frames are stacked in the stage; the preloaded one (opacity 0)
   sat on top and swallowed every real click after takeover. Only the live
   frame takes pointer input, and it comes to the front. */
.demo-stage iframe { pointer-events: none; }
.demo-stage iframe.live { pointer-events: auto; z-index: 2; }
/* Segment crossfade: frames stack; the newest is on top and fades in over the old. */
.demo-stage iframe { transition: opacity 600ms var(--ease); }

/* -- Phone: a portrait stage and hold-to-look (2026-09-21) ------------------
   Under 768px the stage is portrait, so the tools inside it take their own
   phone layout (viewer on top, controls in the bottom sheet) and the tour
   drives the same targets. Nothing is hijacked by a tap: HOLDING the
   preview enters look mode (the tour pauses, the frame's chrome clears, the
   finger rotates the model); the Resume pill rewinds into the tour. */
.demo-look-btn {
  display: none; position: absolute; z-index: 7; left: 12px; bottom: 12px;
  border-radius: 999px; padding: 0 16px; height: 36px; white-space: nowrap;
  background: var(--paper); color: var(--accent); border: 1px solid var(--accent);
  box-shadow: var(--shadow-float);
}
.demo.look .demo-look-btn { display: inline-flex; align-items: center; }
/* the finger's own hold must not select text or summon the context menu */
.veil { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.veil.holding { background: rgba(255,255,255,.18); }
@media (max-width: 768px) {
  .demo-stage { aspect-ratio: 9 / 14; }
}

/* -- Phone: a preview, not the tool (2026-09-23) -----------------------------
   Under 768px the tools' phone layout leaves the viewer less than half the
   frame, so the stage plays in spotlight (demo.js demo-spot: the viewer
   fills the frame, the control in use fades up on its own card) and nobody
   takes control, by tap, click or hold: the veil lets the page scroll under
   the finger and offers nothing. The hero's type grows to the column: the
   h1's widest line ("Workshop", 4.72em) fills it; the subhead's balanced two
   lines ("can build together", 8.63em) sit a step inside it (86%, user
   2026-09-24: full width read a touch too large). A note under the stage
   says what the visitor is looking at. */
.demo-note { display: none; margin: 10px 0 0; font-size: var(--text-sm); color: var(--ink-mute); text-align: center; }
@media (max-width: 768px) {
  .demo-note { display: block; }
  .demo-bar .demo-ctl, .demo-stage .hint, .demo-stage .glow { display: none !important; }
  .veil { touch-action: auto; cursor: default; }
  .veil:hover { background: transparent; }
  .hero-d h1 { font-size: min(calc((100vw - 48px) * .164), 96px); line-height: .98; max-width: none; }
  .hero-d .subhead { font-size: min(calc((100vw - 48px) * .1), 44px); line-height: 1.12; text-wrap: balance; }
}

/* -- One demo bar (2026-09-22): mark, tool switcher, tour controls ---------
   The frames' own top bar is hidden by the driver (HOST_CSS in demo.js),
   so the mark and the name it carried live here at that bar's own sizes: the
   20px mark, Inter 14/500 on the switcher (the tool name's voice). The
   take-control / Resume button and the phone's Resume the tour pill sit in
   the bar's right slot instead of floating over the stage. */
.demo-bar { gap: 12px; padding: 0 10px 0 14px; }
.demo-bar-tool { display: flex; align-items: center; gap: 12px; min-width: 0; }
.demo-bar-mark { height: 20px; width: auto; display: block; }
.seg button { height: 28px; padding: 0 14px; font-size: var(--text-base); }
.demo-bar-right { margin-left: auto; gap: 8px; }
/* Take control / Resume the animation stays centred in the bar (absolute, so
   the switcher and the right slot do not push it); under 900px it joins the
   right slot instead, where the centre would collide with the switcher. */
.demo-bar .demo-ctl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (max-width: 900px) { .demo-bar .demo-ctl { position: static; transform: none; } }
.demo-bar-right .btn { height: 32px; padding: 0 14px; }
.demo-look-btn { position: static; border-radius: var(--r-sm); box-shadow: none; }
@media (max-width: 900px) {
  .demo-bar { flex-wrap: nowrap; }
  .demo-bar .demo-ctl { order: 0; width: auto; margin-top: 0; }
  .demo-bar-right { flex-shrink: 0; }
}
/* A 310px phone bar: mark, switcher and the Resume pill in one row, so the
   switcher's buttons tighten and the pill drops "the tour". */
@media (max-width: 480px) {
  .demo-bar { padding: 0 8px 0 10px; gap: 10px; }
  .demo-bar-tool { gap: 10px; }
  .seg button { padding: 0 10px; }
  .demo-look-long { display: none; }
}

/* -- No cross-fades (2026-09-22): a frame swap is a cut. The tour moves
   between tools through the switcher and between styles through the tools'
   own Source controls, and the frame that click brings is simply there. */
.demo-stage iframe { transition: none; }
.demo-stage .poster { transition: none; }

/* -- The colour panel the tour draws (demo.js color): stands in for the
   native chooser the script cannot open. Wheel: hue round (red at three
   o'clock, the way the hand's angle is read), white out from the centre for
   saturation; a lightness bar under it; the hex in mono. Paper, a hairline,
   the floating weight. ------------------------------------------------- */
.demo-cp { position: absolute; z-index: 3; width: 200px; padding: 12px; box-sizing: border-box; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--r-md); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(4px); transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease); pointer-events: none; }
.demo-cp.show { opacity: 1; transform: none; }
.demo-cp-wheel { position: relative; width: 176px; height: 176px; border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(255,255,255,0) 72%), conic-gradient(from 90deg, #f00 0, #f0f 60deg, #00f 120deg, #0ff 180deg, #0f0 240deg, #ff0 300deg, #f00 360deg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.demo-cp-bar { position: relative; height: 14px; margin-top: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.demo-cp-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); box-sizing: border-box; }
.demo-cp-hex { margin-top: 10px; font: 500 12px var(--font-mono); color: var(--ink-mute); letter-spacing: .04em; text-align: center; }

/* -- Phone top bar (2026-09-24) ---------------------------------------------
   The logo keeps its size and at least 16px of air before Sign in: the row
   used to meet at 0px on a 390px phone and squash the logo narrower. Under
   480px the logo steps to 22px high and the two buttons take the demo bar's
   compact size (32px high); under 360px the logo and the side gutter step
   down again so the row still fits a 320px phone. */
.top .wrap { gap: 16px; }
.top .brand-main { flex-shrink: 0; }
@media (max-width: 480px) {
  .top .brand-main img { height: 22px; }
  .top-nav { gap: 8px; }
  .top-nav .btn { height: 32px; padding: 0 10px; }
}
@media (max-width: 360px) {
  .top .wrap { width: calc(100% - 32px); gap: 12px; }
  .top .brand-main img { height: 16px; }
  .top-nav { gap: 6px; }
}

/* -- Playback strip (transport.js, 2026-10-13) -------------------------------
   One scrubber and one speed chip for the demo and the session captures.
   The scrubber is the tools' slider shape: a 3px --paper-deep track, the
   accent fill and a 12px accent thumb (progress is state); the speed chip is
   the .seg above at its compact size, mono because 1x is a number. Under the
   demo it floats detached below the frame as a paper cluster (2026-10-15,
   user: "I dont want the playback to have the same frame as the workshop
   window"); on a capture it floats as a paper pill at the foot of the pane,
   shown on hover (always on touch). */
.aw-transport { --scrub-p: 0%; --scrub-ms: 0ms; display: flex; align-items: center; gap: 12px; min-width: 0; }
.aw-scrub { flex: 1; min-width: 60px; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; border-radius: var(--r-xs); }
.aw-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aw-scrub-track { position: relative; width: 100%; height: 3px; border-radius: 2px; background: var(--paper-deep); }
.aw-scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--scrub-p); border-radius: 2px; background: var(--accent); transition: width var(--scrub-ms) linear; }
.aw-scrub-thumb { position: absolute; top: 50%; left: var(--scrub-p); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); border: 1px solid var(--paper); box-sizing: border-box; transition: left var(--scrub-ms) linear, transform var(--dur-hover) var(--ease); }
.aw-scrub:hover .aw-scrub-thumb, .aw-transport.is-dragging .aw-scrub-thumb { transform: scale(1.25); }
.aw-transport.is-dragging .aw-scrub-fill, .aw-transport.is-dragging .aw-scrub-thumb { transition: none; }
.aw-transport.is-disabled .aw-scrub { cursor: default; opacity: .5; }
.aw-transport-time { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg.aw-speed { flex: none; }
.seg.aw-speed button { height: 24px; padding: 0 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.demo-transport { display: flex; justify-content: center; margin: 14px 0 0; }
.demo-transport .aw-transport {
  width: min(720px, 100%); height: 44px; padding: 0 8px 0 16px; box-sizing: border-box;
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--r-md); box-shadow: var(--shadow-canvas);
}
/* The tour's recording over the stage while the scrubber is dragged
   (demo.js): it shows the frame under the thumb, then holds the step's first
   frame under the spinner until the live tool is back on stage, and fades
   off it. Over the veil and the hand; the video shows once it has a frame. */
.demo-scrub {
  position: absolute; inset: 0; z-index: 8; pointer-events: none; background: transparent;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-enter) var(--ease), visibility 0s linear var(--dur-enter);
}
.demo-scrub.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-hover) var(--ease); }
.demo-scrub video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; }
.demo-scrub.has-frame video { opacity: 1; }
.demo-scrub-wait {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow-canvas); opacity: 0; transition: opacity var(--dur-state) var(--ease);
}
.demo-scrub-wait::after {
  content: ''; position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--pencil); border-top-color: var(--accent); animation: aw-boot-spin 800ms linear infinite;
}
.demo-scrub.wait .demo-scrub-wait { opacity: 1; }
.ra-pane .aw-transport {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; height: 40px; padding: 0 6px 0 14px;
  background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-canvas);
  opacity: 0; transition: opacity var(--dur-state) var(--ease);
}
.ra-pane:hover .aw-transport, .ra-pane .aw-transport:focus-within, .ra-pane .aw-transport.is-dragging { opacity: 1; }
@media (hover: none) { .ra-pane .aw-transport { opacity: 1; } }
@media (max-width: 480px) { .demo-transport { margin-top: 10px; } .demo-transport .aw-transport { padding: 0 6px 0 12px; gap: 10px; } }
@media (max-width: 760px) { .ra-pane .aw-transport { left: 8px; right: 8px; bottom: 8px; height: 36px; gap: 10px; } }