/*
 * The home hero (index.blade.php .hstar, behind config coveryou.home_stars). Brand colours only.
 * D-182 / D-183 / D-184 (owner, 31 Oct 2026): heading, subheading and the #HarDoctorHogaInsured brush on the left; the
 * products on the right as an interconnected network, PI glowing.
 * D-185 (owner: "try some other style, the products need not be in bubbles; the illustration has shifted down, it needs
 * to be on the same screen"): each product is a small glass chip (icon + name) sitting on the network lines, PI a larger
 * glowing coral chip. The network is wide and short and its height comes from the room left above the illustration
 * strip (full width, 15.83vw tall), so the heading, the network and the illustration share the first screen.
 * OLD (D-184): glass bubbles 13-29% of a square cluster with the names inside, about 600px tall.
 */
.homepage-figma-bg .hstar {
  --room: clamp(300px, calc(100vh - 15.83vw - 150px), 480px); /* the hero's height above the illustration */
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 24px 44px;
  max-width: 1320px; margin: 0 auto; padding: clamp(8px, 2vh, 28px) clamp(20px, 4vw, 56px) clamp(10px, 2vh, 24px);
}

/* the copy */
.homepage-figma-bg .hstar__copy h1 {
  margin: 0; text-align: left; text-transform: none !important; color: #15110f;
  font: 700 clamp(36px, min(4.4vw, calc(var(--room) * .14)), 66px)/1.02 var(--cy-font, Inter, sans-serif); letter-spacing: -.045em;
}
.homepage-figma-bg .hstar__copy h1 .gradient-num {
  background: linear-gradient(248.55deg, #f05d49 .89%, #89352a 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.homepage-figma-bg .hstar__copy .hero-sub {
  margin: clamp(10px, 2vh, 20px) 0 0; max-width: 46ch; text-align: left; font: 400 clamp(15px, 1.15vw, 18px)/1.6 var(--cy-font, Inter, sans-serif); color: #4a423d;
}
.homepage-figma-bg .hstar__copy .brush-banner.hstar__brush { display: block; width: auto; max-width: 100%; margin: clamp(12px, 2.4vh, 26px) 0 0 -10px; }
.homepage-figma-bg .hstar__brush .brush-bg { width: auto; max-width: 100%; height: clamp(52px, calc(var(--room) * .17), 84px); margin: 0; }

/* the network: wide and short; chips are centred on points given in % of its width and height */
.hstar__map { position: relative; width: 100%; height: var(--room); }
.hstar__net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hstar__link { stroke: rgba(240, 93, 73, .3); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hstar__link--pi { stroke: rgba(240, 93, 73, .5); stroke-width: 1.6; }
.hstar__pulse { stroke: #f05d49; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; vector-effect: non-scaling-stroke; opacity: 0; filter: drop-shadow(0 0 3px rgba(240, 93, 73, .8)); }
.hstar__junction { position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #f05d49, 0 0 0 4px rgba(240, 93, 73, .12); }

.hstar__chip {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; white-space: nowrap; text-decoration: none; color: #15110f;
  background: linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72)); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .14), 0 14px 30px -18px rgba(194, 58, 36, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .25s, color .25s, box-shadow .25s, scale .25s;
}
.hstar__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff1ee; color: #e5533f; box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .2); }
.hstar__ic .cy-icon { width: 19px; height: 19px; stroke-width: 1.8; }
.hstar__lbl { font: 600 14px/1.2 var(--cy-font, Inter, sans-serif); letter-spacing: -.01em; }
.hstar__chip:hover, .hstar__chip:focus-visible { scale: 1.05; color: #c9412e; box-shadow: inset 0 0 0 1.5px rgba(240, 93, 73, .45), 0 18px 34px -16px rgba(194, 58, 36, .6); }
.hstar__chip:hover .hstar__ic, .hstar__chip:focus-visible .hstar__ic { background: linear-gradient(140deg, #f7836f, #e5533f); color: #fff; }
.hstar__chip:focus-visible { outline: 2px solid #c9412e; outline-offset: 3px; }

/* PI: the larger, glowing chip in the middle, a light running round its edge */
.hstar__chip--pi { z-index: 3; gap: 14px; padding: 10px 26px 10px 10px; color: #fff; border: 0;
  background: linear-gradient(135deg, #f98a76, #f05d49 55%, #c9412e);
  box-shadow: 0 0 0 7px rgba(240, 93, 73, .12), 0 0 0 15px rgba(240, 93, 73, .06), 0 24px 50px -16px rgba(229, 83, 63, .8); }
.hstar__chip--pi::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--hstar-a, 0deg), transparent 0 72%, rgba(255, 255, 255, .95) 84%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hstar__chip--pi .hstar__ic { width: 52px; height: 52px; background: rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.hstar__chip--pi .hstar__ic .cy-icon { width: 28px; height: 28px; }
.hstar__chip--pi .hstar__lbl { font-size: 18px; font-weight: 700; }
.hstar__chip--pi:hover, .hstar__chip--pi:focus-visible { color: #fff; box-shadow: 0 0 0 7px rgba(240, 93, 73, .16), 0 0 0 15px rgba(240, 93, 73, .08), 0 28px 56px -16px rgba(229, 83, 63, .9); }
.hstar__chip--pi:hover .hstar__ic { background: rgba(255, 255, 255, .3); }
.hstar__glow { position: absolute; left: 50%; top: 50%; z-index: -1; width: 150%; aspect-ratio: 1.6; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(247, 131, 111, .38), rgba(247, 131, 111, .1) 60%, transparent); }

@property --hstar-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  .hstar__chip { animation: hstar-in .6s cubic-bezier(.2, .8, .3, 1.2) var(--d, 0s) both; }
  .hstar__chip--pi::before { animation: hstar-spin 3.6s linear infinite; }
  .hstar__glow { animation: hstar-glow 3.2s ease-in-out infinite; }
  .hstar__link { stroke-dasharray: 6 5; animation: hstar-flow 2.4s linear infinite; }
  .hstar__pulse { animation: hstar-pulse var(--t) ease-in-out var(--d) infinite; }
}
@keyframes hstar-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes hstar-spin { to { --hstar-a: 360deg; } }
@keyframes hstar-glow { 0%, 100% { opacity: .7; scale: .94; } 50% { opacity: 1; scale: 1.06; } }
@keyframes hstar-flow { to { stroke-dashoffset: -22; } }
@keyframes hstar-pulse { 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } }

/* narrower laptops: smaller chips */
@media (max-width: 1279px) {
  .hstar__chip { gap: 8px; padding: 5px 12px 5px 5px; }
  .hstar__ic { width: 30px; height: 30px; }
  .hstar__ic .cy-icon { width: 17px; height: 17px; }
  .hstar__lbl { font-size: 12.5px; }
  .hstar__chip--pi { padding: 8px 20px 8px 8px; }
  .hstar__chip--pi .hstar__ic { width: 44px; height: 44px; }
  .hstar__chip--pi .hstar__lbl { font-size: 16px; }
}
/* tablets and phones: copy above; the products as a grid of chips, PI first (no lines: chips would collide) */
@media (max-width: 991px) {
  .homepage-figma-bg .hstar { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .homepage-figma-bg .hstar__copy { text-align: center; }
  .homepage-figma-bg .hstar__copy h1 { font-size: clamp(34px, 6vw, 52px); }
  .homepage-figma-bg .hstar__copy h1, .homepage-figma-bg .hstar__copy .hero-sub { text-align: center; margin-inline: auto; }
  .homepage-figma-bg .hstar__copy .brush-banner.hstar__brush { margin-inline: auto; display: flex; justify-content: center; }
  .homepage-figma-bg .hstar__brush .brush-bg { height: 60px; }
  .hstar__map { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto; }
  .hstar__net, .hstar__junction, .hstar__glow { display: none; }
  .hstar__chip { position: static; translate: none; white-space: normal; min-width: 0; }
  .hstar__chip--pi { grid-column: 1 / -1; justify-self: center; margin-bottom: 8px; }
}
@media (max-width: 575px) {
  .homepage-figma-bg .hstar { padding-inline: 14px; }
  .homepage-figma-bg .hstar__copy h1 { font-size: 34px; }
  .homepage-figma-bg .hstar__copy .hero-sub { font-size: 15px; }
  .homepage-figma-bg .hstar__brush .brush-bg { height: 52px; }
  .hstar__lbl { font-size: 12.5px; }
  .hstar__chip--pi .hstar__lbl { font-size: 15px; }
}
/* short laptop screens (the network is only about 300px tall) and narrow laptops: more compact chips */
@media (min-width: 992px) and (max-height: 760px), (min-width: 992px) and (max-width: 1150px) {
  .hstar__chip { gap: 6px; padding: 4px 11px 4px 4px; }
  .hstar__ic { width: 26px; height: 26px; }
  .hstar__ic .cy-icon { width: 15px; height: 15px; }
  .hstar__lbl { font-size: 12px; }
  .hstar__chip--pi { gap: 10px; padding: 6px 16px 6px 6px; box-shadow: 0 0 0 5px rgba(240, 93, 73, .12), 0 0 0 11px rgba(240, 93, 73, .06), 0 20px 40px -16px rgba(229, 83, 63, .8); }
  .hstar__chip--pi .hstar__ic { width: 38px; height: 38px; }
  .hstar__chip--pi .hstar__ic .cy-icon { width: 21px; height: 21px; }
  .hstar__chip--pi .hstar__lbl { font-size: 15px; }
}

/* ===================== D-186 (owner, 31 Oct: "heading, subheading and the # line in the middle; all products on the left and right, connected; the illustration below") =====================
   The copy is centred over the full hero width; the products sit on two arcs either side, linked to each other and each
   flowing into the copy along a curved line with a light running down it. Same height budget (--room), so the illustration
   stays on the first screen. */
.homepage-figma-bg .hstar--sides { position: relative; display: flex; justify-content: center; align-items: center; min-height: var(--room); max-width: 1440px; }
.homepage-figma-bg .hstar--sides .hstar__copy { position: relative; z-index: 3; width: min(40%, 560px); text-align: center; }
.homepage-figma-bg .hstar--sides .hstar__copy h1 { text-align: center; font-size: clamp(34px, min(3.6vw, calc(var(--room) * .13)), 60px); }
.homepage-figma-bg .hstar--sides .hstar__copy .hero-sub { text-align: center; margin-inline: auto; max-width: 44ch; }
.homepage-figma-bg .hstar--sides .hstar__copy .brush-banner.hstar__brush { display: flex; justify-content: center; margin-inline: auto; }
.hstar--sides .hstar__map { position: absolute; inset: 0; height: auto; z-index: 1; }
.hstar--sides .hstar__link, .hstar--sides .hstar__pulse { fill: none; }
.hstar--sides .hstar__link--chain { stroke: rgba(240, 93, 73, .22); stroke-dasharray: 2 6; }
/* a soft pool of light behind the copy where the lines arrive */
.homepage-figma-bg .hstar--sides .hstar__copy::before { content: ""; position: absolute; inset: -14% -10%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .92), rgba(255, 255, 255, .6) 55%, transparent); }
@media (max-width: 991px) {
  .homepage-figma-bg .hstar--sides { display: grid; min-height: 0; }
  .homepage-figma-bg .hstar--sides .hstar__copy { width: auto; }
  .homepage-figma-bg .hstar--sides .hstar__copy::before { display: none; }
  .hstar--sides .hstar__map { position: static; }
}

/* ===================== D-187 (owner, 31 Oct: "instead of bars, try some blob, asymmetrical shape") =====================
   The product chips are soft organic blobs instead of pills: each has its own uneven outline (eight-value border-radius)
   that slowly morphs, so no two look alike; PI is the biggest blob. Same footprint, so the layout and spacing hold. */
.hstar__chip { --b1: 62% 38% 55% 45% / 58% 46% 54% 42%; --b2: 44% 56% 40% 60% / 48% 60% 40% 52%; border-radius: var(--b1); padding: 9px 22px 9px 12px; }
.hstar__chip:nth-of-type(3n+1) { --b1: 48% 52% 64% 36% / 60% 42% 58% 40%; --b2: 60% 40% 46% 54% / 44% 56% 46% 56%; }
.hstar__chip:nth-of-type(3n+2) { --b1: 70% 30% 50% 50% / 46% 58% 42% 54%; --b2: 52% 48% 66% 34% / 58% 44% 56% 42%; }
.hstar__ic { border-radius: 54% 46% 58% 42% / 50% 56% 44% 50%; }
.hstar__chip--pi { --b1: 58% 42% 64% 36% / 62% 48% 52% 38%; --b2: 46% 54% 42% 58% / 48% 62% 38% 52%; padding: 14px 30px 14px 14px; }
.hstar__chip--pi::before { border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .hstar__chip { animation: hstar-in .6s cubic-bezier(.2, .8, .3, 1.2) var(--d, 0s) both, hstar-morph 7s ease-in-out calc(var(--d, 0s) + .6s) infinite alternate; }
  .hstar__chip:nth-of-type(odd) { animation-duration: .6s, 9s; }
}
@keyframes hstar-morph { from { border-radius: var(--b1); } to { border-radius: var(--b2); } }
/* compact sizes keep the blob, with a little less padding */
@media (min-width: 992px) and (max-height: 760px), (min-width: 992px) and (max-width: 1150px) {
  .hstar__chip { padding: 6px 16px 6px 9px; }
  .hstar__chip--pi { padding: 9px 22px 9px 9px; }
}
@media (max-width: 991px) { .hstar__chip { padding: 8px 18px 8px 10px; } }

/* ===================== D-188 (owner, 31 Oct: "no, didn't like the blobs; use squircle or circle") =====================
   Each product is a squircle tile (a superellipse, like an app icon) holding its icon, with the name under it; PI is a
   large glowing coral circle with its name under it. The chips' pill / blob backgrounds are gone. OLD (D-187): blobs. */
.hstar__chip {
  --sq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C88 0 100 12 100 50S88 100 50 100 0 88 0 50 12 0 50 0Z'/%3E%3C/svg%3E");
  flex-direction: column; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; filter: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; white-space: nowrap;
}
.hstar__chip::after { display: none; }
.hstar__chip .hstar__ic {
  position: relative; width: 58px; height: 58px; border-radius: 0; background: none; box-shadow: none; color: #e5533f;
  filter: drop-shadow(0 12px 14px rgba(194, 58, 36, .22)) drop-shadow(0 0 1px rgba(240, 93, 73, .4));
}
/* the squircle itself: a masked layer behind the icon */
.hstar__chip .hstar__ic::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, #fff 0%, #fff6f3 55%, #ffe4dd 100%);
  -webkit-mask: var(--sq) center / 100% 100% no-repeat; mask: var(--sq) center / 100% 100% no-repeat;
  transition: background .25s;
}
.hstar__chip .hstar__ic .cy-icon { position: relative; width: 26px; height: 26px; stroke-width: 1.7; }
.hstar__chip .hstar__lbl { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600; box-shadow: 0 0 0 1px rgba(21, 17, 15, .05); }
.hstar__chip:hover, .hstar__chip:focus-visible { scale: 1.06; box-shadow: none; filter: none; color: #c9412e; }
.hstar__chip:hover .hstar__ic, .hstar__chip:focus-visible .hstar__ic { background: none; color: #fff; }
.hstar__chip:hover .hstar__ic::before, .hstar__chip:focus-visible .hstar__ic::before { background: linear-gradient(140deg, #f7836f, #e5533f); }

/* PI: a large circle, solid coral, glowing, a light running round its rim */
.hstar__chip--pi { gap: 8px; padding: 0; color: #c9412e; }
.hstar__chip--pi .hstar__ic {
  width: 104px; height: 104px; border-radius: 50%; color: #fff; filter: none;
  background: radial-gradient(circle at 34% 26%, #ffb3a3, #f7836f 32%, #f05d49 62%, #c9412e);
  box-shadow: 0 0 0 8px rgba(240, 93, 73, .12), 0 0 0 18px rgba(240, 93, 73, .06), 0 24px 48px -16px rgba(229, 83, 63, .8);
}
.hstar__chip--pi .hstar__ic::before {
  display: block; inset: -4px; z-index: 1; border-radius: 50%; -webkit-mask: none; mask: none;
  background: conic-gradient(from var(--hstar-a, 0deg), transparent 0 72%, rgba(255, 255, 255, .95) 84%, transparent 94%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.hstar__chip--pi::before { display: none; }
.hstar__chip--pi .hstar__ic .cy-icon { width: 46px; height: 46px; }
.hstar__chip--pi .hstar__lbl { padding: 4px 14px; background: #fff; color: #c9412e; font-size: 16px; font-weight: 700; box-shadow: 0 0 0 1px rgba(240, 93, 73, .25), 0 10px 20px -12px rgba(229, 83, 63, .6); }
.hstar__chip--pi .hstar__glow { top: 52px; width: 240px; aspect-ratio: 1; }
.hstar__chip--pi:hover, .hstar__chip--pi:focus-visible { color: #c9412e; }
.hstar__chip--pi:hover .hstar__ic::before { background: conic-gradient(from var(--hstar-a, 0deg), transparent 0 72%, rgba(255, 255, 255, .95) 84%, transparent 94%); }
@media (prefers-reduced-motion: no-preference) { .hstar__chip--pi .hstar__ic::before { animation: hstar-spin 3.6s linear infinite; } }

/* short and narrow laptop screens: smaller tiles */
@media (min-width: 992px) and (max-height: 760px), (min-width: 992px) and (max-width: 1150px) {
  .hstar__chip { gap: 4px; padding: 0; }
  .hstar__chip .hstar__ic { width: 42px; height: 42px; }
  .hstar__chip .hstar__ic .cy-icon { width: 20px; height: 20px; }
  .hstar__chip .hstar__lbl { font-size: 11.5px; padding: 1px 7px; }
  .hstar__chip--pi { padding: 0; }
  .hstar__chip--pi .hstar__ic { width: 74px; height: 74px; box-shadow: 0 0 0 6px rgba(240, 93, 73, .12), 0 0 0 13px rgba(240, 93, 73, .06), 0 20px 40px -16px rgba(229, 83, 63, .8); }
  .hstar__chip--pi .hstar__ic .cy-icon { width: 34px; height: 34px; }
  .hstar__chip--pi .hstar__lbl { font-size: 13.5px; }
  .hstar__chip--pi .hstar__glow { top: 37px; width: 170px; }
}
/* tablets and phones: PI on top, the other eight as a 4 x 2 grid of squircle tiles */
@media (max-width: 991px) {
  .hstar__map { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; }
  .hstar__chip { padding: 0; white-space: normal; text-align: center; }
  .hstar__chip .hstar__lbl { padding: 0; background: none; box-shadow: none; font-size: 12px; line-height: 1.25; }
  .hstar__chip--pi .hstar__lbl { padding: 4px 14px; background: #fff; font-size: 15px; }
}
@media (max-width: 575px) {
  .hstar__chip .hstar__ic { width: 52px; height: 52px; }
  .hstar__chip .hstar__ic .cy-icon { width: 24px; height: 24px; }
  .hstar__chip .hstar__lbl { font-size: 11px; }
  .hstar__chip--pi .hstar__ic { width: 88px; height: 88px; }
  .hstar__chip--pi .hstar__ic .cy-icon { width: 40px; height: 40px; }
}

/* ===================== D-189 (owner, 31 Oct, with a sketch: "everything the same shape; circles and connections like this") =====================
   Every product (PI too) is a circle of one size with its icon and name inside, on a dashed oval orbit round the centred
   copy; lights travel round the ring. PI is the coral, glowing circle, a touch larger. */
.hstar--orbit { --dia: clamp(66px, calc(var(--room) * .2), 90px); }
.hstar--orbit .hstar__ring { stroke: rgba(240, 93, 73, .4); stroke-width: 1.6; fill: none; }
.hstar--orbit .hstar__orbitpulse { fill: none; stroke: #f05d49; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2.5 97.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(240, 93, 73, .8)); }
@media (prefers-reduced-motion: no-preference) { .hstar--orbit .hstar__orbitpulse { animation: hstar-orbit 12s linear var(--d) infinite; } }
@media (prefers-reduced-motion: reduce) { .hstar--orbit .hstar__orbitpulse { display: none; } }
@keyframes hstar-orbit { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.hstar--orbit .hstar__chip {
  width: var(--dia); height: var(--dia); min-width: 0; padding: 0 calc(var(--dia) * .08); gap: 3px; box-sizing: border-box; flex-direction: column; justify-content: center; text-align: center; white-space: normal;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .95); filter: none;
  background: radial-gradient(circle at 32% 26%, #fff, #fff6f3 60%, #ffe9e3);
  box-shadow: inset 0 0 0 1.5px rgba(240, 93, 73, .18), 0 16px 30px -18px rgba(194, 58, 36, .55);
}
.hstar--orbit .hstar__chip .hstar__ic { width: auto; height: auto; filter: none; background: none; box-shadow: none; color: #e5533f; }
.hstar--orbit .hstar__chip .hstar__ic::before { display: none; }
.hstar--orbit .hstar__chip .hstar__ic .cy-icon { width: calc(var(--dia) * .3); height: calc(var(--dia) * .3); }
.hstar--orbit .hstar__chip .hstar__lbl { padding: 0; background: none; box-shadow: none; font-size: clamp(9.5px, calc(var(--dia) * .125), 11.5px); line-height: 1.15; font-weight: 600; text-wrap: balance; }
.hstar--orbit .hstar__chip:hover, .hstar--orbit .hstar__chip:focus-visible { color: #fff; background: radial-gradient(circle at 32% 26%, #ffb3a3, #f7836f 40%, #e5533f); box-shadow: 0 18px 34px -14px rgba(229, 83, 63, .8); }
.hstar--orbit .hstar__chip:hover .hstar__ic, .hstar--orbit .hstar__chip:focus-visible .hstar__ic { color: #fff; }

.hstar--orbit .hstar__chip--pi { width: calc(var(--dia) * 1.15); height: calc(var(--dia) * 1.15); color: #fff; border: 0;
  background: radial-gradient(circle at 34% 26%, #ffb3a3, #f7836f 32%, #f05d49 62%, #c9412e);
  box-shadow: 0 0 0 7px rgba(240, 93, 73, .12), 0 0 0 15px rgba(240, 93, 73, .06), 0 22px 44px -14px rgba(229, 83, 63, .8); }
.hstar--orbit .hstar__chip--pi .hstar__ic { color: #fff; }
.hstar--orbit .hstar__chip--pi .hstar__lbl { background: none; color: #fff; font-weight: 700; }
.hstar--orbit .hstar__chip--pi::before { display: block; content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--hstar-a, 0deg), transparent 0 72%, rgba(255, 255, 255, .95) 84%, transparent 94%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
@media (prefers-reduced-motion: no-preference) { .hstar--orbit .hstar__chip--pi::before { animation: hstar-spin 3.6s linear infinite; } }
.hstar--orbit .hstar__chip--pi .hstar__glow { top: 50%; width: 200%; aspect-ratio: 1; }
.hstar--orbit .hstar__chip--pi:hover { color: #fff; }

/* phones and tablets: PI on top, then the eight circles in a 4 x 2 grid */
@media (max-width: 991px) {
  .hstar--orbit { --dia: 72px; }
  .hstar--orbit .hstar__map { justify-items: center; }
  .hstar--orbit .hstar__chip--pi { --dia: 90px; }
}
@media (max-width: 575px) { .hstar--orbit { --dia: 70px; } .hstar--orbit .hstar__chip .hstar__lbl { font-size: 9.5px; } }

/* ===================== D-190 (owner, 31 Oct: laid out in the Hero Editor, "like this") =====================
   Larger circles (115px on a 1440 screen, scaling down with the screen), PI 1.37x; straight dashed lines (each side's
   chain plus one into the heading per product), lights running in. */
.hstar--fan { --dia: clamp(66px, min(calc(var(--room) * .24), 8vw), 115px); }
.hstar--fan .hstar__chip--pi { width: calc(var(--dia) * 1.37); height: calc(var(--dia) * 1.37); }
.hstar--fan .hstar__chip--pi .hstar__lbl { font-size: clamp(11px, calc(var(--dia) * .16), 18px); }
.hstar--fan .hstar__chip .hstar__lbl { font-size: clamp(9.5px, calc(var(--dia) * .13), 14px); }
.hstar--fan .hstar__link { stroke: rgba(240, 93, 73, .45); stroke-width: 1.4; }
.hstar--fan .hstar__link--pi { stroke: rgba(240, 93, 73, .55); stroke-width: 1.6; }
@media (max-width: 991px) { .hstar--fan { --dia: 72px; } .hstar--fan .hstar__chip--pi { --dia: 72px; } }
@media (max-width: 575px) { .hstar--fan { --dia: 70px; } }
/* the heading on two lines, as in the owner's layout ("Insurance for Doctors" / "in India") */
.homepage-figma-bg .hstar--fan .hstar__copy { width: min(44%, 620px); }
.homepage-figma-bg .hstar--fan .hstar__copy h1 { font-size: clamp(30px, min(3.5vw, calc(var(--room) * .125)), 56px); }
.homepage-figma-bg .hstar--fan .hstar__copy h1 br { display: block; }
@media (max-width: 991px) { .homepage-figma-bg .hstar--fan .hstar__copy { width: auto; } }