:root{
    --brand:#1D6F6F;
    --brand-deep:#155757;
    --brand-light:#E1F5EE;
    --ink:#16302F;
    --muted:#6B807E;
    --line:#E4ECEA;
    --bg:#F6FAF8;
    --card:#FFFFFF;
    --err:#C2453C;
    --ok:#2E9E6B;
    --radius:16px;
    --shadow:0 1px 2px rgba(22,48,47,.04),0 12px 40px rgba(22,48,47,.08);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    background:linear-gradient(247deg,#c4ccff,#fefefe,#b0bff9,#e9efff,#cddbff);
    background-size:300% 300%;
    animation:flow 16s ease infinite;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 16px;
    line-height:1.5;
  }
  @keyframes flow{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
  }
  .shell{width:100%;max-width:640px}

  /* Header */
  .head{text-align:center;margin-bottom:24px}
  .logo{
    width:84px;height:84px;border-radius:22px;
    background:#fff;padding:14px;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    margin-bottom:16px;
  }
  .logo img{width:100%;height:100%;object-fit:contain;display:block}
  h1{
    font-family:'Fraunces',serif;font-weight:500;
    font-size:clamp(28px,6vw,40px);line-height:1.1;letter-spacing:-.02em;
  }
  h1 em{font-style:italic;color:#343c42}
  h1{color:#423c3c;text-shadow:0 2px 18px rgba(0,0,0,.22)}
  .sub{color:rgb(83 55 55 / 95%);font-size:15px;margin-top:10px;max-width:420px;margin-inline:auto;text-shadow:0 1px 10px rgba(0,0,0,.20)}

  /* Card */
  .card{
    background:var(--card);border:1px solid var(--line);
    border-radius:24px;box-shadow:var(--shadow);
    padding:clamp(20px,5vw,36px);
  }
  .step-tag{
    font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:var(--brand);margin-bottom:18px;display:flex;align-items:center;gap:8px;
  }
  .step-tag::after{content:"";flex:1;height:1px;background:var(--line)}

  .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field{display:flex;flex-direction:column;gap:7px}
  .field.full{grid-column:1/-1}
  label{font-size:13px;font-weight:500;color:var(--ink)}
  label .opt{color:var(--muted);font-weight:400}
  .hint{font-size:12px;color:var(--muted)}

  input,select,textarea{
    font-family:inherit;font-size:15px;color:var(--ink);
    background:#FBFDFC;border:1px solid var(--line);border-radius:12px;
    padding:13px 14px;width:100%;transition:border-color .15s,box-shadow .15s,background .15s;
  }
  textarea{resize:vertical;min-height:84px}
  input::placeholder,textarea::placeholder{color:#A9B7B5}
  input:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--brand);background:#fff;
    box-shadow:0 0 0 4px rgba(29,111,111,.10);
  }
  select{appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B807E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
  }

  /* Phone with flag */
  .phone{display:flex;gap:8px}
  .phone .cc{
    flex:0 0 112px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B807E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;
    font-size:14px;
  }

  /* Pill choice group */
  .pills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .pill{position:relative}
  .pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
  .pill span{
    display:block;text-align:center;padding:13px 8px;border:1px solid var(--line);
    border-radius:12px;font-size:14px;font-weight:500;color:var(--muted);
    background:#FBFDFC;cursor:pointer;transition:.15s;
  }
  .pill input:checked+span{
    border-color:var(--brand);background:var(--brand-light);color:var(--brand-deep);
    box-shadow:0 0 0 1px var(--brand) inset;
  }
  .pill input:focus-visible+span{box-shadow:0 0 0 4px rgba(29,111,111,.12)}

  /* Conditional reveal */
  .conditional{
    display:none;grid-column:1/-1;
    padding:18px;border:1px dashed var(--line);border-radius:14px;
    background:#FAFCFB;margin-top:2px;
    animation:reveal .35s ease;
  }
  .conditional.show{display:block}
  .conditional .grid{margin-top:0}
  @keyframes reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* Validation states */
  .field.invalid input,.field.invalid select,.field.invalid textarea{
    border-color:var(--err);background:#FFF7F6;
  }
  .field.valid input,.field.valid select{border-color:var(--ok)}
  .msg{font-size:12px;color:var(--err);display:none}
  .field.invalid .msg{display:block}

  /* Submit */
  .actions{margin-top:26px}
  .btn{
    width:100%;border:none;cursor:pointer;font-family:'Inter';font-size:16px;font-weight:600;
    color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-deep));
    padding:16px;border-radius:14px;transition:transform .12s,box-shadow .2s;
    box-shadow:0 10px 24px rgba(29,111,111,.25);
  }
  .btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(29,111,111,.32)}
  .btn:active{transform:translateY(0)}
  .foot{text-align:center;color:var(--muted);font-size:13px;margin-top:18px}

  /* Success */
  .done{display:none;text-align:center;padding:20px 8px}
  .done.show{display:block;animation:reveal .4s ease}
  .done .check{
    width:64px;height:64px;border-radius:50%;background:var(--brand-light);
    display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;
  }
  .done h2{font-family:'Fraunces',serif;font-weight:500;font-size:26px;margin-bottom:8px}
  .done p{color:var(--muted)}

  /* Thank-you popup */
  .overlay{
    position:fixed;inset:0;z-index:50;display:none;
    align-items:center;justify-content:center;padding:20px;
    background:rgba(40,38,60,.45);backdrop-filter:blur(6px);
  }
  .overlay.show{display:flex;animation:fade .3s ease}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .modal{
    position:relative;overflow:hidden;
    background:#fff;border-radius:26px;text-align:center;
    width:100%;max-width:420px;padding:40px 30px 32px;
    box-shadow:0 30px 80px rgba(22,48,47,.30);
    animation:pop .45s cubic-bezier(.18,.89,.32,1.28);
  }
  @keyframes pop{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
  .ty-ring{
    width:84px;height:84px;border-radius:50%;margin:0 auto 18px;
    background:var(--brand-light);display:flex;align-items:center;justify-content:center;
  }
  .ty-check{width:50px;height:50px}
  .ty-circle{fill:none;stroke:var(--brand);stroke-width:2.5;
    stroke-dasharray:151;stroke-dashoffset:151;animation:draw .5s .15s ease forwards}
  .ty-tick{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:40;stroke-dashoffset:40;animation:draw .35s .55s ease forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .modal h2{font-family:'Fraunces',serif;font-weight:500;font-size:30px;color:var(--ink);margin-bottom:8px}
  .ty-lead{color:var(--ink);font-weight:500;font-size:15px}
  .ty-msg{color:var(--muted);font-size:14.5px;margin-top:8px;max-width:300px;margin-inline:auto;line-height:1.55}
  .ty-btn{
    margin-top:26px;border:none;cursor:pointer;font-family:'Inter';font-weight:600;font-size:15px;color:#fff;
    background:linear-gradient(135deg,var(--brand),var(--brand-deep));
    padding:13px 40px;border-radius:12px;box-shadow:0 8px 20px rgba(29,111,111,.25);transition:transform .12s;
  }
  .ty-btn:hover{transform:translateY(-1px)}
  /* confetti */
  .confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:0;animation:drop 2.4s ease-in forwards}
  @keyframes drop{
    0%{opacity:0;transform:translateY(-10px) rotate(0)}
    10%{opacity:1}
    100%{opacity:0;transform:translateY(420px) rotate(540deg)}
  }

  @media (max-width:520px){
    .grid{grid-template-columns:1fr}
    .pills{grid-template-columns:1fr}
    .phone .cc{flex:0 0 96px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}body{background-position:0 50%}}