@media(max-width:1050px) {
  .shell {
    width:min(100% - 4rem,1380px)
  }
  .site-nav {
    gap:1rem
  }
  .site-nav>a {
    font-size:.75rem
  }
  .showcase-grid {
    gap:2rem
  }
  .showcase h2 {
    font-size:clamp(2.8rem,5vw,4.2rem)
  }
  .flow-scene {
    transform:scale(.95)
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:68px
  }
  .shell {
    width:min(100% - 2.5rem,560px)
  }
  .header-inner {
    min-height:68px
  }
  .brand img {
    width:43px;
    height:43px
  }
  .brand-type strong {
    font-size:1.02rem
  }
  .brand-type small {
    font-size:.33rem
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    min-width:44px;
    min-height:44px;
    border:0;
    background:transparent;
    color:#fff;
    cursor:pointer
  }
  .menu-toggle span {
    height:2px;
    width:23px;
    background:currentColor;
    border-radius:2px
  }
  .site-nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:68px;
    background:#091522;
    padding:1.25rem;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-top:1px solid #ffffff29
  }
  .site-nav.is-open {
    display:flex
  }
  .site-nav>a {
    padding:.85rem;
    font-size:1rem
  }
  .site-nav .nav-contact {
    margin:.5rem 0 0;
    text-align:center
  }
  .hero {
    height:760px;
    min-height:680px;
    align-items:flex-start
  }
  .hero-media video {
    object-position:62% center
  }
  .hero-media {
    background-position:62% center
  }
  .hero-shade {
    background:linear-gradient(180deg,rgba(3,10,18,.78),rgba(3,10,18,.64) 41%,rgba(3,10,18,.13) 100%)
  }
  .hero-content {
    padding-top:12rem
  }
  .hero h1 {
    font-size:clamp(3.6rem,12vw,5.2rem)
  }
  .hero-description {
    font-size:1.1rem
  }
  .scroll-cue {
    bottom:1.2rem
  }
  .showcase-grid {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:0;
    gap:0
  }
  .showcase-copy {
    padding:5rem 0 2.2rem
  }
  .showcase h2 {
    font-size:clamp(3rem,10vw,4.7rem);
    max-width:13ch
  }
  .showcase-copy>p:not(.eyebrow):not(.detail-line) {
    font-size:1rem
  }
  .laptop-scene {
    align-self:stretch;
    width:100%;
    padding-bottom:4rem;
    margin-inline:0
  }
  .laptop {
    width:100%
  }
  .laptop-screen {
    border-width:8px
  }
  .demo-store-hero strong {
    font-size:clamp(1.2rem,4vw,1.9rem)
  }
  .demo-store-nav {
    font-size:.43rem
  }
  .demo-store-footer {
    font-size:.42rem
  }
  .flow-scene {
    margin-bottom:3rem;
    transform:none;
    width:100%
  }
  .flow-node small {
    font-size:.48rem
  }
  .node-center small {
    font-size:.43rem
  }
  .phone-scene {
    padding-top:0
  }
  .phone {
    width:310px;
    height:550px;
    transform:rotate(4deg)
  }
  .phone-scene .demo-caption {
    max-width:290px;
    line-height:1.4
  }
  .method-section,.about-section,.resources-section {
    padding:5rem 0
  }
  .section-intro h2,.resources-section h2 {
    font-size:clamp(2.8rem,9vw,4rem)
  }
  .method-steps {
    grid-template-columns:1fr;
    gap:.6rem;
    margin-top:3rem
  }
  .method-steps article {
    border-bottom:1px solid var(--line);
    padding-block:1rem
  }
  .method-steps h3 {
    margin:.5rem 0
  }
  .method-steps p {
    max-width:none
  }
  .about-grid,.resources-grid {
    grid-template-columns:1fr;
    gap:2rem
  }
  .about-mark {
    width:240px;
    height:170px;
    overflow:hidden
  }
  .about-copy h2 {
    font-size:clamp(3rem,9vw,4.5rem)
  }
  .contact-section {
    min-height:570px;
    background-position:58% center
  }
  .contact-overlay {
    background:linear-gradient(90deg,rgba(251,246,234,.89),rgba(251,246,234,.35) 75%)
  }
  .contact-content h2 {
    font-size:clamp(3.8rem,11vw,5.5rem)
  }
  .footer-inner {
    padding-block:2rem;
    display:grid;
    gap:1rem;
    justify-content:start
  }
}
@media(max-width:390px) {
  .shell {
    width:calc(100% - 2rem)
  }
  .hero h1 {
    font-size:3.5rem
  }
  .showcase h2 {
    font-size:2.8rem
  }
  .phone {
    width:285px
  }
  .demo-store-nav span:nth-child(2) {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .hero-media video {
    display:none
  }
  .button {
    transition:none
  }
  .button:hover {
    transform:none
  }
}