/* v3: the pages of the 12 Oct 2026 web-page changes — new Home, Products, POS page, plan pages.
   Loaded after site.css (and home.css where the old sections are reused). */

/* ───────────── Home: hero ───────────── */
.h3-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#EEF3FB 100%);padding:58px 0 70px}
.h3-hero:before{content:'';position:absolute;right:-160px;top:-200px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#D5E1F3,#2F62AE);opacity:.32}
.h3-copy{position:relative;text-align:center;max-width:860px;margin:0 auto}
.h3-copy h1{font:800 clamp(34px,5.2vw,62px)/1.04 var(--display);letter-spacing:-.025em;text-wrap:balance}
.h3-copy h1 em{font-style:normal;color:var(--orangeD)}
.h3-copy .h3-sub{font:800 clamp(19px,2.4vw,27px)/1.25 var(--display);color:var(--deep);margin-top:16px}
.h3-copy p.h3-p{margin:14px auto 0;font-size:18px;color:#44587F;max-width:62ch}
.h3-copy .btns{justify-content:center}

/* before / after banner */
.ba{position:relative;margin:44px auto 0;max-width:1120px;border-radius:30px;overflow:hidden;box-shadow:0 30px 70px rgba(11,42,94,.22),0 4px 10px rgba(11,42,94,.1);display:grid;grid-template-columns:1fr 1.05fr 1fr;background:#fff}
.ba-l,.ba-r{position:relative;padding:26px 24px 92px;display:flex;flex-direction:column;gap:12px;min-height:470px}
.ba-l{background:linear-gradient(160deg,#D9D3C9,#B9B2A6 70%,#9D968A)}
.ba-r{background:linear-gradient(160deg,#FFF2D2,#FFD98A 60%,#F5B94A);align-items:flex-end}
.ba-tag{font:800 20px/1 var(--display);font-style:italic;letter-spacing:.01em;color:#2C2A26;margin-bottom:4px;transform:rotate(-4deg);align-self:flex-start}
.ba-r .ba-tag{align-self:flex-end;transform:rotate(-3deg);color:#3B2A06}
.qchip{background:rgba(255,255,255,.62);color:#3A3731;font:600 13.5px/1.2 var(--text);padding:9px 14px;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,.12);align-self:flex-start}
.qchip:nth-of-type(2n){align-self:center;margin-left:22px}
.achip{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);font:700 13.5px/1.2 var(--text);padding:10px 12px;border-radius:14px;box-shadow:0 8px 18px rgba(140,90,0,.18);width:max-content;max-width:100%}
.achip svg{flex:none;width:26px;height:26px;color:#1E7A4C}
.achip i{flex:none;width:18px;height:18px;border-radius:50%;background:#3BA55C;color:#fff;font:800 11px/18px var(--text);text-align:center;font-style:normal}
.face{margin-top:auto;display:block;width:min(100%,230px);height:auto;align-self:center;filter:drop-shadow(0 12px 14px rgba(0,0,0,.22))}
.ba-c{justify-content:center;position:relative;z-index:2;background:linear-gradient(180deg,#fff,#F6F9FE);display:flex;flex-direction:column;align-items:center;padding:30px 18px 92px;text-align:center;box-shadow:0 0 40px rgba(11,42,94,.2)}
.ba-c .ba-logo{display:flex;align-items:center;gap:10px}.ba-c .ba-logo img{width:56px;height:56px}.ba-c .ba-logo b{font:800 34px/1 var(--display);color:var(--deep)}
.ba-c .ba-one{font:600 15px/1.35 var(--text);color:#44587F;margin-top:10px}.ba-c .ba-one strong{display:block;font:800 17px/1.25 var(--display);color:var(--ink)}
.ba-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;width:100%}
.ba-tile{background:#fff;border-radius:16px;padding:12px 6px 10px;box-shadow:0 10px 24px rgba(11,42,94,.16);border:1px solid rgba(11,42,94,.07)}
.ba-tile .bi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;margin:0 auto 8px}
.ba-tile.cg .bi{background:linear-gradient(150deg,#FF9A3C,#F26B1D)}.ba-tile.cb .bi{background:linear-gradient(150deg,#4F9BFF,#1D5FE0)}.ba-tile.cv .bi{background:linear-gradient(150deg,#41C97B,#1E9E56)}
.ba-tile b{display:block;font:800 13.5px/1.15 var(--text);color:var(--ink)}.ba-tile small{display:block;font:600 10.5px/1.35 var(--text);color:#5B6B8B;margin-top:4px}
.ba-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;height:70px;background:linear-gradient(90deg,#3B2A1C,#5A402B 50%,#3B2A1C);display:grid;grid-template-columns:repeat(3,1fr);align-items:center;color:#fff}
.ba-bar span{display:flex;align-items:center;justify-content:center;gap:10px;font:700 clamp(14px,1.7vw,19px)/1.1 var(--text);border-right:1px solid rgba(255,255,255,.2)}
.ba-bar span:last-child{border-right:0}.ba-bar svg{width:26px;height:26px;flex:none}
@media(max-width:880px){
  .ba{grid-template-columns:1fr;border-radius:24px}
  .ba-l,.ba-r{min-height:0;padding:22px 20px}.ba-r{align-items:flex-start}.ba-c{padding:24px 18px}.ba-bar{position:static;height:auto;grid-template-columns:1fr;padding:6px 0}
  .ba-bar span{border-right:0;border-bottom:1px solid rgba(255,255,255,.15);padding:13px 0}.ba-bar span:last-child{border-bottom:0}
  .face{width:110px;margin-top:6px}.ba-r .ba-tag{align-self:flex-start}
}

/* ───────────── Home: products, why, closing ───────────── */
.h3-sec{padding:84px 0 0}
.h3-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media(max-width:900px){.h3-trio{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}
.h3-card{display:flex;flex-direction:column;border-radius:26px;padding:26px 26px 24px;box-shadow:0 2px 4px rgba(11,27,58,.05),0 16px 36px rgba(11,27,58,.10);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.h3-card:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(11,27,58,.05),0 28px 54px rgba(11,27,58,.16)}
.h3-card.cg{background:linear-gradient(160deg,#F4FBF6,#fff)}.h3-card.cb{background:linear-gradient(160deg,#F1F6FE,#fff)}.h3-card.cv{background:linear-gradient(160deg,#F6F2FE,#fff)}
.h3-card .ic{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;color:#fff;margin-bottom:16px;box-shadow:0 12px 24px rgba(11,27,58,.2)}
.h3-card.cg .ic{background:linear-gradient(150deg,#5FD08A,#2E8449)}.h3-card.cb .ic{background:linear-gradient(150deg,#6F9BDB,#143A7B)}.h3-card.cv .ic{background:linear-gradient(150deg,#A98AF0,#6B46C1)}
.h3-card h3{font:800 26px/1.1 var(--display)}.h3-card .t{font-weight:700;color:var(--deep);font-size:14px;margin:4px 0 10px}.h3-card p{color:var(--body);font-size:15px}
.h3-card em{font-style:normal;font-weight:800;color:var(--orangeD);margin-top:auto;padding-top:18px;font-size:14.5px}
.h3-card .roll{position:absolute;top:18px;right:18px;background:#6B46C1;color:#fff;font:800 11px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:99px}
.h3-why{margin-top:84px;padding:84px 0;background:linear-gradient(180deg,#F5F8FD,#fff)}
.h3-why .tag4{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.h3-why .tag4 span{background:#fff;border-radius:99px;padding:13px 24px;font:800 17px/1 var(--display);color:var(--deep);box-shadow:0 10px 24px rgba(11,42,94,.12);border:1px solid rgba(11,42,94,.08)}
.h3-why .why-p{max-width:60ch;margin:26px auto 0;text-align:center;font-size:18px;color:#44587F}
.h3-close{padding:0 0 10px}
.h3-close .cta-card{background:linear-gradient(120deg,#0B2A5E,#143A7B 55%,#2F62AE)}
.h3-close .cta-card h2{max-width:none;font-size:clamp(28px,4vw,44px)}

/* ───────────── Products page: three big cards ───────────── */
.pr-top{background:linear-gradient(135deg,#F5F8FD,#E8EFFA);padding:54px 0 46px;position:relative;overflow:hidden}
.pr-top:before{content:'';position:absolute;right:-90px;top:-130px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#D5E1F3,#2F62AE);opacity:.35}
.pr-top .wrap{position:relative}
.pr-top .eyebrow{color:#5B86CF}
.pr-top h1{font:800 clamp(32px,4.8vw,54px)/1.05 var(--display);letter-spacing:-.02em;margin-top:12px}
.pr-top p{color:#44587F;font-size:18px;max-width:62ch;margin-top:14px}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:40px 0 0}
@media(max-width:1000px){.pr-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.pcard{position:relative;display:flex;flex-direction:column;border-radius:26px;padding:26px 26px 22px;border:1px solid rgba(11,42,94,.06);box-shadow:0 2px 4px rgba(11,27,58,.05),0 18px 40px rgba(11,27,58,.09)}
.pcard.cg{background:linear-gradient(160deg,#F2FBF5 0%,#fff 70%)}.pcard.cb{background:linear-gradient(160deg,#EFF5FE 0%,#fff 70%)}.pcard.cv{background:linear-gradient(160deg,#F5F0FE 0%,#fff 70%)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;height:150px}
.pc-ic{width:70px;height:70px;border-radius:21px;display:grid;place-items:center;color:#fff;box-shadow:0 14px 28px rgba(11,27,58,.2);flex:none}
.pcard.cg .pc-ic{background:linear-gradient(150deg,#4FCB7E,#1E9E56)}.pcard.cb .pc-ic{background:linear-gradient(150deg,#4F8EF0,#1D4FB8)}.pcard.cv .pc-ic{background:linear-gradient(150deg,#9B7BF0,#6B46C1)}
.pcard h3{font:800 30px/1.05 var(--display);margin-top:14px}
.pc-sub{font-weight:700;color:#33456B;font-size:15px;margin-top:6px}
.pc-d{color:var(--body);font-size:15px;margin-top:10px;max-width:40ch}
.pc-ul{list-style:none;display:grid;gap:9px;margin:18px 0 20px}
.pc-ul li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:600;color:#26385E}
.pc-ul li:before{content:'✓';flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 12px/1 var(--text)}
.pcard.cg .pc-ul li:before{background:#3BA55C}.pcard.cb .pc-ul li:before{background:#2F62AE}.pcard.cv .pc-ul li:before{background:#7B55D6}
.pc-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 20px;border-radius:99px;color:#fff;font:800 16px/1 var(--text);margin-top:auto;box-shadow:0 14px 28px rgba(29,79,184,.32);background:linear-gradient(90deg,#6AA2F4,#1D4FB8);transition:transform .15s}
.pc-btn:hover{transform:translateY(-2px)}
.pc-more{display:block;text-align:center;font-weight:800;color:#1D4FB8;font-size:15px;margin-top:14px}.pc-more:hover{text-decoration:underline}
.pc-stat{text-align:center;color:var(--goD);font-weight:700;font-size:13px;margin-top:8px}
.pc-roll{display:inline-block;margin-left:12px;vertical-align:middle;background:#6B46C1;color:#fff;font:800 11px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:99px;box-shadow:0 8px 18px rgba(107,70,193,.28);position:relative;top:-3px}
.pr-more{margin:30px auto 0;padding:18px 24px;border-radius:20px;background:#fff;box-shadow:0 2px 4px rgba(11,27,58,.05),0 10px 24px rgba(11,27,58,.08);font-size:14.5px;color:var(--body);text-align:center}
.pr-more a{color:var(--orangeD);font-weight:700;margin:0 6px}.pr-more a:hover{text-decoration:underline}

/* the little UI pictures on the product cards */
.mock{flex:none;position:relative}
.m-sm{width:178px;background:#fff;border-radius:16px;box-shadow:0 14px 30px rgba(11,42,94,.16);padding:10px;border:1px solid rgba(11,42,94,.06)}
.m-sm .row{display:flex;gap:8px;align-items:center}.m-sm .th{width:40px;height:40px;border-radius:10px;background:radial-gradient(circle at 40% 40%,#F6B64D,#C9772A 60%,#8A4E14);flex:none}
.m-sm .nm{font:800 11px/1.2 var(--text);color:var(--ink)}.m-sm .ln{height:5px;border-radius:3px;background:#F6C77A;margin-top:5px;width:80%}.m-sm .ln.s{background:#E3E8F1;width:60%}
.m-sm .fc{margin-top:10px;padding-top:8px;border-top:1px solid #EDF1F7;display:flex;gap:10px;align-items:center}
.m-sm .fc small{display:block;font:800 9.5px/1 var(--text);color:#44587F;margin-bottom:6px;grid-column:1/-1}
.donut{width:54px;height:54px;border-radius:50%;background:conic-gradient(#2F62AE 0 28%,#E8A04A 28% 42%,#58B66E 42% 70%,#DCE6F5 70% 100%);display:grid;place-items:center;flex:none}
.donut b{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font:800 11px/1 var(--text);color:var(--ink)}
.m-sm .lg i{display:block;height:5px;border-radius:3px;background:#DCE6F5;margin:5px 0;width:40px}
.m-pos{width:190px}.m-pos .scr{background:#fff;border:5px solid #1B2B4A;border-radius:10px;padding:7px;box-shadow:0 14px 30px rgba(11,42,94,.2)}
.m-pos .it{display:flex;gap:6px;align-items:center;margin-bottom:5px}.m-pos .it i{width:20px;height:20px;border-radius:5px;background:radial-gradient(circle at 40% 40%,#F6B64D,#C9772A);flex:none}.m-pos .it b{height:5px;border-radius:3px;background:#DCE6F5;flex:1}
.m-pos .pay{height:15px;border-radius:5px;background:#2F62AE;color:#fff;font:800 8px/15px var(--text);text-align:center;margin-top:6px}
.m-pos .stand{width:34px;height:12px;background:#1B2B4A;margin:0 auto;border-radius:0 0 6px 6px}.m-pos .base{width:76px;height:6px;background:#1B2B4A;margin:0 auto;border-radius:4px}
.m-st{width:104px;margin-right:6px}.m-st .ph{background:#fff;border:4px solid #1B2B4A;border-radius:16px;padding:8px 8px 10px;box-shadow:0 14px 30px rgba(11,42,94,.2)}
.m-st .ph b{display:block;font:800 10px/1 var(--text);color:var(--ink);margin-bottom:8px}.m-st .ck{display:flex;gap:6px;align-items:center;margin-bottom:6px}.m-st .ck i{width:11px;height:11px;border-radius:3px;background:#2F62AE;flex:none}.m-st .ck u{height:4px;border-radius:2px;background:#DCE6F5;flex:1;text-decoration:none}
.m-st .ok{position:absolute;right:-8px;top:34px;width:30px;height:30px;border-radius:50%;background:#3BA55C;color:#fff;display:grid;place-items:center;font:800 15px/1 var(--text);box-shadow:0 8px 16px rgba(59,165,92,.4)}
.m-st .side{position:absolute;left:-30px;top:12px;display:grid;gap:8px}.m-st .side i{width:26px;height:26px;border-radius:8px;background:#fff;box-shadow:0 6px 14px rgba(11,42,94,.14);display:grid;place-items:center;color:#7B55D6;font:800 11px/1 var(--text);font-style:normal}

/* ───────────── Product pages: POS ───────────── */
.pos-hero{background:linear-gradient(180deg,#F3F7FD,#fff);padding:30px 0 40px;position:relative;overflow:hidden}
.pos-hero .crumbs{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pos-hero .crumbs a,.pos-hero .crumbs span{background:#fff;border-radius:99px;padding:9px 16px;font:800 12.5px/1 var(--text);letter-spacing:.04em;color:var(--deep);box-shadow:0 6px 16px rgba(11,42,94,.12)}
.pos-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:center;margin-top:30px}
@media(max-width:940px){.pos-grid{grid-template-columns:1fr}}
.pos-hero h1{font:800 clamp(34px,5vw,58px)/1.02 var(--display);letter-spacing:-.02em}.pos-hero h1 em{font-style:normal;color:#1D4FB8}
.pos-hero .lede{margin-top:18px}
.pos-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pos-btns .btn.outline{background:#fff;border:2px solid #1D4FB8;color:#1D4FB8;padding:12px 26px}
.pos-btns .btn.win{background:#fff;color:var(--ink);box-shadow:0 8px 20px rgba(11,42,94,.14);display:inline-flex;gap:9px;align-items:center}
.pos-art{position:relative;min-height:340px}
.pos-term{position:relative;margin:30px auto 0;width:min(100%,430px)}
.pos-term .scr{background:#1B2B4A;border-radius:14px;padding:9px;box-shadow:0 30px 60px rgba(11,42,94,.3)}
.pos-term .in{background:#fff;border-radius:7px;padding:9px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pos-term .in i{aspect-ratio:1.2;border-radius:6px;background:radial-gradient(circle at 40% 40%,#F6B64D,#C9772A 60%,#8A4E14)}.pos-term .in i:nth-child(3n){background:radial-gradient(circle at 40% 40%,#9AD27B,#4E8F36 60%,#2D5A1E)}
.pos-term .bar{grid-column:1/-1;height:16px;border-radius:5px;background:#2F62AE;color:#fff;font:800 9px/16px var(--text);text-align:center}
.pos-term .neck{width:56px;height:34px;background:#1B2B4A;margin:0 auto}.pos-term .foot{width:150px;height:9px;background:#1B2B4A;margin:0 auto;border-radius:6px}
.addchip{position:absolute;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 12px 26px rgba(11,42,94,.16);text-align:center;font:700 11.5px/1.2 var(--text);color:var(--ink);display:grid;gap:5px;justify-items:center;min-width:92px}
.addchip svg{width:30px;height:30px}
.pos-feat{padding:70px 0 0}
.pos-feat .eyebrow{display:block;text-align:center}.pos-feat h2.sec{text-align:center}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media(max-width:940px){.pf-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.pf-grid{grid-template-columns:1fr}}
.pf{background:#fff;border-radius:24px;padding:22px 22px 0;box-shadow:0 2px 4px rgba(11,27,58,.05),0 16px 36px rgba(11,27,58,.09);display:flex;flex-direction:column;overflow:hidden}
.pf .hd{display:flex;gap:14px;align-items:flex-start}
.pf .pi{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 10px 20px rgba(11,27,58,.18)}
.pf h3{font:800 19px/1.2 var(--display)}.pf p{color:var(--body);font-size:14.5px;margin-top:6px}
.pf .pic{margin:16px -22px 0;padding:18px 20px 0;min-height:170px}.pf .pic .scene{width:100%;height:auto;display:block}
.pf.red .pi{background:linear-gradient(150deg,#FF8E86,#E5483D)}.pf.red .pic{background:linear-gradient(150deg,#F58A7A,#C0392B)}
.pf.blue .pi{background:linear-gradient(150deg,#5FA0FF,#2563D6)}.pf.blue .pic{background:linear-gradient(150deg,#6B9BF0,#2F62AE)}
.pf.teal .pi{background:linear-gradient(150deg,#4FC3C9,#13727A)}.pf.teal .pic{background:linear-gradient(150deg,#4FC3C9,#13727A)}
.pf.gold .pi{background:linear-gradient(150deg,#F6C453,#C98A0B)}.pf.gold .pic{background:linear-gradient(150deg,#F6C453,#C98A0B)}
.pf.green .pi{background:linear-gradient(150deg,#5FD08A,#2E8449)}.pf.green .pic{background:linear-gradient(150deg,#5FD08A,#2E8449)}
.pf.amber .pi{background:linear-gradient(150deg,#6F9BDB,#143A7B)}.pf.amber .pic{background:linear-gradient(150deg,#6F9BDB,#143A7B)}
.pos-cta{padding:56px 0 0;text-align:center}

/* ───────────── plan pages ───────────── */
.pl-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#F1F6FE 0%,#E2EBF8 60%,#CFE0F5 100%);padding:52px 0 66px}
.pl-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:26px;align-items:center}
@media(max-width:940px){.pl-grid{grid-template-columns:1fr}}
.pl-copy h1{font:800 clamp(34px,4.9vw,58px)/1.02 var(--display);letter-spacing:-.022em}.pl-copy h1 em{font-style:normal;color:#1D4FB8}
.pl-copy .lede{margin-top:18px}
.pl-trust{list-style:none;display:grid;gap:11px;margin-top:24px}.pl-trust li{display:flex;gap:10px;align-items:center;font-weight:600;color:#33456B;font-size:15px}
.pl-trust li:before{content:'✓';width:22px;height:22px;border-radius:50%;background:#3BA55C;color:#fff;display:grid;place-items:center;font:800 12px/1 var(--text);flex:none}
.pl-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pl-btns .btn.go{display:inline-flex;gap:8px;align-items:center}
.pl-btns .btn.wa{background:#fff;color:var(--ink);box-shadow:0 10px 22px rgba(11,42,94,.14);display:inline-flex;gap:9px;align-items:center}
.lo-wrap{position:relative;padding-top:92px}
.lo-banner{position:absolute;left:0;right:0;top:0;height:112px;display:flex;align-items:center;gap:16px;padding:0 120px 0 74px;border-radius:18px;background:linear-gradient(100deg,#1E8C4A,#3BB563 55%,#2E9E55);color:#fff;box-shadow:0 18px 36px rgba(30,140,74,.35);transform:rotate(-2.2deg)}
.lo-banner:before{content:'';position:absolute;inset:6px;border-radius:14px;border:2px dashed rgba(255,255,255,.35)}
.lo-banner .mg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:50px;height:50px}
.lo-banner b{display:block;font:800 clamp(24px,3vw,36px)/1 var(--display);letter-spacing:.01em}.lo-banner small{display:block;font:700 12px/1 var(--text);letter-spacing:.2em;margin-top:7px;opacity:.95}
.lo-burst{position:absolute;right:-6px;top:-8px;width:132px;height:132px;z-index:3;filter:drop-shadow(0 12px 18px rgba(0,0,0,.2))}
.lo-burst text{font-family:'Baloo 2',Inter,sans-serif;font-weight:800;fill:#6A3A00}
.lo-cards{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media(max-width:560px){.lo-cards{grid-template-columns:1fr}.lo-banner{padding:0 100px 0 60px}}
.lo-card{position:relative;background:#fff;border-radius:20px;box-shadow:0 18px 40px rgba(11,42,94,.2);overflow:hidden}
.lo-card .hd{padding:15px 18px;font:800 19px/1 var(--display);color:#fff}
.lo-card.m6 .hd{background:linear-gradient(90deg,#5AA0FF,#3A80F0)}.lo-card.y1 .hd{background:#1B2F63}
.lo-card .best{position:absolute;right:0;top:0;background:#2FA24F;color:#fff;font:800 11.5px/1 var(--text);padding:8px 12px;border-radius:0 0 0 12px;display:flex;gap:6px;align-items:center}
.lo-card .bd{padding:16px 18px 20px}
.lo-card .was{display:flex;align-items:baseline;gap:8px;font-size:15px;color:#7A8AA8;min-height:0}
.lo-card .was s{font:800 21px/1 var(--display);color:#C0392B;text-decoration-thickness:3px}.lo-card .was small{font:700 12px var(--text);color:#7A8AA8}
.lo-card .now{display:flex;align-items:baseline;gap:6px;margin-top:6px}.lo-card .now b{font:800 clamp(30px,3.6vw,40px)/1 var(--display);letter-spacing:-.02em;color:var(--ink)}.lo-card .now small{font:700 13px var(--text);color:#44587F}
.lo-card .acc{display:inline-block;margin-top:10px;background:#E7EFFD;color:#2C4E96;font:700 12px/1 var(--text);padding:7px 14px;border-radius:99px}
.lo-card.y1 .acc{background:#E2F5E8;color:#1F7A41}
.lo-card ul{list-style:none;display:grid;gap:9px;margin:14px 0 16px}.lo-card li{display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:600;color:#26385E}
.lo-card li:before{content:'✓';width:19px;height:19px;border-radius:50%;background:#3BA55C;color:#fff;display:grid;place-items:center;font:800 11px/1 var(--text);flex:none}
.lo-card .go{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 12px;border-radius:99px;color:#fff;font:800 14.5px/1 var(--text);background:linear-gradient(90deg,#5AA0FF,#1D4FB8);box-shadow:0 12px 24px rgba(29,79,184,.32)}
.lo-card.y1 .go{background:linear-gradient(90deg,#4F86F0,#0B2A8A)}
.lo-confetti{position:absolute;inset:0;pointer-events:none;z-index:1}
.pl-plate{position:absolute;left:-30px;bottom:-34px;width:210px;height:auto;z-index:1;opacity:.95}
@media(max-width:940px){.pl-plate{display:none}}

/* POS hero: on small screens the add-on chips sit in a row under the terminal */
@media(max-width:940px){
  .pos-art{min-height:0;display:flex;flex-direction:column;gap:18px}
  .pos-art .addchip{position:static!important;display:inline-grid}
  .pos-art .addchip:nth-of-type(n){margin:0}
}
.pos-hero .lede{max-width:48ch}
.pl-grid>*,.lo-cards>*{min-width:0}

/* centre of the before/after picture: the wordmark as a hub, wired to the three products */
.ba-c .ba-word{position:relative;font:800 clamp(44px,5vw,60px)/1 var(--display);letter-spacing:-.02em;background:linear-gradient(100deg,#0B2A5E,#1D6B5A 70%,#2E9E55);-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:20px}
.ba-c .ba-word .hat{position:absolute;left:-2px;top:0;width:30px;height:24px}
.ba-c .ba-one{margin-top:12px}
.ba-wire{position:relative;width:76%;height:26px;margin-top:14px}
.ba-wire:before{content:'';position:absolute;left:50%;top:0;width:2px;height:13px;background:#B9C8E2;transform:translateX(-1px)}
.ba-wire:after{content:'';position:absolute;left:16.5%;right:16.5%;top:13px;height:13px;border:2px solid #B9C8E2;border-bottom:0;border-radius:10px 10px 0 0}
.ba-tiles{margin-top:0}
.ba-arr{position:absolute;bottom:104px;width:64px;height:auto;z-index:3}
.ba-arr.l{left:-20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}.ba-arr.r{right:-26px}
@media(max-width:940px){.ba-arr{display:none}.ba-wire{width:80%}}