/* Websites service page: the Automation and Software layout, with desktop and phone screenshot pairs. */

/* Hero heading: sized to the copy column so it always sits on two even lines */
.websites-page .hero-copy{container-type:inline-size}
.story-page.websites-page .page-hero h1{font-size:clamp(30px,10cqi,72px);max-width:none;text-wrap:balance}

/* A shorter gap under the hero, so the next section shows there is more to scroll to */
.story-page.websites-page main>.page-hero{padding-bottom:40px}
.story-page.websites-page main>.page-hero+.section{padding-top:32px}

/* Headings stay in place rather than following the page as it scrolls */
.story-page.websites-page .approach-intro,.story-page.websites-page .faq-layout .story-heading{position:static}

/* What is included: icon, heading and paragraph start at the same height in every card on a row */
.websites-page #included .help-icon svg{width:29px;height:29px;stroke-width:1.8}
@supports (grid-template-rows:subgrid){
  .websites-page .help-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .websites-page .help-card h3{align-self:start}
}

/* Screenshot pairs: match the software page's desktop and phone angles */
.site-scene{position:relative;isolation:isolate;width:100%;padding:7% 2% 9% 4%}
.site-scene:before{content:'';position:absolute;inset:4% 3% 0 10%;border:1px solid #fff9;border-radius:50%;background:linear-gradient(140deg,#e1ebd8,#ccddc5);z-index:-1}
.site-scene:after{content:'';position:absolute;inset:-4% 0 2% 14%;border:1px solid #c6d8bc;border-radius:50%;z-index:-1;transform:rotate(-20deg)}
.site-pair{container-type:inline-size;position:relative;padding:0 9% 9% 0}
.site-desktop{padding:1.1cqi;border-radius:2.6cqi;background:#000;box-shadow:0 30px 55px #1d3f2729;transform:rotate(-3deg)}
.site-desktop img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:1.6cqi;background:#eef3e8}
.site-phone{position:absolute;right:0;bottom:0;width:25%;padding:1.1cqi;border-radius:4.4cqi;background:#000;box-shadow:0 22px 40px #17362238;transform:rotate(5deg)}
.site-phone img{display:block;width:100%;height:auto;aspect-ratio:9/19;object-fit:cover;object-position:top;border-radius:3.4cqi;background:#fff}
.site-desktop picture,.site-phone picture{display:block}
.site-panel .site-desktop img{aspect-ratio:14/9}
.site-panel .site-phone img{aspect-ratio:440/900}

/* Examples: cycle like the Software explorer. The frames stay put and the screenshots fade in */
.story-page .site-stage{min-height:0;padding:40px 0}
.site-stage:before,.site-stage:after{z-index:0}
.site-panel{grid-area:1/1;position:relative;z-index:1;width:100%;visibility:hidden}
.site-panel.is-active{visibility:visible}
.site-panel.is-active img{animation:screen-reveal .45s ease both}
.examples-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:24px}
.story-page .examples-footer .quiet-note{margin:0}
.examples-footer .flow-controls{flex:none}

@media(min-width:1000px){
  .story-page.websites-page main>.page-hero{padding-bottom:56px}
  .story-page.websites-page main>.page-hero+.section{padding-top:48px}
  .websites-page .software-explorer{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px}
  .story-page .site-stage{padding:60px 0}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .site-pair .site-desktop,.site-pair .site-phone{transition:transform .7s var(--story-ease)}
  .site-pair:hover .site-desktop{transform:rotate(-2deg) translateY(-5px)}
  .site-pair:hover .site-phone{transform:rotate(3deg) translateY(-9px)}
}
@media(prefers-reduced-motion:reduce){
  .site-panel.is-active img{animation:none}
}