/* Every length below is a pixel value measured off landing_page.png at 2x and
     halved, expressed in the design unit --u. At a 403px-wide viewport u == 1
     and the layout matches the reference 1:1. */
  :root{
    --u: min(calc(100vw / 403), calc(100vh / 604), 1.45px);
    --lime:#CFF36C;
    --cream:#F9F4E9;
    --ink:#172C1D;
    --ink-foot:#112015;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    font-family:Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--cream);
    background:var(--ink);
    /* the reference darkens over its last ~85px. Anchor that to the bottom
       edge, not a percentage of viewport height, or the band floats up the
       screen on a tall phone and reads as a gap. */
    background-image:linear-gradient(to top,var(--ink-foot) 0,var(--ink) calc(85*var(--u)));
    /* body's background propagates to the page canvas and tiles by default, so
       rubber-band scrolling on iOS can expose a repeat seam below the fold */
    background-repeat:no-repeat;
    -webkit-font-smoothing:antialiased;
    min-height:100dvh;
    display:flex;
  }
  /* the reference composition: 403x604 at u=1, centred in whatever viewport it lands in */
  .stage{
    margin:auto;          /* not align-items:center — that clips the top when
                             content is taller than the viewport */
    width:calc(403*var(--u));
    height:calc(604*var(--u));
    display:flex;flex-direction:column;align-items:center;
    padding-top:calc(103*var(--u));
  }

  /* --- logo: two lines, BS indented 9.5px right of DI, baselines 49.25px apart --- */
  .logo{
    position:relative;
    font-family:Poppins,sans-serif;
    font-weight:900;
    font-size:calc(66.4*var(--u));       /* cap height 46.5 */
    line-height:calc(49.25*var(--u));    /* baseline-to-baseline */
    letter-spacing:0;
    color:var(--lime);
    display:block;
    width:calc(90.5*var(--u));
    margin-left:calc(2*var(--u));      /* block sits right of centre in the reference */
  }
  .logo span{display:block}
  /* the reference tracks the two lines differently; DI is the wider pair */
  .logo .di{letter-spacing:calc(2.92*var(--u))}
  .logo .bs{margin-left:calc(9.5*var(--u));letter-spacing:calc(-0.74*var(--u))}

  .kicker{
    margin:calc(14.5*var(--u)) 0 0;
    font-size:calc(8.6*var(--u));
    font-weight:500;
    letter-spacing:calc(3.13*var(--u));
    text-transform:uppercase;
    text-indent:calc(3.13*var(--u));   /* cancel the trailing letter-space so it centres */
    color:var(--cream);
  }

  h1{
    margin:calc(36.5*var(--u)) 0 0 calc(4.5*var(--u));
    font-size:calc(39.3*var(--u));
    font-weight:600;
    line-height:calc(39.5*var(--u));
    text-align:center;
    color:var(--cream);
  }
  h1 em{font-style:normal;color:var(--lime)}
  h1 .l1{letter-spacing:calc(-0.34*var(--u))}
  h1 .l2{letter-spacing:calc(-0.73*var(--u))}

  .actions{
    margin-top:calc(33*var(--u));
    display:flex;flex-direction:column;
    gap:calc(13.5*var(--u));
  }
  .btn{
    width:calc(207*var(--u));
    height:calc(37.5*var(--u));
    border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    gap:calc(22.5*var(--u));
    font-size:calc(9.3*var(--u));
    font-weight:600;
    letter-spacing:calc(2.31*var(--u));
    text-indent:calc(2.31*var(--u));
    text-transform:uppercase;
    text-decoration:none;
    white-space:nowrap;
    transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .btn:hover{transform:translateY(calc(-2*var(--u)))}
  .btn:active{transform:none}
  .btn--primary{background:var(--lime);color:var(--ink)}
  .btn--primary:hover{background:#D8F781}
  .btn--ghost{border:calc(1.5*var(--u)) solid var(--cream);color:var(--cream)}
  .btn--ghost:hover{background:var(--cream);color:var(--ink)}
  .btn svg{width:calc(10*var(--u));height:calc(8.5*var(--u));flex:none;overflow:visible}

  footer{
    margin-top:calc(95.5*var(--u));
    display:flex;flex-direction:column;align-items:center;
    gap:calc(6*var(--u));
  }
  footer p{
    margin:0;
    font-size:calc(6.4*var(--u));
    font-weight:500;
    letter-spacing:calc(1.49*var(--u));
    text-indent:calc(1.49*var(--u));
    text-transform:uppercase;
    color:rgba(249,244,233,.55);   /* reference measures ~.16 (1.7:1) — unreadable; .55 is 5.1:1 */
  }
  footer hr{
    width:calc(17*var(--u));height:1px;
    border:0;background:rgba(249,244,233,.35);margin:0 0 0 calc(6*var(--u));
  }
  @media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* ---------------------------------------------------------------------------
   Form pages. Same tokens as the landing composition; the stage grows with
   its content instead of being pinned to the reference's 604px height.
   --------------------------------------------------------------------------- */
.stage--form{
  --u: min(calc(100vw / 403), 1.15px);
  height:auto;
  padding:calc(56*var(--u)) 0 calc(48*var(--u));
  width:calc(340*var(--u));
}
.stage--form .logo{font-size:calc(34*var(--u));line-height:calc(25*var(--u))}
.stage--form .logo{width:calc(46*var(--u));margin-left:calc(1*var(--u))}
.stage--form .logo .bs{margin-left:calc(5*var(--u))}
.back{
  align-self:flex-start;
  margin-bottom:calc(20*var(--u));
  font-size:calc(9*var(--u));font-weight:500;
  letter-spacing:calc(1.6*var(--u));text-transform:uppercase;
  color:rgba(249,244,233,.55);text-decoration:none;
}
.back:hover{color:var(--cream)}
h2{
  margin:calc(18*var(--u)) 0 calc(6*var(--u));
  font-size:calc(26*var(--u));font-weight:600;
  line-height:calc(28*var(--u));letter-spacing:calc(-0.4*var(--u));
  text-align:center;color:var(--cream);
}
.lede{
  margin:0 0 calc(26*var(--u));
  font-size:calc(11*var(--u));font-weight:400;
  line-height:calc(16*var(--u));text-align:center;
  color:rgba(249,244,233,.62);
  max-width:calc(260*var(--u));
}
form{display:flex;flex-direction:column;gap:calc(14*var(--u));width:100%}
.field{display:flex;flex-direction:column;gap:calc(5*var(--u))}
label{
  font-size:calc(8.6*var(--u));font-weight:500;
  letter-spacing:calc(2*var(--u));text-transform:uppercase;
  color:rgba(249,244,233,.72);
}
label .opt{letter-spacing:normal;text-transform:none;color:rgba(249,244,233,.42)}
input,select{
  font-family:inherit;
  font-size:calc(13*var(--u));font-weight:400;
  color:var(--cream);
  background:rgba(249,244,233,.06);
  border:calc(1.5*var(--u)) solid rgba(249,244,233,.18);
  border-radius:calc(10*var(--u));
  padding:calc(11*var(--u)) calc(13*var(--u));
  width:100%;
  -webkit-appearance:none;appearance:none;
}
input::placeholder{color:rgba(249,244,233,.3)}
input:focus,select:focus{
  outline:none;
  border-color:var(--lime);
  background:rgba(249,244,233,.09);
}
input:-webkit-autofill{-webkit-text-fill-color:var(--cream);-webkit-box-shadow:0 0 0 100px #1d3524 inset}
select{
  /* native chevron is hidden by appearance:none, so draw one */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F9F4E9' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right calc(13*var(--u)) center;
  background-size:calc(11*var(--u)) auto;
  padding-right:calc(32*var(--u));
}
select option{background:#1d3524;color:var(--cream)}
.consent{
  display:flex;align-items:flex-start;gap:calc(9*var(--u));
  margin-top:calc(2*var(--u));
}
.consent input{
  width:calc(15*var(--u));height:calc(15*var(--u));flex:none;
  margin-top:calc(1*var(--u));border-radius:calc(4*var(--u));
  padding:0;
}
.consent input:checked{
  background:var(--lime);border-color:var(--lime);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23172C1D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.5 3.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:calc(11*var(--u)) auto;
}
.consent label{
  letter-spacing:normal;text-transform:none;
  font-size:calc(9.6*var(--u));line-height:calc(14*var(--u));
  color:rgba(249,244,233,.6);
}
.btn--submit{
  width:100%;height:calc(40*var(--u));
  margin-top:calc(6*var(--u));
  border:0;cursor:pointer;
  font-family:inherit;
}
.note{
  margin:calc(16*var(--u)) 0 0;
  font-size:calc(9*var(--u));line-height:calc(13*var(--u));
  text-align:center;color:rgba(249,244,233,.38);
}
.msg{
  margin:0 0 calc(16*var(--u));
  padding:calc(11*var(--u)) calc(13*var(--u));
  border-radius:calc(10*var(--u));
  font-size:calc(10.5*var(--u));line-height:calc(15*var(--u));
  width:100%;
}
.msg--bad{background:rgba(255,138,128,.1);border:calc(1.5*var(--u)) solid rgba(255,138,128,.45);color:#FFC4BD}
.msg--good{background:rgba(207,243,108,.1);border:calc(1.5*var(--u)) solid var(--lime);color:var(--lime)}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(10*var(--u))}
.done h2{margin-bottom:0}