/* =====================================================================
   INTERIOR PAGE: MEDICAL
   ===================================================================== */
.nav-trigger.is-current::after{transform:scaleX(1)}
.page-hero{background:var(--sand-50);padding-block:clamp(1.5rem,3vw,2.25rem) 0}
.crumbs ol{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.9rem;color:var(--gray-ink)}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--sand-line)}
.crumbs a{color:var(--gray-ink);text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.page-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.page-hero-inner.no-photo{grid-template-columns:1fr;padding-bottom:clamp(2rem,4vw,3rem)}
.page-hero-inner.no-photo .page-intro{max-width:62ch}
.page-hero-inner.no-photo .hero-actions ul{max-width:none}
.page-hero h1{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin-bottom:.85rem}
.page-intro{font-size:clamp(1.05rem,1.3vw,1.15rem);line-height:1.55;color:var(--gray-ink);max-width:42ch;text-wrap:pretty}
.hero-actions{margin-top:1.5rem}
.hero-actions h2{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-ink);margin-bottom:.7rem}
.hero-actions ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.hero-actions a{display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:.55rem 1.05rem;border-radius:var(--pill);background:#fff;border:1px solid var(--sand-line);text-decoration:none;font-weight:600;font-size:.98rem;transition:border-color .15s,color .15s}
.hero-actions a:hover{border-color:var(--orange);color:var(--orange-link)}
/* A hero pill carrying .inline-link was picking up that class's orange text, so
   a row could mix orange and black labels depending on how the link was
   authored (comments #446, #450, #451, #452, #454, #455, #457, #458). The pill
   shape already reads as an action; the label is ink and the icon keeps the
   orange accent. Hover still goes orange, from the rule above. */
.hero-actions a.inline-link{color:var(--ink);text-decoration:none}
.hero-actions a.inline-link:hover,
.hero-actions a.inline-link:focus-visible{color:var(--orange-link)}
.hero-actions svg.i{width:19px;height:19px;color:var(--orange)}
.page-photo{margin:0;position:relative;align-self:end}
.page-photo img{width:100%;height:auto;display:block;aspect-ratio:1.42;object-fit:cover;object-position:50% 20%;border-radius:999px 999px 0 0}

.page-body{padding-block:clamp(3rem,6vw,4.5rem) clamp(4rem,7vw,6rem)}
.content{min-width:0}
.content > section + section{margin-top:clamp(3.5rem,6vw,5rem)}
.content h2{font-size:clamp(1.8rem,2.8vw,2.4rem);margin-bottom:1rem;text-wrap:balance}
.content p{max-width:70ch}
/* lists should sit on the same measure as the prose above them, but component
   lists (steps, pills, cards, contact rows) own their own width */
.content > section > ul,.content > section > ol,
.content .topic > ul,.content .topic > ol,
.acc-body > ul,.acc-body > ol{max-width:70ch}
.content .steps,.content .related,.content .plans,.content .vrows,
.content .tiles,.content .cta-row,.content .doclist,.content .triad{max-width:none}
.content p + p{margin-top:1rem}
.lead{font-size:1.15rem}

/* plan tiles */
.plans{list-style:none;margin:1.5rem 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,300px));gap:1rem}
.plans > li{position:relative;background:var(--sand-50);border-radius:var(--r-md);padding:1.4rem 1.25rem 1.25rem;font-weight:700;font-size:1.2rem;letter-spacing:-.01em;overflow:hidden}
.plans > li::before{content:"";display:block;width:26px;height:32px;border-radius:13px 13px 0 0;background:var(--c,var(--orange));margin-bottom:.9rem}
.plans > li:nth-child(3n+2){--c:var(--teal)}
.plans > li:nth-child(3n+3){--c:var(--lt-orange)}

/* tooltips */
.tip{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:inherit;cursor:help;position:relative;text-decoration:underline dotted 2px var(--teal);text-underline-offset:4px}
.tip:hover,.tip:focus-visible{color:var(--teal-deep)}
.tip-link{cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:inherit}
.tip-link:hover,.tip-link:focus-visible{color:var(--orange-link)}
.tip-bubble{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);width:max-content;max-width:min(240px,66vw);background:var(--ink);color:#fff;font-size:.875rem;font-weight:500;line-height:1.4;text-align:left;padding:.6rem .8rem;border-radius:10px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility 0s .15s;z-index:20;text-decoration:none}
.tip-bubble::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink)}
.tip:hover .tip-bubble,.tip:focus .tip-bubble{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .15s,transform .15s}

/* timeline (#9) */
.steps{list-style:none;margin:1.75rem 0 0;padding:0;position:relative}
.steps > li:not(:last-child)::before{content:"";position:absolute;left:23px;top:52px;bottom:4px;width:2px;background:repeating-linear-gradient(var(--sand-line) 0 6px,transparent 6px 12px)}
.steps{max-width:980px}
.steps > li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:1.25rem;padding-bottom:2rem}
.steps > li:last-child{padding-bottom:0}
.step-n{width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--orange);color:var(--orange);display:grid;place-items:center;font-weight:800;font-size:1.15rem;position:relative;z-index:1}
.steps h3{font-size:1.25rem;letter-spacing:-.01em;margin:.55rem 0 .5rem}
.steps ul{margin:.5rem 0 0;padding-left:1.1rem}
.steps ul li{margin-bottom:.45rem;max-width:64ch}
.steps ul li::marker{color:var(--orange)}
.steps .protect{background:var(--teal-50);border:1px solid var(--teal-line);border-radius:var(--r-md);padding:1.1rem 1.25rem}
.steps .protect h3{margin-top:0;color:var(--teal-deep)}
.steps li.last .step-n,
.steps li.teal .step-n{background:var(--teal);border-color:var(--teal);color:#fff}
/* A closing item that is a callout rather than a step carries no number (#462).
   Without the badge the body would otherwise drop into the grid's 48px number
   column, so that row collapses to a single column. */
.steps > li.no-n{grid-template-columns:1fr}
/* ...and the preceding step's dotted connector would then point at nothing. */
.steps > li:has(+ li.no-n)::before{content:none}

/* cost table */
.table-wrap{margin-top:1.5rem;border:1px solid var(--sand-line);border-radius:var(--r-md)}
/* The frame is right around a real table, but a .triad already borders each of
   its cards, so the wrapper drew a second line above them (#459, #460). The
   wrapper is kept for its margin and its mobile overflow scrolling. */
.table-wrap-bare{border:0;border-radius:0}
table.costs{width:100%;border-collapse:separate;border-spacing:0;font-size:.98rem;table-layout:fixed}
.costs th,.costs td{padding:.95rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--sand-line)}
.costs thead th{background:var(--sand);color:var(--teal-deep);font-weight:700;vertical-align:bottom}
.costs thead tr:first-child th:first-child{border-top-left-radius:var(--r-md)}
.costs thead tr:first-child th:last-child{border-top-right-radius:var(--r-md)}
.costs thead small{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-ink);font-weight:700;margin-bottom:.15rem}
.costs thead a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:4px;font-size:1.05rem;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.costs thead a svg.i{width:16px;height:16px}
.costs thead a:hover{color:var(--ink)}
.costs tbody th{font-weight:700;width:24%}
.costs tbody th small{display:block;font-weight:500;color:var(--gray-ink);font-size:.85rem}
.costs tbody tr:nth-child(even) td,.costs tbody tr:nth-child(even) th{background:#FCFAF7}
.costs tbody tr:last-child th,.costs tbody tr:last-child td{border-bottom:0}
.costs tbody tr:last-child th{border-bottom-left-radius:var(--r-md)}.costs tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-md)}
.costs .tip-bubble{bottom:auto;top:calc(100% + 10px)}
.costs .tip-bubble::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink)}
.footnote{margin-top:.9rem;font-size:.88rem;color:var(--gray-ink)}
.content p.footnote{max-width:none}

/* accordions */
.accs{margin-top:1.5rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;max-width:1000px}
.acc{border:1px solid var(--sand-line);border-radius:var(--r-md);background:#fff;transition:border-color .15s}
.acc[open]{border-color:var(--orange)}
.acc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1.15rem 1.35rem;font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary .plus{margin-left:auto;width:32px;height:32px;border-radius:50%;background:var(--sand-50);display:grid;place-items:center;flex:none;transition:transform .25s var(--ease),background-color .15s}
.acc > summary .plus svg.i{width:18px;height:18px}
.acc[open] > summary .plus{transform:rotate(180deg);background:var(--orange);color:#fff}
.acc-body{padding:0 1.35rem 1.35rem}
.acc-body .btn{margin-top:1rem}
/* .btn-soft is now reserved for a row of peer jump-links (the leave types on
   Leave of Absence, the free benefits on Eligibility, the two FSAs). A single
   call to action is .btn-primary — comments #469-#474 and #489-#493 asked for
   the ones that were standalone CTAs to be promoted. */
.btn-soft{background:var(--sand-50);color:var(--ink);border-color:var(--sand-line)}
.btn-soft:hover{border-color:var(--ink)}
/* A button whose destination does not exist yet, so it must not read as live
   (the Hindi EAP orientation on India Benefits). Mirrors .hero-actions a.pending. */
.btn.is-pending{background:transparent;color:var(--gray-ink);border-color:var(--sand-line);
  border-style:dashed;cursor:default;pointer-events:none}

/* closing band: find support + explore related */
.closing{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 100%);color:#fff;position:relative;overflow:hidden}
.closing::before{content:"";position:absolute;right:-120px;bottom:-260px;width:520px;height:640px;border:70px solid rgba(255,255,255,.07);border-bottom:0;border-radius:999px 999px 0 0}
.closing{padding-block:clamp(3rem,5vw,4rem)}
.closing-inner{position:relative;display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.closing h2{font-size:clamp(1.35rem,1.9vw,1.6rem);margin-bottom:1rem}
.vendor{background:#fff;color:var(--ink);border-radius:var(--r-md);padding:1.25rem 1.35rem;border-top:4px solid var(--orange)}
.vendor-top{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;margin-bottom:1.1rem}
.vendor .kind{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-link)}
.logo-ph{height:36px;min-width:100px;padding:0 .8rem;border:1.5px dashed var(--sand-line);border-radius:8px;display:grid;place-items:center;font-size:.75rem;color:var(--gray-ink)}
/* ---- unified contact card (mirrors the Contacts page tile) ---- */
.vendor-logo{height:30px;display:flex;align-items:center;margin-bottom:.9rem;flex:none;max-width:100%}
.vendor-logo img,.vendor-logo .vlogo-svg,.vendor-logo svg{max-height:26px;width:auto;max-width:190px;display:block}
.vendor-logo .logo-fd{color:var(--orange);display:flex;align-items:center}
.vendor-logo .logo-fd svg{width:24px;height:24px;max-height:24px}
.vendor-logo-none{height:14px;margin-bottom:.4rem}
.vendor-logo-none::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--orange)}
.vendor-service{font-size:.9rem;font-weight:700;color:var(--teal-deep);margin-top:.2rem}
.vrows{margin-top:.9rem;display:grid;gap:.45rem;font-size:.95rem}
.vrow{display:flex;align-items:flex-start;gap:.6rem}
.vrow svg.i{width:17px;height:17px;color:var(--orange);margin-top:.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vendor .vrows a.phone{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;line-height:1.2;margin-top:0}
.vendor .vrows a.phone:hover,.vendor .vrows a.phone:focus-visible{color:var(--orange)}
.vendor .vrows a.web{color:var(--ink);text-underline-offset:3px;word-break:break-word}
.vendor .vrows a.web:hover,.vendor .vrows a.web:focus-visible{color:var(--orange-link)}
.vrow-note span{font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-ink)}
.vrow-note{margin-top:.5rem;gap:0}
.vrow-meta{padding-left:1.6rem;gap:0;margin-top:-.2rem}
.vrow-meta span{font-size:.88rem;color:var(--gray-ink)}
.vendor .vrows + .stores-row{margin-top:1rem}
.vendor h3{font-size:1.1rem;letter-spacing:-.01em}
.vendor .phone{display:flex;align-items:center;min-height:44px;margin-top:.3rem;font-size:clamp(1.35rem,2vw,1.6rem)}
.stores{display:flex;align-items:center;gap:.6rem;margin-top:1rem}
.stores-label{font-size:.85rem;font-weight:600;color:var(--gray-ink);margin-right:.15rem}
.store{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;border:1px solid var(--sand-line);background:#fff;transition:border-color .15s,transform .15s}
.store:hover{border-color:var(--ink);transform:translateY(-1px)}
.store img{width:24px;height:24px;border-radius:6px;display:block}
.store .store-ic{width:21px;height:21px;display:block}

.related{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.related a{display:inline-flex;align-items:center;min-height:42px;padding:.5rem 1rem;border-radius:var(--pill);border:1.5px solid rgba(255,255,255,.5);color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;transition:background-color .15s,color .15s,border-color .15s}
.related a:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

@media (max-width:980px){
  .page-hero-inner{grid-template-columns:1fr}
  .page-hero{padding-bottom:0}
  .page-photo{max-width:440px;margin-inline:auto}
  .closing-inner{grid-template-columns:1fr}
}
@media (max-width:760px){
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.costs:not(.costs-rates){min-width:640px}
  .costs .tip-bubble{display:none}
  .tip-bubble{left:auto;right:0;transform:translate(0,4px);max-width:min(240px,calc(100vw - 3rem))}
  .tip:hover .tip-bubble,.tip:focus .tip-bubble{transform:none}
  .tip-bubble::after{left:auto;right:18px;margin-left:0}
  .plans{grid-template-columns:1fr}
}

/* ===================== PAGE SHELL (awaiting content) ===================== */
.shell-body{padding-block:clamp(3rem,6vw,4.5rem) clamp(3.5rem,7vw,5.5rem)}
.shell-note{display:inline-flex;align-items:center;gap:.75rem;background:var(--sand-50);border:1px solid var(--sand-line);border-radius:var(--pill);padding:.7rem 1.4rem .7rem .7rem;font-weight:700;color:var(--gray-ink)}
.shell-note .si{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--orange);flex:none}
.shell-note .si svg.i{width:18px;height:18px}

/* ===================== PER-PAYCHECK CONTRIBUTIONS ===================== */
.pay-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.freq{display:inline-flex;background:var(--sand-50);border:1px solid var(--sand-line);border-radius:var(--pill);padding:.25rem}
.freq input{position:absolute;opacity:0;width:1px;height:1px}
.freq label{display:inline-flex;align-items:center;min-height:40px;padding:.45rem 1.15rem;border-radius:var(--pill);font-weight:700;font-size:.95rem;color:var(--gray-ink);cursor:pointer;transition:background-color .15s,color .15s}
.freq input:checked + label{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(40,40,40,.14)}
.freq input:focus-visible + label{outline:3px solid var(--teal);outline-offset:2px}
table.pay{width:100%;border-collapse:separate;border-spacing:0;font-size:.98rem;table-layout:fixed}
.pay th,.pay td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--sand-line)}
.pay thead th{background:var(--sand);color:var(--teal-deep);font-weight:700;vertical-align:bottom}
.pay thead th:first-child{border-top-left-radius:var(--r-md)}
.pay thead th:last-child{border-top-right-radius:var(--r-md)}
.pay thead small{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-ink);font-weight:700;margin-bottom:.1rem}
.pay tbody th{font-weight:700;width:30%}
.pay td{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pay tbody tr:nth-child(even) td,.pay tbody tr:nth-child(even) th{background:#FCFAF7}
.pay tbody tr:last-child th,.pay tbody tr:last-child td{border-bottom:0}
#contributions .amt{display:none}
#contributions:has(#f-week:checked) .amt-week,
#contributions:has(#f-semi:checked) .amt-semi{display:inline}
.pay-note{margin-top:.9rem;font-size:.9rem;color:var(--gray-ink)}
.surcharge{display:flex;align-items:center;gap:.8rem;margin-top:1.1rem;background:var(--sand-50);border-radius:var(--r-md);padding:.9rem 1.2rem;font-size:.95rem}
.surcharge svg.i{width:19px;height:19px;color:var(--orange);flex:none}
.surcharge b{font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .pay-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.pay{min-width:560px}
  .pay-head{flex-direction:column;align-items:flex-start}
}

/* ===================== CONTENT COMPONENTS ===================== */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* callout */
.callout{margin-top:1.5rem;background:var(--sand-50);border:1px solid var(--sand-line);border-left:5px solid var(--orange);border-radius:var(--r-sm) var(--r-md) var(--r-md) var(--r-sm);padding:clamp(1.2rem,2.4vw,1.75rem) clamp(1.3rem,2.6vw,1.9rem);max-width:1000px}
.callout > :first-child{margin-top:0}
.callout p{max-width:66ch}
/* A whole section can be rendered as a callout (#468). Its heading stays an h2
   so the page outline is unchanged, but it takes the callout's heading size
   rather than the full section-heading scale. */
.callout h3,.callout h2{font-size:1.2rem;margin-bottom:.5rem}
.callout .cta-row{margin-bottom:0}
/* A callout that is a run of contact lines rather than prose: body line-height
   leaves phone numbers floating apart, so tighten the leading and the gap
   between groups (#492). */
.callout-tight p{line-height:1.45}
.callout-tight p + p{margin-top:.8rem}

/* inline CTA button rows */
.cta-row{margin-top:1.25rem}
.acc-body .cta-row{margin-top:1rem;margin-bottom:0}
.cta-row .btn svg.i{width:16px;height:16px;margin-left:.1rem}

/* grouped rows inside a comparison table */
.costs tbody tr.grp th{background:var(--sand-50);color:var(--teal-deep);font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;font-weight:800}
.costs.plain thead{display:none}
.costs.plain tbody td:first-child{font-weight:700}

/* document library */
.doclist{margin-top:1.25rem;display:grid;gap:.5rem;max-width:860px;list-style:none;padding:0}
.doclist li{margin:0}
.doclist a{display:flex;align-items:flex-start;gap:.85rem;min-height:44px;padding:.8rem 1rem;border:1px solid var(--sand-line);border-radius:var(--r-sm);background:#fff;font-weight:600;color:var(--ink);text-decoration:none;transition:border-color .15s,background-color .15s}
.doclist a:hover,.doclist a:focus-visible{border-color:var(--orange);background:var(--sand-50);text-decoration:none}
.doclist svg.i{width:20px;height:20px;color:var(--orange);flex:none;margin-top:1px}
.doclist a[href="#"]{color:var(--gray-ink);border-style:dashed}

/* vendor card extras in the closing band */
.vendor-link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:700;font-size:.98rem;color:var(--orange-link);text-decoration:none;border-bottom:1px solid currentColor}
.vendor-link:hover,.vendor-link:focus-visible{color:var(--ink)}
.vendor-link svg.i{width:15px;height:15px}
.vendor .vendor-link{margin-right:1.25rem}
.vendor .vendor-link + .phone{margin-top:.35rem}
.stores-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.stores-row .stores-label{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;font-weight:800;opacity:.8;width:100%}
.stores-row .store{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sand-50);border:1px solid var(--sand-line)}
.stores-row .store img{width:26px;height:26px;object-fit:contain}
.stores-row .store svg{width:22px;height:22px;color:var(--ink)}
.stores-row .stores-label{color:var(--gray-ink);opacity:1}

/* multiple vendor cards stack */
.closing-inner .vendor + .vendor{margin-top:1rem}

/* multiple vendor cards: flow across the band, related topics below */
.closing-inner.stacked{display:block}
.closing-inner.stacked > div + div{margin-top:clamp(2.25rem,4vw,3rem)}
.vendors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1rem;align-items:stretch}
.vendors-grid .vendor{margin-top:0;display:flex;flex-direction:column;height:100%}
.vendors-grid .vendor .phone{margin-top:auto;padding-top:.3rem}
.vendors-grid .vendor .stores-row{margin-top:auto;padding-top:.75rem}
.vendors-grid .vendor .phone + .stores-row{margin-top:.75rem;padding-top:0}
.vendors .vendor + .vendor{margin-top:1rem}
.vendors-grid .vendor + .vendor{margin-top:0}
.vendor .stores-row{margin-top:.75rem}
.vendor-link{overflow-wrap:anywhere;max-width:100%}
.vendor h3{overflow-wrap:anywhere}

/* inline CTA buttons must wrap on narrow screens */
.cta-row{display:flex;flex-wrap:wrap;gap:.6rem;max-width:100%}
.cta-row .btn{white-space:normal;text-align:left;max-width:100%;min-width:0;flex:0 1 auto}
.vendor-name{color:inherit;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:1px}
.vendor-name:hover,.vendor-name:focus-visible{color:var(--orange-link)}

/* numbered request steps inside an accordion, with nested detail lists */
.req-steps{margin:0;padding-left:1.35rem;display:grid;gap:.8rem}
.req-steps>li{padding-left:.3rem}
.req-steps>li::marker{font-weight:800;color:var(--orange)}
.req-steps ul{margin:.6rem 0 0;padding-left:1.15rem;display:grid;gap:.35rem;list-style:disc}
.req-steps ul li{color:var(--gray-ink)}
/* sub-bullets nested under a lead-in item */
.acc-body ul ul,.content ul ul{margin:.45rem 0 0;padding-left:1.15rem;list-style:circle}
.acc-body ul ul li,.content ul ul li{color:var(--gray-ink)}

.legal-lists{display:grid;gap:1.6rem;margin-top:.5rem}
.legal-lists h3{font-size:1.05rem;letter-spacing:-.01em;margin:0 0 .5rem}
.legal-lists ul{margin:0;padding-left:1.2rem;display:grid;gap:.35rem}

.sub-head{font-size:clamp(1.15rem,1.7vw,1.3rem);font-weight:800;letter-spacing:-.015em;margin:clamp(2rem,3.5vw,2.75rem) 0 .4rem}
.callout .sub-head,.sub-head:first-child{margin-top:0}
.sub-head + p{margin-bottom:.25rem}
.callout .sub-head{color:var(--teal-deep)}
.foot-note{margin:.6rem 0 0;font-size:.88rem;line-height:1.5;color:var(--gray-ink)}

/* flat headed subsections (replaces accordions where the content is not a
   disclosure - matches the well-being-emotional / -financial house style) */
.topics{display:grid;gap:clamp(1.6rem,3vw,2.25rem);margin-top:1.25rem}
/* the .accs wrapper is dropped on conversion, so space every topic that
   follows something, and let the grid handle the wrapped case */
* + .topic{margin-top:clamp(1.6rem,3vw,2.25rem)}
.topic > h3{font-size:clamp(1.1rem,1.6vw,1.25rem);letter-spacing:-.015em;margin:0 0 .5rem}
.topic > :last-child{margin-bottom:0}
.topic .cta-row{margin-top:1rem}
.topics > .topic{margin-top:0}

.costs caption{caption-side:top;text-align:left;background:var(--sand);color:var(--teal-deep);font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:.8rem 1.1rem;border-radius:var(--r-md) var(--r-md) 0 0;border-bottom:1px solid var(--sand-line)}
/* With a caption, the caption is the top of the table, so it carries the
   rounded corners and the header row below it must be square (#336). */
.costs:has(caption) thead tr:first-child th:first-child{border-top-left-radius:0}
.costs:has(caption) thead tr:first-child th:last-child{border-top-right-radius:0}

.costs-example .grp th{background:var(--sand-50);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-ink)}

/* three parallel statements - was a one-row table with a bold <th> first cell */
.triad{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;max-width:none}
.triad-card{background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-md);
  padding:1.35rem 1.4rem 1.5rem;border-top:4px solid var(--orange);display:flex;flex-direction:column}
.triad-2{border-top-color:var(--lt-orange)}
.triad-3{border-top-color:var(--teal)}
.triad-kicker{margin:0 0 .15rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-ink)}
.triad-card h3{font-size:1.15rem;letter-spacing:-.015em;margin:0 0 .5rem}
/* A triad heading can link to its own page (#496). This matches the vendor-card
   heading treatment — ink text with an orange rule, going orange on hover —
   rather than the inline-link orange, which shouts at heading size. */
.triad-card h3 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--orange);
  padding-bottom:1px}
.triad-card h3 a:hover,.triad-card h3 a:focus-visible{color:var(--orange-link)}
.triad-card p:last-child{margin:0;max-width:none;color:var(--gray-ink);line-height:1.55}

/* door motif on anchor buttons, matching the .plans boxes */
svg.i.door-i{fill:var(--c,var(--orange));stroke:none;width:17px;height:17px}
.door-1{--c:var(--orange)}
.door-2{--c:var(--teal)}
.door-3{--c:var(--lt-orange)}

/* door boxes that carry body copy, not just a label */
.plans-rich{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.plans-rich > li{font-size:1rem;font-weight:400;padding:1.4rem 1.4rem 1.5rem}
.plans-rich h3{font-size:1.15rem;letter-spacing:-.015em;margin:0 0 .4rem}
.plans-rich > li > p{margin:0;color:var(--gray-ink);max-width:none}
/* V6 added multi-paragraph copy inside these cards (Disability STD/LTD).
   The rule above zeroes p margins, so stacked paragraphs ran together and
   copy placed after .plan-detail read as another bullet. */
.plans-rich > li > p + p{margin-top:.6rem}
.plans-rich > li > .plan-detail + p{margin-top:.85rem}
.content .plans-rich .plan-detail{list-style:none;margin:.85rem 0 0;padding:.85rem 0 0;border-top:1px solid var(--sand-line);display:grid;gap:.5rem;font-size:.95rem}
.content .plans-rich .plan-detail li{color:var(--gray-ink);padding:0;margin:0}
.plans-rich > li:nth-child(3n+2){--c:var(--teal)}

/* Shared in-prose link style (comment #391). Base links inherit body
   colour, so without this a link in a sentence is invisible. */
.inline-link{color:var(--orange-link);font-weight:600;text-underline-offset:3px}
.inline-link:hover,.inline-link:focus-visible{text-decoration-thickness:2px}
/* A <strong> inside a link (the vendor URLs) resolved to 900 against the link's
   own 600, so 11 links sat a weight heavier than the other 50. The link's
   colour and underline already carry the emphasis. */
.inline-link strong,.inline-link b{font-weight:inherit}
/* A body-copy link whose document has not arrived yet. It is deliberately not
   promoted to the orange link treatment: the client's plan documents are
   "greyed out, coming soon" rather than removed, so it must not read as live. */
.content a.pending{color:var(--gray-ink);text-decoration:none;cursor:default;pointer-events:none}
.content a.pending::after{content:" (coming soon)";font-weight:600;font-size:.9em}

/* A flat list of equal items (conditions, services). Earlier these were parsed
   as heading + sub-bullets, which implied a hierarchy that isn't there
   (comments #337, #377, #386). */
.flow-list{columns:3;column-gap:2.5rem;margin:1rem 0 0;padding:0;list-style:none;max-width:none}
.flow-list li{break-inside:avoid;padding:.3rem 0 .3rem 1.1rem;position:relative;line-height:1.45}
.flow-list li::before{content:"";position:absolute;left:0;top:.82em;width:5px;height:5px;
  border-radius:50%;background:var(--orange)}
@media (max-width:900px){.flow-list{columns:2}}
@media (max-width:560px){.flow-list{columns:1}}

/* A hero action whose destination does not exist yet (#419): reads as
   pending rather than looking like a working link. */
.hero-actions a.pending{color:var(--gray-ink);border-style:dashed;cursor:default}
.hero-actions a.pending:hover{border-color:var(--sand-line);color:var(--gray-ink)}
.hero-actions .soon{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-ink);opacity:.75;margin-left:.1rem}

/* ===================== 2027 OPEN ENROLLMENT =========================
   Two new pieces, both built from existing tokens.

   .oe-alert is the "action required" deadline band. It borrows the shape
   of the emergency module on Where to Go for Care (icon + message + white
   pill) but stays in Frontdoor Orange on purpose: berry is reserved on
   that page for 911/ER, and reusing it for an enrollment deadline would
   blur what berry means across the site.

   .pullquote reuses the .callout field and orange left rule so the CPO
   message reads as part of the existing family rather than a new idea. */
.oe-alert{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.9rem,2vw,1.4rem);margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:clamp(1.1rem,2.2vw,1.4rem) clamp(1.2rem,2.6vw,1.7rem);background:var(--orange);color:#fff;border-radius:var(--r-md)}
.oe-alert .ei{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18)}
.oe-alert .ei svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oe-alert b{display:block;font-size:1.1rem;letter-spacing:-.01em}
.oe-alert .sub{display:block;margin-top:.2rem;line-height:1.45;max-width:72ch}
.oe-alert .call{justify-self:end;white-space:nowrap;background:#fff;color:var(--orange-link);font-weight:700;padding:.7rem 1.3rem;border-radius:var(--pill);text-decoration:none;transition:background-color .15s}
.oe-alert .call:hover,.oe-alert .call:focus-visible{background:var(--sand-50);text-decoration:none}
@media (max-width:860px){
  .oe-alert{grid-template-columns:auto 1fr;align-items:start}
  .oe-alert .call{grid-column:1/-1;justify-self:start;margin-top:.35rem}
}

.pullquote{margin:1.5rem 0 0;background:var(--sand-50);border:1px solid var(--sand-line);border-left:5px solid var(--orange);border-radius:var(--r-sm) var(--r-md) var(--r-md) var(--r-sm);padding:clamp(1.4rem,2.8vw,2rem) clamp(1.3rem,2.6vw,1.9rem);max-width:1000px}
.pullquote blockquote{margin:0}
.pullquote p{max-width:66ch}
.pullquote p + p{margin-top:.85rem}
.pullquote figcaption{margin-top:1.15rem;font-weight:700}
.pullquote figcaption span{display:block;font-weight:600;font-size:.95rem;color:var(--gray-ink)}

/* Doc list entries that are not live yet: the dashed/gray treatment from
   .doclist a[href="#"] already reads as pending, so .soon only has to stop
   the click and carry the explanatory note. */
.doclist a.soon{pointer-events:none;cursor:default}
.doclist em{display:block;font-style:normal;font-weight:500;font-size:.92rem;color:var(--gray-ink);margin-top:.15rem;line-height:1.45}




/* Two peer calls to action sharing a row. Used on Open Enrollment, where
   "attend a webinar" and "enrol" are the same beat in the journey and each
   was too thin to hold a full-width section on its own. Both keep their own
   <section> and heading, so the copy and the document outline are unchanged;
   only the headings step down to suit a half-width column. */
.content > .two-up{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:clamp(3.5rem,6vw,5rem)}
.content > .two-up + section{margin-top:clamp(3.5rem,6vw,5rem)}
.two-up > section{background:var(--sand-50);border:1px solid var(--sand-line);border-left:5px solid var(--orange);border-radius:var(--r-sm) var(--r-md) var(--r-md) var(--r-sm);padding:clamp(1.3rem,2.6vw,1.8rem) clamp(1.3rem,2.6vw,1.75rem);display:flex;flex-direction:column}
.two-up > section > h2{font-size:clamp(1.25rem,1.9vw,1.5rem);margin-bottom:.6rem}
.two-up > section > p{max-width:none}
.two-up .cta-row{margin-top:auto;padding-top:1.1rem;margin-bottom:0}
@media (max-width:760px){.content > .two-up{grid-template-columns:1fr}}

/* Resources grid. Eight stacked rows read as a long list; four across in two
   rows reads as a shelf. The mark follows one rule: a partner resource shows
   that partner's logo, a Frontdoor resource shows the door motif in the
   rotating brand colours. Only three of the eight have a vendor, so the door
   carries the rest rather than leaving five tiles blank. */
.content .res-grid{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:none}
.res-grid > li{margin:0;--c:var(--orange)}
.res-grid > li:nth-child(3n+2){--c:var(--teal)}
.res-grid > li:nth-child(3n+3){--c:var(--lt-orange)}
.res-grid .card{display:flex;flex-direction:column;gap:.85rem;height:100%;background:var(--sand-50);border:1px solid var(--sand-line);border-radius:var(--r-md);padding:1.2rem 1.15rem 1.25rem;text-decoration:none;color:var(--ink);transition:border-color .15s,background-color .15s}
a.card:hover,a.card:focus-visible{border-color:var(--orange);background:#fff;text-decoration:none}
.res-grid .mark{display:flex;align-items:flex-end;height:32px}
.res-grid .mark img{max-height:30px;max-width:118px;width:auto;height:auto;object-fit:contain;object-position:left bottom}
.res-grid .door{display:block;width:25px;height:31px;border-radius:13px 13px 0 0;background:var(--c)}
.res-grid .label{font-weight:700;font-size:1rem;line-height:1.3;letter-spacing:-.01em}
.res-grid .note{font-size:.86rem;font-weight:500;color:var(--gray-ink);line-height:1.4;margin-top:auto;padding-top:.55rem}
.res-grid .card.soon{border-style:dashed}
.res-grid .card.soon .label{color:var(--gray-ink)}
.res-grid .card.soon .door{background:var(--gray)}
.res-grid .card.soon .mark img{filter:grayscale(1);opacity:.55}
@media (max-width:980px){.content .res-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){
  .content .res-grid{grid-template-columns:1fr}
  /* mark to the left, label and note stacked beside it */
  .res-grid .card{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;row-gap:.25rem;align-items:center;padding:1rem 1.1rem}
  .res-grid .mark{grid-column:1;grid-row:1/-1;height:auto;align-items:center}
  .res-grid .label,.res-grid .note{grid-column:2}
  .res-grid .note{margin-top:0;padding-top:0}
}

/* Compact variant of the resources shelf. On Open Enrollment the shelf sits
   mid-page between the webinar row and "What to expect", so the cards are a
   quick scan rather than a destination: smaller mark, tighter padding, label
   set at body size. (Open Enrollment board #21.) */
.res-grid.res-compact .card{gap:.55rem;padding:.85rem .9rem .9rem}
.res-grid.res-compact .mark{height:22px}
.res-grid.res-compact .mark img{max-height:20px;max-width:92px}
.res-grid.res-compact .door{width:18px;height:22px;border-radius:9px 9px 0 0}
.res-grid.res-compact .label{font-size:.92rem;line-height:1.25}
.res-grid.res-compact .note{font-size:.8rem;padding-top:.35rem}
@media (max-width:520px){.res-grid.res-compact .card{padding:.8rem .9rem}}

/* "NEW" badge. The 2027 changes include three genuinely new programmes and the
   word was getting lost inside bold body copy, so it gets the orange pill the
   WordPress page uses. (Open Enrollment board #6, #7, #8.) */
.tag-new{display:inline-block;background:var(--orange);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.18em .5em;border-radius:4px;margin-right:.45rem;vertical-align:.12em;line-height:1.5}
summary .tag-new{vertical-align:.1em}
/* A long address or URL set as an inline link is one unbreakable token, so at
   phone width it pushed the page into horizontal scroll (the People Support
   Center email on Open Enrollment). break-word only engages when the word
   genuinely cannot fit, so ordinary links are untouched. */
.content a.inline-link{overflow-wrap:break-word}

/* ---- CPO letter (Open Enrollment) --------------------------------------
   Deliberately compact. This is the one block on the page that nobody needs
   in order to enroll, so it earns its place by being brief -- smaller measure
   and type than body copy, tight padding, and a short signature row. The
   portrait uses the site's own arch (999px 999px 0 0, as .page-photo) sat
   flush to the card's base and breaking just above its top edge: that lets the
   photo read at a sensible width without the card growing to match, and keeps
   the dome from being clipped flat by the card's own top. No orange band --
   the hero and the enrollment alert already carry orange, and a third block
   stacked beneath them was the thing that read as too much. */
.cpo-letter{position:relative;margin:0;
  background:var(--sand-50);border:1px solid var(--sand-line);border-radius:var(--r-md)}
.cpo-grid{display:grid;grid-template-columns:1fr clamp(190px,23%,268px);
  gap:clamp(1.1rem,3vw,2.25rem);align-items:end}
.cpo-main{padding:clamp(.9rem,1.5vw,1.05rem) 0 clamp(.9rem,1.5vw,1.05rem)
  clamp(.95rem,1.6vw,1.2rem)}
.cpo-letter h2{margin:0 0 .5rem;color:var(--orange-link);
  font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.25;letter-spacing:-.015em}
.cpo-letter blockquote{margin:0}
.cpo-letter blockquote p{max-width:78ch;font-size:.945rem;line-height:1.55;
  color:var(--gray-ink)}
.cpo-letter blockquote p + p{margin-top:.55rem}

.cpo-portrait{margin:0;align-self:end;
  overflow:hidden;background:var(--sand);
  border-radius:999px 999px 0 0;border-bottom-right-radius:var(--r-md)}
.cpo-portrait img{display:block;width:100%;height:auto;aspect-ratio:.72;
  object-fit:cover;object-position:50% 14%}

.cpo-sign{display:flex;align-items:center;gap:clamp(.7rem,1.8vw,1.15rem);
  margin-top:clamp(.8rem,1.8vw,1.1rem);padding-top:clamp(.7rem,1.5vw,.95rem);
  border-top:1px solid var(--sand-line)}
.cpo-sig{display:block;width:clamp(92px,11vw,118px);height:auto}
.cpo-name{font-weight:700;font-size:.92rem;line-height:1.25;letter-spacing:-.01em}
.cpo-name span{display:block;font-weight:500;color:var(--gray-ink)}
.cpo-compass{display:block;width:clamp(52px,6vw,64px);height:auto;margin-left:auto}

@media (max-width:760px){
  /* arch becomes a band under the text rather than a sliver beside it */
  .cpo-grid{grid-template-columns:1fr;gap:0}
  .cpo-main{padding:clamp(.95rem,3.5vw,1.15rem) clamp(.95rem,3.5vw,1.15rem) 0}
  .cpo-letter blockquote p{max-width:none}
  .cpo-portrait{width:min(190px,52%);margin:clamp(1rem,3.5vw,1.4rem) auto 0;
    border-bottom-right-radius:0}
}

/* Pastel #739 -- a .plan-detail list that is a set of choices rather than a
   set of facts. Numbering it separates the three LTD options from the
   explanatory paragraphs that follow them in the same card. */
.content .plans-rich .plan-choices{counter-reset:choice;gap:.55rem}
.content .plans-rich .plan-choices li{counter-increment:choice;position:relative;padding-left:1.6rem}
.content .plans-rich .plan-choices li::before{content:counter(choice) ".";position:absolute;left:0;top:0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}