/* HLISTIX homepage (product-led rebuild 2026-10-07; final revision round).
 * Same visual family as the Israeli Chinese Medicine landing (il_landing/static/css/il.css V2
 * tokens): navy, action blue, clinical teal, mint, white, real product UI, purposeful motion.
 * Everything is scoped under .hx-home so no other public page changes. */

.hx-home {
  --h-navy: #203E6C;
  --h-navy-deep: #172E52;
  --h-blue: #4867F2;
  --h-blue-hover: #3552D8;
  --h-blue-light: #A9C1FF;
  --h-teal: #39B3A3;
  --h-teal-text: #1C7A6E;
  --h-mint: #8FB8A9;
  --h-mint-bright: #9FE3D6;
  --h-mint-soft: #E8F5F2;
  --h-soft-blue: #EEF3FB;
  --h-ink: #1C1E21;
  --h-body: #3A4250;
  --h-muted: #5B6270;
  --h-line: #E3E7EF;
  --h-radius: 18px;
  --h-sec: clamp(3rem, 6vw, 5rem);
  /* names used by the shared product-animation rules (home-product.css) */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --muted: var(--h-muted);
  --ink: var(--h-ink);
  --color-cta: var(--h-blue);
  --color-primary: var(--h-navy);
  background: #fff;
  color: var(--h-ink);
  overflow-x: clip;
}
/* :where() keeps these at element specificity so component rules (margins, colours) win. */
:where(.hx-home) h1, :where(.hx-home) h2, :where(.hx-home) h3 { font-family: 'DM Sans', system-ui, sans-serif; color: var(--h-navy); letter-spacing: -.01em; }
:where(.hx-home) p { margin: 0 0 .85rem; }
.hh-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .hh-wrap { padding-inline: 24px; } }

.hh-kicker { font: 700 .78rem/1.2 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--h-teal-text); margin-bottom: .75rem; }
.hh-head { max-width: 780px; margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; }
.hh-head h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.15; margin: 0 0 .75rem; }
.hh-head h2 span { color: var(--h-blue); }
.hh-lead { font-size: 1.12rem; color: var(--h-muted); }
.hh-fine { font-size: .8rem; color: var(--h-muted); line-height: 1.5; }
.hh-instead { font-size: .95rem !important; color: var(--h-muted) !important; border-left: 3px solid #E7B9A8; padding-left: .8rem; }
.hh-instead b { color: #A4553A; font-weight: 600; }

/* Buttons */
.hh-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.hh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.5rem; border-radius: 12px; font: 600 1rem 'DM Sans', sans-serif; text-decoration: none; transition: background-color .2s, transform .2s, box-shadow .2s; }
.hh-btn:focus-visible, .hh-arrow:focus-visible, .hh-rail a:focus-visible, .playctl:focus-visible { outline: 3px solid var(--h-blue); outline-offset: 3px; }
.hh-btn--primary { background: var(--h-blue); color: #fff; box-shadow: 0 10px 24px -10px rgba(72, 103, 242, .65); }
.hh-btn--primary:hover { background: var(--h-blue-hover); color: #fff; transform: translateY(-1px); }
.hh-btn--ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.hh-btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hh-btn--light { background: #fff; color: var(--h-navy); }
.hh-btn--light:hover { background: var(--h-soft-blue); color: var(--h-navy); }
.hh-arrow { font-weight: 600; color: var(--h-blue); text-decoration: none; }
.hh-arrow::after { content: ' →'; }
.hh-arrow:hover { text-decoration: underline; }
.hh-arrow--light { color: #fff; }
.hh-linkbtn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }

/* 1. Hero — copy + playable product in one desktop viewport */
.hh-hero { background: radial-gradient(120% 90% at 30% 0%, #24466f 0%, var(--h-navy) 45%, var(--h-navy-deep) 100%); color: rgba(255, 255, 255, .88); padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2rem); }
.hh-hero__grid { display: grid; gap: 1.75rem; align-items: center; max-width: 1320px; }
.hh-hero__copy { text-align: center; max-width: 760px; margin-inline: auto; }
.hh-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 700; line-height: 1.08; margin: 0 0 .9rem; }
.hh-hero h1 span { color: var(--h-blue-light); }
.hh-hero__sub { font-size: clamp(1.02rem, 1.6vw, 1.15rem); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.hh-hero__pain { font: 600 clamp(1.15rem, 2vw, 1.4rem)/1.3 'DM Sans', sans-serif; color: var(--h-mint-bright); margin: 1rem 0 .6rem !important; }
.hh-hero__line { font-size: .95rem; color: rgba(255, 255, 255, .72); }
.hh-hero .hh-cta { justify-content: center; margin-top: 1.1rem; }
.hh-hero__stage { margin: 0 auto; max-width: 900px; width: 100%; padding-block-end: 0 !important; }
.hh-hero .stage__controls { margin-block-start: .75rem; gap: .35rem; }
.hh-hero .stage__caption { color: rgba(255, 255, 255, .7); }
.hh-hero .playctl { background: #fff; color: var(--h-navy); font-size: 1rem; padding: .55rem 1.2rem; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
@media (min-width: 1100px) {
  .hh-hero__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 3rem; }
  .hh-hero__copy { text-align: left; margin: 0; }
  .hh-hero .hh-cta { justify-content: flex-start; }
}

/* Shared governed-figure component (Trust Moment + Deep Trust) */
.hx-stat { display: flex; flex-direction: column; gap: .35rem; }
.hx-stat__num { font: 700 clamp(2.3rem, 4.4vw, 3.2rem)/1 'DM Sans', sans-serif; color: var(--h-navy); font-variant-numeric: tabular-nums; letter-spacing: -.02em; display: inline-block; }
.hx-stat__label { font: 600 .98rem/1.35 'DM Sans', sans-serif; color: var(--h-navy); }
.hx-stat--word .hx-stat__num { font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.15; }
.hx-stat--word .hx-stat__label { font-weight: 400; color: var(--h-body); }
.is-arrived .hx-stat__num { animation: hh-settle .9s var(--ease) 1; }
@keyframes hh-settle { 40% { color: var(--h-teal-text); } }

/* 2. Trust Moment — strong horizontal proof layer */
.hh-band { background: linear-gradient(180deg, #F3F8FD, #EAF2FB); color: var(--h-body); padding: clamp(2.25rem, 4.5vw, 3.25rem) 0 1.4rem; border-bottom: 1px solid #DCE6F2; }
.hh-band__title { text-align: center; font-size: clamp(1.45rem, 3vw, 2.1rem); font-weight: 700; margin: 0 0 1.6rem; }
.hh-band__title span { color: var(--h-teal-text); }
.hh-band__pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .hh-band__pillars { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.hh-band__pillars li { padding: 1.15rem 1.25rem; border-radius: 14px; background: #fff; border: 1px solid #DCE6F2; border-top: 3px solid var(--h-teal); box-shadow: 0 6px 18px -12px rgba(31, 58, 95, .3); }
.hh-band__note { font-size: .74rem; color: var(--h-muted); text-align: center; margin: .6rem auto 0; }
.hh-marquee { overflow: hidden; margin-top: 1.6rem; padding: .75rem 0; border-block: 1px solid #DCE6F2; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hh-marquee__track { display: flex; width: max-content; animation: hh-marquee 150s linear infinite; }
.hh-marquee:hover .hh-marquee__track, .hh-marquee:focus .hh-marquee__track, .hh-marquee.is-paused .hh-marquee__track { animation-play-state: paused; }
.hh-marquee__list { list-style: none; display: flex; margin: 0; padding: 0; }
.hh-marquee__list li { white-space: nowrap; font: italic 500 .98rem 'DM Sans', sans-serif; color: var(--h-navy); padding-inline: 1.1rem; }
.hh-marquee__list li + li::before { content: '·'; font-style: normal; color: var(--h-mint); margin-inline: -1.1rem 1.1rem; }
@keyframes hh-marquee { to { transform: translateX(-50%); } }

/* 3. Workflow — tighter, reads as one continuous run */
.hh-flow { padding: var(--h-sec) 0 1rem; }
.hh-subnav { position: sticky; top: var(--hh-header, 72px); z-index: 20; height: 52px; display: flex; align-items: center; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-block: 1px solid var(--h-line); box-shadow: 0 8px 18px -16px rgba(31, 58, 95, .5); }
.hh-rail { list-style: none; display: flex; align-items: center; gap: .3rem; margin: 0 auto; padding: 0 16px; max-width: 1180px; width: 100%; justify-content: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hh-rail::-webkit-scrollbar { display: none; }
.hh-rail li { display: flex; align-items: center; flex: none; }
.hh-rail li + li::before { content: ''; width: 12px; height: 2px; background: var(--h-line); margin-right: .3rem; }
.hh-rail a { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: 99px; color: var(--h-navy); font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s; }
.hh-rail a span { font-size: .72rem; color: var(--h-muted); }
.hh-rail a:hover { color: var(--h-blue); }
.hh-rail a.is-current { background: var(--h-blue); color: #fff; }
.hh-rail a.is-current span { color: rgba(255, 255, 255, .85); }
@media (max-width: 899px) { .hh-rail { justify-content: flex-start; } }

.hh-flow__stages { position: relative; }
.hh-stage { padding: clamp(1.5rem, 3vw, 2.25rem) 0; scroll-margin-top: calc(var(--hh-header, 72px) + 64px); }
.hh-stage__grid { display: grid; gap: 1.5rem; align-items: center; }
/* grid items default to min-width:auto, so a wide product frame pushed copy past the screen on phones */
.hh-stage__grid > *, .hh-frag__grid > *, .hh-ai__grid > *, .hh-patient__grid > * { min-width: 0; }
@media (min-width: 980px) {
  .hh-stage__grid { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; }
  .hh-stage--flip .hh-stage__grid { grid-template-columns: 1.2fr .8fr; }
  .hh-stage--flip .hh-stage__copy { order: 2; }
}
.hh-n { display: inline-block; font: 700 .8rem 'DM Sans', sans-serif; letter-spacing: .06em; color: var(--h-teal-text); background: var(--h-mint-soft); border-radius: 99px; padding: .3rem .75rem; margin-bottom: .8rem; }
.hh-stage h3 { font-size: clamp(1.35rem, 2.8vw, 1.8rem); line-height: 1.2; margin: 0 0 .8rem; }
.hh-stage__copy p { font-size: 1.04rem; line-height: 1.6; color: var(--h-body); }
.hh-stage__copy .hh-fine { font-size: .78rem; color: var(--h-muted); }
.hh-stage__copy--center { max-width: 760px; margin: 0 auto 1.5rem; text-align: center; }
.hh-stage__copy--center .hh-instead { display: inline-block; text-align: left; }
.hh-callout { border-left: 3px solid var(--h-teal); padding-left: 1rem; font-weight: 500; color: var(--h-navy) !important; }
.hh-finish { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; padding: 0; counter-reset: f; }
.hh-finish li { counter-increment: f; display: flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 99px; background: var(--h-navy); color: #fff; font-weight: 600; font-size: .9rem; }
.hh-finish li::before { content: counter(f); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--h-teal); font-size: .72rem; }
.pm__wide { margin: 0; }
.hh-stage__vis--panel { max-width: 460px; width: 100%; justify-self: center; }
.hh-stage__vis--tall { max-width: 430px; width: 100%; justify-self: center; }
.pstage--ocean { --s1: #3A8FB8; --s2: #0E3550; }
.pstage--royal { --s1: #4867F2; --s2: #1B2F7A; }

/* 4. Patient understanding */
.hh-patient { padding: var(--h-sec) 0; background: linear-gradient(180deg, var(--h-mint-soft), #F4FAF8); }
.hh-patient .hh-head h2 span { color: var(--h-teal-text); }
.hh-patient .hh-lead { color: var(--h-navy); font-weight: 500; font-size: 1.2rem; }
.hh-patient__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1040px) { .hh-patient__grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }
.hh-patient .reveal5 { margin: 0; }
.hh-patient .reveal5__doc .hx-region { max-height: 460px; }
.hh-patient__intro { font-size: 1.04rem; color: var(--h-body); }
.hh-patient__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
@media (min-width: 640px) { .hh-patient__list { grid-template-columns: 1fr 1fr; } .hh-patient__wide { grid-column: 1 / -1; } }
.hh-patient__list li { background: #fff; border-radius: 12px; padding: .75rem .95rem; font-size: .9rem; color: #4A5260; line-height: 1.45; box-shadow: 0 2px 8px rgba(31, 58, 95, .05); }
.hh-patient__list b { display: block; color: var(--h-navy); font-size: 1rem; margin-bottom: .1rem; }
.hh-patient__foot { font-weight: 700; color: var(--h-teal-text); font-size: 1.05rem; }

/* Cropped region of a real screenshot */
.hx-region { position: relative; overflow: hidden; background: #fff; }
.hx-region img { position: absolute; max-width: none; height: auto; display: block; }

/* 5. Practitioner jobs — scannable in 3–4 seconds: titles lead, body recedes */
.hh-jobs { padding: var(--h-sec) 0; background: #FAF9F6; }
.hh-jobs__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .hh-jobs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .hh-jobs__grid { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }
  .hh-job { grid-column: span 2; } .hh-job--wide { grid-column: span 3; }
  /* a light sense of continuity A → E, not a mandatory process */
  .hh-job:not(:nth-child(3)):not(:last-child)::after { content: '→'; position: absolute; right: -1.15rem; top: 96px; color: #B9C2D3; font-size: 1rem; z-index: 1; }
}
.hh-job { position: relative; background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-radius); display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(31, 58, 95, .04); }
.hh-job__shot { background: #F5F7FA; border-bottom: 1px solid var(--h-line); padding: 14px 14px 0; border-radius: var(--h-radius) var(--h-radius) 0 0; overflow: hidden; }
.hh-job__shot .hx-region { border-radius: 10px 10px 0 0; border: 1px solid #DDE3EC; border-bottom: 0; max-height: 190px; }
.hh-job__body { padding: 1.2rem 1.35rem 1.35rem; position: relative; flex: 1; display: flex; flex-direction: column; }
.hh-job__letter { position: absolute; top: -18px; right: 1.1rem; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--h-navy); color: #fff; font: 700 .95rem 'DM Sans', sans-serif; box-shadow: 0 0 0 4px #fff; }
.hh-job h3 { font-size: clamp(1.3rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.2; color: var(--h-navy-deep); margin: 0 0 .5rem; }
.hh-job p { font-size: .9rem; color: #6A7180; line-height: 1.5; }
.hh-job__outcome { margin-top: auto !important; padding-top: .7rem; border-top: 1px dashed var(--h-line); color: var(--h-navy) !important; font-weight: 500; font-size: .93rem !important; }
.hh-job__outcome span { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--h-teal-text); font-weight: 700; }

/* 6. Fragmented → one workspace */
.hh-frag { padding: var(--h-sec) 0; }
.hh-frag__grid { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 960px) { .hh-frag__grid { grid-template-columns: 1.1fr auto .9fr; gap: 1.75rem; align-items: center; } }
.hh-frag__before, .hh-frag__after { border-radius: var(--h-radius); padding: clamp(1.25rem, 3vw, 1.75rem); }
.hh-frag__before { background: #F1F1F3; border: 1px dashed #C4C8D0; }
.hh-frag__after { background: var(--h-navy); color: rgba(255, 255, 255, .88); }
.hh-frag h3 { font-size: 1.15rem; margin: 0 0 1rem; }
.hh-frag__after h3 { color: #fff; }
.hh-frag__after p { margin: 1.25rem 0 0; font-size: .95rem; }
.hh-windows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
@media (min-width: 560px) { .hh-windows { grid-template-columns: repeat(3, 1fr); } }
.hh-win { background: #fff; border: 1px solid #D3D7DF; border-radius: 8px; padding: 0 .65rem .55rem; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .12); transform: rotate(calc((var(--i) - 3) * .9deg)); display: flex; flex-direction: column; min-width: 0; }
.hh-win__bar { display: flex; gap: 3px; margin: 0 -.65rem .45rem; padding: .3rem .5rem; background: #ECEEF2; border-radius: 8px 8px 0 0; }
.hh-win__bar i { width: 6px; height: 6px; border-radius: 50%; background: #C3C8D2; }
.hh-win b { font-size: .84rem; color: #3D4452; }
.hh-win span { font-size: .74rem; color: #8A909C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-win--summary { border-style: dashed; }
.hh-win--doc span, .hh-win--summary span { color: #A4553A; }
.hh-friction { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.hh-friction li { font-size: .82rem; color: #A4553A; background: #FBEDE7; border-radius: 99px; padding: .3rem .7rem; }
.hh-frag__arrow { justify-self: center; align-self: center; color: var(--h-blue); }
@media (max-width: 959px) { .hh-frag__arrow { transform: rotate(90deg); } }
.hh-orbit { position: relative; display: grid; grid-template-areas: ". n ." "w c e" ". s ."; grid-template-columns: 1fr auto 1fr; gap: .9rem .6rem; align-items: center; justify-items: center; padding: .5rem 0; }
.hh-orbit::before { content: ''; position: absolute; inset: 50% 18% auto; height: 0; border-top: 1px dashed rgba(255, 255, 255, .25); }
.hh-orbit__core { grid-area: c; padding: .9rem 1.4rem; border-radius: 99px; background: var(--h-teal); color: #fff; font: 700 1.05rem 'DM Sans', sans-serif; box-shadow: 0 0 0 8px rgba(57, 179, 163, .18); position: relative; }
.hh-orbit__item { padding: .45rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font-size: .86rem; color: #fff; text-align: center; position: relative; }
.hh-orbit__item--n { grid-area: n; } .hh-orbit__item--e { grid-area: e; } .hh-orbit__item--s { grid-area: s; } .hh-orbit__item--w { grid-area: w; }
.hh-frag__position { max-width: 760px; margin: 2rem auto 0; text-align: center; font-size: 1.08rem; color: var(--h-body); }
.hh-frag__position b { color: var(--h-navy); }

/* 7. General AI vs HLISTIX */
.hh-ai { padding: var(--h-sec) 0; background: linear-gradient(180deg, #F7F9FD, #fff); }
.hh-ai__grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .hh-ai__grid { grid-template-columns: .85fr 1.15fr; align-items: stretch; } }
.hh-ai__col { border-radius: var(--h-radius); padding: clamp(1.25rem, 3vw, 2rem); }
.hh-ai__col h3 { font-size: 1.2rem; margin: 0 0 1rem; }
.hh-ai__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hh-ai__col li { display: flex; gap: .6rem; font-size: .98rem; line-height: 1.45; }
.hh-ai__col--gen { background: #F4F4F6; color: #4A5260; }
.hh-ai__col--gen h3 { color: #4A5260; }
.hh-ai__col--gen li::before { content: '–'; color: #9AA1AD; }
.hh-ai__col--hx { background: #fff; border: 2px solid var(--h-blue); box-shadow: 0 20px 50px -24px rgba(72, 103, 242, .45); }
.hh-ai__col--hx li::before { content: '✓'; color: var(--h-teal-text); font-weight: 700; }
.hh-ai__shot { margin-top: 1.25rem; }
.hh-chat { margin-top: 1.5rem; display: grid; gap: .5rem; }
.hh-chat__q { justify-self: end; background: #DADDE3; border-radius: 14px 14px 4px 14px; padding: .5rem .8rem; font-size: .85rem; color: #4A5260; }
.hh-chat__a { height: 12px; border-radius: 6px; background: #E4E6EA; width: 90%; }
.hh-chat__a--short { width: 60%; }
.hh-statement { margin: 2.5rem 0 0 !important; padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.25rem, 4vw, 3rem); border-radius: var(--h-radius); background: linear-gradient(120deg, var(--h-navy), var(--h-navy-deep)); color: rgba(255, 255, 255, .82); text-align: center; font: 500 clamp(1.3rem, 3vw, 2rem)/1.3 'DM Sans', sans-serif; box-shadow: 0 24px 50px -30px rgba(23, 46, 82, .8); }
.hh-statement b { color: #fff; font-weight: 700; display: inline; }

/* 8. Deep trust — same stat component, light context */
.hh-trust { padding: var(--h-sec) 0; }
.hh-trust__grid { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .hh-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .hh-trust__grid { grid-template-columns: repeat(3, 1fr); }
  .hh-trust__card--lead { grid-row: span 2; }
  .hh-trust__card--control { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
  .hh-trust__card--control h3, .hh-trust__card--control p { margin: 0; }
}
.hh-trust__card { margin: 0; background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-radius); padding: 1.35rem; display: flex; flex-direction: column; gap: .5rem; }
.hh-trust__card h3 { font-size: 1.1rem; margin: 0 0 .25rem; }
.hh-trust__card p { font-size: .94rem; color: #4A5260; line-height: 1.5; margin: 0; }
.hx-stat--card { background: linear-gradient(180deg, #F3F8FD, #EAF2FB); border-color: #DCE6F2; border-top: 3px solid var(--h-teal); }
.hx-stat--card p { color: var(--h-body); }
.hh-trust__shot { border-radius: 12px; overflow: hidden; border: 1px solid #DDE3EC; background: #F5F7FA; margin-bottom: .5rem; }
.hh-trust__shot > img { display: block; width: 100%; height: auto; }
.hh-trust__card--lead { background: var(--h-soft-blue); }
.hh-trust__card--control { background: var(--h-mint-soft); border-color: #CFE8E2; }
.hh-trust__card--control h3 { color: var(--h-teal-text); }

/* 9. Clinical case proof — one question, five short answers */
.hh-proof { padding: var(--h-sec) 0; background: #FAF9F6; scroll-margin-top: 60px; }
.hh-proof:focus { outline: none; }
.hh-case { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1.4rem; max-width: 1000px; }
.hh-case__step { position: relative; background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-radius); padding: 1.2rem 1.3rem; display: grid; gap: 1rem; align-items: center; box-shadow: 0 2px 8px rgba(31, 58, 95, .04); }
@media (min-width: 760px) { .hh-case__step { grid-template-columns: .85fr 1.15fr; gap: 1.75rem; padding: 1.1rem 1.4rem; } }
.hh-case__step:not(:last-child)::after { content: '↓'; position: absolute; left: 50%; bottom: -1.3rem; transform: translateX(-50%); color: var(--h-blue); font-weight: 700; font-size: 1.1rem; }
.hh-case__shot .hx-region { max-height: 240px; }
.hh-case__n { position: absolute; top: -12px; left: 1rem; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--h-blue); color: #fff; font: 700 .8rem 'DM Sans', sans-serif; }
.hh-case__label { font: 700 .72rem 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--h-teal-text); margin: .35rem 0 .3rem !important; }
.hh-case__text h3 { font-size: 1.08rem; line-height: 1.25; margin: 0 0 .4rem; }
.hh-case__text p:last-child { font-size: .88rem; color: #4A5260; line-height: 1.45; margin: 0; }
.hh-case__shot { border-radius: 10px; overflow: hidden; border: 1px solid #DDE3EC; }
.js-steps .hh-case__step { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 140ms); }
.js-steps .is-in .hh-case__step { opacity: 1; transform: none; }

/* Practitioner proof (renders only with genuine entries) */
.hh-voices { padding: var(--h-sec) 0; }
.hh-voices__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .hh-voices__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.hh-voice { background: var(--h-soft-blue); border-radius: var(--h-radius); padding: 1.5rem; }
.hh-voice blockquote { margin: 0 0 .75rem; font-size: 1.05rem; color: var(--h-navy); }
.hh-voice__who { font-size: .9rem; color: var(--h-muted); margin: 0; }

/* 10. Payoff */
.hh-payoff { background: radial-gradient(120% 90% at 70% 0%, #24466f 0%, var(--h-navy) 45%, var(--h-navy-deep) 100%); color: rgba(255, 255, 255, .88); padding: var(--h-sec) 0; }
.hh-payoff .hh-wrap { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1040px) { .hh-payoff .hh-wrap { grid-template-columns: .8fr 1.2fr; } }
.hh-payoff h2 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; }
.hh-payoff p { font-size: 1.08rem; line-height: 1.6; }
.hh-payoff .hh-cta { margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .hh-marquee__track { animation: none; }
  .is-arrived .hx-stat__num { animation: none; }
  .js-steps .hh-case__step { opacity: 1; transform: none; transition: none; }
  .hh-btn { transition: none; }
}
.hh-win:nth-child(even) { margin-top: 4px; }

/* ── Final product-led round (2026-10-08) ─────────────────────────────── */
/* Colour roles: navy = authority/workspace, royal blue = action/active, mint = trust/evidence/
   practitioner control, purple = sparing knowledge accent, orange = friction ("Instead of…") only. */
.hh-control { color: var(--h-teal-text) !important; background: var(--h-mint-soft); border-left: 3px solid var(--h-teal); padding: .7rem .9rem; border-radius: 0 10px 10px 0; }
.hh-control b { color: var(--h-teal-text); }

/* See it in action: seven steps */
.hh-case__shot--narrow { max-width: 360px; width: 100%; justify-self: center; }
.hh-case__shot--narrow .hx-region, .hh-case__step .hh-case__shot .hx-region { max-height: 340px; }
.hh-case__note { font-size: .8rem !important; color: var(--h-muted) !important; border-left: 3px solid var(--h-teal); padding-left: .7rem; margin-top: .6rem !important; }
.hh-case__text p:not(:last-child) { font-size: .9rem; color: #4A5260; line-height: 1.5; margin: 0 0 .55rem; }
.hh-case__text .hh-control { font-size: .9rem; margin-top: .4rem; }
@media (min-width: 760px) { .hh-case__step--decide { grid-template-columns: .7fr 1.3fr; } }
.hh-decide { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
@media (min-width: 560px) { .hh-decide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hh-decide__opt { border: 1px solid var(--h-line); border-radius: 12px; padding: .75rem; display: grid; gap: .5rem; align-content: start; background: #FBFCFE; }
.hh-decide__opt p { font-size: .8rem !important; color: var(--h-muted) !important; margin: 0 !important; line-height: 1.4; }
.hh-decide__tag { font: 700 .74rem 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.hh-decide__opt--add { border-color: #C9D3FB; } .hh-decide__opt--add .hh-decide__tag { color: var(--h-blue); }
.hh-decide__opt--skip .hh-decide__tag { color: var(--h-muted); }
.hh-decide__opt--write { border-color: #CFE8E2; } .hh-decide__opt--write .hh-decide__tag { color: var(--h-teal-text); }
.hh-decide__shot { border-radius: 8px; overflow: hidden; border: 1px solid #DDE3EC; }
.hh-decide__skip { display: grid; place-items: center; min-height: 40px; border: 1.5px dashed #C4C8D0; border-radius: 8px; color: #8A909C; font-size: .82rem; }
.hh-caps { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .9rem; }
.hh-caps li { font-size: .86rem; color: var(--h-navy); display: flex; gap: .4rem; }
.hh-caps li::before { content: '✓'; color: var(--h-teal-text); font-weight: 700; }
.hh-case__flow { display: grid; gap: .4rem; justify-items: center; }
.hh-case__flow .hh-case__shot { width: 100%; }
.hh-case__down { color: var(--h-blue); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.hh-case__shot--bar { position: relative; max-width: 420px; }
.hh-pulse { position: absolute; left: 53.5%; top: 19%; width: 39.6%; height: 47%; border: 2px solid var(--h-blue); border-radius: 8px; opacity: 0; pointer-events: none; }
.is-in .hh-pulse { animation: hh-pulse 2.6s var(--ease) 1.2s 2; }
@keyframes hh-pulse { 0% { opacity: 0; transform: scale(1.12); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .is-in .hh-pulse { animation: none; } }
/* phones: the four orbit labels fit beside "The case" without crossing the screen edge */
@media (max-width: 430px) { .hh-orbit { gap: .8rem .35rem; } .hh-orbit__item { font-size: .78rem; padding: .4rem .5rem; } .hh-orbit__core { padding: .8rem 1rem; } }