/* Bikin Motion embedded checkout (Agent 3).
   Mount: <div id="checkout-app" data-product="motion-course"></div> + /assets/js/checkout-widget.js
   Optional wrapper for the purple starry section: <section class="ck-section" id="checkout">…</section>
   Everything is namespaced "ck-" so it never collides with page styles. Requires tokens.css. */

/* ---------- section shell (optional; the sales page may use its own) ---------- */
.ck-section{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,8vw,96px) 0;color:var(--cream);
  background:
    radial-gradient(1.4px 1.4px at 8% 14%,rgba(246,243,255,.8),transparent),radial-gradient(1px 1px at 22% 62%,rgba(246,243,255,.55),transparent),
    radial-gradient(1.6px 1.6px at 37% 28%,rgba(255,212,92,.85),transparent),radial-gradient(1px 1px at 51% 84%,rgba(246,243,255,.6),transparent),
    radial-gradient(1.3px 1.3px at 66% 9%,rgba(246,243,255,.75),transparent),radial-gradient(1px 1px at 79% 52%,rgba(246,243,255,.5),transparent),
    radial-gradient(1.5px 1.5px at 92% 31%,rgba(255,212,92,.8),transparent),radial-gradient(1.1px 1.1px at 88% 90%,rgba(246,243,255,.6),transparent),
    radial-gradient(1px 1px at 4% 78%,rgba(246,243,255,.55),transparent),radial-gradient(1.2px 1.2px at 31% 95%,rgba(246,243,255,.5),transparent),
    radial-gradient(70% 38% at 72% 46%,rgba(98,60,186,.75),transparent),linear-gradient(#231250,#1A0C3D)}
.ck-section .ck-wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
.ck-head{display:grid;gap:2px;max-width:760px;margin:0 auto clamp(28px,4vw,44px);text-align:center;justify-items:center}
.ck-head .ck-eyebrow{font:600 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sun);margin-bottom:12px}
.ck-head h2{font:700 clamp(30px,4.4vw,52px)/1.05 var(--display);margin:0;letter-spacing:-.01em;text-wrap:balance}
.ck-head .ck-hl{position:relative;display:inline-block;padding:0 .12em;z-index:0;color:var(--ink)}
.ck-head .ck-hl::before{content:"";position:absolute;left:0;right:0;top:.16em;bottom:.02em;background:var(--sun);border-radius:.12em;transform:rotate(-1.2deg);z-index:-1}
.ck-head p{font-size:clamp(17px,1.6vw,20px);max-width:56ch;opacity:.86;margin:16px auto 0;text-wrap:pretty}

/* ---------- loading / error placeholder ---------- */
.ck-loading{max-width:620px;margin:0 auto;padding:40px 20px;border-radius:24px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);text-align:center;color:var(--cream);font:600 16px var(--display)}
.ck-loading i{display:inline-block;width:10px;height:10px;margin:0 3px;border-radius:50%;background:var(--sun);animation:ckdots 1s ease-in-out infinite}
.ck-loading i:nth-child(2){animation-delay:.15s}.ck-loading i:nth-child(3){animation-delay:.3s}
@keyframes ckdots{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}

/* ---------- form card ---------- */
.ck{position:relative;max-width:620px;margin:0 auto;display:grid;gap:22px;color:var(--cream);font-family:var(--body);line-height:1.5;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);border-radius:24px;box-shadow:0 24px 60px rgba(10,4,30,.45);
  padding:clamp(20px,3.5vw,34px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ck *,.ck *::before,.ck *::after{box-sizing:border-box}
/* honeypot: off-screen for humans, still in the DOM for bots */
.ck-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.ck fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.ck-col{display:grid;gap:22px;align-content:start;min-width:0}
.ck-col>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ck.in .ck-col>*{opacity:1;transform:none}
.ck.in .ck-col>:nth-child(2){transition-delay:.1s}.ck.in .ck-col>:nth-child(3){transition-delay:.2s}.ck.in .ck-col>:nth-child(n+4){transition-delay:.3s}
.ck.in .ck-col+.ck-col>*{transition-delay:.15s}
@media (min-width:900px){
  .ck{max-width:1040px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,40px)}
  .ck.in .ck-col+.ck-col>:nth-child(2){transition-delay:.25s}.ck.in .ck-col+.ck-col>:nth-child(n+3){transition-delay:.35s}
}
.ck legend{display:flex;align-items:center;gap:10px;font:700 19px var(--display);padding:0;margin-bottom:12px;color:var(--cream)}
.ck legend b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sun);color:var(--ink);font-size:15px;transition:background .3s}
.ck legend b.done{background:var(--mint);animation:ckppop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes ckppop{0%{transform:scale(1)}40%{transform:scale(1.16) rotate(-2deg)}100%{transform:scale(1)}}

/* fields */
.ck-f{display:grid;gap:6px}
.ck-f>span{font:600 15px var(--display);opacity:.9}
.ck-f>span small{font:500 13px var(--body);opacity:.72}
.ck-f input{font:inherit;font-size:16px;padding:13px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:var(--cream);width:100%;transition:border-color .2s,background .2s,box-shadow .2s}
.ck-f input::placeholder{color:rgba(246,243,255,.42)}
.ck-f input:focus{outline:none;border-color:var(--sun);background:rgba(255,255,255,.11);box-shadow:0 0 0 4px rgba(255,212,92,.16)}
.ck-f input[aria-invalid="true"]{border-color:var(--coral)}
.ck-f input.ok{border-color:rgba(143,227,200,.55)}
.ck-fe{margin:0;font:600 13.5px/1.35 var(--display);color:#FFC2B8}
.ck-fe[hidden]{display:none}

/* options (radio cards) */
.ck-opts{display:grid;gap:10px}
.ck-opts.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ck-opt{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:2px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);cursor:pointer;transition:border-color .2s,background .2s,transform .2s;color:var(--cream)}
.ck-opt:hover{border-color:rgba(255,255,255,.32)}
.ck-opt input{position:absolute;opacity:0;pointer-events:none}
.ck-opt::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid rgba(246,243,255,.5)}
.ck-opt.on{border-color:var(--sun);background:rgba(255,212,92,.12);transform:translateY(-2px)}
.ck-opt.on::before{border:6px solid var(--sun);animation:ckdot .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes ckdot{from{transform:scale(.4)}to{transform:scale(1)}}
.ck-opt:focus-within{outline:3px solid var(--sun);outline-offset:2px}
.ck-opt .nm{flex:1;min-width:0;font:600 16px/1.3 var(--display)}
.ck-opt .nm small{display:block;font:500 13px/1.45 var(--body);opacity:.72;margin-top:5px}
.ck-pkg{align-items:flex-start}
.ck-pkg::before{margin-top:2px}
.ck-pkp{display:flex;align-items:baseline;gap:10px;margin-top:8px;white-space:nowrap}
.ck-pkp s{font:600 14px var(--display);opacity:.6;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.ck-pkp b{font:700 20px var(--display);color:var(--sun)}
.ck-spark{display:inline-block;width:.9em;height:.9em;margin-left:.25em;vertical-align:-.08em;color:#E8875A}
.ck-tool{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;margin:0 .18em 0 .1em;vertical-align:-.16em;border-radius:.25em;font:800 .62em/1 var(--display);color:#fff}
.ck-tool.cc{background:#D97757}.ck-tool.el{background:#000}.ck-tool.cl{background:transparent;color:#E8875A;font-size:1em}
.ck-opt.sm{padding:11px 12px;gap:9px}
.ck-opt.sm::before{width:18px;height:18px}
.ck-opt.sm.on::before{border-width:5px}
.ck-opt.sm .nm{font-size:15px}

/* bank / QRIS badges — drawn with CSS text, no external images */
.ck-logo{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:2px;height:24px;min-width:44px;max-width:72px;padding:0 6px;border-radius:6px;background:#fff;font:800 11px/1 var(--body);letter-spacing:-.02em;white-space:nowrap;overflow:hidden}
.ck-opt.sm .ck-logo{height:20px;min-width:40px;max-width:52px;padding:0 4px;font-size:10px}
.ck-logo.qris{color:#111;font:900 11px/1 var(--display);letter-spacing:.02em;box-shadow:inset 0 0 0 1.5px #111;padding:0 5px}
.ck-logo.qris i{font-style:normal;color:#E2231A}
.ck-logo.bca{color:#0060AF;font-style:italic;font-weight:900}
.ck-logo.bni{color:#F15A23;font-weight:900}.ck-logo.bni i{font-style:normal;color:#00787A}
.ck-logo.bri{color:#00529C;font-weight:900}
.ck-logo.bsi{color:#00A39D;font-weight:900}.ck-logo.bsi i{font-style:normal;color:#F8AD3C}
.ck-logo.mandiri{color:#003D79;font-weight:800;font-style:italic;text-transform:lowercase}.ck-logo.mandiri i{display:inline-block;width:12px;height:4px;margin-left:2px;border-radius:2px;background:#F9B200}

/* discount */
.ck-disc{display:grid;gap:10px}
.ck-dt{justify-self:start;background:none;border:0;padding:2px 0;color:var(--sun);font:600 15px var(--display);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ck-db{display:grid;gap:8px}.ck-db[hidden]{display:none}
.ck-dr{display:flex;gap:8px}
.ck-dr input{flex:1;min-width:0;font:inherit;font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:12px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:var(--cream)}
.ck-dr input::placeholder{color:rgba(246,243,255,.42);font-weight:500;letter-spacing:0;text-transform:none}
.ck-dr input:focus{outline:none;border-color:var(--sun);background:rgba(255,255,255,.11)}
.ck-dr input:disabled{opacity:.8}
.ck-dm{margin:0;font:600 14px/1.4 var(--display)}
.ck-dm.ok{color:var(--mint)}.ck-dm.no{color:#FFC2B8}
.ck-dm button{background:none;border:0;padding:0;margin-left:8px;color:inherit;font:inherit;text-decoration:underline;opacity:.8;cursor:pointer}

/* buttons */
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:15px 28px 17px;font:700 19px var(--display);text-decoration:none;cursor:pointer;
  background:var(--sun);color:var(--ink);box-shadow:5px 6px 0 rgba(8,3,36,.35);transition:transform .15s,box-shadow .15s;text-align:center}
.ck-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 8px 0 rgba(8,3,36,.35)}
.ck-btn:active{transform:translate(2px,2px);box-shadow:2px 3px 0 rgba(8,3,36,.35)}
.ck-btn.sm{padding:0 20px;font-size:15px;box-shadow:none}
.ck-btn.sm:hover,.ck-btn.sm:active{transform:none;box-shadow:none}
.ck-btn:disabled{opacity:.6;cursor:wait}
.ck-btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.ck-cta{position:relative;overflow:hidden;width:100%}
.ck-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-160%);animation:ckshine 3.4s ease-in-out 1.2s infinite;pointer-events:none}
.ck-cta:disabled::after{animation:none}
@keyframes ckshine{0%{transform:translateX(-160%)}45%,100%{transform:translateX(260%)}}

/* summary */
.ck-sum{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:16px 18px;border-radius:14px;background:rgba(10,4,30,.35);font-size:15.5px}
.ck-sum:empty{display:none}
.ck-sum dt{opacity:.75}
.ck-sum dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ck-sum .dsc{color:var(--mint);opacity:1}
.ck-sum .tot{font:700 19px var(--display);opacity:1;padding-top:8px;border-top:1.5px dashed rgba(255,255,255,.22)}
.ck-sum dd.tot{color:var(--sun);font-size:21px}
.ck-sum.busy dd.tot{opacity:.75}
.ck-err{margin:0;padding:12px 14px;border-radius:12px;background:rgba(255,107,87,.14);border:1px solid rgba(255,107,87,.45);color:#FFC2B8;font-weight:600;font-size:15px}
.ck-err[hidden]{display:none}
.ck-note{margin:-6px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:14.5px;line-height:1.45;opacity:.92;text-wrap:balance}
.ck-note b{color:var(--sun)}
.ck-mail{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,212,92,.16);color:var(--sun);animation:ckbob 2.4s ease-in-out infinite}
.ck-mail svg{width:17px;height:17px}
@keyframes ckbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ck-mono{font-family:var(--mono)}
/* fallback after an order is created without a redirect target */
.ck.ck-doneform{grid-template-columns:1fr;max-width:620px}
.ck-done{display:grid;gap:14px;justify-items:center;text-align:center;padding:10px 0}
.ck-done p{margin:0;font:600 18px/1.4 var(--display)}
.ck-done b{color:var(--sun)}
.ck-done small{font-size:14px;opacity:.75}

/* ---------- order bump ---------- */
.ck-bump{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:"v v v" "ck t p";gap:14px 12px;align-items:start;padding:14px 14px 16px;border-radius:18px;border:2px dashed rgba(255,212,92,.6);background:rgba(255,212,92,.06);cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s;color:var(--cream)}
.ck-bump:hover{background:rgba(255,212,92,.1)}
.ck-bump:focus-within{outline:3px solid var(--sun);outline-offset:2px}
.ck-bump.on{border-style:solid;border-color:var(--sun);background:rgba(255,212,92,.13);box-shadow:0 0 0 4px rgba(255,212,92,.12),0 18px 40px -18px rgba(255,212,92,.55);animation:ckbumpon .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes ckbumpon{0%{transform:scale(.97)}100%{transform:none}}
.ck-bump>input{position:absolute;opacity:0;pointer-events:none}
.ck-badge{position:absolute;top:-12px;right:16px;z-index:4;font:700 11px/1 var(--display);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--coral);color:#fff;box-shadow:0 6px 14px -6px rgba(255,107,87,.8);animation:ckbadge 2.8s ease-in-out infinite}
@keyframes ckbadge{0%,100%{transform:none}6%{transform:rotate(-5deg) scale(1.08)}12%{transform:rotate(4deg)}18%{transform:none}}
.ck-bv{grid-area:v;--h:112px;position:relative;display:block;min-width:0;border-radius:13px;overflow:hidden;padding:11px 0 12px;
  background:radial-gradient(1.3px 1.3px at 12% 24%,rgba(246,243,255,.85),transparent),radial-gradient(1px 1px at 37% 86%,rgba(246,243,255,.6),transparent),radial-gradient(1.5px 1.5px at 64% 12%,rgba(255,212,92,.95),transparent),radial-gradient(1px 1px at 90% 70%,rgba(246,243,255,.7),transparent),radial-gradient(120% 90% at 80% 0%,#25346F,#1E1450 55%,#120B33);box-shadow:inset 0 0 0 1px rgba(246,243,255,.1)}
.ck-bh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px 10px;font:500 10.5px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:rgba(246,243,255,.72)}
.ck-bh>span{display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
.ck-bh>span:first-child{color:var(--cream)}
.ck-bh b{color:var(--sun);font-weight:500}
.ck-bh .ck-mk{width:16px;height:16px;flex:none}
.ck-bm{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ck-row{display:flex;width:max-content;animation:ckscroll 40s linear infinite}
@keyframes ckscroll{to{transform:translateX(-50%)}}
.ck-bump:hover .ck-row{animation-play-state:paused}

/* SFX timeline strip */
.ck-sfx{position:relative;display:block;height:56px;margin:10px 12px 0;border-radius:11px;background:rgba(5,8,25,.45);box-shadow:inset 0 0 0 1px rgba(246,243,255,.12);overflow:hidden}
.ck-sfx .run{position:absolute;left:0;top:11px;display:flex;gap:6px;will-change:transform}
.ck-sfx .cl{position:relative;flex:none;display:block;height:34px;border-radius:8px;background:rgba(246,243,255,.06);box-shadow:inset 0 0 0 1px rgba(246,243,255,.14);color:rgba(246,243,255,.42);transition:transform .2s cubic-bezier(.3,1.7,.5,1),background .12s,box-shadow .2s}
.ck-sfx .cl b{position:absolute;left:6px;top:5px;font:500 9px/1 var(--mono);color:rgba(246,243,255,.6)}
.ck-sfx .cl svg{position:absolute;left:5px;bottom:4px;width:calc(100% - 10px);height:14px;overflow:visible}
.ck-sfx .cl path{stroke:currentColor;stroke-width:1.7;stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke}
.ck-sfx .cl.hit{background:var(--sun);box-shadow:0 8px 18px -8px rgba(255,212,92,.9);color:var(--ink);transform:scale(1.08);z-index:1}
.ck-sfx .cl.hit b{color:var(--ink);font-weight:700}
.ck-sfx .cl.was{color:var(--sun)}
.ck-sfx .phd{position:absolute;top:3px;bottom:3px;width:2px;border-radius:2px;background:var(--coral);box-shadow:0 0 10px rgba(255,107,87,.9);z-index:2}
.ck-sfx .phd::before{content:"";position:absolute;left:-4px;top:-1px;width:10px;height:7px;background:var(--coral);clip-path:polygon(0 0,100% 0,50% 100%)}
.ck-sfx .phd::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--sun);opacity:0}
.ck-sfx .phd.pg::after{animation:ckring .45s ease-out}
@keyframes ckring{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.5)}}
.ck-sfx .np{position:absolute;left:0;top:0;bottom:0;width:132px;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 10px 0 11px;background:linear-gradient(90deg,#10183a 74%,transparent)}
.ck-sfx .np i.g{font:700 9px/1 var(--display);font-style:normal;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);background:var(--mint);padding:4px 6px;border-radius:5px;align-self:flex-start}
.ck-sfx .np span{display:flex;align-items:center;gap:7px;font:500 12px/1 var(--mono);color:var(--cream)}
.ck-sfx .np em{font-style:normal;white-space:nowrap}
.ck-sfx .np em.pop{animation:cknp .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes cknp{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.ck-sfx .eq{display:flex;align-items:flex-end;gap:2px;height:14px;flex:none}
.ck-sfx .eq b{display:block;width:3px;height:6px;border-radius:2px;background:var(--sun);animation:ckeq .7s ease-in-out infinite}
.ck-sfx .eq b:nth-child(2){animation-delay:-.25s;background:var(--coral)}.ck-sfx .eq b:nth-child(3){animation-delay:-.45s;background:var(--mint)}
@keyframes ckeq{0%,100%{height:4px}50%{height:14px}}
.ck-sfx::after{content:"";position:absolute;right:0;top:0;bottom:0;width:30px;background:linear-gradient(270deg,#10183a,transparent);z-index:2;pointer-events:none}

/* bump checkbox + copy */
.ck-cb{grid-area:ck;position:relative;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border-radius:8px;border:2px solid rgba(246,243,255,.75);background:rgba(255,255,255,.06);animation:ckpulse 1.8s ease-out infinite;transition:background .2s,border-color .2s}
.ck-cb svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ck-cb path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s .05s ease-out}
.ck-bump.on .ck-cb{background:var(--sun);border-color:var(--sun);animation:ckdot .35s cubic-bezier(.3,1.6,.5,1)}
.ck-bump.on .ck-cb path{stroke-dashoffset:0}
@keyframes ckpulse{0%{box-shadow:0 0 0 0 rgba(255,212,92,.6)}70%,100%{box-shadow:0 0 0 9px rgba(255,212,92,0)}}
.ck-bt{grid-area:t;display:grid;gap:5px;min-width:0}
.ck-bt>b{font:700 17px/1.25 var(--display)}
.ck-bt>b em{font-style:normal;color:var(--sun)}
.ck-bt>small{font-size:13.5px;line-height:1.5;opacity:.82}
.ck-bn{color:var(--mint);font-weight:700}
.ck-bt>.ok{display:none;font:700 13.5px/1.3 var(--display);color:var(--mint)}
.ck-bump.on .ck-bt>.ok{display:block;animation:ckok .4s ease-out}
@keyframes ckok{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ck-bp{grid-area:p;display:grid;justify-items:end;gap:2px;line-height:1.2;white-space:nowrap}
.ck-bp s{font-size:13px;opacity:.65;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.ck-bp b{font:700 19px var(--display);color:var(--sun)}

/* ---------- mini template cards (1em = 1/10 card height). Base state = finished frame (used when motion is reduced) ---------- */
.ck-tp{position:relative;flex:none;display:block;height:var(--h);width:calc(var(--h) * 16 / 9);margin-right:10px;border-radius:9px;overflow:hidden;font-size:calc(var(--h) / 10);font-family:var(--display);line-height:1;color:var(--cream);background:#1A1145;box-shadow:0 8px 18px -8px rgba(3,2,15,.7),inset 0 0 0 1px rgba(246,243,255,.1)}
.ck-tp.t{width:calc(var(--h) * 9 / 16)}
.ck-tp *{position:absolute;display:block}
.ck-tp>em{left:.55em;top:.5em;z-index:5;font:500 .7em/1 var(--mono);font-style:normal;letter-spacing:.03em;text-transform:uppercase;padding:.32em .45em;border-radius:.35em;background:rgba(5,8,25,.55);color:rgba(246,243,255,.92);white-space:nowrap}
/* logo reveal */
.tp-logo{background:radial-gradient(80% 90% at 50% 55%,#26357A,#120B33)}
.tp-logo .c{left:50%;top:50%;width:2.4em;height:2.4em;margin:-1.2em 0 0 -1.2em;border-radius:.7em;background:var(--coral);box-shadow:inset -.35em -.3em 0 rgba(0,0,0,.14);transform:translateX(-2.6em) scale(.82) rotate(-8deg);animation:tplc 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
.tp-logo .r{left:50%;top:50%;width:2.4em;height:2.4em;margin:-1.2em 0 0 -1.2em;border-radius:.7em;border:.15em solid var(--coral);opacity:0;animation:tplr 3.2s ease-out infinite}
.tp-logo b{left:44%;top:50%;transform:translateY(-50%);font-size:1.35em;font-weight:700;animation:tplw 3.2s cubic-bezier(.2,.8,.2,1) infinite}
.tp-logo b span{position:static;display:inline;color:var(--sun)}
@keyframes tplc{0%{transform:scale(0) rotate(-90deg)}14%{transform:scale(1.18) rotate(6deg)}22%,30%{transform:scale(1) rotate(0)}44%,86%{transform:translateX(-2.6em) scale(.82) rotate(-8deg);opacity:1}96%,100%{transform:translateX(-2.6em) scale(0);opacity:0}}
@keyframes tplr{0%,12%{opacity:0;transform:scale(1)}14%{opacity:.9;transform:scale(1)}40%,100%{opacity:0;transform:scale(2.6)}}
@keyframes tplw{0%,36%{clip-path:inset(0 100% 0 0);opacity:1}56%,86%{clip-path:inset(0 0 0 0);opacity:1}96%,100%{clip-path:inset(0 0 0 0);opacity:0}}
/* hook (vertical) */
.tp-hook{background:var(--cream);color:var(--ink)}
.tp-hook i{left:0;right:0;text-align:center;font-style:normal;font-weight:700;animation:tphk 3s cubic-bezier(.3,1.6,.5,1) infinite both}
.tp-hook .h1{top:16%;font-size:2.7em;color:var(--unguPenuh)}
.tp-hook .h2{top:45%;font-size:1.2em;animation-delay:.18s}
.tp-hook .h3{top:59%;font:700 .85em/1 var(--body);opacity:.7;animation-delay:.36s}
.tp-hook .h4{top:70%;font-size:1.25em;animation-delay:.54s}
.tp-hook .h4 span{position:relative;display:inline;padding:0 .12em;background:linear-gradient(var(--mint),var(--mint)) 0 75%/100% 55% no-repeat}
@keyframes tphk{0%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(1.15)}16%,80%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(1)}}
/* lower third */
.tp-l3{background:linear-gradient(160deg,#4A3F8F,#3B2A94 60%,#1E1450)}
.tp-l3 .hd{right:18%;top:15%;width:2.8em;height:2.8em;border-radius:50%;background:#1A1145;opacity:.9}
.tp-l3 .bd{right:10%;top:47%;width:4.6em;height:5.2em;border-radius:2.3em 2.3em 0 0;background:#1A1145;opacity:.9}
.tp-l3 .bar{left:.8em;bottom:1em;width:.34em;height:2.6em;border-radius:.2em;background:var(--mint);transform-origin:bottom;animation:tpl3a 3.6s cubic-bezier(.2,.8,.2,1) infinite}
.tp-l3 .bx{left:1.3em;bottom:1em;height:2.6em;padding:0 .8em;border-radius:.3em;background:var(--cream);color:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:.3em;animation:tpl3b 3.6s cubic-bezier(.2,.8,.2,1) infinite}
.tp-l3 .bx b{position:static;font-size:1em;font-weight:700;white-space:nowrap}
.tp-l3 .bx i{position:static;font:700 .62em/1 var(--body);font-style:normal;opacity:.65;white-space:nowrap}
@keyframes tpl3a{0%{transform:scaleY(0)}12%,86%{transform:scaleY(1);opacity:1}94%,100%{transform:scaleY(1);opacity:0}}
@keyframes tpl3b{0%,10%{clip-path:inset(0 100% 0 0)}30%,86%{clip-path:inset(0 0 0 0);opacity:1}94%,100%{clip-path:inset(0 0 0 0);opacity:0}}
/* follow button */
.tp-sub{background:radial-gradient(90% 90% at 50% 50%,#2E1F78,#1A1145)}
.tp-sub .bt{left:50%;top:50%;width:7.2em;height:2.2em;border-radius:1.1em;background:rgba(246,243,255,.16);transform:translate(-62%,-50%);animation:tpsb 3.4s infinite}
.tp-sub .bt i{inset:0;display:flex;align-items:center;justify-content:center;font:700 .95em/1 var(--display);font-style:normal;white-space:nowrap}
.tp-sub .bt .s1{color:#fff;opacity:0;animation:tpst1 3.4s infinite}
.tp-sub .bt .s2{color:var(--cream);animation:tpst2 3.4s infinite}
.tp-sub .bl{left:calc(50% + 3.1em);top:50%;width:1.7em;height:1.7em;margin-top:-.85em;transform-origin:50% 12%;animation:tpsl 3.4s infinite}
.tp-sub .cur{left:0;top:0;width:1.6em;height:1.6em;transform-origin:0 0;opacity:0;animation:tpsc 3.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes tpsb{0%,33%{background:var(--unguPenuh);transform:translate(-62%,-50%)}34%{background:var(--unguPenuh);transform:translate(-62%,-50%) scale(.9)}38%{background:rgba(246,243,255,.16);transform:translate(-62%,-50%) scale(1)}90%{background:rgba(246,243,255,.16)}97%,100%{background:var(--unguPenuh)}}
@keyframes tpst1{0%,34%{opacity:1}37%,90%{opacity:0}96%,100%{opacity:1}}
@keyframes tpst2{0%,34%{opacity:0}37%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes tpsl{0%,38%,58%,100%{transform:rotate(0)}42%{transform:rotate(18deg)}46%{transform:rotate(-16deg)}50%{transform:rotate(12deg)}54%{transform:rotate(-8deg)}}
@keyframes tpsc{0%{transform:translate(15em,10.5em);opacity:0}8%{transform:translate(14em,9.2em);opacity:1}30%{transform:translate(7.6em,4.9em) scale(1);opacity:1}34%{transform:translate(7.6em,4.9em) scale(.8)}38%{transform:translate(7.6em,4.9em) scale(1)}56%{transform:translate(9em,6.6em);opacity:1}72%,100%{transform:translate(15em,10.5em);opacity:0}}
/* quote (vertical) */
.tp-quote{background:linear-gradient(#2B1F5C,#1E1450)}
.tp-quote .q{left:.18em;top:.42em;font:700 3.4em/1 Georgia,"Times New Roman",serif;color:var(--mint)}
.tp-quote .l{left:.7em;height:.45em;border-radius:.22em;background:rgba(246,243,255,.78);transform-origin:left;animation:tpqln 3s ease-out infinite both}
.tp-quote .l1{top:4.3em;width:4.2em}.tp-quote .l2{top:5.15em;width:3.5em;animation-delay:.15s}
.tp-quote .l3{top:6em;width:4em;background:var(--sun);animation-delay:.3s}.tp-quote .l4{top:6.85em;width:2.5em;animation-delay:.45s}
.tp-quote .by{left:.7em;top:8.1em;width:1.6em;height:.28em;border-radius:.14em;background:var(--coral);transform-origin:left;animation:tpqln 3s ease-out .6s infinite both}
@keyframes tpqln{0%{transform:scaleX(0)}18%,84%{transform:scaleX(1);opacity:1}94%,100%{transform:scaleX(1);opacity:0}}
/* promo */
.tp-promo{background:repeating-linear-gradient(-45deg,#4FE0BE 0 .9em,#7AD8BA .9em 1.8em);color:var(--ink)}
.tp-promo>em{background:rgba(30,20,80,.75)}
.tp-promo b{left:1.1em;top:32%;font-size:1.3em;font-weight:700;line-height:1.02;animation:tpprb 3s cubic-bezier(.2,.8,.2,1) infinite}
.tp-promo .st{right:1.3em;top:50%;width:4.6em;height:4.6em;margin-top:-2.3em;border-radius:50%;background:var(--unguPenuh);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg);box-shadow:inset 0 0 0 .22em rgba(255,255,255,.55),0 .3em .6em rgba(30,20,80,.25);animation:tpprs 3s cubic-bezier(.3,1.6,.5,1) infinite}
.tp-promo .st i{position:static;font:700 1.55em/1 var(--display);font-style:normal}
.tp-promo .st small{position:static;font:800 .6em/1 var(--body);letter-spacing:.08em;margin-top:.15em}
.tp-promo .sp{width:.9em;height:.9em;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tpprk 1.6s ease-in-out infinite}
.tp-promo .sp1{right:.7em;top:1.4em}.tp-promo .sp2{right:5.8em;bottom:1.2em;animation-delay:.6s;width:.7em;height:.7em}
@keyframes tpprb{0%{transform:translateX(-140%);opacity:0}14%,86%{transform:none;opacity:1}96%,100%{opacity:0}}
@keyframes tpprs{0%,16%{transform:rotate(-12deg) scale(0)}28%{transform:rotate(-12deg) scale(1.2)}36%,86%{transform:rotate(-12deg) scale(1)}96%,100%{transform:rotate(-12deg) scale(0)}}
@keyframes tpprk{0%,100%{transform:scale(.4) rotate(0);opacity:.4}50%{transform:scale(1) rotate(45deg);opacity:1}}
/* end screen */
.tp-end{background:radial-gradient(90% 80% at 50% 0,#3B2F7A,#120B33)}
.tp-end>b{left:0;right:0;top:.8em;padding-left:5.5em;text-align:center;font-size:.85em;font-weight:600;color:var(--mint)}
.tp-end .v{top:2.7em;width:6.2em;height:3.5em;border-radius:.4em;background:rgba(246,243,255,.13);box-shadow:inset 0 0 0 .1em rgba(246,243,255,.3)}
.tp-end .v::after{content:"";position:absolute;left:50%;top:50%;margin:-.5em 0 0 -.3em;border-left:.8em solid var(--cream);border-top:.5em solid transparent;border-bottom:.5em solid transparent}
.tp-end .v1{left:1em;animation:tpen1 3.4s cubic-bezier(.2,.8,.2,1) infinite}
.tp-end .v2{right:1em;animation:tpen2 3.4s cubic-bezier(.2,.8,.2,1) infinite}
.tp-end .av{left:50%;top:3em;width:2.4em;height:2.4em;margin-left:-1.2em;border-radius:50%;background:var(--sun);box-shadow:inset 0 -.7em 0 rgba(30,20,80,.18);animation:tpenav 3.4s cubic-bezier(.3,1.6,.5,1) infinite}
.tp-end .fl{left:50%;top:9.4em;transform:translateX(-50%);padding:.35em .7em;border-radius:1em;background:var(--unguPenuh);font:700 .62em/1 var(--display);font-style:normal;color:#fff;white-space:nowrap;animation:tpenfl 3.4s cubic-bezier(.3,1.6,.5,1) infinite}
.tp-end .ln{top:6.8em;height:.3em;border-radius:.15em;background:rgba(246,243,255,.35)}
.tp-end .ln1{left:1em;width:4.6em}.tp-end .ln2{right:2.6em;width:4.6em}
@keyframes tpen1{0%{transform:translateX(-9em)}22%,88%{transform:none;opacity:1}97%,100%{opacity:0}}
@keyframes tpen2{0%{transform:translateX(9em)}22%,88%{transform:none;opacity:1}97%,100%{opacity:0}}
@keyframes tpenav{0%,22%{transform:scale(0)}34%{transform:scale(1.15)}40%,88%{transform:scale(1);opacity:1}97%,100%{transform:scale(1);opacity:0}}
@keyframes tpenfl{0%,36%{transform:translateX(-50%) scale(0)}46%{transform:translateX(-50%) scale(1.15)}52%,88%{transform:translateX(-50%) scale(1);opacity:1}97%,100%{transform:translateX(-50%) scale(1);opacity:0}}
/* wipe transition */
.tp-wipe{background:#1A1145}
.tp-wipe .sa,.tp-wipe .sb{inset:0;display:flex;align-items:center;justify-content:center;font-size:1.3em;font-weight:700}
.tp-wipe .sb{background:var(--cream);color:var(--ink);animation:tpwpb 2.8s cubic-bezier(.6,0,.3,1) infinite}
.tp-wipe .w{top:-30%;left:0;height:160%;width:4.5em;transform:translateX(-8em) skewX(-18deg);animation:tpwpw 2.8s cubic-bezier(.6,0,.3,1) infinite both}
.tp-wipe .w1{background:var(--unguPenuh)}.tp-wipe .w2{background:var(--mint);animation-delay:.07s}.tp-wipe .w3{background:var(--sun);animation-delay:.14s}
@keyframes tpwpw{0%,30%{transform:translateX(-8em) skewX(-18deg)}66%,100%{transform:translateX(24em) skewX(-18deg)}}
@keyframes tpwpb{0%,36%{clip-path:inset(0 100% 0 0);opacity:1}64%,92%{clip-path:inset(0 0 0 0);opacity:1}98%,100%{clip-path:inset(0 0 0 0);opacity:0}}

/* ---------- phone ---------- */
@media (max-width:640px){
  .ck-head{margin-bottom:22px}
  .ck-head p{font-size:15.5px}
  .ck{padding:16px;gap:16px;border-radius:20px}
  .ck-col{gap:16px}
  .ck fieldset{gap:9px}
  .ck legend{font-size:16px;margin-bottom:8px;gap:8px}
  .ck legend b{width:24px;height:24px;font-size:13px}
  .ck-f{gap:4px}
  .ck-f>span{font-size:13.5px}
  .ck-f input{padding:10px 12px;font-size:16px;border-radius:10px}
  .ck-opts{gap:8px}
  .ck-opt{padding:10px 12px;gap:10px;border-radius:12px}
  .ck-opt::before{width:18px;height:18px}
  .ck-opt.on::before{border-width:5px}
  .ck-opt .nm{font-size:14.5px}
  .ck-opt.sm{padding:9px 10px;gap:8px}
  .ck-opt.sm .nm{font-size:14px}
  .ck-opt.sm .ck-logo{min-width:36px;max-width:42px;height:18px;font-size:9px}
  .ck-sum{padding:12px 14px;font-size:14.5px;gap:6px 12px}
  .ck-sum dd.tot{font-size:19px}
  .ck-note{font-size:13.5px}
  .ck-mail{width:26px;height:26px}
  .ck-bump{grid-template-columns:24px minmax(0,1fr);grid-template-areas:"v v" "ck t" ". p";gap:12px 10px;padding:12px 12px 14px;border-radius:16px}
  .ck-bv{--h:92px;padding:9px 0 10px}
  .ck-bh{font-size:9.5px;padding:0 10px 8px}
  .ck-hide-sm{display:none}
  .ck-sfx{margin:8px 10px 0}
  .ck-sfx .np{width:120px}
  .ck-cb{width:24px;height:24px;border-radius:7px}
  .ck-bt>b{font-size:15.5px}
  .ck-bt>small{font-size:13px}
  .ck-bp{display:flex;gap:8px;align-items:baseline;margin-top:-4px}
  .ck-bp b{font-size:17px}
}
@media (max-width:370px){
  .ck-opts.grid{gap:6px}
  .ck-opt.sm{padding:8px;gap:6px}
  .ck-opt.sm .nm{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ck-col>*{opacity:1;transform:none;transition:none}
  .ck-row,.ck-badge,.ck-cb,.ck-mail,.ck-cta::after,.ck-sfx .eq b{animation:none!important}
  .ck-tp *{animation:none!important}
}