/* Your maths, the plan, questions and start, advanced. Layered last. */

/* ===== your maths: your numbers on the left, a receipt on the right ===== */
.maths2 .m2{display:grid;grid-template-columns:1.06fr .94fr;gap:22px;margin-top:56px;align-items:stretch}
.m2-in{background:#fff;border:var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:22px 34px 20px;min-width:0}
.m2-pre{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-bottom:18px;border-bottom:2px solid #ECE8F6}
.m2-pre span{font:800 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.m2-pre button{appearance:none;border:2px solid var(--ink);background:#fff;color:var(--ink);font:700 13px/1 var(--sans);padding:9px 12px;border-radius:999px;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .2s}
.m2-pre button.on{background:var(--ink);color:#fff}.m2-pre button:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.m2-in .fld{padding:22px 0;border-bottom:2px solid #ECE8F6}.m2-in .fld:last-child{border-bottom:0;padding-bottom:6px}
.m2-in .sl-t{background:#ECE8F6}.m2-in .sl-f{background:linear-gradient(90deg,#7A2BE0,#2F6CF6,#55DDEE)}.m2-in .sl-h{background:#FFAE46}
.m2-out{position:relative;background:var(--glow-v);border:var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:34px 34px 30px;display:flex;flex-direction:column;gap:22px;min-width:0;overflow:hidden}
.m2-slip{position:relative;background:#fff;color:var(--ink);border:var(--line);border-radius:14px 14px 0 0;padding:22px 24px 26px;box-shadow:0 14px 30px -18px rgba(15,10,31,.55)}
.m2-slip::after{content:"";position:absolute;left:-2.5px;right:-2.5px;bottom:-11px;height:12px;background:radial-gradient(circle at 9px -2px,transparent 8px,#fff 8.5px) 0 0/18px 12px repeat-x;filter:drop-shadow(0 2.5px 0 var(--ink))}
.m2-sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:2px dashed rgba(15,10,31,.3)}
.m2-sh b{font:900 19px/1.1 var(--sans);letter-spacing:-.03em}.m2-sh small{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.m2-rows{display:grid}.m2-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1.5px solid rgba(15,10,31,.1);font:600 14.5px/1.25 var(--sans);color:var(--ink-2)}
.m2-rows output{font:800 15.5px/1 var(--mono);color:var(--ink);white-space:nowrap;letter-spacing:-.02em}
.m2-rows .neg output::before{content:"− "}
.m2-rows .tot{border-bottom:0;border-top:2px dashed rgba(15,10,31,.3);margin-top:4px;padding-top:14px;color:var(--ink);font-weight:800}
.m2-rows .tot output{font:900 26px/1 var(--sans);letter-spacing:-.045em}
.m2-bars{display:grid;gap:10px;margin-top:14px}.m2-bars div{display:grid;gap:6px;font:600 12px/1 var(--sans);color:var(--ink-2)}
.m2-bars i{display:block;height:13px;border-radius:7px;border:2px solid var(--ink);background:#E8E4F5;width:10%;transition:width .5s}.m2-bars div+div i{background:linear-gradient(90deg,#7A2BE0,#2F6CF6,#55DDEE)}
.m2-foot{display:flex;gap:18px;align-items:center;margin-top:auto}
.m2-stamp{flex:none;width:132px;height:132px;border-radius:50%;background:#fff;border:var(--line);box-shadow:var(--sh-s);display:grid;place-content:center;justify-items:center;text-align:center;transform:rotate(-6deg)}
.m2-stamp b{font:900 44px/.9 var(--sans);letter-spacing:-.05em;color:var(--ink)}.m2-stamp b::before{content:"×";font-size:.6em;margin-right:.04em}
.m2-stamp span{margin-top:4px;font:800 10px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.m2-fine{margin:0;font:600 13px/1.45 var(--sans);color:rgba(15,10,31,.8)}

/* ===== the plan: the price, your first invoice, and where the ad money goes ===== */
.price2 .p2-g{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;align-items:stretch}
.price2 .pc{display:flex;flex-direction:column}
.price2 .pc .inc li{transition:opacity .4s}.price2.pre:not(.is-in) .pc .inc li{opacity:.3}
.price2.is-in .pc .inc li:nth-child(1){transition-delay:.1s}.price2.is-in .pc .inc li:nth-child(2){transition-delay:.25s}.price2.is-in .pc .inc li:nth-child(3){transition-delay:.4s}.price2.is-in .pc .inc li:nth-child(4){transition-delay:.55s}.price2.is-in .pc .inc li:nth-child(5){transition-delay:.7s}.price2.is-in .pc .inc li:nth-child(6){transition-delay:.85s}.price2.is-in .pc .inc li:nth-child(7){transition-delay:1s}.price2.is-in .pc .inc li:nth-child(8){transition-delay:1.15s}
.price2 .pc .btn{margin-top:auto;align-self:flex-start}
.p2-inv{background:#fff;border:var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:26px 28px 24px;color:var(--ink);min-width:0;display:flex;flex-direction:column}
.p2-ih{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:14px;border-bottom:var(--line)}
.p2-ih b{display:block;font:900 24px/1 var(--sans);letter-spacing:-.04em}.p2-ih small{display:block;margin-top:7px;font:500 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.p2-ih img{width:44px;height:auto;flex:none}
.p2-it{width:100%;border-collapse:collapse;margin-top:6px}.p2-it td{padding:14px 0;border-bottom:1.5px solid rgba(15,10,31,.1);font:600 14.5px/1.3 var(--sans);vertical-align:top}
.p2-it td small{display:block;font:500 12.5px/1.35 var(--sans);color:var(--ink-2);margin-top:2px}
.p2-it td+td{text-align:right;font:800 14.5px/1.3 var(--mono);white-space:nowrap;padding-left:14px;letter-spacing:-.02em}
.p2-it td.z{color:#0B5D47}
.p2-tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;padding:14px 16px;border:var(--line);border-radius:14px;background:var(--glow)}
.p2-tot span{font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}.p2-tot b{font:900 30px/1 var(--sans);letter-spacing:-.045em;color:#fff;-webkit-text-stroke:1.6px var(--ink);paint-order:stroke fill}
.p2-pay{display:grid;grid-template-columns:128px 1fr;gap:18px;align-items:center;margin-top:auto;padding-top:22px}
.p2-qr{width:128px;height:128px;border:var(--line);border-radius:12px;background-color:#fff;background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0);background-size:26px 26px,26px 26px,26px 26px,13px 13px;background-position:8px 8px,calc(100% - 8px) 8px,8px calc(100% - 8px),6px 6px;background-repeat:no-repeat,no-repeat,no-repeat,repeat;box-shadow:inset 0 0 0 6px #fff}
.p2-pay b{display:block;font:800 15px/1.25 var(--sans);letter-spacing:-.01em}.p2-pay small{display:block;margin-top:6px;font:500 12.5px/1.45 var(--sans);color:var(--ink-2)}
.p2-flow{margin-top:22px;background:#fff;border:var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:28px 30px;color:var(--ink);min-width:0;display:grid;grid-template-columns:.9fr 1.1fr 1fr;gap:34px;align-items:center}.p2-fl,.p2-fm,.p2-fr{min-width:0}
.p2-flow h3{margin:12px 0 6px;font:900 clamp(22px,1.9vw,28px)/1.05 var(--sans);letter-spacing:-.04em}.p2-flow>p{margin:0;font:500 14.5px/1.5 var(--sans);color:var(--ink-2)}
.p2-path{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.p2-path::before{content:"";position:absolute;left:12%;right:12%;top:31px;border-top:3px dashed rgba(15,10,31,.3)}
.p2-coin{position:absolute;top:21px;left:12%;width:22px;height:22px;border-radius:50%;background:#FFAE46;border:2.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);z-index:2;display:grid;place-items:center;font:900 10px/1 var(--sans);animation:p2coin 3.4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes p2coin{0%{left:12%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(88% - 22px);opacity:0}}
.p2-node{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:7px}
.p2-node i{width:62px;height:62px;border-radius:18px;background:#fff;border:var(--line);box-shadow:var(--sh-s);display:grid;place-items:center;color:var(--ink)}.p2-node i svg{width:28px;height:28px}
.p2-node b{font:800 14px/1.2 var(--sans)}.p2-node small{font:500 12px/1.3 var(--sans);color:var(--ink-2)}
.p2-key{display:flex;gap:12px;align-items:center;padding:12px 14px;border:2px dashed rgba(15,10,31,.4);border-radius:14px;font:600 13.5px/1.4 var(--sans);color:var(--ink-2)}
.p2-key i{width:38px;height:38px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}.p2-key i svg{width:20px;height:20px}.p2-key b{color:var(--ink)}
.p2-days{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.p2-days div{border:2px solid var(--ink);border-radius:12px;padding:10px 12px}.p2-days div.rec{background:#55DDEE;box-shadow:0 3px 0 var(--ink)}
.p2-days b{display:block;font:900 17px/1 var(--sans);letter-spacing:-.03em;white-space:nowrap}.p2-days small{display:block;margin-top:5px;font:600 11.5px/1.2 var(--sans);color:var(--ink-2)}
.price2 .cmpw{margin-top:22px}

/* ===== questions: a WhatsApp thread you can tap ===== */
.faq2 .f2-g{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.f2-l{position:sticky;top:120px}.f2-l h2{margin-top:22px}.f2-l .lede{margin-top:18px}.f2-l .btn{margin-top:28px}
.f2-win{background:#EFEAE2;border:var(--line);border-radius:26px;box-shadow:var(--sh);overflow:hidden;min-width:0}
.f2-h{display:flex;gap:12px;align-items:center;padding:13px 18px;background:#F0F2F5;border-bottom:1px solid #D1D7DB}
.f2-h .f2-av{width:42px;height:42px;border-radius:50%;background:#0F0A1F;display:grid;place-items:center;flex:none}.f2-h .f2-av img{width:26px;height:auto}
.f2-h b{display:block;font:600 16px/1.2 var(--sans);color:#111B21}.f2-h small{display:block;font:400 13px/1.2 var(--sans);color:#667781;margin-top:2px}
.f2-h .f2-b{margin-left:auto;display:inline-flex;gap:6px;align-items:center;font:700 11.5px/1 var(--sans);color:#1DAA61;background:#E7FBE9;padding:6px 9px;border-radius:999px;white-space:nowrap}.f2-h .f2-b svg{width:13px;height:13px;color:#1DAA61}
.f2-m{padding:16px 5% 18px;display:grid;gap:10px}
.f2-m .f2-day{justify-self:center;background:#fff;color:#54656F;font:500 12.5px/1 var(--sans);padding:6px 12px;border-radius:7.5px;box-shadow:0 1px .5px rgba(11,20,26,.13);margin-bottom:2px}
.f2-m details{border:0;display:block}
.f2-m summary{list-style:none;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:12px;max-width:86%;padding:10px 12px 10px 14px;border-radius:0 10px 10px 10px;background:#fff;color:#111B21;font:600 15.5px/1.35 var(--sans);box-shadow:0 1px .5px rgba(11,20,26,.13);letter-spacing:0}
.f2-m summary::-webkit-details-marker{display:none}
.f2-m summary i{flex:none;width:24px;height:24px;border-radius:50%;background:#E7FBE9;position:relative;border:0;transition:transform .25s}
.f2-m summary i::before,.f2-m summary i::after{content:"";position:absolute;left:7px;right:7px;top:11px;height:2px;border-radius:2px;background:#1DAA61}.f2-m summary i::after{transform:rotate(90deg);transition:transform .25s}
.f2-m details[open] summary i::after{transform:rotate(0)}
.f2-m details p{position:relative;margin:8px 0 0 auto;width:fit-content;max-width:86%;padding:9px 12px 20px;border-radius:10px 0 10px 10px;background:#D9FDD3;color:#111B21;font:400 15px/1.45 var(--sans);box-shadow:0 1px .5px rgba(11,20,26,.13)}
.f2-m details[open] p{animation:f2pop .3s cubic-bezier(.2,.9,.3,1) backwards}.f2-m details[open] p+p{animation-delay:.12s}
@keyframes f2pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.f2-m details p::after{content:"✓✓";position:absolute;right:10px;bottom:4px;font:700 11px/1 var(--sans);letter-spacing:-.12em;color:#53BDEB}
.f2-f{display:flex;gap:12px;align-items:center;padding:10px 16px;background:#F0F2F5;border-top:1px solid #D1D7DB;text-decoration:none}
.f2-f span{flex:1;background:#fff;border-radius:999px;padding:12px 16px;font:400 15px/1 var(--sans);color:#8696A0}.f2-f i{width:44px;height:44px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none}.f2-f i svg{width:20px;height:20px;color:#fff}

/* ===== start: centred, and the message writes itself in a chat ===== */
.spec3 .end2{margin-left:auto;margin-right:auto;width:calc(100% - 28px);max-width:1412px}
.e2-form{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:min(1080px,100%);text-align:left;align-items:stretch}
.e2-fields{background:#fff;color:var(--ink);border:var(--line);border-radius:24px;padding:26px;display:grid;gap:14px;align-content:start;box-shadow:var(--sh-s)}
.e2-fields h3{margin:0 0 2px;font:900 22px/1.1 var(--sans);letter-spacing:-.035em}.e2-fields>p{margin:0;font:500 13.5px/1.45 var(--sans);color:var(--ink-2)}
.e2-fields{display:flex;flex-direction:column}.e2-fields>*{flex:none}.e2-ok{list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:2px solid #ECE8F6;display:flex;flex-wrap:wrap;gap:8px 16px;font:700 13px/1 var(--sans);color:var(--ink)}.e2-ok li{display:flex;gap:7px;align-items:center}.e2-ok svg{width:15px;height:15px;color:#1DAA61}
.e2-fields .fl{display:grid;gap:8px}.e2-fields label{font:800 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.e2-chat{background:#EFEAE2;border:var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-s);min-width:0}
.e2-h{display:flex;gap:12px;align-items:center;padding:12px 16px;background:#F0F2F5;border-bottom:1px solid #D1D7DB}
.e2-h .f2-av{width:42px;height:42px;border-radius:50%;background:#0F0A1F;display:grid;place-items:center;flex:none}.e2-h .f2-av img{width:26px;height:auto}
.e2-h b{display:block;font:600 16px/1.2 var(--sans);color:#111B21}.e2-h small{display:block;font:400 13px/1.3 var(--sans);color:#667781;margin-top:2px}.e2-h small.is-typing{color:#1DAA61}
.e2-m{flex:1;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;min-height:260px}
.e2-m .f2-day{align-self:center;background:#fff;color:#54656F;font:500 12.5px/1 var(--sans);padding:6px 12px;border-radius:7.5px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.e2-m .sysn{align-self:center;max-width:94%;margin:0;padding:7px 12px;border-radius:7.5px;background:#FFEECD;color:#54656F;font:400 12.5px/1.4 var(--sans);text-align:center;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.e2-m .bub{position:relative;margin:0;max-width:88%;padding:9px 12px 22px;border-radius:10px;font:500 15px/1.45 var(--sans);color:#111B21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.e2-m .bub.out{align-self:flex-end;background:#D9FDD3;border-radius:10px 0 10px 10px}
.e2-m .bub time{position:absolute;right:10px;bottom:5px;font:500 11px/1 var(--sans);color:#667781;display:inline-flex;gap:3px;align-items:center}.e2-m .bub time svg{width:15px;height:15px;color:#53BDEB}
.e2-m .next2{align-self:flex-start;margin-top:auto;max-width:88%;padding:9px 12px 10px;border-radius:0 10px 10px 10px;background:#fff;color:#111B21;font:500 14px/1.45 var(--sans);box-shadow:0 1px .5px rgba(11,20,26,.13);opacity:.72}
.e2-m .next2 small{display:block;font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#1DAA61;margin-bottom:5px}
.e2-f{padding:12px 14px 14px;background:#F0F2F5;border-top:1px solid #D1D7DB;display:grid;gap:8px}
.e2-f .btn{width:100%;justify-content:center}.e2-f .small{margin:0;font:500 12px/1.4 var(--sans);color:#667781;text-align:center}

/* ===== responsive ===== */
@media (max-width:1100px){.maths2 .m2,.price2 .p2-g,.faq2 .f2-g,.p2-flow{grid-template-columns:1fr}.p2-flow{gap:20px}.f2-l{position:static}.e2-form{grid-template-columns:1fr}}
@media (max-width:700px){
  .m2-in{padding:18px 18px 14px}.m2-out{padding:22px 16px 22px}.m2-slip{padding:18px 16px 22px}.m2-sh{flex-direction:column;gap:6px}.m2-rows div{font-size:13.5px}.m2-rows output{font-size:14px}.m2-rows .tot output{font-size:22px}
  .m2-foot{gap:12px}.m2-stamp{width:104px;height:104px}.m2-stamp b{font-size:34px}.m2-stamp span{font-size:8.5px}.m2-fine{font-size:12px}
  .p2-inv,.p2-flow{padding:20px 18px}.p2-pay{grid-template-columns:88px 1fr}.p2-qr{width:88px;height:88px;background-size:20px 20px,20px 20px,20px 20px,10px 10px}.p2-path{gap:12px}.p2-node i{width:52px;height:52px;border-radius:15px}.p2-path::before{top:26px}.p2-coin{top:16px}.p2-days{grid-template-columns:1fr}.p2-tot b{font-size:26px}
  .f2-m{padding:14px 12px 16px}.f2-m summary,.f2-m details p{max-width:92%}.f2-m summary{font-size:15px}.f2-h .f2-b{display:none}
  .spec3 .end2{width:calc(100% - 16px)}.e2-fields{padding:20px 18px}.e2-m{min-height:220px}
}