:root{
      --bg:#fbfaf7;
      --text:#171717;
      --muted:#77736d;
      --line:#ded9d1;
      --accent:#5f45d8;
      --accent-soft:#eeeaff;
    }
    *{box-sizing:border-box}
    html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
    body{min-height:100%}
    button,input{font:inherit}
    button{touch-action:manipulation}
    .app{
      width:min(100%,760px);
      margin:0 auto;
      padding:24px 20px 56px;
    }
    .topbar{
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:36px;
      margin-bottom:12px;
    }
    .progress-wrap{
      display:flex;
      align-items:center;
      gap:12px;
      width:min(100%,440px);
    }
    .progress{
      flex:1;
      height:3px;
      background:var(--line);
      border-radius:999px;
      overflow:hidden;
    }
    .progress span{
      display:block;
      height:100%;
      width:0;
      background:var(--text);
      transition:width .25s ease;
    }
    .progress-text{
      min-width:42px;
      text-align:right;
      color:var(--muted);
      font-size:12px;
    }
    .screen{display:none}
    .screen.active{
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:72vh;
      animation:fadeIn .22s ease both;
    }
    @keyframes fadeIn{
      from{opacity:0;transform:translateY(6px)}
      to{opacity:1;transform:none}
    }
    .hero{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      min-height:78vh;
    }
    h1,h2,p{margin-top:0}
    h1{
      font-size:clamp(48px,10vw,82px);
      line-height:.92;
      letter-spacing:-.06em;
      max-width:680px;
      margin:0 auto 24px;
    }
    h2{
      font-size:clamp(36px,7vw,58px);
      line-height:1;
      letter-spacing:-.05em;
      max-width:680px;
      margin:0 auto 22px;
      text-align:center;
    }
    .lead{
      color:var(--muted);
      font-size:18px;
      line-height:1.5;
      max-width:560px;
      margin:0 auto 28px;
      text-align:center;
    }
    .micro{
      color:var(--muted);
      font-size:14px;
      line-height:1.45;
      max-width:520px;
      margin:18px auto 0;
      text-align:center;
    }
    .stack{
      width:min(100%,520px);
      margin:30px auto 0;
      display:grid;
      gap:18px;
    }
    .stepper-card{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:8px 0 18px;
      border-bottom:1px solid var(--line);
    }
    .stepper-label strong{
      display:block;
      font-size:20px;
      letter-spacing:-.02em;
    }
    .stepper-label span{
      display:block;
      color:var(--muted);
      font-size:13px;
      margin-top:4px;
    }
    .stepper{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .round{
      width:44px;height:44px;
      border-radius:999px;
      border:1px solid var(--line);
      background:transparent;
      color:var(--text);
      font-size:24px;
      cursor:pointer;
    }
    .count{
      width:36px;
      text-align:center;
      font-size:24px;
      font-weight:850;
    }
    .slider-box{
      width:min(100%,560px);
      margin:28px auto 0;
      padding:0;
      border:0;
      background:transparent;
    }
    .slider-top{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:58px;
      margin-bottom:10px;
      gap:14px;
      text-align:center;
    }
    .slider-top strong{
      font-size:16px;
      font-weight:700;
    }
    .slider-number{
      width:58px;height:58px;
      border-radius:18px;
      background:var(--accent-soft);
      color:var(--accent);
      display:grid;
      place-items:center;
      font-size:26px;
      font-weight:900;
      flex-shrink:0;
    }
    input[type="range"]{
      width:100%;
      min-height:48px;
      accent-color:var(--accent);
      background:transparent;
    }
    .slider-label{
      min-height:52px;
      margin-top:10px;
      font-size:18px;
      font-weight:750;
      line-height:1.35;
      text-align:center;
    }
    .slider-scale{
      display:flex;
      justify-content:space-between;
      color:var(--muted);
      font-size:11px;
      margin-top:0;
    }
    .choice-grid{
      width:min(100%,520px);
      margin:30px auto 0;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .choice-card{
      min-height:120px;
      padding:22px 18px;
      border-radius:18px;
      border:1px solid var(--line);
      background:transparent;
      color:var(--text);
      cursor:pointer;
      text-align:center;
    }
    .choice-card strong{
      display:block;
      font-size:24px;
      margin-bottom:6px;
    }
    .choice-card span{
      display:block;
      color:var(--muted);
      font-size:13px;
      line-height:1.35;
    }
    .choice-card.selected{
      border-color:var(--accent);
      background:var(--accent-soft);
    }
    .person-badge{
      align-self:center;
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 10px;
      border-radius:999px;
      background:var(--accent-soft);
      color:var(--accent);
      font-size:12px;
      font-weight:800;
      margin:0 auto 16px;
    }
    .benefits{
      width:min(100%,560px);
      margin:28px auto 0;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .benefit-card{
      min-height:72px;
      padding:14px 16px;
      border:1px solid var(--line);
      border-radius:16px;
      display:flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      background:transparent;
    }
    .benefit-card input{
      width:20px;height:20px;
      accent-color:var(--accent);
      flex-shrink:0;
    }
    .benefit-card span{
      font-weight:750;
      font-size:15px;
    }
    .benefit-card:has(input:checked){
      border-color:var(--accent);
      background:var(--accent-soft);
    }
    .actions{
      width:min(100%,560px);
      margin:34px auto 0;
      display:flex;
      justify-content:center;
      gap:12px;
    }
    .btn{
      min-height:50px;
      padding:0 22px;
      border-radius:999px;
      border:1px solid var(--line);
      font-weight:800;
      cursor:pointer;
    }
    .btn.primary{
      background:var(--text);
      border-color:var(--text);
      color:white;
    }
    .btn.secondary{
      background:transparent;
      color:var(--text);
    }
    .result{
      text-align:center;
      width:min(100%,620px);
      margin:0 auto;
    }
    .result-kicker{
      color:var(--muted);
      font-size:15px;
      font-weight:700;
      margin-bottom:14px;
    }
    .money{
      font-size:clamp(92px,21vw,158px);
      line-height:.86;
      letter-spacing:-.075em;
      font-weight:950;
      margin:28px 0 24px;
      font-variant-numeric:tabular-nums;
    }
    .result-copy{
      color:var(--muted);
      max-width:540px;
      margin:0 auto 28px;
      font-size:18px;
      line-height:1.55;
    }
    .range-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-top:24px;
    }
    .range-card{
      padding:18px;
      border-top:1px solid var(--line);
      text-align:left;
    }
    .range-card span{
      display:block;
      color:var(--muted);
      font-size:12px;
      margin-bottom:5px;
    }
    .range-card strong{
      font-size:30px;
      letter-spacing:-.03em;
    }
    .validation{
      text-align:center;
      color:#a13d3d;
      font-size:13px;
      margin-top:12px;
    }
    .hidden{display:none!important}
    @media(max-width:540px){
      .app{padding:18px 16px 42px}
      .screen.active{min-height:68vh}
      .hero{min-height:74vh}
      .choice-grid,.benefits,.range-grid{grid-template-columns:1fr}
      .slider-top{justify-content:center}
      .money{font-size:92px}
    }
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    }
.version-tag{
  margin-top:28px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.02em;
}