/* ===================== WHERE TO GO FOR CARE ===================== */

/* emergency callout — always visible, never behind an interaction */
.emerg{display:flex;align-items:center;gap:1rem;background:var(--berry);color:#fff;border-radius:var(--r-md);padding:.95rem 1.3rem;margin-bottom:clamp(2rem,4vw,2.75rem)}
.emerg .ei{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.emerg .ei svg.i{width:22px;height:22px}
.emerg b{display:block;font-size:1.02rem;line-height:1.3}
.emerg .sub{display:block;font-size:.92rem;color:rgba(255,255,255,.88)}
.emerg .call{margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:46px;padding:.6rem 1.4rem;border-radius:var(--pill);background:#fff;color:var(--berry);font-weight:800;text-decoration:none;font-size:1.05rem}
.emerg .call:hover{background:var(--sand-50)}
@media (max-width:760px){.emerg{flex-wrap:wrap}.emerg .call{margin-left:0;width:100%;justify-content:center}}

/* ---------- decision tree ---------- */
.tree{margin-top:1.5rem}
.tree ol,.tree ul{list-style:none;margin:0;padding:0}
.tree-root{display:flex;justify-content:center}
.tree-q{background:var(--teal);color:#fff;border-radius:14px;padding:.9rem 1.5rem;font-weight:700;font-size:1.08rem;line-height:1.35;text-align:center;max-width:22ch}
.branches{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2.5rem);margin-top:0;position:relative;padding-top:2.5rem}
.branches::before{content:"";position:absolute;top:1.25rem;left:25%;right:25%;height:2px;background:repeating-linear-gradient(90deg,var(--sand-line) 0 4px,transparent 4px 8px)}
.branches::after{content:"";position:absolute;top:0;left:50%;width:2px;height:1.25rem;background:repeating-linear-gradient(var(--sand-line) 0 4px,transparent 4px 8px)}
.branch{display:flex;flex-direction:column;align-items:center;position:relative}
.branch::before{content:"";position:absolute;top:-1.25rem;left:50%;width:2px;height:1.25rem;background:repeating-linear-gradient(var(--sand-line) 0 4px,transparent 4px 8px)}
.branch-label{display:inline-block;background:var(--c);color:#fff;border-radius:11px;padding:.5rem 1.35rem;font-weight:700;font-size:1rem}
.branch-q{margin-top:.9rem;background:color-mix(in srgb,var(--c) 10%,#fff);border:1.5px solid color-mix(in srgb,var(--c) 40%,#fff);border-radius:11px;padding:.7rem 1.1rem;text-align:center;font-size:.98rem;line-height:1.35;max-width:26ch}
.leaves{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%;margin-top:0;position:relative;padding-top:2.5rem}
.leaves::before{content:"";position:absolute;top:1.25rem;left:25%;right:25%;height:2px;background:repeating-linear-gradient(90deg,var(--sand-line) 0 4px,transparent 4px 8px)}
.leaves::after{content:"";position:absolute;top:0;left:50%;width:2px;height:1.25rem;background:repeating-linear-gradient(var(--sand-line) 0 4px,transparent 4px 8px)}
.leaf{position:relative}
.leaf::before{content:"";position:absolute;top:-1.25rem;left:50%;width:2px;height:1.25rem;background:repeating-linear-gradient(var(--sand-line) 0 4px,transparent 4px 8px)}
.leaf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem}
.leaf .yn{display:inline-block;background:var(--lc);color:#fff;border-radius:9px;padding:.32rem 1.05rem;font-weight:700;font-size:.92rem}
.leaf .lic{width:74px;height:74px;border-radius:50%;background:var(--lc);color:#fff;display:grid;place-items:center}
.leaf .lic svg.i{width:38px;height:38px;stroke-width:1.5}
.leaf p{font-size:.98rem;line-height:1.35;font-weight:600;max-width:24ch}
.leaf .sub-note{font-size:.9rem;font-weight:500;color:var(--gray-ink);margin-top:.15rem}
.leaf a{color:var(--orange-link);font-weight:700;text-underline-offset:3px}
.tree .c-teal{--c:var(--teal)} .tree .c-berry{--c:var(--berry)}
.l-teal{--lc:var(--teal)} .l-amber{--lc:#E0931F} .l-orange{--lc:var(--orange)} .l-berry{--lc:var(--berry)}

@media (max-width:820px){
  .branches{grid-template-columns:1fr;gap:2.25rem}
  .branch-q{max-width:32ch}
  .leaf p{max-width:26ch}
}
@media (max-width:480px){
  .leaves{grid-template-columns:1fr;gap:1.5rem}
  .leaves::before,.leaves::after,.leaf::before{display:none}
  .leaf{flex-direction:row;text-align:left;align-items:center;gap:.9rem}
  .leaf .lic{width:56px;height:56px}
  .leaf .lic svg.i{width:29px;height:29px}
  .leaf .yn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .leaf p{max-width:none}
  .leaf .body{display:flex;flex-direction:column}
  .leaf .body::before{content:attr(data-yn);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--lc);margin-bottom:.15rem}
}

/* ---------- comparison table ---------- */
.care-tbl{margin-top:1.5rem;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--sand-line)}
table.care{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;table-layout:fixed}
.care th,.care td{padding:1rem .95rem;text-align:center;vertical-align:middle;border-bottom:1px solid var(--sand-line)}
.care tbody th[scope=row]{background:var(--teal);color:#fff;text-align:left;font-weight:700;font-size:.95rem;line-height:1.3;width:16%;border-bottom-color:rgba(255,255,255,.22)}
.care thead th{background:var(--teal);color:#fff;border-bottom-color:rgba(255,255,255,.22)}
.care thead th.corner{text-align:left;font-size:.95rem}
.care .opt-head{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.care .opt-head .oi{width:52px;height:52px;display:grid;place-items:center;color:var(--c)}
.care .opt-head .oi svg.i{width:46px;height:46px;stroke-width:1.4}
.care .opt-head b{color:var(--c);font-size:1rem;line-height:1.25;letter-spacing:-.01em}
.care thead th:not(.corner){background:#fff;vertical-align:bottom;border-bottom:1px solid var(--sand-line)}
.care td{background:var(--bg,#fff);line-height:1.4}
.care .waits{display:inline-flex;gap:.3rem;color:var(--ink)}
.care .waits svg.i{width:26px;height:26px;stroke-width:1.5}
.care .cost{font-weight:800;font-size:1.05rem;letter-spacing:.02em}
.co-1{--c:var(--teal);--bg:#F2F7F7} .co-2{--c:var(--teal-deep);--bg:#F2F7F7}
.co-3{--c:#E0931F;--bg:#FFF9F0} .co-4{--c:var(--orange);--bg:#FFF6EF} .co-5{--c:var(--berry);--bg:#FDF2F5}
.care-foot{margin-top:1rem;font-size:.88rem;color:var(--gray-ink);font-style:italic}
.care-foot p{margin:0}

@media (max-width:900px){
  .care-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.care{min-width:820px}
}
.care .rows-stacked{display:none}
/* phone: table becomes stacked cards */
@media (max-width:620px){
  .care-tbl{overflow:visible;border:0;border-radius:0}
  table.care,.care tbody,.care tr,.care th,.care td{display:block;min-width:0;width:auto}
  .care thead,.care .rows-wide{display:none}
  .care .rows-stacked{display:block}
  .care tbody tr{border:1px solid var(--sand-line);border-radius:var(--r-md);overflow:hidden;margin-bottom:1rem;background:#fff}
  .care td{text-align:left;border-bottom:1px solid var(--sand-line);padding:.85rem 1.1rem}
  .care td:last-child{border-bottom:0}
  .care td::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-ink);margin-bottom:.2rem}
  .care td.opt-cell{background:var(--bg);padding-block:1rem}
  .care td.opt-cell::before{display:none}
  .care .opt-head{flex-direction:row;align-items:center;gap:.8rem}
  .care .opt-head .oi{width:42px;height:42px;flex:none}
  .care .opt-head .oi svg.i{width:38px;height:38px}
}

/* emergency callout sits in the hero, opposite the title */
.care-hero{align-items:center;padding-bottom:clamp(2rem,4vw,3rem)}
.care-hero > div:first-child .page-intro{max-width:46ch}
.emerg-hero{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;
  margin-bottom:0;padding:clamp(1.25rem,2.6vw,1.6rem);
  box-shadow:0 18px 34px -22px rgba(183,37,78,.75)}
.emerg-hero .ei{width:44px;height:44px}
.emerg-hero b{font-size:clamp(1.05rem,1.7vw,1.22rem)}
.emerg-hero .sub{margin-top:.2rem;max-width:40ch}
.emerg-hero .call{margin-left:0;align-self:stretch;justify-content:center;font-size:1.1rem}
@media (max-width:860px){
  .care-hero{grid-template-columns:1fr;gap:1.5rem}
  .emerg-hero{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem}
  .emerg-hero .call{align-self:auto;width:100%}
}
/* the tree below is a centred composition, so its heading centres with it
   (care.css loads only on this page, so the bare id is safe) */
#tree-title{text-align:center}
@media (max-width:760px){#tree-title{text-align:left}}

/* footnotes run the full width of the diagram above them (comment 49) */
.content .care-foot p{max-width:none}
