/*
 * D-108 (owner, 29 Oct): product heroes get their own animated scene behind the quote card and their own step style
 * (PI keeps the connected tiles of product-pages.css). Approved mock: claude.ai artifact "Product Hero Scenes".
 * Markup: components/product-hero (scene=, journey=) and partials/hero-scenes/*.
 *
 * The scene sits inside the card frame (.ph-card-wrap) and reaches 170px into the gap on its left (clear of the
 * longest H1s). Rule kept everywhere: nothing in a scene may cover a form field. Papers and stamps sit behind the card
 * (.ph-card is z 2); chips and the corner tile sit above it, but only in the gap, on the card's outer edge, or on its
 * bottom edge (D-109, owner: "a little on the form") where only the frame and the card's bottom padding are.
 * Tablet / phone: the scene becomes a small strip (tile + first chip) above the card, beside the "Start here" arrow.
 * D-109 (owner): reveals (stamps, chips, drawings, fills) play once; only quiet ambient motion loops.
 * Everything moves only with prefers-reduced-motion: no-preference.
 */

/* ---------- the scene layer ---------- */
.ph--scene .ph__cue { display: none; }
.ph--scene .ph-card-wrap { position: relative; z-index: 3; }
.ph--scene .ph-card { z-index: 2; }
/* D-110: room under the card for the chips that hang below it, so every hero ends the same distance above the next
   section (40px: one chip on the card edge; 64px: a second chip or a chip row under the card) */
@media (min-width: 1100px) {
  .ph--scene .ph-card-wrap { margin-bottom: 40px; }
  .ph--scene .ph-card-wrap:has(.phs > .phs-chip.c2, .phs--home) { margin-bottom: 64px; }
}
.phs { position: absolute; inset: -30px -40px -20px -170px; pointer-events: none; }
.phs > *, .phs .chips > * { position: absolute; }
.phs .chips > * { position: relative; }
.phs svg { overflow: visible; }
.phs-blob { right: -80px; top: 10px; width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ffe1d9, rgba(255, 255, 255, 0) 70%); }
.phs .cy-icon { width: 20px; height: 20px; }

.phs-paper { padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -24px rgba(21, 17, 15, .35), 0 0 0 1px rgba(21, 17, 15, .1); font-size: 12px; color: #77706b; }
.phs-mini { display: flex; align-items: center; gap: 7px; font: 700 10.5px/14px var(--cy-font, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #8a827d; }
.phs-mini i { width: 8px; height: 8px; border-radius: 50%; background: #e5533f; }
.phs-ln { display: block; height: 7px; margin-top: 7px; border-radius: 4px; background: #efebe9; }
.phs-chip { z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 13px 9px 9px; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(21, 17, 15, .1); font: 400 12px/16px var(--cy-font, Inter, sans-serif); color: #77706b; white-space: nowrap; }
.phs-chip b { display: block; font-size: 13px; line-height: 17px; font-weight: 600; color: #15110f; }
.phs-chip .av { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: #e5533f; color: #fff; }
.phs-chip .ok { margin-left: 4px; padding: 3px 8px; border-radius: 999px; background: #e3f7ec; color: #0a8a52; font-size: 11px; font-weight: 700; }
.phs-tile { z-index: 5; right: 4px; top: 8px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: #fff; transform: rotate(-6deg);
  background: radial-gradient(120% 120% at 0% 0%, #ff8a6b, #c23a24); box-shadow: 0 18px 30px -14px rgba(194, 58, 36, .8); }
.phs-tile .cy-icon { width: 26px; height: 26px; }
.phs-stamp { z-index: 1; padding: 5px 11px; border: 3px solid #e5533f; border-radius: 12px; background: rgba(255, 255, 255, .8); color: #e5533f; transform: rotate(-12deg);
  font: 800 17px/1.15 var(--cy-font, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.phs-stamp small { display: block; font-size: 8.5px; letter-spacing: .14em; font-weight: 700; }
.phs-stamp--ok { border-color: #0a8a52; color: #0a8a52; }
/* the chip sits on the card's bottom-left edge (top 22px over the frame and bottom padding); a second chip hangs
   just under the card, further right */
.phs > .phs-chip { left: 140px; bottom: -26px; }
.phs > .phs-chip.c2 { left: 390px; bottom: -42px; }

/* ---------- the scenes ---------- */
/* PI */
.phs--pi .notice { left: 14px; top: 46px; width: 200px; transform: rotate(-8deg); }
.phs--pi .notice__t { display: block; margin: 7px 0 8px; font-size: 14.5px; line-height: 19px; color: #15110f; }
.phs--pi .phs-stamp { left: 34px; top: 116px; }
/* health */
.phs--health .bill { left: 6px; top: 40px; width: 172px; transform: rotate(-7deg); }
.phs--health .bill .row, .phs--health .bill .tot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; }
.phs--health .bill .tot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(21, 17, 15, .14); font-size: 14px; font-weight: 700; color: #15110f; }
.phs--health .bill .tot span:last-child { color: #0a8a52; }
.phs--health .bill small { display: block; margin-top: 4px; font-size: 9.5px; color: #aaa39d; }
.phs--health .phs-stamp { left: 22px; top: 70px; }
/* motor */
.phs--motor .carcard { left: 10px; top: 50px; width: 210px; transform: rotate(-6deg); }
.phs--motor .carcard svg { display: block; width: 100%; height: 78px; }
.phs--motor .dent { position: absolute; left: 80px; top: 50px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 93, 73, .55), transparent 70%); }
.phs--motor .prog { display: block; width: 110px; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 6px; background: #efebe9; }
.phs--motor .prog i { display: block; width: 80%; height: 100%; background: linear-gradient(90deg, #ff8a6b, #e5533f); }
/* term */
.phs--term .umb { left: 6px; top: 24px; width: 230px; height: 194px; }
.phs--term .umb .drop { fill: #b8d0f0; }
.phs--term .umb .fam circle { fill: #fff; stroke: #e5533f; stroke-width: 2.2; }
/* investment */
.phs--investment .chart { left: 8px; top: 40px; width: 210px; transform: rotate(-5deg); }
.phs--investment .chart svg { display: block; width: 100%; height: 110px; margin-top: 6px; }
.phs--investment .chart .line { fill: none; stroke: #e5533f; stroke-width: 2.6; stroke-linecap: round; }
.phs--investment .ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.phs--investment .ring circle { fill: none; stroke-width: 6; }
.phs--investment .ring .v { stroke: #e5533f; stroke-linecap: round; stroke-dasharray: 108 150; }
/* home */
.phs--home .house { left: 0; top: 14px; width: 230px; height: 212px; }
.phs--home .house path { fill: none; stroke: #e5533f; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.phs--home .house .fill { fill: #fff4f1; stroke: none; }
.phs--home .chips { z-index: 5; right: 40px; bottom: -42px; display: flex; gap: 8px; }
/* cyber */
.phs--cyber .phone { left: 14px; top: 20px; width: 160px; height: 262px; padding: 10px; border-radius: 30px; background: #15110f; transform: rotate(-6deg); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .55); }
.phs--cyber .scr { position: relative; height: 100%; overflow: hidden; padding: 30px 10px 10px; border-radius: 22px; background: linear-gradient(180deg, #2a1d19, #15110f); }
.phs--cyber .alert { padding: 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, .95); font-size: 10.5px; line-height: 14px; color: #77706b; }
.phs--cyber .alert b { display: block; font-size: 11.5px; color: #15110f; }
.phs--cyber .scan { position: absolute; left: 50%; top: 140px; width: 90px; height: 90px; margin-left: -45px; border: 2px solid rgba(240, 93, 73, .5); border-radius: 50%; }
.phs--cyber .lock { position: absolute; left: 50%; top: 162px; display: grid; place-items: center; width: 46px; height: 46px; margin-left: -23px; border-radius: 14px; background: #e5533f; color: #fff; }
/* hospital PI */
.phs--hospital-pi .bld { left: 0; top: 24px; width: 220px; height: 192px; }
.phs--hospital-pi .bld .w { fill: #fdebe7; }
.phs--hospital-pi .bld .w.on { fill: #ff8a6b; }
.phs--hospital-pi .staff { z-index: 2; left: 52px; top: 198px; display: flex; }
.phs--hospital-pi .staff span { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgba(0, 0, 0, .4); font: 700 11px/1 var(--cy-font, Inter, sans-serif); color: #c9412e; }
.phs--hospital-pi .staff span:first-child { margin-left: 0; }
/* property */
.phs--property .bld { left: 0; top: 10px; width: 226px; height: 226px; }
.phs--property .dome { fill: rgba(240, 93, 73, .08); stroke: rgba(240, 93, 73, .5); stroke-width: 2; stroke-dasharray: 6 6; transform-origin: 125px 150px; }
/* public liability */
.phs--liability .sign { left: 10px; top: 24px; width: 190px; height: 210px; }
.phs--liability .sign .s { fill: #fff; stroke: #e5533f; stroke-width: 3; stroke-linejoin: round; }
.phs--liability .sign .wob { transform-origin: 100px 210px; }
/* money */
.phs--money .safe { left: 10px; top: 56px; width: 180px; height: 172px; border-radius: 22px; background: linear-gradient(160deg, #3a302c, #1d1715); transform: rotate(-5deg); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .55), inset 0 0 0 6px #4a3e39; }
.phs--money .dial { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: radial-gradient(circle, #6a5a53 0 30%, #2a2220 31%); box-shadow: 0 0 0 4px #4a3e39; }
.phs--money .dial::before { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: #ff8a6b; }
.phs--money .note { z-index: 1; display: grid; place-items: center; width: 110px; height: 54px; border-radius: 8px; background: linear-gradient(135deg, #ffe7e0, #ffd0c4); box-shadow: inset 0 0 0 1.5px #f0b8ad, 0 10px 20px -12px rgba(0, 0, 0, .4); font: 800 18px/1 var(--cy-font, Inter, sans-serif); color: #c9412e; transform: rotate(var(--rr)); }
.phs--money .n1 { left: -4px; top: 18px; --rr: -12deg; }
.phs--money .n2 { left: 120px; top: 206px; --rr: 10deg; }
/* comprehensive package */
.phs--package .box { left: 20px; top: 118px; width: 160px; height: 142px; }
.phs--package .box .b { fill: #fff4f1; stroke: #e5533f; stroke-width: 2.5; stroke-linejoin: round; }
.phs--package .box .flap { transform-origin: 20px 60px; }
.phs--package .out { z-index: 4; display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35), 0 0 0 1px rgba(21, 17, 15, .1); font: 600 12px/16px var(--cy-font, Inter, sans-serif); color: #15110f; white-space: nowrap; }
.phs--package .out .cy-icon { width: 15px; height: 15px; color: #e5533f; }
.phs--package .o1 { left: 24px; top: 44px; } .phs--package .o2 { left: 80px; top: 6px; } .phs--package .o3 { left: 20px; top: 88px; }
.phs--package .o4 { left: 92px; top: 70px; } .phs--package .o5 { left: 40px; top: 260px; }
/* renewal hubs */
.phs--renew .policy { left: 10px; top: 40px; width: 204px; transform: rotate(-7deg); }
.phs--renew .policy .phs-mini { padding-left: 30px; }
.phs--renew .policy__t { display: block; margin: 7px 0 4px 0; font-size: 15px; line-height: 19px; color: #15110f; }
.phs--renew .cal { position: absolute; left: -12px; top: -18px; transform: rotate(-6deg); display: flex; flex-direction: column; align-items: center; width: 44px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(21, 17, 15, .12); }
.phs--renew .cal__m { width: 100%; padding: 2px 0; background: #e5533f; color: #fff; text-align: center; font: 700 9.5px/12px var(--cy-font, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; }
.phs--renew .cal__d { padding: 3px 0 4px; font: 800 18px/20px var(--cy-font, Inter, sans-serif); color: #15110f; }
.phs--renew .bar { display: block; height: 8px; margin-top: 12px; overflow: hidden; border-radius: 6px; background: #efebe9; }
.phs--renew .bar i { display: block; width: 86%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff8a6b, #e5533f); }
.phs--renew .policy small { display: block; margin-top: 6px; font-size: 10.5px; line-height: 14px; }
.phs--renew .phs-stamp { left: 30px; top: 128px; }

/* ---------- step styles (ol inside .ph-st; each li: <b> title + <span> line) ---------- */
.ph .ph-st ol, ol.ph-st { margin: 0; padding: 0; list-style: none; }
.ph-st li > b { display: block; font: 600 13.5px/18px var(--cy-font, Inter, sans-serif); letter-spacing: -.01em; color: #15110f; }
.ph-st li > b + span, .ph-st--console li b + span { display: block; margin-top: 2px; font: 400 12px/16px var(--cy-font, Inter, sans-serif); color: #77706b; }
.ph-st ol, ol.ph-st { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ph .ph-st--mono, .ph .ph-st .k, .ph .ph-st .bar, .ph .ph-st .room, .ph .ph-st--console, .ph .ph-st--console *, .ph .ph-st .ser, .ph .ph-st--tabs li::before {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* health: heartbeat */
.ph-st--pulse { position: relative; padding-top: 62px; }
.ph-st--pulse .ph-st__line { position: absolute; left: 0; top: 0; width: 100%; height: 58px; }
.ph-st--pulse .ph-st__line path { fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.ph-st--pulse .ph-st__line .base { stroke: #f3d4cd; }
.ph-st--pulse .ph-st__line .beat { stroke: #e5533f; }
.ph-st--pulse li { padding-right: 10px; }
.ph-st--pulse li > b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #e5533f; box-shadow: 0 0 0 4px #fdebe7; vertical-align: 1px; }

/* motor: road */
.ph-st__road { position: relative; height: 54px; overflow: hidden; border-radius: 14px; background: #2b2624; }
.ph-st__road::before { content: ""; position: absolute; left: 12px; right: 12px; top: 26px; height: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 18px, transparent 18px 34px); }
.ph-st__road .stop { position: absolute; z-index: 2; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #e5533f; font: 800 13px/1 var(--cy-font, Inter, sans-serif); color: #15110f; }
.ph-st__road .car { position: absolute; z-index: 3; top: 9px; left: 31%; width: 56px; height: 36px; }
.ph-st--road ol { margin-top: 12px; }
.ph-st--road li { padding-right: 8px; }

/* term: fanned cards */
ol.ph-st--fan { padding: 6px 14px 4px 4px; }
.ph-st--fan li:last-child { margin-right: 0; }
.ph-st--fan li { position: relative; margin-right: -10px; padding: 14px 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 16px 30px -20px rgba(92, 23, 14, .45), 0 0 0 1px rgba(21, 17, 15, .1); transform: rotate(var(--r)); transition: transform .3s; }
.ph-st--fan li:nth-child(1) { --r: -5deg; } .ph-st--fan li:nth-child(2) { --r: -1.5deg; margin-top: -6px; } .ph-st--fan li:nth-child(3) { --r: 2deg; }
.ph-st--fan li:nth-child(4) { --r: 5deg; background: linear-gradient(160deg, #ff8a6b, #e5533f); }
.ph-st--fan li:hover { transform: rotate(0) translateY(-4px); }
.ph-st--fan li:nth-child(4) b, .ph-st--fan li:nth-child(4) b + span { color: #fff; }
.ph-st--fan .k { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: #e5533f; }
.ph-st--fan li:nth-child(4) .k { color: #ffe1d9; }

/* investment: stairs */
ol.ph-st--stairs { gap: 12px; align-items: end; }
.ph-st--stairs li { display: flex; flex-direction: column; justify-content: flex-end; }
.ph-st--stairs .bar { position: relative; display: block; height: var(--h); margin-bottom: 8px; padding: 5px 10px; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, #ff8a6b, #e5533f); color: #fff; font-size: 12px; font-weight: 700; line-height: 16px; transform-origin: bottom; }
.ph-st--stairs li:nth-child(1) .bar { opacity: .5; } .ph-st--stairs li:nth-child(2) .bar { opacity: .68; } .ph-st--stairs li:nth-child(3) .bar { opacity: .85; }

/* home: floor plan */
.ph-st--house { position: relative; padding-top: 34px; }
.ph-st__roof { position: absolute; left: 0; top: 0; width: 100%; height: 40px; }
.ph-st__roof path { fill: #fff; stroke: #e5533f; stroke-width: 2.2; stroke-linejoin: round; }
.ph-st--house ol { border: 2.2px solid #e5533f; border-top: 0; border-radius: 0 0 14px 14px; background: #fff; }
.ph-st--house li { padding: 14px 14px 16px; border-left: 1.5px dashed #f3c7bf; }
.ph-st--house li:first-child { border-left: 0; }
.ph-st--house .room { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #e5533f; }

/* cyber: console */
.ph-st--console { padding: 12px 16px 14px; border-radius: 16px; background: #15110f; color: #cbbfb8; font-size: 12.5px; line-height: 18px; box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .6); }
.ph-st--console .dots { display: flex; gap: 6px; margin-bottom: 10px; }
.ph-st--console .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3330; }
.ph-st--console .dots i:first-child { background: #e5533f; }
.ph .ph-st--console ol { display: block; }
.ph-st--console li { display: flex; gap: 10px; padding: 3px 0; }
.ph-st--console li .ok { color: #4fd99a; }
.ph-st--console li b { display: inline; font-size: 12.5px; color: #fff; }
.ph-st--console li b + span { display: inline; margin: 0; font-size: 12.5px; line-height: 18px; color: #8a7f78; }
.ph-st--console .prompt { display: block; margin-top: 4px; }
.ph-st--console .prompt i { display: inline-block; width: 8px; height: 14px; background: #e5533f; vertical-align: -2px; }

/* hospital PI: capsule */
.ph-st--capsule ol { position: relative; column-gap: 0; }
.ph-st--capsule ol::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #f3c7bf; }
.ph-st--capsule li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 10px; }
.ph-st--capsule li > i { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; margin: 12px 0 12px 14px; border-radius: 50%; background: #fdebe7; color: #c9412e; font: 800 11px/1 var(--cy-font, Inter, sans-serif); font-style: normal; }
.ph-st--capsule li > b { position: relative; z-index: 1; padding-right: 10px; font-size: 13px; line-height: 16px; }
.ph-st--capsule li > b + span { grid-column: 1 / -1; margin: 0; padding: 0 12px 0 14px; }
.ph-st--capsule li.on::before { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 36px; border-radius: 999px; background: #e5533f; }
.ph-st--capsule li.on > i { background: rgba(255, 255, 255, .25); color: #fff; }
.ph-st--capsule li.on > b { color: #fff; }

/* property: blocks */
ol.ph-st--blocks { gap: 10px; align-items: end; }
.ph-st--blocks li { padding: 12px 12px 14px; border-top: 8px solid #e5533f; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #f3c7bf, 0 8px 0 -2px #f3c7bf, 0 16px 24px -16px rgba(92, 23, 14, .4); }
.ph-st--blocks li:nth-child(2) { margin-bottom: 14px; } .ph-st--blocks li:nth-child(3) { margin-bottom: 28px; } .ph-st--blocks li:nth-child(4) { margin-bottom: 42px; background: #fff8f6; }
.ph-st--blocks .cy-icon { display: block; width: 20px; height: 20px; margin-bottom: 6px; color: #e5533f; }

/* public liability: pins */
.ph-st--pins { position: relative; padding-top: 56px; }
.ph-st__route { position: absolute; left: 0; top: 0; width: 100%; height: 56px; }
.ph-st__route path { fill: none; stroke: #f0b8ad; stroke-width: 2.2; stroke-dasharray: 2 7; stroke-linecap: round; }
.ph-st--pins li { position: relative; padding-right: 10px; }
.ph-st--pins .pin { position: absolute; left: 12px; top: calc(var(--pin-y) - 56px); width: 30px; height: 38px; }
.ph-st--pins .pin path { fill: #fff; stroke: #e5533f; stroke-width: 2; }
.ph-st--pins .pin text { fill: #e5533f; font: 800 10px var(--cy-font, Inter, sans-serif); }
.ph-st--pins li.on .pin path { fill: #e5533f; }
.ph-st--pins li.on .pin text { fill: #fff; }

/* money: banknote */
.ph-st--note { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, #fff6f3, #ffe7e0); box-shadow: inset 0 0 0 1.5px #f0b8ad, inset 0 0 0 6px #fff6f3, inset 0 0 0 7px #f6cfc6; }
.ph-st--note .seal { display: grid; place-items: center; border-right: 1.5px dashed #f0b8ad; }
.ph-st--note .seal span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #e5533f; box-shadow: 0 0 0 4px #ffd3c9; color: #fff; font: 800 20px/1 var(--cy-font, Inter, sans-serif); }
.ph-st--note li { padding: 14px 12px; border-left: 1.5px dashed #f0b8ad; }
.ph-st--note li:first-child { border-left: 0; }
.ph-st--note .ser { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: #c9412e; }
.ph-st--note::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-100%); }

/* comprehensive package: folder tabs */
ol.ph-st--tabs { gap: 8px; }
.ph-st--tabs li { position: relative; margin-top: 18px; padding: 14px 14px 16px; border-radius: 0 14px 14px 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #f3c7bf; }
.ph-st--tabs li::before { content: attr(data-t); position: absolute; left: 0; top: -19px; height: 20px; padding: 0 12px; border-radius: 10px 10px 0 0; background: #fff; box-shadow: inset 1.5px 1.5px 0 #f3c7bf, inset -1.5px 0 0 #f3c7bf; font-size: 10.5px; font-weight: 700; line-height: 20px; color: #c9412e; }
.ph-st--tabs li.on, .ph-st--tabs li.on::before { background: #e5533f; box-shadow: none; }
.ph-st--tabs li.on::before, .ph-st--tabs li.on b, .ph-st--tabs li.on b + span { color: #fff; }

/* renewal hubs: tear-off calendar pages */
ol.ph-st--calendar { gap: 12px; }
.ph-st--calendar li { overflow: hidden; padding: 0 14px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(21, 17, 15, .1), 0 14px 26px -20px rgba(92, 23, 14, .5); }
.ph-st--calendar .top { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; margin: 0 -14px 12px; background: #fdebe7; color: #e5533f; }
.ph-st--calendar .top::before, .ph-st--calendar .top::after { content: ""; position: absolute; top: -5px; width: 6px; height: 14px; border-radius: 3px; background: #c9412e; }
.ph-st--calendar .top::before { left: 24%; } .ph-st--calendar .top::after { right: 24%; }
.ph-st--calendar .top .cy-icon { width: 18px; height: 18px; }
.ph-st--calendar li.on .top { background: #e5533f; color: #fff; }
.ph-st--calendar li.on .top::before, .ph-st--calendar li.on .top::after { background: #5c170e; }

/* ---------- motion ---------- */
/* reveals: once, a beat after the page settles */
@media (prefers-reduced-motion: no-preference) {
  .phs-pop { animation: phs-in .6s cubic-bezier(.2, .8, .2, 1) 1s both; }
  .phs-d1 { animation-delay: 1.5s; } .phs-d2 { animation-delay: 1.9s; } .phs-d3 { animation-delay: 2.3s; }
  .phs-stamp { animation: phs-stamp .5s cubic-bezier(.3, 1.6, .5, 1) .9s both; }
  .phs--motor .dent { animation: phs-out .5s ease 1.6s both; }
  .phs--motor .prog i { animation: phs-fill 1.6s ease 1.4s both; }
  .phs--investment .chart .line { stroke-dasharray: 300; animation: phs-draw300 1.6s ease .6s both; }
  .phs--investment .ring .v { animation: phs-ring 1.4s ease 1.6s both; }
  .phs--home .house path:not(.fill) { stroke-dasharray: 900; animation: phs-draw900 2.2s ease .4s both; }
  .phs--package .out { animation: phs-in .5s cubic-bezier(.2, .8, .2, 1) 1s both; }
  .phs--package .o2 { animation-delay: 1.15s; } .phs--package .o3 { animation-delay: 1.3s; } .phs--package .o4 { animation-delay: 1.45s; } .phs--package .o5 { animation-delay: 1.6s; }
  .phs--renew .bar i { animation: phs-fill 1.6s ease .8s both; }

  .ph-st--pulse .beat { stroke-dasharray: 900; animation: phs-draw900 2.4s linear .5s both; }
  .ph-st__road .car { animation: phs-arrive 1.8s cubic-bezier(.2, .8, .2, 1) .5s both; }
  .ph-st--stairs .bar { animation: phs-grow .9s cubic-bezier(.2, .8, .2, 1) .4s both; }
  .ph-st--stairs li:nth-child(2) .bar { animation-delay: .55s; } .ph-st--stairs li:nth-child(3) .bar { animation-delay: .7s; } .ph-st--stairs li:nth-child(4) .bar { animation-delay: .85s; }
  .ph-st--console li { animation: phs-in .35s ease .5s both; }
  .ph-st--console li:nth-child(2) { animation-delay: .9s; } .ph-st--console li:nth-child(3) { animation-delay: 1.3s; } .ph-st--console li:nth-child(4) { animation-delay: 1.7s; }
  .ph-st--blocks li { animation: phs-drop .7s cubic-bezier(.3, 1.4, .5, 1) .4s both; }
  .ph-st--blocks li:nth-child(2) { animation-delay: .55s; } .ph-st--blocks li:nth-child(3) { animation-delay: .7s; } .ph-st--blocks li:nth-child(4) { animation-delay: .85s; }
  .ph-st--note::after { animation: phs-shine 1.4s ease-in-out 1s both; }
}
/* ambient: quiet loops that never disappear or restart visibly */
@media (prefers-reduced-motion: no-preference) {
  .phs-tile { animation: phs-bob 4s ease-in-out infinite; }
  .phs--term .umb .drop { animation: phs-rain 1.6s linear infinite; }
  .phs--cyber .scan { animation: phs-scan 2.2s ease-out infinite; }
  .phs--hospital-pi .bld .w.on { animation: phs-win 3s steps(1) infinite; }
  .phs--property .dome { animation: phs-spin 18s linear infinite; }
  .phs--property .threat { animation: phs-away 3s ease-in-out infinite; }
  .phs--liability .sign .wob { animation: phs-wob 3s ease-in-out infinite; }
  .phs--money .dial { animation: phs-dial 5s ease-in-out infinite; }
  .phs--money .note { animation: phs-float 4s ease-in-out infinite; }
  .phs--money .n2 { animation-delay: 1s; }
  .phs--package .box .flap { animation: phs-flap 4s ease-in-out infinite; }
  .ph-st--console .prompt i { animation: phs-blink 1s steps(2) infinite; }
  .ph-st--pins .pin { animation: phs-pin 3s ease-in-out infinite; }
  .ph-st--pins li:nth-child(2) .pin { animation-delay: .3s; } .ph-st--pins li:nth-child(3) .pin { animation-delay: .6s; } .ph-st--pins li:nth-child(4) .pin { animation-delay: .9s; }
}
@keyframes phs-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes phs-stamp { from { opacity: 0; transform: rotate(-12deg) scale(2.4); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes phs-out { to { opacity: 0; transform: scale(.4); } }
@keyframes phs-fill { from { width: 10%; } }
@keyframes phs-draw300 { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes phs-draw900 { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes phs-ring { from { stroke-dasharray: 0 150; } }
@keyframes phs-arrive { from { opacity: 0; transform: translateX(-180px); } to { opacity: 1; transform: none; } }
@keyframes phs-grow { from { transform: scaleY(.15); } }
@keyframes phs-drop { from { opacity: 0; transform: translateY(-30px); } }
@keyframes phs-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes phs-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(-6deg); } }
@keyframes phs-rain { from { transform: translateY(-20px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
@keyframes phs-scan { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes phs-win { 50% { fill: #fdebe7; } }
@keyframes phs-spin { to { transform: rotate(360deg); } }
@keyframes phs-away { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -6px); } }
@keyframes phs-wob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes phs-dial { 0% { transform: rotate(0); } 30% { transform: rotate(140deg); } 60% { transform: rotate(-60deg); } 100% { transform: rotate(0); } }
@keyframes phs-float { 0%, 100% { transform: translateY(0) rotate(var(--rr)); } 50% { transform: translateY(-10px) rotate(var(--rr)); } }
@keyframes phs-flap { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-28deg); } }
@keyframes phs-blink { 50% { opacity: 0; } }
@keyframes phs-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- smaller screens ---------- */
@media (max-width: 1199px) {
  .phs { left: -140px; }
  .phs-blob { width: 440px; height: 440px; }
}
/* tablet / phone: one column. The scene becomes a strip (tile + first chip) beside the downward "Start here" arrow. */
@media (max-width: 1099px) {
  .phs { inset: auto auto 100% 0; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .phs > * { display: none; }
  .phs > .phs-tile, .phs > .phs-chip, .phs > .chips { position: relative; display: flex; inset: auto; transform: none; animation: none; opacity: 1; }
  .phs > .phs-tile { width: 44px; height: 44px; border-radius: 14px; transform: rotate(-6deg); }
  .phs > .phs-tile .cy-icon { width: 22px; height: 22px; }
  .phs > .phs-chip ~ .phs-chip, .phs .chips > :not(:first-child) { display: none; }
  .phs .phs-chip { animation: none; opacity: 1; }
  .phs--motor .prog { display: none; }
}
@media (max-width: 599px) {
  .phs > .phs-tile { display: none; }
  .phs > .phs-chip, .phs > .chips { max-width: calc(100vw - 206px); }
  .phs .phs-chip { padding: 7px 10px 7px 7px; gap: 8px; font-size: 11px; line-height: 14px; white-space: normal; }
  .phs .phs-chip b { font-size: 12px; line-height: 15px; }
  .phs .phs-chip .av { width: 30px; height: 30px; border-radius: 10px; }
  .phs .phs-chip .ok { display: none; }
  .phs--investment .ring svg { width: 30px; height: 30px; }

  /* every step style: two columns, decorations that need width are dropped */
  .ph-st ol, ol.ph-st { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .ph-st--pulse { padding-top: 0; } .ph-st--pulse .ph-st__line { display: none; }
  .ph-st__road .car { display: none; }
  .ph-st--fan li { margin: 0; transform: rotate(calc(var(--r) / 2)); } .ph-st--fan li:nth-child(2) { margin-top: 0; }
  ol.ph-st--stairs { align-items: end; }
  .ph-st--house ol { gap: 0; } .ph-st--house li { border-left: 0; border-top: 1.5px dashed #f3c7bf; } .ph-st--house li:nth-child(-n+2) { border-top: 0; } .ph-st--house li:nth-child(even) { border-left: 1.5px dashed #f3c7bf; }
  .ph .ph-st--console ol { display: block; }
  .ph-st--console li b + span { display: block; }
  .ph-st--capsule ol { row-gap: 8px; } .ph-st--capsule ol::before { display: none; }
  .ph-st--capsule li { padding-bottom: 8px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px #f3c7bf; }
  .ph-st--capsule li.on::before { inset: 0; height: auto; border-radius: 18px; }
  .ph-st--capsule li.on > b + span { color: #ffe1d9; position: relative; }
  .ph-st--blocks li:nth-child(n) { margin-bottom: 0; }
  .ph-st--pins { padding-top: 0; } .ph-st__route { display: none; }
  .ph-st--pins li { padding: 0 0 0 36px; } .ph-st--pins .pin { left: 0; top: -2px; width: 26px; height: 33px; }
  .ph-st--note { grid-template-columns: minmax(0, 1fr); } .ph-st--note .seal { display: none; }
  .ph-st--note li { border-left: 0; border-top: 1.5px dashed #f0b8ad; } .ph-st--note li:nth-child(-n+2) { border-top: 0; } .ph-st--note li:nth-child(even) { border-left: 1.5px dashed #f0b8ad; }
}
@media (prefers-reduced-motion: reduce) {
  .phs-stamp, .phs-pop, .phs--package .out { opacity: 1; }
}

/* D-112: renewal pages - the policy-renewal card (partials/hero-scenes/renewal) */
.phs--renewal .rpolicy { left: 8px; top: 34px; width: 206px; transform: rotate(-6deg); }
.phs--renewal .rpolicy__name { display: flex; align-items: center; gap: 7px; margin: 8px 0 10px; font: 700 14px/18px var(--cy-font, Inter, sans-serif); color: #15110f; }
.phs--renewal .rpolicy__name .cy-icon { width: 18px; height: 18px; color: #e5533f; }
.phs--renewal .rpolicy__row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: #fff8f6; font-size: 11px; line-height: 15px; color: #77706b; }
.phs--renewal .rpolicy__row b { display: block; font-size: 12.5px; color: #15110f; }
.phs--renewal .rpolicy__ring { width: 40px; height: 40px; flex: none; transform: rotate(-90deg); }
.phs--renewal .rpolicy__ring circle { fill: none; stroke-width: 5; }
.phs--renewal .rpolicy__ring .t { stroke: #f3d4cd; }
.phs--renewal .rpolicy__ring .v { stroke: #0a8a52; stroke-linecap: round; stroke-dasharray: 113 114; }
.phs--renewal .phs-stamp { left: 34px; top: 128px; }
.phs-chip .av--ok { background: #0a8a52; }
.phs-tile--renew { background: radial-gradient(120% 120% at 0% 0%, #3ecf8e, #0a8a52); box-shadow: 0 18px 30px -14px rgba(10, 138, 82, .7); }
@media (prefers-reduced-motion: no-preference) {
  .phs--renewal .rpolicy__ring .v { animation: phs-renew-ring 1.6s ease .6s both; }
  .phs-tile--renew .cy-icon { animation: phs-spin 6s linear infinite; }
}
@keyframes phs-renew-ring { from { stroke-dasharray: 0 114; } }

/* D-112 audit fixes: the corner tile stays on screen on narrow desktops; home's three chips fit under the card */
@media (min-width: 1100px) and (max-width: 1279px) { .phs-tile { right: 40px; top: -40px; } .phs > .phs-chip.c2 { left: 250px; } }
.phs--home .chips .ok { display: none; }
.phs--home .chips { gap: 6px; }

/* D-116: the strip above the card needs a little more room under the intro on phones and tablets */
@media (max-width: 1099px) { .ph--scene .ph__cue-down { margin-top: 22px; } }
@media (max-width: 599px) { .ph--scene .ph__cue-down { margin-top: 44px; } }
/* D-116: the scene reaches ~110px into the copy column; the copy (kicker, H1, line, points) stops short of it */
@media (min-width: 1100px) { .ph--scene .ph__copy { max-width: calc(100% - 150px); } }
/* D-116 audit: the package's floating cover labels stay out of the phone / tablet strip */
@media (max-width: 1099px) { .phs--package .out { display: none; } }

/* D-124 (owner, 30 Oct: "the space between the form and the left content feels blank"): in the focus hero the PI
   scene becomes a story column in the gap left of the form - the legal notice stamped COVERED, then the advocate
   chip - instead of a card half hidden behind the form. Wide screens only; phones keep the focus layout. */
@media (min-width: 1100px) {
  .ph--focus .phs--pi { inset: 0 calc(100% + 16px) 0 auto; width: 164px; }
  .ph--focus .phs--pi .phs-blob { right: -560px; }
  .ph--focus .phs--pi .notice { left: 0; top: 92px; width: 164px; padding: 13px 14px; transform: rotate(-6deg); }
  .ph--focus .phs--pi .notice__t { font-size: 13.5px; line-height: 18px; }
  .ph--focus .phs--pi .phs-stamp { left: 10px; top: 176px; }

  .ph--focus .phs.phs--pi > .phs-chip { display: flex !important; flex-wrap: wrap; left: 6px; top: 286px; bottom: auto; width: 158px; gap: 8px 10px; white-space: normal; }
  .ph--focus .phs--pi > .phs-chip .ok { margin-left: 40px; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .ph--focus.ph--scene .ph__copy { padding-right: 28px; } }

/* D-135: the PI hero stethoscope (components/product-hero, .ph-steth). The tube box starts 64px left of the text, its
   top-right corner joins the earpieces above the H1, its bottom ends in the chest piece under the points. */
.ph-steth { display: none; }
@media (min-width: 1360px) {
  .ph--focus .ph__copy { position: relative; }
  .ph--focus:has(.ph-steth) { padding-bottom: 96px; }
  .ph-steth { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .ph-steth ~ * { position: relative; z-index: 1; }
  .ph-steth svg { position: absolute; overflow: visible; }
  .ph-steth__tube { left: -64px; top: -44px; width: calc(100% - 56px); height: calc(100% + 90px); }
  .ph-steth__tube path { fill: none; stroke: var(--cy-primary, #f05d49); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .ph-steth__tube .shine { stroke: rgba(255, 255, 255, .5); stroke-width: 2.5; transform: translate(-1.2px, -1.2px); }
  .ph-steth__ears { left: calc(100% - 180px); top: -116px; width: 120px; height: 76px; }
  .ph-steth__ears path { fill: none; stroke: #b9b0ab; stroke-width: 5; stroke-linecap: round; }
  .ph-steth__ears .tip { fill: #3a2c28; }
  .ph-steth__ears .joint { fill: var(--cy-brand-700, #c9412e); }
  .ph-steth__chest { left: calc(-64px + (100% - 56px) * .26 - 4px); top: calc(100% + 46px - 35px); width: 78px; height: 70px; filter: drop-shadow(0 14px 18px rgba(229, 83, 63, .35)); }
  .ph-steth__chest .stem { stroke: var(--cy-primary, #f05d49); stroke-width: 9; stroke-linecap: round; }
  .ph-steth__chest .rim { fill: #d9d2ce; }
  .ph-steth__chest .face { fill: #fff; stroke: #c7bfba; stroke-width: 1.5; }
  .ph-steth__chest .ring { fill: none; stroke: var(--cy-primary, #f05d49); stroke-width: 2; opacity: .55; }
  .ph-steth__chest .dot { fill: var(--cy-primary, #f05d49); }
  @media (prefers-reduced-motion: no-preference) {
    .ph-steth__tube path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ph-steth-draw 1.6s cubic-bezier(.6, .05, .2, 1) .3s forwards; }
    .ph-steth__ears, .ph-steth__chest { opacity: 0; animation: ph-fade .5s ease forwards; }
    .ph-steth__ears { animation-delay: .1s; }
    .ph-steth__chest { animation-delay: 1.7s; }
  }
}
@keyframes ph-steth-draw { to { stroke-dashoffset: 0; } }
/* the dash draw-in breaks on a non-scaling stroke in a stretched SVG (gaps); the tube fades in instead */
@media (min-width: 1360px) and (prefers-reduced-motion: no-preference) {
  .ph-steth__tube path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .ph-steth__tube { opacity: 0; animation: ph-fade .8s ease .2s forwards; }
}
/* D-136 (owner: "why is this like this, align the text properly"): the H1 broke into four short lines at 1100-1279px.
   The 28px right padding (for the licence kicker, removed in D-126) goes, the H1 scales with the viewport in that range,
   and every hero H1 balances its lines instead of leaving a short last line */
.ph__title { text-wrap: balance; }
@media (min-width: 1100px) and (max-width: 1279px) {
  .ph--focus.ph--scene .ph__copy { padding-right: 0; }
  body .ph--focus h1.ph__title { font-size: clamp(42px, 3.9vw, 58px); }
}
/* D-136 round 2: the H1 fits its 574px column in two balanced lines ("Professional Indemnity / Insurance for Doctors")
   instead of breaking word by word where the font renders a little wider; the stethoscope tube gets a soft shadow */
@media (min-width: 1280px) { body .ph--focus h1.ph__title { font-size: 52px; line-height: 1.06; } }
@media (min-width: 1360px) { .ph-steth__tube { filter: drop-shadow(0 8px 10px rgba(229, 83, 63, .22)); } }

/* D-137 (owner sketch: "something like that, a little more glossy"): one fixed-size stethoscope drawn in the text
   column's own coordinates (1px = 1px, so the coil loops stay round). Earpieces reach up beside the legal notice, the
   tube coils above the H1, coils again on the left and runs under the points into a large chest piece. Shown from
   1440px, where the left margin holds the left coil. */
@media (min-width: 1360px) and (max-width: 1439px) { .ph-steth { display: none; } }
@media (min-width: 1440px) {
  .ph--focus:has(.ph-steth) { padding-bottom: 130px; }
  .ph-steth__svg { position: absolute; left: -130px; top: -200px; width: 900px; height: 720px; overflow: visible; filter: drop-shadow(0 12px 14px rgba(229, 83, 63, .25)); }
  .ph-steth__svg path, .ph-steth__svg .stem { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .ph-steth__svg .tube .edge { stroke: #c9412e; stroke-width: 13; }
  .ph-steth__svg .tube .body { stroke: url(#phsTube); stroke-width: 10; }
  .ph-steth__svg .tube .gloss { stroke: rgba(255, 255, 255, .6); stroke-width: 3; transform: translate(-1.6px, -2px); }
  .ph-steth__svg .arms .metal-edge { stroke: #7d7470; stroke-width: 7.5; }
  .ph-steth__svg .arms .metal { stroke: url(#phsMetal); stroke-width: 5; }
  .ph-steth__svg .tips ellipse { fill: #2f2421; }
  .ph-steth__svg .tip-shine { fill: rgba(255, 255, 255, .7); }
  .ph-steth__svg .joint { fill: #c9412e; stroke: #fff; stroke-width: 2; }
  .ph-steth__svg .chest .stem { fill: url(#phsMetal); stroke: #8f8681; stroke-width: 1; }
  .ph-steth__svg .chest .rim { fill: url(#phsRim); stroke: #9c938e; stroke-width: 1; }
  .ph-steth__svg .chest .face { fill: url(#phsFace); stroke: #cfc8c4; stroke-width: 1.5; }
  .ph-steth__svg .chest .ring { fill: none; stroke: #f05d49; stroke-width: 2.5; opacity: .6; }
  .ph-steth__svg .chest .dot { fill: #f05d49; }
  .ph-steth__svg .chest .spec { fill: rgba(255, 255, 255, .85); }
  @media (prefers-reduced-motion: no-preference) { .ph-steth__svg { opacity: 0; animation: ph-fade .9s ease .2s forwards; } }
}
@media (min-width: 1440px) { .ph--focus:has(.ph-steth) { padding-bottom: 96px; } }

/* ===================== D-162: health scene - a beating heart and a cashless receipt ===================== */
.phs--health .hlth { left: 34px; top: 46px; width: 232px; }
.phs--health .hlth__heart { display: block; width: 190px; height: auto; margin-left: 22px; overflow: visible; filter: drop-shadow(0 22px 26px rgba(229, 83, 63, .35)); }
.phs--health .hlth__heart .shape { fill: url(#hlthFill); }
.phs--health .hlth__heart .shine { fill: url(#hlthShine); }
.phs--health .hlth__heart .ecg { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.phs--health .hlth__receipt { position: relative; display: grid; gap: 5px; margin-top: -26px; padding: 18px 16px 14px; border-radius: 18px; background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(21, 17, 15, .08), 0 24px 44px -26px rgba(21, 17, 15, .35); transform: rotate(3deg);
  font: 400 12px/1.4 var(--cy-font, Inter, sans-serif); color: #5e5651; }
.phs--health .hlth__receipt::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 12px; background: radial-gradient(circle at 6px 0, transparent 5px, rgba(255, 255, 255, .82) 5.5px) 0 0 / 12px 12px repeat-x; }
.phs--health .hlth__label { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font: 700 10px/1.3 var(--cy-font, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #8a817c; }
.phs--health .hlth__label i { width: 7px; height: 7px; border-radius: 50%; background: #f05d49; }
.phs--health .hlth__row, .phs--health .hlth__total, .phs--health .hlth__pay { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.phs--health .hlth__total { margin-top: 4px; padding-top: 7px; border-top: 1px dashed rgba(21, 17, 15, .18); }
.phs--health .hlth__total s { color: #a39a95; text-decoration-color: #f05d49; text-decoration-thickness: 2px; }
.phs--health .hlth__pay { align-items: baseline; font-weight: 700; color: #15110f; font-size: 14px; }
.phs--health .hlth__pay b { font-size: 24px; letter-spacing: -.02em; color: #0a8a52; }
.phs--health .hlth__receipt small { font-size: 9.5px; color: #a39a95; }
.phs--health .hlth__tick { position: absolute; right: -14px; top: -14px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 8px; border-radius: 999px; background: #0a8a52; color: #fff;
  font: 700 11.5px/1 var(--cy-font, Inter, sans-serif); box-shadow: 0 10px 20px -10px rgba(10, 138, 82, .8); transform: rotate(-3deg); }
.phs--health .hlth__tick .cy-icon { width: 14px; height: 14px; stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .phs--health .hlth__heart { transform-origin: 50% 60%; animation: hlth-beat 1.6s ease-in-out infinite; }
  .phs--health .hlth__heart .ecg { stroke-dasharray: 420; stroke-dashoffset: 420; animation: hlth-trace 2.4s cubic-bezier(.6, .05, .2, 1) .4s infinite; }
  .phs--health .hlth__tick { opacity: 0; animation: ph-fade .4s ease 1.4s forwards; }
}
@keyframes hlth-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.06); } 30% { transform: scale(.98); } 45% { transform: scale(1.04); } }
@keyframes hlth-trace { 0% { stroke-dashoffset: 420; } 55%, 100% { stroke-dashoffset: 0; } }
/* narrow laptops (scene reaches 170px into the gap): the heart and receipt at 70% */
@media (min-width: 1001px) and (max-width: 1279px) { .phs--health .hlth { transform: scale(.72); transform-origin: left top; left: 20px; } }
/* tablets and phones: the scene shows as the small strip (tile + chip) above the card */
@media (max-width: 1000px) { .phs--health .hlth { display: none; } }

/* ===================== D-170: health scene - the heart in the middle of the gap, one heartbeat line from the copy into the card ===================== */
.phs--health .hlth { left: 0; top: 30%; width: 280px; }
.phs--health .hlth__svg { display: block; width: 280px; height: auto; overflow: visible; }
.phs--health .hlth__svg .beat { transform-box: fill-box; transform-origin: 50% 60%; filter: drop-shadow(0 20px 22px rgba(229, 83, 63, .35)); }
.phs--health .hlth__svg .shape { fill: url(#hlthFill); }
.phs--health .hlth__svg .shine { fill: url(#hlthShine); }
.phs--health .hlth__svg .ecg { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.phs--health .hlth__svg .ecg--wire { stroke: url(#hlthWire); }
.phs--health .hlth__svg .ecg--on { stroke: #fff; }
.phs--health .hlth__svg .plug { fill: #f05d49; stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .phs--health .hlth__svg .beat { animation: hlth-beat 1.6s ease-in-out infinite; }
  .phs--health .hlth__svg .ecg { stroke-dasharray: 420; stroke-dashoffset: 420; animation: hlth-trace 2.4s cubic-bezier(.6, .05, .2, 1) .4s infinite; }
  .phs--health .hlth__svg .plug { animation: hlth-plug 2.4s ease-in-out .4s infinite; }
}
@keyframes hlth-plug { 0%, 40% { transform: scale(.6); opacity: .5; } 55% { transform: scale(1.35); opacity: 1; } 70%, 100% { transform: scale(1); opacity: 1; } }
/* narrow laptops: the scene reaches 170px into the gap, so the whole line at 72% with its end on the card's edge */
@media (min-width: 1001px) and (max-width: 1279px) { .phs--health .hlth { left: -115px; transform: scale(.9); transform-origin: left top; } }
/* D-170 (owner: "make the heart bigger or the content wider, so there is very little blank space"): the heart at 210px
   and the health copy 60px wider (its right padding 150 -> 90), so the heart nearly fills the gap */
.phs--health .hlth__svg { height: 200px; }
@media (min-width: 1280px) { .pg .hero:has(.mock > .phs.phs--health) .hero__copy { padding-right: 90px; } }

/* ===================== D-173 (owner, 31 Oct: "motor: a car going from point one to point four, and something creative for the blank space") ===================== */
/* No Claim Bonus gauge under the car card (glass hero, wide screens); the old chip repeated the third step */
.ncb { display: none; }
@media (min-width: 1280px) {
  .pg .phs--motor > .phs-chip { display: none; }
  .pg .phs--motor .ncb { position: absolute; left: 28px; top: 236px; display: grid; justify-items: center; gap: 2px; width: 220px; padding: 18px 16px 16px; text-align: center;
    border-radius: 130px 130px 26px 26px / 110px 110px 26px 26px; border: 1px solid rgba(255, 255, 255, .9);
    background: radial-gradient(110% 80% at 100% 0%, rgba(12, 167, 80, .1), transparent 62%), linear-gradient(155deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55));
    -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 -30px rgba(21, 17, 15, .4); font-family: var(--cy-font, Inter, sans-serif); }
}
.ncb__label { display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1.3 var(--cy-font, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: #77706b; }
.ncb__label i { width: 7px; height: 7px; border-radius: 50%; background: #0ca750; box-shadow: 0 0 8px #0ca750; }
.ncb__dial { display: block; width: 176px; height: auto; overflow: visible; }
.ncb__track, .ncb__fill { fill: none; stroke-width: 13; stroke-linecap: round; }
.ncb__track { stroke: #efe8e5; }
.ncb__fill { stroke: url(#ncbFill); stroke-dasharray: 100; stroke-dashoffset: 0; }
.ncb__dial text { font: 600 9.5px var(--cy-font, Inter, sans-serif); fill: #8a817c; }
.ncb__needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(90deg); }
.ncb__needle line { stroke: #15110f; stroke-width: 4; stroke-linecap: round; }
.ncb__needle circle { fill: #15110f; stroke: #fff; stroke-width: 3; }
.ncb__val { margin-top: 2px; font: 700 20px/1.1 var(--cy-font, Inter, sans-serif); letter-spacing: -.03em; color: #0e8743; }
.ncb small { max-width: 19ch; font-size: 11px; line-height: 1.4; color: #77706b; }
@media (prefers-reduced-motion: no-preference) {
  .ncb__needle { animation: ncb-needle 10s cubic-bezier(.5, .1, .25, 1) infinite; }
  .ncb__fill { animation: ncb-fill 10s cubic-bezier(.5, .1, .25, 1) infinite; }
}
/* the standard slabs: 0, 20, 25, 35, 45, 50% (0-50% across the half dial) */
@keyframes ncb-needle { 0%, 8% { transform: rotate(-90deg); } 16%, 28% { transform: rotate(-18deg); } 36%, 48% { transform: rotate(0deg); } 56%, 68% { transform: rotate(36deg); } 76%, 84% { transform: rotate(72deg); } 92%, 100% { transform: rotate(90deg); } }
@keyframes ncb-fill { 0%, 8% { stroke-dashoffset: 100; } 16%, 28% { stroke-dashoffset: 60; } 36%, 48% { stroke-dashoffset: 50; } 56%, 68% { stroke-dashoffset: 30; } 76%, 84% { stroke-dashoffset: 10; } 92%, 100% { stroke-dashoffset: 0; } }

/* the steps strip as a road (x-product-hero journey="road", motor): steps centred in their columns; a car drives the dashed
   line between them, passing behind each icon (which lights up) and pausing just past it. The car and its trail live in
   the first step: positions are in that step's width (one column = 100%, the gap 12px), icon k at 50% + k * (100% + 12px). */
.pg .strip--road .strip__step { justify-items: center; text-align: center; }
.pg .strip--road .strip__step:not(:last-child)::after { left: calc(50% + 28px); right: calc(16px - 50%); }
.pg .strip--road .strip__step i { position: relative; z-index: 3; }
.pg .strip__trail { position: absolute; z-index: 1; left: 50%; top: 19px; width: calc(300% - 40px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, #f05d49, #0ca750); }
.pg .strip__car { position: absolute; z-index: 2; left: calc(350% - 16px); top: -3px; transform: translateX(-50%); filter: drop-shadow(0 5px 5px rgba(21, 17, 15, .22)); }
.pg .strip__car svg { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .pg .strip__car { animation: road-car 12s ease-in-out infinite; }
  .pg .strip__car svg { animation: road-bob .35s ease-in-out infinite alternate; }
  .pg .strip__trail { animation: road-trail 12s ease-in-out infinite; }
  .pg .strip--road .strip__step i { animation: road-hit 12s ease-out infinite; }
  .pg .strip--road .strip__step:nth-child(1) i { animation-delay: .2s; }
  .pg .strip--road .strip__step:nth-child(2) i { animation-delay: 3s; }
  .pg .strip--road .strip__step:nth-child(3) i { animation-delay: 6.6s; }
  .pg .strip--road .strip__step:nth-child(4) i { animation-delay: 10.6s; }
}
@keyframes road-car { 0% { left: calc(50% + 52px); opacity: 0; } 4%, 10% { left: calc(50% + 52px); opacity: 1; } 30%, 38% { left: calc(150% + 64px); } 60%, 68% { left: calc(250% + 76px); } 88%, 96% { left: calc(350% - 16px); opacity: 1; } 100% { left: calc(350% - 16px); opacity: 0; } }
@keyframes road-trail { 0%, 10% { width: 28px; opacity: 1; } 30%, 38% { width: calc(100% + 40px); } 60%, 68% { width: calc(200% + 52px); } 88%, 96% { width: calc(300% - 40px); opacity: 1; } 100% { width: calc(300% - 40px); opacity: 0; } }
@keyframes road-bob { to { transform: translateY(-1.5px); } }
@keyframes road-hit { 0% { transform: scale(1); } 3% { transform: scale(1.2); box-shadow: 0 0 0 7px color-mix(in srgb, var(--as, #f05d49) 22%, transparent), 0 12px 24px -10px var(--as, #f05d49); } 12%, 100% { transform: scale(1); } }
@media (max-width: 700px) { .pg .strip__trail, .pg .strip__car { display: none; } .pg .strip--road .strip__step { justify-items: start; text-align: left; } }
/* D-173 follow-up (owner: "make the line like a road behind the circle points"): one continuous road from the first circle
   to the last, behind them: asphalt with white lane dashes; the lane line turns solid (coral to green) behind the car.
   The dashed connectors are not drawn here. */
.pg .strip--road .strip__step:not(:last-child)::after { display: none; }
.pg .strip__trail { z-index: 1; top: 13px; width: calc(300% + 36px); height: 14px; border-radius: 14px; background: linear-gradient(180deg, #57504d, #3f3936); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px -8px rgba(21, 17, 15, .5); animation: none; }
.pg .strip__trail::before { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 12px, transparent 12px 24px); }
.pg .strip__trail::after { content: ""; position: absolute; left: 0; top: 5.5px; width: calc(100% - 52px); height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f7836f, #f05d49 45%, #0ca750); box-shadow: 0 0 8px rgba(240, 93, 73, .6); }
.pg .strip__car { top: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .pg .strip__trail { animation: none; }
  .pg .strip__trail::after { animation: road-lane 12s ease-in-out infinite; }
}
@keyframes road-lane { 0%, 10% { width: 52px; opacity: 1; } 30%, 38% { width: calc(33.333% + 52px); } 60%, 68% { width: calc(66.667% + 52px); } 88%, 96% { width: calc(100% - 52px); opacity: 1; } 100% { width: calc(100% - 52px); opacity: 0; } }

/* ===================== D-176: term scene - an umbrella keeps the family dry in the storm (no words) ===================== */
.trm { display: none; }
@media (min-width: 1001px) {
  .pg .phs--term > .umb, .pg .phs--term > .phs-chip { display: none; }
  .pg .phs--term .trm { position: absolute; left: 0; top: 24px; display: block; width: 270px; height: 590px; }
}
@media (min-width: 1001px) and (max-width: 1279px) { .pg .phs--term .trm { left: -79px; transform: scale(.8); transform-origin: left top; } }
.trm__svg { display: block; width: 270px; height: 590px; overflow: visible; }
.trm__cloud { fill: url(#trmCloud); filter: drop-shadow(0 10px 14px rgba(70, 90, 130, .22)); }
.trm__bolt { fill: #ffd23f; opacity: 0; filter: drop-shadow(0 0 8px rgba(255, 210, 63, .9)); }
.trm__drop, .trm__drip { fill: #8fb0e0; opacity: 0; }
.trm__warm { fill: url(#trmWarm); }
.trm__umb { transform-box: view-box; transform-origin: 135px 440px; }
.trm__umb .canopy { fill: url(#trmCanopy); filter: drop-shadow(0 18px 18px rgba(194, 58, 36, .3)); }
.trm__umb .ribs { fill: none; stroke: rgba(92, 23, 14, .28); stroke-width: 2; stroke-linecap: round; }
.trm__umb .sheen { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 5; stroke-linecap: round; }
.trm__umb .tip { stroke: #5c170e; stroke-width: 4; stroke-linecap: round; }
.trm__umb .tip-knob { fill: #5c170e; }
.trm__umb .handle { fill: none; stroke: #5c170e; stroke-width: 5; stroke-linecap: round; }
.trm__puddle { fill: rgba(143, 176, 224, .45); }
.trm__ripple { fill: none; stroke: #8fb0e0; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.trm__shadow { fill: rgba(21, 17, 15, .08); }
.trm__fam .dad { fill: #3f3936; }
.trm__fam .mum { fill: #f7836f; }
.trm__fam .child { fill: #ffc93d; }
.trm__fam .skin { fill: #f2c4a0; }
.trm__fam .hair { fill: #2b2421; }
.trm__fam .arm { fill: none; stroke: #3f3936; stroke-width: 9; stroke-linecap: round; }
.trm__heart { fill: #f05d49; transform-box: fill-box; transform-origin: center; }
.trm__fam .kid { transform-box: fill-box; transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .trm__drop { animation: trm-rain 1.1s linear var(--d) infinite; }
  .trm__drip { animation: trm-drip 1.4s cubic-bezier(.5, 0, 1, 1) var(--d) infinite; }
  .trm__ripple { animation: trm-ripple 1.4s ease-out var(--d) infinite; }
  .trm__bolt { animation: trm-bolt 6s linear infinite; }
  .trm__umb { animation: trm-sway 5s ease-in-out infinite; }
  .trm__warm { animation: trm-warm 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .trm__heart { animation: trm-heart 1.6s ease-in-out infinite; }
  .trm__fam .kid { animation: trm-kid 3s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .trm__drop, .trm__drip { opacity: .8; } }
@keyframes trm-rain { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 80% { opacity: .9; } 100% { transform: translateY(58px); opacity: 0; } }
@keyframes trm-drip { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { transform: translateY(220px); opacity: 0; } }
@keyframes trm-ripple { 0%, 60% { transform: scale(.3); opacity: 0; } 70% { opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes trm-bolt { 0%, 68%, 73%, 76%, 100% { opacity: 0; } 70%, 74% { opacity: 1; } }
@keyframes trm-sway { 0%, 100% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } }
@keyframes trm-warm { 0%, 100% { opacity: .85; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes trm-heart { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(1); } }
@keyframes trm-kid { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ===== D-268 (owner, 5 Nov: "utilise the blank spaces in the health hero, try something else"): the heart moves up, a "Your
   family · example" glass card sits under it in the gap, and "What we compare for you" fills the space under the bullets
   (.hero__extra, from the hero component's extra slot). The members tick in turn, then the compare tiles light in turn. ===== */
@media (min-width: 1001px) {
  .phs--health .hlth { top: 8%; }
  .phs--health .hfam { position: absolute; left: 58px; top: calc(8% + 196px); width: 210px; }
}
@media (min-width: 1001px) and (max-width: 1279px) { .phs--health .hfam { left: -96px; top: calc(8% + 182px); width: 196px; } }
@media (max-width: 1000px) { .phs--health .hfam { display: none; } }
.phs--health .hfam { display: grid; gap: 10px; padding: 16px 16px 14px; border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 26px 46px -28px rgba(92, 23, 14, .4); font-family: var(--cy-font, Inter, sans-serif); }
.phs--health .hfam__label, .hcmp__label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c9412e; }
.phs--health .hfam__label i, .hcmp__label i { width: 7px; height: 7px; border-radius: 50%; background: #f05d49; box-shadow: 0 0 0 4px rgba(240, 93, 73, .14); }
.phs--health .hfam__list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.phs--health .hfam__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .1); }
.phs--health .hfam__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff;
  background: 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%), linear-gradient(150deg, #ff8b78, #e5503c); box-shadow: 0 6px 12px -6px rgba(240, 93, 73, .7); }
.phs--health .hfam__list li:nth-child(2) .hfam__av { background: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 58%), linear-gradient(150deg, #7d93f5, #365eed); box-shadow: 0 6px 12px -6px rgba(54, 94, 237, .7); }
.phs--health .hfam__list li:nth-child(3) .hfam__av { background: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 58%), linear-gradient(150deg, #4cd68a, #0ca750); box-shadow: 0 6px 12px -6px rgba(12, 167, 80, .7); }
.phs--health .hfam__list li:nth-child(4) .hfam__av { background: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 58%), linear-gradient(150deg, #f6c84a, #eaad00); box-shadow: 0 6px 12px -6px rgba(234, 173, 0, .7); }
.phs--health .hfam__av .cy-icon { width: 16px; height: 16px; }
.phs--health .hfam__list b { font-size: 13px; font-weight: 600; color: #25201f; }
.phs--health .hfam__list em { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0ca750; color: #fff; font-style: normal; }
.phs--health .hfam__list em .cy-icon { width: 12px; height: 12px; stroke-width: 3; }
.phs--health .hfam__foot { margin: 2px 0 0; font-size: 11.5px; color: #6b5f5a; text-align: center; }

/* What we compare for you (under the bullets) */
.pg .hero__extra { margin-top: 28px; }
.hcmp { display: grid; gap: 12px; padding: 16px 18px 18px; border-radius: 22px; max-width: 600px; font-family: var(--cy-font, Inter, sans-serif);
  background: linear-gradient(150deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .55)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 24px 44px -32px rgba(92, 23, 14, .4); }
.hcmp__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hcmp__row li { display: grid; justify-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: 16px; text-align: center; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .1); }
.hcmp__row span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff;
  background: 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%), linear-gradient(150deg, #ff8b78, #e5503c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 18px -10px rgba(240, 93, 73, .75); }
.hcmp__row span .cy-icon { width: 20px; height: 20px; }
.hcmp__row b { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #25201f; }
@media (prefers-reduced-motion: no-preference) {
  .phs--health .hfam__list em { animation: hfam-tick 6.4s ease-in-out infinite both; }
  .phs--health .hfam__list li:nth-child(2) em { animation-delay: .4s; }
  .phs--health .hfam__list li:nth-child(3) em { animation-delay: .8s; }
  .phs--health .hfam__list li:nth-child(4) em { animation-delay: 1.2s; }
  .hcmp__row li { animation: hcmp-lit 6.4s ease-in-out infinite both; }
  .hcmp__row li:nth-child(1) { animation-delay: 2s; } .hcmp__row li:nth-child(2) { animation-delay: 2.5s; } .hcmp__row li:nth-child(3) { animation-delay: 3s; } .hcmp__row li:nth-child(4) { animation-delay: 3.5s; }
}
@keyframes hfam-tick { 0%, 4% { transform: scale(0); opacity: 0; } 10%, 88% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(0); opacity: 0; } }
@keyframes hcmp-lit { 0%, 100% { transform: none; box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .1); } 8% { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgba(240, 93, 73, .5), 0 14px 24px -14px rgba(240, 93, 73, .6); } 18% { transform: none; box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .1); } }
@media (max-width: 700px) { .hcmp__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .phs.phs--health .hfam { display: none; } }   /* the family card is a wide-screen picture (the form picks members on phones) */
/* D-269: the card under the heart is "What we compare for you" (coral glossy icons, ticked in turn); the steps strip moves up
   under the bullets and fills the rest of the copy column (OLD D-268: a compare panel there, the strip pinned to the bottom) */
.phs--health .hcmp-v .hfam__list li .hfam__av { background: 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%), linear-gradient(150deg, #ff8b78, #e5503c); box-shadow: 0 6px 12px -6px rgba(240, 93, 73, .7); }
.phs--health .hcmp-v .hfam__list b { white-space: nowrap; }
@media (min-width: 1001px) {
  .pg .in > .hero.hero--tuck:has(.phs--health) { grid-template-rows: auto auto 1fr; grid-template-areas: "copy mock" "strip mock" ". mock"; }
  .pg .hero--tuck:has(.phs--health) > .strip { align-self: start; margin: 36px 0 0; }
}
/* D-269 fit: a smaller heart and a compact card end above the strip; the strip centred in the space under the bullets */
.phs--health .hcmp-v { gap: 8px; padding: 14px 14px 12px; }
.phs--health .hcmp-v .hfam__label { font-size: 10px; letter-spacing: .07em; white-space: nowrap; }
.phs--health .hcmp-v .hfam__list { gap: 6px; }
.phs--health .hcmp-v .hfam__list li { padding: 5px 8px 5px 5px; }
.phs--health .hcmp-v .hfam__foot { margin: 0; font-size: 11px; }
@media (min-width: 1280px) {
  .phs--health .hlth { top: 6%; transform: scale(.82); transform-origin: 50% 0; }
  .phs--health .hcmp-v { top: calc(6% + 168px); left: 46px; width: 222px; }
}
@media (min-width: 1001px) and (max-width: 1279px) { .phs--health .hcmp-v { top: calc(6% + 158px); width: 214px; } }
@media (min-width: 1001px) {
  .pg .hero--tuck:has(.phs--health) > .strip { grid-row: 2 / 4; align-self: center; margin: 24px 0; }
}
@media (min-width: 1280px) { .phs--health .hcmp-v { left: 40px; width: 236px; } }
.phs--health .hcmp-v .hfam__label { font-size: 9.5px; letter-spacing: .05em; }
.phs--health .hcmp-v > * { min-width: 0; }
@media (max-width: 1279px) { .phs.phs--health .hcmp-v { display: none; } }   /* no room beside the copy below 1280px: the heart alone, as in D-170 */
.phs--health .hcmp-v .hfam__label { font-size: 9px; letter-spacing: .04em; }
.phs--health .hcmp-v .hfam__label i { flex: none; }
@media (min-width: 1001px) { .pg .hero--tuck:has(.phs--health) > .strip { grid-area: strip; align-self: start; margin: 44px 0 0; } }
.phs--health .hcmp-v .hfam__label { font-size: 10.5px; letter-spacing: .08em; }   /* (the 14px body-text rule no longer applies: .subline) */
@media (min-width: 1280px) { .pg .hero--tuck:has(.phs--health) > .strip { width: calc(100% + 140px); max-width: none; position: relative; z-index: 2; } }   /* runs under the compare card, short of the form */
/* D-270: the health hero's left column: copy, steps, then the broker note, filling down to the form */
@media (min-width: 1001px) {
  .pg .in > .hero.hero--tuck.hero--tuck:has(.phs--health) { grid-template-rows: auto auto auto 1fr; grid-template-areas: "copy mock" "strip mock" "note mock" ". mock"; padding-bottom: 24px; }
  .pg .hero--tuck:has(.phs--health) > .hero__note--in { grid-area: note; margin: -16px 0 0; }   /* 24px under the strip (the grid row gap is 40px) */
}
@media (max-width: 1000px) { .pg .hero--tuck:has(.phs--health) > .hero__note--in { grid-column: 1 / -1; margin: 18px 0 0; } }
@media (min-width: 1280px) { .phs--health .hcmp-v { transform: translateX(-26px); } }   /* D-271: 30px clear of the quote form (was 4px) */
@media (min-width: 1280px) and (max-width: 1439px) { .phs--health .hcmp-v { transform: translateX(-20px); } }   /* room on both sides on narrower laptops */
/* D-272 (owner: "move the heart to the left, it is not aligned; move What we compare down a little"): the heart centred over
   the card, the card 18px lower (OLD D-271: heart 24px right of the card's centre, card tucked under the heart) */
@media (min-width: 1440px) { .phs--health .hlth { transform: translateX(-24px) scale(.82); } .phs--health .hcmp-v { transform: translate(-26px, 18px); } }
@media (min-width: 1280px) and (max-width: 1439px) { .phs--health .hlth { transform: translateX(-18px) scale(.82); } .phs--health .hcmp-v { transform: translate(-20px, 18px); } }

/* ===== D-273 (owner: "fix the home insurance hero"): the health hero's layout for home. The house centred in the gap with a
   "What it can cover" glass card under it (Fire, Theft, Flood ticked in turn; OLD: three chips half under the form); the steps
   strip and the broker note moved up under the bullets (OLD: the strip at the bottom, an empty band above it). ===== */
@media (min-width: 1001px) {
  .pg .in > .hero.hero--tuck.hero--tuck:has(.phs--home) { grid-template-rows: auto auto auto 1fr; grid-template-areas: "copy mock" "strip mock" "note mock" ". mock"; padding-bottom: 24px; }
  .pg .hero--tuck:has(.phs--home) > .strip { grid-area: strip; align-self: start; margin: 44px 0 0; }
  .pg .hero--tuck:has(.phs--home) > .hero__note--in { grid-area: note; margin: -16px 0 0; }
  .ph--scene .ph-card-wrap:has(.phs--home) { margin-bottom: 0; }
}
@media (min-width: 1280px) { .pg .hero--tuck:has(.phs--home) > .strip { width: calc(100% + 140px); max-width: none; position: relative; z-index: 2; } }
@media (max-width: 1000px) { .pg .hero--tuck:has(.phs--home) > .hero__note--in { grid-column: 1 / -1; margin: 18px 0 0; } }
.phs--home .hcov { display: none; }
@media (min-width: 1280px) {
  .phs--home .house { left: 43px; top: 34px; width: 230px; height: 212px; }
  .phs--home .hcov { position: absolute; left: 40px; top: 280px; width: 236px; display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: 22px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 26px 46px -28px rgba(92, 23, 14, .4); font-family: var(--cy-font, Inter, sans-serif); }
  .phs--home .house, .phs--home .hcov { transform: translateX(-26px); }
}
@media (min-width: 1280px) and (max-width: 1439px) { .phs--home .house, .phs--home .hcov { transform: translateX(-20px); } }
.phs--home .hcov__label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c9412e; white-space: nowrap; }
.phs--home .hcov__label i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f05d49; box-shadow: 0 0 0 4px rgba(240, 93, 73, .14); }
.phs--home .hcov__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.phs--home .hcov__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .1); }
.phs--home .hcov__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff;
  background: 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%), linear-gradient(150deg, #ff8b78, #e5503c); box-shadow: 0 6px 12px -6px rgba(240, 93, 73, .7); }
.phs--home .hcov__av .cy-icon { width: 16px; height: 16px; }
.phs--home .hcov__list b { font-size: 13px; font-weight: 600; color: #25201f; }
.phs--home .hcov__list em { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0ca750; color: #fff; font-style: normal; }
.phs--home .hcov__list em .cy-icon { width: 12px; height: 12px; stroke-width: 3; }
.phs--home .hcov__foot { margin: 0; font-size: 11px; color: #6b5f5a; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .phs--home .hcov__list em { animation: hfam-tick 6.4s ease-in-out infinite both; }
  .phs--home .hcov__list li:nth-child(2) em { animation-delay: .4s; }
  .phs--home .hcov__list li:nth-child(3) em { animation-delay: .8s; }
}

/* D-273: cyber in the same layout - the steps strip (now tucked) and the broker note under the bullets, the phone moved down and
   centred in the gap between the copy and the form, the "Fraud loss covered" chip right under it (OLD: the phone at the very
   top, the chip below the form, the strip on its own row under the hero, an empty band under the bullets) */
@media (min-width: 1001px) {
  .pg .in > .hero.hero--tuck.hero--tuck:has(.phs--cyber) { grid-template-rows: auto auto auto 1fr; grid-template-areas: "copy mock" "strip mock" "note mock" ". mock"; padding-bottom: 24px; }
  .pg .hero--tuck:has(.phs--cyber) > .strip { grid-area: strip; align-self: start; margin: 44px 0 0; }
  .pg .hero--tuck:has(.phs--cyber) > .hero__note--in { grid-area: note; margin: -16px 0 0; }
}
@media (min-width: 1280px) {
  .pg .hero--tuck:has(.phs--cyber) > .strip { width: calc(100% + 140px); max-width: none; position: relative; z-index: 2; }
  .phs--cyber .phone { left: 52px; top: 96px; }
  .phs--cyber > .phs-chip { left: 30px; right: auto; top: 400px; bottom: auto; }
}
@media (min-width: 1280px) and (max-width: 1439px) { .phs--cyber .phone { left: 46px; } .phs--cyber > .phs-chip { left: 24px; } }
@media (max-width: 1000px) { .pg .hero--tuck:has(.phs--cyber) > .hero__note--in { grid-column: 1 / -1; margin: 18px 0 0; } }
@media (min-width: 1001px) { .pg .hero--tuck.hero--tuck:has(.phs--cyber) > .strip { margin-bottom: 0; } .pg .in > .hero.hero--tuck.hero--tuck:has(.phs--cyber) { padding-bottom: 24px; } }   /* not the chip heroes' -46px (pi-glass) */
@media (min-width: 1440px) { .phs--cyber > .phs-chip { left: 39px; } }
@media (min-width: 1280px) and (max-width: 1439px) { .phs--cyber > .phs-chip { left: 33px; } }

/* D-274 (owner: "move the child education goal to the blank part of the hero"): investment in the same layout - the chart card and
   the "Child's education goal" chip centred in the gap between the copy and the form, the chip under the chart (OLD: under the
   form); the steps strip and the broker note under the bullets */
@media (min-width: 1001px) {
  .pg .in > .hero.hero--tuck.hero--tuck:has(.phs--investment) { grid-template-rows: auto auto auto 1fr; grid-template-areas: "copy mock" "strip mock" "note mock" ". mock"; padding-bottom: 24px; }
  .pg .hero--tuck.hero--tuck:has(.phs--investment) > .strip { grid-area: strip; align-self: start; margin: 44px 0 0; }
  .pg .hero--tuck:has(.phs--investment) > .hero__note--in { grid-area: note; margin: -16px 0 0; }
}
@media (min-width: 1280px) {
  .pg .hero--tuck:has(.phs--investment) > .strip { width: calc(100% + 140px); max-width: none; position: relative; z-index: 2; }
  .phs--investment .chart { left: 25px; top: 70px; }
  .phs--investment > .phs-chip { left: 25px; right: auto; top: 300px; bottom: auto; }
}
@media (max-width: 1000px) { .pg .hero--tuck:has(.phs--investment) > .hero__note--in { grid-column: 1 / -1; margin: 18px 0 0; } }
@media (min-width: 1280px) { .phs--investment > .phs-chip { top: 268px; } }   /* 30px under the chart card */

/* ===================== D-275 (owner: "between accident and claim the car gets into an accident, then the tow truck puts it into a
   garage and it comes out all new; make it good and smooth"): the motor road tells the claim story in one 14 s loop.
   Positions are in the first step's width, as before: icon k at 50% + k * (100% + 12px).
     0 - 8 %   the car drives in and crashes just past the first icon: a burst, a jolt, a tilt, smoke; it turns dull
     20 - 26 % a yellow flatbed tow truck (beacon flashing) arrives and the car is lifted onto it
     26 - 56 % the truck carries it along the road, past the second icon, to the garage (third icon)
     56 - 62 % the car goes into the garage; the truck drives off; 60 - 70 % repair sparkles over the garage
     72 - 88 % the car comes out new (bright, a glint) and drives to the last icon; then it fades and the loop restarts
   The lane behind fills coral to green with it. Phones (no road): unchanged. Reduced motion: the car at the end, no story.
   OLD (D-108 / D-173): the car drove step to step, pausing at each. ===================== */
.pg .strip--road .strip__boom, .pg .strip--road .strip__tow, .pg .strip--road .strip__fix { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transform: translateX(-50%); }
.pg .strip--road .strip__boom { z-index: 4; left: calc(50% + 64px); top: -14px; }
.pg .strip--road .strip__tow { left: calc(50% - 100px); top: -3px; filter: drop-shadow(0 5px 5px rgba(21, 17, 15, .22)); }
.pg .strip--road .strip__fix { z-index: 4; left: calc(250% + 24px); top: -22px; width: 54px; height: 30px; }
.pg .strip--road .strip__fix i { position: absolute; width: 10px; height: 10px; background: #f2b800; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.pg .strip--road .strip__fix i:nth-child(1) { left: 4px; top: 10px; }
.pg .strip--road .strip__fix i:nth-child(2) { left: 22px; top: 0; width: 14px; height: 14px; background: #f05d49; }
.pg .strip--road .strip__fix i:nth-child(3) { left: 42px; top: 12px; }
.pg .strip__car .strip__smoke, .pg .strip__car .strip__glint { position: absolute; pointer-events: none; opacity: 0; }
.pg .strip__car .strip__smoke { left: 14px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: rgba(120, 112, 108, .5); }
.pg .strip__car .strip__smoke + .strip__smoke { left: 22px; top: -10px; width: 9px; height: 9px; }
.pg .strip__car .strip__glint { left: 20px; top: -8px; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px #ffd76a); }
@media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
  .pg .strip--road .strip__car { animation: road-story-car 14s cubic-bezier(.45, .05, .35, 1) infinite; }
  .pg .strip--road .strip__car svg { animation: road-story-look 14s linear infinite, road-bob .35s ease-in-out infinite alternate; }
  .pg .strip--road .strip__tow { animation: road-story-tow 14s cubic-bezier(.45, .05, .35, 1) infinite; }
  .pg .strip--road .strip__tow .strip__beacon { animation: road-beacon .5s steps(1) infinite; }
  .pg .strip--road .strip__boom { animation: road-story-boom 14s ease-out infinite; }
  .pg .strip--road .strip__fix { animation: road-story-fix 14s ease-in-out infinite; }
  .pg .strip--road .strip__fix i { animation: road-twinkle .6s ease-in-out infinite alternate; }
  .pg .strip--road .strip__fix i:nth-child(2) { animation-delay: .2s; }
  .pg .strip--road .strip__fix i:nth-child(3) { animation-delay: .4s; }
  .pg .strip__car .strip__smoke { animation: road-story-smoke 14s ease-out infinite; }
  .pg .strip__car .strip__smoke + .strip__smoke { animation-delay: .25s; }
  .pg .strip__car .strip__glint { animation: road-story-glint 14s ease-in-out infinite; }
  .pg .strip--road .strip__trail::after { animation: road-story-lane 14s cubic-bezier(.45, .05, .35, 1) infinite; }
  .pg .strip--road .strip__step i { animation: road-hit 14s ease-out infinite; }
  .pg .strip--road .strip__step:nth-child(1) i { animation-delay: 1.15s; }
  .pg .strip--road .strip__step:nth-child(2) i { animation-delay: 5.6s; }
  .pg .strip--road .strip__step:nth-child(3) i { animation-delay: 8.1s; }
  .pg .strip--road .strip__step:nth-child(4) i { animation-delay: 12.3s; }
}
@keyframes road-story-car {
  0% { left: calc(50% - 30px); opacity: 0; transform: translateX(-50%); }
  3% { opacity: 1; }
  8% { left: calc(50% + 46px); transform: translateX(-50%); }
  9% { left: calc(50% + 38px); transform: translateX(-50%) rotate(-11deg); }
  11%, 24% { left: calc(50% + 40px); transform: translateX(-50%) rotate(-6deg); }
  27% { left: calc(50% + 40px); transform: translateX(-50%) translateY(-9px); }
  56% { left: calc(250% + 18px); opacity: 1; transform: translateX(-50%) translateY(-9px); }
  59% { left: calc(250% + 24px); opacity: 0; transform: translateX(-50%) translateY(0) scale(.85); }
  70% { left: calc(250% + 24px); opacity: 0; transform: translateX(-50%) scale(.85); }
  73% { left: calc(250% + 56px); opacity: 1; transform: translateX(-50%); }
  88%, 95% { left: calc(350% - 16px); opacity: 1; transform: translateX(-50%); }
  100% { left: calc(350% - 16px); opacity: 0; transform: translateX(-50%); }
}
@keyframes road-story-look { 0%, 8% { filter: none; } 9%, 58% { filter: grayscale(.75) brightness(.82); } 59%, 70% { filter: none; } 73% { filter: brightness(1.35) saturate(1.3) drop-shadow(0 0 6px rgba(255, 215, 106, .9)); } 80%, 100% { filter: none; } }
@keyframes road-story-tow {
  0%, 18% { left: calc(50% - 90px); opacity: 0; }
  20% { opacity: 1; }
  25%, 27% { left: calc(50% + 52px); opacity: 1; }
  56% { left: calc(250% + 30px); opacity: 1; }
  62% { left: calc(250% + 120px); opacity: 0; }
  100% { left: calc(250% + 120px); opacity: 0; }
}
@keyframes road-story-boom { 0%, 7.6% { opacity: 0; transform: translateX(-50%) scale(.2) rotate(0); } 8.6% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(12deg); } 11% { opacity: 1; transform: translateX(-50%) scale(1) rotate(8deg); } 15%, 100% { opacity: 0; transform: translateX(-50%) scale(.9) rotate(8deg); } }
@keyframes road-story-fix { 0%, 59% { opacity: 0; transform: translateX(-50%) translateY(6px); } 61%, 69% { opacity: 1; transform: translateX(-50%) translateY(0); } 72%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
@keyframes road-twinkle { from { transform: scale(.6) rotate(0); } to { transform: scale(1.1) rotate(45deg); } }
@keyframes road-beacon { 50% { fill: #ffd76a; } }
@keyframes road-story-smoke { 0%, 9% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: .9; } 22% { opacity: .6; transform: translateY(-10px) scale(1.3); } 24%, 100% { opacity: 0; transform: translateY(-14px) scale(1.5); } }
@keyframes road-story-glint { 0%, 72% { opacity: 0; transform: scale(.3) rotate(0); } 75% { opacity: 1; transform: scale(1.2) rotate(45deg); } 80%, 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes road-story-lane { 0%, 8% { width: 52px; opacity: 1; } 27% { width: 52px; } 56% { width: calc(66.667% + 30px); } 70% { width: calc(66.667% + 30px); } 88%, 95% { width: calc(100% - 52px); opacity: 1; } 100% { width: calc(100% - 52px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pg .strip--road .strip__boom, .pg .strip--road .strip__tow, .pg .strip--road .strip__fix { display: none; } }
@media (max-width: 700px) { .pg .strip--road .strip__boom, .pg .strip--road .strip__tow, .pg .strip--road .strip__fix { display: none; } }

/* D-275: motor in the tucked layout (road strip and broker note under the bullets, as health, home, cyber, investment) */
@media (min-width: 1001px) {
  .pg .in > .hero.hero--tuck.hero--tuck:has(.phs--motor) { grid-template-rows: auto auto auto 1fr; grid-template-areas: "copy mock" "strip mock" "note mock" ". mock"; padding-bottom: 24px; }
  .pg .hero--tuck.hero--tuck:has(.phs--motor) > .strip { grid-area: strip; align-self: start; margin: 44px 0 0; }
  .pg .hero--tuck:has(.phs--motor) > .hero__note--in { grid-area: note; margin: -16px 0 0; }
}
@media (min-width: 1280px) { .pg .hero--tuck:has(.phs--motor) > .strip { width: calc(100% + 140px); max-width: none; position: relative; z-index: 2; } }
@media (max-width: 1000px) { .pg .hero--tuck:has(.phs--motor) > .hero__note--in { grid-column: 1 / -1; margin: 18px 0 0; } }

/* D-276 (owner: "move this down, utilise the blank space"): the investment chart and goal chip lower, centred in the gap's height */
@media (min-width: 1280px) { .phs--investment .chart { top: 150px; } .phs--investment > .phs-chip { top: 348px; } }

/* D-277 (owner: "fix blank space and negative space", the hospital heroes): the five hospital pages in the tucked layout - steps
   strip and broker note under the bullets (hospital indemnity and property are now tuck too) */
@media (min-width: 1001px) {
  .pg .in > .hero.hero--tuck.hero--tuck:has(:is(.phs--hospital-pi, .phs--property, .phs--package, .phs--money, .phs--liability)) { grid-template-rows: auto auto auto 1fr; grid-template-areas: "copy mock" "strip mock" "note mock" ". mock"; padding-bottom: 24px; }
  .pg .hero--tuck.hero--tuck:has(:is(.phs--hospital-pi, .phs--property, .phs--package, .phs--money, .phs--liability)) > .strip { grid-area: strip; align-self: start; margin: 44px 0 0; }
  .pg .hero--tuck:has(:is(.phs--hospital-pi, .phs--property, .phs--package, .phs--money, .phs--liability)) > .hero__note--in { grid-area: note; margin: -16px 0 0; }
}
@media (min-width: 1280px) { .pg .hero--tuck:has(:is(.phs--hospital-pi, .phs--property, .phs--package, .phs--money, .phs--liability)) > .strip { width: calc(100% + 140px); max-width: none; position: relative; z-index: 2; } }
@media (max-width: 1000px) { .pg .hero--tuck:has(:is(.phs--hospital-pi, .phs--property, .phs--package, .phs--money, .phs--liability)) > .hero__note--in { grid-column: 1 / -1; margin: 18px 0 0; } }
/* D-277: each hospital drawing centred in the gap between the copy and the form, its chip(s) right under it (OLD: the drawing
   left of centre at the top, the chip far below beside the form) */
@media (min-width: 1280px) {
  .phs--hospital-pi .bld, .phs--hospital-pi .staff { translate: 22px 0; }
  .phs--property .bld { translate: 19px 0; }
  .phs--package .box, .phs--package .out { translate: 30px 30px; }
  .phs--money .safe, .phs--money .note { translate: 20px 0; }
  .phs--liability .sign { translate: 27px 0; }
  :is(.phs--hospital-pi, .phs--property, .phs--package, .phs--money, .phs--liability) > .phs-chip { right: auto; bottom: auto; left: 132px; translate: -50% 0; }
  .phs--hospital-pi > .phs-chip, .phs--property > .phs-chip, .phs--liability > .phs-chip.c1 { top: 262px; }
  .phs--package > .phs-chip { top: 342px; }
  .phs--money > .phs-chip { top: 290px; }
  .phs.phs--liability > .phs-chip.c2 { top: 322px; left: 132px; bottom: auto; }
}

/* ===== D-310 (owner, 6 Nov: "for product pages the heading comes, then the form, then the content"): on phones and tablets
   (the hero stacks below 1001px) the product hero reads H1 -> the form -> the intro line, the ticks, the extra panel, the
   steps strip and the broker note. Done by order, not markup: the copy and the mock columns let their children join the
   hero's own column (display: contents). Desktop is unchanged. OLD: H1, intro, ticks, then the form ~700px down. ===== */
@media (max-width: 1000px) {
  .pg .in > .hero { display: flex !important; flex-direction: column; align-items: stretch; }
  .pg .in > .hero > .hero__copy, .pg .in > .hero > .mock { display: contents !important; }
  .pg .in > .hero > .hero__copy > h1 { order: 1; }
  .pg .in > .hero > .mock > .ph-card { order: 2; margin-top: 18px; }
  .pg .in > .hero > .hero__copy > .hero__lead { order: 3; margin-top: 22px; }
  .pg .in > .hero > .hero__copy > .ticks { order: 4; }
  .pg .in > .hero > .hero__copy > .hero__extra { order: 5; }
  .pg .in > .hero > .mock > :is(.phs, .pp-obj, [class*="obj"]) { order: 6; }
  .pg .in > .hero > .strip { order: 7; }
  .pg .in > .hero > .hero__note { order: 8; }
}
/* D-310: in that order the decorative scene would float over the heading (its frame is gone), so phones and tablets skip it
   (most scenes were already hidden on phones); and the copy sits close under the form, without the desktop's large gaps */
@media (max-width: 1000px) {
  .pg .in > .hero > .mock > .phs { display: none !important; }
  .pg .in > .hero > .hero__copy > .hero__lead { margin: 22px 0 0 !important; }
  .pg .in > .hero > .hero__copy > .ticks { margin-top: 14px !important; }
  .pg .in > .hero > .hero__copy > .hero__extra { margin-top: 14px !important; }
  .pg .in > .hero > .strip { margin-top: 24px !important; }
}
/* D-310: the stacked hero spaces its parts by their own margins (no 40px grid gap on top), and the PI page's floating
   "Legal notice" card (decorative, positioned for the desktop) is skipped on phones and tablets like the scenes */
@media (max-width: 1000px) {
  .pg .in > .hero { row-gap: 0 !important; gap: 0 !important; }
  .pg .in > .hero > .mock > :is(.float, .notice) { display: none !important; }
  .pg .in > .hero > .hero__copy > h1 { margin-bottom: 0 !important; }
}

/* D-320 (owner, 8 Nov: "fix the renewal pages also"): the "Policy renewal" card and its RENEWED stamp sat about 47px under
   the form card on every renewal page, so its text was cut off at the right. Both move 52px left and the card is 94% size,
   so it now stands fully clear of the form, with at least ~19px to the heading at every width from 1100 to 2560px.
   OLD: .rpolicy left 8px, scale 1; stamp left 34px. */
.phs--renewal .rpolicy { left: -44px; transform: rotate(-6deg) scale(.94); transform-origin: top left; }
.phs--renewal .phs-stamp { left: -18px; }
@media (max-width: 1279.98px) {
  .phs--renewal .rpolicy { left: -50px; transform: rotate(-6deg) scale(.82); }
  .phs--renewal .phs-stamp { left: -52px; top: 112px; transform: rotate(-12deg) scale(.86); }
}

/* D-322 (owner, 8 Nov: "move this down"): the Property hero's "Equipment & assets · Covered" chip sat tight under the
   building's dashed circle; it is 42px lower now (top 262px -> 304px), still clear of the steps strip at 1280-2560px. */
@media (min-width: 1280px) { .phs--property > .phs-chip { top: 304px; } }
/* D-322 (owner: "move this down as well"): the Money hero's "Cash in transit" chip, 42px lower too (top 290px -> 332px) */
@media (min-width: 1280px) { .phs--money > .phs-chip { top: 332px; } }
/* from 2000px the steps strip sits higher (y 443): the Money chip keeps its old place there so it stays clear of the strip */
@media (min-width: 2000px) { .phs--money > .phs-chip { top: 290px; } }
@media (min-width: 1280px) and (max-width: 1439.98px) { .phs--money > .phs-chip { top: 318px; } }

/* D-322 (owner, 8 Nov): the Package box redrawn as an open box (partials/hero-scenes/package) and a little lower; its labels
   follow. The flaps breathe on their own hinge (scale towards the rim), so they never come away from the box. */
.phs--package .box { left: 6px; top: 130px; width: 188px; height: 160px; overflow: visible; }
.phs--package .box .b { fill: #fff4f1; stroke: #e5533f; stroke-width: 2.4; stroke-linejoin: round; }
.phs--package .box .in { fill: #f7c7bd; }
.phs--package .box .face--r { fill: #fde4de; }
.phs--package .box .flap { fill: #fff8f6; transform-box: fill-box; }
.phs--package .box .flap--bl, .phs--package .box .flap--br { transform-origin: 50% 100%; }
.phs--package .box .flap--fl, .phs--package .box .flap--fr { transform-origin: 50% 0%; }
.phs--package .o5 { top: 282px; }
@media (prefers-reduced-motion: no-preference) {
  .phs--package .box .flap { animation: phs-flap2 3.6s ease-in-out infinite; }
  .phs--package .box .flap--br, .phs--package .box .flap--fr { animation-delay: .25s; }
}
@keyframes phs-flap2 { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1, .82); } }
@media (min-width: 1280px) {
  .phs--package > .phs-chip { top: 352px; }
  /* Hospital Indemnity: the "Lawyer assigned" chip sat right on the staff badges; 40px lower */
  .phs--hospital-pi > .phs-chip { top: 302px; }
  /* Money: one place at every wide width now that the strip no longer rises on very wide screens (below) */
  .phs--money > .phs-chip { top: 332px; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) { .phs--money > .phs-chip { top: 318px; } }
/* from 2000px the copy column is shorter, so the steps strip rose ~63px and ran into the scene chips (Package overlapped it).
   It keeps its 1920px height there now. */
@media (min-width: 2000px) {
  .pg .hero--tuck.hero--tuck:has(:is(.phs--hospital-pi, .phs--property, .phs--package, .phs--money, .phs--liability)) > .strip { margin-top: 108px; }
}
/* D-322b: the RENEWED stamp's last letters touched the form card's edge on wide screens; 10px further left */
@media (min-width: 1280px) { .phs--renewal .phs-stamp { left: -28px; } }
/* D-324 (owner, 8 Nov: "move this down and left a little"): the RENEWED stamp sat over the "Renewal due" row; ~22px lower and
   ~14px further left */
.phs--renewal .phs-stamp { top: 150px; }
@media (min-width: 1280px) { .phs--renewal .phs-stamp { left: -42px; } }
@media (max-width: 1279.98px) { .phs--renewal .phs-stamp { left: -66px; top: 132px; } }
/* D-328 (owner, 8 Nov: "check these blank spaces in all renewal pages and fix it"): the policy-renewal card sat at the very
   top of the scene, leaving an empty block beside the heading and intro under it. The card and its stamp come down ~126px so
   they sit beside the heading and intro, between the copy and the form (clear of the steps below). */
/* (a fixed drop collided with the steps on pages with a short heading, e.g. Motor: the room between the heading and the steps
   is 236-356px depending on the page.) renew/index.blade.php measures that room and sets --rn-dy so the card and its stamp sit
   in the middle of it, clear of the heading, the intro and the steps; without the script they stay where they were. */
.phs--renewal .rpolicy { top: calc(34px + var(--rn-dy, 0px)); }
.phs--renewal .phs-stamp { top: calc(150px + var(--rn-dy, 0px)); }
@media (max-width: 1279.98px) { .phs--renewal .phs-stamp { top: calc(132px + var(--rn-dy, 0px)); } }
/* D-332 (owner, 8 Nov: "move the illustration down, I can see blank space on the HPI page"): the Hospital Indemnity drawing
   (hospital, staff badges and the "Lawyer assigned" chip) sat at the very top of the hero, leaving an empty block under it
   down to the steps strip. The whole group comes down so it sits level with the form, centred in the space between the
   header and the steps strip (the strip is higher between 1680 and 1999px, so the drop is smaller there). */
@media (min-width: 1280px) {
  .phs--hospital-pi { --hpi-dy: 130px; }
  .phs--hospital-pi > :is(.bld, .staff, .phs-chip) { margin-top: var(--hpi-dy); }
}
@media (min-width: 1680px) { .phs--hospital-pi { --hpi-dy: 100px; } }
@media (min-width: 2000px) { .phs--hospital-pi { --hpi-dy: 115px; } }

/* ===================== D-335 (owner, 10 Nov: "the same animation but in a different design that fills the blank space; once the
   car goes inside Cashless repair it should disappear, not come out and fade; the car does not fully reach the end; use some
   other car"): the motor road is a wide scene at the top of the steps card (markup: components/product-hero, .roadx).
   From 1001px (where the hero has two columns) the card runs under both hero columns (the form ends above it at every width), so the empty band beside it
   is gone. The scene: a soft skyline, an asphalt road with lane dashes, a signpost per step at the centre of its column, and
   a garage at "Cashless repair". The 14 s story is the same as D-275:
     0 - 9 %   the car drives in and crashes just past the first sign (burst, jolt, tilt, smoke; it turns dull)
     19 - 28 % a yellow flatbed tow truck arrives and the car is lifted onto it
     28 - 50 % the truck carries it past "Claim raised" into the garage - both pass behind the garage's front wall, so they
               are simply gone once inside (OLD: the car faded and shrank in the open)
     52 - 68 % the garage door glows and sparkles while it is repaired
     69 - 90 % the car drives out of the garage, new (a glint), and stops exactly at the last sign (OLD: it stopped short)
   The lane fills coral to green behind it, and each sign pops as the car reaches it. Phones (below 701px): the list as before,
   no scene. Reduced motion: the car parked at the last sign, no story. ===================== */
.pg .strip.strip--roadx { position: relative; grid-template-columns: minmax(0, 1fr); }
.pg .strip--roadx .roadx { display: none; }
@media (min-width: 701px) {
  .pg .strip--roadx > .strip__steps { padding: 172px 22px 22px !important; column-gap: 0 !important; }
  .pg .strip--roadx .strip__step { justify-items: center; text-align: center; padding: 0 8px; }
  .pg .strip--roadx .strip__step > i { display: none !important; }
  .pg .strip--roadx .strip__step::after { display: none !important; }
  .pg .strip--roadx .roadx { display: block; position: absolute; z-index: 3; left: 22px; right: 22px; top: 0; height: 160px; pointer-events: none;
    clip-path: inset(0 -22px 0 -22px round var(--r-card, 24px) var(--r-card, 24px) 0 0); }
}
.pg .roadx > * { position: absolute; }
/* skyline: light coral blocks and green trees, repeated along the scene */
.pg .roadx__sky { z-index: 0; left: -22px; right: -22px; bottom: 44px; height: 74px; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 74'%3E%3Cg fill='%23f05d49' fill-opacity='.09'%3E%3Crect x='6' y='30' width='26' height='44' rx='2'/%3E%3Crect x='36' y='12' width='22' height='62' rx='2'/%3E%3Crect x='62' y='38' width='30' height='36' rx='2'/%3E%3Crect x='120' y='22' width='24' height='52' rx='2'/%3E%3Crect x='148' y='44' width='20' height='30' rx='2'/%3E%3Crect x='196' y='26' width='28' height='48' rx='2'/%3E%3Crect x='228' y='48' width='26' height='26' rx='2'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.7'%3E%3Crect x='41' y='20' width='4' height='5'/%3E%3Crect x='49' y='20' width='4' height='5'/%3E%3Crect x='41' y='32' width='4' height='5'/%3E%3Crect x='49' y='32' width='4' height='5'/%3E%3Crect x='126' y='30' width='4' height='5'/%3E%3Crect x='134' y='30' width='4' height='5'/%3E%3Crect x='203' y='34' width='4' height='5'/%3E%3Crect x='212' y='34' width='4' height='5'/%3E%3C/g%3E%3Cg fill='%230ca750' fill-opacity='.14'%3E%3Ccircle cx='104' cy='60' r='12'/%3E%3Ccircle cx='182' cy='62' r='10'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 260px 74px repeat-x; }
/* the road */
/* the road ends just past the last sign, so the parked car sits at its end */
.pg .roadx__road { z-index: 2; left: 0; right: calc(12.5% - 54px); bottom: 14px; height: 32px; border-radius: 16px; background: linear-gradient(180deg, #5a5350, #3d3734);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 10px 18px -12px rgba(21, 17, 15, .6); }
.pg .roadx__road::before { content: ""; position: absolute; left: 14px; right: 14px; top: 15px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 14px, transparent 14px 28px); }
.pg .roadx__fill { z-index: 3; left: 1%; bottom: 29px; width: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f7836f, #f05d49 45%, #0ca750); box-shadow: 0 0 8px rgba(240, 93, 73, .6); }
/* signposts: a pole behind the road and a round sign with the step's icon */
.pg .roadx__stop { z-index: 1; left: var(--x); bottom: 40px; display: flex; flex-direction: column-reverse; align-items: center; transform: translateX(-50%); }
.pg .roadx__pole { width: 4px; height: 30px; border-radius: 2px; background: linear-gradient(90deg, #b8aea9, #d9d1cd); }
.pg .roadx__sign { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-style: normal; background: #fff; box-shadow: 0 10px 20px -10px rgba(21, 17, 15, .45), inset 0 0 0 2px currentColor; }
.pg .roadx__sign .ic { width: 22px; height: 22px; }
.pg .roadx__stop--1 .roadx__sign { color: #e03131; background: #fff1f0; }
.pg .roadx__stop--2 .roadx__sign { color: #3b5bdb; background: #eef2ff; }
.pg .roadx__stop--4 .roadx__sign { color: #0a8a52; background: #e7f8ef; }
/* the garage stands over the road, so the car and the truck pass behind its front wall */
.pg .roadx__garage.roadx__stop { z-index: 6; bottom: 10px; display: block; width: 150px; height: 92px; }
.pg .roadx__bldg { display: block; filter: drop-shadow(0 12px 14px rgba(92, 23, 14, .22)); }
.pg .roadx__garage .roadx__sign { position: absolute; left: 50%; top: -30px; translate: -50% 0; z-index: 2; color: #fff; background: linear-gradient(150deg, #ff8b78, #e5503c); box-shadow: 0 0 0 4px #fff, 0 12px 22px -10px rgba(229, 80, 60, .8); }
.pg .roadx__glow { opacity: 0; }
.pg .roadx__spark { left: 50%; top: 18px; width: 70px; height: 26px; translate: -50% 0; opacity: 0; }
.pg .roadx__spark i { position: absolute; width: 11px; height: 11px; background: #f2b800; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.pg .roadx__spark i:nth-child(1) { left: 4px; top: 10px; }
.pg .roadx__spark i:nth-child(2) { left: 28px; top: 0; width: 15px; height: 15px; background: #fff; filter: drop-shadow(0 0 3px #ffd76a); }
.pg .roadx__spark i:nth-child(3) { left: 54px; top: 12px; }
/* the vehicles */
.pg .roadx__car { z-index: 5; left: 2%; bottom: 21px; transform: translateX(-50%); }
.pg .roadx__car svg, .pg .roadx__tow svg { display: block; overflow: visible; }
.pg .roadx__tow { z-index: 4; left: 46%; bottom: 20px; opacity: 0; transform: translateX(-34%); filter: drop-shadow(0 6px 6px rgba(21, 17, 15, .2)); }
.pg .roadx__boom { z-index: 7; left: 19%; bottom: 46px; opacity: 0; transform: translateX(-50%); }
.pg .roadx__car .roadx__smoke, .pg .roadx__car .roadx__glint { position: absolute; opacity: 0; }
.pg .roadx__car .roadx__smoke { left: 46px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: rgba(120, 112, 108, .55); }
.pg .roadx__car .roadx__smoke + .roadx__smoke { left: 54px; top: -9px; width: 9px; height: 9px; }
.pg .roadx__car .roadx__glint { left: 30px; top: -6px; width: 15px; height: 15px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px #ffd76a); }
.pg .roadx__wheel { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .pg .roadx__car { left: 87.5%; }
  .pg .roadx__fill { width: 86.5%; }
}
@media (prefers-reduced-motion: no-preference) {
  .pg .roadx__car { animation: roadx-car 14s cubic-bezier(.45, .05, .35, 1) infinite; }
  .pg .roadx__car svg { animation: roadx-look 14s linear infinite; }
  .pg .roadx__car .roadx__wheel, .pg .roadx__tow .roadx__wheel { animation: roadx-spin .6s linear infinite; }
  .pg .roadx__tow { animation: roadx-tow 14s cubic-bezier(.45, .05, .35, 1) infinite; }
  .pg .roadx__beacon { animation: road-beacon .5s steps(1) infinite; }
  .pg .roadx__boom { animation: roadx-boom 14s ease-out infinite; }
  .pg .roadx__car .roadx__smoke { animation: roadx-smoke 14s ease-out infinite; }
  .pg .roadx__car .roadx__smoke + .roadx__smoke { animation-delay: .25s; }
  .pg .roadx__car .roadx__glint { animation: roadx-glint 14s ease-in-out infinite; }
  .pg .roadx__fill { animation: roadx-fill 14s cubic-bezier(.45, .05, .35, 1) infinite; }
  .pg .roadx__glow { animation: roadx-glow 14s ease-in-out infinite; }
  .pg .roadx__spark { animation: roadx-spark 14s ease-in-out infinite; }
  .pg .roadx__spark i { animation: road-twinkle .6s ease-in-out infinite alternate; }
  .pg .roadx__spark i:nth-child(2) { animation-delay: .2s; }
  .pg .roadx__spark i:nth-child(3) { animation-delay: .4s; }
  .pg .roadx__sign { animation: roadx-hit 14s ease-out infinite; }
  .pg .roadx__stop--1 .roadx__sign { animation-delay: 1.2s; }
  .pg .roadx__stop--2 .roadx__sign { animation-delay: 5.3s; }
  .pg .roadx__stop--3 .roadx__sign { animation-delay: 7s; }
  .pg .roadx__stop--4 .roadx__sign { animation-delay: 12.6s; }
}
@keyframes roadx-car {
  0% { left: 2%; opacity: 0; transform: translateX(-50%); }
  3% { opacity: 1; }
  9% { left: 17%; transform: translateX(-50%); }
  10% { left: 16.4%; transform: translateX(-50%) rotate(-10deg); }
  12%, 25% { left: 16.6%; transform: translateX(-50%) rotate(-5deg); }
  28% { left: 16.6%; transform: translateX(-50%) translateY(-13px); }
  50% { left: 62.5%; opacity: 1; transform: translateX(-50%) translateY(-13px); }
  50.5%, 68% { left: 62.5%; opacity: 0; transform: translateX(-50%); }
  69% { left: 62.5%; opacity: 1; transform: translateX(-50%); }
  90%, 96% { left: 87.5%; opacity: 1; transform: translateX(-50%); }
  100% { left: 87.5%; opacity: 0; transform: translateX(-50%); }
}
/* the truck backs up to the crashed car from the right (OLD first try: it came from the left and drove through the car) */
@keyframes roadx-tow {
  0%, 15% { left: 46%; opacity: 0; }
  17% { left: 44%; opacity: 1; }
  25%, 28% { left: 16.6%; opacity: 1; }
  50% { left: 62.5%; opacity: 1; }
  50.5%, 100% { left: 62.5%; opacity: 0; }
}
@keyframes roadx-look { 0%, 9% { filter: none; } 10%, 68% { filter: grayscale(.8) brightness(.8); } 69% { filter: none; } 76% { filter: brightness(1.3) saturate(1.3) drop-shadow(0 0 6px rgba(255, 215, 106, .9)); } 84%, 100% { filter: none; } }
@keyframes roadx-spin { to { rotate: 360deg; } }
@keyframes roadx-boom { 0%, 8.6% { opacity: 0; transform: translateX(-50%) scale(.2) rotate(0); } 9.6% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(12deg); } 12% { opacity: 1; transform: translateX(-50%) scale(1) rotate(8deg); } 16%, 100% { opacity: 0; transform: translateX(-50%) scale(.9) rotate(8deg); } }
@keyframes roadx-smoke { 0%, 10% { opacity: 0; transform: translateY(0) scale(.6); } 13% { opacity: .9; } 22% { opacity: .6; transform: translateY(-10px) scale(1.3); } 25%, 100% { opacity: 0; transform: translateY(-14px) scale(1.5); } }
@keyframes roadx-glint { 0%, 75% { opacity: 0; transform: scale(.3) rotate(0); } 78% { opacity: 1; transform: scale(1.2) rotate(45deg); } 83%, 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes roadx-fill { 0% { width: 1%; opacity: 1; } 9% { width: 16%; } 28% { width: 15.6%; } 50%, 68% { width: 61.5%; } 90%, 96% { width: 86.5%; opacity: 1; } 100% { width: 86.5%; opacity: 0; } }
@keyframes roadx-glow { 0%, 51% { opacity: 0; } 55%, 64% { opacity: .55; } 68%, 100% { opacity: 0; } }
@keyframes roadx-spark { 0%, 52% { opacity: 0; transform: translateY(6px); } 55%, 66% { opacity: 1; transform: translateY(0); } 69%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes roadx-hit { 0% { scale: 1; } 2.5% { scale: 1.22; box-shadow: 0 0 0 7px rgba(240, 93, 73, .18), 0 12px 24px -10px rgba(21, 17, 15, .5), inset 0 0 0 2px currentColor; } 10%, 100% { scale: 1; } }
/* from 1001px (two columns) the steps card runs under both hero columns (the form always ends above it) */
@media (min-width: 1001px) {
  .pg .in > .hero.hero--tuck.hero--tuck:has(.phs--motor) { grid-template-areas: "copy mock" "strip strip" "note note"; grid-template-rows: auto auto auto; }
  .pg .hero--tuck.hero--tuck:has(.phs--motor) > .strip { width: auto !important; max-width: none; margin-top: 36px; }
}
/* D-335b (owner, 10 Nov: "move this up"): the road card sat ~100px under the form; from 1280px it sits 24px under it (the No
   Claim Bonus card beside the form always ends above the form there). 1001 - 1279px keep the old 36px: the "Lawyer / repair"
   chip hangs ~80px below the form at those widths. OLD: margin-top 36px at every width. */
@media (min-width: 1280px) { .pg .hero--tuck.hero--tuck:has(.phs--motor) > .strip { margin-top: -40px; } }

/* D-335c (owner, 10 Nov: "have an accident with a car into a pole or something, currently it is magically having an
   accident"): a street lamp stands at the near edge of the road just past the first sign (in front of the lane, so the car
   and later the tow truck pass behind it). The car swerves towards it and hits it: the burst is at the point of contact,
   the lamp bends over from its base and its bulb goes out; it straightens again while the car is gone at the end of the
   loop. The car's front reaches the pole at 17 % + 33px. */
.pg .roadx__lamp { z-index: 6; left: calc(17% + 34px); bottom: 8px; transform: translateX(-50%); transform-origin: 50% 100%; }
.pg .roadx__lamp svg { display: block; }
.pg .roadx__boom { left: calc(17% + 34px); bottom: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .pg .roadx__lamp { animation: roadx-lamp 14s ease-out infinite; }
  .pg .roadx__bulb { animation: roadx-bulb 14s steps(1) infinite; }
}
/* the car drifts 3px towards the viewer before the hit (a swerve into the roadside) */
@keyframes roadx-car {
  0% { left: 2%; opacity: 0; transform: translateX(-50%); }
  3% { opacity: 1; }
  6% { left: 11.5%; transform: translateX(-50%); }
  9% { left: 17%; transform: translateX(-50%) translateY(3px) rotate(4deg); }
  10% { left: 16.2%; transform: translateX(-50%) translateY(3px) rotate(-8deg); }
  12%, 25% { left: 16.6%; transform: translateX(-50%) translateY(3px) rotate(-4deg); }
  28% { left: 16.6%; transform: translateX(-50%) translateY(-13px); }
  50% { left: 62.5%; opacity: 1; transform: translateX(-50%) translateY(-13px); }
  50.5%, 68% { left: 62.5%; opacity: 0; transform: translateX(-50%); }
  69% { left: 62.5%; opacity: 1; transform: translateX(-50%); }
  90%, 96% { left: 87.5%; opacity: 1; transform: translateX(-50%); }
  100% { left: 87.5%; opacity: 0; transform: translateX(-50%); }
}
@keyframes roadx-lamp {
  0%, 8.8% { transform: translateX(-50%) rotate(0); }
  9.6% { transform: translateX(-50%) rotate(24deg); }
  10.6% { transform: translateX(-50%) rotate(15deg); }
  11.4%, 96% { transform: translateX(-50%) rotate(18deg); }
  99%, 100% { transform: translateX(-50%) rotate(0); }
}
@keyframes roadx-bulb { 0%, 9% { opacity: 1; } 9.5%, 10% { opacity: 0; } 10.5% { opacity: 1; } 11%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }

/* ===== D-335d (owner, 10 Nov: "it is not smooth, it stops and then starts; make it stop on the points written above them:
   the accident with the pole at Accident or damage, the tow and the car stop at Claim raised with a small inspection
   animation, the rest stays the same"): one 16 s story (OLD 14 s), each part at its own sign. The car and the truck move
   at a steady pace between signs and only slow down where they stop (OLD: an extra key point mid-drive made the car
   slow, nearly stop and start again before the crash).
     0 - 8 %    the car drives in at a steady speed and hits the lamp post at the "Accident or damage" sign
     13 - 21 %  the tow truck backs up from the right; 21 - 24 % the car is lifted onto it
     24 - 32 %  the truck carries it to "Claim raised" and stops
     32 - 46 %  inspection: a magnifier sweeps over the car, a clipboard ticks off three checks
     46 - 56 %  on to the garage; both pass behind its front wall and are gone
     57 - 70 %  repair (door glow, sparkles); 71 - 88 % the car drives out new and parks at "Back on the road"
   The signs pop as the car reaches them (1.28 / 5.12 / 8.96 / 14.08 s). ===== */
.pg .roadx__lamp { left: calc(12.5% + 22px); }
.pg .roadx__boom { left: calc(12.5% + 20px); bottom: 34px; }
.pg .roadx__lens { z-index: 7; left: 37.5%; bottom: 36px; opacity: 0; transform: translateX(-50%); filter: drop-shadow(0 4px 6px rgba(21, 17, 15, .25)); }
.pg .roadx__clip { z-index: 7; left: calc(37.5% + 58px); bottom: 62px; opacity: 0; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(59, 91, 219, .25)); }
.pg .roadx__lens svg, .pg .roadx__clip svg { display: block; }
.pg .roadx__tick { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pg .roadx__car { animation: roadx2-car 16s linear infinite; }
  .pg .roadx__car svg { animation: roadx2-look 16s linear infinite; }
  .pg .roadx__tow { animation: roadx2-tow 16s linear infinite; }
  .pg .roadx__boom { animation: roadx2-boom 16s ease-out infinite; }
  .pg .roadx__car .roadx__smoke { animation: roadx2-smoke 16s ease-out infinite; }
  .pg .roadx__car .roadx__smoke + .roadx__smoke { animation-delay: .25s; }
  .pg .roadx__car .roadx__glint { animation: roadx2-glint 16s ease-in-out infinite; }
  .pg .roadx__fill { animation: roadx2-fill 16s linear infinite; }
  .pg .roadx__glow { animation: roadx2-glow 16s ease-in-out infinite; }
  .pg .roadx__spark { animation: roadx2-spark 16s ease-in-out infinite; }
  .pg .roadx__lamp { animation: roadx2-lamp 16s ease-out infinite; }
  .pg .roadx__bulb { animation: roadx2-bulb 16s steps(1) infinite; }
  .pg .roadx__lens { animation: roadx2-lens 16s ease-in-out infinite; }
  .pg .roadx__clip { animation: roadx2-clip 16s ease-out infinite; }
  .pg .roadx__tick { animation: roadx2-tick 16s ease-out infinite; }
  .pg .roadx__tick--2 { animation-delay: .5s; }
  .pg .roadx__tick--3 { animation-delay: 1s; }
  .pg .roadx__sign { animation: roadx-hit 16s ease-out infinite; }
  .pg .roadx__stop--1 .roadx__sign { animation-delay: 1.28s; }
  .pg .roadx__stop--2 .roadx__sign { animation-delay: 5.12s; }
  .pg .roadx__stop--3 .roadx__sign { animation-delay: 8.96s; }
  .pg .roadx__stop--4 .roadx__sign { animation-delay: 14.08s; }
}
@keyframes roadx2-car {
  0% { left: 1%; opacity: 0; transform: translateX(-50%); animation-timing-function: linear; }
  2% { opacity: 1; }
  8% { left: calc(12.5% - 13px); transform: translateX(-50%) translateY(2px) rotate(3deg); animation-timing-function: ease-out; }
  9% { left: calc(12.5% - 20px); transform: translateX(-50%) translateY(2px) rotate(-8deg); animation-timing-function: ease-in-out; }
  11%, 21% { left: calc(12.5% - 13px); transform: translateX(-50%) translateY(2px) rotate(-4deg); animation-timing-function: ease-in-out; }
  24% { left: calc(12.5% - 13px); transform: translateX(-50%) translateY(-13px); animation-timing-function: ease-in-out; }
  32%, 46% { left: 37.5%; transform: translateX(-50%) translateY(-13px); animation-timing-function: ease-in-out; }
  56% { left: 62.5%; opacity: 1; transform: translateX(-50%) translateY(-13px); }
  56.5%, 70% { left: 62.5%; opacity: 0; transform: translateX(-50%); }
  71% { left: 62.5%; opacity: 1; transform: translateX(-50%); animation-timing-function: ease-in-out; }
  88%, 96% { left: 87.5%; opacity: 1; transform: translateX(-50%); }
  100% { left: 87.5%; opacity: 0; transform: translateX(-50%); }
}
@keyframes roadx2-tow {
  0%, 13% { left: 30%; opacity: 0; animation-timing-function: ease-out; }
  15% { left: 28%; opacity: 1; animation-timing-function: ease-in-out; }
  21%, 24% { left: calc(12.5% - 13px); opacity: 1; animation-timing-function: ease-in-out; }
  32%, 46% { left: 37.5%; opacity: 1; animation-timing-function: ease-in-out; }
  56% { left: 62.5%; opacity: 1; }
  56.5%, 100% { left: 62.5%; opacity: 0; }
}
@keyframes roadx2-fill {
  0% { width: 0; opacity: 1; animation-timing-function: linear; }
  8%, 24% { width: calc(11.5% - 13px); animation-timing-function: ease-in-out; }
  32%, 46% { width: 36.5%; animation-timing-function: ease-in-out; }
  56%, 71% { width: 61.5%; animation-timing-function: ease-in-out; }
  88%, 96% { width: 86.5%; opacity: 1; }
  100% { width: 86.5%; opacity: 0; }
}
@keyframes roadx2-look { 0%, 8% { filter: none; } 8.5%, 70% { filter: grayscale(.8) brightness(.8); } 71% { filter: none; } 77% { filter: brightness(1.3) saturate(1.3) drop-shadow(0 0 6px rgba(255, 215, 106, .9)); } 85%, 100% { filter: none; } }
@keyframes roadx2-boom { 0%, 7.6% { opacity: 0; transform: translateX(-50%) scale(.2) rotate(0); } 8.4% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(12deg); } 10.5% { opacity: 1; transform: translateX(-50%) scale(1) rotate(8deg); } 14%, 100% { opacity: 0; transform: translateX(-50%) scale(.9) rotate(8deg); } }
@keyframes roadx2-smoke { 0%, 9% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: .9; } 19% { opacity: .6; transform: translateY(-10px) scale(1.3); } 22%, 100% { opacity: 0; transform: translateY(-14px) scale(1.5); } }
@keyframes roadx2-glint { 0%, 76% { opacity: 0; transform: scale(.3) rotate(0); } 79% { opacity: 1; transform: scale(1.2) rotate(45deg); } 84%, 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes roadx2-glow { 0%, 57% { opacity: 0; } 60%, 67% { opacity: .55; } 70%, 100% { opacity: 0; } }
@keyframes roadx2-spark { 0%, 58% { opacity: 0; transform: translateY(6px); } 61%, 68% { opacity: 1; transform: translateY(0); } 70%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes roadx2-lamp { 0%, 7.8% { transform: translateX(-50%) rotate(0); } 8.6% { transform: translateX(-50%) rotate(24deg); } 9.6% { transform: translateX(-50%) rotate(15deg); } 10.4%, 96% { transform: translateX(-50%) rotate(18deg); } 99%, 100% { transform: translateX(-50%) rotate(0); } }
@keyframes roadx2-bulb { 0%, 8% { opacity: 1; } 8.5%, 9% { opacity: 0; } 9.5% { opacity: 1; } 10%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
/* the magnifier sweeps over the car twice; the clipboard pops in and ticks its three lines (0.5 s apart) */
@keyframes roadx2-lens {
  0%, 32.5% { opacity: 0; left: calc(37.5% - 30px); }
  34% { opacity: 1; left: calc(37.5% - 30px); }
  37.5% { left: calc(37.5% + 26px); }
  41% { left: calc(37.5% - 26px); }
  44% { opacity: 1; left: calc(37.5% + 6px); }
  45.5%, 100% { opacity: 0; left: calc(37.5% + 6px); }
}
@keyframes roadx2-clip { 0%, 33% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.8); } 35%, 45% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 47%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.9); } }
@keyframes roadx2-tick { 0%, 36% { opacity: 0; } 37.5%, 45% { opacity: 1; } 47%, 100% { opacity: 0; } }

/* ===== D-340 (owner, 10 Nov: "this is a good design; we will keep the mobile, but below it try something else and use the space
   properly"): cyber hero.
   1. The phone's alert: the site-wide .alert message style (D-319, ui-kit.css) had turned the notification into a row with
      wide padding, so "Unusual login alert" and "New device · just now" were squeezed into two narrow columns. It is a
      stacked notification again (title over text).
   2. Under the phone: the steps card sat 44px under the bullets plus the grid gap, leaving a ~120px empty band under the
      phone and its chip; it now starts right under the bullets.
   3. The four steps are a threat-to-safe meter: a bar runs from red (Fraud or scam) through amber to green (Loss reduced),
      each step's icon sits on it, and a scan light sweeps along it every 3.6 s (echoing the phone's scan ring), each icon
      pulsing as it passes. The words are centred under their icons. OLD: icons left, dashed connectors. ===== */
.phs--cyber .scr .alert { display: block !important; padding: 10px 12px !important; border-radius: 14px !important; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .6) !important; background: rgba(255, 255, 255, .96) !important; color: #77706b !important; font-size: 10.5px !important; line-height: 14px !important; }
.phs--cyber .scr .alert b { display: block; margin-bottom: 2px; font-size: 12px; line-height: 15px; color: #15110f; }
.phs--cyber .scr .alert::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #e03131; box-shadow: 0 0 0 3px rgba(224, 49, 49, .18); vertical-align: 1px; float: left; margin-top: 4px; }
@media (min-width: 1001px) {
  .pg .hero--tuck.hero--tuck:has(.phs--cyber) > .strip { margin-top: -12px; }
  .pg .hero--tuck:has(.phs--cyber) .strip__steps { --pad: 26px; position: relative; padding: 26px var(--pad) 24px !important; column-gap: 12px; }
  .pg .hero--tuck:has(.phs--cyber) .strip__step { justify-items: center; text-align: center; }
  .pg .hero--tuck:has(.phs--cyber) .strip__step::after { display: none !important; }
  .pg .hero--tuck:has(.phs--cyber) .strip__step i { position: relative; z-index: 2; width: 46px; height: 46px; margin-bottom: 10px; box-shadow: 0 0 0 5px #fff, 0 12px 22px -12px rgba(21, 17, 15, .45) !important; }
  /* the meter: from the first icon's centre to the last's (columns are equal, so the centres are at 1/8, 3/8, 5/8, 7/8) */
  .pg .hero--tuck:has(.phs--cyber) .strip__steps::before { content: ""; position: absolute; z-index: 1; top: calc(26px + 23px - 4px); height: 8px; border-radius: 8px;
    left: calc(var(--pad) + (100% - 2 * var(--pad)) * .125); right: calc(var(--pad) + (100% - 2 * var(--pad)) * .125);
    background: linear-gradient(90deg, #e03131 0%, #f08c00 32%, #f2b800 50%, #40c057 75%, #0a8a52 100%); box-shadow: 0 6px 14px -6px rgba(21, 17, 15, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
  /* the scan light */
  .pg .hero--tuck:has(.phs--cyber) .strip__steps::after { content: ""; position: absolute; z-index: 1; top: calc(26px + 23px - 11px); width: 54px; height: 22px; margin-left: -27px; border-radius: 50%; pointer-events: none;
    left: calc(var(--pad) + (100% - 2 * var(--pad)) * .125); opacity: 0;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, 0)); }
}
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .pg .hero--tuck:has(.phs--cyber) .strip__steps::after { animation: cy-meter-scan 3.6s cubic-bezier(.45, .05, .35, 1) infinite; }
  .pg .hero--tuck:has(.phs--cyber) .strip__step i { animation: cy-meter-hit 3.6s ease-out infinite; }
  .pg .hero--tuck:has(.phs--cyber) .strip__step:nth-child(2) i { animation-delay: .96s; }
  .pg .hero--tuck:has(.phs--cyber) .strip__step:nth-child(3) i { animation-delay: 1.92s; }
  .pg .hero--tuck:has(.phs--cyber) .strip__step:nth-child(4) i { animation-delay: 2.88s; }
}
@keyframes cy-meter-scan {
  0% { left: calc(var(--pad) + (100% - 2 * var(--pad)) * .125); opacity: 0; }
  6% { opacity: 1; }
  80% { left: calc(var(--pad) + (100% - 2 * var(--pad)) * .875); opacity: 1; }
  92%, 100% { left: calc(var(--pad) + (100% - 2 * var(--pad)) * .875); opacity: 0; }
}
@keyframes cy-meter-hit { 0% { scale: 1; } 6% { scale: 1.16; } 20%, 100% { scale: 1; } }

/* ===== D-342 (owner, 10 Nov: "try another design of the hospital hero section, need to utilise the space properly"): Hospital
   Indemnity hero in three columns from 1280px - the copy | a middle column | the form. The middle column holds the hospital
   drawing (with its staff badges) at the top and, under it, the four steps as a vertical timeline card that ends level with
   the form's foot; the broker note sits right under the copy. So the wide empty band under the copy and the 150px gap
   between copy and form are gone, and the hero ends with the form. The "Lawyer assigned" chip is dropped here (the timeline
   says "Lawyer in 2 hours"). The drawing is positioned from the mock column (its scene layer starts 280px left of it):
   centred in the middle column with left: 134px - mid / 2. OLD (D-277 / D-332): copy | form, the drawing in the gap, the
   steps strip under the copy. ===== */
@media (min-width: 1280px) {
  html body .pg .in > .hero.hero--tuck.hero--tuck:has(.phs--hospital-pi) { --mid: 260px;
    grid-template-columns: minmax(0, 1.1fr) var(--mid) minmax(0, 1fr); column-gap: 40px; row-gap: 0;
    grid-template-areas: "copy mid mock" "note mid mock"; grid-template-rows: auto 1fr; padding-bottom: 24px; }
  /* the copy kept 150px of right padding for the old drawing in the gap; the drawing has its own column now */
  html body .pg .hero--tuck.hero--tuck:has(.phs--hospital-pi) > .hero__copy { grid-area: copy; padding-right: 0 !important; }
  html body .pg .hero--tuck.hero--tuck:has(.phs--hospital-pi) > .mock { grid-area: mock; }
  html body .pg .hero--tuck.hero--tuck:has(.phs--hospital-pi) > .hero__note--in { grid-area: note; align-self: start; margin: 22px 0 0 !important; }
  /* the drawing at the top of the middle column */
  .phs--hospital-pi > .bld { left: calc(134px - var(--mid) / 2) !important; top: 30px !important; translate: none !important; margin-top: 0 !important; }
  .phs--hospital-pi > .staff { left: calc(134px - var(--mid) / 2 + 57px) !important; top: 215px !important; translate: none !important; margin-top: 0 !important; }
  .phs--hospital-pi > .phs-chip { display: none !important; }
  /* the steps: a vertical timeline card under the drawing, its foot level with the form's */
  html body .pg .hero--tuck.hero--tuck:has(.phs--hospital-pi) > .strip { grid-area: mid; align-self: stretch; width: auto !important; max-width: none; margin: 268px 0 24px !important; padding: 0;
    position: relative; z-index: 2; display: flex; flex-direction: column; }
  html body .pg .hero--tuck:has(.phs--hospital-pi) .strip__steps { flex: 1 1 auto; display: flex !important; flex-direction: column; gap: 0 !important; padding: 10px 20px !important; position: relative; }
  html body .pg .hero--tuck:has(.phs--hospital-pi) .strip__step { flex: 1 1 0; display: grid !important; grid-template-columns: 42px minmax(0, 1fr); align-content: center; column-gap: 14px; row-gap: 2px;
    padding: 8px 0 !important; text-align: left; position: relative; }
  html body .pg .hero--tuck:has(.phs--hospital-pi) .strip__step i { grid-row: span 2; width: 42px !important; height: 42px !important; margin: 0 !important; position: relative; z-index: 1;
    box-shadow: 0 0 0 4px #fff, 0 10px 18px -10px rgba(21, 17, 15, .4) !important; }
  html body .pg .hero--tuck:has(.phs--hospital-pi) .strip__step b { align-self: end; font-size: 15px; line-height: 1.25; }
  html body .pg .hero--tuck:has(.phs--hospital-pi) .strip__step span { align-self: start; font-size: 13px; line-height: 1.4; }
  /* the dashed line from icon to icon */
  html body .pg .hero--tuck:has(.phs--hospital-pi) .strip__step::after { display: block !important; content: ""; position: absolute; left: 20px; right: auto; top: calc(50% + 21px); bottom: calc(-50% + 21px); height: auto; width: 0;
    border: 0; border-left: 2px dashed rgba(240, 93, 73, .35); }
  html body .pg .hero--tuck:has(.phs--hospital-pi) .strip__step:last-child::after { display: none !important; }
}
@media (min-width: 1440px) { html body .pg .in > .hero.hero--tuck.hero--tuck:has(.phs--hospital-pi) { --mid: 280px; } }

/* D-346 (owner, 10 Nov: "move the safe down a bit"): the Money hero's safe and its two banknotes sat high (the top note
   touched the header's line); the group is 36px lower from 1280px. The "Cash in transit" chip stays under it (12px lower at
   1280 - 1439, where it sat closest). OLD: translate 20px 0. */
@media (min-width: 1280px) { .phs--money .safe, .phs--money .note { translate: 20px 36px; } }
@media (min-width: 1280px) and (max-width: 1439.98px) { .phs--money > .phs-chip { top: 330px; } }