/* 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 lives in chatterbox_csi_tokens.css, the canon token layer. */
  --grad-ocean-text: linear-gradient(135deg, #0C4A6E 0%, var(--ocean-text) 55%, var(--ocean-mid) 100%);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ocean-a: var(--ink);
  --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 lives in chatterbox_csi_tokens.css, the canon token layer. */
  --em-accent: var(--ocean-mid);
  /* Aliases carried over from ver6, used only by this sheet. */
  --white: #FFFFFF;
  --ink-quiet: #4A646F;
  --turquoise-deep: var(--teal-deep);
  --teal-text: #0B7A70;
  --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;
}

* { box-sizing: border-box; }
/* scroll-padding-top clears the 72px sticky nav for every in-page jump and
   scrollIntoView call. Targets must not add their own scroll-margin-top on
   top of it, or they land twice as far down. */
html { background: var(--sand); scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--sand);
  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; overflow-x: clip; }
/* overflow-x: clip above: the static blurred halos (.topo-card::after at inset
   -65px, .mock-frame::after at inset -60px) reach past the band edge by design,
   and below about 480px that bleed gave the page a horizontal scroll. Clip is
   horizontal only, so vertical overflow such as a card's hover lift stays
   visible, and unlike hidden it creates no scroll container. Browsers without
   clip keep the previous behaviour. */
.band-warm {
  background-color: rgba(251, 248, 243, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.band-warm::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.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-text); }
.statement.is-centred { text-align: center; margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.4;
  text-wrap: balance;
  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 var(--hairline); border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 1.15em; 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 i { flex: none; }
.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; }

/* ---- ambient field ---- */
/* Product-surface wash from ver2, softened in ver8.1: the stain is pale
   turquoise at low opacity so body copy reads on near-sand, with one faint
   ocean blob for depth. Coral stays in type and cards, not in the page air.
   Motion is gated by .is-animating so reduced-motion readers get a still
   field. */
.ambient-field { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(64px);
}
.blob-1 {
  width: 62vw; height: 62vw;
  top: -22%; left: -12%;
  opacity: 0.22;
  background: radial-gradient(circle at 50% 50%, #99F6E4 0%, #5EEAD4 58%, transparent 74%);
}
.blob-2 {
  width: 52vw; height: 52vw;
  bottom: -14%; right: -12%;
  opacity: 0.14;
  background: radial-gradient(circle at 40% 35%, #0E7490 0%, rgba(14, 116, 144, 0) 74%);
}
.blob-3 {
  width: 48vw; height: 48vw;
  top: 38%; right: 16%;
  opacity: 0.20;
  background: radial-gradient(circle at 30% 30%, #5EEAD4 0%, rgba(94, 234, 212, 0) 72%);
}
.blob-4 {
  width: 56vw; height: 56vw;
  bottom: 26%; left: 8%;
  opacity: 0.14;
  background: radial-gradient(circle at 60% 40%, #99F6E4 0%, #5EEAD4 60%, transparent 78%);
}
.ambient-field.is-animating .blob { will-change: transform; }
.ambient-field.is-animating .blob-1 { animation: blobDrift1 21s ease-in-out infinite alternate; }
.ambient-field.is-animating .blob-2 { animation: blobDrift2 27s ease-in-out infinite alternate; }
.ambient-field.is-animating .blob-3 { animation: blobDrift3 24s ease-in-out infinite alternate; }
.ambient-field.is-animating .blob-4 { animation: blobDrift4 31s ease-in-out infinite alternate; }
/* The footer's motion pause holds each blob where it is rather than snapping
   it back to where its drift began. */
html.is-motion-paused .ambient-field.is-animating .blob { animation-play-state: paused; will-change: auto; }
@keyframes blobDrift1 { from { transform: translate3d(0, 0, 0) scale(0.92); } to { transform: translate3d(9%, 17%, 0) scale(1.12); } }
@keyframes blobDrift2 { from { transform: translate3d(0, 0, 0) scale(0.94); } to { transform: translate3d(-13%, -21%, 0) scale(1.14); } }
@keyframes blobDrift3 { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(-17%, 13%, 0) scale(1.10); } }
@keyframes blobDrift4 { from { transform: translate3d(0, 0, 0) scale(0.93); } to { transform: translate3d(21%, -13%, 0) scale(1.09); } }

/* ---- nav ---- */
.v8-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 248, 243, 0.72);
  -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-color 350ms var(--ease-out), border-color 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
/* The scrolled bar is translucent, so contrast is measured over white, the
   lightest thing that can scroll under it. At the 100% stop: links 5.57:1,
   active links 4.77:1, signature 4.63:1. The earlier 52% and 100% stops
   (11,100,128 and 14,116,144) put active links at 4.43 and 3.65.
   A gradient cannot interpolate, so it is painted on ::before and faded in
   over the same 350ms as the text colours below; the sticky bar's z-index
   makes it a stacking context, so -1 stays inside the bar. */
.v8-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(12, 74, 110, 0.94) 0%, rgba(12, 84, 116, 0.92) 52%, rgba(12, 94, 122, 0.92) 100%);
  opacity: 0;
  transition: opacity 350ms var(--ease-out);
  pointer-events: none;
}
.v8-nav.is-scrolled {
  background-color: transparent;
  border-bottom-color: rgba(127, 233, 220, 0.22);
  box-shadow: 0 6px 30px rgba(6, 8, 10, 0.26);
}
.v8-nav.is-scrolled::before { opacity: 1; }
.v8-wordmark,
.v8-wordmark .reg,
.reg,
.v8-signature,
.nav-menu summary { transition: color 350ms var(--ease-out); }
.v8-nav.is-scrolled .v8-wordmark {
  color: #7FE9DC;
  text-shadow: none;
}
.v8-nav.is-scrolled .v8-wordmark .reg,
.v8-nav.is-scrolled .reg { color: #7FE9DC; }
.v8-nav.is-scrolled .v8-signature { color: rgba(236, 250, 252, 0.86); }
.v8-nav.is-scrolled .v8-nav-links a { color: #EAF9FC; }
.v8-nav.is-scrolled .v8-nav-links a:hover,
.v8-nav.is-scrolled .v8-nav-links a.is-active,
.v8-nav.is-scrolled .v8-nav-links a[aria-current="location"] { color: #A7F3EA; }
.v8-nav.is-scrolled .v8-nav-links a::after { background: #7FE9DC; }
.v8-nav.is-scrolled .nav-menu summary { color: #EAF9FC; }
/* The global ocean ring is under 3:1 on the dark scrolled bar and drawer. */
.v8-nav.is-scrolled :focus-visible { outline-color: var(--on-dark); }
/* Gaps and link size are fixed, not vw-driven, so the row (brand, six links,
   CTA) fits the 1120px frame from the 1080px switch up. */
.v8-nav-inner { display: flex; align-items: center; gap: 12px; 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;
  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-soft); white-space: nowrap; }
.v8-nav-links { display: none; gap: 10px; margin-left: auto; }
.v8-nav-links a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  transition: color 350ms var(--ease-out);
}
.v8-nav-links a::after {
  content: "";
  position: absolute;
  /* Keeps the underline about 6px under the label inside the 44px target. */
  bottom: 5.5px;
  left: 12.5%;
  width: 75%;
  height: 2.5px;
  border-radius: 999px;
  background: var(--ocean-mid);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out);
  opacity: 0;
}
.v8-nav-links a:hover,
.v8-nav-links a.is-active,
.v8-nav-links a[aria-current="location"],
.nav-panel a:not(.btn):hover,
.nav-panel a:not(.btn).is-active,
.nav-panel a:not(.btn)[aria-current="location"] {
  color: var(--ocean-text);
}
.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 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
  white-space: nowrap;
  flex: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
/* A busy, sending button: it neither lifts nor sheens, and while aria-busy its
   icon gives way to a ring. The walkthrough steppers have the surface's other
   disabled state, an unavailable step (aria-disabled, 0.45, no lift), in their
   own sheets. */
.btn[disabled],
.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.78;
  transform: none;
}
.btn[disabled]:hover,
.btn[aria-busy="true"]:hover,
.btn[disabled]:active,
.btn[aria-busy="true"]:active { transform: none; }
.btn-primary[disabled]::after,
.btn-primary[aria-busy="true"]::after { display: none; }
.btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  animation: btn-spin 0.8s linear infinite;
}
.btn[aria-busy="true"] .btn-spinner { display: inline-block; }
.btn[aria-busy="true"] > i { display: none; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* The ring would freeze under the wildcard kill, so the icon stays instead;
     the status line and aria-busy still carry the pending state. */
  .btn[aria-busy="true"] .btn-spinner { display: none; }
  .btn[aria-busy="true"] > i { display: inline-block; }
}
.btn-primary {
  background: var(--grad-cta);
  color: var(--white);
  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);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: var(--grad-cta-hover);
  box-shadow: 0 14px 32px -10px rgba(15, 118, 110, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.btn-primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 10px rgba(15, 118, 110, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.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 {
  min-height: 44px;
  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; }
/* A call-to-action never runs past the gutter: capped at the row's width, a
   label too long for a 320px phone wraps to a second line instead. Buttons
   that fit keep their single line. */
.cta-row .btn { max-width: 100%; white-space: normal; line-height: 1.3; text-align: center; }
/* The global :focus-visible ring moved to chatterbox_csi_tokens.css, beside the
   --focus token it reads, so the two cannot drift apart. Component-level focus
   rules below are more specific, still win, and are unchanged. */

/* ---- 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 belongs to the shared spotlight layer (see the card group
   below); the hero halo lives on ::after. Do not add anything to ::before. */
.topo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline-neutral); }
.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 280ms var(--ease-out), translate 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.topo-node.is-source {
  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.is-source .topo-kicker { color: var(--ocean-text); }
.topo-node .topo-kicker { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); 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-text); }
/* Kickers and arrows were ink-faint (2.73:1) as decoration. Decided 2026-09-23:
   the kicker words carry a label and the arrow is a 3:1 graphic, so both read ink-soft. */
.topo-arrow { text-align: center; color: var(--ink-soft); 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 280ms var(--ease-out), translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
  height: 100%; box-sizing: border-box;
}
.pain-grid:has(details[open]) .pain-card:not([open]) { height: auto; }
.pain-card:hover { translate: 0 -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;
  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 280ms var(--ease-out);
}
.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 280ms 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 var(--ocean-glow);
}
.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-text);
}
.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-text);
}

.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 280ms var(--ease-out), translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
  height: 100%; box-sizing: border-box;
}
.break-grid:has(details[open]) .break-card:not([open]) { height: auto; }
.break-card:hover { translate: 0 -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 280ms var(--ease-out), translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
  height: 100%; box-sizing: border-box;
}
.opts-strip:has(details[open]) .opt-card:not([open]) { height: auto; }
.opt-card:hover { translate: 0 -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[open] .opt-body {
  margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  animation: card-expand-in 280ms 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 var(--ocean-glow);
}
.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-text);
  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 var(--ocean-glow), 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: var(--r-lg);
  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-card figcaption .is-spaced { margin-top: 0.6rem; }
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 {
  /* Was display: table. Blink drops the whitespace text nodes between the three spans
     inside a table box, so the motto rendered "Your knowledge.Your rules.Your Chatterbox."
     Flex keeps the shrink-to-fit centring and puts the phrase gap back explicitly; each
     phrase wraps whole on a narrow screen instead of breaking mid-phrase. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.3em;
  width: fit-content;
  max-width: 100%;
  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 var(--white);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ownership-line span { white-space: nowrap; }
.ownership-line span:nth-child(1),
.v8-footer-motto span:nth-child(1) {
  color: var(--ocean-text);
}
.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);
}

/* The old text-bearing hub vocabulary (.sv-box, .sv-label, .sv-arrow and kin)
   is gone: every ver8 figure now draws with the .fig-* set below and labels in
   HTML. The halos are static. Only the flow dots move: they carry
   direction and the live-versus-staged distinction, which is the figure's argument. */
.flow-dot { opacity: 0; }

/* Shared figure vocabulary for the no-text figures (labels live in HTML beside
   the drawing). Two Sides draws with it too, so every page draws the
   same grammar: white node with ocean stroke = live from the Preview, dashed
   sand node = added when needed, teal core = your Chatterbox, coral = the one
   thing that needs a person. */
.fig-node { fill: var(--card); stroke: rgba(12, 39, 48, 0.32); stroke-width: 1.5; }
.fig-node-mark { fill: var(--ocean-mid); opacity: 0.7; }
.fig-node-dim { fill: var(--sand); stroke: rgba(12, 39, 48, 0.32); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fig-core { stroke: var(--teal-deep); stroke-width: 2; }
.fig-core-mark { fill: var(--teal-deep); }
.fig-team { fill: var(--card); stroke: var(--coral-deep); stroke-width: 1.8; }
.fig-team-mark { fill: var(--coral-deep); }
.fig-record { fill: var(--card); stroke: var(--teal-deep); stroke-width: 1.6; }
.fig-flow { fill: none; stroke: var(--ocean-mid); stroke-width: 1.8; stroke-linecap: round; }
.fig-flow-dim { fill: none; stroke: rgba(12, 39, 48, 0.32); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 4; }
.fig-hand { fill: none; stroke: var(--coral-deep); stroke-width: 1.8; stroke-linecap: round; }
.fig-dot { fill: var(--ocean-mid); }
.fig-dot.is-coral { fill: var(--coral-deep); }
.fig-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0.8rem 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-soft); }
.fig-legend li { display: inline-flex; align-items: center; gap: 7px; }
.fig-legend .fig-key { width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 1.5px solid rgba(12, 39, 48, 0.32); flex: none; }
.fig-legend .fig-key.is-core { border-radius: 4px; border-color: var(--teal-deep); background: var(--teal-tint); }
.fig-legend .fig-key.is-team { border-color: var(--coral-deep); }
.fig-legend .fig-key.is-dim { border-style: dashed; background: var(--sand); }
/* A short line swatch for a rule in the drawing (the language layer, the one seam). */
.fig-legend .fig-key.is-rule {
  width: 14px;
  height: 0;
  border: 0;
  border-top: 1.8px solid var(--ocean-mid);
  border-radius: 0;
  background: transparent;
  margin-top: 8px;
}
/* Label groups for a no-text drawing: HTML beside or below the SVG, in the
   drawing's own order. Each group is a kicker plus a stacked .fig-legend. The
   Home portrait block predates this set and keeps its .hub-portrait-* names. */
.fig-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 22px;
  margin: 1.1rem 0 0;
}
.fig-label-group { min-width: 0; }
.fig-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fig-labels .fig-legend {
  display: grid;
  gap: 7px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
}
.fig-labels .fig-legend li { display: flex; align-items: flex-start; gap: 9px; }
.fig-labels .fig-legend .fig-key { margin-top: 3px; }
.fig-labels .fig-legend .fig-key.is-rule { margin-top: 8px; }
.fig-labels .fig-legend strong { display: block; font-weight: 600; color: var(--ink); }
.fig-labels .fig-legend small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-soft); }
@supports (offset-path: path("M0 0 L1 1")) {
  /* The dots run only once the script is in, because the script owns the
     footer's motion pause; without it they rest, as under reduced motion.
     The pause and off-screen rules out-specify the run rule, so their order
     does not matter. */
  html.js .flow-dot { animation: dot-run 3.4s linear infinite; }
  html.js svg.is-offscreen .flow-dot { animation-play-state: paused; }
  html.js.is-motion-paused .flow-dot { animation: none; }
  @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 280ms var(--ease-out), translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.change-card:hover { translate: 0 -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: var(--r-sm);
  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: 640px) and (max-width: 979px) {
  .commit-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) { .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 var(--hairline);
  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 280ms var(--ease-out), translate 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.commit-card:hover { translate: 0 -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); }
/* Commitments are product promises, so every icon takes the product teal. */
.commit-card 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 var(--hairline);
  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: var(--r-md); 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-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-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: var(--r-lg);
  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; }

/* ---- worked request thread (home) ----
   The example is staged as the exchange itself: the customer on the right,
   Chatterbox on the left, and the team record beneath as a handover note.
   Vertical order carries the sequence, so there is no numbering. Coral marks
   the record because coral is where a person steps in. */
.request-thread {
  max-width: 680px;
  margin: 2.2rem auto 0;
  display: grid;
  gap: 14px;
}
.thread-who {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.thread-msg {
  display: grid;
  gap: 5px;
  max-width: min(80%, 480px);
  padding: 14px 18px;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
.thread-msg p { font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.thread-msg.is-customer {
  justify-self: end;
  background: var(--ink);
  border-bottom-right-radius: 6px;
}
.thread-msg.is-customer p { color: var(--on-dark); }
.thread-msg.is-customer .thread-who { color: rgba(234, 243, 242, 0.68); }
.thread-msg.is-chatterbox {
  justify-self: start;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 6px;
}
.thread-msg.is-chatterbox .thread-who { color: var(--teal-deep); gap: 0; }
.thread-msg.is-chatterbox .thread-who .reg { font-size: 0.7em; vertical-align: 0.35em; margin-left: 1px; }
.thread-record {
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(180, 35, 74, 0.22);
  border-top: 3px solid var(--coral-deep);
  border-radius: var(--r-md);
  padding: 14px 18px 16px;
  box-shadow: var(--shadow-soft);
}
.thread-record .thread-who { color: var(--coral-deep); }
.thread-record dl { margin: 10px 0 0; display: grid; gap: 6px; }
.thread-record dl > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; align-items: baseline; }
.thread-record dt { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; }
.thread-record dd { margin: 0; font-size: 14.5px; color: var(--ink); }
.thread-note { margin: 0.9rem auto 0; max-width: 52ch; text-align: center; font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 560px) {
  .thread-msg { max-width: 92%; }
  .thread-record dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- 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);
  pointer-events: none;
}
.mock-topbar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline-neutral); }
.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; white-space: nowrap; flex: none; }
.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; }
.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: var(--teal-tint); border: 1px solid var(--hairline); border-bottom-left-radius: 5px; }
[data-greeting-controls][hidden],
[data-greeting-pair][hidden],
[data-contact-preview-steps][hidden] { display: none; }
.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); }
button.mock-chip { font-family: inherit; cursor: pointer; position: relative; }
/* The chips stay illustration-sized; each takes a 44px hit area, and the 8px
   gap keeps neighbouring areas apart. */
button.mock-chip::after { content: ""; position: absolute; inset: -7px -4px; }
button.mock-chip[aria-pressed="false"]:hover { border-color: var(--teal-deep); }
.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 placeholder text in an illustration: left faint on purpose, as a real placeholder would be */
.mock-input i:first-child { color: var(--coral-deep); }
.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, var(--coral-glow), 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);
  display: block;
  line-height: 1;
  margin-bottom: 0.35rem;
}
.language-source {
  font-size: 12.5px;
  color: var(--ink-soft);
  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: var(--r-md);
  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;
}
.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: var(--ocean-mid);
}
.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;
}
.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; }
.fit-grid + .parallel-claims { margin-top: 3.4rem; }
.parallel-claims:has(+ .parallel-claims.is-risk-close) { margin-bottom: 0.35rem; }
.parallel-claims.is-risk-close { margin-top: 0.55rem; }
.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: var(--coral-tint);
  border-color: rgba(180, 35, 74, 0.28);
  box-shadow: 0 4px 12px -4px rgba(180, 35, 74, 0.15);
}
.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 var(--white);
  -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; }
/* The rest of the FAQ accordion is defined with the FAQ page styles below. The chevron
   motion stays here: at (0,1,2) the summary i rule outranks .faq-chevron, and the
   test-row chevron (whose summary is not in a .faq-item) takes the same 280ms turn. */
.faq-item summary i { transition: transform 280ms var(--ease-out); flex: none; color: var(--teal-deep); }
.guide-test-row .faq-chevron { transition: transform 280ms var(--ease-out); }
/* Opened answers enter the way the pain, break and option cards do. */
.faq-item[open] .faq-body,
.guide-test-row[open] .guide-test-body { animation: card-expand-in 280ms var(--ease-out); }
.faq-item[open] summary i { transform: rotate(180deg); }

/* ---- 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: var(--white); }
.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: 900px) { .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: var(--white); }
.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); }
/* Links on the ocean final CTA: turquoise, never coral on ink. */
.eval-stance a { color: var(--turquoise); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.eval-stance a:hover { text-decoration-thickness: 2px; }

/* ---- footer ---- */
.v8-footer { border-top: 1px solid var(--hairline-neutral); 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-text); }
.v8-footer-local { margin-top: 0.3rem; font-size: 12.5px; color: var(--ink-soft); }
.v8-footer-legal { font-size: 12.5px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 5px; }
.v8-footer-legal a { color: var(--teal-deep); }
/* The motion pause is added by the script, so it shows only when something
   moves. It reads as one more link in the legal column. */
.v8-motion-toggle { padding: 0; border: 0; background: none; font: inherit; color: var(--teal-deep); text-decoration: underline; cursor: pointer; }
/* On touch screens the footer links are the only route to the family and
   legal pages, so each gets a 44px target; the gap folds into it. */
@media (pointer: coarse) {
  .v8-footer-links, .v8-footer-legal { gap: 0; }
  .v8-footer-links a, .v8-footer-legal a, .v8-motion-toggle { display: inline-flex; align-items: center; min-height: 44px; }
}
@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.
   ========================================================================== */
.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-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;
}
/* The request dialog and its scrim fade in over the canon 350ms for a larger panel.
   Opacity only: fitModal writes an inline scale on the container, which a transform
   would fight. Scoped to #contact-modal so the success overlay (same class) does not
   fade, and closing stays instant, since submit closes this and opens the success
   overlay in one task and a fade-out would flash the page between them. The
   reduced-motion kill removes the fade. */
#contact-modal:not([hidden]) {
  animation: contact-modal-in 350ms var(--ease-out);
}
@keyframes contact-modal-in {
  from { opacity: 0; }
}
.contact-modal-container {
  transform-origin: center center;
  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 250ms var(--ease-out), background-color 250ms var(--ease-out);
}
.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,
  .contact-field textarea {
    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-deep);
}
.contact-optional {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-quiet);
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hairline-neutral);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--sand);
  transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--coral-deep);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(180, 35, 74, 0.15);
}
.contact-field input[aria-invalid="true"],
.contact-field textarea[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: var(--teal-tint);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.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 .contact-next-step {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.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 .contact-next-foot {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
  font-style: italic;
  font-size: 0.78rem;
}
.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), translate 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 280ms var(--ease-out);
  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 {
    translate: 0 -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);
  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-neutral);
  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 .contact-next-foot {
    margin-top: 0.5rem;
    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: var(--teal-tint);
  border: 1px solid var(--hairline);
}
.success-burst-icon {
  font-size: 2.4rem;
  color: var(--turquoise-deep);
}
/* One-shot on open: the burst settles into place and the sparks follow it, so
   the confirmation reads as an arrival rather than a static badge. */
.success-overlay:not([hidden]) .success-burst { animation: success-pop 0.32s var(--ease-out) both; }
.success-overlay:not([hidden]) .success-spark { animation: success-spark-in 0.3s var(--ease-out) 0.15s both; }
@keyframes success-pop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes success-spark-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
.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 is defined with the ink-on-scroll treatment above. */
.v8-nav.is-scrolled .nav-panel {
  background: linear-gradient(160deg, rgba(9, 58, 80, 0.98) 0%, rgba(12, 74, 110, 0.98) 100%);
  border-color: rgba(127, 233, 220, 0.28);
}
.v8-nav.is-scrolled .nav-panel a:not(.btn) {
  color: #EAF9FC;
  border-bottom-color: rgba(127, 233, 220, 0.18);
}
.v8-nav.is-scrolled .nav-panel a:not(.btn):hover,
.v8-nav.is-scrolled .nav-panel a:not(.btn).is-active,
.v8-nav.is-scrolled .nav-panel a:not(.btn)[aria-current="location"] {
  color: #A7F3EA;
}

/* 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;
  /* The panel rides the sticky bar, so page scroll never reaches its lower
     links on a landscape phone: it scrolls itself instead. 88px is the 72px
     bar, the 8px offset and a small margin. */
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 118, 110, 0.4) transparent;
}
.nav-panel a:not(.btn) {
  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-neutral);
}
.nav-panel .btn {
  min-height: 44px;
  /* A link, so it would inherit the body's line height; a button's is normal. */
  line-height: normal;
  justify-content: center;
  margin-top: 0.2rem;
  padding: 0.7rem 1.1rem;
  border-bottom: none;
}
/* The call to action is a link too, so the last page link is the one before it. */
.nav-panel a:not(.btn):has(+ .btn) {
  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-text); font-weight: 600; }

/* ---- reveal + motion safety ---- */
html.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
/* The first band is above the fold, so hiding it until the observer runs only
   delays the largest paint. It shows at once; its inner cascades and staggers
   still key off .is-in, which the script adds on the first intersection. */
html.js #hero[data-reveal],
html.js main > .band:first-child[data-reveal] { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  /* `*` does not match pseudo-elements, and some still move (the pathway rung
     node on .rung::before lights with a transition), so the pseudo selectors
     are part of the kill. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}
/* Paper never scrolls, so nothing the observer has not yet revealed would print.
   Everything reveal-gated prints in its resting state; the ambient layers go. */
@media print {
  html.js [data-reveal],
  html.js [data-reveal] [data-stagger] > *,
  html.js #hero .topo-stack > * { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; }
  html.js .rung-list::after { clip-path: none !important; }
  .ambient-field,
  .band[data-band-accent]::before,
  .topo-card::after,
  .mock-frame::after { display: none !important; }
  .flow-dot,
  .v8-motion-toggle { display: none !important; }
}

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

/* ---- 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: var(--hairline);
  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-deep);
  --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-deep));
    transition: background 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
  }
  .rung.is-passed::before { background: var(--stage-node, var(--coral-deep)); }
  .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); }
  /* Pilot is one stage in two configurations, so the second Pilot rung gets a
     smaller dashed node and a coral bracket joins the two nodes beside the
     spine. The bracket hangs off the first Pilot rung: from its node centre
     (40px down) to the next rung's node centre is the rung's own height plus
     the 18px grid gap. */
  .rung.is-pilot + .rung.is-pilot::before {
    width: 10px; height: 10px; left: -34px; top: 33px; border-style: dashed;
  }
  .rung-join {
    position: absolute; left: -47px; top: 40px; width: 9px; height: calc(100% + 18px);
    border: 2px solid var(--coral-deep); border-right: 0;
    border-radius: 7px 0 0 7px; opacity: 0.7; pointer-events: none;
  }
}
.rung-join { display: none; }
@media (min-width: 760px) { .rung-join { display: block; } }
.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 h3 { 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-soft); 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-soft); }
.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%, var(--teal-glow), 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 h3 { color: var(--white); }
.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 var(--hairline);
  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: translate 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  /* translate, not transform: the rows sit in a stagger grid whose .is-in state
     sets transform: none at higher specificity, which left this lift dead. */
  .pathway-table tbody tr:hover {
    translate: 0 -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;
}
.band[data-band-accent="coral"]::before {
  background:
    radial-gradient(860px 540px at 4% 15%, rgba(236, 72, 106, 0.12), transparent 70%),
    radial-gradient(650px 420px at 96% 85%, rgba(8, 145, 178, 0.05), transparent 70%);
}
.band[data-band-accent="teal"]::before { background: radial-gradient(860px 540px at 96% 15%, rgba(45, 212, 191, 0.14), transparent 70%); }
.band[data-band-accent="ocean"]::before { background: radial-gradient(820px 500px at 92% 80%, rgba(8, 145, 178, 0.09), transparent 70%); }
.band[data-band-accent="split"]::before {
  background:
    radial-gradient(700px 500px at 6% 30%, rgba(45, 212, 191, 0.13), transparent 70%),
    radial-gradient(700px 500px at 94% 30%, rgba(236, 72, 106, 0.12), transparent 70%);
}
.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 {
  /* Text at 11.5px needs 4.5:1; --ocean-mid is 3.48:1 on sand and only clears the 3:1
     floor for strokes, fills and headings. --ocean-text is the body-size ocean. */
  color: var(--ocean-text);
  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); }
.txt-coral { color: var(--coral-deep); font-weight: 600; }
.txt-coral-shaded {
  color: var(--coral-deep);
  background: var(--coral-tint);
  border: 1px solid rgba(180, 35, 74, 0.28);
  border-radius: 6px;
  padding: 1px 7px;
  font-weight: 700;
  display: inline;
}
/* ocean-mid holds 3:1 for heading-size text only; inline in body copy it needs --ocean-text. */
/* --ocean-mid is for headings 24px and up; anything else takes --ocean-text. */
.txt-ocean { color: var(--ocean-text); }
h2 .txt-ocean { color: var(--ocean-mid); }
p .txt-ocean, span.txt-ocean { color: var(--ocean-text); }
h1 .txt-ocean,
h1 em.txt-ocean,
.hero h1 em,
.hero h1 .txt-ocean,
.family-hero h1 em,
.family-hero h1 .txt-ocean,
.guide-hero h1 em,
.guide-hero h1 .txt-ocean {
  background: var(--grad-ocean-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.18em;
  margin-bottom: -0.08em;
  display: inline;
}
.hero h1 em,
.family-hero h1 em,
.guide-hero h1 em,
h1 em.txt-ocean {
  font-style: italic;
  display: inline-block;
  /* Gradient text is clipped to this box, so pad it past the glyphs and cancel the
     padding with negative margins (no layout change). The real DM Serif italic
     (vendored in chatterbox_csi_tokens.css) overhangs both ways: up to 0.16em left
     (the f in "first") and 0.058em right, measured 2026-09-26. The bottom padding is
     not a slant workaround: an inline-block in these tight h1 lines is shorter than
     the font's ascent plus descent (1.38em), so descenders need it with any italic. */
  padding-bottom: 0.28em;
  margin-bottom: -0.28em;
  padding-left: 0.18em;
  margin-left: -0.18em;
  padding-right: 0.08em;
  margin-right: -0.08em;
}
.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;
  letter-spacing: -0.01em;
  /* Solid, not the retired teal-to-turquoise gradient: at lede size the
     gradient's light end fell to 1.76:1 on sand. */
  color: var(--teal-deep);
  display: inline;
}
.txt-teal-brand .reg {
  font-family: var(--sans);
  font-size: 0.52em;
  font-weight: 800;
  vertical-align: 0.55em;
  color: var(--teal-deep);
}
.band[data-band-accent="coral"] .statement em { color: var(--coral-deep); }
.band[data-band-accent="ocean"] .statement em { color: var(--ocean-text); }
.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-text); }
#gap .statement em { color: var(--teal-deep); }
/* .statement drops to 20px on narrow screens, below large-text size, so its ocean is --ocean-text. */
#market .statement { color: var(--ocean-text); }

/* 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-text);
}

.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);
}

/* ---- 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);
  /* Longhands, so a card's hover lift (translate), border and shadow keep their own
     280ms with no stagger delay. This rule out-specifies every card's own transition
     (0,3,1), which is why those cards snapped on hover inside stagger grids. The lift
     itself uses translate, not transform: the .is-in state sets transform: none. */
  transition-property: opacity, transform, translate, border-color, box-shadow;
  transition-duration: 350ms, 350ms, 280ms, 280ms, 280ms;
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s;
}
html.js [data-reveal].is-in [data-stagger] > * {
  opacity: 1;
  transform: none;
}

/* ---- hero topology cascade ---- */
/* The hero itself shows at once; its `is-in` still lands when the observer
   runs, and that is when the topo card assembles top-down. Two heroes share
   the cascade: Home stacks five children (node, arrow, core, arrow, node), so
   the fifth delay is live; Subscriber stacks four (three nodes and a foot). */
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. It is a static wash: the card sits on
   backdrop-filter glass, and a breathing halo forced a re-blur every frame. */
.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);
  pointer-events: none;
}

/* ---- statement tile (the tile itself is defined further down) ---- */
.statement-tile strong { color: var(--coral-deep); }

/* ---- primary button sheen ---- */
.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);
  /* Travels on transform, not left: the sheen is 42% of the button wide, so a
     476% shift of its own width lands it at the old 130% resting point. */
  transition: transform 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after { transform: translateX(476%) skewX(-18deg); }

/* ==========================================================================
   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: 1fr;
  gap: 1.2rem;
  margin-top: 2rem;
  text-align: left;
}
/* Three cards: one column, then all three in a row, never two and a lone one. */
@media (min-width: 880px) { .family-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.family-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.4rem;
  box-shadow: var(--shadow-soft);
}
.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: var(--shadow-soft);
}
.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-rails .ability-rail-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1100px) {
  .ability-rails {
    grid-template-columns: repeat(3, 1fr);
  }
  .ability-rails .ability-rail-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
.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: var(--shadow-soft);
}
.problem-card h3,
.problem-card h4 {
  font-size: 1.12rem;
  margin: 0 0 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Two Sides heads its problem grid, so its card titles are h4s; they take the
   h3 face the global heading rule gives the other pages' cards. */
.problem-card h4 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
.problem-card h3 i,
.problem-card h4 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;
  /* min() lets the one column shrink below 300px on a 320px phone instead of
     overrunning the gutter (the band clips it). */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 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: 820px;
  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-neutral);
  color: var(--ink-soft);
}
.guide-tests-rows {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 820px;
  margin: 0 auto;
}
.guide-test-row {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color 280ms var(--ease-out);
}
.guide-test-row[open] {
  border-color: var(--coral-deep);
}
.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: 1fr;
  gap: 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Nine outcomes: one column, then 3 x 3, never a lone card on the last row. */
@media (min-width: 640px) { .guide-outcome-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.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: var(--r-md);
  box-shadow: var(--shadow-soft);
}
.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 var(--hairline);
  border-left: 3.5px solid var(--teal-deep);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}
.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: var(--white);
}
.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);
}
/* teal-deep on ink is 2.85:1; turquoise, as on the final CTA. */
.band-ink .section-title em { color: var(--turquoise); }
.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-spokes { stroke: var(--turquoise); stroke-opacity: 0.5; stroke-width: 1.6; }
.orch-core-ring {
  fill: none;
  stroke: rgba(45, 212, 191, 0.45);
  stroke-width: 1.4;
}
.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(min(280px, 100%), 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-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: 1fr;
  gap: 1rem;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
/* Nine categories: one column, then 3 x 3, never a lone card on the last row. */
@media (min-width: 640px) { .faq-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.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: var(--shadow-soft);
  text-decoration: none;
  transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.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);
  /* The .faq-wrap measure, matching the home and interface answers. */
  max-width: 820px;
  margin-inline: auto;
}
.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-neutral);
}
.faq-cat-heading i {
  color: var(--teal-deep);
  font-size: 1.15em;
}
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color 280ms var(--ease-out);
}
.faq-item[open] {
  border-color: rgba(236, 72, 106, 0.4);
  box-shadow: 0 12px 28px -10px rgba(15, 118, 110, 0.16), inset 0 1px 1px rgba(255, 255, 255, 1);
}
/* A shared link lands on an answer or on a category. The target keeps a
   coral border (state, still shown under reduced motion) and its outline flashes
   once and fades, so the eye finds the answer it was sent to. The flash runs on
   .is-arriving, which the script adds once the scroll has settled; keyed on
   :target it had mostly faded during the glide. At 1.6s it is the one motion
   held past the canon durations: a highlight has to last until it is found. */
.faq-item:target,
.faq-cat-section:target .faq-cat-heading {
  border-color: var(--coral-deep);
  outline: 3px solid transparent;
  outline-offset: 3px;
  border-radius: var(--r-md);
}
.faq-item.is-arriving,
.faq-cat-section.is-arriving .faq-cat-heading,
.guide-test-row.is-arriving {
  animation: faq-arrive 1.6s var(--ease-out) 1;
}
@keyframes faq-arrive {
  0% { outline-color: rgba(236, 72, 106, 0.65); }
  100% { outline-color: transparent; }
}
.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; }
/* The item's overflow: hidden clips the global ring, which sits 2px outside
   the summary, so the ring is drawn inside it here (3.68:1 on the card).
   The radius is the item's radius less its 1px border. It is set, not
   inherited: a summary inherits from the details element's shadow slot. */
.faq-item > summary:focus-visible,
.guide-test-row > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -4px;
}
.faq-item > summary:focus-visible { border-radius: 13px; }
.guide-test-row > summary:focus-visible { border-radius: 15px; }
/* The chevron's turn lives with `.faq-item summary i` and `.guide-test-row
   .faq-chevron` above; at (0,1,2) the first outranks this class, so no
   transition or rotate is repeated here. */
.faq-chevron {
  color: var(--teal-deep);
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.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; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.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;
}
/* Links inside body copy on light cards: teal means action (canon rule 2). */
.problem-card a,
.faq-body a { color: var(--teal-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.problem-card a:hover,
.faq-body a:hover { text-decoration-thickness: 2px; }
/* A starting-problem link on its own line takes a 44px target. Links still
   inside a sentence (the Two Sides cards) stay inline. */
.problem-card .problem-more a { display: inline-flex; align-items: center; min-height: 44px; }
.section-more:has(> a) {
  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;
  /* Teal is the action colour; coral marks the problem. Was coral-deep until 2026-09-24. */
  color: var(--teal-deep);
}
.hero-copy .section-more {
  text-align: left;
  margin-top: 0.85rem;
  color: var(--ink-soft);
}



/* ---- subscriber vertical components (chatterbox_csi_subscr_ver8) ---- */
.commit-grid + .section-head.is-centred,
.v8-chip-row + .section-head.is-centred {
  margin-top: 0;
  padding-top: 3.4rem;
}
.preview-steps.is-light li {
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: 0 4px 18px -6px rgba(12, 39, 48, 0.08);
}
.preview-steps.is-light li span {
  color: var(--coral-deep);
}
.preview-steps.is-light h3 {
  color: var(--ink);
}
.preview-steps.is-light p {
  color: var(--ink-soft);
}
@media (min-width: 680px) {
  .preview-steps.is-four-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.v8-chip-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 1.6rem 0;
  list-style: none;
  padding: 0;
}
@media (min-width: 600px) {
  .v8-chip-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .v8-chip-row { grid-template-columns: repeat(3, 1fr); }
}
.v8-chip {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 2px 8px -2px rgba(12, 39, 48, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.v8-chip strong {
  color: var(--ink);
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}
.v8-chip span {
  color: var(--ink-soft);
  font-size: 12.5px;
}

.topo-node.is-foot {
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 12px;
  background: rgba(45, 212, 191, 0.08);
  font-size: 13px;
  line-height: 1.45;
  color: var(--teal-deep);
  text-align: center;
}
.topo-node.is-foot strong {
  font-size: 13.5px;
  color: var(--teal-deep);
  display: block;
}

.statement-tile {
  position: relative;
  background: var(--card);
  color: var(--coral-deep);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.6rem 2rem;
  margin: 2rem auto 0;
  max-width: 48em;
  box-shadow: 0 4px 18px -6px rgba(12, 39, 48, 0.08);
}
.statement-tile.is-coral {
  border-color: rgba(236, 72, 106, 0.32);
  background: rgba(236, 72, 106, 0.04);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.statement-tile.is-teal {
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(45, 212, 191, 0.06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.statement-tile :is(h2, h3) {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  line-height: inherit;
  color: var(--teal-deep);
  margin-bottom: 0.5rem;
}
/* The band has no other heading, so its padding is the only space above the tile. */
#subscribers .statement-tile { margin-top: 0; }
.statement-tile.is-coral :is(h2, h3) {
  color: var(--coral-deep);
}
.statement-tile p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.statement-tile.is-coral p {
  color: var(--ink);
}

.sector-pill-wrap {
  margin-top: 2rem;
  text-align: center;
}
.sector-pill-wrap h3 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.sector-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sector-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(12, 39, 48, 0.04);
}

/* ---- bold serif ----
   DM Serif Display has no bold, so these draw at 400 with --serif-bold-stroke
   (chatterbox_csi_tokens.css) rather than a browser-faked 600 to 800. The ® in
   .reg is Raleway, which has a real 800, and icons are their own font, so both
   are kept out of the stroke. */
.v8-wordmark,
.txt-teal-brand,
.language-fact-copy data,
.contact-next-n,
.statement strong,
.statement strong *:not(.reg):not(i) {
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-text-stroke-width: var(--serif-bold-stroke);
}
.v8-wordmark .reg,
.txt-teal-brand .reg,
.statement strong .reg,
.statement strong i {
  -webkit-text-stroke-width: 0;
}
/* ---- 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;
  }
  html.js .rung-list::after { clip-path: none; }
}


/* --- One-shot spoke draw on the orchestration figure (#missing-layer) ---
   Each spoke carries pathLength="100", so dasharray 100 / dashoffset 100 hides
   it whatever its real length, and dashoffset 0 draws it. The lines run from
   the core (x1,y1) outward, so the draw reads as the core reaching out.
   Hidden only under html.js, so a no-JS reader gets the finished figure.
   The draw keys on the figure's own .is-in, added by the script when half the
   drawing is in view: keyed on the band, it mostly played before the figure,
   about 300px below the band top, reached the screen. */
html.js .orch-spoke {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
html.js .orch-core-ring {
  opacity: 0;
}
html.js .orchestration-figure.is-in .orch-spoke {
  animation: orch-spoke-draw 0.55s var(--ease-out) forwards;
}
html.js .orchestration-figure.is-in .orch-spoke:nth-of-type(2) { animation-delay: 90ms; }
html.js .orchestration-figure.is-in .orch-spoke:nth-of-type(3) { animation-delay: 180ms; }
html.js .orchestration-figure.is-in .orch-spoke:nth-of-type(4) { animation-delay: 270ms; }
html.js .orchestration-figure.is-in .orch-spoke:nth-of-type(5) { animation-delay: 360ms; }
html.js .orchestration-figure.is-in .orch-spoke:nth-of-type(6) { animation-delay: 450ms; }
/* The ring fades in once the last spoke has landed (450ms + 550ms). */
html.js .orchestration-figure.is-in .orch-core-ring {
  animation: orch-ring-in 0.4s var(--ease-out) 1s forwards;
}
@keyframes orch-spoke-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes orch-ring-in {
  to { opacity: 1; }
}

/* --- Hero "five tests" list: each item is now an anchor to its test row ---
   The li was the flex container for badge + text; the anchor wraps both now,
   so the flex layout moves onto the anchor and the text keeps its colour. */
.guide-tests-list li > a {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: 44px; /* the marketing pages' minimum tap target; measured 43px at 375 */
  color: inherit;
  text-decoration: none;
}
.guide-tests-list li > a:hover span:last-child,
.guide-tests-list li > a:focus-visible span:last-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Arrival state on a linked test row, same treatment as .faq-item:target
   above; the flash itself runs on .guide-test-row.is-arriving there. Border
   radius matches .guide-test-row (16px). */
.guide-test-row:target {
  border-color: var(--coral-deep);
  outline: 3px solid transparent;
  outline-offset: 3px;
  border-radius: 16px;
}

/* --- Reduced motion: the global kill stops the animations, so the figure
   must already be complete. Place after the html.js rules above. */
@media (prefers-reduced-motion: reduce) {
  html.js .orch-spoke {
    stroke-dashoffset: 0;
  }
  html.js .orch-core-ring {
    opacity: 1;
  }
}
@media print {
  html.js .orch-spoke { stroke-dashoffset: 0 !important; animation: none !important; }
  html.js .orch-core-ring { opacity: 1 !important; animation: none !important; }
}

/* ---- Outbound figure (home ver8, #outbound) ----
   The reply comes back to your Chatterbox and branches. Drawing on the left,
   the five branch labels as an ordered list on the right above 840px, stacked
   below. Node, arrow and dot colours come from the shared .fig-* vocabulary;
   only the STOP end and the list markers are defined here. */
.outbound-figure { margin: 36px 0 0; }
.outbound-figure .outbound-figure-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 18px 32px; align-items: center;
}
.outbound-figure .outbound-figure-draw { min-width: 0; }
.outbound-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.outbound-figure .ob-stop { fill: var(--ink); }
.outbound-figure .outbound-legend { justify-content: center; }

.outbound-figure .outbound-branches {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; counter-reset: ob-branch;
}
.outbound-figure .outbound-branches li {
  position: relative; padding: 1px 0 0 32px;
  font-size: 15px; line-height: 1.45; color: var(--ink-soft);
}
.outbound-figure .outbound-branches li strong { color: var(--ink); font-weight: 700; }
.outbound-figure .outbound-branches li::before {
  counter-increment: ob-branch; content: counter(ob-branch);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--hairline); background: var(--card);
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
  color: var(--teal-deep);
}
.outbound-figure .outbound-branches li.is-team::before { color: var(--coral-deep); border-color: var(--coral-deep); }
.outbound-figure .outbound-branches li.is-dim::before { border-style: dashed; color: var(--ink-soft); }
.outbound-figure .outbound-branches li.is-stop::before { background: var(--ink); border-color: var(--ink); color: var(--white); }

@media (min-width: 841px) {
  .outbound-figure .outbound-figure-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
@media (max-width: 840px) {
  .outbound-figure .outbound-figure-grid { gap: 14px; }
  .outbound-figure .outbound-branches li { font-size: 14.5px; }
}

/* ---- capabilities: one intelligence, six abilities (.cap-figure) ----
   Drawing on the left, two label groups on the right above 840px; stacked
   below. The shared fig-* vocabulary comes from the family sheet; only the
   layout and the label list live here. */
.cap-figure .cap-figure-inner { display: grid; grid-template-columns: 1fr; gap: 18px 32px; align-items: center; }
.cap-figure .cap-figure-art { width: 100%; max-width: 274px; margin: 0 auto; }
.cap-figure .cap-figure-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.cap-figure .cap-figure-kicker { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.cap-figure .cap-figure-list { flex-direction: column; gap: 7px; margin: 0; font-size: 14px; color: var(--ink); }
.cap-figure .cap-figure-list li { gap: 9px; }
@media (min-width: 840px) {
  .cap-figure .cap-figure-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .cap-figure .cap-figure-labels { min-width: 260px; }
}

/* ---- subscriber: two directions, one record (.sub-figure) ----
   Drawing and label list side by side above 840px, stacked below. */
.sub-figure .sub-figure-inner { display: grid; grid-template-columns: 1fr; gap: 18px 32px; align-items: center; }
.sub-figure .sub-figure-art { width: 100%; max-width: 520px; margin: 0 auto; }
/* Both figures let their arrowheads and halos draw past the viewBox edge. */
.cap-figure .cap-figure-art svg,
.sub-figure .sub-figure-art svg { overflow: visible; }
.sub-figure .fig-record { fill: var(--card); stroke: var(--teal-deep); stroke-width: 1.6; }
.sub-figure .sub-record-line { stroke: var(--teal-deep); stroke-width: 1.5; stroke-linecap: round; opacity: 0.35; }
.sub-figure .sub-figure-list { flex-direction: column; gap: 9px; margin: 0; font-size: 14px; color: var(--ink); }
.sub-figure .sub-figure-list > li { gap: 9px; align-items: flex-start; }
.sub-figure .sub-figure-list > li > .fig-key { margin-top: 4px; }
.sub-figure .fig-key.is-record { width: 16px; height: 12px; border-radius: 3px; border-color: var(--teal-deep); }
.sub-figure .sub-figure-sub { margin: 4px 0 0; padding: 0 0 0 12px; list-style: none; font-size: 13px; color: var(--ink-soft); border-left: 1.5px solid rgba(15, 118, 110, 0.35); display: grid; gap: 3px; }
@media (min-width: 840px) {
  .sub-figure .sub-figure-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .sub-figure .sub-figure-list { min-width: 200px; }
}

/* Home ver8, portrait figures (the box; the two rails), shown at 720px and below.
   The drawing is aria-hidden; the meaning lives in the HTML label groups under it.
   Every rule is scoped under .hub-portrait-figure. The wrapper also carries
   .hub-portrait, so the existing display:none / display:block toggle still applies.
   Shape vocabulary (.fig-node, .fig-core, .fig-team, .fig-flow, .fig-dot, .fig-key ...)
   comes from the shared no-text figure set in this sheet and is not redefined here. */
.hub-portrait-figure { width: 100%; max-width: 440px; margin: 0 auto; }
.hub-portrait-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.hub-portrait-figure .hub-portrait-labels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 22px;
  margin: 1.1rem 0 0;
}
@media (min-width: 480px) {
  .hub-portrait-figure .hub-portrait-labels { grid-template-columns: 1fr 1fr; }
}
.hub-portrait-figure .hub-portrait-group { min-width: 0; }
.hub-portrait-figure .hub-portrait-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* The label lists reuse .fig-legend for the swatches but stack rather than wrap. */
.hub-portrait-figure .fig-legend {
  display: grid;
  gap: 7px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
}
.hub-portrait-figure .fig-legend li { display: flex; align-items: flex-start; gap: 9px; }
.hub-portrait-figure .fig-legend .fig-key { margin-top: 3px; }
.hub-portrait-figure .fig-legend strong { display: block; font-weight: 600; color: var(--ink); }
.hub-portrait-figure .fig-legend small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-soft); }
/* The .fig-key.is-rule swatch now lives in the shared .fig-legend set. */

/* --- Evaluation guide: orchestration figure in the no-text style (#missing-layer, ink band) ---
   The SVG keeps its .orch-spoke draw and .orch-core-ring fade (family sheet ~3657 to 3690,
   with the reduced-motion and print rules after it). Meaning lives in .orchestration-labels,
   which reuses .fig-labels / .fig-kicker / .fig-legend but must read on ink. Scoped to
   .orchestration-figure, .orchestration-labels and .orch-node only. */

/* Node marks: the small centred dot in each surrounding circle, so an empty ring does not
   look unfinished. Beats the family's .orch-node circle rule on specificity. */
.orch-node .orch-node-mark {
  fill: rgba(45, 212, 191, 0.75);
  stroke: none;
}
/* The one coral element: "Your people", the thing that needs a person. */
.orch-node.is-team circle:first-child {
  stroke: rgba(236, 72, 106, 0.85);
}
.orch-node.is-team .orch-node-mark {
  fill: var(--coral);
}
/* Core mark: the same dot language on the coordinating layer, one size up. */
.orchestration-figure .orch-core-mark {
  fill: rgba(45, 212, 191, 0.9);
}

/* Label groups on ink. Centre group first, then the six connected elements in two columns. */
.orchestration-labels {
  grid-template-columns: minmax(150px, 1fr) minmax(0, 2.2fr);
  gap: 16px 28px;
  margin: 1.2rem 0 0;
}
.orchestration-labels .fig-kicker {
  color: rgba(255, 255, 255, 0.6);
}
.orchestration-labels .fig-legend {
  color: rgba(255, 255, 255, 0.9);
}
.orchestration-labels .fig-legend strong {
  color: var(--white);
}
.orchestration-labels .fig-legend small {
  color: rgba(255, 255, 255, 0.7);
}
.orchestration-labels .orchestration-legend-six {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}
/* Swatches that read on ink: transparent ring with the node stroke, teal fill for the core,
   coral ring for the person. */
.orchestration-labels .fig-legend .fig-key {
  background: transparent;
  border-color: rgba(45, 212, 191, 0.55);
}
.orchestration-labels .fig-legend .fig-key.is-core {
  background: var(--teal-deep);
  border-color: rgba(45, 212, 191, 0.75);
}
.orchestration-labels .fig-legend .fig-key.is-team {
  background: transparent;
  border-color: rgba(236, 72, 106, 0.85);
}
@media (max-width: 560px) {
  .orchestration-labels {
    grid-template-columns: 1fr;
  }
  .orchestration-labels .orchestration-legend-six {
    grid-template-columns: 1fr;
  }
  .orchestration-svg .orch-spokes { stroke-width: 2.4; }
  .orchestration-svg .orch-node circle:first-child,
  .orchestration-svg .orch-core-ring { stroke-width: 2.2; }
}

/* Home landscape no-text figures (the hub and the rails, shown above 720px).
   Every rule is scoped under .hub-landscape-figure. The wrapper also carries
   .hub-landscape so the existing 720px toggle hides it on phones. Shapes and
   labels reuse the shared .fig-* vocabulary; nothing shared is redefined here. */
.hub-landscape-figure { width: 100%; }
.hub-landscape-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
/* No label group sits alone on a row. The shared auto-fit grid left the hub's
   fifth group alone from about 757px to 930px and the rails' fourth alone at
   721px (live-page check, 29 Sep 2026). The hub's five sit 3 + 2 until all five
   fit at 960px; the rails' four sit in one row across the whole landscape range. */
#picture .hub-landscape-figure .fig-labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#parallel .hub-landscape-figure .fig-labels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 960px) {
  #picture .hub-landscape-figure .fig-labels { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* Interface page, #room: the no-text room figure (aria-hidden SVG, labels in
   HTML under it). Every rule is scoped under .room-figure. The shape vocabulary
   (.fig-node, .fig-core, .fig-team, .fig-flow, .fig-dot, .fig-key ...) comes from
   the shared no-text figure set above and is not redefined here. */
.room-figure { position: relative; width: 100%; }
/* Two drawings share one label list: the landscape one above 720px, a portrait
   redraw below it (the .hub-landscape / .hub-portrait toggle), so the phone
   drawing renders near full size instead of a shrunk landscape. */
.room-figure svg.room-svg { display: block; width: 100%; max-width: 880px; height: auto; margin: 0 auto; overflow: visible; }
.room-figure .hub-portrait svg.room-svg { max-width: 400px; }
/* The shared pictogram <symbol>s: present in the tree for <use>, never drawn. */
.room-figure svg.fig-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The passageway frame: the customer-service interface, drawn as one thin
   ocean outline at low opacity so the doors read as passing through a wall. */
.room-figure .room-frame { fill: rgba(255, 255, 255, 0.55); stroke: var(--ocean-mid); stroke-opacity: 0.35; stroke-width: 1.5; }
/* Line pictograms inside the nodes: drawn paths, not font glyphs or text. Ocean
   on a live node, ink at low strength on a staged one, coral-deep for your team. */
.room-figure .fig-glyph { fill: none; stroke: var(--ocean-mid); color: var(--ocean-mid); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.room-figure .fig-glyph.is-dim { stroke: rgba(12, 39, 48, 0.46); color: rgba(12, 39, 48, 0.46); }
.room-figure .fig-glyph.is-team { stroke: var(--coral-deep); color: var(--coral-deep); }
/* Label keys repeat the node they name: the same circle and the same pictogram. */
.room-figure .fig-legend .fig-key.is-glyph { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 0; }
.room-figure .fig-legend .fig-key.is-glyph svg { display: block; width: 15px; height: 15px; margin: 0; }
.room-figure .fig-legend .fig-key.is-glyph.is-team { border-color: var(--coral-deep); }
.room-figure .fig-legend .fig-key.is-frame { width: 20px; height: 16px; margin: 4px 2px 0; border-radius: 5px; border-color: rgba(8, 145, 178, 0.45); background: rgba(255, 255, 255, 0.55); }
.room-figure .fig-labels .fig-legend li { align-items: center; }
.room-figure .fig-labels .fig-legend li:has(small) { align-items: flex-start; }
.room-figure .fig-labels .fig-legend .fig-key:not(.is-glyph):not(.is-rule):not(.is-frame) { margin: 4px 6px 0; }
.room-figure .fig-labels .fig-legend .fig-key.is-rule { margin: 9px 5px 0; }
/* Six label groups: three per row from 760px so the sixth never sits alone;
   the shared auto-fit grid handles narrower widths (two columns, then one). */
@media (min-width: 760px) {
  .room-figure .fig-labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}