/* Hands marketing homepage — outcome-led, theme-aware, and intentionally quiet. */
:root[data-marketing-home] {
  /* Text and interfaces need different canvases. These measures keep the page
     roomier than the old 1180px shell without letting every section dominate
     a large desktop viewport. */
  --layout-reading: 800px;
  --layout-content: 1200px;
  --layout-wide: 1520px;
  --layout-inline-space: clamp(48px, 8vw, 176px);

  /* Homepage surfaces inherit the shared light/dark ramps while retaining a
     slightly more editorial hierarchy than the product UI. */
  --marketing-header-bg: color-mix(in srgb, var(--color-bg) 92%, transparent);
  --marketing-panel-bg: var(--color-neutral-100);
  --marketing-panel-border: color-mix(in srgb, var(--color-text) 12%, transparent);
  --marketing-panel-shadow: 0 30px 70px color-mix(in srgb, var(--color-neutral-900) 16%, transparent);
  --marketing-green-section: var(--color-accent-2-100);
  --marketing-orange-section: var(--color-accent-100);
  --marketing-control-bg: color-mix(in srgb, var(--color-neutral-100) 68%, transparent);
  --marketing-control-border: color-mix(in srgb, var(--color-text) 12%, transparent);
  overflow-x: clip;
}

:root[data-theme="dark"][data-marketing-home] {
  --marketing-header-bg: color-mix(in srgb, var(--color-bg) 88%, transparent);
  --marketing-panel-bg: color-mix(in srgb, var(--color-neutral-100) 94%, #000 6%);
  --marketing-panel-border: color-mix(in srgb, var(--color-text) 15%, transparent);
  --marketing-panel-shadow: 0 30px 78px rgb(0 0 0 / 48%);
  --marketing-green-section: color-mix(in srgb, var(--color-accent-2-100) 88%, var(--color-bg));
  --marketing-orange-section: color-mix(in srgb, var(--color-accent-100) 88%, var(--color-bg));
  --marketing-control-bg: color-mix(in srgb, var(--color-neutral-100) 80%, transparent);
  --marketing-control-border: color-mix(in srgb, var(--color-text) 16%, transparent);
}

.landing-page {
  /* `hidden` creates an overflow container and prevents the shared sticky
     header from sticking to the viewport. `clip` still blocks horizontal
     paint overflow without becoming a scroll container. */
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  transition: background-color 180ms ease, color 180ms ease;
}

.landing-page .site-head {
  background: var(--marketing-header-bg);
  border-bottom-color: color-mix(in srgb, var(--color-text) 10%, transparent);
  backdrop-filter: blur(14px);
  transform: translateY(0);
  transition: transform 180ms ease, background-color 180ms ease;
  will-change: transform;
}

.landing-page .site-head.is-scroll-hidden {
  transform: translateY(calc(-100% - 2px));
}

.landing-page .site-theme-toggle {
  border-color: var(--marketing-control-border);
  background: var(--marketing-control-bg);
}

.landing-page .site-theme-toggle:hover {
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  background: color-mix(in srgb, var(--color-accent-100) 72%, transparent);
}

:root[data-theme="dark"][data-marketing-home] .landing-page .mobile-nav-panel > .mobile-nav-auth {
  color: var(--color-bg);
}

.landing-flow {
  width: 100%;
}

.landing-shell {
  --landing-shell-max: var(--layout-content);
  width: min(var(--landing-shell-max), calc(100% - var(--layout-inline-space)));
  margin-inline: auto;
}

.landing-shell--reading {
  --landing-shell-max: var(--layout-reading);
}

.landing-shell--content {
  --landing-shell-max: var(--layout-content);
}

.landing-shell--wide {
  --landing-shell-max: var(--layout-wide);
}

.landing-full-bleed {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 17px;
  color: var(--color-accent-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .105em;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-section {
  padding-top: clamp(88px, 11vw, 148px);
}

.section-heading {
  max-width: 790px;
}

.section-heading h2,
.action-intro h2,
.connection-heading h2,
.start-section h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: var(--font-heading-weight);
  letter-spacing: -.025em;
  line-height: 1.02;
}

.section-heading p,
.action-intro p,
.connection-heading > p,
.start-section > div > p {
  max-width: 58ch;
  margin: 22px 0 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  font-size: 17px;
  line-height: 1.7;
}

/* Hero */
.landing-hero {
  position: relative;
  min-height: min(820px, calc(100svh - 68px));
  display: grid;
  align-items: center;
  overflow: clip;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.landing-hero::before {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -230px;
  top: 10%;
  border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
  gap: clamp(56px, 8vw, 104px);
  align-items: center;
  padding-block: clamp(72px, 10vw, 124px);
}

/* On desktop the result card crosses the hero boundary so the promise and the
   first proof point read as one continuous story instead of two stacked bands. */
@media (min-width: 981px) {
  .landing-hero {
    overflow: visible;
  }

  .hero-copy {
    width: min(100%, 650px);
    justify-self: center;
  }

  .handoff-interface {
    z-index: 2;
    transform: translateY(clamp(180px, 11vw, 220px));
  }
}

.hero-copy h1 {
  max-width: 10.5ch;
  margin: 0 0 0 -.035em;
  font-family: var(--font-heading);
  font-size: clamp(53px, 6.3vw, 82px);
  font-weight: var(--font-heading-weight);
  letter-spacing: -.035em;
  line-height: .98;
}

.hero-copy h1 span {
  color: var(--color-accent-600);
}

.hero-lede {
  max-width: 49ch;
  margin: 30px 0 0;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
  font-size: 19px;
  line-height: 1.65;
}

.hero-audience {
  max-width: 48ch;
  margin: 18px 0 0;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 32px;
}

.btn-lg {
  min-height: 50px;
  padding: 14px 23px;
  border-radius: 15px;
  font-size: 15px;
}

.text-link {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

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

.text-link span {
  display: inline-block;
  margin-left: 5px;
}

.trial-note {
  margin: 17px 0 0;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  font-size: 12px;
  line-height: 1.5;
}

.handoff-interface {
  position: relative;
  width: min(100%, 620px);
  justify-self: end;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 32px;
  background: var(--marketing-panel-bg);
  box-shadow: var(--marketing-panel-shadow);
}

.handoff-interface::after {
  position: absolute;
  width: 150px;
  height: 150px;
  right: -76px;
  top: -76px;
  border: 32px solid color-mix(in srgb, var(--color-accent-200) 78%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.interface-top,
.interface-identity,
.finished-result,
.execution-list li {
  display: flex;
  align-items: center;
}

.interface-top {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--color-divider);
}

.interface-identity {
  gap: 10px;
}

.interface-identity img {
  width: 38px;
  height: 38px;
}

.interface-identity span,
.interface-identity b,
.interface-identity small {
  display: block;
}

.interface-identity b {
  font-size: 14px;
}

.interface-identity small {
  margin-top: 1px;
  color: color-mix(in srgb, var(--color-text) 54%, transparent);
  font-size: 11px;
}

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--color-accent-2-700) 18%, transparent);
  border-radius: 999px;
  color: var(--color-accent-2-800);
  background: var(--color-accent-2-100);
  font-size: 11px;
  font-weight: 800;
}

.live-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-2-600);
}

.instruction-bubble {
  margin: 22px 0 0 32px;
  padding: 17px 19px;
  border-radius: 19px 19px 5px 19px;
  background: var(--color-accent-200);
}

.instruction-bubble span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-accent-800);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.instruction-bubble p {
  margin: 0;
  color: var(--color-accent-900);
  font-size: 14px;
  line-height: 1.55;
}

.execution-list {
  list-style: none;
  margin: 21px 0 0;
  padding: 0;
}

.execution-list li {
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--color-divider);
}

.execution-list li > span {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border: 1px solid var(--color-divider);
  border-radius: 50%;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 10px;
  font-weight: 800;
}

.execution-list div {
  min-width: 0;
  flex: 1;
}

.execution-list b,
.execution-list small {
  display: block;
}

.execution-list b {
  font-size: 13px;
}

.execution-list small {
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  font-size: 11px;
}

.execution-list i {
  color: var(--color-accent-2-700);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.finished-result {
  gap: 13px;
  margin-top: 20px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--color-accent-2-700) 15%, transparent);
  border-radius: 20px;
  background: var(--color-accent-2-100);
}

.result-check {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-2-600);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.finished-result div {
  min-width: 0;
  flex: 1;
}

.finished-result small,
.finished-result b,
.finished-result div > span {
  display: block;
}

.finished-result small {
  color: var(--color-accent-2-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.finished-result b {
  margin-top: 2px;
  font-size: 14px;
}

.finished-result div > span {
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  font-size: 10px;
}

.finished-result > img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Outcome experience */
.outcome-browser {
  display: grid;
  grid-template-columns: clamp(250px, 18vw, 320px) minmax(0, 1fr);
  margin-top: clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.outcome-tabs {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--color-divider);
}

.outcome-tab {
  appearance: none;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  align-items: center;
  min-height: 76px;
  padding: 16px 22px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.outcome-tab:last-child {
  border-bottom: 0;
}

.outcome-tab > span {
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.outcome-tab b {
  font-size: 14px;
  line-height: 1.25;
}

.outcome-tab em {
  grid-column: 2;
  margin-top: -4px;
  color: var(--color-accent-700);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.outcome-tab:not(.is-active) {
  opacity: .47;
}

.outcome-tab:hover {
  opacity: .78;
}

.outcome-tab.is-active {
  opacity: 1;
}

.outcome-tab.is-active b {
  color: var(--color-accent-700);
}

.outcome-panels {
  min-width: 0;
  padding: clamp(34px, 5vw, 62px);
}

.outcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(250px, .7fr);
  gap: clamp(36px, 6vw, 78px);
  align-items: center;
}

.outcome-panel + .outcome-panel {
  margin-top: 70px;
  padding-top: 70px;
  border-top: 1px solid var(--color-divider);
}

.outcome-browser.is-enhanced .outcome-panel + .outcome-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.outcome-panel[hidden] {
  display: none !important;
}

.story-person {
  display: block;
  margin-bottom: 16px;
  color: var(--color-accent-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.outcome-story h3 {
  max-width: 19ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(31px, 4.3vw, 52px);
  font-weight: var(--font-heading-weight);
  letter-spacing: -.025em;
  line-height: 1.03;
}

.outcome-story > p {
  max-width: 47ch;
  margin: 21px 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-size: 15px;
  line-height: 1.7;
}

.outcome-story blockquote {
  margin: 27px 0 0;
  padding: 17px 0 0 20px;
  border: 0;
  border-left: 2px solid var(--color-accent-400);
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  font-size: 14px;
  font-style: italic;
  line-height: 1.65;
}

.outcome-result {
  padding: 22px;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 24px;
  background: var(--marketing-panel-bg);
  box-shadow: var(--shadow-md);
}

.result-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-divider);
}

.result-bar span {
  font-size: 12px;
  font-weight: 700;
}

.result-bar b {
  color: var(--color-accent-2-700);
  font-size: 9px;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.outcome-result ul {
  list-style: none;
  margin: 17px 0 0;
  padding: 0;
}

.outcome-result li {
  position: relative;
  padding: 8px 0 8px 24px;
  color: color-mix(in srgb, var(--color-text) 77%, transparent);
  font-size: 13px;
}

.outcome-result li::before {
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--color-accent-2-600);
  content: "✓";
  font-weight: 800;
}

.app-path {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 21px;
  padding-top: 17px;
  border-top: 1px solid var(--color-divider);
}

.app-path img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.future-panel .story-person,
.future-panel .result-bar b {
  color: var(--color-accent-700);
}

.future-panel .outcome-result {
  background: var(--marketing-orange-section);
}

/* Action spectrum */
.action-section {
  margin-top: clamp(88px, 11vw, 148px);
  padding: clamp(48px, 7vw, 82px);
  border-radius: 46px;
  background: var(--marketing-green-section);
}

.action-section.page-section {
  padding-top: clamp(48px, 7vw, 82px);
}

.action-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .65fr);
  gap: clamp(40px, 8vw, 110px);
  align-items: end;
}

.action-intro .eyebrow,
.action-intro h2 {
  grid-column: 1;
}

.action-intro p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0;
}

.action-words {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: clamp(46px, 6vw, 72px) 0 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-accent-2-900) 17%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-2-900) 17%, transparent);
}

.action-words li {
  flex: 1 0 auto;
  padding: 20px 17px;
  border-right: 1px solid color-mix(in srgb, var(--color-accent-2-900) 17%, transparent);
  color: var(--color-accent-2-900);
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, 28px);
  text-align: center;
}

.action-words li:last-child {
  border-right: 0;
}

.permission-note {
  max-width: 86ch;
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--color-accent-2-900) 65%, transparent);
  font-size: 12px;
  line-height: 1.65;
}

.permission-note span {
  margin-right: 6px;
  color: var(--color-accent-2-700);
}

/* AI providers and live connector rail */
.connection-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr);
  gap: clamp(48px, 8vw, 110px);
  align-items: end;
}

.connection-heading h2 {
  max-width: 17ch;
}

.connection-heading > p {
  margin: 0;
}

.provider-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(46px, 6vw, 70px);
  padding-block: 21px;
  overflow-x: auto;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  scrollbar-width: none;
}

.provider-line::-webkit-scrollbar {
  display: none;
}

.provider-line span,
.provider-line strong {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-neutral-100) 55%, transparent);
  font-size: 12px;
  white-space: nowrap;
}

.provider-line img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.provider-line i {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--color-text) 34%, transparent);
  font-style: normal;
}

.provider-line strong {
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

.connector-showcase {
  margin-top: 42px;
}

.connector-showcase-head > div:first-child b,
.connector-showcase-head > div:first-child span {
  display: block;
}

.connector-showcase-head > div:first-child b {
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -.02em;
}

.connector-showcase-head > div:first-child span {
  margin-top: 6px;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-size: 11px;
}

.connector-marquee {
  --connector-gap: clamp(52px, 5.5vw, 84px);
  display: grid;
  width: 100%;
  max-width: 100%;
  gap: clamp(4px, .7vw, 10px);
  margin-top: 16px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 46px, #000 calc(100% - 46px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 46px, #000 calc(100% - 46px), transparent);
}

.connector-marquee.landing-full-bleed {
  width: 100vw;
  max-width: none;
}

.connector-marquee:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 72%, transparent);
  outline-offset: 3px;
}

.connector-lane {
  width: 100%;
  overflow: hidden;
}

.connector-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.connector-group {
  list-style: none;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--connector-gap);
  margin: 0;
  padding: 3px var(--connector-gap) 3px 0;
}

.connector-item {
  display: inline-flex;
  width: 55px;
  min-height: 72px;
  flex: 0 0 55px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.connector-item img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.connector-logo-link {
  display: grid;
  width: 63px;
  height: 63px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}

.connector-logo-link:hover {
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  background: color-mix(in srgb, var(--color-neutral-100) 72%, transparent);
  color: inherit;
  transform: translateY(-2px);
}

.connector-logo-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.connector-discovery-bridge {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(440px, 1.05fr);
  gap: clamp(40px, 8vw, 112px);
  align-items: center;
  margin-top: clamp(48px, 7vw, 82px);
  padding-top: clamp(36px, 5vw, 58px);
  border-top: 1px solid var(--color-divider);
}

.connector-discovery-copy h3 {
  max-width: 20ch;
  margin: 10px 0 0;
  font-size: clamp(28px, 3.3vw, 46px);
  letter-spacing: -.035em;
}

.connector-discovery-copy p {
  max-width: 58ch;
  margin: 18px 0 23px;
  color: color-mix(in srgb, var(--color-text) 67%, transparent);
  line-height: 1.65;
}

.connector-discovery-copy .btn {
  width: fit-content;
  min-height: 44px;
  gap: 10px;
  padding: 10px 16px;
}

.homepage-connector-slideshow {
  min-width: 0;
}

.homepage-connector-slides {
  display: grid;
}

.homepage-connector-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(18px, 0, 0) scale(.985);
  transition: opacity 260ms ease, transform 260ms ease, visibility 260ms step-end;
}

.homepage-connector-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 260ms ease, transform 260ms ease, visibility 0s step-start;
}

.homepage-connector-slideshow-controls {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 13px;
}

.homepage-connector-slideshow.is-enhanced .homepage-connector-slideshow-controls {
  display: flex;
}

.homepage-connector-slide-arrow,
.homepage-connector-picker {
  display: inline-grid;
  flex: none;
  place-items: center;
  border: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-neutral-100) 65%, transparent);
  color: var(--color-text);
  cursor: pointer;
}

.homepage-connector-slide-arrow {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  font-size: 16px;
}

.homepage-connector-pickers {
  display: flex;
  align-items: center;
  gap: 7px;
}

.homepage-connector-picker {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  opacity: .58;
  transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.homepage-connector-picker img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.homepage-connector-picker:hover,
.homepage-connector-picker.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
  background: color-mix(in srgb, var(--color-accent-100) 70%, transparent);
  opacity: 1;
  transform: translateY(-1px);
}

.homepage-connector-slide-arrow:hover {
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
  background: color-mix(in srgb, var(--color-accent-100) 70%, transparent);
}

.homepage-connector-slide-arrow:focus-visible,
.homepage-connector-picker:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.homepage-connector-slide-status {
  min-width: 36px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.homepage-permission-demo {
  overflow: hidden;
  border: 1px solid var(--color-divider);
  border-radius: 20px;
  background: color-mix(in srgb, var(--marketing-panel-bg) 82%, transparent);
  box-shadow: var(--shadow-sm);
}

.homepage-permission-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-divider);
}

.homepage-permission-demo-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.homepage-permission-demo-head img {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
}

.homepage-permission-demo-head span {
  display: grid;
  min-width: 0;
}

.homepage-permission-demo-head strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homepage-permission-demo-head small {
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  font-size: 10px;
}

.homepage-permission-demo-head > a {
  flex: none;
  color: var(--color-accent-700);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.homepage-permission-demo ul {
  margin: 0;
  padding: 0 20px;
  list-style: none;
}

.homepage-permission-demo li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--color-divider);
  font-size: 12px;
}

.homepage-permission-demo li > span {
  min-width: 0;
  line-height: 1.35;
}

.permission-demo-mode {
  display: inline-flex;
  min-height: 26px;
  flex: none;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.permission-demo-mode--allowed,
.permission-demo-mode--automatic {
  border-color: color-mix(in srgb, var(--color-accent-2-700) 32%, transparent);
  background: color-mix(in srgb, var(--color-accent-2-200) 58%, transparent);
  color: var(--color-accent-2-900);
}

.permission-demo-mode--ask {
  border-color: color-mix(in srgb, var(--color-accent-700) 30%, transparent);
  background: color-mix(in srgb, var(--color-accent-200) 52%, transparent);
  color: var(--color-accent-900);
}

.permission-demo-mode--blocked {
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.homepage-permission-demo > p {
  margin: 0;
  padding: 14px 20px 17px;
  color: color-mix(in srgb, var(--color-text) 56%, transparent);
  font-size: 10px;
  line-height: 1.55;
}

.connector-empty {
  width: auto;
  min-width: min(100vw, 440px);
  flex-basis: auto;
  justify-content: flex-start;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  font-size: 13px;
  line-height: 1.25;
}

/* Display headings stay shorter than body copy, but should not preserve the
   old narrow-shell line breaks after their sections gained a wider canvas. */
/* Start steps, FAQ, final CTA */
.how-section .section-heading h2 {
  max-width: 19ch;
}

.how-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: clamp(48px, 6vw, 70px) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.how-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  min-height: 190px;
  padding: 26px 28px 28px 0;
  border-right: 1px solid var(--color-divider);
}

.how-steps li + li {
  padding-left: 28px;
}

.how-steps li:last-child {
  border-right: 0;
}

.how-steps li > span {
  color: var(--color-accent-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
}

.how-steps b {
  display: block;
  max-width: 18ch;
  font-size: 16px;
  line-height: 1.35;
}

.how-steps p {
  max-width: 31ch;
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  font-size: 13px;
  line-height: 1.65;
}

.faq-band {
  padding-top: clamp(88px, 11vw, 148px);
}

.faq-band h2 {
  max-width: 17ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: var(--font-heading-weight);
  letter-spacing: -.025em;
  line-height: 1.02;
}

.faq-home {
  max-width: 800px;
  margin-top: 38px;
}

.faq-home .faq-item {
  border-bottom-color: var(--color-divider);
}

.faq-home .answer p {
  max-width: none;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  font-size: 14px;
  line-height: 1.75;
}

.faq-home table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 13px;
}

.faq-home th,
.faq-home td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: top;
}

.start-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .65fr);
  gap: clamp(50px, 8vw, 110px);
  align-items: end;
  margin-top: clamp(88px, 11vw, 148px);
  margin-bottom: clamp(72px, 9vw, 120px);
  padding: clamp(48px, 7vw, 82px);
  border-radius: 46px;
  background: var(--marketing-orange-section);
}

.start-section h2 {
  max-width: 21ch;
}

.start-section .btn {
  margin-top: 29px;
}

.price-line {
  border-top: 1px solid color-mix(in srgb, var(--color-accent-900) 17%, transparent);
}

.price-line > span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-900) 17%, transparent);
}

.price-line b {
  font-size: 14px;
}

.price-line strong {
  color: var(--color-accent-800);
  font-family: var(--font-heading);
  font-size: 26px;
}

.price-line small {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  font-size: 10px;
}

/* The shared palette already changes every token. These homepage-specific
   corrections preserve contrast for the few components that use icon marks or
   large translucent surfaces rather than plain text. */
:root[data-theme="dark"][data-marketing-home] .landing-hero::before {
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  box-shadow: 0 0 110px color-mix(in srgb, var(--color-accent) 8%, transparent);
}

:root[data-theme="dark"][data-marketing-home] .result-check {
  color: var(--color-accent-2-100);
}

:root[data-theme="dark"][data-marketing-home] .outcome-tab:not(.is-active) {
  opacity: .55;
}

:root[data-theme="dark"][data-marketing-home] .connector-showcase-head > div:first-child span {
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

:root[data-theme="dark"][data-marketing-home] .connector-logo-link:hover,
:root[data-theme="dark"][data-marketing-home] .homepage-connector-picker:hover,
:root[data-theme="dark"][data-marketing-home] .homepage-connector-picker.is-active {
  background: color-mix(in srgb, var(--color-neutral-200) 76%, transparent);
}

/* Responsive QA targets: 768px and 375px */
@media (max-width: 980px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .landing-hero {
    min-height: auto;
  }

  .hero-copy {
    max-width: 720px;
  }

  .handoff-interface {
    width: min(620px, 100%);
    justify-self: start;
  }

  .outcome-browser {
    grid-template-columns: 1fr;
  }

  .outcome-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(185px, 1fr);
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .outcome-tabs::-webkit-scrollbar {
    display: none;
  }

  .outcome-tab {
    min-height: 70px;
    padding: 13px 18px;
    border-right: 1px solid var(--color-divider);
    border-bottom: 0;
    scroll-snap-align: start;
  }

  .outcome-tab:last-child {
    border-right: 0;
  }

  .outcome-panel {
    grid-template-columns: 1fr;
  }

  .outcome-story h3 {
    max-width: 16ch;
  }

  .outcome-result {
    max-width: 520px;
  }

  .action-intro,
  .connection-heading,
  .connector-discovery-bridge,
  .start-section {
    grid-template-columns: 1fr;
  }

  .action-intro p {
    grid-column: 1;
    grid-row: auto;
    margin-top: 20px;
  }

  .connection-heading > p {
    margin-top: -20px;
  }

  .how-steps {
    grid-template-columns: 1fr;
  }

  .how-steps li {
    min-height: 0;
    padding: 25px 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }

  .how-steps li + li {
    padding-left: 0;
  }

  .how-steps li:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 700px) {
  :root[data-marketing-home] {
    --layout-inline-space: 32px;
  }

  .page-section {
    padding-top: 78px;
  }

  .section-heading h2,
  .action-intro h2,
  .connection-heading h2,
  .start-section h2,
  .faq-band h2 {
    font-size: clamp(34px, 10vw, 45px);
  }

  .section-heading p,
  .action-intro p,
  .connection-heading > p,
  .start-section > div > p {
    font-size: 15.5px;
  }

  .hero-layout {
    gap: 44px;
    padding-block: 64px 72px;
  }

  .hero-copy h1 {
    font-size: clamp(46px, 13vw, 62px);
  }

  .hero-lede {
    margin-top: 25px;
    font-size: 17px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .handoff-interface {
    padding: 16px;
    border-radius: 24px;
  }

  .instruction-bubble {
    margin-left: 16px;
  }

  .execution-list small {
    max-width: 25ch;
  }

  .outcome-panels {
    padding: 31px 0;
  }

  .outcome-panel {
    gap: 32px;
  }

  .outcome-story h3 {
    font-size: clamp(31px, 9vw, 42px);
  }

  .outcome-result {
    border-radius: 21px;
  }

  .action-section,
  .start-section {
    margin-inline: -16px;
    border-radius: 0;
  }

  .action-section {
    margin-top: 78px;
    padding: 53px 32px;
  }

  .action-words {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .action-words li {
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent-2-900) 17%, transparent);
  }

  .action-words li:nth-child(2n) {
    border-right: 0;
  }

  .action-words li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .provider-line {
    margin-top: 36px;
  }

  .connector-showcase-head > div:first-child span {
    max-width: 30ch;
  }

  .connector-marquee {
    --connector-gap: 38px;
  }

  .connector-discovery-bridge {
    gap: 34px;
  }

  .homepage-permission-demo-head {
    align-items: flex-start;
  }

  .homepage-permission-demo-head > a {
    margin-top: 4px;
  }

  .homepage-connector-slideshow-controls {
    justify-content: flex-start;
  }

  .faq-band {
    padding-top: 78px;
  }

  .faq-home {
    margin-top: 28px;
  }

  .start-section {
    margin-top: 78px;
    margin-bottom: 0;
    padding: 55px 32px 64px;
  }
}

@media (max-width: 430px) {
  :root[data-marketing-home] {
    --layout-inline-space: 28px;
  }

  .landing-hero::before {
    display: none;
  }

  .interface-identity small {
    max-width: 19ch;
  }

  .finished-result {
    align-items: flex-start;
  }

  .finished-result > img {
    display: none;
  }

  .outcome-tabs {
    margin-inline: -14px;
    padding-left: 14px;
  }

  .outcome-tab {
    min-width: 172px;
  }

  .action-section,
  .start-section {
    margin-inline: -14px;
    padding-inline: 28px;
  }

  .connector-marquee {
    --connector-gap: 34px;
  }

  .connector-discovery-copy h3 {
    font-size: 31px;
  }

  .homepage-permission-demo-head {
    display: grid;
  }

  .homepage-permission-demo-head > a {
    width: fit-content;
  }

  .homepage-permission-demo li {
    align-items: flex-start;
  }

  .homepage-connector-slideshow-controls {
    flex-wrap: wrap;
  }

  .homepage-connector-slide-status {
    order: 3;
    width: 100%;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .connector-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  .connector-marquee::-webkit-scrollbar {
    display: none;
  }

  .connector-lane {
    width: max-content;
    min-width: 100%;
    overflow: visible;
  }

  .connector-track {
    transform: none !important;
    will-change: auto;
  }

  .homepage-connector-slide {
    transition: none;
  }

  .connector-group[aria-hidden="true"] {
    display: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}

/* Independent coworker positioning — HANDSWEBSI-231 */
.landing-hero {
  min-height: min(920px, calc(100svh - 68px));
}

.hero-layout {
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: clamp(54px, 6.5vw, 96px);
}

.hero-copy h1 {
  max-width: 14.5ch;
  font-size: clamp(49px, 5.55vw, 78px);
}

.hero-lede {
  max-width: 58ch;
}

.hero-audience {
  max-width: 64ch;
}

@media (min-width: 981px) {
  .hero-copy {
    width: min(100%, 760px);
    justify-self: center;
  }

  .handoff-interface {
    transform: translateY(clamp(96px, 7vw, 132px));
  }

  .continuity-section {
    padding-top: clamp(190px, 14vw, 252px);
  }
}

.model-handoff {
  width: min(100%, 680px);
}

.model-picker {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: -5px -5px 18px;
  padding: 5px;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 17px;
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
}

.model-choice {
  appearance: none;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 41px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: background 170ms ease, border-color 170ms ease, color 170ms ease, transform 170ms ease;
}

.model-choice img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
}

.model-choice:hover {
  color: var(--color-text);
  transform: translateY(-1px);
}

.model-choice.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  background: var(--marketing-panel-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.model-choice:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 17px;
}

.context-strip span {
  padding: 7px 10px;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 999px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  background: color-mix(in srgb, var(--color-neutral-100) 48%, transparent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .025em;
}

.execution-list li.needs-review {
  margin-inline: -6px;
  padding-inline: 8px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-accent-100) 72%, transparent);
}

.execution-list li.needs-review > span {
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  color: var(--color-accent-700);
  background: var(--color-accent-100);
}

.execution-list li.needs-review i {
  color: var(--color-accent-700);
}

.approval-preview {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-accent-100) 62%, var(--marketing-panel-bg));
}

.approval-preview-head,
.approval-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.approval-preview-head span {
  color: var(--color-accent-800);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.approval-preview-head b {
  color: var(--color-accent-700);
  font-size: 10px;
}

.approval-preview dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 13px 0 0;
}

.approval-preview dl div {
  min-width: 0;
}

.approval-preview dt,
.approval-preview dd {
  margin: 0;
}

.approval-preview dt {
  color: color-mix(in srgb, var(--color-text) 46%, transparent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.approval-preview dd {
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: 10px;
  font-weight: 680;
}

.approval-preview-actions {
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-accent-900) 12%, transparent);
}

.approval-preview-actions span,
.approval-preview-actions strong {
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: 10px;
  font-size: 9px;
}

.approval-preview-actions span {
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  background: var(--marketing-panel-bg);
}

.approval-preview-actions strong {
  border-color: var(--color-accent-600);
  background: var(--color-accent-600);
  color: #fff;
}

.finished-result.is-pending {
  margin-top: 14px;
  border-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
  background: color-mix(in srgb, var(--color-accent-100) 68%, var(--marketing-panel-bg));
}

.finished-result.is-pending .result-check {
  background: var(--color-accent-600);
}

.finished-result.is-pending small {
  color: var(--color-accent-700);
}

/* The same Hand stays stable while the selected model changes. */
.continuity-section {
  display: grid;
  grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
  gap: clamp(56px, 8vw, 120px);
  align-items: center;
}

.continuity-copy h2 {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: var(--font-heading-weight);
  letter-spacing: -.032em;
  line-height: 1.01;
}

.continuity-copy > p {
  max-width: 55ch;
  margin: 24px 0 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  font-size: 16px;
  line-height: 1.72;
}

.continuity-copy .continuity-note {
  padding-left: 16px;
  border-left: 2px solid var(--color-accent-400);
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: 12px;
}

.continuity-map {
  display: grid;
  grid-template-columns: minmax(128px, .72fr) 28px minmax(160px, .9fr) 28px minmax(220px, 1.2fr);
  gap: 12px;
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--marketing-panel-border);
  border-radius: 34px;
  background: var(--marketing-panel-bg);
  box-shadow: var(--marketing-panel-shadow);
}

.continuity-providers,
.context-contract {
  display: grid;
  gap: 8px;
}

.continuity-providers span,
.context-contract span,
.continuity-hand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg) 62%, transparent);
}

.continuity-providers img,
.continuity-hand > img {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
}

.continuity-providers span {
  font-size: 11px;
  font-weight: 750;
}

.continuity-arrow {
  color: color-mix(in srgb, var(--color-text) 32%, transparent);
  font-size: 20px;
  text-align: center;
}

.continuity-hand {
  padding: 17px 14px;
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  background: var(--color-accent-100);
}

.continuity-hand span,
.continuity-hand b,
.continuity-hand small,
.context-contract b,
.context-contract small {
  display: block;
}

.continuity-hand b,
.context-contract b {
  font-size: 11px;
}

.continuity-hand small,
.context-contract small {
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
  font-size: 9px;
  line-height: 1.35;
}

.context-contract span {
  position: relative;
  padding-left: 30px;
}

.context-contract span::before {
  position: absolute;
  left: 12px;
  top: 14px;
  color: var(--color-accent-2-700);
  content: "✓";
  font-size: 10px;
  font-weight: 900;
}

.provider-availability {
  grid-column: 2;
  margin: -25px 0 0;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-size: 10px;
  line-height: 1.55;
}

/* Specialist Hand contracts */
.hand-contract {
  display: grid;
  gap: 0;
  margin-top: 25px;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.hand-contract span {
  display: grid;
  grid-template-columns: minmax(110px, .4fr) minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
}

.hand-contract span:last-child {
  border-bottom: 0;
}

.hand-contract b,
.hand-contract small {
  display: block;
}

.hand-contract b {
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-size: 9px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.hand-contract small {
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  font-size: 11px;
  line-height: 1.45;
}

.role-note {
  max-width: 72ch;
  margin: 22px 0 0 auto;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-size: 11px;
  line-height: 1.55;
  text-align: right;
}

/* Governed action flow */
.control-section {
  background: var(--marketing-green-section);
}

.control-section .action-intro {
  align-items: start;
}

.control-section .action-intro > div {
  min-width: 0;
}

.control-section .action-intro h2 {
  max-width: 14ch;
}

.control-section .action-intro p b {
  color: var(--color-accent-2-900);
}

.control-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(42px, 6vw, 68px);
  border-top: 1px solid color-mix(in srgb, var(--color-accent-2-900) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-2-900) 18%, transparent);
}

.control-flow article {
  position: relative;
  min-height: 210px;
  padding: 24px 22px;
  border-right: 1px solid color-mix(in srgb, var(--color-accent-2-900) 18%, transparent);
}

.control-flow article:last-child {
  border-right: 0;
}

.control-flow article.is-decision {
  background: color-mix(in srgb, var(--color-accent-100) 65%, transparent);
}

.control-flow article > span {
  color: var(--color-accent-2-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 800;
}

.control-flow article b {
  display: block;
  max-width: 15ch;
  margin-top: 37px;
  color: var(--color-accent-2-900);
  font-size: 15px;
  line-height: 1.3;
}

.control-flow article p {
  margin: 11px 0 0;
  color: color-mix(in srgb, var(--color-accent-2-900) 66%, transparent);
  font-size: 11px;
  line-height: 1.58;
}

.approval-proof {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(390px, 1.15fr);
  gap: clamp(50px, 8vw, 112px);
  align-items: center;
  margin-top: clamp(48px, 7vw, 84px);
}

.approval-proof-copy h3 {
  max-width: 15ch;
  margin: 8px 0 0;
  color: var(--color-accent-2-900);
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -.03em;
  line-height: 1.03;
}

.approval-proof-copy > p {
  max-width: 53ch;
  margin: 21px 0 0;
  color: color-mix(in srgb, var(--color-accent-2-900) 70%, transparent);
  font-size: 14px;
  line-height: 1.7;
}

.approval-proof-copy ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.approval-proof-copy li {
  position: relative;
  padding: 7px 0 7px 23px;
  color: color-mix(in srgb, var(--color-accent-2-900) 76%, transparent);
  font-size: 12px;
}

.approval-proof-copy li::before {
  position: absolute;
  left: 0;
  color: var(--color-accent-2-700);
  content: "✓";
  font-weight: 900;
}

.proposal-card {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--marketing-panel-border);
  border-radius: 28px;
  background: var(--marketing-panel-bg);
  color: var(--color-text);
  box-shadow: var(--marketing-panel-shadow);
}

.proposal-card-top,
.proposal-target,
.proposal-actions {
  display: flex;
  align-items: center;
}

.proposal-card-top {
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--color-divider);
}

.proposal-card-top span {
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.proposal-card-top b {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  font-size: 9px;
}

.proposal-target {
  gap: 13px;
  margin-top: 20px;
}

.proposal-target img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.proposal-target span,
.proposal-target small,
.proposal-target b {
  display: block;
}

.proposal-target small {
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-size: 9px;
}

.proposal-target b {
  margin-top: 2px;
  font-size: 15px;
}

.proposal-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 22px 0 0;
  border-top: 1px solid var(--color-divider);
}

.proposal-card dl div {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--color-divider);
}

.proposal-card dt,
.proposal-card dd {
  margin: 0;
}

.proposal-card dt {
  color: color-mix(in srgb, var(--color-text) 46%, transparent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.proposal-card dd {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 11px;
  font-weight: 700;
}

.proposal-card label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 19px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  font-size: 10px;
  line-height: 1.45;
}

.proposal-card input {
  margin: 1px 0 0;
}

.proposal-actions {
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.proposal-actions span,
.proposal-actions strong {
  padding: 10px 13px;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 11px;
  font-size: 10px;
}

.proposal-actions strong {
  border-color: var(--color-accent-600);
  background: var(--color-accent-600);
  color: #fff;
}

/* Four-step product model and responsibility-led pricing. */
.how-steps.how-steps--four {
  grid-template-columns: repeat(4, 1fr);
}

.how-steps.how-steps--four li {
  min-height: 220px;
}

.price-line--roles small {
  max-width: 34ch;
  line-height: 1.45;
}

.start-section > div > .trial-note {
  max-width: 54ch;
  margin-top: 15px;
  font-size: 11px;
}

:root[data-theme="dark"][data-marketing-home] .model-choice.is-active,
:root[data-theme="dark"][data-marketing-home] .continuity-map,
:root[data-theme="dark"][data-marketing-home] .proposal-card {
  box-shadow: var(--marketing-panel-shadow);
}

:root[data-theme="dark"][data-marketing-home] .continuity-hand {
  background: color-mix(in srgb, var(--color-accent-100) 82%, var(--color-bg));
}

:root[data-theme="dark"][data-marketing-home] .approval-preview-actions strong,
:root[data-theme="dark"][data-marketing-home] .proposal-actions strong {
  color: #fff;
}

@media (max-width: 1180px) and (min-width: 981px) {
  .hero-layout {
    grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr);
    gap: 42px;
  }

  .hero-copy h1 {
    font-size: clamp(48px, 5.4vw, 66px);
  }

  .continuity-section {
    grid-template-columns: 1fr;
  }

  .provider-availability {
    grid-column: 1;
    margin-top: -24px;
  }
}

@media (max-width: 980px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 58px;
  }

  .model-handoff {
    width: min(680px, 100%);
    min-width: 0;
    justify-self: start;
  }

  .continuity-section,
  .approval-proof {
    grid-template-columns: 1fr;
  }

  .continuity-section {
    padding-top: clamp(100px, 13vw, 150px);
  }

  .continuity-map {
    max-width: 760px;
  }

  .provider-availability {
    grid-column: 1;
    margin-top: -26px;
  }

  .control-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-flow article {
    min-height: 178px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent-2-900) 18%, transparent);
  }

  .control-flow article:nth-child(2n) {
    border-right: 0;
  }

  .control-flow article:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }

  .approval-proof {
    gap: 38px;
  }

  .proposal-card {
    max-width: 680px;
  }

  .how-steps.how-steps--four {
    grid-template-columns: 1fr;
  }

  .how-steps.how-steps--four li {
    min-height: 0;
  }
}

@media (max-width: 700px) {
  .hero-layout {
    gap: 44px;
  }

  .model-handoff {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .hero-copy h1 {
    max-width: 13.5ch;
    font-size: clamp(41px, 11.7vw, 56px);
  }

  .model-picker {
    grid-template-columns: 1fr;
  }

  .model-choice {
    justify-content: flex-start;
  }

  .context-strip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .approval-preview dl,
  .proposal-card dl {
    grid-template-columns: 1fr;
  }

  .approval-preview-actions,
  .proposal-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
  }

  .approval-preview-actions span,
  .approval-preview-actions strong,
  .proposal-actions span,
  .proposal-actions strong {
    text-align: center;
  }

  .continuity-section {
    padding-top: 84px;
  }

  .continuity-copy h2 {
    font-size: clamp(34px, 10vw, 45px);
  }

  .continuity-map {
    grid-template-columns: 1fr;
    gap: 10px;
    border-radius: 25px;
  }

  .continuity-arrow {
    transform: rotate(90deg);
  }

  .continuity-providers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .continuity-providers span {
    justify-content: center;
    padding: 10px 5px;
  }

  .continuity-providers span {
    font-size: 0;
  }

  .continuity-providers img {
    width: 28px;
    height: 28px;
  }

  .provider-availability {
    margin-top: -18px;
  }

  .hand-contract span {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .role-note {
    text-align: left;
  }

  .control-flow {
    grid-template-columns: 1fr;
  }

  .control-flow article,
  .control-flow article:nth-child(2n),
  .control-flow article:last-child {
    grid-column: auto;
    min-height: 0;
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent-2-900) 18%, transparent);
  }

  .control-flow article:last-child {
    border-bottom: 0;
  }

  .control-flow article b {
    margin-top: 14px;
  }

  .approval-proof-copy h3 {
    font-size: clamp(30px, 9vw, 42px);
  }
}

@media (max-width: 430px) {
  .model-handoff {
    padding: 14px;
  }

  .approval-preview-actions,
  .proposal-actions {
    grid-template-columns: 1fr;
  }

  .continuity-map {
    padding: 18px;
  }

  .continuity-hand {
    justify-content: center;
  }

  .proposal-card {
    padding: 20px;
    border-radius: 22px;
  }
}

/* Homepage simplification — HANDSWEBSI-391.
   The hero is now one centered promise; the large provider demo moved out of
   the page entirely. Pricing precedes FAQ, so avoid stacking both sections'
   large top spacing. */
.landing-hero::before {
  display: none;
}

.landing-hero .hero-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-items: center;
  padding-block: clamp(76px, 9vw, 118px);
}

.landing-hero .hero-copy {
  width: min(100%, 900px);
  justify-self: center;
  text-align: center;
}

.landing-hero .hero-copy h1 {
  max-width: 14.5ch;
  margin-inline: auto;
}

.landing-hero .hero-lede,
.landing-hero .hero-audience {
  margin-inline: auto;
}

.landing-hero .hero-actions {
  justify-content: center;
}

.landing-hero .trial-note {
  text-align: center;
}

.start-section + .landing-shell--reading .faq-band {
  padding-top: 0;
}

@media (min-width: 981px) {
  .landing-hero {
    min-height: min(760px, calc(100svh - 68px));
    overflow: clip;
  }
}

@media (max-width: 700px) {
  .landing-hero .hero-layout {
    padding-block: 64px 72px;
  }

  .landing-hero .hero-actions {
    flex-wrap: wrap;
  }
}

/* HANDSWEBSI-193 — approved outcome-led landing page */
.hero-layout--compact {
  min-height: auto;
  padding-top: clamp(4.5rem, 8vw, 7rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hero-layout--compact .hero-copy {
  max-width: 860px;
}

.hero-layout--compact .hero-copy h1 {
  max-width: 980px;
  margin-bottom: 1.25rem;
}

.hero-layout--compact .hero-copy .hero-lede {
  max-width: 780px;
  margin-bottom: 1.35rem;
}

.hero-layout--compact .hero-actions {
  align-items: center;
  gap: .75rem;
}

.hero-layout--compact .trial-note,
.final-cta .trial-note {
  margin-top: 1rem;
  font-size: .95rem;
}

.section-heading--compact {
  max-width: 760px;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.section-heading--compact p {
  max-width: 680px;
}

.use-case-section,
.community-stories,
.connection-section-simple,
.pricing-section,
.final-cta {
  scroll-margin-top: 6rem;
}

.use-case-explorer {
  display: grid;
  grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 1rem;
}

.use-case-selector {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: .75rem;
}

.use-case-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.use-case-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--marketing-panel-border));
}

.use-case-card.is-active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent-100) 58%, var(--color-surface));
}

.use-case-card-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: .9rem;
  row-gap: .38rem;
  width: 100%;
  min-height: 44px;
  padding: .95rem 1rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.use-case-card-trigger:focus-visible,
.use-case-play:focus-visible,
.connection-showcase-item:focus-visible,
.price-card .btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

.use-case-card-trigger strong,
.use-case-card-trigger .use-case-label,
.use-case-card-trigger .use-case-card-summary {
  grid-column: 1;
}

.use-case-card-trigger strong {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.22;
}

.use-case-card-summary {
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  font-size: .88rem;
  line-height: 1.42;
}

.use-case-label {
  width: fit-content;
  color: var(--color-accent-700);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.use-case-card-toggle {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: color-mix(in srgb, var(--color-text) 64%, transparent);
  font-size: .74rem;
  font-weight: 750;
  white-space: nowrap;
}

.use-case-card-chevron {
  position: relative;
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 74%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 32%, transparent), 0 4px 12px rgb(0 0 0 / 6%);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.use-case-card-chevron::before {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg) translate(-1px, -1px);
}

.use-case-card-trigger:hover .use-case-card-chevron {
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--marketing-panel-border));
  background: color-mix(in srgb, var(--color-accent-100) 68%, var(--color-bg));
  box-shadow: 0 5px 16px rgb(0 0 0 / 9%);
}

.use-case-card.is-expanded .use-case-card-chevron {
  transform: rotate(180deg);
}

.use-case-card-details {
  padding: 0 1rem .9rem;
  border-top: 1px solid color-mix(in srgb, var(--marketing-panel-border) 82%, transparent);
}

.use-case-card-details[hidden] {
  display: none;
}

.use-case-card-facts {
  display: grid;
  gap: 0;
  margin: .55rem 0 0;
}

.use-case-card-facts > div {
  display: grid;
  grid-template-columns: minmax(62px, .28fr) minmax(0, 1fr);
  gap: .7rem;
  padding: .38rem 0;
}

.use-case-card-facts > div + div {
  border-top: 1px solid color-mix(in srgb, var(--marketing-panel-border) 70%, transparent);
}

.use-case-card-facts dt {
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.use-case-card-facts dd {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.38;
}

.use-case-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 26px;
  background: var(--marketing-panel-bg);
  isolation: isolate;
}

.use-case-poster,
.use-case-video-slot,
.use-case-video {
  width: 100%;
  height: 100%;
}

.use-case-poster,
.use-case-video {
  display: block;
  object-fit: cover;
}

.use-case-video-slot {
  position: absolute;
  inset: 0;
}

.use-case-video-slot[hidden],
.use-case-poster[hidden],
.use-case-media-overlay[hidden] {
  display: none;
}

.use-case-media-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .8rem;
  padding: 1.25rem;
  text-align: center;
}

.use-case-media-overlay p {
  margin: 0;
  max-width: 560px;
  padding: .55rem .9rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  font-size: .92rem;
}

/* Play badge and control bar repeat the film player's own chrome (the ChatGPT
   guide film under the hero), so a rendered MP4 and a live film animation read
   as one and the same player. */
.use-case-play {
  min-height: 48px;
  width: clamp(48px, 5.6vw, 84px);
  height: clamp(48px, 5.6vw, 84px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(250 249 245 / 92%);
  color: #171613;
  box-shadow: 0 10px 34px rgb(23 22 19 / 22%);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.use-case-play:hover {
  transform: scale(1.04);
  box-shadow: 0 14px 40px rgb(23 22 19 / 28%);
}

.use-case-play svg {
  width: 36%;
  height: 36%;
}

.use-case-player {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(to top, rgb(250 249 245 / 97%), rgb(250 249 245 / 86%) 62%, rgb(250 249 245 / 0%));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

.use-case-media.is-player-awake .use-case-player {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.use-case-player-button {
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(23 22 19 / 6%);
  color: #171613;
  display: grid;
  place-items: center;
  line-height: 0;
  cursor: pointer;
}

.use-case-player-button:hover {
  background: rgb(23 22 19 / 12%);
}

.use-case-player-track {
  flex: 1;
  min-width: 0;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.use-case-player-rail {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgb(23 22 19 / 16%);
}

.use-case-player-fill {
  position: absolute;
  inset: 0 100% 0 0;
  border-radius: 999px;
  background: #ff4f00;
}

.use-case-player-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 999px;
  background: #ff4f00;
  box-shadow: 0 0 0 3px rgb(250 249 245 / 90%);
}

.use-case-player-clock {
  flex: none;
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .01em;
  color: rgb(23 22 19 / 62%);
}

.use-case-media:fullscreen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #f7f6f1;
}

.use-case-media:fullscreen .use-case-video {
  object-fit: contain;
}

.use-case-media:fullscreen .use-case-player {
  padding: 18px 26px;
}

.control-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.control-pillars article {
  min-height: 210px;
  padding: 1.35rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 22px;
  background: var(--color-surface);
}

.control-pillars article > span {
  display: inline-block;
  margin-bottom: 1.4rem;
  color: var(--color-accent-700);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
}

.control-pillars h3 {
  margin: 0 0 .65rem;
  font-size: 1.22rem;
}

.control-pillars p {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  line-height: 1.55;
}

.connection-section-simple {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: .8rem;
}

.connection-section-simple > .section-heading--compact {
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: center;
  margin-bottom: 0;
  padding-right: clamp(1rem, 3vw, 3rem);
}

.connection-section-simple > .section-heading--compact h2 {
  max-width: 22ch;
  text-wrap: balance;
}

.connection-showcase {
  display: contents;
}

.connection-showcase-corner {
  grid-column: 3 / 5;
  grid-row: 1;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.connection-showcase-base {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}

.connection-section-simple > .section-action {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: .45rem;
}

.connection-showcase-item {
  min-width: 0;
  min-height: 72px;
  padding: .72rem .85rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 18px;
  background: var(--color-surface);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  color: var(--color-text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.connection-showcase-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 34%, var(--marketing-panel-border));
  background: color-mix(in srgb, var(--color-accent-100) 24%, var(--color-surface));
  box-shadow: 0 14px 34px rgb(0 0 0 / 8%);
}

.connection-provider-logo {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-accent-100) 55%, transparent);
  overflow: visible !important;
}

.connection-provider-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.connection-provider-logo--light-surface {
  background: #fff;
}

.connection-showcase-copy {
  display: grid;
  min-width: 0;
  gap: .14rem;
}

.connection-showcase-copy strong,
.connection-showcase-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-showcase-copy strong {
  font-size: .94rem;
  line-height: 1.25;
}

.connection-showcase-copy small {
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.25;
}

.connection-showcase-arrow {
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform .18s ease, color .18s ease;
}

.connection-showcase-item:hover .connection-showcase-arrow {
  color: var(--color-accent-700);
  transform: translateX(2px);
}

.connection-showcase-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 18px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  background: var(--color-surface);
  line-height: 1.5;
}

.section-action {
  display: flex;
  justify-content: center;
  margin-top: 1.35rem;
}

.section-action .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.sdk-callout {
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.sdk-callout h3 {
  margin: .3rem 0 .35rem;
  font-family: 'Caprasimo', Georgia, serif;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.08;
}

.sdk-callout p {
  margin: 0;
  max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  line-height: 1.55;
}

.sdk-callout .btn {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

.pricing-section .price-line--roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.price-card {
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 22px;
  background: var(--color-surface);
  display: grid;
  align-content: start;
  gap: .75rem;
}

.price-card > b {
  font-size: 1.1rem;
}

.price-card > strong {
  font-family: 'Caprasimo', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1;
}

.price-card > small {
  min-height: 1.5em;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  font-size: .9rem;
}

.price-card .btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  margin-top: .35rem;
}

.price-card--trial {
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--marketing-panel-border));
}

.final-cta {
  text-align: center;
}

.final-cta > div {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid var(--marketing-panel-border);
  border-radius: 28px;
  background: var(--color-surface);
}

.final-cta h2 {
  max-width: 720px;
  margin-inline: auto;
}

.final-cta p:not(.trial-note) {
  max-width: 660px;
  margin-inline: auto;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

.final-cta .btn {
  margin-top: .8rem;
}

.faq-home-section {
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

@media (max-width: 980px) {
  .use-case-explorer {
    grid-template-columns: 1fr;
  }

  .use-case-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .connection-section-simple {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .connection-section-simple > .section-heading--compact,
  .connection-showcase-corner,
  .connection-showcase-base,
  .connection-section-simple > .section-action {
    grid-column: 1;
    grid-row: auto;
  }

  .connection-section-simple > .section-heading--compact {
    max-width: 760px;
    padding-right: 0;
  }

  .connection-showcase-corner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .connection-showcase-base {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hero-layout--compact {
    padding-top: 3.8rem;
    padding-bottom: 2.6rem;
  }

  .hero-layout--compact .hero-actions {
    align-items: stretch;
  }

  .hero-layout--compact .hero-actions .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .use-case-selector,
  .control-pillars,
  .pricing-section .price-line--roles {
    grid-template-columns: 1fr;
  }

  .use-case-card {
    min-height: 0;
  }

  .use-case-media {
    border-radius: 20px;
  }

  .use-case-play {
    min-height: 48px;
  }

  .connection-showcase-corner,
  .connection-showcase-base {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sdk-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  .sdk-callout .btn {
    width: 100%;
    justify-content: center;
  }

  .connection-showcase-item {
    min-height: 78px;
    padding: .8rem .85rem;
  }
}

@media (max-width: 420px) {
  .use-case-card,
  .control-pillars article,
  .price-card,
  .connection-showcase-item {
    border-radius: 16px;
  }

  .connection-showcase-corner,
  .connection-showcase-base {
    grid-template-columns: 1fr;
  }

  .use-case-media-overlay {
    padding: .8rem;
  }

  .use-case-media-overlay p {
    font-size: .82rem;
  }

  .use-case-play {
    width: min(64px, 22vw);
    height: min(64px, 22vw);
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .site-head {
    transition: none;
  }

  .use-case-card,
  .use-case-card-chevron {
    transition: none;
  }

  .use-case-card:hover {
    transform: none;
  }
}

/* Floating phone proof between the hero and use cases.
   The shell is intentionally media-agnostic: phone-demo.js can mount either a
   native video file or a self-contained HTML animation once the final asset exists. */
.phone-demo-bridge {
  position: relative;
  z-index: 4;
  height: 0;
  pointer-events: none;
}

.phone-demo-device {
  position: absolute;
  top: -205px;
  right: clamp(72px, 8vw, 132px);
  width: clamp(190px, 15vw, 224px);
  aspect-ratio: 9 / 19.5;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: 34px;
  background: color-mix(in srgb, var(--color-text) 88%, var(--color-bg));
  box-shadow:
    0 30px 74px rgb(0 0 0 / 22%),
    0 8px 24px rgb(0 0 0 / 16%),
    inset 0 0 0 1px rgb(255 255 255 / 5%);
  transform: rotate(1deg);
  transform-origin: 50% 72%;
  pointer-events: auto;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.phone-demo-device:hover {
  transform: rotate(.35deg) translateY(-4px);
  box-shadow:
    0 36px 82px rgb(0 0 0 / 25%),
    0 10px 28px rgb(0 0 0 / 18%),
    inset 0 0 0 1px rgb(255 255 255 / 7%);
}

.phone-demo-bridge.is-html-demo .phone-demo-device {
  width: clamp(220px, 18vw, 270px);
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.phone-demo-bridge.is-html-demo .phone-demo-device:hover {
  box-shadow: none;
  transform: none;
}

.phone-demo-bridge.is-html-demo.is-previewing .phone-demo-device,
.phone-demo-bridge.is-html-demo.is-playing .phone-demo-device {
  padding: 0;
  background: transparent;
}

.phone-demo-bridge.is-html-demo.is-previewing .phone-demo-speaker,
.phone-demo-bridge.is-html-demo.is-playing .phone-demo-speaker {
  display: none;
}

.phone-demo-bridge.is-html-demo .phone-demo-screen,
.phone-demo-bridge.is-html-demo.is-previewing .phone-demo-screen,
.phone-demo-bridge.is-html-demo.is-playing .phone-demo-screen {
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.phone-demo-bridge.is-html-demo .phone-demo-media,
.phone-demo-bridge.is-html-demo .phone-demo-frame {
  overflow: visible;
  background: transparent;
}

.phone-demo-speaker {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 34%;
  height: 5px;
  border-radius: 999px;
  background: rgb(0 0 0 / 62%);
  transform: translateX(-50%);
}

.phone-demo-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
  background:
    radial-gradient(circle at 75% 22%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 38%),
    radial-gradient(circle at 20% 76%, color-mix(in srgb, var(--marketing-sage) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--color-bg) 92%, var(--color-text));
}

.phone-demo-placeholder,
.phone-demo-media,
.phone-demo-video,
.phone-demo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.phone-demo-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .45rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text);
}

.phone-demo-placeholder img {
  width: 54px;
  height: 54px;
  margin-bottom: .35rem;
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--color-accent) 20%, transparent));
}

.phone-demo-placeholder small {
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.phone-demo-placeholder strong {
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.05;
}

.phone-demo-media {
  overflow: hidden;
}

.phone-demo-video,
.phone-demo-frame {
  display: block;
  border: 0;
  background: #111;
}

.phone-demo-start-hotspot {
  position: absolute;
  z-index: 5;
  top: 28%;
  left: 67%;
  width: 26%;
  height: 10%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.phone-demo-start-hotspot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.phone-demo-video {
  object-fit: contain;
}

.phone-demo-bridge.is-pending .phone-demo-device {
  opacity: .86;
}

.phone-demo-bridge.is-ready .phone-demo-placeholder {
  opacity: .78;
}

.phone-demo-bridge.is-playing .phone-demo-placeholder {
  display: none;
}

@media (max-width: 980px) {
  .phone-demo-bridge {
    display: grid;
    height: auto;
    justify-items: center;
    margin-top: -1.25rem;
    margin-bottom: -1.5rem;
    pointer-events: auto;
  }

  .phone-demo-device {
    position: relative;
    top: auto;
    right: auto;
    width: min(218px, 56vw);
    transform: rotate(.6deg);
  }

  .phone-demo-bridge.is-html-demo .phone-demo-device {
    width: min(238px, 62vw);
  }

  .phone-demo-device:hover {
    transform: rotate(.3deg) translateY(-2px);
  }
}

@media (max-width: 430px) {
  .phone-demo-bridge {
    margin-top: -.4rem;
    margin-bottom: -1.25rem;
  }

  .phone-demo-device {
    width: min(205px, 58vw);
    padding: 7px;
    border-radius: 31px;
  }

  .phone-demo-bridge.is-html-demo .phone-demo-device {
    width: min(232px, 62vw);
  }

  .phone-demo-bridge.is-html-demo .phone-demo-screen,
  .phone-demo-bridge.is-html-demo.is-previewing .phone-demo-screen,
  .phone-demo-bridge.is-html-demo.is-playing .phone-demo-screen {
    border-radius: 0;
  }

  .phone-demo-screen {
    border-radius: 25px;
  }
}

/* Ambient hero light layer — 15 s native SVG loop.
   It is decorative only: the existing hero remains the content and interaction layer. */
:root[data-marketing-home] {
  --hero-light-orange: #c67139;
  --hero-light-sage: #7a8a5e;
  --hero-light-strength: .72;
  --hero-light-mark-opacity: .34;
}

:root[data-theme="dark"][data-marketing-home] {
  --hero-light-orange: #e9955d;
  --hero-light-sage: #a4b986;
  --hero-light-strength: .86;
  --hero-light-mark-opacity: .5;
}

.landing-hero .hero-light-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--hero-light-strength);
}

.landing-hero .hero-light-layer::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse 48% 55% at 50% 47%, color-mix(in srgb, var(--color-bg) 96%, transparent) 0 26%, color-mix(in srgb, var(--color-bg) 72%, transparent) 48%, transparent 76%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 42%, transparent), transparent 28%, transparent 76%, color-mix(in srgb, var(--color-bg) 18%, transparent));
}

.landing-hero .hero-light-svg {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  overflow: visible;
}

/* Desktop uses the exact 1920×1080 composition from the definitive standalone.
   Do not add an extra crop or global opacity on top of its own source-controlled mask. */
@media (min-width: 761px) {
  .landing-hero .hero-light-layer--definitive {
    opacity: 1;
  }

  .landing-hero .hero-light-layer--definitive::after {
    display: none;
  }

  .landing-hero .hero-light-svg--definitive {
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

.landing-hero .hero-layout {
  position: relative;
  z-index: 1;
}

.hero-light-route,
.hero-light-filament,
.hero-light-pulse {
  vector-effect: non-scaling-stroke;
}

.hero-light-route {
  fill: none;
  stroke-linecap: round;
  animation: hero-light-breathe 15s ease-in-out infinite;
}

.hero-light-route--upper {
  stroke: url(#hero-light-orange);
  stroke-width: 2.05;
}

.hero-light-route--middle {
  stroke: url(#hero-light-sage);
  stroke-width: 1.08;
  opacity: .48;
  animation-delay: -2.1s;
}

.hero-light-route--lower {
  stroke: url(#hero-light-sage);
  stroke-width: 1.12;
  opacity: .42;
  animation-delay: -4.4s;
}

.hero-light-route--blur {
  stroke-width: 8;
  opacity: .08;
  filter: url(#hero-light-wide-glow);
}

.hero-light-route--upper.hero-light-route--blur {
  stroke-width: 16;
  opacity: .12;
}

.hero-light-pulse {
  stroke: var(--hero-light-orange);
  stroke-width: 5.6;
  stroke-linecap: round;
  /* A near-zero dash with a round cap renders as a travelling light bead,
     not the short glowing stroke that the previous 1.15-length dash produced. */
  stroke-dasharray: .01 99.99;
  filter: url(#hero-light-soft-glow);
  opacity: 0;
}

.hero-light-pulse--upper {
  animation: hero-light-pulse-upper 15s linear infinite;
}

.hero-light-pulse--middle {
  stroke-width: 5;
  animation: hero-light-pulse-middle 15s linear infinite;
}

.hero-light-pulse--lower {
  stroke: var(--hero-light-sage);
  stroke-width: 5;
  animation: hero-light-pulse-lower 15s linear infinite;
}

.hero-light-filament {
  stroke: var(--hero-light-orange);
  stroke-width: .88;
  stroke-linecap: round;
  opacity: 0;
  filter: url(#hero-light-soft-glow);
  transform-box: fill-box;
  transform-origin: center;
}

.hero-light-filament--1 { animation: hero-light-filament-1 15s ease-in-out infinite; }
.hero-light-filament--2 { animation: hero-light-filament-2 15s ease-in-out infinite; }
.hero-light-filament--3 { animation: hero-light-filament-3 15s ease-in-out infinite; }
.hero-light-filament--4 { animation: hero-light-filament-4 15s ease-in-out infinite; }
.hero-light-filament--5 { animation: hero-light-filament-5 15s ease-in-out infinite; }

.hero-light-destination {
  transform-box: view-box;
  transform-origin: 1356px 257px;
}

.hero-light-halo {
  opacity: 0;
  animation: hero-light-focus 15s ease-in-out infinite;
}

.hero-light-mark {
  opacity: var(--hero-light-mark-opacity);
  transform-box: view-box;
  transform-origin: 1356px 257px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hero-light-orange) 28%, transparent));
  animation: hero-light-mark 15s ease-in-out infinite;
}

.hero-light-overmark-path {
  vector-effect: non-scaling-stroke;
  stroke: var(--hero-light-orange);
  stroke-width: 1.35;
  opacity: 0;
  filter: url(#hero-light-soft-glow);
}

.hero-light-overmark-path--upper { animation: hero-light-overmark-upper 15s ease-in-out infinite; }
.hero-light-overmark-path--middle { animation: hero-light-overmark-middle 15s ease-in-out infinite; }
.hero-light-overmark-path--lower { animation: hero-light-overmark-lower 15s ease-in-out infinite; }

.hero-light-focus-dot {
  fill: var(--hero-light-orange);
  opacity: .24;
  filter: url(#hero-light-soft-glow);
  animation: hero-light-focus-dot 15s ease-in-out infinite;
}

.hero-light-focus-dot--outer {
  fill: none;
  stroke: var(--hero-light-orange);
  stroke-width: .7;
  opacity: .11;
}

.hero-light-dust {
  fill: var(--hero-light-orange);
  opacity: .2;
  animation: hero-light-dust 15s ease-in-out infinite;
}

@keyframes hero-light-breathe {
  0%, 100% { opacity: .52; transform: translate3d(0, 0, 0); }
  32% { opacity: .69; }
  61% { opacity: .84; transform: translate3d(0, -3px, 0); }
  82% { opacity: .58; }
}

@keyframes hero-light-pulse-upper {
  0%, 20% { stroke-dashoffset: 100; opacity: 0; }
  25% { opacity: 0; }
  29% { opacity: .92; }
  50% { stroke-dashoffset: 6; opacity: .74; }
  54%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes hero-light-pulse-middle {
  0%, 46% { stroke-dashoffset: 100; opacity: 0; }
  50% { opacity: 0; }
  54% { opacity: .72; }
  72% { stroke-dashoffset: 8; opacity: .52; }
  76%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes hero-light-pulse-lower {
  0%, 66% { stroke-dashoffset: 100; opacity: 0; }
  70% { opacity: 0; }
  74% { opacity: .72; }
  87% { stroke-dashoffset: 12; opacity: .48; }
  91%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes hero-light-focus {
  0%, 38%, 100% { opacity: .04; transform: scale(.9); transform-origin: 1356px 257px; }
  47% { opacity: .28; }
  51% { opacity: .7; transform: scale(1.04); transform-origin: 1356px 257px; }
  57% { opacity: .08; transform: scale(.94); transform-origin: 1356px 257px; }
  68% { opacity: .24; }
  72% { opacity: .58; transform: scale(1.02); transform-origin: 1356px 257px; }
  77% { opacity: .08; transform: scale(.94); transform-origin: 1356px 257px; }
  83% { opacity: .3; }
  87% { opacity: .74; transform: scale(1.06); transform-origin: 1356px 257px; }
  93% { opacity: .04; transform: scale(.92); transform-origin: 1356px 257px; }
}

@keyframes hero-light-mark {
  0%, 40%, 100% {
    opacity: var(--hero-light-mark-opacity);
    transform: scale(.985);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--hero-light-orange) 25%, transparent));
  }
  50%, 72%, 87% {
    opacity: calc(var(--hero-light-mark-opacity) + .24);
    transform: scale(1.025);
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--hero-light-orange) 58%, transparent));
  }
  56%, 77%, 93% {
    opacity: var(--hero-light-mark-opacity);
    transform: scale(.995);
  }
}

@keyframes hero-light-overmark-upper {
  0%, 29%, 100% { opacity: 0; }
  43% { opacity: .28; }
  50% { opacity: .82; }
  56% { opacity: 0; }
}

@keyframes hero-light-overmark-middle {
  0%, 54%, 100% { opacity: 0; }
  66% { opacity: .25; }
  72% { opacity: .72; }
  78% { opacity: 0; }
}

@keyframes hero-light-overmark-lower {
  0%, 73%, 100% { opacity: 0; }
  82% { opacity: .24; }
  87% { opacity: .68; }
  93% { opacity: 0; }
}

@keyframes hero-light-focus-dot {
  0%, 40%, 100% { opacity: .13; }
  50%, 72%, 87% { opacity: .82; }
  56%, 78%, 93% { opacity: .18; }
}

@keyframes hero-light-filament-1 {
  0%, 50%, 100% { opacity: 0; transform: translateY(0); }
  58% { opacity: .3; transform: translateY(-6px); }
  66% { opacity: .72; transform: translateY(-10px); }
  74% { opacity: .12; transform: translateY(-2px); }
  78% { opacity: 0; }
}

@keyframes hero-light-filament-2 {
  0%, 51%, 100% { opacity: 0; transform: translateY(0); }
  59% { opacity: .4; transform: translateY(-3px); }
  66% { opacity: .66; transform: translateY(-5px); }
  75% { opacity: .1; transform: translateY(-1px); }
  79% { opacity: 0; }
}

@keyframes hero-light-filament-3 {
  0%, 51%, 100% { opacity: 0; }
  60% { opacity: .46; }
  67% { opacity: .84; }
  75% { opacity: .12; }
  79% { opacity: 0; }
}

@keyframes hero-light-filament-4 {
  0%, 51%, 100% { opacity: 0; transform: translateY(0); }
  59% { opacity: .36; transform: translateY(3px); }
  66% { opacity: .62; transform: translateY(5px); }
  75% { opacity: .1; transform: translateY(1px); }
  79% { opacity: 0; }
}

@keyframes hero-light-filament-5 {
  0%, 50%, 100% { opacity: 0; transform: translateY(0); }
  58% { opacity: .28; transform: translateY(6px); }
  66% { opacity: .58; transform: translateY(10px); }
  74% { opacity: .09; transform: translateY(2px); }
  78% { opacity: 0; }
}

@keyframes hero-light-dust {
  0%, 100% { opacity: .12; transform: translate3d(0, 0, 0); }
  44% { opacity: .24; transform: translate3d(-5px, 3px, 0); }
  70% { opacity: .32; transform: translate3d(3px, -4px, 0); }
}


.hero-light-svg--mobile {
  display: none;
}

.hero-light-mobile-route,
.hero-light-mobile-pulse,
.hero-light-mobile-filament {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke-linecap: round;
}

.hero-light-mobile-route {
  animation: hero-light-mobile-drift 15s ease-in-out infinite;
}

.hero-light-mobile-route--upper {
  stroke: url(#hero-mobile-orange);
  stroke-width: 1.7;
}

.hero-light-mobile-route--middle {
  stroke: var(--hero-light-sage);
  stroke-width: 1.1;
  opacity: .38;
  animation-delay: -2.2s;
}

.hero-light-mobile-route--glow {
  stroke: var(--hero-light-orange);
  stroke-width: 7;
  opacity: .11;
  filter: url(#hero-mobile-glow);
}

.hero-light-mobile-pulse {
  stroke: var(--hero-light-orange);
  stroke-width: 5.2;
  stroke-linecap: round;
  stroke-dasharray: .01 99.99;
  opacity: 0;
  filter: url(#hero-mobile-glow);
}

.hero-light-mobile-pulse--upper {
  animation: hero-light-mobile-pulse-upper 15s linear infinite;
}

.hero-light-mobile-pulse--upper-b {
  animation-delay: -7.5s;
  opacity: 0;
}

.hero-light-mobile-filament {
  stroke: var(--hero-light-orange);
  stroke-width: 1.05;
  opacity: 0;
  filter: url(#hero-mobile-glow);
  animation: hero-light-mobile-filament 15s ease-in-out infinite;
}

.hero-light-mobile-filament--1 { animation-delay: -.18s; }
.hero-light-mobile-filament--3 { animation-delay: .18s; }

.hero-light-mobile-halo,
.hero-light-mobile-focus-ring,
.hero-light-mobile-focus-dot {
  transform-origin: 347px 323px;
  animation: hero-light-mobile-focus 15s ease-in-out infinite;
}

.hero-light-mobile-focus-ring {
  fill: none;
  stroke: var(--hero-light-orange);
  stroke-width: .8;
  opacity: .13;
}

.hero-light-mobile-focus-dot {
  fill: var(--hero-light-orange);
  opacity: .2;
  filter: url(#hero-mobile-glow);
}

@keyframes hero-light-mobile-drift {
  0%, 100% { opacity: .48; transform: translate3d(-3px, 0, 0); }
  28% { opacity: .72; transform: translate3d(2px, -2px, 0); }
  57% { opacity: .88; transform: translate3d(5px, 1px, 0); }
  82% { opacity: .58; transform: translate3d(0, 2px, 0); }
}

@keyframes hero-light-mobile-pulse-upper {
  0%, 8% { stroke-dashoffset: 101; opacity: 0; }
  12% { opacity: .98; }
  38% { stroke-dashoffset: 18; opacity: .88; }
  44%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes hero-light-mobile-filament {
  0%, 34%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  42% { opacity: .25; }
  51% { opacity: .82; transform: translate3d(4px, 0, 0); }
  61% { opacity: .42; transform: translate3d(8px, 0, 0); }
  69% { opacity: 0; transform: translate3d(10px, 0, 0); }
}

@keyframes hero-light-mobile-focus {
  0%, 35%, 100% { opacity: .1; transform: scale(.82); }
  47% { opacity: .5; transform: scale(.95); }
  54% { opacity: .9; transform: scale(1.08); }
  65% { opacity: .3; transform: scale(.94); }
  72% { opacity: .1; transform: scale(.86); }
}

@media (max-width: 760px) {
  /* Mobile is a separate composition: shorter copy stack plus a portrait-native
     light path so the active pulse/split remains in-frame instead of being cropped
     from the 16:9 desktop SVG. */
  .landing-hero .hero-layout--compact {
    padding-top: 2.55rem;
    padding-bottom: 1.9rem;
  }

  .landing-hero .hero-layout--compact .hero-copy h1 {
    max-width: 10.8ch;
    margin-bottom: 0;
    font-size: clamp(36px, 10.5vw, 44px);
    line-height: .96;
  }

  .landing-hero .hero-copy .eyebrow {
    margin-bottom: .72rem;
  }

  .landing-hero .hero-layout--compact .hero-copy .hero-lede {
    max-width: 34ch;
    margin: 1rem auto 0;
    font-size: 17px;
    line-height: 1.5;
  }

  .landing-hero .hero-layout--compact .hero-actions {
    margin-top: 1.25rem;
    gap: .58rem;
  }

  .landing-hero .hero-layout--compact .trial-note {
    margin-top: .72rem;
    font-size: .82rem;
    line-height: 1.35;
  }

  .landing-hero .hero-light-layer {
    opacity: .78;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgb(0 0 0 / 86%) 64%, transparent 72%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgb(0 0 0 / 86%) 64%, transparent 72%);
  }

  .landing-hero .hero-light-svg--desktop {
    display: none;
  }

  .landing-hero .hero-light-svg--mobile {
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .landing-hero .hero-light-layer::after {
    background: radial-gradient(ellipse 76% 50% at 48% 44%, color-mix(in srgb, var(--color-bg) 94%, transparent) 0 29%, color-mix(in srgb, var(--color-bg) 64%, transparent) 57%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-light-route,
  .hero-light-pulse,
  .hero-light-filament,
  .hero-light-halo,
  .hero-light-mark,
  .hero-light-overmark-path,
  .hero-light-focus-dot,
  .hero-light-dust,
  .hero-light-mobile-route,
  .hero-light-mobile-pulse,
  .hero-light-mobile-filament,
  .hero-light-mobile-halo,
  .hero-light-mobile-focus-ring,
  .hero-light-mobile-focus-dot {
    animation: none !important;
  }

  .hero-light-pulse,
  .hero-light-filament,
  .hero-light-halo,
  .hero-light-overmark-path,
  .hero-light-mobile-pulse,
  .hero-light-mobile-filament,
  .hero-light-mobile-halo {
    opacity: 0 !important;
  }
}


/* Visual control demo — connector connection → per-action permissions.
   Hand-wide read-only/read-write remains a separate safety ceiling. */
.control-demo {
  max-width: 1020px;
  overflow: hidden;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 30px;
  background: color-mix(in srgb, var(--color-surface) 82%, var(--color-bg));
  box-shadow: var(--shadow-sm);
}

/* Three steps side by side on desktop; the middle one is widest because it holds the rules. */
.control-demo-steps {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1.1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.control-demo-step {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .65rem;
  margin: 0;
  padding: clamp(.85rem, 1.5vw, 1.1rem);
  transition: opacity .18s ease;
}

.control-demo-step + .control-demo-step {
  border-left: 1px solid var(--marketing-panel-border);
}

.control-demo-step.is-locked {
  opacity: 1;
}

.control-demo-step-head {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.control-demo-step-head > span {
  color: var(--color-accent-700);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.control-demo-step.is-complete .control-demo-step-head > span {
  color: var(--color-accent-2-700);
}

.control-demo-step-head h3 {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.2;
}

.control-demo-lock {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  font-size: .8rem;
  line-height: 1.45;
}

.control-demo-lock[hidden] {
  display: none;
}

.control-demo-connectors {
  display: grid;
  gap: .45rem;
}

.control-demo-connector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .42rem .52rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-bg) 74%, transparent);
}

.control-demo-connector-logo {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 10px;
  background: var(--color-neutral-100);
}

.control-demo-connector-logo img {
  width: 24px;
  height: 24px;
}

.control-demo-connect {
  position: relative;
  z-index: 0;
  min-height: 34px;
  padding: .4rem .75rem;
  border: 1px solid var(--color-accent-700);
  border-radius: 999px;
  background: var(--color-accent-700);
  color: var(--color-bg);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent-600) 24%, transparent);
  font: inherit;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.control-demo-connect[aria-pressed="false"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px color-mix(in srgb, var(--color-accent-600) 30%, transparent);
}

.control-demo-connect[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--color-accent-2-600) 72%, var(--marketing-panel-border));
  background: color-mix(in srgb, var(--color-accent-2-100) 82%, var(--color-bg));
  color: var(--color-accent-2-800);
  box-shadow: none;
  cursor: pointer;
}

.control-demo-connect[aria-pressed="true"]:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent-2-600) 19%, transparent);
}

.control-demo-permission-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-bg) 68%, transparent);
}

.control-demo-permission-list:disabled {
  opacity: .82;
}

.control-demo-permission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(125px, 148px);
  align-items: center;
  gap: .6rem;
  padding: .42rem .6rem;
}

.control-demo-permission-row[hidden] {
  display: none;
}

.control-demo-more {
  align-self: flex-start;
  padding: .1rem .2rem;
  border: 0;
  background: transparent;
  color: var(--color-accent-700);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.control-demo-permission-row + .control-demo-permission-row {
  border-top: 1px solid var(--marketing-panel-border);
}

.control-demo-permission-row b {
  font-size: .86rem;
  line-height: 1.3;
}

.control-demo-permission-row.is-destructive b::after {
  display: inline-block;
  margin-left: .45rem;
  padding: .12rem .38rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent-100) 70%, transparent);
  color: var(--color-accent-800);
  content: "Destructive";
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: .08em;
}

:root[lang="nl"] .control-demo-permission-row.is-destructive b::after {
  content: "Destructief";
}

.control-demo-permission-select {
  width: 100%;
  min-height: 38px;
  padding: .4rem 1.8rem .4rem .65rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}

.control-demo-permission-select:disabled {
  cursor: not-allowed;
}

.control-demo-connect:focus-visible,
.control-demo-more:focus-visible,
.control-demo-permission-select:focus-visible,
.control-demo-approval .btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.control-demo-approval {
  display: grid;
  gap: .55rem;
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg) 66%, transparent);
}

.control-demo-approval-copy {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.control-demo-approval-tag {
  color: var(--color-accent-700);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.control-demo-approval strong {
  font-size: .85rem;
}

.control-demo-approval small {
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  font-size: .76rem;
  line-height: 1.4;
}

.control-demo-approval-actions {
  display: flex;
  gap: .4rem;
}

.control-demo-approval .btn {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: .4rem .55rem;
  font-size: .74rem;
}

.control-demo-approval .btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.control-demo-approval-status {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  font-size: .72rem;
  line-height: 1.4;
}

.control-demo-note {
  margin: 0;
  padding: .7rem clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--marketing-panel-border);
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: .72rem;
  line-height: 1.4;
}

@media (max-width: 860px) {
  .control-demo-steps {
    grid-template-columns: 1fr;
  }

  .control-demo-step + .control-demo-step {
    border-top: 1px solid var(--marketing-panel-border);
    border-left: 0;
  }

  .control-demo-connect {
    align-self: flex-start;
  }
}

@media (max-width: 520px) {
  .control-demo {
    border-radius: 24px;
  }

  .control-demo-connect {
    width: auto;
  }

  .control-demo-permission-row {
    grid-template-columns: 1fr;
    gap: .4rem;
  }

  .control-demo-approval {
    grid-template-columns: 1fr;
  }

  .control-demo-approval-actions .btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .control-demo-connect,
  .control-demo-step {
    transition: none;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   Homepage result-first refresh — September 2026.
   The homepage now puts proof before explanation: a centered workflow, layered
   app categories, a dedicated phone proof, a developer-native SDK card and one
   obvious pricing entry point.
   ══════════════════════════════════════════════════════════════════════ */

.landing-page .site-head {
  gap: clamp(12px, 1.8vw, 22px);
}

.landing-page .site-head .site-utilities {
  flex: none;
}

.hero-layout--compact .hero-copy {
  max-width: 900px;
}

.hero-layout--compact .hero-copy h1 {
  max-width: 13ch;
}

.direction-chevron {
  width: 9px;
  height: 9px;
  display: inline-block;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform-origin: center;
}

.direction-chevron--left { transform: rotate(135deg); }
.direction-chevron--right { transform: rotate(-45deg); }
.direction-chevron--down { transform: rotate(45deg); }

.cta-chevron-circle {
  width: 24px;
  height: 24px;
  margin-left: .1rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 999px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.cta-chevron-circle .direction-chevron {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-width: 1.8px;
}

[data-see-hands-in-action]:hover,
[data-see-hands-in-action]:active {
  color: var(--color-bg);
}

[data-see-hands-in-action]:hover {
  background: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
}

[data-see-hands-in-action]:hover .cta-chevron-circle {
  border-color: var(--color-bg);
  background: var(--color-bg);
  color: var(--color-accent-700);
  transform: translateY(1px);
}

.carousel-arrow {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: .8;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.carousel-arrow:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--marketing-panel-border));
  background: color-mix(in srgb, var(--color-accent-100) 44%, var(--color-bg));
}

.carousel-arrow:focus-visible,
.use-case-peek:focus-visible,
.use-case-dots button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 46%, transparent);
  outline-offset: 3px;
}

/* Workflow carousel */
.use-case-section {
  padding-top: clamp(18px, 2.8vw, 42px);
  overflow: clip;
}

.use-case-carousel {
  display: grid;
  gap: .8rem;
}

.use-case-heading {
  max-width: 760px;
  margin: clamp(1rem, 2.2vw, 1.65rem) 0 0;
}

.use-case-heading h2 {
  margin-bottom: 0;
}

.use-case-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: .15rem 0 .2rem;
  overflow: visible;
  isolation: isolate;
}

.use-case-focus {
  position: relative;
  z-index: 3;
  width: min(82%, 980px);
  min-width: 0;
}

.use-case-stage .use-case-media {
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 24px 70px rgb(0 0 0 / 14%);
}

.use-case-peek {
  position: absolute;
  z-index: auto;
  top: 50%;
  width: clamp(58px, 5.6vw, 78px);
  height: clamp(58px, 5.6vw, 78px);
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  box-shadow: none;
  cursor: pointer;
}

.use-case-peek > span:not(.use-case-peek-arrow) {
  display: none;
}

.use-case-peek img {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: min(34vw, 420px);
  max-width: none;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  pointer-events: none;
  opacity: .52;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgb(0 0 0 / 10%);
  filter: saturate(.88);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

.use-case-peek--prev img {
  right: 50%;
  transform: translateY(-50%) scale(.92) rotate(-1deg);
  transform-origin: right center;
}

.use-case-peek--next img {
  left: 50%;
  transform: translateY(-50%) scale(.92) rotate(1deg);
  transform-origin: left center;
}

.use-case-peek .use-case-peek-arrow {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  box-shadow: 0 16px 44px rgb(0 0 0 / 18%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: clamp(1.9rem, 2.8vw, 2.35rem);
  font-weight: 400;
  line-height: .8;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.use-case-peek-arrow .direction-chevron {
  width: 14px;
  height: 14px;
  border-width: 2.5px;
}

.use-case-peek--prev {
  left: 12.5%;
  transform: translate(-50%, -50%);
}

.use-case-peek--next {
  right: 12.5%;
  transform: translate(50%, -50%);
}

.use-case-peek:hover img {
  opacity: .7;
  filter: saturate(1.04);
}

.use-case-peek:hover .use-case-peek-arrow {
  transform: scale(1.05);
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--marketing-panel-border));
  background: color-mix(in srgb, var(--color-accent-100) 58%, var(--color-bg));
}

.use-case-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
}

.use-case-dots {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 .25rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
}

.use-case-dots button {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.use-case-dots button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 24%, transparent);
  content: "";
  transform: translate(-50%, -50%);
  transition: width .18s ease, background .18s ease;
}

.use-case-dots button.is-active::before {
  width: 24px;
  background: var(--color-accent);
}

.use-case-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  padding: .8rem 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--marketing-panel-border) 72%, transparent);
  border-radius: 0;
  background: transparent;
}

.use-case-detail-copy h3 {
  max-width: 24ch;
  margin: .45rem 0 .55rem;
  font-family: 'Caprasimo', Georgia, serif;
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  line-height: 1.06;
}

.use-case-detail-copy p {
  max-width: 58ch;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  line-height: 1.55;
}

.use-case-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  align-self: center;
}

.use-case-detail-facts > div {
  min-width: 0;
  padding: .35rem .8rem;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--marketing-panel-border) 76%, transparent);
  border-radius: 0;
  background: transparent;
}

.use-case-detail-facts dt {
  margin-bottom: .35rem;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.use-case-detail-facts dd {
  margin: 0;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.4;
}

/* The old Dutch selector remains hidden during the bilingual migration. */
.use-case-explorer[hidden] { display: none !important; }

/* User stories: a truthful podium that is ready for real submissions without
   inventing testimonials before users have supplied them. */
.community-stories {
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(76px, 9vw, 118px);
}

.community-stories::before {
  position: absolute;
  z-index: -1;
  top: clamp(54px, 7vw, 88px);
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  border-block: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 31%),
    color-mix(in srgb, var(--color-neutral-100) 64%, var(--color-bg));
  content: "";
}

.community-stories-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.community-stories-head .section-heading--compact {
  max-width: 900px;
  margin-bottom: 0;
}

.community-stories-head .section-heading--compact p {
  max-width: 760px;
}

.community-stories-head > .btn {
  flex: none;
  margin-bottom: .1rem;
}

.community-stories-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(.9rem, 1.6vw, 1.25rem);
}

.community-story {
  min-width: 0;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-surface) 91%, transparent);
  box-shadow: 0 18px 48px rgb(0 0 0 / 7%);
}

.community-story--featured {
  display: grid;
  grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 2.5vw, 2rem);
  padding: clamp(1rem, 2.2vw, 1.45rem);
}

.community-story-portrait {
  min-height: 315px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .65rem;
  overflow: hidden;
  border-radius: 19px;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 31%),
    linear-gradient(145deg, color-mix(in srgb, var(--color-accent-100) 78%, var(--color-bg)), color-mix(in srgb, var(--color-neutral-200) 72%, var(--color-bg)));
  color: color-mix(in srgb, var(--color-text) 54%, transparent);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.community-story-portrait img {
  width: clamp(54px, 7vw, 78px);
  height: auto;
  opacity: .92;
}

.community-story-portrait--photo {
  min-height: 315px;
  align-content: stretch;
  justify-items: stretch;
  background: var(--color-neutral-100);
}

.community-story-portrait--photo img {
  width: 100%;
  height: 100%;
  min-height: 315px;
  opacity: 1;
  object-fit: cover;
  object-position: 50% 28%;
}

.community-story-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: .4rem 0 .15rem;
}

.community-story-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 26px;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent-100) 76%, transparent);
  color: var(--color-accent-800);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
}

.community-story-person {
  display: grid;
  gap: .18rem;
  margin-top: .85rem;
}

.community-story-person strong {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2vw, 1.72rem);
  font-weight: var(--font-heading-weight);
  letter-spacing: -.02em;
  line-height: 1.05;
}

.community-story-person span {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: .82rem;
}

.community-story-brand {
  display: flex;
  align-items: center;
  gap: .62rem;
  margin-top: .72rem;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: .76rem;
  font-weight: 650;
}

.community-story-brand img {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}

.community-story-hand {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: .85rem;
  padding: .35rem .7rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  font-size: .77rem;
  font-weight: 750;
}

.community-story h3 {
  margin: 1rem 0 .65rem;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  font-weight: var(--font-heading-weight);
  letter-spacing: -.025em;
  line-height: 1.12;
}

.community-story-facts {
  width: 100%;
  margin: .35rem 0 .45rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--marketing-panel-border);
}

.community-story-facts > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: .75rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--marketing-panel-border);
}

.community-story-facts dt {
  color: var(--color-accent-700);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .075em;
  line-height: 1.45;
  text-transform: uppercase;
}

.community-story-facts dd {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  font-size: .82rem;
  line-height: 1.48;
}

.community-story blockquote {
  width: 100%;
  margin: .3rem 0 0;
  padding: .9rem 1rem;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-neutral-100) 72%, var(--color-bg));
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
  font-size: .94rem;
  font-style: italic;
  line-height: 1.5;
}

.community-story-apps {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: auto;
  padding-top: 1rem;
  color: color-mix(in srgb, var(--color-text) 56%, transparent);
  font-size: .74rem;
  font-weight: 700;
}

.community-story-apps img,
.community-story-mini-apps img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.community-story-app-name {
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

.community-story-read {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .75rem;
  color: var(--color-text);
  font-size: .78rem;
  font-weight: 850;
  text-decoration: none;
}

.community-story-read:hover { text-decoration: underline; }

.community-story-read:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.community-story-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.25rem);
}

.community-story--compact,
.community-story--invite {
  padding: clamp(1.2rem, 2.5vw, 1.65rem);
}

.community-story-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.community-story-mini-apps {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.community-story-compact-profile {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  margin-top: .75rem;
}

.community-story-avatar {
  display: block;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 16px;
  object-fit: cover;
  object-position: 50% 34%;
  background: transparent;
  box-shadow: none;
}

.community-story-avatar--jesse {
  object-position: 50% 28%;
}

.community-story-compact-identity {
  min-width: 0;
}

.community-story-compact-profile .community-story-person {
  margin-top: 0;
}

.community-story-compact-profile .community-story-person strong {
  font-size: clamp(1.18rem, 1.65vw, 1.48rem);
}

.community-story-company {
  display: block;
  margin-top: .38rem;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.35;
}

.community-story--teaser {
  min-height: 0;
  padding: clamp(1.05rem, 2vw, 1.35rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.community-story--teaser .community-story-hand {
  margin-top: .75rem;
}

.community-story--teaser h3 {
  margin: .72rem 0 .48rem;
  font-size: clamp(1.14rem, 1.55vw, 1.42rem);
  line-height: 1.14;
}

.community-story--teaser > p {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  font-size: .86rem;
  line-height: 1.48;
}

.community-story--teaser .community-story-compact-quote {
  margin-top: .72rem;
  padding: .68rem .78rem;
  font-size: .82rem;
  line-height: 1.42;
}

.community-story--teaser .community-story-read {
  margin-top: auto;
  padding-top: .72rem;
}

.community-story--invite-wide {
  grid-column: 1 / -1;
  min-height: 0;
  padding: .9rem 1.05rem;
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.15fr) auto;
  align-items: center;
  gap: 1rem;
  box-shadow: none;
}

.community-story--invite-wide h3 {
  margin: .38rem 0 0;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
}

.community-story--invite-wide p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
}

.community-story--invite-wide a {
  margin-top: 0;
  white-space: nowrap;
}

.community-story--compact p,
.community-story--invite p {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  font-size: .9rem;
  line-height: 1.55;
}

.community-story--invite {
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 34%),
    color-mix(in srgb, var(--color-accent-100) 42%, var(--color-surface));
}

.community-story--invite a {
  display: inline-flex;
  gap: .42rem;
  margin-top: 1rem;
  color: var(--color-accent-800);
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
}

.community-story--invite a:hover { text-decoration: underline; }

.community-stories-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.5rem;
  margin-top: 1.1rem;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  font-size: .75rem;
  font-weight: 700;
}

.community-stories-foot span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.community-stories-foot span::before {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent);
  content: "";
}

/* Phone proof: normal page content instead of a floating hero ornament. */
.phone-proof-section {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(280px, .62fr);
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2.6rem);
  padding-block: clamp(1.8rem, 4.5vw, 3.2rem);
}

.phone-proof-copy {
  max-width: 680px;
}

.phone-proof-copy h2 {
  max-width: 13ch;
  margin: .5rem 0 1rem;
  font-family: 'Caprasimo', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: .98;
}

.phone-proof-copy p {
  max-width: 58ch;
  margin: 0 0 1rem;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  font-size: 1.02rem;
  line-height: 1.6;
}

.phone-proof-section .phone-demo-bridge {
  position: relative;
  z-index: 1;
  height: auto;
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.phone-proof-section .phone-demo-device,
.phone-proof-section .phone-demo-bridge.is-html-demo .phone-demo-device {
  position: relative;
  top: auto;
  right: auto;
  width: min(330px, 78vw);
  transform: none;
}

.phone-proof-section .phone-demo-device:hover,
.phone-proof-section .phone-demo-bridge.is-html-demo .phone-demo-device:hover {
  transform: translateY(-3px);
}

/* Developer-native SDK callout */
.sdk-callout {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(0, 1.3fr) auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-text) 5%, var(--color-surface)), var(--color-surface));
}

.sdk-repo-mark {
  min-width: 0;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid var(--marketing-panel-border);
  border-radius: 18px;
  background: var(--color-bg);
}

.sdk-repo-mark img { width: 40px; height: 40px; flex: none; }
.sdk-repo-mark span { min-width: 0; display: grid; gap: .25rem; }
.sdk-repo-mark small { color: color-mix(in srgb, var(--color-text) 50%, transparent); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.sdk-repo-mark code { overflow: hidden; text-overflow: ellipsis; font-size: .78rem; white-space: nowrap; }

.sdk-callout-copy h3 { margin-top: .35rem; }

.sdk-terminal {
  width: fit-content;
  max-width: 100%;
  margin-top: .9rem;
  padding: .65rem .8rem;
  display: flex;
  gap: .55rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-text) 92%, #111);
  color: #f6f2eb;
  font: 600 .76rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sdk-terminal span { color: #a8c88c; }
.sdk-terminal code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Insights: one featured story, compact selectors alongside it. */
.home-insights {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
  gap: 1.15rem;
}

.home-insights-head,
.home-insights-layout {
  grid-column: 1 / -1;
}

.home-insights-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
  gap: 1.15rem;
}

.home-insights > .home-insights-card { grid-column: 1; }
.home-insights > .home-insights-secondary { grid-column: 2; }
.home-insights-layout > .home-insights-card { grid-column: 1; }
.home-insights-layout > .home-insights-secondary { grid-column: 2; }

.home-insights .home-insights-card {
  position: relative;
  grid-template-columns: 1fr;
  min-height: 100%;
}

.home-insights-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.home-insights-feature-media {
  position: absolute;
  z-index: 2;
  top: 1.35rem;
  right: 1.35rem;
  margin: 0;
  pointer-events: none;
}

.home-insights-feature-logos {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  flex: none;
}

.home-insights-feature-logos span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, #201e1d 14%, transparent);
  border-radius: 16px;
  background: #f9f4ed;
  box-shadow: 0 12px 28px rgb(0 0 0 / 16%);
}

.home-insights-feature-logos span + span {
  margin-left: -14px;
}

.home-insights-feature-logos img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.home-insights-feature-logos:has(span:only-child) span {
  width: 78px;
  height: 78px;
  border-radius: 18px;
}

.home-insights-feature-logos:has(span:only-child) img {
  width: 48px;
  height: 48px;
}
.home-insights .website-plan-mini { transform: scale(.78); }

.home-insights .home-insights-secondary {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: .65rem;
}

.home-insights .home-insights-mini {
  width: 100%;
  min-height: 104px;
  padding: .9rem 1rem;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: .9rem;
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-insights .home-insights-mini.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-divider));
  background: color-mix(in srgb, var(--color-accent-100) 36%, var(--color-surface));
}

.home-insights .home-insights-mini-icon,
.home-insights .home-insights-mini-icons {
  width: 52px;
  height: 52px;
  border-radius: 13px;
}

.home-insights .home-insights-mini-icon img {
  width: 34px;
  height: 34px;
}

.home-insights .home-insights-mini-icons img {
  width: 28px;
  height: 28px;
}

.home-insights .home-insights-mini-icons img:first-child { translate: -7px -6px; }
.home-insights .home-insights-mini-icons img:last-child { translate: 8px 7px; }
.home-insights .home-insights-mini-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-text) 54%, transparent);
  font-size: 0;
  line-height: 1;
}

.home-insights .home-insights-mini-arrow::before {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}

/* Pricing: one obvious entry point, expansion as secondary context. */
.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 1rem;
  align-items: stretch;
}

.price-card--starter {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.3rem);
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--marketing-panel-border));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 36%),
    var(--color-surface);
  box-shadow: 0 20px 56px rgb(0 0 0 / 8%);
}

.price-card-kicker {
  position: absolute;
  top: clamp(1.5rem, 3.5vw, 2.3rem);
  right: clamp(1.5rem, 3.5vw, 2.3rem);
  width: fit-content;
  padding: .4rem .62rem;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 18%, transparent), color-mix(in srgb, var(--color-accent-2) 18%, transparent));
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-accent) 26%, var(--color-accent-2));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 10%, transparent);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.price-card--starter > b {
  width: fit-content;
  padding-right: 12rem;
  font-size: 1.25rem;
}
.price-card--starter > strong { font-size: clamp(2.7rem, 6vw, 4.5rem); }
.price-card-standard {
  display: block; width: fit-content; margin: .35rem 0 .25rem; padding: .45rem .6rem;
  border-radius: 12px; background: var(--color-accent-2-100); color: var(--color-accent-2-800);
  font-size: .76rem; font-weight: 650; line-height: 1.4;
}
.price-card-standard b { font-weight: 850; }
.price-card-benefits {
  margin: .2rem 0 .45rem;
  padding: 0;
  display: grid;
  gap: .55rem;
  list-style: none;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.price-card-benefits li {
  position: relative;
  padding-left: 1.35rem;
  line-height: 1.4;
}
.price-card-benefits li::before {
  position: absolute;
  left: 0;
  content: '✓';
  color: var(--color-accent-700);
  font-weight: 900;
}

.pricing-expand {
  padding: clamp(1.5rem, 3.5vw, 2.3rem);
  border: 1px solid var(--marketing-panel-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
}

.pricing-expand h3 {
  max-width: 18ch;
  margin: .45rem 0 .75rem;
  font-family: 'Caprasimo', Georgia, serif;
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.08;
}

.pricing-expand-rows {
  margin: 1rem 0 0;
  border-top: 1px solid var(--marketing-panel-border);
}

.pricing-expand-rows > div {
  padding: .95rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--marketing-panel-border);
}

.pricing-expand-rows span,
.pricing-expand-rows b,
.pricing-expand-rows small { display: block; }
.pricing-expand-rows small { margin-top: .2rem; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.pricing-expand-rows strong { font-family: 'Caprasimo', Georgia, serif; font-size: 1.35rem; }
.pricing-expand-price { text-align: right; }
.pricing-expand-price em {
  display: inline-block; margin-bottom: .25rem; padding: .2rem .42rem; border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 15%, transparent), color-mix(in srgb, var(--color-accent-2) 17%, transparent));
  color: var(--color-text); font-size: .6rem; font-style: normal; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
}
.pricing-expand-price small { text-align: right; }

/* Homepage conversion controls use dark ink on the orange action fill.
   This keeps the copy unchanged while meeting normal-text contrast in both themes. */
body.landing-page .btn-primary { color: #201e1d; }
body.landing-page .btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent) 88%, white);
  color: #201e1d;
}
body.landing-page .btn-primary:active:not(:disabled) {
  background: var(--color-accent);
  color: #201e1d;
}
body.landing-page .mobile-nav-panel > .mobile-nav-auth,
body.landing-page .mobile-nav-panel > .mobile-nav-auth:hover {
  color: #201e1d;
}
body.landing-page .final-cta .trial-note { color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* Homepage sign-in stays in context. */
.login-dialog {
  width: min(480px, calc(100% - 32px));
  max-width: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: var(--color-text);
}

.login-dialog::backdrop {
  background: rgb(18 18 16 / 58%);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.login-dialog-card {
  position: relative;
  padding: clamp(1.4rem, 4vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: 28px;
  background: var(--color-bg);
  box-shadow: 0 30px 90px rgb(0 0 0 / 30%);
}

.login-dialog-close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

.login-dialog-head {
  padding-right: 2.4rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.login-dialog-head img { width: 42px; height: 42px; }
.login-dialog-head .eyebrow { display: block; margin-bottom: .25rem; }
.login-dialog-head h2 { margin: 0; font-family: 'Caprasimo', Georgia, serif; font-size: clamp(1.55rem, 4vw, 2rem); line-height: 1; }
.login-google-slot {
  margin-top: 1rem;
  position: relative;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-bg);
}
.login-google-slot > div { max-width: 100% !important; }
.login-google-slot iframe {
  max-width: 100% !important;
  border-radius: 999px !important;
}
.login-google-slot::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 4px var(--color-bg);
  content: "";
  pointer-events: none;
}
.login-google-slot .landing-google-fallback { width: 100%; min-height: 44px; justify-content: center; }

.login-divider {
  margin: .9rem 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .65rem;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
  font-size: .72rem;
}
.login-divider::before,
.login-divider::after { height: 1px; content: ""; background: var(--color-divider); }

.login-form { width: 100%; display: grid; gap: .8rem; }
.login-form label { width: 100%; display: grid; gap: .35rem; font-size: .78rem; font-weight: 750; }
.login-form .input { width: 100%; min-height: 46px; }
.login-form .input:focus-visible {
  border-color: var(--color-accent);
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
.login-form .btn { width: 100%; min-height: 46px; justify-content: center; }
.login-message { min-height: 1.35em; margin: .7rem 0 0; color: var(--color-accent-700); font-size: .8rem; line-height: 1.4; }
.login-message.is-error { color: #b74235; }
.login-dialog-footer { margin: .75rem 0 0; color: color-mix(in srgb, var(--color-text) 58%, transparent); font-size: .8rem; text-align: center; }
.login-dialog-footer a { font-weight: 800; text-decoration: none; }

@media (max-width: 900px) {
  .use-case-focus { width: min(88%, 820px); }
  .use-case-peek--prev { left: 7%; }
  .use-case-peek--next { right: 7%; }
  .use-case-detail { grid-template-columns: 1fr; }
  .community-stories-grid { grid-template-columns: 1fr; }
  .community-story--invite-wide {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .community-story--invite-wide > p { grid-column: 1 / -1; }
  .phone-proof-section { grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr); gap: 1.5rem; }
  .sdk-callout { grid-template-columns: minmax(150px, .5fr) minmax(0, 1fr); }
  .sdk-callout .btn { grid-column: 2; justify-self: start; }
  .home-insights,
  .home-insights-layout { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); }
}

@media (max-width: 700px) {
  .use-case-section { padding-top: 14px; }
  .use-case-focus { width: 90%; }
  .use-case-peek { width: 54px; height: 54px; }
  .use-case-peek img { width: min(50vw, 190px); border-radius: 15px; opacity: .48; }
  .use-case-peek--prev { left: 7%; transform: translate(-25%, -50%); }
  .use-case-peek--next { right: 7%; transform: translate(25%, -50%); }
  .use-case-stage .use-case-media { border-radius: 20px; }
  .use-case-detail { padding-top: .7rem; }
  .use-case-detail-facts { grid-template-columns: 1fr; }
  .use-case-detail-facts > div { padding: .55rem 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--marketing-panel-border) 68%, transparent); }

  .community-stories { padding-bottom: 48px; }
  .community-stories::before { top: 44px; }
  .community-stories-head { align-items: flex-start; flex-direction: column; }
  .community-stories-head > .btn { width: 100%; justify-content: center; }
  .community-story--teaser { padding: 1rem; }
  .community-story-compact-profile { grid-template-columns: 60px minmax(0, 1fr); }
  .community-story-avatar { width: 60px; height: 60px; border-radius: 14px; }
  .community-story--invite-wide {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .community-story--invite-wide > p { grid-column: auto; }
  .community-story--invite-wide a { white-space: normal; }

  .phone-proof-section {
    grid-template-columns: 1fr;
    gap: .85rem;
    padding-block: 1rem 1.4rem;
    text-align: left;
  }
  .phone-proof-copy { margin-inline: 0; }
  .phone-proof-copy h2,
  .phone-proof-copy p { margin-inline: 0; }
  .phone-proof-section .phone-demo-bridge { place-items: center; }
  .phone-proof-section .phone-demo-device,
  .phone-proof-section .phone-demo-bridge.is-html-demo .phone-demo-device { width: min(280px, 72vw); }

  .sdk-section .sdkcap { display: none; }
  .sdk-section-grid { grid-template-columns: 1fr; }
  .sdk-callout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .sdk-callout .btn { grid-column: auto; width: 100%; justify-content: center; }
  .sdk-repo-mark { width: 100%; }

  .home-insights,
  .home-insights-layout {
    display: grid;
    grid-template-columns: 1fr;
  }
  .home-insights-head,
  .home-insights-layout,
  .home-insights > .home-insights-card,
  .home-insights > .home-insights-secondary,
  .home-insights-layout > .home-insights-card,
  .home-insights-layout > .home-insights-secondary { grid-column: 1; }
  .home-insights .home-insights-card { grid-template-columns: 1fr; }
  .home-insights-feature-media { top: 1rem; right: 1rem; }
  .home-insights-feature-logos span { width: 54px; height: 54px; border-radius: 14px; }
  .home-insights-feature-logos img { width: 32px; height: 32px; }
  .home-insights-feature-logos:has(span:only-child) span { width: 68px; height: 68px; }
  .home-insights-feature-logos:has(span:only-child) img { width: 42px; height: 42px; }
  .home-insights .home-insights-secondary {
    display: flex;
    overflow-x: auto;
    padding-bottom: .25rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .home-insights .home-insights-secondary::-webkit-scrollbar { display: none; }
  .home-insights .home-insights-mini { flex: 0 0 min(86vw, 340px); scroll-snap-align: start; }

  .pricing-layout { grid-template-columns: 1fr; gap: .75rem; }
  .pricing-section .section-heading { margin-bottom: .9rem; }
  .price-card--starter,
  .pricing-expand { padding: 1.1rem; }
  .price-card-kicker { top: 1.1rem; right: 1.1rem; }
  .price-card--starter > b { padding-right: 10.5rem; }
  .pricing-expand h3 { max-width: none; }
  .pricing-expand-rows { margin: .8rem 0 .6rem; }
  .pricing-expand-rows > div { padding: .7rem 0; }
  .pricing-section + .final-cta {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }
  .pricing-section + .final-cta > div { padding: 1.1rem; }
}

@media (max-width: 600px) {
  .login-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    margin: auto 8px 8px;
  }
  .login-dialog-card { padding: 1.25rem; border-radius: 24px; }
  .login-dialog-close { top: 1.25rem; right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .use-case-peek,
  .use-case-dots button,
  .connection-showcase-item,
  .connection-showcase-arrow,
  .carousel-arrow { transition: none; }
}

/* ── koppelfilm op de homepage (vervangt de telefoondemo) ───────────────── */
.phone-proof-section:has(.connect-film) {
  grid-template-columns: minmax(320px, 1.12fr) minmax(0, .78fr);
  align-items: center;
  column-gap: clamp(3.5rem, 5vw, 5rem);
  padding-top: clamp(6rem, 8vw, 7.5rem);
  padding-bottom: clamp(3rem, 4.5vw, 4rem);
}

/* De film staat links, de tekst rechts: twee secties op een rij met de kop aan
   dezelfde kant leest als één lange kolom tekst. */
.phone-proof-section:has(.connect-film) .connect-film { order: -1; }

.connect-film {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  width: 100%;
  min-width: 0;
}

.connect-film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1.5px solid color-mix(in srgb, var(--color-text) 13%, transparent);
  border-radius: clamp(14px, 1.6vw, 24px);
  overflow: hidden;
  background: #f7f6f1;
  box-shadow: 0 22px 55px color-mix(in srgb, var(--color-text) 13%, transparent);
}

.connect-film-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Eén koppeling, drie aanbieders: de naam wisselt in de kop. De geanimeerde
   regel is aria-hidden en zet de wisselnaam op een eigen regel, zodat de
   breedste naam geen gat achterlaat. De volledige opsomming staat eronder
   voor schermlezers en voor wie beweging uitzet. */
.phone-proof-section:has(.connect-film) .phone-proof-copy h2 {
  max-width: 15ch;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
}

.provider-swap-line {
  display: grid;
  justify-items: start;
}

.provider-swap {
  display: inline-grid;
  color: var(--color-accent);
}

.provider-swap > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  animation: provider-swap-cycle 7.5s cubic-bezier(.2, .8, .2, 1) infinite;
}

/* Draaien de animaties niet, dan blijft de eerste naam staan i.p.v. een gat. */
.provider-swap > span:first-child { opacity: 1; }

.provider-swap > span:nth-child(2) { animation-delay: 2.5s; }
.provider-swap > span:nth-child(3) { animation-delay: 5s; }

@keyframes provider-swap-cycle {
  0%        { opacity: 0; transform: translateY(.3em); }
  2%, 31%   { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-.26em); }
}

.provider-swap-all {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .provider-swap-line { display: none; }
  .provider-swap-all {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

.connect-film-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
}

@media (max-width: 860px) {
  .phone-proof-section:has(.connect-film) {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    row-gap: 1.25rem;
    padding-top: clamp(5.5rem, 16vw, 7rem);
    padding-bottom: clamp(2.5rem, 10vw, 3.5rem);
  }

  /* On mobile the section is one decision scene: headline, proof, then action.
     display: contents keeps the existing copy/markup intact while allowing the
     film to sit between the heading and the existing CTA. */
  .phone-proof-section:has(.connect-film) .phone-proof-copy { display: contents; }
  .phone-proof-section:has(.connect-film) .phone-proof-copy > .eyebrow { order: 0; }
  .phone-proof-section:has(.connect-film) .phone-proof-copy > h2 { order: 1; }
  .phone-proof-section:has(.connect-film) .connect-film { order: 2; }
  .phone-proof-section:has(.connect-film) .phone-proof-action {
    order: 3;
    width: 100%;
    margin-top: .25rem;
    justify-content: center;
  }
  .phone-proof-section:has(.connect-film) .phone-proof-action .btn { width: 100%; }
}

.phone-proof-copy .phone-proof-action {
  margin-top: clamp(.8rem, 1.6vw, 1.4rem);
  justify-content: flex-start;
}

/* HANDSWEBSI-548: photo-led featured Insight, while other selections retain
   their original compact connector artwork and content. */
.home-insights .home-insights-card.has-editorial-image {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  min-height: 420px;
}

.home-insights .home-insights-card.has-editorial-image .home-insights-copy {
  padding: clamp(1.5rem, 2.6vw, 2.45rem);
}

.home-insights .home-insights-card.has-editorial-image .home-insights-copy h3 {
  max-width: 16ch;
  font-size: clamp(27px, 2.5vw, 36px);
}

.home-insights .home-insights-card.has-editorial-image .home-insights-copy p {
  font-size: .92rem;
  line-height: 1.55;
}

.home-insights .home-insights-card.has-editorial-image .home-insights-feature-media {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 370px;
  overflow: hidden;
  border-left: 1px solid var(--marketing-panel-border, var(--color-divider));
}

.home-insights-editorial-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}

@media (max-width: 700px) {
  .home-insights .home-insights-card.has-editorial-image {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .home-insights .home-insights-card.has-editorial-image .home-insights-feature-media {
    order: -1;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-left: 0;
    border-bottom: 1px solid var(--marketing-panel-border, var(--color-divider));
  }

  .home-insights .home-insights-card.has-editorial-image .home-insights-copy {
    padding: clamp(1.3rem, 5vw, 1.8rem);
  }

  .home-insights .home-insights-card.has-editorial-image .home-insights-copy h3 {
    font-size: clamp(29px, 8vw, 38px);
  }

  .home-insights-editorial-image {
    object-position: center center;
  }
}
/* GitHub Insight: a wide editorial photograph should show the full story
   (Domain, Cloudflare, GitHub, Hands and the website), not a portrait crop. */
.home-insights .home-insights-card.has-landscape-image {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-feature-media {
  order: -1;
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 5 / 2;
  border-left: 0;
  border-bottom: 1px solid var(--marketing-panel-border, var(--color-divider));
}

.home-insights .home-insights-card.has-landscape-image .home-insights-editorial-image {
  object-position: center 50%;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-copy {
  padding: clamp(1.2rem, 2vw, 1.8rem) clamp(1.4rem, 2.5vw, 2.3rem);
}

.home-insights .home-insights-card.has-landscape-image .home-insights-copy h3 {
  max-width: 23ch;
  font-size: clamp(27px, 2.4vw, 35px);
}

.home-insights .home-insights-card.has-landscape-image .home-insights-copy p {
  margin-top: .55rem;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-copy a {
  margin-top: .75rem;
}

@media (max-width: 700px) {
  .home-insights .home-insights-card.has-landscape-image .home-insights-feature-media {
    aspect-ratio: 16 / 9;
  }

  .home-insights .home-insights-card.has-landscape-image .home-insights-copy {
    padding: 1.3rem;
  }
}
/* Homepage Insight card: keep the original ~447px desktop footprint when
   selecting any article; photos never resize the overall layout. */
.home-insights .home-insights-card {
  height: 447px;
  min-height: 0;
  max-height: 447px;
}

.home-insights .home-insights-card.has-landscape-image {
  height: 447px;
  min-height: 0;
  max-height: 447px;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-feature-media {
  flex: 0 0 242px;
  height: 242px;
  min-height: 0;
  aspect-ratio: auto;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-editorial-image {
  object-position: center 54%;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-copy {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  padding: .65rem clamp(1.15rem, 2vw, 1.8rem);
}

.home-insights .home-insights-card.has-landscape-image .home-insights-featured-label {
  position: absolute;
  z-index: 3;
  top: .9rem;
  left: 1.15rem;
  margin: 0;
  border-color: rgb(255 245 235 / 35%);
  background: rgb(26 24 22 / 90%);
  color: #f9f4ed;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-meta-row {
  margin-bottom: .25rem;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-copy h3 {
  max-width: 25ch;
  font-size: clamp(26px, 2.1vw, 31px);
  line-height: 1.07;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: .35rem;
  font-size: .85rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-insights .home-insights-card.has-landscape-image .home-insights-copy a {
  margin-top: .45rem;
  font-size: .86rem;
}

@media (max-width: 700px) {
  /* One stable mobile card footprint, preserving each photo's own crop. */
  .home-insights .home-insights-card,
  .home-insights .home-insights-card.has-editorial-image,
  .home-insights .home-insights-card.has-landscape-image {
    height: 550px;
    min-height: 550px;
    max-height: 550px;
  }

  .home-insights .home-insights-card.has-editorial-image .home-insights-copy {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.05rem 1.3rem;
  }

  .home-insights .home-insights-card.has-landscape-image .home-insights-feature-media {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .home-insights .home-insights-card.has-landscape-image .home-insights-featured-label {
    position: static;
    z-index: auto;
    align-self: flex-start;
    margin-bottom: .55rem;
    border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-divider));
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    color: var(--color-accent-700);
  }

  .home-insights .home-insights-card.has-landscape-image .home-insights-copy {
    padding: 1.05rem 1.3rem;
  }

  .home-insights .home-insights-card.has-landscape-image .home-insights-copy h3 {
    font-size: clamp(28px, 8vw, 35px);
  }

  .home-insights .home-insights-card.has-landscape-image .home-insights-copy p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
}