/* Services: the /services/ explorer and the homepage services overview. Both are generated by
   ops/build_offer_pages.py from OFFERS; behavior lives in services.js. Layout with ka.css tokens
   only. Elements GSAP moves (cards, rows, glyph strokes) carry no CSS transitions on transform or
   opacity; hover effects here use translate, colors and background-size. */

/* ---------- group glyph: the base component is in ka.css (8h); hover fills it on these cards ---------- */
@media (hover:hover) and (pointer:fine){
  :is(.cat,.svc-cat):hover .svc-glyph::before{opacity:1}
  :is(.cat,.svc-cat):hover .svc-glyph{color:var(--surface)}
  :is(.cat,.svc-cat):hover .svc-glyph .g-dot{fill:var(--surface)}
}

/* ---------- homepage overview: a grid of group cards, a deck on phones ---------- */
.cats-wrap{margin-top:36px}
/* seven groups: Start here leads wide, the AI tools (the longest list) run down the right column beside
   it and the next row, and the cards read 01 to 07 left to right, top to bottom */
.cats{position:relative;list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"s s t" "a d t" "h w o";gap:18px}
.cat--start-here{grid-area:s}.cat--ai-tools{grid-area:t}.cat--ai-adoption{grid-area:a}.cat--data-and-analytics{grid-area:d}
.cat--hospital-operations{grid-area:h}.cat--software{grid-area:w}.cat--ongoing{grid-area:o}
.cat{display:flex;flex-direction:column;min-width:0;padding:24px 24px 14px;scroll-margin-top:8px}
.cat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.cat-k{font:600 var(--fs-sm)/1 var(--disp);letter-spacing:.02em;color:var(--mut);font-variant-numeric:tabular-nums}
.cat-h{font-size:var(--fs-xl);margin-bottom:6px}
.cat-line{font-size:var(--fs-sm);line-height:1.55;color:var(--body);margin-bottom:14px}
.cat-list{list-style:none;padding:0;margin:0 -10px 2px}
.cat-list>li{border-top:1px solid var(--line)}
.cat-o{display:grid;grid-template-columns:minmax(0,1fr) auto 8px;grid-template-areas:"n p c" "d p c";column-gap:12px;row-gap:1px;align-items:center;min-height:56px;padding:9px 10px;border-radius:10px;color:inherit;text-decoration:none;background:linear-gradient(90deg,var(--tint-2),var(--tint) 60%) no-repeat 0 0/0% 100%;transition:background-size var(--dur-ui) var(--ease-out),background-color var(--dur-press) var(--ease-ui);-webkit-tap-highlight-color:transparent}
.cat-o:hover{color:inherit}
.cat-o-n{grid-area:n;font:600 var(--fs-ui)/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink);transition:color var(--dur-hover) var(--ease-ui),translate var(--dur-ui) var(--ease-out)}
.cat-o-d{grid-area:d;font-size:13px;line-height:1.35;color:var(--mut)}
.cat-o-p{grid-area:p;font:700 var(--fs-ui)/1.2 var(--sans);color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cat-o-p.free{color:var(--blue)}
.cat-o-p .from{margin-right:3px;font-weight:500;font-size:13px;color:var(--mut)}
.cat-o-p .mo{display:block;margin-top:2px;font-weight:500;font-size:13px;color:var(--mut)}
.cat-o::after{content:"";grid-area:c;width:8px;height:14px;background:var(--mut);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:translate var(--dur-ui) var(--ease-out),background-color var(--dur-hover) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){
  .cat-o:hover{background-size:100% 100%}
  .cat-o:hover .cat-o-n{color:var(--blue);translate:3px 0}
  .cat-o:hover::after{translate:3px 0;background:var(--blue)}
}
.cat-o:active{background-color:var(--tint-2);background-size:100% 100%}
.cat-o:focus-visible{outline-offset:-2px;background-size:100% 100%}
.cat-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 16px;max-width:none;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.cat-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 var(--fs-sm)/1 var(--sans);color:var(--blue);text-decoration:none}
.cat-all::after{content:"\2192";content:"\2192" / "";transition:translate var(--dur-hover) var(--ease-ui)}
.cat-all:hover{color:var(--blue);text-decoration:underline;text-underline-offset:.25em}
@media (hover:hover) and (pointer:fine){.cat-all:hover::after{translate:3px 0}}
.cat-meta{font-size:13px;color:var(--mut)}
/* the first group leads: its offers sit side by side as tiles */
.cat--start-here{background:linear-gradient(160deg,var(--tint) 0,var(--surface) 58%)}
@media (min-width:761px){
  .cat--start-here .cat-line{max-width:52ch}
  .cat--start-here .cat-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:auto 0 16px;padding-top:6px}
  .cat--start-here .cat-list>li{border:0}
  .cat--start-here .cat-o{height:100%;grid-template-columns:minmax(0,1fr) 8px;grid-template-rows:auto auto 1fr;grid-template-areas:"n c" "d c" "p c";align-items:start;row-gap:3px;padding:14px 12px 14px 16px;border-radius:14px;background-color:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh)}
  .cat--start-here .cat-o::after{align-self:center}
  .cat--start-here .cat-o-p{align-self:end;margin-top:12px;text-align:left;font-size:var(--fs-lg)}
  .cat--start-here .cat-foot{margin-top:0}
  .cat--start-here .cat-foot{border-top:0;padding-top:0}
}
.cats-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.cats-custom{font-size:var(--fs-ui);line-height:1.55;color:var(--body);max-width:62ch}
.cats-custom b{color:var(--ink);font-weight:600}
@media (max-width:1023px) and (min-width:761px){
  /* rows read 01 to 07 in order, so the numbers and the tab order agree */
  .cats{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"s s" "t t" "a d" "h w" "o o"}
  .cat--ai-tools .cat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
}
@media (max-width:760px){
  /* the swipe itself is the shared deck (ka.css [data-deck]) */
  .cats-wrap{margin-top:28px}
  .cat{padding:20px 18px 6px}
  .cat-top{margin-bottom:14px}
  .cat .svc-glyph{width:44px;height:44px;border-radius:13px}
  .cat .svc-glyph svg{width:28px;height:28px}
  .cat-line{margin-bottom:10px}
  .cat-o{min-height:52px;padding:8px 10px}
  /* a deck card shows three offers at most; "See all" opens the group on /services/ */
  .cat-list>li:nth-child(n+4){display:none}
  .cat-foot{margin-top:0}
  .cats-foot{margin-top:18px}
  .cats-foot .btn{width:100%}
}

/* ---------- /services/ ---------- */
.pg-services #hdr.scrolled{box-shadow:none}
.svc-hero .sub{max-width:60ch}
/* hero: the menu on one price scale, beside the title on wide screens. One 24px lane per service,
   labeled with its name and price; the whole lane is the link (pointer only, see price_map()) */
.svc-map{display:none}
@media (min-width:1024px){
  .svc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34rem);gap:44px;align-items:center}
  .svc-map{display:block;padding:20px 22px 14px}
  .hero>.wrap .svc-map{background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
}
.svc-map .datafig-title{font:600 var(--fs-lg)/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink);margin-bottom:0}
.svc-map .datafig-body{margin-top:12px}
.svc-map .datafig-src{margin-top:6px;font-size:12.5px;line-height:1.5}
.pm{position:relative;--name:8rem;--lane:24px;--pad:14px}
.pm-grid{position:absolute;top:0;bottom:24px;left:var(--name);right:var(--pad);pointer-events:none}
.pm-grid i{position:absolute;top:0;bottom:0;left:var(--a);border-left:1px dashed var(--line)}
.pm-g{position:relative;display:grid;grid-template-columns:var(--name) minmax(0,1fr);align-items:start;padding:4px 0}
.pm-g+.pm-g{border-top:1px solid var(--line)}
.pm-name{margin:0;padding-right:10px;font:600 12.5px/1.25 var(--sans);color:var(--ink);min-height:var(--lane);display:flex;align-items:center}
.pm-lanes{position:relative;list-style:none;margin:0 var(--pad) 0 0;padding:0}
.pm-lanes li{position:relative;height:var(--lane)}
.pm-o{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
/* the hover row reaches a little past the scale on both sides */
.pm-o::before{content:"";position:absolute;inset:0 calc(-1 * var(--pad)) 0 -8px;z-index:-1;border-radius:7px;transition:background-color var(--dur-hover) var(--ease-ui)}
.pm-o:hover::before{background:var(--tint)}
.pm-lanes li{isolation:isolate}
.pm-o:focus-visible{outline:2px solid var(--focus);outline-offset:0;border-radius:6px}
.pm-m{position:absolute;top:50%;left:var(--a);background:var(--blue2);opacity:.85;transition:opacity var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui)}
.pm-bar{width:calc(var(--b) - var(--a));height:8px;margin-top:-4px;border-radius:4px}
.pm-dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%}
.pm-tip,.pm-mo{position:absolute;top:50%;translate:0 -50%;font:500 12px/1.2 var(--sans);color:var(--body);white-space:nowrap;pointer-events:none;transition:color var(--dur-hover) var(--ease-ui),opacity var(--dur-hover) var(--ease-ui)}
.pm-p{color:var(--mut);font-variant-numeric:tabular-nums}
.pm-tip-r{left:calc(var(--b) + 9px)}
.pm-tip-l{right:calc(100% - var(--a) + 9px)}
/* a label with no room beside its mark sits on its own line above it (a taller lane) */
.pm-lanes li.pm-two{height:38px}
.pm-two .pm-m{top:auto;bottom:7px;margin-top:0}
.pm-two .pm-dot{margin-top:0}
.pm-tip-t{left:var(--l);top:4px;translate:none}
.pm-mo{left:0}
.pm-o:hover .pm-m{background:var(--blue);opacity:1}
.pm-o:hover .pm-n{color:var(--blue)}
.pm:has(.pm-o:hover) .pm-o:not(:hover) .pm-m{opacity:.3}
.pm:has(.pm-o:hover) .pm-o:not(:hover) :is(.pm-tip,.pm-mo){opacity:.5}
.pm-axis{position:relative;height:22px;max-width:none;margin:4px var(--pad) 0 var(--name)}
.pm-axis span{position:absolute;top:4px;left:var(--a);translate:-50% 0;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.pm-axis span:first-child{translate:-30% 0}
.svc-explore{padding-bottom:var(--sec)}
/* sticky filter bar under the fixed header */
.svc-bar{position:sticky;top:72px;z-index:30;margin-bottom:22px;padding:8px 0;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.svc-bar.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 24px color-mix(in srgb,var(--ink) 5%,transparent)}
@media (max-width:760px){.svc-bar{top:68px}}
.svc-chips{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter)}
.svc-chips::-webkit-scrollbar{display:none}
.svc-chips::after{content:"";flex:0 0 1px}
.chip-f{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 16px;border:0;border-radius:999px;background:none;font:600 var(--fs-sm)/1 var(--sans);color:var(--body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui);-webkit-tap-highlight-color:transparent}
.chip-c{font-weight:500;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;transition:color var(--dur-hover) var(--ease-ui)}
.chip-f:hover{color:var(--ink);background:var(--tint)}
.chip-f:active{background:var(--tint-2)}
.chip-f[aria-pressed=true],.chip-f[aria-pressed=true]:hover{color:var(--surface);background:none}
.chip-f[aria-pressed=true] .chip-c{color:var(--surface)}
.chip-f:focus-visible{outline-offset:0}
html:not(.js) .chip-f.is-on{color:var(--surface);background:var(--grad-btn)}
html:not(.js) .chip-f.is-on .chip-c{color:inherit}
/* the thumb slides to the pressed chip; the marker shows the group in view */
.chips-thumb,.chips-spy{position:absolute;left:0;pointer-events:none;opacity:0}
.chips-thumb{top:4px;z-index:0;height:44px;width:var(--tw,0);translate:var(--tx,0) 0;border-radius:999px;background:var(--grad-btn);box-shadow:0 6px 16px color-mix(in srgb,var(--blue) 24%,transparent);transition:translate 480ms var(--ease-out),width 480ms var(--ease-out),opacity 200ms var(--ease-ui)}
.chips-spy{bottom:7px;z-index:2;height:2px;width:var(--sw,0);translate:var(--sx,0) 0;border-radius:2px;background:var(--grad);transition:translate 420ms var(--ease-out),width 420ms var(--ease-out),opacity 240ms var(--ease-ui)}
.has-thumb>.chips-thumb,.has-spy>.chips-spy{opacity:1}
.no-tr>.chips-thumb,.no-tr>.chips-spy{transition:none}
@media (max-width:760px){
  .svc-chips{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent)}
}
/* focus and #group links land below the header and the stuck chip bar */
html:has(.svc-bar){scroll-padding-top:calc(var(--hdr-h) + 76px)}
/* ...except the bar's own chips: a stuck chip sits inside that padding, so focusing one (a click on
   desktop and Android, or Tab) made Chrome scroll the page up by about 420px. The negative margin
   cancels the padding for them; a chip below the fold still scrolls into view from below */
.svc-bar .chip-f{scroll-margin-top:-88px}
/* the groups. Rows pack to the top: while a filter glides, services.js holds the list's old height,
   and a stretched grid would pull the remaining card to that height and snap it back after */
.svc-list{position:relative;display:grid;gap:18px;align-content:start;align-items:start}
.svc-cat{display:grid;grid-template-columns:17rem minmax(0,1fr);align-content:start;align-items:start;gap:8px 44px;padding:30px 30px 22px;border-radius:var(--r-lg);scroll-margin-top:12px}
.svc-cat.is-out{display:none}
/* while the organization chips re-form the AI tools card, services.js tweens its height between the
   two measured sizes (the cards below follow it) and rows that sit past the moving edge are clipped */
.svc-cat.is-gliding{overflow:clip}
.svc-cat-head{position:sticky;top:172px}
.svc-cat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.svc-cat-k{font:500 var(--fs-sm)/1 var(--disp);color:var(--mut);font-variant-numeric:tabular-nums}
.svc-cat-k b{font-weight:700;color:var(--ink)}
.svc-cat-h{font-size:var(--fs-2xl);margin-bottom:8px}
.svc-cat-line{font-size:var(--fs-ui);line-height:1.55;color:var(--body)}
.svc-cat-meta{margin-top:14px;font:600 13px/1.45 var(--sans);color:var(--blue)}
/* the AI tools group: where its tools run, the organization chips, and the chooser under the rows */
.svc-cat-data{position:relative;margin-top:12px;padding-left:28px;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.svc-cat-data::before{content:"";position:absolute;left:0;top:.1em;width:18px;height:18px;background:var(--blue);-webkit-mask:var(--lock) center/contain no-repeat;mask:var(--lock) center/contain no-repeat}
.svc-cat-main{min-width:0}
/* a filter inside the card, so it reads as one: a segmented control (the research explorer's .ao-pick),
   smaller than the group chips and without their gradient thumb; the label sits above it */
.seg-bar{display:block;margin:-4px 0 12px}
.seg-bar[hidden]{display:none}
.seg-lab{margin:0 0 7px;font:700 var(--fs-xs)/1.3 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.seg-chips{display:flex;flex-wrap:wrap;gap:3px;width:fit-content;max-width:100%;padding:4px;border-radius:14px;background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--tint-line)}
.seg-c{display:inline-flex;align-items:center;gap:6px;min-height:34px;margin:0;padding:0 11px;border:0;border-radius:10px;background:none;font:600 13px/1 var(--sans);color:var(--body);white-space:nowrap;cursor:pointer;transition:color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui);-webkit-tap-highlight-color:transparent}
.seg-c .chip-c{font-size:11.5px}
.seg-c:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.seg-c:active{scale:.985}
.seg-c[aria-pressed=true],.seg-c[aria-pressed=true]:hover{color:var(--blue);background:var(--surface);box-shadow:var(--sh)}
.seg-c[aria-pressed=true] .chip-c{color:var(--blue)}
.seg-c:focus-visible{outline-offset:-2px}
.svc-cat .fee-list>li.is-out{display:none}
.ai-choose{margin-top:14px;padding:18px 20px;border-radius:var(--r);background:var(--tint);border:1px solid var(--tint-line)}
.ai-choose p{font-size:var(--fs-ui);line-height:1.6;color:var(--body);max-width:68ch}
.ai-choose .ai-net{margin-top:8px;font-size:var(--fs-sm)}
.ai-quiz{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:52px;margin-top:14px;padding:10px 16px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--tint-line),var(--sh);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.aq-q{font:600 var(--fs-ui)/1.3 var(--disp);color:var(--ink)}
.aq-a{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font:600 var(--fs-sm)/1.3 var(--sans);color:var(--blue)}
.aq-a::after{content:"\2192";content:"\2192" / "";transition:translate var(--dur-hover) var(--ease-ui)}
.ai-quiz:hover{color:inherit}
@media (hover:hover) and (pointer:fine){.ai-quiz:hover .aq-a::after{translate:3px 0}}
.ai-quiz:active{background:var(--tint-2)}
.svc-cat .fee-list{margin:-8px -12px 0}
.svc-cat .fee{grid-template-columns:minmax(0,1fr) 8.5rem 7.5rem 8px;grid-template-areas:"name dur price chev" "line line line chev";row-gap:4px;padding:18px 12px}
.svc-cat .fee-line{max-width:60ch}
.svc-list>.fee-custom{margin-top:0}
.svc-list>.fee-custom h2{grid-column:1/-1;font-size:var(--fs-xl)}
@media (max-width:1023px){
  .svc-cat{grid-template-columns:1fr;gap:10px}
  .svc-cat-main>.seg-bar{margin-top:10px}   /* about 20px under the count line */
  .svc-cat-head{position:static}
  .svc-cat-line{max-width:60ch}
  .svc-cat .fee-list{margin:0 -12px}
}
@media (max-width:760px){
  /* the organization chips stay one row on a phone and scroll sideways inside it */
  .seg-bar{margin:0 0 8px}
  .seg-lab{margin-bottom:6px}
  /* one row that scrolls sideways inside the card, edge to edge */
  .seg-chips{flex-wrap:nowrap;width:auto;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:4px 16px;border-radius:0;box-shadow:inset 0 1px 0 var(--tint-line),inset 0 -1px 0 var(--tint-line);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent)}
  .seg-chips::-webkit-scrollbar{display:none}
  .seg-chips::after{content:"";flex:0 0 1px}
  .seg-c{min-height:44px}
  .aq-a{margin-left:0}
}
@media (max-width:600px){
  .svc-list{gap:14px}
  .svc-cat{padding:20px 16px 8px;border-radius:var(--r);scroll-margin-top:6px}
  .svc-cat-top{margin-bottom:14px}
  .svc-cat .svc-glyph{width:44px;height:44px;border-radius:13px}
  .svc-cat .svc-glyph svg{width:28px;height:28px}
  .svc-cat-h{font-size:var(--fs-xl);margin-bottom:6px}
  .svc-cat-line{font-size:var(--fs-sm)}
  .svc-cat-meta{margin-top:10px}
  .svc-cat .fee-list{margin:0 -8px}
  .svc-cat .fee{grid-template-columns:minmax(0,1fr) auto 8px;grid-template-areas:"name name chev" "line line chev" "dur price chev";column-gap:14px;row-gap:3px;padding:14px 8px}
}
/* how an engagement runs */
.how{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
.how-step{position:relative;padding:22px 20px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.how-step:not(:last-child)::after{content:"";position:absolute;top:39px;right:-17px;width:16px;height:2px;border-radius:2px;background:var(--line-2)}
.how-n{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:16px;border-radius:11px;background:var(--grad-btn);color:var(--surface);font:700 15px/1 var(--disp);box-shadow:0 8px 18px color-mix(in srgb,var(--blue) 22%,transparent)}
.how-step h3{font-size:var(--fs-lg);line-height:1.3;margin-bottom:6px}
.how-step p{font-size:var(--fs-sm);line-height:1.55;color:var(--body)}
.how-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:20px}
@media (max-width:960px){.how{grid-template-columns:repeat(2,minmax(0,1fr))}.how-step:nth-child(2)::after{display:none}}
@media (max-width:560px){
  .how{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .how-step{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding:16px}
  .how-n{grid-row:1/3;margin:0}
  .how-step:not(:last-child)::after{top:auto;bottom:-11px;left:33px;right:auto;width:2px;height:10px}
  .how-step:nth-child(2)::after{display:block}
}