/* ============================================================
   SOONER APPLICATION KIT  ·  sooner-kit.css
   Extracted faithfully from the live shipped product
   (sooner-gtm/form/v5.html + app/sooner-app.html) and reconciled
   with brand.joinsooner.com tokens.

   This is the APPLICATION system (forms + app), not marketing.
   In-product headings are weight 700/800 (as shipped); marketing
   hero weight 500 lives in the brand site, not here.

   Usage:  <link rel="stylesheet" href="/sooner-kit.css">
           + Manrope from Google Fonts.
   Class names match the live code so components drop straight in.
   ============================================================ */

:root{
  /* ---- color ---- */
  --yellow:#E9FE0F;          /* accent only - never a page background */
  --yellow-soft:#E2F55C;
  --yellow-hover:#D4E80D;    /* btn :hover */
  --yellow-tint:#FEFFF0;     /* choice hover / selected bg */
  --dark:#1C1B17;            /* ink */
  --cream:#F5F4F0;           /* app canvas */
  --white:#FFFFFF;
  --grey:#6B6B6B;            /* secondary text */
  --muted:#9B9B9B;           /* tertiary / hints */
  --placeholder:#D0D0D0;
  --border:#E0E0E0;          /* inputs, cards (app) */
  --border-soft:#E5E4E0;     /* subtle (brand) */
  --error:#D32F2F;

  /* ---- radius ---- */
  --r-btn:8px;
  --r-card:12px;
  --r-pill:100px;
  --r-toggle:24px;

  /* ---- type ---- */
  --font:'Manrope',-apple-system,system-ui,sans-serif;

  /* ---- motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-slide:cubic-bezier(.25,.1,.25,1);
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:var(--font); background:var(--cream); color:var(--dark);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}

/* ============================================================
   TYPE
   ============================================================ */
.q-title{
  font-size:clamp(22px,4.5vw,34px); font-weight:700; color:var(--dark);
  line-height:1.15; letter-spacing:-.02em; margin-bottom:12px;
}
.q-sub{
  font-size:clamp(14px,2.5vw,16px); color:var(--grey); line-height:1.5;
  margin-bottom:24px; max-width:520px; margin-left:auto; margin-right:auto;
}
.section-label{
  font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--grey); margin-bottom:12px;
}

/* signature marker-pen highlight */
.highlight{
  background-image:linear-gradient(transparent 15%,var(--yellow) 15%,var(--yellow) 82%,transparent 82%);
  padding:0 4px; font-weight:700;
}
.highlight-sweep{
  background-image:linear-gradient(transparent 15%,var(--yellow) 15%,var(--yellow) 82%,transparent 82%);
  background-repeat:no-repeat; background-position:left center; background-size:0% 100%;
  animation:highlightSweep .8s .2s ease forwards; padding:0 4px; font-weight:700;
}
@keyframes highlightSweep{0%{background-size:0% 100%}100%{background-size:100% 100%}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  background:var(--yellow); color:var(--dark); border:2px solid transparent;
  border-radius:var(--r-pill); padding:14px 30px; font-size:15px; font-weight:600;
  font-family:var(--font); cursor:pointer; transition:all .2s var(--ease);
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{background:var(--yellow-hover);}
.btn:active{transform:scale(.98);}
.btn-lg{padding:16px 36px; font-size:16px;}
.btn-outline,.btn-skip{
  background:var(--white); border:1.5px solid var(--border); color:var(--dark);
  border-radius:var(--r-pill); padding:14px 30px; font-size:15px; font-weight:600;
  font-family:var(--font); cursor:pointer; transition:all .2s var(--ease);
}
.btn-outline:hover,.btn-skip:hover{background:var(--yellow); border-color:var(--dark);}

/* ============================================================
   TEXT / NUMBER INPUT  (big, bottom-border, animated underline)
   ============================================================ */
.input-wrap{max-width:min(400px,100%); margin:0 auto; position:relative;}
.input-prefix{
  position:absolute; left:0; bottom:20px; font-size:24px; font-weight:600; color:var(--grey);
}
.input-field{
  width:100%; background:transparent; border:none; border-bottom:2px solid var(--border);
  padding:16px 0 16px 60px; font-size:28px; font-weight:600; font-family:var(--font);
  color:var(--dark); outline:none; transition:all .2s;
}
.input-field:focus{transform:scale(1.01);}
.input-field::placeholder{color:var(--placeholder); font-weight:400;}
.input-field.no-prefix{padding-left:0;}
.input-hint{font-size:13px; color:var(--grey); margin-top:12px; text-align:left;}
.input-underline{position:absolute; bottom:0; left:0; width:100%; height:2px; pointer-events:none;}
.input-underline::after{
  content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--dark);
  transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease);
}
.input-wrap:focus-within .input-underline::after{transform:scaleX(1);}
.input-error{font-size:13px; color:var(--error); margin-top:8px; text-align:center;}

/* ============================================================
   CHOICE CARDS  (chips > dropdowns for <=8 options)
   ============================================================ */
.choices{max-width:min(480px,100%); margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.choice{
  background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-btn);
  padding:18px 24px; min-height:44px; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:12px;
  transition:all .2s var(--ease);
}
.choice:hover{transform:translateY(-2px); border-color:var(--dark); background:var(--yellow-tint);}
.choice.selected{border-color:var(--yellow); border-width:2px; background:var(--yellow-tint);}
.choice.snap{animation:cardSnap .35s ease;}
.choice-label{flex:1; min-width:0; font-size:15px; font-weight:500; color:var(--dark);}
.choice-label .sub{display:block; font-size:13px; font-weight:400; color:var(--grey); margin-top:3px;}
.choice-key{
  flex:none; font-size:12px; font-weight:600; color:var(--grey);
  background:var(--cream); border-radius:4px; padding:2px 8px;
}
@keyframes cardSnap{0%{transform:scale(1)}30%{transform:scale(.97)}60%{transform:scale(1.02)}100%{transform:scale(1)}}

/* ============================================================
   YES / NO
   ============================================================ */
.yn-wrap{display:flex; gap:16px; justify-content:center;}
.yn-btn{
  background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-btn);
  padding:18px 40px; font-size:15px; font-weight:500; font-family:var(--font); color:var(--dark);
  cursor:pointer; min-width:120px; transition:all .2s var(--ease);
}
.yn-btn:hover{transform:translateY(-2px); background:var(--yellow);}
.yn-btn.selected{background:var(--yellow); border-color:var(--yellow); font-weight:600;}

/* ============================================================
   CHECKBOX / RADIO
   ============================================================ */
input[type="checkbox"],input[type="radio"]{
  appearance:none; -webkit-appearance:none; width:20px; height:20px; border:2px solid var(--border);
  border-radius:4px; background:transparent; cursor:pointer; position:relative; vertical-align:middle;
  transition:all .2s;
}
input[type="radio"]{border-radius:50%;}
input[type="checkbox"]:checked,input[type="radio"]:checked{background:var(--yellow); border-color:var(--dark);}
input[type="checkbox"]:checked::after{
  content:'\2713'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:13px; font-weight:700; color:var(--dark);
}
input[type="radio"]:checked::after{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%; background:var(--dark);
}

/* ============================================================
   TOGGLE PILL  (e.g. "Just me" / "Total household")
   ============================================================ */
.toggle{display:inline-flex; gap:4px; border-radius:var(--r-toggle); background:#EAEAE6; padding:3px;}
.toggle button{
  padding:8px 20px; font-size:13px; font-family:var(--font); font-weight:500; border:none;
  cursor:pointer; border-radius:20px; background:transparent; color:var(--grey); transition:all .25s ease;
}
.toggle button.on{background:var(--dark); color:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.15);}

/* ============================================================
   CALC CARD  (live cost breakdown)
   ============================================================ */
.calc-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-card);
  padding:20px 24px; margin:16px auto; max-width:min(480px,100%); text-align:left;
}
.calc-eyebrow{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--grey); margin-bottom:8px;
}
.calc-row{display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:clamp(11px,2vw,13px); gap:8px; flex-wrap:wrap;}
.calc-row .label{color:var(--grey);}
.calc-row .value{font-weight:600; color:var(--dark); font-variant-numeric:tabular-nums;}
.calc-divider{border:none; border-top:1px solid var(--border); margin:8px 0;}
.calc-divider.strong{border-top:2px solid var(--dark); margin:6px 0;}
.calc-total .label{font-size:14px; color:var(--dark); font-weight:600;}
.calc-total .value{font-size:clamp(28px,4.5vw,40px); font-weight:800; color:var(--dark); letter-spacing:-.02em;}

/* ============================================================
   REVEAL / SUMMARY CARD
   ============================================================ */
.reveal-amount{font-size:clamp(36px,6vw,52px); font-weight:800; color:var(--dark); letter-spacing:-.03em; margin:16px 0;}
.reveal-sub{font-size:18px; color:var(--grey); margin-bottom:8px;}
.reveal-monthly{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-btn);
  padding:20px 28px; display:inline-block; margin:24px 0; font-size:15px; color:var(--dark);
}
.reveal-monthly strong{font-weight:700;}
.summary-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-card);
  padding:28px; margin:32px auto; max-width:min(400px,100%); text-align:left;
}
.summary-row{display:flex; justify-content:space-between; padding:8px 0; font-size:14px; border-bottom:1px solid var(--cream);}
.summary-row:last-child{border:none;}
.summary-row .s-label{color:var(--grey);}
.summary-row .s-value{font-weight:600;}

/* ============================================================
   BADGES
   ============================================================ */
.badge{display:inline-block; font-size:11px; font-weight:600; padding:4px 12px; border-radius:12px;}
.badge.dark{background:var(--dark); color:var(--white);}
.badge.pending{background:rgba(233,254,15,.3); color:var(--dark);}   /* "Pending activation" */
.badge.review{background:rgba(233,254,15,.55); color:var(--dark);}    /* "Under review" */
.badge.approved{background:var(--yellow); color:var(--dark);}         /* "Approved" */
.thanks-badge{
  display:inline-block; background:var(--yellow); border-radius:50%; width:64px; height:64px;
  line-height:64px; font-size:32px; text-align:center; animation:badgePop .5s .2s ease backwards;
}
@keyframes badgePop{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(0);opacity:1}}

/* ============================================================
   PROGRESS  (thin top bar with pulsing leading glow + step counter)
   ============================================================ */
.progress-bar{position:fixed; top:0; left:0; width:100%; height:4px; background:var(--dark); z-index:1001;}
.progress-fill{height:100%; background:var(--yellow); width:0%; transition:width .4s ease; position:relative;}
.progress-fill::after{
  content:''; position:absolute; right:0; top:-1px; width:24px; height:6px;
  background:radial-gradient(ellipse at right,rgba(233,254,15,.7),transparent);
  animation:progressPulse 1.5s ease-in-out infinite; pointer-events:none;
}
@keyframes progressPulse{0%,100%{opacity:.4;transform:scaleX(.8)}50%{opacity:1;transform:scaleX(1.2)}}
.step-counter{position:fixed; top:8px; right:16px; z-index:1002; font-size:13px; font-weight:500; color:var(--muted);}

/* ============================================================
   GENERIC CARD / CHIP
   ============================================================ */
.card{background:var(--white); border:1px solid var(--border); border-radius:var(--r-card); padding:20px 24px;}
.chip{display:inline-block; background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-pill); padding:8px 16px; font-size:13px; font-weight:600;}
.chip.on{background:var(--dark); color:var(--white); border-color:var(--dark);}

/* ============================================================
   FEE LADDER  (service-driven pricing: more services -> lower fee)
   ============================================================ */
.ladder{display:flex; flex-direction:column; gap:8px; max-width:min(440px,100%); margin:0 auto; text-align:left;}
.ladder .tier{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-btn); padding:13px 16px;
}
.ladder .tier .lbl{font-size:14px; font-weight:600; color:var(--dark);}
.ladder .tier .pct{font-size:18px; font-weight:700; color:var(--dark); font-variant-numeric:tabular-nums;}
.ladder .tier.here{background:var(--yellow); border-color:var(--yellow);}    /* the customer's rate */
.ladder .tier .tag{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  background:var(--dark); color:var(--yellow); padding:3px 8px; border-radius:var(--r-pill); margin-left:8px;
  vertical-align:middle;
}

/* ============================================================
   STEP TRANSITIONS  (Typeform vertical carousel)
   ============================================================ */
.q-enter-up{animation:slideInUp .35s var(--ease-slide) forwards;}
.q-enter-down{animation:slideInDown .35s var(--ease-slide) forwards;}
.q-exit-up{animation:slideOutUp .25s ease-in forwards; pointer-events:none;}
.q-exit-down{animation:slideOutDown .25s ease-in forwards; pointer-events:none;}
@keyframes slideInUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes slideInDown{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
@keyframes slideOutUp{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-40px)}}
@keyframes slideOutDown{from{opacity:1;transform:none}to{opacity:0;transform:translateY(40px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}