/* Use one content width for the header, hero and full-bleed sections. */
:root{--page-gutter:max(5%,calc((100% - 1680px)/2))}
@media(min-width:701px){
  header,.section,footer{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
  .dev-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);align-items:center;column-gap:clamp(36px,5vw,112px);min-height:0;padding:72px var(--page-gutter) 110px}
  .dev-hero .hero-content{width:auto;max-width:none;min-width:0}
  .hero-workbench{position:relative;inset:auto;width:100%;max-width:720px;justify-self:end;align-self:center;transform:rotate(1deg)}
  .hero-stage{height:auto;aspect-ratio:1/.96}
  .dev-hero h1{font-size:clamp(48px,4.8vw,104px);letter-spacing:-.045em}
  .dev-hero .hero-logo{width:clamp(230px,19vw,330px);margin:20px 0 26px}
  .dev-hero .intro{font-size:clamp(14px,1.05vw,20px);line-height:1.85;max-width:620px}
  .dev-hero .hero-note{font-size:clamp(8px,.5vw,11px);letter-spacing:2px;line-height:1.8}
  .dev-hero .scroll-hint{left:var(--page-gutter);bottom:30px}
  .dev-hero .aurora{right:var(--page-gutter);width:1100px;height:100%;top:0}
  .dev-hero .actions{gap:clamp(18px,2vw,36px);flex-wrap:wrap}
  .ribbon{padding-left:var(--page-gutter);padding-right:var(--page-gutter);gap:clamp(24px,3vw,65px)}
  .early-build-banner{padding:14px var(--page-gutter);flex-wrap:wrap;gap:8px 18px;font-size:12px}
  .early-build-banner strong{font-size:10px}
}
@media(min-width:1600px){
  header{height:105px}.brand img{width:210px}nav{gap:36px;font-size:15px}.nav-button{padding:14px 22px}
  .dev-hero{padding-top:80px;padding-bottom:115px}.dev-hero .eyebrow{font-size:12px;letter-spacing:2.8px}
  .dev-hero .button{font-size:15px;padding:19px 25px}.dev-hero .text-link{font-size:14px}.hero-workbench .window-top{font-size:10px;padding:17px}.hero-workbench .stage-label{font-size:9px;top:20px;left:22px}.stage-chip{font-size:12px;padding:12px 16px}.hero-workbench .mini-timeline{padding:20px;font-size:11px}.hero-workbench .mock-caption{font-size:10px;padding-bottom:15px}.dev-hero .scroll-hint{font-size:10px}
  .ribbon{font-size:14px;padding-block:27px}.ribbon>span{font-size:10px}.early-build-banner{font-size:13px}.early-build-banner strong{font-size:11px}
  .section{padding-top:110px;padding-bottom:110px}.studio{padding-top:30px}.paint-feature{padding-top:45px}
  h2{font-size:56px}.section-heading>p{font-size:16px}.section .eyebrow{font-size:12px}
  .animation-tools h3{font-size:28px}.animation-tools p{font-size:16px}.animation-art{min-height:680px}.animation-layout{gap:80px}
  .workspace-tabs button span{font-size:18px}.panel-copy{padding:45px 38px}.panel-copy h3{font-size:36px}.panel-copy>p:not(.eyebrow){font-size:16px}.panel-copy ul{font-size:14px}.native-badge{font-size:13px}.demo-editor{height:480px;grid-template-columns:42px 1fr 135px}.demo-inspector{font-size:10px;padding:20px 12px}.demo-inspector b{font-size:8px}.demo-bottom{font-size:9px}.workspace-visual>p{font-size:11px}.workspace-visual .window-top{font-size:10px}
  .paint-copy>p:not(.eyebrow):not(.intro){font-size:16px}.paint-copy .intro{font-size:20px}.paint-copy .paint-note{font-size:12px!important;max-width:570px}.paint-showcase{height:650px}.pill-list span{font-size:12px}.effects-copy{font-size:16px;max-width:600px}.effects-section .intro{font-size:19px}.effect-controls button{font-size:14px;padding:13px 18px}.small-print{font-size:11px;max-width:520px}.fx-preview{height:580px}
  .feature h3{font-size:30px}.feature>p:last-child{font-size:16px;max-width:440px}.format-grid code{font-size:24px}.format-grid span{font-size:14px}
  .engine-grid article{padding:36px 30px}.engine-number{font-size:12px}.engine-grid h3{font-size:30px}.engine-grid p{font-size:15px}summary{font-size:14px}.export-note strong{font-size:15px}.export-note p{font-size:14px}
  .ownership-grid h3{font-size:31px}.ownership-grid p{font-size:16px;max-width:440px}.ownership-grid article>span,.story-timeline article>span{font-size:11px}.build-status{font-size:10px}.early-build-note h3{font-size:25px}.early-build-note p{font-size:15px;max-width:950px}
  .story-body>p{font-size:17px}.story-timeline p,.story-body .story-last{font-size:16px}.story-timeline h3{font-size:29px}.story-body .story-belief{font-size:29px}.story-intro{font-size:19px}.story-signature{font-size:29px}.story-section{gap:100px}
  .closing>p:not(.eyebrow){font-size:18px}.closing-promises{font-size:14px}.closing .availability{font-size:13px}.closing .button{font-size:15px;padding:19px 25px}footer{font-size:13px}footer img{width:175px}
}
@media(min-width:701px) and (max-width:1000px){
  .dev-hero{column-gap:30px;padding-top:55px;padding-bottom:85px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .dev-hero h1{font-size:clamp(40px,5.6vw,56px)}.dev-hero .hero-logo{width:210px}.dev-hero .eyebrow{font-size:8px;letter-spacing:1.8px}.dev-hero .intro{font-size:13px}.hero-workbench .window-top{font-size:6px;letter-spacing:.5px}.stage-label{font-size:6px}.stage-chip{font-size:8px;padding:8px}.ribbon{gap:18px;font-size:10px}.ribbon>span{font-size:7px}.early-build-banner{font-size:10px}.early-build-banner strong{font-size:9px}
  header .brand img{width:140px}nav{gap:17px;font-size:11px}.nav-button{padding:11px 12px}.nav-button span{margin-left:10px}
}