/* ==========================================================================
   CERTINAL — landing.css   (migrated LANDING / product / marketing pages)
   --------------------------------------------------------------------------
   Loaded by LandingLayout.astro (industry, alternative, campaign, page, …).
   Renders the semantic sections from lib/sections.js in the Certinal DS,
   matching the homepage's premium visual language: signature lime-wash + grid
   textures, cards with inset highlights / radial hover glows / accent bars,
   eyebrow pills, chapter-scale spacing. Depends on tokens.css + shell.css.
   Hard DS rules honoured: dark text on lime, tone-on-tone gradients, radii
   ≤20px, Switzer weights, 8pt spacing, GPU-safe (transform/opacity) motion.
   ========================================================================== */

.lp{color:var(--text)}

/* --- buttons ----------------------------------------------------------- */
/* primary: dark-on-lime with a nested "button-in-button" arrow circle */
.lpBtn{display:inline-flex;align-items:center;gap:12px;background:var(--lime-400);color:var(--n-950);
  font-weight:var(--w-button);font-size:var(--btn-size);line-height:1;padding:13px 15px 13px 24px;border-radius:var(--r-full);
  box-shadow:0 10px 24px rgba(121,150,27,.26),inset 0 1px rgba(255,255,255,.5);
  transition:background .24s,transform .24s var(--ease-lift),box-shadow .24s}
.lpBtn:hover{background:var(--lime-500);transform:translateY(-2px);box-shadow:0 16px 34px rgba(121,150,27,.36),inset 0 1px rgba(255,255,255,.5)}
.lpBtn:active{transform:translateY(0) scale(.985)}
.lpBtnArrow{width:28px;height:28px;flex:0 0 auto;border-radius:var(--r-full);background:rgba(20,20,21,.12);display:grid;place-items:center;transition:transform .28s var(--ease-lift),background .24s}
.lpBtn:hover .lpBtnArrow{transform:translate(2px,-2px);background:rgba(20,20,21,.2)}
.lpBtnArrow :global(svg){width:15px;height:15px}
/* dark variant for lime-fill panels (lime text on a dark pill) */
.lpBtnDark{background:var(--n-950);color:var(--lime-400)}
.lpBtnDark:hover{background:#000;box-shadow:0 16px 34px rgba(20,20,21,.32)}
.lpBtnDark .lpBtnArrow{background:rgba(255,255,255,.16)}
.lpBtnDark:hover .lpBtnArrow{background:rgba(255,255,255,.26)}
/* secondary: hairline ghost */
.lpBtnGhost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.7);color:var(--n-900);
  font-weight:var(--w-button);font-size:var(--btn-size);line-height:1;padding:14px 22px;border-radius:var(--r-full);
  border:1px solid var(--border);backdrop-filter:blur(6px);transition:border-color .24s,transform .24s var(--ease-lift),background .24s}
.lpBtnGhost:hover{border-color:var(--lime-600);transform:translateY(-2px);background:#fff}
.lpBtnGhost :global(svg){width:15px;height:15px;color:var(--lime-700)}

/* ==========================================================================
   HERO — signature lime-wash + grid-paper backdrop, centred copy
   ========================================================================== */
.lpHero{position:relative;overflow:hidden;padding:calc(var(--nav-offset,100px) + clamp(40px,6vh,76px)) 0 clamp(64px,10vh,116px)}
.lpHero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(58% 62% at 14% 26%,rgba(212,249,121,.52),transparent 70%),
  radial-gradient(54% 56% at 90% 30%,rgba(205,247,87,.44),transparent 72%),
  linear-gradient(#F5F7FC 0%,#FBFEF2 34%,#EFFAD5 100%)}
.lpHero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(121,150,27,.07) 1px,transparent 1px),
  linear-gradient(rgba(121,150,27,.07) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:linear-gradient(transparent 18%,rgba(0,0,0,.85));mask-image:linear-gradient(transparent 18%,rgba(0,0,0,.85))}
.lpHeroInner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:900px}
.lpCrumbs{display:flex;align-items:center;gap:9px;font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--s-4)}
.lpCrumbs a{color:var(--text-secondary)}
.lpCrumbs a:hover{color:var(--lime-800)}
.lpEyebrow{display:inline-block;font-size:11px;font-weight:var(--w-primary);letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime-900);background:var(--lime-50);border:1px solid rgba(153,186,53,.3);border-radius:var(--r-full);padding:7px 15px;margin:0 0 var(--s-4)}
.lpTitle{font-size:var(--h1);line-height:var(--lh-h1);font-weight:var(--w-primary);letter-spacing:-.03em;color:var(--n-950);max-width:20ch;text-wrap:balance;margin:0}
.lpLead{margin-top:var(--s-4);font-size:var(--text-lg);line-height:1.6;color:var(--text-secondary);max-width:62ch}
.lpLead :global(p){margin:0 0 .6em}
.lpLead :global(p):last-child{margin-bottom:0}
.lpHeroActions{margin-top:clamp(28px,4vh,40px);display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ==========================================================================
   SECTION SCAFFOLD + HEADERS — chapter-scale spacing, alternating texture
   ========================================================================== */
.lpSection{position:relative;padding:clamp(64px,10vh,120px) 0}
/* alt sections: soft lime wash + faint dot-paper for depth */
.lpSection--alt{background:linear-gradient(#fff,#FAFDF2)}
.lpSection--alt::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(121,150,27,.16) .9px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(rgba(0,0,0,.5),transparent 60%);mask-image:linear-gradient(rgba(0,0,0,.5),transparent 60%)}
.lpBand{position:relative;padding:clamp(48px,7vh,80px) 0 0}
.lpIntro{text-align:center;max-width:52ch;margin:0 auto}
.lpIntro .lpH2{max-width:22ch;margin:0 auto}
.lpIntroSub{margin-top:14px;font-size:var(--text-lg);line-height:1.5;color:var(--text-secondary)}
.lpH2{font-size:var(--h2);line-height:var(--lh-h2);font-weight:var(--w-primary);letter-spacing:-.025em;color:var(--n-950);margin:0}
.lpSectionTitle{position:relative;text-align:center;max-width:24ch;margin:0 auto clamp(40px,6vh,64px);padding-bottom:18px}
.lpSectionTitle::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:52px;height:3px;border-radius:2px;background:var(--grad-strip)}
.lpSection>.container{position:relative}

/* ==========================================================================
   CARD GRIDS — homepage-grade depth (inset highlight, radial glow, accent bar)
   ========================================================================== */
.lpCards{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.lpCard{position:relative;overflow:hidden;display:flex;flex-direction:column;isolation:isolate;
  background:linear-gradient(#fff,#FDFFF7 55%,#FAFDF0);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:inset 0 1px #fff,0 8px 24px rgba(62,79,5,.06);
  transition:transform .32s var(--ease-lift),box-shadow .32s,border-color .32s}
/* radial glow (behind content) blooms on hover */
.lpCard::before{content:"";position:absolute;top:-80px;right:-80px;width:230px;height:230px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(205,247,87,.4),transparent 70%);opacity:0;transition:opacity .32s;pointer-events:none}
/* top accent bar reveals on hover */
.lpCard::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;background:var(--grad-strip);opacity:0;transition:opacity .32s}
.lpCard:hover{transform:translateY(-6px);border-color:rgba(153,186,53,.55);box-shadow:0 22px 50px rgba(121,150,27,.16)}
.lpCard:hover::before,.lpCard:hover::after{opacity:1}
/* card images are ~16:10 thumbnails — full-bleed cover at the top of the card */
.lpCardMedia{position:relative;z-index:1;aspect-ratio:16/10;background:var(--n-100);overflow:hidden}
.lpCardMedia img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-lift)}
.lpCard:hover .lpCardMedia img{transform:scale(1.05)}
.lpCardBody{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.2vw,30px);flex:1}
/* small square icon-badges render as an icon inside the body, not a blown-up cover */
.lpCardIcon{display:inline-grid;place-items:center;width:58px;height:58px;margin-bottom:4px}
.lpCardIcon img{width:58px;height:58px;object-fit:contain}
.lpCardTitle{font-size:var(--text-lg);font-weight:var(--w-primary);color:var(--n-950);margin:0;letter-spacing:-.01em;line-height:1.3}
.lpCardDesc{font-size:var(--text-md);line-height:1.62;color:var(--text-secondary)}
.lpCardDesc :global(p){margin:0 0 .5em}
.lpCardDesc :global(p):last-child{margin-bottom:0}
.lpCardCta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-weight:var(--w-button);font-size:var(--text-sm);color:var(--lime-800);padding-top:6px}
.lpCardCta :global(svg){width:15px;height:15px;transition:transform .22s var(--ease-lift)}
.lpCardCta:hover :global(svg){transform:translate(2px,-2px)}

/* ==========================================================================
   FEATURE ROWS — editorial alternating image ⇄ text; content-driven for
   feature items that carry real photos (e.g. industry "How We Help")
   ========================================================================== */
.lpRows{display:flex;flex-direction:column;gap:clamp(48px,7vh,96px)}
.lpRow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.lpRow:nth-child(even) .lpRowMedia{order:2}
.lpRowMedia{overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);aspect-ratio:16/11;background:var(--n-100);box-shadow:inset 0 1px #fff,0 16px 44px rgba(62,79,5,.1)}
.lpRowMedia img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-lift)}
.lpRow:hover .lpRowMedia img{transform:scale(1.04)}
.lpRowText{max-width:48ch}
.lpRowBar{display:block;width:46px;height:3px;border-radius:2px;background:var(--grad-strip);margin-bottom:20px}
.lpRowTitle{font-size:var(--h3);line-height:var(--lh-h3);font-weight:var(--w-primary);letter-spacing:-.02em;color:var(--n-950);margin:0 0 14px}
.lpRowDesc{font-size:var(--text-md);line-height:1.72;color:var(--text-secondary)}
.lpRowDesc :global(p){margin:0 0 .6em}
.lpRowDesc :global(p):last-child{margin-bottom:0}

/* ==========================================================================
   SPLIT — text aspect beside its supporting visual (comparison pages);
   alternating sides for rhythm
   ========================================================================== */
.lpSplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.lpSplitFlip .lpSplitText{order:2}
.lpSplitText{max-width:52ch}
.lpSplitText .lpH2{margin:0 0 16px}
.lpSplitBlurb{font-size:var(--text-md);line-height:1.72;color:var(--text-secondary)}
.lpSplitBlurb :global(p){margin:0 0 .6em}
.lpSplitBlurb :global(p):last-child{margin-bottom:0}
.lpSplitMedia .lpGallery{justify-content:flex-start}
.lpSplitMedia .lpGalleryItem{flex:0 1 180px;min-height:112px;padding:20px}
.lpSplitMedia .lpCards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}

/* ==========================================================================
   GALLERY (logo walls / image runs) + single FIGURE
   ========================================================================== */
.lpGallery{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.6vw,20px)}
.lpGalleryItem{margin:0;flex:0 1 220px;display:flex;align-items:center;justify-content:center;min-height:132px;padding:26px;
  background:linear-gradient(#fff,#FDFFF7);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:inset 0 1px #fff,0 6px 18px rgba(62,79,5,.05);transition:transform .3s var(--ease-lift),box-shadow .3s,border-color .3s}
.lpGalleryItem:hover{transform:translateY(-4px);border-color:rgba(153,186,53,.5);box-shadow:0 16px 34px rgba(121,150,27,.14)}
.lpGalleryItem img{max-width:100%;max-height:96px;width:auto;height:auto;object-fit:contain}
.lpGalleryItem figcaption{margin-top:10px;font-size:var(--text-sm);color:var(--text-muted);text-align:center}
.lpFigure{margin:0;text-align:center}
.lpFigure img{max-width:min(920px,100%);height:auto;max-height:560px;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:0 14px 40px rgba(62,79,5,.1)}
.lpFigure figcaption{margin-top:12px;font-size:var(--text-sm);color:var(--text-muted)}
/* a lone logo/badge/cert mark → compact centered tile, not a giant figure */
.lpFigureLogo img{max-height:100px;max-width:220px;object-fit:contain;padding:18px 26px;background:linear-gradient(#fff,#FDFFF7);border:1px solid var(--border);box-shadow:inset 0 1px #fff,0 6px 18px rgba(62,79,5,.05)}

/* ==========================================================================
   CTA BAND — centred action on a soft radial bloom
   ========================================================================== */
.lpCtaBand{position:relative;padding:clamp(48px,7vh,88px) 0;text-align:center}
.lpCtaBand::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,90%);height:220px;border-radius:50%;background:radial-gradient(circle,rgba(205,247,87,.35),transparent 68%);pointer-events:none;z-index:-1}

/* ==========================================================================
   CLOSING CTA — solid lime-fill panel (dark text) with a breathing glow;
   high-contrast finish for every landing page
   ========================================================================== */
.lpClose{padding:clamp(56px,9vh,110px) 0}
.lpCloseInner{position:relative;overflow:hidden;text-align:center;border-radius:var(--r-lg);padding:clamp(40px,6vw,76px) clamp(24px,4vw,48px);
  background:linear-gradient(160deg,var(--lime-300),var(--lime-400) 52%,var(--lime-500));
  box-shadow:0 22px 54px rgba(121,150,27,.32),inset 0 1px rgba(255,255,255,.45)}
.lpCloseInner::before{content:"";position:absolute;left:50%;top:-46%;width:150%;height:130%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 64%);pointer-events:none;animation:lpGlow 6s ease-in-out infinite}
/* brand "layered circle" pattern bloom, half-clipped into the corner (adds emerald depth to the lime fill) */
.lpCloseInner::after{content:"";position:absolute;right:-72px;bottom:-96px;width:min(440px,68%);aspect-ratio:1;
  background:url('/assets/patterns/layered-circle.svg') no-repeat center/contain;opacity:.5;pointer-events:none;z-index:0}
@keyframes lpGlow{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.1)}}
.lpCloseTitle{position:relative;z-index:1;font-size:var(--h2);line-height:var(--lh-h2);font-weight:var(--w-primary);letter-spacing:-.025em;color:var(--n-950);max-width:22ch;margin:0 auto clamp(22px,3vh,30px)}
.lpClose .lpBtn{position:relative;z-index:1}

/* ==========================================================================
   PROSE — loose paragraphs / lists / quotes / tables that weren't grouped
   ========================================================================== */
.lpProse{max-width:768px;margin-inline:auto;font-size:var(--text-md);line-height:1.72;color:var(--text-secondary)}
.lpProse>*{margin:0 0 var(--s-3)}
.lpProse>*:last-child{margin-bottom:0}
.lpProseH3{font-size:var(--h4);font-weight:var(--w-primary);color:var(--n-950);letter-spacing:-.01em;line-height:var(--lh-h4);margin-top:var(--s-4)}
.lpProse :global(a){color:var(--lime-800);text-decoration:underline;text-underline-offset:2px}
.lpProse :global(strong){color:var(--n-900)}
.lpList{padding-left:0;display:flex;flex-direction:column;gap:10px;list-style:none}
.lpList li{position:relative;padding-left:26px}
.lpList li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--lime-500)}
/* taxonomy-style short-item lists → tidy centered multi-column (no dead whitespace) */
.lpList--cols{display:block;column-gap:clamp(24px,4vw,56px);max-width:760px;margin-inline:auto;columns:2}
.lpList--cols li{break-inside:avoid;margin-bottom:10px}
@media (min-width:820px){.lpList--cols{columns:3}}
.lpQuote{border-left:3px solid var(--lime-400);padding:8px 0 8px 22px;font-size:var(--text-lg);color:var(--n-800);font-style:italic}
.lpEmbed{margin:var(--s-3) 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:0 14px 40px rgba(62,79,5,.1);background:var(--n-100)}
.lpEmbed :global(iframe){display:block;width:100%;aspect-ratio:16/9;border:0}
.lpEmbedPdf :global(iframe){aspect-ratio:auto;height:min(82vh,940px)}
/* video CARD (Vidyard poster/player gone → tasteful play tile linking to source) */
.lpEmbedVideo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  aspect-ratio:16/9;text-decoration:none;border:0;cursor:pointer;
  background:radial-gradient(120% 140% at 50% 0%,#26282b,#141415);transition:transform .25s var(--ease-lift),box-shadow .25s}
.lpEmbedVideo:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(0,0,0,.3)}
.lpPlay{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:var(--lime-400);color:var(--n-950);box-shadow:0 10px 30px rgba(121,150,27,.45);transition:transform .25s var(--ease-lift)}
.lpEmbedVideo:hover .lpPlay{transform:scale(1.06)}
.lpEmbedVideoLabel{color:rgba(255,255,255,.86);font-size:var(--text-sm);font-weight:var(--w-medium);letter-spacing:.02em}
.lpTable{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md)}
.lpTable :global(table){width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.lpTable :global(th),.lpTable :global(td){border-bottom:1px solid var(--border);padding:12px 16px;text-align:left;vertical-align:top}
.lpTable :global(tr):last-child :global(td){border-bottom:0}
.lpTable :global(th){background:var(--lime-50);font-weight:var(--w-primary);color:var(--n-950)}

/* ==========================================================================
   EXPLORE-MORE STRIP (sibling pages in the same collection)
   ========================================================================== */
.lpMore{position:relative;padding:clamp(64px,9vh,110px) 0;background:linear-gradient(#fff,#F5F7FC);border-top:1px solid var(--border)}
.lpMoreHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:var(--s-5)}
.lpMoreLink{display:inline-flex;align-items:center;gap:6px;font-weight:var(--w-button);font-size:var(--text-sm);color:var(--lime-800);flex:0 0 auto}
.lpMoreLink :global(svg){width:15px;height:15px}
.lpMoreGrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lpMoreCard{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(#fff,#FDFFF7);
  border:1px solid var(--border);border-radius:var(--r-md);padding:20px 22px;box-shadow:inset 0 1px #fff,0 6px 18px rgba(62,79,5,.05);
  transition:transform .24s var(--ease-lift),border-color .24s,box-shadow .24s}
.lpMoreCard:hover{transform:translateY(-3px);border-color:rgba(153,186,53,.5);box-shadow:0 16px 34px rgba(121,150,27,.14)}
.lpMoreTitle{font-weight:var(--w-primary);color:var(--n-950);font-size:var(--text-md);line-height:1.35}
.lpMoreArrow{color:var(--lime-700);flex:0 0 auto;transition:transform .22s var(--ease-lift)}
.lpMoreCard:hover .lpMoreArrow{transform:translate(2px,-2px)}
.lpMoreArrow :global(svg){width:17px;height:17px}

/* resource-hub cards are whole-card links */
.lpResCard{text-decoration:none;cursor:pointer}
.lpResCard .lpCardTitle{transition:color .2s}
.lpResCard:hover .lpCardTitle{color:var(--lime-800)}
.lpResCard .lpCardCta{margin-top:auto}

/* contained media — logos / badges / wide banners sit ON a plain surface,
   never cover-cropped (fixes squashed customer logos in case-study rows) */
.lpMediaContain{background:linear-gradient(#fff,#FAFDF2)!important}
.lpMediaContain img{object-fit:contain!important;padding:clamp(16px,4%,40px)}
.lpRowMedia.lpMediaContain{aspect-ratio:16/10}
.lpCardMedia.lpMediaContain{aspect-ratio:16/10}
.lpCardMedia.lpMediaContain img{padding:18px}

/* feature-variant card: contained illustration/icon (image-box), not a cover crop */
.lpCardFeature .lpCardIcon{width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);margin-bottom:8px;
  background:linear-gradient(150deg,var(--lime-50),#fff);border:1px solid var(--border);border-radius:var(--r-md);padding:12px}
.lpCardFeature .lpCardIcon img{width:100%;height:100%;object-fit:contain}

/* ==========================================================================
   COMPARISON TABLE — the signature "X vs Y vs Certinal" component.
   Highlighted Certinal column, semantic ✓/✗ marks, sticky feature column,
   horizontal scroll on narrow screens.
   ========================================================================== */
.lpCmpIntro{max-width:60ch;margin:-24px auto clamp(28px,4vh,44px);text-align:center;font-size:var(--text-md);line-height:1.6;color:var(--text-secondary)}
.lpCmpIntro :global(p){margin:0}
.lpCmpWrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;
  box-shadow:inset 0 1px #fff,0 14px 40px rgba(62,79,5,.08);-webkit-overflow-scrolling:touch}
.lpCmpTable{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;font-size:var(--text-sm)}
/* header row */
.lpCmpTable thead th{position:sticky;top:0;z-index:2;background:linear-gradient(#fff,#FAFDF2);padding:20px 18px;vertical-align:middle;border-bottom:1px solid var(--border)}
.lpCmpFeatHead{text-align:left;font-size:var(--text-md);font-weight:var(--w-primary);color:var(--n-950);letter-spacing:-.01em;min-width:180px}
.lpCmpVendor{text-align:center;min-width:150px}
.lpCmpVendor img{max-width:132px;max-height:40px;width:auto;height:auto;object-fit:contain;display:inline-block}
.lpCmpVendorName{font-weight:var(--w-primary);color:var(--n-900);font-size:var(--text-md)}
/* Certinal column — full-height lime highlight + "Recommended" cap.
   Selector is th.lpCmpVendorCert so it OUTRANKS `.lpCmpTable thead th`
   (else the generic header bg + padding win and clip the badge onto the logo). */
.lpCmpTable thead th.lpCmpVendorCert{position:relative;background:linear-gradient(var(--lime-100),var(--lime-50));
  border-left:1.5px solid var(--lime-400);border-right:1.5px solid var(--lime-400);border-top:1.5px solid var(--lime-400);
  border-top-left-radius:var(--r-md);border-top-right-radius:var(--r-md);padding-top:54px}
.lpCmpBadge{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:var(--w-button);
  letter-spacing:.1em;text-transform:uppercase;color:var(--n-950);background:var(--lime-400);border-radius:var(--r-full);padding:4px 13px;box-shadow:0 2px 8px rgba(121,150,27,.32)}
/* body */
.lpCmpRowLabel{text-align:left;font-weight:var(--w-primary);color:var(--n-900);padding:16px 18px;vertical-align:middle;border-bottom:1px solid var(--n-100);background:#fff}
.lpCmpTable tbody tr:nth-child(even) .lpCmpRowLabel{background:#FCFDF9}
.lpCmpCell{text-align:center;padding:16px 18px;vertical-align:middle;border-bottom:1px solid var(--n-100);color:var(--text-secondary);line-height:1.5}
.lpCmpTable tbody tr:nth-child(even) .lpCmpCell{background:#FCFDF9}
.lpCmpCellCert{background:var(--lime-50)!important;border-left:1.5px solid var(--lime-400);border-right:1.5px solid var(--lime-400);color:var(--n-900);font-weight:var(--w-text)}
.lpCmpTable tbody tr:last-child .lpCmpCellCert{border-bottom:1.5px solid var(--lime-400);border-bottom-left-radius:var(--r-md);border-bottom-right-radius:var(--r-md)}
.lpCmpMark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-full);margin-bottom:6px}
.lpCmpMark :global(svg){width:14px;height:14px}
.lpCmpYes{background:var(--success-bg,#e6f4ea);color:var(--success,#2e7d32)}
.lpCmpNo{background:#fdecec;color:#c0392b}
.lpCmpText{display:block;font-size:var(--text-sm);max-width:24ch;margin:0 auto}
.lpCmpCell:has(.lpCmpText):not(:has(.lpCmpMark)) .lpCmpText{color:var(--n-900);font-weight:var(--w-primary)}

/* ==========================================================================
   STATS BAND — dark surface, lime gradient numbers ("Global Scale")
   ========================================================================== */
.lpStats{position:relative;overflow:hidden;margin:clamp(40px,7vh,88px) 0;padding:clamp(48px,8vh,96px) 0;
  background:radial-gradient(120% 120% at 82% 12%,#1c2b17 0%,#0f1410 46%,#0a0c0a 100%)}
.lpStats::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(205,247,87,.14) 1px,transparent 1.4px);background-size:26px 26px;opacity:.5;
  -webkit-mask-image:radial-gradient(80% 90% at 78% 40%,#000,transparent 72%);mask-image:radial-gradient(80% 90% at 78% 40%,#000,transparent 72%)}
.lpStats::after{content:"";position:absolute;right:-20%;top:50%;transform:translateY(-50%);width:min(600px,64%);aspect-ratio:1;pointer-events:none;opacity:.5;
  background:url('/assets/patterns/layered-circle.svg') no-repeat center/contain;
  -webkit-mask-image:linear-gradient(to left,#000 34%,transparent 78%);mask-image:linear-gradient(to left,#000 34%,transparent 78%)}
@media (prefers-reduced-motion:no-preference){
  .lpStats::after{animation:certBreathe 11s ease-in-out infinite}
  .lpCloseInner::after{animation:certBreathe 8s ease-in-out .4s infinite,certDrift 15s ease-in-out infinite}
}
.lpStats .container{position:relative;z-index:1}
.lpStatsHead{max-width:36ch;margin-bottom:clamp(32px,5vh,52px)}
.lpStatsEyebrow{font-size:11px;font-weight:var(--w-primary);letter-spacing:.18em;text-transform:uppercase;color:var(--lime-300);margin:0 0 12px}
.lpStatsTitle{font-size:var(--h2);line-height:var(--lh-h2);font-weight:var(--w-primary);letter-spacing:-.025em;color:#fff;margin:0}
.lpStatsGrid{display:grid;gap:clamp(24px,3vw,44px) clamp(28px,4vw,64px);grid-template-columns:repeat(3,1fr)}
.lpStat{border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
.lpStatNum{font-size:clamp(2.2rem,3.6vw,3.1rem);font-weight:var(--w-stat);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#eaf9bf,var(--lime-400));-webkit-background-clip:text;background-clip:text;color:transparent}
.lpStatLabel{margin-top:12px;font-size:var(--text-md);font-weight:var(--w-primary);color:#f2f4ee}
.lpStatSub{margin-top:6px;font-size:var(--text-sm);line-height:1.5;color:rgba(226,232,214,.6)}

/* ==========================================================================
   LOGO WALL — trusted-by customer / badge logos on white tiles
   ========================================================================== */
.lpLogosSection{background:linear-gradient(#fff,#FAFDF2)}
.lpLogoWall{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,15vw,196px),1fr));gap:clamp(14px,1.6vw,20px)}
.lpLogoTile{display:flex;align-items:center;justify-content:center;min-height:104px;padding:22px 26px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:inset 0 1px #fff,0 5px 16px rgba(62,79,5,.05);
  transition:transform .3s var(--ease-lift),box-shadow .3s,border-color .3s}
.lpLogoTile:hover{transform:translateY(-3px);border-color:rgba(153,186,53,.5);box-shadow:0 14px 30px rgba(121,150,27,.13)}
.lpLogoTile img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.lpFaqContainer{max-width:860px}
.lpFaqList{display:flex;flex-direction:column;gap:14px}
.lpFaqItem{background:linear-gradient(#fff,#FDFFF7);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:inset 0 1px #fff,0 6px 18px rgba(62,79,5,.05);transition:border-color .24s,box-shadow .24s}
.lpFaqItem[open]{border-color:rgba(153,186,53,.5);box-shadow:0 14px 32px rgba(121,150,27,.12)}
.lpFaqQ{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;list-style:none;
  padding:20px 24px;font-size:var(--text-lg);font-weight:var(--w-primary);color:var(--n-950);line-height:1.4}
.lpFaqQ::-webkit-details-marker{display:none}
.lpFaqIcon{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-full);
  background:var(--lime-100);color:var(--lime-800);transition:transform .28s var(--ease-lift),background .24s}
.lpFaqIcon :global(svg){width:15px;height:15px}
.lpFaqItem[open] .lpFaqIcon{transform:rotate(45deg);background:var(--lime-400);color:var(--n-950)}
.lpFaqA{padding:0 24px 22px;font-size:var(--text-md);line-height:1.72;color:var(--text-secondary)}
.lpFaqA :global(p){margin:0 0 .6em}
.lpFaqA :global(p):last-child{margin-bottom:0}
.lpFaqA :global(a){color:var(--lime-800);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:768px){
  .lpSection{padding:clamp(48px,8vh,72px) 0}
  .lpCards{grid-template-columns:1fr}
  .lpRow{grid-template-columns:1fr;gap:22px}
  .lpRow:nth-child(even) .lpRowMedia{order:0}
  .lpSplit{grid-template-columns:1fr;gap:26px}
  .lpSplitFlip .lpSplitText{order:0}
  .lpMoreGrid{grid-template-columns:1fr}
  .lpMoreHead{flex-direction:column;align-items:flex-start;gap:8px}
  .lpHeroActions{flex-direction:column;align-items:stretch;width:100%;max-width:320px}
  .lpBtn,.lpBtnGhost{justify-content:center}
  .lpStatsGrid{grid-template-columns:1fr 1fr;gap:22px 24px}
  .lpCmpText{font-size:var(--text-xs)}
  .lpFaqQ{padding:16px 18px;font-size:var(--text-md)}
  .lpFaqA{padding:0 18px 18px}
}
@media (max-width:480px){
  .lpStatsGrid{grid-template-columns:1fr}
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .lpCard,.lpCardMedia img,.lpGalleryItem,.lpMoreCard,.lpBtn,.lpBtnArrow{transition:none!important}
  .lpCard:hover .lpCardMedia img,.lpRow:hover .lpRowMedia img{transform:none}
  .lpCloseInner::before{animation:none!important}
}