/* Styling for the US and Swiss landing pages (body.lp). Builds on the design tokens of the main
   stylesheet (/_astro/index.*.css): that Tailwind bundle only contains the classes the homepage
   uses, so landing markup uses these lp- classes instead of new utility classes.
   Contrast: off-white on the brand green is about 4.4:1, below WCAG AA for body text, so running
   text sits on dark-green panels (about 6.9:1) or off-white cards (about 6.9:1); only large
   headings sit directly on the green. */

.lp {
  --lp-max: 1180px;
  --lp-panel: var(--color-brand-dark-green, #1c604c);
  --lp-card: var(--color-brand-off-white, #f0f9f5);
  --lp-ink: var(--color-brand-dark-green, #1c604c);
  --lp-light: var(--color-brand-off-white, #f0f9f5);
  --lp-accent: var(--color-brand-yellow, #ffb405);
  --lp-radius: var(--radius-brand, 30px);
}

.lp .lp-wrap {
  width: 100%;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 640px) {
  .lp .lp-wrap { padding: 0 24px; }
}

/* the base stylesheet pads every <section>; landing sections set their own rhythm */
.lp section { padding-block: 0; }

.lp a { color: var(--lp-accent); text-decoration: underline; text-underline-offset: 3px; }
.lp a:hover { opacity: .85; }
.lp a:focus-visible,
.lp summary:focus-visible,
.lp button:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 3px; border-radius: 4px; }

/* header */
.lp .lp-header { padding-top: 32px; }
.lp .lp-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lp .lp-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.lp .lp-brand img { height: auto; width: 112px; }
.lp .lp-module { height: 34px; width: auto; }
/* Swiss header: the tariff edition's mark over the "ter" of the logo, as in the app (Headers.fs):
   from just clear of the "t" stem to the end of the "r", its foot 2 px above the lowercase letters */
.lp .lp-lockup { position: relative; display: inline-block; }
.lp .lp-lockup .lp-mark { position: absolute; left: 57.9%; top: -6%; width: 40%; height: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.lp .lp-wordmark {
  display: inline-block; background: var(--lp-card); color: var(--lp-ink); border-radius: 999px;
  padding: 6px 14px; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
@media (max-width: 600px) {
  .lp .lp-wm-sub { display: none; }
  .lp .lp-wordmark { white-space: normal; font-size: 13px; }
}
/* US header: the CompoundSure logo (white), ™ and a small "by Aster" */
.lp .lp-brand-us { gap: 6px; align-items: flex-end; color: #fff; text-decoration: none; }
.lp a.lp-brand-us img { width: 160px; height: auto; }
.lp .lp-brand-us .lp-tm { font-size: 13px; font-weight: 700; align-self: flex-start; margin-left: -2px; }
.lp .lp-brand-us .lp-by { font-size: 13px; font-weight: 600; opacity: .95; margin: 0 0 4px 8px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.5); }
@media (min-width: 1024px) { .lp a.lp-brand-us img { width: 190px; } }
.lp .lp-langs { display: flex; gap: 4px; flex-wrap: wrap; }
.lp .lp-langs a { color: #fff; text-decoration: none; padding: 8px; font-size: 15px; }
.lp .lp-langs a[aria-current="page"] { font-weight: 700; text-decoration: underline; }

@media (min-width: 1024px) {
  .lp .lp-header { padding-top: 56px; }
  .lp .lp-brand img { width: 137px; }
}

/* breadcrumbs */
.lp .lp-crumbs { margin-top: 28px; font-size: 14px; color: #fff; }
.lp .lp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.lp .lp-crumbs li + li::before { content: "›"; margin-right: 6px; }
.lp .lp-crumbs a { color: #fff; }

/* hero: large text only, directly on the green */
.lp .lp-hero { padding: 56px 0 24px; }
.lp .lp-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.lp h1 { font-size: 38px; line-height: 1.12; font-weight: 600; color: #fff; margin: 0 0 22px; max-width: 980px; }
.lp .lp-lede { font-size: 24px; line-height: 1.45; font-weight: 500; color: #fff; margin: 0 0 32px; max-width: 820px; }

@media (min-width: 1024px) {
  .lp .lp-hero { padding: 96px 0 40px; }
  .lp h1 { font-size: 64px; }
  .lp .lp-lede { font-size: 28px; }
}

.lp .lp-cta {
  display: inline-flex; align-items: center; gap: 14px; background: var(--lp-accent); color: var(--lp-ink);
  text-decoration: none; font-size: 19px; font-weight: 600; border-radius: 12px; padding: 16px 26px;
  box-shadow: 0 0 10px var(--lp-ink); transition: transform .15s;
}
.lp .lp-cta:hover { transform: scale(1.03); opacity: 1; }
.lp .lp-cta img { width: 22px; height: auto; }
.lp .lp-cta-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.lp .lp-cta-alt { color: #fff; font-size: 18px; font-weight: 600; }

/* panels: dark green background for running text */
.lp .lp-panel {
  background: var(--lp-panel); color: var(--lp-light); border-radius: var(--lp-radius);
  padding: 28px 20px; margin-top: 40px; box-shadow: 2px 2px 4px rgba(0,0,0,.18);
}
/* glass: the textured backdrop shows through, softened. Contrast stays above AA even on the
   brightest noise pixel of the brightest tone (brand green): off-white 5.3:1, panel links (#ffe8a8)
   4.7:1; the 12 px blur averages the noise, which gives more (6.1:1 and 5.6:1). */
.lp .lp-panel, .lp .lp-footer {
  background: rgba(28, 96, 76, .78);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(240, 249, 245, .14) inset, 0 24px 60px rgba(0, 0, 0, .28);
}
@media (min-width: 768px) { .lp .lp-panel { padding: 48px 56px; margin-top: 56px; } }

.lp h2 { font-size: 28px; line-height: 1.2; font-weight: 600; color: inherit; margin: 0 0 18px; }
.lp h3 { font-size: 21px; line-height: 1.3; font-weight: 600; color: inherit; margin: 0 0 10px; }
@media (min-width: 1024px) { .lp h2 { font-size: 40px; } .lp h3 { font-size: 23px; } }

.lp .lp-panel h2 + p, .lp .lp-panel h2 + .lp-intro { margin-top: 0; }
.lp p { font-size: 17px; line-height: 1.65; margin: 0 0 16px; }
.lp .lp-panel p, .lp .lp-panel li { color: var(--lp-light); }
@media (min-width: 1024px) { .lp p { font-size: 18px; } }

.lp ul.lp-list, .lp ol.lp-list { margin: 0 0 16px; padding-left: 24px; }
.lp ul.lp-list { list-style: disc; }
.lp ol.lp-list { list-style: decimal; }
.lp .lp-list li { font-size: 17px; line-height: 1.6; margin-bottom: 8px; }
@media (min-width: 1024px) { .lp .lp-list li { font-size: 18px; } }

/* cards: off-white with dark ink */
.lp .lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 24px; }
.lp .lp-card { background: var(--lp-card); color: var(--lp-ink); border-radius: 22px; padding: 24px; }
.lp .lp-card h3 { color: var(--lp-ink); }
.lp .lp-card p, .lp .lp-card li { color: var(--lp-ink); font-size: 16px; margin-bottom: 0; }
.lp .lp-card a { color: var(--lp-ink); font-weight: 600; }
.lp .lp-card .lp-card-icon { width: 44px; height: 44px; margin-bottom: 12px; }
/* a card with a screenshot spans the row: its text beside the picture */
.lp .lp-card-shot { grid-column: 1 / -1; display: grid; gap: 20px; align-items: center; }
.lp .lp-card-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .lp .lp-card-shot { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 36px; } }
/* Swiss pages: a wider page, so the product screenshots read at a useful size; running text keeps a
   comfortable line length */
body.lp-ch { --lp-max: 1360px; }
body.lp-ch .lp-panel > p, body.lp-ch details.lp-faq p, body.lp-ch .lp-hero .lp-lede { max-width: 72ch; }
body.lp-ch .lp-window { max-width: 1100px; }
body.lp-ch .lp-window-hero { max-width: 1240px; }
@media (min-width: 900px) { body.lp-ch .lp-card-shot { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); } }

/* the contact form island carries the homepage's hero sizes (30–35 px type and 94 px fields from
   1024 px up); on the landing pages it takes the page's own scale */
.lp .lp-contact form { max-width: 560px; }
.lp .lp-contact section > div.flex { gap: 28px; }
.lp .lp-contact .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px; }
.lp .lp-contact section > div.flex > div.shrink-0 { margin-left: 0; }
.lp .lp-contact form > :not([hidden]) ~ :not([hidden]) { margin-top: 28px; }
.lp .lp-contact form .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 14px; }
.lp .lp-contact form input.w-full, .lp .lp-contact form button.group { height: 54px; padding: 0 20px; font-size: 17px; }
.lp .lp-contact form button.group svg { width: 24px; height: 24px; }
.lp .lp-contact form .absolute { margin-top: 8px; }
.lp .lp-contact form .absolute .px-6 { padding: 12px 20px; font-size: 16px; }
.lp .lp-contact form label.group { gap: 14px; }
.lp .lp-contact form label.group > div { width: 24px; height: 24px; }
.lp .lp-contact form label.group > div svg { width: 100%; height: 100%; }
.lp .lp-contact form label.group > span { font-size: 15px; line-height: 1.55; }
.lp .lp-contact form button[type="submit"] { height: 56px; padding: 0 22px; font-size: 18px; }
.lp .lp-contact form button[type="submit"] img { width: 20px; }

/* the same contact form on the homepages (outside the landing pages): smaller than its 94 px hero fields,
   still at the homepage's scale */
body:not(.lp) #contact form { max-width: 600px; }
body:not(.lp) #contact form > :not([hidden]) ~ :not([hidden]) { margin-top: 32px; }
body:not(.lp) #contact form .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; }
body:not(.lp) #contact form input.w-full, body:not(.lp) #contact form button.group { height: 60px; padding: 0 24px; font-size: 19px; }
body:not(.lp) #contact form button.group svg { width: 26px; height: 26px; }
body:not(.lp) #contact form .absolute { margin-top: 8px; }
body:not(.lp) #contact form .absolute .px-6 { padding: 13px 24px; font-size: 17px; }
body:not(.lp) #contact form label.group { gap: 16px; }
body:not(.lp) #contact form label.group > div { width: 26px; height: 26px; }
body:not(.lp) #contact form label.group > div svg { width: 100%; height: 100%; }
body:not(.lp) #contact form label.group > span { font-size: 17px; line-height: 1.55; }
body:not(.lp) #contact form button[type="submit"] { height: 62px; padding: 0 24px; font-size: 20px; }
body:not(.lp) #contact form button[type="submit"] img { width: 22px; }

/* text-card grids (ch.py text_cards): one column on a phone, two from 640 px, three from 1100 px when
   the cards come in threes (lp-g3); a card left alone on its row spans it (lp-alone2 / lp-alone3) */
.lp .lp-grid.lp-g2, .lp .lp-grid.lp-g3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .lp .lp-grid.lp-g2, .lp .lp-grid.lp-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp .lp-grid .lp-alone2 { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .lp .lp-grid.lp-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp .lp-grid.lp-g3 .lp-alone2 { grid-column: auto; }
  .lp .lp-grid.lp-g3 .lp-alone3 { grid-column: 1 / -1; }
}
.lp .lp-grid .lp-card h3 { margin-top: 0; }
.lp .lp-card h3 + p { margin-bottom: 0; }
/* what the software does about the rule above it: set apart, with a check */
.lp .lp-card p.lp-does { position: relative; margin-top: 14px; padding: 12px 0 0 32px; border-top: 1px solid var(--lp-line, rgba(0, 0, 0, .12)); font-weight: 600; }
.lp .lp-card p.lp-does::before { content: ""; position: absolute; left: 0; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--lp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* ---- live icons (scripts/landing/live_icons.py): small scenes that loop while their card is on
   screen (motion.js adds lv-on); every keyframe set starts and ends on the resting scene ---------- */
.lp .lp-lv { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; margin: 0 0 18px; background: var(--lp-tint, #e3f1ea); }
.lp .lv { width: 66px; height: 66px; overflow: visible; --lv-ink: #1c604c; --lv-accent: #ffb405; --lv-soft: #98bdac; --lv-paper: #fff; --lv-d: 5s; }
body.lp-ch .lv { --lv-ink: var(--lp-ink); --lv-accent: var(--lp-accent); --lv-soft: #d9cfc2; }
.lv .k { fill: var(--lv-ink); } .lv .r { fill: var(--lv-accent); } .lv .s { fill: var(--lv-soft); } .lv .p { fill: var(--lv-paper); }
.lv .ko, .lv .ro, .lv .so, .lv .po { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lv .ko { stroke: var(--lv-ink); } .lv .ro { stroke: var(--lv-accent); } .lv .so { stroke: var(--lv-soft); } .lv .po { stroke: var(--lv-paper); }
.lv .w2 { stroke-width: 2.5; } .lv .w4 { stroke-width: 4; } .lv .w6 { stroke-width: 6; }
.lv .dr { stroke-dasharray: 1 1; }
.lv *:not([transform]) { transform-box: fill-box; transform-origin: 50% 50%; }
.lv * { animation-duration: var(--lv-d); animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .2, 1); animation-fill-mode: both; animation-play-state: paused; }
.lv.lv-on * { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .lv * { animation: none !important; } }

/* shared moves */
@keyframes lv-pop { 0%, 6% { transform: none; } 9%, 44% { transform: scale(0); } 54% { transform: scale(1.22); } 60%, 100% { transform: none; } }
@keyframes lv-ok { 0%, 4% { transform: none; } 7%, 34% { transform: scale(0); } 42% { transform: scale(1.2); } 48%, 100% { transform: none; } }
@keyframes lv-ok-late { 0%, 6% { transform: none; } 9%, 48% { transform: scale(0); } 56% { transform: scale(1.2); } 62%, 100% { transform: none; } }
@keyframes lv-tick { 0%, 4% { stroke-dashoffset: 0; } 7%, 42% { stroke-dashoffset: 1; } 56%, 100% { stroke-dashoffset: 0; } }
@keyframes lv-tick-late { 0%, 6% { stroke-dashoffset: 0; } 9%, 56% { stroke-dashoffset: 1; } 68%, 100% { stroke-dashoffset: 0; } }
@keyframes lv-draw { 0%, 6% { stroke-dashoffset: 0; } 9% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes lv-grow { 0%, 6% { transform: none; } 9%, 12% { transform: scaleY(0); } 28% { transform: scaleY(1.06); } 34%, 100% { transform: none; } }
@keyframes lv-widen { 0%, 6% { transform: none; } 9%, 14% { transform: scaleX(0); } 28%, 100% { transform: none; } }
@keyframes lv-blink { 0%, 10% { opacity: 1; } 14% { opacity: .2; } 18% { opacity: 1; } 22% { opacity: .2; } 26% { opacity: 1; } 30% { opacity: .2; } 34%, 100% { opacity: 1; } }
@keyframes lv-sway { 0%, 100% { transform: none; } 50% { transform: rotate(6deg); } }
@keyframes lv-spin { to { transform: rotate(360deg); } }
@keyframes lv-twinkle { 0%, 100% { transform: scale(.35); opacity: .25; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes lv-rise { 0% { transform: none; opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }
@keyframes lv-wave { to { transform: translateX(-40px); } }

/* price: the receipt prints, the total lights, a coin drops and turns */
.lv-price .pr-paper { animation-name: lv-pr-paper; }
@keyframes lv-pr-paper { 0%, 6% { transform: none; } 9%, 13% { transform: translateY(-52px); } 36%, 100% { transform: none; } }
.lv-price .pr-l { transform-origin: 0 50%; animation-name: lv-pr-line; } .lv-price .pr-l2 { animation-delay: .25s; } .lv-price .pr-l3 { animation-delay: .5s; }
@keyframes lv-pr-line { 0%, 6% { transform: none; } 9%, 30% { transform: scaleX(0); } 42%, 100% { transform: none; } }
.lv-price .pr-tot { animation-name: lv-pr-tot; }
@keyframes lv-pr-tot { 0%, 6% { transform: none; opacity: 1; } 9%, 46% { transform: scale(.4); opacity: 0; } 54% { transform: scale(1.2); opacity: 1; } 60%, 100% { transform: none; } }
.lv-price .pr-led { animation-name: lv-blink; }
.lv-price .pr-coin { animation-name: lv-pr-coin; }
@keyframes lv-pr-coin { 0%, 6% { transform: none; opacity: 1; } 9%, 56% { transform: translateY(-50px); opacity: 0; } 66% { transform: none; opacity: 1; } 70% { transform: translateY(-6px); } 74% { transform: none; } 80% { transform: scaleX(.12); } 86%, 100% { transform: none; } }

/* bands: the beaker fills, the waves roll, the bands light up */
.lv-bands .bd-wave, .lv-bands .bd-wave2 { animation-name: lv-wave; animation-duration: 2.6s; animation-timing-function: linear; }
.lv-bands .bd-wave2 { animation-duration: 3.6s; }
.lv-bands .bd-level { animation-name: lv-bd-level; }
@keyframes lv-bd-level { 0%, 6% { transform: none; } 10% { transform: translateY(26px); } 60%, 100% { transform: none; } }
.lv-bands .bd-b { animation-name: lv-rise; animation-duration: 2.2s; animation-timing-function: ease-in; }
.lv-bands .bd-b2 { animation-delay: .7s; } .lv-bands .bd-b3 { animation-delay: 1.4s; }
.lv-bands .bd-t { transform-origin: 0 50%; animation-name: lv-bd-tick; } .lv-bands .bd-t2 { animation-delay: .5s; } .lv-bands .bd-t3 { animation-delay: 1s; }
@keyframes lv-bd-tick { 0%, 14% { fill: var(--lv-ink); transform: none; } 22% { fill: var(--lv-accent); transform: scaleX(1.25); } 30%, 80% { fill: var(--lv-accent); transform: none; } 92%, 100% { fill: var(--lv-ink); } }

/* containers: two jars land, lids close, the times badge pops */
.lv-containers { --lv-d: 4.8s; }
.lv-containers .ct-j { animation-name: lv-drop; } .lv-containers .ct-j2 { animation-delay: .45s; }
@keyframes lv-drop { 0%, 6% { transform: none; opacity: 1; } 9% { transform: translateY(-34px); opacity: 0; } 22% { transform: translateY(2px); opacity: 1; } 26% { transform: translateY(-3px); } 30%, 100% { transform: none; } }
.lv-containers .ct-lid { transform-origin: 0 100%; animation-name: lv-ct-lid; } .lv-containers .ct-lid2 { animation-delay: .45s; }
@keyframes lv-ct-lid { 0%, 6% { transform: none; } 9%, 30% { transform: translate(-2px, -8px) rotate(-28deg); } 40%, 100% { transform: none; } }
.lv-containers .ct-badge { animation-name: lv-pop; }

/* mortar: the pestle grinds, powder puffs, tax points stack */
.lv-mortar .mo-pestle { animation-name: lv-grind; animation-duration: 1.6s; animation-timing-function: linear; }
@keyframes lv-grind { 0%, 100% { transform: none; } 25% { transform: translate(-6px, 3px) rotate(-5deg); } 50% { transform: translate(-12px, 1px) rotate(-9deg); } 75% { transform: translate(-6px, -2px) rotate(-4deg); } }
.lv-mortar .mo-p { animation-name: lv-puff; animation-duration: 1.6s; animation-timing-function: ease-out; }
.lv-mortar .mo-p2 { animation-delay: .5s; } .lv-mortar .mo-p3 { animation-delay: 1s; }
@keyframes lv-puff { 0% { transform: translateY(4px) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px) scale(1.3); opacity: 0; } }
.lv-mortar .mo-c { animation-name: lv-pop; animation-duration: 4s; } .lv-mortar .mo-c2 { animation-delay: .3s; } .lv-mortar .mo-c3 { animation-delay: .6s; }

/* SL specialty: the laser reads the GTIN, a tablet leaves the blister, priced per unit */
.lv-sl { --lv-d: 4.6s; }
.lv-sl .sl-laser { animation-name: lv-sl-laser; }
@keyframes lv-sl-laser { 0%, 4% { transform: none; opacity: 0; } 8% { opacity: 1; transform: translateY(-7px); } 24% { transform: translateY(8px); } 30% { opacity: 1; transform: translateY(-4px); } 36%, 100% { opacity: 0; transform: none; } }
.lv-sl .sl-pill { animation-name: lv-sl-pill; }
@keyframes lv-sl-pill { 0%, 36% { transform: none; opacity: 1; } 50% { transform: translate(14px, 16px) scale(1.1); } 64% { transform: translate(27px, 25px) scale(.6); opacity: 0; } 70% { transform: none; opacity: 0; } 82%, 100% { transform: none; opacity: 1; } }
.lv-sl .sl-div { animation-name: lv-pop; }

/* estimate: the asterisk turns, the estimate slides within its range */
.lv-estimate { --lv-d: 4.4s; }
.lv-estimate .es-ast { animation-name: lv-es-ast; }
@keyframes lv-es-ast { 0%, 10% { transform: none; } 30% { transform: rotate(60deg) scale(1.15); } 40%, 60% { transform: rotate(60deg); } 80%, 100% { transform: rotate(120deg); } }
.lv-estimate .es-mark { animation-name: lv-es-mark; }
@keyframes lv-es-mark { 0%, 100% { transform: none; } 25% { transform: translateX(-26px); } 55% { transform: translateX(24px); } 75% { transform: translateX(-6px); } }

/* risk: the factors light up, the needle sweeps and settles (low and high variants settle elsewhere) */
.lv-risk { --lv-d: 5.2s; --rk: 42deg; } .lv-risk-low { --rk: -48deg; } .lv-risk-high { --rk: 66deg; }
.lv-risk .rk-needle { transform-box: view-box; transform-origin: 48px 64px; transform: rotate(var(--rk)); animation-name: lv-rk-needle; }
@keyframes lv-rk-needle { 0%, 6% { transform: rotate(var(--rk)); } 10% { transform: rotate(-88deg); } 34% { transform: rotate(calc(var(--rk) + 14deg)); } 40% { transform: rotate(calc(var(--rk) - 5deg)); } 46%, 100% { transform: rotate(var(--rk)); } }
.lv-risk .rk-f { animation-name: lv-rk-f; } .lv-risk .rk-f2 { animation-delay: .15s; } .lv-risk .rk-f3 { animation-delay: .3s; } .lv-risk .rk-f4 { animation-delay: .45s; } .lv-risk .rk-f5 { animation-delay: .6s; }
@keyframes lv-rk-f { 0%, 8% { fill: var(--lv-soft); transform: none; } 14% { fill: var(--lv-accent); transform: scale(1.35); } 20%, 86% { fill: var(--lv-ink); transform: none; } 96%, 100% { fill: var(--lv-soft); } }
.lv-risk .rk-haz { opacity: 0; } .lv-risk-high .rk-haz { opacity: 1; animation-name: lv-haz; }
@keyframes lv-haz { 0%, 40% { transform: none; } 46% { transform: scale(1.25); } 52% { transform: none; } 58% { transform: scale(1.15); } 64%, 100% { transform: none; } }

/* scale: the vial lands, the pan gives, the display settles, the reading enters the tolerance */
.lv-scale { --lv-d: 4.8s; }
.lv-scale .sc-load { animation-name: lv-sc-load; }
@keyframes lv-sc-load { 0%, 6% { transform: none; opacity: 1; } 10% { transform: translateY(-26px); opacity: 0; } 24% { transform: translateY(1px); opacity: 1; } 28%, 100% { transform: none; } }
.lv-scale .sc-pan { animation-name: lv-sc-pan; }
@keyframes lv-sc-pan { 0%, 22% { transform: none; } 25% { transform: translateY(3px); } 30%, 100% { transform: none; } }
.lv-scale .sc-d { transform-origin: 50% 100%; animation-name: lv-sc-digit; } .lv-scale .sc-d2 { animation-delay: .1s; } .lv-scale .sc-d3 { animation-delay: .2s; }
@keyframes lv-sc-digit { 0%, 24% { transform: none; } 27% { transform: scaleY(.4); } 30% { transform: scaleY(1.1); } 33% { transform: scaleY(.6); } 36% { transform: scaleY(.9); } 40%, 100% { transform: none; } }
.lv-scale .sc-mark { animation-name: lv-sc-mark; }
@keyframes lv-sc-mark { 0%, 6% { transform: none; } 12% { transform: translateX(-30px); } 30% { transform: translateX(16px); } 38% { transform: translateX(-5px); } 44%, 100% { transform: none; } }

/* lot: the laser reads the label, the check comes up */
.lv-lot { --lv-d: 4.4s; }
.lv-lot .lt-laser { animation-name: lv-lt-laser; }
@keyframes lv-lt-laser { 0%, 4% { transform: none; opacity: 0; } 8% { opacity: 1; transform: translateY(-13px); } 28% { transform: translateY(13px); opacity: 1; } 34%, 100% { transform: none; opacity: 0; } }
.lv-lot .lt-ok { animation-name: lv-ok; } .lv-lot .lt-tick { animation-name: lv-tick; }

/* approved: the stamp comes down, the seal stays, its check draws */
.lv-approved .ap-stamp { transform: translate(26px, -24px) rotate(12deg); animation-name: lv-ap-stamp; }
@keyframes lv-ap-stamp { 0%, 8% { transform: translate(26px, -24px) rotate(12deg); } 24% { transform: translate(0, 4px); } 28% { transform: translate(0, 8px) scale(.96, .9); } 34% { transform: none; } 48%, 100% { transform: translate(26px, -24px) rotate(12deg); } }
.lv-approved .ap-seal { animation-name: lv-ap-seal; }
@keyframes lv-ap-seal { 0%, 8% { opacity: 1; transform: none; } 12%, 27% { opacity: 0; transform: scale(1.3); } 32% { opacity: 1; transform: scale(1.12); } 38%, 100% { opacity: 1; transform: none; } }
.lv-approved .ap-tick { animation-name: lv-ap-tick; }
@keyframes lv-ap-tick { 0%, 8% { stroke-dashoffset: 0; } 12%, 36% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }

/* trituration: the active substance travels along the arc into its jar */
.lv-trituration .tr-d { animation-name: lv-tr-arc; animation-duration: 2.4s; animation-timing-function: linear; }
.lv-trituration .tr-d2 { animation-delay: .6s; } .lv-trituration .tr-d3 { animation-delay: 1.2s; } .lv-trituration .tr-d4 { animation-delay: 1.8s; }
@keyframes lv-tr-arc { 0% { transform: none; opacity: 0; } 8% { opacity: 1; } 25% { transform: translate(11px, -16px); } 50% { transform: translate(23px, -22px); } 75% { transform: translate(35px, -18px); } 92% { opacity: 1; } 100% { transform: translate(48px, -6px); opacity: 0; } }
.lv-trituration .tr-ratio { transform-origin: 50% 100%; animation-name: lv-tr-ratio; animation-duration: 2.4s; }
@keyframes lv-tr-ratio { 0%, 100% { transform: none; } 50% { transform: scaleY(.6); } }

/* capsules: each unit is weighed, its bar lands inside the band */
.lv-capsules { --lv-d: 4.8s; }
.lv-capsules .cp-b { transform-origin: 50% 100%; animation-name: lv-grow; }
.lv-capsules .cp-b2 { animation-delay: .12s; } .lv-capsules .cp-b3 { animation-delay: .24s; } .lv-capsules .cp-b4 { animation-delay: .36s; } .lv-capsules .cp-b5 { animation-delay: .48s; }
.lv-capsules .cp-cap { animation-name: lv-cp-cap; animation-duration: 2.4s; }
@keyframes lv-cp-cap { 0%, 100% { transform: none; } 30% { transform: translateY(-3px) rotate(-14deg); } 60% { transform: rotate(10deg); } }

/* label: the printer feeds the label out, its LED blinks */
.lv-label .lb-label { animation-name: lv-lb-label; }
@keyframes lv-lb-label { 0%, 6% { transform: none; } 9%, 14% { transform: translateY(42px); } 40% { transform: translateY(-2px); } 46%, 100% { transform: none; } }
.lv-label .lb-led { animation-name: lv-blink; }

/* record: each line is written, the page is signed off */
.lv-record { --lv-d: 5.4s; }
.lv-record .rc-l { transform-origin: 0 50%; animation-name: lv-widen; }
.lv-record .rc-l2 { animation-delay: .2s; } .lv-record .rc-l3 { animation-delay: .4s; } .lv-record .rc-l4 { animation-delay: .6s; } .lv-record .rc-l5 { animation-delay: .8s; }
.lv-record .rc-page { animation-name: lv-rc-page; }
@keyframes lv-rc-page { 0%, 6% { transform: none; } 9% { transform: translate(-4px, 4px) rotate(-3deg); } 20%, 100% { transform: none; } }
.lv-record .rc-ok { animation-name: lv-ok-late; } .lv-record .rc-tick { animation-name: lv-tick-late; }

/* audit: entries arrive on the timeline, the clock keeps turning */
.lv-audit { --lv-d: 6s; }
.lv-audit .au-line { animation-name: lv-draw; }
.lv-audit .au-n { animation-name: lv-au-n; } .lv-audit .au-n2 { animation-delay: 1s; } .lv-audit .au-n3 { animation-delay: 2s; }
@keyframes lv-au-n { 0%, 6% { transform: none; } 9%, 14% { transform: scale(0); } 20% { transform: scale(1.3); } 24%, 100% { transform: none; } }
.lv-audit .au-e { transform-origin: 0 50%; animation-name: lv-widen; } .lv-audit .au-e2 { animation-delay: 1s; } .lv-audit .au-e3 { animation-delay: 2s; }
.lv-audit .au-hand { transform-box: view-box; transform-origin: 76px 24px; animation-name: lv-spin; animation-duration: 3s; animation-timing-function: linear; }

/* trace: pulses run from the lot through the preparation to its uses */
.lv-trace { --lv-d: 3.2s; }
.lv-trace .tc-p { animation-name: lv-tc-1; }
@keyframes lv-tc-1 { 0% { transform: none; opacity: 0; } 5% { opacity: 1; } 30% { transform: translate(30px, 28px); opacity: 1; } 34%, 100% { transform: translate(30px, 28px); opacity: 0; } }
.lv-trace .tc-p2 { animation-name: lv-tc-2; }
@keyframes lv-tc-2 { 0%, 30% { transform: none; opacity: 0; } 34% { opacity: 1; } 62% { transform: translate(32px, -20px); opacity: 1; } 66%, 100% { transform: translate(32px, -20px); opacity: 0; } }
.lv-trace .tc-p3 { animation-name: lv-tc-3; }
@keyframes lv-tc-3 { 0%, 30% { transform: none; opacity: 0; } 34% { opacity: 1; } 62% { transform: translate(30px, 26px); opacity: 1; } 66%, 100% { transform: translate(30px, 26px); opacity: 0; } }
.lv-trace .tc-p4 { animation-name: lv-tc-4; }
@keyframes lv-tc-4 { 0%, 30% { transform: none; opacity: 0; } 34% { opacity: 1; } 62% { transform: translate(-28px, 30px); opacity: 1; } 66%, 100% { transform: translate(-28px, 30px); opacity: 0; } }
.lv-trace .tc-ping { animation-name: lv-tc-ping; }
@keyframes lv-tc-ping { 0%, 28% { transform: none; opacity: 0; } 30% { opacity: .9; } 60%, 100% { transform: scale(2.2); opacity: 0; } }
.lv-trace .tc-n { animation-name: lv-tc-n; }
@keyframes lv-tc-n { 0%, 60% { transform: none; } 66% { transform: scale(1.3); } 72%, 100% { transform: none; } }

/* release: the seal is struck, its check draws, sparks around it */
.lv-release .rl-badge { animation-name: lv-rl-badge; }
@keyframes lv-rl-badge { 0%, 6% { transform: none; } 9%, 12% { transform: scale(.4); } 24% { transform: scale(1.1); } 30%, 100% { transform: none; } }
.lv-release .rl-tick { animation-name: lv-rl-tick; }
@keyframes lv-rl-tick { 0%, 6% { stroke-dashoffset: 0; } 9%, 26% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
.lv-release .rl-tail { transform-origin: 50% 0; animation-name: lv-sway; animation-duration: 2.6s; } .lv-release .rl-tail2 { animation-delay: .3s; }
.lv-release .rl-sp { animation-name: lv-twinkle; animation-duration: 2.4s; } .lv-release .rl-sp2 { animation-delay: .8s; } .lv-release .rl-sp3 { animation-delay: 1.6s; }

/* narcotics: the lock closes, the stock is weighed down, two people sign */
.lv-narcotics .nc-shackle { animation-name: lv-nc-shackle; }
@keyframes lv-nc-shackle { 0%, 6% { transform: none; } 12%, 30% { transform: translateY(-10px); } 36% { transform: translateY(1px); } 40%, 100% { transform: none; } }
.lv-narcotics .nc-lock { animation-name: lv-nc-lock; }
@keyframes lv-nc-lock { 0%, 34% { transform: none; } 37% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 43%, 100% { transform: none; } }
.lv-narcotics .nc-level { transform-origin: 50% 100%; animation-name: lv-nc-level; }
@keyframes lv-nc-level { 0%, 46% { transform: none; } 56%, 84% { transform: scaleY(.6); } 94%, 100% { transform: none; } }
.lv-narcotics .nc-w { animation-name: lv-pop; } .lv-narcotics .nc-w2 { animation-delay: .3s; }

/* calendar: the sheet is torn off, the day under it is marked */
.lv-calendar .cl-sheet { transform-origin: 50% 0; animation-name: lv-cl-sheet; }
@keyframes lv-cl-sheet { 0%, 10% { transform: none; opacity: 1; } 24% { transform: translateY(-4px) scaleY(.05) skewX(-12deg); opacity: .4; } 25%, 86% { transform: scaleY(.05); opacity: 0; } 96%, 100% { transform: none; opacity: 1; } }
.lv-calendar .cl-day { animation-name: lv-cl-day; }
@keyframes lv-cl-day { 0%, 24% { transform: none; } 32% { transform: scale(1.4); } 38%, 100% { transform: none; } }
.lv-calendar-2 .cl-sheet, .lv-calendar-2 .cl-day { animation-delay: 1.2s; }

/* coin: the coin turns, the stack grows */
.lv-coin { --lv-d: 4.2s; }
.lv-coin .cn-spin { animation-name: lv-cn-spin; }
@keyframes lv-cn-spin { 0%, 10% { transform: none; } 22% { transform: scaleX(.08); } 34% { transform: none; } 46% { transform: scaleX(.08); } 58%, 100% { transform: none; } }
.lv-coin .cn-top { animation-name: lv-cn-top; }
@keyframes lv-cn-top { 0%, 60% { transform: none; opacity: 1; } 64% { transform: translateY(-18px); opacity: 0; } 76% { transform: translateY(1px); opacity: 1; } 80%, 100% { transform: none; } }
.lv-coin .cn-sp { animation-name: lv-twinkle; animation-duration: 2.2s; }

/* book: a page turns over the spine, the bookmark sways */
.lv-book { --lv-d: 5.4s; }
.lv-book .bk-flip { transform-origin: 0 50%; animation-name: lv-bk-flip; }
@keyframes lv-bk-flip { 0%, 12% { transform: none; opacity: 1; } 36% { transform: scaleX(-1); opacity: 1; } 40%, 88% { transform: scaleX(-1); opacity: 0; } 89% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
.lv-book .bk-mark { transform-origin: 50% 0; animation-name: lv-sway; animation-duration: 2.8s; }

/* update: the arrows turn round the document, the update drops in */
.lv-update .up-ring { animation-name: lv-spin; animation-duration: 6s; animation-timing-function: linear; }
.lv-update .up-in { animation-name: lv-up-in; animation-duration: 3s; }
@keyframes lv-up-in { 0% { transform: none; opacity: 1; } 40% { transform: translateY(10px); opacity: 0; } 41% { transform: translateY(-10px); opacity: 0; } 70%, 100% { transform: none; opacity: 1; } }
.lv-update .up-new { transform-origin: 0 50%; animation-name: lv-up-new; animation-duration: 3s; }
@keyframes lv-up-new { 0%, 40% { transform: none; } 44% { transform: scaleX(0); } 60%, 100% { transform: none; } }

/* steps: the price rises in proportion, then holds at the next band */
.lv-steps .st-line { animation-name: lv-st-line; }
@keyframes lv-st-line { 0%, 6% { stroke-dashoffset: 0; } 9% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
.lv-steps .st-dot { animation-name: lv-st-dot; animation-timing-function: linear; }
@keyframes lv-st-dot { 0%, 9% { transform: none; opacity: 1; } 22% { transform: translate(16px, -18px); } 32% { transform: translate(30px, -18px); } 46% { transform: translate(46px, -36px); } 54% { transform: translate(56px, -36px); } 68%, 88% { transform: translate(68px, -54px); opacity: 1; } 94% { transform: translate(68px, -54px); opacity: 0; } 95% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }

/* large quantities: bars grow past their mark, the caps press them back */
.lv-large .lg-b { transform-origin: 50% 100%; animation-name: lv-grow; }
.lv-large .lg-b2, .lv-large .lg-b3 { animation-name: lv-lg-b; } .lv-large .lg-b2 { animation-delay: .2s; } .lv-large .lg-b3 { animation-delay: .4s; }
@keyframes lv-lg-b { 0%, 6% { transform: none; } 9% { transform: scaleY(.1); } 30%, 42% { transform: scaleY(1.2); } 50%, 100% { transform: none; } }
.lv-large .lg-c { animation-name: lv-lg-c; } .lv-large .lg-c3 { animation-delay: .2s; }
@keyframes lv-lg-c { 0%, 6% { transform: none; opacity: 1; } 9%, 30% { transform: translateY(-16px); opacity: 0; } 38% { transform: translateY(-10px); opacity: 1; } 50% { transform: translateY(1px); } 54%, 100% { transform: none; } }

/* series: the moulds fill one by one, the series counter runs, the surcharge is added */
.lv-series .sr-f { transform-origin: 50% 100%; animation-name: lv-grow; }
.lv-series .sr-f2 { animation-delay: .2s; } .lv-series .sr-f3 { animation-delay: .4s; } .lv-series .sr-f4 { animation-delay: .6s; } .lv-series .sr-f5 { animation-delay: .8s; }
.lv-series .sr-bar { transform-origin: 0 50%; animation-name: lv-sr-bar; }
@keyframes lv-sr-bar { 0%, 6% { transform: none; } 9% { transform: scaleX(0); } 50%, 100% { transform: none; } }
.lv-series .sr-chip { animation-name: lv-ok-late; }

/* rule 1.1: the ring moves to the cheaper pack, a coin lands on it */
.lv-pack { --lv-d: 4.6s; }
.lv-pack .pk-ring { animation-name: lv-pk-ring; }
@keyframes lv-pk-ring { 0%, 6% { transform: none; } 10%, 24% { transform: translateX(-43px) scale(1.12, 1.16); } 38% { transform: scale(.94); } 44%, 100% { transform: none; } }
.lv-pack .pk-coin { animation-name: lv-pk-coin; }
@keyframes lv-pk-coin { 0%, 40% { transform: none; opacity: 1; } 44% { transform: translateY(-18px); opacity: 0; } 58% { transform: translateY(2px); opacity: 1; } 62%, 100% { transform: none; } }

/* factors: five factors pop, the times signs appear, the score comes out */
.lv-factors { --lv-d: 5.4s; }
.lv-factors .ft-c { animation-name: lv-ft-c; }
.lv-factors .ft-c2 { animation-delay: .12s; } .lv-factors .ft-c3 { animation-delay: .24s; } .lv-factors .ft-c4 { animation-delay: .36s; } .lv-factors .ft-c5 { animation-delay: .48s; }
@keyframes lv-ft-c { 0%, 6% { transform: none; } 9%, 12% { transform: scale(0); } 20% { transform: scale(1.2); } 26%, 100% { transform: none; } }
.lv-factors .ft-x { animation-name: lv-ft-x; }
@keyframes lv-ft-x { 0%, 6% { opacity: 1; } 9%, 30% { opacity: 0; } 40%, 100% { opacity: 1; } }
.lv-factors .ft-res { animation-name: lv-ft-res; }
@keyframes lv-ft-res { 0%, 6% { transform: none; } 9%, 42% { transform: scale(0); } 52% { transform: scale(1.18); } 58%, 100% { transform: none; } }

/* folder: one file per preparation drops in */
.lv-folder { --lv-d: 4.8s; }
.lv-folder .kv-f { animation-name: lv-kv-f; } .lv-folder .kv-f2 { animation-delay: .5s; }
@keyframes lv-kv-f { 0%, 6% { transform: none; opacity: 1; } 9% { transform: translateY(-26px); opacity: 0; } 26% { transform: translateY(4px); opacity: 1; } 32%, 100% { transform: none; } }

/* stats: the bars rise, the trend draws over them */
.lv-stats .sa-b { transform-origin: 50% 100%; animation-name: lv-grow; }
.lv-stats .sa-b2 { animation-delay: .1s; } .lv-stats .sa-b3 { animation-delay: .2s; } .lv-stats .sa-b4 { animation-delay: .3s; }
.lv-stats .sa-line { animation-name: lv-sa-line; }
@keyframes lv-sa-line { 0%, 6% { stroke-dashoffset: 0; } 9%, 28% { stroke-dashoffset: 1; } 52%, 100% { stroke-dashoffset: 0; } }
.lv-stats .sa-dot { animation-name: lv-ok-late; }

/* threshold: the knob is moved and settles on its value */
.lv-threshold .th-knob { animation-name: lv-th-knob; }
@keyframes lv-th-knob { 0%, 6% { transform: none; } 18% { transform: translateX(-34px); } 36% { transform: translateX(18px); } 46% { transform: translateX(-4px); } 54%, 100% { transform: none; } }
.lv-threshold .th-fill { transform-origin: 0 50%; animation-name: lv-th-fill; }
@keyframes lv-th-fill { 0%, 6% { transform: none; } 18% { transform: scaleX(.32); } 36% { transform: scaleX(1.36); } 46% { transform: scaleX(.92); } 54%, 100% { transform: none; } }
.lv-threshold .th-flag { transform-origin: 0 100%; animation-name: lv-sway; animation-duration: 2.4s; }

/* ---- glass ribbons and bubbles down the page (ch.py floats), half behind the panels ----------- */
.lp .lp-wrap:has(> .lp-floats) { position: relative; }
.lp .lp-wrap:has(> .lp-floats) > :not(.lp-floats) { position: relative; z-index: 1; }
.lp .lp-floats { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp .lp-float { position: absolute; height: auto; will-change: transform; opacity: var(--fo, .5);
  filter: blur(var(--fb, 0px)) drop-shadow(0 14px 24px rgba(60, 40, 20, .12)); }
/* each shape comes into focus the first time it scrolls into view (motion.js adds is-in) */
.motion .lp .lp-float { opacity: 0; filter: blur(14px) drop-shadow(0 14px 24px rgba(60, 40, 20, .12)); transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1), filter 1.6s cubic-bezier(.16, 1, .3, 1); }
.motion .lp .lp-float.is-in { opacity: var(--fo, .5); filter: blur(var(--fb, 0px)) drop-shadow(0 14px 24px rgba(60, 40, 20, .12)); }
@media (max-width: 899px) { .lp .lp-floats { display: none; } }
@media print { .lp .lp-floats { display: none; } }

/* steps */
.lp ol.lp-steps { list-style: none; counter-reset: step; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.lp ol.lp-steps > li { counter-increment: step; position: relative; padding: 18px 20px 18px 72px; background: rgba(0,0,0,.16); border-radius: 18px; }
.lp ol.lp-steps > li::before {
  content: counter(step); position: absolute; left: 20px; top: 16px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--lp-accent); color: var(--lp-ink); font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.lp ol.lp-steps h3 { margin-bottom: 4px; }
.lp ol.lp-steps p { margin: 0; }

/* tables */
.lp .lp-table-scroll { overflow-x: auto; margin-top: 20px; border-radius: 18px; }
.lp table.lp-table { width: 100%; border-collapse: collapse; background: var(--lp-card); color: var(--lp-ink); font-size: 15px; line-height: 1.5; }
.lp table.lp-table caption { text-align: left; font-weight: 600; padding: 0 0 10px; color: var(--lp-light); }
.lp table.lp-table th, .lp table.lp-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid rgba(28,96,76,.18); }
.lp table.lp-table thead th { background: #dcefe6; font-weight: 700; position: sticky; top: 0; }
.lp table.lp-table tbody th { font-weight: 600; white-space: nowrap; }
.lp table.lp-table a { color: var(--lp-ink); }
.lp table.lp-table td.lp-yes::before { content: "✓ "; font-weight: 700; }
.lp table.lp-table tr:target { outline: 3px solid var(--lp-accent); outline-offset: -3px; }
@media (min-width: 1024px) { .lp table.lp-table { font-size: 16px; } }

/* screenshots */
.lp .lp-shot { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.lp figure { margin: 24px 0 0; }
.lp figcaption { font-size: 15px; margin-top: 10px; opacity: .9; }
.lp .lp-two { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .lp .lp-two { grid-template-columns: 1fr 1fr; } }

/* FAQ */
.lp details.lp-faq { border-top: 1px solid rgba(240,249,245,.25); padding: 14px 0; }
.lp details.lp-faq:last-of-type { border-bottom: 1px solid rgba(240,249,245,.25); }
.lp details.lp-faq summary { cursor: pointer; font-size: 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.lp details.lp-faq summary::-webkit-details-marker { display: none; }
.lp details.lp-faq summary::after { content: "+"; font-size: 24px; line-height: 1; }
.lp details.lp-faq[open] summary::after { content: "–"; }
.lp details.lp-faq p { margin: 12px 0 0; }

/* sources and notes */
.lp .lp-sources { font-size: 15px; padding-left: 20px; list-style: decimal; }
.lp .lp-sources li { font-size: 15px; margin-bottom: 6px; }
.lp .lp-asof { font-size: 14px; }
.lp .lp-callout { border-left: 4px solid var(--lp-accent); padding: 12px 16px; background: rgba(0,0,0,.16); border-radius: 0 12px 12px 0; margin: 20px 0; }
.lp .lp-callout p:last-child { margin-bottom: 0; }

/* contact form island sits on the green like on the homepage */
.lp .lp-contact { margin-top: 56px; }

/* footer: dark green so the small legal text keeps AA contrast */
.lp .lp-footer { margin-top: 72px; color: var(--lp-light); padding: 40px 0 48px; }
.lp .lp-footer p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; opacity: 1; }
.lp .lp-footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.lp .lp-footer nav a, .lp .lp-footer nav button { color: var(--lp-light); font-size: 15px; }
.lp .lp-footer nav button { background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.lp .lp-footer .lp-notes { border-top: 1px solid rgba(240,249,245,.25); margin-top: 22px; padding-top: 18px; }

.lp .lp-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the landing copy of the contact form keeps its consent box focusable (see ContactForm.landing.js) */
.lp .lp-contact label { position: relative; }
.lp .lp-contact input.lp-check:focus-visible + div { outline: 3px solid var(--lp-accent); outline-offset: 3px; border-radius: 8px; }

/* skip link */
.lp .lp-skip { position: absolute; left: -9999px; top: 12px; }
.lp .lp-skip:focus { left: 16px; z-index: 50; background: #fff; color: var(--lp-ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; }

/* contrast fixes from the axe audit (WCAG 1.4.3):
   dark green on yellow is 4.2:1, so text on yellow uses a darker green (5.0:1);
   yellow links on the dark panels are 4.2:1, so they use a lighter yellow (5.2:1);
   the form's 70 % green placeholder and role text is 3.5:1, so it uses a solid green (5.4:1). */
.lp .lp-cta { color: #17533f; }
.lp .lp-panel a, .lp .lp-footer a { color: #ffe8a8; }
.lp .lp-panel .lp-card a, .lp .lp-panel table.lp-table a { color: var(--lp-ink); }
.lp .lp-contact .text-brand-dark-green\/70 { color: #3d6f60; }
.lp .lp-contact input::placeholder { color: #3d6f60; opacity: 1; }

/* ======================================================================================
   Icon tiles: big flat icon, terse title, at most one short line. Icons animate on hover
   and once when their panel scrolls in (assets/motion.js adds .m-in). No motion when the
   visitor asks for reduced motion.
   ====================================================================================== */
.lp .lp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 22px; }
.lp .lp-tiles.lp-tiles-lg { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp .lp-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: rgba(240, 249, 245, .93); color: var(--lp-ink); border-radius: 24px; padding: 22px 20px 20px;
  text-decoration: none; transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.lp .lp-tile .lp-ib {
  width: 84px; height: 84px; border-radius: 26px; background: #dcefe6; display: grid; place-items: center;
  transition: transform .55s cubic-bezier(.16,1,.3,1), background-color .4s ease;
}
.lp .lp-tiles-lg .lp-tile .lp-ib { width: 104px; height: 104px; border-radius: 30px; }
.lp .lp-tile .ic { width: 58px; height: 58px; overflow: visible; }
.lp .lp-tiles-lg .lp-tile .ic { width: 72px; height: 72px; }
.lp .lp-tile h3 { font-size: 19px; line-height: 1.25; font-weight: 700; margin: 0; color: var(--lp-ink); }
.lp .lp-tile p { font-size: 15px; line-height: 1.4; margin: 0; color: #2f5d50; }
.lp .lp-panel .lp-tile a, .lp a.lp-tile { color: var(--lp-ink); text-decoration: none; }
.lp a.lp-tile::after { content: "→"; position: absolute; top: 18px; right: 20px; font-size: 22px; font-weight: 700; color: var(--lp-ink); transition: transform .4s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) {
  .lp .lp-tile:hover, .lp a.lp-tile:focus-visible { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,.25); }
  .lp .lp-tile:hover .lp-ib, .lp a.lp-tile:focus-visible .lp-ib { transform: rotate(-6deg) scale(1.07); background: #ffe7a8; }
  .lp a.lp-tile:hover::after { transform: translateX(5px); }
}

/* stat tiles: one big number, one caption */
.lp .lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 22px; }
.lp .lp-stat { border: 1px solid rgba(240,249,245,.28); border-radius: 22px; padding: 20px; }
.lp .lp-stat b { display: block; font-size: 52px; line-height: 1; font-weight: 700; color: #ffd166; letter-spacing: -.02em; }
.lp .lp-stat span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; color: #fff; }

/* flow: numbered tiles in a row */
.lp .lp-flow { counter-reset: flow; }
.lp .lp-flow .lp-tile { counter-increment: flow; padding-top: 26px; }
.lp .lp-flow .lp-tile::before {
  content: counter(flow, decimal-leading-zero); position: absolute; top: 18px; right: 20px; font-size: 15px; font-weight: 700;
  color: #17533f; background: #ffb405; border-radius: 999px; padding: 3px 10px;
}

/* versus rows: their point, our answer */
.lp .lp-vs { display: grid; gap: 14px; margin-top: 22px; }
.lp .lp-vs-head, .lp .lp-vs-row { display: grid; grid-template-columns: 1fr 92px 1fr; gap: 14px; align-items: stretch; }
.lp .lp-vs-head span { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.lp .lp-vs-head span:last-child { color: #ffe8a8; }
.lp .lp-vs-them { border: 1px solid rgba(240,249,245,.3); border-radius: 20px; padding: 16px 18px; color: #fff; font-size: 16px; line-height: 1.4; display: flex; align-items: center; }
.lp .lp-vs-us { background: var(--lp-card); color: var(--lp-ink); border-radius: 20px; padding: 16px 18px; font-size: 16px; line-height: 1.4; display: flex; flex-direction: column; justify-content: center; gap: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.lp .lp-vs-us b { font-size: 17px; }
.lp .lp-vs-ic { display: grid; place-items: center; }
.lp .lp-vs-ic .lp-ib { width: 80px; height: 80px; border-radius: 50%; background: #ffd166; display: grid; place-items: center; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.lp .lp-vs-ic .ic { width: 52px; height: 52px; overflow: visible; }
@media (hover: hover) { .lp .lp-vs-row:hover .lp-ib { transform: scale(1.1) rotate(-8deg); } }
@media (max-width: 760px) {
  /* one row = icon on the left, their point above ours */
  .lp .lp-vs { gap: 26px; }
  .lp .lp-vs-head { display: none; }
  .lp .lp-vs-row { grid-template-columns: 60px 1fr; grid-template-areas: "ic them" "ic us"; gap: 8px 12px; }
  .lp .lp-vs-ic { grid-area: ic; align-self: start; padding-top: 4px; }
  .lp .lp-vs-ic .lp-ib { width: 60px; height: 60px; }
  .lp .lp-vs-ic .ic { width: 40px; height: 40px; }
  .lp .lp-vs-them { grid-area: them; flex-direction: column; align-items: flex-start; padding: 10px 14px; font-size: 14px; border-radius: 14px; }
  .lp .lp-vs-them::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
  .lp .lp-vs-us { grid-area: us; padding: 12px 14px; border-radius: 14px; }
}

/* secondary call to action as a pill with an icon */
.lp .lp-cta-alt { display: inline-flex; align-items: center; gap: 10px; border: 2px solid #fff; border-radius: 12px; padding: 12px 18px; color: #fff; text-decoration: none; font-size: 18px; font-weight: 600; transition: background-color .3s ease, transform .3s ease; }
.lp .lp-cta-alt .ic { width: 28px; height: 28px; }
.lp .lp-cta-alt:hover { background: rgba(240,249,245,.12); transform: translateY(-2px); opacity: 1; }
.lp .lp-cta img { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.lp .lp-cta:hover img { transform: translateX(6px); }

/* ---- icon part animations ------------------------------------------------------------- */
/* Every keyframe set starts at the icon's resting state: a paused animation shows its first frame,
   so an idle icon is always complete. */
.lp .ic * { transform-box: fill-box; transform-origin: center; }
/* a shape drawn with a transform attribute (rotate(a cx cy)) already names its own centre */
.lp .ic [transform] { transform-box: view-box; transform-origin: 0 0; }
.lp .ic .a-draw, .lp .ic .a-tick { stroke-dasharray: 1; stroke-dashoffset: 0; }
.lp .ic .a-grind { transform-box: view-box; transform-origin: 30px 34px; }
.lp .ic .a-needle { transform-box: view-box; transform-origin: 32px 46px; }
.lp .ic .a-swing { transform-box: view-box; transform-origin: 44px 20px; }
.lp .ic .a-lid { transform-origin: 20% 100%; }
.lp .ic .a-rows rect { transform-origin: 0 50%; }

@keyframes ic-bub { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-15px); opacity: 0; } }
@keyframes ic-lid { 0%, 100% { transform: none; } 45% { transform: translateY(-7px) rotate(-12deg); } }
@keyframes ic-grind { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 75% { transform: rotate(-10deg); } }
@keyframes ic-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-10deg); } }
@keyframes ic-flip { from { transform: perspective(200px) rotateY(0); } to { transform: perspective(200px) rotateY(360deg); } }
@keyframes ic-draw { 0% { stroke-dashoffset: 0; } 1% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes ic-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.14); } 70% { transform: scale(.96); } }
@keyframes ic-pen { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-8px, 6px); } 60% { transform: translate(4px, 3px); } }
@keyframes ic-node { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes ic-needle { 0% { transform: rotate(0); } 8% { transform: rotate(-95deg); } 65% { transform: rotate(14deg); } 100% { transform: rotate(0); } }
@keyframes ic-shackle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ic-drop { 0% { transform: none; opacity: 1; } 1% { transform: translateY(-14px); opacity: 0; } 55% { transform: translateY(2px); opacity: 1; } 75% { transform: translateY(-2px); } 100% { transform: none; } }
@keyframes ic-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ic-write { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-6px, -4px) rotate(-6deg); } 50% { transform: translate(-2px, 2px); } 75% { transform: translate(-8px, 1px) rotate(4deg); } }
@keyframes ic-scan { 0%, 100% { transform: none; } 25% { transform: translateY(-13px); } 75% { transform: translateY(13px); } }
@keyframes ic-slide { 0% { transform: none; opacity: 1; } 1% { transform: translateY(10px); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes ic-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ic-paper { 0% { transform: none; } 1% { transform: translateY(-14px); } 100% { transform: none; } }
@keyframes ic-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ic-meridian { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
@keyframes ic-row { 0% { transform: scaleX(1); } 1% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes ic-lens { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes ic-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(9deg); } }
@keyframes ic-push { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@keyframes ic-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes ic-frame { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .45; } }
@keyframes ic-dropfall { 0% { transform: none; opacity: 1; } 1% { transform: translateY(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes ic-swirl { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px) skewX(-6deg); } }
@keyframes ic-fan1 { 50% { transform: translate(-4px, 4px); } }
@keyframes ic-fan3 { 50% { transform: translate(5px, -5px); } }
@keyframes ic-bookmark { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes ic-ping { 0% { transform: scale(1); opacity: 0; } 1% { transform: scale(1); opacity: .95; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes ic-island { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(1.9); } }
@keyframes ic-blink-eye { 0%, 40%, 60%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }

.lp .lp-tile:hover .ic, .lp a.lp-tile:focus-visible .ic, .lp .lp-vs-row:hover .ic { --play: running; }
.lp .ic .a-bub { animation: ic-bub 1.3s ease-in infinite paused; }
.lp .ic .a-bub.b2 { animation-delay: .35s; } .lp .ic .a-bub.b3 { animation-delay: .7s; }
.lp .ic .a-lid { animation: ic-lid 1s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-grind { animation: ic-grind 1s ease-in-out infinite paused; }
.lp .ic .a-wiggle { animation: ic-wiggle .9s ease-in-out infinite paused; }
.lp .ic .a-flip { animation: ic-flip 1.4s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-draw, .lp .ic .a-tick { animation: ic-draw 1.1s cubic-bezier(.65,0,.35,1) infinite paused; }
.lp .ic .a-tick.t2 { animation-delay: .2s; } .lp .ic .a-tick.t3 { animation-delay: .4s; }
.lp .ic .a-pop { animation: ic-pop 1.1s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-pen { animation: ic-pen 1.1s ease-in-out infinite paused; }
.lp .ic .a-node { animation: ic-node 1.2s ease-in-out infinite paused; }
.lp .ic .a-node.n2 { animation-delay: .25s; } .lp .ic .a-node.n3 { animation-delay: .5s; }
.lp .ic .a-needle { animation: ic-needle 1.4s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-shackle { animation: ic-shackle .9s ease-in-out infinite paused; }
.lp .ic .a-drop { animation: ic-drop 1.2s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-blink { animation: ic-blink .8s steps(2) infinite paused; }
.lp .ic .a-write { animation: ic-write 1.2s ease-in-out infinite paused; }
.lp .ic .a-scan { animation: ic-scan 1.3s ease-in-out infinite paused; }
.lp .ic .a-slide { animation: ic-slide 1s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-bob { animation: ic-bob 1.1s ease-in-out infinite paused; }
.lp .ic .a-paper { animation: ic-paper 1.2s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-spin { animation: ic-spin 1.2s cubic-bezier(.65,0,.35,1) infinite paused; }
.lp .ic .a-spin-slow { animation: ic-spin 6s linear infinite paused; }
.lp .ic .a-meridian { animation: ic-meridian 1.6s ease-in-out infinite paused; }
.lp .ic .a-rows rect { animation: ic-row 1.2s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-rows .r2 { animation-delay: .12s; } .lp .ic .a-rows .r3 { animation-delay: .24s; } .lp .ic .a-rows .r4 { animation-delay: .36s; }
.lp .ic .a-flash { animation: ic-blink .5s steps(2) infinite paused; }
.lp .ic .a-lens { animation: ic-lens 1s ease-in-out infinite paused; }
.lp .ic .a-swing { animation: ic-swing 1.1s ease-in-out infinite paused; }
.lp .ic .a-push { animation: ic-push 1s ease-in-out infinite paused; }
.lp .ic .a-shake { animation: ic-shake .8s ease-in-out infinite paused; }
.lp .ic .a-frame { animation: ic-frame 1s ease-in-out infinite paused; }
.lp .ic .a-dropfall { animation: ic-dropfall 1.2s ease-in infinite paused; }
.lp .ic .a-swirl { animation: ic-swirl 1.2s ease-in-out infinite paused; }
.lp .ic .a-fan .s1 { animation: ic-fan1 1s ease-in-out infinite paused; } .lp .ic .a-fan .s3 { animation: ic-fan3 1s ease-in-out infinite paused; }
.lp .ic .a-bookmark { animation: ic-bookmark 1s ease-in-out infinite paused; }
.lp .ic .a-ping { animation: ic-ping 1.3s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-island { animation: ic-island 1.2s cubic-bezier(.16,1,.3,1) infinite paused; }
.lp .ic .a-blink-eye { animation: ic-blink-eye 1.6s ease-in-out infinite paused; }
.lp .ic .a-leds .l1, .lp .ic .a-leds .l2, .lp .ic .a-leds .l3 { animation: ic-blink .9s steps(2) infinite paused; }
.lp .ic .a-leds .l2 { animation-delay: .3s; } .lp .ic .a-leds .l3 { animation-delay: .6s; }
.lp .lp-tile:hover .ic *, .lp a.lp-tile:focus-visible .ic *, .lp .lp-vs-row:hover .ic *, .lp .lp-cta-alt:hover .ic * { animation-play-state: running; }

/* once, when the panel scrolls in */
.motion .lp .m-in .ic * { animation-play-state: running; animation-iteration-count: 1; }
.motion .lp .m-in .lp-tile:hover .ic *, .motion .lp .m-in .lp-vs-row:hover .ic * { animation-iteration-count: infinite; }

@media (prefers-reduced-motion: reduce) {
  .lp .ic *, .lp .ic-logo, .lp .lp-tile, .lp .lp-tile .lp-ib, .lp .lp-vs-ic .lp-ib { animation: none !important; transition: none !important; }
  .lp .lp-tile:hover, .lp .lp-tile:hover .lp-ib { transform: none; }
}
.lp .lp-cta-alt .ic { background: #f0f9f5; border-radius: 8px; padding: 3px; }
.lp .lp-tagline { margin: 22px 0 0; font-size: 20px; font-weight: 600; color: #fff; }
.lp .lp-pill-row { margin: 22px 0 26px; }
/* state tiles: five across, the state's outline is the picture */
.lp .lp-tiles.lp-tiles-states { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.lp .lp-tiles-states .lp-tile .lp-ib { width: 104px; height: 104px; border-radius: 30px; }
.lp .lp-tiles-states .lp-tile .ic { width: 84px; height: 84px; }
/* platform tiles: one row on wide screens; a shorter last row stays centred */
.lp .lp-tiles.lp-tiles-platforms { display: flex; flex-wrap: wrap; justify-content: center; }
.lp .lp-tiles-platforms .lp-tile { flex: 1 1 124px; max-width: 150px; align-items: center; text-align: center; padding: 18px 10px 16px; }
.lp .lp-tiles-platforms .lp-tile .lp-ib { width: 88px; height: 88px; border-radius: 26px; }
.lp .lp-tiles-platforms .lp-tile .ic { width: 64px; height: 64px; }
.lp .lp-tiles-platforms .lp-tile h3 { font-size: 17px; }
/* official marks (Tux, Android robot): shown as published, only the whole image moves */
.lp .ic-logo { object-fit: contain; }
.lp .lp-tile:hover .ic-logo, .lp a.lp-tile:focus-visible .ic-logo { animation: ic-bob 1.1s ease-in-out infinite; }
.lp .lp-credits { margin-top: 18px; font-size: 12px; line-height: 1.5; }
.lp .lp-credits a { color: inherit; }
/* side-by-side table: green checks for us, outlined dashes where nothing was found */
.lp .lp-checks table.lp-table { min-width: 760px; }
.lp .lp-checks table.lp-table th[scope="col"]:not(:first-child), .lp .lp-checks table.lp-table td { text-align: center; }
.lp .lp-checks table.lp-table th[scope="col"]:nth-child(2) { background: #1e7a4f; color: #fff; }
.lp .lp-checks table.lp-table td:nth-child(2) { background: rgba(31, 138, 87, .1); }
.lp .lp-yes svg, .lp .lp-no svg { display: inline-block; vertical-align: middle; }
.lp .lp-no sup, .lp .lp-yes sup { font-weight: 700; margin-left: 2px; }
.lp .lp-checks tr.lp-theme th { background: #dcefe6; color: #17533f; text-align: left; font-size: 14px; font-weight: 700; padding: 8px 14px; }
.lp .lp-checks tr.lp-group th { background: #17533f; color: #fff; text-align: left; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; }
@media (max-width: 760px) {
  /* phones: vertical column names and narrow columns, so every check is on screen without scrolling */
  .lp .lp-checks table.lp-table { min-width: 0; width: 100%; table-layout: fixed; font-size: 14px; }
  .lp .lp-checks table.lp-table th[scope="row"] { white-space: normal; overflow-wrap: anywhere; }
  .lp .lp-checks .lp-no sup, .lp .lp-checks .lp-yes sup { position: absolute; }
  .lp .lp-checks .lp-no, .lp .lp-checks .lp-yes { position: relative; }
  .lp .lp-checks table.lp-table th, .lp .lp-checks table.lp-table td { padding: 9px 5px; }
  .lp .lp-checks table.lp-table th[scope="row"] { padding-left: 10px; font-size: 13.5px; line-height: 1.3; }
  .lp .lp-checks table.lp-table th[scope="col"]:not(:first-child) {
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; vertical-align: bottom; text-align: left;
    width: 36px; padding: 12px 6px; font-size: 12.5px;
  }
  .lp .lp-checks table.lp-table th[scope="col"]:first-child { vertical-align: bottom; }
  .lp .lp-yes svg, .lp .lp-no svg { width: 20px; height: 20px; }
  .lp .lp-checks table.lp-table th, .lp .lp-checks table.lp-table td { padding-left: 3px; padding-right: 3px; }
}
@media (hover: hover) {
  .lp .lp-checks tbody tr:hover .lp-yes svg { transform: scale(1.18); transition: transform .35s cubic-bezier(.16,1,.3,1); }
}
/* homepage block (be-seo) and long words in tile titles (Dutch compounds such as "Conformiteitscertificaat") */
.lp .lp-tile h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.lp .lp-tiles + .lp-asof, .lp .lp-tiles + .lp-callout { margin-top: 16px; }
.lp.lp-home { margin: 24px 0 72px; }

/* ---- Swiss pages (body.lp-ch): ivory base, ink text, the red of the ALT/LMT/EMT PRO marks ------
   Contrast: ink #1c1c1e on white 17:1 and on ivory 16:1; red #c4161c on white 5.9:1 and on the
   ivory tiles 5.3:1; white on the red button 5.9:1. No Swiss cross and no federal red: the red is
   the marks' own. */
body.lp-ch {
  background: url(/assets/Noise.png) repeat 0 0 / 600px 600px, #faf7f1; background-blend-mode: difference; /* without motion.js */
  --lp-panel: #ffffff; --lp-card: #f7f3ec; --lp-ink: #1c1c1e; --lp-light: #1c1c1e; --lp-accent: #c4161c;
  --lp-soft: #4a4a4c; --lp-line: rgba(28, 28, 30, .12); --lp-tint: #fbe8e5;
  --m-yellow: #c4161c; --m-green-light: #e9b8b2;
  color: var(--lp-ink);
}
body.lp-ch .lp-langs a, body.lp-ch .lp-crumbs, body.lp-ch .lp-crumbs a { color: var(--lp-ink); }
body.lp-ch .lp-eyebrow { color: var(--lp-accent); }
body.lp-ch h1 { color: var(--lp-ink); }
body.lp-ch .lp-lede, body.lp-ch .lp-tagline { color: var(--lp-soft); }
body.lp-ch .lp-lockup .lp-mark { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
body.lp-ch .lp-cta { background: var(--lp-accent); color: #fff; box-shadow: 0 8px 20px rgba(196, 22, 28, .25); }
body.lp-ch .lp-cta img { filter: brightness(0) invert(1); }
body.lp-ch .lp-cta-alt { color: var(--lp-ink); border-color: var(--lp-ink); }
body.lp-ch .lp-cta-alt:hover { background: rgba(28, 28, 30, .05); }
body.lp-ch .lp-cta-alt .ic { background: var(--lp-tint); }
/* acrylic: half-clear white with a light blur, so the grain and the glass shapes behind stay visible as they drift */
body.lp-ch .lp-panel {
  background: rgba(255, 255, 255, .42); color: var(--lp-ink); border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(1px) saturate(1.15); backdrop-filter: blur(1px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 50px rgba(60, 40, 20, .1);
}
body.lp-ch .lp-panel .lp-card { background: rgba(247, 243, 236, .9); }
body.lp-ch .lp-panel p, body.lp-ch .lp-panel li { color: var(--lp-ink); }
body.lp-ch .lp-panel a, body.lp-ch .lp-footer a { color: var(--lp-accent); }
body.lp-ch .lp-callout { background: var(--lp-tint); border-left-color: var(--lp-accent); }
body.lp-ch ol.lp-steps > li { background: var(--lp-card); }
body.lp-ch ol.lp-steps > li::before { color: #fff; }
body.lp-ch table.lp-table thead th { background: #efe8dc; }
body.lp-ch table.lp-table th, body.lp-ch table.lp-table td { border-bottom-color: var(--lp-line); }
body.lp-ch details.lp-faq, body.lp-ch details.lp-faq:last-of-type, body.lp-ch .lp-footer .lp-notes { border-color: var(--lp-line); }
body.lp-ch .lp-footer, body.lp-ch .lp-footer nav a, body.lp-ch .lp-footer nav button { color: var(--lp-ink); }
body.lp-ch .lp-tile { background: var(--lp-card); box-shadow: 0 1px 0 rgba(28, 28, 30, .04); }
body.lp-ch .lp-tile .lp-ib { background: var(--lp-tint); }
body.lp-ch .lp-tile p { color: var(--lp-soft); }
body.lp-ch .lp-tile:hover, body.lp-ch a.lp-tile:focus-visible { box-shadow: 0 16px 30px rgba(60, 40, 20, .14); }
body.lp-ch .lp-tile:hover .lp-ib, body.lp-ch a.lp-tile:focus-visible .lp-ib { background: #f6d3ce; }
body.lp-ch .lp-flow .lp-tile::before { color: #fff; background: var(--lp-accent); }
body.lp-ch .lp-contact .text-brand-dark-green\/70, body.lp-ch .lp-contact input::placeholder { color: var(--lp-soft); }
/* the icons are drawn in the brand green and yellow: ink and red here */
body.lp-ch .ic [fill="#1c604c"] { fill: var(--lp-ink); }
body.lp-ch .ic [stroke="#1c604c"] { stroke: var(--lp-ink); }
body.lp-ch .ic [fill="#ffb405"] { fill: var(--lp-accent); }
body.lp-ch .ic [stroke="#ffb405"] { stroke: var(--lp-accent); }
body.lp-ch .ic [fill="#98bdac"] { fill: #d8cfc3; }
body.lp-ch .ic [stroke="#98bdac"] { stroke: #d8cfc3; }
/* the contact form island is styled for the green pages: its off-white text, mint fields, yellow
   button and off-white checkbox outline become ink, white, red and ink here */
body.lp-ch .lp-contact .text-brand-off-white { color: var(--lp-ink); }
body.lp-ch .lp-contact p.text-brand-off-white { color: var(--lp-soft); }
body.lp-ch .lp-contact .text-brand-dark-green { color: var(--lp-ink); }
body.lp-ch .lp-contact .bg-brand-off-white { background: #fff; box-shadow: inset 0 0 0 1px #ded5c6; }
body.lp-ch .lp-contact .hover\:bg-brand-light-green:hover { background: var(--lp-tint); }
body.lp-ch .lp-contact .bg-brand-yellow { background: var(--lp-accent); color: #fff; }
body.lp-ch .lp-contact .bg-brand-yellow span { color: #fff; }
body.lp-ch .lp-contact .bg-brand-yellow img { filter: brightness(0) invert(1); }
body.lp-ch .lp-contact svg [stroke="#F0F9F5"] { stroke: var(--lp-ink); }
body.lp-ch .lp-contact svg [fill="#F0F9F5"] { fill: var(--lp-ink); }
body.lp-ch .lp-contact .bg-brand-yellow { box-shadow: 0 8px 20px rgba(196, 22, 28, .25); }
body.lp-ch .lp-contact svg [stroke="#1C604C"] { stroke: var(--lp-ink); }
body.lp-ch .lp-footer { background: #efe8dc; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the cookie banner (assets/consent.js) in the Swiss colours: white panel, ink text, red accept and
   ink reject, both filled and the same size so rejecting stays as prominent as accepting */
body.lp-ch #aster-consent { background: #fff; color: var(--lp-ink); box-shadow: 0 -1px 0 #e6dccd, 0 -10px 30px rgba(60, 40, 20, .12); }
body.lp-ch #aster-consent a { color: var(--lp-accent); }
body.lp-ch #aster-consent button:focus-visible { outline-color: var(--lp-accent); }
body.lp-ch #aster-consent .ac-accept { background: var(--lp-accent); color: #fff; }
body.lp-ch #aster-consent .ac-reject { background: var(--lp-ink); color: #fff; }
body.lp-ch #aster-consent .ac-more { color: var(--lp-ink); }
body.lp-ch #aster-consent .ac-prefs { border-top-color: var(--lp-line); }
body.lp-ch #aster-consent label.ac-opt input { accent-color: var(--lp-accent); }
body.lp-ch #aster-reopen { background: #fff; color: var(--lp-ink); border-color: var(--lp-ink); }
/* the Apogalenos mark at the foot of the Swiss pages, in ink, with where it is registered */
body.lp-ch .lp-org { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lp-line); }
body.lp-ch .lp-org img { display: block; height: 46px; width: auto; }
body.lp-ch .lp-org p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--lp-soft); max-width: 640px; }

/* ---- product screenshots (scripts/landing/shots.py): windows with their own shadow, and the
   scroll story. Without motion.js the story is a list: each step with its screenshot under it. ---- */
.lp .lp-window { margin: 28px auto 0; max-width: 980px; }
.lp .lp-window-hero { max-width: 1100px; margin: 8px auto 0; }
.lp .lp-shot.lp-shot-window { border-radius: 0; box-shadow: none; }
.lp .lp-story-steps { list-style: none; margin: 0; padding: 0; }
.lp .lp-story-step { padding: 22px 0; }
.lp .lp-story-step + .lp-story-step { border-top: 1px solid var(--lp-line, rgba(240, 249, 245, .2)); }
.lp .lp-story-n { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--lp-accent); }
.lp .lp-story-step h3 { font-size: 26px; line-height: 1.2; margin: 6px 0 10px; }
.lp .lp-story-step p { margin: 0; font-size: 17px; line-height: 1.55; max-width: 34em; }
.lp .lp-story-inline { margin: 18px 0 0; }
.lp .lp-story-inline img, .lp .lp-story-media img { display: block; width: 100%; height: auto; }
.lp .lp-story-media { display: none; }