/* GENERATED by build/pro-el/make_css.py - do not edit on the server. Source: build/pro/pro.css */ /* Drug Rehab Proforma: the revenue calculator plus the few things the other pages do not already have. Surfaces, heads, registers, rails, panels, bands, flows, accordion, CTA and the dual author box are all shared, so this page reads as the same site. */ /* ---------- 01 hero ---------- */ .pro .chero .paths{display:flex;gap:16px;flex-wrap:wrap;align-items:center} .pro .chero .paths .btn{flex:0 0 auto} .pro .cta-core .paths.mid{display:flex;justify-content:center;margin-top:clamp(22px,3vh,28px)} .pro .chero .tag .ln{white-space:normal} /* ---------- 02 the answer column, head inside so both columns start and end together ---------- */ .pro .a2 .erow{align-items:stretch} .pro .a2 .shead{margin-bottom:clamp(14px,1.8vh,18px)} .pro .lead-col{display:flex;flex-direction:column;justify-content:flex-start} .pro .lead-col p{font-size:20px!important;line-height:1.7;color:var(--navy);max-width:46ch} /* ---------- 04 and 10 the register carries a lead line above it ---------- */ .pro .secintro{margin:0 0 clamp(18px,2.2vh,24px);font-size:17px;line-height:1.8;color:var(--on-light-2); max-width:78ch} .pro .listlead{margin:0 0 clamp(14px,1.8vh,18px);font-family:var(--body);font-size:15px;font-weight:500; letter-spacing:.04em;color:var(--navy)} .pro .a4 .closeband,.pro .a10 .closeband,.pro .a11 .closeband{margin-top:clamp(26px,3.2vh,34px)} /* ---------- 06 the revenue calculator ---------- */ /* One navy card, laid out as a form: the three questions run down the left, the estimate panel stands beside them from the start, so the card is never half empty and the button is always in view. */ .calc{border-radius:18px;background:var(--field-navy);border:1px solid rgba(247,242,231,.14); box-shadow:0 34px 80px rgba(23,29,58,.22);position:relative;overflow:hidden; padding:clamp(24px,3vh,34px) clamp(22px,2.4vw,34px)} .calc::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(55% 60% at 100% 0%,rgba(255,176,0,.16),rgba(255,176,0,0) 70%)} .c-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.46fr); gap:clamp(22px,2.6vw,40px);align-items:start} .c-inputs{display:grid;gap:clamp(20px,2.4vh,26px)} .c-q{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline} .c-qn{grid-row:1 / span 2;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em; color:var(--gold-deep)} .c-q .ck{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--gold)} .c-q > :last-child{grid-column:2} /* the level cards */ .c-lvls{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px} .c-lvl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;text-align:left; cursor:pointer;padding:12px 14px;border-radius:12px;background:rgba(247,242,231,.05); border:1px solid rgba(247,242,231,.16);color:#fff; transition:background .2s ease,border-color .2s ease} .c-tick{grid-row:1 / span 2;width:18px;height:18px;border-radius:6px;border:1.5px solid rgba(247,242,231,.35); position:relative;transition:background .2s ease,border-color .2s ease} .c-tick::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px; border:2px solid var(--navy);border-top:0;border-left:0;transform:rotate(45deg) scale(0); transition:transform .18s ease} .c-lvl .c-lvn{font-family:var(--disp);font-weight:600;font-size:15.5px;line-height:1.2; letter-spacing:-.01em;color:#fff} .c-lvl .c-lvu,.c-lvl .c-lvnote{font-family:var(--body);font-size:12px;color:var(--on-dark-3)} .c-lvl:hover{background:rgba(247,242,231,.09);border-color:rgba(255,176,0,.4)} .c-lvl.on{background:rgba(255,176,0,.12);border-color:var(--gold)} .c-lvl.on .c-tick{background:var(--gold);border-color:var(--gold)} .c-lvl.on .c-tick::after{transform:rotate(45deg) scale(1)} .c-lvl.on .c-lvu{color:var(--gold)} .c-lvl[data-disabled]{opacity:.45;cursor:not-allowed} .c-lvl[data-disabled]:hover{background:rgba(247,242,231,.05);border-color:rgba(247,242,231,.16)} .c-lvl[data-disabled] .c-lvnote{color:var(--gold-deep)} /* the steppers */ .c-steps{display:grid;gap:8px;margin-top:8px} .c-step[hidden]{display:none} .c-step{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:9px 14px; border-radius:12px;background:rgba(247,242,231,.05);border:1px solid rgba(247,242,231,.14)} .c-stepk{font-family:var(--body);font-size:14px;font-weight:500;color:#fff} .c-stepctl{display:inline-flex;align-items:center;gap:4px} .c-stepbtn{width:32px;height:32px;border-radius:8px;background:rgba(247,242,231,.08); border:1px solid rgba(247,242,231,.18);color:#fff;font-size:17px;line-height:1;cursor:pointer; transition:background .2s ease,border-color .2s ease} .c-stepbtn:hover{background:rgba(255,176,0,.2);border-color:var(--gold)} .c-stepval{min-width:40px;text-align:center;font-family:var(--disp);font-weight:600;font-size:19px; color:var(--gold)} .c-stepu{font-family:var(--body);font-size:12px;color:var(--on-dark-3)} /* the payer control */ .c-payers{justify-self:start;display:inline-flex;gap:4px;padding:4px;border-radius:999px; background:rgba(247,242,231,.06);border:1px solid rgba(247,242,231,.14);margin-top:8px} .c-payer{padding:9px 20px;border-radius:999px;background:none;border:0;cursor:pointer; font-family:var(--body);font-size:14px;font-weight:500;color:var(--on-dark-2); transition:background .2s ease,color .2s ease} .c-payer:hover{color:#fff} .c-payer.on{background:var(--gold);color:var(--navy)} /* the estimate panel */ .c-panel{position:relative;align-self:stretch;display:flex;flex-direction:column;gap:12px; padding:clamp(18px,2.2vh,24px) clamp(16px,1.6vw,22px);border-radius:14px; background:rgba(247,242,231,.06);border:1px solid rgba(247,242,231,.16)} .c-res{display:grid;gap:10px} .c-cr{padding:15px 17px;border-radius:12px;background:rgba(9,13,30,.35); border:1px solid rgba(247,242,231,.14)} .c-crk{display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.08em; text-transform:uppercase;color:var(--on-dark-3)} .c-crv{display:block;margin-top:8px;font-family:var(--disp);font-weight:600; font-size:clamp(26px,2.3vw,34px);line-height:1.05;letter-spacing:-.03em;color:var(--gold); white-space:nowrap} .c-crv.is-idle{opacity:.45} .c-cta-wrap[hidden]{display:none} /* both labels hold one line inside the panel */ .c-cta{width:100%;justify-content:center;white-space:nowrap;font-size:clamp(13px,1vw,14.5px); padding-inline:18px} .c-go-wrap{margin-top:auto;display:flex;flex-direction:column;gap:10px} .c-go{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:15px 18px; border:0;border-radius:999px;cursor:pointer;background:var(--gold);color:var(--navy); white-space:nowrap;font-family:var(--body);font-size:clamp(13px,1vw,15px);font-weight:600; letter-spacing:0;transition:background .2s ease,transform .2s ease,box-shadow .2s ease} .c-go:hover{background:var(--gold-deep);color:var(--navy);transform:translateY(-1px); box-shadow:0 14px 34px rgba(255,176,0,.24)} .c-go:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;background:var(--gold)} .c-help{font-family:var(--body);font-size:13px;color:var(--on-dark-3);text-align:center} .c-help[hidden]{display:none} .c-how{margin:clamp(16px,2vh,20px) 0 0;font-family:var(--body);font-size:14px;line-height:1.75; color:var(--on-light-2);max-width:104ch} /* ---------- 07 the four billing ranges, on the navy field ---------- */ .rategrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)} .ratecard{position:relative;overflow:hidden;padding:clamp(22px,2.6vh,28px) clamp(20px,2vw,26px); border-radius:14px;background:var(--field-navy);border:1px solid rgba(247,242,231,.14); box-shadow:0 24px 60px rgba(23,29,58,.18); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .ratecard::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 60% at 100% 0%,rgba(255,176,0,.14),rgba(255,176,0,0) 70%)} .ratecard:hover{transform:translateY(-3px);box-shadow:0 30px 70px rgba(23,29,58,.26); border-color:rgba(255,176,0,.45)} .ratecard .rk{position:relative;font-family:var(--body);font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .rrange{position:relative;display:flex;align-items:center;gap:12px;margin-top:12px} .rrange b{font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.4vw,34px);line-height:1; letter-spacing:-.03em;color:#fff} .rdash{flex:none;width:44px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--gold),rgba(255,176,0,.3))} .ratecard .ru{position:relative;display:block;margin-top:8px;font-family:var(--body);font-size:12px; font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)} .ratecard p{position:relative;margin:16px 0 0;padding-top:16px; border-top:1px solid rgba(247,242,231,.14);font-size:15.5px;line-height:1.75;color:var(--on-dark-2)} /* ---------- 10 the metric cards, two across ---------- */ .svcgrid.two{grid-template-columns:repeat(2,1fr)} .svcgrid.two .svc .sysn{display:block;font-family:var(--body);font-size:11px;font-weight:500; letter-spacing:.16em;color:var(--gold-deep);margin-bottom:8px} .svcgrid.two .svc{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .svcgrid.two .svc:hover{transform:translateY(-3px);box-shadow:0 22px 54px rgba(23,29,58,.12); border-color:rgba(255,176,0,.45)} .svcgrid.two .svc:hover::before{transform:scaleX(1)} /* ---------- 07 the reference band under the streams ---------- */ .pro .a7 .closeband{margin-top:clamp(24px,3vh,32px)} .pro .srcline{display:block;margin-top:12px;font-family:var(--body);font-size:13px;font-style:normal; font-weight:400;letter-spacing:0;color:rgba(23,29,58,.62)} .pro .a7 .erow{margin-top:clamp(28px,3.4vh,38px)} /* the shared .sec p rules beat the row measure, so this page states it */ .pro .riskrow p{font-size:16.5px;line-height:1.75} .pro .sec-white .subh{color:var(--navy)} /* ---------- 13 the four stage flow ---------- */ .flow.four{grid-template-columns:repeat(4,1fr)} /* ---------- 15 the author block, as one centred unit ---------- */ .pro .author.dual{max-width:920px;margin-inline:auto;gap:clamp(24px,2.6vw,44px);align-items:start} .pro .author.dual .abox{align-items:flex-start} .pro .author.dual .abox img{margin-top:3px} .pro .author.dual > small{justify-self:center;padding-top:8px} /* ---------- responsive ---------- */ @media (max-width:1100px){ .c-body{grid-template-columns:1fr} .c-panel{position:static} .flow.four{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .c-lvls{grid-template-columns:1fr} .rategrid{grid-template-columns:1fr} .svcgrid.two{grid-template-columns:1fr} .pro .secintro{max-width:none} } @media (max-width:700px){ .flow.four{grid-template-columns:1fr} .pro .statrow.four{grid-template-columns:1fr} .pro .statrow.four .lstat + .lstat{border-left:0;border-top:1px solid var(--line-dark)} .pro .chero .paths{flex-direction:column;align-items:stretch} } /* ---------- Elementor parity for this page ---------- */ .bhp-pro .paths .elementor-widget-button{width:auto;flex:0 0 auto} .bhp-pro .paths{display:flex} .bhp-pro .shead.e-con{margin-block-end:20px!important} /* the head-to-first-block gap is the head's own margin, so the first block resets its top margin. A row that follows another block keeps its spacing, otherwise it collides with the band above it. */ .bhp-pro .shead + .erow.e-con,.bhp-pro .shead + .statrow.e-con,.bhp-pro .shead + .register.e-con, .bhp-pro .shead + .risklist.e-con,.bhp-pro .shead + .prail.e-con,.bhp-pro .shead + .flow.e-con, .bhp-pro .shead + .rategrid.e-con,.bhp-pro .shead + .svcgrid.e-con{margin-block-start:0!important} /* an earlier page's stylesheet zeroes every .erow with !important, so this restates it */ .bhp-pro .erow.e-con{margin-block-start:clamp(28px,3.4vh,38px)!important} /* 02 the audience panel */ .bhp-pro .verdict.e-con{align-self:stretch;border-radius:14px;overflow:hidden;position:relative; padding:clamp(22px,2.8vh,28px) clamp(20px,2vw,26px);background:var(--field-navy); box-shadow:0 24px 60px rgba(23,29,58,.2)} .bhp-pro .verdict.e-con::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 60% at 100% 0%,rgba(255,176,0,.16),rgba(255,176,0,0) 70%)} .bhp-pro .verdict .vrow.e-con{position:relative} .bhp-pro .lead-col .elementor-widget-text-editor p{font-size:20px;line-height:1.7;max-width:46ch} .bhp-pro .a2 .shead.e-con{margin-block-end:16px!important} /* 04 and 10 the register */ .bhp-pro .register.e-con{background:var(--field-cream);border-left-width:3px;border-left-color:var(--gold)} .bhp-pro .rrow .elementor-widget-text-editor p{max-width:80ch} .bhp-pro .rring .elementor-heading-title{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,176,0,.5); background:rgba(255,176,0,.12);color:var(--gold-deep);transition:background .2s ease,border-color .2s ease} .bhp-pro .rrow.e-con:hover .rring .elementor-heading-title{background:rgba(255,176,0,.24); border-color:var(--gold)} .bhp-pro .rrow.e-con:hover h3 .elementor-heading-title{color:var(--gold-deep)} .bhp-pro .rrow h3 .elementor-heading-title{transition:color .2s ease} .bhp-pro .secintro p{max-width:78ch} /* 07 the rate cards, on the navy field */ .bhp-pro .rategrid.e-con{display:grid!important;grid-template-columns:repeat(2,1fr)!important} .bhp-pro .ratecard.e-con{position:relative;overflow:hidden; padding:clamp(22px,2.6vh,28px) clamp(20px,2vw,26px);border-radius:14px;background:var(--field-navy); border:1px solid rgba(247,242,231,.14);box-shadow:0 24px 60px rgba(23,29,58,.18); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .bhp-pro .ratecard.e-con::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 60% at 100% 0%,rgba(255,176,0,.14),rgba(255,176,0,0) 70%)} .bhp-pro .ratecard.e-con:hover{transform:translateY(-3px);box-shadow:0 30px 70px rgba(23,29,58,.26); border-color:rgba(255,176,0,.45)} .bhp-pro .ratecard > *{position:relative} .bhp-pro .rdash.e-con{height:2px;min-height:2px;border-radius:2px; background:linear-gradient(90deg,var(--gold),rgba(255,176,0,.3))} .bhp-pro .ratecard .rbody p{padding-top:16px;border-top:1px solid rgba(247,242,231,.14)} /* 10 the metric cards, two across */ .bhp-pro .svcgrid.two.e-con{display:grid!important;grid-template-columns:repeat(2,1fr)!important} .bhp-pro .svcgrid.two .svc.e-con{transition:transform .22s ease,box-shadow .22s ease, border-color .22s ease} .bhp-pro .svcgrid.two .svc.e-con:hover{transform:translateY(-3px); box-shadow:0 22px 54px rgba(23,29,58,.12);border-color:rgba(255,176,0,.45)} /* 11 the process rail */ .bhp-pro .prail.e-con{position:relative;padding:0} .bhp-pro .prow.e-con{position:relative} .bhp-pro .prow.e-con:not(.last)::before{content:"";position:absolute;left:21px;top:38px;bottom:-6px; width:2px;background:linear-gradient(180deg,rgba(255,176,0,.55),rgba(255,176,0,.3))} .bhp-pro .pnodewrap.e-con{position:relative;z-index:1;flex:0 0 44px} .bhp-pro .pnode .elementor-heading-title{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid rgba(255,176,0,.55); color:var(--gold-deep);box-shadow:0 0 0 6px var(--cream); transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease} .bhp-pro .pbody.e-con{padding:clamp(16px,2vh,20px) clamp(20px,2vw,26px);border-radius:14px; background:#fff;border:1px solid var(--line-light); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .bhp-pro .pbody .elementor-widget-text-editor p{max-width:78ch} .bhp-pro .prow.e-con:hover .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold); color:var(--navy);transform:scale(1.06)} .bhp-pro .prow.e-con:hover .pbody.e-con{transform:translateX(4px);box-shadow:0 18px 44px rgba(23,29,58,.1); border-color:rgba(255,176,0,.45)} .bhp-pro .prow.last .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold); color:var(--navy)} .bhp-pro .prow.last .pbody.e-con{border-color:rgba(255,176,0,.45)} /* 05 and 12 stat strips */ .bhp-pro .statrow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important} .bhp-pro .statrow .lstat .fig .elementor-heading-title{color:var(--gold)!important} /* 07 the revenue stream rows and the reference band */ .bhp-pro .riskrow.e-con{display:grid!important;grid-template-columns:auto 1fr!important; align-items:start!important} .bhp-pro .riskrow .elementor-widget-text-editor p{max-width:88ch} .bhp-pro .riskrow p b{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.01em; color:var(--navy)} .bhp-pro .srcline p{font-family:var(--body);font-style:normal;letter-spacing:0} /* the subhead on a white section is navy, and the stream rows keep the measure the composer sets */ .bhp-pro .sec-white .subh .elementor-heading-title{color:var(--navy)} .bhp-pro .riskrow .elementor-widget-text-editor p{font-size:16.5px;line-height:1.75} /* 11 the process rail */ .bhp-pro .prail.e-con{position:relative;padding:0} .bhp-pro .prow.e-con{position:relative} .bhp-pro .prow.e-con:not(.last)::before{content:"";position:absolute;left:21px;top:38px;bottom:-6px; width:2px;background:linear-gradient(180deg,rgba(255,176,0,.55),rgba(255,176,0,.3))} .bhp-pro .pnodewrap.e-con{position:relative;z-index:1;flex:0 0 44px} .bhp-pro .pnode .elementor-heading-title{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid rgba(255,176,0,.55); color:var(--gold-deep);box-shadow:0 0 0 6px #fff; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease} .bhp-pro .pbody.e-con{padding:clamp(16px,2vh,20px) clamp(20px,2vw,26px);border-radius:14px; background:var(--field-cream);border:1px solid var(--line-light); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .bhp-pro .pbody .elementor-widget-text-editor p{max-width:78ch} .bhp-pro .prow.e-con:hover .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold); color:var(--navy);transform:scale(1.06)} .bhp-pro .prow.e-con:hover .pbody.e-con{transform:translateX(4px);box-shadow:0 18px 44px rgba(23,29,58,.1); border-color:rgba(255,176,0,.45)} .bhp-pro .prow.last .pnode .elementor-heading-title{background:var(--gold);border-color:var(--gold); color:var(--navy)} .bhp-pro .prow.last .pbody.e-con{border-color:rgba(255,176,0,.45)} /* 13 the four stage flow */ .bhp-pro .flow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important} .bhp-pro .fstage.e-con{position:relative;padding:clamp(24px,3vh,30px) clamp(22px,2.2vw,28px); border-radius:14px;background:#fff;border:1px solid var(--line-light); box-shadow:0 14px 40px rgba(23,29,58,.06)} /* the step card's gold edge is a border now, stated once in bhp-fes-el.css, so the old pseudo-element bar is gone from every page rather than redrawn on each one */ /* custom widget buttons are real