/* Product-led landing page kit: structure, components and states. No brand colours.
   Map every --lp-* token and every --c-p* part colour to the host project's own tokens, for each theme.
   Do not keep these placeholder values in a finished page. Host rules win over this file
   (for example: no borders, no gradients, no outlines, the default theme). */

:root {
	/* Hermesaki warm light theme, mapped from landing/design-system/theme.css. Light only by owner decision (2026-10-22). */
	color-scheme: light;
	--lp-bg: #f6f1e7;          /* --background */
	--lp-card: #fffdf8;        /* --card */
	--lp-card-2: #eee8dd;      /* --secondary */
	--lp-card-3: #e4dccd;      /* between --elevated and --border */
	--lp-field: #eee8dd;
	--lp-fg: #292a23;          /* --foreground */
	--lp-muted: #706d63;       /* --muted-foreground */
	--lp-faint: #79756b;       /* --faint */
	--lp-line: #ddd6c8;        /* --border */
	--lp-accent: #c75c30;      /* --primary */
	--lp-on-accent: #ffffff;
	--lp-accent-soft: rgba(199, 92, 48, 0.12);
	--lp-lab: #efe2d2;
	--lp-lab-ink: #5a3a22;
	--lp-cta: #f1dfd1;         /* --accent */
	--lp-ok: #38723e;          /* --success */
	--lp-err: #b23832;         /* --danger */
	--lp-warn: #926011;        /* --warning */
	--lp-code-bg: #292a23;
	--lp-dot-tile: url("/ui/assets/dot.svg");  /* a file, because the app CSP allows img-src 'self' only */
	--lp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
	--lp-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--lp-max: 1120px;
	/* One colour for each product part, used the same way on the whole page:
	   p1 Mailbox (Stalwart, the address), p2 Access (keys, approvals), p3 Server (ownership, operations),
	   p4 Webmail (Roundcube), p5 Delivery (send queue), p6 Connect (MCP, API, webhooks). */
	--c-p1: #c75c30;
	--c-p2: #3f6886;
	--c-p3: #38723e;
	--c-p4: #8a4a78;
	--c-p5: #926011;
	--c-p6: #2f6f6a;
}
/* A part class sets --k. Every component reads --k for its part colour. */
.k-p1 { --k: var(--c-p1); } .k-p2 { --k: var(--c-p2); } .k-p3 { --k: var(--c-p3); }
.k-p4 { --k: var(--c-p4); } .k-p5 { --k: var(--c-p5); } .k-p6 { --k: var(--c-p6); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--lp-bg); scrollbar-width: thin; scrollbar-color: var(--lp-card-3) transparent; }
.reduced, .reduced * { scroll-behavior: auto !important; }
body { margin: 0; background: var(--lp-bg); color: var(--lp-fg); font: 16px/1.55 var(--lp-font); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background 0.4s, color 0.4s; }
a { color: inherit; }
button { font: inherit; color: inherit; }
button, input, a { outline: none; }
::selection { background: var(--lp-accent); color: var(--lp-on-accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--lp-card); }
.skip-link:focus { left: 8px; }
.st-ok { color: var(--lp-ok); } .st-err { color: var(--lp-err); } .st-warn { color: var(--lp-warn); }

/* ---- Header ---- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; background: color-mix(in srgb, var(--lp-bg) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { justify-self: start; display: flex; align-items: center; gap: 8px; height: 35px; padding-right: 8px; border-radius: 8px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; padding: 4px; }
.brand-mark svg { width: 100%; height: 100%; }
.brand b { font-size: 15px; letter-spacing: -0.01em; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; color: var(--lp-muted); font-size: 13.5px; text-decoration: none; transition: background 0.2s, color 0.2s; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { background: var(--lp-card-2); color: var(--lp-fg); }
.top-end { justify-self: end; display: flex; align-items: center; gap: 6px; }
.icon-btn { position: relative; display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--lp-muted); cursor: pointer; transition: background 0.2s, color 0.2s; }
.icon-btn svg { width: 18px; height: 18px; display: block; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--lp-card-2); color: var(--lp-fg); }
.icon-btn.ok, .icon-btn.ok:hover, .icon-btn.ok:focus-visible { color: var(--lp-ok); }
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; padding: 4px 8px; border-radius: 6px; background: var(--lp-card-3); color: var(--lp-fg); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--lp-accent); color: var(--lp-on-accent); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s; }
.btn:hover, .btn:focus-visible { background: color-mix(in srgb, var(--lp-accent) 84%, var(--lp-fg)); }
.btn.small { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; }
.btn.ghost { background: var(--lp-card-2); color: var(--lp-fg); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: var(--lp-card-3); }
.btn svg { width: 16px; height: 16px; }
.nav-burger { display: none; }

/* ---- Page frame ---- */
main { padding-top: 56px; }
.wrap { max-width: var(--lp-max); margin: 0 auto; padding: 0 24px; }
.section { padding: 112px 0; scroll-margin-top: 40px; }
.h-lg { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 750; }
.lede { max-width: 660px; margin: 18px 0 0; color: var(--lp-muted); font-size: 17px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--lp-ease), transform 0.7s var(--lp-ease); }
.reveal.in { opacity: 1; transform: none; }
.dots { position: absolute; inset: 0; background-image: var(--lp-dot-tile); pointer-events: none; }

/* ---- Hero: a headline with a chip that changes ---- */
.hero { position: relative; overflow: hidden; padding: 112px 0 72px; text-align: center; }
.hero .wrap { position: relative; }
.hero h1 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.16em 0.26em; max-width: 980px; margin: 0 auto; font-size: clamp(40px, 6.4vw, 76px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 800; }
/* The last part of the headline always has its own line, so a longer chip word never moves the page. */
.hero h1 > span:last-child { flex-basis: 100%; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 0.22em; height: 1.24em; padding: 0 0.3em 0 0.16em; border-radius: 0.26em; background: var(--lp-accent-soft); color: var(--lp-accent); text-decoration: none; overflow: hidden; vertical-align: middle; transition: background 0.2s; }
.chip:hover, .chip:focus-visible { background: color-mix(in srgb, var(--lp-accent) 22%, transparent); }
.chip-g { display: grid; place-items: center; width: 0.9em; height: 0.9em; flex: none; border-radius: 50%; background: var(--p, var(--lp-accent)); color: #1b1330; transition: background 0.3s, transform 0.45s var(--lp-ease), opacity 0.3s; }
.chip-g svg { width: 60%; height: 60%; display: block; }
.chip-w { display: inline-block; overflow: hidden; white-space: nowrap; text-align: left; transition: width 0.45s var(--lp-ease), transform 0.45s var(--lp-ease), opacity 0.3s; }
.chip-m { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
.chip.out .chip-w, .chip.out .chip-g { transform: translateY(-60%); opacity: 0; }
.chip.pre .chip-w, .chip.pre .chip-g { transform: translateY(60%); opacity: 0; transition: none; }
.hero .lede { max-width: 600px; margin: 20px auto 0; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.hero-note { margin: 14px 0 0; color: var(--lp-faint); font-size: 13px; }

/* ---- Live product frame with a small inspector ---- */
.lab { margin-top: 52px; padding: 28px; border-radius: 22px; background: var(--lp-lab); scroll-margin-top: 72px; }
.lab-win { overflow: hidden; border-radius: 16px; background: var(--lp-card); box-shadow: 0 30px 80px rgba(20, 16, 40, 0.2); text-align: left; }
.lab-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; box-shadow: inset 0 -1px 0 var(--lp-line); }
.lab-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lab-tabs button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--lp-muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s; }
.lab-tabs button:hover, .lab-tabs button:focus-visible { background: var(--lp-card-2); color: var(--lp-fg); }
.lab-tabs button[aria-selected="true"] { background: var(--lp-accent-soft); color: var(--lp-accent); }
.lab-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.lab-stage { position: relative; min-height: 560px; background: var(--lp-bg); }
.lab-stage > iframe, .lab-stage > .dv-host { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
/* A drawing in the stage, instead of a live component: centre it and let the inspector set the height. */
.lab-stage.is-drawing { display: grid; place-items: center; min-height: 0; padding: 24px; }
.lab-stage.is-drawing .dv { border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 16, 40, 0.18); }
.lab-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--lp-bg); color: var(--lp-muted); transition: opacity 0.35s; }
.lab-loading.done { opacity: 0; pointer-events: none; }
.lab-insp { display: flex; flex-direction: column; gap: 18px; max-height: 620px; padding: 16px; overflow-y: auto; box-shadow: inset 1px 0 0 var(--lp-line); }
.insp-group h3 { margin: 0 0 8px; color: var(--lp-muted); font-size: 12.5px; font-weight: 650; }
.insp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.insp-row h3 { margin: 0; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choices button { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--lp-card-2); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s; }
.choices button:hover, .choices button:focus-visible { background: var(--lp-card-3); }
.choices button[aria-checked="true"] { background: var(--lp-accent-soft); color: var(--lp-accent); }
.choices i { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--sw); }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatches button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; transition: background 0.2s; }
.swatches button:hover, .swatches button:focus-visible { background: var(--lp-card-2); }
.swatches i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sw); color: #ffffff; }
.swatches svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.2s; }
.swatches button[aria-checked="true"] svg { opacity: 1; }
.insp-field { display: grid; gap: 6px; color: var(--lp-muted); font-size: 12.5px; font-weight: 650; }
.insp-field input { height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--lp-field); color: var(--lp-fg); font-size: 14px; transition: background 0.2s; }
.insp-field input:hover, .insp-field input:focus { background: var(--lp-card-3); }
/* Code in the narrow inspector wraps at spaces, so the inspector has one scroll area. */
.insp-code pre { margin: 8px 0 0; padding: 12px; border-radius: 10px; background: var(--lp-code-bg); color: #ececf1; font: 11px/1.6 var(--lp-mono); white-space: pre-wrap; overflow-wrap: break-word; }
.lab-note { margin: 14px 0 0; color: var(--lp-lab-ink); font-size: 12.5px; text-align: center; opacity: 0.75; }

/* ---- The problem ---- */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; text-align: left; }
.pain { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; min-width: 0; padding: 22px 24px 26px; border-radius: 18px; background: var(--lp-card); }
.pain h3 { margin: 4px 0 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
.pain p { margin: 0; color: var(--lp-muted); font-size: 15px; }
.pain-art { display: block; width: 100%; height: auto; overflow: visible; }
.pain-art text { font-family: var(--lp-font); }
.pa-bg { fill: var(--lp-card); } .pa-win { fill: var(--lp-card-2); } .pa-win2 { fill: var(--lp-card-3); }
.pa-mut { fill: var(--lp-muted); } .pa-faint { fill: var(--lp-faint); } .pa-fg { fill: var(--lp-fg); }
.pa-k { fill: var(--k); } .pa-ks { fill: color-mix(in srgb, var(--k) 18%, transparent); }
.pa-stroke { fill: none; stroke: var(--k); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pa-dash { fill: none; stroke: var(--lp-faint); stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; }
.pa-x { stroke: var(--lp-err); stroke-width: 2; stroke-linecap: round; }
.pa-float { transform-box: fill-box; animation: lp-float 5s ease-in-out infinite; }
@keyframes lp-float { 50% { transform: translateY(-4px); } }
.pa-blink { animation: lp-blink 2.4s ease-in-out infinite; }
@keyframes lp-blink { 50% { opacity: 0.35; } }
.promises { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 36px; }
.promises > span { color: var(--lp-muted); font-size: 15px; }
.promise-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 7px; border-radius: 20px; background: color-mix(in srgb, var(--k) 13%, transparent); color: var(--k); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
.promise-link:hover, .promise-link:focus-visible { background: color-mix(in srgb, var(--k) 24%, transparent); }
.pi { display: grid; place-items: center; flex: none; width: 27px; height: 27px; border-radius: 50%; background: color-mix(in srgb, var(--k, var(--lp-accent)) 20%, transparent); color: var(--k, var(--lp-accent)); }
.pi svg { width: 15px; height: 15px; }

/* ---- Drawings: Simplified UI in a framed window ---- */
.shot { margin-top: 48px; padding: 28px; border-radius: 22px; background: var(--lp-lab); }
.win { overflow: hidden; border-radius: 14px; background: var(--lp-card); box-shadow: 0 24px 60px rgba(20, 16, 40, 0.18); text-align: left; }
.shot-note { margin: 14px 0 0; color: var(--lp-lab-ink); font-size: 12.5px; text-align: center; opacity: 0.75; }
.dv { display: block; width: 100%; height: auto; }
.dv text { font-family: var(--lp-font); fill: var(--lp-fg); }
.d-bg { fill: var(--lp-card); } .d-card { fill: var(--lp-card-2); } .d-card3 { fill: var(--lp-card-3); }
.d-k { fill: var(--k); } .d-ks { fill: color-mix(in srgb, var(--k) 16%, transparent); transition: fill 0.35s; }
.d-ks.on { fill: color-mix(in srgb, var(--k) 32%, transparent); }
.dv text.d-m { fill: var(--lp-muted); } .dv text.d-f { fill: var(--lp-faint); } .dv text.d-kt { fill: var(--k); }
.dv text.d-ok { fill: var(--lp-ok); } .dv text.d-err { fill: var(--lp-err); } .dv text.d-warn { fill: var(--lp-warn); }
.d-b { font-weight: 650; }
.d-link { fill: none; stroke: var(--lp-card-3); stroke-width: 2; stroke-dasharray: 4 6; transition: stroke 0.4s; }
.d-link.on { stroke: var(--k); stroke-dasharray: none; }
.d-fade { opacity: 0; transition: opacity 0.4s; }
.d-fade.in { opacity: 1; }
.d-move { transition: transform 0.8s var(--lp-ease); }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 40px 0 0; padding: 0; list-style: none; text-align: left; }
.points li { display: grid; grid-template-columns: 36px 1fr; align-items: start; gap: 12px; padding: 18px; border-radius: 16px; background: var(--lp-card); color: var(--lp-muted); font-size: 14.5px; }
.points .pi { width: 36px; height: 36px; border-radius: 10px; }
.points .pi svg { width: 18px; height: 18px; }
.points b { display: block; margin-bottom: 2px; color: var(--lp-fg); font-size: 15px; }
.live-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; box-shadow: inset 0 -1px 0 var(--lp-line); }
.live-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); font-size: 12.5px; font-weight: 700; transition: background 0.3s, color 0.3s; }
.live-hint { color: var(--lp-muted); font-size: 13px; }

/* ---- Code. The copy button has its own column, so long lines never scroll under it. ---- */
.code { position: relative; padding-right: 44px; border-radius: 12px; background: var(--lp-code-bg); }
.code pre { margin: 0; padding: 14px 4px 14px 16px; overflow-x: auto; color: #ececf1; font: 12.5px/1.65 var(--lp-mono); scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.code .copy-btn { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; color: #9d9daa; }
.code .copy-btn:hover, .code .copy-btn:focus-visible { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
/* Syntax colours on the dark code surface, for highlight.js output. Replace with the host renderer's colours. */
.hljs-keyword, .hljs-built_in, .hljs-literal { color: #c4a8ff; }
.hljs-string { color: #b4e281; }
.hljs-number { color: #ffc65c; }
.hljs-comment { color: #8f88a0; font-style: italic; }
.hljs-attr, .hljs-title, .hljs-property, .hljs-variable { color: #8cc8ff; }
.hljs-meta { color: #ff9fd0; }

/* ---- Product grid (bento): 6 columns, tiles span 2, 3 or 4. Fill every row. ---- */
.apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; margin-top: 48px; text-align: left; }
.app { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border-radius: 18px; background: var(--lp-card); transition: background 0.25s, transform 0.3s var(--lp-ease); }
.app:hover { background: color-mix(in srgb, var(--lp-card) 88%, var(--k)); transform: translateY(-2px); }
.app.s2 { grid-column: span 2; } .app.s3 { grid-column: span 3; } .app.s4 { grid-column: span 4; }
.app-head { display: flex; align-items: center; gap: 12px; }
.app .ai { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); }
.app .ai svg { width: 20px; height: 20px; }
.app h3 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.app-head small { display: block; color: var(--k); font-size: 12.5px; font-weight: 600; }
.app p { margin: 0; color: var(--lp-muted); font-size: 13.5px; line-height: 1.5; }
.pv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pv span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--lp-card-2); color: var(--lp-muted); font-size: 12px; font-weight: 600; }
.pv span.on { background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); }
/* A small redraw of real UI inside a wide tile. */
.app-vis { display: grid; gap: 6px; margin-top: auto; padding: 12px; border-radius: 12px; background: var(--lp-card-2); }
.vis-rows span { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 7px; color: var(--lp-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vis-rows span.on { background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); }
.vis-rows svg { width: 15px; height: 15px; flex: none; }

/* ---- Use cases ---- */
.uc-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 32px auto 0; }
.uc-tab { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 7px; border: 0; border-radius: 22px; background: var(--lp-card); color: var(--lp-muted); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; }
.uc-tab:hover, .uc-tab:focus-visible { background: var(--lp-card-2); color: var(--lp-fg); }
.uc-tab[aria-selected="true"] { background: var(--lp-card-3); color: var(--lp-fg); }
.uc-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--p); color: #1b1330; }
.uc-av svg { width: 60%; height: 60%; display: block; }
.uc-panel { max-width: 896px; margin: 40px auto 0; animation: lp-in 0.45s var(--lp-ease); }
.uc-panel[hidden] { display: none; }
@keyframes lp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.uc-head { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 18px; }
.uc-head .uc-av { width: 60px; height: 60px; }
.uc-head h3 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.12; letter-spacing: -0.03em; }
.uc-head p { margin: 8px 0 0; color: var(--lp-muted); font-size: 15.5px; }
.uc-tag { display: inline-flex; align-items: center; height: 22px; margin-right: 8px; padding: 0 9px; border-radius: 11px; background: color-mix(in srgb, var(--lp-warn) 16%, transparent); color: var(--lp-warn); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.uc-tag.real { background: color-mix(in srgb, var(--lp-ok) 16%, transparent); color: var(--lp-ok); }
.uc-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; margin-top: 24px; }
.uc-box { min-width: 0; padding: 22px; border-radius: 18px; background: var(--lp-card); }
.uc-box h4 { margin: 0 0 12px; font-size: 15px; }
.uc-box ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: uc; }
.uc-box ol li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: var(--lp-muted); font-size: 14.5px; counter-increment: uc; }
.uc-box ol li::before { content: counter(uc); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lp-accent-soft); color: var(--lp-accent); font: 700 12px var(--lp-mono); }
.uc-box .code { margin-top: 14px; }
.uc-parts { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-part { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 6px; border-radius: 16px; background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k); font-size: 13.5px; font-weight: 600; }
.uc-part i { display: grid; place-items: center; width: 22px; height: 22px; }
.uc-part svg { width: 16px; height: 16px; }

/* ---- Comparison by group ---- */
.cmp-wrap { margin-top: 44px; overflow-x: auto; border-radius: 18px; background: var(--lp-card); }
.cmp-wrap:focus-visible { background: color-mix(in srgb, var(--lp-card) 92%, var(--lp-accent)); }
.cmp { width: 100%; min-width: 860px; table-layout: fixed; border-collapse: collapse; font-size: 14px; text-align: left; }
.cmp th, .cmp td { padding: 14px 12px; vertical-align: top; }
.cmp thead th { background: var(--lp-card-2); font-weight: 650; }
.cmp thead th small { display: block; margin-top: 2px; color: var(--lp-muted); font-size: 12px; font-weight: 500; }
.cmp thead th:first-child { width: 20%; }
.cmp tbody tr + tr > * { box-shadow: inset 0 1px 0 var(--lp-line); }
.cmp .us { background: var(--lp-accent-soft); }
.cmp thead .us { background: color-mix(in srgb, var(--lp-accent) 22%, var(--lp-card-2)); color: var(--lp-accent); }
.cmp td small { display: block; margin-top: 2px; color: var(--lp-muted); font-size: 12.5px; }
.cmp .price b { font-weight: 650; }
.cmp .price .us b { color: var(--lp-accent); }
.v { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; white-space: nowrap; }
.v svg { width: 16px; height: 16px; flex: none; }
.v.y { color: var(--lp-ok); } .v.p { color: var(--lp-warn); } .v.n { color: var(--lp-err); } .v.u { color: var(--lp-muted); }
.fine { margin: 16px 0 0; color: var(--lp-faint); font-size: 13px; text-align: center; }

/* ---- Call to action and footer ---- */
.cta { position: relative; overflow: hidden; padding: 112px 0 96px; background: var(--lp-cta); text-align: center; }
.cta .wrap { position: relative; }
.cta .lede { margin-left: auto; margin-right: auto; }
.cta .btn.ghost { background: var(--lp-card); }
.cta .btn.ghost:hover, .cta .btn.ghost:focus-visible { background: var(--lp-card-3); }
.cast { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(4px, 1.2vw, 14px); margin-top: 52px; }
.cast > span { display: grid; place-items: center; width: clamp(34px, 5vw, 54px); height: clamp(34px, 5vw, 54px); }
.cast svg { width: 100%; height: 100%; }
.form-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.form-row input { width: min(320px, 100%); height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--lp-field); color: var(--lp-fg); font-size: 15px; }
.form-row input:focus { background: var(--lp-card-3); }
.form-note { margin: 10px 0 0; color: var(--lp-warn); font-size: 13px; }
.foot { padding: 56px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot h5 { margin: 0 0 12px; color: var(--lp-faint); font-size: 13px; font-weight: 600; }
.foot ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.foot ul a { display: inline-flex; align-items: center; height: 30px; margin-left: -8px; padding: 0 8px; border-radius: 7px; color: var(--lp-muted); font-size: 14px; text-decoration: none; transition: background 0.2s, color 0.2s; }
.foot ul a:hover, .foot ul a:focus-visible { background: var(--lp-card-2); color: var(--lp-fg); }
.foot p { max-width: 280px; margin: 8px 0 0; color: var(--lp-muted); font-size: 14px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; color: var(--lp-faint); font-size: 13px; }

/* ---- Command + K ---- */
.palette { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding-top: 14vh; background: rgba(15, 13, 20, 0.45); opacity: 0; transition: opacity 0.18s; }
.palette.open { opacity: 1; }
.palette[hidden] { display: none; }
.palette-box { width: min(460px, calc(100vw - 32px)); padding: 8px; border-radius: 14px; background: var(--lp-card); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); transform: translateY(-8px) scale(0.98); transition: transform 0.2s var(--lp-ease); }
.palette.open .palette-box { transform: none; }
.palette input { width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--lp-field); color: var(--lp-fg); font-size: 15px; }
.palette input:focus { background: var(--lp-card-3); }
.palette ul { max-height: 50vh; margin: 6px 0 0; padding: 0; overflow: auto; list-style: none; }
.palette li { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 14.5px; cursor: pointer; }
.palette li small { color: var(--lp-faint); font-size: 12px; }
.palette li[aria-selected="true"] { background: var(--lp-card-2); }
.palette .empty { color: var(--lp-faint); cursor: default; }

/* ---- Narrow screens ---- */
@media (max-width: 980px) {
	.lab-body { grid-template-columns: minmax(0, 1fr); }
	.lab-insp { max-height: none; box-shadow: inset 0 1px 0 var(--lp-line); }
	.apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.app.s2, .app.s3 { grid-column: span 1; }
	/* A wide tile, or the last tile of an odd count, fills the row. */
	.app.s4, .app.fill { grid-column: span 2; }
	.points, .uc-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
	.top { grid-template-columns: 1fr auto; }
	.nav { position: fixed; top: 56px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 16px 16px; background: var(--lp-bg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, transform 0.25s var(--lp-ease), visibility 0s 0.25s; }
	.nav.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.25s var(--lp-ease); }
	.nav a { height: 44px; font-size: 15px; }
	.nav-burger { display: grid; }
	.pains { grid-template-columns: minmax(0, 1fr); }
	.lab, .shot { padding: 14px; border-radius: 16px; }
	.lab-stage { min-height: 520px; }
	.section { padding: 80px 0; }
	.wrap { padding: 0 16px; }
}
@media (max-width: 640px) {
	/* Wide drawings scroll sideways inside their window. Start the scroll at the important part (LandingKit.view). */
	.win > .dv-host { overflow-x: auto; }
	.win > .dv-host .dv { min-width: 720px; }
}
@media (max-width: 600px) {
	.hero h1 > span:first-child { flex-basis: 100%; }
}
@media (max-width: 560px) {
	.apps, .foot-grid { grid-template-columns: minmax(0, 1fr); }
	.app.s2, .app.s3, .app.s4, .app.fill { grid-column: auto; }
	.top-end .btn.small { display: none; }
}
@media (max-width: 359px) {
	.hero h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.chip-w, .chip-g, .app, .uc-panel { transition: opacity 0.2s !important; transform: none !important; animation: none !important; }
	.pa-float, .pa-blink { animation: none; }
	.d-move { transition: none; }
}