/* Lumadex website. Monochrome interface; the only colour is the light itself (the Lumadex fan, isolux and captures). */

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

:root {
  color-scheme: dark;
  --bg: #08080a;
  --bg-deep: #040405;
  --surface: #111114;
  --surface-2: #17171b;
  --surface-3: #1e1e23;
  --glass: rgba(17, 17, 20, 0.72);
  --text: #f4f4f5;
  --muted: #a7a7b0;
  --soft: #74747e;
  --border: rgba(255, 255, 255, 0.085);
  --border-strong: rgba(255, 255, 255, 0.16);
  --primary: #f4f4f5;
  --on-primary: #0a0a0b;
  --focus: #ffffff;
  --pass: #2f9e5b;
  --tolerance: #e0a21b;
  --over: #d64541;
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 40px 120px rgba(0, 0, 0, 0.55);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --content: 1240px;
  --header: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spectrum: linear-gradient(90deg, #1d2bff 0%, #8e2a8e 20%, #149b48 42%, #f7d730 64%, #f26a22 82%, #ff2020 100%);
  --wordmark-dark: none;
  --wordmark-light: block;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfbfa;
  --bg-deep: #f2f2f0;
  --surface: #ffffff;
  --surface-2: #f5f5f3;
  --surface-3: #ececea;
  --glass: rgba(251, 251, 250, 0.78);
  --text: #0c0c0e;
  --muted: #55555e;
  --soft: #82828c;
  --border: rgba(10, 10, 14, 0.09);
  --border-strong: rgba(10, 10, 14, 0.18);
  --primary: #0c0c0e;
  --on-primary: #ffffff;
  --focus: #0c0c0e;
  --shadow-sm: 0 10px 30px rgba(20, 20, 30, 0.08);
  --shadow-lg: 0 40px 100px rgba(20, 20, 30, 0.16);
  --wordmark-dark: block;
  --wordmark-light: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
p a, .prose a, li a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
p a:hover, .prose a:hover, li a:hover { text-decoration-color: currentColor; }
::selection { background: var(--text); color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: top 0.2s; }
.skip:focus { top: 12px; }

.wrap { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }

/* ------------------------------------------------------------------ type */

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; font-optical-sizing: auto; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); letter-spacing: -0.04em; line-height: 1.02; font-weight: 720; }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: -0.035em; }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.25; font-weight: 650; }
h4 { font-size: 1rem; letter-spacing: -0.01em; font-weight: 650; }
p { margin: 0; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--muted); line-height: 1.6; max-width: 62ch; }
.muted { color: var(--muted); }
.soft { color: var(--soft); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--spectrum); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ header */

.site-header { position: sticky; top: 0; z-index: 50; height: var(--header); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s; }
.site-header.scrolled, .site-header.solid { background: var(--glass); border-bottom-color: var(--border); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 30px; width: auto; }
.brand .on-dark { display: var(--wordmark-light); }
.brand .on-light { display: var(--wordmark-dark); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { font-size: 0.925rem; font-weight: 550; color: var(--muted); padding: 8px 12px; border-radius: 10px; transition: color 0.2s, background 0.2s; }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.icon-button:hover { background: var(--surface-2); border-color: var(--border-strong); }
.icon-button svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
.menu-toggle { display: none; }

@media (max-width: 1080px) {
  .nav, .header-actions .button { display: none; }
  .menu-toggle { display: inline-grid; }
  .header-actions { margin-left: auto; }
}

.mobile-menu { position: fixed; inset: var(--header) 0 0 0; z-index: 49; background: var(--bg); padding: 24px 0 40px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; }
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu nav { display: grid; gap: 2px; }
.mobile-menu nav a { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid var(--border); }
.mobile-menu .button-row { margin-top: 28px; }

/* ------------------------------------------------------------------ buttons */

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 12px; font-size: 0.95rem; font-weight: 620; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; font-family: inherit; }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 28px rgba(255, 255, 255, 0.07); }
.button.primary:hover { box-shadow: 0 10px 34px rgba(255, 255, 255, 0.14); transform: translateY(-1px); }
:root[data-theme="light"] .button.primary { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.button.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.button.secondary:hover { background: var(--surface-3); border-color: var(--border-strong); }
.button.ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.button.ghost:hover { background: var(--surface-2); }
.button.small { height: 38px; padding: 0 14px; font-size: 0.875rem; border-radius: 10px; }
.button svg { width: 16px; height: 16px; flex-shrink: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 620; color: var(--text); font-size: 0.95rem; }
.text-link svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ sections */

section { position: relative; }
.section { padding: clamp(84px, 11vw, 140px) 0; }
.section.tight { padding: clamp(64px, 8vw, 96px) 0; }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 780px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head.split { max-width: none; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 40px; }
@media (max-width: 860px) { .section-head.split { grid-template-columns: 1fr; } }
.rule { height: 1px; background: var(--border); border: 0; margin: 0; }
/* Bands merge into the page: the deeper tone fades in and out over the first and last stretch, no hard rules. */
.band { background: linear-gradient(180deg, var(--bg) 0, var(--bg-deep) 160px, var(--bg-deep) calc(100% - 160px), var(--bg) 100%); }

/* ------------------------------------------------------------------ hero */

.hero { padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 9vw, 120px); overflow: hidden; isolation: isolate; }
.hero-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0.9; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 180px; background: linear-gradient(transparent, var(--bg)); z-index: -1; pointer-events: none; }
.hero-glow { position: absolute; z-index: -1; width: 900px; height: 900px; right: -260px; top: -320px; border-radius: 50%; background: conic-gradient(from 200deg, rgba(29, 43, 255, 0.0), rgba(29, 43, 255, 0.16), rgba(142, 42, 142, 0.14), rgba(20, 155, 72, 0.12), rgba(247, 215, 48, 0.13), rgba(242, 106, 34, 0.12), rgba(255, 32, 32, 0.1), rgba(29, 43, 255, 0.0)); filter: blur(90px); opacity: 0.55; pointer-events: none; }
:root[data-theme="light"] .hero-glow { opacity: 0.35; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: 24px; }
.hero .lead { margin-bottom: 34px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; color: var(--soft); font-size: 0.85rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }

.hero-visual { position: relative; }
.frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow-lg); }
.frame img { width: 100%; }
.frame-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-strong); }
.frame-bar span { margin-left: 10px; font-size: 0.75rem; color: var(--soft); font-weight: 550; }
.float-card { position: absolute; z-index: 2; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); font-size: 0.82rem; min-width: 190px; }
.float-card strong { display: block; font-size: 1.45rem; letter-spacing: -0.03em; line-height: 1.1; }
.float-card .label { color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.float-card.a { left: -28px; bottom: 38px; }
.float-card.b { right: -18px; top: 70px; }
@media (max-width: 980px) { .float-card.a { left: 12px; bottom: 12px; } .float-card.b { right: 12px; top: 46px; } }
@media (max-width: 560px) { .float-card { display: none; } }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.02em; border: 1px solid var(--border-strong); color: var(--text); background: var(--surface-2); white-space: nowrap; }
.pill.pass { background: rgba(47, 158, 91, 0.16); border-color: rgba(47, 158, 91, 0.45); }
.pill.pass::before, .pill.open::before, .pill.over::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.pill.pass::before { background: var(--pass); }
.pill.open { background: rgba(224, 162, 27, 0.14); border-color: rgba(224, 162, 27, 0.45); }
.pill.open::before { background: var(--tolerance); }
.pill.over { background: rgba(214, 69, 65, 0.14); border-color: rgba(214, 69, 65, 0.45); }
.pill.over::before { background: var(--over); }
.legend { display: flex; gap: 2px; margin-top: 8px; height: 6px; border-radius: 4px; overflow: hidden; }
.legend i { flex: 1; }

/* ------------------------------------------------------------------ standards strip */

.strip { padding: 26px 0; border-block: 1px solid var(--border); background: var(--bg-deep); overflow: hidden; }
.strip-track { display: flex; gap: 46px; width: max-content; animation: drift 46s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-item { display: flex; align-items: baseline; gap: 10px; color: var(--muted); white-space: nowrap; font-size: 0.92rem; }
.strip-item b { color: var(--text); font-weight: 650; letter-spacing: -0.01em; }
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; flex-wrap: wrap; width: auto; } }

/* ------------------------------------------------------------------ cards */

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid.four, .grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid.two, .grid.three, .grid.four, .grid.five { grid-template-columns: 1fr; } }

.card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: border-color 0.3s, transform 0.4s var(--ease), background 0.3s; overflow: hidden; }
a.card:hover, .card.hover:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card h3 { margin-top: 4px; }
.card p { color: var(--muted); font-size: 0.95rem; }
.card .text-link { margin-top: auto; padding-top: 6px; }
.card .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.card .icon svg { width: 22px; height: 22px; }
.card .tag { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.card.media { padding: 0; }
.card.media .card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card.media .thumb { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.card.media .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.card.media:hover .thumb img { transform: scale(1.035); }
.card.feature-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--spectrum); opacity: 0; transition: opacity 0.3s; }
.card.feature-card:hover::before { opacity: 0.8; }

.stat { display: grid; gap: 4px; }
.stat strong { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.04em; line-height: 1; font-weight: 700; }
.stat span { color: var(--muted); font-size: 0.88rem; }

/* ------------------------------------------------------------------ split features */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.split.reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split.reverse > :first-child { order: 2; }
@media (max-width: 920px) { .split, .split.reverse { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } }
.split h2 { margin-bottom: 20px; }
.split .lead { margin-bottom: 26px; }
.checks { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--muted); font-size: 0.97rem; }
.checks li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7a7b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.checks li b { color: var(--text); font-weight: 620; }

.shot { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow-lg); }
.shot img { width: 100%; }
.shot figcaption, figure figcaption { padding: 12px 16px; font-size: 0.82rem; color: var(--soft); border-top: 1px solid var(--border); background: var(--surface); }
figure { margin: 0; }
.zoomable { cursor: zoom-in; }
.stack { position: relative; }
.stack .shot.back { position: absolute; width: 62%; right: -6%; bottom: -12%; z-index: 2; box-shadow: var(--shadow-lg); }
@media (max-width: 920px) { .stack .shot.back { display: none; } }

/* ------------------------------------------------------------------ real sites */

.sites { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.sites .site:first-child { grid-row: span 2; }
@media (max-width: 920px) { .sites { grid-template-columns: 1fr; } .sites .site:first-child { grid-row: auto; } }
.site { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); min-height: 300px; background: var(--surface-2); }
.site img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.site:hover img { transform: scale(1.03); }
.site::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.5) 58%, rgba(0, 0, 0, 0.9) 100%); }
.site .caption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 26px 28px; color: #f4f4f5; display: grid; gap: 8px; }
.site .caption .tag { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.site .caption h3 { font-size: 1.45rem; }
.site .caption p { color: rgba(255, 255, 255, 0.78); font-size: 0.93rem; max-width: 52ch; }

/* ------------------------------------------------------------------ workflow tabs */

.flow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 980px) { .flow { grid-template-columns: 1fr; } }
.flow-steps { display: grid; gap: 8px; counter-reset: step; }
.flow-step { position: relative; text-align: left; width: 100%; padding: 18px 20px 18px 64px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: inherit; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.flow-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 20px; top: 19px; font-size: 0.8rem; font-weight: 650; color: var(--soft); font-variant-numeric: tabular-nums; }
.flow-step h3 { font-size: 1.08rem; color: var(--text); margin-bottom: 4px; }
.flow-step p { font-size: 0.92rem; display: none; }
.flow-step[aria-selected="true"] { background: var(--surface); border-color: var(--border-strong); }
.flow-step[aria-selected="true"] p { display: block; }
.flow-step[aria-selected="true"]::after { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--spectrum); }
.flow-step:hover { color: var(--text); }
/* Workflow panels share one cell and cross fade, so changing step dissolves one view into the next. */
.flow > div:last-child { display: grid; }
.flow-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: scale(0.985) translate3d(0, 10px, 0); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), visibility 0s linear 0.7s; }
.flow-panel.active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), visibility 0s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); font-weight: 650; background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 620; white-space: nowrap; }
td .muted { font-size: 0.88rem; }
tbody tr { transition: background 0.2s; }
tbody tr:hover { background: var(--surface-2); }

/* ------------------------------------------------------------------ module index */

.module-nav { position: sticky; top: calc(var(--header) + 12px); z-index: 10; display: flex; gap: 6px; overflow-x: auto; padding: 8px; margin-bottom: 48px; border-radius: 14px; border: 1px solid var(--border); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); scrollbar-width: none; }
.module-nav::-webkit-scrollbar { display: none; }
.module-nav a { padding: 8px 14px; border-radius: 10px; font-size: 0.86rem; font-weight: 580; color: var(--muted); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.module-nav a:hover, .module-nav a.active { color: var(--text); background: var(--surface-2); }
.module { padding: 64px 0; border-top: 1px solid var(--border); }
.module:first-of-type { border-top: 0; padding-top: 0; }
.module .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.module h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 16px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.gallery figure { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 680px) { .gallery { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ pricing */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.plan.featured { border-color: var(--border-strong); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box; border: 1px solid transparent; box-shadow: var(--shadow-lg); }
.plan .price { font-size: 2.2rem; font-weight: 720; letter-spacing: -0.04em; line-height: 1; }
.plan .price small { font-size: 0.9rem; font-weight: 550; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--muted); font-size: 0.94rem; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.plan li::before { content: ""; width: 16px; height: 16px; margin-top: 4px; background: var(--text); opacity: 0.85; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan .button { margin-top: auto; }

/* ------------------------------------------------------------------ news */

.news-card time, .article time { font-size: 0.82rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.news-card .card-body .tag { margin-bottom: 2px; }
.article { max-width: 760px; margin-inline: auto; }
.article header { display: grid; gap: 18px; margin-bottom: 36px; }
.article .hero-image { margin: 36px 0 44px; }
.prose { font-size: 1.07rem; line-height: 1.75; color: var(--muted); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 1.6rem; color: var(--text); margin-top: 2.2em; }
.prose h3 { font-size: 1.2rem; color: var(--text); margin-top: 1.8em; }
.prose strong { color: var(--text); font-weight: 620; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.45em; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--border-strong); color: var(--text); font-size: 1.15rem; }

/* ------------------------------------------------------------------ forms */

.form { display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.field label .req { color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 0.97rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; transition: border-color 0.2s, background 0.2s; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); background: var(--surface); }
.field .hint { font-size: 0.8rem; color: var(--soft); }
.field.error input, .field.error select, .field.error textarea { border-color: var(--over); }
.field .message { font-size: 0.8rem; color: var(--over); display: none; }
.field.error .message { display: block; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 0.9rem; color: var(--muted); align-items: start; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--text); }
.notice { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 0.88rem; color: var(--muted); }
.form-status { display: none; }
.form-status.show { display: block; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-list { display: grid; gap: 22px; }
.contact-list div { display: grid; gap: 4px; }
.contact-list dt { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); font-weight: 650; }
.contact-list dd { margin: 0; font-size: 1.05rem; }

/* ------------------------------------------------------------------ CTA */

.cta { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--border-strong); background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.07), transparent 55%), var(--surface); padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: end; }
.cta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--spectrum); }
.cta h2 { margin-bottom: 14px; }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ page heads */

.page-head { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); overflow: hidden; isolation: isolate; }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 22px; max-width: 18ch; }
.page-head .lead { max-width: 64ch; }
.breadcrumb { display: flex; gap: 8px; font-size: 0.82rem; color: var(--soft); margin-bottom: 26px; }
.breadcrumb a:hover { color: var(--text); }

/* ------------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--border); padding: 72px 0 40px; background: var(--bg-deep); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 920px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-grid ul a { color: var(--muted); font-size: 0.93rem; text-decoration: none; }
.footer-grid ul a:hover { color: var(--text); }
.footer-brand { display: grid; gap: 18px; align-content: start; }
.footer-brand p { color: var(--muted); font-size: 0.93rem; max-width: 36ch; }
.footer-brand .gps { height: 34px; width: auto; }
.footer-brand .gps.on-light { display: var(--wordmark-dark); }
.footer-brand .gps.on-dark { display: var(--wordmark-light); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 0.83rem; color: var(--soft); }
.footer-base a:hover { color: var(--text); }

/* ------------------------------------------------------------------ reveal */

/* Reveals are visible unless motion.js is running (html.motion); see the motion section at the end. */

/* ------------------------------------------------------------------ lightbox */

.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 40px; background: rgba(4, 4, 5, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; cursor: zoom-out; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1600px, 100%); max-height: calc(100vh - 120px); border-radius: 14px; box-shadow: var(--shadow-lg); }
.lightbox p { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: #c9c9d0; font-size: 0.9rem; padding: 0 24px; }

/* ------------------------------------------------------------------ misc */

.kicker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.kicker-grid > div { padding: 26px 24px; border-right: 1px solid var(--border); }
.kicker-grid > div:last-child { border-right: 0; }
@media (max-width: 860px) { .kicker-grid { grid-template-columns: 1fr 1fr; } .kicker-grid > div:nth-child(2) { border-right: 0; } .kicker-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.callout { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 24px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); }
.callout .mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); }
.callout .mark img { width: 26px; }
.spectrum-rule { height: 2px; width: 64px; border-radius: 2px; background: var(--spectrum); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.not-found { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.section-head.split > .text-link { justify-self: end; margin-bottom: 8px; }
@media (max-width: 860px) { .section-head.split > .text-link { justify-self: start; } }
@media (max-width: 560px) { .button-row { display: grid; grid-template-columns: 1fr; width: 100%; } .button-row .button { justify-content: center; width: 100%; } }
/* isolux.js fields: fade out at the section's lower edge, and sit quieter behind the hero copy. */
.hero-canvas { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
.hero > .hero-canvas { opacity: 1; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.38) 40%, #000 60%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.38) 40%, #000 60%); mask-composite: intersect; }
@media (max-width: 900px) { .hero > .hero-canvas { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 60%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 60%, transparent 100%); } }

/* ---------------------------------------------------------------- isolux.js playground */
.iso-lab { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: stretch; }
@media (max-width: 1080px) { .iso-lab { grid-template-columns: 1fr; } }
.iso-stage-wrap { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-deep); overflow: hidden; box-shadow: var(--shadow-sm); }
.iso-stage { position: relative; flex: 1 1 auto; min-height: 520px; width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
@media (max-width: 1080px) { .iso-stage { flex: none; min-height: 0; aspect-ratio: 16 / 10; } }
@media (max-width: 680px) { .iso-stage { aspect-ratio: 4 / 5; } }
.iso-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.iso-hint { color: var(--soft); }
.iso-panel { display: grid; gap: 4px; padding: 8px 22px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.iso-group { display: grid; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.iso-group h3 { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.iso-ctl { display: grid; gap: 8px; }
.iso-ctl label, .iso-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.86rem; font-weight: 560; color: var(--text); }
.iso-ctl output { font-size: 0.8rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.iso-ctl input[type="text"] { width: 100%; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.iso-ctl input[type="text"]:focus { outline: none; border-color: var(--text); }
.iso-ctl input[aria-invalid="true"] { border-color: var(--over); }
.iso-note { font-size: 0.76rem; color: var(--soft); }
.iso-ctl input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
.iso-ctl input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--border-strong); }
.iso-ctl input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--border-strong); }
.iso-ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: var(--text); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }
.iso-ctl input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }
.iso-ctl input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.iso-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.iso-seg button { flex: 1 1 auto; font: inherit; font-size: 0.8rem; font-weight: 560; color: var(--muted); background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.iso-seg button:hover { color: var(--text); }
.iso-seg button[aria-pressed="true"] { color: var(--on-primary); background: var(--primary); }
.iso-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.iso-toggle { display: flex; align-items: center; gap: 12px; font-size: 0.86rem; font-weight: 560; cursor: pointer; }
.iso-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iso-toggle .track { position: relative; width: 36px; height: 20px; border-radius: 20px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background 0.2s; flex: none; }
.iso-toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 0.25s var(--ease), background 0.2s; }
.iso-toggle input:checked + .track { background: var(--primary); }
.iso-toggle input:checked + .track::after { transform: translateX(16px); background: var(--on-primary); }
.iso-toggle input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }
.iso-actions { display: flex; gap: 10px; padding-top: 18px; }
.iso-actions .button { flex: 1; justify-content: center; }
.iso-code { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.iso-code-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.iso-code-head h3 { font-size: 1.05rem; margin-bottom: 4px; }
.iso-code-head p { font-size: 0.86rem; }
.iso-code pre { margin: 0; border: 0; border-radius: 0; max-height: 360px; }
pre { margin: 14px 0 0; padding: 18px 20px; overflow: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-deep); font-size: 0.82rem; line-height: 1.6; }
pre code, code { font-family: "Cascadia Code", "SF Mono", Consolas, ui-monospace, monospace; }
:not(pre) > code { font-size: 0.86em; padding: 0.12em 0.4em; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.iso-start > div h3 { margin-bottom: 6px; }
.iso-options td { vertical-align: top; }
.iso-options td:first-child { white-space: nowrap; }
.iso-options td:nth-child(2) { white-space: nowrap; color: var(--muted); }
.iso-mini { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.iso-mini-field { position: absolute; inset: 0; }
.iso-mini-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; pointer-events: none; background: radial-gradient(closest-side at 50% 50%, color-mix(in srgb, var(--bg-deep) 82%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 55%, transparent) 45%, transparent 100%); }
.iso-mini-card img { width: 150px; height: auto; }
.iso-mini-phase { font-size: 0.86rem; color: var(--muted); }
.iso-mini figcaption, .iso-mini > figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 18px; font-size: 0.78rem; color: var(--soft); }
.iso-spinner { width: 26px; height: 26px; border-radius: 50%; border: 1.7px solid var(--border-strong); border-top-color: var(--text); animation: iso-spin 1.1s linear infinite; }
@keyframes iso-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .iso-spinner { animation: none; } }
.iso-mini-card .on-dark { display: var(--wordmark-light); }
.iso-mini-card .on-light { display: var(--wordmark-dark); }
.iso-start > div, .iso-lab > *, .iso-code { min-width: 0; }
.card .icon img.mark { width: 26px; height: auto; display: block; }
.iso-download { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .iso-download p { max-width: 56ch; font-size: 0.9rem; }

/* ================================================================== program skin
   The website wears Lumadex's own design tokens (Lumadex.Desktop.Core ThemeTokens): the same page, panel, surface,
   border and text colours, Segoe UI, 6 px controls and 10 px cards, so the site, the wiki and the program read as
   one system. The only colour is the light: the Lumadex spectrum, used for highlights that move. */
:root {
  --bg: #101010; --bg-deep: #161616; --surface: #161616; --surface-2: #202020; --surface-3: #2a2a2a;
  --glass: rgba(16, 16, 16, 0.78); --text: #f5f5f5; --muted: #b6b6b6; --soft: #969696;
  --border: #2b2b2b; --border-strong: #3d3d3d; --primary: #f5f5f5; --on-primary: #111111; --focus: #f5f5f5;
  --selection: #333333; --pass: #67d5a0; --over: #ff9098; --tolerance: #ffe066; --gold: #e8b84b;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --font: "Segoe UI Variable Text", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  --spectrum-loop: linear-gradient(90deg, #1d2bff, #8e2a8e, #149b48, #f7d730, #f26a22, #ff2020, #1d2bff);
}
:root[data-theme="light"] {
  --bg: #ffffff; --bg-deep: #fafafa; --surface: #ffffff; --surface-2: #f2f2f2; --surface-3: #e5e5e5;
  --glass: rgba(255, 255, 255, 0.82); --text: #111111; --muted: #555555; --soft: #737373;
  --border: #e3e3e3; --border-strong: #d4d4d4; --primary: #111111; --on-primary: #ffffff; --focus: #111111;
  --selection: #e5e5e5; --pass: #167047; --over: #b22731; --tolerance: #806800; --gold: #a67516;
}
body { font-family: var(--font); font-feature-settings: normal; }
h1, h2, h3, h4, .brand-type { font-family: var(--font-display); }
h1 { font-weight: 700; letter-spacing: -0.035em; }
h2 { font-weight: 700; letter-spacing: -0.03em; }
::selection { background: var(--selection); color: var(--text); }

/* Controls: the program's buttons, fields and chips. */
.button { height: 42px; padding: 0 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.93rem; }
.button.small { height: 34px; border-radius: var(--radius-sm); }
.button.secondary { background: var(--surface-2); border-color: var(--border-strong); }
.button.ghost { border-color: var(--border-strong); }
.button.primary { box-shadow: none; }
.button.primary:hover { box-shadow: 0 0 0 1px var(--primary), 0 10px 30px rgba(0, 0, 0, 0.25); transform: translateY(-1px); }
.icon-button { border-radius: var(--radius-sm); border-color: var(--border-strong); }
.nav a { border-radius: var(--radius-sm); }
.card, .plan, .table-wrap, .iso-panel, .iso-code, .iso-stage-wrap, .cta, .site, .shot, .flow-panel .shot { border-radius: var(--radius); }
.field input, .field select, .field textarea { border-radius: var(--radius-sm); background: var(--bg); border-color: var(--border-strong); }

/* ------------------------------------------------------------------ the spectrum, moving */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spectrum-spin { to { --spin: 360deg; } }
@keyframes spectrum-slide { to { background-position: 200% 0; } }
@keyframes spectrum-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Reading progress: a thin spectrum line under the header. */
.progress-line { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--read, 0)); background: var(--spectrum-loop); background-size: 200% 100%; animation: spectrum-slide 6s linear infinite; pointer-events: none; }

/* Navigation: the current page and hover carry a short spectrum underline. */
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--spectrum-loop); background-size: 200% 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); animation: spectrum-slide 4s linear infinite; }

/* Eyebrows draw their spectrum line in when revealed. */
.eyebrow::before { background: var(--spectrum-loop); background-size: 200% 100%; animation: spectrum-slide 5s linear infinite; }
.reveal .eyebrow::before, .eyebrow.reveal::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease) 0.15s; }
.reveal.in .eyebrow::before, .eyebrow.reveal.in::before { transform: scaleX(1); }

/* Words of light: a slow spectrum sweep through emphasised headline words. */
.lit { background: linear-gradient(90deg, currentColor 0%, currentColor 30%, #f7d730 42%, #f26a22 48%, #ff2020 52%, #8e2a8e 58%, #1d2bff 64%, currentColor 76%, currentColor 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: lit-sweep 7s cubic-bezier(0.45, 0, 0.2, 1) 0.8s infinite; }
@keyframes lit-sweep { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }

/* Cards: a spectrum edge travels around the card while it is hovered. */
.glow { position: relative; isolation: isolate; }
.glow::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--spin), transparent 0deg, #1d2bff 40deg, #149b48 80deg, #f7d730 120deg, #ff2020 160deg, transparent 200deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.35s; pointer-events: none; z-index: 1; }
.glow:hover::after, .glow:focus-within::after { opacity: 1; animation: spectrum-spin 3.2s linear infinite; }
/* The recommended plan always carries it. */
.plan.featured { border-color: var(--border-strong); background: var(--surface); }
.plan.featured::after { opacity: 0.9; animation: spectrum-spin 6s linear infinite; }
.cta { border-color: var(--border-strong); }
.cta::before { background: var(--spectrum-loop) !important; background-size: 200% 100% !important; animation: spectrum-slide 8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .progress-line, .nav a::after, .eyebrow::before, .lit, .glow::after, .cta::before { animation: none !important; }
  .lit { -webkit-text-fill-color: currentColor; background: none; }
}

/* ------------------------------------------------------------------ pricing */
.billing { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0 auto 36px; padding: 4px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); left: 50%; transform: translateX(-50%); }
.billing button { position: relative; z-index: 1; font: inherit; font-weight: 600; font-size: 0.93rem; padding: 9px 26px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; transition: color 0.3s; }
.billing button[aria-checked="true"] { color: var(--on-primary); }
.billing-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 6px; background: var(--primary); transition: transform 0.45s var(--ease); }
.billing[data-term="perpetual"] .billing-pill { transform: translateX(100%); }
.plan { position: relative; }
.plan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan .badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: var(--on-primary); background: var(--primary); }
.plan .price { display: grid; gap: 4px; font-size: 2.6rem; }
.plan .price small { margin-left: 0; }
.price-note { font-size: 0.88rem; color: var(--text); min-height: 2.6em; }
.swap { animation: price-swap 0.45s var(--ease); }
@keyframes price-swap { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.price-table th[scope="row"] { display: grid; gap: 2px; font-weight: 600; }
.price-table .mod-scope { font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.price-table td.num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.price-table tbody tr:last-child { background: var(--surface-2); }
.timeline { display: grid; gap: 0; padding: 26px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tl-row { display: grid; grid-template-columns: 22px 1fr; gap: 14px; position: relative; padding: 14px 0; }
.tl-row div { display: grid; gap: 2px; } .tl-row span:not(.tl-dot) { color: var(--muted); font-size: 0.93rem; }
.tl-dot { width: 12px; height: 12px; margin: 6px 0 0 5px; border-radius: 50%; background: var(--border-strong); position: relative; z-index: 1; }
.tl-row:not(:last-child)::before { content: ""; position: absolute; left: 10.5px; top: 30px; bottom: -8px; width: 1px; background: var(--border-strong); }
.lit-row .tl-dot { background: conic-gradient(#1d2bff, #149b48, #f7d730, #ff2020, #1d2bff); box-shadow: 0 0 18px rgba(247, 215, 48, 0.45); }
.wrap.narrow { max-width: 860px; }
.faq { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--muted); transition: transform 0.3s var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); padding: 0 0 22px; max-width: 70ch; }

/* ------------------------------------------------------------------ features sub navigation */
.subnav-wrap { position: sticky; top: var(--header); z-index: 40; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-block: 1px solid var(--border); }
.subnav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; font-size: 0.86rem; font-weight: 600; color: var(--muted); padding: 7px 12px; border-radius: 6px; transition: color 0.2s, background 0.2s; }
.subnav a:hover { color: var(--text); background: var(--surface-2); }
.subnav a.active { color: var(--on-primary); background: var(--primary); }

/* ------------------------------------------------------------------ wiki */
.wiki-search { position: relative; max-width: 640px; margin-top: 28px; }
.wiki-search input { width: 100%; font: inherit; font-size: 1.02rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 14px 16px 14px 46px; }
.wiki-search input:focus { outline: none; border-color: var(--text); }
.wiki-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); }
.wiki-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; display: none; max-height: 420px; overflow: auto; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-lg); }
.wiki-results.open { display: block; }
.wiki-results a { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.wiki-results a:hover, .wiki-results a.active { background: var(--surface-2); }
.wiki-results b { font-weight: 600; } .wiki-results span { font-size: 0.85rem; color: var(--muted); }
.download { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 24px 26px; }
@media (max-width: 760px) { .download { grid-template-columns: 1fr; } }
.download .icon { width: 52px; height: 52px; }
.download h3 { margin-bottom: 4px; }
.download .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
.downloads { display: grid; gap: 14px; }
.spec-table td:first-child { color: var(--muted); width: 34%; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-link { font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.pill-link:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.wiki-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wiki-group li a { display: block; padding: 7px 0; color: var(--text); font-size: 0.93rem; border-bottom: 1px solid var(--border); transition: color 0.2s, padding 0.25s var(--ease); }
.wiki-group li:last-child a { border-bottom: 0; }
.wiki-group li a:hover { color: var(--text); padding-left: 6px; }
.wiki-group li a.muted { color: var(--muted); }
.wiki-results .group { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.wiki-results mark { background: none; color: var(--text); font-weight: 700; }
.wiki-results .none { padding: 14px 16px; color: var(--muted); font-size: 0.92rem; }
.download .button-row, .download > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }
.split.top { align-items: start; }

/* Module grid (Features): one card per module, image, scope and one line. */
.modules-grid { align-items: stretch; }
.module-card .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.module-card .meta .ref { font-size: 0.78rem; color: var(--soft); letter-spacing: 0.01em; }
.module-card .pill.base { background: transparent; }
.module-card h3 { font-size: 1.12rem; margin-top: 2px; }
.module-card p { font-size: 0.93rem; line-height: 1.55; }
.module-card { scroll-margin-top: 120px; }
.h-small { font-size: 1.02rem; font-weight: 650; margin-bottom: 6px; }


/* ---------------------------------------------------------------- scroll linked motion (motion.js)
   --in rises 0 to 1 as an element comes into place, --out 0 to 1 as it leaves the top of the view, --par runs
   -1 to 1 as a screenshot crosses the view and --hero 0 to 1 as the home hero scrolls away. All of it is driven
   by the scroll position, so it plays in reverse when the reader scrolls back up. */
html.motion .reveal { --in: 0; --out: 0; opacity: calc(var(--in) * (1 - var(--out) * 0.55)); transform: translate3d(0, calc((1 - var(--in)) * 56px - var(--out) * 26px), 0); will-change: opacity, transform; }
html.motion .section-head.reveal h2, html.motion .split > .reveal > h2 { transform: translate3d(0, calc((1 - var(--in)) * 22px), 0); }
html.motion .section-head.reveal .lead, html.motion .split > .reveal > .lead { opacity: clamp(0, calc(var(--in) * 1.6 - 0.6), 1); transform: translate3d(0, calc((1 - var(--in)) * 34px), 0); }
html.motion .split > .reveal > .checks li { opacity: clamp(0, calc(var(--in) * 2 - 1), 1); }
/* Screenshots grow into their frame and settle; the image drifts inside it. */
html.motion .shot.reveal, html.motion .reveal > .shot { transform-origin: 50% 0; }
html.motion .shot.reveal { opacity: calc(0.1 + var(--in) * 0.9 - var(--out) * 0.4); transform: translate3d(0, calc((1 - var(--in)) * 80px - var(--out) * 34px), 0) scale(calc(0.9 + var(--in) * 0.1 - var(--out) * 0.035)); }
html.motion .split > .reveal > .shot { transform: scale(calc(0.92 + var(--in) * 0.08)); transform-origin: 50% 30%; }
html.motion .shot > img, html.motion .shot > picture img, html.motion .frame > img, html.motion .frame > picture img { transform: translate3d(0, calc(var(--par, 0) * -16px), 0) scale(1.045); transition: none; }
html.motion .card.media .thumb img { transform: scale(calc(1.08 - var(--in, 1) * 0.08)); transition: transform 0.8s var(--ease); }
html.motion .card.media:hover .thumb img { transform: scale(1.035); }
/* Home hero: the words lift away and the night view rises to meet the next section. */
html.motion .hero { --hero: 0; }
html.motion .hero-grid > div:first-child { opacity: calc(1 - var(--hero) * 1.15); transform: translate3d(0, calc(var(--hero) * -64px), 0) scale(calc(1 - var(--hero) * 0.04)); transform-origin: 0 50%; }
html.motion .hero-visual { transform: translate3d(0, calc(var(--hero) * -36px), 0) scale(calc(1 + var(--hero) * 0.05)); transform-origin: 50% 40%; }
html.motion .hero-visual .float-card.a { transform: translate3d(0, calc(var(--hero) * -70px), 0); }
html.motion .hero-visual .float-card.b { transform: translate3d(0, calc(var(--hero) * -110px), 0); }
html.motion .hero-canvas { opacity: calc(1 - var(--hero) * 0.7); }
/* Hero entrance on load. */
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
html.motion .hero-grid > div:first-child > * { animation: rise-in 1.1s var(--ease) both; }
html.motion .hero-grid > div:first-child > *:nth-child(2) { animation-delay: 0.08s; }
html.motion .hero-grid > div:first-child > *:nth-child(3) { animation-delay: 0.16s; }
html.motion .hero-grid > div:first-child > *:nth-child(4) { animation-delay: 0.24s; }
html.motion .hero-grid > div:first-child > *:nth-child(5) { animation-delay: 0.32s; }
@keyframes frame-in { from { opacity: 0; transform: translate3d(0, 40px, 0) scale(0.96); } to { opacity: 1; transform: none; } }
html.motion .hero-visual .frame { animation: frame-in 1.3s var(--ease) 0.2s both; }
html.motion .hero-visual .float-card { animation: rise-in 1.1s var(--ease) 0.7s both; }
@media (prefers-reduced-motion: reduce) { html.motion .reveal, html.motion .hero * { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- theme switch: a slow cross fade */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.85s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); mix-blend-mode: normal; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 0.85s cubic-bezier(0.4, 0, 0.2, 1), color 0.85s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.85s cubic-bezier(0.4, 0, 0.2, 1), fill 0.85s, stroke 0.85s, box-shadow 0.85s !important; }

/* Pinned workflow: the five steps stay centred while the reader scrolls through them (motion.js). */
@media (min-width: 981px) {
  html.motion .flow-track { height: calc(var(--steps) * 62vh + 40vh); position: relative; }
  html.motion .flow.pinned { position: sticky; top: max(calc(var(--header) + 24px), calc(50vh - 280px)); }
  html.motion .flow.pinned .flow-steps::after { content: ""; display: block; height: 2px; margin: 18px 20px 0; border-radius: 2px; background: linear-gradient(90deg, var(--text) calc(var(--flow, 0) * 100%), var(--border) 0); opacity: 0.6; }
}
.flow-panel .shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }

/* GST notes on prices */
.price-table .col-note{display:block;font-weight:400;font-size:.72rem;letter-spacing:.02em;color:var(--muted);text-transform:none}
.table-note{margin-top:.75rem;font-size:.85rem;color:var(--muted)}

/* ================================================================== 0.7.0 home: cinematic hero, release, bento, family */
/* The hero sits on the calculated night itself, so it keeps the dark palette in both themes. */
.hero.cine { position: relative; padding: clamp(96px, 13vw, 168px) 0 0; min-height: min(100vh, 940px); display: flex; flex-direction: column; justify-content: space-between;
  --text: #f4f4f5; --muted: #c4c4cc; --soft: #9a9aa4; --border: rgba(255,255,255,.1); --border-strong: rgba(255,255,255,.2); --glass: rgba(14,14,18,.62); --primary: #f4f4f5; --on-primary: #0a0a0b; color: var(--text); background: #050506; }
.cine-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.cine-media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; transform: scale(1.04); filter: saturate(1.08) contrast(1.04); }
html.motion .cine-media img { transform: scale(calc(1.04 + var(--hero, 0) * 0.06)) translate3d(0, calc(var(--hero, 0) * 40px), 0); }
.cine-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.82) 34%, rgba(5,5,6,.28) 66%, rgba(5,5,6,.18) 100%), linear-gradient(180deg, rgba(5,5,6,.55) 0, transparent 22%, transparent 62%, var(--bg) 100%); }
:root[data-theme="light"] .cine-shade { background: linear-gradient(90deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.82) 34%, rgba(5,5,6,.28) 66%, rgba(5,5,6,.18) 100%), linear-gradient(180deg, rgba(5,5,6,.55) 0, transparent 22%, transparent 70%, rgba(5,5,6,.9) 100%); }
.hero.cine .hero-canvas { z-index: -2; opacity: .5; mix-blend-mode: screen; }
.hero.cine::after { display: none; }
.cine-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cine-copy h1 { margin: 26px 0 24px; text-shadow: 0 2px 40px rgba(0,0,0,.4); }
.cine-copy .lead { color: #d0d0d7; margin-bottom: 34px; }
.cine-cards { position: relative; height: 420px; }
.cine-cards .float-card.a { left: 8%; bottom: 10px; }
.cine-cards .float-card.b { right: 0; top: 30px; }
.release-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #e9e9ee; font-size: .86rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .2s, border-color .2s; }
.release-pill:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
.release-pill b { padding: 3px 10px; border-radius: 999px; background: #f4f4f5; color: #0a0a0b; font-size: .76rem; font-weight: 700; letter-spacing: .01em; }
.release-pill span:not(.spark) { color: #c9c9d1; }
.release-pill svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.release-pill:hover svg { transform: translateX(3px); }
.release-pill .spark { width: 8px; height: 8px; border-radius: 50%; background: var(--spectrum); box-shadow: 0 0 12px rgba(247,215,48,.7); margin-left: 6px; }
.button.glass { background: rgba(255,255,255,.08); color: #f4f4f5; border-color: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.button.glass:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
.hero-meta svg { width: 14px; height: 14px; }
.hero.cine .hero-meta span::before { background: rgba(255,255,255,.4); }
.hero.cine .hero-meta span:first-child::before { display: none; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(56px, 8vw, 96px) 0 0; border-top: 1px solid rgba(255,255,255,.12); }
.stat { padding: 26px 22px 34px 0; display: grid; gap: 2px; }
.stat + .stat { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.08); }
.stat strong { font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -.04em; line-height: 1.05; font-weight: 720; background: linear-gradient(180deg, #fff, #bfbfc8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { font-weight: 620; color: #ececf0; font-size: .95rem; margin-top: 6px; }
.stat small { color: #9a9aa4; font-size: .82rem; }
@media (max-width: 980px) { .cine-grid { grid-template-columns: 1fr; } .cine-cards { display: none; } .hero.cine { min-height: 0; } }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-left: 0; padding-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); } }
@media (max-width: 640px) { .release-pill span:not(.spark) { display: none; } .hide-narrow { display: none; } }

.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bento-tile { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .25s, transform .35s var(--ease), box-shadow .35s; }
.bento-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); z-index: 2; }
.bento-tile:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bento-tile.wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: none; }
.bento-media { overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.bento-tile.wide .bento-media { aspect-ratio: auto; min-height: 420px; }
.bento-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bento-tile:hover .bento-media img { transform: scale(1.035); }
.bento-body { padding: 26px 28px 30px; display: grid; align-content: start; gap: 12px; }
.bento-tile.wide .bento-body { align-content: center; padding: 40px; }
.bento-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bento-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
:root:not([data-theme="light"]) .bento-icon { color: color-mix(in srgb, var(--accent) 60%, white); }
.bento-icon svg { width: 16px; height: 16px; }
.bento-body h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -.03em; }
.bento-body ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 9px; color: var(--muted); font-size: .95rem; }
.bento-body li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; }
.bento-body li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .bento-tile.wide { grid-template-columns: 1fr; } .bento-tile.wide .bento-media { min-height: 0; aspect-ratio: 16 / 10; } .bento-tile.wide .bento-body { padding: 26px 28px 30px; } }

.family { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.family-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); transition: border-color .25s, transform .35s var(--ease), box-shadow .35s; }
.family-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.family-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: #000; border-bottom: 1px solid var(--border); }
.family-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .8s var(--ease); }
.family-card:hover .family-thumb img { transform: scale(1.05); }
.family-body { padding: 20px 20px 22px; display: grid; align-content: start; gap: 8px; }
.family-body .icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); margin-bottom: 4px; }
.family-body .icon svg, .family-body .icon img { width: 18px; height: 18px; }
.family-body h3 { font-size: 1.08rem; }
.family-body p { color: var(--muted); font-size: .92rem; margin: 0 0 6px; }
@media (max-width: 1080px) { .family { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .family { grid-template-columns: 1fr; } }

.workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .62fr); grid-template-rows: auto auto; gap: 18px; align-items: start; }
.ws-main { grid-row: 1; grid-column: 1; margin: 0; }
.ws-side { grid-row: 1; grid-column: 2; margin: 0; }
.ws-side img { border-radius: 14px; }
.ws-points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.ws-points > div { padding: 22px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.ws-points h3 { font-size: 1.02rem; margin: 12px 0 6px; }
.ws-points p { margin: 0; color: var(--muted); font-size: .92rem; }
.ws-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); }
.ws-icon svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .workspace { grid-template-columns: 1fr; } .ws-side { grid-column: 1; grid-row: auto; max-width: 360px; } .ws-points { grid-template-columns: 1fr; } }

.download-band .split { align-items: center; }
.setup-stack { position: relative; aspect-ratio: 1.25; }
.setup-stack img { position: absolute; width: 78%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); transition: transform .6s var(--ease); }
.setup-back { left: 0; top: 0; opacity: .72; transform: scale(.94); transform-origin: 0 0; }
.setup-front { right: 0; bottom: 0; }
.setup-stack:hover .setup-front { transform: translate(-6px, -6px); }
.h-mid { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.mt-4 { margin-top: clamp(56px, 7vw, 88px); }

/* ================================================================== download page */
.download-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: clamp(26px, 4vw, 44px); border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: radial-gradient(120% 140% at 100% 0%, rgba(29,43,255,.10), transparent 52%), radial-gradient(90% 120% at 0% 100%, rgba(242,106,34,.08), transparent 55%), var(--surface); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.download-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--spectrum); }
.dl-title { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.dl-title img { width: 64px; height: 64px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.dl-title .eyebrow { margin-bottom: 6px; }
.dl-title h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.dl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 26px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.dl-facts > div { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.dl-facts > div:nth-child(odd) { border-right: 1px solid var(--border); }
.dl-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.dl-facts dt { font-size: .74rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.dl-facts dd { margin: 4px 0 0; font-weight: 600; }
.dl-note { margin: 18px 0 0; font-size: .9rem; max-width: 52ch; }
.dl-shot img { width: 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.4)); }
@media (max-width: 920px) { .download-card { grid-template-columns: 1fr; } }
.setup-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.setup-gallery figure { margin: 0; }
.setup-gallery img { width: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.setup-gallery figcaption { text-align: center; color: var(--soft); font-size: .85rem; margin-top: 4px; }
@media (max-width: 800px) { .setup-gallery { grid-template-columns: 1fr; } }
.req-table th { width: 30%; text-align: left; font-weight: 620; vertical-align: top; }
.req-table td { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .strip-item:nth-child(n+11) { display: none; } .strip-track { justify-content: center; gap: 6px 0; } }

/* ------------------------------------------------------------------ release history (filled by Lumadex.Api) */
.releases { display: grid; gap: 18px; max-width: 980px; margin-inline: auto; }
.release { gap: 16px; }
.release.latest::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--spectrum); }
.release-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.release-head h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.release-meta { display: flex; align-items: center; gap: 12px; }
.release-meta time { font-size: 0.82rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.release > p { color: var(--muted); }
.release-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 28px; padding-top: 6px; border-top: 1px solid var(--border); }
.release-cols h4 { margin: 14px 0 12px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); font-weight: 650; }
.release-cols .checks { margin-bottom: 4px; gap: 9px; }
.release-cols .checks li { font-size: 0.93rem; }
.release .button-row { gap: 22px; }
.pill-link[aria-current="page"] { color: var(--text); border-color: var(--text); }

/* pricing: the plan scope and the Best value badge sit on one tidy line */
.plan-head { align-items: flex-start; }
.plan-head .tag { font-size: 0.9rem; line-height: 1.45; color: var(--muted); min-width: 0; }
.plan .badge { flex: none; white-space: nowrap; line-height: 1; padding: 7px 11px 6px; margin-top: 1px; }

/* ── pricing: one table for every product and licence mode ─────────────────────────────── */
.price-wrap { overflow-x: auto; }
.price-table { table-layout: fixed; min-width: 760px; }
.price-table col.c-product { width: 34%; }
.price-table col.c-price { width: 15%; }
.price-table col.c-upgrade { width: 21%; }
.price-table th, .price-table td { padding: 14px 22px; vertical-align: middle; }
.price-table thead th { background: var(--surface-2); border-bottom: 1px solid var(--border-strong); vertical-align: bottom; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.price-table thead .col-note { display: block; margin-top: 3px; font-size: 0.75rem; font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--soft); }
.price-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.price-table td.num { font-weight: 600; font-size: 1rem; white-space: nowrap; }
.price-table th[scope="row"] { display: table-cell; font-weight: 600; }
.price-table .mod-name, .price-table .mod-scope { display: block; }
.price-table .mod-scope { margin-top: 2px; font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.price-table tr.group th { padding: 20px 22px 8px; background: none; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); border-bottom: 1px solid var(--border); }
.price-table tbody tr:last-child { background: none; }
.price-table tbody tr:not(.group) { transition: background 0.2s; }
.price-table tbody tr:not(.group):hover { background: var(--surface-2); }
.price-table tbody:last-child tr:last-child td, .price-table tbody:last-child tr:last-child th { border-bottom: 0; }
.price-table tr.row-complete th[scope="row"] { box-shadow: inset 2px 0 0 #8e2a8e; }
.price-table td.muted-cell { font-weight: 500; font-size: 0.88rem; color: var(--muted); }
.price-table thead th:first-child, .price-table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.price-table thead th:first-child { background: var(--surface-2); }
.price-table tbody tr:not(.group):hover th[scope="row"] { background: var(--surface-2); }
.table-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px 32px; margin-top: 14px; font-size: 0.85rem; color: var(--muted); }
.table-foot p { margin: 0; }

/* licence modes: the price of each mode, following the term switch */
.modes .card { display: flex; flex-direction: column; gap: 10px; }
.modes h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mode-tag { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); line-height: 1; }
.mode-price { display: grid; gap: 2px; margin: 0; }
.mode-price span { font-size: 1.75rem; font-weight: 720; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mode-price small { font-size: 0.8rem; color: var(--muted); }

/* perpetual timeline: bought in full colour, fading while it simply runs, full colour again at the upgrade */
ol.timeline { list-style: none; margin: 0; }
.timeline .tl-dot { background: conic-gradient(#1d2bff, #8e2a8e, #149b48, #f7d730, #f26a22, #ff2020, #1d2bff); transition: opacity 0.4s; }
.tl-on .tl-dot { opacity: 1; box-shadow: 0 0 12px rgba(142, 42, 142, 0.45); }
.tl-dim .tl-dot { opacity: 0.45; box-shadow: none; }
.tl-dimmer .tl-dot { opacity: 0.18; box-shadow: none; }
.tl-last .tl-dot { width: 14px; height: 14px; margin: 5px 0 0 4px; box-shadow: 0 0 20px rgba(247, 215, 48, 0.5); }
.tl-dimmer b { color: var(--muted); }
.timeline .tl-row:not(:last-child)::before { background: var(--border-strong); }
.timeline .tl-on:not(:last-child)::before { background: linear-gradient(rgba(142, 42, 142, 0.8), var(--border-strong)); }
.timeline .tl-dimmer::before { background: linear-gradient(var(--border), rgba(29, 43, 255, 0.85)) !important; }
.price-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 0.97rem; color: var(--text); }
.price-table tbody th, .price-table tbody td { border-bottom: 1px solid var(--border); }
.price-table tbody:last-child tr:last-child th, .price-table tbody:last-child tr:last-child td { border-bottom: 0; }
.price-table td.upgrade { font-weight: 550; font-size: 0.92rem; color: var(--muted); }
html[data-term="perpetual"] .price-table td.upgrade:not(.muted-cell) { color: var(--text); font-weight: 650; }
.modes .mode-price span { color: var(--text); }

/* Pricing plan cards: price, the term in a quiet panel, then the included points. */
.plan { gap: 0; }
.plan-head { margin-bottom: 14px; }
.plan h3 { margin: 0 0 18px; font-size: 1.35rem; letter-spacing: -0.02em; }
.plan .price { margin-bottom: 20px; }
.plan-term { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); min-height: 4.6em; }
.plan-term::before { content: ""; width: 16px; height: 16px; margin-top: 2px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan-term p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text); }
.plan-body { border-top: 1px solid var(--border); margin-top: 22px; padding-top: 20px; margin-bottom: 26px; }
.plan-includes { margin: 0 0 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.plan ul.plan-list { gap: 12px; font-size: 0.94rem; line-height: 1.45; color: var(--text); }
.plan ul.plan-list li { color: color-mix(in srgb, var(--text) 82%, var(--muted)); }
.plan ul.plan-list li::before { margin-top: 2px; opacity: 1; background: var(--text); }
.plan.featured ul.plan-list li::before { background: var(--primary); }

/* About: Galaxy Pixel Studios in its own colours (aqua, gold and purple). */
.page-gps { --gps-aqua: #009d94; --gps-aqua-hi: #28c5bb; --gps-aqua-ink: #63d6cf; --gps-gold: #ffab0a; --gps-gold-hi: #ffc247; --gps-purple: #351755; --gps-purple-hi: #63318b; --gps-purple-ink: #b998d4; --gps-panel: #17191c; }
html[data-theme="light"] .page-gps { --gps-aqua-ink: #007a73; --gps-purple-ink: #5a2d84; --gps-gold-hi: #b87800; --gps-panel: #ffffff; }
.page-gps main { background: radial-gradient(900px 480px at 85% -10%, rgba(0, 157, 148, 0.14), transparent 60%), radial-gradient(700px 420px at -10% 30%, rgba(53, 23, 85, 0.32), transparent 60%), radial-gradient(600px 360px at 60% 110%, rgba(255, 171, 10, 0.08), transparent 60%); }
html[data-theme="light"] .page-gps main { background: radial-gradient(900px 480px at 85% -10%, rgba(0, 157, 148, 0.10), transparent 60%), radial-gradient(700px 420px at -10% 30%, rgba(99, 49, 139, 0.10), transparent 60%); }
.gps-hero { padding: clamp(120px, 14vw, 170px) 0 clamp(56px, 8vw, 96px); }
.gps-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 920px) { .gps-hero-grid { grid-template-columns: 1fr; } }
.gps-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gps-aqua-ink); margin-bottom: 14px; }
.gps-intro h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.045em; margin: 0 0 22px; }
.gps-lead { font-size: clamp(1.12rem, 1.8vw, 1.38rem); line-height: 1.55; color: var(--text); opacity: 0.86; max-width: 36em; margin: 0; }
.gps-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.gps-button { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: 12px; font-weight: 650; font-size: 0.97rem; text-decoration: none; border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.gps-button svg { width: 16px; height: 16px; }
.gps-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.gps-button.gps-aqua { color: #fff; background: linear-gradient(135deg, #008e86, #00b5aa); border-color: rgba(101, 215, 208, 0.6); box-shadow: 0 12px 28px rgba(0, 157, 148, 0.22); }
.gps-button.gps-purple { color: #fff; background: linear-gradient(135deg, #351755, #512675); border-color: rgba(117, 78, 151, 0.72); box-shadow: 0 12px 28px rgba(53, 23, 85, 0.32); }
.gps-button.gps-gold { color: #17100a; background: linear-gradient(135deg, #e99700, #ffb629); border-color: rgba(255, 202, 100, 0.65); box-shadow: 0 12px 28px rgba(255, 171, 10, 0.2); }
.gps-facts { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 34px); border-radius: 20px; border: 1px solid var(--border); background: var(--gps-panel); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3); }
.gps-facts::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #009d94 0 33.333%, #ffab0a 33.333% 66.666%, #63318b 66.666% 100%); }
.gps-facts-logo img { width: min(100%, 300px); height: auto; display: block; margin-bottom: 18px; }
.gps-facts h2 { font-size: 1.05rem; letter-spacing: 0; margin: 0 0 6px; }
.gps-facts dl { margin: 0; display: grid; }
.gps-facts dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid var(--border); }
.gps-facts dt { font-size: 0.72rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
.gps-facts dl div:nth-child(3n + 1) dt { color: var(--gps-aqua-ink); }
.gps-facts dl div:nth-child(3n + 2) dt { color: var(--gps-gold-hi); }
.gps-facts dl div:nth-child(3n) dt { color: var(--gps-purple-ink); }
.gps-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.gps-facts dd a { color: inherit; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
.gps-section .section-head h2 { letter-spacing: -0.035em; }
.gps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 920px) { .gps-grid { grid-template-columns: 1fr; } }
.gps-card { position: relative; padding: 28px; border-radius: 18px; border: 1px solid var(--border); background: var(--gps-panel); transition: transform .2s ease, border-color .2s ease; }
.gps-card:hover { transform: translateY(-3px); }
.gps-card h3 { font-size: 1.18rem; margin: 18px 0 10px; letter-spacing: -0.02em; }
.gps-card p { color: var(--muted); margin: 0; line-height: 1.6; }
.gps-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; border: 1px solid; }
.gps-icon svg { width: 22px; height: 22px; }
.gps-card.gps-aqua .gps-icon { color: var(--gps-aqua-ink); background: rgba(0, 157, 148, 0.13); border-color: rgba(80, 210, 202, 0.38); }
.gps-card.gps-gold .gps-icon { color: var(--gps-gold-hi); background: rgba(255, 171, 10, 0.12); border-color: rgba(255, 194, 71, 0.4); }
.gps-card.gps-purple .gps-icon { color: var(--gps-purple-ink); background: rgba(99, 49, 139, 0.18); border-color: rgba(155, 119, 187, 0.45); }
.gps-card.gps-aqua:hover { border-color: rgba(80, 210, 202, 0.5); }
.gps-card.gps-gold:hover { border-color: rgba(255, 194, 71, 0.5); }
.gps-card.gps-purple:hover { border-color: rgba(155, 119, 187, 0.55); }
.gps-band { background: color-mix(in srgb, var(--gps-panel) 55%, transparent); border-block: 1px solid var(--border); }
.gps-product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: 18px; border-radius: 22px; border: 1px solid var(--border); background: var(--gps-panel); }
.gps-product + .gps-product { margin-top: 18px; }
.gps-product:nth-of-type(even) .gps-product-media { order: 2; }
@media (max-width: 920px) { .gps-product { grid-template-columns: 1fr; } .gps-product:nth-of-type(even) .gps-product-media { order: 0; } }
.gps-product-media { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #0d0e10; }
.gps-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gps-logo-panel { display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, rgba(255, 171, 10, 0.14), transparent 60%), #111214; }
html[data-theme="light"] .gps-logo-panel { background: radial-gradient(circle at 30% 30%, rgba(255, 171, 10, 0.16), transparent 60%), #f3f3f1; }
.gps-logo-panel img.gps-product-logo { width: min(70%, 360px); height: auto; object-fit: contain; }
.gps-product-copy { padding: 12px clamp(4px, 2vw, 24px) 12px 0; }
.gps-product-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.035em; margin: 14px 0 12px; }
.gps-product-copy p { color: var(--muted); line-height: 1.65; margin: 0 0 20px; }
.gps-tag { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid; }
.gps-tag.gps-aqua { color: var(--gps-aqua-ink); border-color: rgba(80, 210, 202, 0.4); background: rgba(0, 157, 148, 0.1); }
.gps-tag.gps-gold { color: var(--gps-gold-hi); border-color: rgba(255, 194, 71, 0.42); background: rgba(255, 171, 10, 0.1); }
.gps-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--text) 30%, transparent); padding-bottom: 2px; }
.gps-link svg { width: 16px; height: 16px; transition: transform .18s ease; }
.gps-link:hover svg { transform: translateX(3px); }
.page-gps .checks li::before { border-color: rgba(80, 210, 202, 0.4); background-color: rgba(0, 157, 148, 0.12); }
.page-gps #contact .eyebrow { color: var(--gps-aqua-ink); }
.page-gps .on-dark { display: var(--wordmark-light); }
.page-gps .on-light { display: var(--wordmark-dark); }

/* Standards strip: linked items and the module preview card. */
a.strip-item { text-decoration: none; padding: 6px 10px; margin: -6px -10px; border-radius: 10px; transition: background-color .18s ease, color .18s ease; }
a.strip-item:hover, a.strip-item.tip-on, a.strip-item:focus-visible { background: var(--surface-2); color: var(--text); }
a.strip-item:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.strip.paused .strip-track { animation-play-state: paused; }
.strip-tip { position: fixed; left: 0; top: 0; z-index: 60; width: 340px; max-width: calc(100vw - 24px); border-radius: 16px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.03) inset; overflow: visible; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; --arrow: 50%; }
.strip-tip.on { opacity: 1; visibility: visible; transition: opacity .16s ease; }
.strip-tip::after { content: ""; position: absolute; left: calc(var(--arrow) - 7px); bottom: -7px; width: 14px; height: 14px; background: var(--surface); border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); transform: rotate(45deg); }
.strip-tip.below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.strip-tip .tip-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px 15px 0 0; background: var(--bg-deep); }
.strip-tip .tip-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip-tip .tip-body { padding: 16px 18px 18px; }
.strip-tip .tip-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.strip-tip .tip-kind, .strip-tip .tip-ref { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); line-height: 1; }
.strip-tip .tip-kind { color: var(--text); }
.strip-tip h4 { margin: 0 0 6px; font-size: 1.08rem; letter-spacing: -0.02em; }
.strip-tip p { margin: 0 0 10px; font-size: 0.86rem; line-height: 1.5; color: var(--muted); white-space: normal; }
.strip-tip ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.strip-tip li { position: relative; padding-left: 16px; font-size: 0.84rem; line-height: 1.4; color: var(--text); white-space: normal; }
.strip-tip li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 6px; height: 6px; border-radius: 2px; background: var(--spectrum, var(--text)); }
.strip-tip .tip-more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 650; color: var(--text); }
.strip-tip .tip-more svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .strip-tip { transition: none; } }
.plan-head { min-height: 2.9em; }
.plan-term { min-height: 5.2em; align-content: center; }
.plan-head { min-height: 1.7em; }
.plan-term { min-height: 92px; }
.modes .card { display: flex; flex-direction: column; gap: 14px; }
.modes .card h3 { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.modes .mode-price { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
ul.mode-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; font-size: 0.94rem; line-height: 1.45; }
ul.mode-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: color-mix(in srgb, var(--text) 82%, var(--muted)); }
ul.mode-list li::before { content: ""; width: 16px; height: 16px; margin-top: 2px; background: var(--text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Home hero: cross fading photo mode scenes. */
.cine-media img.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease, transform 8s ease-out; transform: scale(1.08); }
.cine-media img.slide.on { opacity: 1; transform: scale(1.03); }
html.motion .cine-media img.slide.on { transform: scale(calc(1.03 + var(--hero, 0) * 0.06)) translate3d(0, calc(var(--hero, 0) * 40px), 0); }
.slide-card { min-width: 270px; transition: opacity .2s ease, transform .2s ease; }
.slide-card.swap { opacity: .35; transform: translateY(4px); }
.slide-card .slide-title { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; color: #fff; }
.slide-dots { display: flex; gap: 8px; margin-top: 14px; }
.slide-dots .dot { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,.28); cursor: pointer; transition: background .3s ease, width .3s ease; }
.slide-dots .dot.on { width: 36px; background: #fff; }
.slide-dots .dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cine-media img.slide { transition: none; transform: none; } }

/* Pricing v15: Desktop by licence mode in a short table; modules as cards, one price each. */
.mp-head { margin-top: 72px; }
.module-prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.mp-card { --mp-accent: #3b6cff; position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--mp-accent) 10%, transparent), transparent 60%), var(--surface);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.mp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--mp-accent), transparent 75%); opacity: .9; }
.mp-card:hover { border-color: color-mix(in srgb, var(--mp-accent) 45%, var(--border-strong)); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .32), 0 0 0 1px color-mix(in srgb, var(--mp-accent) 18%, transparent); }
.mp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.mp-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--mp-accent);
  background: color-mix(in srgb, var(--mp-accent) 13%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--mp-accent) 32%, var(--border)); }
.mp-icon svg { width: 22px; height: 22px; }
.mp-scope { font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); text-align: right; line-height: 1.35; max-width: 60%; }
.mp-name { margin: 0; font-size: 1.18rem; font-weight: 700; letter-spacing: -.015em; }
.mp-summary { margin: 10px 0 22px; font-size: .9rem; line-height: 1.6; color: var(--muted); flex: 1; }
.mp-foot { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--border); }
.mp-price { display: flex; align-items: baseline; gap: 8px; }
.mp-amount { font-size: 1.85rem; font-weight: 750; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--text); }
.mp-price small { font-size: .8rem; color: var(--muted); }
.mp-alt { font-size: .8rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.mp-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.mp-status svg { width: 15px; height: 15px; }
.mp-status.in { color: color-mix(in srgb, var(--pass) 85%, var(--text)); }
:root[data-theme="light"] .mp-card:hover { box-shadow: 0 22px 44px rgba(20, 20, 30, .1), 0 0 0 1px color-mix(in srgb, var(--mp-accent) 22%, transparent); }
.module-prices + .table-foot { margin-top: 28px; }
/* Home stats: three across. */
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } .stat { border-left: 0 !important; padding-left: 0 !important; } .stat + .stat { border-top: 1px solid rgba(255,255,255,.08); } }

/* ------------------------------------------------------------ documentation hub (wiki/index.html) */
.doc-ask{display:grid;gap:12px;max-width:760px;margin-top:28px}
.doc-ask .wiki-search{margin:0;max-width:none;width:100%}
.doc-luma{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:14px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--spectrum) border-box}
.doc-luma svg{width:20px;height:20px;flex:none}
.doc-luma input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;outline:none;padding:10px 0}
.doc-luma .button{flex:none}
.doc-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.doc-step{height:100%;display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);text-decoration:none;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.doc-step:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.doc-step-n{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:700;font-size:14px;margin-bottom:8px}
.doc-step strong{font-size:16px;line-height:1.35}
.doc-step span:last-child{color:var(--muted);font-size:14px;line-height:1.5}
.doc-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.doc-topic{display:flex;flex-direction:column;padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.doc-topic-head{display:flex;align-items:center;gap:14px;text-decoration:none}
.doc-topic-head strong{display:block;font-size:17px;line-height:1.3}
.doc-topic-head small{color:var(--muted);font-size:13px}
.doc-topic-head:hover strong{text-decoration:underline;text-underline-offset:3px}
.doc-topic-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface-2)}
.doc-topic-icon svg{width:21px;height:21px}
.doc-topic p{margin:14px 0 4px;color:var(--muted);font-size:14px;line-height:1.55}
.doc-topic ul{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--border)}
.doc-topic li a{display:inline-flex;align-items:center;gap:6px;padding:4px 0;font-size:14.5px;text-decoration:none}
.doc-topic li a:hover{text-decoration:underline;text-underline-offset:3px}
.doc-topic .doc-more{color:var(--muted);font-weight:600}
.doc-topic .doc-more svg{width:14px;height:14px}
.doc-news{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.doc-new{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);text-decoration:none;transition:border-color .2s var(--ease)}
.doc-new:hover{border-color:var(--border-strong)}
.doc-new .tag{align-self:flex-start;color:var(--pass);border-color:color-mix(in srgb,var(--pass) 45%,transparent)}
.doc-new strong{font-size:16px}
.doc-new span:last-child{color:var(--muted);font-size:14px}
.doc-resources{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.doc-resource{display:flex;gap:16px;padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);text-decoration:none;transition:border-color .2s var(--ease)}
.doc-resource:hover{border-color:var(--border-strong)}
.doc-resource-text{display:flex;flex-direction:column;gap:6px}
.doc-resource-text strong{font-size:16px}
.doc-resource-text>span:not(.text-link){color:var(--muted);font-size:14px;line-height:1.5}
.doc-resource .text-link{margin-top:auto}
@media (max-width:980px){.doc-path{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.doc-path{grid-template-columns:1fr}.doc-luma{flex-wrap:wrap;padding:10px}.doc-luma .button{width:100%}.doc-topics{grid-template-columns:1fr}}

/* ------------------------------------------------------------ home: the isolux field behind the whole page below the hero */
.page-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -5; pointer-events: none; opacity: 0.55; }
:root[data-theme="light"] .page-field { opacity: 0.7; }
body.home-field .hero.cine { isolation: isolate; background: var(--bg-deep); }
body.home-field .section.band { background: color-mix(in srgb, var(--bg-deep) 62%, transparent); }
body.home-field .card, body.home-field .bento > *, body.home-field .stats { backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: reduce) { .page-field { opacity: 0.35; } }

/* about: the isolux field behind the whole studio page in Galaxy Pixel Studios' colours */
body.page-gps .page-field { opacity: 0.65; }
:root[data-theme="light"] body.page-gps .page-field { opacity: 0.8; }

/* header: the theme and account buttons match the height of the Contact us and Download buttons */
.header-actions .icon-button { width: 34px; height: 34px; }
.header-actions .icon-button svg { width: 16px; height: 16px; }

/* news: the current release's What's new card */
.news-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.news-feature:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.news-feature-image img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.news-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(28px, 4vw, 48px); }
.news-feature-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin: 0; }
.news-feature-body .lead { margin: 0; }
.news-feature-body .button { align-self: flex-start; margin-top: 8px; }
@media (max-width: 900px) { .news-feature { grid-template-columns: 1fr; } .news-feature-image img { min-height: 220px; } }

/* contact: the enquiry form as a modal on every page */
.contact-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: auto; }
.contact-dialog::backdrop { background: rgba(4, 4, 6, 0.66); backdrop-filter: blur(6px); }
.contact-dialog[open] { animation: contact-in .28s var(--ease); }
@keyframes contact-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.contact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px 32px 8px; }
.contact-head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 6px 0 6px; }
.contact-head p { margin: 0; color: var(--muted); }
.contact-close { flex: none; }
.contact-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr); gap: 32px; padding: 16px 32px 32px; }
.contact-body .form { padding: 0; background: none; border: 0; box-shadow: none; }
.contact-aside { padding: 22px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); align-self: start; }
@media (max-width: 760px) { .contact-body { grid-template-columns: 1fr; padding: 12px 20px 24px; } .contact-head { padding: 22px 20px 4px; } }

/* home: the Luma card wears Luma's rotating spectrum outline, as in Lumadex */
@property --luma-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.family-card.luma-card { position: relative; border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--luma-angle), #1d2bff, #8e2a8e, #149b48, #f7d730, #f26a22, #ff2020, #1d2bff) border-box;
  animation: luma-spin 4s linear infinite; }
.family-card.luma-card:hover { border-color: transparent; box-shadow: var(--shadow-lg), 0 0 40px rgba(142, 42, 142, .18); }
@keyframes luma-spin { to { --luma-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .family-card.luma-card { animation: none; } }

/* features: two pictures of a module stacked and offset; either opens full size */
.shot-stack { position: relative; padding-bottom: 26%; margin: 8px 0 12px; }
.shot-stack figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .38); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.shot-stack figure img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.shot-stack figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 8px; font-size: .74rem; line-height: 1.3; color: #f4f4f5; background: rgba(8, 8, 10, .72); backdrop-filter: blur(6px); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.shot-stack figure:hover figcaption { opacity: 1; transform: none; }
.shot-stack .ss-back { position: relative; width: 84%; }
.shot-stack .ss-front { position: absolute; right: 0; bottom: 0; width: 64%; z-index: 1; }
.shot-stack figure:hover { transform: translateY(-4px); z-index: 2; box-shadow: 0 32px 70px rgba(0, 0, 0, .45); }
:root[data-theme="light"] .shot-stack figure { box-shadow: 0 22px 50px rgba(20, 20, 30, .14); }
@media (max-width: 680px) { .shot-stack { padding-bottom: 0; display: grid; gap: 14px; } .shot-stack .ss-back, .shot-stack .ss-front { position: relative; width: 100%; } .shot-stack figcaption { opacity: 1; transform: none; } }

/* about: what the studio builds */
.gps-card { display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 26px; overflow: hidden; }
.gps-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--gps-line, var(--gps-aqua)), transparent 80%); }
.gps-card.gps-aqua { --gps-line: var(--gps-aqua-hi); } .gps-card.gps-gold { --gps-line: var(--gps-gold); } .gps-card.gps-purple { --gps-line: var(--gps-purple-hi); }
.gps-card-head { display: flex; align-items: center; gap: 14px; }
.gps-card-head h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.015em; }
.gps-sub { display: block; margin-top: 2px; font-size: .85rem; color: var(--muted); }
.gps-list { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.gps-list li { position: relative; padding-left: 18px; font-size: .92rem; line-height: 1.55; color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.gps-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--gps-line, var(--gps-aqua)); transform: rotate(45deg); }

/* features: the Luma section in Luma's own spectrum, as in Lumadex */
.luma-section { position: relative; overflow: hidden; isolation: isolate; }
.luma-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 52% at 74% 50%, rgba(142, 42, 142, .16), transparent 70%),
    radial-gradient(30% 40% at 84% 30%, rgba(29, 43, 255, .10), transparent 70%),
    radial-gradient(30% 40% at 66% 72%, rgba(242, 106, 34, .08), transparent 70%); }
.luma-eyebrow { color: var(--text); }
.luma-dot { width: 9px; height: 9px; border-radius: 50%;
  background: conic-gradient(from var(--luma-angle), #1d2bff, #8e2a8e, #149b48, #f7d730, #f26a22, #ff2020, #1d2bff);
  box-shadow: 0 0 12px rgba(142, 42, 142, .55); animation: luma-spin 4s linear infinite; }
.luma-text { background: linear-gradient(90deg, #6f7bff, #b05cc8 35%, #f08a4b 70%, #f7d24a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.luma-section .checks li::before { border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7c2ea' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat padding-box,
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(135deg, #1d2bff, #8e2a8e, #149b48, #f7d730, #f26a22, #ff2020) border-box; }
[data-theme="light"] .luma-section .checks li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e2a8e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat padding-box,
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(135deg, #1d2bff, #8e2a8e, #149b48, #f7d730, #f26a22, #ff2020) border-box; }
.luma-frame { position: relative; border-radius: calc(var(--radius-lg) + 2px); padding: 1.5px; isolation: isolate;
  background: conic-gradient(from var(--luma-angle), #1d2bff, #8e2a8e, #149b48, #f7d730, #f26a22, #ff2020, #1d2bff);
  animation: luma-spin 6s linear infinite; }
.luma-frame::before { content: ""; position: absolute; inset: 6%; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--luma-angle), #1d2bff, #8e2a8e, #149b48, #f7d730, #f26a22, #ff2020, #1d2bff);
  filter: blur(48px); opacity: .32; animation: luma-spin 6s linear infinite; }
.luma-frame .shot { border: 0; border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
[data-theme="light"] .luma-frame::before { opacity: .22; }
[data-theme="light"] .luma-text { background: linear-gradient(90deg, #1d2bff, #8e2a8e 40%, #d0561a 80%, #c89400); -webkit-background-clip: text; background-clip: text; }
.subnav a[href="#luma"] { position: relative; }
.subnav a[href="#luma"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #1d2bff, #8e2a8e, #149b48, #f7d730, #f26a22, #ff2020); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .luma-frame, .luma-frame::before, .luma-dot { animation: none; } }