/* Campaign landing pages graphic (templates/_graphics/landingPages.twig) */
/* Browser page frame */
[data-g17-graphic="landingPages"] .g17g-lp-page {
    position: absolute; z-index: 2; overflow: hidden; border-radius: 1em; background: var(--g17g-card);
    box-shadow: 0 .9em 2.4em var(--g17g-shadow), 0 .1em .35em var(--g17g-shadow-soft), 0 0 0 1px var(--g17g-edge);
}
[data-g17-graphic="landingPages"] .g17g-lp-bar { display: flex; align-items: center; gap: .5em; height: 2.3em; padding: 0 .55em 0 .8em; border-bottom: 1px solid var(--g17g-rule); }
[data-g17-graphic="landingPages"] .g17g-lp-dots { flex: none; display: flex; gap: .28em; }
[data-g17-graphic="landingPages"] .g17g-lp-dots i { width: .48em; height: .48em; border-radius: 50%; background: var(--g17g-border); }
[data-g17-graphic="landingPages"] .g17g-lp-url {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: .4em; height: 2.4em; padding: 0 .9em;
    border-radius: 999px; background: var(--g17g-soft); font-size: .58em; color: var(--g17g-muted); white-space: nowrap;
}
[data-g17-graphic="landingPages"] .g17g-lp-url svg { flex: none; width: 1.15em; height: 1.15em; color: var(--g17g-green); }

/* Flat illustrations, drawn from brand shapes */
[data-g17-graphic="landingPages"] .a-sky { fill: var(--g17g-green-tint); }
[data-g17-graphic="landingPages"] .a-hill { fill: var(--g17g-green-bar); }
[data-g17-graphic="landingPages"] .a-hill2 { fill: var(--g17g-green-bg); }
[data-g17-graphic="landingPages"] .a-gbg { fill: var(--g17g-green-bg); }
[data-g17-graphic="landingPages"] .a-pbg { fill: var(--g17g-purple-bg); }
[data-g17-graphic="landingPages"] .a-soft { fill: var(--g17g-purple-soft); }
[data-g17-graphic="landingPages"] .a-green { fill: var(--g17g-green); }
[data-g17-graphic="landingPages"] .a-lime { fill: var(--g17g-green-light); }
[data-g17-graphic="landingPages"] .a-purple { fill: var(--g17g-purple); }
[data-g17-graphic="landingPages"] .a-card { fill: var(--g17g-card); }
[data-g17-graphic="landingPages"] .a-pipe { fill: none; stroke: var(--g17g-purple); stroke-linecap: round; stroke-linejoin: round; }

/* The pointer: a full stage layer that moves by xPercent / yPercent, so the tip lands on a stage % */
[data-g17-graphic="landingPages"] .g17g-lp-track { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
[data-g17-graphic="landingPages"] .g17g-lp-cursor {
    position: absolute; left: 0; top: 0; width: 1.55em; height: 1.55em; margin: -.13em 0 0 -.2em; transform-origin: 13% 8%;
    filter: drop-shadow(0 .15em .25em var(--g17g-shadow));
}
[data-g17-graphic="landingPages"] .g17g-lp-cursor path { fill: var(--g17g-card); stroke: var(--g17g-text); stroke-width: 1.5; stroke-linejoin: round; }
[data-g17-graphic="landingPages"] .g17g-lp-click { position: absolute; left: -.8em; top: -.8em; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid var(--g17g-green); opacity: 0; }

/* A small burst of green and purple dots on success */
[data-g17-graphic="landingPages"] .g17g-lp-burst { position: absolute; width: 0; height: 0; z-index: 5; pointer-events: none; }
[data-g17-graphic="landingPages"] .g17g-lp-burst i { position: absolute; left: -.21em; top: -.21em; width: .42em; height: .42em; border-radius: 50%; background: var(--g17g-green); opacity: 0; }
[data-g17-graphic="landingPages"] .g17g-lp-burst i:nth-child(even) { background: var(--g17g-purple); }

/* The landing page & the block picker */
[data-g17-graphic="landingPages"] .g17g-lp-pub { position: relative; flex: none; width: 6.2em; height: 2.3em; border-radius: 999px; overflow: hidden; background: var(--g17g-green); color: var(--g17g-on-green); font-size: .62em; font-weight: 700; }
[data-g17-graphic="landingPages"] .g17g-lp-pub__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .3em; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-pub__label svg { width: 1.05em; height: 1.05em; }

/* The page scrolls inside the frame as it grows */
[data-g17-graphic="landingPages"] .g17g-lp-view { position: absolute; left: 0; right: 0; top: 2.3em; bottom: 0; overflow: hidden; }
[data-g17-graphic="landingPages"] .g17g-lp-body { position: relative; padding: .7em .85em 1em; }
[data-g17-graphic="landingPages"] .g17g-lp-nav { display: flex; align-items: center; justify-content: space-between; height: 1.4em; }
[data-g17-graphic="landingPages"] .g17g-lp-logo { display: flex; align-items: center; gap: .4em; font-size: .62em; font-weight: 800; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-logo i { width: 1.5em; height: 1.5em; border-radius: .45em; background: var(--g17g-green); }
[data-g17-graphic="landingPages"] .g17g-lp-links { display: flex; align-items: center; gap: .55em; }
[data-g17-graphic="landingPages"] .g17g-lp-links i { width: 1.7em; height: .3em; border-radius: .2em; background: var(--g17g-skel); }
[data-g17-graphic="landingPages"] .g17g-lp-links b { padding: .35em .9em; border-radius: 999px; background: var(--g17g-purple); color: var(--g17g-on-green); font-size: .52em; }
[data-g17-graphic="landingPages"] .g17g-lp-empty {
    position: absolute; left: 50%; top: 11em; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .45em; font-size: .72em; font-weight: 600; color: var(--g17g-faint); white-space: nowrap;
}
[data-g17-graphic="landingPages"] .g17g-lp-empty svg { width: 1.3em; height: 1.3em; }

[data-g17-graphic="landingPages"] .g17g-lp-sec { position: relative; margin-top: .6em; }
[data-g17-graphic="landingPages"] .g17g-lp-hero { padding: .95em 1.05em 1.05em; border-radius: .8em; background: var(--g17g-purple); color: var(--g17g-on-green); }
[data-g17-graphic="landingPages"] .g17g-lp-onchip { background: color-mix(in srgb, var(--g17g-on-green) 18%, transparent); color: var(--g17g-on-green); }
[data-g17-graphic="landingPages"] .g17g-lp-h1 { display: block; margin: .35em 0 .12em; font-size: 1.4em; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-sub { display: block; font-size: .62em; opacity: .8; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-cta {
    display: inline-flex; align-items: center; gap: .35em; height: 2.4em; margin-top: .75em; padding: 0 1.1em;
    border-radius: 999px; background: var(--g17g-card); color: var(--g17g-purple-text); font-size: .62em; font-weight: 700; white-space: nowrap;
}
[data-g17-graphic="landingPages"] .g17g-lp-cta svg { width: 1.1em; height: 1.1em; }

[data-g17-graphic="landingPages"] .g17g-lp-row { display: flex; align-items: baseline; justify-content: space-between; }
[data-g17-graphic="landingPages"] .g17g-lp-h2 { display: block; font-size: .72em; font-weight: 700; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-more { font-size: .58em; font-weight: 600; color: var(--g17g-green-text); white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: .45em; }
[data-g17-graphic="landingPages"] .g17g-lp-tile { padding: .3em .3em .5em; border-radius: .65em; box-shadow: inset 0 0 0 1px var(--g17g-border); }
[data-g17-graphic="landingPages"] .g17g-lp-img { display: grid; place-items: center; height: 2.9em; border-radius: .45em; }
[data-g17-graphic="landingPages"] .g17g-lp-img svg { width: 1.3em; height: 1.3em; }
[data-g17-graphic="landingPages"] .g17g-lp-img--green { background: var(--g17g-green-bg); color: var(--g17g-green-text); }
[data-g17-graphic="landingPages"] .g17g-lp-img--purple { background: var(--g17g-purple-bg); color: var(--g17g-purple); }
[data-g17-graphic="landingPages"] .g17g-lp-tile__name { display: block; margin: .45em .3em 0; font-size: .64em; font-weight: 700; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-tile__meta { display: block; margin: .15em .35em 0; font-size: .54em; color: var(--g17g-muted); white-space: nowrap; }

[data-g17-graphic="landingPages"] .g17g-lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: .6em .9em; border-radius: .7em; background: var(--g17g-green-tint); }
[data-g17-graphic="landingPages"] .g17g-lp-stats span { display: block; font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-stats b { display: block; font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; color: var(--g17g-green-text); }

[data-g17-graphic="landingPages"] .g17g-lp-quote { display: flex; align-items: center; gap: .7em; padding: .6em .8em; border-radius: .7em; box-shadow: inset 0 0 0 1px var(--g17g-border); }
[data-g17-graphic="landingPages"] .g17g-lp-q { display: block; font-size: .68em; font-weight: 600; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-who { display: block; margin-top: .25em; font-size: .54em; color: var(--g17g-muted); white-space: nowrap; }

[data-g17-graphic="landingPages"] .g17g-lp-acc { margin-top: .3em; }
[data-g17-graphic="landingPages"] .g17g-lp-acc span { display: flex; align-items: center; justify-content: space-between; height: 2.45em; border-bottom: 1px solid var(--g17g-rule); font-size: .62em; font-weight: 600; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-acc svg { width: 1.15em; height: 1.15em; color: var(--g17g-green); }

[data-g17-graphic="landingPages"] .g17g-lp-band { display: flex; align-items: center; justify-content: space-between; padding: .7em .9em; border-radius: .7em; background: var(--g17g-green); color: var(--g17g-on-green); }
[data-g17-graphic="landingPages"] .g17g-lp-band > span:first-child { font-size: .76em; font-weight: 800; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-band .g17g-lp-cta { margin-top: 0; color: var(--g17g-green-text); }

/* The "Add a block" picker */
[data-g17-graphic="landingPages"] .g17g-lp-find { display: flex; align-items: center; gap: .5em; height: 2.6em; padding: 0 .9em; border-radius: 999px; background: var(--g17g-soft); font-size: .62em; color: var(--g17g-faint); white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-find svg { width: 1.2em; height: 1.2em; }
[data-g17-graphic="landingPages"] .g17g-lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25em .3em; margin: .6em -.3em 0; }
[data-g17-graphic="landingPages"] .g17g-lp-item { position: relative; isolation: isolate; display: flex; align-items: center; gap: .45em; height: 3.1em; padding: 0 .5em; font-size: .58em; font-weight: 600; white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-item svg { flex: none; width: 1.45em; height: 1.45em; color: var(--g17g-purple); }
[data-g17-graphic="landingPages"] .g17g-lp-item__on { position: absolute; inset: 0; z-index: -1; border-radius: .7em; background: var(--g17g-green-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g17g-green) 50%, transparent); opacity: 0; }
[data-g17-graphic="landingPages"] .g17g-lp-plus { display: block; margin-top: .55em; padding-top: .6em; border-top: 1px solid var(--g17g-rule); font-size: .56em; font-weight: 600; color: var(--g17g-green-text); white-space: nowrap; }
[data-g17-graphic="landingPages"] .g17g-lp-ghost { position: absolute; left: .7em; top: .9em; width: 3.4em; height: 2.3em; border-radius: .4em; box-shadow: 0 .5em 1.2em var(--g17g-shadow); opacity: 0; }
[data-g17-graphic="landingPages"] .g17g-lp-ghost svg { width: 100%; height: 100%; }

/* Campaign results */
[data-g17-graphic="landingPages"] .g17g-lp-result { display: flex; align-items: flex-end; gap: 1em; }
[data-g17-graphic="landingPages"] .g17g-lp-countwrap { position: relative; flex: none; display: block; }
[data-g17-graphic="landingPages"] .g17g-lp-result .g17g-chart { flex: 1; height: 2.4em; margin: 0; gap: 6%; }