/* ==========================================================================
Cuba Health Assist · Homepage v3
Patient-first homepage built by tools/build_home_v3.py. Everything is scoped
to main.hx so the shared header, offices section and footer keep their own
styles. Tokens follow CHA_DESIGN_SYSTEM_CONTRACT.md (teal #0e7c7b, 4px
spacing, 12/20/24px radii, 44px targets). Line icons are Lucide, drawn in
soft teal tiles.
========================================================================== */
@font-face { font-family: "CHA Jost"; font-style: normal; font-weight: 300 600; font-display: swap;
src: url("/assets/fonts/cha-jost-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "CHA Jost"; font-style: normal; font-weight: 300 600; font-display: swap;
src: url("/assets/fonts/cha-jost-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "CHA Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url("/assets/fonts/cha-montserrat-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "CHA Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url("/assets/fonts/cha-montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Owner rules 28 Oct 2026 for the whole homepage (header, offices, footer and
the floating contact bar included): Jost for headings and Montserrat for
text, as on the owner's other site; no shadows anywhere; images never get
a placeholder tint behind them. */
/* Stand-ins drawn with the web fonts' own width and line metrics (fontTools, 29 Oct 2026), so text keeps
its lines and height while Montserrat and Jost load and nothing below moves when they swap in. */
@font-face { font-family: "CHA Montserrat Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
size-adjust: 110.99%; ascent-override: 87.21%; descent-override: 22.61%; line-gap-override: 0%; }
@font-face { font-family: "CHA Jost Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
size-adjust: 95.69%; ascent-override: 111.81%; descent-override: 39.19%; line-gap-override: 0%; }
:root { --hx-sans: "CHA Montserrat", "Montserrat", "CHA Montserrat Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --hx-display: "CHA Jost", "Jost", "CHA Jost Fallback", var(--hx-sans); }
html body { font-family: var(--hx-sans) !important; }
/* overflow-x:hidden on body turns it into a scroll box and breaks the sticky header; clip keeps the same protection */
html body:not(.cha-cubi-open) { overflow-x: clip !important; overflow-y: visible !important; }
html body :where(*):not(code, pre, kbd, samp) { font-family: inherit !important; }
html body :is(h1, h2, h3, h4) { font-family: var(--hx-display) !important; }
html body *, html body *::before, html body *::after { box-shadow: none !important; text-shadow: none !important; }
main.hx img { background: transparent !important; }
/* Phones and tablets: iOS zooms the page when a field under 16px gets focus, then the page slides sideways */
@media (max-width: 1023.98px) {
html body input:not([type="checkbox"]):not([type="radio"]), html body select, html body textarea,
html body input[class]:not([type="checkbox"]):not([type="radio"]), html body select[class], html body textarea[class] { font-size: 16px !important; }
}
/* Shared blocks on the homepage follow the same light, flat look */
html body .cha-office-network { background: #fff !important; }
html body .cha-office-network-card::before { display: none !important; }
html body .cha-office-network-card { background: #fff !important; }
html body .cha-cubi-context { background: #eef6f5 !important; }
html body header.sticky, html body .cha-resources-nav__menu, html body .cha-tr-mobile-leadbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body header.sticky { background: #fff !important; }
html body .cha-tr-mobile-leadbar { background: #fff !important; }
/* The shared script's own phone header controls and drawer are not used here */
html body .cha-mobile-controlbar, html body #cha-mobile-drawer, html body .cha-mobile-backdrop { display: none !important; }
/* ==========================================================================
Header: quiet top strip, sticky bar, treatments menu, phone menu sheet
========================================================================== */
.hx-anchor { position: absolute; top: 0; }
.hx-topbar { display: none; background: #f7fafb; border-bottom: 1px solid #e6eef2; color: #475569; font-size: .74rem; }
.hx-topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 36px; }
.hx-topbar__group { display: flex; align-items: center; gap: 20px; min-width: 0; }
.hx-topbar a, .hx-topbar__tag { display: inline-flex; align-items: center; gap: 6px; color: #475569; white-space: nowrap; transition: color .2s; }
.hx-topbar a:hover { color: #0e7c7b; }
.hx-topbar .hx-i { color: #0e7c7b; }
.hx-topbar__tag { color: #0f172a; font-weight: 600; padding-right: 20px; border-right: 1px solid #dce7ed; }
.hx-langmenu { position: relative; }
.hx-langmenu__btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #dce7ed; border-radius: 999px;
background: #fff; color: #0f172a; font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s; }
.hx-langmenu__btn:hover, .hx-langmenu__btn[aria-expanded="true"] { border-color: #0e7c7b; color: #0e7c7b; }
.hx-langmenu__btn .hx-i:last-child { transition: transform .2s; }
.hx-langmenu__btn[aria-expanded="true"] .hx-i:last-child { transform: rotate(180deg); }
.hx-langmenu__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 95; width: 196px; padding: 6px; margin: 0; list-style: none;
background: #fff; border: 1px solid #dce7ed; border-radius: 14px; }
.hx-langmenu__list[hidden] { display: none; }
.hx-langmenu__item, .hx-drawer__langs a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px;
color: #0f172a !important; font-size: .86rem; font-weight: 500; transition: background-color .2s, color .2s; }
.hx-topbar .hx-langmenu__list .hx-langmenu__item { display: flex; width: 100%; }
.hx-langmenu__item:hover { background: #f2f7f9; color: #0e7c7b !important; }
.hx-langmenu__item.is-active { color: #0e7c7b !important; font-weight: 600; }
.hx-langmenu__item .hx-i { color: #0e7c7b; }
.hx-langmenu__code { color: #94a3b8; font-size: .7rem; font-weight: 600; letter-spacing: .06em; }
.hx-drawer__langs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.hx-drawer__langs a { min-height: 48px; border: 1px solid #dce7ed; }
.hx-drawer__langs a.is-active { background: #e6f2f1; border-color: #c7e2e0; color: #0e7c7b !important; font-weight: 600; }
.hx-header { position: sticky; top: 0; z-index: 90; background: #fff; border-bottom: 1px solid #e6eef2; }
.hx-header__row { display: flex; align-items: center; gap: 16px; height: 64px; transition: height .25s ease; }
.hx-header__logo { flex: none; display: inline-flex; align-items: center; }
.hx-header__logo img[width][height] { height: 34px !important; width: auto !important; max-width: none; }
.hx-nav { display: none; }
.hx-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hx-header__wa, .hx-header__apply { display: none !important; }
.hx-btn.hx-header__apply-short { min-height: 44px; height: 44px; padding: 0 18px; font-size: .84rem; }
/* 320–359px phones: logo, short apply button and menu did not fit (menu clipped by ~24px). */
@media (max-width: 359.98px) {
.hx-header__row { gap: 10px; }
.hx-header__logo img[width][height] { height: 28px !important; }
.hx-btn.hx-header__apply-short { padding: 0 12px; }
}
.hx-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 12px;
background: #f2f7f9; color: #0e7c7b; cursor: pointer; flex: none; transition: background-color .2s; }
.hx-icon-btn:hover { background: #e6f2f1; }
/* Treatments menu */
.hx-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid #e6eef2; border-top: 1px solid #eef3f6; }
.hx-mega[hidden] { display: none; }
.hx-mega__grid { display: grid; grid-template-columns: 1.1fr 1.1fr .9fr; gap: 40px; padding-top: 28px; padding-bottom: 32px; }
.hx-mega__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #0e7c7b; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-mega__cancer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 16px; margin-bottom: 16px !important; }
.hx-mega__cancer a { display: block; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; color: #0f172a; font-size: .88rem; font-weight: 500; transition: background-color .2s, color .2s; }
.hx-mega__cancer a:hover { background: #f2f7f9; color: #0e7c7b; }
.hx-mega__areas { display: grid; gap: 4px; margin-bottom: 16px !important; }
.hx-mega__area { display: flex; align-items: center; gap: 12px; padding: 6px 10px; margin: 0 -10px; border-radius: 12px; color: #0f172a; font-size: .88rem; font-weight: 500; transition: background-color .2s, color .2s; }
.hx-mega__area .hx-tile { width: 36px; height: 36px; border-radius: 10px; }
.hx-mega__area:hover { background: #f2f7f9; color: #0e7c7b; }
.hx-mega__card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: #e6f2f1; border: 1px solid #c7e2e0; align-self: start; }
.hx-mega__card-title { font-family: var(--hx-display); color: #0f172a; font-size: 1.15rem; font-weight: 500; }
.hx-mega__card p { color: #334155; font-size: .86rem; line-height: 1.6; }
/* Phone menu sheet */
.hx-drawer { position: fixed; inset: 0; z-index: 120; }
.hx-drawer[hidden] { display: none; }
.hx-drawer__backdrop { position: absolute; inset: 0; background: var(--hx-veil); }
.hx-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: #fff;
animation: hx-sheet .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes hx-sheet { from { transform: translateX(24px); opacity: 0; } }
.hx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; height: 64px; border-bottom: 1px solid #e6eef2; }
.hx-drawer__head img[width][height] { flex: none; height: 30px !important; width: auto !important; max-width: none; }
.hx-drawer__body { flex: 1; overflow-y: auto; padding: 8px 20px 24px; }
.hx-drawer__group { border-bottom: 1px solid #e6eef2; }
.hx-drawer__group summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; list-style: none;
font-family: var(--hx-display); color: #0f172a; font-size: 1.08rem; font-weight: 500; }
.hx-drawer__group summary::-webkit-details-marker { display: none; }
.hx-drawer__group summary .hx-i { color: #0e7c7b; transition: transform .25s; }
.hx-drawer__group[open] summary .hx-i { transform: rotate(180deg); }
.hx-drawer__group .hx-link { margin: 4px 0 18px; }
.hx-drawer__sub { margin: 16px 0 10px !important; color: #56677b; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-drawer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-drawer__chips a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #dce7ed; color: #0f172a; font-size: .86rem; font-weight: 500; }
.hx-drawer__areas { display: grid; gap: 2px; }
.hx-drawer__areas .hx-mega__area { margin: 0; padding: 6px 0; }
.hx-drawer__links li { border-bottom: 1px solid #e6eef2; }
.hx-drawer__links a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-family: var(--hx-display); color: #0f172a; font-size: 1.08rem; font-weight: 500; }
.hx-drawer__links .hx-i { color: #94a3b8; }
.hx-drawer__quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.hx-drawer__quick a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: #f2f7f9; color: #0f172a; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.hx-drawer__quick .hx-i { color: #0e7c7b; }
.hx-drawer__contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hx-drawer__contact .hx-btn { border-radius: 14px; }
.hx-drawer__mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #475569; font-size: .86rem; }
.hx-drawer__mail .hx-i { color: #0e7c7b; }
.hx-drawer__foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e6eef2; }
html.hx-drawer-open, html.hx-drawer-open body { overflow: hidden !important; }
html.hx-drawer-open #cha-tr-mobile-leadbar { display: none !important; }
@media (min-width: 768px) {
.hx-topbar { display: block; }
.hx-topbar__tag { display: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.hx-topbar a[href^="mailto:"] { display: none; }
}
@media (min-width: 1024px) {
.hx-topbar__tag { display: inline-flex; }
.hx-header__row { height: 76px; gap: 32px; }
.hx-header.is-scrolled .hx-header__row { height: 64px; }
.hx-header__logo img[width][height] { height: 38px !important; }
.hx-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.hx-nav .hx-nav__link { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
color: #334155; font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color .2s, background-color .2s; }
.hx-nav .hx-nav__link:hover, .hx-nav .hx-nav__mega[aria-expanded="true"] { color: #0e7c7b; background: #f2f7f9; }
.hx-nav__mega .hx-i { transition: transform .25s; }
.hx-nav__mega[aria-expanded="true"] .hx-i { transform: rotate(180deg); }
.hx-header__actions { margin-left: 0; gap: 10px; }
.hx-btn.hx-header__wa, .hx-btn.hx-header__apply { display: inline-flex !important; min-height: 44px; height: 44px; padding: 0 18px; font-size: .84rem; }
.hx-header__apply-short, .hx-header__menu { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1439.98px) {
.hx-header__row { gap: 20px; }
.hx-header__wa { width: 44px; padding: 0 !important; }
.hx-header__wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* icon only, name kept for screen readers */
.hx-nav .hx-nav__link { padding: 0 10px; }
}
@media (min-width: 1024px) and (max-width: 1179.98px) {
.hx-nav .hx-nav__link { padding: 0 7px; font-size: .84rem; }
.hx-header__apply { padding: 0 14px !important; }
}
/* ==========================================================================
Footer v6, written for patients and families:
1. deck: track a file you already opened / reach a person now (open or closed, Turkey time)
2. offices with their local time (hidden where the page already has the offices section)
3. brand beside four link columns, 4. facts line, 5. copyright, language, back to top.
Light surface and hairlines only; teal for icons, links and the active language.
========================================================================== */
.hx-footer { background: #f2f7f9; border-top: 1px solid #dce7ed; color: #334155; padding: 40px 0 calc(24px + 76px); }
.hx-footer img[width][height] { filter: none !important; }
.hx-footer a { color: inherit; text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; }
.hx-footer a:hover { color: #0e7c7b; }
.hx-footer a:focus-visible, .hx-footer button:focus-visible { outline: 2px solid #0e7c7b; outline-offset: 2px; border-radius: 8px; }
/* 1. Deck: one white frame, panels split by a 1px line */
.hx-fdeck { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin-bottom: 40px; background: #dce7ed; border: 1px solid #dce7ed; border-radius: 18px; overflow: hidden; }
.hx-fpanel { min-width: 0; padding: 22px 20px 24px; background: #fff; }
.hx-fpanel__k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #0e7c7b; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-fpanel__h { margin: 0 0 16px; color: #0f172a; font-family: var(--hx-display); font-size: 1.2rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.hx-ftrack { margin: 0; }
.hx-ftrack__l { display: block; margin-bottom: 6px; color: #475569; font-size: .8rem; font-weight: 600; }
.hx-ftrack__row { display: flex; flex-wrap: wrap; gap: 8px; }
html body .hx-footer .hx-ftrack__in { flex: 1 1 170px; min-width: 0; height: 50px; margin: 0; padding: 0 14px; background: #fff; border: 1px solid #c9d7e0; border-radius: 12px;
color: #0f172a; font: 500 1rem/1 var(--hx-sans); letter-spacing: .03em; box-shadow: none; transition: border-color .2s; }
html body .hx-footer .hx-ftrack__in::placeholder { color: #94a3b8; letter-spacing: .02em; }
html body .hx-footer .hx-ftrack__in:focus { border-color: #0e7c7b; outline: 3px solid #e6f2f1; outline-offset: 0; }
.hx-ftrack__b { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 20px; border: 0; border-radius: 12px;
background: #0e7c7b; color: #fff; font: 600 .92rem/1 var(--hx-sans); cursor: pointer; transition: background-color .2s; }
.hx-ftrack__b:hover { background: #0b6867; }
/* cha-design-system-v2.css restyles every footer h2/h3 (margin 0, 18px on phones) and every footer form field
(full row, 46px) with !important; the v6 footer keeps its own sizes */
html body footer.hx-footer .hx-fpanel__h { display: block !important; margin: 0 0 16px !important; font-size: 1.2rem !important; line-height: 1.3 !important; }
@media (min-width: 768px) { html body footer.hx-footer .hx-fpanel__h { font-size: 1.3rem !important; } }
html body footer.hx-footer .hx-ftrack__in, html body footer.hx-footer .hx-ftrack__b { height: 50px !important; }
.hx-ftrack__err { margin-top: 8px; color: #b42318; font-size: .82rem; font-weight: 600; line-height: 1.45; }
.hx-ftrack__err[hidden] { display: none; }
html body .hx-footer .hx-ftrack__in[aria-invalid="true"] { border-color: #b42318; }
.hx-ftrack__note { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: #56677b; font-size: .8rem; line-height: 1.5; }
.hx-ftrack__note .hx-i { flex: none; margin-top: 2px; color: #0e7c7b; }
html body footer.hx-footer .hx-ftrack__in { flex: 1 1 170px !important; width: auto !important; }
html body footer.hx-footer .hx-ftrack__b { flex: 0 0 auto !important; width: auto !important; }
.hx-ftrack__b .hx-i { transition: transform .2s; }
.hx-ftrack__b:hover .hx-i { transform: translateX(2px); }
html body .hx-footer .hx-fpanel__link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 10px; color: #0e7c7b; font-size: .88rem; font-weight: 600; }
.hx-fpanel__link:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* Open / closed: shown only once the script knows the time in Turkey */
.hx-fstatus { display: none; align-items: flex-start; gap: 10px; text-align: left; width: fit-content; max-width: 100%; margin: 0; padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 12px;
color: #475569; font-size: .86rem; font-weight: 600; line-height: 1.45; }
.hx-fstatus[data-state] { display: flex; }
.hx-fstatus[data-state="open"] { border-color: #c3e6d2; color: #146c3c; }
.hx-fstatus__dot { position: relative; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #94a3b8; }
.hx-fstatus[data-state="open"] .hx-fstatus__dot { background: #16a34a; }
.hx-fstatus[data-state="open"] .hx-fstatus__dot::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid #16a34a; border-radius: 50%; animation: hx-fpulse 2.2s ease-out infinite; }
@keyframes hx-fpulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hx-fstatus__dot::after { animation: none !important; display: none; } }
.hx-fhours { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 16px; color: #56677b; font-size: .82rem; line-height: 1.55; }
.hx-fhours .hx-i { margin-top: 2px; }
.hx-fhours .hx-i { flex: none; color: #0e7c7b; }
.hx-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
html body .hx-footer .hx-fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 6px 14px; border: 1px solid #dce7ed; border-radius: 12px;
color: #0f172a; font-size: .86rem; font-weight: 600; line-height: 1.3; }
.hx-fchip .hx-i { flex: none; color: #0e7c7b; }
.hx-fchip--wa .hx-i { color: #128c4b; }
html body .hx-footer .hx-fchip:hover { border-color: #0e7c7b; color: #0e7c7b; }
/* The app inside the tracking panel; the homepage already closes with the full app card */
.hx-fapp { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e6edf1; }
body:has(.hx-app) .hx-fapp { display: none; }
.hx-fapp__k { margin: 0 0 10px; color: #56677b; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-fapp__stores { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.hx-fapp__store { display: grid; justify-items: start; gap: 6px; }
html:not(#\#) .hx-fapp .hx-store img { display: block; width: auto; height: 40px; max-width: none; }
/* 2. Offices with local time */
.hx-foffices { margin-bottom: 40px; }
body:has(#offices) .hx-foffices { display: none; }
.hx-foffices__k { margin: 0 0 12px; color: #0e7c7b; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-foffices__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid #dce7ed; border-bottom: 1px solid #dce7ed; }
.hx-foffice { min-width: 0; padding: 16px 0; }
.hx-foffice + .hx-foffice { border-top: 1px solid #dce7ed; }
.hx-foffice__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.hx-foffice__city { color: #0f172a; font-family: var(--hx-display); font-size: 1rem; font-weight: 500; }
.hx-foffice__time { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px; border: 1px solid #c7e2e0; border-radius: 999px; color: #0e7c7b;
font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-foffice__addr { margin: 6px 0 4px; color: #56677b; font-size: .82rem; line-height: 1.55; }
.hx-foffice__state { display: none; align-items: center; gap: 5px; margin-left: 2px; padding-left: 8px; border-left: 1px solid #c7e2e0; color: #56677b; font-weight: 600; }
.hx-foffice__state[data-state] { display: inline-flex; }
.hx-foffice__state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.hx-foffice__state[data-state="open"] { color: #146c3c; }
.hx-foffice__state[data-state="open"]::before { background: #16a34a; }
html body .hx-footer .hx-foffice__map { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: #0e7c7b; font-size: .82rem; font-weight: 600; }
/* 3. Brand */
.hx-footer__top { display: grid; gap: 28px; }
html body footer.hx-footer .hx-footer__logo { display: inline-flex; align-items: center; margin-bottom: 16px; }
html body footer.hx-footer .hx-footer__logo img[width][height][alt] { display: block; height: 40px !important; max-height: none !important; width: auto !important; max-width: none !important; }
.hx-footer__desc { margin: 0; max-width: 40ch; color: #475569; font-size: .9rem; line-height: 1.65; }
.hx-footer__follow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.hx-footer__follow-k { color: #56677b; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-footer__social { display: flex; gap: 8px; }
.hx-fsocial { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #dce7ed; color: #0f172a !important; }
.hx-fsocial:hover { border-color: #0e7c7b; color: #0e7c7b !important; }
/* Link columns: accordions on phones */
.hx-footer__cols { display: grid; }
.hx-fcol { border-top: 1px solid #dce7ed; }
.hx-fcol:last-child { border-bottom: 1px solid #dce7ed; }
.hx-fcol__title { margin: 0; }
.hx-fcol__title button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; border: 0; background: none;
color: #0f172a; font-family: var(--hx-display); font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer; }
.hx-fcol__title .hx-i { color: #0e7c7b; transition: transform .25s; }
.hx-fcol__title button[aria-expanded="true"] .hx-i { transform: rotate(180deg); }
.hx-fcol__list { display: none; gap: 0; margin: 0; padding: 0 0 14px; list-style: none; }
.hx-fcol.is-open .hx-fcol__list { display: grid; }
.hx-fcol__list a { display: flex; align-items: center; min-height: 40px; color: #475569; font-size: .9rem; line-height: 1.4; }
/* 4. Facts line (languages, payment, not-a-clinic note) */
.hx-ffacts { display: grid; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.hx-ffacts > li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; border: 0; background: none; color: #56677b; font-size: .8rem; line-height: 1.6; }
.hx-ffacts .hx-i { flex: none; margin-top: 2px; color: #0e7c7b; }
/* 5. Copyright line */
.hx-footer__bottom { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #dce7ed; color: #56677b; font-size: .8rem; line-height: 1.6; }
.hx-footer__company { color: #0f172a !important; font-weight: 600; }
.hx-footer__company:hover { color: #0e7c7b !important; }
.hx-footer__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hx-footer__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hx-footer__langs > .hx-i { color: #0e7c7b; margin-right: 4px; }
.hx-flang { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; color: #475569; font-size: .8rem; font-weight: 500; }
.hx-flang:hover { border-color: #dce7ed; }
.hx-flang.is-active { border-color: #0e7c7b; color: #0e7c7b !important; font-weight: 600; }
.hx-ftop { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid #dce7ed; border-radius: 999px; color: #0f172a !important; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.hx-ftop .hx-i { color: #0e7c7b; transition: transform .2s; }
.hx-ftop:hover { border-color: #0e7c7b; }
.hx-ftop:hover .hx-i { transform: translateY(-2px); }
@media (min-width: 768px) {
.hx-footer { padding: 56px 0 112px; }
.hx-fdeck { margin-bottom: 48px; }
.hx-fpanel { padding: 28px 28px 30px; }
.hx-fpanel__h { font-size: 1.3rem; }
.hx-foffices { margin-bottom: 48px; }
.hx-foffices__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-foffice { padding: 18px 24px; }
.hx-foffice:first-child { padding-left: 0; }
.hx-foffice:last-child { padding-right: 0; }
.hx-foffice + .hx-foffice { border-top: 0; border-left: 1px solid #dce7ed; }
.hx-footer__top { gap: 40px; }
.hx-footer__brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
.hx-footer__logo, .hx-footer__desc { grid-column: 1; }
.hx-footer__follow { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; flex-direction: column; align-items: flex-end; }
.hx-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 32px; border-top: 1px solid #dce7ed; }
.hx-fcol, .hx-fcol:last-child { border: 0; }
.hx-fcol__title button { min-height: 0; margin-bottom: 12px; cursor: default; color: #0e7c7b; font-family: var(--hx-sans); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-fcol__title .hx-i { display: none; }
.hx-fcol__list { display: grid; padding: 0; }
.hx-fcol__list a { min-height: 34px; }
}
@media (min-width: 1024px) {
.hx-fdeck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-fpanel { padding: 30px 36px 32px; }
.hx-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hx-ffacts { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 32px; }
.hx-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.hx-footer__end { flex-wrap: nowrap; justify-content: flex-end; }
}
@media (min-width: 1200px) {
.hx-footer__top { grid-template-columns: minmax(250px, 1fr) minmax(0, 2.8fr); gap: 56px; }
.hx-footer__brand { display: block; }
.hx-footer__follow { flex-direction: column; align-items: flex-start; margin-top: 24px; }
.hx-footer__cols { padding-top: 0; border-top: 0; gap: 28px; }
}
/* Phones: the three ways to reach us become full-width rows, easy to tap */
@media (max-width: 559px) {
.hx-fchips { display: grid; grid-template-columns: minmax(0, 1fr); }
html body .hx-footer .hx-fchip { min-height: 48px; }
}
/* Narrow phones: the File No box and its button stack; the globe goes and the four language names share one row */
@media (max-width: 419px) {
.hx-fpanel { padding: 20px 16px 22px; }
html body footer.hx-footer .hx-ftrack__in, html body footer.hx-footer .hx-ftrack__b { flex: 1 1 100% !important; }
.hx-footer__langs > .hx-i { display: none; }
.hx-footer__langs { flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.hx-flang { justify-content: center; padding: 0 4px; }
}
/* Floating contact dock on its own soft teal so it stands apart from white and grey sections:
WhatsApp leads in its own green, Cubi and call are white buttons beside it */
/* The page content line (.hx-wrap: 1200px centred, 20/28/32px gutter). Floating pieces stay inside it. */
:root { --hx-gutter: 20px; --hx-edge: max(var(--hx-gutter), calc((100% - 1200px) / 2 + var(--hx-gutter))); }
@media (min-width: 640px) { :root { --hx-gutter: 28px; } }
@media (min-width: 1024px) { :root { --hx-gutter: 32px; } }
html body #cha-tr-mobile-leadbar {
display: flex !important; align-items: center; gap: 6px; width: auto; padding: 6px; transform: none;
left: auto; right: var(--hx-edge); bottom: 24px; border-radius: 999px; background: #d8edea !important; border: 1px solid #97cbc5 !important;
animation: hx-dock-in .5s var(--hx-ease) .6s both;
}
@keyframes hx-dock-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; min-height: 50px; min-width: 50px;
padding: 0 18px; margin: 0; border: 1px solid #c7e2e0 !important; border-radius: 999px; background: #fff !important; color: #0f172a !important;
text-align: left; transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action:not(.cha-tr-mobile-leadbar__action--wa):hover { background: #f7fbfb !important; border-color: #0e7c7b !important; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action:hover { transform: translateY(-1px); }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action > span:last-child { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action strong { font-size: .86rem; font-weight: 700; color: inherit !important; line-height: 1; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action small { display: block !important; font-size: .68rem; font-weight: 500; opacity: 1; color: inherit !important; line-height: 1; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action svg { width: 20px; height: 20px; flex: none; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--cubi { padding-left: 6px; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--wa { background: #0f7a41 !important; border-color: #0f7a41 !important; color: #fff !important; padding: 0 22px 0 16px; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--wa small { opacity: 1; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--wa:hover { background: #0d6e3c !important; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--wa svg { width: 24px; height: 24px; }
html body #cha-tr-mobile-leadbar.hx-dock-cue .cha-tr-mobile-leadbar__action--wa svg { animation: hx-wa-cue 1.2s ease-in-out 2; }
@keyframes hx-wa-cue { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--call { width: 50px; padding: 0; color: #0e7c7b !important; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--call > span { display: none !important; }
@media (max-width: 767.98px) {
html body #cha-tr-mobile-leadbar {
left: 0; right: 0; bottom: 0; width: 100%; gap: 8px; border-radius: 0; border-width: 1px 0 0 !important;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
}
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--wa { flex: 1; justify-content: center; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--cubi { padding: 0 14px 0 6px; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--cubi small { display: none !important; }
}
/* Wide screens: the dock introduces itself, Cubi sits on its own soft teal and the call button shows the number */
html body #cha-tr-mobile-leadbar .hx-dock-intro { display: none; }
@media (min-width: 768px) {
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--cubi { color: #0a5f5e !important; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--cubi strong { color: #0f172a !important; }
}
@media (min-width: 1280px) {
html body #cha-tr-mobile-leadbar .hx-dock-intro {
display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 14px 0 16px; margin-right: 2px;
border-right: 1px solid #97cbc5; line-height: 1; white-space: nowrap;
}
html body #cha-tr-mobile-leadbar .hx-dock-intro strong { display: block; color: #0f172a; font-family: var(--hx-display); font-size: .98rem; font-weight: 500; }
html body #cha-tr-mobile-leadbar .hx-dock-intro small { display: block; color: #0a5f5e; font-size: .72rem; font-weight: 500; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--call { width: auto; padding: 0 18px 0 14px; gap: 10px; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--call > span { display: flex !important; color: #0f172a; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--call small { color: #4b6372 !important; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { html body #cha-tr-mobile-leadbar, html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__action--wa svg { animation: none !important; } }
/* Cubi chat: the dock steps aside while it is open, and the panel always stays below the sticky header */
html body.cha-cubi-open #cha-tr-mobile-leadbar { display: none !important; }
html body #cha-cubi-panel.cha-cubi-panel { z-index: 110 !important; border: 1px solid #c7e2e0 !important; }
/* Everything inside fits: head, input and the closing note never get cut; only the suggestions scroll when space is short */
html body #cha-cubi-panel.cha-cubi-panel { display: flex !important; flex-direction: column !important; overflow: hidden !important; }
html body #cha-cubi-panel.cha-cubi-panel > * { flex-shrink: 0 !important; }
html body #cha-cubi-panel.cha-cubi-panel > .cha-cubi-messages { flex: 1 1 auto !important; min-height: 88px !important; overflow-y: auto !important; }
html body #cha-cubi-panel.cha-cubi-panel > .cha-cubi-quick { flex: 0 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; }
@media (min-width: 768px) and (max-width: 1023.98px) {
html body #cha-cubi-panel.cha-cubi-panel { top: auto !important; bottom: 24px !important; height: min(640px, calc(100vh - 148px)) !important; max-height: none !important; }
}
@media (min-width: 1024px) {
html body #cha-cubi-panel.cha-cubi-panel { top: auto !important; bottom: 24px !important; height: min(640px, calc(100vh / .875 - 160px)) !important; max-height: none !important; }
}
:root {
--hx-primary: #0e7c7b;
--hx-primary-ink: #0a5f5e;
--hx-primary-soft: #e6f2f1;
--hx-primary-line: #c7e2e0;
--hx-glow: #5ce5d9;
--hx-navy: #142234;
--hx-ink: #0f172a;
--hx-body: #334155;
--hx-muted: #56677b;
--hx-line: #dce7ed;
--hx-surface: #f2f7f9;
--hx-white: #ffffff;
--hx-wa: #0e7340;
--hx-r-sm: 12px;
--hx-r-md: 20px;
--hx-r-lg: 24px;
/* Owner rule 28 Oct 2026: no shadows and no dark backgrounds. Cards are
separated by a hairline border and a light surface only. */
--hx-shadow-sm: none;
--hx-shadow-md: none;
--hx-shadow-lg: none;
--hx-ease: cubic-bezier(.2, .7, .2, 1);
}
main.hx {
display: block;
color: var(--hx-body);
font-family: var(--hx-sans);
font-size: 15px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
:where(main.hx) *, :where(main.hx) *::before, :where(main.hx) *::after { box-sizing: border-box; }
:where(main.hx) img { display: block; max-width: 100%; height: auto; }
:where(main.hx) ul, :where(main.hx) ol { list-style: none; margin: 0; padding: 0; }
:where(main.hx) h1, :where(main.hx) h2, :where(main.hx) h3, :where(main.hx) p { margin: 0; }
/* Long German and Spanish words break inside narrow phone columns instead of widening them */
main.hx :is(h1, h2, h3, p, li, strong, span) { overflow-wrap: break-word; hyphens: auto; }
.hx-hero__grid, .hx-why, .hx-faq-grid, .hx-fees, .hx-trust { grid-template-columns: minmax(0, 1fr); }
:where(main.hx) a { color: inherit; text-decoration: none; }
main.hx :focus-visible { outline: 3px solid color-mix(in srgb, var(--hx-primary) 55%, transparent); outline-offset: 3px; border-radius: 10px; }
.hx-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hx-i { flex: none; display: block; }
/* WhatsApp mark in its own green wherever it sits on a light button or line */
.hx-i--wa { color: #128c4b; }
.hx-btn--primary .hx-i--wa, .hx-btn--wa .hx-i--wa { color: currentColor; }
/* Type ------------------------------------------------------------------ */
.hx-h1 {
color: var(--hx-ink);
font-family: var(--hx-display);
font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.85rem);
line-height: 1.14;
letter-spacing: -.01em;
font-weight: 350;
text-wrap: balance;
}
.hx-h1 em { font-style: normal; font-weight: 450; color: var(--hx-primary); }
.hx-h2 {
color: var(--hx-ink);
font-family: var(--hx-display);
font-size: clamp(1.45rem, 1.2rem + .95vw, 2rem);
line-height: 1.2;
letter-spacing: -.005em;
font-weight: 400;
text-wrap: balance;
}
.hx-h3 { color: var(--hx-ink); font-family: var(--hx-display); font-size: 1.12rem; line-height: 1.3; font-weight: 500; }
.hx-path__body strong, .hx-area__body strong, .hx-area--ask strong, .hx-service h3, .hx-step h3, .hx-points h3,
.hx-post__body strong, .hx-faq summary, .hx-fee-card h3 {
font-family: var(--hx-display); font-weight: 500; letter-spacing: 0;
}
.hx-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
color: var(--hx-primary); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
margin-bottom: 12px;
}
.hx-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.hx-lead { margin-top: 12px; color: var(--hx-muted); font-size: clamp(.95rem, .92rem + .15vw, 1.02rem); max-width: 62ch; }
.hx-head { margin-bottom: clamp(28px, 2vw + 20px, 48px); }
.hx-head--center { text-align: center; }
.hx-head--center .hx-lead { margin-left: auto; margin-right: auto; }
.hx-head--center .hx-eyebrow { justify-content: center; }
.hx-small { color: var(--hx-muted); font-size: .85rem; line-height: 1.5; }
.hx-center { text-align: center; }
/* Icon tile ------------------------------------------------------------- */
.hx-tile {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: var(--hx-r-sm);
color: var(--hx-primary); background: var(--hx-primary-soft);
border: 1px solid var(--hx-primary-line);
}
/* Buttons --------------------------------------------------------------- */
.hx-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hx-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 22px; border-radius: 999px;
font-size: .88rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
border: 1px solid transparent; cursor: pointer;
transition: transform .2s var(--hx-ease), box-shadow .2s var(--hx-ease), background-color .2s, color .2s, border-color .2s;
}
.hx-btn--lg { min-height: 52px; padding: 0 26px; font-size: .92rem; }
.hx-btn--block { width: 100%; }
.hx-btn--primary { background: var(--hx-primary); color: #fff; }
.hx-btn--primary:hover { background: var(--hx-primary-ink); transform: translateY(-1px); }
.hx-btn--ghost { background: #fff; color: var(--hx-ink); border-color: var(--hx-line); }
.hx-btn--ghost:hover { border-color: var(--hx-primary-line); color: var(--hx-primary); }
.hx-btn--soft { background: var(--hx-primary-soft); color: var(--hx-primary-ink); }
.hx-btn--soft:hover { background: #d9ecea; }
.hx-btn--wa { background: #e8f6ee; color: var(--hx-wa); border-color: #cbead8; }
.hx-btn--wa:hover { background: #dcf1e5; }
.hx-btn--light { background: #fff; color: var(--hx-navy); }
.hx-btn--light:hover { transform: translateY(-1px); }
.hx-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.hx-btn--outline-light:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
.hx-link {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
color: var(--hx-primary); font-weight: 600; font-size: .86rem;
}
.hx-link .hx-i { transition: transform .2s var(--hx-ease); }
.hx-link:hover .hx-i, a:hover > .hx-link .hx-i, a:hover .hx-path__cta .hx-i { transform: translateX(3px); }
/* Tags and chips -------------------------------------------------------- */
.hx-tag {
display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
background: rgba(255, 255, 255, .92); color: var(--hx-primary-ink);
font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
}
.hx-tag--solid { background: var(--hx-primary-soft); }
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hx-chip {
display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
background: #fff; border: 1px solid var(--hx-line); color: var(--hx-ink); font-size: .9rem; font-weight: 550;
transition: border-color .2s, color .2s, background-color .2s;
}
.hx-chip:hover { border-color: var(--hx-primary); color: var(--hx-primary); background: var(--hx-primary-soft); }
/* Cards ----------------------------------------------------------------- */
.hx-card {
background: #fff; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md);
padding: 24px; box-shadow: var(--hx-shadow-sm);
}
/* Sections -------------------------------------------------------------- */
.hx-section { padding: clamp(56px, 3.5vw + 36px, 104px) 0; }
.hx-section--tight { padding-top: clamp(40px, 2vw + 28px, 72px); padding-bottom: clamp(40px, 2vw + 28px, 72px); }
.hx-section--tint { background: var(--hx-surface); }
.hx-section[id], .hx-about[id], .hx-journey[id], .hx-card[id] { scroll-margin-top: 112px; }
/* Hero ------------------------------------------------------------------ */
.hx-hero {
position: relative; overflow: hidden;
padding: clamp(28px, 3vw + 12px, 72px) 0 clamp(32px, 3vw + 16px, 64px);
background: var(--hx-surface);
}
.hx-hero__grid { display: grid; gap: 36px; align-items: center; }
.hx-hero__eyebrow { margin-bottom: 18px; }
.hx-pill {
display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;
background: #fff; border: 1px solid var(--hx-primary-line); color: var(--hx-primary-ink);
font-size: .84rem; font-weight: 600; box-shadow: var(--hx-shadow-sm);
}
.hx-pill__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.hx-hero__lead { margin-top: 20px; font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); color: var(--hx-body); max-width: 56ch; }
.hx-hero .hx-actions { margin-top: 28px; }
.hx-facts { display: grid; gap: 10px; margin-top: 28px; }
.hx-facts li { display: flex; align-items: center; gap: 12px; color: var(--hx-ink); font-size: .88rem; font-weight: 500; }
.hx-facts .hx-tile { width: 36px; height: 36px; border-radius: 10px; }
.hx-hero__visual { position: relative; max-width: 560px; margin: 0 auto; width: 100%; display: grid; gap: 14px; }
/* Hero file journey: one sample file, flat and light like a printed record. Hairlines, a ruled progress
bar and quiet type; motion only once on first view and when a step opens. */
.hx-case { background: #fff; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); padding: 20px; }
.hx-case__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.hx-case__head .hx-tile { width: 40px; height: 40px; border-radius: 11px; }
.hx-case__title { color: var(--hx-ink); font-family: var(--hx-display); font-size: 1.06rem; font-weight: 500; line-height: 1.3; }
.hx-case__file { margin-top: 2px; color: var(--hx-muted); font-size: .74rem; font-weight: 500; letter-spacing: .02em; }
.hx-case__file span { color: var(--hx-ink); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.hx-case__badge {
justify-self: end; display: inline-flex; align-items: center; gap: 6px;
min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--hx-primary-line);
color: var(--hx-primary-ink); background: var(--hx-primary-soft); font-size: .7rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.hx-case__progress { display: grid; gap: 8px; margin: 16px 0 4px; color: var(--hx-muted); font-size: .76rem; font-weight: 600; }
.hx-case__bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.hx-case__bar i { position: relative; height: 4px; border-radius: 4px; background: var(--hx-line); overflow: hidden; }
.hx-case__bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--hx-primary); transform-origin: left; transform: scaleX(0); }
.hx-case__bar i.is-done::after { transform: scaleX(1); }
.hx-case__bar i.is-now::after { transform: scaleX(.5); }
.hx-case__steps { position: relative; margin-top: 4px; }
.hx-case__step { position: relative; border-top: 1px solid #edf2f5; }
.hx-case__step:first-child { border-top: 0; }
/* The thread that joins the nodes, like a ruled line on a form */
.hx-case__step:not(:last-child)::before {
content: ""; position: absolute; left: 15px; top: 40px; bottom: -10px; width: 0;
border-left: 1px dashed var(--hx-primary-line);
}
.hx-case__step.is-next::before, .hx-case__step.is-now::before { border-left-color: var(--hx-line); }
.hx-case__toggle {
display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
width: 100%; min-height: 52px; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.hx-case__toggle > .hx-i { color: var(--hx-muted); transition: transform .25s var(--hx-ease); }
.hx-case__step.is-open .hx-case__toggle > .hx-i { transform: rotate(180deg); }
.hx-case__node {
position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
border: 1px solid var(--hx-line); background: #fff; color: var(--hx-muted); font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.is-done .hx-case__node { background: var(--hx-primary); border-color: var(--hx-primary); color: #fff; }
.is-now .hx-case__node { border: 2px solid var(--hx-primary); color: var(--hx-primary); background: var(--hx-primary-soft); }
.is-now .hx-case__node::after {
content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--hx-primary); opacity: 0; pointer-events: none;
}
.hx-case__label { display: grid; gap: 1px; min-width: 0; }
.hx-case__label strong { color: var(--hx-ink); font-family: var(--hx-display); font-size: .98rem; font-weight: 500; line-height: 1.3; }
.hx-case__meta { display: flex; flex-wrap: wrap; column-gap: 6px; color: var(--hx-muted); font-size: .76rem; line-height: 1.4; }
.hx-case__meta > span + span::before { content: "·"; margin-right: 6px; }
.is-next .hx-case__label strong { color: var(--hx-body); }
.hx-case__state {
display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
font-size: .68rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--hx-muted); border: 1px solid var(--hx-line);
}
.is-done .hx-case__state { color: var(--hx-primary-ink); border-color: var(--hx-primary-line); }
.is-now .hx-case__state { color: #fff; background: var(--hx-primary); border-color: var(--hx-primary); }
.hx-case__toggle:hover .hx-case__label strong { color: var(--hx-primary); }
.hx-case__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s var(--hx-ease), visibility 0s linear .3s; }
.hx-case__step.is-open .hx-case__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s var(--hx-ease); }
.hx-case__inner { min-height: 0; overflow: hidden; padding-left: 44px; }
.hx-case__inner > p { color: var(--hx-body); font-size: .84rem; line-height: 1.6; }
.hx-case__inner > p:first-child { padding-top: 2px; }
.hx-case__need {
display: grid; gap: 8px; margin: 10px 0 14px; padding: 10px 12px; border-radius: 12px;
background: var(--hx-surface); border: 1px solid var(--hx-line); font-size: .82rem; line-height: 1.5;
}
.hx-case__need div + div { padding-top: 8px; border-top: 1px dashed var(--hx-line); }
.hx-case__need dt { color: var(--hx-primary-ink); font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.hx-case__need dd { margin: 1px 0 0; color: var(--hx-body); }
.hx-case__foot {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 10px;
margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--hx-line); color: var(--hx-muted); font-size: .78rem; line-height: 1.5;
}
.hx-case__foot > .hx-i { margin-top: 2px; color: var(--hx-primary); }
.hx-case__foot .hx-link { grid-column: 2; justify-self: start; }
/* Cubi beside the panel: named as an AI assistant, two ready questions, no text box */
.hx-ask { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; max-width: 560px; margin: 0 auto;
padding: 14px 16px; border: 1px solid var(--hx-primary-line); border-radius: var(--hx-r-md); background: var(--hx-primary-soft); }
.hx-ask__avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff !important; border: 1px solid var(--hx-primary-line); }
.hx-ask__title { color: var(--hx-ink); font-family: var(--hx-display); font-size: .95rem; font-weight: 500; line-height: 1.35; }
.hx-ask__note { margin-top: 2px; color: var(--hx-muted); font-size: .76rem; line-height: 1.5; }
.hx-ask__qs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Narrow phones: the questions take the full width of the card under the avatar, so long Spanish and German questions stay on one line */
@media (max-width: 419.98px) {
.hx-ask__body { display: contents; }
.hx-ask__title, .hx-ask__note { grid-column: 2; }
.hx-ask__qs { grid-column: 1 / -1; margin-top: 2px; }
.hx-ask { row-gap: 2px; }
.hx-ask__q { padding: 0 12px; }
.hx-ask__title { font-size: .9rem; }
}
.hx-ask__q {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
border: 1px solid var(--hx-primary-line); background: #fff; color: var(--hx-primary-ink); font: inherit; font-size: .8rem; font-weight: 600;
white-space: nowrap; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.hx-ask__q:hover { border-color: var(--hx-primary); background: #f7fbfb; }
/* First view: the steps settle in one after another, the bar fills, the current step rings once.
The steps slide only: a fade left the text half transparent for a moment (PageSpeed colour contrast). */
.hx-case.is-pending .hx-case__step { transform: translateY(6px); }
.hx-case.is-pending .hx-case__bar i::after { transform: scaleX(0); }
.hx-case.is-in .hx-case__step { transition: transform .45s var(--hx-ease); transition-delay: calc(var(--i) * 70ms); }
.hx-case.is-in .hx-case__bar i::after { transition: transform .5s var(--hx-ease); transition-delay: calc(120ms + var(--i) * 110ms); }
.hx-case.is-in .is-now .hx-case__node::after { animation: hx-ring 1.4s var(--hx-ease) .9s 1 both; }
@keyframes hx-ring { 0% { opacity: .55; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.35); } }
/* Quick paths ----------------------------------------------------------- */
.hx-paths { padding: 8px 0 clamp(16px, 2vw, 32px); background: #fff; }
.hx-paths__label { color: var(--hx-muted); font-size: .85rem; font-weight: 600; margin-bottom: 14px; }
.hx-paths__grid { display: grid; gap: 14px; }
.hx-path {
display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: start;
padding: 20px; border-radius: var(--hx-r-md); background: #fff; border: 1px solid var(--hx-line);
box-shadow: var(--hx-shadow-sm); transition: border-color .2s, box-shadow .25s var(--hx-ease), transform .25s var(--hx-ease);
}
.hx-path:hover { border-color: var(--hx-primary-line); box-shadow: var(--hx-shadow-md); transform: translateY(-2px); }
.hx-path__body { display: grid; gap: 4px; }
.hx-path__body strong { color: var(--hx-ink); font-size: 1.02rem; line-height: 1.35; }
.hx-path__body span { color: var(--hx-muted); font-size: .86rem; line-height: 1.55; }
.hx-path__cta { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--hx-primary); font-weight: 600; font-size: .92rem; }
.hx-path__cta .hx-i { transition: transform .2s var(--hx-ease); }
/* Treatment areas ------------------------------------------------------- */
.hx-onco {
display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--hx-r-lg); background: #fff;
border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow-md);
}
.hx-onco__media { aspect-ratio: 16 / 10; overflow: hidden; }
.hx-onco__media img { width: 100%; height: 100%; object-fit: cover; }
.hx-onco__body { padding: 24px; }
.hx-onco__body .hx-h3 { margin-top: 12px; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); font-weight: 400; }
.hx-onco__body p { margin-top: 10px; }
.hx-onco__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
.hx-areas { display: grid; gap: 16px; margin-top: 16px; }
.hx-area {
display: flex; flex-direction: column; overflow: hidden; border-radius: var(--hx-r-md);
background: #fff; border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow-sm);
transition: box-shadow .25s var(--hx-ease), transform .25s var(--hx-ease), border-color .2s;
}
a.hx-area:hover { box-shadow: var(--hx-shadow-md); transform: translateY(-2px); border-color: var(--hx-primary-line); }
.hx-area__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hx-surface); }
.hx-area__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--hx-ease); }
a.hx-area:hover .hx-area__media img { transform: scale(1.04); }
.hx-area__media .hx-tag { position: absolute; left: 12px; top: 12px; }
.hx-area__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.hx-area__body strong { color: var(--hx-ink); font-size: 1.08rem; }
.hx-area__body > span:not(.hx-link) { color: var(--hx-muted); font-size: .86rem; line-height: 1.6; }
.hx-area__body .hx-link { margin-top: auto; padding-top: 8px; }
.hx-area--ask {
align-items: flex-start; justify-content: center; gap: 14px; padding: 24px;
background: var(--hx-primary-soft); border-style: dashed; border-color: var(--hx-primary-line);
}
.hx-area--ask strong { color: var(--hx-ink); font-size: 1.02rem; line-height: 1.45; font-weight: 600; }
/* With six area cards the "ask" card would stand alone on the last row: it spans the row and lies flat (31 Oct 2026). */
.hx-areas > .hx-area--ask:nth-child(7) { grid-column: 1 / -1; }
@media (min-width: 768px) {
.hx-areas > .hx-area--ask:nth-child(7) { flex-direction: row; align-items: center; gap: 18px; }
.hx-areas > .hx-area--ask:nth-child(7) strong { flex: 1; }
}
/* Services -------------------------------------------------------------- */
.hx-services { display: grid; gap: 14px; }
.hx-service {
display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: var(--hx-r-md);
background: #fff; border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow-sm);
}
.hx-service h3 { color: var(--hx-ink); font-size: 1.04rem; font-weight: 650; }
/* Treatment in Turkiye when the patient cannot travel: one wide card under the services */
.hx-remote { margin-top: 20px; padding: 26px; border-radius: var(--hx-r-md); background: #fff; border: 1px solid var(--hx-primary-line); }
.hx-remote__head p:last-child { margin-top: 8px; max-width: 70ch; color: var(--hx-body); }
.hx-remote__steps { display: grid; gap: 16px; margin-top: 22px; }
.hx-remote__steps li { display: flex; gap: 14px; align-items: flex-start; }
.hx-remote__steps strong { display: block; color: var(--hx-ink); font-family: var(--hx-display); font-weight: 500; font-size: 1rem; }
.hx-remote__steps p { margin-top: 2px; color: var(--hx-muted); font-size: .86rem; line-height: 1.6; }
.hx-remote__foot { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hx-line); }
.hx-remote__foot .hx-note { flex: 1 1 320px; }
@media (min-width: 768px) { .hx-remote__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hx-remote { padding: 32px; } .hx-remote__steps { gap: 20px 32px; } }
.hx-service p { margin-top: 4px; color: var(--hx-muted); font-size: .86rem; line-height: 1.6; }
/* Process --------------------------------------------------------------- */
.hx-steps { display: grid; gap: 14px; counter-reset: hx; }
.hx-step {
position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px;
border-radius: var(--hx-r-md); background: #fff; border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow-sm);
}
.hx-step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hx-step__num {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
background: var(--hx-primary); color: #fff; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.hx-step__who { color: var(--hx-primary); font-size: .74rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.hx-step h3 { color: var(--hx-ink); font-size: 1.06rem; font-weight: 650; }
.hx-step p { color: var(--hx-muted); font-size: .85rem; line-height: 1.6; }
.hx-step__when {
display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px;
color: var(--hx-ink); font-size: .82rem; font-weight: 600;
}
.hx-step__when .hx-i { color: var(--hx-primary); }
/* What reaches the applicant at this step, as the live notifications send it */
.hx-step p.hx-step__get {
display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; padding: 10px 12px; border-radius: 12px;
background: var(--hx-primary-soft); border: 1px solid var(--hx-primary-line); color: var(--hx-body); font-size: .8rem; line-height: 1.5;
}
.hx-step__get .hx-i { margin-top: 2px; color: var(--hx-primary); }
.hx-step__get strong { display: block; color: var(--hx-primary-ink); font-size: .66rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.hx-step__get + .hx-step__when { margin-top: 6px; }
.hx-note { display: flex; gap: 10px; align-items: flex-start; color: var(--hx-primary-ink); font-size: .88rem; font-weight: 500; }
.hx-note .hx-i { margin-top: 2px; }
.hx-journey { margin-top: 20px; padding: 24px; border-radius: var(--hx-r-lg); background: #fff; border: 1px solid var(--hx-line); }
.hx-journey__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.hx-journey__hint { color: var(--hx-muted); font-size: .82rem; }
.hx-journey__line { position: relative; display: grid; gap: 0; margin-top: 22px; }
.hx-journey__line li { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 4px 16px; align-content: start; padding-bottom: 20px; }
.hx-journey__line li:last-child { padding-bottom: 0; }
.hx-journey__line li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--hx-primary-line); }
.hx-journey__line li:last-child::before { display: none; }
.hx-journey__dot { grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: #fff; border: 2px solid var(--hx-primary); position: relative; z-index: 1; }
.hx-journey__line li:last-child .hx-journey__dot { background: var(--hx-primary); }
.hx-journey__day { color: var(--hx-primary); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx-journey__line p { color: var(--hx-body); font-size: .9rem; line-height: 1.55; }
.hx-journey__foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hx-line); }
.hx-journey__tag { color: var(--hx-primary); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hx-journey__head .hx-h3 { margin-top: 4px; width: 100%; }
/* Fees ------------------------------------------------------------------ */
.hx-fees { display: grid; gap: 16px; }
.hx-fee-card { padding: 28px; border-color: var(--hx-primary-line); }
.hx-fee-card__label { color: var(--hx-muted); font-size: .9rem; font-weight: 600; }
.hx-fee-card__amount { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; color: var(--hx-ink); font-family: var(--hx-display); font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); font-weight: 400; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hx-fee-card__amount small { color: var(--hx-muted); font-size: .9rem; font-weight: 550; letter-spacing: 0; }
.hx-fee-card h3 { margin-top: 22px; color: var(--hx-ink); font-size: .95rem; font-weight: 650; }
.hx-checks, .hx-pay, .hx-list { display: grid; gap: 10px; margin-top: 12px; }
.hx-checks li, .hx-pay li, .hx-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; line-height: 1.5; }
.hx-checks .hx-i, .hx-pay .hx-i, .hx-list .hx-i { margin-top: 2px; color: var(--hx-primary); }
.hx-fee-card .hx-small { margin-top: 12px; }
.hx-fee-card .hx-btn { margin-top: 22px; }
.hx-cost-card { display: flex; flex-direction: column; gap: 12px; }
.hx-cost-card p { color: var(--hx-body); }
.hx-cost-card .hx-link { margin-top: auto; }
.hx-docs { display: grid; gap: 12px; margin-top: 16px; }
.hx-docs li { display: flex; align-items: center; gap: 12px; color: var(--hx-ink); font-size: .95rem; font-weight: 550; }
.hx-docs .hx-tile { width: 40px; height: 40px; }
.hx-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: var(--hx-r-sm); background: var(--hx-surface); color: var(--hx-body); font-size: .9rem; }
.hx-tip .hx-i { margin-top: 2px; color: var(--hx-primary); }
/* Why Cuba / about ------------------------------------------------------ */
.hx-why { display: grid; gap: 32px; align-items: start; }
.hx-points { display: grid; gap: 18px; }
.hx-points li { display: flex; gap: 16px; align-items: flex-start; }
.hx-points h3 { color: var(--hx-ink); font-size: 1.04rem; font-weight: 650; }
.hx-points p { margin-top: 2px; color: var(--hx-muted); font-size: .86rem; }
.hx-about { overflow: hidden; border-radius: var(--hx-r-lg); background: #fff; border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow-md); }
.hx-about__media { aspect-ratio: 16 / 9; overflow: hidden; }
.hx-about__media img { width: 100%; height: 100%; object-fit: cover; }
.hx-about__body { padding: 24px; }
.hx-about__body p { margin-top: 10px; }
.hx-about__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.hx-about__facts li { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--hx-surface); color: var(--hx-ink); font-size: .85rem; font-weight: 550; }
.hx-about__facts .hx-i { color: var(--hx-primary); }
.hx-why__copy .hx-about__facts { margin: 24px 0 0; }
/* Legal details of both companies: a full-width strip under "Why Cuba" and "Who are we?" */
.hx-legal { display: grid; gap: 16px; margin-top: 32px; padding: 20px; border-radius: var(--hx-r-md); background: var(--hx-surface); border: 1px solid var(--hx-line); }
.hx-legal__title { display: flex; align-items: center; gap: 8px; color: var(--hx-ink); font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.hx-legal__title .hx-i { color: var(--hx-primary); }
.hx-legal__activity { margin-top: 6px; color: var(--hx-muted); font-size: .82rem; line-height: 1.55; }
.hx-legal__grid { display: grid; gap: 12px; }
.hx-legal__item { display: grid; align-content: start; gap: 2px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--hx-line); font-size: .8rem; line-height: 1.5; color: var(--hx-body); }
.hx-legal__scope { color: var(--hx-primary-ink); font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.hx-legal__name { color: var(--hx-ink); font-weight: 600; }
@media (min-width: 768px) { .hx-legal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hx-legal { grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); gap: 24px; align-items: center; padding: 22px 24px; } }
/* Partners -------------------------------------------------------------- */
.hx-logos.cha-partner-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hx-logo { flex: 0 0 calc((100% - 12px) / 2); display: flex; align-items: center; justify-content: center; height: 96px; padding: 14px 18px;
border-radius: var(--hx-r-sm); background: #fff; border: 1px solid var(--hx-line); }
.hx-logo img { opacity: .95; }
.hx-logo:hover img { opacity: 1; }
.hx-logo--more { flex-direction: column; gap: 2px; background: var(--hx-primary-soft); border-color: var(--hx-primary-line); color: var(--hx-primary-ink); text-align: center; }
.hx-logo--more strong { font-family: var(--hx-display); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.hx-logo--more span { font-family: var(--hx-display); font-size: .98rem; font-weight: 500; line-height: 1.3; text-wrap: balance; max-width: 12ch; }
.hx-logos + .hx-center { margin-top: 24px; }
.hx-logos.cha-partner-wall .hx-logo { min-width: 0; }
/* "And other healthcare institutions": a quiet line under the wall, hairlines either side */
.hx-logos-more { display: flex; align-items: center; gap: 16px; max-width: 520px; margin: 20px auto 0; color: var(--hx-primary-ink);
font-family: var(--hx-display); font-size: 1rem; font-weight: 500; line-height: 1.3; text-align: center; }
.hx-logos-more::before, .hx-logos-more::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--hx-primary-line); }
/* Our partners: a heading and the same logo cards as the healthcare wall, logos only; each card is a link */
.hx-allies { margin-top: 48px; }
.hx-allies .hx-head { margin-bottom: 24px; }
.hx-allies .hx-head .hx-allies__h { margin-bottom: 4px; }
.hx-allies .hx-small a { color: var(--hx-primary-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hx-primary-line); text-underline-offset: 3px; }
.hx-allies .hx-small a:hover { text-decoration-color: currentColor; }
.hx-allies__h { margin: 6px 0 0; color: var(--hx-ink); font-family: var(--hx-display); font-weight: 450; font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); line-height: 1.25; text-wrap: balance; }
.hx-allies__wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hx-ally { flex: 0 0 calc((100% - 24px) / 3); min-width: 0; }
.hx-ally__card { display: flex; align-items: center; justify-content: center; height: 96px; padding: 14px 18px; border-radius: var(--hx-r-sm); background: #fff;
border: 1px solid var(--hx-line); transition: border-color .2s; }
.hx-ally__card:hover, .hx-ally__card:focus-visible { border-color: var(--hx-primary-line); }
.hx-ally__card img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--hx-ally-logo-h, 28px); object-fit: contain; opacity: .95; }
.hx-ally__card:hover img { opacity: 1; }
@media (max-width: 639.98px) { .hx-ally__card { height: 80px; padding: 10px 12px; } .hx-ally__card img { max-height: calc(var(--hx-ally-logo-h, 28px) * .8); } }
@media (min-width: 1024px) { .hx-ally { flex-basis: calc((100% - 36px) / 4); } .hx-ally__card { height: 104px; } }
/* Security / tracking --------------------------------------------------- */
.hx-trust { display: grid; gap: 16px; }
.hx-trust__card { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.hx-trust__card .hx-list { margin-top: 2px; }
.hx-trust__card .hx-link { margin-top: auto; }
.hx-trust__card--track { background: var(--hx-primary-soft); border-color: var(--hx-primary-line); }
.hx-trust__card--track .hx-actions { margin-top: auto; padding-top: 6px; }
/* FAQ + contact --------------------------------------------------------- */
.hx-faq-grid { display: grid; gap: 20px; align-items: start; }
.hx-faqs { display: grid; gap: 10px; }
.hx-faq { border-radius: var(--hx-r-sm); background: #fff; border: 1px solid var(--hx-line); transition: border-color .2s, box-shadow .2s; }
.hx-faq[open] { border-color: var(--hx-primary-line); box-shadow: var(--hx-shadow-sm); }
.hx-faq summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 18px;
color: var(--hx-ink); font-size: 1rem; line-height: 1.4; cursor: pointer; list-style: none;
}
.hx-faq summary::-webkit-details-marker { display: none; }
.hx-faq summary .hx-i { color: var(--hx-primary); transition: transform .25s var(--hx-ease); }
.hx-faq[open] summary .hx-i { transform: rotate(180deg); }
.hx-faq p { padding: 0 18px 18px; color: var(--hx-body); font-size: .88rem; line-height: 1.7; }
.hx-contact { padding: 24px; }
.hx-contact__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.hx-contact__head p { margin-top: 2px; color: var(--hx-muted); font-size: .92rem; }
.hx-contact form { margin-top: 16px; }
/* The old design system gives every button its parent's type; the form's buttons speak like the rest */
main.hx .hx-contact button { font-family: var(--hx-sans); font-size: .88rem; font-weight: 600; letter-spacing: 0; }
.hx-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--hx-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.hx-or::before, .hx-or::after { content: ""; flex: 1; height: 1px; background: var(--hx-line); }
.hx-contact__alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hx-contact__alt .hx-btn { padding: 0 14px; border-radius: var(--hx-r-sm); }
/* Patient guide --------------------------------------------------------- */
.hx-row-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(24px, 2vw + 16px, 40px); }
.hx-row-head .hx-head { margin-bottom: 0; }
.hx-posts { display: grid; gap: 16px; }
.hx-post {
display: flex; flex-direction: column; overflow: hidden; border-radius: var(--hx-r-md); background: #fff;
border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow-sm); transition: box-shadow .25s var(--hx-ease), transform .25s var(--hx-ease);
}
.hx-post:hover { box-shadow: var(--hx-shadow-md); transform: translateY(-2px); }
.hx-post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hx-surface); }
.hx-post__media img { width: 100%; height: 100%; object-fit: cover; }
.hx-post__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.hx-post__body .hx-tag { align-self: flex-start; background: var(--hx-primary-soft); }
.hx-post__body strong { color: var(--hx-ink); font-size: 1.05rem; line-height: 1.4; }
.hx-post__body .hx-link { margin-top: auto; }
/* Offices --------------------------------------------------------------- */
.hx-offices { display: grid; gap: 16px; }
.hx-office { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--hx-r-md); background: #fff; border: 1px solid var(--hx-line); }
.hx-office__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
/* What the applicant has at the end of the preliminary review, beside a sample report drawn as a
sheet of paper: ruled lines in place of text, a second sheet behind it, no shadow. */
.hx-section--rule { border-top: 1px solid var(--hx-line); }
/* Fee card: what the fee is and what happens if the doctor says no, in plain words */
.hx-refund { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 4px; padding: 12px 14px; border-radius: 12px;
background: var(--hx-surface); border: 1px solid var(--hx-line); color: var(--hx-body); font-size: .84rem; line-height: 1.55; }
.hx-refund .hx-i { margin-top: 2px; color: var(--hx-primary); }
.hx-refund strong { display: block; color: var(--hx-ink); font-weight: 650; }
.hx-deliver { display: grid; gap: 40px; align-items: center; }
.hx-gets { display: grid; gap: 18px; }
.hx-gets li { display: flex; gap: 16px; align-items: flex-start; }
.hx-gets h3 { color: var(--hx-ink); font-family: var(--hx-display); font-size: 1.04rem; font-weight: 500; }
.hx-gets p { margin-top: 2px; color: var(--hx-muted); font-size: .88rem; line-height: 1.6; }
.hx-deliver .hx-note { margin-top: 24px; padding: 14px 16px; border-radius: 14px; background: var(--hx-surface); border: 1px solid var(--hx-line); }
.hx-deliver .hx-actions { margin-top: 24px; }
.hx-doc { position: relative; isolation: isolate; margin: 0; width: 100%; max-width: 480px; justify-self: center; }
.hx-doc__paper { position: relative; padding: 26px 26px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--hx-line); }
.hx-doc__paper::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 16px; background: var(--hx-surface);
border: 1px solid var(--hx-line); transform: translate(10px, 12px) rotate(1.6deg);
}
.hx-doc__paper::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--hx-primary); }
.hx-doc__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.hx-doc__top .hx-case__badge { flex: none; }
main.hx .hx-doc__top img { width: auto !important; height: 22px !important; max-width: 60%; }
.hx-doc__top .hx-case__badge { margin: 0; }
.hx-doc__title { margin-top: 20px; color: var(--hx-ink); font-family: var(--hx-display); font-size: 1.35rem; font-weight: 400; line-height: 1.2; }
.hx-doc__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 6px; padding: 12px 0; border-top: 1px solid var(--hx-line); border-bottom: 1px solid var(--hx-line); }
.hx-doc__meta dt { color: var(--hx-muted); font-size: .64rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.hx-doc__meta dd { margin: 2px 0 0; color: var(--hx-ink); font-size: .78rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.hx-doc__sec { padding-top: 14px; }
.hx-doc__h { color: var(--hx-primary-ink); font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.hx-doc__lines { display: grid; gap: 7px; margin-top: 9px; }
.hx-doc__lines i { display: block; width: var(--w); height: 7px; border-radius: 4px; background: #e8eff2; }
.hx-doc__lines i[style="--w:0%"] { display: none; }
.hx-doc figcaption { display: flex; gap: 8px; align-items: flex-start; margin-top: 26px; color: var(--hx-muted); font-size: .8rem; line-height: 1.5; }
.hx-doc figcaption .hx-i { margin-top: 2px; color: var(--hx-primary); }
.hx-office__city { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; white-space: nowrap; border-radius: 999px; background: var(--hx-surface); color: var(--hx-ink); font-size: .78rem; font-weight: 600; }
.hx-office__role { color: var(--hx-muted); font-size: .86rem; }
.hx-office__address { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--hx-line); color: var(--hx-body); font-size: .84rem; line-height: 1.55; }
.hx-office__address .hx-i { margin-top: 2px; color: var(--hx-primary); }
.hx-office__actions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: auto; padding-top: 12px; }
.hx-office__actions button.hx-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .86rem; }
.hx-link--muted { color: var(--hx-muted); }
.hx-link--muted:hover { color: var(--hx-primary); }
/* Closing band ---------------------------------------------------------- */
.hx-final {
color: var(--hx-body);
padding: clamp(56px, 3vw + 40px, 96px) 0;
background: var(--hx-primary-soft);
border-top: 1px solid var(--hx-primary-line);
}
.hx-final__inner { display: grid; gap: 28px; justify-items: center; text-align: center; }
.hx-final .hx-actions { justify-content: center; }
.hx-final .hx-h2 { color: var(--hx-ink); }
.hx-final p { margin: 14px auto 0; max-width: 56ch; font-size: 1.05rem; }
/* Tablet ---------------------------------------------------------------- */
@media (min-width: 640px) {
.hx-wrap { padding: 0 28px; }
.hx-facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 22px; }
.hx-facts li { font-size: .9rem; }
.hx-areas, .hx-services, .hx-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hx-paths__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-path { grid-template-columns: 1fr; }
.hx-path__cta { grid-column: 1; }
.hx-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-fees { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hx-docs-card { grid-column: 1 / -1; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
.hx-facts { grid-template-columns: 1fr; }
.hx-hero__visual { max-width: 560px; }
.hx-step:last-child { grid-column: 1 / -1; }
}
/* Desktop --------------------------------------------------------------- */
@media (min-width: 1024px) {
.hx-wrap { padding: 0 32px; }
.hx-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; }
.hx-hero__visual { margin: 0; }
/* The panel stands beside the text; the Cubi entry closes the text column under the facts */
.hx-hero__grid { grid-template-areas: "copy visual" "ask visual"; grid-template-rows: auto 1fr; align-items: start; row-gap: 28px; }
.hx-hero__copy { grid-area: copy; padding-top: 12px; }
.hx-hero__visual { grid-area: visual; }
.hx-ask { grid-area: ask; margin: 0; max-width: 540px; }
.hx-facts { grid-template-columns: 1fr; }
.hx-paths__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-path { grid-template-columns: 1fr; }
.hx-path__cta { grid-column: 1; }
.hx-onco { grid-template-columns: 1.05fr 1fr; }
.hx-onco__media { aspect-ratio: auto; min-height: 100%; }
.hx-onco__body { padding: 40px; align-self: center; }
.hx-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hx-steps .hx-step { grid-column: span 2; }
.hx-steps .hx-step:nth-child(n+4) { grid-column: span 3; }
.hx-journey { padding: 32px; }
.hx-journey__line { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.hx-journey__line li { grid-template-columns: 1fr; padding: 0; gap: 10px; }
.hx-journey__line li::before { left: 18px; right: -20px; top: 7px; bottom: auto; width: auto; height: 2px; }
.hx-journey__dot { grid-row: auto; margin: 0; }
.hx-journey__line li > * { grid-column: 1; }
.hx-fees { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.hx-fee-card { grid-row: span 2; }
.hx-docs-card { grid-column: auto; }
.hx-docs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hx-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
/* Wider, lower photo so the about card keeps the height of the text beside it */
.hx-about__media { aspect-ratio: 2 / 1; }
.hx-about__body { padding: 22px 24px; }
.hx-about__body .hx-link { margin-top: 14px; }
.hx-deliver { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; }
.hx-logo { flex-basis: calc((100% - 36px) / 4); height: 104px; }
.hx-faq-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; }
.hx-contact { position: sticky; top: 120px; }
.hx-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.hx-hero__grid { gap: 64px; }
}
/* Phones: keep the last block clear of the floating contact bar --------- */
@media (max-width: 767.98px) {
.hx-hero .hx-actions .hx-btn { width: 100%; }
.hx-final { padding-bottom: 96px; }
.hx-final .hx-actions .hx-btn { width: 100%; }
.hx-contact__alt { grid-template-columns: 1fr; }
.hx-hero__visual { max-width: none; }
.hx-case { padding: 16px; }
.hx-case__badge { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.hx-deliver .hx-actions .hx-btn { width: 100%; }
.hx-doc__paper { padding: 22px 18px 18px; }
.hx-doc__paper::after { left: 18px; right: 18px; }
.hx-doc__meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hx-doc__meta > div:nth-child(2) { grid-column: 1 / -1; order: 3; }
/* Narrow screens: the node already shows done and next, so only the current step keeps its word on screen */
/* The step name and its line below get the full width; the current step's word sits under them on its own row */
.hx-case__toggle { grid-template-columns: 32px minmax(0, 1fr) 16px; column-gap: 12px; row-gap: 6px; }
.hx-case__node { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
.hx-case__label { grid-column: 2; grid-row: 1; }
.hx-case__state { grid-column: 2; grid-row: 2; justify-self: start; }
.hx-case__toggle > .hx-i { grid-column: 3; grid-row: 1 / span 2; align-self: start; margin-top: 8px; }
.hx-case__label strong { font-size: .95rem; }
/* Who and how long: two short lines instead of one that breaks in the middle */
.hx-case__meta { display: grid; row-gap: 1px; }
.hx-case__meta > span + span::before { content: none; }
.is-done .hx-case__state, .is-next .hx-case__state { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.hx-step { display: grid; grid-template-columns: 32px 1fr; gap: 4px 14px; padding: 18px; }
.hx-step__top { grid-row: 1 / span 5; margin: 0; }
.hx-step__top .hx-tile { display: none; }
.hx-step > *:not(.hx-step__top) { grid-column: 2; }
.hx-step__when { padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
main.hx *, main.hx *::before, main.hx *::after { animation: none !important; transition: none !important; }
}
/* Long button labels (Spanish, German) wrap inside narrow cards */
.hx-trust__card .hx-btn { white-space: normal; text-align: center; }
@media (max-width: 639.98px) { .hx-trust__card .hx-btn { width: 100%; } }
/* Cubi invite: the old invite, its red unread badge and the pulsing ring are retired */
html body .cha-tr-mobile-leadbar__nudge, html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__badge { display: none !important; }
html body #cha-tr-mobile-leadbar .cha-tr-mobile-leadbar__avatar-wrap::before { animation: none !important; opacity: 0 !important; }
html body #cha-tr-mobile-leadbar .hx-invite {
position: absolute; right: 0; bottom: calc(100% + 14px); width: 340px; padding: 16px; border-radius: 18px;
background: #fff; border: 1px solid #c7e2e0; color: #0f172a; text-align: left;
font-family: "CHA Montserrat", Montserrat, "CHA Montserrat Fallback", system-ui, sans-serif;
opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
html body #cha-tr-mobile-leadbar .hx-invite.is-in { opacity: 1; transform: none; pointer-events: auto; }
html body #cha-tr-mobile-leadbar .hx-invite::after {
content: ""; position: absolute; top: 100%; left: var(--hx-tail, 40px); width: 12px; height: 12px; margin: -6px 0 0 -6px;
background: #fff; border: solid #c7e2e0; border-width: 0 1px 1px 0; transform: rotate(45deg);
}
html body #cha-tr-mobile-leadbar .hx-invite__head { display: flex; align-items: center; gap: 12px; }
html body #cha-tr-mobile-leadbar .hx-invite__avatar { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #e6f2f1; display: grid; place-items: center; }
html body #cha-tr-mobile-leadbar .hx-invite__avatar img { width: 36px; height: 36px; border-radius: 50%; background: #fff; }
html body #cha-tr-mobile-leadbar .hx-invite__avatar i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #16a34a; border: 2px solid #fff; }
html body #cha-tr-mobile-leadbar .hx-invite__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html body #cha-tr-mobile-leadbar .hx-invite__who strong { font-family: "CHA Jost", Jost, "CHA Jost Fallback", system-ui, sans-serif; font-weight: 500; font-size: 1.05rem; line-height: 1.1; color: #0f172a !important; }
html body #cha-tr-mobile-leadbar .hx-invite__who small { display: block !important; font-size: .74rem; font-weight: 500; line-height: 1.2; color: #4b6372 !important; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #cha-tr-mobile-leadbar .hx-invite__close {
flex: none; width: 36px; height: 36px; min-height: 36px; min-width: 36px; margin: -6px -6px 0 0; padding: 0; display: grid; place-items: center;
border: 0; border-radius: 50%; background: transparent; color: #4b6372; cursor: pointer;
}
html body #cha-tr-mobile-leadbar .hx-invite__close:hover { background: #f2f7f9; color: #0f172a; }
html body #cha-tr-mobile-leadbar .hx-invite__close svg { width: 18px; height: 18px; }
html body #cha-tr-mobile-leadbar .hx-invite__text { margin: 12px 0 0; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: #f2f7f9; font-size: .86rem; line-height: 1.5; color: #1e3a4a; }
html body #cha-tr-mobile-leadbar .hx-invite__text strong { display: inline !important; font: inherit; font-weight: 650; color: #0f172a !important; }
html body #cha-tr-mobile-leadbar .hx-invite__qs { display: grid; gap: 8px; margin-top: 12px; }
html body #cha-tr-mobile-leadbar .hx-invite__q {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px;
border: 1px solid #c7e2e0; border-radius: 12px; background: #fff; color: #0e7c7b; font: inherit; font-size: .86rem; font-weight: 600;
text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s;
}
html body #cha-tr-mobile-leadbar .hx-invite__q:hover { background: #e6f2f1; border-color: #0e7c7b; }
html body #cha-tr-mobile-leadbar .hx-invite__q span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #cha-tr-mobile-leadbar .hx-invite__q svg { flex: none; width: 16px; height: 16px; }
html body #cha-tr-mobile-leadbar .hx-invite__close:focus-visible, html body #cha-tr-mobile-leadbar .hx-invite__q:focus-visible { outline: 2px solid #0e7c7b; outline-offset: 2px; }
@media (max-width: 767.98px) {
html body #cha-tr-mobile-leadbar .hx-invite { left: 12px; right: 12px; width: auto; bottom: calc(100% + 12px); }
}
@media (prefers-reduced-motion: reduce) { html body #cha-tr-mobile-leadbar .hx-invite { transition: none; } }
/* Treatment pages ---------------------------------------------------------
One column on phones; from 1024px the text runs beside a sticky summary card. */
.hx-tp-hero { padding: clamp(18px, 2vw + 8px, 40px) 0 clamp(36px, 3vw + 18px, 64px); background: var(--hx-surface); }
.hx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: clamp(18px, 2vw + 8px, 32px); color: var(--hx-muted); font-size: .8rem; }
.hx-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.hx-crumbs li + li::before { content: ""; width: 5px; height: 5px; border: solid #94a3b8; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); margin-right: 2px; }
.hx-crumbs a { color: var(--hx-body); }
.hx-crumbs a:hover { color: var(--hx-primary); }
.hx-crumbs [aria-current] { color: var(--hx-ink); font-weight: 600; }
.hx-tp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.hx-tp-hero .hx-h1 { font-size: clamp(1.8rem, 1.35rem + 1.7vw, 2.6rem); }
.hx-tp-hero .hx-h1 em { display: block; }
.hx-tp-hero .hx-actions { margin-top: 26px; }
.hx-tp-hero__media { margin: 0; border-radius: var(--hx-r-lg); overflow: hidden; background: #e2ebef; aspect-ratio: 4 / 3; }
.hx-tp-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hx-tp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-bottom: clamp(48px, 3vw + 28px, 88px); }
.hx-tp-aside { display: none; }
.hx-tp-sec { padding-top: clamp(44px, 2.5vw + 28px, 72px); scroll-margin-top: 104px; }
.hx-tp-head { margin-bottom: 24px; }
.hx-tp-h2 { color: var(--hx-ink); font-family: var(--hx-display); font-size: clamp(1.35rem, 1.15rem + .75vw, 1.75rem); line-height: 1.25; font-weight: 400; text-wrap: balance; }
.hx-tp-lead { margin-top: 10px; color: var(--hx-muted); font-size: .95rem; max-width: 64ch; }
.hx-tp-body p { color: var(--hx-body); }
.hx-tp-body .hx-h3 { font-size: 1.04rem; }
.hx-tp-body li p, .hx-tp-gets p { margin-top: 4px; font-size: .9rem; line-height: 1.6; color: var(--hx-body); }
/* Photos inside sections */
/* A photo is a card like the others: picture on top, a short note below */
.hx-tp-figure { margin: 0 0 24px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); background: #fff; overflow: hidden; }
.hx-tp-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #e2ebef; }
.hx-tp-figure figcaption { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--hx-ink); font-size: .86rem; font-weight: 500; line-height: 1.5; }
.hx-tp-figure figcaption .hx-tile { width: 34px; height: 34px; border-radius: 10px; }
/* Embedded video (31 Oct 2026): a 16:9 player in the figure frame; the caption names the source and links out */
.hx-tp-video .hx-tp-video__ratio { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #e2ebef; }
.hx-tp-video .hx-tp-video__ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hx-tp-video figcaption { align-items: flex-start; border-top: 1px solid var(--hx-line); }
.hx-tp-video figcaption > span { min-width: 0; }
.hx-tp-video__link { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; color: var(--hx-primary); font-weight: 600; white-space: nowrap; text-decoration: none; }
.hx-tp-video__link:hover { text-decoration: underline; }
#video .hx-tp-figure { margin: 0; }
#cuba .hx-tp-figure { margin: 24px 0 0; }
.hx-tp-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hx-tp-figure--side { margin: 8px 0 0; }
/* Who it is for */
.hx-tp-whos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hx-tp-who { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); background: #fff; }
/* What the doctor looks at */
.hx-tp-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hx-line); }
.hx-tp-points li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hx-line); }
.hx-tp-num { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--hx-primary-soft); color: var(--hx-primary); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-tp-gloss { margin-top: 24px; padding: 20px; border-radius: var(--hx-r-md); background: var(--hx-surface); border: 1px solid var(--hx-line); }
.hx-tp-gloss__title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--hx-ink); font-family: var(--hx-display); font-size: 1.02rem; font-weight: 500; }
.hx-tp-gloss__title .hx-i { color: var(--hx-primary); }
.hx-tp-gloss dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 14px; }
.hx-tp-gloss dl div { padding: 12px 14px; border-radius: var(--hx-r-sm); background: #fff; border: 1px solid var(--hx-line); }
.hx-tp-gloss dt { color: var(--hx-primary-ink); font-weight: 700; font-size: .88rem; }
.hx-tp-gloss dd { margin: 4px 0 0; color: var(--hx-body); font-size: .86rem; line-height: 1.55; }
/* Document checklist */
.hx-tp-docs { padding: 20px; border: 1px solid var(--hx-primary-line); border-radius: var(--hx-r-md); background: #fff; }
.hx-tp-docs__bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hx-tp-docs__count { flex: none; color: var(--hx-ink); font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-tp-docs__track { flex: 1; height: 6px; border-radius: 6px; background: var(--hx-primary-soft); overflow: hidden; }
.hx-tp-docs__track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--hx-primary); transition: width .3s var(--hx-ease); }
.hx-tp-docs ul { display: grid; gap: 8px; }
.hx-tp-doc { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-sm); cursor: pointer; transition: background-color .2s, border-color .2s; }
.hx-tp-doc:hover { border-color: var(--hx-primary-line); }
.hx-tp-doc input { position: absolute; top: 14px; left: 14px; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.hx-tp-doc__box { flex: none; align-self: flex-start; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border: 1.5px solid #9fb5c0; border-radius: 6px; background: #fff; color: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.hx-tp-doc__icon { flex: none; align-self: flex-start; display: none; color: var(--hx-primary); margin-top: 2px; }
.hx-tp-doc__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hx-tp-doc__text strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--hx-ink); font-family: var(--hx-display); font-size: 1rem; font-weight: 500; line-height: 1.3; }
.hx-tp-doc__text em { font-style: normal; padding: 2px 8px; border-radius: 999px; background: var(--hx-primary-soft); color: var(--hx-primary-ink); font-family: var(--hx-sans); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hx-tp-doc__text small { color: var(--hx-body); font-size: .86rem; line-height: 1.55; }
.hx-tp-doc input:checked ~ .hx-tp-doc__box { background: var(--hx-primary); border-color: var(--hx-primary); color: #fff; }
.hx-tp-doc:has(input:checked) { background: #f4faf9; border-color: var(--hx-primary-line); }
.hx-tp-doc input:focus-visible ~ .hx-tp-doc__box { outline: 3px solid color-mix(in srgb, var(--hx-primary) 45%, transparent); outline-offset: 2px; }
.hx-tp-docs__foot { display: grid; gap: 14px; margin-top: 4px; }
.hx-tp-docs__foot .hx-btn { justify-self: start; }
.hx-tp-docs > .hx-small { margin-top: 12px; }
/* Steps */
.hx-tp-steps { position: relative; display: grid; gap: 0; margin-bottom: 14px; }
.hx-tp-step { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.hx-tp-step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 2px; width: 2px; background: var(--hx-primary-line); }
.hx-tp-step__dot { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1.5px solid var(--hx-primary-line); color: var(--hx-primary); }
.hx-tp-step__when { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; background: var(--hx-primary-soft); color: var(--hx-primary-ink); font-size: .72rem; font-weight: 650; }
/* What to expect in Cuba */
.hx-tp-prose { display: grid; gap: 14px; max-width: 68ch; }
.hx-tp-prose p { font-size: .96rem; line-height: 1.75; }
.hx-tp-gets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
.hx-tp-gets li { display: flex; gap: 14px; padding: 18px; border-radius: var(--hx-r-md); background: var(--hx-surface); }
/* Cuban product cards */
.hx-tp-prods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; }
.hx-tp-prod { padding: 20px; border: 1px solid var(--hx-primary-line); border-radius: var(--hx-r-md); background: #fff; }
.hx-tp-prod__media { margin: 0 0 14px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-sm); overflow: hidden; background: #fff; }
.hx-tp-prod__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.hx-tp-prod__kind { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--hx-primary-soft); color: var(--hx-primary-ink) !important; font-size: .7rem !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hx-tp-prod__main > p:not(.hx-tp-prod__kind) { margin-top: 6px; font-size: .92rem !important; line-height: 1.6 !important; }
.hx-tp-prod dl { display: grid; gap: 10px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-tp-prod dt { color: var(--hx-muted); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hx-tp-prod dd { margin: 2px 0 0; color: var(--hx-ink); font-size: .9rem; line-height: 1.55; }
@media (min-width: 768px) {
.hx-tp-prod { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); column-gap: 28px; align-items: start; }
.hx-tp-prod dl { margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--hx-line); }
}
/* Urgent symptoms: warm light surface, never dark */
.hx-tp-urgent { display: flex; gap: 16px; margin-top: clamp(40px, 2vw + 28px, 64px); padding: 20px; border-radius: var(--hx-r-md); background: #fff8eb; border: 1px solid #f2dcae; }
.hx-tp-urgent__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #fdecc8; color: #a15c07; }
.hx-tp-urgent p { margin-top: 6px; font-size: .9rem; }
.hx-tp-urgent ul { display: grid; gap: 6px; margin-top: 12px; }
.hx-tp-urgent li { position: relative; padding-left: 18px; color: #3f3a2e; font-size: .9rem; line-height: 1.55; }
.hx-tp-urgent li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #c47a12; }
/* Summary card and contents */
.hx-tp-sum, .hx-tp-toc { padding: 20px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); background: #fff; }
.hx-tp-sum__title { margin-bottom: 12px; color: var(--hx-ink); font-family: var(--hx-display); font-size: 1.05rem; font-weight: 500; }
.hx-tp-sum__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-bottom: 16px; }
.hx-tp-sum__rows li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hx-tp-sum__rows .hx-i { color: var(--hx-primary); }
.hx-tp-sum__rows li:nth-child(3) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hx-line); }
.hx-tp-sum__rows span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hx-tp-sum__rows small { color: var(--hx-muted); font-size: .74rem; }
.hx-tp-sum__rows strong { color: var(--hx-ink); font-size: .9rem; font-weight: 600; }
.hx-tp-sum .hx-btn + .hx-btn { margin-top: 10px; }
.hx-tp-sum .hx-small { margin-top: 12px; }
.hx-tp-sum { margin-top: 14px; position: sticky; top: 104px; }
.hx-tp-toc ol { display: grid; gap: 0; }
.hx-tp-toc a { display: block; padding: 6px 12px; border-radius: 10px; color: var(--hx-body); font-size: .86rem; font-weight: 500; border-left: 2px solid transparent; }
.hx-tp-toc a:hover { background: var(--hx-surface); color: var(--hx-primary); }
.hx-tp-toc a.is-current { background: var(--hx-primary-soft); color: var(--hx-primary-ink); font-weight: 600; }
/* Related pages */
.hx-tp-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.hx-tp-related__head .hx-tp-head { margin-bottom: 0; }
.hx-tp-rels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hx-tp-rel { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); background: #fff; overflow: hidden; transition: border-color .2s; }
.hx-tp-rel:hover { border-color: var(--hx-primary-line); }
.hx-tp-rel__media { display: block; aspect-ratio: 16 / 10; background: #e2ebef; overflow: hidden; }
.hx-tp-rel__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hx-tp-rel__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; }
.hx-tp-rel__body strong { color: var(--hx-ink); font-family: var(--hx-display); font-size: 1.1rem; font-weight: 500; }
/* Treatment areas page: search, area filter and the card grid */
.hx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-ti-hero { max-width: 760px; }
.hx-ti-filter { display: grid; gap: 14px; max-width: 760px; margin-top: 28px; }
.hx-ti-search { position: relative; display: flex; align-items: center; }
.hx-ti-search .hx-i { position: absolute; left: 18px; color: var(--hx-primary); pointer-events: none; }
html body .hx-ti-search input { width: 100%; height: 54px; padding: 0 18px 0 50px; border: 1px solid var(--hx-primary-line); border-radius: 999px; background: #fff; color: var(--hx-ink); font: inherit; font-size: 16px; outline: none; transition: border-color .2s; }
html body .hx-ti-search input:focus { border-color: var(--hx-primary); }
.hx-ti-chips { display: flex; flex-wrap: wrap; gap: 8px; }
main.hx .hx-ti-chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--hx-line); border-radius: 999px; background: #fff; color: var(--hx-ink); font-family: var(--hx-sans); font-size: .86rem; font-weight: 550; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
main.hx .hx-ti-chip:hover { border-color: var(--hx-primary-line); color: var(--hx-primary); }
main.hx .hx-ti-chip[aria-pressed="true"] { background: var(--hx-primary); border-color: var(--hx-primary); color: #fff; }
.hx-ti-list { padding-top: clamp(32px, 2vw + 20px, 56px); }
.hx-ti-count { margin-bottom: 16px; color: var(--hx-muted); font-size: .86rem; font-weight: 600; }
.hx-ti-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hx-ti-grid li[hidden] { display: none; }
.hx-ti-grid .hx-tp-rel__media { aspect-ratio: 4 / 3; }
.hx-ti-grid .hx-tp-rel__body { padding: 14px; gap: 6px; }
.hx-ti-grid .hx-tp-rel__body strong { font-size: 1rem; line-height: 1.3; }
.hx-ti-grid .hx-tag { font-size: .64rem; min-height: 22px; padding: 0 8px; }
.hx-ti-empty { padding: 24px; border-radius: var(--hx-r-md); background: var(--hx-surface); color: var(--hx-body); text-align: center; }
.hx-ti-missing { display: grid; gap: 16px; margin-top: 28px; padding: 22px; border: 1px solid var(--hx-primary-line); border-radius: var(--hx-r-md); background: var(--hx-primary-soft); }
.hx-ti-missing p { margin-top: 6px; color: var(--hx-body); font-size: .92rem; }
.hx-ti-missing .hx-btn { justify-self: start; }
.hx-ti-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hx-ti-steps li { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--hx-r-md); background: #fff; border: 1px solid var(--hx-line); }
.hx-ti-steps strong { display: block; color: var(--hx-ink); font-family: var(--hx-display); font-size: 1rem; font-weight: 500; }
.hx-ti-steps small { display: block; margin-top: 2px; color: var(--hx-muted); font-size: .8rem; }
@media (min-width: 768px) {
.hx-ti-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hx-ti-grid .hx-tp-rel__body { padding: 18px; }
.hx-ti-grid .hx-tp-rel__body strong { font-size: 1.08rem; }
.hx-ti-missing { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.hx-ti-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.hx-ti-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hx-ti-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Closing box */
.hx-tp-final { padding: clamp(44px, 3vw + 24px, 80px) 0; }
.hx-tp-final__inner { display: grid; gap: 20px; padding: clamp(22px, 2vw + 14px, 40px); border-radius: var(--hx-r-lg); background: var(--hx-primary-soft); border: 1px solid var(--hx-primary-line); }
.hx-tp-final__inner p { margin-top: 8px; color: var(--hx-body); max-width: 60ch; }
.hx-tp-disclaimer { margin-top: 18px; }
.hx-tp-disclaimer a { color: var(--hx-primary); font-weight: 600; }
@media (max-width: 639.98px) {
.hx-tp-who, .hx-tp-gets li { flex-direction: column; gap: 12px; }
.hx-tp-points li { gap: 12px; }
.hx-tp-docs { padding: 14px; }
.hx-tp-doc { padding: 12px; }
.hx-tp-num { width: 30px; height: 30px; font-size: .74rem; }
.hx-tp-hero .hx-actions .hx-btn, .hx-tp-final .hx-actions .hx-btn, .hx-tp-docs__foot .hx-btn { width: 100%; }
}
@media (min-width: 640px) {
.hx-tp-whos, .hx-tp-gloss dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-tp-doc__icon { display: block; }
.hx-tp-docs__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hx-tp-docs__foot .hx-tip { margin-top: 0; }
.hx-tp-rels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.hx-tp-split { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 32px; align-items: start; }
.hx-tp-figure--side { margin: 0; position: sticky; top: 112px; }
.hx-tp-figure--side img { aspect-ratio: 4 / 5; }
}
@media (min-width: 768px) {
.hx-tp-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.hx-tp-gets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-tp-gets li { flex-direction: column; }
.hx-tp-rels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-tp-final__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (min-width: 1024px) {
.hx-tp-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; }
.hx-tp-hero__media { aspect-ratio: 4 / 5; max-height: 520px; }
.hx-tp-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
.hx-tp-aside { display: block; align-self: stretch; margin-top: clamp(44px, 2.5vw + 28px, 72px); }
}
@media (prefers-reduced-motion: reduce) { .hx-tp-docs__track i { transition: none; } }
/* Articles (blog) ------------------------------------------------------------
The articles keep their own markup; this layer gives them the site's look: light surfaces
without gradients, no dark boxes, Jost headings in the homepage's weights, hairline cards. */
main.cha-blog-page { color: var(--hx-body); font-size: 15px; }
main.cha-blog-page .cha-container { width: 100%; max-width: 1200px !important; margin: 0 auto; padding: 0 20px !important; box-sizing: border-box; }
main.cha-blog-page :is(.cha-detail-hero, .cha-article-section, .cha-article-section-soft, .cha-blog-sources, .cha-blog-related, .cha-final, .cha-blog-hero, .cha-blog-list) {
background: #fff !important; background-image: none !important; box-shadow: none !important;
}
main.cha-blog-page :is(.cha-article-section-soft, .cha-blog-related) { background: var(--hx-surface) !important; }
main.cha-blog-page .cha-detail-hero { padding: clamp(20px, 2vw + 10px, 44px) 0 clamp(36px, 3vw + 18px, 64px) !important; background: var(--hx-surface) !important; }
main.cha-blog-page .cha-detail-hero-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; align-items: center; }
main.cha-blog-page .cha-breadcrumb-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--hx-body); font-size: .82rem; font-weight: 500; text-decoration: none; }
main.cha-blog-page .cha-breadcrumb-link:hover { color: var(--hx-primary); }
main.cha-blog-page .cha-eyebrow {
display: inline-flex !important; align-items: center; gap: 10px; margin-bottom: 12px;
color: var(--hx-primary) !important; font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase;
}
main.cha-blog-page .cha-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
main.cha-blog-page .cha-detail-copy > .cha-eyebrow { display: flex !important; }
main.cha-blog-page h1 {
margin: 0; color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 350 !important;
font-size: clamp(1.8rem, 1.35rem + 1.7vw, 2.6rem) !important; line-height: 1.16 !important; letter-spacing: -.01em; text-wrap: balance;
}
main.cha-blog-page h2 {
color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 400 !important;
font-size: clamp(1.35rem, 1.15rem + .75vw, 1.75rem) !important; line-height: 1.25 !important; letter-spacing: 0; text-wrap: balance;
}
main.cha-blog-page h3 { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; font-size: 1.06rem !important; line-height: 1.3 !important; }
main.cha-blog-page .cha-lead { margin-top: 16px; color: var(--hx-body) !important; font-size: clamp(.98rem, .94rem + .2vw, 1.08rem) !important; line-height: 1.65; }
main.cha-blog-page p { color: var(--hx-body); }
main.cha-blog-page .cha-article-copy p, main.cha-blog-page .cha-detail-copy > p:not(.cha-lead):not(.cha-disclaimer) { font-size: .96rem !important; line-height: 1.75 !important; color: var(--hx-body) !important; max-width: 70ch; }
main.cha-blog-page .cha-disclaimer { margin-top: 18px; padding: 12px 14px; border-radius: var(--hx-r-sm); background: #fff; border: 1px solid var(--hx-line); color: var(--hx-muted) !important; font-size: .82rem !important; line-height: 1.55; }
main.cha-blog-page .cha-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
main.cha-blog-page .cha-btn {
display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 48px !important; padding: 0 22px !important;
border-radius: 999px !important; font-family: var(--hx-sans) !important; font-size: .88rem !important; font-weight: 600 !important; white-space: nowrap;
text-decoration: none; box-shadow: none !important; background-image: none !important; transition: background-color .2s, border-color .2s, color .2s;
}
main.cha-blog-page .cha-btn-primary { background: var(--hx-primary) !important; color: #fff !important; border: 1px solid var(--hx-primary) !important; }
main.cha-blog-page .cha-btn-primary:hover { background: var(--hx-primary-ink) !important; }
main.cha-blog-page .cha-btn-secondary { background: #fff !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line) !important; }
main.cha-blog-page .cha-btn-secondary:hover { border-color: var(--hx-primary-line) !important; color: var(--hx-primary) !important; }
main.cha-blog-page .cha-detail-panel, main.cha-blog-page .cha-detail-photo { margin: 0; border-radius: var(--hx-r-lg) !important; overflow: hidden; background: #e2ebef !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
main.cha-blog-page .cha-detail-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
main.cha-blog-page .cha-article-section, main.cha-blog-page .cha-blog-sources, main.cha-blog-page .cha-blog-related { padding: clamp(44px, 2.5vw + 28px, 80px) 0 !important; }
main.cha-blog-page .cha-article-opening-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; align-items: start; }
main.cha-blog-page .cha-article-head { margin-bottom: 24px; max-width: 760px; }
main.cha-blog-page .cha-article-head p { margin-top: 10px; color: var(--hx-muted) !important; font-size: .95rem !important; line-height: 1.65; }
/* The "important" note: warm light surface, never the old navy box */
main.cha-blog-page .cha-article-note {
padding: 20px !important; border-radius: var(--hx-r-md) !important; background: #fff8eb !important; background-image: none !important;
border: 1px solid #f2dcae !important; color: #3f3a2e !important; box-shadow: none !important;
}
main.cha-blog-page .cha-article-note > span { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: #fdecc8; color: #a15c07 !important; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
main.cha-blog-page .cha-article-note h3 { color: #3f3a2e !important; }
main.cha-blog-page .cha-article-note p { margin-top: 6px; color: #5b5240 !important; font-size: .9rem; line-height: 1.6; }
main.cha-blog-page .cha-article-visual { margin: 0; padding: 0 0 clamp(8px, 1vw, 16px); background: #fff; }
main.cha-blog-page .cha-article-visual-frame { position: relative; display: grid; border-radius: var(--hx-r-md) !important; overflow: hidden; background: #fff !important; border: 1px solid var(--hx-line); box-shadow: none !important; }
main.cha-blog-page .cha-article-visual-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
main.cha-blog-page .cha-article-visual-frame figcaption { position: static !important; padding: 16px 18px !important; background: #fff !important; background-image: none !important; color: var(--hx-ink) !important; }
main.cha-blog-page .cha-article-visual-frame figcaption p { margin: 0; color: var(--hx-body) !important; font-size: .9rem; line-height: 1.6; }
main.cha-blog-page .cha-article-visual-frame figcaption .cha-eyebrow { margin-bottom: 6px; }
main.cha-blog-page .cha-article-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
main.cha-blog-page .cha-article-card { padding: 20px !important; border-radius: var(--hx-r-md) !important; background: #fff !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important; }
main.cha-blog-page .cha-article-card-index { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--hx-primary-soft); color: var(--hx-primary) !important; font-size: .78rem !important; font-weight: 700; }
main.cha-blog-page .cha-article-card p { margin-top: 6px; font-size: .9rem !important; line-height: 1.6 !important; color: var(--hx-body) !important; }
main.cha-blog-page .cha-faq { display: grid; gap: 10px; max-width: 860px; }
main.cha-blog-page .cha-faq details { border-radius: var(--hx-r-sm) !important; background: #fff !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important; }
main.cha-blog-page .cha-faq details[open] { border-color: var(--hx-primary-line) !important; }
main.cha-blog-page .cha-faq summary { padding: 16px 18px; color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; font-size: 1rem !important; cursor: pointer; }
main.cha-blog-page .cha-faq details p { padding: 0 18px 18px; margin: 0; font-size: .9rem; line-height: 1.7; }
main.cha-blog-page .cha-blog-source-list { display: grid; gap: 8px; margin-top: 16px; }
main.cha-blog-page .cha-blog-source-list a { display: block; padding: 12px 14px; border-radius: var(--hx-r-sm); border: 1px solid var(--hx-line); background: #fff; color: var(--hx-primary) !important; font-size: .86rem; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
main.cha-blog-page .cha-blog-source-list a:hover { border-color: var(--hx-primary-line); }
main.cha-blog-page .cha-blog-related-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; margin-top: 20px; }
main.cha-blog-page .cha-blog-card { border-radius: var(--hx-r-md) !important; background: #fff !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important; overflow: hidden; }
main.cha-blog-page .cha-blog-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
main.cha-blog-page .cha-blog-card-body { padding: 18px !important; }
main.cha-blog-page .cha-blog-card h3 a { color: var(--hx-ink) !important; text-decoration: none; }
main.cha-blog-page .cha-blog-card p { margin-top: 6px; font-size: .88rem; line-height: 1.6; }
main.cha-blog-page .cha-blog-card-link { display: inline-flex; margin-top: 12px; color: var(--hx-primary) !important; font-size: .86rem; font-weight: 600; text-decoration: none; }
@media (min-width: 768px) {
main.cha-blog-page .cha-article-grid-2, main.cha-blog-page .cha-blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
main.cha-blog-page .cha-article-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
main.cha-blog-page .cha-blog-source-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
main.cha-blog-page .cha-detail-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; gap: 56px !important; }
main.cha-blog-page .cha-article-opening-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important; gap: 48px !important; }
main.cha-blog-page .cha-blog-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 639.98px) {
main.cha-blog-page .cha-actions .cha-btn { width: 100%; }
}
/* Articles list */
main.cha-blog-index :is(.cha-hero, .cha-section, .cha-section-soft) { background: #fff !important; background-image: none !important; }
main.cha-blog-index .cha-hero { padding: clamp(24px, 2vw + 12px, 56px) 0 clamp(36px, 3vw + 18px, 64px) !important; background: var(--hx-surface) !important; }
main.cha-blog-index .cha-hero-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; align-items: center; }
main.cha-blog-index .cha-photo-card { margin: 0; border-radius: var(--hx-r-lg) !important; overflow: hidden; background: #fff !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important; padding: 0 !important; }
main.cha-blog-index .cha-photo-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
main.cha-blog-index .cha-caption { position: static !important; display: flex !important; flex-direction: column; gap: 4px; padding: 16px 18px !important; background: #fff !important; background-image: none !important; color: var(--hx-ink) !important; }
main.cha-blog-index .cha-caption strong { color: var(--hx-ink) !important; font-family: var(--hx-display); font-weight: 500; }
main.cha-blog-index .cha-caption span { color: var(--hx-body) !important; font-size: .88rem; }
main.cha-blog-index .cha-section { padding: clamp(44px, 2.5vw + 28px, 80px) 0 !important; }
main.cha-blog-index .cha-section-soft { background: var(--hx-surface) !important; }
main.cha-blog-index .cha-head { margin-bottom: 24px; max-width: 760px; }
main.cha-blog-index .cha-head p { margin-top: 10px; color: var(--hx-muted) !important; font-size: .95rem; }
main.cha-blog-index .cha-blog-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
@media (min-width: 768px) { main.cha-blog-index .cha-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1024px) {
main.cha-blog-index .cha-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important; gap: 56px !important; }
main.cha-blog-index .cha-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* Older condition landing page (lung cancer, English) gets the same layer ------------------------------------------------------------
The articles keep their own markup; this layer gives them the site's look: light surfaces
without gradients, no dark boxes, Jost headings in the homepage's weights, hairline cards. */
main.cha-condition-page { color: var(--hx-body); font-size: 15px; }
main.cha-condition-page .cha-container { width: 100%; max-width: 1200px !important; margin: 0 auto; padding: 0 20px !important; box-sizing: border-box; }
main.cha-condition-page :is(.cha-detail-hero, .cha-article-section, .cha-article-section-soft, .cha-blog-sources, .cha-blog-related, .cha-final, .cha-blog-hero, .cha-blog-list) {
background: #fff !important; background-image: none !important; box-shadow: none !important;
}
main.cha-condition-page :is(.cha-article-section-soft, .cha-blog-related) { background: var(--hx-surface) !important; }
main.cha-condition-page .cha-detail-hero { padding: clamp(20px, 2vw + 10px, 44px) 0 clamp(36px, 3vw + 18px, 64px) !important; background: var(--hx-surface) !important; }
main.cha-condition-page .cha-detail-hero-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; align-items: center; }
main.cha-condition-page .cha-breadcrumb-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--hx-body); font-size: .82rem; font-weight: 500; text-decoration: none; }
main.cha-condition-page .cha-breadcrumb-link:hover { color: var(--hx-primary); }
main.cha-condition-page .cha-eyebrow {
display: inline-flex !important; align-items: center; gap: 10px; margin-bottom: 12px;
color: var(--hx-primary) !important; font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase;
}
main.cha-condition-page .cha-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
main.cha-condition-page .cha-detail-copy > .cha-eyebrow { display: flex !important; }
main.cha-condition-page h1 {
margin: 0; color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 350 !important;
font-size: clamp(1.8rem, 1.35rem + 1.7vw, 2.6rem) !important; line-height: 1.16 !important; letter-spacing: -.01em; text-wrap: balance;
}
main.cha-condition-page h2 {
color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 400 !important;
font-size: clamp(1.35rem, 1.15rem + .75vw, 1.75rem) !important; line-height: 1.25 !important; letter-spacing: 0; text-wrap: balance;
}
main.cha-condition-page h3 { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; font-size: 1.06rem !important; line-height: 1.3 !important; }
main.cha-condition-page .cha-lead { margin-top: 16px; color: var(--hx-body) !important; font-size: clamp(.98rem, .94rem + .2vw, 1.08rem) !important; line-height: 1.65; }
main.cha-condition-page p { color: var(--hx-body); }
main.cha-condition-page .cha-article-copy p, main.cha-condition-page .cha-detail-copy > p:not(.cha-lead):not(.cha-disclaimer) { font-size: .96rem !important; line-height: 1.75 !important; color: var(--hx-body) !important; max-width: 70ch; }
main.cha-condition-page .cha-disclaimer { margin-top: 18px; padding: 12px 14px; border-radius: var(--hx-r-sm); background: #fff; border: 1px solid var(--hx-line); color: var(--hx-muted) !important; font-size: .82rem !important; line-height: 1.55; }
main.cha-condition-page .cha-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
main.cha-condition-page .cha-btn {
display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 48px !important; padding: 0 22px !important;
border-radius: 999px !important; font-family: var(--hx-sans) !important; font-size: .88rem !important; font-weight: 600 !important; white-space: nowrap;
text-decoration: none; box-shadow: none !important; background-image: none !important; transition: background-color .2s, border-color .2s, color .2s;
}
main.cha-condition-page .cha-btn-primary { background: var(--hx-primary) !important; color: #fff !important; border: 1px solid var(--hx-primary) !important; }
main.cha-condition-page .cha-btn-primary:hover { background: var(--hx-primary-ink) !important; }
main.cha-condition-page .cha-btn-secondary { background: #fff !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line) !important; }
main.cha-condition-page .cha-btn-secondary:hover { border-color: var(--hx-primary-line) !important; color: var(--hx-primary) !important; }
main.cha-condition-page .cha-detail-panel, main.cha-condition-page .cha-detail-photo { margin: 0; border-radius: var(--hx-r-lg) !important; overflow: hidden; background: #e2ebef !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
main.cha-condition-page .cha-detail-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
main.cha-condition-page .cha-article-section, main.cha-condition-page .cha-blog-sources, main.cha-condition-page .cha-blog-related { padding: clamp(44px, 2.5vw + 28px, 80px) 0 !important; }
main.cha-condition-page .cha-article-opening-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; align-items: start; }
main.cha-condition-page .cha-article-head { margin-bottom: 24px; max-width: 760px; }
main.cha-condition-page .cha-article-head p { margin-top: 10px; color: var(--hx-muted) !important; font-size: .95rem !important; line-height: 1.65; }
/* The "important" note: warm light surface, never the old navy box */
main.cha-condition-page .cha-article-note {
padding: 20px !important; border-radius: var(--hx-r-md) !important; background: #fff8eb !important; background-image: none !important;
border: 1px solid #f2dcae !important; color: #3f3a2e !important; box-shadow: none !important;
}
main.cha-condition-page .cha-article-note > span { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: #fdecc8; color: #a15c07 !important; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
main.cha-condition-page .cha-article-note h3 { color: #3f3a2e !important; }
main.cha-condition-page .cha-article-note p { margin-top: 6px; color: #5b5240 !important; font-size: .9rem; line-height: 1.6; }
main.cha-condition-page .cha-article-visual { margin: 0; padding: 0 0 clamp(8px, 1vw, 16px); background: #fff; }
main.cha-condition-page .cha-article-visual-frame { position: relative; display: grid; border-radius: var(--hx-r-md) !important; overflow: hidden; background: #fff !important; border: 1px solid var(--hx-line); box-shadow: none !important; }
main.cha-condition-page .cha-article-visual-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
main.cha-condition-page .cha-article-visual-frame figcaption { position: static !important; padding: 16px 18px !important; background: #fff !important; background-image: none !important; color: var(--hx-ink) !important; }
main.cha-condition-page .cha-article-visual-frame figcaption p { margin: 0; color: var(--hx-body) !important; font-size: .9rem; line-height: 1.6; }
main.cha-condition-page .cha-article-visual-frame figcaption .cha-eyebrow { margin-bottom: 6px; }
main.cha-condition-page .cha-article-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
main.cha-condition-page .cha-article-card { padding: 20px !important; border-radius: var(--hx-r-md) !important; background: #fff !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important; }
main.cha-condition-page .cha-article-card-index { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--hx-primary-soft); color: var(--hx-primary) !important; font-size: .78rem !important; font-weight: 700; }
main.cha-condition-page .cha-article-card p { margin-top: 6px; font-size: .9rem !important; line-height: 1.6 !important; color: var(--hx-body) !important; }
main.cha-condition-page .cha-faq { display: grid; gap: 10px; max-width: 860px; }
main.cha-condition-page .cha-faq details { border-radius: var(--hx-r-sm) !important; background: #fff !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important; }
main.cha-condition-page .cha-faq details[open] { border-color: var(--hx-primary-line) !important; }
main.cha-condition-page .cha-faq summary { padding: 16px 18px; color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; font-size: 1rem !important; cursor: pointer; }
main.cha-condition-page .cha-faq details p { padding: 0 18px 18px; margin: 0; font-size: .9rem; line-height: 1.7; }
main.cha-condition-page .cha-blog-source-list { display: grid; gap: 8px; margin-top: 16px; }
main.cha-condition-page .cha-blog-source-list a { display: block; padding: 12px 14px; border-radius: var(--hx-r-sm); border: 1px solid var(--hx-line); background: #fff; color: var(--hx-primary) !important; font-size: .86rem; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
main.cha-condition-page .cha-blog-source-list a:hover { border-color: var(--hx-primary-line); }
main.cha-condition-page .cha-blog-related-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; margin-top: 20px; }
main.cha-condition-page .cha-blog-card { border-radius: var(--hx-r-md) !important; background: #fff !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important; overflow: hidden; }
main.cha-condition-page .cha-blog-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
main.cha-condition-page .cha-blog-card-body { padding: 18px !important; }
main.cha-condition-page .cha-blog-card h3 a { color: var(--hx-ink) !important; text-decoration: none; }
main.cha-condition-page .cha-blog-card p { margin-top: 6px; font-size: .88rem; line-height: 1.6; }
main.cha-condition-page .cha-blog-card-link { display: inline-flex; margin-top: 12px; color: var(--hx-primary) !important; font-size: .86rem; font-weight: 600; text-decoration: none; }
@media (min-width: 768px) {
main.cha-condition-page .cha-article-grid-2, main.cha-condition-page .cha-blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
main.cha-condition-page .cha-article-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
main.cha-condition-page .cha-blog-source-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
main.cha-condition-page .cha-detail-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; gap: 56px !important; }
main.cha-condition-page .cha-article-opening-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important; gap: 48px !important; }
main.cha-condition-page .cha-blog-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 639.98px) {
main.cha-condition-page .cha-actions .cha-btn { width: 100%; }
}
/* (list parts) */
main.cha-condition-page :is(.cha-hero, .cha-section, .cha-section-soft) { background: #fff !important; background-image: none !important; }
main.cha-condition-page .cha-hero { padding: clamp(24px, 2vw + 12px, 56px) 0 clamp(36px, 3vw + 18px, 64px) !important; background: var(--hx-surface) !important; }
main.cha-condition-page .cha-hero-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; align-items: center; }
main.cha-condition-page .cha-photo-card { margin: 0; border-radius: var(--hx-r-lg) !important; overflow: hidden; background: #fff !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important; padding: 0 !important; }
main.cha-condition-page .cha-photo-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
main.cha-condition-page .cha-caption { position: static !important; display: flex !important; flex-direction: column; gap: 4px; padding: 16px 18px !important; background: #fff !important; background-image: none !important; color: var(--hx-ink) !important; }
main.cha-condition-page .cha-caption strong { color: var(--hx-ink) !important; font-family: var(--hx-display); font-weight: 500; }
main.cha-condition-page .cha-caption span { color: var(--hx-body) !important; font-size: .88rem; }
main.cha-condition-page .cha-section { padding: clamp(44px, 2.5vw + 28px, 80px) 0 !important; }
main.cha-condition-page .cha-section-soft { background: var(--hx-surface) !important; }
main.cha-condition-page .cha-head { margin-bottom: 24px; max-width: 760px; }
main.cha-condition-page .cha-head p { margin-top: 10px; color: var(--hx-muted) !important; font-size: .95rem; }
main.cha-condition-page .cha-blog-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
@media (min-width: 768px) { main.cha-condition-page .cha-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1024px) {
main.cha-condition-page .cha-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important; gap: 56px !important; }
main.cha-condition-page .cha-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
main.cha-condition-page :is(.cha-section-white) { background: #fff !important; background-image: none !important; }
main.cha-condition-page :is(.cha-card, .cha-doc-card, .cha-related-card, .cha-list-item) { background: #fff !important; background-image: none !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-md) !important; box-shadow: none !important; }
main.cha-condition-page :is(.cha-note) { background: #fff8eb !important; background-image: none !important; border: 1px solid #f2dcae !important; color: #3f3a2e !important; border-radius: var(--hx-r-md) !important; }
main.cha-condition-page :is(.cha-final-box) { background: var(--hx-primary-soft) !important; background-image: none !important; border: 1px solid var(--hx-primary-line) !important; border-radius: var(--hx-r-lg) !important; }
main.cha-condition-page .cha-final-box :is(h2, p) { color: var(--hx-ink) !important; }
main.cha-condition-page :is(.cha-num, .cha-tag) { background: var(--hx-primary-soft) !important; color: var(--hx-primary-ink) !important; border: 0 !important; }
/* Campaign pages (lung cancer, Cuban cancer vaccines) -----------------------------------
Their content stays as approved for the ads; the look follows the site: no gradients, no dark
boxes, no shadows, Jost headings in the homepage's weights, hairline cards, teal pills. */
main.lc-page { color: var(--hx-body); }
main.lc-page *, main.lc-page *::before, main.lc-page *::after { box-shadow: none !important; text-shadow: none !important; }
main.lc-page :is(section, .lc-hero, .lc-section, .lc-section-soft, .lc-final, .lc-sources-section, .lc-photo-section, .lc-therapy-section) {
background-image: none !important;
}
main.lc-page :is(.lc-hero, .lc-section-soft) { background-color: var(--hx-surface) !important; }
main.lc-page :is(.lc-section, .lc-final, .lc-sources-section, .lc-photo-section, .lc-therapy-section):not(.lc-section-soft) { background-color: #fff !important; }
main.lc-page .lc-container { max-width: 1200px !important; padding-left: 20px !important; padding-right: 20px !important; }
main.lc-page .lc-eyebrow { color: var(--hx-primary) !important; font-family: var(--hx-sans) !important; font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase; }
main.lc-page h1 { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 350 !important; font-size: clamp(1.8rem, 1.35rem + 1.7vw, 2.6rem) !important; line-height: 1.16 !important; letter-spacing: -.01em !important; text-wrap: balance; }
main.lc-page h2 { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 400 !important; font-size: clamp(1.35rem, 1.15rem + .75vw, 1.75rem) !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-wrap: balance; }
main.lc-page h3 { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; font-size: 1.06rem !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
main.lc-page :is(p, li) { color: var(--hx-body); }
main.lc-page .lc-hero-lead { color: var(--hx-body) !important; font-size: clamp(.98rem, .94rem + .2vw, 1.08rem) !important; line-height: 1.65 !important; }
main.lc-page .lc-btn {
min-height: 48px !important; padding: 0 22px !important; border-radius: 999px !important; background-image: none !important;
font-family: var(--hx-sans) !important; font-size: .88rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
}
main.lc-page .lc-btn-primary { background: var(--hx-primary) !important; color: #fff !important; border: 1px solid var(--hx-primary) !important; }
main.lc-page .lc-btn-primary:hover { background: var(--hx-primary-ink) !important; }
main.lc-page .lc-btn-secondary { background: #fff !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line) !important; }
main.lc-page .lc-btn-secondary:hover { border-color: var(--hx-primary-line) !important; color: var(--hx-primary) !important; }
main.lc-page :is(.lc-card, .lc-doc, .lc-step, .lc-check, .lc-source-card, .lc-therapy-card, .lc-media-card, .lc-photo-card, .lc-portal-panel, .lc-floating-card) {
background: #fff !important; background-image: none !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-md) !important; color: var(--hx-body) !important;
}
main.lc-page :is(.lc-card, .lc-doc, .lc-step, .lc-check, .lc-source-card, .lc-therapy-card, .lc-portal-panel, .lc-floating-card) :is(h3, strong) { color: var(--hx-ink) !important; }
main.lc-page :is(.lc-icon, .lc-card-icon) { background: var(--hx-primary-soft) !important; background-image: none !important; color: var(--hx-primary) !important; border: 1px solid var(--hx-primary-line) !important; border-radius: 12px !important; }
main.lc-page :is(.lc-chip, .lc-therapy-label) { background: #fff !important; background-image: none !important; color: var(--hx-primary-ink) !important; border: 1px solid var(--hx-primary-line) !important; }
main.lc-page :is(.lc-note, .lc-alert, .lc-mini-warning, .lc-therapy-disclaimer, .lc-source-note) { background: #fff8eb !important; background-image: none !important; border: 1px solid #f2dcae !important; color: #3f3a2e !important; border-radius: var(--hx-r-md) !important; }
main.lc-page :is(.lc-note, .lc-alert, .lc-mini-warning, .lc-therapy-disclaimer, .lc-source-note) :is(p, li, strong, h3, span) { color: #3f3a2e !important; }
main.lc-page :is(.lc-final-box) { background: var(--hx-primary-soft) !important; background-image: none !important; border: 1px solid var(--hx-primary-line) !important; border-radius: var(--hx-r-lg) !important; color: var(--hx-body) !important; }
main.lc-page .lc-final-box :is(h2, h3, p, li, span, strong) { color: var(--hx-ink) !important; }
main.lc-page .lc-final-box .lc-btn-secondary { color: var(--hx-ink) !important; }
main.lc-page .lc-final-box .lc-btn-primary { color: #fff !important; }
main.lc-page .lc-hero-media, main.lc-page .lc-real-photo, main.lc-page .lc-therapy-media { border-radius: var(--hx-r-lg) !important; overflow: hidden; background: #e2ebef !important; }
main.lc-page .lc-faq details { background: #fff !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-sm) !important; }
main.lc-page .lc-faq summary { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; }
main.lc-page .lc-trust-row > * { background: #fff !important; border: 1px solid var(--hx-line) !important; color: var(--hx-ink) !important; }
/* Nothing on the campaign pages moves when touched or scrolled past */
main.lc-page :is(.lc-card, .lc-btn, .lc-source-card, .lc-therapy-card, .lc-doc, .lc-step):hover { transform: none !important; }
main.lc-page .lc-hero:after { display: none !important; }
/* Product photos already sit on white: one flat white panel, a hairline under it, no inner
frame, glow or drop shadow. */
main.lc-page .lc-therapy-media { background: #fff !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--hx-line) !important; border-radius: 0 !important; }
main.lc-page .lc-therapy-media::before, main.lc-page .lc-therapy-media::after { content: none !important; display: none !important; }
main.lc-page .lc-therapy-media img { filter: none !important; }
main.lc-page .lc-card-photo { margin: 0 0 16px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-sm); overflow: hidden; background: #fff; }
main.lc-page .lc-card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
@media (min-width: 1101px) {
main.lc-page .lc-therapy-media { border-bottom: 0 !important; border-right: 1px solid var(--hx-line) !important; }
main.lc-page .lc-therapy-card:nth-child(even) .lc-therapy-media { border-right: 0 !important; border-left: 1px solid var(--hx-line) !important; }
}
main.lc-page :is(.lc-media-card, .lc-photo-card) { padding: 0 !important; overflow: hidden; }
main.lc-page :is(.lc-media-card, .lc-photo-card) img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0 !important; min-height: 0 !important; }
main.lc-page .lc-photo-card figcaption { padding: 12px 16px; font-size: .84rem; color: var(--hx-muted); border-top: 1px solid var(--hx-line); }
main.lc-page .lc-real-photo { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767.98px) {
main.lc-page .lc-floating-card { position: static !important; width: auto !important; margin-top: 12px; }
}
/* Form fields: every public form (application, contact, support, payment) uses one field style.
Drop-downs start their text where inputs do, with a thin teal chevron on the right. */
html body main select, html body main select.select-mini {
-webkit-appearance: none; appearance: none; width: 100%; min-height: 50px; height: auto; padding: 0 44px 0 16px !important;
border: 1px solid #dce7ed !important; border-radius: 12px !important; background-color: #fff !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px 18px !important;
color: #0f172a; font-family: var(--hx-sans) !important; font-size: 16px !important; line-height: 1.3; text-overflow: ellipsis; cursor: pointer;
box-shadow: none !important; transition: border-color .2s, background-color .2s;
}
html body main select:hover { border-color: #c7e2e0 !important; }
html body main select:disabled { background-color: #f2f7f9 !important; color: #56677b; cursor: not-allowed; }
html body main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], input:not([type]), textarea):not(.hx-sr) {
border: 1px solid #dce7ed !important; border-radius: 12px !important; background-color: #fff; color: #0f172a; font-family: var(--hx-sans) !important; box-shadow: none !important;
transition: border-color .2s;
}
html body main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], input:not([type]), textarea):hover { border-color: #c7e2e0 !important; }
html body main :is(select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], input:not([type]), textarea):focus {
border-color: #0e7c7b !important; outline: 3px solid color-mix(in srgb, #0e7c7b 22%, transparent) !important; outline-offset: 0;
}
html body main :is(input, textarea)::placeholder { color: #8396a3; opacity: 1; }
html body main .input-icon :is(select, input) { padding-left: 44px !important; }
html body main .input-icon svg { color: #0e7c7b; }
/* Drop-down list in the site's design (cha-site-v3.js draws it over the native select) */
html body :is(main, .cha-modal-backdrop) .hx-select { position: relative; width: 100%; }
html body :is(main, .cha-modal-backdrop) .hx-select .hx-select__native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; }
html body :is(main, .cha-modal-backdrop) .hx-select__btn {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; margin: 0; padding: 0 14px 0 16px;
border: 1px solid #dce7ed; border-radius: 12px; background: #fff; color: #0f172a; font-family: var(--hx-sans); font-size: 16px; font-weight: 400;
line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s;
}
html body :is(main, .cha-modal-backdrop) .hx-select__btn:hover { border-color: #c7e2e0; }
html body :is(main, .cha-modal-backdrop) .hx-select__btn:focus-visible, html body :is(main, .cha-modal-backdrop) .hx-select.is-open .hx-select__btn { border-color: #0e7c7b; outline: 3px solid color-mix(in srgb, #0e7c7b 22%, transparent); outline-offset: 0; }
html body :is(main, .cha-modal-backdrop) .hx-select__btn.is-placeholder .hx-select__value { color: #64748b; }
html body :is(main, .cha-modal-backdrop) .hx-select__btn.is-invalid { border-color: #dc2626; }
html body :is(main, .cha-modal-backdrop) .hx-select__btn:disabled { background: #f2f7f9; color: #56677b; cursor: not-allowed; }
html body :is(main, .cha-modal-backdrop) .hx-select__btn:disabled .hx-select__value { color: #56677b; }
html body :is(main, .cha-modal-backdrop) .hx-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body :is(main, .cha-modal-backdrop) .hx-select__btn > svg { flex: none; width: 18px; height: 18px; color: #0e7c7b; transition: transform .2s; }
html body :is(main, .cha-modal-backdrop) .hx-select.is-open .hx-select__btn > svg { transform: rotate(180deg); }
.hx-select__panel {
position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; right: 0; display: flex; flex-direction: column; max-height: 340px; padding: 6px;
border: 1px solid #c7e2e0; border-radius: 14px; background: #fff; color: #0f172a; font-family: var(--hx-sans);
opacity: 0; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease;
}
.hx-select__panel.is-up { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
.hx-select__panel.is-in { opacity: 1; transform: none; }
.hx-select__head { display: none; }
.hx-select__search { display: none; position: relative; align-items: center; margin: 2px 2px 6px; }
.hx-select__panel.has-search .hx-select__search { display: flex; }
.hx-select__search svg { position: absolute; left: 12px; width: 18px; height: 18px; color: #0e7c7b; pointer-events: none; }
html body .hx-select__search input { width: 100%; height: 44px; padding: 0 12px 0 40px; border: 1px solid #dce7ed; border-radius: 10px; background: #f8fbfc; color: #0f172a; font: inherit; font-size: 16px; outline: none; }
html body .hx-select__search input:focus { border-color: #0e7c7b; background: #fff; }
.hx-select__list { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.hx-select__list [role="option"] {
display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 10px;
color: #0f172a; font-size: .95rem; line-height: 1.35; cursor: pointer;
}
.hx-select__list [role="option"].is-active { background: #f2f7f9; }
.hx-select__list [role="option"][aria-selected="true"] { background: #e6f2f1; color: #0a5f5e; font-weight: 600; }
.hx-select__list [role="option"][aria-disabled="true"] { color: #94a3b8; cursor: default; }
.hx-select__list [role="option"] svg { flex: none; width: 18px; height: 18px; color: #0e7c7b; }
.hx-select__group { padding: 10px 12px 4px; color: #56677b; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx-select__none { margin: 0; padding: 14px 12px; color: #56677b; font-size: .9rem; }
/* Phones: a sheet from the bottom with the field's name, a close button and, for long lists, search */
.hx-select__backdrop { position: fixed; inset: 0; z-index: 140; background: var(--hx-veil); opacity: 0; transition: opacity .2s; }
.hx-select__backdrop.is-in { opacity: 1; }
.hx-select__panel.is-sheet {
position: fixed; z-index: 141; top: auto; bottom: 0; left: 0; right: 0; max-height: min(78vh, 620px); padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
border: 0; border-top: 1px solid #c7e2e0; border-radius: 20px 20px 0 0; transform: translateY(24px);
}
.hx-select__panel.is-sheet.is-in { transform: none; }
.hx-select__panel.is-sheet::before { content: ""; align-self: center; width: 40px; height: 4px; margin: 2px 0 8px; border-radius: 4px; background: #dce7ed; }
.hx-select__panel.is-sheet .hx-select__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 8px; }
.hx-select__head strong { color: #0f172a; font-family: var(--hx-display); font-size: 1.08rem; font-weight: 500; }
.hx-select__x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 50%; background: #f2f7f9; color: #334155; cursor: pointer; }
.hx-select__x svg { width: 18px; height: 18px; }
.hx-select__panel.is-sheet [role="option"] { min-height: 48px; font-size: 1rem; }
html.hx-select-lock, html.hx-select-lock body { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) { .hx-select__panel, .hx-select__backdrop { transition: none; } }
.hx-select__list { scrollbar-width: thin; scrollbar-color: #c7e2e0 transparent; }
.hx-select__list::-webkit-scrollbar { width: 8px; }
.hx-select__list::-webkit-scrollbar-thumb { background: #c7e2e0; border-radius: 8px; }
.hx-select__list::-webkit-scrollbar-track { background: transparent; }
/* Pages with their own components (application, tracking, sign-in, support, legal, 404) take the
homepage's type weights and a balanced headline size; buttons speak at 600 like everywhere else */
html body main:not(.hx):not(.cha-blog-page):not(.lc-page):not(.cha-condition-page) h1 {
font-family: var(--hx-display) !important; font-weight: 400 !important; letter-spacing: -.01em !important; line-height: 1.18 !important;
font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.3rem) !important; color: #0f172a; text-wrap: balance;
}
html body main:not(.hx):not(.cha-blog-page):not(.lc-page):not(.cha-condition-page) h2 { font-family: var(--hx-display) !important; font-weight: 450 !important; letter-spacing: 0 !important; color: #0f172a; }
html body main:not(.hx):not(.cha-blog-page):not(.lc-page):not(.cha-condition-page) h3 { font-family: var(--hx-display) !important; font-weight: 500 !important; letter-spacing: 0 !important; }
html body main:not(.hx) :is(.btn, .btn-primary, .btn-ghost, .cha-pr-button, .cha-btn, button[type="submit"]) { font-weight: 600 !important; letter-spacing: 0 !important; }
/* Application start page (/apply/): what it takes, what to have ready, the seven steps and the fee. */
.hx-ap-hero { padding: 40px 0 32px; background: var(--hx-surface); border-bottom: 1px solid var(--hx-line); }
.hx-ap-h1 { margin: 8px 0 0; max-width: 22ch; color: var(--hx-ink); font-family: var(--hx-display); font-weight: 350; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.15; letter-spacing: 0; }
.hx-ap-lead { margin: 14px 0 0; max-width: 60ch; color: var(--hx-body); font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); line-height: 1.65; }
.hx-ap-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.hx-ap-facts li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--hx-primary-line); border-radius: 999px; background: #fff; color: var(--hx-ink); font-size: .86rem; font-weight: 500; white-space: nowrap; }
.hx-ap-facts .hx-i { color: var(--hx-primary); flex: none; }
.hx-ap-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hx-ap-body { padding: 32px 0 56px; }
.hx-ap-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hx-ap-col, .hx-ap-side { display: grid; gap: 16px; align-content: start; }
.hx-ap-card { padding: 22px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); background: #fff; }
.hx-ap-card > .hx-h2 { margin: 0 0 16px; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); }
.hx-ap-card > .hx-h3 { margin: 0 0 8px; }
.hx-ap-card p { margin: 0; color: var(--hx-body); font-size: .92rem; line-height: 1.6; }
.hx-ap-prep, .hx-ap-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.hx-ap-prep li, .hx-ap-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.hx-ap-prep .hx-h3, .hx-ap-steps .hx-h3 { margin: 2px 0 2px; font-size: 1rem; }
.hx-ap-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--hx-primary-soft); color: var(--hx-primary); border: 1px solid var(--hx-primary-line); }
.hx-ap-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 2px 4px 0; border-radius: 999px; background: #fff; border: 1px solid var(--hx-primary-line); color: var(--hx-primary-ink); font-weight: 600; font-size: .9rem; }
.hx-ap-steps li + li { padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-ap-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-ap-note .hx-i { color: var(--hx-primary); flex: none; margin-top: 3px; }
.hx-ap-fee { background: var(--hx-primary-soft); border-color: var(--hx-primary-line); }
.hx-ap-fee__amount { margin: 0 0 8px !important; color: var(--hx-ink) !important; font-family: var(--hx-display); font-size: 1.6rem !important; font-weight: 450; line-height: 1.2 !important; }
.hx-ap-fee__amount .hx-fee:not([data-hx-fee-done]) { font-size: inherit; }
html:not([data-hx-fee-ready]) .hx-ap-fee__amount { font-family: var(--hx-sans); font-size: 1rem !important; font-weight: 600; }
.hx-ap-side .hx-btn { margin-top: 14px; }
.hx-ap-small { margin: 20px 0 0; color: var(--hx-muted); font-size: .82rem; }
@media (max-width: 479.98px) {
.hx-ap-cta .hx-btn { width: 100%; justify-content: center; }
.hx-ap-side .hx-btn { width: 100%; justify-content: center; }
}
@media (min-width: 1024px) {
.hx-ap-hero { padding: 56px 0 44px; }
.hx-ap-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.hx-ap-side { position: sticky; top: 104px; }
.hx-ap-card { padding: 28px; }
}
/* Legal and information pages (privacy, terms, cookies, data processing, consent, disclaimer,
company role, account deletion): one quiet reading layout, flat surface, hairlines only. */
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section):not(.hx) { background: var(--hx-surface) !important; background-image: none !important; padding: 32px 16px 56px !important; margin: 0 !important; }
html body main.cha-section:not(.hx) > .cha-container { max-width: 780px !important; margin: 0 auto !important; padding: 0 !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) :is(.legal-box, .cha-role-notice-page__card, .cha-card) {
max-width: 780px !important; margin: 0 auto !important; padding: clamp(22px, 4vw, 40px) !important;
background: #fff !important; background-image: none !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-md) !important; box-shadow: none !important;
}
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) :is(.legal-eyebrow, .cha-role-notice-page__eyebrow) {
display: inline-block !important; margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: 0 !important;
color: var(--hx-primary) !important; font-family: var(--hx-sans) !important; font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
}
html body main.cha-section .cha-card > p:first-child[style] { background: none !important; padding: 0 !important; margin: 0 0 12px !important; color: var(--hx-primary) !important; font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .12em !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) h1 { margin: 0 0 12px !important; color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 400 !important; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem) !important; line-height: 1.2 !important; letter-spacing: 0 !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) h2 { margin: 28px 0 8px !important; padding-top: 20px !important; border-top: 1px solid var(--hx-line) !important; color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; font-size: 1.12rem !important; line-height: 1.35 !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) :is(p, li) { color: var(--hx-body) !important; font-size: .95rem !important; line-height: 1.7 !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) p + p { margin-top: 12px !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) :is(.legal-intro, .cha-role-notice-page__lead) { color: var(--hx-ink) !important; font-size: 1.02rem !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) strong { color: var(--hx-ink) !important; font-weight: 600 !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) ul { margin: 10px 0 0 !important; padding-left: 20px !important; }
html body main.cha-role-notice-page__main .cha-role-notice-page__content { margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid var(--hx-line) !important; }
html body main.cha-role-notice-page__main .cha-role-notice-page__content > p { margin: 0 0 14px !important; }
html body main.cha-role-notice-page__main .cha-role-notice-page__note { margin-top: 20px !important; padding: 16px 18px !important; background: var(--hx-primary-soft) !important; border: 1px solid var(--hx-primary-line) !important; border-radius: var(--hx-r-sm) !important; box-shadow: none !important; }
html body main.cha-role-notice-page__main .cha-role-notice-page__meta { margin-top: 16px !important; color: var(--hx-muted) !important; font-size: .82rem !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) :is(.legal-actions) { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 28px !important; padding-top: 20px !important; border-top: 1px solid var(--hx-line) !important; }
html body main:is(.legal-page, .cha-section) .cha-btn { min-height: 44px !important; padding: 10px 20px !important; border-radius: 999px !important; box-shadow: none !important; font-family: var(--hx-sans) !important; font-weight: 600 !important; font-size: .92rem !important; }
html body main:is(.legal-page, .cha-section) .cha-btn:not(.cha-btn--ghost) { background: var(--hx-primary) !important; color: #fff !important; border: 1px solid var(--hx-primary) !important; }
html body main:is(.legal-page, .cha-section) .cha-btn--ghost { background: #fff !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line) !important; }
@media (min-width: 768px) { html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section):not(.hx) { padding: 56px 24px 80px !important; } }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) ul > li { list-style: disc outside !important; margin: 0 0 8px !important; padding-left: 4px !important; }
html body main:is(.legal-page, .cha-role-notice-page__main, .cha-section) ul > li::marker { color: var(--hx-primary); }
/* Sign-in and password reset: the site's flat card on a light surface (no glow, orbs or shadow);
the site header already carries the logo. */
html body main.cha-signin-main { background: var(--hx-surface) !important; background-image: none !important; }
html body main.cha-signin-main .auth-bg { display: none !important; }
html body main.cha-signin-main .auth-card, html body .cha-auth-modal__panel {
background: #fff !important; background-image: none !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-md) !important; box-shadow: none !important; backdrop-filter: none !important;
}
html body main#signin-main.cha-signin-main .auth-card .brand-header a.brand-header__logo { display: none !important; }
html body main.cha-signin-main .brand-header { justify-content: flex-start !important; margin-bottom: 14px !important; }
html body main.cha-signin-main :is(.brand-pill), html body .cha-auth-modal__brand { background: var(--hx-primary-soft) !important; border: 1px solid var(--hx-primary-line) !important; color: var(--hx-primary-ink) !important; box-shadow: none !important; font-family: var(--hx-sans) !important; }
html body main.cha-signin-main .auth-header__title, html body .cha-auth-modal__header h2 { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 400 !important; letter-spacing: 0 !important; }
html body main.cha-signin-main :is(.auth-header__desc, .auth-access-note), html body .cha-auth-modal__header p { color: var(--hx-body) !important; font-family: var(--hx-sans) !important; }
html body main.cha-signin-main .field__input, html body .cha-auth-modal .field__input { border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-sm) !important; box-shadow: none !important; background: #fff !important; font-family: var(--hx-sans) !important; }
html body main.cha-signin-main .field__input:focus, html body .cha-auth-modal .field__input:focus { border-color: var(--hx-primary) !important; box-shadow: 0 0 0 3px var(--hx-primary-soft) !important; outline: none !important; }
html body main.cha-signin-main .btn-submit, html body .cha-auth-modal :is(.btn-submit, button[type="submit"]) { background: var(--hx-primary) !important; background-image: none !important; border-radius: 999px !important; box-shadow: none !important; font-family: var(--hx-sans) !important; font-weight: 600 !important; transform: none !important; }
html body main.cha-signin-main .btn-submit:hover, html body .cha-auth-modal :is(.btn-submit, button[type="submit"]):hover { background: var(--hx-primary-ink) !important; }
html body main.cha-signin-main .link-primary { color: var(--hx-primary) !important; font-weight: 600 !important; }
/* Account deletion page (linked from the mobile app store listing) on the legal reading layout. */
html body main.hx-plain-page { max-width: 780px !important; margin: 0 auto !important; padding: 32px 16px 56px !important; font-family: var(--hx-sans) !important; }
html body main.hx-plain-page h1 { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 400 !important; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem) !important; }
html body main.hx-plain-page h2 { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; font-size: 1.12rem !important; }
html body main.hx-plain-page :is(p, li) { color: var(--hx-body) !important; font-size: .95rem !important; line-height: 1.7 !important; }
html body main.hx-plain-page .card { background: #fff !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-md) !important; box-shadow: none !important; }
html body main.hx-plain-page .btn { background: var(--hx-primary) !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important; }
/* Partner invitation under the partner wall: one flat card, text, three points, two actions. */
.hx-join { display: grid; gap: 18px; margin-top: 28px; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--hx-primary-line); border-radius: var(--hx-r-lg); background: #fff; }
.hx-join__h { margin: 6px 0 8px; color: var(--hx-ink); font-family: var(--hx-display); font-weight: 450; font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); line-height: 1.25; }
.hx-join__text p:not(.hx-eyebrow) { margin: 0; color: var(--hx-body); font-size: .95rem; line-height: 1.6; max-width: 52ch; }
.hx-join__points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hx-join__points li { display: flex; align-items: center; gap: 10px; color: var(--hx-ink); font-size: .92rem; font-weight: 500; }
.hx-join__points .hx-i { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--hx-primary-soft); border: 1px solid var(--hx-primary-line); color: var(--hx-primary); }
.hx-join__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 479.98px) { .hx-join__cta .hx-btn { width: 100%; justify-content: center; } }
@media (min-width: 1024px) {
.hx-join { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 40px; align-items: center; }
.hx-join__cta { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--hx-line); }
}
/* Partner application dialog on the site form design (28 Oct 2026): white sheet, hairlines,
Jost headings, one field style, the site drop-downs, a calm e-mail check card, one primary action. */
html body .cha-modal-backdrop .cha-modal--partner {
width: min(100%, 720px) !important; max-width: 720px !important; max-height: min(92vh, 980px) !important; display: flex !important; flex-direction: column !important;
background: #fff !important; background-image: none !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-lg) !important; box-shadow: none !important; overflow: hidden !important;
font-family: var(--hx-sans) !important; color: var(--hx-body) !important;
}
html body .cha-modal--partner .cha-modal__head {
position: relative !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important;
padding: 20px 24px 18px !important; background: #fff !important; background-image: none !important; border-bottom: 1px solid var(--hx-line) !important; box-shadow: none !important;
}
html body .cha-modal--partner .cha-modal__eyebrow { margin: 0 0 6px !important; color: var(--hx-primary) !important; font-family: var(--hx-sans) !important; font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
html body .cha-modal--partner .cha-modal__title { margin: 0 !important; color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 450 !important; font-size: clamp(1.25rem, 1.15rem + .5vw, 1.55rem) !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
html body .cha-modal--partner .cha-modal__subtitle { margin: 6px 0 0 !important; color: var(--hx-body) !important; font-size: .9rem !important; line-height: 1.55 !important; max-width: 52ch !important; }
html body .cha-modal--partner .cha-modal__close {
flex: none !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
border: 1px solid var(--hx-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--hx-ink) !important; box-shadow: none !important; font-size: 20px !important; line-height: 1 !important;
}
html body .cha-modal--partner .cha-modal__close:hover { border-color: var(--hx-primary-line) !important; color: var(--hx-primary) !important; }
html body .cha-modal--partner .cha-modal__body { flex: 1 1 auto !important; overflow-y: auto !important; padding: 8px 24px 28px !important; background: #fff !important; overscroll-behavior: contain; }
html body .cha-modal--partner .cha-partner-auth-card { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html body .cha-modal--partner .cha-partner-brand { display: none !important; }
html body .cha-modal--partner .cha-partner-section { display: block !important; margin: 22px 0 12px !important; padding: 18px 0 0 !important; border-top: 1px solid var(--hx-line) !important; background: none !important; }
html body .cha-modal--partner .cha-partner-form > .cha-partner-section:first-of-type { margin-top: 10px !important; padding-top: 0 !important; border-top: 0 !important; }
html body .cha-modal--partner .cha-partner-section strong { display: block !important; color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; font-size: 1.02rem !important; letter-spacing: 0 !important; text-transform: none !important; }
html body .cha-modal--partner .cha-partner-section span { display: block !important; margin-top: 4px !important; color: var(--hx-muted) !important; font-size: .84rem !important; }
html body .cha-modal--partner .cha-partner-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 14px !important; }
@media (min-width: 640px) { html body .cha-modal--partner .cha-partner-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
html body .cha-modal--partner .cha-partner-field { margin: 0 0 14px !important; min-width: 0 !important; }
html body .cha-modal--partner .cha-partner-label { display: block !important; margin: 0 0 6px !important; color: var(--hx-ink) !important; font-size: .86rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
html body .cha-modal--partner .cha-partner-label span { color: #c2410c !important; }
html body .cha-modal--partner .cha-partner-inputwrap, html body .cha-modal--partner .cha-partner-textwrap { position: relative !important; display: block !important; }
html body .cha-modal--partner .cha-partner-icon { position: absolute !important; z-index: 2 !important; left: 14px !important; top: 24px !important; transform: translateY(-50%) !important; display: inline-flex !important; color: var(--hx-primary) !important; pointer-events: none !important; }
html body .cha-modal--partner .cha-partner-icon svg { width: 18px !important; height: 18px !important; }
html body .cha-modal--partner :is(.cha-partner-input, .cha-partner-textarea) {
width: 100% !important; min-height: 48px !important; padding: 0 14px 0 44px !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-sm) !important;
background: #fff !important; box-shadow: none !important; color: var(--hx-ink) !important; font-family: var(--hx-sans) !important; font-size: .95rem !important;
}
html body .cha-modal--partner .cha-partner-textarea { min-height: 110px !important; padding: 12px 14px 12px 44px !important; line-height: 1.5 !important; resize: vertical !important; }
html body .cha-modal--partner :is(.cha-partner-input, .cha-partner-textarea)::placeholder { color: #94a3b8 !important; }
html body .cha-modal--partner :is(.cha-partner-input, .cha-partner-textarea):focus { outline: none !important; border-color: var(--hx-primary) !important; box-shadow: 0 0 0 3px var(--hx-primary-soft) !important; }
html body .cha-modal--partner .hx-select { width: 100% !important; }
html body .cha-modal--partner .hx-select__btn { padding-left: 44px !important; }
html body .cha-modal--partner .cha-email-verify-card { margin: 0 0 14px !important; padding: 16px !important; background: var(--hx-surface) !important; background-image: none !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-md) !important; box-shadow: none !important; }
html body .cha-modal--partner .cha-email-verify-head { display: flex !important; gap: 12px !important; align-items: flex-start !important; margin-bottom: 12px !important; }
html body .cha-modal--partner .cha-email-verify-icon { flex: none !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: var(--hx-primary-soft) !important; border: 1px solid var(--hx-primary-line) !important; color: var(--hx-primary) !important; box-shadow: none !important; }
html body .cha-modal--partner .cha-email-verify-copy strong { color: var(--hx-ink) !important; font-size: .92rem !important; }
html body .cha-modal--partner .cha-email-verify-copy p { margin: 2px 0 0 !important; color: var(--hx-body) !important; font-size: .84rem !important; line-height: 1.5 !important; }
html body .cha-modal--partner .cha-email-verify-controls { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: stretch !important; }
html body .cha-modal--partner .cha-email-verify-controls .cha-email-code-wrap { flex: 1 1 180px !important; }
html body .cha-modal--partner .cha-email-verify-note { margin-top: 10px !important; color: var(--hx-muted) !important; font-size: .8rem !important; }
html body .cha-modal--partner .cha-partner-submit {
display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 52px !important; width: 100% !important; padding: 0 22px !important;
border: 1px solid var(--hx-primary) !important; border-radius: 999px !important; background: var(--hx-primary) !important; background-image: none !important; color: #fff !important;
box-shadow: none !important; transform: none !important; font-family: var(--hx-sans) !important; font-size: .95rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body .cha-modal--partner .cha-partner-submit:hover { background: var(--hx-primary-ink) !important; border-color: var(--hx-primary-ink) !important; }
html body .cha-modal--partner .cha-partner-submit--soft { width: auto !important; min-height: 48px !important; background: #fff !important; color: var(--hx-primary) !important; border-color: var(--hx-primary-line) !important; }
html body .cha-modal--partner .cha-partner-submit--soft:hover { background: var(--hx-primary-soft) !important; color: var(--hx-primary-ink) !important; }
html body .cha-modal--partner .cha-partner-consent { display: flex !important; gap: 10px !important; align-items: flex-start !important; margin: 18px 0 16px !important; padding: 14px 16px !important; background: var(--hx-surface) !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-sm) !important; color: var(--hx-body) !important; font-size: .86rem !important; line-height: 1.5 !important; }
html body .cha-modal--partner .cha-partner-consent input { flex: none !important; width: 18px !important; height: 18px !important; margin: 2px 0 0 !important; accent-color: var(--hx-primary) !important; }
html body .cha-modal--partner .cha-status:not(:empty) { margin-top: 12px !important; padding: 12px 14px !important; border-radius: var(--hx-r-sm) !important; border: 1px solid var(--hx-line) !important; background: var(--hx-surface) !important; color: var(--hx-ink) !important; font-size: .88rem !important; }
@media (max-width: 639.98px) {
html body .cha-modal-backdrop:has(.cha-modal--partner) { align-items: flex-end !important; padding: 0 !important; }
html body .cha-modal-backdrop .cha-modal--partner { width: 100% !important; max-height: 94vh !important; border-radius: 20px 20px 0 0 !important; border-bottom: 0 !important; }
html body .cha-modal--partner .cha-modal__head { padding: 16px 18px 14px !important; }
html body .cha-modal--partner .cha-modal__body { padding: 6px 18px calc(22px + env(safe-area-inset-bottom, 0px)) !important; }
}
html body .cha-modal--partner .cha-partner-textwrap:not(:has(.cha-partner-icon)) .cha-partner-textarea, html body .cha-modal--partner .cha-partner-inputwrap:not(:has(.cha-partner-icon)) .cha-partner-input { padding-left: 14px !important; }
/* Application steps on phones: the step badges wrap, Back and Continue stack full width (Continue first). */
@media (max-width: 479.98px) {
html body main .step-header .step-pills { flex-wrap: wrap !important; row-gap: 6px !important; }
html body main .step-header .step-pills > * { white-space: nowrap !important; }
html body main .form-card .action-bar { flex-direction: column-reverse !important; align-items: stretch !important; gap: 10px !important; }
html body main .form-card .action-bar > .btn { width: 100% !important; justify-content: center !important; white-space: normal !important; text-align: center !important; padding-left: 16px !important; padding-right: 16px !important; }
}
/* Blog list (/blog/): the treatment list layout with a featured article and landscape article cards. */
main.hx-bl .hx-ti-top { padding-bottom: 28px; background: var(--hx-surface); border-bottom: 1px solid var(--hx-line); }
main.hx-bl .hx-bl-featured { padding-top: 32px; padding-bottom: 0; }
.hx-bl-feat { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--hx-line); border-radius: var(--hx-r-lg); background: #fff; color: inherit; text-decoration: none; transition: border-color .2s; }
.hx-bl-feat:hover { border-color: var(--hx-primary-line); }
.hx-bl-feat__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hx-surface); }
.hx-bl-feat__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hx-bl-feat:hover .hx-bl-feat__media img { transform: scale(1.02); }
.hx-bl-feat__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 3.5vw, 36px); }
.hx-bl-feat__body .hx-eyebrow { margin: 0; }
.hx-bl-feat__body .hx-tag { align-self: flex-start; }
.hx-bl-feat__title { color: var(--hx-ink); font-family: var(--hx-display); font-weight: 450; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); line-height: 1.22; }
.hx-bl-feat__text { color: var(--hx-body); font-size: .98rem; line-height: 1.65; max-width: 56ch; }
.hx-bl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-bl-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--hx-muted); font-size: .82rem; white-space: nowrap; }
.hx-bl-meta .hx-i { color: var(--hx-primary); }
.hx-bl-foot .hx-link { white-space: nowrap; }
@media (min-width: 900px) {
.hx-bl-feat { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.hx-bl-feat__media { aspect-ratio: auto; min-height: 100%; }
}
main.hx-bl .hx-bl-list { padding-top: 28px; }
main.hx-bl .hx-ti-grid.hx-bl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { main.hx-bl .hx-ti-grid.hx-bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { main.hx-bl .hx-ti-grid.hx-bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
main.hx-bl .hx-bl-grid li[hidden] { display: none; }
.hx-bl-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); background: #fff; color: inherit; text-decoration: none; transition: border-color .2s; }
.hx-bl-card:hover { border-color: var(--hx-primary-line); }
.hx-bl-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--hx-surface); border-bottom: 1px solid var(--hx-line); }
.hx-bl-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hx-bl-card:hover .hx-bl-card__media img { transform: scale(1.03); }
.hx-bl-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 18px 16px; }
.hx-bl-card__body .hx-tag { align-self: flex-start; }
.hx-bl-card__body strong { color: var(--hx-ink); font-family: var(--hx-display); font-weight: 500; font-size: 1.08rem; line-height: 1.32; }
.hx-bl-card__text { color: var(--hx-body); font-size: .9rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
main.hx-bl .hx-bl-empty:not([hidden]) { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; padding: 18px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); background: var(--hx-surface); }
main.hx-bl .hx-bl-empty p { margin: 4px 0 0; color: var(--hx-body); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .hx-bl-feat__media img, .hx-bl-card__media img { transition: none; } }
/* Blog articles (/blog//): the treatment page template with a landscape hero photo, a reading
line (time, sources, date), numbered points, notes, product fact tables, sources and related cards. */
.hx-ba-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 14px; }
.hx-ba-hero__copy { min-width: 0; }
.hx-ba-h1 { max-width: 24ch; }
.hx-ba-hero__media { margin: 0; overflow: hidden; border: 1px solid var(--hx-line); border-radius: var(--hx-r-lg); background: var(--hx-surface); aspect-ratio: 3 / 2; }
.hx-ba-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-ba-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--hx-line); }
.hx-ba-meta li { display: inline-flex; align-items: center; gap: 7px; color: var(--hx-body); font-size: .86rem; white-space: nowrap; }
.hx-ba-meta .hx-i { color: var(--hx-primary); flex: none; }
@media (min-width: 1024px) { .hx-ba-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; } }
.hx-ba-intro p { font-size: 1.04rem !important; line-height: 1.75 !important; color: var(--hx-ink) !important; }
.hx-ba-intro { padding-bottom: 8px; }
.hx-ba-key { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; margin: 8px 0 8px; padding: 20px 22px; border: 1px solid var(--hx-primary-line); border-radius: var(--hx-r-md); background: var(--hx-primary-soft); }
.hx-ba-key .hx-eyebrow { margin: 0 0 4px; }
.hx-ba-key .hx-h3 { margin: 0 0 8px; color: var(--hx-ink); }
.hx-ba-key p:not(.hx-eyebrow) { margin: 0; color: var(--hx-ink); font-size: .95rem; line-height: 1.65; }
.hx-ba-key p + p { margin-top: 10px; }
.hx-ba-note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; margin-top: 18px; padding: 18px 20px; border: 1px solid #f2dcae; border-radius: var(--hx-r-md); background: #fff8eb; }
.hx-ba-note .hx-tile { background: #fff; border-color: #f2dcae; color: #b45309; }
.hx-ba-note__label { margin: 0 0 4px !important; color: #b45309 !important; font-size: .7rem !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hx-ba-note .hx-h3 { margin: 0 0 6px; color: #3f3a2e; }
.hx-ba-note p:not(.hx-ba-note__label) { margin: 0; color: #3f3a2e; font-size: .93rem; line-height: 1.6; }
.hx-ba-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 18px 0 0; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); overflow: hidden; background: #fff; }
.hx-ba-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 18px; border-top: 1px solid var(--hx-line); }
.hx-ba-facts > div:first-child { border-top: 0; }
.hx-ba-facts dt { color: var(--hx-muted); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hx-ba-facts dd { margin: 0; color: var(--hx-ink); font-size: .93rem; line-height: 1.6; }
@media (min-width: 640px) { .hx-ba-facts > div { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; } }
.hx-ba-small { margin-top: 12px !important; }
.hx-ba-sources { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: src; }
.hx-ba-sources a { display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-sm); background: #fff; color: var(--hx-ink); font-size: .9rem; line-height: 1.45; text-decoration: none; transition: border-color .2s, color .2s; }
.hx-ba-sources a:hover { border-color: var(--hx-primary-line); color: var(--hx-primary); }
.hx-ba-sources .hx-i { color: var(--hx-primary); }
.hx-ba-sources span { min-width: 0; overflow-wrap: anywhere; }
.hx-ba-sum__text { margin: 0 0 14px !important; color: var(--hx-body); font-size: .88rem; line-height: 1.55; }
.hx-ba-rel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hx-ba-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hx-ba-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
main.hx-ba .hx-tp-points li > div > p + p { margin-top: 8px; }
main.hx-ba .hx-tp-prose ul, main.hx-ba .hx-tp-prose ol { margin: 10px 0 0; padding-left: 20px; }
main.hx-ba .hx-tp-prose li { margin: 0 0 6px; }
main.hx-ba .hx-tp-prose a { color: var(--hx-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Article rhythm: a photo or a key-finding box between sections keeps the same gap as sections do. */
main.hx-ba .hx-tp-body > .hx-tp-figure { margin: 36px 0 0 !important; }
main.hx-ba .hx-tp-body > .hx-ba-key { margin: 32px 0 0 !important; }
main.hx-ba .hx-tp-body > .hx-ba-intro + .hx-ba-key { margin-top: 24px !important; }
main.hx-ba .hx-tp-body > .hx-tp-figure + .hx-tp-sec, main.hx-ba .hx-tp-body > .hx-ba-key + .hx-tp-sec { margin-top: 0; }
main.hx-ba .hx-tp-sec > .hx-ba-note:last-child, main.hx-ba .hx-tp-sec > .hx-tp-points:last-child, main.hx-ba .hx-tp-sec > .hx-ba-facts:last-child { margin-bottom: 4px; }
@media (max-width: 767.98px) { main.hx-ba .hx-tp-body > .hx-tp-figure { margin-top: 28px !important; } main.hx-ba .hx-tp-body > .hx-ba-key { margin-top: 24px !important; } }
/* Flat surfaces everywhere on the public site (owner rule 28 Oct 2026), including what only shows
when it opens: dialogs, menus, drawers, sheets, toasts and their backdrops.
1. No drop shadow, text shadow or blur on any element. Focus stays visible as a teal outline,
selected options keep a teal border. */
html:not(#\#) body *, html:not(#\#) body *::before, html:not(#\#) body *::after {
box-shadow: none !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html:not(#\#) body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--hx-primary) !important; outline-offset: 2px !important; }
html:not(#\#) body :is(input, select, textarea):is(:focus, :focus-visible):not([type="checkbox"], [type="radio"]) { border-color: var(--hx-primary) !important; outline: 1px solid var(--hx-primary) !important; outline-offset: -1px !important; }
html body :is(.cha-settlement-option.is-selected, .tab.on) { border-color: var(--hx-primary) !important; }
/* 2. Every backdrop is the same light veil: the page stays visible behind it, nothing turns dark. */
:root { --hx-veil: rgba(242, 247, 249, .9); }
html:not(#\#) body :is(.cha-auth-modal__backdrop, .cha-modal-backdrop, .cha-ui-dialog-overlay, .cha-cubi-backdrop, .hx-drawer__backdrop, .cha-mobile-backdrop, .cha-map-modal__backdrop, .hx-select__backdrop) {
background: var(--hx-veil) !important; background-image: none !important;
}
html body dialog::backdrop { background: var(--hx-veil) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* 3. Dialog sheets: white, one hairline border, the site radius, no coloured strip on top. */
html:not(#\#) body :is(.cha-auth-modal__panel, .cha-ui-dialog, .cha-pr-dialog__surface, .cha-map-modal__panel) {
background: #fff !important; background-image: none !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r-md) !important;
}
html:not(#\#) body .cha-auth-modal__panel::before, html:not(#\#) body .cha-auth-modal__panel::after { display: none !important; background: none !important; }
@media (max-width: 640px) {
html:not(#\#) body .cha-auth-modal { align-items: center !important; padding: 20px 16px max(20px, env(safe-area-inset-bottom)) !important; }
html:not(#\#) body .cha-auth-modal__panel { width: min(100%, 440px) !important; min-height: 0 !important; max-height: min(88dvh, 760px) !important; border-radius: var(--hx-r-md) !important; border: 1px solid var(--hx-line) !important; padding: 22px 18px !important; }
}
html:not(#\#) body :is(.cha-auth-modal__close, .cha-modal__close, .cha-ui-dialog__close) { background: #fff !important; border: 1px solid var(--hx-line) !important; }
html:not(#\#) body :is(.cha-auth-modal__secondary, .cha-ui-dialog__button) { background: #fff !important; border: 1px solid var(--hx-line) !important; color: var(--hx-ink) !important; border-radius: 999px !important; font-family: var(--hx-sans) !important; }
html body .cha-ui-dialog__button--primary { background: var(--hx-primary) !important; border-color: var(--hx-primary) !important; color: #fff !important; }
html body .cha-ui-dialog :is(.cha-ui-dialog__title) { color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 450 !important; letter-spacing: 0 !important; }
html body .cha-ui-dialog :is(.cha-ui-dialog__message, .cha-ui-dialog__body) { color: var(--hx-body) !important; font-family: var(--hx-sans) !important; }
/* 4. Application and payment steps: flat light page, plain white top bar and panels. */
html body .app-route-content > main.shell { background: var(--hx-surface) !important; background-image: none !important; }
html body .app-route-content > .m-top { background: #fff !important; border-bottom: 1px solid var(--hx-line) !important; }
html body :is(.cha-case-panel, .cha-fee-panel, .cha-manager-approval-public__head) { background: var(--hx-primary-soft) !important; background-image: none !important; }
html body .cha-contract-box { background: #fff !important; background-image: none !important; }
/* Native dialogs (payment withdrawal): centred on every screen, close button is the X icon. */
html body dialog.cha-pr-dialog[open] { margin: auto !important; max-height: calc(100dvh - 32px) !important; overflow: auto !important; }
html body .cha-pr-dialog__close { width: 40px !important; height: 40px !important; background: #fff !important; border: 1px solid var(--hx-line) !important; border-radius: 999px !important; }
html body .cha-pr-dialog__surface h2 { padding-right: 48px; }
/* Older public pages that keep their own layout (file tracking, the two lung cancer landing pages):
the same flat surfaces, no gradient washes, photo captions on a plain white card. */
html body main#main:has(> .cha-pr-container) { background: var(--hx-surface) !important; background-image: none !important; }
html body main#main:has(> .cha-pr-container)::before { display: none !important; }
html body .cha-pr-info-card { background: #fff !important; background-image: none !important; }
html body .cha-condition-page .cha-hero::before, html body figure.cha-photo-card::after,
html body .lc-hero::after, html body .lc-hero-media::after { display: none !important; background: none !important; }
html body figure.cha-photo-card .cha-caption { background: #fff !important; border: 1px solid var(--hx-line) !important; }
html body .lc-therapy-summary > div { background: var(--hx-surface) !important; background-image: none !important; }
html body main.cha-signin-main .auth-card::before, html body main.cha-signin-main .auth-card::after { display: none !important; }
/* Privacy notice (tools/build_privacy_v3.py): a wider reading box with a contents list, controller cards,
data tables that stack into labelled rows on phones, and a rights grid. Flat and light like the rest. */
html body main.legal-page.legal-page--privacy .legal-box { max-width: 920px !important; }
.lp-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; color: var(--hx-muted); font-size: .84rem; }
.lp-summary { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--hx-primary-soft); border: 1px solid var(--hx-primary-line); }
.lp-summary p.lp-summary__title { margin: 0 0 6px !important; color: var(--hx-primary-ink) !important; font-size: .72rem !important; font-weight: 650 !important; letter-spacing: .08em; text-transform: uppercase; }
html body main.legal-page .lp-summary ul { margin: 4px 0 0 !important; }
.lp-toc { margin-top: 22px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--hx-line); background: #fff; }
.lp-toc p.lp-toc__title { margin: 0 0 8px !important; color: var(--hx-ink) !important; font-weight: 600 !important; font-size: .9rem !important; }
html body main.legal-page .lp-toc ol { margin: 0 !important; padding-left: 22px !important; columns: 1; }
html body main.legal-page .lp-toc ol > li { list-style: decimal outside !important; margin: 0 0 4px !important; font-size: .9rem !important; break-inside: avoid; }
.lp-toc a { color: var(--hx-primary-ink); text-decoration: none; }
.lp-toc a:hover { text-decoration: underline; }
@media (min-width: 768px) { html body main.legal-page .lp-toc ol { columns: 2; column-gap: 32px; } }
html body main.legal-page .legal-content h2[id] { scroll-margin-top: 110px; }
html body main.legal-page .legal-content h3 { margin: 18px 0 6px !important; color: var(--hx-ink) !important; font-family: var(--hx-display) !important; font-weight: 500 !important; font-size: 1rem !important; }
.lp-cards { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 768px) { .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-card { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--hx-line); background: var(--hx-surface); }
html body main.legal-page .lp-card p { margin: 0 !important; font-size: .88rem !important; line-height: 1.55 !important; }
html body main.legal-page .lp-card p + p { margin-top: 4px !important; }
html body main.legal-page .lp-card .lp-card__scope { color: var(--hx-primary-ink) !important; font-size: .68rem !important; font-weight: 650 !important; letter-spacing: .07em; text-transform: uppercase; }
html body main.legal-page .lp-card .lp-card__name { color: var(--hx-ink) !important; font-weight: 600 !important; font-size: .95rem !important; }
.lp-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .86rem; }
.lp-table th, .lp-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hx-line); color: var(--hx-body); line-height: 1.55; }
.lp-table thead th { background: var(--hx-surface); color: var(--hx-ink); font-weight: 650; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--hx-primary-line); }
.lp-table tbody th { color: var(--hx-ink); font-weight: 600; }
@media (max-width: 719.98px) {
.lp-table thead { display: none; }
.lp-table, .lp-table tbody, .lp-table tr, .lp-table th, .lp-table td { display: block; width: 100%; }
.lp-table tr { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--hx-line); border-radius: 12px; background: #fff; }
.lp-table th, .lp-table td { padding: 4px 0; border: 0; }
.lp-table tbody th { font-size: .95rem; padding-bottom: 6px; }
.lp-table td::before { content: attr(data-label); display: block; color: var(--hx-muted); font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
}
.lp-rights { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 768px) { .lp-rights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-right { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hx-line); background: #fff; }
html body main.legal-page .lp-right p { margin: 0 !important; font-size: .86rem !important; line-height: 1.55 !important; }
html body main.legal-page .lp-right strong { display: block; margin-bottom: 2px; }
.lp-note { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--hx-surface); border: 1px solid var(--hx-line); }
html body main.legal-page .lp-note p { margin: 0 !important; font-size: .86rem !important; }
/* Privacy notice, owner's revised structure (29 Oct): facts line, "about this text", summary points as cards, callouts */
.lp-facts { display: grid; gap: 8px; margin: 6px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hx-line); background: var(--hx-surface); }
.lp-facts div { display: grid; gap: 2px; }
.lp-facts dt { color: var(--hx-muted); font-size: .68rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.lp-facts dd { margin: 0; color: var(--hx-ink); font-size: .9rem; line-height: 1.5; }
@media (min-width: 768px) { .lp-facts { grid-template-columns: minmax(0, .35fr) minmax(0, 1fr); gap: 16px; } }
.lp-about { margin-top: 22px; }
html body main.legal-page .lp-about h2.lp-about__title { margin: 0 0 8px !important; padding-top: 0 !important; border-top: 0 !important; }
.lp-points { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 768px) { .lp-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-point { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--hx-primary-line); }
html body main.legal-page .lp-point p { margin: 0 !important; font-size: .86rem !important; line-height: 1.55 !important; }
html body main.legal-page .lp-point p.lp-point__title { margin-bottom: 4px !important; color: var(--hx-ink) !important; font-weight: 650 !important; font-size: .9rem !important; }
html body main.legal-page .lp-summary p.lp-summary__contact { margin: 12px 0 0 !important; font-size: .9rem !important; }
.lp-note--callout { border-color: var(--hx-primary-line); background: var(--hx-primary-soft); }
html body main.legal-page .lp-note--callout p + p { margin-top: 8px !important; }
html body main.legal-page .lp-note p.lp-note__title { margin-bottom: 6px !important; color: var(--hx-ink) !important; font-weight: 650 !important; }
/* Section titles carry their own numbers ("1. Veri sorumlusu kimdir?"), so the contents list shows none */
html body main.legal-page .lp-toc ol { padding-left: 0 !important; }
html body main.legal-page .lp-toc ol > li { list-style: none !important; padding-left: 0 !important; }
html body .lp-consent { margin-top: 14px !important; }
/* Cookie consent card and preferences panel (cha-site-v3.js). Flat and light like the rest of the site:
white card, hairline border, soft teal tile with a Lucide icon, no shadow. Desktop: one row floating
16px above the page edge. Phones: a compact card above the safe area. Reject and accept are equal. */
.hx-consent { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 120; display: flex; justify-content: center; pointer-events: none; font-family: var(--hx-sans); }
.hx-consent__card { pointer-events: auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px 18px; width: 100%; max-width: 1120px;
padding: 16px 18px; border-radius: 20px; background: #fff; border: 1px solid #c7e2e0;
opacity: 0; transform: translateY(12px); transition: opacity .35s var(--hx-ease, ease), transform .35s var(--hx-ease, ease); }
.hx-consent.is-in .hx-consent__card { opacity: 1; transform: none; }
.hx-consent__tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: #0e7c7b; background: #e6f2f1; border: 1px solid #c7e2e0; }
.hx-consent__tile--sm { width: 36px; height: 36px; border-radius: 10px; }
.hx-consent__copy { min-width: 0; }
.hx-consent__short { display: none; }
.hx-consent__title { margin: 0 0 2px; color: #0f172a; font-family: var(--hx-display); font-size: 1.02rem; font-weight: 500; line-height: 1.3; }
.hx-consent__text { margin: 0; color: #475569; font-size: .82rem; line-height: 1.55; }
.hx-consent__text a, .hx-consent-panel__policy a { color: #0a5f5e; font-weight: 600; text-decoration: underline; text-decoration-color: #9fd0cb; text-underline-offset: 3px; }
.hx-consent__text a:hover, .hx-consent-panel__policy a:hover { text-decoration-color: currentColor; }
.hx-consent__text a { white-space: nowrap; }
.hx-consent__actions { display: flex; align-items: center; gap: 10px; }
.hx-consent__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 150px; padding: 0 20px; border-radius: 999px;
border: 1px solid #0e7c7b; background: #fff; color: #0a5f5e; font: inherit; font-size: .86rem; font-weight: 600; white-space: nowrap; cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s; }
.hx-consent__btn:hover { background: #e6f2f1; }
.hx-consent__btn--primary { background: #0e7c7b; color: #fff; }
.hx-consent__btn--primary:hover { background: #0a5f5e; border-color: #0a5f5e; }
.hx-consent__btn:focus-visible, .hx-consent__link:focus-visible, .hx-consent-panel__x:focus-visible { outline: 3px solid rgba(14, 124, 123, .45); outline-offset: 2px; }
.hx-consent__link { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: #0a5f5e;
font: inherit; font-size: .86rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.hx-consent__link:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* The card never covers the contact bar: beside it on wide screens, above it elsewhere (cha-site-v3.js
measures the bar). The card lays itself out by its own width, not the window's. */
.hx-consent { left: var(--hx-edge); right: var(--hx-edge); bottom: var(--hx-consent-bottom, calc(16px + env(safe-area-inset-bottom, 0px))); container-type: inline-size; }
/* Wide screens: a compact box in the bottom-left corner, Cubi keeps the bottom-right corner */
.hx-consent.is-beside { justify-content: flex-start; right: var(--hx-consent-right, 16px); }
.hx-consent.is-beside .hx-consent__card { max-width: 440px; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px 14px; padding: 18px; border-radius: 20px; }
.hx-consent.is-beside .hx-consent__tile { width: 40px; height: 40px; }
.hx-consent.is-beside .hx-consent__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hx-consent.is-beside .hx-consent__btn { min-width: 0; min-height: 44px; padding: 0 12px; }
.hx-consent.is-beside .hx-consent__link { grid-column: 1 / -1; order: 3; justify-content: center; min-height: 38px; }
@container (max-width: 980px) {
.hx-consent__card { grid-template-columns: 44px minmax(0, 1fr); }
.hx-consent__actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 1023.98px) {
.hx-consent__card { grid-template-columns: 44px minmax(0, 1fr); }
.hx-consent__actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 639.98px) {
.hx-consent { bottom: var(--hx-consent-bottom, calc(10px + env(safe-area-inset-bottom, 0px))); }
.hx-consent__card { grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px; border-radius: 18px; }
.hx-consent__tile { width: 40px; height: 40px; }
.hx-consent__title { font-size: .94rem; }
.hx-consent__text { font-size: .8rem; }
.hx-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hx-consent__btn { min-width: 0; min-height: 44px; padding: 0 12px; }
.hx-consent__link { grid-column: 1 / -1; order: 3; justify-content: center; min-height: 40px; }
/* Phones: the short text, no icon, so the card leaves the page readable. */
.hx-consent__card { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; }
.hx-consent .hx-consent__tile, .hx-consent__title { display: none; }
.hx-consent__long { display: none; }
.hx-consent__short { display: inline; }
.hx-consent__link { min-height: 36px; }
}
.hx-consent-panel { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: var(--hx-sans); }
.hx-consent-panel__veil { position: absolute; inset: 0; background: var(--hx-veil, rgba(242, 247, 249, .9)); }
.hx-consent-panel__box { position: relative; width: 100%; max-width: 600px; max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid #dce7ed; }
.hx-consent-panel__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 14px; }
.hx-consent-panel__title { margin: 0; color: #0f172a; font-family: var(--hx-display); font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
.hx-consent-panel__x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #dce7ed; border-radius: 999px; background: #fff; color: #334155; cursor: pointer; }
.hx-consent-panel__x:hover { border-color: #0e7c7b; color: #0e7c7b; }
.hx-consent-panel__lead { margin: 14px 0 16px; color: #56677b; font-size: .86rem; line-height: 1.6; }
.hx-consent-panel__rows { display: grid; gap: 10px; }
.hx-consent__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid #dce7ed; background: #fff; }
.hx-consent__row:first-child { background: #f7fafb; }
.hx-consent__row p { margin: 0; color: #56677b; font-size: .8rem; line-height: 1.5; }
.hx-consent__row p.hx-consent__row-title { margin-bottom: 2px; color: #0f172a; font-weight: 650; font-size: .92rem; }
.hx-consent__always { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 28px; border-radius: 999px; background: #e6f2f1; color: #0a5f5e; font-size: .72rem; font-weight: 650; white-space: nowrap; }
html body .hx-consent-panel label.hx-consent__switch { position: relative; flex: none; display: inline-flex; width: 50px; height: 30px !important; min-height: 0 !important; min-width: 0 !important; cursor: pointer; }
html body .hx-consent-panel .hx-consent__switch input[type="checkbox"] { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; min-width: 0 !important; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.hx-consent__switch input + span { position: absolute; inset: 0; border-radius: 999px; background: #dce7ed; transition: background-color .2s; }
.hx-consent__switch input + span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid #c7d3da; transition: transform .2s var(--hx-ease, ease); }
.hx-consent__switch input:checked + span { background: #0e7c7b; }
.hx-consent__switch input:checked + span::after { transform: translateX(20px); border-color: #0e7c7b; }
.hx-consent__switch input:focus-visible + span { outline: 3px solid rgba(14, 124, 123, .45); outline-offset: 2px; }
.hx-consent__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-consent-panel__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf2f5; }
.hx-consent-panel__right { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-consent-panel__actions .hx-consent__btn { min-width: 0; }
.hx-consent-panel__policy { margin: 14px 0 0; text-align: center; font-size: .8rem; }
@media (max-width: 559.98px) {
.hx-consent-panel { align-items: flex-end; padding: 10px; }
.hx-consent-panel__box { padding: 18px; border-radius: 22px; max-height: calc(100vh - 20px); }
.hx-consent__row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
.hx-consent__row > .hx-consent__tile { display: none; }
.hx-consent__always { padding: 0 8px; font-size: .68rem; }
.hx-consent-panel__lead { margin: 12px 0 14px; }
.hx-consent-panel__head { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 10px; }
.hx-consent-panel__head .hx-consent__tile { width: 40px; height: 40px; }
.hx-consent-panel__title { font-size: 1.04rem; }
.hx-consent-panel__actions, .hx-consent-panel__right { display: grid; grid-template-columns: 1fr; width: 100%; }
.hx-consent-panel__actions [data-c="reject"] { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
.hx-consent__card, .hx-consent__switch span, .hx-consent__switch span::after { transition: none !important; }
.hx-consent__card { opacity: 1; transform: none; }
}
/* PageSpeed 29 Oct 2026: muted text, the soft teal buttons and the WhatsApp greens are one tone
darker so every text reaches 4.5:1 on white, #f2f7f9 and #e6f2f1 (Lighthouse colour contrast). */
html body .cha-contact-verify__send { color: var(--hx-primary-ink); }
/* An old phone rule (max-width: min(150px, ...) !important on header logos) squeezed the English header logo
to 145 x 34; the logo always keeps its own proportions. */
html body #hx-header .hx-header__logo img[width][height] { max-width: none !important; }
/* Touch screens of every size (phones and tablets): a field under 16px makes iOS zoom the
whole page when it is tapped. */
@media (pointer: coarse) {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }
}
/* Footer language row: four names wrap on 320px phones instead of running off the screen. */
.hx-footer__bottom .hx-footer__langs { min-width: 0; max-width: 100%; }
/* Mobile app card (closing band) -------------------------------------------
White card, hairline, no shadow. The store badges are the stores' own artwork, unaltered (Google's PNG
trimmed of its transparent margin only); both are drawn at one height so the two black badges match.
Under each badge a status line: available now / coming soon. Phones under 390 px stack the stores. */
.hx-app { width: 100%; max-width: 980px; display: grid; gap: 22px; justify-items: center; text-align: center; padding: 28px 22px 24px; background: #fff; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); }
.hx-app__text { display: grid; justify-items: center; min-width: 0; }
.hx-app .hx-app__eyebrow { display: block; margin: 0; color: var(--hx-primary-ink); font-size: .74rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.hx-app .hx-app__title { margin: 6px 0 0; color: var(--hx-ink); font-family: var(--hx-display); font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); line-height: 1.25; font-weight: 500; }
html:not(#\#) .hx-final .hx-app .hx-app__lead { margin: 8px 0 0; max-width: 52ch; font-size: .95rem; line-height: 1.6; color: var(--hx-body); }
.hx-app__stores { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-items: start; gap: 14px; width: 100%; padding-top: 22px; border-top: 1px solid var(--hx-line); }
.hx-app__store { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.hx-store { display: block; line-height: 0; border-radius: 8px; }
html:not(#\#) .hx-app .hx-store img { display: block; width: auto; height: 40px; max-width: none; }
a.hx-store:focus-visible { outline: 3px solid var(--hx-primary); outline-offset: 3px; }
.hx-store--soon { cursor: default; }
.hx-app__state { display: inline-flex; align-items: center; gap: 7px; color: var(--hx-muted); font-size: .78rem; font-weight: 550; line-height: 1.2; white-space: nowrap; }
.hx-app__state i { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--hx-muted); }
.hx-app__state.is-live { color: var(--hx-primary-ink); }
.hx-app__state.is-live i { border-color: var(--hx-primary); background: var(--hx-primary); }
.hx-in-app .hx-app { display: none; }
.hx-in-app .hx-fapp { display: none; }
@media (max-width: 389.98px) {
.hx-app__stores { grid-template-columns: 1fr; gap: 18px; }
}
@media (min-width: 1024px) {
.hx-app { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0; padding: 30px 32px; text-align: left; justify-items: stretch; }
.hx-app__text { justify-items: start; padding-right: 40px; }
.hx-app__stores { align-self: stretch; align-content: center; gap: 16px; width: auto; padding: 4px 0 4px 40px; border-top: 0; border-left: 1px solid var(--hx-line); }
html:not(#\#) .hx-app .hx-store img { height: 48px; }
}
/* G4 (PP-026): touch targets of at least 40px for the header logo and the footer links on phones and tablets (sign-in, password reset and every page that wears this header and footer) */
.hx-header__logo { min-height: 40px; }
@media (pointer: coarse) {
.hx-flang, .hx-foffice__map, .hx-ftop, .hx-store { min-height: 40px; }
.hx-footer__company { display: inline-flex; align-items: center; min-height: 40px; }
}
/* Offices (homepage #offices): the site's own cards without photos. Rows line up across the three cards through
subgrid; a plain card below shows when the desk answers, in the visitor's own time. Filled by cha-site-v3.js. */
.hx-office__info { display: grid; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-office__line { display: flex; gap: 8px; align-items: flex-start; color: var(--hx-body); font-size: .84rem; line-height: 1.55; }
.hx-office__line > .hx-i { flex: none; margin-top: 2px; color: var(--hx-primary); }
.hx-office__line--time { align-items: center; }
.hx-office__line--time > .hx-i { margin-top: 0; }
.hx-office__time { flex: 1 1 auto; min-width: 0; }
.hx-office__time [data-hx-ogmt]:not(:empty)::before { content: "· "; }
.hx-office__time time { color: var(--hx-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-office__state { display: none; flex: none; align-items: center; gap: 6px; color: var(--hx-muted); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.hx-office__state[data-state] { display: inline-flex; }
.hx-office__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.hx-office__state[data-state="open"] { color: #146c3c; }
.hx-office__state[data-state="open"]::before { background: #16a34a; }
.hx-office__address { position: relative; font-style: normal; }
.hx-office__address > span { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.hx-office__copy { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -6px 0 0 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--hx-primary); cursor: pointer; transition: background-color .15s ease; }
.hx-office__copy:hover { background: var(--hx-primary-soft); }
.hx-office__copy:focus-visible { outline: 2px solid var(--hx-primary); outline-offset: 1px; }
.hx-office__copy .hx-i { margin: 0; }
.hx-office__copy .hx-office__copied { display: none; }
.hx-office__copy[data-done] .hx-office__copy-idle { display: none; }
.hx-office__copy[data-done] .hx-office__copied { display: block; color: #146c3c; }
.hx-office__copy[data-done]::after { content: attr(data-copied); position: absolute; right: 0; bottom: calc(100% + 4px); padding: 4px 9px; border: 1px solid var(--hx-line); border-radius: 8px; background: #fff; color: #146c3c; font-size: .74rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.hx-odesk { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 16px; border: 1px solid var(--hx-line); border-radius: var(--hx-r-md); background: #fff; }
.hx-odesk__lead, .hx-odesk__hours { min-width: 0; padding: 24px; }
.hx-odesk__hours { border-top: 1px solid var(--hx-line); }
.hx-odesk__status { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; color: var(--hx-muted); font-size: .86rem; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.hx-odesk__status::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: #94a3b8; }
.hx-odesk__status[data-state="open"] { color: #146c3c; }
.hx-odesk__status[data-state="open"]::before { background: #16a34a; }
.hx-odesk__status:empty { display: none; }
.hx-odesk__note { margin-top: 6px; color: var(--hx-muted); font-size: .84rem; line-height: 1.55; }
.hx-odesk__note:empty { display: none; }
.hx-odesk__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.hx-odesk__device { color: var(--hx-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.hx-odesk__day { position: relative; margin-top: 34px; height: 6px; border-radius: 999px; background: var(--hx-line); }
.hx-odesk__band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--hx-primary); }
.hx-odesk__tick { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--hx-ink); }
.hx-odesk__now { position: absolute; bottom: calc(100% + 8px); color: var(--hx-ink); font-size: .76rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(var(--hx-now-shift, -50%)); }
.hx-odesk__ends { display: flex; justify-content: space-between; margin-top: 8px; color: var(--hx-muted); font-size: .72rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hx-odesk__legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.hx-odesk__leg { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hx-odesk__k { color: var(--hx-muted); font-size: .78rem; line-height: 1.4; }
.hx-odesk__v { margin-top: 1px; color: var(--hx-ink); font-size: .86rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 1.4em; }
.hx-odesk__leg[hidden] { display: none; }
.hx-odesk__rest { margin-top: 10px; color: var(--hx-muted); font-size: .8rem; line-height: 1.5; text-wrap: pretty; }
.hx-odesk__rest[hidden] { display: none; }
@media (max-width: 399.98px) { .hx-office__time [data-hx-ogmt] { display: none; } }
@media (min-width: 480px) {
.hx-odesk__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.hx-odesk__leg { display: block; }
}
@media (hover: none) and (pointer: coarse) { .hx-office__copy { width: 40px; height: 40px; margin: -9px 0 0 0; } }
@media (min-width: 720px) {
.hx-office { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: 28px; row-gap: 0; }
.hx-office__top { grid-column: 1; grid-row: 1; }
.hx-office .hx-h3 { grid-column: 1; grid-row: 2; }
.hx-office__role { grid-column: 1; grid-row: 3 / 5; }
.hx-office__info { grid-column: 2; grid-row: 1 / 3; margin-top: 0; padding-top: 0; border-top: 0; align-content: start; }
.hx-office__address { grid-column: 2; grid-row: 3; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-office__actions { grid-column: 2; grid-row: 4; }
.hx-odesk { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hx-odesk__hours { border-top: 0; border-left: 1px solid var(--hx-line); }
}
@media (min-width: 1024px) {
.hx-offices { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); row-gap: 0; }
.hx-office { grid-row: span 6; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; column-gap: 0; }
.hx-office__top, .hx-office .hx-h3, .hx-office__role, .hx-office__info, .hx-office__address, .hx-office__actions { grid-column: 1; grid-row: auto; }
.hx-office__info { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-office__address { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-odesk { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.hx-odesk__hours { grid-column: 2 / -1; }
}
html body .hx-office__copy { min-height: 0 !important; min-width: 0 !important; box-shadow: none !important; }
/* Services (homepage #services): same anatomy as the office cards, no photos. */
.hx-service { flex-direction: column; align-items: stretch; gap: 0; padding: 0; box-shadow: none; }
.hx-service__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 24px 0; }
.hx-service__stage { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--hx-surface); color: var(--hx-ink); font-size: .78rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.hx-service__stage--in { background: var(--hx-primary-soft); color: #0b5f5e; }
@media (max-width: 359.98px), (min-width: 640px) and (max-width: 719.98px) { .hx-service__top .hx-tile { display: none; } }
.hx-service h3 { padding: 14px 24px 0; font-family: var(--hx-display); font-size: 1.12rem; font-weight: 500; line-height: 1.3; }
.hx-service > p { margin-top: 6px; padding: 0 24px; text-wrap: pretty; }
.hx-service__more { display: grid; gap: 6px; align-content: start; margin: 14px 24px 24px; padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-service__more li { display: flex; gap: 8px; align-items: flex-start; color: var(--hx-body); font-size: .84rem; line-height: 1.5; text-wrap: pretty; }
.hx-service__more .hx-i { flex: none; margin-top: 2px; color: var(--hx-primary); }
@media (min-width: 640px) {
.hx-services { row-gap: 0; margin-bottom: -14px; }
.hx-service { display: grid; grid-row: span 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 0; margin-bottom: 14px; }
}