/* One concrete example on the first screen; the live conversation remains optional. */
.hero { flex-direction: column; min-height: 100svh; }
.hero::before,.method-step::before,.method-step::after { display: none; }
.hero-content { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: center; gap: clamp(40px,6vw,100px); flex: 1; padding-block: 132px 64px; }
.hero h1 { font-size: clamp(54px,6.1vw,98px); max-width: 720px; }
.hero .button { margin-top: 32px; }
.booking-cta { background: #f5f5f5; color: #101010; border-color: #f5f5f5; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.booking-cta:hover { background: #d9d9d9; color: #101010; border-color: #d9d9d9; }
.booking-cta:focus-visible { outline: 2px solid #f5f5f5; outline-offset: 5px; }
.hero-copy .hero-call-note { max-width: 360px; margin-top: 16px; font-size: 14px; line-height: 1.5; color: #c4c4c4; }
.hero-footer { position: static; transform: none; padding-bottom: 28px; font-size: 12px; }
.hero-demo { width: 100%; max-width: 510px; justify-self: end; min-width: 0; border: 1px solid #383838; border-radius: 12px; background: #141414; overflow: hidden; scroll-margin-top: 108px; }
.hero-demo-heading { padding: 18px 24px; border-bottom: 1px solid #383838; color: #c2c2c2; font-size: 13px; line-height: 1.5; }
.hero-demo-content { min-height: 318px; }
.hero-demo-panel { display: flex; flex-direction: column; gap: 20px; padding: 28px 24px 24px; min-height: 318px; animation: demo-arrive .22s ease-out; overflow-wrap: anywhere; }
.hero-demo-panel h2 { font-size: clamp(25px,2.25vw,33px); line-height: 1.16; letter-spacing: -.035em; }
.hero-demo-message { padding: 17px 18px; border-radius: 16px 16px 3px 16px; background: #252525; color: #eee; font-size: 16px; line-height: 1.5; }
.hero-demo-panel ul { display: grid; gap: 12px; padding-left: 18px; list-style: disc; color: #eee; font-size: 16px; line-height: 1.45; }
.hero-demo-detail,.hero-demo-start { margin-top: auto; font-size: 13px; line-height: 1.5; color: #bdbdbd; }
.hero-demo-start { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; color: #f4f4f4; }
.hero-demo-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 0 24px 14px; }
.hero-demo-steps button { min-height: 48px; padding: 10px 0 6px; font: inherit; font-size: 12px; line-height: 1.4; text-align: left; color: #bdbdbd; border: 0; border-top: 2px solid #4c4c4c; background: none; }
.hero-demo-steps button[aria-pressed="true"] { color: #fff; border-top-color: #f0f0f0; }
.hero-demo-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 24px; min-height: 48px; border-top: 1px solid #383838; color: #bdbdbd; font-size: 11px; }
.hero-demo-controls button { min-height: 48px; padding: 10px 0; background: none; border: 0; color: #eee; font-size: 12px; }
.step-develop,.step-adopt { min-height: 0; scroll-snap-align: none; scroll-snap-stop: normal; }
.step-develop .step-layout,.step-adopt .step-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding-block: 86px; }
.step-develop .step-heading h2,.step-adopt .step-heading h2 { font-size: clamp(54px,7.8vw,116px); }
.step-develop .step-detail,.step-adopt .step-detail { margin: 0; }
.assessment-chat { position: relative; }
.assessment-chat-header h3 { letter-spacing: 0; font-size: 18px; }
.assessment-maintenance { margin: 0 26px 18px; font-size: 12px; }
.assessment-maintenance:has(>button:not([hidden])) { border-top: 1px solid #333; padding-top: 8px; }
.assessment-maintenance:not(:has(>button:not([hidden]))) { display: none; }
.assessment-chat .assessment-maintenance button { background: none; border: 0; color: #bdbdbd; padding-inline: 0; }
.request-copy .request-scope { margin-top: 28px; color: #bdbdbd; font-size: 14px; max-width: 340px; }
@keyframes demo-arrive { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media(max-width:1050px) {
  .hero-content { gap: 38px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .hero h1 { font-size: clamp(48px,6.4vw,68px); }
  .hero-demo-panel,.hero-demo-content { min-height: 350px; }
  .hero-demo-panel { padding-inline: 20px; }
  .hero-demo-heading,.hero-demo-controls { padding-inline: 20px; }
  .hero-demo-steps { padding-inline: 20px; gap: 7px; }
}
@media(max-width:800px) {
  .hero-content { grid-template-columns: 1fr; padding-block: 112px 32px; gap: 38px; }
  .hero h1 { font-size: clamp(44px,9.2vw,74px); }
  .hero-demo { max-width: 560px; justify-self: start; }
  .hero-demo-panel,.hero-demo-content { min-height: 320px; }
  .hero-demo-panel h2 { font-size: 28px; }
  .hero-footer { padding-bottom: 24px; }
  .hero-demo { scroll-margin-top: 96px; }
  .step-develop .step-layout,.step-adopt .step-layout { grid-template-columns: 1fr; gap: 28px; padding-block: 64px; }
  .step-develop .step-heading h2,.step-adopt .step-heading h2 { font-size: clamp(54px,12vw,96px); }
}
@media(max-width:380px) {
  .hero-content { padding-inline: 20px; }
  .hero h1 { font-size: 44px; }
  .hero-demo-panel,.hero-demo-content { min-height: 332px; }
  .hero-demo-panel { padding-inline: 18px; gap: 16px; }
  .hero-demo-panel h2 { font-size: 25px; }
  .hero-demo-panel ul,.hero-demo-message { font-size: 15px; }
  .hero-demo-steps { padding-inline: 18px; gap: 6px; }
  .hero-demo-steps button { font-size: 11px; }
  .hero-demo-heading { font-size: 12px; padding-inline: 18px; }
  .hero-demo-controls { padding-inline: 18px; gap: 8px; }
}
@media(prefers-reduced-motion:reduce) { .hero-demo-panel { animation: none; } }
@media print { .hero-demo-steps,.hero-demo-controls { display: none; } .hero-content { display: block; } .hero-demo { margin-top: 32px; } }