/* WriteCraft Academy -- web app
   Palette drawn straight from the WriteCraft Academy mark: black-ink linework, a
   metallic-gold wash, and a violet/indigo/lilac ink-splatter family -- an
   editorial, publishing-house feel with real jewel-tone color, not a flat
   generic SaaS purple. Toned down for a working tool: coaches and students
   spend real time in this, not three days. */

:root{
  --white:#FFFFFF; --black:#14101F;
  --paper:#F7F4EC; --card:#FFFFFF; --ink:#26213B; --ink-soft:#6A6480; --ink-faint:#8E88A3;
  --line:#E7E0D2; --line-soft:#F0EBDF;
  --accent:#8B2FD9; --accent-soft:#F1E7FB; --accent-ink:#3B1F7A;
  --gold:#D4A017; --gold-deep:#A87A0E; --gold-soft:#FBF1D6; --gold-ink:#5C4415;
  --gold-metal:linear-gradient(135deg,#FCEFAF 0%, #E6BB2E 30%, #B8860B 70%, #F4D976 100%);
  --indigo:#3B1F7A; --mystic:#8B2FD9; --lilac:#D9C2F5; --lilac-deep:#B892E8;
  --indigo-soft:#E7E1F5;
  --teal:#0E8074; --teal-soft:#DBF2EE;
  --coral:#C24A1E; --coral-soft:#FAE2D6;
  --r-lg:22px;
  --header-bg:#FFFFFF;
  --ok:#1E8E5A; --ok-soft:#E4F5EC;
  --warn:#B4600A; --warn-soft:#FBF0DF;
  --bad:#C23838; --bad-soft:#FCE9E9;
  --info:#6B2FB8; --info-soft:#F1E7FB;
  --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(38,33,59,.06), 0 6px 18px rgba(38,33,59,.06);
  --glow-gold:0 0 0 1px rgba(212,160,23,.4), 0 4px 18px -4px rgba(212,160,23,.55);
  --glow-mystic:0 4px 22px -6px rgba(139,47,217,.45);
  --gap:16px;
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --serif:var(--font-display);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  font-family:"Segoe UI", "Trebuchet MS", system-ui, -apple-system, sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.5; font-size:15px;
}
h1,h2,h3,h4{margin:0 0 6px; line-height:1.25; font-family:var(--font-display); font-weight:700;}
h1{font-size:1.7rem;} h2{font-size:1.34rem;} h3{font-size:1.1rem; font-weight:700;} h4{font-size:.95rem; font-family:inherit; font-weight:700;}
p{margin:0 0 10px;}
a{color:var(--mystic); text-decoration:none;}
a:hover{text-decoration:underline; color:var(--indigo);}
button, input, select, textarea{font-family:inherit; font-size:inherit; color:inherit;}
ul{margin:0; padding:0; list-style:none;}
.muted{color:var(--ink-soft);}
.faint{color:var(--ink-faint); font-size:.85rem;}
.mono{font-family:"Cascadia Code", Consolas, monospace; font-size:.9em;}

/* ---------- layout shell ---------- */
header#topbar{
  position:sticky; top:0; z-index:40; background:var(--header-bg); color:var(--ink);
  padding:8px 20px 10px; border-bottom:4px solid; border-image:linear-gradient(90deg, var(--gold), var(--mystic), var(--lilac-deep)) 1;
  box-shadow:0 1px 0 rgba(20,16,31,.04), 0 4px 14px -6px rgba(20,16,31,.15);
}
.hd-row{display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer;}
.brand-icon{height:44px; width:auto; display:block; flex-shrink:0;}
.brand-text{line-height:1.05;}
.brand-name{
  font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:.02em;
  color:var(--ink);
}
.brand-name .brand-gold, .brand-gold{color:var(--gold-deep);}
/* Always its own line, not a fragile inline-wrap that depends on how much
   room the rest of the header row happens to have left (role badge, user
   name, sign-out button all share that row) -- a controlled two-line
   lockup reads as intentional; an unpredictable wrap doesn't. */
.brand-name .brand-suffix{display:block; font-size:.56em; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; line-height:1.1;}
.hd-user{display:flex; align-items:center; gap:10px; font-size:.88rem;}
.hd-role{background:var(--lilac); color:var(--indigo); border:1px solid var(--lilac-deep); border-radius:999px; padding:2px 10px; font-weight:700; text-transform:uppercase; font-size:.7rem; letter-spacing:.05em;}
.hd-user button{background:var(--card); border:1.5px solid var(--line); color:var(--ink); padding:5px 12px; border-radius:var(--r-sm); white-space:nowrap;}
.hd-user button:hover{background:var(--line-soft);}
@media(max-width:480px){
  .brand-icon{height:32px;}
  .brand-name{font-size:1.3rem;}
  .brand-name .brand-suffix{display:none;}
  .hd-user{font-size:.8rem; gap:7px;}
  .hd-user button{padding:5px 9px;}
}

main#app{max-width:1180px; margin:0 auto; padding:20px; min-height:70vh;}
.loading{padding:60px; text-align:center; color:var(--ink-soft);}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:11px 18px; border-radius:var(--r-sm); box-shadow:var(--shadow); z-index:100; max-width:520px; font-size:.9rem;}
.toast.ok{background:var(--ok);} .toast.bad{background:var(--bad);}

/* ---------- login ---------- */
.login-page{
  padding:36px 16px 60px;
  background:
    radial-gradient(ellipse 620px 320px at 50% 0%, rgba(139,47,217,.12), transparent 70%),
    radial-gradient(ellipse 520px 280px at 50% 100%, rgba(212,160,23,.10), transparent 70%);
}
/* A real text wordmark (not the old logo.png, which had the tagline baked
   into its pixels and couldn't be kept in sync with a brand-name change)
   stacked under the icon -- see loginLogoHtml() in app.js. */
.login-logo{display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto 20px; cursor:pointer; width:fit-content;}
.login-logo img{height:64px; width:auto;}
.login-logo .brand-name{font-size:1.4rem; text-align:center;}
.login-shell{
  max-width:380px; margin:0 auto; background:var(--card); border-radius:var(--r);
  box-shadow:var(--shadow), var(--glow-mystic); padding:32px;
  border-top:5px solid; border-image:linear-gradient(90deg, var(--gold), var(--mystic), var(--lilac-deep)) 1;
}
.login-shell h1{text-align:center; margin-bottom:4px;}
.login-sub{text-align:center; color:var(--ink-soft); margin-bottom:22px; font-size:.9rem;}

/* ---------- course enrollment grid ---------- */
.course-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;}
.course-card{
  position:relative; display:block; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; cursor:pointer; background:var(--card); transition:border-color .12s, box-shadow .12s;
}
.course-card input{position:absolute; top:10px; right:10px; margin:0; accent-color:var(--gold-deep);}
.course-card:hover{border-color:var(--gold);}
.course-card.picked{border-color:var(--gold); box-shadow:var(--glow-gold); background:var(--gold-soft);}
.course-card.disabled{cursor:not-allowed; opacity:.55; background:var(--line-soft);}
.course-card .cc-name{font-weight:700; font-size:.86rem; padding-right:20px; line-height:1.25; margin-bottom:6px;}
.course-card .cc-price{font-family:var(--font-display); font-weight:700; color:var(--gold-deep); font-size:1rem;}
.course-card.disabled .cc-price{font-family:inherit; font-weight:600; color:var(--ink-faint); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:.82rem; font-weight:600; margin-bottom:4px; color:var(--ink-soft);}
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:9px 11px;
  background:#FFFEFB;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold);}
.field textarea{resize:vertical; min-height:80px;}
.field .hint{font-size:.78rem; color:var(--ink-faint); margin-top:3px;}
.btn{display:inline-flex; align-items:center; gap:6px; border:none; border-radius:var(--r-sm);
  padding:9px 16px; font-weight:700; font-size:.88rem; cursor:pointer; background:var(--gold-metal); color:#2B1E05;
  box-shadow:var(--glow-gold); transition:box-shadow .15s, transform .1s;}
.btn:hover{background:var(--gold-deep); color:#fff; box-shadow:0 0 0 1px rgba(212,160,23,.55), 0 6px 20px -4px rgba(212,160,23,.7);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none;}
.btn.secondary{background:var(--card); color:var(--ink); border:1.5px solid var(--line); box-shadow:none;}
.btn.secondary:hover{background:var(--line-soft); box-shadow:none;}
.btn.danger{background:var(--bad); color:#fff; box-shadow:none;}
.btn.danger:hover{background:#9E2B2B; box-shadow:none;}
.btn.small{padding:5px 11px; font-size:.8rem;}
.btn.block{width:100%; justify-content:center;}
.err-box{background:var(--bad-soft); color:#7A2323; border-radius:var(--r-sm); padding:9px 12px; font-size:.86rem; margin-bottom:12px;}

/* ---------- nav tabs ---------- */
.tabs{display:flex; gap:4px; border-bottom:1.5px solid var(--line); margin-bottom:18px; flex-wrap:wrap;}
.tab{padding:9px 14px; border-radius:var(--r-sm) var(--r-sm) 0 0; font-size:.88rem; font-weight:600; color:var(--ink-soft); cursor:pointer; border:none; background:none;}
.tab:hover{background:var(--line-soft);}
.tab.active{color:var(--gold-ink); background:var(--gold-soft); border-bottom:2.5px solid var(--gold); margin-bottom:-1.5px;}

/* ---------- cards & grid ---------- */
.card{background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:18px; margin-bottom:var(--gap);}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px;}
.grid-2{display:grid; grid-template-columns:290px 1fr; gap:var(--gap);}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap);}
@media(max-width:860px){.grid-2, .grid-3{grid-template-columns:1fr;}}

/* ---------- roster / lists ---------- */
.roster-item{display:flex; align-items:center; gap:12px; padding:11px 8px; border-radius:var(--r-sm); cursor:pointer; border:1.5px solid transparent;}
.roster-item:hover{background:var(--line-soft);}
.roster-item.active{background:var(--accent-soft); border-color:var(--accent);}
.belt-chip{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; flex-shrink:0;}

/* The belt ladder itself: a real vertical stack, top (White) to bottom
   (Red), so it reads as a path you climb rather than a row of dots --
   every row carries the belt's actual name, not just its number, and a
   plain-language status word (a young reader shouldn't have to infer
   "done" from a slightly-faded circle). */
.rail-belts{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
.rail-belt-row{
  display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:var(--r-sm);
  border:2px solid transparent;
}
.rail-belt-row .rbr-badge{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; background:var(--bc); color:var(--bi); flex-shrink:0;
}
.rail-belt-row.locked .rbr-badge{background:var(--line-soft); color:var(--ink-faint);}
.rail-belt-row .rbr-name{font-weight:700; font-size:.84rem; line-height:1.25;}
.rail-belt-row .rbr-state{font-size:.7rem; line-height:1.2; color:var(--ink-soft);}
.rail-belt-row.locked{opacity:.6;}
.rail-belt-row.current{border-color:var(--gold); background:var(--gold-soft); box-shadow:var(--glow-gold);}
.rail-belt-row.current .rbr-state{color:var(--gold-ink, #7a5c05); font-weight:700;}
.rail-belt-row.cleared .rbr-badge{background:var(--ok);}
.rail-belt-row.cleared .rbr-state{color:var(--ok);}
.rail-belt-row.clickable{cursor:pointer; transition:border-color .12s, box-shadow .12s;}
.rail-belt-row.clickable:hover{border-color:var(--mystic); box-shadow:var(--glow-mystic);}
/* Which belt's topics are showing right now, when that differs from the
   student's real current belt (audit mode, or browsing an earlier belt) --
   distinct from .current, which always marks real progress. */
.rail-belt-row.viewed{border-color:var(--mystic); box-shadow:var(--glow-mystic);}
.rail-steps{display:flex; flex-direction:column; gap:6px;}
.rail-step{
  display:flex; align-items:flex-start; gap:9px; padding:9px 10px; border-radius:var(--r-sm);
  border:1.5px solid var(--line); background:#fff; font-size:.82rem;
}
.rail-step .rs-dot{
  width:20px; height:20px; border-radius:50%; flex-shrink:0; margin-top:1px; display:flex;
  align-items:center; justify-content:center; font-size:.66rem; font-weight:800;
  background:var(--line-soft); color:var(--ink-faint);
}
.rail-step.cleared .rs-dot{background:var(--ok); color:#fff;}
.rail-step.current{border-color:var(--gold); background:var(--gold-soft);}
.rail-step.current .rs-dot{background:var(--gold); color:#2B1E05;}
.rail-step.locked{opacity:.55;}
.rail-step.test .rs-dot{background:var(--bad);}
.rail-step .rs-title{font-weight:700; line-height:1.3;}
.rail-step .rs-meta{color:var(--ink-soft); font-size:.72rem; margin-top:1px;}
.rail-step.clickable{cursor:pointer; transition:border-color .12s, box-shadow .12s;}
.rail-step.clickable:hover{border-color:var(--mystic); box-shadow:var(--glow-mystic);}
/* The third level of the navigator: a topic's own sessions, nested right
   underneath it so the full belt -> topic -> session tree is visible at
   once, not hidden behind a click. Indented and visually quieter than a
   .rail-step so the hierarchy reads correctly at a glance. */
.rail-substeps{display:flex; flex-direction:column; gap:3px; margin:2px 0 8px 14px; padding-left:14px; border-left:2px solid var(--line-soft);}
.rail-substep{
  display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:var(--r-sm);
  font-size:.76rem; color:var(--ink-soft);
}
.rail-substep .rss-dot{
  width:16px; height:16px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:.6rem; font-weight:800; background:var(--line-soft); color:var(--ink-faint);
}
.rail-substep.cleared{color:var(--ink);}
.rail-substep.cleared .rss-dot{background:var(--ok); color:#fff;}
.rail-substep.current{color:var(--ink); font-weight:700; background:var(--gold-soft);}
.rail-substep.current .rss-dot{background:var(--gold); color:#2B1E05;}
.rail-substep.locked{opacity:.6;}
.rail-substep.clickable{cursor:pointer;}
.rail-substep.clickable:hover{background:var(--lilac);}

/* ---------- locked test mode ---------- */
.test-gate{
  border-radius:var(--r); padding:26px; background:linear-gradient(135deg, var(--bad-soft) 0%, #fff 100%);
  border:1.5px solid var(--bad); text-align:left;
}
.test-gate h2{color:var(--bad);}
.test-gate ul{list-style:disc; margin:10px 0 16px 20px;}
.test-gate li{margin-bottom:5px; font-size:.92rem; line-height:1.5;}
.test-shell{max-width:760px; margin:0 auto;}
.test-shell-bar{
  position:sticky; top:0; z-index:30; background:var(--card); border-bottom:2px solid var(--bad);
  padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-radius:var(--r) var(--r) 0 0; box-shadow:var(--shadow);
}
.test-timer{font-family:"Cascadia Code", Consolas, monospace; font-size:1.3rem; font-weight:800; color:var(--ink);}
.test-timer.low{color:var(--bad); animation:testPulse 1s infinite;}
@keyframes testPulse{0%,100%{opacity:1;}50%{opacity:.45;}}
.test-shell textarea{min-height:340px;}

/* Every writing surface (self-serve practice, a checkpoint's Apply step, an
   assigned piece) gets a generous box -- this is where the actual writing
   happens, not an afterthought under a wall of instructions. */
textarea{width:100%; box-sizing:border-box; line-height:1.5; padding:10px 12px;}
.learn-activity textarea, #writerBox textarea{min-height:320px;}

/* ---------- checkpoint "learn" wizard ----------
   Built to read like an instructional lesson page: a plain label above each
   section (OBJECTIVE, LESSON, EXAMPLE, KEY POINTS, YOUR TASK), direct
   textbook-register prose, no decorative color-callout framing. */
.learn-card{border-radius:var(--r); padding:0; overflow:hidden;}
/* The friendly "here's what's next" orientation line, shown only on a
   checkpoint's first session -- .lo-icon is a placeholder slot for the
   mascot's face once that asset exists (see project notes on Coach
   Owl/Raven); an emoji stands in for it today. */
.learn-orient{
  display:flex; align-items:flex-start; gap:12px; margin:0 0 18px; padding:14px 16px;
  border-radius:var(--r-sm); background:var(--lilac); border:1.5px solid var(--mystic);
}
.learn-orient .lo-icon{width:52px; height:52px; object-fit:contain; flex-shrink:0;}
.learn-orient div{font-size:.96rem; line-height:1.55; color:var(--indigo); font-weight:600;}
.learn-orient strong{color:var(--indigo);}
.learn-progress{
  display:flex; align-items:center; justify-content:space-between; padding:10px 18px;
  background:var(--lilac); color:var(--indigo); font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
/* Which single idea is on screen right now, within the current session --
   a session broken into one-idea-per-page frames (objective, lesson, one
   technique, one quick check, ...) needs its own "where am I" line
   separate from the session-level counter above it. */
.learn-frame-progress{
  padding:7px 18px; background:var(--lilac); color:var(--indigo); font-size:.72rem; font-weight:600;
  opacity:.8; border-top:1px solid rgba(255,255,255,.4);
}
/* A persistent trail of every session's topic in this checkpoint, so it's
   never ambiguous that the material has moved on to something new --
   "Session 2 of 4" alone doesn't say WHAT changed. Falls back to "Step N"
   when a session has no authored topicLabel, which still shows real
   progress even without a custom name. */
.learn-topics{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:10px 18px 0;
  background:var(--lilac);
}
.lt-chip{
  font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; color:var(--indigo-ink, var(--indigo));
  background:rgba(255,255,255,.55);
}
.lt-chip.done{background:var(--ok-soft); color:var(--ok);}
.lt-chip.current{background:var(--gold-metal); color:#2B1E05; box-shadow:var(--glow-gold);}
.lt-chip.upcoming{opacity:.55;}
.lt-arrow{color:var(--indigo); opacity:.4; font-size:.72rem;}
.learn-body{padding:22px;}
.learn-label{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-faint); margin:18px 0 6px;
}
.learn-label:first-child{margin-top:0;}
.learn-label-icon{display:flex; align-items:center; gap:8px;}
.learn-label-icon img{width:28px; height:28px; object-fit:contain;}
.learn-body h3{font-size:1.25rem; margin-top:2px; margin-bottom:14px; line-height:1.35;}
.learn-explain p{font-size:.98rem; line-height:1.65; margin-bottom:11px; color:var(--ink);}
.learn-model{
  margin:6px 0 14px; padding:14px 16px; border-radius:var(--r-sm); background:var(--paper);
  border:1.5px solid var(--line);
}
.learn-model .lm-caption{font-size:.86rem; color:var(--ink-soft); margin-bottom:8px; font-weight:600;}
.learn-model .lm-pair{display:flex; flex-direction:column; gap:8px;}
.learn-model .lm-row{padding:8px 10px; border-radius:var(--r-sm); font-size:.92rem; line-height:1.55;}
.learn-model .lm-row.before{background:var(--bad-soft); color:#5a1f1f;}
.learn-model .lm-row.after{background:var(--ok-soft); color:#1f4d2e;}
.learn-model .lm-row .lm-tag{display:block; font-size:.68rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:2px; opacity:.75;}
.learn-model .lm-lines{font-size:.92rem; line-height:1.6;}
.learn-model .lm-lines div{margin-bottom:6px;}
.learn-model .lm-note{font-size:.84rem; color:var(--ink-soft); margin-top:8px;}
.learn-remember{
  margin:6px 0 16px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--ok-soft); border:1.5px solid var(--ok);
}
.learn-remember ul{list-style:none; margin:0; padding:0;}
.learn-remember li{
  position:relative; padding-left:20px; font-size:.92rem; line-height:1.55; margin-bottom:6px; color:#1f4d2e;
}
.learn-remember li:last-child{margin-bottom:0;}
.learn-remember li::before{content:"\2713"; position:absolute; left:0; font-weight:800;}
.learn-activity{margin-top:6px; padding-top:16px; border-top:1px solid var(--line-soft);}
.learn-activity p{font-size:.96rem; color:var(--ink); margin-bottom:10px; line-height:1.6;}
.learn-requirements{margin:0 0 14px; padding-left:20px; font-size:.9rem; line-height:1.6; color:var(--ink-soft);}
.learn-requirements li{margin-bottom:4px;}
.learn-nav{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
.learn-skip{font-size:.8rem; color:var(--ink-faint);}
.learn-reflect{
  font-size:.9rem; color:var(--gold-ink, #7a5c05); background:var(--gold-soft);
  border-left:4px solid var(--gold); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:10px 14px;
  margin:14px 0 4px;
}
.learn-reflect::before{content:"Before you continue: "; font-weight:700;}
.learn-upnext{
  font-size:.86rem; color:var(--ink-soft); background:var(--indigo-soft);
  border-left:4px solid var(--mystic); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:8px 14px;
  margin:14px 0 4px;
}
.learn-explain strong, .learn-model strong, .learn-remember strong, .learn-tips strong,
.learn-activity strong, .learn-motivation strong, .learn-quickcheck strong{color:var(--indigo);}
.learn-motivation{font-size:.98rem; line-height:1.65; color:var(--ink); margin-bottom:4px;}
.learn-tips{
  margin:6px 0 16px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--indigo-soft); border:1.5px solid var(--lilac-deep);
}
.learn-tips ul{list-style:none; margin:0; padding:0;}
.learn-tips li{
  position:relative; padding-left:22px; font-size:.9rem; line-height:1.55; margin-bottom:7px; color:var(--indigo);
}
.learn-tips li:last-child{margin-bottom:0;}
.learn-tips li::before{content:"\1F4A1"; position:absolute; left:0; top:-1px; font-size:.85em;}
.learn-quickcheck{
  margin:6px 0 16px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--paper); border:1.5px dashed var(--line);
}
.learn-quickcheck p{font-size:.92rem; line-height:1.55; margin-bottom:10px;}
.learn-quickcheck .qc-answer{
  margin-top:10px; padding:10px 12px; border-radius:var(--r-sm); background:var(--ok-soft);
  font-size:.9rem; line-height:1.55; color:#1f4d2e;
}
.learn-model-answer{
  margin-top:14px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--indigo-soft); border:1.5px solid var(--mystic);
}
.learn-model-answer .lm-caption{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--indigo); margin-bottom:8px;
}
.learn-model-answer .lm-note{font-size:.84rem; color:var(--ink-soft); margin-bottom:8px; font-style:italic;}
.learn-model-answer .lm-response{font-size:.94rem; line-height:1.6; color:var(--ink);}
.learn-model-answer .lm-response p{margin-bottom:8px;}

/* Technique Lab -- genre/approach training cards (templates, worked
   examples across topics, weak-vs-strong pairs, ungraded guided practice). */
.learn-technique{
  margin:6px 0 16px; padding:16px 18px; border-radius:var(--r-sm);
  background:var(--paper); border:1.5px solid var(--line);
}
.learn-technique + .learn-technique{margin-top:12px;}
.lt-name{font-size:1.02rem; font-weight:800; color:var(--indigo); margin-bottom:8px;}
.lt-tag{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); margin:10px 0 5px;
}
.lt-tag:first-of-type{margin-top:0;}
.learn-technique .lt-template{
  display:block; padding:10px 12px; border-radius:var(--r-sm); background:var(--indigo-soft);
  border:1.5px dashed var(--lilac-deep); font-size:.92rem; line-height:1.55; margin-bottom:2px;
}
.learn-technique .lt-template .lt-tag{display:block; margin:0 0 4px;}
.lt-why{font-size:.9rem; line-height:1.6; color:var(--ink-soft); margin:8px 0 0;}
.lt-examples{margin-bottom:4px;}
.lt-example{
  padding:8px 10px; border-radius:var(--r-sm); background:var(--card); border:1px solid var(--line-soft);
  font-size:.9rem; line-height:1.5; margin-bottom:6px;
}
.lt-example:last-child{margin-bottom:0;}
.lt-topic{
  display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-faint); margin-bottom:2px;
}
.lt-weakstrong{margin:2px 0 4px;}
.lt-practice{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line-soft);}
.lt-practice ul{margin:6px 0 0; padding-left:18px; font-size:.88rem; line-height:1.55; color:var(--ink-soft);}
.lt-practice li{margin-bottom:5px;}
.learn-technique strong{color:var(--indigo);}

.learn-vocab{
  margin:6px 0 16px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--gold-soft, #fdf6e3); border:1.5px solid var(--gold, #c9a227);
}
.learn-vocab p{font-size:.9rem; line-height:1.55; margin-bottom:8px; color:var(--gold-ink, #7a5c05);}
.learn-vocab ul{list-style:none; margin:0; padding:0;}
.learn-vocab li{font-size:.88rem; line-height:1.6; margin-bottom:7px; color:var(--gold-ink, #7a5c05);}
.learn-vocab li:last-child{margin-bottom:0;}
.learn-vocab strong{color:var(--gold-ink, #7a5c05);}

.learn-recall{
  margin:6px 0 16px; padding:12px 14px; border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--ok-soft); border-left:4px solid var(--ok);
}
.learn-recall p{font-size:.9rem; line-height:1.55; margin:0 0 6px; color:#1f4d2e;}
.learn-recall p:last-child{margin-bottom:0;}
.learn-recall strong{color:#1f4d2e;}

.checkpoint-done{text-align:center; padding:32px 24px;}
.checkpoint-done .cd-icon{
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--ok);
}
.checkpoint-done h3{margin-bottom:6px;}

/* A bank of several ungraded "which technique is this" drills -- distinct
   from the single quickCheck, which stays for a one-off comprehension check. */
.learn-identify{margin:6px 0 16px;}
.learn-identify .li-intro{font-size:.9rem; line-height:1.55; color:var(--ink-soft); margin-bottom:10px;}
.li-item{
  margin-bottom:10px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--paper); border:1.5px dashed var(--line);
}
.li-item:last-child{margin-bottom:0;}
.li-item p{font-size:.92rem; line-height:1.55; margin:0 0 8px;}
.li-item .li-answer{
  margin-top:8px; padding:9px 11px; border-radius:var(--r-sm); background:var(--ok-soft);
  font-size:.88rem; line-height:1.5; color:#1f4d2e;
}
.learn-identify strong{color:var(--indigo);}

/* ---------- self-serve practice ---------- */
.practice-picker{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin:16px 0;}
.practice-picker button{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:14px 10px; text-align:center;
  cursor:pointer; font-weight:700; font-size:.86rem; transition:border-color .12s, box-shadow .12s;
}
.practice-picker button:hover{border-color:var(--mystic); box-shadow:var(--glow-mystic);}
.practice-picker .pp-icon{display:block; font-size:1.5rem; margin-bottom:6px;}
.select-btn{
  background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:7px 14px;
  cursor:pointer; font-weight:700; font-size:.82rem; color:var(--ink-soft); transition:border-color .12s, background .12s, color .12s;
}
.select-btn:hover{border-color:var(--gold);}
.select-btn.active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.select-btn .sb-count{font-weight:400; opacity:.7; margin-left:4px;}

/* ---------- Practice tab (practice-drawer drills) ---------- */
.drill-shell{display:grid; grid-template-columns:1fr 320px; gap:var(--gap); align-items:start;}
@media(max-width:860px){.drill-shell{grid-template-columns:1fr;}}
.drill-fact{
  background:var(--gold-soft); border:1.5px solid var(--gold); border-radius:var(--r); padding:16px;
  position:sticky; top:70px;
}
@media(max-width:860px){.drill-fact{position:static;}}
.drill-fact h4{font-family:var(--font-display); color:var(--gold-ink); margin:0 0 10px; font-size:1rem;}
.drill-fact ul{margin:0; padding-left:18px; font-size:.86rem; line-height:1.6;}
.drill-timer{font-variant-numeric:tabular-nums; font-weight:800; color:var(--ink-soft);}
.drill-timer.over{color:var(--warn);}
.score-flash{
  border-radius:var(--r); padding:20px; margin:16px 0; text-align:center;
  background:linear-gradient(135deg, var(--ok-soft) 0%, #fff 100%); border:1.5px solid var(--ok);
}
.score-flash.pending{background:linear-gradient(135deg, var(--info-soft) 0%, #fff 100%); border-color:var(--info);}
.score-flash h3{font-family:var(--font-display); font-size:1.15rem; margin-bottom:6px;}
.roster-item .ri-body{flex:1; min-width:0;}
.roster-item .ri-name{font-weight:700; font-size:.92rem;}
.roster-item .ri-meta{font-size:.78rem; color:var(--ink-soft);}
.roster-item .ri-flags{display:flex; gap:4px; flex-wrap:wrap; margin-top:3px;}
.chip{display:inline-block; font-size:.7rem; font-weight:700; padding:2px 7px; border-radius:999px;}
.chip.warn{background:var(--warn-soft); color:var(--warn);}
.chip.bad{background:var(--bad-soft); color:var(--bad);}
.chip.ok{background:var(--ok-soft); color:var(--ok);}
.chip.info{background:var(--info-soft); color:var(--info);}
.chip.plain{background:var(--line-soft); color:var(--ink-soft);}

table.tbl{width:100%; border-collapse:collapse; font-size:.88rem;}
table.tbl th{text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); padding:7px 8px; border-bottom:1.5px solid var(--line);}
table.tbl td{padding:8px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
table.tbl tr:hover td{background:var(--line-soft);}
table.tbl tr.clickable{cursor:pointer;}

/* ---------- criterion rows ---------- */
.crit-row{display:grid; grid-template-columns:1fr 90px 130px; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--line-soft); font-size:.86rem;}
.crit-row .cr-name{font-weight:600;}
.crit-row .cr-score{font-weight:800; text-align:center;}
.crit-bar{height:6px; border-radius:999px; background:var(--line-soft); overflow:hidden; position:relative;}
.crit-bar > div{height:100%; border-radius:999px;}
.crit-bar .line-mark{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink);}

/* ---------- analytics tab ---------- */
.an-dot{display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:3px; vertical-align:middle;}
.an-heat{display:flex; flex-direction:column; gap:3px;}
.an-heat[hidden]{display:none;} /* author-origin .an-heat{display:flex} otherwise beats the UA [hidden] rule */
.an-heat-row{display:grid; grid-template-columns:200px 1fr; align-items:center; gap:8px;}
.an-heat-label{font-size:.78rem; color:var(--ink-soft); font-weight:600;}
.an-heat-cells{display:grid; grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); gap:3px;}
.an-hcell{
  height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:var(--ink); border:1px solid var(--line-soft);
}
.an-heat-table{width:100%; border-collapse:collapse; font-size:.82rem;}
.an-heat-table td, .an-heat-table th{padding:4px 6px; border-bottom:1px solid var(--line-soft); text-align:left;}
.an-heat-table th{color:var(--ink-soft); font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; padding-top:12px;}
@media(max-width:640px){.an-heat-row{grid-template-columns:1fr;} .an-heat-label{margin-bottom:2px;}}

/* ---------- empty / notice ---------- */
.empty{color:var(--ink-faint); font-size:.88rem; padding:18px 4px; text-align:center;}
.notice{border-radius:var(--r-sm); padding:10px 13px; font-size:.85rem; margin-bottom:12px;}
.notice.info{background:var(--info-soft); color:#1D4E82;}
.notice.warn{background:var(--warn-soft); color:#7A4207;}
.notice.bad{background:var(--bad-soft); color:#7A2323;}
.notice.export{background:var(--accent-soft); color:var(--accent-ink); border:1px dashed var(--accent);}

/* ---------- resource drawer: two-pane library (rail + reader) ---------- */
.res-shell{display:grid; grid-template-columns:300px 1fr; gap:var(--gap); align-items:start;}
@media(max-width:860px){.res-shell{grid-template-columns:1fr;}}
.res-rail{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:16px;
  position:sticky; top:70px; max-height:calc(100vh - 90px); overflow:auto;
}
@media(max-width:860px){.res-rail{position:static; max-height:none;}}
.res-main{background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:22px; min-height:300px; position:relative; overflow:hidden;}
.res-watermark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:0; overflow:hidden;
}
.res-watermark img{width:70%; max-width:520px; height:auto; opacity:.05;}
#resMainBox{position:relative; z-index:1;}
.res-group{margin-bottom:22px;}
.res-group h4{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:8px;}
.res-list{display:flex; flex-direction:column; gap:6px;}
.res-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px;
  cursor:pointer; transition:border-color .12s, box-shadow .12s, background .12s;
}
.res-item:hover{border-color:var(--gold); box-shadow:var(--glow-gold);}
.res-item.active{background:var(--accent-soft); border-color:var(--accent);}
.res-item .res-title{font-weight:700; font-size:.86rem; color:var(--ink);}
.res-item .res-section{font-size:.72rem;}
.res-item.qr-pin{margin-bottom:14px; background:var(--gold-soft); border-color:var(--gold);}
.res-item.qr-pin .res-title{color:var(--gold-ink);}

/* the doc reader: an optional in-page TOC beside the rendered markdown */
.res-doc{display:grid; grid-template-columns:1fr; gap:22px;}
.res-doc:has(.res-toc){grid-template-columns:180px 1fr;}
@media(max-width:720px){.res-doc:has(.res-toc){grid-template-columns:1fr;}}
.res-toc{align-self:start; font-size:.8rem; display:flex; flex-direction:column; gap:4px;}
@media(min-width:721px){.res-toc{position:sticky; top:70px; max-height:calc(100vh - 90px); overflow:auto;}}
.res-toc-label{font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:4px;}
.res-toc-link{display:block; width:100%; background:none; border:none; border-left:2px solid transparent; font:inherit; text-align:left; cursor:pointer; color:var(--ink-soft); text-decoration:none; padding:3px 0 3px 8px;}
.res-toc-link:hover{color:var(--accent); border-left-color:var(--accent);}
.res-toc-l3{padding-left:18px; font-size:.76rem;}

/* ---------- rendered markdown (library docs, assigned material) ---------- */
.md-doc{font-size:.97rem; line-height:1.7; color:var(--ink);}
.md-h1{
  font-family:var(--font-display); font-size:2.3rem; font-weight:700; line-height:1.15;
  color:var(--accent-ink); margin:0 0 18px; padding-bottom:12px;
  border-bottom:4px solid; border-image:linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 22%, var(--accent) 62%, #6A3FD9 100%) 1;
}
.md-h2{
  font-family:var(--font-display); font-size:1.18rem; font-weight:700; color:var(--accent-ink);
  margin:30px 0 14px; padding:10px 14px; background:var(--accent-soft);
  border-left:4px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.md-doc > .md-h2:first-child{margin-top:0;}
.md-h3{font-size:1.06rem; margin:18px 0 8px; color:var(--accent-ink);}
.md-h4, .md-h5, .md-h6{font-size:.92rem; margin:14px 0 6px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft);}
.md-p{margin:0 0 12px;}
.md-list{margin:0 0 12px; padding-left:22px;}
.md-list li{margin-bottom:5px;}
.md-hr{border:none; border-top:1px solid var(--line); margin:20px 0;}
.md-quote{border-left:3px solid var(--gold); background:var(--gold-soft); padding:10px 14px; margin:0 0 12px; border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--gold-ink); font-style:italic;}
.md-quote .md-p:last-child{margin-bottom:0;}
.md-pre{background:var(--ink); color:#EFEAFB; border-radius:var(--r-sm); padding:12px 14px; overflow:auto; font-size:.84rem; margin:0 0 12px;}
.md-doc code{background:var(--line-soft); border-radius:4px; padding:1px 5px; font-size:.88em; font-family:"Cascadia Code", Consolas, monospace;}
.md-pre code{background:none; padding:0;}
.md-xref{font-style:italic; color:var(--ink-soft);}
.md-table-wrap{overflow-x:auto; margin:0 0 16px; border:1px solid var(--line); border-radius:var(--r-sm);}
.md-table{width:100%; border-collapse:collapse; font-size:.88rem;}
.md-table th{background:var(--line-soft); text-align:left; font-weight:700; color:var(--ink); padding:8px 10px; border-bottom:1.5px solid var(--line);}
.md-table td{padding:7px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
.md-table tr:last-child td{border-bottom:none;}

/* ---------- quick reference cards ---------- */
.qr-chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px;}
.qr-chip{
  background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:6px 14px;
  font-size:.82rem; font-weight:700; color:var(--ink-soft); cursor:pointer;
}
.qr-chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.qr-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.qr-card{
  background:#FFFEFB; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
  box-shadow:var(--shadow);
}
.qr-card-title{font-family:var(--font-display); font-size:1.02rem; margin:0 0 8px; color:var(--accent-ink); border-bottom:1px solid var(--line-soft); padding-bottom:6px;}
.qr-card-body{font-size:.86rem; line-height:1.55;}
.qr-card-body .md-p{margin-bottom:8px;}
.qr-card-body .md-table-wrap{margin-bottom:8px;}
.qr-card-body .md-h2, .qr-card-body .md-h3{display:none;} /* card boundaries already carry the heading */

/* ---------- submission / reading pane ---------- */
.sub-body{
  background:#FFFEFB; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:16px 18px;
  font-size:.96rem; line-height:1.7; white-space:pre-wrap;
  user-select:none; -webkit-user-select:none; -ms-user-select:none;
}
.sub-body mark{background:#FFE9A8; border-radius:2px; padding:0 1px; cursor:pointer;}
.sub-body mark.strength{background:#CFEFD9;}
.sub-body mark.fault{background:#F7D1D1;}
.sub-body mark.suggestion{background:#D7E6F7;}
.sub-body mark.question{background:#EAD9F7;}
.watermark{font-size:.72rem; color:var(--ink-faint); text-align:right; margin-top:6px; font-style:italic;}

.annotation{border-left:3px solid var(--line); padding:8px 10px; margin-bottom:8px; border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--line-soft); font-size:.85rem;}
.annotation.strength{border-color:var(--ok);}
.annotation.fault{border-color:var(--bad);}
.annotation.suggestion{border-color:var(--info);}
.annotation.question{border-color:var(--info);}
.annotation .an-head{display:flex; justify-content:space-between; gap:8px; font-weight:700; margin-bottom:2px;}
.annotation .an-quote{font-style:italic; color:var(--ink-soft); margin-bottom:3px;}
.annotation .an-actions{margin-top:6px; display:flex; gap:8px;}
.annotation .an-actions a{font-size:.78rem; cursor:pointer;}

/* ---------- calendar ---------- */
.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;}
.cal-dow{font-size:.72rem; font-weight:700; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding-bottom:4px;}
.cal-cell{min-height:78px; border:1.5px solid var(--line-soft); border-radius:var(--r-sm); padding:5px; font-size:.78rem; background:#FFFEFB;}
.cal-cell.other-month{opacity:.4;}
.cal-cell.today{border-color:var(--accent); background:var(--accent-soft);}
.cal-daynum{font-weight:700; margin-bottom:3px;}
.cal-evt{display:block; font-size:.7rem; padding:1px 5px; border-radius:5px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;}
.cal-evt.assignment{background:var(--info-soft); color:var(--info);}
.cal-evt.deadline{background:var(--bad-soft); color:var(--bad);}
.cal-evt.test{background:var(--warn-soft); color:var(--warn);}
.cal-evt.session{background:var(--accent-soft); color:var(--accent-ink);}
.cal-evt.reminder{background:var(--ok-soft); color:var(--ok);}
.cal-nav{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.agenda-item{display:flex; gap:10px; padding:8px 4px; border-bottom:1px solid var(--line-soft); font-size:.86rem; align-items:flex-start;}
.agenda-date{width:70px; flex-shrink:0; font-weight:700; color:var(--ink-soft); font-size:.78rem;}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(38,33,59,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:80; overflow:auto;}
.modal{background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); max-width:560px; width:100%; padding:22px;}
.modal-close{float:right; background:none; border:none; font-size:1.2rem; color:var(--ink-faint); cursor:pointer; line-height:1;}

/* ---------- trial paywall (unmissable, sits above everything) ---------- */
.paywall-backdrop{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:auto;
  background:
    radial-gradient(ellipse 700px 400px at 30% 20%, rgba(139,47,217,.35), transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 80%, rgba(212,160,23,.3), transparent 60%),
    rgba(20,16,31,.92);
}
.paywall-card{
  background:var(--card); border-radius:var(--r); max-width:420px; width:100%; padding:40px 32px;
  text-align:center; box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  border-top:6px solid; border-image:linear-gradient(90deg, var(--gold), var(--mystic), var(--lilac-deep)) 1;
}
.paywall-card h1{margin-top:14px;}

/* ---------- misc ---------- */
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.row.between{justify-content:space-between;}
.stat{text-align:center;}
.stat .stat-n{font-size:1.5rem; font-weight:800; font-family:var(--font-display); color:var(--gold-deep);}
.stat .stat-l{font-size:.74rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:.86rem;}
.kv dt{color:var(--ink-soft);}
.kv dd{margin:0;}

/* =========================================================================
   Marketing homepage (logged-out visitors) -- its own nav, not #topbar.
   ========================================================================= */
.mkt-nav{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:4px solid; border-image:linear-gradient(90deg, var(--gold), var(--mystic), var(--lilac-deep)) 1;
  box-shadow:0 1px 0 rgba(20,16,31,.04), 0 4px 14px -6px rgba(20,16,31,.15);
}
.mkt-nav-row{max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.mkt-nav-left{display:flex; align-items:center; gap:26px;}
.mkt-brand{display:flex; align-items:center; gap:8px; cursor:pointer;}
.mkt-brand img{height:34px; width:auto;}
.mkt-brand .brand-name{font-size:1.35rem;}
/* "Academy" is the real, agreed brand name -- it belongs in the nav too.
   It's a controlled block line under the wordmark (not an inline wrap),
   so it grows the brand lockup's height slightly rather than breaking the
   row's horizontal layout. */
.mkt-brand .brand-suffix{font-size:.5em;}
.mkt-menu{display:flex; align-items:center; gap:4px;}
.mkt-menu-item{position:relative;}
.mkt-menu-btn{
  background:none; border:none; font-family:inherit; font-weight:700; font-size:.88rem; color:var(--ink);
  padding:10px 10px; cursor:pointer; display:flex; align-items:center; gap:4px; border-radius:var(--r-sm);
}
.mkt-menu-btn:hover, .mkt-menu-item.open .mkt-menu-btn{color:var(--gold-deep); background:var(--gold-soft);}
.mkt-menu-btn .caret{font-size:.65em; opacity:.7;}
.mkt-dropdown{
  display:none; position:absolute; top:100%; left:0; margin-top:6px; min-width:240px; max-height:360px;
  overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 10px 30px -8px rgba(20,16,31,.25); padding:8px; z-index:60;
}
.mkt-menu-item.open .mkt-dropdown{display:block;}
.mkt-dropdown a, .mkt-dropdown .dd-static{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:var(--r-sm);
  font-size:.85rem; color:var(--ink); text-decoration:none;
}
.mkt-dropdown a:hover{background:var(--gold-soft); text-decoration:none;}
.mkt-dropdown .dd-badge{font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint);}
.mkt-nav-right{display:flex; align-items:center; gap:10px;}
.mkt-signin{font-weight:700; font-size:.88rem; color:var(--ink); padding:9px 14px;}
.mkt-signin:hover{color:var(--gold-deep); text-decoration:none;}

.mkt-page{background:var(--paper);}

/* ---------- hero ---------- */
.mkt-hero{
  position:relative; overflow:hidden; text-align:center; padding:80px 20px 60px;
  background:
    radial-gradient(ellipse 720px 380px at 18% -10%, rgba(139,47,217,.14), transparent 65%),
    radial-gradient(ellipse 620px 340px at 85% 10%, rgba(212,160,23,.14), transparent 65%),
    radial-gradient(ellipse 500px 300px at 50% 110%, rgba(217,194,245,.3), transparent 70%);
}
.mkt-hero-content{position:relative; z-index:2;}

/* Slow-drifting color blobs -- the "moving colors" -- kept behind everything,
   low-opacity, and switched off for anyone who's asked for less motion. */
.mkt-blob{position:absolute; z-index:1; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none;}
.mkt-blob-1{width:420px; height:420px; top:-140px; left:-120px; background:radial-gradient(circle, var(--mystic), transparent 70%); animation:blobFloat1 22s ease-in-out infinite alternate;}
.mkt-blob-2{width:380px; height:380px; top:-80px; right:-140px; background:radial-gradient(circle, var(--gold), transparent 70%); animation:blobFloat2 26s ease-in-out infinite alternate;}
.mkt-blob-3{width:320px; height:320px; bottom:-160px; left:38%; background:radial-gradient(circle, var(--lilac-deep), transparent 70%); animation:blobFloat3 19s ease-in-out infinite alternate;}
@keyframes blobFloat1{from{transform:translate(0,0) scale(1);} to{transform:translate(40px,50px) scale(1.12);}}
@keyframes blobFloat2{from{transform:translate(0,0) scale(1);} to{transform:translate(-50px,40px) scale(1.08);}}
@keyframes blobFloat3{from{transform:translate(0,0) scale(1);} to{transform:translate(30px,-30px) scale(1.15);}}
@media (prefers-reduced-motion: reduce){.mkt-blob{animation:none;}}

.mkt-hero-icon{display:block; height:200px; width:auto; margin:0 auto 18px; filter:drop-shadow(0 10px 24px rgba(139,47,217,.25));}
.mkt-eyebrow{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mystic); background:var(--accent-soft); border:1px solid var(--lilac-deep);
  border-radius:999px; padding:5px 14px; margin-bottom:18px;
}
/* Metallic, sparkling gold variant -- a moving diagonal shine sweeps across
   a warm gold-foil gradient, plus a scatter of tiny glitter flecks that
   twinkle on their own staggered timers. Self-contained (position:relative +
   overflow:hidden on the badge itself), so it drops onto any single
   .mkt-eyebrow without touching the plain style everywhere else. */
.mkt-eyebrow.sparkle{
  position:relative; overflow:hidden; color:#3D2B02; border:1.5px solid var(--gold-deep);
  background:var(--gold-metal), radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 60%);
  box-shadow:var(--glow-gold), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 4px rgba(0,0,0,.28);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.mkt-eyebrow.sparkle::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.9) 48%, rgba(255,255,255,.25) 54%, transparent 75%);
  background-size:220% 100%; background-position:130% 0;
  animation:eyebrowShine 3.2s ease-in-out infinite;
}
.mkt-eyebrow.sparkle::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle, #fff 60%, transparent 68%) 10% 25% / 6px 6px,
    radial-gradient(circle, #fff 60%, transparent 68%) 24% 72% / 4px 4px,
    radial-gradient(circle, #fff 60%, transparent 68%) 40% 15% / 5px 5px,
    radial-gradient(circle, #fff 60%, transparent 68%) 56% 68% / 4px 4px,
    radial-gradient(circle, #fff 60%, transparent 68%) 70% 22% / 6px 6px,
    radial-gradient(circle, #fff 60%, transparent 68%) 84% 60% / 4px 4px,
    radial-gradient(circle, #fff 60%, transparent 68%) 94% 30% / 5px 5px;
  background-repeat:no-repeat; animation:eyebrowTwinkle 1.6s ease-in-out infinite;
}
@keyframes eyebrowShine{0%{background-position:130% 0;} 55%,100%{background-position:-30% 0;}}
@keyframes eyebrowTwinkle{0%,100%{opacity:.55;} 50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .mkt-eyebrow.sparkle::before, .mkt-eyebrow.sparkle::after{animation:none;}
}
.mkt-hero h1{
  font-size:clamp(2.6rem, 7vw, 4.8rem); max-width:17ch; margin:0 auto 18px; line-height:1.03; letter-spacing:-.01em;
}
.mkt-hero h1 .hl{
  position:relative; display:inline-block; line-height:1.22; padding-bottom:.06em;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.95) 48%, rgba(255,255,255,.25) 54%, transparent 70%),
    linear-gradient(100deg, var(--gold-deep), var(--gold) 40%, var(--mystic) 85%);
  background-size:220% 100%, 100% 100%;
  background-position:130% 0, 0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:hlShine 3.5s ease-in-out infinite;
}
.mkt-hero h1 .hl::after{
  content:""; position:absolute; inset:-6px -3px; pointer-events:none;
  background-image:
    radial-gradient(circle, #fff 60%, transparent 65%) 8% 20% / 3px 3px,
    radial-gradient(circle, #fff 60%, transparent 65%) 28% 78% / 2px 2px,
    radial-gradient(circle, #fff 60%, transparent 65%) 52% 12% / 3px 3px,
    radial-gradient(circle, #fff 60%, transparent 65%) 72% 68% / 2px 2px,
    radial-gradient(circle, #fff 60%, transparent 65%) 90% 32% / 3px 3px;
  background-repeat:no-repeat; animation:hlTwinkle 1.8s ease-in-out infinite;
}
@keyframes hlShine{0%{background-position:130% 0, 0 0;} 55%,100%{background-position:-30% 0, 0 0;}}
@keyframes hlTwinkle{0%,100%{opacity:.2;} 50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .mkt-hero h1 .hl{animation:none;}
  .mkt-hero h1 .hl::after{animation:none; opacity:.6;}
}
.mkt-hero-sub{max-width:56ch; margin:0 auto 26px; font-size:1.15rem; color:var(--ink-soft); line-height:1.6; transition:opacity .2s;}
.mkt-hero-tagline{font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--gold-ink); margin-bottom:26px;}

.mkt-audience-toggle{display:inline-flex; background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:4px; margin-bottom:26px; gap:2px;}
.mkt-audience-toggle button{
  border:none; background:none; font-weight:700; font-size:.84rem; padding:8px 20px; border-radius:999px; cursor:pointer; color:var(--ink-soft);
}
.mkt-audience-toggle button.active{background:var(--gold-metal); color:#2B1E05;}

.mkt-hero-ctas{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:20px;}
.mkt-hero-ctas .btn{font-size:1rem; padding:15px 30px;}
.btn.pill{border-radius:999px;}
.mkt-trial-note{font-size:.78rem; color:var(--ink-faint); margin-bottom:44px;}
.mkt-stats{display:flex; justify-content:center; gap:40px; flex-wrap:wrap; margin-bottom:56px;}

/* ---------- hero product mockup: a real "browser window" of the app,
   hand-built in HTML/CSS (not a screenshot) so it stays crisp and
   on-brand in both themes and at any size. ---------- */
.mkt-mockup{max-width:760px; margin:0 auto; text-align:left; position:relative; z-index:2;}
.mkt-mockup-frame{
  background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(20,16,31,.45), 0 0 0 1px rgba(20,16,31,.06);
  transform:perspective(1400px) rotateX(2deg); transition:transform .3s;
}
.mkt-mockup:hover .mkt-mockup-frame{transform:perspective(1400px) rotateX(0deg);}
.mkt-mockup-chrome{background:#EDE7F5; padding:9px 14px; display:flex; align-items:center; gap:6px;}
.mkt-mockup-chrome i{width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--line);}
.mkt-mockup-chrome i:nth-child(1){background:#E8817A;} .mkt-mockup-chrome i:nth-child(2){background:#E8C36E;} .mkt-mockup-chrome i:nth-child(3){background:#7DBF8E;}
.mkt-mockup-url{margin-left:10px; background:#fff; border-radius:999px; padding:3px 14px; font-size:.72rem; color:var(--ink-faint); font-family:var(--mono, monospace);}
.mkt-mockup-body{padding:22px; background:var(--paper);}
.mkt-mockup-row{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px;}
.mkt-mockup-row:last-child{margin-bottom:0;}
.mkt-mockup-belt{width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; color:#fff;}
.mkt-mockup-row .mm-name{font-weight:700; font-size:.86rem;}
.mkt-mockup-row .mm-meta{font-size:.74rem; color:var(--ink-soft);}
.mkt-mockup-row .mm-bar{margin-left:auto; width:90px; height:7px; border-radius:999px; background:var(--line-soft); overflow:hidden;}
.mkt-mockup-row .mm-bar > div{height:100%; border-radius:999px; background:var(--gold-metal);}
.mkt-mockup-row .mm-chip{margin-left:auto; font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:999px;}

/* ---------- editorial pull-quotes: short, public-domain lines on the
   power of the written word, placed at a few key moments in the funnel
   for gravitas -- one big statement piece plus small in-context accents,
   not a wall of quotes. ---------- */
.mkt-quote-section{max-width:820px; margin:0 auto; padding:52px 20px 40px; text-align:center;}
.mkt-quote-mark{
  font-family:var(--font-display); font-size:4.2rem; line-height:1; color:var(--gold-deep); opacity:.4;
  display:block; margin-bottom:-10px;
}
.mkt-quote-section blockquote{
  font-family:var(--font-display); font-style:italic; font-weight:700; margin:0 0 18px;
  font-size:clamp(1.5rem, 3.4vw, 2.3rem); line-height:1.35; color:var(--ink);
}
.mkt-quote-section .mcb-divider{margin:0 auto 16px;}
.mkt-quote-section cite{
  font-style:normal; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:.78rem; color:var(--gold-ink);
}
.mkt-quote-accent{
  max-width:600px; margin:38px auto 50px; text-align:center; font-family:var(--font-display); font-style:italic;
  font-size:1.02rem; line-height:1.55; color:var(--ink-soft); position:relative; padding-top:24px;
}
.mkt-quote-accent::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%) rotate(45deg);
  width:7px; height:7px; background:var(--gold-deep); border-radius:1px;
}
.mkt-journey .mkt-quote-accent::before{background:var(--lilac);}
.mkt-quote-accent cite{
  display:block; font-style:normal; font-weight:700; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; margin-top:10px; color:var(--gold-ink);
}
.mkt-journey .mkt-quote-accent{color:#C9C3DE;}
.mkt-journey .mkt-quote-accent cite{color:var(--lilac);}

/* ---------- generic marketing section ---------- */
.mkt-section{max-width:1180px; margin:0 auto; padding:70px 20px;}
.mkt-section.alt{max-width:none; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.mkt-section.alt > .mkt-inner{max-width:1180px; margin:0 auto; padding:70px 20px;}
.mkt-section-head{text-align:center; max-width:640px; margin:0 auto 40px;}

/* A big, standalone brand stamp at the top of the Courses section -- icon,
   wordmark and full tagline, all much larger than the compact nav/topbar
   lockup, closer in spirit to the old flattened logo.png but live text. */
.mkt-course-brand-block{text-align:center; margin:0 auto 48px;}
.mkt-course-brand-block img{height:150px; width:auto; margin-bottom:14px; filter:drop-shadow(0 10px 24px rgba(139,47,217,.22));}
.mkt-course-brand-block .mcb-wordmark{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem, 6vw, 4.2rem);
  letter-spacing:.03em; color:var(--ink); line-height:1;
}
.mkt-course-brand-block .mcb-wordmark .mcb-suffix{
  display:block; font-size:.32em; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); margin-top:6px;
}
.mkt-course-brand-block .mcb-divider{display:flex; align-items:center; justify-content:center; gap:10px; margin:16px auto 10px;}
.mkt-course-brand-block .mcb-divider span{width:64px; height:1px; background:var(--line-soft);}
.mkt-course-brand-block .mcb-divider i{width:7px; height:7px; border-radius:1px; background:var(--gold-deep); transform:rotate(45deg); display:block;}
.mkt-course-brand-block .mcb-tagline{
  font-size:1.05rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
@media(max-width:480px){
  .mkt-course-brand-block img{height:90px;}
}
.mkt-section-head .mkt-eyebrow{margin-bottom:12px;}
.mkt-section-head h2{font-size:clamp(1.6rem, 3vw, 2.1rem); margin-bottom:10px;}
.mkt-section-head p{color:var(--ink-soft); font-size:1rem;}

/* ---------- feature grid ---------- */
.mkt-feature-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; align-items:start;}
.mkt-feature-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s;
}
.mkt-feature-card[open]{border-color:var(--gold); box-shadow:var(--glow-gold);}
.mkt-feature-card summary{
  list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; gap:12px;
}
.mkt-feature-card summary::-webkit-details-marker{display:none;}
.mkt-feature-card .fc-icon{
  font-size:1.3rem; flex-shrink:0; width:42px; height:42px; border-radius:12px; background:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
}
.mkt-feature-card .fc-icon.fc-gold{background:var(--gold-soft);}
.mkt-feature-card .fc-icon.fc-info{background:var(--info-soft);}
.mkt-feature-card .fc-icon.fc-indigo{background:var(--indigo-soft);}
.mkt-feature-card .fc-icon.fc-teal{background:var(--teal-soft);}
.mkt-feature-card .fc-icon.fc-warn{background:var(--warn-soft);}
.mkt-feature-card .fc-icon.fc-ok{background:var(--ok-soft);}
.mkt-feature-card .fc-icon.fc-coral{background:var(--coral-soft);}
.mkt-feature-card .fc-icon.fc-bad{background:var(--bad-soft);}
.mkt-feature-card h3{font-size:.96rem; margin:0; flex:1;}
.mkt-feature-card .fc-caret{color:var(--ink-faint); transition:transform .2s; flex-shrink:0;}
.mkt-feature-card[open] .fc-caret{transform:rotate(90deg); color:var(--gold-deep);}
.mkt-feature-card p{font-size:.86rem; color:var(--ink-soft); margin:0; padding:0 20px 18px 74px;}

/* ---------- belt journey (dark pill-track) ---------- */
.mkt-journey{
  background:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(139,47,217,.35), transparent 60%),
    radial-gradient(ellipse 900px 500px at 85% 100%, rgba(212,160,23,.22), transparent 60%),
    linear-gradient(180deg, #1B1530 0%, #14101F 100%);
  padding:70px 20px; overflow:hidden;
}
.mkt-journey-inner{max-width:1180px; margin:0 auto;}
.mkt-eyebrow.light{
  color:var(--lilac); background:rgba(217,194,245,.14); border-color:rgba(217,194,245,.4);
  box-shadow:0 0 0 1px rgba(139,47,217,.2), 0 4px 20px -6px rgba(139,47,217,.55);
}
h2.light, p.light{color:#fff;}
.mkt-section-head p.light{color:#C9C3DE;}
.mkt-journey-track{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; row-gap:18px;
}
.mkt-journey-pill{
  display:flex; align-items:center; gap:8px; background:var(--jc); color:var(--ji);
  border-radius:999px; padding:8px 16px 8px 8px; font-weight:700; font-size:.82rem;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5); flex-shrink:0;
}
.mkt-journey-pill .jp-n{
  width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; font-size:.76rem;
}
.mkt-journey-link{width:22px; height:2px; background:rgba(255,255,255,.18); flex-shrink:0; margin:0 2px;}
@media (max-width:900px){
  .mkt-journey-link{display:none;}
  .mkt-journey-track{gap:10px;}
}

/* ---------- course cards (marketing) ---------- */
.mkt-course-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:16px;}
.mkt-course-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:20px; text-align:left;
  transition:transform .12s, box-shadow .12s;
}
.mkt-course-card.open{border-color:var(--gold); box-shadow:var(--glow-gold);}
.mkt-course-card:hover{transform:translateY(-3px);}
.mkt-course-card .cc-badge{
  display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; margin-bottom:10px;
}
.mkt-course-card.open .cc-badge{background:var(--ok-soft); color:var(--ok);}
.mkt-course-card:not(.open) .cc-badge{background:var(--line-soft); color:var(--ink-faint);}
.mkt-course-card h3{font-size:.98rem; margin-bottom:12px; min-height:2.4em;}
.mkt-course-card .cc-price{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--gold-ink); background:var(--gold-soft); border-radius:999px; padding:4px 14px;
}
.mkt-course-card:not(.open) .cc-price{
  color:var(--ink-faint); background:var(--line-soft); font-family:inherit; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em;
}

/* ---------- packages ---------- */
.mkt-pkg-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; margin-top:28px;}
.mkt-pkg-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:30px 22px 26px;
  text-align:center; position:relative;
}
/* No overflow:hidden here -- .pkg-flag is a ribbon meant to float above the
   card's top edge (top:-13px below), which overflow:hidden would clip clean
   off. The top color bar gets its own matching corner radius instead of
   relying on the card clipping it square. */
.mkt-pkg-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--pc, var(--teal));
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.mkt-pkg-card:nth-child(2){--pc:var(--indigo);}
.mkt-pkg-card:nth-child(3){--pc:var(--coral);}
/* The featured package is dressed as an unrolled parchment scroll -- gold
   "rod" caps poking past the card's own edges top and bottom, a warm
   parchment fill instead of flat white, and a heavier lift/glow than its
   neighbors -- so it reads as the one genuinely valuable, worth-buying item
   in the row rather than just another card with a colored top bar. */
.mkt-pkg-card.feat{
  border:1.5px solid var(--gold-deep);
  background:linear-gradient(180deg, #FFFDF6 0%, #FBF3DC 100%);
  box-shadow:0 0 0 1px rgba(212,160,23,.28), 0 34px 60px -24px rgba(168,122,14,.55), var(--glow-gold);
  position:relative; --pc:var(--gold-metal);
  transform:translateY(-6px); z-index:2; transition:transform .25s ease, box-shadow .25s ease;
}
.mkt-pkg-card.feat:hover{transform:translateY(-10px);}
.mkt-pkg-card.feat::before, .mkt-pkg-card.feat::after{
  left:-18px; right:-18px; height:17px; border-radius:999px;
  background:
    radial-gradient(circle at 5% 50%, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(circle at 95% 50%, rgba(255,255,255,.95), transparent 55%),
    linear-gradient(180deg, #FCEFAF 0%, #E6BB2E 35%, #B8860B 70%, #F4D976 100%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.7), inset 0 -3px 4px rgba(0,0,0,.32), 0 4px 14px -2px rgba(168,122,14,.7);
}
.mkt-pkg-card.feat::before{top:-7px;}
.mkt-pkg-card.feat::after{content:""; position:absolute; bottom:-7px;}
.mkt-pkg-card .pkg-flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gold-metal); color:#2B1E05;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:4px 12px; border-radius:999px;
}
.mkt-pkg-card.feat .pkg-flag{
  top:-32px; z-index:3; font-size:.72rem; padding:6px 16px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 18px -4px rgba(168,122,14,.65), inset 0 1px 0 rgba(255,255,255,.55);
  display:inline-flex; align-items:center; gap:6px;
}
.mkt-pkg-card.feat .pkg-flag::before, .mkt-pkg-card.feat .pkg-flag::after{content:"\2726"; font-size:.55rem; opacity:.85;}
.mkt-pkg-card h3{margin-bottom:8px;}
.mkt-pkg-card .pkg-price{font-family:var(--font-display); font-weight:700; font-size:1.6rem; margin:10px 0;}
.mkt-pkg-card ul{margin:16px 0; text-align:left;}
.mkt-pkg-card li{font-size:.86rem; color:var(--ink-soft); padding:5px 0 5px 22px; position:relative;}
.mkt-pkg-card li::before{content:"\2713"; position:absolute; left:0; color:var(--gold-deep); font-weight:800;}

/* ---------- pricing ---------- */
.mkt-price-card{
  max-width:420px; margin:0 auto; background:#fff; border-radius:var(--r); padding:32px;
  box-shadow:var(--shadow), var(--glow-mystic); border-top:5px solid; text-align:center;
  border-image:linear-gradient(90deg, var(--gold), var(--mystic), var(--lilac-deep)) 1;
}
.mkt-price-card .price-big{font-family:var(--font-display); font-weight:800; font-size:3rem; color:var(--gold-deep); line-height:1;}
.mkt-price-card .price-per{color:var(--ink-soft); font-size:.9rem;}

/* ---------- FAQ ---------- */
.mkt-faq{max-width:760px; margin:0 auto;}
.mkt-faq-item{border-bottom:1px solid var(--line); padding:16px 0;}
.mkt-faq-item summary{font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.mkt-faq-item summary::-webkit-details-marker{display:none;}
.mkt-faq-item summary::after{content:"+"; font-size:1.3rem; color:var(--gold-deep); flex-shrink:0;}
.mkt-faq-item[open] summary::after{content:"\2212";}
.mkt-faq-item p{margin:10px 0 0; color:var(--ink-soft); font-size:.9rem;}

/* ---------- footer ---------- */
.mkt-footer{background:var(--black); color:#D8D2E8; padding:50px 20px 26px;}
.mkt-footer-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px;}
.mkt-footer h4{color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; font-family:inherit;}
.mkt-footer a{color:#D8D2E8; font-size:.86rem; display:block; padding:4px 0;}
.mkt-footer a:hover{color:var(--gold);}
.mkt-footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:10px; cursor:pointer; width:fit-content;}
.mkt-footer-brand img{
  height:48px;
  /* The logo's linework is black on transparent, so it vanishes against this
     footer's near-black background -- a tight white glow hugging the actual
     silhouette restores contrast without altering the mark's real colors. */
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,255,255,.65));
}
.mkt-footer-brand span{font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:#fff;}
.mkt-footer-bottom{max-width:1180px; margin:34px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; color:#8E88A3; text-align:center;}

/* ---------- scroll-reveal ----------
   JS adds .reveal-ready once it's confirmed IntersectionObserver exists,
   THEN elements start hidden -- so a page with JS off, or JS that hasn't
   run yet, always shows full content instead of risking a permanently
   blank section. .revealed is added per-element as it enters view. */
.reveal-ready .reveal-item{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease;}
.reveal-ready .reveal-item.revealed{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal-ready .reveal-item{opacity:1; transform:none; transition:none;}
}

@media(max-width:860px){
  .mkt-nav-left{gap:10px;}
  .mkt-menu{display:none;}
  .mkt-footer-inner{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .mkt-signin{display:none;}
  .mkt-hero{padding:52px 16px 60px;}
  .mkt-hero-icon{height:130px;}
  .mkt-footer-inner{grid-template-columns:1fr;}
  .mkt-mockup-row .mm-bar{display:none;}
  .mkt-blob{display:none;}
  .mkt-nav-right #mktTryFree{font-size:.78rem; padding:9px 14px; white-space:nowrap;}
}

/* =========================================================================
   Immersive lesson shell -- a full-window "classwork" takeover, modeled on
   the outline-rail + maximized-content layout common to corporate/school
   LMS platforms (fixed progress rail, full-bleed content pane, no page
   chrome). Built as a fixed overlay appended to <body> (see
   openLessonOverlay() in app.js) rather than a change to the ordinary
   path-page layout underneath, so opening/closing a lesson never disturbs
   the normal page. Deliberately more restrained than the rest of the site's
   "editorial jewel-tone" look -- solid panel, quiet borders, no glow
   shadows, no mascot art -- direct feedback that the everyday brand styling
   read as too playful for an actual instructional reading/activity surface.
   ========================================================================= */
body.lesson-open{overflow:hidden;}
.lesson-overlay{
  position:fixed; inset:0; z-index:90; display:flex; background:var(--paper);
}
.lesson-rail{
  width:308px; flex-shrink:0; height:100%; overflow-y:auto;
  background:#1C1A2E; color:#EDEBF7; padding:22px 20px 32px;
  box-sizing:border-box;
}
.lesson-main{flex:1; min-width:0; height:100%; overflow-y:auto; background:var(--paper);}
.lesson-main > div{max-width:1400px; margin:0 auto; padding:40px 48px 80px;}

.lr-exit{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:#C7C2E8;
  font-size:.82rem; font-weight:700; cursor:pointer; padding:4px 0; margin-bottom:18px;
}
.lr-exit:hover{color:#fff;}
.lr-belt{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
.lr-belt-figure{height:104px; width:auto; flex-shrink:0; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));}
.lr-belt-name{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:#fff;}
.lr-belt-sub{font-size:.72rem; color:#9992BC; margin-top:2px; letter-spacing:.04em;}
.lr-heading{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:#8B85AD; margin:22px 0 10px;
}
.lr-topics{font-size:.9rem;}

/* Restyle the reused topicColumnHtml() tree (.rail-steps/.rail-step/
   .rail-substep) for this dark, full-height panel -- same markup and same
   lock/current/cleared logic as the ordinary sidebar, just recolored. */
.lesson-rail .rail-step{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:#EDEBF7;
}
.lesson-rail .rail-step .rs-dot{background:rgba(255,255,255,.14); color:#C7C2E8;}
.lesson-rail .rail-step .rs-meta{color:#9992BC;}
.lesson-rail .rail-step.cleared{background:rgba(46,167,110,.14); border-color:rgba(46,167,110,.4);}
.lesson-rail .rail-step.cleared .rs-dot{background:var(--ok); color:#fff;}
.lesson-rail .rail-step.current{background:rgba(255,255,255,.09); border-color:#8B85AD;}
.lesson-rail .rail-step.current .rs-dot{background:#fff; color:#1C1A2E;}
.lesson-rail .rail-step.clickable:hover{border-color:#fff; box-shadow:none;}
.lesson-rail .rail-substeps{border-left-color:rgba(255,255,255,.14);}
.lesson-rail .rail-substep{color:#B6B0D6;}
.lesson-rail .rail-substep .rss-dot{background:rgba(255,255,255,.14); color:#C7C2E8;}
.lesson-rail .rail-substep.cleared{color:#EDEBF7;}
.lesson-rail .rail-substep.cleared .rss-dot{background:var(--ok); color:#fff;}
.lesson-rail .rail-substep.current{color:#fff; background:rgba(255,255,255,.09);}
.lesson-rail .rail-substep.current .rss-dot{background:#fff; color:#1C1A2E;}
.lesson-rail .rail-substep.clickable:hover{background:rgba(255,255,255,.09);}

/* Toned-down "classwork" reading surface: quieter callouts, no glow, no
   mascot slot -- readable, restrained, matches the rail's professional
   register instead of the marketing site's brighter editorial styling. */
.lesson-main .learn-card{padding:0;}
.lesson-main .learn-orient{background:var(--paper); border-color:var(--line);}
.lesson-main .learn-orient div{color:var(--ink);}
.lesson-main .learn-progress,
.lesson-main .learn-frame-progress,
.lesson-main .learn-topics{background:transparent; padding-left:0; padding-right:0; color:var(--ink-soft);}
.lesson-main .learn-progress{border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:2px;}
.lesson-main .lt-chip.current{box-shadow:none;}
.lesson-main .learn-body{padding:0;}

@media(max-width:900px){
  .lesson-overlay{flex-direction:column;}
  .lesson-rail{width:100%; height:auto; max-height:46vh;}
  .lesson-main{height:auto;}
  .lesson-main > div{padding:28px 22px 60px;}
}

/* ---------- interactive activity blocks ----------
   Multiple choice, true/false, matching, find-the-error, sort/categorize,
   and click-to-reveal hotspots -- all click/tap-first (see buildInteractiveFrame()
   in app.js for why drag is a bonus, never a requirement). Feedback is
   immediate and proportional (a quick color flash), not an oversized
   celebration, on the theory that small, fast feedback on routine
   correctness reads as more professional than a big animated reward. */
.ia-block{margin:8px 0 4px;}
.ia-instructions{font-size:.92rem; color:var(--ink-soft); margin-bottom:12px;}
.ia-prompt{font-size:1rem; line-height:1.55; margin-bottom:14px; font-weight:600; color:var(--ink);}
.ia-choices{display:flex; flex-direction:column; gap:8px;}
.ia-tf-choices{flex-direction:row; gap:12px;}
.ia-choice{
  text-align:left; padding:11px 14px; border-radius:var(--r-sm); border:1.5px solid var(--line);
  background:#fff; font-size:.94rem; line-height:1.4; cursor:pointer; transition:border-color .12s, background .12s;
}
.ia-tf-choices .ia-choice{flex:1; text-align:center; font-weight:700;}
.ia-choice:hover:not(:disabled){border-color:var(--mystic);}
.ia-choice:disabled{cursor:default;}
.ia-choice.correct{border-color:var(--ok); background:var(--ok-soft); color:#1f4d2e; font-weight:700;}
.ia-choice.wrong{border-color:var(--bad); background:var(--bad-soft); color:#5a1f1f;}
.ia-feedback{margin-top:12px; padding:10px 12px; border-radius:var(--r-sm); font-size:.9rem; line-height:1.5;}
.ia-feedback.ok{background:var(--ok-soft); color:#1f4d2e;}
.ia-feedback.bad{background:var(--bad-soft); color:#5a1f1f;}

.ia-match-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;}
.ia-match-col{display:flex; flex-direction:column; gap:8px;}
.ia-match-item{
  padding:10px 12px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:#fff;
  font-size:.9rem; line-height:1.4; text-align:left; cursor:pointer;
}
.ia-match-item:hover:not(:disabled){border-color:var(--mystic);}
.ia-match-item.selected{border-color:var(--indigo); background:var(--indigo-soft);}
.ia-match-item.matched{border-color:var(--ok); background:var(--ok-soft); color:#1f4d2e; cursor:default;}
.ia-match-item.wrong{border-color:var(--bad); background:var(--bad-soft);}

.ia-sentence{font-size:1rem; line-height:2.1; padding:14px 16px; border-radius:var(--r-sm); background:var(--paper); border:1px solid var(--line);}
.ia-span{cursor:pointer; border-radius:4px; padding:1px 3px; transition:background .12s;}
.ia-span:hover{background:var(--lilac);}
.ia-span.correct{background:var(--ok-soft); color:#1f4d2e; font-weight:700;}
.ia-span.wrong{background:var(--bad-soft); color:#5a1f1f;}
.ia-span.locked{cursor:default; pointer-events:none;}

.ia-cat-pool{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.ia-cat-item{
  padding:8px 12px; border-radius:999px; border:1.5px solid var(--line); background:#fff;
  font-size:.86rem; font-weight:600; cursor:grab;
}
.ia-cat-item:hover:not(:disabled){border-color:var(--mystic);}
.ia-cat-item.selected{border-color:var(--indigo); background:var(--indigo-soft);}
.ia-cat-item.placed{cursor:default; pointer-events:none;}
.ia-cat-buckets{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px;}
.ia-cat-bucket{border:1.5px dashed var(--line); border-radius:var(--r-sm); padding:12px; min-height:76px;}
.ia-cat-bucket.wrong{border-color:var(--bad); background:var(--bad-soft);}
.ia-cat-name{font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:8px;}
.ia-cat-drop{display:flex; flex-wrap:wrap; gap:6px;}
.ia-cat-drop .ia-cat-item.correct{border-color:var(--ok); background:var(--ok-soft); color:#1f4d2e;}

.ia-hotspot-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px;}
.ia-hotspot-item{border:1.5px solid var(--line); border-radius:var(--r-sm); padding:4px;}
.ia-hotspot-item.open{border-color:var(--mystic);}
.ia-hotspot-btn{
  width:100%; text-align:left; background:none; border:none; padding:9px 10px; font-size:.9rem;
  font-weight:700; color:var(--indigo); cursor:pointer;
}
.ia-hotspot-reveal{padding:0 10px 10px; font-size:.88rem; line-height:1.5; color:var(--ink);}

/* ---------- critique + try-then-compare ----------
   Weak-vs-model contrast is the core teaching move here: weak passages get
   a muted red treatment with numbered "what's wrong" notes, model passages
   a green one with numbered "what makes it work" notes -- the same visual
   grammar every time, so learners read the pattern at a glance. */
.ia-verdict-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.ia-badge{
  display:inline-block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  padding:4px 10px; border-radius:4px;
}
.ia-badge.weak{background:#F6E3E1; color:#8E2A22;}
.ia-badge.strong{background:#DFF1E6; color:#1D5E36;}
.ia-badge.you{background:var(--indigo-soft); color:var(--indigo);}
.ia-counter{font-size:.78rem; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.ia-model-hint{font-size:.74rem; color:var(--ink-faint); font-style:italic;}

.ia-critique-text, .ap-passage{
  font-family:Georgia, "Times New Roman", serif; font-size:1.06rem; line-height:1.95; color:var(--ink);
  padding:18px 20px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--line);
}
.ia-critique-text{border-left:4px solid #C9564B;}
.ia-model .ap-passage, .ia-compare .ap-passage{border-left:4px solid #2E8B57;}
.ia-crit{cursor:pointer; border-radius:3px; padding:1px 2px; transition:background .12s;}
.ia-crit:hover, .ia-crit:focus{background:var(--lilac); outline:none;}
.ia-crit.found, .ia-crit.revealed{background:#F6E3E1; text-decoration:underline wavy #C9564B; text-underline-offset:4px; text-decoration-thickness:1px;}
.ia-crit.fine{background:#EEF0F4;}
.ia-crit.locked{cursor:default;}
.ia-crit.locked:hover{background:transparent;}
.ia-crit.found.locked:hover, .ia-crit.revealed.locked:hover{background:#F6E3E1;}
.ap-n{
  font-family:var(--font-body, system-ui), sans-serif; font-size:.62rem; font-weight:800; vertical-align:super;
  margin-right:2px; color:inherit;
}
.ia-crit .ap-n{color:#8E2A22;}
.ap-strong{background:#DFF1E6; color:inherit; padding:1px 2px; border-radius:3px;}
.ap-strong .ap-n{color:#1D5E36;}

.ia-crit-notes, .ap-notes{margin:12px 0 0; padding-left:22px; font-size:.88rem; line-height:1.55;}
.ia-crit-notes li, .ap-notes li{margin-bottom:6px; padding-left:4px;}
.ia-crit-notes{color:#6E2A24;}
.ia-crit-notes li::marker{color:#C9564B; font-weight:800;}
.ap-notes-strong{color:#1F4D2E;}
.ap-notes-strong li::marker{color:#2E8B57; font-weight:800;}
.ia-miss{min-height:1.2em; margin-top:10px; font-size:.86rem; color:var(--ink-soft);}
.ia-miss.ok{color:#1F4D2E; font-weight:600;}
.ia-link{background:none; border:none; padding:0; margin-top:8px; color:var(--indigo); font-weight:700; font-size:.84rem; cursor:pointer; text-decoration:underline;}
.ia-model{margin-top:22px; padding-top:18px; border-top:1px dashed var(--line);}
.ia-takeaway{
  margin-top:16px; padding:14px 16px; background:#1C1A2E; color:#EDEBF7; border-radius:var(--r-sm);
  font-size:.95rem; line-height:1.55;
}
.ia-takeaway span{
  display:block; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#B9B2E0; margin-bottom:4px;
}

.ia-try-input{min-height:110px; font-size:.98rem; border-radius:var(--r-sm); border:1.5px solid var(--line);}
.ia-try-input:focus{border-color:var(--indigo); outline:none;}
.ia-try-input[readonly]{background:var(--paper);}
.ia-try-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;}
.ia-try-count{font-size:.78rem; color:var(--ink-faint);}
.ia-compare{margin-top:18px;}
.ia-compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.ia-compare-col .ia-badge{margin-bottom:8px;}
.ia-compare-yours{
  font-family:Georgia, "Times New Roman", serif; font-size:1.02rem; line-height:1.8; padding:18px 20px;
  border-radius:var(--r-sm); background:var(--indigo-soft); border-left:4px solid var(--indigo); white-space:normal;
}
.ia-voice-note{margin:14px 0 0; font-size:.86rem; color:var(--ink-soft); font-style:italic;}
.ia-checklist{margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;}
.ia-checklist-h{font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:8px;}
.ia-checklist label{display:flex; gap:8px; align-items:flex-start; font-size:.9rem; line-height:1.45; margin-bottom:6px; cursor:pointer;}
.ia-checklist input{margin-top:3px;}
@media(max-width:760px){ .ia-compare-grid{grid-template-columns:1fr;} }

/* ---------- evaluation-mode entry (CWC_EVAL_MODE) ---------- */
.eval-entry{
  margin:4px 0 16px; padding:14px 16px; border-radius:var(--r-sm); background:#1C1A2E; color:#EDEBF7; text-align:left;
}
.eval-entry p{font-size:.86rem; line-height:1.45; margin:4px 0 10px; color:#D6D2EE;}
.eval-entry-tag{font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#B9B2E0;}
.eval-home-slot{max-width:420px; margin:18px auto 0;}
/* .btn and friends set their own display, which would otherwise beat the
   hidden attribute inside activity blocks. */
.ia-block [hidden]{display:none !important;}
/* The checkpoint actually open in the lesson pane -- distinct from
   .current, which marks the learner's real progress position. */
.lesson-rail .rail-step.open{border-color:#fff; background:rgba(255,255,255,.14); box-shadow:inset 3px 0 0 #fff;}
.rail-step.open{border-color:var(--indigo);}

/* =========================================================================
   Tarsier coach -- the belt figure in the lesson rail and on a checkpoint's
   first page, plus a one-line coach note under every lesson page. The face
   changes with the moment (reading, explaining, spotting a problem,
   encouraging, pleased, celebrating); the bubble tint follows it quietly.
   ========================================================================= */
.coach-note{display:flex; align-items:flex-end; gap:12px; margin:24px 0 14px; animation:coachIn .28s ease-out;}
.coach-face{width:64px; height:64px; object-fit:contain; flex-shrink:0;}
.coach-bubble{
  position:relative; flex:1; max-width:620px; background:#fff; border:1px solid var(--line);
  border-radius:14px 14px 14px 4px; padding:10px 14px 11px; font-size:.93rem; line-height:1.5; color:var(--ink);
}
.coach-label{
  display:block; font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--indigo); margin-bottom:2px;
}
.coach-pleased .coach-bubble{border-color:#BFE0CB; background:#F5FBF7;}
.coach-celebrate .coach-bubble{border-color:#E6C766; background:#FFF9E8;}
.coach-thinking .coach-bubble{border-color:#D9D2EA;}
.coach-encourage .coach-bubble{border-color:#E9D3B0; background:#FFFBF4;}
@keyframes coachIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ .coach-note{animation:none;} }

.learn-body::after{content:""; display:block; clear:both;}

/* Each belt's own colour carries through the lesson pane. */
.lesson-main .learn-progress{border-bottom:2px solid var(--belt, var(--line));}
.lesson-main .lt-chip.current{background:var(--belt); color:var(--belt-ink);}

.checkpoint-done .cd-figure{width:170px; height:auto; display:block; margin:0 auto 10px;}

/* Expression faces on activity feedback: pleased when right, encouraging
   when not, thinking while a critique is still being worked out. */
.ia-feedback.ok, .ia-feedback.bad, .ia-miss:not(:empty){
  padding-left:58px; min-height:44px; display:flex; align-items:center;
}
.ia-feedback.ok{background:url(/app/assets/mascot/tarsier/pleased.webp) no-repeat 8px center / 40px 40px, var(--ok-soft);}
.ia-feedback.bad{background:url(/app/assets/mascot/tarsier/encourage.webp) no-repeat 8px center / 40px 40px, var(--bad-soft);}
.ia-miss:not(:empty){
  background:url(/app/assets/mascot/tarsier/thinking.webp) no-repeat 8px center / 40px 40px, #F4F2F8;
  border-radius:var(--r-sm); padding-top:6px; padding-bottom:6px;
}
.ia-miss.ok:not(:empty){background:url(/app/assets/mascot/tarsier/pleased.webp) no-repeat 8px center / 40px 40px, var(--ok-soft);}
@media(max-width:900px){
  .lr-belt-figure{height:72px;}
  .coach-face{width:52px; height:52px;}
}

/* =========================================================================
   Magazine layout for lesson pages. A reading column on the left, kept to a
   comfortable line length, with wide material (examples, activities,
   comparisons) using the column's full width; a side column on the right
   carries the coach, the belt figure and what's next. It stays in view
   while the reading column scrolls. Below ~1000px of lesson width the side
   column drops under the content, above the Back/Next buttons.
   ========================================================================= */
.lesson-main{container-type:inline-size;}
.lesson-main .learn-body{
  display:grid; grid-template-columns:minmax(0, 1fr);
  grid-template-areas:"main" "side" "nav"; row-gap:6px;
}
.lb-main{grid-area:main; min-width:0;}
.lb-side{grid-area:side; min-width:0; display:flex; flex-direction:column; gap:18px;}
.lb-nav{grid-area:nav; min-width:0;}
.lb-side:empty, .lc-upnext:empty, .lc-coach:empty{display:none;}

.lb-side .learn-hero{margin:0 auto; width:100%; max-width:130px;}
.lb-side .learn-hero img{width:100%; height:auto; display:block;}
.lb-side .coach-note{margin:8px 0 0;}
.lb-side .learn-upnext{
  margin:0; padding:12px 14px; background:#fff; color:var(--ink);
  border:1px solid var(--line); border-left:3px solid var(--belt-rule, var(--indigo));
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.un-kicker{display:block; font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px;}
.un-title{display:block; font-size:.92rem; font-weight:600; line-height:1.4;}

@container (min-width: 1000px){
  .lesson-main .learn-body{
    grid-template-columns:minmax(0, 1fr) clamp(260px, 27%, 360px);
    grid-template-areas:"main side" "nav side"; grid-template-rows:auto 1fr;
    column-gap:clamp(32px, 4vw, 64px);
  }
  .lb-side{position:sticky; top:24px; align-self:start; padding-top:4px;}
  .lb-side .learn-hero{max-width:220px;}
  .lb-side .coach-note{flex-direction:column; align-items:flex-start; gap:10px; margin:0;}
  .lb-side .coach-face{width:96px; height:96px;}
  .lb-side .coach-bubble{border-radius:4px 14px 14px 14px; max-width:none;}
  .lb-nav{padding-top:10px;}
}

/* ---- magazine typography: hierarchy through scale, weight and rules ---- */
.lesson-main .learn-label{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-size:.7rem; letter-spacing:.16em; color:var(--indigo);
}
.lesson-main .learn-label::before{
  content:""; width:28px; height:3px; border-radius:2px; flex-shrink:0;
  background:var(--belt-rule, var(--indigo));
}
.lesson-main .learn-body h3{
  font-family:var(--font-display); font-size:clamp(1.7rem, 2.6vw, 2.5rem); line-height:1.18;
  letter-spacing:-.01em; margin:2px 0 26px; max-width:30ch; color:var(--ink);
}
.lesson-main .learn-motivation{
  font-family:Georgia, "Times New Roman", serif; font-style:italic; font-size:1.22rem; line-height:1.55;
  max-width:58ch; padding:2px 0 2px 20px; border-left:3px solid var(--belt-rule, var(--indigo));
}
.lesson-main .learn-explain p{font-size:1.07rem; line-height:1.78; max-width:68ch; margin-bottom:16px;}
.lesson-main .learn-explain p:first-child::first-letter{
  float:left; font-family:var(--font-display); font-weight:700; font-size:3.7em; line-height:.82;
  padding:7px 10px 0 0; color:var(--indigo);
}
.lb-main .ia-prompt, .lb-main .ia-instructions, .lb-main .learn-activity > p,
.lb-main .learn-orient div, .lb-main .learn-tips li, .lb-main .learn-remember li{max-width:72ch;}
.lb-main .ia-prompt{font-size:1.12rem;}
.lesson-main .learn-orient{padding:22px 24px; font-size:1.05rem;}

/* One tarsier per side column: when the belt figure is showing, the coach
   note drops its small face. */
.learn-hero ~ .lc-coach .coach-face{display:none;}

/* Phones: the rail becomes a compact header (belt + a toggle for the path
   list) instead of pushing the lesson half a screen down. */
.lr-toggle{display:none;}
@media(max-width:900px){
  .lesson-rail{padding:14px 18px;}
  .lr-exit{margin-bottom:8px;}
  .lr-toggle{
    display:block; width:100%; margin-top:10px; padding:8px 12px; border-radius:var(--r-sm);
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#EDEBF7;
    font-size:.82rem; font-weight:700; cursor:pointer; text-align:left;
  }
  .lesson-rail.folded .lr-heading, .lesson-rail.folded .lr-topics{display:none;}
  .lesson-rail.folded{max-height:none;}
  .lr-belt-figure{height:60px;}
}

/* =========================================================================
   "My work" path page -- magazine-style, matching the lesson pages: a dark
   hero for the belt being viewed (title, progress, one Continue button, and
   the tarsier "speaking" the coach line), the nine belts as a horizontal
   strip, topic cards (the current one as a full-width feature), and a side
   column for promotion status, certificates, free practice and settings.
   ========================================================================= */
main#app:has(.path-page){max-width:1400px;}

.path-hero{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(240px, 330px) auto;
  grid-template-areas:"copy coach fig"; gap:24px 28px; align-items:center;
  background:#1C1A2E; color:#EDEBF7; border-radius:18px; padding:28px 34px; margin:8px 0 18px;
  border-top:5px solid var(--belt, var(--gold));
}
.path-hero .loading{color:#D6D2EE; grid-column:1 / -1;}
.ph-copy{grid-area:copy; min-width:0;}
.ph-coach{grid-area:coach;}
.ph-figure{grid-area:fig; height:190px; width:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));}
.ph-kicker{font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#B9B2E0; margin-bottom:6px;}
.ph-title{font-family:var(--font-display); font-size:clamp(2.1rem, 3.6vw, 3.2rem); line-height:1.04; color:#fff; margin:0 0 16px;}
.ph-progress{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.ph-bar{flex:1; min-width:140px; max-width:340px; height:8px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden;}
.ph-bar span{display:block; height:100%; min-width:6px; background:var(--belt, var(--gold)); border-radius:999px;}
.ph-count{font-size:.85rem; color:#D6D2EE;}
.ph-cta{font-size:1rem; max-width:100%; white-space:normal; text-align:left;}
/* The big figure is the speaker here, so the note drops its own small face
   and its bubble points toward the figure. */
.ph-coach .coach-note{margin:0; animation:none;}
.ph-coach .coach-face{display:none;}
.ph-coach .coach-bubble{border-radius:14px 14px 4px 14px; border:none; box-shadow:0 8px 24px -12px rgba(0,0,0,.5);}

.belt-strip{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:22px; scrollbar-width:thin;}
.bs-belt{
  flex:1 0 118px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm);
  background:#fff; border:1.5px solid var(--line); text-align:left; font:inherit; color:var(--ink);
}
button.bs-belt{cursor:pointer;}
button.bs-belt:hover{border-color:var(--indigo);}
.bs-mark{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.8rem; background:var(--bc); color:var(--bi);
}
.bs-text{display:flex; flex-direction:column; min-width:0;}
.bs-name{font-weight:700; font-size:.86rem; white-space:nowrap;}
.bs-state{font-size:.7rem; color:var(--ink-soft); white-space:nowrap;}
.bs-belt.shut{opacity:.6;}
.bs-belt.shut .bs-mark{background:var(--line-soft); color:var(--ink-faint);}
.bs-belt.cleared .bs-mark{background:var(--ok); color:#fff;}
.bs-belt.current{border-color:var(--gold); background:var(--gold-soft);}
.bs-belt.current .bs-state{color:var(--gold-ink, #7a5c05); font-weight:700;}
.bs-belt.viewed{border-color:var(--indigo); box-shadow:inset 0 -3px 0 var(--indigo);}

.path-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, 340px); gap:30px; align-items:start;}
.path-main{min-width:0;}
.path-side{display:flex; flex-direction:column; gap:14px; min-width:0;}
.path-side .card{margin:0;}
.path-side h3{font-size:1rem; margin-top:0;}
.path-side .faint{font-size:.82rem; margin:-2px 0 10px;}
.path-section{margin-bottom:30px;}
.path-section:empty{display:none;}
.path-kicker{
  display:flex; align-items:center; gap:10px; font-size:.7rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--indigo);
}
.path-kicker::before{content:""; width:28px; height:3px; border-radius:2px; background:var(--belt-rule, var(--indigo));}
.path-h2{font-family:var(--font-display); font-size:clamp(1.6rem, 2.4vw, 2.2rem); line-height:1.15; margin:6px 0 6px;}
.path-dek{color:var(--ink-soft); margin:0 0 18px; max-width:70ch;}

.topic-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.topic-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px;
  display:flex; flex-direction:column; gap:8px; min-width:0;
}
.topic-card.clickable{cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .12s;}
.topic-card.clickable:hover, .topic-card.clickable:focus-visible{
  border-color:var(--indigo); box-shadow:0 10px 24px -14px rgba(28,26,46,.45); transform:translateY(-1px); outline:none;
}
.topic-card.current{grid-column:1 / -1; border-top:4px solid var(--belt-rule, var(--indigo)); padding:24px 28px;}
.topic-card.current .tc-title{font-size:clamp(1.4rem, 2vw, 1.8rem);}
.topic-card.current .tc-sessions{columns:2; column-gap:32px;}
.topic-card.locked{background:transparent; border-style:dashed;}
.topic-card.locked .tc-title{color:var(--ink-soft);}
.tc-kicker{font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);}
.tc-status{
  display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:800; padding:3px 10px;
  border-radius:999px; white-space:nowrap;
}
.tc-status.ok{background:var(--ok-soft); color:var(--ok);}
.tc-status.now{background:var(--belt, var(--gold)); color:var(--belt-ink, #2B1E05);}
.tc-status.shut{background:var(--line-soft); color:var(--ink-faint);}
.tc-title{font-family:var(--font-display); font-size:1.2rem; line-height:1.25; margin:0; color:var(--ink);}
.tc-sessions{margin:2px 0 0; padding-left:20px; font-size:.88rem; line-height:1.65; color:var(--ink-soft);}
.tc-meta{font-size:.74rem; color:var(--ink-faint);}
.topic-card.test.clickable{border-color:#E3B9B4;}

@media(max-width:980px){
  .path-grid{grid-template-columns:1fr;}
  .path-hero{grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"copy fig" "coach coach";}
  .ph-figure{height:140px;}
}
@media(max-width:600px){
  .path-hero{padding:20px; gap:16px;}
  .ph-figure{height:100px;}
  .topic-card.current{padding:20px;}
  .topic-card.current .tc-sessions{columns:1;}
  .bs-belt{flex-basis:112px;}
}
/* Narrow screens: topics, then the side column (promotion status, practice,
   settings), then saved work last -- a long history table shouldn't push the
   useful cards off the bottom. */
@media(max-width:980px){
  .path-grid{display:flex; flex-direction:column; gap:22px;}
  .path-main{display:contents;}
  .path-main > .path-section:not(#savedWork){order:1;}
  .path-side{order:2;}
  #savedWork{order:3;}
}
@media(max-width:600px){
  #savedWork .card{overflow-x:auto;}
  #savedWork .tbl th:nth-child(4), #savedWork .tbl td:nth-child(4),
  #savedWork .tbl th:nth-child(6), #savedWork .tbl td:nth-child(6){display:none;}
}

/* The lesson sits directly on the page, magazine-style -- no box around it
   -- with a gutter that scales with the window instead of a fixed 48px. */
.lesson-main > div{padding:28px clamp(18px, 3.5vw, 48px) 80px;}
.lesson-main .learn-card{background:transparent; border:none; box-shadow:none; border-radius:0;}

/* Sort items are often full sentences: pill ends turn them into ovals once
   they wrap, so use soft rectangles, and let sorted items fill their group. */
.ia-cat-item{border-radius:10px; text-align:left; line-height:1.4;}
.ia-cat-drop{flex-direction:column; align-items:stretch;}
.ia-cat-drop .ia-cat-item{width:100%; font-weight:500; font-size:.84rem;}

/* ---------- review mode (admin review student / evaluation mode) ---------- */
.rail-substep.open{color:var(--ink);}
.rail-substep.open .rss-dot{background:var(--indigo-soft); color:var(--indigo);}
.lesson-rail .rail-substep.open{color:#D6D2EE;}
.lesson-rail .rail-substep.open .rss-dot{background:rgba(255,255,255,.2); color:#fff;}
.rail-substep.clickable:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}
.tc-status.open{background:var(--indigo-soft); color:var(--indigo);}
.topic-card.open{border-style:solid;}
.tc-session-link{cursor:pointer; color:var(--indigo); text-decoration:underline; text-decoration-color:rgba(74,59,140,.3); text-underline-offset:3px;}
.tc-session-link:hover, .tc-session-link:focus-visible{text-decoration-color:currentColor; outline:none;}
.review-skip{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:4px 0 14px; padding:10px 14px; border-radius:var(--r-sm);
  background:var(--indigo-soft); color:var(--indigo); font-size:.86rem; font-weight:600;
}
.admin-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.admin-head h1{margin-bottom:0;}

/* ---- topic cards: unmistakably "a topic" at a glance ----
   A band in the belt's colour, a big magazine-style topic number, real depth
   off the page, and an actual button -- so each card reads as something to
   open, not as a text panel. */
.topic-cards{gap:18px; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));}
.topic-card{
  position:relative; overflow:hidden; gap:12px; padding:24px 22px 18px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 1px 2px rgba(28,26,46,.06), 0 12px 28px -18px rgba(28,26,46,.45);
}
.topic-card::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--belt-rule, var(--indigo));}
.topic-card.cleared::before{background:var(--ok);}
.topic-card.locked{background:#FBFAF6; border-style:solid; box-shadow:0 1px 2px rgba(28,26,46,.04);}
.topic-card.locked::before{background:#D9D3C4;}
.topic-card.clickable:hover, .topic-card.clickable:focus-visible{
  transform:translateY(-3px); border-color:var(--indigo);
  box-shadow:0 2px 4px rgba(28,26,46,.06), 0 20px 38px -18px rgba(28,26,46,.5);
}
.topic-card.current{grid-column:1 / -1; border-top:1px solid var(--line); padding:30px 30px 22px;}
.tc-top{display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:24px;}
.tc-head{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:14px; align-items:center;}
.tc-num{
  font-family:var(--font-display); font-weight:800; font-size:2.7rem; line-height:.85; letter-spacing:-.02em;
  color:var(--belt-rule, var(--indigo));
}
.topic-card.cleared .tc-num{color:var(--ok);}
.topic-card.locked .tc-num{color:#CFC8B8;}
.topic-card.current .tc-num{font-size:3.6rem;}
.tc-title{font-size:1.3rem;}
.topic-card.current .tc-title{font-size:clamp(1.5rem, 2.2vw, 2rem);}
.tc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft);
}
.tc-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; white-space:nowrap;
  background:var(--indigo); color:#fff; font-weight:700; font-size:.86rem;
}
.topic-card.current .tc-btn{background:var(--gold-metal, var(--gold)); color:#2B1E05; padding:10px 20px; font-size:.95rem;}
.tc-lockline{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--ink-faint);}
.tc-lockline.done{color:var(--ok); font-weight:700;}
@media(max-width:600px){
  .tc-num{font-size:2.2rem;}
  .topic-card.current .tc-num{font-size:2.8rem;}
}

/* ---- topic complete: where to go next ---- */
.lesson-main .checkpoint-done{max-width:660px; margin:16px auto; padding:36px 32px 30px; border-radius:18px;}
.cd-kicker{font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ok);}
.cd-title{font-family:var(--font-display); font-size:clamp(1.8rem, 3vw, 2.4rem); line-height:1.15; margin:6px 0 10px;}
.checkpoint-done p{color:var(--ink-soft); max-width:52ch; margin-left:auto; margin-right:auto;}
.cd-next{margin:24px 0 14px;}
.cd-next-btn{font-size:1.05rem; padding:14px 26px; max-width:100%; white-space:normal;}
.cd-next-btn[disabled]{opacity:.55; cursor:not-allowed; display:inline-flex; align-items:center; gap:8px;}
.cd-note{font-size:.86rem; margin-top:10px;}
.cd-more{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* =========================================================================
   Belt identity. The lesson panel and the path-page hero take the belt's own
   colour -- deepened toward near-black so white text stays readable on every
   belt, White through Red -- and each belt carries a rank emblem (its title,
   e.g. "Column Pro"). Text inside these panels uses neutral whites so it
   reads on any belt colour, not just on the old violet.
   ========================================================================= */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .lesson-rail, .path-hero{background:color-mix(in srgb, var(--belt, #1C1A2E) 46%, #14121d);}
}
.lr-exit{color:rgba(255,255,255,.85);}
.lr-exit:hover{color:#fff;}
.lr-belt-sub, .lr-heading{color:rgba(255,255,255,.62);}
.lesson-rail .rail-step{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);}
.lesson-rail .rail-step .rs-dot, .lesson-rail .rail-substep .rss-dot{color:rgba(255,255,255,.88);}
.lesson-rail .rail-step .rs-meta{color:rgba(255,255,255,.6);}
.lesson-rail .rail-step.current{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5);}
.lesson-rail .rail-substep, .lesson-rail .rail-substep.open{color:rgba(255,255,255,.8);}
.lesson-rail .rail-substep.current, .lesson-rail .rail-substep.clickable:hover{background:rgba(255,255,255,.12);}
.ph-kicker{color:rgba(255,255,255,.72);}
.ph-count, .path-hero .loading{color:rgba(255,255,255,.82);}
.ph-bar{background:rgba(255,255,255,.18);}
.ph-bar span{background:#fff;}

.belt-emblem{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 8px; border-radius:999px;
  background:var(--bc); color:var(--bi); font-size:.68rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap; line-height:1.2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 2px 8px -3px rgba(0,0,0,.45);
}
.belt-emblem.lg{font-size:.78rem; padding:6px 14px 6px 10px;}
.be-nib{flex-shrink:0;}
.ph-rank{margin:-4px 0 16px;}
.lr-belt-rank{margin:6px 0 3px;}
.bs-title{font-size:.66rem; font-weight:700; color:var(--ink-soft); line-height:1.2;}
.bs-belt.shut .bs-title{color:var(--ink-faint);}
.mkt-journey-pill .jp-name{display:flex; flex-direction:column; line-height:1.15;}
.mkt-journey-pill .jp-title{font-size:.62rem; font-weight:700; opacity:.85; white-space:nowrap;}

/* ---- Issue files: real issues as a magazine explainer ------------------ */
.ia-issue{border:1px solid var(--line); border-radius:var(--r-sm); padding:22px 24px; background:#fffdf8;}
.ia-issue h4{font-family:inherit; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft, #5b5670); margin:0 0 8px;}
.ii-kicker{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--belt-rule, var(--mystic));}
.ii-title{font-family:var(--font-display, Georgia, serif); font-size:1.6rem; line-height:1.2; margin:6px 0 8px;}
.ii-dek{font-size:1.02rem; color:var(--ink-soft, #5b5670); margin:0 0 14px;}
.ia-issue ul{margin:0; padding-left:1.1em;}
.ia-issue li{margin:0 0 6px; line-height:1.5;}
.ii-bg{border-top:2px solid var(--belt-rule, var(--line)); padding-top:12px; margin-bottom:16px;}
.ii-sides{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
@container (max-width: 640px){ .ii-sides{grid-template-columns:1fr;} }
@media (max-width: 640px){ .ii-sides{grid-template-columns:1fr;} }
.ii-side{border-radius:var(--r-sm); padding:14px 16px; border-left:4px solid;}
.ii-for{background:#eef6f1; border-color:#2f7d5b;}
.ii-against{background:#fbefeb; border-color:#b3472d;}
.ii-for h4{color:#23624a;} .ii-against h4{color:#8e3620;}
.ii-thesis{font-style:italic; margin:0 0 8px;}
.ii-chips{display:flex; flex-wrap:wrap; gap:6px;}
.ii-chip{font-size:.82rem; padding:3px 10px; border-radius:999px; background:#f1eee6; border:1px solid var(--line);}
.ii-who{margin-bottom:14px;}
.ii-question{background:#f6f2ff; border-radius:var(--r-sm); padding:10px 14px; margin:0 0 10px;}
.ii-sources, .ii-asof{font-size:.78rem; color:var(--ink-soft, #6b6680); margin:4px 0 0;}

/* ---- Rearrange-the-sentences and reading cards ------------------------- */
.ia-seq-topic{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--belt-rule, var(--mystic)); margin-bottom:6px;}
.ia-seq-built-h{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:12px 0 6px;}
.ia-seq-built{min-height:54px; border:1.5px dashed var(--line); border-radius:var(--r-sm); padding:8px 8px 8px 30px; margin:0 0 12px; background:#fffdf8;}
.ia-seq-built li{margin:4px 0;}
.ia-seq-empty{list-style:none; margin-left:-22px !important; color:var(--ink-faint); font-size:.9rem;}
.ia-seq-picked{all:unset; cursor:pointer; display:block; padding:6px 8px; border-radius:6px; line-height:1.5;}
.ia-seq-picked:hover{background:var(--bad-soft);}
.ia-seq-pool{display:flex; flex-direction:column; gap:8px;}
.ia-seq-item{text-align:left; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--card); cursor:pointer; line-height:1.5; font:inherit;}
.ia-seq-item:hover{border-color:var(--mystic);}
.ia-seq-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.ia-block .ia-seq-item[hidden]{display:none !important;}
.ia-seq-answer{margin-top:14px; padding:12px 14px; border-radius:var(--r-sm); background:var(--ok-soft);}
.ia-seq-answer-list{margin:0; padding-left:1.2em;}
.ia-seq-answer-list li{margin:6px 0; line-height:1.5;}
.ia-seq-role{display:inline-block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; background:#fff; border:1px solid var(--line); border-radius:999px; padding:1px 8px; margin-right:8px;}
.ia-seq-expl{margin:10px 0 0; font-size:.92rem;}
.ia-card{border:1px solid var(--line); border-radius:var(--r-sm); padding:20px 22px; background:#fffdf8;}
.ia-card-title{font-size:1.35rem; margin:0 0 10px;}
.ia-card p{line-height:1.6;}
.ia-card-points{padding-left:1.2em; margin:8px 0;}
.ia-card-points li{margin:6px 0; line-height:1.55;}
.ia-card-fa{margin-top:12px;}
.ia-card-fa-topic{font-weight:700; margin-bottom:8px;}
.ia-card-tip{font-size:.86rem; font-style:italic; color:var(--ink-soft); margin:0 0 6px;}
.ia-card-closing{margin-top:12px; font-weight:600;}