/* Solon design foundation: calm operational infrastructure.
   One family-wide palette: cool paper, cool ink, mineral-blue accent. One type
   family across display and text. Applications differ in density and scale,
   never in hue or voice. */
:root {
  /* Color */
  --color-text-primary: #1b2022;
  --color-text-secondary: #5d6465;
  --color-text-tertiary: #7a8080;
  --color-text-inverse: #f3f5f5;
  --color-text-inverse-secondary: rgba(243, 245, 245, 0.76);
  --color-text-inverse-tertiary: rgba(243, 245, 245, 0.58);
  --color-bg-page: #f1f1ed;
  --color-bg-surface: #f8f7f2;
  --color-bg-elevated: #fdfdfa;
  --color-bg-subtle: #e9edef;
  --color-bg-accent-subtle: #e4ecef;
  --color-bg-inverse: #1c2326;
  --color-bg-inverse-hover: #13191b;
  --color-bg-inverse-subtle: rgba(243, 245, 245, 0.07);
  --color-border: #d4d5d0;
  --color-border-strong: #bcbeb8;
  --color-border-inverse: rgba(243, 245, 245, 0.18);
  --color-accent: #3f6172;
  --color-accent-hover: #304f5f;
  --color-accent-subtle: #c3d2d9;
  --color-success: #2e6153;
  --color-success-subtle: #e6eeea;
  --color-success-border: #c8dbd3;
  --color-warning: #765720;
  --color-warning-subtle: #f0ebdf;
  --color-warning-border: #dad0b6;
  --color-danger: #8a3f43;
  --color-danger-subtle: #f2e6e6;
  --color-danger-border: #ddc4c5;
  --color-focus: rgba(63, 97, 114, 0.28);
  --color-overlay: rgba(27, 32, 34, 0.46);

  /* Editorial aliases. The palette above is canonical; these names are kept so
     existing marketing composition keeps resolving, and they are defined here
     rather than under a body scope so every application shares one palette. */
  --marketing-canvas: var(--color-bg-page);
  --marketing-surface: var(--color-bg-surface);
  --marketing-surface-cool: var(--color-bg-subtle);
  --marketing-hero-start: var(--color-bg-subtle);
  --marketing-hero-end: var(--color-bg-surface);
  --marketing-ink: var(--color-text-primary);
  --marketing-muted: var(--color-text-secondary);
  --marketing-faint: var(--color-text-tertiary);
  --marketing-border: var(--color-border);
  --marketing-accent: var(--color-accent);
  --marketing-accent-hover: var(--color-accent-hover);
  --marketing-inverse: var(--color-bg-inverse);
  --marketing-inverse-muted: #adb7ba;
  --marketing-visited: #66505f;

  /* Typography */
  --font-sans: var(--font-instrument-sans, "Instrument Sans"), "Helvetica Neue", Arial, sans-serif;
  /* Display and text are one family; display authority comes from scale and
     tracking, not a second voice. Kept as a role token for a future face. */
  --font-display: var(--font-sans);
  --font-mono: var(--font-ibm-plex-mono, "IBM Plex Mono"), "SFMono-Regular", Consolas, monospace;
  --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem;
  --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem; --font-size-4xl: clamp(3rem, 6vw, 5.75rem);
  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600;
  --line-height-tight: 1.06; --line-height-snug: 1.25; --line-height-normal: 1.52; --line-height-relaxed: 1.68;
  --tracking-display: -0.035em;   /* 48px and up */
  --tracking-heading: -0.02em;    /* 20-44px */
  --tracking-body: 0em;           /* 14-18px */
  --tracking-label: 0.08em;       /* uppercase operational labels */
  --tracking-eyebrow: 0.14em;     /* uppercase editorial eyebrows */
  --letter-spacing-tight: var(--tracking-display);
  --letter-spacing-label: var(--tracking-eyebrow);

  /* Space, shape, elevation and motion */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
  --radius-sm: 0.5rem; --radius-control: 0.625rem; --radius-card: 0.875rem; --radius-lg: 1.125rem;
  --border-width: 1px;
  --shadow-card: none;
  --shadow-card-hover: 0 14px 30px rgba(27, 32, 34, 0.07);
  --shadow-overlay: 0 24px 60px rgba(27, 32, 34, 0.18);
  /*
   * Attention ramp, taken verbatim from the usesolon.com product preview so the
   * site and the workspace grade severity identically. Deliberately not a
   * red/amber/green scale: medium and low are mineral blues, because they are
   * ordinary operating work rather than warnings. Colour never carries meaning
   * alone — every consumer prints the level as words beside it.
   */
  --attention-critical: #8f4640; --attention-high: #a1615b;
  --attention-medium: #7f95a1; --attention-low: #a8b8c0;
  --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1); --transition-base: 220ms cubic-bezier(0.2, 0, 0, 1);
  --focus-ring: 0 0 0 3px var(--color-focus);
  --control-height: 2.875rem;
  --control-height-compact: 2.5rem;

  /* Layout */
  --content-width: 74rem; --content-width-narrow: 48rem; --content-width-wide: 90rem;
  --content-width-marketing: 82rem; --content-width-marketing-frame: 88rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --page-gutter-marketing: clamp(var(--space-8), 4vw, var(--space-16));
  --content-inset-marketing: clamp(var(--space-8), 3vw, var(--space-12));
  --breakpoint-sm: 40rem; --breakpoint-md: 56.25rem; --breakpoint-lg: 75rem;
}

* { box-sizing: border-box; }
html { background: var(--color-bg-page); scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg-page); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
b, strong { font-weight: var(--font-weight-semibold); }
/* Product heading roles. The marketing heading scale is scoped away from
   .solon-product, which left product headings on the browser default of bold
   700 with no tracking. Zero-specificity so application rules still win.
   Sizes stay with the application; only the weight/tracking discipline is
   family-wide. */
:where(body.solon-product) :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-heading);
}
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--color-accent-subtle); color: var(--color-text-primary); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* Shared building blocks. Prefer these over duplicating visual recipes. */
.solon-container { width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2))); margin-inline: auto; }
.solon-container--wide { width: min(var(--content-width-wide), calc(100% - (var(--page-gutter) * 2))); }
.solon-page-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-8); }
.solon-eyebrow, .solon-operational-label { margin: 0 0 var(--space-3); color: var(--color-accent); font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-label); line-height: 1.35; text-transform: uppercase; }
.solon-section-heading { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); letter-spacing: -0.025em; }
.solon-panel, .solon-card { background: var(--color-bg-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }
.solon-card--quiet { box-shadow: none; }
.solon-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0.6875rem 1.125rem; border: var(--border-width) solid transparent; border-radius: var(--radius-control); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 1; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.solon-button--primary { background: var(--color-bg-inverse); color: var(--color-text-inverse); border-color: var(--color-bg-inverse); }.solon-button--primary:hover { background: var(--color-bg-inverse-hover); border-color: var(--color-bg-inverse-hover); }
.solon-button--secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong); }.solon-button--secondary:hover { background: var(--color-bg-surface); border-color: var(--color-accent); }.solon-button:disabled { cursor: not-allowed; opacity: 0.45; }
.solon-button--tertiary { min-height: var(--control-height-compact); padding-inline: var(--space-2); color: var(--color-accent); background: transparent; }.solon-button--tertiary:hover { color: var(--color-accent-hover); background: var(--color-bg-accent-subtle); }.solon-button:active:not(:disabled) { transform: translateY(1px); }
.solon-field { width: 100%; min-height: var(--control-height); padding: 0.6875rem 0.875rem; color: var(--color-text-primary); background: var(--color-bg-elevated); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); }.solon-field:hover { border-color: var(--color-border-strong); }.solon-field:focus { border-color: var(--color-accent); outline: none; box-shadow: var(--focus-ring); }.solon-field::placeholder { color: var(--color-text-tertiary); }.solon-field:disabled { color: var(--color-text-tertiary); background: var(--color-bg-subtle); cursor: not-allowed; }.solon-field[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 16%, transparent); }.solon-field--with-icon { padding-left: 2.75rem; }
.solon-badge, .solon-status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.2; }
.solon-badge { padding: 0.25rem 0.5rem; border: var(--border-width) solid var(--color-border); border-radius: 999px; background: var(--color-bg-subtle); }
.solon-status::before { width: 0.4375rem; height: 0.4375rem; background: currentColor; border-radius: 999px; content: ""; }
.solon-badge--success, .solon-status--success { color: var(--color-success); }.solon-badge--warning, .solon-status--warning { color: var(--color-warning); }.solon-badge--danger, .solon-status--danger { color: var(--color-danger); }.solon-badge--info, .solon-status--info { color: var(--color-accent); }
.solon-icon-box { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: var(--color-accent); background: var(--color-bg-accent-subtle); border-radius: var(--radius-control); }
.solon-empty-state { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-12) 0; color: var(--color-text-secondary); text-align: left; border-block: var(--border-width) solid var(--color-border); }
.solon-tooltip { position: relative; }.solon-tooltip[data-tooltip]::after { position: absolute; z-index: 20; bottom: calc(100% + var(--space-2)); left: 50%; width: max-content; max-width: 16rem; padding: var(--space-2) var(--space-3); color: var(--color-text-inverse); background: var(--color-bg-inverse); border-radius: var(--radius-sm); font-size: var(--font-size-xs); content: attr(data-tooltip); opacity: 0; pointer-events: none; transform: translate(-50%, 0.25rem); transition: opacity var(--transition-fast), transform var(--transition-fast); }.solon-tooltip[data-tooltip]:hover::after, .solon-tooltip[data-tooltip]:focus-within::after { opacity: 1; transform: translate(-50%, 0); }
.solon-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-4); background: var(--color-overlay); }.solon-modal { width: min(100%, 34rem); background: var(--color-bg-elevated); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); }
.solon-label { display: block; margin-bottom: var(--space-2); color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); }
.solon-helper { color: var(--color-text-secondary); font-size: 0.8125rem; line-height: var(--line-height-normal); }
.solon-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); font-size: var(--font-size-sm); line-height: var(--line-height-normal); }.solon-alert--danger { color: var(--color-danger); background: var(--color-danger-subtle); border-color: var(--color-danger-border); }.solon-alert--success { color: var(--color-success); background: var(--color-success-subtle); border-color: var(--color-success-border); }.solon-alert--warning { color: var(--color-warning); background: var(--color-warning-subtle); border-color: var(--color-warning-border); }.solon-alert--info { color: var(--color-accent-hover); background: var(--color-bg-accent-subtle); border-color: var(--color-accent-subtle); }
.solon-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.solon-text-primary { color: var(--color-text-primary); }
.solon-text-secondary { color: var(--color-text-secondary); }
.solon-text-inverse-tertiary { color: var(--color-text-inverse-tertiary); }
.solon-flush { margin: 0; }
.solon-note { margin-top: var(--space-3); }
.solon-spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: solon-spin 650ms linear infinite; }
@keyframes solon-spin { to { transform: rotate(360deg); } }

/* Shared operational table grammar. */
.solon-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); font-size: var(--font-size-sm); text-align: left; }
.solon-table th { padding: 0.75rem 1rem; color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; border-block: var(--border-width) solid var(--color-border); }
.solon-table td { padding: 1rem; border-bottom: var(--border-width) solid var(--color-border); }
.solon-table tbody tr { transition: background-color var(--transition-fast); }
.solon-table tbody tr:hover { background: var(--color-bg-accent-subtle); }

/* Legacy marketing aliases: keep the existing static pages stable while they migrate. */
.wrap { width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2))); margin: 0 auto; }.nav { position: sticky; top: 0; z-index: 50; height: 4.25rem; display: flex; align-items: center; background: color-mix(in srgb, var(--color-bg-surface) 94%, transparent); border-bottom: var(--border-width) solid var(--color-border); }.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }.brand { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); text-decoration: none; }.nav-links { display: flex; align-items: center; gap: var(--space-6); }.nav-links a { color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-decoration: none; }.nav-links a:hover { color: var(--color-accent); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.75rem 1.125rem; border-radius: var(--radius-control); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-decoration: none; transition: var(--transition-fast); }.button.primary { background: var(--color-bg-inverse); color: var(--color-text-inverse); border: var(--border-width) solid var(--color-bg-inverse); }.button.secondary { background: var(--color-bg-surface); border: var(--border-width) solid var(--color-border-strong); }
:where(body:not(.solon-product)) section { padding: 5.5rem 0; }.section-white { background: var(--color-bg-surface); }.section-tint { background: var(--color-bg-page); border-block: var(--border-width) solid var(--color-border); }.hero { padding: 3.875rem 0 4.875rem; border-bottom: var(--border-width) solid var(--color-border); }.hero-grid, .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; align-items: start; }.eyebrow, .step-num { color: var(--color-accent); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; }.eyebrow { margin: 0 0 var(--space-3); }:where(body:not(.solon-product)) :is(h1, h2, h3, p) { margin-top: 0; }:where(body:not(.solon-product)) h1 { margin-bottom: var(--space-5); font-size: var(--font-size-4xl); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }:where(body:not(.solon-product)) h2 { margin-bottom: var(--space-5); max-width: 51rem; font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }:where(body:not(.solon-product)) h3 { margin-bottom: var(--space-2); font-size: var(--font-size-lg); line-height: var(--line-height-snug); }.lead { max-width: 47.5rem; color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }.body { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }.small { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 1.75rem 0 var(--space-4); }.grid-2, .grid-3 { display: grid; gap: var(--space-5); margin-top: 2.25rem; }.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }.card { padding: var(--space-6); background: var(--color-bg-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }.section-white .card { background: var(--color-bg-page); }.mock { overflow: hidden; background: var(--color-bg-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }.mock-head { padding: 1.125rem var(--space-5); background: var(--color-bg-subtle); border-bottom: var(--border-width) solid var(--color-border); }.mock-top, .mock-row { display: flex; justify-content: space-between; gap: var(--space-3); }.mock-row { padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--color-border); }.mock-row:last-child { border-bottom: 0; }.mock-title, .mock-id { margin: 0 0 var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }.mock-sub, .mock-detail { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: var(--line-height-relaxed); }.mock-foot { padding: 1.125rem var(--space-5); background: var(--color-bg-accent-subtle); }.badge { display: inline-flex; border: var(--border-width) solid; border-radius: 999px; padding: 0.25rem 0.5rem; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }.badge.ready { color: var(--color-success); background: var(--color-success-subtle); border-color: var(--color-success-border); }.badge.risk { color: var(--color-warning); background: var(--color-warning-subtle); border-color: var(--color-warning-border); }.badge.blocked { color: var(--color-danger); background: var(--color-danger-subtle); border-color: var(--color-danger-border); }
@media (max-width: 56.25rem) { .hero-grid, .split, .grid-2, .grid-3 { grid-template-columns: 1fr; } :where(body:not(.solon-product)) section { padding: 4.25rem 0; } .hero { padding: 2.875rem 0 3.875rem; } }@media (max-width: 35rem) { .nav-links a:not(.mobile-keep) { display: none; } .button { width: 100%; } .nav .button { width: auto; } .mock-row, .solon-page-header { flex-direction: column; align-items: start; } }

/* Remaining legacy marketing composition helpers. */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }.pill { border: var(--border-width) solid var(--color-success-border); background: var(--color-success-subtle); color: var(--color-success); border-radius: 999px; padding: 0.25rem 0.5rem; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }.list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 1.875rem 0 0; padding: 0; list-style: none; }.list li { padding: 1.1875rem; color: var(--color-text-secondary); line-height: var(--line-height-relaxed); background: var(--color-bg-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }.measure { margin-top: 2.125rem; }.measure ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5625rem var(--space-6); padding-left: var(--space-5); color: var(--color-text-secondary); }.team-card img { width: 4.5rem; height: 4.5rem; margin-bottom: var(--space-4); object-fit: cover; border-radius: var(--radius-card); }.team-card .role { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }.team-card .linkedin { display: inline-block; margin-top: var(--space-3); color: var(--color-accent); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-decoration: none; }.faq { margin-top: 1.875rem; border-top: var(--border-width) solid var(--color-border); }details { padding: var(--space-5) 0; border-bottom: var(--border-width) solid var(--color-border); }summary { display: flex; justify-content: space-between; gap: var(--space-5); font-size: 1.0625rem; font-weight: var(--font-weight-semibold); cursor: pointer; list-style: none; }summary::-webkit-details-marker { display: none; }summary::after { color: var(--color-accent); font-size: 1.5rem; line-height: 1; content: "+"; }details[open] summary::after { content: "–"; }details p { max-width: 48.75rem; margin: var(--space-3) 0 0; }.cta { padding: 2.75rem; color: var(--color-text-inverse); background: var(--color-bg-inverse); border-radius: var(--radius-lg); }.cta h2 { color: var(--color-text-inverse); }.cta p { max-width: 47.5rem; color: var(--color-text-inverse-secondary); }.cta .button { margin-top: var(--space-3); color: var(--color-text-primary); background: var(--color-bg-surface); border-color: var(--color-bg-surface); }footer { padding: 3rem 0; color: var(--color-text-inverse); background: var(--color-bg-inverse-hover); }.footer-inner { display: flex; justify-content: space-between; gap: var(--space-8); }.footer-brand { font-size: 1.75rem; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); }.footer-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5); }.footer-links a { color: var(--color-text-inverse-secondary); font-size: var(--font-size-sm); text-decoration: none; }.footer-links a:hover { color: var(--color-text-inverse); }.copyright { margin-top: 1.375rem; color: var(--color-text-inverse-tertiary); font-size: var(--font-size-xs); }.note { margin-top: 1.125rem; }
@media (max-width: 56.25rem) { .list, .measure ul { grid-template-columns: 1fr; } } @media (max-width: 35rem) { .footer-inner { flex-direction: column; align-items: start; } .cta { padding: 1.875rem 1.5rem; } }

/* Unified Solon composition layer. This supersedes the compatibility aliases above. */
:where(body:not(.solon-product)) section { padding: 0; }
:where(body:not(.solon-product)) :is(h1, h2, h3) { margin-bottom: 0; font-size: inherit; font-weight: var(--font-weight-regular); line-height: inherit; letter-spacing: normal; }

.wrap { width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2))); margin-inline: auto; }
.nav { height: auto; min-height: 4.5rem; background: color-mix(in srgb, var(--color-bg-page) 94%, transparent); }
.nav-inner { gap: var(--space-8); }
.brand { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: var(--font-weight-semibold); letter-spacing: -0.035em; }
.nav-links { gap: clamp(1rem, 2.5vw, 2rem); }
.nav-links a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.button { min-height: var(--control-height); padding: 0.75rem 1.125rem; border: var(--border-width) solid transparent; border-radius: var(--radius-control); font-weight: var(--font-weight-medium); line-height: 1; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.button.primary { color: var(--color-text-inverse); background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); }
.button.primary:hover { background: var(--color-bg-inverse-hover); border-color: var(--color-bg-inverse-hover); }
.button.secondary { color: var(--color-text-primary); background: transparent; border-color: var(--color-border-strong); }
.button.secondary:hover { background: var(--color-bg-surface); border-color: var(--color-accent); }
.button:active { transform: translateY(1px); }

.hero { min-height: calc(100vh - 4.5rem); display: flex; align-items: center; padding: clamp(5rem, 10vw, 8.5rem) 0; border-bottom: var(--border-width) solid var(--color-border); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.hero-copy { max-width: 59rem; }
.hero-editorial .hero-grid { grid-template-columns: 1fr; }
.eyebrow, .step-num { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-label); line-height: 1.35; text-transform: uppercase; }
.eyebrow { margin: 0 0 var(--space-5); }
.hero h1 { max-width: 62rem; margin-bottom: var(--space-8); font-size: var(--font-size-4xl); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); }
.section-white, .section-tint { padding: clamp(5rem, 9vw, 8rem) 0; border-bottom: var(--border-width) solid var(--color-border); }
.section-white { background: var(--color-bg-surface); }
.section-tint { background: var(--color-bg-page); border-top: 0; }
.wrap > h2, .wrap > .split > div > h2 { max-width: 58rem; margin-bottom: var(--space-6); font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: var(--font-weight-regular); line-height: 1.06; letter-spacing: var(--letter-spacing-tight); }
.lead { max-width: 49rem; color: var(--color-text-secondary); font-size: clamp(1.0625rem, 1.7vw, 1.25rem); line-height: var(--line-height-relaxed); }
.body { color: var(--color-text-secondary); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
.small { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.actions { margin: var(--space-8) 0 var(--space-5); }

.grid-2, .grid-3 { display: grid; gap: 0; margin-top: var(--space-12); overflow: hidden; background: var(--color-bg-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .section-white .card, .section-tint .card { min-width: 0; padding: clamp(1.5rem, 3vw, 2.25rem); background: transparent; border: 0; border-radius: 0; }
.card h3 { margin-bottom: var(--space-3); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); letter-spacing: -0.025em; }
.grid-2 > .card { border-bottom: var(--border-width) solid var(--color-border); }
.grid-2 > .card:nth-child(odd) { border-right: var(--border-width) solid var(--color-border); }
.grid-2 > .card:nth-last-child(-n + 2) { border-bottom: 0; }
.grid-3 > .card:not(:nth-child(3n)) { border-right: var(--border-width) solid var(--color-border); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 7vw, 6rem); align-items: start; }

.mock { border-radius: var(--radius-card); box-shadow: none; }
.mock-head { padding: var(--space-5) var(--space-6); }
.mock-top, .mock-row { gap: var(--space-4); }
.mock-row { padding: var(--space-5) var(--space-6); }
.mock-title, .mock-id { font-weight: var(--font-weight-semibold); }
.mock-sub, .mock-detail { font-size: 0.8125rem; line-height: var(--line-height-normal); }
.mock-foot { padding: var(--space-5) var(--space-6); }
.badge { align-items: center; gap: var(--space-2); padding: 0; border: 0; border-radius: 0; background: transparent; font-weight: var(--font-weight-medium); }
.badge::before { width: 0.4375rem; height: 0.4375rem; background: currentColor; border-radius: 999px; content: ""; }
.badge.ready { color: var(--color-success); background: transparent; border: 0; }
.badge.risk { color: var(--color-warning); background: transparent; border: 0; }
.badge.blocked { color: var(--color-danger); background: transparent; border: 0; }
.pills { gap: var(--space-4); margin: var(--space-4) 0; }
.pill { padding: 0; border: 0; border-radius: 0; background: transparent; font-weight: var(--font-weight-medium); }
.pill::before { margin-right: var(--space-2); content: "✓"; }

.list { gap: 0; margin-top: var(--space-12); overflow: hidden; background: var(--color-bg-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
.list li { padding: var(--space-6); background: transparent; border: 0; border-bottom: var(--border-width) solid var(--color-border); border-radius: 0; }
.list li:nth-child(odd) { border-right: var(--border-width) solid var(--color-border); }
.list li:nth-last-child(-n + 2) { border-bottom: 0; }
.measure { margin-top: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
.measure ul { gap: var(--space-3) var(--space-8); margin-bottom: 0; }
.team-card img { width: 4.75rem; height: 4.75rem; margin-bottom: var(--space-5); border-radius: var(--radius-control); filter: saturate(0.82); }
.team-card .linkedin { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; margin-top: var(--space-4); font-weight: var(--font-weight-medium); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.faq { margin-top: var(--space-10); }
details { padding: var(--space-6) 0; }
summary { min-height: 2.75rem; align-items: center; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
summary::after { font-family: var(--font-mono); font-size: inherit; content: "+"; }
details[open] summary::after { content: "−"; }
details p { margin-top: var(--space-4); }
.cta { padding: clamp(2rem, 5vw, 4.5rem); }
.cta h2 { max-width: 52rem; margin-bottom: var(--space-5); color: var(--color-text-inverse); font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: var(--font-weight-regular); line-height: 1.05; letter-spacing: var(--letter-spacing-tight); }
.cta .button { margin-top: var(--space-4); }
.footer-brand { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.footer-links a { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; }

@media (max-width: 56.25rem) {
  .solon-marketing {
    --page-gutter-marketing: 0rem;
    --content-inset-marketing: var(--space-8);
  }

  .hero { min-height: auto; }
  .hero-grid, .split, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-2 > .card, .grid-2 > .card:nth-child(odd), .grid-3 > .card:not(:nth-child(3n)) { border-right: 0; border-bottom: var(--border-width) solid var(--color-border); }
  .grid-2 > .card:last-child, .grid-3 > .card:last-child { border-bottom: 0; }
  .list { grid-template-columns: 1fr; }
  .list li, .list li:nth-child(odd) { border-right: 0; border-bottom: var(--border-width) solid var(--color-border); }
  .list li:last-child { border-bottom: 0; }
}

@media (max-width: 40rem) {
  .hero { padding: var(--space-20) 0; }
  .hero h1 { font-size: clamp(2.4rem, 12.3vw, 3.75rem); }
  .mock-row, .solon-page-header, .footer-inner { flex-direction: column; align-items: flex-start; }
  .measure ul { grid-template-columns: 1fr; }
  .cta { padding: var(--space-10) var(--space-6); }
}

/* Meet Solon editorial composition. Colors and faces come from :root; this
   scope owns only page chrome that product applications must not inherit. */
body.solon-marketing {
  min-width: 20rem;
  overflow-x: hidden;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  --marketing-nav-height: 5rem;
}

.solon-marketing .wrap {
  width: min(
    var(--content-width-marketing),
    calc(100% - ((var(--page-gutter-marketing) + var(--content-inset-marketing)) * 2))
  );
}

.solon-marketing .nav {
  min-height: 5rem;
  background: color-mix(in srgb, var(--marketing-canvas) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--marketing-border) 82%, transparent);
  backdrop-filter: blur(14px);
}

.solon-marketing .brand {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-display);
}

.solon-marketing .nav-links a:not(.button) {
  position: relative;
  min-width: 2.75rem;
  justify-content: center;
  color: var(--marketing-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.solon-marketing .nav-links a:not(.button)::after {
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 0;
  height: 1px;
  background: var(--marketing-accent);
  content: "";
  opacity: 0;
  transform: scaleX(0.7);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.solon-marketing .nav-links a:not(.button):hover::after,
.solon-marketing .nav-links a:not(.button):focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (min-width: 40.0625rem) {
  .solon-company .brand {
    font-size: 1.8125rem;
  }

  .solon-company .nav-links {
    gap: 1.5rem;
  }

  .solon-company .nav-links .button {
    margin-left: 0.5rem;
    padding-inline: 1.0625rem;
    font-size: 0.9375rem;
  }

  .solon-company .nav-links a:not(.button) {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
  }
}

.solon-marketing .button {
  width: auto;
  min-height: 2.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.solon-marketing .button.primary {
  background: var(--marketing-inverse);
  border-color: var(--marketing-inverse);
}

.solon-marketing .button.primary:hover {
  background: var(--marketing-accent-hover);
  border-color: var(--marketing-accent-hover);
}

.solon-marketing .hero {
  min-height: calc(100svh - 5rem);
  padding: 0;
  background: var(--marketing-hero-end);
  border-bottom: 0;
}

.solon-marketing .hero-grid {
  position: relative;
  width: min(
    var(--content-width-marketing-frame),
    calc(100% - (var(--page-gutter-marketing) * 2))
  );
  min-height: calc(100svh - 5rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(6rem, 12vw, 10.5rem) var(--content-inset-marketing);
  background: linear-gradient(
    180deg,
    var(--marketing-hero-start) 0%,
    var(--marketing-canvas) 68%,
    var(--marketing-hero-end) 100%
  );
  border-inline: var(--border-width) solid var(--marketing-border);
  border-bottom: var(--border-width) solid var(--marketing-border);
}

.solon-marketing .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 68rem;
}

.solon-operations-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--marketing-accent);
  pointer-events: none;
  user-select: none;
}

.solon-company .solon-operations-background {
  transform: scale(1.015);
  transform-origin: right center;
}

.solon-marketing .conversation-hero .hero-copy {
  max-width: 55rem;
}

.solon-marketing .eyebrow {
  margin-bottom: 1.75rem;
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.solon-marketing .hero h1 {
  max-width: 66rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8.6vw, 7.6rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.0;
  letter-spacing: var(--tracking-display);
}

.solon-marketing .conversation-hero h1 {
  max-width: 54rem;
}

.solon-conversation .conversation-hero {
  min-height: auto;
  align-items: flex-start;
  padding: 0;
}

.solon-conversation .conversation-hero .hero-grid {
  min-height: auto;
  align-items: flex-start;
  padding-block: clamp(4.5rem, 7vw, 7rem) clamp(5.5rem, 8vw, 8rem);
}

.solon-conversation .conversation-hero h1 {
  font-size: clamp(3.75rem, 7vw, 6.2rem);
  line-height: 1.02;
}

.solon-conversation .conversation-hero .lead {
  max-width: 40rem;
  margin-top: 2rem;
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem);
}

.solon-marketing .hero .lead {
  max-width: 42rem;
  margin: 2.5rem 0 0;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.55;
}

.solon-marketing .actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2.5rem 0 0;
}

.solon-company .hero {
  min-height: auto;
  padding: 0;
  --marketing-hero-end: var(--marketing-canvas);
}

.solon-company .hero-grid {
  min-height: auto;
  padding-block: clamp(4.75rem, 7vw, 6.75rem) clamp(5.25rem, 8vw, 7.5rem);
}

.solon-company main > section {
  scroll-margin-top: 5rem;
}

.solon-company #exploring {
  --focus-anchor-gap: var(--space-8);
  --focus-section-padding-top: clamp(5rem, 8vw, 7rem);
  scroll-margin-top: max(
    0rem,
    calc(var(--marketing-nav-height) + var(--focus-anchor-gap) - var(--focus-section-padding-top))
  );
}

.solon-company #about {
  --about-anchor-gap: var(--space-8);
  --about-section-padding-top: clamp(6rem, 11vw, 10rem);
  scroll-margin-top: calc(
    var(--marketing-nav-height) + var(--about-anchor-gap) - var(--about-section-padding-top)
  );
}

.solon-company .hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 0.7fr);
  column-gap: clamp(3.5rem, 7vw, 7rem);
  row-gap: 2rem;
  align-items: end;
  max-width: none;
}

.solon-company .hero-copy > .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.solon-company .hero h1 {
  grid-column: 1;
  max-width: 50rem;
  font-size: clamp(4rem, 6.4vw, 6rem);
  line-height: 1.02;
}

.solon-company .hero-summary {
  grid-column: 2;
  padding-bottom: 0.35rem;
}

.solon-company .hero .hero-summary .lead {
  max-width: 31rem;
  margin: 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.2rem);
}

.solon-company .hero-summary .actions {
  margin-top: 1.75rem;
}

.solon-marketing .text-link,
.solon-marketing .person-row > a,
.solon-marketing .founder-profile > a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.4rem;
  color: var(--marketing-accent);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: color var(--transition-fast);
}

.solon-marketing .text-link:visited,
.solon-marketing .person-row > a:visited,
.solon-marketing .founder-profile > a:visited {
  color: var(--marketing-visited);
}

.solon-marketing .text-link:hover,
.solon-marketing .person-row > a:hover,
.solon-marketing .founder-profile > a:hover {
  color: var(--marketing-accent-hover);
}

.solon-marketing .contact-note {
  margin: 1.25rem 0 0;
  color: var(--marketing-faint);
  font-size: 0.875rem;
}

.solon-marketing .editorial-section,
.solon-marketing .final-section,
.solon-marketing .legal-section {
  padding: clamp(6rem, 11vw, 10rem) 0;
  border-bottom: 1px solid var(--marketing-border);
}

.solon-marketing .section-white {
  background: var(--marketing-surface);
}

.solon-marketing .section-tint {
  background: var(--marketing-canvas);
}

.solon-marketing .editorial-split,
.solon-marketing .founder-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(4rem, 9vw, 9rem);
  align-items: start;
}

.solon-marketing .editorial-section h2,
.solon-marketing .final-invitation h2,
.solon-marketing .legal-hero h1,
.solon-marketing .legal-section h2 {
  max-width: 58rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.6vw, 5.4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
}

.solon-marketing .prose-stack {
  max-width: 40rem;
  padding-top: 2.55rem;
}

.solon-marketing .prose-stack .lead,
.solon-marketing .section-intro .lead,
.solon-marketing .founder-split .lead,
.solon-marketing .final-invitation .lead {
  margin: 2rem 0 0;
}

.solon-marketing .prose-stack .body {
  margin: 1.5rem 0 0;
}

.solon-marketing .section-intro {
  max-width: 59rem;
}

.solon-conversation .editorial-split {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(4rem, 8vw, 8rem);
}

.solon-conversation .editorial-section h2 {
  max-width: 31rem;
  font-size: clamp(2.75rem, 4vw, 4rem);
  line-height: 1;
}

.solon-conversation .editorial-section {
  padding-block: clamp(4.5rem, 7.5vw, 7rem);
}

.solon-conversation .conversation-details {
  padding-top: 0;
}

.solon-conversation .conversation-heading {
  max-width: 34rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.1vw, 3.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: var(--tracking-heading);
}

.solon-conversation .conversation-details > .body {
  max-width: 37rem;
  margin: 1.5rem 0 0;
}

.solon-conversation .conversation-details .conversation-list {
  margin-top: 2.5rem;
}

.solon-marketing .section-note {
  max-width: 34rem;
  margin: 2rem 0 0;
}

.solon-marketing .process-list,
.solon-marketing .conversation-list,
.solon-marketing .criteria-list,
.solon-marketing .team-list {
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--marketing-border);
}

.solon-marketing .process-list li {
  display: grid;
  grid-template-columns: 4rem minmax(10rem, 0.55fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: baseline;
  padding: 1.65rem 0;
  border-bottom: 1px solid var(--marketing-border);
}

.solon-marketing .process-number {
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.solon-marketing .process-list h3,
.solon-marketing .conversation-list h3,
.solon-marketing .person-row h3,
.solon-marketing .founder-profile h3 {
  margin: 0;
  color: var(--marketing-ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

.solon-marketing .process-list p,
.solon-marketing .conversation-list p,
.solon-marketing .person-row p,
.solon-marketing .founder-profile p {
  margin: 0;
  color: var(--marketing-muted);
  line-height: 1.65;
}

.solon-marketing .criteria-list {
  margin-top: 2.55rem;
}

.solon-marketing .criteria-list li {
  position: relative;
  padding: 1.5rem 0 1.5rem 2.25rem;
  color: var(--marketing-ink);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.4;
  border-bottom: 1px solid var(--marketing-border);
}

.solon-marketing .criteria-list li::before {
  position: absolute;
  top: 2.05rem;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--marketing-accent);
  border-radius: 50%;
  content: "";
}

.solon-company .focus-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  gap: 1.75rem clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.solon-company .focus-intro .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.solon-company .focus-intro h2 {
  max-width: 41rem;
  font-size: clamp(3rem, 4.4vw, 4.5rem);
  line-height: 1.04;
}

.solon-company .focus-intro .section-note {
  width: min(100%, 34rem);
  max-width: 34rem;
  margin: 0;
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
  justify-self: end;
}

.solon-company .focus-section {
  padding-block: var(--focus-section-padding-top, clamp(5rem, 8vw, 7rem));
}

.solon-company .focus-layout {
  width: min(
    var(--content-width-marketing),
    calc(100% - ((var(--page-gutter-marketing) + var(--content-inset-marketing)) * 2))
  );
  margin-inline: auto;
}

.solon-company .focus-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 4vw, 3.75rem);
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.solon-company .focus-cards > li {
  min-width: 0;
}

.solon-company .focus-card {
  height: 100%;
  overflow: hidden;
  background: var(--marketing-surface);
  border: var(--border-width) solid var(--marketing-border);
  border-radius: 0.75rem;
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.solon-company .focus-card-visual {
  min-height: 11rem;
  color: var(--marketing-accent);
  background: color-mix(in srgb, var(--marketing-surface-cool) 52%, var(--marketing-surface));
  border-bottom: var(--border-width) solid var(--marketing-border);
  transition: background-color var(--transition-base);
}

.solon-company .focus-card-visual svg {
  display: block;
  width: 100%;
  height: 11rem;
}

.solon-company .focus-diagram-grid {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.08;
}

.solon-company .focus-diagram-label,
.solon-company .focus-diagram-axis,
.solon-company .focus-diagram-data text {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.solon-company .focus-diagram-label,
.solon-company .focus-diagram-axis {
  opacity: 0.58;
}

.solon-company .focus-diagram-data {
  fill: var(--marketing-surface);
  stroke: currentColor;
  stroke-width: 1.25;
  opacity: 0.58;
  transition: opacity var(--transition-base);
}

.solon-company .focus-diagram-data text {
  stroke: none;
}

.solon-company .focus-diagram-data--operating {
  fill: none;
}

.solon-company .focus-diagram-data--operating path:first-child,
.solon-company .focus-diagram-fill {
  stroke-width: 2;
}

.solon-company .focus-diagram-data--operating path:nth-child(2) {
  stroke-dasharray: 4 5;
  opacity: 0.62;
}

.solon-company .focus-diagram-axis {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
}

.solon-company .focus-diagram-data--allocation > path:not(.focus-diagram-fill) {
  opacity: 0.28;
}

.solon-company .focus-card-copy {
  min-height: 10.25rem;
  padding: 1.5rem;
}

.solon-company .focus-card-index {
  margin: 0 0 1.1rem;
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.solon-company .focus-card h3 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.solon-company .focus-card-copy > p:last-child {
  margin: 0;
  color: var(--marketing-muted);
  font-size: 1rem;
  line-height: 1.55;
}

@media (hover: hover) {
  .solon-company .focus-card:hover {
    background: color-mix(in srgb, var(--marketing-surface) 94%, var(--marketing-surface-cool));
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
  }

  .solon-company .focus-card:hover .focus-card-visual {
    background: color-mix(in srgb, var(--marketing-surface-cool) 62%, var(--marketing-surface));
  }

  .solon-company .focus-card:hover .focus-diagram-data {
    opacity: 0.76;
  }
}

.solon-company .systems-bridge-section {
  padding-block: clamp(5rem, 8vw, 7rem);
  background: var(--marketing-surface);
  border-bottom: var(--border-width) solid var(--marketing-border);
}

.solon-company .systems-bridge-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  gap: 1.75rem clamp(3rem, 6vw, 6rem);
  align-items: end;
}

.solon-company .systems-bridge-intro .eyebrow {
  margin-bottom: 1.25rem;
}

.solon-company .systems-bridge-intro h2 {
  max-width: 46rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 4.4vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.solon-company .systems-bridge-intro > .body {
  width: min(100%, 34rem);
  margin: 0;
  padding-bottom: 0.4rem;
  justify-self: end;
}

.solon-company .systems-bridge-stage {
  --bridge-center-width: clamp(13.5rem, 17vw, 15rem);
  --bridge-column-gap: clamp(4.5rem, 6vw, 6rem);
  position: relative;
  min-height: 28rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bridge-center-width) minmax(0, 1fr);
  column-gap: var(--bridge-column-gap);
  align-items: center;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
  background:
    linear-gradient(color-mix(in srgb, var(--marketing-accent) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--marketing-accent) 4%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--marketing-canvas) 74%, var(--marketing-surface));
  background-size: 5rem 5rem;
  border: var(--border-width) solid var(--marketing-border);
  border-radius: 0.75rem;
}

.solon-company .bridge-group {
  position: relative;
  min-width: 0;
  height: 25rem;
}

.solon-company .bridge-group-label,
.solon-company .bridge-core-label,
.solon-company .bridge-core-signals,
.solon-company .bridge-stage-caption {
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.solon-company .bridge-group-label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.solon-company .bridge-outputs .bridge-group-label {
  right: 0;
  left: auto;
  text-align: right;
}

.solon-company .bridge-input-list,
.solon-company .bridge-output-list {
  position: absolute;
  top: 2rem;
  right: 0;
  bottom: 2rem;
  left: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solon-company .bridge-logo-tile {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0.7rem 1rem;
  background: var(--marketing-surface);
  border: var(--border-width) solid color-mix(in srgb, var(--marketing-border) 88%, transparent);
  border-radius: 0.55rem;
}

.solon-company .bridge-logo {
  display: block;
  width: auto;
  max-width: min(100%, 7rem);
  height: var(--bridge-logo-height);
  object-fit: contain;
}

.solon-company .bridge-logo--r365 { --bridge-logo-height: 3.2rem; }
.solon-company .bridge-logo--adp { --bridge-logo-height: 3.4rem; }
.solon-company .bridge-logo--toast { --bridge-logo-height: 2.2rem; }
.solon-company .bridge-logo--par { --bridge-logo-height: 1.9rem; }

.solon-company .bridge-connector {
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  width: var(--bridge-column-gap);
  min-width: 0;
  pointer-events: none;
}

.solon-company .bridge-connector--in {
  left: 100%;
}

.solon-company .bridge-connector--out {
  right: 100%;
}

.solon-company .bridge-connector svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.solon-company .bridge-connector path {
  fill: none;
  stroke: var(--marketing-accent);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  opacity: 0.26;
}

.solon-company .bridge-flow-markers circle {
  fill: var(--marketing-accent);
  opacity: 0.68;
}

.solon-company .bridge-connector-mobile {
  display: none;
}

.solon-company .bridge-core-wrap {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}

.solon-company .bridge-core {
  width: 100%;
  min-height: 13.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: var(--marketing-ink);
  background: color-mix(in srgb, var(--marketing-surface-cool) 42%, var(--marketing-surface));
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 0.75rem;
  text-align: center;
}

.solon-company .bridge-core-label {
  margin-bottom: 1.2rem;
}

.solon-company .bridge-core strong {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.solon-company .bridge-core p {
  max-width: 13rem;
  margin: 0.85rem 0 0;
  color: var(--marketing-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.solon-company .bridge-core-signals {
  margin-top: 1.25rem;
  color: var(--marketing-faint);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.solon-company .bridge-output-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.7rem 0.9rem;
  background: var(--marketing-surface);
  border: var(--border-width) solid color-mix(in srgb, var(--marketing-border) 88%, transparent);
  border-radius: 0.55rem;
}

.solon-company .bridge-output-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.575rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.solon-company .bridge-output-meta i {
  width: 0.35rem;
  height: 0.35rem;
  flex: 0 0 auto;
  background: var(--marketing-accent);
  border-radius: 50%;
  opacity: 0.7;
}

.solon-company .bridge-output-card h3 {
  margin: 0.35rem 0 0;
  color: var(--marketing-ink);
  font-size: clamp(0.82rem, 1vw, 0.94rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.solon-company .bridge-output-card p {
  margin: 0.25rem 0 0;
  color: var(--marketing-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.solon-company .bridge-stage-caption {
  margin: 1.25rem 0 0;
  color: var(--marketing-faint);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .solon-company .bridge-flow-markers,
  .solon-company .bridge-connector-mobile::after {
    display: none;
  }
}

.solon-company .capabilities-section {
  padding-block: clamp(5rem, 8vw, 7rem);
  background: var(--marketing-surface);
  border-bottom: var(--border-width) solid var(--marketing-border);
}

.solon-company .capabilities-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  gap: 1.75rem clamp(3rem, 6vw, 6rem);
  align-items: end;
}

.solon-company .capabilities-intro .eyebrow {
  margin-bottom: 1.25rem;
}

.solon-company .capabilities-intro h2 {
  max-width: 44rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 4.4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
}

.solon-company .capabilities-intro > .body {
  width: min(100%, 34rem);
  margin: 0;
  padding-bottom: 0.4rem;
  justify-self: end;
}

.solon-company .capabilities-stage {
  min-height: 33.5rem;
  display: grid;
  grid-template-columns: minmax(19rem, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.solon-company .capability-list {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: color-mix(in srgb, var(--marketing-canvas) 56%, var(--marketing-surface));
  border: var(--border-width) solid var(--marketing-border);
  border-radius: 0.75rem;
}

.solon-company .capability-control {
  position: relative;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1.35rem clamp(1.25rem, 2vw, 1.75rem);
  color: var(--marketing-muted);
  background: transparent;
  border: 0;
  border-bottom: var(--border-width) solid var(--marketing-border);
  border-radius: 0;
  text-align: left;
  transition: color 320ms cubic-bezier(0.2, 0, 0, 1), background-color 320ms cubic-bezier(0.2, 0, 0, 1);
}

.solon-company .capability-control:last-child {
  border-bottom: 0;
}

.solon-company .capability-control::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 2px;
  background: var(--marketing-accent);
  content: "";
  opacity: 0;
  transform: scaleY(0.5);
  transform-origin: center;
  transition: opacity 320ms cubic-bezier(0.2, 0, 0, 1), transform 320ms cubic-bezier(0.2, 0, 0, 1);
}

.solon-company .capability-control.is-active {
  color: var(--marketing-ink);
  background: var(--marketing-surface);
}

.solon-company .capability-control.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.solon-company .capability-meta,
.solon-company .capability-visual-kicker {
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.solon-company .capability-title {
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.solon-company .capability-description {
  max-width: 29rem;
  margin-top: 0.45rem;
  color: var(--marketing-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.solon-company .capability-visual-frame {
  position: relative;
  min-width: 0;
  min-height: 33.5rem;
  overflow: hidden;
  background:
    linear-gradient(color-mix(in srgb, var(--marketing-accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--marketing-accent) 6%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--marketing-surface-cool) 48%, var(--marketing-surface));
  background-size: 4rem 4rem;
  border: var(--border-width) solid var(--marketing-border);
  border-radius: 0.75rem;
}

.solon-company .capability-visual-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem) scale(0.996);
  transition: opacity 320ms cubic-bezier(0.2, 0, 0, 1), transform 320ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 320ms;
}

.solon-company .capability-visual-state.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.solon-company .capability-visual-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: 1.35rem;
  border-bottom: var(--border-width) solid color-mix(in srgb, var(--marketing-border) 78%, transparent);
}

.solon-company .capability-visual-kicker {
  margin: 0 0 0.45rem;
}

.solon-company .capability-visual-header h3 {
  margin: 0;
  color: var(--marketing-ink);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.solon-company .capability-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  color: var(--marketing-faint);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.solon-company .capability-status > span {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--marketing-accent);
  border-radius: 50%;
}

.solon-company .capability-visual-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: 1rem;
  color: var(--marketing-faint);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  border-top: var(--border-width) solid color-mix(in srgb, var(--marketing-border) 78%, transparent);
}

.solon-company .review-priority-view,
.solon-company .diagnosis-view,
.solon-company .management-agenda-view {
  min-height: 0;
  flex: 1;
  padding-block: 0.75rem;
}

.solon-company .review-priority-view,
.solon-company .management-agenda-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.solon-company .review-priority-list,
.solon-company .management-agenda-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.solon-company .review-priority-item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 2.5rem;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.75rem;
  border-bottom: var(--border-width) solid color-mix(in srgb, var(--marketing-border) 72%, transparent);
}

.solon-company .review-priority-item.is-selected {
  background: color-mix(in srgb, var(--marketing-surface) 72%, var(--marketing-surface-cool));
  border-radius: 0.45rem;
}

.solon-company .review-rank,
.solon-company .review-impact,
.solon-company .agenda-rank,
.solon-company .agenda-status,
.solon-company .diagnosis-label,
.solon-company .diagnosis-inference > span {
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.solon-company .review-priority-copy h4,
.solon-company .agenda-copy h4 {
  margin: 0;
  color: var(--marketing-ink);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.solon-company .review-priority-copy strong {
  display: block;
  margin-top: 0.15rem;
  color: var(--marketing-ink);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
}

.solon-company .review-priority-copy p,
.solon-company .agenda-copy p {
  margin: 0.15rem 0 0;
  color: var(--marketing-faint);
  font-size: 0.7rem;
  line-height: 1.35;
}

.solon-company .review-impact,
.solon-company .agenda-status {
  text-align: right;
}

.solon-company .review-priority-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  margin-top: 0.7rem;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--marketing-accent) 4%, var(--marketing-surface));
  border: var(--border-width) solid color-mix(in srgb, var(--marketing-border) 78%, transparent);
  border-radius: 0.45rem;
}

.solon-company .review-priority-summary strong {
  color: var(--marketing-ink);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

.solon-company .review-priority-summary span {
  color: var(--marketing-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.solon-company .diagnosis-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
}

.solon-company .diagnosis-metric {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: var(--border-width) solid color-mix(in srgb, var(--marketing-border) 72%, transparent);
}

.solon-company .diagnosis-metric > div > span {
  display: block;
  color: var(--marketing-faint);
  font-size: 0.7rem;
  line-height: 1.3;
}

.solon-company .diagnosis-metric strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--marketing-ink);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

.solon-company .diagnosis-metric strong i {
  margin-inline: 0.2rem;
  color: var(--marketing-faint);
  font-family: var(--font-sans);
  font-size: 0.8em;
  font-style: normal;
  font-weight: 400;
}

.solon-company .diagnosis-delta {
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.solon-company .diagnosis-breakdown {
  display: grid;
  gap: 0.35rem;
}

.solon-company .diagnosis-row {
  display: grid;
  grid-template-columns: 5.75rem minmax(4rem, 1fr) 3.75rem;
  gap: 0.75rem;
  align-items: center;
  min-height: 1.55rem;
}

.solon-company .diagnosis-row > span:first-child,
.solon-company .diagnosis-row strong {
  color: var(--marketing-muted);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
}

.solon-company .diagnosis-row strong {
  color: var(--marketing-ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.solon-company .diagnosis-track {
  height: 0.3rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--marketing-accent) 10%, transparent);
  border-radius: 999px;
}

.solon-company .diagnosis-track > i {
  width: var(--driver-width);
  height: 100%;
  display: block;
  background: color-mix(in srgb, var(--marketing-accent) 64%, var(--marketing-surface));
  border-radius: inherit;
}

.solon-company .diagnosis-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.1rem;
}

.solon-company .diagnosis-label {
  grid-column: 1 / -1;
  margin: 0 0 0.05rem;
}

.solon-company .diagnosis-evidence > div {
  padding: 0.6rem 0.7rem;
  background: var(--marketing-surface);
  border: var(--border-width) solid color-mix(in srgb, var(--marketing-border) 78%, transparent);
  border-radius: 0.4rem;
}

.solon-company .diagnosis-evidence strong,
.solon-company .diagnosis-evidence span {
  display: block;
  color: var(--marketing-ink);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
}

.solon-company .diagnosis-evidence span {
  margin-top: 0.12rem;
  color: var(--marketing-faint);
  font-size: 0.65rem;
  font-weight: 400;
}

.solon-company .diagnosis-inference {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  background: color-mix(in srgb, var(--marketing-accent) 4%, transparent);
  border-radius: 0.4rem;
}

.solon-company .diagnosis-inference p {
  margin: 0;
  color: var(--marketing-muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.solon-company .management-agenda-item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem 0.25rem;
  border-bottom: var(--border-width) solid color-mix(in srgb, var(--marketing-border) 72%, transparent);
}

.solon-company .management-agenda-item:last-child {
  border-bottom: 0;
}

.solon-company .agenda-copy p > span {
  margin-right: 0.35rem;
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (hover: hover) {
  .solon-company .capability-control:hover {
    color: var(--marketing-ink);
    background: color-mix(in srgb, var(--marketing-surface) 82%, var(--marketing-surface-cool));
  }
}

.solon-marketing .person-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 1.75rem;
  align-items: start;
  padding: 2rem 0;
  border-bottom: 1px solid var(--marketing-border);
}

.solon-marketing .person-row img,
.solon-marketing .founder-profile img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 0.25rem;
  filter: grayscale(0.18) saturate(0.78);
}

.solon-marketing .person-row p {
  max-width: 48rem;
  margin-top: 0.45rem;
}

.solon-marketing .conversation-list {
  max-width: 59rem;
}

.solon-marketing .conversation-list li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--marketing-border);
}

.solon-marketing .conversation-list p {
  margin-top: 0.4rem;
}

.solon-marketing .founder-split > div .text-link {
  margin-top: 1.75rem;
}

.solon-marketing .founder-profile {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.25rem 1.75rem;
  padding: 2rem 0;
  border-block: 1px solid var(--marketing-border);
}

.solon-marketing .founder-profile > p,
.solon-marketing .founder-profile > a {
  grid-column: 2;
}

.solon-marketing .founder-profile .profile-role {
  margin-top: 0.35rem;
  color: var(--marketing-accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.solon-marketing .final-section {
  min-height: 70svh;
  display: flex;
  align-items: center;
}

.solon-marketing .final-invitation {
  max-width: 68rem;
}

.solon-marketing .compact-invitation {
  max-width: 62rem;
}

.solon-marketing .compact-invitation .actions {
  gap: 1.75rem;
}

.solon-marketing footer {
  padding: 3.5rem 0;
  color: #eef0ee;
  background: var(--marketing-inverse);
}

.solon-marketing .footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
}

.solon-marketing .copyright {
  color: var(--marketing-inverse-muted);
}

.solon-marketing .footer-links a {
  color: var(--marketing-inverse-muted);
  font-weight: 400;
}

.solon-marketing .footer-links a:hover {
  color: #ffffff;
}

.solon-marketing .legal-hero {
  padding: clamp(6rem, 11vw, 9rem) 0;
  background: linear-gradient(140deg, var(--marketing-canvas) 12%, var(--marketing-surface-cool) 135%);
  border-bottom: 1px solid var(--marketing-border);
}

.solon-marketing .legal-hero .lead {
  margin-top: 1.5rem;
}

.solon-marketing .narrow-wrap {
  max-width: 52rem;
  margin-left: max(var(--page-gutter), calc((100vw - 78rem) / 2));
}

.solon-marketing .legal-section h2 {
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
}

.solon-marketing .legal-section .body {
  max-width: 46rem;
  margin: 2rem 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  .solon-marketing .hero-copy > * {
    animation: solon-enter 520ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  .solon-marketing .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .solon-marketing .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .solon-marketing .hero-copy > :nth-child(4) { animation-delay: 180ms; }
  .solon-marketing .hero-copy > :nth-child(5) { animation-delay: 220ms; }
}

@media (prefers-reduced-motion: reduce) {
  .solon-company .focus-card:hover {
    transform: none;
  }
}

@keyframes solon-enter {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bridge-signal-down {
  from { opacity: 0; transform: translate(-50%, -0.5rem); }
  20%, 80% { opacity: 0.65; }
  to { opacity: 0; transform: translate(-50%, 4.5rem); }
}

@media (max-width: 64rem) {
  .solon-company .systems-bridge-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  .solon-company .systems-bridge-intro > .body {
    max-width: 42rem;
    padding-bottom: 0;
    justify-self: start;
  }

  .solon-company .systems-bridge-stage {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.5rem;
  }

  .solon-company .bridge-group {
    height: auto;
  }

  .solon-company .bridge-group-label {
    position: static;
    margin: 0 0 1rem;
    text-align: left;
  }

  .solon-company .bridge-input-list,
  .solon-company .bridge-output-list {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(5.25rem, auto));
  }

  .solon-company .bridge-connector {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 4.5rem;
  }

  .solon-company .bridge-connector svg {
    display: none;
  }

  .solon-company .bridge-connector-mobile {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    display: block;
    background: color-mix(in srgb, var(--marketing-accent) 28%, transparent);
  }

  .solon-company .bridge-connector-mobile::after {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--marketing-accent);
    border-radius: 50%;
    content: "";
    opacity: 0;
    animation: bridge-signal-down 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  .solon-company .bridge-connector--out .bridge-connector-mobile::after {
    animation-delay: -2.4s;
  }

  .solon-company .bridge-core {
    width: min(100%, 26rem);
    min-height: 11.5rem;
    margin-inline: auto;
  }

  .solon-company .bridge-output-card {
    min-height: 6.75rem;
    padding: 0.9rem 1rem;
  }
}

@media (max-width: 56.25rem) {
  .solon-marketing .hero {
    min-height: auto;
    padding: 0;
  }

  .solon-marketing .hero-grid {
    min-height: auto;
    padding-block: clamp(6rem, 18vw, 9rem);
  }

  .solon-company .solon-operations-background {
    width: 145%;
    margin-left: -45%;
    opacity: 0.82;
  }

  .solon-marketing .editorial-split,
  .solon-marketing .founder-split {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .solon-marketing .prose-stack,
  .solon-marketing .criteria-list {
    max-width: 44rem;
    padding-top: 0;
  }

  .solon-marketing .criteria-list {
    margin-top: 0;
  }

  .solon-company .hero-copy,
  .solon-company .focus-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .solon-company .hero-copy > .eyebrow,
  .solon-company .hero h1,
  .solon-company .hero-summary,
  .solon-company .focus-intro .eyebrow {
    grid-column: 1;
  }

  .solon-company .hero-summary {
    max-width: 36rem;
    padding-bottom: 0;
  }

  .solon-company .focus-intro .section-note {
    padding-bottom: 0;
    justify-self: start;
  }

  .solon-company .focus-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 3rem;
  }

  .solon-company .focus-cards > li:last-child {
    width: calc((100% - clamp(1rem, 2vw, 1.5rem)) / 2);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .solon-company .capabilities-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  .solon-company .capabilities-intro > .body {
    max-width: 38rem;
    padding-bottom: 0;
    justify-self: start;
  }

  .solon-company .capabilities-stage {
    min-height: 33.5rem;
    grid-template-columns: minmax(17rem, 0.46fr) minmax(0, 0.54fr);
    gap: 1rem;
  }

  .solon-company .capability-visual-frame {
    min-height: 33.5rem;
  }

  .solon-company .capability-control {
    padding-inline: 1.2rem;
  }

}

@media (max-width: 48rem) {
  .solon-company .capabilities-stage {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .solon-company .capability-list {
    grid-template-rows: none;
  }

  .solon-company .capability-control {
    min-height: 8.75rem;
  }

  .solon-company .capability-visual-frame {
    min-height: 34.5rem;
  }
}

@media (max-width: 40rem) {
  body.solon-marketing {
    --content-inset-marketing: clamp(var(--space-5), 6vw, var(--space-6));
    --marketing-nav-height: 4.5rem;
  }

  .solon-company #exploring {
    --focus-anchor-gap: var(--space-6);
    --focus-section-padding-top: 4.75rem;
  }

  .solon-company #about {
    --about-anchor-gap: var(--space-6);
    --about-section-padding-top: 4.75rem;
  }

  .solon-marketing .nav {
    min-height: 4.5rem;
  }

  .solon-marketing .nav-inner {
    gap: 0.75rem;
  }

  .solon-marketing .nav-links {
    gap: 0.75rem;
  }

  .solon-marketing .nav .button {
    min-height: 2.75rem;
    padding-inline: 0.9rem;
  }

  .solon-marketing .hero {
    padding: 0;
  }

  .solon-marketing .hero-grid {
    padding: 5.5rem var(--content-inset-marketing) 6.5rem;
  }

  .solon-company .solon-operations-background {
    width: 190%;
    height: 78%;
    margin: 0 0 0 -90%;
    opacity: 0.68;
  }

  .solon-marketing .hero h1 {
    font-size: clamp(2.95rem, 15vw, 4.2rem);
    line-height: 1.02;
  }

  .solon-company .hero {
    padding: 0;
  }

  .solon-company .hero-grid {
    padding-block: 4.5rem 5.25rem;
  }

  .solon-company .hero h1 {
    font-size: clamp(2.75rem, 12.3vw, 3.5rem);
    line-height: 1.02;
  }

  .solon-conversation .conversation-hero {
    padding: 0;
  }

  .solon-conversation .conversation-hero .hero-grid {
    padding-block: 4.5rem 5.5rem;
  }

  .solon-conversation .conversation-hero h1 {
    font-size: clamp(3.15rem, 15vw, 4.25rem);
  }

  .solon-marketing .hero .lead {
    margin-top: 2rem;
    font-size: 1.0625rem;
  }

  .solon-marketing .actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
  }

  .solon-marketing .editorial-section,
  .solon-marketing .final-section,
  .solon-marketing .legal-section {
    padding: 5.5rem 0;
  }

  .solon-marketing .editorial-section h2,
  .solon-marketing .final-invitation h2,
  .solon-marketing .legal-hero h1,
  .solon-marketing .legal-section h2 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .solon-company .editorial-section {
    padding-block: 4.75rem;
  }

  .solon-company .focus-intro h2 {
    font-size: clamp(2.65rem, 12vw, 3.5rem);
  }

  .solon-company .focus-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2.75rem;
  }

  .solon-company .focus-cards > li:last-child {
    width: 100%;
    grid-column: auto;
  }

  .solon-company .focus-card-visual,
  .solon-company .focus-card-visual svg {
    min-height: 8.75rem;
    height: 8.75rem;
  }

  .solon-company .focus-card-copy {
    min-height: 0;
    padding: 1.35rem;
  }

  .solon-company .focus-card h3 {
    font-size: 1.75rem;
  }

  .solon-company .systems-bridge-section {
    padding-block: 4.75rem;
  }

  .solon-company .systems-bridge-intro h2 {
    font-size: clamp(2.65rem, 12vw, 3.5rem);
  }

  .solon-company .systems-bridge-stage {
    margin-top: 2.75rem;
    padding: 1rem;
  }

  .solon-company .bridge-input-list {
    grid-template-rows: repeat(2, minmax(4.5rem, auto));
    gap: 0.65rem;
  }

  .solon-company .bridge-logo-tile {
    min-height: 4.5rem;
    padding-inline: 0.75rem;
  }

  .solon-company .bridge-output-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0.65rem;
  }

  .solon-company .bridge-output-card {
    min-height: 0;
    padding: 1rem;
  }

  .solon-company .bridge-output-card h3 {
    font-size: 0.95rem;
  }

  .solon-company .bridge-stage-caption {
    line-height: 1.6;
  }

  .solon-company .capabilities-section {
    padding-block: 4.75rem;
  }

  .solon-company .capabilities-intro h2 {
    font-size: clamp(2.65rem, 12vw, 3.5rem);
  }

  .solon-company .capabilities-stage {
    margin-top: 2.75rem;
  }

  .solon-company .capability-control {
    min-height: 0;
    padding: 1.25rem;
  }

  .solon-company .capability-title {
    font-size: 1.6rem;
  }

  .solon-company .capability-visual-frame {
    min-height: 37.5rem;
  }

  .solon-company .capability-visual-state {
    padding: 1.25rem;
  }

  .solon-company .capability-status {
    display: none;
  }

  .solon-company .review-priority-item,
  .solon-company .management-agenda-item {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.65rem;
  }

  .solon-company .review-impact,
  .solon-company .agenda-status {
    grid-column: 2;
    text-align: left;
  }

  .solon-company .diagnosis-row {
    grid-template-columns: 4.75rem minmax(3rem, 1fr) 3.5rem;
    gap: 0.5rem;
  }

  .solon-company .diagnosis-evidence {
    grid-template-columns: 1fr;
  }

  .solon-company .diagnosis-inference {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .solon-company .capability-visual-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .solon-marketing .process-list li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.25rem 1rem;
  }

  .solon-marketing .process-list li p {
    grid-column: 2;
    margin-top: 0.35rem;
  }

  .solon-marketing .conversation-list li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 1rem;
  }

  .solon-marketing .person-row {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: 1.25rem;
  }

  .solon-marketing .person-row img,
  .solon-marketing .founder-profile img {
    width: 3.75rem;
    height: 3.75rem;
  }

  .solon-marketing .person-row > a {
    grid-column: 2;
  }

  .solon-marketing .founder-profile {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    column-gap: 1.25rem;
  }

  .solon-marketing .founder-profile > p,
  .solon-marketing .founder-profile > a {
    grid-column: 1 / -1;
  }

  .solon-marketing .final-section {
    min-height: auto;
  }

  .solon-marketing .footer-inner {
    gap: 2rem;
  }
}

/* Product workspace primitives. Shared across every operational surface. */
:where(body.solon-product) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-heading);
}
:where(body.solon-product) :is(b, strong) { font-weight: var(--font-weight-semibold); }
:where(body.solon-product) :is(.solon-eyebrow, .solon-operational-label, .solon-table th) {
  font-family: var(--font-sans); text-transform: none; letter-spacing: normal;
  color: var(--color-text-secondary); font-size: var(--font-size-sm);
}
:where(body.solon-product) .solon-section-heading { font-size: var(--font-size-lg); }
:where(body.solon-product) a:not([class]) { color: var(--color-accent); text-underline-offset: .2em; }
:where(body.solon-product) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 3px;
}
:where(body.solon-product) :is(button, select, input:not([type=checkbox]):not([type=radio]), summary, .solon-button) {
  min-height: 2.75rem;
}
:where(body.solon-product) details { padding-block: var(--space-3); }
:where(body.solon-product) details > summary {
  font: var(--font-weight-medium) var(--font-size-sm)/var(--line-height-normal) var(--font-sans);
  color: var(--color-accent); gap: var(--space-3);
}
:where(body.solon-product) details > summary::after {
  content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); flex: none; margin: 0 .25rem .25rem;
}
:where(body.solon-product) details[open] > summary::after { content: ""; transform: rotate(225deg); margin-bottom: 0; }
:where(body.solon-product) .solon-alert { background: var(--color-bg-surface); }
.solon-surface { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.solon-section { padding: var(--space-6); min-width: 0; }
.solon-divided > * + * { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }

/* Workspace role aliases. Values inherit the usesolon family foundation.
   New primitives opt in; existing screens are not globally restyled by this layer. */
:root {
  --workspace-title-size: var(--font-size-3xl);
  --workspace-section-size: var(--font-size-lg);
  --workspace-body-size: var(--font-size-base);
  --workspace-label-size: var(--font-size-sm);
  --workspace-meta-size: 0.8125rem;
  --workspace-section-gap: var(--space-8);
  --workspace-group-gap: var(--space-6);
  --workspace-field-gap: var(--space-3);
  --workspace-panel-padding: var(--space-6);
  --workspace-panel-padding-compact: var(--space-4);
  --workspace-row-padding: var(--space-4);
  --workspace-row-padding-compact: var(--space-3);
  --workspace-control-height: var(--control-height);
  --workspace-control-height-compact: 2.75rem;
  --workspace-copy-width: 78ch;
  --workspace-reading-width: 66ch;
  --workspace-observed: var(--color-accent);
  --workspace-inferred: var(--color-warning);
  --workspace-unknown: var(--color-text-secondary);
  --workspace-action: var(--color-accent);
  --workspace-verified: var(--color-success);
}
.workspace-page-header { display: grid; gap: var(--space-4); }
.workspace-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4) var(--workspace-group-gap); }
.workspace-page-title { margin: 0; min-width: 0; font-size: var(--workspace-title-size); overflow-wrap: anywhere; }
.workspace-summary { margin: 0; max-width: var(--workspace-copy-width); font-size: var(--workspace-body-size); overflow-wrap: anywhere; }
.workspace-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--workspace-label-size); }
.workspace-breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--workspace-control-height-compact); color: var(--color-accent); text-underline-offset: .2em; }
.workspace-status { display: inline-flex; align-items: center; font-size: var(--workspace-label-size); color: var(--color-text-secondary); }
.workspace-status--accent { color: var(--color-accent); }
.workspace-status--attention { color: var(--color-warning); }
.workspace-status--danger { color: var(--color-danger); }
.workspace-status--success { color: var(--color-success); }
@media (max-width: 56.25rem) {
  .workspace-title-row { flex-direction: column; gap: var(--space-2); }
}
@media (max-width: 40rem) {
  .workspace-page-title { font-size: calc(var(--workspace-title-size) - var(--space-1)); }
}