/* chatterbox_csi_home_ver2.css — stand-alone CSI landing (canonical /).
   This sheet incorporates the former shared landing system
   (chatterbox_iaas_home_ver2.css) and the demo showcase styles
   (chatterbox_demo_showcase.css). Sibling iaas_*_ver2 pages still load those
   shared files. Internal order: landing system, CSI overrides, demo showcase,
   CSI polish. Phosphor Icons are self-hosted; this page does not load Bootstrap Icons. */



/* ===== INCORPORATED: chatterbox_iaas_home_ver2.css ===== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  color-scheme: light only;

  /* Brand palette, carried from the product surface */
  --turquoise: #2DD4BF;
  --turquoise-deep: #0D9488;
  --ocean: #22D3EE;
  --ocean-mid: #0891B2;
  --ocean-deep: #0C4A6E;
  --ink: #0C2730;
  --ink-soft: #3C5A66;
  --ink-quiet: #4A646F;
  --red: #EC486A;
  --red-deep: #B4234A;
  --sand: #FBF8F3;
  --sand-warm: #F4EFE7;
  --white: #FFFFFF;
  --hairline: rgba(12, 39, 48, 0.12);
  --hairline-teal: rgba(20, 184, 166, 0.24);
  --focus: #0B4F8A;

  /* Census chart keys */
  --language-isizulu: #0C4A6E;
  --language-isixhosa: #0E7490;
  --language-afrikaans: #0F766E;
  --language-sepedi: #14B8A6;
  --language-english: #B4234A;
  --language-other: #7FA8B4;

  /* Gradients */
  --grad-sand: linear-gradient(135deg, #FFFFFF 0%, #FDFCFA 40%, #FBF8F3 100%);
  --grad-ocean: linear-gradient(135deg, #0C4A6E 0%, #0891B2 50%, #22D3EE 100%);
  --grad-turquoise: linear-gradient(135deg, #0D9488 0%, #14B8A6 50%, #2DD4BF 100%);
  /* Orb fill. Deep enough that the white mark inside clears large-text contrast. */
  --grad-orb: linear-gradient(140deg, #0B5F58 0%, #0F766E 52%, #0D9488 100%);
  --grad-deep: linear-gradient(150deg, #072A33 0%, #0A414B 48%, #0C5A5E 100%);
  /* Text-safe variants. The bright ends of the brand gradients do not carry
     readable text, so headings and buttons use these darker ramps. */
  --grad-ocean-text: linear-gradient(135deg, #0C4A6E 0%, #0E7490 55%, #0891B2 100%);
  --grad-teal-text: linear-gradient(135deg, #115E59 0%, #0F766E 55%, #0D8378 100%);
  /* Brand red, built to the same rule as the two above. It deliberately stops short
     of --red (#EC486A), which measures only 3.52:1 on the sand background and would
     fail small text: the hero eyebrow is 13px bold, which is NOT large text under
     WCAG. Every stop in this ramp clears 4.5:1 on sand (5.0:1 at the lightest end,
     6.1:1 in the middle), so the accent stays readable wherever it is used. */
  --grad-ocean-cta: linear-gradient(135deg, #0C4A6E 0%, #0B6480 55%, #0E7490 100%);
  --grad-teal-cta: linear-gradient(135deg, #115E59 0%, #0F766E 50%, #0D8378 100%);
  --grad-ocean-25: linear-gradient(135deg, rgba(12,74,110,0.22) 0%, rgba(8,145,178,0.18) 50%, rgba(34,211,238,0.16) 100%);
  --grad-ocean-12: linear-gradient(135deg, rgba(12,74,110,0.10) 0%, rgba(8,145,178,0.08) 50%, rgba(34,211,238,0.08) 100%);

  /* Shadow and glow */
  --shadow-soft: 0 4px 20px rgba(8, 10, 12, 0.10);
  --shadow-card: 0 8px 32px rgba(8, 10, 12, 0.14);
  --shadow-elevated: 0 16px 48px rgba(8, 10, 12, 0.20);
  /* Elevation is neutral. Colour carries meaning in fills and rules, not in halos. */
  --glow-ocean: 0 10px 26px rgba(8, 10, 12, 0.24), 0 2px 6px rgba(8, 10, 12, 0.14);
  --glow-teal: 0 10px 26px rgba(8, 10, 12, 0.24), 0 2px 6px rgba(8, 10, 12, 0.14);
  --ring-teal: 0 0 0 1px rgba(20, 184, 166, 0.28), 0 8px 24px rgba(8, 10, 12, 0.14);

  /* Type */
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;

  /* Rhythm */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --page: min(1180px, calc(100% - 48px));
  --nav-h: 74px;
  --section-y: clamp(4rem, 8vw, 7rem);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
/* scroll-padding-top above covers scrolling inside this document. scroll-margin-top
   on the anchored section covers the cases it does not: a cold load whose URL
   already ends in #proof, and a back or forward step onto that entry. Without it
   the fixed nav sits over the proof heading on arrival. */
#proof { scroll-margin-top: calc(var(--nav-h) + 16px); }
/* Same reasoning, generalised for the Stage 2 secondary pages, where a shared link
   can land on any band, on any FAQ category or on one individual question. It takes
   effect only when an element is scrolled to by anchor, so nothing that renders
   today moves. */
.band[id], .faq-section[id], .faq-item[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
p { margin: 0; max-width: 72ch; }
ul { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.12; text-wrap: balance; }
h1 { letter-spacing: -0.018em; }
h2 { letter-spacing: -0.012em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 10px 16px; background: var(--ink); color: #fff;
  border-radius: var(--r-sm); text-decoration: none;
  transform: translateY(-160%); transition: transform 180ms var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.wrap { width: var(--page); margin-inline: auto; position: relative; z-index: 1; }
section { position: relative; z-index: 1; }
.band { padding-block: var(--section-y); }

/* Warm sand band with a fine noise tooth, carried from the product surface. */
.band-warm { background-color: rgba(251, 248, 243, 0.78); }
.band-warm::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; 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");
}
.band-sand { background: linear-gradient(135deg, rgba(255,255,255,0.80) 0%, rgba(253,252,250,0.74) 40%, rgba(251,248,243,0.68) 100%); }
.band-deep { background: var(--grad-deep); color: rgba(240, 250, 252, 0.94); }
.band-deep h2, .band-deep h3, .band-deep h4, .band-deep strong { color: #F4FBFC; }

/* ==========================================================================
   3. Ambient background
   ========================================================================== */
/* impeccable-disable radial-halo -- the ambient colour field is the requested
   carry-over from the product surface: a low-opacity multiply wash behind the
   whole page, not a decorative glow behind a component. */
.ambient {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; opacity: 0.96;
}
.blob {
  position: absolute; border-radius: 50%; filter: blur(46px);
  mix-blend-mode: multiply; will-change: transform, opacity;
}
.blob-1 {
  width: 62vw; height: 62vw; top: -22%; left: -12%; opacity: 0.46;
  background: radial-gradient(circle at 50% 50%, #22D3EE 0%, #0891B2 58%, transparent 74%);
}
.blob-2 {
  width: 52vw; height: 52vw; bottom: -14%; right: -12%; opacity: 0.34;
  background: radial-gradient(circle at 40% 35%, #0C4A6E 0%, rgba(12,74,110,0) 74%);
}
.blob-3 {
  width: 48vw; height: 48vw; top: 38%; right: 16%; opacity: 0.42;
  background: radial-gradient(circle at 30% 30%, #2DD4BF 0%, rgba(45,212,191,0) 72%);
}
.blob-4 {
  width: 56vw; height: 56vw; bottom: 26%; left: 8%; opacity: 0.32;
  background: radial-gradient(circle at 60% 40%, #2DD4BF 0%, #0891B2 60%, transparent 78%);
}
/* Motion is opt-in. The product surface starts its blobs on a timer through
   an "animating" class; ver11 uses the same gate, and also exposes it as a
   control so a reduced-motion reader can turn the drift on deliberately. */
.ambient.is-animating .blob-1 { animation: blobDrift1 21s ease-in-out infinite alternate !important; }
.ambient.is-animating .blob-2 { animation: blobDrift2 27s ease-in-out infinite alternate !important; }
.ambient.is-animating .blob-3 { animation: blobDrift3 24s ease-in-out infinite alternate !important; }
.ambient.is-animating .blob-4 { animation: blobDrift4 31s ease-in-out infinite alternate !important; }
@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); } }

/* ==========================================================================
   4. Type helpers
   ========================================================================== */
/* background-clip: text paints inside the element box, so a tight line-height
   slices descenders off the last line. Pad the box, pull the margin back. */
.grad-ocean-text, .grad-teal-text, .language-fact-copy strong {
  padding-bottom: 0.22em; margin-bottom: -0.08em;
}
.hero-emphasis, .wordmark { padding-bottom: 0.14em; }
.grad-ocean-text {
  background: var(--grad-ocean-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.grad-teal-text {
  background: var(--grad-teal-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.band-deep .grad-ocean-text,
.band-deep .grad-teal-text {
  background: linear-gradient(135deg, #7FE9DC 0%, #58D9E8 60%, #9BEBF5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #0B5F58; margin-bottom: 0.9rem;
}
.eyebrow i { font-size: 0.95rem; }
.band-deep .eyebrow { color: #7FE9DC; }

.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.15rem, 4.4vw, 3.4rem); line-height: 1.08;
  letter-spacing: -0.012em; max-width: 20ch;
}
.section-title.is-wide { max-width: 26ch; }
.section-lede {
  margin-top: 1.1rem; font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  color: var(--ink-soft); max-width: 62ch;
}
.band-deep .section-lede { color: rgba(230, 246, 250, 0.88); }
.section-head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.section-head.is-centred { text-align: center; }
.section-head.is-centred .section-title,
.section-head.is-centred .section-lede { margin-inline: auto; }
.quiet { color: var(--ink-quiet); font-size: 0.9rem; }

.reg { font-size: 0.55em; vertical-align: super; font-weight: 500; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.72rem 1.6rem;
  border: none; border-radius: var(--r-full);
  font-size: 0.98rem; font-weight: 700; line-height: 1.25;
  text-decoration: none; cursor: pointer;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), background-color 240ms ease;
  position: relative; overflow: hidden;
}
.btn i { font-size: 1.05em; }
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 70%);
  opacity: 0; transition: opacity 260ms ease;
}
.btn:hover::before { opacity: 1; }
.btn > * { position: relative; z-index: 1; }
.btn-primary { background: var(--grad-teal-cta); color: #fff; box-shadow: var(--glow-teal); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(8, 10, 12, 0.32); }
.btn-ocean { background: var(--grad-ocean-cta); color: #fff; box-shadow: var(--glow-ocean); }
.btn-ocean:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(8, 10, 12, 0.32); }
.btn-glass {
  background: rgba(8, 145, 178, 0.10); color: #0B4A5B;
  border: 2px solid rgba(8, 145, 178, 0.34);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
}
.btn-glass:hover {
  transform: translateY(-3px); background: rgba(34, 211, 238, 0.16);
  border-color: rgba(8, 145, 178, 0.62); box-shadow: 0 10px 26px rgba(8, 10, 12, 0.22);
}
.band-deep .btn-glass {
  color: #EAF9FC; border-color: rgba(127, 233, 220, 0.5); background: rgba(127, 233, 220, 0.12);
}
.band-deep .btn-glass:hover { background: rgba(127, 233, 220, 0.2); border-color: rgba(127, 233, 220, 0.8); }
.btn-stacked { flex-direction: column; gap: 0.1rem; padding-block: 0.55rem; }
.btn-stacked .btn-sub { font-size: 0.76rem; font-weight: 600; opacity: 0.9; }

/* Inline text control that only opens the contact dialog. It is a button rather
   than an href="#" anchor because there is no destination to fall back to, and it
   is styled to match the surrounding prose links exactly (a { color: inherit }
   plus the browser's default underline). */
.link-button {
  display: inline; padding: 0; margin: 0; border: none; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-button:hover { text-decoration-thickness: 2px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: stretch; }
.cta-row.is-centred { justify-content: center; }

/* ==========================================================================
   6. Navigation
   ========================================================================== */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  min-height: var(--nav-h);
  background: rgba(251, 248, 243, 0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(12, 39, 48, 0.08);
  transition: background 400ms var(--ease-out), box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.site-nav.is-scrolled {
  background: linear-gradient(90deg, rgba(12,74,110,0.94) 0%, rgba(11,100,128,0.92) 52%, rgba(14,116,144,0.92) 100%);
  border-bottom-color: rgba(127, 233, 220, 0.22);
  box-shadow: 0 6px 30px rgba(6, 8, 10, 0.26);
}
.nav-inner {
  width: var(--page); margin-inline: auto; min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand-lockup { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; flex: 0 0 auto; }
.brand-mark { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; }
.brand-stack { display: flex; flex-direction: column; line-height: 1.08; }
.wordmark {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.015em;
  background: var(--grad-teal-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.wordmark .reg { -webkit-text-fill-color: #0F766E; color: #0F766E; }
.brand-signature { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-soft); }
.site-nav.is-scrolled .wordmark {
  background: linear-gradient(135deg, #7FE9DC 0%, #2DD4BF 60%, #9BEBF5 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.site-nav.is-scrolled .wordmark .reg { -webkit-text-fill-color: #7FE9DC; color: #7FE9DC; }
.site-nav.is-scrolled .brand-signature { color: rgba(236, 250, 252, 0.86); }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a:not(.btn), .nav-links button.nav-plain {
  position: relative; padding: 0.5rem 0.48rem; background: none; border: none;
  font-size: 0.83rem; font-weight: 600; color: var(--ink);
  text-decoration: none; border-radius: var(--r-sm); cursor: pointer;
  transition: color 300ms var(--ease-out);
  white-space: nowrap;
}
.nav-links a:not(.btn)::after, .nav-links button.nav-plain::after {
  content: ""; position: absolute; left: 50%; bottom: 2px;
  width: 62%; height: 2px; border-radius: 2px; transform-origin: center;
  background: var(--ocean-mid); transform: translateX(-50%) scaleX(0);
  transition: transform 300ms var(--ease-out);
}
.nav-links a:not(.btn):hover, .nav-links button.nav-plain:hover,
.nav-links a:not(.btn)[aria-current="location"] { color: #0B6480; }
.nav-links a:not(.btn):hover::after, .nav-links button.nav-plain:hover::after { transform: translateX(-50%) scaleX(1); }
.nav-links a:not(.btn)[aria-current="location"]::after { transform: translateX(-50%) scaleX(1); }
.site-nav.is-scrolled .nav-links a:not(.btn),
.site-nav.is-scrolled .nav-links button.nav-plain { color: #EAF9FC; }
.site-nav.is-scrolled .nav-links a:not(.btn):hover,
.site-nav.is-scrolled .nav-links button.nav-plain:hover,
.site-nav.is-scrolled .nav-links a:not(.btn)[aria-current="location"] { color: #A7F3EA; }
.site-nav.is-scrolled .nav-links a:not(.btn)::after,
.site-nav.is-scrolled .nav-links button.nav-plain::after { background: #7FE9DC; }
.nav-links .btn { min-height: 40px; padding: 0.4rem 0.85rem; font-size: 0.79rem; margin-left: 0.35rem; white-space: nowrap; }

.brand-signature { font-size: 0.68rem; }

.nav-menu { display: none; position: relative; }
.nav-menu > summary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.4rem 0.85rem; cursor: pointer;
  list-style: none; border: 1px solid rgba(12, 39, 48, 0.2);
  border-radius: var(--r-sm); font-size: 0.9rem; font-weight: 700; color: var(--ink);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary i { font-size: 1.35rem; line-height: 1; }
.site-nav.is-scrolled .nav-menu > summary { color: #EAF9FC; border-color: rgba(167, 243, 234, 0.4); }
.nav-panel {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: min(320px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 4px;
  padding: 0.85rem; border-radius: var(--r-lg);
  background: rgba(251, 248, 243, 0.97);
  border: 1px solid var(--hairline-teal);
  box-shadow: var(--shadow-elevated);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.site-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);
}
.nav-panel a:not(.btn), .nav-panel button.nav-plain {
  display: flex; align-items: center; gap: 0.65rem; width: 100%;
  min-height: 44px; padding: 0.55rem 0.75rem; text-align: left;
  background: none; border: none; cursor: pointer;
  border-radius: var(--r-sm); border-left: 3px solid transparent;
  font-size: 0.95rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav-panel a:not(.btn) i, .nav-panel button.nav-plain i { font-size: 1.05rem; color: #0B6480; width: 1.2rem; text-align: center; }
.nav-panel a:not(.btn):hover, .nav-panel button.nav-plain:hover { background: rgba(45, 212, 191, 0.1); }
.nav-panel a:not(.btn)[aria-current="location"] {
  background: rgba(45, 212, 191, 0.14); border-left-color: var(--turquoise); color: #0B5F58;
}
.site-nav.is-scrolled .nav-panel a:not(.btn),
.site-nav.is-scrolled .nav-panel button.nav-plain { color: #EAF9FC; }
.site-nav.is-scrolled .nav-panel a:not(.btn) i,
.site-nav.is-scrolled .nav-panel button.nav-plain i { color: #7FE9DC; }
.site-nav.is-scrolled .nav-panel a:not(.btn):hover,
.site-nav.is-scrolled .nav-panel button.nav-plain:hover { background: rgba(127, 233, 220, 0.14); }
.site-nav.is-scrolled .nav-panel a:not(.btn)[aria-current="location"] { background: rgba(127, 233, 220, 0.2); color: #ffffff; }
.nav-panel .btn { margin-top: 0.4rem; width: 100%; }

@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
}

/* ==========================================================================
   7. Reveals
   ========================================================================== */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 760ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 760ms var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-ready [data-reveal="right"] { transform: translate3d(-28px, 0, 0); }
.reveal-ready [data-reveal="left"] { transform: translate3d(28px, 0, 0); }
.reveal-ready [data-reveal="zoom"] { transform: scale(0.965); }
.reveal-ready [data-reveal="fade"] { transform: none; }
.reveal-ready [data-reveal].in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* .ambient.is-animating and .orbit.is-animating outrank the collapse above,
     so opting in still produces real motion. Nothing to add here. */
}

/* ==========================================================================
   8. Hero
   ========================================================================== */
.hero {
  background: linear-gradient(135deg, rgba(255,255,255,0.78) 0%, rgba(253,252,250,0.70) 40%, rgba(251,248,243,0.62) 100%);
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem));
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
/* The category H1 is a longer sentence than the outcome headline this ramp was
   originally cut for, so the type steps down and the measure widens. Both exist to
   keep it at three lines or fewer on desktop without shrinking it out of the
   headline role. */
.hero h1 { font-size: clamp(2rem, 3.7vw, 2.95rem); line-height: 1.08; max-width: 26ch; }
.hero-emphasis {
  background: var(--grad-ocean-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-lede {
  margin-top: 1.35rem; font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  color: var(--ink-soft); max-width: 52ch; font-weight: 500;
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.6rem; }
.hero-badges span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.88rem; font-weight: 600; color: #0B4A5B;
}
.hero-badges i { font-size: 1.05rem; color: #0F766E; }
.hero .cta-row { margin-top: 2.1rem; }

/* The hero eyebrow carries the category statement, which is the one thing the
   page previously never said. It reuses the .eyebrow token set (colour, weight,
   uppercase) and only overrides layout and size, so it wraps naturally instead
   of running off a narrow screen. It is never hidden at any breakpoint. */
.hero-eyebrow {
  display: block;
  font-size: 0.82rem; letter-spacing: 0.13em; line-height: 1.55;
  /* Wide enough that the outcome phrase holds one line on desktop. The tracking
     on uppercase text makes it far wider than its character count suggests, so a
     ch-based measure has to be generous. It still wraps naturally on a phone. */
  max-width: 56ch; margin-bottom: 1rem;
}
.hero-eyebrow-ink { color: var(--ink); }
/* Availability sits between the lede and the quiet disclosures: it is a product
   fact a buyer weighs, not fine print. */
.hero-availability {
  margin-top: 1.05rem; font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.6;
  font-weight: 600; color: var(--ink-soft); max-width: 54ch;
}
/* The language mode disclosure. Quiet, but never hidden: the multilingual headline
   is only approved while this line stays adjacent to it. */
.hero-modes {
  margin-top: 0.75rem; font-size: 0.86rem; line-height: 1.6;
  color: var(--ink-quiet); max-width: 58ch;
}
.hero-disclosure {
  margin-top: 1.25rem; font-size: 0.86rem; line-height: 1.6;
  color: var(--ink-quiet); max-width: 48ch;
}
.hero-fit {
  margin-top: 0.45rem; font-size: 0.86rem; font-weight: 600; line-height: 1.6;
  color: var(--ink-soft); max-width: 48ch;
}

/* Static language row for phone widths, where the orbit is dropped. Names only:
   an icon would imply a mode, and two-way voice and two-way text do not cover
   the same list of languages. Hidden from the tablet breakpoint up, where the
   orbit itself carries the language story. */
.hero-languages {
  display: none;
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  flex-wrap: wrap; gap: 0.5rem;
}
.hero-languages li {
  display: inline-flex; align-items: center;
  padding: 0.34rem 0.7rem; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(8, 145, 178, 0.26);
  font-size: 0.74rem; font-weight: 700; color: #0B4A5B;
}

/* Hero orbit visual */
.hero-visual {
  position: relative; height: clamp(360px, 42vw, 470px);
  display: flex; align-items: center; justify-content: center;
}
.orbit {
  position: absolute; top: 50%; left: 50%;
  width: min(390px, 86vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.orbit-spin { position: absolute; inset: 0; }
/* The ring and each chip run the same duration in opposite directions, so a
   chip stays upright at every angle. Never put transform on .orbit-chip:
   it would beat the node's positioning transform and collapse the ring. */
.hero-visual.is-animating .orbit-spin { animation: orbitSpin 72s linear infinite !important; }
.hero-visual.is-animating .orbit-chip { animation: orbitSpin 72s linear infinite reverse !important; }
.orbit-node {
  position: absolute; top: 50%; left: 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateY(calc(-1 * var(--r)))
    rotate(calc(-1 * var(--a)));
}
.orbit-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.75rem; white-space: nowrap;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(8, 145, 178, 0.26);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(8, 10, 12, 0.10);
  font-size: 0.74rem; font-weight: 700; color: #0B4A5B;
  opacity: 0.9;
  /* States use opacity, fill and border only. The chip cannot be scaled or
     padded on a tween: transform would beat the node's positioning
     transform and collapse the ring, and animating padding is layout work. */
  transition: opacity 600ms var(--ease-out), background-color 400ms ease,
              border-color 400ms ease, box-shadow 400ms ease, color 400ms ease;
}
.orbit-chip i { font-size: 0.95rem; color: #0F766E; transition: color 400ms ease; }
/* The three channel chips (Telephone, Web chat, SMS) carry a light blue fill that
   separates them from the language chips. All three accent states below use the
   SAME background, so a channel chip never changes colour when the forward or
   lit cycle lands on it. */
.orbit-node--accent .orbit-chip {
  background: rgba(8, 145, 178, 0.16);
  border-color: rgba(8, 145, 178, 0.44);
  color: #0B4A5B;
}
.orbit-node--accent .orbit-chip i { color: #0B6480; }
.orbit-node.is-forward .orbit-chip {
  opacity: 1;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(8, 145, 178, 0.5);
  box-shadow: 0 10px 24px rgba(8, 10, 12, 0.14);
}
/* Channel chips (Telephone, Web chat, SMS) hold the accent fill in every state.
   Without this the forward cycle paints whichever channel it lands on white,
   so Telephone and Web chat would read as different colours. */
.orbit-node--accent.is-forward .orbit-chip {
  background: rgba(8, 145, 178, 0.16);
  border-color: rgba(8, 145, 178, 0.66);
}
/* The cycling highlight carries the SAME fill as the accent chips (Telephone,
   Web chat, SMS) so no chip ever reads as a different colour. It separates
   itself with border and elevation only. */
.orbit-node.is-lit .orbit-chip {
  opacity: 1;
  background: rgba(13, 148, 136, 0.16);
  border-color: rgba(13, 148, 136, 0.72);
  color: #0B5F58;
  box-shadow: 0 10px 26px rgba(8, 10, 12, 0.18);
}
.orbit-node.is-lit .orbit-chip i { color: #0F766E; }
/* Must follow the .is-lit block: equal specificity, so source order decides.
   Without this a channel chip would flip from light blue to teal for the three
   seconds the highlight cycle rests on it. */
.orbit-node--accent.is-lit .orbit-chip {
  background: rgba(8, 145, 178, 0.16);
  border-color: rgba(8, 145, 178, 0.78);
  color: #0B4A5B;
}
.orbit-node--accent.is-lit .orbit-chip i { color: #0B6480; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.orbit-core {
  position: relative; z-index: 3;
  width: 126px; height: 126px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-orb);
  box-shadow: 0 16px 38px rgba(8, 10, 12, 0.26), inset 0 2px 12px rgba(255, 255, 255, 0.26);
}
.orbit-core-mark {
  font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: #fff;
}
/* Three STATIC concentric rings between the core and the orbiting chips. They do
   not expand: the only hero motion is the ring rotation, the counter-rotating
   chips and the core's breath. Radii are held clear of the chips' inner edge,
   which sits at about var(--r) minus half a chip width (roughly 122px at
   --r: 172px and 98px at --r: 148px), with headroom for coreBreath's 1.045
   scale. Sizes are driven from .orbit-core so the 980px breakpoint can retune
   them in one place. */
.orbit-core { --ring-1: -15px; --ring-2: -30px; --ring-3: -41px; }
.orbit-ripple {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(13, 148, 136, 0.34);
  opacity: 1;
}
.orbit-ripple { inset: var(--ring-1); }
.orbit-ripple.is-mid { inset: var(--ring-2); border-color: rgba(13, 148, 136, 0.24); }
.orbit-ripple.is-late { inset: var(--ring-3); border-color: rgba(13, 148, 136, 0.16); }
.hero-visual.is-animating .orbit-core { animation: coreBreath 5.6s ease-in-out infinite alternate !important; }
@keyframes coreBreath {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}
.orbit-caption {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #0B5F58; white-space: nowrap;
}

/* Disqualification band */
.disqualify {
  position: relative; z-index: 2;
  background: var(--grad-deep);
  border-block: 1px solid rgba(127, 233, 220, 0.24);
}
.disqualify-inner {
  width: var(--page); margin-inline: auto;
  padding-block: clamp(1.9rem, 3.4vw, 2.7rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.35rem;
  align-items: start;
}
.disqualify-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 1.6rem; color: #7FE9DC;
  background: rgba(127, 233, 220, 0.14);
  border: 1px solid rgba(127, 233, 220, 0.34);
}
.disqualify-lead {
  font-family: var(--serif); font-size: clamp(1.28rem, 2.5vw, 1.95rem);
  line-height: 1.2; color: #F4FBFC; max-width: 34ch;
}
.disqualify-note {
  grid-column: 2; font-size: 1.02rem; color: rgba(228, 246, 250, 0.9); max-width: 62ch;
}
.disqualify-note strong { color: #A7F3EA; font-weight: 700; }

/* ==========================================================================
   9. Shared card language
   ========================================================================== */
.card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--hairline-teal);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease-out), border-color 340ms var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-elevated); border-color: rgba(20, 184, 166, 0.42); }
.band-deep .card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(127, 233, 220, 0.26);
  box-shadow: 0 12px 34px rgba(6, 8, 10, 0.34);
}
.band-deep .card:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(127, 233, 220, 0.5); }

.icon-tile {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 1.5rem;
  background: rgba(20, 184, 166, 0.14); color: #0B5F58;
  border: 1px solid rgba(20, 184, 166, 0.24);
  flex: 0 0 auto;
}
.icon-tile.is-ocean { background: rgba(8, 145, 178, 0.13); color: #0B4A5B; border-color: rgba(8, 145, 178, 0.24); }
.icon-tile.is-warn { background: rgba(236, 72, 106, 0.11); color: var(--red-deep); border-color: rgba(236, 72, 106, 0.26); }
.icon-tile.is-solid { background: var(--grad-teal-cta); color: #fff; border-color: transparent; box-shadow: var(--glow-teal); }
.icon-tile.is-sm { width: 40px; height: 40px; font-size: 1.15rem; border-radius: var(--r-sm); }
.band-deep .icon-tile { background: rgba(127, 233, 220, 0.14); color: #A7F3EA; border-color: rgba(127, 233, 220, 0.3); }

.grid { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   10. The problem
   ========================================================================== */
/* Scan-first disclosure, Seren 2026-08-11. The card shows only its heading; the
   detail and the cost line open on hover at desktop and on click at touch widths.

   The collapse REUSES the .faq-answer mechanism verbatim rather than inventing a
   second one: a grid whose single row animates 0fr to 1fr, with an overflow-hidden
   body that has min-height 0. That is what lets it animate to content height without
   a hard-coded max-height, and it means the page's two disclosures behave and time
   identically. The reduced-motion block near the top of this file already collapses
   every transition-duration, so no separate motion guard is needed here.

   CAREFUL: .problem-card is NOT master-only. The after-hours page uses four of them
   in #tonight, where they are plain static cards with no toggle and no detail. Every
   rule that changes the box model is therefore scoped to #problem, or those four
   would lose their equal heights and their cost lines would stop aligning. The purely
   additive rules below (.problem-toggle, .problem-detail, .problem-chevron) need no
   scoping because the after-hours cards do not contain those elements at all.

   The 2026-08-11 cards kept the text to the right of the icon. Their 2026-08-11
   visual refinement groups them into two side-by-side panels: customer experience
   and team operations. Each panel uses one semantic accent and a vertical list so
   the headings can be larger without crowding a three-column row.

   EQUAL HEIGHTS WITHOUT COUPLING THE CARDS. An earlier version used
   grid-auto-rows: 1fr, which made every row track the tallest. That coupled the six
   cards together: revealing one grew every row, and because the card also carried
   height: 100% the revealed detail was constrained and .problem-detail-body's
   overflow: hidden CLIPPED the text. Both bugs shipped briefly on 2026-08-11.

   The replacement decouples them. align-items: start stops the grid stretching any
   card, and height: auto lets each card size to its own content, so revealing one
   card leaves the other five exactly as they were. Equal CLOSED heights come from a
   min-height on the heading row instead: it is set above both the 40px icon tile and
   a two-line heading, so row 1 is a constant height whether the heading wraps or not,
   and every closed card therefore measures the same.

   The card is a two-column grid: the icon holds column 1, the heading and the
   revealed detail share column 2. That puts the text beside the icon and keeps the
   detail aligned under its own heading rather than under the icon. */
.problem-card { display: flex; flex-direction: column; gap: 0.8rem; height: 100%; }
.problem-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
.problem-group {
  --problem-accent: #0F766E;
  --problem-accent-soft: rgba(15, 118, 110, 0.1);
  --problem-accent-border: rgba(15, 118, 110, 0.32);
  --problem-panel-border: rgba(15, 118, 110, 0.2);
  --problem-panel-bg: linear-gradient(145deg, rgba(235, 249, 245, 0.9), rgba(250, 253, 252, 0.96));
  padding: clamp(1.05rem, 2vw, 1.45rem);
  border: 1px solid var(--problem-panel-border);
  border-radius: var(--r-xl);
  background: var(--problem-panel-bg);
  box-shadow: 0 18px 42px rgba(12, 80, 71, 0.08);
}
.problem-group--team {
  --problem-accent: #B4234A;
  --problem-accent-soft: rgba(180, 35, 74, 0.09);
  --problem-accent-border: rgba(180, 35, 74, 0.3);
  --problem-panel-border: rgba(180, 35, 74, 0.18);
  --problem-panel-bg: linear-gradient(145deg, rgba(255, 243, 239, 0.92), rgba(255, 251, 248, 0.97));
  box-shadow: 0 18px 42px rgba(122, 45, 57, 0.07);
}
#problem .problem-group .grid-3 {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.78rem;
  align-items: start;
}
#problem .problem-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.68rem 0.95rem;
  align-content: start;
  height: auto;
  padding: clamp(0.95rem, 1.5vw, 1.12rem);
  border: 1px solid var(--problem-accent-border);
  border-left: 3px solid var(--problem-accent);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 10px 24px rgba(12, 39, 48, 0.06);
}
#problem .problem-card:hover,
#problem .problem-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--problem-accent-border);
  border-left-color: var(--problem-accent);
  box-shadow: 0 16px 32px rgba(12, 39, 48, 0.1);
}
#problem .problem-card.is-revealed {
  background: #fff;
  box-shadow: 0 16px 34px rgba(12, 39, 48, 0.1);
}
.problem-group-title {
  font-size: clamp(1.12rem, 1.8vw, 1.3rem);
  font-family: var(--sans);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
}
.problem-group-title i {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid var(--problem-accent-border);
  border-radius: var(--r-md);
  background: var(--problem-accent-soft);
  color: var(--problem-accent);
  font-size: 1rem;
}

#problem .problem-card > h3,
#problem .problem-card > h4 { min-height: 44px; display: flex; align-items: center; }
/* Expand all / collapse all, top right of the grid. It drives the same .is-revealed
   class the hover rule and the per-card handler use, so the three paths agree. */
#problem .problem-controls { display: flex; justify-content: flex-end; margin-bottom: 1.1rem; }
.problem-expand-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.9rem; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-teal); background: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  transition: border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.problem-expand-all:hover { border-color: rgba(20, 184, 166, 0.5); color: var(--ink); }
#problem .problem-card > .icon-tile {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  border-color: var(--problem-accent-border);
  border-radius: var(--r-md);
  background: var(--problem-accent-soft);
  color: var(--problem-accent);
  font-size: 1.08rem;
}
#problem .problem-card > h3,
#problem .problem-card > h4 { grid-column: 2; grid-row: 1; align-self: center; }
#problem .problem-detail { grid-column: 2; grid-row: 2; }
#problem .problem-card h3,
#problem .problem-card h4 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.25vw, 1.1rem);
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
/* Customer-facing failures carry the requested coral warning hierarchy. The
   associated symbols stay near-black so the title, not the icon, carries the
   colour emphasis. */
#problem .problem-group--customer .problem-card h4 { color: var(--red-deep); }
#problem .problem-group--customer .problem-card > .icon-tile { color: var(--ink); }
#problem .problem-card p { font-size: 0.95rem; line-height: 1.62; }
#problem .problem-detail-body { gap: 0.65rem; }
#problem .problem-cost { margin-top: 0; padding-top: 0.62rem; font-size: 0.84rem; }
#problem .problem-chevron {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  margin-top: 0;
  border-radius: var(--r-full);
  background: var(--problem-accent-soft);
  color: var(--problem-accent);
}
#problem .problem-card.is-revealed .problem-chevron {
  background: var(--problem-accent);
  color: #fff;
}
.problem-card h3,
.problem-card h4 { font-size: 1.3rem; margin: 0; }
.problem-card p { font-size: 0.97rem; color: var(--ink-soft); }
/* The heading wraps a real button so the card is keyboard operable. font: inherit
   keeps the h3's type, the same reset .faq-item h3 needs for the same reason. */
.problem-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.problem-toggle:focus-visible {
  outline: 3px solid var(--problem-accent-border);
  outline-offset: 5px;
  border-radius: var(--r-sm);
}
.problem-chevron {
  flex-shrink: 0; font-size: 0.8rem; margin-top: 0.4rem; color: #7A93A0;
  transition: transform 300ms var(--ease-out), color 300ms ease;
}
.problem-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 350ms var(--ease-out); }
.problem-detail-body { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.problem-card.is-revealed .problem-detail { grid-template-rows: 1fr; }
.problem-card.is-revealed .problem-chevron { transform: rotate(180deg); color: var(--red-deep); }
/* Hover is additive and desktop-only. Touch devices report hover: none, so they get
   the click path alone and can never be left in a stuck hover state. :focus-within
   gives the keyboard the same reveal the mouse gets. */
@media (hover: hover) and (pointer: fine) {
  .problem-card:hover .problem-detail,
  .problem-card:focus-within .problem-detail { grid-template-rows: 1fr; }
  .problem-card:hover .problem-chevron,
  .problem-card:focus-within .problem-chevron { transform: rotate(180deg); color: var(--red-deep); }
}
.problem-cost {
  margin-top: auto; padding-top: 0.8rem; border-top: 1px dashed rgba(236, 72, 106, 0.32);
  font-size: 0.86rem; font-weight: 700; color: var(--red-deep);
  display: flex; align-items: flex-start; gap: 0.45rem;
}
.problem-cost i { font-size: 1rem; margin-top: 0.15rem; }

@media (max-width: 860px) {
  .problem-groups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 460px) {
  .problem-group { padding: 0.9rem; border-radius: var(--r-lg); }
  #problem .problem-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.62rem 0.78rem;
    padding: 0.88rem;
  }
  #problem .problem-card > .icon-tile { width: 42px; height: 42px; }
  #problem .problem-card h4 { font-size: 1rem; }
}

.problem-summary {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem;
  align-items: center;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.6vw, 2.1rem);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(236, 72, 106, 0.07) 0%, rgba(255, 250, 247, 0.92) 100%);
  border: 1px solid rgba(236, 72, 106, 0.26);
}
.problem-summary strong {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.2; display: block; margin-bottom: 0.4rem;
}
.problem-summary p { color: var(--ink-soft); font-size: 1rem; }

/* ==========================================================================
   11. Alternatives
   ========================================================================== */
.answer-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
  align-items: start;
}
.answer-choice {
  --answer-accent: #0B6480;
  --answer-accent-soft: rgba(8, 145, 178, 0.09);
  --answer-accent-border: rgba(8, 145, 178, 0.28);
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--answer-accent-border);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(12, 39, 48, 0.07);
  transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out), background-color 280ms var(--ease-out);
}
.answer-choice:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 145, 178, 0.48);
  box-shadow: 0 18px 36px rgba(12, 73, 86, 0.12);
}
.answer-choice[open] {
  grid-column: 1 / -1;
  border-color: rgba(8, 145, 178, 0.52);
  background: rgba(250, 254, 254, 0.98);
  box-shadow: 0 18px 38px rgba(12, 73, 86, 0.13);
}
.answer-choice--risk {
  --answer-accent: var(--red-deep);
  --answer-accent-soft: rgba(236, 72, 106, 0.09);
  --answer-accent-border: rgba(180, 35, 74, 0.28);
}
.answer-choice--risk:hover,
.answer-choice--risk[open] { border-color: rgba(180, 35, 74, 0.48); }
.answer-choice-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  min-height: 82px;
  padding: 1rem 1.05rem;
  cursor: pointer;
  list-style: none;
}
.answer-choice-summary::-webkit-details-marker { display: none; }
.answer-choice-summary::marker { content: ""; }
.answer-choice-summary:focus-visible {
  outline: 3px solid var(--answer-accent-border);
  outline-offset: -4px;
  border-radius: var(--r-lg);
}
.answer-choice-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  font-size: 1.15rem;
}
.answer-choice-title,
.answer-choice-static-head h3 {
  font-family: var(--sans);
  font-size: clamp(1.04rem, 1.35vw, 1.18rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.answer-choice-action {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--answer-accent);
}
.answer-choice-action i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--answer-accent-soft);
  transition: transform 260ms var(--ease-out), background-color 260ms var(--ease-out), color 260ms var(--ease-out);
}
.answer-choice[open] .answer-choice-action i {
  transform: rotate(180deg);
  background: var(--answer-accent);
  color: #fff;
}
.answer-choice-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 1.05rem;
  border-top: 1px solid var(--answer-accent-border);
  animation: answer-choice-reveal 260ms var(--ease-out) both;
}
.answer-choice-detail > div { padding: 1rem 0.95rem 1.15rem 0; }
.answer-choice-detail > .answer-choice-limit {
  padding-left: 1rem;
  padding-right: 0;
  border-left: 1px solid var(--answer-accent-border);
}
.answer-choice-label {
  display: block;
  margin-bottom: 0.38rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  color: #0B5F73;
}
.answer-choice-limit .answer-choice-label { color: var(--red-deep); }
.answer-choice-detail p {
  font-size: 0.93rem;
  line-height: 1.58;
  color: var(--ink-soft);
}
.answer-choice-limit p { color: #633842; }
.answer-choice--chatterbox {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 2.28fr);
  align-items: stretch;
  border-color: rgba(13, 148, 136, 0.48);
  background: linear-gradient(135deg, rgba(222, 247, 241, 0.96) 0%, rgba(247, 253, 252, 0.98) 54%, rgba(232, 246, 250, 0.94) 100%);
  box-shadow: var(--ring-teal), 0 20px 44px rgba(12, 80, 71, 0.12);
}
.answer-choice--chatterbox:hover {
  border-color: rgba(13, 148, 136, 0.7);
  box-shadow: var(--ring-teal), 0 24px 48px rgba(12, 80, 71, 0.16);
}
.answer-choice-static-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: clamp(1.15rem, 2vw, 1.5rem);
}
.answer-choice-static-head h3 { margin: 0; font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
.answer-choice--chatterbox .answer-choice-icon { width: 52px; height: 52px; }
.answer-choice--chatterbox .answer-choice-detail {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0 clamp(1.15rem, 2vw, 1.5rem);
  border-top: 0;
  border-left: 1px solid rgba(13, 148, 136, 0.3);
  animation: none;
}
.answer-choice--chatterbox .answer-choice-detail > div { padding: clamp(1.15rem, 2vw, 1.5rem) 0; }
.answer-choice--chatterbox .answer-choice-label { color: #0B5F58; }
.answer-choice--chatterbox .answer-choice-detail p { color: var(--ink); font-weight: 550; }

@keyframes answer-choice-reveal {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

.alt-footnote {
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.95rem; color: var(--ink-soft);
}
.alt-footnote i { font-size: 1.15rem; color: #0B6480; margin-top: 0.2rem; }
/* Authored light-first, like every component here. The disqualification band is
   the first dark surface to carry a footnote, so it needs the same band-scoped
   re-tint that .card, .icon-tile, .eyebrow and .section-lede already have. */
.band-deep .alt-footnote { color: rgba(226, 244, 249, 0.82); }
.band-deep .alt-footnote i { color: #7FE9DC; }

/* ==========================================================================
   12. What makes it different
   ========================================================================== */
#how-it-works .answer-pillars {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.25rem);
}
#how-it-works .answer-pillars .pillar-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0.5rem 1rem;
  min-height: 180px;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2vw, 1.55rem);
  border: 1px solid rgba(13, 148, 136, 0.24);
  border-left: 3px solid #0D9488;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(231, 248, 244, 0.76));
  box-shadow: 0 14px 30px rgba(12, 80, 71, 0.08);
  transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out), background-color 280ms var(--ease-out);
}
#how-it-works .answer-pillars .pillar-card:nth-child(even) {
  border-left-color: #0B6480;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(229, 244, 249, 0.78));
}
#how-it-works .answer-pillars .pillar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 148, 136, 0.48);
  box-shadow: 0 20px 40px rgba(12, 80, 71, 0.13);
}
#how-it-works .answer-pillars .pillar-card > .icon-tile {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 50px;
  height: 50px;
  border-radius: var(--r-md);
  background: rgba(13, 148, 136, 0.12);
  color: #0B5F58;
  font-size: 1.2rem;
  transition: background-color 280ms var(--ease-out), color 280ms var(--ease-out), transform 280ms var(--ease-out);
}
#how-it-works .answer-pillars .pillar-card:hover > .icon-tile {
  transform: scale(1.04);
  background: #0D9488;
  color: #fff;
}
#how-it-works .answer-pillars .pillar-step {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(13, 148, 136, 0.26);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.72);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 800;
  color: #0B6480;
}
#how-it-works .answer-pillars .pillar-card h3 {
  grid-column: 2;
  margin: 0;
  padding-right: 2rem;
  font-family: var(--sans);
  font-size: clamp(1.08rem, 1.45vw, 1.24rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.014em;
}
#how-it-works .answer-pillars .pillar-card p {
  grid-column: 2;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .answer-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .answer-choice[open] { grid-column: auto; }
  #how-it-works .answer-pillars { grid-template-columns: minmax(0, 1fr); }
  .answer-choice--chatterbox {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .answer-choice--chatterbox .answer-choice-detail {
    margin: 0 1.05rem;
    padding: 0;
    border-top: 1px solid rgba(13, 148, 136, 0.3);
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .answer-choice-summary {
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    min-height: 76px;
    gap: 0.75rem;
    padding: 0.9rem;
  }
  .answer-choice-icon { width: 44px; height: 44px; }
  .answer-choice-action { font-size: 0; gap: 0; }
  .answer-choice-action i { font-size: 0.78rem; }
  .answer-choice-detail { grid-template-columns: minmax(0, 1fr); margin: 0 0.9rem; }
  .answer-choice-detail > div { padding: 0.85rem 0 0.95rem; }
  .answer-choice-detail > .answer-choice-limit {
    padding: 0.9rem 0 1rem;
    border-top: 1px solid var(--answer-accent-border);
    border-left: 0;
  }
  .answer-choice-static-head { grid-template-columns: 48px minmax(0, 1fr); padding: 1rem; }
  .answer-choice--chatterbox .answer-choice-icon { width: 48px; height: 48px; }
  #how-it-works .answer-pillars .pillar-card {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 0;
    padding: 1rem;
  }
  #how-it-works .answer-pillars .pillar-card > .icon-tile { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .answer-choice,
  .answer-choice-action i,
  #how-it-works .answer-pillars .pillar-card,
  #how-it-works .answer-pillars .pillar-card > .icon-tile {
    transition: none;
  }
  .answer-choice-detail { animation: none; }
}

.memory-callout {
  margin-top: clamp(1.4rem, 2.6vw, 2.2rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem 1.3rem;
  align-items: start;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.6vw, 2.1rem);
  border-radius: var(--r-xl);
  background: var(--grad-ocean-12);
  border: 1px solid rgba(8, 145, 178, 0.3);
  box-shadow: var(--ring-teal);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.memory-callout strong {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.2; display: block; margin-bottom: 0.35rem;
}
.memory-callout p { color: var(--ink-soft); }

/* ==========================================================================
   13. Flow map
   ========================================================================== */
.flow-map {
  margin: 0; padding: clamp(1.4rem, 2.8vw, 2.3rem);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--hairline-teal);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.flow-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  padding: 0.75rem 0.95rem; border-radius: var(--r-md);
  border: 1px dashed rgba(8, 145, 178, 0.34);
  background: rgba(8, 145, 178, 0.05);
}
.flow-strip + .flow-strip { margin-top: 0.6rem; }
.flow-strip > strong {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: #0B4A5B;
  margin-right: 0.35rem; display: inline-flex; align-items: center; gap: 0.4rem;
}
.flow-strip > span {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.24rem 0.62rem; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(12, 39, 48, 0.12);
  font-size: 0.79rem; font-weight: 600; color: var(--ink-soft);
}
.flow-strip > span i { font-size: 0.92rem; color: #0F766E; }

.flow-track {
  margin-top: 1.5rem;
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1.25fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr);
  gap: 0;
}
.flow-node {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.05rem 1.05rem 1.15rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
}
.flow-node strong { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; }
.flow-node strong i { color: #0B6480; font-size: 1.05rem; }
.flow-node p { font-size: 0.87rem; color: var(--ink-soft); }
.flow-node--core {
  background: linear-gradient(150deg, rgba(13, 148, 136, 0.14) 0%, rgba(255, 255, 255, 0.95) 70%);
  border-color: rgba(13, 148, 136, 0.44);
  box-shadow: var(--ring-teal);
}
.flow-node--core strong i { color: #0F766E; }
.flow-node--outcome { border-color: rgba(8, 145, 178, 0.34); background: rgba(8, 145, 178, 0.06); }
.capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.15rem; }
.capability-grid span {
  display: flex; align-items: center; gap: 0.35rem; min-width: 0;
  padding: 0.3rem 0.5rem; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(13, 148, 136, 0.28);
  font-size: 0.76rem; font-weight: 700; color: #0B5F58;
}
.capability-grid span i { font-size: 0.88rem; flex: 0 0 auto; }
.capability-grid span em { font-style: normal; overflow-wrap: anywhere; }

/* ==========================================================================
   15. Knowledge demo
   ========================================================================== */
.demo {
  margin-top: clamp(1.8rem, 3.2vw, 2.8rem);
  margin-bottom: clamp(1.8rem, 3.2vw, 2.8rem);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(12, 74, 110, 0.06) 0%, rgba(255, 255, 255, 0.92) 60%);
  border: 1px solid var(--hairline-teal);
  box-shadow: var(--shadow-card);
}
.demo-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.8rem; margin-bottom: 1.3rem;
}
.demo-toolbar strong { display: flex; align-items: center; gap: 0.5rem; font-size: 1.02rem; }
.demo-toolbar strong i { color: #0F766E; }
.demo-motion-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 40px; padding: 0.4rem 0.95rem; cursor: pointer;
  border-radius: var(--r-full); border: 1px solid rgba(8, 145, 178, 0.36);
  background: rgba(255, 255, 255, 0.9); color: #0B4A5B;
  font-size: 0.84rem; font-weight: 700;
  transition: background 240ms ease, border-color 240ms ease;
}
.demo-motion-toggle:hover { background: rgba(34, 211, 238, 0.12); border-color: rgba(8, 145, 178, 0.6); }

.demo-workspace {
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 0.82fr) 54px minmax(0, 1fr);
}
.demo-panel {
  display: flex; flex-direction: column; gap: 0.55rem; justify-content: center;
  padding: 1.15rem 1.2rem; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  transition: border-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.demo-panel h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 0.45rem; }
.demo-panel h3 i { color: #0B6480; font-size: 1.05rem; }
.demo-panel p { font-size: 0.88rem; color: var(--ink-soft); }
.demo-sources { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.demo-sources span {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.6rem; border-radius: var(--r-full);
  background: rgba(8, 145, 178, 0.1); border: 1px solid rgba(8, 145, 178, 0.28);
  font-size: 0.78rem; font-weight: 700; color: #0B4A5B;
}
.demo[data-stage="1"] .demo-input-panel,
.demo[data-stage="2"] .demo-core-panel,
.demo[data-stage="3"] .demo-output-panel {
  border-color: rgba(13, 148, 136, 0.52);
  box-shadow: var(--ring-teal);
  transform: translateY(-3px);
}
.demo-core-panel { align-items: center; text-align: center; }
.demo-core-machine {
  width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-orb);
  box-shadow: var(--glow-teal);
  transition: transform 700ms var(--ease-out);
}
.demo-core-mark { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: #fff; }
.demo[data-stage="2"] .demo-core-machine { transform: rotate(12deg) scale(1.06); }
.demo-connector { position: relative; display: grid; place-items: center; }
.demo-connector::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(13, 148, 136, 0.5) 0 6px, transparent 6px 12px);
  transform: translateY(-50%);
}
.demo-pulse {
  position: relative; width: 10px; height: 10px; border-radius: 50%;
  background: var(--turquoise-deep); box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.22);
}
.demo[data-playing="true"] .demo-connector-in .demo-pulse { animation: pulseIn 1.8s ease-in-out infinite; }
.demo[data-playing="true"] .demo-connector-out .demo-pulse { animation: pulseOut 1.8s ease-in-out infinite 0.9s; }
@keyframes pulseIn { 0% { transform: translateX(-16px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(16px); opacity: 0; } }
@keyframes pulseOut { 0% { transform: translateX(-16px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(16px); opacity: 0; } }

.demo-stage-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1.3rem; }
.demo-stage-button {
  display: flex; flex-direction: column; gap: 0.28rem; text-align: left;
  min-height: 44px; padding: 0.75rem 0.95rem; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.88);
  transition: border-color 260ms ease, background 260ms ease, transform 260ms var(--ease-out);
}
.demo-stage-button:hover { transform: translateY(-2px); border-color: rgba(8, 145, 178, 0.44); }
.demo-stage-button[aria-current="step"] {
  background: rgba(13, 148, 136, 0.12); border-color: rgba(13, 148, 136, 0.46);
}
.demo-stage-number {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.demo-stage-button[aria-current="step"] .demo-stage-number { color: #0B5F58; }
.demo-stage-button strong { font-size: 0.98rem; display: flex; align-items: center; gap: 0.4rem; }
.demo-stage-button strong i { color: #0B6480; }
.demo-substeps { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.25rem; }
.demo-substeps span { font-size: 0.78rem; color: var(--ink-quiet); opacity: 0.45; transition: opacity 300ms ease, color 300ms ease; }
.demo[data-scene="2"] .demo-substeps span[data-substep="2"],
.demo[data-scene="3"] .demo-substeps span[data-substep="2"],
.demo[data-scene="3"] .demo-substeps span[data-substep="3"],
.demo[data-scene="4"] .demo-substeps span[data-substep="2"],
.demo[data-scene="4"] .demo-substeps span[data-substep="3"],
.demo[data-scene="4"] .demo-substeps span[data-substep="4"],
.demo[data-complete="true"] .demo-substeps span { opacity: 1; color: #0B5F58; font-weight: 600; }

@media (max-width: 980px) {
  .demo-workspace { grid-template-columns: minmax(0, 1fr); }
  .demo-connector { height: 42px; }
  .demo-connector::before {
    left: 50%; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, rgba(13, 148, 136, 0.5) 0 6px, transparent 6px 12px);
  }
}

@media (max-width: 780px) {
  .demo-stage-track { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .demo-pulse { animation: none !important; }
  .demo-panel { transform: none !important; }
}

.flow-link { display: grid; place-items: center; color: rgba(13, 148, 136, 0.7); font-size: 1.05rem; }
.flow-link i { display: block; }

.flow-return {
  margin-top: 1.1rem; display: flex; justify-content: flex-end;
}
.flow-return span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.95rem; border-radius: var(--r-full);
  background: rgba(13, 148, 136, 0.12);
  border: 1px solid rgba(13, 148, 136, 0.36);
  font-size: 0.85rem; font-weight: 700; color: #0B5F58;
}
.flow-return i { font-size: 1rem; }
.flow-caption {
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.98rem; color: var(--ink-soft);
}
.flow-caption strong { color: var(--ink); }

/* Channel topology. The diagram is code-native on desktop so it remains
   selectable and accessible; mobile uses the matching illustrated asset. */
.service-topology {
  --topology-gap: clamp(2.2rem, 4.6vw, 4.8rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  border: 1px solid rgba(13, 148, 136, 0.28);
  border-radius: var(--r-xl);
  color: #123d35;
  background:
    radial-gradient(circle at 50% 42%, rgba(94, 207, 180, 0.24), transparent 31%),
    linear-gradient(145deg, #fffdf8 0%, #f3fbf7 52%, #e8f6f1 100%);
  box-shadow: 0 24px 70px rgba(10, 87, 73, 0.13);
}

.topology-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.78fr) minmax(0, 1fr);
  gap: var(--topology-gap);
  align-items: center;
}

.topology-side,
.topology-core,
.topology-integration { min-width: 0; }

.topology-zone-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.8rem;
  color: #174f44;
  font-family: var(--sans);
  font-size: clamp(0.8rem, 1.2vw, 0.98rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.topology-zone-title i { color: #ff8068; }
.topology-side--administration .topology-zone-title { justify-content: flex-end; }

.topology-channel-list,
.topology-integration-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topology-channel-list { display: grid; gap: 0.68rem; }

.topology-channel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 48px;
  padding: 0.58rem 0.78rem;
  border: 1px solid rgba(13, 148, 136, 0.34);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(10, 87, 73, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  color: #123d35;
  font-size: clamp(0.76rem, 1.05vw, 0.9rem);
  font-weight: 700;
  line-height: 1.25;
}

.topology-channel > i {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #ff8068;
  color: #fff8f5;
  font-size: 0.9rem;
}

.topology-side--customers .topology-channel::after,
.topology-side--administration .topology-channel::before {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--topology-gap);
  height: 1px;
  background: rgba(13, 148, 136, 0.42);
}

.topology-side--customers .topology-channel::after { left: 100%; }
.topology-side--administration .topology-channel::before { right: 100%; }

.topology-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.topology-core-ring {
  position: relative;
  display: flex;
  width: min(100%, 270px);
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  border: 2px solid #ff8068;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #ffffff 0%, #e6f7f1 58%, #ccece2 100%);
  box-shadow:
    0 0 0 10px rgba(94, 207, 180, 0.13),
    0 18px 44px rgba(10, 87, 73, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-align: center;
}

.topology-core-ring h4 {
  margin: 0 0 0.62rem;
  color: #bf503e;
  font-family: var(--sans);
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.topology-core-ring span {
  max-width: 15ch;
  margin-top: 0.35rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(191, 80, 62, 0.52);
  color: #123d35;
  font-size: clamp(0.88rem, 1.35vw, 1.05rem);
  font-weight: 800;
  line-height: 1.35;
}

.topology-integration {
  position: relative;
  grid-column: 1 / -1;
  width: min(100%, 66rem);
  margin: 0 auto;
  padding-top: 0.95rem;
  border-top: 1px dashed rgba(13, 148, 136, 0.38);
}

.topology-integration::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: var(--topology-gap);
  background: rgba(13, 148, 136, 0.42);
}

.topology-integration .topology-zone-title { justify-content: center; }

.topology-integration-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.62rem;
}

.topology-integration-list li {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(13, 148, 136, 0.34);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.82);
  color: #123d35;
  font-size: 0.84rem;
  font-weight: 800;
  text-align: center;
}

.service-topology figcaption {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(13, 148, 136, 0.2);
  color: #48675f;
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
}

.service-topology figcaption strong { color: #123d35; }

.solution-topology-mobile { display: none; }

@media (max-width: 980px) {
  .service-topology { --topology-gap: 1.2rem; }
  .topology-grid { grid-template-columns: minmax(0, 1fr); }
  .topology-core { grid-row: 1; }
  .topology-side--customers { grid-row: 2; }
  .topology-side--administration { grid-row: 3; }
  .topology-integration { grid-row: 4; grid-column: 1; }
  .topology-core-ring { width: min(68vw, 240px); }
  .topology-side--administration .topology-zone-title { justify-content: flex-start; }
  .topology-channel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topology-side--customers .topology-channel::after,
  .topology-side--administration .topology-channel::before,
  .topology-integration::before { display: none; }
}

@media (max-width: 620px) {
  .service-topology { padding: 1rem; }
  .topology-channel-list { grid-template-columns: minmax(0, 1fr); }
  .topology-integration-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .service-topology { display: none; }
  .solution-topology-mobile {
    display: grid;
    gap: 0.9rem;
    margin: 0;
  }
  .solution-topology-mobile img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(13, 148, 136, 0.28);
    border-radius: var(--r-xl);
    box-shadow: 0 18px 48px rgba(10, 87, 73, 0.13);
  }
  .solution-topology-mobile figcaption {
    color: #48675f;
    font-size: 0.88rem;
    line-height: 1.55;
    text-align: center;
  }
  .solution-topology-mobile figcaption strong { color: #123d35; }
}

/* ==========================================================================
   14. Nothing to build, timing
   ========================================================================== */
.build-list { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.build-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.build-list i { font-size: 1.15rem; color: #0F766E; margin-top: 0.15rem; flex: 0 0 auto; }
.band-deep .build-list i { color: #7FE9DC; }
.build-list strong { display: block; font-size: 1rem; }
.build-list span { display: block; font-size: 0.92rem; color: var(--ink-soft); }
.build-note { margin-top: 1.1rem; font-size: 0.92rem; color: var(--ink-quiet); }

.timing-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.2rem); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.timing-path > div {
  position: relative; padding: 1.1rem 1.2rem 1.2rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--hairline-teal);
  box-shadow: var(--shadow-soft);
}
.timing-path strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; font-size: 1.05rem; }
.timing-stage {
  padding: 0.1rem 0.55rem; border-radius: var(--r-full);
  background: rgba(20, 184, 166, 0.16); border: 1px solid rgba(20, 184, 166, 0.3);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #0B5F58;
}
.timing-path span.timing-detail { display: block; margin-top: 0.3rem; font-size: 0.92rem; color: var(--ink-soft); }
.timing-qualification { margin-top: 1rem; font-size: 0.88rem; color: var(--ink-quiet); }

/* ==========================================================================
   15. Who uses it
   ========================================================================== */
.who-card { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; text-align: left; }
.who-card h3 { font-size: 1.22rem; }
.who-card p { font-size: 0.94rem; color: rgba(226, 244, 249, 0.85); }
.band-deep .who-card p { color: rgba(226, 244, 249, 0.85); }
.who-card .who-need {
  margin-top: auto; padding-top: 0.75rem;
  border-top: 1px solid rgba(127, 233, 220, 0.24);
  font-size: 0.86rem; font-weight: 700; color: #A7F3EA;
  display: flex; align-items: flex-start; gap: 0.45rem;
}
.who-card .who-need i { margin-top: 0.15rem; }

/* Just-in-time copy. The decision or outcome stays visible; supporting explanation
   drops into place only when the reader asks for it. Native details preserves the
   content in the document for search, accessibility and no-script use. */
.jit-disclosure {
  margin-top: auto;
  border-top: 1px solid var(--hairline-teal);
}
.jit-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 44px;
  padding: 0.72rem 0;
  cursor: pointer;
  list-style: none;
  color: #0B5F58;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.jit-disclosure > summary::-webkit-details-marker { display: none; }
.jit-disclosure > summary::marker { content: ""; }
.jit-disclosure > summary i {
  flex: 0 0 auto;
  transition: transform 280ms var(--ease-out);
}
.jit-disclosure[open] > summary i { transform: rotate(180deg); }
.jit-disclosure > summary:hover { color: var(--ink); }
.jit-disclosure > summary:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.35);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}
.jit-disclosure-body { padding: 0.25rem 0 0.2rem; }
.jit-disclosure-body > :first-child { margin-top: 0; }
.jit-disclosure-body > :last-child { margin-bottom: 0; }
.band-deep .jit-disclosure { border-top-color: rgba(127, 233, 220, 0.24); }
.band-deep .jit-disclosure > summary { color: #A7F3EA; }
.band-deep .jit-disclosure > summary:hover { color: #F4FBFC; }
.band-deep .jit-disclosure > summary:focus-visible { outline-color: rgba(167, 243, 234, 0.5); }

/* Modern browsers animate the native details content. Older browsers retain the
   same accessible disclosure with an immediate open and close. */
@supports selector(details::details-content) {
  .jit-disclosure::details-content {
    opacity: 0;
    transform: translateY(-0.45rem);
    transition:
      opacity 280ms var(--ease-out),
      transform 280ms var(--ease-out),
      content-visibility 280ms allow-discrete;
  }
  .jit-disclosure[open]::details-content {
    opacity: 1;
    transform: translateY(0);
  }
  @starting-style {
    .jit-disclosure[open]::details-content {
      opacity: 0;
      transform: translateY(-0.45rem);
    }
  }
}

.channel-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.channel-list li {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.62rem; border-radius: var(--r-full);
  background: rgba(127, 233, 220, 0.14); border: 1px solid rgba(127, 233, 220, 0.3);
  font-size: 0.78rem; font-weight: 700; color: #C6F7F0;
}
.quiet-note { font-size: 0.85rem; color: rgba(226, 244, 249, 0.82); }

/* ==========================================================================
   16. Workflow examples
   ========================================================================== */
.workflow-system { display: flex; flex-direction: column; gap: clamp(0.8rem, 1.5vw, 1.1rem); }
.workflow-system-header { text-align: center; margin-bottom: 0.6rem; }
.workflow-system-header h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.workflow-system-header p { margin: 0.5rem auto 0; color: var(--ink-soft); }

.workflow-case {
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.workflow-case:hover { border-color: rgba(20, 184, 166, 0.42); box-shadow: var(--shadow-card); }
.workflow-case.is-open { border-color: rgba(13, 148, 136, 0.5); box-shadow: var(--ring-teal), var(--shadow-card); }
.workflow-case-heading {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  padding: clamp(1rem, 1.9vw, 1.35rem) clamp(1.1rem, 2.1vw, 1.6rem);
}
.workflow-case-heading h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 0.55rem; flex: 1 1 auto; }
.workflow-case-heading h3 i { color: #0F766E; font-size: 1.15rem; flex: 0 0 auto; }
.workflow-mobile-summary { display: none; font-size: 0.92rem; color: var(--ink-soft); flex: 1 1 100%; }
.workflow-case-toggle {
  display: none; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.4rem 0.9rem; cursor: pointer;
  border-radius: var(--r-full); border: 1px solid rgba(8, 145, 178, 0.36);
  background: rgba(255, 255, 255, 0.9); color: #0B4A5B;
  font-size: 0.84rem; font-weight: 700;
}
.workflow-case-toggle i { transition: transform 300ms var(--ease-out); }
.workflow-case.is-open .workflow-case-toggle i { transform: rotate(180deg); }
.workflow-case-detail { padding: 0 clamp(1.1rem, 2.1vw, 1.6rem) clamp(1.1rem, 2.1vw, 1.5rem); }
.workflow-case-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; }
.workflow-stage {
  display: flex; align-items: center; padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  background: rgba(8, 145, 178, 0.07); border: 1px solid rgba(8, 145, 178, 0.2);
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
}
.workflow-stage--decision {
  background: rgba(13, 148, 136, 0.13); border-color: rgba(13, 148, 136, 0.36);
  color: #0B5F58; font-weight: 700;
}
.workflow-result { margin-top: 0.9rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0.7rem 1.4rem; }
.workflow-outcome { font-weight: 700; color: var(--ink); display: flex; align-items: flex-start; gap: 0.45rem; }
.workflow-outcome i { color: #0F766E; margin-top: 0.22rem; }
.workflow-evidence { font-size: 0.9rem; color: var(--ink-soft); }
.workflow-evidence span {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 0.2rem;
}

/* ==========================================================================
   17. Proof
   ========================================================================== */
.proof-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(1.2rem, 2.4vw, 2rem); align-items: start; }
.source-sheet {
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  border-top: 4px solid rgba(8, 145, 178, 0.5);
}
.source-sheet > strong {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #0B4A5B; margin-bottom: 0.5rem;
}
.source-sheet h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.source-sheet p { font-size: 0.94rem; color: var(--ink-soft); }
.proof-source-note { margin-top: 0.9rem; font-size: 0.87rem; color: var(--ink-quiet); }

.proof-console {
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(13, 148, 136, 0.1) 0%, rgba(255, 255, 255, 0.95) 55%);
  border: 1px solid rgba(13, 148, 136, 0.36);
  box-shadow: var(--ring-teal), var(--shadow-card);
  transition: opacity 200ms ease;
}
.proof-console.is-switching { opacity: 0.35; }
.proof-status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.26rem 0.75rem; border-radius: var(--r-full);
  background: rgba(13, 148, 136, 0.14); border: 1px solid rgba(13, 148, 136, 0.34);
  font-size: 0.76rem; font-weight: 700; color: #0B5F58;
}
.proof-question { margin-top: 1rem; font-size: 1.02rem; }
.proof-question-label {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-quiet); margin-right: 0.4rem;
}
.proof-answer {
  margin-top: 1rem; padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(45, 212, 191, 0.1) 0%, rgba(255, 255, 255, 0.96) 60%);
  border: 1px solid rgba(20, 184, 166, 0.34);
}
.proof-answer h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.proof-answer p { font-size: 0.96rem; color: var(--ink-soft); }
.proof-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }
/* The evaluation selector shared these three rules until Stage 2 removed it. Only
   the proof case switcher uses them now. */
.proof-actions button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.45rem 1rem; cursor: pointer;
  border-radius: var(--r-full); border: 1px solid rgba(8, 145, 178, 0.34);
  background: rgba(255, 255, 255, 0.9); color: #0B4A5B;
  font-size: 0.86rem; font-weight: 700;
  transition: background 240ms ease, border-color 240ms ease, transform 240ms var(--ease-out);
}
.proof-actions button:hover { transform: translateY(-2px); background: rgba(34, 211, 238, 0.12); }
.proof-actions button[aria-pressed="true"] {
  background: var(--grad-teal-cta); color: #fff; border-color: transparent; box-shadow: var(--glow-teal);
}
.evidence-disclosure {
  margin-top: 1rem; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}
.evidence-disclosure > summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  min-height: 44px; padding: 0.6rem 0.95rem; font-size: 0.88rem; font-weight: 700; color: #0B4A5B;
}
.evidence-disclosure > summary::-webkit-details-marker { display: none; }
.evidence-disclosure > summary::before { content: "\F282"; font-family: "bootstrap-icons"; font-weight: 400; transition: transform 260ms var(--ease-out); }
.evidence-disclosure[open] > summary::before { transform: rotate(90deg); }
.evidence-copy { padding: 0 0.95rem 0.9rem; font-size: 0.9rem; color: var(--ink-soft); }

.proof-invitation {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.6vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--grad-ocean-12);
  border: 1px solid rgba(8, 145, 178, 0.3);
}
.proof-invitation h3 { font-size: clamp(1.25rem, 2.2vw, 1.65rem); }
.proof-invitation p { margin-top: 0.35rem; color: var(--ink-soft); }

/* ==========================================================================
   18. Languages
   ========================================================================== */
.language-story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(1.2rem, 2.6vw, 2.2rem); align-items: center; }
.language-map { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--hairline-teal); background: #fff; }
.language-map img { width: 100%; }
.language-map figcaption { padding: 0.85rem 1.1rem; font-size: 0.88rem; color: var(--ink-soft); background: rgba(255, 255, 255, 0.9); }
.language-fact-copy { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.language-fact-copy strong {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1;
  background: var(--grad-ocean-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.language-source { margin-top: 0.9rem; font-size: 0.84rem; color: var(--ink-quiet); }
.language-fact .btn { margin-top: 1.2rem; }

.language-modes { margin-top: clamp(1.8rem, 3.2vw, 2.6rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
.language-mode { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; }
.language-mode h3 { font-size: 1.14rem; display: flex; align-items: center; gap: 0.5rem; }
.language-mode h3 i { color: #0F766E; }
.language-mode > strong { font-size: 0.98rem; color: #0B4A5B; }
.language-mode p { font-size: 0.92rem; color: var(--ink-soft); }

.language-dialog {
  width: min(880px, calc(100vw - 32px)); max-height: 88vh; padding: 0;
  border: 1px solid var(--hairline-teal); border-radius: var(--r-xl);
  box-shadow: var(--shadow-elevated); color: var(--ink); background: #fff; overflow: hidden;
}
.language-dialog::backdrop { background: rgba(12, 39, 48, 0.82); backdrop-filter: blur(8px); }
.language-dialog-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.4rem; background: var(--grad-ocean-cta); color: #fff;
}
.language-dialog-header h2 { font-size: 1.2rem; color: #fff; }
.language-dialog-close {
  display: grid; place-items: center; width: 38px; height: 38px; cursor: pointer;
  border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 1rem;
  transition: background 220ms ease, transform 260ms var(--ease-out);
}
.language-dialog-close:hover { background: rgba(255, 255, 255, 0.36); transform: rotate(90deg); }
.language-dialog-body { padding: 1.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; overflow-y: auto; max-height: calc(88vh - 70px); }

/* Apple/touch usability (2026-08-16): svh keeps the census dialog clear of the
   collapsed Safari toolbar; the prefixed backdrop-filter covers Safari pre-18;
   coarse-pointer controls get the 44px floor. */
.language-dialog { max-height: 88svh; }
.language-dialog-body { max-height: calc(88svh - 70px); }
.language-dialog::backdrop { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.contact-modal-container { overscroll-behavior: contain; }
@media (pointer: coarse) {
  .contact-yn-btn { min-height: 44px; }
  .language-dialog-close { width: 44px; height: 44px; }
}
.language-pie {
  width: min(240px, 70%); aspect-ratio: 1; border-radius: 50%; margin: 0 auto 1rem;
  background: conic-gradient(
    var(--language-isizulu) 0 24.4%,
    var(--language-isixhosa) 24.4% 40.7%,
    var(--language-afrikaans) 40.7% 51.3%,
    var(--language-sepedi) 51.3% 61.3%,
    var(--language-english) 61.3% 70%,
    var(--language-other) 70% 100%);
  box-shadow: var(--shadow-soft);
}
.language-legend { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.language-legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; font-size: 0.88rem; }
.language-key { width: 14px; height: 14px; border-radius: 4px; background: var(--key-color); }
.language-chart-note { margin-top: 0.9rem; font-size: 0.86rem; color: var(--ink-soft); }
.language-table-wrap { overflow-x: auto; }
.language-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.language-table th, .language-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--hairline); }
.language-table thead th { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-quiet); }
.language-table tfoot th, .language-table tfoot td { font-weight: 700; border-bottom: none; }
.language-dialog-source { margin-top: 0.8rem; font-size: 0.8rem; color: var(--ink-quiet); }

/* ==========================================================================
   19. Operations, trust, evaluation
   ========================================================================== */
.control-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.2rem); margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.control-band > div {
  padding: 1.1rem 1.2rem; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
}
.control-band strong { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; margin-bottom: 0.3rem; }
.control-band strong i { color: #0B6480; }
.control-band span { font-size: 0.9rem; color: var(--ink-soft); }

.journey-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
.journey-step { display: flex; flex-direction: column; gap: 0.55rem; height: 100%; }
.stage-label {
  display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
  padding: 0.24rem 0.7rem; border-radius: var(--r-full);
  background: rgba(8, 145, 178, 0.12); border: 1px solid rgba(8, 145, 178, 0.32);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0B4A5B;
}
.stage-label.preview { background: rgba(45, 212, 191, 0.16); border-color: rgba(13, 148, 136, 0.36); color: #0B5F58; }
.stage-label.production { background: rgba(12, 74, 110, 0.12); border-color: rgba(12, 74, 110, 0.34); color: #0A3E5C; }
/* Band-scoped re-tint, same family as .band-deep .card and .band-deep .icon-tile.
   The three stage labels differentiate neutrally: no red and no warning treatment,
   because the disqualification band must read as candid rather than defensive. */
.band-deep .stage-label { background: rgba(127, 233, 220, 0.14); border-color: rgba(127, 233, 220, 0.34); color: #A7F3EA; }
.band-deep .stage-label.preview { background: rgba(45, 212, 191, 0.2); border-color: rgba(45, 212, 191, 0.44); color: #B8FBF1; }
.band-deep .stage-label.production { background: rgba(226, 244, 249, 0.1); border-color: rgba(226, 244, 249, 0.3); color: #E2F4F9; }
.journey-step h3 { font-size: 1.18rem; }
.journey-step p { font-size: 0.94rem; color: var(--ink-soft); }

/* Four-stage evaluation map. Each article is one self-contained diagram, and the
   repeated left-to-right grammar lets a buyer compare scope without reading a
   feature table. Teal carries the route; the dark core marks the intelligence
   layer consistently at every stage. */
.rollout-map {
  display: grid;
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
}
.rollout-stage {
  --rollout-accent: #0F766E;
  --rollout-accent-rgb: 15, 118, 110;
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 0.78fr) minmax(0, 3.22fr);
  overflow: hidden;
  border: 1px solid rgba(var(--rollout-accent-rgb), 0.28);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 36px rgba(8, 41, 48, 0.09);
}
.rollout-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  left: clamp(1.2rem, 2vw, 1.8rem);
  bottom: -1.8rem;
  width: 2px;
  height: 1.8rem;
  background: rgba(var(--rollout-accent-rgb), 0.38);
}
.rollout-stage-intro {
  padding: clamp(1.2rem, 2.3vw, 1.65rem);
  background:
    linear-gradient(145deg, rgba(var(--rollout-accent-rgb), 0.14), rgba(255, 255, 255, 0.5)),
    var(--sand);
  border-right: 1px solid rgba(var(--rollout-accent-rgb), 0.2);
}
.rollout-stage-icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  margin-bottom: 0.9rem;
  border-radius: var(--r-md);
  background: var(--rollout-accent);
  color: #F4FBFC;
  box-shadow: 0 7px 18px rgba(var(--rollout-accent-rgb), 0.2);
  font-size: 1.18rem;
}
.rollout-stage-name {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--rollout-accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rollout-stage-intro h3 {
  max-width: 13ch;
  font-size: clamp(1.35rem, 1.9vw, 1.72rem);
  color: var(--ink);
}
.rollout-stage-intro p {
  margin-top: 0.65rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}
.rollout-stage-body {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.45rem);
}
.rollout-stage-disclosure {
  min-width: 0;
  margin-top: 0;
  border-top: 0;
}
.rollout-stage-disclosure:not([open]) {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2vw, 1.45rem);
  background: linear-gradient(145deg, rgba(var(--rollout-accent-rgb), 0.025), rgba(var(--rollout-accent-rgb), 0.075));
}
.rollout-stage-disclosure > summary {
  width: 100%;
  margin: 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(var(--rollout-accent-rgb), 0.25);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.86);
  color: var(--rollout-accent);
  box-shadow: 0 8px 24px rgba(8, 41, 48, 0.07);
}
.rollout-stage-disclosure[open] > summary {
  width: auto;
  margin: clamp(0.8rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.45rem) 0;
}
.rollout-stage-disclosure > summary:hover {
  border-color: rgba(var(--rollout-accent-rgb), 0.48);
  color: var(--ink);
}
.rollout-stage-disclosure .rollout-stage-body { padding-top: 0.8rem; }
.rollout-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.35vw, 1rem);
}
.rollout-node {
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid rgba(var(--rollout-accent-rgb), 0.18);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, #FFFFFF, rgba(var(--rollout-accent-rgb), 0.045));
}
.rollout-node:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(clamp(0.75rem, 1.35vw, 1rem) * -1);
  width: clamp(0.75rem, 1.35vw, 1rem);
  transform: translateY(-50%);
  color: var(--rollout-accent);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.rollout-node-label {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin-bottom: 0.55rem;
  color: var(--rollout-accent);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.085em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rollout-node h4 {
  font-family: var(--sans);
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 800;
  line-height: 1.32;
  text-wrap: pretty;
}
.rollout-node p {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.52;
}
.rollout-node--core {
  border-color: rgba(12, 74, 110, 0.32);
  background: linear-gradient(145deg, #0C4A6E 0%, #0E6572 55%, #0F766E 100%);
  box-shadow: 0 9px 24px rgba(8, 65, 74, 0.16);
  color: #F4FBFC;
}
.rollout-node--core .rollout-node-label,
.rollout-node--core h4 { color: #F4FBFC; }
.rollout-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding: 0;
  list-style: none;
}
.rollout-tags li {
  max-width: 100%;
  padding: 0.25rem 0.48rem;
  border: 1px solid rgba(var(--rollout-accent-rgb), 0.2);
  border-radius: var(--r-sm);
  background: rgba(var(--rollout-accent-rgb), 0.07);
  color: #214852;
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.3;
}
.rollout-node--core .rollout-tags li {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.11);
  color: #F4FBFC;
}
.rollout-gate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem 0.8rem;
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--rollout-accent);
  border-radius: var(--r-sm);
  background: rgba(var(--rollout-accent-rgb), 0.075);
}
.rollout-gate > span,
.rollout-gate > div > span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--rollout-accent);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.rollout-gate strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.42;
}
.rollout-gate--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rollout-gate--split > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.7rem;
}
.rollout-gate--split > div + div {
  padding-left: 0.85rem;
  border-left: 1px solid rgba(var(--rollout-accent-rgb), 0.24);
}
.rollout-gate--live {
  background: linear-gradient(90deg, rgba(var(--rollout-accent-rgb), 0.11), rgba(8, 145, 178, 0.08));
}

.trust-detail { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.trust-boundaries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.2rem); margin-top: 1.3rem; }
.trust-boundary {
  padding: 1.05rem 1.15rem; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--hairline-teal);
  box-shadow: var(--shadow-soft);
}
.trust-boundary strong { display: flex; align-items: center; gap: 0.45rem; font-size: 0.99rem; margin-bottom: 0.25rem; }
.trust-boundary strong i { color: #0F766E; }
.trust-boundary span { font-size: 0.9rem; color: var(--ink-soft); }

.assurance-strip { background: var(--grad-deep); }
.assurance-inner {
  width: var(--page); margin-inline: auto; padding-block: clamp(1.4rem, 2.6vw, 2rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.assurance-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.assurance-chips span {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.8rem; border-radius: var(--r-full);
  background: rgba(127, 233, 220, 0.12); border: 1px solid rgba(127, 233, 220, 0.3);
  font-size: 0.82rem; font-weight: 600; color: #E4F7FA;
}
.assurance-chips i { color: #7FE9DC; }
.assurance-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 700; color: #A7F3EA; }

.diligence-card { grid-column: 1 / -1; }
.diligence-card h3 { font-size: 1.3rem; margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.55rem; }
.diligence-card h3 i { color: #0F766E; }
.evidence-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.4rem; }
.evidence-list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.94rem; color: var(--ink-soft); }
.evidence-list li::before { content: "\F26E"; font-family: "bootstrap-icons"; color: #0F766E; flex: 0 0 auto; }
.diligence-action { margin-top: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.diligence-action p { font-size: 0.86rem; color: var(--ink-quiet); }

/* The selector console that used to sit beside these actions was removed in Stage 2
   and replaced by /chatterbox_iaas_evaluate_ver2. The action row itself stays: it
   carries the later-stage evaluation CTA and the request-example control. */
.evaluation-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.evaluation-actions small { flex: 1 1 100%; font-size: 0.84rem; color: var(--ink-quiet); }

/* ==========================================================================
   20. Partners, final CTA, footer
   ========================================================================== */
.partners-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(20, 184, 166, 0.05) 100%);
  border-top: 1px solid rgba(20, 184, 166, 0.16);
  border-bottom: 1px solid rgba(20, 184, 166, 0.16);
  padding-block: clamp(2.4rem, 4vw, 3.2rem);
  text-align: center;
}
.partners-label {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;
  /* Darkened with the ambient field: this label sits over the strongest blob wash. */
  color: #084454; margin: 0 auto 1.8rem; max-width: none;
}
.partners-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.6rem 2.8rem; }
.partners-logos img {
  height: 58px; width: auto; object-fit: contain;
  opacity: 0.45; filter: grayscale(100%);
  transition: opacity 380ms var(--ease-out), filter 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.partners-logos img:hover { opacity: 1; filter: grayscale(0%); transform: scale(1.05); }

.discussion { background: var(--grad-deep); }
.discussion-inner {
  width: var(--page); margin-inline: auto; padding-block: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center;
}
.discussion h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: #F4FBFC; max-width: 18ch; }
.discussion-copy p { margin-top: 0.8rem; color: rgba(226, 244, 249, 0.86); }
.discussion-action { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.discussion-action small { font-size: 0.84rem; color: rgba(210, 234, 240, 0.76); }

.site-footer { background: #08222C; color: rgba(226, 244, 249, 0.8); padding-block: 2.2rem; }
.footer-inner {
  width: var(--page); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem;
}
.site-footer .wordmark {
  background: linear-gradient(135deg, #7FE9DC 0%, #2DD4BF 60%, #9BEBF5 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.site-footer .wordmark .reg { -webkit-text-fill-color: #7FE9DC; color: #7FE9DC; }
.site-footer .brand-signature { color: rgba(226, 244, 249, 0.72); }
.footer-note { font-size: 0.92rem; color: rgba(226, 244, 249, 0.76); }
.footer-actions { display: flex; align-items: center; gap: 0.6rem; }
.footer-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 40px; padding: 0.4rem 0.9rem; cursor: pointer;
  border-radius: var(--r-full); border: 1px solid rgba(127, 233, 220, 0.34);
  background: rgba(127, 233, 220, 0.1); color: #C6F7F0;
  font-size: 0.85rem; font-weight: 700;
  transition: background 240ms ease, border-color 240ms ease;
}
.footer-btn:hover { background: rgba(127, 233, 220, 0.2); border-color: rgba(127, 233, 220, 0.62); }
.footer-legal {
  width: var(--page); margin-inline: auto; margin-top: 1.5rem; padding-top: 1.15rem;
  border-top: 1px solid rgba(127, 233, 220, 0.16);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1.4rem; font-size: 0.85rem;
}
.footer-copy { color: rgba(226, 244, 249, 0.76); }
.footer-links { display: flex; align-items: center; gap: 1.4rem; }
.footer-links a {
  color: rgba(226, 244, 249, 0.88); text-decoration: none;
  border-bottom: 1px solid rgba(127, 233, 220, 0.34);
  transition: color 220ms ease, border-color 220ms ease;
}
.footer-links a:hover { color: #C6F7F0; border-bottom-color: rgba(127, 233, 220, 0.82); }

/* ==========================================================================
   21. FAQ accordions
   ==========================================================================
   The modal shell that used to open these was removed in Stage 2: the overlay,
   container, header, category rail and scrolling content pane all went with it,
   along with the faqSlideIn keyframe. What is left is the accordion, which is
   shared by the master page's four-question preview and by every question on
   /chatterbox_iaas_faq_ver2. */
.faq-section { margin-bottom: 2rem; }
.faq-section:last-child { margin-bottom: 1rem; }
.faq-section-title {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 1.14rem; margin: 0 0 0.8rem; padding-bottom: 0.65rem;
  border-bottom: 2px solid rgba(45, 212, 191, 0.24);
}
.faq-section-title i { color: #0F766E; font-size: 1.1rem; }
.faq-item {
  border: 1px solid #E2E8F0; border-radius: var(--r-md); margin-bottom: 0.5rem; overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.faq-item:hover { border-color: rgba(45, 212, 191, 0.44); }
.faq-item.is-open { border-color: var(--turquoise); box-shadow: 0 2px 10px rgba(8, 10, 12, 0.14); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 0.9rem 1.15rem; cursor: pointer; text-align: left;
  background: none; border: none; font-family: var(--sans);
  font-size: 0.94rem; font-weight: 600; color: var(--ink);
}
.faq-chevron { flex-shrink: 0; font-size: 0.82rem; color: #7A93A0; transition: transform 300ms var(--ease-out), color 300ms ease; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); color: #0F766E; }
/* Collapse with grid-template-rows rather than max-height, so no layout
   property is animated and a tall answer is never clipped. */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 350ms var(--ease-out); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-body { overflow: hidden; min-height: 0; padding-inline: 1.15rem; }
.faq-answer-body > :last-child { margin-bottom: 1rem; }
.faq-answer p { font-size: 0.9rem; color: #4A6672; line-height: 1.7; margin: 0 0 0.5rem; max-width: none; }
.faq-answer ul { font-size: 0.9rem; color: #4A6672; line-height: 1.7; margin: 0.25rem 0 0; padding-left: 1.4rem; }
.faq-answer li { margin-bottom: 0.2rem; }
.faq-badge {
  display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.16rem 0.6rem; border-radius: 6px; margin-right: 0.4rem; vertical-align: middle;
}
.faq-badge-preview { background: rgba(8, 145, 178, 0.14); color: #0A4F66; }
.faq-badge-agreed { background: rgba(45, 212, 191, 0.18); color: #0B5F58; }

/* On the FAQ page each question is a real heading wrapping the existing button, so
   a screen-reader user gets a navigable list of questions instead of a wall of
   buttons. The button already carries its own type, weight and layout, so the
   heading only has to stop imposing the serif display face and its tight leading.
   The master page's four-question preview keeps its plain buttons: it is a preview
   inside an existing heading structure, not the reference list. */
.faq-item h3 { font: inherit; line-height: inherit; }

/* FAQ page category index. Real anchors, not controls: every category is a section
   on the same page, so the browser's own history handles going back, and a shared
   link to a category behaves exactly like a shared link to a question. */
.faq-index { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faq-index a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.45rem 0.95rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(8, 145, 178, 0.3);
  font-size: 0.85rem; font-weight: 700; color: #0B4A5B; text-decoration: none;
  transition: background 240ms ease, border-color 240ms ease, transform 240ms var(--ease-out);
}
.faq-index a:hover { transform: translateY(-2px); background: rgba(34, 211, 238, 0.12); border-color: rgba(8, 145, 178, 0.6); }
.faq-index i { font-size: 1rem; color: #0F766E; }
.faq-index-count { font-weight: 600; color: var(--ink-quiet); }

/* ==========================================================================
   22. Responsive
   ========================================================================== */
.orbit { --r: 172px; }

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-band, .trust-boundaries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow-link { padding-block: 0.5rem; }
  .flow-link i { transform: rotate(90deg); display: block; }
  .flow-return { justify-content: flex-end; }
  .rollout-stage { grid-template-columns: minmax(0, 1fr); }
  .rollout-stage-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.9rem;
    border-right: 0;
    border-bottom: 1px solid rgba(var(--rollout-accent-rgb), 0.2);
  }
  .rollout-stage-icon { grid-row: 1 / span 3; margin-bottom: 0; }
  .rollout-stage-name { margin-top: 0.1rem; }
  .rollout-stage-intro h3 { max-width: none; }
  .rollout-stage-intro p { grid-column: 2; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { order: -1; height: clamp(330px, 62vw, 400px); }
  .orbit { --r: 148px; }
  .orbit-core { --ring-1: -7px; --ring-2: -16px; --ring-3: -25px; }
  /* Single column here, so the headline gets the full page measure rather than a
     narrower one. Widening cuts lines instead of adding them. */
  .hero h1 { max-width: 26ch; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .language-story { grid-template-columns: minmax(0, 1fr); }
  .proof-layout { grid-template-columns: minmax(0, 1fr); }
  .language-modes { grid-template-columns: minmax(0, 1fr); }
  .journey-track { grid-template-columns: minmax(0, 1fr); }
  .discussion-inner { grid-template-columns: minmax(0, 1fr); }
  .disqualify-inner { grid-template-columns: minmax(0, 1fr); }
  .disqualify-note { grid-column: 1; }
  .rollout-flow { grid-template-columns: minmax(0, 1fr); }
  .rollout-node:not(:last-child)::after {
    content: "\2193";
    top: auto;
    right: auto;
    bottom: calc(clamp(0.75rem, 1.35vw, 1rem) * -1);
    left: 50%;
    height: clamp(0.75rem, 1.35vw, 1rem);
    transform: translateX(-50%);
    line-height: clamp(0.75rem, 1.35vw, 1rem);
  }
}

@media (max-width: 860px) {
  :root { --page: min(1180px, calc(100% - 36px)); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .timing-path { grid-template-columns: minmax(0, 1fr); }
  .evidence-list { grid-template-columns: minmax(0, 1fr); }
  .capability-grid { grid-template-columns: minmax(0, 1fr); }
  .memory-callout, .problem-summary { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile progressive disclosure for the workflow examples. Every name and
   outcome stays visible. The repeated five-step path and evidence open on
   request, one case at a time. */
@media (max-width: 780px) {
  .control-band, .trust-boundaries { grid-template-columns: minmax(0, 1fr); }
  .workflow-mobile-summary { display: block; }
  .workflow-case-toggle { display: inline-flex; }
  .workflow-case-detail { display: none; }
  .workflow-case.is-open .workflow-case-detail { display: block; }
  .workflow-case-flow { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .workflow-stage { font-size: 0.85rem; }
  .workflow-result { grid-template-columns: minmax(0, 1fr); }
  .language-dialog-body { grid-template-columns: minmax(0, 1fr); }
  .assurance-inner { flex-direction: column; align-items: flex-start; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .rollout-gate,
  .rollout-gate--split,
  .rollout-gate--split > div { grid-template-columns: minmax(0, 1fr); }
  .rollout-gate--split > div + div {
    padding-top: 0.7rem;
    padding-left: 0;
    border-top: 1px solid rgba(var(--rollout-accent-rgb), 0.24);
    border-left: 0;
  }
}

/* The hero ring needs room to read. Below tablet it is dropped rather than
   shrunk, and the static language row takes over the job of showing that a
   customer can arrive in their own language. */
@media (max-width: 767.98px) {
  .hero-visual { display: none; }
  .hero-languages { display: flex; }
}

@media (max-width: 700px) {
  .proof-invitation { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
  :root { --page: min(1180px, calc(100% - 28px)); }
  .brand-signature { display: none; }
  .btn { width: 100%; }
  .nav-panel .btn, .cta-row .btn { width: 100%; }
  .partners-logos img { height: 44px; }
  .partners-logos { gap: 1.2rem 1.8rem; }
}

/* ==========================================================================
   23. Contact modal
   ========================================================================== */
.contact-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(6, 26, 34, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.contact-modal-overlay[hidden] { display: none; }
.contact-modal-container {
  width: min(520px, 100%); min-height: 460px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: #FFFFFF; border-radius: var(--r-lg);
  box-shadow: 0 30px 70px rgba(8, 10, 12, 0.34); display: flex; flex-direction: column;
}
.contact-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.5rem; color: #fff;
  background: linear-gradient(135deg, #0B4F4A 0%, #0E6B63 55%, #0F766E 100%);
}
.contact-modal-header h2 { display: flex; align-items: center; gap: 0.55rem; font-size: 1.25rem; color: #fff; }
.contact-subtitle { margin: 0.25rem 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.92); }
.contact-modal-close {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; cursor: pointer;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 1.05rem;
  transition: background 220ms ease, transform 280ms var(--ease-out);
}
.contact-modal-close:hover { background: rgba(255, 255, 255, 0.36); transform: rotate(90deg) scale(1.08); }
.contact-form { padding: 1.25rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.95rem; flex: 1 1 auto; }
.contact-field { display: flex; flex-direction: column; gap: 0.35rem; }
.contact-field label { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.contact-required { color: #B3283F; }
.contact-optional { font-weight: 500; color: var(--ink-quiet); }
.contact-field input,
.contact-field textarea {
  /* 16px floor: anything smaller makes iOS Safari zoom the page on focus. */
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.65rem 0.8rem; border-radius: var(--r-sm);
  border: 1px solid rgba(8, 145, 178, 0.34); background: #FBFDFD;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.contact-field textarea { resize: vertical; min-height: 104px; }
.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
  outline: none; border-color: #0F766E; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22);
}
.contact-field input[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] { border-color: #B3283F; }
/* Honeypot: parked off-screen rather than display:none, because some bots skip
   fields that are not rendered at all. */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-status { margin: 0; font-size: 0.88rem; min-height: 1.2em; color: var(--ink-soft); }
.contact-status.is-error { color: #96203A; font-weight: 600; }
.contact-status.is-ok { color: #0B5F58; font-weight: 600; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.contact-actions .btn { flex: 1 1 auto; justify-content: center; }
.contact-note { margin: 0; font-size: 0.78rem; color: var(--ink-quiet); }
.contact-yn-field {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 0.65rem 0.85rem;
  background: #F8FAFA; border: 1px solid rgba(15, 118, 110, 0.16); border-radius: var(--r-sm);
}
.contact-yn-question { font-size: 0.84rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.contact-yn-options { display: flex; gap: 0.5rem; margin-top: 0.1rem; }
.contact-yn-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.85rem;
  font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); background: #FFFFFF;
  border: 1px solid rgba(8, 145, 178, 0.28); border-radius: var(--r-xs, 6px); cursor: pointer;
  user-select: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.contact-yn-btn:hover { border-color: #0F766E; color: #0F766E; }
.contact-yn-btn input[type="radio"] { accent-color: #0F766E; margin: 0; cursor: pointer; }
/* Kept as two rules: a selector list containing :has() is dropped whole by
   pre-15.4 iOS Safari, which would also kill the .is-active JS fallback. */
.contact-yn-btn.is-active { background: #0F766E; color: #FFFFFF; border-color: #0F766E; }
.contact-yn-btn:has(input:checked) { background: #0F766E; color: #FFFFFF; border-color: #0F766E; }

/* ---------- Multi-Screen Step Wizard ---------- */
.contact-wizard-progress {
  height: 4px; background: rgba(15, 118, 110, 0.12); position: relative; overflow: hidden;
}
.wizard-progress-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #0B4F4A, #0F766E, #0D9488);
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-screen {
  display: none; flex-direction: column; flex: 1 1 auto; justify-content: space-between; gap: 0.95rem;
  opacity: 0; transform: translateX(16px);
  transition: opacity 240ms ease, transform 260ms var(--ease-out);
}
.wizard-screen.is-active { display: flex; opacity: 1; transform: translateX(0); }
.wizard-screen.is-leaving-left { opacity: 0; transform: translateX(-16px); }
.wizard-screen.is-leaving-right { opacity: 0; transform: translateX(16px); }

.q-header-block {
  min-height: 4.2rem; display: flex; flex-direction: column; justify-content: flex-start;
}
.q-counter {
  font-size: 0.78rem; font-weight: 700; color: #0F766E; text-transform: uppercase; letter-spacing: 0.04em;
}

.wizard-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 0.4rem; }
.btn-text {
  background: none; border: none; color: var(--ink-soft); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; padding: 0.35rem 0.55rem; margin-left: auto; transition: color 180ms ease;
}
.btn-text:hover { color: #0F766E; text-decoration: underline; }

.contact-form.is-sending .contact-actions .btn { opacity: 0.6; pointer-events: none; }
@media (max-width: 460px) {
  .contact-modal-container { min-height: 420px; max-height: 96dvh; }
  .contact-actions .btn, .wizard-actions .btn { width: 100%; }
  .btn-text { margin-left: 0; margin-top: 0.2rem; text-align: center; width: 100%; }
}


/* ===== CSI PAGE OVERRIDES (former override-only sheet) ===== */

/* chatterbox_csi_home_ver2.css — page-specific overrides ONLY.
   Load AFTER ~/css/chatterbox_iaas_home_ver2.css, which carries the shared
   landing system used by csi_home, iaas_home_ver2, after_hours_ver2,
   evaluate_ver2, trust_ver2 and faq_ver2. Everything byte-identical to that
   sheet was removed on 2026-08-14; what remains is only what csi_home
   genuinely differs on. Equal specificity means these win by load order —
   do not add !important, and do not re-copy shared rules back in here. */

/* ==========================================================================
   1. Ambient Field, Living Motion & Global Halo Lighting
   ========================================================================== */

/* Enhanced ambient fluid drift */
.ambient .blob {
  opacity: 0.55;
  filter: blur(80px);
  will-change: transform, opacity;
}

.ambient .blob-1 {
  animation: ambient-drift-1 18s ease-in-out infinite alternate;
}

.ambient .blob-2 {
  animation: ambient-drift-2 22s ease-in-out infinite alternate;
}

.ambient .blob-3 {
  animation: ambient-drift-3 26s ease-in-out infinite alternate;
}

.ambient .blob-4 {
  animation: ambient-drift-4 20s ease-in-out infinite alternate;
}

@keyframes ambient-drift-1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, 30px, 0) scale(1.1); }
  100% { transform: translate3d(-30px, 60px, 0) scale(0.95); }
}

@keyframes ambient-drift-2 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-50px, 45px, 0) scale(1.08); }
  100% { transform: translate3d(35px, -30px, 0) scale(0.92); }
}

@keyframes ambient-drift-3 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(60px, -40px, 0) scale(1.12); }
  100% { transform: translate3d(-40px, 35px, 0) scale(0.96); }
}

@keyframes ambient-drift-4 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-35px, -50px, 0) scale(1.05); }
  100% { transform: translate3d(50px, 40px, 0) scale(1.15); }
}

/* Mobile perf gate (2026-08-16): four 48-62vw blobs at blur(80px) under a
   blend mode composite continuously; halve the blur and park the drift on
   phones so scrolling stays smooth on older iPhones. */
@media (max-width: 767px) {
  .ambient .blob {
    filter: blur(44px);
  }
  .ambient .blob-1,
  .ambient .blob-2,
  .ambient .blob-3,
  .ambient .blob-4 {
    animation: none;
  }
}

/* Eyebrows: Chatterbox Green */
.eyebrow,
.section-head .eyebrow {
  color: #0D9488 !important;
}

.eyebrow i,
.section-head .eyebrow i {
  color: #0D9488 !important;
}

/* ==========================================================================
   2. Interactive Card Spotlight & Specular Glassmorphism Base
   ========================================================================== */

/* Universal interactive card spotlight reflection */
.csi-problem-card,
.pillar-card,
.csi-solution-card,
details.csi-channel-card,
.rollout-step,
.csi-not-card,
.csi-use-case-card,
.answer-choice {
  position: relative;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.95), 0 4px 20px -2px rgba(12, 39, 48, 0.05), 0 12px 32px -4px rgba(12, 39, 48, 0.04) !important;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 280ms ease !important;
}

/* Cursor spotlight overlay */
.csi-problem-card::before,
.pillar-card::before,
.csi-solution-card::before,
details.csi-channel-card::before,
.rollout-step::before,
.csi-not-card::before,
.csi-use-case-card::before,
.answer-choice::before,
.csi-voice-card::before,
.csi-sms-card::before,
.csi-proof-tab::before,
.csi-memory-strip::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.14), transparent 45%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .csi-problem-card:hover::before,
  .pillar-card:hover::before,
  .csi-solution-card:hover::before,
  details.csi-channel-card:hover::before,
  .rollout-step:hover::before,
  .csi-not-card:hover::before,
  .csi-use-case-card:hover::before,
  .answer-choice:hover::before,
  .csi-voice-card:hover::before,
  .csi-sms-card:hover::before,
  .csi-proof-tab:hover::before,
  .csi-memory-strip:hover::before {
    opacity: 1;
  }
}

/* ==========================================================================
   3. Hero Section Dynamic Polish, Shimmer & Floating Motion
   ========================================================================== */

/* Subtle floating bob for hero visual */
.hero-visual {
  animation: hero-visual-float 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes hero-visual-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Core mark pulsating aura */
.orbit-core {
  position: relative;
  box-shadow: 0 0 26px rgba(13, 148, 136, 0.35);
  animation: orbit-core-halo 4s ease-in-out infinite;
}

@keyframes orbit-core-halo {
  0%, 100% {
    box-shadow: 0 0 24px rgba(13, 148, 136, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  }
  50% {
    box-shadow: 0 0 42px rgba(45, 212, 191, 0.6), 0 0 70px rgba(13, 148, 136, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  }
}

/* Hero Emphasis: Vivid Bold Chatterbox Blue */
.hero-emphasis {
  position: relative;
  display: inline;
  font-weight: 700;
  background: linear-gradient(135deg, #0369A1 0%, #0284C7 40%, #38BDF8 80%, #0284C7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(2, 132, 199, 0.32)) !important;
}

.hero h1 {
  max-width: 36ch;
  font-size: clamp(1.85rem, 3.3vw, 2.7rem);
  color: var(--ink, #0C2730) !important;
}

.hero h1 .hero-compound {
  white-space: nowrap;
}

.hero-lede {
  margin-top: 1.35rem;
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  color: var(--ink, #06181F) !important;
  max-width: 52ch;
  font-weight: 500;
  line-height: 1.55;
}

.hero-lede .hero-emphasis {
  font-weight: 700;
}

/* Hero Lede Keywords: Greenish-Turquoise-Blue with Specular Shading */
.hero-kw-turquoise,
.hero-kw-blue {
  font-weight: 800 !important;
  display: inline !important;
  background: linear-gradient(135deg, #0F766E 0%, #0D9488 35%, #14B8A6 70%, #06B6D4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(13, 148, 136, 0.32)) !important;
  letter-spacing: -0.01em !important;
}

/* Primary CTA Button Specular Sheen & Halo Glow */
.btn-primary {
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(13, 148, 136, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background 240ms ease !important;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(13, 148, 136, 0.48), 0 0 16px rgba(45, 212, 191, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

.btn-primary:hover::after {
  opacity: 1;
  animation: btn-sheen-sweep 1.2s ease-in-out infinite;
}

.btn-primary:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.3) !important;
}

@keyframes btn-sheen-sweep {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(380%) rotate(25deg); }
}

/* Glass CTA Button Enhancements */
.btn-glass {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(12, 39, 48, 0.14) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 2px 12px rgba(12, 39, 48, 0.05) !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background 240ms ease !important;
}

.btn-glass:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(13, 148, 136, 0.4) !important;
  box-shadow: inset 0 1px 1px #ffffff, 0 6px 20px rgba(13, 148, 136, 0.15) !important;
}

.btn-glass:active {
  transform: translateY(1px) scale(0.98) !important;
}

/* Hero Language Pills */
.hero-languages li {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(13, 148, 136, 0.22) !important;
  box-shadow: 0 2px 10px rgba(12, 39, 48, 0.04) !important;
  transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}

.hero-languages li:hover {
  transform: translateY(-2px) !important;
  background: rgba(214, 246, 240, 0.9) !important;
  border-color: #0D9488 !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.18) !important;
}

/* ==========================================================================
   4. Customer-Service Triangle Problem Cards (#problem)
   ========================================================================== */

.csi-problem-triangle {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 80% !important;
  max-width: 900px !important;
  margin-inline: auto !important;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}

.csi-problem-card {
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  padding: 0 !important;
  border: 1.5px solid rgba(13, 148, 136, 0.22) !important;
  border-radius: var(--r-lg, 1.2rem);
  overflow: hidden;
  background: #ffffff !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, border-color 240ms ease !important;
}

.csi-problem-card:hover,
details.csi-problem-card[open] {
  border-color: rgba(13, 148, 136, 0.6) !important;
  box-shadow: 0 14px 34px rgba(12, 73, 86, 0.14), 0 0 28px rgba(45, 212, 191, 0.24), inset 0 1px 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-4px) !important;
}

.csi-problem-card--full,
.csi-connecting-summary {
  grid-column: 4 / span 6;
}

.csi-connecting-summary {
  margin-top: 0;
}

.triangle-label {
  display: inline-flex;
  margin-bottom: 0.55rem;
  color: var(--red-deep, #B4234A);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.csi-problem-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: clamp(1.2rem, 2.2vw, 1.6rem) !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none;
}

.csi-problem-summary::-webkit-details-marker {
  display: none !important;
}

.csi-problem-head {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  gap: 0.35rem;
  text-align: center !important;
  margin-inline: auto !important;
}

.csi-problem-head h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 750;
  color: var(--ink, #06181F);
  text-align: center !important;
}

.csi-problem-chevron {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.1);
  color: #0D9488;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}

.csi-problem-card[open] .csi-problem-chevron {
  transform: rotate(180deg);
  background: #0D9488;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
}

.csi-problem-body {
  padding: 0 clamp(1.2rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.6rem);
  border-top: 1px solid rgba(13, 148, 136, 0.12);
  margin-top: 0.2rem;
  padding-top: 1rem;
  text-align: left;
}

.csi-problem-list {
  margin: 0.4rem 0 0;
  padding-left: 1.25rem;
  list-style-type: disc;
}

.csi-problem-list li {
  margin-bottom: 0.55rem;
  color: var(--ink-soft, #4A5568);
  font-size: 0.93rem;
  line-height: 1.5;
}

.csi-problem-list li:last-child {
  margin-bottom: 0;
}

.csi-problem-cost {
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(180, 35, 74, 0.22);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink, #06181F);
}

.csi-problem-cost strong {
  color: var(--red-deep, #B4234A);
  font-weight: 750;
}

/* Expandable Language Summary Accordion */
details.csi-connecting-summary {
  padding: 0 !important;
  overflow: hidden;
  display: block !important;
  border-color: rgba(236, 72, 106, 0.25) !important;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.95), 0 4px 20px rgba(180, 35, 74, 0.06) !important;
}

details.csi-connecting-summary[open] {
  border-color: rgba(236, 72, 106, 0.45) !important;
  box-shadow: inset 0 1px 1px 0 #ffffff, 0 12px 30px rgba(180, 35, 74, 0.12) !important;
}

.csi-lang-summary-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.2vw, 1.6rem) !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none;
}

.csi-lang-summary-head::-webkit-details-marker {
  display: none !important;
}

.csi-lang-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.csi-lang-head strong {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 750;
  color: var(--ink, #06181F);
}

.csi-lang-body {
  padding: 0 clamp(1.2rem, 2.2vw, 1.6rem) clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.2vw, 1.6rem);
  border-top: 1px solid rgba(236, 72, 106, 0.2);
  margin-top: 0.2rem;
  padding-top: 0.85rem;
}

.csi-lang-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .csi-problem-triangle {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .csi-problem-card,
  .csi-problem-card--full {
    grid-column: auto !important;
  }
  .csi-connecting-summary {
    grid-column: 1 / -1 !important;
  }
}

/* ==========================================================================
   5. Solution Topology Enhancements (#solution)
   ========================================================================== */

.topology-core-ring {
  box-shadow: 0 0 32px rgba(13, 148, 136, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  animation: topology-core-pulse 4s ease-in-out infinite;
}

@keyframes topology-core-pulse {
  0%, 100% {
    box-shadow: 0 0 28px rgba(13, 148, 136, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 48px rgba(45, 212, 191, 0.55), 0 0 70px rgba(13, 148, 136, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.95);
    transform: scale(1.02);
  }
}

.topology-channel {
  transition: transform 220ms var(--ease-out), background-color 220ms ease, box-shadow 220ms ease !important;
}

.topology-channel:hover {
  transform: translateX(3px) !important;
  background: rgba(214, 246, 240, 0.8) !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.12) !important;
}

/* ==========================================================================
   6. Alternatives (.answer-choice) Grid & Pillars (#how-it-works)
   ========================================================================== */

/* Alternatives (.answer-choice) grid stabilization: prevent full-width expansion reflow jump */
.answer-choice[open] {
  grid-column: auto;
  border-color: rgba(8, 145, 178, 0.52);
  background: rgba(250, 254, 254, 0.98);
  box-shadow: inset 0 1px 1px #ffffff, 0 18px 38px rgba(12, 73, 86, 0.13), 0 0 20px rgba(34, 211, 238, 0.1) !important;
}

.answer-choice-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 1.05rem;
  border-top: 1px solid var(--answer-accent-border);
  animation: answer-choice-reveal 260ms var(--ease-out) both;
}

.answer-choice-detail > div {
  padding: 0.85rem 0;
}

.answer-choice-detail > .answer-choice-limit {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.85rem;
  border-left: 0;
  border-top: 1px solid var(--answer-accent-border);
}

.answer-choice-label {
  display: block;
  margin-bottom: 0.38rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  color: #0B5F73;
}

/* One Intelligence (.pillar-card) - hide sub-text by default, reveal on hover/active */
.answer-pillars {
  align-items: stretch;
}

.answer-pillars .pillar-card {
  min-height: clamp(82px, 9vw, 94px) !important;
  height: 100% !important;
}

.answer-pillars .pillar-card p {
  display: none;
  grid-column: 2;
  margin-top: 0.35rem;
  animation: pillar-text-reveal 240ms var(--ease-out) both;
}

@keyframes pillar-text-reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.answer-pillars .pillar-card.is-active p,
.answer-pillars .pillar-card:hover p {
  display: block;
}

.answer-pillars .pillar-card.is-active,
.answer-pillars .pillar-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(13, 148, 136, 0.6) !important;
  box-shadow: inset 0 1px 1px #ffffff, 0 16px 36px rgba(12, 80, 71, 0.14), 0 0 20px rgba(45, 212, 191, 0.12) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(214, 246, 240, 0.92)) !important;
}

.answer-pillars .pillar-card.is-active > .icon-tile,
.answer-pillars .pillar-card:hover > .icon-tile {
  transform: scale(1.05);
  background: #0D9488 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4) !important;
}

.answer-pillars .pillar-card.is-active .pillar-step,
.answer-pillars .pillar-card:hover .pillar-step {
  background: #0D9488;
  color: #fff;
  border-color: #0D9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

/* Pillar card mobile expand/collapse toggle button */
.pillar-toggle {
  display: none;
}

@media (max-width: 768px), (hover: none) {
  .pillar-toggle {
    display: grid;
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--hairline-teal, rgba(12, 39, 48, 0.18));
    border-radius: var(--r-full, 9999px);
    background: rgba(255, 255, 255, 0.85);
    color: var(--ocean-deep, #0C2730);
    padding: 0;
    cursor: pointer;
    font-size: 0.82rem;
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 240ms ease, color 240ms ease;
  }

  .answer-pillars .pillar-step {
    right: 3.1rem !important; /* Make room for toggle button on mobile */
  }

  .answer-pillars .pillar-card.is-active .pillar-toggle i,
  .pillar-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
  }

  .answer-pillars .pillar-card.is-active .pillar-toggle,
  .pillar-toggle[aria-expanded="true"] {
    background: #0D9488;
    color: #fff;
    border-color: #0D9488;
  }
}

/* Chatterbox handles all three sides solution cards */
.csi-solution-block {
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(13, 148, 136, 0.35);
  border-radius: var(--r-xl, 1.5rem);
  background: radial-gradient(120% 120% at 50% 10%, rgba(45, 212, 191, 0.28) 0%, rgba(20, 184, 166, 0.16) 45%, rgba(204, 251, 241, 0.55) 80%, rgba(240, 253, 250, 0.9) 100%), #f0fdfa;
  box-shadow: 0 0 36px rgba(45, 212, 191, 0.3), 0 20px 48px rgba(13, 148, 136, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
}

.csi-solution-title {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-family: var(--sans);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.csi-solution-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

details.csi-solution-card {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  border: 1.5px solid rgba(13, 148, 136, 0.22) !important;
  border-radius: var(--r-lg, 1.2rem) !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 1px #ffffff, 0 6px 20px rgba(12, 73, 86, 0.05) !important;
  overflow: hidden !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, border-color 240ms ease !important;
}

details.csi-solution-card:hover,
details.csi-solution-card[open] {
  transform: translateY(-4px) !important;
  border-color: rgba(13, 148, 136, 0.6) !important;
  box-shadow: 0 14px 34px rgba(12, 73, 86, 0.14), 0 0 28px rgba(45, 212, 191, 0.24), inset 0 1px 1px #ffffff !important;
}

summary.csi-solution-summary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: clamp(1.1rem, 1.8vw, 1.45rem) !important;
  cursor: pointer !important;
  list-style: none !important;
  outline: none !important;
  user-select: none !important;
}

summary.csi-solution-summary::-webkit-details-marker {
  display: none !important;
}

summary.csi-solution-summary:focus-visible {
  outline: 2px solid #0D9488 !important;
  outline-offset: -3px !important;
}

.csi-solution-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  min-width: 0 !important;
}

.csi-solution-card h4 {
  margin: 0 !important;
  font-family: var(--sans) !important;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem) !important;
  font-weight: 750 !important;
  color: var(--ocean-deep, #0C2730) !important;
  line-height: 1.35 !important;
}

.csi-solution-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--hairline-teal, rgba(12, 39, 48, 0.18)) !important;
  border-radius: var(--r-full, 9999px) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: var(--ocean-deep, #0C2730) !important;
  font-size: 0.88rem !important;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 240ms ease, color 240ms ease, border-color 240ms ease !important;
}

details.csi-solution-card[open] .csi-solution-action {
  transform: rotate(180deg) !important;
  background: #0D9488 !important;
  color: #ffffff !important;
  border-color: #0D9488 !important;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35) !important;
}

.csi-solution-detail {
  padding: 0.85rem clamp(1.1rem, 1.8vw, 1.45rem) clamp(1.1rem, 1.8vw, 1.45rem) !important;
  border-top: 1px solid rgba(13, 148, 136, 0.15) !important;
  animation: solution-text-reveal 240ms var(--ease-out) both !important;
}

@keyframes solution-text-reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.csi-solution-detail p {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--ink-soft, #4A5568) !important;
  text-align: left !important;
}

@media (max-width: 900px) {
  .csi-solution-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   7. Channel Cards & Modals (Voice, SMS, Web App)
   ========================================================================== */

.csi-channel-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  align-items: start !important;
  margin-top: clamp(1.5rem, 3vw, 2.2rem) !important;
}

details.csi-channel-card {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  border: 1.5px solid rgba(13, 148, 136, 0.22) !important;
  border-radius: var(--r-lg, 1.2rem) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, border-color 240ms ease !important;
}

details.csi-channel-card[open],
details.csi-channel-card:hover {
  border-color: rgba(13, 148, 136, 0.6) !important;
  box-shadow: 0 14px 34px rgba(12, 73, 86, 0.14), 0 0 28px rgba(45, 212, 191, 0.24), inset 0 1px 1px #ffffff !important;
  transform: translateY(-4px) !important;
}

summary.csi-channel-summary-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1.1rem, 2vw, 1.4rem) !important;
  cursor: pointer !important;
  list-style: none !important;
  outline: none !important;
  user-select: none !important;
}

summary.csi-channel-summary-head::-webkit-details-marker {
  display: none !important;
}

summary.csi-channel-summary-head:focus-visible {
  outline: 2px solid #0D9488 !important;
  outline-offset: -3px !important;
}

.csi-channel-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.85rem !important;
  min-width: 0 !important;
}

.csi-channel-grid .icon-tile.is-ocean,
.csi-channel-dialog .icon-tile.is-ocean {
  background: rgba(13, 148, 136, 0.14) !important;
  color: #0D9488 !important;
  border-color: rgba(13, 148, 136, 0.32) !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

.csi-channel-grid .icon-tile.is-ocean i,
.csi-channel-dialog .icon-tile.is-ocean i {
  color: #0D9488 !important;
}

.csi-channel-head h3 {
  margin: 0 !important;
  font-family: var(--sans) !important;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem) !important;
  font-weight: 750 !important;
  color: var(--ink, #06181F) !important;
}

.csi-channel-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex: 0 0 auto !important;
}

.csi-channel-info-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(8, 145, 178, 0.25) !important;
  border-radius: 50% !important;
  background: rgba(240, 249, 251, 0.9) !important;
  color: #0B6480 !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background 200ms ease,
              color 200ms ease,
              border-color 200ms ease,
              box-shadow 200ms ease !important;
}

.csi-channel-info-btn:hover {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  transform: scale(1.1) rotate(12deg) !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
}

.csi-channel-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 50% !important;
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  font-size: 0.95rem !important;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 250ms ease, color 250ms ease, border-color 250ms ease !important;
}

details.csi-channel-card[open] .csi-channel-toggle {
  transform: rotate(180deg) !important;
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
}

.csi-channel-body {
  padding: 0.85rem clamp(1.1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.35rem) !important;
  border-top: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.csi-channel-summary {
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
}

@media (max-width: 900px) {
  .csi-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  summary.csi-channel-summary-head {
    padding: 1.1rem 3.5rem 1.1rem 1.2rem !important;
  }
}

/* Channel Use Modals (<dialog>) */
.csi-channel-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 580px;
  width: 90vw;
  border-radius: var(--r-xl, 1.5rem);
}

.csi-channel-dialog::backdrop {
  background: rgba(6, 24, 31, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.csi-channel-dialog-card {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: #ffffff;
  border-radius: var(--r-xl, 1.5rem);
  box-shadow: 0 24px 60px rgba(6, 24, 31, 0.28), 0 0 30px rgba(13, 148, 136, 0.15);
  animation: dialog-pop-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialog-pop-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.csi-channel-dialog-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hairline-teal, rgba(12, 39, 48, 0.12));
  position: relative;
}

.csi-channel-dialog-head h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 800;
  color: var(--ink, #06181F);
  padding-right: 2.2rem;
}

.csi-channel-dialog-close {
  position: absolute;
  top: -0.2rem;
  right: 0;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: var(--r-full, 9999px);
  background: rgba(12, 39, 48, 0.08);
  color: var(--ocean-deep, #0C2730);
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

.csi-channel-dialog-close:hover {
  background: var(--red-deep, #B4234A);
  color: #fff;
  transform: rotate(90deg) scale(1.08);
}

.csi-channel-use-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  padding-left: 1.2rem;
  list-style-type: disc;
}

@media (max-width: 540px) {
  .csi-channel-use-list {
    grid-template-columns: 1fr;
  }
}

.csi-channel-use-list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft, #4A5568);
}

.csi-channel-dialog-goal {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md, 0.8rem);
  background: rgba(13, 148, 136, 0.08);
  border-left: 3px solid #0D9488;
  font-size: 0.91rem;
  font-weight: 550;
  line-height: 1.55;
  color: var(--ocean-deep, #0C2730);
}

/* ==========================================================================
   8. Language Modes & Visual (#language-access)
   ========================================================================== */

.language-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: stretch !important;
}

@media (max-width: 900px) {
  .language-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .language-mode {
    height: auto !important;
  }
  summary.language-mode-summary {
    min-height: auto !important;
    padding: 1.15rem 3.5rem 1.15rem 1.2rem !important;
  }
}

.language-mode {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: 1.5px solid rgba(13, 148, 136, 0.22) !important;
  border-radius: var(--r-lg, 1.2rem) !important;
  background: #ffffff !important;
  overflow: hidden;
  position: relative;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, border-color 240ms ease !important;
}

.language-mode:hover,
.language-mode[open] {
  border-color: rgba(13, 148, 136, 0.6) !important;
  box-shadow: 0 14px 34px rgba(12, 73, 86, 0.14), 0 0 28px rgba(45, 212, 191, 0.24), inset 0 1px 1px #ffffff !important;
  transform: translateY(-4px) !important;
}

summary.language-mode-summary {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  justify-content: flex-start !important;
  padding: clamp(1.15rem, 1.8vw, 1.45rem) 3.5rem clamp(1.15rem, 1.8vw, 1.45rem) clamp(1.15rem, 1.8vw, 1.45rem) !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none;
  min-height: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.language-mode[open] summary.language-mode-summary {
  min-height: auto !important;
  flex: 0 0 auto !important;
}

summary.language-mode-summary::-webkit-details-marker {
  display: none !important;
}

.language-mode-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
  text-align: left;
}

.language-mode-head h3 {
  margin: 0 0 0.2rem;
  font-family: var(--sans);
  font-size: clamp(1.1rem, 1.7vw, 1.28rem);
  font-weight: 750;
  color: var(--ink, #06181F);
}

.language-mode-head strong {
  display: block;
  font-size: 0.92rem;
  color: #0B4A5B;
  font-weight: 600;
}

.language-mode-toggle {
  display: grid;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.1);
  color: #0D9488;
  font-size: 0.95rem;
  position: absolute !important;
  top: 50% !important;
  right: clamp(1rem, 1.6vw, 1.3rem) !important;
  transform: translateY(-50%) !important;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
}

.language-mode[open] .language-mode-toggle {
  transform: translateY(-50%) rotate(180deg) !important;
  background: #0D9488;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
}

.language-mode-body {
  padding: 0 clamp(1.15rem, 1.8vw, 1.45rem) clamp(1.15rem, 1.8vw, 1.45rem) clamp(1.15rem, 1.8vw, 1.45rem);
  border-top: 1px solid rgba(13, 148, 136, 0.12);
  margin-top: 0.2rem;
  padding-top: 0.85rem;
}

.language-mode-body p {
  margin: 0 !important;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Light Green Icon Tiles */
.icon-tile.is-mint {
  background: rgba(13, 148, 136, 0.12) !important;
  color: #0D9488 !important;
  border-color: rgba(13, 148, 136, 0.28) !important;
}

.icon-tile.is-mint i {
  color: #0D9488 !important;
}

/* ==========================================================================
   9. Knowledge Flow Demo & WhatsApp Showcase (#proof)
   ========================================================================== */

/* 3 Joined Flow Pills */
.csi-flow-pills-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(1rem, 2vw, 1.6rem);
  margin-bottom: clamp(1.8rem, 3vw, 2.5rem);
}

.csi-flow-pills {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1vw, 0.75rem);
  padding: 0.5rem 0.9rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(8, 145, 178, 0.22);
  border-radius: var(--r-full, 9999px);
  box-shadow: inset 0 1px 1px #ffffff, 0 8px 24px rgba(12, 39, 48, 0.08);
}

.csi-flow-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.15rem;
  font-size: clamp(0.85rem, 1.3vw, 0.95rem);
  font-weight: 700;
  color: var(--ocean-deep, #0C2730);
  background: rgba(240, 249, 251, 0.9);
  border: 1px solid rgba(8, 145, 178, 0.25);
  border-radius: var(--r-full, 9999px);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.csi-flow-pill:hover {
  transform: translateY(-1px);
}

.csi-flow-pill.is-stage-1 {
  background: rgba(254, 243, 199, 0.95);
  border-color: rgba(217, 119, 6, 0.4);
  color: #78350F;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15);
}

.csi-flow-pill.is-stage-2 {
  background: #0D9488;
  border-color: #0D9488;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.csi-flow-pill.is-stage-3 {
  background: rgba(224, 242, 254, 0.95);
  border-color: rgba(14, 165, 233, 0.42);
  color: #0369A1;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}

.csi-flow-pill.is-brand .reg {
  font-size: 0.75em;
  vertical-align: super;
  margin-left: 1px;
}

.csi-flow-arrow {
  display: inline-flex;
  align-items: center;
  color: #0D9488;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 800;
  animation: flow-arrow-drift 2.5s ease-in-out infinite;
}

@keyframes flow-arrow-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* Distinct Shaded Background Colors for Demo Panels (Stages 1, 2, 3) */
.demo-input-panel {
  background: rgba(254, 243, 199, 0.65) !important;
  border-color: rgba(217, 119, 6, 0.32) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 4px 16px rgba(217, 119, 6, 0.08) !important;
}

.demo-core-panel {
  background: rgba(204, 251, 241, 0.68) !important;
  border-color: rgba(13, 148, 136, 0.36) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 6px 24px rgba(13, 148, 136, 0.12) !important;
}

.demo-output-panel {
  background: rgba(224, 242, 254, 0.65) !important;
  border-color: rgba(14, 165, 233, 0.32) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 4px 16px rgba(14, 165, 233, 0.08) !important;
}

/* Active Highlight & Glow during Animation */
.demo[data-stage="1"] .demo-input-panel,
.demo[data-scene="1"] .demo-input-panel {
  background: rgba(254, 243, 199, 0.95) !important;
  border-color: #D97706 !important;
  box-shadow: 0 10px 32px rgba(217, 119, 6, 0.22), 0 0 20px rgba(217, 119, 6, 0.15) !important;
  transform: translateY(-3px);
}

.demo[data-stage="2"] .demo-core-panel,
.demo[data-playing="true"][data-scene="2"] .demo-core-panel,
.demo[data-playing="true"][data-scene="3"] .demo-core-panel,
.demo[data-playing="true"][data-scene="4"] .demo-core-panel,
.demo[data-playing="true"][data-scene="5"] .demo-core-panel {
  background: rgba(204, 251, 241, 0.95) !important;
  border-color: #0D9488 !important;
  box-shadow: 0 12px 36px rgba(13, 148, 136, 0.28), 0 0 24px rgba(45, 212, 191, 0.2) !important;
  transform: translateY(-3px);
}

.demo[data-stage="3"] .demo-output-panel,
.demo[data-scene="5"] .demo-output-panel {
  background: rgba(224, 242, 254, 0.95) !important;
  border-color: #0EA5E9 !important;
  box-shadow: 0 10px 32px rgba(14, 165, 233, 0.22), 0 0 20px rgba(14, 165, 233, 0.15) !important;
  transform: translateY(-3px);
}

@media (max-width: 540px) {
  .csi-flow-pills {
    flex-direction: column;
    border-radius: var(--r-lg, 1.2rem);
    padding: 0.8rem;
    width: 100%;
  }

  .csi-flow-pill {
    width: 100%;
    justify-content: center;
  }

  .csi-flow-arrow {
    transform: rotate(90deg);
  }
}

/* Core Panel Position & Popovers */
.demo-workspace,
.demo-panel,
.demo-core-panel {
  overflow: visible !important;
}

.demo-core-panel {
  position: relative !important;
  cursor: pointer;
}

/* Processing Animated Popup (active during play) */
.csi-demo-processing-popup {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  pointer-events: none;
  z-index: 65;
}

.csi-proc-step {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 1rem;
  background: #06181F;
  color: #58D9E8;
  border: 1.5px solid #0D9488;
  border-radius: var(--r-full, 9999px);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(6, 24, 31, 0.45), 0 0 20px rgba(13, 148, 136, 0.4);
  animation: proc-step-pop 320ms var(--ease-out) both;
}

.csi-proc-step i {
  color: #0D9488;
  font-size: 0.95rem;
}

.csi-proc-step i.spin {
  display: inline-block;
  animation: spin-gear 2s linear infinite;
}

@keyframes spin-gear {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes proc-step-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Show respective step based on animation scene */
.demo[data-scene="2"] .csi-proc-step[data-proc-step="1"],
.demo[data-scene="3"] .csi-proc-step[data-proc-step="2"],
.demo[data-scene="4"] .csi-proc-step[data-proc-step="3"],
.demo[data-playing="true"][data-scene="5"] .csi-proc-step[data-proc-step="4"] {
  display: inline-flex !important;
}

/* Single continuous GPU-accelerated spin for demo-core-machine (Stage 2: 4-second unbroken curve) */
.demo-core-machine {
  transform-origin: 50% 50% !important;
  will-change: transform !important;
}

/* Active processing (Scenes 2, 3, 4): Single continuous smooth rotation (0deg -> 2160deg) */
.demo[data-playing="true"][data-scene="2"] .demo-core-machine,
.demo[data-playing="true"][data-scene="3"] .demo-core-machine,
.demo[data-playing="true"][data-scene="4"] .demo-core-machine {
  position: relative;
  animation: core-machine-continuous-smooth-spin 4s linear forwards !important;
}

/* Completion / Stage 3 Rest state */
.demo[data-scene="5"] .demo-core-machine,
.demo[data-complete="true"] .demo-core-machine {
  position: relative;
  transform: rotate(0deg) scale(1) !important;
  transition: transform 600ms cubic-bezier(0.1, 0.85, 0.15, 1), box-shadow 600ms ease-out !important;
  box-shadow: 0 0 16px rgba(13, 148, 136, 0.3) !important;
}

/* Doppler Wave Pulse during Active Processing */
.demo[data-playing="true"][data-scene="2"] .demo-core-machine::after,
.demo[data-playing="true"][data-scene="3"] .demo-core-machine::after,
.demo[data-playing="true"][data-scene="4"] .demo-core-machine::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(13, 148, 136, 0.75);
  animation: doppler-wave-pulse 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}

.demo[data-scene="5"] .demo-core-machine::after,
.demo[data-complete="true"] .demo-core-machine::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(13, 148, 136, 0.4);
  animation: doppler-wave-fade-out 1.2s ease-out forwards;
  pointer-events: none;
}

/* Unbroken 4-second rotation curve (Scene 2 -> Scene 3 -> Scene 4 -> Rest) */
@keyframes core-machine-continuous-smooth-spin {
  0% {
    transform: rotate(0deg) scale(1);
    box-shadow: 0 0 16px rgba(13, 148, 136, 0.3);
  }
  25% {
    transform: rotate(360deg) scale(1.08);
    box-shadow: 0 0 32px rgba(13, 148, 136, 0.8), 0 0 54px rgba(8, 145, 178, 0.5);
  }
  75% {
    transform: rotate(1800deg) scale(1.08);
    box-shadow: 0 0 34px rgba(13, 148, 136, 0.85), 0 0 56px rgba(8, 145, 178, 0.55);
  }
  100% {
    transform: rotate(2160deg) scale(1);
    box-shadow: 0 0 16px rgba(13, 148, 136, 0.3);
  }
}

@keyframes doppler-wave-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
    border-color: rgba(13, 148, 136, 0.85);
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
    border-color: rgba(8, 145, 178, 0);
  }
}

@keyframes doppler-wave-fade-out {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Static Hover Hint / Popover */
.csi-demo-core-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding: 0.9rem 1.1rem;
  background: #06181F;
  color: #ffffff;
  border: 1px solid rgba(13, 148, 136, 0.45);
  border-radius: var(--r-md, 0.9rem);
  box-shadow: 0 14px 36px rgba(6, 24, 31, 0.4), 0 0 20px rgba(13, 148, 136, 0.2);
  z-index: 40;
  text-align: left;
  animation: popover-fade 200ms var(--ease-out) both;
}

.csi-demo-core-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #06181F transparent transparent transparent;
}

.csi-demo-core-popover h4 {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 800;
  color: #58D9E8;
}

.csi-demo-core-popover ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.csi-demo-core-popover li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  font-weight: 650;
  color: rgba(240, 249, 251, 0.95);
  margin-bottom: 0.35rem;
}

.csi-demo-core-popover li:last-child {
  margin-bottom: 0;
}

.csi-demo-core-popover li i {
  color: #0D9488;
  font-size: 0.92rem;
}

/* Hover trigger when animation is static (not playing) */
@media (hover: hover) and (pointer: fine) {
  .demo:not([data-playing="true"]) .demo-core-panel:hover .csi-demo-core-popover {
    display: block;
  }
}

/* Mobile active tap class */
.demo-core-panel.is-tapped .csi-demo-core-popover {
  display: block !important;
}

/* 4 Guarantee / Trust Pills */
.csi-trust-pills-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.csi-trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.55rem, 1.2vw, 0.85rem);
  max-width: 1000px;
}

.csi-trust-pill {
  gap: 0.5rem;
  padding: 0.52rem 1.1rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(13, 148, 136, 0.3);
  box-shadow: inset 0 1px 1px #ffffff, 0 4px 16px rgba(12, 39, 48, 0.05);
  transition: transform 220ms var(--ease-out), background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}

.csi-trust-pill i {
  color: #0D9488;
  font-size: 0.95rem;
  transition: color 200ms var(--ease-out);
}

.csi-trust-pill:hover {
  background: #0D9488 !important;
  color: #ffffff !important;
  border-color: #0D9488 !important;
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.35), 0 0 16px rgba(45, 212, 191, 0.25) !important;
  transform: translateY(-2px);
}

.csi-trust-pill:hover i {
  color: #ffffff !important;
}

/* ==========================================================================
   10. Getting Started Rollout Stepper (#evaluate)
   ========================================================================== */

.csi-rollout-steps {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(0.5rem, 1.2vw, 1rem) !important;
  margin-top: clamp(1.5rem, 3vw, 2.2rem) !important;
}

.rollout-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.55rem !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: clamp(1.2rem, 2.2vw, 1.6rem) !important;
  border: 1px solid var(--hairline-teal, rgba(12, 39, 48, 0.14)) !important;
  border-radius: var(--r-lg, 1.2rem) !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 1px #ffffff, var(--shadow-soft, 0 4px 20px rgba(0, 0, 0, 0.05)) !important;
}

.rollout-step:hover {
  border-color: rgba(16, 185, 129, 0.48) !important;
  box-shadow: inset 0 1px 1px #ffffff, 0 14px 34px rgba(12, 73, 86, 0.12), 0 0 20px rgba(16, 185, 129, 0.1) !important;
  transform: translateY(-3px) !important;
}

.rollout-step .rollout-stage-icon {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--r-md, 0.8rem) !important;
  background: rgba(13, 148, 136, 0.12) !important;
  border: 1px solid rgba(13, 148, 136, 0.24) !important;
  color: #0B5F58 !important;
  font-size: 1.25rem !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.15);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.rollout-step:hover .rollout-stage-icon {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
}

.rollout-step .rollout-stage-name {
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #0D9488 !important;
}

.rollout-step h3 {
  margin: 0 !important;
  font-family: var(--sans) !important;
  font-size: clamp(1rem, 1.5vw, 1.18rem) !important;
  font-weight: 750 !important;
  color: var(--ink, #06181F) !important;
}

.rollout-step p {
  margin: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
}

.rollout-step-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 0.5rem !important;
}

.rollout-exposure-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.22rem 0.55rem !important;
  border-radius: var(--r-full, 9999px) !important;
  font-family: var(--sans) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background: rgba(13, 148, 136, 0.1) !important;
  border: 1px solid rgba(13, 148, 136, 0.24) !important;
  color: #0B5F58 !important;
  white-space: nowrap !important;
}

.rollout-exposure-tag i {
  font-size: 0.78rem !important;
  color: #0D9488 !important;
}

.rollout-step--preview .rollout-exposure-tag {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.38) !important;
  color: #047857 !important;
}

.rollout-step--preview .rollout-exposure-tag i {
  color: #047857 !important;
}

/* Preview step: distinct shaded green card with subtle breathing aura */
.rollout-step--preview {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 0.55rem !important;
  border-color: rgba(16, 185, 129, 0.42) !important;
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.2), rgba(13, 148, 136, 0.08) 65%, rgba(255, 255, 255, 0.92)) !important;
  box-shadow: inset 0 1px 1px #ffffff, 0 6px 24px rgba(16, 185, 129, 0.12) !important;
  animation: preview-step-pulse 4s ease-in-out infinite;
}

@keyframes preview-step-pulse {
  0%, 100% {
    box-shadow: inset 0 1px 1px #ffffff, 0 6px 24px rgba(16, 185, 129, 0.12);
  }
  50% {
    box-shadow: inset 0 1px 1px #ffffff, 0 10px 32px rgba(16, 185, 129, 0.22), 0 0 20px rgba(45, 212, 191, 0.15);
  }
}

.rollout-step--preview .rollout-stage-icon {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #047857 !important;
}

.rollout-step--preview .rollout-stage-name {
  font-size: 0.9rem !important;
  color: #047857 !important;
}

.rollout-step[data-channel-target] {
  cursor: pointer !important;
}

.rollout-step[data-channel-target]:focus-visible {
  outline: 2px solid #0D9488 !important;
  outline-offset: 3px !important;
}

.rollout-step-arrow {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  color: rgba(13, 148, 136, 0.6) !important;
  font-size: 1.35rem !important;
  animation: rollout-arrow-drift 2.5s ease-in-out infinite;
}

@keyframes rollout-arrow-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@media (max-width: 900px) {
  .csi-rollout-steps {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .rollout-step-arrow {
    transform: rotate(90deg) !important;
    animation: none !important;
  }

  .rollout-step[data-channel-target] {
    cursor: default !important;
  }

  .rollout-step[data-channel-target]:hover {
    transform: none !important;
    border-color: var(--hairline-teal, rgba(12, 39, 48, 0.14)) !important;
    box-shadow: inset 0 1px 1px #ffffff, var(--shadow-soft, 0 4px 20px rgba(0, 0, 0, 0.05)) !important;
  }

  .rollout-step[data-channel-target]:focus-visible {
    outline: none !important;
  }
}

.csi-rollout-dialog {
  max-width: min(1180px, 94vw);
  width: 94vw;
}

.csi-rollout-dialog .rollout-stage-body {
  max-height: 70vh;
  overflow-y: auto;
  --rollout-accent: #0F766E;
  --rollout-accent-rgb: 15, 118, 110;
}

.csi-rollout-dialog .rollout-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Apple/touch usability (2026-08-16). The JS width gate on the rollout dialogs
   is gone, so phones and portrait iPads reach them again; collapse the
   four-node flow to one scrollable column there. svh clears the collapsed
   Safari toolbar (invalid pre-15.4, where the 70vh rule above still applies). */
@media (max-width: 900px) {
  .csi-rollout-dialog .rollout-flow {
    grid-template-columns: minmax(0, 1fr);
  }
}

.csi-rollout-dialog .rollout-stage-body { max-height: 70svh; }

/* iOS 15.0-15.3 has no <dialog> element: without this, every closed dialog's
   content renders inline in the page flow. Safari 15.4+ ships the same rule in
   its UA stylesheet, so this is inert there. */
dialog:not([open]) { display: none; }

.faq-content { overscroll-behavior: contain; }

/* 44px touch floor for dialog controls on coarse pointers. The width/height
   pair needs !important only because the channel-action base rules carry it;
   scoped to coarse pointers so desktop stays untouched. */
@media (pointer: coarse) {
  .csi-channel-dialog-close { width: 44px; height: 44px; }
  .csi-channel-info-btn,
  .csi-channel-toggle {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ==========================================================================
   11. Handling, Not Carriage & What Chatterbox Is Not (#handling-not-carriage)
   ========================================================================== */

/* Disqualify callout card presentation with rich dark-contrast glass */
.disqualify {
  margin-top: clamp(1.8rem, 3vw, 2.5rem) !important;
  margin-bottom: clamp(1.8rem, 3vw, 2.5rem) !important;
  border-radius: var(--r-xl, 1.25rem) !important;
  border: 1px solid rgba(127, 233, 220, 0.35) !important;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(6, 24, 31, 0.18), 0 0 28px rgba(45, 212, 191, 0.12) !important;
}

.disqualify-inner {
  width: 100% !important;
  padding: clamp(1.4rem, 2.8vw, 2.2rem) !important;
}

.csi-not-header {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.csi-not-header h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.csi-not-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  align-items: start !important;
}

.csi-not-card {
  position: relative !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(82px, 9vw, 94px) !important;
  height: auto !important;
  padding: clamp(1.1rem, 1.8vw, 1.4rem);
  border: 1px solid var(--hairline-teal, rgba(12, 39, 48, 0.14));
  border-radius: var(--r-lg, 1.2rem);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 1px #ffffff, var(--shadow-soft, 0 4px 20px rgba(0, 0, 0, 0.05));
  cursor: pointer;
}

.csi-not-card.is-active {
  transform: translateY(-3px) !important;
  border-color: rgba(8, 145, 178, 0.48) !important;
  box-shadow: inset 0 1px 1px #ffffff, 0 16px 36px rgba(12, 73, 86, 0.13), 0 0 20px rgba(34, 211, 238, 0.1) !important;
  background: rgba(250, 254, 254, 0.98);
}

.csi-not-card h4 {
  margin: 0;
  padding-right: 2.2rem;
  padding-left: 2.2rem !important;
  text-align: center !important;
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  font-weight: 800;
  line-height: 1.32;
  color: var(--ink, #06181F);
}

.csi-not-card p {
  display: none;
  margin: 0.5rem 0 0;
  width: 100%;
  font-size: 0.91rem;
  line-height: 1.55;
  color: var(--ink-soft, #4A5568);
  text-align: left;
  animation: not-text-reveal 240ms var(--ease-out) both;
}

@keyframes not-text-reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.csi-not-card.is-active p {
  display: block;
}

.csi-not-toggle {
  display: grid !important;
  position: absolute !important;
  top: 0.85rem !important;
  right: 0.85rem !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border: 1px solid var(--hairline-teal, rgba(12, 39, 48, 0.18)) !important;
  border-radius: var(--r-full, 9999px) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: var(--ocean-deep, #0C2730) !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: 0.82rem !important;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 240ms ease, color 240ms ease !important;
}

.csi-not-card.is-active .csi-not-toggle i,
.csi-not-toggle[aria-expanded="true"] i {
  transform: rotate(180deg) !important;
}

.csi-not-card.is-active .csi-not-toggle,
.csi-not-toggle[aria-expanded="true"] {
  background: #0B6480 !important;
  color: #fff !important;
  border-color: #0B6480 !important;
  box-shadow: 0 2px 8px rgba(11, 100, 128, 0.35) !important;
}

@media (max-width: 900px) {
  .csi-not-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   12. Industries and Use Cases 2x2 Grid (#industries-and-use-cases)
   ========================================================================== */

.csi-use-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.5rem);
  justify-items: stretch !important;
  align-items: stretch !important;
  max-width: 1060px !important;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  margin-left: auto !important;
  margin-right: auto !important;
}

.csi-use-case-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  height: 100% !important;
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
  border: 1px solid var(--hairline-teal, rgba(12, 39, 48, 0.14));
  border-radius: var(--r-lg, 1.2rem);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 1px #ffffff, var(--shadow-soft, 0 4px 20px rgba(0, 0, 0, 0.05));
}

.csi-use-case-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(8, 145, 178, 0.48) !important;
  box-shadow: inset 0 1px 1px #ffffff, 0 16px 36px rgba(12, 73, 86, 0.13), 0 0 20px rgba(34, 211, 238, 0.1) !important;
}

.csi-use-case-head {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.csi-use-case-head h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 800;
  color: var(--ink, #06181F);
}

.csi-use-case-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  width: 100% !important;
  gap: 0.55rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.csi-use-case-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.48rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ocean-deep, #0C2730);
  background: rgba(240, 249, 251, 0.88);
  border: 1px solid rgba(8, 145, 178, 0.22);
  border-radius: var(--r-full, 9999px);
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.csi-use-case-pill:hover {
  background: #0D9488 !important;
  color: #ffffff !important;
  border-color: #0D9488 !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.csi-use-case-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 0.85rem 1.05rem;
  background: #06181F;
  color: #ffffff;
  border: 1px solid rgba(13, 148, 136, 0.45);
  border-radius: var(--r-md, 0.9rem);
  box-shadow: 0 14px 36px rgba(6, 24, 31, 0.4), 0 0 20px rgba(13, 148, 136, 0.25);
  z-index: 60;
  pointer-events: none;
  text-align: left;
  animation: popover-fade 200ms var(--ease-out) both;
}

.csi-use-case-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #06181F transparent transparent transparent;
}

.csi-use-case-popover h4 {
  margin: 0 0 0.35rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 800;
  color: #58D9E8;
  line-height: 1.3;
}

.csi-use-case-popover p {
  margin: 0;
  font-size: 0.81rem;
  line-height: 1.48;
  color: rgba(240, 249, 251, 0.9);
  font-weight: 400;
}

@keyframes popover-fade {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (hover: hover) and (pointer: fine) {
  .csi-use-case-pill:hover .csi-use-case-popover {
    display: block;
  }
}

.csi-grid-header {
  margin-top: clamp(1.5rem, 2.5vw, 2.2rem);
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.csi-grid-header h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink, #06181F);
}

@media (max-width: 900px) {
  .csi-use-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }

  .csi-use-case-card {
    height: auto !important;
    min-height: auto !important;
    padding: 1.25rem 1.1rem !important;
  }

  .csi-use-case-popover {
    display: none !important;
  }
}

/* ==========================================================================
   13. Universal Centre Alignment & Spacing Buffers
   ========================================================================== */

/* Universal Center Alignment for Section Eyebrows, Titles, and Blurbs */
.section-head {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-inline: auto !important;
}

.section-head .eyebrow,
.eyebrow:not(.hero-eyebrow) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-inline: auto !important;
}

.hero-eyebrow {
  display: inline-block !important;
  text-align: left !important;
  margin-inline: 0 auto !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.13em !important;
  line-height: 1.55 !important;
  max-width: 56ch !important;
  margin-bottom: 1rem !important;
  text-transform: uppercase !important;
}

.hero-eyebrow .hero-eyebrow-ink {
  display: inline !important;
  color: var(--ink, #06181F) !important;
}

.section-head .section-title,
.section-title {
  text-align: center !important;
  margin-inline: auto !important;
}

.section-head .section-lede,
.section-lede {
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 60ch !important;
}

.csi-grid-header,
.csi-not-header {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-inline: auto !important;
  width: 100% !important;
}

.csi-grid-header h3,
.csi-not-header h3 {
  text-align: center !important;
  margin-inline: auto !important;
}

/* Spacing between "The Chatterbox Difference:" header and csi-solution-block */
.csi-grid-header + .csi-solution-block {
  margin-top: clamp(0.2rem, 0.6vw, 0.5rem) !important;
}

.csi-grid-header:has(+ .csi-solution-block) {
  margin-bottom: clamp(0.2rem, 0.5vw, 0.4rem) !important;
}

/* Compact Section Buffers & Vertical Margins */
:root {
  --section-y: clamp(2.5rem, 4.5vw, 4.2rem);
}

.band {
  padding-block: var(--section-y) !important;
}

.hero {
  padding-top: calc(var(--nav-h, 80px) + clamp(2.2rem, 4vw, 3.5rem)) !important;
  padding-bottom: clamp(2.8rem, 5vw, 4.2rem) !important;
}

.section-head {
  margin-bottom: clamp(1.4rem, 2.4vw, 2.2rem) !important;
}

.wa-showcase-section,
.partners-section,
.discussion {
  padding-block: clamp(2.2rem, 4vw, 3.5rem) !important;
}

.csi-trust-pills-wrap {
  margin-top: clamp(1.2rem, 2vw, 1.6rem) !important;
  margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem) !important;
}

.csi-grid-header {
  margin-top: clamp(1.6rem, 2.8vw, 2.2rem) !important;
  margin-bottom: clamp(0.8rem, 1.4vw, 1.2rem) !important;
}

/* Hide hero visual orbit animation whenever hero-grid breaks into single column (below 980px) */
@media (max-width: 980px) {
  .hero-visual {
    display: none !important;
  }
  .hero-languages {
    display: flex !important;
  }
}

/* Left-align readable copy. Glanceable closed labels stay centred where set above. */
.answer-choice-summary {
  justify-content: start !important;
  text-align: left !important;
}

.answer-choice-title {
  text-align: left !important;
}

.csi-solution-title {
  text-align: center !important;
}

.csi-solution-card {
  align-items: center !important;
  text-align: center !important;
  height: auto !important;
}

.csi-solution-card .triangle-label {
  align-self: center !important;
  text-align: center !important;
}

.csi-solution-card h4 {
  width: 100% !important;
  text-align: center !important;
}

.csi-solution-block h4 {
  text-align: center !important;
}

.csi-channel-head {
  justify-content: center !important;
  text-align: center !important;
  flex: 1 1 auto !important;
}

summary.csi-channel-summary-head {
  position: relative !important;
  justify-content: center !important;
  padding-left: clamp(3.4rem, 5vw, 4rem) !important;
  padding-right: clamp(3.4rem, 5vw, 4rem) !important;
}

@media (max-width: 900px) {
  summary.csi-channel-summary-head {
    padding-left: 1.2rem !important;
    padding-right: 3.5rem !important;
  }
}

.csi-channel-actions {
  position: absolute !important;
  top: 50% !important;
  right: clamp(1.1rem, 2vw, 1.4rem) !important;
  transform: translateY(-50%) !important;
}

.language-mode-head {
  justify-content: flex-start !important;
  text-align: left !important;
}

.language-mode-head h3,
.language-mode-head strong {
  display: block !important;
  text-align: left !important;
}

/* ==========================================================================
   14. Navigation Enhancements & Glassmorphic Overrides
   ========================================================================== */

.site-nav {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 900 !important;
  min-height: var(--nav-h, 68px) !important;
  background: rgba(255, 255, 255, 0.70) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 4px 24px rgba(12, 39, 48, 0.06), inset 0 -1px 0 rgba(13, 148, 136, 0.12) !important;
  transition: background 400ms var(--ease-out), box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out), padding 350ms ease !important;
}

.site-nav.is-scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%),
              linear-gradient(90deg, rgba(12, 74, 110, 0.60) 0%, rgba(11, 95, 122, 0.55) 52%, rgba(14, 116, 144, 0.55) 100%) !important;
  backdrop-filter: blur(30px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(210%) !important;
  border-bottom: 1px solid rgba(127, 233, 220, 0.35) !important;
  box-shadow: 0 12px 36px rgba(6, 24, 32, 0.22), inset 0 1px 1.5px rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(127, 233, 220, 0.2) !important;
}

.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.nav-links a:not(.btn),
.nav-links button.nav-plain {
  position: relative !important;
  padding: 0.45rem 0.55rem !important;
  background: none !important;
  border: none !important;
  font-family: var(--sans) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--ink, #06181F) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: color 240ms var(--ease-out) !important;
  white-space: nowrap !important;
}

.nav-links a:not(.btn)::after,
.nav-links button.nav-plain::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 3px !important;
  width: 58% !important;
  height: 2px !important;
  border-radius: 2px !important;
  transform-origin: center !important;
  background: var(--ocean-mid, #0D9488) !important;
  transform: translateX(-50%) scaleX(0) !important;
  transition: transform 300ms var(--ease-out) !important;
}

.nav-links a:not(.btn):hover,
.nav-links button.nav-plain:hover,
.nav-links a:not(.btn)[aria-current="location"] {
  color: #0B6480 !important;
  background: none !important;
}

.nav-links a:not(.btn):hover::after,
.nav-links button.nav-plain:hover::after,
.nav-links a:not(.btn)[aria-current="location"]::after {
  transform: translateX(-50%) scaleX(1) !important;
}

.site-nav.is-scrolled .nav-links a:not(.btn),
.site-nav.is-scrolled .nav-links button.nav-plain {
  color: #EAF9FC !important;
  background: none !important;
}

.site-nav.is-scrolled .nav-links a:not(.btn):hover,
.site-nav.is-scrolled .nav-links button.nav-plain:hover,
.site-nav.is-scrolled .nav-links a:not(.btn)[aria-current="location"] {
  color: #A7F3EA !important;
  background: none !important;
}

.site-nav.is-scrolled .nav-links a:not(.btn)::after,
.site-nav.is-scrolled .nav-links button.nav-plain::after {
  background: #7FE9DC !important;
}

.site-nav.is-scrolled .nav-links .btn-primary {
  box-shadow: 0 4px 18px rgba(13, 148, 136, 0.45) !important;
}

/* Nav Menu & Panel (Mobile / Tablet) */
.nav-panel {
  width: min(340px, calc(100vw - 32px)) !important;
  padding: 0.85rem !important;
  border-radius: var(--r-lg, 16px) !important;
  background: rgba(251, 248, 243, 0.98) !important;
  border: 1px solid var(--hairline-teal, rgba(12, 39, 48, 0.15)) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.site-nav.is-scrolled .nav-panel {
  background: linear-gradient(160deg, rgba(9, 58, 80, 0.88) 0%, rgba(12, 74, 110, 0.90) 100%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(127, 233, 220, 0.32) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;
}

.nav-panel a:not(.btn),
.nav-panel button.nav-plain {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0.55rem 0.75rem !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: var(--r-sm, 6px) !important;
  border-left: 3px solid transparent !important;
  font-family: var(--sans) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--ink, #06181F) !important;
  text-decoration: none !important;
  transition: background-color 200ms ease, color 200ms ease !important;
}

.nav-panel a:not(.btn) i,
.nav-panel button.nav-plain i {
  font-size: 1.05rem !important;
  color: #0B6480 !important;
  width: 1.3rem !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.nav-panel a:not(.btn):hover,
.nav-panel button.nav-plain:hover {
  background: rgba(45, 212, 191, 0.12) !important;
  color: #0B5F58 !important;
}

.nav-panel a:not(.btn)[aria-current="location"] {
  background: rgba(45, 212, 191, 0.16) !important;
  border-left-color: var(--turquoise, #2DD4BF) !important;
  color: #0B5F58 !important;
}

.site-nav.is-scrolled .nav-panel a:not(.btn),
.site-nav.is-scrolled .nav-panel button.nav-plain {
  color: #EAF9FC !important;
}

.site-nav.is-scrolled .nav-panel a:not(.btn) i,
.site-nav.is-scrolled .nav-panel button.nav-plain i {
  color: #7FE9DC !important;
}

.site-nav.is-scrolled .nav-panel a:not(.btn):hover,
.site-nav.is-scrolled .nav-panel button.nav-plain:hover {
  background: rgba(127, 233, 220, 0.16) !important;
  color: #ffffff !important;
}

.site-nav.is-scrolled .nav-panel a:not(.btn)[aria-current="location"] {
  background: rgba(127, 233, 220, 0.22) !important;
  border-left-color: #7FE9DC !important;
  color: #ffffff !important;
}

@media (max-width: 1280px) {
  .nav-links { display: none !important; }
  .nav-menu { display: block !important; }
}

/* ==========================================================================
   15. FAQ Modal Styles
   ========================================================================== */

.faq-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(12, 39, 48, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  opacity: 0;
  transition: opacity 350ms ease;
}

.faq-modal-overlay.is-active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.faq-modal-container {
  display: flex;
  flex-direction: column;
  width: min(1040px, 92vw);
  max-height: 90vh;
  max-height: 90dvh;
  background: #ffffff;
  border-radius: var(--r-xl, 24px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 10, 12, 0.38), 0 0 30px rgba(13, 148, 136, 0.15);
  animation: faqSlideIn 350ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes faqSlideIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: none; }
}

.faq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 1.15rem 1.6rem;
  color: #ffffff;
  background: linear-gradient(135deg, #0B4F4A 0%, #0E6B63 55%, #0F766E 100%);
}

.faq-header-left h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.3rem;
  color: #ffffff;
  margin: 0;
}

.faq-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.faq-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.faq-nav-toggle,
.faq-modal-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.05rem;
  transition: background 220ms ease, transform 280ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.faq-nav-toggle {
  display: none;
}

.faq-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.36);
}

.faq-modal-close:hover {
  background: rgba(255, 255, 255, 0.36);
  transform: rotate(90deg) scale(1.08);
}

.faq-main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.faq-nav {
  width: 268px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem 0;
  background: #F7FAFB;
  border-right: 1px solid #E2E8F0;
}

.faq-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink, #06181F);
  transition: background 200ms ease, color 200ms ease;
}

.faq-nav-item:hover {
  background: rgba(45, 212, 191, 0.08);
  color: #0B5F58;
}

.faq-nav-item.is-active {
  background: rgba(45, 212, 191, 0.14);
  border-left-color: var(--turquoise, #2DD4BF);
  color: #0B5F58;
}

.faq-nav-icon {
  flex-shrink: 0;
  width: 1.4rem;
  text-align: center;
  font-size: 1.05rem;
  color: #0B6480;
}

.faq-nav-item.is-active .faq-nav-icon {
  color: #0F766E;
}

.faq-nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.faq-nav-count {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  background: rgba(45, 212, 191, 0.16);
  color: #0B5F58;
}

.faq-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem 2rem;
  scroll-behavior: smooth;
}

.faq-section {
  margin-bottom: 2rem;
}

.faq-section:last-child {
  margin-bottom: 1rem;
}

.faq-section-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.14rem;
  margin: 0 0 0.8rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid rgba(45, 212, 191, 0.24);
  color: var(--ink, #06181F);
}

.faq-section-title i {
  color: #0F766E;
  font-size: 1.1rem;
}

.faq-item {
  border: 1px solid #E2E8F0;
  border-radius: var(--r-md, 10px);
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.faq-item:hover {
  border-color: rgba(45, 212, 191, 0.44);
}

.faq-item.is-open {
  border-color: var(--turquoise, #2DD4BF);
  box-shadow: 0 2px 10px rgba(8, 10, 12, 0.14);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.9rem 1.15rem;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink, #06181F);
}

.faq-chevron {
  flex-shrink: 0;
  font-size: 0.82rem;
  color: #7A93A0;
  transition: transform 300ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), color 300ms ease;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
  color: #0F766E;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-body {
  overflow: hidden;
  min-height: 0;
  padding-inline: 1.15rem;
}

.faq-answer-body > :last-child {
  margin-bottom: 1rem;
}

.faq-answer p {
  font-size: 0.9rem;
  color: #4A6672;
  line-height: 1.7;
  margin: 0 0 0.5rem;
  max-width: none;
}

.faq-answer ul {
  font-size: 0.9rem;
  color: #4A6672;
  line-height: 1.7;
  margin: 0.25rem 0 0;
  padding-left: 1.4rem;
}

.faq-answer li {
  margin-bottom: 0.2rem;
}

.faq-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.16rem 0.6rem;
  border-radius: 6px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.faq-badge-preview {
  background: rgba(8, 145, 178, 0.14);
  color: #0A4F66;
}

.faq-badge-agreed {
  background: rgba(45, 212, 191, 0.18);
  color: #0B5F58;
}

@media (max-width: 780px) {
  .faq-nav-toggle {
    display: grid !important;
  }
  .faq-nav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 10;
    background: #ffffff;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    padding-top: 0.5rem;
  }
  .faq-nav.is-open {
    display: block !important;
  }
  .faq-modal-container {
    width: 94vw;
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: var(--r-lg, 16px);
  }
  .faq-subtitle {
    display: none;
  }
}

@media (max-width: 460px) {
  .faq-nav {
    width: 220px;
  }
  .faq-content {
    padding: 1rem 1.1rem 1.25rem;
  }
}

/* ==========================================================================
   Version 2: topology stays HTML on mobile, Conversation Memory, three-channel proof
   Shared iaas_home_ver2.css hides .service-topology under 767px. This page has no
   illustrated fallback, so the figure must remain visible. Load order wins at
   equal specificity.
   ========================================================================== */

@media (max-width: 767px) {
  .service-topology { display: block; }
  .solution-topology-mobile { display: none; }
}

.service-topology .topology-core-ring span {
  max-width: 22ch;
  overflow-wrap: anywhere;
}

.service-topology .topology-integration {
  min-width: 0;
  width: 100%;
  max-width: 66rem;
}

.service-topology .topology-integration-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-topology .topology-integration-list li {
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

@media (max-width: 980px) {
  .service-topology .topology-integration-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .service-topology .topology-integration-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1 .hero-compound {
    white-space: normal;
  }
}

/* Channel cards: keep titles in flow with the action buttons. The earlier
   absolute-position + equal-padding block lets "Web App" sit under the
   chevrons between ~900px and ~1200px, where the grid is still three columns. */
.csi-channel-grid {
  align-items: stretch !important;
}

.csi-channel-head {
  justify-content: flex-start !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.csi-channel-head h3 {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

summary.csi-channel-summary-head {
  position: relative !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1.1rem, 2vw, 1.4rem) !important;
}

.csi-channel-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

.csi-channel-body,
.csi-channel-summary {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

@media (max-width: 900px) {
  summary.csi-channel-summary-head {
    padding: 1.1rem 1.2rem !important;
  }
}

.csi-workflow-line {
  position: relative;
  z-index: 1;
  margin: clamp(1.1rem, 2.4vw, 1.7rem) 0 0;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid #ff8068;
  background: rgba(255, 253, 248, 0.72);
  color: #174f44;
  font-family: var(--sans);
  font-size: clamp(0.88rem, 1.2vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.45;
}

/* Conversation Memory: one editorial band, not three identical icon cards. */
.csi-memory-strip {
  margin-top: clamp(2.2rem, 4.4vw, 3.4rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(13, 148, 136, 0.28);
  border-radius: var(--r-xl, 24px);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.94) 0%, rgba(232, 246, 241, 0.9) 100%);
  box-shadow: 0 18px 48px rgba(10, 87, 73, 0.08);
  overflow: hidden;
}

.csi-memory-kicker {
  margin: 0 0 0.45rem;
  color: #0D9488;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.csi-memory-strip > h3 {
  max-width: 22ch;
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.8vw, 2.05rem);
}

.csi-memory-strip > p {
  max-width: 62ch;
  margin: 0 0 clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.csi-memory-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin: 0;
  padding: 0;
  counter-reset: memory-step;
}

.csi-memory-steps li {
  position: relative;
  padding: 1.05rem 1.1rem 1.15rem;
  border-radius: var(--r-lg, 20px);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  counter-increment: memory-step;
}

.csi-memory-steps li::before {
  content: counter(memory-step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.55rem;
  color: #ff8068;
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1;
}

.csi-memory-steps li > span {
  display: block;
  margin-bottom: 0.28rem;
  color: #0D9488;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.csi-memory-steps strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
}

.csi-memory-steps p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .csi-memory-steps {
    grid-template-columns: 1fr;
  }
  .csi-memory-strip > h3 {
    max-width: none;
  }
}

/* Three-channel proof: Voice / SMS / Web App, not a WhatsApp Q&A. */
.csi-channel-proof {
  margin-top: clamp(2.4rem, 4.8vw, 3.6rem);
}

.csi-proof-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(1.4rem, 2.8vw, 2rem);
  padding: 0.35rem;
  border: 1px solid rgba(13, 148, 136, 0.28);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.86);
}

.csi-proof-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.62rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.csi-proof-tab i { color: #0D9488; }

.csi-proof-tab.is-active {
  background: #0C4A6E;
  color: #fff8f5;
  box-shadow: 0 8px 18px rgba(12, 74, 110, 0.22);
}

.csi-proof-tab.is-active i { color: #7FE9DC; }

.csi-proof-tab:focus-visible {
  outline: 2px solid #0D9488;
  outline-offset: 3px;
}

.csi-proof-panel { display: none; }
.csi-proof-panel.is-active { display: block; }
.csi-proof-panel[hidden] { display: none !important; }

.csi-voice-card,
.csi-sms-card {
  max-width: 42rem;
  margin: 0 auto;
  overflow: hidden;
}

.csi-voice-card {
  border: 1px solid rgba(12, 74, 110, 0.22);
  border-radius: var(--r-xl, 24px);
  background:
    linear-gradient(180deg, rgba(12, 39, 48, 0.04), rgba(255, 253, 248, 0.92) 38%);
}

.csi-voice-card header,
.csi-sms-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem 1.2rem 0.85rem;
}

.csi-voice-card header strong,
.csi-sms-card header strong {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
}

.csi-voice-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #0D9488;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.csi-voice-live::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ff8068;
  box-shadow: 0 0 0 0 rgba(255, 128, 104, 0.55);
  animation: csi-live-pulse 1.8s ease-out infinite;
}

.csi-voice-turns,
.csi-sms-thread {
  list-style: none;
  margin: 0;
  padding: 0 1.2rem 0.4rem;
  display: grid;
  gap: 0.85rem;
}

.csi-voice-turns li span,
.csi-sms-thread li::before {
  display: block;
  margin-bottom: 0.28rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.csi-voice-turns li span { color: #0C4A6E; }
.csi-voice-turns li.is-customer span { color: #bf503e; }

.csi-voice-turns p,
.csi-sms-thread p {
  margin: 0;
  padding: 0.8rem 0.95rem;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.csi-voice-turns .is-agent p {
  background: rgba(12, 74, 110, 0.08);
  color: var(--ink);
}

.csi-voice-turns .is-customer p {
  background: rgba(255, 128, 104, 0.12);
  color: var(--ink);
}

.csi-voice-card footer,
.csi-sms-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  padding: 0.9rem 1.2rem 1.15rem;
  border-top: 1px solid rgba(13, 148, 136, 0.18);
}

.csi-voice-card footer span,
.csi-sms-card footer span {
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(13, 148, 136, 0.1);
  color: #174f44;
  font-size: 0.74rem;
  font-weight: 700;
}

.csi-sms-card {
  border: 1px solid rgba(13, 148, 136, 0.28);
  border-radius: var(--r-xl, 24px);
  background: #f7f1e8;
}

.csi-sms-card header span {
  color: var(--ink-quiet);
  font-size: 0.84rem;
}

.csi-sms-thread .is-out {
  justify-self: start;
  max-width: 86%;
}

.csi-sms-thread .is-in {
  justify-self: end;
  max-width: 86%;
}

.csi-sms-thread .is-out::before { content: "Chatterbox"; color: #0C4A6E; }
.csi-sms-thread .is-in::before { content: "Customer"; color: #bf503e; text-align: right; }

.csi-sms-thread .is-out p {
  background: #0C4A6E;
  color: #fff8f5;
  border-bottom-left-radius: 4px;
}

.csi-sms-thread .is-in p {
  background: #fffdf8;
  color: var(--ink);
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(12, 39, 48, 0.08);
}

.csi-webapp-note {
  max-width: 42rem;
  margin: 0 auto 0.85rem;
  color: var(--ink-quiet);
  font-size: 0.86rem;
  text-align: center;
}

/* Restyle the shared showcase chrome so this panel reads as Web App, not WhatsApp.
   chatterbox_demo_showcase.css loads after this sheet, so selectors must beat it. */
.csi-webapp-window.wa-chat-window {
  border-color: #0C2730;
  background: #fbf8f3;
  font-family: var(--sans);
}

.csi-webapp-window .wa-header {
  background: linear-gradient(180deg, #0C4A6E 0%, #0C2730 100%);
}

.csi-webapp-window .wa-log {
  background-color: #f4efe7;
  background-image: none;
}

.csi-webapp-window .wa-bubble-user {
  background: #d7f3ee;
  color: #0C2730;
}

.csi-webapp-window .wa-bubble-bot {
  background: #fffdf8;
  color: #0C2730;
}

.csi-webapp-window .wa-bubble-meta i.bi-check2-all,
.csi-webapp-window .wa-bubble-meta i.ph-checks {
  display: none;
}

.csi-webapp-window .wa-status-dot {
  background: #0D9488;
}

.csi-webapp-window .wa-composer {
  background: #fffdf8;
  border-top: 1px solid rgba(12, 39, 48, 0.08);
}

@keyframes csi-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 128, 104, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(255, 128, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 128, 104, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .csi-voice-live::before { animation: none; }
  .hero-visual { animation: none; }
}

@media (max-width: 640px) {
  .csi-proof-tabs {
    width: 100%;
    border-radius: var(--r-lg, 20px);
  }
  .csi-proof-tab { flex: 1 1 auto; justify-content: center; }
  .csi-voice-card footer,
  .csi-sms-card footer { flex-direction: column; align-items: flex-start; }
}

/* Knowledge-flow schematic stays centred. Rollout stage bodies are process copy. */
.demo-workspace .demo-panel {
  align-items: center;
  text-align: center;
}

.demo-workspace .demo-panel h3 {
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

.demo-workspace .demo-sources {
  justify-content: center;
}

.demo-workspace .demo-panel p {
  text-align: center;
}

.rollout-stage-body .rollout-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.rollout-stage-body .rollout-node-label {
  justify-content: flex-start;
  text-align: left;
}

.rollout-stage-body .rollout-node h4,
.rollout-stage-body .rollout-node p {
  text-align: left;
}

.rollout-stage-body .rollout-tags {
  justify-content: flex-start;
}

.rollout-stage-body .rollout-gate {
  justify-items: start;
  text-align: left;
}

.rollout-stage-body .rollout-gate > span,
.rollout-stage-body .rollout-gate > div > span {
  justify-content: flex-start;
}

.rollout-stage-body .rollout-gate strong {
  text-align: left;
}

.rollout-stage-body .rollout-gate--split > div {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  text-align: left;
}

/* Equal-width cards: fixed column counts, never max-content packing or leftover full-bleed. */
@media (max-width: 900px) {
  .csi-problem-triangle,
  .csi-solution-cards,
  .csi-channel-grid,
  .language-modes,
  .csi-not-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .csi-problem-card,
  .csi-problem-card--full,
  .csi-solution-card,
  details.csi-channel-card,
  .language-mode,
  .csi-not-card,
  .csi-use-case-card {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    flex: unset !important;
  }

  .csi-connecting-summary {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    flex: unset !important;
  }

  .csi-use-cases-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .csi-memory-steps {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
  }

  .csi-memory-steps li {
    width: 100% !important;
    max-width: none !important;
  }

  .csi-rollout-steps {
    align-items: stretch !important;
  }

  .rollout-step {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .csi-problem-head h3,
  .csi-solution-card h4,
  .csi-channel-head h3,
  .language-mode-head h3,
  .language-mode-head strong,
  .csi-not-card h4,
  .csi-use-case-card h3,
  .csi-use-case-head h3,
  .rollout-step h3 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

@media (max-width: 760px) {
  .answer-choice-grid,
  #how-it-works .answer-pillars {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .answer-choice,
  #how-it-works .answer-pillars .pillar-card {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    flex: unset !important;
  }

  .answer-choice-title,
  #how-it-works .answer-pillars .pillar-card h3 {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

@media (max-width: 560px) {
  .csi-problem-triangle,
  .csi-solution-cards,
  .csi-channel-grid,
  .language-modes,
  .csi-not-grid,
  .csi-use-cases-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================================
   Alignment & Card Geometry (Canon & Seren Unified Direction)
   ========================================================================== */

/* 1. Channel summary header: optical centre for h3 (icon left, actions right) */
summary.csi-channel-summary-head {
  display: grid !important;
  grid-template-columns: minmax(2.75rem, 1fr) auto minmax(2.75rem, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 0.5rem !important;
  position: relative !important;
}

.csi-channel-head {
  display: contents !important;
}

summary.csi-channel-summary-head > .csi-channel-head > .icon-tile {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

summary.csi-channel-summary-head > .csi-channel-head > h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: center !important;
}

summary.csi-channel-summary-head > .csi-channel-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}

/* 2. Alternatives grid: all contents centred */
.answer-choice-grid {
  text-align: center !important;
}

.answer-choice-grid .answer-choice-summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  text-align: center !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}

.answer-choice-grid .answer-choice-title,
.answer-choice-grid .answer-choice-detail,
.answer-choice-grid .answer-choice-detail p,
.answer-choice-grid .answer-choice-label {
  text-align: center !important;
}

.answer-choice-grid .answer-choice-detail {
  justify-items: center !important;
}

.answer-choice-grid .answer-choice-detail > .answer-choice-limit {
  text-align: center !important;
}

/* 3. Use-cases grid: all contents centred */
.csi-use-cases-grid {
  text-align: center !important;
}

.csi-use-case-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.csi-use-case-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.csi-use-case-head h3 {
  text-align: center !important;
}

.csi-use-case-head .icon-tile {
  margin: 0 auto 0.4rem auto !important;
}

.csi-use-case-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-content: center !important;
  margin: 0.4rem auto !important;
  text-align: center !important;
}

.csi-use-case-body,
.csi-use-case-body p {
  text-align: center !important;
}

/* 4. Rollout steps: all contents centred */
.csi-rollout-steps {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.rollout-step,
.rollout-step:not(.rollout-step--preview) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.rollout-step .rollout-stage-icon {
  margin: 0 auto 0.5rem auto !important;
}

.rollout-step h3,
.rollout-step p,
.rollout-step .rollout-stage-name {
  text-align: center !important;
}

/* 5. Rollout stage dialog body: all contents centred */
.rollout-stage-body,
.rollout-stage-body .rollout-node,
.rollout-stage-body .rollout-node h4,
.rollout-stage-body .rollout-node p,
.rollout-stage-body .rollout-gate,
.rollout-stage-body .rollout-gate strong {
  text-align: center !important;
}

.rollout-stage-body .rollout-node {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.rollout-stage-body .rollout-node-label,
.rollout-stage-body .rollout-tags {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.rollout-stage-body .rollout-gate {
  display: flex !important;
  flex-direction: column !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
}

.rollout-stage-body .rollout-gate > span,
.rollout-stage-body .rollout-gate > div > span {
  justify-content: center !important;
  text-align: center !important;
}

.rollout-stage-body .rollout-gate--split {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.rollout-stage-body .rollout-gate--split > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
}

/* 6. Closed tiles and language modes base styling */
.csi-problem-head,
.csi-solution-card,
.csi-solution-card h4,
.csi-solution-card .triangle-label,
.csi-not-card h4 {
  align-items: center !important;
  text-align: center !important;
}

summary.language-mode-summary {
  justify-content: center !important;
  text-align: center !important;
}

.language-mode-head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.language-mode-head h3,
.language-mode-head strong,
.language-mode-body,
.language-mode-body p {
  text-align: center !important;
}

/* 6.5 Service Topology: Customers left-aligned, Administration right-aligned */
.topology-side--customers .topology-zone-title {
  justify-content: flex-start !important;
  text-align: left !important;
}

.topology-side--customers .topology-channel {
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.topology-side--administration .topology-zone-title {
  justify-content: flex-end !important;
  text-align: right !important;
}

.topology-side--administration .topology-channel {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  text-align: right !important;
}

@media (max-width: 980px) {
  .topology-side--customers .topology-zone-title,
  .topology-side--administration .topology-zone-title {
    justify-content: center !important;
    text-align: center !important;
  }

  .topology-side--customers .topology-channel-list,
  .topology-side--administration .topology-channel-list {
    justify-items: center !important;
  }

  .topology-side--customers .topology-channel,
  .topology-side--administration .topology-channel {
    flex-direction: row !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* 7. Stacked / Bootstrapped Responsive Realignment (Mobile & Tablet) */
@media (max-width: 900px) {
  .csi-problem-head,
  .csi-problem-head h3,
  .csi-problem-body,
  .csi-problem-list,
  .csi-solution-card,
  .csi-solution-card h4,
  .csi-solution-card .triangle-label,
  .csi-solution-card p,
  .csi-channel-body,
  .csi-channel-summary,
  .language-mode-head,
  .language-mode-head h3,
  .language-mode-head strong,
  .language-mode-body,
  .language-mode-body p,
  .csi-not-card,
  .csi-not-card h4,
  .csi-not-card p,
  .csi-use-case-card,
  .csi-use-case-head,
  .csi-use-case-head h3,
  .csi-use-case-pills,
  .csi-use-case-body,
  .csi-use-case-body p,
  .rollout-step,
  .rollout-step:not(.rollout-step--preview),
  .rollout-step h3,
  .rollout-step p,
  .csi-memory-steps,
  .csi-memory-steps li,
  .csi-memory-steps strong,
  .csi-memory-steps p {
    align-items: center !important;
    text-align: center !important;
  }

  .csi-problem-list {
    padding-left: 0 !important;
    list-style-position: inside !important;
  }

  summary.language-mode-summary {
    justify-content: center !important;
    text-align: center !important;
  }

  .language-mode-head {
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    padding-right: 2.4rem !important;
  }

  .csi-use-case-head {
    flex-direction: column !important;
    justify-content: center !important;
  }

  .csi-use-case-pills {
    justify-content: center !important;
    align-content: center !important;
  }

  .rollout-step:not(.rollout-step--preview) {
    align-items: center !important;
  }

  .csi-memory-steps li::before,
  .csi-memory-steps li > span {
    text-align: center !important;
  }
}

@media (max-width: 760px) {
  #how-it-works .answer-pillars .pillar-card {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  #how-it-works .answer-pillars .pillar-card > .icon-tile {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 auto !important;
  }

  #how-it-works .answer-pillars .pillar-card h3,
  #how-it-works .answer-pillars .pillar-card p {
    grid-column: 1 !important;
    text-align: center !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 560px) {
  .csi-problem-summary {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .csi-problem-head {
    align-items: center !important;
    text-align: center !important;
  }

  .rollout-stage-body .rollout-node,
  .rollout-stage-body .rollout-node h4,
  .rollout-stage-body .rollout-node p,
  .rollout-stage-body .rollout-gate,
  .rollout-stage-body .rollout-gate strong {
    text-align: center !important;
  }

  .rollout-stage-body .rollout-node {
    align-items: center !important;
  }

  .rollout-stage-body .rollout-node-label,
  .rollout-stage-body .rollout-tags {
    justify-content: center !important;
  }

  .rollout-stage-body .rollout-gate {
    justify-items: center !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Brand Mark & Lockup Sizing
   ========================================================================== */
.brand-mark {
  width: 72px !important;
  height: 72px !important;
  border-radius: 16px !important;
  flex: 0 0 auto !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease !important;
}

.brand-lockup:hover .brand-mark {
  transform: scale(1.05);
}

@media (max-width: 480px) {
  .brand-mark {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
  }
}

/* ==========================================================================
   Section Landscapes & Atmospheric Contrast Rhythm
   ========================================================================== */

/* Hero Section: Ultra-light, crystalline pearlescent surface with ethereal ambient turquoise glow */
.hero {
  background: radial-gradient(850px circle at 80% 40%, rgba(45, 212, 191, 0.08) 0%, rgba(13, 148, 136, 0.03) 45%, transparent 75%),
              linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%) !important;
  position: relative;
}

/* #problem (3 Failures): Warm muted porcelain with subtle coral-amber distress depth */
#problem.band {
  background: radial-gradient(900px circle at 50% 10%, rgba(244, 63, 94, 0.04) 0%, rgba(251, 146, 60, 0.03) 40%, transparent 70%),
              linear-gradient(180deg, #FFFDFD 0%, #FAF4F0 100%) !important;
  border-top: 1px solid rgba(225, 29, 72, 0.1) !important;
  position: relative;
}

/* #solution (Architecture & Topology): Luminous cool mint/aquamarine landscape with ambient teal radial halo */
#solution.band {
  background: radial-gradient(1000px circle at 50% 25%, rgba(45, 212, 191, 0.18) 0%, rgba(13, 148, 136, 0.07) 50%, transparent 80%),
              linear-gradient(180deg, #EEF9F6 0%, #E2F5F0 50%, #EDF7F4 100%) !important;
  border-top: 1px solid rgba(13, 148, 136, 0.22) !important;
  border-bottom: 1px solid rgba(13, 148, 136, 0.22) !important;
  position: relative;
}

/* #how-it-works (Pillars, Channels & Memory): Warm architectural ivory with grounded pearl depth */
#how-it-works.band {
  background: radial-gradient(900px circle at 25% 25%, rgba(245, 158, 11, 0.05) 0%, transparent 60%),
              linear-gradient(180deg, #FAF7F1 0%, #F3EEE4 100%) !important;
  border-top: 1px solid rgba(12, 39, 48, 0.06) !important;
  position: relative;
}

/* #language-access (11 Languages): Expansive, luminous coastal sky-and-ocean cyan radiance */
#language-access.band {
  background: radial-gradient(950px circle at 75% 35%, rgba(14, 165, 233, 0.13) 0%, rgba(45, 212, 191, 0.1) 45%, transparent 75%),
              linear-gradient(180deg, #EBF6F5 0%, #F3FAF9 100%) !important;
  border-top: 1px solid rgba(13, 148, 136, 0.2) !important;
  border-bottom: 1px solid rgba(13, 148, 136, 0.2) !important;
  position: relative;
}

/* #proof (Demo Workbench): Studio technical surface with focused turquoise workbench illumination */
#proof.band {
  background: radial-gradient(1100px circle at 50% 35%, rgba(45, 212, 191, 0.22) 0%, rgba(13, 148, 136, 0.11) 50%, transparent 80%),
              linear-gradient(180deg, #F2FAF8 0%, #E3F4F0 50%, #EEF7F5 100%) !important;
  border-top: 1px solid rgba(13, 148, 136, 0.26) !important;
  border-bottom: 1px solid rgba(13, 148, 136, 0.26) !important;
  position: relative;
}

/* #evaluate (4 Governed Milestones): Structured warm pearl with amber governance accents */
#evaluate.band {
  background: radial-gradient(900px circle at 50% 20%, rgba(245, 158, 11, 0.06) 0%, transparent 65%),
              linear-gradient(180deg, #FCFAF6 0%, #F5EFE4 100%) !important;
  border-top: 1px solid rgba(217, 119, 6, 0.1) !important;
  position: relative;
}

/* #handling-not-carriage (Boundaries & Alternatives): Sharp, disciplined cool slate-alabaster surface */
#handling-not-carriage.band {
  background: radial-gradient(1000px circle at 50% 30%, rgba(12, 74, 110, 0.07) 0%, transparent 70%),
              linear-gradient(180deg, #EDF4F7 0%, #F4F8FA 100%) !important;
  border-top: 1px solid rgba(12, 74, 110, 0.16) !important;
  border-bottom: 1px solid rgba(12, 74, 110, 0.16) !important;
  position: relative;
}

/* #industries-and-use-cases (10 Situations): Robust, grounded architectural warm sand */
#industries-and-use-cases.band {
  background: radial-gradient(900px circle at 30% 30%, rgba(217, 119, 6, 0.05) 0%, transparent 60%),
              linear-gradient(180deg, #FAF4EB 0%, #F1E8D8 100%) !important;
  border-top: 1px solid rgba(12, 39, 48, 0.07) !important;
  position: relative;
}

/* #faq (Direct Clarifications): Clean, crisp porcelain pearl */
#faq.band {
  background: radial-gradient(900px circle at 50% 15%, rgba(13, 148, 136, 0.04) 0%, transparent 65%),
              linear-gradient(180deg, #FEFDFC 0%, #F7F4EB 100%) !important;
  border-top: 1px solid rgba(12, 39, 48, 0.08) !important;
  position: relative;
}

/* ==========================================================================
   Page-wide Movement, Card Moods, Shading, Fading & Radiant Halo Glows
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section #problem (Three Connected Failures):
      Inbound (Rose/Urgency), Outbound (Amber/Dispatch), Administration (Ocean/Operations)
   -------------------------------------------------------------------------- */

/* Inbound Card */
.csi-problem-triangle details.csi-problem-card:nth-of-type(1) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F5 55%, #FFEBEB 100%) !important;
  border: 1.5px solid rgba(225, 29, 72, 0.35) !important;
  border-top: 4px solid #E11D48 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.08), 0 0 16px rgba(244, 63, 94, 0.08) !important;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms ease !important;
  overflow: hidden !important;
}

.csi-problem-triangle details.csi-problem-card:nth-of-type(1):hover,
.csi-problem-triangle details.csi-problem-card:nth-of-type(1)[open] {
  transform: translateY(-5px) !important;
  border-color: rgba(225, 29, 72, 0.6) !important;
  box-shadow: 0 18px 42px rgba(225, 29, 72, 0.16), 0 0 32px rgba(244, 63, 94, 0.22), inset 0 1px 2px #fff !important;
}

.csi-problem-triangle details.csi-problem-card:nth-of-type(1) .triangle-label {
  background: linear-gradient(135deg, #FFE4E6 0%, #FECDD3 100%) !important;
  color: #BE123C !important;
  border: 1.5px solid rgba(225, 29, 72, 0.35) !important;
  font-weight: 700 !important;
}

/* Outbound Card */
.csi-problem-triangle details.csi-problem-card:nth-of-type(2) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBEB 55%, #FEF3C7 100%) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.35) !important;
  border-top: 4px solid #D97706 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.08), 0 0 16px rgba(245, 158, 11, 0.08) !important;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms ease !important;
  overflow: hidden !important;
}

.csi-problem-triangle details.csi-problem-card:nth-of-type(2):hover,
.csi-problem-triangle details.csi-problem-card:nth-of-type(2)[open] {
  transform: translateY(-5px) !important;
  border-color: rgba(217, 119, 6, 0.6) !important;
  box-shadow: 0 18px 42px rgba(217, 119, 6, 0.16), 0 0 32px rgba(245, 158, 11, 0.22), inset 0 1px 2px #fff !important;
}

.csi-problem-triangle details.csi-problem-card:nth-of-type(2) .triangle-label {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
  color: #B45309 !important;
  border: 1.5px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 700 !important;
}

/* Administration Card */
.csi-problem-triangle details.csi-problem-card:nth-of-type(3) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 55%, #E0F2FE 100%) !important;
  border: 1.5px solid rgba(14, 116, 144, 0.35) !important;
  border-top: 4px solid #0E7490 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(12, 74, 110, 0.08), 0 0 16px rgba(14, 165, 233, 0.08) !important;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms ease !important;
  overflow: hidden !important;
}

.csi-problem-triangle details.csi-problem-card:nth-of-type(3):hover,
.csi-problem-triangle details.csi-problem-card:nth-of-type(3)[open] {
  transform: translateY(-5px) !important;
  border-color: rgba(14, 116, 144, 0.6) !important;
  box-shadow: 0 18px 42px rgba(12, 74, 110, 0.16), 0 0 32px rgba(14, 165, 233, 0.22), inset 0 1px 2px #fff !important;
}

.csi-problem-triangle details.csi-problem-card:nth-of-type(3) .triangle-label {
  background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%) !important;
  color: #0369A1 !important;
  border: 1.5px solid rgba(14, 116, 144, 0.35) !important;
  font-weight: 700 !important;
}

/* Connecting Language Summary Callout */
.csi-connecting-summary {
  position: relative !important;
  background: linear-gradient(135deg, #FFFBEB 0%, #FFF1F2 50%, #FFF7ED 100%) !important;
  border: 2px solid rgba(225, 29, 72, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(225, 29, 72, 0.08), 0 0 20px rgba(244, 63, 94, 0.1) !important;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease !important;
  /* No !important on animation: the shared reduced-motion kill-switch must win. */
  animation: lang-warning-breathe 4s ease-in-out infinite alternate;
}

@keyframes lang-warning-breathe {
  0% {
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.08), 0 0 16px rgba(244, 63, 94, 0.08);
    border-color: rgba(225, 29, 72, 0.3);
  }
  100% {
    box-shadow: 0 12px 34px rgba(225, 29, 72, 0.14), 0 0 28px rgba(244, 63, 94, 0.18);
    border-color: rgba(225, 29, 72, 0.55);
  }
}

.csi-connecting-summary:hover,
.csi-connecting-summary[open] {
  transform: translateY(-3px) !important;
  border-color: rgba(225, 29, 72, 0.6) !important;
  box-shadow: 0 16px 38px rgba(225, 29, 72, 0.18), 0 0 34px rgba(244, 63, 94, 0.24) !important;
}

/* --------------------------------------------------------------------------
   2. Section #solution (Topology, Integrations & Difference Block):
   -------------------------------------------------------------------------- */

/* Service Topology Core */
.topology-core-ring {
  background: linear-gradient(135deg, #06222A 0%, #0B4A5B 50%, #072E38 100%) !important;
  border: 2px solid rgba(45, 212, 191, 0.7) !important;
  box-shadow: 0 0 36px rgba(13, 148, 136, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.9) !important;
  /* No !important on animation: the shared reduced-motion kill-switch must win. */
  animation: topology-halo-breathe 4s ease-in-out infinite;
}

@keyframes topology-halo-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 28px rgba(13, 148, 136, 0.35), 0 8px 24px rgba(10, 87, 73, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.85);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 56px rgba(45, 212, 191, 0.68), 0 0 88px rgba(13, 148, 136, 0.32), inset 0 1px 3px rgba(255, 255, 255, 0.98);
  }
}

/* Customer & Admin Channel Pills */
.topology-side--customers .topology-channel {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0FDFA 100%) !important;
  border: 1.5px solid rgba(13, 148, 136, 0.35) !important;
  border-left: 4px solid #0D9488 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(12, 73, 86, 0.08), 0 0 12px rgba(45, 212, 191, 0.1) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease !important;
}

.topology-side--customers .topology-channel:hover {
  transform: translateY(-3px) scale(1.02) !important;
  border-color: rgba(13, 148, 136, 0.7) !important;
  box-shadow: 0 14px 32px rgba(10, 87, 73, 0.16), 0 0 26px rgba(45, 212, 191, 0.32) !important;
}

.topology-side--administration .topology-channel {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 100%) !important;
  border: 1.5px solid rgba(14, 116, 144, 0.35) !important;
  border-left: 4px solid #0E7490 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(12, 74, 110, 0.08), 0 0 12px rgba(14, 165, 233, 0.1) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease !important;
}

.topology-side--administration .topology-channel:hover {
  transform: translateY(-3px) scale(1.02) !important;
  border-color: rgba(14, 116, 144, 0.7) !important;
  box-shadow: 0 14px 32px rgba(12, 74, 110, 0.16), 0 0 26px rgba(14, 165, 233, 0.32) !important;
}

.topology-integration-list li {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(12, 74, 110, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
}

.topology-integration-list li:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(14, 165, 233, 0.6) !important;
  box-shadow: 0 8px 22px rgba(14, 165, 233, 0.18), 0 0 16px rgba(45, 212, 191, 0.25) !important;
}

/* Solution Difference Container & Sub-Cards */
.csi-solution-block {
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDFA 40%, #E6FFFA 100%) !important;
  border: 2px solid rgba(13, 148, 136, 0.38) !important;
  border-radius: 20px !important;
  /* No !important on animation: the shared reduced-motion kill-switch must win. */
  animation: solution-halo-pulse 5s ease-in-out infinite alternate;
  transition: transform 300ms ease, box-shadow 300ms ease !important;
}

@keyframes solution-halo-pulse {
  0% {
    box-shadow: 0 0 32px rgba(45, 212, 191, 0.28), 0 18px 46px rgba(13, 148, 136, 0.12), inset 0 1px 2px #fff;
  }
  100% {
    box-shadow: 0 0 58px rgba(45, 212, 191, 0.52), 0 24px 58px rgba(13, 148, 136, 0.22), inset 0 1px 2px #fff;
  }
}

.csi-solution-cards .csi-solution-card:nth-of-type(1) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F5 100%) !important;
  border: 1.5px solid rgba(225, 29, 72, 0.35) !important;
  border-top: 4px solid #E11D48 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.08), 0 0 16px rgba(244, 63, 94, 0.08) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease !important;
}

.csi-solution-cards .csi-solution-card:nth-of-type(1):hover {
  transform: translateY(-5px) !important;
  border-color: rgba(225, 29, 72, 0.65) !important;
  box-shadow: 0 18px 42px rgba(225, 29, 72, 0.16), 0 0 32px rgba(244, 63, 94, 0.26) !important;
}

.csi-solution-cards .csi-solution-card:nth-of-type(1) .triangle-label {
  background: linear-gradient(135deg, #FFE4E6 0%, #FECDD3 100%) !important;
  color: #BE123C !important;
  border: 1px solid rgba(225, 29, 72, 0.35) !important;
  font-weight: 700 !important;
}

.csi-solution-cards .csi-solution-card:nth-of-type(2) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.35) !important;
  border-top: 4px solid #D97706 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.08), 0 0 16px rgba(245, 158, 11, 0.08) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease !important;
}

.csi-solution-cards .csi-solution-card:nth-of-type(2):hover {
  transform: translateY(-5px) !important;
  border-color: rgba(217, 119, 6, 0.65) !important;
  box-shadow: 0 18px 42px rgba(217, 119, 6, 0.16), 0 0 32px rgba(245, 158, 11, 0.26) !important;
}

.csi-solution-cards .csi-solution-card:nth-of-type(2) .triangle-label {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
  color: #B45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 700 !important;
}

.csi-solution-cards .csi-solution-card:nth-of-type(3) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%) !important;
  border: 1.5px solid rgba(14, 116, 144, 0.35) !important;
  border-top: 4px solid #0E7490 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(12, 74, 110, 0.08), 0 0 16px rgba(14, 165, 233, 0.08) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease !important;
}

.csi-solution-cards .csi-solution-card:nth-of-type(3):hover {
  transform: translateY(-5px) !important;
  border-color: rgba(14, 116, 144, 0.65) !important;
  box-shadow: 0 18px 42px rgba(12, 74, 110, 0.16), 0 0 32px rgba(14, 165, 233, 0.26) !important;
}

.csi-solution-cards .csi-solution-card:nth-of-type(3) .triangle-label {
  background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%) !important;
  color: #0369A1 !important;
  border: 1px solid rgba(14, 116, 144, 0.35) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   3. Section #how-it-works (Alternatives, 3 Channels & Memory):
   -------------------------------------------------------------------------- */

/* Alternatives Grid Cards */
.answer-choice-summary {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(12, 39, 48, 0.15) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, border-color 240ms ease !important;
}

.answer-choice-summary:hover,
details.answer-choice[open] .answer-choice-summary {
  transform: translateY(-4px) !important;
  border-color: rgba(13, 148, 136, 0.6) !important;
  box-shadow: 0 14px 34px rgba(12, 73, 86, 0.14), 0 0 28px rgba(45, 212, 191, 0.24), inset 0 1px 1px #ffffff !important;
}

/* "Do nothing" Risk Card */
details.answer-choice--risk .answer-choice-summary {
  border-left: 5px solid #D97706 !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBEB 100%) !important;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.08), 0 0 16px rgba(245, 158, 11, 0.08) !important;
}

details.answer-choice--risk:hover .answer-choice-summary,
details.answer-choice--risk[open] .answer-choice-summary {
  border-color: rgba(217, 119, 6, 0.6) !important;
  border-left-color: #D97706 !important;
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.16), 0 0 30px rgba(245, 158, 11, 0.22) !important;
}

/* 3 Channel Cards: Voice, SMS, Web App */
.csi-channel-grid details.csi-channel-card:nth-of-type(1) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 100%) !important;
  border: 1.5px solid rgba(13, 148, 136, 0.35) !important;
  border-top: 4px solid #0D9488 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(13, 148, 136, 0.1), 0 0 20px rgba(45, 212, 191, 0.15) !important;
}

.csi-channel-grid details.csi-channel-card:nth-of-type(1):hover,
.csi-channel-grid details.csi-channel-card:nth-of-type(1)[open] {
  transform: translateY(-5px) !important;
  border-color: rgba(13, 148, 136, 0.65) !important;
  box-shadow: 0 18px 46px rgba(13, 148, 136, 0.2), 0 0 38px rgba(45, 212, 191, 0.32), inset 0 1px 1px #ffffff !important;
}

.csi-channel-grid details.csi-channel-card:nth-of-type(2) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.35) !important;
  border-top: 4px solid #D97706 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(217, 119, 6, 0.1), 0 0 20px rgba(245, 158, 11, 0.15) !important;
}

.csi-channel-grid details.csi-channel-card:nth-of-type(2):hover,
.csi-channel-grid details.csi-channel-card:nth-of-type(2)[open] {
  transform: translateY(-5px) !important;
  border-color: rgba(217, 119, 6, 0.65) !important;
  box-shadow: 0 18px 46px rgba(217, 119, 6, 0.2), 0 0 38px rgba(245, 158, 11, 0.32), inset 0 1px 1px #ffffff !important;
}

.csi-channel-grid details.csi-channel-card:nth-of-type(3) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%) !important;
  border: 1.5px solid rgba(5, 150, 105, 0.35) !important;
  border-top: 4px solid #059669 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(5, 150, 105, 0.1), 0 0 20px rgba(52, 211, 153, 0.15) !important;
}

.csi-channel-grid details.csi-channel-card:nth-of-type(3):hover,
.csi-channel-grid details.csi-channel-card:nth-of-type(3)[open] {
  transform: translateY(-5px) !important;
  border-color: rgba(5, 150, 105, 0.65) !important;
  box-shadow: 0 18px 46px rgba(5, 150, 105, 0.2), 0 0 38px rgba(52, 211, 153, 0.32), inset 0 1px 1px #ffffff !important;
}

/* Conversation Memory Strip Glow */
.csi-memory-strip {
  position: relative !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #F0FDFA 50%, #ECFDF5 100%) !important;
  border: 2px solid rgba(13, 148, 136, 0.4) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 52px rgba(10, 87, 73, 0.12), 0 0 36px rgba(45, 212, 191, 0.18), inset 0 1px 2px #ffffff !important;
  transition: box-shadow 300ms ease, border-color 300ms ease !important;
}

.csi-memory-strip:hover {
  border-color: rgba(13, 148, 136, 0.65) !important;
  box-shadow: 0 24px 64px rgba(10, 87, 73, 0.18), 0 0 52px rgba(45, 212, 191, 0.3), inset 0 1px 2px #ffffff !important;
}

.csi-memory-steps li {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(13, 148, 136, 0.28) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05), 0 0 14px rgba(45, 212, 191, 0.08) !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, border-color 240ms ease !important;
}

.csi-memory-steps li:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(13, 148, 136, 0.55) !important;
  box-shadow: 0 12px 30px rgba(13, 148, 136, 0.16), 0 0 24px rgba(45, 212, 191, 0.24) !important;
}

/* --------------------------------------------------------------------------
   4. Section #language-access (11 SA Languages & Modes):
   -------------------------------------------------------------------------- */
.language-fact {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0FDFA 100%) !important;
  border: 2px solid rgba(13, 148, 136, 0.4) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(12, 73, 86, 0.12), 0 0 32px rgba(45, 212, 191, 0.2) !important;
  transition: transform 260ms ease, box-shadow 260ms ease !important;
}

.language-fact:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 50px rgba(12, 73, 86, 0.18), 0 0 42px rgba(45, 212, 191, 0.3) !important;
}

.language-fact data {
  background: linear-gradient(135deg, #0D9488 0%, #0284C7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(13, 148, 136, 0.3)) !important;
}

.language-inclusion-note {
  margin: 0.8rem 0 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  color: #0B5F58 !important;
  font-weight: 600 !important;
}

.language-modes .language-mode:nth-of-type(1) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 100%) !important;
  border: 1.5px solid rgba(13, 148, 136, 0.35) !important;
  border-top: 4px solid #0D9488 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(12, 73, 86, 0.08), 0 0 16px rgba(45, 212, 191, 0.1) !important;
}

.language-modes .language-mode:nth-of-type(2) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.35) !important;
  border-top: 4px solid #0284C7 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08), 0 0 16px rgba(56, 189, 248, 0.1) !important;
}

.language-modes .language-mode:nth-of-type(3) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.35) !important;
  border-top: 4px solid #D97706 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.08), 0 0 16px rgba(245, 158, 11, 0.1) !important;
}

.language-mode:hover,
.language-mode[open] {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 44px rgba(12, 73, 86, 0.16), 0 0 34px rgba(45, 212, 191, 0.26), inset 0 1px 1px #fff !important;
}

/* --------------------------------------------------------------------------
   5. Section #proof (Demo Workbench & Live Channels):
   -------------------------------------------------------------------------- */
#proof .demo-panel {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(13, 148, 136, 0.4) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(12, 73, 86, 0.1), 0 0 24px rgba(45, 212, 191, 0.14) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease !important;
}

#proof .demo-panel:hover,
#proof .demo-panel:focus-within {
  transform: translateY(-4px) !important;
  border-color: rgba(13, 148, 136, 0.7) !important;
  box-shadow: 0 22px 52px rgba(12, 73, 86, 0.18), 0 0 42px rgba(45, 212, 191, 0.32), inset 0 1px 1px #ffffff !important;
}

.csi-voice-card,
.csi-sms-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(13, 148, 136, 0.38) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(12, 73, 86, 0.1), 0 0 26px rgba(45, 212, 191, 0.16) !important;
  transition: transform 260ms ease, box-shadow 260ms ease !important;
}

.csi-voice-card:hover,
.csi-sms-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(12, 73, 86, 0.16), 0 0 38px rgba(45, 212, 191, 0.28) !important;
}

/* --------------------------------------------------------------------------
   6. Section #evaluate (Rollout Stages, Nodes & Trust Pills):
   -------------------------------------------------------------------------- */

.rollout-stage {
  display: grid !important;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 3.15fr) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(13, 148, 136, 0.25) !important;
  background: #ffffff !important;
  box-shadow: 0 16px 40px rgba(8, 41, 48, 0.08) !important;
}

@media (max-width: 960px) {
  .rollout-stage {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .rollout-stage-intro {
    border-right: none !important;
    border-bottom: 1px solid rgba(13, 148, 136, 0.2) !important;
  }
}

.rollout-stage-intro {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(1.4rem, 2.4vw, 2rem) !important;
  background: linear-gradient(160deg, rgba(13, 148, 136, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
  border-right: 1px solid rgba(13, 148, 136, 0.2) !important;
}

.rollout-stage-intro .rollout-stage-tag-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin-bottom: 0.85rem !important;
}

.rollout-stage-intro .rollout-stage-icon {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--r-md, 0.8rem) !important;
  background: #0D9488 !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25) !important;
}

.rollout-stage-intro .rollout-stage-name {
  font-family: var(--sans) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #0D9488 !important;
}

.rollout-stage-intro .preview-promise-title {
  font-family: var(--font-display, "DM Serif Display", serif) !important;
  font-size: clamp(1.35rem, 2vw, 1.7rem) !important;
  font-weight: 700 !important;
  color: var(--ink, #06181F) !important;
  line-height: 1.3 !important;
  max-width: none !important;
  margin: 0 !important;
}

.contact-zero-barrier-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #0D9488;
  background: rgba(240, 253, 250, 0.9);
  border: 1px solid rgba(13, 148, 136, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  width: fit-content;
}

.contact-zero-barrier-pill i {
  color: #0D9488;
  font-size: 0.88rem;
}

.disqualify {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 45%, #FFFDF5 100%) !important;
  border: 2px solid rgba(217, 119, 6, 0.4) !important;
  border-left: 6px solid #D97706 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(217, 119, 6, 0.12), 0 0 24px rgba(245, 158, 11, 0.14) !important;
}

.csi-rollout-steps article.rollout-step:nth-of-type(1) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.35) !important;
  border-top: 4px solid #D97706 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.08), 0 0 16px rgba(245, 158, 11, 0.1) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease !important;
}

.csi-rollout-steps article.rollout-step:nth-of-type(1):hover {
  transform: translateY(-5px) !important;
  border-color: rgba(217, 119, 6, 0.65) !important;
  box-shadow: 0 18px 44px rgba(217, 119, 6, 0.18), 0 0 32px rgba(245, 158, 11, 0.28) !important;
}

.csi-rollout-steps article.rollout-step:nth-of-type(2) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 100%) !important;
  border: 1.5px solid rgba(13, 148, 136, 0.35) !important;
  border-top: 4px solid #0D9488 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.08), 0 0 16px rgba(45, 212, 191, 0.1) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease !important;
}

.csi-rollout-steps article.rollout-step:nth-of-type(2):hover {
  transform: translateY(-5px) !important;
  border-color: rgba(13, 148, 136, 0.65) !important;
  box-shadow: 0 18px 44px rgba(13, 148, 136, 0.18), 0 0 32px rgba(45, 212, 191, 0.28) !important;
}

.csi-rollout-steps article.rollout-step:nth-of-type(3) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.35) !important;
  border-top: 4px solid #0284C7 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08), 0 0 16px rgba(56, 189, 248, 0.1) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease !important;
}

.csi-rollout-steps article.rollout-step:nth-of-type(3):hover {
  transform: translateY(-5px) !important;
  border-color: rgba(2, 132, 199, 0.65) !important;
  box-shadow: 0 18px 44px rgba(2, 132, 199, 0.18), 0 0 32px rgba(56, 189, 248, 0.28) !important;
}

.csi-rollout-steps article.rollout-step:nth-of-type(4) {
  background: linear-gradient(180deg, #FFFFFF 0%, #ECFDF5 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  border-top: 4px solid #10B981 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.08), 0 0 16px rgba(52, 211, 153, 0.12) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 260ms ease !important;
}

.csi-rollout-steps article.rollout-step:nth-of-type(4):hover {
  transform: translateY(-5px) !important;
  border-color: rgba(16, 185, 129, 0.65) !important;
  box-shadow: 0 18px 44px rgba(16, 185, 129, 0.18), 0 0 32px rgba(52, 211, 153, 0.3) !important;
}

.csi-trust-pill {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(13, 148, 136, 0.35) !important;
  border-radius: 24px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05), 0 0 12px rgba(45, 212, 191, 0.1) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
}

.csi-trust-pill:hover {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: rgba(13, 148, 136, 0.7) !important;
  box-shadow: 0 12px 28px rgba(13, 148, 136, 0.18), 0 0 24px rgba(45, 212, 191, 0.28) !important;
}

/* --------------------------------------------------------------------------
   7. Section #handling-not-carriage (9 Boundary Cards):
   -------------------------------------------------------------------------- */
.csi-not-card {
  position: relative !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F8 100%) !important;
  border: 1.5px solid rgba(225, 29, 72, 0.25) !important;
  border-top: 4px solid #E11D48 !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 22px rgba(225, 29, 72, 0.08), 0 0 14px rgba(244, 63, 94, 0.1) !important;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease !important;
}

.csi-not-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(225, 29, 72, 0.55) !important;
  border-top-color: #BE123C !important;
  box-shadow: 0 16px 40px rgba(225, 29, 72, 0.18), 0 0 30px rgba(244, 63, 94, 0.26), inset 0 1px 1px #ffffff !important;
}

/* --------------------------------------------------------------------------
   8. Section #industries-and-use-cases (10 Enterprise Situations):
   -------------------------------------------------------------------------- */
.csi-use-case-grid .csi-use-case-card:nth-of-type(1) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 100%) !important;
  border: 1.5px solid rgba(13, 148, 136, 0.35) !important;
  border-top: 4px solid #0D9488 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 26px rgba(12, 73, 86, 0.08), 0 0 18px rgba(45, 212, 191, 0.12) !important;
}

.csi-use-case-grid .csi-use-case-card:nth-of-type(2) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.35) !important;
  border-top: 4px solid #D97706 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 26px rgba(217, 119, 6, 0.08), 0 0 18px rgba(245, 158, 11, 0.12) !important;
}

.csi-use-case-grid .csi-use-case-card:nth-of-type(3) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.35) !important;
  border-top: 4px solid #0284C7 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 26px rgba(2, 132, 199, 0.08), 0 0 18px rgba(56, 189, 248, 0.12) !important;
}

.csi-use-case-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 46px rgba(12, 73, 86, 0.16), 0 0 34px rgba(45, 212, 191, 0.26), inset 0 1px 1px #ffffff !important;
}

.csi-use-case-pill {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(13, 148, 136, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05), 0 0 10px rgba(45, 212, 191, 0.08) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
}

.csi-use-case-pill:hover {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: rgba(13, 148, 136, 0.7) !important;
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.18), 0 0 20px rgba(45, 212, 191, 0.28) !important;
}

/* --------------------------------------------------------------------------
   9. Section #faq (Key Questions Accordion):
   -------------------------------------------------------------------------- */
.faq-item {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(12, 39, 48, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease !important;
  overflow: hidden !important;
}

.faq-item:hover,
.faq-item.is-open {
  transform: translateY(-3px) !important;
  border-color: rgba(13, 148, 136, 0.55) !important;
  border-left: 5px solid #0D9488 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 100%) !important;
  box-shadow: 0 14px 36px rgba(12, 73, 86, 0.12), 0 0 28px rgba(45, 212, 191, 0.2) !important;
}

/* ==========================================================================
   12. Shared Hover Popover Hint for [Apply for Private Preview]
   ========================================================================== */

.preview-hint-popover {
  display: none;
  position: fixed;
  z-index: 10000;
  width: min(390px, 92vw);
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(13, 148, 136, 0.35);
  border-radius: var(--r-xl, 1.25rem);
  box-shadow: 0 16px 42px rgba(6, 24, 31, 0.16), 0 0 24px rgba(45, 212, 191, 0.16), inset 0 1px 1px #ffffff;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  text-align: left;
}

.preview-hint-popover.is-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.preview-hint-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  color: #0D9488;
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.preview-hint-header i {
  font-size: 1.05rem;
  color: #0D9488;
}

.preview-hint-text {
  margin: 0 0 0.7rem 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft, #475569);
}

.preview-hint-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  margin-bottom: 0.7rem;
}

.preview-hint-badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #ECFDF5;
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #065F46;
  font-size: 0.76rem;
  font-weight: 650;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  white-space: nowrap;
}

.preview-hint-badges span i {
  color: #10B981;
  font-size: 0.82rem;
}

.preview-hint-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  background: rgba(240, 253, 250, 0.95);
  border-left: 3px solid #0D9488;
  padding: 0.45rem 0.65rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink, #06181F);
}

.preview-hint-note i {
  color: #0D9488;
  font-size: 0.95rem;
  margin-top: 0.05rem;
  flex-shrink: 0;
}

/* Phosphor icon family (CSI ver2 only). Regular weight in tiles; fill on solid CTAs. */
.icon-tile i.ph,
.icon-tile i.ph-fill {
  font-size: 1em;
  line-height: 1;
}

.btn-primary i.ph-fill {
  font-size: 1.2rem;
  margin-right: 0.28em;
  vertical-align: -0.12em;
}

.csi-problem-head .icon-tile,
.csi-solution-head .icon-tile {
  margin-bottom: 0.1rem;
}

.csi-solution-head .icon-tile {
  margin-inline: auto;
}

.csi-use-case-pill > i.ph,
.csi-use-case-pill > i.ph-fill {
  font-size: 1.05rem;
  line-height: 1;
  color: #0D9488;
  flex-shrink: 0;
}

.csi-use-case-pill:hover > i.ph,
.csi-use-case-pill:hover > i.ph-fill {
  color: #ffffff;
}

.topology-integration-list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.topology-integration-list li > i.ph {
  font-size: 1rem;
  color: #0E7490;
  flex-shrink: 0;
}






/* ===== INCORPORATED: chatterbox_demo_showcase.css ===== */

/* ==========================================================================
   Chatterbox Interactive Showcase Component
   Reuses the authentic presales preview chat app tokens and styling (prospect-preview-chat.css)
   ========================================================================== */

.wa-showcase-section {
  position: relative;
  width: 100%;
  margin-top: 1.5rem;
}

/* Tab selector controls */
.wa-showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
  justify-content: center;
}

.wa-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-body);
  background: var(--surface-card, rgba(255, 255, 255, 0.7));
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.wa-tab-btn:hover {
  background: var(--surface-card-hover, #ffffff);
  border-color: var(--color-ocean);
  color: var(--color-ocean-dark, #0b5347);
  transform: translateY(-1px);
}

.wa-tab-btn.is-active {
  background: var(--color-ocean, #0f6b5c);
  color: #ffffff;
  border-color: var(--color-ocean);
  box-shadow: 0 4px 12px rgba(15, 107, 92, 0.28);
}

.wa-tab-btn i {
  font-size: 1rem;
}

/* Mobile Phone Device Shell */
.wa-chat-window {
  width: 100%;
  max-width: 414px;
  height: 620px;
  margin: 0 auto;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.38), 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 10px solid #1c2624;
  background: #ece4dc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Smartphone Notch / Speaker Grill */
.wa-phone-notch {
  width: 100%;
  height: 20px;
  background: #1c2624;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 20;
}

.wa-phone-speaker {
  width: 50px;
  height: 4px;
  border-radius: 4px;
  background: #334440;
}

/* Header styling matching ProspectPreviewChat */
.wa-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #12796a 0%, #0b5347 100%);
  color: #ffffff;
  z-index: 10;
}

.wa-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.wa-identity {
  flex: 1;
  min-width: 0;
}

.wa-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #ffffff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-status {
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.wa-brand-sub {
  font-size: 0.71rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.wa-reg,
sup.wa-reg,
.reg {
  font-size: 0.85em;
  position: relative;
  top: -0.38em;
  margin-left: 0.5px;
  line-height: 0;
  vertical-align: baseline;
  font-weight: 600;
}

.wa-security-banner {
  align-self: center;
  background: rgba(255, 243, 205, 0.92);
  border: 1px solid rgba(255, 224, 138, 0.92);
  color: #5c4300;
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
  .wa-security-banner {
    background: rgba(45, 38, 18, 0.92);
    border-color: rgba(90, 75, 30, 0.92);
    color: #f7e6a6;
  }
}

.wa-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d366;
  display: inline-block;
}

/* Language selector pill */
.wa-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.76rem;
  font-weight: 500;
  color: #ffffff;
  transition: background 0.2s ease;
}

.wa-lang-pill i {
  font-size: 0.82rem;
}

/* Header Action Buttons (Phone & Clear Chat) */
.wa-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.wa-header-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.18s ease, transform 0.12s ease;
}

.wa-header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.06);
}

.wa-header-icon-btn:active {
  transform: scale(0.95);
}

/* Quick Follow-Up Prompt Chips Container & Buttons */
.wa-prompts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 3px 0 6px 0;
  max-width: 82%;
  align-self: flex-start;
  animation: waPromptsSlideIn 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes waPromptsSlideIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.wa-prompt-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 5px 10px;
  font-size: 0.76rem;
  font-weight: 500;
  color: #0f6b5c;
  background: #ffffff;
  border: 1px solid rgba(15, 107, 92, 0.2);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.wa-prompt-btn:hover {
  background: rgba(15, 107, 92, 0.05);
  border-color: #0f6b5c;
  transform: translateY(-1px);
}

.wa-prompt-btn:active {
  transform: translateY(0) scale(0.99);
}

.wa-prompt-btn::after {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid #0f6b5c;
  border-top: 1.5px solid #0f6b5c;
  transform: rotate(45deg);
  opacity: 0.75;
}

@media (prefers-color-scheme: dark) {
  .wa-prompt-btn {
    background: #1b2622;
    border-color: rgba(111, 220, 187, 0.25);
    color: #6fdcbb;
  }
  .wa-prompt-btn:hover {
    background: rgba(111, 220, 187, 0.12);
    border-color: #6fdcbb;
  }
  .wa-prompt-btn::after {
    border-color: #6fdcbb;
  }
}

/* Chat Message Log Canvas */
.wa-log {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #ece4dc;
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Chat Bubbles */
.wa-bubble {
  max-width: 82%;
  padding: 9px 13px 7px 13px;
  border-radius: 14px;
  position: relative;
  font-size: 0.92rem;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  animation: waBubbleAppear 0.25s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  word-wrap: break-word;
}

@keyframes waBubbleAppear {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.wa-bubble-user {
  align-self: flex-end;
  background: #dcf6c8;
  color: #111b21;
  border-bottom-right-radius: 2px;
}

.wa-user-typing {
  min-width: 94px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wa-user-typing-label {
  font-size: 0.82rem;
  font-weight: 600;
}

.wa-user-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.wa-user-typing .wa-typing-dot {
  width: 5px;
  height: 5px;
  background: #38715f;
}

.wa-bubble-bot {
  align-self: flex-start;
  background: #ffffff;
  color: #111b21;
  border-bottom-left-radius: 2px;
}

/* Derivative Translated Message Card matching ProspectPreviewChat */
.wa-bubble-translated {
  align-self: flex-start;
  background: #f4f9f6;
  color: #111b21;
  border-left: 3px solid #0f6b5c;
  border-bottom-left-radius: 2px;
  margin-top: 4px;
}

.wa-trans-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #0f6b5c;
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(15, 107, 92, 0.12);
  width: 100%;
}

.wa-trans-badge i {
  font-size: 0.78rem;
}

@media (prefers-color-scheme: dark) {
  .wa-bubble-translated {
    background: #13221e;
    color: #e9edef;
    border-left-color: #6fdcbb;
  }
  .wa-trans-badge {
    color: #6fdcbb;
    border-bottom-color: rgba(111, 220, 187, 0.15);
  }
}

.wa-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.68rem;
  color: rgba(17, 27, 33, 0.55);
}

.wa-bubble-meta-time {
  margin-left: auto;
}

/* Per-Message Action Buttons (Play & Translate) matching ProspectPreviewChat */
.wa-msg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.wa-msg-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(15, 107, 92, 0.18);
  background: rgba(15, 107, 92, 0.04);
  color: #0f6b5c;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wa-msg-act-btn:hover {
  background: rgba(15, 107, 92, 0.12);
  border-color: #0f6b5c;
}

.wa-msg-act-btn.is-playing {
  background: #0f6b5c;
  color: #ffffff;
  border-color: #0f6b5c;
}

.wa-msg-act-btn i {
  font-size: 0.78rem;
}

/* Inline Translate Popover Menu */
.wa-msg-translate-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  padding: 4px;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-width: 220px;
  animation: waPopoverAppear 0.18s ease forwards;
}

@keyframes waPopoverAppear {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.wa-lang-option {
  padding: 5px 8px;
  font-size: 0.74rem;
  font-weight: 500;
  color: #111b21;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  transition: background 0.12s ease;
}

.wa-lang-option:hover {
  background: rgba(15, 107, 92, 0.1);
  color: #0f6b5c;
}

@media (prefers-color-scheme: dark) {
  .wa-msg-act-btn {
    border-color: rgba(111, 220, 187, 0.25);
    background: rgba(111, 220, 187, 0.08);
    color: #6fdcbb;
  }
  .wa-msg-act-btn:hover {
    background: rgba(111, 220, 187, 0.18);
    border-color: #6fdcbb;
  }
  .wa-msg-translate-popover {
    background: #1b2622;
    border-color: rgba(111, 220, 187, 0.3);
  }
  .wa-lang-option {
    color: #e9edef;
  }
  .wa-lang-option:hover {
    background: rgba(111, 220, 187, 0.15);
    color: #6fdcbb;
  }
}

.wa-bubble-meta i.bi-check2-all,
.wa-bubble-meta i.ph-checks {
  color: #53bdeb;
  font-size: 0.82rem;
}

/* Source Citation Badge in Bot Bubble */
.wa-cite-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: rgba(15, 107, 92, 0.08);
  color: #0f6b5c;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Typing Indicator Dots */
.wa-typing {
  align-self: flex-start;
  background: #ffffff;
  padding: 10px 16px;
  border-radius: 14px;
  border-bottom-left-radius: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wa-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8696a0;
  animation: waTypingBounce 1.4s infinite ease-in-out both;
}

.wa-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.wa-typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes waTypingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Interactive Audio Player Bubble */
.wa-audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  min-width: 220px;
}

.wa-audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f6b5c;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.wa-audio-play-btn:hover {
  transform: scale(1.05);
}

.wa-audio-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 24px;
}

.wa-audio-bar {
  width: 3px;
  height: 12px;
  background: #0f6b5c;
  border-radius: 2px;
  opacity: 0.4;
}

.wa-audio-player.is-playing .wa-audio-bar {
  opacity: 1;
  animation: waWaveEq 0.8s infinite ease-in-out alternate;
}

.wa-audio-bar:nth-child(1) { height: 8px; animation-delay: 0.1s; }
.wa-audio-bar:nth-child(2) { height: 16px; animation-delay: 0.2s; }
.wa-audio-bar:nth-child(3) { height: 22px; animation-delay: 0.3s; }
.wa-audio-bar:nth-child(4) { height: 10px; animation-delay: 0.15s; }
.wa-audio-bar:nth-child(5) { height: 18px; animation-delay: 0.25s; }
.wa-audio-bar:nth-child(6) { height: 14px; animation-delay: 0.35s; }
.wa-audio-bar:nth-child(7) { height: 20px; animation-delay: 0.05s; }
.wa-audio-bar:nth-child(8) { height: 12px; animation-delay: 0.4s; }

@keyframes waWaveEq {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.3); }
}

.wa-audio-time {
  font-size: 0.7rem;
  color: #667781;
  font-weight: 500;
}

/* Composer Input Area */
.wa-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f0f2f5;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.wa-input-field {
  flex: 1;
  background: #ffffff;
  border: 1px solid #d1d7db;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 0.9rem;
  color: #111b21;
  outline: none;
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.wa-input-field span.wa-placeholder {
  color: #8696a0;
}

.wa-input-field .wa-typed-text {
  color: #111b21;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}

.wa-input-field .wa-cursor {
  display: inline-block;
  margin-left: 2px;
  color: #0f6b5c;
  font-weight: 700;
  animation: waCursorBlink 0.6s infinite;
}

@keyframes waCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Voice Input Recording Animation Overlay */
.wa-input-recording {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ea4335;
  font-size: 0.85rem;
  font-weight: 600;
  width: 100%;
}

.wa-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ea4335;
  animation: waRecBlink 0.8s infinite alternate;
}

@keyframes waRecBlink {
  from { opacity: 0.2; }
  to { opacity: 1; }
}

.wa-rec-waves {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.wa-rec-wave-bar {
  width: 2px;
  height: 12px;
  background: #ea4335;
  border-radius: 1px;
  animation: waWaveEq 0.6s infinite ease-in-out alternate;
}

/* Pulsing Mic Button */
.wa-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #0f6b5c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.2s ease, transform 0.15s ease;
}

.wa-icon-btn.is-pulsing {
  background: #ea4335;
}

.wa-icon-btn.is-pulsing::after {
  content: '';
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: 50%;
  border: 2px solid rgba(234, 67, 53, 0.5);
  animation: waMicPulse 1.2s infinite ease-out;
}

@keyframes waMicPulse {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Dark Mode Adaptation */
@media (prefers-color-scheme: dark) {
  .wa-chat-window {
    background: #0e1512;
    border-color: rgba(111, 220, 187, 0.2);
  }
  .wa-log {
    background-color: #0e1512;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  }
  .wa-bubble-user {
    background: #174c3d;
    color: #e8efea;
  }
  .wa-bubble-bot {
    background: #1b2622;
    color: #e8efea;
  }
  .wa-bubble-meta {
    color: rgba(232, 239, 234, 0.6);
  }
  .wa-typing {
    background: #1b2622;
  }
  .wa-composer {
    background: #172120;
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  .wa-input-field {
    background: #1b2622;
    border-color: #3b4b44;
    color: #e8efea;
  }
  .wa-input-field span.wa-placeholder {
    color: #aab7b1;
  }
  .wa-input-field .wa-typed-text {
    color: #f2f7f4;
  }
  .wa-input-field .wa-cursor {
    color: #6fdcbb;
  }
  .wa-user-typing .wa-typing-dot {
    background: #9ce6cf;
  }
  .wa-audio-play-btn {
    background: #10715f;
  }
  .wa-audio-bar {
    background: #6fdcbb;
  }
  .wa-cite-badge {
    background: rgba(111, 220, 187, 0.12);
    color: #6fdcbb;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-typing-dot,
  .wa-cursor {
    animation: none;
  }

  .wa-typing-dot {
    opacity: 0.75;
    transform: none;
  }
}


/* ==========================================================================
   CSI ver2 stand-alone polish (touch targets, memory/not icons, tablet rollout,
   orbit contain). Must stay last in this sheet. Copy is not changed here.
   ========================================================================== */

:root {
  --color-body: var(--ink);
  --color-ocean: #0D9488;
  --color-ocean-dark: #0B5F58;
  --color-border: var(--hairline);
  --surface-card: rgba(255, 255, 255, 0.92);
  --surface-card-hover: #ffffff;
}

/* 1. Touch targets: keep glyph size, grow hit area to 44px. */
.csi-channel-info-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 0.95rem !important;
}

.csi-channel-info-btn i {
  font-size: 0.95rem;
  line-height: 1;
}

.csi-use-case-pill,
.csi-trust-pill {
  min-height: 44px !important;
  align-items: center !important;
}

.footer-btn {
  min-height: 44px;
  padding: 0.5rem 0.95rem;
}

.wa-tab-btn {
  min-height: 44px;
  padding: 0.55rem 1rem;
}

.csi-not-toggle {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

.csi-not-toggle i {
  font-size: 0.82rem !important;
  line-height: 1;
}

/* 2. Conversation Memory channel marks. Coral counters stay; ocean glyphs match Voice / SMS / Web App. */
.csi-memory-steps li > span {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
}

.csi-memory-steps li > span > i.ph {
  color: #0D9488;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}

/* 3. "What Chatterbox is not" semantic icons, same ocean tiles as the rest of the page. */
.csi-not-card {
  align-items: center;
  gap: 0.45rem;
  min-height: clamp(108px, 12vw, 128px) !important;
}

.csi-not-card > .icon-tile {
  margin: 0.1rem auto 0.05rem;
  flex: 0 0 auto;
}

.csi-not-card h4 {
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}

/* 4. Tablet rollout: 2x2 from hamburger breakpoint, stack on phones. Arrows hide in the 2x2 so they do not occupy grid cells. */
@media (max-width: 1199px) {
  .csi-rollout-steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-direction: unset !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .rollout-step-arrow {
    display: none !important;
  }

  .rollout-step,
  .rollout-step:not(.rollout-step--preview) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: unset !important;
  }
}

@media (max-width: 700px) {
  .csi-rollout-steps {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .rollout-step-arrow {
    display: grid !important;
    transform: rotate(90deg) !important;
    animation: none !important;
  }
}

/* 5. Hero orbit: inset radius and contain chips inside the well. Labels unchanged. */
.hero-visual {
  overflow: hidden;
}

.orbit {
  width: min(420px, 80%);
  --r: 148px;
}

.orbit-chip {
  padding: 0.32rem 0.58rem;
  font-size: 0.7rem;
  gap: 0.28rem;
}

.orbit-chip i {
  font-size: 0.85rem;
}

@media (max-width: 1080px) {
  .orbit {
    --r: 138px;
  }
}

/* --------------------------------------------------------------------------
   2026-08-16 layout/colour polish
   Collapsed accordion tiles keep their own height. Disqualify and topology
   core restore readable surface/text pairings. Language fact gets internal
   rhythm. Triangle labels become pills.
   -------------------------------------------------------------------------- */

.csi-problem-triangle,
.csi-channel-grid,
.language-modes {
  align-items: start !important;
}

.csi-problem-card,
details.csi-channel-card,
.language-mode {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

.csi-problem-summary,
summary.csi-channel-summary-head,
summary.language-mode-summary {
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

.disqualify {
  background: var(--grad-deep) !important;
  border: 1px solid rgba(127, 233, 220, 0.35) !important;
  border-left: 1px solid rgba(127, 233, 220, 0.35) !important;
  box-shadow: 0 16px 40px rgba(6, 24, 31, 0.18), 0 0 28px rgba(45, 212, 191, 0.12) !important;
}

.disqualify-lead {
  color: #F4FBFC;
}

.disqualify-note {
  color: rgba(228, 246, 250, 0.9);
}

.disqualify-note strong {
  color: #A7F3EA;
}

.topology-core-ring {
  background: linear-gradient(135deg, #06222A 0%, #0B4A5B 50%, #072E38 100%) !important;
  border-color: rgba(45, 212, 191, 0.7) !important;
  box-shadow: 0 0 36px rgba(13, 148, 136, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.16) !important;
}

.topology-core-ring h4 {
  color: #ff8068;
}

.topology-core-ring span {
  color: #EAF9FC;
  border-top-color: rgba(255, 128, 104, 0.45);
}

.language-story {
  align-items: center;
}

.language-fact {
  padding: clamp(1.5rem, 3.2vw, 2.25rem) clamp(1.45rem, 3vw, 2.05rem) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  box-sizing: border-box;
}

.language-fact-copy {
  margin: 0;
}

.language-fact-copy strong {
  margin-bottom: 0.45rem;
}

.language-source {
  margin-top: 0;
  line-height: 1.55;
}

.language-inclusion-note {
  margin: 0 !important;
}

.language-fact .btn {
  margin-top: 0.35rem;
  align-self: flex-start;
}

.triangle-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.28rem 0.72rem;
  margin: 0.12rem 0.15rem 0.72rem;
}

/* --------------------------------------------------------------------------
   Hero Eyebrow & Contrast Polish (2026-08-16)
   - "SIMPLE" in hero eyebrow gets Chatterbox blue shaded/faded styling
   - .disqualify / .disqualify.in-view dark ocean high-contrast harmony
   - .topology-core-ring contrast with coral title and glowing border
   -------------------------------------------------------------------------- */

.hero-eyebrow-blue {
  display: inline !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #0284C7 0%, #0891B2 50%, #22D3EE 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 4px rgba(8, 145, 178, 0.3)) !important;
}

.disqualify,
.disqualify.in-view {
  background: linear-gradient(150deg, #06222A 0%, #0A3F4C 48%, #0C4E58 100%) !important;
  border: 1px solid rgba(45, 212, 191, 0.42) !important;
  border-left: 1px solid rgba(45, 212, 191, 0.42) !important;
  box-shadow: 0 16px 40px rgba(6, 24, 31, 0.22), 0 0 28px rgba(45, 212, 191, 0.14) !important;
}

.disqualify-lead {
  color: #F4FBFC !important;
}

.disqualify-note {
  color: rgba(228, 246, 250, 0.92) !important;
}

.disqualify-note strong {
  color: #7FE9DC !important;
}

.disqualify-icon {
  background: rgba(45, 212, 191, 0.16) !important;
  border: 1px solid rgba(45, 212, 191, 0.4) !important;
  color: #7FE9DC !important;
}

.topology-core-ring {
  background: linear-gradient(135deg, #06222A 0%, #0B4A5B 50%, #072E38 100%) !important;
  border: 2px solid rgba(45, 212, 191, 0.75) !important;
  box-shadow: 0 12px 36px rgba(11, 74, 91, 0.35), 0 0 28px rgba(45, 212, 191, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

.topology-core-ring h4 {
  color: #FF8068 !important;
  text-shadow: 0 1px 8px rgba(255, 128, 104, 0.35) !important;
}

.topology-core-ring span {
  color: #EAF9FC !important;
  border-top: 1px solid rgba(255, 128, 104, 0.45) !important;
}

/* ==========================================================================
   Comprehensive Section-by-Section Visual Polish (2026-08-16)
   Covers Slices 1 through 5:
   - Slice 1: Hero Mobile Languages & Problem Triangle
   - Slice 2: Topology Channels & Conversation Memory Steps
   - Slice 3: Interactive Proof Showcase & Simulated Web App Frame
   - Slice 4: Multilingual Access & 4-Stage Rollout Cards
   - Slice 5: "What Chatterbox Is Not", Use Cases & FAQ Polish
   ========================================================================== */

/* --------------------------------------------------------------------------
   Slice 1: Hero Mobile Languages & Problem Triangle Hover
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero-languages {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem 0.65rem !important;
    padding: 0 !important;
    margin: 1.4rem auto 0 !important;
    list-style: none !important;
  }

  .hero-languages li {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #0B5F58 !important;
    padding: 0.28rem 0.75rem !important;
    border-radius: var(--r-full, 999px) !important;
    background: rgba(13, 148, 136, 0.08) !important;
    border: 1px solid rgba(13, 148, 136, 0.24) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 2px 8px rgba(10, 22, 40, 0.04) !important;
  }
}

.csi-problem-card {
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 260ms ease,
              border-color 260ms ease !important;
}

.csi-problem-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(13, 148, 136, 0.44) !important;
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.08) !important;
}

.csi-problem-card:focus-within {
  border-color: rgba(13, 148, 136, 0.65) !important;
  outline: 2px solid #0D9488 !important;
  outline-offset: 2px !important;
}

.csi-problem-chevron {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

details.csi-problem-card[open] .csi-problem-chevron,
details.csi-channel-card[open] .csi-problem-chevron,
details.problem-summary[open] .csi-problem-chevron,
details.csi-connecting-summary[open] .csi-problem-chevron {
  transform: rotate(180deg) !important;
}

.csi-connecting-summary {
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.csi-connecting-summary:hover,
details.csi-connecting-summary[open] {
  border-color: rgba(13, 148, 136, 0.5) !important;
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.08) !important;
}

/* --------------------------------------------------------------------------
   Slice 2: Topology Channels & Conversation Memory Polish
   -------------------------------------------------------------------------- */
.topology-channel {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms ease,
              box-shadow 240ms ease !important;
}

.topology-channel:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(13, 148, 136, 0.52) !important;
  box-shadow: 0 10px 26px rgba(10, 87, 73, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.topology-channel > i {
  box-shadow: 0 2px 8px rgba(255, 128, 104, 0.4) !important;
  background: #ff8068 !important;
  color: #fff8f5 !important;
}

.topology-integration-list li {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}

.topology-integration-list li:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(13, 148, 136, 0.48) !important;
  box-shadow: 0 6px 18px rgba(10, 87, 73, 0.1) !important;
}

.csi-memory-strip {
  border-radius: var(--r-xl, 24px) !important;
}

.csi-memory-steps li {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(13, 148, 136, 0.22) !important;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease !important;
}

.csi-memory-steps li:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(13, 148, 136, 0.48) !important;
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.08) !important;
}

.csi-memory-steps li::before {
  color: #ff8068 !important;
  font-family: var(--serif) !important;
}

/* Mobile/Tablet topology realignment: all customer and admin cards share uniform width */
@media (max-width: 980px) {
  .topology-side--customers,
  .topology-side--administration {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .topology-side--customers .topology-zone-title,
  .topology-side--administration .topology-zone-title {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .topology-side--customers .topology-channel-list,
  .topology-side--administration .topology-channel-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 18rem !important;
    margin: 0 auto !important;
    gap: 0.65rem !important;
  }

  .topology-side--customers .topology-channel,
  .topology-side--administration .topology-channel {
    width: 100% !important;
    max-width: 18rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.72rem !important;
    padding: 0.58rem 1rem !important;
    text-align: center !important;
  }
}

/* --------------------------------------------------------------------------
   Slice 3: Proof Tabs & Simulated Web App Device Frame
   -------------------------------------------------------------------------- */
.csi-proof-tab {
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}

.csi-proof-tab:hover:not(.is-active) {
  transform: translateY(-1px) !important;
  border-color: rgba(13, 148, 136, 0.42) !important;
  background: rgba(13, 148, 136, 0.08) !important;
}

.csi-proof-tab.is-active {
  box-shadow: 0 4px 16px rgba(10, 65, 75, 0.22) !important;
}

.csi-proof-panel.is-active {
  animation: csi-panel-fade 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes csi-panel-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.csi-webapp-window.wa-chat-window {
  border-radius: var(--r-xl, 24px) !important;
  border: 1.5px solid rgba(12, 39, 48, 0.2) !important;
  box-shadow: 0 20px 50px rgba(10, 22, 40, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.85) !important;
  overflow: hidden !important;
}

.csi-webapp-window .wa-header {
  background: linear-gradient(180deg, #0C4A6E 0%, #0C2730 100%) !important;
  color: #ffffff !important;
  padding: 0.85rem 1.1rem !important;
}

.csi-webapp-window .wa-header .wa-name {
  color: #ffffff !important;
}

.csi-webapp-window .wa-header .wa-status {
  color: #A7F3EA !important;
}

.csi-webapp-window .wa-avatar {
  background: linear-gradient(135deg, #0D9488 0%, #2DD4BF 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4) !important;
}

.csi-webapp-window .wa-bubble-user {
  background: #d7f3ee !important;
  color: #0C2730 !important;
  border-radius: 16px 16px 4px 16px !important;
  box-shadow: 0 2px 8px rgba(10, 87, 73, 0.08) !important;
}

.csi-webapp-window .wa-bubble-bot {
  background: #fffdf8 !important;
  color: #0C2730 !important;
  border: 1px solid rgba(13, 148, 136, 0.15) !important;
  border-radius: 16px 16px 16px 4px !important;
  box-shadow: 0 2px 10px rgba(10, 22, 40, 0.06) !important;
}

/* --------------------------------------------------------------------------
   Slice 4: Multilingual Access & 4-Stage Rollout Cards
   -------------------------------------------------------------------------- */
.language-fact-copy > strong:first-child,
.language-fact-copy > strong:first-of-type {
  display: block !important;
  font-family: var(--serif) !important;
  font-size: clamp(3rem, 7vw, 4.6rem) !important;
  line-height: 1 !important;
  background: var(--grad-ocean-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 0.45rem !important;
}

.language-fact-copy strong:not(:first-child),
.language-fact-copy strong:not(:first-of-type),
.language-fact-copy b {
  display: inline !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink, #0C2730) !important;
  color: var(--ink, #0C2730) !important;
}

/* Equal height across language mode cards when all are collapsed */
@media (min-width: 701px) {
  .language-modes {
    align-items: stretch !important;
  }

  .language-mode {
    height: 100% !important;
    min-height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }

  summary.language-mode-summary {
    min-height: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* When any card is open, preserve natural height and avoid stretching collapsed siblings */
  .language-modes:has(.language-mode[open]) {
    align-items: start !important;
  }

  .language-modes:has(.language-mode[open]) .language-mode:not([open]) {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }

  .language-modes:has(.language-mode[open]) .language-mode:not([open]) summary.language-mode-summary {
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  .language-mode[open] {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }

  .language-mode[open] summary.language-mode-summary {
    min-height: auto !important;
    flex: 0 0 auto !important;
  }
}

.language-mode {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms ease,
              box-shadow 240ms ease !important;
}

.language-mode:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(13, 148, 136, 0.48) !important;
  box-shadow: 0 10px 28px rgba(10, 22, 40, 0.07) !important;
}

.rollout-step {
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 260ms ease,
              border-color 260ms ease !important;
}

.rollout-step:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(13, 148, 136, 0.48) !important;
  box-shadow: 0 14px 34px rgba(10, 22, 40, 0.09) !important;
}

.rollout-step--preview {
  border-color: rgba(13, 148, 136, 0.45) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 252, 250, 0.92) 100%) !important;
}

.rollout-step--preview .rollout-exposure-tag {
  background: rgba(13, 148, 136, 0.12) !important;
  color: #0D9488 !important;
  border: 1px solid rgba(13, 148, 136, 0.3) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Slice 5: "What Chatterbox Is Not", Use Cases & FAQ Polish
   -------------------------------------------------------------------------- */
.csi-not-card {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 240ms ease,
              box-shadow 240ms ease !important;
}

.csi-not-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(13, 148, 136, 0.44) !important;
  box-shadow: 0 10px 26px rgba(10, 22, 40, 0.07) !important;
}

.csi-not-card.is-active {
  border-color: rgba(13, 148, 136, 0.55) !important;
  box-shadow: 0 14px 34px rgba(10, 87, 73, 0.12), 0 0 20px rgba(34, 211, 238, 0.1) !important;
  transform: translateY(-2px) !important;
}

.csi-not-toggle {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease, color 200ms ease !important;
}

.csi-not-card.is-active .csi-not-toggle,
.csi-not-toggle[aria-expanded="true"] {
  transform: rotate(180deg) !important;
  background: #0B6480 !important;
  color: #ffffff !important;
  border-color: #0B6480 !important;
  box-shadow: 0 2px 8px rgba(11, 100, 128, 0.35) !important;
}

.csi-use-case-pill,
.csi-trust-pill {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease !important;
}

.csi-use-case-pill:hover,
.csi-trust-pill:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(13, 148, 136, 0.5) !important;
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.18), 0 0 0 1px rgba(13, 148, 136, 0.35) !important;
}

.faq-item {
  transition: border-color 240ms ease, box-shadow 240ms ease !important;
}

.faq-item:hover {
  border-color: rgba(13, 148, 136, 0.45) !important;
}

.faq-item.is-open {
  border-color: rgba(13, 148, 136, 0.52) !important;
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.06) !important;
}

.faq-chevron {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), color 240ms ease !important;
}

.faq-question[aria-expanded="true"] .faq-chevron,
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg) !important;
  color: #0F766E !important;
}

/* Global focus-visible accessibility ring */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
.rollout-step:focus-visible,
.demo-panel:focus-visible {
  outline: 2px solid #0D9488 !important;
  outline-offset: 3px !important;
}