/* grow.halaltimes.com - brand tokens from DESIGN.md */
:root{
  --ink:#111111; --body:#1a1a1a; --paper:#ffffff; --stone:#f5f4f1; --graphite:#5c5c5c;
  --link:#8a6100; --gold:#e4b020; --gold-hover:#d4a215; --deck:#333333; --hair:#e3e0da;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter Tight",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font:400 17px/1.6 var(--sans)}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
h1,h2{font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-.01em}

.bar{display:flex;justify-content:space-between;align-items:center;padding:14px 32px;background:var(--ink);color:#fff}
.brand{font:600 20px/1 var(--serif);color:#fff;text-decoration:none}
.bar-note{font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#d6d6d6}

.wrap{max-width:1180px;margin:0 auto;padding:56px 32px 40px;display:grid;
  grid-template-columns:minmax(0,1fr) 400px;column-gap:64px;
  grid-template-areas:"hero side" "body side"}
.hero{grid-area:hero}
.side{grid-area:side}
.body{grid-area:body}

.eyebrow{font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0 0 16px}
h1{font-size:50px;line-height:1.08;margin:0 0 20px}
.deck{font-size:20px;line-height:1.5;color:var(--deck);margin:0 0 18px}
.price-line{margin:0 0 8px;font-size:17px}

.body section{padding:36px 0 4px;border-top:1px solid var(--hair);margin-top:36px}
.body section:first-child{margin-top:28px}
.body h2{font-size:30px;line-height:1.2;margin:0 0 14px}
.body p{margin:0 0 14px}
.pain,.gets{margin:0 0 14px;padding:0;list-style:none}
.pain li{position:relative;padding:0 0 10px 26px}
.pain li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:2px;background:var(--ink)}
.gets{counter-reset:g}
.gets li{counter-increment:g;position:relative;padding:14px 0 14px 52px;border-bottom:1px solid var(--hair)}
.gets li:last-child{border-bottom:0}
.gets li::before{content:counter(g);position:absolute;left:0;top:14px;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:#fff;font:600 15px/34px var(--sans);text-align:center}
.areas-label{font-weight:600;margin-top:10px}
.areas{color:var(--deck)}
.promise{background:var(--stone);border-top:0 !important;padding:28px 28px 14px !important}
.about p:first-of-type{font-size:18px}
.faq details{border-bottom:1px solid var(--hair);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink)}
.faq details p{margin:10px 0 4px}
.back-to-form{margin:36px 0 0}

/* form card */
.card{border:1px solid var(--hair);background:var(--paper);padding:26px 26px 22px;
  box-shadow:0 1px 0 rgba(0,0,0,.02),0 12px 32px rgba(17,17,17,.07)}
.included{list-style:none;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--hair);font-size:15px}
.included li{position:relative;padding:3px 0 3px 26px}
.included li::before{content:"";position:absolute;left:4px;top:.55em;width:6px;height:11px;border:solid var(--ink);
  border-width:0 2px 2px 0;transform:rotate(45deg)}
fieldset{border:0;margin:0;padding:0;min-width:0}
.step-tag{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0 0 8px}
.form-title{font-size:23px;line-height:1.2;margin:0 0 14px}
label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 12px}
.opt{font-weight:400;color:var(--graphite)}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:11px 12px;font:400 16px/1.3 var(--sans);color:var(--body);
  background:#fff;border:1px solid #c9c5bd;border-radius:2px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
textarea{resize:vertical}
.btn{display:inline-block;width:100%;padding:14px 18px;border:0;border-radius:2px;cursor:pointer;text-align:center;
  font:600 16px/1.2 var(--sans);text-decoration:none}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--deck)}
.btn-gold{background:var(--gold);color:#111}
.btn-gold:hover{background:var(--gold-hover)}
.btn:disabled{opacity:.7;cursor:wait}
.back-to-form .btn{width:auto;padding:14px 28px}
.fine{font-size:13px;color:var(--graphite);margin:10px 0 0;line-height:1.45}
.form-error{background:#fdf3e1;border-left:3px solid var(--link);padding:9px 12px;font-size:14px;margin:12px 0 0}
.resume-note{font-size:14px;background:var(--stone);padding:8px 10px;margin:0 0 12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* two-step behaviour (only when JS runs; without JS every field shows and posts at once) */
.js-only{display:none}
.js .js-only{display:block}
.js .step-tag{display:block}
.step-tag{display:none}
.js .step-2{display:none}
.js.on-step-2 .step-1{display:none}
.js.on-step-2 .step-2{display:block}
.step-2{margin-top:6px}

.foot{border-top:1px solid var(--hair);text-align:center;color:var(--graphite);font-size:14px;padding:22px 16px}

/* simple pages (thanks, errors) */
.simple-main{max-width:680px;margin:0 auto;padding:56px 24px 72px}
.simple-main h1{font-size:38px;line-height:1.15}
.simple-main h2{font-size:24px;margin-top:32px}
.steps li{margin-bottom:10px}

/* sticky only when the tallest form step fits on screen */
@media (min-width:961px) and (min-height:900px){ .card{position:sticky;top:24px} }

@media (max-width:960px){
  .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "side" "body";padding:32px 16px 32px}
  .card{position:static;padding:22px 18px}
  h1{font-size:36px}
  .deck{font-size:18px}
  .body h2{font-size:25px}
  .bar{padding:12px 16px}
  .side{margin-top:16px}
  .back-to-form .btn{width:100%}
}
.brand-lab{font:500 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#d6d6d6;margin-left:8px;vertical-align:middle}