/* Static content is the fallback; JavaScript starts the animated examples. */
.hero-story [hidden]{display:none!important}
.example-tool{padding:20px 24px 0;margin:0;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.example-statement{padding:8px 24px 0;margin:0;min-height:0;font-family:var(--display);font-size:clamp(20px,1.75vw,24px);line-height:1.3;color:var(--d-ink);text-wrap:balance}
.hero-story .story{padding:16px 24px 12px;gap:12px}
.hero-story .st{animation:none;opacity:1;transform:none}
.hero-story .st-bubble{padding:7px 12px 7px 7px;gap:9px}
.hero-story .st-play{width:26px;height:26px}
.hero-story .st-wave{gap:2px}
.hero-story .st-wave i{height:calc(var(--h)*1px)}
.hero-story .st-len{font-size:12px}
.hero-story .st-card{margin:0;width:100%;border-radius:12px}
.hero-story .st-card img{aspect-ratio:16/10;object-fit:contain;background:#f4f5f7}
.hero-story .st-card figcaption{padding:12px 16px;min-height:68px;font-size:14px;line-height:1.5;text-wrap:pretty;color:var(--d-ink)}
.hero-story .st-done{font-size:14px;padding:10px 12px}
.example-note{margin:0;padding:0 24px 16px;color:var(--d-soft);font-size:12px}
@media(max-width:600px){.example-tool{padding:16px 16px 0}.example-statement{padding:8px 16px 0;min-height:0}.hero-story .story{padding:14px 16px 12px}.example-note{padding:0 16px 16px}.hero-story .st-card figcaption{min-height:84px}}
.hero-story .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The two ways to request a demo share one column beside the examples. */
.hero-actions{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px;min-width:0}
.hero-actions .offer{padding:28px;align-content:center}
.hero-actions .offer form{display:block}
.hero-actions .offer .alt{transform:translateY(16px)}
.hero-actions .offer .dr-step-1{align-content:start;gap:24px}
.hero-actions .offer > [data-demo-request]{display:block}
.hero-actions .offer .way-line{font-size:clamp(22px,2vw,27px)}
.hero-actions .call-strip{margin:0}
.hero-actions .call-in{height:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:16px;align-content:center}
.hero-actions .call-in p{min-width:0;font-size:20px;text-wrap:balance}
.hero-actions .call-in .faces img{width:44px;height:44px}
.hero-actions .call-in .faces{grid-column:1;grid-row:1}
.hero-actions .call-in p{grid-column:2;grid-row:1}
.hero-actions .call-in .btn{grid-column:3;grid-row:1;width:auto;min-height:44px;padding:0 14px;font-size:14px;white-space:nowrap;justify-self:end}
@media(min-width:901px){
  .hero-story .st-card{width:88%;margin:0 auto}
  .hero-story .st-card figcaption{padding:10px 14px;min-height:60px}
  .hero-actions .offer .way-line{font-size:clamp(28px,2.3vw,32px)}
  .hero-actions .offer .way-line2{font-size:clamp(22px,1.9vw,26px)}
  .hero-story .example-statement{font-size:clamp(12px,1.3vw,18px);white-space:nowrap;text-wrap:nowrap}
  .hero-actions .offer > [data-demo-request]{display:block}
  .hero-actions .offer form{display:block}
  .hero-actions .offer .dr-step-1{align-content:start}
}
@media(max-width:520px),(min-width:901px) and (max-width:1200px){.hero-actions .call-in{grid-template-columns:auto minmax(0,1fr);padding:16px;gap:10px 12px}.hero-actions .call-in p{font-size:19px}.hero-actions .call-in .btn{grid-column:2;grid-row:2}}
@media(max-width:900px){.hero-actions{grid-template-rows:auto auto}.hero-actions .offer{padding:24px}.hero-actions .offer .alt{transform:translateY(6px)}}

.example-motion{margin-left:auto;width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid var(--d-line);border-radius:8px;background:var(--d-cell);color:var(--accent);cursor:pointer;font-size:16px}
.example-motion:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
  .examples-playing .example-panel:not([hidden]){animation:exampleCycle 15s cubic-bezier(.2,.7,.2,1) both}
  .hero-story.examples-playing .example-panel:not([hidden]) .st{animation-duration:15s;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-iteration-count:1;animation-fill-mode:both}
  .hero-story.examples-playing .st-memo{animation-name:st1}
  .hero-story.examples-playing .st-time{animation-name:exampleTime}
  .hero-story.examples-playing .st-demo{animation-name:exampleDemo}
  .hero-story.examples-playing .st-done{animation-name:exampleDone}
}
.hero-story.examples-paused .example-panel,.hero-story.examples-paused .st,.hero-story.examples-paused .st-wave i{animation-play-state:paused!important}
@keyframes exampleCycle{0%,2%{opacity:0}6%,94%{opacity:1}100%{opacity:0}}

/* Reveal the result sooner while leaving time to read each example. */
@keyframes exampleTime{0%,10%{opacity:0;transform:translateY(12px)}14%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes exampleDemo{0%,16%{opacity:0;transform:translateY(12px) scale(.98)}21%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes exampleDone{0%,30%{opacity:0;transform:translateY(12px)}35%,94%{opacity:1;transform:none}100%{opacity:0}}