/* 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 ---------- */
html {
  scroll-padding-top: var(--ca-scroll-offset, calc(var(--ca-header-h) + 16px));
}
.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: 16px;
  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: 0;
  white-space: nowrap;
}
.primary-nav a,
.primary-nav .nav-soon {
  color: var(--ca-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 7px;
  border-radius: 8px;
}
.primary-nav .nav-soon {
  cursor: default;
}
.primary-nav a[aria-current='page'],
.mobile-nav a[aria-current='page'] {
  color: var(--ca-primary-strong);
  background: color-mix(in srgb, var(--ca-primary-strong) 9%, transparent);
}
.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;
}
/* Language dropdown — a real popover (button + menu), not the old single
   toggle. Scales to any number of locales; the list is driven by i18n.ts's
   `languages` and each page's shipped locales. */
.lang-menu {
  position: relative;
}
.lang-menu__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--ca-border);
  background: var(--ca-surface);
  color: var(--ca-text);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.lang-menu__btn:hover {
  border-color: var(--ca-text-subtle, var(--ca-muted));
}
.lang-menu__chevron {
  transition: transform 0.18s ease;
}
.lang-menu.is-open .lang-menu__chevron {
  transform: rotate(180deg);
}
.lang-menu__pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 172px;
  padding: 6px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  display: none;
}
.lang-menu.is-open .lang-menu__pop {
  display: block;
  animation: langPop 0.14s ease both;
}
@keyframes langPop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.lang-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ca-text);
  text-decoration: none;
}
.lang-menu__item:hover {
  background: color-mix(in srgb, var(--ca-primary-strong) 9%, var(--ca-surface));
}
.lang-menu__item.is-current {
  color: var(--ca-primary-strong);
}
@media (max-width: 639px) {
  .lang-menu {
    display: none;
  }
}
/* Mobile menu language row — the dropdown collapses into the slide-over. */
.mobile-nav__langs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0;
  padding-top: 10px;
  border-top: 1px solid var(--ca-border);
}
.mobile-nav__lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 2px;
  color: var(--ca-text);
  text-decoration: none;
  font-weight: 600;
}
.mobile-nav__lang.is-current {
  color: var(--ca-primary-strong);
}
.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: 1279px) {
  .primary-nav {
    display: none;
  }
  .menu-btn {
    display: grid;
  }
}

/* ---------- Examples: screenshot-led gallery, shared site chrome ---------- */
.examples-gallery {
  padding-block: 58px 72px;
}
.examples-intro {
  margin-bottom: 38px;
  max-width: 720px;
}
.examples-intro h1 {
  margin: 0 0 18px;
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.examples-intro p {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ca-muted);
  max-width: 62ch;
}
.examples-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 44px;
}
.example-project {
  min-width: 0;
}
.example-project__preview {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-md);
  background: var(--ca-surface);
  aspect-ratio: 8 / 5;
}
.example-project__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.example-project__open {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--ca-radius-sm);
  /* Preview images stay light in either theme; keep this action opaque. */
  background: #1c5cab;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
.example-project__preview:hover .example-project__open,
.example-project__preview:focus-visible .example-project__open {
  background: #164b8e;
}
.example-project__preview:focus-visible .example-project__open {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.example-project__preview:hover,
.example-project__preview:focus-visible {
  border-color: var(--ca-primary-strong);
}
.example-project__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 22px;
}
.example-project h2 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
.example-project h2 a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ca-text);
}
.example-project h2 a:hover {
  color: var(--ca-primary-strong);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.example-project h2 svg {
  color: var(--ca-muted);
  width: 16px;
  height: 16px;
}
.example-project__platform {
  color: var(--ca-muted);
  font-size: 12px;
  line-height: 1.5;
}
.example-project__description {
  margin: 12px 0 16px;
  font-size: 15px;
  line-height: 1.7;
  max-width: 64ch;
}
.example-project__question {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--ca-primary-strong);
  font-size: 14px;
  line-height: 1.7;
}
.example-project__question span {
  color: var(--ca-muted);
}
.examples-next {
  margin: 42px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--ca-border);
  font-size: 14px;
  line-height: 1.8;
  color: var(--ca-muted);
}
.examples-next a {
  margin-left: 5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .examples-gallery {
    padding-block: 36px 48px;
  }
  .examples-intro {
    margin-bottom: 28px;
  }
  .examples-intro p {
    font-size: 16px;
  }
  .examples-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .example-project__heading {
    margin-top: 18px;
  }
}
@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: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ca-fade 0.5s ease both;
  min-width: 0;
  width: 100%;
  text-align: center;
}
.hero-copy h1 {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 20px 0 0;
  max-width: 20em;
  text-wrap: balance;
}
.hero-copy p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ca-muted);
  margin: 20px 0 0;
  max-width: 52em;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero-copy .hero-ctas {
  justify-content: center;
}
.hero-helper {
  font-size: 13.5px;
  color: var(--ca-muted);
  margin: 16px 0 0;
  font-weight: 400;
}
.hero-visual {
  position: relative;
  animation: ca-fade 0.6s ease both;
  min-width: 0;
}
.hero-visual--recording {
  width: 100%;
  padding-block: 10px 24px;
}
.motion-frame {
  position: relative;
  z-index: 0;
  margin: 0;
  min-width: 0;
}
.motion-frame__halo {
  position: absolute;
  z-index: -1;
  inset: 6% -5% -8%;
  border-radius: 42px;
  background:
    radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--ca-primary) 32%, transparent), transparent 46%),
    radial-gradient(circle at 82% 68%, color-mix(in srgb, var(--ca-accent) 26%, transparent), transparent 52%);
  filter: blur(28px);
  opacity: 0.56;
  animation: ca-recording-breathe 5s ease-in-out infinite alternate;
}
.motion-frame__viewport {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #f6f7f9;
  border: 1px solid color-mix(in srgb, var(--ca-border) 82%, var(--ca-primary));
  border-radius: 20px;
  box-shadow:
    0 34px 78px -34px rgba(17, 24, 39, 0.48),
    0 12px 32px -22px rgba(17, 24, 39, 0.3);
}
.motion-frame--featured .motion-frame__viewport {
  box-shadow:
    0 40px 90px -38px rgba(17, 24, 39, 0.54),
    0 15px 36px -24px color-mix(in srgb, var(--ca-primary-strong) 52%, transparent);
}
.motion-frame video {
  width: 100%;
  aspect-ratio: 8 / 5;
  display: block;
  object-fit: cover;
  background: #f6f7f9;
}
.motion-frame__label {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(19, 25, 34, 0.78);
  color: #fff;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.motion-frame__label span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #62d99a;
  box-shadow: 0 0 0 4px rgba(98, 217, 154, 0.14);
}
.motion-frame__control {
  position: absolute;
  z-index: 2;
  right: 13px;
  bottom: 13px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  background: rgba(19, 25, 34, 0.8);
  color: #fff;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}
.motion-frame__control:hover {
  background: rgba(19, 25, 34, 0.94);
}
.motion-frame__control:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ca-primary) 48%, transparent);
  outline-offset: 3px;
}
.motion-frame__control span {
  font-size: 13px;
  font-weight: 800;
  transform: translateY(-1px);
}
.motion-frame figcaption {
  width: 100%;
  max-width: 65ch;
  margin: 14px 4px 0;
  color: var(--ca-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
@keyframes ca-recording-breathe {
  from {
    opacity: 0.42;
    transform: scale(0.96) translate3d(-1%, 1%, 0);
  }
  to {
    opacity: 0.68;
    transform: scale(1.04) translate3d(1%, -1%, 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-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;
  }
}

.landing-story-grid {
  margin-top: 28px;
}
.listing-demo {
  max-width: 820px;
  margin: 32px auto 0;
  border: 1px solid var(--ca-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ca-surface);
}
.listing-demo__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ca-border);
}
.listing-demo__head span,
.listing-demo__context,
.listing-demo figcaption {
  color: var(--ca-muted);
  font-size: 13px;
  line-height: 1.5;
}
.listing-demo__context {
  padding: 14px 24px;
  background: var(--ca-bg);
}
.listing-demo__messages {
  display: grid;
  gap: 24px;
  padding: 24px;
  font-size: 15px;
  line-height: 1.6;
}
.listing-demo__question {
  justify-self: end;
  max-width: 85%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px 14px 4px 14px;
  background: var(--ca-primary-strong);
  color: #fff;
}
.listing-demo__answer > p {
  margin: 0;
}
.listing-demo__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.listing-preview {
  padding: 18px;
  border: 1px solid var(--ca-border);
  border-radius: 10px;
}
.listing-preview h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
}
.listing-preview__price {
  font-size: 21px;
}
.listing-preview p {
  margin: 8px 0;
  font-size: 13px;
  color: var(--ca-muted);
}
.listing-preview > span {
  font-size: 12px;
  color: var(--ca-primary-strong);
}
.listing-demo figcaption {
  border-top: 1px solid var(--ca-border);
  padding: 16px 24px;
}
.reason-card .landing-use-case__question {
  font-weight: 600;
  color: var(--ca-text);
}
@media (max-width: 639px) {
  .listing-demo__results {
    grid-template-columns: 1fr;
  }
  .listing-demo__head,
  .listing-demo__context,
  .listing-demo__messages,
  .listing-demo figcaption {
    padding: 16px;
  }
  .listing-demo__question {
    max-width: 95%;
  }
}

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

/* Integration directory: AI-assisted setup followed by platform guides. */
.integration-section { scroll-margin-top: 0; }
.integration-directory { margin-top: 32px; }
.integration-directory > .ca-claude { border-color: color-mix(in srgb, var(--ca-primary-strong) 35%, var(--ca-border)); }
.integration-methods { margin-top: 24px; }
.integration-method { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 21px 16px; border-bottom: 1px solid var(--ca-border); color: var(--ca-text); text-decoration: none; }
.integration-method:hover { background: var(--ca-surface); color: var(--ca-text); }
.integration-method__icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ca-border); border-radius: 10px; font-size: 17px; font-weight: 600; color: var(--ca-muted); }
.integration-method__icon svg { width: 24px; height: 24px; }
.integration-method__copy { display: grid; gap: 5px; }
.integration-method__copy strong { font-size: 16px; font-weight: 600; }
.integration-method__copy > span { font-size: 14px; line-height: 1.5; color: var(--ca-muted); }
.integration-method__action { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ca-primary-strong); }
@media (max-width: 639px) {
  .integration-method { padding: 18px 0; gap: 12px; grid-template-columns: 36px minmax(0, 1fr); }
  .integration-method__icon { width: 36px; height: 36px; }
  .integration-method__action { grid-column: 2; }
}

/* Legacy chips used outside the integration directory. */
.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;
}

/* Install-from-the-directory call to action under the integration chips.
   The plugin is the only integration a visitor can install in one click, so
   it gets the one link the strip carries. */
.wp-directory {
  margin-top: 22px;
}
/* `.btn` is nowrap by default, which the longer Russian label overflows on a
   360px screen — this button wraps instead. */
.wp-directory__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
.wp-directory__btn svg:last-child {
  color: var(--ca-muted);
}
.wp-directory__mark {
  display: inline-flex;
  color: var(--ca-primary-strong);
}
.wp-directory__hint {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ca-muted);
  margin: 10px 0 0;
}

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

/* Recorded product journeys */
.motion-story {
  padding-block: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 38px;
  align-items: start;
}
.motion-story__copy {
  min-width: 0;
  width: 100%;
}
.motion-story__copy h2 {
  margin: 18px 0 0;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.motion-story__copy > p {
  margin: 18px 0 0;
  max-width: 68ch;
  color: var(--ca-muted);
  font-size: 16px;
  line-height: 1.6;
}
.motion-story__media {
  min-width: 0;
  width: 100%;
}
.motion-steps {
  list-style: none;
  padding: 0;
  margin: 28px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.motion-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--ca-border);
}
.motion-steps li:last-child {
  border-bottom: 1px solid var(--ca-border);
}
.motion-steps li > span {
  color: var(--ca-primary-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  padding-top: 2px;
}
.motion-steps strong {
  display: block;
  font-size: 14px;
}
.motion-steps p {
  margin: 4px 0 0;
  color: var(--ca-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.text-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 1023px) {
  .motion-story {
    gap: 38px;
    padding-block: 58px;
  }
}
@media (max-width: 639px) {
  .motion-story {
    padding-block: 46px;
  }
  .motion-story__copy h2 {
    font-size: 31px;
  }
  .motion-frame__viewport {
    border-radius: 15px;
  }
  .motion-frame__label {
    top: 9px;
    left: 9px;
    max-width: calc(100% - 62px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .motion-frame__control {
    right: 9px;
    bottom: 9px;
  }
}

/* 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 entries that leave the site carry their destination's mark plus the
   external-link arrow, so a click off-site is never a surprise. */
.footer-links .footer-link-ext {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.footer-link-ext__icon {
  display: inline-flex;
  color: var(--ca-primary-strong);
}
.footer-link-ext svg:last-child {
  color: var(--ca-muted);
  flex: none;
}
.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-hero {
  padding-block: 48px 18px;
}
.hiw-hero h1 {
  max-width: 16ch;
  margin: 16px 0 0;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hiw-hero > p {
  max-width: 590px;
  margin: 15px 0 0;
  color: var(--ca-muted);
  font-size: 17px;
  line-height: 1.55;
}
.hiw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 36px;
  align-items: start;
}
.hiw-main {
  min-width: 0;
}
.scenario + .scenario {
  margin-top: 0;
}
.scenario {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.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 the previous audience panel already had a fix for; missed it here at first. */
  display: none;
}
.scenario h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  line-height: 1.15;
}
.scenario-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.scenario-outcome {
  font-size: 16px;
  color: var(--ca-muted);
  line-height: 1.55;
  margin: 10px 0 0;
  max-width: 58ch;
}
.chat-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(124, 173, 255, 0.28);
  border-radius: 26px;
  padding: 24px;
  background:
    radial-gradient(circle at 90% 4%, rgba(73, 149, 255, 0.25), transparent 34%),
    linear-gradient(145deg, #101827, #172554 58%, #113a5b);
  box-shadow:
    0 30px 68px -38px rgba(15, 23, 42, 0.76),
    inset 0 1px rgba(255, 255, 255, 0.08);
}
.chat-showcase::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -120px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: rgba(33, 192, 152, 0.13);
  filter: blur(10px);
}
.chat-showcase__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}
.chat-showcase__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.chat-showcase__label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64d7a2;
  box-shadow: 0 0 0 5px rgba(100, 215, 162, 0.13);
}
.chat-showcase__context {
  max-width: 68%;
  color: rgba(226, 232, 240, 0.72);
  font-size: 11px;
  text-align: right;
}
.chat-showcase__context .fact-chips {
  justify-content: flex-end;
  margin-top: 8px;
}
.chat-showcase__context .fact-chip {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #edf4ff;
}
.chat-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  background: #f4f6f9;
  color: #1c2430;
  box-shadow: 0 24px 56px rgba(4, 10, 24, 0.34);
}
.chat-frame__head {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e9ef;
  background: #fff;
}
.chat-frame__avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: linear-gradient(145deg, #4d9af5, #2459ac);
  color: #fff;
  box-shadow: 0 8px 18px rgba(36, 89, 172, 0.23);
}
.chat-frame__identity {
  min-width: 0;
  flex: 1;
}
.chat-frame__identity strong {
  display: block;
  font-size: 14px;
}
.chat-frame__identity span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: #4d725f;
  font-size: 10.5px;
  font-weight: 600;
}
.chat-frame__identity i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4fb47f;
}
.chat-frame__more {
  color: #9299a3;
  letter-spacing: 2px;
}
.chat-frame__body {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-end;
  padding: 24px;
}
.chat-frame .bubble {
  border-color: #e0e5ec;
  background: #fff;
  color: #252c35;
  box-shadow: 0 7px 20px rgba(34, 44, 59, 0.05);
}
.chat-frame .bubble-user {
  border: 0;
  background: #2e72cf;
  color: #fff;
  box-shadow: 0 8px 18px rgba(46, 114, 207, 0.2);
}
.chat-frame .action-card {
  border-color: #d9e0e9;
  background: #fff;
  color: #252c35;
}
.chat-frame .action-card__head {
  border-bottom-color: #e5e9ef;
}
.chat-frame .action-card__actions {
  background: #fff;
}
.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;
}
.scenario-details {
  overflow: hidden;
  border: 1px solid var(--ca-border);
  border-radius: 15px;
  background: var(--ca-surface);
}
.scenario-details > summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.scenario-details > summary::-webkit-details-marker {
  display: none;
}
.scenario-details > summary strong,
.scenario-details > summary small {
  display: block;
}
.scenario-details > summary strong {
  font-size: 14px;
}
.scenario-details > summary small {
  margin-top: 4px;
  color: var(--ca-muted);
  font-size: 12px;
}
.scenario-details > summary > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--ca-surface2);
  color: var(--ca-muted);
  font-size: 18px;
  font-style: normal;
  transition: transform 0.2s ease;
}
.scenario-details[open] > summary > i {
  transform: rotate(45deg);
}
.scenario-details__body {
  padding: 20px 18px;
  border-top: 1px solid var(--ca-border);
}
.scenario-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.scenario-details__grid p {
  margin: 7px 0 0;
  color: var(--ca-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.scenario-details__body .check-list {
  margin-top: 22px;
}
.scenario-details__tools {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ca-border);
}
.scenario-details__tools code {
  display: block;
  margin-top: 7px;
  color: var(--ca-muted);
  font-size: 12px;
  white-space: normal;
}
.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__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-hero h1 {
    font-size: 42px;
  }
  .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);
  }
}
@media (max-width: 639px) {
  .hiw-hero {
    padding-block: 34px 10px;
  }
  .hiw-hero h1 {
    max-width: 18ch;
    font-size: 35px;
  }
  .hiw-hero > p {
    font-size: 15.5px;
  }
  .scenario {
    gap: 18px;
  }
  .scenario h2 {
    font-size: 28px;
  }
  .chat-showcase {
    margin-inline: -8px;
    padding: 14px;
    border-radius: 20px;
  }
  .chat-showcase__top {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
  }
  .chat-showcase__context {
    max-width: none;
    text-align: left;
  }
  .chat-showcase__context .fact-chips {
    justify-content: flex-start;
  }
  .chat-frame {
    border-radius: 16px;
  }
  .chat-frame__head {
    min-height: 60px;
    padding: 10px 12px;
  }
  .chat-frame__body {
    min-height: 190px;
    padding: 15px;
  }
  .chat-frame .bubble {
    max-width: 94%;
    font-size: 13px;
  }
  .scenario-details__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .scenario-cta-row .btn {
    flex: 1;
  }
}

/* ---------- How it works: static lower sections ---------- */
.hiw-lower__head {
  text-align: center;
  margin: 0 auto 30px;
  max-width: 640px;
}
.hiw-lower__head h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.15;
}
.hiw-lower__head p {
  color: var(--ca-muted);
  font-size: 15.5px;
  margin: 0;
  line-height: 1.55;
}
.hiw-flow {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
}
.hiw-flow__box {
  flex: 1;
  min-width: 180px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 14px;
  padding: 18px;
}
.hiw-flow__box--mid {
  flex: 1.1;
  border: 2px solid var(--ca-primary);
}
.hiw-flow__box strong {
  display: block;
  font-size: 14.5px;
  margin-top: 7px;
}
.hiw-flow__arrow {
  align-self: center;
  color: var(--ca-muted);
  font-size: 20px;
}
.hiw-principles {
  margin-top: 26px;
}
.hiw-principles > div {
  font-size: 13.5px;
  line-height: 1.5;
}
.hiw-principles > div span {
  display: block;
  color: var(--ca-muted);
}
.table-scroll {
  overflow-x: auto;
}
.hiw-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.hiw-info-table th {
  text-align: left;
  font-weight: 600;
  color: var(--ca-muted);
  padding: 9px 12px;
  border-bottom: 1px solid var(--ca-border);
}
.hiw-info-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ca-border);
}
.hiw-info-table tbody tr:last-child td {
  border-bottom: 0;
}
.hiw-info-table--card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 12px;
}
.hiw-lower__link {
  text-align: center;
  margin: 20px 0 0;
}
/* The extra FAQ block: flex for consistent gaps when shown, but the [hidden]
   variant must out-specify the base rule so initFaqMore's attribute toggle
   actually hides it (an inline display would defeat [hidden]). */
.faq-extra {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-extra[hidden] {
  display: none;
}
@media (max-width: 639px) {
  .hiw-flow__arrow {
    display: none;
  }
  /* Wide "what you'll need" table -> stacked cards on phones, so nothing has
     to scroll sideways (ca-site/REVIEW.md P0.4 / plan #28). */
  .hiw-info-table--card thead {
    display: none;
  }
  .hiw-info-table--card,
  .hiw-info-table--card tbody,
  .hiw-info-table--card tr,
  .hiw-info-table--card td {
    display: block;
    width: 100%;
  }
  .hiw-info-table--card {
    border: 0;
    background: transparent;
  }
  .hiw-info-table--card tr {
    border: 1px solid var(--ca-border);
    border-radius: 12px;
    background: var(--ca-surface);
    margin-bottom: 10px;
    padding: 4px 2px;
  }
  .hiw-info-table--card td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: 0;
    padding: 8px 14px;
  }
  .hiw-info-table--card td::before {
    content: attr(data-label);
    color: var(--ca-muted);
    font-weight: 600;
    flex: 0 0 auto;
  }
}

/* ---------- 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.container {
  width: 100%;
  max-width: 1440px;
  display: grid;
  grid-template-columns: 240px minmax(0, 780px) 190px;
  justify-content: center;
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
  padding-block: 32px 88px;
}
.docs-main {
  min-width: 0;
}
.docs-sidebar,
.docs-on-page {
  position: sticky;
  top: calc(var(--ca-header-h) + 24px);
  max-height: calc(100vh - var(--ca-header-h) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.docs-sidebar {
  border-right: 1px solid var(--ca-border);
  padding-right: 24px;
}
.docs-sidebar__home {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ca-text);
  padding: 4px 10px 20px;
  border-bottom: 1px solid var(--ca-border);
  margin-bottom: 22px;
}
.docs-sidebar__home:hover {
  color: var(--ca-primary-strong);
}
.docs-sidebar__product {
  color: var(--ca-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.docs-sidebar__home strong {
  font-size: 17px;
  line-height: 1.3;
}
.docs-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.docs-nav__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.docs-nav__label,
.docs-on-page__title {
  color: var(--ca-muted);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.085em;
  line-height: 1.4;
  text-transform: uppercase;
}
.docs-nav__label {
  padding: 0 10px 7px;
}
.docs-nav__link {
  position: relative;
  color: var(--ca-muted);
  font-size: 13.5px;
  font-weight: 520;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 7px;
}
.docs-nav__link:hover {
  color: var(--ca-text);
  background: var(--ca-surface2);
}
.docs-nav__link--active {
  color: var(--ca-primary-strong);
  background: color-mix(in srgb, var(--ca-primary) 10%, transparent);
  font-weight: 650;
}
.docs-nav__link--active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--ca-primary-strong);
}
.docs-on-page {
  border-left: 1px solid var(--ca-border);
  padding-left: 20px;
}
.docs-on-page nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.docs-on-page__title {
  margin-bottom: 8px;
}
.docs-on-page a {
  color: var(--ca-muted);
  font-size: 12.5px;
  line-height: 1.35;
  padding: 5px 0;
}
.docs-on-page a:hover {
  color: var(--ca-primary-strong);
}
.docs-mobile-nav {
  display: none;
}
.docs-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ca-muted);
  font-size: 12.5px;
  margin-bottom: 34px;
}
.docs-breadcrumbs a {
  color: var(--ca-muted);
}
.docs-breadcrumbs a:hover {
  color: var(--ca-text);
}
.docs-hero {
  border-bottom: 1px solid var(--ca-border);
  padding-bottom: 36px;
}
.docs-hero__eyebrow,
.docs-section__kicker {
  color: var(--ca-primary-strong);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}
.docs-hero h1 {
  max-width: 720px;
  font-size: clamp(38px, 4.4vw, 52px);
  font-weight: 790;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 12px 0 16px;
}
.docs-hero > p {
  max-width: 680px;
  color: var(--ca-muted);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}
.docs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.docs-hero__meta span {
  color: var(--ca-muted);
  background: var(--ca-surface2);
  border: 1px solid var(--ca-border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  padding: 6px 10px;
}
.docs-section {
  border-bottom: 1px solid var(--ca-border);
  padding: 56px 0;
}
.docs-section--first {
  padding-top: 56px;
}
.docs-main h2 {
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 56px 0 14px;
  scroll-margin-top: 0;
}
.docs-section h2 {
  margin-top: 10px;
}
.docs-main > h2 {
  padding-top: 8px;
  border-top: 1px solid var(--ca-border);
}
.docs-main p,
.docs-main li {
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.docs-main > p {
  max-width: 720px;
}
.docs-section__lead {
  max-width: 680px;
  color: var(--ca-muted);
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin: 0 0 28px;
}
.docs-main :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
  background: var(--ca-surface2);
  border: 1px solid color-mix(in srgb, var(--ca-border) 75%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.docs-requirements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 28px 0 20px;
}
.docs-requirement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  background: var(--ca-surface);
  border-right: 1px solid var(--ca-border);
}
.docs-requirement:last-child {
  border-right: 0;
}
.docs-requirement__number {
  color: var(--ca-primary-strong);
  font: 700 10px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.docs-requirement div {
  min-width: 0;
}
.docs-requirement strong,
.docs-requirement span:not(.docs-requirement__number) {
  display: block;
}
.docs-requirement strong {
  font-size: 12.5px;
  line-height: 1.35;
}
.docs-requirement span:not(.docs-requirement__number) {
  color: var(--ca-muted);
  font-size: 11.5px;
  line-height: 1.45;
  margin-top: 4px;
}
.docs-callout {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--ca-border);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 20px 0 30px;
}
.docs-callout--info {
  background: color-mix(in srgb, var(--ca-primary) 6%, var(--ca-surface));
  border-left-color: var(--ca-primary-strong);
}
.docs-callout--warning {
  background: color-mix(in srgb, var(--ca-accent) 8%, var(--ca-surface));
  border-left-color: var(--ca-accent);
  margin-bottom: 0;
}
.docs-callout__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--ca-primary-strong);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}
.docs-callout--warning .docs-callout__icon {
  color: var(--ca-accent);
}
.docs-callout strong {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}
.docs-callout p {
  color: var(--ca-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 0;
}
.docs-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
.docs-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 28px;
}
.docs-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 35px;
  bottom: 0;
  width: 1px;
  background: var(--ca-border);
}
.docs-step__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ca-primary-strong);
  background: var(--ca-bg);
  border: 1px solid color-mix(in srgb, var(--ca-primary-strong) 48%, var(--ca-border));
  border-radius: 50%;
  font-size: 12px;
  font-weight: 750;
}
.docs-step__body {
  padding-top: 5px;
}
.docs-step__body h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 5px;
}
.docs-step__body p {
  color: var(--ca-muted);
  margin: 0;
}
.docs-complete {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: color-mix(in srgb, var(--ca-success) 7%, var(--ca-surface));
  border: 1px solid color-mix(in srgb, var(--ca-success) 35%, var(--ca-border));
  border-radius: 10px;
  padding: 16px;
  margin-top: 4px;
}
.docs-complete__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--ca-success);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
}
.docs-complete strong {
  display: block;
  font-size: 13.5px;
}
.docs-complete p {
  color: var(--ca-muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 3px 0 0;
}
.docs-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0;
}
.docs-path {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 190px;
  color: var(--ca-text);
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 10px;
  padding: 18px;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.docs-path:hover {
  color: var(--ca-text);
  border-color: color-mix(in srgb, var(--ca-primary-strong) 45%, var(--ca-border));
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
  transform: translateY(-2px);
}
.docs-path__label {
  color: var(--ca-primary-strong);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.docs-path > strong {
  font-size: 15px;
  line-height: 1.35;
}
.docs-path p {
  color: var(--ca-muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 0 18px;
}
.docs-path__action {
  color: var(--ca-primary-strong);
  font-size: 11.5px;
  font-weight: 650;
  margin-top: auto;
}
.docs-api-table {
  max-width: 100%;
  overflow-x: auto;
}
.docs-api-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}
.docs-api-table th:first-child,
.docs-api-table td:first-child {
  width: 34%;
}
.docs-endpoint-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ca-border);
  border-radius: 8px;
  margin: 16px 0 24px;
  font-size: 13.5px;
}
.docs-endpoint-table th,
.docs-endpoint-table td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--ca-border);
}
.docs-endpoint-table tbody tr:last-child td {
  border-bottom: 0;
}
.docs-endpoint-table thead th {
  color: var(--ca-muted);
  background: var(--ca-surface2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

pre[data-code-block] {
  position: relative;
  background: #111318;
  color: #f5f4ef;
  border: 1px solid #242832;
  border-radius: 8px;
  padding: 20px 18px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 14px 0 24px;
}
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: 1180px) {
  .docs-layout.container {
    grid-template-columns: 220px minmax(0, 780px);
    gap: 40px;
  }
  .docs-on-page {
    display: none;
  }
}

@media (max-width: 800px) {
  .docs-layout.container {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 20px 64px;
  }
  .docs-sidebar {
    display: none;
  }
  .docs-mobile-nav {
    display: block;
    margin-bottom: 26px;
  }
  .docs-mobile-nav details {
    border: 1px solid var(--ca-border);
    border-radius: 9px;
    background: var(--ca-surface);
  }
  .docs-mobile-nav summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    color: var(--ca-text);
    font-size: 13px;
    font-weight: 650;
    padding: 13px 15px;
  }
  .docs-mobile-nav summary::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--ca-muted);
    border-bottom: 1.5px solid var(--ca-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s;
  }
  .docs-mobile-nav details[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }
  .docs-mobile-nav details[open] summary {
    border-bottom: 1px solid var(--ca-border);
  }
  .docs-mobile-nav .docs-nav {
    gap: 18px;
    padding: 16px 14px 18px;
  }
  .docs-mobile-nav .docs-nav__group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 8px;
  }
  .docs-mobile-nav .docs-nav__label {
    grid-column: 1 / -1;
    padding-inline: 8px;
  }
  .docs-breadcrumbs {
    margin-bottom: 26px;
  }
  .docs-hero h1 {
    font-size: clamp(34px, 8vw, 44px);
  }
  .docs-requirements,
  .docs-paths {
    grid-template-columns: 1fr;
  }
  .docs-requirement {
    border-right: 0;
    border-bottom: 1px solid var(--ca-border);
  }
  .docs-requirement:last-child {
    border-bottom: 0;
  }
  .docs-path {
    min-height: 0;
  }
  .docs-endpoint-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .docs-layout.container {
    padding-inline: 18px;
  }
  .docs-mobile-nav .docs-nav__group {
    grid-template-columns: 1fr;
  }
  .docs-hero {
    padding-bottom: 30px;
  }
  .docs-hero h1 {
    font-size: 34px;
  }
  .docs-hero > p {
    font-size: 15px;
  }
  .docs-section,
  .docs-section--first {
    padding-block: 44px;
  }
  .docs-main h2 {
    font-size: 24px;
  }
  .docs-complete {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .docs-complete .btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
  pre[data-code-block] {
    margin-inline: -4px;
  }
}
}

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

/* Contact ("Talk to us") page: the form sits in a centered card, matching
   the account/signup card treatment rather than a bare document. */
.early-access-page {
  max-width: 588px;
  margin-inline: auto;
}
.early-access-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-xl);
  padding: 34px 34px 30px;
  box-shadow: 0 24px 60px -30px rgba(17, 24, 39, 0.24);
}
.early-access-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.early-access-lead {
  color: var(--ca-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.early-access-card .notice {
  margin: 0 0 22px;
}
.early-access-next {
  margin-top: 30px;
  padding-inline: 4px;
}

.early-access-form {
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}
/* Inside the card the form is full-width and the CTA spans it. */
.early-access-card .early-access-form {
  margin: 0;
  max-width: none;
}
.early-access-card .early-access-form .btn {
  align-self: stretch;
  justify-content: center;
  margin-top: 4px;
}
.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);
}

/* Shared by the public site and the standalone account app. */
.ca-claude{min-width:0;padding:28px;border:1px solid var(--ca-border);border-radius:16px;background:var(--ca-surface);color:var(--ca-text);text-align:left}
.ca-claude__head{display:flex;align-items:flex-start;gap:16px}
.ca-claude__mark{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:12px;background:var(--ca-surface2);color:var(--ca-primary-strong);font-size:24px}
.ca-claude__title{margin:0;font-size:23px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.ca-claude__intro{max-width:64ch;margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--ca-muted)}
.ca-claude__steps{display:flex;flex-wrap:wrap;gap:8px 24px;margin:22px 0;padding:0;list-style:none;counter-reset:claude-step;font-size:13px;color:var(--ca-muted)}
.ca-claude__steps li{counter-increment:claude-step;display:flex;align-items:center;gap:8px}
.ca-claude__steps li::before{content:counter(claude-step);font-size:12px;font-weight:600;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--ca-border);border-radius:50%;color:var(--ca-text)}
.ca-claude__actions{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:18px}
.ca-claude__copy{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--ca-primary-strong);border-radius:8px;padding:11px 16px;background:var(--ca-primary-strong);color:var(--ca-surface);font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;cursor:pointer}
.ca-claude__copy svg{width:16px;height:16px;flex-shrink:0}
.ca-claude__link{font-size:14px;font-weight:500;color:var(--ca-primary-strong)}
.ca-claude__preview{display:block;min-width:0;margin:22px 0 0}
.ca-claude__label{display:block;margin-bottom:8px;font-size:13px;font-weight:500;color:var(--ca-muted)}
.ca-claude__prompt{scrollbar-width:thin;scrollbar-color:var(--ca-muted) var(--ca-surface2)}
.ca-claude .ca-claude__prompt{display:block;box-sizing:border-box;width:100%;min-width:0;height:260px;min-height:160px;max-height:520px;resize:vertical;overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;margin:0;padding:16px;border:1px solid var(--ca-border);border-radius:8px;background:var(--ca-surface2);color:var(--ca-text);font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
.ca-claude__status{margin:10px 0 0;font-size:13px;color:var(--ca-muted);line-height:1.5}
.ca-claude__status:empty{display:none}
.ca-claude__note{margin:16px 0 0;color:var(--ca-muted);font-size:12px;line-height:1.5}
.ca-claude__select{margin-top:16px;max-width:100%}
.ca-claude__select label{display:block;font-size:13px;margin-bottom:6px;color:var(--ca-muted)}
.ca-claude__select select{max-width:100%;width:360px;padding:9px;border:1px solid var(--ca-border);border-radius:8px;background:var(--ca-surface);color:var(--ca-text);font:inherit}
.ca-claude__description{max-width:64ch;margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ca-muted)}
.ca-claude :focus-visible{outline:2px solid var(--ca-primary-strong);outline-offset:3px}
@media(max-width:639px){.ca-claude{padding:20px}.ca-claude__head{gap:12px}.ca-claude__title{font-size:21px}.ca-claude__steps{display:grid;gap:10px}.ca-claude__copy{width:100%}.ca-claude .ca-claude__prompt{height:240px;padding:12px;font-size:12px}}