/* huecommand.com: one stylesheet for every page (and the blog shell).
   The moorapp.com design system (Moor site/public/styles.css + home.css): neutral dark and light palettes, ONE accent,
   six feature colours for chips and kickers only, the system (SF) font stack plus JetBrains Mono for kickers and chips,
   the same type scale, radii, shadows, 44px targets and focus ring. Command's accent is the violet from the top of the
   app icon's bulb (Moor's is brass); the feature colours are the icon's light bars.
   Appearance: dark by default; light follows prefers-color-scheme, and the header toggle sets data-theme="light|dark" on
   <html> (saved by site.js, applied before paint by theme.js). The hero room and the device frames stay dark in both. */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-variable.woff2) format("woff2");
}

/* ---------- Tokens: dark (default) ---------- */
:root {
  --bg: #0e0f12;
  --band: #17181c;
  --surface: #1c1d22;
  --surface-2: #25262c;
  --line: rgb(255 255 255 / .10);
  --line-strong: rgb(255 255 255 / .20);
  --text: #f2f2f4;
  --muted: #a8a8b3;               /* 8.1:1 on --bg, 7.5:1 on --band */
  --accent: #b9a4ff;              /* violet as text / strokes: 9:1 on --bg */
  --accent-fill: #b9a4ff;         /* violet as a fill: always with --on-accent text (8.5:1) */
  --accent-hi: #d4c7ff;
  --on-accent: #170d3a;
  --signal: #4fd18b;
  --warn: #ffb547;
  --err: #ff8a80;
  /* feature colours (the icon's light bars): chips and kickers only */
  --f-amber: #f5b84a;
  --f-magenta: #f08cf0;
  --f-cyan: #4fd1e8;
  --f-indigo: #8fa2ff;
  --f-green: #5bd49a;
  --f-rose: #ff8fa3;
  --fg-rgb: 242 242 244;
  --accent-rgb: 185 164 255;
  --nav-bg: rgb(14 15 18 / .82);
  --shadow-soft: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -12px rgb(0 0 0 / .6);
  --shadow-window: 0 2px 6px rgb(0 0 0 / .4), 0 40px 90px -30px rgb(0 0 0 / .8);
  color-scheme: dark;
}
/* ---------- Tokens: light ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff; --band: #f5f5f7; --surface: #ffffff; --surface-2: #f5f5f7;
    --line: rgb(28 28 33 / .10); --line-strong: rgb(28 28 33 / .22);
    --text: #1c1c21; --muted: #5b5b66;      /* 6.7:1 on white, 6.2:1 on --band */
    --accent: #6a42d6; --accent-fill: #6a42d6; --accent-hi: #5a34c2; --on-accent: #ffffff;   /* 6.2:1 on white */
    --signal: #1f7a4a; --warn: #9a5b00; --err: #b42318;
    --f-amber: #8f5300; --f-magenta: #a1279b; --f-cyan: #0b6a80; --f-indigo: #3b4fd1; --f-green: #17784a; --f-rose: #b4234a;
    --fg-rgb: 28 28 33; --accent-rgb: 106 66 214;
    --nav-bg: rgb(255 255 255 / .85);
    --shadow-soft: 0 1px 2px rgb(20 20 30 / .06), 0 12px 32px -12px rgb(20 20 30 / .18);
    --shadow-window: 0 2px 6px rgb(20 20 30 / .08), 0 40px 90px -30px rgb(20 20 30 / .35);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #ffffff; --band: #f5f5f7; --surface: #ffffff; --surface-2: #f5f5f7;
  --line: rgb(28 28 33 / .10); --line-strong: rgb(28 28 33 / .22);
  --text: #1c1c21; --muted: #5b5b66;
  --accent: #6a42d6; --accent-fill: #6a42d6; --accent-hi: #5a34c2; --on-accent: #ffffff;
  --signal: #1f7a4a; --warn: #9a5b00; --err: #b42318;
  --f-amber: #8f5300; --f-magenta: #a1279b; --f-cyan: #0b6a80; --f-indigo: #3b4fd1; --f-green: #17784a; --f-rose: #b4234a;
  --fg-rgb: 28 28 33; --accent-rgb: 106 66 214;
  --nav-bg: rgb(255 255 255 / .85);
  --shadow-soft: 0 1px 2px rgb(20 20 30 / .06), 0 12px 32px -12px rgb(20 20 30 / .18);
  --shadow-window: 0 2px 6px rgb(20 20 30 / .08), 0 40px 90px -30px rgb(20 20 30 / .35);
  color-scheme: light;
}

/* ---------- Tokens: type, shape, motion (same in both appearances) ---------- */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(2.5rem, 1.6rem + 3.2vw, 3.5rem);
  --lh-display: 1.0715;
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-fine: .875rem;             /* nothing is smaller */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --gutter: clamp(16px, 5vw, 72px);
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --nav-h: 64px;
  /* glow colours (r g b) for soft backgrounds; one per feature colour */
  --g-amber: 242 169 59; --g-magenta: 224 64 251; --g-cyan: 34 211 238; --g-indigo: 99 102 241; --g-green: 74 222 128; --g-rose: 251 113 133;
}
/* Names the blog stylesheet (blog.css) and older markup still use. */
:root {
  --line-2: var(--line-strong); --faint: var(--muted); --accent-ink: var(--accent);
  --cta-bg: var(--text); --cta-ink: var(--bg); --radius: var(--r-lg); --radius-sm: var(--r-md); --font: var(--sans);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.53 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-underline-offset: 3px; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--r-md);
  background: var(--accent-fill); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
h1 { font: 700 var(--fs-display)/var(--lh-display) var(--sans); letter-spacing: -0.025em; }
h2 { font: 700 var(--fs-h2)/1.15 var(--sans); letter-spacing: -0.02em; }
h3 { font: 600 var(--fs-h3)/1.25 var(--sans); letter-spacing: -0.01em; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Kickers, chips, keys */
.kicker, .eyebrow { display: block; font: 600 var(--fs-fine)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
kbd, code { font: 500 .875em/1.2 var(--mono); padding: 2px 7px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-strong); border-bottom-width: 2px; color: var(--text); }
code { border-bottom-width: 1px; }
.chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 30px; padding: 4px 14px; border-radius: var(--r-pill);
  font: 600 var(--fs-fine)/1.2 var(--sans); color: var(--tint, var(--accent)); border: 1px solid currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.g-amber { --tint: var(--f-amber); --glow: var(--g-amber); } .g-magenta { --tint: var(--f-magenta); --glow: var(--g-magenta); }
.g-cyan { --tint: var(--f-cyan); --glow: var(--g-cyan); } .g-indigo { --tint: var(--f-indigo); --glow: var(--g-indigo); }
.g-green { --tint: var(--f-green); --glow: var(--g-green); } .g-rose { --tint: var(--f-rose); --glow: var(--g-rose); }
/* Free / Pro tags: outlined, so they read in both appearances */
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: var(--r-pill); font: 600 .8125rem/1 var(--mono); letter-spacing: .04em;
  text-transform: uppercase; vertical-align: middle; border: 1px solid currentColor; }
.tag-free { color: var(--f-green); }
.tag-pro { color: var(--accent); }
.fine { font: 400 var(--fs-fine)/1.5 var(--sans); color: var(--muted); margin: 0; }
.fine a { color: var(--accent); }
.muted { color: var(--muted); }
.more, .link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent); font-weight: 600; font-size: var(--fs-small); text-decoration: none; }
.more:hover, .link:hover { text-decoration: underline; }

/* ---------- Buttons: .button is the App Store button (text-on-background, like Moor's Download); .ghost is the quiet one ---------- */
.button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-md); background: var(--text); color: var(--bg);
  font: 600 var(--fs-body)/1.2 var(--sans); text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .15s var(--ease), background-color .15s, border-color .15s;
}
.button:hover, .btn:hover { background: rgb(var(--fg-rgb) / .84); transform: translateY(-1px); }
.button:active, .btn:active { transform: none; }
.button svg, .btn svg { width: 1.15em; height: 1.15em; flex: none; margin-top: -.1em; }
.button.accent { background: var(--accent-fill); color: var(--on-accent); }
.button.accent:hover { background: var(--accent-hi); }
.button.ghost, .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.button.ghost:hover, .btn-ghost:hover { background: rgb(var(--fg-rgb) / .06); border-color: rgb(var(--fg-rgb) / .35); }
.button.small, .btn-sm { min-height: 44px; padding: 0 16px; font-size: var(--fs-small); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-label-short { display: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; min-height: var(--nav-h);
  background: var(--nav-bg); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 8px; min-height: var(--nav-h); max-width: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 1.25rem/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; color: var(--text); white-space: nowrap; }
.brand img { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.site-header nav { margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500;
  color: var(--muted); text-decoration: none; transition: color .15s, background-color .15s; }
.nav-links a:hover { color: var(--text); background: rgb(var(--fg-rgb) / .06); }
.nav-links a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav-actions { display: flex; flex: none; align-items: center; gap: 4px; margin-left: 8px; }
.nav-actions .button { padding: 0 16px; font-size: var(--fs-small); white-space: nowrap; }
.brand { min-width: 0; }
.brand span { overflow: hidden; text-overflow: ellipsis; }
.theme-toggle, .menu summary { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--text); transition: background-color .15s, border-color .15s; }
.theme-toggle:hover, .menu summary:hover { background: rgb(var(--fg-rgb) / .08); border-color: var(--line); }
.theme-toggle svg, .menu summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu { position: static; display: none; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: rgb(var(--fg-rgb) / .08); border-color: var(--line); }
.menu-panel { position: absolute; top: 100%; left: 0; right: 0; padding: 8px var(--gutter) 16px; background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-soft); max-height: calc(100svh - var(--nav-h)); overflow-y: auto; }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a { display: flex; align-items: center; min-height: 48px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-panel a:hover { color: var(--accent); }
@media (max-width: 920px) {
  .site-header nav[aria-label="Main"] { display: none; }
  .menu { display: block; }
  .nav-actions { margin-left: auto; }
}
/* Below 480px "Get the app" doesn't fit beside the wordmark, theme toggle and menu (it wrapped into the wordmark on a 430px iPhone). */
@media (max-width: 480px) {
  .site-header .wrap { gap: 4px; }
  .nav-actions { margin-left: auto; gap: 0; }
  .nav-actions .button { padding: 0 12px; }
  .btn-label-long { display: none; }
  .btn-label-short { display: inline; }
  .brand { gap: 8px; font-size: 1.0625rem; }
}

/* ---------- Sections (home) ---------- */
.hm { padding: clamp(64px, 9vw, 120px) 0; }
.hm.band { background: var(--band); }
.hm h2 { margin: 0 0 20px; max-width: 24ch; }
.hm-sub { margin: -6px 0 40px; max-width: 60ch; color: var(--muted); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.center { text-align: center; }
.center h2, .center .hm-sub { margin-inline: auto; }
.hm a:not(.button):not(.more):not(.tile):not(.btn) { color: var(--accent); }
.hm .guides a, .hm .egrid a { color: var(--text); }

/* Announcement band */
.announce { background: var(--accent-fill); color: var(--on-accent); text-align: center; }
.announce a { display: block; min-height: 44px; padding: 10px var(--gutter); line-height: 24px; color: inherit; text-decoration: none; font-size: var(--fs-small); font-weight: 500; }
.announce a:hover { text-decoration: underline; }
.announce a:focus-visible { outline-color: var(--on-accent); outline-offset: -4px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 96px); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 90%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 20% 40%, rgb(var(--g-indigo) / .16), transparent 70%), radial-gradient(35% 45% at 80% 30%, rgb(var(--g-amber) / .16), transparent 70%),
    radial-gradient(40% 50% at 50% 80%, rgb(var(--g-magenta) / .12), transparent 70%); }
.hero-copy { text-align: center; display: grid; justify-items: center; }
.hero-copy h1 { max-width: 18ch; margin: 0 0 20px; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem); line-height: 1.04; letter-spacing: -0.035em; }
.hero-sub { max-width: 46ch; margin: 0 0 28px; font-size: clamp(1.0625rem, 1rem + .5vw, 1.3125rem); line-height: 1.5; color: var(--muted); }
.hero-copy .ctas { justify-content: center; }
.hero-micro { margin-top: 16px; max-width: 64ch; }
.pill { margin: 0 0 22px; }
.pill a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--fs-small); box-shadow: var(--shadow-soft); }
.pill a:hover { border-color: var(--accent); }
.pill-tag { padding: 5px 11px; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent); font-weight: 600; font-size: var(--fs-fine); white-space: nowrap; }

/* The product window: the interactive Bedroom (a rendered room the control really relights) */
.stage { position: relative; margin: clamp(36px, 5vw, 64px) auto 0; width: calc(100% - 2 * var(--gutter)); max-width: var(--wrap);
  border-radius: var(--r-lg); overflow: hidden; background: #0b0b0d; color-scheme: dark; border: 1px solid rgb(255 255 255 / .12); box-shadow: var(--shadow-window); }
.stage-media { position: relative; aspect-ratio: 3840 / 1646; overflow: hidden; background: #080808; }
.room { position: absolute; top: 0; bottom: 0; left: var(--room-x, 50%); aspect-ratio: 3840 / 1646; min-width: 100%; transform: translateX(calc(var(--room-x, 50%) * -1)); }
.room picture, .room-fx { position: absolute; inset: 0; }
.room img, .room canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.room-fx { isolation: isolate; }
.room canvas, .room-fx { opacity: 0; transition: opacity .35s ease; }
.room canvas.is-live, .room-fx.is-live { opacity: 1; }
.room-glow { position: absolute; inset: 0; isolation: isolate; mix-blend-mode: plus-lighter; opacity: var(--glow, 1); }
@supports not (mix-blend-mode: plus-lighter) { .room-glow { mix-blend-mode: screen; } }
.room-tint { position: absolute; inset: 0; background: var(--tint, #fff); mix-blend-mode: multiply; }
.bulb-hit { position: absolute; left: 63%; width: 15%; top: 16%; height: 76%; z-index: 1; border-radius: 40% 40% 48% 48%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stage-ui { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; pointer-events: none; padding-inline: clamp(16px, 4vw, 48px); }
.stage-ui .wrap { padding: 0; max-width: none; }

.room-card {
  --glow-rgb: 255, 197, 138;
  position: relative; width: min(420px, 42%); min-width: 340px; padding: 18px 20px 14px; border-radius: 26px; pointer-events: auto; text-align: left;
  color: #f2f2f4; color-scheme: dark;
  background: linear-gradient(115deg, rgba(var(--glow-rgb), 0.20), rgba(var(--glow-rgb), 0.07) 55%, rgba(var(--glow-rgb), 0.02)), rgba(22, 19, 17, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 230, 0.14), 0 30px 70px -28px rgba(0, 0, 0, 0.9);
  transition: background .5s ease;
}
.rc-hint { position: absolute; left: 20px; bottom: 100%; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px;
  font-size: var(--fs-fine); font-weight: 600; color: #f5efe7; background: rgba(22, 19, 17, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 244, 230, 0.16); transition: opacity .4s ease; }
.rc-hint.is-gone { opacity: 0; visibility: hidden; }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rc-title { margin: 0; font: 700 1.5rem/1.15 var(--sans); letter-spacing: -0.02em; }
.rc-status { margin: 2px 0 0; font-size: var(--fs-fine); color: #cfc6bb; }
.rc-power { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #16130f;
  background: radial-gradient(circle at 50% 40%, rgba(var(--glow-rgb), 0.95), rgba(var(--glow-rgb), 0.55));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 26px 2px rgba(var(--glow-rgb), 0.55); transition: background .4s ease, box-shadow .4s ease, transform .15s ease; }
.rc-power svg { width: 24px; height: 24px; }
.rc-power:active { transform: scale(0.94); }
.rc-power[aria-checked="false"] { background: rgba(255, 255, 255, 0.08); color: #d9d1c6; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.32); }
.rc-power:focus-visible, .rc-bri input:focus-visible, .sw input:focus-visible + .sw-dot { outline: 3px solid #d4c7ff; outline-offset: 3px; }
.rc-bri input:focus-visible { outline-offset: 0; border-radius: 12px; }
.rc-bri { margin-top: 14px; }
.rc-label, .rc-colors legend { display: flex; justify-content: space-between; font-size: var(--fs-fine); font-weight: 600; color: #cfc6bb; }
.rc-label output { color: #f5efe7; font-variant-numeric: tabular-nums; }
.rc-bri input { --pct: 100%; display: block; width: 100%; height: 44px; margin: 4px 0 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rc-bri input::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.95) var(--pct), rgba(255, 255, 255, 0.16) var(--pct)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.rc-bri input::-moz-range-track { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.rc-bri input::-moz-range-progress { height: 10px; border-radius: 999px; background: rgba(var(--glow-rgb), 0.95); }
.rc-bri input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -8px; border-radius: 50%; border: 0; background: #fbf7f1; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.5); }
.rc-bri input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 0; background: #fbf7f1; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.5); }
.rc-colors { position: relative; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.rc-colors legend { padding: 0; float: left; }
.rc-color-name { float: right; font-size: var(--fs-fine); font-weight: 600; color: #f5efe7; }
.rc-swatches { clear: both; display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); margin: 4px -6px 0; }
.sw { position: relative; display: grid; place-items: center; height: 48px; cursor: pointer; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sw-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.22); transition: box-shadow .2s ease, transform .2s ease; }
.sw input:checked + .sw-dot { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 3px #16130f, 0 0 0 5px #f5efe7; }
.sw input:checked + .sw-dot::after { content: ""; display: block; width: 10px; height: 10px; margin: 10px auto; border-radius: 50%; background: #16130f; box-shadow: 0 0 0 2px #f5efe7; }
.sw-warm { --sw: #ffc58a; } .sw-daylight { --sw: #eef2fb; } .sw-amber { --sw: #ff9d2e; }
.sw-pink { --sw: #ff5cc8; } .sw-cyan { --sw: #3fd4ff; } .sw-purple { --sw: #9466ff; }
.stage-note { margin: 16px auto 0; padding-inline: var(--gutter); text-align: center; }
@media (max-width: 899px) {
  .stage-ui { position: relative; inset: auto; display: block; padding: 0 12px 12px; margin-top: -24px; }
  .room-card { width: 100%; min-width: 0; max-width: 520px; margin: 0 auto; }
  .rc-hint { position: static; display: inline-block; margin: 0 0 12px; }
  .rc-hint.is-gone { display: none; }
}
@media (max-width: 700px) {
  .stage { width: calc(100% - 24px); border-radius: 18px; }
  .stage-media { aspect-ratio: 16 / 10; }
  .room { --room-x: 72%; }
}
@media (max-width: 360px) {
  .room-card { padding: 16px 12px 12px; }
  .rc-swatches { margin: 4px 0 0; }
}

/* Trust strip */
.trust { border-block: 1px solid var(--line); }
.trust ul { list-style: none; margin: 0 auto; padding: 14px var(--gutter); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
.trust li { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.trust li::before { content: ""; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--accent-fill); flex: none; }

/* Feature rows: copy + a real capture, alternating */
.feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(36px, 5vw, 64px) 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.feature.flip .feature-copy { order: 2; }
.feature-copy { min-width: 0; }
.feature-copy h3 { margin: 14px 0 10px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.feature-copy > p { margin: 0 0 14px; color: var(--muted); max-width: 46ch; }
.feature-copy > p strong { color: var(--text); }
.feature-copy > p.chip { margin: 0; color: var(--tint, var(--accent)); }
.feature-copy .chip .tag { margin-left: 2px; min-height: 20px; font-size: .75rem; }
.feature-demo { min-width: 0; position: relative; display: flex; justify-content: center; align-items: center; padding: clamp(20px, 3vw, 40px);
  border-radius: var(--r-lg); background: var(--band); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.feature-demo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 60%, rgb(var(--glow, var(--accent-rgb)) / .22), transparent 72%); }
.feature-demo .frame-phone { width: min(100%, 236px); }
.feature-demo .frame-fold { max-width: 560px; }
.feature-demo .frame-window { width: min(100%, 300px); }
.feature-demo .frame-watch { width: 220px; border-radius: 54px; padding: 14px; }
.feature-demo .frame-watch img { border-radius: 41px; }
.ticks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.ticks li { padding-left: 26px; position: relative; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 9px; height: 9px; border-radius: 3px; background: var(--tint, var(--accent-fill)); transform: rotate(45deg); }
.durations { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; padding: 0; list-style: none; }
.durations li { min-width: 64px; text-align: center; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-strong); font: 600 var(--fs-body)/1.3 var(--mono); }
.durations li span { display: block; font: 400 var(--fs-fine)/1.3 var(--sans); color: var(--muted); }
figure.feature-demo { margin: 0; }
.media-toggle { position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid rgb(255 255 255 / .3); background: rgb(14 15 18 / .78); color: #f2f2f4; font: 600 var(--fs-small)/1 var(--sans); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.media-toggle svg { width: 16px; height: 16px; }
.media-toggle:hover { background: rgb(14 15 18 / .92); }
@media (max-width: 900px) {
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .feature-copy { order: 0; }
  .feature-copy > p { max-width: none; }
}

/* Device frames (CSS only; every screen is a real capture). Frames stay dark in both appearances. */
.frame-phone { width: min(100%, 250px); border-radius: 38px; padding: 7px; background: #1a1a1c; box-shadow: 0 0 0 1px #3a3a3e, var(--shadow-window); }
.frame-phone img, .frame-phone video { border-radius: 31px; width: 100%; aspect-ratio: 1320 / 2868; object-fit: cover; }
.frame-phone.tour { width: min(100%, 236px); }
.frame-phone.tour img, .frame-phone.tour video { aspect-ratio: 600 / 1300; }
.frame-phone.cut { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.frame-phone.cut img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; aspect-ratio: 1320 / 1900; object-position: top; }
.frame-outer { width: min(100%, 240px); border-radius: 34px; padding: 7px; background: #1a1a1c; box-shadow: 0 0 0 1px #3a3a3e, var(--shadow-window); }
.frame-outer img { border-radius: 27px; width: 100%; }
.frame-fold { width: 100%; border-radius: 30px; padding: 8px; background: #1a1a1c; box-shadow: 0 0 0 1px #3a3a3e, var(--shadow-window); position: relative; }
.frame-fold img { border-radius: 23px; width: 100%; }
.frame-fold::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,0.10) 20%, rgba(255,255,255,0.10) 80%, transparent); }
.frame-tablet { width: 100%; border-radius: 26px; padding: 9px; background: #1a1a1c; box-shadow: 0 0 0 1px #3a3a3e, var(--shadow-window); }
.frame-tablet img { border-radius: 18px; width: 100%; }
.frame-tablet.cut { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.frame-tablet.cut img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; aspect-ratio: 2064 / 1500; object-fit: cover; object-position: top; }
.frame-window { width: min(100%, 300px); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-window); }
.frame-window img { width: 100%; }
.frame-screen { width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 6px #121214, 0 0 0 7px #34343a, var(--shadow-window); }
.frame-screen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.frame-wide { width: 100%; border-radius: 14px 14px 0 0; overflow: hidden; }
.frame-wide img { width: 100%; aspect-ratio: 16 / 8.2; object-fit: cover; }
.frame-watch { width: 184px; border-radius: 46px; padding: 12px; background: #141416; box-shadow: 0 0 0 1px #3a3a3e, inset 0 0 0 3px #232326, var(--shadow-window); }
.frame-watch img { border-radius: 34px; width: 100%; }
.frame-photo { width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-window); }
.frame-photo img { width: 100%; }

/* Devices grid */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); color: var(--text); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column; min-height: 300px; isolation: isolate; text-decoration: none; transition: transform .3s var(--ease), border-color .3s; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 50% 100%, rgb(var(--glow, var(--accent-rgb)) / .18), transparent 70%); }
a.tile:hover { transform: translateY(-3px); border-color: rgb(var(--accent-rgb) / .45); }
.tile-text { padding: 24px 24px 0; }
.tile-text h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.tile-text p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.tile-text .more { margin-top: 4px; }
a.tile:hover .more { text-decoration: underline; }
.tile-media { margin-top: auto; padding: 22px 24px 0; display: flex; justify-content: center; align-items: flex-end; }
.tile-media.bleed { padding: 22px 0 0; }
.t-vision { grid-column: span 4; --glow: var(--g-cyan); }
.t-iphone { grid-column: span 2; --glow: var(--g-amber); }
.t-duo { grid-column: span 3; --glow: var(--g-magenta); }
.t-ipad { grid-column: span 3; --glow: var(--g-indigo); }
.t-mac { grid-column: span 2; --glow: var(--g-amber); }
.t-tv { grid-column: span 4; --glow: var(--g-rose); }
.t-watch { grid-column: span 2; --glow: var(--g-green); }
.t-ext { grid-column: span 4; }
.t-ext .tile-text:last-child { padding-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 24px 4px; padding: 0; }
.chips li { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-strong); font-size: var(--fs-small); }
.devices-cta { margin: 32px 0 0; display: flex; justify-content: center; }
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-vision, .t-tv, .t-duo, .t-ipad, .t-ext { grid-column: span 2; }
  .t-iphone, .t-mac, .t-watch { grid-column: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > * { grid-column: span 1 !important; }
}

/* Comparison and specs tables */
.cmp-scroll { overflow-x: auto; border-radius: var(--r-md); }
.cmp-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cmp, .specs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cmp { min-width: 680px; }
.specs { table-layout: auto; }
.cmp th, .cmp td, .specs th, .specs td { text-align: left; vertical-align: middle; padding: 14px 16px; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.cmp thead th, .specs thead th { font: 600 var(--fs-fine)/1.2 var(--sans); color: var(--muted); background: var(--surface-2); }
.cmp tbody th, .specs tbody th { font-weight: 600; color: var(--text); }
.cmp tbody th { width: 34%; }
.cmp td { text-align: center; color: var(--muted); white-space: nowrap; }
.cmp thead th:not(:first-child) { text-align: center; }
.cmp td::before { display: inline-block; width: 1.4em; font-weight: 700; }
.cmp td[data-v="yes"]::before { content: "✓"; color: var(--signal); }
.cmp td[data-v="partial"]::before { content: "◐"; color: var(--warn); }
.cmp td[data-v="no"]::before { content: "✕"; color: var(--err); }
.cmp td[data-v="yes"] { color: var(--text); }
.cmp tbody tr:last-child > *, .specs tbody tr:last-child > * { border-bottom: 0; }
.specs tbody th { width: 26%; }
.specs td { color: var(--muted); }
.cmp-legend { margin-top: 16px; max-width: 80ch; }
@media (max-width: 720px) { .specs th, .specs td { padding: 12px 10px; } .specs tbody th { width: 36%; } }

/* "Everything else" cards and guide lists */
.egrid, .guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.egrid a, .guides a { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 44px; padding: 20px 22px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-soft); color: var(--text); text-decoration: none; transition: transform .3s var(--ease), border-color .3s; }
.egrid a:hover, .guides a:hover { transform: translateY(-2px); border-color: rgb(var(--accent-rgb) / .45); }
.egrid strong, .guides strong { font: 600 var(--fs-h4)/1.3 var(--sans); }
.egrid span, .guides span { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; text-align: left; }
.plan { position: relative; display: grid; gap: 14px; align-content: start; justify-items: start; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); }
.plan.pro { box-shadow: var(--shadow-window); isolation: isolate; }
.plan.pro::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgb(var(--g-indigo) / .5), rgb(var(--g-amber) / .45), rgb(var(--g-magenta) / .45)); filter: blur(24px); opacity: .4; }
.plan-top { display: flex; align-items: center; gap: 14px; }
.plan-top img { border-radius: 14px; }
.plan h3 { font-size: var(--fs-h3); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.price { margin: 0; font: 700 clamp(2.5rem, 2rem + 2.4vw, 3.5rem)/1 var(--sans); letter-spacing: -0.03em; }
.price-unit { font: 500 var(--fs-body)/1 var(--sans); letter-spacing: 0; color: var(--muted); }
.price-alt { margin: -4px 0 0; color: var(--muted); }
.price-alt strong { color: var(--text); }
.plan-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; }
.plan-list li { position: relative; padding-left: 26px; }
.plan-list li::before { content: ""; position: absolute; left: 4px; top: .4em; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan .button { width: 100%; margin-top: auto; }
.plans + .fine { margin-top: 24px; text-align: center; }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* FAQ (home: details.qa; Moor's +/× disclosure) */
.faq-list { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq-list details, details.qa { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-list summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 12px 0; font: 600 var(--fs-h4)/1.4 var(--sans); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font: 400 1.5rem/1 var(--sans); color: var(--accent); transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .answer { padding: 0 0 16px; color: var(--muted); max-width: 70ch; }
.faq-list .answer p { margin: 0; }
.faq-more { margin-top: 20px; text-align: center; }

/* Closing call to action */
.cta { background: radial-gradient(50% 80% at 50% 100%, rgb(var(--accent-rgb) / .14), transparent 70%); }
.cta .wrap { display: grid; justify-items: center; text-align: center; }
.cta-icon { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 18px; box-shadow: var(--shadow-soft); }
.cta .ctas { justify-content: center; margin-bottom: 16px; }

/* ---------- Inner pages (guides, features, compare, support, legal; the blog reuses these) ---------- */
.crumbs { padding-top: 24px; font-size: var(--fs-fine); color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.page-hero { position: relative; isolation: isolate; padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); margin-bottom: clamp(32px, 5vw, 56px); }
.page-hero::before { content: ""; position: absolute; inset: -120px 0 0; z-index: -1; pointer-events: none; background: radial-gradient(45% 60% at 78% 40%, rgb(var(--glow, var(--accent-rgb)) / .14), transparent 70%); }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.page-hero.no-media .wrap { grid-template-columns: minmax(0, 1fr); }
.page-hero.no-media .intro { max-width: 860px; }
.page-hero .kicker { color: var(--tint, var(--accent)); }
.page-hero h1 { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem); line-height: 1.07; letter-spacing: -0.03em; }
.page-hero .lede { color: var(--muted); font-size: clamp(1.0625rem, 1rem + .5vw, 1.3125rem); line-height: 1.5; margin: 18px 0 0; max-width: 40em; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 28px; }
.page-hero .meta, .meta { color: var(--muted); font-size: var(--fs-fine); }
.page-hero p.meta { margin: 16px 0 0; font-family: var(--mono); }
.page-hero .visual { display: flex; justify-content: center; }
.page-hero .visual .frame-phone { width: min(100%, 270px); }
.page-hero .visual .frame-window { width: min(100%, 320px); }
@media (max-width: 860px) {
  .page-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .page-hero .visual .frame-phone { width: min(72%, 270px); }
  .page-hero .visual .frame-window { width: min(72%, 280px); }
}

.article { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); padding-bottom: clamp(56px, 9vw, 110px); align-items: start; }
.article.no-toc { grid-template-columns: minmax(0, 1fr); }
.article.no-toc .prose { margin-inline: auto; }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); font-size: var(--fs-small); max-height: calc(100svh - var(--nav-h) - 48px); overflow-y: auto; }
.toc h2 { margin: 0 0 6px; padding: 0 12px; font: 600 var(--fs-fine)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--text); background: rgb(var(--fg-rgb) / .06); }
@media (max-width: 960px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; padding: 16px 8px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
}
.prose { max-width: 760px; min-width: 0; }
.prose > section { margin-bottom: 48px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; margin: 0 0 14px; }
.prose h3 { font: 600 var(--fs-h4)/1.4 var(--sans); margin: 28px 0 8px; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); }
.prose p { margin: 0 0 16px; }
.prose a:not(.button):not(.btn) { color: var(--accent); }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--accent); }
.prose ol { counter-reset: step; list-style: none; padding-left: 0; }
.prose ol > li { counter-increment: step; position: relative; padding-left: 52px; min-height: 36px; margin-bottom: 14px; padding-top: 5px; }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--accent); color: var(--accent); font: 600 var(--fs-small)/1 var(--mono); }
.prose aside.note { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--accent); background: rgb(var(--accent-rgb) / .08); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose aside.note p { color: var(--text); }
.prose aside.note p:last-child { margin-bottom: 0; }
.prose .faq { border-top: 1px solid var(--line); padding-top: 40px; }
.prose .faq h3 { margin-top: 26px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); margin: 22px 0; background: var(--surface); }
.table-wrap:focus-visible { outline-offset: 2px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 520px; }
.table-wrap caption { text-align: left; padding: 14px 16px; color: var(--muted); font-size: var(--fs-fine); caption-side: top; border-bottom: 1px solid var(--line); }
.table-wrap th, .table-wrap td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.table-wrap thead th { color: var(--text); font-weight: 600; background: var(--band); }
.table-wrap tbody td:first-child, .table-wrap tbody th { color: var(--text); }
.table-wrap tr:last-child > * { border-bottom: 0; }

.cta-card { position: relative; overflow: hidden; isolation: isolate; margin: 8px 0 44px; padding: clamp(24px, 4vw, 36px); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); }
.cta-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 100% 100%, rgb(var(--accent-rgb) / .18), transparent 70%); }
.cta-card h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); margin: 0 0 8px; }
.prose .cta-card p, .cta-card p { color: var(--muted); margin: 0 0 20px; }
.related { background: var(--band); border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 88px) 0; }
.related h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 24px; }

/* Support form */
.form { display: grid; gap: 18px; max-width: 560px; margin-top: 8px; padding: clamp(20px, 4vw, 30px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.form label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.form .hint { color: var(--muted); font-weight: 400; }
.form input, .form select, .form textarea { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-md); font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong); transition: border-color .15s; }
.form input::placeholder, .form textarea::placeholder { color: var(--muted); }
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.form .honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); }
.form-status.ok { border-color: var(--signal); }
.form-status.err { border-color: var(--err); }

/* ---------- Footer ---------- */
.site-footer { background: var(--band); border-top: 1px solid var(--line); padding: 56px 0 24px; font-size: var(--fs-small); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 2fr; gap: 32px; }
.footer-about p { margin: 12px 0 0; color: var(--muted); max-width: 32ch; }
.footer-about p a { color: var(--accent); }
.site-footer h2 { font: 600 var(--fs-fine)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer nav a, .footer-legal a, .linkish { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font-size: var(--fs-small); }
.site-footer nav a:hover, .footer-legal a:hover, .linkish:hover { color: var(--accent); text-decoration: underline; }
.footer-guides ul { columns: 2; column-gap: 24px; }
.footer-guides li { break-inside: avoid; }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.legal { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal .fine { flex: 1 1 420px; }
.legal .fine + .fine { margin-top: 6px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 16px; }
.footer-legal a { color: var(--muted); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about, .footer-guides { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } .footer-guides ul { columns: 1; } }

/* ---------- Consent (small, non-blocking, both choices equal) ---------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-radius: var(--r-md); background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--shadow-window); font: 400 var(--fs-small)/1.45 var(--sans); }
.consent p { margin: 0; flex: 1 1 280px; }
.consent a { color: inherit; text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; }
.consent .btn, .consent .button { min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); font: 600 var(--fs-small) var(--sans); color: var(--text); background: transparent; border: 1px solid var(--line-strong); }
.consent .btn:hover, .consent .button:hover { background: rgb(var(--fg-rgb) / .06); transform: none; }
@media (prefers-reduced-motion: no-preference) { .consent { animation: consent-in .25s ease-out; } }
@keyframes consent-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Motion: fade-up, never required to read ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s var(--ease) both; }
  .rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .button, .btn, .tag, .chip { border: 1px solid ButtonText; }
  .ticks li::before, .prose ol > li::before { forced-color-adjust: none; }
}
h2.center { margin-inline: auto; text-align: center; }
@media (max-width: 359px) { .site-header .brand span { display: none; } }

/* "Featured on MacBase" badge in the footer (its SVG comes from macbase.app; the CSP allows that host for images). */
.macbase-badge { display: inline-block; margin-top: 12px; }
.macbase-badge img { display: block; height: 54px; width: auto; }