.hostario-demo { border: 0; padding: 0; width: min(1180px, calc(100vw - 40px)); max-width: none; height: min(880px, calc(100dvh - 40px)); max-height: none; color: #22251f; background: #f5f2ec; border-radius: 12px; }
.hostario-demo::backdrop { background: #141914c9; backdrop-filter: blur(12px); }
.hd-shell { height: 100%; display: flex; flex-direction: column; }
.hd-top { padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dcded6; flex: 0 0 auto; font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.hd-close { border: 1px solid #d6d9ce; border-radius: 50%; width: 36px; height: 36px; padding: 0; background: transparent; font: 26px/1 sans-serif; cursor: pointer; }
.hd-layout { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
.hd-story { padding: clamp(24px, 4vh, 46px) 48px; overflow-y: auto; }
.hd-story h2 { font-size: clamp(38px, 5.6vh, 61px); line-height: .99; letter-spacing: -.055em; font-weight: 600; margin: 0 0 22px; }
.hd-intro { color: #5d6158; font-size: 17px; line-height: 1.6; max-width: 300px; margin: 0; }
.hd-steps { list-style: none; margin: 28px 0 20px; padding: 0; }
.hd-steps li { display: flex; align-items: start; gap: 15px; padding: 14px 0; opacity: .48; transition: opacity .25s; }
.hd-steps li.is-current, .hd-steps li.is-complete { opacity: 1; }
.hd-steps li > span { font-size: 11px; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #c3c9bd; border-radius: 50%; }
.hd-steps li.is-current > span { background: #364c3c; border-color: #364c3c; color: #fff; }
.hd-steps strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.hd-steps small { font-size: 12px; color: #52594f; line-height: 1.5; display: block; }
.hd-hint { font-size: 13px; line-height: 1.5; color: #455a46; border-left: 2px solid #9eac90; padding: 0 0 0 13px; min-height: 40px; }
.hd-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; font-size: 12px; }
.hd-links button { font: inherit; border: 0; background: none; cursor: pointer; padding: 0; color: inherit; }
.hd-links a { color: inherit; text-decoration: none; }
.hd-stage { background: #e7eadd; padding: 20px 24px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; border-left: 1px solid #d5dacb; }
.hd-phone { width: min(375px, 100%); flex: 1; max-height: 728px; min-height: 0; border: 7px solid #242823; border-radius: 43px; box-shadow: 0 24px 50px -16px #24332540, inset 0 0 0 1px #737b6f; overflow: hidden; background: #fafafc; }
.hd-phone iframe { width: 100%; height: 100%; border: 0; display: block; }
.hd-disclosure { flex: 0 0 auto; margin: 0; padding: 10px 18px; color: #66705d; font-size: 10px; line-height: 1.5; text-align: center; border-top: 1px solid #dcded6; }
.hostario-demo button:focus-visible, .hostario-demo a:focus-visible { outline: 3px solid #065cd6; outline-offset: 4px; }
@media (min-width: 761px) and (max-height: 800px) {
  .hd-story { padding: 24px 48px; }
  .hd-story h2 { margin-bottom: 16px; }
  .hd-steps { margin: 18px 0 12px; }
  .hd-steps li { padding: 10px 0; }
  .hd-links { margin-top: 16px; }
}
@media (max-width: 760px) {
  .hostario-demo { width: 100%; height: 100dvh; border-radius: 0; margin: 0; }
  .hd-top { padding: 10px 16px; }
  .hd-layout { display: flex; flex-direction: column; }
  .hd-story { padding: 12px 18px; overflow: visible; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
  .hd-story h2, .hd-intro, .hd-steps, .hd-links a { display: none; }
  .hd-hint { margin: 0; font-size: 11px; min-height: 0; max-width: 265px; }
  .hd-links { margin: 0; flex-shrink: 0; font-size: 11px; }
  .hd-stage { flex: 1; padding: 0; border: 0; }
  .hd-phone { width: 100%; max-height: none; border: 0; border-top: 1px solid #dcded6; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .hd-steps li { transition: none; } }