/* colors_and_type.css */
/* ============================================================
   CIOS — Colors & Typography
   Customer Intelligence Operating System
   Brand Guidelines v2.0 (January 2026)
   ============================================================ */

/* Fonts — Montserrat from Google Fonts.
   SUBSTITUTION NOTE: No TTFs were shipped in the brand package.
   We load Montserrat from Google Fonts as the closest 1:1 match
   (it IS the brand typeface). Swap the @import for self-hosted
   files in production if needed. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..800;1,300..700&display=swap');

:root {
  /* ---------- Brand Palette ---------- */

  /* Primary — the hero color. CIOS = the signal. */
  --cios-chartreuse:        #DFFF1A;   /* Primary */
  --cios-chartreuse-deep:   #CFE500;   /* Tertiary / active state */

  /* Ink — the foundation. Intelligence, depth, trust. */
  --cios-ink:               #001121;   /* Deep navy-black — signature bg */
  --cios-black:             #000000;

  /* Neutrals */
  --cios-white:             #FFFFFF;
  --cios-bright-gray:       #EDEDED;
  --cios-cool-gray:         #A5B0B8;

  /* Extended neutrals (derived, used across UI) */
  --cios-ink-80:            #1A2A3A;
  --cios-ink-60:            #4A5764;
  --cios-ink-40:            #7C8691;
  --cios-ink-20:            #C4CAD0;
  --cios-ink-10:            #E1E4E7;
  --cios-ink-05:            #F4F5F6;

  /* Semantic accents (functional, kept quiet against the chartreuse) */
  --cios-success:           #34C77B;
  --cios-warning:           #F5B544;
  --cios-danger:            #E15454;
  --cios-info:              #4A8FE0;

  /* ---------- Semantic colors (light theme default) ---------- */
  --bg:                     var(--cios-white);
  --bg-subtle:              var(--cios-bright-gray);
  --bg-elevated:            var(--cios-white);
  --bg-inverse:             var(--cios-ink);

  --fg-1:                   var(--cios-ink);       /* primary text */
  --fg-2:                   var(--cios-ink-60);    /* secondary */
  --fg-3:                   var(--cios-ink-40);    /* tertiary / captions */
  --fg-on-ink:              var(--cios-white);
  --fg-on-chartreuse:       var(--cios-ink);

  --accent:                 var(--cios-chartreuse);
  --accent-hover:            var(--cios-chartreuse-deep);
  --accent-on:              var(--cios-ink);

  --border:                 var(--cios-ink-10);
  --border-strong:          var(--cios-ink-20);
  --ring:                   color-mix(in oklab, var(--cios-chartreuse) 60%, transparent);

  /* Primary CTA — flips on dark so an ink button never sits on an ink page */
  --cta-bg:                 var(--cios-ink);
  --cta-fg:                 var(--cios-white);
  /* Status text sitting directly on a surface (chips keep their own pastel pairs) */
  --success-fg:             var(--cios-ink);

  /* ---------- Typography ---------- */
  /* Brand face for marketing / display. Product UI uses --font-sans (DM Sans). */
  --font-brand:             'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans:              'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:              'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fw-regular:             400;
  --fw-medium:              500;
  --fw-semibold:            600;
  --fw-bold:                700;
  --fw-extrabold:           800;

  /* Type scale — confident, spacious, modern */
  --fs-display:             72px;
  --fs-h1:                  56px;
  --fs-h2:                  40px;
  --fs-h3:                  28px;
  --fs-h4:                  22px;
  --fs-body-lg:             18px;
  --fs-body:                16px;
  --fs-body-sm:             14px;
  --fs-caption:             12px;
  --fs-eyebrow:             12px;

  /* Line heights */
  --lh-tight:               1.05;
  --lh-snug:                1.2;
  --lh-normal:              1.5;
  --lh-relaxed:             1.65;

  /* Letter-spacing — Montserrat is geometric, slightly open tracking on display */
  --tr-display:             -0.02em;
  --tr-heading:             -0.01em;
  --tr-body:                0;
  --tr-eyebrow:             0.14em;    /* ALL CAPS EYEBROWS */

  /* ---------- Spacing (4px base) ---------- */
  --space-1:                4px;
  --space-2:                8px;
  --space-3:                12px;
  --space-4:                16px;
  --space-5:                20px;
  --space-6:                24px;
  --space-8:                32px;
  --space-10:               40px;
  --space-12:               48px;
  --space-16:               64px;
  --space-20:               80px;
  --space-24:               96px;

  /* ---------- Radii ---------- */
  --r-xs:                   4px;
  --r-sm:                   8px;
  --r-md:                   12px;
  --r-lg:                   16px;
  --r-xl:                   20px;
  --r-2xl:                  24px;
  --r-pill:                 999px;
  /* Logomark container uses an 18% soft square radius */
  --r-logo:                 18%;

  /* ---------- Shadows — restrained; CIOS is calm & precise ---------- */
  --shadow-xs:              0 1px 2px rgba(0, 17, 33, 0.04);
  --shadow-sm:              0 1px 3px rgba(0, 17, 33, 0.06), 0 1px 2px rgba(0, 17, 33, 0.04);
  --shadow-md:              0 4px 12px rgba(0, 17, 33, 0.08);
  --shadow-lg:              0 12px 32px rgba(0, 17, 33, 0.10);
  --shadow-xl:              0 24px 64px rgba(0, 17, 33, 0.14);

  /* Chartreuse glow — for hero CTAs on dark */
  --glow-chartreuse:        0 0 0 1px rgba(223, 255, 26, 0.3), 0 8px 24px rgba(223, 255, 26, 0.25);

  /* ---------- Motion ---------- */
  --ease-standard:          cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis:          cubic-bezier(0.3, 0, 0.2, 1);
  --dur-fast:               120ms;
  --dur-med:                220ms;
  --dur-slow:               360ms;
}

/* ---------- Dark surface (CIOS signature) ---------- */
/* :root[data-theme] beats shell_v2/tokens.css's plain :root regardless of load order */
:root[data-theme="dark"],
.cios-dark,
[data-theme="dark"] {
  --bg:              var(--cios-ink);
  --bg-subtle:       var(--cios-ink-80);
  --bg-elevated:     #0C1D2D;
  --bg-inverse:      var(--cios-white);

  --fg-1:            var(--cios-white);
  --fg-2:            var(--cios-cool-gray);
  --fg-3:            #6B7885;
  --fg-on-ink:       var(--cios-white);

  --border:          #132334;
  --border-strong:   #23374B;

  --cta-bg:          var(--cios-chartreuse);
  --cta-fg:          var(--cios-ink);
  --success-fg:      var(--cios-success);
}

/* ============================================================
   Semantic type classes — use these, don't redeclare
   ============================================================ */
.t-display,
.t-h1, .t-h2, .t-h3, .t-h4,
.t-body-lg, .t-body, .t-body-sm,
.t-caption, .t-eyebrow, .t-mono {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
}

.t-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

.t-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-heading);
}

.t-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
}

.t-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.t-body-lg {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

.t-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.t-body-sm {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.t-caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
}

/* ============================================================
   Base resets that the kits rely on
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* shell.css */
/* ================================================================= */
/* Shell v2 — floating icon rail + dotted canvas                      */
/* ================================================================= */

.shell-v2 {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ---------- Floating brand mark (top-left) ---------- */
.sv2-brand-float {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 52px;
  height: 40px;
  display: grid;
  place-items: center;
  z-index: 3;
}
.sv2-brand-float img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(0,17,33,0.06),
              0 1px 2px rgba(0,17,33,0.04);
}

/* Hoverable expand: workspace label appears on hover */
.sv2-brand-float::after {
  content: attr(data-workspace);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.sv2-brand-float:hover::after { opacity: 1; }

/* ---------- Floating icon rail (middle-left) ---------- */
.sv2-rail {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  padding: 10px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  box-shadow: 0 6px 18px rgba(0,17,33,0.06),
              0 2px 4px rgba(0,17,33,0.04);
  z-index: 3;
  overflow: visible;
  transition: width var(--dur-base) var(--ease-out),
              border-radius var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.sv2-rail:hover {
  width: 220px;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,17,33,0.10),
              0 3px 6px rgba(0,17,33,0.05);
}
.theme-dark .sv2-rail {
  background: var(--bg-elev);
  border-color: var(--border);
}

.sv2-rail-btn {
  position: relative;
  height: 36px;
  width: 36px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  overflow: visible;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              width var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
  flex: 0 0 auto;
}
.sv2-rail-btn > .sv2-rail-btn-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.sv2-rail-btn > .sv2-rail-btn-label {
  opacity: 0;
  transform: translateX(-4px);
  white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  transition-delay: 0ms;
}
.sv2-rail:hover .sv2-rail-btn {
  width: 100%;
}
.sv2-rail:hover .sv2-rail-btn > .sv2-rail-btn-label {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 60ms;
}
.sv2-rail-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.sv2-rail-btn.active {
  color: var(--text);
  background: var(--bg-subtle);
}
.sv2-rail-btn.active::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--ink);
}
.theme-dark .sv2-rail-btn.active::before { background: var(--chartreuse); }

.sv2-rail-btn .sv2-rail-dot {
  position: absolute;
  top: 6px;
  left: 24px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E04332;
  border: 2px solid var(--bg);
}
.theme-dark .sv2-rail-btn .sv2-rail-dot { border-color: var(--bg-elev); }

/* Module count badges.
   - .sv2-rail-count-mini: small corner bubble, visible only when rail is collapsed.
   - .sv2-rail-count: inline pill on the right of the label, visible only when rail is expanded. */
.sv2-rail-btn .sv2-rail-count-mini {
  position: absolute;
  top: 0;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  background: var(--chartreuse);
  color: var(--ink);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg);
  transition: opacity var(--dur-micro) var(--ease-out);
  z-index: 2;
}
.sv2-rail-btn .sv2-rail-count {
  margin-left: auto;
  padding: 1px 7px;
  min-width: 18px;
  height: 16px;
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  flex: 0 0 auto;
}
.sv2-rail-btn.active .sv2-rail-count {
  background: rgba(221,250,8,0.18);
  color: var(--ink);
}
.theme-dark .sv2-rail-btn .sv2-rail-count {
  background: var(--surface);
  color: var(--text-secondary);
}
.theme-dark .sv2-rail-btn.active .sv2-rail-count {
  background: rgba(221,250,8,0.2);
  color: var(--chartreuse);
}
.sv2-rail:hover .sv2-rail-btn .sv2-rail-count-mini { opacity: 0; }
.sv2-rail:hover .sv2-rail-btn .sv2-rail-count { opacity: 1; }

/* Tooltip — only shows when rail is collapsed */
.sv2-rail-btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-out);
  z-index: 5;
}
.sv2-rail:not(:hover) .sv2-rail-btn:hover::after { opacity: 1; }

/* Rail section label — only visible when expanded */
.sv2-rail-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 10px 4px;
  white-space: nowrap;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              max-height var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
}
.sv2-rail:hover .sv2-rail-section-label {
  opacity: 1;
  max-height: 30px;
  transition-delay: 60ms;
}

/* Rail separator between groups — hidden when expanded (section labels take over) */
.sv2-rail-sep {
  width: 22px;
  height: 1px;
  background: var(--border);
  margin: 6px auto;
  transition: opacity var(--dur-base) var(--ease-out),
              margin var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out);
}
.sv2-rail:hover .sv2-rail-sep {
  opacity: 0;
  height: 0;
  margin: 0;
}

/* ---------- Floating bottom-left (bell + avatar) ---------- */
.sv2-corner {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 3;
}
.sv2-corner-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.sv2-corner-btn:hover { background: var(--surface-hover); color: var(--text); }

/* Notification bell wrapper + badge (matches CIOS theme) */
.sv2-bell-wrap { position: relative; display: inline-flex; }
.sv2-bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--chartreuse);
  color: var(--ink);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.sv2-corner-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: 2px solid var(--bg);
  box-shadow: 0 2px 6px rgba(0,17,33,0.08);
}

/* ---------- Canvas ---------- */
.sv2-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* When the shell wraps a module, keep the module clear of the floating rail,
   brand mark, and composer. A thin border groups the module so it reads as a
   panel separate from the floating nav. */
.sv2-canvas > * {
  position: absolute;
  top: 18px;
  right: 18px;
  bottom: 86px;
  left: 86px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0,17,33,0.03);
}
.shell-v2.is-mobile .sv2-canvas > * {
  top: 84px;
  right: 12px;
  bottom: 100px;
  left: 12px;
  border-radius: 12px;
}

/* ---------- Floating blended chat input ---------- */
.sv2-composer-wrap {
  position: absolute;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 160px));
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  z-index: 4;
}
.sv2-composer {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 8px 8px 16px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,17,33,0.06),
              0 2px 6px rgba(0,17,33,0.04);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.theme-dark .sv2-composer {
  background: rgba(12,29,45,0.75);
  border-color: var(--border);
}
.sv2-composer:focus-within {
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0,17,33,0.08),
              0 3px 8px rgba(0,17,33,0.05);
}
.sv2-composer-ta {
  flex: 1;
  min-width: 0;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 0;
  max-height: 120px;
  font-weight: 400;
}
.sv2-composer-ta::placeholder { color: var(--text-muted); }
.sv2-composer-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.sv2-composer-btn:hover { background: var(--surface-hover); color: var(--text); }
.sv2-composer-send {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: var(--bg-subtle);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: not-allowed;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.sv2-composer-send.ready {
  background: var(--chartreuse);
  color: var(--ink);
  cursor: pointer;
}
.sv2-composer-send.ready:hover { background: var(--chartreuse-deep); }

.sv2-composer-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.sv2-composer:focus-within ~ .sv2-composer-hint,
.sv2-composer:hover ~ .sv2-composer-hint { opacity: 1; }

/* ---------- Mobile (≤ 480) ---------- */
.shell-v2.is-mobile .sv2-rail,
.shell-v2.is-mobile .sv2-corner { display: none; }

.sv2-mobile-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 52px 14px 0;
  height: 96px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  z-index: 3;
}
.sv2-mobile-menu {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.sv2-mobile-bell {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
}
.sv2-mobile-topbar .sv2-bell-wrap {
  margin-left: auto;
}
.sv2-mobile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* On mobile, composer spans edge to edge */
.shell-v2.is-mobile .sv2-composer-wrap {
  left: 12px;
  right: 12px;
  transform: none;
  width: auto;
  bottom: 14px;
}

/* On mobile, brand float becomes smaller */
.shell-v2.is-mobile .sv2-brand-float {
  top: 52px;
  left: 14px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.shell-v2.is-mobile .sv2-brand-float img {
  width: 22px;
  height: 22px;
}

/* Mobile drawer */
.sv2-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,17,33,0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 10;
}
.sv2-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.sv2-drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 56px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 11;
  overflow-y: auto;
}
.sv2-drawer.open { transform: translateX(0); }

.sv2-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sv2-drawer-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 10px 8px;
}
.sv2-drawer-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.sv2-drawer-btn:hover { background: var(--surface-hover); color: var(--text); }
.sv2-drawer-btn.active { background: var(--ink); color: var(--white); }
.sv2-drawer-btn.active .sv2-drawer-btn-icon { color: var(--chartreuse); }
.sv2-drawer-btn-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.sv2-drawer-btn-label { flex: 1; }
.sv2-drawer-btn-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.sv2-drawer-btn.active .sv2-drawer-btn-count {
  background: rgba(255,255,255,0.08);
  color: var(--cool-gray);
  border-color: transparent;
}
.sv2-drawer-aci {
  margin-top: auto;
  background: var(--ink);
  color: var(--white);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sv2-drawer-aci-head { display: flex; align-items: center; gap: 8px; }
.sv2-drawer-aci-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--chartreuse);
  padding: 3px 7px;
  border-radius: 4px;
}
.sv2-drawer-aci-live {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cool-gray);
}
.sv2-drawer-aci-copy { font-size: 11.5px; line-height: 1.45; color: var(--cool-gray); }
.sv2-drawer-aci-copy b { color: var(--white); font-weight: 600; }

/* tokens.css */
/* =========================================================
   CIOS — Design tokens (shell-scoped subset)
   Only the variables consumed by shell.css live here.
   Consumers: shell.css only.
   ========================================================= */



:root {
  /* ---------- Brand ---------- */
  --chartreuse:        #DFFF1A;   /* CIOS primary accent */
  --chartreuse-deep:   #CFE500;   /* active / hover on chartreuse */
  --ink:               #001121;   /* brand ink (near-black navy) */
  --ink-2:             #0C1D2D;
  --ink-3:             #132334;
  --white:             #FFFFFF;

  /* ---------- Semantic — light (default) ---------- */
  --bg:                #FFFFFF;
  --bg-subtle:         #F7F8F9;
  --bg-elev:           #FFFFFF;
  --surface:           #FFFFFF;
  --surface-hover:     #F2F4F6;
  --border:            #E1E4E7;
  --border-strong:     #CDD2D7;
  --text:              #001121;
  --text-secondary:    #5A6670;
  --text-muted:        #8A939B;

  /* ---------- Motion ---------- */
  --ease-out:          cubic-bezier(0.2, 0, 0, 1);
  --dur-micro:         120ms;
  --dur-base:          220ms;
}

/* ---------- Semantic — dark ---------- */
.theme-dark {
  --bg:                #001121;
  --bg-subtle:         #061a2b;
  --bg-elev:           #0C1D2D;
  --surface:           #0C1D2D;
  --surface-hover:     #132334;
  --border:            #132334;
  --border-strong:     #1C3046;
  --text:              #FFFFFF;
  --text-secondary:    #A5B0B8;
  --text-muted:        #6C7881;
}

/* ---------- Base reset (demo only — remove when integrating) ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--bg-subtle);
}

button { font-family: inherit; cursor: pointer; }
textarea { font-family: inherit; }

/* cios-v2-surface.css */
/* CIOS V2 — surface tokens for bands that are ink in dark mode and grey/white in light mode.
   Sections that used fixed ink now read these, so light mode stays light and
   separation comes from shades of grey instead. */
[data-theme="dark"] {
  --panel-bg: #001121;
  --panel-bg-alt: #0C1D2D;
  --panel-fg: #FFFFFF;
  --panel-muted: #A5B0B8;
  --panel-line: rgba(255, 255, 255, 0.14);
  --panel-rule: rgba(255, 255, 255, 0.10);
  --panel-surface: #0C1D2D;
  --panel-soft: rgba(255, 255, 255, 0.03);
  --panel-dot: rgba(255, 255, 255, 0.13);
  --panel-accent: #DFFF1A;
  --panel-underline: rgba(255, 255, 255, 0.35);
  --panel-glow: rgba(223, 255, 26, 0.10);
  --panel-chip-bg: rgba(223, 255, 26, 0.07);
  --panel-chip-line: rgba(223, 255, 26, 0.35);
}
[data-theme="light"] {
  --panel-bg: #F2F4F5;
  --panel-bg-alt: #E8EBED;
  --panel-fg: #001121;
  --panel-muted: #4A5764;
  --panel-line: #D8DCDF;
  --panel-rule: #D8DCDF;
  --panel-surface: #FFFFFF;
  --panel-soft: #FFFFFF;
  --panel-dot: rgba(0, 17, 33, 0.09);
  --panel-accent: #001121;
  --panel-underline: rgba(0, 17, 33, 0.32);
  --panel-glow: rgba(223, 255, 26, 0.24);
  --panel-chip-bg: rgba(223, 255, 26, 0.24);
  --panel-chip-line: rgba(0, 17, 33, 0.22);
}
/* Home's hero keeps its own names; it is the one band that goes fully white in light mode. */
[data-theme="dark"] { --hero-bg: #001121; }
[data-theme="light"] { --hero-bg: #FFFFFF; }
[data-theme="dark"], [data-theme="light"] {
  --hero-fg: var(--panel-fg);
  --hero-muted: var(--panel-muted);
  --hero-line: var(--panel-line);
  --hero-surface: var(--panel-surface);
  --hero-soft: var(--panel-soft);
  --hero-dot: var(--panel-dot);
  --hero-rule: var(--panel-rule);
  --hero-accent: var(--panel-accent);
  --hero-underline: var(--panel-underline);
  --hero-glow: var(--panel-glow);
  --hero-chip-bg: var(--panel-chip-bg);
  --hero-chip-line: var(--panel-chip-line);
}


    .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
  
x-dc{display:none!important}
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 620ms cubic-bezier(0.2,0,0,1),transform 620ms cubic-bezier(0.2,0,0,1)}[data-reveal][data-shown]{opacity:1;transform:none}[data-reveal="60"]{transition-delay:90ms}[data-reveal="120"]{transition-delay:140ms}[data-reveal="180"]{transition-delay:190ms}@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}

    [data-cios-nav] { container-type: inline-size; }
    [data-nav-burger] { display: none !important; }
    /* the wordmark alone carries the lockup once the bar runs out of room */
    @container (max-width: 480px) { [data-nav-tagline] { display: none !important; } }
    @container (max-width: 1080px) {
      [data-nav-desktop] { display: none !important; }
      [data-nav-login] { display: none !important; }
      [data-nav-burger] { display: inline-flex !important; }
      [data-nav-bar] { padding: 10px 20px !important; }
    }
  

    [data-pui-signals] { --pui-font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --pui-mono: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; container-type: inline-size; }
    [data-pui-signals] * { box-sizing: border-box; }
    [data-pui-signals] i[data-lucide], [data-pui-signals] svg.lucide { display: inline-block; }
    @container (max-width: 560px) {
      [data-pui-signals] [data-pui-2col] { grid-template-columns: minmax(0, 1fr) !important; }
      [data-pui-signals] [data-pui-hide-sm] { display: none !important; }
      [data-pui-signals] [data-pui-cols-insight] { grid-template-columns: 44px minmax(0, 1fr) 96px !important; }
    }
    @keyframes puiLive { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(223,255,26,0); } 50% { opacity: 0.45; box-shadow: 0 0 0 3px rgba(223,255,26,0.22); } }
    [data-pui-signals] [data-pui-live] { animation: puiLive 2.2s ease-in-out infinite; }
    [data-pui-signals] > div > div:nth-child(2) [data-pui-live] { animation-delay: 0.4s; }
    [data-pui-signals] > div > div:nth-child(3) [data-pui-live] { animation-delay: 0.8s; }
    [data-pui-signals] > div > div:nth-child(4) [data-pui-live] { animation-delay: 1.2s; }
    [data-pui-signals] > div > div:nth-child(5) [data-pui-live] { animation-delay: 1.6s; }
    @media (prefers-reduced-motion: reduce) { [data-pui-signals] [data-pui-live] { animation: none; } }
  

    [data-pui-insights] { --pui-font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --pui-mono: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; container-type: inline-size; }
    [data-pui-insights] * { box-sizing: border-box; }
    [data-pui-insights] i[data-lucide], [data-pui-insights] svg.lucide { display: inline-block; }
    @container (max-width: 560px) {
      [data-pui-insights] [data-pui-2col] { grid-template-columns: minmax(0, 1fr) !important; }
      [data-pui-insights] [data-pui-hide-sm] { display: none !important; }
      [data-pui-insights] [data-pui-cols-insight] { grid-template-columns: 44px minmax(0, 1fr) !important; }
      [data-pui-insights] [data-pui-state-cell] { display: none !important; }
      [data-pui-insights] [data-pui-state-inline] { display: inline-flex !important; }
      [data-pui-insights] [data-pui-title] { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
      [data-pui-insights] [data-pui-sources] { white-space: normal !important; }
      [data-pui-insights] [data-pui-meta] { flex-wrap: wrap; row-gap: 5px; }
    }
    @keyframes puiArrive { 0% { opacity: 0; transform: translateY(-9px); } 14%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-9px); } }
    @keyframes puiBadge { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
    /* only the newest row cycles, so it reads as one insight arriving */
    [data-pui-insights] > div > div:nth-child(2) { animation: puiArrive 8s cubic-bezier(0.2,0,0,1) infinite; }
    [data-pui-insights] [data-pui-new] { animation: puiBadge 1.8s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { [data-pui-insights] > div > div { animation: none !important; } }
  

    [data-pui-missions] { --pui-font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --pui-mono: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; container-type: inline-size; }
    [data-pui-missions] * { box-sizing: border-box; }
    [data-pui-missions] i[data-lucide], [data-pui-missions] svg.lucide { display: inline-block; }
    @container (max-width: 560px) {
      [data-pui-missions] [data-pui-2col] { grid-template-columns: minmax(0, 1fr) !important; }
      [data-pui-missions] [data-pui-hide-sm] { display: none !important; }
      [data-pui-missions] [data-pui-cols-insight] { grid-template-columns: 44px minmax(0, 1fr) 96px !important; }
    }
    @property --pui-deg { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
    @keyframes puiRing { 0% { --pui-deg: 0deg; } 70%, 100% { --pui-deg: var(--pui-deg-target, 0deg); } }
    [data-pui-missions] [data-pui-ring] { animation: puiRing 5.2s cubic-bezier(0.2,0,0,1) infinite; }
    [data-pui-missions] > div > div:nth-child(2) [data-pui-ring] { animation-delay: 0.5s; }
    @media (prefers-reduced-motion: reduce) { [data-pui-missions] [data-pui-ring] { animation: none; --pui-deg: var(--pui-deg-target, 0deg); } }
  

    [data-pui-outcomes] { --pui-font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --pui-mono: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; container-type: inline-size; }
    [data-pui-outcomes] * { box-sizing: border-box; }
    [data-pui-outcomes] i[data-lucide], [data-pui-outcomes] svg.lucide { display: inline-block; }
    @container (max-width: 560px) {
      [data-pui-outcomes] [data-pui-2col] { grid-template-columns: minmax(0, 1fr) !important; }
      [data-pui-outcomes] [data-pui-hide-sm] { display: none !important; }
      [data-pui-outcomes] [data-pui-cols-insight] { grid-template-columns: 44px minmax(0, 1fr) 96px !important; }
    }
    @keyframes puiDraw { 0% { stroke-dashoffset: 100; } 60%, 100% { stroke-dashoffset: 0; } }
    @keyframes puiBand { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
    [data-pui-outcomes] [data-pui-trend] { animation: puiDraw 6s cubic-bezier(0.2,0,0,1) infinite; }
    [data-pui-outcomes] [data-pui-band] { animation: puiBand 3s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { [data-pui-outcomes] [data-pui-trend] { animation: none; stroke-dashoffset: 0; } [data-pui-outcomes] [data-pui-band] { animation: none; } }
  

    @container (max-width: 720px) {
      [data-foot-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 24px !important; }
      [data-foot-brand] { grid-column: 1 / -1; max-width: none !important; }
      [data-cios-foot] { padding: 44px 20px 32px !important; }
    }
  
/* no-JS / crawler fallback: never hide content that JS would have revealed */
html:not(.js) [data-reveal],
html:not(.js) [data-beat-ui] [data-pui]{opacity:1!important;transform:none!important}

/* ===== CIOS site additions: mobile nav, language switcher, forms ===== */

/* --- mobile navigation panel --- */
[data-nav-mobile]{position:fixed;inset:0;z-index:90;background:var(--bg-elevated,#0a1628);
  display:none;flex-direction:column;padding:88px 24px 32px;gap:4px;overflow-y:auto}
[data-nav-mobile][data-open]{display:flex}
[data-nav-mobile] a{font-family:var(--font-brand);font-size:22px;font-weight:600;letter-spacing:-.02em;
  color:var(--fg-1);padding:14px 0;border-bottom:1px solid var(--border)}
[data-nav-mobile] a:last-of-type{border-bottom:0}
[data-nav-mobile] .nav-m-cta{margin-top:20px;background:var(--cios-chartreuse,#CFE500);color:var(--cios-ink,#001122);
  border-radius:999px;text-align:center;padding:15px 24px;font-size:16px;border-bottom:0}
@media (min-width:901px){[data-nav-mobile]{display:none!important}}

/* --- language switcher --- */
[data-lang-switch]{position:relative;display:inline-flex}
[data-lang-toggle]{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);
  color:var(--fg-2);border-radius:999px;padding:7px 12px;font-family:var(--font-mono,monospace);font-size:11px;
  font-weight:500;letter-spacing:.06em;cursor:pointer;line-height:1}
[data-lang-toggle]:hover{color:var(--fg-1);border-color:var(--fg-3)}
[data-lang-menu]{position:absolute;top:calc(100% + 8px);right:0;z-index:95;min-width:150px;display:none;
  flex-direction:column;background:var(--bg-elevated,#0a1628);border:1px solid var(--border);
  border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.34)}
[data-lang-switch][data-open] [data-lang-menu]{display:flex}
[data-lang-menu] a{padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--fg-2);text-decoration:none}
[data-lang-menu] a:hover{background:var(--bg-subtle);color:var(--fg-1);text-decoration:none}
[data-lang-menu] a[aria-current="true"]{color:var(--accent-text);font-weight:600}

/* --- forms --- */
.cios-field{display:flex;flex-direction:column;gap:7px}
.cios-field label{font-family:var(--font-mono,monospace);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3)}
.cios-field .req{color:var(--accent-text)}
.cios-field input,.cios-field select,.cios-field textarea{
  width:100%;box-sizing:border-box;background:var(--bg-subtle,rgba(255,255,255,.04));
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;
  color:var(--fg-1);font-family:var(--font-sans);font-size:14.5px;line-height:1.5;
  transition:border-color .16s ease,background .16s ease}
.cios-field input:focus,.cios-field select:focus,.cios-field textarea:focus{
  outline:none;border-color:var(--cios-chartreuse,#CFE500);background:var(--bg-elevated)}
.cios-field input::placeholder,.cios-field textarea::placeholder{color:var(--fg-3);opacity:.75}
.cios-field textarea{resize:vertical;min-height:96px}
.cios-field.span-2{grid-column:1/-1}

.cios-consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.6;color:var(--fg-2)}
.cios-consent input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--cios-chartreuse,#CFE500)}
.cios-consent a{text-decoration:underline}

[data-form-msg]{grid-column:1/-1;font-size:13.5px;line-height:1.6;color:var(--fg-2);min-height:0}
[data-form-msg][data-error]{color:#ff8b8b}

[data-form-success]{background:var(--panel-bg-alt,rgba(255,255,255,.03));border:1px solid var(--panel-line,var(--border));
  border-radius:20px;padding:clamp(26px,3.5vw,40px)}
[data-form-success] h3{font-family:var(--font-brand);font-size:clamp(20px,2.4vw,26px);font-weight:700;
  letter-spacing:-.02em;margin:0 0 12px;color:var(--fg-1)}
[data-form-success] p{margin:0 0 10px;font-size:14.5px;line-height:1.7;color:var(--fg-2)}
[data-form-success] [data-form-reset]{margin-top:14px;background:transparent;border:1px solid var(--border);
  color:var(--fg-2);border-radius:999px;padding:10px 18px;font-size:13.5px;cursor:pointer}
[data-form-success] [data-form-reset]:hover{color:var(--fg-1);border-color:var(--fg-3)}
[hidden]{display:none!important}

.cios-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
@media (max-width:560px){.cios-form-grid{grid-template-columns:1fr}}

/* cookie settings link inherits footer link styling */
.cios-cc-foot-settings{cursor:pointer}

/* ===== legal / policy pages ===== */
.legal-hero{padding:clamp(72px,9vw,120px) 24px clamp(28px,4vw,44px);max-width:900px;margin:0 auto}
.legal-hero .eyebrow{margin:0 0 18px;font-family:var(--font-mono,monospace);font-size:11px;
  letter-spacing:.16em;color:var(--fg-3);text-transform:uppercase}
.legal-hero h1{font-family:var(--font-brand);margin:0 0 16px;font-size:clamp(32px,5vw,52px);
  font-weight:700;line-height:1.04;letter-spacing:-.03em;color:var(--fg-1)}
.legal-hero .legal-meta{margin:0;font-size:13.5px;color:var(--fg-3);line-height:1.7}
.legal-note{max-width:900px;margin:0 auto;padding:0 24px clamp(16px,2vw,24px)}
.legal-note p{margin:0;padding:14px 18px;border:1px solid var(--border);border-radius:12px;
  background:var(--bg-subtle,rgba(255,255,255,.03));font-size:13px;line-height:1.65;color:var(--fg-2)}

main.content-wrapper{max-width:900px;margin:0 auto;padding:0 24px clamp(64px,8vw,104px);
  font-family:var(--font-sans);color:var(--fg-2)}
.policy-section{padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--border)}
.policy-section:first-child{border-top:0}
.policy-section h2{font-family:var(--font-brand);font-size:clamp(20px,2.6vw,27px);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;color:var(--fg-1);margin:0 0 16px;
  padding-left:14px;border-left:3px solid var(--cios-chartreuse,#CFE500)}
.policy-section h3{font-family:var(--font-brand);font-size:16.5px;font-weight:600;color:var(--fg-1);
  margin:24px 0 10px;letter-spacing:-.01em}
.policy-section p{margin:0 0 14px;font-size:14.8px;line-height:1.78}
.policy-section ul{margin:0 0 16px;padding-left:20px}
.policy-section li{margin:0 0 9px;font-size:14.8px;line-height:1.75}
.policy-section strong{color:var(--fg-1);font-weight:600}
.policy-section a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.policy-section code{font-family:var(--font-mono,monospace);font-size:12.8px;
  background:var(--bg-subtle,rgba(255,255,255,.06));padding:2px 6px;border-radius:5px;color:var(--fg-1)}
.text-accent{color:var(--accent-text)}
.highlight-box{margin:18px 0;padding:18px 20px;border:1px solid var(--border);border-radius:14px;
  background:var(--bg-subtle,rgba(255,255,255,.03))}
.highlight-box p:last-child{margin-bottom:0}

.cookie-table-wrap,.sub-table-wrap{overflow-x:auto;margin:18px 0;
  border:1px solid var(--border);border-radius:14px}
table.cookie-table,table.sub-table{width:100%;border-collapse:collapse;font-size:13.4px;min-width:560px}
table.cookie-table th,table.sub-table th{text-align:left;padding:13px 16px;
  font-family:var(--font-mono,monospace);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);background:var(--bg-subtle,rgba(255,255,255,.04));
  border-bottom:1px solid var(--border);white-space:nowrap}
table.cookie-table td,table.sub-table td{padding:13px 16px;line-height:1.6;color:var(--fg-2);
  border-bottom:1px solid var(--border);vertical-align:top}
table.cookie-table tr:last-child td,table.sub-table tr:last-child td{border-bottom:0}
table.cookie-table a,table.sub-table a{color:var(--accent-text);text-decoration:underline}

.cta-pill{display:inline-flex;align-items:center;gap:10px;background:var(--cios-chartreuse,#CFE500);
  color:var(--cios-ink,#001122);border:none;font-family:var(--font-brand);font-weight:700;font-size:14.5px;
  padding:12px 24px;border-radius:999px;cursor:pointer;margin:6px 0}
.cta-pill:hover{filter:brightness(1.06)}

/* the language banner from the old pages is not carried over */
.language-banner,.lang-switch{display:none!important}

/* content pages must grow with their content, not be clipped to viewport height */
#dc-root{height:auto!important;min-height:100%}
#dc-root>.sc-host{height:auto!important}

/* ===== theme-aware navigation chrome =====
   The pages were pre-rendered in dark mode, so the nav's colours were baked in
   as literals. Those declarations are stripped at build time; these rules drive
   the nav from the theme instead. */
/* The sticky wrapper carries the solid fill, so nothing shows through the bar,
   and it sits above every stacking context the page content creates. */
[data-nav-sticky]{
  background:#001121; isolation:isolate; z-index:200;
  transition:background .3s ease;
}
[data-theme="light"] [data-nav-sticky]{background:#fff}
header[data-cios-nav]{
  background:#001121; color:#fff; border-bottom:1px solid rgba(255,255,255,.12);
  position:relative; z-index:100;          /* above the mobile panel (90), which lives in the same wrapper */
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
[data-theme="light"] header[data-cios-nav]{
  background:#fff; color:#001121; border-bottom-color:#E1E4E7;
}
[data-nav-desktop] a{color:rgba(255,255,255,.72);transition:color .2s ease}
[data-nav-desktop] a:hover{color:#fff}
[data-theme="light"] [data-nav-desktop] a{color:rgba(0,17,33,.66)}
[data-theme="light"] [data-nav-desktop] a:hover{color:#001121}
[data-nav-tagline]{color:#8a939c;transition:color .3s ease}
[data-theme="light"] [data-nav-tagline]{color:#5f6a75}
[data-nav-login]{color:rgba(255,255,255,.78);transition:color .3s ease}
[data-nav-login]:hover{color:#fff}
[data-theme="light"] [data-nav-login]{color:rgba(0,17,33,.72)}
[data-theme="light"] [data-nav-login]:hover{color:#001121}
[data-nav-burger]{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.18);
  transition:color .3s ease,border-color .3s ease}
[data-theme="light"] [data-nav-burger]{color:#001121;border-color:rgba(0,17,33,.18)}
[data-lang-toggle]{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.72)}
[data-theme="light"] [data-lang-toggle]{border-color:rgba(0,17,33,.18);color:rgba(0,17,33,.7)}
[data-theme="light"] [data-lang-toggle]:hover{color:#001121}

/* ===== light/dark switch (one control, click anywhere) ===== */
.cios-theme-switch{
  position:relative; display:inline-flex; align-items:center; justify-content:space-between;
  width:58px; height:30px; padding:3px; box-sizing:border-box; flex:0 0 auto;
  border-radius:999px; cursor:pointer; overflow:hidden;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  transition:background .3s ease, border-color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
[data-theme="light"] .cios-theme-switch{background:rgba(0,17,33,.06);border-color:rgba(0,17,33,.16)}
.cios-theme-switch:hover{border-color:var(--cios-chartreuse,#DFFF1A)}
.cios-theme-switch:focus-visible{outline:2px solid var(--cios-chartreuse,#DFFF1A);outline-offset:2px}

/* the sliding knob */
.cios-theme-knob{
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:999px;
  background:var(--cios-chartreuse,#DFFF1A); z-index:0;
  transition:transform .34s cubic-bezier(.34,1.42,.5,1);
  will-change:transform;
}
/* aria-checked = dark -> knob sits over the moon (right) */
.cios-theme-switch[aria-checked="true"] .cios-theme-knob{transform:translateX(26px)}
.cios-theme-switch[aria-checked="false"] .cios-theme-knob{transform:translateX(0)}

.cios-theme-ico{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; pointer-events:none;
  transition:color .3s ease, opacity .3s ease, transform .34s cubic-bezier(.34,1.42,.5,1);
}
.cios-theme-ico svg{width:14px;height:14px;display:block}

/* whichever icon the knob is under goes dark on chartreuse; the other dims */
.cios-theme-switch[aria-checked="false"] .is-sun {color:#001121;opacity:1}
.cios-theme-switch[aria-checked="false"] .is-moon{color:rgba(255,255,255,.5);opacity:.75;transform:scale(.88)}
.cios-theme-switch[aria-checked="true"]  .is-sun {color:rgba(255,255,255,.5);opacity:.75;transform:scale(.88)}
.cios-theme-switch[aria-checked="true"]  .is-moon{color:#001121;opacity:1}
[data-theme="light"] .cios-theme-switch[aria-checked="true"] .is-sun{color:rgba(0,17,33,.45)}
[data-theme="light"] .cios-theme-switch[aria-checked="false"] .is-moon{color:rgba(0,17,33,.45)}

@media (prefers-reduced-motion: reduce){
  .cios-theme-knob,.cios-theme-ico{transition:none}
}

/* ===== get started: contact line under the form ===== */
.cios-form-contact{
  margin:20px 0 0; font-size:13.5px; line-height:1.7; color:var(--fg-3);
}
.cios-form-contact a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}


/* ===== legibility: tokens that failed WCAG AA (4.5:1) on their own surfaces =====
   Measured across all 14 pages in both themes. These override the design-system
   values; everything that references the token inherits the fix. */
:root[data-theme="dark"]{
  --fg-3:#8f9ca8;               /* was #6b7885 (3.8:1) -> 6.0:1 on bg-elevated, 4.6:1 on tinted panels */
  --cios-danger:#ff6b6b;        /* was #e15454 (4.1:1 on tinted panels) -> 5.5:1 */
  --accent-text:var(--cios-chartreuse,#DFFF1A);   /* 16:1 on ink: keep the brand colour */
}
:root[data-theme="light"]{
  --fg-3:#5f6a75;               /* was #7c8691 (3.7:1) -> 5.5:1 */
  --cios-danger:#b93333;        /* was #e15454 (3.7:1) -> 5.9:1 */
  --accent-text:#4f5c00;        /* chartreuse as text on white is 1.1:1; this olive is 7.3:1 */
}
/* legal pages come from an older template with no link reset: match the marketing pages */
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.policy-section a,.cios-consent a,.cios-form-contact a,table.cookie-table a,table.sub-table a{text-decoration:underline}
/* get started: the details label is a plain eyebrow, not a card header, now the card border is gone */
[data-form-wrap]>p:first-child{background:transparent!important;border:0!important;padding-left:0!important;padding-right:0!important;margin-bottom:16px!important}

/* Ink-dark accent cards keep dark-theme foreground tokens in either page theme.
   Only foreground tokens are scoped, so nested panel backgrounds are untouched. */
[data-dark-surface],[data-split-dark]{
  --fg-1:#ffffff; --fg-2:#a5b0b8; --fg-3:#8f9ca8;
  --panel-fg:#ffffff; --panel-muted:#a5b0b8; --hero-fg:#ffffff; --hero-muted:#a5b0b8;
  --accent-text:#DFFF1A; --panel-accent:#DFFF1A; --hero-accent:#DFFF1A; --cios-danger:#ff6b6b;
  color:#ffffff;
}

/* =====================================================================
   MOBILE  (≤ 900px)
   Header keeps only logo · Get started · menu. Theme, language and Log in
   live inside the menu panel.
   ===================================================================== */
@media (max-width:900px){
  [data-nav-bar]{padding:10px 16px!important;gap:10px!important;min-height:60px!important}
  header[data-cios-nav] [data-theme-toggle],
  header[data-cios-nav] [data-lang-switch],
  header[data-cios-nav] [data-nav-login],
  header[data-cios-nav] nav[data-nav-desktop]{display:none!important}
  header[data-cios-nav] [data-nav-tagline]{display:none!important}     /* logo wordmark only */
  [data-nav-burger]{display:inline-flex!important;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 44px;border-radius:12px;margin-left:2px;
    transition:transform .25s ease,background .2s ease}
  /* open state: hide the hamburger glyph, draw a close cross */
  [data-nav-burger]{position:relative}
  [data-nav-burger][aria-expanded="true"] svg{opacity:0}
  [data-nav-burger][aria-expanded="true"]::before,[data-nav-burger][aria-expanded="true"]::after{
    content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;border-radius:2px;background:currentColor}
  [data-nav-burger][aria-expanded="true"]::before{transform:rotate(45deg)}
  [data-nav-burger][aria-expanded="true"]::after{transform:rotate(-45deg)}
  [data-nav-burger][aria-expanded="true"]{background:rgba(223,255,26,.14)}
  /* the CTA next to the burger stays compact */
  header[data-cios-nav] a[href="/get-started/"]{padding:11px 18px!important;font-size:14px!important;white-space:nowrap}

  /* menu panel */
  [data-nav-mobile]{padding:126px 20px 32px;gap:2px}
  [data-nav-mobile] a{padding:15px 0;font-size:21px}
  [data-nav-m-utils]{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-top:22px;padding-top:22px;border-top:1px solid var(--border)}
  [data-nav-m-utils] .cios-theme-switch{flex:0 0 auto}
  [data-nav-m-utils] [data-lang-switch]{position:relative}
  [data-nav-m-utils] [data-lang-menu]{left:0;right:auto;top:auto;bottom:calc(100% + 8px)}   /* opens upward, stays on screen */
  [data-nav-m-utils] .nav-m-login{margin-left:auto;font-family:var(--font-sans);font-size:15px!important;
    font-weight:600;padding:10px 16px!important;border:1px solid var(--border);border-radius:999px;border-bottom:1px solid var(--border)!important}
  [data-nav-mobile] .nav-m-cta{margin-top:14px}

  /* footer: comfortable tap targets, single column below 560 */
  footer[data-cios-foot] a{padding:6px 0;display:inline-block}
}
@media (max-width:560px){
  footer[data-cios-foot] [data-foot-grid]{grid-template-columns:1fr!important;gap:28px!important}
  footer[data-cios-foot] [data-foot-brand]{max-width:none!important}
}

/* legal tables stack into cards on phones instead of scrolling sideways */
@media (max-width:640px){
  .cookie-table-wrap,.sub-table-wrap{overflow:visible;border:0;border-radius:0}
  table.cookie-table,table.sub-table{min-width:0;display:block}
  table.cookie-table thead,table.sub-table thead{display:none}
  table.cookie-table tbody,table.sub-table tbody,
  table.cookie-table tr,table.sub-table tr{display:block}
  table.cookie-table tr,table.sub-table tr{border:1px solid var(--border);border-radius:14px;padding:6px 16px 10px;margin:0 0 12px;
    background:var(--bg-subtle,rgba(255,255,255,.03))}
  table.cookie-table td,table.sub-table td{display:block;padding:9px 0;border-bottom:1px solid var(--border);word-break:break-word}
  table.cookie-table td:last-child,table.sub-table td:last-child{border-bottom:0}
  table.cookie-table td::before,table.sub-table td::before{content:attr(data-label);display:block;
    font-family:var(--font-mono,monospace);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin-bottom:3px}
  table.cookie-table td:first-child{font-weight:600;color:var(--fg-1)}
  table.sub-table td:first-child{font-weight:600;color:var(--fg-1)}
}

/* product-UI mockups: 10px mono labels are too small on a phone — floor them at 11px */
@media (max-width:600px){
  [data-pui] [style*="font-size: 9"],[data-pui] [style*="font-size: 10"],
  [data-pui-signals] [style*="font-size: 10"],[data-pui-insights] [style*="font-size: 10"],
  [data-pui-missions] [style*="font-size: 10"],[data-pui-outcomes] [style*="font-size: 10"],
  [data-pui-cockpit] [style*="font-size: 10"],[data-pui-ask] [style*="font-size: 10"],
  [data-pui-context] [style*="font-size: 10"],[data-pui-knowledge] [style*="font-size: 10"]{font-size:11px!important}
  section [style*="font-size: 10px"]{font-size:11px!important}
  section [style*="font-size: 10.5px"]{font-size:11.5px!important}
}

/* =====================================================================
   WHY CIOS — category comparison (home). Always-ink surface; the CIOS
   column is a deeper band with a restrained chartreuse accent.
   ===================================================================== */
.why{--why-line:rgba(255,255,255,.09);--why-line-strong:rgba(255,255,255,.14);--why-muted:#a5b0b8;--why-faint:#8f9ca8;--why-acc:#DFFF1A;--why-deep:rgba(0,0,0,.34)}
.why-inner{max-width:1160px;margin:0 auto}
.why-eyebrow{margin:0 0 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--why-acc)}
.why-lead{margin:0 0 clamp(28px,3.5vw,44px);max-width:560px;font-size:15.5px;line-height:1.6;color:var(--why-muted)}
.why-table{border:1px solid var(--why-line-strong);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.025)}
.why-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,1.05fr) minmax(0,1.05fr) minmax(0,1.35fr);border-top:1px solid var(--why-line)}
.why-row:first-child{border-top:0}
.why-cell{padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,28px);min-width:0}
.why-col-cios{background:var(--why-deep);position:relative}
.why-head .why-col-cios::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--why-acc);opacity:.9}
.why-head .why-cell{padding-top:clamp(22px,2.6vw,30px);padding-bottom:clamp(18px,2.2vw,24px);border-bottom:1px solid var(--why-line-strong)}
.why-dim{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.005em}
.why-head .why-dim{font-weight:500}
.why-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.why-name{display:flex;align-items:center;gap:8px;font-family:var(--font-brand);font-size:15px;font-weight:700;letter-spacing:-.01em;color:#fff;margin-bottom:12px}
.why-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--why-acc);color:#001121;flex-shrink:0}
.why-check svg{stroke-width:3}
.why-flow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--why-faint);line-height:1.4}
.why-arrow{color:var(--why-faint);opacity:.7}
.why-flow-cios{color:#e8ecef}
.why-flow-cios .why-arrow{color:var(--why-acc);opacity:.75}
.why-loop{display:inline-flex;color:var(--why-acc);margin-left:2px}
.why-loop svg{width:11px!important;height:11px!important}
.why-val{display:block;font-size:14px;line-height:1.6;color:var(--why-muted);text-wrap:pretty}
.why-col-cios .why-val{color:#fff}
.why-cell-label{display:none}
.why-foot{margin:18px 4px 0;font-size:13px;line-height:1.6;color:var(--why-faint);max-width:720px}

/* CIOS sequence lights up once when the table enters the viewport */
.why-flow-cios .why-stage,.why-flow-cios .why-loop{opacity:.32}
.why-table[data-shown] .why-flow-cios .why-stage{animation:whyStage .55s cubic-bezier(.2,0,0,1) forwards;animation-delay:calc(.45s + var(--i) * .16s)}
.why-table[data-shown] .why-flow-cios .why-loop{animation:whyStage .55s cubic-bezier(.2,0,0,1) forwards;animation-delay:calc(.45s + 6 * .16s);opacity:.32}
@keyframes whyStage{to{opacity:1}}
html:not(.js) .why-flow-cios .why-stage,html:not(.js) .why-flow-cios .why-loop{opacity:1}
@media (prefers-reduced-motion:reduce){.why-flow-cios .why-stage,.why-flow-cios .why-loop{opacity:1;animation:none!important}}

/* ≤ 820px: each dimension becomes a stacked comparison card */
@media (max-width:820px){
  .why-row{display:block;border-top:0;padding:0 0 6px}
  .why-row+.why-row{border-top:1px solid var(--why-line)}
  .why-cell{padding:14px 18px}
  .why-row .why-dim{padding:20px 18px 6px;font-family:var(--font-brand);font-size:16px;font-weight:700}
  .why-head{background:rgba(255,255,255,.02);padding-bottom:6px}
  .why-head .why-dim{display:none}
  .why-head .why-cell{border-bottom:0;padding:16px 18px}
  .why-head .why-col-cios{background:var(--why-deep);border-left:2px solid var(--why-acc)}
  .why-head .why-col-cios::before{display:none}
  .why-name{margin-bottom:8px}
  .why-row:not(.why-head) .why-col{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
  .why-row:not(.why-head) .why-col-cios{border-left:2px solid var(--why-acc);margin:4px 0 8px}
  .why-cell-label{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--why-faint)}
  .why-col-cios .why-cell-label{color:var(--why-acc)}
  .why-cell-label .why-check{width:14px;height:14px}
  .why-foot{margin-left:0}
}

/* =====================================================================
   TYPOGRAPHY — Montserrat everywhere (brand, body and label/"mono" style).
   Tokens are also rewritten at build time; this is the explicit override.
   ===================================================================== */
:root,
[data-theme="light"],
[data-theme="dark"]{
  --font-brand:'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans:'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
[data-pui-signals],[data-pui-insights],[data-pui-missions],[data-pui-outcomes]{
  --pui-font:'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --pui-mono:'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
html,body{font-family:'Montserrat',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
/* Label/eyebrow styles lose monospace alignment — keep figures aligned. */
body{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* =====================================================================
   MULTILINGUAL
   11 languages in the switcher; Arabic runs right-to-left; CJK and Arabic
   fall back to the Noto face loaded on demand for that script.
   ===================================================================== */
:root{
  --font-arabic:'Noto Sans Arabic';
  --font-jp:'Noto Sans JP';
  --font-sc:'Noto Sans SC';
}
:root[data-lang="ar"] body,:root[data-lang="ar"] input,:root[data-lang="ar"] textarea,:root[data-lang="ar"] select,:root[data-lang="ar"] button{
  font-family:var(--font-arabic),'Montserrat',ui-sans-serif,system-ui,sans-serif}
:root[data-lang="ja"] body,:root[data-lang="ja"] input,:root[data-lang="ja"] textarea,:root[data-lang="ja"] select,:root[data-lang="ja"] button{
  font-family:'Montserrat',var(--font-jp),ui-sans-serif,system-ui,sans-serif}
:root[data-lang="zh"] body,:root[data-lang="zh"] input,:root[data-lang="zh"] textarea,:root[data-lang="zh"] select,:root[data-lang="zh"] button{
  font-family:'Montserrat',var(--font-sc),ui-sans-serif,system-ui,sans-serif}
/* tight display tracking is a Latin trait — CJK and Arabic need it back at 0 */
:root[data-lang="ar"] h1,:root[data-lang="ar"] h2,:root[data-lang="ar"] h3,:root[data-lang="ar"] h4,
:root[data-lang="ja"] h1,:root[data-lang="ja"] h2,:root[data-lang="ja"] h3,:root[data-lang="ja"] h4,
:root[data-lang="zh"] h1,:root[data-lang="zh"] h2,:root[data-lang="zh"] h3,:root[data-lang="zh"] h4{letter-spacing:normal!important}
:root[data-lang="ar"] [style*="letter-spacing: 0.08em"],:root[data-lang="ar"] [style*="letter-spacing: 0.16em"],
:root[data-lang="ja"] [style*="letter-spacing: 0.08em"],:root[data-lang="ja"] [style*="letter-spacing: 0.16em"],
:root[data-lang="zh"] [style*="letter-spacing: 0.08em"],:root[data-lang="zh"] [style*="letter-spacing: 0.16em"]{letter-spacing:.02em!important}
/* Arabic has no uppercase; the eyebrow style would otherwise do nothing but shout */
:root[data-lang="ar"] [style*="text-transform"]{text-transform:none!important}

/* ---- right-to-left ---- */
[dir="rtl"]{text-align:right}
[dir="rtl"] [data-lang-menu]{right:auto;left:0}
[dir="rtl"] [data-nav-m-utils] [data-lang-menu]{left:auto;right:0}
[dir="rtl"] .why-row:not(.why-head) .why-col-cios,[dir="rtl"] .why-head .why-col-cios{border-left:0;border-right:2px solid var(--why-acc)}
[dir="rtl"] .why-arrow,[dir="rtl"] .why-loop{transform:scaleX(-1)}
[dir="rtl"] .policy-section,[dir="rtl"] .legal-hero{text-align:right}
[dir="rtl"] .policy-body ul,[dir="rtl"] .policy-body ol{padding-right:22px;padding-left:0}
[dir="rtl"] table th,[dir="rtl"] table td{text-align:right}
[dir="rtl"] .cios-field label{text-align:right}
[dir="rtl"] [data-nav-m-utils] .nav-m-login{margin-left:0;margin-right:auto}
/* arrows in CTAs point the other way when the text does */
[dir="rtl"] .cta-pill,[dir="rtl"] .nav-m-cta{direction:rtl}

/* ---- switcher with 11 entries ---- */
[data-lang-menu]{max-height:min(62vh,420px);overflow-y:auto;min-width:168px;scrollbar-width:thin}
[data-nav-m-utils] [data-lang-menu]{max-height:min(46vh,300px)}

/* ---- "translated from English" note (non-English only) ---- */
.cios-tnote{display:none}
:root[data-lang]:not([data-lang="en"]) .cios-tnote{display:block}
footer .cios-tnote{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:var(--fg-3);max-width:640px}
.cios-legal-note-wrap{max-width:900px;margin:0 auto;padding:0 24px}
.cios-legal-note{display:none;margin:0 0 4px;padding:12px 16px;border:1px solid var(--border);
  border-radius:12px;background:var(--bg-subtle);font-size:13.5px;line-height:1.6;color:var(--fg-2)}
:root[data-lang]:not([data-lang="en"]) .cios-legal-note{display:block}
/* bare arrow glyphs that are markup, not translated copy, mirror with the layout */
[dir="rtl"] span[aria-hidden="true"]{unicode-bidi:isolate}
[dir="rtl"] button > span[aria-hidden="true"],[dir="rtl"] a > span[aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}

/* The language menu is its own surface: it paints --bg-elevated, so it must carry
   the page theme's foreground tokens even when an ancestor is an ink surface. */
:root[data-theme="light"] [data-lang-menu]{--fg-1:#001121;--fg-2:#4A5764;--fg-3:#5f6a75;--accent-text:#4f5c00}
:root[data-theme="dark"]  [data-lang-menu]{--fg-1:#ffffff;--fg-2:#a5b0b8;--fg-3:#8f9ca8;--accent-text:#DFFF1A}
[data-lang-menu] a{color:var(--fg-2)}
[data-lang-menu] a:hover,[data-lang-menu] a:focus-visible{color:var(--fg-1);background:var(--bg-subtle)}
:root[data-theme="light"] [data-lang-menu] a:hover,
:root[data-theme="light"] [data-lang-menu] a:focus-visible{background:rgba(0,17,33,.06)}
:root[data-theme="dark"] [data-lang-menu] a:hover,
:root[data-theme="dark"] [data-lang-menu] a:focus-visible{background:rgba(255,255,255,.07)}
[data-lang-menu] a[aria-current="true"]{color:var(--accent-text);font-weight:600}