/* ---------------------------------------------------------
     TOKENS
  --------------------------------------------------------- */
  :root{
    --bg:#fbd9e1;
    --bg-soft:#fdeaef;
    --surface:#fffaf8;
    --surface-2:#ffffff;
    --ink:#2a0f06;
    --ink-soft:#8a6259;
    --ink-faint:#b98f85;
    --accent:#d4818e;
    --accent-deep:#b25a6c;
    --accent-soft:#f6d3d9;
    --line:rgba(42,15,6,0.12);
    --good:#4f8f6b;
    --good-soft:#dcefe3;
    --warn:#c98a3a;
    --warn-soft:#f6e6cf;
    --alert:#c1614b;
    --alert-soft:#f5dcd5;
    --shadow:0 24px 48px -24px rgba(42,15,6,0.35), 0 2px 8px -2px rgba(42,15,6,0.12);
    --shadow-sm:0 6px 16px -8px rgba(42,15,6,0.25);
    --radius-lg:28px;
    --radius-md:18px;
    --radius-sm:12px;
    --font-display:'Outfit',ui-sans-serif,system-ui,sans-serif;
    --font-body:'Karla',ui-sans-serif,system-ui,sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#1c1210;
      --bg-soft:#241714;
      --surface:#2a1b17;
      --surface-2:#32211c;
      --ink:#f7e8e3;
      --ink-soft:#cba89d;
      --ink-faint:#8f6d63;
      --accent:#e79aa6;
      --accent-deep:#f0b4be;
      --accent-soft:#4a2a2e;
      --line:rgba(247,232,227,0.14);
      --good:#7fbf9c;
      --good-soft:#25352c;
      --warn:#e3b96a;
      --warn-soft:#3a301f;
      --alert:#e08972;
      --alert-soft:#3c2620;
      --shadow:0 24px 48px -24px rgba(0,0,0,0.6), 0 2px 8px -2px rgba(0,0,0,0.4);
      --shadow-sm:0 6px 16px -8px rgba(0,0,0,0.5);
    }
  }
  :root[data-theme="dark"]{
    --bg:#1c1210;
    --bg-soft:#241714;
    --surface:#2a1b17;
    --surface-2:#32211c;
    --ink:#f7e8e3;
    --ink-soft:#cba89d;
    --ink-faint:#8f6d63;
    --accent:#e79aa6;
    --accent-deep:#f0b4be;
    --accent-soft:#4a2a2e;
    --line:rgba(247,232,227,0.14);
    --good:#7fbf9c;
    --good-soft:#25352c;
    --warn:#e3b96a;
    --warn-soft:#3a301f;
    --alert:#e08972;
    --alert-soft:#3c2620;
    --shadow:0 24px 48px -24px rgba(0,0,0,0.6), 0 2px 8px -2px rgba(0,0,0,0.4);
    --shadow-sm:0 6px 16px -8px rgba(0,0,0,0.5);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:var(--font-display);
    color:var(--ink);
    margin:0;
    text-wrap:balance;
    letter-spacing:-0.01em;
  }
  p{ margin:0; }
  button{ font-family:inherit; }
  ::selection{ background:var(--accent-soft); }
  :focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  /* ---------------------------------------------------------
     BACKDROP
  --------------------------------------------------------- */
  .backdrop{
    position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  }
  .backdrop::before,.backdrop::after{
    content:""; position:absolute; border-radius:50%; filter:blur(60px);
    background:radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 70%);
    opacity:0.9;
  }
  .backdrop::before{ width:520px; height:520px; top:-160px; right:-140px; }
  .backdrop::after{ width:460px; height:460px; bottom:-180px; left:-140px;
    background:radial-gradient(circle at 60% 40%, var(--bg-soft), transparent 70%); }

  /* ---------------------------------------------------------
     APP SHELL
  --------------------------------------------------------- */
  #app{
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; flex-direction:column;
  }
  header.topbar{
    display:flex; align-items:center; gap:16px;
    padding:18px clamp(16px,4vw,40px) 10px;
  }
  .logo{
    display:flex; align-items:center; gap:6px;
    font-family:var(--font-display); font-weight:800; font-size:1.15rem;
    color:var(--ink); white-space:nowrap;
  }
  .logo svg{ width:16px; height:16px; flex:none; }
  .back-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex:none; transition:transform .15s ease, background .15s ease;
  }
  .back-btn:hover{ background:var(--surface-2); }
  .back-btn:active{ transform:scale(0.92); }
  .back-btn[hidden]{ visibility:hidden; }
  .back-btn svg{ width:18px; height:18px; }

  .progress-track{
    flex:1; display:flex; gap:6px; height:6px;
  }
  .progress-seg{
    flex:1; background:var(--line); border-radius:99px; overflow:hidden;
  }
  .progress-seg > i{
    display:block; height:100%; width:0%; background:var(--accent);
    border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1);
  }
  .step-count{
    font-family:var(--font-display); font-weight:600; font-size:0.78rem;
    color:var(--ink-soft); flex:none; letter-spacing:0.02em;
  }

  main.stage{
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:20px clamp(16px,5vw,40px) 140px;
  }
  .card{
    width:100%; max-width:560px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:clamp(28px,5vw,44px);
    animation:rise .45s cubic-bezier(.16,1,.3,1);
  }
  @keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

  .eyebrow{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-display); font-weight:700; font-size:0.72rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-deep);
    margin-bottom:10px;
  }
  .eyebrow svg{ width:12px; height:12px; }
  h2.q{ font-size:clamp(1.35rem,3.4vw,1.7rem); line-height:1.2; margin-bottom:6px; }
  .sub{ color:var(--ink-soft); font-size:0.96rem; line-height:1.5; margin-bottom:24px; }

  /* option list */
  .options{ display:flex; flex-direction:column; gap:10px; }
  .opt{
    display:flex; align-items:center; gap:14px;
    padding:15px 16px; border-radius:var(--radius-md);
    background:var(--surface-2); border:1.5px solid var(--line);
    cursor:pointer; text-align:left; width:100%;
    transition:border-color .15s ease, background .15s ease, transform .1s ease;
  }
  .opt:hover{ border-color:var(--accent); }
  .opt:active{ transform:scale(0.99); }
  .opt.selected{ border-color:var(--accent-deep); background:var(--accent-soft); }
  .opt-icon{
    width:38px; height:38px; border-radius:50%; background:var(--bg-soft);
    display:flex; align-items:center; justify-content:center; flex:none;
    color:var(--accent-deep);
  }
  .opt.selected .opt-icon{ background:var(--accent-deep); color:var(--surface-2); }
  .opt-icon svg{ width:19px; height:19px; }
  .opt-text{ flex:1; }
  .opt-title{ font-weight:700; font-size:0.98rem; color:var(--ink); display:block; }
  .opt-desc{ font-size:0.83rem; color:var(--ink-soft); margin-top:1px; display:block; }
  .opt-check{
    width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line);
    flex:none; display:flex; align-items:center; justify-content:center; color:transparent;
    transition:all .15s ease;
  }
  .opt.selected .opt-check{ background:var(--accent-deep); border-color:var(--accent-deep); color:var(--surface-2); }
  .opt-check svg{ width:13px; height:13px; }
  .opt.multi .opt-check{ border-radius:7px; }

  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .grid-2 .opt{ flex-direction:column; text-align:center; padding:20px 12px; gap:10px; }
  .grid-2 .opt-title{ font-size:0.92rem; }

  /* footer CTA */
  footer.ctabar{
    position:fixed; left:0; right:0; bottom:0; z-index:2;
    display:flex; justify-content:center;
    padding:16px clamp(16px,5vw,40px) 22px;
    background:linear-gradient(to top, var(--bg) 55%, transparent);
  }
  .ctabar-inner{ width:100%; max-width:560px; display:flex; flex-direction:column; gap:8px; }
  .btn{
    font-family:var(--font-display); font-weight:700; font-size:1rem;
    border-radius:99px; border:none; cursor:pointer;
    padding:16px 24px; display:flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .12s ease, opacity .15s ease, box-shadow .15s ease;
  }
  .btn:active{ transform:scale(0.98); }
  .btn-primary{ background:var(--ink); color:var(--surface); box-shadow:var(--shadow-sm); }
  .btn-primary:disabled{ opacity:0.42; cursor:not-allowed; }
  .btn-primary svg{ width:16px; height:16px; }
  .btn-ghost{ background:transparent; color:var(--ink-soft); font-size:0.85rem; padding:6px; }
  .consent{
    display:flex; gap:10px; align-items:flex-start; font-size:0.78rem; color:var(--ink-soft);
    line-height:1.4; margin-top:18px;
  }
  .consent input{ margin-top:2px; accent-color:var(--accent-deep); width:16px; height:16px; flex:none; }
  .consent a{ color:var(--accent-deep); }

  /* sliders */
  .bio-field{ margin-bottom:30px; }
  .bio-label-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
  .bio-label{ font-family:var(--font-display); font-weight:700; font-size:0.92rem; color:var(--ink); }
  .bio-value{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--accent-deep); font-variant-numeric:tabular-nums; }
  .bio-value span{ font-size:0.85rem; font-weight:600; color:var(--ink-soft); margin-left:2px; }
  .slider-wrap{ position:relative; height:28px; }
  .slider-track{
    position:absolute; top:10px; left:0; right:0; height:8px; border-radius:99px;
    background:var(--line);
  }
  .slider-fill{
    position:absolute; top:10px; left:0; height:8px; border-radius:99px;
    background:var(--accent); pointer-events:none;
  }
  input[type=range]{
    -webkit-appearance:none; appearance:none; width:100%; height:28px;
    background:transparent; outline:none; margin:0; cursor:grab;
    position:relative; z-index:2;
  }
  input[type=range]::-webkit-slider-runnable-track{ height:8px; border-radius:99px; background:transparent; }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:26px; height:26px; border-radius:50%;
    background:var(--accent-deep); border:4px solid var(--surface-2);
    box-shadow:0 3px 10px rgba(42,15,6,0.35); cursor:grab;
    margin-top:-9px;
    transition:transform .1s ease;
  }
  input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.12); cursor:grabbing; }
  input[type=range]::-moz-range-track{ height:8px; border-radius:99px; background:transparent; }
  input[type=range]::-moz-range-thumb{
    width:26px; height:26px; border-radius:50%; background:var(--accent-deep);
    border:4px solid var(--surface-2); box-shadow:0 3px 10px rgba(42,15,6,0.35); cursor:grab;
  }

  /* IMC gauge */
  .gauge-wrap{ margin:8px 0 28px; }
  .gauge-bar{
    position:relative; height:14px; border-radius:99px; margin-bottom:10px;
    background:linear-gradient(90deg, #9dbfe0 0%, var(--good) 28%, var(--good) 52%, var(--warn) 68%, var(--alert) 100%);
  }
  .gauge-marker{
    position:absolute; top:-7px; width:4px; height:28px; border-radius:99px;
    background:var(--ink); transform:translateX(-50%);
    box-shadow:0 0 0 3px var(--surface);
  }
  .gauge-scale{ display:flex; justify-content:space-between; font-size:0.7rem; color:var(--ink-faint); }
  .imc-result{
    display:flex; align-items:center; gap:16px; background:var(--bg-soft);
    border-radius:var(--radius-md); padding:18px 20px; margin-bottom:16px;
  }
  .imc-number{ font-family:var(--font-display); font-weight:800; font-size:2.1rem; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
  .imc-cat{ font-family:var(--font-display); font-weight:700; font-size:0.85rem; padding:3px 10px; border-radius:99px; display:inline-block; margin-top:4px; }
  .disclaimer{ font-size:0.76rem; color:var(--ink-faint); line-height:1.5; }

  /* loading */
  .loading-wrap{ text-align:center; }
  .sparkle-spin{ width:52px; height:52px; margin:0 auto 20px; color:var(--accent-deep); animation:spin 2.2s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg);} }
  .load-rows{ display:flex; flex-direction:column; gap:16px; margin:26px 0 8px; text-align:left; }
  .load-row-top{ display:flex; justify-content:space-between; font-size:0.85rem; font-weight:600; margin-bottom:6px; }
  .load-track{ height:6px; border-radius:99px; background:var(--line); overflow:hidden; }
  .load-track > i{ display:block; height:100%; width:0%; background:var(--accent-deep); border-radius:99px; transition:width .3s linear; }
  .proof-strip{
    margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
    font-size:0.78rem; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; gap:8px;
  }

  /* lead form */
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:0.78rem; font-weight:700; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; }
  .field input{
    width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
    background:var(--surface-2); color:var(--ink); font-size:1rem; font-family:var(--font-body);
  }
  .field input:focus{ border-color:var(--accent-deep); }
  .field-error{ font-size:0.76rem; color:var(--alert); margin-top:5px; min-height:14px; }

  /* summary */
  .summary-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
  .summary-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg-soft); border-radius:var(--radius-sm); }
  .summary-row .opt-icon{ width:32px; height:32px; }
  .summary-row .opt-icon svg{ width:16px; height:16px; }
  .summary-k{ font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
  .summary-v{ font-weight:700; font-size:0.92rem; }
  .includes{ margin-top:22px; }
  .includes-title{ font-family:var(--font-display); font-weight:700; font-size:0.9rem; margin-bottom:10px; }
  .includes ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .includes li{ display:flex; gap:10px; align-items:flex-start; font-size:0.9rem; color:var(--ink-soft); }
  .includes li svg{ width:15px; height:15px; color:var(--good); flex:none; margin-top:2px; }

  /* pricing */
  .plans{ display:flex; flex-direction:column; gap:12px; }
  .plan{
    position:relative; border:1.5px solid var(--line); border-radius:var(--radius-md);
    padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px;
    cursor:pointer; background:var(--surface-2);
  }
  .plan.selected{ border-color:var(--accent-deep); background:var(--accent-soft); }
  .plan-badge{
    position:absolute; top:-11px; left:18px; background:var(--ink); color:var(--surface);
    font-family:var(--font-display); font-weight:700; font-size:0.66rem; letter-spacing:0.04em;
    text-transform:uppercase; padding:4px 10px; border-radius:99px;
  }
  .plan-name{ font-weight:700; font-size:0.95rem; }
  .plan-sub{ font-size:0.78rem; color:var(--ink-soft); margin-top:2px; }
  .plan-price{ text-align:right; font-family:var(--font-display); }
  .plan-price b{ font-size:1.15rem; }
  .plan-price .was{ font-size:0.72rem; color:var(--ink-faint); text-decoration:line-through; display:block; }
  .radio-dot{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); flex:none; margin-right:2px; }
  .plan.selected .radio-dot{ border-color:var(--accent-deep); border-width:6px; }
  .guarantee{ display:flex; gap:10px; align-items:center; margin-top:18px; font-size:0.8rem; color:var(--ink-soft); }
  .guarantee svg{ width:20px; height:20px; color:var(--accent-deep); flex:none; }

  /* welcome / thanks */
  .center-art{ display:flex; justify-content:center; margin-bottom:22px; }
  .center-art svg{ width:64px; height:64px; }
  .stat-row{ display:flex; gap:10px; margin-top:22px; }
  .stat{ flex:1; background:var(--bg-soft); border-radius:var(--radius-sm); padding:14px 10px; text-align:center; }
  .stat b{ display:block; font-family:var(--font-display); font-size:1.15rem; }
  .stat span{ font-size:0.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; }

  .placeholder-note{
    margin-top:16px; font-size:0.7rem; color:var(--ink-faint); border-top:1px dashed var(--line); padding-top:10px;
  }