/* Hallmark · shape: product tour, the page scrolls through the app · genre: modern-minimal · theme: brand (QTS default branding, config/branding.ts)
 * paper: #F8FAFC · accent: #3B82F6 (QTS blue), teal #00A8A8 for the mark only · display: Geist 600 · body: Geist · hero: night ground, head left, the app rising out of it · nav: plain bar, wordmark, three links, language, sign-in, one action · footer: wordmark over three short columns · signature: one sticky QTS workspace that changes tab and camera as you scroll
 * axes: light/grotesk-sans/chromatic-blue · posture: restrained, accent on actions and the active tab only · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, an honest page can read flat; the argument is "see the real workspace, no invented numbers", carried by the tour instead of claims */
/* Hallmark · waive 24b · the product picture copies the QTS app's own pixel spacing · the tour must read as the real app, not a restyle */
/* Hallmark · dismissed 74 · the blue, slate and paper come from config/branding.ts in the QTS repo, found at pre-flight */
/* Hallmark · dismissed 58 · nine tour steps of about 25 words each spread the copy over nine full screens; no screen holds more than 80 words */
/* Hallmark · dismissed 41 · accent-ink is only used as a fill under white text and as link text on paper, never on the accent */
/* Hallmark · answered F4 · the dark and blue pills inside the frame are the app's own buttons, drawn; the page has one primary */
/* Hallmark · answered F5 · the round icon coins are the planning screen of the real app, drawn */
/* Hallmark · answered F7 · pills on tabs, chips and badges copy the app's own controls */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- page */
body { font-size: 1.0625rem; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-modal); background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); text-decoration: none; }
.skip:focus-visible { top: var(--space-md); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill); font-weight: 500; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-accent-ink); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-deep); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-quiet:hover { background: color-mix(in oklab, currentColor 8%, transparent); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.night .btn:focus-visible, .night :focus-visible { outline-color: var(--color-night-text); }

/* ---------------------------------------------------------------- nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-night); color: var(--color-night-text); }
.nav .container { display: flex; align-items: center; gap: var(--space-lg); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-night-text); text-decoration: none; font-weight: 600; }
.brand svg { width: 52px; height: auto; color: var(--color-teal); }
.brand span { font-size: 0.9375rem; color: var(--color-night-muted); font-weight: 400; }
.nav-links { display: flex; gap: var(--space-lg); margin-left: var(--space-lg); }
.nav-links a { color: var(--color-night-muted); text-decoration: none; font-size: 0.9375rem; padding: var(--space-xs) 0; transition: color var(--dur-short) var(--ease-out); }
.nav-links a:hover { color: var(--color-night-text); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-md); }
.lang { display: inline-flex; align-items: center; gap: var(--space-3xs); padding: 3px; border: 0; border-radius: var(--radius-pill); background: var(--light-a08); box-shadow: inset 0 0 0 1px var(--light-a12); cursor: pointer; font-size: 0.875rem; line-height: 1; }
.lang span[aria-hidden] { padding: 7px 12px; border-radius: var(--radius-pill); color: var(--color-night-muted); font-weight: 500; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.lang span.on { background: var(--color-night-text); color: var(--color-night); font-weight: 600; }
.lang:hover span[aria-hidden]:not(.on) { color: var(--color-night-text); }
.signin { color: var(--color-night-text); text-decoration: none; font-size: 0.9375rem; }
.signin:hover { text-decoration: underline; }
.nav .btn { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; }

/* ---------------------------------------------------------------- hero */
.night { background: var(--color-night); color: var(--color-night-text); }
.hero { padding-top: clamp(var(--space-2xl), 9vw, 120px); padding-bottom: 260px; }
.hero h1 { max-width: 13ch; color: var(--color-night-text); }
.hero .lead { margin-top: var(--space-lg); color: var(--color-night-muted); max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero-actions .btn-quiet { color: var(--color-night-text); }

/* ---------------------------------------------------------------- tour */
.tour { margin-top: -220px; position: relative; }
.tour-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 var(--space-xl); align-items: start; }
.steps { --text-top: max(240px, calc(50vh - 110px)); padding-top: 300px; }
.step { min-height: 92vh; }
.step:last-child { min-height: 70vh; }
.step-in { position: sticky; top: var(--text-top); padding-block: var(--space-md); }
.step h2 { font-size: clamp(1.75rem, 1.2vw + 1.2rem, 2.375rem); max-width: 14ch; line-height: 1.08; }
.step p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 34ch; }
.step .where { display: block; margin-bottom: var(--space-sm); font-size: 0.9375rem; color: var(--color-accent-ink); font-weight: 500; }
.js .step-in { opacity: 0; transition: opacity 200ms var(--ease-out); }
.js .step.is-active .step-in { opacity: 1; transition: opacity 420ms var(--ease-out) 80ms; }

.stage { position: sticky; top: max(92px, calc(50vh - 290px)); padding-bottom: var(--space-xl); }
.frame { position: relative; border-radius: var(--radius-frame); overflow: hidden; background: var(--color-paper); box-shadow: 0 40px 80px -30px var(--night-a45), 0 0 0 1px var(--night-a08); }
.frame-note { margin-top: var(--space-sm); font-size: 0.875rem; color: var(--color-muted); }

/* the scaled app: 1200 x 750 drawn, fitted with --s */
.ui-fit { --s: 0.62; position: relative; width: 100%; aspect-ratio: 1200 / 750; overflow: hidden; }
.ui-app { position: absolute; left: 0; top: 0; width: 1200px; height: 750px; transform: scale(var(--s)); transform-origin: 0 0; font-family: var(--font-body); color: var(--color-ink); font-size: 14px; line-height: 1.4; display: flex; flex-direction: column; }
.ui-view { position: relative; flex: 1; overflow: hidden; background: var(--color-paper); }
.ui-cam { --x: 0; --y: 0; --z: 1; position: absolute; left: 0; top: 0; width: 1200px; transform-origin: 0 0; transform: scale(var(--z)) translate(calc(var(--x) * -1px), calc(var(--y) * -1px)); transition: transform 900ms var(--ease-out); }
.js .ui-screen { opacity: 0; visibility: hidden; transform: translateY(14px); }
html:not(.js) .ui-screen:not(.is-on) { display: none; }
.ui-screen { position: absolute; left: 0; top: 0; width: 1200px; transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), visibility 0s linear 520ms; }
.js .ui-screen.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hl { transition: box-shadow var(--dur-long) var(--ease-out); border-radius: 14px; }
.hl.is-hl { box-shadow: 0 0 0 3px var(--color-accent), 0 0 0 9px var(--blue-a16); }

/* ---------------------------------------------------------------- app chrome */
.ui-top { height: 68px; flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: 0 var(--space-md); background: var(--color-night); color: var(--color-night-text); }
.ui-org { display: flex; align-items: center; gap: 10px; }
.ui-mark { width: 36px; height: 36px; border-radius: 50%; background: var(--color-night-3); display: grid; place-items: center; }
.ui-mark svg { width: 24px; color: var(--color-teal); }
.ui-org b { display: block; font-size: 14px; font-weight: 600; }
.ui-org small { display: block; font-size: 12px; color: var(--color-night-muted); }
.ui-tabs { justify-self: center; position: relative; display: flex; align-items: center; gap: var(--space-3xs); padding: var(--space-2xs); border-radius: 999px; background: var(--light-a04); box-shadow: inset 0 0 0 1px var(--light-a07); }
.ui-tab { position: relative; padding: 8px 9px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--color-night-muted); white-space: nowrap; transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.ui-tab.is-on { color: var(--color-night-text); background: var(--blue-a18); box-shadow: inset 0 0 0 1px var(--blue-a60); }
.ui-tab.is-on::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--color-accent); }
.ui-sep { width: 1px; height: 18px; margin: 0 var(--space-2xs); background: var(--light-a12); }
.ui-end { display: flex; align-items: center; gap: 10px; }
.ui-search { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--light-a08); background: var(--light-a05); color: var(--color-night-muted); font-size: 12.5px; }
.ui-me { width: 38px; height: 38px; border-radius: 50%; background: var(--color-accent-ink); color: var(--color-on-accent); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.ui-top-m { display: none; }

/* ---------------------------------------------------------------- app parts */
.ui-pad { padding: 26px 30px var(--space-xl); }
.ui-kicker { display: inline-block; padding: var(--space-2xs) 10px; border-radius: 999px; background: var(--color-paper-3); font-size: 11px; font-weight: 600; color: var(--color-ink-2); margin-bottom: 10px; }
.ui-h { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.ui-sub { margin-top: var(--space-2xs); font-size: 13px; color: var(--color-muted); }
.ui-row { display: flex; align-items: center; gap: 10px; }
.ui-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ui-card { background: var(--color-paper-2); border-radius: 14px; box-shadow: 0 0 0 1px var(--ink-a06), 0 1px 2px var(--ink-a04); }
.ui-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--color-night); color: var(--color-night-text); white-space: nowrap; }
.ui-btn.light { background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 0 0 1px var(--ink-a10); font-weight: 500; }
.ui-btn.blue { background: var(--color-accent-ink); color: var(--color-on-accent); }
.ui-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--ink-a10); white-space: nowrap; }
.ui-chip.on { background: var(--color-accent-ink); color: var(--color-on-accent); box-shadow: none; }
.ui-chip i { font-style: normal; font-size: 11px; color: var(--color-muted); }
.ui-chip.on i { color: var(--light-a80); }
.ui-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-xs); border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.b-blue { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.b-ok { background: var(--color-ok-soft); color: var(--color-ok); }
.b-warn { background: var(--color-warn-soft); color: var(--color-warn); }
.b-crit { background: var(--color-crit-soft); color: var(--color-crit); }
.b-violet { background: var(--color-violet-soft); color: var(--color-violet); }
.b-dark { background: var(--color-night); color: var(--color-night-text); }
.b-line { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.ui-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--color-accent-soft); color: var(--color-accent-ink); }
.ui-av.dark { background: var(--color-night); color: var(--color-night-text); border-radius: 10px; }
.ui-muted { color: var(--color-muted); }
.ui-small { font-size: 12px; }
.ui-ico { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* dashboard */
.ui-welcome { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 32px; background: var(--color-night); color: var(--color-night-text); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ui-welcome::before { content: ""; position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, var(--blue-a32), transparent); }
.ui-welcome > * { position: relative; }
.ui-welcome h3 { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; max-width: none; line-height: 1.1; }
.ui-welcome p { font-size: 13.5px; color: var(--color-night-muted); margin-top: 6px; max-width: 46ch; }
.ui-pills { display: flex; gap: var(--space-xs); margin-top: var(--space-md); }
.ui-pills span { padding: 5px var(--space-sm); border-radius: 999px; background: var(--light-a08); font-size: 12px; }
.ui-welcome .ui-btn { background: var(--light-a08); box-shadow: inset 0 0 0 1px var(--light-a14); }
.ui-welcome .ui-btn.blue { background: var(--color-accent-ink); box-shadow: none; }
.ui-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); margin-top: 18px; }
.ui-quick div { display: flex; align-items: center; gap: 10px; padding: 14px; font-size: 13px; font-weight: 500; }
.ui-quick .q-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent-ink); }
.ui-board { margin-top: 18px; border-radius: 22px; background: var(--color-night); padding: var(--space-md); color: var(--color-night-text); }
.ui-board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ui-board-head b { font-size: 17px; font-weight: 600; }
.ui-board-head .ui-btn { height: 32px; font-size: 12px; background: var(--light-a08); }
.ui-seg { display: flex; gap: var(--space-3xs); padding: 3px; border-radius: 999px; background: var(--light-a06); font-size: 12px; }
.ui-seg span { padding: 5px var(--space-sm); border-radius: 999px; color: var(--color-night-muted); }
.ui-seg span.on { background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; }
.ui-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-xs); }
.ui-col { border-radius: 14px; background: var(--color-night-2); color: var(--color-night-text); padding: 10px var(--space-xs); min-height: 420px; }
.ui-col-h { text-align: center; font-size: 12px; font-weight: 600; margin-bottom: var(--space-2xs); }
.ui-col-h::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--dot, var(--color-accent)); vertical-align: 1px; }
.ui-col-n { display: block; width: max-content; margin: 0 auto 10px; padding: 1px var(--space-xs); border-radius: 999px; font-size: 10.5px; background: var(--light-a08); color: var(--color-night-muted); }
.ui-pc { background: var(--color-paper-2); color: var(--color-ink); border-radius: 10px; padding: 9px 10px; margin-bottom: 7px; font-size: 11.5px; line-height: 1.35; }
.ui-pc b { display: block; font-size: 12.5px; font-weight: 600; }
.ui-pc span { display: block; color: var(--color-muted); }
.ui-pc em { display: block; font-style: normal; color: var(--color-accent-ink); margin-top: 3px; font-weight: 500; }
.ui-drop { border-radius: 10px; height: 64px; display: grid; place-items: center; font-size: 11.5px; color: var(--color-night-muted); box-shadow: inset 0 0 0 1px var(--light-a10); }
.ui-attn { margin-top: 18px; padding: var(--space-md) 18px; border-radius: 16px; background: var(--color-attn); box-shadow: 0 0 0 1px var(--color-attn-line); }
.ui-attn b { font-size: 14px; }
.ui-attn .ui-row { margin-top: var(--space-sm); flex-wrap: wrap; gap: var(--space-xs); }

/* candidates */
.ui-split { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-md); margin-top: 20px; align-items: start; }
.ui-filter { padding: 14px; }
.ui-input { display: flex; align-items: center; gap: var(--space-xs); height: 38px; padding: 0 var(--space-sm); border-radius: 10px; background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--ink-a10); font-size: 12.5px; color: var(--color-muted); }
.ui-acc { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 var(--space-sm); margin-top: var(--space-xs); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ink-a08); font-size: 13px; font-weight: 500; }
.ui-qf { margin-top: 10px; padding: var(--space-sm); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ink-a08); }
.ui-qf b { font-size: 13px; font-weight: 500; }
.ui-qf div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ui-qf .ui-chip { height: 24px; font-size: 11.5px; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ui-table th { text-align: left; font-weight: 600; font-size: 12px; padding: var(--space-sm) 10px; color: var(--color-ink-2); box-shadow: inset 0 -1px 0 var(--ink-a08); }
.ui-table td { padding: var(--space-sm) 10px; vertical-align: middle; box-shadow: inset 0 -1px 0 var(--ink-a06); }
.ui-table td b { display: block; font-weight: 600; font-size: 13px; }
.ui-skills { display: flex; flex-wrap: wrap; gap: var(--space-2xs); max-width: 210px; }
.ui-skills span { font-size: 10.5px; padding: var(--space-3xs) 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink-a12); }

/* profile + vacancy */
.ui-two { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; margin-top: 18px; align-items: start; }
.ui-tabsbar { display: flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 12px; background: var(--color-paper-3); font-size: 12.5px; font-weight: 500; }
.ui-tabsbar span { flex: 1; text-align: center; padding: 7px 10px; border-radius: 9px; color: var(--color-ink-2); }
.ui-tabsbar span.on { background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 1px 2px var(--ink-a08); }
.ui-tabsbar.left span { flex: none; }
.ui-sec { padding: 20px 22px; }
.ui-sec h4 { margin: 0 0 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ui-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.ui-fields small { display: block; font-size: 11.5px; color: var(--color-muted); margin-bottom: 3px; }
.ui-fields span { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.ui-prive { font-size: 10px; padding: 1px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink-a15); color: var(--color-muted); }
.ui-proc { margin-top: var(--space-sm); padding: var(--space-sm); border-radius: 12px; background: var(--color-paper-3); }
.ui-proc-ok { margin-top: 10px; padding: 7px 10px; border-radius: 9px; background: var(--color-ok-soft); color: var(--color-ok); font-size: 11.5px; }
.ui-kv { display: flex; justify-content: space-between; align-items: center; padding: var(--space-xs) 0; font-size: 12.5px; }
.ui-kv span { color: var(--color-muted); }
.ui-vhead { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 30px; background: var(--color-night); color: var(--color-night-text); }
.ui-vhead::before { content: ""; position: absolute; right: -60px; top: -140px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, var(--blue-a30), transparent); }
.ui-vhead > * { position: relative; }
.ui-vhead-old { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; max-width: none; display: flex; align-items: center; gap: var(--space-sm); line-height: 1.1; }
.ui-vmeta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); font-size: 13px; color: var(--color-night-muted); align-items: center; }
.ui-vmeta .money { color: var(--color-money); font-weight: 600; }
.ui-jd p { font-size: 13px; color: var(--color-ink-2); margin-bottom: 10px; max-width: none; }
.ui-jd b { display: block; font-size: 13px; margin: 14px 0 6px; color: var(--color-ink); }
.ui-toggle { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--space-sm); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ink-a10); font-size: 13px; }
.ui-switch { width: 34px; height: 20px; border-radius: 999px; background: var(--color-night); position: relative; }
.ui-switch::after { content: ""; position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-paper-2); }

/* clients */
.ui-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.ui-client { padding: var(--space-md); }
.ui-client .ui-row b { font-size: 14px; }
.ui-client dl { display: flex; justify-content: space-between; margin: var(--space-sm) 0 0; font-size: 12px; color: var(--color-muted); }
.ui-client dd, .ui-client dt { margin: 0; }
.ui-client .open { margin-top: var(--space-sm); padding-top: 10px; box-shadow: inset 0 1px 0 var(--ink-a06); }
.ui-client .open b { display: block; font-size: 18px; }

/* runners */
.ui-runner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; box-shadow: inset 4px 0 0 var(--bar, var(--color-amber)), inset 0 -1px 0 var(--ink-a06); }
.ui-runner:last-child { box-shadow: inset 4px 0 0 var(--bar, var(--color-amber)); }
.ui-runner .who b { font-size: 13.5px; font-weight: 600; }
.ui-runner .who span { display: block; font-size: 12px; color: var(--color-muted); }
.ui-runner .who span.ui-row { display: flex; margin-top: var(--space-3xs); }
.ui-runner .who .ui-row .ui-badge { display: inline-flex; }
.ui-runner .ui-row { gap: 6px; }
.ui-dots { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-a10); display: grid; place-items: center; color: var(--color-muted); font-size: 14px; }

/* planning */
.ui-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.ui-stat { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); }
.ui-stat .q-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-paper-3); }
.ui-stat b { display: block; font-size: 22px; font-weight: 600; line-height: 1.1; }
.ui-stat span { font-size: 12px; color: var(--color-muted); }
.ui-cal { margin-top: var(--space-md); padding: 18px; }
.ui-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: var(--space-sm); }
.ui-dow { text-align: center; font-size: 12px; font-weight: 500; color: var(--color-ink-2); padding-bottom: var(--space-2xs); }
.ui-day { min-height: 84px; border-radius: 10px; padding: 7px; box-shadow: inset 0 0 0 1px var(--ink-a08); font-size: 11.5px; font-weight: 500; }
.ui-day.out { background: var(--color-paper-3); box-shadow: none; }
.ui-day.today { box-shadow: inset 0 0 0 2px var(--color-accent); background: var(--color-accent-soft); }
.ui-ev { display: block; margin-top: 5px; padding: 3px 6px; border-radius: 6px; font-size: 10px; font-weight: 500; line-height: 1.3; }
.ev-blue { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.ev-green { background: var(--color-ok-soft); color: var(--color-ok); }

/* integrations */
.ui-set { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; margin-top: 22px; }
.ui-side div { display: flex; align-items: center; gap: 10px; padding: 10px var(--space-sm); border-radius: 10px; font-size: 13px; color: var(--color-ink-2); }
.ui-side div.on { background: var(--color-paper-3); color: var(--color-ink); font-weight: 600; }
.ui-ints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.ui-int { padding: 18px; }
.ui-int-h { display: flex; align-items: center; gap: var(--space-sm); }
.ui-int-h .logo { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--ink-a10); }
.ui-int-h .logo svg { width: 22px; height: 22px; }
.ui-int-h b { display: block; font-size: 14px; }
.ui-int-h small { font-size: 12px; color: var(--color-muted); }
.ui-int p { margin-top: var(--space-sm); font-size: 12.5px; color: var(--color-ink-2); line-height: 1.5; max-width: none; }

/* calling: client page with the Ringover call open beside it */
.ui-av.glass { width: 52px; height: 52px; border-radius: 14px; background: var(--light-a10); color: var(--color-night-text); font-size: 16px; }
.ui-contact { display: flex; align-items: center; gap: var(--space-sm); padding: 10px var(--space-sm); border-radius: 12px; }
.ui-contact + .ui-contact { margin-top: var(--space-2xs); }
.ui-contact .who b { display: block; font-size: 13.5px; font-weight: 600; }
.ui-contact .who span { display: block; font-size: 12px; color: var(--color-muted); }
.ui-contact .num { margin-left: auto; font-size: 12.5px; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.ui-call { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--ink-a10); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ui-contact.is-calling { background: var(--ringover-soft); box-shadow: inset 0 0 0 1px var(--ringover-line); }
.ui-contact.is-calling .ui-av { background: var(--color-paper-2); color: var(--brand-ringover-ink); }
.ui-contact.is-calling .ui-call { background: var(--brand-ringover-ink); color: var(--color-on-accent); box-shadow: none; }
.ui-vac { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-md); padding: 10px 0; font-size: 12.5px; box-shadow: inset 0 -1px 0 var(--ink-a06); }
.ui-vac:last-child { box-shadow: none; padding-bottom: 0; }
.ui-vac b { font-size: 13.5px; font-weight: 600; }
.ui-phone { padding: 20px; border-radius: 22px; background: var(--color-night); color: var(--color-night-text); }
.ui-phone-h { display: flex; align-items: center; gap: 10px; }
.ui-phone-h .logo { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--color-paper-2); }
.ui-phone-h .logo svg { width: 18px; height: 18px; }
.ui-phone-h b { display: block; font-size: 13.5px; }
.ui-phone-h small { display: block; font-size: 11.5px; color: var(--color-night-muted); }
.ui-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--ok-night-a); color: var(--color-money); font-size: 11.5px; font-weight: 600; }
.ui-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hue-green); }
.ui-phone-who { margin-top: 26px; text-align: center; }
.ui-phone-av { width: 76px; height: 76px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--light-a10); box-shadow: 0 0 0 10px var(--light-a04), 0 0 0 20px var(--light-a04); font-size: 22px; font-weight: 600; }
.ui-phone-who b { display: block; margin-top: 30px; font-size: 18px; font-weight: 600; }
.ui-phone-who span:not(.ui-phone-av) { display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-night-muted); font-variant-numeric: tabular-nums; }
.ui-timer { margin-top: 12px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ui-phone-ctl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); margin-top: 24px; }
.ui-phone-ctl span { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; color: var(--color-night-muted); }
.ui-phone-ctl i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--light-a08); color: var(--color-night-text); }
.ui-phone-ctl i .ui-ico { width: 18px; height: 18px; }
.ui-phone-ctl i .ui-ico.dots { stroke-width: 3.2; }
.ui-phone-ctl .end i { background: var(--color-crit); }
.ui-phone-ctl .end i .ui-ico { transform: rotate(135deg); }

/* ---------------------------------------------------------------- studio */
.section { padding-block: var(--section-gap); }
.studio-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.studio h2 { max-width: 12ch; }
.studio .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.studio .note { margin-top: var(--space-lg); color: var(--color-muted); font-size: 0.9375rem; max-width: 44ch; }
.rm-points { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); max-width: 44ch; }
.rm-points li { padding-left: var(--space-md); box-shadow: inset 2px 0 0 var(--color-accent); color: var(--color-ink-2); }
.rm-points b { color: var(--color-ink); font-weight: 600; }

/* automations panel: a small working demo. Drag Daan to CV Sent, the automations prepare, you approve.
 * Without JS the panel shows the finished state. */
.rm { --gap: 8px; margin: 0; padding: clamp(20px, 3vw, var(--space-xl)); border-radius: var(--radius-frame); background: var(--color-night); color: var(--color-night-text); }
.rm :focus-visible { outline: 2px solid var(--color-night-text); outline-offset: 2px; }
.rm button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; }
.rm-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: 0.875rem; color: var(--color-night-muted); }
.rm-head-end { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.rm .rm-reset { padding: 4px 12px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--light-a14); color: var(--color-night-text); font-size: 0.8125rem; font-weight: 500; transition: background-color var(--dur-short) var(--ease-out); }
.rm .rm-reset:hover { background: var(--light-a08); }
.rm .rm-reset[hidden] { display: none; }
.rm-soon { flex: none; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--light-a06); box-shadow: inset 0 0 0 1px var(--light-a14); color: var(--color-night-text); font-size: 0.8125rem; font-weight: 600; }

.rm-lanes { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--space-md); }
.rm-lane { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; min-height: 128px; padding: 10px; border-radius: 14px; background: var(--color-night-2); transition: box-shadow var(--dur-short) var(--ease-out); }
.rm-lane > span { display: block; text-align: center; font-size: 0.8125rem; font-weight: 600; }
.rm-lane > span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--dot); vertical-align: 1px; }
.rm-lane.to { grid-column: 2; box-shadow: inset 0 0 0 1px var(--blue-a60); }
.rm-drop { display: none; }
.js .rm-lane { cursor: pointer; }
.rm[data-stage="q"] .rm-lane.to { box-shadow: none; }
.rm[data-stage="q"] .rm-drop { display: grid; place-items: center; flex: 1; min-height: 56px; margin-top: 10px; border: 1px dashed var(--light-a14); border-radius: 10px; color: var(--color-night-muted); font-size: 0.8125rem; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.rm-lanes.is-over .rm-drop { border-color: var(--color-accent); background: var(--blue-a16); color: var(--color-night-text); }

.rm .rm-card { position: relative; z-index: 1; grid-row: 1; grid-column: 1; align-self: end; width: calc(100% - 20px); margin: 0 10px 10px; padding: 9px 12px; border-radius: 10px; background: var(--color-paper-2); color: var(--color-ink); text-align: left; font-size: 0.8125rem; line-height: 1.35; touch-action: pan-y; user-select: none; -webkit-user-select: none; transform: translateX(calc(100% + 20px + var(--gap))); transition: transform 600ms var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.js .rm .rm-card { cursor: grab; }
@media (hover: hover) { .rm .rm-card:hover { box-shadow: 0 0 0 3px var(--blue-a32); } }
.rm .rm-card.is-drag { cursor: grabbing; transition: box-shadow var(--dur-short) var(--ease-out); box-shadow: 0 18px 32px -12px rgba(0, 0, 0, 0.6), 0 0 0 3px var(--blue-a32); }
.rm[data-stage="q"] .rm-card { transform: none; }
.rm .rm-card.nudge { animation: rm-nudge 1300ms var(--ease-in-out) 1; }
.rm-card b { display: block; font-size: 0.875rem; font-weight: 600; }
.rm-card span { display: block; color: var(--color-muted); }
@keyframes rm-nudge { 0%, 100% { transform: translateX(0); } 22% { transform: translateX(28px); } 48% { transform: translateX(0); } 68% { transform: translateX(12px); } }

.rm-skills { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--gap); }
.rm-skill { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--color-night-2); }
.rm-skill b { display: block; font-weight: 600; }
.rm-skill > div { transition: opacity var(--dur-short) var(--ease-out); }
.rm-skill > div > span { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--color-night-muted); }
.rm-skill.is-off > div { opacity: 0.5; }
.rm-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--color-accent-ink); color: var(--color-on-accent); transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out); }
.rm-skill[data-st="idle"] .rm-ico, .rm-skill.is-off .rm-ico { background: var(--light-a08); color: var(--color-night-muted); }
.rm-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rm-out { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-height: 30px; margin: 10px 0 0; max-width: none; }
.rm-st { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: var(--radius-pill); font-style: normal; font-size: 0.8125rem; font-weight: 600; }
.js .rm-st, .js .rm .rm-act { animation: rm-in 260ms var(--ease-out); }
.st-ok { background: var(--ok-night-a); color: var(--color-money); }
.st-draft, .st-run { background: var(--blue-a18); color: var(--color-accent-night); }
.st-wait { background: var(--warn-night-a); color: var(--color-warn-night); }
.st-idle { background: var(--light-a06); color: var(--color-night-muted); }
.st-run::before { content: ""; width: 9px; height: 9px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rm-spin 700ms linear infinite; }
.rm .rm-act { height: 30px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-size: 0.8125rem; font-weight: 600; transition: background-color var(--dur-short) var(--ease-out); }
.rm .rm-act:hover { background: var(--color-paper-3); }
.rm .rm-act.send { background: var(--color-accent-ink); color: var(--color-on-accent); }
.rm .rm-act.send:hover { background: var(--color-accent-deep); }
.rm .rm-sw { position: relative; width: 34px; height: 20px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--color-accent); transition: background-color var(--dur-short) var(--ease-out); }
.rm .rm-sw::before { content: ""; position: absolute; inset: -12px -8px; }
.rm .rm-sw::after { content: ""; position: absolute; left: 17px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-paper-2); transition: left var(--dur-short) var(--ease-out); }
.rm .rm-sw[aria-checked="false"] { background: var(--light-a14); }
.rm .rm-sw[aria-checked="false"]::after { left: 3px; }
@media (hover: hover) { .rm[data-stage="q"] .rm-lane.to:hover .rm-drop { border-color: var(--color-accent); background: var(--blue-a16); color: var(--color-night-text); } }
@keyframes rm-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes rm-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- ringover */
.step-more { display: inline-block; margin-top: var(--space-md); color: var(--color-accent-ink); font-weight: 500; text-underline-offset: 0.2em; }
.ringover { background: var(--color-paper-2); }
.rg-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.rg-mark { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink-2); font-weight: 600; font-size: 0.9375rem; }
.rg-mark .logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--ink-a10); }
.rg-mark .logo svg { width: 22px; height: 22px; }
.ringover h2 { margin-top: var(--space-lg); max-width: 12ch; }
.ringover .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.rg-sub { margin-top: var(--space-md); color: var(--color-muted); font-size: 0.9375rem; max-width: 44ch; }
.ringover h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); }
/* a call, start to finish: numbered because it is a sequence */
.rg-flow ol { list-style: none; margin: var(--space-lg) 0 0; padding: 0; counter-reset: rg; }
.rg-flow li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-md); padding-bottom: var(--space-lg); counter-increment: rg; }
.rg-flow li:last-child { padding-bottom: 0; }
.rg-flow li::before { content: counter(rg); grid-row: 1 / span 2; position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-ink); font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.rg-flow li::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--ink-a08); }
.rg-flow li:last-child::after { display: none; }
.rg-flow li b { display: block; padding-top: 6px; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--color-ink); }
.rg-flow li p { margin-top: var(--space-2xs); color: var(--color-ink-2); max-width: 58ch; }
.rg-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-2xl); padding-top: var(--space-2xl); box-shadow: inset 0 1px 0 var(--ink-a08); }
.rg-setup ol { margin: var(--space-md) 0 0; padding-left: 1.4em; display: grid; gap: var(--space-md); color: var(--color-ink-2); }
.rg-setup li { max-width: 56ch; }
.rg-setup li::marker { color: var(--color-muted); font-weight: 600; }
.rg-who { display: inline-flex; align-items: center; height: 22px; margin-right: var(--space-xs); padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: 0.8125rem; font-weight: 600; vertical-align: 1px; }
.rg-know ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.rg-know li { padding-left: var(--space-md); box-shadow: inset 2px 0 0 var(--color-accent); color: var(--color-ink-2); max-width: 56ch; }

/* ---------------------------------------------------------------- facts */
.facts { background: var(--color-paper-2); }
.facts .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.facts h2 { max-width: 12ch; }
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.fact-list li { padding-top: var(--space-md); box-shadow: inset 0 3px 0 var(--color-accent); }
.fact-list b { display: block; font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.fact-list span { display: block; margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 46ch; }

/* ---------------------------------------------------------------- close + footer */
.close { padding-block: var(--section-gap-s); }
.close-in { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; }
.close h2 { color: var(--color-night-text); max-width: 14ch; }
.close .lead { margin-top: var(--space-md); color: var(--color-night-muted); }
.close .hero-actions { margin-top: 0; }
.close .btn-quiet { color: var(--color-night-text); }
.foot { padding-block: var(--space-2xl) var(--space-xl); background: var(--color-night); color: var(--color-night-muted); font-size: 0.9375rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-xl); padding-top: var(--space-2xl); box-shadow: inset 0 1px 0 var(--light-a08); }
.foot .brand svg { width: 64px; }
.foot p { margin-top: var(--space-md); max-width: 32ch; }
.foot h3 { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-night-text); font-weight: 600; letter-spacing: 0; }
.foot ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.foot a { color: var(--color-night-muted); text-decoration: none; }
.foot a:hover { color: var(--color-night-text); text-decoration: underline; }
.foot-base { margin-top: var(--space-2xl); font-size: 0.875rem; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 68rem) {
  .nav-links { display: none; }
  .tour-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 var(--space-xl); }
}
@media (max-width: 52rem) {
  .signin { display: none; }
  .hero { padding-bottom: var(--space-2xl); }
  .tour { margin-top: 0; }
  .tour-grid { display: flex; flex-direction: column; }
  .stage { order: -1; align-self: stretch; }
  .stage { top: 68px; z-index: var(--z-sticky); margin-inline: calc(var(--gutter) * -1); padding: var(--space-sm) var(--gutter); background: var(--color-paper); box-shadow: 0 10px 20px -16px var(--night-a35); }
  .frame { border-radius: 16px; }
  .ui-fit { aspect-ratio: 4 / 3; }
  .ui-top { display: none; }
  .ui-top-m { display: flex; height: 64px; flex: none; align-items: center; gap: 14px; padding: 0 22px; background: var(--color-night); color: var(--color-night-text); font-size: 22px; }
  .ui-top-m .ui-mark { width: 44px; height: 44px; }
  .ui-top-m b { font-weight: 600; }
  .ui-top-m .burger { margin-left: auto; width: 26px; height: 3px; border-radius: 2px; background: var(--color-night-muted); box-shadow: 0 -9px 0 var(--color-night-muted), 0 9px 0 var(--color-night-muted); }
  .ui-app { height: 900px; }
  .ui-view { -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-night) 5%, var(--color-night) 95%, transparent); mask-image: linear-gradient(90deg, transparent, var(--color-night) 5%, var(--color-night) 95%, transparent); }
  .frame-note { display: none; }
  .steps { --text-top: calc(68px + (100vw - 32px) * 0.75 + 48px); padding-top: 0; padding-bottom: 8vh; }
  .step { min-height: 72vh; }
  .step:last-child { min-height: 50vh; }
  .studio-grid, .fact-list, .foot-grid, .rg-grid, .rg-more { grid-template-columns: minmax(0, 1fr); }
  .rg-more { gap: var(--space-xl); }
  .facts .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 30rem) {
  .nav .btn { padding: 0 14px; }
  .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-cam, .ui-screen, .step-in { transition: none !important; }
  .rm .rm-card.nudge { animation: none; }
}

.ui-input.white { background: var(--color-paper-2); }
.b-pend { background: var(--color-pend-soft); color: var(--color-pend); }
.b-glass { background: var(--light-a12); color: var(--color-night-text); }
.ui-vtitle { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; display: flex; align-items: center; gap: var(--space-sm); line-height: 1.1; }

.mailnote { margin-top: var(--space-sm); color: var(--color-night-muted); font-size: 0.9375rem; user-select: all; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--z-modal); background: var(--color-night); }

/* demo dialog */
.demo { width: min(480px, calc(100vw - 32px)); padding: var(--space-xl); border: 0; border-radius: var(--radius-frame); background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 40px 80px -30px var(--night-a45); }
.demo::backdrop { background: var(--night-a45); }
.demo h2 { font-size: var(--text-2xl); max-width: none; padding-right: var(--space-xl); }
.demo p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.demo-x-form { position: absolute; top: var(--space-md); right: var(--space-md); }
.demo-x { width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: 1.375rem; line-height: 1; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.demo-x:hover { background: var(--ink-a10); }
.demo-addr { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-3); }
.demo-addr span { font-size: 1.125rem; font-weight: 600; user-select: all; overflow-wrap: anywhere; min-width: 0; }
.demo-copy { min-height: 40px; padding: 0 var(--space-md); color: var(--color-ink); }
.demo-status { min-height: 1.5em; font-size: 0.9375rem; color: var(--color-ok) !important; }
.demo-open { width: 100%; margin-top: var(--space-xs); }