:root{--blue:#4169E1;--blue-deep:#10287A;--blue-tint:#E4EAFB;--blue-pale:#F3F6FD;--green:#4CBB17;--green-tint:#E6F6DC;--green-pale:#F3FAEC;--green-text:#2E7D0F;--ink:#000;--muted:#4A4F5C;--line:#DDE1EB;--surface:#F1F3F8;--red:#B3261E}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55;font-size:17px}
a{color:var(--blue)}a:hover{color:var(--blue-deep)}
h1,h2,h3{line-height:1.15;letter-spacing:-0.01em;text-wrap:pretty}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--blue);color:#fff;padding:8px 12px;border-radius:8px}.skip:focus{inset-inline-start:8px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;height:64px;border-bottom:1px solid var(--line);max-width:1100px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;color:var(--ink);text-decoration:none}
.site-header{flex-wrap:wrap;height:auto;min-height:64px;padding:8px 20px;row-gap:4px}
.site-header nav{display:flex;gap:20px;flex-wrap:wrap}
.lang{gap:10px !important;flex-basis:100%;order:3}.lang a{font-size:13px !important;padding:6px 0 !important}.lang a[aria-current]{color:var(--blue) !important;font-weight:600}
@media(min-width:880px){.lang{flex-basis:auto;order:0}}.site-header nav a{color:var(--muted);text-decoration:none;padding:12px 0;font-size:15px}.site-header nav a:hover{color:var(--blue)}
main{max-width:1100px;margin:0 auto;padding:0 20px}
.hero-inner{display:grid;gap:40px;padding:48px 0;align-items:center;max-width:1100px;margin:0 auto}
@media(min-width:880px){.hero-inner{grid-template-columns:1fr 300px;gap:48px;padding:72px 0}}
.hero.band{background:var(--blue);color:#fff;margin:0 -20px;padding:0 20px}
.hero.band .lede{color:var(--blue-tint)}
.hero.band .chip{background:rgba(255,255,255,.14);color:#fff}
.hero.band .play-slot{border-color:rgba(255,255,255,.6);color:#fff}
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}.pills li{padding:8px 14px;border-radius:999px;background:#fff;color:var(--blue-deep);font-size:14px;font-weight:500}
.demo{--s:0.6796;--frame-top:16px;padding:48px 0 0}
.demo-head{margin-bottom:24px}
.only-mobile{display:none}
.demo-grid{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.dsel{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
/* Screenshot scrolls with the page; a sticky bezel with a see-through screen stays put over it. */
.demo-phone{position:relative;overflow:clip;padding:var(--frame-top) 0 0;display:grid}
.demo-phone>*{grid-area:1/1}
.dwindow{position:sticky;top:var(--frame-top);height:620px;align-self:start;z-index:2;pointer-events:none}
.dhole{position:absolute;left:10px;top:10px;width:280px;height:600px;border-radius:30px;box-shadow:0 0 0 10px #0B1026,0 0 0 3000px #fff}
.dwindow::after{content:"";position:absolute;left:0;top:0;width:300px;height:620px;border-radius:40px;box-shadow:0 24px 48px rgba(16,40,122,.25)}
.dshot-wrap{position:relative;width:280px;margin:10px 0 10px 10px}
.dshot{display:block;width:280px;height:auto;border-radius:30px 30px 0 0}
.dot{display:none}
.steps{list-style:none;margin:0;padding:0;position:relative;height:calc(2401px * var(--s) + 36px)}
.tile{position:absolute;left:0;right:0;top:calc(var(--y) * 1px * var(--s) + var(--frame-top) + 10px);padding:18px 22px;border-radius:14px;background:var(--blue-pale);max-width:560px;box-sizing:border-box}
.tile:nth-child(2n){background:var(--green-pale)}
.tile::before{content:"";position:absolute;left:-12px;top:22px;border:12px solid transparent;border-left:0;border-right-color:var(--blue-pale)}
.tile:nth-child(2n)::before{border-right-color:var(--green-pale)}
.close{display:none}
.k{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:600;margin-bottom:8px}
.tile:nth-child(2n) .k{background:var(--green-text)}
.tile h3{margin:0 0 4px;font-size:18px}.tile p{margin:0;color:var(--muted);font-size:15px}
@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference) and (min-width:880px){.tile{animation:tin linear both;animation-timeline:view();animation-range:entry 0% entry 100%}}}
@keyframes tin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
/* Mobile: phone centred, numbered dots on the screen, tiles pop up as a sheet */
@media(max-width:879px){
  .only-desktop{display:none}.only-mobile{display:inline}
  .demo-grid{grid-template-columns:1fr;gap:0}
  .demo-phone{justify-self:center;width:300px}
  .steps{height:0}
  .dot{display:flex;position:absolute;left:218px;top:calc(var(--y) * 1px * var(--s) + 6px);width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;background:var(--blue);color:#fff;font-weight:600;font-size:16px;box-shadow:0 4px 12px rgba(16,40,122,.35),0 0 0 3px #fff;cursor:pointer;z-index:1}
  .dot:nth-of-type(2n){background:var(--green-text)}
  .tile{display:none;position:fixed;left:12px;right:12px;bottom:12px;top:auto;max-width:none;z-index:50;padding:18px 48px 18px 20px;box-shadow:0 12px 32px rgba(16,40,122,.25);background:#fff;border:2px solid var(--blue)}
  .tile:nth-child(2n){background:#fff;border-color:var(--green-text)}
  .tile::before{display:none}
  .close{display:flex;position:absolute;right:8px;top:8px;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;font-size:24px;color:var(--muted);cursor:pointer}
  #dt1:checked~.steps .tile:nth-child(1),#dt2:checked~.steps .tile:nth-child(2),#dt3:checked~.steps .tile:nth-child(3),#dt4:checked~.steps .tile:nth-child(4),#dt5:checked~.steps .tile:nth-child(5),#dt6:checked~.steps .tile:nth-child(6),#dt7:checked~.steps .tile:nth-child(7){display:block}
}
.results{padding:48px 0}.intro{margin:-8px 0 20px;color:var(--muted);font-size:17px}
.results .grid li{background:var(--blue-tint);border:0}
.results .grid li:nth-child(2n){background:var(--green-tint)}
.results .grid li:nth-child(3n){background:var(--surface)}
.results .grid h3{color:var(--blue-deep)}.results .grid li:nth-child(2n) h3{color:var(--green-text)}.results .grid li:nth-child(3n) h3{color:var(--ink)}
.features{background:var(--blue-pale);margin:0 -20px;padding:48px 20px;border-top:0}
.features>h2{max-width:1100px;margin-left:auto;margin-right:auto}
.fb{display:flex;flex-direction:column;gap:10px;max-width:1100px;margin:0 auto}.fb-row{display:grid;gap:4px 24px;padding:18px 20px;background:#fff;border-radius:14px;border:1px solid var(--line)}
.fb-row h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);margin-right:10px;vertical-align:1px}
@media(min-width:760px){.fb-row{grid-template-columns:220px 1fr 1fr;gap:24px}}
.fb-row h3{margin:0;font-size:17px}.fb-row p{margin:0;font-size:15px}.benefit{color:var(--ink)}.options{color:var(--muted)}
.hero h1{font-size:clamp(36px,6vw,56px);margin:0;line-height:1.05;letter-spacing:-0.02em}
.lede{font-size:20px;color:var(--muted);margin:0;max-width:540px}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;background:var(--blue-tint);color:var(--blue-deep);font-size:14px;font-weight:500;align-self:flex-start}
.cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.play-slot{display:flex;align-items:center;justify-content:center;width:190px;height:56px;border-radius:8px;border:1.5px dashed #B8BDCC;color:var(--muted);font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;text-decoration:none}
.play-slot small{font-size:10px}
.price{margin:0;font-size:16px;line-height:1.3}.price strong{font-size:22px}.price small{font-size:14px;opacity:.9}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--blue);color:#fff;font-weight:500;text-decoration:none}.btn:hover{background:var(--blue-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid #B8BDCC}
.features,.nots,.faq{padding:40px 0;border-top:1px solid var(--line)}.features,.faq{border-top:0}
h2{font-size:28px;margin:0 0 20px}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid li{border:1px solid var(--line);border-radius:16px;padding:20px}.grid h3{margin:0 0 6px;font-size:17px}.grid p{margin:0;color:var(--muted);font-size:15px}
.strip{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.nots{border-top:0}
.strip li{background:var(--surface);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:4px;border-top:4px solid var(--blue)}.strip li:nth-child(2n){border-top-color:var(--green)}.strip strong{font-size:18px}.strip span{color:var(--muted);font-size:15px}
.faq{background:var(--green-pale);margin:0 -20px;padding:48px 20px}.faq>h2,.faq details{max-width:1100px;margin-left:auto;margin-right:auto}
details{border-top:1px solid #D5E6C4;padding:4px 0}details:last-child{border-bottom:1px solid #D5E6C4}
summary{cursor:pointer;font-weight:500;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--blue);font-size:22px;line-height:1}details[open] summary::after{content:"−"}
details p{margin:0 0 16px;color:var(--muted)}
.site-footer{border-top:1px solid var(--line);margin-top:48px}
.foot-inner{max-width:1100px;margin:0 auto;padding:32px 20px;display:flex;flex-direction:column;gap:16px}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:600;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--blue-tint);color:var(--blue-deep);font-size:13px;font-weight:500;margin-left:6px}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap}.site-footer nav a{color:var(--muted);text-decoration:none;font-size:15px}.site-footer nav a:hover{color:var(--blue)}
.fine{font-size:13px;color:var(--muted);margin:0}
.placeholder{background:#FFF4E5;color:#5C3D00;padding:0 4px;border-radius:4px}
.prose{max-width:720px;padding:40px 0}.prose h1{font-size:clamp(32px,5vw,44px);margin:0 0 12px}.prose h2{font-size:22px;margin:36px 0 10px}.prose p,.prose li{text-wrap:pretty}
.prose ol,.prose ul{padding-left:22px}.prose li{margin:6px 0}
.prose dt{font-weight:600;margin-top:14px}.prose dd{margin:4px 0 0;color:var(--muted)}
code{font:0.92em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface);padding:2px 6px;border-radius:6px}
.toc{display:flex;flex-wrap:wrap;gap:8px 16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0}.toc a{font-size:14px;text-decoration:none}.toc a:hover{text-decoration:underline}
.center{text-align:center;margin:0 auto}.big{font-size:96px;font-weight:700;color:var(--blue-tint);margin:0;line-height:1}
.phone{width:280px;height:560px;border-radius:36px;background:#0B1026;padding:10px;box-shadow:0 24px 48px rgba(16,40,122,.25);justify-self:center;font-variant-numeric:tabular-nums}
.screen{width:100%;height:100%;border-radius:28px;background:#fff;overflow:hidden;padding:0 16px;color:#000}
.sb{height:30px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:500}.cam{width:70px;height:16px;border-radius:999px;background:#0B1026}
.app-head{display:flex;align-items:center;justify-content:space-between;padding:6px 0}.app-name{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.chip-sm{height:20px;padding:0 8px;border-radius:999px;background:var(--blue-tint);color:var(--blue-deep);font-size:9px;font-weight:500;display:flex;align-items:center}
.circle-wrap{position:relative;width:150px;height:150px;margin:8px auto 12px;display:flex;align-items:center;justify-content:center}.goal-circle{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.circle-text{text-align:center;position:relative;display:flex;flex-direction:column}.circle-text small{font-size:10px;color:var(--muted)}.circle-text strong{font-size:36px;line-height:1.1;letter-spacing:-0.02em}.circle-text em{font-style:normal;font-size:10px;font-weight:600;color:var(--green-text)}
.mcard{background:var(--surface);border:0}
.bars b{background:var(--blue);border-radius:999px;width:45%;margin:0 auto}.bars .slot{flex:1;position:relative;height:100%}
.mcard{border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px}.row{display:flex;justify-content:space-between;font-size:10px}.row span{color:var(--muted)}
.track{height:6px;border-radius:999px;background:var(--blue-tint);margin-top:4px;overflow:hidden}.fill{height:100%;background:var(--blue)}.w60{width:60%}
.tabs{display:flex;font-size:10px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:8px}.tabs span{flex:1;text-align:center;padding-bottom:6px}.tabs .on{color:var(--blue);border-bottom:2px solid var(--blue);margin-bottom:-1px}
.bars{position:relative;height:76px;display:flex;align-items:flex-end;gap:6px}.bars b{flex:1;background:var(--blue);border-radius:3px 3px 0 0;display:block}.bars .sel{background:var(--green)}.bars .goal{position:absolute;left:0;right:0;bottom:66%;border-top:1.5px dashed #000}
.h60{height:60%}.h76{height:76%}.h42{height:42%}.h50{height:50%}.h49{height:49%}
.axis{display:flex;font-size:8px;color:var(--muted);margin-top:4px}.axis span{flex:1;text-align:center}

/* scroll-demo positions (inline styles are blocked by the CSP) */
.y40{--y:40}.y230{--y:230}.y440{--y:440}.y720{--y:720}.y1150{--y:1150}.y1460{--y:1460}.y1990{--y:1990}

/* language menu (pure HTML <details>, no script) */
.lang details{position:relative}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff}
.lang summary::-webkit-details-marker{display:none}
.lang summary::before{content:"\1F310"}
.lang summary::after{content:"\25BE";color:var(--muted)}
.lang ul{list-style:none;margin:6px 0 0;padding:8px;position:absolute;inset-inline-end:0;z-index:60;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(16,40,122,.18);columns:2;column-gap:6px;width:min(92vw,520px);max-height:70vh;overflow:auto}
@media(min-width:700px){.lang ul{columns:3}}
.lang li{break-inside:avoid}
.lang li a{display:block;padding:8px 10px !important;font-size:14px !important;border-radius:8px;white-space:nowrap}
.lang li a:hover{background:var(--blue-pale)}
.lang li a[aria-current]{background:var(--blue-pale)}
.legal-note{font-size:14px;color:var(--muted);border-inline-start:3px solid var(--line);padding:4px 12px;margin:0 0 20px}

/* right-to-left pages (Arabic, Hebrew, Urdu) */
[dir=rtl] .fb-row h3::before{margin-right:0;margin-left:10px}
[dir=rtl] .prose ol,[dir=rtl] .prose ul{padding-left:0;padding-right:22px}
[dir=rtl] .badge{margin-left:0;margin-right:6px}
[dir=rtl] .demo-grid{direction:ltr}
[dir=rtl] .tile{direction:rtl;text-align:right}
[dir=rtl] .demo-head{direction:rtl}
@media(max-width:879px){.lang ul{inset-inline-start:0;inset-inline-end:auto}}
.btabs{padding:48px 0;border-top:1px solid var(--line)}
.tabgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:24px 0}
.tab{margin:0;display:flex;flex-direction:column;gap:12px}
.tab img{width:100%;max-width:300px;height:auto;margin:0 auto;display:block;border-radius:20px;background:var(--blue-pale)}
.tab h3{margin:0 0 4px;font-size:18px}.tab p{margin:0;font-size:15px;color:var(--muted)}
@media(min-width:1000px){.tabgrid{grid-template-columns:repeat(5,1fr)}}

.pb{color:var(--blue)}.pg{color:var(--green-text)}