/* Desktop amplo, tablet, celular e preferência por movimento reduzido. */
@media(min-width:1600px) {
  .container {
    width:calc(100% - 160px)
  }

  h1 {
    font-size:88px
  }

  .description {
    font-size:17px
  }

}

@media(max-width:1100px) and (min-width:701px) {
  .container {
    width:calc(100% - 72px)
  }

  .hero {
    min-height:720px
  }

  .header {
    height:100px
  }

  .content {
    height:calc(100% - 100px)
  }

  h1 {
    font-size:62px
  }

  .copy {
    max-width:560px
  }

  .nav-note {
    display:none
  }

  .veil {
    background:linear-gradient(90deg,#201629eb,#201629a8 45%,#20162908 90%)
  }

}

@media(max-width:700px) {
  .hero {
    height:100svh;
    min-height:830px;
    background:#38273f
  }

  .container {
    width:calc(100% - 44px)
  }

  .header {
    height:82px;
    align-items:center
  }

  .brand {
    font-size:26px;
    gap:8px;
    letter-spacing:-1.5px
  }

  .brand-symbol {
    width:24px;
    height:24px
  }

  .brand-dot {
    margin-left:-7px
  }

  .nav-note {
    display:none
  }

  .login {
    font-size:10px;
    padding:8px 12px;
    gap:8px;
    min-height:38px
  }

  .login .arrow {
    width:14px
  }

  .hero-video,.poster {
    object-position:center top
  }

  .veil {
    background:linear-gradient(0deg,#201629 0%,#201629f2 16%,#201629d9 30%,#20162970 49%,#20162908 72%),linear-gradient(180deg,#2016297a,transparent 23%)
  }

  .content {
    height:calc(100% - 82px);
    justify-content:flex-end;
    padding-bottom:105px
  }

  .copy {
    width:100%
  }

  .eyebrow {
    font-size:8px;
    letter-spacing:.18em;
    margin-bottom:18px;
    gap:9px
  }

  .eyebrow:before {
    width:19px
  }

  h1 {
    font-size:48px;
    line-height:1.07;
    letter-spacing:-.064em;
    margin-bottom:20px
  }

  .description {
    font-size:13px;
    line-height:1.8;
    max-width:325px;
    margin-bottom:24px
  }

  .cta {
    padding:16px 20px;
    min-height:54px;
    gap:27px;
    font-size:12px
  }

  .details {
    font-size:10px;
    margin-top:16px
  }

  .details span {
    margin:0 5px
  }

  .bottom {
    bottom:23px
  }

  .signature {
    font-size:7px;
    letter-spacing:.15em;
    gap:9px;
    max-width:175px;
    line-height:1.7
  }

  .signature:before {
    width:18px;
    flex-shrink:0
  }

  .motion {
    padding:9px 10px;
    font-size:9px;
    gap:6px
  }

  .motion svg {
    width:10px
  }

  .enter {
    animation-duration:.7s
  }

}

@media(max-width:360px) {
  .container {
    width:calc(100% - 36px)
  }

  .hero {
    min-height:800px
  }

  .brand {
    font-size:23px
  }

  .login {
    font-size:9px;
    padding:7px 9px;
    gap:5px
  }

  h1 {
    font-size:42px
  }

  .description {
    font-size:12px
  }

  .signature {
    max-width:145px
  }

}

@media(prefers-reduced-motion:reduce) {
  .enter {
    animation:none
  }

  .cta {
    transition:none
  }

}