/* Checkout + thank-you pages. Loaded after style.css. */
body.pg{background:#f4f8ff;background-image:none}
.pg .in{max-width:1000px;margin:auto;padding:0 18px}

/* header */
.ckh2{background:#fff;border-bottom:1px solid #dbe5f4}
.ckh2 .in{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 1.2rem "Baloo 2"}
.brand .logo{width:38px;height:38px;border-radius:11px;background:var(--sun);display:grid;place-items:center;font-size:21px;border:2px solid var(--ink)}
.ckh2 .sec{display:flex;align-items:center;gap:6px;color:#15803d;font-size:13.5px;font-weight:800;background:#eefaf3;border:1px solid #bfe9d4;border-radius:99px;padding:5px 12px}

/* steps */
.stp2{display:flex;justify-content:center;align-items:center;gap:8px;list-style:none;margin:22px auto 4px;padding:0 12px;font-weight:800;font-size:14px}
.stp2 li{display:flex;align-items:center;gap:7px;color:#8aa0c2}
.stp2 li+li:before{content:"";width:34px;height:2px;background:#cfdcf1;margin-right:6px;border-radius:2px}
.stp2 i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#dfe9f8;display:grid;place-items:center;font-size:13px}
.stp2 .on{color:var(--ink)}.stp2 .on i{background:var(--tom);color:#fff}.stp2 .done{color:#15803d}.stp2 .done i{background:#22c55e;color:#fff}
.stp2.ty .done+li:before,.stp2.ty li:before{background:#22c55e}

/* cards */
.co2{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;max-width:960px;margin:22px auto 26px;padding:0 18px;align-items:start}
.card{background:#fff;border:1px solid #dbe5f4;border-radius:20px;padding:26px;box-shadow:0 10px 30px #1b2a490f}
.card h2{text-align:left;font-size:1.35rem;margin:0 0 4px}
.card .sub{margin:0 0 18px;color:#5b6f91;font-size:14.5px}
.prod{display:flex;gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid #e6eef9;margin-bottom:14px}
.prod .tile{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--sun),#ffb347);display:grid;place-items:center;font-size:34px;flex:none;border:2px solid var(--ink)}
.prod b{font:800 1.15rem "Baloo 2";display:block;line-height:1.2}.prod span{font-size:13.5px;color:#5b6f91}
.sum2{list-style:none;margin:0 0 16px;padding:0}.sum2 li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;margin:7px 0}.sum2 .i{color:#16a34a;margin-top:2px;width:18px;height:18px}
.pr{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-weight:700;font-size:15.5px}
.pr s{color:#7c8ca8}.pr.off{color:#15803d}.pr.off span:last-child{font-weight:800}
.pr[hidden]{display:none}
.tot2{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:14px;border-top:2px solid var(--ink)}
.tot2 span:first-child{font-weight:800;font-size:1.05rem}.tot2 b{font:800 2.2rem "Baloo 2";line-height:1}
.save{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;background:#eefaf3;border:1px dashed #53b983;color:#14663a;border-radius:12px;padding:9px;font-weight:800;font-size:14px}
.save[hidden]{display:none}
.fine{text-align:center;color:#6b7e9e;font-size:12.5px;margin:10px 0 0}

/* form */
.card label{display:block;font-weight:800;font-size:13.5px;color:#2a3d63}
.card input[type=text],.card input[type=email],.card input[type=tel]{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1.5px solid #c9d8ee;border-radius:12px;margin:6px 0 16px;background:#fbfdff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.card input:focus{outline:0;border-color:var(--tom);box-shadow:0 0 0 4px #ff6a3d22;background:#fff}
.card .hint2{display:block;font-weight:600;color:#6b7e9e;font-size:12px;margin:-10px 0 16px}
.paybtn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.2rem;padding:16px 20px}
.paybtn .i{width:20px;height:20px}
.assure{display:flex;justify-content:center;gap:6px 14px;flex-wrap:wrap;margin:14px 0 4px;font-size:12.5px;font-weight:800;color:#14663a}
.assure span{display:flex;align-items:center;gap:5px}.assure .i{width:15px;height:15px}
.paylogos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 2px}
.paylogos .lg{width:58px;height:36px;background:#fff;border:1px solid #d6e2f5;border-radius:8px}
.cap2{text-align:center;font-size:12px;font-weight:700;color:#6b7e9e;margin:10px 0 0}

/* trust row */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;max-width:960px;margin:0 auto 34px;padding:0 18px}
.trust>div{background:#fff;border:1px solid #dbe5f4;border-radius:16px;padding:14px;display:flex;gap:11px;font-size:13.5px;line-height:1.4}
.trust .i{color:#16a34a;width:26px;height:26px}.trust b{display:block;font-size:14.5px}.trust a{color:#0b7a3b;font-weight:800}

/* footer */
.ft2{background:var(--ink);color:#c5d6f5;font-size:14px}
.ft2:before{content:"";display:block;height:6px;background:repeating-linear-gradient(90deg,var(--sun) 0 24px,var(--tom) 24px 48px,var(--mint) 48px 72px)}
.ft2 .g{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px;padding:32px 18px 20px;max-width:960px;margin:auto}
.ft2 h4{color:#fff;margin:0 0 8px;font-size:1.05rem}.ft2 p{margin:0 0 10px;line-height:1.55}
.ft2 a{display:block;color:#c5d6f5;text-decoration:none;margin:6px 0}.ft2 a:hover{color:var(--sun)}
.ft2 .wa2{display:inline-flex;align-items:center;gap:6px;background:#25D366;color:#fff;font-weight:800;border-radius:99px;padding:8px 16px;margin-top:4px}
.ft2 .fb2{border-top:1px solid #ffffff22;text-align:center;padding:14px 18px 22px;font-size:12.5px;color:#93abd6}

/* ---------- THANK YOU ---------- */
#cf{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.sky span{position:absolute;bottom:-60px;font-size:34px;opacity:.9;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-55vh) translateX(18px) rotate(8deg)}100%{transform:translateY(-120vh) rotate(-8deg)}}
.tyw{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:10px 18px 30px;text-align:center}
.wait{padding:50px 10px}
.spin{width:54px;height:54px;border-radius:50%;border:6px solid #dbe5f4;border-top-color:var(--tom);margin:0 auto 14px;animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.hero2{background:linear-gradient(160deg,#fff7dc,#ffe9b8 55%,#ffd9c7);border:3px solid var(--ink);border-radius:28px;padding:26px 18px 28px;margin-top:8px;box-shadow:0 14px 0 -4px #1b2a4922,0 18px 40px #1b2a4929;position:relative;overflow:hidden}
.ring{width:96px;height:96px;margin:0 auto 6px;position:relative}
.ring svg{width:100%;height:100%}
.ring circle{fill:#22c55e;stroke:#16a34a;stroke-width:4;transform-origin:center;animation:popc .6s cubic-bezier(.2,1.6,.4,1) both}
.ring path{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .45s ease forwards}
@keyframes popc{from{transform:scale(0)}to{transform:scale(1)}}@keyframes draw{to{stroke-dashoffset:0}}
.ring:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px solid #22c55e66;animation:ping 1.8s 1s ease-out infinite}
@keyframes ping{from{transform:scale(.9);opacity:1}to{transform:scale(1.5);opacity:0}}
.cong{font:800 clamp(2.2rem,9vw,3.4rem) "Baloo 2";line-height:1.05;margin:8px 0 6px;color:var(--ink)}
.cong span{display:inline-block;animation:bob 1.6s ease-in-out infinite;background:linear-gradient(180deg,var(--ink) 40%,var(--tom));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-12px) rotate(-4deg)}60%{transform:translateY(0) rotate(3deg)}}
.lead2{font-size:1.1rem;font-weight:700;margin:0 auto 12px;max-width:460px}
.bot{font-size:78px;line-height:1;display:inline-block;cursor:pointer;animation:wave 2.2s ease-in-out infinite;transform-origin:50% 90%;user-select:none;-webkit-tap-highlight-color:transparent}
@keyframes wave{0%,100%{transform:rotate(-6deg) scale(1)}25%{transform:rotate(8deg) scale(1.08)}50%{transform:rotate(-4deg) translateY(-8px)}75%{transform:rotate(6deg) scale(1.05)}}
.tapme{font-size:12.5px;font-weight:800;color:#8a5a00;margin-top:2px}
.badge2{display:inline-block;background:var(--ink);color:#fff;font-weight:800;font-size:13px;border-radius:99px;padding:5px 15px;margin-top:8px;animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 7px #1b2a4922}}
.spark{position:absolute;font-size:22px;animation:tw 2.4s ease-in-out infinite}
@keyframes tw{0%,100%{transform:scale(.6) rotate(0);opacity:.4}50%{transform:scale(1.25) rotate(20deg);opacity:1}}

.dlcard{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:20px 16px;margin:20px 0;text-align:left}
.dlcard h2{text-align:center;font-size:1.5rem;margin-bottom:4px}.dlcard .sub{text-align:center;margin:0 0 12px;color:#5b6f91;font-size:14.5px}
a.dl2{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#2EC4A6,#20a98d);color:#fff;font:800 1.1rem "Baloo 2";padding:13px 16px;border-radius:16px;margin:10px 0;text-decoration:none;border:3px solid var(--ink);box-shadow:0 5px 0 #14705e;opacity:0;transform:translateY(24px) scale(.96);animation:pop .55s cubic-bezier(.2,1.4,.4,1) forwards}
a.dl2:active{transform:translateY(3px);box-shadow:0 2px 0 #14705e}
a.dl2 .ic{width:38px;height:38px;border-radius:10px;background:#ffffff30;display:grid;place-items:center;font-size:19px;flex:none}
a.dl2 .nm{flex:1;line-height:1.15}a.dl2 small{display:block;font:700 12px Nunito;opacity:.9}
a.dl2 .go{font-size:20px;animation:nudge 1.2s ease-in-out infinite}
@keyframes pop{to{opacity:1;transform:none}}@keyframes nudge{50%{transform:translateY(4px)}}
.rec{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;background:#f3f8ff;border:1px dashed #b7cbea;border-radius:12px;padding:9px 12px;font-size:12.5px;font-weight:700;color:#4a6a9a;margin-top:12px;word-break:break-all}

.nx{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 18px}
.nx div{background:#fff;border:2px solid #dbe5f4;border-radius:18px;padding:14px 8px;animation:flt 3.4s ease-in-out infinite}
.nx div:nth-child(2){animation-delay:.5s}.nx div:nth-child(3){animation-delay:1s}
@keyframes flt{50%{transform:translateY(-6px)}}
.nx .e{font-size:34px;display:block}.nx b{font:800 1rem "Baloo 2";display:block;line-height:1.2;margin-top:2px}.nx small{font-size:12.5px;color:#5b6f91;line-height:1.3;display:block}
.rib{overflow:hidden;white-space:nowrap;background:var(--ink);color:var(--sun);font:800 1.05rem "Baloo 2";padding:9px 0;margin:0 -18px 18px;transform:rotate(-1.2deg)}
.rib div{display:inline-block;animation:mq 16s linear infinite}@keyframes mq{to{transform:translateX(-50%)}}
.help{background:#fff;border:2px solid #dbe5f4;border-radius:18px;padding:16px;text-align:left}
.help p{margin:4px 0 12px;font-size:14.5px}.help .btn{display:block}
.err2{margin-bottom:16px;background:#fff;border:3px solid var(--ink);border-radius:24px;padding:26px 18px;margin-top:8px}.err2 .big{font-size:56px}

@media(max-width:760px){.co2{grid-template-columns:1fr}.ft2 .g{grid-template-columns:1fr 1fr}.ft2 .g>div:first-child{grid-column:1/-1}}
@media(max-width:480px){.card{padding:20px 16px}.stp2{font-size:12px}.stp2 li+li:before{width:14px}.nx{gap:6px}.nx .e{font-size:28px}.ckh2 .sec{font-size:12px;padding:4px 9px}.tot2 b{font-size:1.9rem}}

/* checkout: trust icons and payment logos always on ONE row, even on small phones */
.assure{flex-wrap:nowrap;justify-content:space-between;gap:4px}
.assure span{flex:1 1 0;min-width:0;flex-direction:column;text-align:center;gap:3px;font-size:11.5px;line-height:1.2}
.assure .i{width:18px;height:18px}
.paylogos{flex-wrap:nowrap;gap:6px}
.paylogos .lg{flex:1 1 0;min-width:0;width:auto;max-width:58px;height:auto;aspect-ratio:64/40}
.pg main.co2{margin-top:26px}