/* ---------- shared ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hint-touch{display:none}
@media (hover:none){.hint-touch{display:inline}.hint-desk{display:none}}
.st-hero,.pf-hero{padding-bottom:48px}

/* ================= PLAN FINDER ================= */
.pf-sec{padding-top:40px}
.pf{max-width:820px;margin:0 auto}
.pf-top{display:flex;align-items:center;gap:16px;margin-bottom:26px;min-height:40px}
.pf-back{background:none;border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:8px 14px;font:600 .9rem var(--body);cursor:pointer}
.pf-back:hover{color:var(--gold);border-color:var(--gold)}
.pf-back[hidden]{display:none}
.pf-prog{flex:1;height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.pf-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rust),var(--gold));transition:width .5s var(--ease)}
.pf-count{font:600 .9rem var(--mono);color:var(--faint);min-width:44px;text-align:right}
.pf-stage{position:relative}
.pf-q{animation:qin .5s var(--ease)}
.pf-q.out{animation:qout .25s ease forwards}
@keyframes qin{from{opacity:0;transform:translateX(40px)}}
@keyframes qout{to{opacity:0;transform:translateX(-40px)}}
.pf-q h2{font:800 clamp(1.8rem,4vw,2.6rem)/1.08 var(--display);letter-spacing:-.03em;margin:0 0 8px}
.pf-q .sub{color:var(--muted);margin:0 0 24px}
.pf-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pf-opt{position:relative;display:flex;gap:14px;align-items:center;text-align:left;background:var(--surface);border:1.5px solid var(--line-2);border-radius:18px;padding:18px 20px;color:var(--text);font:600 1.02rem/1.3 var(--body);cursor:pointer;transition:border-color .2s,transform .2s var(--ease),background .2s}
.pf-opt:hover{border-color:rgba(245,227,161,.4);transform:translateY(-2px)}
.pf-opt:active{transform:scale(.98)}
.pf-opt .em{font-size:1.5rem;flex:none}
.pf-opt small{display:block;font-weight:400;color:var(--faint);font-size:.85rem;margin-top:2px}
.pf-opt[aria-pressed="true"]{border-color:var(--gold);background:rgba(245,227,161,.08)}
.pf-opt[aria-pressed="true"]::after{content:"✓";position:absolute;right:16px;top:50%;margin-top:-13px;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--bg);display:grid;place-items:center;font-weight:800;font-size:.8rem}
.pf-next{margin-top:22px}
.pf-next[disabled]{opacity:.4;cursor:not-allowed}
/* result */
.pf-res{animation:qin .6s var(--ease)}
.pf-badge{display:inline-flex;gap:8px;align-items:center;background:rgba(70,183,126,.12);color:var(--green);border:1px solid rgba(70,183,126,.3);border-radius:99px;padding:6px 14px;font:600 .88rem var(--body);margin-bottom:16px}
.pf-res h2{font:800 clamp(2rem,4.6vw,3rem)/1.05 var(--display);letter-spacing:-.035em;margin:0 0 12px}
.pf-res .why{color:var(--muted);font-size:1.1rem;margin:0 0 28px;max-width:60ch}
.pf-recs{display:grid;gap:12px;margin-bottom:24px}
.pf-rec{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:18px 20px;text-decoration:none;color:var(--text);animation:pop .5s var(--ease) both}
.pf-rec:nth-child(2){animation-delay:.12s}.pf-rec:nth-child(3){animation-delay:.24s}
.pf-rec:hover{border-color:rgba(245,227,161,.4)}
.pf-rec .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(245,227,161,.08);border:1px solid var(--line);color:var(--gold)}
.pf-rec .ico svg{width:24px;height:24px}
.pf-rec strong{display:block;font:700 1.1rem var(--display)}
.pf-rec span{color:var(--muted);font-size:.93rem}
.pf-rec .fit{font:600 .8rem var(--mono);color:var(--gold);white-space:nowrap}
.pf-model{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.pf-model div{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.pf-model span{display:block;font-size:.82rem;color:var(--faint)}
.pf-model strong{font:700 1.1rem var(--display);color:var(--gold)}
.pf-model p{margin:6px 0 0;color:var(--muted);font-size:.93rem}
@media (max-width:640px){
  .pf-opts,.pf-model{grid-template-columns:1fr}
  .pf-rec{grid-template-columns:auto 1fr}
  .pf-rec .fit{grid-column:2}
}
.pf-sec{overflow-x:clip}

/* ================= SPOT THE BUG ================= */
.sb-sec{padding-top:40px}
.sb{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start}
.sb-stage{display:flex;justify-content:center}
@media (min-width:981px) and (min-height:820px){.sb-stage{position:sticky;top:100px}}
.sb-device{width:100%;max-width:430px;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 40px 120px -50px rgba(217,128,58,.5)}
.sb-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line-2);font:500 .8rem var(--mono);color:var(--faint)}
.sb-bar b{width:10px;height:10px;border-radius:50%;background:#E0645A}.sb-bar b:nth-child(2){background:#E4B54A}.sb-bar b:nth-child(3){background:#58B26C}
.sb-bar span{margin-left:8px}
.sb-screen{background:#F4F1EC;color:#2a1f25;padding:14px 14px 22px;font:400 .95rem/1.35 var(--body)}
/* every element can be inspected */
.ins{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;margin:0;border-radius:10px;font:inherit;color:inherit;cursor:pointer;
  outline:1.5px dashed transparent;outline-offset:-1px;transition:outline-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.ins:hover{outline-color:#B5601D;background:rgba(181,96,29,.06)}}
.ins:focus-visible{outline:2px solid #B5601D}
.ins.okflash{animation:okflash .7s}
@keyframes okflash{0%,100%{background:none}30%{background:rgba(62,142,75,.16)}}
.ins.found{outline:2px solid #C2412D;background:rgba(194,65,45,.07);cursor:default}
.ins.found::after{content:attr(data-n);position:absolute;right:-8px;top:-8px;width:24px;height:24px;border-radius:50%;background:#C2412D;color:#fff;font:700 .75rem var(--body);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(194,65,45,.2);animation:pinpop .4s cubic-bezier(.3,1.6,.5,1);z-index:3}
.ins.missed{outline:2px dashed #C2412D;background:rgba(194,65,45,.05)}
.ins.missed::after{content:attr(data-n);position:absolute;right:-8px;top:-8px;width:24px;height:24px;border-radius:50%;background:#fff;color:#C2412D;border:2px solid #C2412D;font:700 .72rem var(--body);display:grid;place-items:center;z-index:3}
.ins.hint{animation:hint 1.2s ease-in-out 2}
@keyframes hint{50%{outline-color:#E4B54A;background:rgba(228,181,74,.22)}}
@keyframes pinpop{from{transform:scale(0)}}
/* checkout content */
.ck-top{font:700 1.05rem var(--display)}
.ck-card{background:#fff;border-radius:14px;padding:6px;margin-top:10px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.ck-lab{display:block;font:600 .72rem var(--body);color:#8a7580;text-transform:none;margin-bottom:2px}
.ck-strong{font-weight:700}
.ck-muted{color:#6b5a63;font-size:.88rem}
.ck-row{display:flex!important;justify-content:space-between;align-items:center;gap:12px}
.ck-item{display:flex;align-items:center;gap:12px;font-weight:600}
.ck-item small{display:block;font-weight:400;color:#8a7580;font-size:.8rem}
.ck-item .thumb{width:42px;height:42px;border-radius:10px;flex:none}
.t1{background:radial-gradient(circle at 50% 55%,#F2B63A 0 38%,#F7E3B0 39%)}
.t2{background:linear-gradient(180deg,#F7E3B0 0 20%,#E86B4C 20%)}
.ck-sum .ck-row{font-size:.92rem}
.ck-green span:last-child{color:#2E6B45;font-weight:600}
.ck-total{font:800 1.12rem var(--display);border-top:1px solid #eee3e7;border-radius:0 0 10px 10px}
.ck-secure{margin-top:10px;text-align:center;font-size:.8rem;color:#6b5a63}
.ck-pay-wrap{position:relative;margin-top:6px}
.ck-pay-hit{padding:6px}
.ck-pay{display:block;background:#2E6B45;color:#fff;text-align:center;font:700 1rem var(--body);padding:15px;border-radius:12px}
.ck-chat{position:absolute;right:-4px;bottom:-4px;width:56%;background:#2a1f25;color:#fff;font:600 .8rem var(--body);padding:14px 14px;border-radius:14px 14px 4px 14px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
/* side panel */
.sb-side{display:grid;gap:16px}
.sb-count{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:20px 22px}
.sb-count strong{font:800 2.6rem/1 var(--display);color:var(--gold);margin-right:8px}
.sb-count span{color:var(--muted)}
.sb-dots{display:flex;gap:8px;margin-top:14px}
.sb-dots i{flex:1;height:6px;border-radius:99px;background:var(--line-2);transition:background .4s}
.sb-dots i.on{background:var(--green)}
.sb-dots i.miss{background:var(--red)}
.sb-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sb-tools .btn{padding:12px 18px}
.sb-reveal{background:none;border:0;color:var(--faint);font:500 .92rem var(--body);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:6px}
.sb-reveal:hover{color:var(--text)}
.sb-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sb-list li{background:var(--surface);border:1px solid var(--line-2);border-left:4px solid var(--green);border-radius:16px;padding:14px 16px;animation:pop .45s var(--ease)}
.sb-list li.m{border-left-color:var(--red)}
.sb-list li.empty{border:1px dashed var(--line);color:var(--faint);font-size:.92rem;animation:none}
.sb-list .n{font:600 .75rem var(--mono);color:var(--faint)}
.sb-list .n em{font-style:normal;color:var(--red)}
.sb-list strong{display:block;margin:2px 0 4px;font-weight:700}
.sb-list p{margin:0;color:var(--muted);font-size:.9rem}
.sb-list .cost{margin-top:8px;color:var(--gold);font-size:.9rem}
.sb-list .cost b{color:var(--text)}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(10px)}}
.sb-end{background:linear-gradient(140deg,rgba(217,128,58,.22),rgba(74,35,64,.55));border:1px solid var(--line);border-radius:22px;padding:24px;animation:pop .5s var(--ease)}
.sb-end[hidden]{display:none}
.sb-end h2{font:800 1.6rem/1.1 var(--display);margin:0 0 8px;letter-spacing:-.02em}
.sb-end p{color:var(--muted);margin:0 0 18px}
.sb-pop{position:fixed;left:50%;bottom:24px;z-index:70;transform:translate(-50%,24px);opacity:0;max-width:min(520px,calc(100% - 32px));background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:12px 18px;font:500 .95rem var(--body);box-shadow:0 20px 50px -10px rgba(0,0,0,.7);transition:all .35s var(--ease);pointer-events:none}
.sb-pop.on{opacity:1;transform:translate(-50%,0)}
.sb-pop.ok b{color:var(--green)}
.sb-pop.bug b{color:#FF9A85}
@media (max-width:980px){
  .sb{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .st-hero,.pf-hero{padding:24px 0 28px}
  .sb-sec,.pf-sec{padding-top:24px}
  .sb-screen{padding:12px 10px 18px}
  .ins{padding:8px 8px}
  .ck-item .thumb{width:36px;height:36px}
}