/*
 * D-264 (owner, 5 Nov): the refined glass theme for product pages, opt-in with .pg--v2 on the page's .pg (the PI page first;
 * "if we final the PI page then make that a theme for product pages"). Built on pi-glass.css, so it only overrides:
 *   1. cards: the frosted glass of the home page's "What is CoverYou?" cards (D-263): white glass, a bright edge, a soft deep
 *      shadow, 26px corners. The "Who needs" cards lose their arch tops.
 *   2. icons ("the icons have a transparent style, reverse it: glossy solid with a white icon"): a solid circle in the item's
 *      rotation colour (coral, blue, green, amber; covered green, not covered red), a gloss highlight on top, a white icon.
 *   3. Cover by practice setting: four glass cards in a 2 x 2 grid (OLD: a dashed cross with a stethoscope in the centre).
 *   4. Key features ("a lot of negative space"): a tall coral "One policy" card beside the five features as glass cards
 *      (OLD: a round centre with the features round it).
 * Several rules need !important: pi-glass.css sets the same properties with !important or with inline grid areas.
 * D-265 (owner: "do the same for all the products, but the creativeness in the hero sections stays"): pages with
 * .pg--keep-hero (every product page except PI) keep their hero and its steps strip as they were: the card and icon rules
 * skip anything inside .hero or .strip there.
 */

/* ---------- 1. glass cards ---------- */
.pg.pg--v2 :is(.glass:not(.form):not(.is-hl), .tcards > li, .gcard, .ccols__col:not(.is-hl), .personas > li):not(.pg--keep-hero :is(.hero, .strip) *) {
  background: linear-gradient(150deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .56) 100%) !important;
  border: 0 !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(240, 93, 73, .08), 0 28px 50px -34px rgba(92, 23, 14, .35), 0 2px 8px rgba(92, 23, 14, .04) !important;
  transition: transform .35s cubic-bezier(.16, 1.04, .3, 1), box-shadow .35s;
}
.pg.pg--v2 :is(.tcards > li, .gcard, .personas > li, .ccols__col:not(.is-hl)):not(.pg--keep-hero :is(.hero, .strip) *):hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px #fff, 0 36px 60px -32px rgba(92, 23, 14, .4), 0 2px 8px rgba(92, 23, 14, .05) !important;
}
.pg.pg--v2 .personas > li, .pg.pg--v2 .personas > li.is-wide { border-radius: 26px !important; }

/* ---------- 2. glossy solid icons with a white glyph ---------- */
.pg.pg--v2 {
  --gloss: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .14) 36%, rgba(255, 255, 255, 0) 58%);
}
.pg.pg--v2 :is(.medal, .spread__item > i, .strip__step i, .feat__label > i, .feat li > i):not(.pg--keep-hero :is(.hero, .strip) *) {
  --m-hi: color-mix(in srgb, var(--as, #f05d49) 68%, #fff);
  --m-lo: color-mix(in srgb, var(--as, #f05d49) 74%, var(--ac, #c9412e));
  background: var(--gloss), linear-gradient(150deg, var(--m-hi), var(--m-lo)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -6px 12px rgba(0, 0, 0, .12), 0 12px 22px -10px color-mix(in srgb, var(--as, #f05d49) 70%, transparent) !important;
}
.pg.pg--v2 :is(.medal, .spread__item > i, .strip__step i, .feat__label > i, .feat li > i):not(.pg--keep-hero :is(.hero, .strip) *) svg { color: #fff !important; stroke: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
/* by meaning: covered and the last (resolved) steps green, not covered and crosses red */
.pg.pg--v2 :is(.cover2 > div:not(.no) h3 .medal, .lst--check li > i, .strip__step:last-child i) { --as: var(--c-green-s); --ac: var(--c-green); }
.pg.pg--v2 :is(.cover2 .no h3 .medal, .lst--cross li > i) { --as: var(--c-red-s); --ac: var(--c-red); }
.pg.pg--v2 :is(.lst--check li > i, .lst--cross li > i) {
  background: var(--gloss), linear-gradient(150deg, color-mix(in srgb, var(--as) 68%, #fff), color-mix(in srgb, var(--as) 74%, var(--ac))) !important;
  color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 14px -8px color-mix(in srgb, var(--as) 70%, transparent) !important;
}

/* ---------- 3. Cover by practice setting: a 2 x 2 grid of glass cards ---------- */
.pg.pg--v2 .quad::before, .pg.pg--v2 .quad::after, .pg.pg--v2 .quadwrap .quad__core { display: none !important; }
.pg.pg--v2 .quad { gap: 22px; margin-top: 8px; }
.pg.pg--v2 .quad li, .pg.pg--v2 .quad li:nth-child(2n) {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 20px; align-content: start; padding: 28px 30px 30px !important; border: 0 !important; border-radius: 26px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .56) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(240, 93, 73, .08), 0 28px 50px -34px rgba(92, 23, 14, .35), 0 2px 8px rgba(92, 23, 14, .04);
  transition: transform .35s cubic-bezier(.16, 1.04, .3, 1), box-shadow .35s;
}
.pg.pg--v2 .quad li:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #fff, 0 36px 60px -32px rgba(92, 23, 14, .4), 0 2px 8px rgba(92, 23, 14, .05); }
.pg.pg--v2 .quad li > .medal { grid-row: 1 / span 2; width: 64px; height: 64px; font-size: 28px; }
.pg.pg--v2 .quad li > :not(.medal) { grid-column: 2; }
.pg.pg--v2 .quad h3 { margin: 6px 0 0; }

/* ---------- 4. Key features: the "One policy" card beside the five features ---------- */
@media (min-width: 1101px) {
  .pg.pg--v2 .hub { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "core f1 f3" "core f2 f4" "core f5 f5" !important; gap: 20px !important; align-items: stretch; margin-top: 28px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .pg.pg--v2 .hub { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: "core core" "f1 f2" "f3 f4" "f5 f5" !important; gap: 18px !important; align-items: stretch; }
}
@media (max-width: 700px) {
  .pg.pg--v2 .hub { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "core" "f1" "f2" "f3" "f4" "f5" !important; gap: 16px !important; }
}
.pg.pg--v2 .hub li.hub__core {
  grid-area: core !important; justify-self: stretch; align-self: stretch; width: auto; height: auto; min-height: 260px; margin: 0;
  display: grid; align-content: center; justify-items: start; gap: 10px; padding: 40px 36px; border-radius: 28px; text-align: left; overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #ff8b78 0%, #f05d49 52%, #d9442f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -10px 24px rgba(120, 25, 10, .18), 0 34px 60px -32px rgba(229, 83, 63, .75) !important;
}
.pg.pg--v2 .hub li.hub__core::before { inset: auto -70px -90px auto; width: 260px; height: 260px; border: 1.5px solid rgba(255, 255, 255, .28); box-shadow: 0 0 0 40px rgba(255, 255, 255, .06); }
.pg.pg--v2 .hub li.hub__core::after { content: ""; position: absolute; right: 26px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .7); box-shadow: -40px 70px 0 -3px rgba(255, 255, 255, .4); }
.pg.pg--v2 .hub__core .medal { --as: #ffffff; --ac: #ffffff; width: 72px; height: 72px; margin: 0 0 8px; font-size: 32px; color: #f05d49 !important;
  background: radial-gradient(circle at 32% 26%, #fff 0, #fff 40%, #ffe9e3 100%) !important; box-shadow: inset 0 -6px 12px rgba(240, 93, 73, .15), 0 14px 26px -12px rgba(120, 25, 10, .45) !important; }
.pg.pg--v2 .hub__core .medal svg { color: #f05d49 !important; stroke: #f05d49; filter: none; }
.pg.pg--v2 .hub__core b { font-size: clamp(28px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.pg.pg--v2 .hub__core em { max-width: none; margin: 0; font-size: 24px; line-height: 1.2; text-align: left; color: #fff3ee; }
.pg.pg--v2 .hub li:not(.hub__core) {
  display: grid !important; grid-template-columns: 56px minmax(0, 1fr); gap: 0 18px; align-items: start; align-content: start; justify-self: stretch; max-width: none; padding: 24px 26px; text-align: left !important; border-radius: 24px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .56) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(240, 93, 73, .08), 0 24px 44px -32px rgba(92, 23, 14, .35), 0 2px 8px rgba(92, 23, 14, .04);
  transition: transform .35s cubic-bezier(.16, 1.04, .3, 1), box-shadow .35s;
}
.pg.pg--v2 .hub li:not(.hub__core):hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #fff, 0 32px 54px -30px rgba(92, 23, 14, .4), 0 2px 8px rgba(92, 23, 14, .05); }
.pg.pg--v2 .hub li:not(.hub__core) .medal { width: 56px; height: 56px; font-size: 24px; }
.pg.pg--v2 .hub li:not(.hub__core) h3 { margin: 4px 0 6px; }
@media (max-width: 1100px) { .pg.pg--v2 .hub li.hub__core { min-height: 0; padding: 30px 28px; } }

@media (prefers-reduced-motion: reduce) {
  .pg.pg--v2 :is(.tcards > li, .gcard, .personas > li, .ccols__col, .quad li, .hub li) { transition: none; }
}

/* the other icon chips on the page (found by a scan): Quick answer (.qa4), Situations (.feat__list), bullet lists (.lst) */
.pg.pg--v2 :is(.qa4, .feat__list) > :nth-child(4n+1) { --ac: var(--c-coral); --as: var(--c-coral-s); }
.pg.pg--v2 :is(.qa4, .feat__list) > :nth-child(4n+2) { --ac: var(--c-blue); --as: var(--c-blue-s); }
.pg.pg--v2 :is(.qa4, .feat__list) > :nth-child(4n+3) { --ac: var(--c-green); --as: var(--c-green-s); }
.pg.pg--v2 :is(.qa4, .feat__list) > :nth-child(4n+4) { --ac: var(--c-amber); --as: var(--c-amber-s); }
.pg.pg--v2 :is(.qa4__item > i, .feat__list li > i, .lst li > i) {
  background: var(--gloss), linear-gradient(150deg, color-mix(in srgb, var(--as, #f05d49) 68%, #fff), color-mix(in srgb, var(--as, #f05d49) 74%, var(--ac, #c9412e))) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -6px 12px rgba(0, 0, 0, .12), 0 12px 22px -10px color-mix(in srgb, var(--as, #f05d49) 70%, transparent) !important;
}
.pg.pg--v2 :is(.qa4__item > i, .feat__list li > i, .lst li > i) svg { color: #fff !important; stroke: #fff; }
.pg.pg--v2 .lst li > i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 12px -6px color-mix(in srgb, var(--as, #f05d49) 70%, transparent) !important; }

/* D-267: numbered step circles (the claims / process track, the How to buy path and journey) glossy solid with a white number,
   like the icons; a track of 3, 5 or 6 steps runs in rows of three (OLD: always 4 columns, so 6 left a 4 + 2 with a stray line) */
.pg.pg--v2 :is(.track__n, .path__n, .journey__n, .tcards__n):not(.pg--keep-hero :is(.hero, .strip) *) {
  background: var(--gloss), linear-gradient(150deg, color-mix(in srgb, var(--as, #f05d49) 68%, #fff), color-mix(in srgb, var(--as, #f05d49) 74%, var(--ac, #c9412e))) !important;
  color: #fff !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -6px 12px rgba(0, 0, 0, .12), 0 12px 22px -10px color-mix(in srgb, var(--as, #f05d49) 70%, transparent) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}
@media (min-width: 1101px) {
  .pg.pg--v2 .track:has(> li:nth-child(3):last-child, > li:nth-child(5):last-child, > li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg.pg--v2 .track:has(> li:nth-child(3):last-child, > li:nth-child(5):last-child, > li:nth-child(6):last-child) > li:nth-child(3n)::before { display: none; }
}
/* D-267: a section body's grid column is the section's width, never its widest child's (on phones a long table legend widened
   motor's Add-ons cards to 639px on a 390px screen) */
.pg.pg--v2 .ps__body { grid-template-columns: minmax(0, 1fr); }
.pg.pg--v2 .legend { flex-wrap: wrap; max-width: 100%; }

/* D-268: the lean feature section (no intro text beside the heading): heading, disclaimer and drawing on the left, the points
   as compact horizontal glass cards (icon | text | faint number) stacked on the right, so neither column is left empty */
.pg .feat-lean { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: center; }
.pg .feat-lean__side { display: grid; gap: 18px; align-content: center; }
.pg .feat-lean__side .feat__art { max-width: 400px; justify-self: start; margin-top: 8px; }
.pg .feat-lean .feat__list { grid-template-columns: minmax(0, 1fr); gap: 14px; counter-reset: none; }
.pg .feat-lean .feat__list > li { grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 0 18px; padding: 18px 64px 18px 20px; border-radius: 22px; }
.pg .feat-lean .feat__list > li > span:last-child { line-height: 1.55; }
.pg .feat-lean .feat__list > li > span:last-child b { display: block; margin-bottom: 2px; font-size: 16.5px; color: var(--text, #15110f); }
.pg .feat-lean .feat__list i { width: 56px; height: 56px; }
.pg .feat-lean .feat__n { top: 50%; right: 22px; transform: translateY(-50%); font-size: 40px; }
.pg .feat-lean .feat__list > li:nth-child(4n+4) { --ac: var(--c-amber); --as: var(--c-amber-s); }
@media (max-width: 1100px) {
  .pg .feat-lean { grid-template-columns: minmax(0, 1fr); }
  .pg .feat-lean__side .feat__art { max-width: 300px; justify-self: center; }
}
@media (max-width: 700px) {
  .pg .feat-lean .feat__list > li { grid-template-columns: 48px minmax(0, 1fr); padding: 16px 48px 16px 16px; }
  .pg .feat-lean .feat__list i { width: 48px; height: 48px; }
  .pg .feat-lean .feat__n { font-size: 30px; right: 14px; }
}
.pg .ps--feat-lean .feat-lean__side .feat__art { order: 0; }   /* the heading first, the drawing under it (pi-glass moves .feat__art first) */

/* D-268: the definition card ("What is …" on the product pages): a coral-tinted glass panel, drawing inside on the left */
.pg .ps--define > .in { padding-block: 8px; }
.pg .define { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px 56px; align-items: center; padding: 44px 56px; border-radius: 32px; position: relative; overflow: hidden;
  background: radial-gradient(70% 120% at 0% 50%, rgba(255, 139, 120, .22), rgba(255, 139, 120, 0) 60%), linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(255, 245, 241, .65)) !important; }
.pg .define::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; border: 1.5px solid rgba(240, 93, 73, .16); box-shadow: 0 0 0 36px rgba(240, 93, 73, .04); pointer-events: none; }
.pg .define--plain { grid-template-columns: minmax(0, 1fr); }
.pg .define__art { margin: 0; justify-self: center; width: 100%; max-width: 340px; position: relative; }
.pg .define__art::before { content: ""; position: absolute; inset: 6% 2% -4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }
.pg .define__art img { position: relative; display: block; width: 100%; height: auto; }
.pg .define__txt { display: grid; gap: 14px; align-content: center; min-width: 0; }
.pg .define__tag { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c9412e; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .2); }
.pg .define__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(150deg, #ff8b78, #e5503c); }
.pg .define .ps__head { margin: 0; }
.pg .define .ps__head h2 { margin: 0; }
.pg .define .ps__body p { font-size: 16.5px; line-height: 1.7; max-width: 64ch; }
@media (max-width: 900px) {
  .pg .define { grid-template-columns: minmax(0, 1fr); padding: 30px 24px; border-radius: 26px; }
  .pg .define__art { max-width: 240px; }
}

/* ===== D-334 (owner, 10 Nov: "try something else for this, I need 5 points in one line, some other design"): the "how is
   this use treated" table (motor: Using your car for work) as one row of five glass tiles - icon, number, the use, and its
   answer as a pill: green tick (private), amber (private, check with the insurer), coral warning (commercial, the tile
   tinted coral). Brackets above group the tiles: "Private use" over the first three, "Commercial use" over the last two.
   768-991px: the row scrolls sideways (still one line); phones: a list. Markup: PiGlass::tableBlock 'usage'. ===== */
.pg .usage { margin-top: 22px; }
.pg .usage__groups { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 16px; margin: 0 0 14px; }
.pg .usage__group { grid-column: span var(--span); position: relative; height: 16px; margin-top: 14px; border: 2px solid; border-bottom: 0; border-radius: 12px 12px 0 0; }
.pg .usage__group--private { border-color: rgba(10, 138, 82, .35); color: #0a7a49; }
.pg .usage__group--commercial { border-color: rgba(240, 93, 73, .5); color: #c23b28; }
.pg .usage__group b { position: absolute; left: 50%; top: -14px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; white-space: nowrap;
  background: #fdfaf8; font: 700 11px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.pg .usage__group b .ic { width: 15px; height: 15px; }
.pg .usage__row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pg .usage__item { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px 18px 18px !important; border-radius: 22px !important;
  transition: transform .45s cubic-bezier(.16, 1.04, .3, 1), box-shadow .45s ease; }
.pg .usage__item:hover { transform: translateY(-5px); }
.pg .usage__top { display: flex; align-items: center; justify-content: space-between; }
.pg .usage__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; font-style: normal; color: var(--coral);
  background: rgba(240, 93, 73, .1); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .16); transition: rotate .5s cubic-bezier(.16, 1.04, .3, 1); }
.pg .usage__ic .ic { width: 24px; height: 24px; }
.pg .usage__item:hover .usage__ic { rotate: -8deg; }
.pg .usage__n { font: 700 12px/1 var(--font-mono); letter-spacing: .1em; color: rgba(94, 86, 81, .55); }
.pg .usage__item h3 { flex: 1 1 auto; margin: 0; font-size: 16px; line-height: 1.38; font-weight: 650; letter-spacing: -.015em; color: var(--ink, #15110f); text-wrap: balance; }
.pg .usage__verdict { align-self: flex-start; display: inline-flex; align-items: flex-start; gap: 8px; margin: 0; padding: 7px 12px 7px 7px; border-radius: 12px;
  font: 600 14px/1.35 var(--font-body, Inter, sans-serif); background: #e6f6ee; color: #0a6b40; }
.pg .usage__verdict i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; background: #0a8a52; color: #fff; }
.pg .usage__verdict i .ic { width: 13px; height: 13px; stroke-width: 3; }
.pg .usage__item--check .usage__verdict { background: #fff3d9; color: #7a5200; }
.pg .usage__item--check .usage__verdict i { background: #e09a12; }
.pg .usage__item--commercial { background: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .5), transparent 60%), linear-gradient(160deg, rgba(255, 238, 233, .95), rgba(252, 214, 204, .85)) !important;
  border-color: rgba(240, 93, 73, .25) !important; }
.pg .usage__item--commercial .usage__ic { color: #fff; background: linear-gradient(150deg, #ff8b78, #e5503c); box-shadow: 0 12px 22px -10px rgba(229, 80, 60, .8); }
.pg .usage__item--commercial .usage__verdict { background: var(--coral); color: #fff; }
.pg .usage__item--commercial .usage__verdict i { background: #fff; color: var(--coral); }
@media (prefers-reduced-motion: reduce) { .pg .usage__item, .pg .usage__ic { transition: none; } .pg .usage__item:hover { transform: none; } .pg .usage__item:hover .usage__ic { rotate: none; } }
/* tablets: one line that scrolls sideways (the brackets go: they no longer sit over their tiles) */
@media (max-width: 991.98px) {
  .pg .usage__groups { display: none; }
  .pg .usage__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
  .pg .usage__item { scroll-snap-align: start; }
}
/* phones: a list, the icon beside the text */
@media (max-width: 575.98px) {
  .pg .usage__row { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; overflow: visible; gap: 12px; padding: 0; }
  .pg .usage__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; padding: 16px !important; }
  .pg .usage__top { grid-row: 1 / span 2; align-self: start; }
  .pg .usage__n { display: none; }
  .pg .usage__verdict { justify-self: start; }
  .pg .usage__item:hover { transform: none; }
}

/* ===== D-336 (owner, 10 Nov: "design these points in another way, it currently shows blank space on the term page"): the four
   term points (High life cover, Tax benefits, Optional riders, Family secured) were a 2 x 2 of small tiles pinned to the foot
   of the quote card, leaving ~220px of empty column above them. From 1280px they are one tall glass panel that starts under
   the bullets and ends level with the card's foot: four rows, each with its coloured icon on a gradient spine that links
   them, the words beside it and a faint number on the right; the rows share the height evenly. The panel stops 24px short of
   the family drawing (which reaches 130px into the copy column at every width). OLD (D-177): the 2 x 2 tiles. ===== */
@media (min-width: 1280px) {
  .pg .hero--tuck:has(.phs--term) > .strip { align-self: stretch; margin-top: 30px; display: flex; flex-direction: column; width: calc(100% - 154px); max-width: none; }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__steps { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; padding: 2px 24px; counter-reset: tstep;
    border-radius: 28px; border: 1px solid rgba(255, 255, 255, .9);
    background: radial-gradient(90% 60% at 100% 0%, rgba(240, 93, 73, .1), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(12, 167, 80, .07), transparent 60%), linear-gradient(155deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 26px 50px -34px rgba(21, 17, 15, .32); }
  /* the spine through the four icons */
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__steps::before { content: ""; position: absolute; left: calc(24px + 23px - 1.5px); top: 15%; bottom: 15%; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #f05d49, #3b5bdb 36%, #0ca750 68%, #e0a412); opacity: .35; }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step { flex: 1 1 0; counter-increment: tstep; position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; align-content: center;
    column-gap: 18px; row-gap: 2px; padding: 6px 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: transform .4s cubic-bezier(.16, 1.04, .3, 1); }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step + .strip__step { border-top: 1px dashed rgba(21, 17, 15, .1); }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step i { position: relative; z-index: 1; grid-row: span 2; width: 46px; height: 46px; margin: 0; box-shadow: 0 0 0 5px rgba(255, 255, 255, .95), 0 12px 22px -12px rgba(21, 17, 15, .45); transition: scale .4s cubic-bezier(.16, 1.04, .3, 1); }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step i .ic { width: 22px; height: 22px; }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step b { grid-column: 2; align-self: end; font-size: 17px; letter-spacing: -.015em; }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step span { grid-column: 2; align-self: start; font-size: 14px; color: var(--text-2); }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step::after { content: counter(tstep, decimal-leading-zero); display: block; position: static; grid-column: 3; grid-row: 1 / span 2; border: 0;
    font: 700 22px/1 var(--font-display, Inter, sans-serif); letter-spacing: -.02em; color: rgba(21, 17, 15, .08); }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step:hover { transform: translateX(4px); }
  .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step:hover i { scale: 1.08; }
}
@media (min-width: 1280px) and (prefers-reduced-motion: reduce) { .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step:hover { transform: none; } .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__step:hover i { scale: 1; } }
html.cy-lite .pg .hero--tuck:has(.phs--term) .strip--j-fan .strip__steps { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255, 255, 255, .96) !important; }

/* ===== D-337 (owner, 10 Nov: "try another design for this section, it has negative spacing"): term "How much term insurance
   does a doctor need?" - the five steps were a numbered track of 3 + 2, leaving a third of the second row empty. They are a
   sum now: one row of five glass cards joined by badges, liabilities + income + goals - what exists = the result; each card
   has its icon and number, the step's lead words as its title; the result card is coral. Below 1100px the cards stack
   (the badges sit between them); phones: full-width cards. Markup: PiGlass steps 'formula'. ===== */
.pg .formula { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 40px; margin: 8px 0 0; padding: 0; list-style: none; }
.pg .formula__item { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 20px 22px !important; border-radius: 24px !important;
  transition: transform .45s cubic-bezier(.16, 1.04, .3, 1), box-shadow .45s ease; }
.pg .formula__item:hover { transform: translateY(-5px); }
.pg .formula__top { display: flex; align-items: center; justify-content: space-between; }
.pg .formula__top .medal { width: 48px; height: 48px; }
.pg .formula__n { font: 700 13px/1 var(--font-mono); letter-spacing: .1em; color: rgba(94, 86, 81, .5); }
.pg .formula__item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body, #3f3833); }
.pg .formula__item p b { display: block; margin-bottom: 6px; font-size: 16.5px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: var(--ink, #15110f); }
/* the + / - / = badge, centred in the gap before the card */
.pg .formula__op { position: absolute; z-index: 2; left: -20px; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font: 700 20px/1 var(--font-display, Inter, sans-serif); color: #fff; background: linear-gradient(150deg, #ff8b78, #e5503c);
  box-shadow: 0 0 0 5px #fbf7f5, 0 10px 18px -8px rgba(229, 80, 60, .8); }
.pg .formula__item--result .formula__op { background: #15110f; box-shadow: 0 0 0 5px #fbf7f5, 0 10px 18px -8px rgba(21, 17, 15, .6); }
/* the result */
.pg .formula__item--result { background: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .3), transparent 60%), linear-gradient(150deg, #ff8b78 0%, #f05d49 50%, #c23b28 100%) !important;
  border-color: rgba(255, 255, 255, .5) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 30px 54px -28px rgba(168, 50, 31, .8) !important; }
.pg .formula__item--result p, .pg .formula__item--result p b { color: #fff; }
.pg .formula__item--result .formula__n { color: rgba(255, 255, 255, .7); }
.pg .formula__item--result .medal { background: #fff !important; color: var(--coral) !important; box-shadow: 0 12px 22px -12px rgba(92, 23, 14, .7) !important; }
@media (prefers-reduced-motion: reduce) { .pg .formula__item { transition: none; } .pg .formula__item:hover { transform: none; } }
@media (max-width: 1100px) {
  .pg .formula { grid-template-columns: minmax(0, 1fr); row-gap: 40px; max-width: 640px; }
  .pg .formula__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .pg .formula__top { flex-direction: column; gap: 8px; }
  .pg .formula__op { left: 50%; top: -20px; }
  .pg .formula__item:hover { transform: none; }
}
/* D-337: the result card's icon is white with a coral glyph (the v2 medal rule is stronger than the one above) */
html body .pg.pg--v2 .formula .formula__item--result .formula__top .medal { background: #fff !important; color: #e5503c !important; box-shadow: 0 12px 22px -12px rgba(92, 23, 14, .7) !important; }
html body .pg.pg--v2 .formula .formula__item--result .formula__top .medal .ic { color: #e5503c !important; stroke: currentColor; }

/* ===== D-338 (owner, 10 Nov: "try another design for this section", investment: How a ULIP works): the five steps were a
   numbered track of 3 + 2 with an empty third of the second row. Now one row of arrow-shaped glass segments, each pointing
   into the next (premium -> funds -> value -> life cover -> switch / withdraw), tinted in its step's colour (coral, blue,
   green, amber, coral) with its icon and number. Below 1100px the segments stack and point down. Markup: PiGlass steps
   'chevrons'. ===== */
.pg .chev { --tip: 24px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 8px 0 0; padding: 0; list-style: none;
  filter: drop-shadow(0 22px 26px rgba(92, 23, 14, .12)) drop-shadow(0 2px 2px rgba(21, 17, 15, .05)); }
.pg .chev__item { --c: #f05d49; position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0 0 0 calc(var(--tip) * -1 + 6px); padding: 24px calc(var(--tip) + 18px) 24px calc(var(--tip) + 22px);
  background: radial-gradient(110% 80% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 62%), linear-gradient(155deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .86));
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
  transition: translate .45s cubic-bezier(.16, 1.04, .3, 1); }
.pg .chev__item:first-child { margin-left: 0; padding-left: 24px; clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); border-radius: 22px 0 0 22px; }
.pg .chev__item:nth-child(2) { --c: #3b5bdb; }
.pg .chev__item:nth-child(3) { --c: #0ca750; }
.pg .chev__item:nth-child(4) { --c: #e0a412; }
.pg .chev__item:nth-child(5) { --c: #f05d49; }
.pg .chev__item:hover { translate: 0 -4px; }
.pg .chev__top { display: flex; align-items: center; justify-content: space-between; }
.pg .chev__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; font-style: normal; color: #fff;
  background: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 55%), var(--c); box-shadow: 0 12px 22px -10px var(--c); }
.pg .chev__ic .ic { width: 24px; height: 24px; }
.pg .chev__n { font: 700 13px/1 var(--font-mono); letter-spacing: .1em; color: color-mix(in srgb, var(--c) 70%, #15110f); opacity: .55; }
.pg .chev__item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body, #3f3833); }
.pg .chev__item p b { display: block; margin-bottom: 6px; font-size: 16.5px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: var(--ink, #15110f); }
@media (prefers-reduced-motion: reduce) { .pg .chev__item { transition: none; } .pg .chev__item:hover { translate: none; } }
/* tablets and phones: the segments stack and point down */
@media (max-width: 1100px) {
  .pg .chev { --tip: 18px; grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .pg .chev__item, .pg .chev__item:first-child { margin: calc(var(--tip) * -1 + 6px) 0 0; padding: calc(var(--tip) + 18px) 22px calc(var(--tip) + 16px); border-radius: 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start;
    clip-path: polygon(0 0, 50% var(--tip), 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip))); }
  .pg .chev__item:first-child { margin-top: 0; padding-top: 22px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip))); border-radius: 22px 22px 0 0; }
  .pg .chev__top { flex-direction: column; gap: 8px; }
  .pg .chev__item:hover { translate: none; }
}

/* ===== D-343 (owner, 10 Nov: "another design for this, I don't want to see blank spaces"): "Situations that commonly lead to a
   claim" with five cases (Hospital Indemnity, Doctor PI) was a 3 + 2 grid with an empty third of the second row. Five cases
   are now a bento: the first case is a large coral card two rows tall (its icon white, its text larger, its number big) and the
   other four fill a 2 x 2 beside it - three columns, two rows, no gap. Tablets: the first card runs across the top, the rest
   2 x 2 under it; phones: one column as before. Lists with another count keep their grid; the lean single-column list is
   untouched. ===== */
@media (min-width: 1001px) {
  .pg .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) { grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); }
  .pg .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child { grid-row: 1 / span 2; align-content: end; padding: 32px 32px 34px; }
}
@media (min-width: 576px) and (max-width: 1000px) {
  .pg .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child { grid-column: 1 / -1; }
}
.pg.pg--v2 .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child {
  background: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .3), transparent 60%), linear-gradient(150deg, #ff8b78 0%, #f05d49 50%, #c23b28 100%) !important;
  border-color: rgba(255, 255, 255, .5) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 30px 54px -28px rgba(168, 50, 31, .8) !important;
  color: #fff !important; font-size: 19px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; }
.pg.pg--v2 .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child * { color: #fff; }
.pg.pg--v2 .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child > i { width: 64px; height: 64px; background: #fff !important; box-shadow: 0 14px 26px -14px rgba(92, 23, 14, .7) !important; }
.pg.pg--v2 .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child > i svg { color: #e5503c !important; stroke: #e5503c !important; width: 28px; height: 28px; }
.pg.pg--v2 .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child .feat__n { color: #fff !important; opacity: .3; font-size: 96px; top: 18px; right: 26px; }
/* two soft rings in the corner of the large card */
.pg.pg--v2 .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child::after { content: ""; position: absolute; z-index: 0; right: -80px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 30px rgba(255, 255, 255, .06), 0 0 0 62px rgba(255, 255, 255, .04); }
.pg.pg--v2 .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child > * { position: relative; z-index: 1; }
.pg.pg--v2 .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child > .feat__n { position: absolute; }
.pg.pg--v2 .feat__list:not(.feat-lean .feat__list):has(> li:nth-child(5):last-child) > li:first-child > :not(i):not(.feat__n) { font-size: 20px; line-height: 1.4; font-weight: 600; max-width: 30ch; }

/* ===== D-345 (owner, 10 Nov: "different design for this ... it does not look good, give me something creative"): hospital PI
   "What affects the premium" as a hub. The deciding factor (Insurer) is a coral dial in the middle - a gauge whose needle
   sweeps and whose arc fills - and the six other factors are glass cards, three on each side, each with its icon and a dashed
   wire running into the dial along which a light dot flows. Tablets and phones: the dial on top, the factors as a 2-column /
   1-column list under it, no wires. Markup: PiGlass table 'factorhub'. ===== */
.pg .hubx { --core: 300px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--core) minmax(0, 1fr); column-gap: 64px; align-items: center; margin-top: 14px; }
.pg .hubx__side { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pg .hubx__item { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 16px; margin: 0; padding: 18px 20px !important; border-radius: 22px !important;
  transition: transform .45s cubic-bezier(.16, 1.04, .3, 1); }
.pg .hubx__side--l .hubx__item:hover { transform: translateX(6px); }
.pg .hubx__side--r .hubx__item:hover { transform: translateX(-6px); }
.pg .hubx__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; font-style: normal; color: var(--coral); background: rgba(240, 93, 73, .1); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .16); }
.pg .hubx__ic .ic { width: 23px; height: 23px; }
.pg .hubx__item h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }
.pg .hubx__item p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.pg .hubx__side--r .hubx__item { grid-template-columns: minmax(0, 1fr) 48px; text-align: right; }
.pg .hubx__side--r .hubx__ic { order: 2; }
/* the wire from each card into the dial (it slants to the dial's middle; the top and bottom cards lean in) */
.pg .hubx__wire { position: absolute; top: 50%; width: 64px; height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(240, 93, 73, .45) 0 6px, transparent 6px 11px); }
.pg .hubx__side--l .hubx__wire { left: 100%; transform-origin: left center; }
.pg .hubx__side--r .hubx__wire { right: 100%; transform-origin: right center; }
.pg .hubx__side--l .hubx__item:first-child .hubx__wire { rotate: 22deg; } .pg .hubx__side--l .hubx__item:last-child .hubx__wire { rotate: -22deg; }
.pg .hubx__side--r .hubx__item:first-child .hubx__wire { rotate: -22deg; } .pg .hubx__side--r .hubx__item:last-child .hubx__wire { rotate: 22deg; }
.pg .hubx__wire i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #f05d49; box-shadow: 0 0 8px rgba(240, 93, 73, .9); opacity: 0; }
.pg .hubx__side--l .hubx__wire i { left: 0; } .pg .hubx__side--r .hubx__wire i { right: 0; }
/* the dial */
.pg .hubx__core { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 6px; width: var(--core); aspect-ratio: 1; padding: 34px 38px; box-sizing: border-box; border-radius: 50%; text-align: center; color: #fff;
  background: radial-gradient(80% 70% at 30% 20%, rgba(255, 255, 255, .3), transparent 60%), linear-gradient(150deg, #ff8b78 0%, #f05d49 50%, #c23b28 100%);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .7), 0 0 0 11px rgba(240, 93, 73, .18), 0 0 0 34px rgba(240, 93, 73, .06), 0 40px 70px -30px rgba(168, 50, 31, .75); }
.pg .hubx__dial { width: 150px; height: auto; margin-bottom: -26px; overflow: visible; }
.pg .hubx__arc { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 12; stroke-linecap: round; }
.pg .hubx__arc--on { stroke: #fff; stroke-dasharray: 252; stroke-dashoffset: 120; }
.pg .hubx__ticks path { stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-linecap: round; }
.pg .hubx__needle { transform-box: view-box; transform-origin: 100px 110px; rotate: 10deg; }
.pg .hubx__needle path { stroke: #15110f; stroke-width: 5; stroke-linecap: round; }
.pg .hubx__needle circle { fill: #15110f; stroke: #fff; stroke-width: 3; }
.pg .hubx__core-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 6px; border-radius: 12px; background: #fff; color: #e5503c; box-shadow: 0 10px 20px -10px rgba(92, 23, 14, .7); }
.pg .hubx__core-ic .ic { width: 20px; height: 20px; }
.pg .hubx__core h3 { margin: 4px 0 0; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: #fff !important; }
.pg .hubx__core p { margin: 0; max-width: 24ch; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
@media (prefers-reduced-motion: no-preference) {
  .pg .hubx__needle { animation: hubx-needle 6s cubic-bezier(.5, .1, .25, 1) infinite; }
  .pg .hubx__arc--on { animation: hubx-arc 6s cubic-bezier(.5, .1, .25, 1) infinite; }
  .pg .hubx__side--l .hubx__wire i { animation: hubx-flow-l 2.4s ease-in infinite; }
  .pg .hubx__side--r .hubx__wire i { animation: hubx-flow-r 2.4s ease-in infinite; }
  .pg .hubx__item:nth-child(2) .hubx__wire i { animation-delay: .8s; } .pg .hubx__item:nth-child(3) .hubx__wire i { animation-delay: 1.6s; }
  .pg .hubx__side--r .hubx__item:nth-child(1) .hubx__wire i { animation-delay: .4s; } .pg .hubx__side--r .hubx__item:nth-child(2) .hubx__wire i { animation-delay: 1.2s; } .pg .hubx__side--r .hubx__item:nth-child(3) .hubx__wire i { animation-delay: 2s; }
}
@keyframes hubx-needle { 0%, 100% { rotate: -60deg; } 30% { rotate: 25deg; } 55% { rotate: -10deg; } 78% { rotate: 50deg; } }
@keyframes hubx-arc { 0%, 100% { stroke-dashoffset: 210; } 30% { stroke-dashoffset: 92; } 55% { stroke-dashoffset: 140; } 78% { stroke-dashoffset: 56; } }
@keyframes hubx-flow-l { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes hubx-flow-r { 0% { right: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { right: calc(100% - 8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pg .hubx__item { transition: none; } .pg .hubx__item:hover { transform: none; } }
@media (max-width: 1279.98px) { .pg .hubx { --core: 260px; column-gap: 48px; } .pg .hubx__wire { width: 48px; } .pg .hubx__core h3 { font-size: 20px; } }
@media (max-width: 1100px) {
  .pg .hubx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pg .hubx__core { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-bottom: 20px; }
  .pg .hubx__side { display: contents; }
  .pg .hubx__wire { display: none; }
  .pg .hubx__side--r .hubx__item { grid-template-columns: 48px minmax(0, 1fr); text-align: left; }
  .pg .hubx__side--r .hubx__ic { order: 0; }
  .pg .hubx__item:hover { transform: none !important; }
}
@media (max-width: 575.98px) { .pg .hubx { grid-template-columns: minmax(0, 1fr); } }
/* the dial stays a circle on small screens (its words need ~300px) */
@media (max-width: 1100px) { .pg .hubx { --core: 300px; } .pg .hubx__core { height: var(--core); padding: 30px 34px; } }