/* SP3-T21: rules of the apex site, linked after the design-system sheets by Views/Shared/Site/_SiteHead.cshtml.
   They replace the package's inline style attributes (strict CSP, design A.9), style the legal pages and give the
   moving parts a visible pause control (R-19, WCAG 2.2.2). New classes use the lp- prefix (O5); lp3- is only a target. */

/* replacements for the style attributes of Landing.cshtml (:142, :237, :257) and the demo link */
.lp .lp-sec-tight-top{ padding-top:24px; }
.lp .lp-sec-services{ padding:0 16px 16px; }
.lp .lp-self-center{ align-self:center; }
.lp .lp-btn-block{ width:100%; }

/* mock progress bars (_Mock.cshtml): width from data-pct in 5% steps */
.lp .lp-bar i[data-pct="5"]{width:5%}.lp .lp-bar i[data-pct="10"]{width:10%}.lp .lp-bar i[data-pct="15"]{width:15%}.lp .lp-bar i[data-pct="20"]{width:20%}
.lp .lp-bar i[data-pct="25"]{width:25%}.lp .lp-bar i[data-pct="30"]{width:30%}.lp .lp-bar i[data-pct="35"]{width:35%}.lp .lp-bar i[data-pct="40"]{width:40%}
.lp .lp-bar i[data-pct="45"]{width:45%}.lp .lp-bar i[data-pct="50"]{width:50%}.lp .lp-bar i[data-pct="55"]{width:55%}.lp .lp-bar i[data-pct="60"]{width:60%}
.lp .lp-bar i[data-pct="65"]{width:65%}.lp .lp-bar i[data-pct="70"]{width:70%}.lp .lp-bar i[data-pct="75"]{width:75%}.lp .lp-bar i[data-pct="80"]{width:80%}
.lp .lp-bar i[data-pct="85"]{width:85%}.lp .lp-bar i[data-pct="90"]{width:90%}.lp .lp-bar i[data-pct="95"]{width:95%}.lp .lp-bar i[data-pct="100"]{width:100%}

/* motion: without scripts nothing moves; with scripts a visible toggle (boot.js marks <html class="js">) pauses the
   marquee, the floating cards and the tabs; the paused state is a class on <html> */
:root:not(.js) .lp3-marquee-track, :root:not(.js) .lp3-float{ animation:none; }
.lp-motion-btn{ display:none; }
.js .lp-motion-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin-block-start:16px; padding:0 18px; border:1px solid currentColor; border-radius:999px; background:transparent; color:inherit; font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.js .lp-motion-btn:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
.js .lp-motion-btn[aria-pressed="true"]{ background:rgba(127,127,127,.18); }
.lp-motion-paused .lp3-marquee-track, .lp-motion-paused .lp3-float{ animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce){ .js .lp-motion-btn{ display:none; } }

/* legal pages on the apex */
.lp .lp-legal{ max-width:72ch; margin-block:24px; line-height:1.9; }
.lp .lp-legal h2{ margin:32px 0 12px; font-size:24px; }
.lp .lp-legal h3{ margin:24px 0 8px; font-size:19px; }
.lp .lp-legal ul{ padding-inline-start:22px; }
.lp .lp-legal .legal-placeholder, .lp .lp-legal-note{ margin:16px 0 0; padding:12px 14px; border-radius:12px; background:var(--lp-warn-bg, #FFF4D6); color:var(--lp-warn-ink, #806512); }
.lp .lp-legal-meta{ margin:8px 0 0; color:var(--lp3-muted, #6E6E73); }
.lp .lp-legal-index{ display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.lp .lp-legal-index li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.lp .lp-legal-index a, .lp .lp-legal-versions a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.lp .lp-legal-versions{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:28px; }