/* Landing page (2026-11-15 redesign). Layout language: warm paper, navy ink, one saffron accent,
   Geist display + IBM Plex Sans text + Geist Mono labels, numbered cards, a dark "ink" band.
   Everything is scoped under .lp so the shared app bar and footer (site.js / ui.css) are untouched. */
.lp{
  --lp-paper:#F7F9F9; --lp-card:#FFFFFF; --lp-ink:#202B36; --lp-ink-2:#596675; --lp-line:#DCE3E8; --lp-soft:#EEF2F4;
  --lp-acc:#14665F; --lp-acc-ink:#10554F; --lp-acc-soft:#E8F3F0; --lp-on-acc:#FFFFFF; --lp-acc-rgb:20 102 95; --lp-ok:#14665F; --lp-ok-soft:#E8F3F0; --lp-on-dark:#7FD1C4;
  --lp-band:#14231F; --lp-band-2:#1B2E29; --lp-band-ink:#F5F3EE; --lp-band-mute:#A9B3C2; --lp-band-line:rgb(255 255 255 / 10%);
  --lp-e1:0 0 0 1px rgb(27 36 51 / 6%), 0 1px 2px rgb(27 36 51 / 6%);
  --lp-e2:0 0 0 1px rgb(27 36 51 / 5%), 0 2px 4px rgb(27 36 51 / 4%), 0 8px 20px -6px rgb(27 36 51 / 10%);
  --lp-e3:0 0 0 1px rgb(27 36 51 / 5%), 0 4px 8px rgb(27 36 51 / 4%), 0 24px 48px -12px rgb(27 36 51 / 18%), 0 40px 80px -32px rgb(var(--lp-acc-rgb) / 16%);
  --lp-display:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --lp-text:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans Devanagari",sans-serif;
  --lp-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --lp-ease:cubic-bezier(.22,1,.36,1);
  --lp-w:1280px;
  background:var(--lp-paper); color:var(--lp-ink); font-family:var(--lp-text); overflow-x:clip;
}
:root[data-theme="dark"] .lp{
  --lp-paper:#10171B; --lp-card:#172026; --lp-ink:#E4EAEE; --lp-ink-2:#9AA9B4; --lp-line:#2A363E; --lp-soft:#1B252C;
  --lp-acc:#5BBFB1; --lp-acc-ink:#79CEC2; --lp-acc-soft:rgba(91,191,177,.14); --lp-on-acc:#0B1F1C; --lp-acc-rgb:91 191 177; --lp-ok:#5BBFB1; --lp-ok-soft:rgb(91 191 177 / 14%);
  --lp-band:#0C1215; --lp-band-2:#141D22;
  --lp-e1:0 0 0 1px rgb(255 255 255 / 6%); --lp-e2:0 0 0 1px rgb(255 255 255 / 7%), 0 8px 20px -6px rgb(0 0 0 / 50%);
  --lp-e3:0 0 0 1px rgb(255 255 255 / 8%), 0 24px 48px -12px rgb(0 0 0 / 60%);
}
body.lp-body{ background:var(--color-bg); }
.lp *{ box-sizing:border-box; }
.lp a{ color:inherit; }
.lp-wrap{ max-width:var(--lp-w); margin-inline:auto; padding-inline:clamp(16px,4vw,40px); }
.lp-sec{ padding-block:clamp(56px,8vw,112px); }
.lp-eyebrow{ font:600 12px/1.2 var(--lp-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--lp-acc-ink); margin:0 0 14px; display:inline-flex; align-items:center; gap:8px; }
.lp-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--lp-acc); }
.lp-h2{ font:600 clamp(30px,3.6vw,46px)/1.08 var(--lp-display); letter-spacing:-.025em; margin:0 0 16px; max-width:20ch; text-wrap:balance; }
.lp-h2 em{ font-style:normal; color:var(--lp-acc); }
.lp-lead{ font-size:clamp(16px,1.4vw,18.5px); line-height:1.6; color:var(--lp-ink-2); margin:0; max-width:62ch; }
.lp-head{ margin-bottom:clamp(32px,4vw,56px); }

/* buttons */
.lp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border-radius:10px;
  font:600 15.5px var(--lp-text); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .2s var(--lp-ease), background .2s, box-shadow .2s; white-space:nowrap; }
.lp-btn:active{ transform:scale(.97); }
.lp-btn .ar{ transition:transform .3s var(--lp-ease); }
.lp-btn:hover .ar{ transform:translateX(3px); }
.lp-btn-p{ background:var(--lp-acc); color:var(--lp-on-acc); box-shadow:inset 0 1px 0 rgb(255 255 255 / 18%), 0 1px 2px rgb(27 36 51 / 20%), 0 6px 14px -6px rgb(var(--lp-acc-rgb) / 55%); }
.lp-btn-p:hover{ background:var(--lp-acc-ink); }
.lp-btn-s{ background:var(--lp-card); color:var(--lp-ink); border-color:var(--lp-line); box-shadow:var(--lp-e1); }
.lp-btn-s:hover{ border-color:var(--lp-ink-2); }
.lp .lp-btn-p{ color:var(--lp-on-acc); }

/* ---------------- hero ---------------- */
.lp-hero{ position:relative; padding-block:clamp(28px,4.2vh,64px) clamp(36px,5vh,56px); }
.lp-hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgb(27 36 51 / 7%) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 45%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 70% 45%, #000 20%, transparent 75%); }
:root[data-theme="dark"] .lp-hero::before{ background-image:radial-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px); }
.lp-hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,56px); align-items:center; }
.lp-h1{ font:600 clamp(40px,5.6vw,72px)/1.02 var(--lp-display); letter-spacing:-.035em; margin:0 0 22px; text-wrap:balance; }
.lp-h1 .acc{ color:var(--lp-acc); display:block; }
.lp-hero .lp-lead{ margin-bottom:28px; font-size:clamp(16.5px,1.5vw,19px); }
.lp-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.lp-free{ margin:16px 0 0; font-size:14.5px; color:var(--lp-ink-2); display:flex; gap:8px; align-items:flex-start; }
.lp-free b{ color:var(--lp-ink); font-weight:600; }
.lp-free svg{ flex:none; margin-top:2px; color:var(--lp-ok); }

/* walkthrough video: autoplays muted in the hero, captions on, "Tap for sound" restarts it with sound */
.lp-vid{ position:relative; margin:0; }
.lp-vframe .lp-bar{ position:absolute; top:0; left:0; right:0; z-index:2; background:rgb(250 248 244 / 92%); }
:root[data-theme="dark"] .lp-vframe .lp-bar{ background:rgb(22 30 41 / 92%); }
.lp-vframe video{ position:absolute; inset:32px 0 0; width:100%; height:calc(100% - 32px); object-fit:contain; background:#000; }
.lp-vframe{ position:relative; border-radius:16px; overflow:hidden; background:#0B1017; box-shadow:var(--lp-e3); aspect-ratio:16/9.6; }
.lp-snd{ position:absolute; right:12px; top:44px; z-index:3; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid rgb(255 255 255 / 25%);
  background:rgb(16 23 27 / 74%); color:#fff; font:600 13.5px var(--lp-text); cursor:pointer; }
.lp-snd:hover{ background:rgb(16 23 27 / 90%); }
.lp-snd[hidden],.lp-vplay[hidden]{ display:none; }
.lp-vplay{ position:absolute; inset:32px 0 0; z-index:2; display:grid; place-items:center; background:transparent; border:0; cursor:pointer; }
.lp-vplay span{ width:72px; height:72px; border-radius:50%; background:var(--lp-acc); color:var(--lp-on-acc); display:grid; place-items:center; box-shadow:0 10px 30px rgb(var(--lp-acc-rgb) / 45%); }
.lp-vmsg{ position:absolute; left:12px; right:12px; bottom:12px; z-index:3; padding:10px 12px; border-radius:10px; background:#FEF3F2; color:#B42318; font-size:14px; }
.lp-vcap{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; font-size:14px; color:var(--lp-ink-2); }
.lp-vcap button{ border:0; background:none; padding:0; font:600 14px var(--lp-text); color:var(--lp-acc-ink); cursor:pointer; }
@keyframes lp-float{ 50%{ transform:translateY(-6px); } }
@keyframes lp-pop2{ from{ opacity:0; transform:translateY(14px); } }
@keyframes lp-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgb(var(--lp-acc-rgb) / 45%); } 50%{ box-shadow:0 0 0 6px rgb(var(--lp-acc-rgb) / 0%); } }
.lp-hero .lp-word{ display:inline-block; opacity:0; transform:translateY(.35em); animation:lp-word .9s var(--lp-ease) forwards; animation-delay:var(--d,0s); }
@keyframes lp-word{ to{ opacity:1; transform:none; } }

/* ---------------- numbers strip ---------------- */
.lp-nums{ border-block:1px solid var(--lp-line); background:var(--lp-card); }
.lp-nums ul{ list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
.lp-nums li{ padding:22px clamp(10px,1.6vw,22px); border-left:1px solid var(--lp-line); }
.lp-nums li:first-child{ border-left:0; }
.lp-nums b{ display:block; font:600 clamp(24px,2.4vw,32px)/1 var(--lp-display); letter-spacing:-.02em; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.lp-nums span span{ display:inline; white-space:nowrap; }
.lp-nums span{ display:block; font:500 11.5px/1.35 var(--lp-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--lp-ink-2); }

/* ---------------- problem cards ---------------- */
.lp-three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.lp-card{ background:var(--lp-card); border-radius:16px; box-shadow:var(--lp-e2); padding:26px 24px; transition:transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease); }
.lp-card:hover{ transform:translateY(-3px); box-shadow:var(--lp-e3); }
.lp-num{ font:600 13px/1 var(--lp-mono); color:var(--lp-acc-ink); letter-spacing:.08em; margin-bottom:18px; display:block; }
.lp-card h3{ font:600 21px/1.25 var(--lp-display); letter-spacing:-.015em; margin:0 0 10px; }
.lp-card p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--lp-ink-2); }
.lp-card .fix{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--lp-line); font-size:14.5px; color:var(--lp-ink); }
.lp-card .fix b{ color:var(--lp-ok); font-weight:600; }

/* ---------------- journey ---------------- */
.lp-journey{ background:var(--lp-soft); }
.lp-steps{ display:flex; flex-direction:column; gap:clamp(56px,7vw,96px); }
.lp-step{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(20px,3vw,44px); align-items:center; scroll-margin-top:140px; }
.lp-stage{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font:600 12px/1 var(--lp-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--lp-ink-2); }
.lp-stage b{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--lp-ink); color:var(--lp-paper); font:600 13px var(--lp-mono); letter-spacing:0; }
.lp-step h3{ font:600 clamp(24px,2.5vw,32px)/1.12 var(--lp-display); letter-spacing:-.022em; margin:0 0 12px; text-wrap:balance; }
.lp-step .say{ font-size:16.5px; line-height:1.6; color:var(--lp-ink-2); margin:0 0 16px; }
.lp-step ul{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; }
.lp-step li{ position:relative; padding-left:26px; font-size:15.5px; line-height:1.5; }
.lp-step li::before{ content:""; position:absolute; left:2px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--lp-ok-soft);
  box-shadow:inset 0 0 0 4px var(--lp-ok-soft), inset 0 0 0 9px var(--lp-ok); }
.lp-mentor{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:var(--lp-card); box-shadow:var(--lp-e1); margin:0 0 18px; font-size:14.5px; line-height:1.5; }
.lp-mentor .av{ flex:none; width:26px; height:26px; border-radius:8px; background:var(--lp-acc-soft); color:var(--lp-acc-ink); display:grid; place-items:center; font:700 13px var(--lp-display); }
.lp-mentor b{ font-weight:600; }
.lp-go{ font:600 15px var(--lp-text); color:var(--lp-acc-ink)!important; text-decoration:none; display:inline-flex; gap:8px; align-items:center; }
.lp-go:hover .ar{ transform:translateX(3px); } .lp-go .ar{ transition:transform .3s var(--lp-ease); }

/* browser frame for screenshots */
.lp-shot{ margin:0; position:relative; }
.lp-frame{ display:block; width:100%; padding:0; border:0; background:var(--lp-card); border-radius:14px; overflow:hidden; box-shadow:var(--lp-e3); cursor:zoom-in;
  transition:transform .45s var(--lp-ease); text-align:left; }
.lp-frame:hover{ transform:translateY(-4px); }
.lp-bar{ display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-bottom:1px solid var(--lp-line); background:var(--lp-soft); }
.lp-bar i{ width:9px; height:9px; border-radius:50%; background:var(--lp-line); }
.lp-bar span{ margin-left:10px; flex:1; max-width:340px; height:20px; border-radius:6px; background:var(--lp-card); font:500 11px/20px var(--lp-mono); color:var(--lp-ink-2); padding:0 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lp-frame img{ display:block; width:100%; height:auto; aspect-ratio:1080/676; background:var(--lp-soft); }
.lp-tag{ position:absolute; bottom:12px; right:12px; font:600 10.5px/1 var(--lp-mono); letter-spacing:.1em; text-transform:uppercase; padding:5px 8px; border-radius:6px;
  background:rgb(20 28 40 / 78%); color:#fff; pointer-events:none; }
.lp-shot figcaption{ margin-top:12px; font-size:13.5px; color:var(--lp-ink-2); }
.lp-duo{ position:relative; padding-bottom:22%; }
.lp-duo .lp-frame:first-child{ width:84%; }
.lp-duo .lp-frame + .lp-frame{ position:absolute; right:0; bottom:0; width:62%; }

.lp-ready{ margin-top:clamp(48px,6vw,80px); display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:26px 28px; border-radius:18px;
  background:var(--lp-ink); color:var(--lp-paper); }
.lp-ready h3{ margin:0 0 6px; font:600 24px/1.2 var(--lp-display); letter-spacing:-.02em; }
.lp-ready p{ margin:0; color:var(--lp-band-mute); font-size:15.5px; max-width:60ch; }


/* ---------------- journey progress + pinned scroll-swap ----------------
   Stacked by default (phones, short screens, reduced motion, no JS). landing.js adds .pinned when the
   screen is big enough: the panel sticks under the app bar, the page appears still, and each stretch
   of scrolling swaps the text (left) and screenshot (right) for the next step. */
.lp-prog{ display:flex; align-items:center; gap:18px; margin-bottom:28px; }
.lp-count{ flex:none; font:600 13px/1 var(--lp-mono); color:var(--lp-ink-2); letter-spacing:.06em; min-width:62px; }
.lp-count b{ color:var(--lp-acc); font-size:15px; }
.lp-prog ol{ flex:1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px; }
.lp-prog a{ display:block; text-decoration:none; color:var(--lp-ink-2); font:500 12px/1.25 var(--lp-text); }
.lp-prog a i{ display:block; height:4px; border-radius:4px; background:var(--lp-line); margin-bottom:8px; position:relative; overflow:hidden; }
.lp-prog a i::after{ content:""; position:absolute; inset:0; background:var(--lp-acc); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--lp-ease); }
.lp-prog li.done a i::after,.lp-prog li.on a i::after{ transform:scaleX(1); }
.lp-prog li.on a{ color:var(--lp-ink); font-weight:600; }
.lp-prog a:hover{ color:var(--lp-ink); }
.lp-prog span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-scrolly:not(.pinned) .lp-prog{ display:none; }

.lp-scrolly.pinned .lp-pin{ position:sticky; top:var(--lp-top,64px); height:calc(100vh - var(--lp-top,64px)); height:calc(100svh - var(--lp-top,64px));
  display:flex; flex-direction:column; justify-content:center; padding-block:20px 28px; }
.lp-scrolly.pinned .lp-steps{ position:relative; flex:1; display:block; min-height:0; }
.lp-scrolly.pinned .lp-step{ position:absolute; inset:0; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); align-items:center; visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .7s; }
.lp-scrolly.pinned .lp-step.on{ visibility:visible; pointer-events:auto; transition:none; }
/* the swap: outgoing slides up and fades, incoming rises from below; the screenshot follows a beat later */
.lp-js .lp-scrolly.pinned .lp-step .lp-stxt,
.lp-js .lp-scrolly.pinned .lp-step .lp-shot{ opacity:0; transform:translateY(48px); transition:opacity .55s var(--lp-ease), transform .7s var(--lp-ease); transition-delay:0s; }
.lp-js .lp-scrolly.pinned .lp-step .lp-shot{ transform:translateY(64px) scale(.96); }
.lp-js .lp-scrolly.pinned .lp-step.past .lp-stxt{ transform:translateY(-48px); }
.lp-js .lp-scrolly.pinned .lp-step.past .lp-shot{ transform:translateY(-64px) scale(.96); }
.lp-js .lp-scrolly.pinned .lp-step.on .lp-stxt{ opacity:1; transform:none; transition-delay:.12s; }
.lp-js .lp-scrolly.pinned .lp-step.on .lp-shot{ opacity:1; transform:none; transition-delay:.22s; }
.lp-scrolly.pinned .lp-shot{ width:min(100%, calc((100vh - var(--lp-top,64px) - 330px) * 1.6)); justify-self:end; }
/* the section heading stays on screen with the steps while they swap */
.lp-scrolly.pinned .lp-jhead{ margin-bottom:18px; }
.lp-scrolly.pinned .lp-jhead .lp-h2{ font-size:clamp(28px,3vw,40px); max-width:none; margin-bottom:8px; }
.lp-scrolly.pinned .lp-jhead .lp-lead{ font-size:16px; max-width:80ch; }
.lp-scrolly.pinned .lp-prog{ margin-bottom:8px; }
@media (max-height:860px){ .lp-scrolly.pinned .lp-jhead .lp-lead{ display:none; } .lp-scrolly.pinned .lp-shot{ width:min(100%, calc((100vh - var(--lp-top,64px) - 260px) * 1.6)); } }
.lp-scrolly.pinned .lp-pin{ justify-content:flex-start; padding-top:clamp(16px,3vh,32px); }
.lp-scrolly.pinned .lp-step h3{ font-size:clamp(24px,2.3vw,32px); }
.lp-scrolly.pinned .lp-step .say{ margin-bottom:14px; }
.lp-scrolly.pinned .lp-step ul{ margin-bottom:16px; gap:7px; }
.lp-scrolly.pinned .lp-step .lp-mentor{ margin-bottom:14px; }
.lp-scrolly.pinned .lp-frame:hover{ transform:none; }
.lp-skip{ flex:none; font:600 13px var(--lp-text); color:var(--lp-ink-2)!important; text-decoration:none; padding:6px 10px; border-radius:8px; border:1px solid var(--lp-line); background:var(--lp-card); }
.lp-skip:hover{ color:var(--lp-ink)!important; border-color:var(--lp-ink-2); }
.lp-scrolly:not(.pinned) .lp-skip{ display:none; }
/* one snap point per step: a scroll gesture settles on a step instead of stopping between two */
:root.lp-snap{ scroll-snap-type:y proximity; }
.lp-snapper{ position:absolute; left:0; width:1px; height:1px; scroll-snap-align:start; pointer-events:none; }
.lp-prog a{ cursor:pointer; }

/* ---------------- compare ---------------- */
.lp-tw{ overflow-x:auto; border-radius:16px; box-shadow:var(--lp-e2); background:var(--lp-card); }
.lp-cmp{ width:100%; border-collapse:collapse; min-width:640px; font-size:15px; }
.lp-cmp th,.lp-cmp td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--lp-line); vertical-align:top; }
.lp-cmp thead th{ font:600 12px/1.2 var(--lp-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--lp-ink-2); background:var(--lp-soft); }
.lp-cmp thead th.us{ color:var(--lp-acc-ink); background:var(--lp-acc-soft); }
.lp-cmp tbody th{ font-weight:600; width:34%; }
.lp-cmp td.us{ background:color-mix(in srgb, var(--lp-acc-soft) 45%, transparent); font-weight:600; }
.lp-cmp tr:last-child th,.lp-cmp tr:last-child td{ border-bottom:0; }
.lp-y,.lp-n,.lp-m{ display:inline-flex; gap:7px; align-items:baseline; }
.lp-y::before{ content:"✓"; color:var(--lp-ok); font-weight:700; }
.lp-n::before{ content:"✕"; color:#B42318; font-weight:700; }
.lp-m::before{ content:"◐"; color:var(--lp-ink-2); }
:root[data-theme="dark"] .lp-n::before{ color:#F08A7E; }
.lp-note{ font-size:13px; color:var(--lp-ink-2); margin:12px 2px 0; }

/* ---------------- dark band ---------------- */
.lp-band{ background:var(--lp-band); color:var(--lp-band-ink); position:relative; overflow:hidden; }
.lp-band::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px); background-size:22px 22px; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%); mask-image:linear-gradient(180deg,#000,transparent 80%); }
.lp-band .lp-wrap{ position:relative; }
.lp-band .lp-lead{ color:var(--lp-band-mute); }
.lp-band .lp-eyebrow{ color:var(--lp-on-dark); }
.lp-band .lp-eyebrow::before{ background:var(--lp-on-dark); }
.lp-band .lp-h2 em{ color:var(--lp-on-dark); }
.lp-loop{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; position:relative; }
.lp-loop li{ position:relative; background:var(--lp-band-2); border:1px solid var(--lp-band-line); border-radius:14px; padding:18px 16px; }
.lp-loop li:not(:last-child)::after{ content:""; position:absolute; right:-11px; top:50%; width:10px; height:2px; background:linear-gradient(90deg,var(--lp-acc),transparent); }
.lp-loop .n{ font:600 11px/1 var(--lp-mono); letter-spacing:.1em; color:var(--lp-on-dark); display:block; margin-bottom:12px; }
.lp-loop b{ display:block; font:600 17px/1.25 var(--lp-display); margin-bottom:6px; }
.lp-loop p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--lp-band-mute); }
.lp-badges{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.lp-badges li{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--lp-band-line); background:rgb(255 255 255 / 4%);
  font:500 13.5px var(--lp-text); color:var(--lp-band-ink); }
.lp-badges li::before{ content:""; width:7px; height:7px; border-radius:50%; background:#5BBFB1; }

/* ---------------- who ---------------- */
.lp-four{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.lp-who .lp-card h3{ font-size:18.5px; }
.lp-who .ic{ width:40px; height:40px; border-radius:11px; background:var(--lp-acc-soft); color:var(--lp-acc-ink); display:grid; place-items:center; margin-bottom:16px; }

/* ---------------- price + faq ---------------- */
.lp-two{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:start; }
.lp-price{ background:var(--lp-card); border-radius:18px; box-shadow:var(--lp-e2); padding:26px; }
.lp-price .p{ font:600 44px/1 var(--lp-display); letter-spacing:-.03em; margin:6px 0 4px; }
.lp-price ul{ list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:10px; }
.lp-price li{ position:relative; padding-left:26px; font-size:15px; line-height:1.5; }
.lp-price li::before{ content:"✓"; position:absolute; left:2px; color:var(--lp-ok); font-weight:700; }
.lp-price .sub{ color:var(--lp-ink-2); font-size:14.5px; margin:0; }
.lp-faq details{ border-bottom:1px solid var(--lp-line); }
.lp-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 2px; font:600 17px/1.35 var(--lp-display); letter-spacing:-.01em; }
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::after{ content:"+"; flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--lp-soft); font:500 18px var(--lp-mono); transition:transform .3s var(--lp-ease); }
.lp-faq details[open] summary::after{ transform:rotate(45deg); }
.lp-faq details p{ margin:0 2px 18px; font-size:15.5px; line-height:1.65; color:var(--lp-ink-2); max-width:68ch; }

/* ---------------- final CTA ---------------- */
.lp-final{ text-align:center; }
.lp-final .lp-h2{ margin-inline:auto; max-width:18ch; }
.lp-final .lp-lead{ margin:0 auto 28px; }
.lp-final .lp-cta{ justify-content:center; }
.lp-final .lp-btn-s{ background:transparent; color:var(--lp-band-ink); border-color:var(--lp-band-line); box-shadow:none; }
.lp-final .lp-btn-s:hover{ border-color:var(--lp-band-mute); }

/* ---------------- dialogs ---------------- */
dialog.lp-dlg{ width:min(1180px,calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:0; border-radius:16px; background:var(--lp-card,#fff); color:inherit; box-shadow:0 30px 80px rgb(0 0 0 / 40%); overflow:hidden; }
dialog.lp-dlg::backdrop{ background:rgb(10 14 20 / 72%); backdrop-filter:blur(3px); }
.lp-dlg .hd{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--lp-line,#E7E3DC); font:600 15px var(--lp-display,inherit); }
.lp-dlg .x{ border:0; background:var(--lp-soft,#F3F0EA); color:inherit; width:36px; height:36px; border-radius:9px; font-size:18px; cursor:pointer; }
.lp-dlg img{ display:block; width:100%; height:auto; max-height:calc(100vh - 90px); object-fit:contain; background:#000; }
.lp-dlg video{ display:block; width:100%; max-height:calc(100vh - 90px); background:#000; }

/* ---------------- reveal on scroll ---------------- */
.lp-js .rv{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--lp-ease), transform .9s var(--lp-ease); transition-delay:var(--d,0s); }
.lp-js .rv.in{ opacity:1; transform:none; }

/* ---------------- responsive ---------------- */
@media (max-width:1060px){
  .lp-nums ul{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lp-nums li:nth-child(4){ border-left:0; } .lp-nums li:nth-child(n+4){ border-top:1px solid var(--lp-line); }
  .lp-loop{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lp-loop li::after{ display:none; }
  .lp-four{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .lp-hero-grid{ grid-template-columns:minmax(0,1fr); }
    .lp-three{ grid-template-columns:minmax(0,1fr); }
  .lp-step,.lp-step:nth-child(even){ grid-template-columns:minmax(0,1fr); }
  .lp-two{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .lp-h1{ font-size:clamp(34px,10vw,44px); }
  .lp-cta .lp-btn{ width:100%; }
  .lp-nums ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-nums li{ border-left:0!important; border-top:1px solid var(--lp-line); padding:16px 12px; } .lp-nums li:nth-child(-n+2){ border-top:0; }
  .lp-nums li:nth-child(even){ border-left:1px solid var(--lp-line)!important; }
  .lp-loop,.lp-four{ grid-template-columns:minmax(0,1fr); }
    .lp-tag{ bottom:10px; }
}
@media (prefers-reduced-motion:reduce){
  .lp *,.lp *::before,.lp *::after{ animation:none!important; transition:none!important; }
  .lp-js .rv{ opacity:1; transform:none; }
}

body.lp-body .site-footer{ margin-top:0; }

.lp-nums + .lp-sec{ padding-top:clamp(40px,5vw,72px); }
@media (max-width:900px){ .lp-hero{ padding-bottom:40px; } }
@media (min-width:901px) and (max-height:820px){ .lp-h1{ font-size:clamp(38px,6.6vh,60px); } .lp-hero .lp-lead{ margin-bottom:20px; } .lp-hero-grid{ gap:32px; } }
.lp-scrolly{ position:relative; }

/* "Personal AI" stands out: green gradient lettering on a highlighter swipe, with a spark */
.lp-ai{ position:relative; display:inline-block; white-space:nowrap; padding:0 .12em; margin:0 -.04em; isolation:isolate; }
.lp-ai::before{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.42em; z-index:-1; border-radius:.12em;
  background:linear-gradient(90deg, rgb(var(--lp-acc-rgb) / 22%), rgb(var(--lp-acc-rgb) / 10%)); transform-origin:left; transform:scaleX(0);
  animation:lp-swipe .8s var(--lp-ease) .55s forwards; }
.lp-ai .lp-word{ background:linear-gradient(100deg, var(--lp-acc) 0%, #1F8A7E 55%, #2BA392 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-theme="dark"] .lp-ai .lp-word{ background:linear-gradient(100deg, #5BBFB1, #8EE0D3); -webkit-background-clip:text; background-clip:text; }
.lp-spark{ position:absolute; top:-.08em; right:-.34em; width:.36em; height:.36em; fill:var(--lp-acc); animation:lp-pop .6s var(--lp-ease) .9s both, lp-twinkle 2.6s ease-in-out 1.6s infinite; }
@keyframes lp-swipe{ to{ transform:scaleX(1); } }
@keyframes lp-pop{ from{ opacity:0; transform:scale(.3) rotate(-30deg); } }
@keyframes lp-twinkle{ 50%{ transform:scale(.8) rotate(20deg); opacity:.7; } }
.lp-h1 .acc{ color:var(--lp-ink-2); }

/* ---------- national pride, done respectfully: a tricolour-inspired ribbon (not the flag), a line-drawn
   skyline of New Delhi's civic landmarks that draws itself in, and a thin saffron-white-green rule.
   The State Emblem and the national flag are deliberately NOT used (State Emblem of India (Prohibition
   of Improper Use) Act 2005; Emblems and Names (Prevention of Improper Use) Act 1950). ---------- */
.lp{ --lp-saffron:#FF9933; --lp-green:#138808; }
.lp-hero{ overflow:hidden; padding-bottom:clamp(140px,14vw,196px); }
.lp-ribbon{ position:absolute; left:0; right:0; top:-22px; height:80px; pointer-events:none; opacity:.55; }
.lp-ribbon svg{ width:200%; height:100%; animation:lp-wave 18s linear infinite; }
.lp-ribbon path{ fill:none; stroke-width:7; stroke-linecap:round; }
.lp-ribbon .r1{ stroke:var(--lp-saffron); opacity:.35; }
.lp-ribbon .r2{ stroke:#FFFFFF; opacity:.9; }
.lp-ribbon .r3{ stroke:var(--lp-green); opacity:.28; }
:root[data-theme="dark"] .lp-ribbon .r2{ stroke:#E4EAEE; opacity:.25; }
@keyframes lp-wave{ to{ transform:translateX(-50%); } }
.lp-sky{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%); width:min(1040px,100%); padding-inline:clamp(16px,4vw,40px); pointer-events:none; }
.lp-sky svg{ display:block; width:100%; height:auto; overflow:visible; }
.lp-sky .b *{ fill:none; stroke:var(--lp-acc); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.55;
  stroke-dasharray:420; stroke-dashoffset:420; animation:lp-draw 2.8s var(--lp-ease) .4s forwards; }
.lp-sky .b circle{ opacity:.35; }
@keyframes lp-draw{ to{ stroke-dashoffset:0; } }
.lp-labels{ list-style:none; margin:0; padding:0; position:relative; height:16px; }
.lp-labels li{ position:absolute; transform:translateX(-50%); font:500 10.5px/1 var(--lp-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--lp-ink-2); white-space:nowrap;
  opacity:0; animation:lp-fade .8s ease 2.6s forwards; }
@keyframes lp-fade{ to{ opacity:.8; } }
.lp-tri{ position:absolute; left:0; right:0; bottom:0; height:4px; display:flex; }
.lp-tri i{ flex:1; } .lp-tri i:nth-child(1){ background:var(--lp-saffron); } .lp-tri i:nth-child(2){ background:#FFFFFF; } .lp-tri i:nth-child(3){ background:var(--lp-green); }
:root[data-theme="dark"] .lp-tri i:nth-child(2){ background:#E4EAEE; }
.lp-hero .lp-hero-grid{ z-index:1; }
@media (max-width:900px){ .lp-hero{ padding-bottom:110px; } .lp-labels{ display:none; } }
@media (prefers-reduced-motion:reduce){ .lp-sky .b *{ stroke-dashoffset:0; } .lp-labels li{ opacity:.8; } }

/* =================== India theme: more character (2026-11-15) ===================
   Tricolour accents (saffron #FF9933 · white · India green #138808) plus Ashoka-chakra navy for depth,
   a Mughal jaali lattice on the dark bands, a sunrise behind New Delhi's landmarks, a Devanagari touch,
   and the Preamble. The app's own green stays the action colour. */
.lp{ --lp-saffron-ink:#C2570C; --lp-navy:#0E1F4D; --lp-navy-2:#162B63;
  --lp-jaali:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Crect x='10' y='10' width='28' height='28'/%3E%3Crect x='10' y='10' width='28' height='28' transform='rotate(45 24 24)'/%3E%3Ccircle cx='24' cy='24' r='6'/%3E%3Cpath d='M0 0L10 10M48 0L38 10M0 48L10 38M48 48L38 38'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="dark"] .lp{ --lp-saffron-ink:#FFB066; --lp-navy:#0A1530; --lp-navy-2:#13234D; }

/* hero: a soft tricolour wash */
.lp-hero{ background:linear-gradient(180deg, rgb(255 153 51 / 11%) 0%, rgb(255 255 255 / 0%) 38%, rgb(255 255 255 / 0%) 62%, rgb(19 136 8 / 9%) 100%); }
:root[data-theme="dark"] .lp-hero{ background:linear-gradient(180deg, rgb(255 153 51 / 9%) 0%, transparent 40%, transparent 60%, rgb(19 136 8 / 12%) 100%); }
.lp-hi-eye{ color:var(--lp-saffron-ink)!important; }
.lp-hi-eye::before{ background:var(--lp-saffron)!important; }
.lp [lang="hi"]{ font-family:"Noto Sans Devanagari",var(--lp-text); letter-spacing:0; text-transform:none; font-size:1.12em; }
.lp-h1 .acc{ color:var(--lp-ink-2); }

/* sunrise behind the landmarks: rises once, then breathes */
.lp-sky .sun{ transform-box:fill-box; transform-origin:center; animation:lp-rise 3.2s var(--lp-ease) .2s both, lp-breathe 7s ease-in-out 3.4s infinite; }
.lp-sky .sun.core{ opacity:.9; }
@keyframes lp-rise{ from{ transform:translateY(90px); opacity:0; } }
@keyframes lp-breathe{ 50%{ transform:scale(1.04); } }
.lp-sky .fillers path{ fill:var(--lp-paper); stroke:none; }
.lp-hero .lp-sky .fillers path{ fill:color-mix(in srgb, var(--lp-paper) 88%, #138808 12%); }
.lp-sky .b *{ stroke:var(--lp-ink); opacity:.55; }
:root[data-theme="dark"] .lp-sky .b *{ stroke:#9FD9CF; }

/* numbers: each stat gets a tricolour cap */
.lp-nums li{ position:relative; }
.lp-nums li::before{ content:""; position:absolute; left:clamp(10px,1.6vw,22px); top:0; width:28px; height:3px; border-radius:0 0 3px 3px; }
.lp-nums li:nth-child(3n+1)::before{ background:#FF9933; }
.lp-nums li:nth-child(3n+2)::before{ background:var(--lp-navy-2); }
.lp-nums li:nth-child(3n)::before{ background:#138808; }
:root[data-theme="dark"] .lp-nums li:nth-child(3n+2)::before{ background:#9AA9B4; }

/* eyebrows and numbered cards alternate saffron / green */
.lp-sec:nth-of-type(odd) .lp-head .lp-eyebrow{ color:var(--lp-saffron-ink); }
.lp-sec:nth-of-type(odd) .lp-head .lp-eyebrow::before{ background:#FF9933; }
.lp-three .lp-card:nth-child(1) .lp-num{ color:var(--lp-saffron-ink); }
.lp-three .lp-card:nth-child(3) .lp-num{ color:#138808; }
:root[data-theme="dark"] .lp-three .lp-card:nth-child(3) .lp-num{ color:#6FD36A; }
.lp-three .lp-card{ border-top:3px solid transparent; }
.lp-three .lp-card:nth-child(1){ border-top-color:#FF9933; } .lp-three .lp-card:nth-child(2){ border-top-color:var(--lp-line); } .lp-three .lp-card:nth-child(3){ border-top-color:#138808; }

/* who it's for: tricolour icons */
.lp-four .lp-card:nth-child(1) .ic{ background:rgb(255 153 51 / 16%); color:var(--lp-saffron-ink); }
.lp-four .lp-card:nth-child(2) .ic{ background:rgb(14 31 77 / 9%); color:var(--lp-navy-2); }
.lp-four .lp-card:nth-child(3) .ic{ background:rgb(19 136 8 / 12%); color:#138808; }
:root[data-theme="dark"] .lp-four .lp-card:nth-child(2) .ic{ background:rgb(154 169 180 / 14%); color:#C9D3DA; }
:root[data-theme="dark"] .lp-four .lp-card:nth-child(3) .ic{ color:#6FD36A; }

/* dark bands: Ashoka-chakra navy with a jaali lattice */
.lp-band{ background:var(--lp-navy); }
.lp-band::before{ background-image:var(--lp-jaali); background-size:48px 48px; -webkit-mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / 40%) 100%); mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / 40%) 100%); }
.lp-band::after{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#FF9933 0 33.3%,#FFFFFF 33.3% 66.6%,#138808 66.6%); }
.lp-band .lp-eyebrow{ color:#FFB066; } .lp-band .lp-eyebrow::before{ background:#FF9933; }
.lp-band .lp-h2 em{ color:#FFB066; }
.lp-loop li{ background:var(--lp-navy-2); }
.lp-loop .n{ color:#FFB066; }
.lp-loop li:nth-child(odd){ border-top:2px solid #FF9933; } .lp-loop li:nth-child(even){ border-top:2px solid #6FD36A; }
.lp-badges li::before{ background:#FF9933; }
.lp-ready{ background:var(--lp-navy); background-image:var(--lp-jaali); background-size:48px 48px; position:relative; overflow:hidden; }
.lp-ready::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,#FF9933 0 33.3%,#FFFFFF 33.3% 66.6%,#138808 66.6%); }

/* the Preamble */
.lp-preamble{ background:linear-gradient(180deg, #FFF6EC 0%, var(--lp-paper) 100%); position:relative; text-align:center; }
:root[data-theme="dark"] .lp-preamble{ background:linear-gradient(180deg, rgb(255 153 51 / 7%) 0%, var(--lp-paper) 100%); }
.lp-preamble .lp-eyebrow{ color:var(--lp-saffron-ink); justify-content:center; } .lp-preamble .lp-eyebrow::before{ background:#FF9933; }
.lp-quote{ margin:8px auto 22px; max-width:900px; padding:0; border:0; }
.lp-quote p{ margin:0; font:400 clamp(20px,2.2vw,30px)/1.5 "Fraunces",Georgia,serif; font-style:italic; color:var(--lp-ink); text-wrap:balance; }
.lp-quote em{ font-style:normal; font-weight:500; color:var(--lp-navy-2); }
:root[data-theme="dark"] .lp-quote em{ color:#FFB066; }
.lp-quote footer{ margin-top:14px; font:600 12px var(--lp-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--lp-ink-2); }
.lp-serve{ margin:0 auto; max-width:60ch; font-size:17px; line-height:1.6; color:var(--lp-ink-2); }
.lp-serve b{ color:var(--lp-ink); font-weight:600; }
.lp-preamble .lp-wrap::before{ content:""; display:block; width:120px; height:4px; margin:0 auto 26px; border-radius:4px; background:linear-gradient(90deg,#FF9933 0 33.3%,var(--lp-line) 33.3% 66.6%,#138808 66.6%); }