/* v201: moved verbatim out of checkout-cart.html's inline <style> — the strict CSP
   (style-src 'self') refuses <style> elements. Loaded at the same point in the
   cascade (after app.css, before canvas.css). Edit here, not in the page. */
.lmain{display:flex;flex-direction:column;min-height:100vh}
.ltop{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 22px;border-bottom:1px solid var(--stroke);background:var(--glass)}
.ltop-logo img{height:28px;display:block}
.ltop-title{font-family:var(--fd);font-weight:600;font-size:14px}
.ltop-right{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.pay-wrap{max-width:1080px;margin:0 auto;padding:28px 5% 60px;width:100%}
.pay-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:960px){.pay-grid{grid-template-columns:1fr 1.1fr}}
/* ── plan line list (r155 Phase 5) — same row language build.html's cart
   sheet uses (.cartline), copied rather than linked so this page has no
   runtime dependency on build.html ever being loaded first. */
.planlines{margin-bottom:14px}
.cartline{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--stroke)}
.cartline:last-child{border-bottom:none}
.cartline-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cartline-info b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* R155 follow-up — matches build.html's .b-free-note exactly, so a line
   held via temporary free-until access reads the same way on both pages. */
.cartline-free-note{font-size:11.5px;font-weight:600;color:var(--accent)}
/* R176: free trial pay now / pay later */
.trial-opts{display:flex;gap:6px;margin-top:4px}
.trial-opts .btn{padding:4px 10px;font-size:12px}
.cartline.is-later .cartline-info b{color:var(--text2)}
.later-tag{font-size:11.5px;font-weight:700;color:var(--text3);white-space:nowrap}
.plantotal{display:flex;align-items:center;justify-content:space-between;padding-top:12px;margin-top:2px;border-top:1px solid var(--stroke-hi);font-weight:700}
/* R155 follow-up — free-join panel style, reused by R176 #nothingDue */
.free-join-panel{background:var(--accent-soft);border:1px solid var(--edge-accent);border-radius:var(--r-obj);padding:14px 16px;margin-top:14px}
.free-join-panel .card-title{margin-bottom:8px;font-size:12px}
.free-join-note{font-size:12.5px;color:var(--text2);line-height:1.5;margin:0 0 10px}
.free-pick-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--edge-accent)}
.free-pick-row:first-of-type{border-top:none}
.free-pick-name{font-size:13px;font-weight:600;display:block}
.free-pick-sub{font-size:11px;color:var(--text3);display:block;margin-top:1px}
.th{width:50px;height:50px;border-radius:var(--r-obj);display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--surface-3);flex:none}
.th.has-cover{background:var(--surface-2);overflow:hidden}
.th.has-cover img{width:100%;height:100%;object-fit:cover;display:block}
.price-big{font-family:var(--fm);font-weight:700;font-size:22px}
.price-iqd,.price-sub{font-family:var(--fm);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;color:var(--accent)}
.step-row{display:flex;gap:13px;align-items:flex-start;margin-bottom:13px}
.step-n{width:26px;height:26px;border-radius:var(--r-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:12px;font-weight:500;color:var(--brand-on);background:var(--brand)}
.step-t{font-size:13px;color:var(--text2);line-height:1.55;padding-top:3px}
.acct{background:var(--accent-soft);border:1px solid var(--edge-accent);border-radius:var(--r-obj);padding:14px 16px;margin-top:16px}
.acct-lbl{font-family:var(--fm);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.acct-warn{color:var(--accent-ink);font-weight:700;line-height:1.5;text-transform:none;letter-spacing:0;font-size:12.5px}
.acct-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:13px}
.acct-row[hidden]{display:none}
.acct-row b{font-family:var(--fm)}
.copy{display:inline-flex;align-items:center;min-height:26px;font-size:10.5px;font-weight:600;padding:3px 11px;border-radius:var(--r-tag);background:var(--glass2);border:1px solid var(--stroke);cursor:pointer;color:var(--text2);margin-left:8px}
.copy:hover{border-color:var(--stroke-hi);color:var(--text)}
.warn-24{display:flex;gap:9px;font-size:12px;color:var(--text2);margin-top:14px;align-items:flex-start}
.drop{border:2px dashed var(--stroke-hi);border-radius:var(--r-obj);padding:34px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--glass)}
.drop:hover,.drop.over{border-color:var(--blue-hi);background:rgba(49,126,194,.08)}
.drop .ic{font-size:36px;margin-bottom:8px}
.preview{display:none;position:relative;margin-top:14px}
.preview img{width:100%;max-height:230px;object-fit:contain;border-radius:var(--r-obj);border:1px solid var(--stroke);background:var(--surface-2)}
.preview .rm{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:var(--r-sm);background:var(--surface);color:var(--text);border:1px solid var(--line);cursor:pointer;font-weight:600}
.rscreen{display:none;text-align:center;padding:26px 10px 8px}
.rscreen .big{font-size:52px;margin-bottom:10px}
.rscreen h2{font-size:22px;font-weight:600;margin-bottom:8px}
.rscreen p{font-size:13.5px;color:var(--text2);line-height:1.6;max-width:400px;margin:0 auto 18px}
.refid{font-family:var(--fm);font-size:12px;color:var(--text3);margin-top:12px}
.empty-plan{padding:40px 10px;text-align:center;color:var(--text3)}

/* ═══ R155 — THE COACH-MARK GUIDED TOUR, ported to checkout ═════════════════
   Byte-for-byte the same .coach-mask/.coach-ring/.coach-tip/.coach-close/
   .coach-kicker/.coach-title/.coach-text/.coach-progress/.coach-nav rules
   every earlier port (student.html, flashcards.html, qbank.html,
   messages.html, catalog.html, build.html) uses — see student.html's own
   big comment above .coach-mask for the full design rationale (real
   spotlights on real elements, a 4-piece dark mask with a genuine hole so
   whatever is highlighted stays clickable). Copied verbatim from
   build.html rather than re-derived or shared via app.js — no port of this
   tour shares its engine with another; each page owns its own copy, same
   as every earlier one. See the JS engine near the end of this file
   (ccTourOpen()) for why this page, like catalog.html/qbank.html/
   build.html, needs neither ensureSidebar() nor prepareStep(). */
.coach-mask{
  position:fixed; top:0; left:0; width:0; height:0; z-index:300;
  background:rgba(10,14,20,.55); opacity:0; pointer-events:none;
  transition:top .25s cubic-bezier(.2,.7,.3,1),left .25s cubic-bezier(.2,.7,.3,1),
             width .25s cubic-bezier(.2,.7,.3,1),height .25s cubic-bezier(.2,.7,.3,1),
             opacity .2s;
}
.coach-mask.show{opacity:1;pointer-events:auto}
.coach-ring{
  position:fixed; top:0; left:0; width:0; height:0; z-index:301;
  border-radius:10px; box-shadow:0 0 0 3px var(--brand),0 0 22px rgba(37,112,183,.45);
  opacity:0; pointer-events:none;
  transition:top .25s cubic-bezier(.2,.7,.3,1),left .25s cubic-bezier(.2,.7,.3,1),
             width .25s cubic-bezier(.2,.7,.3,1),height .25s cubic-bezier(.2,.7,.3,1),
             opacity .2s;
}
.coach-ring.show{opacity:1}
.coach-tip{
  position:fixed; top:0; left:0; z-index:302;
  width:308px; max-width:calc(100vw - 24px); max-height:80vh; overflow:auto;
  background:var(--paper); border:1px solid var(--line,var(--stroke)); border-radius:var(--r-obj);
  box-shadow:var(--shadow); padding:18px 18px 16px;
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:opacity .2s,transform .2s,top .25s cubic-bezier(.2,.7,.3,1),left .25s cubic-bezier(.2,.7,.3,1);
}
.coach-tip.show{opacity:1;pointer-events:auto;transform:none}
.coach-close{
  position:absolute; top:10px; right:10px; width:26px; height:26px;
  border-radius:50%; border:1px solid var(--line,var(--stroke)); background:var(--surface,var(--glass));
  color:var(--text2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; line-height:1; padding:0;
}
.coach-close:hover{color:var(--text);border-color:var(--text3)}
.coach-kicker{font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin:0 0 8px}
.coach-title{font-family:var(--fd);font-size:15.5px;font-weight:700;margin:0 0 6px}
.coach-text{font-size:13px;line-height:1.6;color:var(--text2);margin:0}
.coach-progress{display:flex;gap:4px;margin:14px 0 14px}
.coach-progress i{flex:1;height:3px;border-radius:2px;background:var(--line,var(--stroke));display:block}
.coach-progress i.on{background:var(--brand)}
.coach-nav{display:flex;align-items:center;gap:8px}
.coach-nav .coach-skip{margin-right:auto;background:none;border:none;color:var(--text3);font-size:12.5px;font-weight:600;cursor:pointer;padding:8px 2px}
.coach-nav .coach-skip:hover{color:var(--text2)}
.coach-nav button.btn{padding:8px 14px;font-size:13px}
@media(prefers-reduced-motion:reduce){.coach-mask,.coach-ring,.coach-tip{transition:none}}