/* Chatterbox CSI ver8 — shared sheet for the ver8 landing page and its
   secondary interface page. Merges the ver6 canon system, the ver7 layout
   simplicity and the Grounded Hub visual vocabulary. Light-mode only by canon. */

:root {
  --ink: #0C2730;
  --ink-soft: rgba(12, 39, 48, 0.72);
  --ink-faint: rgba(12, 39, 48, 0.45);
  --sand: #FBF8F3;
  --warm: rgba(234, 227, 215, 0.42);
  --card: #FFFFFF;
  --coral: #EC486A;
  --coral-deep: #B4234A;
  --coral-tint: rgba(236, 72, 106, 0.08);
  --coral-glow: rgba(236, 72, 106, 0.16);
  --turquoise: #2DD4BF;
  --teal-deep: #0F766E;
  --teal-tint: rgba(45, 212, 191, 0.12);
  --teal-glow: rgba(45, 212, 191, 0.18);
  --hairline: rgba(12, 39, 48, 0.14);
  --ocean-a: #0C2730;
  --ocean-b: #123A46;
  --ocean-mid: #0891B2;
  --ocean-tint: rgba(8, 145, 178, 0.08);
  --ocean-glow: rgba(8, 145, 178, 0.18);
  --on-dark: #EAF3F2;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Raleway", "Segoe UI", system-ui, sans-serif;
  --focus: #0891B2;
  --em-accent: var(--ocean-mid);
}

* { box-sizing: border-box; }
html { background: #FBF8F3; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FBF8F3;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 26px; position: relative; z-index: 1; }
.band { padding: 4rem 0; position: relative; z-index: 1; }
.band-warm { background: rgba(247, 243, 235, 0.68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--sand); padding: 10px 18px; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.3vw, 3.05rem); line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.18; }
h1 em { font-style: italic; color: var(--coral-deep); }
h2 em { font-style: italic; color: var(--teal-deep); }
.statement em { font-style: italic; color: var(--teal-deep); }
p { margin: 0; }

.lede, .section-lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 62ch; }
.statement { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.35; margin-top: 2.2rem; max-width: 34em; }
.statement.is-coral { color: var(--coral-deep); }
.statement.is-coral em { color: var(--coral-deep); }
.statement.is-teal em { color: var(--teal-deep); }
.statement.is-ocean em { color: var(--ocean-mid); }
.statement.is-centred { text-align: center; margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-deep); background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 118, 110, 0.24); border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 999px; padding: 6px 16px; margin-bottom: 1.1rem;
  box-shadow: 0 2px 10px -2px rgba(15, 118, 110, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.eyebrow.is-on-dark { background: rgba(255,255,255,0.09); border-color: rgba(45, 212, 191, 0.35); color: var(--turquoise); box-shadow: 0 0 16px rgba(45, 212, 191, 0.15); }

.section-head { margin-bottom: 2rem; }
.section-head.is-centred { text-align: center; }
.section-head.is-centred .lede,
.section-head.is-centred .section-lede { margin: 0.8rem auto 0; }
.section-head .section-lede { margin-top: 0.8rem; }
.lead-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 900px) { .lead-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: end; } }
.section-more { margin-top: 1.6rem; font-size: 14.5px; }
.section-more a { color: var(--teal-deep); font-weight: 600; }

/* ---- ambient field ---- */
.ambient-field { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; will-change: transform, opacity; }
.blob-1 {
  width: 720px; height: 720px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.38) 0%, rgba(15, 118, 110, 0.16) 45%, transparent 70%);
  filter: blur(65px);
  opacity: 0.85;
  animation: drift-a 20s ease-in-out infinite alternate;
}
.blob-2 {
  width: 740px; height: 740px;
  top: 25%; right: -180px;
  background: radial-gradient(circle, rgba(236, 72, 106, 0.32) 0%, rgba(180, 35, 74, 0.14) 45%, transparent 70%);
  filter: blur(70px);
  opacity: 0.82;
  animation: drift-b 24s ease-in-out infinite alternate;
}
.blob-3 {
  width: 680px; height: 680px;
  bottom: -180px; left: 20%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.28) 0%, rgba(236, 72, 106, 0.18) 45%, transparent 70%);
  filter: blur(75px);
  opacity: 0.75;
  animation: drift-c 22s ease-in-out infinite alternate;
}
@keyframes drift-a {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(140px, 80px) scale(1.14) rotate(45deg); }
  66% { transform: translate(60px, 160px) scale(0.94) rotate(90deg); }
  100% { transform: translate(180px, 110px) scale(1.1) rotate(135deg); }
}
@keyframes drift-b {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(-160px, -70px) scale(1.18) rotate(-40deg); }
  66% { transform: translate(-90px, 120px) scale(0.92) rotate(-85deg); }
  100% { transform: translate(-190px, 60px) scale(1.12) rotate(-120deg); }
}
@keyframes drift-c {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(120px, -130px) scale(1.2); }
  100% { transform: translate(-80px, -60px) scale(0.96); }
}

/* ---- nav ---- */
.v8-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(12, 39, 48, 0.08);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.v8-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 20px -6px rgba(12, 39, 48, 0.08);
  border-bottom-color: rgba(12, 39, 48, 0.12);
}
.v8-nav-inner { display: flex; align-items: center; gap: 20px; height: 72px; }
.v8-brand { text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; }
.v8-brand-mark { width: 48px; height: 48px; object-fit: contain; flex: none; }
.v8-brand-stack { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; flex: none; white-space: nowrap; }
.v8-wordmark {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--teal-deep);
  text-shadow: 0 1px 2px rgba(15, 118, 110, 0.15);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.reg {
  font-family: var(--sans);
  font-size: 0.55em;
  font-weight: 800;
  vertical-align: 0.45em;
  margin-left: 0.5px;
  color: var(--teal-deep);
  line-height: 1;
}
.v8-wordmark .reg {
  font-family: var(--sans);
  font-size: 0.5em;
  font-weight: 800;
  vertical-align: 0.62em;
  margin-left: 0;
  display: inline-block;
  color: var(--teal-deep);
}
.v8-signature .reg {
  font-size: 0.75em;
  font-weight: 700;
  vertical-align: 0.25em;
  margin-left: 0.5px;
  color: inherit;
}
.v8-signature { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-faint); white-space: nowrap; }
.v8-nav-links { display: none; gap: clamp(10px, 1.2vw, 20px); margin-left: auto; }
.v8-nav-links a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(13px, 0.95vw, 14.5px);
  font-weight: 600;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  transition: color 0.22s ease;
}
.v8-nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 12.5%;
  width: 75%;
  height: 2.5px;
  border-radius: 999px;
  background: var(--ocean-mid);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease;
  opacity: 0;
}
.v8-nav-links a:hover,
.v8-nav-links a.is-active,
.v8-nav-links a[aria-current="location"],
.nav-panel a:hover,
.nav-panel a.is-active,
.nav-panel a[aria-current="location"] {
  color: var(--ocean-mid);
}
.v8-nav-links a:hover::after,
.v8-nav-links a.is-active::after,
.v8-nav-links a[aria-current="location"]::after {
  transform: scaleX(1);
  opacity: 1;
}
@media (min-width: 1080px) {
  .v8-nav-links { display: flex; }
  .btn-nav { margin-left: 0; display: inline-flex; }
  .nav-menu { display: none; }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  border-radius: 999px; padding: 12px 22px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  flex: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, #0F766E 0%, #0D9488 45%, #14B8A6 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 24px -10px rgba(15, 118, 110, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(12, 39, 48, 0.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #115E59 0%, #0F766E 50%, #0D9488 100%);
  box-shadow: 0 14px 32px -10px rgba(15, 118, 110, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.btn-glass { background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--hairline); color: var(--ink); }
.btn-nav {
  padding: 8px 18px;
  font-size: 13.5px;
  white-space: nowrap;
  flex: none;
  line-height: 1.2;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.cta-row.is-centred { justify-content: center; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- hero ---- */
.hero { padding: 4.4rem 0 4rem; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero-copy .lede { margin-top: 1.1rem; }
.hero-reassurance { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hero-reassurance.is-centred {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 28px;
  max-width: 44rem;
  margin: 1.8rem auto 0;
  text-align: left;
}
@media (min-width: 600px) {
  .hero-reassurance.is-centred {
    grid-template-columns: 1fr 1fr;
  }
}
.hero-reassurance li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--ink-soft); }
.hero-reassurance i { color: var(--teal-deep); flex: none; }

/* topology card (hero right) — the ver6 card in ver8 clothes */
.topo-card {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 24px 60px -34px rgba(12, 39, 48, 0.45);
  position: relative;
}
.topo-card::before { content: ""; position: absolute; inset: -40px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(236, 72, 106, 0.09), transparent 65%); }
.topo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.topo-head span:first-child { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.topo-badge { font-size: 11px; font-weight: 700; color: var(--teal-deep); background: var(--teal-tint); border-radius: 999px; padding: 3px 10px; }
.topo-stack { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.topo-node {
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
  background: var(--card);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 4px 12px rgba(12, 39, 48, 0.04);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.topo-node:first-child {
  border-color: rgba(8, 145, 178, 0.35);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.95), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), 0 8px 20px -8px rgba(8, 145, 178, 0.16);
}
.topo-node:first-child .topo-kicker { color: var(--ocean-mid); }
.topo-node .topo-kicker { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.topo-node strong { font-size: 14px; line-height: 1.35; display: block; }
.topo-node p { margin-top: 5px; font-size: 12px; color: var(--ink-soft); }
.topo-node.is-core {
  border-color: rgba(15, 118, 110, 0.45);
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.95), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), 0 10px 26px -8px rgba(15, 118, 110, 0.22), 0 0 20px rgba(45, 212, 191, 0.1);
}
.topo-node.is-core .topo-kicker { color: var(--teal-deep); }
.topo-node:last-child {
  border-color: rgba(8, 145, 178, 0.35);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.95), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), 0 8px 20px -8px rgba(8, 145, 178, 0.16);
}
.topo-node:last-child .topo-kicker { color: var(--ocean-mid); }
.topo-arrow { text-align: center; color: var(--ink-faint); font-size: 14px; line-height: 1; }

/* ---- gap ---- */
/* ---- sound familiar strip ---- */
#familiar .section-lede { font-size: 0.98rem; }
.pain-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
@media (min-width: 640px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pain-grid { grid-template-columns: repeat(3, 1fr); } }
.pain-grid:has(details[open]) { align-items: start; }

.pain-card {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 242, 245, 0.8) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(180, 35, 74, 0.24);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px -10px rgba(180, 35, 74, 0.12), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
  height: 100%; box-sizing: border-box;
}
.pain-grid:has(details[open]) .pain-card:not([open]) { height: auto; }
.pain-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgba(180, 35, 74, 0.28); }
.pain-card h3 {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--sans); font-size: clamp(13px, 1.25vw, 14.5px); font-weight: 700;
  letter-spacing: 0.035em; text-transform: uppercase;
  line-height: 1.4; color: var(--coral-deep);
  text-wrap: pretty;
}
.pain-card h3 i { font-size: 15px; flex: none; align-self: flex-start; margin-top: 1px; color: var(--coral-deep); }
.pain-quote, .break-lead { font-family: var(--sans); font-size: 0.96rem; line-height: 1.48; color: var(--ink); flex: 1; text-wrap: pretty; }
.pain-fix {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--teal-deep);
  background: var(--teal-tint); border: 1.5px solid rgba(15, 118, 110, 0.3);
  border-radius: 10px; padding: 7px 12px; margin-top: 10px;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.1);
}
.pain-fix i { flex: none; color: var(--teal-deep); font-size: 14px; }
.pain-card > summary, .break-card > summary {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 6px 10px;
  align-items: start; cursor: pointer; list-style: none;
  height: 100%; box-sizing: border-box;
}
.pain-card > summary::-webkit-details-marker,
.break-card > summary::-webkit-details-marker { display: none; }
.pain-card > summary h3, .pain-card > summary .pain-quote,
.break-card > summary h3, .break-card > summary .break-lead { grid-column: 1; }
.break-lead { color: var(--ink); text-wrap: pretty; }
.break-card[open] .pain-chevron { transform: rotate(180deg); }
.break-card[open] {
  border-color: rgba(180, 35, 74, 0.38);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 30px -10px rgba(180, 35, 74, 0.18);
  height: auto;
}
.break-card > p { margin-top: 10px; }

.pain-chevron {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 15px; color: var(--ink-quiet); transition: transform 0.3s ease;
}
.pain-card[open] .pain-chevron { transform: rotate(180deg); }
.pain-card[open] {
  border-color: rgba(180, 35, 74, 0.38);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 30px -10px rgba(180, 35, 74, 0.18);
  height: auto;
}
.pain-card .pain-fix { margin-top: 10px; }

/* In-place expansion content fade-in when opened */
.pain-card[open] .pain-fix,
.break-card[open] > p {
  animation: card-expand-in 0.22s var(--ease-out);
}
@keyframes card-expand-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Alternate Ocean-tinted cards (25% Blue in everyday & gap) */
.pain-card:nth-child(2),
.pain-card:nth-child(4),
.break-card:nth-child(2),
.break-card:nth-child(4) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 249, 255, 0.78) 100%);
  border-color: rgba(8, 145, 178, 0.22);
  box-shadow: 0 10px 24px -12px rgba(8, 145, 178, 0.12), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
}
.pain-card:nth-child(2):hover,
.pain-card:nth-child(4):hover,
.break-card:nth-child(2):hover,
.break-card:nth-child(4):hover {
  border-color: rgba(8, 145, 178, 0.35);
  box-shadow: 0 16px 34px -24px rgba(8, 145, 178, 0.28);
}
.pain-card:nth-child(2)[open],
.pain-card:nth-child(4)[open],
.break-card:nth-child(2)[open],
.break-card:nth-child(4)[open] {
  border-color: rgba(8, 145, 178, 0.4);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 30px -10px rgba(8, 145, 178, 0.18);
}
.pain-card:nth-child(2) h3,
.pain-card:nth-child(4) h3,
.break-card:nth-child(2) h3,
.break-card:nth-child(4) h3 {
  color: var(--ocean-mid);
}
.pain-card:nth-child(2) h3 i,
.pain-card:nth-child(4) h3 i,
.break-card:nth-child(2) h3 i,
.break-card:nth-child(4) h3 i {
  color: var(--ocean-mid);
}

/* Floating hover popover for closed accordion cards */
.card-hover-popover {
  position: absolute;
  z-index: 2000;
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: linear-gradient(145deg, #FFFFFF 0%, #F0FDFA 100%);
  border: 1.5px solid rgba(15, 118, 110, 0.32);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  padding: 13px 16px;
  box-shadow: 0 22px 50px -16px rgba(15, 118, 110, 0.28), 0 8px 20px rgba(12, 39, 48, 0.08);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0.18s;
  pointer-events: none;
  box-sizing: border-box;
}
.card-hover-popover i {
  font-size: 14px;
  flex: none;
  color: var(--teal-deep);
  transform: translateY(1px);
}
.card-hover-popover.is-break,
.card-hover-popover.is-opt {
  background: linear-gradient(145deg, #FFFFFF 0%, #F0FDFA 100%);
  border-color: rgba(15, 118, 110, 0.32);
  border-top-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 50px -16px rgba(15, 118, 110, 0.25), 0 8px 20px rgba(12, 39, 48, 0.08);
}
.card-hover-popover.is-break i,
.card-hover-popover.is-opt i {
  color: var(--teal-deep);
}
.card-hover-popover.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.break-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
@media (min-width: 640px) { .break-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .break-grid { grid-template-columns: repeat(4, 1fr); } }
.break-grid:has(details[open]) { align-items: start; }

.break-card {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 242, 245, 0.8) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(180, 35, 74, 0.24);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px -12px rgba(180, 35, 74, 0.12), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
  height: 100%; box-sizing: border-box;
}
.break-grid:has(details[open]) .break-card:not([open]) { height: auto; }
.break-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgba(180, 35, 74, 0.28); }
.break-card h3 {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--sans); font-size: clamp(13px, 1.25vw, 14.5px); font-weight: 700;
  letter-spacing: 0.035em; text-transform: uppercase;
  line-height: 1.4; color: var(--coral-deep);
  text-wrap: pretty;
}
.break-card h3 i { font-size: 15px; flex: none; align-self: flex-start; margin-top: 1px; color: var(--coral-deep); }
.break-card .pain-fix { margin-top: 10px; }

/* ---- market strip ---- */
.opts-strip { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
@media (min-width: 680px) { .opts-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .opts-strip { grid-template-columns: repeat(5, 1fr); } }
.opts-strip:has(details[open]) { align-items: start; }

.opt-card {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 242, 245, 0.78) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(180, 35, 74, 0.22);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px -12px rgba(180, 35, 74, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
  height: 100%; box-sizing: border-box;
}
.opts-strip:has(details[open]) .opt-card:not([open]) { height: auto; }
.opt-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgba(180, 35, 74, 0.25); }
.opt-card h3 { display: flex; align-items: baseline; gap: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.opt-card h3 i { font-size: 16px; color: var(--coral-deep); flex: none; transform: translateY(1px); }
.opt-card > summary {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px;
  align-items: center; cursor: pointer; list-style: none;
  height: 100%; box-sizing: border-box;
}
.opt-card > summary::-webkit-details-marker { display: none; }
.opt-card[open] .pain-chevron { transform: rotate(180deg); }
.opt-card[open] {
  border-color: rgba(180, 35, 74, 0.38);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 30px -10px rgba(180, 35, 74, 0.16);
  height: auto;
}
.opt-card .opt-body {
  margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  animation: card-expand-in 0.22s var(--ease-out);
}
.opt-card .opt-body::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral-deep); margin-right: 7px; transform: translateY(-1px); }

/* Cards 2 & 4: "Hire more people or outsource" and "Buy contact-centre software" -> Ocean Blue */
.opt-card:nth-child(2),
.opt-card:nth-child(4) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 249, 255, 0.78) 100%);
  border-color: rgba(8, 145, 178, 0.22);
  box-shadow: 0 10px 24px -12px rgba(8, 145, 178, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
}
.opt-card:nth-child(2):hover,
.opt-card:nth-child(4):hover {
  border-color: rgba(8, 145, 178, 0.35);
  box-shadow: 0 16px 34px -24px rgba(8, 145, 178, 0.28);
}
.opt-card:nth-child(2)[open],
.opt-card:nth-child(4)[open] {
  border-color: rgba(8, 145, 178, 0.4);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 30px -10px rgba(8, 145, 178, 0.18);
}
.opt-card:nth-child(2) h3 i,
.opt-card:nth-child(4) h3 i { color: var(--ocean-mid); }
.opt-card:nth-child(2) .opt-body::before,
.opt-card:nth-child(4) .opt-body::before { background: var(--ocean-mid); }

/* ---- inline shaded emphasis ---- */
.shade-blue {
  color: var(--ocean-mid);
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.95), rgba(224, 242, 254, 0.85));
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid rgba(8, 145, 178, 0.28);
  box-shadow: 0 2px 6px -2px rgba(8, 145, 178, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: inline-block;
  white-space: nowrap;
}
.shade-green {
  color: var(--teal-deep);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.95), rgba(204, 251, 241, 0.85));
  padding: 1px 9px;
  border-radius: 6px;
  border: 1px solid rgba(15, 118, 110, 0.32);
  box-shadow: 0 2px 6px -2px rgba(15, 118, 110, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: inline-block;
  white-space: nowrap;
}

.market-bridge {
  position: relative;
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 250, 0.92) 100%);
  border: 1.5px solid rgba(15, 118, 110, 0.35);
  border-top: 1.5px solid rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  padding: 22px 28px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  box-shadow: 0 18px 40px -14px rgba(15, 118, 110, 0.2), inset 0 1px 2px rgba(255, 255, 255, 1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.market-bridge strong { color: var(--teal-deep); }

/* ---- the picture (grounded hub) ---- */
.figure-card {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 22px;
  padding: clamp(14px, 2.6vw, 30px);
  box-shadow: 0 20px 48px -26px rgba(12, 39, 48, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.figure-card figcaption { font-size: 14px; color: var(--ink-soft); max-width: 70ch; margin: 1rem auto 0; text-align: center; }
figure { margin: 0; }
figure svg { display: block; width: 100%; height: auto; }
.fig-scroll { overflow-x: auto; }
.hub-portrait { display: none; margin: 0 auto; max-width: 440px; }
@media (max-width: 720px) {
  .hub-landscape { display: none; }
  .hub-portrait { display: block; }
}
.gate-note { margin-top: 1.1rem; text-align: center; font-size: 13.5px; color: var(--ink-soft); max-width: 68ch; margin-left: auto; margin-right: auto; }
.ownership-line {
  display: table;
  margin: 2.5rem auto 0;
  padding: 12px 32px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 249, 255, 0.65) 25%, rgba(255, 242, 245, 0.65) 65%, rgba(240, 253, 250, 0.7) 100%);
  border: 1.5px solid rgba(12, 39, 48, 0.22);
  border-top: 1.5px solid rgba(255, 255, 255, 0.98);
  border-radius: 999px;
  box-shadow: 0 14px 34px -14px rgba(12, 39, 48, 0.2), inset 0 1px 2px #FFFFFF;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ownership-line span:nth-child(1),
.v8-footer-motto span:nth-child(1) {
  color: var(--ocean-mid);
}
.ownership-line span:nth-child(2),
.v8-footer-motto span:nth-child(2) {
  color: var(--coral-deep);
}
.ownership-line span:nth-child(3),
.v8-footer-motto span:nth-child(3) {
  color: var(--teal-deep);
}
.ways-in-line { margin-top: 0.6rem; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

/* hub svg vocabulary */
.sv-box { fill: #FFFFFF; stroke: rgba(12, 39, 48, 0.32); stroke-width: 1.3; }
.sv-box-dim { fill: #FBF8F3; stroke: rgba(12, 39, 48, 0.28); stroke-width: 1.3; stroke-dasharray: 5 4; }
.sv-label { font-family: var(--sans); font-size: 13.5px; font-weight: 600; fill: #0C2730; }
.sv-label-dim { font-family: var(--sans); font-size: 13.5px; font-weight: 600; fill: rgba(12, 39, 48, 0.55); }
.sv-sub { font-family: var(--sans); font-size: 11px; font-weight: 500; fill: rgba(12, 39, 48, 0.6); }
.sv-caps { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; fill: rgba(12, 39, 48, 0.55); }
.sv-arrow { stroke: rgba(12, 39, 48, 0.5); stroke-width: 1.4; fill: none; }
.sv-arrow-dim { stroke: rgba(12, 39, 48, 0.32); stroke-width: 1.4; fill: none; stroke-dasharray: 5 4; }
.sv-arrow-coral { stroke: #EC486A; stroke-width: 1.7; fill: none; }
.sv-coral-label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; fill: #B4234A; }
.sv-teal-label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; fill: #0F766E; }
.sv-serif { font-family: var(--serif); fill: #0C2730; }
.ring-anim { animation: ring-rotate 42s linear infinite; }
@keyframes ring-rotate { to { stroke-dashoffset: -130; } }
.halo-pulse { transform-box: fill-box; transform-origin: center; animation: halo-pulse 7s ease-in-out infinite alternate; }
@keyframes halo-pulse { from { opacity: 0.65; transform: scale(0.96); } to { opacity: 1; transform: scale(1.06); } }
.flow-dot { opacity: 0; }
@supports (offset-path: path("M0 0 L1 1")) {
  .flow-dot { animation: dot-run 3.4s linear infinite; }
  @keyframes dot-run {
    0% { offset-distance: 0%; opacity: 0; }
    12% { opacity: 1; }
    80% { opacity: 1; }
    95% { offset-distance: 100%; opacity: 0; }
    100% { offset-distance: 100%; opacity: 0; }
  }
}

/* ---- what changes ---- */
.change-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .change-grid { grid-template-columns: repeat(2, 1fr); } }
.change-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 253, 250, 0.9) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1.5px solid rgba(15, 118, 110, 0.3);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 20px; padding: 22px;
  box-shadow: 0 14px 32px -12px rgba(15, 118, 110, 0.16), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
}
.change-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(15, 118, 110, 0.35); }
.change-card h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 10px; text-wrap: balance; color: var(--ink); }
.change-card h3 i {
  color: var(--teal-deep);
  background: var(--teal-tint);
  border: 1.5px solid rgba(15, 118, 110, 0.3);
  border-radius: 8px;
  padding: 5px;
  font-size: 17px;
  flex: none;
}
.change-card p { margin-top: 0.6rem; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---- interface section (landing) + commitments ---- */
.commit-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 860px) { .commit-grid { grid-template-columns: repeat(3, 1fr); } }
.commit-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 253, 250, 0.75) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1.5px solid rgba(15, 118, 110, 0.24);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 20px; padding: 22px;
  box-shadow: 0 12px 28px -12px rgba(15, 118, 110, 0.12), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
}
.commit-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgba(15, 118, 110, 0.3); }
.commit-card h3 { font-family: var(--sans); font-size: 14.5px; font-weight: 700; line-height: 1.35; display: flex; gap: 10px; align-items: baseline; text-wrap: balance; color: var(--ink); }
.commit-card:nth-child(1) h3 i { color: var(--teal-deep); }
.commit-card:nth-child(2) h3 i { color: var(--coral-deep); }
.commit-card:nth-child(3) h3 i { color: var(--teal-deep); }
.commit-card p { margin-top: 0.6rem; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* ---- place layout (interface page) ---- */
.place-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .place-layout { grid-template-columns: 1.7fr 1fr; align-items: stretch; } }
.place-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-deep); }
.place-kicker.is-coral { color: var(--coral-deep); }
.place-interface {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(240, 253, 250, 0.72) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 20px 48px -24px rgba(15, 118, 110, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.98);
}
.place-interface-head p { margin-top: 0.5rem; font-size: 14.5px; color: var(--ink-soft); }
.place-modes { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .place-modes { grid-template-columns: repeat(2, 1fr); } }
.place-modes li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; font-weight: 600; }
.place-modes li i { color: var(--teal-deep); font-size: 18px; flex: none; }
.place-modes li.is-staged { background: var(--sand); border-style: dashed; color: var(--ink-soft); }
.stage-tag { font-size: 11px; font-weight: 700; color: var(--coral-deep); background: var(--coral-tint); border-radius: 999px; padding: 2px 9px; }
.place-langline { margin-top: 1.1rem; font-size: 13.5px; font-weight: 600; color: var(--teal-deep); }
.place-rails {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(240, 249, 255, 0.65) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px dashed rgba(8, 145, 178, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  padding: clamp(18px, 2.6vw, 26px);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 14px 34px -18px rgba(8, 145, 178, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.place-rails ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.place-rails ul li { background: var(--sand); border: 1px dashed var(--hairline); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.place-rails p { font-size: 13.5px; color: var(--ink-soft); }
.place-rails-note { font-weight: 700; color: var(--teal-deep); }
.place-behind {
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 253, 250, 0.85) 100%);
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 22px;
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 18px 42px -16px rgba(15, 118, 110, 0.15), inset 0 1px 2px rgba(255, 255, 255, 1);
}
.place-behind p { margin-top: 0.5rem; font-size: 15px; color: var(--ink-soft); max-width: 75ch; }

/* ---- interface mock (interface page hero) ---- */
.hero-mock { position: relative; }
.mock-frame {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--hairline); border-radius: 24px; padding: 18px;
  box-shadow: 0 24px 60px -34px rgba(12, 39, 48, 0.45);
  position: relative;
}
.mock-frame::after {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.32) 0%, rgba(236, 72, 106, 0.22) 50%, transparent 75%);
  filter: blur(24px);
  animation: topo-halo-pulse 7s ease-in-out infinite alternate;
  pointer-events: none;
}
.mock-topbar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--turquoise); }
.mock-title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.mock-badge { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--teal-deep); background: var(--teal-tint); border-radius: 999px; padding: 3px 10px; }
.mock-thread { display: flex; flex-direction: column; gap: 10px; padding: 16px 2px; min-height: 118px; }
.mock-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; transition: opacity 0.4s ease; }
.mock-msg.is-customer { align-self: flex-end; background: var(--ink); color: var(--sand); border-bottom-right-radius: 5px; }
.mock-msg.is-chatterbox { align-self: flex-start; background: rgba(45, 212, 191, 0.14); border: 1px solid rgba(15, 118, 110, 0.25); border-bottom-left-radius: 5px; }
.mock-thread.is-fading .mock-msg { opacity: 0; }
.mock-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px 12px; }
.mock-chip { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 13px; }
.mock-chip.is-coral { color: var(--coral-deep); border-color: rgba(180, 35, 74, 0.35); background: var(--coral-tint); }
.mock-input { display: flex; align-items: center; gap: 10px; border: 1px solid var(--hairline); border-radius: 999px; padding: 10px 16px; font-size: 13.5px; color: var(--ink-faint); background: var(--card); }
.mock-input i:first-child { color: var(--coral); }
.mock-input i:last-child { margin-left: auto; color: var(--teal-deep); }
.mock-caption { margin-top: 0.9rem; text-align: center; font-size: 13px; color: var(--ink-soft); }
.mock-powered { margin-top: 0.35rem; text-align: center; font-size: 12px; font-weight: 600; color: var(--teal-deep); display: flex; align-items: center; justify-content: center; gap: 7px; }
.mock-powered i { font-size: 8px; }

/* ---- language access ---- */
.lang-lede {
  font-size: 1.22rem;
  color: var(--ink-soft);
  margin-top: 0.85rem;
  max-width: 62ch;
  line-height: 1.45;
}
.lang-lede em {
  font-style: italic;
  color: var(--ink);
}
/* The language section is a bento: the map is the anchor tile, the census
   stat and the hlonipha note sit beside it as glass tiles, and the two
   coverage-mode cards close the grid as a full-width row. */
.language-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .language-bento { grid-template-columns: repeat(6, 1fr); align-items: stretch; }
  .language-bento > .language-map { grid-column: 1 / 5; grid-row: 1 / 3; }
  .language-bento > .language-stat-tile { grid-column: 5 / 7; grid-row: 1; }
  .language-bento > .language-hlonipha-tile { grid-column: 5 / 7; grid-row: 2; }
  .language-bento > .language-modes { grid-column: 1 / 7; }
}
.language-map {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(12, 39, 48, 0.06), 0 12px 28px rgba(12, 39, 48, 0.08);
  border: 1px solid var(--hairline);
  background: var(--card);
}
.language-map img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 900px) {
  .language-bento > .language-map { height: 100%; display: flex; }
  .language-bento > .language-map img { height: 100%; object-fit: cover; }
}
.language-stat-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 22px;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.95), var(--shadow-soft);
  overflow: hidden;
}
.language-stat-tile::after {
  content: "";
  position: absolute;
  inset: auto -60px -80px auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 106, 0.16), transparent 65%);
  z-index: -1;
  pointer-events: none;
}
.language-hlonipha-tile { display: flex; }
.language-hlonipha-tile .hlonipha-line { flex: 1; display: flex; align-items: center; }
.language-fact-copy {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.language-fact-copy data {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  color: var(--coral-deep);
  font-weight: 700;
  display: block;
  line-height: 1;
  margin-bottom: 0.35rem;
}
.language-source {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0;
}
.language-source a {
  color: var(--teal-deep);
  font-weight: 600;
}
.hlonipha-line {
  margin: 0;
  padding: 0.85rem 1.05rem;
  background: var(--teal-tint);
  border-radius: 14px;
  border: 1px solid rgba(45, 212, 191, 0.25);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.language-modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .language-modes {
    grid-template-columns: 1fr 1fr;
  }
}
.language-mode-card {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 22px;
}
.language-mode-card .card-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.85rem;
}
.language-mode-card .card-icons .icon-tile {
  margin-bottom: 0;
}
.language-mode-card h3 {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.language-mode-scope {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--teal-deep);
  margin: 0;
}
.language-mode-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.icon-tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-bottom: 0.75rem;
}
.icon-tile.is-sm {
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
}
.icon-tile.is-ocean {
  background: rgba(8, 145, 178, 0.12);
  color: #0891b2;
}
.icon-tile.is-teal {
  background: var(--teal-tint);
  color: var(--teal-deep);
}

/* ---- fit ---- */
.fit-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 840px) { .fit-grid { grid-template-columns: 1fr 1fr; } }
.fit-col {
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 20px; padding: 24px;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.95), var(--shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
}
.fit-col h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; }
.fit-col.is-yes {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 253, 250, 0.88) 100%);
  border: 1.5px solid rgba(15, 118, 110, 0.32);
  box-shadow: 0 16px 38px -14px rgba(15, 118, 110, 0.2), inset 0 1px 2px rgba(255, 255, 255, 1);
}
.fit-col.is-yes h3 { color: var(--teal-deep); }
.fit-col.is-no {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 242, 245, 0.88) 100%);
  border: 1.5px solid rgba(180, 35, 74, 0.32);
  box-shadow: 0 16px 38px -14px rgba(180, 35, 74, 0.18), inset 0 1px 2px rgba(255, 255, 255, 1);
}
.fit-col.is-no h3 { color: var(--coral-deep); }
.fit-col ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fit-col li { font-size: 14.5px; color: var(--ink); padding-left: 28px; position: relative; line-height: 1.5; }
.fit-col.is-yes li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px;
  color: var(--teal-deep); font-weight: 700; font-size: 13px;
  background: var(--teal-tint); border: 1.5px solid rgba(15, 118, 110, 0.35);
  border-radius: 50%; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fit-col.is-no li::before {
  content: "\2717"; position: absolute; left: 0; top: 1px;
  color: var(--coral-deep); font-weight: 700; font-size: 13px;
  background: var(--coral-tint); border: 1.5px solid rgba(180, 35, 74, 0.35);
  border-radius: 50%; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- runs alongside (parallel rails) ---- */
.parallel-claims { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; margin: 0 0 1.8rem; }
.parallel-claims span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--teal-deep);
  background: var(--teal-tint); border: 1.5px solid rgba(15, 118, 110, 0.3);
  border-radius: 999px; padding: 6px 14px;
}
.parallel-claims span.claim-risk {
  color: var(--coral-deep);
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.95) 0%, rgba(255, 228, 230, 0.85) 100%);
  border-color: rgba(225, 29, 72, 0.35);
  box-shadow: 0 4px 12px -4px rgba(225, 29, 72, 0.2);
}
.parallel-claims span.claim-risk i {
  color: var(--coral-deep);
}
.parallel-claims i { flex: none; font-size: 15px; }

.parallel-assess-card {
  margin-top: 1.8rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 250, 0.92) 100%);
  border: 1.5px solid rgba(15, 118, 110, 0.32);
  border-top: 1.5px solid rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  padding: 22px 28px;
  text-align: center;
  box-shadow: 0 16px 36px -16px rgba(15, 118, 110, 0.18), inset 0 1px 2px #FFFFFF;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.parallel-assess-card .assess-lead {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--teal-deep);
  margin-bottom: 0.45rem;
}
.parallel-assess-card .assess-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ---- faq ---- */
.faq-wrap { max-width: 820px; }
.faq-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(250, 248, 244, 0.75) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 18px; margin-bottom: 12px;
  box-shadow: 0 4px 14px -6px rgba(12, 39, 48, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] {
  border-color: rgba(15, 118, 110, 0.38);
  box-shadow: 0 12px 28px -10px rgba(15, 118, 110, 0.16), inset 0 1px 1px rgba(255, 255, 255, 1);
}
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { transition: transform 0.3s ease; flex: none; color: var(--teal-deep); }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-body { padding: 0 22px 20px; }
.faq-body p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---- final cta ---- */
.final-cta {
  background: linear-gradient(150deg, var(--ocean-a), var(--ocean-b));
  color: var(--on-dark); border-radius: 26px;
  padding: clamp(28px, 4.5vw, 52px);
  position: relative; overflow: hidden; text-align: center;
}
.final-cta::before { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; top: -240px; right: -170px; background: radial-gradient(circle, rgba(45, 212, 191, 0.16), transparent 65%); }
.final-cta::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; bottom: -260px; left: -150px; background: radial-gradient(circle, rgba(236, 72, 106, 0.15), transparent 65%); }
.final-cta > * { position: relative; z-index: 1; }
.final-cta h2 { color: #FFFFFF; }
.final-cta h2 em { color: var(--turquoise); }
.final-cta .section-lede { color: rgba(234, 243, 242, 0.75); margin: 0.9rem auto 0; }
.preview-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; text-align: left; }
@media (min-width: 760px) { .preview-steps { grid-template-columns: repeat(3, 1fr); } }
.preview-steps li { display: flex; gap: 14px; align-items: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; padding: 16px; }
.preview-steps li span { font-family: var(--serif); font-size: 1.4rem; color: var(--turquoise); line-height: 1; }
.preview-steps h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: #FFFFFF; }
.preview-steps p { margin-top: 0.25rem; font-size: 13.5px; color: rgba(234, 243, 242, 0.7); }
.final-cta .cta-row { margin-top: 1.8rem; }
.final-badges { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 1.6rem; font-size: 13px; color: rgba(234, 243, 242, 0.75); }
.final-badges span { display: inline-flex; align-items: center; gap: 7px; }
.final-badges i { color: var(--turquoise); }
.eval-stance { margin: 2rem auto 0; max-width: 62ch; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 1.4rem; font-size: 13.5px; color: rgba(234, 243, 242, 0.7); }
.eval-stance strong { color: var(--on-dark); }

/* ---- footer ---- */
.v8-footer { border-top: 1px solid var(--hairline); padding: 2.6rem 0 3.2rem; position: relative; z-index: 1; }
.v8-footer-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 760px) {
  .v8-footer-grid { grid-template-columns: 1.3fr 0.9fr 1fr; }
  .v8-footer-grid:has(> :last-child:nth-child(2)) { grid-template-columns: 1.4fr 1fr; }
  .v8-footer-grid > :first-child:nth-last-child(2) + :last-child { grid-column: 2 / -1; }
}
.v8-footer-links { font-size: 12.5px; display: flex; flex-direction: column; gap: 5px; }
.v8-footer-links a { color: var(--teal-deep); }
.v8-footer-tagline { margin-top: 0.6rem; font-size: 14px; color: var(--ink-soft); }
.v8-footer-motto { margin-top: 0.3rem; font-family: var(--serif); font-size: 15.5px; color: var(--ocean-mid); }
.v8-footer-local { margin-top: 0.3rem; font-size: 12.5px; color: var(--ink-faint); }
.v8-footer-legal { font-size: 12.5px; color: var(--ink-faint); display: flex; flex-direction: column; gap: 5px; }
.v8-footer-legal a { color: var(--teal-deep); }
@media (min-width: 760px) { .v8-footer-legal { text-align: right; } }

/* ==========================================================================
   Ported from the ver6 family (chatterbox_csi_shared_ver6.css): the preview
   request modal + confirmation, the preview CTA hover hint, and the glass
   spotlight card treatment. The extra ver6 tokens are aliased here so the
   ported blocks read unchanged.
   ========================================================================== */
:root {
  --white: #FFFFFF;
  --ink-quiet: #4A646F;
  --ocean-mid: #0891B2;
  --turquoise-deep: var(--teal-deep);
  --teal-text: #0B7A70;
  --hairline-teal: rgba(15, 118, 110, 0.24);
  --shadow-soft: 0 4px 20px rgba(12, 39, 48, 0.06);
  --shadow-elevated: 0 16px 48px rgba(12, 39, 48, 0.14);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.reg-inline { font-size: 0.55em; vertical-align: super; }
.no-script-contact { text-align: center; padding: 0.8rem 1rem; }

/* Locking only `body` did not lock the viewport: with `html` at `overflow:
   visible` the page behind the modal still scrolled. Lock both. Hiding the
   scrollbar widens the content area by its width, so the page jumps sideways
   as the modal opens; `--sbw` is measured in JS at open time and given back
   as padding. */
html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
}
html.is-modal-open {
  padding-right: var(--sbw, 0px);
}

/* Auto-fit support. While fitting, the container drops its height cap and its
   internal scrolling so it can be measured at natural size; the transform then
   brings it back inside the viewport. */
.contact-modal-container {
  transform-origin: center center;
}
.contact-modal-overlay.is-fitted {
  overflow: hidden;
  align-items: center;
  place-items: center;
  grid-template-rows: minmax(0, 1fr);
}
.contact-modal-container.is-fitted {
  max-height: none;
  overflow: visible;
}

/* Modal */
.contact-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 39, 48, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  overflow-y: auto;
}
.contact-modal-overlay[hidden] {
  display: none;
}
.contact-modal-container {
  background: var(--white);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-elevated);
  max-width: min(620px, 100%);
  width: 100%;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  position: relative;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
@media (min-width: 880px) {
  .contact-modal-container {
    max-width: min(920px, 94vw);
  }
}

.contact-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--coral-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.4rem 0;
}
.contact-modal-header h2 {
  font-size: 1.7rem;
  margin: 0 0 0.5rem 0;
}
.contact-subtitle {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
.contact-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-sm);
  font-size: 1.3rem;
  color: var(--ink-quiet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.contact-modal-close:hover {
  color: var(--ink);
  background: rgba(12, 39, 48, 0.06);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.contact-fields-card {
  display: contents;
}
.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 580px) {
  .contact-field-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px), (max-height: 640px) {
  .contact-modal-overlay {
    padding: 0.85rem;
    align-items: stretch;
    place-items: stretch center;
  }
  .contact-modal-container {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 1rem);
    padding: 0.9rem 0.9rem 0.7rem;
    margin: 0;
    overflow: hidden;
  }
  .contact-modal-header {
    flex: 0 0 auto;
    margin-bottom: 0.55rem;
    gap: 0.4rem;
  }
  .contact-kicker {
    margin-bottom: 0.15rem;
  }
  .contact-modal-header h2 {
    font-size: 1.22rem;
    margin-bottom: 0.25rem;
  }
  .contact-subtitle {
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .contact-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    gap: 0.5rem;
  }
  .contact-field {
    gap: 0.2rem;
  }
  .contact-field-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .contact-field input {
    padding: 0.55rem 0.7rem;
  }
  .contact-field-error {
    min-height: 0;
  }
  .contact-next {
    padding: 0.75rem 0.85rem;
  }
  .contact-next p {
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .contact-actions {
    position: sticky;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    padding-top: 0.55rem;
    gap: 0.45rem;
    background: var(--white);
    box-shadow: 0 -10px 18px -10px rgba(12, 39, 48, 0.16);
  }
  .contact-actions .btn {
    width: 100%;
    min-height: 44px;
    white-space: nowrap;
    font-size: 0.86rem;
    padding: 0.7rem 0.9rem;
  }
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-field label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}
.contact-required {
  color: var(--coral);
}
.contact-optional {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-quiet);
}
.contact-field input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--sand);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-field input:focus {
  outline: none;
  border-color: var(--coral);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(236, 72, 106, 0.16);
}
.contact-field input[aria-invalid="true"] {
  border-color: #DC2626;
  background: #FEF2F2;
}
.contact-field-error {
  font-size: 0.78rem;
  color: #DC2626;
  min-height: 1em;
}

/* The steps panel: sets the expectation for what happens after the form, so it
   is a quiet panel rather than another input. Tinted from the family
   turquoise, not a new hue. */
.contact-next {
  padding: 0.9rem 1rem;
  background: rgba(45, 212, 191, 0.10);
  border: 1px solid var(--hairline-teal);
  border-radius: var(--r-md, 12px);
}
.contact-next p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.contact-next-title {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
}
.contact-next-bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
}
.contact-next-box {
  padding: clamp(14px, 1.6vw, 18px);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
@media (min-width: 600px) {
  .contact-next-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .contact-next-box:nth-child(1) { grid-column: span 7; }
  .contact-next-box:nth-child(2) { grid-column: span 5; }
  .contact-next-box:nth-child(3) { grid-column: span 12; }
}
.contact-next-step {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--ink) !important;
  margin-bottom: 0.35rem !important;
}
.contact-next-n {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--turquoise);
  font-family: var(--serif);
  font-size: 0.78rem;
  color: var(--teal-text);
}
.contact-next-mark {
  color: var(--turquoise-deep);
  font-size: 1.45em;
  line-height: 0;
  font-weight: 600;
}
.contact-next-step + p .contact-next-mark {
  margin-left: 0.08em;
}
.contact-next-foot .contact-next-mark {
  margin-right: 0.25em;
}
.contact-next-foot {
  margin-top: 0.8rem !important;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline-teal);
  font-style: italic;
  font-size: 0.78rem !important;
}
.contact-hp {
  display: none !important;
}
.contact-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  margin-top: 0.6rem;
}
.contact-status {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
}
.contact-status.is-error {
  color: #DC2626;
}
.contact-status.is-ok {
  color: var(--turquoise-deep);
}

/* Glass spotlight card treatment, retargeted to the ver8 card families.
   Brand-colour note: the cards keep their own ver8 translucency (0.62-0.72
   white over blur) so the sand ground and ambient field glow through — the
   ver6 0.88 background was deliberately NOT taken. */
.topo-card,
.pain-card,
.break-card,
.opt-card,
.change-card,
.commit-card,
.fit-col {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.95), var(--shadow-soft);
  transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.topo-card::before,
.pain-card::before,
.break-card::before,
.opt-card::before,
.change-card::before,
.commit-card::before,
.fit-col::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(45, 212, 191, 0.16), transparent 45%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
  .topo-card:hover,
  .pain-card:hover,
  .break-card:hover,
  .opt-card:hover,
  .change-card:hover,
  .commit-card:hover,
  .fit-col:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, 0.38);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 34px -4px rgba(15, 118, 110, 0.14), 0 0 20px rgba(45, 212, 191, 0.08);
  }
  .topo-card:hover::before,
  .pain-card:hover::before,
  .break-card:hover::before,
  .opt-card:hover::before,
  .change-card:hover::before,
  .commit-card:hover::before,
  .fit-col:hover::before {
    opacity: 1;
  }
  /* Card hover spotlights with subtle semantic edge glow */
  .pain-card:hover {
    border-color: rgba(180, 35, 74, 0.38);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 34px -4px rgba(180, 35, 74, 0.12), 0 0 20px rgba(236, 72, 106, 0.08);
  }
  .break-card:hover,
  .opt-card:hover {
    border-color: rgba(8, 145, 178, 0.38);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 34px -4px rgba(8, 145, 178, 0.12), 0 0 20px rgba(8, 145, 178, 0.08);
  }
  .change-card:hover,
  .fit-col:hover {
    border-color: rgba(15, 118, 110, 0.38);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 34px -4px rgba(15, 118, 110, 0.14), 0 0 20px rgba(45, 212, 191, 0.08);
  }
}

/* Preview CTA hover hint */
.preview-hint-popover {
  display: none;
  position: fixed;
  z-index: 120;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--hairline-teal);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-elevated);
  font-size: 0.84rem;
  color: var(--ink);
}
.preview-hint-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: var(--turquoise-deep);
}
.preview-hint-text {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.preview-hint-badges {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.preview-hint-badges span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.preview-hint-badges i {
  color: var(--turquoise-deep);
}
.preview-hint-note {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink-quiet);
}

/* Stretched horizontally, the three fields become a single card above the
   steps panel. This block sits after the base .contact-form rules on purpose:
   media queries add no specificity, so an earlier placement is silently
   overridden. */
@media (min-width: 880px) {
  .contact-fields-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    background: var(--sand);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
  }
  .contact-fields-card > .contact-field-row {
    display: contents;
  }
}

@media (min-width: 880px) and (max-height: 820px) {
  .contact-modal-container {
    padding: 1.1rem 1.6rem;
  }
  .contact-field-error {
    min-height: 0;
  }
  .contact-fields-card {
    padding: 0.8rem 0.9rem;
    gap: 0.7rem 1rem;
  }
  .contact-modal-header {
    margin-bottom: 0.6rem;
  }
  .contact-subtitle {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  .contact-form {
    row-gap: 0.8rem;
  }
  .contact-next {
    padding: 0.75rem 0.85rem;
  }
  .contact-next-title {
    margin-bottom: 0.5rem;
  }
  .contact-next-bento {
    gap: 8px;
  }
  .contact-next-box {
    padding: 10px 13px;
  }
  .contact-next-foot {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem;
  }
}

@media (min-width: 880px) and (max-height: 800px) {
  .contact-next-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .contact-next-box:nth-child(1),
  .contact-next-box:nth-child(2),
  .contact-next-box:nth-child(3) {
    grid-column: auto;
  }
}

@media (min-width: 880px) and (max-height: 720px) {
  .contact-modal-container {
    padding: 0.9rem 1.4rem;
  }
  .contact-subtitle {
    font-size: 0.78rem;
    line-height: 1.3;
  }
  .contact-form {
    row-gap: 0.55rem;
  }
  .contact-modal-header {
    margin-bottom: 0.45rem;
  }
  .contact-next {
    padding: 0.6rem 0.75rem;
  }
}

/* The scrolling regions inside the modal render a hairline scrollbar. */
.contact-form,
.contact-modal-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 118, 110, 0.4) transparent;
}
.contact-form::-webkit-scrollbar,
.contact-modal-container::-webkit-scrollbar {
  width: 4px;
}
.contact-form::-webkit-scrollbar-track,
.contact-modal-container::-webkit-scrollbar-track {
  background: transparent;
}
.contact-form::-webkit-scrollbar-thumb,
.contact-modal-container::-webkit-scrollbar-thumb {
  background: rgba(15, 118, 110, 0.4);
  border-radius: 999px;
}
@media (max-width: 480px), (max-height: 640px) {
  .contact-form {
    padding-right: 0.55rem;
  }
}

/* Confirmation modal. Reuses the overlay and container shells so the lock, the
   cap and the auto-fit all apply unchanged; only the inside is different. */
.success-container {
  max-width: min(520px, 94vw);
  text-align: center;
}
.success-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}
.success-burst {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0.4rem auto 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid var(--hairline-teal);
}
.success-burst-icon {
  font-size: 2.4rem;
  color: var(--turquoise-deep);
}
.success-spark {
  position: absolute;
  color: var(--coral-deep);
}
.success-spark-a {
  font-size: 0.95rem;
  top: -4px;
  right: 2px;
}
.success-spark-b {
  font-size: 0.68rem;
  bottom: 4px;
  left: -6px;
}
.success-spark-c {
  font-size: 0.55rem;
  top: 16px;
  left: -12px;
  opacity: 0.75;
}
.success-title {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.28;
  color: var(--ink);
}
.success-line,
.success-signoff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
  max-width: 44ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.success-line i {
  flex: 0 0 auto;
  font-size: 1.15rem;
  color: var(--turquoise-deep);
}
.success-signoff {
  margin-top: 0.9rem;
  color: var(--ink);
}
.success-signoff i {
  font-size: 1.15rem;
  color: var(--coral-deep);
}
.success-actions {
  margin-top: 1.6rem;
  justify-content: center;
}

/* Nav elevation on scroll (ported from ver6) */
.v8-nav {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.v8-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 20px rgba(12, 39, 48, 0.08);
}

/* Mobile nav drawer (ported from ver6; shows below the 900px breakpoint where
   the ver8 link row hides) */
.nav-menu {
  display: none;
  position: relative;
}
.nav-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nav-menu summary::-webkit-details-marker {
  display: none;
}
.nav-menu [data-nav-label] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-elevated);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  z-index: 1001;
}
.nav-panel a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  min-height: 44px;
  padding: 0.55rem 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
}
.nav-panel .btn {
  min-height: 44px;
  justify-content: center;
  margin-top: 0.2rem;
  padding: 0.7rem 1.1rem;
  border-bottom: none;
}
.nav-panel a:last-of-type {
  border-bottom: none;
}
@media (max-width: 1079px) {
  .nav-menu {
    display: block;
    margin-left: 10px;
    flex: none;
  }
  .btn-nav {
    display: inline-flex;
    margin-left: auto;
  }
}
@media (max-width: 639px) {
  .btn-nav {
    display: none;
  }
  .nav-menu {
    margin-left: auto;
  }
}

/* ---- on-page demo door (renders only when WebConversation:DemoDoorEnabled) ---- */
.demo-door {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 2rem auto 0;
  padding: 1.3rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-elevated);
}
.demo-door-qr { flex: none; border-radius: 10px; border: 1px solid var(--hairline); }
.demo-door-copy { flex: 1 1 240px; text-align: left; }
.demo-door-copy h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--ink); }
.demo-door-copy p { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.55; }
.demo-door-link a { color: var(--ocean-mid); font-weight: 600; }

/* ---- reveal + motion safety ---- */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* ---- pathway page (Preview to Live): the Ascent Rail ----
   The ladder is a real sequence with optional exits, so the structure carries
   the message: one spine, rungs in order, and an exit branching off any rung.
   The spine is a scroll-linked rail that fills coral-to-turquoise as you
   climb, and each rung's node lights when the fill reaches it. Preview stages
   carry the teal (private, safe) accent, Pilot stages the coral (operational)
   accent, and Live closes the climb on the ocean gradient. */
.rung-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; position: relative; }
@media (min-width: 760px) {
  .rung-list { padding-left: 46px; }
  /* the spine: a quiet track, and a fill that follows the reader down */
  .rung-list::before {
    content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 3px;
    background: var(--hairline); border-radius: 3px;
  }
  .rung-list::after {
    content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 3px;
    background: linear-gradient(180deg, var(--teal-deep) 0%, var(--turquoise) 32%, var(--coral) 62%, var(--coral-deep) 82%, var(--ocean-mid) 100%);
    border-radius: 3px;
  }
  /* the fill reveals rather than stretches: clip from the bottom up */
  html.js .rung-list::after { clip-path: inset(0 0 calc((1 - var(--spine-fill, 0)) * 100%) 0); }
}
.rung {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.72) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--hairline);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: var(--r-lg); padding: 26px 28px;
  box-shadow: 0 12px 30px -12px rgba(12, 39, 48, 0.08), inset 0 1px 1px 0 rgba(255, 255, 255, 0.98);
}
/* stage temperature */
.rung.is-preview {
  --stage-accent: var(--teal-deep);
  --stage-chip-bg: var(--teal-tint);
  --stage-node: var(--teal-deep);
  --stage-glow: rgba(45, 212, 191, 0.16);
  border-color: rgba(15, 118, 110, 0.22);
  box-shadow: 0 16px 36px -14px rgba(15, 118, 110, 0.14), inset 0 1px 2px rgba(255, 255, 255, 1);
}
.rung.is-pilot {
  --stage-accent: var(--coral-deep);
  --stage-chip-bg: var(--coral-tint);
  --stage-node: var(--coral);
  --stage-glow: rgba(236, 72, 106, 0.14);
  border-color: rgba(180, 35, 74, 0.22);
  box-shadow: 0 16px 36px -14px rgba(180, 35, 74, 0.14), inset 0 1px 2px rgba(255, 255, 255, 1);
}
.rung::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: radial-gradient(420px 260px at 100% 0%, var(--stage-glow, transparent), transparent 70%);
  pointer-events: none;
}
@media (min-width: 760px) {
  /* the node where this rung meets the spine */
  .rung::before {
    content: ""; position: absolute; left: -37px; top: 30px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--card); border: 2px solid var(--stage-node, var(--coral));
    transition: background 0.4s ease, box-shadow 0.4s ease;
  }
  .rung.is-passed::before { background: var(--stage-node, var(--coral)); }
  .rung.is-preview.is-passed::before { box-shadow: 0 0 0 6px rgba(45, 212, 191, 0.24); }
  .rung.is-pilot.is-passed::before { box-shadow: 0 0 0 6px rgba(236, 72, 106, 0.2); }
  .rung.is-live::before { border-color: var(--teal-deep); background: var(--teal-deep); }
  .rung.is-live.is-passed::before { box-shadow: 0 0 0 6px rgba(45, 212, 191, 0.3); }
}
.rung-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stage-accent, var(--coral-deep)); margin: 0;
  background: var(--stage-chip-bg, var(--coral-tint));
  border: 1px solid rgba(12, 39, 48, 0.08);
  border-radius: 999px; padding: 6px 14px;
}
.rung-kicker i { font-size: 15px; flex: none; }
.rung h2 { font-family: var(--serif); font-size: 1.75rem; line-height: 1.15; margin: 0.7rem 0 0.5rem; }
.rung > p { margin: 0 0 0.7rem; color: var(--ink-soft); font-size: 15px; }
.rung ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 8px; }
.rung ul li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; }
.rung ul li i { color: var(--teal-deep); font-size: 16px; flex: none; margin-top: 2px; }
.rung-group {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); margin: 1.1rem 0 0.2rem;
}
/* capabilities configured during a pilot rather than switched on today */
.rung ul.is-staged li { color: var(--ink-soft); }
.rung ul.is-staged li i { color: var(--ink-faint); }
.rung-proves { font-family: var(--serif); font-size: 1.08rem; margin: 0.9rem 0 0; }
.rung-exit {
  margin: 1.1rem 0 0; padding: 14px 18px; font-size: 14px;
  border: 1px solid rgba(45, 212, 191, 0.38);
  border-top-color: rgba(255, 255, 255, 0.98);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 253, 250, 0.8) 100%);
  border-radius: var(--r-md); color: var(--ink);
  box-shadow: 0 8px 20px -8px rgba(15, 118, 110, 0.18), inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
}
.rung-exit strong { color: var(--teal-deep); }

/* Live is the destination: it closes the climb on the ocean gradient. */
.rung.is-live {
  background: linear-gradient(150deg, var(--ocean-a), var(--ocean-b));
  border-color: rgba(45, 212, 191, 0.35);
  border-top-color: rgba(45, 212, 191, 0.35);
  color: var(--on-dark);
  overflow: hidden;
  box-shadow: 0 20px 48px -20px rgba(12, 39, 48, 0.6);
}
.rung.is-live::after {
  background:
    radial-gradient(420px 280px at 100% 0%, rgba(45, 212, 191, 0.18), transparent 70%),
    radial-gradient(380px 260px at 0% 100%, rgba(236, 72, 106, 0.15), transparent 70%);
}
.rung.is-live .rung-kicker { background: rgba(45, 212, 191, 0.14); color: var(--turquoise); border-color: rgba(45, 212, 191, 0.3); }
.rung.is-live h2 { color: #FFFFFF; }
.rung.is-live > p, .rung.is-live ul li { color: rgba(234, 243, 242, 0.85); }
.rung.is-live .rung-group { color: rgba(234, 243, 242, 0.6); }
.rung.is-live ul li i { color: var(--turquoise); }
.rung.is-live .rung-exit {
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid rgba(45, 212, 191, 0.35);
  color: rgba(234, 243, 242, 0.95);
  box-shadow: none;
}

/* outcome to pathway routes: the table keeps its semantics and its approved
   copy, but lays out as a bento of glass route cards; JS wraps each route's
   stops in chips without touching the words. */
.pathway-table-wrap { overflow-x: visible; border: none; border-radius: 0; background: transparent; }
.pathway-table { display: block; border-collapse: separate; width: 100%; min-width: 0; font-size: 14.5px; }
.pathway-table thead { display: block; margin-bottom: 14px; }
.pathway-table thead tr { display: flex; justify-content: center; gap: 10px; }
.pathway-table th {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; text-align: left;
  padding: 6px 16px; border-bottom: none;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--hairline); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(12, 39, 48, 0.04);
}
.pathway-table th:first-child { color: var(--ink-soft); }
.pathway-table th:last-child { color: var(--teal-deep); border-color: rgba(15, 118, 110, 0.3); }
.pathway-table tbody { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 880px) {
  .pathway-table tbody { grid-template-columns: repeat(6, 1fr); }
  .pathway-table tbody tr:nth-child(-n+3) { grid-column: span 2; }
  .pathway-table tbody tr:nth-child(n+4) { grid-column: span 3; }
}
.pathway-table tbody tr {
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(240, 253, 250, 0.72) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 18px; padding: 20px;
  box-shadow: 0 10px 26px -12px rgba(15, 118, 110, 0.12), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pathway-table tbody tr:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, 0.38);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 14px 34px -4px rgba(15, 118, 110, 0.18), 0 0 20px rgba(45, 212, 191, 0.1);
  }
}
.pathway-table td { display: block; padding: 0; border-bottom: none; }
.pathway-table td:first-child { font-weight: 600; color: var(--ink); flex: 1; font-size: 14.5px; line-height: 1.45; }
.pathway-route { color: var(--teal-deep); font-weight: 700; white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.route-chip {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 700; line-height: 1;
  color: var(--teal-deep); background: var(--teal-tint);
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 999px; padding: 6px 12px;
}
.route-chip.is-live { color: var(--turquoise); background: var(--ocean-a); border-color: rgba(45, 212, 191, 0.35); box-shadow: 0 2px 8px rgba(12, 39, 48, 0.2); }
.route-arrow { color: var(--ocean-mid); font-weight: 700; }

/* ==========================================================================
   ver8.1 — colour journey, bentos and motion.
   Each band declares an accent temperature (data-band-accent) so the scroll
   reads as a colour journey instead of alternating sand/warm; grids stagger
   their children in behind the section reveal; the nav carries an ocean-to-
   coral journey rail that fills with scroll progress. Everything visual
   is scoped to html.js and reset under prefers-reduced-motion.
   ========================================================================== */

/* ---- band accent washes ---- */
.band[data-band-accent] > .wrap { position: relative; z-index: 1; }
.band[data-band-accent]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: band-halo-breathe 14s ease-in-out infinite alternate;
}
.band[data-band-accent="coral"]::before {
  background:
    radial-gradient(860px 540px at 4% 15%, rgba(236, 72, 106, 0.18), transparent 70%),
    radial-gradient(650px 420px at 96% 85%, rgba(8, 145, 178, 0.09), transparent 70%);
}
.band[data-band-accent="teal"]::before { background: radial-gradient(860px 540px at 96% 15%, rgba(45, 212, 191, 0.26), transparent 70%); }
.band[data-band-accent="ocean"]::before { background: radial-gradient(820px 500px at 92% 80%, rgba(8, 145, 178, 0.16), transparent 70%); }
.band[data-band-accent="split"]::before {
  background:
    radial-gradient(700px 500px at 6% 30%, rgba(45, 212, 191, 0.24), transparent 70%),
    radial-gradient(700px 500px at 94% 30%, rgba(236, 72, 106, 0.20), transparent 70%);
}
@keyframes band-halo-breathe {
  0% { transform: scale(1) translate(0, 0); opacity: 0.8; }
  50% { transform: scale(1.06) translate(15px, -10px); opacity: 1; }
  100% { transform: scale(0.96) translate(-10px, 15px); opacity: 0.85; }
}

.band[data-band-accent="coral"] .eyebrow {
  color: var(--coral-deep);
  border-color: rgba(180, 35, 74, 0.28);
  box-shadow: 0 2px 10px -2px rgba(180, 35, 74, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.band[data-band-accent="ocean"] .eyebrow {
  color: var(--ocean-mid);
  border-color: rgba(8, 145, 178, 0.28);
  box-shadow: 0 2px 10px -2px rgba(8, 145, 178, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.band[data-band-accent="teal"] .eyebrow {
  color: var(--teal-deep);
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 2px 10px -2px rgba(15, 118, 110, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.band[data-band-accent="split"] .eyebrow {
  color: var(--teal-deep);
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 2px 10px -2px rgba(15, 118, 110, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.band[data-band-accent="coral"] h2 em { color: var(--coral-deep); }
.band[data-band-accent="teal"] h2 em { color: var(--teal-deep); }
.band[data-band-accent="split"] h2 em { color: var(--coral-deep); }
#picture h2 em { color: var(--ocean-mid); }
#language-access h2 em { color: var(--ocean-mid); }
#what-changes h2 em { color: var(--ocean-mid); }
#interface h2 em { color: var(--ocean-mid); }
.sv-ocean-label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; fill: #0891B2; }
.sv-teal-title { fill: #0F766E; font-weight: 700; }
.txt-coral { color: var(--coral-deep); font-weight: 600; }
.txt-coral-shaded {
  color: var(--coral-deep);
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.95) 0%, rgba(255, 228, 230, 0.85) 100%);
  border: 1px solid rgba(225, 29, 72, 0.25);
  border-radius: 6px;
  padding: 1px 7px;
  font-weight: 700;
  display: inline;
}
.txt-ocean, h1 .txt-ocean, h2 .txt-ocean, h3 .txt-ocean, p .txt-ocean, span.txt-ocean { color: var(--ocean-mid); }
.txt-teal, h1 .txt-teal, h2 .txt-teal, h3 .txt-teal, p .txt-teal, span.txt-teal { color: var(--teal-deep); font-weight: 600; }
.txt-teal-brand {
  font-family: var(--serif);
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #0F766E 0%, #0D9488 45%, #14B8A6 80%, #2DD4BF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline;
}
.txt-teal-brand .reg {
  font-family: var(--sans);
  font-size: 0.52em;
  font-weight: 800;
  vertical-align: 0.55em;
  -webkit-text-fill-color: #0F766E;
  color: #0F766E;
}
.band[data-band-accent="coral"] .statement em { color: var(--coral-deep); }
.band[data-band-accent="ocean"] .statement em { color: var(--ocean-mid); }
.band[data-band-accent="teal"] .statement em { color: var(--teal-deep); }
.band[data-band-accent="split"] .statement em { color: var(--coral-deep); }
#familiar .statement em { color: var(--ocean-mid); }
#gap .statement em { color: var(--teal-deep); }
#market .statement { color: var(--ocean-mid); }

/* High-specificity color utility overrides */
.statement .txt-ocean,
.statement em.txt-ocean,
.statement .txt-ocean em,
.band[data-band-accent] .statement em.txt-ocean,
.band[data-band-accent] .statement .txt-ocean em,
.band[data-band-accent] .statement span.txt-ocean,
#parallel .statement .txt-ocean,
#parallel .statement .txt-ocean em {
  color: var(--ocean-mid) !important;
}

.statement .txt-teal,
.statement em.txt-teal,
.statement .txt-teal em,
.band[data-band-accent] .statement em.txt-teal,
.band[data-band-accent] .statement .txt-teal em,
.band[data-band-accent] .statement span.txt-teal,
#parallel .statement .txt-teal {
  color: var(--teal-deep) !important;
}

/* ---- nav journey rail ---- */
.v8-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  pointer-events: none;
}
.v8-rail span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal-deep), var(--ocean-mid) 40%, var(--coral));
  border-radius: 0 2px 2px 0;
}

/* ---- staggered grid reveals ---- */
/* Children of a [data-stagger] grid ride in behind their section's reveal,
   each delayed by its index (--i, set once by JS). */
html.js [data-reveal] [data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js [data-reveal].is-in [data-stagger] > * {
  opacity: 1;
  transform: none;
}

/* ---- hero topology cascade ---- */
/* The topo card assembles top-down once the hero reveals: knowledge in,
   Chatterbox at the core, outcomes out. */
html.js #hero .topo-stack > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
html.js #hero.is-in .topo-stack > * { opacity: 1; transform: none; }
html.js #hero.is-in .topo-stack > *:nth-child(1) { transition-delay: 0.25s; }
html.js #hero.is-in .topo-stack > *:nth-child(2) { transition-delay: 0.42s; }
html.js #hero.is-in .topo-stack > *:nth-child(3) { transition-delay: 0.58s; }
html.js #hero.is-in .topo-stack > *:nth-child(4) { transition-delay: 0.74s; }
html.js #hero.is-in .topo-stack > *:nth-child(5) { transition-delay: 0.9s; }

/* The spotlight port claimed .topo-card::before, which silently dropped the
   ver8 halo; restore it on ::after, breathing slowly. */
.topo-card::after {
  content: "";
  position: absolute;
  inset: -65px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(236, 72, 106, 0.35) 0%, rgba(45, 212, 191, 0.26) 45%, rgba(8, 145, 178, 0.15) 65%, transparent 78%);
  filter: blur(24px);
  animation: topo-halo-pulse 6s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes topo-halo-pulse {
  0% { transform: scale(0.88) rotate(0deg); opacity: 0.55; }
  50% { transform: scale(1.12) rotate(6deg); opacity: 1; }
  100% { transform: scale(0.96) rotate(-4deg); opacity: 0.75; }
}

/* ---- statement tile ---- */
.statement-tile {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(254, 242, 244, 0.95) 100%);
  border: 1.5px solid rgba(180, 35, 74, 0.35);
  border-top: 1.5px solid rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  padding: 24px 34px;
  box-shadow: 0 18px 40px -12px rgba(180, 35, 74, 0.22), inset 0 1px 2px #FFFFFF;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--coral-deep);
}
.statement-tile strong { color: var(--coral-deep); }

/* ---- primary button sheen ---- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 42%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after { left: 130%; }

/* ==========================================================================
   Secondary Pages: Abilities, Use Cases, Evaluation Guide, and FAQ (Ver8)
   ========================================================================== */

/* --- Secondary Page Hero & Stack --- */
.family-hero {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.family-hero .section-lede {
  margin: 1rem auto 1.8rem;
}
.family-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
  text-align: left;
}
.family-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.4rem;
  box-shadow: 0 4px 18px rgba(12, 39, 48, 0.05);
}
.family-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
  color: var(--teal-deep);
}
.family-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* --- Abilities Spine & Rails --- */
.ability-spine-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 1.8rem;
}
@media (min-width: 768px) {
  .ability-spine-group {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ability-card,
.ability-rail-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 1.5rem;
  text-align: left;
  box-shadow: 0 4px 18px rgba(12, 39, 48, 0.05);
}
.ability-badge,
.ability-rail-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0.6rem 0 0.4rem;
}
.ability-card h3,
.ability-rail-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}
.ability-card p,
.ability-rail-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.ability-rails {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 1.8rem;
}
@media (min-width: 768px) {
  .ability-rails {
    grid-template-columns: 1fr 1fr;
  }
}
.ability-rail-card {
  border-style: dashed;
  border-color: rgba(15, 118, 110, 0.35);
}

/* --- Starter Problems Grid --- */
.starter-problems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 1.8rem;
}
@media (min-width: 640px) {
  .starter-problems-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .starter-problems-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.problem-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.4rem;
  box-shadow: 0 4px 18px rgba(12, 39, 48, 0.05);
}
.problem-card h3 {
  font-size: 1.12rem;
  margin: 0 0 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.problem-card h3 i {
  color: var(--teal-deep);
  font-size: 1.25rem;
}
.problem-card p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* --- Evaluation Guide Layout & Cards --- */
.guide-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .guide-hero {
    grid-template-columns: 1.35fr 1fr;
  }
}
.guide-hero-copy .section-lede {
  margin-bottom: 0.9rem;
}
.guide-hero-tests {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(12, 39, 48, 0.07);
  padding: clamp(1.3rem, 3vw, 1.8rem);
}
.guide-tests-title {
  font-size: 1.2rem;
  margin: 0 0 1rem;
  color: var(--teal-deep);
}
.guide-tests-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.guide-tests-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.guide-test-n {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--coral-tint);
  color: var(--coral-deep);
  font-size: 0.78rem;
  font-weight: 700;
}
.guide-question-grid {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.9rem 2rem;
}
.guide-question-grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.guide-question-grid i {
  color: var(--teal-deep);
  font-size: 1.15rem;
  flex: 0 0 auto;
  margin-top: 0.15rem;
}
.guide-note {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 68ch;
  margin: 1.4rem auto 0;
  text-align: center;
}
.guide-claim {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--ink);
  line-height: 1.35;
  max-width: 60ch;
  margin: 1.4rem auto 0;
  text-align: center;
}
.guide-options-list {
  max-width: 900px;
  margin: 0 auto;
}
.guide-opt-n {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 0.7rem;
  border-radius: 999px;
  background: var(--coral-tint);
  color: var(--coral-deep);
  font-size: 0.78rem;
  font-weight: 700;
  vertical-align: middle;
}
.guide-opt-strength {
  color: var(--ink);
}
.guide-opt-label {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.guide-opt-gap {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
}
.guide-tests-rows {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 940px;
  margin: 0 auto;
}
.guide-test-row {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(12, 39, 48, 0.05);
  overflow: hidden;
  transition: border-color 0.2s ease;
  scroll-margin-top: 96px;
}
.guide-test-row[open] {
  border-color: var(--coral);
}
.guide-test-row summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  cursor: pointer;
}
.guide-test-row summary::-webkit-details-marker { display: none; }
.guide-test-num {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--coral-tint);
  color: var(--coral-deep);
  font-family: var(--serif);
  font-size: 1.2rem;
}
.guide-test-q {
  flex: 1 1 auto;
  font-size: clamp(0.98rem, 2vw, 1.1rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.guide-test-row[open] .faq-chevron {
  transform: rotate(180deg);
}
.guide-test-body {
  padding: 0 1.4rem 1.4rem 4.4rem;
}
.guide-test-body p {
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.62;
  margin: 0 0 0.7rem;
}
.guide-test-body p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .guide-test-body { padding-left: 1.4rem; }
}
.guide-outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 0.9rem;
}
.guide-outcome-card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.1rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(12, 39, 48, 0.05);
}
.guide-outcome-card i {
  color: var(--teal-deep);
  font-size: 1.3rem;
  flex: 0 0 auto;
}
.guide-outcome-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.guide-prose {
  max-width: 72ch;
  margin: 0 auto;
}
.guide-prose p {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.68;
  margin: 0 0 1rem;
}
.guide-comparison-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 72ch;
  margin: 1.6rem auto 0;
  padding: 1.15rem 1.3rem;
  background: var(--card);
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-left: 3.5px solid var(--teal-deep);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(12, 39, 48, 0.05);
}
.guide-comparison-callout i {
  color: var(--teal-deep);
  font-size: 1.4rem;
  flex: 0 0 auto;
}
.guide-comparison-callout p {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.55;
}
.guide-reassurance-row {
  list-style: none;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.7rem;
}
.guide-reassurance-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.36rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.guide-reassurance-row i {
  color: var(--teal-deep);
  font-size: 1rem;
}

/* --- Deep Ink Band & Orchestration SVG --- */
.band-ink {
  background: var(--ink);
  color: var(--on-dark);
}
.band-ink .section-title,
.band-ink .guide-claim {
  color: #FFFFFF;
}
.band-ink .section-lede,
.band-ink .guide-note-ink {
  color: var(--on-dark);
}
.band-ink .eyebrow {
  color: var(--turquoise);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(45, 212, 191, 0.35);
}
.orchestration-figure {
  margin: clamp(1.6rem, 4vw, 2.6rem) auto 0;
  max-width: 760px;
}
.orchestration-svg {
  display: block;
  width: 100%;
  height: auto;
}
.orch-node circle {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(45, 212, 191, 0.55);
  stroke-width: 1.4;
}
.orch-node text {
  fill: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
}
.orch-core-ring {
  fill: none;
  stroke: rgba(236, 72, 106, 0.35);
  stroke-width: 1.4;
}
.orch-core-text {
  fill: #FFFFFF;
  font-family: var(--serif);
  font-size: 22px;
  text-anchor: middle;
}
.orchestration-caption {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  text-align: center;
  max-width: 64ch;
  margin: 1.1rem auto 0;
}
.guide-coordination-list {
  list-style: none;
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
  padding: 0;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.7rem 2rem;
}
.guide-coordination-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
}
.guide-coordination-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--turquoise);
}

/* --- FAQ Badges, Category Grid, and Accordions --- */
.faq-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.faq-badge-agreed {
  background: rgba(15, 118, 110, 0.1);
  color: var(--teal-deep);
  border: 1px solid rgba(15, 118, 110, 0.24);
}
.faq-badge-preview {
  background: var(--coral-tint);
  color: var(--coral-deep);
  border: 1px solid rgba(236, 72, 106, 0.28);
}
.faq-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: 1rem;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.faq-cat-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.2rem 1.2rem 1.3rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(12, 39, 48, 0.05);
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-cat-card:hover,
.faq-cat-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(236, 72, 106, 0.35);
  box-shadow: 0 8px 30px rgba(12, 39, 48, 0.08);
}
.faq-cat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-cat-icon {
  font-size: 1.5rem;
  color: var(--teal-deep);
}
.faq-cat-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--coral-deep);
  background: var(--coral-tint);
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
}
.faq-cat-title {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--ink);
  line-height: 1.2;
}
.faq-cat-scope {
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.faq-cat-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}
.faq-cat-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 96px;
}
.faq-cat-heading i {
  color: var(--teal-deep);
  font-size: 1.15em;
}
.faq-cat-section {
  scroll-margin-top: 88px;
}
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(12, 39, 48, 0.05);
  overflow: hidden;
  transition: border-color 0.2s ease;
  scroll-margin-top: 96px;
}
.faq-item[open] {
  border-color: rgba(236, 72, 106, 0.4);
}
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron {
  color: var(--teal-deep);
  font-size: 1.1rem;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}
.faq-body {
  padding: 0 1.3rem 1.25rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.faq-body p { margin: 0 0 0.6rem; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body ul {
  margin: 0 0 0.6rem;
  padding-left: 1.15rem;
}
.faq-body ul li {
  margin-bottom: 0.32rem;
  line-height: 1.55;
}
.section-more {
  text-align: center;
  margin: 1.4rem 0 0;
}
.section-more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--coral-deep);
}



/* ---- motion safety for the ver8.1 layer ---- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] [data-stagger] > *,
  html.js #hero .topo-stack > * {
    opacity: 1;
    transform: none;
  }
  .topo-card::after { animation: none; }
  html.js .rung-list::after { clip-path: none; }
  .svg-pulse-beacon { animation: none; }
}