/* ==========================================================================
   Epsilon Delta site styles
   1. Tokens   2. Base   3. Layout   4. Components   5. Header & footer
   6. Home sections   7. Utilities
   One shared system: Manrope for all text, JetBrains Mono for data/URLs.
   Each product keeps its own accent (Gemini green, Orion indigo, Wizard orange).
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    /* Neutrals (slightly cool, from the Home board) */
    --ink: #111827;
    --ink-2: #374151;
    --muted: #4B5563;
    --subtle: #6B7280;
    --line: #E5E7EB;
    --line-soft: #EEF0F3;
    --bg: #FFFFFF;
    --bg-soft: #F9FAFB;

    /* Products */
    --gemini: #15803D;
    --gemini-ink: #166534;
    --gemini-soft: #F0FAF3;
    --orion: #4338CA;
    --orion-ink: #3730A3;
    --orion-soft: #EEF0FF;
    --wizard: #C2410C;
    --wizard-ink: #9A3412;
    --wizard-soft: #FFF4EE;

    /* Company brand (from the Epsilon Delta logo) */
    --brand: #B0207F;

    /* Status */
    --good: #15803D;
    --warn: #B45309;
    --bad: #B91C1C;

    /* Dark product panels (dashboard mockups) */
    --panel: #111827;
    --panel-2: #1F2937;
    --panel-text: #F9FAFB;
    --panel-muted: #9CA3AF;

    /* Type */
    --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
    --fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem);
    --fs-h3: 1.25rem;
    --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-xs: 0.8125rem;

    /* Shape and space */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --gutter: 24px;
    --container: 1240px;
    --section: clamp(56px, 4rem + 3vw, 96px);
    --focus: 0 0 0 3px rgba(67, 56, 202, 0.35);
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink-2); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul[class], ol[class], nav ul, .site-footer ul { list-style: none; }

.skip-link {
    position: absolute; left: 16px; top: -48px; z-index: 100;
    padding: 10px 16px; background: var(--ink); color: #FFF; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 16px; color: #FFF; }

/* 3. Layout ---------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.narrow { max-width: 760px; }
.section { padding-block: var(--section); }
.section--tight-top { padding-top: 0; }
.section--soft { background: var(--bg-soft); border-block: 1px solid var(--line-soft); }
.section--orion { background: var(--orion-soft); }

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 32px; }
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr));
    gap: 20px;
}
.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.split__text { flex: 1 1 380px; min-width: 0; }
.split__media { flex: 1 1 560px; min-width: 0; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions--center { justify-content: center; }

/* Type roles */
.display { font-size: var(--fs-display); line-height: 1.03; letter-spacing: -0.045em; font-weight: 800; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 800; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.body-lg { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }
.eyebrow { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* 4. Components ------------------------------------------------------------ */

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 24px;
    border: 1px solid transparent; border-radius: var(--radius);
    font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn--sm { min-height: 44px; padding: 10px 16px; font-size: var(--fs-small); border-radius: 10px; }
.btn--dark { background: var(--ink); color: #FFF; }
.btn--dark:hover { background: var(--ink-2); color: #FFF; }
.btn--outline { border-color: #D1D5DB; color: var(--ink); background: var(--bg); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.btn--gemini { background: var(--gemini); color: #FFF; }
.btn--gemini:hover { background: var(--gemini-ink); color: #FFF; }
.btn--orion { background: var(--orion); color: #FFF; }
.btn--orion:hover { background: var(--orion-ink); color: #FFF; }
.btn--wizard { background: var(--wizard); color: #FFF; }
.btn--wizard:hover { background: var(--wizard-ink); color: #FFF; }
.btn--light { background: #FFF; color: var(--ink); }
.btn--light:hover { background: #E5E7EB; color: var(--ink); }
.btn--ghost-dark { border-color: #4B5563; color: #FFF; }
.btn--ghost-dark:hover { border-color: #FFF; color: #FFF; }

/* Arrow links */
.link-arrow { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow::after { content: "→"; transition: transform 0.15s; }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--orion { color: var(--orion); }
.link-arrow--orion:hover { color: var(--orion-ink); }

/* Chips and badges */
.chip {
    display: inline-flex; align-items: center;
    padding: 6px 10px; border-radius: var(--radius-sm);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.3;
}
.chip--white { background: #FFF; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
    flex: 0 0 auto; min-width: 32px; text-align: center;
    padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
}
.badge--bad { background: #7F1D1D; color: #FECACA; }
.badge--warn { background: #78350F; color: #FDE68A; }
.badge--neutral { background: #374151; color: #E5E7EB; }

/* Status text colours */
.tone-good { color: var(--good); }
.tone-warn { color: var(--warn); }
.tone-bad { color: var(--bad); }
.tone-bad-on-dark { color: #FCA5A5; }
.tone-warn-on-dark { color: #FCD34D; }

/* Cards */
.card { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.card--flat { border-color: transparent; }
.card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

/* Dark dashboard panel (mockups of the product UI) */
.panel {
    background: var(--panel); color: var(--panel-text);
    border-radius: var(--radius-xl); padding: 24px;
    display: flex; flex-direction: column; gap: 14px;
}
.panel__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.panel__tile { background: var(--panel-2); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; }
.panel__label { font-size: var(--fs-xs); color: var(--panel-muted); }
.panel__value { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.2; }
.panel__list { background: var(--panel-2); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); }
.panel__list li { display: flex; gap: 10px; align-items: baseline; }
.panel__note { font-size: 0.75rem; color: var(--panel-muted); align-self: flex-end; }

/* 5. Header & footer ------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line-soft); background: var(--bg); }
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 72px; flex-wrap: wrap; }
.site-logo img { width: 160px; height: auto; }
.site-menu { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-nav a { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 0; font-size: 0.9375rem; font-weight: 700; }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }
.site-nav__hint { font-size: 0.75rem; font-weight: 600; color: var(--subtle); }
.site-header__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.menu-toggle {
    display: none; margin-left: auto; align-items: center; gap: 10px;
    min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }

@media (max-width: 1000px) {
    /* With JS, the menu collapses behind the toggle. Without JS it simply wraps below the logo. */
    .js .menu-toggle { display: inline-flex; }
    .js .site-menu { display: none; flex-basis: 100%; }
    .js .site-header.is-open .site-menu { display: flex; }
    .site-menu { flex-direction: column; align-items: stretch; padding-bottom: 20px; }
    .site-nav ul { flex-direction: column; gap: 0; }
    .site-nav li + li { border-top: 1px solid var(--line-soft); }
    .site-nav a { padding: 14px 0; width: 100%; }
    .site-nav a[aria-current="page"] { box-shadow: none; color: var(--brand); }
    .site-header__actions .btn { flex: 1 1 160px; }
}

.site-footer { border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; padding-block: 56px 32px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; grid-column: span 2; max-width: 360px; }
.site-footer__brand img { width: 150px; }
.site-footer__brand p { color: var(--muted); }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer__social a, .site-footer__col a { color: var(--muted); }
.site-footer__social a:hover, .site-footer__col a:hover { color: var(--ink); }
.site-footer__title { font-size: 0.9375rem; font-weight: 800; margin-bottom: 12px; }
.site-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer__base { padding-block: 20px 32px; border-top: 1px solid var(--line-soft); color: var(--subtle); }
@media (max-width: 560px) { .site-footer__brand { grid-column: auto; } }

/* 6. Home sections --------------------------------------------------------- */
.hero__inner {
    padding-block: clamp(56px, 3rem + 5vw, 96px) 56px;
    display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.hero .display { max-width: 1000px; }
.hero .lead { max-width: 760px; }
.hero .actions { justify-content: center; }

.product-card { border-radius: var(--radius-xl); padding: clamp(24px, 1rem + 1.5vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.product-card--gemini { background: var(--gemini-soft); --accent: var(--gemini); --accent-ink: var(--gemini-ink); }
.product-card--orion { background: var(--orion-soft); --accent: var(--orion); --accent-ink: var(--orion-ink); }
.product-card--wizard { background: var(--wizard-soft); --accent: var(--wizard); --accent-ink: var(--wizard-ink); }
.product-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.product-card__name { font-size: 1.625rem; font-weight: 800; color: var(--accent); }
.product-card--orion .product-card__name { letter-spacing: 0.06em; text-transform: uppercase; }
.product-card__head .chip { color: var(--accent-ink); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; }
.product-card__category { font-size: var(--fs-small); font-weight: 800; color: var(--accent-ink); margin-top: -8px; }
.product-card__title { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.2; font-weight: 800; }
.product-card__link { margin-top: auto; color: var(--accent); }
.product-card__link:hover { color: var(--accent-ink); }

.metric-row { background: #FFF; border-radius: 16px; padding: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center; }
.metric-row dt { font-size: 0.75rem; color: var(--muted); }
.metric-row dd { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.step-list { background: #FFF; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); }
.step-list li { display: flex; justify-content: space-between; gap: 12px; }

.logo-band { background: var(--bg-soft); border-block: 1px solid var(--line-soft); }
.logo-band__inner { padding-block: 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.logo-band__title { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.logo-band__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 48px; font-size: 1.25rem; font-weight: 800; color: var(--subtle); }

.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); overflow: hidden; }
.stat-band > div { padding: 32px; display: flex; flex-direction: column-reverse; box-shadow: -1px 0 0 var(--line-soft), 0 -1px 0 var(--line-soft); }
.stat-band dd { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.5rem); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-band dt { color: var(--muted); }

.quote { background: #FFF; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(24px, 1rem + 2vw, 40px); display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
.quote blockquote p { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; font-weight: 600; letter-spacing: -0.01em; }
.quote blockquote p::before { content: "“"; }
.quote blockquote p::after { content: "”"; }
.quote figcaption { color: var(--muted); font-size: 0.9375rem; }
.quote figcaption b { color: var(--ink); }

.post-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); transition: border-color 0.15s; }
.post-card:hover { border-color: var(--ink); color: var(--ink); }
.post-card__title { font-size: 1.1875rem; font-weight: 800; line-height: 1.35; }
.post-card .link-arrow { margin-top: auto; font-size: var(--fs-small); }

.cta-band { background: var(--ink); color: #FFF; border-radius: 28px; padding: clamp(40px, 2rem + 3vw, 64px) 32px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }

/* 7. Product pages (Gemini, Orion) ---------------------------------------- */

/* Product themes: set --accent once, every component below uses it. */
.theme-gemini { --accent: var(--gemini); --accent-ink: var(--gemini-ink); --accent-soft: var(--gemini-soft); }
.theme-orion { --accent: var(--orion); --accent-ink: var(--orion-ink); --accent-soft: var(--orion-soft); }
.theme-wizard { --accent: var(--wizard); --accent-ink: var(--wizard-ink); --accent-soft: var(--wizard-soft); }
.section--accent { background: var(--accent-soft, var(--bg-soft)); }

/* Two plain white sections in a row would double the gap. */
.section:not(.section--accent, .section--soft, .section--orion) + .section:not(.section--accent, .section--soft, .section--orion) { padding-top: 0; }

.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.mono { font-family: var(--mono); }
.fine-print { font-size: var(--fs-xs); color: var(--subtle); }
.eyebrow--accent, .eyebrow--gemini { color: var(--accent, var(--gemini)); }
.eyebrow--warn { color: var(--warn); }
.eyebrow--bad { color: var(--bad); }
.eyebrow--info { color: #1D4ED8; }
.h3--lg { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); letter-spacing: -0.02em; }
.link-arrow--accent { color: var(--accent); }
.link-arrow--accent:hover { color: var(--accent-ink); }

/* Status fills for bars */
.bg-good { background: #22C55E; }
.bg-warn { background: #F59E0B; }
.bg-bad { background: #EF4444; }
.bg-neutral { background: #9CA3AF; }
.bg-good-on-dark { background: #4ADE80; }
.bg-warn-on-dark { background: #F5B544; }
.bg-bad-on-dark { background: #F87171; }
.tone-good-on-dark { color: #4ADE80; }

/* Product page hero */
.page-hero .split { padding-block: clamp(48px, 2rem + 4vw, 88px); gap: 48px; }
.page-hero .split__text { flex: 1.35 1 520px; }
.page-hero .split__media { flex: 1 1 460px; }
.display--page { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.06; }
.inline-stats { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--line-soft); }
.inline-stats > div { display: flex; flex-direction: column-reverse; }
.inline-stats dd { font-size: 1.625rem; font-weight: 800; line-height: 1.2; }
.inline-stats dt { font-size: var(--fs-xs); color: var(--muted); }

/* Dark panel additions */
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--panel-muted); }
.panel__head b { color: var(--panel-text); font-size: var(--fs-small); }
.panel__kpis--4 { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 10px; }
.panel__kpis--4 .panel__tile { padding: 12px 14px; border-radius: var(--radius); }
.panel__value--sm { font-size: 1.625rem; }
.panel__box { background: var(--panel-2); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.panel__insight { background: #1E1B3A; border: 1px solid #3B2F6B; border-radius: var(--radius); padding: 12px 14px; font-size: var(--fs-small); line-height: 1.5; }
.panel__insight b { color: #C4B5FD; }
.attention { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-xs); }
.attention li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(60px, 1.4fr); gap: 10px; align-items: center; }
.attention .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bar list */
.bars { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); }
.bars__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 1.4fr) auto; gap: 12px; align-items: center; }
.bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__label.mono { font-size: var(--fs-xs); }
.bars__track { display: block; height: 10px; border-radius: 5px; background: #EEF0F3; overflow: hidden; }
.bars__track--dark { background: #374151; }
.bars__fill { display: block; height: 100%; border-radius: 5px; }
.bars__value { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }

/* Pulse change lists */
.change-list { display: flex; flex-direction: column; gap: 8px; }
.change-list__title { font-size: 1rem; font-weight: 800; }
.change-list__title--improved { color: var(--good); }
.change-list__title--degraded { color: var(--bad); }
.change-list__item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: #FFF; border: 1px solid var(--line-soft); font-size: var(--fs-small); }
.change-list__item--degraded { border-color: #FBD5D5; }
.change-list__item span { display: flex; flex-direction: column; }
.change-list__item small { font-size: var(--fs-xs); color: var(--muted); }
.change-list__delta { white-space: nowrap; font-variant-numeric: tabular-nums; }
.change-list__item--improved .change-list__delta { color: var(--good); }
.change-list__item--degraded .change-list__delta { color: var(--bad); }

/* Feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; }
.feature-card { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(20px, 1rem + 1vw, 28px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.feature-card--wide { grid-column: 1 / -1; }
.feature-card__text { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.feature-card__link { margin-top: auto; font-size: var(--fs-small); }

.frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 760px; }
.frames__frame { position: relative; height: 150px; padding: 8px 8px 26px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); display: flex; flex-direction: column; gap: 6px; }
.frames__frame.is-lcp { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.frames__bar { height: 10px; border-radius: 2px; background: #D1D5DB; }
.frames__hero { height: 44px; border-radius: 2px; background: #E5E7EB; }
.frames__hero.is-painted { background: #86D8A4; }
.frames__line { height: 8px; border-radius: 2px; background: #D1D5DB; }
.frames__time { position: absolute; left: 8px; bottom: 6px; font-size: 0.6875rem; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
@media (max-width: 560px) { .frames__frame { height: 110px; } .frames__time { font-size: 0.5625rem; } }

.phase-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.phase-row > div { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column-reverse; }
.phase-row dt { font-size: var(--fs-xs); color: var(--muted); }
.phase-row dd { font-size: 1.25rem; font-weight: 800; }

.heat-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.heat-grid__cell { height: 22px; border-radius: 3px; }
.heat-grid__cell--cold { background: #F1F2F4; }
.heat-grid__cell--warm { background: #FCD34D; }
.heat-grid__cell--hot { background: #F87171; }

.error-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.error-list .mono { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.error-list li > span:last-child { white-space: nowrap; color: var(--muted); }

/* Tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: var(--fs-small); text-align: left; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 8px; border-top: 1px solid var(--line-soft); }
.data-table thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: var(--fs-xs); }
.data-table tbody th { font-weight: 600; }

.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9375rem; text-align: left; }
.table-scroll:has(.compare-table) { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.compare-table th, .compare-table td { padding: 14px 20px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.compare-table thead th { border-top: 0; background: var(--bg-soft); color: var(--muted); font-weight: 600; }
.compare-table tbody th { font-weight: 700; }
.compare-table td { color: var(--muted); }
.compare-table .is-ours { color: var(--accent, var(--ink)); font-weight: 700; }
.compare-table td.is-ours { background: var(--accent-soft, transparent); }

/* Question explorer (tabs when JS runs; all panels stacked without it) */
.explorer { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.explorer__list { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.explorer__tab {
    text-align: left; font: inherit; cursor: pointer; min-height: 44px; padding: 12px 16px;
    border-radius: var(--radius); border: 1px solid var(--line); background: #FFF; color: var(--ink);
}
.explorer__tab:hover { border-color: var(--ink-2); }
.explorer__tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.explorer__q { display: block; font-weight: 700; }
.explorer__module { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.explorer__panels { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.explorer__panel { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(20px, 1rem + 1vw, 28px); display: flex; flex-direction: column; gap: 16px; }
.explorer__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.explorer__box { background: #FFF; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.js .explorer__panel:not(.is-active) { display: none; }
.js .explorer__q-inline { display: none; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 10px; }
.kpi-row > div { background: #FFF; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column-reverse; }
.kpi-row dt { font-size: var(--fs-xs); color: var(--muted); }
.kpi-row dd { font-size: 1.625rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.insight { background: #F3EEFD; color: #4C1D95; border-radius: var(--radius-sm); padding: 12px 14px; font-size: var(--fs-small); }

/* Screen grid (links to tour URLs) */
.screen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.screen-card { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--radius); transition: border-color 0.15s; }
.screen-card:hover { border-color: var(--accent, var(--ink)); color: var(--ink); }
.screen-card__title { font-size: 1.0625rem; font-weight: 800; }
.screen-card__text { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.screen-card__path { margin-top: auto; padding-top: 6px; font-size: 0.75rem; color: var(--accent, var(--ink)); }

/* Core Web Vitals cards */
.vital-card { border-color: transparent; gap: 12px; }
.vital-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.vital-card__head span { font-size: var(--fs-xs); color: var(--muted); }
.vital-card abbr { text-decoration: none; }
.vital-card__limits { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.75rem; }
.limit { padding: 4px 8px; border-radius: 6px; }
.limit--good { background: #DCFCE7; color: #166534; }
.limit--poor { background: #FEE2E2; color: #991B1B; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 22px; }
.faq__item summary { font-size: 1.0625rem; font-weight: 700; cursor: pointer; }
.faq__item p { margin-top: 10px; color: var(--muted); line-height: 1.6; }

/* Orion page components ---------------------------------------------------- */
.stack-xl { display: flex; flex-direction: column; gap: clamp(56px, 3rem + 3vw, 96px); }
.split--reverse { flex-direction: row-reverse; }
.split--top { align-items: flex-start; }
.chip--outline { border: 1px solid #C7CAF2; color: var(--accent-ink, var(--ink)); background: var(--bg); border-radius: 999px; }
.chip--soft { background: var(--accent-soft, var(--bg-soft)); }
.chip--bad { background: #FEE2E2; color: #991B1B; }

.card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.card--bordered { border-color: var(--line); }
.card--ai { background: #F5F3FF; border-color: #DDD6FE; }
.card--ai .h3 { color: #5B21B6; }
.card--ai p { color: #4C1D95; }
.card--span { grid-column: 1 / -1; }
.score-pill { font-weight: 800; font-variant-numeric: tabular-nums; }

.metric-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.metric-trio > div { display: flex; flex-direction: column-reverse; }
.metric-trio dt { font-size: 0.75rem; color: var(--muted); }
.metric-trio dd { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.row-list { display: flex; flex-direction: column; font-size: var(--fs-small); }
.row-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.row-list li:first-child { border-top: 0; }
.row-list b { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Hero app card + signals */
.app-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 18px 40px -24px rgba(17, 24, 39, 0.25); }
.app-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-card__score { display: flex; align-items: baseline; gap: 8px; }
.app-card__score b { font-size: 2.5rem; line-height: 1; color: var(--accent); }
.app-card__score small { font-size: var(--fs-xs); color: var(--good); font-weight: 700; }
.kpi-row--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-row--compact > div { padding: 12px; background: var(--bg-soft); border-color: transparent; }
.kpi-row--compact dd { font-size: 1.375rem; }
.mini-bars { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.mini-bars span { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px #C7CAF2; }
.mini-bars span:last-child { background: var(--accent); box-shadow: none; }
.signal-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; }
.signal { padding: 12px 14px; border-radius: var(--radius); font-size: var(--fs-xs); display: flex; flex-direction: column; gap: 2px; border: 1px solid; }
.signal b { font-size: var(--fs-small); }
.signal span { color: var(--muted); }
.signal--bad { background: #FEF2F2; border-color: #FECACA; }
.signal--bad b { color: var(--bad); }
.signal--warn { background: #FFFBEB; border-color: #FDE68A; }
.signal--warn b { color: var(--warn); }
.signal--ai { background: #F5F3FF; border-color: #DDD6FE; }
.signal--ai b { color: #5B21B6; }

/* Stacked bars (cold start phases, API split, frame share) */
.stacked-bar { display: flex; height: 32px; border-radius: var(--radius-sm); overflow: hidden; }
.stacked-bar--thin { height: 12px; border-radius: 6px; }
.stacked-bar__seg { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; color: #FFF; font-size: 0.75rem; font-weight: 700; padding-inline: 4px; }
.stacked-bar__seg--p1 { background: #C7CAF2; color: var(--ink); }
.stacked-bar__seg--p2 { background: #8B8FE8; }
.stacked-bar__seg--p3 { background: #6366F1; }
.stacked-bar__seg--p4 { background: #3730A3; }
.stacked-bar__seg--warm { background: #E8972B; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-xs); color: var(--muted); }
.legend li, .legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cluster-list { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-xs); }
.cluster-list li { display: flex; flex-direction: column; gap: 4px; }

.waterfall { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-xs); }
.waterfall li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr); gap: 12px; align-items: center; }
.waterfall__track { display: block; height: 14px; background: var(--bg-soft); border-radius: 4px; }
.waterfall__bar { display: block; height: 100%; border-radius: 4px; }
.waterfall__bar--orion { background: var(--orion); }
.waterfall__bar--warn { background: #F59E0B; }
.waterfall__bar--bad { background: #EF4444; }

.feature-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.timeline { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.timeline time { color: var(--subtle); margin-right: 6px; }
.timeline .tone-bad { color: var(--bad); }
.timeline .tone-warn { color: var(--warn); }
.heat-scale { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.75rem; color: var(--muted); }
.heat-scale__bar { width: 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #F1F2F4, #FCD34D, #F87171); }

.alert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.alert-grid li { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.alert-grid b { font-size: 0.9375rem; }
.alert-grid span { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }

.stat-band--cards dd { font-size: clamp(1.75rem, 1.4rem + 1vw, 2rem); }
.stat-band--cards dt { font-size: var(--fs-small); }

/* Acquisition feature card: channel table beside a "why it changed" box. */
.acq { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.acq__table { flex: 2 1 520px; min-width: 0; }
.acq__why { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-soft); }
.acq__head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-small); }
.acq__head span { color: var(--muted); }
.skin-gemini .acq__why { background: #0A0E0D; border-color: #1F2A26; border-radius: 10px; }

/* 7c. Wizard page (/wizard) ------------------------------------------------
   No design board: shared system, Wizard orange accent, Home-board step list. */
.wizard-hero { background: linear-gradient(180deg, var(--wizard-soft) 0%, var(--bg) 100%); }
.engage-card { background: var(--bg); border: 1px solid #F6D5C3; border-radius: var(--radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 18px 40px -24px rgba(154, 52, 18, 0.35); }
.engage-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.engage-card__head .chip { color: var(--wizard-ink); }
.engage-steps { display: flex; flex-direction: column; gap: 0; }
.engage-steps__item { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.engage-steps__item:first-child { border-top: 0; }
.engage-steps__item > span:nth-child(2) { display: flex; flex-direction: column; }
.engage-steps__item small { font-size: 0.75rem; color: var(--muted); }
.engage-steps__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #D1D5DB; background: var(--bg); }
.engage-steps__item.is-good .engage-steps__dot { background: var(--good); border-color: var(--good); }
.engage-steps__item.is-warn .engage-steps__dot { border-color: var(--wizard); box-shadow: inset 0 0 0 3px var(--bg); background: var(--wizard); }
.engage-steps__status { font-weight: 800; font-size: var(--fs-xs); color: var(--subtle); }
.engage-result { background: var(--wizard-soft); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.engage-result__title { font-size: var(--fs-xs); font-weight: 800; color: var(--wizard-ink); text-transform: uppercase; letter-spacing: 0.06em; }
.engage-result__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.engage-result__row > div { display: flex; flex-direction: column; }
.engage-result__row small { font-size: 0.75rem; color: var(--muted); }
.engage-result__row b { font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.engage-result__arrow { font-size: 1.25rem; color: var(--subtle); padding-bottom: 4px; }
.engage-result .engage-result__change { margin-left: auto; font-size: 1.125rem; color: var(--good); padding-bottom: 4px; }
.engage-result__bars { display: flex; flex-direction: column; gap: 6px; }
.engage-result__bars span { display: block; height: 8px; border-radius: 4px; background: #F2B8A0; }
.engage-result__bars span + span { background: var(--wizard); }

.step-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; counter-reset: none; }
.step-card { position: relative; background: var(--bg); border: 1px solid #F6D5C3; border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.step-card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.step-card .eyebrow { color: var(--accent); }
.step-card__num { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wizard); color: #FFF; font-weight: 800; }
.step-card__output { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: var(--fs-small) !important; }
.step-card__output b { display: block; color: var(--ink); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }

.fix-card { gap: 10px; }
.fix-card__tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--wizard-soft); color: var(--wizard-ink); font-size: 0.75rem; font-weight: 600; }

.report { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.report__main { flex: 2 1 520px; min-width: 0; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.report__side { flex: 1 1 300px; min-width: 0; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.report__main .acq__head { flex-wrap: wrap; }
.report__main .mono { font-size: var(--fs-xs); overflow-wrap: anywhere; }

.benefit-card { background: var(--wizard-soft); border-color: transparent; border-top: 3px solid var(--wizard); }

/* 7d. Pricing page (/pricing) ---------------------------------------------
   No design board: shared system; each product block uses its own theme. */
.pricing-hero { background: radial-gradient(120% 90% at 50% 0%, #FBF4F9 0%, var(--bg) 70%); border-bottom: 1px solid var(--line-soft); }
.pricing-hero__inner { align-items: center; text-align: center; padding-block: clamp(56px, 3rem + 4vw, 96px); gap: 20px; }
.pricing-hero .eyebrow { color: var(--brand); }
.pricing-hero .display { max-width: 900px; }
.pricing-hero .lead { max-width: 760px; }
.plan-jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.plan-jump__link { display: inline-flex; align-items: baseline; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); transition: border-color 0.15s; }
.plan-jump__link span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.plan-jump__link--gemini b { color: var(--gemini); }
.plan-jump__link--orion b { color: var(--orion); }
.plan-jump__link--wizard b { color: var(--wizard); }
.plan-jump__link:hover { border-color: var(--ink); }

.plan-section { scroll-margin-top: 16px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 20px; }
.plan-card { position: relative; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: clamp(24px, 1rem + 1.5vw, 36px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.plan-card--featured { border: 2px solid var(--accent); box-shadow: 0 24px 48px -32px rgba(17, 24, 39, 0.35); }
.plan-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan-card__type { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.plan-card__name { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; }
.plan-card__badge { padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #FFF; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.plan-card__summary { color: var(--muted); font-size: 1.0625rem; }
.plan-card__price { display: flex; flex-direction: column; padding-block: 16px; border-block: 1px solid var(--line-soft); }
.plan-card__price b { font-size: 1.5rem; letter-spacing: -0.02em; }
.plan-card__price span { font-size: var(--fs-small); color: var(--good); font-weight: 700; }
.plan-card__list { display: flex; flex-direction: column; gap: 12px; font-size: 0.9375rem; }
.plan-card__list li { position: relative; padding-left: 30px; }
.plan-card__list li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; }
.plan-card__list .is-in::before { content: "✓"; background: var(--accent-soft); color: var(--accent); }
.plan-card__list .is-out { color: var(--subtle); text-decoration: line-through; }
.plan-card__list .is-out::before { content: "—"; background: var(--bg-soft); color: var(--subtle); }
.plan-card__list .plan-card__base { padding-left: 0; font-weight: 800; }
.plan-card__actions { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.plan-card--wide { flex-direction: row; flex-wrap: wrap; gap: 32px 56px; border: 2px solid var(--accent); }
.plan-card__col { flex: 1 1 360px; min-width: 0; }
.plan-card--wide .plan-card__actions { margin-top: 0; }
.plan-stat { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-radius: var(--radius); background: var(--accent-soft); }
.plan-stat b { font-size: 2.5rem; line-height: 1; color: var(--accent); }
.plan-stat span { font-weight: 700; color: var(--accent-ink); }

.plan-compare { min-width: 520px; }
.plan-compare td { position: relative; text-align: center; width: 22%; font-size: 1.0625rem; font-weight: 800; }
.plan-compare thead th:not(:first-child) { text-align: center; }
.plan-compare .is-yes { color: var(--accent); }
.plan-compare .is-no { color: #C4C8CF; }
.plan-compare__group th { background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }

/* 7e. About page (/about) -------------------------------------------------
   No design board: shared system with the company brand colour. */
.eyebrow--brand { color: var(--brand); }
.about-hero { background: radial-gradient(90% 120% at 0% 0%, #FBF4F9 0%, var(--bg) 60%); }
.about-hero .split { padding-block: clamp(48px, 2rem + 4vw, 88px); gap: 48px; }
.about-hero .split__text { flex: 1.4 1 520px; }
.about-hero .split__media { flex: 1 1 340px; }
.about-facts { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 22px; box-shadow: 0 18px 40px -28px rgba(176, 32, 127, 0.35); }
.about-facts__mission p { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; }
.about-facts__mission p::before { content: "“"; color: var(--brand); }
.about-facts__mission p::after { content: "”"; color: var(--brand); }
.about-facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.about-facts__list > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.about-facts__list dt { font-size: var(--fs-xs); color: var(--muted); }
.about-facts__list dd { font-weight: 800; }
.about-stats dd { color: var(--brand); }

.person { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: clamp(24px, 1rem + 1.5vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.person__head { display: flex; align-items: center; gap: 20px; }
.person__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 4px #FBF4F9, 0 0 0 5px #EBC6DF; }
.person__role { color: var(--brand); font-weight: 700; font-size: var(--fs-small); }
.person__bio { color: var(--muted); line-height: 1.65; }
.person__quote { margin-top: auto; padding: 14px 18px; border-left: 3px solid var(--brand); background: #FBF4F9; border-radius: 0 var(--radius) var(--radius) 0; }
.person__quote p { font-weight: 700; }
.person__quote p::before { content: "“"; }
.person__quote p::after { content: "”"; }

.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.journey__year { position: relative; padding: 22px 22px 22px 24px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 12px; }
.journey__year::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.journey__when { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.journey__when b { font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1; }
.journey__when span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.journey__items { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); color: var(--muted); }
.journey__items li { position: relative; padding-left: 16px; }
.journey__items li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: #D9A3C7; }

.about-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.about-logos li { flex: 1 1 220px; display: flex; align-items: center; justify-content: center; height: 120px; padding: 20px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.about-logos img { max-height: 72px; width: auto; }
.press-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.15s; }
.press-card:hover { border-color: var(--ink); color: var(--ink); }
.press-card img { width: 100%; height: 220px; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line-soft); }
.press-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.press-card__source { font-size: 0.75rem; color: var(--subtle); }
.press-card .link-arrow { margin-top: 4px; font-size: var(--fs-small); color: var(--brand); }

/* 7f. Contact (/contact) and legal pages (/privacy-policy) ----------------- */
.contact-hero { background: radial-gradient(90% 120% at 0% 0%, #FBF4F9 0%, var(--bg) 60%); }
.contact-hero .container { padding-block: clamp(48px, 2rem + 4vw, 88px) 40px; }
.contact-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.contact-form { flex: 1.6 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 1rem + 1.5vw, 36px); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); box-shadow: 0 18px 40px -30px rgba(17, 24, 39, 0.3); }
.contact-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-box { padding: 24px; border-radius: var(--radius-lg); background: var(--bg-soft); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 12px; }
.contact-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 12px; font-size: 0.9375rem; color: var(--muted); }
.contact-steps li { counter-increment: step; position: relative; padding-left: 36px; }
.contact-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #FFF; font-size: 0.75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.contact-list { display: flex; flex-direction: column; gap: 10px; }
.contact-list > div { display: flex; flex-direction: column; }
.contact-list dt { font-size: var(--fs-xs); color: var(--muted); }
.contact-list a { font-weight: 700; color: var(--brand); overflow-wrap: anywhere; }
.contact-address { font-style: normal; color: var(--muted); line-height: 1.6; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 22px; }
.field__label { font-weight: 700; font-size: 0.9375rem; padding: 0; }
.field__req { font-weight: 600; font-size: var(--fs-xs); color: var(--subtle); margin-left: 4px; }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.field input, .field select, .field textarea {
    width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; color: var(--ink);
    background: var(--bg); border: 1px solid #D1D5DB; border-radius: var(--radius);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(176, 32, 127, 0.18); }
.field [aria-invalid="true"] { border-color: var(--bad); }
.field__error { font-size: var(--fs-small); color: var(--bad); font-weight: 600; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid #D1D5DB; border-radius: 999px; font-size: var(--fs-small); font-weight: 700; }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFF; }
.choice input:focus-visible + span { box-shadow: var(--focus); }
.form-alert { padding: 16px 18px; border-radius: var(--radius); background: #FEF2F2; border: 1px solid #FECACA; color: #7F1D1D; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); }
.form-alert ul { list-style: disc; padding-left: 20px; }
.form-alert a { text-decoration: underline; }
.contact-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.contact-form__submit a { text-decoration: underline; }

.legal__layout { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 760px); gap: 24px 64px; padding-block: clamp(48px, 2rem + 4vw, 88px); }
.legal__head { grid-column: 1 / -1; max-width: 760px; }
.legal__toc { position: sticky; top: 24px; align-self: start; font-size: var(--fs-small); }
.legal__toc-title { font-weight: 800; margin-bottom: 10px; }
.legal__toc ol { list-style: none; display: flex; flex-direction: column; gap: 8px; border-left: 2px solid var(--line-soft); padding-left: 14px; }
.legal__toc a { color: var(--muted); }
.legal__toc a:hover { color: var(--brand); }
.legal__body { display: flex; flex-direction: column; gap: 16px; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.legal__body section { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; scroll-margin-top: 16px; }
.legal__body h2 { font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink); }
@media (max-width: 800px) {
    .legal__layout { grid-template-columns: minmax(0, 1fr); }
    .legal__toc { position: static; }
}

/* 7b. Page skins ------------------------------------------------------------
   A content file can set 'skin' => 'gemini' | 'orion'. The layout then adds
   body.skin-<name> and loads that board's fonts. Each skin first swaps the
   tokens (so most components follow automatically), then restyles the few
   components that hard-code light colours.
   ------------------------------------------------------------------------- */

/* Gemini: board A "Command Center". Dark, Geist, mint accent. */
.skin-gemini {
    --ink: #E8EEEA; --ink-2: #C9D3CE; --muted: #9AA8A1; --subtle: #7E8C85;
    --line: #2B3A34; --line-soft: #1F2A26; --bg: #0A0E0D; --bg-soft: #121816;
    --gemini: #4ADE80; --gemini-ink: #86EFAC; --gemini-soft: #0F1512;
    --good: #4ADE80; --warn: #F5B544; --bad: #F87171;
    --panel: #121816; --panel-2: #0A0E0D; --panel-text: #E8EEEA; --panel-muted: #9AA8A1;
    --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --focus: 0 0 0 3px rgba(74, 222, 128, 0.45);
    background: #0A0E0D; color: var(--ink);
}
.skin-gemini a:hover { color: #86EFAC; }
.skin-gemini .display, .skin-gemini .h2, .skin-gemini .h3 { font-weight: 600; }
.skin-gemini .display--page { font-size: clamp(2.5rem, 1.3rem + 3.2vw, 3.75rem); letter-spacing: -0.035em; line-height: 1.03; }
.skin-gemini .h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); letter-spacing: -0.03em; }
.skin-gemini .lead { color: #9AA8A1; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.skin-gemini .body-lg { color: #9AA8A1; }
.skin-gemini .eyebrow { font-weight: 500; letter-spacing: 0.08em; }
.skin-gemini .section .eyebrow, .skin-gemini .feature-card .eyebrow { font-family: var(--mono); letter-spacing: 0.02em; }
.skin-gemini .eyebrow--info { color: #93C5FD; }

/* Header and footer go dark with the page. */
.skin-gemini .site-header { background: #0A0E0D; border-color: #1F2A26; }
.skin-gemini .site-nav a { color: #C9D3CE; font-weight: 500; }
.skin-gemini .site-nav a:hover { color: #E8EEEA; }
.skin-gemini .site-nav a[aria-current="page"] { color: #E8EEEA; box-shadow: inset 0 -2px 0 #4ADE80; }
.skin-gemini .site-nav__hint { color: #7E8C85; font-weight: 500; }
.skin-gemini .menu-toggle { background: #121816; border-color: #2B3A34; color: #E8EEEA; }
.skin-gemini .site-footer { background: #0A0E0D; }

/* Buttons: mint with dark text, 10px corners. */
.skin-gemini .btn { border-radius: 10px; font-weight: 600; }
.skin-gemini .btn--gemini, .skin-gemini .btn--dark { background: #4ADE80; color: #0A0E0D; }
.skin-gemini .btn--gemini:hover, .skin-gemini .btn--dark:hover { background: #86EFAC; color: #0A0E0D; }
.skin-gemini .btn--outline { background: transparent; border-color: #2B3A34; color: #E8EEEA; }
.skin-gemini .btn--outline:hover { border-color: #4ADE80; color: #E8EEEA; }

/* Surfaces: #121816 cards on #0A0E0D, inner tiles back to #0A0E0D. */
.skin-gemini .section--accent { background: #0F1512; border-block: 1px solid #1F2A26; }
.skin-gemini .inline-stats dd { font-weight: 600; }
.skin-gemini .panel { background: #121816; border: 1px solid #1F2A26; border-radius: 16px; padding: 20px; }
.skin-gemini .panel__tile, .skin-gemini .panel__box { background: #0A0E0D; border: 1px solid #1F2A26; border-radius: 10px; }
.skin-gemini .panel__value { font-weight: 600; }
.skin-gemini .panel__kpis--4 { grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); }
.skin-gemini .bg-good { background: #4ADE80; }
.skin-gemini .bg-warn { background: #F5B544; }
.skin-gemini .bg-bad { background: #F87171; }
.skin-gemini .bg-neutral { background: #5B6B64; }
.skin-gemini .panel__insight, .skin-gemini .insight { background: #17132B; border: 1px solid #3B2F6B; color: #E8EEEA; border-radius: 10px; }
.skin-gemini .panel__insight b, .skin-gemini .insight b { color: #C4B5FD; }
.skin-gemini .bars__track, .skin-gemini .bars__track--dark { background: #1F2A26; }
.skin-gemini .change-list__title { font-weight: 600; }
.skin-gemini .change-list__item { background: #121816; border-color: #1F2A26; border-radius: 10px; }
.skin-gemini .change-list__item--degraded { border-color: #4A2525; }
.skin-gemini .feature-card { background: #121816; border-color: #1F2A26; border-radius: 16px; }
.skin-gemini .feature-card__text { color: #9AA8A1; }
.skin-gemini .frames__frame { background: #0A0E0D; border-color: #1F2A26; border-radius: 6px; }
.skin-gemini .frames__frame.is-lcp { border-color: #4ADE80; box-shadow: none; }
.skin-gemini .frames__bar, .skin-gemini .frames__line { background: #2B3A34; }
.skin-gemini .frames__hero { background: #1F2A26; }
.skin-gemini .frames__hero.is-painted { background: #2E5B43; }
.skin-gemini .phase-row > div { background: #0A0E0D; }
.skin-gemini .phase-row dd { font-weight: 500; }
.skin-gemini .heat-grid__cell--cold { background: #1F2A26; }
.skin-gemini .heat-grid__cell--warm { background: #F5B544; }
.skin-gemini .heat-scale__bar { background: linear-gradient(90deg, #1F2A26, #F5B544, #F87171); }
.skin-gemini .data-table thead th { font-weight: 500; }
.skin-gemini .explorer__tab { background: #121816; border-color: #1F2A26; color: #E8EEEA; }
.skin-gemini .explorer__tab:hover { border-color: #2B3A34; }
.skin-gemini .explorer__tab[aria-selected="true"] { background: #16251E; border-color: #4ADE80; box-shadow: none; }
.skin-gemini .explorer__q { font-weight: 600; }
.skin-gemini .explorer__panel { background: #121816; border-color: #1F2A26; border-radius: 16px; }
.skin-gemini .explorer__box, .skin-gemini .kpi-row > div { background: #0A0E0D; border-color: #1F2A26; border-radius: 10px; }
.skin-gemini .kpi-row dd { font-weight: 600; }
.skin-gemini .screen-card { background: #121816; border-color: #1F2A26; border-radius: 14px; }
.skin-gemini .screen-card:hover { border-color: #4ADE80; color: #E8EEEA; }
.skin-gemini .screen-card__title { font-weight: 600; }
.skin-gemini .card { background: #121816; border-color: #1F2A26; border-radius: 14px; }
.skin-gemini .card p { color: #C9D3CE; }
.skin-gemini .limit--good { background: #12301F; color: #4ADE80; }
.skin-gemini .limit--poor { background: #3A1717; color: #F87171; }
.skin-gemini .compare-table td.is-ours { background: transparent; color: #4ADE80; font-weight: 500; }
.skin-gemini .compare-table thead th.is-ours { color: #4ADE80; }
.skin-gemini .compare-table tbody th { font-weight: 500; }
.skin-gemini .faq__item { background: #121816; border-color: #1F2A26; border-radius: 14px; }
.skin-gemini .faq__item summary { font-weight: 600; }
.skin-gemini .faq__item p { color: #C9D3CE; }

/* Closing band: solid mint, title left, buttons right. */
.skin-gemini .cta-band { background: #4ADE80; color: #0A0E0D; border-radius: 20px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; padding: clamp(32px, 1.5rem + 3vw, 56px); }
.skin-gemini .cta-band .h2 { max-width: 620px; }
.skin-gemini .cta-band .actions--center { justify-content: flex-start; }
.skin-gemini .cta-band .btn--gemini { background: #0A0E0D; color: #E8EEEA; }
.skin-gemini .cta-band .btn--gemini:hover { background: #121816; color: #FFF; }
.skin-gemini .cta-band .btn--ghost-dark { border-color: #0A0E0D; color: #0A0E0D; }
.skin-gemini .cta-band .btn--ghost-dark:hover { background: rgba(10, 14, 13, 0.08); color: #0A0E0D; }

/* Orion: board C "Mobile Vitals". Sora, lavender page, navy hero. */
.skin-orion {
    --ink: #14163A; --ink-2: #2A2D5C; --muted: #4B4F7A; --subtle: #6B6F98;
    --line: #E2E3F3; --line-soft: #E2E3F3; --bg: #FFFFFF; --bg-soft: #F0F0FA;
    --orion: #4F46E5; --orion-ink: #4338CA; --orion-soft: #EEF0FF;
    --good: #0F7A55; --warn: #B45309; --bad: #B42318;
    --panel: #0E1033; --panel-2: #1B1E4B; --panel-text: #EEF0FF; --panel-muted: #B4B8E8;
    --font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #F5F5FB; color: var(--ink);
}
.skin-orion .display, .skin-orion .h2, .skin-orion .h3 { font-weight: 700; }
.skin-orion .display--page { font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.375rem); letter-spacing: -0.035em; }
.skin-orion .h2 { font-size: clamp(1.875rem, 1.3rem + 1.7vw, 2.625rem); letter-spacing: -0.03em; }
.skin-orion .eyebrow--accent { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; color: #4338CA; }
.skin-orion .link-arrow--accent { color: #4338CA; }
/* Pages without a band would double up section padding. */
.skin-orion .section:not(.section--soft) + .section:not(.section--soft) { padding-top: 0; }
.skin-orion .section--accent { background: transparent; }
.skin-orion .section--soft { background: #FFFFFF; border-block: 1px solid #E2E3F3; }

/* Header and hero share one navy band. */
.skin-orion .site-header { background: #0E1033; border-color: #23265A; }
.skin-orion .site-nav a { color: #C7CAF2; font-weight: 500; }
.skin-orion .site-nav a:hover { color: #FFF; }
.skin-orion .site-nav a[aria-current="page"] { color: #FFF; box-shadow: inset 0 -2px 0 #818CF8; }
.skin-orion .site-nav__hint { color: #8C90C8; font-weight: 500; }
.skin-orion .site-nav li + li { border-color: #23265A; }
.skin-orion .menu-toggle { background: #1B1E4B; border-color: #343873; color: #EEF0FF; }
.skin-orion .site-header .btn--outline { background: transparent; border-color: #343873; color: #EEF0FF; }
.skin-orion .site-header .btn--outline:hover { border-color: #C7CAF2; color: #FFF; }
.skin-orion .site-header .btn--dark { background: #4F46E5; color: #FFF; }
.skin-orion .site-header .btn--dark:hover { background: #4338CA; color: #FFF; }

.skin-orion .btn { border-radius: 10px; font-weight: 600; }
.skin-orion .btn--orion { background: #4F46E5; }
.skin-orion .btn--orion:hover { background: #4338CA; }

.skin-orion .page-hero { background: #0E1033; color: #EEF0FF; }
.skin-orion .page-hero .split { padding-block: clamp(40px, 2rem + 2vw, 56px) clamp(56px, 3rem + 3vw, 88px); }
.skin-orion .page-hero .lead { color: #B4B8E8; }
.skin-orion .page-hero .chip--outline { background: transparent; border-color: #343873; color: #EEF0FF; font-weight: 500; }
.skin-orion .page-hero .btn--outline { background: transparent; border-color: #343873; color: #EEF0FF; }
.skin-orion .page-hero .btn--outline:hover { border-color: #C7CAF2; color: #FFF; }
.skin-orion .page-hero .inline-stats { border-color: #23265A; }
.skin-orion .page-hero .inline-stats dt { color: #B4B8E8; }
.skin-orion .page-hero .inline-stats dd { font-weight: 700; }

/* Hero visual: the app card becomes a phone, signals stack beside it. */
.skin-orion .page-hero .split__media { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.skin-orion .app-card { flex: none; width: 260px; height: 500px; border-radius: 38px; background: #1B1E4B; border: 8px solid #2A2E66; padding: 20px 14px; gap: 10px; color: #EEF0FF; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.skin-orion .app-card__head { flex-direction: column; align-items: stretch; gap: 10px; font-size: var(--fs-small); }
.skin-orion .app-card__score { flex-direction: column; align-items: center; gap: 2px; background: #0E1033; border-radius: 14px; padding: 16px; }
.skin-orion .app-card__score b { font-size: 2.375rem; color: #EEF0FF; }
.skin-orion .app-card__score small { font-size: 0.6875rem; color: #B4B8E8; font-weight: 500; }
.skin-orion .app-card .kpi-row--compact { gap: 8px; }
.skin-orion .app-card .kpi-row--compact > div { background: #0E1033; border: 0; border-radius: 10px; padding: 10px; }
.skin-orion .app-card .kpi-row dt { font-size: 0.625rem; color: #B4B8E8; }
.skin-orion .app-card .kpi-row dd { font-size: 1rem; font-weight: 700; color: #EEF0FF; }
.skin-orion .app-card .tone-warn { color: #FBBF24; }
.skin-orion .app-card .tone-bad { color: #FCA5A5; }
.skin-orion .mini-bars { flex: 1 1 0; min-height: 0; height: auto; background: #0E1033; border-radius: 10px; padding: 10px; gap: 5px; }
.skin-orion .mini-bars span { background: #6366F1; box-shadow: none; border-radius: 2px; }
.skin-orion .mini-bars span:last-child { background: #F87171; }
.skin-orion .signal-list { flex: 1 1 200px; max-width: 250px; display: flex; flex-direction: column; gap: 10px; }
.skin-orion .signal { background: #FFF; border: 0; border-radius: 12px; padding: 14px; color: #14163A; font-size: 0.8125rem; }
.skin-orion .signal span { color: #14163A; }
.skin-orion .signal--ai b { color: #4338CA; }

/* Cards and the pieces inside them. */
.skin-orion .card, .skin-orion .feature-card, .skin-orion .screen-card { background: #FFF; border-color: #E2E3F3; border-radius: 16px; }
.skin-orion .screen-card { border-radius: 14px; }
.skin-orion .screen-card:hover { border-color: #4338CA; }
.skin-orion .screen-card__title { font-weight: 700; }
.skin-orion .screen-card__path { color: #4338CA; }
.skin-orion .card--ai { background: #F3EEFD; border-color: #DCCFF8; }
.skin-orion .card__head .score-pill { padding: 4px 10px; border-radius: 8px; background: #EEF0FF; color: #312E81; font-size: 0.8125rem; font-weight: 600; }
.skin-orion .metric-trio dd { font-weight: 700; color: #14163A; }
.skin-orion .row-list li { border-color: #EEEEF8; }
.skin-orion .card--bordered .h3.mono { font-size: 1.125rem; }
.skin-orion .stacked-bar { height: 40px; }
.skin-orion .stacked-bar--thin { height: 12px; }
.skin-orion .stacked-bar__seg--p1 { background: #A5A8F0; color: #FFF; }
.skin-orion .stacked-bar__seg--p2 { background: #8184E8; }
.skin-orion #api .stacked-bar__seg--p2 { background: #B4560B; }
.skin-orion .insight { background: #EEF0FF; color: #312E81; border-radius: 10px; font-size: 0.9375rem; }
.skin-orion .chip--bad { background: #FDECEC; color: #912018; }
.skin-orion .chip--soft { background: #F0F0FA; }

/* Dark navy panels: crash list and the network waterfall. */
.skin-orion .panel { border-radius: 18px; }
.skin-orion .panel__tile { background: #1B1E4B; border-radius: 10px; text-align: center; }
.skin-orion .panel__value { font-weight: 700; }
.skin-orion .tone-bad-on-dark { color: #FCA5A5; }
.skin-orion .tone-warn-on-dark { color: #FDE68A; }
.skin-orion .panel__list { background: transparent; padding: 0; }
.skin-orion .panel__list .mono { color: #C7CAF2; }
.skin-orion #api .card--span { background: #0E1033; border-color: #0E1033; color: #EEF0FF; }
.skin-orion #api .card--span p { color: #C7CAF2; }
.skin-orion #api .card--span .fine-print { color: #B4B8E8; }
.skin-orion #api .waterfall__track { background: #1B1E4B; }
.skin-orion #api .waterfall__bar--orion { background: #818CF8; }
.skin-orion #api .waterfall__bar--warn { background: #5EEAD4; }
.skin-orion #api .waterfall__bar--bad { background: #F87171; }

/* Light lavender mockups in the "everything else" grid. */
.skin-orion .frames__frame { background: #F0F0FA; border-color: #E2E3F3; height: 96px; }
.skin-orion .frames__frame.is-lcp { border-color: #4338CA; box-shadow: 0 0 0 1px #4338CA; }
.skin-orion .frames__bar, .skin-orion .frames__line { background: #C7CAF2; }
.skin-orion .frames__hero { background: #DADBF7; height: 22px; }
.skin-orion .frames__hero.is-painted { background: #A5A8F0; }
.skin-orion .heat-grid__cell--cold { background: #F0F0FA; }
.skin-orion .heat-grid__cell--warm { background: #F5B544; }
.skin-orion .heat-grid__cell--hot { background: #E5484D; }
.skin-orion .heat-scale__bar { background: linear-gradient(90deg, #B7E4B0, #F5B544, #E5484D); }
.skin-orion .alert-grid li { background: #F5F5FB; border: 0; border-radius: 12px; }

.skin-orion .table-scroll:has(.compare-table) { background: #FFF; border-color: #E2E3F3; border-radius: 18px; }
.skin-orion .compare-table thead th { background: #F0F0FA; color: #14163A; font-weight: 500; }
.skin-orion .compare-table thead th.is-ours { color: #4338CA; font-weight: 700; }
.skin-orion .compare-table td.is-ours { background: transparent; color: #3730A3; font-weight: 600; }
.skin-orion .compare-table tbody th { font-weight: 500; }
.skin-orion .stat-band--cards { border: 0; border-radius: 0; overflow: visible; gap: 14px; }
.skin-orion .stat-band--cards > div { background: #FFF; border: 1px solid #E2E3F3; border-radius: 16px; box-shadow: none; padding: 22px; }
.skin-orion .stat-band--cards dd { font-weight: 700; }
.skin-orion .faq__item { background: #FFF; border-color: #E2E3F3; border-radius: 14px; }

/* Closing band: navy, title left, buttons right. */
.skin-orion .cta-band { background: #0E1033; color: #EEF0FF; border-radius: 24px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; padding: clamp(32px, 1.5rem + 3vw, 64px); }
.skin-orion .cta-band .h2 { max-width: 640px; }
.skin-orion .cta-band .actions--center { justify-content: flex-start; }
.skin-orion .cta-band .btn--ghost-dark { border-color: #343873; color: #EEF0FF; }
.skin-orion .cta-band .btn--ghost-dark:hover { border-color: #C7CAF2; color: #FFF; }

/* 8. Product tour (/gemini/<screen>, /orion/<screen>) ---------------------- */
/* Page shell: intro, the sample-dashboard frame, then answers below it. */
.tour-intro { padding-block: clamp(32px, 2rem + 1.5vw, 56px) 28px; }
.tour-intro__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.tour-intro__title { max-width: 22ch; }
.tour-intro__title:focus { outline: none; }

.breadcrumb ol, .tour-menu ol, .ttimeline { list-style: none; padding: 0; margin: 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); color: var(--subtle); }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

.answer-box { max-width: 820px; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); padding: 16px 20px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; }

.tour-switch { display: inline-flex; padding: 4px; gap: 4px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; }
.tour-switch__link { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; align-items: center; padding: 6px 16px; border-radius: 999px; font-weight: 800; font-size: var(--fs-small); color: var(--muted); }
.tour-switch__link small { font-weight: 600; font-size: 0.75rem; color: var(--subtle); }
.tour-switch__link[aria-current] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12); }
.tour-switch__link--gemini[aria-current] { color: var(--gemini); }
.tour-switch__link--orion[aria-current] { color: var(--orion); }

/* The browser-like frame around the sample dashboard. */
.tour-stage { padding-bottom: 8px; }
.tour-stage__note { margin-top: 12px; }
.tour-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #F6F7F6; box-shadow: 0 24px 48px -24px rgba(17, 24, 39, 0.25); }
.tour-frame__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #FFF; border-bottom: 1px solid var(--line); }
.tour-frame__bar > i { width: 10px; height: 10px; border-radius: 50%; background: #E5E7EB; }
.tour-frame__url { margin-left: 10px; padding: 4px 12px; border-radius: 6px; background: var(--bg-soft); font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tour-frame__body { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 640px; }

.tour-menu { background: #FFF; border-right: 1px solid var(--line); padding: 18px 12px; }
.tour-menu__label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); padding: 0 10px 10px; }
.tour-menu ol { display: flex; flex-direction: column; gap: 2px; }
.tour-menu a { display: block; padding: 9px 10px; border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.tour-menu a:hover { background: var(--bg-soft); color: var(--ink); }
.tour-menu a[aria-current] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; box-shadow: inset 3px 0 0 var(--accent); }

.tour-panel { padding: clamp(16px, 0.5rem + 1.5vw, 28px); display: flex; flex-direction: column; gap: 16px; min-width: 0; transition: opacity 0.15s; }
.tour.is-loading .tour-panel { opacity: 0.55; }
.tour-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tour-panel__title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.tour-panel__title span { font-size: var(--fs-small); font-weight: 600; color: var(--subtle); letter-spacing: 0; }
.tour-panel__q { font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }
.tour-filters { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.75rem; }
.tour-filters li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #FFF; color: var(--muted); font-weight: 600; }
.tour-filters .tour-filters__sample { border-color: transparent; background: #FEF3C7; color: #92400E; font-weight: 800; }

/* KPI strip with optional sparklines. */
.tkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.tkpi { background: #FFF; border: 1px solid #E7EAE8; border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tkpi dt { font-size: 0.75rem; color: var(--subtle); font-weight: 600; }
.tkpi__value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkpi__value small { font-size: 0.75rem; font-weight: 600; color: var(--subtle); letter-spacing: 0; }
.tkpi__delta { font-size: 0.75rem; font-weight: 700; }
.tkpi__spark svg { display: block; width: 100%; height: 28px; margin-top: 6px; }

.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchips li { font-size: 0.75rem; font-weight: 700; padding: 5px 10px; border: 1px solid; border-radius: 999px; }

/* Cards: two columns, wide cards span both. */
.tcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tcard { background: #FFF; border: 1px solid #E7EAE8; border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; color: #171C1A; }
.tcard--wide { grid-column: 1 / -1; }
.tcard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tcard__title { font-size: 0.9375rem; font-weight: 800; }
.tcard__sub { font-size: 0.75rem; color: #7A8681; }
.tcard__right { margin-left: auto; font-size: 0.75rem; font-weight: 700; }
.tcard__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.75rem; color: #5C6762; }
.tcard__legend li { display: inline-flex; align-items: center; gap: 6px; }
.tcard__legend i { width: 10px; height: 10px; border-radius: 3px; }
.tnote { font-size: 0.75rem; color: #5C6762; line-height: 1.5; padding: 8px 10px; background: #F6F7F6; border-radius: var(--radius-sm); }
.tnote--plain { background: none; padding: 0; text-align: center; }

.tline__plot { position: relative; background: linear-gradient(#F1F3F2 1px, transparent 1px) 0 0 / 100% 25%; border-bottom: 1px solid #E7EAE8; }
.tline__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tline__band { position: absolute; left: 0; right: 0; }
.tline__dot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #FFF; }
.tline__x { display: flex; justify-content: space-between; font-size: 0.6875rem; color: #7A8681; margin-top: 6px; }
.tdist { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tdist__bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.tdist__labels { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: 0.6875rem; font-weight: 700; }

.tbars { display: flex; flex-direction: column; gap: 12px; }
.tbars li { display: flex; flex-direction: column; gap: 5px; }
.tbars__top { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8125rem; }
.tbars__label { color: #3D4743; min-width: 0; overflow-wrap: anywhere; }
.tbars__label.mono { font-size: 0.75rem; }
.tbars__top b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbars__track { display: flex; height: 8px; border-radius: 4px; background: #F1F3F2; overflow: hidden; }
.tbars__sub { font-size: 0.6875rem; color: #7A8681; }

.tstack { display: flex; flex-direction: column; gap: 10px; }
.tstack__bar { display: flex; height: 30px; border-radius: var(--radius-sm); overflow: hidden; }
.tstack__bar span { display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; }

.tdonut { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.tdonut__ring { position: relative; width: 150px; flex: none; }
.tdonut__ring svg { display: block; width: 100%; }
.tdonut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tdonut__center b { font-size: 1.375rem; font-weight: 800; }
.tdonut__center span { font-size: 0.6875rem; color: #7A8681; }
.tdonut__list { flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; font-size: 0.8125rem; }
.tdonut__list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.tdonut__list i { width: 10px; height: 10px; border-radius: 3px; }

.ttable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ttable th { text-align: left; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #7A8681; padding: 8px 10px; border-bottom: 1px solid #E7EAE8; white-space: nowrap; }
.ttable td { padding: 9px 10px; border-bottom: 1px solid #F1F3F2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ttable tr:last-child td { border-bottom: 0; }

.tsnap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.tsnap__item { border: 1px solid #E7EAE8; border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tsnap__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.875rem; }
.tsnap__head > span { font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.tsnap__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tsnap__grid > div { display: flex; flex-direction: column; }
.tsnap__value { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tsnap__grid dt { font-size: 0.6875rem; color: #7A8681; order: 3; }
.tsnap__delta { font-size: 0.6875rem; font-weight: 700; }
.tsnap__foot { font-size: 0.6875rem; color: #7A8681; }
.tversion__date { font-size: 0.75rem; color: #7A8681; background: none !important; font-weight: 600 !important; }
.tversion__app { font-size: 0.75rem; color: #5C6762; }
.tversion ul { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; }
.tversion li { display: flex; justify-content: space-between; gap: 8px; }

.ttile__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ttile__head > div:first-child { display: flex; flex-direction: column; min-width: 0; font-size: 0.875rem; }
.ttile__head > div:first-child span { font-size: 0.75rem; color: #7A8681; }
.ttile__ring { position: relative; width: 54px; flex: none; }
.ttile__ring svg { display: block; width: 100%; }
.ttile__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.875rem; font-weight: 800; }
.ttile__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ttile__metrics > div { display: flex; flex-direction: column; padding: 6px 8px; border-radius: var(--radius-sm); }
.ttile__metrics dd { font-size: 0.875rem; font-weight: 800; }
.ttile__metrics dt { font-size: 0.6875rem; color: #5C6762; order: 2; }

.tchanges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.tchanges__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tchanges__title { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.tchanges__row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid; border-radius: var(--radius-sm); font-size: 0.8125rem; }
.tchanges__row > div { display: flex; flex-direction: column; min-width: 0; }
.tchanges__row span { font-size: 0.6875rem; color: #7A8681; overflow-wrap: anywhere; }
.tchanges__delta { text-align: right; flex: none; }

.tissues { display: flex; flex-direction: column; }
.tissues li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F3F2; }
.tissues li:last-child { border-bottom: 0; }
.tissues__type { min-width: 54px; text-align: center; font-size: 0.6875rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.tissues__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tissues__title { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; }
.tissues__ai { font-size: 0.625rem; font-weight: 800; padding: 1px 6px; border-radius: 4px; background: #EDE9FE; color: #5B21B6; }
.tissues__stack { font-size: 0.6875rem; color: #7A8681; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tissues__count { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8125rem; }
.tissues__count span { font-size: 0.6875rem; color: #7A8681; }

.ttimeline { display: flex; flex-direction: column; }
.ttimeline li { display: grid; grid-template-columns: 52px 14px minmax(0, 1fr); gap: 10px; }
.ttimeline time { font-size: 0.75rem; color: #7A8681; padding-top: 1px; }
.ttimeline__rail { position: relative; display: flex; justify-content: center; }
.ttimeline__rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: #EEF0EF; }
.ttimeline li:last-child .ttimeline__rail::before { bottom: auto; height: 12px; }
.ttimeline__rail i { position: relative; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; box-shadow: 0 0 0 3px #FFF; }
.ttimeline li > div { display: flex; flex-direction: column; padding-bottom: 14px; font-size: 0.8125rem; }
.ttimeline li > div span { font-size: 0.75rem; color: #7A8681; }

.theat { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.theat__frame { position: relative; max-width: 100%; overflow: hidden; background: #FAFAFA; }
.theat__frame > span { position: absolute; border-radius: 4px; }
.theat__chrome { display: flex; align-items: center; gap: 4px; padding-inline: 8px; background: #F1F3F2; }
.theat__chrome i { width: 6px; height: 6px; border-radius: 50%; background: #D1D5DB; }
.theat__scale { display: flex; align-items: center; gap: 8px; font-size: 0.6875rem; color: #7A8681; }
.theat__scale i { width: 110px; height: 6px; border-radius: 3px; }

/* Below the frame. */
.tour-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: clamp(32px, 2rem + 2vw, 64px); align-items: start; }
.tick-list { display: flex; flex-direction: column; gap: 10px; }
.tick-list li { position: relative; padding-left: 28px; color: var(--ink-2); line-height: 1.5; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); }
.tour-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.tour-related__card { transition: border-color 0.15s; color: var(--ink); }
.tour-related__card:hover { border-color: var(--accent); color: var(--ink); }

/* Under 900px the screen menu becomes a scrollable row above the panel. */
@media (max-width: 900px) {
    .tour-frame__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .tour-menu { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; overflow-x: auto; }
    .tour-menu__label { display: none; }
    .tour-menu ol { flex-direction: row; gap: 4px; }
    .tour-menu a { white-space: nowrap; }
    .tour-menu a[aria-current] { box-shadow: inset 0 -3px 0 var(--accent); }
    .tcards { grid-template-columns: minmax(0, 1fr); }
}

/* 9. Utilities ------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}