/* =====================================================================
Waivr v8.22 "result" (Web Designer). RESULT PAGE ONLY.
Load AFTER v820-polish.css and BEFORE v821-logo.css:
CSS only: no copy, data, JS, logic, class or attribute changes (PostHog
masking selectors #results / .dl-line untouched). Logo (.brand/.foot-brand),
Tip and בס״ד untouched. Home page untouched (every rule is scoped to the
result card .hpage, the result header .rhead, or the "Also nearby" cards).
Scale: 4px steps. One inset (--in) for every block in the card.
===================================================================== */
.hpage{--in:20px;--btn-h:48px;--btn-line:#C9D1DD}
@media (min-width:641px){.hpage{--in:32px;--btn-h:44px}}
/* ---------- 1. ONE CARD, NO CARD-IN-CARD ----------
The card had its own 8-12px padding and the verdict sat inside it as a
second rounded, inset panel. Now the card has no padding: the verdict is
its full-bleed tinted top, and every block below uses the same inset. */
.hpage{padding:0;gap:0}
.hpage>.hp-out{
margin:0;border-radius:calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0;
padding:var(--s6) var(--in) var(--s6);gap:0;
border-bottom:1px solid var(--line);box-shadow:none;outline:0}
@media (min-width:641px){.hpage>.hp-out{padding-top:28px;padding-bottom:28px}}
.out-free>.hp-out{background:var(--free-bg);border-bottom-color:var(--free-line)}
.out-off>.hp-out{background:var(--off-bg);border-bottom-color:var(--off-line)}
/* "check": keep the amber dashed signal as one dashed rule under a cool tint */
.out-check>.hp-out{background:var(--check-bg);border-bottom:1.5px dashed var(--check-line)}
.out-no>.hp-out{background:var(--no-bg);border-bottom-color:var(--no-line)}
/* ---------- 2. VERDICT: big headline, then the plain lines ---------- */
.hp-out>*{margin:0}
.hp-out>*+*{margin-top:var(--s3)}
.hp-out>.obadge+*{margin-top:var(--s4)}
.hp-out .zout{margin-top:var(--s4)}
.hp-out p{max-width:70ch}
.hp-out .zsum-s{max-width:70ch;color:var(--body);line-height:1.5}
/* "Based on ... The hospital makes the final decision" stays readable, not grey-on-tint */
.hp-out .qnote{color:var(--body);line-height:1.5}
.hp-out .qrule{margin-bottom:0}
/* ---------- 3. THE MATH, QUIETER (fallback until the CTO adds
; see section 8) ----------
The 400% / 600% limit lines were bold ink and read like the verdict.
Now: regular weight, body colour, still 16px, with a 16px gap above. */
.hp-out>.dollars{display:grid;gap:var(--s1);margin-top:var(--s4);padding:0;border:0}
.hpage .dollars .dl-src .read-policy{margin-left:0}
.hp-out .dollars .dl-line{font-weight:400;color:var(--body);font-size:1rem;line-height:1.5}
.hp-out .dollars .dl-pct{color:var(--muted)}
.hp-out .dollars .dl-src{margin-top:var(--s1);font-size:1rem;line-height:1.5;color:var(--muted)}
.hp-out .dollars .dl-all summary{min-height:44px;font-size:1rem}
/* ---------- 4. HOSPITAL IDENTITY: one quiet block ----------
Was a 25px heading + grey line + badge, wedged between verdict and
buttons. Now a compact 18px name with the city/policy line and the
ownership badge tight under it. (Moving it below the buttons needs a
DOM change: CTO note.) */
.hpage>.hp-h{margin:var(--s5) var(--in) 0;font-size:var(--t1b);line-height:1.35;font-weight:650;letter-spacing:-.01em;text-wrap:pretty}
.hpage>.hp-loc{margin:var(--s1) var(--in) 0;font-size:1rem;line-height:1.45;color:var(--muted);max-width:70ch}
.hpage>.zown{margin:var(--s1) var(--in) 0}
.hpage>.zown .own{color:var(--muted)}
/* ---------- 5. ACTIONS: one primary, a matched secondary pair ---------- */
.hpage>.hp-sec.hp-act{margin:var(--s5) 0 0;padding:0 var(--in);background:none;border:0}
/* "APPLY" label repeated the button; keep it as a heading for screen readers only */
.hpage>.hp-act>h3{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hpage .hp-act .acts{display:flex;flex-direction:column;gap:0;margin:0;max-width:none}
@media (min-width:641px){.hpage .hp-act .acts{max-width:34rem}}
/* shared shape: pill, same height, same type, no shadow */
.hpage .acts .applybtn,.hpage .acts .callbtn,.hpage .acts .copyph{
box-sizing:border-box;min-height:var(--btn-h);height:auto;padding:var(--s2) var(--s5);
border-radius:999px;font:600 1rem/1.25 var(--sans);box-shadow:none;transform:none}
/* primary: filled slate */
.hpage .acts .applybtn,.hpage .acts .callbtn.callbtn-prim{width:100%;background:var(--accent);border:1px solid var(--accent);color:#fff}
.hpage .acts .applybtn:hover,.hpage .acts .callbtn.callbtn-prim:hover{background:var(--accent-h);border-color:var(--accent-h);color:#fff}
.hpage .acts .applybtn:active,.hpage .acts .callbtn.callbtn-prim:active{background:var(--accent-h)}
.hpage .acts .applybtn::after{flex-basis:18px;width:18px;height:18px}
/* secondary: white, 1px cool border, slate ink */
.hpage .acts .callbtn:not(.callbtn-prim),.hpage .acts .copyph{background:#fff;border:1px solid var(--btn-line);color:var(--ink)}
.hpage .acts .callbtn:not(.callbtn-prim):hover,.hpage .acts .copyph:hover{background:var(--stone);border-color:var(--accent)}
.hpage .acts .callbtn:not(.callbtn-prim):active,.hpage .acts .copyph:active{background:var(--accent-soft)}
.hpage .acts .applybtn:focus-visible,.hpage .acts .callbtn:focus-visible,.hpage .acts .copyph:focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:3px}
/* the phone block under the primary */
.hpage .acts>.applybtn+.callwrap{margin-top:var(--s5)}
.hpage .callwrap{margin:0}
.hpage .phlab{margin:0 0 var(--s2);font-size:1rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.hpage .callrow{display:flex;flex-direction:column;gap:var(--s2)}
@media (min-width:641px){
.hpage .callrow{flex-direction:row;align-items:stretch}
.hpage .callrow .callbtn{flex:1 1 auto;min-width:0}
.hpage .callrow .copyph{flex:0 0 auto}
}
/* "When they answer, say: ..." was a grey strip glued to the buttons */
.hpage .callsay{margin:var(--s3) 0 0;padding:0 0 0 var(--s3);background:none;border-left:2px solid var(--btn-line);border-radius:0;font-size:1rem;line-height:1.5;color:var(--body);max-width:70ch}
.hpage .hp-act .hp-miss{margin:0;font-size:1rem;color:var(--body)}
/* ---------- 6. DETAIL SECTIONS: flat, separated by hairlines ----------
"How to apply", "What to bring" and "What the policy says" were three
grey tiles inside the card with UPPERCASE labels. Now flat sections with
sentence-case 18px headings (the DOM text is already sentence case). */
.hpage>.hp-sec:not(.hp-act){margin:var(--s7) 0 0;padding:var(--s6) var(--in) 0;background:none;border-radius:0;border-top:1px solid var(--line)}
.hpage>.hp-sec:not(.hp-act)+.hp-sec{margin-top:var(--s6)}
.hpage>.hp-sec:last-child{padding-bottom:var(--s7)}
.hpage>.hp-sec:not(.hp-act)>h3{margin:0 0 var(--s3);font-size:var(--t1b);line-height:1.35;font-weight:650;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.hpage .hp-sec p,.hpage .hp-sec li{font-size:1rem;line-height:1.5}
.hpage .aguide{gap:var(--s3)}
.hpage .aguide .ag-note,.zitem .aguide .ag-note{font-size:1rem;margin-top:var(--s1)}
.hpage .hp-figs{margin:0 0 var(--s3)}
/* ---------- 7. "ALSO NEARBY" cards: same secondary button language ---------- */
.hp-alts .acts .callbtn:not(.callbtn-prim),.hp-alts .acts .copyph,.hp-alts .acts .applybtn,.hp-alts .acts .callbtn.callbtn-prim{border:1px solid var(--btn-line,#C9D1DD);border-radius:999px;box-shadow:none}
.hp-alts .phlab{font-size:1rem;font-weight:500;letter-spacing:0;text-transform:none}
.hp-alts .callsay{padding:0 0 0 var(--s3);background:none;border-left:2px solid #C9D1DD;border-radius:0}
/* ---------- 8. "HOW WE FIGURED THIS" (ready for the CTO's wrapper) ----------
Expected markup, right after the actions (see CTO note):
How we figured this
…
…
*/
.hpage>details.how{margin:var(--s6) var(--in) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hpage>details.how>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;padding:var(--s2) 0;
list-style:none;cursor:pointer;font:600 1rem/1.35 var(--sans);color:var(--ink)}
.hpage>details.how>summary::-webkit-details-marker{display:none}
.hpage>details.how>summary::before{content:none;display:none}
.hpage>details.how>summary::after{content:"";flex:0 0 12px;width:12px;height:8px;background:var(--chev-down,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23172238' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")) center/12px 8px no-repeat;transition:transform .2s ease}
.hpage>details.how[open]>summary::after{transform:rotate(180deg)}
.hpage>details.how>summary:hover{text-decoration:underline;text-underline-offset:3px}
.hpage>details.how>summary:focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:2px;border-radius:var(--r-s)}
@media (min-width:641px){.hpage>details.how>summary{min-height:44px}}
.hpage>details.how>:not(summary){margin:0 0 var(--s3);max-width:70ch}
.hpage>details.how>.zsum-s{color:var(--body);font-size:1rem;line-height:1.5}
.hpage>details.how>.dollars{display:grid;gap:var(--s1);margin:0 0 var(--s4)}
.hpage>details.how .dl-line{font-weight:400;color:var(--body);font-size:1rem;line-height:1.5}
.hpage>details.how .dl-pct{color:var(--muted)}
.hpage>details.how .dl-src{font-size:1rem;color:var(--muted)}
/* hospital details grouped in one quiet block below the actions (CTO proposal: div.hp-id) */
.hpage>.hp-id{margin:var(--s6) var(--in) 0}
.hpage>.hp-id>.hp-h{margin:0;font-size:var(--t1b);font-weight:650;line-height:1.35}
.hpage>.hp-id>.hp-loc{margin:var(--s1) 0 0;color:var(--muted)}
.hpage>.hp-id>.zown{margin:var(--s1) 0 0}
/* ---------- 9. RESULT HEADER ----------
v820's header rules do apply on live (weight 700, one line from 1024px,
links on their own row). Kept as is. */
/* ---------- 10. MOTION ---------- */
@media (prefers-reduced-motion:reduce){
.hpage .acts .applybtn,.hpage .acts .callbtn,.hpage .acts .copyph,.hpage .acts .applybtn::after,.hpage>details.how>summary::after{transition:none!important}
.hpage .acts .applybtn:hover::after{transform:none}
}