/* ==========================================================================
   KIPX promotional orbit, approved CTA and FAQ - landing page only.
   Loaded from app/Views/pages/landing.php through $seoHead; nothing else
   on the site references these classes.

   The official KIPX logo sits flat and unaltered in the centre. A ring
   lies in a real CSS 3D plane around it, so its far half passes behind
   the logo and its near half in front, and the whole orbit sways gently
   in 3D. The whole thing is one link to www.kipx.in (new tab).

   States
   - default (no JS, or prefers-reduced-motion): a still 3D pose, the URL on
     the far side of the ring, and the logo with its strapline in front.
   - html.kx-motion: set in <head> before first paint when motion is
     allowed; the three messages share one fixed box and cross-fade, so
     switching modes never changes the height of anything.
   - .is-paused: the visitor pressed pause; everything holds where it is.
   ========================================================================== */

.kx-promo{
  --kx-blue:#0c74c7;             /* the logo's own blue */
  --kx-gold:#b8913a;
  --kx-gold-2:#e2c46e;
  --kx-band-a:rgba(12,116,199,.03);
  --kx-band-b:rgba(255,255,255,.75);
  --kx-ink-url:#0a3d6b;
  --kx-floor:rgba(10,30,60,.22);
  --kx-logo-glow:rgba(255,255,255,.95);
  position:relative;
  width:100%;
  max-width:480px;
  margin:0 auto 22px;
}
/* Give back most of the height the promo adds, so the heading and the call
   to action stay where a visitor expects them. Browsers without :has() keep
   the original padding. */
.hero:has(.kx-promo){padding-top:24px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .kx-promo{
    --kx-gold:#e2c46e;--kx-gold-2:#f5e2a6;
    --kx-band-a:rgba(255,255,255,.01);--kx-band-b:rgba(120,180,255,.16);
    --kx-ink-url:#9fc8ff;--kx-floor:rgba(0,0,0,.55);--kx-logo-glow:rgba(255,255,255,.22);
  }
}
:root[data-theme="dark"] .kx-promo{
  --kx-gold:#e2c46e;--kx-gold-2:#f5e2a6;
  --kx-band-a:rgba(255,255,255,.01);--kx-band-b:rgba(120,180,255,.16);
  --kx-ink-url:#9fc8ff;--kx-floor:rgba(0,0,0,.55);--kx-logo-glow:rgba(255,255,255,.22);
}

/* ---------- the link ---------- */
.kx-promo__link{
  position:relative;display:block;
  color:inherit;text-decoration:none;
  border-radius:50% / 44%;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.kx-promo__link:hover,.kx-promo__link:focus{color:inherit;text-decoration:none}
.kx-promo__link:focus-visible{outline:2px solid var(--kx-gold);outline-offset:6px}

/* ---------- the 3D stage (reserves its own height: no layout shift) ---------- */
.kx-promo__stage{
  position:relative;display:block;
  width:100%;
  aspect-ratio:640 / 300;
  perspective:1100px;
  perspective-origin:50% 30%;
  user-select:none;-webkit-user-select:none;
}
.kx-world{position:absolute;inset:0;transform-style:preserve-3d}
.kx-gimbal{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--kx-gx,0deg)) rotateY(var(--kx-gy,-7deg));
}
.kx-plane{
  position:absolute;left:50%;top:50%;
  width:88%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(70deg);
  transform-style:preserve-3d;
}
.kx-plane--tilt{width:80%;transform:translate(-50%,-50%) rotateZ(-14deg) rotateX(74deg)}
.kx-plane svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.kx-band-a{stop-color:var(--kx-band-a)}
.kx-band-b{stop-color:var(--kx-band-b)}
.kx-arc-a{stop-color:var(--kx-blue)}
.kx-arc-b{stop-color:var(--kx-gold-2)}
.kx-band{fill:none;stroke-width:40}
.kx-ring-inner{fill:none;stroke:var(--kx-blue);stroke-width:1.2;opacity:.35}
.kx-ring-halo{fill:none;stroke:var(--kx-gold-2);stroke-width:7;opacity:.35;transition:opacity .3s ease}
.kx-ring{fill:none;stroke-width:3.4}
.kx-beads circle{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1 21;opacity:.95}
.kx-beads{transform-origin:200px 200px}
html.kx-motion .kx-beads{animation:kx-spin 40s linear infinite}
@keyframes kx-spin{to{transform:rotate(360deg)}}
.kx-orbit2{fill:none;stroke:var(--kx-gold);stroke-width:1.6;stroke-dasharray:2 9;opacity:.55}
.kx-url{
  font-family:var(--mono, ui-monospace, monospace);
  font-size:34px;font-weight:600;letter-spacing:.06em;
  fill:var(--kx-ink-url);
}
.kx-sat{fill:var(--kx-gold-2);stroke:var(--kx-gold);stroke-width:2}
.kx-sat-halo{fill:var(--kx-gold-2);opacity:.8}
.kx-trail{fill:var(--kx-gold-2)}
.kx-trail:nth-of-type(1){opacity:.6}
.kx-trail:nth-of-type(2){opacity:.38}
.kx-trail:nth-of-type(3){opacity:.2}

/* soft shadow on the "floor" under the orbit */
.kx-floor{
  position:absolute;left:16%;right:16%;bottom:0;height:16%;
  border-radius:50%;
  background:radial-gradient(closest-side,var(--kx-floor),transparent);
  filter:blur(6px);
}

/* sparkles hang at different depths, so they drift with the orbit */
.kx-sparkles{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.kx-spark{
  position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;
  transform:translateZ(var(--z));
  background:var(--kx-gold);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  opacity:.6;
}
html.kx-motion .kx-spark{animation:kx-twinkle 3.6s ease-in-out infinite;animation-delay:calc(var(--s) * -.9s)}
@keyframes kx-twinkle{0%,100%{opacity:.15;scale:.6}50%{opacity:.95;scale:1}}

/* Hover / focus: the ring brightens and the button lifts. */
.kx-promo__link:hover .kx-ring-halo,.kx-promo__link:focus-visible .kx-ring-halo{opacity:.75}

/* ---------- the flat front face: logo and words, never distorted ---------- */
.kx-promo__front{
  position:absolute;
  left:50%;top:47%;
  width:62%;height:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;
}
.kx-msg{
  display:block;margin:0;
  color:var(--ink);
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(.84rem,.74rem + .5vw,1.06rem);
  line-height:1.26;letter-spacing:-.01em;
  text-wrap:balance;
  text-shadow:0 1px 0 var(--paper, #fff),0 0 18px var(--paper, #fff);
}
.kx-kicker{
  display:block;margin-bottom:4px;
  font-size:.72em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kx-gold);
}
.kx-line{display:block}
.kx-hl{
  font-style:normal;white-space:nowrap;
  background:linear-gradient(90deg,var(--kx-gold),var(--kx-gold-2) 60%,var(--kx-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
}
.kx-msg--brand{position:relative;line-height:0}
.kx-msg--brand::before{           /* a soft light behind the logo, not on it */
  content:"";position:absolute;left:-12%;right:-12%;top:-45%;bottom:-45%;z-index:-1;
  background:radial-gradient(closest-side,var(--kx-logo-glow),transparent);
}
.kx-logo{display:inline-block;width:min(100%,250px);height:auto}
html.kx-motion .kx-msg--brand.is-on .kx-logo{animation:kx-float 5s ease-in-out infinite}
@keyframes kx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Visually hidden but read by screen readers. */
.kx-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Static mode: the logo and closing line; the opening line is in the link's name. */
.kx-msg--lead{display:none}

/* Motion mode: all three messages share one box and cross-fade. */
html.kx-motion .kx-msg{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(calc(-50% + 10px)) scale(.97);
  opacity:0;filter:blur(3px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),filter .6s ease;
}
html.kx-motion .kx-msg--lead{display:block}
html.kx-motion .kx-msg.is-on{opacity:1;transform:translateY(-50%);filter:none}

/* ---------- "Visit www.kipx.in" button on the front of the ring ---------- */
.kx-visit{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);z-index:1;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:7px 14px 7px 15px;border-radius:999px;
  font-family:var(--sans, sans-serif);font-size:.8rem;font-weight:700;letter-spacing:.01em;
  color:#1a1405;
  background:linear-gradient(180deg,#f0d993,#d9b55a);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 8px 20px -8px rgba(185,145,58,.75),0 0 0 4px var(--paper, #fff);
  transition:transform .2s ease,box-shadow .2s ease;
}
.kx-visit svg{flex:none;transition:transform .2s ease}
.kx-promo__link:hover .kx-visit,.kx-promo__link:focus-visible .kx-visit{
  transform:translateX(-50%) translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 14px 28px -10px rgba(185,145,58,.85),0 0 0 4px var(--paper, #fff);
}
.kx-promo__link:hover .kx-visit svg,.kx-promo__link:focus-visible .kx-visit svg{transform:translate(2px,-2px)}

/* Pause / play - a separate control, never inside the link. */
.kx-promo__toggle{
  display:none;
  position:absolute;right:2px;bottom:2px;z-index:2;
  width:32px;height:32px;padding:0;
  align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink-3);
  cursor:pointer;
  box-shadow:var(--sh-1);
}
html.kx-motion .kx-promo.kx-ready .kx-promo__toggle{display:inline-flex}
.kx-promo__toggle:hover{color:var(--ink);border-color:var(--ink-4)}
.kx-promo__toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kx-promo__toggle .kx-ico-play{display:none}
.kx-promo.is-paused .kx-promo__toggle .kx-ico-play{display:block}
.kx-promo.is-paused .kx-promo__toggle .kx-ico-pause{display:none}
.kx-promo.is-paused .kx-beads,.kx-promo.is-paused .kx-spark,.kx-promo.is-paused .kx-logo{animation-play-state:paused}

@media (prefers-reduced-motion: reduce){
  html.kx-motion .kx-beads,html.kx-motion .kx-spark,html.kx-motion .kx-msg--brand.is-on .kx-logo{animation:none}
  html.kx-motion .kx-msg{transition:none;filter:none}
  .kx-visit,.kx-visit svg{transition:none}
}

@media (max-width:560px){
  .kx-promo{max-width:100%;margin-bottom:20px}
  .kx-promo__stage{aspect-ratio:640 / 340}
  .kx-plane{width:92%}
  .kx-plane--tilt{width:84%}
  .kx-promo__front{width:72%;height:52%}
  .kx-logo{width:min(100%,200px)}
  .kx-promo__toggle{width:30px;height:30px;right:0;bottom:0}
  .kx-url{font-size:40px}
  .kx-visit{font-size:.76rem;padding:6px 12px 6px 13px}
}

/* ---------- the approved call to action ---------- */
.hero .row.kx-actions{flex-wrap:wrap;gap:12px}
.hero a.btn.kx-cta{
  white-space:normal;
  text-align:center;
  line-height:1.3;
  max-width:100%;
}
@media (max-width:560px){
  .hero .row.kx-actions{flex-direction:column;align-items:stretch}
  .hero .row.kx-actions .btn{width:100%;justify-content:center}
}

/* ---------- FAQ (same card treatment as the pricing page) ---------- */
.kx-faq .section-title{margin-bottom:14px}
.kx-faq .kx-faq__item{margin-bottom:8px;padding:0 !important}
.kx-faq__item > summary{
  list-style:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:15px 18px;
  cursor:pointer;
  font-weight:600;
  color:var(--ink);
  border-radius:inherit;
}
.kx-faq__item > summary::-webkit-details-marker{display:none}
.kx-faq__item > summary::after{
  content:"";flex:none;width:9px;height:9px;margin-top:6px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .2s ease;
}
.kx-faq__item[open] > summary::after{transform:rotate(-135deg);margin-top:10px}
.kx-faq__item > summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kx-faq__a{padding:0 18px 16px;color:var(--ink-3);font-size:.94rem;line-height:1.65}
.kx-faq__a p{margin:0 0 .6em}
.kx-faq__a p:last-child{margin-bottom:0}
.kx-faq__a ol{margin:.2em 0 0;padding-left:1.3em}
.kx-faq__a li{margin:.25em 0}
.kx-faq__a strong{color:var(--ink)}
@media (prefers-reduced-motion: reduce){
  .kx-faq__item > summary::after{transition:none}
}

/* ==========================================================================
   Premium landing layer (lp-*). Uses the site's own tokens, so light and
   dark themes both follow app.css. Nothing here applies outside the
   landing page, because only landing.php loads this file.
   ========================================================================== */
.lp-hero,.lp-section,.lp-showcase,.lp-basis{
  --lp-gold:#b8913a;
  --lp-gold-2:#d8b762;
  --lp-gold-tint:rgba(201,162,74,.14);
  --lp-blue-tint:rgba(50,120,226,.10);
  --lp-dot:rgba(10,30,60,.09);
  --lp-shadow:0 1px 2px rgba(10,30,60,.04),0 18px 40px -18px rgba(10,30,60,.22);
  --lp-shadow-lg:0 2px 4px rgba(10,30,60,.04),0 40px 80px -28px rgba(10,30,60,.32);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lp-hero,:root:not([data-theme="light"]) .lp-section,
  :root:not([data-theme="light"]) .lp-showcase,:root:not([data-theme="light"]) .lp-basis{
    --lp-gold:#e2c46e;--lp-gold-2:#f3dd9b;--lp-gold-tint:rgba(226,196,110,.10);--lp-blue-tint:rgba(50,120,226,.14);
    --lp-dot:rgba(255,255,255,.06);
    --lp-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.7);
    --lp-shadow-lg:0 2px 4px rgba(0,0,0,.4),0 40px 80px -28px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] .lp-hero,:root[data-theme="dark"] .lp-section,
:root[data-theme="dark"] .lp-showcase,:root[data-theme="dark"] .lp-basis{
  --lp-gold:#e2c46e;--lp-gold-2:#f3dd9b;--lp-gold-tint:rgba(226,196,110,.10);--lp-blue-tint:rgba(50,120,226,.14);
  --lp-dot:rgba(255,255,255,.06);
  --lp-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.7);
  --lp-shadow-lg:0 2px 4px rgba(0,0,0,.4),0 40px 80px -28px rgba(0,0,0,.8);
}

.lp-ico{flex:none;display:inline-block;vertical-align:middle}

/* ---------- hero ---------- */
.hero.lp-hero{position:relative;isolation:isolate;overflow:hidden;padding-bottom:72px}
.lp-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(55% 60% at 12% 0%,var(--lp-gold-tint),transparent 70%),
    radial-gradient(45% 55% at 92% 8%,var(--lp-blue-tint),transparent 72%);
}
.lp-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--lp-dot) 1px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(65% 70% at 50% 28%,#000 25%,transparent 78%);
          mask-image:radial-gradient(65% 70% at 50% 28%,#000 25%,transparent 78%);
}
.lp-hero h1{letter-spacing:-.03em}
.lp-accent{
  background:linear-gradient(100deg,var(--brand) 10%,var(--lp-gold) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.lp-eyebrow{gap:9px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.lp-pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--lp-gold, #b8913a);flex:none}
html.kx-motion .lp-pulse::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--lp-gold, #b8913a);
  animation:lp-ping 2.4s ease-out infinite;opacity:0;
}
@keyframes lp-ping{0%{transform:scale(.4);opacity:.8}80%,100%{transform:scale(1.5);opacity:0}}

.hero a.btn.kx-cta{
  gap:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 26px -10px rgba(10,30,60,.55);
  transition:transform .18s ease,box-shadow .2s ease,background .2s ease;
}
.hero a.btn.kx-cta .lp-ico{transition:transform .2s ease}
.hero a.btn.kx-cta:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 18px 34px -12px rgba(10,30,60,.6)}
.hero a.btn.kx-cta:hover .lp-ico{transform:translateX(3px)}
.hero a.btn.lp-btn-ghost{background:color-mix(in srgb,var(--paper) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.lp-trust{
  list-style:none;margin:26px auto 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  color:var(--ink-3);font-size:.88rem;
}
.lp-trust li{display:inline-flex;align-items:center;gap:7px}
.lp-trust .lp-ico{color:var(--lp-gold)}
.lp-maker{margin:18px 0 0}

/* ---------- product showcase ---------- */
.wrap.lp-showcase{position:relative;margin-top:-28px}
.lp-showcase::before{
  content:"";position:absolute;left:12%;right:12%;top:16%;bottom:-6%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 30% 50%,var(--lp-gold-tint),transparent 70%),
             radial-gradient(50% 50% at 75% 50%,var(--lp-blue-tint),transparent 70%);
  filter:blur(30px);
}
.lp-frame{
  max-width:1040px;margin:0 auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--lp-shadow-lg);
  overflow:hidden;
}
.lp-frame__bar{
  display:flex;align-items:center;gap:7px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.lp-frame__dot{width:10px;height:10px;border-radius:50%;background:var(--line)}
.lp-frame__title{margin-left:10px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:600}
.lp-compare{display:grid;grid-template-columns:1fr auto 1.15fr;align-items:center;gap:26px;padding:30px 32px 32px}
.lp-compare__col .badge{margin-bottom:12px}
.lp-compare__arrow{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:var(--lp-gold);background:var(--paper);border:1px solid var(--line);box-shadow:var(--lp-shadow);
}
.lp-panel{padding:16px 18px;border-radius:14px}
.lp-panel__mono{font-family:var(--mono);font-size:.86rem}
.lp-panel__status{font-size:1.12rem;font-weight:600;margin-top:4px}
.lp-panel--rich{box-shadow:var(--lp-shadow)}
.lp-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lp-panel__task{font-weight:650;font-size:1.05rem}
.lp-chip{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.lp-chip--critical{color:var(--critical);background:var(--critical-bg);border:1px solid var(--critical-line)}
.lp-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:12px 0 0;font-size:.88rem}
.lp-dl dt{color:var(--ink-3)}
.lp-dl dd{margin:0}
.lp-strong{font-weight:650}
.lp-compare__note{margin:12px 0 0}

/* ---------- legal basis strip ---------- */
.wrap.lp-basis{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;
  margin-top:44px;color:var(--ink-3);font-size:.9rem;
}
.lp-basis__label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.lp-basis__item{font-family:var(--serif);font-weight:600;color:var(--ink-2)}
.lp-basis__sep{width:4px;height:4px;border-radius:50%;background:var(--lp-gold)}

/* ---------- section heads ---------- */
/* app.css loads after this file, so its .wrap margin would win a tie */
.wrap.lp-section{margin-top:96px}
.lp-head{text-align:center;max-width:640px;margin:0 auto 38px}
.lp-head h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem);letter-spacing:-.025em;margin:6px 0 10px}
.lp-kicker{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-gold)}
.lp-lead{color:var(--ink-3);font-size:1.02rem;margin:0}
.lp-head--left{text-align:left;margin:0}

/* ---------- steps ---------- */
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:none}
.lp-step{
  position:relative;display:flex;flex-direction:column;gap:4px;
  padding:20px 18px 18px;border-radius:16px;
  background:var(--paper);border:1px solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lp-step:hover{border-color:color-mix(in srgb,var(--lp-gold) 45%,var(--line));box-shadow:var(--lp-shadow)}
.lp-step__n{
  font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--lp-gold);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;
}
.lp-step__n::after{content:"";height:1px;width:28px;background:linear-gradient(90deg,var(--lp-gold),transparent)}
.lp-step__t{font-family:var(--serif);font-size:1.02rem;color:var(--ink)}
.lp-step__d{color:var(--ink-3);font-size:.9rem;line-height:1.45}

/* ---------- features ---------- */
.lp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-feature{
  position:relative;padding:26px 24px 24px;border-radius:18px;
  background:var(--paper);border:1px solid var(--line);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.lp-feature::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(80% 60% at 0% 0%,var(--lp-gold-tint),transparent 70%);
  transition:opacity .25s ease;
}
.lp-feature:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow);border-color:color-mix(in srgb,var(--lp-gold) 35%,var(--line))}
.lp-feature:hover::before{opacity:1}
.lp-feature__icon{
  position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:16px;
  color:var(--brand);background:var(--brand-tint);border:1px solid var(--brand-line);
}
.lp-feature h3{position:relative;font-size:1.06rem;margin:0 0 .45em;letter-spacing:-.01em}
.lp-feature p{position:relative;margin:0;color:var(--ink-3);font-size:.93rem;line-height:1.6}

/* ---------- FAQ ---------- */
.lp-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:56px;align-items:start}
.lp-faq .lp-head{position:sticky;top:96px}
.lp-faq__links{display:flex;flex-direction:column;gap:8px;margin:22px 0 0}
.lp-faq__links a{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem;color:var(--brand);text-decoration:none}
.lp-faq__links a:hover{text-decoration:underline}
.lp-faq .kx-faq__item{border-radius:16px !important;transition:box-shadow .2s ease,border-color .2s ease}
.lp-faq .kx-faq__item[open]{box-shadow:var(--lp-shadow);border-color:color-mix(in srgb,var(--lp-gold) 40%,var(--line))}
.lp-faq .kx-faq__item > summary{padding:18px 20px;font-size:1rem}
.lp-faq .kx-faq__a{padding:0 20px 18px}

/* ---------- closing call to action ---------- */
.lp-cta{
  position:relative;overflow:hidden;isolation:isolate;
  text-align:center;padding:64px 28px;border-radius:28px;color:#fff;
  background:
    radial-gradient(55% 90% at 88% -10%,rgba(226,196,110,.32),transparent 60%),
    radial-gradient(45% 80% at 5% 110%,rgba(50,120,226,.35),transparent 60%),
    linear-gradient(135deg,#0a1e3c 0%,#10305c 100%);
  box-shadow:0 40px 80px -36px rgba(10,30,60,.6);
}
.lp-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.2px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent 80%);
          mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent 80%);
}
.lp-cta h2{color:#fff;font-size:clamp(1.5rem,1.1rem + 1.7vw,2.3rem);letter-spacing:-.025em;margin:0 auto .45em;max-width:24ch}
.wrap .lp-cta p{color:rgba(255,255,255,.78);max-width:52ch;margin:0 auto 28px}  /* beats .rgv2 main p */
.lp-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.lp-cta a.btn.lp-btn-gold{
  gap:10px;background:linear-gradient(180deg,#ecd38a,#d9b55a);color:#1a1405;border-color:transparent;font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 14px 30px -12px rgba(217,181,90,.65);
  transition:transform .18s ease,box-shadow .2s ease;
}
.lp-cta a.btn.lp-btn-gold:hover{transform:translateY(-1px);color:#1a1405}
.lp-cta a.btn.lp-btn-gold .lp-ico{transition:transform .2s ease}
.lp-cta a.btn.lp-btn-gold:hover .lp-ico{transform:translateX(3px)}
.lp-cta a.btn.lp-btn-glass{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.lp-cta a.btn.lp-btn-glass:hover{background:rgba(255,255,255,.14);color:#fff}
.lp-cta a.btn:focus-visible,.hero a.btn:focus-visible{outline:2px solid var(--lp-gold, #b8913a);outline-offset:3px}

/* ---------- scroll reveal (only once JS has confirmed motion is welcome) ---------- */
html.lp-reveal [data-reveal]:not(.is-in){opacity:0;transform:translateY(18px)}
html.lp-reveal [data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 80ms)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .lp-steps{grid-template-columns:repeat(2,1fr)}
  .lp-features{grid-template-columns:repeat(2,1fr)}
  .lp-faq{grid-template-columns:1fr;gap:28px}
  .lp-faq .lp-head{position:static}
  .lp-head--left{text-align:center;margin:0 auto}
  .lp-faq__links{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:8px 20px}
}
@media (max-width:720px){
  .lp-compare{grid-template-columns:1fr;padding:22px 18px 24px;gap:18px}
  .lp-compare__arrow{transform:rotate(90deg);margin:0 auto}
  .wrap.lp-showcase{margin-top:-16px}
  .wrap.lp-section{margin-top:72px}
}
@media (max-width:560px){
  .lp-steps,.lp-features{grid-template-columns:1fr}
  .lp-trust{flex-direction:column;align-items:center;gap:8px}
  .lp-cta{padding:44px 20px;border-radius:22px}
  .lp-cta__actions .btn{width:100%;justify-content:center}
  .lp-basis__sep{display:none}
  .wrap.lp-basis{flex-direction:column;gap:6px;text-align:center}
}

/* The installed-app shell (html.rgv2) removes .wrap padding and lets its own
   cards run edge to edge; these sections need a gutter to read as cards. */
html.rgv2 .wrap.lp-showcase,html.rgv2 .wrap.lp-section,html.rgv2 .wrap.lp-basis{padding-left:16px;padding-right:16px}

@media (prefers-reduced-motion: reduce){
  .lp-feature,.lp-step,.hero a.btn.kx-cta,.lp-cta a.btn.lp-btn-gold,.lp-feature .lp-ico,.hero a.btn.kx-cta .lp-ico{transition:none}
  .lp-feature:hover,.hero a.btn.kx-cta:hover,.lp-cta a.btn.lp-btn-gold:hover{transform:none}
  html.kx-motion .lp-pulse::after{animation:none}
}