/* ZAIN'S public pages: home, activity pages and the user guide. Uses the tokens from app.css.
 * White paper with a warm wash at the top, slate ink, hairlines, and the product itself as the picture. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
.lp{min-height:100vh;display:flex;flex-direction:column;overflow-x:clip;background:linear-gradient(180deg,var(--tint) 0,var(--bg) 760px) no-repeat}
.lp main{display:flex;flex-direction:column;gap:120px;padding-bottom:96px}
.lp main>section{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.lp [id]{scroll-margin-top:88px}
.ic{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent-text)}
.lp-checks,.lp-ticks{list-style:none;margin:0;padding:0}
.lp-checks li::before,.lp-ticks li::before{content:"";flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:inset 0 0 0 1px var(--ok-line)}

/* ---------- header ---------- */
.lp-top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(15,23,42,.06)}
.lp-top-in{width:min(1160px,calc(100% - 48px));margin-inline:auto;display:flex;align-items:center;gap:20px;height:66px}
.lp-top .brand,.lp-foot .brand{gap:10px;font-size:18px;font-weight:600}
.lp-top .logo{width:32px;height:32px;border-radius:9px}
.lp-nav{display:flex;gap:2px;margin-inline-start:auto}
.lp-nav a{color:var(--text-2);text-decoration:none;padding:7px 12px;border-radius:8px;font-size:15px;white-space:nowrap}
.lp-nav a:hover,.lp-nav a[aria-current]{color:var(--text);background:rgba(15,23,42,.05)}
.lp-acts{display:flex;align-items:center;gap:8px}
.lp-menu{display:none;position:relative}
.lp-menu summary{list-style:none;width:40px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:9px;cursor:pointer;background:var(--surface);box-shadow:var(--sh-1)}
.lp-menu summary::-webkit-details-marker{display:none}
.lp-menu[open] summary{border-color:var(--line-3)}
.lp-menu nav{position:absolute;inset-inline-end:0;top:44px;min-width:230px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:6px;display:flex;flex-direction:column;box-shadow:var(--pop)}
.lp-menu nav a{color:var(--text);text-decoration:none;padding:11px 14px;border-radius:9px}
.lp-menu nav a:hover{background:var(--sunk)}

/* ---------- hero: the headline, and the product on screen ---------- */
.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:64px;align-items:center;padding-top:80px}
.lp-hero-text{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.lp-hero h1{font-size:clamp(38px,4.9vw,64px);line-height:1.14;font-weight:600;letter-spacing:-.03em;max-width:12ch}
.lp-lead{font-size:19px;color:var(--text-2);margin:0;max-width:520px;line-height:1.8}
.lp-cta{display:flex;gap:10px;flex-wrap:wrap}
.lp-checks{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--text-2);font-size:14.5px}
.lp-checks li{display:flex;align-items:center;gap:8px}
.lp-visual{position:relative;padding:28px 0 36px}
.lp-screen{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(15,23,42,.06),0 30px 60px -18px rgba(15,23,42,.22),0 18px 36px -24px rgba(15,23,42,.3)}
.lp-screen img{display:block;width:100%;height:auto;aspect-ratio:1280/800}
.lp-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--raised)}
.lp-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-3)}
.lp-phone{position:absolute;inset-inline-end:-14px;bottom:-6px;width:23%;margin:0;border:6px solid #0F172A;border-radius:26px;overflow:hidden;background:#0F172A;box-shadow:0 24px 48px -12px rgba(15,23,42,.38)}
.lp-phone img{display:block;width:100%;height:auto;aspect-ratio:390/760;object-fit:cover;object-position:top;border-radius:20px}
/* a receipt card that settles onto the screenshot once when the page opens */
.lp-float{position:absolute;top:0;inset-inline-start:-28px;width:min(270px,44%);z-index:3;padding:14px 16px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(15,23,42,.06),0 20px 40px -12px rgba(15,23,42,.24);animation:lpIn .7s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes lpIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lr-head{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.lr-head img{border-radius:7px;background:#000}
.lr-head b{font-weight:600;font-size:14.5px}
.lr-head span{margin-inline-start:auto;font-size:12px;color:var(--faint)}
.lr-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lr-lines li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px}
.lr-lines li span{color:var(--text-2)}
.lr-lines li b{font-weight:500}
.lr-lines li.total{margin-top:4px;padding-top:9px;border-top:1px solid var(--line-2);font-size:15px}
.lr-lines li.total span{color:var(--text);font-weight:500}
.lr-lines li.total b{font-weight:600;font-size:18px}
.lr-foot{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.6}

/* ---------- sections ---------- */
.lp-sec{display:flex;flex-direction:column;gap:36px}
.lp-head{display:flex;flex-direction:column;gap:12px;max-width:720px}
.lp-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.2;font-weight:600;letter-spacing:-.025em}
.lp-head p{margin:0;color:var(--muted);font-size:17px;line-height:1.8}
.lp-more{align-self:flex-start;font-weight:500;color:var(--accent-text);text-decoration:none}
.lp-more:hover{color:var(--text);text-decoration:underline;text-underline-offset:5px}

.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:none}
.lp-steps li{display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);box-shadow:var(--sh-1)}
.lp-num{width:36px;height:36px;border-radius:50%;background:var(--sunk);border:1px solid var(--line-2);color:var(--text);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:10px}
.lp-steps b{font-size:18px;font-weight:500}
.lp-steps .muted{line-height:1.75}

.lp-grid{display:grid;gap:16px}
.lp-types,.lp-feats{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-card{border:1px solid var(--line-2);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;background:var(--surface);box-shadow:var(--sh-1);transition:border-color .15s}
.lp-card:hover{border-color:var(--line-3)}
.lp-card h3{font-size:18px;font-weight:500}
.lp-feat{gap:12px}
.lp-feat p{margin:0;line-height:1.75;font-size:15px;color:var(--muted)}
/* what it does: three columns, each line under a hairline */
.lp-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.lp-benefits li{display:flex;flex-direction:column;gap:12px;padding:24px 0 30px;border-top:1px solid var(--line-2)}
.lp-benefits li>span:last-child{display:flex;flex-direction:column;gap:6px}
.lp-benefits b{font-size:17.5px;font-weight:500}
.lp-benefits .muted{font-size:15px;line-height:1.75}
.lb-ic{width:40px;height:40px;flex-shrink:0;border-radius:11px;background:var(--accent-soft);color:var(--accent-text);display:flex;align-items:center;justify-content:center}
.lp-tabs{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--sunk);align-self:flex-start;max-width:100%}
.lp-tabs button{height:36px;padding:0 16px;border-radius:8px;border:0;background:none;color:var(--muted);cursor:pointer;white-space:nowrap}
.lp-tabs button[aria-selected=true]{background:var(--surface);color:var(--text);font-weight:500;box-shadow:0 1px 2px rgba(15,23,42,.1)}
.lp-mods-more{align-self:center}

/* ---------- pricing ---------- */
.lp-price{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.lp-price-main{display:flex;flex-direction:column;gap:22px;padding:24px}
.lp-price-pick{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.lp-price-pick .field{margin:0}
.lp-build{display:flex;flex-direction:column;gap:2px}.lp-build h3{font-size:17px;font-weight:500}.lp-build .muted{font-size:14px}
.lp-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lp-mod{position:relative;display:block;cursor:pointer}
.lp-mod input{position:absolute;opacity:0;pointer-events:none}
.lp-mod-box{display:flex;align-items:flex-start;gap:12px;height:100%;padding:14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);transition:border-color .15s,background .15s}
.lp-mod:hover .lp-mod-box{border-color:var(--line-3)}
.lp-mod input:checked+.lp-mod-box{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.lp-mod input:focus-visible+.lp-mod-box{outline:2px solid var(--accent);outline-offset:2px}
.lp-mod-ck{flex-shrink:0;width:18px;height:18px;margin-top:3px;border-radius:5px;border:1.5px solid var(--line-3);background:var(--surface)}
.lp-mod input:checked+.lp-mod-box .lp-mod-ck{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.lp-mod-t{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.lp-mod-t b{font-size:15px;font-weight:500}
.lp-mod-t small{color:var(--muted);font-size:13px;line-height:1.55}
.lp-mod em{font-style:normal;font-weight:500;color:var(--accent-text);white-space:nowrap;font-size:14.5px}
.lp-sum{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px;padding:24px}
.lp-sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lp-sum-row b{font-size:25px;font-weight:600}
.lp-save{color:var(--ok);font-size:14px;font-weight:500;min-height:21px}
.lp-checks-col{flex-direction:column;gap:9px}

/* ---------- faq, end ---------- */
.lp-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-items:start}
.lp-faq details{border-top:1px solid var(--line-2)}
.lp-faq summary{cursor:pointer;font-weight:500;font-size:16.5px;padding:20px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;font-weight:400;color:var(--muted)}
.lp-faq details[open] summary::after{content:"−";background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.lp-faq p{color:var(--muted);margin:0;padding:0 0 20px;line-height:1.85;max-width:56ch}

/* the closing band: a warm card */
.lp-end{align-items:center;text-align:center;padding:72px 24px;gap:14px!important;border-radius:24px;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--tint),var(--surface));box-shadow:var(--sh-1)}
.lp-end h1,.lp-end h2{font-size:clamp(30px,3.8vw,48px);font-weight:600;letter-spacing:-.025em}
.lp-end p{margin:0;font-size:17px;color:var(--muted)}
.lp-end .lp-cta{justify-content:center;margin-top:12px}

/* ---------- footer ---------- */
.lp-foot{background:var(--raised);border-top:1px solid var(--line-2);color:var(--text);padding:56px 0 28px;margin-top:auto}
.lp-foot .brand{color:var(--text)}
.lp-foot-in{width:min(1160px,calc(100% - 48px));margin-inline:auto;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.lp-foot-brand{display:flex;flex-direction:column;gap:12px}
.lp-play{align-self:flex-start}
.lp-foot-brand p{margin:0;font-size:14px;max-width:290px;line-height:1.75;color:var(--muted)}
.lp-foot .logo{width:30px;height:30px;border-radius:8px}
.lp-foot nav{display:flex;flex-direction:column;gap:10px;font-size:14px}
.lp-foot nav b{margin-bottom:4px;font-weight:500}
.lp-foot nav a{color:var(--muted);text-decoration:none}
.lp-foot nav a:hover{color:var(--text)}
.lp-copy{width:min(1160px,calc(100% - 48px));margin:32px auto 0;padding-top:20px;border-top:1px solid var(--line-2);color:var(--faint);font-size:13px}

/* ---------- user guide ---------- */
.gd-hero{padding-top:56px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.gd-hero h1{font-size:clamp(34px,4.2vw,50px);line-height:1.2;font-weight:600;letter-spacing:-.025em}
.gd-hero .lp-lead{max-width:680px}
.gd-tools{display:flex;gap:10px;flex-wrap:wrap;width:100%;align-items:center}
.gd-search{position:relative;flex:1;max-width:560px;min-width:240px}
.gd-search .input{height:50px;padding-inline-start:46px;border-radius:12px;background:var(--surface)}
.gd-search svg{position:absolute;inset-inline-start:16px;top:15px;color:var(--faint);pointer-events:none}
.gd-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-top:6px}
.gd-who a{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--sh-1)}
.gd-who a:hover{border-color:var(--line-3);color:var(--text)}
.gd-who b{display:block;font-size:16.5px;font-weight:500}
.gd-who .muted{font-size:14px;line-height:1.5}

.gd-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.gd-toc{position:sticky;top:88px;max-height:calc(100vh - 110px);overflow:auto;display:flex;flex-direction:column;gap:2px;padding-bottom:12px}
.gd-toc>b{font-size:12.5px;color:var(--faint);margin:0 0 8px;padding-inline-start:10px;font-weight:500}
.gd-toc a{display:flex;gap:10px;align-items:center;padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:14.5px;line-height:1.4}
.gd-toc a span{width:24px;height:24px;flex-shrink:0;border-radius:7px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;background:var(--surface)}
.gd-toc a:hover{color:var(--text);background:var(--sunk)}
.gd-toc a.on{color:var(--text);background:var(--surface);box-shadow:0 0 0 1px var(--line-2),var(--sh-1)}
.gd-toc a.on span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.gd-toc-m{display:none}

.gd-ch{display:flex;flex-direction:column;gap:20px;padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line-2)}
.gd-ch:last-of-type{border-bottom:0;margin-bottom:0}
.gd-ch-h{display:flex;gap:16px;align-items:flex-start}
.gd-ch-h .ic{width:48px;height:48px;border-radius:13px}
.gd-ch-h>div{display:flex;flex-direction:column;gap:6px}
.gd-ch h2{font-size:clamp(23px,2.5vw,29px);line-height:1.3}
.gd-ch h3{font-size:17.5px;font-weight:500;margin-top:6px}
.gd-kicker{font-size:13px;color:var(--faint);font-weight:500}
.gd-tags{display:flex;gap:6px;flex-wrap:wrap}
.gd-lead,.gd-ch>p{color:var(--text-2);font-size:16.5px;line-height:1.9;margin:0}
.gd-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.gd-steps>li{counter-increment:s;position:relative;padding-inline-start:46px;padding-bottom:20px;line-height:1.9;font-size:16px}
.gd-steps>li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13.5px;color:var(--text);box-shadow:var(--sh-1)}
.gd-steps>li::after{content:"";position:absolute;inset-inline-start:15px;top:36px;bottom:4px;width:1px;background:var(--line-2)}
.gd-steps>li:last-child{padding-bottom:0}
.gd-steps>li:last-child::after{display:none}
.gd-steps>li::first-letter,.gd-list>li::first-letter{text-transform:uppercase}
.gd-steps small{display:block;color:var(--muted);font-size:14px;line-height:1.7}
.gd-list{margin:0;padding-inline-start:22px;line-height:1.9;font-size:16px}
.gd-list li::marker{color:var(--accent)}
.np{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap;vertical-align:baseline}
.np b,.ui{display:inline-block;padding:0 8px;border:1px solid var(--line-2);border-radius:7px;background:var(--raised);font-weight:500;font-size:.92em;line-height:1.75;white-space:nowrap;color:var(--text)}
.np i{font-style:normal;color:var(--faint);font-weight:600}
.np i::before{content:"‹"}
html[dir=ltr] .np i::before{content:"›"}
.gd-tip{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line-2);border-inline-start:3px solid var(--accent);border-radius:12px;background:var(--surface);line-height:1.8;font-size:15px}
.gd-tip.warn{border-inline-start-color:var(--warn)}
.gd-tip>b{white-space:nowrap;font-weight:500}
.gd-tip p{margin:0}
.gd-fig{margin:0;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--sh-2)}
.gd-fig a{display:block;cursor:zoom-in}
.gd-fig img{display:block;width:100%;height:auto;aspect-ratio:1280/800}
.gd-fig figcaption{padding:10px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.gd-figs{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:14px;align-items:start}
.gd-fig-phone img{aspect-ratio:390/844}
.gd-table{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.gd-table th,.gd-table td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.7}
.gd-table th{background:var(--raised);font-size:13.5px;font-weight:500;color:var(--muted)}
.gd-table tr:last-child td{border-bottom:0}
.gd-table td:first-child{font-weight:500;white-space:nowrap}
.gd-none{padding:28px;text-align:center;border:1px dashed var(--line-3);border-radius:14px;color:var(--muted)}
.gd-help{margin-top:8px}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .lp-nav{display:none}.lp-menu{display:block}.lp-acts{margin-inline-start:auto}
  .lp-hero{grid-template-columns:1fr;gap:36px;padding-top:40px}
  .lp-hero h1{max-width:none}
  .lp-lead{max-width:640px}
  .lp-visual{max-width:760px;margin-inline:auto;width:100%}
  .lp-types,.lp-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-split{grid-template-columns:1fr;gap:36px}
  .lp-price{grid-template-columns:1fr}.lp-sum{position:static}
  .lp-foot-in{grid-template-columns:repeat(3,1fr)}.lp-foot-brand{grid-column:1/-1}
  .gd-body{grid-template-columns:1fr;gap:28px}
  .gd-toc{display:none}
  .gd-toc-m{display:block;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
  .gd-toc-m summary{padding:14px 18px;font-weight:500;cursor:pointer}
  .gd-toc-m nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:0 8px 10px}
  .gd-toc-m a{padding:8px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:15px}
  .gd-toc-m a:hover{background:var(--sunk);color:var(--text)}
}
@media (max-width:700px){
  .lp main{gap:80px}
  .lp main>section,.lp-top-in,.lp-foot-in,.lp-copy{width:calc(100% - 32px)}
  .lp-top-in{gap:10px;height:60px}
  .lp-login{display:none}
  .lp-lead{font-size:17px}
  .lp-steps,.lp-types,.lp-feats,.lp-mods,.lp-faq,.lp-benefits{grid-template-columns:1fr}
  .lp-benefits li{flex-direction:row;gap:14px;padding:18px 0 20px}
  .lp-price-main{padding:16px}
  .lp-price-pick{grid-template-columns:minmax(0,1fr) 104px}
  .lp-tabs{align-self:stretch;overflow-x:auto;scrollbar-width:none}
  .lp-visual{padding:0 0 20px}
  .lp-hero .lp-screen{display:none}
  .lp-phone{position:relative;inset:auto;width:min(62%,250px);margin-inline-start:auto;display:block}
  .lp-float{top:28px;inset-inline-start:0;width:min(62%,250px)}
  .lp-end{padding:44px 18px;border-radius:20px}
  .lp-foot-in{grid-template-columns:repeat(2,1fr)}
  .gd-who{grid-template-columns:1fr}
  .gd-figs{grid-template-columns:1fr}
  .gd-fig-phone{max-width:240px}
  .gd-toc-m nav{grid-template-columns:1fr}
  .gd-steps>li{padding-inline-start:42px}
  .gd-table td:first-child{white-space:normal}
}
@media (max-width:380px){
  .lp-top .brand>span:last-child{display:none}
}

/* simpler home: business kinds as chips, one price card, calculator on demand */
.lp-kinds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.lp-kinds li{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-lg);font-weight:500;font-size:16px;background:var(--surface)}
.lp-cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:40px;align-items:center;padding:36px 40px;border-radius:20px;border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--sh-2)}
.lp-cost-main{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.lp-cost-main>b,.lp-cost-main .money{font-size:clamp(52px,6.4vw,80px);line-height:1;font-weight:600;letter-spacing:-.035em;color:var(--text)}
.lp-cost-main>b small,.lp-cost-main .money small{font-size:17px;font-weight:400;letter-spacing:0;color:var(--muted)}
.lp-cost-main .btn{margin-top:14px}
.lp-cost-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.lp-cost-list li{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:15.5px}
.lp-cost-list li span{color:var(--muted)}
.lp-cost-list li b{font-weight:500}
.lp-cost-list li.total{border-bottom:0;padding-bottom:0}
.lp-cost-list li.total span{color:var(--text);font-weight:500}
.lp-cost-list li.total b{color:var(--accent-text);font-weight:600;font-size:18px}
.lp-calc{margin-top:16px}
.lp-calc>summary{cursor:pointer;color:var(--accent-text);font-weight:500;padding:8px 0;width:max-content}
.lp-calc[open]>summary{margin-bottom:12px}
@media (max-width:860px){
  .lp-cost{grid-template-columns:1fr;gap:24px;padding:24px 20px}
  .lp-cost .btn{width:100%}
  .lp-kinds{grid-template-columns:1fr 1fr}
  .lp-kinds li{padding:12px;font-size:15px;gap:10px}
  .lp-kinds .ic{width:38px;height:38px}
  /* benefits and steps as compact rows: icon or number beside the text */
  .lp-feat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px;align-items:start}
  .lp-feat .ic{grid-row:1/span 2;width:40px;height:40px}
  .lp-feat h3{font-size:16.5px;margin:0}
  .lp-feat p{font-size:14px;line-height:1.7}
  .lp-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;padding:16px;align-items:start}
  .lp-steps .lp-num{grid-row:1/span 2;margin:0}
  .lp-steps b{font-size:16.5px}
}

@media print{
  :root{--bg:#fff;--surface:#fff;--raised:#F2F2F2;--line:#DDD;--line-2:#CCC;--line-3:#BBB;--text:#000;--muted:#333;--tint:#fff}
  html,body,.lp{background:#fff!important;color:#000!important}
  .lp-top,.lp-foot,.wa-float,.gd-toc,.gd-toc-m,.gd-tools,.gd-who,.gd-help,.lp-copy{display:none!important}
  .lp main{gap:24px;padding:0}
  .lp main>section{width:100%}
  .gd-body{display:block}
  .gd-ch{padding-bottom:18px;margin-bottom:18px}
  .gd-ch-h,.gd-tip,.gd-fig,.gd-steps>li{break-inside:avoid}
  .gd-ch-h,.gd-lead,.gd-ch h3{break-after:avoid}
  .gd-fig img{max-height:9cm;width:auto;max-width:100%;margin:auto}
  .gd-steps>li::before{color:#000}
  a{color:#000;text-decoration:none}
}

/* the 4 doors */
.lp-doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lp-door{display:flex;flex-direction:column;gap:16px;padding:20px 20px 22px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);box-shadow:var(--sh-1)}
.lp-sign{display:flex;align-items:center;gap:12px;font-size:17.5px;font-weight:500;margin:0;padding:0 0 14px;border-bottom:1px solid var(--line)}
.lp-sign .ic{width:38px;height:38px;border-radius:10px}
.lp-door ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.lp-door li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text-2)}
.lp-door li svg{color:var(--faint);flex-shrink:0}
.lp-door>a:not(.btn){font-weight:500;color:var(--accent-text);text-decoration:none}
.lp-door>a:not(.btn):hover{text-decoration:underline;text-underline-offset:5px}
.lp-door.wide{grid-column:1/-1}
.lp-door.wide ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.lp-door.wide .btn{align-self:flex-start}
.lp-other{margin:14px 0 0;color:var(--muted)}
@media (max-width:1000px){.lp-doors{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.lp-doors{grid-template-columns:1fr}.lp-door{padding:16px 16px 18px}}
/* activity pages (/pos/…) */
.lp-crumbs{width:min(1160px,calc(100% - 48px));margin:0 auto;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}
.lp-crumbs a{color:var(--muted);text-decoration:none}
.lp-crumbs a:hover{color:var(--text)}
.lp-crumbs [aria-current]{color:var(--text)}
.lp-crumbs+.lp-hero{margin-top:-88px;padding-top:0}   /* the page title sits under its breadcrumb, not a screen below it */
@media (max-width:700px){.lp-crumbs+.lp-hero{margin-top:-56px}}
html[dir=ltr] .lp-crumbs span[aria-hidden]{transform:scaleX(-1)}
.lp-acts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.lp-act{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--sh-1)}
.lp-act:hover{border-color:var(--line-3);color:var(--text)}
.lp-act b{font-size:16px;font-weight:500}
.lp-act .muted{font-size:14px}
.lp-mod-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.lp-mod-list li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.lp-door li a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.lp-door li a:hover{color:var(--text)}
.lp-foot-acts{width:min(1160px,calc(100% - 48px));margin:28px auto 0;padding:0 0 4px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px}
.lp-foot-acts b{width:100%;font-size:14px;color:var(--text);font-weight:500}
.lp-foot-acts a{color:var(--muted);text-decoration:none}
.lp-foot-acts a:hover{color:var(--text)}
@media (max-width:620px){.lp-crumbs,.lp-foot .lp-foot-acts{width:calc(100% - 32px)}.lp-crumbs{padding-top:14px}}
.lp-foot .lp-foot-acts{flex-direction:row;align-items:baseline;border-top:1px solid var(--line-2);padding-top:18px}
.lp-feats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.lp-feats.four{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.lp-feats.four{grid-template-columns:1fr}}

/* ---------- prices page ---------- */
.pr-hero .lp-lead b{color:var(--text);font-weight:600}
.pr-door{display:flex;flex-direction:column;gap:12px}
.pr-door h3{margin:0;font-size:20px;font-weight:600}
.pr-list{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.pr-type+.pr-type{border-top:1px solid var(--line-2)}
.pr-type summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 20px;align-items:baseline;padding:16px 20px;cursor:pointer;list-style:none}
.pr-type summary::-webkit-details-marker{display:none}
.pr-type summary::after{content:"+";grid-column:4;grid-row:1;color:var(--muted);font-size:18px}
.pr-type[open] summary::after{content:"−"}
.pr-name{font-weight:500;font-size:16.5px}
.pr-from{font-variant-numeric:tabular-nums}
.pr-from b{font-size:18px}
.pr-yr{font-size:14px}
.pr-mods{padding:0 20px 18px}
.pr-mods ul{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px 24px}
.pr-mods li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line-2);font-size:14.5px}
.pr-mods li>span{display:flex;flex-direction:column;gap:3px}
.pr-mods li small{font-size:13px;line-height:1.6}
.pr-mods em{font-style:normal;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-incl{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px 32px}
.pr-incl li{display:flex;gap:10px;align-items:flex-start;font-size:16px}
/* ---------- e-receipt guide ---------- */
.er-body{max-width:760px;display:flex;flex-direction:column;gap:14px;font-size:16.5px;line-height:1.95}
.er-body h2{margin:18px 0 0;font-size:24px;font-weight:600}
.er-body p{margin:0}
.er-steps{margin:0;padding:0;list-style:none;counter-reset:er;display:flex;flex-direction:column;gap:14px}
.er-steps li{counter-increment:er;display:grid;grid-template-columns:34px 1fr;gap:2px 14px}
.er-steps li::before{content:counter(er);grid-row:span 2;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-weight:600}
.er-steps b{font-weight:600}
.er-steps span{color:var(--text-2)}
.er-note{font-size:14.5px;border-top:1px solid var(--line-2);padding-top:14px}
@media (max-width:640px){
  .pr-type summary{grid-template-columns:minmax(0,1fr) auto;padding:14px 16px}
  .pr-yr{grid-column:1/-1}
  .pr-type summary::after{grid-column:3}
  .pr-mods{padding:0 16px 16px}
}
.pr-hero h1,.er-doc h1{margin:0;font-size:clamp(36px,4.6vw,58px);line-height:1.15;font-weight:600;letter-spacing:-.03em}
.er-doc h1{font-size:clamp(32px,4vw,50px)}
.pr-mods li .chip{align-self:flex-start;margin:1px 0}
/* the black look: the bar on top goes black too */
:root[data-theme=dark] .lp-top{background:rgba(0,0,0,.78);border-bottom-color:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .lp-top{background:rgba(0,0,0,.78);border-bottom-color:var(--line)}}
/* each kind of business wears its own colour and drawing (app.css .fc gives --fc, --fct, --fc-on, --fm) */
.lp-tg{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--fc) 11%,var(--surface));color:var(--fct)}
.lp-door li .lp-tg svg{color:inherit}
.lp-door li a{gap:10px}
.lp-door li a:hover .lp-tg{background:var(--fc);color:var(--fc-on)}
.lp-act .lp-tg{width:38px;height:38px;border-radius:11px;margin-bottom:8px}
.lp-act.fc:hover{border-color:color-mix(in srgb,var(--fc) 45%,var(--line-2))}
.lp-act-row{flex-direction:row;align-items:center;gap:12px}
.lp-act-row .lp-tg{margin:0}
.lp-fmark{width:60px;height:60px;border-radius:18px;margin-bottom:-4px;box-shadow:0 10px 24px -12px var(--fc)}
.lp-hero-f .lp-visual.fc-motif{padding:28px;border-radius:26px;background:color-mix(in srgb,var(--fc) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--fc) 16%,var(--line))}
main.fc .lp-feat .ic{background:color-mix(in srgb,var(--fc) 11%,var(--surface));color:var(--fct)}
@media (max-width:700px){
  .lp-hero-f .lp-screen{display:block}
  .lp-hero-f .lp-visual.fc-motif{padding:14px;border-radius:20px}
  .lp-fmark{width:52px;height:52px;border-radius:15px}
}

/* ---- the all-inclusive prices by period: three cards; on view each price counts down from the shortest period's ---- */
.pp{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:8px}
.pp-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:28px 24px 24px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface)}
.pp-card.hot{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-2));box-shadow:0 22px 60px -30px color-mix(in srgb,var(--accent) 75%,transparent)}
.pp-card.hot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--edge-angle),transparent 0 62%,var(--accent-text) 80% 86%,transparent 98%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:zc-edge 5s linear infinite}
.pp-tag{position:absolute;top:-12px;inset-inline-start:20px;padding:3px 11px;border-radius:99px;font-size:12.5px;font-weight:700;background:var(--accent);color:var(--on-accent)}
.pp-card:not(.hot) .pp-tag{background:#000;color:var(--accent-text);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.pp-card h3{margin:0;font-size:18px;font-weight:700;color:var(--text)}
.pp-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:8px}
.pp-num{font-size:clamp(42px,4.8vw,56px);line-height:1;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text);min-width:3.6ch}
.pp-price small{font-size:14px;color:var(--muted)}
.pp-was{order:-1;width:100%;color:var(--faint);font-size:15px;text-decoration-thickness:1.5px}
.pp-total{color:var(--muted);font-size:14px}
.pp-save{align-self:flex-start;margin-top:10px;padding:4px 11px;border-radius:99px;font-size:13.5px;font-weight:700;color:#34D399;background:rgba(52,211,153,.1)}
.pp-save.none{color:var(--muted);background:var(--raised);font-weight:500}
.pp-incl{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;margin:22px 0 0;padding:0;color:var(--muted);font-size:14.5px}
.pp-incl li::before{content:"✓";color:var(--accent-text);margin-inline-end:7px;font-weight:700}
.pp-cta{display:flex;justify-content:center;margin-top:20px}
/* the reveal: cards rise in turn; the old price and the saving pop in once the count has landed */
.pp.ready .pp-card{opacity:0;transform:translateY(22px)}
.pp.ready.in .pp-card{opacity:1;transform:none;transition:opacity .6s ease calc(var(--i) * .12s),transform .7s cubic-bezier(.2,.75,.2,1) calc(var(--i) * .12s)}
.pp.ready .pp-was,.pp.ready .pp-save{opacity:0;transform:scale(.85)}
.pp.ready .pp-card.done .pp-was,.pp.ready .pp-card.done .pp-save{opacity:1;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
@media (prefers-reduced-motion:reduce){.pp-card.hot::after{animation:none}}
@media (max-width:700px){.pp{grid-template-columns:1fr}.pp-card{padding:24px 20px 20px}}
@media print{.pp-card.hot::after{display:none}}
.pp-was.ghost{visibility:hidden}

/* ---- home hero: a warm glow from the counter on the black, a faint dot grid, and one opening sequence ---- */
.lp-hero.hero-home{position:relative;isolation:isolate}
.hero-bg{position:absolute;z-index:-1;top:-150px;left:50%;width:100vw;height:calc(100% + 280px);transform:translateX(-50%);pointer-events:none;overflow:hidden}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--text) 22%,transparent) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 46%,#000 0,transparent 78%);mask-image:radial-gradient(ellipse 58% 52% at 50% 46%,#000 0,transparent 78%);opacity:.6}
.hero-bg::after{content:"";position:absolute;inset:auto 0 0;height:220px;background:linear-gradient(transparent,var(--bg))}

/* the opening: the words rise, the cashier screen lands, the phone slides in, the receipt prints */
.hero-home .lp-hero-text>*{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) both}
.hero-home .lp-hero-text>:nth-child(2){animation-delay:.12s}
.hero-home .lp-hero-text>:nth-child(3){animation-delay:.24s}
.hero-home .lp-hero-text>:nth-child(4){animation-delay:.36s}
@keyframes heroUp{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.hero-home .lp-screen{animation:heroScreen 1s cubic-bezier(.16,.8,.24,1) .15s both;
  box-shadow:0 0 0 1px var(--line),0 30px 60px -18px rgba(0,0,0,.6)}
@keyframes heroScreen{from{opacity:0;transform:translateY(42px) scale(.96)}to{opacity:1;transform:none}}
.hero-home .lp-phone{animation:heroPhone .9s cubic-bezier(.16,.8,.24,1) .5s both,floatB 7s ease-in-out 1.6s infinite}
@keyframes heroPhone{from{opacity:0;transform:translateX(-40px) translateY(20px)}to{opacity:1;transform:none}}
[dir=ltr] .hero-home .lp-phone{animation-name:heroPhoneL,floatB}
@keyframes heroPhoneL{from{opacity:0;transform:translateX(40px) translateY(20px)}to{opacity:1;transform:none}}
.hero-home .lp-float{animation:heroDrop .7s cubic-bezier(.2,.8,.25,1.15) .75s both,floatA 6s ease-in-out 1.9s infinite;
  box-shadow:0 0 0 1px var(--line),0 24px 50px -14px rgba(0,0,0,.6)}
@keyframes heroDrop{from{opacity:0;transform:translateY(-26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes floatA{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes floatB{0%,100%{translate:0 0}50%{translate:0 6px}}
.hero-home .lr-lines li{animation:heroLine .35s ease-out both}
.hero-home .lr-lines li:nth-child(1){animation-delay:1.05s}
.hero-home .lr-lines li:nth-child(2){animation-delay:1.17s}
.hero-home .lr-lines li:nth-child(3){animation-delay:1.29s}
.hero-home .lr-lines li:nth-child(4){animation-delay:1.41s}
.hero-home .lr-lines li.total{animation-delay:1.6s}
.hero-home .lr-foot{animation:heroLine .4s ease-out 1.8s both}
@keyframes heroLine{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:700px){.hero-bg{top:-90px}.hero-home .lp-visual{transform:none}}


/* Activity pages share the home hero composition, with examples from their own trade. */
.hero-industry .lp-fmark{width:46px;height:46px;border-radius:13px;margin-bottom:-6px}
.hero-industry .lp-fmark svg{width:24px;height:24px}
.hero-industry .lp-hero-text{gap:20px}
.hero-paused .lp-phone,.hero-paused .lp-float{animation-play-state:paused}
.lp-phone-demo{background:var(--surface);border-color:#111827;aspect-ratio:390/760}
.hp-mobile{padding:9px 7px;font-size:clamp(6px,.7vw,10px);line-height:1.55;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:100%;box-sizing:border-box;color:var(--text);background:var(--bg);direction:rtl}
.hp-mobile-top{display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:7px;font-size:1em}.hp-mobile-top img{width:16px;height:16px;aspect-ratio:1;border-radius:4px;background:#000}.hp-mobile-top i{margin-inline-start:auto;width:4px;height:4px;border-radius:50%;background:var(--ok)}
.hp-place{color:var(--accent-text);font-size:.83em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hp-mobile>strong{font-size:1.25em;margin-top:-4px}.hp-mobile-kpis{display:grid;grid-template-columns:1.6fr 1fr;gap:4px}.hp-mobile-kpis span{border:1px solid var(--line);border-radius:5px;padding:5px;color:var(--muted);font-size:.7em}.hp-mobile-kpis b{font-size:1.65em;display:block;color:var(--text);margin-top:2px;font-variant-numeric:tabular-nums}
.hp-chart{height:38px;display:flex;align-items:end;gap:3px;padding:3px;border-bottom:1px solid var(--line);direction:ltr}.hp-chart i{flex:1;height:var(--bar);background:var(--accent);border-radius:2px 2px 0 0;opacity:.8}.hp-small-title{font-size:.85em}.hp-mobile-row{display:flex;gap:3px;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:4px;font-size:.7em}.hp-mobile-row span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hp-mobile-row b{white-space:nowrap;font-variant-numeric:tabular-nums}.hp-mobile-cta{padding:5px 2px;text-align:center;background:var(--accent);color:var(--on-accent);border-radius:4px;font-weight:600;font-size:.72em}.hp-example{text-align:center;color:var(--muted);font-size:.65em}
@media(max-width:1020px) and (min-width:701px){.hp-mobile{font-size:11px;padding:12px 9px;gap:10px}.hp-chart{height:48px}}
@media(max-width:700px){.hero-industry .lp-visual{min-height:0}.hero-industry .lp-hero-text{gap:20px}.hp-mobile{font-size:12px;padding:15px 11px;gap:12px}.hp-mobile-top img{width:22px;height:22px}.hp-chart{height:58px}.hp-mobile-kpis span{padding:8px}.hp-mobile-row{padding-bottom:7px}.hp-mobile-cta{padding:8px 3px}}
.hero-industry .lp-hero-text>:nth-child(5){animation-delay:.48s}