/* Generated by build.mjs: public/css/site.css, then public/css/theme-salesforce-design-system.css.
   Edit those files, not this one. */

/* ConnectSMS marketing site
   ------------------------------------------------------------------------
   1. Fonts & tokens       8. Page hero            15. Code
   2. Base                 9. Fact bar             16. Roles & comparison
   3. Layout               10. Cards & grids       17. FAQ
   4. Type                 11. Split sections      18. CTA band
   5. Buttons & tags       12. Product mocks       19. Forms
   6. Header & nav         13. Hero demo           20. Articles
   7. Breadcrumbs          14. Flows & pipelines   21. Works wheel
                                                   22. Footer, lightbox, motion
                                                   23. Product recreations
                                                   24. Home & shared pieces
                                                   25. Product page pieces
                                                   26. Landing, pricing, contact
                                                   27. Assistant
   ------------------------------------------------------------------------ */

/* 1. Fonts & tokens ------------------------------------------------------ */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2");
}
:root {
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --bg-tint: #eef3ff;
  --surface: #ffffff;
  --text: #0a1a33;
  --text-2: #33415a;
  --muted: #56637b;
  /* Smallest text colour that still passes WCAG AA on --bg-soft. Decorative marks use --line-3. */
  --faint: #667085;
  --line: #e3e8f0;
  --line-2: #d3dae6;
  --line-3: #b4bdcc;

  --brand: #0b5cff;
  --brand-600: #0848cc;
  --brand-700: #0a3aa3;
  --brand-50: #eef3ff;
  --brand-100: #dbe6ff;
  /* The logo red: a single "signal" accent (like an unread dot), never a fill or a button. */
  --signal: #fd3f4f;
  --violet: #6b4cff;
  --violet-ink: #5b3fe0;
  --violet-50: #f1edff;
  --mint: #0f9d74;
  --mint-ink: #087556;
  --mint-50: #e3f7ef;
  --mint-100: #c6f0de;
  --amber: #a15c00;
  --amber-50: #fff3df;
  --red: #c0362c;
  --red-50: #fdeceb;

  --navy: #03234d;
  --stage: #050f22;
  --stage-2: #0a1a36;
  --stage-3: #12264a;
  --stage-fg: #eef3fb;
  --stage-muted: #93a3bd;
  --stage-line: rgba(255, 255, 255, 0.1);
  --stage-accent: #8fb8ff;

  /* The product itself: Salesforce Lightning-like greys and blues. */
  --app-bg: #f3f3f3;
  --app-line: #e5e5e5;
  --app-blue: #0176d3;
  --app-text: #181818;
  --app-muted: #5c5c5c;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  /* Elevation: an ambient contact shadow plus a soft key light, so surfaces sit on the page rather than float. */
  --shadow-xs: 0 1px 2px rgba(10, 26, 51, 0.06);
  --shadow-sm: 0 1px 2px rgba(10, 26, 51, 0.05), 0 2px 8px -2px rgba(10, 26, 51, 0.08);
  --shadow: 0 1px 2px rgba(10, 26, 51, 0.04), 0 4px 12px -4px rgba(10, 26, 51, 0.08), 0 18px 40px -18px rgba(10, 26, 51, 0.2);
  --shadow-lg: 0 1px 2px rgba(10, 26, 51, 0.04), 0 8px 20px -8px rgba(10, 26, 51, 0.1), 0 36px 72px -28px rgba(10, 26, 51, 0.32);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion: strong custom curves; UI stays under 300ms. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 160ms;
  --dur-fast: 180ms;
  --dur: 240ms;

  --header-h: 68px;
  --gutter: 24px;
  --section-y: clamp(72px, 10vw, 128px);
  color-scheme: light;
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --header-h: 60px;
  }
}

/* 2. Base ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img,
svg,
video {
  max-width: 100%;
}
img {
  display: block;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
/* No double-tap-zoom wait on controls; control labels aren't text people copy. */
a,
button,
summary,
label {
  touch-action: manipulation;
}
button,
.btn,
summary {
  -webkit-user-select: none;
  user-select: none;
}
/* The ring follows each control's own radius; only inline text links get a soft corner. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
a:not([class]):focus-visible,
.text-link:focus-visible,
.breadcrumbs a:focus-visible,
.footer-col a:focus-visible,
.toc a:focus-visible {
  border-radius: 4px;
}
.section--dark :focus-visible,
.cta-band :focus-visible,
.tour :focus-visible,
.menu-aside :focus-visible {
  outline-color: var(--stage-accent);
}
::selection {
  background: var(--brand-100);
}
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.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: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  background: var(--text);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
}
.skip-link:focus {
  top: 12px;
}

/* 3. Layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--mid {
  max-width: 1040px;
}
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--soft {
  background: var(--bg-soft);
}
.section--tint {
  background: linear-gradient(180deg, var(--bg-tint), var(--bg) 85%);
}

.section--tight {
  padding-block: clamp(48px, 7vw, 88px);
}
/* Dark "engine" sections: a cool key light from the top right so the dark reads as depth, not a flat fill. */
.section--dark {
  isolation: isolate;
  background: radial-gradient(70% 60% at 85% 0%, rgba(11, 92, 255, 0.18), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(107, 76, 255, 0.1), transparent 70%), var(--stage);
  color: var(--stage-fg);
  --text: var(--stage-fg);
  --text-2: #c9d4e6;
  --muted: var(--stage-muted);
  --line: var(--stage-line);
  --surface: var(--stage-2);
  --bg-soft: var(--stage-2);
}
.section--dark .eyebrow {
  color: var(--stage-accent);
}
.section--dark h2 em,
.section--dark h1 em {
  color: var(--stage-accent);
}
.stack > * + * {
  margin-top: var(--stack, 16px);
}
.grid {
  display: grid;
  gap: var(--gap, 20px);
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* 4. Type ---------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--text);
}
h1 em,
h2 em,
h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  /* The serif sets smaller than Geist at the same size; nudge it up so both lines share a cap height. */
  font-size: 1.04em;
  letter-spacing: -0.012em;
  color: var(--brand);
}
.display {
  font-size: clamp(2.7rem, 5.8vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.048em;
  font-weight: 640;
}
.display em {
  font-size: 1.07em;
  line-height: 0.9;
}
.h1 {
  font-size: clamp(2.3rem, 4.8vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.044em;
}
.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.038em;
}
.h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.026em;
}
.h4 {
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}
.lede {
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: var(--muted);
  text-wrap: pretty;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.875rem;
}
/* Section label: quiet text with a red "signal" dot, echoing the logo, instead of a pill on every section. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-600);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(253, 63, 79, 0.14);
}
.eyebrow:has(> .icon)::before {
  display: none;
}
.eyebrow .icon {
  width: 16px;
  height: 16px;
}
/* Badge variant: the one pill, used above the home headline. */
.eyebrow--badge {
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  color: var(--text-2);
  font-size: 0.8125rem;
}
.eyebrow--badge b {
  color: var(--text);
  font-weight: 600;
}
.eyebrow--badge {
  white-space: nowrap;
}
@media (max-width: 400px) {
  .eyebrow--badge {
    gap: 7px;
    padding-inline: 10px 12px;
    font-size: 0.75rem;
  }
}
.section-head {
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head > * + * {
  margin-top: 16px;
}
.section-head .eyebrow + * {
  margin-top: 14px;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .eyebrow {
  margin-inline: auto;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 600;
}
.text-link .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.text-link:hover {
  color: var(--brand-600);
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover .icon,
  .card--link:hover .text-link .icon {
    transform: translateX(3px);
  }
}
.section--dark .text-link {
  color: var(--stage-accent);
}
code,
kbd {
  font-family: var(--mono);
  font-size: 0.88em;
}
:not(pre) > code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.section--dark :not(pre) > code {
  background: rgba(255, 255, 255, 0.06);
}

/* 5. Buttons & tags ------------------------------------------------------ */

.btn {
  --btn-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: var(--btn-h);
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.9688rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease,
    transform var(--dur-press) var(--ease-out);
}
/* Press feedback on pointer-down, for mouse and touch alike. */
.btn:active {
  transform: scale(0.97);
}
.btn .icon {
  width: 18px;
  height: 18px;
}
.btn-sm {
  --btn-h: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
}
.btn-lg {
  --btn-h: 54px;
  padding: 0 26px;
  font-size: 1rem;
}
.btn-primary {
  background: var(--brand) linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 45%);
  border-color: var(--brand-600);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(8, 72, 204, 0.3), 0 10px 24px -10px rgba(11, 92, 255, 0.65);
}
.btn-primary:hover {
  background-color: var(--brand-600);
}
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-2);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  border-color: var(--line-3);
  background: #fbfcfe;
}
.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover {
  background: var(--bg-soft);
}
.section--dark .btn-secondary,
.btn-on-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--stage-fg);
  box-shadow: none;
}
.section--dark .btn-secondary:hover,
.btn-on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
}
.section--dark .btn-ghost {
  color: var(--stage-fg);
}
.section--dark .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}
.tag .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}
.tag--brand {
  background: var(--brand-50);
  color: var(--brand-600);
}
.tag--mint {
  background: var(--mint-50);
  color: var(--mint-ink);
}
.tag--amber {
  background: var(--amber-50);
  color: var(--amber);
}
.tag--red {
  background: var(--red-50);
  color: var(--red);
}
.tag--violet {
  background: var(--violet-50);
  color: var(--violet-ink);
}

/* 6. Header & nav -------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.35s var(--ease-out), background-color 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: rgba(211, 218, 230, 0.7);
  box-shadow: 0 8px 24px -18px rgba(10, 26, 51, 0.22);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.site-header.is-tucked {
  transform: translateY(-100%);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 680;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
  color: var(--text);
  flex: none;
}

.primary-nav {
  margin-left: 12px;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item {
  position: relative;
}
.nav-trigger,
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  background: none;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-trigger:hover,
.nav-link:hover,
.nav-trigger[aria-expanded="true"] {
  background: var(--bg-soft);
  color: var(--text);
}
.nav-link[aria-current="page"],
.nav-item.is-current > .nav-trigger {
  color: var(--brand);
}
.nav-trigger .icon {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}
.nav-trigger[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}
.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  width: max-content;
  max-width: min(720px, 92vw);
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  /* Grows from its trigger; closes faster than it opens. */
  transform-origin: 32px top;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 120ms ease, transform 120ms var(--ease-out), visibility 0s linear 120ms;
  display: grid;
  grid-template-columns: auto;
  gap: 8px;
}
.nav-menu.has-aside {
  grid-template-columns: minmax(0, 1fr) 240px;
}
.nav-trigger[aria-expanded="true"] + .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), visibility 0s;
}
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.menu-list--2 {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
.menu-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.menu-link:hover,
.menu-link[aria-current="page"] {
  background: var(--bg-soft);
}
.menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand);
  flex: none;
}
.menu-icon .icon {
  width: 18px;
  height: 18px;
}
.menu-text {
  display: grid;
  gap: 1px;
}
.menu-text strong {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.menu-text small {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.4;
}
.menu-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--stage-2), var(--stage));
  color: var(--stage-fg);
}
.menu-aside p {
  font-size: 0.875rem;
  color: var(--stage-muted);
  line-height: 1.5;
}
.menu-aside strong {
  display: block;
  font-size: 1rem;
  color: var(--stage-fg);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.menu-aside .text-link {
  color: var(--stage-accent);
  font-size: 0.875rem;
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-actions .btn-ghost {
  display: none;
}
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-toggle .icon {
  width: 20px;
  height: 20px;
}
.menu-toggle .icon-close {
  display: none;
}
.site-header.is-open .menu-toggle .icon-open {
  display: none;
}
.site-header.is-open .menu-toggle .icon-close {
  display: block;
}
.mobile-cta {
  display: none;
}

@media (min-width: 1201px) {
  .header-actions .btn-ghost {
    display: inline-flex;
  }
}

@media (max-width: 1080px) {
  .menu-toggle {
    display: inline-flex;
  }
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom));
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .site-header.is-open .primary-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .site-header.is-open {
    background: var(--bg);
    border-bottom-color: var(--line);
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-item {
    border-bottom: 1px solid var(--line);
  }
  .nav-trigger,
  .nav-link {
    width: 100%;
    height: 56px;
    justify-content: space-between;
    padding: 0 4px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
    border-radius: 0;
  }
  .nav-trigger:hover,
  .nav-link:hover,
  .nav-trigger[aria-expanded="true"] {
    background: none;
  }
  .nav-menu,
  .nav-menu.has-aside {
    position: static;
    width: auto;
    max-width: none;
    display: none;
    grid-template-columns: 1fr;
    padding: 0 0 16px;
    border: 0;
    box-shadow: none;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-trigger[aria-expanded="true"] + .nav-menu {
    display: grid;
  }
  .menu-list--2 {
    grid-template-columns: 1fr;
  }
  .menu-link {
    padding: 10px 4px;
  }
  .menu-aside {
    display: none;
  }
  .mobile-cta {
    display: grid;
    gap: 10px;
    margin-top: 24px;
  }
  .mobile-cta .btn {
    width: 100%;
  }
  .header-actions .btn-primary {
    display: none;
  }
  html.nav-open {
    overflow: hidden;
  }
}
@media (min-width: 560px) and (max-width: 1080px) {
  .header-actions .btn-primary {
    display: inline-flex;
  }
}

/* 7. Breadcrumbs --------------------------------------------------------- */

.breadcrumbs {
  font-size: 0.8125rem;
  color: var(--muted);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.breadcrumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--faint);
  border-top: 1.5px solid var(--faint);
  transform: rotate(45deg);
  margin-right: 4px;
}
.breadcrumbs a:hover {
  color: var(--text);
}
.breadcrumbs [aria-current="page"] {
  color: var(--text-2);
  font-weight: 500;
}

/* 8. Page hero (inner pages) --------------------------------------------- */

.page-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px);
  overflow: clip;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto 40%;
  height: 720px;
  background: radial-gradient(closest-side, rgba(11, 92, 255, 0.12), transparent 70%),
    radial-gradient(closest-side at 70% 60%, rgba(107, 76, 255, 0.08), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
/* A faint dot field behind the right-hand column, shared with the home hero. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(10, 26, 51, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 78% 35%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 70% at 78% 35%, #000 10%, transparent 72%);
  pointer-events: none;
}
.page-hero .breadcrumbs {
  margin-bottom: clamp(28px, 4vw, 48px);
}
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.page-hero-grid--solo {
  grid-template-columns: minmax(0, 860px);
}
.page-hero-grid--answer {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.page-hero-copy > * + * {
  margin-top: 20px;
}
.page-hero-copy .eyebrow + .h1 {
  margin-top: 16px;
}
.page-hero-copy .btn-row {
  margin-top: 32px;
}
.page-hero-copy .hero-answer {
  margin-top: 36px;
}
/* The quotable answer: a quiet card, never louder than the calls to action. */
.hero-answer {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-xs), var(--highlight);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.hero-answer > .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--brand);
}
.hero-answer strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-weight: 600;
}
.page-hero-aside .hero-answer {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--surface);
  box-shadow: var(--shadow), var(--highlight);
  font-size: 1rem;
}
.page-hero-aside .hero-answer strong {
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  margin-bottom: 8px;
}
/* Risk reducers under the primary call to action. */
.assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.page-hero-copy .assurance,
.home-hero-copy .assurance {
  margin-top: 18px;
}
.assurance li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.assurance .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
  color: var(--mint);
}
@media (max-width: 960px) {
  .page-hero-grid,
  .page-hero-grid--answer {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 9. Fact bar ------------------------------------------------------------ */

.facts {
  position: relative;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-soft), var(--surface));
}
.facts-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.facts-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 24px;
  line-height: 1.4;
}
.facts-list li + li {
  border-left: 1px solid var(--line);
}
/* The first column lines up with the page's text edge. */
.facts-list li:first-child {
  padding-left: 0;
}
.facts-list li > .icon {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--brand);
}
.facts-list li > .logo-mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
}
.facts-list li > .logo-mark--salesforce {
  width: 29px;
  height: 20px;
  margin-top: 4px;
}
/* Multicolour illustrations (Any object, Flow actions) carry more detail, so a touch larger. */
.facts-list li > .logo-mark--art {
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
.facts-list strong {
  display: block;
  font-size: 1.125rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  color: var(--text);
}
.facts-list span span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.875rem;
}
@media (max-width: 1024px) {
  .facts-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts-list li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .facts-list li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 560px) {
  .facts-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .facts-list li {
    padding: 16px 2px;
  }
  .facts-list li + li {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* The Salesforce + ConnectSMS + Twilio equation */
.stack-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.stack-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 0.9375rem;
}
/* White like its neighbours so the red ConnectSMS icon doesn't sit on blue; lifted to stay the centrepiece. */
.stack-chip--brand {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
  font-weight: 680;
}
.stack-chip--brand .logo-mark {
  width: 24px;
  height: 24px;
}
.stack-chip .icon {
  width: 18px;
  height: 18px;
}
.stack-chip .logo-mark {
  flex: none;
  width: 20px;
  height: 20px;
}
.stack-chip .logo-mark--salesforce {
  width: 29px;
  height: 20px;
}
.stack-op {
  color: var(--faint);
  font-weight: 500;
}
@media (max-width: 520px) {
  .stack-equation {
    gap: 8px;
  }
  .stack-op {
    display: none;
  }
}

/* 404 */
.not-found {
  padding-block: clamp(48px, 9vw, 120px);
}
.not-found .container > * + * {
  margin-top: 20px;
}
.not-found .eyebrow + .h1 {
  margin-top: 14px;
}
.not-found .chip-cloud {
  margin-top: 32px;
}
.not-found .btn {
  margin-top: 16px;
}

/* 10. Cards & grids ------------------------------------------------------ */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.2s ease, box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card > * + * {
  margin-top: 10px;
}
.card h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.card p {
  color: var(--muted);
  font-size: 0.9688rem;
  line-height: 1.6;
}
a.card:hover,
.card--link:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
/* Lift only where a real pointer hovers; on touch the lifted state would stick after a tap. */
@media (hover: hover) and (pointer: fine) {
  a.card:hover,
  .card--link:hover {
    transform: translateY(-2px);
  }
}
.card--link:active {
  transform: scale(0.99);
}
.card--link .text-link {
  margin-top: 18px;
}
/* The whole card is the link target, so the whole card shows the keyboard focus ring. */
.card-link-overlay:focus-visible {
  outline: none;
}
.card--link:has(.card-link-overlay:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.card-link-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(11, 92, 255, 0.08), var(--highlight);
  margin-bottom: 18px;
}
.card-icon .icon {
  width: 22px;
  height: 22px;
}
.card-icon--violet {
  background: var(--violet-50);
  color: var(--violet);
}
.card-icon--mint {
  background: var(--mint-50);
  color: var(--mint);
}
.card-icon--amber {
  background: var(--amber-50);
  color: var(--amber);
}
.card-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.pillars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.pillars > .card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
}
.pillars > .card--wide {
  grid-column: span 3;
}
.pillars .card .text-link {
  margin-top: auto;
  padding-top: 18px;
}
/* A product crop on a soft stage, fading out at the bottom edge. */
.pillar-visual {
  position: relative;
  height: 212px;
  margin: calc(-1 * clamp(22px, 2.4vw, 30px)) calc(-1 * clamp(22px, 2.4vw, 30px)) 24px;
  padding: 28px 32px 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: radial-gradient(120% 90% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, var(--bg-tint), var(--bg-soft) 70%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}
.pillar-visual .app {
  max-width: 440px;
  margin: 0 auto;
  box-shadow: var(--shadow);
  pointer-events: none;
}
.pillar-visual .mini .thread {
  gap: 3px;
  padding: 12px 14px;
}
.pillar-visual .mini .bubble {
  max-width: 88%;
}
.ib-mini .ib-views {
  padding: 10px 12px;
  border-bottom: 1px solid var(--app-line);
}
.ib-mini .ib-row:last-child {
  border-bottom: 0;
}
@media (hover: hover) and (pointer: fine) {
  .pillar-visual .app {
    transition: transform 400ms var(--ease-out);
  }
  .card--visual:hover .pillar-visual .app {
    transform: translateY(-4px);
  }
}
/* A full-width card lays out horizontally: icon, copy, then its points and link. */
.pillars > .card--full {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas: "icon title points" "icon text link";
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
}
.card--full > .card-icon {
  grid-area: icon;
  margin: 0;
}
.card--full > h3 {
  grid-area: title;
  margin: 0;
}
.card--full > p {
  grid-area: text;
  margin: 0;
}
.card--full > .pillar-points {
  grid-area: points;
  margin: 0;
  justify-content: flex-end;
}
.pillars > .card--full .text-link {
  grid-area: link;
  justify-self: end;
  align-self: end;
  margin: 0;
  padding: 0;
}
@media (max-width: 1024px) {
  .pillars > .card,
  .pillars > .card--wide {
    grid-column: span 3;
  }
}
@media (max-width: 860px) {
  .pillars > .card--full {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "icon title" "icon text" "icon points" "icon link";
  }
  .card--full > .pillar-points {
    justify-content: flex-start;
    margin-top: 8px;
  }
  .pillars > .card--full .text-link {
    justify-self: start;
    margin-top: 12px;
  }
}
@media (max-width: 680px) {
  .pillars {
    grid-template-columns: 1fr;
  }
  .pillars > .card,
  .pillars > .card--wide {
    grid-column: auto;
  }
  .pillar-visual {
    height: 184px;
    padding: 22px 18px 0;
  }
}
.feature-list {
  display: grid;
  /* --cols-max comes from the page (inline); the media queries below cap it with --cols. */
  grid-template-columns: repeat(var(--cols, var(--cols-max, 3)), minmax(0, 1fr));
  gap: 28px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.feature-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}
.feature-list .feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand);
}
.section--dark .feature-list .feature-icon {
  background: rgba(143, 184, 255, 0.1);
  color: var(--stage-accent);
}
.feature-list h3 {
  font-size: 1rem;
  letter-spacing: -0.012em;
  line-height: 1.35;
  margin-top: 2px;
}
.feature-list p {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-top: 4px;
  line-height: 1.55;
}
@media (max-width: 1024px) {
  .feature-list {
    --cols: 2;
  }
}
@media (max-width: 640px) {
  .feature-list {
    --cols: 1;
  }
}
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--text-2);
}
.checks li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--mint-50)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9d74' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.checks--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}
@media (max-width: 640px) {
  .checks--2 {
    grid-template-columns: 1fr;
  }
}
.section--dark .checks li::before {
  background-color: rgba(15, 157, 116, 0.18);
}
.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chip-cloud li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
}
.chip-cloud .icon {
  width: 15px;
  height: 15px;
  color: var(--brand);
}
/* When the chip is a link, the whole chip is the target. */
.chip-cloud li:has(> a:only-child) {
  padding: 0;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform var(--dur-press) var(--ease-out);
}
.chip-cloud li > a:only-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px 8px 14px;
  border-radius: inherit;
  color: var(--text-2);
}
.chip-cloud li:has(> a:only-child):hover {
  border-color: var(--brand-100);
  box-shadow: var(--shadow-sm);
}
.chip-cloud li:has(> a:only-child):hover a {
  color: var(--text);
}
.chip-cloud li:has(> a:only-child):active {
  transform: scale(0.97);
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-row > div {
  background: var(--surface);
  padding: 24px;
}
.stat-row strong {
  display: block;
  font-size: 1.75rem;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.stat-row span {
  color: var(--muted);
  font-size: 0.875rem;
}
@media (max-width: 760px) {
  .stat-row {
    --cols: 2;
  }
}

/* 11. Split sections ----------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.split--reverse {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.split--reverse > :first-child {
  order: 2;
}
.split--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split-copy > * + * {
  margin-top: 18px;
}
.split-copy .checks,
.split-copy .btn-row,
.split-copy .highlight {
  margin-top: 28px;
}
@media (max-width: 960px) {
  .split,
  .split--reverse,
  .split--even {
    grid-template-columns: minmax(0, 1fr);
  }
  .split--reverse > :first-child {
    order: 0;
  }
}
.highlight {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.highlight + .highlight {
  margin-top: 12px;
}
.highlight .card-icon {
  width: 44px;
  height: 44px;
  margin: 0;
}
.highlight h3 {
  font-size: 1rem;
  letter-spacing: -0.012em;
}
.highlight p {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-top: 4px;
  line-height: 1.55;
}
/* The stage product recreations sit on: a soft top light, a faint dot field and a hairline edge. */
.visual-frame {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    linear-gradient(165deg, var(--bg-tint), var(--bg-soft) 75%);
  border: 1px solid var(--line);
  box-shadow: var(--highlight);
  padding: clamp(16px, 3vw, 36px);
  overflow: hidden;
}
.visual-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(10, 26, 51, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000, transparent 75%);
  pointer-events: none;
}
.visual-frame--dark {
  background: radial-gradient(120% 90% at 20% 0%, var(--stage-3), var(--stage) 60%);
  border-color: var(--stage-line);
  box-shadow: none;
}
.visual-frame--dark::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}
.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--app-bg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
button.shot {
  cursor: zoom-in;
}
.shot img {
  width: 100%;
}

.shot-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(5, 15, 34, 0.8);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.shot-hint .icon {
  width: 13px;
  height: 13px;
}
.shot:hover .shot-hint,
.shot:focus-visible .shot-hint {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .shot-hint {
    opacity: 1;
    transform: none;
  }
}
figcaption.caption {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}

/* 12. Product mocks ------------------------------------------------------
   HTML recreations of real ConnectSMS UI. Lightning-like on purpose: the
   product lives in Salesforce. Never add controls the product lacks. */

.app {
  --text: var(--app-text);
  font-size: 13px;
  line-height: 1.45;
  color: var(--app-text);
  background: #fff;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #c9c9c9;
  background: #fff;
  color: var(--app-blue);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.app-btn--brand {
  background: var(--app-blue);
  border-color: var(--app-blue);
  color: #fff;
}
.app-btn--muted {
  background: #e5e5e5;
  border-color: #e5e5e5;
  color: #939393;
}
.app-btn .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}
.app-field {
  display: grid;
  gap: 4px;
}
.app-label {
  font-size: 12px;
  color: var(--app-muted);
}
.app-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #c9c9c9;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--app-text);
}
.app-input .icon {
  width: 14px;
  height: 14px;
  color: var(--app-muted);
}
.app-input .caret-down {
  margin-left: auto;
}
.app-input--area {
  display: block;
  min-height: 72px;
  line-height: 1.5;
}
.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: #eef4ff;
  color: #03234d;
  white-space: nowrap;
}
.app-pill--green {
  background: #acf3e4;
  color: #056764;
}
.app-pill--amber {
  background: #fdeeb4;
  color: #7a4d00;
}
.app-pill--red {
  background: #fddde3;
  color: #8e030f;
}
.app-pill--grey {
  background: #ececec;
  color: #444;
}
.app-pill .icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.6;
}
.app-meta {
  font-size: 11px;
  color: var(--app-muted);
}
.app-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: #ba0517;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}
.app-avatar--lg {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
}
.bubble--in {
  align-self: flex-start;
  background: #f3f3f3;
  color: var(--app-text);
  border-bottom-left-radius: 5px;
}
.bubble--out {
  align-self: flex-end;
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.bubble-meta {
  font-size: 10.5px;
  color: var(--app-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.bubble-meta--out {
  align-self: flex-end;
}
.bubble-meta .icon {
  width: 12px;
  height: 12px;
  color: var(--app-blue);
  stroke-width: 2.2;
}
.thread {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
}
.thread .bubble + .bubble-meta {
  margin-bottom: 8px;
}
.date-chip {
  align-self: center;
  margin: 6px 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3f3f3;
  font-size: 11px;
  color: var(--app-muted);
}

.counter-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--app-muted);
}
.merge {
  color: #0b5cab;
  background: #eef4ff;
  border-radius: 4px;
  padding: 0 3px;
  font-family: var(--mono);
  font-size: 0.92em;
}

/* Phone */
.phone {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 9 / 18.5;
  border-radius: 40px;
  padding: 10px;
  background: #0b1120;
  box-shadow: 0 0 0 2px #26324a, var(--shadow-lg);
}
.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 31px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 84px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0b1120;
  z-index: 2;
}
.phone-head {
  padding: 40px 14px 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
  font-size: 12px;
}
.phone-head strong {
  display: block;
  font-size: 12.5px;
}
.phone-head span {
  color: #8a8a8a;
  font-size: 10.5px;
}
.phone-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px;
}
.phone .bubble {
  font-size: 12px;
}
.phone .bubble--in {
  background: #e9e9eb;
}
.phone .bubble--out {
  background: #1f7aff;
}

/* 13. Home hero & live demo ---------------------------------------------- */

.home-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  overflow: clip;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(10, 26, 51, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
}
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1100px;
  height: 800px;
  right: -300px;
  top: -260px;
  background: radial-gradient(closest-side, rgba(11, 92, 255, 0.16), transparent 70%),
    radial-gradient(closest-side at 30% 70%, rgba(107, 76, 255, 0.1), transparent 70%);
  pointer-events: none;
}
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.home-hero-copy > * + * {
  margin-top: 22px;
}
.home-hero-copy .eyebrow--badge + .display {
  margin-top: 26px;
}
.home-hero-copy .lede {
  max-width: 34em;
}
.home-hero-copy .btn-row {
  margin-top: 34px;
}
@media (max-width: 1024px) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Demo: record + composer on the left, phone on the right, route between. */
.demo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px 196px;
  align-items: center;
  gap: 0;
}
.demo-record {
  position: relative;
  z-index: 1;
}
.record-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-line);
  background: #fff;
}
.record-head .record-type {
  font-size: 11px;
  color: var(--app-muted);
}
.record-head strong {
  display: block;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.record-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #a094ed;
  color: #fff;
  display: grid;
  place-items: center;
}
.record-icon .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.record-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 16px 12px;
  background: #fff;
  border-bottom: 1px solid var(--app-line);
}
.record-fields div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.record-fields span {
  font-size: 10.5px;
  color: var(--app-muted);
}
.record-fields b {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-body {
  background: var(--app-bg);
  padding: 12px;
}
.record-body .app {
  box-shadow: none;
}

.demo-caret {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  background: var(--app-blue);
  vertical-align: -2px;
  margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
.demo-route {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.route-line {
  position: absolute;
  left: -12px;
  right: -12px;
  top: 49%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px);
}
.route-packet {
  position: absolute;
  top: calc(49% - 5px);
  left: -12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(11, 92, 255, 0.18);
  opacity: 0;
}
.route-packet.is-out {
  animation: packetOut 1.4s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
.route-packet.is-in {
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(15, 157, 116, 0.18);
  animation: packetIn 1.4s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
@keyframes packetOut {
  0% {
    left: -12px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: calc(100% + 2px);
    opacity: 0;
  }
}
@keyframes packetIn {
  0% {
    left: calc(100% + 2px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: -12px;
    opacity: 0;
  }
}
.route-nodes {
  position: relative;
  display: grid;
  gap: 8px;
  z-index: 1;
}
.route-node {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--text-2);
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.route-node .icon {
  width: 20px;
  height: 20px;
}
.route-node .logo-mark {
  width: 24px;
  height: 24px;
}
.route-node.is-lit {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 4px rgba(11, 92, 255, 0.12);
}
.route-node-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  margin: -2px 0 6px;
}
.route-nodes {
  justify-items: center;
}
.demo-phone {
  justify-self: end;
  width: 100%;
}
.demo-phone .phone {
  max-width: 200px;
  margin-left: auto;
}
.demo-steps {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--faint);
}
.demo-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}
.demo-steps li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background-color 0.3s ease;
}
.demo-steps li.is-on {
  color: var(--text);
}
.demo-steps li.is-on::before {
  background: var(--brand);
}
.demo-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
}
.demo-replay:hover {
  color: var(--text);
}
.demo-replay .icon {
  width: 14px;
  height: 14px;
}
.demo [data-demo-reveal] {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.demo [data-demo-reveal].is-hidden {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

@media (max-width: 760px) {
  .demo {
    grid-template-columns: minmax(0, 1fr) 48px 130px;
  }
  .demo-phone .phone {
    max-width: 130px;
    border-radius: 26px;
    padding: 6px;
  }
  .demo-phone .phone-screen {
    border-radius: 21px;
  }
  .demo-phone .phone-head {
    padding-top: 28px;
  }
  .demo-phone .phone-notch {
    width: 48px;
    height: 14px;
    top: 6px;
  }
  .demo-phone .bubble {
    font-size: 10px;
    padding: 6px 8px;
  }
  .record-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .record-fields div:nth-child(3) {
    display: none;
  }
  .route-node {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .route-node .logo-mark {
    width: 20px;
    height: 20px;
  }
  .route-node-label {
    font-size: 9px;
  }
}
@media (max-width: 520px) {
  .demo {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .demo-route {
    flex-direction: row;
    height: auto;
  }
  .demo-route .route-line,
  .demo-route .route-packet {
    display: none;
  }
  .route-nodes {
    grid-auto-flow: column;
    align-items: center;
  }
  .demo-phone {
    justify-self: center;
  }
  .demo-phone .phone {
    max-width: 200px;
    margin: 0 auto;
  }
  .demo-steps {
    flex-wrap: wrap;
  }
}

/* 14. Flows & pipelines -------------------------------------------------- */

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.3;
}
.flow li .icon {
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.flow li + li {
  margin-left: 22px;
}
.flow li + li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 22px;
  height: 12px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%238792a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h13'/%3E%3Cpath d='m13 2 4 4-4 4'/%3E%3C/svg%3E")
    center / 22px 12px no-repeat;
}
.flow li.is-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.flow li.is-brand .icon {
  color: #fff;
}
.flow li.is-end {
  background: var(--mint-50);
  border-color: var(--mint-100);
  color: var(--mint-ink);
}
.flow li.is-end .icon {
  color: var(--mint);
}
.flow li.is-warn {
  background: var(--amber-50);
  border-color: #f6dfb5;
  color: var(--amber);
}
.flow li.is-warn .icon {
  color: var(--amber);
}
.flow li.is-muted {
  background: var(--bg-soft);
  color: var(--muted);
}
.flow--vertical {
  flex-direction: column;
  flex-wrap: nowrap;
}
.flow--vertical li + li {
  margin-left: 0;
  margin-top: 18px;
}
.flow--vertical li + li::before {
  left: 22px;
  top: -18px;
  width: 12px;
  height: 18px;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' fill='none' stroke='%238792a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2v12'/%3E%3Cpath d='m2 10 4 4 4-4'/%3E%3C/svg%3E")
    center / 12px 18px no-repeat;
}
.section--dark .flow li {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--stage-line);
  color: var(--stage-fg);
}
.section--dark .flow li .icon {
  color: var(--stage-accent);
}
.section--dark .flow li.is-brand {
  background: var(--brand);
  border-color: var(--brand);
}
.section--dark .flow li.is-end {
  background: rgba(15, 157, 116, 0.16);
  border-color: rgba(15, 157, 116, 0.35);
  color: #7fe3c3;
}
.section--dark .flow li.is-warn {
  background: rgba(240, 170, 60, 0.12);
  border-color: rgba(240, 170, 60, 0.3);
  color: #ffc978;
}
.workflow-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.workflow-card .flow {
  margin-top: auto;
}
.workflow-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.workflow-card > * + * {
  margin-top: 0;
}

/* Step rail: inside cards, a chain reads top to bottom on a thin line with the
   icons as nodes, so it never wraps mid-chain. */
.workflow-card .flow,
.pipeline-card .flow {
  position: relative;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
}
.workflow-card .flow::before,
.pipeline-card .flow::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.workflow-card .flow li,
.pipeline-card .flow li {
  gap: 12px;
  min-height: 36px;
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.workflow-card .flow li + li::before,
.pipeline-card .flow li + li::before {
  content: none;
}
.workflow-card .flow li .icon,
.pipeline-card .flow li .icon {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--brand);
}
.workflow-card .flow li.is-brand,
.pipeline-card .flow li.is-brand {
  background: none;
  color: var(--text);
  font-weight: 600;
}
.workflow-card .flow li.is-brand .icon,
.pipeline-card .flow li.is-brand .icon {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(11, 92, 255, 0.12);
}
.workflow-card .flow li.is-end,
.pipeline-card .flow li.is-end {
  background: none;
  color: var(--mint-ink);
  font-weight: 600;
}
.workflow-card .flow li.is-end .icon,
.pipeline-card .flow li.is-end .icon {
  border-color: var(--mint-100);
  background: var(--mint-50);
  color: var(--mint-ink);
}
.workflow-card .flow li.is-warn,
.pipeline-card .flow li.is-warn {
  background: none;
  color: var(--amber);
}
.workflow-card .flow li.is-warn .icon,
.pipeline-card .flow li.is-warn .icon {
  border-color: #f6dfb5;
  background: var(--amber-50);
  color: var(--amber);
}
.pipeline-card .pipeline {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px 32px;
  align-items: start;
}
.pipeline-card .pipeline-row {
  gap: 14px;
}

/* Status pipeline */
.pipeline {
  display: grid;
  gap: 22px;
}
.pipeline-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.pipeline-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 760px) {
  .pipeline-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Comparison */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.compare-col {
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  background: var(--surface);
}
.compare-col--good {
  background: linear-gradient(170deg, var(--bg-tint), var(--surface) 70%);
  border-color: var(--brand-100);
  box-shadow: var(--shadow);
}
.compare-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  margin-bottom: 22px;
}
.compare-col p {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.9375rem;
}
@media (max-width: 860px) {
  .compare {
    grid-template-columns: 1fr;
  }
}

/* 15. Code --------------------------------------------------------------- */

.code {
  border-radius: 14px;
  background: #0a1426;
  border: 1px solid #1c2a45;
  color: #d8e2f2;
  overflow: hidden;
  font-size: 0.8125rem;
}
.code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #1c2a45;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: #8ea0bd;
}
.code-head .tag {
  background: rgba(143, 184, 255, 0.12);
  color: var(--stage-accent);
  height: 20px;
  font-family: var(--font);
}
.code pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--mono);
  line-height: 1.7;
  tab-size: 2;
}
.code .k {
  color: #c792ea;
}
.code .s {
  color: #a5e3a1;
}
.code .c {
  color: #6f819f;
}
.code .t {
  color: #82b1ff;
}
.code .n {
  color: #f7c47a;
}
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.action-grid li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.action-grid .num {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--violet-50);
  color: var(--violet-ink);
}
.section--dark .action-grid .num {
  background: rgba(143, 184, 255, 0.1);
  color: var(--stage-accent);
}
.action-grid strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.action-grid span {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 760px) {
  .action-grid {
    grid-template-columns: 1fr;
  }
}

/* 16. Roles -------------------------------------------------------------- */

.roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.role {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 22px;
}
.role .card-icon {
  margin-bottom: 14px;
}
.role h3 {
  font-size: 1rem;
  letter-spacing: -0.012em;
}
.role p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}
.role code {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.72rem;
}
@media (max-width: 1024px) {
  .roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .roles {
    grid-template-columns: 1fr;
  }
}

/* 17. FAQ ---------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1a33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq summary::after {
  transition: transform var(--dur) var(--ease-out), background-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover::after {
    background-color: var(--brand-50);
  }
}
.faq summary:focus-visible {
  outline-offset: -2px;
  border-radius: 10px;
}
/* Accordions open smoothly where the browser can animate to height: auto. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq details {
      interpolate-size: allow-keywords;
    }
    .faq details::details-content {
      height: 0;
      overflow: clip;
      opacity: 0;
      transition: height var(--dur) var(--ease-out), opacity var(--dur) ease, content-visibility var(--dur) allow-discrete;
    }
    .faq details[open]::details-content {
      height: auto;
      opacity: 1;
    }
  }
}
.faq .answer {
  padding: 0 4px 24px;
  color: var(--text-2);
  max-width: 72ch;
}
.faq .answer > * + * {
  margin-top: 12px;
}
.faq .answer a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 18. CTA band ----------------------------------------------------------- */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--stage);
  color: var(--stage-fg);
  padding: clamp(44px, 7vw, 96px) clamp(22px, 6vw, 80px);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-lg);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 520px;
  background: radial-gradient(closest-side, rgba(11, 92, 255, 0.45), transparent 70%);
  z-index: -1;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000, transparent 80%);
}
.cta-band h2 {
  max-width: 18em;
  margin-inline: auto;
  color: var(--stage-fg);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.cta-band h2 em {
  color: var(--stage-accent);
}
/* Free-trial pill above the headline. */
.cta-band .cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--stage-fg);
  font-size: 0.875rem;
  font-weight: 600;
}
.cta-band .cta-kicker .icon {
  width: 16px;
  height: 16px;
  color: #6fe0bd;
}
.cta-band p {
  color: var(--stage-muted);
  max-width: 580px;
  margin: 18px auto 0;
  font-size: 1.0625rem;
}
.cta-band .btn-row {
  justify-content: center;
  margin-top: 34px;
}
.cta-band .fine {
  margin-top: 26px;
  font-size: 0.8125rem;
  color: var(--stage-muted);
}
.cta-band .assurance {
  justify-content: center;
  margin: 22px auto 0;
  max-width: none;
  color: #c9d4e6;
}
.cta-band .assurance .icon {
  color: #6fe0bd;
}

/* 19. Forms -------------------------------------------------------------- */

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 40px);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
.form-grid .span-2 {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
.field {
  display: grid;
  gap: 7px;
}
.field label,
.field .label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.field .optional {
  font-weight: 400;
  color: var(--faint);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: #fff;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.field select {
  padding-right: 40px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6780' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    right 14px center / 16px no-repeat;
}
.field textarea {
  min-height: 132px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(11, 92, 255, 0.14);
}
.field [aria-invalid="true"] {
  border-color: var(--red);
}
.field [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(192, 54, 44, 0.14);
}
.field-error {
  font-size: 0.8125rem;
  color: var(--red);
  min-height: 0;
}
.field-error:empty {
  display: none;
}
.field-hint {
  font-size: 0.8125rem;
  color: var(--muted);
}
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.captcha-field {
  margin-top: 18px;
}
/* The widget loads once the visitor starts the form; keep its 78px free so the form doesn't jump. */
.captcha-field .g-recaptcha {
  min-height: 78px;
}
/* The reCAPTCHA widget is a fixed 304px wide; shrink it to fit narrow phones. */
@media (max-width: 400px) {
  .captcha-field .g-recaptcha {
    transform: scale(0.8);
    transform-origin: 0 0;
    margin-bottom: -16px;
  }
}
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
}
.form-foot p {
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: 44ch;
}
.form-foot p a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.9375rem;
}
.form-status:empty {
  display: none;
}
.form-status.is-error {
  background: var(--red-50);
  color: var(--red);
}
.form-success {
  text-align: center;
  padding: clamp(24px, 5vw, 56px) 8px;
}
.form-success .card-icon {
  margin: 0 auto 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--mint-50);
  color: var(--mint);
}
.form-success h2 {
  font-size: 1.75rem;
}
.form-success p {
  margin: 12px auto 0;
  max-width: 44ch;
  color: var(--muted);
}
.form-success .btn-row {
  justify-content: center;
  margin-top: 28px;
}
.btn[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

/* 20. Articles ----------------------------------------------------------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .article-aside {
    display: none;
  }
}
.article-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 20px;
}
.toc {
  border-left: 1px solid var(--line);
  padding-left: 16px;
  font-size: 0.875rem;
}
.toc p {
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.toc a {
  color: var(--muted);
}
.toc a:hover,
.toc a.is-active {
  color: var(--brand);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--muted);
  font-size: 0.875rem;
}
.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 72ch;
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-top: 2.2em;
  letter-spacing: -0.03em;
}
.prose h3 {
  font-size: 1.25rem;
  margin-top: 1.8em;
  letter-spacing: -0.02em;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 0.7em;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li + li {
  margin-top: 0.45em;
}
.prose a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose strong {
  color: var(--text);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  display: block;
  overflow-x: auto;
}
.prose th,
.prose td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th {
  font-weight: 600;
  color: var(--text);
  background: var(--bg-soft);
}
.prose .code,
.prose .callout,
.prose figure {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
}
.callout {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--text-2);
}
.callout .icon {
  color: var(--brand);
  margin-top: 2px;
}
.callout--note {
  background: var(--amber-50);
  border-color: #f6dfb5;
}
.callout--note .icon {
  color: var(--amber);
}
.key-takeaways {
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.key-takeaways h2 {
  font-size: 1rem !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em;
}
.key-takeaways > p {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--muted);
}
/* Privacy policy and terms: the contact block closing each page. */
.legal-address {
  font-style: normal;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guide-card .tag {
  align-self: flex-start;
}

/* 21. Works wheel (product tour) ----------------------------------------- */

.tour {
  background: var(--stage);
  color: var(--stage-fg);
}
.tour-intro {
  padding-top: var(--section-y);
  padding-bottom: 8px;
  text-align: center;
}
.tour-intro .eyebrow {
  color: var(--stage-accent);
}
.tour-intro h2 {
  color: var(--stage-fg);
  margin-top: 18px;
}
.tour-intro h2 em {
  color: var(--stage-accent);
}
.tour-intro p {
  color: var(--stage-muted);
  margin: 16px auto 0;
  max-width: 560px;
}
.ww {
  --ww-cy: 50%;
  --ww-step: 62vh;
  position: relative;
  background: var(--stage);
  color: var(--stage-fg);
}
/* The tall scroll track only exists once the wheel is built. */
.ww.ww--ready {
  height: calc(100vh + var(--ww-steps, 7) * var(--ww-step));
}
@supports (height: 100svh) {
  .ww.ww--ready {
    --ww-step: 62svh;
    height: calc(100svh + var(--ww-steps, 7) * var(--ww-step));
  }
}
.ww--narrow {
  --ww-cy: 44%;
}
.ww-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.ww-stage {
  position: absolute;
  inset: 0;
  cursor: grab;
  outline: none;
  perspective-origin: 50% var(--ww-cy);
}
.ww.is-dragging .ww-stage {
  cursor: grabbing;
}
.ww-stage:focus-visible {
  outline: 2px solid rgba(238, 243, 251, 0.7);
  outline-offset: -8px;
  border-radius: 16px;
}
.ww-wheel {
  position: absolute;
  left: 50%;
  top: var(--ww-cy);
  transform-style: preserve-3d;
}
.ww-card {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.ww-face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--app-bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 60px -28px rgba(0, 0, 0, 0.85);
}
.ww-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.ww-shade {
  position: absolute;
  inset: 0;
  background: var(--stage);
  opacity: 0;
  pointer-events: none;
}
.ww-action {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(5, 15, 34, 0.8);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.ww-action svg {
  width: 12px;
  height: 12px;
}
.ww.is-open .ww-card.is-front {
  cursor: zoom-in;
}
.ww.is-open .ww-card.is-front:hover .ww-action {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .ww.is-open .ww-card.is-front .ww-action {
    opacity: 1;
    transform: none;
  }
}
.ww-label {
  position: absolute;
  left: 50%;
  top: var(--ww-cy);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  text-align: center;
}
.ww-label-text {
  font-family: var(--serif);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ww-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--stage-muted);
  letter-spacing: 0.02em;
}
.ww-hint svg {
  width: 16px;
  height: 16px;
}
@media (prefers-reduced-motion: no-preference) {
  .ww-hint svg {
    animation: nudge 1.8s ease-in-out infinite;
  }
}
@keyframes nudge {
  50% {
    transform: translateY(3px);
  }
}
.ww-title {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
}
.ww-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stage-accent);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}
.ww-name {
  font-family: var(--serif);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.ww-caption {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--stage-muted);
}
.ww-title-inner.is-swapping {
  animation: wwSwap 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes wwSwap {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.ww-index {
  position: absolute;
  top: 7.5%;
  right: 2.5%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
  line-height: 1.9;
}
.ww-index button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--stage-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 0.8em;
  transition: color 0.2s ease;
}
.ww-index button:hover,
.ww-index button.is-active {
  color: var(--stage-fg);
}
.ww-index button.is-active {
  font-weight: 500;
}
.ww-index-num {
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
  font-size: 0.85em;
}
.ww-index button:focus-visible {
  outline: 1px solid var(--stage-fg);
  outline-offset: 3px;
  border-radius: 4px;
}
.ww-count {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--stage-muted);
  font-variant-numeric: tabular-nums;
}
.ww--narrow .ww-index {
  display: none;
}
.ww--narrow.is-open .ww-count {
  display: block;
}
.ww--narrow .ww-title {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  padding: 72px 20px calc(28px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--stage) 58%, transparent);
}
.ww--narrow .ww-caption {
  font-size: 14.5px;
  max-width: 34em;
}
/* Static tour: what crawlers and no-JS visitors get, and what the wheel is built from. */
.ww-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px var(--gutter) var(--section-y);
  list-style: none;
}
.ww-fallback img {
  border-radius: 12px;
  background: var(--app-bg);
}
.ww-fallback h3 {
  color: var(--stage-fg);
  font-size: 1.125rem;
  margin-top: 14px;
}
.ww-fallback p {
  color: var(--stage-muted);
  font-size: 0.9375rem;
  margin-top: 6px;
}

/* 22. Footer, lightbox, motion ------------------------------------------ */

.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 88px) 0 32px;
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
}
.footer-brand p {
  color: var(--muted);
  margin-top: 16px;
  max-width: 34ch;
  font-size: 0.9375rem;
}
.footer-brand .btn {
  margin-top: 22px;
}
.footer-col h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer-col a {
  color: var(--text-2);
}
.footer-col a:hover {
  color: var(--brand);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer-bottom nav {
  display: flex;
  gap: 18px;
}
.footer-bottom a {
  color: var(--text-2);
}
.footer-bottom a:hover {
  color: var(--brand);
}
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(1400px, 94vw);
  max-width: none;
  max-height: 94vh;
  color: #fff;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(3, 8, 18, 0.84);
  backdrop-filter: blur(6px);
}
.lightbox img {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  background: var(--app-bg);
}
.lightbox figcaption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px 0;
}
.lb-title {
  font-weight: 600;
  font-size: 1rem;
}
.lb-caption {
  color: #b7c3d8;
  font-size: 0.875rem;
  margin-top: 4px;
  max-width: 70ch;
}
html:has(dialog[open]) {
  overflow: hidden;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 60ms);
  }
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 23. Product recreations -------------------------------------------------
   Lightning-like styling for the HTML recreations in src/mocks.mjs.        */

.app-avatar--sm { width: 24px; height: 24px; font-size: 9.5px; }
.app-avatar--xl { width: 44px; height: 44px; font-size: 15px; }
.app-avatar--unknown { background: #5a7ba3; }
.app-avatar--unknown .icon { width: 14px; height: 14px; color: #fff; }
.app-link { color: #0250d9; font-weight: 500; }
.app-btn--danger { background: #ba0517; border-color: #ba0517; color: #fff; }
.app-label i, .te-section-head > i { color: #ba0517; font-style: normal; margin-right: 2px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2e844a; box-shadow: 0 0 0 2px #ebf7e6; vertical-align: 1px; }
.st { display: inline-flex; align-items: center; gap: 3px; }
.st .icon { width: 13px; height: 13px; color: var(--app-blue); stroke-width: 2.2; }
.st--ok { color: var(--app-text); }
.bubble--out { background: #014486; }
.toggle { position: relative; display: inline-block; width: 36px; height: 20px; border-radius: 999px; background: #c9c9c9; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.is-on { background: var(--app-blue); }
.toggle.is-on::after { transform: translateX(16px); }
.is-hidden { opacity: 0; transform: translateY(6px) scale(.98); }
.recreation-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: .8125rem; color: var(--muted); text-align: center; text-wrap: balance; }
@media (max-width: 560px) { .recreation-note { font-size: .75rem; } }
.recreation-note .icon { width: 14px; height: 14px; }
.visual-frame .recreation-note { margin-bottom: -6px; }
.pillar-points { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pillar-points li { font-size: .75rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--text-2); }
.highlights { display: grid; gap: 12px; }

/* Record page component */
.rm { display: flex; flex-direction: column; border-radius: 12px; }
.rm-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--app-line); }
.rm-who { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; flex: 1; }
.rm-who strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-who span { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.rm-who .icon { width: 12px; height: 12px; }
.rm-status { display: grid; justify-items: end; gap: 5px; flex: none; }
.rm-updated { font-size: 11.5px; color: var(--app-muted); white-space: nowrap; }
@media (max-width: 520px) {
  .rm-label { display: none; }
  /* A written draft gets the full width; the phone and send buttons go below it. */
  .rm-bar:has(.rm-text:not(.is-placeholder):not(.rm-text--demo)) { flex-wrap: wrap; }
  .rm-bar:has(.rm-text:not(.is-placeholder):not(.rm-text--demo)) .rm-box { order: -1; flex-basis: 100%; }
  .rm-bar:has(.rm-text:not(.is-placeholder):not(.rm-text--demo)) .rm-send { margin-left: auto; }
}
.demo-record .rm-label { display: none; }
.rm-tools { display: flex; gap: 6px; }
.rm-round { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #c9c9c9; background: #fff; color: var(--app-blue); font-size: 13px; line-height: 1; flex: none; }
.rm-round .icon { width: 13px; height: 13px; }
.rm-round.is-on { background: var(--app-blue); border-color: var(--app-blue); color: #fff; }
.rm-menu { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; border: 1px solid #c9c9c9; color: var(--app-blue); font-weight: 700; }
.rm-history { min-height: 190px; justify-content: flex-end; background: #fff; }
.rm-history .bubble { transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.rm-history .bubble-meta { transition: opacity .45s ease; }
.rm-composer { padding: 8px 12px 12px; border-top: 1px solid var(--app-line); position: relative; }
.rm-slim { display: flex; align-items: center; gap: 5px; min-height: 0; font-size: 11px; color: var(--app-muted); }
.rm-slim:not(:empty) { min-height: 20px; margin-bottom: 4px; }
.rm-slim .icon { width: 13px; height: 13px; color: #2e844a; stroke-width: 2.4; }
.rm-bar { display: flex; align-items: flex-end; gap: 7px; }
.rm-phone { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #c9c9c9; border-radius: 8px; color: var(--app-blue); flex: none; }
.rm-phone .icon { width: 16px; height: 16px; }
.rm-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 8px 6px 11px; border: 1px solid #c9c9c9; border-radius: 8px; font-size: 13px; }
.rm-text { flex: 1; min-width: 0; line-height: 1.4; }
.rm-text.is-placeholder { color: #939393; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-icons { display: flex; align-items: center; gap: 8px; color: var(--app-muted); flex: none; }
.rm-icons .icon { width: 15px; height: 15px; }
.rm-send { display: inline-flex; height: 36px; border-radius: 999px; overflow: hidden; background: var(--app-blue); color: #fff; font-weight: 600; font-size: 12.5px; flex: none; transition: transform .15s ease, box-shadow .2s ease; }
.rm-send > span { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; }
.rm-send > span + span { padding: 0 8px; border-left: 1px solid rgba(255,255,255,.45); }
.rm-send .icon { width: 14px; height: 14px; }
.rm-send.is-pressed { transform: scale(.94); box-shadow: 0 0 0 4px rgba(1,118,211,.2); }
.rm-pop { margin-bottom: 10px; padding: 12px; border: 1px solid var(--app-line); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.12); background: #fff; }
.rm-pop-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.rm-pop-head .icon { width: 14px; height: 14px; color: var(--app-muted); }
.rm-pop-intro { font-size: 11.5px; color: var(--app-muted); margin: 4px 0 10px; }
.rm-preview-bubble { margin-left: auto; max-width: 90%; width: fit-content; padding: 8px 11px; border-radius: 12px 12px 4px 12px; background: #d8e6fe; font-size: 12.5px; }
.rm-pop-stats, .rm-pop-route { text-align: right; font-size: 11px; color: var(--app-muted); margin-top: 5px; }
.rm-blocked { margin-top: 10px; color: #ba0517; font-size: 11.5px; }
.rm-blocked ul { margin: 4px 0 0; padding-left: 16px; }
.rm-schedule { margin: 0 0 8px; padding: 6px 8px 8px; border: 1px solid var(--app-line); border-radius: 8px; background: #f8f9fb; }
.rm-schedule legend { font-size: 11.5px; font-weight: 700; padding: 0 4px; }
.rm-schedule-row { display: flex; gap: 6px; align-items: center; }
.rm-schedule-row .app-input { flex: 1; font-size: 12px; min-height: 30px; }
.rm-help .icon { width: 15px; height: 15px; color: var(--app-blue); }
.rm-schedule-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: var(--app-muted); }
.rm-link { color: #0250d9; font-weight: 600; }

/* Inbox */
.ib { display: grid; grid-template-columns: 300px minmax(0, 1fr) 250px; background: var(--app-bg); gap: 10px; padding: 10px; border-radius: 16px; }
.ib--two { grid-template-columns: 300px minmax(0, 1fr); }
.ib-list, .ib-convo, .ib-card { background: #fff; border: 1px solid var(--app-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ib-list { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ib-title { display: flex; align-items: center; gap: 8px; padding: 12px 12px 2px; }
.ib-title strong { font-size: 17px; }
.ib-brand { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--app-blue); color: #fff; }
.ib-brand .icon { width: 14px; height: 14px; }
.ib-title-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ib-title-actions .app-btn { height: 28px; font-size: 11.5px; padding: 0 10px; }
.ib-live { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px 48px; font-size: 11px; color: var(--app-muted); }
.ib-filters { display: grid; gap: 8px; padding: 6px 12px 10px; border-bottom: 1px solid var(--app-line); }
.ib-filters .app-input { font-size: 12px; min-height: 30px; }
.ib-views { display: flex; align-items: center; gap: 8px; }
.ib-views .app-label { font-weight: 700; color: var(--app-text); }
.ib-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.ib-seg b { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid #c9c9c9; color: var(--app-blue); font-size: 11px; }
.ib-seg b.on { background: var(--app-blue); border-color: var(--app-blue); color: #fff; }
.ib-seg i { font-style: normal; background: #f3f3f3; color: var(--app-text); border-radius: 999px; padding: 0 5px; font-size: 10px; }
.ib-seg--sm { padding: 0 12px 8px; }
.ib-row2 { display: grid; grid-template-columns: 90px 1fr; gap: 6px; align-items: end; }
.ib-search { color: #939393; }
.ib-items { list-style: none; margin: 0; padding: 0; }
.ib-row { display: flex; gap: 9px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--app-line); }
.ib-row.is-selected { background: #eef4ff; box-shadow: inset 3px 0 0 var(--app-blue); }
.ib-row-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.ib-line1 { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.ib-line1 strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-time { font-size: 10.5px; color: var(--app-muted); white-space: nowrap; }
.ib-row.is-unread .ib-time { color: var(--app-blue); font-weight: 700; }
.ib-line2 { font-size: 11px; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-line3 { display: flex; justify-content: space-between; gap: 6px; align-items: center; font-size: 11.5px; color: var(--app-muted); }
.ib-line3 span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-row.is-unread .ib-line3 span { color: var(--app-text); font-weight: 700; }
.ib-count { font-style: normal; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--app-blue); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.ib-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; color: var(--app-muted); }
.ib-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.ib-meta .icon { width: 11px; height: 11px; }
.ib-meta .app-pill { height: 18px; font-size: 10px; }
.ib-convo { display: flex; flex-direction: column; min-width: 0; }
.ib-convo-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--app-line); }
.ib-convo-who { display: grid; gap: 3px; min-width: 0; flex: 1; }
.ib-convo-who strong { font-size: 15px; }
.ib-convo-who > span { font-size: 11.5px; color: var(--app-muted); }
.ib-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ib-convo-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.ib-convo-actions .app-btn { height: 28px; font-size: 11.5px; }
.ib-convo-actions .app-btn .icon { width: 12px; height: 12px; }
.ib-thread { flex: 1; justify-content: flex-end; }
.ib-in { display: flex; align-items: flex-end; gap: 6px; }
.ib-in .bubble { max-width: 76%; }
.ib-in-meta { margin-left: 30px; }
.ib-composer { padding: 10px 14px 12px; border-top: 1px solid var(--app-line); display: grid; gap: 6px; }
.ib-route { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 11px; color: var(--app-text); }
.ib-route b { color: var(--app-muted); font-weight: 400; margin-right: 3px; }
.ib-route .icon { width: 12px; height: 12px; color: var(--app-blue); vertical-align: -2px; }
.ib-textarea { min-height: 54px; padding: 8px 10px; border: 1px solid #c9c9c9; border-radius: 6px; color: #939393; font-size: 12.5px; }
.ib-meter { text-align: right; font-size: 10.5px; color: var(--app-muted); }
.ib-tools { display: flex; align-items: center; gap: 6px; }
.ib-tools .app-btn { height: 28px; font-size: 11.5px; }
.ib-tools .app-btn .icon { width: 12px; height: 12px; }
.ib-send { margin-left: auto; height: 30px; }
.ib-details { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ib-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; }
.ib-card-head > .icon { margin-left: auto; width: 13px; height: 13px; color: var(--app-blue); }
.ib-card-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eef4ff; color: var(--app-blue); flex: none; }
.ib-card-icon .icon { width: 13px; height: 13px; }
.ib-card dl { display: grid; grid-template-columns: 42% 1fr; gap: 8px 8px; margin: 0; padding: 0 12px 12px; font-size: 11.5px; }
.ib-card dt { color: var(--app-muted); }
.ib-card dd { margin: 0; display: grid; gap: 3px; justify-items: start; min-width: 0; }
.ib-card dd small { color: var(--app-muted); font-size: 10.5px; }
.ib-card .app-input { min-height: 26px; font-size: 11.5px; width: 100%; }
.ib-card .app-pill { height: 20px; }
@media (max-width: 1100px) { .ib { grid-template-columns: 280px minmax(0, 1fr); } .ib-details { display: none; } }
@media (max-width: 760px) { .ib, .ib--two { grid-template-columns: 1fr; } .ib-list { display: none; } .ib-route { display: grid; } }
/* Narrow screens: the conversation actions drop under the name instead of covering it. */
@media (max-width: 560px) {
  .ib-convo-head { flex-wrap: wrap; row-gap: 8px; }
  .ib-convo-who { flex-basis: calc(100% - 54px); }
  .ib-convo-actions { flex-basis: 100%; padding-left: 54px; }
  .ib-chips .app-pill { height: auto; min-height: 22px; padding-block: 3px; white-space: normal; line-height: 1.3; }
  /* The composer's tools wrap, so they don't push the conversation wider than the screen. */
  .ib, .ib--two { grid-template-columns: minmax(0, 1fr); }
  .ib-tools { flex-wrap: wrap; row-gap: 6px; }
}
.phone--app { max-width: 300px; margin: 0 auto; aspect-ratio: 9 / 18.5; }
.phone-app { flex: 1; display: flex; flex-direction: column; padding-top: 34px; overflow: hidden; font-size: 12px; color: var(--app-text); background: #fff; }
.phone-app .ib-title--sm { padding-top: 4px; }
.phone-app .ib-live { padding-left: 48px; }
.phone-app .ib-row { padding: 9px 12px; }
.phone-app .thread { flex: 1; justify-content: flex-end; }
.ib-back { padding: 6px 12px; color: var(--app-blue); font-weight: 600; font-size: 12px; }
.ib-phone-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; border-bottom: 1px solid var(--app-line); }
.ib-phone-head div { display: grid; }
.ib-phone-head span { font-size: 11px; color: var(--app-muted); }

/* Template editor */
.te { display: flex; flex-direction: column; }
.te-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--app-line); }
.te-head > div { display: grid; flex: 1; }
.te-head strong { font-size: 16px; }
.te-head span { font-size: 11.5px; color: var(--app-muted); }
.te-head > .icon { color: var(--app-blue); }
.te-tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--app-blue); color: #fff; flex: none; }
.te-tile .icon { width: 18px; height: 18px; }
.te-body { display: grid; gap: 12px; padding: 12px; background: #f8f9fb; }
.te-section { background: #fff; border: 1px solid var(--app-line); border-radius: 12px; overflow: hidden; }
.te-section-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #f8f9fb; border-bottom: 1px solid var(--app-line); font-weight: 700; font-size: 13px; }
.te-mini { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--app-blue); color: #fff; }
.te-mini .icon { width: 12px; height: 12px; }
.te-mini--pink { background: #d4145a; }
.te-mini--grey { background: #f3f3f3; color: #181818; }
.te-insert { margin-left: auto; height: 26px; font-size: 11px; }
.te-insert .icon { width: 12px; height: 12px; }
.te-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.te-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 0 0; }
.te-pad { display: grid; gap: 8px; padding: 12px; }
.te-tip { display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding: 9px 11px; border-radius: 8px; background: #eef4ff; color: #014486; font-size: 11.5px; line-height: 1.5; }
.te-tip .icon { width: 15px; height: 15px; color: var(--app-blue); }
.te-tip code { font-size: 10.5px; background: rgba(1,118,211,.1); border: 0; }
.te-active { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.te-preview { grid-template-columns: minmax(0, 1fr) 190px; align-items: start; gap: 14px; }
.te-preview > div:first-child { display: grid; gap: 8px; justify-items: start; }
.te-preview .app-field { width: 100%; }
.te-ok { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #2e844a; }
.te-ok .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.te-phone { border: 3px solid #c9c9c9; border-bottom: 0; border-radius: 26px 26px 0 0; padding: 22px 10px 12px; background: #f8f9fb; display: grid; gap: 6px; }
.te-phone .bubble { max-width: 100%; font-size: 11.5px; }
.te-foot { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--app-line); }
@media (max-width: 640px) { .te-grid, .te-grid--3 { grid-template-columns: 1fr; } .te-preview { grid-template-columns: 1fr; } }

/* Fallback demo */
.fallback-demo { display: grid; gap: 16px; padding: 18px; }
.fd-records { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-records legend { margin-bottom: 6px; }
.fd-choice { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--app-line); border-radius: 10px; cursor: pointer; font-size: 13px; transition: border-color .15s, background-color .15s; }
.fd-choice:hover { border-color: #b8c7da; }
.fd-choice:has(input:checked) { border-color: var(--app-blue); background: #eef4ff; }
.fd-choice input { accent-color: var(--app-blue); width: 16px; height: 16px; margin: 0; }
.fd-result { display: grid; gap: 8px; }
.fd-result .bubble { max-width: 100%; }
.fd-status { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: #2e844a; line-height: 1.45; }
.fd-status .icon { width: 14px; height: 14px; margin-top: 1px; stroke-width: 2.4; flex: none; }
.fd-status.is-blocked { color: #ba0517; }

/* Outreach */
.or { display: flex; flex-direction: column; }
.or-top { display: grid; gap: 12px; justify-items: center; padding: 14px 16px 12px; border-bottom: 1px solid var(--app-line); }
.or-top > strong { font-size: 15px; color: #03234d; }
.or-stepper { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; width: 100%; max-width: 520px; }
.or-stepper li { flex: 1; display: grid; justify-items: center; gap: 4px; position: relative; font-size: 10.5px; color: var(--app-muted); }
.or-stepper li::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: #c9c9c9; }
.or-stepper li:first-child::before { display: none; }
.or-stepper li.is-done::before, .or-stepper li.is-current::before { background: var(--app-blue); }
.or-stepper li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1.5px solid #c9c9c9; font-size: 10.5px; font-weight: 700; }
.or-stepper li.is-done > span { background: var(--app-blue); border-color: var(--app-blue); color: #fff; }
.or-stepper li.is-done .icon { width: 12px; height: 12px; stroke-width: 3; }
.or-stepper li.is-current > span { background: var(--app-blue); border-color: var(--app-blue); color: #fff; box-shadow: 0 0 0 4px #eef4ff; }
.or-stepper li.is-current b { color: var(--app-blue); }
.or-stepper b { font-weight: 600; text-align: center; }
.or-body { display: grid; gap: 8px; padding: 14px 16px; }
.or-step { font-size: 10.5px; font-weight: 600; color: var(--app-muted); }
.or-title { font-size: 16px; font-weight: 700; }
.or-card { border: 1px solid var(--app-line); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.or-card-head { display: flex; justify-content: space-between; padding: 8px 12px; background: #f8f9fb; border-bottom: 1px solid var(--app-line); font-size: 12.5px; }
.or-dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin: 0; padding: 10px 12px; font-size: 12px; }
.or-dl dt { color: var(--app-muted); }
.or-dl dd { margin: 0; }
.or-who { border-top: 1px solid var(--app-line); padding: 10px 12px 12px; display: grid; gap: 6px; }
.or-who-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.or-who-head .app-link { display: inline-flex; align-items: center; gap: 4px; }
.or-who-head .icon { width: 12px; height: 12px; }
.or-count { font-size: 14px; font-weight: 700; }
.or-buckets { list-style: none; margin: 2px 0; padding: 0; border: 1px solid var(--app-line); border-radius: 8px; overflow: hidden; font-size: 12px; }
.or-buckets li { display: flex; justify-content: space-between; padding: 6px 10px; border-top: 1px solid var(--app-line); }
.or-buckets li:first-child { border-top: 0; }
.or-buckets b { font-variant-numeric: tabular-nums; }
.or-buckets .is-eligible { background: #ebf7e6; color: #2e844a; font-weight: 700; }
.or-confirm { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 8px; background: #eef4ff; border: 1px solid #aacbff; font-size: 12px; margin-top: 4px; }
.or-check { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--app-blue); color: #fff; flex: none; margin-top: 1px; }
.or-check .icon { width: 11px; height: 11px; stroke-width: 3; }
.or-foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--app-line); flex-wrap: wrap; }
.or-foot .app-btn .icon { width: 13px; height: 13px; }
.or-radios { display: flex; flex-wrap: wrap; gap: 6px; }
.or-radios span { padding: 6px 11px; border-radius: 8px; border: 1px solid #c9c9c9; font-size: 12px; }
.or-radios .on { border-color: var(--app-blue); background: #eef4ff; color: #014486; font-weight: 600; }
.or-span { grid-column: 1 / -1; }
.or .te-grid { padding: 4px 0; }
.or-summary { font-size: 12px; padding: 8px 10px; border-radius: 8px; background: #f8f9fb; }
.orr { padding-bottom: 12px; }
.orr-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--app-line); font-size: 13.5px; }
.orr-head .app-meta { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.orr-head .app-meta .icon { width: 12px; height: 12px; color: var(--app-blue); }
.orr-status { display: flex; gap: 10px; margin: 12px 14px; padding: 10px 12px; border-radius: 8px; background: #eef4ff; border: 1px solid #d8e6fe; }
.orr-status p { font-size: 11.5px; color: var(--app-muted); }
.orr-status-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #2e844a; flex: none; }
.orr-status-icon .icon { width: 16px; height: 16px; }
.orr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px; }
.orr-card { border: 1px solid var(--app-line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.orr-card-title { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
.orr-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 12px; }
.orr-row b { font-variant-numeric: tabular-nums; }
.orr-row i { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: #f3f3f3; position: relative; overflow: hidden; }
.orr-row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--app-blue); border-radius: inherit; }
@media (max-width: 560px) { .orr-grid { grid-template-columns: 1fr; } .or-dl { grid-template-columns: 1fr; } }

/* Admin console */
.adm { display: grid; grid-template-columns: 170px minmax(0, 1fr); background: var(--app-bg); }
.adm-nav { background: #fff; border-right: 1px solid var(--app-line); padding: 12px 0; font-size: 12px; }
.adm-nav p { padding: 8px 14px 4px; font-weight: 700; font-size: 11.5px; }
.adm-nav ul { list-style: none; margin: 0; padding: 0; }
.adm-nav li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 18px; color: #3e3e3c; }
.adm-nav li .icon { width: 13px; height: 13px; color: #706e6b; }
.adm-nav li.is-active { background: #eef4ff; box-shadow: inset 3px 0 0 var(--app-blue); color: #014486; font-weight: 700; }
.adm-nav li.is-active .icon { color: var(--app-blue); }
.adm-main { padding: 14px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.adm-header { display: flex; align-items: center; gap: 10px; }
.adm-header > div { display: grid; flex: 1; min-width: 0; }
.adm-header strong { font-size: 16px; }
.adm-header span:not(.app-btn):not(.adm-header-icon) { font-size: 11.5px; color: var(--app-muted); }
.adm-header-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0b827c; color: #fff; flex: none; }
.adm-header-icon .icon { width: 16px; height: 16px; }
.adm-header .app-btn .icon { width: 12px; height: 12px; }
.adm-status { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #ebf7e6; border: 1px solid #b9e3a9; }
.adm-status > div { flex: 1; display: grid; gap: 3px; font-size: 12px; }
.adm-status b { font-size: 14px; }
.adm-status .app-pill { vertical-align: 2px; }
.adm-status-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #2e844a; color: #fff; flex: none; }
.adm-status-icon .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.adm-status .app-btn { height: 28px; font-size: 11px; }
.adm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.adm-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-tiles > div { background: #fff; border: 1px solid var(--app-line); border-radius: 10px; padding: 10px; text-align: center; display: grid; }
.adm-tiles--left > div { text-align: left; }
.adm-tiles b { font-size: 20px; letter-spacing: -.02em; color: #03234d; }
.adm-tiles span { font-size: 11px; color: var(--app-muted); }
.adm-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); margin-bottom: -4px; }
.adm-progress { background: #fff; border: 1px solid var(--app-line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.adm-progress-head { display: flex; justify-content: space-between; gap: 12px; }
.adm-progress-head > div { display: grid; gap: 2px; font-size: 13px; }
.adm-progress-head span { font-size: 11px; color: var(--app-muted); }
.adm-pct { font-size: 11.5px; white-space: nowrap; }
.adm-bar { height: 8px; border-radius: 999px; background: #e5e5e5; overflow: hidden; }
.adm-bar i { display: block; height: 100%; width: var(--w); background: var(--app-blue); border-radius: inherit; }
.adm-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.adm-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--app-line); }
.adm-steps li > div { display: grid; flex: 1; min-width: 0; font-size: 12px; }
.adm-steps li > div span { color: var(--app-muted); font-size: 11px; }
.adm-steps .app-btn { height: 26px; font-size: 11px; }
.adm-done { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2e844a; color: #fff; flex: none; }
.adm-done .icon { width: 12px; height: 12px; stroke-width: 3; }
.adm-more { font-size: 11.5px; }
.adm-fieldset { margin: 0; padding: 10px 14px 14px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; display: grid; gap: 8px; }
.adm-fieldset legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.adm-radio { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.adm-radio i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #939393; flex: none; }
.adm-radio.is-on i { border: 5px solid var(--app-blue); }
.adm-narrow { max-width: 220px; }
.adm-table-wrap { background: #fff; border: 1px solid var(--app-line); border-radius: 12px; overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 560px; }
.adm-table th { text-align: left; padding: 9px 12px; background: #f8f9fb; font-weight: 700; border-bottom: 1px solid var(--app-line); white-space: nowrap; }
.adm-table td { padding: 9px 12px; border-top: 1px solid var(--app-line); vertical-align: middle; }
.adm-table tr:first-child td { border-top: 0; }
.adm-table th:nth-child(n+3), .adm-table td:nth-child(n+3) { text-align: center; }
.adm-who { display: flex; align-items: center; gap: 8px; }
.adm-who > .icon { width: 22px; height: 22px; padding: 4px; border-radius: 6px; background: #7f8de1; color: #fff; flex: none; }
.adm-who > span { display: grid; }
.adm-who small { color: var(--app-muted); font-size: 11px; }
.adm-yes .icon { width: 15px; height: 15px; color: #2e844a; stroke-width: 2.6; }
.adm-no { color: var(--app-muted); }
.adm-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--app-line); font-size: 12px; }
.adm-tabs span { padding: 6px 0; color: var(--app-muted); }
.adm-tabs .on { color: var(--app-blue); box-shadow: inset 0 -2px 0 var(--app-blue); font-weight: 600; }
.adm-empty { padding: 6px 0; }
@media (max-width: 760px) {
  .adm { grid-template-columns: 1fr; }
  .adm-nav { display: none; }
  .adm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-status { flex-wrap: wrap; }
  .adm-progress-head { flex-direction: column; }
}

/* Capture frames for the product-tour images (/tour-screens/) */
.capture-page { background: #dfe6f1; margin: 0; }
.capture { width: 1450px; height: 1000px; display: flex; flex-direction: column; background: var(--app-bg); overflow: hidden; }
.capture-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--app-line); font-size: 13px; color: var(--app-muted); }
.capture-bar i { width: 11px; height: 11px; border-radius: 50%; background: #dfe3ea; }
.capture-bar span { margin-left: 10px; font-weight: 600; color: #03234d; }
.capture-body { flex: 1; min-height: 0; padding: 28px; display: grid; place-items: center; zoom: 1.35; overflow: hidden; }
.capture--top .capture-body { place-items: start center; }
.capture-body > .app { width: 100%; }

/* 24. Home & shared page pieces ------------------------------------------ */

.what-is { max-width: 860px; margin: 0 auto; text-align: center; display: grid; gap: 22px; justify-items: center; }
.what-is .lede { color: var(--text-2); }
.center-link { text-align: center; margin-top: 36px; }
.center-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; }
.center-links > span { color: var(--muted); }
.inbox-highlights { margin-top: 28px; }
.inbox-highlights .highlight + .highlight { margin-top: 0; }
.faq-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.faq .answer .faq-links a { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; font-weight: 600; }
.faq-links .icon { width: 14px; height: 14px; }
.faq-split { align-items: start; }
.tour-note { font-size: .8125rem; margin-top: 10px !important; opacity: .8; }
.page-hero-visual { min-width: 0; }

.auto-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.auto-card { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--stage-line); background: rgba(255,255,255,.03); transition: background-color .2s, border-color .2s; }
.auto-card:hover { background: rgba(255,255,255,.07); border-color: rgba(143,184,255,.35); }
.auto-card .icon { grid-row: span 2; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(143,184,255,.12); color: var(--stage-accent); }
.auto-card b { font-size: .9688rem; }
.auto-card span { font-size: .8125rem; color: var(--stage-muted); }
.auto-actions { border-radius: var(--radius-lg); border: 1px solid var(--stage-line); background: rgba(255,255,255,.03); padding: clamp(16px, 2.4vw, 24px); }
.auto-actions-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 16px; color: var(--stage-fg); }
.auto-actions-title .icon { color: var(--stage-accent); }
.section--dark .action-grid li { background: rgba(255,255,255,.03); border-color: var(--stage-line); }
.section--dark .action-grid span { color: var(--stage-muted); }
@media (max-width: 520px) { .auto-cards { grid-template-columns: 1fr; } }

.byo { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: start; gap: 0; padding: clamp(18px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.byo-col { display: grid; gap: 10px; }
.byo-label { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.byo-box { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-soft); }
.byo-box .icon { grid-row: span 2; width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--surface); color: var(--brand); border: 1px solid var(--line); }
.byo-box b { font-size: .9375rem; }
.byo-box span { font-size: .8125rem; color: var(--muted); line-height: 1.35; }
.byo-box--brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.byo-box--brand span { color: rgba(255,255,255,.94); }
.byo-box--brand .icon { background: rgba(255,255,255,.15); border-color: transparent; color: #fff; }
.byo-link { display: grid; place-items: center; align-self: center; }
.byo-link span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-50); color: var(--brand); }
.byo-note { grid-column: 1 / -1; margin-top: 18px; font-size: .8125rem; color: var(--muted); text-align: center; }
@media (max-width: 560px) { .byo { grid-template-columns: 1fr; gap: 10px; } .byo-link span { transform: rotate(90deg); } }

.pipeline-card { padding: clamp(20px, 3vw, 32px); }
.pipeline-card .pipeline-row { grid-template-columns: 1fr; gap: 10px; }
.bubble.is-blocked { background: #fff; box-shadow: inset 0 0 0 1px #ba0517; }
.home-hero-visual { min-width: 0; }
.home-hero-visual .demo-steps, .home-hero-visual .demo-replay { margin-left: 0; }
/* The send-and-reply demo reused in a page hero needs the home hero's wider visual column and breakpoint. */
.page-hero-grid:has(> .page-hero-visual .demo) { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
@media (max-width: 1024px) {
  .page-hero-grid:has(> .page-hero-visual .demo) { grid-template-columns: minmax(0, 1fr); }
}
/* Hero demo: the record component is narrow here, so drop the "Text messages ·" label like the product does under 520px. */
.demo .rm-label { display: none; }
.demo .rm-head { padding: 10px 12px; }
.demo .rm-history { min-height: 196px; }
@media (max-width: 760px) {
  .demo { grid-template-columns: minmax(0, 1fr) 64px 132px; }
  .route-node-label { font-size: 9.5px; }
}
@media (max-width: 560px) {
  /* Phones: the record card tells the story; the route and handset would make the hero too tall. */
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo-route, .demo-phone { display: none; }
  .demo-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .record-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero .btn-row .btn { width: 100%; }
}

/* 25. Product page pieces ------------------------------------------------ */
.steps-grid .card-kicker { color: var(--brand); }
.seg-table { margin-top: 16px; padding: 14px; }
.seg-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.seg-table th, .seg-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--app-line); }
.seg-table th { font-weight: 700; background: #f8f9fb; }
.seg-table .app-meta { margin-top: 10px; }
.rm-pop.app { margin: 0; box-shadow: var(--shadow-lg); }
.flow-explainer { display: grid; gap: 20px; justify-items: start; }
.flow-explainer p { max-width: 70ch; }
/* Emphasis inside body copy stays in the body font (the serif is for headings). */
.lede em, .muted em, .card p em, .feature-list p em, .answer em, .hero-answer em, .checks em { font-style: italic; font-family: inherit; }
.guide { padding-bottom: var(--section-y); }
.page-hero--article { padding-bottom: clamp(32px, 5vw, 56px); }
.page-hero--article .container > * + * { margin-top: 18px; }
.aside-cta { padding: 18px; border-radius: var(--radius); background: var(--bg-tint); border: 1px solid var(--brand-100); display: grid; gap: 10px; }
.aside-cta strong { font-size: .9375rem; }
.aside-cta p { font-size: .875rem; color: var(--muted); }
.prose .btn { text-decoration: none; }
.prose .flow { margin: 1.4em 0; }

/* 26. Landing, pricing and contact -------------------------------------- */
.journey { display: grid; gap: 18px; padding: clamp(18px, 3vw, 32px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.journey-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; }
.journey-row + .journey-row { padding-top: 18px; border-top: 1px dashed var(--line); }
.journey-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; }
.journey-label .icon { color: var(--brand); width: 18px; height: 18px; }
@media (max-width: 760px) { .journey-row { grid-template-columns: 1fr; gap: 10px; } }

.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.price-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs); }
.price-card-head .price-note { justify-self: start; }
.price-card--brand { border-color: var(--brand-100); background: linear-gradient(170deg, var(--bg-tint), var(--surface) 55%); box-shadow: var(--shadow-lg), var(--highlight); }
.price-card-head { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.price-card .h4 { margin-top: 4px; }
.page-hero-visual .price-card { max-width: 520px; margin-left: auto; }
.price-card .card-kicker { color: var(--brand); }
.price-card .btn-row { margin-top: auto; padding-top: 8px; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }
.stat-row--2 { --cols: 2; }

.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "copy form" "more form"; grid-template-rows: auto 1fr; gap: 0 clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(24px, 4vw, 40px); }
.contact-copy { grid-area: copy; }
.contact-grid > .form-card { grid-area: form; }
.contact-more { grid-area: more; }
.contact-copy > * + * { margin-top: 20px; }
.contact-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 16px; }
.contact-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.contact-steps span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-weight: 700; font-size: .875rem; }
.contact-steps b { display: block; }
.contact-steps p { color: var(--muted); font-size: .9375rem; }
.contact-side { display: grid; gap: 12px; justify-items: start; padding: 20px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); margin-top: 32px !important; font-size: .9375rem; }
.contact-side p { color: var(--text-2); }
.contact-hero .breadcrumbs { margin-bottom: 0; }
.contact-hero .h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.form-card { box-shadow: var(--shadow-lg), var(--highlight); }
.form-intro { display: grid; gap: 4px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .form-foot .btn { width: 100%; } }
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "form" "more"; grid-template-rows: auto; row-gap: 32px; }
  .contact-steps { margin-top: 8px; }
}
.form-success[hidden], .contact-form[hidden] { display: none; }
.form-success:focus { outline: none; }
/* Hero demo composer: icon-only Send (as the product does when narrow). The box is always two lines tall, so typing
   never resizes the card; demos.js scrolls it to keep the last two lines in view, like a textarea. */
.demo .rm-send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.demo .rm-send > span:first-child { padding: 0 11px; }
.rm-text--demo { position: relative; display: block; height: 2.8em; overflow: hidden; }
.rm-text--demo > [data-demo-typing] { display: block; }
.rm-text--demo > .is-placeholder { color: #939393; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-text--demo .demo-caret { position: absolute; right: 0; bottom: 3px; }
.rm-text--demo .demo-caret { display: none; }
[data-demo-typing].is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; background: var(--app-blue); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
/* backdrop-filter/transform make the header the containing block for the fixed
   mobile menu panel, so switch them off while the menu is open. */
.site-header.is-open { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
.card .faq summary, .card details > summary { font-size: .9375rem; padding: 14px 2px; }
.card .faq summary::after { width: 24px; height: 24px; background-size: 12px; }
.te-head .te-tile { color: #fff; }
/* Grids of highlight cards: no stacked-card margin. Long inline code wraps on phones. */
.grid > .highlight + .highlight { margin-top: 0; }
@media (max-width: 640px) {
  :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
}
.ib-row-main { grid-template-columns: minmax(0, 1fr); }
.price-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price-amount strong { font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -0.045em; font-weight: 650; }
.price-amount span { color: var(--muted); font-weight: 500; }
.price-note { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--mint-50); color: var(--mint-ink); font-size: .875rem; font-weight: 600; }
.price-note .icon { width: 16px; height: 16px; }
.price-note--trial { background: var(--bg-tint); color: var(--brand); border: 1px solid var(--brand-100); }
.screenshot { margin: 0; }
.screenshot .shot { box-shadow: var(--shadow); }
.screenshot figcaption { text-align: left; line-height: 1.5; }
.screenshot-source { display: block; margin-top: 2px; color: var(--faint); font-size: .75rem; }
.prose .screenshot { margin: 1.8em 0; }
.prose .screenshot figcaption { font-size: .875rem; }
@media (max-width: 640px) {
  .shot-hint { right: 8px; bottom: 8px; padding: 4px 9px; font-size: .6875rem; }
  .shot-hint .icon { width: 11px; height: 11px; }
}
/* ConnectSMS logo (image lockup) */
.brand-logo { display: block; height: 44px; width: auto; }
.site-footer .brand-logo { height: 54px; }
@media (max-width: 640px) { .site-header .brand-logo { height: 38px; } }

/* Any object: Recipients table, add-object dialog, audience filters */
.rc-card-head { display: grid; gap: 3px; padding: 12px 14px; border-bottom: 1px solid var(--app-line); font-size: 12.5px; }
.rc-card-head span { color: var(--app-muted); font-size: 11.5px; }
.rc-fields { margin: 0; padding-left: 16px; font-family: var(--mono); font-size: 11px; line-height: 1.6; }
.rc-table td:nth-child(2) { text-align: left; }
.rc-table th:nth-child(2) { text-align: left; }
.rc-foot { padding: 8px 14px; font-size: 11px; color: var(--app-muted); border-top: 1px solid var(--app-line); }
@media (max-width: 640px) {
  /* Stack each object: name and status on top, phone fields below. */
  .rc-table { min-width: 0; }
  .rc-table thead { display: none; }
  .rc-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "obj status" "fields fields"; align-items: center; padding: 6px 0; border-top: 1px solid var(--app-line); }
  .rc-table tr:first-child { border-top: 0; }
  .rc-table td { border-top: 0; padding: 3px 12px; }
  .rc-table td:nth-child(1) { grid-area: obj; }
  .rc-table td:nth-child(2) { grid-area: fields; padding-left: 46px; }
  .rc-table td:nth-child(3) { display: none; }
  .rc-table td:nth-child(4) { grid-area: status; }
}
.dlg { max-width: 640px; margin: 0 auto; }
.dlg-head { padding: 14px 16px; border-bottom: 1px solid var(--app-line); text-align: center; font-size: 15px; color: #03234d; }
.dlg-body { display: grid; gap: 14px; padding: 16px; }
.dlg-row { display: flex; gap: 8px; }
.dlg-row .app-input { flex: 1; font-family: var(--mono); font-size: 12px; }
.dual { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px; gap: 8px; align-items: center; }
.dual-col { display: grid; gap: 4px; }
.dual-col ul { list-style: none; margin: 0; padding: 4px; min-height: 120px; border: 1px solid #c9c9c9; border-radius: 6px; font-size: 11.5px; }
.dual-col li { padding: 5px 8px; border-radius: 4px; }
.dual-col li.is-on { background: #eef4ff; color: #014486; font-weight: 600; }
.dual-arrows { display: grid; gap: 6px; justify-items: center; }
.dlg-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--app-line); }
.or-filter { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 6px; }
.or-filter .app-input { font-size: 12px; min-height: 30px; }
@media (max-width: 560px) { .dual { grid-template-columns: 1fr; } .dual-arrows { display: none; } .or-filter { grid-template-columns: 1fr; } }

/* Setup guide: parts, numbered steps, click paths, checklist */
.article-aside .toc { max-height: calc(100vh - var(--header-h) - 250px); overflow-y: auto; overscroll-behavior: contain; }
.click-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .875rem; line-height: 1.4; vertical-align: middle; }
.click-path-step, .click-path-app { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); font-weight: 600; }
.click-path-app { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand); }
.click-path-sep { color: var(--muted); }
.gpart { margin-top: 3.2em; padding-top: 1.6em; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose .gpart:first-child { margin-top: 0; }
.gpart-kicker { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.prose .gpart h2 { margin-top: .25em; }
.gpart-lede { margin-top: .6em; font-size: 1.125rem; color: var(--text-2); }
.gpart-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1em; font-size: .875rem; }
.gpart-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text-2); line-height: 1.3; }
.gpart-meta .icon { width: 14px; height: 14px; color: var(--brand); flex: none; }
.gstep { scroll-margin-top: calc(var(--header-h) + 16px); }
.prose .gstep h3 { display: flex; align-items: flex-start; gap: 12px; margin-top: 2em; }
.gstep-n { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: 0; margin-top: -1px; }
.gstep-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9375rem; color: var(--muted); }
.prose .gstep h3 + .gstep-where { margin-top: .6em; }
.gstep > * + * { margin-top: 1.1em; }
.prose .gstep ol > li::marker { font-weight: 700; color: var(--brand); }
.gparts { list-style: none; display: grid; gap: 8px; padding: 0 !important; margin-top: 1.4em; }
.prose .gparts li + li { margin-top: 0; }
.gparts a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--text-2); text-decoration: none; font-size: .9375rem; line-height: 1.45; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.gparts a:hover { border-color: var(--brand-100); box-shadow: 0 6px 20px -12px rgba(15,23,42,.25); }
@media (hover: hover) and (pointer: fine) { .gparts a:hover { transform: translateX(2px); } }
.gparts-n { grid-row: span 2; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.gparts strong { font-size: 1rem; color: var(--text); }
.gparts-text { grid-column: 2; }
.gparts-time { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.gparts-time .icon { width: 13px; height: 13px; }
.gchecklist ul { list-style: none; display: grid; gap: 8px; padding: 0 !important; }
.prose .gchecklist li + li { margin-top: 0; }
.gchecklist label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: .9688rem; line-height: 1.55; }
.gchecklist label:hover { border-color: var(--brand-100); }
.gchecklist input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brand); cursor: pointer; }
.gchecklist input:checked + span { color: var(--muted); }
.gchecklist input:checked + span strong { color: var(--muted); }
.gchecklist-progress { margin: 0 0 10px; font-size: .875rem; font-weight: 600; color: var(--brand); }
.gchecklist-progress.is-done { color: #1f7a45; }
.prose .table-wrap { overflow-x: auto; }
.prose .table-wrap table { display: table; }
.prose td code, .prose th code { font-size: .8125rem; }
.prose .frame-fig { margin: 1.8em 0; }
.prose .frame-fig .frame { margin: 0; }
@media (max-width: 640px) {
  .gparts a { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gparts-n, .gparts-text, .gparts-time { grid-column: 1; grid-row: auto; }
  .gparts-time { margin-top: 4px; }
  .prose .gstep h3 { gap: 10px; }
}
/* Setup guide mocks: ConnectSMS Setup mid-setup */
.adm-status--todo { background: #f3f6fb; border-color: var(--app-line); }
.adm-status--todo .adm-status-icon { background: #706e6b; }
.adm-todo { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed #b0adab; flex: none; }
.adm-steps li > .app-pill { flex: none; }
.adm-form { display: grid; gap: 12px; }
.adm-mono { font-family: var(--mono); font-size: 12px; }
.app-input.is-placeholder { color: #939393; }
.adm-url { word-break: break-all; line-height: 1.4; }
.adm-okline { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: #2e844a; }
.adm-okline .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.adm-steps-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.adm-steps-bar > span { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 10px; background: #fff; font-size: 12px; }
.adm-steps-bar > span > .icon, .adm-steps-bar i { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700; }
.adm-steps-bar .is-done > .icon { background: #2e844a; color: #fff; padding: 5px; stroke-width: 3; }
.adm-steps-bar .is-current { border-color: var(--app-blue); box-shadow: inset 0 0 0 1px var(--app-blue); }
.adm-steps-bar .is-current i { background: var(--app-blue); color: #fff; }
.adm-steps-bar small { color: var(--app-muted); font-size: 11px; }
.app-check { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #939393; background: #fff; flex: none; }
.app-check .icon { width: 11px; height: 11px; stroke-width: 3; color: #fff; }
.app-check.is-on { background: var(--app-blue); border-color: var(--app-blue); }
.dlg-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12.5px; color: var(--app-text); }
.dlg--confirm { max-width: 440px; margin-top: 16px; }
.dlg--confirm .dlg-body p { margin: 0; font-size: 13px; color: var(--app-text); }
.adm-table--left th, .adm-table--left td { text-align: left !important; }
.prose .visual-frame .app { font-size: 13px; }
@media (max-width: 560px) {
  .adm-steps-bar { grid-template-columns: minmax(0, 1fr); }
  .adm-steps li { flex-wrap: wrap; }
  .adm-steps li > div { flex-basis: calc(100% - 32px); }
  .adm-steps li > .app-pill { margin-left: 32px; }
}

.tw-paths { display: grid; gap: 6px; }
.tw-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tw-path-label { flex: none; min-width: 112px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.guide[data-console="new"] .tw-path--legacy, .guide[data-console="legacy"] .tw-path--new { display: none; }
.guide[data-console="new"] .tw-path-label, .guide[data-console="legacy"] .tw-path-label { display: none; }
.gstep-where .tw-paths { flex: 1 1 100%; }
.console-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); font-size: .875rem; }
.console-switch[hidden] { display: none; }
.console-switch > span { font-weight: 600; color: var(--text); margin-right: 4px; }
.console-switch button { display: inline-grid; justify-items: start; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; color: var(--text); font: inherit; font-weight: 600; line-height: 1.3; cursor: pointer; }
.console-switch button small { font-weight: 500; font-size: .75rem; color: var(--muted); }
.console-switch button[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); background: var(--brand-50); }
.console-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) { .tw-path-label { min-width: 0; flex-basis: 100%; } }
.prose h4 { font-size: 1.0625rem; margin-top: 1.6em; letter-spacing: -0.01em; color: var(--text); }
.prose h4 + * { margin-top: .5em; }
.prose code.break { word-break: break-all; }
.prose li > .tw-paths { margin-top: 8px; }
.guide-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; align-items: start; padding: clamp(22px, 3vw, 32px); }
.guide-feature > .text-link { grid-column: 2; }
.guide-feature h3 { font-size: 1.375rem; }
.guide-feature-parts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; padding: 0; counter-reset: part; }
.guide-feature-parts li { counter-increment: part; padding: 4px 11px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.guide-feature-parts li::before { content: counter(part) ". "; color: var(--brand); }
@media (max-width: 640px) { .guide-feature { grid-template-columns: minmax(0, 1fr); } .guide-feature > .text-link { grid-column: 1; } }
.adm-who b { white-space: nowrap; }
.screenshot--narrow { max-width: 520px; }
.prose .screenshot--narrow { margin-left: 0; }

/* 27. Assistant ------------------------------------------------------------
   The ConnectSMS Assistant launcher and chat panel, built by
   public/js/assistant.js inside the empty .csa root on every page.         */

.csa {
  position: relative;
  z-index: 70;
  --csa-edge: 24px;
  /* assistant.js swaps in a sampled spring (linear()) where supported. */
  --csa-open-ease: var(--ease-out);
  --csa-open-dur: 280ms;
  --csa-sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
}
html.nav-open .csa {
  display: none;
}
/* Separate rules: a browser without :has() drops only these. */
html:has(dialog.lightbox[open]) .csa {
  display: none;
}
/* While the product tour is pinned (site.js tucks the header away), the
   launcher steps aside too, so it never sits on the tour's captions. */
html:has(.site-header.is-tucked) .csa[data-state="closed"] .csa-dock {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
html.csa-lock {
  overflow: hidden;
}

/* Launcher */
.csa-dock {
  position: fixed;
  z-index: 2;
  right: calc(var(--csa-edge) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--csa-edge) + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear 0s;
}
.csa-magnet,
.csa-float {
  position: relative;
  width: 100%;
  height: 100%;
}
/* The launcher is the ConnectSMS app icon: the logo's red rounded square with
   the white chat bubble (connectsms-launcher.png, rendered from the logo by
   `npm run capture`). Its corner radius matches the artwork's. */
.csa-launcher {
  --csa-launcher-radius: 24.5%;
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--csa-launcher-radius);
  background: var(--signal);
  color: #fff;
  box-shadow: 0 1px 2px rgba(190, 28, 44, 0.28), 0 10px 24px -10px rgba(253, 63, 79, 0.7);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform var(--dur-press) var(--ease-out);
}
.csa-launcher:active {
  transform: scale(0.96);
}
.csa-launcher .csa-ico {
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.csa-launcher .csa-ico-brand {
  width: 100%;
  height: 100%;
  border-radius: var(--csa-launcher-radius);
  -webkit-user-drag: none;
}
/* Open: the app icon gives way to a white close mark on the same red. */
.csa-ico-x {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}
.csa[data-state="open"] .csa-ico-brand {
  opacity: 0;
  transform: scale(0.85);
}
.csa[data-state="open"] .csa-ico-x {
  opacity: 1;
  transform: none;
}
/* Unread dot: the one place the logo red is used as a status. */
/* It sits over the icon's corner like an app badge, so its white ring keeps it
   distinct from the red icon. */
.csa-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px 2px rgba(10, 26, 51, 0.18);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.csa[data-unread] .csa-dot {
  opacity: 1;
  transform: none;
}
.csa-pulse {
  position: absolute;
  inset: 0;
  border-radius: 24.5%;
  background: var(--signal);
  opacity: 0;
  pointer-events: none;
}
/* Nudge chip beside the launcher (a pointer convenience; hidden from assistive tech). */
.csa-hint {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  max-width: calc(100vw - 56px - 2 * var(--csa-edge) - 20px);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(8px, -50%);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.csa[data-hint] .csa-hint {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .csa-launcher:hover {
    box-shadow: 0 1px 2px rgba(190, 28, 44, 0.3), 0 14px 30px -10px rgba(253, 63, 79, 0.8);
  }
  .csa-hint:hover {
    border-color: var(--line-2);
    color: var(--text);
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* Idle float until the assistant has been opened once this session. */
  .csa:not([data-seen]) .csa-float {
    animation: csa-float 6s ease-in-out infinite alternate;
  }
  .csa[data-pulse] .csa-pulse {
    animation: csa-pulse 1.6s var(--ease-out) 2;
  }
}
@keyframes csa-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-3px);
  }
}
@keyframes csa-pulse {
  from {
    opacity: 0.35;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Panel: a non-modal dialog above the launcher */
.csa-backdrop {
  display: none;
}
.csa-panel {
  position: fixed;
  z-index: 3;
  right: calc(var(--csa-edge) + env(safe-area-inset-right, 0px));
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: calc(100vw - 2 * var(--csa-edge));
  /* Stays below the sticky header: bottom offset (~96px) + header + a 16px gap. */
  height: min(640px, calc(100vh - var(--header-h) - 112px));
  height: min(640px, calc(100dvh - var(--header-h) - 112px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.95);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.csa[data-state="open"] .csa-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform var(--csa-open-dur) var(--csa-open-ease), visibility 0s;
}
.csa-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 12px 10px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.csa-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
}
.csa-head-text {
  display: grid;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.csa-title {
  font-size: 0.9688rem;
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.csa-sub {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.csa-head-actions {
  display: flex;
  gap: 2px;
  flex: none;
}
.csa-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform var(--dur-press) var(--ease-out);
}
.csa-icon-btn:active {
  transform: scale(0.94);
}
.csa-icon-btn .icon {
  width: 18px;
  height: 18px;
}
@media (hover: hover) and (pointer: fine) {
  .csa-icon-btn:hover {
    background: var(--bg-soft);
    color: var(--text);
  }
}

/* Conversation */
.csa-log {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
  padding: 18px 16px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.csa-log:focus-visible {
  outline-offset: -2px;
}
.csa-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: none;
  max-width: 100%;
}
.csa-msg--user {
  align-items: flex-end;
}
.csa-bubble {
  max-width: 90%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px 16px 16px 16px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.csa-bubble > p + p {
  margin-top: 8px;
}
.csa-bubble strong {
  font-weight: 600;
}
.csa-bubble :not(pre) > code {
  background: var(--surface);
  white-space: normal;
}
.csa-msg--user .csa-bubble {
  max-width: 82%;
  border-color: var(--brand-600);
  border-radius: 16px 6px 16px 16px;
  background: var(--brand);
  color: #fff;
}
.csa-refs {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 2px;
  list-style: none;
}
.csa-ref {
  padding-block: 2px;
  font-size: 0.875rem;
  line-height: 1.4;
}
.csa-list {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.csa-list-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.csa-list-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--brand-50);
  color: var(--brand);
}
.csa-list-icon .icon {
  width: 16px;
  height: 16px;
}
.csa-list-text {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.35;
}
.csa-list-text strong {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.csa-list-text span {
  color: var(--muted);
  font-size: 0.8125rem;
}
@media (hover: hover) and (pointer: fine) {
  .csa-list-link:hover {
    background: var(--bg-soft);
  }
}
.csa-cta-row {
  padding-top: 2px;
}

/* Suggestion chips */
.csa-chips {
  display: grid;
  gap: 10px;
  width: 100%;
  padding-top: 4px;
}
.csa-chips-label {
  gap: 8px;
  font-size: 0.75rem;
}
.csa-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.csa-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform var(--dur-press) var(--ease-out);
}
.csa-chip:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .csa-chip:hover {
    border-color: var(--brand-100);
    background: var(--brand-50);
    color: var(--brand-700);
  }
}

/* Typing indicator */
.csa-typing .csa-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 18px 16px;
}
.csa-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.3;
  animation: csa-typing 1s ease-in-out infinite;
}
.csa-typing i:nth-child(2) {
  animation-delay: 150ms;
}
.csa-typing i:nth-child(3) {
  animation-delay: 300ms;
}
@keyframes csa-typing {
  0%,
  100% {
    opacity: 0.3;
    transform: none;
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@keyframes csa-typing-fade {
  0%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}

/* Messages and chips arrive once; backwards fill so :active can still press them. */
@media (prefers-reduced-motion: no-preference) {
  .csa-in {
    animation: csa-in 260ms var(--ease-out) backwards;
  }
  .csa-chip.csa-in {
    animation-delay: calc(80ms + var(--i, 0) * 40ms);
  }
}
@keyframes csa-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Question form */
.csa-form {
  flex: none;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.csa-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.csa-field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(11, 92, 255, 0.14);
}
.csa-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
}
/* The field's ring shows focus for the input. */
.csa-input:focus,
.csa-input:focus-visible {
  outline: none;
}
.csa-input::placeholder {
  color: var(--faint);
  opacity: 1;
}
.csa-send {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 1px solid var(--brand-600);
  border-radius: 50%;
  background: var(--brand) linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 45%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(8, 72, 204, 0.3);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease,
    transform var(--dur-press) var(--ease-out);
}
.csa-send .icon {
  width: 18px;
  height: 18px;
  /* The send glyph points up-right; nudge it to sit optically centred. */
  transform: translate(-1px, 1px);
}
.csa-send:not(:disabled):active {
  transform: scale(0.94);
}
.csa-send:disabled {
  border-color: var(--line);
  background: var(--bg-soft);
  color: var(--faint);
  box-shadow: none;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .csa-send:not(:disabled):hover {
    background-color: var(--brand-600);
  }
}
.csa-fine {
  margin-top: 8px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

/* Arrival highlight on the section a reference pointed to. */
.csa-flash {
  border-radius: 8px;
  background-color: var(--brand-50);
  background-color: color-mix(in srgb, var(--brand) 10%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 10%, transparent), 0 0 0 7px color-mix(in srgb, var(--brand) 24%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .csa-flash {
    animation: csa-flash 1.6s var(--ease-out) forwards;
  }
}
@keyframes csa-flash {
  0%,
  30% {
    background-color: color-mix(in srgb, var(--brand) 10%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 10%, transparent), 0 0 0 7px color-mix(in srgb, var(--brand) 24%, transparent);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 6px transparent, 0 0 0 7px transparent;
  }
}

/* Phones: a bottom sheet over a dimmed page */
@media (max-width: 640px) {
  .csa {
    --csa-edge: 16px;
  }
  .csa[data-state="open"] .csa-dock {
    opacity: 0;
    visibility: hidden;
  }
  .csa-dock {
    transition: opacity var(--dur-fast) var(--ease-out), visibility 0s;
  }
  .csa-backdrop {
    display: block;
    position: fixed;
    z-index: 1;
    inset: 0;
    background: rgba(3, 8, 18, 0.4);
    opacity: 0;
    visibility: hidden;
    touch-action: none;
    transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .csa[data-state="open"] .csa-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease-out), visibility 0s;
  }
  .csa-panel {
    left: 0;
    right: 0;
    bottom: var(--csa-kb, 0px);
    width: auto;
    max-width: none;
    height: 88vh;
    height: min(88dvh, calc(var(--csa-vh, 100dvh) - 12px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-width: 1px 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    opacity: 1;
    transform: translateY(100%);
    transform-origin: 50% 100%;
    transition: transform 280ms var(--csa-sheet-ease), visibility 0s linear 280ms;
  }
  .csa[data-state="open"] .csa-panel {
    transform: none;
    transition: transform 500ms var(--csa-sheet-ease), visibility 0s;
  }
  .csa[data-kb] .csa-panel {
    padding-bottom: 0;
  }
  .csa-head {
    padding: 16px 12px 12px 20px;
  }
  .csa-log {
    padding-inline: 20px;
  }
  .csa-form {
    padding: 10px 16px 12px;
  }
  /* 16px or larger, or iOS zooms the page when the field gets focus. */
  .csa-input {
    font-size: 16px;
  }
}

/* Reduced motion: no float, pulse, spring or slide. The panel only fades and
   the typing dots only pulse in opacity (these two override the site-wide
   near-zero durations on purpose). */
@media (prefers-reduced-motion: reduce) {
  .csa-panel {
    opacity: 0;
    transform: none;
    transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms !important;
  }
  .csa[data-state="open"] .csa-panel {
    opacity: 1;
    transform: none;
    transition: opacity 160ms var(--ease-out), visibility 0s !important;
  }
  .csa-typing i {
    animation: csa-typing-fade 1.2s ease-in-out infinite !important;
  }
  /* The site-wide rule gives every element a tiny transition, which would keep
     the panel's contents invisible (so unfocusable) for a moment after opening. */
  .csa-panel * {
    transition-duration: 0s !important;
  }
}

@media print {
  .csa {
    display: none !important;
  }
}

/* 28. Animated demos --------------------------------------------------------
   Scenes played by public/js/demos.js (markup: demoScene and friends in
   src/mocks.mjs). Each stage is its end state in the markup, so it reads
   without scripts and under reduced motion; the script sets the start state
   and plays it while it's on screen. Explanatory motion, so longer than UI
   timings; menus and presses keep UI timings.                              */

.demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.demo-controls[hidden] { display: none; }
.demo-scene--center .demo-controls { justify-content: center; }
.demo-scene.is-paused *, .demo-scene.is-paused *::before, .demo-scene.is-paused *::after { animation-play-state: paused !important; }

/* Menus and lists the scenes open: Lightning-like popovers anchored to their trigger. */
.ib-menu, .rm-popmenu, .rm-listbox {
  position: absolute; z-index: 2; display: grid; padding: 4px 0;
  background: #fff; border: 1px solid var(--app-line); border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
  opacity: 0; transform: scale(.96); visibility: hidden;
  transition: opacity 150ms ease, transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.ib-menu.is-open, .rm-popmenu.is-open, .rm-listbox.is-open {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 150ms ease, transform 180ms var(--ease-out), visibility 0s;
}
.ib-menu-item, .rm-popmenu-item, .rm-listbox > span { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12.5px; color: var(--app-text); white-space: nowrap; transition: background-color .15s ease; }
.ib-menu-item.is-active, .rm-popmenu-item.is-active, .rm-listbox > span.is-active { background: #f3f3f3; }
.ib--demo .app-btn, .rm--scene .rm-send { transition: transform var(--dur-press) var(--ease-out), box-shadow .2s ease; }
.ib--demo .app-btn.is-pressed { transform: scale(.96); box-shadow: 0 0 0 3px rgba(1, 118, 211, .2); }

/* Shared inbox. The "no conversation" placeholder and the open conversation share grid cells and cross-fade. */
.ib--demo { position: relative; }
.ib--demo > .ib-list { grid-column: 1; grid-row: 1; }
.ib--demo > .ib-convo { grid-column: 2; grid-row: 1; }
.ib--demo > .ib-details { grid-column: 3; grid-row: 1; }
.ib-placeholder { grid-column: 2 / -1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 32px; text-align: center; background: #fff; border: 1px solid var(--app-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.ib-placeholder-art { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: #eef4ff; color: var(--app-blue); }
.ib-placeholder-art .icon { width: 22px; height: 22px; }
.ib-placeholder-title { font-size: 14px; font-weight: 700; }
.ib--demo :is([data-ib="placeholder"], [data-ib="convo"], [data-ib="details"], [data-ib="in"], [data-ib="in-meta"], [data-ib="out"], [data-ib="out-meta"]) { transition: opacity .35s ease, transform .35s var(--ease-out); }
/* Rows are opaque so the one moving to the top can slide over the others. */
.ib--demo .ib-row:not(.is-selected) { background: #fff; }
.ib--demo .ib-row { position: relative; }
.ib--demo [data-ib="row"] { z-index: 1; }
.ib--demo .ib-count { animation: ib-pop 240ms var(--ease-out); }
@keyframes ib-pop { from { opacity: 0; transform: scale(.6); } }
.ib--demo .ib-convo-actions { position: relative; }
.ib-menu { top: calc(100% + 4px); right: 32px; min-width: 150px; transform-origin: top right; }
.ib-menu-item .icon { width: 13px; height: 13px; color: var(--app-muted); }
.ib--demo .ib-thread { position: relative; }
.ib-toast { position: absolute; top: 12px; left: 50%; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 4px; background: #2e844a; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); transform: translateX(-50%); transition: opacity .25s ease, transform .3s var(--ease-out); }
.ib-toast.is-hidden { opacity: 0; transform: translate(-50%, -8px); }
.ib-toast .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.ib-textarea.is-typing { color: var(--app-text); }
.ib-textarea.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; background: var(--app-blue); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@media (max-width: 760px) {
  /* One pane, like the product on a narrow screen: the conversation stays open and the new text lands in it. */
  .ib--demo > .ib-convo { grid-column: 1; }
  .ib-placeholder { display: none; }
  .ib--demo > .ib-convo.is-hidden { opacity: 1; transform: none; }
}

/* Scheduling. The record component has a fixed height, so opening the Schedule fields scrolls the thread instead of growing the card. */
.rm--scene { height: 460px; }
.rm--scene .rm-history { flex: 1; min-height: 0; overflow: hidden; }
.rm--scene :is([data-sd="out"], [data-sd="out-meta"], [data-sd="sends"], [data-sd="summary"]) { transition: opacity .4s ease, transform .4s var(--ease-out); }
.rm-sends { gap: 6px; }
.rm-sends > .icon { color: var(--app-muted); }
.rm-sends .rm-link { margin-left: 6px; }
/* A composer row that opens and collapses (height via grid rows, as an accordion would). */
.rm-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out); }
.rm-reveal > div { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.rm-reveal.is-open { grid-template-rows: 1fr; }
.rm-reveal.is-open > div { opacity: 1; transition-delay: .08s; }
.rm-reveal.is-settled > div { overflow: visible; }
.rm--scene .rm-bar { position: relative; }
.rm-popmenu { right: 0; bottom: calc(100% + 6px); min-width: 180px; transform-origin: bottom right; }
.rm-popmenu-item { justify-content: space-between; gap: 16px; }
.rm-popmenu-item .icon { width: 13px; height: 13px; color: var(--app-blue); stroke-width: 2.4; visibility: hidden; }
.rm-popmenu-item.is-checked .icon { visibility: visible; }
.rm--scene .app-input { transition: border-color .15s ease, box-shadow .15s ease; }
.rm--scene .app-input.is-focus { border-color: var(--app-blue); box-shadow: 0 0 0 2px rgba(1, 118, 211, .22); }
.rm-time { position: relative; }
.rm-time .is-placeholder { color: #939393; }
.rm-listbox { left: -1px; right: -1px; bottom: calc(100% + 4px); transform-origin: bottom center; }
.rm-listbox > span { padding: 5px 10px; font-size: 12px; }

/* Flow. The Case record beside a compact Flow Builder canvas: Start → Text the customer → Was the text accepted? */
.demo.demo--flow { grid-template-columns: minmax(0, 1fr) 196px; gap: 16px; }
.demo--flow .rm-history { height: 236px; min-height: 0; overflow: hidden; }
.record-icon--case { background: #f2cf5b; }
.demo--flow [data-fl="case-status"] { justify-self: start; margin: 0 -4px; padding: 0 4px; border-radius: 4px; transition: background-color .8s ease; }
.demo--flow [data-fl="case-status"].is-changed { background: #fdefc3; transition-duration: .15s; }
.demo--flow :is([data-fl="out"], [data-fl="out-meta"]) { transition: opacity .45s ease, transform .45s var(--ease-out); }
.flowcol { align-self: center; padding: 12px 12px 14px; background: #f3f3f3; }
.flowcol-head { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.flowcol-head .logo-mark { width: 18px; height: 18px; flex: none; }
.flow-nodes { display: flex; flex-direction: column; align-items: stretch; }
.flow-node { display: flex; align-items: center; gap: 8px; padding: 8px 9px; background: #fff; border: 1px solid #dddbda; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: border-color .3s ease, box-shadow .3s ease; }
.flow-node b { display: block; font-size: 11.5px; line-height: 1.25; }
.flow-node small { display: block; font-size: 10.5px; line-height: 1.3; color: var(--app-muted); }
.flow-node.is-lit { border-color: var(--app-blue); }
.flow-node.is-current { box-shadow: 0 0 0 3px rgba(1, 118, 211, .2); }
.flow-node-icon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.flow-node--start .flow-node-icon { background: #06706b; color: #fff; }
.flow-node--start .flow-node-icon .icon { width: 10px; height: 10px; margin-left: 2px; fill: currentColor; }
img.flow-node-icon { border-radius: 6px; }
.flow-node--decision .flow-node-icon { width: 18px; height: 18px; margin: 3px; border-radius: 3px; background: #dd7a01; transform: rotate(45deg); }
.flow-link { position: relative; align-self: center; width: 2px; height: 16px; overflow: hidden; background: #c9c9c9; }
.flow-link::after { content: ""; position: absolute; inset: 0; background: var(--app-blue); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease-in-out); }
.flow-link.is-on::after { transform: none; }
.flow-branch { align-self: center; padding: 1px 9px; border: 1px solid #c9c9c9; border-radius: 999px; background: #fff; font-size: 10.5px; font-weight: 600; transition: border-color .3s ease, color .3s ease, background-color .3s ease; }
.flow-branch.is-lit { border-color: #2e844a; background: #ebf7e6; color: #2e844a; }
@media (max-width: 760px) {
  /* The canvas becomes a row of three steps above the case. */
  .demo.demo--flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .flowcol { order: -1; align-self: stretch; }
  .flow-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .flow-link, .flow-branch { display: none; }
  .flow-node { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ConnectSMS marketing site: "salesforce-design-system" theme
   ------------------------------------------------------------------------
   Used when DESIGN.theme is "salesforce-design-system" in src/config.mjs.
   The build appends this file to site.css and ships the result as one
   stylesheet, dist/css/salesforce-design-system.css, and sets
   <html data-design="salesforce-design-system">.
   The rules and the reasons behind them are in docs/salesforce-design-system.md.

   site.css is never edited. This file overrides its tokens first (T1), then
   components where a token isn't enough. Product recreations (site.css
   sections 12, 13 and 23) keep the classic tokens: see T16.

   Note for overrides: site.css changes some components inside media
   queries. A plain rule here would beat those too (same specificity, later
   in the cascade), so rules for those properties sit in matching queries.

   T1. Tokens              T7. Fact bar             T13. Footer
   T2. Base & type         T8. Cards & grids        T14. Assistant
   T3. Buttons & tags      T9. Split sections       T15. Dark sections & tour
   T4. Header & nav        T10. FAQ                 T16. Product recreations
   T5. Breadcrumbs         T11. CTA band
   T6. Heroes              T12. Forms, pricing, contact
   ------------------------------------------------------------------------ */

/* T1. Tokens -------------------------------------------------------------- */

:root[data-design="salesforce-design-system"] {
  /* Primitives from the design-system skill (color.*). Components use the
     semantic roles below, never these directly. */
  --ds-text-primary: #080707;
  --ds-text-secondary: #ffffff;
  --ds-text-tertiary: #0b5cab;
  --ds-text-inverse: #022ac0;
  --ds-surface-base: #000000;
  --ds-surface-raised: #066afe;
  --ds-surface-strong: #0176d3;

  /* font.* - Geist stands in for the proprietary Salesforce Sans (never shipped
     or linked); Arial is the skill's own fallback. One family: the serif accent
     goes, so --serif points at the sans. */
  --font: "Geist", Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--font);
  --fs-xs: 14px;
  --fs-sm: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 25px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  /* Display steps above the skill's scale, for page-top headlines only:
     5xl for .h1, 6xl for the home .display (both from desktop widths up). */
  --fs-5xl: 48px;
  --fs-6xl: 64px;
  --lh-base: 1.5; /* font.lineHeight.base: 24px on 16px */
  --lh-display: 1.08;
  --lh-heading: 1.2;
  --lh-title: 1.3;
  --tracking-tight: -0.01em;

  /* Text and lines: tints of color.text.primary. Contrast on white / --bg-soft. */
  --text: var(--ds-text-primary); /* 20.1 : 1 */
  --text-2: #393939; /* 11.6 / 10.5 */
  --muted: #525151; /* 7.9 / 7.2 */
  --faint: #6b6a6a; /* 5.4 / 4.9, the smallest text colour */
  --line: #e5e5e5; /* decorative dividers only */
  --line-2: #d4d4d4;
  --line-3: #858484; /* control boundaries, 3.7 : 1 on white */

  /* Surfaces */
  --bg: #ffffff;
  --surface: #ffffff;
  --bg-soft: #f4f4f4;
  --bg-tint: #eef4ff;

  /* Blue roles. --brand is the text-safe accent (links, eyebrows, icons,
     borders), 6.7 : 1 on white and 6.1 : 1 on --bg-soft. --action is the
     fill of primary controls (white text 4.7 : 1). */
  --brand: var(--ds-text-tertiary);
  --brand-600: var(--ds-text-inverse);
  --brand-700: var(--ds-text-inverse);
  --brand-50: #eef4ff;
  --brand-100: #d6e6ff;
  --action: var(--ds-surface-raised);
  --action-strong: var(--ds-surface-strong);
  /* No violet in this system: the violet accents fold into the blue roles. */
  --violet: var(--brand);
  --violet-ink: var(--brand);
  --violet-50: var(--brand-50);

  /* Dark stage (color.surface.base) for the engine sections and the tour. */
  --stage: var(--ds-surface-base);
  --stage-2: #121212;
  --stage-3: #1f1f1f;
  --stage-fg: var(--ds-text-secondary);
  --stage-muted: #a3a3a3; /* 8.3 : 1 on the stage */
  --stage-line: rgba(255, 255, 255, 0.14);
  --stage-accent: #8ab8ff; /* 10.4 : 1 on the stage */

  /* radius.* */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* shadow.* - three elevations; nothing else casts a shadow. */
  --ds-shadow-1: rgba(23, 23, 23, 0.08) 0px 2px 8px -2px, rgba(23, 23, 23, 0.16) 0px 8px 12px -2px;
  --ds-shadow-2: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --ds-shadow-3: rgba(23, 23, 23, 0.09) -3px 0px 24px 0px;
  --shadow-xs: 0 0 #0000;
  --shadow-sm: var(--ds-shadow-1);
  --shadow: var(--ds-shadow-1);
  --shadow-lg: var(--ds-shadow-2);
  --shadow-side: var(--ds-shadow-3);
  --highlight: 0 0 #0000;

  /* motion.duration.* (the easing curves stay site.css's) */
  --dur-press: 100ms;
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 300ms;

  /* Layout rhythm: the skill's space.* tops out at 24px; larger steps go up
     in multiples of 8px (32, 48, 64, 96). */
  --section-y: clamp(48px, 7vw, 96px);
}

/* T2. Base & type --------------------------------------------------------- */

body {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
:focus-visible {
  outline-offset: 2px;
}
.cta-band :focus-visible {
  outline-color: #fff;
}
.menu-aside :focus-visible {
  outline-color: var(--brand);
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-title);
}
/* The accent phrase keeps its colour but not a second typeface. */
h1 em,
h2 em,
h3 em {
  font-style: normal;
  font-weight: inherit;
  font-size: 1em;
  letter-spacing: inherit;
  color: var(--action);
}
/* Page-top headlines use the display steps: 40 to 64px on home, 32 to 48px elsewhere. */
.display {
  font-size: clamp(var(--fs-4xl), 4vw + 16px, var(--fs-6xl));
  line-height: var(--lh-display);
  letter-spacing: -0.025em;
  font-weight: 700;
}
.h1 {
  font-size: clamp(var(--fs-3xl), 2.667vw + 16px, var(--fs-5xl));
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.display em {
  font-size: 1em;
  line-height: inherit;
}
.h2 {
  font-size: clamp(var(--fs-2xl), 1.75vw + 11px, var(--fs-3xl));
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}
.h3 {
  font-size: clamp(var(--fs-lg), 1vw + 12px, var(--fs-xl));
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-tight);
}
.h4 {
  font-size: var(--fs-md);
  letter-spacing: 0;
}
.lede {
  font-size: clamp(var(--fs-md), 0.5vw + 14px, var(--fs-lg));
  line-height: var(--lh-base);
  letter-spacing: 0;
}
.small {
  font-size: var(--fs-xs);
}
.eyebrow {
  gap: 10px;
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
}
.eyebrow--badge {
  padding: 5px 14px 5px 12px;
  border-color: var(--line-2);
  border-radius: var(--radius-pill);
  box-shadow: none;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
@media (max-width: 400px) {
  .eyebrow--badge {
    padding-inline: 10px 12px;
    white-space: normal;
  }
}
.section-head {
  margin-bottom: clamp(32px, 4vw, 48px);
}
.section-head .eyebrow + * {
  margin-top: 12px;
}
.text-link {
  gap: 5px;
  color: var(--brand);
  font-weight: 600;
  text-underline-offset: 3px;
}
.text-link:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

/* T3. Buttons & tags ------------------------------------------------------ */

/* Control heights step by 8px with the text: sm 40 / 14, md 48 / 16, lg 56 / 18. */
.btn {
  --btn-h: 48px;
  gap: 10px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease,
    box-shadow var(--dur) ease, transform var(--dur-press) var(--ease-out);
}
.btn-sm {
  --btn-h: 40px;
  padding: 0 16px;
  font-size: var(--fs-xs);
}
.btn-lg {
  --btn-h: 56px;
  padding: 0 24px;
  font-size: var(--fs-md);
}
.btn-primary {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:active {
  background: var(--brand-700);
  border-color: var(--brand-700);
}
.btn-secondary {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--brand-50);
  border-color: var(--brand-700);
  color: var(--brand-700);
}
.btn-secondary:active {
  background: var(--brand-100);
}
.btn-ghost {
  color: var(--brand);
}
.btn-ghost:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}
.section--dark .btn-secondary,
.btn-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.72);
  color: var(--stage-fg);
}
.section--dark .btn-secondary:hover,
.btn-on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: var(--stage-fg);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--bg-soft);
  border-color: var(--line-2);
  color: var(--faint);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn[aria-busy="true"] {
  cursor: progress;
}
.btn-row {
  gap: 12px;
}

.tag {
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.tag .icon {
  width: 14px;
  height: 14px;
}
.tag--brand {
  background: var(--brand-50);
  color: var(--brand);
}
.pillar-points {
  gap: 10px;
}
.pillar-points li {
  padding: 5px 12px;
  background: var(--bg-soft);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.chip-cloud li {
  border-color: var(--line-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.chip-cloud li:has(> a:only-child) {
  box-shadow: none;
}
.chip-cloud li:has(> a:only-child):hover {
  border-color: var(--brand);
  box-shadow: none;
}
.chip-cloud li:has(> a:only-child):hover a {
  color: var(--brand);
}
.stack-chip {
  border-color: var(--line-2);
  box-shadow: none;
  font-size: var(--fs-sm);
}
.stack-chip--brand {
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

/* T4. Header & nav -------------------------------------------------------- */

.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--line);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--bg);
  }
}
.menu-toggle {
  border-color: var(--line-3);
  border-radius: var(--radius-sm);
}
.menu-link:hover,
.menu-link[aria-current="page"] {
  background: var(--bg-soft);
}
.menu-link {
  border-radius: var(--radius-sm);
}
.menu-icon {
  border-radius: 50%;
}
.menu-text strong {
  font-size: var(--fs-sm);
  letter-spacing: 0;
}
.menu-text small {
  font-size: var(--fs-xs);
  line-height: 1.4;
}
/* The menu's side panel sits on a light tint, not the dark stage. */
.menu-aside {
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-sm);
  background: var(--bg-tint);
  color: var(--text);
}
.menu-aside strong {
  color: var(--text);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}
.menu-aside p {
  color: var(--muted);
  font-size: var(--fs-xs);
}
.menu-aside .text-link {
  color: var(--brand);
  font-size: var(--fs-xs);
}

@media (min-width: 1081px) {
  .nav-trigger,
  .nav-link {
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-sm);
  }
  .nav-trigger:hover,
  .nav-link:hover,
  .nav-trigger[aria-expanded="true"] {
    background: var(--bg-soft);
    color: var(--text);
  }
  /* Current section: blue text on a 2px underline. */
  .nav-link[aria-current="page"],
  .nav-item.is-current > .nav-trigger {
    color: var(--brand);
    box-shadow: inset 0 -2px 0 var(--brand);
  }
  .nav-menu {
    border-radius: var(--radius);
    border-color: var(--line);
    box-shadow: var(--shadow-lg);
  }
}
@media (max-width: 1080px) {
  .nav-trigger,
  .nav-link {
    font-size: var(--fs-md);
  }
  .nav-link[aria-current="page"],
  .nav-item.is-current > .nav-trigger {
    color: var(--brand);
  }
}

/* T5. Breadcrumbs --------------------------------------------------------- */

.breadcrumbs {
  font-size: var(--fs-xs);
}
.breadcrumbs a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumbs [aria-current="page"] {
  font-weight: 600;
}

/* T6. Heroes -------------------------------------------------------------- */

/* A light tint that fades to white; no dot field, no violet glow. */
.home-hero,
.page-hero {
  background: linear-gradient(180deg, var(--bg-tint), var(--bg) 78%);
}
.home-hero::before,
.page-hero::after {
  content: none;
}
.home-hero::after {
  background: radial-gradient(closest-side, rgba(6, 106, 254, 0.1), transparent 70%);
}
.page-hero::before {
  background: radial-gradient(closest-side, rgba(6, 106, 254, 0.08), transparent 70%);
}
.home-hero {
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 7vw, 96px);
}
.home-hero-copy > * + * {
  margin-top: 24px;
}
.home-hero-copy .eyebrow--badge + .display {
  margin-top: 24px;
}
.home-hero-copy .btn-row,
.page-hero-copy .btn-row {
  margin-top: 32px;
}
.page-hero-copy .eyebrow + .h1 {
  margin-top: 12px;
}
.hero-answer {
  padding: 20px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.page-hero-aside .hero-answer {
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.page-hero-aside .hero-answer strong {
  font-size: var(--fs-md);
  letter-spacing: 0;
}
.assurance {
  font-size: var(--fs-xs);
}

/* T7. Fact bar ------------------------------------------------------------ */

.facts {
  background: var(--bg-soft);
}
.facts-list strong {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0;
}
.facts-list span span {
  font-size: var(--fs-xs);
}

/* T8. Cards & grids ------------------------------------------------------- */

.card {
  padding: 24px;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-title);
  letter-spacing: 0;
}
.card p {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
a.card:hover,
.card--link:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}
.card--link:has(.card-link-overlay:focus-visible) {
  outline-offset: 2px;
}
.card-icon {
  border-radius: 50%;
  box-shadow: none;
  margin-bottom: 16px;
}
.card-kicker {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
/* The product crop at the top of a pillar card bleeds to the card's edges. */
.pillar-visual {
  margin: -24px -24px 24px;
  background: linear-gradient(180deg, var(--bg-tint), var(--bg-soft));
}
.pillars .card .text-link {
  padding-top: 16px;
}
.feature-list .feature-icon {
  border-radius: 50%;
}
.feature-list h3 {
  font-size: var(--fs-md);
  letter-spacing: 0;
}
.feature-list p {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.stat-row strong {
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.stat-row span {
  font-size: var(--fs-xs);
}
.highlight {
  padding: 20px;
}
.highlight h3,
.role h3,
.compare-col h3 {
  font-size: var(--fs-md);
  letter-spacing: 0;
}
.highlight p,
.compare-col p {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.compare-col--good {
  background: var(--bg-tint);
  box-shadow: var(--shadow-sm);
}
.flow li {
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}
/* Strong brand surfaces (the highlighted step, the ConnectSMS box, step
   numbers) use color.surface.strong; white text on it is 4.6 : 1. */
.flow li.is-brand,
.section--dark .flow li.is-brand {
  background: var(--action-strong);
  border-color: var(--action-strong);
}
.workflow-card .flow li.is-brand .icon,
.pipeline-card .flow li.is-brand .icon {
  border-color: var(--action-strong);
  background: var(--action-strong);
  box-shadow: 0 0 0 4px rgba(1, 118, 211, 0.14);
}
.gstep-n {
  background: var(--action-strong);
}
.workflow-card .flow li,
.pipeline-card .flow li {
  font-size: var(--fs-sm);
}
.pipeline-card {
  padding: 24px;
}
.pipeline-label,
.byo-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.action-grid li {
  border-radius: var(--radius-sm);
}
.action-grid .num {
  border-radius: 50%;
  font-size: var(--fs-xs);
}
.action-grid strong {
  font-size: var(--fs-sm);
  letter-spacing: 0;
}
.action-grid span {
  font-size: var(--fs-xs);
}
.byo-box {
  border-radius: var(--radius-sm);
}
.byo-box .icon {
  border-radius: 50%;
}
.byo-box b,
.journey-label {
  font-size: var(--fs-sm);
}
.byo-box span,
.byo-note,
.tour-note {
  font-size: var(--fs-xs);
}
.byo-box--brand {
  background: var(--action-strong);
  border-color: var(--action-strong);
}
.byo-box--brand span {
  color: #fff;
}

.prose {
  font-size: var(--fs-md);
  line-height: 1.6;
}
.prose h2 {
  font-size: clamp(var(--fs-2xl), 1.75vw + 11px, var(--fs-3xl));
  letter-spacing: var(--tracking-tight);
}
.prose h3 {
  font-size: var(--fs-lg);
  letter-spacing: 0;
}
.prose h4 {
  font-size: var(--fs-md);
  letter-spacing: 0;
}
.callout {
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.toc,
.article-meta {
  font-size: var(--fs-xs);
}
/* Setup guide labels: sentence case at the smallest size, like the eyebrows. */
.gpart-kicker,
.gparts-n,
.tw-path-label {
  font-size: var(--fs-xs);
  letter-spacing: 0;
  text-transform: none;
}
.gparts a,
.console-switch {
  border-radius: var(--radius);
}
.gchecklist label,
.console-switch button {
  border-radius: var(--radius-sm);
}
.gparts-time,
.console-switch button small,
.screenshot-source {
  font-size: var(--fs-xs);
}

/* T9. Split sections ------------------------------------------------------ */

.split-copy > * + * {
  margin-top: 16px;
}
.split-copy .checks,
.split-copy .btn-row,
.split-copy .highlight {
  margin-top: 24px;
}
/* The stage a product recreation sits on: tint to grey, no dot field. */
.visual-frame {
  background: linear-gradient(180deg, var(--bg-tint), var(--bg-soft));
  box-shadow: none;
}
.visual-frame::before {
  content: none;
}
.visual-frame--dark {
  background: radial-gradient(120% 90% at 20% 0%, var(--stage-3), var(--stage) 60%);
}
.shot {
  border-radius: var(--radius);
}
figcaption.caption,
.recreation-note {
  font-size: var(--fs-xs);
}

/* T10. FAQ ---------------------------------------------------------------- */

.faq summary {
  padding: 20px 4px;
  font-size: var(--fs-md);
  letter-spacing: 0;
}
.card .faq summary,
.card details > summary {
  font-size: var(--fs-sm);
}
.faq summary::after {
  background: var(--brand-50)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5cab' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}
.card .faq summary::after {
  background-size: 12px;
}
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover {
    color: var(--brand);
  }
  .faq summary:hover::after {
    background-color: var(--brand-100);
  }
}
.faq summary:focus-visible {
  border-radius: var(--radius-sm);
}
.faq .answer {
  line-height: var(--lh-base);
}

/* T11. CTA band ----------------------------------------------------------- */

/* A strong blue surface (color.surface.strong into text.inverse). White
   text stays at 4.6 : 1 or better everywhere on it. */
.cta-band {
  background: linear-gradient(135deg, var(--action-strong), var(--brand-700));
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  background: radial-gradient(closest-side, rgba(6, 106, 254, 0.55), transparent 70%);
}
.cta-band::after {
  content: none;
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(var(--fs-3xl), 2vw + 16px, var(--fs-4xl));
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}
.cta-band h2 em {
  color: #fff;
}
.cta-band .cta-kicker {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(2, 42, 192, 0.45);
  color: #fff;
  font-size: var(--fs-xs);
}
.cta-band .cta-kicker .icon,
.cta-band .assurance .icon {
  color: #fff;
}
.cta-band p {
  color: #fff;
  font-size: var(--fs-md);
}
.cta-band .fine {
  color: #fff;
  font-size: var(--fs-xs);
}
.cta-band .assurance {
  color: #fff;
}
/* On the blue band the primary action turns white, so it still reads as the one to press. */
.cta-band .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--brand);
}
.cta-band .btn-primary:hover {
  background: var(--brand-50);
  border-color: var(--brand-50);
  color: var(--brand-700);
}
.cta-band .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
}
.cta-band .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

/* T12. Forms, pricing, contact -------------------------------------------- */

.form-card {
  border-color: var(--line);
  box-shadow: var(--shadow-lg);
}
.field label,
.field .label {
  font-size: var(--fs-xs);
}
.field input,
.field select,
.field textarea {
  padding: 12px 14px;
  border-color: var(--line-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.field select {
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action), 0 0 0 4px rgba(6, 106, 254, 0.2);
}
.field [aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
.field [aria-invalid="true"]:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 0 0 4px rgba(192, 54, 44, 0.18);
}
.field-error,
.field-hint,
.form-foot p {
  font-size: var(--fs-xs);
}
.form-status {
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.price-card {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.price-card--brand {
  border: 2px solid var(--action);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.price-amount strong {
  font-size: var(--fs-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.price-amount span {
  font-size: var(--fs-sm);
}
.price-note {
  font-size: var(--fs-xs);
}
.price-note--trial {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand);
}
.contact-hero .h1 {
  font-size: clamp(var(--fs-3xl), 2vw + 16px, var(--fs-4xl));
}
.contact-steps span {
  font-size: var(--fs-xs);
}
.contact-steps p,
.contact-side,
.aside-cta strong {
  font-size: var(--fs-sm);
}
.aside-cta p {
  font-size: var(--fs-xs);
}

/* T13. Footer ------------------------------------------------------------- */

.site-footer {
  padding: clamp(48px, 7vw, 96px) 0 32px;
  border-top-color: var(--line);
  font-size: var(--fs-xs);
}
.footer-brand p {
  font-size: var(--fs-xs);
}
.footer-col h2 {
  margin-bottom: 16px;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.footer-col ul {
  gap: 12px;
}
.footer-col a:hover,
.footer-bottom a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom {
  font-size: var(--fs-xs);
}

/* T14. Assistant ---------------------------------------------------------- */
/* The launcher (the red ConnectSMS app icon) is left exactly as it is. */

/* Panel motion stays inside motion.duration.slow; the spring curve that
   assistant.js samples still shapes the desktop open. Reduced-motion rules in
   site.css use !important and still win. */
.csa[data-state="open"] .csa-panel {
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--csa-open-ease), visibility 0s;
}
@media (max-width: 640px) {
  .csa-panel {
    transition: transform var(--dur-slow) var(--csa-sheet-ease), visibility 0s linear var(--dur-slow);
  }
  .csa[data-state="open"] .csa-panel {
    transition: transform var(--dur-slow) var(--csa-sheet-ease), visibility 0s;
  }
}
.csa-panel {
  box-shadow: var(--shadow-side), var(--shadow-lg);
}
.csa-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0;
}
.csa-sub,
.csa-list-text span,
.csa-chips-label,
.csa-fine,
.csa-ref {
  font-size: var(--fs-xs);
}
.csa-bubble {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.csa-msg--user .csa-bubble {
  border-color: var(--action);
  background: var(--action);
}
.csa-list-icon {
  border-radius: 50%;
}
.csa-list-text strong {
  letter-spacing: 0;
}
.csa-chip {
  border-color: var(--brand);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .csa-chip:hover {
    border-color: var(--brand-700);
    background: var(--brand-50);
    color: var(--brand-700);
  }
}
.csa-hint {
  border-color: var(--line-2);
  font-size: var(--fs-xs);
}
.csa-field {
  border-color: var(--line-3);
}
.csa-field:focus-within {
  border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action), 0 0 0 4px rgba(6, 106, 254, 0.2);
}
.csa-input {
  font-size: var(--fs-sm);
}
.csa-send {
  border-color: var(--action);
  background: var(--action);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .csa-send:not(:disabled):hover {
    border-color: var(--brand);
    background-color: var(--brand);
  }
}

/* T15. Dark sections & tour ----------------------------------------------- */

.section--dark {
  background: radial-gradient(70% 60% at 85% 0%, rgba(6, 106, 254, 0.24), transparent 70%), var(--stage);
  --text-2: #d4d4d4;
}
.code {
  border-color: var(--stage-3);
  background: var(--stage-2);
}
.code-head {
  border-bottom-color: var(--stage-3);
}
.auto-card {
  border-radius: var(--radius-sm);
}
.auto-card .icon {
  border-radius: 50%;
}
.auto-card b {
  font-size: var(--fs-sm);
}
.auto-card span {
  font-size: var(--fs-xs);
}
.ww-label-text,
.ww-name {
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.ww-kicker,
.ww-hint {
  font-size: var(--fs-xs);
}
.ww-caption {
  font-size: var(--fs-sm);
}
.ww-title-inner.is-swapping {
  animation-duration: var(--dur-slow);
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transition-duration: var(--dur-slow);
  }
}

/* T16. Product recreations ------------------------------------------------
   The HTML recreations of the ConnectSMS UI (site.css sections 12, 13, 23, 28)
   imitate the real Lightning product, so they keep the classic tokens. The
   hero demo's step list and Replay button (section 13) belong to the demo
   and are pinned with it. :where() adds no specificity, so anything site.css
   sets on these roots (like .app's own --text) still wins. */

:where(.app, .demo, .phone, .capture, .demo-steps, .demo-replay) {
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --bg-tint: #eef3ff;
  --surface: #ffffff;
  --text: #0a1a33;
  --text-2: #33415a;
  --muted: #56637b;
  --faint: #667085;
  --line: #e3e8f0;
  --line-2: #d3dae6;
  --line-3: #b4bdcc;
  --brand: #0b5cff;
  --brand-600: #0848cc;
  --brand-700: #0a3aa3;
  --brand-50: #eef3ff;
  --brand-100: #dbe6ff;
  --violet: #6b4cff;
  --violet-ink: #5b3fe0;
  --violet-50: #f1edff;
  --stage: #050f22;
  --stage-2: #0a1a36;
  --stage-3: #12264a;
  --stage-fg: #eef3fb;
  --stage-muted: #93a3bd;
  --stage-line: rgba(255, 255, 255, 0.1);
  --stage-accent: #8fb8ff;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-xs: 0 1px 2px rgba(10, 26, 51, 0.06);
  --shadow-sm: 0 1px 2px rgba(10, 26, 51, 0.05), 0 2px 8px -2px rgba(10, 26, 51, 0.08);
  --shadow: 0 1px 2px rgba(10, 26, 51, 0.04), 0 4px 12px -4px rgba(10, 26, 51, 0.08), 0 18px 40px -18px rgba(10, 26, 51, 0.2);
  --shadow-lg: 0 1px 2px rgba(10, 26, 51, 0.04), 0 8px 20px -8px rgba(10, 26, 51, 0.1), 0 36px 72px -28px rgba(10, 26, 51, 0.32);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dur-press: 160ms;
  --dur-fast: 180ms;
  --dur: 240ms;
  font-family: var(--font);
  line-height: 1.6;
  color: var(--text);
}
:where(.app, .demo, .phone, .capture, .demo-steps, .demo-replay) :focus-visible,
:where(.demo-replay):focus-visible {
  outline-offset: 3px;
}
/* Rules site.css applies from outside that reach into a recreation: the
   Replay button takes its font from its parent (button { font: inherit }),
   and a recreation inside a card picks up .card p. */
.demo-replay {
  font-family: var(--font);
  line-height: 1.6;
}
.card :where(.app, .demo, .phone) p {
  font-size: 0.9688rem;
  line-height: 1.6;
}
:where(.app, .demo, .phone) .callout {
  border-radius: 14px;
  font-size: 0.9688rem;
}