/* / (home): the page-only parts. Shared parts (section heads, stats, partners,
   quote bands, press card, team grid, contact) come from site.css.
   Product islands (the statement, the member card) keep their own colors in both
   themes; everything else uses tokens or the page tokens below.

   Contents
     0. Page tokens            6. How we work
     1. Hero and the planet    7. Services bento
     2. Proof strip            8. Technology modules
     3. Quote bands            9. Sikka + press
     4. Rebates                10. The future of RCM + film
     5. The practice portal    11. Marquee, resources
     Breakpoints follow site.css: phone < 768, tablet 768 to 1199. */

/* 0. Page tokens ------------------------------------------------------------ */

:root,
[data-theme="light"] {
  --hm-glow-1: rgba(107, 66, 156, 0.16);
  --hm-glow-3: rgba(139, 92, 246, 0.2);
  --hm-panel: rgba(255, 255, 255, 0.9);
  --hm-panel-line: rgba(21, 14, 32, 0.076);
  --hm-row-line: rgba(21, 14, 32, 0.07);
  --hm-well: rgba(21, 14, 32, 0.032);
  --hm-well-line: rgba(21, 14, 32, 0.07);
  --hm-tile-art-shadow: drop-shadow(0 12px 24px rgba(139, 92, 246, 0.18));
  --hm-ok: #1F7A4D;
  --hm-ok-bg: rgba(95, 212, 160, 0.16);
  --hm-warn: #A04A2E;
  --hm-warn-bg: rgba(245, 180, 110, 0.2);
  --hm-cyan-text: #127A86;
  --hm-gold: 176 122 24;
  --hm-gold-fill: #C8891B;
  --hm-gold-mid: #C8891B;
  --hm-ripple-1: #1F8F9C;
  --hm-ripple-1-o: 1;
  --hm-ripple-2: #C8891B;
  --hm-ripple-2-o: 1;
  --hm-mark-stem: rgba(91, 47, 153, 0.5);
  --hm-mark-ring: rgba(91, 47, 153, 0.85);
  --hm-mark-fill: rgba(255, 255, 255, 0.8);
  --hm-mark-dot: #5B2F99;
  --hm-beat: radial-gradient(closest-side, rgba(31, 143, 156, 0.193), rgba(139, 108, 240, 0.104) 40%, rgba(139, 92, 246, 0) 100%);
  --hm-stem-glow: radial-gradient(50% 100% at 50% 100%, rgba(31, 143, 156, 0.193), rgba(31, 143, 156, 0) 100%);
  --hm-stem-line: linear-gradient(180deg, rgba(139, 92, 246, 0.285), rgba(31, 143, 156, 0.122));
  --hm-pin-shadow: 0 0 0 1px rgba(30, 16, 56, 0.24), 0 0 32px rgba(31, 143, 156, 0.112), 0 0 80px rgba(139, 92, 246, 0.2);
  --hm-toast-icon-bg: rgba(205, 181, 244, 0.12);
  --hm-toast-icon-line: rgba(21, 14, 32, 0.076);
  --hm-toast-icon: #7E52C8;
  --hm-toast-bars-a: #7E52C8;
  --hm-toast-bars-b: #1F8F9C;
  /* comet layers: stroke, opacity (inbound i, outbound o) */
  --hm-i1: #1F8F9C; --hm-i1-o: 0.153;
  --hm-i2: #6B429C; --hm-i2-o: 0.442;
  --hm-i3: #7E52C8; --hm-i3-o: 0.442;
  --hm-i4: #1F8F9C; --hm-i4-o: 0.51;
  --hm-i5: #1F8F9C; --hm-i5-o: 0.714;
  --hm-i6: #5B2F99; --hm-i6-o: 1;
  --hm-i7: #5B2F99; --hm-i7-o: 1;
  --hm-o1: #C8891B; --hm-o1-o: 0.238;
  --hm-o2: #C9975A; --hm-o2-o: 0.51;
  --hm-o3: #C8891B; --hm-o3-o: 0.714;
  --hm-o4: #C8891B; --hm-o4-o: 0.986;
  --hm-o5: #C8891B; --hm-o5-o: 1;
  --hm-o6: #5B2F99; --hm-o6-o: 1;
  --hm-stmt-stage: radial-gradient(ellipse at 55% 45%, rgba(126, 72, 214, 0.18), rgba(126, 72, 214, 0.02) 65%), rgba(139, 92, 246, 0.006);
  --hm-stmt-shadow: 0 50px 80px -30px rgba(46, 24, 84, 0.35), 0 0 0 1px rgba(21, 14, 32, 0.06);
  --hm-ladder-base: rgba(21, 14, 32, 0.05);
  --hm-ladder-alone: rgba(21, 14, 32, 0.09);
  --hm-ladder-alone-ring: rgba(21, 14, 32, 0.16);
  --hm-ladder-lift: 139 92 246;
  --hm-ladder-top: rgba(21, 14, 32, 0.035);
  --hm-ladder-tag-bg: rgba(21, 14, 32, 0.05);
  --hm-ladder-tag-line: rgba(21, 14, 32, 0.1);
  --hm-ladder-pool-shadow: 0 0 36px rgba(139, 92, 246, 0.35);
  --hm-pool-tag-shadow: 0 10px 30px -8px rgba(107, 66, 156, 0.45);
  --hm-nadia-tile: radial-gradient(ellipse 70% 100% at 0% 0%, rgba(139, 92, 246, 0.144), rgba(139, 92, 246, 0) 60%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(31, 143, 156, 0.06), rgba(31, 143, 156, 0) 70%), #FFFFFF;
  --hm-nadia-tile-line: rgba(107, 66, 156, 0.2);
  --hm-stack-layer: 139 92 246;
  --hm-stack-line: 107 66 156;
  --hm-stack-alpha: 0.5;
  --hm-stack-label: #524866;
  --hm-stack-tick: rgba(107, 66, 156, 0.22);
  --hm-stack-name: #127A86;
  --hm-marquee-text: rgba(21, 14, 32, 0.12);
  --hm-res-glow: radial-gradient(circle at 50% 55%, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0) 65%);
  --hm-res-art-shadow: drop-shadow(0 18px 28px rgba(76, 40, 130, 0.25));
  --hm-film-bg: rgba(21, 14, 32, 0.6);
}

[data-theme="dark"] {
  --hm-glow-1: rgba(107, 66, 156, 0.4);
  --hm-glow-3: rgba(139, 92, 246, 0.5);
  --hm-panel: rgba(14, 10, 22, 0.8);
  --hm-panel-line: rgba(255, 255, 255, 0.08);
  --hm-row-line: rgba(255, 255, 255, 0.06);
  --hm-well: rgba(0, 0, 0, 0.25);
  --hm-well-line: rgba(255, 255, 255, 0.08);
  --hm-tile-art-shadow: drop-shadow(0 12px 24px rgba(139, 92, 246, 0.45));
  --hm-ok: #86E3B4;
  --hm-ok-bg: rgba(95, 212, 160, 0.14);
  --hm-warn: #F5C08A;
  --hm-warn-bg: rgba(245, 180, 110, 0.14);
  --hm-cyan-text: #8FE9F2;
  --hm-gold: 242 196 109;
  --hm-gold-fill: #F2C46D;
  --hm-gold-mid: #F7D48C;
  --hm-ripple-1: #C9F3F8;
  --hm-ripple-1-o: 0.9;
  --hm-ripple-2: #F2C46D;
  --hm-ripple-2-o: 0.75;
  --hm-mark-stem: rgba(233, 222, 251, 0.5);
  --hm-mark-ring: rgba(236, 228, 252, 0.85);
  --hm-mark-fill: rgba(20, 12, 36, 0.35);
  --hm-mark-dot: #FFFFFF;
  --hm-beat: radial-gradient(closest-side, rgba(176, 238, 248, 0.55), rgba(139, 108, 240, 0.26) 40%, rgba(139, 92, 246, 0) 100%);
  --hm-stem-glow: radial-gradient(50% 100% at 50% 100%, rgba(186, 240, 250, 0.55), rgba(186, 240, 250, 0) 100%);
  --hm-stem-line: linear-gradient(180deg, rgba(236, 252, 255, 0.95), rgba(160, 236, 248, 0.35));
  --hm-pin-shadow: 0 0 0 1px rgba(30, 16, 56, 0.6), 0 0 32px rgba(143, 227, 238, 0.32), 0 0 80px rgba(139, 92, 246, 0.5);
  --hm-toast-icon-bg: rgba(205, 181, 244, 0.12);
  --hm-toast-icon-line: rgba(255, 255, 255, 0.08);
  --hm-toast-icon: #D9C6FA;
  --hm-toast-bars-a: #9A8CC0;
  --hm-toast-bars-b: #8FE9F2;
  --hm-i1: #7FE7FF; --hm-i1-o: 0.09;
  --hm-i2: #8B6CF0; --hm-i2-o: 0.26;
  --hm-i3: #9C87F6; --hm-i3-o: 0.26;
  --hm-i4: #7FE7FF; --hm-i4-o: 0.3;
  --hm-i5: #A8EFFF; --hm-i5-o: 0.42;
  --hm-i6: #E6FCFF; --hm-i6-o: 0.78;
  --hm-i7: #FFFFFF; --hm-i7-o: 1;
  --hm-o1: #F2C46D; --hm-o1-o: 0.14;
  --hm-o2: #C9975A; --hm-o2-o: 0.3;
  --hm-o3: #F2C46D; --hm-o3-o: 0.42;
  --hm-o4: #F7D48C; --hm-o4-o: 0.58;
  --hm-o5: #FFE9BC; --hm-o5-o: 0.9;
  --hm-o6: #FFFBF0; --hm-o6-o: 1;
  --hm-stmt-stage: radial-gradient(ellipse at 55% 45%, rgba(126, 72, 214, 0.45), rgba(126, 72, 214, 0.05) 65%), rgba(255, 255, 255, 0.02);
  --hm-stmt-shadow: 0 50px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.3);
  --hm-ladder-base: rgba(255, 255, 255, 0.08);
  --hm-ladder-alone: rgba(255, 255, 255, 0.2);
  --hm-ladder-alone-ring: rgba(255, 255, 255, 0.35);
  --hm-ladder-lift: 185 154 240;
  --hm-ladder-top: rgba(255, 255, 255, 0.06);
  --hm-ladder-tag-bg: rgba(255, 255, 255, 0.1);
  --hm-ladder-tag-line: rgba(255, 255, 255, 0.16);
  --hm-ladder-pool-shadow: 0 0 36px rgba(185, 154, 240, 0.7);
  --hm-pool-tag-shadow: 0 10px 30px -8px rgba(185, 154, 240, 0.9);
  --hm-nadia-tile: radial-gradient(ellipse 70% 100% at 0% 0%, rgba(139, 92, 246, 0.36), rgba(139, 92, 246, 0) 60%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(143, 233, 242, 0.12), rgba(143, 233, 242, 0) 70%), #0E0A16;
  --hm-nadia-tile-line: rgba(233, 221, 251, 0.22);
  --hm-stack-layer: 139 92 246;
  --hm-stack-line: 205 181 244;
  --hm-stack-alpha: 1;
  --hm-stack-label: #CFC5DE;
  --hm-stack-tick: rgba(233, 221, 251, 0.22);
  --hm-stack-name: #BDF3F8;
  --hm-marquee-text: rgba(255, 255, 255, 0.16);
  --hm-res-glow: radial-gradient(circle at 50% 55%, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0) 65%);
  --hm-res-art-shadow: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55));
  --hm-film-bg: rgba(4, 2, 8, 0.78);
}

/* Big soft glows behind sections. */
.hm-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--hm-glow-1), transparent 70%);
}
.hm-glow--rebates { left: -260px; top: 410px; width: 1100px; height: 900px; }
.hm-glow--services { right: -200px; top: 470px; width: 900px; height: 700px; }
.hm-glow--resources { left: 50%; top: 520px; width: 1300px; height: 600px; margin-left: -650px; }
.section > .container,
.section > .container--wide { position: relative; z-index: 1; }

/* 1. Hero and the planet ----------------------------------------------------- */

.hm-hero {
  --W: clamp(1100px, 100cqw, 1600px);
  position: relative;
  z-index: 2;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}
.hm-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 36px;
  text-align: center;
}
.hm-hero__title { --display-size: clamp(46px, 22px + 4.6vw, 88px); line-height: 1; letter-spacing: -0.05em; }
.hm-hero__title .accent { font-size: 1.136em; letter-spacing: -0.02em; }
.hm-hero__lead { max-width: 560px; font-size: clamp(17px, 15.4px + 0.36vw, 19px); line-height: 1.55; color: var(--text-label); text-wrap: balance; }
[data-theme="dark"] .hm-hero__lead { color: #BDB3CC; }
.hm-hero__actions { margin-top: 6px; }
.hm-hero__space { position: relative; z-index: 1; height: calc(var(--W) * 0.358); pointer-events: none; }

/* The glass button with a round icon chip ("Talk to our team", "Play the film"). */
.btn.hm-btn-chip { --btn-px: 22px; gap: 12px; padding-left: 8px; }
.hm-btn-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fill-3);
}
.hm-btn-chip__icon .icon { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .btn.hm-btn-chip { padding-left: 6px; }
  .hm-btn-chip__icon { width: 36px; height: 36px; }
}

/* The stage: the planet image and its overlay, one 1440 x 1200 board scaled to
   --W and anchored to the hero's bottom (the stats strip sits on its lower edge). */
.hm-stage {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: calc(var(--W) * -130 / 1440);
  width: var(--W);
  height: calc(var(--W) * 1200 / 1440);
  margin-left: calc(var(--W) / -2);
  pointer-events: none;
}
@container (min-width: 1601px) {
  .hm-stage {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
}
.hm-stage__art {
  position: absolute;
  inset: 0;
  background: center / 100% 100% no-repeat;
  background-image: image-set(url("/marketing/assets/map-hero-light-1200.webp") 1x, url("/marketing/assets/map-hero-light.webp") 2x);
}
[data-theme="dark"] .hm-stage__art {
  background-image: image-set(url("/marketing/assets/map-hero-dark-1200.webp") 1x, url("/marketing/assets/map-hero-dark.webp") 2x);
}
@container (min-width: 1100px) {
  .hm-stage__art { background-image: url("/marketing/assets/map-hero-light.webp"); }
  [data-theme="dark"] .hm-stage__art { background-image: url("/marketing/assets/map-hero-dark.webp"); }
}
.hm-stage .hm-stage__grain { z-index: 1; opacity: calc(var(--grain-opacity) * 0.9); }
.hm-stage__rail {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  display: none;
  width: 1px;
  background: linear-gradient(180deg, var(--hair) 0, var(--hair) 43.3%, transparent 54.2%, transparent 83.3%, var(--hair) 89.2%, var(--hair) 100%);
}
.hm-stage__rail--l { left: calc(50% - var(--container-wide) / 2); }
.hm-stage__rail--r { right: calc(50% - var(--container-wide) / 2); }
@container (min-width: 1024px) {
  .hm-stage__rail { display: block; }
}
.hm-comets { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; }

/* The comets: one path per arc, seven (inbound) or six (outbound) layered dashes. */
.hm-comets use { fill: none; stroke-linecap: round; animation: 7.2s linear infinite; }
.hm-comets .hm-i34 { stroke: var(--hm-i1); stroke-opacity: var(--hm-i1-o); stroke-width: 6; stroke-dasharray: 34 1622; animation-name: hm-i34; }
.hm-comets .hm-i118 { stroke: var(--hm-i2); stroke-opacity: var(--hm-i2-o); stroke-width: 1.4; stroke-dasharray: 118 1538; animation-name: hm-i118; }
.hm-comets .hm-i84 { stroke: var(--hm-i3); stroke-opacity: var(--hm-i3-o); stroke-width: 1.5; stroke-dasharray: 84 1572; animation-name: hm-i84; }
.hm-comets .hm-i54 { stroke: var(--hm-i4); stroke-opacity: var(--hm-i4-o); stroke-width: 1.6; stroke-dasharray: 54 1602; animation-name: hm-i54; }
.hm-comets .hm-i30 { stroke: var(--hm-i5); stroke-opacity: var(--hm-i5-o); stroke-width: 1.8; stroke-dasharray: 30 1626; animation-name: hm-i30; }
.hm-comets .hm-i13 { stroke: var(--hm-i6); stroke-opacity: var(--hm-i6-o); stroke-width: 2; stroke-dasharray: 13 1643; animation-name: hm-i13; }
.hm-comets .hm-i3-2 { stroke: var(--hm-i7); stroke-opacity: var(--hm-i7-o); stroke-width: 2.6; stroke-dasharray: 3.2 1652.8; animation-name: hm-i3-2; }
.hm-comets .hm-o30 { stroke: var(--hm-o1); stroke-opacity: var(--hm-o1-o); stroke-width: 7; stroke-dasharray: 30 2202; animation-name: hm-o30; }
.hm-comets .hm-o96 { stroke: var(--hm-o2); stroke-opacity: var(--hm-o2-o); stroke-width: 1.5; stroke-dasharray: 96 2136; animation-name: hm-o96; }
.hm-comets .hm-o60 { stroke: var(--hm-o3); stroke-opacity: var(--hm-o3-o); stroke-width: 1.7; stroke-dasharray: 60 2172; animation-name: hm-o60; }
.hm-comets .hm-o32 { stroke: var(--hm-o4); stroke-opacity: var(--hm-o4-o); stroke-width: 2; stroke-dasharray: 32 2200; animation-name: hm-o32; }
.hm-comets .hm-o13 { stroke: var(--hm-o5); stroke-opacity: var(--hm-o5-o); stroke-width: 2.3; stroke-dasharray: 13 2219; animation-name: hm-o13; }
.hm-comets .hm-o3-4 { stroke: var(--hm-o6); stroke-opacity: var(--hm-o6-o); stroke-width: 3; stroke-dasharray: 3.4 2228.6; animation-name: hm-o3-4; }
@keyframes hm-i34 { from { stroke-dashoffset: 34; } to { stroke-dashoffset: -1622; } }
@keyframes hm-i118 { from { stroke-dashoffset: 118; } to { stroke-dashoffset: -1538; } }
@keyframes hm-i84 { from { stroke-dashoffset: 84; } to { stroke-dashoffset: -1572; } }
@keyframes hm-i54 { from { stroke-dashoffset: 54; } to { stroke-dashoffset: -1602; } }
@keyframes hm-i30 { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -1626; } }
@keyframes hm-i13 { from { stroke-dashoffset: 13; } to { stroke-dashoffset: -1643; } }
@keyframes hm-i3-2 { from { stroke-dashoffset: 3.2; } to { stroke-dashoffset: -1652.8; } }
@keyframes hm-o30 { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -2202; } }
@keyframes hm-o96 { from { stroke-dashoffset: 96; } to { stroke-dashoffset: -2136; } }
@keyframes hm-o60 { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -2172; } }
@keyframes hm-o32 { from { stroke-dashoffset: 32; } to { stroke-dashoffset: -2200; } }
@keyframes hm-o13 { from { stroke-dashoffset: 13; } to { stroke-dashoffset: -2219; } }
@keyframes hm-o3-4 { from { stroke-dashoffset: 3.4; } to { stroke-dashoffset: -2228.6; } }
/* Each arc starts at its own point in the 7.2 s loop. */
#hm-arcs-1 use { animation-delay: -0.96s; }
#hm-arcs-2 use { animation-delay: -4.47s; }
#hm-arcs-3 use { animation-delay: -1.17s; }
#hm-arcs-4 use { animation-delay: -4.01s; }
#hm-arcs-5 use { animation-delay: -0.46s; }
#hm-arcs-6 use { animation-delay: -3.68s; }
#hm-arcs-7 use { animation-delay: -6.96s; }
#hm-arcs-8 use { animation-delay: -2.92s; }
#hm-arcs-9 use { animation-delay: -6.45s; }
#hm-arcs-10 use { animation-delay: -2.83s; }
#hm-arcs-11 use { animation-delay: -6.52s; }
#hm-arcs-12 use { animation-delay: -2.93s; }
#hm-arcs-13 use { animation-delay: -7.09s; }
#hm-arcs-14 use { animation-delay: -3.34s; }
#hm-arcs-15 use { animation-delay: -6.9s; }
#hm-arcs-16 use { animation-delay: -3.87s; }
#hm-arcs-17 use { animation-delay: -0.3s; }
#hm-arcs-18 use { animation-delay: -3.94s; }
#hm-arcs-19 use { animation-delay: -0.45s; }
#hm-arcs-20 use { animation-delay: -4.52s; }
#hm-arcs-21 use { animation-delay: -5.06s; }
#hm-arcs-22 use { animation-delay: -4.95s; }
#hm-arcs-23 use { animation-delay: -4.84s; }
#hm-arcs-24 use { animation-delay: -4.73s; }
#hm-arcs-25 use { animation-delay: -1.46s; }
#hm-arcs-26 use { animation-delay: -1.35s; }
#hm-arcs-27 use { animation-delay: -1.24s; }
#hm-arcs-28 use { animation-delay: -1.13s; }

.hm-ripple {
  fill: none;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: hm-ripple 3.6s cubic-bezier(0.15, 0.6, 0.35, 1) infinite;
}
.hm-ripple--1 { stroke: var(--hm-ripple-1); stroke-opacity: var(--hm-ripple-1-o); animation-delay: -1.6s; }
.hm-ripple--2 { stroke: var(--hm-ripple-2); stroke-opacity: var(--hm-ripple-2-o); animation-delay: -1.32s; }
.hm-land__ring {
  fill: none;
  stroke: var(--hm-gold-fill);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: hm-land 7.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.hm-land__dot { fill: var(--hm-gold-fill); opacity: 0; animation: hm-landdot 7.2s linear infinite; }
.hm-land--1 * { animation-delay: -3.66s; }
.hm-land--2 * { animation-delay: -4.63s; }
.hm-land--3 * { animation-delay: -3.53s; }
.hm-land--4 * { animation-delay: -4.26s; }
.hm-land--5 * { animation-delay: -7.1s; }
.hm-land--6 * { animation-delay: -7.18s; }
.hm-land--7 * { animation-delay: -6.87s; }
.hm-land--8 * { animation-delay: -0.53s; }
.hm-marker__stem { stroke: var(--hm-mark-stem); stroke-width: 1; stroke-dasharray: 2 3; }
.hm-marker__ring { stroke: var(--hm-mark-ring); stroke-width: 1.1; fill: var(--hm-mark-fill); }
.hm-marker__dot { fill: var(--hm-mark-dot); }

@keyframes hm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hm-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hm-ripple { 0% { opacity: 0; transform: scale(0.1); } 5% { opacity: 1; } 60%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hm-beat { 0% { opacity: 1; transform: scale(1.14); } 35% { opacity: 0.5; transform: scale(0.96); } 100% { opacity: 0.62; transform: scale(1); } }
@keyframes hm-land { 0% { opacity: 0; transform: scale(0.15); } 1% { opacity: 1; } 28%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hm-landdot { 0% { opacity: 0; } 1% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes hm-chipglow { 0% { opacity: 0; } 2% { opacity: 1; } 34%, 100% { opacity: 0; } }

/* HTML pieces placed in board coordinates (x / 1440, y / 1200). */
.hm-beat {
  position: absolute;
  z-index: 3;
  left: calc(590 / 1440 * 100%);
  top: calc(645 / 1200 * 100%);
  width: calc(var(--W) * 260 / 1440);
  height: calc(var(--W) * 260 / 1440);
  border-radius: 50%;
  background: var(--hm-beat);
  opacity: 0.62;
  animation: hm-beat 3.6s ease-out -1.6s infinite;
}
.hm-stem {
  position: absolute;
  z-index: 3;
  left: calc(707 / 1440 * 100%);
  top: calc(797 / 1200 * 100%);
  width: calc(var(--W) * 26 / 1440);
  height: calc(var(--W) * 32 / 1440);
  background: var(--hm-stem-glow);
}
.hm-stem span {
  position: absolute;
  left: 46%;
  top: 12%;
  width: 1.5px;
  height: 78%;
  background: var(--hm-stem-line);
}
.hm-pin {
  --pin: max(40px, calc(var(--W) * 56 / 1440));
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(775 / 1200 * 100%);
  width: var(--pin);
  height: var(--pin);
  margin: calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);
  border-radius: calc(var(--pin) * 0.29);
  box-shadow: var(--hm-pin-shadow);
  animation: hm-hover 7.2s ease-in-out infinite;
}
.hm-pin svg { width: 100%; height: 100%; }

.hm-toast-pos { position: absolute; z-index: 5; }
.hm-toast-pos--pool { left: calc(200 / 1440 * 100%); top: calc(774 / 1200 * 100%); animation: hm-float 8s ease-in-out -2s infinite; }
.hm-toast-pos--paid { right: calc(170 / 1440 * 100%); top: calc(702 / 1200 * 100%); animation: hm-float 9s ease-in-out -5s infinite; }
.toast.hm-toast { position: relative; }
[data-theme="light"] .toast.hm-toast { background: rgba(255, 255, 255, 0.8); border-top-color: rgba(21, 14, 32, 0.15); border-bottom-color: rgba(21, 14, 32, 0.07); }
.hm-toast__glow {
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  border: 1px solid rgb(var(--hm-gold) / 0.75);
  box-shadow: 0 0 0 1px rgb(var(--hm-gold) / 0.18), 0 0 30px rgb(var(--hm-gold) / 0.3), inset 0 0 22px rgb(var(--hm-gold) / 0.1);
  opacity: 0;
  animation: hm-chipglow 7.2s ease-out infinite;
}
[data-theme="light"] .hm-toast__glow { box-shadow: 0 0 0 1px rgb(var(--hm-gold) / 0.072), 0 0 30px rgb(var(--hm-gold) / 0.12), inset 0 0 22px rgb(var(--hm-gold) / 0.04); }
.hm-toast__glow--pool { animation-delay: -3.66s; }
.hm-toast__glow--paid { animation-delay: -7.1s; }
.hm-toast__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--hm-toast-icon-bg);
  border: 1px solid var(--hm-toast-icon-line);
  color: var(--hm-toast-icon);
}
.hm-bars__a { fill: var(--hm-toast-bars-a); fill-opacity: 0.75; }
.hm-bars__b { fill: var(--hm-toast-bars-b); }
.hm-toast__text { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; text-align: left; }
.hm-toast__text strong { font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; color: var(--text-1); }
.hm-toast__text span { font-size: 13px; line-height: 1.25; color: var(--text-label); }
[data-theme="dark"] .hm-toast__text span { color: #BDB2CF; }

@media (max-width: 1199px) {
  .hm-toast-pos--pool { left: calc(150 / 1440 * 100%); }
  .hm-toast-pos--paid { right: calc(120 / 1440 * 100%); }
}
@media (max-width: 767px) {
  .hm-hero { --W: max(600px, 165cqw); }
  /* The board's top edge sits behind the lead here: fade it in instead of a hard line. */
  .hm-stage {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%);
    mask-image: linear-gradient(180deg, transparent, #000 22%);
  }
  .hm-hero__inner { padding-top: 28px; gap: 20px; }
  .hm-hero__space { height: calc(var(--W) * 0.4); }
  .announce { font-size: 12.5px; gap: 8px; padding-right: 12px; }
  .toast.hm-toast { height: 54px; gap: 10px; padding: 0 14px 0 8px; border-radius: 14px; }
  .hm-toast__glow { border-radius: 14px; }
  .hm-toast__icon { width: 36px; height: 36px; border-radius: 10px; }
  .hm-toast__icon svg { transform: scale(0.82); }
  .hm-toast__text strong { font-size: 13px; }
  .hm-toast__text span { font-size: 11.5px; }
  .hm-toast-pos--pool { left: calc(50% - 50cqw + 16px); top: auto; bottom: calc(var(--W) * 0.105); }
  .hm-toast-pos--paid { right: calc(50% - 50cqw + 16px); top: calc(var(--W) * 0.4); }
}

/* 2. Proof strip --------------------------------------------------------------- */

.hm-stats { z-index: 3; }
.partners { z-index: 3; }

/* 3. Quote bands ------------------------------------------------------------------ */

.hm-quote .quote-band blockquote { max-width: 1080px; }

/* Leadership on home: at 1024 to 1199 the roles fit one line; on phones the
   CEO card and the careers card run full width, so seven portraits and the
   careers card fill the two-column grid without a hole and the button fits. */
@media (min-width: 1024px) and (max-width: 1199px) {
  #team .team-card__caption { left: 16px; right: 14px; bottom: 15px; }
  #team .team-card__role { font-size: 12px; }
}
@media (max-width: 767px) {
  #team .team-card:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  #team .team-card:first-child img { object-position: 50% 22%; }
  #team .team-card--careers { grid-column: 1 / -1; aspect-ratio: auto; padding: 22px 20px 20px; }
  #team .team-card--careers h3 { font-size: 21px; }
  #team .team-card--careers p { display: block; }
  #team .team-card--careers .btn { margin-top: 16px; }
}

/* 4. Rebates -------------------------------------------------------------------------- */

.hm-rebates__grid { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .hm-rebates__grid { grid-template-columns: minmax(0, 500fr) minmax(0, 628fr); }
}
.hm-ladder {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 540px;
  padding: clamp(26px, 20px + 1.2vw, 38px);
}
.hm-ladder__title { font-size: clamp(25px, 21px + 0.6vw, 30px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: var(--text-1); }
.hm-ladder__text { max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--text-3); }
.hm-ladder__chart { position: relative; height: 250px; margin-top: auto; padding-top: 40px; }
.hm-ladder__bars { position: absolute; inset: 0 0 26px; display: flex; align-items: flex-end; gap: 10px; }
.hm-ladder__bars span { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: var(--hm-ladder-base); }
.hm-ladder__bars .is-alone { background: var(--hm-ladder-alone); box-shadow: 0 0 0 1px var(--hm-ladder-alone-ring) inset; }
.hm-ladder__bars .is-lift { background: rgb(var(--hm-ladder-lift) / var(--a)); }
.hm-ladder__bars .is-pool { background: linear-gradient(180deg, #D5BEFA, #7E52C8); box-shadow: var(--hm-ladder-pool-shadow); }
[data-theme="light"] .hm-ladder__bars .is-pool { background: linear-gradient(180deg, #B993F5, #6B429C); }
.hm-ladder__bars .is-top { background: var(--hm-ladder-top); }
.hm-ladder__axis { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-4); }
.hm-ladder__axis span { flex: 1; text-align: center; }
.hm-ladder__axis .is-alone { color: var(--text-1); }
.hm-ladder__axis .is-pool { color: var(--accent-2); }
.hm-ladder__tag {
  position: absolute;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
.hm-ladder__tag--alone { left: 4px; top: 118px; background: var(--hm-ladder-tag-bg); border: 1px solid var(--hm-ladder-tag-line); color: var(--text-soft); }
.hm-ladder__tag--pool { left: calc(5 / 8 * 100% + 10px); top: -6px; height: 32px; padding: 0 14px; background: #FFFFFF; color: #120B1A; font-size: 12.5px; font-weight: 600; box-shadow: var(--hm-pool-tag-shadow); }
[data-theme="light"] .hm-ladder__tag--pool { box-shadow: var(--hm-pool-tag-shadow), 0 0 0 1px rgba(21, 14, 32, 0.06); }

.hm-stmt-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
  padding: 40px 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--hm-stmt-stage);
  box-shadow: var(--glass-shadow);
}
[data-theme="light"] .hm-stmt-stage { box-shadow: none; }
.hm-stmt-stage__art { position: absolute; right: 36px; top: 30px; width: 120px; transform: rotate(8deg); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5)); }
[data-theme="light"] .hm-stmt-stage__art { filter: drop-shadow(0 20px 30px rgba(76, 40, 130, 0.25)); }
.hm-stmt {
  position: relative;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 28px 24px;
  border-radius: 12px;
  transform: rotate(-3deg);
  box-shadow: var(--hm-stmt-shadow) !important;
}
.hm-stmt__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-stmt__top img { width: auto; height: 13px; }
.hm-stmt__top span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--island-muted); }
.hm-stmt__who { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.hm-stmt__who strong { font-family: var(--font-product); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.hm-stmt__who span { font-size: 12.5px; color: var(--island-text); }
.hm-stmt__table { display: flex; flex-direction: column; font-size: 12.5px; }
.hm-stmt__head,
.hm-stmt__row { display: grid; grid-template-columns: minmax(0, 1fr) 60px 100px; align-items: center; }
.hm-stmt__head { height: 30px; border-bottom: 1px solid var(--island-line-strong); font-size: 11px; color: var(--island-muted); }
.hm-stmt__row { height: 38px; border-bottom: 1px solid var(--island-line); }
.hm-stmt__row:nth-child(4) { border-bottom-color: var(--island-line-strong); }
.hm-stmt__head span:not(:first-child),
.hm-stmt__row span:not(:first-child) { text-align: right; }
.hm-stmt__row span:not(:first-child) { font-family: var(--font-mono); font-size: 11.5px; }
.hm-stmt__total { display: flex; align-items: center; justify-content: space-between; height: 46px; font-weight: 600; }
.hm-stmt__total span:last-child { font-family: var(--font-mono); font-size: 14px; color: var(--island-accent); }
.hm-stmt__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--island-line-strong); font-size: 11.5px; color: var(--island-muted); }
.hm-paid { display: flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #E4F3EA; color: #23694A; font-weight: 600; }

.hm-points { display: grid; gap: 28px; margin-top: 56px; padding: 0 4px; }
.hm-points li { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--border-strong); }
.hm-points h3 { font-size: clamp(19px, 17px + 0.4vw, 21px); font-weight: 500; letter-spacing: -0.025em; color: var(--text-1); }
.hm-points p { font-size: 15px; line-height: 1.6; color: var(--text-3); }
@media (min-width: 768px) {
  .hm-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}
@media (max-width: 767px) {
  .hm-ladder { min-height: 0; }
  .hm-ladder__chart { height: 230px; margin-top: 18px; }
  .hm-ladder__bars { gap: 6px; }
  .hm-ladder__axis { gap: 6px; }
  .hm-ladder__tag--pool { left: auto; right: 0; }
  .hm-ladder__tag--alone { top: 104px; }
  .hm-stmt-stage { min-height: 0; padding: 56px 14px 44px; }
  .hm-stmt-stage__art { right: 14px; top: 10px; width: 84px; }
  .hm-stmt { padding: 22px 18px 18px; gap: 14px; transform: rotate(-2deg); }
  .hm-stmt__head,
  .hm-stmt__row { grid-template-columns: minmax(0, 1fr) 34px 82px; }
  .hm-stmt__row { font-size: 12px; }
  .hm-stmt__top span { font-size: 8.5px; letter-spacing: 0.08em; }
  .hm-stmt__who strong { font-size: 18px; }
  .hm-points { margin-top: 40px; }
}

/* 5. The practice portal ----------------------------------------------------------------- */

/* The glass statement ledger: the year's rebates by quarter on one frosted sheet, lit by a
   violet glow and the orb behind it, with two loose glass chips at its edges (Nadia's
   answer, the next office hours). Glass and light come from tokens, mixed per theme. */
.hm-portal {
  --hm-ledger-w: min(860px, 100% - 160px);
  --hm-ledger-x: calc(50% - var(--hm-ledger-w) / 2);
  --hm-glass: linear-gradient(165deg, color-mix(in srgb, var(--surface) 74%, transparent), color-mix(in srgb, var(--surface) 44%, transparent));
  --hm-chip-glass: color-mix(in srgb, var(--surface) 62%, transparent);
  --hm-glass-edge: color-mix(in srgb, var(--surface) 85%, transparent);
  --hm-glass-shadow: inset 0 1px 0 var(--surface), 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent), var(--shadow-pop), 0 40px 90px -50px color-mix(in srgb, var(--accent) 55%, transparent);
  --hm-chip-shadow: inset 0 1px 0 var(--surface), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow-float), 0 24px 50px -24px color-mix(in srgb, var(--accent) 40%, transparent);
  --hm-rule: color-mix(in srgb, var(--accent) 13%, transparent);
  --hm-rule-strong: color-mix(in srgb, var(--accent) 26%, transparent);
  --hm-stage-glow: radial-gradient(closest-side, color-mix(in srgb, var(--accent-fill) 42%, transparent), color-mix(in srgb, var(--accent-fill) 15%, transparent) 55%, transparent 80%);
  --hm-bloom: radial-gradient(closest-side at 40% 50%, color-mix(in srgb, var(--accent-fill) 85%, transparent), transparent 75%), radial-gradient(closest-side at 72% 60%, color-mix(in srgb, var(--cyan-fill) 45%, transparent), transparent 75%);
}
[data-theme="dark"] .hm-portal {
  --hm-glass: linear-gradient(165deg, color-mix(in srgb, var(--text-1) 9%, transparent), color-mix(in srgb, var(--text-1) 3%, transparent)), color-mix(in srgb, var(--surface) 45%, transparent);
  --hm-chip-glass: color-mix(in srgb, var(--surface) 55%, transparent);
  --hm-glass-edge: var(--border-strong);
  --hm-glass-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-1) 16%, transparent), var(--shadow-pop);
  --hm-chip-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-1) 14%, transparent), var(--shadow-float);
  --hm-rule: var(--line);
  --hm-rule-strong: var(--border-strong);
  --hm-stage-glow: radial-gradient(closest-side, var(--glow-strong), var(--glow-mid) 55%, transparent 80%);
}

.hm-ledger-stage { position: relative; isolation: isolate; padding: 88px 0 100px; }
.hm-ledger-stage__glow { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1240px, 130%); height: 820px; translate: -50% -50%; border-radius: 50%; background: var(--hm-stage-glow); pointer-events: none; }
/* the orb rises out of the sheet's top edge; what sits behind the glass is blurred by it */
.hm-ledger-stage__orb { position: absolute; z-index: -1; left: calc(var(--hm-ledger-x) - 118px); top: 0; width: 290px; height: 290px; border-radius: 50%; background: var(--orb); box-shadow: 0 0 90px color-mix(in srgb, var(--accent-fill) 60%, transparent); pointer-events: none; }
.hm-ledger-stage__bloom { position: absolute; z-index: -1; right: calc(var(--hm-ledger-x) - 110px); bottom: 34px; width: 460px; height: 320px; border-radius: 50%; background: var(--hm-bloom); filter: blur(18px); opacity: 0.8; pointer-events: none; }

.hm-ledger {
  position: relative;
  z-index: 1;
  width: var(--hm-ledger-w);
  margin: 0 auto;
  padding: 30px 44px 44px;
  border-radius: 30px;
  background: var(--hm-glass);
  border: 1px solid var(--hm-glass-edge);
  box-shadow: var(--hm-glass-shadow);
  -webkit-backdrop-filter: blur(34px) saturate(170%);
  backdrop-filter: blur(34px) saturate(170%);
}
.hm-ledger__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; }
.hm-ledger__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.hm-ledger__name { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-1); }
.hm-ledger__rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hm-rule); }
.hm-ledger__row,
.hm-ledger__total { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 16px; min-height: 88px; margin: 0; }
.hm-ledger__row { border-bottom: 1px solid var(--hm-rule); }
.hm-ledger__row:last-child { border-bottom-color: var(--hm-rule-strong); }
.hm-ledger__total { min-height: 112px; padding-top: 4px; }
.hm-ledger__quarter { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--text-1); }
.hm-ledger__total .hm-ledger__quarter { font-weight: 600; }
.hm-ledger__state { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.hm-ledger__dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-4); }
.hm-ledger__dot--paid { border: 0; background: var(--success); box-shadow: 0 0 10px color-mix(in srgb, var(--success) 55%, transparent); }
.hm-ledger__dot--open { border: 0; background: var(--accent-fill); box-shadow: 0 0 0 4px var(--accent-tint); }
.hm-ledger__dot--open::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent-fill); animation: mx-ping 2.4s ease-out infinite; }
.hm-ledger__amount { justify-self: end; font-family: var(--font-serif); font-size: 44px; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-1); white-space: nowrap; }
.hm-ledger__amount--ask { font-size: 36px; font-style: italic; color: var(--accent-2); }
.hm-ledger__amount--soon { font-size: 36px; color: var(--text-4); }
.hm-ledger__total .hm-ledger__amount { padding-right: 0.06em; font-size: 62px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hm-chip {
  position: absolute;
  z-index: 2;
  padding: 18px 20px;
  border-radius: 22px;
  background: var(--hm-chip-glass);
  border: 1px solid var(--hm-glass-edge);
  box-shadow: var(--hm-chip-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
.hm-chip p { margin: 0; }
.hm-chip--nadia { right: 0; top: 20px; display: flex; flex-direction: column; gap: 14px; width: 344px; }
.hm-chip__ask { align-self: flex-end; padding: 9px 15px; border-radius: 16px 16px 5px 16px; background: var(--btn-primary-bg); box-shadow: var(--btn-primary-shadow); font-size: 14px; font-weight: 500; color: var(--island-surface); }
.hm-chip__answer { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.hm-chip__answer .orb { width: 20px; height: 20px; margin-top: 2px; }
.hm-chip--event { left: 0; bottom: 22px; width: 292px; }
.hm-chip__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-3); }
.hm-chip__where { display: flex; align-items: center; gap: 8px; }
.hm-chip p.hm-chip__date { margin-top: 8px; font-family: var(--font-serif); font-size: 32px; line-height: 1.1; color: var(--text-1); }
/* Nadia's answer while it types: every character keeps its place, so nothing moves */
.hm-chip__type .ch { visibility: hidden; }
.hm-chip__type .ch.is-on { visibility: visible; }

/* motion (home.js adds .is-in once the stage is in view): the sheet rises, the rows fill in one
   by one, the total counts up, then the chips arrive and Nadia's answer types in. */
.js .hm-ledger { opacity: 0; translate: 0 56px; scale: 0.98; transition: opacity 0.9s var(--ease-out), translate 1.2s var(--ease-out), scale 1.2s var(--ease-out); }
.js .hm-ledger__head,
.js .hm-ledger__row,
.js .hm-ledger__total { opacity: 0; translate: 0 14px; transition: opacity 0.6s var(--ease-out), translate 0.8s var(--ease-out); transition-delay: calc(0.35s + var(--i, 0) * 0.24s); }
.hm-ledger__row:nth-child(1) { --i: 1; }
.hm-ledger__row:nth-child(2) { --i: 2; }
.hm-ledger__row:nth-child(3) { --i: 3; }
.hm-ledger__row:nth-child(4) { --i: 4; }
.hm-ledger__total { --i: 5; }
.js .hm-ledger-stage__orb { opacity: 0; translate: 0 40px; transition: opacity 1.4s var(--ease-out), translate 1.8s var(--ease-out); }
.js .hm-chip { opacity: 0; translate: 0 22px; scale: 0.94; transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-out), scale 0.9s var(--ease-out); transition-delay: 2.7s; }
.js .hm-chip--nadia { transition-delay: 3s; }
.hm-ledger-stage.is-in :is(.hm-ledger, .hm-ledger__head, .hm-ledger__row, .hm-ledger__total, .hm-ledger-stage__orb, .hm-chip) { opacity: 1; translate: 0 0; scale: 1; }

@media (max-width: 1199px) {
  .hm-portal { --hm-ledger-w: min(800px, 100% - 140px); }
  .hm-ledger { padding: 28px 36px 40px; }
  .hm-ledger__amount { font-size: 38px; }
  .hm-ledger__amount--ask,
  .hm-ledger__amount--soon { font-size: 31px; }
  .hm-ledger__total .hm-ledger__amount { font-size: 54px; }
  .hm-chip--nadia { width: 320px; }
}
/* Tablet: the sheet takes the width; the chips sit at its corners. */
@media (max-width: 1023px) {
  .hm-portal { --hm-ledger-w: 100%; }
  .hm-ledger-stage { padding: 104px 0 110px; }
  .hm-ledger-stage__orb { left: -84px; top: 22px; width: 230px; height: 230px; }
  .hm-ledger-stage__bloom { right: -60px; }
  .hm-chip--nadia { top: 0; right: 24px; }
  .hm-chip--event { left: 24px; bottom: 26px; }
}
/* Phone: the sheet goes full width, each row folds to two lines, and the chips stack under it. */
@media (max-width: 767px) {
  .hm-ledger-stage { display: flex; flex-direction: column; padding: 56px 0 8px; }
  .hm-ledger-stage__glow { top: 40%; width: 160%; height: 900px; }
  .hm-ledger-stage__orb { left: auto; right: 6px; top: 0; width: 170px; height: 170px; }
  .hm-ledger-stage__bloom { right: auto; left: -80px; bottom: 120px; width: 360px; height: 260px; }
  .hm-ledger { padding: 22px 20px 48px; border-radius: 24px; }
  .hm-ledger__head { padding-bottom: 18px; }
  .hm-ledger__name { font-size: 17px; }
  .hm-ledger__row,
  .hm-ledger__total { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; min-height: 80px; padding: 14px 0; }
  .hm-ledger__total { min-height: 92px; padding-top: 18px; }
  .hm-ledger__quarter { grid-row: 1; grid-column: 1; font-size: 16px; }
  .hm-ledger__state { grid-row: 2; grid-column: 1; font-size: 11px; letter-spacing: 0.06em; }
  .hm-ledger__amount { grid-row: 1 / span 2; grid-column: 2; font-size: 30px; }
  .hm-ledger__amount--ask,
  .hm-ledger__amount--soon { font-size: 23px; }
  .hm-ledger__total .hm-ledger__amount { font-size: 38px; }
  .hm-chip { position: relative; inset: auto; }
  .hm-chip--nadia { align-self: flex-end; width: min(330px, 92%); margin-top: -30px; }
  .hm-chip--event { align-self: flex-start; width: min(280px, 80%); margin-top: 12px; }
  .hm-chip p.hm-chip__date { font-size: 28px; }
}

/* 6. How we work ----------------------------------------------------------------------------- */

/* One dose's journey: a lit path through the six steps, each with what it leaves behind. */
/* The box is cut to the steps' reach (toasts 14 to 426 px); the drawing's viewBox starts at
   y 40 so the curve sits where it always did. */
.hm-path { position: relative; height: 440px; }
.hm-path__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-path__svg path { fill: none; vector-effect: non-scaling-stroke; }
.hm-path__glow { stroke: url(#hm-path-line); stroke-width: 14; opacity: 0.18; filter: blur(6px); }
.hm-path__track { stroke: url(#hm-path-line); stroke-width: 2.5; stroke-linecap: round; }
.hm-path__pulse { stroke: #FFFFFF; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 60 2400; opacity: 0; filter: drop-shadow(0 0 6px #B99AF0) drop-shadow(0 0 14px #8A5CD0); }
[data-theme="light"] .hm-path__pulse { stroke: #8A5CD0; }
[data-shots] .hm-path__pulse { display: none; }
@media (prefers-reduced-motion: reduce) { .hm-path__pulse { display: none; } }

.hm-path__steps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hm-path__step { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.hm-path__node {
  position: absolute;
  left: -17px;
  top: -17px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ground);
  border: 1.5px solid #B99AF0;
  box-shadow: 0 0 0 5px var(--accent-tint), 0 0 22px rgba(139, 92, 246, 0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}
.hm-path__step--last .hm-path__node { border-color: #26A3B2; box-shadow: 0 0 0 5px rgba(38, 163, 178, 0.14), 0 0 22px rgba(38, 163, 178, 0.55); color: var(--cyan); }
.hm-path__label,
.hm-path__toast { position: absolute; left: 0; transform: translateX(var(--ax, -50%)); white-space: nowrap; }
.hm-path__label { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.hm-path__label small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }
.hm-path__label b { font-size: 30px; font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--text-1); }
/* up: the title sits just over the path, the toast above it; down: the mirror */
.hm-path__step--up .hm-path__label { bottom: 34px; }
.hm-path__step--up .hm-path__toast { bottom: 118px; }
.hm-path__step--down .hm-path__label { top: 34px; flex-direction: column-reverse; }
.hm-path__step--down .hm-path__toast { top: 118px; }
.hm-path__step:first-child { --ax: -38%; }
.hm-path__step--last { --ax: -62%; }
.hm-path__toast.toast { position: absolute; height: 64px; gap: 12px; padding: 0 18px 0 10px; }
.hm-path__toast .hm-toast__icon { width: 42px; height: 42px; }
.hm-path__toast .hm-toast__icon svg { width: 19px; height: 19px; }
.hm-path__icon--ok { background: linear-gradient(150deg, #5ED69C, #1F9D62) !important; border: 0 !important; color: #FFFFFF !important; box-shadow: 0 8px 18px -6px rgba(31, 157, 98, 0.6); }
.hm-path__icon--cyan { background: rgba(38, 163, 178, 0.14) !important; color: var(--cyan) !important; }

/* motion: the path draws, a light runs along it, each step lands as the light reaches it */
.js .hm-path__track, .js .hm-path__glow { stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400); transition: stroke-dashoffset 2.6s cubic-bezier(0.45, 0, 0.2, 1); }
.hm-path.is-in .hm-path__track, .hm-path.is-in .hm-path__glow, [data-shots] .hm-path__track, [data-shots] .hm-path__glow { stroke-dashoffset: 0; }
.hm-path.is-in .hm-path__pulse { opacity: 1; animation: hm-path-run 5.5s linear 2.6s infinite backwards; }
@keyframes hm-path-run { from { stroke-dashoffset: 60px; } to { stroke-dashoffset: calc(var(--len, 1400) * -1px); } }
.js .hm-path__node, .js .hm-path__label, .js .hm-path__toast { opacity: 0; transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-out), scale 0.6s var(--ease-out); transition-delay: calc(var(--i) * 0.42s + 0.25s); }
.js .hm-path__node { scale: 0.4; }
.js .hm-path__step--up .hm-path__label, .js .hm-path__step--up .hm-path__toast { translate: 0 16px; }
.js .hm-path__step--down .hm-path__label, .js .hm-path__step--down .hm-path__toast { translate: 0 -16px; }
.js .hm-path__toast { transition-delay: calc(var(--i) * 0.42s + 0.45s); }
.hm-path.is-in .hm-path__node, .hm-path.is-in .hm-path__label, .hm-path.is-in .hm-path__toast { opacity: 1; translate: 0 0; scale: 1; }

@media (max-width: 1199px) {
  .hm-path__toast.toast { height: 58px; padding-right: 14px; }
  .hm-path__toast .hm-toast__text strong { font-size: 14px; }
  .hm-path__toast .hm-toast__text span { font-size: 12px; }
  .hm-path__label b { font-size: 24px; }
}
/* Below 900 the path has no room for six results side by side: the steps stack down a lit line. */
@media (max-width: 899px) {
  .hm-path { height: auto; margin-top: 32px; }
  .hm-path__svg { display: none; }
  .hm-path__steps { position: relative; display: flex; flex-direction: column; gap: 30px; padding-left: 52px; }
  .hm-path__steps::before { content: ""; position: absolute; left: 16px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #9B7BDF, #B99AF0 70%, #26A3B2); box-shadow: 0 0 14px rgba(139, 92, 246, 0.5); }
  .hm-path__step { position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .hm-path__node { left: -52px; top: -4px; }
  .hm-path__label, .hm-path__toast.toast { position: static; transform: none; }
  .hm-path__label, .hm-path__step--down .hm-path__label { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; }
}

/* 7. Services bento --------------------------------------------------------------------------- */

.hm-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 420px;
  padding: 36px;
}
.hm-tile--short { min-height: 390px; }
.hm-tile--feature { background: linear-gradient(180deg, rgba(185, 154, 240, 0.12), rgba(255, 255, 255, 0.015)); border-color: rgba(205, 181, 244, 0.2); }
[data-theme="light"] .hm-tile--feature { background: linear-gradient(180deg, rgba(185, 154, 240, 0.1), rgba(255, 255, 255, 0.9) 60%), #FFFFFF; border-color: rgba(107, 66, 156, 0.18); }
.hm-tile--feature .hm-tile__text { color: var(--text-2); }
.hm-tile__art { position: absolute; right: 22px; top: 22px; width: 96px; filter: var(--hm-tile-art-shadow); }
.hm-tile__art--88 { width: 88px; top: 20px; }
.hm-tile__art--84 { width: 84px; }
.hm-tile__art--80 { width: 80px; right: 24px; }
.hm-tile__art--74 { width: 74px; right: 26px; }
.hm-tile__title { font-size: clamp(26px, 22px + 0.6vw, 30px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: var(--text-1); }
.hm-tile__title--lg { font-size: clamp(28px, 22.6px + 0.8vw, 34px); }
.hm-tile__text { max-width: 440px; font-size: 14.5px; line-height: 1.6; color: var(--text-3); }
.hm-tile__text--lg { font-size: 15.5px; }
.hm-tile > .mono,
.hm-tile__body > .mono { padding-right: 90px; }
.hm-tile .link-arrow { font-size: 13.5px; }
.hm-tile--membership { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; padding: 0; }
.hm-tile__body { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 40px; }
.hm-tile--membership .hm-tile__body > .mono { padding-right: 0; }
.hm-ticks { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 18px; font-size: 14.5px; color: var(--text-soft); }
.hm-ticks li { display: flex; align-items: center; gap: 10px; }
.hm-ticks li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hm-card-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.hm-card-art__glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, var(--hm-glow-3), transparent 70%); }
.hm-card-art__ghost {
  position: absolute;
  width: 270px;
  height: 170px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.16);
  transform: translate(30px, -40px) rotate(10deg);
}
[data-theme="light"] .hm-card-art__ghost { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)); border-color: rgba(21, 14, 32, 0.08); box-shadow: 0 20px 40px -24px rgba(46, 24, 84, 0.25); }
.hm-mcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 280px;
  height: 176px;
  padding: 20px 20px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2A1745 0%, #5B3190 38%, #9B72E6 68%, #8FE3EE 100%);
  transform: rotate(-7deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 60px -10px rgba(155, 114, 230, 0.7);
  color: #FFFFFF;
}
[data-theme="light"] .hm-mcard { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 30px 60px -20px rgba(46, 24, 84, 0.45), 0 0 60px -10px rgba(155, 114, 230, 0.4); }
.hm-mcard__sheen { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.32) 44%, rgba(255, 255, 255, 0) 58%); }
.hm-mcard__top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.hm-mcard__top img { width: auto; height: 12px; }
.hm-mcard small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.hm-mcard__chip { position: relative; width: 36px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15)); border: 1px solid rgba(255, 255, 255, 0.4); }
.hm-mcard__name { position: relative; display: flex; flex-direction: column; gap: 3px; }
.hm-mcard__name strong { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.hm-mcard__name small { letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.75); }

.hm-list { display: flex; flex-direction: column; margin-top: auto; padding: 6px 14px; border-radius: 16px; background: var(--hm-well); border: 1px solid var(--hm-well-line); }
.hm-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; border-bottom: 1px solid var(--hm-row-line); font-size: 13.5px; color: var(--text-soft); }
.hm-list > div:last-child { border-bottom: 0; }
.hm-st { display: flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.hm-st--ok { background: var(--hm-ok-bg); color: var(--hm-ok); }
.hm-st--warn { background: var(--hm-warn-bg); color: var(--hm-warn); }
.hm-st-text { font-size: 12.5px; font-weight: 400; color: var(--hm-cyan-text); white-space: nowrap; }
[data-theme="dark"] .hm-st-text { color: #9ED9E0; }

.hm-claim { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding: 14px 16px; border-radius: 16px; background: var(--hm-well); border: 1px solid var(--hm-well-line); }
[data-theme="light"] .hm-claim { background: #FFFFFF; }
.hm-claim__top { display: flex; align-items: center; justify-content: space-between; }
.hm-claim__top > span { display: flex; flex-direction: column; gap: 2px; }
.hm-claim__top strong { font-size: 13.5px; font-weight: 500; color: var(--text-1); }
.hm-claim__top small { font-size: 12px; color: var(--text-4); }
.hm-claim__top b { font-size: 15px; font-weight: 600; color: var(--text-1); }
.hm-claim__steps { display: flex; align-items: center; }
.hm-done { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.hm-done i,
.hm-pa__steps i {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0712' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--cyan-fill);
}
.hm-claim__link { flex: 1; min-width: 10px; height: 1px; margin: 0 8px; background: linear-gradient(90deg, var(--cyan-fill), rgba(143, 233, 242, 0.25)); }
.hm-tile .hm-claim + .link-arrow { margin-top: 2px; }

.hm-audits { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.hm-audits li {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--fill-1);
  border: 1px solid var(--hm-row-line);
  font-size: 13.5px;
  color: var(--text-soft);
}
.hm-audits li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D5BEFA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat,
    rgba(185, 154, 240, 0.2);
}
[data-theme="light"] .hm-audits li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B429C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat,
    rgba(185, 154, 240, 0.2);
}

.hm-meters { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
.hm-meters > div { display: flex; flex-direction: column; gap: 7px; }
.hm-meters span { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-soft); }
.hm-meters b { font-weight: 400; color: var(--accent-2); }
.hm-meters b.is-ok { color: var(--hm-ok); }
.hm-meters i { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--fill-3); }
.hm-meters i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #6B429C, #B99AF0); }
.hm-meters i.is-cyan::after { background: linear-gradient(90deg, #6B429C, #8FE9F2); }

.hm-tile--nadia {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-card);
  border: 1px solid var(--hm-nadia-tile-line);
  background: var(--hm-nadia-tile);
  box-shadow: var(--glass-shadow);
}
.hm-tile--nadia > .fx-grain { opacity: calc(var(--grain-opacity) * 0.7); }
.hm-tile--nadia .hm-tile__body { padding: 40px 12px 40px 40px; }
.hm-tile--nadia .hm-tile__body > .mono { padding-right: 0; }
.hm-tile--nadia .hm-tile__text { color: var(--text-label); }
[data-theme="dark"] .hm-tile--nadia .hm-tile__text { color: #BDB2CF; }
.hm-tile--nadia .hm-tile__title .grad-text { padding-right: 0.04em; }
.hm-link-strong { margin-top: auto; font-size: 14.5px !important; color: var(--text-1); }
.hm-stack-wrap { position: relative; }
.hm-stack { position: relative; width: 400px; height: 420px; }
.hm-stack__layer {
  position: absolute;
  left: 56px;
  top: var(--y);
  width: 152px;
  height: 152px;
  border-radius: 20px;
  background: rgb(var(--hm-stack-layer) / calc((0.1 + var(--i) * 0.035) * var(--hm-stack-alpha, 1)));
  border: 1px solid rgb(var(--hm-stack-line) / calc(0.26 + var(--i) * 0.07));
  transform: rotateX(60deg) rotateZ(45deg);
}
[data-theme="light"] .hm-stack__layer { background: rgb(139 92 246 / calc(0.075 + var(--i) * 0.026)); border-color: rgb(107 66 156 / calc(0.198 + var(--i) * 0.042)); }
.hm-stack__layer--top {
  background: linear-gradient(135deg, rgba(186, 150, 245, 0.95), rgba(107, 66, 156, 0.95));
  border-color: rgba(233, 221, 251, 0.75);
  box-shadow: 0 0 36px rgba(139, 92, 246, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
[data-theme="light"] .hm-stack__layer--top { background: linear-gradient(135deg, rgba(186, 150, 245, 0.95), rgba(107, 66, 156, 0.95)); border-color: rgba(233, 221, 251, 0.75); box-shadow: 0 0 36px rgba(139, 92, 246, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.hm-stack__tick { position: absolute; left: 244px; top: var(--y); width: 22px; height: 1px; background: var(--hm-stack-tick); }
.hm-stack__tick.is-on { background: rgba(233, 221, 251, 0.5); }
[data-theme="light"] .hm-stack__tick.is-on { background: rgba(107, 66, 156, 0.5); }
.hm-stack__label { position: absolute; left: 272px; top: var(--y); font-size: 13.5px; line-height: 20px; color: var(--hm-stack-label); white-space: nowrap; }
.hm-stack__label.is-on { font-weight: 600; color: var(--text-1); }
.hm-stack__beam { position: absolute; left: 131px; top: 70px; width: 2px; height: 50px; background: linear-gradient(180deg, rgba(236, 252, 255, 0.9), rgba(160, 236, 248, 0)); }
[data-theme="light"] .hm-stack__beam { background: linear-gradient(180deg, rgba(31, 143, 156, 0.6), rgba(31, 143, 156, 0)); }
.hm-stack__orb { position: absolute; left: 113px; top: 32px; width: 38px; height: 38px; box-shadow: 0 0 24px rgba(164, 230, 236, 0.7), 0 0 60px rgba(139, 92, 246, 0.6); }
[data-theme="light"] .hm-stack__orb { box-shadow: 0 0 24px rgba(31, 143, 156, 0.3), 0 0 60px rgba(139, 92, 246, 0.25); }
.hm-stack__name { position: absolute; left: 162px; top: 40px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--hm-stack-name); }

@media (max-width: 1199px) {
  .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tile { padding: 30px; }
  .hm-tile--membership,
  .hm-tile--nadia { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* Five single tiles on two columns: the last one runs full width, text left, meters right. */
  .hm-tile--ops { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 40px; min-height: 0; }
  .hm-tile--ops > :not(.hm-meters) { grid-column: 1; }
  .hm-tile--ops > .hm-meters { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; padding-right: 96px; }
}
@media (max-width: 767px) {
  .hm-bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hm-tile,
  .hm-tile--short { min-height: 0; padding: 26px 22px 24px; }
  .hm-tile > .mono { padding-right: 80px; }
  .hm-tile__art { right: 16px; top: 16px; width: 72px !important; }
  .hm-tile > .hm-tile__title { padding-right: 76px; }
  .hm-tile > .hm-list,
  .hm-tile > .hm-claim,
  .hm-tile > .hm-audits,
  .hm-tile > .hm-meters { margin-top: 10px; }
  .hm-tile--membership,
  .hm-tile--nadia { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .hm-tile__body { padding: 26px 22px 8px; }
  .hm-tile--nadia .hm-tile__body { padding: 26px 22px 8px; }
  .hm-card-art { min-height: 250px; margin-bottom: 8px; }
  .hm-card-art__glow { width: 300px; height: 300px; }
  .hm-mcard { width: 250px; height: 158px; padding: 16px 16px 15px; }
  .hm-card-art__ghost { width: 240px; height: 150px; }
  .hm-stack-wrap { height: 352px; overflow: hidden; }
  .hm-stack { left: 50%; margin-left: -200px; transform: scale(0.84); transform-origin: 50% 0; }
}

/* 8. Technology modules ---------------------------------------------------------------------------- */

.hm-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-mod {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 360px;
  padding: 26px 28px 28px;
  border-radius: 26px;
}
.hm-mod--short { height: 354px; }
.hm-mod--wide { grid-column: span 2; }
.hm-mod__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent); }
.hm-mod__head { display: flex; flex-direction: column; gap: 6px; }
.hm-mod__head h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.025em; color: var(--text-1); }
.hm-mod__head p { font-size: 14.5px; line-height: 1.5; color: var(--text-3); }
.hm-mod__panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--hm-panel);
  border: 1px solid var(--hm-panel-line);
  font-size: 13px;
  color: var(--text-soft);
}
.hm-mod__panel--pad { gap: 12px; padding: 16px; }
.hm-mod__panel svg { flex: none; }
.hm-claims__head { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 16px; }
.hm-claims__head strong { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.hm-claims__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; background: linear-gradient(180deg, #8A5CD0, #6B429C); color: #FFFFFF; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hm-claims__btn svg { width: 14px; height: 14px; }
.hm-claims__note { display: flex; align-items: center; gap: 10px; margin: 0 16px 12px; padding: 10px 12px; border-radius: 12px; background: rgba(185, 154, 240, 0.1); border: 1px solid rgba(185, 154, 240, 0.22); color: #E9DDFF; }
[data-theme="light"] .hm-claims__note { background: rgba(185, 154, 240, 0.075); border-color: rgba(107, 66, 156, 0.18); color: #6B429C; }
.hm-claims__note .orb { width: 18px; height: 18px; }
.hm-claims__row { display: grid; grid-template-columns: 1.1fr 1.4fr 100px 56px; align-items: center; height: 40px; padding: 0 16px; border-top: 1px solid var(--hm-row-line); }
.hm-claims__row .is-strong { color: var(--text-1); }
.hm-claims__row span:nth-child(3),
.hm-claims__row b { text-align: right; }
.hm-claims__row b { font-size: 12.5px; font-weight: 600; color: var(--hm-cyan-text); }
.hm-bv__who { display: flex; align-items: center; justify-content: space-between; }
.hm-bv__who > span { display: flex; flex-direction: column; }
.hm-bv__who strong,
.hm-pa__head strong { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.hm-bv__who small,
.hm-pa__head small { font-size: 12px; color: var(--text-4); }
.hm-bv__who b { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--hm-cyan-text); }
.hm-bv__who b svg { width: 14px; height: 14px; }
.hm-bv__rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hm-row-line); }
.hm-bv__rows dt { color: var(--text-4); }
.hm-bv__rows dd { color: var(--text-1); text-align: right; }
.hm-pa__head { display: flex; align-items: center; justify-content: space-between; }
.hm-pa__steps li { position: relative; display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; }
.hm-pa__steps li:not(:last-child)::after { content: ""; position: absolute; left: 9.5px; top: 22px; bottom: 0; width: 1px; background: rgba(143, 233, 242, 0.4); }
[data-theme="light"] .hm-pa__steps li:not(:last-child)::after { background: rgba(31, 143, 156, 0.28); }
.hm-pa__steps li { min-height: 34px; }
.hm-pa__steps span { flex: 1; color: var(--text-1); }
.hm-pa__steps small { font-size: 13px; color: var(--text-4); }
.hm-voice { display: flex; align-items: center; gap: 10px; }
.hm-voice__call { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(143, 233, 242, 0.14); color: #BDF3F8; }
[data-theme="light"] .hm-voice__call { background: rgba(31, 143, 156, 0.1); color: #127A86; }
.hm-voice__call svg { width: 14px; height: 14px; }
.hm-wave { display: flex; align-items: center; gap: 2px; height: 34px; }
.hm-wave i { width: 3px; height: var(--h); border-radius: 2px; background: linear-gradient(180deg, #BDF3F8, #8A5CD0); animation: mx-wave var(--t) ease-in-out var(--d) infinite; }
[data-theme="light"] .hm-wave i { background: linear-gradient(180deg, #26A3B2, #8A5CD0); }
.hm-bubble { max-width: 240px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; }
.hm-bubble--them { align-self: flex-start; max-width: 230px; border-radius: 12px 12px 12px 4px; background: var(--fill-3); color: var(--text-soft); }
.hm-bubble--nadia { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: rgba(139, 92, 246, 0.3); color: #FFFFFF; }
[data-theme="light"] .hm-bubble--nadia { background: rgba(139, 92, 246, 0.14); color: #2A2138; }
.hm-scribe__live { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-4); }
.hm-scribe__live i { width: 7px; height: 7px; border-radius: 50%; background: #F07A6A; animation: mx-breathe 1.6s ease-in-out infinite; }
.hm-scribe__note { font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.hm-scribe__note mark { padding: 0 3px; border-radius: 4px; background: rgba(185, 154, 240, 0.2); color: var(--text-1); }
.hm-scribe__codes { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; border-top: 1px solid var(--hm-row-line); font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); }

.hm-nadia-bar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: clamp(28px, 16px + 2.4vw, 52px);
  padding: 20px 22px 20px 30px;
  border-radius: 22px;
  border: 1px solid rgba(233, 221, 251, 0.2);
  background: radial-gradient(ellipse 45% 160% at 0% 50%, rgba(139, 92, 246, 0.34), rgba(139, 92, 246, 0) 70%), #0E0A16;
}
[data-theme="light"] .hm-nadia-bar { border-color: rgba(107, 66, 156, 0.18); background: radial-gradient(ellipse 45% 160% at 0% 50%, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0) 70%), #FFFFFF; box-shadow: var(--glass-shadow); }
.hm-nadia-bar__name { font-size: 26px; font-weight: 500; letter-spacing: -0.04em; color: var(--text-1); white-space: nowrap; }
.hm-nadia-bar p { font-size: 15px; line-height: 1.5; color: var(--text-label); }
[data-theme="dark"] .hm-nadia-bar p { color: #BDB2CF; }
.hm-nadia-bar .btn { margin-left: auto; --btn-h: 46px; --btn-fs: 14px; }

@media (max-width: 1199px) {
  .hm-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-mod--wide { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hm-modules { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hm-mod,
  .hm-mod--short { height: auto; padding: 22px 18px 18px; }
  .hm-mod--wide { grid-column: auto; }
  .hm-mod__panel { flex: none; }
  .hm-claims__head { padding: 0 12px; }
  .hm-claims__note { margin: 0 12px 10px; font-size: 12.5px; }
  .hm-claims__row { grid-template-columns: minmax(0, 1fr) 84px 50px; padding: 0 12px; }
  .hm-claims__row span:nth-child(2) { display: none; }
  .hm-nadia-bar { flex-wrap: wrap; gap: 10px 16px; padding: 22px 20px; }
  .hm-nadia-bar p { flex: 1 1 200px; }
  .hm-nadia-bar .btn { width: 100%; margin-left: 0; margin-top: 6px; }
}

/* 9. Sikka + press -------------------------------------------------------------------------------- */

/* The page's one dark panel (site.css .panel-ink, dark in both themes): a member's word and
   the press, in another key. Its top spacing is the section rhythm; the padding is the
   panel's own. */
.hm-voice-of { margin-top: var(--section-top); padding: clamp(56px, 28px + 4.6vw, 96px) 0; }
.hm-sikka-wrap { display: flex; flex-direction: column; gap: clamp(32px, 20px + 2.4vw, 56px); }
.hm-sikka {
  position: relative;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  min-height: 480px;
}
.hm-sikka__photo { position: relative; overflow: hidden; border-radius: 26px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hm-sikka__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.08) brightness(0.92); }
.hm-sikka__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(170deg, #8A5CD0 0%, #3B2166 60%, #150C24 100%);
  mix-blend-mode: color;
  opacity: 0.5;
}
.hm-sikka__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 52% 34%, rgba(17, 11, 27, 0) 40%, rgba(17, 11, 27, 0.5) 100%),
    linear-gradient(180deg, rgba(17, 11, 27, 0) 55%, rgba(17, 11, 27, 0.7) 100%);
}
.hm-sikka__body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 40px 40px 40px 72px; }
.hm-sikka__mark { position: relative; height: 44px; font-family: var(--font-serif); font-size: 120px; line-height: 0.5; color: var(--accent); }
.hm-sikka blockquote {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(28px, 6px + 2.8vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-1);
  text-wrap: pretty;
}
.hm-sikka blockquote em { font-style: italic; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; }
.hm-sikka__by { position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 26px; border-top: 1px solid var(--line); }
.hm-sikka__by .person__name { font-size: 17px; }
.hm-sikka__by .person__org { font-size: 14.5px; }
@media (max-width: 1023px) {
  .hm-sikka { grid-template-columns: 300px minmax(0, 1fr); min-height: 420px; }
  .hm-sikka__body { padding: 32px 8px 32px 40px; gap: 28px; }
}
@media (max-width: 767px) {
  .hm-sikka { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hm-sikka__photo { height: 300px; border-radius: 22px; }
  .hm-sikka__body { padding: 32px 4px 0; gap: 22px; }
  .hm-sikka__mark { height: 34px; font-size: 96px; }
}

/* 10. The future of RCM + the film ------------------------------------------------------------------- */

.hm-eras { display: grid; gap: 28px; }
.hm-era { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 0 0; border-top: 1px solid var(--border-strong); }
.hm-era::before { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 1px; background: var(--era); box-shadow: 0 0 12px var(--era); }
.hm-era--today { --era: var(--text-4); }
.hm-era--with { --era: var(--accent-2); }
.hm-era--result { --era: var(--cyan); }
.hm-era__tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--era); }
.hm-era--today .hm-era__tag { color: var(--text-4); }
.hm-era h3 { font-size: clamp(19px, 17px + 0.4vw, 21px); font-weight: 500; letter-spacing: -0.025em; color: var(--text-1); }
.hm-era p { font-size: 15px; line-height: 1.6; color: var(--text-3); }
@media (min-width: 768px) {
  .hm-eras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Before and after: the practice manager's day today (a jumbled stack of chores and the hours they add up
   to) against the same practice with Medico (calm rows from one system, lit by the lilac glow). Once in
   view (home.js) the chores tumble in while the hours count up, then the rows settle; still, all in place. */
.hm-ba { position: relative; isolation: isolate; display: grid; gap: 20px; margin-top: 56px; }
/* the page's lilac light, spilling out from behind the Medico card */
.hm-ba::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -12%;
  bottom: -18%;
  width: 72%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), var(--glow-mid) 58%, transparent 78%);
  filter: blur(20px);
  pointer-events: none;
}
.hm-ba__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
  padding: clamp(26px, 18px + 1.6vw, 44px);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.hm-ba__card--today {
  border: 1px solid var(--border);
  background:
    radial-gradient(circle, var(--border-strong) 1px, transparent 1.5px) 0 0 / 20px 20px,
    var(--fill-1);
}
.hm-ba__card--with {
  border: 1px solid var(--feature-border);
  background: var(--feature-bg);
  box-shadow: var(--shadow-pop);
}
.hm-ba__light {
  position: absolute;
  z-index: -1;
  top: -42%;
  right: -38%;
  width: 130%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-strong), var(--glow-mid) 55%, transparent 76%);
  pointer-events: none;
}
.hm-ba__card--with > .fx-grain { z-index: -1; }

.hm-ba__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.hm-ba__card--with .hm-ba__tag { border-color: var(--feature-border); background: var(--accent-tint); color: var(--accent); }

.hm-ba__total { display: flex; flex-direction: column; gap: 10px; }
.hm-ba__big {
  font-size: clamp(44px, 26px + 2.8vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hm-ba__big em {
  padding-right: 0.08em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hm-ba__sub { font-size: 16px; line-height: 1.45; color: var(--text-3); }

/* today: the chores, staggered and a little crooked, each with its time */
.hm-ba__chores { display: flex; flex-direction: column; }
.hm-ba__chores li {
  position: relative;
  z-index: var(--i);
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: calc(100% - var(--x));
  margin: 0 0 -2px var(--x);
  padding: 11px 11px 11px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--glass-shadow), var(--shadow-float);
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-1);
  transform: rotate(var(--r));
}
.hm-ba__chores li + li { margin-top: 4px; }
.hm-ba__chores li > span:first-child { min-width: 0; }
.hm-ba__pill {
  flex: none;
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--fill-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}

/* with Medico: the same practice's numbers, in tidy rows, and Nadia answering */
.hm-ba__rows { display: flex; flex-direction: column; gap: 10px; }
.hm-ba__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 20px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}
.hm-ba__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); }
.hm-ba__icon svg { width: 18px; height: 18px; }
.hm-ba__icon--ok { background: var(--success-bg); color: var(--success); }
.hm-ba__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-ba__what strong { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--text-1); }
.hm-ba__what span { font-size: 13.5px; color: var(--text-3); }
.hm-ba__amt { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-ba__row--lead .hm-ba__amt {
  font-size: clamp(22px, 18px + 0.5vw, 26px);
  letter-spacing: -0.035em;
  background: var(--grad-text-2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hm-ba__ask { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.hm-ba__me {
  align-self: flex-end;
  max-width: 86%;
  padding: 10px 16px;
  border: 1px solid var(--feature-border);
  border-radius: 18px 18px 6px 18px;
  background: var(--accent-tint);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-1);
}
.hm-ba__ai { display: flex; align-items: flex-start; gap: 12px; padding-right: 8%; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.hm-ba__ai .orb { width: 22px; height: 22px; margin-top: 1px; }
.hm-ba__ai b { font-weight: 500; color: var(--text-1); }

/* the motion: armed by home.js only when it will play. Each card plays as it comes into view, and
   Medico's rows only once today's chores have landed. */
.hm-ba.is-armed .hm-ba__chores li { opacity: 0; transform: translate(14px, -46px) rotate(calc(var(--r) * -5)); }
.hm-ba.is-armed .hm-ba__rows > li { opacity: 0; transform: translateY(14px); }
.hm-ba.is-armed .hm-ba__light { opacity: 0.35; }
.hm-ba.is-armed .hm-ba__card.is-in .hm-ba__chores li {
  opacity: 1;
  transform: rotate(var(--r));
  transition: opacity 0.4s ease-out, transform 0.9s cubic-bezier(0.34, 1.5, 0.64, 1);
  transition-delay: calc(var(--i) * 150ms);
}
.hm-ba.is-armed .hm-ba__card.is-in .hm-ba__rows > li {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease-out, transform 0.8s var(--ease-out);
  transition-delay: calc(150ms + var(--i) * 170ms);
}
.hm-ba.is-armed .hm-ba__card.is-in .hm-ba__light { opacity: 1; transition: opacity 1.6s ease-out; }

@media (min-width: 900px) {
  .hm-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .hm-ba::before { right: -24%; bottom: -6%; width: 124%; height: 56%; }
}

.hm-future__actions { margin-top: 48px; }

@media (max-width: 767px) {
  .hm-ba { margin-top: 36px; }
  .hm-ba__card { gap: 26px; padding: 26px 18px 22px; }
  .hm-ba__tag { margin-left: 4px; }
  .hm-ba__total { padding-inline: 4px; }
  .hm-ba__chores li { gap: 12px; margin-left: calc(var(--x) * 0.5); max-width: calc(100% - var(--x) * 0.5); padding: 10px 9px 10px 14px; font-size: 14px; }
  .hm-ba__row { grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "icon amt" "icon what"; row-gap: 2px; padding: 14px 16px 14px 12px; }
  .hm-ba__icon { grid-area: icon; align-self: start; width: 38px; height: 38px; }
  .hm-ba__amt { grid-area: amt; }
  .hm-ba__what { grid-area: what; }
  .hm-ba__ask { padding-inline: 4px; }
  .hm-future__actions { flex-direction: column; align-items: stretch; max-width: 340px; margin-inline: auto; }
}

/* The film dialog. */
.hm-film {
  width: min(1100px, 100% - 32px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.hm-film::backdrop { background: var(--hm-film-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hm-film__inner { position: relative; }
.hm-film__close { position: absolute; right: 0; top: -56px; background: var(--surface); }
.hm-film[open] { animation: hm-film-in 0.35s var(--ease-out); }
@keyframes hm-film-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* 11. Marquee, resources -------------------------------------------------------------------------------- */

.hm-marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: clamp(100px, 70px + 5.6vw, 150px);
  margin-top: var(--section-top);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.hm-marquee__track { display: flex; flex: none; width: max-content; transform: translateX(-120px); animation: hm-marquee 48s linear infinite; }
@keyframes hm-marquee { from { transform: translateX(-120px); } to { transform: translateX(calc(-50% - 120px)); } }
.hm-marquee__set { display: flex; flex: none; align-items: center; gap: 44px; padding-right: 44px; white-space: nowrap; font-size: clamp(40px, 26px + 2.6vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.hm-marquee__set span { color: var(--hm-marquee-text); }
.hm-marquee__set em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.125em; letter-spacing: -0.015em; color: var(--accent-2); }
.hm-marquee__set i {
  flex: none;
  width: 68px;
  height: 20px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Crect x='0' y='2' width='5' height='6' rx='1.2'/%3E%3Crect x='5' y='4.25' width='22' height='1.5'/%3E%3Cpath d='M27 4.25L34 5L27 5.75Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Crect x='0' y='2' width='5' height='6' rx='1.2'/%3E%3Crect x='5' y='4.25' width='22' height='1.5'/%3E%3Cpath d='M27 4.25L34 5L27 5.75Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-theme="light"] .hm-marquee__set i { background: #7E52C8; }
@media (max-width: 767px) {
  .hm-marquee__set { gap: 26px; padding-right: 26px; }
  .hm-marquee__set i { width: 48px; height: 14px; }
}

.hm-res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm-res > li { display: flex; }
.hm-res__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 380px;
  padding: 26px 26px 30px;
  border-radius: 26px;
}
.hm-res__card--feature { background: linear-gradient(180deg, rgba(185, 154, 240, 0.12), rgba(255, 255, 255, 0.015)); border-color: rgba(205, 181, 244, 0.2); }
[data-theme="light"] .hm-res__card--feature { background: linear-gradient(180deg, rgba(185, 154, 240, 0.1), rgba(255, 255, 255, 0.9) 60%), #FFFFFF; border-color: rgba(107, 66, 156, 0.18); }
.hm-res__art { display: flex; align-items: center; justify-content: center; height: 170px; margin-bottom: 8px; border-radius: 18px; background: var(--hm-res-glow); }
.hm-res__art img { width: 132px; filter: var(--hm-res-art-shadow); animation: mx-float 8s ease-in-out infinite; }
.hm-res > li:nth-child(2) img { width: 124px; animation-duration: 9s; animation-delay: -3s; }
.hm-res > li:nth-child(3) img { width: 128px; animation-duration: 10s; animation-delay: -6s; }
.hm-res > li:nth-child(4) img { width: 136px; animation-duration: 9s; animation-delay: -1s; }
.hm-res h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; color: var(--text-1); }
.hm-res p { font-size: 14.5px; line-height: 1.6; color: var(--text-3); }
.hm-res__card--feature p { color: var(--text-2); }
@media (max-width: 1099px) {
  .hm-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-res__card { min-height: 0; }
}
@media (max-width: 559px) {
  .hm-res { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hm-res__card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; padding: 18px; }
  .hm-res__art { flex: none; width: 84px; height: 84px; margin: 0; border-radius: 16px; }
  .hm-res__art img { width: 72px !important; }
  .hm-res h3 { flex: 1; font-size: 20px; }
  .hm-res p { flex-basis: 100%; }
}

/* Reduced motion: the comets and toasts rest where the board drew them. */
@media (prefers-reduced-motion: reduce) {
  .hm-marquee__track { transform: translateX(-120px); }
}