/*
  Animated feature graphics (templates/_graphics), animated by graphics.js.

  Each graphic is a 4:3 stage sized in em from its own width, so it scales as one
  like an image. The markup on its own shows the finished frame, which is what
  visitors who prefer reduced motion (or have no script) see.
*/
/*
  Colour tokens. Every colour in the graphics comes from these, in this file, in a
  graphic's own CSS and in inline styles (var(--g17g-...)), so dark mode only has
  to swap the tokens. The site turns dark mode on with a dark class on <html>.
  Brand colours only: greens and purples, plus neutrals.
*/
.g17g {
    --g17g-green: #58B000;
    --g17g-green-light: #80c725;
    --g17g-green-text: #306100;
    --g17g-green-bg: #E3F3D2;
    --g17g-green-tint: #F3FAEB;
    --g17g-green-bar: #DCEFC6;
    --g17g-purple: #6A58BD;
    --g17g-purple-text: #4b3b9f;
    --g17g-purple-deep: #350E8D;
    --g17g-purple-bg: #ECE9FA;
    --g17g-purple-soft: #DCD6F5;
    --g17g-stage: #fff;
    --g17g-card: #fff;
    --g17g-text: #1d2a12;
    --g17g-text-soft: #3b4533;
    --g17g-muted: #66705e;
    --g17g-faint: #7a8472;
    --g17g-border: #DDE4D6;
    --g17g-border-strong: #C9D2C1;
    --g17g-rule: #EEF1EB;
    --g17g-soft: #F0F2EE;
    --g17g-skel: #E9EEE4;
    --g17g-on-green: #fff;
    --g17g-shadow: rgba(29, 42, 18, .1);
    --g17g-shadow-soft: rgba(29, 42, 18, .06);
    --g17g-edge: rgba(29, 42, 18, .06);
}
.dark .g17g {
    --g17g-green: #58B000;
    --g17g-green-light: #A8DB4C;
    --g17g-green-text: #A8DB4C;
    --g17g-green-bg: rgba(88, 176, 0, .2);
    --g17g-green-tint: rgba(88, 176, 0, .12);
    --g17g-green-bar: rgba(88, 176, 0, .28);
    --g17g-purple: #7f6dd6;
    --g17g-purple-text: #c9bff7;
    --g17g-purple-deep: #d6cefa;
    --g17g-purple-bg: rgba(106, 88, 189, .28);
    --g17g-purple-soft: rgba(106, 88, 189, .4);
    --g17g-stage: #1f201d;
    --g17g-card: #2a2c27;
    --g17g-text: #f1f4ec;
    --g17g-text-soft: #d5dacd;
    --g17g-muted: #a7ae9f;
    --g17g-faint: #8f9688;
    --g17g-border: #40443b;
    --g17g-border-strong: #50554a;
    --g17g-rule: #393c34;
    --g17g-soft: #34372f;
    --g17g-skel: #3a3e35;
    --g17g-on-green: #fff;
    --g17g-shadow: rgba(0, 0, 0, .45);
    --g17g-shadow-soft: rgba(0, 0, 0, .3);
    --g17g-edge: rgba(255, 255, 255, .07);
}

.g17g { container-type: inline-size; position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
/* On wide screens a graphic sits on the outer edge of its column, so it lines up with the
   content edge of the blocks above and below rather than floating in the middle */
@media (min-width: 1024px) {
    [data-g17-align="start"] .g17g { margin-left: 0; }
    [data-g17-align="end"] .g17g { margin-right: 0; }
}
/* The benefit labels' layer: the same box and type size as the stage, but outside its clipping */
.g17g__perks { position: absolute; inset: 0; z-index: 5; pointer-events: none; font-size: 14px; font-size: 2.35cqw; line-height: 1.25; -webkit-font-smoothing: antialiased; }
.g17g__stage {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate;
    font-size: 14px; font-size: 2.35cqw; line-height: 1.25; color: var(--g17g-text);
    border-radius: 30px; background: var(--g17g-stage);
    box-shadow: 0 1.2em 3em var(--g17g-shadow-soft), 0 0 0 1px var(--g17g-edge);
    -webkit-font-smoothing: antialiased;
}
.g17g__stage *, .g17g__stage *::before, .g17g__stage *::after { box-sizing: border-box; }
.g17g svg { display: block; overflow: visible; }

/* No decoration behind the graphics (client decision): any leftover rings stay hidden */
.g17g-deco { display: none; }

/* Connection lines and the pulses that run along them */
.g17g-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.g17g-line { fill: none; stroke: var(--g17g-green); stroke-opacity: .55; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 100 120; }
.g17g-pulse { fill: none; stroke: var(--g17g-green); stroke-linecap: round; stroke-dasharray: 16 120; stroke-dashoffset: 18; }
.g17g-pulse--glow { stroke-width: 7; stroke-opacity: .22; }
.g17g-pulse--core { stroke-width: 2.4; }

/* Cards */
.g17g-card {
    position: absolute; z-index: 2; background: var(--g17g-card); border-radius: 1.1em; padding: 1.05em;
    box-shadow: 0 .7em 2em var(--g17g-shadow), 0 .1em .35em var(--g17g-shadow-soft), 0 0 0 1px var(--g17g-edge);
}
.g17g-title { font-size: .95em; font-weight: 700; letter-spacing: -.01em; }
.g17g-head { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-bottom: .8em; }
.g17g-label { display: block; font-size: .66em; font-weight: 500; color: var(--g17g-muted); margin: .85em 0 .35em; }
.g17g-field {
    position: relative; display: flex; align-items: center; height: 2.25em; padding: 0 .75em;
    border: 1px solid var(--g17g-border); border-radius: .6em; background: var(--g17g-card);
    font-size: .8em; white-space: nowrap; overflow: hidden;
}
.g17g-field.is-focus { border-color: var(--g17g-green); box-shadow: 0 0 0 .2em rgba(88, 176, 0, .18); }
.g17g-focus { position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--g17g-green); box-shadow: 0 0 0 .2em rgba(88, 176, 0, .18); opacity: 0; pointer-events: none; }
.g17g-type { display: inline-block; white-space: nowrap; }
.g17g-tick { margin-left: auto; width: 1.25em; height: 1.25em; flex: none; }

.g17g-btn {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .4em;
    height: 2.4em; margin-top: 1.1em; border-radius: 999px; overflow: hidden;
    font-size: .8em; font-weight: 600; color: var(--g17g-on-green);
    background: var(--g17g-green);
}
.g17g-btn__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4em; }
.g17g-btn svg { width: 1.1em; height: 1.1em; }

.g17g-chip {
    display: inline-flex; align-items: center; gap: .35em; padding: .3em .7em;
    border-radius: 999px; font-size: .64em; font-weight: 600; white-space: nowrap;
}
.g17g-chip--green { background: var(--g17g-green-bg); color: var(--g17g-green-text); }
.g17g-chip--purple { background: var(--g17g-purple-bg); color: var(--g17g-purple-text); }
.g17g-chip--grey { background: var(--g17g-soft); color: var(--g17g-muted); }
.g17g-chip svg { width: 1.1em; height: 1.1em; }
.g17g-swap { position: relative; display: inline-grid; justify-items: end; }
.g17g-swap > * { grid-area: 1 / 1; }

.g17g-av {
    flex: none; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%;
    font-size: .62em; font-weight: 700; color: #fff; background: var(--g17g-purple);
}
.g17g-av--green { background: var(--g17g-green); }
.g17g-av--soft { background: var(--g17g-purple-soft); color: var(--g17g-purple-text); }
.g17g-skel { display: block; height: .5em; border-radius: .3em; background: var(--g17g-skel); }

/* Rows in a list card */
.g17g-rows { position: relative; height: 7.8em; overflow: hidden; margin: -.2em -.2em 0; padding: .2em .2em 0; }
.g17g-row { display: flex; align-items: center; gap: .55em; height: 2.6em; padding: 0 .45em; border-radius: .7em; }
.g17g-row--new { background: var(--g17g-green-tint); box-shadow: inset 0 0 0 1px rgba(88, 176, 0, .35); }
.g17g-row__text { flex: 1; min-width: 0; }
.g17g-row__name { display: block; font-size: .7em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g17g-row__meta { display: block; font-size: .58em; color: var(--g17g-faint); white-space: nowrap; }

/* Hub: the website in the middle, passing data on */
.g17g-hub { position: absolute; z-index: 3; aspect-ratio: 1; }
.g17g-hub__halo {
    position: absolute; inset: -18%; border-radius: 50%;
    background: rgba(88, 176, 0, .14);
    opacity: 0;
}
.g17g-hub__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--g17g-card); box-shadow: 0 .6em 1.6em var(--g17g-shadow), 0 0 0 1px var(--g17g-edge); }
.g17g-hub__core {
    position: absolute; inset: 22%; border-radius: 50%; display: grid; place-items: center;
    background: var(--g17g-green); box-shadow: 0 .5em 1.4em rgba(48, 97, 0, .25);
}
.g17g-hub__core svg { width: 46%; height: 46%; }
.g17g-hub__ping { position: absolute; inset: 22%; border-radius: 50%; border: 2px solid var(--g17g-green); opacity: 0; }
.g17g-hub__label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .35em; }

/* Small bar chart */
.g17g-chart { display: flex; align-items: flex-end; gap: 6%; height: 3.4em; margin-top: .7em; }
.g17g-chart span { flex: 1; border-radius: .25em .25em 0 0; background: var(--g17g-green-bar); transform-origin: 50% 100%; }
.g17g-chart span:last-child { background: var(--g17g-green); }
.g17g-count { position: relative; display: block; height: 1.25em; overflow: hidden; font-size: 1.5em; font-weight: 700; letter-spacing: -.02em; }
.g17g-count > span { position: absolute; left: 0; top: 0; }

/* Stepper */
.g17g-steps { display: flex; align-items: center; margin-bottom: .9em; }
.g17g-step {
    flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
    font-size: .62em; font-weight: 700; color: var(--g17g-faint); background: var(--g17g-soft); position: relative;
}
.g17g-step__on { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; color: var(--g17g-on-green); background: var(--g17g-green); }
.g17g-steps__track { flex: 1; height: .18em; margin: 0 .3em; border-radius: .1em; background: var(--g17g-soft); position: relative; overflow: hidden; }
.g17g-steps__fill { position: absolute; inset: 0; background: var(--g17g-green); transform-origin: 0 50%; }

.g17g-radios { display: flex; gap: .8em; font-size: .72em; }
.g17g-radio { display: inline-flex; align-items: center; gap: .4em; }
.g17g-radio i { position: relative; width: 1.15em; height: 1.15em; border-radius: 50%; border: 1px solid var(--g17g-border-strong); background: var(--g17g-card); }
.g17g-radio i b { position: absolute; inset: 22%; border-radius: 50%; background: var(--g17g-green); }

.g17g-badge {
    position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .45em;
    padding: .5em .85em .5em .55em; border-radius: 999px; background: var(--g17g-card);
    box-shadow: 0 .5em 1.4em var(--g17g-shadow), 0 0 0 1px var(--g17g-edge); font-size: .72em; font-weight: 700; color: var(--g17g-purple-deep); white-space: nowrap;
}
.g17g-badge__icon { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--g17g-purple); }
.g17g-badge__icon svg { width: 62%; height: 62%; }
.g17g-foot { display: flex; align-items: center; gap: .4em; margin-top: .8em; padding-top: .7em; border-top: 1px solid var(--g17g-rule); font-size: .6em; color: var(--g17g-muted); white-space: nowrap; }
.g17g-foot svg { width: 1.2em; height: 1.2em; flex: none; }
.g17g-trust { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .55em; }
.g17g-trust .g17g-chip { font-size: .58em; }

/* A card whose contents stack, with the button kept at the bottom */
.g17g-card--col { display: flex; flex-direction: column; }
.g17g-card--col .g17g-btn { flex: none; }
.g17g-steps--labelled { margin-bottom: 1.7em; }
.g17g-step em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .45em; font-size: .85em; font-style: normal; font-weight: 500; color: var(--g17g-muted); white-space: nowrap; }
.g17g-step:first-child em { left: 0; transform: none; }
.g17g-step:last-child em { left: auto; right: 0; transform: none; }

/* Form steps slide past each other inside a fixed window, edge to edge of the card */
.g17g-panels { position: relative; flex: 1; overflow: hidden; margin: 0 -1.05em; }
.g17g-panel { position: absolute; inset: 0; padding: 0 1.05em; opacity: 0; }
.g17g-panel--on { opacity: 1; }
.g17g-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.g17g-muted { font-size: .85em; font-weight: 500; color: var(--g17g-faint); }

.g17g-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.g17g-tier { position: relative; padding: .6em .55em; border: 1px solid var(--g17g-border); border-radius: .6em; font-size: .62em; color: var(--g17g-muted); white-space: nowrap; }
.g17g-tier b { display: block; margin-bottom: .2em; font-size: 1.1em; color: var(--g17g-text); }
.g17g-tier__on { position: absolute; z-index: -1; inset: -1px; border-radius: inherit; border: 2px solid var(--g17g-green); background: var(--g17g-green-tint); }
.g17g-tier__on svg { position: absolute; top: .45em; right: .45em; width: 1.3em; height: 1.3em; }
.g17g-check { display: flex; align-items: center; gap: .5em; margin-top: .95em; font-size: .66em; color: var(--g17g-text-soft); }
.g17g-check i { flex: none; width: 1.35em; height: 1.35em; border-radius: .3em; border: 1px solid var(--g17g-border-strong); }
.g17g-check svg { display: block; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; }

.g17g-seg { display: flex; padding: .2em; border-radius: .6em; background: var(--g17g-soft); font-size: .64em; color: var(--g17g-muted); }
.g17g-seg span { flex: 1; padding: .45em 0; border-radius: .45em; text-align: center; white-space: nowrap; }
.g17g-seg .is-on { background: var(--g17g-card); color: var(--g17g-text); font-weight: 600; box-shadow: 0 .1em .3em var(--g17g-shadow); }
.g17g-summary { display: flex; align-items: baseline; justify-content: space-between; margin-top: .9em; padding-top: .6em; border-top: 1px solid var(--g17g-rule); font-size: .64em; color: var(--g17g-muted); }
.g17g-summary strong { font-size: 1.6em; color: var(--g17g-text); letter-spacing: -.02em; }
.g17g-title + .g17g-muted, .g17g-head .g17g-muted { font-size: .62em; }
.g17g-trend { display: block; margin-top: .25em; font-size: .6em; font-weight: 600; color: var(--g17g-green-text); }


/* Benefit labels: one or two plain words pinned beside the moment they describe, like the notes on a
   product shot. Deep purple so they read as a note about the UI rather than part of it. Place them with
   inline left/top (the point they sit centred on); they may overlap a card's edge, never its content.
   They appear as the story reaches them. */
.g17g-perk {
    position: absolute; z-index: 6; display: inline-flex; align-items: center; transform: translate(-50%, -50%);
    padding: .55em 1.15em; border-radius: 999px; background: var(--g17g-purple-deep); color: var(--g17g-stage);
    box-shadow: 0 .6em 1.6em var(--g17g-shadow); font-size: .86em; font-weight: 600; letter-spacing: .005em; white-space: nowrap; pointer-events: none;
}