@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --home-bg: #f9f9f9;
  --home-surface: #fff;
  --home-header: rgba(249, 249, 249, .72);
  --home-line: #e2e9f5;
  --home-border: rgba(0, 0, 0, .12);
  --home-chip: #f0f4fb;
  --home-fg: #304261;
  --home-muted: #597099;
  --home-dim: #cdd4df;
  --home-faint: #8fa3c4;
  --home-navy: #304261;
  --home-navy-2: #3b5279;
  --home-input: #3a4d70;
  --home-accent: #264c72;
  --home-accent-hover: #304261;
  --home-gold: #c9a86a;
  --home-on-accent: #fff;
  --home-eyebrow: #8a6b2e;
  /* Value ramp for the True Presence factor charts: strongest to weakest. */
  --home-ramp-1: #4a3712;
  --home-ramp-2: #8a6b2e;
  --home-ramp-3: #b3934f;
  --home-ramp-4: #dfd2b4;
  --home-ramp-index: #4a3712;
  --home-card-shadow: 0 1px 2px rgba(48, 66, 97, .06);
  --home-card-shadow-hover: 0 8px 24px rgba(48, 66, 97, .12);
  --dash-bg: #f9f9f9;
  --dash-card: #fff;
  --dash-rail: #304261;
  --dash-grid: #edf1f7;
  --dash-fg: #304261;
  --dash-muted: #597099;
  --dash-tick: #8fa3c4;
  --dash-band: #f5f7fa;
  --dash-axis0: #cdd4df;
  --dash-positive: #0f7a63;
  --dash-positive-bg: #e4f6f2;
  --dash-negative: #b3325c;
  --dash-negative-bg: #fbe7ee;
  --dash-soft: #f0f4fb;
  --dash-line: #e2e9f5;
  --dash-badge-fg: #264c72;
  /* One colour per funnel-stage group in the intent chart. */
  --dash-bar-1: #304261;
  --dash-bar-2: #ae36c9;
  --dash-bar-3: #35c3ae;
  --dash-bar-4: #e08e6b;
  --dash-bar-5: #097985;
  /* One ramp per competitor in the share chart: oldest to newest period. */
  --dash-a-1: #9ed6f5;
  --dash-a-2: #4aa7e0;
  --dash-a-3: #0691e1;
  --dash-b-1: #aab6c9;
  --dash-b-2: #7d8fae;
  --dash-b-3: #597099;
  --dash-c-1: #86ccc0;
  --dash-c-2: #55c3b0;
  --dash-c-3: #1f9e8b;
  --dash-d-1: #b9c3d4;
  --dash-d-2: #93a0b8;
  --dash-d-3: #6d7d99;
  --dash-e-3: #e0a184;
  /* Compatibility tokens consumed by About, Blog, and shared layout partials. */
  --blue: var(--home-accent);
  --blue-dark: var(--home-fg);
  --blue-mid: var(--home-muted);
  --gold: var(--home-gold);
  --gold-light: #f5ce84;
  --gold-text: #1a3352;
  --text-main: var(--home-fg);
  --text-mid: var(--home-muted);
  --text-sec: var(--home-muted);
  --text-muted: var(--home-faint);
  --surface-1: var(--home-surface);
  --surface-2: var(--home-chip);
  --surface-soft: var(--home-chip);
  --border-subtle: var(--home-line);
  --border-strong: var(--home-border);
  --shadow-soft: var(--home-card-shadow-hover);
  --shadow-card: var(--home-card-shadow);
  --hero-bg: linear-gradient(160deg, var(--home-surface), var(--home-chip));
  --hero-grid-line: rgba(38, 76, 114, .04);
  --hero-glow: radial-gradient(circle, rgba(201, 168, 106, .1) 0%, transparent 65%);
  --font-os: 'Open Sans', sans-serif;
  --font-ft: 'Open Sans', sans-serif;
}

html.symios-home-page[data-theme="dark"] {
  color-scheme: dark;
  --home-bg: #131a29;
  --home-surface: #1c2537;
  --home-header: rgba(19, 26, 41, .68);
  --home-line: rgba(255, 255, 255, .1);
  --home-border: rgba(255, 255, 255, .12);
  --home-chip: #2a3450;
  --home-fg: #fff;
  --home-muted: #a9b8d4;
  --home-dim: #6b7c9c;
  --home-faint: #6b7c9c;
  --home-navy: #0e1521;
  --home-navy-2: #1a2439;
  --home-input: #232e45;
  --home-accent: #c9a86a;
  --home-accent-hover: #dcc08c;
  --home-on-accent: #1f2a3d;
  --home-eyebrow: #c9a86a;
  --home-ramp-1: #f0e3c4;
  --home-ramp-2: #dcc08c;
  --home-ramp-3: #c9a86a;
  --home-ramp-4: #8a6c2e;
  --home-ramp-index: #e3d2ae;
  --home-card-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  --home-card-shadow-hover: 0 8px 28px rgba(0, 0, 0, .3);
  --dash-bg: #0d1421;
  --dash-card: #131c2b;
  --dash-rail: #0f1826;
  --dash-grid: rgba(255, 255, 255, .07);
  --dash-fg: #eaf0fa;
  --dash-muted: #94a3bd;
  --dash-tick: #7c8ba6;
  --dash-band: #1a2434;
  --dash-axis0: rgba(255, 255, 255, .16);
  --dash-positive: #5fd6a4;
  --dash-positive-bg: rgba(53, 195, 174, .16);
  --dash-negative: #f2a3bd;
  --dash-negative-bg: rgba(233, 181, 245, .14);
  --dash-soft: rgba(255, 255, 255, .07);
  --dash-line: rgba(255, 255, 255, .10);
  --dash-badge-fg: #9dc4ea;
  --dash-bar-1: #3d6c99;
  --dash-bar-2: #c94fd6;
  --dash-bar-3: #35c3ae;
  --dash-bar-4: #e8785a;
  --dash-bar-5: #5f9e6b;
  --dash-a-1: #2f5f88;
  --dash-a-2: #3f88bd;
  --dash-a-3: #59a9e6;
  --dash-b-1: #33405a;
  --dash-b-2: #4a5c7d;
  --dash-b-3: #6b80a3;
  --dash-c-1: #1b5b52;
  --dash-c-2: #23806f;
  --dash-c-3: #35c3ae;
  --dash-d-1: #2b3648;
  --dash-d-2: #3b4860;
  --dash-d-3: #4e5d78;
  --dash-e-3: #8a5f4c;
  --gold-light: #f4d38c;
  --gold-text: #08111b;
  --hero-grid-line: rgba(191, 208, 227, .08);
  --hero-glow: radial-gradient(circle, rgba(245, 206, 132, .15) 0%, transparent 62%);
}

/* site.css pins html/body with position: fixed and overflow: hidden for the
   app shell; the public pages need normal document scrolling instead. */
html.symios-home-page,
body.symios-home-page {
  position: static;
  width: auto;
  min-height: 100%;
  height: auto;
  overflow: visible;
}

/* Horizontal clipping stays on html only: clipping body would turn it into a
   scroll container and break the sticky header. */
html.symios-home-page {
  overflow-x: hidden;
  /* Lets the FAQ disclosure animate from 0 to its auto height. */
  interpolate-size: allow-keywords;
}

body.symios-home-page {
  background: var(--home-bg);
  color: var(--home-muted);
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/*
 * Public page frame — sticky footer without the iOS Safari gap under the footer.
 * Prefer svh (small viewport): 100vh on iPhone is taller than the visible area.
 */
.symios-public-main {
  width: 100%;
}

.symios-public-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
}

.symios-public-frame > .home-footer {
  margin-top: auto;
  flex: 0 0 auto;
}

.new-home,
.new-home * {
  box-sizing: border-box;
}

.new-home {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  background: var(--home-bg);
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  transition: background .2s ease, color .2s ease;
}

.new-home > .home-footer {
  margin-top: auto;
  flex: 0 0 auto;
}

.new-home a {
  color: inherit;
  text-decoration: none;
}

/* Drops the UA/Bootstrap top margin without out-specifying the component rules
   that set their own spacing. */
:where(.new-home) :is(h1, h2, h3, h4, p) {
  margin-top: 0;
}

/* Shared shell bits used by About and Blog. */
.hero-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-logo-image--dark,
html.symios-home-page[data-theme="dark"] .hero-logo-image--light {
  display: none;
}

html.symios-home-page[data-theme="dark"] .hero-logo-image--dark {
  display: block;
}

.anim-fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s ease, transform .5s ease;
}

.is-visible .anim-fadeup {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: .07s;
}

.delay-2 {
  transition-delay: .14s;
}

/* Hero shell shared by the About and Blog pages. */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hero-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  top: -10%;
  right: 15%;
  width: 500px;
  height: 500px;
  background: var(--hero-glow);
  pointer-events: none;
}

.hero-logo-wrap {
  width: 290px;
  height: 69px;
  flex-shrink: 0;
  margin-bottom: 52px;
}

.hero-body1 {
  max-width: 660px;
  margin-bottom: 28px;
  color: var(--home-muted);
  font-size: clamp(.97rem, 1.4vw, 1.1rem);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .hero-logo-wrap {
    width: 220px;
    height: 52px;
    margin-bottom: 36px;
  }
}

.home-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--home-line);
  background: var(--home-header);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* The navbar is shared with pages that sit outside .new-home, so links cannot
   rely on the decoration reset scoped to that wrapper. */
.home-header a {
  text-decoration: none;
}

.home-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
  max-width: 1200px;
  min-height: 64px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 24px);
}

.home-mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.home-mark img {
  display: block;
  width: auto;
  height: 26px;
}

.logo-dark,
html.symios-home-page[data-theme="dark"] .logo-light {
  display: none !important;
}

html.symios-home-page[data-theme="dark"] .logo-dark {
  display: block !important;
}

.home-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.home-nav-links a {
  color: var(--home-muted);
  font-size: 13px;
  font-weight: 600;
  transition: color .2s ease;
}

.home-nav-links a:hover,
.home-nav-links a[aria-current="page"] {
  color: var(--home-fg);
}

.home-nav-spacer {
  flex: 1;
}

.home-lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  background: var(--home-surface);
}

.home-lang a {
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.home-lang a.active {
  color: var(--home-on-accent);
  background: var(--home-accent);
}

.home-theme,
.home-menu {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--home-line);
  border-radius: 8px;
  background: var(--home-surface);
  color: var(--home-muted);
  cursor: pointer;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out;
}

.home-theme:hover,
.home-menu:hover {
  border-color: var(--home-muted);
  color: var(--home-fg);
}

.home-theme .material-symbols-outlined,
.home-menu .material-symbols-outlined {
  font-size: 19px;
}

.theme-light-icon,
html.symios-home-page[data-theme="dark"] .theme-dark-icon {
  display: none;
}

html.symios-home-page[data-theme="dark"] .theme-light-icon {
  display: inline;
}

.home-menu {
  display: none;
}

.home-nav-cta {
  display: inline-flex;
  height: 36px;
  align-items: center;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--home-accent);
  color: var(--home-on-accent) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out;
}

.home-nav-cta:hover {
  background: var(--home-accent-hover);
}

.cta-short {
  display: none;
}

.mobile-nav {
  display: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.true-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 11vw, 112px) clamp(18px, 4vw, 24px) clamp(60px, 10vw, 104px);
  background: var(--home-navy);
  background-image: radial-gradient(1100px 520px at 50% -10%, var(--home-navy-2) 0%, var(--home-navy) 62%);
}

.hero-aurora {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1500px;
  height: 1500px;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(201, 168, 106, .22) 42deg, transparent 96deg, rgba(122, 196, 238, .14) 172deg, transparent 232deg, rgba(201, 168, 106, .16) 306deg, transparent 360deg);
  filter: blur(70px);
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: -10% -2%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(700px 420px at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(700px 420px at 50% 45%, #000 0%, transparent 78%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  animation: home-rise .5s ease-in-out both;
}

.hero-wordmark {
  display: block;
  width: auto;
  height: 50px;
  margin: 0 auto 48px;
}

.hero-question {
  margin: 0 auto 28px;
  color: #fff;
  font-size: clamp(22px, 4.6vw, 34px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hero-inner h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 9vw, 68px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hero-inner h1 > .hero-intro {
  display: block;
  margin-bottom: 6px;
  color: #c8d4e8;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 400;
  letter-spacing: 0;
}

.hero-inner h1 strong {
  display: block;
  color: var(--home-gold);
  font-size: clamp(42px, 10.5vw, 82px);
  font-weight: 700;
  filter: drop-shadow(0 0 12px rgba(201, 168, 106, .16));
}

[data-hero-sweep] {
  display: block;
  color: var(--home-gold);
  background-image: linear-gradient(105deg, #c9a86a 0%, #c9a86a 38%, #fff7e4 48%, #fffdf6 50%, #fff7e4 52%, #c9a86a 62%, #c9a86a 100%);
  background-position: 85% 50%;
  background-size: 320% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-inner > p:not(.hero-question) {
  max-width: 680px;
  margin: 28px auto 0;
  color: #c8d4e8;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.button {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out;
}

.button-gold {
  background: var(--home-gold);
  color: #1f2a3d !important;
}

.button-gold:hover {
  background: #dcc08c;
}

.button-outline {
  border: 1px solid #6e86ae;
  color: #c8d4e8 !important;
  font-weight: 600;
}

.button-outline:hover {
  border-color: #c8d4e8;
  color: #fff !important;
}

.home-section {
  padding: clamp(60px, 10vw, 104px) clamp(18px, 4vw, 24px);
  border-bottom: 1px solid var(--home-line);
}

.section-wrap,
.split-grid {
  max-width: 1200px;
  margin: 0 auto;
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}

.section-intro {
  max-width: 760px;
}

.eyebrow {
  margin-bottom: 20px;
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-section h2 {
  margin-bottom: 0;
  color: var(--home-fg);
  font-size: clamp(27px, 4.8vw, 40px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.body-copy {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--home-muted);
  font-size: 16px;
  line-height: 1.65;
}

.problem-section .body-copy {
  max-width: 520px;
  margin-top: 28px;
}

.problem-section .body-copy + .body-copy {
  margin-top: 18px;
}

.card {
  border: 1px solid var(--home-border);
  border-radius: 12px;
  background: var(--home-surface);
  box-shadow: var(--home-card-shadow);
  transition: box-shadow .16s ease-in-out, transform .16s ease-in-out;
}

.card:hover {
  transform: scale(1.008);
  box-shadow: var(--home-card-shadow-hover);
}

.answer-mock {
  padding: 22px 24px 24px;
}

.answer-mock header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--home-line);
}

.answer-mock header b {
  color: var(--home-fg);
  font-size: 12px;
  font-weight: 600;
}

.answer-mock header small {
  margin-left: auto;
  color: var(--home-faint);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35c3ae;
}

.answer-mock > p {
  margin: 16px 0 14px;
  color: var(--home-muted);
  font-size: 13px;
  line-height: 1.6;
}

.answer-mock ol {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.answer-mock li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--home-chip);
}

.answer-mock li > span {
  width: 14px;
  color: var(--home-muted);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.answer-mock li i {
  width: var(--bar-width);
  height: 8px;
  border-radius: 999px;
  background: #c3ccdb;
}

.answer-mock li.is-you {
  border: 1px solid var(--home-gold);
  background: var(--home-surface);
}

.answer-mock li.is-you span,
.answer-mock li.is-you b {
  color: #8a6b2e;
}

.answer-mock li.is-you i {
  background: #8a6b2e;
}

.answer-mock li b {
  margin-left: auto;
  font-size: 11px;
}

.answer-mock footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--home-line);
  color: var(--home-faint);
  font-size: 12px;
  line-height: 1.5;
}

.presence-section,
.tech-section,
.faq-section {
  background: var(--home-surface);
}

.factor-grid,
.workflow-grid,
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
}

.factor-card {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  padding: 24px;
}

.factor-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.factor-card h3,
.workflow-grid h3,
.tech-grid h3 {
  margin: 0;
  color: var(--home-fg);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.factor-card header > span {
  color: var(--home-dim);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
}

.factor-card > p {
  margin: auto 0 0;
  padding-top: 22px;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.6;
}

.engine-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.engine-bars div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  color: var(--home-muted);
  font-size: 12px;
}

.engine-bars b {
  color: var(--home-fg);
  font-family: 'Inter', sans-serif;
}

.engine-bars i {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--home-chip);
}

.engine-bars em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--home-ramp-4);
}

.engine-bars div:nth-child(1) em {
  background: var(--home-ramp-1);
}

.engine-bars div:nth-child(2) em {
  background: var(--home-ramp-2);
}

.engine-bars div:nth-child(3) em {
  background: var(--home-ramp-3);
}

.ranking-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 22px;
}

.ranking-bars i {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--home-muted);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-style: normal;
}

.ranking-bars em {
  display: block;
  height: 22px;
  border-radius: 6px;
  background: var(--home-ramp-4);
}

.ranking-bars i:nth-child(1) em {
  background: var(--home-ramp-1);
}

.ranking-bars i:nth-child(2) em {
  background: var(--home-ramp-2);
}

.ranking-bars i:nth-child(3) em {
  background: var(--home-ramp-3);
}

.ranking-bars i:last-child em {
  border: 1px solid var(--home-line);
  background: var(--home-chip);
}

.ranking-bars i:nth-child(1) span {
  color: var(--home-ramp-index);
}

.ranking-bars i:nth-child(n + 4) span {
  color: var(--home-dim);
}

.density-dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 7px;
  margin-top: 24px;
}

.density-dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--home-line);
}

.density-dots i.active {
  background: var(--home-eyebrow);
}

.density-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
}

.density-value strong {
  color: var(--home-fg);
  font-family: 'Inter', sans-serif;
  font-size: 28px;
}

.density-value span {
  color: var(--home-muted);
  font-size: 12px;
}

.presence-close {
  max-width: 900px;
  margin: 40px 0 0;
  padding-top: 40px;
  border-top: 1px solid var(--home-line);
  color: var(--home-fg);
  font-size: clamp(19px, 2.9vw, 26px);
  font-weight: 600;
  line-height: 1.35;
}

.workflow-grid article,
.tech-grid article {
  padding: 28px 24px;
}

.step {
  display: block;
  margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.step-1 { color: #0f95e2; }
.step-2 { color: #6d40ec; }
.step-3 { color: #35c3ae; }

.workflow-grid p,
.tech-grid p {
  margin: 12px 0 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.65;
}

.loop-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  color: var(--home-muted);
  font-size: 12px;
}

.loop-note .material-symbols-outlined {
  font-size: 18px;
}

.dashboard-preview {
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: 12px;
  background: var(--dash-bg);
  box-shadow: 0 24px 60px rgba(48, 66, 97, .12);
  font-family: 'Open Sans', sans-serif;
}

.dashboard-preview > header {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--home-line);
  background: var(--dash-card);
  color: var(--dash-muted);
}

.dashboard-preview > header > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.dashboard-preview > header > div > span {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--home-line);
  border-radius: 6px;
  font-size: 12px;
}

.dashboard-preview > header .material-symbols-outlined {
  font-size: 20px;
}

.dash-toggle {
  display: block;
  opacity: .7;
}

/* Both icons ship with a fixed navy fill, so on the dark shell they are
   inverted to a light tint instead of staying near-invisible. */
html.symios-home-page[data-theme="dark"] .dash-toggle {
  opacity: .6;
  filter: brightness(0) invert(1);
}

.dashboard-shell {
  display: flex;
}

.dashboard-shell aside {
  display: flex;
  width: 52px;
  flex: 0 0 52px;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  background: var(--dash-rail);
  color: #8fa3c4;
}

/* The rail icons ship in the dashboard navy; the filter recolours them to the
   white the dark rail needs. */
.dashboard-shell aside img {
  display: block;
  opacity: .55;
  filter: brightness(0) invert(1);
}

.dashboard-shell aside img.is-active {
  opacity: 1;
}

.dashboard-shell aside .material-symbols-outlined {
  font-size: 22px;
}

.dashboard-shell main {
  flex: 1;
  min-width: 0;
  padding: clamp(14px, 2.4vw, 24px);
}

.dashboard-shell main > h3 {
  margin: 0;
  color: var(--dash-fg);
  font-size: 24px;
  font-weight: 700;
}

.dashboard-shell main > p {
  margin: 4px 0 16px;
  color: var(--dash-muted);
  font-size: 12px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

.metric-grid article,
.engine-panel,
.intent-chart,
.share-panel {
  padding: 16px;
  border: 1px solid var(--home-border);
  border-radius: 12px;
  background: var(--dash-card);
}

.metric-grid h4,
.engine-panel h4,
.intent-chart h4,
.share-panel h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--dash-fg);
  font-size: 14px;
  font-weight: 600;
}

.dash-info {
  display: block;
  flex: 0 0 auto;
  opacity: .55;
}

html.symios-home-page[data-theme="dark"] .dash-info {
  opacity: .5;
  filter: brightness(0) invert(1);
}

.metric-grid h4 {
  min-height: 22px;
}

.engine-panel h4,
.intent-chart h4,
.share-panel h4 {
  min-height: 19px;
}

.metric-grid h4 > span:first-child {
  white-space: nowrap;
}

/* "COMPETITIVE" pill, pushed to the far end of the card header. */
.metric-grid h4 em {
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid var(--dash-line);
  border-radius: 999px;
  background: var(--dash-soft);
  color: var(--dash-badge-fg);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

.metric-grid article > p,
.engine-panel > p,
.intent-chart > p,
.share-panel > p {
  margin: 6px 0 0;
  color: var(--dash-muted);
  font-size: 12px;
  line-height: 1.42;
}

/* The chart captions carry an inline dashed swatch, so they lay out as rows. */
.intent-chart > p,
.share-panel > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Keeps the three KPI cards aligned when their subtitles wrap differently. */
.metric-grid article > p {
  min-height: 34px;
}

.metric-grid article > strong {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
  color: var(--dash-fg);
  font-family: 'Inter', sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: normal;
}

.metric-grid article > strong small {
  color: var(--dash-muted);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
}

.metric-delta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  line-height: normal;
}

.metric-delta b {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.metric-delta > span {
  color: var(--dash-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
}

.metric-grid .positive { color: var(--dash-positive); background: var(--dash-positive-bg); }
.metric-grid .negative { color: var(--dash-negative); background: var(--dash-negative-bg); }
.metric-grid .neutral { color: var(--dash-muted); background: var(--dash-soft); }

.metric-grid svg {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 12px;
  overflow: visible;
}

/* Sparkline rules keep the same light tone in both themes, as in the design. */
.metric-grid svg line {
  stroke: #e2e9f5;
}

.metric-grid polyline {
  stroke: var(--dash-positive);
  stroke-width: 1;
}

.metric-grid polygon {
  fill: rgba(53, 195, 174, .14);
}

.metric-periods {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--dash-muted);
  font-size: 9px;
  line-height: normal;
}

.engine-panel,
.intent-chart,
.share-panel {
  margin-top: 16px;
}

.share-panel h4 {
  flex-wrap: wrap;
}

.share-panel h4 em {
  margin-left: auto;
  color: var(--dash-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
}

.engine-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - 5px), 132px), 1fr));
  gap: 10px;
  margin-top: 14px;
}

.engine-cards > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--home-line);
  border-radius: 10px;
  line-height: normal;
}

.engine-name {
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 7px;
  color: var(--dash-fg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Engine brand colours: fixed identities, not themed tokens. */
.engine-name i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.engine-cards > div:nth-child(1) .engine-name i { background: #264c72; }
.engine-cards > div:nth-child(2) .engine-name i { background: #0f95e2; }
.engine-cards > div:nth-child(3) .engine-name i { background: #7ac4ee; }
.engine-cards > div:nth-child(4) .engine-name i { background: #ae36c9; }
.engine-cards > div:nth-child(5) .engine-name i { background: #e9b5f5; }

.engine-cards strong {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 6px;
  color: var(--dash-fg);
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
}

.engine-cards strong small {
  color: var(--dash-muted);
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
}

.engine-cards b {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--dash-positive-bg);
  color: var(--dash-positive);
  font-size: 10px;
  font-weight: 700;
}

/* Shared chart frame: a 200px plot strip that the axis labels, the group bands
   and the gridline overlay all bottom-align against. */
.chart-body {
  display: flex;
  align-items: flex-end;
  margin-top: 22px;
  padding-top: 10px;
}

.share-panel .chart-body {
  margin-top: 16px;
  padding-top: 12px;
}

.chart-axis {
  position: relative;
  height: 200px;
  flex: 0 0 32px;
  margin-bottom: 32px;
}

.chart-axis.is-wide {
  flex-basis: 38px;
}

.chart-axis span {
  position: absolute;
  right: 6px;
  color: var(--dash-tick);
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  line-height: normal;
  white-space: nowrap;
  transform: translateY(50%);
}

.chart-axis span:nth-child(1) { bottom: 0; }
.chart-axis span:nth-child(2) { bottom: 20%; }
.chart-axis span:nth-child(3) { bottom: 40%; }
.chart-axis span:nth-child(4) { bottom: 60%; }
.chart-axis span:nth-child(5) { bottom: 80%; }
.chart-axis span:nth-child(6) { bottom: 100%; }

.chart-groups {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: flex-end;
  column-gap: 6px;
  padding-bottom: 32px;
}

.chart-group {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.chart-stage {
  overflow: hidden;
  padding: 0 2px 8px;
  color: var(--dash-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chart-band {
  position: relative;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  height: 200px;
  align-items: flex-end;
  gap: 8px;
  /* Keep bar bottoms above the 0% gridline (drawn as border-top). */
  padding: 0 8px 1px;
  border-radius: 6px 6px 0 0;
  background: var(--dash-band);
}

.chart-band i {
  position: relative;
  min-width: 0;
  flex: 1;
  border-radius: 3px 3px 0 0;
}

.chart-band b {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  padding-bottom: 3px;
  color: var(--dash-fg);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}

.chart-band span {
  position: absolute;
  top: 100%;
  right: -4px;
  left: -4px;
  padding-top: 6px;
  color: var(--dash-muted);
  font-size: 9px;
  font-style: normal;
  line-height: 1.25;
  text-align: center;
}

.chart-gridlines {
  position: absolute;
  right: 0;
  bottom: 32px;
  left: 0;
  z-index: 1;
  height: 200px;
  pointer-events: none;
}

.chart-gridlines i {
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px solid var(--dash-grid);
}

.chart-gridlines i:nth-child(1) {
  bottom: 0;
  border-top-color: var(--dash-axis0);
}

.chart-gridlines i:nth-child(2) { bottom: 20%; }
.chart-gridlines i:nth-child(3) { bottom: 40%; }
.chart-gridlines i:nth-child(4) { bottom: 60%; }
.chart-gridlines i:nth-child(5) { bottom: 80%; }
.chart-gridlines i:nth-child(6) { bottom: 100%; }

.intent-chart .chart-group:nth-child(1) .chart-band i { background: var(--dash-bar-1); }
.intent-chart .chart-group:nth-child(2) .chart-band i { background: var(--dash-bar-2); }
.intent-chart .chart-group:nth-child(3) .chart-band i { background: var(--dash-bar-3); }
.intent-chart .chart-group:nth-child(4) .chart-band i { background: var(--dash-bar-4); }
.intent-chart .chart-group:nth-child(5) .chart-band i { background: var(--dash-bar-5); }

.share-column .chart-band {
  gap: 4px;
  padding: 0 6px 1px;
  border-radius: 0;
  background: none;
}

.share-column[data-brand="a"] .chart-band i:nth-child(1) { background: var(--dash-a-1); }
.share-column[data-brand="a"] .chart-band i:nth-child(2) { background: var(--dash-a-2); }
.share-column[data-brand="a"] .chart-band i:nth-child(3) { background: var(--dash-a-3); }
.share-column[data-brand="b"] .chart-band i:nth-child(1) { background: var(--dash-b-1); }
.share-column[data-brand="b"] .chart-band i:nth-child(2) { background: var(--dash-b-2); }
.share-column[data-brand="b"] .chart-band i:nth-child(3) { background: var(--dash-b-3); }
.share-column[data-brand="you"] .chart-band i:nth-child(1) { background: #e9b5f5; }
.share-column[data-brand="you"] .chart-band i:nth-child(2) { background: #c77bde; }
.share-column[data-brand="you"] .chart-band i:nth-child(3) { background: var(--dash-bar-2); }
.share-column[data-brand="c"] .chart-band i:nth-child(1) { background: var(--dash-c-1); }
.share-column[data-brand="c"] .chart-band i:nth-child(2) { background: var(--dash-c-2); }
.share-column[data-brand="c"] .chart-band i:nth-child(3) { background: var(--dash-c-3); }
.share-column[data-brand="d"] .chart-band i:nth-child(1) { background: var(--dash-d-1); }
.share-column[data-brand="d"] .chart-band i:nth-child(2) { background: var(--dash-d-2); }
.share-column[data-brand="d"] .chart-band i:nth-child(3) { background: var(--dash-d-3); }
.share-column[data-brand="e"] .chart-band i:nth-child(3) { background: var(--dash-e-3); }

.share-column[data-brand="you"] .chart-band span {
  color: #ae36c9;
  font-weight: 700;
}

.share-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  color: var(--dash-muted);
  font-size: 10px;
  line-height: normal;
}

.share-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.share-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.share-legend span:nth-child(1) i { background: var(--dash-axis0); }
.share-legend span:nth-child(2) i { background: var(--dash-tick); }
.share-legend span:nth-child(3) i { background: var(--dash-bar-1); }

.contact-section {
  padding: clamp(56px, 9vw, 96px) clamp(18px, 4vw, 24px);
  background: var(--home-navy);
}

.contact-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-section h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 4.4vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.contact-section > div > div > p {
  max-width: 440px;
  margin: 18px 0 0;
  color: #c8d4e8;
  font-size: 16px;
  line-height: 1.6;
}

.contact-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-fields input {
  height: 52px;
  flex: 1 1 220px;
  padding: 0 16px;
  border: 1px solid #6e86ae;
  border-radius: 8px;
  outline: 0;
  background: var(--home-input);
  color: #fff;
  font: 15px 'Open Sans', sans-serif;
}

.contact-fields input::placeholder {
  color: #c8d4e8;
}

.contact-fields input:focus {
  border-color: #c8d4e8;
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .1);
}

.contact-fields input.is-invalid {
  border-color: #ff9d9d;
}

.contact-fields input:disabled {
  cursor: wait;
  opacity: .65;
}

.contact-fields button {
  position: relative;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 8px;
  background: var(--home-gold);
  color: #1f2a3d;
  cursor: pointer;
  font: 700 15px 'Open Sans', sans-serif;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out;
}

.contact-fields button:hover:not(:disabled) {
  background: #dcc08c;
}

.contact-fields button:disabled {
  cursor: wait;
  opacity: .7;
}

.contact-fields button.is-loading {
  padding-left: 44px;
}

.contact-fields button.is-loading::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(31, 42, 61, .25);
  border-top-color: #1f2a3d;
  border-radius: 50%;
  animation: contact-spin .7s linear infinite;
}

@keyframes contact-spin {
  to { transform: rotate(360deg); }
}

.contact-feedback {
  min-height: 20px;
  margin: 8px 0 0;
  color: #c8d4e8;
  font-size: 13px;
}

.contact-feedback.is-error { color: #ffd1d1; }
.contact-feedback.is-success { color: #d8f6da; }

.tech-section h2 {
  max-width: 640px;
  font-size: clamp(24px, 3.8vw, 32px);
}

.tech-grid article > .material-symbols-outlined {
  color: var(--home-accent);
  font-size: 24px;
}

.tech-grid h3 {
  margin-top: 14px;
}

.faq-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.faq-layout > aside {
  position: sticky;
  top: 96px;
}

.faq-layout > aside h2 {
  font-size: clamp(24px, 3.8vw, 32px);
}

.faq-layout > aside p {
  margin: 16px 0 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.65;
}

.faq-groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.faq-groups section > h3 {
  margin: 0 0 12px;
  color: var(--home-eyebrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.faq-groups details {
  border-top: 1px solid var(--home-line);
}

/* Animated disclosure: needs interpolate-size on the root to reach `auto`.
   Browsers without ::details-content support simply snap open. */
.faq-groups details::details-content {
  overflow: hidden;
  block-size: 0;
  transition: block-size .28s ease-in-out, content-visibility .28s;
  transition-behavior: allow-discrete;
}

.faq-groups details[open]::details-content {
  block-size: auto;
}

.faq-groups details:last-child {
  border-bottom: 1px solid var(--home-line);
}

.faq-groups summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  color: var(--home-fg);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}

.faq-groups summary::-webkit-details-marker {
  display: none;
}

.faq-groups summary span:first-child {
  flex: 1;
}

.faq-groups summary .material-symbols-outlined {
  color: var(--home-muted);
  font-size: 20px;
  transition: transform .2s ease;
}

.faq-groups details[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}

.faq-groups details > p {
  padding: 0 36px 20px 0;
  margin: 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.7;
}

.home-footer {
  padding: clamp(44px, 7vw, 56px) clamp(18px, 4vw, 24px) 40px;
  background: var(--home-navy);
}

.home-footer > div {
  max-width: 1200px;
  margin: 0 auto;
}

.home-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}

.home-footer .footer-top > div {
  max-width: 420px;
}

.home-footer .footer-top img {
  display: block;
  width: auto;
  height: 26px;
}

.home-footer .footer-top p {
  margin: 18px 0 0;
  color: #c8d4e8;
  font-size: 13px;
  line-height: 1.6;
}

.home-footer .footer-top nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: auto;
}

/* The footer is shared with pages that sit outside .new-home, so it cannot rely
   on the link reset scoped to that wrapper. */
.home-footer .footer-top nav a {
  color: #c8d4e8;
  font-size: 13px;
  text-decoration: none;
  transition: color .2s ease-in-out;
}

.home-footer .footer-top nav a:hover {
  color: #fff;
}

.home-footer .footer-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-footer .footer-linkedin-icon {
  flex-shrink: 0;
  display: block;
}

.home-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.home-footer .copyright {
  margin: 0;
  color: #8fa3c4;
  font-size: 12px;
}

.home-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.home-footer .footer-legal-sep {
  color: #8fa3c4;
  font-size: 12px;
  user-select: none;
}

.home-footer .footer-legal a {
  color: #8fa3c4;
  font-size: 12px;
  text-decoration: none;
}

.home-footer .footer-legal a:hover {
  color: #fff;
}

[data-reveal] {
  transition: opacity .55s ease-in-out, transform .55s ease-in-out, box-shadow .16s ease-in-out;
}

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

@keyframes home-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Narrow viewports drop the least important series so the bands stay readable. */
@media (max-width: 1120px) {
  .chart-band i[data-intent="review"],
  .chart-band i[data-intent="trend"],
  .chart-band i[data-intent="hero"],
  .share-column[data-brand="e"] {
    display: none;
  }
}

@media (max-width: 900px) {
  .chart-band i[data-intent="comparison"],
  .chart-band i[data-intent="price"],
  .share-column[data-brand="d"] {
    display: none;
  }

  .split-grid,
  .contact-inner,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .factor-grid,
  .workflow-grid,
  .tech-grid {
    grid-template-columns: 1fr;
  }

  .factor-card {
    min-height: 360px;
  }

  .faq-layout > aside {
    position: static;
  }
}

@media (max-width: 700px) {
  .home-nav {
    min-height: 56px;
    gap: 10px;
    padding: 10px 16px;
  }

  .home-mark,
  .home-nav-links,
  .home-nav-spacer {
    display: none;
  }

  .home-menu {
    display: inline-flex;
    order: -2;
  }

  .home-lang {
    margin-left: auto;
    padding: 2px;
  }

  .home-lang a {
    padding: 4px 7px;
    font-size: 10px;
  }

  .home-theme,
  .home-menu {
    width: 32px;
    height: 32px;
  }

  .home-nav-cta {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }

  .cta-full { display: none; }
  .cta-short { display: inline; }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    background: var(--home-header);
    transition: max-height .28s ease-in-out, opacity .22s ease-in-out, padding .28s ease-in-out;
  }

  .mobile-nav.open {
    max-height: 200px;
    padding-bottom: 12px;
    border-top: 1px solid var(--home-line);
    opacity: 1;
  }

  .mobile-nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
    border-bottom: 1px solid var(--home-line);
    color: var(--home-muted);
    font-size: 15px;
    font-weight: 600;
  }

  .mobile-nav a:last-child {
    border: 0;
  }

  .dashboard-shell aside {
    display: none;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .home-footer .footer-top {
    flex-direction: column;
    gap: 28px;
  }

  .home-footer .footer-top nav {
    width: 100%;
    gap: 0;
    margin-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }

  .home-footer .footer-top nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .new-home *,
  .new-home *::before,
  .new-home *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}