/* Xionia — shared design system for xionia.ai, xionia.audio and the legal pages.
   Colours and type follow brand pack v3.6: soft graphite ground, platinum ink, teal strand.
   Every class is prefixed x- so product pages (StarShaper) can load their own styles alongside. */

/* The font ranges leave out U+2122 (™): Urbanist draws it at full cap height, where it reads as
   the letters "TM", so the system font's raised mark is used instead. */

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/urbanist-latin.woff2?v=7981ef90c2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/urbanist-latin-ext.woff2?v=f71047c013") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --x-ground: #18181B;       /* soft graphite: the ground on dark */
  --x-ground-deep: #121214;
  --x-tile: #1F1F24;         /* the app-icon tile */
  --x-tile-2: #26262C;
  --x-line: rgba(226, 228, 232, 0.1);
  --x-line-2: rgba(226, 228, 232, 0.18);
  --x-line-field: rgba(226, 228, 232, 0.46); /* a form field's edge: at least 3:1 against the grounds and tiles around it */
  --x-text: #E2E4E8;         /* platinum, flat */
  --x-text-2: #B3B9C3;
  --x-text-3: #8B95A3;
  --x-teal: #21BEB5;         /* teal on dark */
  --x-teal-rgb: 33, 190, 181;
  --x-teal-hi: #6EE6DD;
  --x-teal-lo: #0C6D69;
  --x-amber: #FFB84D;        /* StarShaper's LED light, used only where StarShaper appears */
  --x-amber-rgb: 255, 184, 77;
  --x-copper: #E8844A;       /* The Plasma Star's molten copper, used only where it appears */
  --x-copper-rgb: 232, 132, 74;
  --x-copper-hi: #FFB27A;
  --x-radius: 1.25rem;
  --x-gutter: clamp(1rem, 4vw, 2.5rem);
  --x-header-h: 4.5rem;
  --x-sans: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --x-teal-gradient: linear-gradient(135deg, #6EE6DD 0%, #21BEB5 45%, #0C6D69 100%);
  --x-plat-gradient: linear-gradient(135deg, #FFFFFF 0%, #D4D8DF 45%, #7D8592 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; background: var(--x-ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--x-header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100vh; font-family: var(--x-sans); font-size: 1.0625rem; line-height: 1.6; color: var(--x-text); background: var(--x-ground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-color: rgba(var(--x-teal-rgb), 0.55); text-underline-offset: 0.22em; }
a:hover { color: var(--x-teal-hi); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(var(--x-teal-rgb), 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--x-teal-hi); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.x-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1.125rem; border-radius: 999px; background: var(--x-teal); color: var(--x-ground); font-weight: 600; text-decoration: none; }
.x-skip:focus { top: 1rem; color: var(--x-ground); }
.x-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Layout ---------- */
.x-wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: max(var(--x-gutter), env(safe-area-inset-left)) max(var(--x-gutter), env(safe-area-inset-right)); }
.x-wrap--narrow { max-width: 52rem; }
.x-section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.x-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.x-section--band { background: var(--x-ground-deep); border-block: 1px solid var(--x-line); }
.x-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.x-stack--lg { gap: 2rem; }
.x-grid { display: grid; gap: 1.25rem; }
.x-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr)); }
.x-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.x-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 2.5rem clamp(2.5rem, 7vw, 6rem); align-items: start; }
.x-section-head { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ---------- Type ---------- */
.x-label { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--x-teal); }
.x-label--quiet { color: var(--x-text-3); }
/* A hero's label as the first line of its heading (heroLabel() in chrome.mjs), drawn as it was above
   the heading: the label's own line height and wrapping, and the hero's gap below it. A status beside
   the name is drawn here, so it shows on the label's line without becoming part of the heading. */
.x-display > .x-label { display: block; line-height: 1.6; text-wrap: wrap; margin-bottom: 1.75rem; }
.x-project-hero__text .x-display > .x-label { margin-bottom: 1.5rem; }
.x-label[data-status]::after { content: " · " attr(data-status); }
.x-display { font-size: clamp(2.75rem, 6.6vw, 5.75rem); font-weight: 450; letter-spacing: -0.025em; line-height: 0.98; text-wrap: balance; }
.x-h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); font-weight: 450; letter-spacing: -0.02em; line-height: 1.06; text-wrap: balance; }
.x-h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.005em; line-height: 1.22; }
.x-lede { font-size: clamp(1.125rem, 1.55vw, 1.3125rem); line-height: 1.55; color: var(--x-text-2); max-width: 36em; text-wrap: pretty; }
.x-body { color: var(--x-text-2); text-wrap: pretty; }
.x-small { font-size: 0.9375rem; line-height: 1.55; color: var(--x-text-3); }
.x-rule { width: 5rem; height: 2px; border: 0; margin: 0; background: var(--x-teal); }
.x-gradient-text { background: var(--x-plat-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons and links ---------- */
.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3rem; padding: 0 1.375rem; border-radius: 999px; border: 1px solid var(--x-line-2); background: transparent; color: var(--x-text); font-size: 0.9688rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.x-btn:hover { border-color: rgba(226, 228, 232, 0.55); color: var(--x-text); }
.x-btn--primary { background: var(--x-teal); border-color: var(--x-teal); color: var(--x-ground); }
.x-btn--primary:hover { background: var(--x-teal-hi); border-color: var(--x-teal-hi); color: var(--x-ground); }
.x-btn--sm { min-height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }
.x-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.x-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--x-text); text-decoration: none; }
.x-link::after { content: ""; width: 0.5rem; height: 0.5rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
.x-link:hover { color: var(--x-teal-hi); }
.x-link:hover::after { transform: translateX(3px) rotate(45deg); }
/* External links: the same corner, unrotated, points up and out. */
.x-link--out::after { transform: none; }
.x-link--out:hover::after { transform: translate(2px, -2px); }

/* ---------- Header ---------- */
.x-header { position: sticky; top: 0; z-index: 50; background: rgba(24, 24, 27, 0.78); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--x-line); }
.x-header__bar { display: flex; align-items: center; gap: 1.5rem; height: var(--x-header-h); }
.x-logo { display: flex; align-items: center; gap: 0.875rem; flex: none; margin-right: auto; color: var(--x-text); text-decoration: none; }
.x-logo img { height: 2.25rem; width: auto; }
.x-logo__sep { width: 1px; height: 1.5rem; background: var(--x-line-2); }
.x-logo__label { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.x-nav { display: flex; align-items: center; gap: 0.25rem; }
.x-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.875rem; border-radius: 999px; color: var(--x-text-2); font-size: 0.9688rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.x-nav a:hover, .x-nav a[aria-current="page"] { color: var(--x-text); background: rgba(226, 228, 232, 0.06); }
.x-menu-btn { display: none; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.875rem; border-radius: 999px; border: 1px solid var(--x-line-2); background: transparent; color: var(--x-text); font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.x-menu-btn svg { width: 1.125rem; height: 1.125rem; }
.x-menu { padding-bottom: 1rem; }
.x-menu a { display: flex; align-items: center; min-height: 3.25rem; border-bottom: 1px solid var(--x-line); color: var(--x-text); font-size: 1.1875rem; font-weight: 500; text-decoration: none; }
/* Narrower screens draw the nav closer together before it folds into the menu. */
@media (max-width: 1100px) {
  .x-header__bar { gap: 1rem; }
  .x-nav { gap: 0; }
  .x-nav a { padding: 0 0.625rem; }
}
@media (max-width: 960px) {
  .x-nav { display: none; }
  .x-menu-btn { display: inline-flex; }
}
/* Phones keep the header's call to action, as wider screens do. To fit it, the menu button shows its
   icon alone (its name stays for screen readers) and the bar draws closer, while the lockup keeps the
   brand pack's clear space (half the mark's height) and never drops below its 120 px minimum width
   (1.625rem tall). StarShaper's header (starshaper.css) follows the same steps. */
@media (max-width: 480px) {
  .x-header__bar { gap: 0.5rem; }
  .x-logo { padding-right: 0.5rem; }
  .x-logo img { height: 1.875rem; }
  .x-header__cta { padding: 0 0.75rem; font-size: 0.8125rem; }
  .x-menu-btn { flex: none; width: 2.75rem; padding: 0; justify-content: center; }
  .x-menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 400px) {
  .x-logo { gap: 0.5rem; }
  .x-logo img { height: 1.625rem; }
  .x-logo__label { font-size: 0.875rem; }
  .x-header__cta { padding: 0 0.625rem; font-size: 0.75rem; }
}
/* The smallest phones (320 px wide) have no room for the button beside the lockup at its minimum,
   so there it waits in the menu, which always lists it. */
@media (max-width: 340px) {
  .x-header__cta { display: none; }
}

/* ---------- Hero ---------- */
.x-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(52rem, calc(100svh - var(--x-header-h))); display: flex; align-items: flex-end; }
.x-hero__canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.x-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(24, 24, 27, 0) 0%, rgba(24, 24, 27, 0.82) 62%, var(--x-ground) 100%); }
.x-hero__content { display: flex; flex-direction: column; gap: 1.75rem; padding-block: clamp(6rem, 14vw, 10rem) clamp(3rem, 7vw, 5.5rem); }
.x-hero__content .x-lede { max-width: 34em; }
/* A content page's hero: the same field, less height. */
.x-hero--short { min-height: min(40rem, calc(100svh - var(--x-header-h))); }
/* Pause motion (pauseMotion() in chrome.mjs, site.js), at the top right of the hero, in line with the
   page's measure. With reduced motion nothing moves, so it isn't shown. */
.x-pause { position: absolute; top: 1rem; right: max(var(--x-gutter), env(safe-area-inset-right), calc((100% - 76rem) / 2 + var(--x-gutter))); z-index: 1; display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--x-line-2); background: rgba(24, 24, 27, 0.8); color: var(--x-text-2); font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.x-pause::before { content: ""; width: 0.5rem; height: 0.625rem; border-inline: 2px solid currentColor; }
.x-pause:hover { color: var(--x-text); }
.x-pause[aria-pressed="true"] { color: var(--x-text); border-color: var(--x-star, var(--x-teal)); }
@media (prefers-reduced-motion: reduce) { .x-pause { display: none; } }

/* ---------- Cards ---------- */
.x-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: var(--x-radius); border: 1px solid var(--x-line); background: linear-gradient(180deg, rgba(226, 228, 232, 0.035), rgba(226, 228, 232, 0) 60%), var(--x-tile); }
.x-card__glyph { width: 3rem; height: 3rem; color: var(--x-teal); }
.x-card__kicker { font-size: 0.875rem; font-weight: 600; color: var(--x-text-3); letter-spacing: 0.02em; }
.x-card__title { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 550; letter-spacing: -0.01em; line-height: 1.15; }
/* A division card is headed by its lockup at the header's size, with clear space of half its height
   below it (the brand pack's rule); Xionia Labs' name sits beside the XIONIA lockup, as in its header. */
.x-card__lockup { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.25rem; color: var(--x-text); }
.x-card__lockup > * { flex: none; }
.x-card__lockup img { height: 2.25rem; width: auto; }
.x-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--x-line); }
.x-card--quiet { background: transparent; border-style: dashed; border-color: var(--x-line-2); }
.x-card--lit { border-color: rgba(var(--x-teal-rgb), 0.45); background: radial-gradient(120% 80% at 15% 0%, rgba(var(--x-teal-rgb), 0.1) 0%, rgba(var(--x-teal-rgb), 0) 62%), var(--x-tile); }
.x-card--link { transition: border-color 0.2s, transform 0.2s; }
.x-card--link:hover { border-color: rgba(var(--x-teal-rgb), 0.5); }
.x-card a.x-card__cover { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.x-card a.x-card__cover:focus-visible { outline-offset: -2px; }
.x-card .x-link { position: relative; z-index: 2; }

.x-status { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 1.875rem; padding: 0 0.75rem; border-radius: 999px; border: 1px solid var(--x-line-2); font-size: 0.8125rem; font-weight: 600; color: var(--x-text-2); white-space: nowrap; }
.x-status::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--x-text-3); }
.x-status--live::before { background: var(--x-teal); box-shadow: 0 0 0.5rem rgba(var(--x-teal-rgb), 0.9); }
.x-status--soon::before { background: var(--x-amber); box-shadow: 0 0 0.5rem rgba(var(--x-amber-rgb), 0.85); }
.x-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* A product feature: the product's artwork beside its promise, details and actions. The text column
   is the wider one and the headline is a step smaller than a section heading, so it sets on two lines
   and the card stays compact; the artwork's waves run just above the logo at its foot. */
.x-feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border-radius: calc(var(--x-radius) + 0.25rem); overflow: hidden; border: 1px solid var(--x-line); background: #121214; }
.x-feature__art { position: relative; min-height: 20rem; background: radial-gradient(80% 70% at 55% 40%, #1d1d21 0%, #0c0c0d 100%); }
.x-feature__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-feature__logo { position: absolute; left: 6%; bottom: 10%; width: 88%; height: auto; filter: drop-shadow(0 0.5rem 1.5rem rgba(0, 0, 0, 0.6)); }
.x-feature__body { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1.75rem, 3.5vw, 3rem); }
.x-feature .x-h2 { font-size: clamp(1.875rem, 3vw, 2.625rem); }
/* A feature with its picture on the right, such as Xionia Intelligence's on xionia.ai, where a request and
   the steps its research takes stand in place of artwork, numbered down a thin teal line. */
.x-feature--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.x-pipeline { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; margin: 0; padding: clamp(1.75rem, 3.5vw, 3rem); background: radial-gradient(90% 70% at 75% 15%, rgba(var(--x-teal-rgb), 0.14) 0%, rgba(var(--x-teal-rgb), 0) 62%), radial-gradient(80% 70% at 55% 40%, #1d1d21 0%, #0c0c0d 100%); }
.x-pipeline blockquote { margin: 0; padding-left: 1rem; border-left: 2px solid var(--x-teal); }
.x-pipeline blockquote p { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 450; line-height: 1.4; color: var(--x-text); text-wrap: pretty; }
.x-pipeline ol { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.x-pipeline li { counter-increment: step; position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.125rem 0.75rem; padding-bottom: 1rem; }
.x-pipeline li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.15em; line-height: 1.6; color: var(--x-teal); }
.x-pipeline li::after { content: ""; position: absolute; left: 0.5rem; top: 1.75rem; bottom: 0.25rem; width: 1px; background: rgba(var(--x-teal-rgb), 0.35); }
.x-pipeline li:last-child { padding-bottom: 0; }
.x-pipeline li:last-child::after { content: none; }
.x-pipeline strong { font-weight: 600; color: var(--x-text); }
.x-pipeline li span { font-size: 0.9375rem; line-height: 1.5; color: var(--x-text-2); }
/* Stacked, the artwork is a wide band: a smaller logo, and the waves lifted to the top edge above it. */
@media (max-width: 860px) {
  .x-feature { grid-template-columns: minmax(0, 1fr); }
  .x-feature__art { min-height: 18rem; }
  .x-feature__bg { object-position: 50% 65%; }
  .x-feature__logo { width: min(88%, 24rem); }
}

/* The seven stars and StarShaper: eight cards, four to a row on wide screens. Each star's card opens
   on the artwork from its page, lit in the star's own colour (set with the page colours below);
   StarShaper's, the flagship, shows all seven together and is lit more strongly in its gold. */
.x-stars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); gap: 1.25rem; }
/* The stars' cards look the same wherever the family is shown, StarShaper's page included, so they
   keep the family's type and colour inside StarShaper's own look (.ss). */
.x-stars, .x-stars__note { font-family: var(--x-sans); }
.x-stars { font-size: 1.0625rem; line-height: 1.6; color: var(--x-text); }
.x-star { --pad: clamp(1.25rem, 2vw, 1.625rem); gap: 0.75rem; padding: var(--pad); overflow: hidden; border-color: rgba(var(--x-star-rgb), 0.28); background: radial-gradient(120% 60% at 15% 45%, rgba(var(--x-star-rgb), 0.09) 0%, rgba(var(--x-star-rgb), 0) 62%), var(--x-tile); }
.x-star__art { width: calc(100% + 2 * var(--pad)); max-width: none; height: auto; aspect-ratio: 5 / 3; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0.5rem; object-fit: cover; border-bottom: 1px solid rgba(var(--x-star-rgb), 0.22); background: #08080A; }
.x-star .x-card__kicker { color: var(--x-star); }
.x-star .x-status { min-height: 1.625rem; padding: 0 0.625rem; font-size: 0.75rem; }
.x-star .x-card__title { font-size: clamp(1.375rem, 1.9vw, 1.625rem); }
/* The link sits just above the footer, so the links and the status beneath them line up along a row
   however long each card's line is. A step smaller than the text, the longest ("Meet The Harmonic
   Pulsar") keeps to one line on four cards to a row. */
.x-star > .x-link { margin-top: auto; font-size: 1rem; }
.x-star .x-card__foot { margin-top: 0; padding-top: 1rem; }
.x-star.x-card--link:hover { border-color: rgba(var(--x-star-rgb), 0.75); }
.x-star .x-link:hover { color: var(--x-star-hi); }
/* StarShaper's card is the same card made more substantial: a stronger gold border with a soft glow
   round it, more light inside and a sheen along its top, and gold rules above and below its text. */
.x-star--starshaper { --x-star: var(--x-amber); --x-star-rgb: var(--x-amber-rgb); --x-star-hi: #FFD08A; border-color: rgba(var(--x-star-rgb), 0.62); background: radial-gradient(130% 70% at 50% 42%, rgba(var(--x-star-rgb), 0.15) 0%, rgba(var(--x-star-rgb), 0) 66%), linear-gradient(180deg, rgba(var(--x-star-rgb), 0.07), rgba(var(--x-star-rgb), 0) 45%), var(--x-tile); box-shadow: 0 0 2.25rem -0.75rem rgba(var(--x-star-rgb), 0.4), inset 0 1px 0 rgba(255, 228, 184, 0.22); }
.x-star--starshaper .x-star__art { border-bottom-color: rgba(var(--x-star-rgb), 0.5); }
.x-star--starshaper .x-card__foot { border-top-color: rgba(var(--x-star-rgb), 0.3); }
.x-star--starshaper.x-card--link:hover { border-color: rgba(var(--x-star-rgb), 0.95); }
.x-stars__note { margin-top: 1.25rem; }

/* Xionia Core: the architecture beneath the stars and StarShaper, as three tiers joined by lines. */
.x-core { display: grid; gap: 1.75rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.x-core__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1.75rem; }
.x-core__tier { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem; border-radius: 1rem; border: 1px solid var(--x-line-2); background: var(--x-tile); }
.x-core__tier--core { border-color: rgba(var(--x-teal-rgb), 0.5); background: linear-gradient(180deg, rgba(var(--x-teal-rgb), 0.09), rgba(var(--x-teal-rgb), 0.02)), var(--x-tile); }
.x-core__pair .x-core__tier::before, .x-core__pair .x-core__tier::after { content: ""; position: absolute; left: 50%; width: 1px; height: 1.75rem; background: rgba(var(--x-teal-rgb), 0.55); }
.x-core__pair .x-core__tier::before { bottom: 100%; }
.x-core__pair .x-core__tier::after { top: 100%; }
.x-core__name { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--x-text); }
.x-core__tier--core .x-core__name { color: var(--x-teal); }
/* Xionia Core's parts, and any short list shown as pills. */
.x-core__parts, .x-pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.x-core__parts li, .x-pills li { display: inline-flex; align-items: center; min-height: 1.875rem; padding: 0 0.75rem; border-radius: 999px; border: 1px solid var(--x-line-2); font-size: 0.875rem; color: var(--x-text-2); }
/* A sentence of a heading on a line of its own (sentenceLines() in product.mjs). */
.x-line { display: block; }
/* A closing line under a section's content. */
.x-closer { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 24em; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 450; letter-spacing: -0.015em; line-height: 1.2; color: var(--x-text); text-wrap: balance; }
.x-closer + .x-actions { margin-top: 1.5rem; }
/* A section's last word with the sentence that sets it up, such as xionia.ai's first principle: the
   sentence, the closing line close beneath it, then the actions. */
.x-coda { display: flex; flex-direction: column; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.x-coda .x-closer { margin-top: 0; }
.x-coda .x-closer + .x-actions { margin-top: 0.5rem; }
/* A further block inside a section, set apart from what comes before it. */
.x-sub { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Motion Waves: a few of an instrument's parameters, each with a wave of its own drifting at its own
   speed and phase (motionWaves() in product.mjs). Teal on the homepage, the star's colour on its page. */
.x-waves { --x-wave: var(--x-star, var(--x-teal)); list-style: none; padding: 0; margin-top: 0.75rem; border-top: 1px solid var(--x-line); }
.x-waves li { display: grid; grid-template-columns: minmax(7rem, 0.5fr) minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--x-line); }
.x-waves__name { font-size: 0.875rem; line-height: 1.35; color: var(--x-text-2); }
.x-waves__lane { position: relative; display: block; height: 1.75rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.x-waves__lane svg { position: absolute; top: 0; left: 0; width: 200%; max-width: none; height: 100%; animation: x-wave 9s linear infinite; }
.x-waves__lane path { fill: none; stroke: var(--x-wave); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.x-waves li:nth-child(2) svg { animation-duration: 6s; animation-delay: -2.5s; }
.x-waves li:nth-child(3) svg { animation-duration: 14s; animation-delay: -6s; }
.x-waves li:nth-child(4) svg { animation-duration: 11s; animation-delay: -1.5s; }
.x-waves li:nth-child(5) svg { animation-duration: 17s; animation-delay: -9s; }
@keyframes x-wave { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .x-waves__lane svg { animation: none; } }
.x-still .x-waves__lane svg { animation-play-state: paused; }

/* ---------- Signup forms (First Light, outside the StarShaper pages) ---------- */
.x-signup { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.375rem, 3vw, 2rem); border-radius: var(--x-radius); border: 1px solid var(--x-line); background: var(--x-tile); }
.x-signup--done { align-items: flex-start; gap: 0.75rem; border-color: rgba(var(--x-teal-rgb), 0.45); }
.x-signup--done:focus { outline: none; }
.x-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.x-field { display: flex; flex-direction: column; gap: 0.5rem; }
.x-field__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--x-text-2); }
.x-field__row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.x-input { flex: 1 1 15rem; min-width: 0; min-height: 3rem; padding: 0 1.125rem; border-radius: 999px; border: 1px solid var(--x-line-field); background: var(--x-ground-deep); color: var(--x-text); font-size: 1rem; }
.x-input::placeholder { color: var(--x-text-3); }
.x-input:focus { outline: none; border-color: var(--x-teal); box-shadow: 0 0 0 3px rgba(var(--x-teal-rgb), 0.25); }
.x-input[aria-invalid="true"] { border-color: #F08A7E; }
/* Safari paints a field it autofills pale yellow with black text, whatever the page's colours (WebKit
   bug 250896), so an inset shadow paints the field's own ground back over it, the yellow stays out from
   under its translucent border, and the text and caret keep their colour. */
.x-input:-webkit-autofill { -webkit-text-fill-color: var(--x-text); caret-color: var(--x-text); background-clip: padding-box; box-shadow: inset 0 0 0 100vmax var(--x-ground-deep); }
.x-input:-webkit-autofill:focus { box-shadow: 0 0 0 3px rgba(var(--x-teal-rgb), 0.25), inset 0 0 0 100vmax var(--x-ground-deep); }
.x-consent { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; font-size: 0.9375rem; line-height: 1.55; color: var(--x-text-2); }
.x-check { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; border-radius: 0.375rem; border: 1.5px solid var(--x-text-3); background: var(--x-ground-deep); cursor: pointer; }
.x-check::after { content: ""; width: 0.3125rem; height: 0.625rem; border: solid var(--x-ground); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); opacity: 0; }
.x-check:checked { background: var(--x-teal); border-color: var(--x-teal); }
.x-check:checked::after { opacity: 1; }
.x-form-error { color: #F4A397; }
.x-form-error:empty { margin-top: -1.25rem; }
.x-chip-set { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.5rem 0 0; padding: 0; border: 0; }
.x-chip-set legend { margin-bottom: 0.75rem; padding: 0; }
.x-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.x-chip { position: relative; display: inline-flex; }
.x-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.x-chip span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--x-line-2); color: var(--x-text-2); font-size: 0.9375rem; font-weight: 500; }
.x-chip:hover span { color: var(--x-text); }
.x-chip input:checked + span { background: var(--x-text); border-color: var(--x-text); color: var(--x-ground); }
.x-chip input:focus-visible + span { outline: 2px solid var(--x-teal-hi); outline-offset: 3px; }
/* First Light's optional questions (welcome and preferences pages) and its own pages. */
.x-field > .x-input { flex: none; }
.x-select { -webkit-appearance: none; appearance: none; width: 100%; padding-right: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, var(--x-text-2) 50%), linear-gradient(135deg, var(--x-text-2) 50%, transparent 50%); background-position: calc(100% - 1.375rem) 50%, calc(100% - 1rem) 50%; background-size: 0.375rem 0.375rem; background-repeat: no-repeat; cursor: pointer; }
.x-select option { background: var(--x-tile); color: var(--x-text); }
.x-textarea { min-height: 8rem; padding: 0.875rem 1.125rem; border-radius: 1rem; line-height: 1.55; resize: vertical; }
.x-field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1.25rem; }
.x-textarea--tall { min-height: 11rem; }
.x-contact[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.x-contact-layout { display: grid; gap: 2.5rem clamp(2.5rem, 7vw, 6rem); align-items: start; }
@media (min-width: 52rem) {
  .x-contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .x-contact-layout__form { grid-column: 2; grid-row: 1 / span 2; }
  .x-contact-layout__office { grid-column: 1; grid-row: 2; }
}
.x-answers__status { color: var(--x-teal-hi); font-weight: 600; }
.x-answers__status:empty { display: none; }
.x-fl-page { max-width: 46rem; }

/* ---------- Questions and answers ---------- */
.x-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.x-faq details { border-top: 1px solid var(--x-line-2); }
.x-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.75rem; padding: 1rem 0; cursor: pointer; font-size: 1.125rem; font-weight: 600; color: var(--x-text); }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: ""; flex: none; width: 0.5625rem; height: 0.5625rem; border-right: 1.5px solid var(--x-text-2); border-bottom: 1.5px solid var(--x-text-2); transform: translateY(-0.1875rem) rotate(45deg); transition: transform 0.2s; }
.x-faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.x-faq summary:hover { color: var(--x-teal-hi); }
.x-faq details p { max-width: 40em; padding: 0 0 1.375rem; color: var(--x-text-2); }

/* ---------- The seven stars' pages ---------- */
/* Each page keeps Xionia's cold system and brings its star's own energy: the star's colour takes the
   accents inside the main content, while the header and footer stay Xionia's. The colours, which the
   stars' cards share: The Plasma Star's molten copper, The Spectral Star's electric cyan (bluer and
   brighter than Xionia's teal, so the two never read as one), The Harmonic Pulsar's violet, The
   Particle Star's nebula pink, The Resonant Star's ringing gold, The Kinetic Star's impact red and The
   Origin Star's platinum, the most abstract and closest to Xionia's own. */
.x-sp--va, .x-star--va { --x-star: var(--x-copper); --x-star-rgb: var(--x-copper-rgb); --x-star-hi: var(--x-copper-hi); --x-star-ink: #1A0D05; }
.x-sp--wavetable, .x-star--wavetable { --x-star: #3FD0FA; --x-star-rgb: 63, 208, 250; --x-star-hi: #A3EBFF; --x-star-ink: #03141B; }
.x-sp--harmonic, .x-star--harmonic { --x-star: #A487FF; --x-star-rgb: 164, 135, 255; --x-star-hi: #CBB8FF; --x-star-ink: #120A24; }
.x-sp--granular, .x-star--granular { --x-star: #F07CC0; --x-star-rgb: 240, 124, 192; --x-star-hi: #FFB3DE; --x-star-ink: #26081A; }
.x-sp--physical, .x-star--physical { --x-star: #E6BF5C; --x-star-rgb: 230, 191, 92; --x-star-hi: #F6DC98; --x-star-ink: #211804; }
.x-sp--percussion, .x-star--percussion { --x-star: #FF5A6A; --x-star-rgb: 255, 90, 106; --x-star-hi: #FF9EA8; --x-star-ink: #26050A; }
.x-sp--math, .x-star--math { --x-star: #E4EAF4; --x-star-rgb: 228, 234, 244; --x-star-hi: #FFFFFF; --x-star-ink: #14161B; }
.x-sp .x-label { color: var(--x-star); }
.x-sp .x-btn--primary { background: var(--x-star); border-color: var(--x-star); color: var(--x-star-ink); }
.x-sp .x-btn--primary:hover { background: var(--x-star-hi); border-color: var(--x-star-hi); color: var(--x-star-ink); }
.x-sp .x-points li::before { background: var(--x-star); }
.x-sp a:hover, .x-sp .x-link:hover, .x-sp .x-faq summary:hover { color: var(--x-star-hi); }
.x-sp :focus-visible { outline-color: var(--x-star-hi); }
.x-sp .x-input:focus { border-color: var(--x-star); box-shadow: 0 0 0 3px rgba(var(--x-star-rgb), 0.25); }
.x-sp .x-input:-webkit-autofill:focus { box-shadow: 0 0 0 3px rgba(var(--x-star-rgb), 0.25), inset 0 0 0 100vmax var(--x-ground-deep); }
.x-sp .x-check:checked { background: var(--x-star); border-color: var(--x-star); }
.x-sp .x-signup--done { border-color: rgba(var(--x-star-rgb), 0.45); }
.x-sp-hero { --x-sp-hero-h: min(54rem, calc(100svh - var(--x-header-h))); min-height: var(--x-sp-hero-h); }
/* The field keeps to that height, so a hero with more to say runs on below the star rather than
   drawing it down into the text. */
.x-sp-hero .x-hero__canvas { bottom: auto; height: var(--x-sp-hero-h); }
/* On wide screens the star sits to the right of the text; a light scrim keeps its outer reaches from
   competing with the headline. On phones it sits above the text, in space of its own. */
@media (min-width: 60rem) {
  .x-sp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(24, 24, 27, 0.6) 0%, rgba(24, 24, 27, 0.4) 38%, rgba(24, 24, 27, 0) 64%); }
}
@media (max-width: 639px) {
  .x-sp-hero .x-hero__content { padding-top: 15rem; }
}
.x-sp-line { display: block; }
.x-sp-intro { display: flex; flex-direction: column; gap: 0.875rem; }
.x-sp-intro .x-body { max-width: 38em; }
/* "Coming soon to" and the platforms closing a star's hero, each with its logo (platformLogo() in
   product.mjs), as StarShaper's hero shows them (.plat in starshaper.css, its values copied). */
.x-plat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.x-plat-soon { color: #CFCFD3; font-size: 0.875rem; font-weight: 600; }
.x-plat-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.x-plat { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.125rem; padding: 0 0.875rem 0 0.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.075); background: rgba(18, 18, 20, 0.55); color: #ECECEE; font-size: 0.875rem; font-weight: 600; }
.x-plat-logo { width: 0.9375rem; height: 0.9375rem; flex: none; }
.x-sp-traits { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.x-sp-traits li { display: flex; flex-direction: column; gap: 0.625rem; padding: clamp(1.375rem, 2.4vw, 1.875rem); border-radius: var(--x-radius); border: 1px solid rgba(var(--x-star-rgb), 0.28); background: radial-gradient(110% 90% at 0% 0%, rgba(var(--x-star-rgb), 0.1) 0%, rgba(var(--x-star-rgb), 0) 60%), var(--x-tile); }
.x-sp-traits .x-h3 { color: var(--x-text); }
/* Four traits sit in one row on wide screens and in two rows of two below that, never three and one
   (the breakpoint leaves room for a scrollbar beside the four). */
@media (min-width: 40rem) and (max-width: 74rem) {
  .x-sp-traits--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* What a sound can become (The Harmonic Pulsar): a row for each source, what happens to it and the
   result. On phones each row stacks, its source above the rest. */
.x-sp-examples { width: 100%; border-collapse: collapse; border-top: 1px solid var(--x-line-2); }
.x-sp-examples th, .x-sp-examples td { padding: 1rem 1.5rem 1rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--x-line); }
.x-sp-examples thead th { padding-block: 0.875rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--x-star); }
.x-sp-examples tbody th { width: 22%; font-weight: 600; color: var(--x-text); }
.x-sp-examples td { color: var(--x-text-2); }
.x-sp-examples td:last-child { padding-right: 0; color: var(--x-text); }
@media (max-width: 720px) {
  .x-sp-examples thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .x-sp-examples tr { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 1rem; border-bottom: 1px solid var(--x-line); }
  .x-sp-examples tbody th, .x-sp-examples td { display: block; width: auto; padding: 0; border: 0; }
}
/* A line set apart inside a section's text: in the star's colour on its page, teal elsewhere. */
.x-sp-statement { padding-left: 1rem; border-left: 2px solid var(--x-star, var(--x-teal));font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--x-text); text-wrap: balance; }
/* Beside a long column of text, the heading stays in view while the text scrolls past. */
@media (min-width: 60rem) {
  .x-split--sticky > :first-child { position: sticky; top: calc(var(--x-header-h) + 2rem); }
}

/* Principles and plain lists of points. */
.x-points { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.x-points li { display: flex; flex-direction: column; gap: 0.625rem; padding-top: 1.25rem; border-top: 1px solid var(--x-line-2); }
.x-points li::before { content: ""; width: 2.5rem; height: 2px; margin-top: -1.3125rem; margin-bottom: 0.75rem; background: var(--x-teal); }
/* Five short points, such as the five questions every instrument is designed to answer: one row
   on wide screens, then three, two and one to a row. */
.x-points--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem clamp(1.25rem, 2.2vw, 2rem); }
@media (max-width: 1080px) { .x-points--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .x-points--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .x-points--five { grid-template-columns: minmax(0, 1fr); } }
/* Longer points two to a row, such as xionia.ai's two areas of focus. */
.x-points--2 { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.x-points li > .x-link { align-self: flex-start; margin-top: 0.25rem; }

/* ---------- Human creativity (xionia.audio and Xionia Labs) ---------- */
/* What Xionia believes, as numbered statements: the number, the line, then the sentences beneath it. */
.x-beliefs { list-style: none; padding: 0; counter-reset: belief; border-top: 1px solid var(--x-line-2); }
.x-beliefs li { counter-increment: belief; display: grid; grid-template-columns: 3.5rem minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 0.75rem clamp(1.5rem, 4vw, 3.5rem); align-items: baseline; padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--x-line); }
.x-beliefs li::before { content: counter(belief, decimal-leading-zero); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; color: var(--x-teal); }
.x-beliefs h3 { font-size: clamp(1.375rem, 2.3vw, 1.875rem); font-weight: 500; letter-spacing: -0.012em; line-height: 1.18; color: var(--x-text); text-wrap: balance; }
@media (max-width: 760px) {
  .x-beliefs li { grid-template-columns: minmax(0, 1fr); }
}
/* A pull quote and who said it. An imagined request to an instrument maker (.x-request, a lit card)
   sets its words the same way. */
.x-quote { display: flex; flex-direction: column; gap: 1rem; padding-left: clamp(1.25rem, 2.5vw, 1.75rem); border-left: 2px solid var(--x-teal); }
.x-quote blockquote p, .x-request p { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 450; line-height: 1.35; letter-spacing: -0.008em; color: var(--x-text); text-wrap: pretty; }
.x-quote figcaption { font-size: 0.9375rem; color: var(--x-text-3); }
/* A longer statement, such as the founder's research vision, beside its title and credit: its
   paragraphs at reading size, and the last, its conclusion, at the size of a pull quote. */
.x-statement blockquote { display: flex; flex-direction: column; gap: 1.125rem; padding-left: clamp(1.25rem, 2.5vw, 1.75rem); border-left: 2px solid var(--x-teal); }
.x-statement blockquote p { max-width: 36em; font-size: clamp(1.125rem, 1.55vw, 1.3125rem); line-height: 1.55; color: var(--x-text-2); text-wrap: pretty; }
.x-statement blockquote p:last-child { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 450; line-height: 1.35; letter-spacing: -0.008em; color: var(--x-text); }
/* Photographs (the philosophy page, photo() in xionia-audio.mjs), each with its photographer's credit
   beneath it: a band across the measure, cropped to a cinematic frame and to 3:2 on phones, or a
   photo beside a section's heading, which the flipped split puts first on wide screens. */
.x-photo { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; }
.x-photo img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--x-radius); border: 1px solid var(--x-line); background: var(--x-tile); }
.x-photo--wide img { aspect-ratio: 21 / 10; }
.x-photo--side img { aspect-ratio: 3 / 2; }
.x-photo--top img { object-position: 50% 20%; }
.x-photo-band { padding-bottom: clamp(1rem, 3vw, 2rem); }
.x-section .x-photo--wide { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.x-head-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.x-head-split .x-section-head { margin-bottom: 0; }
@media (min-width: 56rem) {
  .x-head-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem); }
  .x-head-split--flip .x-photo { order: -1; }
}
@media (max-width: 760px) { .x-photo--wide img { aspect-ratio: 3 / 2; } }

/* A headline figure, such as the team's years of experience. */
.x-stat { display: flex; flex-direction: column; gap: 0.625rem; max-width: 19rem; }
.x-stat__n { font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.9; background: var(--x-plat-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.x-stat__t { padding-top: 0.875rem; border-top: 2px solid var(--x-teal); font-size: 0.9375rem; line-height: 1.5; color: var(--x-text-2); }

/* Definition-style rows for company details, contacts and the stars' development status. A long label
   wraps at 13rem, so the values keep the wider column. */
.x-facts { display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); gap: 0.875rem 2rem; margin: 0; }
.x-facts dt { max-width: 13rem; color: var(--x-text-3); font-size: 0.9375rem; }
.x-facts dd { margin: 0; color: var(--x-text); }
@media (max-width: 520px) {
  .x-facts { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .x-facts dd { margin-bottom: 0.75rem; }
}

/* ---------- Xionia Studios ---------- */
/* A project's picture, shown whole: its key art carries the game's own title and the studio's lockup,
   so it's never cropped. */
.x-shot img { width: 100%; height: auto; border-radius: var(--x-radius); border: 1px solid var(--x-line); background: #08080A; }
/* A project on the studio's homepage: its key art across the top, then what it is beside where to go
   next. */
.x-showcase { display: flex; flex-direction: column; border-radius: calc(var(--x-radius) + 0.25rem); overflow: hidden; border: 1px solid var(--x-line); background: #121214; }
.x-showcase__art { display: block; background: #08080A; }
.x-showcase__art img { width: 100%; height: auto; }
.x-showcase__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1.5rem clamp(2.5rem, 6vw, 5rem); align-items: start; padding: clamp(1.75rem, 3.5vw, 3rem); border-top: 1px solid var(--x-line); }
/* A project's own page opens on its key art, with the headline beneath it. */
.x-project-hero { padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(3.5rem, 7vw, 5.5rem); }
.x-project-hero__text { display: flex; flex-direction: column; gap: 1.5rem; margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.x-project-hero__text .x-lede { max-width: 34em; }

/* ---------- Long-form pages (legal) ---------- */
.x-doc { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6rem); }
.x-doc__head { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--x-line); }
.x-doc__head .x-h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
.x-doc__layout { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 46rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.x-toc { position: sticky; top: calc(var(--x-header-h) + 1.5rem); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; }
.x-toc p { color: var(--x-text-3); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.25rem; }
.x-toc a { color: var(--x-text-2); text-decoration: none; line-height: 1.35; }
.x-toc a:hover { color: var(--x-teal-hi); }
@media (max-width: 900px) {
  .x-doc__layout { grid-template-columns: minmax(0, 1fr); }
  .x-toc { position: static; padding: 1.25rem; border: 1px solid var(--x-line); border-radius: 1rem; }
}
.x-prose { color: var(--x-text-2); }
.x-prose > * + * { margin-top: 1rem; }
.x-prose h2 { margin-top: 3rem; color: var(--x-text); font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; scroll-margin-top: calc(var(--x-header-h) + 1.5rem); }
.x-prose h2:first-child { margin-top: 0; }
.x-prose h3 { margin-top: 2rem; color: var(--x-text); font-size: 1.125rem; font-weight: 600; }
.x-prose strong { color: var(--x-text); font-weight: 600; }
.x-prose ul, .x-prose ol { padding-left: 1.25rem; }
.x-prose li + li { margin-top: 0.5rem; }
.x-prose li::marker { color: var(--x-teal); }
.x-prose address { font-style: normal; color: var(--x-text); }
.x-prose .x-facts { margin-top: 1.25rem; }
.x-table-wrap { overflow-x: auto; margin-top: 1.25rem; border: 1px solid var(--x-line); border-radius: 0.875rem; }
.x-prose table { width: 100%; border-collapse: collapse; font-size: 0.9688rem; }
.x-prose th, .x-prose td { padding: 0.875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--x-line); }
.x-prose th { color: var(--x-text); font-weight: 600; background: rgba(226, 228, 232, 0.03); }
.x-prose tr:last-child td { border-bottom: 0; }
/* A long page with one section (a news article) reads in a single column at the text's measure. */
.x-doc__layout--single { grid-template-columns: minmax(0, 46rem); }
/* The press page's logos, each on a tile with its downloads. */
.x-prose .x-logos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.x-prose .x-logos li { display: flex; flex-direction: column; gap: 0.875rem; margin: 0; padding: 1.25rem; border: 1px solid var(--x-line); border-radius: 0.875rem; }
.x-logos img { height: 2.75rem; width: auto; max-width: 100%; align-self: flex-start; }
.x-logos p { margin: 0; color: var(--x-text); font-weight: 600; }
/* The founder's portrait, beside his biography on wide screens. */
.x-portrait { float: right; width: min(14rem, 40%); margin: 0.25rem 0 1rem 1.5rem; }
.x-prose h2 { clear: both; }
.x-portrait img { display: block; width: 100%; height: auto; border-radius: 1rem; }
/* A draft news article, not yet published. */
.x-draft { color: var(--x-teal-hi); font-weight: 600; }
.x-callout { padding: 1.25rem 1.5rem; border-radius: 1rem; border: 1px solid rgba(var(--x-teal-rgb), 0.35); background: rgba(var(--x-teal-rgb), 0.06); color: var(--x-text); }

/* ---------- Footer ---------- */
.x-footer { position: relative; z-index: 31; font-family: var(--x-sans); background: var(--x-ground-deep); border-top: 1px solid var(--x-line); color: var(--x-text-3); font-size: 0.9375rem; line-height: 1.6; }
.x-footer a { color: var(--x-text-2); text-decoration: none; }
.x-footer a:hover { color: var(--x-teal-hi); }
.x-footer__top { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.x-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.x-footer__brand img { width: 9rem; height: auto; }
.x-footer__tagline { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: #9AA3AF; }
.x-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem; }
.x-footer__h { margin-bottom: 0.875rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--x-text); }
.x-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.x-footer__note { display: block; font-size: 0.8125rem; color: var(--x-text-3); }
.x-footer__legal { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 1.75rem 2.5rem; border-top: 1px solid var(--x-line); font-size: 0.8438rem; color: var(--x-text-3); }
.x-footer__legal p { max-width: 62rem; }
@media (max-width: 720px) {
  .x-footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Page-specific helpers ---------- */
.x-glyph { width: 2.75rem; height: 2.75rem; color: var(--x-teal); }
.x-products-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--x-line); }
.x-products-foot .x-small { max-width: 40rem; }
.x-holding-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; max-width: 40rem; }
.x-lede a, .x-body a { color: var(--x-text); }
.x-divisions .x-card { min-height: 21rem; }
.x-mailto { font-size: clamp(1.25rem, 2.6vw, 1.875rem); font-weight: 550; color: var(--x-text); text-decoration: none; overflow-wrap: anywhere; }
.x-mailto:hover { color: var(--x-teal-hi); }
.x-404 { min-height: calc(100vh - 20rem); display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}