/* Owner experience (homepage): How it works cards and the demo CTA. Portal rules moved to portal-wizard-20260910.css. */
.how { padding-block: clamp(76px, 9vw, 130px); padding-inline: clamp(24px, 4.5vw, 110px); }
.how-heading { border: 0; padding-bottom: 40px; }
.how .step-cards { gap: 18px; max-width: 1280px; margin-inline: auto; }
.how .step-cards li { min-height: 300px; padding: 26px; align-items: center; justify-content: flex-start; gap: 28px; text-align: center; border: 1px solid #d7d5cd; border-radius: 24px; background: #f3f1ea; box-shadow: inset 0 1px 0 #fff, 0 10px 26px #22281c06; }
.how .step-cards li > div { min-width: 0; max-width: 100%; width: 100%; margin-top: auto; text-align: center; }
.how .card-icon { width: 58px; height: 58px; border: 1px solid #d7d5cd; border-radius: 17px; background: #ffffff80; }
.how .clipboard-icon { font-size: 31px; }
.how .card-icon img { width: 40px; height: 40px; object-fit: contain; }
.how .step-cards div > span { display: block; margin-bottom: 12px; color: #826138; font-size: 11px; text-align: center; }
.how .step-cards h3 { max-width: none; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -.045em; text-align: center; }
.how .step-cards p { max-width: none; margin-top: 10px; color: #595d53; font-size: clamp(13px, 1.3vw, 15px); line-height: 1.45; text-align: center; }
@media (max-width: 980px) {
  .how .step-cards { grid-template-columns: 1fr; gap: 12px; }
  .how .step-cards li { min-height: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px; padding: 24px; }
  .how .step-cards li > div { margin-top: 0; }
  .how .step-cards h3 { font-size: 27px; }
  .how .step-cards p { font-size: 15px; }
}
@media (max-width: 540px) {
  .how-heading h2 { font-size: 48px; }
  .how .step-cards li { padding: 21px 18px; gap: 14px; grid-template-columns: 44px minmax(0, 1fr); }
  .how .card-icon { width: 44px; height: 44px; border-radius: 13px; }
  .how .card-icon img { width: 30px; height: 30px; }
  .how .clipboard-icon { font-size: 26px; }
  .how .step-cards h3 { font-size: 27px; }
}
/* Single-action demo entry; no website input or surrounding form bar. */
.demo-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 18px 30px; border: 1px solid #ffffff70; border-radius: 20px; background: #f0f1ef; color: #15212a; font: 650 16px var(--font-geist-sans), sans-serif; text-decoration: none; box-shadow: inset 0 1px 0 #fff, 0 12px 30px #0003; }
.demo-cta:hover { background: #fff; }
.demo-cta:focus-visible { outline: 3px solid #d7ab72; outline-offset: 5px; }
/* Hero: liquid glass under the headline, on the .glass-object tokens, with a white top edge. */
.demo-cta--hero { position: relative; z-index: 3; min-width: 200px; margin-top: clamp(28px, 4.5vh, 44px); border-color: rgba(255,255,255,.5); background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.07) 55%, rgba(255,255,255,.14)), rgba(10,22,36,.34); color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0,4,13,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.1), 0 16px 40px rgba(0,7,18,.3); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, filter .24s ease; }
.demo-cta--hero::after { inset: 1px; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 58%); opacity: 1; }
.demo-cta--hero:hover { background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.1) 55%, rgba(255,255,255,.18)), rgba(10,22,36,.34); transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.12), 0 20px 46px rgba(0,7,18,.34); }
.demo-cta--hero:focus-visible { outline-color: rgba(255,255,255,.85); }
.demo-cta--closing { justify-self: end; background: #171b17; color: #fff; border-color: #171b17; }
.demo-cta--closing:hover { background: #343b31; }
@media (max-width: 700px) {
 .demo-cta--hero { min-height: 56px; min-width: 190px; margin-top: 26px; padding: 14px 26px; }
 .demo-cta--closing { justify-self: start; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
 .demo-cta--hero, .demo-cta--hero:hover { transition: none; transform: none; }
}