/* product-pictures.css
 *
 * The animated product pictures in the Feature strips (zig-zag sections):
 * Claims Management's five and Policy Administration's six. One family,
 * one file: every container carries data-platform-demo="product-pictures-<page>-<name>",
 * which resolves here by the family rule in functions.php, and every picture
 * is built from the same parts (.gcd blob, dots, cards, header bar, rows,
 * pills, log), so a change to the look lands on both pages at once.
 *
 * These are PICTURES OF THE PRODUCT, not the website: every colour is scoped
 * here on the container, nothing references a website token except the body
 * font, and nothing here belongs in style.css.
 *
 * All animation is CSS. The data in them is invented sample data, so each
 * container is aria-hidden and the page carries a one-line description beside
 * it (gn-sr-only). Everything scales with the container (cqw units), so the
 * picture is the same at every width. Under prefers-reduced-motion each picture
 * shows its finished state and nothing moves.
 */

.gcd { --d-ink: #2F3351; --d-steel: #547EC1; --d-pale: #9FB6D4; --d-primary: #004EAA; --d-accent: #00B2B1; --d-cta: #E10054; --d-amber: #F1B53D; --d-purple: #B24EBE; --d-green: #1E9E6A; --d-line: #E6ECF4; --d-soft: #F5F8FC;
	container-type: inline-size; position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 10 / 9; font-family: var(--wp--preset--font-family--body); color: var(--d-ink); }
.gcd * { box-sizing: border-box; margin: 0; padding: 0; }
.gcd-blob { position: absolute; width: 64cqw; height: 58cqw; right: 0; top: 14cqw; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: var(--d-hue, var(--d-primary)); opacity: 0.9; }
.gcd-dot { position: absolute; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; }
.gcd-card { position: absolute; background: #fff; border-radius: 2.6cqw; box-shadow: 0 1.6cqw 5cqw rgba(47, 51, 81, 0.16); overflow: hidden; }
.gcd-hd { background: var(--d-ink); color: #fff; font-weight: 700; font-size: 2.7cqw; padding: 2.2cqw 3cqw; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.gcd-hd small { font-weight: 600; font-size: 2.2cqw; opacity: 0.75; }
.gcd-sub { background: var(--d-steel); color: rgba(255, 255, 255, 0.92); font-size: 2.2cqw; font-weight: 600; padding: 1.3cqw 3cqw; }
.gcd-row { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 1.7cqw 3cqw; border-bottom: 0.2cqw solid var(--d-line); font-size: 2.4cqw; }
.gcd-row b { font-weight: 700; }
.gcd-pill { display: inline-flex; align-items: center; gap: 1cqw; padding: 0.7cqw 1.8cqw; border-radius: 99px; font-size: 2.1cqw; font-weight: 700; white-space: nowrap; }

/* ==== Claims Management ==== */

/* ---- 1. Control: a payment over the handler's limit is referred, approved and logged ---- */
.gcd--control { --d-hue: var(--d-cta); }
.gcd--control .gcd-claim { left: 2cqw; top: 4cqw; width: 70cqw; z-index: 2; }
.gcd--control .gcd-status { position: relative; height: 4.4cqw; }
.gcd--control .gcd-status .gcd-pill { position: absolute; right: 0; top: 0; }
.gcd-ref { background: #FFF4DC; color: #9A6500; }
.gcd-ok { background: #E3F6EE; color: var(--d-green); opacity: 0; }
.gcd-pass { color: var(--d-green); font-weight: 700; }
.gcd--control .gcd-audit { right: 2cqw; bottom: 3cqw; width: 60cqw; z-index: 3; }
.gcd-log { list-style: none; padding: 1.6cqw 3cqw 2.2cqw; display: grid; gap: 1.3cqw; }
.gcd-log li { display: grid; grid-template-columns: 9cqw 1fr; gap: 1.6cqw; font-size: 2.2cqw; line-height: 1.35; opacity: 0; transform: translateY(1.2cqw); }
.gcd-log time { color: var(--d-steel); font-weight: 700; }
.gcd--control .gcd-dot--a { left: 4cqw; bottom: 10cqw; background: var(--d-amber); }
.gcd--control .gcd-dot--b { right: 6cqw; top: 6cqw; background: var(--d-primary); }

@media (prefers-reduced-motion: no-preference) {
	.gcd--control .gcd-ref { animation: gcd-ref 12s infinite; }
	.gcd--control .gcd-ok { animation: gcd-ok 12s infinite; }
	.gcd--control .gcd-log li { animation: gcd-log 12s infinite; }
	.gcd--control .gcd-log li:nth-child(2) { animation-name: gcd-log2; }
	.gcd--control .gcd-log li:nth-child(3) { animation-name: gcd-log3; }
	.gcd--control .gcd-log li:nth-child(4) { animation-name: gcd-log4; }
}
@media (prefers-reduced-motion: reduce) {
	.gcd--control .gcd-ref { opacity: 0; }
	.gcd--control .gcd-ok, .gcd--control .gcd-log li { opacity: 1; transform: none; }
}
@keyframes gcd-ref { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes gcd-ok { 0%, 47% { opacity: 0; transform: scale(0.9); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes gcd-log { 0%, 6% { opacity: 0; transform: translateY(1.2cqw); } 10%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes gcd-log2 { 0%, 22% { opacity: 0; transform: translateY(1.2cqw); } 26%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes gcd-log3 { 0%, 48% { opacity: 0; transform: translateY(1.2cqw); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes gcd-log4 { 0%, 62% { opacity: 0; transform: translateY(1.2cqw); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---- 2. Customer view: one record, its tabs taking turns ---- */
.gcd--customer { --d-hue: var(--d-purple); }
.gcd--customer .gcd-rec { left: 4cqw; top: 15cqw; width: 84cqw; height: 56cqw; z-index: 2; }
.gcd--customer .gcd-panes { height: 34cqw; }
.gcd-who { display: flex; align-items: center; gap: 2.4cqw; }
.gcd-avatar { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: var(--d-accent); color: var(--d-ink); display: grid; place-items: center; font-size: 2.4cqw; font-weight: 700; }
.gcd-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 0.2cqw solid var(--d-line); }
.gcd-tabs span { padding: 2cqw 0; text-align: center; font-size: 2.3cqw; font-weight: 700; color: var(--d-steel); }
.gcd-tabs::after { content: ""; position: absolute; left: 0; bottom: -0.2cqw; width: 25%; height: 0.6cqw; background: var(--d-primary); }
.gcd-panes { position: relative; height: 50cqw; }
.gcd-pane { position: absolute; inset: 0; padding: 1.2cqw 0; opacity: 0; }
.gcd-pane:first-child { opacity: 1; }
.gcd-ok2 { background: #E3F6EE; color: var(--d-green); }
.gcd-info { background: #E6EEF9; color: var(--d-primary); }
.gcd-steps { display: grid; grid-template-columns: repeat(4, 1fr); padding: 3cqw 3cqw 1cqw; position: relative; }
.gcd-steps::before { content: ""; position: absolute; left: 15%; right: 15%; top: 5.2cqw; height: 0.5cqw; background: var(--d-line); }
.gcd-steps span { position: relative; display: grid; justify-items: center; gap: 1.2cqw; font-size: 2cqw; font-weight: 700; color: var(--d-steel); }
.gcd-steps span::before { content: ""; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 0.5cqw var(--d-pale); }
.gcd-steps .is-done::before { background: var(--d-accent); box-shadow: none; }
.gcd-steps .is-now::before { background: var(--d-primary); box-shadow: 0 0 0 1cqw rgba(0, 78, 170, 0.18); }
.gcd-steps .is-now { color: var(--d-primary); }
.gcd--customer .gcd-dot--a { right: 4cqw; top: 4cqw; background: var(--d-amber); }
.gcd--customer .gcd-dot--b { left: 2cqw; bottom: 8cqw; background: var(--d-purple); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--customer .gcd-tabs::after { animation: gcd-tab 16s infinite; }
	.gcd--customer .gcd-pane { animation: gcd-pane 16s infinite; }
	.gcd--customer .gcd-pane:nth-child(2) { animation-delay: 4s; }
	.gcd--customer .gcd-pane:nth-child(3) { animation-delay: 8s; }
	.gcd--customer .gcd-pane:nth-child(4) { animation-delay: 12s; }
	.gcd--customer .gcd-pane:first-child { opacity: 0; }
}
@keyframes gcd-tab { 0%, 22% { transform: translateX(0); } 25%, 47% { transform: translateX(100%); } 50%, 72% { transform: translateX(200%); } 75%, 97% { transform: translateX(300%); } 100% { transform: translateX(0); } }
@keyframes gcd-pane { 0% { opacity: 0; transform: translateY(1cqw); } 2%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }

/* ---- 3. Reporting: counts tick up, the status ring fills, workload bars grow ---- */
@property --gcd-n1 { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --gcd-n2 { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --gcd-n3 { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --gcd-ring { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.gcd--reporting { --d-hue: var(--d-accent); }
.gcd--reporting .gcd-dash { left: 2cqw; top: 5cqw; width: 88cqw; z-index: 2; }
.gcd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 2.4cqw 3cqw 0; }
.gcd-tile { background: var(--d-soft); border-radius: 1.6cqw; padding: 2cqw; text-align: center; }
.gcd-tile p { font-size: 1.9cqw; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-steel); }
.gcd-num { display: block; margin-top: 0.8cqw; font-size: 5.4cqw; font-weight: 700; line-height: 1; color: var(--d-ink); }
.gcd-num::after { content: counter(gcd-c); }
.gcd-num--1 { --gcd-n1: 486; counter-reset: gcd-c var(--gcd-n1); }
.gcd-num--2 { --gcd-n2: 312; counter-reset: gcd-c var(--gcd-n2); }
.gcd-num--3 { --gcd-n3: 798; counter-reset: gcd-c var(--gcd-n3); }
.gcd-charts { display: grid; grid-template-columns: 40% 1fr; gap: 3cqw; padding: 2.6cqw 3cqw 3cqw; }
.gcd-charts .gcd-label { font-size: 2.1cqw; font-weight: 700; margin-bottom: 1.8cqw; }
.gcd-ring { --gcd-ring: 100%; width: 24cqw; aspect-ratio: 1; border-radius: 50%; margin: 0 auto;
	background: conic-gradient(var(--d-primary) 0 calc(var(--gcd-ring) * 0.38), var(--d-accent) 0 calc(var(--gcd-ring) * 0.64), var(--d-amber) 0 calc(var(--gcd-ring) * 0.82), var(--d-cta) 0 var(--gcd-ring), var(--d-line) 0);
	-webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); }
.gcd-key { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8cqw 1.4cqw; margin-top: 2cqw; font-size: 1.8cqw; }
.gcd-key i { display: inline-block; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; margin-right: 0.8cqw; vertical-align: -0.2cqw; }
.gcd-bars { display: grid; gap: 1.6cqw; }
.gcd-bar { display: grid; grid-template-columns: 12cqw 1fr; align-items: center; gap: 1.6cqw; font-size: 2cqw; font-weight: 600; }
.gcd-bar span { display: block; height: 2.6cqw; border-radius: 99px; background: var(--d-line); overflow: hidden; }
.gcd-bar span::after { content: ""; display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--d-c, var(--d-primary)); transform-origin: left; }
.gcd-sla { margin-top: 2.4cqw; }

.gcd--reporting .gcd-dot--a { right: 3cqw; top: 2cqw; background: var(--d-accent); }
.gcd--reporting .gcd-dot--b { left: 6cqw; bottom: 4cqw; background: var(--d-amber); }
/* Played once when the picture is revealed (the site's reveal script adds
   .gn-in to the container). Before that, under the script, it waits at zero;
   without the script or under reduced motion it shows its finished state. */
@media (prefers-reduced-motion: no-preference) {
	html.gn-js .gcd--reporting:not(.gn-in) .gcd-num--1 { --gcd-n1: 0; }
	html.gn-js .gcd--reporting:not(.gn-in) .gcd-num--2 { --gcd-n2: 0; }
	html.gn-js .gcd--reporting:not(.gn-in) .gcd-num--3 { --gcd-n3: 0; }
	html.gn-js .gcd--reporting:not(.gn-in) .gcd-ring { --gcd-ring: 0%; }
	html.gn-js .gcd--reporting:not(.gn-in) .gcd-bar span::after { transform: scaleX(0); }
	.gcd--reporting.gn-in .gcd-num--1 { animation: gcd-count1 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	.gcd--reporting.gn-in .gcd-num--2 { animation: gcd-count2 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	.gcd--reporting.gn-in .gcd-num--3 { animation: gcd-count3 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	.gcd--reporting.gn-in .gcd-ring { animation: gcd-ring 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both; }
	.gcd--reporting.gn-in .gcd-bar span::after { animation: gcd-grow 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both; }
}
@keyframes gcd-count1 { from { --gcd-n1: 0; } to { --gcd-n1: 486; } }
@keyframes gcd-count2 { from { --gcd-n2: 0; } to { --gcd-n2: 312; } }
@keyframes gcd-count3 { from { --gcd-n3: 0; } to { --gcd-n3: 798; } }
@keyframes gcd-ring { from { --gcd-ring: 0%; } to { --gcd-ring: 100%; } }
@keyframes gcd-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Key colours and bar widths, set here so the markup carries no inline styles. */
.gcd-key span:nth-child(1) i { background: var(--d-primary); }
.gcd-key span:nth-child(2) i { background: var(--d-accent); }
.gcd-key span:nth-child(3) i { background: var(--d-amber); }
.gcd-key span:nth-child(4) i { background: var(--d-cta); }
.gcd-bars .gcd-bar:nth-child(1) span { --w: 82%; }
.gcd-bars .gcd-bar:nth-child(2) span { --w: 64%; --d-c: var(--d-accent); }
.gcd-bars .gcd-bar:nth-child(3) span { --w: 47%; --d-c: var(--d-purple); }
.gcd-bars .gcd-bar:nth-child(4) span { --w: 30%; --d-c: var(--d-amber); }
.gcd-sla + .gcd-bar span { --w: 91%; --d-c: var(--d-green); }

/* ---- 4. Settlement: an agreed claim is checked, sent and paid ---- */
.gcd--settlement { --d-hue: var(--d-accent); }
.gcd--settlement .gcd-pay { left: 3cqw; top: 4cqw; width: 72cqw; z-index: 2; }
.gcd-amount { padding: 2.6cqw 3cqw 1.6cqw; }
.gcd-amount p { font-size: 2.1cqw; font-weight: 700; color: var(--d-steel); text-transform: uppercase; letter-spacing: 0.04em; }
.gcd-amount strong { display: block; font-size: 6.4cqw; line-height: 1.1; }
.gcd-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; padding: 1.8cqw 3cqw 2.6cqw; }
.gcd-track span { position: relative; padding-top: 2.8cqw; font-size: 1.95cqw; font-weight: 700; color: var(--d-steel); }
.gcd-track span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.1cqw; border-radius: 99px; background: var(--d-line); }
.gcd-track span::after { content: ""; position: absolute; left: 0; top: 0; height: 1.1cqw; width: 100%; border-radius: 99px; background: var(--d-green); transform: scaleX(1); transform-origin: left; }
.gcd--settlement .gcd-hist { right: 2cqw; bottom: 3cqw; width: 58cqw; z-index: 3; }
.gcd-paid { background: #E3F6EE; color: var(--d-green); }
.gcd--settlement .gcd-dot--a { left: 4cqw; bottom: 9cqw; background: var(--d-accent); }
.gcd--settlement .gcd-dot--b { right: 5cqw; top: 5cqw; background: var(--d-amber); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--settlement .gcd-track span::after { animation: gcd-step1 10s infinite; }
	.gcd--settlement .gcd-track span:nth-child(2)::after { animation-name: gcd-step2; }
	.gcd--settlement .gcd-track span:nth-child(3)::after { animation-name: gcd-step3; }
	.gcd--settlement .gcd-paid { animation: gcd-paid 10s infinite; }
}
@keyframes gcd-step1 { 0%, 8% { transform: scaleX(0); } 22%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gcd-step2 { 0%, 24% { transform: scaleX(0); } 40%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gcd-step3 { 0%, 42% { transform: scaleX(0); } 58%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gcd-paid { 0%, 58% { opacity: 0; transform: scale(0.85); } 62%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---- 5. Recovery: the recovered amount fills and the net cost of the claim falls ---- */
@property --gcd-rec { syntax: "<percentage>"; inherits: false; initial-value: 71%; }
.gcd--recovery { --d-hue: var(--d-amber); }
.gcd--recovery .gcd-fin { left: 2cqw; top: 4cqw; width: 74cqw; z-index: 2; }
.gcd-meter { padding: 2.4cqw 3cqw 1cqw; }
.gcd-meter p { display: flex; justify-content: space-between; font-size: 2.2cqw; font-weight: 600; margin-bottom: 1.2cqw; }
.gcd-meter span { display: block; height: 3cqw; border-radius: 99px; background: var(--d-line); overflow: hidden; }
.gcd-meter span::after { content: ""; display: block; height: 100%; width: var(--gcd-rec); border-radius: inherit; background: var(--d-accent); }
.gcd-net { display: flex; justify-content: space-between; align-items: baseline; padding: 1.4cqw 3cqw 2.6cqw; font-size: 2.4cqw; font-weight: 700; }
.gcd-net b { display: inline-grid; font-size: 5cqw; }
.gcd-net b > span { grid-area: 1 / 1; text-align: right; }
.gcd-net-was { opacity: 0; }
.gcd--recovery .gcd-steps2 { right: 2cqw; bottom: 3cqw; width: 58cqw; z-index: 3; }
.gcd--recovery .gcd-dot--a { right: 6cqw; top: 5cqw; background: var(--d-cta); }
.gcd--recovery .gcd-dot--b { left: 5cqw; bottom: 10cqw; background: var(--d-primary); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--recovery .gcd-meter span::after { animation: gcd-rec 11s infinite; }
	.gcd--recovery .gcd-net-was { animation: gcd-net-was 11s infinite; }
	.gcd--recovery .gcd-net-now { animation: gcd-net-now 11s infinite; }
	.gcd--recovery .gcd-log li { animation: gcd-log 11s infinite; }
	.gcd--recovery .gcd-log li:nth-child(2) { animation-name: gcd-log2; }
	.gcd--recovery .gcd-log li:nth-child(3) { animation-name: gcd-log3; }
}
@media (prefers-reduced-motion: reduce) {
	.gcd--recovery .gcd-log li { opacity: 1; transform: none; }
}
@keyframes gcd-rec { 0%, 40% { --gcd-rec: 0%; } 70%, 94% { --gcd-rec: 71%; } 100% { --gcd-rec: 0%; } }
@keyframes gcd-net-was { 0%, 52% { opacity: 1; } 58%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gcd-net-now { 0%, 52% { opacity: 0; } 58%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* ==== Policy Administration ==== */

/* Parts the Policy Administration pictures add to the family. A swap stacks
   two or more values in one place so one can replace another; the stages are
   a policy's journey with a line that fills as it moves on. */
.gcd-swap { display: inline-grid; justify-items: end; }
.gcd-swap > * { grid-area: 1 / 1; }
.gcd-swap > .gcd-was { opacity: 0; }
.gcd-row span small { display: block; margin-top: 0.4cqw; font-size: 1.9cqw; font-weight: 600; color: var(--d-steel); }
.gcd { --d-tint: color-mix(in srgb, var(--d-hue, var(--d-primary)) 12%, #fff); }
.gcd-stages { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 2.6cqw 3cqw 2.8cqw; }
.gcd-stages::before, .gcd-stages::after { content: ""; position: absolute; left: 15%; right: 15%; top: 4.65cqw; height: 0.5cqw; border-radius: 99px; background: var(--d-line); }
.gcd-stages::after { background: var(--d-hue, var(--d-primary)); transform-origin: left; }
.gcd-stages span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.2cqw; font-size: 2cqw; font-weight: 700; color: var(--d-steel); }
.gcd-stages span::before { content: ""; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--d-hue, var(--d-primary)); box-shadow: inset 0 0 0 0.5cqw transparent; }

/* ---- 6. Lifecycle: one policy is bound, adjusted mid-term and invited to renew ---- */
.gcd--lifecycle { --d-hue: var(--d-accent); }
.gcd--lifecycle .gcd-pol { left: 2cqw; top: 4cqw; width: 74cqw; z-index: 2; }
.gcd--lifecycle .gcd-trail { right: 2cqw; bottom: 3cqw; width: 58cqw; z-index: 3; }
.gcd--lifecycle .gcd-st1, .gcd--lifecycle .gcd-st2 { opacity: 0; }
.gcd--lifecycle .gcd-dot--a { right: 6cqw; top: 5cqw; background: var(--d-amber); }
.gcd--lifecycle .gcd-dot--b { left: 4cqw; bottom: 10cqw; background: var(--d-primary); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--lifecycle .gcd-st1 { animation: gcd-st1 12s infinite; }
	.gcd--lifecycle .gcd-st2 { animation: gcd-st2 12s infinite; }
	.gcd--lifecycle .gcd-st3 { animation: gcd-st3 12s infinite; }
	.gcd--lifecycle .gcd-was { animation: gcd-net-was 12s infinite; }
	.gcd--lifecycle .gcd-now { animation: gcd-net-now 12s infinite; }
	.gcd--lifecycle .gcd-stages::after { animation: gcd-fill3 12s infinite; }
	.gcd--lifecycle .gcd-stages span:nth-child(2)::before { animation: gcd-stage2 12s infinite; }
	.gcd--lifecycle .gcd-stages span:nth-child(3)::before { animation: gcd-stage3 12s infinite; }
	.gcd--lifecycle .gcd-stages span:nth-child(4)::before { animation: gcd-stage4 12s infinite; }
	.gcd--lifecycle .gcd-log li { animation: gcd-log 12s infinite; }
	.gcd--lifecycle .gcd-log li:nth-child(2) { animation-name: gcd-log2; }
	.gcd--lifecycle .gcd-log li:nth-child(3) { animation-name: gcd-log3; }
	.gcd--lifecycle .gcd-log li:nth-child(4) { animation-name: gcd-log4; }
}
@media (prefers-reduced-motion: reduce) {
	.gcd--lifecycle .gcd-log li { opacity: 1; transform: none; }
}
/* Timed to the log: bound at 26%, adjusted at 52%, renewal at 66%. */
@keyframes gcd-st1 { 0%, 22% { opacity: 1; } 25%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gcd-st2 { 0%, 23% { opacity: 0; } 26%, 61% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes gcd-st3 { 0%, 62% { opacity: 0; transform: scale(0.9); } 66%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes gcd-fill3 { 0%, 22% { transform: scaleX(0); } 26%, 48% { transform: scaleX(0.3334); } 52%, 62% { transform: scaleX(0.6667); } 66%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gcd-stage2 { 0%, 23% { background: #fff; box-shadow: inset 0 0 0 0.5cqw var(--d-pale); } 26%, 94% { background: var(--d-hue); box-shadow: inset 0 0 0 0.5cqw transparent; } 100% { background: #fff; box-shadow: inset 0 0 0 0.5cqw var(--d-pale); } }
@keyframes gcd-stage3 { 0%, 49% { background: #fff; box-shadow: inset 0 0 0 0.5cqw var(--d-pale); } 52%, 94% { background: var(--d-hue); box-shadow: inset 0 0 0 0.5cqw transparent; } 100% { background: #fff; box-shadow: inset 0 0 0 0.5cqw var(--d-pale); } }
@keyframes gcd-stage4 { 0%, 63% { background: #fff; box-shadow: inset 0 0 0 0.5cqw var(--d-pale); } 66%, 94% { background: var(--d-hue); box-shadow: inset 0 0 0 0.5cqw transparent; } 100% { background: #fff; box-shadow: inset 0 0 0 0.5cqw var(--d-pale); } }

/* Loops shared by the pictures below, all on a 12 second cycle. A third
   (cycle3, hl3) takes a 4s or 8s delay for its second and third turn. */
@keyframes gcd-new { 0%, 3% { opacity: 0; transform: translateX(-1.5cqw); } 7%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes gcd-off { 0%, 68% { opacity: 1; } 71%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gcd-on { 0%, 68% { opacity: 0; transform: scale(0.9); } 72%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes gcd-cycle3 { 0% { opacity: 0; transform: translateY(1cqw); } 2%, 31% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } }
@keyframes gcd-hl3 { 0% { background: transparent; } 2%, 31% { background: var(--d-tint); } 34%, 100% { background: transparent; } }
@keyframes gcd-grow-loop { 0%, 8% { transform: scaleX(0); } 30%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes gcd-rise-loop { 0%, 6% { transform: scaleY(0); } 26%, 94% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes gcd-ring-loop { 0%, 8% { --gcd-ring: 0%; } 40%, 94% { --gcd-ring: 100%; } 100% { --gcd-ring: 0%; } }

/* ---- 7. Product builder: a question set adapts, rules line up, the product is published ---- */
.gcd--builder { --d-hue: var(--d-purple); }
.gcd--builder .gcd-prod { left: 2cqw; top: 4cqw; width: 74cqw; z-index: 2; }
.gcd--builder .gcd-rules { right: 2cqw; bottom: 3cqw; width: 60cqw; z-index: 3; }
.gcd--builder .gcd-new { background: var(--d-tint); }
.gcd--builder .gcd-log time { color: var(--d-purple); }
.gcd--builder .gcd-off { opacity: 0; }
.gcd--builder .gcd-dot--a { right: 5cqw; top: 6cqw; background: var(--d-accent); }
.gcd--builder .gcd-dot--b { left: 5cqw; bottom: 12cqw; background: var(--d-amber); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--builder .gcd-new { animation: gcd-new 12s infinite; }
	.gcd--builder .gcd-log li { animation: gcd-log 12s infinite; }
	.gcd--builder .gcd-log li:nth-child(2) { animation-name: gcd-log2; }
	.gcd--builder .gcd-log li:nth-child(3) { animation-name: gcd-log3; }
	.gcd--builder .gcd-log li:nth-child(4) { animation-name: gcd-log4; }
	.gcd--builder .gcd-off { animation: gcd-off 12s infinite; }
	.gcd--builder .gcd-on { animation: gcd-on 12s infinite; }
}

/* ---- 8. Complex risk: one product live in three markets, and its co-insurance and commission chain ---- */
.gcd--risk { --d-hue: var(--d-cta); }
.gcd--risk .gcd-markets { left: 2cqw; top: 4cqw; width: 76cqw; z-index: 2; }
.gcd--risk .gcd-markets > .gcd-row:last-child { display: none; }
.gcd--risk .gcd-chain { right: 2cqw; bottom: 3cqw; width: 58cqw; z-index: 3; }
.gcd-chips { display: flex; flex-wrap: wrap; gap: 1.2cqw; padding: 2cqw 3cqw 0.6cqw; }
.gcd-chips .gcd-pill { color: #fff; }
.gcd-chips .gcd-pill:nth-child(1) { background: var(--d-accent); }
.gcd-chips .gcd-pill:nth-child(2) { background: var(--d-primary); }
.gcd-chips .gcd-pill:nth-child(3) { background: var(--d-purple); }
.gcd--risk .gcd-bars { padding: 1.8cqw 3cqw 2.6cqw; }
.gcd--risk .gcd-bars .gcd-bar:nth-child(1) span { --w: 60%; --d-c: var(--d-cta); }
.gcd--risk .gcd-bars .gcd-bar:nth-child(2) span { --w: 40%; --d-c: var(--d-amber); }
.gcd--risk .gcd-bars .gcd-bar:nth-child(3) span { --w: 15%; --d-c: var(--d-primary); }
.gcd--risk .gcd-bars .gcd-bar:nth-child(4) span { --w: 10%; --d-c: var(--d-accent); }
.gcd--risk .gcd-bar { grid-template-columns: 17cqw 1fr 6cqw; }
.gcd--risk .gcd-bar b { text-align: right; }
.gcd--risk .gcd-dot--a { right: 6cqw; top: 5cqw; background: var(--d-primary); }
.gcd--risk .gcd-dot--b { left: 4cqw; bottom: 9cqw; background: var(--d-amber); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--risk .gcd-mkt { animation: gcd-hl3 12s infinite; }
	.gcd--risk .gcd-mkt:nth-of-type(4) { animation-delay: 4s; }
	.gcd--risk .gcd-mkt:nth-of-type(5) { animation-delay: 8s; }
	.gcd--risk .gcd-bar span::after { animation: gcd-grow-loop 12s infinite; }
	.gcd--risk .gcd-bar:nth-child(2) span::after { animation-delay: 0.3s; }
	.gcd--risk .gcd-bar:nth-child(3) span::after { animation-delay: 0.6s; }
	.gcd--risk .gcd-bar:nth-child(4) span::after { animation-delay: 0.9s; }
}

/* ---- 9. Customer view: each policy in turn, with its history and transactions beside it ---- */
.gcd--account { --d-hue: var(--d-steel); }
.gcd--account .gcd-cust { left: 2cqw; top: 4cqw; width: 74cqw; z-index: 2; }
.gcd--account .gcd-ctx { right: 2cqw; bottom: 3cqw; width: 62cqw; z-index: 3; }
.gcd--account .gcd-panes { height: 22cqw; }
.gcd--account .gcd-pane { padding: 0; }
.gcd-pane-title { padding: 1.8cqw 3cqw 0; font-size: 2.1cqw; font-weight: 700; color: var(--d-steel); text-transform: uppercase; letter-spacing: 0.04em; }
.gcd--account .gcd-log { padding-top: 1.2cqw; }
.gcd--account .gcd-log li { opacity: 1; transform: none; grid-template-columns: 9cqw 1fr auto; }
.gcd--account .gcd-dot--a { right: 5cqw; top: 5cqw; background: var(--d-cta); }
.gcd--account .gcd-dot--b { left: 5cqw; bottom: 10cqw; background: var(--d-accent); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--account .gcd-prow { animation: gcd-hl3 12s infinite; }
	.gcd--account .gcd-prow:nth-of-type(4) { animation-delay: 4s; }
	.gcd--account .gcd-prow:nth-of-type(5) { animation-delay: 8s; }
	.gcd--account .gcd-pane { animation: gcd-cycle3 12s infinite; }
	.gcd--account .gcd-pane:nth-child(2) { animation-delay: 4s; }
	.gcd--account .gcd-pane:nth-child(3) { animation-delay: 8s; }
	.gcd--account .gcd-pane:first-child { opacity: 0; }
}

/* ---- 10. Documents and workflow: a renewal runs its steps while the schedule fills from the policy ---- */
.gcd--docs { --d-hue: var(--d-accent); }
.gcd--docs .gcd-flow { left: 2cqw; top: 4cqw; width: 66cqw; z-index: 2; }
.gcd--docs .gcd-doc { right: 2cqw; bottom: 3cqw; width: 58cqw; z-index: 3; }
.gcd--docs .gcd-log time { color: var(--d-green); }
.gcd-tok { padding: 0.3cqw 1.2cqw; border-radius: 0.8cqw; background: var(--d-tint); color: var(--d-steel); font-family: ui-monospace, monospace; font-size: 2cqw; font-weight: 600; }
.gcd-doc-foot { display: flex; justify-content: space-between; align-items: center; padding: 1.8cqw 3cqw 2.2cqw; font-size: 2.2cqw; font-weight: 600; color: var(--d-steel); }
.gcd--docs .gcd-dot--a { right: 5cqw; top: 5cqw; background: var(--d-purple); }
.gcd--docs .gcd-dot--b { left: 6cqw; bottom: 8cqw; background: var(--d-amber); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--docs .gcd-log li { animation: gcd-log 12s infinite; }
	.gcd--docs .gcd-log li:nth-child(2) { animation-name: gcd-log2; }
	.gcd--docs .gcd-log li:nth-child(3) { animation-name: gcd-log3; }
	.gcd--docs .gcd-log li:nth-child(4) { animation-name: gcd-log4; }
	.gcd--docs .gcd-was { animation: gcd-net-was 12s infinite; }
	.gcd--docs .gcd-now { animation: gcd-net-now 12s infinite; }
	.gcd--docs .gcd-on { animation: gcd-st3 12s infinite; }
}
@media (prefers-reduced-motion: reduce) {
	.gcd--builder .gcd-log li, .gcd--docs .gcd-log li { opacity: 1; transform: none; }
}

/* ---- 11. Insights: monthly premium grows, the renewal ring fills, the month's bordereaux go out ---- */
.gcd--insights { --d-hue: var(--d-amber); }
.gcd--insights .gcd-board { left: 2cqw; top: 2cqw; width: 84cqw; z-index: 2; }
.gcd--insights .gcd-bdx { right: 2cqw; bottom: 3cqw; width: 50cqw; z-index: 3; }
.gcd--insights .gcd-num { font-size: 4.6cqw; }
.gcd--insights .gcd-num::after { content: none; }
.gcd-cols-wrap { display: grid; grid-template-columns: 1fr 24cqw; gap: 3cqw; padding: 2.6cqw 3cqw 3cqw; align-items: end; }
.gcd-cols-wrap .gcd-label { font-size: 2.1cqw; font-weight: 700; margin-bottom: 1.6cqw; }
.gcd-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6cqw; align-items: end; height: 14cqw; border-bottom: 0.2cqw solid var(--d-line); }
.gcd-cols i { display: block; height: var(--h); border-radius: 0.8cqw 0.8cqw 0 0; background: var(--d-primary); transform-origin: bottom; }
.gcd-cols i:nth-child(1) { --h: 46%; }
.gcd-cols i:nth-child(2) { --h: 58%; }
.gcd-cols i:nth-child(3) { --h: 52%; }
.gcd-cols i:nth-child(4) { --h: 70%; }
.gcd-cols i:nth-child(5) { --h: 81%; }
.gcd-cols i:nth-child(6) { --h: 94%; background: var(--d-accent); }
.gcd-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6cqw; margin-top: 1cqw; font-size: 1.8cqw; font-weight: 600; color: var(--d-steel); text-align: center; }
.gcd--insights .gcd-ring { width: 17cqw; background: conic-gradient(var(--d-accent) 0 calc(var(--gcd-ring) * 0.87), var(--d-line) 0); }
.gcd-ring-wrap { position: relative; text-align: center; }
.gcd-ring-wrap b { position: absolute; left: 0; right: 0; top: 6.7cqw; font-size: 3.6cqw; line-height: 1; }
.gcd-ring-wrap p { margin-top: 1.4cqw; font-size: 1.9cqw; font-weight: 600; color: var(--d-steel); }
.gcd--insights .gcd-dot--a { right: 4cqw; top: 3cqw; background: var(--d-primary); }
.gcd--insights .gcd-dot--b { left: 5cqw; bottom: 8cqw; background: var(--d-cta); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--insights .gcd-cols i { animation: gcd-rise-loop 12s infinite; }
	.gcd--insights .gcd-cols i:nth-child(2) { animation-delay: 0.15s; }
	.gcd--insights .gcd-cols i:nth-child(3) { animation-delay: 0.3s; }
	.gcd--insights .gcd-cols i:nth-child(4) { animation-delay: 0.45s; }
	.gcd--insights .gcd-cols i:nth-child(5) { animation-delay: 0.6s; }
	.gcd--insights .gcd-cols i:nth-child(6) { animation-delay: 0.75s; }
	.gcd--insights .gcd-ring { animation: gcd-ring-loop 12s infinite; }
	.gcd--insights .gcd-bdx .gcd-pill { animation: gcd-log 12s infinite; }
	.gcd--insights .gcd-bdx .gcd-row:nth-of-type(3) .gcd-pill { animation-name: gcd-log2; }
	.gcd--insights .gcd-bdx .gcd-row:nth-of-type(4) .gcd-pill { animation-name: gcd-log3; }
}

/* ==== Billing & Finance ==== */

/* ---- 12. Billing: an invoice raised from the policy, beside the policy's transaction history ---- */
.gcd--invoice { --d-hue: var(--d-accent); }
.gcd--invoice .gcd-inv { left: 2cqw; top: 4cqw; width: 74cqw; z-index: 2; }
.gcd--invoice .gcd-trail { right: 2cqw; bottom: 3cqw; width: 62cqw; z-index: 3; }
.gcd--invoice .gcd-off { opacity: 0; }
.gcd--invoice .gcd-dot--a { right: 5cqw; top: 5cqw; background: var(--d-purple); }
.gcd--invoice .gcd-dot--b { left: 5cqw; bottom: 11cqw; background: var(--d-amber); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--invoice .gcd-log li { animation: gcd-log 12s infinite; }
	.gcd--invoice .gcd-log li:nth-child(2) { animation-name: gcd-log2; }
	.gcd--invoice .gcd-log li:nth-child(3) { animation-name: gcd-log3; }
	.gcd--invoice .gcd-log li:nth-child(4) { animation-name: gcd-log4; }
	.gcd--invoice .gcd-off { animation: gcd-off 12s infinite; }
	.gcd--invoice .gcd-on { animation: gcd-on 12s infinite; }
}

/* ---- 13. Collection: an instalment is collected while an overdue account is chased ---- */
.gcd--collect { --d-hue: var(--d-purple); }
.gcd--collect .gcd-plan { left: 2cqw; top: 4cqw; width: 70cqw; z-index: 2; }
.gcd--collect .gcd-chase { right: 2cqw; bottom: 3cqw; width: 62cqw; z-index: 3; }
.gcd--collect .gcd-off { opacity: 0; }
.gcd-sched { background: var(--d-soft); color: var(--d-steel); }
.gcd--collect .gcd-log time { color: var(--d-cta); }
.gcd--collect .gcd-dot--a { right: 6cqw; top: 5cqw; background: var(--d-accent); }
.gcd--collect .gcd-dot--b { left: 5cqw; bottom: 9cqw; background: var(--d-cta); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--collect .gcd-off { animation: gcd-off 12s infinite; }
	.gcd--collect .gcd-on { animation: gcd-on 12s infinite; }
	.gcd--collect .gcd-log li { animation: gcd-log 12s infinite; }
	.gcd--collect .gcd-log li:nth-child(2) { animation-name: gcd-log2; }
	.gcd--collect .gcd-log li:nth-child(3) { animation-name: gcd-log3; }
}

/* ---- 14. Commission: a three-tier chain calculated, then clawed back on cancellation ---- */
.gcd--commission { --d-hue: var(--d-cta); }
.gcd--commission .gcd-comm { left: 2cqw; top: 4cqw; width: 76cqw; z-index: 2; }
.gcd--commission .gcd-claw { right: 2cqw; bottom: 3cqw; width: 60cqw; z-index: 3; }
.gcd--commission .gcd-log time { color: var(--d-cta); }
.gcd--commission .gcd-log b { color: var(--d-cta); }
.gcd--commission .gcd-log li { grid-template-columns: 11cqw 1fr auto; }
.gcd--commission .gcd-dot--a { right: 5cqw; top: 6cqw; background: var(--d-amber); }
.gcd--commission .gcd-dot--b { left: 4cqw; bottom: 10cqw; background: var(--d-primary); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--commission .gcd-tier { animation: gcd-hl3 12s infinite; }
	.gcd--commission .gcd-tier:nth-of-type(4) { animation-delay: 4s; }
	.gcd--commission .gcd-tier:nth-of-type(5) { animation-delay: 8s; }
	.gcd--commission .gcd-log li { animation: gcd-log 12s infinite; }
	.gcd--commission .gcd-log li:nth-child(2) { animation-name: gcd-log2; }
	.gcd--commission .gcd-log li:nth-child(3) { animation-name: gcd-log3; }
}

/* ---- 15. Bordereaux: a risk bordereau is generated and sent, the paid bordereau reconciled ---- */
.gcd--bordereaux { --d-hue: var(--d-amber); }
.gcd--bordereaux .gcd-rbdx { left: 2cqw; top: 4cqw; width: 72cqw; z-index: 2; }
.gcd--bordereaux .gcd-recon { right: 2cqw; bottom: 3cqw; width: 62cqw; z-index: 3; }
.gcd--bordereaux .gcd-off { opacity: 0; }
.gcd--bordereaux .gcd-new { background: var(--d-tint); }
.gcd--bordereaux .gcd-dot--a { right: 5cqw; top: 5cqw; background: var(--d-primary); }
.gcd--bordereaux .gcd-dot--b { left: 5cqw; bottom: 10cqw; background: var(--d-purple); }
@media (prefers-reduced-motion: no-preference) {
	.gcd--bordereaux .gcd-off { animation: gcd-off 12s infinite; }
	.gcd--bordereaux .gcd-on { animation: gcd-on 12s infinite; }
	.gcd--bordereaux .gcd-new { animation: gcd-new 12s infinite; }
}

@media (prefers-reduced-motion: reduce) {
	.gcd--invoice .gcd-log li, .gcd--collect .gcd-log li, .gcd--commission .gcd-log li { opacity: 1; transform: none; }
}

/* ---- 16. Reporting: the Policy Administration dashboard's parts (11), in teal, for Billing & Finance ---- */
.gcd--fin { --d-hue: var(--d-accent); }

/* §413: the strip in a card's corner is rounded itself, so the corner never relies on the card's clipping. */
.gcd-card > :first-child { border-radius: 2.6cqw 2.6cqw 0 0; }
/* §413: the strip also covers the card's white at its rounded edge, so no light rim shows on a dark background. */
.gcd-card > .gcd-hd:first-child { box-shadow: 0 -2px 0 var(--d-ink), 2px 0 0 var(--d-ink), -2px 0 0 var(--d-ink); }
.gcd-card > .gcd-sub:first-child { box-shadow: 0 -2px 0 var(--d-steel), 2px 0 0 var(--d-steel), -2px 0 0 var(--d-steel); }