@import url('https://fonts.googleapis.com/css2?family=PT+Mono&family=PT+Sans+Narrow:wght@400;700&display=swap');

/*
 * Mobile reference normalization.
 *
 * The supplied mobile reference is 709 px wide, but those are raster-image
 * pixels, not a real phone's CSS viewport pixels. The original implementation
 * copied those measurements 1:1 into CSS, so a ~390 px phone rendered a
 * 709 px-wide composition and .shell overflow clipping hid the right side.
 *
 * On mobile, 1rem is therefore one reference pixel at a 709 px viewport and
 * scales proportionally at real phone widths. The 709 px QA viewport remains
 * pixel-identical while 390/393/430 px devices get the same authored layout
 * scaled to their actual CSS viewport.
 */

html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'PT Mono', 'Courier New', monospace;
}

@media screen and (max-width: 760px) {
  html {
    /* 100 / 709 vw => 1rem == 1 reference px at the 709 px QA viewport. */
    font-size: 0.1410437236vw;
  }

  html,
  body,
  .shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .header {
    height: 165rem;
    padding: 0 42rem;
  }

  .hamb {
    width: 44rem;
    height: 40rem;
    transform: translateY(15rem);
  }

  .hamb i {
    width: 44rem;
    height: 5rem;
    border-radius: 3rem;
  }

  .hamb i:nth-child(1) { top: 0; }
  .hamb i:nth-child(2) { top: 16rem; }
  .hamb i:nth-child(3) { top: 32rem; }

  .hero {
    height: 1014rem;
  }

  .hero-photo {
    left: 0;
    top: 0;
    width: 709rem;
    height: 400rem;
  }

  .hero-headline-mobile {
    left: 55rem;
    top: 409rem;
    width: 545rem;
    height: 197rem;
  }

  .mobile-copy {
    left: 54rem;
    top: 618rem;
    width: 603rem;
  }

  .mobile-tag {
    font-size: 34rem !important;
    margin-bottom: 28rem;
    transform: translate(2rem, -4rem) scaleX(1.176) !important;
  }

  .mobile-tag::after {
    top: 43rem !important;
    width: 64rem !important;
    height: 2.5rem;
  }

  .mobile-traits {
    font-size: 32rem !important;
    gap: 19rem !important;
    margin-bottom: 27rem;
    transform: translate(3rem, -8rem) scaleX(1.067) !important;
  }

  .cta {
    width: 602rem;
    height: 67rem;
    margin-bottom: 21rem;
    transform: translateY(-3rem);
    font-size: 29rem;
  }

  .cta svg {
    right: 54rem;
    width: 37rem;
    height: 37rem;
    transform: translateY(-1rem);
  }

  .mobile-features {
    width: 603rem;
    height: 175rem;
    grid-template-columns: 311rem 292rem;
    grid-template-rows: 83rem 83rem;
    border-top-width: 1rem;
  }

  .mf {
    border-bottom-width: 1rem;
  }

  .mf:nth-child(1),
  .mf:nth-child(3) {
    border-right-width: 1rem;
  }

  .mf:nth-child(2),
  .mf:nth-child(4) {
    padding-left: 30rem;
  }

  .mf img {
    width: 62rem;
    height: 68rem;
    flex: 0 0 62rem;
    margin-right: 18rem;
  }

  .mf:nth-child(2) img,
  .mf:nth-child(4) img {
    width: 69rem;
    flex-basis: 69rem;
    margin-right: 16rem;
  }

  .mf b {
    font-size: 23.5rem;
  }

  .mf:nth-child(1) b {
    transform: translate(-1rem, -22rem) scaleX(1.04) !important;
  }

  .mf:nth-child(2) b {
    transform: translate(-2rem, -22rem) scaleX(1.075) !important;
  }

  .mf:nth-child(3) b {
    transform: translate(0, -8rem) scaleX(1.045) !important;
  }

  .mf:nth-child(4) b {
    transform: translate(-5rem, -17rem) scaleX(1.158) !important;
  }

  .mf:nth-child(1) img,
  .mf:nth-child(2) img {
    transform: translateY(-19rem) !important;
  }

  .mf:nth-child(3) img {
    transform: translateY(-8rem) !important;
  }

  .mf:nth-child(4) img {
    transform: translateY(-15rem) !important;
  }

  .values {
    height: 549rem !important;
    padding: 0 53rem;
  }

  .value {
    left: 53rem;
    width: 603rem !important;
  }

  .value:nth-child(1) {
    top: 25rem;
    height: 147rem;
    border-bottom-width: 1rem;
  }

  .value:nth-child(2) {
    top: 172rem;
    height: 125rem;
    border-bottom-width: 1rem;
  }

  .value:nth-child(3) {
    top: 297rem;
    height: 126rem;
    border-bottom-width: 1rem;
  }

  .value:nth-child(4) {
    top: 423rem;
    height: 126rem;
  }

  .value-icon-img {
    width: 84rem;
    height: 84rem;
    min-width: 84rem;
    margin: 0 57rem 0 0;
  }

  .value-copy {
    width: 430rem !important;
    min-width: 430rem !important;
    max-width: 430rem !important;
  }

  .value h3 {
    font-size: 37rem !important;
    margin-bottom: 5rem;
  }

  .value p {
    font-size: 19.5rem !important;
  }

  .value:nth-child(1) .value-icon-img {
    transform: translate(11.5rem, 12rem) scale(1.21) !important;
  }

  .value:nth-child(2) .value-icon-img {
    transform: translate(13rem, 12.5rem) scale(1.29) !important;
  }

  .value:nth-child(3) .value-icon-img {
    transform: translate(12rem, 9rem) scale(.90) !important;
  }

  .value:nth-child(1) .value-copy {
    transform: translate(-2rem, 5rem) !important;
  }

  .value:nth-child(2) .value-copy {
    transform: translate(-1rem, 18rem) !important;
  }

  .value:nth-child(3) .value-copy {
    transform: translateY(13rem) !important;
  }

  .value:nth-child(1) h3 {
    transform: translateX(1rem) scaleX(.955) !important;
  }

  .value:nth-child(2) h3 {
    transform: scaleX(.975) !important;
  }

  .value:nth-child(3) h3,
  .value:nth-child(4) h3 {
    transform: scaleX(1.17) !important;
  }

  .value:nth-child(1) p {
    line-height: 1.46 !important;
    transform: translateY(2rem) !important;
  }

  .value:nth-child(2) p {
    transform: translateY(2rem) scaleX(1.032) !important;
  }
}