@font-face {
  font-family: "Coconat Text";
  src: url("/fonts/Coconat-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Coconat";
  src: url("/fonts/Coconat-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Coconat";
  src: url("/fonts/Coconat-Demi.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #111214;
  --muted: #6b6c70;
  --faint: #999a9e;
  --line: rgba(17, 18, 20, 0.14);
  --soft: #f4f5f6;
  --canvas: #ffffff;
  --incoming: #e9e9ec;
  --strong: #28282b;
  --type-small: 12px;
  --type-body: 18px;
  --type-display: clamp(40px, 5.4vw, 72px);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Coconat", Georgia, serif;
  --sidebar-width: 200px;
  --content-left: clamp(180px, 18vw, 300px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--canvas);
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: 450;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden;
}

button,
input,
textarea {
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.statement,
.content-section,
.faq-section,
.site-footer {
  width: min(1180px, calc(100vw - var(--content-left) - 48px));
  margin-right: auto;
  margin-left: var(--content-left);
}

.statement {
  padding: 15vh 0 20vh;
}

.hero-copy {
  width: min(930px, 100%);
}

#hero-title {
  width: max-content;
  max-width: none;
  white-space: nowrap;
  text-wrap: nowrap;
}

.hero-ending {
  white-space: nowrap;
}

.agent-character {
  --agent-body: var(--ink);
  --agent-eye: #fff;
  --agent-pupil: var(--ink);
  --gaze-x: 0px;
  --gaze-y: 0px;
  --pointer-x: 0px;
  --pointer-y: 0px;
  --pointer-lean: 0deg;
  --left-scale-x: 1;
  --left-scale-y: 1;
  --left-rotate: -7deg;
  --right-scale-x: 1;
  --right-scale-y: 1;
  --right-rotate: 2deg;
  --right-shift-x: 0px;
  --right-shift-y: 0px;
  --expression-x: 0px;
  --expression-y: 0px;
  --pupil-x: 0px;
  --pupil-y: 1px;
  --glint-opacity: 0;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  pointer-events: none;
  transform-origin: 22% 12%;
}

.agent-character svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.agent-shell {
  transform: translate(var(--pointer-x), var(--pointer-y)) rotate(var(--pointer-lean));
  transform-origin: 22% 12%;
  transform-box: fill-box;
  transition: transform 540ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.agent-body {
  fill: var(--agent-body);
  transform: scale(.96, .93);
  transform-box: fill-box;
  transform-origin: 26% 22%;
  filter: drop-shadow(0 5px 9px rgba(17, 18, 20, .14));
}

.agent-bot-face {
  transform: translate(var(--expression-x), var(--expression-y));
  transition: transform 320ms cubic-bezier(.23, 1, .32, 1);
}

.agent-eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1);
}

.agent-eye--left {
  transform: translate(30.5px, 39.5px) rotate(var(--left-rotate)) scale(var(--left-scale-x), var(--left-scale-y));
}

.agent-eye--right {
  transform: translate(calc(50px + var(--right-shift-x)), calc(42.5px + var(--right-shift-y))) rotate(var(--right-rotate)) scale(var(--right-scale-x), var(--right-scale-y));
}

.agent-eye-white {
  fill: var(--agent-eye);
}

.agent-iris {
  transform: translate(calc(var(--pupil-x) + var(--gaze-x)), calc(var(--pupil-y) + var(--gaze-y)));
  transition: transform 460ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.agent-eye--left .agent-iris {
  transform: translate(calc(var(--pupil-x) + var(--gaze-x) - .55px), calc(var(--pupil-y) + var(--gaze-y) + .25px));
}

.agent-eye--right .agent-iris {
  transform: translate(calc(var(--pupil-x) + var(--gaze-x) + .65px), calc(var(--pupil-y) + var(--gaze-y) - .15px));
}

.agent-pupil {
  fill: var(--agent-pupil);
}

.agent-glint {
  fill: var(--agent-eye);
  opacity: var(--glint-opacity);
  transition: opacity 220ms ease;
}

.agent-character.is-shiny {
  --glint-opacity: .92;
}

.agent-character.is-blinking .agent-eye {
  transition-duration: 90ms;
}

.agent-character.is-blinking .agent-glint {
  opacity: 0;
}

.agent-character.is-blinking .agent-eye--left {
  transform: translate(30.5px, 39.5px) rotate(var(--left-rotate)) scale(var(--left-scale-x), .11);
}

.agent-character.is-blinking .agent-eye--right {
  transform: translate(calc(50px + var(--right-shift-x)), calc(42.5px + var(--right-shift-y))) rotate(var(--right-rotate)) scale(var(--right-scale-x), .11);
}

.agent-character[data-expression='curious'] {
  --left-scale-x: 1.06;
  --left-scale-y: 1.06;
  --right-scale-x: .92;
  --right-scale-y: .92;
  --left-rotate: -12deg;
  --right-rotate: 3deg;
  --right-shift-y: 1px;
  --pupil-x: 1px;
  --pupil-y: .2px;
}

.agent-character[data-expression='thinking'] {
  --left-scale-y: .88;
  --right-scale-y: .9;
  --left-rotate: -12deg;
  --right-rotate: -4deg;
  --right-shift-y: 1px;
  --pupil-x: 1.2px;
  --pupil-y: -1.5px;
  --expression-y: 1px;
}

.agent-character[data-expression='serious'] {
  --left-scale-x: 1.03;
  --left-scale-y: .58;
  --right-scale-x: 1.03;
  --right-scale-y: .58;
  --right-rotate: -1deg;
  --pupil-y: 0px;
}

.agent-character[data-expression='happy'] {
  --left-scale-x: 1.04;
  --left-scale-y: .68;
  --right-scale-x: 1.04;
  --right-scale-y: .68;
  --left-rotate: -10deg;
  --right-rotate: 2deg;
  --pupil-y: -.6px;
}

.agent-character[data-expression='love'] {
  --left-scale-x: 1.08;
  --left-scale-y: 1.07;
  --right-scale-x: 1.08;
  --right-scale-y: 1.07;
  --left-rotate: -10deg;
  --right-rotate: 5deg;
  --pupil-x: -1px;
  --pupil-y: 0px;
}

.agent-character--inline {
  width: 1em;
  height: 1em;
  margin-left: .24em;
  vertical-align: -.13em;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

h1,
h2,
.site-footer h2,
.contact-dialog h2 {
  font-family: var(--font-brand);
  font-size: var(--type-display);
  font-weight: 500;
  letter-spacing: -0.052em;
  line-height: 0.98;
  text-wrap: balance;
}

.hero-copy > p {
  width: min(740px, 100%);
  margin-top: 34px;
  color: var(--muted);
  font-size: var(--type-body);
}

.hero-copy--landing {
  container-type: inline-size;
}

.hero-copy--landing #hero-title {
  width: auto;
  max-width: 100%;
  font-size: min(72px, 6.5cqw);
  white-space: nowrap;
  text-wrap: nowrap;
}

.hero-copy--landing > p {
  font-family: var(--font-brand);
  width: min(66ch, 100%);
  margin-top: 28px;
  color: var(--ink);
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.55;
}

.hero-copy--landing > p:first-of-type {
  font-size: 16px;
  line-height: 1.4;
}

.hero-copy--landing > p strong {
  font-family: "Coconat Text", Georgia, serif;
  font-weight: 600;
  font-synthesis: weight;
}

.hero-copy--landing > p + p {
  margin-top: 10px;
}

.primary-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-brand);
  font-size: var(--type-small);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 120ms var(--ease-out);
}

.primary-link {
  border-color: #0a0a0a;
  background: #0a0a0a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff;
}

.product-film {
  margin-top: 14vh;
  scroll-margin-top: 30px;
}

.new-chat-demo-frame {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
  border-radius: 24px;
  background: transparent;
}

/* Landing-screen rhythm and controls. */
.statement--landing {
  padding-top: clamp(104px, 12vh, 160px);
  padding-bottom: clamp(96px, 12vh, 160px);
}

.statement--landing .primary-link {
  min-height: 44px;
  padding: 12px 20px;
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0;
}

.statement--landing .primary-link {
  box-shadow: 0 4px 12px rgba(17, 18, 20, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.statement--landing .product-film {
  margin-top: clamp(56px, 8vh, 96px);
  scroll-margin-top: 24px;
}

@media (hover: hover) and (pointer: fine) {
  .statement--landing .primary-link:hover {
    background: #252628;
    box-shadow: 0 6px 16px rgba(17, 18, 20, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}

/* Front-page New Chat directory. This mirrors the live product's people-first
   home rather than presenting a flattened product screenshot. */

.content-section,
.faq-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  gap: 10vw;
  padding: 22vh 0;
  border-top: 1px solid var(--ink);
  scroll-margin-top: 28px;
}

.footer-copy > p,
.faq-list p {
  color: var(--muted);
  font-size: var(--type-body);
}

.about-section {
  column-gap: clamp(52px, 8vw, 112px);
  row-gap: 10vh;
}

.relationship-map {
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  height: clamp(340px, 32vw, 460px);
  margin: 2vh 0 0;
  overflow: hidden;
}

.relationship-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.relationship-lines path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.map-paths path {
  stroke: rgba(17, 18, 20, 0.32);
  stroke-width: 1;
}

.map-streams path {
  stroke: url(#context-shimmer);
  stroke-width: 1.4;
  stroke-dasharray: none;
}


.map-node,
.map-center {
  position: absolute;
  z-index: 1;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
}

.map-node {
  width: 72px;
  height: 72px;
  place-items: center;
}

.map-node img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(20, 21, 24, 0.08));
}

.map-signal img,
.map-messenger img,
.map-x img,
.map-wechat img,
.map-google-chat img,
.map-kakaotalk img,
.map-slack img,
.map-mail img {
  width: 56px;
  height: 56px;
}

.map-wechat img,
.map-kakaotalk img,
.map-mail img {
  width: 64px;
  height: 64px;
}

.map-imessage { top: 18%; left: 6%; }
.map-whatsapp { top: 10%; left: 20%; }
.map-instagram { top: 22%; left: 34%; }
.map-telegram { top: 10%; left: 50%; }
.map-signal { top: 22%; left: 66%; }
.map-messenger { top: 10%; left: 80%; }
.map-x { top: 18%; left: 94%; }
.map-wechat { top: 78%; left: 8%; }
.map-google-chat { top: 90%; left: 25%; }
.map-kakaotalk { top: 80%; left: 39%; }
.map-linkedin { top: 80%; left: 61%; }
.map-discord { top: 90%; left: 75%; }
.map-slack { top: 78%; left: 92%; }
.map-mail { top: 90%; left: 50%; }

.map-center {
  top: 50%;
  left: 50%;
  gap: 7px;
}

.map-brand-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 116px;
  height: 116px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.map-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
}


.product-section {
  display: block;
}

.tough-conversation-section {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.45fr);
  align-items: center;
  gap: clamp(34px, 4.5vw, 76px);
  min-height: 100svh;
  padding: clamp(36px, 5vh, 56px) 0;
}

.tough-conversation-section h2 {
  max-width: 620px;
  font-size: clamp(40px, 3.4vw, 68px);
  line-height: 0.98;
}

.tough-demo-frame {
  width: 100%;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 18, 20, 0.1);
  border-radius: 22px;
  background: #eef1f5;
  box-shadow: 0 24px 64px rgba(20, 21, 24, 0.09);
}

.tough-demo-frame iframe {
  display: block;
  width: 100%;
  height: clamp(500px, 72vh, 600px);
  border: 0;
  background: transparent;
}

.faq-list summary {
  font-family: var(--font-brand);
  font-size: var(--type-body);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.faq-section {
  border-top-color: var(--line);
}

.faq-list {
  border-top: 1px solid var(--ink);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}

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

.faq-list summary::after {
  content: "+";
  color: var(--faint);
  font-weight: 450;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list p {
  padding: 0 0 26px;
  line-height: 1.55;
}

.site-footer {
  position: relative;
  min-height: 100vh;
  overflow: visible;
  padding: 0 0 34px;
  border-top: 1px solid var(--ink);
  isolation: isolate;
}

.footer-copy {
  position: relative;
  z-index: 2;
  width: min(500px, 38%);
  padding-top: 17vh;
}

.footer-character-stage {
  position: absolute;
  z-index: 10;
  top: 0;
  right: calc(var(--content-left) + 100% - 100vw);
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.agent-character--footer {
  position: absolute;
  top: 12%;
  left: 78%;
  width: clamp(660px, 64vw, 860px);
  height: clamp(660px, 64vw, 860px);
  filter: none;
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 20%;
  animation: footer-agent-drift 8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation-play-state: paused;
  will-change: transform;
}

.agent-character--footer.is-active {
  animation-play-state: running;
}

.agent-character--footer .agent-body {
  transform: scale(1.02, 1);
  filter: drop-shadow(0 2px 3px rgba(17, 18, 20, 0.12));
}

@keyframes footer-agent-drift {
  0%, 100% {
    transform: translate3d(-52%, 1.5%, 0) rotate(-1.2deg);
  }
  50% {
    transform: translate3d(-48%, -1.5%, 0) rotate(1.1deg);
  }
}

.footer-copy > p {
  width: min(650px, 100%);
  margin-top: 34px;
}

.footer-copy .primary-link {
  margin-top: 34px;
}

.contact-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.contact-overlay.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

.contact-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
}

.contact-dialog {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 34px;
  border: 1px solid var(--ink);
  background: var(--canvas);
  font-size: var(--type-small);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 180ms ease, transform 220ms var(--ease-out);
}

.contact-dialog:focus {
  outline: 0;
}

.contact-overlay.is-open .contact-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 22px;
  right: 24px;
  padding: 0 0 3px;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: inherit;
  transition: opacity 140ms ease, transform 120ms var(--ease-out);
}

.access-form {
  display: grid;
  gap: 26px;
  margin-top: 56px;
}

.contact-dialog label {
  display: grid;
  gap: 8px;
}

.contact-dialog label > span {
  color: var(--ink);
  font-size: inherit;
}

.contact-dialog label > span small {
  margin-left: 5px;
  color: #8b8b93;
  font: inherit;
}

.contact-dialog input,
.contact-dialog textarea {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  outline: 0;
  background: transparent;
  font-size: inherit;
  resize: vertical;
  transition: border-color 140ms ease;
}

.contact-dialog input::placeholder,
.contact-dialog textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.contact-dialog input:focus,
.contact-dialog textarea:focus {
  border-color: var(--ink);
}

.nav-item:active,
.primary-link:active,
.modal-close:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover,
  .modal-close:hover {
    opacity: 0.56;
  }

  .primary-link:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
  }
}

@media (max-width: 920px) {
  :root {
    --content-left: 150px;
  }

  .statement,
  .content-section,
  .faq-section,
  .site-footer {
    width: calc(100vw - var(--content-left) - 32px);
    margin-left: var(--content-left);
  }

  .content-section,
  .faq-section {
    grid-template-columns: 1fr;
    gap: 64px;
  }
}

@media (max-width: 680px) {
  :root {
    --content-left: 16px;
    --type-body: 16px;
    --type-display: clamp(32px, 9.6vw, 38px);
  }

  .statement,
  .content-section,
  .faq-section,
  .site-footer {
    width: calc(100vw - 32px);
    margin-left: 16px;
  }

  .statement {
    padding-top: 116px;
    padding-bottom: 92px;
  }

  #hero-title {
    width: auto;
    max-width: 100%;
    font-size: clamp(32px, 10vw, 40px);
    line-height: 0.96;
    white-space: normal;
    text-wrap: balance;
  }

  .hero-copy br {
    display: none;
  }

  .hero-copy > p {
    margin-top: 28px;
  }

  .primary-link {
    min-height: 40px;
    padding-right: 17px;
    padding-left: 17px;
  }

  .product-film {
    margin-top: 64px;
  }

  .new-chat-demo-frame {
    height: 480px;
    border-radius: 18px;
  }

  .content-section,
  .faq-section {
    gap: 38px;
    padding: 92px 0;
    scroll-margin-top: 60px;
  }

  .about-section {
    row-gap: 46px;
  }

  .relationship-map {
    height: 272px;
    margin-top: 8px;
  }

  .map-node {
    width: 48px;
    height: 42px;
  }

  .map-node img {
    width: 42px;
    height: 42px;
  }

  .map-signal img,
  .map-messenger img,
  .map-x img,
  .map-wechat img,
  .map-google-chat img,
  .map-kakaotalk img,
  .map-slack img,
  .map-mail img {
    width: 37px;
    height: 37px;
  }

  .map-brand-logo {
    width: 72px;
    height: 72px;
  }

  .map-paths path:nth-child(1), .map-streams path:nth-child(1) { d: path("M114 88 C210 92 330 150 500 200"); }
  .map-paths path:nth-child(2), .map-streams path:nth-child(2) { d: path("M241 69 C285 118 360 148 500 200"); }
  .map-paths path:nth-child(3), .map-streams path:nth-child(3) { d: path("M383 112 C400 130 412 146 500 200"); }
  .map-paths path:nth-child(4), .map-streams path:nth-child(4) { d: path("M500 69 C492 100 493 125 500 200"); }
  .map-paths path:nth-child(5), .map-streams path:nth-child(5) { d: path("M617 112 C600 130 588 146 500 200"); }
  .map-paths path:nth-child(6), .map-streams path:nth-child(6) { d: path("M759 69 C715 118 640 148 500 200"); }
  .map-paths path:nth-child(7), .map-streams path:nth-child(7) { d: path("M886 88 C790 92 670 150 500 200"); }
  .map-paths path:nth-child(8), .map-streams path:nth-child(8) { d: path("M135 297 C250 302 350 268 500 200"); }
  .map-paths path:nth-child(9), .map-streams path:nth-child(9) { d: path("M287 336 C355 308 397 270 500 200"); }
  .map-paths path:nth-child(10), .map-streams path:nth-child(10) { d: path("M414 293 C434 272 447 252 500 200"); }
  .map-paths path:nth-child(11), .map-streams path:nth-child(11) { d: path("M586 293 C566 272 553 252 500 200"); }
  .map-paths path:nth-child(12), .map-streams path:nth-child(12) { d: path("M713 336 C645 308 603 270 500 200"); }
  .map-paths path:nth-child(13), .map-streams path:nth-child(13) { d: path("M865 297 C750 302 650 268 500 200"); }
  .map-paths path:nth-child(14), .map-streams path:nth-child(14) { d: path("M500 328 C508 298 507 275 500 200"); }

  .tough-demo-frame {
    margin-top: 0;
    border-radius: 18px;
  }

  .tough-demo-frame iframe {
    height: 950px;
  }

  .tough-conversation-section {
    min-height: 0;
    gap: 40px;
  }

  .tough-conversation-section h2 {
    font-size: var(--type-display);
  }

  .faq-list summary {
    gap: 18px;
    padding: 19px 0;
  }

  .site-footer {
    min-height: 100svh;
    padding-top: 0;
  }

  .footer-copy {
    width: 100%;
    padding-top: 96px;
  }

  .footer-character-stage {
    top: 42%;
    right: calc(var(--content-left) + 100% - 100vw);
    bottom: 0;
    left: 0;
  }

  .agent-character--footer {
    top: 0;
    left: 65%;
    width: clamp(320px, 96vw, 430px);
    height: clamp(320px, 96vw, 430px);
  }

  .contact-dialog {
    width: calc(100vw - 20px);
    padding: 26px 20px;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .map-streams path {
    animation: none;
    opacity: 0;
  }

  .agent-shell,
  .agent-bot-face,
  .agent-eye,
  .agent-iris,
  .agent-glint {
    transition-duration: 0.01ms !important;
  }

  .agent-character--footer {
    animation: none;
    transform: translate3d(-50%, 0, 0) rotate(-0.5deg);
  }

}

.alex-demo { grid-column: 1 / -1; min-width: 0; margin: 0; }
.alex-demo iframe { display: block; width: 100%; height: 1080px; border: 0; background: transparent; }
.about-section { row-gap: 40px; }
@media(max-width:760px) { .alex-demo iframe { height: 1160px; } }

.about-section > h2 { grid-column: 1 / -1; }

.flight-section { row-gap: 44px; align-items: start; }
.flight-demo-frame { grid-column: 1 / -1; min-width: 0; margin: 0; }
.flight-demo-frame iframe { display: block; width: 100%; height: 930px; border: 0; background: transparent; }
@media(max-width:760px) { .flight-demo-frame iframe { height: 1780px; } }

.connections-section { display: grid; align-items: start; column-gap: clamp(40px,6vw,96px); row-gap: 32px; padding-block: clamp(56px,8vh,96px); }
.connections-section h2 { line-height: 1.08; }
.connections-section .relationship-map { height: clamp(280px,27vw,340px); margin: 8px 0; }
@media(max-width:760px) { .connections-section { grid-template-columns: minmax(0,1fr); row-gap: 32px; } }
.map-agent-dot { overflow: visible; filter: drop-shadow(0 4px 10px #17181a10); }
.map-agent-dot img { object-fit: contain; transform: none; }

@media(max-width:760px) {
  .connections-section .relationship-map { height: 272px; margin: 0; }
}

/* Compact page rhythm: shared type, spacing, and content measures. */
:root {
  --type-body: 15px;
  --type-display: clamp(32px,4.32vw,58px);
  --section-space: clamp(96px,10vw,144px);
  --section-gap: clamp(28px,4.8vw,64px);
  --content-left: calc(var(--sidebar-width) + 86px);
}
.statement, .content-section, .faq-section, .site-footer {
  width: min(1040px,calc(100vw - var(--content-left) - 38px));
}
.statement--landing { padding-top: clamp(104px,11vh,144px); padding-bottom: var(--section-space); }
.hero-copy--landing #hero-title { font-size: min(69.6px,6.24cqw); line-height: 1.06; letter-spacing: -.045em; }
.hero-copy--landing > p { max-width: 58ch; font-size: 18px; line-height: 1.5; margin-top: 26px; }
.hero-copy--landing > p:first-of-type { font-size: 18px; }
.hero-copy--landing > p + p { margin-top: 8px; }
.statement--landing .primary-link { padding-inline: 19px; min-height: 48px; font-size: 15.6px; }
.statement--landing .product-film { margin-top: 64px; }
.new-chat-demo-frame { height: 520px; border-radius: 20px; }
.content-section, .faq-section { padding-block: var(--section-space); column-gap: var(--section-gap); row-gap: 56px; align-items: start; border-top-color: #e7e7eb; }
.content-section h2, .faq-section h2, .site-footer h2 { font-size: var(--type-display); line-height: 1.08; letter-spacing: -.035em; }
.connections-section .relationship-map { height: clamp(224px,21.6vw,280px); margin: 0; }
.map-node img { width: 51px; height: 51px; }
.map-signal img, .map-messenger img, .map-x img, .map-wechat img, .map-google-chat img, .map-kakaotalk img, .map-slack img, .map-mail img { width: 45px; height: 45px; }
.map-agent-dot { width: 68px; height: 68px; }
.tough-conversation-section { min-height: 0; grid-template-columns: minmax(0,.95fr) minmax(320px,.75fr); }
.tough-conversation-section .tough-demo-frame { grid-column: 1 / -1; margin: 0; border-radius: 20px; }
.tough-demo-frame iframe { height: 520px; }
.faq-list summary { font-size: 16px; line-height: 1.4; padding-block: 20px; }
.faq-list p { font-size: 14px; line-height: 1.6; padding-bottom: 20px; }
.site-footer { min-height: 80vh; }
.footer-copy { padding-top: 12vh; }
.footer-copy > p { font-size: 16px; }
@media(max-width:920px) {
  :root { --sidebar-width: 176px; --content-left: calc(var(--sidebar-width) + 54px); }
  .content-section, .faq-section, .tough-conversation-section { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:680px) {
  :root { --content-left: 16px; --type-display: clamp(30px,8vw,38px); --section-space: 80px; }
  .statement, .content-section, .faq-section, .site-footer { width: calc(100vw - 32px); margin-left: 16px; }
  .statement--landing { padding-top: 96px; padding-bottom: var(--section-space); }
  .hero-copy--landing #hero-title { font-size: min(45.6px,6.5cqw); }
  .hero-copy--landing > p, .hero-copy--landing > p:first-of-type { font-size: 16px; }
  .statement--landing .product-film { margin-top: 44px; }
  .statement--landing .primary-link { min-height: 44px; }
  .new-chat-demo-frame { height: 500px; }
  .content-section, .faq-section { row-gap: 36px; }
  .connections-section .relationship-map { height: 244px; }
  .map-node img { width: 36px; height: 36px; }
  .map-agent-dot { width: 54px; height: 54px; }
  .tough-demo-frame iframe { height: 920px; }
  .site-footer { min-height: 70vh; }
  .footer-copy { width: 100%; padding-top: 48px; }
}

/* One jet-black FAQ surface, with native disclosure rows. */
.faq-section {
  box-sizing: border-box;
  grid-template-columns: minmax(0,1fr);
  gap: 36px;
  padding: clamp(32px,4.5vw,64px);
  margin-bottom: var(--section-space);
  border: 0;
  border-radius: 24px;
  background: #000;
  color: #fff;
}
.faq-section h2 { margin: 0; color: #fff; }
.faq-list { display: grid; gap: 0; border-top: 1px solid #282828; min-width: 0; }
.faq-list details {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid #282828;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary {
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  color: #fff;
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.015em;
}
.faq-list summary::after {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #a9a9b0;
  font: 300 20px/1 var(--font-ui);
}
.faq-list summary:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 2px; }
.faq-list details[open] summary { padding-bottom: 12px; }
.faq-list p { margin: 0; padding: 0 38px 26px 0; color: #bdbdc3; font: 400 14px/1.65 var(--font-ui); max-width: 72ch; }
@media (hover:hover) { .faq-list summary:hover::after { color: #fff; } }
@media (max-width:680px) {
  .faq-section { padding: 28px 24px; gap: 28px; border-radius: 20px; }
  .faq-list summary { padding: 20px 0; font-size: 16px; gap: 16px; }
  .faq-list p { padding: 0 0 22px; }
}

/* The drafting companion sits on the page as an open conversation. */
.tough-conversation-section .tough-demo-frame { border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.tough-demo-frame iframe { background:transparent; }

/* A single reading order: thought, explanation, product moment. */
:root { --type-display:clamp(34px,3.8vw,48px); --section-space:clamp(96px,9vw,128px); }
.content-section { grid-template-columns:minmax(0,1fr); row-gap:44px; }
.section-intro { grid-column:1 / -1; display:grid; gap:18px; width:100%; max-width:640px; }
.content-section .section-intro h2 { margin:0; max-width:100%; font-family:var(--font-brand); font-weight:400; font-size:var(--type-display); line-height:1.13; letter-spacing:-.035em; text-wrap:balance; }
.section-intro > p { margin:0; max-width:54ch; color:#3e3e44; font:400 16px/1.65 var(--font-ui); letter-spacing:-.012em; text-wrap:pretty; }
.hero-copy--landing > p { max-width:53ch; }
.hero-copy--landing > p + p { margin-top:12px; }
.connections-section .relationship-map { margin-block:0; }
.site-footer { min-height:480px; padding-bottom:56px; border-top-color:#e7e7eb; }
.footer-copy { width:min(600px,60%); padding-top:88px; }
.footer-copy > h2 { font-size:clamp(42px,5vw,64px); line-height:1.1; letter-spacing:-.035em; }
.footer-copy > p { max-width:35ch; margin-top:22px; color:#414147; font:400 16px/1.6 var(--font-ui); }
.footer-copy .primary-link { margin-top:26px; }
.agent-character--footer { width:clamp(260px,34vw,440px); height:clamp(260px,34vw,440px); top:22%; left:80%; }
@media(max-width:680px) {
  :root { --type-display:clamp(30px,8vw,38px); --section-space:80px; }
  .content-section { row-gap:32px; }
  .section-intro { gap:16px; }
  .section-intro > p { font-size:15px; line-height:1.6; max-width:38ch; }
  .site-footer { min-height:550px; }
  .footer-copy { width:100%; padding-top:56px; }
  .footer-copy > h2 { font-size:42px; }
  .footer-copy > p { font-size:15px; max-width:30ch; }
  .agent-character--footer { width:290px; height:290px; top:52%; left:77%; }
}

/* Horizontal navigation and a shared, centered page edge. */
:root { --content-left: max(32px, calc((100vw - 1040px) / 2)); }
.statement, .content-section, .faq-section, .site-footer {
  width: min(1040px, calc(100% - 64px));
  margin-inline: auto;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 32px;
  background: #fff;
}
.site-brand { display:flex; align-items:center; gap:9px; flex-shrink:0; font:400 14px/1 var(--font-brand); letter-spacing:-.025em; }
.header-nav { display:flex; align-items:center; justify-content:center; gap:20px; }
.nav-item { color:#68686f; font:400 13px/1.4 var(--font-brand); white-space:nowrap; transition:color 140ms ease; }
.nav-item.is-active { color:#111214; }
.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.header-access { min-height:30px; padding:7px 12px; border-radius:100px; background:#000; color:#fff; font:400 12px/1.3 var(--font-brand); cursor:pointer; }
.access-short { display:none; }
.header-menu-toggle { display:none; }
.statement--landing { padding-top:84px; }
.content-section, .faq-section, .site-footer, .statement--landing .product-film { scroll-margin-top:112px; }
@media (hover:hover) {
  .nav-item:hover { color:#111214; }
  .header-access:hover { background:#29292b; }
}
.site-header { gap:16px; }
.header-menu-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:32px; height:32px; padding:0; background:transparent; cursor:pointer; }
.header-menu-toggle span { width:18px; height:1px; background:#111214; transition:transform 180ms ease; }
.is-menu-open .header-menu-toggle span:first-child { transform:translateY(3px) rotate(45deg); }
.is-menu-open .header-menu-toggle span:last-child { transform:translateY(-3px) rotate(-45deg); }
.header-nav { display:none; position:absolute; top:100%; left:0; right:0; padding:8px 20px; border-bottom:1px solid #ededf0; background:#fff; }
.is-menu-open .header-nav { display:flex; flex-direction:column; align-items:stretch; gap:0; }
.header-nav .nav-item { padding:8px 12px; font-size:14px; background:transparent; }
@media (max-width:680px) {
  :root { --content-left:16px; }
  .statement, .content-section, .faq-section, .site-footer { width:calc(100% - 32px); margin-inline:auto; }
  .site-header { min-height:44px; padding:6px 20px; gap:8px; }
  .site-brand { font-size:14px; }
  .header-actions { gap:4px; }
  .header-access { padding:7px 11px; }
  .access-full { display:none; }
  .access-short { display:inline; }
  .statement--landing { padding-top:60px; }
  .content-section, .faq-section, .site-footer, .statement--landing .product-film { scroll-margin-top:96px; }
}
@media (prefers-reduced-motion:reduce) {
  .header-menu-toggle span, .nav-item { transition:none; }
}

/* Keep the expanded navigation in focus. */
.page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.page.is-menu-open::after { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion:reduce) {
  .page::after { transition:none; }
}

.site-brand { gap:6px; }

/* A quiet, useful end to the page. */
.site-footer { display:flex; flex-direction:column; padding-bottom:0; }
.footer-meta { position:relative; z-index:11; display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:auto; padding:28px 0; border-top:1px solid #ededf0; color:#74747c; font:400 12px/1.5 var(--font-ui); }
.footer-meta nav { display:flex; flex-wrap:wrap; gap:24px; }
.footer-character-stage { bottom:76px; }
.footer-copy { padding-bottom:72px; }
.footer-meta a:hover { color:#111214; }
.access-continue { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:12px 18px; border-radius:24px; color:#fff; background:#111214; cursor:pointer; font:400 15px/1.3 var(--font-brand); }
.access-privacy { width:fit-content; color:#74747c; font:400 12px/1.5 var(--font-ui); }
@media(max-width:680px) {
  .footer-meta { flex-direction:column; align-items:flex-start; gap:12px; padding:24px 0; }
  .footer-meta nav { gap:20px; }
  .footer-character-stage { bottom:100px; }
}

/* Reserve the header's row while keeping it visible through the footer. */
.page { padding-top:48px; }
@media(max-width:680px) { .page { padding-top:44px; } }

/* Small screens keep the same hierarchy without shrinking the headline. */
@media(max-width:680px) {
  .hero-copy--landing #hero-title { width:100%; max-width:100%; font-size:clamp(34px,9.5vw,48px); white-space:normal; text-wrap:balance; line-height:1.08; }
  .hero-copy--landing > p:first-of-type { margin-top:24px; }
  .statement--landing { padding-top:48px; }
  .statement--landing .product-film { margin-top:32px; }
  .header-menu-toggle { width:44px; height:32px; }
  .header-nav .nav-item { min-height:44px; display:flex; align-items:center; }
  .contact-dialog { padding:44px 22px 24px; border:1px solid #e5e5e9; border-radius:20px; max-height:calc(100dvh - 24px); }
  .contact-dialog h2 { font-size:28px; padding-right:20px; }
  .access-form { margin-top:28px; gap:20px; }
  .contact-dialog input, .contact-dialog textarea { font-size:16px; }
}
.map-streams { display:block; }
.agent-character--footer.is-active { animation:none; }
@media (hover:hover) and (pointer:fine) { .header-access:hover { background:#29292b; } }
.header-access:active,.access-continue:active { transform:scale(.98); }
.header-access,.access-continue { transition:background 160ms ease,transform 160ms ease; }
@media(prefers-reduced-motion:reduce) { .header-access,.access-continue { transition:none; transform:none; } }

.signup-trap { position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.access-status { display:flex; flex-wrap:wrap; gap:4px 8px; margin:0; color:#74747c; font:400 12px/1.5 var(--font-ui); }
.access-status a { color:#111214; text-underline-offset:3px; }
.access-status:has(span:empty):has(a[hidden]) { display:none; }
.access-status:has(span:empty) a[hidden] { display:none; }
.access-continue:disabled { cursor:default; opacity:.65; }

.statement--landing { scroll-margin-top:48px; }

.hero-copy--landing #hero-title { white-space:normal; text-wrap:balance; }
.hero-copy--landing > .hero-supporting { margin:24px 0 0; }

/* The hero reads as a message followed by a reply. */
.hero-message { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero-message #hero-title {
  width: 100%;
  padding: clamp(28px, 4vw, 48px);
  background: #f3f3f5;
  border-radius: 36px 36px 36px 8px;
  text-wrap: pretty;
}
.hero-copy--landing.hero-message > .hero-supporting {
  align-self: flex-end;
  width: fit-content;
  max-width: 90%;
  margin: 0;
  padding: 18px 26px;
  color: #fff;
  background: #111214;
  border-radius: 26px 26px 6px 26px;
}
@media(max-width:680px) {
  .hero-message { gap: 14px; }
  .hero-message #hero-title { padding: 28px 24px; border-radius: 28px 28px 28px 6px; font-size: clamp(30px,8.5vw,44px); }
  .hero-copy--landing.hero-message > .hero-supporting { padding: 16px 20px; }
}

.hero-underline { text-decoration-line: underline; text-decoration-thickness: .035em; text-underline-offset: .12em; text-decoration-skip-ink: auto; }

/* One entrance per page load: message first, then its reply. */
@media(prefers-reduced-motion:no-preference) {
  .hero-message #hero-title {
    transform-origin: bottom left;
    animation: hero-message-arrive 700ms cubic-bezier(.23,1,.32,1) 100ms backwards;
  }
  .hero-copy--landing.hero-message > .hero-supporting {
    transform-origin: bottom right;
    animation: hero-message-arrive 650ms cubic-bezier(.23,1,.32,1) 360ms backwards;
  }
}
@keyframes hero-message-arrive {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-copy--landing.hero-message > .hero-supporting { display:flex; align-items:center; gap:12px; }
.hero-access-arrow { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; margin:-10px -12px -10px 0; padding:0; color:inherit; background:transparent; border:0; border-radius:50%; cursor:pointer; }
.hero-access-arrow:focus-visible { outline:1px solid #fff; outline-offset:2px; }
.hero-access-arrow svg { transition:transform 180ms cubic-bezier(.23,1,.32,1); }
@media(hover:hover) and (pointer:fine) { .hero-access-arrow:hover svg { transform:translateX(3px); } }
.hero-access-arrow:active svg { transform:translateX(2px) scale(.94); }
@media(prefers-reduced-motion:reduce) { .hero-access-arrow svg { transition:none; } }

/* Keep the form's final action and policy link in one quiet row. */
.contact-dialog { border-color:#e5e5e9; border-radius:20px; }
.access-form { margin-top:32px; gap:22px; }
.access-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.access-actions .access-continue { gap:24px; padding-inline:20px; font-size:14px; }
.access-actions .access-privacy { padding-block:12px; font-size:12px; }

.about-section { row-gap: clamp(56px, 7vw, 88px); }
@media (max-width: 680px) { .about-section { row-gap: 42px; } }

/* A smaller constellation with a quiet shimmer held inside its connections. */
.connections-section {
  row-gap: clamp(72px, 8vw, 112px);
  padding-block: clamp(132px, 14vw, 192px);
}
.connections-section .relationship-map {
  height: clamp(360px, 35vw, 440px);
  max-width: 900px;
  justify-self: center;
  margin-inline: auto;
  transform: scale(.82);
  transform-origin: center;
}
.map-paths path {
  stroke: rgba(17, 18, 20, 0.18);
}
.map-streams path {
  stroke: url(#context-shimmer);
  stroke-width: 1.4;
  stroke-dasharray: none;
  opacity: .2;
  animation: context-shimmer 5.6s ease-in-out infinite;
}
.map-streams path:nth-child(3n + 2) { animation-delay: -1.8s; }
.map-streams path:nth-child(3n) { animation-delay: -3.6s; }

@keyframes context-shimmer {
  0%, 100% { opacity: .12; }
  50% { opacity: .72; }
}

@media (max-width: 680px) {
  .connections-section {
    row-gap: 56px;
    padding-block: 104px;
  }
  .connections-section .relationship-map {
    height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-streams path {
    animation: none;
    opacity: 0;
  }
}

/* Mobile closes with the message and legal links, without oversized decoration. */
@media (max-width: 680px) {
  .content-section {
    padding-block: 84px;
  }

  .about-section {
    row-gap: 38px;
  }

  .site-footer {
    min-height: 0;
    padding: 72px 0 0;
    overflow: hidden;
  }

  .footer-copy {
    width: 100%;
    padding: 0 0 56px;
  }

  .footer-copy > h2 {
    max-width: 8ch;
    font-size: clamp(36px, 10vw, 40px);
    line-height: 1.06;
  }

  .footer-copy > p {
    max-width: 28ch;
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.55;
  }

  .footer-copy .primary-link {
    min-height: 42px;
    margin-top: 24px;
    padding-inline: 17px;
    font-size: 14px;
  }

  .footer-character-stage {
    display: none;
  }

  .footer-meta {
    margin-top: 0;
    padding: 22px 0 28px;
    gap: 14px;
    font-size: 11px;
  }

  .footer-meta nav {
    gap: 16px 20px;
  }
}

/* Phone reading scale: full-width demos, readable copy, and comfortable controls. */
@media (max-width: 680px) {
  :root { --type-body: 16px; --type-display: clamp(30px, 8vw, 38px); --section-space: 64px; }
  .page { padding-top: 60px; }
  .site-header { min-height: 60px; padding: 8px 16px; }
  .site-brand { min-height: 44px; font-size: 16px; }
  .header-access { position: relative; min-height: 30px; padding: 6px 14px; font-size: 14px; }
  .header-access::after { content: ""; position: absolute; inset: -7px 0; }
  .header-menu-toggle { width: 44px; height: 44px; }
  .header-nav { max-height: calc(100dvh - 60px); overflow-y: auto; }
  .header-nav .nav-item { min-height: 48px; font-size: 16px; }
  .statement--landing { padding-top: 28px; padding-bottom: 64px; }
  .hero-message #hero-title { padding: 24px 20px; font-size: clamp(28px, 8vw, 38px); line-height: 1.12; }
  .hero-copy--landing.hero-message > .hero-supporting { max-width: 100%; padding: 14px 18px; font-size: 16px; line-height: 1.5; }
  .statement--landing .product-film { margin-top: 28px; }
  .new-chat-demo-frame { height: 560px; }
  .content-section { padding-block: 64px; row-gap: 28px; }
  .section-intro { gap: 16px; }
  .section-intro > p, .footer-copy > p { font-size: 16px; line-height: 1.6; }
  .connections-section { row-gap: 32px; }
  .connections-section .relationship-map { height: 260px; }
  .faq-section { padding: 28px 20px; margin-bottom: 48px; }
  .faq-list p { font-size: 16px; line-height: 1.6; }
  .footer-copy .primary-link { min-height: 48px; font-size: 16px; }
  .footer-meta { font-size: 12px; }
  .footer-meta nav { gap: 0 20px; }
  .footer-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-dialog { padding-inline: 20px; overflow-y: auto; }
  .access-actions { flex-wrap: wrap; gap: 12px; }
  .access-actions .access-continue { min-height: 48px; font-size: 16px; }
  .access-actions .access-privacy { min-height: 44px; font-size: 14px; }
}

/* Keep the Hannah phone example in one viewport. */
@media (max-width: 760px) {
  .flight-section {
    height: calc(100svh - 76px);
    min-height: 0;
    padding-block: 20px;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 20px;
    scroll-margin-top: 64px;
  }
  .tough-conversation-section .section-intro, .flight-section .section-intro { gap: 12px; }
  .tough-conversation-section .section-intro h2, .flight-section .section-intro h2 { font-size: clamp(28px, 7vw, 34px); }
  .tough-conversation-section .section-intro p, .flight-section .section-intro p { font-size: 15px; line-height: 1.5; }
  .flight-section .flight-demo-frame { min-height: 0; height: 100%; }
  .flight-demo-frame iframe { height: 100%; }
}

/* Scale the whole phone preview, preserving its internal layout and hit testing. */
@media (max-width: 760px) {
  :root { --phone-preview-scale: .86; }
  .statement--landing .product-film,
  .alex-demo,
  .flight-section .flight-demo-frame {
    position: relative;
    width: calc(100% * var(--phone-preview-scale));
    max-width: 340px;
    margin-inline: auto;
    justify-self: center;
  }
  .product-film > iframe,
  .alex-demo > iframe,
  .flight-demo-frame > iframe {
    width: calc(100% / var(--phone-preview-scale));
    transform: scale(var(--phone-preview-scale));
    transform-origin: top left;
  }
  .statement--landing .product-film { height: calc(560px * var(--phone-preview-scale)); }
  .product-film > iframe { position: absolute; inset: 0 auto auto 0; height: calc(100% / var(--phone-preview-scale)); }
  .alex-demo { height: calc(var(--alex-frame-height, 1160px) * var(--phone-preview-scale)); }
  .flight-section .flight-demo-frame { height: calc(100% * var(--phone-preview-scale)); align-self: start; }
  .flight-demo-frame > iframe { height: calc(100% / var(--phone-preview-scale)); }
}

/* The reply walkthrough uses content-sized cards rather than a phone canvas. */
@media (max-width: 760px) {
  .tough-conversation-section {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto;
    padding-block: 64px 80px;
    row-gap: 36px;
    scroll-margin-top: 64px;
  }
  .tough-conversation-section .tough-demo-frame {
    width: calc(100% - 24px);
    max-width: 516px;
    height: auto;
    margin-inline: auto;
    justify-self: center;
  }
}

/* The story surface uses the full reading width; its UI keeps the shared small type. */
@media (max-width: 760px) {
  .alex-demo { width: 100%; max-width: none; height: var(--alex-frame-height, 1160px); }
  .alex-demo > iframe { width: 100%; transform: none; }
}