*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#f7f8f4;color:#17231d;font-family:Inter,Arial,Helvetica,sans-serif}
header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;border-bottom:1px solid #e1e7df;background:#f7f8f4;position:sticky;top:0;z-index:10}
.logo{font-size:23px;font-weight:750;letter-spacing:-.7px}.nav{display:flex;gap:22px;align-items:center}.nav a{color:#56625a;text-decoration:none;font-size:14px}.nav .cta{background:#17231d;color:#fff;padding:11px 19px;border-radius:999px}
main{min-height:calc(100vh - 78px);padding:50px 20px}.container{width:min(1050px,100%);margin:auto;text-align:center}
h1{font-size:43px;line-height:1.12;letter-spacing:-1.3px;margin:0 0 15px}h2{font-size:29px;margin:0 0 13px}
.sub{font-size:17px;color:#657069;line-height:1.65;max-width:720px;margin:0 auto 30px}
.btn{display:inline-block;border:0;background:#17231d;color:#fff;border-radius:11px;padding:15px 30px;font-size:16px;cursor:pointer;text-decoration:none}.btn.light{background:#e9eee8;color:#17231d}
.card{background:#fff;border:1px solid #dce3da;border-radius:20px;padding:30px;box-shadow:0 12px 38px rgba(23,35,29,.07)}
.progress{display:flex;justify-content:center;gap:0;max-width:680px;margin:0 auto 35px}.step{display:flex;align-items:center;gap:7px;color:#7b847e;font-size:11px}.step:not(:last-child):after{content:"";width:55px;height:2px;background:#d5ddd5;margin:0 9px}.step.active{color:#17231d;font-weight:700}.dot{width:22px;height:22px;border:1px solid #aab5ac;border-radius:50%;display:grid;place-items:center;background:#fff}.active .dot{background:#17654c;color:#fff;border-color:#17654c}
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:850px;margin:0 auto 25px}.option{border:1px solid #d7ded6;background:#fff;border-radius:13px;padding:18px;text-align:left;cursor:pointer;font-size:15px;color:#17231d}.option:hover{border-color:#8e9b91}.option.selected{background:#17231d;color:#fff;border-color:#17231d}
.count{font-size:14px;color:#68736b;margin-bottom:18px}.back{display:inline-block;color:#667069;text-decoration:none;font-size:14px;margin-bottom:20px}
.question-card{max-width:820px;margin:auto}.question-number{font-size:13px;color:#718078;margin-bottom:12px}.answers{display:grid;gap:11px;max-width:620px;margin:25px auto}.answer{border:1px solid #d7ded6;background:#fff;border-radius:11px;padding:15px 18px;text-align:left;cursor:pointer}.answer.selected{border:2px solid #17654c;background:#f0f5f0}
.not-sure{max-width:620px;margin:0 auto 22px}.not-sure button{width:100%;border:1px dashed #aeb8b0;background:transparent;color:#5e6962;border-radius:11px;padding:13px;cursor:pointer}.not-sure button.selected{background:#e9eee8;border-style:solid;color:#17231d}
.bottles{display:flex;justify-content:center;align-items:end;gap:30px;flex-wrap:wrap;margin:35px 0 40px}.product{width:215px;text-align:center}.bottle{width:108px;height:150px;border-radius:17px 17px 23px 23px;margin:0 auto 17px;position:relative;box-shadow:0 14px 25px rgba(0,0,0,.18)}.bottle:before{content:"";position:absolute;width:67px;height:28px;top:-24px;left:20px;border-radius:7px 7px 3px 3px;background:inherit;box-shadow:inset 0 -3px rgba(0,0,0,.12)}.bottle:after{content:"urbanSMARTbox";position:absolute;left:10px;right:10px;top:57px;background:rgba(255,255,255,.84);color:#17231d;padding:9px 2px;font-size:10px;font-weight:700;border-radius:5px}.yellow{background:linear-gradient(135deg,#f1c62b,#c99d00)}.blue{background:linear-gradient(135deg,#3d83c6,#245486)}.grey{background:linear-gradient(135deg,#747875,#4d514f)}
.product h3{margin:0 0 6px;font-size:20px}.product p{margin:0;color:#69746d;font-size:13px;line-height:1.5}
.form{max-width:720px;margin:25px auto;text-align:left}.field{margin-bottom:16px}.field label{display:block;font-size:14px;font-weight:650;margin-bottom:7px}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1px solid #ccd5cc;border-radius:9px;font-size:15px;background:#fff;color:#17231d}.field textarea{min-height:85px;resize:vertical}.field input.invalid{border-color:#b33}.hint{font-size:12px;color:#77827b;margin-top:5px}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.phone-row{display:grid;grid-template-columns:155px 1fr;gap:9px}
.pay-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.pay{border:1px solid #d2dad2;background:#fff;border-radius:12px;padding:16px;cursor:pointer;text-align:center;font-weight:650}.pay.selected{border:2px solid #17231d;background:#edf1ec}.check{display:flex;gap:9px;align-items:center;margin:12px 0 22px;font-size:14px;color:#59645d}
.faq{text-align:left;max-width:820px;margin:25px auto}.faq details{background:#fff;border:1px solid #dce3da;border-radius:12px;padding:16px 18px;margin:10px 0}.faq summary{cursor:pointer;font-weight:650}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:left;max-width:900px;margin:25px auto}.contact-info{background:#fff;border:1px solid #dce3da;border-radius:18px;padding:25px}.contact-info p{line-height:1.6;color:#657069}
.compiled-box-image{max-width:900px;margin:26px auto 28px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid #dce3da;box-shadow:0 14px 35px rgba(23,35,29,.10)}
.compiled-box-image img{display:block;width:100%;height:auto}
.compiled-box-image.compact{max-width:760px;margin:22px auto 30px}
.personal-use-note{max-width:620px;margin:20px auto 24px;padding:17px 20px;border-radius:13px;background:#f5f8f3;border:1px solid #d8e2d5;color:#4f5d53;font-size:14px;line-height:1.6}
.personal-use-note strong{color:#17654c;font-size:16px}
@media(max-width:720px){.compiled-box-image{margin:20px auto}.compiled-box-image.compact{margin:18px auto 24px}}

.footer{padding:30px;text-align:center;color:#7a847d;font-size:12px}
.notice{font-size:13px;color:#758078;margin-top:15px;line-height:1.5}
@media(max-width:720px){header{padding:0 18px}.logo{font-size:20px}.nav a:not(.cta){display:none}h1{font-size:32px}.options{grid-template-columns:1fr 1fr}.two,.contact-grid{grid-template-columns:1fr}.phone-row{grid-template-columns:130px 1fr}.pay-options{grid-template-columns:1fr}.progress{overflow:auto;justify-content:flex-start}.step:not(:last-child):after{width:22px;margin:0 5px}.product{width:180px}}

<style>
/* Goals instruction: highlighted at the bottom */
.goal-bottom-note{
  margin:28px auto 20px;
  max-width:720px;
  padding:15px 20px;
  border:2px solid #c71920;
  border-radius:12px;
  color:#c71920;
  background:#fff8f8;
  font-weight:750;
  font-size:16px;
  animation:goalBlink 1.25s ease-in-out infinite;
}
@keyframes goalBlink{
  0%,100%{opacity:1;box-shadow:0 0 0 rgba(199,25,32,0)}
  50%{opacity:.62;box-shadow:0 0 16px rgba(199,25,32,.18)}
}
/* Assessment intro + five-level wellness bars */
.assessment-intro{max-width:760px;margin:0 auto 34px;padding:28px 32px;border-radius:18px;background:linear-gradient(135deg,#fffaf1,#f1f7f2);border:1px solid #e3e9e2;box-shadow:0 8px 24px rgba(23,35,29,.06);text-align:center}
.assessment-intro h2{margin:0 0 10px;font-family:Georgia,serif;font-size:28px;line-height:1.25;color:#17231d}
.assessment-intro p{margin:8px 0;color:#536059;line-height:1.55}
.assessment-intro p strong{color:#17231d}
.answers{display:flex;flex-direction:column;gap:10px;max-width:650px;margin:25px auto}
.answer{border:1px solid rgba(23,35,29,.16);border-radius:11px;padding:15px 18px;text-align:left;cursor:pointer;min-height:52px;box-sizing:border-box;color:#17231d;font-weight:650;transition:filter .18s,transform .18s,box-shadow .18s,outline .18s}
.answer span{position:relative;z-index:2}
.answer.level1{width:22%;background:#f4d7d7}
.answer.level2{width:42%;background:#f1d9d4}
.answer.level3{width:62%;background:#f4e3c8}
.answer.level4{width:82%;background:#dbe9d8}
.answer.level5{width:100%;background:#cfe5dc}
.answer:hover{filter:brightness(1.03);transform:translateX(3px)}
.answer.selected{outline:3px solid #17231d;outline-offset:2px;box-shadow:0 5px 14px rgba(23,35,29,.18)}
.not-sure button{border:3px solid #111;background:#fff;border-radius:11px;box-shadow:0 4px 0 #111;padding:14px 18px;font-weight:700;cursor:pointer}
.not-sure button.selected{background:#f1f1f1}

@media(max-width:720px){
  .answer.level1{width:40%}.answer.level2{width:55%}.answer.level3{width:70%}.answer.level4{width:85%}.answer.level5{width:100%}
  .goal-bottom-note{font-size:14px}
}
</style>

.basic-profile{max-width:900px;margin:24px auto 28px;text-align:left;padding:24px 26px}
.basic-profile h2{font-size:24px;text-align:center;margin-bottom:6px}
.profile-sub{text-align:center;color:#68736c;font-size:14px;margin:0 0 22px}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.profile-grid label,.gender-field{display:block}
.profile-grid label>span,.gender-field>span{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.profile-grid input,.profile-grid select{width:100%;height:46px;border:1px solid #cfd8cf;border-radius:10px;background:#fbfcfa;padding:0 13px;font-size:15px;color:#17231d;outline:none}
.profile-grid input:focus,.profile-grid select:focus{border-color:#7b927f;box-shadow:0 0 0 3px rgba(90,120,96,.10)}
.weight-row{display:flex;gap:8px}
.weight-row input{flex:1}
.weight-row select{width:82px}
.gender-field{grid-column:1 / -1}
.gender-options{display:flex;gap:10px;flex-wrap:wrap}
.gender-btn{flex:1;min-width:150px;height:46px;border:1px solid #cfd8cf;background:#fff;border-radius:10px;color:#334039;font-size:14px;font-weight:600;cursor:pointer;transition:.2s}
.gender-btn:hover{border-color:#829787}
.gender-btn.selected{background:#edf4ee;border:2px solid #45654d;color:#24432b;box-shadow:0 4px 12px rgba(36,67,43,.10)}
@media(max-width:700px){
  .profile-grid{grid-template-columns:1fr}
  .gender-field{grid-column:auto}
  .gender-options{flex-direction:column}
  .gender-btn{width:100%}
}

/* v14: compact personal details + red goals heading */
.basic-profile{
  max-width:900px;
  margin:12px auto 22px;
  padding:16px 20px;
  background:#fff;
  border:1px solid #e6e9e5;
  border-radius:14px;
  box-shadow:0 4px 16px rgba(23,35,29,.05);
}
.basic-profile h2{
  font-size:18px;
  margin:0 0 3px;
}
.profile-sub{
  font-size:12px;
  margin:0 0 14px;
}
.profile-grid{
  display:grid;
  grid-template-columns:0.7fr 0.9fr 1.5fr;
  gap:12px;
  align-items:end;
}
.profile-grid label>span,.gender-field>span{
  font-size:12px;
  margin-bottom:5px;
}
.profile-grid input,.profile-grid select{
  height:36px;
  border-radius:8px;
  padding:0 9px;
  font-size:13px;
}
.weight-row{gap:5px}
.weight-row select{width:60px}
.gender-field{grid-column:auto}
.gender-options{display:flex;gap:6px}
.gender-btn{
  min-width:0;
  flex:1;
  height:36px;
  padding:0 8px;
  border-radius:8px;
  font-size:12px;
}
.goals-heading{
  max-width:900px;
  margin:0 auto 16px;
  padding:15px 20px;
  background:#a92f2f;
  border-radius:14px;
  color:#fff;
  text-align:center;
  box-shadow:0 5px 16px rgba(169,47,47,.16);
}
.goals-heading h1{
  color:#fff;
  margin:0 0 5px;
  font-size:27px;
}
.goals-heading .count{
  color:#fff;
  font-size:13px;
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
@media(max-width:760px){
  .profile-grid{grid-template-columns:1fr 1fr}
  .gender-field{grid-column:1 / -1}
}
@media(max-width:520px){
  .profile-grid{grid-template-columns:1fr}
  .gender-field{grid-column:auto}
  .gender-options{flex-direction:row}
  .gender-btn{font-size:11px}
  .goals-heading h1{font-size:22px}
}

/* v15 compact Page 2 profile controls */
.basic-profile{
  margin:8px auto 34px !important;
  padding:10px 16px !important;
  border-radius:11px !important;
}
.basic-profile h2{font-size:16px !important;margin-bottom:2px !important}
.basic-profile .profile-sub{font-size:11px !important;margin-bottom:9px !important}
.profile-grid{
  grid-template-columns:120px 140px 1fr !important;
  gap:9px !important;
}
.profile-grid label>span,.gender-field>span{
  font-size:11px !important;
  margin-bottom:3px !important;
}
.profile-grid input,.profile-grid select{
  height:30px !important;
  font-size:12px !important;
  border-radius:7px !important;
}
.weight-row{gap:4px !important}
.weight-row select{width:50px !important}
.gender-options{gap:5px !important}
.gender-btn{
  height:30px !important;
  min-width:0 !important;
  padding:0 7px !important;
  font-size:11px !important;
  border-radius:7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
}
.tick-box{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #9aa39d;
  border-radius:3px;
  font-size:10px;
  line-height:1;
  color:transparent;
  background:#fff;
}
.gender-btn.selected .tick-box{
  color:#fff;
  background:#26734d;
  border-color:#26734d;
}
.gender-btn.selected{
  background:#fff !important;
  border:1px solid #26734d !important;
  color:#24432b !important;
  box-shadow:none !important;
}
/* Give clear separation before the red goals section */
.goals-heading{
  margin-top:0 !important;
  margin-bottom:16px !important;
}

/* v16: final compact Page 2 layout */
.basic-profile{
  max-width:860px !important;
  margin:6px auto 0 !important;
  padding:9px 14px !important;
  background:#fff !important;
  border:1px solid #e7ebe7 !important;
  border-radius:10px !important;
  box-shadow:0 2px 9px rgba(23,35,29,.045) !important;
}
.basic-profile h2{font-size:15px !important}
.basic-profile .profile-sub{font-size:10px !important;margin-bottom:7px !important}
.profile-grid{
  grid-template-columns:105px 125px 1fr !important;
  gap:8px !important;
}
.profile-grid label>span,.gender-field>span{font-size:10px !important}
.profile-grid input{
  height:27px !important;
  padding:0 8px !important;
  font-size:11px !important;
}
.weight-row{gap:0 !important}
.gender-options{gap:4px !important}
.gender-btn{
  height:27px !important;
  font-size:10px !important;
  padding:0 6px !important;
}
.tick-box{
  width:12px !important;
  height:12px !important;
  font-size:8px !important;
}
.goals-heading{
  max-width:900px !important;
  margin:70px auto 16px !important;
  padding:14px 18px !important;
  background:#a92f2f !important;
}
.goals-heading h1{font-size:25px !important}
.goals-heading .count{font-size:12px !important}
@media(max-width:760px){
  .profile-grid{grid-template-columns:1fr 1fr !important}
  .gender-field{grid-column:1 / -1 !important}
}
@media(max-width:520px){
  .profile-grid{grid-template-columns:1fr 1fr !important}
  .gender-field{grid-column:1 / -1 !important}
  .goals-heading{margin-top:45px !important}
}

/* v17: circular question progress, positioned left of question/options */
.assessment-layout{
  max-width:1100px;
  margin:18px auto 0;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.question-progress-circle{
  display:flex;
  justify-content:center;
  padding-top:20px;
}
.progress-ring{
  --progress:8.333%;
  width:116px;
  height:116px;
  border-radius:50%;
  background:conic-gradient(#2d714d var(--progress), #e8eee9 0);
  display:grid;
  place-items:center;
  position:relative;
  box-shadow:0 5px 16px rgba(45,113,77,.12);
}
.progress-ring::before{
  content:"";
  position:absolute;
  width:94px;
  height:94px;
  border-radius:50%;
  background:#fff;
}
.progress-ring-inner{
  position:relative;
  z-index:1;
  text-align:center;
  color:#24352b;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.progress-ring-inner strong{
  font-size:22px;
  font-weight:800;
}
.progress-ring-inner span{
  font-size:10px;
  margin-top:4px;
  color:#758078;
  letter-spacing:.3px;
}
.question-area{
  min-width:0;
}
@media(max-width:700px){
  .assessment-layout{
    grid-template-columns:78px minmax(0,1fr);
    gap:14px;
  }
  .question-progress-circle{padding-top:15px}
  .progress-ring{width:68px;height:68px}
  .progress-ring::before{width:54px;height:54px}
  .progress-ring-inner strong{font-size:14px}
  .progress-ring-inner span{font-size:8px;margin-top:2px}
}

/* v18: assessment fits a desktop 100% viewport and ring aligns with options 2–3 */
html, body { min-height: 100%; }
body { overflow-y: auto; }

@media (min-width: 801px){
  .assessment-layout{
    max-width:1120px !important;
    margin:8px auto 0 !important;
    grid-template-columns:125px minmax(0,1fr) !important;
    gap:20px !important;
    min-height:0 !important;
    align-items:start !important;
  }
  .question-progress-circle{
    padding-top:112px !important;
    align-items:flex-start !important;
  }
  .progress-ring{
    width:100px !important;
    height:100px !important;
  }
  .progress-ring::before{
    width:80px !important;
    height:80px !important;
  }
  .progress-ring-inner strong{font-size:20px !important}
  .question-area{min-height:0 !important}
}

/* Compact the assessment page so the complete question and choices fit on one normal desktop screen. */
.assessment-layout .question-area h1,
.assessment-layout .question-area h2{
  margin-top:4px !important;
  margin-bottom:8px !important;
}
.assessment-layout .question-area .question,
.assessment-layout .question-area .question-text{
  margin-bottom:10px !important;
}
.assessment-layout .question-area .options,
.assessment-layout .question-area .choices{
  gap:6px !important;
}
.assessment-layout .question-area .option,
.assessment-layout .question-area .choice,
.assessment-layout .question-area label{
  min-height:38px !important;
  padding:7px 11px !important;
}
@media (min-width: 801px) and (max-height: 900px){
  header{padding-top:14px !important;padding-bottom:14px !important}
  main{padding-top:18px !important;padding-bottom:24px !important}
  .assessment-layout{margin-top:2px !important}
  .assessment-layout .question-progress-circle{padding-top:96px !important}
  .assessment-layout .question-area .option,
  .assessment-layout .question-area .choice,
  .assessment-layout .question-area label{
    min-height:34px !important;
    padding:5px 10px !important;
  }
}

/* v34: compact assessment cards so the question progress circle and all choices stay visible without page scrolling */
.question-card{
  max-width:760px !important;
  padding:20px !important;
}
.assessment-layout .question-area h1{
  font-size:23px !important;
  line-height:1.25 !important;
  margin-bottom:6px !important;
}
.assessment-layout .question-area .sub{
  font-size:13px !important;
  margin:6px 0 10px !important;
}
.assessment-layout .answers{
  gap:7px !important;
  margin:12px auto !important;
  max-width:600px !important;
}
.assessment-layout .answer{
  min-height:38px !important;
  padding:8px 14px !important;
  font-size:13px !important;
}
.assessment-layout .not-sure{
  margin-top:8px !important;
}
.assessment-layout #next{
  margin-top:8px !important;
  padding:10px 18px !important;
}
@media (min-width:801px){
  .assessment-layout{
    grid-template-columns:90px minmax(0,1fr) !important;
    gap:14px !important;
  }
  .assessment-layout .question-progress-circle{
    padding-top:84px !important;
  }
  .assessment-layout .progress-ring{
    width:78px !important;
    height:78px !important;
  }
  .assessment-layout .progress-ring::before{
    width:62px !important;
    height:62px !important;
  }
  .assessment-layout .progress-ring-inner strong{
    font-size:16px !important;
  }
  .assessment-layout .progress-ring-inner span{
    font-size:8px !important;
    margin-top:2px !important;
  }
}
@media (min-width:801px) and (max-height:900px){
  .assessment-intro{
    padding:18px 24px !important;
    margin-bottom:16px !important;
  }
  .assessment-intro h2{font-size:22px !important}
  .assessment-intro p{font-size:13px !important; margin:5px 0 !important}
  .assessment-layout .question-progress-circle{padding-top:64px !important; transform:translateY(4cm) !important}
  .assessment-layout .answer{min-height:34px !important; padding:6px 12px !important}
}

.footer-links{margin-top:6px;font-size:13px}.footer-links a{color:inherit;text-decoration:underline}.privacy-consent{display:block;margin:16px 0;color:#56645c;font-size:14px;line-height:1.5}.privacy-consent input{margin-right:8px;vertical-align:middle}.privacy-consent a{color:#17654c;text-decoration:underline}

/* v44: ranked wellness priorities on goals page */
.goals-layout{
  max-width:1100px;
  margin:0 auto 22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:24px;
  align-items:start;
}
.goal-picker{min-width:0}
.goal-picker-title{font-size:16px;font-weight:750;color:#24332a;margin:0 0 12px}
.goal-picker .options{max-width:none;margin:0}
.priority-panel{
  background:#fff;
  border:1px solid #dce3da;
  border-radius:18px;
  padding:20px;
  box-shadow:0 8px 24px rgba(23,35,29,.06);
  position:sticky;
  top:18px;
}
.priority-title{font-size:18px;font-weight:800;color:#17231d;margin-bottom:5px}
.priority-subtitle{font-size:12px;color:#68736c;line-height:1.45;margin-bottom:14px}
.priority-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.priority-item{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  min-height:48px;
  padding:7px 8px;
  border:1px solid #dfe6df;
  border-radius:12px;
  background:#f8faf8;
}
.rank{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#17654c;color:#fff;font-size:13px;font-weight:800;
}
.priority-name{font-size:13px;font-weight:650;color:#253229;line-height:1.25}
.priority-actions{display:flex;gap:5px}
.move-btn{
  width:34px;height:34px;border:1px solid #cbd5cc;border-radius:8px;background:#fff;
  color:#24332a;font-size:17px;font-weight:700;cursor:pointer;touch-action:manipulation;
}
.move-btn:hover:not(:disabled){background:#edf4ee;border-color:#8ca493}
.move-btn:disabled{opacity:.28;cursor:not-allowed}
.priority-empty{font-size:12px;color:#7a847d;text-align:center;padding:18px 8px;border:1px dashed #ccd6cd;border-radius:12px}
.goal-bottom-note{margin-top:15px}
@media(max-width:850px){
  .goals-layout{grid-template-columns:1fr;gap:18px}
  .priority-panel{position:static}
}
@media(max-width:520px){
  .goals-layout{gap:14px}
  .priority-panel{padding:15px;border-radius:14px}
  .priority-title{font-size:16px}
  .priority-subtitle{font-size:11px}
  .priority-item{grid-template-columns:30px minmax(0,1fr) auto;min-height:46px;padding:6px}
  .rank{width:28px;height:28px}
  .priority-name{font-size:12px}
  .move-btn{width:32px;height:32px;font-size:16px}
}

/* v45: goal priority visual hierarchy + serious prompt + animated selection */
.goals-heading .goals-serious-note{
  max-width:760px;
  margin:4px auto 12px;
  color:#f7fbf8;
  font-size:14px;
  line-height:1.5;
  opacity:.96;
}
.goals-heading .goals-serious-note strong{font-weight:800;color:#fff}
.goals-layout{align-items:start}
.priority-panel{display:flex;flex-direction:column}
.priority-list{min-height:206px}
.priority-item{transition:transform .25s ease, opacity .25s ease, filter .25s ease, box-shadow .25s ease}
/* The visual hierarchy deliberately makes #1 and #2 stand out most. */
.priority-item.priority-1{
  background:linear-gradient(135deg,#fff4b8,#ffe47a) !important;
  border-color:#e0bd35 !important;
  box-shadow:0 4px 12px rgba(180,140,20,.12) !important;
  transform:none;
}
.priority-item.priority-1 .rank{background:#d39f00 !important;color:#fff !important;border-color:#d39f00 !important}
.priority-item.priority-1 .priority-name{font-weight:850;color:#4f3c00}
.priority-item.priority-2{
  background:#eef5df !important;
  border-color:#c9d9b0 !important;
  box-shadow:0 4px 12px rgba(74,104,45,.10) !important;
}
.priority-item.priority-2 .rank{background:#6e8f55 !important;color:#fff !important;border-color:#6e8f55 !important}
/* #1 and #2 have equal-intensity star-like pulses, alternating every second. */
.priority-item.priority-1,
.priority-item.priority-2{position:relative;overflow:visible;animation:priorityStarPulse 2s ease-in-out infinite;}
.priority-item.priority-2{animation-delay:1s;}
.priority-item.priority-1::after,
.priority-item.priority-2::after{content:'✦';position:absolute;right:7px;top:-9px;font-size:14px;line-height:1;opacity:0;transform:scale(.55) rotate(-12deg);animation:priorityStar 2s ease-in-out infinite;pointer-events:none;}
.priority-item.priority-2::after{animation-delay:1s;}
@keyframes priorityStarPulse{
  0%, 42%, 100%{filter:saturate(1);box-shadow:0 4px 12px rgba(180,140,20,.12);}
  12%{filter:saturate(1.18);box-shadow:0 0 0 3px rgba(255,215,70,.18),0 0 22px rgba(255,215,70,.62),0 7px 18px rgba(180,140,20,.20);}
  24%{filter:saturate(1);box-shadow:0 0 0 1px rgba(255,215,70,.08),0 4px 14px rgba(180,140,20,.14);}
}
@keyframes priorityStar{
  0%, 42%, 100%{opacity:0;transform:scale(.55) rotate(-12deg);}
  12%{opacity:1;transform:scale(1.35) rotate(8deg);}
  24%{opacity:0;transform:scale(.75) rotate(24deg);}
}

.priority-item.priority-3,
.priority-item.priority-4{
  background:#f1f2ef !important;
  border-color:#dfe2dd !important;
  box-shadow:none !important;
  opacity:.74;
  filter:saturate(.55);
}
.priority-item.priority-3 .rank,
.priority-item.priority-4 .rank{background:#aeb5ae !important;color:#fff !important;border-color:#aeb5ae !important}
.priority-item.priority-3 .priority-name,
.priority-item.priority-4 .priority-name{font-weight:550;color:#667067}
.priority-panel .priority-subtitle{margin-bottom:10px}

/* Put Continue directly beneath the priority card, visually tying it to the completed ranking. */
.goals-layout + #continue{
  display:block;
  margin:14px 0 0 auto;
}

.goal-flight{
  position:fixed !important;
  z-index:9999 !important;
  margin:0 !important;
  pointer-events:none !important;
  background:#fff !important;
  color:#17231d !important;
  border:2px solid #d39f00 !important;
  border-radius:13px !important;
  padding:18px !important;
  text-align:left !important;
  font-size:15px !important;
  box-shadow:0 15px 35px rgba(23,35,29,.22) !important;
  transform-origin:center center;
  transition:transform .62s cubic-bezier(.2,.75,.2,1),opacity .62s ease;
}
.priority-panel::after{
  content:'Your first 2 priorities are highlighted to make your main focus easy to see.';
  display:block;
  margin-top:10px;
  padding:9px 11px;
  border-radius:10px;
  background:#fafbf8;
  color:#68736c;
  font-size:11px;
  line-height:1.4;
  text-align:center;
}
@media(max-width:720px){
  .goals-heading .goals-serious-note{font-size:12px;line-height:1.45;margin:5px auto 10px}
  .goals-layout + #continue{width:100%;margin:12px 0 0}
  .priority-list{min-height:0}
  .priority-item.priority-1{transform:none}
  .goal-flight{padding:13px !important;font-size:13px !important}
}


/* v46: keep every priority row the same physical size and alternate an equal-strength glow between #1 and #2. */
.priority-list{align-items:start;}
.priority-item{
  height:48px;
  min-height:48px;
  box-sizing:border-box;
  align-self:start;
  transform:none !important;
}
.priority-item.priority-1,
.priority-item.priority-2{
  animation-duration:2s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.priority-item.priority-1{
  animation-name:priorityOnePulse;
  animation-delay:0s;
}
.priority-item.priority-2{
  animation-name:priorityTwoPulse;
  animation-delay:0s;
}
@keyframes priorityOnePulse{
  0%,49.99%{
    box-shadow:0 0 0 2px rgba(211,159,0,.14),0 0 22px 6px rgba(211,159,0,.34) !important;
    filter:brightness(1.04);
  }
  50%,100%{
    box-shadow:0 4px 12px rgba(180,140,20,.10) !important;
    filter:brightness(1);
  }
}
@keyframes priorityTwoPulse{
  0%,49.99%{
    box-shadow:0 4px 12px rgba(74,104,45,.10) !important;
    filter:brightness(1);
  }
  50%,100%{
    box-shadow:0 0 0 2px rgba(110,143,85,.14),0 0 22px 6px rgba(110,143,85,.34) !important;
    filter:brightness(1.04);
  }
}
@media(max-width:520px){
  .priority-item{height:46px;min-height:46px;}
}
@media(prefers-reduced-motion:reduce){
  .priority-item.priority-1,.priority-item.priority-2{animation:none;}
}

/* v48: refined priority ordering, stronger #2, expanded final ranking panel, and premium home hero */
.priority-item.priority-2{
  background:#dfecc9 !important;
  border-color:#b8cf95 !important;
}
.priority-item.priority-2 .rank{
  background:#5b7d3f !important;
  border-color:#5b7d3f !important;
}
.priority-item.priority-2 .priority-name{color:#354c27 !important;font-weight:780}

/* When all four priorities are chosen, let the ranking panel occupy roughly half the content area. */
.goals-layout.all-selected{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:26px;
}
.goals-layout.all-selected .priority-panel{
  width:100%;
  box-sizing:border-box;
  padding:24px;
}
.goals-layout.all-selected .priority-item{
  height:64px;
  min-height:64px;
  padding:10px 12px;
  border-radius:14px;
  grid-template-columns:42px minmax(0,1fr) auto;
}
.goals-layout.all-selected .rank{width:38px;height:38px;font-size:14px}
.goals-layout.all-selected .priority-name{font-size:15px}
.goals-layout.all-selected .move-btn{width:38px;height:38px}
.goals-layout.all-selected .priority-list{gap:4px;min-height:0}

/* v49: keep ranked priorities tightly stacked. Each newly selected priority
   sits directly beneath the previous rank, with <0.5 cm visual separation. */
.priority-list{
  display:flex !important;
  flex-direction:column;
  gap:4px !important;
  margin:0 !important;
}
.priority-item{
  flex:0 0 auto;
  margin:0 !important;
}
.goals-layout.all-selected + #continue{margin-top:16px}

/* Premium but concise corporate-friendly home page. */
.home-hero{
  position:relative;
  min-height:500px;
  padding:64px 0 54px;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(300px,.98fr);
  gap:42px;
  align-items:center;
  overflow:hidden;
}
.home-hero:before{
  content:'';
  position:absolute;
  inset:10px -8vw 10px -8vw;
  z-index:-2;
  background:radial-gradient(circle at 70% 45%,rgba(215,25,32,.09),transparent 32%),linear-gradient(135deg,#fbfcfa,#eef4ef);
  border-radius:36px;
}
.home-copy{max-width:610px}
.home-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;
  background:#fff;border:1px solid #dce5dd;
  color:#345243;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 5px 16px rgba(23,35,29,.05)
}
.home-hero h1{font-size:clamp(44px,6vw,72px);line-height:.98;letter-spacing:-.045em;margin:18px 0 16px;color:#17231d}
.home-hero .sub{max-width:560px;font-size:18px;line-height:1.55;color:#536159;margin:0 0 24px}
.home-points{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 28px;padding:0;list-style:none}
.home-points li{padding:9px 12px;background:#fff;border:1px solid #dfe7e0;border-radius:10px;color:#35463c;font-size:13px;font-weight:650}
.home-visual{position:relative;display:flex;justify-content:center;align-items:center}
.home-visual img{width:min(100%,500px);filter:drop-shadow(0 22px 28px rgba(23,35,29,.14));transform:rotate(-2deg);transition:transform .25s ease}
.home-visual img:hover{transform:rotate(0deg) translateY(-4px)}
.home-corp{margin-top:18px;color:#68736c;font-size:12px;line-height:1.45}
@media(max-width:850px){
  .goals-layout.all-selected{grid-template-columns:1fr}
  .home-hero{grid-template-columns:1fr;gap:20px;min-height:0;padding:48px 0 44px}
  .home-copy{max-width:none}
  .home-visual{order:-1}
  .home-visual img{width:min(82%,430px)}
}
@media(max-width:520px){
  .home-hero h1{font-size:42px}
  .home-hero .sub{font-size:16px}
  .home-points{gap:7px}
  .home-points li{font-size:12px;padding:8px 10px}
  .home-visual img{width:88%}
}

/* v50: keep all ranked priorities tightly stacked, including #4 directly below #3. */
.priority-list{gap:4px !important; row-gap:4px !important;}
.priority-item.priority-4{margin-top:0 !important;}
@media(max-width:520px){.priority-list{gap:4px !important;row-gap:4px !important;}}

/* v51: enforce strict visual ranking order and animate each new selection to its own row. */
.priority-list{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:4px !important;
  row-gap:4px !important;
}
.priority-list .priority-item{position:relative !important;order:initial !important;margin:0 !important;}
.priority-list .priority-item[data-priority="1"]{order:1 !important;}
.priority-list .priority-item[data-priority="2"]{order:2 !important;}
.priority-list .priority-item[data-priority="3"]{order:3 !important;}
.priority-list .priority-item[data-priority="4"]{order:4 !important;}


/* v51: after the 4th priority is selected, celebrate the completed set for 3 seconds
   before expanding the ranking panel. */
.goals-layout.all-four-pending{
  grid-template-columns:minmax(0,1fr) 350px !important;
}
.goals-layout.all-four-pending .priority-panel{
  border:3px solid #2388ff !important;
  box-shadow:0 0 0 2px rgba(35,136,255,.16),0 0 26px 7px rgba(35,136,255,.52),0 10px 30px rgba(23,35,29,.10) !important;
  animation:completedRankingShine 1s ease-in-out infinite;
}
@keyframes completedRankingShine{
  0%,100%{box-shadow:0 0 0 2px rgba(35,136,255,.16),0 0 18px 4px rgba(35,136,255,.34),0 10px 30px rgba(23,35,29,.10) !important;}
  50%{box-shadow:0 0 0 4px rgba(35,136,255,.28),0 0 34px 10px rgba(35,136,255,.72),0 10px 30px rgba(23,35,29,.12) !important;}
}
/* Final state: options become compact on the left; ranking occupies ~2/3 of the content width. */
.goals-layout.final-expanded{
  grid-template-columns:minmax(0,1fr) minmax(0,2fr) !important;
  gap:24px;
}
.goals-layout.final-expanded .goal-picker .options{
  transform:scale(.67);
  transform-origin:top left;
  width:149.25%;
  margin-bottom:-33%;
}
.goals-layout.final-expanded .goal-picker-title,
.goals-layout.final-expanded .goal-bottom-note{
  transform:scale(.9);
  transform-origin:top left;
}
.goals-layout.final-expanded .priority-panel{
  min-height:100%;
  padding:26px;
  border-color:#2388ff;
  box-shadow:0 10px 34px rgba(35,136,255,.14),0 8px 24px rgba(23,35,29,.08);
}
.goals-layout.final-expanded .priority-item{
  height:64px;
  min-height:64px;
}
@media(max-width:850px){
  .goals-layout.all-four-pending,.goals-layout.final-expanded{grid-template-columns:1fr !important;}
  .goals-layout.final-expanded .goal-picker .options{transform:none;width:auto;margin-bottom:0;}
  .goals-layout.final-expanded .goal-picker-title,.goals-layout.final-expanded .goal-bottom-note{transform:none;}
}
@media(prefers-reduced-motion:reduce){
  .goals-layout.all-four-pending .priority-panel{animation:none;}
}

/* v53: completion highlight belongs to the entire "My top 4 priorities selected" panel,
   not to individual priority cards. During the 3-second completion state, suppress
   individual priority glows/stars so the whole panel is the single focal element. */
.goals-layout.all-four-pending .priority-item.priority-1,
.goals-layout.all-four-pending .priority-item.priority-2{
  animation:none !important;
  filter:none !important;
  box-shadow:none !important;
}
.goals-layout.all-four-pending .priority-item.priority-1::after,
.goals-layout.all-four-pending .priority-item.priority-2::after{
  display:none !important;
  animation:none !important;
}
.goals-layout.all-four-pending .priority-panel{
  border:3px solid #2388ff !important;
  box-shadow:0 0 0 2px rgba(35,136,255,.16),0 0 26px 7px rgba(35,136,255,.52),0 10px 30px rgba(23,35,29,.10) !important;
}

/* v58: gradual 60/40 expansion after the four-priority celebration. */
.goals-layout{
  transition:grid-template-columns 1.25s cubic-bezier(.2,.75,.2,1), gap 1.25s ease;
}
.goals-layout.all-four-pending{
  grid-template-columns:minmax(0,1fr) minmax(350px,1fr) !important;
}
.goals-layout.all-four-pending .priority-panel{
  transition:width 1.25s cubic-bezier(.2,.75,.2,1), padding 1.25s ease, box-shadow .3s ease;
}
.goals-layout.final-expanded{
  grid-template-columns:minmax(0,2fr) minmax(0,3fr) !important;
  gap:24px !important;
}
.goals-layout.final-expanded .goal-picker .options{
  transition:transform 1.25s cubic-bezier(.2,.75,.2,1), width 1.25s cubic-bezier(.2,.75,.2,1), margin-bottom 1.25s ease;
}
.goals-layout.final-expanded .priority-panel{
  transition:width 1.25s cubic-bezier(.2,.75,.2,1), padding 1.25s ease, box-shadow .5s ease;
}
@media(prefers-reduced-motion:reduce){
  .goals-layout,.goals-layout.final-expanded .goal-picker .options,.goals-layout.final-expanded .priority-panel{transition:none !important;}
}

/* v58: concise productivity-focused home visual. */
.home-visual img{width:min(100%,620px);transform:none;filter:drop-shadow(0 18px 26px rgba(23,35,29,.12));}
.home-visual img:hover{transform:translateY(-3px);}

/* v58: payment page shows only the package selected by the customer. */
#packageVisual{display:flex;justify-content:center;align-items:center;margin:10px auto 18px;max-width:720px;min-height:180px;}
#packageVisual img{display:block;width:min(100%,620px);height:230px;object-fit:contain;border-radius:16px;}
@media(max-width:650px){#packageVisual img{height:190px;}}

/* v58 correction: the 3-second celebration stays compact; expansion begins only after the timer. */
.goals-layout.all-four-pending .priority-panel{width:auto !important;}
.goals-layout.all-four-pending .priority-item{height:48px !important;min-height:48px !important;padding:7px 8px !important;border-radius:12px !important;grid-template-columns:32px minmax(0,1fr) auto !important;}
.goals-layout.all-four-pending .rank{width:30px !important;height:30px !important;font-size:13px !important;}
.goals-layout.all-four-pending .priority-name{font-size:13px !important;}
.goals-layout.all-four-pending .move-btn{width:34px !important;height:34px !important;}
@media(max-width:520px){.goals-layout.all-four-pending .priority-item{height:46px !important;min-height:46px !important;padding:6px !important;}.goals-layout.all-four-pending .rank{width:28px !important;height:28px !important;}.goals-layout.all-four-pending .move-btn{width:32px !important;height:32px !important;}}


/* v68: mobile-friendly priority card. Keep the selected priorities readable and
   prevent the ranking panel from becoming a narrow/overflowing strip. */
.priority-panel{
  box-sizing:border-box;
  min-width:0;
  width:100%;
}
.priority-item{
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.priority-name{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
}
.priority-actions{
  flex:0 0 auto;
}
.priority-continue{
  display:block;
  margin:14px 0 0 auto !important;
  width:auto;
  min-width:120px;
}
@media(max-width:850px){
  .goals-layout,
  .goals-layout.all-selected,
  .goals-layout.all-four-pending,
  .goals-layout.final-expanded{
    grid-template-columns:minmax(0,1fr) !important;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .priority-panel{
    width:100% !important;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
  }
  .goals-layout.final-expanded .priority-panel{
    min-width:0;
  }
}
@media(max-width:520px){
  .priority-panel{
    padding:16px !important;
    border-radius:15px;
  }
  .priority-title{
    font-size:17px !important;
    line-height:1.25;
  }
  .priority-subtitle{
    font-size:12px !important;
    line-height:1.4;
  }
  .priority-list{
    width:100%;
    min-width:0;
  }
  .priority-item,
  .goals-layout.all-selected .priority-item,
  .goals-layout.final-expanded .priority-item{
    width:100% !important;
    height:auto !important;
    min-height:54px !important;
    padding:8px !important;
    grid-template-columns:30px minmax(0,1fr) 68px !important;
    gap:8px !important;
  }
  .priority-name,
  .goals-layout.all-selected .priority-name,
  .goals-layout.final-expanded .priority-name{
    font-size:14px !important;
    line-height:1.3 !important;
    white-space:normal !important;
  }
  .rank{width:28px !important;height:28px !important;font-size:12px !important;}
  .move-btn{width:30px !important;height:30px !important;font-size:15px !important;}
  .priority-actions{gap:4px !important;justify-content:flex-end;}
  .priority-continue{
    width:auto !important;
    min-width:125px;
    margin:14px 0 0 auto !important;
  }
  .priority-panel::after{
    font-size:11px;
  }
}