/* Wide screens pair the introduction with its SVG scene; small screens stack them. */
.hero-layout{width:100%;min-width:0}
.hero.hero-product{display:block;min-height:0;padding:65px 24px 35px;text-align:center;background:transparent;overflow:visible}
.hero.hero-product:before{display:none}
.hero-product .hero-copy{max-width:920px;margin-inline:auto;z-index:2}
.hero-product h1{font-family:var(--sans);font-size:clamp(42px,4.8vw,72px);line-height:1.18;letter-spacing:-.055em;font-weight:650;white-space:normal}
.hero-product h1 .serif-accent{color:#23637A}
.hero-product .hero-description{font-size:16px;line-height:1.9;max-width:720px;margin:22px auto 0;color:#607C89}
#sync-demo{position:relative;width:100%;margin:0;padding:16px max(32px,calc((100% - 1280px)/2)) 72px;background:transparent;overflow:visible}
.journey-fallback{min-height:580px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:22px;text-align:center;color:#335F73;background:none;border:0;border-radius:0}
.journey-fallback-source,.journey-fallback-cloud{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap}
.journey-fallback .memory-photo{width:76px;aspect-ratio:1;border-radius:5px}
.journey-fallback-source>.icon,.journey-fallback-cloud>.icon{width:56px;height:56px}
.journey-fallback-devices{display:flex;flex-wrap:wrap;justify-content:center;gap:35px}
.journey-fallback-devices>span{display:grid;justify-items:center;gap:9px;font-size:0}
.journey-fallback-devices .icon{width:40px;height:40px}
.journey-fallback strong,.journey-fallback p{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.story-literature{margin:0 0 22px;padding:0}
.story-literature footer{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:12px;line-height:1.7;margin-top:8px;color:#BDD4DE}
.story-literature a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:4px}
@media(min-width:1100px){
  .hero-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(38px,4vw,80px);width:min(1840px,calc(100% - 112px));margin-inline:auto;padding:32px 0 44px}
  .hero-layout .hero.hero-product{min-width:0;padding:0;text-align:left}
  .hero-layout .hero-copy{max-width:640px;margin:0;text-align:left}
  .hero-layout .hero-product h1{font-size:clamp(38px,3.55vw,68px);line-height:1.24;letter-spacing:-.055em}
  .hero-layout .hero-description{font-size:clamp(14px,1.03vw,17px);line-height:2;max-width:540px;margin:28px 0 0;text-wrap:pretty}
  .hero-layout #sync-demo{min-width:0;padding:0}
  .hero-layout .journey-fallback{min-height:650px}
}
@media(max-width:800px){
  .hero.hero-product{padding:49px 24px 27px}
  .hero-product h1{font-size:clamp(40px,6.4vw,56px)}
  .hero-product .hero-description{font-size:14px;max-width:590px;margin-top:20px}
  #sync-demo{padding-inline:28px;padding-bottom:56px}
}
@media(max-width:600px){
  .hero.hero-product{padding:37px 20px 22px}
  .hero-product .hero-copy{max-width:100%;text-align:center;padding:0}
  .hero-product h1{font-size:clamp(33px,8.8vw,49px);line-height:1.28;letter-spacing:-.05em}
  .hero-product .hero-description{font-size:12px;line-height:1.95;max-width:340px;margin-top:18px}
  #sync-demo{padding:12px 16px 42px}
  .journey-fallback{min-height:560px;padding:16px 0;gap:24px}
  .journey-fallback-source,.journey-fallback-cloud{gap:15px}
  .journey-fallback-devices{gap:22px}
  .journey-fallback-devices .icon{width:32px;height:32px}
  .story-literature .story-lead{font-size:18px}
}