:root {
      --pine: #1c2e22;
      --pine-deep: #16241b;
      --canvas: #f3ede1;
      --canvas-dim: #cdc6b6;
      --moss: #7a9b6e;
      --amber: #e8a23d;
      --amber-soft: #f0b860;
      --line: rgba(243, 237, 225, .14);
  }

  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: "Nunito", system-ui, sans-serif;
      background: var(--pine);
      color: var(--canvas);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
  }

  .sky {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(120% 80% at 50% 8%, rgba(232, 162, 61, .18), transparent 55%), radial-gradient(140% 90% at 50% 120%, var(--pine-deep), transparent 60%);
  }

  .breeze {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .5;
  }

  .breeze span {
      position: absolute;
      left: 50%;
      width: 2px;
      border-radius: 2px;
      background: linear-gradient(to top, transparent, var(--moss), transparent);
      animation: rise var(--d) linear infinite;
      opacity: 0;
  }

  @keyframes rise {
      0% {
          transform: translateY(40px) translateX(var(--x)) scaleY(.6);
          opacity: 0;
      }

      20% {
          opacity: .6;
      }

      80% {
          opacity: .5;
      }

      100% {
          transform: translateY(-220px) translateX(var(--x2)) scaleY(1.2);
          opacity: 0;
      }
  }

  .wrap {
      position: relative;
      z-index: 2;
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 28px;
  }

  nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 26px 0 0;
  }

  .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      color: var(--canvas);
  }

  .brand .mk {
      width: 26px;
      height: 26px;
      display: block;
  }

  .brand .nm {
      font-weight: 800;
      letter-spacing: .14em;
      font-size: 15px;
  }

  .nav-tag {
      font-size: 12px;
      color: var(--canvas-dim);
      letter-spacing: .12em;
      text-transform: uppercase;
  }

  .hero {
      text-align: center;
      padding: 60px 0 30px;
  }

  .hero .tent {
      width: 132px;
      height: 132px;
      color: var(--canvas);
      margin: 0 auto 30px;
      display: block;
      filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .4));
      animation: settle 1s cubic-bezier(.2, .8, .2, 1) both;
  }

  @keyframes settle {
      from {
          opacity: 0;
          transform: translateY(16px) scale(.96);
      }

      to {
          opacity: 1;
          transform: none;
      }
  }

  .eyebrow {
      font-size: 13px;
      letter-spacing: .32em;
      text-transform: uppercase;
      color: var(--amber);
      font-weight: 700;
      margin-bottom: 20px;
      animation: fade .9s .15s both;
  }

  h1 {
      font-family: "Fraunces", serif;
      font-weight: 500;
      font-size: clamp(38px, 6vw, 68px);
      line-height: 1.04;
      letter-spacing: -.015em;
      margin-bottom: 22px;
      animation: fade .9s .25s both;
  }

  h1 em {
      font-style: italic;
      color: var(--amber-soft);
  }

  .lede {
      max-width: 560px;
      margin: 0 auto 38px;
      font-size: clamp(16px, 2.1vw, 19px);
      line-height: 1.6;
      color: var(--canvas-dim);
      animation: fade .9s .35s both;
  }

  @keyframes fade {
      from {
          opacity: 0;
          transform: translateY(10px);
      }

      to {
          opacity: 1;
          transform: none;
      }
  }

  .signup {
      max-width: 500px;
      margin: 0 auto;
      animation: fade .9s .45s both;
  }

  .form-row {
      display: flex;
      gap: 10px;
      background: rgba(243, 237, 225, .06);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 8px;
  }

  .form-row input {
      flex: 1;
      border: 0;
      background: transparent;
      color: var(--canvas);
      font-family: inherit;
      font-size: 16px;
      padding: 13px 16px;
      outline: none;
  }

  .form-row input::placeholder {
      color: rgba(205, 198, 182, .6);
  }

  .btn {
      border: 0;
      border-radius: 11px;
      background: var(--amber);
      color: #2a1c06;
      font-family: inherit;
      font-weight: 800;
      font-size: 15px;
      letter-spacing: .01em;
      padding: 0 22px;
      cursor: pointer;
      transition: transform .15s, background .15s;
      white-space: nowrap;
  }

  .btn:hover {
      background: var(--amber-soft);
      transform: translateY(-1px);
  }

  .btn:active {
      transform: translateY(0);
  }

  .btn:disabled {
      opacity: .75;
      cursor: not-allowed;
  }

  .consent {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      text-align: left;
      margin: 13px 8px 0;
      color: rgba(205, 198, 182, .82);
      font-size: 13px;
      line-height: 1.45;
  }

  .consent input {
      margin-top: 3px;
      accent-color: var(--amber);
  }

  .form-note {
      margin-top: 12px;
      font-size: 13px;
      color: rgba(205, 198, 182, .7);
  }

  .form-note b {
      color: var(--moss);
      font-weight: 700;
  }

  .hp {
      position: absolute;
      left: -9999px;
      opacity: 0;
      pointer-events: none;
  }

  .msg {
      margin-top: 16px;
      font-size: 15px;
      font-weight: 700;
      min-height: 22px;
      opacity: 0;
      transform: translateY(6px);
      transition: .4s;
  }

  .msg.show {
      opacity: 1;
      transform: none;
  }

  .msg.ok {
      color: var(--amber-soft);
  }

  .msg.err {
      color: #e88a6b;
  }

  .proof {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px 30px;
      margin: 64px auto 0;
      max-width: 760px;
      padding-top: 34px;
      border-top: 1px solid var(--line);
      animation: fade 1s .6s both;
  }

  .proof div {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 14.5px;
      color: var(--canvas-dim);
  }

  .proof svg {
      width: 19px;
      height: 19px;
      color: var(--moss);
      flex: none;
  }

  .features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      border-radius: 20px;
      overflow: hidden;
      margin: 90px 0 30px;
  }

  .feature {
      background: var(--pine);
      padding: 34px 28px;
  }

  .feature .ic svg {
      width: 22px;
      height: 22px;
      color: var(--amber);
  }

  .feature h3 {
      font-family: "Fraunces", serif;
      font-weight: 600;
      font-size: 21px;
      margin-bottom: 9px;
      letter-spacing: -.01em;
  }

  .feature .ic {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      background: rgba(232, 162, 61, .14);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
  }

  .icon {
      width: 28px;
      height: 28px;
      display: block;
      background: var(--amber);
  }

  .icon-air {
      -webkit-mask: url('/img/mdi--air-filter.svg') center/contain no-repeat;
      mask: url('/img/mdi--air-filter.svg') center/contain no-repeat;
  }

  .icon-magnet {
      -webkit-mask: url('/img/mdi--magnet.svg') center/contain no-repeat;
      mask: url('/img/mdi--magnet.svg') center/contain no-repeat;
  }

  .icon-power {
      -webkit-mask: url('/img/gravity-ui--power.svg') center/contain no-repeat;
      mask: url('/img/gravity-ui--power.svg') center/contain no-repeat;
  }


  .feature p {
      font-size: 14.5px;
      line-height: 1.58;
      color: var(--canvas-dim);
  }

  footer {
      text-align: center;
      padding: 56px 0 40px;
      margin-top: 40px;
      border-top: 1px solid var(--line);
  }

  footer .wm {
      width: 120px;
      color: rgba(243, 237, 225, .32);
      margin: 0 auto 14px;
      display: block;
  }

  footer p {
      font-size: 13px;
      color: rgba(205, 198, 182, .5);
      line-height: 1.7;
  }

  @media(max-width:720px) {
      .features {
          grid-template-columns: 1fr;
      }

      .form-row {
          flex-direction: column;
      }

      .btn {
          padding: 14px;
      }

      nav .nav-tag {
          display: none;
      }
  }

  @media(prefers-reduced-motion:reduce) {
      * {
          animation: none !important;
      }

      .breeze {
          display: none;
      }
  }