/* Health Coalition: the site's own additions to system.css (linked after it). Only what the system
   does not ship: the logo sizes, inner-page flow, the two heroes, forms' states, search, breadcrumbs,
   the product spec card and the hero switch. Tokens only. */

/* ---------------------------------------------------------------- logo, skip link */
.nav__logo-img { height: 28px; width: auto; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__logo-img { height: 24px; }
  .nav__link .chev { display: none; }
}
@media (max-width: 639px) { .nav__logo-img { height: 24px; } }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; padding: var(--s-2) var(--s-4); background: var(--bg); z-index: 60; }

/* nav extras: the search button and the language link sit before the main button */
.nav__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); cursor: pointer; }
.nav__icon:hover { background: var(--surface); }
.nav__icon svg { width: 18px; height: 18px; }
.nav__actions { gap: var(--s-2); }
.nav__actions .nav__lang { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.nav__menu .menu-col a.menu-more { color: var(--action); }
.nav__menu .menu-col .t-label { font-size: var(--t-label); }
.nav__phone { display: none; }
@media (max-width: 1023px) {
  .nav.is-open .nav__actions .nav__phone { display: inline-flex; }
  .nav.is-open .nav__actions .nav__icon { display: none; }
  .nav__search-m { display: inline-grid; margin-left: auto; }
  .nav__search-m + .nav__actions { margin-left: 0 !important; }
}
@media (min-width: 1024px) { .nav__search-m { display: none; } }
@media (max-width: 1023px) { .nav:not(.is-open) .nav__actions > .nav__icon, .nav:not(.is-open) .nav__actions > .nav__lang { display: none; } }

/* ---------------------------------------------------------------- inner pages: content sets the height
   The home page keeps one section per screen. Inner pages (long lists, legal text, a product sheet)
   grow with their content instead, so nothing is ever cut. */
html main > section.flow:not(.hero) {
  height: auto; min-height: 0; display: block;
  padding: var(--s-9) 0 calc(var(--s-9) + var(--bar));
}
html main > section.flow:not(.hero) > .wrap { height: auto; display: block; }
html main > section.flow.flow--surface { background: var(--surface); }
html main > section.flow + section.flow:not(.flow--surface) { padding-top: 0; }
html main > section.flow.flow--surface + section.flow:not(.flow--surface) { padding-top: var(--s-9); }
html main > section.page-head:not(.hero) { padding-top: calc(var(--nav) + var(--s-8)); padding-bottom: var(--s-8); }
@media (max-width: 639px) {
  html main > section.flow:not(.hero) { padding: var(--s-8) 0 calc(var(--s-8) + var(--bar)); }
  html main > section.page-head:not(.hero) { padding-top: calc(var(--nav) + var(--s-6)); padding-bottom: var(--s-6); }
  html main > section.flow.flow--surface + section.flow:not(.flow--surface) { padding-top: var(--s-8); }
}
.page-head h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: var(--display-tracking-xl, var(--display-tracking)); max-width: 20ch; text-wrap: balance; }
.page-head .lead { font-size: var(--t-lead); line-height: 1.5; max-width: 60ch; margin-top: var(--s-5); }
.page-head .btn-row { margin-top: var(--s-6); }
.page-head .pill { margin-top: var(--s-5); }
.flow .section-head { margin-bottom: var(--s-7); }
.flow h2 + p { margin-top: var(--s-4); }
.prose { max-width: 68ch; display: grid; gap: var(--s-4); }
.prose h2 { font-size: var(--t-h3); line-height: 1.25; margin-top: var(--s-6); }
.prose h2:first-child { margin-top: 0; }
.prose ul { display: grid; gap: var(--s-2); padding-left: 1.2em; list-style: disc; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.prose a:hover { text-decoration-color: currentColor; }
.big-phone { font: var(--display-weight) var(--t-h1)/1 var(--font-display); letter-spacing: var(--display-tracking); white-space: nowrap; }
.big-phone:hover { color: var(--action); }

/* footer.closing grows past one screen when its columns need it */
footer.closing { height: auto !important; min-height: 100svh; }
footer.closing > .wrap { height: auto !important; }
.closing__links .footer__col h4 { margin-bottom: var(--s-3); }
.closing__links .footer__col ul { display: grid; gap: var(--s-2); font-size: var(--t-small); }
.closing__links .footer__col a:hover { color: var(--action); }
.footer__badge { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); }
.footer__badge svg { width: 28px; height: 28px; flex: none; color: var(--accent); }
.footer__news { display: grid; gap: var(--s-3); max-width: 420px; }
.footer__news .row { display: flex; gap: var(--s-2); }
.footer__news input[type="email"] { flex: 1; min-width: 0; height: var(--btn-h); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.4 var(--font-text); }
.footer__news .news-note { font-size: var(--t-label); color: var(--muted); }
.footer__news .ok { font-size: var(--t-small); font-weight: 500; }

/* ---------------------------------------------------------------- the hero's two animated versions */
.hero--split .hero__media--render { background: none; border-radius: 0; overflow: visible; }
.hero__render { position: absolute; inset: 0; }
@media (max-width: 1023px) { .hero--split .hero__media--render { min-height: 320px; } }
.hero__motion { position: absolute; inset: 0; --m-cycle: 4s; --m-still: 0.45; }
.hero__motion svg { display: block; width: 100%; height: 100%; }
.hero__motion :is(.hx-bob, .hx-shadow, .hx-body, .hx-cap, .hx-grain, .hx-mercury) { transform-box: fill-box; transform-origin: 50% 50%; animation: 4s ease-in-out infinite; }
.hero__motion .hx-bob { animation-name: hx-bob; }
.hero__motion .hx-shadow { animation-name: hx-shadow; }
.hero__motion .hx-d1 { animation-delay: -1.3s; }
.hero__motion .hx-d2 { animation-delay: -2.6s; }
.hero__motion .hx-cap { animation-name: hx-cap; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
.hero__motion .hx-body { animation-name: hx-body; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
.hero__motion .hx-grain { animation-name: hx-grain; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.hero__motion .hx-mercury { transform-origin: 50% 100%; animation-name: hx-temp; }
@keyframes hx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes hx-shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(.86); } }
@keyframes hx-cap { 0%, 10% { transform: translateX(0); } 32%, 62% { transform: translateX(46px); } 84%, 100% { transform: translateX(0); } }
@keyframes hx-body { 0%, 10% { transform: translateX(0); } 32%, 62% { transform: translateX(-10px); } 84%, 100% { transform: translateX(0); } }
@keyframes hx-grain { 0%, 16% { transform: translate(0, 0) scale(0); opacity: 0; } 38%, 58% { transform: translate(var(--gx), var(--gy)) scale(1); opacity: 1; } 80%, 100% { transform: translate(0, 0) scale(0); opacity: 0; } }
@keyframes hx-temp { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(.86); } }

/* the switch between the two heroes while the client compares them (PUBLIC_HERO_SWITCH) */
.hero-switch { position: fixed; z-index: 45; left: 50%; bottom: calc(var(--s-5) + var(--bar)); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1); border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: var(--t-small); box-shadow: 0 6px 24px -8px rgb(0 0 0 / .45); }
.hero-switch > span { padding: 0 var(--s-3); opacity: .75; }
.hero-switch a { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-4); border-radius: 999px; font-weight: 500; }
.hero-switch a[aria-current="page"] { background: var(--bg); color: var(--ink); }
.hero-switch a:not([aria-current]):hover { background: color-mix(in oklab, var(--bg) 18%, transparent); }

/* ---------------------------------------------------------------- breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-5); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--s-2); color: var(--line-strong); }
.crumbs a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- forms: states */
.field .opt { font-weight: 400; color: var(--muted); }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-label); }
.field.is-invalid :is(input, select, textarea) { border-color: #b3261e; }
.field__error { font-weight: 400; font-size: var(--t-label); color: #b3261e; }
.field__error:empty { display: none; }
.form fieldset.field { border: 0; padding: 0; margin: 0; }
.form fieldset.field legend { margin-bottom: var(--s-2); }
.checks-inline { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-weight: 400; }
.check { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 400; font-size: var(--t-small); }
.check input, .consent input { width: 18px; height: 18px; accent-color: var(--action); flex: none; }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); align-items: start; font-weight: 400; font-size: var(--t-small); }
.consent input { margin-top: 2px; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .form__status { grid-column: 1 / -1; font-size: var(--t-small); color: #b3261e; }
.form .form__status:empty { display: none; }
.form button[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form--panel { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); }
.form--panel .field :is(input, select, textarea) { background: var(--bg); }
@media (max-width: 639px) { .form--panel { padding: var(--s-5); } }

/* ---------------------------------------------------------------- products */
.spec { display: grid; gap: 0; padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); }
.spec > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 0; }
.spec dt { color: var(--muted); font-size: var(--t-small); }
.spec dd { margin: 0; font-weight: 500; }
@media (max-width: 639px) { .spec { padding: var(--s-5); } .spec > div { grid-template-columns: 1fr; gap: var(--s-1); } }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips > * { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-3); border-radius: 999px; border: 1px solid var(--line-strong); font-size: var(--t-small); }
.chips > a { border-color: var(--ink); font-weight: 500; }
.chips > a:hover { background: var(--ink); color: var(--bg); }
.prod-card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); transition: transform var(--dur) var(--ease); }
a.prod-card:hover { transform: translateY(-2px); }
.prod-card h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.prod-card .brand { color: var(--muted); font-size: var(--t-small); }
.prod-card .cls { margin-top: var(--s-3); font-size: var(--t-small); }
.disclaimer { font-size: var(--t-small); color: var(--muted); max-width: 72ch; }
.line-card { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); }
.line-card h3 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.line-card .muted { font-size: var(--t-small); }
@media (max-width: 639px) { .line-card { padding: var(--s-5); } }
.svc-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); transition: transform var(--dur) var(--ease); }
a.svc-card:hover { transform: translateY(-2px); }
.svc-card .t-stat { color: var(--ink); }
.svc-card h3 { font: 500 var(--t-card)/1.3 var(--font-text); }
.svc-card .link { margin-top: var(--s-2); }
@media (max-width: 639px) { .svc-card { padding: var(--s-5); } }

/* steps in a row and a timeline */
.steps { counter-reset: s; display: grid; gap: var(--card-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps > li { counter-increment: s; display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.steps > li::before { content: counter(s, decimal-leading-zero); font: var(--display-weight) var(--t-h3)/1 var(--font-display); color: var(--muted); }
.steps h3 { font: 500 var(--t-card)/1.3 var(--font-text); }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } }
.timeline > li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.timeline .year { font: var(--display-weight) var(--t-h3)/1 var(--font-display); }
@media (max-width: 639px) { .timeline > li { grid-template-columns: 1fr; gap: var(--s-2); } }

/* shipping table */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.table th, .table td { text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-weight: 500; color: var(--muted); font-size: var(--t-small); }
.table td:first-child { font-weight: 500; white-space: nowrap; }
@media (max-width: 639px) {
  .table thead { display: none; }
  .table tr { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .table td { border: 0; padding: 0; }
}

/* news */
.news-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.news-card .meta { display: flex; gap: var(--s-3); font-size: var(--t-small); color: var(--muted); }
.news-card h3 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.news-card a:hover h3 { color: var(--action); }
.filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.filter button { height: 36px; padding: 0 var(--s-4); border-radius: 999px; border: 1px solid var(--line-strong); background: none; color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* faq groups on the FAQ page */
.faq-group + .faq-group { margin-top: var(--s-8); }
.faq-group > h2 { font-size: var(--t-h3); margin-bottom: var(--s-5); }
.toc { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------------------------------------------------------------- search dialog */
.search-dlg { width: min(100% - 2 * var(--gut), 720px); max-height: min(80svh, 640px); margin: calc(var(--nav) + var(--s-5)) auto auto; padding: 0;
  border: 0; border-radius: var(--r-lg); background: var(--bg); color: var(--ink); box-shadow: 0 24px 64px -24px rgb(0 0 0 / .45); }
.search-dlg::backdrop { background: color-mix(in oklab, var(--p-ink) 40%, transparent); }
.search-dlg form { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.search-dlg input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--ink); font: 400 var(--t-lead)/1.4 var(--font-text); outline: none; }
.search-dlg ul { overflow-y: auto; max-height: calc(min(80svh, 640px) - 80px); padding: var(--s-2); }
.search-dlg li a, .search-results li a { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); }
.search-dlg li a:hover, .search-dlg li a:focus-visible, .search-results li a:hover { background: var(--surface); }
.search-dlg .kind, .search-results .kind { font-size: var(--t-label); color: var(--muted); }
.search-dlg .empty { padding: var(--s-5); color: var(--muted); }
.search-results { display: grid; gap: var(--s-1); margin-top: var(--s-6); }
.hero-switch a { white-space: nowrap; }
@media (max-width: 639px) {
  .hero-switch { left: auto; right: var(--gut); bottom: auto; top: calc(var(--nav) + var(--s-2)); transform: none; font-size: var(--t-label); }
  .hero-switch > span { display: none; }
  .hero-switch a { height: 28px; padding: 0 var(--s-3); }
}
@media (max-width: 639px) { .hero-switch .hs-long { display: none; } }
@media (max-width: 639px) { .hide-phone { display: none; } }
.legal-links { display: inline-flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer__news input[type="email"] { width: 100%; } footer.closing > .wrap { grid-template-columns: minmax(0, 1fr); }

/* ---------- Hero: the flat lay and the rotating customer (branch diseno/hero-bote) ----------
   Three layers on the first screen: the "HCI" wordmark, in the flow; over it a transparent WebGL canvas
   (src/scripts/hero-stage.ts: generic medication forms and cold-chain objects that cast their shadows on the
   letters); over that the headline, the buttons and the foot. The .wrap gives up its own stacking context so
   the canvas can sit between the wordmark and the copy. The canvas never takes the pointer: the stage
   listens on the section, and links and buttons keep theirs. */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/anton.woff2") format("woff2"); }
main > .hero--stage > .wrap { z-index: auto; }
.hero-stage__canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.hero.is-staged > .hero-stage__canvas { opacity: 1; }
.hero-text.hero-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; row-gap: var(--s-5); justify-items: center; }
/* the wordmark's capitals fill the row the copy leaves, or the width on a narrow screen */
.hero-stage__markbox { container-type: size; width: 100%; min-height: 0; display: grid; place-items: center; }
.hero-stage__mark {
  font-family: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 400;
  font-size: min(116cqh, 58cqw); line-height: 1; letter-spacing: -0.012em; white-space: nowrap;
  text-box: trim-both cap alphabetic; color: var(--ink); user-select: none;
}
.hero-stage__copy, .hero-stage__foot { position: relative; z-index: 2; }
.hero-stage__copy { display: grid; justify-items: center; gap: var(--s-5); text-align: center; }
.hero--stage h1 { font-size: clamp(24px, 1.14vw + 19.5px, 36px); line-height: 1.12; letter-spacing: var(--display-tracking); }
.hero--stage .rotator { display: grid; justify-items: center; }
.hero--stage .btn-row { justify-content: center; }
.hero-stage__foot { width: 100%; display: flex; justify-content: space-between; align-items: end; gap: var(--s-6); }
.hero-stage__status { display: grid; gap: var(--s-1); }
.hero-stage__live { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-label); color: var(--muted); }
.hero--stage .hero-stage__foot > .hero__lead { max-width: 46ch; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 1023px) {
  .hero-stage__foot { flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
  .hero-stage__status { justify-items: center; }
  .hero--stage .hero-stage__foot > .hero__lead { max-width: 52ch; }
}
@media (max-width: 639px) {
  .hero-text.hero-stage { row-gap: var(--s-4); }
  .hero-stage__copy { gap: var(--s-4); width: 100%; }
  .hero-stage__status > .hero__kicker { display: none; }
}
/* The headline's last words cycle through the customers the current site names; the words share one grid
   cell, so the line keeps the width of the longest and nothing below moves. */
.rotator { display: inline-grid; vertical-align: top; color: var(--accent); }
.rotator > span { grid-area: 1 / 1; opacity: 0; animation: rotate-word 9.6s var(--ease) infinite; animation-delay: calc(var(--i) * 2.4s); }
@keyframes rotate-word {
  0% { opacity: 0; transform: translateY(.32em); filter: blur(6px); }
  5%, 22% { opacity: 1; transform: none; filter: blur(0); }
  27%, 100% { opacity: 0; transform: translateY(-.32em); filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .rotator > span { animation: none; }
  .rotator > span:first-child { opacity: 1; }
}