/* ===== Home: core services grid + premium phone / laptop mockup sections =====
   The phone frame itself (.ae-phone, .ae-device, .ae-display ...) is shared with the AEPS section in home.css. */

/* ---------- core services grid ---------- */
.cs-sec{padding:clamp(60px,7vw,100px) 0; background:linear-gradient(180deg,#fff,#f3f8f5);}
.cs-head{max-width:820px; margin:0 auto 18px; text-align:center;}
.cs-head h2{font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.1; letter-spacing:-.03em; margin:0 0 14px; color:#0b1512;}
.cs-head p{color:#4a5a54; font-size:1.05rem; line-height:1.75; margin:0;}
.cs-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 44px;}
.cs-chips span{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px; background:#fff; border:1px solid rgba(14,107,84,.16); font-size:.82rem; font-weight:700; color:#0E6B54; letter-spacing:.02em;}
.cs-chips span i{color:#F3B400; font-size:1rem;}
.cs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.cs-card{position:relative; display:flex; flex-direction:column; padding:26px 24px 22px; border-radius:24px; background:#fff; border:1px solid rgba(14,107,84,.12); text-decoration:none; color:inherit; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.cs-card::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#0E6B54,#F3B400); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;}
.cs-card:hover{transform:translateY(-6px); border-color:rgba(243,180,0,.7); box-shadow:0 26px 48px -22px rgba(8,74,59,.32);}
.cs-card:hover::after{transform:scaleX(1);}
.cs-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.cs-ic{width:54px; height:54px; border-radius:16px; background:linear-gradient(145deg,#0E6B54,#084A3B); color:#F3B400; display:grid; place-items:center; font-size:1.6rem; box-shadow:0 12px 22px -10px rgba(8,74,59,.7); transition:transform .3s ease;}
.cs-card:hover .cs-ic{transform:rotate(-6deg) scale(1.06);}
.cs-no{font-size:2.1rem; font-weight:800; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.2px rgba(14,107,84,.22);}
.cs-card h3{margin:0 0 8px; font-size:1.12rem; letter-spacing:-.01em; color:#0b1512; line-height:1.3;}
.cs-card p{margin:0 0 18px; font-size:.9rem; line-height:1.65; color:#5b6b66; flex:1;}
.cs-go{display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:700; color:#0E6B54; transition:gap .25s ease, color .25s ease;}
.cs-card:hover .cs-go{gap:12px; color:#C98A00;}
.cs-band{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:26px; padding:22px 30px; border-radius:24px; background:linear-gradient(120deg,#0c3a2f,#06231c); color:#fff;}
.cs-band strong{display:block; font-size:1.25rem; letter-spacing:-.01em;} .cs-band span{display:block; margin-top:3px; font-size:.9rem; color:rgba(255,255,255,.7);}
.cs-band a{display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:100px; background:#F3B400; color:#0b1512; font-weight:700; font-size:.92rem; text-decoration:none; transition:gap .25s ease;}
.cs-band a:hover{gap:14px;}

/* ---------- feature sections with a mockup ---------- */
.pm-sec{padding:clamp(56px,6.5vw,92px) 0; background:#fbfaf6;}
.pm-sec.alt{background:linear-gradient(180deg,#f3f8f5,#fbfaf6);}
.pm-sec.dark{background:linear-gradient(165deg,#0b3a2f,#05211a 70%); color:#fff;}
.pm-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center;}
.pm-grid > *{min-width:0;}
.pm-grid.rev .pm-copy{order:2;}
.pm-copy h2{font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.12; letter-spacing:-.03em; margin:0 0 14px; color:#0b1512;}
.pm-copy > p{color:#4a5a54; font-size:1.02rem; line-height:1.75; margin:0 0 22px;}
.pm-sec.dark .pm-copy h2{color:#fff;} .pm-sec.dark .pm-copy > p{color:rgba(255,255,255,.75);}
.pm-sec.dark .ae-tag{background:rgba(243,180,0,.16); color:#F3B400;}
.pm-sec.dark .ae-points li{color:rgba(255,255,255,.85);} .pm-sec.dark .ae-points i{color:#F3B400;}
.pm-sec.dark .ae-btn.ghost{border-color:rgba(255,255,255,.4); color:#fff;}
.pm-mini{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 26px;}
.pm-mini div{padding:14px 14px 12px; border-radius:16px; background:#fff; border:1px solid rgba(14,107,84,.12);}
.pm-mini i{display:grid; place-items:center; width:34px; height:34px; margin-bottom:9px; border-radius:11px; background:#e5f3ed; color:#0E6B54; font-size:1.15rem;}
.pm-mini b{display:block; font-size:.86rem; color:#0b1512;} .pm-mini small{display:block; margin-top:2px; font-size:.74rem; line-height:1.4; color:#6b7a75;}
.pm-sec.dark .pm-mini div{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);} .pm-sec.dark .pm-mini i{background:rgba(243,180,0,.16); color:#F3B400;} .pm-sec.dark .pm-mini b{color:#fff;} .pm-sec.dark .pm-mini small{color:rgba(255,255,255,.6);}
.pm-stage{display:grid; place-items:center;}

/* ---------- screen content for the phones ---------- */
.pm-row{display:flex; align-items:center; gap:11px; padding:10px 12px; margin-bottom:8px; border-radius:14px; background:#fff; border:1.5px solid #e1e9e5; font-size:.82rem; font-weight:600; color:#33423d;}
.pm-row.on{border-color:#F3B400; background:#fff8e1;}
.pm-row small{display:block; font-weight:500; font-size:.68rem; color:#8a99a5;}
.pm-row > i{margin-left:auto; font-size:1.15rem; color:#cfdad6;} .pm-row.on > i{color:#0E6B54;}
.pm-av{width:34px; height:34px; border-radius:50%; background:#e5f3ed; color:#0E6B54; display:grid; place-items:center; font-size:.78rem; font-weight:800; flex-shrink:0;}
.pm-row.on .pm-av{background:#0E6B54; color:#F3B400;}
.pm-field{margin-bottom:10px;} .pm-field span{display:block; margin-bottom:5px; font-size:.7rem; font-weight:600; color:#6b7a75;}
.pm-field div{padding:11px 12px; border-radius:12px; background:#fff; border:1.5px solid #cfdad6; font-size:.84rem; font-weight:700; letter-spacing:.06em; color:#0b1512;}
.pm-field div.f{border-color:#0E6B54; box-shadow:0 0 0 3px rgba(14,107,84,.12);}
.pm-gt{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.pm-gt span{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px 10px; border-radius:14px; background:#fff; border:1.5px solid #e1e9e5; font-size:.66rem; font-weight:700; color:#33423d; text-align:center;}
.pm-gt span i{display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#e5f3ed; color:#0E6B54; font-size:1.1rem;}
.pm-gt span.on{border-color:#F3B400; background:#fff8e1;} .pm-gt span.on i{background:#0E6B54; color:#F3B400;}
.pm-chips{display:flex; gap:7px; margin:2px 0 12px;} .pm-chip{flex:1; text-align:center; padding:9px 0; border-radius:100px; background:#fff; border:1.5px solid #e1e9e5; font-size:.72rem; font-weight:700; color:#33423d;} .pm-chip.on{background:#0E6B54; border-color:#0E6B54; color:#fff;}
.pm-otp{display:flex; justify-content:center; gap:8px; margin:6px 0 4px;} .pm-otp span{width:40px; height:44px; border-radius:12px; background:#fff; border:1.5px solid #cfdad6; display:grid; place-items:center; font-size:1.1rem; font-weight:800; color:#0b1512;} .pm-otp span.f{border-color:#0E6B54; box-shadow:0 0 0 3px rgba(14,107,84,.12);}
.pm-hint{margin:8px 0 0; font-size:.72rem; color:#6b7a75; text-align:center;}
.pm-doc{display:flex; align-items:center; gap:11px; padding:11px 12px; margin-bottom:8px; border-radius:14px; background:#fff; border:1.5px solid #e1e9e5; font-size:.8rem; font-weight:600; color:#33423d;}
.pm-doc > i{font-size:1.3rem; color:#0E6B54;} .pm-doc small{display:block; font-weight:500; font-size:.66rem; color:#8a99a5;} .pm-doc em{margin-left:auto; font-style:normal; font-size:.64rem; font-weight:700; color:#0E6B54;}
.pm-doc.wait > i{color:#C98A00;} .pm-doc.wait em{color:#C98A00;}
.pm-bar{height:5px; margin-top:6px; border-radius:5px; background:#dbe6e1; overflow:hidden;} .pm-bar i{display:block; height:100%; width:62%; border-radius:5px; background:linear-gradient(90deg,#0E6B54,#F3B400); animation:pmFill 2s ease-in-out infinite;} @keyframes pmFill{0%{width:18%;} 100%{width:86%;}}
.pm-tl{position:relative; margin:6px 0 0 6px; padding-left:24px;}
.pm-tl::before{content:""; position:absolute; left:7px; top:6px; bottom:12px; width:2px; background:#dbe6e1;}
.pm-tl li{position:relative; list-style:none; padding:0 0 16px; font-size:.8rem; font-weight:700; color:#0b1512;}
.pm-tl li small{display:block; margin-top:1px; font-weight:500; font-size:.68rem; color:#8a99a5;}
.pm-tl li::before{content:""; position:absolute; left:-24px; top:1px; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid #cfdad6; box-sizing:border-box;}
.pm-tl li.done::before{background:#0E6B54; border-color:#0E6B54; box-shadow:inset 0 0 0 3px #0E6B54, inset 0 0 0 8px #0E6B54;}
.pm-tl li.now::before{border-color:#F3B400; background:#fff8e1; animation:pmPulse 1.6s ease-out infinite;} @keyframes pmPulse{0%{box-shadow:0 0 0 0 rgba(243,180,0,.5);} 100%{box-shadow:0 0 0 9px rgba(243,180,0,0);}}
.pm-tl li:not(.done):not(.now){color:#8a99a5;}
.pm-wallet{position:relative; padding:16px 16px 14px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#10785e,#07382d); overflow:hidden; box-shadow:0 14px 24px -14px rgba(8,74,59,.8);}
.pm-wallet::after{content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:rgba(243,180,0,.2);}
.pm-wallet small{display:block; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.7);} .pm-wallet b{display:block; margin:5px 0 12px; font-size:1.35rem; letter-spacing:.14em;}
.pm-wallet span{position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:100px; background:#F3B400; color:#0b1512; font-size:.72rem; font-weight:800;}
.pm-sub{margin:16px 0 8px; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a99a5;}
.pm-act{display:flex; align-items:center; gap:10px; padding:9px 11px; margin-bottom:7px; border-radius:14px; background:#fff; border:1px solid #e1e9e5; font-size:.78rem; font-weight:700; color:#0b1512;}
.pm-act > i{display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#e5f3ed; color:#0E6B54; font-size:1.05rem; flex-shrink:0;} .pm-act small{display:block; font-weight:500; font-size:.64rem; color:#8a99a5;}
.pm-act em{margin-left:auto; font-style:normal; padding:3px 8px; border-radius:100px; background:#e5f3ed; color:#0E6B54; font-size:.6rem; font-weight:800;}
.pm-chart{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; height:150px; margin:10px 0 6px; padding:14px 12px 10px; border-radius:18px; background:#fff; border:1px solid #e1e9e5;}
.pm-chart div{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; font-size:.6rem; font-weight:700; color:#8a99a5;}
.pm-chart i{display:block; width:100%; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,#F3B400,#e0a100); transform-origin:bottom; animation:pmGrow .9s ease both;} .pm-chart div:nth-child(odd) i{background:linear-gradient(180deg,#2fa77d,#0E6B54);}
@keyframes pmGrow{from{transform:scaleY(.1);}}
.pm-note{display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:14px; background:#fff8e1; border:1px solid #f1dfa0; font-size:.74rem; font-weight:600; color:#6b5200;} .pm-note i{font-size:1.2rem; color:#C98A00;}

/* ---------- partner hierarchy ---------- */
.pm-tree{display:grid; gap:10px; margin:0 0 26px;}
.pm-tree div{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:18px; background:#fff; border:1px solid rgba(14,107,84,.12);}
.pm-tree div:nth-child(2){margin-left:22px;} .pm-tree div:nth-child(3){margin-left:44px;}
.pm-tree i{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:linear-gradient(145deg,#0E6B54,#084A3B); color:#F3B400; font-size:1.25rem; flex-shrink:0;}
.pm-tree b{display:block; font-size:.95rem; color:#0b1512;} .pm-tree small{display:block; margin-top:1px; font-size:.78rem; color:#6b7a75; line-height:1.4;}

/* ---------- laptop (white label) ---------- */
.lp{--lp:#0E6B54; position:relative; width:min(100%,560px); margin:0 auto; transition:--lp .6s;}
.lp-lid{position:relative; padding:12px 12px 10px; border-radius:20px 20px 6px 6px; background:linear-gradient(160deg,#6b6f76,#25282c 22%,#121416 60%,#2c2f34); box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 40px 70px -26px rgba(0,0,0,.7);}
.lp-cam{position:absolute; top:4px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:radial-gradient(circle,#2f4e86,#000);}
.lp-screen{display:grid; grid-template-columns:96px 1fr; height:310px; border-radius:8px; overflow:hidden; background:#f4f7f6; font-family:'Inter',sans-serif; position:relative;}
.lp-screen::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.2),transparent 34%);}
.lp-side{padding:12px 10px; background:var(--lp); color:#fff; transition:background .6s ease;}
.lp-logo{display:flex; align-items:center; gap:6px; margin-bottom:14px; font-size:.62rem; font-weight:800; letter-spacing:.02em;} .lp-logo i{width:20px; height:20px; border-radius:6px; background:rgba(255,255,255,.9); color:var(--lp); display:grid; place-items:center; font-size:.8rem; transition:color .6s ease;}
.lp-side span{display:flex; align-items:center; gap:6px; padding:6px 7px; margin-bottom:3px; border-radius:7px; font-size:.54rem; font-weight:600; color:rgba(255,255,255,.78);} .lp-side span.on{background:rgba(255,255,255,.18); color:#fff;} .lp-side span i{font-size:.8rem;}
.lp-main{padding:10px 12px; display:flex; flex-direction:column; gap:8px; min-width:0;}
.lp-bar{display:flex; align-items:center; justify-content:space-between;} .lp-bar b{font-size:.68rem; color:#0b1512;} .lp-bar i{width:20px; height:20px; border-radius:50%; background:var(--lp); transition:background .6s ease;}
.lp-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.lp-kpi{padding:7px; border-radius:8px; background:#fff; border:1px solid #e6ecea;} .lp-kpi i{display:grid; place-items:center; width:18px; height:18px; margin-bottom:5px; border-radius:6px; background:color-mix(in srgb,var(--lp) 14%,#fff); color:var(--lp); font-size:.7rem; transition:all .6s ease;}
.lp-kpi u{display:block; height:5px; margin-bottom:3px; border-radius:3px; background:#dfe6e3; text-decoration:none;} .lp-kpi u + u{width:60%; background:#eef1f0;}
.lp-row{display:grid; grid-template-columns:1.2fr 1fr; gap:6px; flex:1; min-height:0;}
.lp-card{padding:8px; border-radius:8px; background:#fff; border:1px solid #e6ecea; display:flex; flex-direction:column; min-height:0;}
.lp-card small{font-size:.5rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a99a5; margin-bottom:6px;}
.lp-bars{flex:1; display:flex; align-items:flex-end; gap:5px;} .lp-bars i{flex:1; border-radius:3px 3px 1px 1px; background:var(--lp); opacity:.85; transform-origin:bottom; animation:lpBar 3.2s ease-in-out infinite; transition:background .6s ease;} .lp-bars i:nth-child(2n){opacity:.45; animation-delay:.4s;} .lp-bars i:nth-child(3n){animation-delay:.8s;}
@keyframes lpBar{50%{transform:scaleY(.72);}}
.lp-li{display:flex; align-items:center; gap:5px; padding:4px 0; border-bottom:1px solid #f0f3f2;} .lp-li:last-child{border:0;} .lp-li i{width:12px; height:12px; border-radius:50%; background:color-mix(in srgb,var(--lp) 20%,#fff); flex-shrink:0;} .lp-li u{flex:1; height:4px; border-radius:3px; background:#e6ecea; text-decoration:none;} .lp-li b{padding:1px 5px; border-radius:100px; background:color-mix(in srgb,var(--lp) 14%,#fff); color:var(--lp); font-size:.44rem; font-weight:800; transition:all .6s ease;}
.lp-base{position:relative; height:14px; margin:0 -22px; border-radius:0 0 18px 18px; background:linear-gradient(180deg,#c5c8cd,#8d9198 60%,#6f737a); box-shadow:0 24px 30px -14px rgba(0,0,0,.55);}
.lp-base i{position:absolute; left:50%; top:0; width:92px; height:5px; margin-left:-46px; border-radius:0 0 8px 8px; background:#5b5f66;}
.lp-theme{display:flex; justify-content:center; align-items:center; gap:10px; margin-top:26px; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.7);}
.lp-theme i{width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.5); cursor:pointer; transition:transform .25s ease;} .lp-theme i.on{transform:scale(1.25); border-color:#fff;}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .cs-grid{grid-template-columns:repeat(2,1fr);}
  .pm-grid{grid-template-columns:1fr;} .pm-grid.rev .pm-copy{order:0;}
  .pm-stage{order:2;}
}
@media(max-width:640px){
  .cs-grid{grid-template-columns:1fr;}
  .cs-band{padding:20px;} .cs-band a{width:100%; justify-content:center;}
  .pm-mini{grid-template-columns:1fr;}
  .lp-screen{grid-template-columns:64px 1fr; height:250px;} .lp-side span{font-size:0; gap:0; justify-content:center;} .lp-side span i{font-size:.95rem;} .lp-logo{font-size:0;} .lp-kpis{grid-template-columns:repeat(2,1fr);} .lp-kpi:nth-child(n+3){display:none;}
  .pm-tree div:nth-child(2){margin-left:10px;} .pm-tree div:nth-child(3){margin-left:20px;}
  .pm-copy .ae-cta{flex-direction:column; align-items:stretch;} .pm-copy .ae-btn{justify-content:center;}
}
@media(prefers-reduced-motion:reduce){.pm-bar i, .pm-tl li.now::before, .lp-bars i, .pm-chart i{animation:none;}}

/* ---------- person + laptop photo with a live slide mockup on the white screen ----------
   screen content is designed at 320x215 and scaled to the real screen size, so text stays big and readable */
.lpw{position:relative; width:min(100%,580px); margin:0 auto; aspect-ratio:1080/1350;}
.lpw::before{content:""; position:absolute; left:6%; right:6%; top:18%; bottom:4%; border-radius:50%; background:radial-gradient(circle,rgba(243,180,0,.28),rgba(14,107,84,.16) 55%,transparent 72%); filter:blur(8px);}
.lpw > img{position:relative; display:block; width:100%; height:100%; object-fit:contain;}
.lpw-screen{position:absolute; left:21.94%; top:37.33%; width:51.48%; height:27.63%; overflow:hidden; border-radius:2px; background:#f3f8f5;}
.lpw-screen::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.16),transparent 34%);}
.lpw-in{position:absolute; left:0; top:0; width:320px; height:215px; transform-origin:0 0; font-family:'Inter',sans-serif; color:#0b1512;}
.lw-bar{display:flex; align-items:center; gap:7px; height:28px; padding:0 12px; background:linear-gradient(120deg,#10785e,#07382d); color:#fff; font-size:11px; font-weight:700;}
.lw-bar em{display:grid; place-items:center; width:17px; height:17px; border-radius:5px; background:rgba(255,255,255,.16); color:#F3B400; font-size:11px; font-style:normal;}
.lw-bar span{margin-left:auto; padding:2px 7px; border-radius:100px; background:rgba(243,180,0,.2); color:#F3B400; font-size:8px; font-weight:800; letter-spacing:.06em;}
.lw-track{display:flex; width:400%; height:calc(100% - 28px); transition:transform .7s cubic-bezier(.65,0,.25,1);}
.lw-slide{width:25%; height:100%; padding:10px 14px 0; box-sizing:border-box;}
.lw-slide h4{margin:0 0 1px; font-size:14px; letter-spacing:-.01em;} .lw-slide > small{display:block; margin-bottom:8px; font-size:9.5px; color:#6b7a75;}
.lw-cats{display:grid; grid-template-columns:repeat(3,1fr); gap:7px;}
.lw-cats span{display:flex; align-items:center; gap:7px; padding:9px 8px; border-radius:10px; background:#fff; border:1.5px solid #e1e9e5; font-size:10.5px; font-weight:700; color:#33423d;}
.lw-cats span i{display:grid; place-items:center; flex-shrink:0; width:24px; height:24px; border-radius:8px; background:#e5f3ed; color:#0E6B54; font-size:14px;}
.lw-cats span.on{border-color:#F3B400; background:#fff8e1;} .lw-cats span.on i{background:#0E6B54; color:#F3B400;}
.lw-f{margin-bottom:8px;} .lw-f label, .lw-l{display:block; margin-bottom:3px; font-size:9px; font-weight:600; color:#6b7a75;} .lw-f div{padding:8px 10px; border-radius:9px; background:#fff; border:1.5px solid #cfdad6; font-size:12px; font-weight:700; letter-spacing:.05em;} .lw-f div.f{border-color:#0E6B54; box-shadow:0 0 0 3px rgba(14,107,84,.12);}
.lw-chips{display:flex; gap:6px; margin-bottom:9px;} .lw-chips span{flex:1; text-align:center; padding:6px 0; border-radius:100px; background:#fff; border:1.5px solid #e1e9e5; font-size:10px; font-weight:700; color:#33423d;} .lw-chips span.on{background:#0E6B54; border-color:#0E6B54; color:#fff;}
.lw-btn{display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border-radius:10px; background:linear-gradient(135deg,#0E6B54,#0a5442); color:#fff; font-size:11.5px; font-weight:700; box-shadow:0 6px 12px -8px rgba(14,107,84,.9);}
.lw-rows{padding:2px 12px; border-radius:12px; background:#fff; border:1px solid #e1e9e5; margin-bottom:8px;} .lw-rows div{display:flex; justify-content:space-between; padding:6px 0; font-size:10.5px; color:#6b7a75; border-bottom:1px dashed #e1e9e5;} .lw-rows div:last-child{border:0;} .lw-rows b{color:#0b1512;} .lw-rows b.g{color:#0E6B54;}
.lw-ok{display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:14px;}
.lw-tick{display:grid; place-items:center; width:46px; height:46px; margin-bottom:8px; border-radius:50%; background:#0E6B54; color:#F3B400; font-size:24px; box-shadow:0 0 0 6px rgba(14,107,84,.12);}
.lw-ok h4{margin:0 0 2px; font-size:15px;} .lw-ok p{margin:0 0 10px; font-size:10.5px; color:#6b7a75;}
.lw-chip3{display:flex; gap:6px;} .lw-chip3 span{padding:5px 9px; border-radius:100px; background:#fff; border:1px solid #e1e9e5; font-size:9.5px; font-weight:700; color:#33423d;} .lw-chip3 span b{color:#0E6B54;}
.lw-dots{position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:center; gap:5px;} .lw-dots i{width:5px; height:5px; border-radius:50%; background:#cfdad6; transition:all .3s ease;} .lw-dots i.on{width:15px; border-radius:5px; background:#F3B400;}
@media(prefers-reduced-motion:reduce){.lw-track{transition:none;}}/* tighter spacing so every slide fits above the dots */
.lw-slide{padding-top:8px;} .lw-slide h4{font-size:13px;} .lw-slide > small{margin-bottom:6px;}
.lw-f{margin-bottom:6px;} .lw-f div{padding:6px 10px;} .lw-chips{margin-bottom:7px;} .lw-chips span{padding:5px 0;} .lw-btn{padding:7px;}
.lw-rows div{padding:5px 0;} .lw-cats span{padding:8px;}

/* ---------- phone + tablet photo: two different mockups play behind the transparent screens ---------- */
.dvw{position:relative; width:min(100%,680px); margin:0 auto; aspect-ratio:1050/680;}
.dvw::before{content:""; position:absolute; left:4%; right:4%; top:6%; bottom:0; border-radius:50%; background:radial-gradient(circle,rgba(243,180,0,.22),rgba(14,107,84,.12) 55%,transparent 72%); filter:blur(10px);}
.dvw > img{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;}
.dvw-s{position:absolute; z-index:1; overflow:hidden; background:#f3f8f5; box-shadow:0 0 0 3px #f3f8f5;}
.dvw-phone{left:2.76%; top:18.68%; width:20.67%; height:68.38%;}
.dvw-tab{left:31.24%; top:9.26%; width:66.48%; height:76.18%;}
.dvw-in{position:absolute; left:0; top:0; transform-origin:0 0; font-family:'Inter',sans-serif; color:#0b1512; overflow:hidden;}
.dv-track{display:flex; width:400%; transition:transform .7s cubic-bezier(.65,0,.25,1);}
.dv-sl{width:25%; box-sizing:border-box;}
.dv-dots{position:absolute; left:0; right:0; display:flex; justify-content:center; gap:4px;} .dv-dots i{width:4px; height:4px; border-radius:50%; background:#cfdad6; transition:all .3s ease;} .dv-dots i.on{width:12px; border-radius:4px; background:#F3B400;}
/* phone (150 x 321) */
.dp-top{height:44px; padding:6px 12px 0; background:linear-gradient(160deg,#10785e,#07382d); color:#fff; border-radius:0 0 14px 14px;}
.dp-st{display:flex; justify-content:space-between; font-size:8px; font-weight:700;} .dp-st span{display:flex; gap:3px; font-size:9px;}
.dp-ttl{margin-top:11px; font-size:11px; font-weight:700;}
.dv-track.dp{height:calc(100% - 44px);} .dp .dv-sl{padding:10px 10px 0;}
.dp h5{margin:0 0 7px; font-size:11px; letter-spacing:-.01em;}
.dp-r{display:flex; align-items:center; gap:7px; padding:7px 8px; margin-bottom:6px; border-radius:10px; background:#fff; border:1.5px solid #e1e9e5; font-size:9.5px; font-weight:700;} .dp-r.on{border-color:#F3B400; background:#fff8e1;} .dp-r small{display:block; font-size:7.5px; font-weight:500; color:#8a99a5;}
.dp-r b{display:grid; place-items:center; flex-shrink:0; width:20px; height:20px; border-radius:50%; background:#e5f3ed; color:#0E6B54; font-size:7.5px;} .dp-r.on b{background:#0E6B54; color:#F3B400;} .dp-r > i{margin-left:auto; font-size:11px; color:#cfdad6;} .dp-r.on > i{color:#0E6B54;}
.dp-f{margin-bottom:7px;} .dp-f label{display:block; margin-bottom:2px; font-size:7.5px; font-weight:600; color:#6b7a75;} .dp-f div{padding:6px 8px; border-radius:8px; background:#fff; border:1.5px solid #cfdad6; font-size:9.5px; font-weight:700; letter-spacing:.04em;} .dp-f div.f{border-color:#0E6B54;}
.dp-ok{display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:100px; background:#e5f3ed; color:#0E6B54; font-size:8px; font-weight:700;}
.dp-btn{margin-top:8px; padding:7px; text-align:center; border-radius:9px; background:linear-gradient(135deg,#0E6B54,#0a5442); color:#fff; font-size:9.5px; font-weight:700;}
.dp-two{display:grid; grid-template-columns:1fr 1fr; gap:6px;} .dp-two span{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border-radius:10px; background:#fff; border:1.5px solid #e1e9e5; font-size:9.5px; font-weight:700;} .dp-two span i{font-size:14px; color:#0E6B54;} .dp-two span.on{border-color:#F3B400; background:#fff8e1;}
.dp-otp{display:flex; justify-content:center; gap:5px; margin:6px 0 2px;} .dp-otp span{display:grid; place-items:center; width:22px; height:24px; border-radius:7px; background:#fff; border:1.5px solid #cfdad6; font-size:11px; font-weight:800;} .dp-otp span.f{border-color:#0E6B54;}
.dp-c{text-align:center; padding-top:20px;} .dp-tick{display:grid; place-items:center; width:40px; height:40px; margin:0 auto 8px; border-radius:50%; background:#0E6B54; color:#F3B400; font-size:20px; box-shadow:0 0 0 5px rgba(14,107,84,.12);} .dp-c p{margin:0 0 8px; font-size:8.5px; color:#6b7a75;}
.dp-rec{padding:2px 9px; border-radius:10px; background:#fff; border:1px solid #e1e9e5; text-align:left;} .dp-rec div{display:flex; justify-content:space-between; padding:5px 0; font-size:8.5px; color:#6b7a75; border-bottom:1px dashed #e1e9e5;} .dp-rec div:last-child{border:0;} .dp-rec b{color:#0b1512;} .dp-rec b.g{color:#0E6B54;}
/* tablet (420 x 312) */
.dt{display:grid; grid-template-columns:50px 1fr; height:100%;}
.dt-side{display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 0; background:linear-gradient(180deg,#10785e,#07382d); color:rgba(255,255,255,.7); font-size:16px;} .dt-side i.on{display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.18); color:#fff;} .dt-side em{display:grid; place-items:center; width:26px; height:26px; margin-bottom:6px; border-radius:8px; background:#F3B400; color:#0b1512; font-size:15px; font-style:normal;}
.dt-main{position:relative; min-width:0; display:flex; flex-direction:column; overflow:hidden;}
.dt-bar{display:flex; align-items:center; gap:10px; height:34px; padding:0 14px; background:#fff; border-bottom:1px solid #e6ecea; font-size:12px; font-weight:700;} .dt-bar span{margin-left:auto; padding:4px 10px; border-radius:100px; background:#e8efec; color:#7a8a85; font-size:9px; font-weight:600;} .dt-bar b{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#0E6B54; color:#F3B400; font-size:9px;}
.dv-track.dt-t{flex:1; min-height:0;} .dt-t .dv-sl{padding:12px 14px 0;}
.dt h5{margin:0 0 2px; font-size:13px; letter-spacing:-.01em;} .dt h5 + small{display:block; margin-bottom:9px; font-size:9.5px; color:#6b7a75;}
.dt-g{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.dt-c{padding:10px; border-radius:12px; background:#fff; border:1px solid #e1e9e5;} .dt-c > b{display:block; margin-bottom:7px; font-size:10px; color:#6b7a75; letter-spacing:.04em; text-transform:uppercase;}
.dt-f{margin-bottom:7px;} .dt-f label{display:block; margin-bottom:2px; font-size:8.5px; font-weight:600; color:#6b7a75;} .dt-f div{padding:7px 9px; border-radius:8px; background:#f7faf8; border:1.5px solid #dde6e2; font-size:10.5px; font-weight:700; letter-spacing:.04em;} .dt-f div.f{border-color:#0E6B54; background:#fff;}
.dt-bn{display:flex; align-items:center; gap:8px; padding:6px 7px; margin-bottom:5px; border-radius:9px; border:1.5px solid #e6ecea; font-size:10.5px; font-weight:700;} .dt-bn.on{border-color:#F3B400; background:#fff8e1;} .dt-bn b{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#e5f3ed; color:#0E6B54; font-size:8px;} .dt-bn small{display:block; font-size:8px; font-weight:500; color:#8a99a5;} .dt-bn i{margin-left:auto; color:#0E6B54; font-size:12px;}
.dt-btn{display:inline-flex; align-items:center; gap:6px; margin-top:9px; padding:8px 16px; border-radius:100px; background:linear-gradient(135deg,#0E6B54,#0a5442); color:#fff; font-size:10.5px; font-weight:700;}
.dt-chip{display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:100px; background:#e5f3ed; color:#0E6B54; font-size:9.5px; font-weight:700;}
.dt-tb{border-radius:12px; background:#fff; border:1px solid #e1e9e5; overflow:hidden;} .dt-tr{display:grid; grid-template-columns:1.6fr .7fr .8fr 1fr; align-items:center; gap:8px; padding:7px 12px; font-size:10px; font-weight:600; border-bottom:1px solid #f0f3f2;} .dt-tr:last-child{border:0;} .dt-tr.h{background:#f4f7f6; font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:#8a99a5; font-weight:700;} .dt-tr em{font-style:normal; justify-self:start; padding:2px 8px; border-radius:100px; background:#e5f3ed; color:#0E6B54; font-size:8.5px; font-weight:800;} .dt-tr span{color:#6b7a75; font-weight:500;}
.dt-rc{display:grid; grid-template-columns:1.1fr .9fr; gap:12px; align-items:start;} .dt-tick{display:grid; place-items:center; width:40px; height:40px; margin-bottom:8px; border-radius:50%; background:#0E6B54; color:#F3B400; font-size:20px; box-shadow:0 0 0 5px rgba(14,107,84,.12);}
.dt-rows div{display:flex; justify-content:space-between; padding:6px 0; font-size:10px; color:#6b7a75; border-bottom:1px dashed #e1e9e5;} .dt-rows div:last-child{border:0;} .dt-rows b{color:#0b1512;} .dt-rows b.g{color:#0E6B54;}
.dt-act{display:flex; align-items:center; gap:8px; padding:9px 10px; margin-bottom:6px; border-radius:10px; background:#fff; border:1px solid #e1e9e5; font-size:10.5px; font-weight:700;} .dt-act i{display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:#e5f3ed; color:#0E6B54; font-size:13px;}
.dt-dots{bottom:8px;}
@media(max-width:1000px){ .dvw{width:min(100%,600px);} }
@media(prefers-reduced-motion:reduce){.dv-track{transition:none;}}

/* ---------- person leaning on a big phone: partner-hub mockup plays on the white screen (designed at 235 x 506, scaled) ---------- */
.mnw{position:relative; width:min(100%,520px); margin:0 auto; aspect-ratio:1060/1240;}
.mnw::before{content:""; position:absolute; left:4%; right:2%; top:12%; bottom:2%; border-radius:50%; background:radial-gradient(circle,rgba(243,180,0,.26),rgba(14,107,84,.14) 55%,transparent 72%); filter:blur(10px);}
.mnw > img{position:relative; display:block; width:100%; height:100%; object-fit:contain;}
.mnw-s{position:absolute; z-index:2; left:50.66%; top:10.73%; width:44.43%; height:81.61%; overflow:hidden; border-radius:10.2% / 4.7%; background:#f3f8f5;}
.mnw-s::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.18),transparent 34%);}
.mnw-in{position:absolute; left:0; top:0; width:235px; height:506px; transform-origin:0 0; overflow:hidden; font-family:'Inter',sans-serif; color:#0b1512;}
.mp-top{padding:11px 18px 13px; color:#fff; background:linear-gradient(160deg,#10785e,#07382d); border-radius:0 0 22px 22px;}
.mp-st{display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:700;} .mp-st span{display:flex; gap:4px; font-size:11px;}
.mp-app{display:flex; align-items:center; gap:9px; margin-top:12px;} .mp-app em{display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#F3B400; font-size:17px; font-style:normal;} .mp-app strong{display:block; font-size:13px;} .mp-app small{font-size:9px; color:rgba(255,255,255,.7);}
.dv-track.mp{height:calc(100% - 82px);} .mp .dv-sl{padding:12px 13px 0;}
.mp h5{margin:0 0 9px; font-size:13px; letter-spacing:-.01em;}
.mp .pm-wallet{padding:12px 13px;} .mp .pm-wallet b{font-size:1.1rem; margin:3px 0 9px;} .mp .pm-sub{margin:12px 0 7px; font-size:9px;}
.mp .pm-gt span{font-size:9px; padding:9px 2px 8px;} .mp .pm-gt span i{width:26px; height:26px; font-size:1rem;}
.mp .pm-act{padding:8px 9px; margin-bottom:6px; font-size:10px;} .mp .pm-act small{font-size:8px;} .mp .pm-act em{font-size:7.5px;}
.mp .pm-chart{height:170px; margin:4px 0 10px;} .mp .pm-note{font-size:9.5px;}
.mp .ae-key{margin-top:8px; padding:9px; font-size:11px;}
.mp-home{position:absolute; left:50%; bottom:6px; width:84px; height:4px; margin-left:-42px; border-radius:4px; background:#0b1512; opacity:.8;}
@media(max-width:1000px){ .mnw{width:min(100%,440px);} }

/* border line around the partner photo card */
.mnw{border-radius:32px; overflow:hidden; background:linear-gradient(180deg,#f6fbf8,#eaf5f0); box-shadow:0 24px 50px -28px rgba(8,74,59,.35);}
.mnw::after{content:""; position:absolute; inset:0; z-index:3; border-radius:32px; border:2px solid rgba(14,107,84,.38); pointer-events:none;}

/* phone fixes: taller header so the title is not clipped, single-line beneficiary rows */
.dp-top{height:58px; padding-top:7px;} .dp-ttl{margin-top:10px; font-size:11.5px;}
.dv-track.dp{height:calc(100% - 58px);} .dp .dv-sl{padding-top:12px;}
.dp-r > div{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .dp-r{gap:6px; padding:7px;}
.dp-r small{white-space:nowrap;}

/* standalone button used in the phone screens (does not depend on home.css) */
.mp-btn{margin-top:9px; padding:9px; text-align:center; border-radius:12px; background:linear-gradient(135deg,#0E6B54,#0a5442); color:#fff; font-size:11px; font-weight:700; box-shadow:0 8px 14px -10px rgba(14,107,84,.9);}
.mp .pm-gt{grid-template-columns:repeat(3,1fr);} .mp .pm-doc{padding:9px 10px; margin-bottom:7px; font-size:10px;} .mp .pm-doc small{font-size:8px;} .mp .pm-tl li{font-size:10px;} .mp .pm-tl li small{font-size:8.5px;}
.mp .dp-rec{padding:2px 10px; border-radius:12px; background:#fff; border:1px solid #e1e9e5; text-align:left;} .mp .dp-rec div{display:flex; justify-content:space-between; padding:6px 0; font-size:9.5px; color:#6b7a75; border-bottom:1px dashed #e1e9e5;} .mp .dp-rec div:last-child{border:0;} .mp .dp-rec b{color:#0b1512;} .mp .dp-rec b.g{color:#0E6B54;}
.mp .dp-tick{display:grid; place-items:center; margin:0 auto 10px; border-radius:50%; background:#0E6B54; color:#F3B400; box-shadow:0 0 0 6px rgba(14,107,84,.12);}
/* demo blocks inside the article pages */
.ar-card .mnw, .ar-card .dvw{margin-left:auto; margin-right:auto;} .ar-card .lp{width:min(100%,520px);}