/*
  Pocketwire marketing site, docs and legal pages.
  Depends on tokens.css. No build step, no framework.
*/

/* ------------------------------------------------------------------ */
/* 1. Base                                                             */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss03";
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

::selection {
  background: var(--selection);
}

img,
svg {
  display: block;
  max-width: 100%;
}

svg {
  flex-shrink: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--text-1);
  color: var(--bg);
  font-weight: var(--fw-semibold);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--lg {
  width: 24px;
  height: 24px;
}

.mono {
  font-family: var(--font-mono);
}

.text-gradient {
  background: var(--gradient-spark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.logo-spark {
  fill: var(--accent);
}

/* ------------------------------------------------------------------ */
/* 2. Buttons                                                          */
/* ------------------------------------------------------------------ */

.btn {
  --btn-h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out),
    transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn:focus-visible {
  outline-offset: 3px;
  border-radius: var(--r-full);
}

.btn .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-3) var(--ease-out);
}

.btn:hover .icon--arrow {
  transform: translateX(3px);
}

.btn--sm {
  --btn-h: 36px;
  padding: 0 14px;
  font-size: 0.8125rem;
}

.btn--lg {
  --btn-h: 50px;
  padding: 0 26px;
  font-size: var(--fs-base);
}

.btn--primary {
  background-color: var(--btn-primary-bg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  color: var(--btn-primary-fg);
  box-shadow: var(--btn-primary-shadow);
}

.btn--primary:hover {
  background-color: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
}

.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1);
}

.btn--secondary:hover {
  background: var(--btn-secondary-bg-hover);
  box-shadow: inset 0 0 0 1px var(--line-3), var(--shadow-1);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text-2);
}

.btn--ghost:hover {
  color: var(--text-1);
  background: var(--btn-secondary-bg-hover);
}

.btn--block {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* 3. Navigation                                                       */
/* ------------------------------------------------------------------ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out),
    backdrop-filter var(--dur-3) var(--ease-out);
}

.site-nav.is-scrolled,
.site-nav.is-open {
  background: var(--overlay);
  border-bottom-color: var(--line-1);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  padding: 6px 4px;
  margin-left: -4px;
  color: var(--text-1);
  border-radius: var(--r-sm);
}

.site-nav__brand .logo {
  width: auto;
  height: 26px;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav__links a {
  padding: 8px 12px;
  border-radius: var(--r-full);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--text-1);
  background: var(--btn-secondary-bg-hover);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
}

.site-nav__toggle:hover {
  background: var(--btn-secondary-bg-hover);
}

/* Without JavaScript the menu cannot open; the footer carries every link. */
html:not(.js) .site-nav__toggle {
  display: none !important;
}

.site-nav__toggle .icon-close,
.site-nav.is-open .site-nav__toggle .icon-menu {
  display: none;
}

.site-nav.is-open .site-nav__toggle .icon-close {
  display: block;
}

.site-nav__mobile {
  border-bottom: 1px solid var(--line-1);
  background: var(--bg);
  box-shadow: var(--shadow-3);
}

.site-nav__mobile[hidden] {
  display: none;
}

.site-nav__mobile-inner {
  display: grid;
  gap: 4px;
  padding-block: 12px 20px;
}

.site-nav__mobile a:not(.btn) {
  display: block;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-1);
  color: var(--text-1);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.site-nav__mobile .btn {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .site-nav__links,
  .site-nav__signin {
    display: none;
  }

  .site-nav__toggle {
    display: inline-flex;
  }
}

@media (min-width: 901px) {
  .site-nav__mobile {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .site-nav__cta {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* 4. Shared section scaffolding                                       */
/* ------------------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-head {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--accent-glow);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-display);
  color: var(--text-1);
}

.h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

.lead {
  max-width: 62ch;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

.muted {
  color: var(--text-3);
}

.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}

.card {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-1), var(--highlight);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--neutral-soft);
  box-shadow: inset 0 0 0 1px var(--neutral-line);
}

.badge--accent {
  color: var(--accent-text);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.badge--warn {
  color: var(--warn);
  background: var(--warn-soft);
  box-shadow: inset 0 0 0 1px var(--warn-line);
}

.badge--danger {
  color: var(--danger);
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 1px var(--danger-line);
}

.badge--info {
  color: var(--info);
  background: var(--info-soft);
  box-shadow: inset 0 0 0 1px var(--info-line);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Scroll reveal (only hides content once JS is running) */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal-i="1"] { --reveal-i: 1; }
[data-reveal-i="2"] { --reveal-i: 2; }
[data-reveal-i="3"] { --reveal-i: 3; }
[data-reveal-i="4"] { --reveal-i: 4; }
[data-reveal-i="5"] { --reveal-i: 5; }
[data-reveal-i="6"] { --reveal-i: 6; }
[data-reveal-i="7"] { --reveal-i: 7; }

/* ------------------------------------------------------------------ */
/* 5. Hero                                                             */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 104px);
  padding-bottom: clamp(56px, 7vw, 112px);
  isolation: isolate;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: calc(-1 * var(--nav-h)) 0 0;
  z-index: -1;
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 28%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 55% at 50% 28%, #000 25%, transparent 75%);
}

.hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 30% at 74% 66%, var(--glow-spark), transparent 70%),
    radial-gradient(34% 28% at 26% 70%, var(--glow-agent), transparent 70%),
    radial-gradient(50% 40% at 50% 0%, var(--glow-cyan), transparent 70%);
}

.hero__copy {
  display: grid;
  justify-items: center;
  text-align: center;
}

.announce {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 28px;
  padding: 5px 14px 5px 5px;
  border-radius: var(--r-full);
  background: var(--btn-secondary-bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.announce:hover {
  color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--line-3);
}

.announce__tag {
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.announce__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announce .icon {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-3) var(--ease-out);
}

.announce:hover .icon {
  transform: translateX(2px);
}

.hero__title {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--text-1);
}

.hero__line {
  display: inline;
  background: var(--gradient-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__line--accent {
  background: var(--gradient-spark);
  -webkit-background-clip: text;
  background-clip: text;
  /* room for descenders inside the clipped background */
  padding-bottom: 0.08em;
}

@media (min-width: 520px) {
  .hero__line {
    display: block;
  }
}

.hero__lead {
  max-width: 40rem;
  margin-top: 24px;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  letter-spacing: -0.006em;
  text-wrap: pretty;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 28px;
  list-style: none;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero__meta .icon {
  width: 16px;
  height: 16px;
  color: var(--accent-text);
}

@media (max-width: 440px) {
  .hero__ctas {
    display: grid;
    width: 100%;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .hero__meta {
    display: grid;
    justify-content: center;
    justify-items: start;
  }
}

/* ------------------------------------------------------------------ */
/* 6. Hero stage + animation                                           */
/* ------------------------------------------------------------------ */

.hero__stage {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
}

.hero-stage {
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  container-type: inline-size;
}

.hero-stage::before {
  /* soft floor under the stage */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-spark), transparent);
  filter: blur(24px);
  opacity: 0.8;
  z-index: -1;
}

.hero-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-svg--tall {
  display: none;
  max-width: 440px;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}

@container (max-width: 699px) {
  .hero-svg--wide {
    display: none;
  }

  .hero-svg--tall {
    display: block;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 760px) {
    .hero-svg--wide {
      display: none;
    }

    .hero-svg--tall {
      display: block;
    }
  }
}

.hero-stage__pause {
  position: absolute;
  right: 4px;
  bottom: -44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.hero-stage__pause:hover {
  color: var(--text-1);
  background: var(--btn-secondary-bg-hover);
}

.hero-stage__pause .icon {
  width: 14px;
  height: 14px;
}

.hero-stage__pause .icon-play,
.hero-anim.is-paused .hero-stage__pause .icon-pause {
  display: none;
}

.hero-anim.is-paused .hero-stage__pause .icon-play {
  display: block;
}

.hero-stage__pause[hidden] {
  display: none;
}

/* --- SVG paint (agent window follows the theme, the phone is always dark) --- */
.hero-svg text {
  font-family: var(--font-sans);
}

.hp-t { fill: var(--text-1); }
.hp-panel { fill: var(--surface-1); stroke: var(--line-2); stroke-width: 1; }
.hp-sep { fill: none; stroke: var(--line-1); stroke-width: 1; }
.hp-avatar-star { fill: #fff; }
.hp-t-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.hp-chip { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1; }
.hp-chip-dot { fill: var(--accent); }
.hp-t-chip { font-size: 12px; font-weight: 600; fill: var(--accent-text); }
.hp-bubble { fill: var(--surface-3); }
.hp-bubble-agent { fill: var(--surface-2); }
.hp-t-body { font-size: 15px; font-weight: 450; }
.hp-typing-dot { fill: var(--text-3); }
.hp-t-reply { font-size: 15px; fill: var(--text-2); }
.hp-raised { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1; }
.hp-icon-tile { fill: #090c0f; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.hp-mark-body { fill: #f1f3f5; }
.hp-mark-spark { fill: #45f0a8; }
.hp-t-mono { font-family: var(--font-mono) !important; font-size: 14px; font-weight: 600; }
.hp-t-meta { font-size: 12.5px; fill: var(--text-3); }
.hp-t-quote { font-size: 12.5px; fill: var(--text-2); font-style: italic; }
.hp-badge-wait { fill: var(--warn-soft); stroke: var(--warn-line); stroke-width: 1; }
.hp-badge-wait-dot { fill: var(--warn); }
.hp-t-badge { font-size: 12px; font-weight: 600; }
.hp-t-wait { fill: var(--warn); }
.hp-badge-done { fill: var(--ok-soft); stroke: var(--ok-line); stroke-width: 1; }
.hp-badge-done-tick,
.hp-check-tick { fill: none; stroke: var(--accent-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-t-done { fill: var(--accent-text); }
.hp-check-bg { fill: var(--ok-soft); }
.hp-input { fill: var(--bg-2); stroke: var(--line-2); stroke-width: 1; }
.hp-t-placeholder { font-size: 14px; fill: var(--text-3); }
.hp-send { fill: var(--surface-3); }
.hp-send-arrow { fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hx-phone .hp-t { fill: #edf0f3; }
.hp-phone { fill: #161c21; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; }
.hp-screen { fill: #090d10; }
.hp-camera { fill: #000; }
.hp-t-status { font-size: 13px; font-weight: 600; }
.hp-status-icons { fill: #edf0f3; }
.hp-batt { fill: none; stroke: rgba(237, 240, 243, 0.6); stroke-width: 1.1; }
.hp-t-clock { font-family: var(--font-display) !important; font-size: 54px; font-weight: 500; letter-spacing: -0.02em; }
.hx-phone .hp-t-clock { fill: #eaf0f3; }
.hx-phone .hp-t-date { font-size: 12.5px; font-weight: 500; fill: #a7b0ba; }
.hp-notif { fill: #1a2227; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.hx-phone .hp-t-app { font-size: 10px; font-weight: 650; letter-spacing: 0.06em; fill: #a7b0ba; }
.hx-phone .hp-t-now { font-size: 11px; fill: #8a939e; }
.hx-phone .hp-t-ntitle { font-size: 14.5px; font-weight: 650; }
.hx-phone .hp-t-ntitle-sm { font-size: 13.5px; }
.hx-phone .hp-t-nbody { font-size: 13px; fill: #c9d1d9; font-weight: 450; }
.hp-btn-reject { fill: rgba(255, 255, 255, 0.08); }
.hx-phone .hp-t-reject { font-size: 13px; font-weight: 600; }
.hp-btn-send { fill: #45f0a8; }
.hx-phone .hp-t-send { font-size: 13px; font-weight: 650; fill: #04130c; }
.hx-tap { fill: none; stroke: #ffffff; stroke-width: 2; }
.hp-ncheck-bg { fill: rgba(69, 240, 168, 0.16); }
.hp-ncheck-tick { fill: none; stroke: #45f0a8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-phone .hp-t-sent { font-size: 13px; font-weight: 600; fill: #45f0a8; }
.hp-home { fill: rgba(255, 255, 255, 0.35); }
.hp-shortcut-bg { fill: rgba(255, 255, 255, 0.08); }
.hp-shortcut-icon { fill: none; stroke: rgba(237, 240, 243, 0.75); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.hw-base { fill: none; stroke: var(--line-3); stroke-width: 1.5; }
.hw-glow { fill: none; stroke: var(--accent); stroke-opacity: 0.16; stroke-width: 8; stroke-linecap: round; }
.hw-lit { fill: none; stroke: var(--accent); stroke-opacity: 0.7; stroke-width: 1.5; stroke-dasharray: 1 1; }
.hw-trail { fill: none; stroke: #7cffcb; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.16 1.4; stroke-dashoffset: 0.16; }
.hw-port { fill: var(--bg); stroke: var(--line-3); stroke-width: 1.2; }
.hw-port-dot { fill: var(--accent); }
.hw-pulse-core { fill: #f2fff9; }

/* --- Static frame: no JS, or reduced motion --- */
.hero-anim .hx-typing,
.hero-anim .hx-final,
.hero-anim .hx-badge-done,
.hero-anim .hx-sent,
.hero-anim .hx-delivered-label,
.hero-anim .hx-tap,
.hero-anim .hw-pulse,
.hero-anim .hw-trail {
  opacity: 0;
}

.hero-anim .hw-lit {
  stroke-dashoffset: 0;
}

/* --- Animated timeline: hero.js adds .is-animated, then .s1 ... .s10 --- */
.hero-anim.is-animated .hx {
  opacity: 0;
  transition: opacity 460ms var(--ease-out), transform 700ms var(--ease-out);
}

.hero-anim.is-animated .hx-user,
.hero-anim.is-animated .hx-tool,
.hero-anim.is-animated .hx-final,
.hero-anim.is-animated .hx-reply {
  transform: translateY(8px);
}

.hero-anim.is-animated .hx-notif {
  transform: translateY(-14px) scale(0.97);
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.hero-anim.is-animated .hw-lit {
  stroke-dashoffset: 1;
}

.hero-anim.is-animated .hw-glow,
.hero-anim.is-animated .hw-port-dot,
.hero-anim.is-animated .hp-screen-glow {
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}

.hero-anim.is-animated .hp-screen-glow {
  opacity: 0.35;
}

.hero-anim.is-animated.s1 .hx-user { opacity: 1; transform: none; }
.hero-anim.is-animated.s2 .hx-typing { opacity: 1; }
.hero-anim.is-animated.s2 .hp-typing-dot { animation: hx-typing 1s var(--ease-in-out) infinite; }
.hero-anim.is-animated.s2 .hp-typing-dot-1 { animation-delay: 0.15s; }
.hero-anim.is-animated.s2 .hp-typing-dot-2 { animation-delay: 0.3s; }
.hero-anim.is-animated.s3 .hx-typing { opacity: 0; }
.hero-anim.is-animated.s3 .hx-reply,
.hero-anim.is-animated.s3 .hx-tool { opacity: 1; transform: none; }
.hero-anim.is-animated.s3 .hx-badge-wait { opacity: 1; }
.hero-anim.is-animated.s3 .hw-port-dot-a { opacity: 1; }
.hero-anim.is-animated.s4 .hw-glow { opacity: 1; }
.hero-anim.is-animated.s5 .hx-notif { opacity: 1; transform: none; }
.hero-anim.is-animated.s5 .hx-actions { opacity: 1; }
.hero-anim.is-animated.s5 .hw-port-dot-b { opacity: 1; }
.hero-anim.is-animated.s5 .hp-screen-glow { opacity: 1; }
.hero-anim.is-animated.s6 .hx-tap { animation: hx-tap 700ms var(--ease-out) forwards; }
.hero-anim.is-animated.s6 .hx-send-btn { animation: hx-press 320ms var(--ease-out); }
.hero-anim.is-animated.s7 .hx-actions { opacity: 0; }
.hero-anim.is-animated.s7 .hx-sent,
.hero-anim.is-animated.s7 .hx-sent-label { opacity: 1; }
.hero-anim.is-animated.s7 .hp-ncheck-tick { stroke-dashoffset: 0; }
.hero-anim.is-animated.s9 .hx-sent-label,
.hero-anim.is-animated.s9 .hx-badge-wait { opacity: 0; }
.hero-anim.is-animated.s9 .hx-delivered-label,
.hero-anim.is-animated.s9 .hx-badge-done { opacity: 1; }
.hero-anim.is-animated.s10 .hx-final { opacity: 1; transform: none; }
.hero-anim.is-animated.s10 .hp-check-tick { stroke-dashoffset: 0; }

.hero-anim.is-animated .hp-ncheck-tick,
.hero-anim.is-animated .hp-check-tick {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 520ms 120ms var(--ease-out);
}

.hx-send-btn {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.hx-tap {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Paused by the visitor: freeze running keyframe animations too */
.hero-anim.is-paused *,
.hero-anim.is-paused *::before,
.hero-anim.is-paused *::after {
  animation-play-state: paused !important;
}

@keyframes hx-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(-3px); opacity: 1; }
}

@keyframes hx-tap {
  0% { opacity: 0.85; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes hx-press {
  0% { transform: scale(1); }
  40% { transform: scale(0.93); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* 7. "Works with" strip                                               */
/* ------------------------------------------------------------------ */

.strip {
  padding-block: 8px clamp(56px, 6vw, 88px);
}

.strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 40px;
}

.strip__label {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
  list-style: none;
}

.strip__list li {
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  opacity: 0.8;
}

.strip__list li.strip__any {
  color: var(--text-3);
  font-weight: var(--fw-medium);
}

/* ------------------------------------------------------------------ */
/* 8. How it works                                                     */
/* ------------------------------------------------------------------ */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  counter-reset: step;
}

.steps__wire {
  position: absolute;
  top: 40px;
  left: calc(16.66% + 6px);
  right: calc(16.66% + 6px);
  height: 2px;
  border-radius: 2px;
  background: var(--line-2);
  overflow: hidden;
  pointer-events: none;
}

.steps__wire::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--pw-cyan));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1600ms var(--ease-in-out) 300ms;
}

.steps.is-in .steps__wire::after,
html:not(.js) .steps__wire::after {
  transform: scaleX(1);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-1), var(--highlight);
}

.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-3);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: box-shadow 500ms var(--ease-out), color 500ms var(--ease-out);
}

.step.is-in .step__num {
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 0 5px var(--accent-soft), 0 0 22px var(--accent-glow);
  transition-delay: calc(var(--reveal-i, 0) * 500ms + 300ms);
}

.step .h3 {
  margin-bottom: 8px;
}

.step p {
  color: var(--text-2);
  font-size: 0.9375rem;
}

.step__visual {
  margin-top: auto;
  padding-top: 24px;
}

.vg {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-1);
  padding: 18px;
  min-height: 176px;
  display: grid;
  align-content: center;
  gap: 14px;
}

.vg__label {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.vg-code {
  display: flex;
  justify-content: center;
  gap: 0.26em;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-size: clamp(0.8125rem, 6.5cqi, 1.375rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  color: var(--text-1);
}

.vg-code span {
  display: grid;
  place-items: center;
  width: 1.45em;
  height: 1.8em;
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.vg-code .vg-code__dash {
  width: auto;
  background: none;
  box-shadow: none;
  color: var(--text-3);
}

.vg-term {
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.vg-term .p {
  color: var(--text-3);
  user-select: none;
}

.vg-term .ok {
  color: var(--accent-text);
}

.vg-field {
  display: grid;
  gap: 6px;
}

.vg-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 0 3px var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-1);
  overflow: hidden;
  white-space: nowrap;
}

.vg-input::after {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--accent);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

.vg-scopes {
  display: grid;
  gap: 6px;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--text-2);
}

.vg-scopes li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vg-scopes .icon {
  width: 14px;
  height: 14px;
  color: var(--accent-text);
}

.vg-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #1a2227;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  color: #edf0f3;
}

.vg-note__app {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a7b0ba;
}

.vg-note__app .mark {
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 5px;
  background: #090c0f;
  color: #f1f3f5;
}

.vg-note__app .mark .logo-spark {
  fill: #45f0a8;
}

.vg-note__app span:last-child {
  margin-left: auto;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #8a939e;
}

.vg-note__title {
  font-size: 0.875rem;
  font-weight: 650;
}

.vg-note__body {
  font-size: 0.8125rem;
  color: #c9d1d9;
  line-height: 1.45;
}

.vg-note__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.vg-note__actions span {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
}

.vg-note__actions .send {
  background: #45f0a8;
  color: #04130c;
}

.vg-phone-screen {
  background: radial-gradient(120% 80% at 80% 0%, rgba(69, 240, 168, 0.18), transparent 60%), #090d10;
}

.vg-delivered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.vg-phone-screen .vg-delivered {
  color: #45f0a8;
}

@media (max-width: 960px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }

  .steps__wire {
    top: 40px;
    bottom: 40px;
    left: 39px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .steps__wire::after {
    background: linear-gradient(180deg, var(--accent), var(--pw-cyan));
    transform: scaleY(0);
    transform-origin: center top;
  }

  .steps.is-in .steps__wire::after,
  html:not(.js) .steps__wire::after {
    transform: scaleY(1);
  }
}

/* ------------------------------------------------------------------ */
/* 9. Platforms                                                        */
/* ------------------------------------------------------------------ */

.platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.platform {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-1), var(--highlight);
  overflow: hidden;
  transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

.platform:hover {
  box-shadow: inset 0 0 0 1px var(--line-2), var(--highlight), var(--shadow-2);
}

.platform__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.platform__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-1);
}

.platform__icon .icon {
  width: 22px;
  height: 22px;
}

.platform p {
  color: var(--text-2);
  font-size: 0.9375rem;
}

.platform__foot {
  margin-top: auto;
  padding-top: 8px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.platform--android {
  grid-row: span 2;
  background:
    radial-gradient(90% 60% at 100% 100%, var(--glow-spark), transparent 70%),
    var(--surface-1);
}

.platform--clients {
  grid-column: span 2;
}

.platform__art {
  position: relative;
  margin: 12px -28px -28px;
  padding: 0 28px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

.mini-phone {
  width: 190px;
  height: 236px;
  padding: 8px 8px 0;
  border-radius: 34px 34px 0 0;
  background: #161c21;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 -10px 40px -10px var(--accent-glow);
  transform: translateY(16px);
}

.mini-phone__screen {
  height: 100%;
  padding: 30px 10px 0;
  border-radius: 27px 27px 0 0;
  background: radial-gradient(110% 70% at 80% 0%, rgba(69, 240, 168, 0.2), transparent 60%), #090d10;
}

.client-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  list-style: none;
}

.client-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.client-chips li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.platforms-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.platforms-note .icon {
  margin-top: 2px;
  color: var(--info);
}

.platforms-note strong {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
}

@media (max-width: 960px) {
  .platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform--android {
    grid-row: auto;
    grid-column: span 2;
  }

  .platform--clients {
    grid-column: span 2;
  }
}

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

  .platform--android,
  .platform--clients {
    grid-column: auto;
  }

  .platform {
    padding: 24px;
  }

  .platform__art {
    margin: 8px -24px -24px;
  }
}

/* ------------------------------------------------------------------ */
/* 10. Safety bento                                                    */
/* ------------------------------------------------------------------ */

.section--safety::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 50% at 15% 10%, var(--glow-spark), transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}

.section--safety {
  isolation: isolate;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.tile {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-1), var(--highlight);
  overflow: hidden;
  isolation: isolate;
}

.tile::before {
  /* pointer spotlight */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--accent-soft), transparent 45%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.tile:hover::before {
  opacity: 1;
}

.tile--wide {
  grid-column: span 2;
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  border-radius: 11px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-text);
}

.tile__icon .icon {
  width: 18px;
  height: 18px;
}

.tile p {
  color: var(--text-2);
  font-size: 0.9375rem;
}

.tile__art {
  margin-top: auto;
  padding-top: 14px;
}

.policy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-1);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--text-3);
  text-align: center;
}

.policy span {
  padding: 8px 6px;
  border-radius: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.policy .is-on {
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1);
  color: var(--text-1);
}

.meter {
  display: grid;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-3);
}

.meter__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.meter__row strong {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.meter__bar {
  height: 6px;
  border-radius: 6px;
  background: var(--surface-3);
  overflow: hidden;
}

.meter__bar span {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--pw-cyan));
}

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-1);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--text-1);
}

.switch__track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 22px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  flex-shrink: 0;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform var(--dur-4) var(--ease-spring), background-color var(--dur-3) var(--ease-out);
}

.tile:hover .switch__track {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 1px var(--danger-line);
}

.tile:hover .switch__track::after {
  transform: translateX(16px);
  background: var(--danger);
}

.audit {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.audit th {
  padding: 0 10px 8px 0;
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

.audit td {
  padding: 9px 10px 9px 0;
  border-top: 1px solid var(--line-1);
  color: var(--text-2);
  white-space: nowrap;
}

.audit td:first-child,
.audit th:first-child {
  padding-left: 0;
}

.audit td:last-child,
.audit th:last-child {
  padding-right: 0;
  text-align: right;
}

.audit .mono {
  color: var(--text-1);
  font-size: 0.75rem;
}

.audit .badge {
  height: 22px;
  padding: 0 8px;
  font-size: var(--fs-2xs);
}

.fingerprint {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-1);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--text-3);
  overflow: hidden;
}

.fingerprint div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}

.fingerprint b {
  color: var(--text-1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fingerprint .strike {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--danger);
}

.plain-talk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
  padding: 22px 24px;
  border-radius: var(--r-xl);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.plain-talk__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--info-soft);
  box-shadow: inset 0 0 0 1px var(--info-line);
  color: var(--info);
}

.plain-talk h3 {
  margin-bottom: 6px;
}

.plain-talk p {
  color: var(--text-2);
  font-size: 0.9375rem;
}

.plain-talk a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.plain-talk a:hover {
  text-decoration-color: var(--accent);
}

@media (max-width: 1040px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .tile--wide {
    grid-column: auto;
  }

  .tile {
    min-height: 0;
  }

  .audit .hide-sm {
    display: none;
  }

  .plain-talk {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* 11. Developers / MCP                                                */
/* ------------------------------------------------------------------ */

.dev {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.dev__copy .section-head {
  margin-bottom: 32px;
}

.url-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1);
}

.url-box__label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.url-box code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-1);
  font-size: 0.9375rem;
}

.url-box code .accent {
  color: var(--accent-text);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-1);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  flex-shrink: 0;
}

.copy-btn:hover {
  background: var(--line-3);
}

.copy-btn .icon {
  width: 15px;
  height: 15px;
}

.copy-btn .icon-check,
.copy-btn.is-copied .icon-copy {
  display: none;
}

.copy-btn.is-copied {
  color: var(--accent-text);
}

.copy-btn.is-copied .icon-check {
  display: block;
}

.tools {
  display: grid;
  gap: 2px;
  margin-top: 28px;
  list-style: none;
}

.tools li {
  display: grid;
  grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
  gap: 4px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line-1);
}

.tools li:last-child {
  border-bottom: 1px solid var(--line-1);
}

.tools code {
  color: var(--text-1);
  font-size: 0.875rem;
  font-weight: 500;
}

.tools span {
  color: var(--text-2);
  font-size: 0.9375rem;
}

@media (max-width: 520px) {
  .tools li {
    grid-template-columns: minmax(0, 1fr);
  }
}

.transcript {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-3);
  overflow: hidden;
}

.transcript__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-1);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.transcript__bar .agent-dot {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--agent-1), var(--agent-2));
}

.transcript__bar .badge {
  margin-left: auto;
}

.transcript__body {
  display: grid;
  gap: 14px;
  padding: 20px 18px 22px;
}

.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.msg--user {
  justify-self: end;
  border-bottom-right-radius: 6px;
  background: var(--surface-3);
  color: var(--text-1);
}

.msg--agent {
  justify-self: start;
  padding-inline: 0;
  color: var(--text-2);
}

.tool-call {
  display: grid;
  border-radius: var(--r-lg);
  background: var(--code-bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
}

.tool-call__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-1);
  font-size: 0.8125rem;
  color: var(--text-2);
}

.tool-call__head code {
  color: var(--text-1);
  font-weight: 600;
}

.tool-call__head .badge {
  margin-left: auto;
}

.tool-call pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.78125rem;
  line-height: 1.65;
  color: var(--text-2);
  -webkit-overflow-scrolling: touch;
}

.tool-call pre + pre {
  border-top: 1px dashed var(--line-2);
}

.tool-call--inline .tool-call__head {
  border-bottom: 0;
}

.tok-key { color: var(--info); }
.tok-str { color: var(--accent-text); }
.tok-num { color: var(--warn); }
.tok-com { color: var(--text-3); }

.approval-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.approval-line::before,
.approval-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

.approval-line span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.approval-line .icon {
  width: 14px;
  height: 14px;
  color: var(--accent-text);
}

.config {
  margin-top: 28px;
}

.code {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--code-bg);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 4px 6px 4px 16px;
  border-bottom: 1px solid var(--line-1);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.code pre {
  margin: 0;
  padding: 14px 16px 16px;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-1);
  tab-size: 2;
}

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

/* ------------------------------------------------------------------ */
/* 12. Pricing                                                         */
/* ------------------------------------------------------------------ */

.billing-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin: 8px 0 0;
  padding: 4px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  min-width: 0;
}

.billing-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.billing-toggle label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-full);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-3) var(--ease-out);
}

.billing-toggle input:checked + label {
  color: var(--text-1);
}

.billing-toggle input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.billing-toggle__save {
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}

.billing-toggle__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--r-full);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1);
  transition: transform var(--dur-4) var(--ease-out);
}

#billing-annual:checked ~ .billing-toggle__thumb {
  transform: translateX(100%);
}

html:not(.js) .billing-toggle {
  display: none;
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--r-2xl);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-1), var(--highlight);
}

.plan--featured {
  background:
    radial-gradient(120% 60% at 50% 0%, var(--accent-soft), transparent 60%),
    var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--accent-line), var(--highlight), 0 30px 80px -40px var(--accent-glow);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan__name {
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.plan__desc {
  margin-top: 6px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 24px;
}

.plan__amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}

.plan__period {
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.plan__note {
  min-height: 1.5em;
  margin-top: 8px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.plan__note strong {
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
}

.plan .btn {
  margin-top: 22px;
}

.plan__features {
  display: grid;
  gap: 11px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-1);
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-2);
}

.plan__features li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.plan__features .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent-text);
}

.plan__features strong {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
}

.plan__features .plan__plus {
  display: block;
  color: var(--text-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.pricing-foot {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin-top: 32px;
  text-align: center;
}

.pricing-promise {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 14px 20px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--text-1);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-align: left;
}

.pricing-promise .icon {
  color: var(--accent-text);
  flex-shrink: 0;
}

.pricing-foot__talk {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.link {
  color: var(--text-1);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}

.link:hover {
  text-decoration-color: var(--accent);
}

@media (max-width: 960px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin-inline: auto;
  }

  .plan--featured {
    order: -1;
  }
}

/* ------------------------------------------------------------------ */
/* 13. FAQ                                                             */
/* ------------------------------------------------------------------ */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.faq .section-head {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  margin-bottom: 0;
}

.faq__list {
  border-top: 1px solid var(--line-2);
}

.faq__item {
  border-bottom: 1px solid var(--line-2);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--text-1);
  border-radius: var(--r-sm);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--accent-text);
}

.faq__icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  flex-shrink: 0;
  transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform var(--dur-4) var(--ease-out);
}

.faq__item[open] .faq__icon {
  transform: rotate(180deg);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__a {
  padding: 0 48px 24px 0;
  color: var(--text-2);
}

.faq__a p + p {
  margin-top: 10px;
}

.faq__a a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.faq__a code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 0.85em;
}

.faq__item::details-content {
  height: 0;
  overflow: clip;
  transition: height 420ms var(--ease-out), content-visibility 420ms allow-discrete;
}

.faq__item[open]::details-content {
  height: auto;
}

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

  .faq .section-head {
    position: static;
  }

  .faq__a {
    padding-right: 0;
  }
}

/* ------------------------------------------------------------------ */
/* 14. Final CTA                                                       */
/* ------------------------------------------------------------------ */

.cta-final {
  padding-block: 0 var(--section-y);
}

.cta-final__card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 64px);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(60% 80% at 50% 120%, var(--glow-spark), transparent 70%),
    radial-gradient(40% 50% at 50% 0%, var(--glow-cyan), transparent 70%),
    var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--highlight);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.cta-final__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000 10%, transparent 70%);
}

.beacon {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 8px;
  border-radius: 26px;
  background: linear-gradient(160deg, #172026, #07090b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 50px -20px var(--accent-glow);
}

.beacon .mark {
  width: 48px;
  height: 48px;
  color: #f1f3f5;
}

.beacon .mark .logo-spark {
  fill: #45f0a8;
}

.beacon__ring {
  /* centred on the spark of the 48px mark: (22.4, 6.6) x 1.5 + 18px inset */
  position: absolute;
  top: 27.9px;
  left: 51.6px;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(69, 240, 168, 0.7);
  opacity: 0;
  animation: beacon 2.6s var(--ease-out) infinite;
}

.beacon__ring--2 {
  animation-delay: 1.3s;
}

@keyframes beacon {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}

.cta-final .h2 {
  max-width: 16ch;
}

.cta-final .lead {
  max-width: 46ch;
}

.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 440px) {
  .cta-final__actions {
    display: grid;
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* 15. Footer                                                          */
/* ------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--line-1);
  padding-block: 56px 32px;
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.site-footer__brand .logo {
  width: auto;
  height: 24px;
  color: var(--text-1);
}

.site-footer__brand p {
  max-width: 30ch;
  margin-top: 14px;
  color: var(--text-3);
}

.site-footer h2 {
  margin-bottom: 14px;
  color: var(--text-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.site-footer ul {
  display: grid;
  gap: 10px;
  list-style: none;
}

.site-footer ul a {
  color: var(--text-2);
  transition: color var(--dur-2) var(--ease-out);
}

.site-footer ul a:hover {
  color: var(--text-1);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-1);
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.theme-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.theme-switch button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.theme-switch button:hover {
  color: var(--text-1);
}

.theme-switch button[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--text-1);
}

.theme-switch .icon {
  width: 15px;
  height: 15px;
}

html:not(.js) .theme-switch {
  display: none;
}

@media (max-width: 860px) {
  .site-footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* 16. Docs                                                            */
/* ------------------------------------------------------------------ */

.docs-hero {
  padding-block: clamp(40px, 6vw, 72px) 8px;
  border-bottom: 1px solid var(--line-1);
}

.docs-hero .h2 {
  margin-top: 14px;
}

.docs-hero .lead {
  margin-top: 14px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.docs {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding-block: 40px var(--section-y);
}

.docs-nav {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.docs-nav__title {
  margin-bottom: 10px;
  padding-left: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.docs-nav ul {
  display: grid;
  gap: 2px;
  list-style: none;
}

.docs-nav a {
  position: relative;
  display: block;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.docs-nav a:hover {
  color: var(--text-1);
  background: var(--btn-secondary-bg-hover);
}

.docs-nav a.is-active {
  color: var(--text-1);
  background: var(--surface-2);
}

.docs-nav a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.docs-nav ul ul {
  margin: 2px 0 6px 12px;
  padding-left: 8px;
  border-left: 1px solid var(--line-1);
}

.docs-nav ul ul a {
  padding-block: 5px;
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  color: var(--text-3);
}

.docs-nav ul ul a:hover {
  color: var(--text-1);
}

.docs-nav ul ul a.is-active {
  background: none;
  color: var(--text-1);
}

.docs-nav ul ul a.is-active::before {
  left: -9px;
  top: 5px;
  bottom: 5px;
}

.docs-toc {
  display: none;
}

.docs-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.docs-toc summary::-webkit-details-marker {
  display: none;
}

.docs-toc summary .icon {
  transition: transform var(--dur-3) var(--ease-out);
}

.docs-toc[open] summary .icon {
  transform: rotate(180deg);
}

.docs-toc ul {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  list-style: none;
}

.docs-toc a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.docs-toc a:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--text-1);
}

@media (max-width: 900px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 24px;
  }

  .docs-nav {
    display: none;
  }

  .docs-toc {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + 8px);
    z-index: 5;
  }
}

/* Long-form content: docs + legal */
.prose {
  min-width: 0;
  max-width: 760px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}

.prose > * + * {
  margin-top: 16px;
}

.prose section + section {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line-1);
}

.prose section > * + * {
  margin-top: 16px;
}

.prose h2 {
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.prose h3 {
  margin-top: 36px;
  color: var(--text-1);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.prose h3 + * {
  margin-top: 10px;
}

.prose h4 {
  margin-top: 24px;
  color: var(--text-1);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
}

.prose strong {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
}

.prose a:not(.btn) {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}

.prose a:not(.btn):hover {
  text-decoration-color: var(--accent);
}

.prose ul,
.prose ol {
  display: grid;
  gap: 8px;
  padding-left: 1.3em;
}

.prose li::marker {
  color: var(--text-3);
}

.prose :not(pre) > code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-1);
  color: var(--text-1);
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

.prose .code {
  margin-top: 16px;
}

.prose .code pre {
  white-space: pre;
}

.prose hr {
  height: 1px;
  border: 0;
  background: var(--line-1);
  margin-block: 32px;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-overflow-scrolling: touch;
}

.prose th,
.prose td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-1);
}

.prose th {
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-2);
}

.prose thead td {
  background: var(--bg-2);
}

.prose tr:last-child td {
  border-bottom: 0;
}

.prose td code {
  white-space: nowrap;
}

.steps-list {
  counter-reset: s;
  list-style: none;
  padding-left: 0 !important;
  gap: 20px !important;
}

.steps-list > li {
  position: relative;
  padding-left: 44px;
  counter-increment: s;
}

.steps-list > li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.steps-list > li > * + * {
  margin-top: 10px;
}

.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--info-soft);
  box-shadow: inset 0 0 0 1px var(--info-line);
  color: var(--text-2);
  font-size: 0.9375rem;
}

.callout > .icon {
  margin-top: 3px;
  color: var(--info);
}

.callout--warn {
  background: var(--warn-soft);
  box-shadow: inset 0 0 0 1px var(--warn-line);
}

.callout--warn > .icon {
  color: var(--warn);
}

.callout--ok {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.callout--ok > .icon {
  color: var(--accent-text);
}

.tabs {
  display: grid;
  gap: 0;
}

.tabs__list {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow-x: auto;
}

.tabs__list button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.tabs__list button[aria-selected="true"] {
  background: var(--surface-3);
  color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.tabs__panel {
  margin-top: 16px;
}

.tabs__panel[hidden] {
  display: none;
}

/* Without JavaScript every panel is shown, each under its own heading */
html:not(.js) .tabs__list {
  display: none;
}

.tabs__title {
  margin: 0 0 10px;
  color: var(--text-1);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
}

.js .tabs__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html:not(.js) .tabs__panel + .tabs__panel {
  margin-top: 28px;
}

.tool-ref {
  padding: 20px 22px;
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-1);
}

.tool-ref + .tool-ref {
  margin-top: 16px;
}

.tool-ref__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.tool-ref__head h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
}

.tool-ref__head .badge {
  height: 22px;
  font-size: var(--fs-2xs);
}

.tool-ref > * + * {
  margin-top: 12px;
}

.params {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0 !important;
  border-top: 1px solid var(--line-1);
}

.params li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-1);
  font-size: 0.9375rem;
}

.params code {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.params .type {
  display: block;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

@media (max-width: 560px) {
  .params li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Docs page layout details */
.docs-main {
  min-width: 0;
}

.docs-nav ul + .docs-nav__title {
  margin-top: 28px;
}

.docs-nav a code {
  font-size: 0.8125rem;
}

.docs-toc__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--text-3);
  font-weight: var(--fw-medium);
}

.docs-toc__current {
  overflow: hidden;
  color: var(--text-1);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .docs-toc {
    margin-bottom: 28px;
  }

  .docs-toc ul {
    box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-3);
  }

  /* room for the sticky "On this page" bar under the site nav */
  .docs .prose [id] {
    scroll-margin-top: 64px;
  }
}

.prose .tabs__panel > * + * {
  margin-top: 16px;
}

.prose .tabs__title {
  margin-top: 0;
}

.prose .tool-ref__head > * {
  margin: 0;
}

.prose .url-box code {
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: 0.9375rem;
  overflow-wrap: normal;
}

.prose .prompt {
  margin-inline: 0;
  margin-bottom: 0;
  padding: 14px 18px;
  border-radius: 18px 18px 6px 18px;
  background: var(--surface-3);
  color: var(--text-1);
  max-width: 34rem;
}

.prose tbody th {
  color: var(--text-1);
  font-size: inherit;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  background: none;
  white-space: nowrap;
}

.limits-table td {
  font-variant-numeric: tabular-nums;
}

/* Legal pages */
.legal {
  padding-block: clamp(40px, 6vw, 72px) var(--section-y);
}

.legal__head {
  max-width: 760px;
  margin-bottom: 40px;
}

.legal__head .h2 {
  margin-top: 14px;
}

.legal__meta {
  margin-top: 12px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.draft-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  max-width: 760px;
  margin-bottom: 40px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--warn-soft);
  box-shadow: inset 0 0 0 1px var(--warn-line);
  color: var(--text-1);
  font-size: 0.9375rem;
}

.draft-banner .icon {
  margin-top: 2px;
  color: var(--warn);
}

.draft-banner strong {
  font-weight: var(--fw-semibold);
}

.legal .prose section + section {
  margin-top: 40px;
  padding-top: 32px;
}

.legal .prose h2 {
  font-size: 1.375rem;
}

.toc-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0 !important;
}

.prose .toc-inline {
  display: flex;
}

.toc-inline a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-2) !important;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-decoration: none !important;
}

.toc-inline a:hover {
  color: var(--text-1) !important;
  box-shadow: inset 0 0 0 1px var(--line-3);
}

/* ------------------------------------------------------------------ */
/* 17. Motion preferences                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .beacon__ring,
  .vg-input::after {
    animation: none;
  }

  .btn:hover,
  .btn--primary:hover,
  .btn--secondary:hover {
    transform: none;
  }
}

/* Windows high contrast and other forced-colour modes: gradient text would
   turn invisible, so fall back to plain system text. */
@media (forced-colors: active) {
  .text-gradient,
  .hero__line,
  .hero__line--accent {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }

  .btn,
  .copy-btn,
  .site-nav__toggle,
  .hero-stage__pause {
    border: 1px solid ButtonText;
  }

  .billing-toggle__thumb {
    display: none;
  }

  .billing-toggle input:checked + label {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .billing-toggle input:focus-visible + label {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}

@media print {
  .site-nav,
  .hero__stage,
  .theme-switch,
  .docs-nav,
  .docs-toc {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}