/* Layout & component styles. Real CSS media queries (not window.innerWidth
   inline-style mutation — see ca-site/REVIEW.md P0.4) drive every
   responsive change. */

.container {
  max-width: var(--ca-max-content);
  margin: 0 auto;
  padding-inline: 24px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ca-bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  transition:
    box-shadow 0.2s,
    background 0.2s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  border-bottom-color: var(--ca-border);
}
.site-header__row {
  max-width: var(--ca-max-content);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--ca-header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ca-text);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  min-width: 0;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ca-primary-strong);
  color: #fff;
  flex: 0 0 auto;
}
.primary-nav {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  white-space: nowrap;
}
.primary-nav a,
.primary-nav .nav-soon {
  color: var(--ca-muted);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
}
.primary-nav .nav-soon {
  cursor: default;
}
.primary-nav .nav-soon em {
  font-style: normal;
  font-size: 11px;
  margin-left: 4px;
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ca-border);
  background: var(--ca-surface);
  color: var(--ca-text);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 639px) {
  .lang-switch {
    display: none;
  }
}
.theme-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ca-border);
  background: var(--ca-surface);
  color: var(--ca-text);
  border-radius: 8px;
  cursor: pointer;
}
.theme-toggle svg[data-icon-sun] {
  display: none;
}
:root[data-theme='dark'] .theme-toggle svg[data-icon-moon] {
  display: none;
}
:root[data-theme='dark'] .theme-toggle svg[data-icon-sun] {
  display: block;
}
/* Before JS decides (or when no explicit choice was ever stored), the icon
   still has to match whatever prefers-color-scheme actually renders. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle svg[data-icon-moon] {
    display: none;
  }
  :root:not([data-theme='light']) .theme-toggle svg[data-icon-sun] {
    display: block;
  }
}
.menu-btn {
  display: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ca-border);
  background: var(--ca-surface);
  color: var(--ca-text);
  border-radius: 8px;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .primary-nav {
    display: none;
  }
  .menu-btn {
    display: grid;
  }
}
@media (max-width: 639px) {
  .header-actions .theme-toggle {
    display: none;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ca-primary-strong);
  color: #fff;
}
.btn-primary:hover {
  color: #fff;
  filter: brightness(1.05);
}
.btn-secondary {
  background: var(--ca-surface);
  color: var(--ca-text);
  border-color: var(--ca-border);
}
.btn-sm {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 9px;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-live {
  color: var(--ca-success);
  background: color-mix(in srgb, var(--ca-success) 15%, transparent);
}
.badge-available {
  color: var(--ca-success);
  background: color-mix(in srgb, var(--ca-success) 15%, transparent);
}
.badge-early {
  color: var(--ca-accent);
  background: color-mix(in srgb, var(--ca-accent) 14%, transparent);
}
.badge-planned {
  color: var(--ca-muted);
  background: var(--ca-surface2);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ca-primary-strong);
  background: color-mix(in srgb, var(--ca-primary) 12%, transparent);
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* ---------- Hero ---------- */
.hero {
  /* padding-block, not padding: every element with this class also carries
     .container, whose own padding-inline:24px this shorthand would
     otherwise wipe (same specificity, later in the cascade — the bug
     that shipped with zero side margins on every viewport <=1240px,
     masked at >=1280px only by .container's margin:auto optical centering). */
  padding-block: 56px 40px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-copy {
  animation: ca-fade 0.5s ease both;
  min-width: 0;
}
.hero-copy h1 {
  font-size: 52px;
  line-height: 1.07;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 20px 0 0;
  text-wrap: balance;
}
.hero-copy p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ca-muted);
  margin: 20px 0 0;
  max-width: 34em;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero-helper {
  font-size: 13.5px;
  color: var(--ca-muted);
  margin: 16px 0 0;
  font-weight: 500;
}
.hero-visual {
  position: relative;
  animation: ca-fade 0.6s ease both;
  min-width: 0;
}
.hero-context-card {
  position: absolute;
  /* Sits flush with the visual column's own right edge — REVIEW.md P0.4
     traced the original Landing overflow to this card's negative right
     inset pushing it past the viewport at narrow widths. */
  top: -14px;
  /* Not flush (0): the -1.4deg rotation's axis-aligned bounding box is
     slightly wider than the unrotated card, so a flush right edge clips
     into the viewport by a couple of px at exactly the container's edge. */
  right: 8px;
  width: min(86%, 292px);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
  transform: rotate(-1.4deg);
}
.hero-chat {
  position: relative;
  margin-top: 78px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(17, 24, 39, 0.28);
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
}
.hero-chat__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ca-border);
  display: flex;
  align-items: center;
  gap: 11px;
}
.hero-chat__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ca-surface2);
  min-height: 300px;
}
.bubble {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 13px 13px 13px 4px;
  font-size: 14px;
  line-height: 1.45;
  align-self: flex-start;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
}
.bubble-user {
  align-self: flex-end;
  max-width: 82%;
  background: var(--ca-primary-strong);
  color: #fff;
  border-radius: 13px 13px 4px 13px;
  border: none;
}
.action-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  overflow: hidden;
}
.action-card__head {
  padding: 10px 13px;
  border-bottom: 1px solid var(--ca-border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ca-accent);
}
.action-card__body {
  padding: 12px 13px;
}
.diff-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
}
.diff-row .was {
  color: var(--ca-muted);
  text-decoration: line-through;
}
.action-card__actions {
  display: flex;
  gap: 8px;
  padding: 0 13px 13px;
}
.action-card__actions .btn {
  flex: 1;
  padding: 9px;
  font-size: 13px;
  border-radius: 9px;
}
.success-card {
  display: none;
  background: color-mix(in srgb, var(--ca-success) 12%, var(--ca-surface));
  border: 1px solid color-mix(in srgb, var(--ca-success) 40%, var(--ca-border));
  border-radius: 12px;
  padding: 14px 13px;
  animation: ca-fade 0.35s ease both;
}
.success-card.is-visible {
  display: block;
}
.success-card__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ca-success);
}

@media (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy h1 {
    font-size: 44px;
  }
}
@media (max-width: 639px) {
  .hero-copy h1 {
    font-size: 36px;
  }
}

/* ---------- Sections / cards / grids ---------- */
.section {
  /* padding-block, not padding — see .hero's comment above; same bug,
     same fix, and this class is the one used on nearly every section. */
  padding-block: 40px;
}
.section-tinted {
  background: var(--ca-surface2);
  border-block: 1px solid var(--ca-border);
}
.section-lede {
  max-width: 640px;
}
.section-lede h2 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}
.section-lede p {
  font-size: 17px;
  color: var(--ca-muted);
  margin: 14px 0 0;
  line-height: 1.55;
}
.card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  padding: 22px;
}
.grid {
  display: grid;
  gap: 18px;
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1023px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.reason-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reason-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}
.reason-card p {
  font-size: 14.5px;
  color: var(--ca-muted);
  margin: 0;
  line-height: 1.5;
}
.verb-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 9px;
  padding: 8px 10px;
}
.verb-row code {
  font-size: 12px;
  font-weight: 700;
}
.verb-get {
  color: var(--ca-primary-strong);
}
.verb-write {
  color: var(--ca-accent);
}
.verb-delete {
  color: var(--ca-danger);
}
.context-sample {
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 10px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.7;
}

/* Integrations strip */
.integrations-strip {
  text-align: center;
}
.integrations-strip p {
  font-size: 14px;
  font-weight: 600;
  color: var(--ca-muted);
  margin: 0 0 18px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
}

/* How-it-works flow */
.flow {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.flow-step {
  flex: 1;
  min-width: 180px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 14px;
  padding: 18px;
}
.flow-step--core {
  flex: 1.2;
  min-width: 200px;
  border: 2px solid var(--ca-primary);
}
.flow-arrow {
  align-self: center;
  color: var(--ca-muted);
  font-size: 22px;
}
.eyebrow-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ca-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}
@media (max-width: 1023px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
.step-item {
  display: flex;
  gap: 12px;
}
.step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ca-primary-strong);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}

/* Demo tabs */
.tabs {
  display: inline-flex;
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 11px;
  padding: 3px;
  margin-top: 24px;
}
.tab {
  border: 0;
  background: transparent;
  color: var(--ca-muted);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
}
.tab[aria-selected='true'] {
  background: var(--ca-surface);
  color: var(--ca-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.demo-panel {
  margin-top: 20px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 16px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.demo-panel[hidden] {
  display: none;
}
.demo-panel ul {
  font-size: 14px;
  color: var(--ca-muted);
  line-height: 1.7;
  margin: 14px 0 0;
  padding-left: 18px;
}
.demo-chat {
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 719px) {
  .demo-panel {
    grid-template-columns: 1fr;
  }
}

/* Security section */
.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 1023px) {
  .security-grid {
    grid-template-columns: 1fr;
  }
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.check-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.45;
}
.check-list svg {
  flex: 0 0 auto;
  margin-top: 1px;
}
.security-diagram {
  box-shadow: 0 10px 30px -18px rgba(17, 24, 39, 0.2);
}
.diagram-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 11px;
  padding: 13px 14px;
}
.diagram-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.diagram-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--ca-muted);
  font-size: 12px;
  margin: 12px 0;
}
.diagram-link .line {
  height: 1px;
  flex: 1;
  background: var(--ca-border);
}
.context-facts {
  margin-top: 16px;
  border-top: 1px solid var(--ca-border);
  padding-top: 14px;
}
.context-facts .label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ca-muted);
  margin-bottom: 9px;
}
.fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fact-chip {
  font-size: 12px;
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 7px;
  padding: 4px 9px;
}
.conformance-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ca-border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ca-muted);
}

/* Pricing teaser */
.pricing-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}
.price-card {
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card--recommended {
  border: 2px solid var(--ca-primary);
  box-shadow: 0 16px 40px -22px rgba(57, 135, 229, 0.6);
}
.price-card__badge {
  position: absolute;
  top: -11px;
  left: 22px;
  background: var(--ca-primary-strong);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.price-card__name {
  font-weight: 700;
  font-size: 16px;
}
.price-card__amount {
  margin: 14px 0 2px;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.price-card__period {
  font-size: 14px;
  color: var(--ca-muted);
  font-weight: 600;
}
.price-card__cap {
  font-size: 12.5px;
  color: var(--ca-muted);
  min-height: 18px;
}
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ca-muted);
}
.pricing-note {
  margin: 22px 0 0;
  font-size: 14.5px;
  color: var(--ca-muted);
  text-align: center;
  line-height: 1.55;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  padding: 2px 16px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary .plus {
  color: var(--ca-muted);
  font-size: 20px;
}
.faq-item[open] summary .plus {
  transform: rotate(45deg);
}
.faq-item p {
  font-size: 14.5px;
  color: var(--ca-muted);
  margin: 0 0 15px;
  line-height: 1.55;
}
.faq-more-row {
  text-align: center;
  margin-top: 14px;
}

/* Final CTA */
.final-cta {
  padding-block: 72px; /* see .hero's comment — same padding-inline-wipe bug */
  text-align: center;
}
.final-cta h2 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 16em;
  line-height: 1.1;
  text-wrap: balance;
}
.final-cta .hero-ctas {
  justify-content: center;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ca-surface);
  border-top: 1px solid var(--ca-border);
  padding: 48px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 639px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ca-muted);
  margin-bottom: 12px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
}
.footer-links a {
  color: var(--ca-text);
}
.footer-links .soon {
  color: var(--ca-muted);
}
.footer-links .soon em {
  font-style: italic;
  font-size: 11.5px;
}
.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--ca-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ca-muted);
}

/* ---------- Mobile menu dialog ---------- */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ca-bg);
}
.mobile-menu.is-open {
  display: block;
}
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ca-border);
}
.mobile-menu__close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ca-border);
  background: var(--ca-surface);
  border-radius: 9px;
  color: var(--ca-text);
  font-size: 18px;
  cursor: pointer;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
}
.mobile-nav a,
.mobile-nav .nav-soon {
  color: var(--ca-text);
  font-size: 17px;
  font-weight: 600;
  padding: 14px 0;
  border-bottom: 1px solid var(--ca-border);
}
.mobile-nav .btn {
  margin-top: 16px;
  width: 100%;
}
/* .mobile-nav a above sets color: var(--ca-text) at (0,1,1) specificity,
   which beats .btn-primary's plain color:#fff at (0,1,0) — same bug class
   as the .container padding regression: an author rule wins over the
   button's own color regardless of source order. The CTA rendered with
   dark text on its blue background instead of white. */
.mobile-nav .btn-primary {
  color: #fff;
}

/* ---------- How it works: scenario explorer ---------- */
.hiw-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}
.hiw-main {
  min-width: 0;
}
.scenario + .scenario {
  margin-top: 0;
}
.scenario {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.scenario[hidden] {
  /* Author-stylesheet display:flex above has equal specificity to the
     UA stylesheet's [hidden]{display:none} — and author always beats
     user-agent at equal specificity regardless of source order, so
     without this override every scenario rendered at once (all 11
     stacked on the page, hidden attribute silently ignored). Same class
     of bug .demo-panel already had a fix for; missed it here at first. */
  display: none;
}
.scenario h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}
.scenario-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scenario-outcome {
  font-size: 16px;
  color: var(--ca-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}
.when-outcome p {
  font-size: 14px;
  color: var(--ca-muted);
  margin: 6px 0 0;
  line-height: 1.5;
}
.context-strip {
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.context-strip .fact-chips {
  margin-top: 10px;
}
.chat-frame {
  position: relative;
  max-width: 640px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.interactive-example-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ca-muted);
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 4px;
}
.result-panel,
.second-confirm-panel {
  border-radius: 12px;
  padding: 14px 16px;
}
.result-panel {
  background: color-mix(in srgb, var(--ca-success) 12%, var(--ca-surface));
  border: 1px solid color-mix(in srgb, var(--ca-success) 40%, var(--ca-border));
}
.result-panel__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ca-success);
}
.result-panel p {
  font-size: 13.5px;
  color: var(--ca-text);
  margin: 8px 0 0;
  line-height: 1.5;
}
.second-confirm-panel {
  background: color-mix(in srgb, var(--ca-danger) 8%, var(--ca-surface));
  border: 1px solid color-mix(in srgb, var(--ca-danger) 35%, var(--ca-border));
}
.second-confirm-panel__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ca-danger);
}
.second-confirm-panel p {
  font-size: 14px;
  margin: 8px 0 12px;
}
.under-the-hood {
  max-width: 640px;
}
.tech-details {
  margin-top: 10px;
}
.tech-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ca-muted);
}
.scenario-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Right sticky menu (desktop) */
.hiw-menu {
  position: sticky;
  top: calc(var(--ca-header-h) + 16px);
  max-height: calc(100vh - var(--ca-header-h) - 32px);
  overflow-y: auto;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 14px;
  padding: 14px;
}
.hiw-menu__head {
  padding: 2px 6px 10px;
}
.hiw-menu-group {
  margin-bottom: 12px;
}
.hiw-menu-group__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ca-muted);
  padding: 4px 6px;
}
.hiw-menu-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--ca-text);
  border-left: 2px solid transparent;
}
.hiw-menu-item:hover {
  background: var(--ca-surface2);
}
.hiw-menu-item[aria-current='true'] {
  background: color-mix(in srgb, var(--ca-primary) 10%, transparent);
  border-left-color: var(--ca-primary-strong);
}
.hiw-menu-item[aria-current='true'] .hiw-menu-item__title {
  font-weight: 700;
}
.hiw-menu-item__title {
  font-size: 13.5px;
  font-weight: 600;
}
.hiw-menu-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hiw-menu-item__site {
  font-size: 11.5px;
  color: var(--ca-muted);
}
.hiw-menu-item__badge {
  font-size: 10px;
  padding: 1px 7px;
}

.hiw-mobile-trigger-row {
  display: none;
}
.hiw-mobile-trigger {
  width: 100%;
}
.hiw-mobile-dialog {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ca-bg);
  flex-direction: column;
}
.hiw-mobile-dialog.is-open {
  display: flex;
}
.hiw-mobile-dialog__body {
  padding: 12px 20px;
  overflow-y: auto;
}

@media (max-width: 1023px) {
  .hiw-layout {
    grid-template-columns: 1fr;
  }
  .hiw-menu {
    display: none;
  }
  .hiw-mobile-trigger-row {
    display: block;
    position: sticky;
    top: calc(var(--ca-header-h) + 8px);
    z-index: 10;
    padding-top: 12px;
    padding-bottom: 12px;
    background: color-mix(in srgb, var(--ca-bg) 92%, transparent);
    backdrop-filter: blur(6px);
  }
}

/* ---------- Pricing: full comparison table ---------- */
.period-toggle {
  display: flex;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 10px;
  padding: 3px;
}
.period-toggle button {
  border: 0;
  background: transparent;
  color: var(--ca-text);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
}
.period-toggle button[aria-pressed='true'] {
  background: var(--ca-primary-strong);
  color: #fff;
}

.pricing-desktop-only {
  display: none;
}
.pricing-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ca-border);
  border-radius: 14px;
}
.pricing-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
}
.pricing-table th,
.pricing-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ca-border);
  text-align: center;
  font-size: 13.5px;
}
.pricing-table thead th {
  background: var(--ca-surface2);
  vertical-align: top;
  padding-top: 20px;
}
.feature-col {
  text-align: left !important;
  font-weight: 600;
  position: sticky;
  left: 0;
  background: var(--ca-surface);
  z-index: 1;
  min-width: 220px;
}
thead .feature-col {
  background: var(--ca-surface2);
}
.price-col {
  min-width: 140px;
}
.price-col--recommended {
  background: color-mix(in srgb, var(--ca-primary) 8%, var(--ca-surface2));
}
.price-col__name {
  font-weight: 700;
  font-size: 15px;
}
.price-col__amount {
  margin: 8px 0 2px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.price-col__cap {
  font-size: 11.5px;
  color: var(--ca-muted);
  font-weight: 400;
  min-height: 16px;
}
.feature-cell--yes {
  color: var(--ca-success);
}
.feature-cell--no {
  color: var(--ca-border);
}

.pricing-mobile {
  display: block;
}
.pricing-mobile__tabs {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 11px;
  padding: 4px;
  margin-bottom: 16px;
}
.pricing-mobile__tabs .tab {
  flex: 1;
  white-space: nowrap;
}
.pricing-mobile-plan {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.pricing-mobile-plan[hidden] {
  display: none;
}
.pricing-mobile-plan__list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  text-align: left;
}
.pricing-mobile-plan__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ca-border);
  font-size: 13.5px;
}
.pricing-mobile-plan__list li:last-child {
  border-bottom: 0;
}

@media (min-width: 900px) {
  .pricing-desktop-only {
    display: block;
  }
  .pricing-mobile {
    display: none;
  }
}

/* ---------- Docs ---------- */
.docs-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: start;
}
.docs-main {
  min-width: 0;
  max-width: 720px;
}
.docs-main h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 40px 0 12px;
  scroll-margin-top: calc(var(--ca-header-h) + 16px);
}
.docs-main p,
.docs-main li {
  font-size: 15px;
  line-height: 1.65;
}
.docs-main code {
  font-size: 0.9em;
  background: var(--ca-surface2);
  border-radius: 4px;
  padding: 1px 5px;
}
.docs-toc {
  position: sticky;
  top: calc(var(--ca-header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.docs-toc__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ca-muted);
  margin-bottom: 6px;
}
.docs-toc a {
  color: var(--ca-muted);
  padding: 4px 0;
}
.docs-toc a:hover {
  color: var(--ca-text);
}
.docs-endpoint-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 13.5px;
}
.docs-endpoint-table th,
.docs-endpoint-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ca-border);
}
.docs-endpoint-table thead th {
  color: var(--ca-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

pre[data-code-block] {
  position: relative;
  background: #0d0d0d;
  color: #f5f4ef;
  border-radius: 10px;
  padding: 18px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 12px 0 20px;
}
pre[data-code-block] code {
  background: transparent;
  padding: 0;
  color: inherit;
  white-space: pre;
}
.code-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f4ef;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
}
.code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }
  .docs-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--ca-border);
    padding-bottom: 16px;
    margin-bottom: 8px;
  }
  .docs-toc__title {
    width: 100%;
  }
}

/* ---------- Simple content pages (terms/privacy/early access) ---------- */
.prose {
  max-width: 720px;
  padding-block: 48px 72px; /* see .hero's comment — same padding-inline-wipe bug */
}
.prose h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.prose .updated {
  color: var(--ca-muted);
  font-size: 13.5px;
  margin: 0 0 32px;
}
.prose h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 32px 0 10px;
}
.prose p,
.prose li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ca-text);
}
.prose ul {
  padding-left: 20px;
}
.notice {
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 14px;
  color: var(--ca-muted);
  margin: 0 0 28px;
}

/* Accessibly hidden (not display:none — screen readers should still be
   able to reach it if they choose to; aria-hidden on the wrapper is what
   actually excludes it, this just keeps it off-screen visually and for
   the honeypot's purpose, off most simple bots too). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.early-access-form {
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-row label {
  font-size: 13.5px;
  font-weight: 600;
}
.form-row .optional {
  font-weight: 400;
  color: var(--ca-muted);
}
.form-row input,
.form-row textarea {
  font: inherit;
  font-size: 14px;
  color: var(--ca-text);
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-sm);
  padding: 10px 12px;
  resize: vertical;
}
.early-access-form .btn {
  align-self: flex-start;
}
.early-access-form .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.form-status {
  font-size: 14px;
  margin: 0;
}
.form-status[data-state='success'] {
  color: var(--ca-success);
}
.form-status[data-state='error'] {
  color: var(--ca-danger);
}