/* The idea section, advanced: likes versus chats, and four tiles that move. Layered after hv.css. */
.idea2 .i2-vs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border:var(--line);border-radius:28px;box-shadow:var(--sh);overflow:hidden;background:#fff}
.i2-side{padding:26px 28px 26px;min-width:0;position:relative;display:flex;flex-direction:column}
.i2-a{background:#F0F2F5}
.i2-b{background:#EFEAE2 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%20viewBox='0%200%20180%20180'%20fill='none'%20stroke='%23000'%20stroke-opacity='.05'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M24%2036c0-7%2011-7%2011%200%200%207-11%2012-11%2012s-11-5-11-12c0-7%2011-7%2011%200'/%3E%3Ccircle%20cx='130'%20cy='40'%20r='10'/%3E%3Cpath%20d='M66%20128l4%208%209%201-6%206%201%209-8-4-8%204%202-9-7-6%209-1z'/%3E%3Cpath%20d='M108%20140c6-9%2015-9%2021%200s15%209%2021%200'/%3E%3Cpath%20d='M138%2096h20M148%2086v20'/%3E%3Cpath%20d='M44%2080l12%2012M56%2080L44%2092'/%3E%3Cpath%20d='M96%2020h22a6%206%200%20016%206v10a6%206%200%2001-6%206h-12l-8%206v-6a6%206%200%2001-6-6V26a6%206%200%20014-6z'/%3E%3Cpath%20d='M20%20150l8-14%208%2014z'/%3E%3C/svg%3E");background-size:180px 180px;border-left:var(--line)}
.i2-k{display:flex;gap:10px;align-items:center;margin:0 0 16px;font:800 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}.i2-k i{width:10px;height:10px;border-radius:3px;background:#1877F2}.i2-b .i2-k i{background:#25D366}
.i2-m{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:italic 500 26px/1 var(--serif);border:3px solid #fff;box-shadow:var(--sh-s);z-index:3}
.i2-r{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;margin:auto 0 0;padding-top:18px;font:600 15px/1.2 var(--sans);color:var(--ink)}.i2-r b{font:900 34px/1 var(--sans);letter-spacing:-.04em}.i2-r em{font-style:normal;color:var(--ink-3)}
.i2-a .i2-r b.bad{color:#E0315B}.i2-b .i2-r b.good{color:#0B5D47}
/* the Facebook post */
.fbp{position:relative;max-width:400px;width:100%;margin:0 auto;background:#fff;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.2);font-family:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;color:#050505}
.fbp-h{display:flex;gap:10px;align-items:center;padding:12px 14px 8px}.fbp-av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 16px/1 var(--sans);flex:none}
.fbp-h b{display:block;font:600 15px/1.2}.fbp-h small{display:flex;gap:4px;align-items:center;font:400 13px/1.2;color:#65676B;margin-top:2px}.fbp-h small svg{width:12px;height:12px}.fbp-dots{margin-left:auto;color:#65676B;font:700 18px/1;letter-spacing:1px}
.fbp-t{margin:0;padding:0 14px 10px;font:400 15px/1.35}
.fbp-img .ad{border-radius:0}.fbp-img{overflow:hidden}
.fbp-stats{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font:400 15px/1;color:#65676B}
.fbp-re{display:flex;align-items:center;gap:6px}.fbp-re i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid #fff;margin-left:-8px;background:#1877F2}.fbp-re i:first-child{margin-left:0}.fbp-re .r2{background:#F33E58}.fbp-re .r3{background:#F7B125}.fbp-re i svg{width:11px;height:11px;color:#fff}.fbp-stats b{font-weight:400}.fbp-re b{margin-left:2px}
.fbp-acts{display:flex;border-top:1px solid #CED0D4;margin:0 14px;padding:4px 0}.fbp-acts span{flex:1;display:flex;gap:8px;justify-content:center;align-items:center;padding:8px 0;font:600 15px/1;color:#65676B}.fbp-acts svg{width:18px;height:18px}
.fbp-c{padding:4px 14px 14px;display:grid;gap:8px;border-top:1px solid #CED0D4;margin:0 14px;padding-left:0;padding-right:0}
.fbc{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:start}.fbc .av{width:32px;height:32px;font-size:13px}.fbc .fbb{justify-self:start;max-width:100%;margin:0;background:#F0F2F5;border-radius:18px;padding:8px 12px;font:400 14px/1.3}.fbc b{display:block;font:600 13px/1.2;margin-bottom:2px}.fbc small{display:block;margin:4px 0 0 12px;font:600 12px/1;color:#65676B}
.fbc.q .fbb{background:#FFEBEF}.fbc.q small em{font-style:normal;color:#E0315B;font-weight:700}
.fbp-acts .lk{position:relative}.fbp-float{position:absolute;left:38%;bottom:12px;width:60px;height:260px;pointer-events:none;z-index:2}
.fbp-float i{position:absolute;left:0;bottom:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#1877F2;color:#fff;animation:i2fl 2.6s cubic-bezier(.2,.6,.3,1) forwards}.fbp-float i.r2{background:#F33E58}.fbp-float i.r3{background:#F7B125}.fbp-float i svg{width:13px;height:13px}
@keyframes i2fl{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:1;transform:translate(2px,-20px) scale(1)}100%{opacity:0;transform:translate(var(--dx,14px),-230px) scale(.9)}}
/* the WhatsApp enquiries */
.wal{width:100%;max-width:560px;margin:0 auto;flex:1;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.18);overflow:hidden}
.wal-h{display:flex;gap:10px;align-items:center;padding:12px 14px;background:#F0F2F5;font:600 15px/1 var(--sans);color:#111B21}.wal-h svg{width:22px;height:22px;color:#1DAA61;flex:none}.wal-h span{margin-left:auto;font:500 12.5px/1 var(--sans);background:#D9FDD3;color:#008069;padding:6px 10px;border-radius:999px;white-space:nowrap}
.wal-l{list-style:none;margin:0;padding:0;flex:1;min-height:420px;overflow:hidden;position:relative}
.wal-l::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.wq{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:11px 14px;border-top:1px solid #E9EDEF;align-items:start}.wq:first-child{border-top:0}
.wq .av{width:44px;height:44px;font-size:16px}.wq .av.nn{background:#DFE5E7}.wq .av.nn svg{width:28px;height:28px;color:#fff}
.wq b{display:block;font:500 15.5px/1.2 var(--sans);color:#111B21;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wq b small{font:400 12.5px/1 var(--sans);color:#667781;margin-left:6px}
.wq .ans{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.wq .ans span{font:500 12px/1 var(--sans);padding:5px 8px;border-radius:7px;background:#D9FDD3;color:#0B5D47;white-space:nowrap}
.wq .rt{display:grid;justify-items:end;gap:6px;font:500 12px/1 var(--sans);color:#1DAA61}.wq .bd{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#25D366;color:#fff;font:600 12px/20px var(--sans);text-align:center}
.wq.is-new{animation:i2in .6s cubic-bezier(.2,.9,.3,1)}@keyframes i2in{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
/* the tiles */
.stats2 .stat{gap:12px;min-height:300px}.stats2 .stat p{margin:0}
.i2-stage{min-height:96px;display:flex;align-items:center;gap:14px}
.i2-ring{width:88px;height:88px;flex:none}.i2-ring circle{fill:none;stroke-width:9}.i2-ring .b{stroke:rgba(15,10,31,.16)}.i2-ring .f{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;transform:rotate(-90deg);transform-origin:50% 50%}
.is-in .i2-ring .f{animation:i2ring 2.2s cubic-bezier(.3,0,.2,1) .3s forwards}@keyframes i2ring{to{stroke-dashoffset:0}}
.i2-ring text{font:900 15px var(--sans);fill:var(--ink);letter-spacing:-.04em}
.i2-steps{display:grid;gap:6px;font:600 12.5px/1.2 var(--sans);color:var(--ink)}.i2-steps span{display:flex;gap:8px;align-items:center}.i2-steps i{width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.25}.is-in .i2-steps span:nth-child(1) i{animation:i2dot .4s .6s forwards}.is-in .i2-steps span:nth-child(2) i{animation:i2dot .4s 1.5s forwards}.is-in .i2-steps span:nth-child(3) i{animation:i2dot .4s 2.5s forwards}@keyframes i2dot{to{opacity:1}}
.i2-clock{width:88px;height:88px;flex:none;position:relative}.i2-clock svg{width:100%;height:100%;overflow:visible}.i2-clock .face{fill:#fff;stroke:var(--ink);stroke-width:4}.i2-clock .tk{stroke:var(--ink);stroke-width:3;stroke-linecap:round}.i2-clock .hh,.i2-clock .mh{stroke:var(--ink);stroke-linecap:round;transform-origin:50% 50%}.i2-clock .hh{stroke-width:6}.i2-clock .mh{stroke-width:4}
.i2-clock .hh{transform:rotate(150deg)}.i2-clock .mh{transform:rotate(-100deg)}
.is-in .i2-clock .hh{animation:i2hh 2.4s cubic-bezier(.4,0,.2,1) .2s forwards}.is-in .i2-clock .mh{animation:i2mh 2.4s cubic-bezier(.4,0,.2,1) .2s forwards}@keyframes i2hh{to{transform:rotate(180deg)}}@keyframes i2mh{to{transform:rotate(0deg)}}
.i2-ok{position:absolute;right:-8px;bottom:-4px;width:30px;height:30px;border-radius:50%;background:#25D366;border:3px solid var(--ink);display:grid;place-items:center;transform:scale(0)}.i2-ok svg{width:15px;height:15px;color:#fff}.is-in .i2-ok{animation:i2pop .5s cubic-bezier(.2,1.4,.4,1) 2.7s forwards}@keyframes i2pop{to{transform:scale(1)}}
.i2-log{display:grid;gap:6px;font:500 12px/1.2 var(--mono);color:var(--ink)}.i2-log span{opacity:.35}.is-in .i2-log span:nth-child(1){animation:i2dot .4s 1s forwards}.is-in .i2-log span:nth-child(2){animation:i2dot .4s 1.8s forwards}.is-in .i2-log span:nth-child(3){animation:i2dot .4s 2.8s forwards}
.i2-cal{width:74px;height:72px;border-radius:12px;background:#fff;color:var(--ink);border:3px solid var(--ink);overflow:hidden;flex:none;text-align:center}.i2-cal small{display:block;background:var(--ink);color:#fff;font:800 10.5px/1 var(--sans);letter-spacing:.14em;padding:6px 0 5px}.i2-cal b{display:block;font:900 25px/1 var(--sans);letter-spacing:-.03em;padding-top:9px}
.i2-rep{position:relative;flex:1;min-width:0;background:#fff;color:var(--ink);border-radius:12px;padding:9px 11px 10px;font:500 12px/1.35 var(--sans);box-shadow:0 1px 0 rgba(0,0,0,.15);opacity:0;transform:translateY(10px)}.i2-rep b{font:800 12px/1.35 var(--sans);letter-spacing:0;margin:0}.i2-rep small{position:absolute;right:9px;bottom:5px;font:500 10px/1 var(--sans);color:#667781}
.is-in .i2-rep{animation:i2rep 7s ease-in-out .4s infinite}@keyframes i2rep{0%{opacity:0;transform:translateY(10px)}8%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
.i2-lng{display:grid;gap:7px;width:100%}.i2-lng span{justify-self:start;font:700 14px/1 var(--sans);padding:8px 12px;border-radius:999px;border:2px solid rgba(255,255,255,.7);color:#fff}
.i2-lng span.si{font-family:"Noto Sans Sinhala",var(--sans)}.i2-lng span.ta{font-family:"Noto Sans Tamil",var(--sans)}
.is-in .i2-lng span{animation:i2lng 6s infinite}.is-in .i2-lng span:nth-child(2){animation-delay:2s}.is-in .i2-lng span:nth-child(3){animation-delay:4s}
@keyframes i2lng{0%,30%{background:#fff;color:var(--coral);border-color:#fff;transform:translateX(6px)}36%,100%{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);transform:none}}
@media (max-width:1100px){.stats2 .stat{min-height:0}}
@media (max-width:960px){.idea2 .i2-vs{grid-template-columns:1fr}.i2-b{border-left:0;border-top:var(--line)}.i2-m{position:relative;left:0;top:0;transform:none;margin:-33px auto}.i2-side{padding:22px 16px 22px}.wal-l{flex:none;min-height:0;height:420px}.wal{flex:none}}
@media (max-width:700px){.i2-r b{font-size:28px}.i2-stage{height:auto}.fbp-float{display:none}}
