/* Clarity: insurance group (/insurance/ and the six /insurance/<payer>/ pages).
   Builds on clarity.css tokens only. Payer logos are shown in greyscale so the six marks
   read as one set rather than six competing brand colours. */

.page-insurance .nowrap{white-space:nowrap}

/* ---------- shared: headings inside the document column ---------- */
.page-insurance .prose h3{font-size:clamp(23px,2vw,26px);line-height:1.2;font-weight:400;margin:48px 0 14px}
.page-insurance .prose section > h2 + h3{margin-top:32px}

/* ---------- /insurance/: in-network plans (white band) ---------- */
.ins-plans{background:var(--white);padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px)}
.ins-plans-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px clamp(40px,6vw,96px);align-items:start}
.ins-plans h2{font-size:clamp(30px,2.8vw,38px);line-height:1.12}
.ins-plans-intro p{margin-top:20px;max-width:44ch}
.ins-plans-list{min-width:0}
.payers{list-style:none;border-top:1px solid var(--ink)}
.payers li{border-bottom:1px solid var(--line)}
.payer{display:grid;grid-template-columns:128px minmax(0,1fr) 168px;gap:6px 32px;align-items:center;padding:22px 0;text-decoration:none}
.payer:hover{color:var(--ink)}
.payer-logo{display:flex;align-items:center;height:48px}
/* one slate tone for every mark; Anthem's cross keeps its white figure, so it is greyed rather than flattened */
.payer-logo img{width:auto;max-width:none;filter:brightness(0) invert(13%) sepia(20%) saturate(900%) hue-rotate(170deg);opacity:.7;transition:opacity .18s ease-out}
.payer-logo img.logo-anthem{filter:grayscale(1) contrast(4) brightness(.5);mix-blend-mode:multiply}
.payer:hover .payer-logo img{opacity:1}
.logo-aetna{height:21px}
.logo-alameda{height:27px}
.logo-anthem{height:33px}
.logo-cigna{height:34px}
.logo-curative{height:20px}
.logo-lyra{height:46px;margin-left:-9px}
.payer-text{min-width:0}
.payer-name{display:block;font-family:var(--serif);font-size:26px;line-height:1.2;letter-spacing:-0.01em}
.payer:hover .payer-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.payer-note{display:block;margin-top:4px;font-size:15.5px;line-height:1.4;color:var(--ink-2);max-width:50ch}
.payer-who{font-size:15px;line-height:1.35;color:var(--ink-2);text-align:right}
.ins-plans-intro .payers-note{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}

/* ---------- /insurance/: benefits checker ---------- */
.ins-check{padding:clamp(72px,8vw,112px) 0 0;scroll-margin-top:16px}
.ins-check-head{max-width:860px}
.ins-check h2{font-size:clamp(30px,2.8vw,38px);line-height:1.12}
.ins-check-head p{margin-top:16px;max-width:64ch}
.ins-check-tool{max-width:960px;margin-top:32px;background:var(--white);border-radius:var(--r-ui);padding:clamp(8px,1.4vw,16px);min-height:120px}
.ins-check-tool noscript p{font-size:16px;color:var(--ink-2)}
/* click-to-load: the button sits mid-panel until the Thrizer embed replaces it */
#open-checker{margin:20px clamp(0px,1vw,8px)}
.ins-check-fallback{max-width:960px;margin-top:16px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.ins-check-fallback a{color:var(--ink)}

/* ---------- /insurance/: fees ---------- */
.fees{margin-top:32px;border-top:1px solid var(--ink)}
.fee{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:20px 40px;padding:28px 0;border-bottom:1px solid var(--line)}
.fee-who{min-width:0}
.fee-photos{display:flex;gap:8px;margin-bottom:16px}
.fee-photos img{width:52px;height:64px;object-fit:cover;border-radius:var(--r-ui);background:var(--mist)}
.prose .fee h3{margin:0;font-size:24px}
.prose .fee-role{margin-top:6px;font-size:15px;font-weight:500;color:var(--blue)}
.prose .fee-note{margin-top:12px;font-size:16px;line-height:1.45;color:var(--ink-2);max-width:46ch}
.fee-rates{align-self:end}
.fee-rates > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.fee-rates > div:first-child{border-top:0}
.fee-rates dt{font-size:15.5px;line-height:1.35;color:var(--ink-2);white-space:nowrap}
.fee-rates dd{margin:0;font-family:var(--serif);font-size:27px;line-height:1.1;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}

/* ---------- /insurance/: Network Gap Exception ---------- */
.call-script{margin:24px 0;background:var(--white);border-radius:var(--r-ui);padding:clamp(24px,3vw,36px)}
.call-script figcaption{margin:0 0 12px;font-size:15px;color:var(--ink-2)}
.call-script blockquote{margin:0}
.call-script blockquote p{font-family:var(--serif);font-size:clamp(19px,1.6vw,21px);line-height:1.45;text-indent:-0.4em}
.practice-info{width:100%;margin-top:20px;border-collapse:collapse;border-top:1px solid var(--ink);font-size:16px;line-height:1.45}
.practice-info th,.practice-info td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.practice-info th{width:32%;padding-right:24px;font-weight:500}
.practice-info td{font-variant-numeric:tabular-nums}
.letter-panel{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;margin:40px 0 0;padding:clamp(24px,3vw,36px);background:var(--mist);border-radius:var(--r-ui)}
.prose .letter-panel h3{margin:0 0 8px}
.letter-panel p{font-size:16px;max-width:46ch}
.letter-panel .btn{flex:none}

/* ---------- /insurance/: aside ---------- */
.toc{list-style:none;border-top:1px solid var(--line)}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:block;padding:10px 0;font-size:16px;text-decoration:none}
.toc a:hover{text-decoration:underline;text-underline-offset:.2em}
.aside-block .aside-more{margin-top:16px}

/* ---------- payer pages ---------- */
.page-insurance .page-head-grid h1{font-size:clamp(44px,5vw,72px);line-height:1.02;letter-spacing:-0.025em}
/* no lead photograph on payer pages, so the document starts closer to the head */
.page-insurance .page-head + .doc{padding-top:clamp(24px,3vw,40px)}
.payer-lead{font-family:var(--serif);font-weight:300;font-size:clamp(21px,1.8vw,24px);line-height:1.42;margin-bottom:56px}
.aside-block .aside-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:15px}
.aside-plans{padding:12px 4px 0}
.aside-plans h2{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-2);margin-bottom:8px}
.aside-plans ul{list-style:none;border-top:1px solid var(--line)}
.aside-plans li{border-bottom:1px solid var(--line)}
.aside-plans a{display:block;padding:9px 0;font-size:16px;text-decoration:none}
.aside-plans a:hover{text-decoration:underline;text-underline-offset:.2em}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ins-plans-grid{grid-template-columns:minmax(0,1fr)}
  .ins-plans-intro p{max-width:62ch}
  /* phones and tablets: payer pages read the article first, then physicians and other plans;
     the index drops the aside's letter block, which repeats the letter panel in the article */
  .payer-doc > .doc-aside{order:1}
  .aside-letter{display:none}
}
@media (max-width:760px){
  .payer{grid-template-columns:minmax(0,1fr) 92px;gap:6px 16px;align-items:start;padding:20px 0}
  .payer-text{grid-column:1;grid-row:1}
  .payer-logo{grid-column:2;grid-row:1;justify-content:flex-end;height:36px}
  .payer-who{grid-column:1/-1;text-align:left}
  .payer-name{font-size:23px}
  .logo-aetna{height:16px}
  .logo-alameda{height:21px}
  .logo-anthem{height:25px}
  .logo-cigna{height:26px}
  .logo-curative{height:15px}
  .logo-lyra{height:35px;margin:0 -7px 0 0}
  .fee{grid-template-columns:minmax(0,1fr);gap:16px}
  .letter-panel{flex-direction:column;align-items:flex-start}
  .practice-info th{width:38%;padding-right:16px}
  .practice-info{font-size:15.5px}
  .page-insurance .page-head-grid h1{font-size:44px}
  .payer-lead{margin-bottom:48px}
}
@media (max-width:420px){
  .letter-panel .btn{width:100%}
}