/* ============================================================
   Healthcare — the flagship industry page.
   Borrowed principles, not borrowed pages:
   · Glass Health — the product sits in the hero; capabilities as a
     bento with one deep card; a dark compliance band with tabs.
   · fin.ai — very large serif at tight leading, numbered narrative,
     mono labels on grid-paper charts, one strong accent.
   Everything is drawn in the existing 0 1 α palette.
   ============================================================ */

:root{
  --hc-deep:#0E3B33;          /* pine: the deep card and the compliance band */
  --hc-deep-2:#0A2C26;
  --hc-light:#EEF4F0;         /* the light bento card */
  --hc-light-line:#D6E4DA;
  --hc-grid:rgba(20,36,31,.06);
  --c-pos:#2F4FE0;            /* validated pair, see industry.css */
  --c-neg:#C2611F;
  --c-mute:#D9DEDA;
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="dark"]{
  --hc-light:#131A16;
  --hc-light-line:#25302A;
  --hc-grid:rgba(242,244,241,.06);
  --c-pos:#6E86EE;
  --c-neg:#C87F42;
  --c-mute:#2C322D;
}

/* ---------- type: fin-scale serif ---------- */
.hc-display{font-family:var(--d);font-weight:400;letter-spacing:-.025em;line-height:.94;
  font-size:clamp(3.1rem,7.6vw,6.6rem);color:var(--ink);text-wrap:balance}
.hc-display em{font-style:italic;color:var(--c-pos)}
.hc-h2{font-family:var(--d);font-weight:400;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(2.3rem,5.2vw,4.3rem);color:var(--ink);text-wrap:balance}
.hc-h2 em{font-style:italic;color:var(--c-pos)}
.hc-kicker{font-family:var(--m);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.hc-kicker b{color:var(--accent-text);font-weight:500}
.hc-lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--soft);line-height:1.62;max-width:46ch}
.hc-sec{padding-block:clamp(4.5rem,9vw,8rem)}

/* ---------- 1 · hero: statement + live product, photo beside ---------- */
.hc-hero{padding-top:clamp(7.2rem,11vw,9.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.hc-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:stretch}
@media(max-width:980px){.hc-hero-grid{grid-template-columns:1fr}}
.hc-tag{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--s);font-size:.8rem;
  color:var(--soft);margin-bottom:1.6rem}
.hc-tag i{font-style:normal;font-family:var(--s);font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.28rem .6rem;border-radius:100px;background:var(--hc-deep);color:#fff}
.hc-hero .hc-lead{margin-top:1.5rem}
.hc-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.hc-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--s);font-size:.95rem;font-weight:600;
  padding:.8rem 1.35rem;border-radius:10px;border:1px solid var(--ink);transition:transform .2s,background .2s,color .2s}
.hc-btn.fill{background:var(--ink);color:var(--cream)}
.hc-btn.fill:hover{transform:translateY(-2px)}
.hc-btn.line{color:var(--ink);background:transparent;border-color:var(--line)}
.hc-btn.line:hover{border-color:var(--ink)}
.hc-btn .a{transition:transform .2s}
.hc-btn:hover .a{transform:translateX(3px)}

/* the intake panel — the product, in the hero */
.hc-intake{margin-top:2.4rem;border:1px solid var(--line);border-radius:18px;background:var(--paper);
  box-shadow:0 30px 60px -40px rgba(14,30,25,.35);overflow:hidden}
.hc-intake-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.1rem;border-bottom:1px solid var(--line)}
.hc-intake-top .hc-kicker{font-size:.66rem}
.hc-live{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--m);font-size:.66rem;color:var(--accent-text)}
.hc-live::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:hcPulse 1.8s ease-in-out infinite}
@keyframes hcPulse{50%{opacity:.25}}
.hc-intake-body{padding:1.1rem 1.1rem .4rem;min-height:12.2rem}
.hc-msg{font-family:var(--s);font-size:.98rem;line-height:1.5;color:var(--ink);min-height:1.5em}
.hc-msg .caret{display:inline-block;width:2px;height:1.05em;background:var(--ink);vertical-align:-.15em;
  margin-left:1px;animation:hcPulse 1s steps(1) infinite}
.hc-step{display:flex;gap:.7rem;align-items:baseline;margin-top:.75rem;font-family:var(--s);font-size:.86rem;
  color:var(--soft);line-height:1.45;opacity:0;transform:translateY(4px);transition:opacity .45s,transform .45s}
.hc-step.on{opacity:1;transform:none}
.hc-step b{font-family:var(--m);font-size:.66rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--faint);flex:none;width:6.2rem}
.hc-step .v{color:var(--ink)}
.hc-step .v.ok{color:var(--accent-text);font-weight:600}
.hc-intake-input{display:flex;align-items:center;gap:.5rem;margin:.6rem 1.1rem 1.1rem;padding:.55rem .55rem .55rem .95rem;
  border:1px solid var(--line);border-radius:12px;font-family:var(--s);font-size:.9rem;color:var(--faint)}
.hc-intake-input>span:first-child{flex:1;min-width:0}
.hc-ibtn{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;color:var(--soft)}
.hc-ibtn.send{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.hc-ibtn svg{width:14px;height:14px}
.hc-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:.8rem}
@media(max-width:560px){.hc-chips{grid-template-columns:1fr}}
.hc-chip{text-align:left;font-family:var(--s);font-size:.78rem;line-height:1.4;color:var(--soft);
  padding:.7rem .8rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;
  transition:border-color .2s,color .2s}
.hc-chip:hover,.hc-chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.hc-note{margin-top:.7rem;font-family:var(--m);font-size:.64rem;color:var(--faint)}

.hc-photo{position:relative;border-radius:22px;overflow:hidden;min-height:34rem;height:100%;background:var(--line)}
@media(max-width:980px){.hc-photo{height:auto;aspect-ratio:4/5;min-height:0}}
.hc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hc-photo-cap{position:absolute;left:1rem;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem}
.hc-photo-cap .row{display:flex;flex-wrap:wrap;gap:.4rem}
.hc-pill{font-family:var(--s);font-size:.72rem;font-weight:600;color:#fff;padding:.4rem .7rem;border-radius:100px;
  background:rgba(8,20,17,.55);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hc-pill.strong{text-transform:uppercase;letter-spacing:.07em;font-size:.64rem}

/* ---------- 2 · stat ribbon (kept from the live page) ---------- */
.hc-ribbon{border-block:1px solid var(--line);overflow:hidden;background:var(--paper)}
.hc-ribbon-track{display:flex;width:max-content;animation:hcMarquee 60s linear infinite}
.hc-ribbon:hover .hc-ribbon-track{animation-play-state:paused}
.hc-rib{display:flex;align-items:baseline;gap:.55rem;padding:1.15rem 2rem;white-space:nowrap;
  font-family:var(--s);font-size:.86rem;color:var(--soft);border-right:1px solid var(--line)}
.hc-rib b{font-family:var(--d);font-weight:400;font-size:1.5rem;color:var(--ink);letter-spacing:-.01em}
@keyframes hcMarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hc-ribbon-track{animation:none;flex-wrap:wrap;width:100%}}

/* ---------- 3 · the research, on grid paper ---------- */
.hc-research{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.hc-research{grid-template-columns:1fr}}
/* the paragraphs sit beside the headline, starting level with its first line */
.hc-research-copy{padding-top:2.55rem}
@media(max-width:900px){.hc-research-copy{padding-top:0}}
.hc-research-copy p{font-size:clamp(1.3rem,2vw,1.62rem);color:var(--soft);line-height:1.5;max-width:34ch}
.hc-research-copy p+p{margin-top:1.3rem}
.hc-research-copy p b{color:var(--ink);font-weight:600}
.hc-paper-wide{margin-top:clamp(3rem,6vw,4.5rem)}
.hc-paper{border:1px solid var(--line);border-radius:16px;padding:clamp(1.2rem,2.6vw,1.8rem);background:
  linear-gradient(var(--hc-grid) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,var(--hc-grid) 1px,transparent 1px) 0 0/22px 22px,var(--paper)}
.hc-paper-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.hc-paper svg{display:block;width:100%;height:auto;overflow:visible}
.c-lbl{font-family:var(--m);font-size:11px;fill:var(--soft)}
.c-val{font-family:var(--d);font-size:30px;fill:var(--ink)}
.c-tk{font-family:var(--m);font-size:10px;fill:var(--faint)}
.c-ln{stroke:var(--line);stroke-width:1}
.c-zero{stroke:var(--ink);stroke-width:1;opacity:.35}
.c-grow{transform-origin:var(--ox) center;transform:scaleX(1);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.rv:not(.in) .c-grow{transform:scaleX(.001)}
@media(prefers-reduced-motion:reduce){.rv:not(.in) .c-grow{transform:none}}

/* ---------- 4 · numbered narrative (the challenges) ---------- */
.hc-num{border-top:1px solid var(--line);padding-block:clamp(2.8rem,5.5vw,4.4rem);
  display:grid;grid-template-columns:7rem 1.1fr 1fr;gap:clamp(1.2rem,3.5vw,3.5rem);align-items:start}
@media(max-width:900px){.hc-num{grid-template-columns:3.6rem 1fr}.hc-num .hc-answer{grid-column:2}}
.hc-num-n{font-family:var(--d);font-size:clamp(2.6rem,5vw,4.4rem);line-height:.85;color:var(--faint)}
.hc-num h3{font-family:var(--d);font-weight:400;font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1;
  letter-spacing:-.02em;max-width:16ch;text-wrap:balance}
.hc-num p{margin-top:1.1rem;font-size:clamp(1.12rem,1.5vw,1.3rem);color:var(--soft);line-height:1.6;max-width:40ch}
.hc-answer{border-left:2px solid var(--c-pos);padding-left:clamp(1.1rem,2vw,1.5rem);padding-top:.4rem}
.hc-answer span{font-family:var(--m);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-pos)}
.hc-answer p{margin-top:.7rem;color:var(--ink)}

/* ---------- 5 · the platform, as a bento ---------- */
.hc-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;margin-top:clamp(2rem,4vw,3rem)}
.hc-card{border-radius:18px;padding:clamp(1.3rem,2.6vw,1.9rem);background:var(--hc-light);
  border:1px solid var(--hc-light-line);display:flex;flex-direction:column;min-height:15rem}
.hc-card h3{font-family:var(--d);font-weight:400;font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.05;letter-spacing:-.01em}
.hc-card p{margin-top:.8rem;font-size:clamp(1.06rem,1.35vw,1.2rem);color:var(--soft);line-height:1.55;max-width:40ch}
.hc-card .hc-kicker{margin-bottom:.9rem}
.hc-card-fig{margin-top:auto;padding-top:1.2rem;display:flex;align-items:baseline;gap:.6rem}
.hc-card-fig b{font-family:var(--d);font-weight:400;font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:.9;color:var(--ink)}
.hc-card-fig span{font-family:var(--s);font-size:.96rem;color:var(--soft);line-height:1.4;max-width:16ch}
.hc-card.deep{background:var(--hc-deep);border-color:var(--hc-deep);color:#fff;position:relative;overflow:hidden}
.hc-card.deep::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);right:-240px;top:-260px}
.hc-card.deep>*{position:relative}
.hc-card.deep h3,.hc-card.deep .hc-card-fig b{color:#fff}
.hc-card.deep p,.hc-card.deep .hc-card-fig span{color:rgba(255,255,255,.72)}
.hc-card.deep .hc-kicker{color:rgba(255,255,255,.55)}
.hc-card.deep .hc-kicker b{color:#9FE0C4}
.span-4{grid-column:span 4}.span-2{grid-column:span 2}.span-3{grid-column:span 3}
@media(max-width:900px){.hc-bento{grid-template-columns:1fr 1fr}.span-4,.span-3{grid-column:span 2}.span-2{grid-column:span 1}}
@media(max-width:560px){.hc-bento{grid-template-columns:1fr}.span-4,.span-3,.span-2{grid-column:span 1}}

/* time to care — a comparison drawn like a benchmark */
.hc-ttc{margin-top:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.hc-ttc-row{display:grid;grid-template-columns:7.8rem 1fr 4rem;align-items:center;gap:.8rem}
.hc-ttc-row span{font-family:var(--m);font-size:.82rem;color:rgba(255,255,255,.7)}
.hc-ttc-row b{font-family:var(--s);font-size:1rem;font-weight:700;color:#fff;text-align:right}
.hc-ttc-bar{height:12px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.hc-ttc-bar i{display:block;height:100%;border-radius:4px;transform-origin:left center;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.rv:not(.in) .hc-ttc-bar i{transform:scaleX(.001)}
.hc-ttc-bar i.er{background:rgba(255,255,255,.35)}
.hc-ttc-bar i.us{background:#9FE0C4}
.hc-word{display:inline-block;color:#9FE0C4;font-style:italic;transition:opacity .22s,transform .22s}

/* the three platforms, with their real photography */
.hc-plats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:860px){.hc-plats{grid-template-columns:1fr}}
.hc-plat-img{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--line)}
.hc-plat-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hc-plat:hover .hc-plat-img img{transform:scale(1.04)}
.hc-plat h3{margin-top:1.1rem;font-family:var(--d);font-weight:400;font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:1.08}
.hc-plat p{margin-top:.6rem;font-size:clamp(1.08rem,1.4vw,1.24rem);color:var(--soft);line-height:1.55}
.hc-plat .hc-kicker{display:block;margin-top:.8rem}

/* ---------- leaders + point of view ---------- */
.hc-pov{font-family:var(--d);font-weight:400;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.08;
  letter-spacing:-.015em;max-width:24ch;color:var(--ink);text-wrap:balance}
.hc-pov em{font-style:italic;color:var(--c-pos)}
.hc-pov-by{margin-top:1.4rem;font-family:var(--m);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.hc-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.hc-two{grid-template-columns:1fr}}
.hc-two p{font-size:clamp(1.2rem,1.7vw,1.42rem);color:var(--soft);line-height:1.6;max-width:42ch}
.hc-two p+p{margin-top:1rem}

/* ---------- the compliance band (dark, with tabs) ---------- */
.hc-band{background:var(--hc-deep);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(4.5rem,9vw,7.5rem)}
.hc-band::before,.hc-band::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.07);pointer-events:none}
.hc-band::before{width:900px;height:900px;left:-320px;top:-420px}
.hc-band::after{width:700px;height:700px;right:-260px;bottom:-420px}
.hc-band .wrap{position:relative}
.hc-band-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:end}
@media(max-width:900px){.hc-band-grid{grid-template-columns:1fr}}
.hc-band .hc-h2{color:#fff}
.hc-band .hc-h2 em{color:#9FE0C4}
.hc-band .hc-lead{color:rgba(255,255,255,.72);margin-top:1.3rem}
.hc-tabs{list-style:none;border-top:1px solid rgba(255,255,255,.16)}
.hc-tab{border-bottom:1px solid rgba(255,255,255,.16)}
.hc-tab button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;cursor:pointer;padding:1.15rem 0;text-align:left;
  font-family:var(--s);font-size:1.02rem;font-weight:600;color:rgba(255,255,255,.5);transition:color .2s}
.hc-tab button:hover,.hc-tab.open button{color:#fff}
.hc-tab button i{font-style:normal;font-family:var(--m);font-size:.7rem;color:rgba(255,255,255,.4)}
.hc-tab-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.hc-tab.open .hc-tab-body{grid-template-rows:1fr}
.hc-tab-body>div{overflow:hidden}
.hc-tab-items{display:flex;flex-wrap:wrap;gap:.45rem;padding-bottom:1.2rem}
.hc-tab-items span{font-family:var(--s);font-size:.82rem;color:rgba(255,255,255,.88);padding:.4rem .75rem;
  border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.hc-badges{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.16)}
.hc-badges span{font-family:var(--m);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hc-badges span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#9FE0C4;
  margin-right:.6rem;vertical-align:.12em}

/* ---------- where we help ---------- */
.hc-help{list-style:none;margin-top:clamp(1.8rem,3.5vw,2.6rem);border-top:1px solid var(--line)}
.hc-help a{display:grid;grid-template-columns:1fr 1.2fr auto;gap:1rem 2rem;align-items:baseline;
  padding:clamp(1.2rem,2.4vw,1.7rem) 0;border-bottom:1px solid var(--line);transition:padding-left .3s}
.hc-help a:hover{padding-left:.6rem}
@media(max-width:760px){.hc-help a{grid-template-columns:1fr}}
.hc-help-name{font-family:var(--d);font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.1}
.hc-help-what{font-size:.95rem;color:var(--soft);line-height:1.6}
.hc-help-go{font-family:var(--m);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text);white-space:nowrap}

/* ---------- closing card, portrait tiles around the line ---------- */
.hc-close{position:relative;border:1px solid var(--line);border-radius:28px;background:var(--hc-light);
  padding:clamp(3rem,7vw,5.5rem) clamp(1.4rem,4vw,3rem);text-align:center;overflow:hidden}
.hc-close .hc-h2{max-width:14ch;margin-inline:auto}
.hc-close .hc-lead{margin:1.2rem auto 0}
.hc-close .hc-cta{justify-content:center}
.hc-tile{position:absolute;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:18px;overflow:hidden;
  border:3px solid var(--paper);box-shadow:0 18px 30px -16px rgba(14,30,25,.45)}
.hc-tile img{width:100%;height:100%;object-fit:cover}
.hc-tile.t1{left:5%;top:14%;transform:rotate(-4deg)}
.hc-tile.t2{left:9%;bottom:14%;transform:rotate(3deg)}
.hc-tile.t3{right:6%;top:12%;transform:rotate(4deg)}
.hc-tile.t4{right:9%;bottom:16%;transform:rotate(-3deg)}
@media(max-width:860px){.hc-tile{display:none}}

/* ============================================================
   Colour pass: the same content, organised into coloured cards.
   Each idea gets its own hue: coral for the human cost, blue for
   what we build, violet for trust, amber for scale, mint for care.
   ============================================================ */
:root{--hc-mint:#EAF5EF;--hc-coral:#E2674A;--hc-blue:#3F6FE0;--hc-violet:#7556D8;--hc-amber:#C98A10}
.hx2-head{max-width:62rem}
.hx2-head .hc-h2{margin-top:1.1rem}
.hx2-src{margin-top:1rem;font-family:var(--m);font-size:.72rem;letter-spacing:.04em;color:var(--faint)}

/* hero: set on a soft mint canvas, with two quiet colour shapes behind the photo */
.hc-hero{position:relative;overflow:hidden;background:var(--hc-mint);border-radius:0 0 44px 44px;isolation:isolate}
.hc-hero::before{content:'';position:absolute;z-index:-1;width:min(620px,70vw);aspect-ratio:1;border-radius:50%;background:#FFDCCF;right:-8%;top:-18%}
.hc-hero::after{content:'';position:absolute;z-index:-1;width:min(380px,50vw);aspect-ratio:1;border-radius:50%;background:#DCE6FF;left:-6%;bottom:-22%}
:root[data-theme="dark"] .hc-hero{background:#10201B}
:root[data-theme="dark"] .hc-hero::before{background:#3A2019}:root[data-theme="dark"] .hc-hero::after{background:#18213A}
.hc-photo{box-shadow:0 40px 80px -40px rgba(14,59,51,.45)}
.hc-intake{box-shadow:0 30px 60px -30px rgba(14,59,51,.35);border-color:transparent}

/* the ribbon: a dark band, numbers in mint */
.hc-ribbon{background:var(--hc-deep);border:0;margin-top:clamp(1.5rem,3vw,2.2rem)}
.hc-rib{color:rgba(255,255,255,.7);border-right-color:rgba(255,255,255,.12);padding:1.3rem 2.2rem}
.hc-rib b{color:#7FD6B4;font-size:1.9rem}

/* 01 · the outlook: two numbers and the rules, as tiles */
.hx2-duel{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:clamp(.8rem,1.8vw,1.2rem);margin-top:clamp(2.2rem,4.5vw,3.2rem)}
@media(max-width:980px){.hx2-duel{grid-template-columns:1fr 1fr}.hx2-rules{grid-column:1/-1}}
@media(max-width:560px){.hx2-duel{grid-template-columns:1fr}}
.hx2-num{border-radius:28px;padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;min-height:300px}
.hx2-num.neg{--c:var(--hc-coral);background:#FFE6DD}.hx2-num.pos{--c:var(--hc-blue);background:#E3EBFF}
.hx2-tag{font-family:var(--m);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--c,#7FD6B4)}
.hx2-num b{margin-top:auto;font-family:var(--d);font-weight:400;font-size:clamp(5rem,10vw,9rem);line-height:.9;letter-spacing:-.04em;color:var(--c)}
.hx2-num p{margin-top:.8rem;font-size:1.06rem;color:var(--soft);line-height:1.5;max-width:22ch}
.hx2-rules{border-radius:28px;padding:clamp(1.4rem,3vw,2.2rem);background:var(--hc-deep);color:#fff;display:flex;flex-direction:column;gap:.9rem}
.hx2-rule{display:flex;flex-direction:column;padding:1rem 1.1rem;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.hx2-rule b{font-family:var(--d);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);color:#7FD6B4;line-height:1.05}
.hx2-rule span{font-size:.92rem;color:rgba(255,255,255,.72)}
.hx2-rules p{margin-top:auto;font-size:1.02rem;line-height:1.5;color:rgba(255,255,255,.85)}

/* 02 · three challenges: the problem on colour, our answer on white */
.hx2-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.8vw,1.2rem);margin-top:clamp(2.2rem,4.5vw,3.2rem)}
@media(max-width:980px){.hx2-trio{grid-template-columns:1fr}}
.hx2-ch{border-radius:28px;overflow:hidden;display:flex;flex-direction:column;background:var(--paper);box-shadow:0 24px 50px -36px rgba(14,30,25,.4);
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hx2-ch:hover{transform:translateY(-5px)}
.hx2-ch-top{background:var(--t);padding:clamp(1.4rem,2.8vw,2rem);min-height:250px}
.hx2-ch-n{font-family:var(--d);font-style:italic;font-size:3.4rem;line-height:.9;color:var(--c)}
.hx2-ch h3{margin-top:.8rem;font-family:var(--d);font-weight:400;font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink);max-width:13ch}
.hx2-ch-top p{margin-top:.8rem;font-size:1.02rem;line-height:1.5;color:var(--soft)}
.hx2-ch-bot{padding:clamp(1.3rem,2.6vw,1.8rem);display:flex;flex-direction:column;flex:1}
.hx2-ch-bot>span{font-family:var(--m);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--c)}
.hx2-ch h4{margin-top:.5rem;font-family:var(--s);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:var(--ink)}
.hx2-ch-bot p{margin-top:.4rem;font-size:1rem;line-height:1.5;color:var(--soft)}
.hx2-ch-bot>b{margin-top:auto;padding-top:1.2rem;display:flex;align-items:baseline;gap:.6rem;font-size:.95rem;font-weight:600;color:var(--soft)}
.hx2-ch-bot>b i{font-style:normal;font-family:var(--d);font-weight:400;font-size:2.8rem;line-height:.9;color:var(--c)}

/* 03 · the bento, in colour */
.hc-card.tint{background:var(--t);border-color:transparent}
.hc-card.tint .hc-kicker{color:var(--c)}
.hc-card.tint .hc-card-fig b{color:var(--c)}
.hc-card.deep{background:linear-gradient(150deg,#0E3B33,#0A2C26)}
.hc-plat-img{position:relative}
.hc-plat-tag{position:absolute;left:.8rem;bottom:.8rem;font-family:var(--s);font-size:.74rem;font-weight:700;color:#fff;
  padding:.4rem .75rem;border-radius:100px;background:var(--c)}
.hc-plat h3{color:var(--ink)}
.hc-plat h3::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:.6rem;vertical-align:.18em}

/* 04 + 05 · leaders on warm amber, our view on deep pine */
.hx2-pair{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(.8rem,1.8vw,1.2rem)}
@media(max-width:980px){.hx2-pair{grid-template-columns:1fr}}
.hx2-leaders,.hx2-pov{border-radius:32px;padding:clamp(1.8rem,4vw,3rem)}
.hx2-leaders{background:#FFF3D6}
.hx2-leaders .hc-h2{margin-top:1.1rem;font-size:clamp(2rem,3.8vw,3.3rem)}
.hx2-leaders .hc-h2 em{color:var(--hc-amber)}
.hx2-leaders>p{margin-top:1rem;font-size:1.08rem;line-height:1.55;color:var(--soft);max-width:48ch}
.hx2-lstats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
.hx2-lstats div{background:rgba(255,255,255,.7);border-radius:20px;padding:1.1rem 1.2rem}
.hx2-lstats b{display:block;font-family:var(--d);font-weight:400;font-size:clamp(2.8rem,5.4vw,4.4rem);line-height:.95;color:var(--hc-amber)}
.hx2-lstats div+div b{color:var(--hc-coral)}
.hx2-lstats span{display:block;margin-top:.4rem;font-size:.92rem;font-weight:600;color:var(--soft)}
.hx2-pov{background:var(--hc-deep);color:#fff;display:flex;flex-direction:column}
.hx2-pov .hc-kicker{color:rgba(255,255,255,.55)}.hx2-pov .hc-kicker b{color:#7FD6B4}
.hx2-pov .hc-pov{margin-top:1.2rem;color:#fff;font-size:clamp(1.8rem,3vw,2.6rem)}
.hx2-pov .hc-pov em{color:#7FD6B4}
.hx2-order{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.hx2-order li{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem .45rem .5rem;border-radius:100px;background:rgba(255,255,255,.08);font-size:.92rem;font-weight:600}
.hx2-order i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#7FD6B4;color:#0E3B33;font-size:.8rem;font-weight:800}
.hx2-pov-note{margin-top:auto;padding-top:1.4rem;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.75)}

/* 06 · the audit band gets coloured badges */
.hc-badges span:nth-child(2)::before{background:#9DB5FF}.hc-badges span:nth-child(3)::before{background:#FFB38F}
.hc-badges span:nth-child(4)::before{background:#C9B6FF}.hc-badges span:nth-child(5)::before{background:#FFD88A}

/* 07 · where we help, as colour tiles */
.hx2-help{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.8vw,1.2rem);margin-top:clamp(2.2rem,4.5vw,3.2rem)}
@media(max-width:760px){.hx2-help{grid-template-columns:1fr}}
.hx2-help a{position:relative;display:flex;flex-direction:column;min-height:220px;padding:clamp(1.4rem,2.8vw,2rem) clamp(1.4rem,2.8vw,2rem) 1.6rem;border-radius:28px;
  background:var(--t);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.hx2-help a:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(14,30,25,.45)}
.hx2-help span{font-family:var(--m);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--c)}
.hx2-help h3{margin-top:.7rem;font-family:var(--d);font-weight:400;font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1.02;color:var(--ink);max-width:14ch}
.hx2-help p{margin-top:.6rem;font-size:1.02rem;color:var(--soft);line-height:1.5;max-width:40ch;padding-right:3.4rem}
.hx2-help i{position:absolute;right:1.4rem;bottom:1.4rem;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--c);color:#fff;font-style:normal;font-weight:700;transition:transform .3s}
.hx2-help a:hover i{transform:translateX(4px)}

/* close: on the hero's mint */
.hc-close{background:var(--hc-mint);border-color:transparent}

/* dark theme: tints become deep washes of each hue */
:root[data-theme="dark"] .hx2-num,:root[data-theme="dark"] .hx2-ch-top,:root[data-theme="dark"] .hc-card.tint,
:root[data-theme="dark"] .hx2-help a{background:color-mix(in srgb,var(--c) 16%,#121614)}
:root[data-theme="dark"] .hx2-leaders{background:#241E10}
:root[data-theme="dark"] .hx2-lstats div{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .hc-close{background:#10201B}
@media(min-width:981px){.hx2-ch-top{min-height:clamp(320px,24vw,350px)}}