/* V3 Explore care: the photo hero with the page's one search, the everyday tiles, the frontier, the catalogue
   (with what your insurance still covers after it), the close. Layered on the home's style.css and v3-shared/v3.css. */

/* Anything toggled with the hidden attribute stays hidden, whatever display a rule below gives it */
.care-hero [hidden],.catalogue [hidden]{display:none!important}

/* ---------- 1. Hero: the V2 photo (a hand reaching into refracted light), search on the first screen ---------- */
.hero.hero-page.care-hero{min-height:max(640px,100svh);overflow:visible;z-index:2;background:#5d6a71}
.care-hero .hero-bg{overflow:hidden}
.care-hero .hero-bg img{object-position:60% 42%}
.care-hero .hero-shade{background:
  linear-gradient(180deg,rgba(12,16,18,.55) 0%,rgba(12,16,18,.2) 9%,rgba(12,16,18,0) 18%),
  linear-gradient(90deg,rgba(13,17,20,.88) 0%,rgba(13,17,20,.76) 28%,rgba(13,17,20,.46) 48%,rgba(13,17,20,.14) 66%,rgba(13,17,20,0) 82%),
  linear-gradient(0deg,rgba(13,17,20,.62) 0%,rgba(13,17,20,0) 42%)}
.care-hero .hero-copy{max-width:600px}
.care-hero .lead{max-width:30em}
.hero-search-shell{position:relative}
.hero-search{display:flex;align-items:center;gap:8px;width:100%;max-width:560px;height:60px;padding:0 6px 0 24px;border-radius:999px;background:rgba(240,243,241,.12);border:1px solid rgba(240,243,241,.3);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);transition:border-color .2s,background .2s}
.hero-search:focus-within{border-color:rgba(240,243,241,.62);background:rgba(240,243,241,.16)}
.hero-search:has(input:focus-visible){outline:2px solid var(--jade);outline-offset:3px}
.hero-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--pearl);font:400 var(--fs-17)/1.2 var(--sans);outline:none;text-overflow:ellipsis}
.hero-search input::placeholder{color:rgba(240,243,241,.74)}
.hero-search button{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--pearl);color:var(--obsidian);cursor:pointer;transition:background .2s,transform .2s var(--ease-out)}
.hero-search button:hover{background:#fff}
.hero-search button:active{transform:scale(.96)}
.care-hero svg,.cat-search svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hero-search button svg{width:20px;height:20px}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.hero-links{display:flex;align-items:center;gap:4px 28px;margin-top:-6px;white-space:nowrap}
.hero-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-15);color:var(--pearl);text-decoration:none}
/* Arrow links are never underlined (Tyler, 10/4): the arrow moves on hover instead */
.hero-links a>span[aria-hidden]{display:inline-block;transition:transform .18s var(--ease-out)}
.hero-links a:hover>span[aria-hidden]{transform:translateY(3px)}
.ask-hero{text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:rgba(240,243,241,.45)!important}
.ask-hero .short{display:none}
@media (max-width:1100px) and (min-width:761px){
  .care-hero .hero-bg img{object-position:34% 42%}
  .care-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.55) 0%,rgba(12,16,18,.2) 9%,rgba(12,16,18,0) 18%),linear-gradient(90deg,rgba(13,17,20,.72) 0%,rgba(13,17,20,.42) 55%,rgba(13,17,20,.1) 85%),linear-gradient(0deg,rgba(13,17,20,.9) 0%,rgba(13,17,20,.72) 38%,rgba(13,17,20,.2) 64%,rgba(13,17,20,0) 80%)}
}
@media (max-width:760px){
  .hero.hero-page.care-hero{min-height:max(620px,100svh)}
  .care-hero .hero-bg img{object-position:50% 30%}
  .care-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,.16) 9%,rgba(12,16,18,0) 18%),linear-gradient(0deg,rgba(12,16,18,.95) 0%,rgba(12,16,18,.86) 42%,rgba(12,16,18,.42) 57%,rgba(12,16,18,0) 76%)}
  .hero-search{height:56px;padding-left:18px}
  .hero-search input{font-size:16px}
  .hero-search button{width:44px;height:44px}
  .ask-hero .long{display:none}.ask-hero .short{display:inline}
}
@media (max-width:359px){.ask-hero{display:none!important}}

/* Suggestions: the V2 combobox list under the hero search, in dark glass */
.suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:12;overflow:hidden;border-radius:18px}
.suggestion-heading{padding:14px 18px 8px;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;line-height:1.5;text-transform:uppercase}
.suggestions [role=listbox]{max-height:320px;overflow-y:auto;overscroll-behavior:contain;scroll-padding:6px;padding:0 6px 6px}
.suggestion-option{display:flex;flex-direction:column;gap:3px;min-height:56px;padding:10px 12px;border-radius:12px;cursor:pointer}
.suggestion-option>span{font-size:var(--fs-15);line-height:1.35}
.suggestion-option small{font-size:var(--fs-13);line-height:1.4}
.suggestion-ask{display:flex;align-items:center;gap:8px;min-height:50px;padding:0 18px;font-size:var(--fs-15);text-decoration:none}
.hero-search-shell .suggestions{max-width:560px;background:rgba(17,21,24,.94);border:1px solid rgba(240,243,241,.14);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:0 28px 64px rgba(0,0,0,.5);color:var(--pearl)}
.hero-search-shell .suggestion-heading{color:var(--dim)}
.hero-search-shell .suggestion-option small{color:var(--silver)}
.hero-search-shell .suggestion-option:hover,.hero-search-shell .suggestion-option[aria-selected=true]{background:rgba(240,243,241,.09)}
.hero-search-shell .suggestion-ask{border-top:1px solid var(--line);color:var(--pearl)}
@media (max-width:760px){.suggestions [role=listbox]{max-height:260px}}

/* ---------- 2. One short intro: five photo tiles in a row (a swipe row on phones and tablets) ----------
   Tyler, 10/6: "simplify". "The everyday stuff" and "The frontier" were two sections with a lead and a line under
   every tile; now one heading and the tiles. Each tile lands on its category below, closed, and the row glows. */
.sec.care-starts{padding-block:clamp(80px,9vw,136px) clamp(44px,4.6vw,68px)}
.starts-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:clamp(32px,3.6vw,52px)}
.starts-row .tile{position:relative;gap:12px}
.starts-row .tile-img img{height:auto;aspect-ratio:4/5}
.starts-row .tile:nth-child(1) .tile-img img{object-position:44% 50%}
.starts-row .tile:nth-child(4) .tile-img img{object-position:96% 35%}
.starts-row .tile-t{font-size:var(--fs-17);font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink);text-wrap:balance}
.tile-go{display:inline-block;color:var(--emerald);transition:transform .2s var(--ease-out)}
.tile:hover .tile-go,.tile:focus-visible .tile-go{transform:translateX(4px)}
/* Frontier care carries its caveat on the photo (after the title in the markup, so the link reads title first) */
.starts-row .start-tag{position:absolute;top:12px;left:12px;border-color:rgba(240,243,241,.32);background:rgba(12,16,18,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--pearl)}
@media (max-width:900px){
  /* Tablets and phones: one swipe row, edge to edge, so the list still starts within a screen */
  .starts-row{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter) 0;scroll-padding-inline:var(--gutter)}
  .starts-row::-webkit-scrollbar{display:none}
  .starts-row::after{content:"";flex:0 0 max(1px,calc(var(--gutter) - 16px))}/* the end gutter, after the last tile */
  .starts-row .tile{flex:0 0 30%;min-width:0;scroll-snap-align:start}
}
@media (max-width:760px){
  .starts-row{gap:12px}
  .starts-row::after{flex-basis:max(1px,calc(var(--gutter) - 12px))}
  .starts-row .tile{flex-basis:42%;gap:10px}
  .starts-row .tile-t{font-size:var(--fs-15)}
  .starts-row .start-tag{top:10px;left:10px}
}
@media (max-width:359px){.starts-row .tile{flex-basis:54%}}

/* ---------- 4. The catalogue ---------- */
/* The rail search (Tyler, 10/3): the "Search" pill is a field of its own, so you search right where you are.
   It opens to the rail's width, filters the catalogue as you type, and mirrors the hero field. */
.cat-search{position:relative;width:118px;max-width:100%;transition:width .22s var(--ease-out)}
.cat-search svg{position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--emerald);pointer-events:none}
.cat-search input{display:block;width:100%;height:44px;margin:0;padding:0 12px 0 44px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--ink);font:500 var(--fs-15)/1 var(--sans);outline:none;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;cursor:pointer;transition:border-color .2s,background .2s}
.cat-search input::placeholder{color:var(--ink);opacity:1}
.cat-search input::-webkit-search-cancel-button,.cat-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.cat-search input:hover{border-color:var(--ink)}
.cat-search:focus-within,.cat-search.has-query{width:100%}
.cat-search:focus-within input,.cat-search.has-query input{border-color:var(--emerald);cursor:text}
.cat-search:focus-within input::placeholder{color:#6a7372}
.cat-search.has-query input{padding-right:46px}
.cat-search:focus-within input{box-shadow:inset 0 0 0 1px var(--emerald)}/* one 2px emerald edge while typing */
.cat-clear{position:absolute;right:6px;top:50%;display:grid;place-items:center;width:32px;height:32px;margin-top:-16px;padding:0;border:0;border-radius:50%;background:none;color:var(--emerald);font:400 20px/1 var(--sans);cursor:pointer}
.cat-clear:hover{background:rgba(54,94,76,.08)}
@media (prefers-reduced-motion:reduce){.cat-search,.cat-search input{transition:none}}
#results:focus{outline:none}
.search-assist{display:flex;align-items:center;justify-content:space-between;gap:0 20px;flex-wrap:wrap;margin-bottom:14px;padding:4px 18px 4px 22px;border-radius:18px;background:rgba(54,94,76,.06);border:1px solid rgba(54,94,76,.18)}
.search-assist p{padding:10px 0;font-size:var(--fs-15);line-height:1.45;color:#535b5a}
.search-assist b{font-weight:500;color:var(--ink)}
.search-assist .arrow-link{color:var(--emerald);font-weight:500}

/* Compact (Tyler, 10/6): the intro above shares this chalk (the shared hairline divides them), so the catalogue
   needs less room above its head */
.sec.catalogue{padding-block:clamp(44px,4.6vw,68px) clamp(80px,9vw,136px)}
.catalogue-layout{display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:clamp(40px,5vw,88px);align-items:start;margin-top:clamp(28px,3.2vw,44px)}
.catalogue-sidebar{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
.catalogue-main{min-width:0}
.sidebar-label{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)}
.group-filters{display:flex;flex-direction:column;border-top:1px solid rgba(28,33,34,.12)}
.group-filters button{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 2px;border:0;border-bottom:1px solid rgba(28,33,34,.12);background:none;color:var(--ink);font:500 var(--fs-15)/1.3 var(--sans);letter-spacing:-.01em;text-align:left;cursor:pointer;transition:color .18s}
.group-filters button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--emerald);transform:scaleX(0);transform-origin:left;transition:transform .18s var(--ease-out)}
.group-filters button:hover{color:var(--emerald)}
.group-filters button[aria-pressed=true]{color:var(--emerald)}
.group-filters button[aria-pressed=true]::after{transform:scaleX(1)}
.gf-c{margin-left:auto;font-family:var(--mono);font-size:var(--fs-12);font-weight:500;color:#5f6866}
.sidebar-help{display:flex;flex-direction:column;gap:6px;margin-top:22px;padding:22px 22px 14px;border-radius:18px;background:var(--paper);border:1px solid rgba(200,206,206,.8)}
.sidebar-help p{font-size:var(--fs-17);letter-spacing:-.01em;line-height:1.35;color:var(--ink);text-wrap:balance}
.sidebar-help .arrow-link{color:var(--emerald)}
.catalogue-layout:has(#search-assist:not([hidden])) .sidebar-help{display:none}

.results-meta{display:flex;align-items:center;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;min-height:44px;padding-bottom:8px}
#results{font-size:var(--fs-15);color:var(--ash)}
#expand-all{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-left:auto;padding:0;border:0;background:none;color:var(--ink);font:500 var(--fs-15)/1 var(--sans);cursor:pointer}
#expand-all span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--rule);font-size:15px;line-height:1}
#expand-all:hover span{border-color:var(--ink)}
#empty{padding:36px 0 8px;border-top:1px solid rgba(28,33,34,.12)}
#empty h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
#empty p{margin-top:10px;font-size:var(--fs-17);color:var(--ash)}
#empty .actions{margin-top:24px}
#empty .btn{height:48px}

/* Group headings (Tyler, 10/6: "bigger headers"): real headings in the V3 heading style, not 12px mono labels.
   One size between the section h2 and the category names, so the three levels read at a glance. */
.catalogue-group{margin-top:clamp(36px,3.4vw,52px)}
.catalogue-group:first-child{margin-top:10px}
.group-h{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding-bottom:14px}
.group-h h3,.ins-head h3{font-size:clamp(28px,2.6vw,36px);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--ink);text-wrap:balance}
.group-h .category-status{flex:none;margin-right:44px}
.group-list{border-bottom:1px solid rgba(28,33,34,.12)}
/* A link that lands on the first row of a group stops at the group's heading, so the heading stays in view */
.category,.catalogue-group{scroll-margin-top:calc(84px + var(--catbar,0px) + env(safe-area-inset-top,0px))}
.category{border-top:1px solid rgba(28,33,34,.12)}
/* Closed rows (Tyler, 10/6: "accordions should default to closed"): the name, then a one-line preview of whole
   entries. The entry count shares the preview's cell: it shows on open rows ("3 of 27 entries" while searching),
   and on closed rows only when not one whole entry fits. */
.category summary{position:relative;z-index:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto 30px;grid-template-areas:"title teaser status plus";align-items:center;gap:6px 20px;min-height:60px;padding:9px 0;list-style:none;cursor:pointer}
.category summary::-webkit-details-marker{display:none}
.category summary:focus-visible{outline:none}
.category summary:focus-visible::before,.category.landed summary::before{content:"";position:absolute;z-index:-1;inset:6px -10px;border-radius:14px;background:rgba(54,94,76,.08);box-shadow:inset 0 0 0 1.5px rgba(54,94,76,.5)}
/* A deep link lands on a row: it glows, then settles. The first key press brings keyboard focus rings back. */
.landing .category summary:focus-visible::before{display:none}
.landing .category.landed summary::before,.category.landed summary::before{display:block;animation:landed 2.6s var(--ease-out) forwards}
@keyframes landed{0%,50%{opacity:1}100%{opacity:0}}
/* Reduced motion: the glow holds still, then clears when page.js removes it (no fade) */
@media (prefers-reduced-motion:reduce){.landing .category.landed summary::before,.category.landed summary::before{animation:none}}
.category-title{grid-area:title;font-size:clamp(22px,1.8vw,26px);font-weight:400;letter-spacing:-.02em;line-height:1.2;color:var(--ink);text-wrap:balance;transition:color .18s}
.category-count{grid-area:teaser;justify-self:start;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.04em;color:#5f6866;white-space:nowrap}
.category-count[data-shown]:not([data-shown=""])::before{content:attr(data-shown) " of "}
.category:not([open]):not(.no-teaser) .category-count{display:none}
.category-teaser{--teaser-lines:1;grid-area:teaser;min-width:0;overflow:hidden;white-space:nowrap;font-size:var(--fs-15);line-height:1.45;color:var(--ash)}
.category-teaser::before{content:attr(data-teaser)}
.category[open] .category-teaser{visibility:hidden}
/* In a group that shares one status, closed rows leave it to the group label (screen readers still hear it) */
.shared .category:not([open]) .category-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.category summary:hover .category-title{color:var(--emerald)}
.plus{grid-area:plus;position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);transition:border-color .2s,background .2s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--ink);transition:transform .3s var(--ease-out)}
.plus::after{transform:rotate(90deg)}
.category summary:hover .plus{border-color:var(--ink)}
.category[open] .plus{background:var(--ink);border-color:var(--ink)}
.category[open] .plus::before,.category[open] .plus::after{background:var(--pearl)}
.category[open] .plus::after{transform:rotate(0)}
/* Status: emerald for care that may be eligible, outlined for review, quiet grey for insurance and partner help and for exclusions */
.category-status{grid-area:status;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:#fff;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.04em;white-space:nowrap;color:var(--ash)}
.category-status::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.category-status.covered{border-color:rgba(54,94,76,.32);background:rgba(54,94,76,.07);color:var(--emerald)}
.category-status.review{border-color:rgba(37,42,43,.45);color:var(--ink)}
.category-status.review::before{background:none;box-shadow:inset 0 0 0 1.5px currentColor}
.category-status.aca::before,.category-status.partner::before{border-radius:2px}
.category-status.not-covered{background:transparent}
.category-status.not-covered::before{width:9px;height:1.5px;border-radius:0}
/* A quiet caveat on the peptide and cannabis rows, after the group's status (presentation only; not searched) */
.category.flagged summary{grid-template-columns:auto minmax(0,1fr) auto auto 30px;grid-template-areas:"title teaser status flag plus"}
.category-flag{grid-area:flag;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(37,42,43,.26);font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.04em;white-space:nowrap;color:var(--ash)}
.category-flag::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.category-flag::after{content:attr(data-flag)}
/* What your own insurance covers: its own block after the catalogue, so it never reads as budget care */
.insurance-block{margin-top:14px;padding:26px 28px 4px;border-radius:18px;background:var(--paper);border:1px solid rgba(200,206,206,.8)}
.ins-head{display:flex;flex-direction:column;gap:8px;padding-bottom:14px}
.ins-head p{font-size:var(--fs-15);line-height:1.5;color:var(--ash)}
.catalogue-group:not([hidden])~.insurance-block{margin-top:56px}
.insurance-block .group-list{border-bottom:0}
/* The panel's heading is the label here, so the row's own status tag steps back (screen readers still hear it) */
.insurance-block .category-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.category-body{padding:2px 0 34px}
.category-description{max-width:46em;font-size:var(--fs-15);line-height:1.6;color:var(--ash)}
.category ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px;margin-top:22px}
.category.has-notes ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}
.category li{position:relative;padding-left:18px;font-size:var(--fs-15);line-height:1.45;color:var(--ink)}
.category li::before{content:"";position:absolute;left:1px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--emerald)}
.category[data-group=exclusions] li::before{top:.68em;width:8px;height:1.5px;border-radius:0;background:var(--ash)}
.category li>p{margin-top:5px;font-size:var(--fs-13);line-height:1.55;color:var(--ash)}
.category li.search-match{background:rgba(54,94,76,.1);border-radius:8px;outline:6px solid rgba(54,94,76,.1)}
.category-action{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:20px}
.category-action a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-15);color:var(--emerald);text-underline-offset:4px;text-decoration-color:rgba(54,94,76,.4)}
.category-action a:hover{text-decoration-color:var(--emerald)}
.category-action .arrow-link{color:var(--emerald)}/* "See all in-network partners →": an arrow link, so no underline */
.catalogue-note{margin-top:28px;font-size:var(--fs-13);line-height:1.6;color:var(--ash)}
.catalogue-note a{color:var(--ink);text-underline-offset:3px;white-space:nowrap}

/* 1100px and below: closed rows stay on one line (name, preview, +; the caveat pill before the + where a row has
   one). Open rows put the status and the count ("3 of 27 entries") under the name. */
@media (max-width:1100px){
  .category ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category summary{grid-template-columns:auto minmax(0,1fr) 30px;grid-template-areas:"title teaser plus";gap:6px 16px;min-height:56px}
  .category.flagged summary{grid-template-columns:auto minmax(0,1fr) auto 30px;grid-template-areas:"title teaser flag plus"}
  .category[open] summary,.category.flagged[open] summary{grid-template-columns:auto minmax(0,1fr) 30px;grid-template-areas:"title title plus" "status count plus";row-gap:8px}
  .category.flagged[open] summary{grid-template-areas:"title title plus" "status count plus" "flag flag plus"}
  .category[open] .category-count{grid-area:count}
  .category[open] .category-teaser{display:none}
  .category:not([open]) summary>.category-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .category-status,.category-flag{justify-self:start}
  /* In the insurance panel the heading is the label: open rows put the count straight under the title */
  .insurance-block .category[open] summary{grid-template-areas:"title title plus" "count count plus"}
}
@media (max-width:900px){
  /* One pinned bar while you browse: the search, then the section chips */
  .catalogue{--catbar:62px}
  .catalogue-layout{display:block;margin-top:clamp(28px,5vw,44px)}
  .catalogue-sidebar{position:sticky;top:calc(68px + env(safe-area-inset-top,0px));z-index:6;flex-direction:row;align-items:center;gap:0;min-width:0;margin:0 calc(var(--gutter) * -1);padding:9px 0 9px var(--gutter);background:var(--chalk);box-shadow:0 1px 0 rgba(28,33,34,.1)}
  .cat-search{flex:none;width:122px;margin-right:8px}
  .cat-search svg{left:14px;color:#fff}
  .cat-search input{padding-left:42px;border-color:var(--emerald);background:var(--emerald);color:#fff;font-size:16px}
  .cat-search input::placeholder{color:#fff}
  .cat-search input:hover{border-color:var(--emerald);background:#2c4f3f}
  /* Typing: the field takes the whole bar and the chips step aside. With a search on, the pill keeps the words. */
  .cat-search:focus-within{flex:1;width:auto;margin-right:var(--gutter)}
  .catalogue-sidebar:has(.cat-search:focus-within) .group-filters{display:none}
  /* ...and the coverage note waits, so the first matches sit above the keyboard */
  .catalogue-layout:has(.cat-search:focus-within) .search-assist{display:none}
  .cat-search.has-query:not(:focus-within){width:176px}
  .cat-search:focus-within input,.cat-search.has-query input{background:#fff;color:var(--ink)}
  .cat-search:focus-within svg,.cat-search.has-query svg{color:var(--emerald)}
  .cat-search:focus-within input::placeholder{color:#6a7372}
  .sidebar-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .group-filters{flex:1;min-width:0;flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 var(--gutter) 0 0;border:0;scroll-padding-inline:0 var(--gutter)}
  /* Chips fade out at whichever edge has more to scroll to, so a cut-off chip reads as "more" */
  .group-filters.more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .group-filters.more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
  .group-filters.more-left.more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 56px),transparent)}
  .group-filters::-webkit-scrollbar{display:none}
  .group-filters button{flex:none;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;background:#fff;white-space:nowrap}
  .group-filters button::after{display:none}
  .group-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--pearl)}
  .group-filters button[aria-pressed=true] .gf-c{color:rgba(240,243,241,.72)}
  .gf-c{margin-left:2px}
  .sidebar-help{display:none}
  .search-assist{margin:16px 0 0}
  .results-meta{margin-top:14px}
  .catalogue-group:not([hidden])~.insurance-block{margin-top:40px}
}
@media (max-width:760px){
  .catalogue-layout{scroll-margin-top:calc(68px + env(safe-area-inset-top,0px))}
  .search-assist{padding:4px 16px 8px}
  #results,#expand-all{font-size:14px}
  .results-meta{gap:4px 12px}
  .search-assist p{padding-bottom:2px}
  /* Phones: two lines per closed row, the name and a one-line preview (was two preview lines), the caveat pill under them */
  .category summary,.category.flagged summary{grid-template-columns:auto minmax(0,1fr) 30px;grid-template-areas:"title title plus" "teaser teaser plus";gap:3px 12px;padding:11px 0;min-height:0}
  .category.flagged summary{grid-template-areas:"title title plus" "teaser teaser plus" "flag flag plus"}
  .category.flagged:not([open]) .category-flag{margin-top:6px}
  .category-title{font-size:21px}
  .category-teaser{font-size:14px}
  .category-status,.category-flag{height:26px;padding:0 10px}
  /* The group's status pill sits under its heading */
  .group-h{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:12px}
  .group-h .category-status{margin-right:0;height:26px;padding:0 10px}
  .insurance-block{padding:20px 18px 2px}
  .category ul,.category.has-notes ul{grid-template-columns:1fr;gap:12px;margin-top:18px}
  .category-body{padding-bottom:26px}
  .catalogue-group{margin-top:32px}
}
@media (max-width:359px){.category-title{font-size:20px}.group-h h3,.ins-head h3{font-size:25px}}

/* ---------- 5. Close: the family in the dunes ---------- */
.care-close .photo-bg img{object-position:50% 40%}
.care-close .photo-shade{background:linear-gradient(90deg,rgba(12,16,18,.72) 0%,rgba(12,16,18,.42) 36%,rgba(12,16,18,.06) 60%,rgba(12,16,18,0) 74%),linear-gradient(0deg,rgba(12,16,18,.38) 0%,rgba(12,16,18,0) 40%)}
.care-close .close-note{max-width:34em}
@media (max-width:760px){.care-close .photo-bg img{object-position:50% 30%}.care-close .photo-shade{background:linear-gradient(0deg,rgba(12,16,18,.96) 0%,rgba(12,16,18,.88) 38%,rgba(12,16,18,.5) 50%,rgba(12,16,18,.06) 62%,rgba(12,16,18,0) 74%)}}

/* Headlines that break after their first sentence on phones */
.br-phone{display:none}
@media (max-width:760px){.br-phone{display:inline}}

/* ---------- Phones: the sticky join bar steps aside while the search has focus ---------- */
body.searching .sticky-cta{visibility:hidden}