:root{
      --bg:#eef7f8;
      --bg2:#f8fbfb;
      --ink:#12333d;
      --muted:#5d6c73;
      --soft:#dfecee;
      --line:#d9e4e6;
      --card:#ffffff;
      --primary:#0d1f26;
      --accent:#39d7c7;
      --accent2:#126a61;
      --danger:#b74242;
      --shadow: 0 12px 30px rgba(23, 52, 61, .11);
      --shadow-sm: 0 7px 18px rgba(23, 52, 61, .09);
      --radius: 18px;
      --max: 520px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 52% 30%, rgba(255,255,255,.96) 0 18%, rgba(238,247,248,.80) 48%, rgba(230,242,244,.92) 100%),
        linear-gradient(180deg, var(--bg2), var(--bg));
      overflow-x:hidden;
    }

    .app{
      min-height:100dvh;
      position:relative;
      display:flex;
      flex-direction:column;
      isolation:isolate;
    }

    .progress-track{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:5px;
      background:rgba(12, 34, 42, .06);
      z-index:30;
    }
    .progress-fill{
      height:100%;
      width:0%;
      background:linear-gradient(90deg, var(--accent), #8ff3e7);
      border-radius:0 999px 999px 0;
      transition:width .32s ease;
    }

    .topbar{
      width:100%;
      min-height:76px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px 18px 10px;
      position:relative;
      z-index:5;
    }

    .brand{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      user-select:none;
    }
    .brand img{
      width:158px;
      height:auto;
      display:block;
    }

    .back-btn{
      position:absolute;
      left:16px;
      top:25px;
      width:43px;
      height:43px;
      border:0;
      border-radius:999px;
      background:rgba(255,255,255,.82);
      box-shadow:0 5px 16px rgba(20,44,52,.09);
      color:#314950;
      display:none;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:transform .2s ease, opacity .2s ease;
    }
    .back-btn:hover{ transform:translateX(-2px); }
    .back-btn svg{ width:22px; height:22px; }

    .shell{
      width:min(var(--max), calc(100% - 36px));
      margin:0 auto;
      padding:44px 0 32px;
      position:relative;
      z-index:2;
      flex:1;
      display:flex;
      align-items:center;
    }

    .watermark{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      opacity:.35;
      overflow:hidden;
    }
    .watermark::before{
      content:"";
      width:430px;
      height:430px;
      border:42px solid rgba(30,96,99,.055);
      border-radius:50%;
      position:absolute;
      left:50%;
      top:48%;
      transform:translate(-50%, -50%);
    }
    .watermark::after{
      content:"☾";
      position:absolute;
      left:50%;
      top:45%;
      transform:translate(-50%, -50%);
      font-size:390px;
      color:rgba(30,96,99,.06);
      font-family:Georgia, serif;
      line-height:1;
    }

    .screen{
      width:100%;
      display:none;
      animation:fadeUp .28s ease both;
    }
    .screen.active{ display:block; }

    @keyframes fadeUp{
      from{ opacity:0; transform:translateY(12px); }
      to{ opacity:1; transform:translateY(0); }
    }

    .eyebrow{
      font-size:13px;
      line-height:1.4;
      font-weight:800;
      color:var(--accent2);
      letter-spacing:.11em;
      text-transform:uppercase;
      margin:0 0 12px;
    }

    h1{
      font-size:clamp(36px, 7vw, 54px);
      line-height:1.08;
      letter-spacing:-.04em;
      margin:0 0 18px;
      color:#176a5f;
      font-weight:780;
    }
    .question-title{
      font-size:clamp(32px, 6.5vw, 48px);
      line-height:1.12;
      letter-spacing:-.04em;
      margin:0 0 16px;
      color:#176a5f;
      font-weight:780;
    }

    .subtext{
      color:#4c5c63;
      font-size:18px;
      line-height:1.43;
      margin:0 0 28px;
      max-width:560px;
      font-weight:500;
    }
    .microline{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:0 0 26px;
    }
    .pill{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(25,70,76,.09);
      color:#2f5a60;
      font-size:13px;
      font-weight:700;
      padding:8px 11px;
      border-radius:999px;
      box-shadow:0 4px 12px rgba(12, 48, 55, .05);
    }

    .primary-btn{
      width:100%;
      min-height:68px;
      border:0;
      border-radius:999px;
      background:linear-gradient(180deg, #1f1f1f 0%, #040404 100%);
      color:white;
      font-size:21px;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 10px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
      transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    .primary-btn:hover{ transform:translateY(-1px); box-shadow:0 13px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12); }
    .primary-btn:active{ transform:translateY(1px); }
    .primary-btn[disabled]{ opacity:.65; cursor:not-allowed; transform:none; }

    .options{
      display:grid;
      gap:16px;
      margin-top:30px;
    }
    .option-btn{
      width:100%;
      border:1px solid rgba(30, 66, 74, .08);
      border-radius:16px;
      background:rgba(255,255,255,.92);
      box-shadow:var(--shadow-sm);
      text-align:left;
      padding:18px 58px 18px 20px;
      min-height:68px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:relative;
      cursor:pointer;
      transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .option-btn:hover,
    .option-btn:focus-visible{
      transform:translateY(-1px);
      border-color:rgba(23,106,95,.22);
      box-shadow:0 14px 28px rgba(23, 52, 61, .12);
      outline:0;
    }
    .option-main{
      display:block;
      font-size:20px;
      color:#242a2d;
      font-weight:780;
      line-height:1.15;
    }
    .option-sub{
      display:block;
      margin-top:5px;
      font-size:15px;
      color:#6b7a84;
      line-height:1.24;
      font-weight:600;
    }
    .option-btn::after{
      content:"";
      width:17px;
      height:17px;
      border-top:3px solid #6f777b;
      border-right:3px solid #6f777b;
      position:absolute;
      right:23px;
      top:50%;
      transform:translateY(-50%) rotate(45deg);
      opacity:.9;
    }

    .form-card{
      background:rgba(255,255,255,.70);
      border:1px solid rgba(30,66,74,.08);
      border-radius:24px;
      box-shadow:var(--shadow);
      padding:18px;
      backdrop-filter:blur(12px);
    }
    .field{ margin-bottom:15px; }
    label{
      display:block;
      color:#293e45;
      font-size:14px;
      font-weight:800;
      margin:0 0 7px;
    }
    input{
      width:100%;
      min-height:58px;
      border-radius:14px;
      border:1px solid rgba(30,66,74,.13);
      background:#fff;
      padding:0 16px;
      font-size:17px;
      color:#182b32;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
      outline:0;
      transition:border-color .16s ease, box-shadow .16s ease;
    }
    input:focus{
      border-color:rgba(23,106,95,.48);
      box-shadow:0 0 0 4px rgba(57,215,199,.15);
    }
    .error{
      color:var(--danger);
      font-size:13px;
      font-weight:700;
      margin:7px 0 0;
      min-height:18px;
    }
    .form-card .primary-btn{ margin-top:5px; }

    .success-card{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(30,66,74,.08);
      border-radius:26px;
      box-shadow:var(--shadow);
      padding:26px 20px;
      text-align:left;
      backdrop-filter:blur(12px);
    }
    .check{
      width:62px;
      height:62px;
      border-radius:50%;
      background:rgba(57,215,199,.18);
      display:grid;
      place-items:center;
      margin:0 0 20px;
    }
    .check svg{ width:34px; height:34px; color:#126a61; }

    .notice{
      color:#53666e;
      font-size:14px;
      line-height:1.45;
      margin:20px 0 0;
      font-weight:600;
    }
    .footer-note{
      width:min(760px, calc(100% - 36px));
      margin:0 auto;
      padding:0 0 calc(20px + env(safe-area-inset-bottom));
      color:rgba(57,78,86,.72);
      font-size:12px;
      line-height:1.45;
      text-align:center;
      position:relative;
      z-index:2;
    }

    .step-indicator{
      color:#708087;
      font-size:14px;
      font-weight:800;
      margin:0 0 10px;
    }

    .loading-dot{
      display:inline-flex;
      gap:4px;
      vertical-align:middle;
      margin-left:8px;
    }
    .loading-dot span{
      width:5px;
      height:5px;
      border-radius:50%;
      background:currentColor;
      opacity:.7;
      animation:bounce .75s infinite alternate;
    }
    .loading-dot span:nth-child(2){ animation-delay:.12s; }
    .loading-dot span:nth-child(3){ animation-delay:.24s; }
    @keyframes bounce{ to{ transform:translateY(-4px); opacity:1; } }



    .transition-layer{
      position:fixed;
      inset:0;
      z-index:25;
      pointer-events:none;
      display:grid;
      place-items:center;
      opacity:0;
      transition:opacity .18s ease;
      background:rgba(238,247,248,.18);
      backdrop-filter:blur(1px);
    }
    .transition-layer.active{ opacity:1; }
    .transition-card{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 15px;
      border-radius:999px;
      background:rgba(255,255,255,.88);
      border:1px solid rgba(30,66,74,.08);
      box-shadow:0 12px 30px rgba(23,52,61,.10);
      color:#176a5f;
      font-size:13px;
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .sleep-spinner{
      width:18px;
      height:18px;
      border-radius:50%;
      border:3px solid rgba(23,106,95,.16);
      border-top-color:#39d7c7;
      animation:spin .7s linear infinite;
    }
    @keyframes spin{ to{ transform:rotate(360deg); } }
    .option-btn.selected{
      border-color:rgba(23,106,95,.38);
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(236,255,252,.96));
      box-shadow:0 15px 32px rgba(23,106,95,.14);
      transform:translateY(-1px);
    }
    .option-btn.saving{ pointer-events:none; }

    @media (min-width: 900px){
      .shell{
        align-items:center;
        padding-top:10px;
        transform:translateY(-18px);
      }
      .topbar{ min-height:96px; padding-top:36px; }
    }

    @media (max-width: 600px){
      .topbar{
        min-height:70px;
        padding:20px 16px 8px;
      }
      .brand img{ width:145px; }
      .back-btn{
        left:12px;
        top:18px;
        width:40px;
        height:40px;
      }
      .shell{
        width:min(100% - 32px, var(--max));
        padding:22px 0 24px;
        align-items:flex-start;
      }
      h1{
        font-size:40px;
        margin-bottom:14px;
      }
      .question-title{
        font-size:34px;
        margin-bottom:13px;
      }
      .subtext{
        font-size:16px;
        margin-bottom:22px;
      }
      .microline{ margin-bottom:20px; }
      .pill{ font-size:12px; padding:7px 9px; }
      .primary-btn{
        min-height:62px;
        font-size:19px;
      }
      .options{
        gap:13px;
        margin-top:24px;
      }
      .option-btn{
        min-height:64px;
        border-radius:15px;
        padding:16px 52px 16px 17px;
      }
      .option-main{ font-size:18px; }
      .option-sub{ font-size:13px; margin-top:4px; }
      .option-btn::after{
        width:15px;
        height:15px;
        right:20px;
        border-width:2.5px;
      }
      .watermark::before{
        width:320px;
        height:320px;
        border-width:34px;
        top:47%;
      }
      .watermark::after{
        font-size:292px;
        top:44%;
      }
      .form-card{ padding:15px; border-radius:22px; }
      input{ min-height:56px; font-size:16px; }
      .footer-note{ font-size:11px; }
    }

    @media (max-width: 370px){
      h1{ font-size:36px; }
      .question-title{ font-size:31px; }
      .subtext{ font-size:15px; }
      .option-main{ font-size:17px; }
    }
    
    
    /* Logo size fix - add at bottom */
.topbar .brand img {
  width: 190px !important;
  max-width: 190px !important;
  height: auto !important;
}

/* Mobile logo size */
@media (max-width: 600px) {
  .topbar .brand img {
    width: 165px !important;
    max-width: 165px !important;
    height: auto !important;
  }
}
    
    

    /* Offer redirect loading screen */
    .offer-loading-layer{
      position:fixed;
      inset:0;
      z-index:80;
      display:none;
      align-items:center;
      justify-content:center;
      padding:24px;
      background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,.95) 0 18%, rgba(238,247,248,.92) 50%, rgba(226,241,243,.98) 100%),
        linear-gradient(180deg, var(--bg2), var(--bg));
      color:var(--ink);
    }
    .offer-loading-layer.active{ display:flex; }
    .offer-loading-card{
      width:min(520px, 100%);
      background:rgba(255,255,255,.82);
      border:1px solid rgba(30,66,74,.09);
      border-radius:28px;
      box-shadow:0 22px 60px rgba(23,52,61,.14);
      padding:30px 24px;
      text-align:left;
      backdrop-filter:blur(14px);
      position:relative;
      overflow:hidden;
    }
    .offer-loading-card::before{
      content:"";
      position:absolute;
      width:240px;
      height:240px;
      border-radius:50%;
      right:-110px;
      top:-120px;
      background:rgba(57,215,199,.16);
      filter:blur(2px);
    }
    .offer-loading-top{
      display:flex;
      align-items:center;
      gap:14px;
      margin-bottom:18px;
      position:relative;
      z-index:1;
    }
    .offer-loader-ring{
      width:46px;
      height:46px;
      border-radius:50%;
      border:4px solid rgba(23,106,95,.13);
      border-top-color:#39d7c7;
      animation:spin .78s linear infinite;
      flex:0 0 auto;
    }
    .offer-loading-title{
      margin:0;
      font-size:25px;
      line-height:1.12;
      letter-spacing:-.03em;
      color:#176a5f;
      font-weight:850;
    }
    .offer-loading-subtitle{
      margin:6px 0 0;
      color:#5d6c73;
      font-size:14px;
      line-height:1.35;
      font-weight:650;
    }
    .offer-trust-line{
      margin:16px 0 0;
      position:relative;
      z-index:1;
      color:#176a5f;
      font-size:13px;
      line-height:1.45;
      font-weight:800;
      letter-spacing:.01em;
      padding:11px 13px;
      border-radius:999px;
      background:rgba(57,215,199,.10);
      border:1px solid rgba(57,215,199,.20);
      width:fit-content;
      max-width:100%;
    }
    .single-type-box{
      min-height:56px;
      display:flex;
      align-items:center;
      gap:11px;
      padding:14px 16px;
      border-radius:17px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(30,66,74,.09);
      color:#354b52;
      font-size:15px;
      line-height:1.35;
      font-weight:800;
      margin-top:16px;
      position:relative;
      z-index:1;
      box-shadow:0 12px 30px rgba(23,52,61,.07);
      transition:opacity .18s ease, transform .18s ease;
    }
    .single-type-box.is-changing{
      opacity:.2;
      transform:translateY(3px);
    }
    .single-type-dot{
      width:9px;
      height:9px;
      border-radius:50%;
      background:rgba(57,215,199,.95);
      box-shadow:0 0 0 7px rgba(57,215,199,.12);
      flex:0 0 auto;
    }
    .single-type-text{
      min-width:0;
      flex:0 1 auto;
    }
    .single-type-cursor{
      width:2px;
      height:19px;
      background:#176a5f;
      display:inline-block;
      animation:cursorBlink .7s step-end infinite;
      flex:0 0 auto;
    }
    @keyframes cursorBlink{ 50%{ opacity:0; } }
    .offer-loading-note{
      margin:18px 0 0;
      color:#667980;
      font-size:12px;
      line-height:1.4;
      text-align:center;
      font-weight:650;
      position:relative;
      z-index:1;
    }

    @media (max-width: 600px){
      .offer-loading-layer{ padding:18px; align-items:center; }
      .offer-loading-card{ border-radius:24px; padding:24px 18px; }
      .offer-loader-ring{ width:40px; height:40px; border-width:3px; }
      .offer-loading-title{ font-size:22px; }
      .offer-trust-line{ font-size:12px; border-radius:18px; }
      .single-type-box{ min-height:52px; font-size:13px; padding:13px 13px; }
    }


/* Final progress + loader refinements */
.step-indicator{
  display:grid !important;
  gap:9px !important;
  margin:0 0 16px !important;
  color:#176a5f !important;
}
.progress-copy{
  display:block !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#176a5f !important;
}
.inline-progress{
  display:block !important;
  width:100% !important;
  height:8px !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:rgba(23,106,95,.10) !important;
  box-shadow:inset 0 0 0 1px rgba(23,106,95,.04) !important;
}
.inline-progress span{
  display:block !important;
  height:100% !important;
  border-radius:inherit !important;
  background:linear-gradient(90deg, var(--accent), #8ff3e7) !important;
  transition:width .32s ease !important;
}
.single-type-box{
  font-weight:720 !important;
  letter-spacing:-.01em !important;
}
.single-type-text{
  font-weight:720 !important;
}
.offer-preload-frame{
  position:fixed !important;
  width:1px !important;
  height:1px !important;
  left:-9999px !important;
  top:-9999px !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
}
@media (max-width:600px){
  .step-indicator{ gap:8px !important; margin-bottom:15px !important; }
  .progress-copy{ font-size:12px !important; }
  .inline-progress{ height:7px !important; }
}


/* Lead trust capsule - centered under lead headline */
.lead-trust-capsule{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:fit-content !important;
  max-width:100% !important;
  margin:-5px auto 18px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  background:rgba(57,215,199,.10) !important;
  border:1px solid rgba(23,106,95,.14) !important;
  color:#176a5f !important;
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:750 !important;
  text-align:center !important;
  box-shadow:0 7px 18px rgba(23,52,61,.06) !important;
}

.lead-trust-capsule strong{
  font-weight:900 !important;
}

.trust-dot{
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:#39d7c7 !important;
  box-shadow:0 0 0 5px rgba(57,215,199,.13) !important;
  flex:0 0 auto !important;
}

.lead-copy{
  margin-top:0 !important;
}

@media (max-width:600px){
  .lead-trust-capsule{
    font-size:12px !important;
    padding:7px 12px !important;
    margin:-3px auto 16px !important;
  }
}


/* Lead screen compact final fix */
#leadScreen .question-title{
  font-size:clamp(31px, 5.7vw, 44px) !important;
  line-height:1.08 !important;
  margin-bottom:14px !important;
}

#leadScreen .lead-trust-capsule{
  font-size:12px !important;
  padding:7px 12px !important;
  margin:-2px auto 17px !important;
  letter-spacing:.01em !important;
  box-shadow:0 5px 14px rgba(23,52,61,.055) !important;
}

#leadScreen .trust-dot{
  width:7px !important;
  height:7px !important;
  box-shadow:0 0 0 4px rgba(57,215,199,.12) !important;
}

#leadScreen .lead-copy{
  font-size:16px !important;
  line-height:1.36 !important;
  margin:0 0 19px !important;
  max-width:520px !important;
}

#leadScreen .form-card{
  padding:15px 17px 13px !important;
  border-radius:22px !important;
}

#leadScreen .field{
  margin-bottom:10px !important;
}

#leadScreen label{
  font-size:13px !important;
  margin-bottom:6px !important;
}

#leadScreen input{
  min-height:51px !important;
  border-radius:13px !important;
  font-size:16px !important;
}

#leadScreen .error{
  min-height:9px !important;
  margin-top:3px !important;
  font-size:12px !important;
  line-height:1.1 !important;
}

#leadScreen .primary-btn{
  min-height:58px !important;
  font-size:18px !important;
  margin-top:2px !important;
}

#leadScreen .notice{
  margin-top:10px !important;
  font-size:11px !important;
  line-height:1.35 !important;
}

@media (min-width:900px){
  #leadScreen{
    transform:translateY(-6px) !important;
  }
}

@media (max-width:600px){
  #leadScreen .question-title{
    font-size:34px !important;
    line-height:1.1 !important;
    margin-bottom:13px !important;
  }

  #leadScreen .lead-trust-capsule{
    font-size:11px !important;
    padding:7px 11px !important;
    margin:-2px auto 15px !important;
  }

  #leadScreen .lead-copy{
    font-size:15px !important;
    line-height:1.36 !important;
    margin-bottom:17px !important;
  }

  #leadScreen .form-card{
    padding:14px 15px 12px !important;
  }

  #leadScreen .field{
    margin-bottom:9px !important;
  }

  #leadScreen input{
    min-height:50px !important;
  }

  #leadScreen .primary-btn{
    min-height:56px !important;
    font-size:18px !important;
  }
}