/* ---------- HOME ---------- */
.hero{padding:var(--sp-9) 0 var(--sp-7);text-align:center}
.hero h1{
  font-size:clamp(38px,6vw,64px);line-height:1.05;margin:var(--sp-4) 0 var(--sp-5);
  max-width:16ch;margin-left:auto;margin-right:auto;
}
.hero h1 em{font-style:italic;color:var(--entrust)}
.hero-sub{font-size:17px;max-width:52ch;margin:0 auto var(--sp-7)}
.hero-cta{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}

.home-spine{margin-bottom:var(--sp-8)}

/* ---------- ACADEMY ---------- */
.academy{padding:var(--sp-8) 0}
.academy-h{text-align:center;font-size:34px;max-width:22ch;margin:0 auto var(--sp-3)}
.academy-sub{text-align:center;max-width:54ch;margin:0 auto var(--sp-7);font-size:15px}
.academy-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-bottom:var(--sp-7)}
.video-card{background:var(--ledger);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.video-num{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--entrust);padding:var(--sp-4) var(--sp-4) 0}
.video-frame{aspect-ratio:16/9;background:#000;margin:var(--sp-3) 0}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
/* .video-frame-link removed: it wrapped the <iframe> in an <a>, which is
   invalid HTML (interactive content inside a link) and unreachable in
   practice — the iframe swallows every click, so the anchor could never
   fire. The "Watch on YouTube" link below the blurb replaces it with a
   control a learner can actually activate, keyboard included. */
.video-watch-link{display:inline-block;margin:0 var(--sp-4) var(--sp-5);font-size:13px;font-weight:600;color:var(--gold,#D9A441);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.video-watch-link:hover,.video-watch-link:focus-visible{opacity:.82}
.video-title{font-size:16.5px;padding:0 var(--sp-4);margin-bottom:8px;line-height:1.35}
.video-blurb{font-size:13.5px;padding:0 var(--sp-4) var(--sp-5);color:var(--parchment-dim);line-height:1.55}
.academy-cta{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}

.site-card{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  background:var(--ledger);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-7);text-decoration:none;color:inherit;
  transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.site-card:hover{border-color:var(--entrust);transform:translateY(-1px)}
.site-card-label{font-family:var(--font-display);font-size:18px;color:var(--parchment);margin-bottom:6px}
.site-card-blurb{font-size:13.5px;color:var(--parchment-dim)}
.site-card-arrow{font-size:22px;color:var(--entrust);flex-shrink:0}

/* ---------- ONBOARDING ---------- */
.onboard-wrap{max-width:640px;margin:0 auto;padding:var(--sp-8) 0}
.biz-strip{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-4);
  margin-bottom:var(--sp-6);font-family:var(--font-mono);font-size:13px;color:var(--parchment-dim);
  flex-wrap:wrap;
}
.biz-strip .amt{color:var(--entrust);font-weight:600}
.biz-strip .divider{width:1px;height:14px;background:var(--rule)}

.oq-card{text-align:center}
.oq-context{font-size:15px;color:var(--parchment-dim);margin-bottom:var(--sp-5)}
.oq-ask{font-family:var(--font-display);font-size:26px;margin-bottom:var(--sp-6);line-height:1.3}

.oq-options{display:grid;gap:var(--sp-3);max-width:420px;margin:0 auto}
.oq-option{
  background:var(--ledger-2);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:16px 20px;font-size:15px;font-weight:500;color:var(--parchment);text-align:left;
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.oq-option:hover{border-color:var(--parchment-dim);transform:translateX(2px)}
.oq-option.is-right{border-color:var(--owe);background:var(--owe-dim)}
.oq-option.is-wrong{border-color:var(--danger)}

.oq-hint{
  margin-top:var(--sp-5);font-size:13.5px;color:var(--parchment-dim);
  min-height:20px;
}
.oq-hint b{color:var(--entrust)}

.oq-after{
  margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--rule);
  font-size:15px;
}
.oq-after b{color:var(--parchment)}

.term-reveal{
  font-family:var(--font-display);font-size:48px;text-align:center;
  margin:var(--sp-5) 0;
}
.term-reveal.is-owe{color:var(--owe)}
.term-reveal.is-entrust{color:var(--entrust)}

.progress-dots{display:flex;justify-content:center;gap:8px;margin-bottom:var(--sp-6)}
.progress-dots span{width:6px;height:6px;border-radius:50%;background:var(--rule);transition:background .2s var(--ease), transform .2s var(--ease)}
.progress-dots span.is-done{background:var(--owe)}
.progress-dots span.is-on{background:var(--entrust);transform:scale(1.4)}

/* ---------- BUSINESS WORLD ---------- */
.world-wrap{max-width:640px;margin:0 auto;padding:var(--sp-7) 0}
.stub{text-align:center;padding:var(--sp-8) 0}
.stub .eyebrow{justify-content:center}
.stub h2{font-size:30px;margin-bottom:var(--sp-3)}
.stub p{max-width:44ch;margin:0 auto var(--sp-6)}

.yard{display:inline-flex;gap:8px;font-size:18px}
.yard span{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));animation:popIn .35s var(--ease)}

.stage-pills{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:0 0 18px}
.stage-pills .pill{
  border:1px solid var(--rule);border-radius:30px;padding:6px 13px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--parchment-dim);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.stage-pills .pill.on{color:var(--entrust);border-color:var(--entrust);background:var(--entrust-dim)}

.scene{display:flex;justify-content:center;align-items:flex-end;gap:24px;padding:4px 0 20px}
.sceneObj{text-align:center;opacity:.5;transition:transform .3s var(--ease), opacity .3s var(--ease), filter .3s var(--ease)}
.sceneObj .icon{font-size:36px;display:block}
.sceneObj .lbl{display:block;font-size:9px;letter-spacing:.1em;color:var(--parchment-dim);margin-top:6px}
.sceneObj.active{opacity:1;transform:translateY(-6px) scale(1.1);filter:drop-shadow(0 0 14px var(--entrust))}
.sceneObj.active .lbl{color:var(--entrust)}

.ledger-strip{display:flex;border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin:2px 0 18px}
.ledger-strip div{
  flex:1;text-align:center;padding:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  font-weight:600;color:var(--parchment-dim);background:var(--ledger-2);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.ledger-strip div.pulse-owe{background:var(--owe-dim);color:var(--owe)}
.ledger-strip div.pulse-entrust{background:var(--entrust-dim);color:var(--entrust)}

/* --- forensic-audit fix -------------------------------------------
   app.js's animatePosting() creates a `.ledger-posting-ghost` span,
   positions it at the source with inline left/top, sets --post-x/
   --post-y as the travel distance, and waits for an "animationend"
   event to remove it. No CSS ever existed for this class, so the
   element rendered with no position/animation, the flying-number
   effect was invisible, and — because no animation ever started —
   "animationend" never fired, leaving an orphaned node in
   document.body after every single journal posting. This restores
   the intended effect and, just as importantly, makes the cleanup
   listener actually run. ------------------------------------------ */
.ledger-posting-ghost{
  position:fixed;left:0;top:0;z-index:9998;pointer-events:none;
  font:700 13px var(--font-mono);color:var(--entrust);
  animation:ledgerPostFly .6s var(--ease) both;
}
@keyframes ledgerPostFly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--post-x,0),var(--post-y,0)) scale(.6)}
}

/* ---------- DRAG & DROP (Business World questions) ---------- */
.dropzone{
  min-height:64px;border:2px dashed var(--rule);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);
  background:var(--ledger-2);transition:border-color .2s var(--ease), background .2s var(--ease);
}
.dropzone-hint{font-size:12.5px;color:var(--parchment-dim);font-family:var(--font-mono);letter-spacing:.06em}
.dropzone.hover-valid{border-color:var(--entrust);background:var(--entrust-dim)}
.dropzone.is-filled{border-style:solid;border-color:var(--owe);background:var(--owe-dim)}

.chip-tray{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-2)}
.chip{
  background:var(--ledger-2);border:1px solid var(--rule);border-radius:999px;
  padding:12px 20px;font-weight:600;font-size:14.5px;color:var(--parchment);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.chip:hover{border-color:var(--parchment-dim)}
.chip.dragging{cursor:grabbing;box-shadow:0 12px 28px rgba(0,0,0,.45);border-color:var(--entrust)}
.chip.is-locked{opacity:.35;cursor:default}
.chip.nudge-back{animation:nudge .3s var(--ease)}

/* ---------- FIELD GUIDE ---------- */
.guide-card{max-width:440px;margin:0 auto}
.guide-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
  padding:5px 12px;border-radius:999px;margin-bottom:var(--sp-4);
}
.guide-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.guide-tag-owe{color:var(--owe);background:var(--owe-dim)}
.guide-tag-entrust{color:var(--entrust);background:var(--entrust-dim)}
.guide-term{font-size:32px;margin-bottom:var(--sp-3)}
.guide-def{font-size:16px;color:var(--parchment);margin-bottom:var(--sp-4);line-height:1.5}
.guide-note{font-size:13.5px;color:var(--parchment-dim);margin-bottom:var(--sp-6);line-height:1.55}

/* ---------- GLOSSARY (recall aid during questions) ---------- */
/* Always in the DOM; visibility is purely CSS-driven via .is-open so
   toggling never requires rebuilding the question card around it. */
.glossary{margin-top:var(--sp-4);text-align:center}
.glossary-toggle{
  background:transparent;border:1px solid var(--rule);color:var(--parchment-dim);
  font-size:12.5px;padding:8px 16px;border-radius:999px;transition:border-color .15s var(--ease),color .15s var(--ease);
}
.glossary-toggle:hover{border-color:var(--parchment-dim);color:var(--parchment)}
.glossary-panel{
  text-align:left;background:var(--ledger-2);border:1px solid transparent;
  border-radius:var(--radius-sm);
  max-height:0;opacity:0;overflow:hidden;padding:0 var(--sp-5);
  transition:max-height .28s var(--ease), opacity .2s var(--ease), padding .28s var(--ease), margin .28s var(--ease), border-color .2s var(--ease);
}
.glossary.is-open .glossary-panel{
  max-height:320px;opacity:1;padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-3);border-color:var(--rule);
}
.glossary-row{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.glossary-row:last-child{border-bottom:none}
.glossary-term{flex:0 0 88px;font-weight:600;font-family:var(--font-mono);font-size:12px}
.glossary-term-owe{color:var(--owe)}
.glossary-term-entrust{color:var(--entrust)}
.glossary-def{color:var(--parchment-dim)}

@media(max-width:760px){
  .academy-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .spine{flex-direction:column}
  .spine::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px;background:linear-gradient(to right, transparent, var(--rule) 12%, var(--rule) 88%, transparent)}
  .app{padding-left:max(var(--sp-4), env(safe-area-inset-left));padding-right:max(var(--sp-4), env(safe-area-inset-right))}
}

/* STEP 5 — Accounting records */
.record-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0}
.record-summary>div{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025);text-align:center}
.record-summary span{display:block;font-size:.72rem;opacity:.65;margin-bottom:5px}.record-summary b{font-size:1rem}
.records-panel{margin-top:24px;text-align:left}.records-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:14px}.records-head h3{margin:4px 0 0}.record-integrity{font-size:.78rem;opacity:.8}
.record-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.record-tabs .is-active{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
.record-card{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;margin-bottom:12px;background:rgba(255,255,255,.025);overflow:auto}.record-card-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}.record-card-head span{font-size:.75rem;opacity:.65}.record-desc{font-size:.82rem;opacity:.75;margin-bottom:10px}.record-table{width:100%;border-collapse:collapse;font-size:.78rem}.record-table th,.record-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}.record-table th:not(:first-child),.record-table td:not(:first-child){text-align:right}.record-total td{font-weight:700;border-bottom:0}.record-empty{padding:25px;text-align:center;opacity:.6}.record-good{opacity:1!important}.record-bad{opacity:1!important}.taccount-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.taccount-name{text-align:center;font-weight:700;padding:7px;border-bottom:1px solid rgba(255,255,255,.12)}.taccount-cols{display:grid;grid-template-columns:1fr 1fr}.taccount-cols>div{padding:12px;text-align:center;min-height:70px}.taccount-cols>div+div{border-left:1px solid rgba(255,255,255,.12)}.taccount-cols b,.taccount-cols span{display:block}.taccount-cols b{font-size:.7rem;opacity:.65;margin-bottom:7px}.taccount-balance{text-align:center;font-size:.76rem;opacity:.75;padding-top:8px}.record-integrity{padding:7px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px}
@media (max-width:700px){.record-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.records-head{align-items:start;flex-direction:column}.taccount-grid{grid-template-columns:1fr}.record-table{min-width:520px}
  /* The Journal/Ledger/T-Accounts/Trial Balance/Financial Statements tabs
     used flex-wrap, which let a flex item shrink narrower than its own
     label before wrapping to a new line — since .btn also sets
     overflow:hidden (for its hover ripple), the wrapped second line was
     clipped, showing truncated labels like "Journ" / "Financial S".
     This scoped override matches the pattern already used for the same
     tabs inside .records-modal: keep each label on one line and let the
     row scroll horizontally instead of shrinking the buttons. Desktop/
     tablet widths (where all five tabs already fit) are unaffected. */
  .record-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .record-tabs .btn{flex:0 0 auto;white-space:nowrap}
}

/* STEP 7 — Financial statements */
.statement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;text-align:left}
.statement-card{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;background:rgba(255,255,255,.025)}
.statement-card h3{margin:4px 0 14px}.statement-wide{grid-column:1/-1}.statement-sub{font:700 .68rem var(--font-mono);letter-spacing:.12em;color:var(--parchment-dim);padding:14px 0 6px}.statement-row{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:.8rem}.statement-row b{white-space:nowrap}.statement-total{display:flex;justify-content:space-between;gap:18px;padding:13px 0 2px;margin-top:4px;border-top:1px solid rgba(255,255,255,.12);font-weight:700}.statement-check{margin-top:14px;text-align:center;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:8px;font-size:.75rem}.statement-check.is-good{color:var(--entrust)}.statement-check.is-bad{color:var(--owe)}
@media(max-width:760px){.statement-grid{grid-template-columns:1fr}.statement-wide{grid-column:auto}}

/* STEP 8 — Learning + Gameplay */
.profile-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px;align-items:center;margin:0 auto 18px;max-width:640px;text-align:center}.profile-hud>div:not(.xp-meter){padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}.profile-hud span{display:block;font:600 .62rem var(--font-mono);letter-spacing:.1em;opacity:.55}.profile-hud b{display:block;margin-top:3px;font-size:.9rem}.profile-hud.is-compact{grid-template-columns:repeat(3,minmax(0,1fr))}.xp-meter{height:5px;min-width:80px;background:var(--rule);border-radius:99px;overflow:hidden}.xp-meter i{display:block;height:100%;background:var(--entrust);border-radius:inherit;transition:width .35s var(--ease)}.error-lines{display:grid;gap:12px;max-width:560px;margin:22px auto;text-align:left}.error-line{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border:1px solid var(--rule);border-radius:14px;background:var(--ledger-2);color:var(--parchment);font:600 14px var(--font-body);text-align:left;cursor:pointer}.error-line:hover:not(:disabled){border-color:var(--entrust);transform:translateY(-1px)}.error-line span{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:var(--rule);font:600 12px var(--font-mono)}.error-line:disabled{opacity:.65;cursor:default}.eh-feedback{min-height:72px;margin:12px auto;max-width:560px;padding:12px;border-radius:12px;background:rgba(255,255,255,.025)}.eh-feedback p{font-size:.82rem;color:var(--parchment-dim);margin:8px 0}.eh-good{color:var(--entrust);font-weight:700}.eh-bad{color:var(--owe);font-weight:700}@media(max-width:640px){.profile-hud{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-hud .xp-meter{grid-column:1/-1}.profile-hud.is-compact{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* STEP 9 — Mastery + badges */
.mastery-panel{max-width:900px;margin:22px auto 30px;padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.02);text-align:left}
.mastery-panel h2{text-align:center;margin:6px 0}.mastery-sub{text-align:center;color:var(--parchment-dim);font-size:.85rem;max-width:620px;margin:0 auto 22px}
.mastery-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}.mastery-columns h3{margin:0 0 12px;font-size:.9rem}.mastery-row{margin:12px 0}.mastery-label{display:flex;justify-content:space-between;font:600 .75rem var(--font-mono);margin-bottom:6px}.mastery-label b{color:var(--entrust)}.mastery-track{height:7px;background:var(--rule);border-radius:99px;overflow:hidden}.mastery-track i{display:block;height:100%;background:var(--entrust);border-radius:inherit;transition:width .4s var(--ease)}
.badge-head{display:flex;justify-content:space-between;align-items:center;margin:28px 0 12px;padding-top:18px;border-top:1px solid var(--rule)}.badge-head h3{margin:0}.badge-head span{font:600 .68rem var(--font-mono);color:var(--parchment-dim)}.badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.badge-card{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--rule);border-radius:14px;background:var(--ledger-2)}.badge-card.is-earned{border-color:rgba(255,255,255,.16)}.badge-card.is-locked{opacity:.45}.badge-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--rule);font-size:18px;flex:0 0 38px}.badge-card.is-earned .badge-icon{background:var(--entrust-dim)}.badge-card b,.badge-card small{display:block}.badge-card b{font-size:.8rem}.badge-card small{color:var(--parchment-dim);font-size:.68rem;margin-top:3px;line-height:1.35}
@media(max-width:700px){.mastery-columns,.badge-grid{grid-template-columns:1fr}.mastery-panel{padding:18px}}

/* Mentor voice control — lives on the mentor screen, styled as a teaching
   choice rather than a system setting. The mentor is part of the product; a
   screen reader is not, and the two should not look alike. */
.mentor-voice{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.mentor-voice-toggle{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.mentor-voice-toggle input{margin-top:3px;flex:none}
.mentor-voice-toggle b{display:block;font-size:.85rem;color:var(--parchment)}
.mentor-voice-toggle small{display:block;margin-top:3px;font-size:.75rem;color:var(--parchment-dim);line-height:1.5}
.mentor-voice-picker{margin-top:12px;display:grid;gap:8px}
.mentor-voice-picker label{font:600 .62rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--parchment-dim)}
.mentor-voice-picker select{width:100%;padding:8px 10px;border:1px solid var(--rule);border-radius:10px;background:var(--ledger-2);color:var(--parchment);font-size:.8rem}
.mentor-voice-note{margin:0;font-size:.72rem;color:var(--parchment-dim);line-height:1.5}

/* Reasoning history — evidence that a wrong idea stopped firing.
   Built from the existing signal-row vocabulary rather than a new visual
   language: it belongs to the same family of statements about the learner,
   and inventing a fresh treatment for it would make it read as a promotion. */
.reasoning-list{display:grid;gap:8px;margin-top:2px}
.reasoning-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--ledger-2);font-size:.78rem}
.reasoning-row b{display:block;font-size:.82rem;color:var(--parchment);line-height:1.35}
.reasoning-row small{display:block;margin-top:3px;color:var(--parchment-dim);line-height:1.5}
.reasoning-mark{flex:none;font:600 .62rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
/* Owed/entrusted, the same two colours the ledger uses everywhere else:
   settled on one side, still open on the other. */
.reasoning-row.is-resolved{border-left:3px solid var(--entrust)}
.reasoning-row.is-resolved .reasoning-mark{color:var(--entrust)}
.reasoning-row.is-active{border-left:3px solid var(--rule)}
.reasoning-row.is-active .reasoning-mark{color:var(--parchment-dim)}

/* STEP 1 — Misconception Engine */
.learning-signals{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule)}
.signal-note{font-size:.78rem;color:var(--parchment-dim);margin:-2px 0 12px;line-height:1.5}
.signal-list{display:grid;gap:8px}
.signal-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--ledger-2);font-size:.78rem}
.signal-row b{font:700 .72rem var(--font-mono);color:var(--entrust)}
.signal-empty{padding:12px;border:1px dashed var(--rule);border-radius:12px;color:var(--parchment-dim);font-size:.78rem;line-height:1.5}
.misconception-feedback{display:grid;gap:10px;text-align:left;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03)}
.misconception-feedback .misconception-kicker{font:600 .62rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--entrust)}
.misconception-feedback .misconception-title{font-size:1rem;color:var(--parchment);line-height:1.25}
.misconception-core{display:grid;gap:4px;padding:10px 11px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.025)}
.misconception-core>span:last-child{font-size:.82rem;line-height:1.55;color:var(--parchment)}
.misconception-expand-kicker{padding-top:2px;font:600 .62rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--entrust)}
.misconception-block{display:grid;gap:3px;padding-top:2px}
.misconception-block>span:last-child,.misconception-memory>span:last-child{font-size:.8rem;line-height:1.55;color:var(--parchment-dim)}
.misconception-label{font:600 .62rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--parchment)}
.misconception-memory{display:grid;gap:3px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.045);border-left:3px solid var(--entrust)}

/* Step 2 — Adaptive Learning */
.adaptive-note{margin:14px auto 0;max-width:62ch;padding:11px 14px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.035);font-size:13px;line-height:1.55;text-align:left}
.adaptive-note span{display:block;font-size:10px;letter-spacing:.12em;font-weight:800;margin-bottom:4px;opacity:.72}
.mastery-ladder{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07)}
.ladder-list{display:grid;gap:10px;margin-top:12px}
.ladder-row{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.015)}
.ladder-row.is-unlocked{opacity:1}.ladder-row.is-locked{opacity:.42}
.ladder-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--rule);font:700 .72rem var(--font-mono)}
.ladder-top{display:flex;justify-content:space-between;gap:12px;font-size:.82rem}.ladder-top small{font:600 .68rem var(--font-mono);color:var(--entrust)}
.ladder-main .mastery-track{margin-top:7px}.ladder-main p{margin:7px 0 0;color:var(--parchment-dim);font-size:.72rem;line-height:1.45}
@media(max-width:700px){.ladder-top{display:block}.ladder-top small{display:block;margin-top:4px}}


/* STEP 4 — Semi-free → Free Journal Entry */
.journal-practice-card{max-width:760px;margin:0 auto;text-align:left}
.journal-practice-card h2{text-align:center;margin:5px 0 10px}.journal-practice-story{text-align:center;color:var(--parchment);font-size:.9rem;line-height:1.55;max-width:60ch;margin:0 auto 14px}
.journal-coach{padding:12px 14px;border-left:3px solid var(--entrust);background:rgba(255,255,255,.035);border-radius:10px;font-size:.78rem;line-height:1.5;margin:14px 0 18px}.journal-coach b{display:block;margin-bottom:3px}
.journal-entry-editor{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--ledger-2)}.journal-editor-head,.journal-editor-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;padding:10px 12px}.journal-editor-head{font:700 .65rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.65;border-bottom:1px solid var(--rule)}.journal-editor-row+.journal-editor-row{border-top:1px solid rgba(255,255,255,.05)}.journal-editor-row select,.journal-editor-row input{width:100%;box-sizing:border-box;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#101828;color:var(--parchment);font:500 .78rem var(--font-body)}.journal-editor-row input[readonly]{opacity:.7}.journal-mode-note{font-size:.72rem;color:var(--parchment-dim);line-height:1.45;margin:12px 0}.journal-feedback{min-height:58px;margin:12px 0;padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.025);font-size:.78rem;line-height:1.5}.journal-feedback p{margin:5px 0 0;color:var(--parchment-dim)}.jp-good{color:var(--entrust);font-weight:700}.jp-bad{color:var(--owe);font-weight:700}.journal-actions{display:flex;gap:8px;flex-wrap:wrap}.journal-progress{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);font:600 .65rem var(--font-mono);color:var(--parchment-dim)}
@media(max-width:650px){.journal-editor-head,.journal-editor-row{grid-template-columns:1fr}.journal-editor-head{display:none}.journal-editor-row{padding:12px}.journal-progress{display:grid}}


/* STEP 5 — Scenario Matrix */
.scenario-universe{max-width:1000px;margin:28px auto;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}
.scenario-universe h2{text-align:center;margin:8px 0 10px;font-family:var(--font-display);font-size:28px}
.scenario-universe-sub{max-width:680px;margin:0 auto 22px;text-align:center;color:var(--muted);line-height:1.65}
.scenario-universe-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px auto 22px;max-width:620px}
.scenario-universe-stats>div{padding:14px;text-align:center;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.scenario-universe-stats b{display:block;font-size:24px}.scenario-universe-stats span{font-size:12px;color:var(--muted)}
.scenario-context-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.scenario-context-card{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);min-height:118px}
.scenario-context-icon{font-size:25px}.scenario-context-card b{font-size:14px}.scenario-context-card p{font-size:12px;line-height:1.45;color:var(--muted);margin:5px 0}.scenario-context-card small{font-size:11px;color:var(--muted)}
.scenario-universe-note{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--surface-2);font-size:13px;line-height:1.6}
@media(max-width:800px){.scenario-context-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.scenario-universe{padding:20px 14px}.scenario-universe-stats{grid-template-columns:1fr}.scenario-context-grid{grid-template-columns:1fr}}

/* Step 4 journal balance meter: make the accounting equation visible while the learner types. */
.journal-balance{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 12px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:rgba(255,255,255,.02);font:600 .7rem var(--font-mono);color:var(--parchment-dim)}
.journal-balance span{padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.03)}
.journal-balance .is-balanced{color:var(--entrust)}
.journal-balance .is-unbalanced{color:var(--owe)}
/* Step 4 — genuinely free journal construction: the learner controls the number of lines. */
.journal-editor-head-free,.journal-editor-row-free{grid-template-columns:1.5fr 1fr 1fr auto}
.journal-editor-row-free .journal-remove-line{white-space:nowrap}
.journal-add-line-wrap{padding:10px 12px;border-top:1px solid var(--rule);text-align:center}
@media(max-width:650px){.journal-editor-head-free,.journal-editor-row-free{grid-template-columns:1fr}.journal-editor-row-free .journal-remove-line{width:100%}}

/* STEP 6 — Real Learner Testing */
.learner-testing-card,.learner-feedback-card,.learner-protocol-card{max-width:860px;margin:0 auto 18px;padding:28px}
.testing-lead{max-width:68ch;margin:0 auto 20px;text-align:center;line-height:1.7}
.testing-status{display:flex;justify-content:center;gap:8px;margin:12px 0 20px;padding:12px;border:1px solid var(--line);border-radius:12px}
.testing-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.testing-metrics>div{padding:14px;border:1px solid var(--line);border-radius:12px;text-align:center}
.testing-metrics span{display:block;font-size:12px;opacity:.7}.testing-metrics b{display:block;font-size:24px;margin-top:4px}
.testing-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.learner-feedback-card label{display:block;margin:14px auto;max-width:680px;font-weight:600}
.learner-feedback-card select,.learner-feedback-card textarea{display:block;width:100%;margin-top:7px;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:inherit;font:inherit;box-sizing:border-box}
.testing-protocol{max-width:680px;margin:15px auto;line-height:1.8}.testing-protocol li{padding-left:5px}.testing-privacy{text-align:center;font-size:13px;opacity:.72;margin-top:18px}
@media(max-width:640px){.testing-metrics{grid-template-columns:repeat(2,1fr)}.learner-testing-card,.learner-feedback-card,.learner-protocol-card{padding:20px}}


/* STEP 7 — learning feedback should feel alive without becoming noisy. */
.stage-pills .pill{transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.stage-pills .pill.on{transform:translateY(-1px)}
.sceneObj{transition:transform .25s var(--ease),opacity .25s var(--ease),filter .25s var(--ease)}
.sceneObj.active{transform:translateY(-3px) scale(1.035);filter:drop-shadow(0 5px 10px rgba(0,0,0,.22))}
.oq-option{transition:transform .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)}
.oq-option:hover{transform:translateY(-2px)}
.oq-option.is-right{box-shadow:0 0 0 3px rgba(217,164,65,.11)}
.oq-option.is-wrong{box-shadow:0 0 0 3px rgba(193,89,75,.10)}
.dropzone.hover-valid{transform:scale(1.01);box-shadow:0 0 0 4px rgba(217,164,65,.08)}
.dropzone.is-filled{animation:fillPop .28s var(--ease) both}

/* STEP 8 — CPA Juma teacher system */
.teacher-wrap{max-width:1100px;margin:0 auto;padding:20px 20px 70px}
.teacher-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center;overflow:hidden;min-height:360px}
.teacher-hero-copy h1{font-family:var(--font-display);font-size:clamp(42px,7vw,76px);line-height:.98;margin:10px 0 18px}
.teacher-hero-copy h1 em{color:var(--entrust);font-style:normal}
.teacher-lead{max-width:58ch;font-size:18px;line-height:1.7;color:var(--parchment-dim)}
.teacher-motto{margin:22px 0;padding:16px 18px;border-left:3px solid var(--entrust);background:rgba(217,164,65,.06);font-family:var(--font-display);font-size:20px}
.teacher-actions{display:flex;gap:10px;flex-wrap:wrap}
.teacher-hero-art{display:flex;justify-content:center;align-items:flex-end;min-height:300px}
.teacher-card{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;margin-top:18px;padding:20px;border:1px solid var(--rule);border-radius:var(--radius);background:linear-gradient(135deg,var(--ledger-2),var(--ledger));box-shadow:0 18px 50px rgba(0,0,0,.18)}
.teacher-card-compact{grid-template-columns:90px 1fr;margin:16px 0;padding:14px}
.teacher-visual{display:flex;justify-content:center;align-items:center;min-height:145px}
.teacher-card-compact .teacher-visual{min-height:95px}
.teacher-copy h3{margin:4px 0 8px;font-family:var(--font-display);font-size:24px}
.teacher-copy p{margin:0;color:var(--parchment-dim);line-height:1.6}
.teacher-eyebrow{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--parchment-dim)}
.teacher-eyebrow b{color:var(--entrust)}
.teacher-prompt{margin-top:12px;display:inline-block;padding:8px 12px;border-radius:999px;background:var(--owe-dim);color:var(--parchment);font-weight:700}
.teacher-method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.teacher-method-card{padding:20px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--ledger)}
.teacher-stage{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--entrust);color:var(--ink);font-weight:900;margin-bottom:14px}
.teacher-method-card h3{margin:0 0 8px;font-family:var(--font-display)}
.teacher-method-card p{color:var(--parchment-dim);line-height:1.55}
.teacher-method-card small{display:block;color:var(--parchment);font-weight:700}
.teacher-principles{margin-top:18px}
.teacher-principles h2{font-family:var(--font-display);margin:8px 0}
.teacher-principles p{max-width:75ch;color:var(--parchment-dim);line-height:1.7}

/* STEP 8 — Official FINOTECH tutor artwork
   Use the supplied final tutor assets. The game engine/content remains unchanged;
   these classes only control placement, scale and readability. */
.teacher-avatar{
  position:relative;
  width:190px;
  height:245px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  flex:none;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.28));
}
.teacher-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  user-select:none;
  -webkit-user-drag:none;
}
.teacher-avatar-juma{width:190px;height:245px;}
.teacher-avatar-ben{width:190px;height:275px;}

.teacher-hero-art .teacher-avatar{
  width:300px;
  height:360px;
}
.teacher-hero-art .teacher-avatar-ben{
  width:280px;
  height:390px;
}

.teacher-card .teacher-visual{
  overflow:visible;
  min-height:180px;
}
.teacher-card .teacher-avatar{
  width:205px;
  height:270px;
}
.teacher-card .teacher-avatar-ben{
  width:200px;
  height:300px;
}

.teacher-card-compact .teacher-visual{
  min-height:155px;
  align-self:end;
  overflow:visible;
}
.teacher-card-compact .teacher-avatar{
  width:180px;
  height:235px;
  margin:0 0 -18px 0;
}
.teacher-card-compact .teacher-avatar-ben{
  width:175px;
  height:255px;
  margin-bottom:-20px;
}

/* Keep the dialogue readable: artwork stays in its own column and never
   becomes an overlay on the teacher's message. */
.teacher-card-compact .teacher-copy{
  min-width:0;
  position:relative;
  z-index:2;
}
.teacher-card-compact .teacher-copy h3{
  font-size:clamp(20px,2.5vw,27px);
}
.teacher-card-compact .teacher-copy p{
  font-size:15px;
  line-height:1.65;
}
.teacher-card-compact .teacher-prompt{
  max-width:100%;
  white-space:normal;
}

/* Speech-bubble feel without sacrificing readability. */
.teacher-card-compact .teacher-copy{
  padding:15px 18px;
  border-radius:18px;
  background:#f3efe6;
  color:#1c2027;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.teacher-card-compact .teacher-eyebrow{color:#555b64;}
.teacher-card-compact .teacher-eyebrow b{color:#a56d00;}
.teacher-card-compact .teacher-copy h3{color:#20242b;}
.teacher-card-compact .teacher-copy p{color:#4f5660;}
.teacher-card-compact .teacher-prompt{background:#174e43;color:#fff;}

/* Choice cards use the same official assets at a smaller size. */
.teacher-choice-art .teacher-avatar{
  width:92px;
  height:115px;
}
/* Juma uses the same visual height as Ben so their heads sit on the same lane. */
.teacher-choice-art .teacher-avatar-juma{
  width:88px;
  height:128px;
}
.teacher-choice-art .teacher-avatar-ben{
  width:88px;
  height:128px;
}

@media(max-width:760px){
  .teacher-card,.teacher-card-compact{grid-template-columns:1fr;}
  .teacher-card-compact .teacher-visual{
    min-height:180px;
    order:2;
  }
  .teacher-card-compact .teacher-copy{
    order:1;
    text-align:left;
  }
  .teacher-card-compact .teacher-avatar{
    width:190px;
    height:245px;
  }
  .teacher-card-compact .teacher-avatar-ben{
    width:180px;
    height:265px;
  }
}

@media(max-width:760px){
  .teacher-hero{grid-template-columns:1fr;text-align:center}
  .teacher-lead{margin-left:auto;margin-right:auto}
  .teacher-actions{justify-content:center}
  .teacher-method-grid{grid-template-columns:1fr}
  .teacher-card{grid-template-columns:1fr;text-align:center}
  .teacher-card .teacher-visual{min-height:120px}
}

/* STEP 8.2 — CPA Ben
   Ben is intentionally distinct from Juma: professional suit, clean-shaven,
   very short #1 haircut, energetic/challenger presentation. */
.teacher-chooser{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,1.2fr);
  gap:20px;
  align-items:center;
  margin-bottom:18px;
  padding:20px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--ledger);
}
.teacher-chooser h2{font-family:var(--font-display);font-size:32px;margin:6px 0 8px;}
.teacher-chooser p{color:var(--parchment-dim);line-height:1.55;margin:0;max-width:48ch;}
.teacher-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.teacher-choice{
  display:grid;
  grid-template-columns:78px 1fr;
  align-items:center;
  gap:8px;
  text-align:left;
  padding:10px;
  color:var(--parchment);
  background:var(--ledger-2);
  border:1px solid var(--rule);
  border-radius:14px;
  cursor:pointer;
  transition:transform .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease);
}
.teacher-choice:hover{transform:translateY(-2px);border-color:var(--parchment-dim);}
.teacher-choice.is-active{border-color:var(--entrust);background:var(--entrust-dim);box-shadow:0 0 0 2px rgba(217,164,65,.08);}
.teacher-choice-art{height:92px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
.teacher-choice-art .teacher-avatar{transform:scale(.48);transform-origin:center bottom;margin-bottom:-58px;}
.teacher-choice-copy{display:flex;flex-direction:column;gap:4px;}
.teacher-choice-copy b{font-family:var(--font-display);font-size:17px;}
.teacher-choice-copy small{color:var(--parchment-dim);font-size:10px;}
.teacher-choice-copy em{font-style:normal;font-size:11px;color:var(--entrust);font-weight:700;}

.teacher-ben .teacher-eyebrow b{color:#8fa8c7;}
.teacher-ben .teacher-prompt{background:#1f3b5d;color:#fff;}
.teacher-ben .teacher-hero-copy h1 em{color:#8fa8c7;}

/* Ben's #1 haircut: close, even and unmistakably short. */
.teacher-avatar.teacher-ben .teacher-hair{
  top:-2px;
  left:9px;
  width:64px;
  height:18px;
  background:#15171a;
  border:0;
  border-radius:48% 48% 32% 32%;
  box-shadow:none;
}
.teacher-avatar.teacher-ben .teacher-head{background:#8b5b3c;}
.teacher-avatar.teacher-ben .teacher-face{background:#a66f4a;}
/* Clean-shaven: no beard/moustache layers are rendered. */
.teacher-avatar.teacher-ben .teacher-smile{display:block;}
/* Suit */
.teacher-avatar.teacher-ben .teacher-body{
  background:#1e2633;
  border-color:#3a4557;
  border-radius:30px 30px 12px 12px;
}
.teacher-avatar.teacher-ben .teacher-lapel{
  display:block;
  border-top-color:#d8d1c2;
}
.teacher-avatar.teacher-ben .teacher-tie{
  display:block;
  background:#486b91;
}
.teacher-avatar.teacher-ben .teacher-badge{background:#8fa8c7;color:#101828;}

@media(max-width:760px){
  .teacher-chooser{grid-template-columns:1fr;}
  .teacher-choice-grid{grid-template-columns:1fr;}
}

/* ================================================================
   FINOTECH LEARNING INTERFACE — Step 8 presentation layer
   Interface-only redesign. Existing engines, content and interactions
   remain unchanged.
   ================================================================ */
.learning-shell{
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 340px;
  gap:22px;
  align-items:start;
  max-width:1500px;
  margin:0 auto;
  padding:18px 0 48px;
}
.learning-main{min-width:0}
.learning-main-top{padding:0 0 14px}
.learning-stage-track{
  display:grid;
  grid-template-columns:repeat(6,minmax(42px,1fr));
  align-items:start;
  position:relative;
  padding:0 4px;
}
.learning-stage-track::before{
  content:"";
  position:absolute;
  left:8%; right:8%; top:18px;
  border-top:2px dashed rgba(255,255,255,.12);
  z-index:0;
}
.learning-stage{
  position:relative;z-index:1;text-align:center;color:var(--parchment-dim);min-width:0;
}
.learning-stage span{
  width:36px;height:36px;margin:0 auto 5px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule);background:var(--ink);font:700 12px var(--font-mono);transition:.2s var(--ease);
}
.learning-stage small{display:block;font-size:10px;letter-spacing:.03em;white-space:nowrap}
.learning-stage.is-current span{border-color:var(--entrust);background:var(--entrust);color:var(--ink);box-shadow:0 0 18px rgba(217,164,65,.28)}
.learning-stage.is-current small,.learning-stage.is-done small{color:var(--parchment)}
.learning-stage.is-done span{border-color:var(--owe);color:var(--owe);background:var(--owe-dim)}
.learning-biz-strip{margin-bottom:14px}
.learning-step-label{
  font:700 11px var(--font-mono);letter-spacing:.16em;color:var(--entrust);
  text-align:center;margin-bottom:8px;text-transform:uppercase;
}
.learning-sidebar{position:sticky;top:16px;display:grid;gap:14px}
.learning-stat-card,.learning-context-card{
  border:1px solid var(--rule);border-radius:16px;background:linear-gradient(160deg,var(--ledger),var(--ledger-2));
  padding:14px;box-shadow:0 12px 32px rgba(0,0,0,.16);
}
.learning-side-title{font:700 10px var(--font-mono);letter-spacing:.13em;color:var(--parchment-dim);margin-bottom:11px}
.learning-context-icon{font-size:38px;line-height:1;margin:3px 0 12px}
.learning-context-card h3{font-family:var(--font-display);font-size:17px;margin:0 0 8px}
.learning-context-card p{font-size:12px;line-height:1.55;color:var(--parchment-dim)}
.learning-side-action{width:100%;justify-content:center}
.learning-records-action{gap:9px;justify-content:center}
.learning-records-icon{width:28px;height:28px;display:block;flex:0 0 28px;border-radius:7px;background:var(--parchment-dim);border:1px solid rgba(255,255,255,.08);overflow:hidden;-webkit-mask-image:url("../assets/ui/accounting-records.png");mask-image:url("../assets/ui/accounting-records.png");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;opacity:.9;transition:transform .15s var(--ease),background-color .15s var(--ease),opacity .15s var(--ease)}
.learning-records-action:hover .learning-records-icon{border-color:rgba(217,164,65,.45);background:var(--entrust);opacity:1;transform:scale(1.05)}
.learning-teacher-rail{min-width:0;position:sticky;top:16px}
.learning-teacher-rail .teacher-card-compact{
  grid-template-columns:1fr;
  margin:0;
  padding:14px;
  min-height:0;
  overflow:visible;
  border-radius:18px;
  background:linear-gradient(160deg,#171d29,#101620);
  box-shadow:0 18px 45px rgba(0,0,0,.24);
}
.learning-teacher-rail .teacher-copy{
  padding:0;
  background:transparent;
  box-shadow:none;
  text-align:left;
}
.learning-teacher-rail .teacher-copy h3{font-size:23px;color:var(--parchment);margin:8px 0}
.learning-teacher-rail .teacher-copy p{color:var(--parchment-dim);font-size:13px;line-height:1.55}
.learning-teacher-rail .teacher-prompt{font-size:12px;display:block;width:fit-content;max-width:100%;white-space:normal;margin-top:12px}
.learning-teacher-rail .teacher-visual{min-height:245px;align-items:flex-end;overflow:visible}
.learning-teacher-rail .teacher-avatar{transform:scale(1.02);transform-origin:center bottom;margin:0}
.learning-teacher-rail .teacher-eyebrow{color:var(--parchment-dim)}
.learning-teacher-rail .teacher-eyebrow b{color:var(--entrust)}
.learning-teacher-rail .teacher-ben .teacher-eyebrow b{color:#8fa8c7}
.learning-teacher-rail .teacher-copy h3::after{
  content:"";display:block;width:42px;height:3px;border-radius:99px;background:var(--entrust);margin-top:10px;
}
.world-learning-shell .scene{margin-bottom:4px}
.world-learning-shell .oq-card{padding:26px 28px}
.world-learning-shell .oq-options{max-width:600px}
.world-learning-shell .dropzone{min-height:72px}
.onboarding-learning-shell .oq-card{padding:28px}
.onboarding-learning-shell .oq-options{max-width:560px}
.onboarding-learning-shell .glossary{margin-top:14px}
.learning-main .biz-strip{justify-content:center}
.learning-main .profile-hud{display:none}

@media(max-width:1180px){
  .learning-shell{grid-template-columns:165px minmax(0,1fr) 300px;gap:16px}
  .learning-teacher-rail .teacher-visual{min-height:215px}
  .learning-teacher-rail .teacher-avatar{transform:scale(.9)}
}
@media(max-width:920px){
  .learning-shell{grid-template-columns:170px minmax(0,1fr)}
  .learning-teacher-rail{grid-column:1/-1;position:relative;top:auto}
  .learning-teacher-rail .teacher-card-compact{grid-template-columns:minmax(0,1fr) 210px;align-items:center}
  .learning-teacher-rail .teacher-visual{min-height:190px}
  .learning-teacher-rail .teacher-avatar{transform:scale(.82)}
}
@media(max-width:680px){
  .learning-shell{display:block;padding:12px 0 34px}
  .learning-sidebar{position:relative;top:auto;grid-template-columns:1fr 1fr;margin-bottom:14px}
  .learning-stat-card,.learning-context-card{padding:12px}
  .learning-side-action{grid-column:1/-1}
  .learning-stage-track{overflow-x:auto;padding-bottom:5px;grid-template-columns:repeat(6,58px);justify-content:center}
  .learning-stage-track::before{left:10%;right:10%}
  .learning-stage small{font-size:9px}
  .learning-teacher-rail .teacher-card-compact{grid-template-columns:1fr}
  .learning-teacher-rail .teacher-visual{min-height:175px;order:2}
  .learning-teacher-rail .teacher-copy{order:1}
  .world-learning-shell .oq-card,.onboarding-learning-shell .oq-card{padding:20px 16px}
}
.learning-shell-nav{display:flex;justify-content:flex-start;margin-bottom:8px}
.learning-stage-track{grid-template-columns:repeat(var(--stage-count),minmax(58px,1fr));min-width:max-content;overflow-x:auto;scrollbar-width:thin}
@media(max-width:680px){.learning-stage-track{justify-content:start}.learning-shell-nav{margin-bottom:6px}}


/* Juma: modest kufi + thobe, with natural hairline visible at the sides. */
.teacher-juma .teacher-body{background:#eee7d8;border-color:#cfc5b4;border-radius:28px 28px 13px 13px;}
.teacher-juma .teacher-hair{top:-8px;left:5px;width:80px;height:35px;background:#f1eadc;border:2px solid #cfc5b4;border-radius:48% 48% 35% 35%;box-shadow:inset 0 -5px 0 rgba(180,170,150,.3);}
.teacher-juma .teacher-head{background:#8b5b3c;border-color:#5e3b2b;}
.teacher-juma .teacher-face{background:#a66f4a;}
.teacher-juma .teacher-badge{background:var(--entrust);}

/* Ben: professional suit, clean-shaven face, very short #1 haircut. */
.teacher-ben .teacher-body{background:#202631;border-color:#303746;border-radius:28px 28px 15px 15px;}
.teacher-ben .teacher-body::before,.teacher-ben .teacher-body::after{content:"";position:absolute;top:11px;width:30px;height:52px;background:#d8d1c2;clip-path:polygon(50% 0,100% 100%,0 100%);}
.teacher-ben .teacher-body::before{left:14px;transform:rotate(13deg)}
.teacher-ben .teacher-body::after{right:14px;transform:rotate(-13deg)}
.teacher-ben .teacher-tie{display:block;top:18px;left:45px;width:11px;height:61px;background:var(--entrust);z-index:2;}
.teacher-ben .teacher-hair{top:-5px;left:5px;width:80px;height:25px;background:#17191d;border:0;border-radius:48% 48% 30% 30%;box-shadow:inset 0 -3px 0 rgba(255,255,255,.06);}
.teacher-ben .teacher-head{background:#8b5b3c;border-color:#5e3b2b;}
.teacher-ben .teacher-face{background:#a66f4a;}
.teacher-ben .teacher-face::before{display:none;}
.teacher-ben .teacher-smile{width:24px;}
.teacher-ben .teacher-badge{background:var(--entrust);}

.teacher-card-compact .teacher-avatar{transform:scale(.78);}
.teacher-choice-art .teacher-avatar{transform:scale(.50);}

/* Meet Our Tutors — align Juma's supplied artwork with Ben's artwork. */
.teacher-choice-art .teacher-avatar-juma{
  position:relative;
  top:-10px;
}

/* ================================================================
   FINOTECH LEARNING INTERFACE — reference polish
   Presentation-only: keeps the existing learning engine and controls.
   ================================================================ */
.learning-shell{max-width:1500px;grid-template-columns:190px minmax(0,1fr) 360px;gap:24px;padding-top:22px}
.learning-sidebar{top:18px}
.learning-stat-card,.learning-context-card{border-radius:17px;padding:16px;background:linear-gradient(145deg,#111927,#0d131e);box-shadow:0 14px 36px rgba(0,0,0,.20)}
.learning-context-icon{font-size:42px;margin:5px 0 14px}
.learning-main{min-width:0}
.learning-main-top{padding:0 0 12px}
.learning-shell-nav{margin-bottom:2px}
.world-learning-shell .oq-card,.onboarding-learning-shell .oq-card{padding:30px 38px;border-radius:17px;background:linear-gradient(145deg,#111a28,#101721);box-shadow:0 22px 55px rgba(0,0,0,.22)}
.world-learning-shell .oq-ask,.onboarding-learning-shell .oq-ask{font-size:28px;line-height:1.25;margin-bottom:22px}
.world-learning-shell .dropzone{min-height:76px}
.world-step-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  min-height:44px;
}
.world-step-actions #worldContinueSlot{
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.world-step-actions .world-back-btn{
  min-width:112px;
}
.world-step-spacer{
  display:block;
  width:112px;
}
.world-step-actions .oq-after{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.learning-teacher-rail{top:18px}
.learning-teacher-rail .teacher-card-compact{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 16px 14px;border-radius:18px;background:linear-gradient(160deg,#121a28,#0b111b);box-shadow:0 20px 52px rgba(0,0,0,.28);overflow:visible}
.learning-teacher-rail .teacher-copy{order:1;width:100%;padding:17px 20px;border-radius:18px;background:#f3efe6;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.learning-teacher-rail .teacher-copy::after{content:"";display:block;width:0;height:0;border-left:17px solid transparent;border-right:0 solid transparent;border-top:18px solid #f3efe6;position:absolute;right:78px;top:128px}
.learning-teacher-rail .teacher-copy h3{font-size:21px;line-height:1.25;margin:7px 0 8px;color:#20242b}
.learning-teacher-rail .teacher-copy p{font-size:15px;line-height:1.55;color:#3f4650}
.learning-teacher-rail .teacher-visual{order:2;min-height:310px;align-items:flex-end;margin-top:-2px;overflow:visible}
.learning-teacher-rail .teacher-prompt{order:3;width:100%;box-sizing:border-box;margin:0;padding:15px 16px;border-radius:15px;background:#171f2d;color:var(--parchment);border:1px solid rgba(255,255,255,.08);font-size:13px;line-height:1.5;white-space:normal;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.learning-teacher-rail .teacher-prompt::before{content:"💡  ";font-size:16px}
.learning-teacher-rail .teacher-eyebrow b{font-size:12px}
.learning-teacher-rail .teacher-copy h3::after{width:48px;height:3px;margin-top:10px}
@media(max-width:1180px){
  .learning-shell{grid-template-columns:170px minmax(0,1fr) 315px;gap:18px}
}
@media(max-width:920px){
  .learning-shell{grid-template-columns:170px minmax(0,1fr)}
  .learning-teacher-rail .teacher-card-compact{display:grid;grid-template-columns:minmax(0,1fr) 235px;align-items:center}
  .learning-teacher-rail .teacher-copy{grid-column:1/-1}
  .learning-teacher-rail .teacher-visual{grid-column:2;grid-row:2;min-height:245px}
  .learning-teacher-rail .teacher-prompt{grid-column:1;grid-row:2;align-self:end}
  .learning-teacher-rail .teacher-copy::after{display:none}
}
@media(max-width:680px){
  .learning-shell{display:block;padding-top:12px}
  .learning-sidebar{position:relative;top:auto}
  .learning-teacher-rail .teacher-card-compact{display:flex;flex-direction:column}
  .learning-teacher-rail .teacher-copy,.learning-teacher-rail .teacher-visual,.learning-teacher-rail .teacher-prompt{grid-column:auto;grid-row:auto}
  .learning-teacher-rail .teacher-visual{min-height:230px}
  .learning-teacher-rail .teacher-copy::after{display:block;right:56px;top:126px}
  .world-learning-shell .oq-card,.onboarding-learning-shell .oq-card{padding:22px 18px}
  .world-step-actions{gap:10px}
  .world-step-actions .world-back-btn{min-width:96px}
  .world-step-spacer{width:96px}
}

/* ================================================================
   FINOTECH TEACHER CARD — teaching-first reference structure
   Presentation only. Existing teacher state/asset switching remains intact.
   ================================================================ */
.learning-teacher-rail .teacher-card-compact,
.teacher-wrap .teacher-card:not(.teacher-card-compact) {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:linear-gradient(160deg,#121a28 0%,#0b111b 100%);
  box-shadow:0 20px 52px rgba(0,0,0,.28);
}
.teacher-identity{
  display:flex;align-items:center;gap:10px;padding:4px 4px 8px;
}
.teacher-identity-icon{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(145deg,#f5c34b,#d89a20);font-size:21px;
  box-shadow:0 8px 18px rgba(217,164,65,.18);
}
.teacher-identity strong{
  display:block;font:800 18px var(--font-display);letter-spacing:.01em;color:var(--parchment);
  text-transform:uppercase;
}
.teacher-identity span{display:block;margin-top:2px;color:var(--parchment-dim);font-size:12px}
.teacher-speech{
  position:relative;padding:17px 18px 18px;border-radius:18px;background:#f3efe6;
  color:#252a31;box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.teacher-speech::after{
  content:"";position:absolute;right:72px;bottom:-16px;width:0;height:0;
  border-left:16px solid transparent;border-right:0 solid transparent;border-top:18px solid #f3efe6;
}
.teacher-section-label{
  display:flex;align-items:center;gap:7px;font:800 10px var(--font-mono);letter-spacing:.13em;
  text-transform:uppercase;color:#a56b0a;margin-bottom:8px;
}
.teacher-section-icon{font-size:16px;line-height:1}
.teacher-speech h3{font-family:var(--font-display);font-size:21px;line-height:1.25;margin:0 0 8px;color:#20242b}
.teacher-speech p{font-size:14px;line-height:1.55;color:#454b55;margin:0}
.teacher-speech .teacher-prompt{
  display:block;margin-top:12px;padding:10px 12px;border-radius:11px;background:#fff9ea;
  border:1px solid rgba(165,107,10,.14);color:#6d4b12;font-size:12px;font-weight:800;line-height:1.45;
}
.teacher-speech .teacher-prompt::before{content:"↳  ";font-weight:900}
.teacher-visual{
  min-height:245px;display:flex;align-items:flex-end;justify-content:center;position:relative;
  margin-top:2px;overflow:visible;
}
.teacher-visual::before{
  content:"";position:absolute;bottom:10px;width:74%;height:52px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(217,164,65,.16),transparent 68%);pointer-events:none;
}
/* Learning-rail avatar sizing: two responsive tiers, each declared exactly
   once — default (tablet and up) here, and the ≤680px tier further below. */
.learning-teacher-rail .teacher-avatar{
  --rail-avatar-w:235px; --rail-avatar-h:305px;
  width:var(--rail-avatar-w);height:var(--rail-avatar-h);
  transform:none;margin:0;filter:drop-shadow(0 18px 22px rgba(0,0,0,.34));z-index:1;
}
.learning-teacher-rail .teacher-avatar-ben{
  --rail-avatar-ben-w:225px; --rail-avatar-ben-h:325px;
  width:var(--rail-avatar-ben-w);height:var(--rail-avatar-ben-h);
}
.teacher-wrap .teacher-avatar{filter:drop-shadow(0 18px 22px rgba(0,0,0,.34));z-index:1}
.teacher-tip{
  position:relative;padding:14px 15px;border-radius:16px;background:linear-gradient(145deg,#172131,#101722);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.teacher-tip-title{display:flex;align-items:center;gap:8px;color:var(--entrust);font-size:12px;font-weight:900;letter-spacing:.02em}
.teacher-tip-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:rgba(217,164,65,.15);font-size:16px}
.teacher-tip p{margin:8px 0 0;color:var(--parchment-dim);font-size:12.5px;line-height:1.55}
.teacher-state-celebrate .teacher-tip{border-color:rgba(98,220,148,.24)}
.teacher-state-celebrate .teacher-tip-title{color:#7ee0a5}
.teacher-state-think .teacher-tip{border-color:rgba(218,132,110,.24)}
.teacher-state-think .teacher-tip-title{color:#ffb19d}
.teacher-ben .teacher-identity-icon{background:linear-gradient(145deg,#7e9bc5,#506f9e)}
.teacher-ben .teacher-section-label{color:#4e6f9e}
.teacher-ben .teacher-speech .teacher-prompt{color:#29466b;background:#eef4fc;border-color:rgba(78,111,158,.16)}
.teacher-ben .teacher-tip-title{color:#8fa8c7}
.teacher-ben .teacher-tip-icon{background:rgba(143,168,199,.15)}
.teacher-wrap .teacher-card:not(.teacher-card-compact){max-width:620px;margin:0 auto}
@media(max-width:920px){
  .learning-teacher-rail .teacher-card-compact{grid-template-columns:1fr;display:flex}
  .learning-teacher-rail .teacher-visual{min-height:225px}
}
@media(max-width:680px){
  .teacher-speech h3{font-size:19px}
  .teacher-speech p{font-size:13px}
  .learning-teacher-rail .teacher-visual{min-height:190px}
  .learning-teacher-rail .teacher-avatar{width:200px;height:260px}
  .learning-teacher-rail .teacher-avatar-ben{width:195px;height:280px}
}

/* Drag/drop should communicate "pick me up" before the learner touches it. */
.dropzone{
  position:relative;
  gap:10px;
  min-height:72px;
  overflow:hidden;
  transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.dropzone::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:calc(var(--radius-sm) - 2px);
  border:1px solid rgba(255,255,255,.035);
  pointer-events:none;
}
.dropzone-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  color:var(--entrust);
  background:rgba(217,164,65,.08);
  border:1px solid rgba(217,164,65,.16);
  transition:transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
.dropzone-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dropzone-hint{transition:color .2s var(--ease), transform .2s var(--ease)}
.dropzone:hover{
  border-color:rgba(217,164,65,.55);
  background:rgba(217,164,65,.055);
  box-shadow:0 0 0 3px rgba(217,164,65,.045);
}
.dropzone:hover .dropzone-icon,
.dropzone.hover-valid .dropzone-icon{
  transform:translateY(-2px) scale(1.08);
  background:rgba(217,164,65,.14);
  box-shadow:0 7px 16px rgba(217,164,65,.12);
}
.dropzone:hover .dropzone-hint,
.dropzone.hover-valid .dropzone-hint{color:var(--parchment);transform:translateY(-1px)}
.dropzone.hover-valid{transform:scale(1.012);border-color:var(--entrust);background:var(--entrust-dim);box-shadow:0 0 0 5px rgba(217,164,65,.07), 0 14px 30px rgba(0,0,0,.18)}
.dropzone.hover-valid .dropzone-icon{animation:dropTargetPulse .7s var(--ease) infinite alternate}
.dropzone.is-filled .dropzone-icon{color:var(--owe);background:rgba(86,174,125,.10);border-color:rgba(86,174,125,.22)}

.chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.chip::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.06) 50%,transparent 75%);
  transform:translateX(-120%);
  transition:transform .45s var(--ease);
  pointer-events:none;
}
.chip-grip{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;opacity:.58;color:var(--parchment-dim);transition:transform .18s var(--ease),opacity .18s var(--ease),color .18s var(--ease)}
.chip-grip svg{width:16px;height:16px;fill:currentColor}
.chip:hover{transform:translateY(-3px);border-color:rgba(217,164,65,.6);background:#182232;box-shadow:0 9px 22px rgba(0,0,0,.22)}
.chip:hover::after{transform:translateX(120%)}
.chip:hover .chip-grip{opacity:1;color:var(--entrust);transform:scale(1.08)}
.chip.dragging{transform:scale(1.06);box-shadow:0 18px 34px rgba(0,0,0,.42),0 0 0 3px rgba(217,164,65,.10);border-color:var(--entrust)}
.chip.dragging .chip-grip{color:var(--entrust);opacity:1;transform:scale(1.12) rotate(4deg)}
.chip.is-locked .chip-grip{opacity:.35}

@keyframes dropTargetPulse{
  from{transform:translateY(-2px) scale(1.04)}
  to{transform:translateY(-2px) scale(1.12)}
}

@media(max-width:640px){
  .dropzone{min-height:68px}
  .chip{padding:11px 15px}
}

@media(prefers-reduced-motion:reduce){
  .dropzone,.dropzone-icon,.dropzone-hint,.chip,.chip-grip,.chip::after{transition:none}
  .dropzone.hover-valid .dropzone-icon{animation:none}
}

/* ================================================================
   ANSWER CHOICE POLISH — small icons + tactile hover only.
   No content, scoring, or interaction logic is changed.
   ================================================================ */
.oq-option{
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:13px;
  overflow:hidden;
  min-height:68px;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.oq-option::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.055) 48%,transparent 72%);
  transform:translateX(-125%);
  transition:transform .48s var(--ease);
  pointer-events:none;
}
.oq-option:hover::before,
.oq-option:focus-visible::before{transform:translateX(125%)}
.oq-option:focus-visible{outline:2px solid rgba(217,164,65,.62);outline-offset:3px}
.choice-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 15px rgba(0,0,0,.16);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
  z-index:1;
}
.choice-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.choice-icon-cash,.choice-icon-asset{color:#e9b943;background:rgba(233,185,67,.10);border-color:rgba(233,185,67,.18)}
.choice-icon-liability{color:#9d83e8;background:rgba(157,131,232,.10);border-color:rgba(157,131,232,.18)}
.choice-icon-inventory{color:#55c98a;background:rgba(85,201,138,.10);border-color:rgba(85,201,138,.18)}
.choice-icon-equity{color:#6fa8ff;background:rgba(111,168,255,.10);border-color:rgba(111,168,255,.18)}
.choice-icon-income{color:#55c98a;background:rgba(85,201,138,.10);border-color:rgba(85,201,138,.18)}
.choice-icon-expense{color:#f39b55;background:rgba(243,155,85,.10);border-color:rgba(243,155,85,.18)}
.choice-icon-receivable{color:#55b7d9;background:rgba(85,183,217,.10);border-color:rgba(85,183,217,.18)}
.choice-icon-increase{color:#69d393;background:rgba(105,211,147,.10);border-color:rgba(105,211,147,.22)}
.choice-icon-decrease{color:#f08a76;background:rgba(193,89,75,.10);border-color:rgba(193,89,75,.22)}
.choice-icon-generic{color:var(--entrust);background:rgba(217,164,65,.08);border-color:rgba(217,164,65,.16)}
.oq-option-copy{position:relative;z-index:1;font-weight:600}
.oq-option-arrow{position:relative;z-index:1;color:var(--parchment-dim);font-size:18px;transform:translateX(-4px);opacity:.45;transition:transform .2s var(--ease),opacity .2s var(--ease),color .2s var(--ease)}
.oq-option:hover,.oq-option:focus-visible{transform:translateY(-3px);border-color:rgba(217,164,65,.42);background:#192332;box-shadow:0 12px 25px rgba(0,0,0,.20),0 0 0 2px rgba(217,164,65,.045)}
.oq-option:hover .choice-icon,.oq-option:focus-visible .choice-icon{transform:scale(1.08) rotate(-2deg);box-shadow:0 8px 18px rgba(0,0,0,.20)}
.oq-option:hover .oq-option-arrow,.oq-option:focus-visible .oq-option-arrow{transform:translateX(1px);opacity:1;color:var(--entrust)}
.oq-option.is-right .choice-icon{color:var(--entrust);background:rgba(217,164,65,.13);border-color:rgba(217,164,65,.28)}
.oq-option.is-wrong .choice-icon{color:var(--danger);background:rgba(193,89,75,.10);border-color:rgba(193,89,75,.22)}

.chip{min-height:48px}
.chip .choice-icon{width:30px;height:30px;border-radius:9px;flex:0 0 30px}
.chip .choice-icon svg{width:18px;height:18px}
.chip-copy{position:relative;z-index:1}
.chip .chip-grip{order:3}
.chip:hover .choice-icon,.chip.dragging .choice-icon{transform:scale(1.08);box-shadow:0 8px 16px rgba(0,0,0,.18)}
.chip.dragging .choice-icon{border-color:rgba(217,164,65,.48)}

@media(max-width:640px){
  .oq-option{grid-template-columns:38px 1fr auto;gap:10px;min-height:62px;padding:13px 15px}
  .choice-icon{width:35px;height:35px}
  .choice-icon svg{width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce){
  .oq-option,.oq-option::before,.choice-icon,.oq-option-arrow{transition:none}
}

/* ================================================================
   OPERATION CHOICES — context-aware Debit/Credit direction cues.
   Small visual teaching aid only; accounting correctness remains in JS.
   ================================================================ */
.oq-operation-option{min-height:78px}
.operation-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 7px 16px rgba(0,0,0,.16);
  color:var(--parchment-dim);
  transition:transform .22s var(--ease), color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
  z-index:1;
}
.operation-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.operation-icon-up{color:var(--owe);background:var(--owe-dim);border-color:rgba(105,211,147,.24)}
.operation-icon-down{color:#f08a76;background:rgba(193,89,75,.10);border-color:rgba(193,89,75,.24)}
.oq-operation-option:hover .operation-icon,
.oq-operation-option:focus-visible .operation-icon{
  transform:translateY(-2px) scale(1.09);
  box-shadow:0 10px 20px rgba(0,0,0,.22);
}
.oq-operation-option:hover .operation-icon-up,
.oq-operation-option:focus-visible .operation-icon-up{color:#8be5ad;background:rgba(105,211,147,.14);border-color:rgba(105,211,147,.38)}
.oq-operation-option:hover .operation-icon-down,
.oq-operation-option:focus-visible .operation-icon-down{color:#ff9c8a;background:rgba(193,89,75,.14);border-color:rgba(193,89,75,.38)}
.operation-choice-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.operation-choice-copy strong{font-size:15px;line-height:1.15}
.operation-choice-copy small{font-size:11.5px;line-height:1.3;color:var(--parchment-dim);font-weight:400;transition:color .2s var(--ease)}
.oq-operation-option:hover .operation-choice-copy small,
.oq-operation-option:focus-visible .operation-choice-copy small{color:var(--parchment)}
.oq-operation-option.is-right .operation-icon-up{color:var(--entrust);background:var(--entrust-dim);border-color:rgba(217,164,65,.35)}
.oq-operation-option.is-wrong .operation-icon-down,
.oq-operation-option.is-wrong .operation-icon-up{color:var(--danger);background:rgba(193,89,75,.10);border-color:rgba(193,89,75,.25)}
@media(max-width:640px){
  .oq-operation-option{min-height:72px}
  .operation-icon{width:38px;height:38px}
  .operation-icon svg{width:24px;height:24px}
  .operation-choice-copy small{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .operation-icon,.operation-choice-copy small{transition:none}
}

/* Learner access — Financial Statements are important enough to be visible during Business World. */
.statements-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;}
.statements-overlay-backdrop{position:absolute;inset:0;background:rgba(5,8,14,.76);backdrop-filter:blur(5px);}
.statements-modal{position:relative;z-index:1;width:min(1040px,100%);max-height:min(88vh,900px);overflow:auto;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:#0d1521;box-shadow:0 28px 90px rgba(0,0,0,.48);}
.statements-modal-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:16px;}
.statements-modal-head h2{margin:5px 0 8px;}
.statements-modal-head p{margin:0;color:var(--parchment-dim);max-width:720px;line-height:1.55;}
.statements-learning-note{margin:0 0 18px;padding:13px 15px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025);line-height:1.55;font-size:.82rem;}
.statement-help{margin:-5px 0 8px;color:var(--parchment-dim);font-size:.76rem;line-height:1.45;}
@media(max-width:700px){.statements-modal{padding:17px;border-radius:17px;max-height:92vh}.statements-modal-head{flex-direction:column}.statements-modal-head .btn{align-self:flex-end}.statements-overlay{padding:10px}}

/* Semantic operation icons — Debit = Owe, Credit = Entrust. */
.choice-icon-owe{color:var(--owe);background:color-mix(in srgb,var(--owe) 10%,transparent);border-color:color-mix(in srgb,var(--owe) 20%,transparent)}
.choice-icon-entrust{color:var(--entrust);background:color-mix(in srgb,var(--entrust) 10%,transparent);border-color:color-mix(in srgb,var(--entrust) 20%,transparent)}
.choice-icon-owe svg,.choice-icon-entrust svg{stroke-width:1.8}

/* Supplied FINOTECH financial-statements artwork replaces the generic chart emoji. */
.learning-statements-action{gap:10px}
.learning-statements-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.learning-statements-icon img{width:100%;height:100%;object-fit:contain;display:block}

/* Learner access — the full accounting trail is visible without leaving the World. */
.records-learning-note{margin:0 0 18px;padding:13px 15px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025);line-height:1.55;font-size:14px}
.records-modal .records-panel{margin-top:0}
.records-modal .record-tabs{position:sticky;top:0;z-index:2;padding:10px 0;background:#0d1521}
.records-modal .record-card{background:rgba(255,255,255,.025)}
@media(max-width:700px){.records-modal .record-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:10px}.records-modal .record-tabs .btn{white-space:nowrap}}


/* FINOTECH TYPOGRAPHY POLISH
   Subtle readability pass: +1px compact UI, +1.5px body guidance,
   +2px primary learning text. Existing visual hierarchy is preserved. */
:root{
  --ui-font-step: 1px;
  --body-font-step: 1.5px;
  --learning-font-step: 2px;
}

/* Compact interface text: labels, metadata, chips and small controls. */
.btn,
.chip,
.badge,
.meta,
.eyebrow,
.stat-label,
.progress-label,
.nav-label,
.world-step-label,
.choice-label,
.field-label,
.helper-text,
.small-text{
  font-size: calc(1em + var(--ui-font-step));
}

/* General readable copy and guidance. */
body,
p,
.prose,
.explanation,
.hint,
.feedback,
.teacher-message,
.teacher-tip,
.card-copy,
.description,
.instruction,
.world-description,
.journal-description,
.statement-description{
  font-size: calc(1rem + var(--body-font-step));
}

/* Primary learning content gets the strongest subtle increase. */
.question,
.question-text,
.oq-question,
.learning-question,
.prompt,
.transaction-description,
.world-question,
.journal-question,
.error-hunter-question{
  font-size: calc(1rem + var(--learning-font-step));
}

/* Keep very small legal/utility text from becoming oversized. */
small,
.footnote,
.legal,
.version,
.kicker{
  font-size: calc(1em + var(--ui-font-step));
}

/* Preserve compact controls where their dimensions are deliberately fixed. */
button,
input,
select,
textarea{
  line-height: 1.35;
}

/* Cash Flow learning classification — keeps the accounting statement readable
   while making the three activity types explicit for learners. */
.cashflow-statement .cashflow-activity{margin-top:16px;padding:14px 16px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.018)}
.cashflow-activity-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.cashflow-activity-head h4{margin:2px 0 0;font-size:.92rem}.cashflow-activity-total{white-space:nowrap;font-size:.82rem}.cashflow-activity-help{margin:8px 0 10px;color:var(--parchment-dim);font-size:.74rem;line-height:1.5}.cashflow-activity .statement-sub{padding:0;color:var(--parchment)}.cashflow-activity .statement-row:last-child{border-bottom:0}.cashflow-reconciliation{margin-top:16px}.cashflow-reconciliation>div:first-child{display:flex;justify-content:space-between;gap:18px;padding:12px 0;font-size:.82rem}.cashflow-reconciliation b,.cashflow-activity-total{font-variant-numeric:tabular-nums}.cashflow-operating{border-left:3px solid var(--entrust)}.cashflow-investing{border-left:3px solid var(--parchment)}.cashflow-financing{border-left:3px solid var(--owe)}.cashflow-noncash-note{margin-top:16px;padding:12px 14px;border:1px dashed rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.02)}.cashflow-noncash-note .statement-sub{margin-bottom:6px}.cashflow-noncash-note p{margin:0;color:var(--parchment);font-size:.76rem;line-height:1.5}.cashflow-noncash-note small{display:block;margin-top:6px;color:var(--parchment-dim);font-size:.68rem;line-height:1.45}
@media(max-width:560px){.cashflow-activity-head{flex-direction:column;gap:6px}.cashflow-activity-total{align-self:flex-start}}


/* FOLLOW-UP AUDIT POLISH — previously unstyled presentational hooks.
   These selectors are intentionally scoped to their existing components;
   they add presentation only and do not alter learning/accounting logic. */
.glossary-toggle-label{display:inline-flex;align-items:center;gap:4px}
.learner-progress-card{margin-top:18px}
.learner-progress-card h3{margin:6px 0 8px}
.learner-progress-card p{line-height:1.55;margin-bottom:16px}
.site-card-text{min-width:0;flex:1}
.records-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px}
.records-body{min-height:80px}
.taccount-card{min-width:0}
.error-both{border-style:dashed}
@media(max-width:700px){
  .records-overlay{padding:12px}
  .site-card-text{width:100%}
}

/* Step 6 controlled learner-testing protocol */
.testing-plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;margin:16px 0 0;list-style:none;counter-reset:none}
.testing-plan-item{display:flex;gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--ledger)}
.testing-plan-item>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule);font-weight:800;flex:0 0 auto}
.testing-plan-item div{min-width:0}.testing-plan-item b{display:block}.testing-plan-item small{display:block;color:var(--parchment-dim);margin-top:2px}
.testing-plan-item.is-done{border-color:var(--entrust)}.testing-plan-item.is-done>span{background:var(--entrust);color:var(--ink);border-color:var(--entrust)}
@media(max-width:650px){.testing-plan{grid-template-columns:1fr}}

/* Motion containment: positioned interaction surfaces own their ripple/spark overlays. */
[data-ripple], .ripple-target, .btn, .chip, .dropzone, .teacher-card {
  position: relative;
}


/* STEP 9 — Business World engagement layer. Intentionally scoped; existing screens unchanged. */
.world-momentum{margin-top:14px;padding:12px 13px;border:1px solid rgba(90,77,54,.13);border-radius:14px;background:rgba(255,255,255,.38)}
.world-momentum-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.72rem}
.world-streak{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:rgba(217,164,65,.09);color:inherit}
.world-streak small{font-size:.68rem;opacity:.65;text-transform:uppercase;letter-spacing:.08em}
.world-xp-label{font-size:.67rem;opacity:.72;text-align:right}
.world-xp-track{height:5px;margin:9px 0 8px;border-radius:999px;background:rgba(60,50,35,.10);overflow:hidden}
.world-xp-track span{display:block;height:100%;border-radius:inherit;background:var(--entrust);transition:width .45s var(--ease)}
.world-mastery-line{display:flex;justify-content:space-between;font-size:.67rem;opacity:.72}
.world-badge-mini{margin-top:8px;font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.accounting-chain-notice{margin:10px 0 14px;padding:13px 15px;border:1px solid rgba(217,164,65,.22);border-radius:15px;background:linear-gradient(90deg,rgba(217,164,65,.08),rgba(255,255,255,.45));text-align:center}
.chain-kicker{font-size:.62rem;font-weight:800;letter-spacing:.14em;opacity:.62}
.chain-flow{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 5px;font-size:.72rem;font-weight:700;flex-wrap:wrap}
.chain-flow i{font-style:normal;opacity:.38}
.chain-caption{font-size:.68rem;opacity:.68}
.world-boss-banner{display:flex;align-items:center;gap:12px;margin:0 auto 12px;max-width:720px;padding:11px 14px;border:1px solid rgba(115,84,35,.20);border-radius:13px;background:rgba(115,84,35,.055)}
.world-boss-banner>span{font-size:1.1rem}
.world-boss-banner b{display:block;font-size:.68rem;letter-spacing:.13em}
.world-boss-banner small{display:block;margin-top:2px;font-size:.72rem;opacity:.68}
.world-boss-pill{letter-spacing:.08em}
.world-reward-layer{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;background:rgba(5,8,14,.62);backdrop-filter:blur(3px);padding:20px}
.world-reward-card{width:min(460px,calc(100vw - 40px));padding:28px 30px;border:1px solid rgba(217,164,65,.38);border-radius:20px;background:linear-gradient(145deg,#171c27,#10151f);color:var(--parchment);box-shadow:0 24px 70px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.025);text-align:center;pointer-events:auto}
.world-reward-kicker{font-size:.62rem;font-weight:800;letter-spacing:.16em;color:var(--entrust);opacity:.9}
.world-reward-title{margin-top:9px;font-family:var(--font-display);font-size:1.55rem;line-height:1.15;font-weight:800;letter-spacing:.02em;color:var(--parchment)}
.world-reward-sub{margin:9px auto 0;font-size:.8rem;line-height:1.5;color:var(--parchment-dim);max-width:360px}

/* STEP 10 — Business World achievement celebration. Scoped; no existing screen styles changed. */
.world-reward-layer{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:auto;
  background:rgba(3,6,11,.76);backdrop-filter:blur(5px);padding:20px;overflow:hidden;
}
.world-reward-card{
  position:relative;width:min(720px,calc(100vw - 34px));max-height:calc(100vh - 34px);max-height:calc(100dvh - 34px);overflow:auto;
  padding:34px 42px 25px;border:1px solid rgba(217,164,65,.68);border-radius:26px;
  background:radial-gradient(circle at 50% 0,rgba(217,164,65,.10),transparent 34%),linear-gradient(145deg,#151a23,#0d1219 72%);
  color:var(--parchment);box-shadow:0 24px 70px rgba(0,0,0,.58),0 0 0 rgba(217,164,65,0);
  text-align:center;pointer-events:auto;z-index:2;
}
.world-reward-dismiss{
  position:fixed;top:18px;right:18px;z-index:4;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(217,164,65,.35);background:rgba(13,18,25,.84);color:var(--parchment);
  font-size:1.45rem;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.world-reward-dismiss:hover{border-color:rgba(217,164,65,.75);transform:translateY(-1px)}
.world-reward-emblem{
  width:92px;height:92px;margin:0 auto 13px;border:1px solid rgba(217,164,65,.58);border-radius:50%;
  display:grid;place-items:center;background:radial-gradient(circle,rgba(217,164,65,.25),rgba(217,164,65,.05) 66%,transparent 67%);
  box-shadow:0 0 0 8px rgba(217,164,65,.04),0 0 36px rgba(217,164,65,.18),inset 0 0 22px rgba(217,164,65,.08);color:var(--entrust);
}
.world-reward-emblem svg{width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 8px rgba(217,164,65,.25))}
.world-reward-kicker{font-size:.72rem;font-weight:900;letter-spacing:.18em;color:var(--entrust);opacity:.95}
.world-reward-title{margin-top:9px;font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.7rem);line-height:1.08;font-weight:900;letter-spacing:.02em;color:var(--parchment)}
.world-reward-sub{margin:10px auto 0;font-size:1rem;line-height:1.5;color:var(--parchment-dim);max-width:580px}
.world-reward-rule{display:flex;align-items:center;gap:12px;max-width:500px;margin:20px auto 17px;color:var(--entrust)}
.world-reward-rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(217,164,65,.45))}
.world-reward-rule span:last-child{background:linear-gradient(90deg,rgba(217,164,65,.45),transparent)}
.world-reward-rule i{font-style:normal;font-size:.72rem}
.world-reward-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 auto 18px;border:1px solid rgba(255,255,255,.06);border-radius:15px;overflow:hidden;background:rgba(255,255,255,.035)}
.world-reward-stats>div{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 10px;text-align:left;background:rgba(10,14,20,.58)}
.world-reward-stat-icon{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(217,164,65,.35);border-radius:50%;color:var(--entrust);font-size:.9rem;flex:none}
.world-reward-stats b{display:block;font-size:.9rem;color:var(--parchment)}
.world-reward-stats small{display:block;margin-top:3px;font-size:.72rem;line-height:1.35;color:var(--parchment-dim)}
.world-reward-chain{padding:15px 16px;border:1px solid rgba(217,164,65,.24);border-radius:14px;background:rgba(255,255,255,.025)}
.world-reward-chain-title{font-size:.84rem;font-weight:900;letter-spacing:.10em;color:var(--entrust)}
.world-reward-chain-title span{margin-right:6px}
.world-reward-chain-flow{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:11px 0 6px;font-size:.9rem;font-weight:800;color:var(--parchment)}
.world-reward-chain-flow i{font-style:normal;color:rgba(237,231,216,.38)}
.world-reward-chain-caption{font-size:.74rem;color:var(--parchment-dim)}
.world-reward-badges{display:grid;gap:9px;margin-top:15px}
.world-reward-badge{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px auto 0;padding:10px 13px;max-width:470px;border:1px solid rgba(217,164,65,.24);border-radius:12px;background:rgba(217,164,65,.05);text-align:left}
.world-reward-badge>span{font-size:1.45rem;color:var(--entrust)}
.world-reward-badge b{display:block;font-size:.8rem;color:var(--parchment)}
.world-reward-badge small{display:block;margin-top:2px;font-size:.72rem;color:var(--parchment-dim)}
.world-reward-continue{margin-top:19px;font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--entrust);opacity:.92}
.world-reward-timer{height:2px;margin:13px auto 0;max-width:330px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.world-reward-timer span{display:block;width:0;height:100%;background:var(--entrust);box-shadow:0 0 10px rgba(217,164,65,.45)}
.world-reward-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.reward-confetti{position:absolute;top:-20px;left:var(--left);width:9px;height:14px;display:block;opacity:0;background:var(--entrust);border-radius:2px;will-change:transform,opacity}
.reward-confetti.is-circle{border-radius:50%;width:8px;height:8px}
.reward-confetti.is-square{width:10px;height:10px;transform-origin:center}
.reward-confetti.is-strip{width:6px;height:18px}
.reward-confetti:nth-child(4n){background:#f0c75e}
.reward-confetti:nth-child(4n+1){background:#47c7b9}
.reward-confetti:nth-child(4n+2){background:#d95b8a}
.reward-confetti:nth-child(4n+3){background:#6da9ff}
@media (max-width:760px){
  .world-reward-card{padding:28px 18px 22px;border-radius:21px}
  .world-reward-stats{grid-template-columns:1fr}
  .world-reward-stats>div{justify-content:flex-start}
  .world-reward-chain-flow{font-size:.74rem;gap:6px}
}

/* FORENSIC REMEDIATION — restrained almost-there teacher state */
.teacher-state-concern .teacher-tip-title{color:var(--entrust)}

/* FINOTECH freemium foundation */
.freemium-home{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:24px auto;max-width:1100px;padding:24px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.freemium-home-copy{max-width:680px}.freemium-home-copy h2{margin:6px 0 8px}.freemium-home-copy p{margin:0;line-height:1.65}.freemium-home-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.freemium-mini-stat{display:flex;flex-direction:column;text-align:center;min-width:110px}.freemium-mini-stat b{font-size:30px}.freemium-mini-stat span{font-size:12px;opacity:.72}
.premium-gate,.premium-page{display:flex;justify-content:center;padding:28px 16px}.premium-gate-card,.premium-page-card{width:min(100%,1000px);padding:34px;border-radius:24px;border:1px solid var(--line,rgba(255,255,255,.12));background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02));text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.16)}
.premium-lock-icon{font-size:48px;margin:8px 0}.premium-lead{max-width:720px;margin:0 auto 24px;line-height:1.7}.premium-feature-grid,.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0;text-align:left}.premium-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.premium-feature-grid>div,.plan-card{padding:20px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:16px;background:rgba(255,255,255,.025)}.premium-feature-grid span{display:block;margin-top:6px;font-size:13px;line-height:1.5;opacity:.72}.premium-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.premium-footnote{font-size:12px;opacity:.6;line-height:1.55;margin-top:22px}.plan-card h3,.plan-card h2{margin:6px 0}.plan-price{font-size:24px;font-weight:700;margin-bottom:12px}.plan-label{font-size:11px;letter-spacing:.16em;opacity:.7}.plan-card ul{padding-left:18px;line-height:1.8;min-height:160px}.plan-card-premium{box-shadow:0 12px 34px rgba(0,0,0,.12)}.premium-toast{position:fixed;right:20px;bottom:20px;z-index:9999;max-width:360px;padding:16px 18px;border-radius:14px;border:1px solid var(--line,rgba(255,255,255,.12));background:var(--surface,#151515);box-shadow:0 16px 40px rgba(0,0,0,.28)}.premium-toast b,.premium-toast span{display:block}.premium-toast span{margin-top:5px;font-size:12px;opacity:.72}
@media (max-width:720px){.freemium-home{display:block}.freemium-home-actions{margin-top:18px}.premium-feature-grid,.pricing-grid{grid-template-columns:1fr}.premium-gate-card,.premium-page-card{padding:24px 18px}}

/* ================================================================
   FINOTECH WORLD POLISH — focused interaction layer
   Presentation-only. Does not alter accounting, scoring, mastery,
   adaptive selection, access control, or persistence semantics.
   ================================================================ */
.world-business-strip{
  display:grid;
  grid-template-columns:minmax(180px,1.1fr) minmax(0,2fr) auto auto;
  align-items:center;
  gap:12px;
  justify-content:stretch;
  padding:10px 12px;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(18,28,43,.96),rgba(12,18,29,.96));
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.world-business-brand{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}
.world-business-brand>div{min-width:0}
.world-business-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(217,164,65,.10);border:1px solid rgba(217,164,65,.20);font-size:19px;flex:0 0 38px}
.world-business-brand b{display:block;font:700 11px var(--font-mono);letter-spacing:.08em;color:var(--parchment);white-space:nowrap}
.world-business-brand small{display:block;margin-top:3px;font-size:10px;color:var(--parchment-dim)}
.world-business-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.world-business-metric{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 9px;border:1px solid rgba(255,255,255,.055);border-radius:11px;background:rgba(255,255,255,.025);text-align:left}
.world-business-metric small{display:block;color:var(--parchment-dim);font-size:9px;letter-spacing:.04em}
.world-business-metric b{display:block;color:var(--parchment);font:700 11px var(--font-mono);margin-top:2px;white-space:nowrap}
.metric-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;font-size:14px;flex:0 0 27px;background:rgba(255,255,255,.05)}
.metric-icon-stock{background:rgba(157,131,232,.10)}
.metric-icon-cash{background:rgba(85,201,138,.10)}
.metric-icon-payable{background:rgba(111,168,255,.10)}
.world-business-mission{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:11px;border:1px solid rgba(217,164,65,.18);background:rgba(217,164,65,.055);font:700 10px var(--font-mono);white-space:nowrap;color:var(--parchment-dim)}
.world-business-mission b{color:var(--entrust)}
.mission-dot{font-size:13px}
.world-business-strip .yard{padding-left:2px}

.world-stage-coach{
  display:flex;align-items:center;gap:11px;max-width:650px;margin:0 auto 13px;padding:10px 12px;text-align:left;
  border:1px solid rgba(217,164,65,.16);border-radius:13px;background:linear-gradient(90deg,rgba(217,164,65,.065),rgba(255,255,255,.02));
}
.world-stage-coach-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:0 0 34px;background:var(--entrust);color:var(--ink);font:800 12px var(--font-mono);box-shadow:0 0 18px rgba(217,164,65,.18)}
.world-stage-coach b{display:block;font-size:12px;line-height:1.35;color:var(--parchment)}
.world-stage-coach span{display:block;margin-top:2px;color:var(--parchment-dim);font-size:11px;line-height:1.45}

.world-learning-shell .adaptive-note{
  position:relative;overflow:hidden;border-color:rgba(78,180,255,.22);background:linear-gradient(100deg,rgba(30,117,180,.11),rgba(255,255,255,.025));box-shadow:0 8px 22px rgba(0,0,0,.12)
}
.world-learning-shell .adaptive-note::after{content:"";position:absolute;right:-35px;top:-45px;width:110px;height:110px;border-radius:50%;border:1px solid rgba(78,180,255,.16);box-shadow:0 0 0 18px rgba(78,180,255,.025),0 0 0 36px rgba(78,180,255,.018);pointer-events:none}
.world-learning-shell .adaptive-note span{color:#72c8ff;opacity:1}
.world-learning-shell .adaptive-note b{display:block;color:var(--parchment);font-weight:600}
.world-learning-shell .adaptive-note small{display:block;margin-top:4px;color:var(--parchment-dim);font-size:10px}

.world-learning-shell .oq-ask{max-width:760px;margin-left:auto;margin-right:auto}
.world-learning-shell .dropzone{min-height:78px;border-style:dashed;background:rgba(255,255,255,.018)}
.world-learning-shell .dropzone-hint{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.world-learning-shell .dropzone-hint b{color:var(--entrust)}
.world-learning-shell .dropzone-hint em{font-style:normal;color:var(--parchment-dim);font-size:11px}
.world-learning-shell .chip-tray{max-width:760px;margin:15px auto 0}
.world-learning-shell .chip{min-height:56px;padding:13px 17px;border-radius:14px;background:linear-gradient(145deg,#151e2c,#101721)}
.world-learning-shell .chip-copy{font-size:14px}
.world-learning-shell .chip .choice-icon{width:34px;height:34px;border-radius:10px}
.world-learning-shell .chip .choice-icon svg{width:20px;height:20px}
.world-learning-shell .chip:hover{transform:translateY(-4px);box-shadow:0 13px 28px rgba(0,0,0,.25),0 0 0 1px rgba(217,164,65,.08)}
.world-learning-shell .chip.answer-correct{border-color:var(--owe);background:var(--owe-dim);box-shadow:0 0 0 3px rgba(86,174,125,.08),0 16px 30px rgba(0,0,0,.18)}
.world-learning-shell .chip.answer-wrong{border-color:var(--danger);box-shadow:0 0 0 3px rgba(193,89,75,.08)}
.world-learning-shell .world-step-actions{margin-top:15px}

@media(max-width:1040px){
  .world-business-strip{grid-template-columns:1fr auto}
  .world-business-metrics{grid-column:1/-1;grid-row:2}
}
@media(max-width:640px){
  .world-business-strip{grid-template-columns:1fr;gap:9px;padding:10px}
  .world-business-metrics{grid-column:auto;grid-row:auto}
  .world-business-metric{padding:7px 6px}
  .world-business-metric b{font-size:10px}
  .world-business-mission{justify-content:center}
  .world-stage-coach{align-items:flex-start}
  .world-stage-coach-mark{width:31px;height:31px;flex-basis:31px}
  .world-learning-shell .chip{min-height:52px}
}

@media(prefers-reduced-motion:reduce){
  .world-business-strip,.world-stage-coach,.world-learning-shell .chip{transition:none}
}

/* FINOTECH progress HUD polish — compact, high-contrast, single-screen friendly. */
.progress-panel{
  position:relative;
  overflow:hidden;
  padding:12px;
  background:
    radial-gradient(circle at 12% 0%,rgba(217,164,65,.12),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(77,193,218,.08),transparent 40%),
    linear-gradient(155deg,#111b2a 0%,#0d1521 58%,#101827 100%);
  border-color:rgba(217,164,65,.18);
  box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
}
.progress-panel::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 28px rgba(74,180,220,.025)}
.progress-panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#d9a441}
.progress-live-dot{width:6px;height:6px;border-radius:50%;background:#53d5a0;box-shadow:0 0 10px rgba(83,213,160,.65)}
.progress-level-hero{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 8px 8px;border:1px solid rgba(217,164,65,.14);border-radius:12px;background:rgba(217,164,65,.045)}
.progress-metric-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.045);overflow:hidden;flex:0 0 31px}
.progress-metric-icon img,.progress-level-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.progress-level-icon{width:38px;height:38px;border-radius:11px;box-shadow:0 0 18px rgba(217,164,65,.16)}
.progress-level-copy small,.progress-metric small{display:block;font:700 8px var(--font-mono);letter-spacing:.12em;color:var(--parchment-dim)}
.progress-level-copy b{display:block;font-family:var(--font-display);font-size:24px;line-height:.95;color:#fff;margin:2px 0 3px}
.progress-level-copy span{display:block;font-size:8px;color:var(--parchment-dim);white-space:nowrap}
.progress-percent{font:700 10px var(--font-mono);color:#d9a441}
.progress-track{height:5px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.075);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.progress-track span{display:block;height:100%;border-radius:inherit;transition:width .45s var(--ease)}
.progress-xp-track{margin:7px 4px 8px}
.progress-xp-track span{background:linear-gradient(90deg,#d9a441,#f3c45d);box-shadow:0 0 10px rgba(217,164,65,.3)}
.progress-metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.progress-metric{display:flex;align-items:center;gap:7px;min-width:0;padding:7px;border:1px solid rgba(255,255,255,.055);border-radius:10px;background:rgba(255,255,255,.025)}
.progress-metric b{display:block;font-family:var(--font-display);font-size:16px;line-height:1.05;margin-top:1px;color:#f4f0e6}
.progress-score-metric .progress-metric-icon{box-shadow:0 0 12px rgba(217,164,65,.1)}
.progress-streak-metric .progress-metric-icon{box-shadow:0 0 12px rgba(245,113,45,.12)}
.progress-streak-metric.is-hot{border-color:rgba(245,113,45,.25);background:rgba(245,113,45,.045)}
.progress-accuracy-metric .progress-metric-icon{box-shadow:0 0 12px rgba(77,193,218,.12)}
.progress-mastery-metric{grid-column:1/-1;padding:8px;border:1px solid rgba(170,107,255,.18);border-radius:10px;background:linear-gradient(90deg,rgba(170,107,255,.06),rgba(77,193,218,.035))}
/* MASTERY row.
   The label used to collide with the percentage. `.progress-metric small` did
   not match here — this block is .progress-mastery-metric, a different class —
   so <small>MASTERY</small> fell back to the browser default size, pushed the
   stage name sideways, and the percentage overlapped it. Nothing in the row
   was allowed to shrink, so there was nowhere for the overflow to go. */
.progress-mastery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:5px}
.progress-mastery-head small{font:700 8px var(--font-mono);letter-spacing:.12em;color:var(--parchment-dim);flex:none}
.progress-mastery-head span{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1 1 auto;overflow:hidden}
/* The stage name is the only part that may be clipped — a long one ellipsises
   rather than pushing the percentage out of the row. */
.progress-mastery-head b{font-size:10px;color:#ddd4f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.progress-mastery-head strong{font:700 10px var(--font-mono);color:#c39cff;flex:none}
.progress-mastery-track{height:4px}
.progress-mastery-track span{background:linear-gradient(90deg,#a66cff,#57c8ff);box-shadow:0 0 10px rgba(166,108,255,.28)}

@media(max-width:1180px){
  .progress-level-copy b{font-size:21px}
  .progress-level-copy span{font-size:7px}
  .progress-metric{padding:6px}
}

/* =====================================================================
   FINOTECH FORENSICS — Error Hunter presentation layer
   Scoped redesign. Existing ErrorHunter state, scoring, answers and actions
   remain untouched; these rules only reshape the rendered investigation UI.
   ===================================================================== */
.forensics-shell{--f-bg:#060b11;--f-panel:#0b121b;--f-panel2:#101923;--f-line:#253342;--f-gold:#d9a441;--f-green:#82c88d;--f-red:#df5c4f;max-width:1560px;margin:0 auto;color:var(--parchment);font-family:var(--font-body);background:radial-gradient(circle at 50% 0,rgba(217,164,65,.055),transparent 30%),linear-gradient(180deg,#080e15,#060b11);border:1px solid rgba(130,154,176,.14);border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.forensics-identity{min-height:82px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(420px,2.2fr) minmax(245px,1fr);align-items:center;gap:22px;padding:10px 20px;border-bottom:1px solid var(--f-line);background:rgba(5,10,16,.74)}.forensics-brand{display:flex;align-items:center;gap:12px}.forensics-mark{width:54px;height:54px;display:grid;place-items:center;border:2px solid var(--f-gold);border-radius:50%;font-size:30px;color:var(--f-gold);box-shadow:0 0 0 5px rgba(217,164,65,.045)}.forensics-brand b{display:block;font-family:var(--font-display);font-size:1.22rem;letter-spacing:.22em;line-height:.9}.forensics-brand strong{display:block;font-family:var(--font-display);font-size:1.38rem;letter-spacing:.17em;line-height:1.05}.forensics-brand small{display:block;margin-top:4px;color:var(--f-gold);font-size:.62rem;letter-spacing:.34em}.forensics-tabs{display:flex;height:56px;border:1px solid rgba(133,151,168,.24);border-radius:12px;overflow:hidden}.forensics-tab{flex:1;border:0;border-right:1px solid rgba(133,151,168,.16);background:transparent;color:var(--parchment);font:600 .9rem var(--font-display);letter-spacing:.05em;cursor:pointer}.forensics-tab:last-child{border-right:0}.forensics-tab.active{color:var(--f-gold);box-shadow:inset 0 -2px var(--f-gold);background:linear-gradient(90deg,rgba(217,164,65,.07),transparent)}.forensics-agent{justify-self:end;display:flex;align-items:center;gap:10px}.forensics-agent-badge{width:52px;height:52px;border:1px solid var(--f-gold);border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#3c2c1c,#121820);font:700 1.4rem var(--font-display);color:#f0d9a5}.forensics-agent b,.forensics-agent small{display:block}.forensics-agent b{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forensics-agent small{margin-top:3px;color:var(--parchment-dim);font-size:.72rem}.forensics-agent>span{margin-left:5px;padding:12px 10px;border:2px solid var(--f-gold);border-left-color:rgba(217,164,65,.25);border-radius:50%;font-size:.72rem;color:var(--f-gold)}
.forensics-stats{display:grid;grid-template-columns:1.35fr repeat(4,1fr);min-height:72px;border-bottom:1px solid var(--f-line);background:#091019}.forensics-stats>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 22px;border-right:1px solid var(--f-line)}.forensics-stats>div:last-child{border-right:0}.forensics-stats p{margin:0;font-size:.67rem;letter-spacing:.08em}.forensics-stats b{grid-column:3;font-size:1.02rem;white-space:nowrap}.forensics-stats .stat-shield{grid-row:span 2;width:38px;height:38px;display:grid;place-items:center;position:relative;background:var(--f-gold);clip-path:polygon(50% 0,100% 20%,90% 80%,50% 100%,10% 80%,0 20%);color:var(--f-gold)}
/* The shield combines a 1px border with clip-path on a hexagonal outline.
   Browsers don't anti-alias a border at a clipped shape's acute points
   reliably — at the shield's pointed top and bottom vertices this painted
   as two disconnected dashes floating above/below the level number, worst
   at the 30px size used once the stats strip becomes scrollable. Standard
   fix: paint the shape solid in the border colour, then lay a second,
   1px-inset copy of the same shape on top in the strip's own background
   colour, so the "stroke" is two painted fills instead of a border that
   clip-path has to slice through. The level number sits in a stacking
   context above the inset layer via z-index, so it stays readable. */
.forensics-stats .stat-shield::before{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:#091019;
  clip-path:polygon(50% 0,100% 20%,90% 80%,50% 100%,10% 80%,0 20%);
}.forensics-stats>div:first-child{grid-template-columns:auto 1fr auto}.forensics-meter{grid-column:2/4;height:7px;border-radius:99px;background:#25313c;overflow:hidden}.forensics-meter i{display:block;height:100%;background:linear-gradient(90deg,#e4aa43,#f3c76f);border-radius:inherit}.forensics-stats .positive{color:var(--f-green)}.forensics-stats .gold{color:var(--f-gold);font-size:.86rem}
.forensics-layout{display:grid;grid-template-columns:310px minmax(0,1fr) 350px;gap:12px;padding:12px}.forensics-panel{border:1px solid var(--f-line);border-radius:12px;background:linear-gradient(145deg,rgba(14,22,32,.96),rgba(8,15,23,.98));box-shadow:inset 0 1px rgba(255,255,255,.018)}.forensics-panel h3,.forensics-panel h2{font-family:var(--font-display);letter-spacing:.08em;color:#e4c47e;display:flex;align-items:center;gap:8px}.forensics-left,.forensics-right,.forensics-main{display:grid;align-content:start;gap:12px}.forensic-archive{padding:14px}.forensic-archive h3,.intelligence-card h3,.trail-card h3{margin:0 0 14px;font-size:.86rem}.forensic-archive-note{margin:-8px 0 12px;color:var(--parchment-dim);font-size:.7rem;line-height:1.4}.archive-chapter{padding:13px;border:1px solid rgba(116,139,158,.23);border-radius:10px;background:rgba(255,255,255,.015)}.archive-chapter>b,.archive-chapter>small{display:block}.archive-chapter>b{font-size:.78rem;letter-spacing:.08em}.archive-chapter>small,.archive-locked small{margin:4px 0 8px;color:var(--parchment-dim);font-size:.72rem}.archive-case{width:100%;display:flex;align-items:center;gap:10px;padding:11px 8px;border:0;border-bottom:1px solid rgba(117,137,153,.16);background:transparent;color:var(--parchment);text-align:left;font-size:.76rem}.archive-case span{font-family:var(--font-mono);color:var(--parchment-dim)}.archive-case em{margin-left:auto;font-style:normal}.archive-case.current{margin:3px 0;border:1px solid rgba(120,198,141,.55);border-radius:7px;background:rgba(75,138,73,.15);color:#e7eee4}.archive-case.current em{color:var(--f-green);font-size:1.1rem}.archive-case.is-locked{opacity:.72}.archive-locked{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:12px;border:1px solid rgba(116,139,158,.2);border-radius:9px}.archive-locked-text{min-width:0;flex:1 1 auto}.archive-locked b,.archive-locked small{display:block}.archive-locked b{font-size:.75rem}.archive-locked em{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(116,139,158,.18);color:var(--parchment-dim);font-style:normal}.archive-locked em .fi-icon{width:16px;height:16px}.archive-case-list{max-height:420px;overflow-y:auto;margin-top:2px}.archive-locked.is-complete{border-color:rgba(120,198,141,.35);background:rgba(75,138,73,.08)}.archive-locked.is-complete em{color:var(--f-green);background:rgba(75,138,73,.16);border-color:rgba(120,198,141,.4)}.archive-chapter+.archive-chapter,.archive-chapter+.archive-locked,.archive-locked+.archive-chapter,.archive-locked+.archive-locked{margin-top:10px}
.case-brief{padding:15px 22px 18px}.case-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--parchment-dim);font-size:.74rem;letter-spacing:.06em}.case-meta .danger-dot{color:#ed7464}.case-meta em{padding:6px 10px;border:1px solid rgba(92,176,120,.26);border-radius:6px;color:#9fcd9d;background:rgba(70,141,87,.08);font-style:normal;font-size:.65rem}.case-heading{display:grid;grid-template-columns:1fr 310px;gap:24px;align-items:center}.case-heading h1{margin:15px 0 5px;font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.65rem);letter-spacing:.08em;line-height:1.05}.case-heading p{margin:0;color:#c3c1b9}.mission-note{position:relative;padding:17px 20px;border:1px solid rgba(167,125,65,.34);background:linear-gradient(135deg,#d9bd85,#b99a67);color:#292117;clip-path:polygon(2% 2%,100% 0,97% 96%,3% 100%,0 15%);box-shadow:8px 8px 20px rgba(0,0,0,.22)}.mission-note b,.mission-note span{display:block}.mission-note b{font-family:var(--font-display);letter-spacing:.08em}.mission-note span{margin-top:7px;font-size:.77rem;line-height:1.45}.incident-report{display:grid;grid-template-columns:1fr 2.7fr;gap:16px;margin-top:16px;padding:13px 0 0;border-top:1px solid rgba(116,139,158,.18)}.incident-report b{font-family:var(--font-display);color:#e4c47e;letter-spacing:.08em;display:flex;align-items:center;gap:6px}.incident-report p{margin:0;color:var(--parchment-dim);font-size:.78rem;line-height:1.55}
.evidence-board{padding:13px}.evidence-board h2,.investigation-heading h2{margin:0;font-size:1rem}.evidence-board h2 small{margin-left:8px;color:var(--parchment-dim);font:400 .68rem var(--font-body);letter-spacing:0}.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.evidence-card{position:relative;display:grid;grid-template-columns:48px 1fr;gap:10px;min-height:120px;padding:13px;border:1px solid #344250;border-radius:9px;background:linear-gradient(145deg,#17222d,#0d161f);color:var(--parchment);text-align:left;transition:.2s var(--ease)}.evidence-card.focus{border-color:rgba(217,164,65,.7);box-shadow:0 0 0 1px rgba(217,164,65,.15),0 0 24px rgba(217,164,65,.08)}.evidence-icon{display:grid;place-items:start center;font-size:2rem;color:#ded7c8}.evidence-card small,.evidence-card b,.evidence-card p,.evidence-card em{display:block}.evidence-card small{font-size:.57rem;letter-spacing:.08em;color:var(--parchment-dim)}.evidence-card b{margin-top:7px;font-size:.72rem}.evidence-card p{margin:7px 0 0;font-size:.68rem;line-height:1.4;color:#cbc8c0}.evidence-card em{margin-top:8px;color:var(--f-green);font-size:.62rem;font-style:normal}
.investigation-zone{padding:14px}.investigation-heading p{margin:6px 0 10px;color:var(--parchment-dim);font-size:.74rem}.forensic-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.forensic-answer{min-height:84px;display:grid;grid-template-columns:44px 1fr;grid-template-rows:1fr auto;align-items:center;gap:3px 10px;padding:13px 15px!important;border:1px solid #42505c!important;border-radius:10px!important;background:linear-gradient(145deg,#16202a,#0d151d)!important;color:var(--parchment)!important;text-align:left!important;transition:.18s var(--ease)!important}.forensic-answer:hover:not(:disabled){transform:translateY(-2px);border-color:var(--f-gold)!important;box-shadow:0 8px 22px rgba(0,0,0,.2)}.forensic-answer.suspect{border-color:rgba(213,85,70,.8)!important;background:linear-gradient(145deg,rgba(93,30,27,.26),#151215)!important}.forensic-answer-letter{grid-row:span 2;width:40px;height:40px;display:grid!important;place-items:center;border:2px solid currentColor;border-radius:50%;color:#d8a74d;font:700 1rem var(--font-display)}.forensic-answer.suspect .forensic-answer-letter{color:var(--f-red)}.forensic-answer b{font-size:.86rem}.forensic-answer small{padding:4px 7px;border:1px solid rgba(132,155,172,.18);border-radius:4px;color:var(--parchment-dim);font-size:.55rem;letter-spacing:.08em}.all-clear{grid-column:1/-1}.forensic-feedback{margin-top:10px;padding:0}.forensic-feedback:not(:empty){padding:11px 13px;border:1px solid rgba(217,164,65,.24);border-radius:8px;background:rgba(217,164,65,.045)}.forensics-actions{display:flex;justify-content:center;gap:10px;margin-top:13px}.forensics-actions .btn{min-width:185px}
.intelligence-card{padding:14px}.intelligence-card>div{position:relative;padding:15px;border:1px solid rgba(119,140,156,.28);border-radius:10px;background:rgba(255,255,255,.015)}.intelligence-card>div>b{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.08em}.cash-stack{position:absolute;right:18px;top:14px;font-size:2.4rem;color:#c7c69d;transform:rotate(-9deg)}.intelligence-card dl{display:grid;grid-template-columns:1fr auto;gap:7px;margin:12px 0;font-size:.72rem}.intelligence-card dt{color:var(--parchment-dim)}.intelligence-card dd{margin:0}.intelligence-card .positive{color:var(--f-green)}.intelligence-card p{margin:10px 0 0;padding-top:9px;border-top:1px solid rgba(120,140,157,.16);font-size:.67rem;color:#c9c5b9}.trail-card{padding:14px}.trail-card ol{margin:0;padding:0;list-style:none}.trail-card li{position:relative;padding:0 0 12px 34px;color:var(--parchment-dim);font-size:.76rem}.trail-card li:last-child{padding-bottom:0}.trail-card li i{position:absolute;left:5px;top:2px;width:10px;height:10px;border:1px solid #7d8a94;border-radius:50%;background:#16202a}.trail-card li:not(:last-child):after{content:"";position:absolute;left:9px;top:12px;width:1px;height:15px;background:#52606a}.trail-card li.active{color:#e6c276}.trail-card li.active i{background:var(--f-gold);border-color:#f4c76c;box-shadow:0 0 12px rgba(217,164,65,.4)}
.forensics-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--f-line);color:var(--parchment-dim);font-size:.68rem}.forensics-footer span{display:flex;align-items:center;gap:9px}.forensics-footer .btn{padding:7px 12px;color:#e3c37e}
.eh-complete-shell{padding:0}.eh-complete-shell .forensics-identity{display:flex;justify-content:space-between}.forensics-case-tag{color:var(--f-gold);font-size:.68rem;letter-spacing:.12em}.forensics-complete-card{max-width:850px;margin:48px auto;padding:38px;text-align:center;border:1px solid rgba(217,164,65,.42);border-radius:16px;background:radial-gradient(circle at 50% 0,rgba(217,164,65,.11),transparent 35%),linear-gradient(145deg,#111a23,#0a1017);box-shadow:0 20px 70px rgba(0,0,0,.3)}.forensics-complete-seal{width:82px;height:82px;margin:0 auto 15px;display:grid;place-items:center;border:2px solid var(--f-green);border-radius:50%;color:var(--f-green);font-size:2.2rem;box-shadow:0 0 0 9px rgba(130,200,141,.06)}.forensics-kicker{color:var(--f-gold);font-size:.68rem;letter-spacing:.18em}.forensics-complete-card h2{margin:8px 0;font-family:var(--font-display);letter-spacing:.1em}.forensics-complete-card>p{max-width:590px;margin:0 auto;color:var(--parchment-dim);line-height:1.6}.forensics-result-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:25px 0;border:1px solid rgba(120,140,157,.22);border-radius:10px;overflow:hidden}.forensics-result-grid>div{padding:15px;border-right:1px solid rgba(120,140,157,.18)}.forensics-result-grid>div:last-child{border:0}.forensics-result-grid span,.forensics-result-grid b{display:block}.forensics-result-grid span{font-size:.58rem;color:var(--parchment-dim);letter-spacing:.08em}.forensics-result-grid b{margin-top:6px;color:#e6c77e}.forensics-result-actions{display:flex;justify-content:center;gap:10px}
@media(max-width:1180px){.forensics-layout{grid-template-columns:250px minmax(0,1fr)}.forensics-right{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.forensics-identity{grid-template-columns:1fr 1.5fr auto}.forensics-brand strong{font-size:1.1rem}.forensics-agent b{font-size:.75rem}.case-heading{grid-template-columns:1fr 270px}}
@media(max-width:900px){.forensics-shell{border-radius:0}.forensics-identity{grid-template-columns:1fr auto}.forensics-tabs{grid-column:1/-1;grid-row:2;height:48px}.forensics-agent{grid-column:2}.forensics-layout{grid-template-columns:1fr}.forensics-left{grid-template-columns:1fr}.forensics-right{grid-column:auto;grid-template-columns:1fr 1fr}.forensics-stats{grid-template-columns:repeat(5,1fr);overflow:auto}.forensics-stats>div{min-width:150px;padding:10px}.case-heading{grid-template-columns:1fr}.mission-note{max-width:390px}.forensic-answer-grid{grid-template-columns:1fr}.all-clear{grid-column:auto}}
@media(max-width:620px){.forensics-identity{padding:10px;grid-template-columns:1fr auto}.forensics-brand b{font-size:.88rem}.forensics-brand strong{font-size:1rem}.forensics-brand small{font-size:.48rem}.forensics-mark{width:43px;height:43px;font-size:24px}.forensics-agent-badge{width:42px;height:42px}.forensics-agent div:not(.forensics-agent-badge){display:none}.forensics-tabs{width:100%;overflow:auto}.forensics-tab{min-width:95px}.forensics-layout{padding:8px}.forensics-left,.forensics-right{grid-template-columns:1fr}.forensic-archive{grid-row:auto}.forensics-right{grid-column:auto}.forensics-stats{display:flex;overflow-x:auto}.forensics-stats>div{flex:0 0 145px}.case-brief{padding:14px}.case-meta{flex-wrap:wrap}.case-meta b{order:3}.case-heading h1{font-size:1.8rem}.incident-report{grid-template-columns:1fr}.evidence-grid{grid-template-columns:1fr}.evidence-card{min-height:120px}.forensics-actions,.forensics-result-actions{flex-direction:column}.forensics-actions .btn{width:100%}.forensics-footer{align-items:flex-start;flex-direction:column}.forensics-result-grid{grid-template-columns:1fr 1fr}.forensics-result-grid>div:nth-child(2){border-right:0}.forensics-result-grid>div:nth-child(-n+2){border-bottom:1px solid rgba(120,140,157,.18)}.forensics-complete-card{margin:18px 10px;padding:24px 16px}.eh-complete-shell .forensics-identity{display:block}.forensics-case-tag{display:block;margin-top:10px}}

/* =====================================================================
   ERROR HUNTER POLISH PASS — reference-aligned, clue-safe presentation
   Presentation only. ErrorHunter scoring/state remain untouched.
   ===================================================================== */
.forensics-shell{
  max-width:1600px;
  border-radius:14px;
  background:
    radial-gradient(circle at 50% -8%,rgba(217,164,65,.075),transparent 28%),
    radial-gradient(circle at 12% 40%,rgba(55,104,143,.045),transparent 30%),
    linear-gradient(180deg,#050a10 0%,#071019 100%);
}
.forensics-identity{
  min-height:74px;
  grid-template-columns:minmax(270px,1.05fr) minmax(430px,2fr) minmax(260px,1fr);
  padding:8px 18px;
}
.forensics-brand{gap:10px}
.forensics-mark{
  width:48px;height:48px;font-size:26px;
  border-color:#c99432;
  background:radial-gradient(circle,rgba(217,164,65,.12),transparent 68%);
}
.forensics-tabs{height:52px;background:rgba(4,9,14,.45)}
.forensics-tab{font-size:.84rem}
.forensics-agent-badge{width:48px;height:48px}
.forensics-stats{min-height:68px}
.forensics-stats>div{padding:9px 18px}
.forensics-layout{grid-template-columns:300px minmax(0,1fr) 330px;gap:10px;padding:10px}
.forensics-left,.forensics-right,.forensics-main{gap:10px}
.forensics-panel{border-radius:10px}
.forensic-archive,.intelligence-card,.trail-card{padding:12px}
.archive-case{padding:9px 7px;font-size:.73rem}
.archive-locked{padding:10px;margin-top:8px}
.case-brief{padding:14px 18px 15px}
.case-heading{grid-template-columns:minmax(0,1fr) 290px;gap:18px}
.case-heading h1{font-size:clamp(1.65rem,2.6vw,2.35rem);margin:12px 0 5px}
.mission-note{padding:14px 17px}
.incident-report{margin-top:12px;padding-top:11px}
.evidence-board{padding:11px}
.evidence-grid{gap:8px;margin-top:10px}
.evidence-card{min-height:132px;padding:11px}
.investigation-zone{padding:12px}
.investigation-heading p{margin:5px 0 9px}
.forensic-answer{min-height:76px;padding:11px 13px!important}
.forensic-answer small{
  color:#9ea8b1;
  background:rgba(255,255,255,.02);
}
/* A selected answer is only styled after the learner clicks it; never pre-mark the correct answer. */
.forensic-answer.suspect{border-color:#d9a441!important;background:linear-gradient(145deg,rgba(217,164,65,.12),#101820)!important}
.forensic-answer.suspect .forensic-answer-letter{color:#f0c15c}
.intelligence-card>div{padding:13px}
.intelligence-card>div>b{font-size:1rem}
.intelligence-card dl{gap:6px;margin:10px 0;font-size:.7rem}
.intelligence-card .neutral{color:#d7d2c8}
.intelligence-card p{font-size:.64rem;line-height:1.45}
.trail-card li{padding-bottom:10px;font-size:.72rem}
.forensics-actions{margin-top:11px}
.forensics-actions .btn{min-width:0;flex:1}
.forensics-footer{padding:9px 16px}
.forensics-footer-status{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;color:#9a8560}

@media(max-width:1180px){
  .forensics-layout{grid-template-columns:260px minmax(0,1fr)}
  .forensics-right{grid-column:1/-1;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .forensics-identity{grid-template-columns:1fr auto}
  .forensics-layout{grid-template-columns:1fr}
  .forensics-left{grid-template-columns:1fr}
  .forensics-right{grid-column:auto;grid-template-columns:1fr 1fr}
  .forensics-stats{grid-template-columns:repeat(5,minmax(140px,1fr));overflow-x:auto;position:relative}
  .forensics-stats>div{min-width:140px}
}
@media(max-width:620px){
  .forensics-shell{border-radius:0}
  .forensics-identity{padding:8px;grid-template-columns:1fr auto}
  .forensics-tabs{grid-column:1/-1;grid-row:2;height:44px}
  .forensics-agent div:not(.forensics-agent-badge){display:none}
  .forensics-layout{padding:7px}
  .forensics-left,.forensics-right{grid-template-columns:1fr}
  .forensics-stats{display:flex;overflow-x:auto;position:relative}
  .forensics-stats>div{flex:0 0 140px}
  .case-heading{grid-template-columns:1fr}
  .mission-note{max-width:none}
  .evidence-grid{grid-template-columns:1fr}
  .forensic-answer-grid{grid-template-columns:1fr}
  .forensics-actions{flex-direction:column}
  .forensics-actions .btn{width:100%}
  .forensics-footer{flex-direction:column;align-items:flex-start}
}

/* Shared line-icon system for Journal Practice + Error Hunter */
.fi-icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0}

/* The investigator stats strip (level/streak/cases solved/accuracy/rating)
   already scrolls horizontally below 900px — that's the right call, since
   shrinking five metrics to fit one row makes the numbers unreadable. The
   only gap was that a plain overflow:auto row gives no visual sign that
   there's more to see, so the last metric reads as clipped rather than
   "swipe for more". A quiet edge fade makes the existing scroll behaviour
   legible without changing its structure or its data. */
@media(max-width:900px){
  .forensics-stats::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:28px;
    background:linear-gradient(90deg,transparent,#091019);
    pointer-events:none;
  }
}


/* =====================================================================
   FINOTECH FORENSICS — Journal Practice fit alignment
   Presentation-only override: keeps Error Hunter behavior/markup intact
   while matching the compact three-column footprint used by Journal
   Practice (jp3).
   ===================================================================== */
.forensics-shell{
  max-width:1540px;
}
.forensics-layout{
  grid-template-columns:minmax(220px,250px) minmax(520px,1fr) minmax(270px,310px);
  gap:clamp(10px,1vw,16px);
  padding:clamp(8px,1.1vh,18px) clamp(10px,1.3vw,20px) 18px;
}
.forensics-left,.forensics-right,.forensics-main{
  gap:10px;
}
.forensic-archive,
.case-brief,
.evidence-board,
.investigation-zone,
.intelligence-card,
.trail-card{
  border-radius:14px;
}
.forensic-archive{padding:12px}
.case-brief{padding:13px 18px 15px}
.case-heading{grid-template-columns:minmax(0,1fr) minmax(250px,290px);gap:16px}
.evidence-board{padding:12px}
.evidence-grid{gap:8px}
.evidence-card{min-height:104px;padding:11px}
.investigation-zone{padding:12px}
.forensic-answer{min-height:76px;padding:11px 13px!important}
.intelligence-card,.trail-card{padding:12px}
.forensics-footer{padding:9px 16px}

@media(max-width:1180px){
  .forensics-layout{grid-template-columns:250px minmax(0,1fr)}
}

/* =====================================================================
   ERROR HUNTER — FINAL DENSITY POLISH
   Presentation-only pass. ErrorHunter state, scoring, choices and
   navigation are untouched by every rule below; this block only trims
   padding, min-heights and font sizes so the screen sits at the same
   visual weight and breathing room as Journal Practice, and stops the
   left/right panels from being stretched taller than their own content
   (which was the main source of dead space and of the "too large"
   feeling reported for this screen).
   ===================================================================== */

/* Columns pack to their own content instead of stretching to match
   whichever column is tallest — this alone removes ~100-270px of empty
   space that was previously sitting inside the archive and sidebar
   panels for no reason. */
.forensics-layout{
  align-items:start;
  gap:clamp(8px,0.9vw,12px);
  padding:clamp(6px,0.9vh,14px) clamp(8px,1.1vw,16px) 14px;
}
.forensics-left,.forensics-right,.forensics-main{gap:8px}

/* Top identity bar: brand + tabs + agent, trimmed to a slimmer strip. */
.forensics-identity{min-height:54px;padding:5px 16px}
.forensics-mark{width:38px;height:38px;font-size:20px}
.forensics-tabs{height:38px}
.forensics-tab{font-size:.78rem}
.forensics-agent-badge{width:38px;height:38px;font-size:1.15rem}

/* Stats strip: same information, much less height. */
.forensics-stats{min-height:44px}
.forensics-stats>div{padding:5px 14px}
.forensics-stats .stat-shield{width:30px;height:30px}
.forensics-stats b{font-size:.92rem}

/* Case archive list: tighter rows so the list reads as a compact index
   rather than the dominant element on the screen. */
.forensic-archive{padding:9px}
.archive-chapter{padding:9px}
.archive-chapter>b{font-size:.74rem}
.archive-chapter>small{margin:3px 0 6px}
.archive-case{padding:6px 6px;font-size:.69rem}
.archive-locked{padding:7px;margin-top:5px}
.archive-locked em{width:24px;height:24px}
.archive-locked em .fi-icon{width:14px;height:14px}

/* Case brief: smaller heading, tighter mission note and incident row. */
.case-brief{padding:8px 16px 9px}
.case-heading h1{font-size:clamp(1.2rem,1.7vw,1.55rem);margin:5px 0 2px}
.mission-note{padding:7px 12px}
.mission-note span{margin-top:4px;font-size:.7rem}
.incident-report{margin-top:5px;padding-top:5px}
.incident-report p{font-size:.73rem;line-height:1.48}

/* Evidence board: cards no longer taller than the content they hold. */
.evidence-board{padding:7px}
.evidence-grid{gap:6px;margin-top:5px}
.evidence-card{min-height:64px;padding:7px}
.evidence-icon{font-size:1.3rem}
.evidence-card b{margin-top:4px;font-size:.7rem}
.evidence-card p{margin:4px 0 0;font-size:.65rem}

/* Investigation zone: the actual workflow stays the focal point, just
   without oversized buttons. The feedback slot keeps a modest reserved
   height (rather than the original 72px) so the Submit button still
   doesn't jump when feedback text appears after an answer. */
.investigation-zone{padding:6px}
.investigation-heading p{margin:2px 0 4px}
.forensic-answer{min-height:44px;padding:6px 12px!important;grid-template-columns:32px 1fr}
.forensic-answer-letter{width:28px;height:28px;font-size:.8rem}
.eh-feedback{min-height:40px;margin:6px auto}
.forensics-actions{margin-top:5px}

/* Right sidebar cards: same density as Journal Practice's status cards. */
.intelligence-card,.trail-card{padding:9px}
.intelligence-card>div{padding:10px}
.intelligence-card>div>b{font-size:.9rem}
.intelligence-card dl{gap:5px;margin:7px 0;font-size:.68rem}
.intelligence-card p{margin:7px 0 0;padding-top:6px;font-size:.63rem}
.trail-card li{padding-bottom:7px;font-size:.7rem}

.forensics-footer{padding:6px 16px}

@media(max-width:620px){
  .forensics-tabs{height:40px}
}


/* ================================================================
   STEP 11A — PREMIUM & CHECKOUT POLISH
   Presentation layer only. Payment verification remains server-authoritative.
   ================================================================ */
.premium-page-v2{max-width:1120px;padding:0;overflow:hidden;background:linear-gradient(145deg,rgba(20,30,45,.94),rgba(12,18,29,.98));border-color:rgba(255,255,255,.10)}
.premium-hero{padding:44px 34px 30px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(217,164,65,.16),transparent 58%)}
.premium-badge,.plan-kicker,.checkout-eyebrow{font:700 10px var(--font-mono);letter-spacing:.16em;color:var(--entrust);text-transform:uppercase}
.premium-hero h2{max-width:760px;margin:10px auto 10px;font-size:clamp(28px,4vw,46px);line-height:1.06}.premium-hero p{max-width:700px;margin:0 auto;color:var(--parchment-dim);line-height:1.7}
.premium-pricing-grid{align-items:stretch;gap:18px;padding:0 34px 26px;margin:0}.plan-card{position:relative;display:flex;flex-direction:column;padding:26px;background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.10);text-align:left}.plan-card h3,.plan-card h2{font-size:28px;margin:7px 0}.plan-card-free{background:rgba(255,255,255,.018)}.premium-featured{border-color:rgba(217,164,65,.45);background:linear-gradient(145deg,rgba(217,164,65,.12),rgba(255,255,255,.025));box-shadow:0 18px 50px rgba(0,0,0,.22)}
.premium-ribbon{position:absolute;right:18px;top:18px;padding:6px 9px;border:1px solid rgba(217,164,65,.30);border-radius:999px;background:rgba(217,164,65,.12);font:700 9px var(--font-mono);letter-spacing:.08em;color:var(--entrust)}
.plan-price{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:10px 0 5px}.plan-subtitle{margin:0 0 14px;color:var(--parchment-dim);font-size:13px;line-height:1.55}.plan-card ul{flex:1;min-height:0;margin:8px 0 22px;padding-left:20px;line-height:1.9}.plan-card li::marker{color:var(--entrust)}.plan-note{margin:-14px 0 16px;font-size:.72rem;line-height:1.5;color:var(--parchment-dim)}
.plan-action{width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800}.payment-choice-buttons{display:grid;gap:10px}.payment-choice-buttons .btn{justify-content:space-between;padding-inline:16px}.payment-choice-buttons b{font-size:17px}.payment-choice-icon{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.10);font-weight:900}.payment-paypal .payment-choice-icon{background:#fff;color:#003087}.payment-choice-paypal{padding:2px;overflow:hidden;background:#fff}.payment-choice-paypal img{width:100%;height:100%;object-fit:contain;display:block}.payment-choice-mpesa{padding:2px;overflow:hidden;background:transparent}.payment-choice-mpesa img{width:100%;height:100%;object-fit:contain;display:block}.payment-mpesa{border-color:rgba(255,255,255,.18)}.payment-mpesa:hover{border-color:rgba(22,146,70,.65);box-shadow:0 8px 24px rgba(22,146,70,.12)}
.premium-active{opacity:1!important}.premium-trust-row{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:0 30px 24px;color:var(--parchment-dim);font-size:11px}.mpesa-trust,.paypal-trust{display:inline-flex;align-items:center;gap:6px}.mpesa-trust img,.paypal-trust img{width:18px;height:18px;object-fit:contain}.premium-back-button{margin:0 0 30px}.premium-footnote{max-width:680px;margin:15px auto 0;text-align:center}
.checkout-backdrop{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:18px;background:rgba(3,7,12,.72);backdrop-filter:blur(9px)}
.checkout-modal{position:relative;width:min(100%,470px);padding:30px;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:linear-gradient(145deg,#172232,#0d141f);box-shadow:0 30px 90px rgba(0,0,0,.5);color:var(--parchment);animation:checkoutIn .22s ease both}.checkout-close{position:absolute;right:16px;top:14px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--parchment);font-size:23px;cursor:pointer}.checkout-brand{display:flex;align-items:center;justify-content:center;gap:8px;font:800 11px var(--font-mono);letter-spacing:.13em}.checkout-brand-icon{display:block;width:28px;height:28px;object-fit:contain}.checkout-method-brand{display:flex;justify-content:center;align-items:center;width:100%;margin:22px auto 8px}.mpesa-checkout-logo{display:block;width:min(210px,68vw);height:auto;max-height:92px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.20))}.checkout-modal h2{text-align:center;margin:8px 0 10px}.checkout-eyebrow{text-align:center}.checkout-copy{text-align:center;color:var(--parchment-dim);font-size:13px;line-height:1.65;margin:0 auto 18px}.checkout-total{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;margin:0 0 18px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.035)}.checkout-total span{font-size:12px;color:var(--parchment-dim)}.checkout-total strong{font-size:22px;color:var(--entrust)}.checkout-form{display:grid;gap:8px}.checkout-form label{font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.phone-field{display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#091019;transition:border-color .2s,box-shadow .2s}.phone-field:focus-within{border-color:var(--entrust);box-shadow:0 0 0 4px rgba(217,164,65,.12)}.phone-field span{font-weight:800;color:var(--entrust);white-space:nowrap}.phone-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--parchment);font:700 16px var(--font-body);padding:16px 0}.phone-field input::placeholder{color:rgba(255,255,255,.30)}.checkout-form small{color:var(--parchment-dim);font-size:11px;line-height:1.5}.checkout-submit{margin-top:12px;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding-inline:18px}.checkout-security{display:flex;gap:7px;align-items:flex-start;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;line-height:1.55;color:var(--parchment-dim)}
@keyframes checkoutIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:720px){.premium-page{padding:14px 8px}.premium-hero{padding:34px 20px 24px}.premium-pricing-grid{grid-template-columns:1fr;padding:0 14px 18px}.premium-trust-row{display:grid;gap:8px;padding:0 20px 20px;text-align:center}.checkout-backdrop{align-items:end;padding:0}.checkout-modal{width:100%;border-radius:26px 26px 0 0;padding:28px 20px calc(24px + env(safe-area-inset-bottom))}.premium-back-button{margin-bottom:22px}}