/* Centered introduction and a separate conversation preview.
   Load after landing.css and motion.css. The product copy stays real HTML. */
.nav.nav--centre {
  inset: 16px 24px auto;
  max-width: 1160px;
  height: 72px;
  margin-inline: auto;
  border: 1px solid #ffffff18;
  border-radius: 20px;
  background: #141a23ed;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav.nav--centre > .nav__bar { width: 100%; max-width: none; padding-inline: 24px; gap: 24px; }
.nav.nav--centre .nav__links { align-items: center; gap: 8px; }
.nav.nav--centre .nav__link { padding-inline: 10px; font-size: 14px; }
.nav.nav--centre .nav__actions .btn { height: 44px; padding-inline: 18px; gap: 16px; font-size: 14px; }

main > #top.hero { height: auto; min-height: 0; padding: 168px 0 80px; }
#top.hero > .wrap, #top.hero > .wrap > .hero-text { height: auto; min-height: 0; }
#top.hero > .wrap > .hero-text { display: flex; flex-direction: column; align-items: center; }
#top.hero .hero__c {
  display: grid;
  justify-items: center;
  gap: 22px;
  width: 100%;
  max-width: 1040px;
  min-width: 0;
  margin: 0 auto;
  text-align: center;
}
#top.hero h1 { max-width: none; font-size: clamp(64px, 6vw, 84px); line-height: 1.04; letter-spacing: -.045em; text-wrap: initial; }
#top.hero .hero__lead { max-width: 62ch; font-size: 20px; line-height: 1.6; }
#top.hero .hero-notice { display: flex; color: #b3bac6; font-size: 14px; }
#top.hero .hero-notice::after { content: none; }
#top.hero .btn-row { justify-content: center; gap: 12px; margin-top: 6px; }
#top.hero .btn-row .btn { min-height: 48px; }
.platform-support { display: flex; justify-content: center; align-items: start; gap: 32px; margin-top: 4px; }
.platform-group { text-align: left; }
.platform-group + .platform-group { padding-left: 32px; border-left: 1px solid #ffffff1c; }
.platform-group > p { margin: 0 0 12px; color: #a8afbb; font-size: 12px; line-height: 1.5; }
.platform-group > p > span { color: #8d98a8; }
.platform-list { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }
.platform-list > li { display: flex; align-items: center; gap: 9px; min-height: 24px; color: #dfe2e7; font-size: 14px; line-height: 1.5; }
.platform-list img { display: block; flex: none; object-fit: contain; }
.platform-list .platform-ink { filter: brightness(0) invert(1); }
.use-case-label { color: #8d98a8; font: 400 12px/1.4 var(--font-mono); margin-bottom: 16px; }

main > #product-preview.product-section { height: auto; min-height: 0; padding: 32px 0 104px; scroll-margin-top: 112px; }
#product-preview > .wrap { height: auto; }
.product-intro { width: 100%; max-width: 760px; margin: 0 auto 36px; text-align: center; }
#product-preview .product-intro h2 { max-width: 28ch; margin-inline: auto; font-size: 40px; line-height: 1.16; letter-spacing: -.035em; }
.product-intro > p { max-width: 58ch; margin: 18px auto 0; color: #a8afbb; font-size: 18px; line-height: 1.65; }
#product-preview .hero__window.hero-device-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 44px auto;
  align-items: start;
  gap: 24px;
  width: 100%;
  max-width: 1120px;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.device-composition {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: end;
  gap: 24px;
  min-width: 0;
  height: auto;
}
.hero-stage-toolbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; min-height: 44px; }
.hero-scenarios { display: inline-flex; gap: 28px; max-width: calc(100% - 60px); padding: 0; border: 0; border-radius: 0; background: transparent; }
.hero-scenarios button {
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #a8afbb;
  font: 400 14px/1.4 var(--font-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease;
}
.hero-scenarios button[aria-pressed="true"] { border-bottom-color: #f5b83d; color: #f7f6f2; }
.hero-scenarios button:focus-visible { outline: 2px solid #f5b83d; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .hero-scenarios button:not([aria-pressed="true"]):hover { color: #f7f6f2; }
}

.laptop-device {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-width: 0;
  background: #11151d;
  border: 1px solid #424953;
  border-radius: 16px 16px 6px 6px;
  box-shadow: inset 0 1px #ffffff08;
}
.laptop-chrome { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 18px; border-bottom: 1px solid #ffffff10; color: #dfe2e7; font-size: 12px; line-height: 1.4; }
.laptop-chrome .window-dots { gap: 5px; flex: none; }
.laptop-chrome .window-dots i { width: 6px; height: 6px; }
.laptop-chrome small { margin-left: auto; color: #8d98a8; font-size: 11px; white-space: nowrap; }
.laptop-chrome .scene-demo-label { font-size: 11px; }
.laptop-meeting { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 400px; padding: 32px; overflow: hidden; }
.call-media { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.call-media[hidden] { display: none !important; }
.call-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.call-participant { position: absolute; z-index: 2; top: 16px; right: 16px; width: 150px; height: 94px; overflow: hidden; border: 1px solid #ffffff33; border-radius: 8px; background: #11151d; }
.call-participant > span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; background: #090b10c9; color: #f7f6f2; font-size: 10px; line-height: 1.4; }
.meeting-transcript { position: relative; z-index: 1; width: 100%; max-width: 600px; margin: 0 auto; }
.transcript-speaker { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 32px; color: #e0e3e8; font-size: 13px; line-height: 1.5; }
.transcript-speaker > span:last-child { color: #a8afbb; font-size: 12px; }
.meeting-transcript .scene-eyebrow { justify-content: space-between; gap: 12px; font-size: 11px; }
.meeting-transcript .waveform { gap: 3px; height: 20px; }
.meeting-transcript .waveform i { width: 3px; max-height: 20px; }
.meeting-transcript h3 { max-width: 24ch; margin-top: 12px; font-size: 32px; line-height: 1.25; font-weight: 400; letter-spacing: -.025em; text-wrap: pretty; }
.laptop-meeting.video-ready, .hero-device-stage.video-ready .laptop-meeting { align-items: flex-end; padding: 24px; }
.laptop-meeting.video-ready .meeting-transcript, .hero-device-stage.video-ready .meeting-transcript { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; max-width: none; padding: 14px 18px; border: 1px solid #ffffff18; border-radius: 10px; background: #090b10ed; }
.laptop-meeting.video-ready .transcript-speaker, .hero-device-stage.video-ready .transcript-speaker { grid-column: 1; margin-bottom: 0; align-self: center; font-size: 12px; }
.laptop-meeting.video-ready .transcript-speaker > span:last-child, .hero-device-stage.video-ready .transcript-speaker > span:last-child { display: none; }
.laptop-meeting.video-ready .meeting-transcript .scene-eyebrow, .hero-device-stage.video-ready .meeting-transcript .scene-eyebrow { grid-column: 2; gap: 8px; font-size: 10px; }
.laptop-meeting.video-ready .meeting-transcript h3, .hero-device-stage.video-ready .meeting-transcript h3 { grid-column: 1 / -1; max-width: none; margin-top: 0; font-size: 24px; }
.video-attribution { position: absolute; z-index: 2; top: 16px; left: 16px; max-width: calc(100% - 188px); padding: 5px 8px; border-radius: 4px; background: #090b10d9; color: #e0e3e8; font-size: 10px; line-height: 1.4; }
.laptop-context { padding: 16px 20px 18px; border-top: 1px solid #ffffff10; background: #0e1219; border-radius: 0 0 5px 5px; }
.laptop-context > span { display: block; margin-bottom: 9px; color: #8d98a8; font-size: 11px; }
.laptop-context .context-stack { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.laptop-context .context-stack code { max-width: 100%; font-size: 11px; overflow-wrap: anywhere; }
.laptop-base { position: absolute; left: -6px; right: -6px; bottom: -8px; height: 10px; border: 1px solid #4e5763; border-radius: 2px 2px 12px 12px; background: #313842; }
.laptop-base::after { content: ''; position: absolute; top: -1px; left: 38%; width: 24%; height: 4px; border-radius: 0 0 5px 5px; background: #161c24; }

.hero-phone {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 250px;
  min-height: 420px;
  padding: 32px 20px 20px;
  border: 4px solid #3e454e;
  border-radius: 32px;
  background: #131820;
  box-shadow: 0 20px 44px #0004, inset 0 0 0 1px #ffffff0b;
  color: #f7f6f2;
  overflow: hidden;
}
.phone-speaker { position: absolute; top: 11px; left: calc(50% - 22px); width: 44px; height: 4px; border-radius: 4px; background: #080b10; }
.phone-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; color: #f7f6f2; font-size: 17px; letter-spacing: -.4px; }
.phone-brand img { flex: none; width: 22px; height: 22px; }
.phone-eyebrow { color: #f5b83d; font-size: 12px; line-height: 1.4; font-weight: 500; }
.hero-phone #hero-answer { margin: 12px 0 20px; font-size: 16px; line-height: 1.55; letter-spacing: -.01em; text-wrap: pretty; }
.phone-evidence { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid #ffffff12; font-size: 11px; line-height: 1.5; color: #a8afbb; }
.phone-evidence > :first-child { color: #f5b83d; }
.phone-evidence code { color: #d3bd8f; font-size: 11px; overflow-wrap: anywhere; }
.phone-footer { margin-top: 20px; padding-top: 4px; color: #8d98a8; text-align: center; font-size: 11px; line-height: 1.4; }
.hero-phone .answer-rail { left: 0; top: 80px; bottom: 56px; }

/* A concrete setup path after the demo, with enough room for wrapped copy. */
main > #demo:has(.setup-steps) { height: auto; min-height: 0; }
main > #demo:has(.setup-steps) > .wrap { height: auto; }
#demo:has(.setup-steps) .demo-app { margin-top: 32px; }
.setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.setup-steps > li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.setup-steps > li > span { flex: none; padding-top: 3px; color: #f5b83d; font: 400 12px/1.5 var(--font-mono); }
.setup-steps strong { display: block; font-size: 16px; line-height: 1.4; font-weight: 500; color: #f7f6f2; }
.setup-steps p { margin-top: 4px; color: #a8afbb; font-size: 14px; line-height: 1.5; }

@media (min-width: 1024px) and (max-width: 1199px) {
  .nav.nav--centre > .nav__bar { gap: 16px; padding-inline: 20px; }
  .nav.nav--centre .nav__links { gap: 0; }
  .nav.nav--centre .nav__link { padding-inline: 8px; }
}
@media (max-width: 1023px) {
  .nav.nav--centre { height: 64px; }
  .nav.nav--centre > .nav__bar { gap: 12px; padding-inline: 18px; }
  .nav.nav--centre.is-open { inset: 0 0 auto; max-width: none; height: 80px; border: 0; border-radius: 0; background: #090b10; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.nav--centre.is-open > .nav__bar { padding-inline: 24px; }
  .nav.nav--centre.is-open .nav__links { top: 80px; align-items: stretch; gap: 0; padding-inline: 24px; }
  .nav.nav--centre.is-open .nav__link { height: 56px; padding-inline: 0; font-size: 20px; }
  .nav.nav--centre.is-open .nav__actions { padding-inline: 24px; }
  main > #top.hero { padding: 144px 0 72px; }
  #top.hero h1 { font-size: clamp(56px, 7.5vw, 76px); }
  #top.hero .hero__lead { max-width: 54ch; font-size: 19px; }
  main > #product-preview.product-section { padding-top: 24px; padding-bottom: 80px; }
  #product-preview .product-intro h2 { font-size: 36px; }
  .device-composition { grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; }
  .laptop-chrome { gap: 8px; padding-inline: 14px; font-size: 11px; }
  .laptop-chrome .scene-demo-label { font-size: 10px; }
  .laptop-chrome .window-dots { display: none; }
  .laptop-meeting { padding: 24px; }
  .meeting-transcript h3 { font-size: 26px; }
  .laptop-meeting.video-ready, .hero-device-stage.video-ready .laptop-meeting { padding: 16px; }
  .laptop-meeting.video-ready .meeting-transcript, .hero-device-stage.video-ready .meeting-transcript { gap: 8px 12px; padding: 14px; }
  .laptop-meeting.video-ready .meeting-transcript h3, .hero-device-stage.video-ready .meeting-transcript h3 { font-size: 22px; }
  .call-participant { top: 12px; right: 12px; width: 110px; height: 72px; }
  .video-attribution { top: 12px; left: 12px; max-width: calc(100% - 146px); }
  .laptop-context { padding: 14px; }
  .laptop-context .context-stack { gap: 6px; }
  .laptop-context .context-stack code { font-size: 10px; }
  .hero-phone { width: 220px; padding-inline: 16px; }
  .hero-phone #hero-answer { font-size: 15px; }
}
@media (max-width: 639px) {
  .nav.nav--centre { inset: 12px 24px auto; height: 60px; border-radius: 16px; }
  .nav.nav--centre > .nav__bar { padding-inline: 14px; }
  .nav:not(.is-open) .nav__actions { display: none; }
  .nav:not(.is-open) .nav__actions + .nav__toggle { margin-left: auto; }
  .nav.nav--centre.is-open { inset: 0 0 auto; }
  main > #top.hero { padding: 124px 0 56px; }
  #top.hero .hero__c { gap: 20px; }
  #top.hero h1 { font-size: clamp(34px, 11.3vw, 46px); line-height: 1.07; }
  #top.hero .hero__lead { max-width: 36ch; font-size: 17px; line-height: 1.6; }
  #top.hero .hero-notice { font-size: 13px; }
  #top.hero .btn-row { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; }
  .platform-support { flex-direction: column; align-items: center; gap: 20px; margin-top: 4px; }
  .platform-group { text-align: center; }
  .platform-group + .platform-group { padding-left: 0; border-left: 0; }
  .platform-group > p { margin-bottom: 9px; }
  .platform-list { justify-content: center; gap: 24px; }
  main > #product-preview.product-section { padding-top: 24px; padding-bottom: 64px; }
  .product-intro { margin-bottom: 24px; }
  #product-preview .product-intro h2 { font-size: 30px; line-height: 1.18; }
  .product-intro > p { margin-top: 14px; font-size: 16px; line-height: 1.65; }
  #product-preview .hero__window.hero-device-stage { grid-template-rows: auto auto; gap: 24px; max-width: 420px; padding-bottom: 8px; }
  .hero-stage-toolbar { justify-content: flex-start; gap: 12px; }
  .hero-scenarios { gap: 24px; }
  .hero-scenarios button { font-size: 13px; white-space: normal; text-align: left; }
  .device-composition { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 32px; }
  .laptop-device { grid-column: 1; grid-row: 1; }
  .laptop-chrome { padding: 12px 14px; }
  .laptop-meeting { min-height: 320px; padding: 24px; }
  .transcript-speaker { margin-bottom: 28px; font-size: 12px; }
  .transcript-speaker > span:last-child { font-size: 11px; }
  .meeting-transcript h3 { font-size: 26px; }
  .meeting-transcript h3 br { display: none; }
  .laptop-meeting.video-ready, .hero-device-stage.video-ready .laptop-meeting { min-height: 360px; }
  .call-participant { width: 90px; height: 60px; }
  .call-participant > span { padding-block: 2px; font-size: 9px; }
  .video-attribution { max-width: calc(100% - 126px); font-size: 9px; }
  .laptop-context { padding: 14px 16px; }
  .laptop-base { left: -4px; right: -4px; }
  .hero-phone { grid-column: 1; grid-row: 2; justify-self: center; width: min(260px, 100% - 12px); min-height: 420px; padding: 32px 20px 20px; }
  .hero-phone #hero-answer { font-size: 16px; }
  .phone-brand { margin-bottom: 24px; }
  .setup-steps { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .setup-steps > li { gap: 16px; }
  #demo:has(.setup-steps) .demo-app { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scenarios button { transition: none; }
}

/* Content determines the section length. The page does not repeat screen-sized tiles. */
main > :is(#interviews, #work, #demo, #questions).section {
  height: auto;
  min-height: 0;
  padding-block: 96px;
}
main > :is(#interviews, #work, #demo, #questions).section > .wrap { height: auto; }
main > .section h2 { color: #f7f6f2; line-height: 1.12; letter-spacing: -.035em; }
main > .section h2 .muted { color: inherit; }
#interviews h2 { max-width: 25ch; }
.interview-companies { margin-top: 56px; padding-top: 24px; border-top: 1px solid #ffffff16; }
.company-context { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.company-context > p:first-child { color: #dfe2e7; font-size: 14px; line-height: 1.6; }
.company-context .company-note { color: #8d98a8; font-size: 12px; line-height: 1.6; }
.company-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.company-list > li { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 48px; padding: 0; color: #e7e9ed; font-size: 22px; font-weight: 400; letter-spacing: -.03em; }
.company-list img { display: block; flex: none; object-fit: contain; }
.company-list .company-ink { filter: brightness(0) invert(1); }
@media (min-width: 640px) and (max-width: 1023px) {
  .company-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .company-context { flex-wrap: wrap; gap: 8px 24px; }
}
@media (max-width: 639px) {
  .interview-companies { margin-top: 36px; padding-top: 24px; }
  .company-context { align-items: flex-start; flex-direction: column; gap: 8px; }
  .company-context .company-note { max-width: 38ch; }
  .company-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 24px; }
  .company-list > li { justify-content: flex-start; font-size: 20px; }
}

#interviews .feature-grid { margin-top: 40px; align-items: start; }
#interviews .feature-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
#interviews .feature-copy > .t-lead { max-width: 38ch; font-size: 18px; line-height: 1.75; }
.interview-followups { max-width: 38ch; margin: 24px 0 28px; color: #a8afbb; font-size: 16px; line-height: 1.75; }
#interviews .feature-copy .use-note { margin-top: 24px; font-size: 13px; max-width: 44ch; }
.interview-visual.interview-scene {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.interview-scene .scene-toolbar { margin: 0 0 12px; }
.interview-scene .scene-demo-label { color: #8d98a8; font-size: 12px; }
.interview-scene .motion-toggle { color: #a8afbb; margin-right: 0; }
.interview-scene .interview-question {
  padding: 0 0 12px;
  border: 0;
  border-radius: 0;
  color: #f7f6f2;
  background: transparent;
  box-shadow: none;
}
.interview-scene .interview-question .scene-eyebrow { color: #8d98a8; font-size: 12px; }
.interview-scene .interview-question h3 { max-width: 25ch; margin: 12px 0 16px; font-size: 30px; line-height: 1.25; letter-spacing: -.03em; }
.interview-scene .interview-question .waveform { color: #f5b83d; }
.interview-scene .interview-context {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  height: auto;
  margin: 12px 0 24px;
  color: #a8afbb;
}
.interview-context code { font: 400 12px/1.5 var(--font-mono); }
.interview-scene .interview-reply { padding: 24px 28px; border: 1px solid #ffffff10; border-radius: 8px; background: #11151d; box-shadow: none; }
.interview-scene .interview-reply > p { margin-top: 16px; font-size: 17px; line-height: 1.7; }
.interview-scene .interview-reply .answer-rail { top: 24px; bottom: 24px; }

/* The source and its explanation are two open columns inside one app surface. */
.work-scene.project-board { margin-top: 40px; border-radius: 12px; }
.work-scene .project-board-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.source-excerpt { min-width: 0; padding: 32px; border-right: 1px solid #ffffff12; }
.source-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid #ffffff12; font: 400 13px/1.5 var(--font-mono); color: #e0e3e8; }
.source-header > :last-child { color: #8d98a8; font: 400 13px/1.5 var(--font-text); }
.source-excerpt pre { display: block; max-width: 100%; margin: 24px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #c1c8d2; font: 400 13px/1.75 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
.source-excerpt pre > code { display: grid; gap: 0; font: inherit; white-space: normal; counter-reset: source-line; tab-size: 4; }
.source-line { display: block; position: relative; min-width: 0; min-height: 25px; margin-inline: -12px; padding: 2px 12px 2px 42px; white-space: pre-wrap; overflow-wrap: anywhere; counter-increment: source-line; }
.source-line::before { content: counter(source-line); position: absolute; left: 12px; top: 2px; width: 16px; color: #7f8b9b; text-align: right; font-variant-numeric: tabular-nums; user-select: none; }
.source-excerpt .syntax-keyword { color: #f5c76c; }
.source-excerpt .syntax-function { color: #99c9ed; }
.source-excerpt .syntax-string { color: #a3d5b5; }
.source-excerpt .syntax-constant { color: #e9c394; }
.source-excerpt .syntax-operator { color: #d5dce5; }
.source-highlight { background: #f5b83d08; }
.source-highlight::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #f5b83d; opacity: .6; }
.motion-scene:is([data-motion-state=playing], [data-motion-state=paused]) .source-highlight::after { animation: source-found var(--story-cycle) ease-in-out infinite; }
.source-note { margin-top: 24px; color: #8d98a8; font-size: 12px; line-height: 1.5; }
.work-scene .briefing { min-width: 0; padding: 32px; }
.work-scene .meeting-prompt h3 { margin: 10px 0 28px; font-size: 24px; line-height: 1.35; }
.work-scene .meeting-answer { padding: 0 0 0 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.work-scene .meeting-answer p { margin-top: 14px; font-size: 17px; line-height: 1.7; }
.work-scene .meeting-answer .answer-rail { top: 0; bottom: 0; }
.work-scene .briefing .link { margin-top: 28px; font-size: 14px; }
#demo .demo-app { border-radius: 12px; }
#questions .trust-seal { margin-top: 32px; margin-bottom: 0; }
#questions .trust-seal p { font-size: 18px; line-height: 1.6; }

/* A closing invitation, then a compact directory. */
footer.footer.closing { height: auto; min-height: 0; padding: 80px 0 32px; }
footer.footer.closing > .wrap { display: flex; flex-direction: column; gap: 64px; height: auto; }
.footer .closing__cta.close--type { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
.footer .closing__cta .section-head { min-width: 0; max-width: 46rem; gap: 12px; }
.footer .closing__cta h2 { max-width: none; font-size: 40px; line-height: 1.15; letter-spacing: -.035em; }
.footer .closing__cta h2 .muted { color: inherit; }
.footer .closing__cta .section-head > p { margin-top: 0; font-size: 18px; color: #a8afbb; }
.footer .closing__cta > .btn { flex: none; align-self: center; }
.footer .closing__cta.waitlist-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px; scroll-margin-top: 112px; }
.waitlist-cta .section-head { padding-top: 20px; }
.waitlist-form { min-width: 0; }
.waitlist-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.waitlist-form label { display: block; margin-bottom: 10px; color: #e0e3e8; font-size: 14px; line-height: 1.5; }
.waitlist-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.waitlist-fields input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid #3c4450; border-radius: var(--r-btn); background: #10141c; color: #a8afbb; font: 400 16px/1.5 var(--font-text); }
.waitlist-fields input::placeholder { color: #a8afbb; opacity: 1; }
.waitlist-fields input:disabled { opacity: 1; -webkit-text-fill-color: #a8afbb; cursor: not-allowed; }
.waitlist-form .btn { height: 48px; padding-inline: 20px; font-size: 14px; }
.waitlist-form .btn:disabled, .waitlist-form .btn:disabled:hover { background: #b7a278; color: #13161c; opacity: 1; cursor: not-allowed; transform: none; }
.waitlist-consent { max-width: 54ch; margin-top: 12px; color: #929aa8; font-size: 12px; line-height: 1.6; }
.waitlist-foot { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; font-size: 14px; line-height: 1.5; }
.waitlist-foot > p { color: #c1c8d2; }
.waitlist-foot .link { font-size: 14px; }
.footer-top > p { max-width: 28ch; font-size: 16px; }
.footer .closing__links { gap: 40px; }
.footer .footer__legal { justify-content: flex-start; }
.footer-trademarks { color: #8d98a8; font-size: 12px; line-height: 1.5; }

@media (min-width: 640px) and (max-width: 1023px) {
  .interview-visual.interview-scene { max-width: none; }
  .work-scene .project-board-body { grid-template-columns: minmax(0, 1fr); }
  .source-excerpt { border-right: 0; border-bottom: 1px solid #ffffff12; }
  #questions .question-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .footer .closing__cta.waitlist-cta { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .waitlist-cta .section-head { padding-top: 0; }
  .waitlist-form { max-width: 580px; }
}

@media (max-width: 639px) {
  main > :is(#interviews, #work, #demo, #questions).section { padding-block: 64px; }
  #interviews .feature-grid { grid-template-columns: minmax(0, 1fr); margin-top: 28px; gap: 36px; }
  #interviews .feature-copy > :is(.t-lead, .interview-followups, .use-note) { max-width: 100%; }
  #interviews .feature-copy > .t-lead { font-size: 17px; line-height: 1.7; }
  .interview-followups { margin: 20px 0 24px; font-size: 16px; line-height: 1.7; }
  #interviews .feature-copy .use-note { margin-top: 20px; font-size: 12px; }
  .interview-scene .scene-toolbar { margin-bottom: 12px; }
  .interview-scene .interview-question h3 { font-size: 26px; }
  .interview-scene .interview-context { margin-top: 8px; margin-bottom: 20px; gap: 12px; }
  .interview-scene .interview-reply { padding: 20px; }
  .interview-scene .interview-reply > p { font-size: 16px; line-height: 1.65; }
  .work-scene.project-board { margin-top: 28px; }
  .work-scene .project-board-body { grid-template-columns: minmax(0, 1fr); }
  .source-excerpt { padding: 20px; border-right: 0; border-bottom: 1px solid #ffffff12; }
  .source-excerpt pre { margin-top: 20px; font-size: 13px; }
  .source-note { margin-top: 20px; }
  .work-scene .briefing { padding: 24px 20px; }
  .work-scene .meeting-prompt h3 { margin-bottom: 24px; font-size: 22px; }
  .work-scene .meeting-answer { padding-left: 16px; }
  .work-scene .meeting-answer p { font-size: 16px; line-height: 1.65; }
  .work-scene .briefing .link { display: inline-block; margin-top: 24px; }
  #questions .trust-seal { display: block; margin-top: 20px; }
  #questions .trust-seal p { font-size: 16px; }
  footer.footer.closing { padding-top: 64px; }
  footer.footer.closing > .wrap { gap: 48px; }
  .footer .closing__cta.close--type { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer .closing__cta h2 { font-size: 30px; }
  .footer .closing__cta .section-head > p { font-size: 16px; }
  .footer .closing__cta > .btn { align-self: stretch; }
  .footer .closing__cta.waitlist-cta { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .waitlist-cta .section-head { padding-top: 0; }
  .waitlist-fields { grid-template-columns: minmax(0, 1fr); }
  .waitlist-form .btn { width: 100%; }
  .waitlist-foot { align-items: flex-start; flex-direction: column; gap: 12px; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
  .footer-top > .brand { grid-column: auto; }
  .footer-top > p { max-width: 30ch; font-size: 15px; }
  .footer-trademarks { flex-basis: 100%; order: 3; max-width: 40ch; }
  .footer-top nav { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-scene .source-highlight::after { animation: none !important; }
}