:root {
  --bg: #020916;
  --bg2: #061426;
  --panel: #08182b;
  --panel2: #0c243c;
  --line: #173451;
  --text: #f7fbff;
  --muted: #9bb5ca;
  --aqua: #04d9dd;
  --blue: #128cff;
  --purple: #6b8cff;
  --danger: #ff6b7a;
  --warning: #ffbd59;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --nav-bg: rgba(2, 9, 22, 0.86);
  --nav-line: rgba(13, 215, 228, 0.11);
  --nav-h: 64px;
  --landing-vh: calc(100svh - var(--nav-h));
  --section-pad-y: clamp(56px, 7.5vh, 92px);
  --section-title-gap: clamp(24px, 3vh, 38px);
  --copy-max: 620px;
  --sidebar-bg: #030d1b;
  --surface-inset: #061426;
  --surface-raised: #07182a;
  --surface-deep: #051121;
  --surface-active: #0d2946;
  --surface-subtle: rgba(255, 255, 255, 0.02);
  --surface-alt: rgba(255, 255, 255, 0.018);
  --field-label: #bdd0df;
  --code-bg: #020b17;
  --code-text: #a9f2f1;
  --user-bubble: #0c354d;
  --composer-bg: #081b30;
  --tag-bg: #0f2b48;
  --tag-text: #b8d9f3;
  --message-bg: #0f2944;
  --message-user-bg: #073f4f;
  --radius: 18px;
  --max: 1180px;
}
.billingToggle {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 10px;
  padding: 5px;
  display: flex;
  gap: 4px;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: 13px;
}
.billingToggle button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 800;
}
.billingToggle button[aria-pressed="true"] {
  background: var(--surface-active);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.billingToggle button span {
  margin-left: 6px;
  color: var(--aqua);
  font-size: 12px;
}
.billingLead {
  text-align: center;
  margin: 0 0 25px;
}
.billingDetail {
  min-height: 24px;
  margin: -8px 0 12px;
  color: var(--aqua);
  font-size: 13px;
  font-weight: 700;
}
.resultsDisclosure {
  max-width: 850px;
  margin: 24px auto 0;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--muted);
  text-align: center;
}
.resultsDisclosure b {
  color: var(--text);
}
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.consent input {
  margin-top: 4px;
}
.legalMeta {
  color: var(--aqua) !important;
  font-weight: 750;
}
.legal h2 {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.legal li {
  margin: 8px 0;
}
.legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 600px) {
  .billingToggle {
    width: 100%;
  }
  .billingToggle button {
    flex: 1;
    padding-inline: 10px;
  }
  .billingToggle button span {
    display: block;
    margin: 2px 0 0;
  }
  .priceCard.featured {
    transform: none;
  }
  .legal h1,
  .docs h1 {
    font-size: 38px;
  }
  .legal {
    font-size: 14px;
  }
  .resultsDisclosure {
    text-align: left;
  }
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    15px/1.55 Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
.container {
  width: min(var(--max), calc(100% - 36px));
  margin: auto;
}
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
}
.nav::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(4,217,221,0.32) 30%, rgba(18,140,255,0.42) 55%, rgba(4,217,221,0.24) 75%, transparent 100%);
  pointer-events: none;
}
.navin {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.2s;
}
.brand:hover { opacity: 0.88; }
.brandMark {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(4,217,221,0.24));
  transition: filter 0.25s, transform 0.25s;
}
.brandCopy {
  display: grid;
  min-width: 0;
  line-height: 1;
}
.brandName {
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}
.brandName > span {
  color: var(--blue);
}
.brandTagline,
.brandSubline {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brandTagline {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}
.brandSubline {
  margin-top: 3px;
  font-size: 8px;
  opacity: .8;
}
.brand:hover .brandMark {
  filter: drop-shadow(0 0 26px rgba(4,217,221,0.42));
  transform: translateY(-1px);
}
.navlinks,
.actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.actions { gap: 8px; }
.navlinks a {
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.18s, background 0.18s;
  position: relative;
}
.navlinks a:hover {
  color: var(--text);
  background: rgba(255,255,255,0.055);
}
.navlinks a.navActive {
  color: var(--text);
}
.navlinks a.navActive::after {
  content: '';
  position: absolute;
  inset-inline: 8px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aqua), var(--blue));
}
.navlinks a[href="/mcp"]::before {
  content: 'NEW';
  position: absolute;
  top: -1px;
  right: 2px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--aqua);
  line-height: 1;
}
.navSignIn {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.18s, background 0.18s;
}
.navSignIn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.055);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  padding: 11px 17px;
  background: linear-gradient(135deg, var(--aqua), var(--blue));
  color: #03111f;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
}
.button:hover {
  transform: translateY(-1px);
}
.button.secondary {
  background: var(--surface-active);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
.button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
.button.danger {
  background: rgba(255, 107, 122, 0.12);
  color: #ff9aa5;
  border: 1px solid rgba(255, 107, 122, 0.35);
  box-shadow: none;
}
.button.small {
  padding: 8px 12px;
  font-size: 13px;
}
.buttonNote { font-size: 11px; font-weight: 750; opacity: 0.72; }
.themeToggle { min-width: 76px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; font-size: 12px; font-weight: 750; }
.themeToggle:hover { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(4,217,221,0.08); }
.themeToggle span:first-child { font-size: 16px; line-height: 1; }
.authTheme { position: fixed; top: 20px; right: 20px; }
.hero {
  padding: 94px 0 74px;
  overflow: hidden;
}
.heroGrid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 66px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  color: var(--aqua);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 800;
}
.hero h1 {
  font-size: clamp(48px, 6.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 18px 0 24px;
}
.hero h1 span {
  color: var(--aqua);
}
.hero p,
.sectionTitle p {
  color: var(--muted);
  font-size: 18px;
  max-width: 680px;
}
.heroActions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0;
}
.textLink {
  color: var(--aqua);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.landingHero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--landing-vh);
  padding: clamp(24px, 3.5vh, 40px) 0;
  border-bottom: 1px solid var(--line);
}
.landingHero > .container.landingHeroGrid {
  flex: 1;
  align-content: center;
}
.landingHeroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
  align-items: stretch;
  gap: clamp(32px, 5vw, 64px);
}
.landingHeroInner {
  max-width: 580px;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.landingHeroEyebrow {
  margin: 0 0 14px;
  color: var(--aqua);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.landingHeroTitle {
  display: grid;
  gap: 0;
  margin: 0 0 16px;
}
.landingHeroLine {
  display: block;
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.045em;
}
.landingHeroLineMain {
  margin-bottom: 2px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.038em;
}
@media (min-width: 520px) {
  .landingHeroLineMain {
    white-space: nowrap;
  }
}
.landingHeroLine + .landingHeroLine {
  margin-top: 2px;
}
.landingHeroProof {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.heroHighlight {
  display: inline;
  color: #06111d;
  background: var(--aqua);
  padding: 0.04em 0.26em 0.08em;
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 0 28px rgba(4, 217, 221, 0.28);
}
.landingHero h1:not(.landingHeroTitle) {
  max-width: 850px;
  margin: 18px 0 24px;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.landingHero > .container > p {
  max-width: 760px;
  color: var(--muted);
  font-size: 20px;
}
.landingHeroGrid .landingHeroInner h1 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.landingHeroGrid .landingHeroInner > p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.landingHeroLead {
  margin: 0 0 24px !important;
  max-width: 400px;
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.5 !important;
  opacity: 0.82;
}
.landingKicker {
  display: inline-flex;
  margin: 0 0 12px;
  padding: 5px 11px;
  border: 1px solid rgba(4, 217, 221, 0.28);
  border-radius: 999px;
  color: var(--aqua);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.heroCta {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.heroCtaMain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.heroCtaButton {
  padding: 14px 26px;
  font-size: 16px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2eecc4 0%, var(--aqua) 45%, #1ab894 100%);
  box-shadow: 0 4px 22px rgba(4, 217, 221, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.heroCtaButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(4, 217, 221, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.heroCtaSecondary {
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 750;
}
.heroCtaArrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.heroCtaButton:hover .heroCtaArrow {
  transform: translateX(3px);
}
.heroCtaNote {
  margin: 0;
  padding-left: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.landingHeroInner .heroActions {
  margin: 0 0 10px;
  gap: 14px;
}
.heroFinePrint { margin: 0; color: var(--muted); font-size: 12px !important; line-height: 1.5; }
/* Product hero — tabbed Codex / Claude interface preview */
.heroInterfacePreview {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  min-height: clamp(320px, 42vh, 480px);
  justify-self: end;
}
.heroInterfacePreview::before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: -1;
  background: radial-gradient(circle at 50% 28%, rgba(4, 217, 221, 0.12), transparent 65%);
  pointer-events: none;
}
.heroCostSwitch {
  margin-bottom: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-inset);
}
.heroCostSwitchHead {
  margin-bottom: 8px;
}
.heroCostToggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.heroCostToggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.heroCostToggleTrack {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.2s ease;
}
.heroCostToggleTrack::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.heroCostToggle input:checked + .heroCostToggleTrack {
  background: var(--aqua);
}
.heroCostToggle input:checked + .heroCostToggleTrack::after {
  transform: translateX(18px);
}
.heroCostToggleLabel {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}
.heroCostCompare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.heroCostState {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.heroCostState.is-active {
  opacity: 1;
  border-color: rgba(4, 217, 221, 0.4);
  background: rgba(4, 217, 221, 0.06);
}
.heroInterfacePreview.is-bluesky-off .heroCostState[data-hero-cost-state="on"] {
  opacity: 0.55;
  border-color: var(--line);
  background: var(--panel);
}
.heroInterfacePreview.is-bluesky-off .heroCostState[data-hero-cost-state="off"] {
  opacity: 1;
  border-color: rgba(145, 166, 185, 0.45);
  background: rgba(145, 166, 185, 0.08);
}
.heroInterfacePreview.is-bluesky-on .heroCostState[data-hero-cost-state="on"] {
  opacity: 1;
  border-color: rgba(4, 217, 221, 0.4);
  background: rgba(4, 217, 221, 0.06);
}
.heroCostLabel {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.heroCostValue {
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.heroCostState.is-active .heroCostValue {
  color: var(--text);
}
.heroCostValue.heroCostLow,
.heroInterfacePreview.is-bluesky-on .heroCostState[data-hero-cost-state="on"] .heroCostValue {
  color: var(--aqua);
}
.heroInterfacePreview.is-bluesky-off .heroCostState[data-hero-cost-state="off"] .heroCostValue {
  color: var(--text);
}
.heroCostState small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.heroInterfacePreview.is-bluesky-on [data-hero-receipt-placeholder] {
  display: none;
}
.heroInterfacePreview.is-bluesky-off [data-hero-receipt] {
  display: none;
}
.heroInterfacePreview.is-bluesky-off [data-hero-receipt-placeholder] {
  display: flex;
}
.heroInterfaceFade {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 2;
  pointer-events: none;
}
.heroInterfaceFadeTop {
  top: 34px;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
}
.heroInterfaceFadeBottom {
  bottom: 28px;
  background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
}
.heroInterfaceTabs {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-inset);
}
.heroInterfaceTab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.heroInterfaceTab:hover { color: var(--text); }
.heroInterfaceTab.is-active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.heroInterfacePanels {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: clamp(220px, 34vh, 360px);
}
.heroInterfacePanel { display: none; }
.heroInterfacePanel.is-active {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.heroInterfaceNote {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
/* Simplified hero preview — toggle pill + savings stamp */
.heroTogglePill { display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none; margin-left:auto; }
.heroTogglePill input { position:absolute; opacity:0; width:0; height:0; }
.heroTogglePillTrack { width:26px; height:15px; border-radius:8px; background:rgba(255,255,255,0.15); position:relative; transition:background 0.2s; flex-shrink:0; }
.heroTogglePillTrack::after { content:''; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,0.5); transition:transform 0.2s, background 0.2s; }
.heroTogglePill input:checked + .heroTogglePillTrack { background:rgba(4,217,221,0.45); }
.heroTogglePill input:checked + .heroTogglePillTrack::after { transform:translateX(11px); background:var(--aqua); }
.heroTogglePillLabel { font-size:10px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:0.02em; white-space:nowrap; }
.heroSavingsStamp { display:inline-flex; flex-direction:column; gap:1px; margin-top:10px; padding:7px 12px 8px; border:1.5px solid rgba(4,217,221,0.65); border-radius:7px; background:rgba(4,217,221,0.07); transform:rotate(-2deg); transform-origin:left center; opacity:0; transition:opacity 0.5s ease; pointer-events:none; }
.heroSavingsStamp.is-visible { opacity:1; }
.heroSavingsStampSpark { font-size:9px; color:var(--aqua); font-weight:900; line-height:1; }
.heroSavingsStamp strong { font-size:14px; font-weight:900; color:var(--aqua); letter-spacing:-0.02em; line-height:1.2; display:block; }
.heroSavingsStamp > span:last-child { font-size:9px; color:rgba(4,217,221,0.65); font-weight:600; display:block; }
.heroChatChrome {
  display: grid;
  grid-template-rows: auto 1fr auto;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-inset);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Codex skin */
.heroInterfaceCodex .heroChatChrome {
  border-color: #2a2a2a;
  background: #141414;
}
.heroInterfaceCodex .heroChatTopbar {
  background: #1a1a1a;
  border-bottom-color: #2a2a2a;
}
.heroInterfaceCodex .heroChatTitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ececec;
  font-weight: 700;
}
.heroInterfaceCodex .heroChatBadge {
  border-color: #333;
  color: #9b9b9b;
  background: #222;
}
.heroInterfaceCodex .heroChatMessages { background: #141414; }
.heroInterfaceCodex .heroChatAvatar { background: #333; color: #bbb; }
.heroInterfaceCodex .heroChatAvatar.codex {
  background: #10a37f;
  color: #fff;
}
.heroInterfaceCodex .heroChatAvatar.codex .heroBrandIcon {
  width: 12px;
  height: 12px;
}
.heroInterfaceCodex .heroChatBody p { color: #e8e8e8; font-size: 11px; line-height: 1.4; }
.heroInterfaceCodex .heroChatComposer {
  background: linear-gradient(180deg, transparent, #141414 30%);
  border-top-color: #2a2a2a;
}
.heroInterfaceCodex .heroChatComposerBox {
  background: #1f1f1f;
  border-color: #333;
  border-radius: 12px;
}
.heroInterfaceCodex .heroChatSend.codex { background: #10a37f; color: #fff; }
/* Claude skin */
.heroInterfaceClaude .heroChatChrome {
  border-color: #e8e4dc;
  background: #faf8f5;
}
.heroInterfaceClaude .heroChatTopbar {
  background: #fff;
  border-bottom-color: #ebe6de;
}
.heroInterfaceClaude .heroChatTitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #2b2a27;
  font-weight: 700;
}
.claudeDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d97757;
}
.heroInterfaceClaude .heroChatBadge {
  border-color: #ebe6de;
  color: #6b6560;
  background: #f4f1eb;
}
.heroInterfaceClaude .heroChatMessages { background: #faf8f5; }
.heroInterfaceClaude .heroChatAvatar.claude-user {
  background: #e8e4dc;
  color: #5c5852;
}
.heroInterfaceClaude .heroChatAvatar.claude {
  background: #d97757;
  color: #fff;
}
.heroInterfaceClaude .heroChatAvatar.claude .heroBrandIcon {
  width: 12px;
  height: 12px;
}
.heroInterfaceClaude .heroChatBody p { color: #2b2a27; font-size: 11px; line-height: 1.4; }
.heroInterfaceClaude .heroChatReceipt {
  border-color: rgba(217, 119, 87, 0.28);
  background: #fff;
}
.heroInterfaceClaude .heroChatReceiptHead > span:nth-child(2),
.heroInterfaceClaude .heroChatReceiptSpark,
.heroInterfaceClaude .heroChatReceiptPct {
  color: #c45f42;
}
.heroInterfaceClaude .heroChatReceiptPct { background: rgba(217, 119, 87, 0.12); }
.heroInterfaceClaude .heroChatReceiptBar span {
  background: linear-gradient(90deg, #d97757, #e8a087);
}
.heroInterfaceClaude .heroChatReceiptDl dt { color: #8a847c; }
.heroInterfaceClaude .heroChatReceiptDl dd { color: #2b2a27; }
.heroInterfaceClaude .heroChatComposer {
  background: linear-gradient(180deg, transparent, #faf8f5 28%);
  border-top-color: #ebe6de;
}
.heroInterfaceClaude .heroChatComposerBox {
  background: #fff;
  border-color: #ddd8cf;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(43, 42, 39, 0.06);
}
.heroInterfaceClaude .heroChatComposerPlaceholder { color: #9a948c; }
.heroInterfaceClaude .heroChatSend.claude { background: #d97757; color: #fff; }
html[data-theme="dark"] .heroInterfaceClaude .heroChatChrome {
  border-color: #3d3a35;
  background: #2b2a27;
}
html[data-theme="dark"] .heroInterfaceClaude .heroChatTopbar {
  background: #32312e;
  border-bottom-color: #3d3a35;
}
html[data-theme="dark"] .heroInterfaceClaude .heroChatTitle { color: #f3f1ec; }
html[data-theme="dark"] .heroInterfaceClaude .heroChatBadge {
  border-color: #4a4742;
  color: #b8b2a8;
  background: #3a3834;
}
html[data-theme="dark"] .heroInterfaceClaude .heroChatMessages { background: #2b2a27; }
html[data-theme="dark"] .heroInterfaceClaude .heroChatBody p { color: #f3f1ec; }
html[data-theme="dark"] .heroInterfaceClaude .heroChatAvatar.claude-user {
  background: #4a4742;
  color: #e8e4dc;
}
html[data-theme="dark"] .heroInterfaceClaude .heroChatReceipt { background: #32312e; }
html[data-theme="dark"] .heroInterfaceClaude .heroChatReceiptDl dd { color: #f3f1ec; }
html[data-theme="dark"] .heroInterfaceClaude .heroChatComposer {
  background: linear-gradient(180deg, transparent, #2b2a27 28%);
  border-top-color: #3d3a35;
}
html[data-theme="dark"] .heroInterfaceClaude .heroChatComposerBox {
  background: #32312e;
  border-color: #4a4742;
}
.heroChatTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.heroChatTitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
}
.heroBrandIcon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.heroBrandIconCodex { color: #10a37f; }
.heroBrandIconClaude { color: #d97757; }
.heroInterfaceTab .heroBrandIcon {
  width: 13px;
  height: 13px;
}
.heroInterfaceTab.is-active .heroBrandIconCodex { color: #10a37f; }
.heroInterfaceTab.is-active .heroBrandIconClaude { color: #d97757; }
.heroChatBadge {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.heroChatMessages {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.heroChatTurn.assistant {
  flex: 1;
  min-height: 0;
  align-content: start;
}
.heroChatTurn.assistant .heroChatBody {
  flex: 1;
}
.heroChatTurn.assistant .heroChatBody p {
  flex: 1;
}
.heroChatBody {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.heroChatReceiptSlot {
  margin-top: auto;
  min-height: 44px;
}
.heroChatReceiptPlaceholder {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: rgba(145, 166, 185, 0.06);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.heroChatReceiptPlaceholder small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  opacity: 0.85;
}
.heroInterfaceCodex .heroChatReceiptPlaceholder {
  border-color: #333;
  background: rgba(255, 255, 255, 0.03);
  color: #8a8a8a;
}
.heroInterfaceClaude .heroChatReceiptPlaceholder {
  border-color: #e0dbd2;
  background: rgba(107, 101, 96, 0.05);
  color: #8a847c;
}
.heroChatTurn {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
}
.heroChatAvatar {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--line);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.heroChatBody p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text);
}
.heroChatReceipt {
  border: 1px solid rgba(4, 217, 221, 0.3);
  border-radius: 7px;
  background: rgba(11, 28, 46, 0.72);
  overflow: hidden;
}
.heroChatReceiptHead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  padding: 6px 8px;
  font-size: 11px;
}
.heroChatReceiptSpark { color: var(--aqua); font-size: 10px; }
.heroChatReceiptHead > span:nth-child(2) { font-weight: 800; color: var(--aqua); }
.heroChatReceiptPct {
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(4, 217, 221, 0.12);
  color: var(--aqua);
  font-size: 9px;
  font-weight: 800;
}
.heroChatReceiptBar {
  height: 3px;
  margin: 0 8px 7px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.heroChatReceiptBar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aqua), var(--blue));
}
.heroChatReceiptDl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 8px 10px 10px;
  padding: 0;
}
.heroChatReceiptDl > div { display: grid; gap: 2px; }
.heroChatReceiptDl dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
.heroChatReceiptDl dd {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}
.heroChatComposer {
  padding: 8px 10px 9px;
  background: linear-gradient(180deg, transparent, var(--surface-inset) 28%);
  border-top: 1px solid var(--line);
}
.heroChatComposerBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}
.heroChatComposerPlaceholder {
  color: var(--muted);
  font-size: 11px;
}
.heroChatSend {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--aqua);
  color: #07111e;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.auditPreview { position: relative; padding: 20px; border: 1px solid rgba(4, 217, 221, 0.35); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); }
.auditPreview::before { content: ""; position: absolute; inset: -70px; z-index: -1; background: radial-gradient(circle, rgba(4, 217, 221, 0.16), transparent 62%); }
.previewTop, .previewAnswer, .previewSavings { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.previewTop { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
.previewLive { color: var(--aqua); }
.previewLive i { width: 7px; height: 7px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 5px rgba(4, 217, 221, 0.1); }
.previewPrompt { width: 84%; margin: 24px 0 18px auto; padding: 13px 15px; border-radius: 16px 16px 5px 16px; background: var(--user-bubble); }
.previewPrompt small, .previewAnswer small, .previewComparison small, .previewComparison span, .previewSavings span, .previewSavings small { color: var(--muted); }
.previewPrompt p, .previewAnswer p { margin: 3px 0 0; }
.previewAnswer { justify-content: flex-start; align-items: flex-start; padding: 5px 0 22px; }
.previewComparison { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.previewComparison > div:not(.comparisonArrow) { min-width: 0; display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-inset); }
.previewComparison .selected { border-color: rgba(4, 217, 221, 0.55) !important; background: rgba(4, 217, 221, 0.055) !important; }
.previewComparison span { font-size: 10px; }
.comparisonArrow { align-self: center; color: var(--aqua); font-weight: 900; }
.previewSavings { display: grid; grid-template-columns: 1fr auto; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.previewSavings strong { color: var(--aqua); }
.previewSavings small { grid-column: 1 / -1; font-size: 10px; }
.previewCost { font-size: 15px !important; font-weight: 800; margin-top: 3px; }
.previewCostHigh { color: var(--muted); text-decoration: line-through; }
.previewCostLow { color: var(--aqua); }
.compactHeroInner { max-width: 700px; margin: 0 auto; text-align: center; }
.compactHero { padding: clamp(56px, 8vh, 96px) 0 clamp(44px, 5vh, 64px); }
.marketingHero {
  padding: clamp(56px, 8vh, 96px) 0 clamp(40px, 5vh, 56px);
  border-bottom: 1px solid var(--line);
}
.marketingHeroSplit {
  text-align: left;
}
.marketingHeroSplitGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.marketingHeroCopy .marketingHeroLead {
  margin-left: 0;
  margin-right: 0;
}
.marketingHeroCopy .heroActions {
  justify-content: flex-start;
}
.marketingHeroAside {
  min-width: 0;
}
.marketingHeroWays {
  background: linear-gradient(135deg, rgba(4, 217, 221, 0.06) 0%, transparent 55%);
}
.marketingHeroDev {
  background: linear-gradient(135deg, rgba(18, 140, 255, 0.07) 0%, transparent 58%);
}
.marketingHeroMcp {
  background: linear-gradient(135deg, rgba(255, 189, 89, 0.06) 0%, transparent 58%);
}
.marketingHeroTeams {
  background: linear-gradient(135deg, rgba(4, 217, 221, 0.05) 0%, rgba(18, 140, 255, 0.04) 100%);
}
.marketingHeroInner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.marketingHero h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.8vw, 46px);
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.marketingHeroLead {
  max-width: var(--copy-max);
  margin: 0 auto 22px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}
.marketingHero .heroActions,
.compactHero .heroActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
}
.marketingPage .section { padding: var(--section-pad-y) 0; }
.marketingPage .grid3 { gap: clamp(16px, 2vw, 20px); }
.sectionTitleLeft {
  text-align: left;
  margin: 0 0 clamp(24px, 3vh, 32px);
  max-width: 720px;
}
.sectionTitleLeft h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.03em;
}
.sectionTitleLeft p {
  margin: 0;
  max-width: var(--copy-max);
  color: var(--muted);
  line-height: 1.65;
}
.surfacePaths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
}
.surfacePath {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.5vw, 28px);
  border-left: 3px solid rgba(4, 217, 221, 0.45);
}
.surfacePathHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.surfacePathHead h2 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: -0.02em;
}
.surfacePath p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
}
.surfacePathPoints {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  flex: 1;
}
.surfacePathPoints li {
  position: relative;
  padding-left: 14px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.surfacePathPoints li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aqua);
}
.chatFeatureGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
}
.chatFeature {
  padding: clamp(22px, 2.5vw, 28px);
}
.chatFeature h2 {
  margin: 10px 0 12px;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.chatFeature p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.devLanding {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(18px, 2.5vw, 24px);
  align-items: start;
}
.devSnippet {
  padding: clamp(22px, 2.5vw, 28px);
}
.devSnippet h2 {
  margin: 10px 0 14px;
  font-size: 24px;
}
.devSnippet .code {
  margin: 0 0 12px;
  font-size: 13px;
}
.devCompat {
  display: grid;
  gap: 14px;
}
.devCompat .card {
  padding: 20px;
}
.devCompat h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.devCompat p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}
.devAgentList {
  margin: 0 0 22px;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}
.mcpApprovalFlow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.mcpApprovalStep {
  padding: 22px;
}
.mcpApprovalTag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mcpApprovalTag.read {
  background: rgba(18, 140, 255, 0.14);
  color: var(--blue);
}
.mcpApprovalTag.write {
  background: rgba(255, 189, 89, 0.14);
  color: var(--warning);
}
.mcpApprovalStep h3 {
  margin: 0 0 8px;
  font-size: 20px;
}
.mcpApprovalStep p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.mcpDetails {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.mcpDetails .card {
  padding: 20px;
}
.mcpDetails h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.mcpDetails p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}
.teamRoles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.teamRole {
  padding: 22px;
}
.teamRole h3 {
  margin: 0 0 8px;
  font-size: 20px;
}
.teamRole p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.teamShared {
  padding: clamp(22px, 2.5vw, 28px);
}
.teamShared h2 {
  margin: 0 0 14px;
  font-size: 24px;
}
.waysHeroMap {
  display: grid;
  gap: 10px;
}
.waysHeroMapStep {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.waysHeroMapStep:hover {
  border-color: rgba(4, 217, 221, 0.35);
  transform: translateX(4px);
}
.waysHeroMapStep span {
  font-weight: 800;
  font-size: 16px;
}
.waysHeroMapStep small {
  color: var(--muted);
  font-size: 12px;
}
.waysSharedList {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 720px;
}
.devHeroTerminal {
  padding: 0;
  overflow: hidden;
}
.devHeroTerminalBar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.12);
}
.devHeroTerminalBar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.devHeroTerminal .code {
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  font-size: 12px;
}
.devHeroTerminal .muted {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 12px;
}
.devRequestPath {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.devRequestNode {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.devRequestNode strong {
  font-size: 14px;
}
.devRequestNode span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.devRequestNodeCore {
  border-color: rgba(4, 217, 221, 0.35);
  background: rgba(4, 217, 221, 0.06);
}
.devRequestArrow {
  align-self: center;
  color: var(--aqua);
  font-weight: 800;
  font-size: 18px;
}
.devCompat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.mcpHeroFlow {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.mcpHeroFlowStep {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.mcpHeroFlowStep span {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mcpHeroFlowStep.read span {
  background: rgba(18, 140, 255, 0.14);
  color: var(--blue);
}
.mcpHeroFlowStep.write span {
  background: rgba(255, 189, 89, 0.14);
  color: var(--warning);
}
.mcpHeroFlowStep p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.mcpCompare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.mcpCompareCol {
  padding: 22px;
}
.mcpCompareCol h3 {
  margin: 10px 0 12px;
  font-size: 22px;
}
.mcpEndpoint {
  padding: 22px;
}
.mcpEndpoint h3 {
  margin: 0 0 8px;
  font-size: 20px;
}
.mcpEndpoint p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.teamHeroOrg {
  display: grid;
  gap: 10px;
  padding: 18px;
}
.teamHeroOrgRow {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
  color: var(--muted);
}
.teamHeroOrgRole {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.teamHeroOrgRole.owner { background: rgba(4, 217, 221, 0.14); color: var(--aqua); }
.teamHeroOrgRole.admin { background: rgba(18, 140, 255, 0.14); color: var(--blue); }
.teamHeroOrgRole.member { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.teamPlanFit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.teamPlanFitCard {
  padding: 22px;
}
.teamPlanFitCard h3 {
  margin: 10px 0 12px;
  font-size: 20px;
}
.surfaceTeasers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.surfaceTeaser {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.surfaceTeaser:hover {
  border-color: rgba(4, 217, 221, 0.35);
  transform: translateY(-3px);
}
.surfaceTeaser h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.surfaceTeaser p {
  margin: 0;
  flex: 1;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.surfaceTeaserLink {
  color: var(--aqua);
  font-size: 13px;
  font-weight: 700;
}
.infoCard { transition: border-color 0.2s, transform 0.2s; }
.infoCard:hover { border-color: rgba(4,217,221,0.3); transform: translateY(-3px); }
.infoCard h2 { font-size: 22px; margin: 14px 0 10px; }
/* Audience cards (who section) */
.audienceCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.audienceCard { display: flex; flex-direction: column; gap: 10px; padding: 28px; transition: border-color 0.2s, transform 0.2s; }
.audienceCard:hover { border-color: rgba(4,217,221,0.3); transform: translateY(-3px); }
.audienceCard .surfaceTag { align-self: flex-start; }
.audienceCard h3 { font-size: 22px; margin: 4px 0 0; }
.audienceCard p { color: var(--muted); margin: 0; flex: 1; }
.audienceCard a { color: var(--aqua); font-weight: 800; font-size: 14px; margin-top: 6px; }
/* Process cards (how section) */
.processCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.processCard { padding: 28px; transition: border-color 0.2s, transform 0.2s; }
.processCard:hover { border-color: rgba(4,217,221,0.3); transform: translateY(-3px); }
.processNum { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(4,217,221,0.12); color: var(--aqua); font-size: 15px; font-weight: 900; margin-bottom: 16px; }
.processCard h3 { font-size: 20px; margin: 0 0 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.processCard p { color: var(--muted); margin: 0; }
/* Evidence badges */
.evidenceBadges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.evidenceBadge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; }
.evidenceBadge.measured { background: rgba(4,217,221,0.15); color: var(--aqua); }
.evidenceBadge.estimated { background: rgba(18,140,255,0.15); color: var(--blue); }
.evidenceBadge.modeled { background: rgba(154,124,255,0.15); color: var(--purple); }
.evidenceBadge.unknown { background: rgba(145,166,185,0.12); color: var(--muted); }
/* Pricing CTA banner */
.pricingBanner {
  border-top: 1px solid var(--line);
  padding: clamp(32px, 4vh, 48px) 0;
}
.pricingBannerIn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pricingBannerIn > div:first-child {
  max-width: 560px;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.55;
}
.pricingNotice { margin-top: clamp(24px, 3vh, 32px); }
.pricingBannerActions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.auditSteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 18px); }
.auditSteps article {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(22px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.auditSteps article > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: rgba(4, 217, 221, 0.12); color: var(--aqua); font-weight: 900; }
.auditSteps h3 { margin: 18px 0 8px; font-size: 20px; }
.auditSteps p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; flex: 1; }
.auditStepResult { display: block; margin-top: 14px; color: var(--aqua); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.metricChip, .surfaceTag { display: inline-block; padding: 2px 8px; border-radius: 5px; background: rgba(4,217,221,0.12); color: var(--aqua); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; vertical-align: middle; white-space: nowrap; }
.metricChip { margin-left: 8px; }
.surfaceTag { margin-left: 8px; }
.valueLines {
  margin: 62px 0 0;
  border-top: 1px solid var(--line);
}
.valueLines > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.valueLines dt {
  color: var(--text);
  font-weight: 850;
}
.valueLines dd {
  margin: 0;
  color: var(--muted);
}
.splitSection {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(40px, 8vw, 110px);
  align-items: start;
}
.splitSection h2 {
  margin: 12px 0 16px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.audienceList article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 25px 0;
  border-top: 1px solid var(--line);
}
.audienceList article:last-child {
  border-bottom: 1px solid var(--line);
}
.audienceList h3,
.processList h3 {
  margin: 0 0 6px;
  font-size: 20px;
}
.audienceList p,
.processList p {
  margin: 0;
  color: var(--muted);
}
.audienceList a {
  color: var(--aqua);
  font-weight: 800;
  white-space: nowrap;
}
.processList {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.processList li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.processList li > span {
  color: var(--aqua);
  font-weight: 900;
}
.evidenceSection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 50px);
}
.evidenceSection > div {
  max-width: 720px;
}
.evidenceSection h2 {
  margin: 12px 0 14px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.evidenceSection p {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
}
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.proofRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 42px;
  color: var(--muted);
  font-size: 13px;
}
.proofRow b {
  color: var(--text);
  font-size: 14px;
}
.receiptDemo,
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.receiptDemo {
  padding: 26px;
  transform: rotate(1deg);
  position: relative;
}
.receiptDemo:before {
  content: "";
  position: absolute;
  inset: -80px;
  background: radial-gradient(
    circle,
    rgba(4, 217, 221, 0.16),
    transparent 55%
  );
  z-index: -1;
}
.receiptHead,
.cardHead,
.rowBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.receiptHead span,
.pill {
  border: 1px solid rgba(4, 217, 221, 0.3);
  background: rgba(4, 217, 221, 0.09);
  color: var(--aqua);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
}
.receiptRoute {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
}
.modelBox {
  padding: 16px;
  background: var(--surface-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 3px;
}
.modelBox small,
.receiptStats span,
.muted {
  color: var(--muted);
}
.modelBox.selected {
  border-color: rgba(4, 217, 221, 0.5);
}
.receiptStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.receiptStats > div {
  padding: 14px;
  background: var(--surface-inset);
  border-radius: 10px;
}
.receiptStats b {
  display: block;
  font-size: 22px;
}
.receiptStats small {
  color: var(--muted);
}
.section {
  padding: var(--section-pad-y) 0;
}
.section.alt {
  background: var(--surface-alt);
  border-block: 1px solid rgba(255, 255, 255, 0.05);
}
.sectionTitle {
  text-align: center;
  margin: 0 auto var(--section-title-gap);
  max-width: 760px;
}
.sectionTitle h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.04em;
  margin: 10px 0 0;
  line-height: 1.08;
}
.sectionTitle p {
  margin: 12px auto 0;
  max-width: var(--copy-max);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}
.featureGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature {
  padding: 25px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(4, 217, 221, 0.1);
  color: var(--aqua);
  font-weight: 900;
  margin-bottom: 20px;
}
.feature h3,
.step h3 {
  font-size: 20px;
  margin: 0 0 8px;
}
.feature p,
.step p {
  color: var(--muted);
  margin: 0;
}
.featureCta {
  display: inline-block;
  margin-top: 18px;
  color: var(--aqua);
  font-weight: 800;
}
.centerCta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  margin-top: clamp(28px, 4vh, 40px);
}
.steps.onboardingMarketing {
  grid-template-columns: repeat(4, 1fr);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.step {
  position: relative;
  padding: 27px;
  border-left: 2px solid var(--aqua);
  background: var(--surface-subtle);
}
.step strong {
  font-size: 13px;
  color: var(--aqua);
  letter-spacing: 0.12em;
}
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.priceCard {
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.priceCard.featured {
  border-color: var(--aqua);
  transform: translateY(-6px);
  box-shadow: 0 24px 70px rgba(4, 217, 221, 0.08);
}
.price {
  font-size: 42px;
  font-weight: 850;
  letter-spacing: -0.04em;
  margin: 14px 0;
}
.price small {
  font-size: 14px;
  color: var(--muted);
}
.checklist {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--muted);
  margin: 20px 0 26px;
}
.checklist li:before {
  content: "✓";
  color: var(--aqua);
  font-weight: 900;
  margin-right: 10px;
}
.footer {
  padding: 36px 0 44px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.footerIn {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.authPage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 90px 30px 30px;
}
.authTop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter: blur(14px);
}
.authTop nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.authTop nav a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.authTop nav a:hover,
.authTop nav a:focus-visible {
  color: var(--text);
}
.authTop .themeToggle {
  justify-self: end;
}
.authCard {
  width: min(440px, 100%);
  padding: 28px;
}
.authHeader {
  margin-top: 24px;
}
.authHeader h1,
.authHeader p {
  margin: 0;
}
.authHeader h1 {
  font-size: 27px;
  letter-spacing: 0;
}
.authHeader p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.authCard .error,
.authCard .notice {
  margin-top: 16px;
}
.authCard .error a {
  display: inline-block;
  margin-left: 4px;
  color: inherit;
  font-weight: 800;
}
.authForm {
  gap: 14px;
  margin-top: 20px;
}
.authForm .button {
  width: 100%;
}
.authFieldHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.authFieldHead a {
  color: var(--aqua);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}
.authSwitch {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.authStatus {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 18px 0;
  border-radius: 50%;
  background: rgba(4, 217, 221, 0.13);
  color: var(--aqua);
  font-size: 20px;
  font-weight: 900;
}
.authNext {
  display: grid;
  gap: 4px;
  margin: 22px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-inset);
}
.authNext span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.socialButtons { display: flex; justify-content: center; gap: 10px; }
.socialButton { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--text); font: inherit; text-decoration: none; cursor: pointer; flex-shrink: 0; }
.socialButton:hover { border-color: var(--aqua); background: var(--surface-active); }
.socialMark { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-inset); color: var(--text); font-size: 11px; font-weight: 900; }
.socialMark.google { color: #4285f4; }
.socialMark.microsoft { color: #4b79d8; }
.socialMark.github { color: var(--text); }
.socialMark.meta { color: #1877f2; font-size: 18px; }
.authDivider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.authDivider::before,.authDivider::after { content:""; height: 1px; flex: 1; background: var(--line); }
.socialAuth .consent { margin-top: 2px; }
.socialAuthNote { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }
.authFootnote { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }
.form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.field {
  display: grid;
  gap: 7px;
}
.field label {
  font-size: 13px;
  color: var(--field-label);
  font-weight: 700;
}
.field input,
.field textarea,
.field select,
.input {
  width: 100%;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 13px;
  color: var(--text);
  outline: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--aqua);
}
.error,
.success,
.notice {
  padding: 12px 14px;
  border-radius: 10px;
  margin: 12px 0;
}
.error {
  background: rgba(255, 107, 122, 0.1);
  border: 1px solid rgba(255, 107, 122, 0.35);
  color: #ffadb6;
}
.success {
  background: rgba(4, 217, 221, 0.1);
  border: 1px solid rgba(4, 217, 221, 0.35);
  color: #86f3d7;
}
.notice {
  background: rgba(18, 140, 255, 0.08);
  border: 1px solid rgba(18, 140, 255, 0.3);
  color: #b9dcff;
}
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 245px 1fr;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.sidebarHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.sidebarHead .brand {
  flex: 1 1 auto;
  overflow: hidden;
}
.sidebarHead .brandMark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}
.sidebarHead .brandName {
  font-size: 17px;
}
.sidebarToggle {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.sidebarToggle:hover {
  background: var(--surface-active);
  color: var(--text);
  border-color: var(--aqua);
}
.sidebar nav {
  display: grid;
  gap: 3px;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.sidebar nav a:hover,
.sidebar nav a.active {
  background: var(--surface-active);
  color: var(--text);
}
.sidebar nav a:hover .navIco,
.sidebar nav a.active .navIco {
  opacity: 1;
  color: var(--aqua);
}
.navIco {
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}
.navLabel {
  flex: 1;
}
.sidebarFooter {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.workspace {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  cursor: default;
  transition: background 0.15s;
  margin-top: 4px;
}
.workspace:hover {
  background: var(--surface-active);
}
.workspaceAvatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(4,217,221,0.15);
  color: var(--aqua);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.workspaceInfo strong {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.workspaceInfo small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: capitalize;
  margin-top: 1px;
}
/* Collapsed sidebar */
.app.sidebarCollapsed {
  grid-template-columns: 64px 1fr;
}
.app.sidebarCollapsed .sidebar {
  padding: 16px 10px;
}
.app.sidebarCollapsed .sidebarHead {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.app.sidebarCollapsed .sidebarToggle svg {
  transform: rotate(180deg);
}
.app.sidebarCollapsed .sidebar .brand {
  width: 40px;
  flex: 0 0 40px;
}
.app.sidebarCollapsed .sidebar .brandMark {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}
.app.sidebarCollapsed .sidebar .brandCopy {
  display: none;
}
.app.sidebarCollapsed .navLabel {
  display: none;
}
.app.sidebarCollapsed .sidebar nav a {
  justify-content: center;
  padding: 10px;
}
.app.sidebarCollapsed .workspaceInfo {
  display: none;
}
.app.sidebarCollapsed .workspace {
  justify-content: center;
}
.app.sidebarCollapsed .orgSwitcher {
  display: none;
}
.appMain {
  min-width: 0;
}
.appTop {
  height: 72px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: var(--nav-bg);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
  gap: 18px;
}
.appStatus,
.appIdentity {
  flex: 0 0 auto;
}
.appIdentity { display: flex; align-items: center; gap: 12px; }
.userMenu { position: relative; }
.userMenu > summary { list-style: none; cursor: pointer; }
.userMenu > summary::-webkit-details-marker { display: none; }
.userAvatar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(4,217,221,.42); border-radius: 50%; background: linear-gradient(145deg,rgba(4,217,221,.2),rgba(18,140,255,.18)); color: var(--text); font-weight: 900; }
.userAvatar.large { width: 62px; height: 62px; font-size: 24px; }
.userMenuPanel { position: absolute; z-index: 80; right: 0; top: calc(100% + 10px); width: 250px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.userMenuIdentity { display: grid; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); }
.userMenuIdentity small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.userMenuPanel a,.userMenuPanel button { width: 100%; display: block; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.userMenuPanel a:hover,.userMenuPanel button:hover { background: var(--surface-active); }
.userMenuSection { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.userMenuSection > span { display: block; padding: 7px 10px 3px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.accountProfile { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.accountProfile h2,.accountProfile p { margin: 0 0 5px; }
.settingsGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.settingsLink { display: grid; gap: 6px; color: var(--text); text-decoration: none; }
.settingsLink:hover { border-color: var(--aqua); transform: translateY(-1px); }
.settingsLink > span { color: var(--aqua); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.settingsLink small { color: var(--muted); line-height: 1.45; }
.accountSection { margin-top: 34px; scroll-margin-top: 90px; }
.buttonRow { display: flex; flex-wrap: wrap; gap: 8px; }
.savingsWidget {
  position: relative;
  min-width: 0;
  margin-left: auto;
}
.savingsWidget > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: none;
  cursor: pointer;
  list-style: none;
}
.savingsWidget > summary::-webkit-details-marker {
  display: none;
}
.savingsWidget > summary:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}
.savingsSpark {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(4,217,221,.12);
  color: var(--aqua);
  font-size: 15px;
  font-weight: 900;
  box-shadow: none;
}
.savingsMetric {
  min-width: 82px;
  display: grid;
  line-height: 1.15;
}
.savingsMetric small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.savingsMetric strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
.savingsRoutes {
  min-width: 104px;
}
.savingsProof {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 118px;
  padding: 4px 7px;
  border: 1px solid rgba(4, 217, 221, 0.28);
  border-radius: 6px;
  color: var(--aqua);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.savingsEmptyState {
  display: grid;
  min-width: 130px;
  line-height: 1.2;
}
.savingsEmptyState small {
  color: var(--muted);
  font-size: 9px;
}
.savingsEmptyState strong {
  margin-top: 2px;
  font-size: 12px;
}
.savingsWidget.isEmpty .savingsSpark {
  background: var(--surface-inset);
  color: var(--muted);
}
.savingsChevron {
  color: var(--muted);
  font-size: 14px;
  transition: transform .16s ease;
}
.savingsWidget[open] .savingsChevron {
  transform: rotate(180deg);
}
.savingsEmptyBreakdown h3,
.savingsEmptyBreakdown p {
  margin: 0;
}
.savingsEmptyBreakdown h3 {
  font-size: 15px;
}
.savingsEmptyBreakdown p {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.savingsBreakdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(470px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
.savingsBreakdownHead {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}
.savingsBreakdownHead small,
.savingsBreakdownHead strong {
  display: block;
}
.savingsBreakdownHead small,
.savingsBreakdown p,
.savingsComponents span,
.savingsComponents small {
  color: var(--muted);
}
.savingsBreakdownHead strong {
  margin-top: 4px;
}
.savingsComponents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.savingsComponents > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-inset);
}
.savingsComponents span,
.savingsComponents b,
.savingsComponents small {
  display: block;
}
.savingsComponents b {
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.savingsComponents small {
  font-size: 10px;
}
.savingsBreakdown p {
  font-size: 11px;
}
.page {
  padding: 30px;
}
.pageHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.pageHeader h1 {
  font-size: 36px;
  letter-spacing: -0.035em;
  margin: 7px 0;
}
.pageHeader p {
  color: var(--muted);
  margin: 0;
}
.compactHeader {
  margin-bottom: 16px;
}
.compactHeader h1 {
  font-size: 34px;
}
.onboardingBody {
  min-height: 100vh;
  background: var(--bg);
}
.onboardingTop {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--sidebar-bg) 96%, transparent);
}
.onboardingTopInner {
  width: min(1180px, calc(100% - 40px));
  min-height: 74px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.onboardingTop .savingsWidget {
  margin-left: auto;
  box-shadow: none;
}
.quietButton {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.quietButton:hover,
.quietButton:focus-visible {
  color: var(--text);
}
.onboardingMain {
  width: min(1040px, 100%);
  margin: auto;
}
.onboardingPage {
  max-width: 820px;
  padding-top: 28px;
}
.setupWizard {
  min-width: 0;
}
.setupWizardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
}
.setupWizardIntro h1,
.setupWizardIntro p {
  margin: 0;
}
.setupWizardIntro h1 {
  margin: 4px 0 7px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
}
.setupWizardIntro > p:not(.setupPathLabel) {
  max-width: 520px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.setupWizardIntro .textLink {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
}
.setupWizardMain {
  min-width: 0;
  padding-top: 22px;
}
.setupWizardStep {
  padding-bottom: 4px;
}
.setupWizardStep > span {
  color: var(--aqua);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.setupWizardStepHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.setupWizardStepHead > span {
  padding-top: 0;
  color: var(--aqua);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.setupTypePicker {
  position: relative;
}
.setupTypePicker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 164px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  list-style: none;
}
.setupTypePicker > summary::-webkit-details-marker {
  display: none;
}
.setupTypePicker > summary:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}
.setupTypePicker > summary span:first-child {
  display: grid;
}
.setupTypePicker > summary small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
}
.setupTypePicker > summary strong {
  margin-top: 1px;
  font-size: 10px;
}
.setupTypeChevron {
  color: var(--muted);
  transition: transform .16s ease;
}
.setupTypePicker[open] .setupTypeChevron {
  transform: rotate(180deg);
}
.setupTypeOptions {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(390px,calc(100vw - 32px));
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
.setupTypeOptions a {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  padding: 10px;
  border-radius: 5px;
  color: var(--text);
  text-decoration: none;
}
.setupTypeOptions a:hover,
.setupTypeOptions a:focus-visible,
.setupTypeOptions a.current {
  background: var(--surface-active);
}
.setupTypeOptions strong,
.setupTypeOptions small {
  display: block;
}
.setupTypeOptions strong {
  font-size: 12px;
}
.setupTypeOptions small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.setupTypeOptions em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}
.setupWizardStep h2 {
  margin: 5px 0;
  font-size: 21px;
  letter-spacing: 0;
}
.setupWizardStep p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.setupWizardMain .error,
.setupWizardMain .setupSecret {
  margin-top: 16px;
}
.setupWizardMain .providerSetup {
  grid-template-columns: 1fr;
  gap: 22px;
}
.setupProgress {
  max-width: 620px;
  display: flex;
  align-items: center;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.setupWizard > .setupProgress {
  margin: 0;
  padding: 2px 0 4px;
}
.setupProgress li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  text-align: left;
}
.setupProgress li:not(:last-child)::after {
  content: "/";
  position: static;
  width: auto;
  height: auto;
  margin: 0 12px;
  color: var(--line);
  background: transparent;
}
.setupProgress span {
  width: auto;
  height: auto;
  display: inline;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 750;
}
.setupProgress .done,
.setupProgress .current { color: var(--text); }
.setupProgress b {
  line-height: 1.25;
  white-space: normal;
  font-weight: 600;
}
.setupProgress .done span,
.setupProgress .current span { color: var(--aqua); }
.setupProgress .done span { font-size: 11px; }
.setupProgress .current span {
  min-width: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb,var(--aqua) 13%,transparent);
}
.setupProgress .current b { color: var(--text); font-weight: 750; }
.setupIntro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}
.setupIntro h1 {
  margin: 5px 0 7px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0;
}
.setupIntro p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.setupIntro .textLink { white-space: nowrap; }
.setupPathLabel {
  margin: 0 0 5px !important;
  color: var(--aqua) !important;
  font-size: 11px !important;
  font-weight: 800;
}
.pathPicker {
  max-width: 760px;
}
.pathPicker fieldset {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.pathChoice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.pathChoice:hover,
.pathChoice:focus-within {
  background: rgba(4, 217, 221, 0.04);
}
.pathChoice input {
  width: 20px;
  height: 20px;
  accent-color: var(--aqua);
}
.pathChoice strong,
.pathChoice small {
  display: block;
}
.pathChoice strong {
  font-size: 19px;
}
.pathChoice strong em { display: inline-flex; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: rgba(4, 217, 221, 0.12); color: var(--aqua); font-size: 9px; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; }
.pathChoice small {
  margin-top: 3px;
  color: var(--muted);
}
.setupCapabilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.setupPathChooser {
  margin-bottom: 18px;
}
.setupWizardSidebar .setupPathChooser {
  margin: 0;
}
.setupPathChooser > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.setupPathChooser h2,
.setupPathChooser p {
  margin: 0;
}
.setupWizardSidebar .setupPathChooser > div:first-child {
  display: block;
}
.setupWizardSidebar .setupCapabilities {
  grid-template-columns: 1fr;
  margin-top: 8px;
  border-bottom: 0;
}
.setupWizardSidebar .setupCapability {
  border-right: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 4px;
}
.setupWizardSidebar .setupCapability.current {
  background: transparent;
  box-shadow: inset 2px 0 var(--aqua);
  padding-left: 11px;
}
.setupWizardSidebar .setupCapability em {
  display: none;
}
.setupPathChooser h2 {
  font-size: 14px;
}
.setupPathChooser p {
  color: var(--muted);
  font-size: 11px;
}
.setupCapability {
  grid-template-columns: 1fr auto;
  padding: 13px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-decoration: none;
}
.setupCapability:last-child {
  border-right: 0;
}
.setupCapability.current {
  background: rgba(4,217,221,.06);
  box-shadow: inset 0 -2px var(--aqua);
}
.setupCapability strong {
  font-size: 13px;
}
.setupCapability small {
  font-size: 10px;
  line-height: 1.4;
}
.setupCapability em {
  align-self: start;
  padding: 4px 8px;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.setupFocus {
  max-width: 900px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.setupWizardMain .setupFocus {
  padding: 16px 0 18px;
  border-top: 0;
}
.setupFocus h2 {
  margin: 5px 0;
  font-size: 22px;
  letter-spacing: 0;
}
.setupFocus p {
  max-width: 680px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}
.setupFormMeta { font-size: 12px; color: var(--muted); margin-top: 12px; max-width: 540px; line-height: 1.5; }
.setupInlineForm {
  max-width: 540px;
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 12px;
}
.setupInlineForm label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 750;
}
.setupInlineForm select,
.setupInlineForm input {
  width: 100%;
  border: 1px solid var(--line);
  min-height: 44px;
  border-radius: 7px;
  padding: 10px 12px;
  background: var(--surface-inset);
  color: var(--text);
}
.setupInlineForm small {
  color: var(--muted);
}
.setupInlineForm label > small { margin-top: -3px; font-size: 11px; font-weight: 500; }
.setupFieldHead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setupKeyHelpButton { width: max-content; padding: 0; font-size: 11px; }
.setupKeyField input { border-color: color-mix(in srgb,var(--aqua) 42%,var(--line)); }
.setupKeyField input:focus { outline: 2px solid color-mix(in srgb,var(--aqua) 28%,transparent); outline-offset: 1px; }
.setupTrust { display: flex; flex-wrap: wrap; gap: 7px; }
.setupTrust span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 9px; font-weight: 750; }
.setupReassurance { margin: 14px 0 0; color: var(--muted); font-size: 10px; text-align: left; }
.providerSetup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.providerKeyHelp { display: grid; gap: 10px; }
.providerKeyHelp h3 { margin: 0; font-size: 15px; }
.providerKeyHelp .providerHelpIntro { margin: -4px 0 2px; color: var(--muted); font-size: 11px; }
.providerKeyHelp > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.providerBadge { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #d9f5ed; color: #075c4e; font-weight: 900; }
.providerBadge.anthropic { background: #f2e4d9; color: #633d26; }
.providerCards { display: flex; gap: 8px; margin-bottom: 2px; }
.providerCard { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; flex: 1; font-size: 13px; font-weight: 700; transition: border-color .12s; position: relative; user-select: none; }
.providerCard.is-selected { border-color: var(--aqua); background: color-mix(in srgb,var(--aqua) 5%,var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--aqua) 18%,transparent); }
.providerCard:focus-within { outline: 2px solid color-mix(in srgb,var(--aqua) 35%,transparent); outline-offset: 1px; }
.providerCard input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.providerCardIcon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; }
.providerCardIcon svg { display: block; }
.providerCardRadio { width: 18px; height: 18px; display: grid; flex: 0 0 18px; place-items: center; margin-left: auto; border: 2px solid var(--muted); border-radius: 50%; background: var(--surface); }
.providerCardRadio::after { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); content: ""; opacity: 0; transform: scale(.5); transition: opacity .12s,transform .12s; }
.providerCard.is-selected .providerCardRadio { border-color: var(--aqua); }
.providerCard.is-selected .providerCardRadio::after { opacity: 1; transform: scale(1); }
.providerCard--openai .providerCardIcon { background: #000; color: #fff; }
.providerCard--anthropic .providerCardIcon { background: #c96442; color: #fff; }
.providerConnectionIdentity {
  position: relative;
  min-width: 0;
  padding-left: 34px;
}
.providerConnectionIdentity > div {
  min-width: 0;
}
.providerListIcon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 800;
}
.providerListIcon svg {
  width: 20px;
  height: 20px;
}
.providerListIcon.providerCard--openai {
  background: transparent;
  color: var(--text);
}
.providerListIcon.providerCard--anthropic {
  background: transparent;
  color: #c96442;
}
.providerListFilter select {
  width: auto;
  min-width: 132px;
  min-height: 34px;
  padding: 6px 30px 6px 9px;
  border-radius: 6px;
  font-size: 12px;
}
.providerKeySteps { padding: 10px 0; }
.providerKeySteps h3 { margin: 0 0 10px; font-size: 15px; }
.providerKeySteps ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.providerKeySteps li { line-height: 1.5; }
.providerKeySteps a { color: var(--aqua); }
.providerProgressModal { cursor: wait; }
.providerProgressBody {
  width: min(340px,calc(100vw - 28px));
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: start;
  gap: 12px;
  padding: 18px;
}
.providerProgressBody h2 { margin: 0 0 4px; font-size: 15px; letter-spacing: 0; }
.providerProgressBody p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.providerProgressSpinner {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 2px solid var(--line);
  border-top-color: var(--aqua);
  border-radius: 50%;
  animation: providerProgressSpin .8s linear infinite;
}
.providerProgressCharge {
  margin-top: 10px !important;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 10px !important;
}
@keyframes providerProgressSpin { to { transform: rotate(360deg); } }
.providerKeyHelp p, .providerKeyHelp b, .providerKeyHelp small { display: block; margin: 0; }
.providerKeyHelp small { color: var(--muted); font-size: 10px; }
.providerKeyHelp a { color: var(--aqua); font-size: 11px; font-weight: 800; white-space: nowrap; }
.providerKeyHelp .providerBillingNote { color: var(--muted); font-size: 10px; }
.providerHelpCard .providerKeyHelp { margin-top: 18px; }
.optional { color: var(--muted); font-size: 10px; font-weight: 500; }
.codingFirstRun {
  max-width: 760px;
}
.codingFirstRun .code {
  margin: 0 0 12px;
}
.codingFirstRun p {
  margin: 14px 0 0;
}
.setupSecret {
  max-width: 900px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--aqua);
  background: rgba(4, 217, 221, 0.035);
}
.setupSecret p {
  margin: 14px 0 0;
  color: var(--muted);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat {
  padding: 20px;
}
.stat span {
  color: var(--muted);
  font-size: 13px;
}
.stat strong {
  display: block;
  font-size: 30px;
  margin: 5px 0;
  letter-spacing: -0.03em;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.setupSteps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.setupStep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--text);
  text-decoration: none;
}
.setupStep > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--aqua);
  color: #06111d;
  font-weight: 900;
}
.setupStep b {
  display: block;
  margin-bottom: 4px;
}
.setupStep p,
.howToCard p {
  margin: 0;
}
.setupStep:hover {
  border-color: var(--aqua);
  transform: translateY(-1px);
}
.developCommandCenter,
.repoCommandCenter {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 14px;
  margin-bottom: 14px;
}
.setupTimeline {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.setupTimeline li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.setupTimeline li:first-child {
  padding-top: 0;
  border-top: 0;
}
.setupTimeline span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--aqua);
  color: #06111d;
  font-weight: 900;
}
.setupTimeline b,
.setupTimeline p,
.setupTimeline a {
  display: block;
}
.setupTimeline p {
  margin: 4px 0;
  color: var(--muted);
}
.setupTimeline a {
  color: var(--aqua);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.developCodeCard .code {
  margin: 12px 0;
}
.toolBadges,
.connectionStrip,
.setupSummaryStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.toolBadges span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}
.connectionStrip,
.setupSummaryStrip {
  margin: 0 0 14px;
}
.connectionTile {
  flex: 1 1 220px;
  display: grid;
  gap: 5px;
  color: var(--text);
  text-decoration: none;
}
.connectionTile:hover {
  border-color: var(--aqua);
  transform: translateY(-1px);
}
.connectionTile > span {
  color: var(--aqua);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.connectionTile small {
  color: var(--muted);
}
.setupPicker {
  display: grid;
  gap: 18px;
  margin-bottom: 14px;
}
.setupPicker .sectionHead p {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--muted);
}
.setupPickerControl {
  display: grid;
  gap: 8px;
  max-width: 520px;
}
.setupPickerControl span {
  font-weight: 800;
}
.setupPickerControl select {
  min-height: 52px;
  border: 1px solid var(--aqua);
  border-radius: 14px;
  background: var(--surface-deep);
  color: var(--text);
  padding: 0 14px;
  font-size: 18px;
  font-weight: 800;
}
.setupChoice {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-deep);
}
.setupChoice[hidden] {
  display: none;
}
.setupChoiceIntro h3,
.setupChoiceIntro p {
  margin: 4px 0 0;
}
.setupChoiceIntro p {
  color: var(--muted);
}
.setupNoobSteps {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
  display: grid;
  gap: 12px;
  counter-reset: step;
}
.setupNoobSteps li {
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.setupNoobSteps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(4,217,221,0.15);
  color: var(--aqua);
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.setupPasteGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.setupPasteGrid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
}
.setupPasteGrid h4 {
  margin: 0;
}
.setupPasteGrid .code {
  max-height: 280px;
  margin: 10px 0 0;
  overflow: auto;
}
.setupValidation {
  padding: 12px 14px;
  border: 1px solid rgba(39, 215, 182, .35);
  border-radius: 14px;
  background: rgba(39, 215, 182, .08);
}
.codexWalkthrough {
  margin-bottom: 14px;
}
.codexWalkthrough .sectionHead p {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--muted);
}
.codexSteps,
.codexShotGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.codexSteps {
  margin: 16px 0;
}
.codexSteps article {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 16px 16px 16px 56px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-deep);
}
.codexSteps span {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--aqua);
  color: #001914;
  font-weight: 900;
}
.codexSteps h3,
.codexSteps p {
  margin: 0;
}
.codexSteps p {
  color: var(--muted);
}
.codexShotGrid .docShot {
  margin: 0 0 16px;
}
.integrationChooser {
  margin-bottom: 14px;
}
.integrationGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.integrationCard {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-deep);
}
.integrationCard h3,
.integrationCard p {
  margin: 0;
}
.integrationCard p,
.integrationCard small {
  color: var(--muted);
}
.integrationCard .code {
  max-height: 220px;
  margin: 0;
  overflow: auto;
}
.repoPrimaryAction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.repoPrimaryAction h2,
.repoPrimaryAction p {
  margin: 4px 0 0;
}
.repoPrimaryAction p {
  color: var(--muted);
}
.repoSummaryCard {
  display: grid;
  align-content: center;
  gap: 4px;
}
.repoSummaryCard span,
.repoSummaryCard small {
  color: var(--muted);
}
.repoSummaryCard strong {
  font-size: 38px;
  letter-spacing: -0.04em;
}
.repoGuideGrid {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(320px, 1.05fr);
  gap: 16px;
  margin-top: 16px;
}
.repoGuide h2,
.repoInventory h2 {
  margin-top: 0;
}
.numberedSteps {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--muted);
}
.numberedSteps b {
  color: var(--text);
}
.installationList,
.repoCards {
  display: grid;
  gap: 10px;
}
.installationCard,
.repoCard {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-deep);
}
.installationCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}
.installationCard b,
.installationCard span {
  display: block;
}
.installationCard span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}
.repoInventory {
  margin-top: 18px;
  overflow: auto;
}
.repoCard {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.repoCardMain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.repoCard h3 {
  margin: 3px 0 5px;
}
.repoCard p {
  margin: 0;
  color: var(--muted);
}
.repoMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.repoMeta span {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
}
.repoMeta b {
  color: var(--text);
}
.repoList {
  min-width: 880px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.repoListHead,
.repoListRow {
  display: grid;
  grid-template-columns: minmax(250px, 1.4fr) 92px minmax(260px, 1.35fr) 140px 125px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.repoListHead {
  background: var(--surface-inset);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.repoListRow {
  border-top: 1px solid var(--line);
}
.repoListRow small,
.repoSha {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.repoName b {
  display: block;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  padding: 22px;
}
.tableWrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px;
}
th,
td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
td {
  font-size: 14px;
}
.promptEconomicsRow > td {
  padding: 0 14px 14px;
  white-space: normal;
  background: color-mix(in srgb, var(--panel) 80%, var(--surface-inset));
}
.promptEconomics {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-inset);
}
.promptEconomics > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.promptEconomics > summary span {
  color: var(--aqua);
  font-size: 10px;
  letter-spacing: .04em;
}
.promptEconomicsBody {
  display: grid;
  gap: 18px;
  padding: 4px 12px 14px;
}
.promptEconomicsBody h4 {
  margin: 0 0 9px;
}
.promptEconomicsBody p,
.promptEconomicsBody small {
  color: var(--muted);
}
.promptEconomicsBody p {
  margin: 9px 0 0;
  font-size: 11px;
}
.economicsGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 7px;
}
.economicsGrid > div,
.economicsStates > article {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-raised);
}
.economicsGrid span,
.economicsGrid b,
.economicsGrid small,
.economicsStates span,
.economicsStates b,
.economicsStates small {
  display: block;
  overflow-wrap: anywhere;
}
.economicsGrid span,
.economicsStates span {
  color: var(--muted);
  font-size: 10px;
}
.economicsGrid b,
.economicsStates b {
  margin: 3px 0;
  font-size: 12px;
}
.economicsGrid small,
.economicsStates small {
  font-size: 9px;
  line-height: 1.35;
}
.economicsStates {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 7px;
}
.promptEconomicsBody .economicsHelp {
  margin: -4px 0 0;
}
.analyticsPage {
  display: grid;
  gap: 28px;
}
.analyticsToolbar {
  margin-bottom: 0;
}
.analyticsToolbar > div:first-child {
  min-width: 0;
}
.analyticsToolbar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.analyticsKpis {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.analyticsKpi {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 15px 18px;
  border-left: 1px solid var(--line);
}
.analyticsKpi:first-child {
  border-left: 0;
  padding-left: 0;
}
.analyticsKpi:last-child {
  padding-right: 0;
}
.analyticsKpi span,
.teamSummary span,
.subscriptionFacts span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.analyticsKpi strong {
  overflow-wrap: anywhere;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: 0;
}
.analyticsKpi small {
  color: var(--muted);
  line-height: 1.4;
}
.analyticsPrimaryKpi strong {
  color: var(--aqua);
}
.analyticsReport {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(250px,.6fr);
  gap: 32px;
  align-items: start;
}
.analyticsSpend {
  min-width: 0;
}
.analyticsSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.analyticsSectionHead h2,
.analyticsNext h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}
.analyticsSectionHead p,
.analyticsNext p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.spendRows {
  display: grid;
  gap: 20px;
  padding: 12px 0;
}
.mutedBar span {
  background: #4b6075 !important;
}
.analyticsEvidenceNote {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.evidencePills {
  display: grid;
  gap: 0;
}
.evidencePills span,
.subscriptionFacts span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.analyticsEvidence .evidencePills span {
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.analyticsReceipts {
  display: grid;
  gap: 10px;
}
.analyticsReceipts .tableWrap {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}
.analyticsNext {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.receiptTableCompact table {
  min-width: 760px;
}
.receiptTableCompact th,
.receiptTableCompact td {
  padding: 10px 12px;
  font-size: 13px;
}
.teamSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.teamSummary .card {
  padding: 16px;
}
.teamSummary strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
}
.teamGrid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(280px, 1.1fr);
  gap: 14px;
  margin-top: 14px;
}
.teamRoles p {
  margin: 8px 0;
}
.compactForm {
  gap: 12px;
}
.compactCard {
  margin-top: 14px;
}
.compactTable {
  margin-top: 10px;
}
.compactTable table {
  min-width: 680px;
}
.compactQuickstart .code {
  max-height: 260px;
}
.projectHelpHero {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(340px, 1.1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.apiKeyWizard,
.codexSetupPreview {
  display: grid;
  gap: 12px;
  align-content: start;
}
.apiKeyWizard h2,
.codexSetupPreview h2 {
  margin: 0;
}
.friendlyKeyForm {
  display: grid;
  gap: 12px;
}
.friendlyKeyForm label {
  display: grid;
  gap: 6px;
}
.friendlyKeyForm label span {
  color: var(--text);
  font-weight: 850;
}
.friendlyKeyForm label small {
  color: var(--muted);
}
.friendlyKeyForm input,
.friendlyKeyForm select {
  min-height: 44px;
}
.codexSetupPreview .code {
  max-height: 240px;
  margin: 0;
}
.keySuccessNext {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(280px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.keySuccessNext p {
  margin: 4px 0 0;
}
.projectCreateRow {
  display: grid;
  gap: 10px;
  padding: 14px;
}
.projectCreateRow summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.projectCreateRow summary span {
  color: var(--muted);
  font-size: 13px;
}
.projectCreateRow[open] summary {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.inlineCreateForm {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) minmax(170px, .9fr) auto;
  gap: 10px;
  align-items: center;
}
.inlineCreateForm + .inlineCreateForm {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.inlineCreateForm input,
.inlineCreateForm select {
  min-height: 42px;
}
.iconActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.sectionHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
}
.sectionHead h2 {
  margin: 2px 0 0;
}
.projectCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.projectCard {
  display: grid;
  gap: 14px;
}
.projectCardHead {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
  display: grid;
  gap: 12px;
}
.projectCard h3 {
  margin: 2px 0 4px;
}
.projectCard p {
  margin: 0;
  color: var(--muted);
}
.projectEditForm {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, .8fr) auto;
  gap: 10px;
  align-items: end;
}
.projectEditForm label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.iconButton {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
}
.smallIcon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}
.projectKeys {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.projectKeysHead,
.projectKeyRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.projectKeysHead span {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 850;
}
.projectKeyRow {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}
.projectKeyRow div {
  display: grid;
  gap: 2px;
}
.projectKeyRow span {
  color: var(--muted);
  font-size: 13px;
}
.iconButton:hover {
  border-color: var(--aqua);
  color: var(--aqua);
}
.iconButton.danger:hover {
  border-color: #ff7b7b;
  color: #ff7b7b;
}
.iconButton:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.projectsPage .grid2,
.teamPage .grid2,
.billingPage .grid2 {
  gap: 14px;
}
.currentSubscription {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
  gap: 20px;
  align-items: center;
}
.currentSubscription h2 {
  margin: 6px 0;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.04em;
}
.currentSubscription p {
  margin: 0 0 8px;
}
.subscriptionFacts {
  display: grid;
  gap: 8px;
}
.appDocsPage > .docs {
  max-width: 1120px;
  margin: 0;
}
.appDocsPage .docs h1 {
  display: none;
}
.appDocsPage .docsToc {
  position: sticky;
  top: 88px;
  z-index: 5;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(12px);
}
.positive {
  color: var(--aqua);
}
.negative {
  color: var(--danger);
}
.tag {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: 12px;
}
.recommendations {
  display: grid;
  gap: 10px;
}
.recommendation {
  padding: 14px;
  background: var(--surface-deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.recommendation b,
.recommendation span {
  display: block;
}
.recommendation span {
  color: var(--muted);
  font-size: 13px;
}
.code {
  background: var(--code-bg);
  border: 1px solid var(--line);
  padding: 16px;
  border-radius: 12px;
  overflow: auto;
  color: var(--code-text);
  font:
    13px/1.6 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  white-space: pre-wrap;
}
/* VS Code-style code blocks */
.codeBlock {
  background: #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #333;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.codeBlockBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #252526;
  border-bottom: 1px solid #333;
}
.codeBlockDots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.codeBlockDots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.codeBlockDots span:nth-child(1) { background: #ff5f57; }
.codeBlockDots span:nth-child(2) { background: #febc2e; }
.codeBlockDots span:nth-child(3) { background: #28c840; }
.codeBlockFile {
  flex: 1;
  color: #cccccc;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.codeBlockCopy {
  background: transparent;
  border: 1px solid #444;
  color: #858585;
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.codeBlockCopy:hover {
  background: #3c3c3c;
  color: #cccccc;
  border-color: #666;
}
.codeBlockCopy.copied {
  border-color: #04d9dd;
  color: #04d9dd;
}
.codeBlockCopied { display: none; }
.codeBlockCopy.copied .codeBlockCopied { display: inline; }
.codeBlockCopy.copied svg { display: none; }
.codeBlockPre {
  padding: 16px 18px;
  margin: 0;
  color: #d4d4d4;
  overflow-x: auto;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
}
/* Syntax token colors — VS Code Dark+ */
.tk-c   { color: #6a9955; }
.tk-str { color: #ce9178; }
.tk-kw  { color: #569cd6; }
.tk-key { color: #9cdcfe; }
.tk-sec { color: #dcdcaa; }
.tk-var { color: #9cdcfe; }
.tk-fn  { color: #dcdcaa; }
.tk-num { color: #b5cea8; }
.tk-const { color: #4fc1ff; }
.tk-op  { color: #d4d4d4; }
/* Dark theme overrides — keep code blocks always dark */
html[data-theme="light"] .codeBlock { background: #1e1e1e; border-color: #333; }
html[data-theme="light"] .codeBlockBar { background: #252526; }
html[data-theme="light"] .codeBlockPre { color: #d4d4d4; }
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tab {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}
.tab.active {
  background: var(--aqua);
  color: #07111e;
  border-color: var(--aqua);
  font-weight: 800;
}
.chat {
  height: 520px;
  display: grid;
  grid-template-rows: 1fr auto;
}
.messages {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 6px;
}
.message {
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--message-bg);
}
.message.user {
  align-self: flex-end;
  background: var(--message-user-bg);
}
.chatForm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding-top: 14px;
}
.chatForm textarea {
  resize: none;
  min-height: 58px;
}
.localEnvironment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
  padding: 7px 18px;
  background: rgba(255, 189, 89, 0.1);
  border-bottom: 1px solid rgba(255, 189, 89, 0.28);
  color: #f6d99d;
  font-size: 12px;
}
.localEnvironment b {
  color: var(--warning);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chatBody {
  overflow: hidden;
}
.chatBody .appMain {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.chatBody .appTop {
  flex: 0 0 auto;
}
.chatBody .workbenchV2Root {
  min-height: 0;
  flex: 1;
}
.chatBody .workbenchV2Root .wb-app {
  height: 100%;
  min-height: 0;
}
.workbenchShell {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
}
.chatHistory {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 14px;
  border-right: 1px solid var(--line);
  background: rgba(7, 17, 30, 0.34);
}
.chatHistoryHead {
  display: grid;
  gap: 9px;
}
.chatHistoryHead .button {
  width: 100%;
  justify-content: center;
}
.chatHistory input,
.chatProjectFilter select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-inset);
  color: var(--text);
}
.chatProjectFilter {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chatHistoryList {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
}
.chatHistoryItem {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.chatHistoryItem:hover,
.chatHistoryItem.active {
  border-color: var(--line);
  background: var(--surface-active);
}
.chatHistoryItem b,
.chatHistoryItem small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatHistoryItem small,
.chatHistoryEmpty,
.chatHistory p {
  color: var(--muted);
  font-size: 11px;
}
.chatHistory p {
  margin: auto 0 0;
}
.workbenchPage {
  width: 100%;
  min-height: 0;
  flex: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  padding: 24px 34px 16px;
}
.workbenchHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
}
.workbenchHeader h1 {
  margin: 3px 0 0;
  font-size: 24px;
}
.conversation {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 6px 30px;
  scrollbar-gutter: stable;
}
.chatEmpty {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 40px 10px;
}
.chatEmpty[hidden] {
  display: none;
}
.chatEmpty .multraMark {
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 22px rgba(4,217,221,0.32));
}
.chatEmpty .multraMark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.chatEmpty h2 {
  margin: 0 0 6px;
  font-size: 30px;
}
.chatEmpty p {
  margin: 0;
  color: var(--muted);
}
.promptStarters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.promptStarters button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-deep);
  color: var(--text);
  padding: 9px 13px;
  cursor: pointer;
}
.promptStarters button:hover {
  border-color: var(--aqua);
  color: var(--text);
}
.chatTurn {
  width: min(780px, 100%);
  margin: 0 auto 26px;
}
.turnLabel {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.turnHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.turnActions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 140ms ease;
}
.chatTurn:hover .turnActions,
.chatTurn:focus-within .turnActions {
  opacity: 1;
}
.turnActions button,
.conversationActions button {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.turnActions button:hover,
.conversationActions button:hover {
  border-color: var(--aqua);
  color: var(--text);
}
.conversationActions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.turnBody {
  color: var(--text);
  line-height: 1.72;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chatTurn.user .turnBody {
  width: fit-content;
  max-width: min(680px, 88%);
  margin-left: auto;
  padding: 12px 16px;
  border-radius: 18px 18px 5px 18px;
  background: var(--user-bubble);
}
.chatTurn.user .turnLabel {
  text-align: right;
}
.chatTurn.failed .turnBody {
  color: #ffadb6;
}
.turnFiles {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}
.artifactLink {
  display: block;
  width: max-content;
  margin-top: 14px;
}
.answerReceipt {
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid rgba(4, 217, 221, 0.28);
  border-radius: 13px;
  background: rgba(11, 28, 46, 0.88);
  white-space: normal;
}
.answerReceipt.isSaving { animation: receipt-arrive 520ms ease-out both; box-shadow: 0 18px 44px rgba(4, 217, 221, 0.08); }
.receiptHeadline i { color: var(--aqua); font-style: normal; }
.receiptCompare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; margin-top: 12px; }
.receiptCompare > div:not(.receiptArrow) { min-width: 0; display: grid; gap: 3px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-inset); }
.receiptCompare .receiptResult { border-color: rgba(4, 217, 221, 0.42) !important; background: rgba(4, 217, 221, 0.045) !important; }
.receiptCompare small, .receiptCompare span { color: var(--muted); }
.receiptCompare span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.receiptArrow { align-self: center; color: var(--aqua); font-weight: 900; }
.receiptSavingsTrack { height: 5px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: var(--surface-inset); }
.receiptSavingsTrack span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), var(--blue)); transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes receipt-arrive { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
.receiptHeadline,
.receiptMetrics {
  display: flex;
  align-items: center;
  gap: 14px;
}
.receiptHeadline span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.receiptHeadline b {
  margin-left: auto;
  color: var(--aqua);
}
.receiptHeadline em {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(18, 140, 255, 0.12);
  color: #b9dcff;
  font-size: 10px;
  font-style: normal;
}
.receiptMetrics {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.receiptMetrics span {
  min-width: 0;
  display: grid;
}
.receiptMetrics span + span {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.receiptMetrics small {
  color: var(--muted);
}
.receiptMetrics b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.answerReceipt > a {
  display: inline-block;
  margin-top: 10px;
  color: var(--aqua);
  font-size: 12px;
}
.composerDock {
  flex: 0 0 auto;
  width: min(800px, 100%);
  margin: 0 auto;
}
.chatComposer {
  position: relative;
  padding: 12px;
  border: 1px solid #2b4862;
  border-radius: 20px;
  background: var(--composer-bg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}
.chatComposer:focus-within {
  border-color: rgba(4, 217, 221, 0.7);
}
.chatComposer textarea {
  min-height: 62px;
  max-height: 180px;
  padding: 3px 4px 10px;
  resize: vertical;
  border: 0;
  background: transparent;
  line-height: 1.5;
}
.chatComposer textarea:focus {
  outline: 0;
}
.composerActions,
.composerPrimary,
.composerSend {
  display: flex;
  align-items: center;
  gap: 8px;
}
.composerActions {
  justify-content: space-between;
}
.attachButton,
.chatSettings > summary {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}
.attachButton:hover,
.chatSettings > summary:hover {
  border-color: var(--aqua);
}
.chatSettings {
  position: relative;
}
.chatSettings > summary::-webkit-details-marker {
  display: none;
}
.chatSettingsPanel {
  position: absolute;
  z-index: 30;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(310px, calc(100vw - 44px));
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.chatSettingsPanel label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.chatSettingsPanel select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-inset);
  color: var(--text);
}
.sendButton {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--aqua);
  color: #07111e;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}
.sendButton:disabled {
  cursor: wait;
  opacity: 0.5;
}
.stopButton {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-inset);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.stopButton:hover {
  border-color: var(--aqua);
  color: var(--text);
}
.fileList {
  min-height: 16px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}
.composerNote {
  margin: 7px 0 0;
  color: #71889b;
  font-size: 10px;
  text-align: center;
}
.modeHint { color: var(--muted); font-size: 9px; line-height: 1.35; }
.supportShortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 18px; }
.supportShortcuts .card { display: grid; gap: 6px; padding: 18px; }
.supportShortcuts span { color: var(--aqua); font-weight: 900; }
.supportShortcuts small { color: var(--muted); }
.kpiBar {
  height: 9px;
  background: var(--surface-inset);
  border-radius: 999px;
  overflow: hidden;
}
.kpiBar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--aqua), var(--blue));
}
.empty {
  text-align: center;
  padding: 45px;
  color: var(--muted);
}
.mobileMenu {
  display: none;
}
.docs {
  max-width: 860px;
  margin: auto;
}
.docs h1 {
  font-size: 48px;
}
.docs h2 {
  margin-top: 44px;
}
.docs p,
.docs li {
  color: var(--muted);
}
.docsToc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 12px;
}
.docsToc a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--text);
  background: var(--card);
}
.walkthrough {
  display: grid;
  gap: 10px;
  padding-left: 22px;
}
.docShot {
  margin: 28px 0;
}
.docShot figcaption {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}
.docBrowser {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.docBar {
  display: flex;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.docBar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--muted);
  opacity: .45;
}
.docAppGrid {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 260px;
}
.docAppGrid aside {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
  border-right: 1px solid var(--line);
}
.docAppGrid section,
.docPanel {
  padding: 22px;
}
.docFlow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.docFlow span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(78,243,208,.10);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
.docMessage {
  max-width: 76%;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(63,180,255,.12);
}
.docMessage.user {
  margin-left: auto;
  background: rgba(78,243,208,.14);
}
.docReceipt {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.docReceipt span,
.docPanel small {
  display: block;
  color: var(--muted);
}
.legal {
  max-width: 860px;
  margin: auto;
}
.legal h1 {
  font-size: 48px;
}
.legal h2 {
  margin-top: 36px;
}
.legal p,
.legal li {
  color: var(--muted);
}
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 20px;
}
body.modalOpen {
  overflow: hidden;
}
.modalBody {
  width: min(720px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 25px;
}
.providerHeaderActions,
.modalHeader,
.modalActions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.providerHeaderActions {
  flex-shrink: 0;
}
.textButton {
  appearance: none;
  border: 0;
  padding: 8px 4px;
  background: transparent;
  color: var(--aqua);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.textButton:hover,
.textButton:focus-visible {
  text-decoration: underline;
}
.providerToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.compactPageToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.compactPageToolbar h1 {
  margin: 0;
  font-size: 26px;
}
.compactListSection {
  margin-top: 24px;
}
.compactListSection:first-of-type {
  margin-top: 0;
}
.compactSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.compactSectionHead h2 {
  margin: 0;
  font-size: 16px;
}
.compactSectionHead > span {
  color: var(--muted);
  font-size: 12px;
}
.compactModalBody {
  width: min(520px, 100%);
}
.compactModalBody > .muted {
  margin-top: -6px;
}
.compactModalBody .friendlyKeyForm {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.compactModalBody .friendlyKeyForm label span {
  font-size: 13px;
}
.compactModalBody .friendlyKeyForm label small {
  order: 3;
  margin-top: -2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}
.compactModalBody .friendlyKeyForm label {
  display: grid;
  gap: 7px;
}
.compactModalBody .friendlyKeyForm input,
.compactModalBody .friendlyKeyForm select {
  min-height: 40px;
}
.keyDialogActions {
  margin-top: 4px;
}
.keyDialogNote {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.4;
}
.compactModalBody .projectCreateRow,
.compactModalBody .inlineCreateForm {
  padding: 0;
}
.compactModalBody .projectCreateRow > summary {
  display: none;
}
.compactModalBody .inlineCreateForm {
  grid-template-columns: 1fr;
}
.compactModalBody .inlineCreateForm > b {
  display: none;
}
.compactModalBody .projectEditForm {
  grid-template-columns: 1fr;
  margin-top: 18px;
}
.compactModalBody .projectEditForm label {
  gap: 7px;
}
.inventorySetupModal {
  width: min(920px, 100%);
}
.inventorySetupModal .projectHelpHero,
.inventorySetupModal .repoCommandCenter,
.inventorySetupModal .repoGuideGrid {
  grid-template-columns: 1fr;
}
.inventorySetupModal .projectCreateRow,
.inventorySetupModal .compactQuickstart {
  margin-top: 16px;
}
.inventorySetupModal .compactQuickstart {
  padding: 0;
  border: 0;
  background: transparent;
}
.inventorySetupModal .compactQuickstart h3 {
  margin-top: 24px;
}
.inventorySetupModal .codeBlock {
  margin-top: 10px;
}
.projectsPage > .pageHeader,
.repositoriesPage > .pageHeader {
  align-items: center;
  margin-bottom: 18px;
}
.projectsPage > .pageHeader .eyebrow,
.projectsPage > .pageHeader p,
.repositoriesPage > .pageHeader .eyebrow,
.repositoriesPage > .pageHeader p {
  display: none;
}
.projectsPage > .pageHeader h1,
.repositoriesPage > .pageHeader h1 {
  margin: 0;
  font-size: 26px;
}
.projectsPage > .projectHelpHero,
.repositoriesPage > .repoCommandCenter {
  display: none;
}
.projectsPage .projectInventory {
  scroll-margin-top: 88px;
}
.projectsPage .projectCards {
  gap: 0;
  border-top: 1px solid var(--line);
}
.projectsPage .projectCard.card {
  gap: 14px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.projectsPage .projectCard.card:hover {
  transform: none;
  border-color: var(--line);
}
.projectsPage .projectCard .eyebrow {
  letter-spacing: 0;
  text-transform: capitalize;
}
.projectsPage .projectKeyRow {
  padding: 9px 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb,var(--line) 70%,transparent);
  border-radius: 0;
  background: transparent;
}
.projectsPage .projectKeys {
  gap: 0;
  padding-top: 10px;
}
.projectsPage .projectKeysHead {
  padding-bottom: 8px;
}
.projectsPage .iconButton {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
}
.keysToolbar {
  align-items: flex-start;
}
.keysPage .keysIntro {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.keyInventorySection {
  margin-top: 0;
}
.keyInventoryCount {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.keyStartChoices {
  margin: 28px 0 22px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.keyStartChoices > h2 {
  margin: 0 0 8px;
  font-size: 14px;
}
.keyStartList {
  border-top: 1px solid var(--line);
}
.keyStartList > div {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.keyStartIcon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--muted);
}
.keyStartList b,
.keyStartList small {
  display: block;
}
.keyStartList small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
/* Legacy disclosure styles — no longer used but kept for safety */
.keyInventoryDisclosure { padding: 0; }
.keyInventoryBody { padding: 4px 0 8px; border-top: 1px solid var(--line); }
.keysPage .tableWrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.keysPage .keysTable {
  margin-top: 0;
}
.keyInventoryTools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.keyInventoryTools > span {
  color: var(--muted);
  font-size: 12px;
}
.keyInventoryTools select {
  min-height: 32px;
  padding: 5px 28px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-inset);
  color: var(--text);
  color-scheme: dark;
  font-size: 11px;
}
html[data-theme="light"] .keyInventoryTools select {
  color-scheme: light;
}
.keysPage .dataTable {
  min-width: 720px;
}
.keysPage .dataTable th,
.keysPage .dataTable td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.keysPage .dataTable td:first-child b,
.keysPage .dataTable td:first-child small {
  display: block;
}
.keysPage .dataTable td:first-child small {
  margin-top: 3px;
  color: var(--muted);
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size: 10px;
}
.keyPrefix {
  color: var(--muted);
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.tagActive {
  background: rgba(4, 217, 221, 0.12);
  color: var(--aqua);
}
.keyReveal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--aqua);
  border-radius: 8px;
  background: rgba(4, 217, 221, 0.04);
}
.keyRevealHead p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.keyRevealCode {
  display: flex;
  align-items: center;
  gap: 10px;
}
.keyRevealCode code {
  min-width: 0;
  flex: 1;
  padding: 9px 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-inset);
  font-size: 12px;
  word-break: break-all;
}
.keyRevealCode > .button {
  flex-shrink: 0;
}
.keyCreateForm {
  margin-top: 16px;
}
.keyCreateForm .field small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.keyUseGuide {
  display: grid;
  margin-top: 12px;
}
.keyUseGuide > div {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.keyUseGuide span {
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 700px) {
  .keyStartList > div {
    grid-template-columns: 28px minmax(0,1fr);
  }
  .keyStartList .button {
    justify-self: start;
    grid-column: 2;
  }
  .keyRevealCode {
    flex-direction: column;
    align-items: flex-start;
  }
  .keyRevealCode code {
    width: 100%;
  }
  .keyUseGuide > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.inventorySetupModal .projectHelpHero,
.inventorySetupModal .repoCommandCenter {
  display: grid;
}
.teamPage .tableWrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.teamPage .compactTable {
  margin-top: 0;
}
.teamPage .dataTable thead {
  border-bottom: 1px solid var(--line);
}
.teamPage .dataTable td:first-child b,
.teamPage .dataTable td:first-child small {
  display: block;
}
.teamPage .dataTable td:first-child small {
  margin-top: 3px;
}
.memberRoleCell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.roleGuideList {
  display: grid;
}
.roleGuideList > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.roleGuideList span {
  color: var(--muted);
}
.roleAuditNote {
  margin: 14px 0 0;
}
.accountPage > .pageHeader {
  margin-bottom: 14px;
}
.accountPage > .pageHeader .eyebrow,
.accountPage > .pageHeader p {
  display: none;
}
.accountPage > .pageHeader h1 {
  margin: 0;
  font-size: 26px;
}
.accountPage .accountProfile {
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--line);
}
.accountPage .userAvatar.large {
  width: 46px;
  height: 46px;
  font-size: 17px;
}
.accountPage .settingsGrid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 24px;
}
.accountPage .settingsLink.card {
  grid-template-columns: 108px minmax(0,1fr);
  gap: 3px 14px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.accountPage .settingsLink:hover {
  transform: none;
  border-color: var(--line);
}
.accountPage .settingsLink > span {
  grid-row: 1 / span 2;
  align-self: center;
}
.accountPage .accountSection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.accountPage .accountSection h2,
.accountPage .accountSection p {
  margin: 0;
}
.accountPage .accountSection h2 {
  font-size: 16px;
}
.accountPage .accountSection p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.policyModalBody {
  width: min(720px,100%);
}
.policyModalBody > .form {
  padding: 0;
}
.billingPage > .pageHeader {
  align-items: center;
  margin-bottom: 18px;
}
.billingPage > .pageHeader .eyebrow,
.billingPage > .pageHeader p {
  display: none;
}
.billingPage > .pageHeader h1 {
  margin: 0;
  font-size: 26px;
}
.billingPage .currentSubscription {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.billingPage .currentSubscription h2 {
  font-size: 24px;
  letter-spacing: 0;
}
.billingPage .subscriptionFacts span {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.billingPlansModal {
  width: min(920px,100%);
}
.billingPlansModal > div:nth-child(2) {
  margin-top: 0 !important;
}
.billingPlansModal .billingToggle {
  margin: 2px 0 8px;
}
.billingPlansModal .billingLead {
  margin: 0 0 16px;
  font-size: 12px;
}
.billingPlansModal .pricing {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 0;
}
.billingPlansModal .priceCard {
  display: grid;
  grid-template-columns: 160px minmax(0,1fr) 170px;
  grid-template-rows: repeat(4,auto);
  column-gap: 22px;
  padding: 18px;
  border-radius: 6px;
  box-shadow: none;
}
.billingPlansModal .priceCard > .eyebrow,
.billingPlansModal .priceCard > h3,
.billingPlansModal .priceCard > .price,
.billingPlansModal .priceCard > .billingDetail {
  grid-column: 1;
}
.billingPlansModal .priceCard > .eyebrow {
  grid-row: 1;
}
.billingPlansModal .priceCard > h3 {
  grid-row: 2;
  margin: 3px 0 0;
  font-size: 15px;
}
.billingPlansModal .priceCard > .price {
  grid-row: 3;
  margin: 8px 0 0;
  font-size: 28px;
  letter-spacing: 0;
}
.billingPlansModal .priceCard > .billingDetail {
  grid-row: 4;
  align-self: start;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.billingPlansModal .priceCard > .checklist {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px 18px;
  margin: 0;
  font-size: 12px;
}
.billingPlansModal .priceCard > form,
.billingPlansModal .priceCard > a.button {
  grid-column: 3;
  grid-row: 1 / span 4;
  align-self: center;
}
.billingPlansModal .priceCard.featured {
  transform: none;
  background: var(--surface-subtle);
}
.billingPlansModal .resultsDisclosure {
  margin: 14px 0 0;
  font-size: 11px;
  text-align: left;
}
.toolsPage > .pageHeader {
  align-items: center;
  margin-bottom: 18px;
}
.toolsPage > .pageHeader .eyebrow,
.toolsPage > .pageHeader p {
  display: none;
}
.toolsPage > .pageHeader h1 {
  margin: 0;
  font-size: 26px;
}
.toolsPage .toolsMain {
  display: block;
}
.toolsPrimarySection {
  padding: 0;
  border: 0;
  background: transparent;
}
.toolsPrimarySection > .cardHead {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.toolsPrimarySection > .cardHead .eyebrow,
.toolsPrimarySection > .cardHead + p {
  display: none;
}
.toolsPrimarySection #skills-list {
  margin-top: 10px;
}
.toolsCompactRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.toolsCompactRow h2,
.toolsCompactRow p {
  margin: 0;
}
.toolsCompactRow h2 {
  font-size: 16px;
}
.toolsCompactRow p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.toolsCatalog {
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}
.toolsCatalog .settingsGrid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 24px;
}
.toolsCatalog .settingsLink {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.callsPage .tableWrap {
  max-height: none;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}
.callsPage .compactPageToolbar > div:first-child {
  min-width: 0;
}
.callsPage > .compactPageToolbar {
  margin-bottom: 10px;
}
.callsPage > .compactPageToolbar h1 {
  font-size: 23px;
}
.executionFilterPanel {
  margin: 4px 0 14px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.executionFilterPanel > summary {
  width: max-content;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.executionFilters {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px 12px;
  margin-top: 12px;
}
.executionFilters label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.executionFilters input {
  width: 100%;
  min-width: 0;
}
.executionFilterActions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
}
.callsPage .tableWrap tbody > tr:not(.promptEconomicsRow) {
  border-bottom: 1px solid var(--line);
}
.callsPage .tableWrap tbody > tr:not(.promptEconomicsRow):hover {
  background: color-mix(in srgb,var(--surface-soft) 55%,transparent);
}
.callsPage .tableWrap thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
}
.callsPage .tableWrap th {
  white-space: nowrap;
}
.callsPage .tableWrap td {
  vertical-align: top;
}
.callsPage .tableWrap table {
  min-width: 680px;
  border-collapse: collapse;
  font-size: 12px;
}
.callsPage .tableWrap th,
.callsPage .tableWrap td {
  padding: 9px 10px;
  border: 1px solid var(--line);
}
.callsPage .callsSummaryRow td:nth-child(2) {
  width: 150px;
}
.callsPage .callsSummaryRow td:nth-child(3) {
  min-width: 280px;
}
.callsPage .callsSummaryRow td:nth-child(6) {
  width: 130px;
}
.callsPage .callsSummaryRow td:nth-child(8) {
  width: 110px;
}
.callsPage .callsDetailsCell {
  width: 145px;
  vertical-align: middle;
}
.callsQuality {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}
.callsRowActions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 48px;
}
.callsDetailsButton {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.callsDetailsButton:hover {
  border-color: var(--aqua);
  color: var(--aqua);
}
.callsRowTime {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}
.receiptDetailsModal {
  width: min(780px,100%);
}
.receiptDetailsModal .modalHeader p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.receiptDetailsModal .promptEconomicsBody {
  padding: 0;
  border: 0;
  background: transparent;
}
.callsPage > .empty.card {
  padding: 24px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.callsFilters {
  display: grid;
  grid-template-columns: minmax(180px,1fr) 145px 145px;
  gap: 8px;
  margin-bottom: 12px;
}
.callsFilters input,
.callsFilters select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-inset);
  color: var(--text);
  color-scheme: dark;
  font-size: 12px;
}
.callsFilters select option {
  background: var(--panel);
  color: var(--text);
}
html[data-theme="light"] .callsFilters input,
html[data-theme="light"] .callsFilters select {
  color-scheme: light;
}
.callsFilters input {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-inset);
  color: var(--text);
}
.callsPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  color: var(--muted);
  font-size: 12px;
}
.callsPagination > div {
  display: flex;
  align-items: center;
  gap: 14px;
}
.callsPagination .isDisabled {
  opacity: .45;
  text-decoration: none;
  pointer-events: none;
}
@media (max-width: 700px) {
  .callsFilters {
    grid-template-columns: 1fr;
  }
  .callsPagination {
    align-items: flex-start;
    flex-direction: column;
  }
  .callsPagination > div {
    width: 100%;
    justify-content: space-between;
  }
}
.supportPage > .pageHeader {
  align-items: center;
  margin-bottom: 14px;
}
.supportPage > .pageHeader .eyebrow,
.supportPage > .pageHeader p {
  display: none;
}
.supportPage > .pageHeader h1 {
  margin: 0;
  font-size: 26px;
}
.supportPage .supportShortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.supportPage .supportShortcuts a {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  padding: 9px 30px 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  text-decoration: none;
}
.supportPage .supportShortcuts a::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 10px;
  color: var(--muted);
  transform: translateY(-50%);
}
.supportPage .supportShortcuts span {
  display: none;
}
.supportPage .supportShortcuts b {
  font-size: 12px;
}
.supportPage .supportShortcuts small {
  grid-column: 1 / -1;
  font-size: 10px;
}
.supportPage .chat {
  height: min(560px,calc(100vh - 245px));
  min-height: 380px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.supportPage .messages {
  padding: 4px 4px 12px 0;
}
.supportPage .chatForm {
  border-top: 1px solid var(--line);
}
.appDocsPage > .pageHeader {
  align-items: center;
  margin-bottom: 16px;
}
.appDocsPage > .pageHeader .eyebrow,
.appDocsPage > .pageHeader p {
  display: none;
}
.appDocsPage > .pageHeader h1 {
  margin: 0;
  font-size: 26px;
}
.appDocsPage > .docs > .eyebrow,
.appDocsPage > .docs > p,
.appDocsPage > .docs > .notice {
  display: none;
}
.appDocsPage .docsWorkspace {
  display: grid;
  grid-template-columns: 230px minmax(0,1fr);
  gap: 28px;
  align-items: start;
}
.publicDocsPage {
  padding-top: 28px;
}
.publicDocsPage > .docs {
  max-width: 1180px;
}
.publicDocsPage > .docs > .eyebrow {
  display: none;
}
.publicDocsPage > .docs > h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0;
}
.publicDocsPage > .docs > h1 + p {
  max-width: 760px;
  margin: 7px 0 12px;
  font-size: 13px;
  line-height: 1.5;
}
.publicDocsPage > .docs > .notice {
  margin: 0 0 20px;
  padding: 10px 12px;
  font-size: 11px;
}
.publicDocsPage .docsWorkspace {
  display: grid;
  grid-template-columns: 230px minmax(0,1fr);
  gap: 32px;
  align-items: start;
}
.publicDocsPage .docsNav {
  position: sticky;
  top: 88px;
}
.publicDocsPage .docsSearch {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-inset);
  color: var(--text);
}
.publicDocsPage .docsToc {
  display: grid;
  gap: 2px;
  margin: 10px 0 0;
}
.publicDocsPage .docsToc a {
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}
.publicDocsPage .docsToc a:hover,
.publicDocsPage .docsToc a.active {
  background: var(--surface-active);
  color: var(--text);
}
.publicDocsPage .docsPanel {
  min-width: 0;
}
.publicDocsPage .docsPanel > h2:first-child {
  margin: 0 0 18px;
  font-size: 24px;
  letter-spacing: 0;
}
.appDocsPage .docsNav {
  position: sticky;
  top: 90px;
}
.appDocsPage .docsSearch {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-inset);
  color: var(--text);
}
.appDocsPage .docsToc {
  position: static;
  display: grid;
  gap: 2px;
  margin: 10px 0 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}
.appDocsPage .docsToc a {
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}
.appDocsPage .docsToc a:hover,
.appDocsPage .docsToc a.active {
  background: var(--surface-active);
  color: var(--text);
}
.appDocsPage .docsPanel {
  min-width: 0;
}
.appDocsPage .docsPanel > h2:first-child {
  margin: 0 0 18px;
  font-size: 24px;
}
.appDocsPage .docsPanel > :last-child {
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .accountPage .settingsGrid {
    grid-template-columns: 1fr;
  }
  .accountPage .settingsLink.card {
    grid-template-columns: 92px minmax(0,1fr);
  }
  .accountPage .accountSection {
    align-items: flex-start;
    flex-direction: column;
  }
  .billingPage .providerHeaderActions {
    width: 100%;
  }
  .billingPlansModal .priceCard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 6px;
  }
  .billingPlansModal .priceCard > .eyebrow,
  .billingPlansModal .priceCard > h3,
  .billingPlansModal .priceCard > .price,
  .billingPlansModal .priceCard > .billingDetail,
  .billingPlansModal .priceCard > .checklist,
  .billingPlansModal .priceCard > form,
  .billingPlansModal .priceCard > a.button {
    grid-column: 1;
    grid-row: auto;
  }
  .billingPlansModal .priceCard > .checklist {
    grid-template-columns: 1fr;
    margin: 10px 0;
  }
  .toolsCompactRow {
    align-items: flex-start;
    flex-direction: column;
  }
  .toolsCatalog .settingsGrid {
    grid-template-columns: 1fr;
  }
  .callsFilters {
    grid-template-columns: 1fr;
  }
  .supportPage .supportShortcuts {
    display: grid;
    grid-template-columns: 1fr;
  }
  .supportPage .chat {
    height: calc(100vh - 300px);
    min-height: 420px;
  }
  .appDocsPage .docsWorkspace {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .publicDocsPage .docsWorkspace {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .publicDocsPage .docsNav {
    position: static;
  }
  .publicDocsPage .docsToc {
    grid-template-columns: repeat(2,minmax(0,1fr));
    max-height: 210px;
    overflow: auto;
  }
  .appDocsPage .docsNav {
    position: static;
  }
  .appDocsPage .docsToc {
    grid-template-columns: repeat(2,minmax(0,1fr));
    max-height: 210px;
    overflow: auto;
  }
}
.providerToolbar h1 {
  margin: 0;
  font-size: 26px;
}
.providerList {
  gap: 8px;
}
.providerEmptyState {
  padding: 24px 4px;
  border-top: 1px solid var(--line);
}
.providerEmptyState p {
  margin: 0 0 14px;
  color: var(--muted);
}
.providerModalBody {
  width: min(560px, 100%);
}
.providerModalBody .form {
  margin-top: 22px;
}
.providerModalBody .modalHeader p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.providerConnectForm {
  gap: 15px;
}
.providerDialogError {
  margin: 14px 0 0;
}
.providerChoiceField {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.providerChoiceField legend {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 750;
}
.providerConnectForm .providerCard {
  min-height: 56px;
}
.providerConnectForm .field small {
  margin-top: 5px;
  line-height: 1.4;
}
.modalHeader {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.modalHeader h2 {
  margin: 5px 0 0;
}
.modalClose {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.modalActions {
  justify-content: flex-end;
  margin-top: 4px;
}
.providerModalBody .providerKeyHelp > h3,
.providerModalBody .providerHelpIntro {
  display: none;
}
.hidden {
  display: none !important;
}
@media (max-width: 900px) {
  .economicsGrid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .economicsStates { grid-template-columns: 1fr; }
  .heroGrid,
  .grid2,
  .splitSection,
  .analyticsHero,
  .analyticsGrid,
  .projectSetupGrid,
  .projectHelpHero,
  .keySuccessNext,
  .developCommandCenter,
  .repoCommandCenter,
  .codexSteps,
  .codexShotGrid,
  .integrationGrid,
  .setupPasteGrid,
  .setupSteps,
  .repoGuideGrid,
  .inlineCreateForm,
  .projectEditForm,
  .teamSummary,
  .teamGrid,
  .currentSubscription {
    grid-template-columns: 1fr;
  }
  .analyticsKpis {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .analyticsKpi:nth-child(3) {
    border-left: 0;
  }
  .analyticsKpi:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }
  .analyticsReport {
    grid-template-columns: 1fr;
  }
  .analyticsSpend,
  .analyticsRecommendations {
    grid-column: auto;
    grid-row: auto;
  }
  .appDocsPage .docsToc {
    position: static;
  }
  .featureGrid,
  .pricing,
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    position: relative;
    height: auto;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
  }
  .sidebar nav {
    display: flex;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
  }
  .sidebar nav a {
    flex: 0 0 auto;
  }
  .sidebar .workspace {
    display: none;
  }
  .sidebarFooter {
    display: none;
  }
  .sidebarHead {
    margin-bottom: 0;
  }
  .sidebarToggle {
    display: none;
  }
  /* Reset collapsed state on mobile */
  .app.sidebarCollapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .app.sidebarCollapsed .sidebar {
    position: relative;
    height: auto;
    width: 100%;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }
  .app.sidebarCollapsed .sidebarHead {
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
  }
  .app.sidebarCollapsed .navLabel { display: inline; }
  .app.sidebarCollapsed .sidebar nav a { justify-content: flex-start; padding: 10px 12px; }
  .app.sidebarCollapsed .sidebar .brand {
    width: auto;
    flex: 0 0 auto;
  }
  .app.sidebarCollapsed .sidebar .brandMark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .app.sidebarCollapsed .sidebar .brandCopy {
    display: grid;
  }
  .appTop {
    position: sticky;
    top: 0;
  }
  .appIdentity {
    display: none;
  }
  .appMain {
    width: 100%;
  }
  .chatBody {
    overflow: auto;
  }
  .chatBody .appMain {
    height: calc(100vh - 68px);
    min-height: 620px;
  }
  .workbenchShell {
    grid-template-columns: minmax(0, 1fr);
  }
  .chatHistory {
    min-height: auto;
    max-height: 180px;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .chatHistoryHead {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .chatProjectFilter {
    display: none;
  }
  .chatHistoryList {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .chatHistoryItem {
    width: 190px;
    flex: 0 0 auto;
  }
  .chatHistory p {
    display: none;
  }
  .workbenchPage {
    padding: 18px 18px 12px;
  }
  .grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .onboardingSteps,
  .onboardingMarketing {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero {
    padding-top: 62px;
  }
  .receiptDemo {
    transform: none;
  }
  .navlinks {
    display: none;
  }
}
@media (max-width: 600px) {
  .container {
    width: min(var(--max), calc(100% - 28px));
  }
  .navin {
    gap: 10px;
  }
  .navin .brandMark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .navin .brandName {
    font-size: 18px;
  }
  .navin .brandSubline {
    display: none;
  }
  .nav .navSignIn,
  .nav .buttonNote {
    display: none;
  }
  .nav .actions {
    flex: 0 0 auto;
    gap: 7px;
  }
  .nav .actions .button {
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 10px;
    white-space: nowrap;
  }
  .economicsGrid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .featureGrid,
  .pricing,
  .stats,
  .steps,
  .setupSteps,
  .proofRow,
  .receiptStats {
    grid-template-columns: 1fr;
  }
  .repoCardMain,
  .installationCard {
    grid-template-columns: 1fr;
  }
  .navin {
    height: 64px;
  }
  .actions .ghost {
    display: none;
  }
  .hero h1 {
    font-size: 48px;
  }
  .landingHero {
    min-height: auto;
    padding: 28px 0 36px;
  }
  .landingHero h1:not(.landingHeroTitle) {
    font-size: 34px;
  }
  .heroCostCompare {
    grid-template-columns: 1fr;
  }
  .landingHeroLineMain {
    font-size: 26px;
    white-space: normal;
  }
  .landingHeroLineMain .heroHighlight {
    display: table;
    margin-top: 6px;
  }
  .landingHeroLine {
    font-size: 32px;
  }
  .landingHeroProof {
    font-size: 22px;
    margin-top: 6px;
  }
  .heroCtaMain {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .heroCtaButton,
  .heroCtaSecondary {
    width: 100%;
    justify-content: center;
  }
  .landingHeroGrid .landingHeroInner > p {
    font-size: 15px;
  }
  .landingHero > .container > p {
    font-size: 17px;
  }
  .heroChatTopbar,
  .heroChatTurn,
  .heroSavingsStamp {
    min-width: 0;
  }
  .heroChatBody,
  .heroChatBody p,
  .heroTogglePillLabel {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .heroTogglePillLabel {
    max-width: 74px;
  }
  .heroSavingsStamp {
    max-width: 100%;
    transform: none;
  }
  .onboardingTopInner {
    width: calc(100% - 24px);
    gap: 8px;
  }
  .onboardingTop .quietButton {
    display: none;
  }
  .onboardingTop .brand {
    width: 42px;
    flex: 0 0 42px;
    overflow: hidden;
  }
  .onboardingTop .brandMark {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .onboardingTop .brandCopy {
    display: none;
  }
  .onboardingTop .savingsWidget {
    width: auto;
    min-width: 0;
    flex: 1;
  }
  .onboardingTop .savingsWidget > summary {
    display: flex;
    gap: 5px;
    padding: 7px 8px;
  }
  .onboardingTop .savingsMetric small,
  .onboardingTop .savingsMetric strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .onboardingTop .savingsMetric small {
    font-size: 9px;
  }
  .onboardingTop .savingsMetric strong {
    font-size: 10px;
  }
  .onboardingTop .savingsRoutes {
    min-width: 0;
  }
  .onboardingTop .savingsProof {
    max-width: 58px;
    padding: 3px 5px;
    font-size: 7px;
  }
  .heroActions,
  .evidenceSection,
  .setupIntro {
    align-items: stretch;
    flex-direction: column;
  }
  .valueLines {
    margin-top: 42px;
  }
  .valueLines > div,
  .audienceList article {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .audienceList a {
    white-space: normal;
  }
  .page {
    padding: 20px;
  }
  .onboardingPage {
    padding-top: 24px;
  }
  .setupTypeOptions {
    right: 0;
  }
  .setupIntro {
    margin-bottom: 20px;
  }
  .setupIntro h1 {
    font-size: 26px;
  }
  .pathChoice {
    padding: 18px 0;
  }
  .pageHeader {
    display: block;
  }
  .pageHeader .button {
    margin-top: 15px;
  }
  .providerHeaderActions {
    margin-top: 0;
  }
  .providerHeaderActions .button {
    margin-top: 0;
  }
  .providerToolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .compactPageToolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .executionFilters {
    grid-template-columns: 1fr;
  }
  .executionFilterActions {
    align-items: center;
    justify-content: flex-start;
  }
  .appTop {
    height: 78px;
    padding: 0 12px;
  }
  .appStatus {
    display: none;
  }
  .savingsWidget {
    width: 100%;
    margin: 0;
  }
  .savingsWidget > summary {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }
  .savingsSpark {
    display: none;
  }
  .savingsMetric {
    min-width: 0;
  }
  .savingsMetric strong {
    font-size: 11px;
  }
  .savingsRoutes {
    min-width: 86px;
  }
  .savingsProof {
    max-width: 78px;
    font-size: 8px;
  }
  .savingsBreakdown {
    position: fixed;
    top: 84px;
    right: 12px;
    left: 12px;
    width: auto;
  }
  .savingsComponents,
  .onboardingSteps,
  .onboardingMarketing,
  .analyticsHero,
  .analyticsGrid,
  .projectSetupGrid,
  .teamSummary,
  .teamGrid,
  .currentSubscription,
  .setupCapabilities,
  .grid3 {
    grid-template-columns: 1fr;
  }
  .setupCapability {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .setupCapability:last-child {
    border-bottom: 0;
  }
  .setupPathChooser > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .providerSetup {
    grid-template-columns: 1fr;
  }
  .nextAction {
    align-items: stretch;
    flex-direction: column;
  }
  .nextAction .button {
    width: 100%;
  }
  .setupPreferences > summary {
    display: grid;
  }
  .localEnvironment {
    display: grid;
    gap: 1px;
    text-align: center;
  }
  .chatBody .appMain {
    height: calc(100vh - 68px);
  }
  .chatHistory {
    max-height: 148px;
  }
  .chatHistoryHead {
    grid-template-columns: 1fr;
  }
  .chatHistoryItem {
    width: 160px;
  }
  .workbenchPage {
    padding: 14px 12px 9px;
  }
  .workbenchHeader {
    padding-bottom: 8px;
  }
  .workbenchHeader h1 {
    font-size: 19px;
  }
  .chatEmpty h2 {
    font-size: 25px;
  }
  .promptStarters button:nth-child(n + 3) {
    display: none;
  }
  .receiptHeadline,
  .receiptMetrics {
    align-items: stretch;
    display: grid;
    gap: 7px;
  }
  .receiptHeadline b {
    margin: 0;
  }
  .receiptHeadline em {
    width: max-content;
  }
  .receiptMetrics span + span {
    padding: 7px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .chatBody .feedbackWidget {
    right: 12px;
    bottom: 172px;
  }
  .chatBody .feedbackToggle {
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 0;
  }
  .chatBody .feedbackToggle::before {
    content: "?";
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
  }
  .footerIn {
    display: block;
  }
  .chatForm {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
 .feedbackWidget{position:fixed;right:22px;bottom:22px;z-index:20}.feedbackToggle{border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);padding:10px 16px;box-shadow:0 8px 24px #07111f33;cursor:pointer}.feedbackPanel{width:min(320px,calc(100vw - 32px));display:grid;gap:10px;margin-bottom:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 12px 36px #07111f33}.feedbackPanel label{display:grid;gap:5px;font-size:13px}.feedbackPanel select,.feedbackPanel textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface-inset);color:var(--text)}.feedbackPanel textarea{min-height:80px;resize:vertical}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6fbff;
  --bg2: #eaf5fc;
  --panel: #ffffff;
  --panel2: #edf8ff;
  --line: #cfdfeb;
  --text: #0b1d2f;
  --muted: #5f788d;
  --aqua: #04b8c5;
  --blue: #0877d9;
  --purple: #5778d9;
  --danger: #b53649;
  --warning: #966510;
  --shadow: 0 22px 60px rgba(13, 43, 70, 0.1);
  --nav-bg: rgba(246, 251, 255, 0.9);
  --nav-line: #cfdfeb;
  --sidebar-bg: #eef7fd;
  --surface-inset: #eef7fc;
  --surface-raised: #ffffff;
  --surface-deep: #f6fbff;
  --surface-active: #dceffb;
  --surface-subtle: rgba(4, 184, 197, 0.04);
  --surface-alt: rgba(8, 119, 217, 0.025);
  --field-label: #315167;
  --code-bg: #eaf5fc;
  --code-text: #075c86;
  --user-bubble: #daf2fb;
  --composer-bg: #ffffff;
  --tag-bg: #e1f0fa;
  --tag-text: #294e67;
  --message-bg: #eef7fc;
  --message-user-bg: #daf2fb;
}
html[data-theme="light"] .nav,
html[data-theme="light"] .appTop,
html[data-theme="light"] .onboardingTop { background: var(--nav-bg); border-color: var(--line); }
html[data-theme="light"] .sidebar { background: #eef7fd; }
html[data-theme="light"] .savingsWidget > summary,
html[data-theme="light"] .savingsBreakdown,
html[data-theme="light"] .chatSettingsPanel,
html[data-theme="light"] .userMenuPanel,
html[data-theme="light"] .modalBody { background: #ffffff; }
html[data-theme="light"] .chatHistory { background: #f6fbff; }
html[data-theme="light"] .answerReceipt { background: #ffffff; }
html[data-theme="light"] .billingToggle,
html[data-theme="light"] .resultsDisclosure,
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .field select,
html[data-theme="light"] .input,
html[data-theme="light"] .chatHistory input,
html[data-theme="light"] .chatProjectFilter select,
html[data-theme="light"] .setupInlineForm select,
html[data-theme="light"] .setupInlineForm input,
html[data-theme="light"] .chatSettingsPanel select,
html[data-theme="light"] .feedbackPanel select,
html[data-theme="light"] .feedbackPanel textarea,
html[data-theme="light"] .savingsComponents > div,
html[data-theme="light"] .previewComparison > div:not(.comparisonArrow),
html[data-theme="light"] .receiptCompare > div:not(.receiptArrow),
html[data-theme="light"] .receiptSavingsTrack,
html[data-theme="light"] .kpiBar { background: #eef7fc; }
html[data-theme="light"] .tableWrap { background: #ffffff; }
html[data-theme="light"] .sidebar nav a:hover,
html[data-theme="light"] .sidebar nav a.active,
html[data-theme="light"] .billingToggle button[aria-pressed="true"] { background: #dceffb; }
html[data-theme="light"] .previewPrompt,
html[data-theme="light"] .chatTurn.user .turnBody { background: #dcefe9; }
html[data-theme="light"] .heroCtaButton {
  color: #043d38;
  box-shadow: 0 4px 18px rgba(17, 138, 132, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-theme="light"] .heroHighlight {
  color: #064e47;
  background: rgba(4, 217, 221, 0.42);
  box-shadow: 0 0 20px rgba(17, 138, 132, 0.2);
}
html[data-theme="light"] .heroInterfaceTabs { background: #eef4f2; }
html[data-theme="light"] .heroInterfaceTab.is-active { background: #fff; }
html[data-theme="light"] .turnBody,
html[data-theme="light"] .field label,
html[data-theme="light"] .docs p,
html[data-theme="light"] .docs li,
html[data-theme="light"] .legal p,
html[data-theme="light"] .legal li,
html[data-theme="light"] .attachButton,
html[data-theme="light"] .chatSettings > summary { color: var(--text); }
html[data-theme="light"] .chatComposer { background: #ffffff; border-color: #c8d9d5; box-shadow: 0 16px 42px rgba(24, 63, 60, 0.11); }
html[data-theme="light"] .answerReceipt { background: #f8fcfb; }
html[data-theme="light"] .providerKeyHelp > div { background: #f8fbfa; }
html[data-theme="light"] .authNext,
html[data-theme="light"] .setupProgress span { background: #f8fbfa; }
html[data-theme="light"] .button:not(.ghost):not(.secondary):not(.danger),
html[data-theme="light"] .sendButton,
html[data-theme="light"] .savingsSpark,
html[data-theme="light"] .savingsSpark { color: #ffffff; }
html[data-theme="light"] .savingsWidget .savingsSpark {
  color: #087966;
}
html[data-theme="light"] .success { color: #076854; }
html[data-theme="light"] .notice { color: #245b87; }
html[data-theme="light"] .error { color: #a02e41; }

/* ── Cost Comparison Animation ─────────────────────────────────────── */
/* ── Product Flow Diagram ────────────────────────────────────────────── */
.flowSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--landing-vh);
  padding: clamp(24px, 3.5vh, 40px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: visible;
}
.flowSection::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 55% 80% at 62% 55%, rgba(4,217,221,0.07) 0%, transparent 65%); pointer-events:none; }
.flowSection .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  flex: 1;
  gap: clamp(18px, 3vh, 28px);
}

.flowHead { text-align:center; margin-bottom:0; position:relative; z-index:1; }
.flowH1 { font-size:clamp(26px,3.2vw,42px); letter-spacing:-0.04em; line-height:1.1; margin:6px 0 10px; }
.flowSub { color:var(--muted); font-size:clamp(14px,1.5vw,16px); max-width:min(720px, 100%); margin:0 auto; line-height:1.65; }

/* Diagram: [App Node] [Pipe] [Multra.ai Box] [Pipe] [AI Node] */
.flowDiagram {
  display:flex;
  align-items:stretch;
  gap:clamp(10px, 1.8vw, 18px);
  width:100%;
  flex:1;
  position:relative;
  z-index:1;
  margin-bottom:0;
}

/* Endpoint nodes */
.flowNode {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex:0 0 clamp(108px, 11vw, 136px);
  text-align:center;
}
.flowNodeIco { width:46px; height:46px; border-radius:13px; border:1px solid var(--line); background:var(--panel); display:grid; place-items:center; font-size:14px; font-weight:900; color:var(--muted); margin-bottom:3px; font-family:monospace; }
.flowNodeIcoAI { border-color:rgba(4,217,221,0.4); background:rgba(4,217,221,0.08); color:var(--aqua); font-family:inherit; }
.flowNode strong { font-size:12px; font-weight:700; color:var(--text); }
.flowNode span { font-size:11px; color:var(--muted); }
.flowNodeQ { color:var(--aqua) !important; opacity:0; transition:opacity 0.5s; }
.flowNodeQ.fqVis { opacity:1; }

/* Pipes */
.flowPipe {
  flex:1 1 0;
  min-width:72px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:4px;
  padding:0 4px;
}
.flowPipeLn { height:2px; background:rgba(255,255,255,0.1); border-radius:2px; position:relative; overflow:visible; }
.flowPipeLnAqua { background:rgba(4,217,221,0.2); }
.flowPipeDot { position:absolute; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.35); left:-9px; opacity:0; }
.flowPipeDotAqua { background:var(--aqua); box-shadow:0 0 10px rgba(4,217,221,0.8); }
@keyframes fpSlide { 0%{left:-9px;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:calc(100% + 9px);opacity:0} }
.flowPipeDot.fpRun { animation:fpSlide 0.75s ease-in-out forwards; }
.flowPipeInfo { display:flex; align-items:baseline; gap:5px; }
.flowPipeCost { font-size:14px; font-weight:900; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.flowPipeCostGray { color:rgba(255,255,255,0.3); }
.flowPipeCostAqua { color:var(--aqua); }
.flowPipeLbl { font-size:10px; font-weight:600; color:var(--muted); white-space:nowrap; }

/* Multra.ai box - the hero element */
@keyframes flowBreath { 0%,100%{box-shadow:0 0 28px rgba(4,217,221,0.1),0 0 0 1px rgba(4,217,221,0.3)} 50%{box-shadow:0 0 56px rgba(4,217,221,0.22),0 0 0 1px rgba(4,217,221,0.55)} }
.flowBox {
  flex:2.2 1 0;
  min-width:min(100%, 300px);
  border-radius:14px;
  border:1px solid rgba(4,217,221,0.35);
  background:linear-gradient(145deg,var(--panel) 55%,rgba(4,217,221,0.04) 100%);
  padding:14px 16px;
  animation:flowBreath 3s ease-in-out infinite;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.flowBoxHd { display:flex; align-items:center; gap:8px; margin-bottom:11px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.flowBoxMk { width:30px; height:30px; display:block; flex:0 0 30px; filter:drop-shadow(0 0 10px rgba(4,217,221,0.35)); }
.flowBoxMk img { display:block; width:100%; height:100%; object-fit:contain; }
.flowBoxNm { font-size:13px; font-weight:800; color:var(--text); }
.flowBoxSteps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.flowBoxStep { display:flex; align-items:flex-start; gap:9px; height:100%; padding:8px 10px; border-radius:9px; border:1px solid transparent; background:transparent; transition:background 0.35s, border-color 0.35s; }
.flowBoxDot { flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--line); margin-top:4px; transition:background 0.35s, box-shadow 0.35s; }
.flowBoxStep b { display:block; font-size:12px; font-weight:700; color:rgba(255,255,255,0.35); transition:color 0.35s; line-height:1.3; }
.flowBoxStep span { display:block; font-size:11px; color:var(--muted); margin-top:2px; opacity:0; transition:opacity 0.35s; line-height:1.4; }
/* Active step */
.flowBoxStep.fsAct { background:rgba(4,217,221,0.07); border-color:rgba(4,217,221,0.24); }
.flowBoxStep.fsAct b { color:var(--text); }
.flowBoxStep.fsAct span { opacity:1; }
.flowBoxStep.fsAct .flowBoxDot { background:var(--aqua); box-shadow:0 0 8px rgba(4,217,221,0.65); }

/* Bottom stats bar */
.flowStats {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:clamp(12px, 2.5vw, 24px);
  width:100%;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid rgba(4,217,221,0.18);
  background:linear-gradient(135deg,rgba(4,217,221,0.07) 0%,rgba(18,140,255,0.04) 100%);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.45s ease, transform 0.45s ease;
}
.flowStats.flowStatsVis { opacity:1; transform:translateY(0); }
.flowStat { display:flex; flex-direction:column; gap:1px; flex:1 1 0; min-width:0; text-align:center; }
.flowStat strong { font-size:18px; font-weight:900; color:var(--aqua); letter-spacing:-0.03em; }
.flowStat span { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.flowStatSep { width:1px; height:26px; background:rgba(4,217,221,0.18); flex:0 0 1px; }
.flowStats .button { margin-left:0; flex:0 0 auto; padding:9px 15px; font-size:13px; }

@media (max-width:900px) {
  .landingHero,
  .flowSection {
    min-height: auto;
  }
  .flowDiagram { flex-direction:column; align-items:stretch; gap:8px; flex:none; }
  .flowNode { flex-direction:row; flex:none; width:auto; justify-content:flex-start; gap:12px; padding:8px 12px; background:var(--panel); border-radius:11px; border:1px solid var(--line); }
  .flowNodeIco { margin-bottom:0; flex:0 0 38px; width:38px; height:38px; }
  .flowNode strong,.flowNode span { text-align:left; }
  .flowPipe { flex-direction:row; align-items:center; padding:0 16px; min-width:0; }
  .flowPipeLn { flex:1; height:2px; }
  .flowPipeInfo { flex-direction:column; gap:1px; align-items:flex-end; white-space:nowrap; }
  .flowBox { flex:none; min-width:0; }
  .flowBoxSteps { grid-template-columns:1fr; }
  .flowStats { flex-wrap:wrap; gap:10px; justify-content:flex-start; }
  .flowStat { flex:1 1 calc(50% - 10px); text-align:left; }
  .flowStatSep { display:none; }
  .flowStats .button { width:100%; justify-content:center; }
}
@media (max-width:600px) {
  .landingHero,
  .flowSection {
    min-height: auto;
    padding: 28px 0 24px;
  }
  .flowH1 { font-size:24px; }
  .flowHead { margin-bottom:0; }
  .flowPipe { display:none; }
}
@media (min-width: 1280px) {
  .landingHero,
  .flowSection {
    min-height: auto;
    padding: clamp(64px, 9vh, 112px) 0;
  }
  .flowDiagram { flex:none; }
}
/* ── End Product Flow Diagram ───────────────────────────────────────── */

@media (max-width: 900px) {
  .landingHeroGrid { grid-template-columns: 1fr; }
  .landingHeroInner { max-width: 780px; }
  .heroInterfacePreview { max-width: min(520px, 100%); justify-self: stretch; }
  .auditPreview { width: min(620px, 100%); }
  .providerSetup { grid-template-columns: 1fr; }
  .appIdentity { display: flex; }
  .appIdentity b { display: none; }
  .settingsGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .audienceCards,
  .processCards { grid-template-columns: repeat(2, 1fr); }
  .marketingHeroSplitGrid { grid-template-columns: 1fr; }
  .marketingHeroCopy .heroActions { justify-content: center; }
  .marketingHeroSplit { text-align: center; }
  .marketingHeroCopy .marketingHeroLead { margin-left: auto; margin-right: auto; }
  .surfacePaths,
  .chatFeatureGrid,
  .devCompat,
  .mcpCompare,
  .mcpDetails,
  .teamRoles,
  .teamPlanFit,
  .surfaceTeasers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .devRequestPath { flex-direction: column; }
  .devRequestArrow { transform: rotate(90deg); }
}
@media (max-width: 600px) {
  .navin .themeToggle .themeLabel,
  .appIdentity .themeToggle .themeLabel,
  .onboardingTop .themeToggle .themeLabel { display: none; }
  .navin .themeToggle,
  .appIdentity .themeToggle,
  .onboardingTop .themeToggle { min-width: 38px; width: 38px; padding: 0; }
  .auditSteps,
  .audienceCards,
  .processCards,
  .supportShortcuts,
  .surfacePaths,
  .chatFeatureGrid,
  .devCompat,
  .mcpCompare,
  .mcpDetails,
  .teamRoles,
  .teamPlanFit,
  .surfaceTeasers { grid-template-columns: 1fr; }
  .pricingBannerIn { flex-direction: column; align-items: flex-start; gap: 16px; }
  .heroInterfacePreview { max-width: min(520px, 100%); justify-self: stretch; }
  .auditPreview { padding: 15px; }
  .previewComparison,
  .receiptCompare { grid-template-columns: 1fr; }
  .comparisonArrow,
  .receiptArrow { transform: rotate(90deg); justify-self: center; }
  .providerKeyHelp > div { grid-template-columns: 34px minmax(0, 1fr); }
  .providerKeyHelp a { grid-column: 2; white-space: normal; }
  .authPage { padding: 82px 18px 24px; }
  .authCard { padding: 24px; }
  .authTop {
    min-height: 58px;
    grid-template-columns: 1fr auto;
    padding: 0 14px;
  }
  .authTop nav {
    display: none;
  }
  .authTop .brand > span:last-child {
    display: inline;
  }
  .settingsGrid { grid-template-columns: 1fr; }
  .onboardingBody .feedbackWidget { display: none; }
  .setupProgress {
    width: 100%;
    justify-content: space-between;
  }
  .setupProgress li:not(:last-child)::after {
    margin-inline: clamp(5px, 2vw, 10px);
  }
  .setupWizardHeader {
    flex-direction: column;
    gap: 14px;
  }
  .setupWizardHeader .setupTypePicker,
  .setupTypePicker > summary {
    width: 100%;
  }
  .setupTypeOptions {
    right: auto;
    left: 0;
    width: 100%;
  }
  .providerCards {
    flex-direction: column;
  }
  .onboardingTopInner { flex-wrap: nowrap; }
}

@media (max-width: 600px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
  .nav .actions .button {
    display: none;
  }
  .navin {
    justify-content: flex-start;
    position: relative;
  }
  .nav .actions {
    position: absolute;
    top: 13px;
    right: 0;
    margin-left: auto;
  }
  .landingHeroGrid,
  .heroInterfacePreview,
  .heroChatChrome {
    min-width: 0;
    max-width: 100%;
  }
  .heroInterfacePreview {
    width: min(100%, calc(100vw - 28px));
    justify-self: center;
  }
}