/* "How it works" reel: three looping, GIF-style animations (customer, AI, installer), one per slide. */
.views{margin-top:32px}
.vtabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:16px}
.vtab{border:0;background:transparent;padding:9px 16px;border-radius:999px;font-weight:600;cursor:pointer;color:var(--muted)}
.vtab[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:100%;column-gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:24px;overscroll-behavior-x:contain}
.reel::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center;padding:40px;border-radius:24px;background:var(--surface);min-width:0}
.slide.ai{background:var(--ink);color:var(--on-ink)}
.slide.inst{background:var(--surface-2)}
.slide .eyebrow{margin-bottom:10px}
.slide.ai .eyebrow{color:var(--amber)}
.slide h3{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-.02em}
.slide .sub{margin-top:12px;color:var(--muted);font-size:1.08rem;max-width:34ch}
.slide.ai .sub{color:var(--on-ink-muted)}
.reel-nav{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:16px}
.rdot{width:10px;height:10px;border-radius:999px;border:0;background:var(--line);padding:0;cursor:pointer;transition:width .2s ease, background .2s ease}
.rdot[aria-current="true"]{background:var(--amber);width:28px}
.rarrow{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font-size:1.1rem;cursor:pointer;display:grid;place-items:center}
.rarrow:hover{border-color:var(--green)}
@media (max-width:820px){.slide{grid-template-columns:minmax(0,1fr);gap:20px;padding:22px}.slide .sub{font-size:1rem}}

/* the looping "screen" (fixed light palette, like the app) */
.loop{background:#F7FAF9;color:#10211C;border-radius:22px;padding:14px;display:grid;gap:10px;box-shadow:0 24px 48px -28px rgba(0,0,0,.5);min-width:0}
.lsteps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.lsteps button{border:0;background:#E6EFEB;color:#53635E;border-radius:999px;padding:6px 2px;font-size:.7rem;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsteps button.done{background:#D6E9E2;color:#1F4D43}
.lsteps button.on{background:#FF9F1C;color:#10211C}
.lstage{height:260px;border-radius:16px;background:#fff;border:1px solid #E3ECE8;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:9px;overflow:hidden;position:relative}
.lcap{font-weight:700;font-size:1.02rem;text-align:center;min-height:1.5em;line-height:1.35}

/* animation primitives; --d sets each element's delay */
.a{animation:lin .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes lin{from{opacity:0;transform:translateY(10px)}}
.late{animation:lpop .35s ease both;animation-delay:var(--d,1.6s)}
@keyframes lpop{from{transform:scale(0);opacity:0}}
@keyframes lfade{to{opacity:0}}
@keyframes lgrow{from{width:0}}
.lb{max-width:92%;padding:9px 12px;border-radius:14px;font-size:.88rem;line-height:1.35}
.lb.me{align-self:flex-end;background:#10211C;color:#fff;border-top-right-radius:4px}
.lb.ai{align-self:flex-start;background:#EEF4F1;border-top-left-radius:4px}
.lb.ai b{color:#2F7D6D;font-size:.68rem;letter-spacing:.1em;margin-right:6px}
.type{display:inline-block;white-space:nowrap;clip-path:inset(0 100% 0 0);animation:typew 1.3s steps(30) forwards;animation-delay:.6s}
@keyframes typew{to{clip-path:inset(0 0 0 0)}}
.lmic{width:62px;height:62px;border-radius:50%;background:#FF9F1C;color:#10211C;display:grid;place-items:center;align-self:center;position:relative;flex:none}
.lmic svg{width:28px;height:28px}
.lmic::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid #FF9F1C;animation:lring 1.3s ease-out infinite}
@keyframes lring{from{transform:scale(.92);opacity:.9}to{transform:scale(1.35);opacity:0}}
.lhead{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.95rem}
.lpill{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:#E6EFEB;color:#1F4D43;white-space:nowrap}
.lpill.ok{background:#D6E9E2}
.lpill.amber{background:#FFF1DA;color:#8A4B00}
.lbar{display:grid;grid-template-columns:62px minmax(0,1fr) 58px;gap:8px;align-items:center;font-size:.82rem}
.lbar b{text-align:right;font-variant-numeric:tabular-nums}
.lt{height:8px;border-radius:8px;background:#E6EFEB;position:relative;overflow:hidden}
.lt i{position:absolute;top:0;bottom:0;left:var(--l,0);border-radius:8px;background:#2F7D6D;animation:lgrow .8s ease both;animation-delay:var(--d,0s)}
.ltotal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #E3ECE8;padding-top:8px;margin-top:2px;font-size:.85rem}
.ltotal b{font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums}
.lrow{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600}
.lrow .lpill{margin-left:auto}
.lav{width:32px;height:32px;border-radius:50%;background:#1F4D43;color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;flex:none}
.lav.amber{background:#FF9F1C;color:#10211C}
.lprog{height:12px;border-radius:12px;background:#E6EFEB;overflow:hidden}
.lprog i{display:block;height:100%;width:var(--w);background:#2F7D6D;border-radius:12px;animation:lgrow 1.6s ease both .3s}
.lk{width:20px;height:20px;border-radius:50%;background:#2F7D6D;color:#fff;display:grid;place-items:center;flex:none}
.lk svg{width:12px;height:12px}
.lline{display:flex;align-items:center;gap:9px;font-size:.86rem}
.lsw{position:relative;width:20px;height:20px;flex:none}
.lsw > *{position:absolute;inset:0}
.lspin{border-radius:50%;border:2.5px solid #C9D8D2;border-top-color:#2F7D6D;animation:lspin .8s linear infinite, lfade .15s ease forwards;animation-delay:0s, var(--d,1s)}
@keyframes lspin{to{transform:rotate(360deg)}}
.dotp{width:8px;height:8px;border-radius:50%;background:#FF9F1C;flex:none;margin:0 6px;animation:pulse 1s infinite}
.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lph{aspect-ratio:16/10;border-radius:10px;background:linear-gradient(135deg,#2B4A41,#10211C);color:#CFE3DB;position:relative;display:grid;place-items:center}
.lph svg{width:32%;height:auto;opacity:.85}
.lph .lk{position:absolute;top:5px;right:5px;width:18px;height:18px}
.lph.flag{outline:2px solid #FF9F1C;animation:unflag .3s ease forwards;animation-delay:var(--f,1.7s)}
@keyframes unflag{to{outline-color:transparent}}
.lflag{position:absolute;bottom:5px;left:5px;font-size:.62rem;font-weight:700;background:#FF9F1C;color:#10211C;border-radius:6px;padding:1px 6px;animation:lfade .3s ease forwards;animation-delay:var(--f,1.6s)}
.ldoc{height:92px;border-radius:10px;background:#F1F5F3;padding:12px;display:grid;gap:8px;position:relative;overflow:hidden;flex:none}
.ldoc i{height:7px;border-radius:4px;background:#D3E0DA}
.ldoc i:nth-child(2n){width:72%}
.lscan{position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(180deg,transparent,rgba(255,159,28,.55),transparent);animation:lscan 1.2s linear infinite}
@keyframes lscan{from{transform:translateY(-26px)}to{transform:translateY(110px)}}
.lchips{display:flex;flex-wrap:wrap;gap:6px}
.lchip{font-size:.78rem;font-weight:600;background:#10211C;color:#fff;border-radius:999px;padding:5px 10px}
.lchip.soft{background:#EEF4F1;color:#1F4D43}
.ldots{display:grid;grid-template-columns:repeat(8,14px);justify-content:space-between;row-gap:12px;padding:6px 8px}
.ldots i{width:14px;height:14px;border-radius:50%;background:#9DB2AB;animation:ldim .4s ease forwards 1.1s}
.ldots i.hit{animation:lhit .4s ease forwards 1.1s}
@keyframes ldim{to{opacity:.18}}
@keyframes lhit{to{background:#FF9F1C;transform:scale(1.4)}}
.lgan{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;font-size:.8rem;align-items:center}
.lbig{height:92px;border-radius:12px;background:linear-gradient(135deg,#2B4A41,#10211C);position:relative;overflow:hidden;display:grid;place-items:center;color:#CFE3DB;flex:none}
.lbig svg{width:40px;height:40px}
.lnote{background:#FFF1DA;color:#8A4B00;border-radius:10px;padding:8px 10px;font-size:.82rem;font-weight:600}
.ljob{background:#10211C;color:#fff;border-radius:14px;padding:14px;display:grid;gap:6px;animation:lslide .5s cubic-bezier(.2,.8,.2,1) both .2s}
@keyframes lslide{from{transform:translateY(-30px);opacity:0}}
.ljob small{color:#A9CABF;font-size:.75rem}
.ljob .lmoneysm{font-size:1.7rem;font-weight:800;color:#FF9F1C}
.lbtn{background:#FF9F1C;color:#10211C;border-radius:10px;padding:9px;text-align:center;font-weight:700;font-size:.85rem;animation:lpress .5s ease forwards 1.5s}
@keyframes lpress{50%{transform:scale(.94)}to{background:#5BB39F;color:#fff}}
.lslots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lslot{border:1.5px solid #C9D8D2;border-radius:10px;padding:10px 4px;text-align:center;font-size:.8rem;font-weight:600}
.lslot.pick{animation:lpick .3s ease forwards 1.1s}
@keyframes lpick{to{background:#10211C;color:#fff;border-color:#10211C}}
.lring{width:86px;height:86px;border-radius:50%;background:conic-gradient(#2F7D6D 86%,#E6EFEB 0);display:grid;place-items:center;align-self:center;flex:none}
.lring span{width:68px;height:68px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;font-size:1.5rem}
.lmoney{font-size:2.8rem;font-weight:800;text-align:center;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.lcenter{align-self:center;text-align:center}
@media (max-width:480px){
  .vtabs{display:flex;flex-wrap:nowrap;width:100%}
  .vtab{flex:1;padding:9px 4px;font-size:.8rem;white-space:nowrap}
  .lsteps{gap:3px}
  .lsteps button{font-size:.6rem;padding:6px 0;text-overflow:clip}
  .loop{padding:10px}
}

/* on wide screens give the animation more presence (zoom keeps every frame's proportions, so they still fit) */
@media (min-width:1100px){.slide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.loop{zoom:1.15}}