/* =====================================================================
   LexLearn — STUDENT AND PUBLIC
   The approved Citytours visual language, extended. Four sections,
   in load order. Nothing here touches the admin console.
   ===================================================================== */

/* ======================================================================
   TOKENS, COMPONENTS AND THE STUDY SCREENS
   The palette, the three tiers it is split into, and every screen
   from the dashboard to the reader.
   ====================================================================== */

/* =====================================================================
   LexLearn — Student additions on top of the Citytours template
   ---------------------------------------------------------------------
   Additive only. Reuses the template's .box_style_1, .btn_1, .btn_full,
   .form-group, #tabs, .bs-wizard and #position chrome; adds the learning
   vocabulary the travel template has no equivalent for: semester cards,
   unit grids, marks-category tabs, the Q&A reader, completion, study
   tools and the lock treatment.

   Loaded only on public and /student pages, so the token overrides below
   do not reach the admin console.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. COLOUR TOKENS — the Citytours template's own palette.

   No colour is invented here. Every value below already appears in the
   template's `style.css`:

       #e04f67   its accent            #ededed  its rule grey
       #f9f9f9   its tint              #3c3f40  its footer grey
       #638908   its green             #e74c3c  its red

   The template's colour-variation mechanism is set to
   `color-template-stock.css` (a clone of the shipped `color-aqua.css`
   with #1cbbb4 -> #e04f67), so the template's own accent applies across
   the whole build.

   The three-tier discipline is kept even though the palette is not ours:
   the accent is confined to chrome and primary action, neutrals carry
   every card and border, and state is carried by the template's own
   green, red and grey. That way the tokens can be repointed at a brand
   palette later by editing this block alone.

   The tokens still override lex-components.css for the student side
   only, so the admin console keeps its own palette.
   --------------------------------------------------------------------- */
:root {
  /* ---- chrome and primary action ---- */
  --lex-primary:      #e04f67;
  --lex-primary-dark: #cf4257;
  --lex-primary-soft: #fdeff1;
  --lex-accent:       #e04f67;
  --lex-accent-dark:  #c33a51;
  --lex-accent-soft:  #fdeff1;
  --lex-accent-ink:   #c33a51;   /* accent TEXT on the tint   4.9:1 */
  --lex-on-accent:    #ffffff;

  /* ---- neutrals: cards, borders, grounds ---- */
  --lex-paper:        #ffffff;
  --lex-card:         #ffffff;
  --lex-line:         #ededed;
  --lex-line-strong:  #dddddd;
  --lex-line-control: #cccccc;
  --lex-neutral-soft: #f9f9f9;
  --lex-track:        #ededed;
  --lex-ink:          #444749;   /* body ink            8.9:1 */
  --lex-prose:        #5a5e60;   /* long-form answers   6.5:1 */
  --lex-muted:        #77797b;   /* secondary text      4.6:1 */
  --lex-ground:       #3c3f40;   /* dark sections, footer */

  /* ---- state ---- */
  --lex-done:         #00796b;   /* teal (chosen 2026-10-09; was olive #56760a):
                                    white text 5.3:1, AA */
  --lex-done-soft:    #e6f2f0;   /* its tint; the teal on it 4.9:1 */
  --lex-danger:       #d5392a;   /* its red, likewise      4.7:1 */
  --lex-danger-dark:  #b02b1e;
  --lex-danger-soft:  #fdf0ee;
  --lex-locked:       #cccccc;
  --lex-locked-ink:   #6f7173;
  --lex-locked-soft:  #f9f9f9;

  /* ---- ramp aliases, kept so existing rules resolve unchanged ---- */
  --lex-wheat:      var(--lex-accent);
  --lex-wheat-deep: var(--lex-accent-dark);
  --lex-sage-pale:  var(--lex-line);
  --lex-sage:       var(--lex-line-strong);
  --lex-sage-deep:  var(--lex-locked);
  --lex-slate:      var(--lex-muted);
  --lex-deep:       var(--lex-primary);

  /* ---- shared-component tokens, repointed ---- */
  --lex-navy:      #e04f67;
  --lex-navy-dark: #cf4257;
  --lex-navy-soft: #fdeff1;
  --lex-success:   var(--lex-done);
  --lex-warning:   #c33a51;
  --lex-radius: 3px;
}

/* ---------------------------------------------------------------------
   2. TYPE SCALE — bigger and heavier than the template's default
   --------------------------------------------------------------------- */
body {
  font-size: 17px;
  line-height: 1.68;
  color: var(--lex-ink);
  background: var(--lex-paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h-display {
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--lex-ink);
  letter-spacing: -0.02em;
}
/* ...except where the template places them on a coloured ground */
#hero .intro_title h1, #hero .intro_title h3, #hero .intro_title p,
#hero_2 .intro_title h1, #hero_2 .intro_title h3, #hero_2 .intro_title p,
.lex-subhead h1, .lex-subhead h2, .lex-subhead p,
footer h3, footer p, footer a, .box_style_1 h3.inner { color: #fff; }

/* Section headings: the template shouts them in caps, which is too much
   at this weight and size. */
.main_title h2, .main_title h3 { text-transform: none; font-size: 34px; font-weight: 800; }
.main_title p { font-size: 19px; color: var(--lex-muted); }
h1 { font-size: 46px; font-weight: 800; line-height: 1.12; }
h2 { font-size: 34px; font-weight: 800; line-height: 1.18; }
h3 { font-size: 25px; font-weight: 700; line-height: 1.25; }
h4 { font-size: 20px; font-weight: 700; line-height: 1.3; }
h5 { font-size: 17px; font-weight: 700; }
p  { font-size: 17px; line-height: 1.68; }
p.lead { font-size: 21px; line-height: 1.6; font-weight: 400; color: var(--lex-prose); }
strong, b { font-weight: 700; }
a { font-weight: 600; }

@media (max-width: 991px) {
  h1 { font-size: 36px; } h2 { font-size: 29px; } h3 { font-size: 22px; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  h1 { font-size: 30px; } h2 { font-size: 25px; } h3 { font-size: 20px; }
  p.lead { font-size: 18.5px; }
}

/* Buttons: larger hit area, heavier label */
a.btn_1, .btn_1, a.btn_full, .btn_full, a.btn_full_outline, .lex-state-action {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  border-radius: var(--lex-radius);
}
a.btn_1, .btn_1 { padding: 13px 26px; }
a.btn_full, .btn_full, a.btn_full_outline { padding: 15px 22px; font-size: 14.5px !important; }
.btn_1.lex-big { font-size: 17px !important; padding: 17px 34px; }

/* Template chrome that assumed a smaller scale */
.box_style_1 { border-radius: var(--lex-radius); border-color: var(--lex-line); }
.box_style_1 h3.inner {
  font-size: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--lex-primary); text-align: left; padding: 14px 20px; margin: -25px -25px 22px;
  border-radius: var(--lex-radius) var(--lex-radius) 0 0;
}
.form-group label { font-size: 14px; font-weight: 700; color: var(--lex-ink); }
.form-control { font-size: 16px; height: 48px; border-radius: var(--lex-radius);
                border-color: var(--lex-line-control); }
textarea.form-control { height: auto; }

/* ---------------------------------------------------------------------
   3. PAGE CHROME
   --------------------------------------------------------------------- */
.lex-subhead {
  background: linear-gradient(135deg, #3c3f40 0%, #55595a 100%);
  color: #fff;
  /* the Citytours header is position:fixed, so every page-top block has
     to clear it the way the template's own hero sections do */
  padding: 140px 0 40px;
  position: relative;
}
.lex-subhead:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--lex-wheat);
}
.lex-subhead h1 { color: #fff; margin: 0; font-size: 42px; font-weight: 800; }
.lex-subhead p  { margin: 10px 0 0; font-size: 18px; color: rgba(255,255,255,.9); font-weight: 500; }
.lex-subhead .lex-subhead-meta { font-size: 15px; color: rgba(255,255,255,.82); margin-top: 12px; font-weight: 600; }
.lex-subhead a { color: var(--lex-wheat); }
.lex-subhead .lex-eyebrow {
  display: inline-block; background: rgba(255,255,255,.16); color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}
@media (max-width: 991px) { .lex-subhead { padding-top: 122px; } .lex-subhead h1 { font-size: 34px; } }
@media (max-width: 767px) { .lex-subhead { padding: 106px 0 30px; } .lex-subhead h1 { font-size: 28px; } .lex-subhead p { font-size: 16px; } }

/* Hero on the landing page keeps the template's own image, tinted */
/* The template ships a placeholder photo for the hero; a brand gradient
   reads better and adds no image weight. */
#hero.lex-hero, #hero_2.lex-hero {
  background: radial-gradient(120% 140% at 12% 0%, #55595a 0%, #3c3f40 55%, #2e3132 100%);
  text-transform: none;
}
#hero.lex-hero:after, #hero_2.lex-hero:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--lex-wheat); z-index: 2;
}
#hero.lex-hero { height: 560px; }
#hero.lex-hero .intro_title h3 { text-transform: none; font-size: 50px; font-weight: 800; letter-spacing: -.02em; }
#hero.lex-hero .intro_title p {
  font-size: 20px; text-transform: none; max-width: 700px; margin: 18px auto 0;
  line-height: 1.6; font-weight: 500;
}
#hero.lex-hero .lex-hero-actions { margin-top: 34px; }
#hero.lex-hero .lex-hero-actions a { margin: 0 7px 12px; }
/* On a maroon ground the brand button disappears, so the hero CTA is amber
   and its companion is a white outline. */
#hero.lex-hero .lex-hero-actions .btn_1 { background: var(--lex-wheat); color: var(--lex-deep); border: 3px solid var(--lex-wheat); }
#hero.lex-hero .lex-hero-actions .btn_1:hover { background: #fff; border-color: #fff; color: var(--lex-deep); }
#hero.lex-hero .lex-hero-actions .btn_1.outline {
  background: transparent; color: #fff; border: 3px solid rgba(255,255,255,.75);
}
#hero.lex-hero .lex-hero-actions .btn_1.outline:hover { background: #fff; color: var(--lex-primary); border-color: #fff; }
@media (max-width: 767px) {
  #hero.lex-hero { height: auto; padding: 100px 0 64px; }
  #hero.lex-hero .intro_title h3 { font-size: 32px; }
  #hero.lex-hero .intro_title p { font-size: 17px; }
}

/* Breadcrumb / hierarchy strip — always says where the student is */
.lex-hierarchy {
  background: #fff; border: 2px solid var(--lex-line);
  border-left: 6px solid var(--lex-wheat-deep);
  border-radius: var(--lex-radius);
  padding: 14px 18px; margin-bottom: 28px;
  font-size: 15px; font-weight: 600; color: var(--lex-muted);
}
.lex-hierarchy ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.lex-hierarchy li { display: flex; align-items: center; gap: 10px; }
.lex-hierarchy li + li:before { content: "\203A"; color: var(--lex-sage); font-size: 19px; font-weight: 700; }
.lex-hierarchy a { color: var(--lex-primary); text-decoration: none; }
.lex-hierarchy a:hover { text-decoration: underline; }
.lex-hierarchy li[aria-current] { font-weight: 800; color: var(--lex-ink); }

.lex-section-title {
  font-size: 14px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--lex-primary); margin: 0 0 16px; font-weight: 800;
}
.lex-divider { border: 0; border-top: 2px solid var(--lex-line); margin: 40px 0; }
.lex-muted { color: var(--lex-muted); }
.lex-mt-0 { margin-top: 0 !important; }

/* ---------------------------------------------------------------------
   4. STAT TILES
   --------------------------------------------------------------------- */
.lex-stat {
  background: #fff; border: 2px solid var(--lex-line); border-radius: var(--lex-radius);
  padding: 22px 24px; margin-bottom: 26px; height: calc(100% - 26px);
}
.lex-stat.is-accent { border-color: var(--lex-accent); background: var(--lex-accent-soft); }
.lex-stat.is-primary { border-color: var(--lex-primary); background: var(--lex-primary-soft); }
.lex-stat .lex-stat-value { font-size: 40px; font-weight: 800; color: var(--lex-primary); line-height: 1.05; letter-spacing: -.03em; }
.lex-stat.is-accent .lex-stat-value { color: var(--lex-deep); }
.lex-stat .lex-stat-label { font-size: 13.5px; color: var(--lex-ink); text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; font-weight: 800; }
.lex-stat .lex-stat-sub   { font-size: 14px; color: var(--lex-muted); margin-top: 8px; font-weight: 500; }

/* ---------------------------------------------------------------------
   5. SEMESTER CARDS
   --------------------------------------------------------------------- */
.lex-sem {
  display: block; background: #fff; border: 2px solid var(--lex-line);
  border-radius: var(--lex-radius); padding: 24px; margin-bottom: 26px;
  height: calc(100% - 26px); text-decoration: none !important; color: inherit;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  position: relative;
}
a.lex-sem:hover, a.lex-sem:focus {
  border-color: var(--lex-primary); transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12); color: inherit;
}
.lex-sem .lex-sem-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--lex-primary-soft); color: var(--lex-primary);
  font-size: 22px; font-weight: 800; margin-bottom: 16px;
}
.lex-sem.is-current { border-color: var(--lex-primary); border-width: 3px; background: #fff; }
.lex-sem.is-current .lex-sem-num { background: var(--lex-primary); color: #fff; }
.lex-sem.is-locked { background: var(--lex-locked-soft); }
.lex-sem.is-locked .lex-sem-num { background: var(--lex-sage-pale); color: var(--lex-slate); }
.lex-sem.is-locked h3 { color: var(--lex-slate); }
.lex-sem h3 { font-size: 24px; margin: 0 0 8px; font-weight: 800; }
.lex-sem .lex-sem-meta { font-size: 14.5px; color: var(--lex-muted); margin-bottom: 16px; font-weight: 600; }
.lex-sem .lex-sem-subjects { font-size: 14px; color: var(--lex-muted); line-height: 1.7; margin: 0 0 18px; }
.lex-sem .lex-sem-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   6. SUBJECT CARDS
   --------------------------------------------------------------------- */
.lex-subject-card {
  display: block; background: #fff; border: 2px solid var(--lex-line);
  border-radius: var(--lex-radius); padding: 24px; margin-bottom: 26px;
  text-decoration: none !important; color: inherit; height: calc(100% - 26px);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
a.lex-subject-card:hover, a.lex-subject-card:focus {
  border-color: var(--lex-primary); transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12); color: inherit;
}
.lex-subject-card .lex-subject-code {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lex-primary); font-weight: 800;
}
.lex-subject-card h3 { font-size: 22px; margin: 10px 0 12px; line-height: 1.28; font-weight: 800; }
.lex-subject-meta { font-size: 14.5px; color: var(--lex-muted); margin-bottom: 16px; font-weight: 600; }
.lex-subject-meta span + span:before { content: "\00B7"; margin: 0 8px; }

/* ---------------------------------------------------------------------
   7. UNIT GRID  (12–15 units per subject)
   --------------------------------------------------------------------- */
.lex-unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.lex-unit-tile {
  display: block; background: #fff; border: 2px solid var(--lex-line);
  border-radius: var(--lex-radius); padding: 18px 18px 16px;
  text-decoration: none !important; color: inherit; position: relative;
  transition: border-color .16s ease, transform .16s ease;
}
a.lex-unit-tile:hover, a.lex-unit-tile:focus {
  border-color: var(--lex-primary); transform: translateY(-2px); color: inherit;
}
.lex-unit-tile .lex-unit-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 8px;
  background: var(--lex-primary-soft); color: var(--lex-primary);
  font-size: 16px; font-weight: 800; margin-bottom: 12px;
}
.lex-unit-tile h4 { font-size: 16.5px; margin: 0 0 10px; line-height: 1.35; font-weight: 700; }
.lex-unit-tile .lex-unit-meta { font-size: 13.5px; color: var(--lex-muted); font-weight: 600; margin-bottom: 10px; }
.lex-unit-tile.is-free { border-color: var(--lex-accent); }
.lex-unit-tile.is-free .lex-unit-num { background: var(--lex-wheat); color: var(--lex-deep); }
.lex-unit-tile.is-locked { background: var(--lex-locked-soft); }
.lex-unit-tile.is-locked .lex-unit-num { background: var(--lex-sage-pale); color: var(--lex-slate); }
.lex-unit-tile.is-locked h4 { color: var(--lex-slate); }
.lex-unit-tile.is-done { border-color: var(--lex-done); }
.lex-unit-tile.is-done .lex-unit-num { background: var(--lex-done); color: #fff; }

/* ---------------------------------------------------------------------
   8. MARKS CATEGORY TABS  — 2 / 8 / 10 / 16
   --------------------------------------------------------------------- */
.lex-marks-tabs {
  display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 28px; padding: 0; list-style: none;
}
.lex-marks-tabs > li { flex: 1 1 160px; display: flex; }
.lex-marks-tabs > li > .lex-marks-tab { width: 100%; }
.lex-marks-tab .lex-marks-value,
.lex-marks-tab .lex-marks-label,
.lex-marks-tab .lex-marks-count { display: block; }
.lex-marks-tab {
  background: #fff; border: 3px solid var(--lex-line);
  border-radius: var(--lex-radius); padding: 16px 18px; cursor: pointer;
  text-align: left; transition: all .14s ease; font-family: inherit;
}
.lex-marks-tab:hover { border-color: var(--lex-sage); }
.lex-marks-tab .lex-marks-value {
  font-size: 26px; font-weight: 800; color: var(--lex-ink); line-height: 1; letter-spacing: -.02em;
}
.lex-marks-tab .lex-marks-label {
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lex-muted); margin-top: 6px;
}
.lex-marks-tab .lex-marks-count { font-size: 13.5px; color: var(--lex-muted); margin-top: 8px; font-weight: 600; }
.lex-marks-tab[aria-selected="true"] {
  border-color: var(--lex-primary); background: var(--lex-primary);
}
.lex-marks-tab[aria-selected="true"] .lex-marks-value,
.lex-marks-tab[aria-selected="true"] .lex-marks-label,
.lex-marks-tab[aria-selected="true"] .lex-marks-count { color: #fff; }
.lex-marks-tab.is-done { border-color: var(--lex-done); }
.lex-marks-tab.is-done[aria-selected="true"] { background: var(--lex-done); border-color: var(--lex-done); }
@media (max-width: 600px) { .lex-marks-tabs > li { flex: 1 1 calc(50% - 6px); } .lex-marks-tab { padding: 13px 14px; } }

/* ---------------------------------------------------------------------
   9. QUESTION ACCORDION
   --------------------------------------------------------------------- */
.lex-qa { border: 2px solid var(--lex-line); border-radius: var(--lex-radius); background: #fff; overflow: hidden; }
.lex-qa + .lex-qa { margin-top: 14px; }
.lex-qa.is-open { border-color: var(--lex-primary); }
.lex-qa.is-done { border-color: var(--lex-done); }

.lex-qa-head {
  display: flex; align-items: flex-start; gap: 16px; width: 100%;
  padding: 20px 22px; background: none; border: 0; text-align: left;
  font-family: inherit; cursor: pointer;
}
.lex-qa-head:hover { background: #f9f9f9; }
.lex-qa-num {
  flex: 0 0 auto; min-width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lex-primary-soft); color: var(--lex-primary);
  font-weight: 800; font-size: 15px;
}
.lex-qa.is-done .lex-qa-num { background: var(--lex-done); color: #fff; }
.lex-qa-title { flex: 1 1 auto; min-width: 0; }
.lex-qa-title .lex-qa-q { display: block; font-size: 18.5px; font-weight: 700; line-height: 1.45; color: var(--lex-ink); margin: 0; }
.lex-qa-title .lex-qa-sub { display: block; font-size: 13.5px; color: var(--lex-muted); margin-top: 7px; font-weight: 600; }
.lex-qa-chev { flex: 0 0 auto; color: var(--lex-muted); font-size: 20px; transition: transform .18s ease; }
.lex-qa.is-open .lex-qa-chev { transform: rotate(180deg); }

.lex-qa-body { padding: 0 22px 24px; border-top: 2px solid var(--lex-line); margin-top: -2px; }
.lex-qa-body[hidden] { display: none; }

/* ---------------------------------------------------------------------
   10. ANSWER TYPOGRAPHY  (the screen students live in)
   --------------------------------------------------------------------- */
.lex-answer { font-size: 18.5px; line-height: 1.82; color: var(--lex-prose); padding-top: 22px; }
.lex-answer h4 {
  font-size: 19px; margin: 34px 0 12px; color: var(--lex-primary);
  font-weight: 800; letter-spacing: -.01em;
}
.lex-answer h4:first-child { margin-top: 0; }
.lex-answer h5 { font-size: 17.5px; margin: 26px 0 10px; font-weight: 800; color: var(--lex-ink); }
.lex-answer p { margin: 0 0 18px; font-size: 18.5px; line-height: 1.82; }
.lex-answer ul, .lex-answer ol { margin: 0 0 20px; padding-left: 26px; }
.lex-answer li { margin-bottom: 11px; }
.lex-answer blockquote {
  border-left: 6px solid var(--lex-wheat-deep); background: var(--lex-wheat);
  padding: 16px 22px; margin: 0 0 20px; font-size: 19px; font-weight: 600; border-radius: 0 4px 4px 0;
}
.lex-answer blockquote p { margin: 0; font-size: 19px; }
.lex-answer table { width: 100%; margin-bottom: 22px; font-size: 16.5px; border-collapse: collapse; }
.lex-answer table th {
  background: var(--lex-primary); color: #fff; font-weight: 700;
  text-align: left; padding: 12px 14px; border: 1px solid var(--lex-primary);
}
.lex-answer table td { border: 1px solid var(--lex-line); padding: 12px 14px; vertical-align: top; }
.lex-answer table tr:nth-child(even) td { background: var(--lex-paper); }
.lex-answer em { font-style: italic; }
.lex-answer .sample-flag { font-size: 15px; }
@media (max-width: 600px) {
  .lex-answer, .lex-answer p { font-size: 17.5px; line-height: 1.78; }
  .lex-answer table { font-size: 15px; }
}
/* The student's own answer text size (Settings). Normal is the default
   above and has no class of its own, so it looks exactly as it always has;
   print keeps its own sizing. */
@media screen {
  .lex-answer.lex-size-large, .lex-answer.lex-size-large p { font-size: 21px; }
  .lex-answer.lex-size-large blockquote, .lex-answer.lex-size-large blockquote p { font-size: 21.5px; }
  .lex-answer.lex-size-large table { font-size: 18.5px; }
  .lex-answer.lex-size-xlarge, .lex-answer.lex-size-xlarge p { font-size: 23.5px; }
  .lex-answer.lex-size-xlarge blockquote, .lex-answer.lex-size-xlarge blockquote p { font-size: 24px; }
  .lex-answer.lex-size-xlarge table { font-size: 21px; }
}

/* Focused reader page */
/* Bootstrap 3 sets html{font-size:10px}, so the reading column is sized in px. */
.lex-reader { max-width: 760px; }
.lex-reader .lex-reader-marks {
  display: inline-block; background: var(--lex-primary); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 18px;
}
.lex-reader .lex-reader-question {
  font-size: 30px; line-height: 1.32; font-weight: 800; color: var(--lex-ink); margin: 0 0 10px;
  letter-spacing: -.02em;
}
.lex-reader .lex-reader-context { font-size: 15px; color: var(--lex-muted); font-weight: 600; margin-bottom: 4px; }
@media (max-width: 600px) { .lex-reader .lex-reader-question { font-size: 24px; } }

.lex-reader-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 42px; }
.lex-reader-nav a, .lex-reader-nav span {
  flex: 1 1 0; border: 2px solid var(--lex-line); border-radius: var(--lex-radius);
  padding: 16px 20px; font-size: 15.5px; font-weight: 700; text-decoration: none;
  color: var(--lex-ink); background: #fff;
}
.lex-reader-nav a:hover { border-color: var(--lex-primary); }
.lex-reader-nav .is-disabled { opacity: .45; }
.lex-reader-nav small {
  display: block; color: var(--lex-primary); font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 4px; font-weight: 800;
}
.lex-reader-nav .next { text-align: right; }

/* ---------------------------------------------------------------------
   11. COMPLETION CONTROL
   --------------------------------------------------------------------- */
.lex-complete {
  display: inline-flex; align-items: center; gap: 11px;
  border: 2px solid var(--lex-line); background: #fff; color: var(--lex-muted);
  padding: 11px 20px; border-radius: 30px; font-size: 14.5px; font-weight: 800;
  cursor: pointer; font-family: inherit; transition: all .14s ease;
}
.lex-complete:hover { border-color: var(--lex-done); color: var(--lex-done); }
.lex-complete .lex-complete-mark {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.lex-complete[aria-pressed="true"] {
  background: var(--lex-done); border-color: var(--lex-done); color: #fff;
}
.lex-complete[aria-pressed="true"] .lex-complete-mark { background: #fff; color: var(--lex-done); border-color: #fff; }

/* ---------------------------------------------------------------------
   12. AUDIO / READ-ALOUD
   --------------------------------------------------------------------- */
.lex-audio {
  display: inline-flex; align-items: center; gap: 9px;
  border: 2px solid var(--lex-accent-dark); background: var(--lex-wheat); color: var(--lex-deep);
  padding: 10px 18px; border-radius: 30px; font-size: 14px; font-weight: 800;
  cursor: pointer; font-family: inherit; transition: all .14s ease;
}
.lex-audio:hover { background: var(--lex-accent); color: var(--lex-deep); }
.lex-audio[aria-pressed="true"] { background: var(--lex-deep); color: #fff; border-color: var(--lex-deep); }
.lex-audio .lex-audio-icon { font-size: 15px; }
.lex-audio[aria-pressed="true"] .lex-audio-bars { display: inline-flex; }
.lex-audio-bars { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.lex-audio-bars i {
  display: block; width: 3px; background: currentColor; border-radius: 1px;
  animation: lex-eq .9s ease-in-out infinite;
}
.lex-audio-bars i:nth-child(1) { height: 6px;  animation-delay: 0s; }
.lex-audio-bars i:nth-child(2) { height: 12px; animation-delay: .15s; }
.lex-audio-bars i:nth-child(3) { height: 8px;  animation-delay: .3s; }
@keyframes lex-eq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* ---------------------------------------------------------------------
   13. STUDY TOOLS SIDEBAR
   --------------------------------------------------------------------- */
.lex-tools {
  background: #fff; border: 2px solid var(--lex-line); border-top: 5px solid var(--lex-wheat);
  border-radius: var(--lex-radius); padding: 20px;
}
.lex-tools h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--lex-primary); margin: 0 0 16px; font-weight: 800;
}
.lex-tools .lex-tool-btn {
  display: flex; align-items: center; gap: 13px; width: 100%;
  border: 2px solid var(--lex-line); background: #fff; color: var(--lex-ink);
  padding: 14px 16px; border-radius: var(--lex-radius); margin-bottom: 10px;
  font-size: 15.5px; font-weight: 700; cursor: pointer; text-align: left;
  font-family: inherit; text-decoration: none; transition: all .14s ease;
}
.lex-tools .lex-tool-btn:hover, .lex-tools .lex-tool-btn:focus {
  border-color: var(--lex-primary); background: var(--lex-primary-soft); color: var(--lex-primary);
}
.lex-tools .lex-tool-btn i { font-size: 19px; color: var(--lex-primary); }
.lex-tools .lex-tool-btn.is-on {
  border-color: var(--lex-accent-dark); background: var(--lex-wheat); color: var(--lex-deep);
}
.lex-tools .lex-tool-btn.is-on i { color: var(--lex-deep); }
.lex-tools .lex-tool-btn:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   14. PROGRESS
   --------------------------------------------------------------------- */
.lex-progress { display: block; height: 10px; background: var(--lex-track); border-radius: 6px; overflow: hidden; }
.lex-progress > span {
  display: block; height: 100%; border-radius: 6px; transition: width .45s ease;
  background: linear-gradient(90deg, var(--lex-sage-deep), var(--lex-deep));
}
.lex-progress.is-accent > span { background: linear-gradient(90deg, var(--lex-sage-pale), var(--lex-wheat-deep)); }
.lex-progress.is-done > span { background: var(--lex-done); }
.lex-progress--thin { height: 6px; }
.lex-progress--thick { height: 16px; border-radius: 9px; }
.lex-progress--thick > span { border-radius: 9px; }

.lex-progress-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 2px solid var(--lex-line); }
.lex-progress-row:last-child { border-bottom: 0; }
.lex-progress-row .lex-pr-name { flex: 1 1 auto; font-size: 16.5px; font-weight: 700; min-width: 0; }
.lex-progress-row .lex-pr-bar { flex: 0 0 34%; }
.lex-progress-row .lex-pr-value { flex: 0 0 62px; text-align: right; font-size: 17px; font-weight: 800; color: var(--lex-primary); }
@media (max-width: 600px) {
  .lex-progress-row { flex-wrap: wrap; }
  .lex-progress-row .lex-pr-bar { flex: 1 1 100%; order: 3; }
}

/* ---------------------------------------------------------------------
   15. BADGES — bigger and bolder than the shared defaults
   --------------------------------------------------------------------- */
.lex-badge {
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.lex-badge--free    { background: var(--lex-wheat); color: var(--lex-deep); }
.lex-badge--locked  { background: var(--lex-sage-pale); color: var(--lex-deep); }
.lex-badge--done    { background: var(--lex-done); color: #fff; }
.lex-badge--pending { background: var(--lex-wheat-deep); color: var(--lex-deep); }
.lex-badge--read    { background: var(--lex-primary-soft); color: var(--lex-primary); }
.lex-badge--active  { background: var(--lex-sage-pale); color: var(--lex-deep); }
.lex-badge--current { background: var(--lex-primary); color: #fff; }

/* ---------------------------------------------------------------------
   16. LOCK / SUBSCRIPTION
   --------------------------------------------------------------------- */
.lex-lock-card {
  background: #fff; border: 2px solid var(--lex-line); border-top: 6px solid var(--lex-wheat);
  border-radius: var(--lex-radius); padding: 48px 36px; text-align: center;
}
.lex-lock-card .lex-lock-icon { font-size: 52px; color: var(--lex-primary); display: block; margin-bottom: 20px; }
.lex-lock-card h2 { font-size: 30px; margin: 0 0 14px; font-weight: 800; }
.lex-lock-card p { color: var(--lex-muted); font-size: 18px; line-height: 1.65; max-width: 560px; margin: 0 auto 24px; }
.lex-lock-price { font-size: 44px; font-weight: 800; color: var(--lex-primary); line-height: 1; letter-spacing: -.03em; }
.lex-lock-list { list-style: none; margin: 0 auto 30px; padding: 0; max-width: 480px; text-align: left; }
.lex-lock-list li { padding: 9px 0 9px 34px; position: relative; font-size: 16.5px; font-weight: 600; color: var(--lex-prose); }
.lex-lock-list li:before {
  content: "\2713"; position: absolute; left: 0; top: 7px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--lex-deep); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------------
   17. NOTE / TO-DO / REMINDER CARDS
   --------------------------------------------------------------------- */
.lex-card {
  background: #fff; border: 2px solid var(--lex-line); border-left: 7px solid var(--lex-primary);
  border-radius: var(--lex-radius); padding: 20px 22px; margin-bottom: 16px;
}
.lex-card.colour-amber  { border-left-color: var(--lex-wheat-deep); }
.lex-card.colour-green  { border-left-color: var(--lex-sage-deep); }
.lex-card.colour-maroon { border-left-color: var(--lex-primary); }
.lex-card.is-done { opacity: .6; }
.lex-card.is-overdue { border-left-color: var(--lex-danger); background: var(--lex-danger-soft); }
.lex-card h4 { font-size: 18.5px; margin: 0 0 8px; font-weight: 700; line-height: 1.35; }
.lex-card .lex-card-meta { font-size: 13.5px; color: var(--lex-muted); margin-bottom: 10px; font-weight: 600; }
.lex-card .lex-card-body { font-size: 16px; line-height: 1.65; color: var(--lex-prose); }
.lex-card .lex-card-actions { margin-top: 14px; display: flex; gap: 9px; flex-wrap: wrap; }
.lex-card .lex-card-actions button, .lex-card .lex-card-actions a {
  border: 2px solid var(--lex-line); background: #fff; color: var(--lex-muted);
  padding: 7px 15px; border-radius: 20px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.lex-card .lex-card-actions button:hover, .lex-card .lex-card-actions a:hover {
  border-color: var(--lex-primary); color: var(--lex-primary);
}
.lex-card .lex-card-actions .is-danger:hover { border-color: var(--lex-danger); color: var(--lex-danger); }

/* To-do checkbox */
.lex-check {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  border: 3px solid var(--lex-line); background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 15px; font-weight: 700; padding: 0; transition: all .14s ease;
}
.lex-check:hover { border-color: var(--lex-done); }
.lex-check[aria-pressed="true"] { background: var(--lex-done); border-color: var(--lex-done); color: #fff; }

.lex-todo { display: flex; gap: 16px; align-items: flex-start; }
.lex-todo .lex-todo-body { flex: 1 1 auto; min-width: 0; }
.lex-todo.is-done .lex-todo-body h4 { text-decoration: line-through; color: var(--lex-muted); }

/* ---------------------------------------------------------------------
   18. STATE BLOCKS — override the shared defaults with the bigger scale
   --------------------------------------------------------------------- */
.lex-state { padding: 56px 28px; border-width: 3px; border-radius: var(--lex-radius); background: #fff; }
.lex-state i { font-size: 46px; color: var(--lex-sage); }
.lex-state h4 { font-size: 21px; font-weight: 800; }
.lex-state p { font-size: 16.5px; max-width: 520px; }
.lex-state-action { padding: 13px 26px; font-size: 15px; }
.lex-banner { font-size: 16px; border-left-width: 6px; padding: 16px 18px; border-radius: var(--lex-radius); }
.lex-toast { font-size: 15px; font-weight: 600; border-left-width: 5px; }
.lex-field-error { font-size: 14px; font-weight: 600; }
.sample-flag { border-left-width: 5px; font-weight: 600; }

/* ---------------------------------------------------------------------
   19. HEADER / NAVIGATION weight
   --------------------------------------------------------------------- */
.main-menu > ul > li > a { font-size: 15px !important; font-weight: 700 !important; }
#top_line { font-size: 13.5px; font-weight: 600; }
footer h3 { font-size: 17px; font-weight: 800; }
footer ul li a, footer p { font-size: 15px; }

/* ---------------------------------------------------------------------
   20. PRINT — the reading column only
   --------------------------------------------------------------------- */
@media print {
  .lex-subhead, .lex-hierarchy, .lex-tools, .lex-reader-nav,
  .lex-audio, .lex-complete, .lex-marks-tabs, .lex-demo-bar { display: none !important; }
  .lex-answer { font-size: 12pt; line-height: 1.6; color: #000; }
  .lex-reader .lex-reader-question { font-size: 16pt; }
  a[href]:after { content: ""; }
}

/* ---------------------------------------------------------------------
   21. EQUAL-HEIGHT CARD ROWS
   Bootstrap 3 floats columns, so cards of different heights leave a
   ragged grid. This makes a row lay out as flex without touching the
   template's own grid rules.
   --------------------------------------------------------------------- */
.row.lex-equal { display: flex; flex-wrap: wrap; }
.row.lex-equal > [class*="col-"] { display: flex; float: none; }
.row.lex-equal > [class*="col-"] > * { width: 100%; }
@media (max-width: 767px) { .row.lex-equal { display: block; } .row.lex-equal > [class*="col-"] { display: block; } }

/* ---------------------------------------------------------------------
   22. SHARED COMPONENTS, REPOINTED
   lex-components.css is loaded by both roles and carries a few literal
   colours from the earlier palette (including a blue). They are replaced
   here so nothing off-ramp survives on the student side. The admin
   console still loads the originals.
   --------------------------------------------------------------------- */
.lex-state--error i         { color: var(--lex-danger); }
.lex-state--error           { border-color: #f3cdc8; background: var(--lex-danger-soft); }
.has-error input,
.has-error select,
.has-error textarea         { border-color: var(--lex-danger) !important; }
.lex-toast                  { background: var(--lex-deep); border-left-color: var(--lex-wheat); }
.lex-toast--error           { border-left-color: var(--lex-danger); }
.lex-toast--warning         { border-left-color: var(--lex-wheat-deep); }
.lex-toast--info            { border-left-color: var(--lex-sage-deep); }
.lex-modal-backdrop         { background: rgba(60,63,64,.62); }
.lex-btn--danger            { background: var(--lex-danger); }
.lex-btn--danger:hover,
.lex-btn--danger:focus      { background: var(--lex-danger-dark); }
.lex-btn-ghost:hover,
.lex-btn-ghost:focus        { border-color: var(--lex-sage); color: var(--lex-ink); }
.lex-banner--error          { border-left-color: var(--lex-danger); background: var(--lex-danger-soft); }
.lex-banner--success        { border-left-color: var(--lex-deep);   background: var(--lex-done-soft); }
.lex-banner--warning        { border-left-color: var(--lex-wheat-deep); background: var(--lex-accent-soft); }
.lex-banner                 { border-left-color: var(--lex-sage-deep); background: var(--lex-neutral-soft); }
.lex-field-error            { color: var(--lex-danger); }
.lex-spinner span           { background: var(--lex-primary); }
.lex-skeleton-bar {
  background: linear-gradient(90deg, var(--lex-neutral-soft) 25%, #f9f9f9 37%, var(--lex-neutral-soft) 63%);
  background-size: 400% 100%;
}
.sample-flag {
  background: var(--lex-wheat); border-left-color: var(--lex-primary); color: var(--lex-deep);
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(224,79,103,.55);
}
.lex-skip-link { background: var(--lex-deep); }


/* ---------------------------------------------------------------------
   23. THE THREE TIERS, APPLIED
   The tokens above declare the palette; this section is where the
   architecture is actually enforced. It is last on purpose — anything
   earlier in the file that reached for the brand colour to decorate a
   card is overruled here.

   Read it as three blocks: what the brand is allowed to touch, what the
   neutrals own, and what the semantic colours mean.
   --------------------------------------------------------------------- */

/* ---- ACCENT — chrome only: header, primary action, active nav,
        selected semester, selected marks tab, main progress fill ---- */
.lex-subhead              { background: var(--lex-primary); }
.lex-subhead:after        { background: var(--lex-accent); height: 4px; }
.lex-subhead a            { color: var(--lex-accent); }
a.btn_1, .btn_1,
a.btn_full, .btn_full     { background: var(--lex-primary); color: #fff; }
a.btn_1:hover, .btn_1:hover,
a.btn_full:hover, .btn_full:hover { background: var(--lex-primary-dark); color: #fff; }
a.btn_1.outline, .btn_1.outline {
  background: transparent; color: var(--lex-primary); border: 2px solid var(--lex-primary);
}
a.btn_1.outline:hover, .btn_1.outline:hover { background: var(--lex-primary); color: #fff; }
a.btn_full_outline        { color: var(--lex-primary); border-color: var(--lex-primary); }
.lex-marks-tab[aria-selected="true"] {
  background: var(--lex-primary); border-color: var(--lex-primary);
}
.lex-marks-tab[aria-selected="true"] .lex-marks-value,
.lex-marks-tab[aria-selected="true"] .lex-marks-label,
.lex-marks-tab[aria-selected="true"] .lex-marks-count { color: #fff; }
.lex-progress > span      { background: var(--lex-primary); }
.lex-badge--current       { background: var(--lex-primary); color: #fff; }
.lex-nav a.is-active,
.lex-subnav a.is-active   { color: var(--lex-primary); border-bottom-color: var(--lex-accent); }
.lex-spinner span         { background: var(--lex-primary); }
.lex-skip-link            { background: var(--lex-primary); }
.lex-toast                { background: var(--lex-ink); border-left-color: var(--lex-accent); }

/* ---- NEUTRAL — every card, border and ground. No brand tint. ---- */
.box_style_1, .lex-sem, .lex-subject-card, .lex-unit-tile, .lex-qa,
.lex-card, .lex-tools, .lex-lock-card, .lex-stat, .lex-marks-tab,
.lex-state {
  border-color: var(--lex-line);
  background: var(--lex-card);
}
/* The template fills a card header with solid brand. At this density
   that reads as six competing banners down a page, so it becomes a
   plain heading with a hairline rule. */
.box_style_1 h3.inner {
  background: transparent; color: var(--lex-ink);
  text-align: left; text-transform: uppercase;
  font-size: 13px; letter-spacing: .12em; font-weight: 800;
  padding: 0 0 12px; margin: 0 0 18px;
  border-bottom: 1px solid var(--lex-line); border-radius: 0;
}
.lex-qa-num, .lex-unit-tile .lex-unit-num, .lex-sem .lex-sem-num {
  background: var(--lex-neutral-soft); color: var(--lex-muted);
}
.lex-qa-head:hover        { background: #f9f9f9; }
.lex-marks-tab:hover      { border-color: var(--lex-line-strong); }
.lex-marks-tab .lex-marks-value { color: var(--lex-ink); }
.lex-marks-tab .lex-marks-label,
.lex-marks-tab .lex-marks-count { color: var(--lex-muted); }
.lex-stat.is-primary, .lex-stat.is-accent { border-color: var(--lex-line-strong); background: var(--lex-card); }
.lex-stat .lex-stat-value { color: var(--lex-primary); }
.lex-stat.is-accent .lex-stat-value { color: var(--lex-accent-dark); }
.lex-progress             { background: var(--lex-track); }
.lex-hierarchy            { background: var(--lex-card); border-color: var(--lex-line);
                            border-left: 4px solid var(--lex-accent); }
.lex-hierarchy a          { color: var(--lex-primary); }
.lex-hierarchy li + li:before { color: var(--lex-line-strong); }
.lex-banner               { border-left-color: var(--lex-line-strong);
                            background: var(--lex-neutral-soft); color: var(--lex-ink); }
.lex-state i              { color: var(--lex-locked); }
.lex-tools                { border-top: 4px solid var(--lex-primary); }
.lex-tools h4             { color: var(--lex-muted); }
.lex-tools .lex-tool-btn  { border-color: var(--lex-line); color: var(--lex-ink); }
.lex-tools .lex-tool-btn i { color: var(--lex-muted); }
.lex-badge--read, .lex-badge--active { background: var(--lex-neutral-soft); color: var(--lex-muted); }
.lex-skeleton-bar {
  background: linear-gradient(90deg, #ededed 25%, #f9f9f9 37%, #ededed 63%);
  background-size: 400% 100%;
}
.lex-answer               { color: var(--lex-prose); }
.lex-answer h4, .lex-answer h5 { color: var(--lex-ink); }
.lex-answer table th      { background: var(--lex-primary); border-color: var(--lex-primary); color: #fff; }
.lex-answer table tr:nth-child(even) td { background: var(--lex-paper); }

/* ---- STATE — completed (the template's green) ---- */
.lex-qa.is-done           { border-color: var(--lex-done); background: var(--lex-card); }
.lex-qa.is-done .lex-qa-num { background: var(--lex-done); color: #fff; }
.lex-qa.is-done .lex-qa-q { color: var(--lex-ink); }
.lex-qa.is-open           { border-color: var(--lex-primary); border-width: 3px; }
.lex-qa.is-open.is-done   { border-color: var(--lex-done); border-width: 3px; }
.lex-unit-tile.is-done    { border-color: var(--lex-done); background: var(--lex-card); }
.lex-unit-tile.is-done .lex-unit-num { background: var(--lex-done); color: #fff; }
.lex-sem.is-done .lex-sem-num { background: var(--lex-done); color: #fff; }
.lex-marks-tab.is-done:not([aria-selected="true"]) {
  border-color: var(--lex-done); background: var(--lex-card);
}
.lex-complete[aria-pressed="true"] {
  background: var(--lex-done); border-color: var(--lex-done); color: #fff;
}
.lex-complete[aria-pressed="true"] .lex-complete-mark {
  background: #fff; color: var(--lex-done); border-color: #fff;
}
.lex-complete:hover       { border-color: var(--lex-done); color: var(--lex-done); }
/* A completed button keeps its white label while hovered (the hover rule above otherwise turned the text the
   button's own colour, hiding "Completed" right after the click). */
.lex-complete[aria-pressed="true"]:hover { color: #fff; }

/* The gavel strike when a question is marked complete (js/student/gavel.js). The button sits in a slot of
   exactly its own size; on the click it is hidden in place (visibility keeps its footprint, so nothing moves,
   and a hidden button cannot be clicked), the gavel then plays inside that footprint — replacing the button,
   never above it — and the button reappears as "Completed" when the strike ends. 1.1 s: wind-up, strike at
   29% (320 ms, the knock), a golden-white burst with star glints and particles, rebound, fade. The SVG fills
   the slot (and clips to it), so the sparkles never leave the button's footprint. Decorative, no clicks.
   Off under prefers-reduced-motion. */
.lex-complete-slot        { position: relative; display: inline-flex; vertical-align: middle; }
.lex-complete.is-held     { visibility: hidden; transition: none; }   /* gone in the same frame as the click */
.lex-complete[aria-busy="true"] { cursor: progress; }
.lex-gavel {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; animation: lex-gavel-show 1.1s ease-out forwards;
}
.lex-gavel svg            { display: block; width: 100%; height: 100%; overflow: hidden; }
.lex-gavel-arm {
  transform-box: view-box; transform-origin: 61px 39.5px;
  animation: lex-gavel-swing 1.1s cubic-bezier(.3, 0, .35, 1) forwards;
}
.lex-gavel-block {
  transform-box: view-box; transform-origin: 26px 60px;
  animation: lex-gavel-block 1.1s ease-out forwards;
}
.lex-gavel-trail          { opacity: 0; animation: lex-gavel-trail 1.1s linear forwards; }
.lex-gavel-flash, .lex-gavel-star, .lex-gavel-dot {
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.lex-gavel-flash          { animation: lex-gavel-flash 1.1s ease-out forwards; }
.lex-gavel-ray            { opacity: 0; stroke-dasharray: 1 1; stroke-dashoffset: 1;
                            animation: lex-gavel-ray 1.1s ease-out forwards; }
.lex-gavel-star           { animation: lex-gavel-star 1.1s ease-out forwards; }
.lex-gavel-dot            { animation: lex-gavel-dot 1.1s ease-out forwards; }
@keyframes lex-gavel-show {
  0% { opacity: 0; } 8% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes lex-gavel-swing {
  0%   { transform: rotate(14deg); }    /* positive = the head (left of the pivot) rises */
  19%  { transform: rotate(26deg); }    /* wind-up */
  29%  { transform: rotate(0deg); }     /* impact: the head meets the block */
  36%  { transform: rotate(7deg); }     /* rebound */
  44%  { transform: rotate(1deg); }
  100% { transform: rotate(1deg); }
}
@keyframes lex-gavel-block {
  0%, 28% { transform: scaleY(1); } 31% { transform: scaleY(.88); } 38%, 100% { transform: scaleY(1); }
}
@keyframes lex-gavel-trail {           /* the swing's motion streaks, only on the way down */
  0%, 19% { opacity: 0; } 25% { opacity: .75; } 30% { opacity: .35; } 38%, 100% { opacity: 0; }
}
@keyframes lex-gavel-flash {           /* the golden-white glow at the point of impact */
  0%, 28% { opacity: 0; transform: scale(.2); }
  31%     { opacity: 1; transform: scale(.75); }
  42%     { opacity: .85; transform: scale(1); }
  62%, 100% { opacity: 0; transform: scale(1.15); }
}
@keyframes lex-gavel-ray {             /* short light rays that shoot out and retract */
  0%, 29% { opacity: 0; stroke-dashoffset: 1; }
  34%     { opacity: 1; stroke-dashoffset: 0; }
  52%, 100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes lex-gavel-star {            /* star glints: pop, twinkle, fade */
  0%, 29% { opacity: 0; transform: scale(0) rotate(0deg); }
  37%     { opacity: 1; transform: scale(1.15) rotate(15deg); }
  50%     { opacity: .9; transform: scale(.8) rotate(25deg); }
  64%     { opacity: 1; transform: scale(1) rotate(35deg); }
  84%, 100% { opacity: 0; transform: scale(0) rotate(45deg); }
}
@keyframes lex-gavel-dot {             /* glowing particles drifting out from the impact */
  0%, 29% { opacity: 0; transform: translate(0, 0); }
  35%     { opacity: 1; }
  80%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
@media (prefers-reduced-motion: reduce) {
  .lex-gavel { display: none; }
}
.lex-progress.is-done > span { background: var(--lex-done); }
.lex-badge--done          { background: var(--lex-done); color: #fff; }
.lex-banner--success      { border-left-color: var(--lex-done); background: var(--lex-done-soft); }
.lex-lock-list li:before  { background: var(--lex-done); }
.lex-check[aria-pressed="true"] { background: var(--lex-done); border-color: var(--lex-done); }
.lex-card.colour-green    { border-left-color: var(--lex-done); }
.lex-toast--info          { border-left-color: var(--lex-done); }

/* ---- STATE — attention / free (the template's accent) ---- */
.lex-unit-tile.is-free    { border-color: var(--lex-accent); }
.lex-unit-tile.is-free .lex-unit-num,
.lex-badge--free          { background: var(--lex-accent); color: var(--lex-on-accent); }
.lex-badge--pending       { background: var(--lex-accent-soft); color: var(--lex-accent-ink); }
.lex-audio                { border: 2px solid var(--lex-accent); background: var(--lex-card);
                            color: var(--lex-accent-dark); }
.lex-audio:hover,
.lex-audio[aria-pressed="true"] { background: var(--lex-accent); color: var(--lex-on-accent);
                                  border-color: var(--lex-accent); }
.lex-tools .lex-tool-btn.is-on  { border-color: var(--lex-accent); background: var(--lex-accent-soft);
                                  color: var(--lex-accent-ink); }
.lex-tools .lex-tool-btn.is-on i { color: var(--lex-accent-ink); }
.lex-banner--warning      { border-left-color: var(--lex-accent); background: var(--lex-accent-soft); }
.lex-toast--warning       { border-left-color: var(--lex-accent); }
.lex-answer blockquote    { border-left-color: var(--lex-accent); background: var(--lex-accent-soft); }
.lex-lock-card            { border-top: 5px solid var(--lex-accent); }
.lex-progress.is-accent > span { background: var(--lex-accent); }
.lex-card.colour-amber    { border-left-color: var(--lex-accent); }
.sample-flag              { background: var(--lex-accent-soft);
                            border-left-color: var(--lex-accent); color: var(--lex-ink); }

/* ---- STATE — locked. Quiet, never emphasis. ---- */
.lex-badge--locked        { background: var(--lex-locked-soft); color: var(--lex-locked-ink); }
.lex-unit-tile.is-locked,
.lex-sem.is-locked        { background: var(--lex-locked-soft); border-color: var(--lex-line); }
.lex-unit-tile.is-locked .lex-unit-num,
.lex-sem.is-locked .lex-sem-num { background: var(--lex-card); color: var(--lex-locked-ink); }
.lex-unit-tile.is-locked h4,
.lex-sem.is-locked h3     { color: var(--lex-locked-ink); }
.lex-unit-tile.is-locked .lex-unit-meta,
.lex-sem.is-locked p      { color: var(--lex-locked-ink); }

/* ---- STATE — error / destructive (the template's red) ---- */
.lex-banner--error        { border-left-color: var(--lex-danger); background: var(--lex-danger-soft); }
.lex-state--error         { border-color: #f3cdc8; background: var(--lex-danger-soft); }
.lex-state--error i       { color: var(--lex-danger-dark); }
.lex-field-error,
.lex-toast--error         { color: var(--lex-danger-dark); }
.lex-toast--error         { border-left-color: var(--lex-danger); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--lex-danger) !important; }
.lex-btn--danger          { background: var(--lex-danger); }
.lex-btn--danger:hover,
.lex-btn--danger:focus    { background: var(--lex-danger-dark); }
.lex-card.is-overdue      { border-left-color: var(--lex-danger); background: var(--lex-danger-soft); }

/* The UI-phase demo strip is shared with the admin console, where navy is
   correct. On the student side it must not introduce a blue. */
.lex-demo-bar             { background: var(--lex-ink); color: #D8D5D1; }
.lex-demo-bar button      { background: #55595a; color: #fff; }
.lex-demo-bar button:hover,
.lex-demo-bar button:focus { background: var(--lex-accent); color: var(--lex-on-accent); }
.lex-demo-bar select       { background: #55595a; color: #fff; border: 0; border-radius: 3px;
                             padding: 3px 6px; font-size: 11.5px; }


/* ---------------------------------------------------------------------
   24. THE EMBEDDED STUDY PANEL, GROUPED LISTS AND THE FILTER WORKFLOW
   Components added when note-writing and reminders moved into the Q&A,
   when completed to-dos started staying in the list, and when Downloads
   became filter -> preview -> download.
   --------------------------------------------------------------------- */

/* ---- the composer that sits beside the answer ---- */
.lex-inline-tool               { padding: 22px 22px 24px; margin-bottom: 22px; }
.lex-inline-tool-where         { font-size: 14px; color: var(--lex-muted);
                                 margin: -6px 0 16px; line-height: 1.5; }
.lex-inline-tool-where strong  { color: var(--lex-ink); font-weight: 800; }
.lex-inline-form .form-group   { margin-bottom: 14px; }
.lex-inline-form label         { font-size: 13px; font-weight: 800; letter-spacing: .02em;
                                 text-transform: uppercase; color: var(--lex-muted);
                                 margin-bottom: 6px; display: block; }
.lex-inline-form .form-control { font-size: 15.5px; }
.lex-inline-form textarea.form-control { line-height: 1.6; }
.lex-inline-form-actions       { display: flex; gap: 12px; align-items: center;
                                 flex-wrap: wrap; margin-top: 4px; }
.lex-inline-form-actions .btn_1 { margin: 0; padding: 11px 22px; }
.lex-inline-form-actions .lex-muted { font-size: 13px; }
.lex-inline-list               { margin-top: 20px; }
.lex-inline-list-title         { font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
                                 text-transform: uppercase; color: var(--lex-muted);
                                 margin: 0 0 12px; }
.lex-inline-empty              { font-size: 14.5px; margin: 16px 0 0; }
.lex-inline-list .lex-card     { margin-bottom: 12px; }

/* ---- chips: quick dates, list filters, unit pickers ---- */
.lex-inline-chips              { display: flex; gap: 8px; flex-wrap: wrap; }
.lex-chip {
  background: var(--lex-card); border: 2px solid var(--lex-line);
  color: var(--lex-ink); font-size: 13.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; line-height: 1.2;
}
.lex-chip span                 { color: var(--lex-muted); font-weight: 800; }
.lex-chip:hover                { border-color: var(--lex-line-control); }
.lex-chip.is-on                { background: var(--lex-primary); border-color: var(--lex-primary); color: #fff; }
.lex-chip.is-on span           { color: rgba(255,255,255,.78); }

/* ---- notes and reminders grouped under their unit ---- */
.lex-note-group                { margin-bottom: 34px; }
.lex-note-group-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 0 0 12px; margin: 0 0 16px; border-bottom: 2px solid var(--lex-line);
}
.lex-note-group-unit           { font-size: 19px; font-weight: 800; color: var(--lex-ink);
                                 letter-spacing: -.01em; }
.lex-note-group-subject        { font-size: 14px; font-weight: 700; color: var(--lex-muted); }
.lex-note-group-link           { margin-left: auto; font-size: 14px; font-weight: 700; }

/* ---- a completed to-do stays on the list, struck through ---- */
.lex-card.is-struck            { opacity: .82; }
.lex-todo.is-done .lex-todo-body h4,
.lex-card.is-struck > .lex-card-body,
.lex-card.is-struck > h4       { text-decoration: line-through;
                                 text-decoration-thickness: 2px;
                                 text-decoration-color: var(--lex-done);
                                 color: var(--lex-muted); }
.lex-todo.is-done .lex-card-meta { color: var(--lex-muted); }
.lex-list-head                 { display: flex; align-items: center; gap: 16px;
                                 flex-wrap: wrap; margin-bottom: 18px; }
.lex-list-head .lex-inline-chips { margin-left: auto; }

/* ---- the download workflow ---- */
.lex-steps                     { display: flex; gap: 10px; list-style: none;
                                 padding: 0; margin: 0 0 26px; flex-wrap: wrap; }
.lex-steps li                  { display: flex; align-items: center; gap: 9px;
                                 font-size: 14.5px; font-weight: 800; color: var(--lex-muted);
                                 padding: 9px 18px 9px 9px; border: 2px solid var(--lex-line);
                                 border-radius: 999px; background: var(--lex-card); }
.lex-steps li span             { width: 26px; height: 26px; border-radius: 50%;
                                 background: var(--lex-neutral-soft); color: var(--lex-muted);
                                 display: inline-flex; align-items: center; justify-content: center;
                                 font-size: 13px; }
.lex-steps li.is-on            { color: var(--lex-ink); border-color: var(--lex-primary); }
.lex-steps li.is-on span       { background: var(--lex-primary); color: #fff; }
.lex-filter-card               { padding: 24px; position: sticky; top: 16px; }
.lex-filter-head               { display: flex; align-items: center; gap: 12px;
                                 flex-wrap: wrap; margin-bottom: 10px; }
.lex-filter-head label         { margin: 0; }
.lex-filter-head .lex-inline-chips { margin-left: auto; }
.lex-field-note                { display: block; font-size: 13px; margin-top: 6px; }

.lex-checklist                 { max-height: 330px; overflow: auto; padding-right: 4px; }
.lex-checklist--row            { max-height: none; display: flex; gap: 10px; flex-wrap: wrap; }
.lex-checkitem {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  border: 2px solid var(--lex-line); border-radius: var(--lex-radius);
  padding: 11px 14px; margin-bottom: 8px; background: var(--lex-card);
}
.lex-checklist--row .lex-checkitem { margin: 0; flex: 0 0 auto; align-items: center; }
.lex-checkitem:hover           { border-color: var(--lex-line-control); }
.lex-checkitem input           { margin: 3px 0 0; }
.lex-checklist--row .lex-checkitem input { margin: 0; }
.lex-checkitem span            { font-size: 15px; font-weight: 700; line-height: 1.4; }
.lex-checkitem strong          { display: block; font-size: 15.5px; font-weight: 800; }
.lex-checkitem em              { display: block; font-style: normal; font-size: 13.5px;
                                 font-weight: 600; color: var(--lex-muted); margin-top: 3px; }
.lex-checkitem.is-locked       { background: var(--lex-locked-soft); cursor: not-allowed; }
.lex-checkitem.is-locked strong,
.lex-checkitem.is-locked em    { color: var(--lex-locked-ink); }
.lex-checkitem .lex-badge      { margin-left: auto; align-self: center; }
.lex-checkitem:has(input:checked) { border-color: var(--lex-primary); }

.lex-preview                   { margin-top: 22px; }
.lex-preview-head              { display: flex; align-items: baseline; gap: 12px;
                                 flex-wrap: wrap; margin-bottom: 16px; }
.lex-preview-head h3           { margin: 0; font-size: 22px; }
.lex-preview-unit              { border: 2px solid var(--lex-line); border-radius: var(--lex-radius);
                                 background: var(--lex-card); padding: 20px 22px; margin-bottom: 16px; }
.lex-preview-unit h4           { margin: 0 0 14px; font-size: 18px; padding-bottom: 10px;
                                 border-bottom: 1px solid var(--lex-line); }
.lex-preview-cat               { margin-bottom: 16px; }
.lex-preview-cat:last-child    { margin-bottom: 0; }
.lex-preview-cat h5            { font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
                                 text-transform: uppercase; color: var(--lex-muted); margin: 0 0 8px; }
.lex-preview-list              { margin: 0; padding-left: 22px; }
.lex-preview-list li           { font-size: 15.5px; line-height: 1.6; margin-bottom: 7px; }

/* ---- subscription status ---- */
.lex-sub-card                  { padding: 26px; }
.lex-sub-status                { display: flex; align-items: center; gap: 12px;
                                 margin: -4px 0 18px; flex-wrap: wrap; }
.lex-sub-status strong         { font-size: 19px; font-weight: 800; }
.lex-sub-status--off           { margin-bottom: 14px; }
.lex-sub-dates                 { margin-bottom: 18px; }

@media (max-width: 991px) {
  .lex-filter-card             { position: static; }
  .lex-checklist               { max-height: none; }
}


/* ======================================================================
   SHARED DISPLAY TREATMENT AND MOTION
   Page headers, headings, scroll reveals, hover behaviour and the
   split-layout auth screens. Applies to public and student pages.
   ====================================================================== */

/* =====================================================================
   LexLearn — the shared display treatment and motion
   ---------------------------------------------------------------------
   Loaded after lex-student.css on EVERY public and student page, so the
   thirty screens read as one product rather than one designed home page
   followed by twenty-nine plainer ones. The admin console does not load
   it and is untouched.

   NO COLOUR IS INTRODUCED. Every value here is one the Citytours
   template already uses, or a token declared in lex-student.css §1.

   Two rules hold throughout:

   1. NOTHING IS HIDDEN IN ITS RESTING STATE. Animation classes are
      added by js/ui/motion.js once the page is running. If the script
      never runs, the page simply reads — it does not show blank space
      where a heading should be. (The template's own hero had the
      opposite fault: animate.css holds .fadeInDown at opacity 0 until
      it fires, so a slow device shows nothing at all.)

   2. `prefers-reduced-motion` turns all of it off, not down.
   ===================================================================== */

/* =====================================================================
   1. DISPLAY TYPOGRAPHY
   The template ships Montserrat and Lato. `.type-serif` on <body> puts
   a display serif on headings only; body copy, labels and UI text never
   change. Both treatments are available on every page so the choice can
   be judged in context, not just on the home page.
   ===================================================================== */
h1, h2,
.lex-subhead h1,
.main_title h2 {
  font-weight: 900;
  letter-spacing: -.026em;
}

/* A section title is a label, not a headline. The template renders it as
   a shouted h2; at display size and in a display face that would compete
   with the page heading, so it is held down to a small, quiet rule. */
.lex-section-title,
.type-serif .lex-section-title {
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lex-muted) !important;
  margin: 0 0 16px;
}

.type-serif h1,
.type-serif h2:not(.lex-section-title),
.type-serif .lex-subhead h1,
.type-serif .main_title h2,
.type-serif .lex-figure .v,
.type-serif .lex-stat-value,
.type-serif .lex-marks-value {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -.012em;
}
.type-serif h1                   { font-size: 48px; line-height: 1.06; }
.type-serif .lex-subhead h1      { font-size: 46px; line-height: 1.06; }
.type-serif h2                   { font-size: 36px; }
.type-serif em                   { font-style: italic; }

@media (max-width: 991px) {
  .type-serif h1, .type-serif .lex-subhead h1 { font-size: 36px; }
}
@media (max-width: 600px) {
  .type-serif h1, .type-serif .lex-subhead h1 { font-size: 29px; }
}

/* =====================================================================
   2. THE PAGE HEADER
   Every screen opens the way a banner does: an eyebrow pill, a display
   heading, a sub-line, and the accent rule closing the block. The same
   shape on all thirty screens is what makes them one product.
   ===================================================================== */
/* The page header is the same object as a home-page banner: the dark
   template grey, the faint rules, the diagonal band and the accent line
   closing it. Section 23 of lex-student.css puts the accent on this
   block as "brand = header"; at full width on thirty screens that reads
   as a wall of colour, and it would not match the hero. The ground wins. */
.lex-subhead {
  overflow: hidden;
  background-color: var(--lex-ground);
  background-image:
    repeating-linear-gradient(to bottom, rgba(237,237,237,.05) 0 1px, transparent 1px 80px),
    linear-gradient(to bottom right, transparent 0 74%, rgba(224,79,103,.10) 74% 100%);
}
.lex-subhead h1, .lex-subhead h2, .lex-subhead p,
.lex-subhead .lex-subhead-meta   { color: #fff; }
.lex-subhead a                   { color: #fff; text-decoration: underline; }
.lex-subhead .lex-eyebrow {
  font-size: 11.5px;
  letter-spacing: .22em;
  font-weight: 800;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  display: inline-block;
  margin-bottom: 16px;
}
.lex-subhead .lex-subhead-meta {
  padding-left: 16px;
  border-left: 3px solid rgba(224,79,103,.85);
  display: inline-block;
}

/* the entrance, replayed on every page load */
.lex-subhead.is-in .lex-eyebrow      { animation: lex-rise .55s cubic-bezier(.22,.61,.36,1) .04s both; }
.lex-subhead.is-in h1                { animation: lex-rise .65s cubic-bezier(.22,.61,.36,1) .14s both; }
.lex-subhead.is-in #page-sub,
.lex-subhead.is-in > .container > p  { animation: lex-rise .65s cubic-bezier(.22,.61,.36,1) .26s both; }
.lex-subhead.is-in .lex-subhead-meta { animation: lex-fade .7s ease .42s both; }
.lex-subhead.is-in:after             { animation: lex-wipe .7s cubic-bezier(.22,.61,.36,1) .3s both; }

@keyframes lex-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes lex-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lex-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lex-subhead:after                   { transform-origin: left center; }

/* =====================================================================
   3. THE BREADCRUMB
   ===================================================================== */
.lex-hierarchy                   { animation: lex-fade .6s ease .5s both; }

/* =====================================================================
   4. SCROLL REVEALS
   The template's own wow.js + animate.css. `.wow` stays visible here;
   wow.js hides its targets itself once it boots, and motion.js restores
   them if it never does.
   ===================================================================== */
.wow                             { visibility: visible; }

/* =====================================================================
   5. HOVER BEHAVIOUR — the same everywhere
   ===================================================================== */
a.btn_1, .btn_1, a.btn_full, .btn_full, a.btn_full_outline, .lex-state-action {
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease, border-color .18s ease;
}
a.btn_1:hover, .btn_1:hover,
a.btn_full:hover, .btn_full:hover,
.lex-state-action:hover          { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.16); }

.lex-sem, .lex-subject-card, .lex-unit-tile, .lex-card, .lex-stat, .lex-quote, .lex-pitch {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lex-sem:hover, .lex-subject-card:hover, .lex-unit-tile:hover,
.lex-stat:hover, .lex-quote:hover, .lex-pitch:hover {
  transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.09);
}
.lex-unit-tile.is-locked:hover,
.lex-sem.is-locked:hover         { transform: none; box-shadow: none; }

.lex-marks-tab                   { transition: transform .16s ease, border-color .16s ease, background-color .16s ease; }
.lex-marks-tab:hover             { transform: translateY(-2px); }

.lex-qa                          { transition: border-color .18s ease, box-shadow .18s ease; }
.lex-qa.is-open                  { box-shadow: 0 8px 22px rgba(0,0,0,.07); }

.lex-tools .lex-tool-btn,
.lex-chip                        { transition: transform .15s ease, border-color .15s ease,
                                               background-color .15s ease, color .15s ease; }
.lex-tools .lex-tool-btn:hover,
.lex-chip:hover                  { transform: translateX(2px); }

/* the answer opening in the accordion */
.lex-qa-body                     { animation: lex-open .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes lex-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* progress bars fill rather than jump */
.lex-progress > span             { transition: width .7s cubic-bezier(.22,.61,.36,1); }

/* =====================================================================
   6. FIGURES THAT COUNT UP
   ===================================================================== */
.lex-stat-value, .lex-figure .v  { font-variant-numeric: tabular-nums; }

/* =====================================================================
   7. THE MORPHING WORD (the template's own morphext.js)
   ===================================================================== */
.lex-morph                       { color: var(--lex-accent); display: inline-block; }
.lex-morph .animated             { display: inline-block; }

/* =====================================================================
   8. REVIEW-ONLY — the headline-face switch, injected by motion.js and
   removed with the UI-phase demo strip before production. Deliberately
   plain: it is scaffolding, not part of the design.
   ===================================================================== */
.lex-type-switch {
  position: fixed; right: 16px; bottom: 58px; z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  background: rgba(60,63,64,.94); color: #fff;
  padding: 8px 10px; border-radius: 3px;
  font: 700 11px/1.2 Montserrat, sans-serif; letter-spacing: .06em;
}
.lex-type-switch span            { opacity: .7; text-transform: uppercase; }
.lex-type-switch button {
  border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff;
  font: 700 11px/1.2 Montserrat, sans-serif; padding: 5px 10px;
}
.lex-type-switch button.is-on    { background: var(--lex-accent); }
@media print { .lex-type-switch { display: none; } }

/* =====================================================================
   9. REDUCED MOTION — all of the above, off.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lex-subhead, .lex-subhead *, .lex-hierarchy, .wow,
  .lex-qa-body, .lex-rail-track, .lex-morph .animated,
  .lex-banner, .lex-banner * {
    animation: none !important;
    transition: none !important;
  }
  .lex-subhead:after             { transform: scaleX(1) !important; }
  .lex-progress > span           { transition: none !important; }
  a.btn_1:hover, .btn_1:hover,
  .lex-sem:hover, .lex-subject-card:hover, .lex-unit-tile:hover,
  .lex-stat:hover, .lex-quote:hover, .lex-pitch:hover,
  .lex-marks-tab:hover           { transform: none !important; }
}

/* =====================================================================
   10. THE AUTH SCREENS — sign in, register, forgot, reset
   A split: the product's case on the template's dark ground, the form on
   white. These pages carry no .lex-subhead, which is what stops the page
   header's accent rule cutting across the card the way it did before.
   ===================================================================== */
/* The template's header is transparent and sits ON the page. Half of the
   auth layout is white, so the nav would be white-on-white across it; the
   header gets a solid ground on these pages only. */
body.lex-auth-page header,
body.lex-auth-page header.sticky { background: var(--lex-ground); }
body.lex-auth-page #top_line     { background: rgba(0,0,0,.22); }

.lex-auth {
  display: flex;
  min-height: calc(100vh - 140px);
  align-items: stretch;
}
.lex-auth-panel {
  flex: 0 0 44%;
  background-color: var(--lex-ground);
  background-image:
    repeating-linear-gradient(to bottom, rgba(237,237,237,.05) 0 1px, transparent 1px 80px),
    linear-gradient(to bottom right, transparent 0 68%, rgba(224,79,103,.12) 68% 100%);
  color: #fff;
  display: flex; align-items: center;
  padding: 150px 0 60px;
  position: relative;
}
.lex-auth-panel:after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 5px;
  background: var(--lex-accent);
}
.lex-auth-panel-inner            { margin-left: auto; width: 100%; max-width: 460px; padding: 0 50px 0 40px; }
.lex-auth-brand                  { display: block; margin-bottom: 30px; }
.lex-auth-panel .lex-eyebrow {
  display: inline-block; margin-bottom: 16px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07);
}
.lex-auth-panel h1               { color: #fff; font-size: 40px; line-height: 1.1; margin: 0 0 16px; }
.type-serif .lex-auth-panel h1   { font-size: 42px; }
.lex-auth-lead                   { color: rgba(255,255,255,.86); font-size: 17.5px; line-height: 1.6; margin: 0 0 30px; }
.lex-auth-points                 { list-style: none; padding: 0; margin: 0 0 30px; }
.lex-auth-points li              { padding: 0 0 16px 22px; position: relative; }
.lex-auth-points li:before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--lex-accent);
}
.lex-auth-points strong          { display: block; font-size: 16px; font-weight: 800; color: #fff; }
.lex-auth-points span            { display: block; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.lex-auth-foot                   { font-size: 14.5px; color: rgba(255,255,255,.66); margin: 0; }
.lex-auth-foot a                 { color: #fff; text-decoration: underline; }

.lex-auth-main {
  flex: 1 1 auto;
  background: var(--lex-card);
  display: flex; align-items: center;
  padding: 150px 40px 60px;
}
.lex-auth-card                   { width: 100%; max-width: 420px; margin: 0 auto; }
.lex-auth.is-wide .lex-auth-panel { flex-basis: 34%; }
.lex-auth.is-wide .lex-auth-card { max-width: 720px; }
.lex-auth-card h2                { font-size: 30px; margin: 0 0 8px; }
.type-serif .lex-auth-card h2    { font-size: 32px; }
.lex-auth-card-sub               { font-size: 16px; color: var(--lex-muted); margin: 0 0 26px; }
.lex-auth-card .form-group       { margin-bottom: 18px; }
.lex-auth-card .btn_full         { margin-top: 6px; }
.lex-auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 0 0 20px; font-size: 14.5px;
}
.lex-checkbox                    { font-weight: 600; font-size: 14.5px; display: flex;
                                   align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.lex-auth-alt                    { font-size: 15px; margin: 20px 0 0; text-align: center; }
.lex-auth-note                   { font-size: 13px; color: var(--lex-muted); margin: 18px 0 0;
                                   text-align: center; padding-top: 16px;
                                   border-top: 1px solid var(--lex-line); }

/* show / hide password */
.lex-pw                          { position: relative; }
.lex-pw .form-control            { padding-right: 68px; }
.lex-pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer;
  font: 800 12.5px/1 Montserrat, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lex-accent-ink); padding: 10px 12px;
}
.lex-pw-toggle:hover             { color: var(--lex-primary-dark); }

@media (max-width: 991px) {
  .lex-auth                      { display: block; min-height: 0; }
  .lex-auth-panel                { padding: 130px 0 46px; }
  .lex-auth-panel:after          { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 5px; }
  .lex-auth-panel-inner          { margin: 0 auto; max-width: 680px; padding: 0 20px; }
  .lex-auth-panel h1,
  .type-serif .lex-auth-panel h1 { font-size: 32px; }
  .lex-auth-main                 { padding: 46px 20px 60px; }
  .lex-auth-card, .lex-auth.is-wide .lex-auth-card { max-width: 560px; }
}
/* On the long register form the panel would otherwise float in the middle
   of a very tall column; it sits at the top and stays put while you fill
   the form in. */
.lex-auth.is-wide .lex-auth-panel      { align-items: flex-start; }
.lex-auth.is-wide .lex-auth-panel-inner { position: sticky; top: 130px; }
@media (max-width: 991px) {
  .lex-auth.is-wide .lex-auth-panel-inner { position: static; }
}


/* ======================================================================
   THE MARKETING HOME PAGE
   The five-banner hero, the testimonial rail and the sections below.
   ====================================================================== */

/* =====================================================================
   LexLearn — the marketing home page
   ---------------------------------------------------------------------
   Loaded ONLY by the home page, after lex-student.css.

   NO NEW COLOUR IS INTRODUCED HERE. Two things follow from that:

   1. The token block below puts every LexLearn colour variable back to a
      value the Citytours template already uses in its own style.css —
      #e04f67 accent, #ededed rules, #f9f9f9 tint, #565a5c text,
      #3c3f40 footer grey, plus the template's own #638908 green and
      #e74c3c red. Nothing is invented.
   2. `color-template-stock.css` (a clone of the template's own
      color-aqua.css with #1cbbb4 -> #e04f67) is loaded before this file,
      which undoes the brand colour-variation on this page only. Every
      other screen is untouched.

   The components below are built out of the template's own vocabulary:
   the Owl carousel it ships (v1.3, in assets/student/js), .btn_1,
   .box_style_1, .main_title and the Bootstrap 3 grid.
   ===================================================================== */

/* The palette now lives in lex-student.css §1 — the whole build uses the
   template's own colour, so this file no longer redeclares it. What
   remains below is the hero slider and the marketing sections, which
   exist on this page only. */

/* =====================================================================
   1. HERO — five banners on the template's own Owl carousel
   ===================================================================== */
.lex-hero-slider                 { position: relative; background: var(--lex-ground); }
.lex-hero-slider .owl-wrapper-outer { overflow: hidden; }
.lex-hero-banner {
  position: relative;
  min-height: 520px;
  display: flex; align-items: center;
  background-color: var(--lex-ground);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
/* The template's header sits transparently ON the hero, so the banner copy
   has to start below it rather than under the logo. */
.lex-hero-inner                { width: 100%; padding: 132px 0 74px; }
.lex-hero-copy                 { max-width: 720px; }
.lex-hero-eyebrow {
  display: inline-block; margin-bottom: 18px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.lex-hero-banner h2 {
  color: #fff; font-size: 46px; line-height: 1.12; font-weight: 800;
  margin: 0 0 18px; letter-spacing: -.02em;
}
.lex-hero-banner h2 em                { font-style: normal; color: #ffc8d1; }
.lex-hero-banner p {
  color: rgba(255,255,255,.88); font-size: 19px; line-height: 1.6;
  font-weight: 500; margin: 0 0 28px; max-width: 560px;
}
.lex-hero-actions              { display: flex; gap: 14px; flex-wrap: wrap; }
.lex-hero-actions .btn_1       { margin: 0; display: inline-block; width: auto; flex: 0 0 auto; }
.lex-hero-actions .btn_1.hollow {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.72);
}
.lex-hero-actions .btn_1.hollow:hover { background: #fff; color: var(--lex-ground); border-color: #fff; }
.lex-hero-proof {
  margin: 26px 0 0; color: rgba(255,255,255,.72);
  font-size: 14.5px; font-weight: 600;
}

/* Owl's own controls, restyled only in the template's palette.
   `.owl-controls` is forced static so the prev/next buttons resolve against
   the slider itself and land at its vertical centre, not beside the dots. */
.lex-hero-slider.owl-theme .owl-controls,
.lex-hero-slider.owl-theme .owl-controls .owl-buttons { position: static; margin: 0; }
.lex-hero-slider .owl-pagination { position: absolute; left: 0; right: 0; bottom: 26px; }
.lex-hero-slider.owl-theme .owl-controls .owl-page span {
  width: 34px; height: 5px; border-radius: 3px; margin: 4px;
  background: rgba(255,255,255,.4); opacity: 1;
}
.lex-hero-slider.owl-theme .owl-controls .owl-page.active span { background: #e04f67; }
.lex-hero-slider.owl-theme .owl-controls .owl-buttons div {
  position: absolute; top: 50%; margin-top: -26px;
  width: 52px; height: 52px; border-radius: 50%; padding: 0;
  background: rgba(0,0,0,.34); color: #fff; opacity: 1;
  font-size: 22px; line-height: 52px; text-align: center;
}
.lex-hero-slider.owl-theme .owl-controls .owl-buttons div:hover { background: #e04f67; }
.lex-hero-slider.owl-theme .owl-controls .owl-buttons .owl-prev { left: 18px; }
.lex-hero-slider.owl-theme .owl-controls .owl-buttons .owl-next { right: 18px; }

/* Before the carousel initialises, only the first banner should show —
   otherwise all five stack down the page on a slow connection. */
.lex-hero-slider:not(.owl-carousel) > .lex-hero-banner:not(:first-child) { display: none; }

@media (max-width: 991px) {
  .lex-hero-banner                    { min-height: 440px; }
  .lex-hero-inner              { padding: 108px 0 66px; }
  .lex-hero-banner h2                 { font-size: 34px; }
  .lex-hero-banner p                  { font-size: 17px; }
}
@media (max-width: 600px) {
  .lex-hero-banner                    { min-height: 400px; background-position: 74% center; }
  .lex-hero-inner              { padding: 96px 0 62px; }
  .lex-hero-banner:after {
    content: ""; position: absolute; inset: 0;
    background: rgba(60,63,64,.62);
  }
  .lex-hero-inner              { position: relative; z-index: 2; }
  .lex-hero-banner h2                 { font-size: 28px; }
  .lex-hero-slider.owl-theme .owl-controls .owl-buttons div { display: none; }
}

/* =====================================================================
   2. THE SIGN-IN / REGISTER STRIP under the hero
   ===================================================================== */
.lex-cta-strip {
  background: #f9f9f9; border-bottom: 1px solid #ededed;
  padding: 26px 0;
}
.lex-cta-strip-inner {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.lex-cta-strip h3                { margin: 0; font-size: 21px; font-weight: 800; }
.lex-cta-strip p                 { margin: 4px 0 0; font-size: 15.5px; color: var(--lex-muted); }
.lex-cta-strip .lex-cta-actions  { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.lex-cta-strip .btn_1            { margin: 0; }

/* =====================================================================
   3. MARKETING SECTIONS
   ===================================================================== */
.lex-section                     { padding: 70px 0; }
.lex-section--tint               { background: #f9f9f9; }
.lex-section--dark               { background: var(--lex-ground); }
.lex-section--dark h2,
.lex-section--dark h3            { color: #fff; }
.lex-section--dark p             { color: rgba(255,255,255,.8); }

.lex-pitch                       { text-align: center; }
.lex-pitch i                     { font-size: 46px; color: #e04f67; display: block; margin-bottom: 16px; }
.lex-pitch h4                    { font-size: 19px; font-weight: 800; margin: 0 0 10px; }
.lex-pitch p                     { font-size: 16px; line-height: 1.65; color: var(--lex-muted); margin: 0; }

.lex-path                        { counter-reset: step; }
.lex-path-step {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 0; border-bottom: 1px solid #ededed;
}
.lex-path-step:last-child        { border-bottom: 0; }
.lex-path-step .n {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: #e04f67; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800;
}
.lex-path-step h4                { margin: 6px 0 6px; font-size: 19px; font-weight: 800; }
.lex-path-step p                 { margin: 0; font-size: 16px; color: var(--lex-muted); line-height: 1.6; }

.lex-figure-row                  { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.lex-figure                      { text-align: center; min-width: 160px; }
.lex-figure .v                   { font-size: 44px; font-weight: 800; color: #fff; line-height: 1; }
.lex-figure .l                   { font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,.72);
                                   margin-top: 8px; letter-spacing: .04em; }

/* =====================================================================
   4. TESTIMONIALS — a continuous scrolling rail
   The template has no marquee, so this is a CSS animation over a plain
   list. It pauses on hover and on focus, and stops entirely for anyone
   who has asked for reduced motion.
   ===================================================================== */
.lex-rail                        { overflow: hidden; position: relative; padding: 6px 0 10px; }
.lex-rail:before, .lex-rail:after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.lex-rail:before                 { left: 0;  background: linear-gradient(90deg,#f9f9f9,rgba(249,249,249,0)); }
.lex-rail:after                  { right: 0; background: linear-gradient(270deg,#f9f9f9,rgba(249,249,249,0)); }
.lex-rail-track {
  display: flex; gap: 20px; width: max-content;
  animation: lex-rail-scroll 46s linear infinite;
}
.lex-rail:hover .lex-rail-track,
.lex-rail:focus-within .lex-rail-track { animation-play-state: paused; }
@keyframes lex-rail-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lex-rail                      { overflow-x: auto; }
  .lex-rail-track                { animation: none; }
}

.lex-quote {
  flex: 0 0 auto; width: 372px;
  background: #fff; border: 1px solid #ededed; border-radius: 3px;
  padding: 24px 26px;
}
.lex-quote-stars                 { color: #e04f67; font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.lex-quote blockquote {
  margin: 0 0 18px; padding: 0; border: 0; background: none;
  font-size: 16px; line-height: 1.65; color: var(--lex-prose); font-style: normal;
}
.lex-quote-who                   { display: flex; align-items: center; gap: 12px; }
.lex-quote-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: #e04f67; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.lex-quote-name                  { font-size: 15px; font-weight: 800; line-height: 1.3; }
.lex-quote-meta                  { font-size: 13.5px; color: var(--lex-muted); font-weight: 600; }
.lex-quote-result {
  margin-left: auto; font-size: 13px; font-weight: 800;
  color: var(--lex-done); background: var(--lex-done-soft); border-radius: 999px; padding: 5px 11px;
}

/* =====================================================================
   5. CLOSING CALL TO ACTION
   ===================================================================== */
.lex-closing                     { text-align: center; }
.lex-closing h2                  { font-size: 38px; font-weight: 800; margin: 0 0 14px; }
.lex-closing p                   { font-size: 18px; margin: 0 auto 26px; max-width: 620px; }
.lex-closing .lex-hero-actions { justify-content: center; }
.lex-cta-strip .btn_1,
.lex-section .btn_1              { display: inline-block; width: auto; }
.lex-closing .lex-small          { font-size: 14px; color: rgba(255,255,255,.66); margin-top: 18px; }


/* ======================================================================
   HOME PAGE MOTION
   The banner drawing animations, in their own layer so the whole file
   can be disabled at once for prefers-reduced-motion.
   ====================================================================== */

/* =====================================================================
   LexLearn — home page motion and display typography
   ---------------------------------------------------------------------
   Loaded after lex-home.css, on the home page only.

   Still NO NEW COLOUR. Everything here is movement and type.

   Two rules govern the whole file:

   1. NOTHING IS HIDDEN BY DEFAULT. Every animated element is fully
      visible in its resting state; the animation classes are added by
      JavaScript once the page is running. If the script fails, or the
      browser is old, the page reads normally instead of showing blank
      space where a headline should be. (The template's own hero had the
      opposite bug — animate.css holds .fadeInDown at opacity 0 until it
      runs, so a slow device shows nothing at all.)

   2. `prefers-reduced-motion` turns all of it off. Not "makes it
      subtler" — off. A student who has asked their operating system to
      stop moving things gets a still page.
   ===================================================================== */

/* =====================================================================
   1. THE BANNER HEADLINE
   The display face, the reveals and the face switch are in
   lex-theme.css, which every page loads. Only the banner's own
   treatment is left here.
   ===================================================================== */
.lex-hero-banner h2 {
  font-size: 54px;
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.lex-hero-banner h2 em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
/* A rule that draws itself under the emphasised phrase. */
.lex-hero-banner h2 em:after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.06em;
  height: 4px; background: currentColor; opacity: .45;
  transform: scaleX(0); transform-origin: left center;
}
.lex-hero-banner.is-active h2 em:after {
  animation: lex-underline .7s cubic-bezier(.22,.61,.36,1) .55s forwards;
}
@keyframes lex-underline { to { transform: scaleX(1); } }

.lex-hero-eyebrow {
  font-size: 11.5px;
  letter-spacing: .22em;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
}
.lex-hero-banner p                    { font-size: 19.5px; line-height: 1.62; font-weight: 400; }
.lex-hero-proof {
  letter-spacing: .01em;
  padding-left: 16px;
  border-left: 3px solid rgba(224,79,103,.85);
}
.type-serif .lex-hero-banner h2       { font-size: 58px; line-height: 1.04; }
.type-serif .lex-hero-banner h2 em    { font-style: italic; }

@media (max-width: 991px) {
  .lex-hero-banner h2, .type-serif .lex-hero-banner h2 { font-size: 38px; }
}
@media (max-width: 600px) {
  .lex-hero-banner h2, .type-serif .lex-hero-banner h2 { font-size: 30px; }
  .lex-hero-banner p                  { font-size: 17px; }
}

/* =====================================================================
   2. THE BANNER GROUND, NOW IN CSS
   The ground, the diagonal band and the rose rule used to be baked into
   the .svg. They are CSS here so the artwork can be inlined and animated
   on its own.
   ===================================================================== */
.lex-hero-banner {
  background-image:
    repeating-linear-gradient(to bottom, rgba(237,237,237,.05) 0 1px, transparent 1px 80px),
    linear-gradient(to bottom right, transparent 0 74%, rgba(224,79,103,.10) 74% 100%);
  overflow: hidden;
}
.lex-hero-banner:before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px; background: #e04f67; z-index: 3;
}

/* ---- the artwork ---- */
.lex-hero-art {
  position: absolute;
  right: 4%; top: 50%; transform: translateY(-50%);
  width: 46%; max-width: 560px; height: 78%;
  pointer-events: none;
  overflow: visible;
}
@media (max-width: 991px) { .lex-hero-art { right: -4%; width: 52%; opacity: .5; } }
@media (max-width: 600px) { .lex-hero-art { right: -14%; width: 74%; opacity: .32; } }

/* =====================================================================
   3. THE DRAW-ON
   A stroked path is given a dash pattern the length of the path, offset
   fully, then the offset is animated to zero — so the line appears to be
   drawn. Filled shapes cannot be drawn, so they fade and scale in behind.
   Both only ever run on the slide that is actually showing.
   ===================================================================== */
.lex-hero-art .draw {
  stroke-dasharray: 1600;
  stroke-dashoffset: 0;           /* resting state: fully visible */
}
.lex-hero-art .pop              { transform-box: fill-box; transform-origin: center; }

.lex-hero-banner.is-active .lex-hero-art .draw {
  animation: lex-draw 1.5s cubic-bezier(.65,.02,.32,1) both;
}
.lex-hero-banner.is-active .lex-hero-art .pop {
  animation: lex-pop .6s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes lex-draw {
  from { stroke-dashoffset: 1600; }
  to   { stroke-dashoffset: 0; }
}
@keyframes lex-pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: inherit; transform: scale(1); }
}
/* The book's lines and the laurel's leaves carry their own stagger as an
   inline animation-delay, written by tools/gen_banners.py — a rotated
   leaf cannot take a CSS transform without losing its angle, so the
   rotation lives on a wrapping <g> and the delay on the shape. */
.lex-hero-banner.is-active .lex-hero-art .pop:not([style*="animation-delay"]) {
  animation-delay: 1.05s;
}

/* ---- the artwork keeps a small life of its own once drawn ---- */
.lex-hero-banner.is-active .lex-hero-art .sway {
  transform-origin: 0px -160px;
  animation: lex-sway 6s ease-in-out 1.7s infinite;
}
@keyframes lex-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}
.lex-hero-banner.is-active .lex-hero-art .knock {
  transform-origin: 0px 250px;
  animation: lex-knock 4.5s ease-in-out 1.9s infinite;
}
@keyframes lex-knock {
  0%, 62%, 100% { transform: rotate(-38deg); }
  72%           { transform: rotate(-16deg); }
  80%           { transform: rotate(-42deg); }
}

/* =====================================================================
   4. THE COPY, PER SLIDE
   Each line arrives a beat after the one above it. The classes are added
   by JS when a slide becomes active and removed when it leaves, so the
   sequence replays on every rotation instead of only on first paint.
   ===================================================================== */
.lex-hero-banner.is-active .lex-hero-eyebrow { animation: lex-rise .6s cubic-bezier(.22,.61,.36,1) .05s both; }
.lex-hero-banner.is-active h2                  { animation: lex-rise .7s cubic-bezier(.22,.61,.36,1) .16s both; }
.lex-hero-banner.is-active .lex-hero-copy > p:not(.lex-hero-proof) {
                                            animation: lex-rise .7s cubic-bezier(.22,.61,.36,1) .3s both; }
.lex-hero-banner.is-active .lex-hero-actions { animation: lex-rise .7s cubic-bezier(.22,.61,.36,1) .44s both; }
.lex-hero-banner.is-active .lex-hero-proof   { animation: lex-fade .8s ease .62s both; }
@keyframes lex-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lex-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- a slow drift on the ground, so a held slide is never quite still */
.lex-hero-banner.is-active { animation: lex-drift 12s ease-in-out both; }
@keyframes lex-drift { from { background-size: 100% 100%, 104% 104%; }
                       to   { background-size: 100% 100%, 118% 118%; } }

/* =====================================================================
   9. REDUCED MOTION — everything above, off.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lex-hero-banner,
  .lex-hero-banner *,
  .lex-rail-track,
  .wow,
  .lex-morph .animated {
    animation: none !important;
    transition: none !important;
  }
  .lex-hero-art .draw          { stroke-dashoffset: 0 !important; }
  .lex-hero-banner h2 em:after        { transform: scaleX(1) !important; }
  .lex-hero-eyebrow,
  .lex-hero-banner h2,
  .lex-hero-banner p,
  .lex-hero-actions            { opacity: 1 !important; transform: none !important; }
}




/* ======================================================================
   THE COURSE, THE YEARS AND THE SEMESTERS INSIDE THEM
   ----------------------------------------------------------------------
   A student thinks in years ("I am in second year"), so the year is the
   level My Course is built around: a band per year, the semesters of
   that year inside it. The number of either comes from the course, never
   from this stylesheet — three years and five both have to look right.
   ====================================================================== */
.lex-course-card {
  display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--lex-line-strong);
  border-radius: var(--lex-radius); padding: 28px 30px; margin-bottom: 34px;
}
.lex-course-card-main             { flex: 1 1 380px; }
.lex-course-card-main h2          { margin: 4px 0 10px; }
.lex-course-card-side             { flex: 0 0 180px; text-align: center; }
.lex-course-facts                 { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; }
.lex-course-facts span            { font-size: 14px; color: var(--lex-muted); }
.lex-course-facts strong          { display: block; font-size: 24px; color: var(--lex-ink); line-height: 1.1; }

/* One ring, one number. A dial rather than a bar because this is the
   single figure the page is about, and a bar of this width would read as
   another row of furniture. */
.lex-dial {
  width: 124px; height: 124px; border-radius: 50%; margin: 0 auto 12px;
  display: grid; place-items: center;
  background: conic-gradient(var(--lex-accent) calc(var(--pct) * 1%), var(--lex-line) 0);
}
.lex-dial:after {
  content: ""; grid-area: 1 / 1; width: 96px; height: 96px;
  border-radius: 50%; background: #fff;
}
.lex-dial span {
  grid-area: 1 / 1; z-index: 1; font-size: 25px; font-weight: 800; color: var(--lex-ink);
}

.lex-year                         { margin-bottom: 40px; }
.lex-year-head                    { margin-bottom: 18px; }
.lex-year-head h3                 { margin: 0 0 6px; font-size: 21px; }
.lex-year-meta                    { font-size: 14px; color: var(--lex-muted); margin-bottom: 10px; }
.lex-progress--slim               { height: 6px; max-width: 420px; }
.lex-year.is-current .lex-year-head h3 { color: var(--lex-accent-ink); }

/* The confirmation line under the registration cascade. It repeats the
   four choices back as one sentence, because four separate dropdowns do
   not add up to a reassuring answer on their own. */
.lex-note-inline {
  background: var(--lex-ground); border-left: 3px solid var(--lex-accent);
  padding: 12px 16px; border-radius: 0 var(--lex-radius) var(--lex-radius) 0;
  /* white on the dark ground: the body ink (#444749) on #3c3f40 could not be read */
  font-size: 14.5px; color: #fff; margin: 6px 0 16px;
}
.lex-note-inline strong           { color: #fff; }

/* The notification bell in the top bar. The count is a number as well as
   a dot, because "you have some" is not as useful as "you have three". */
.lex-bell                         { position: relative; }
.lex-bell-count {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 5px; border-radius: 9px; background: var(--lex-accent);
  color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
/* display:inline-block above would otherwise beat the browser's own
   [hidden] rule, and the bell would show a nought. */
.lex-bell-count[hidden]           { display: none; }


/* ======================================================================
   LIST SCREENS — remembered, revisit, notifications
   ----------------------------------------------------------------------
   Three pages built from the same two pieces: a filter bar that scopes
   everything below it, and a row that is mostly the question, because
   the question is what the student is scanning for.
   ====================================================================== */
.lex-listbar {
  display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap;
  background: #fff; border-bottom: 1px solid var(--lex-line-strong);
  padding: 20px 0 18px; margin-bottom: 28px;
}
.lex-listbar > .form-group        { margin-bottom: 0; min-width: 180px; }
.lex-listbar .lex-listbar-count {
  margin-left: auto; font-size: 14px; font-weight: 700; color: var(--lex-muted);
  padding-bottom: 10px;
}
.lex-listbar .btn_1               { margin: 0; }
@media (max-width: 767px) {
  .lex-listbar > .form-group      { min-width: 0; flex: 1 1 140px; }
  .lex-listbar .lex-listbar-count { margin-left: 0; width: 100%; padding-bottom: 0; }
}

.lex-group                        { margin-bottom: 34px; }
.lex-group-head {
  border-left: 4px solid var(--lex-accent); padding-left: 14px; margin-bottom: 14px;
}
.lex-group-head h3                { margin: 0 0 3px; font-size: 19px; }
.lex-group-meta                   { font-size: 13.5px; color: var(--lex-muted); }

/* One question, one row. The mark weight sits in a fixed place on the
   left so a reader finds it by position rather than by reading. */
.lex-qrow {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--lex-line);
  border-radius: var(--lex-radius); padding: 16px 18px; margin-bottom: 10px;
}
.lex-qrow-marks {
  flex: 0 0 42px; height: 42px; border-radius: 50%;
  background: var(--lex-ground); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.lex-qrow-main                    { flex: 1 1 auto; min-width: 0; }
.lex-qrow-main h4                 { margin: 0 0 4px; font-size: 16px; line-height: 1.45; }
.lex-qrow-meta                    { font-size: 13px; color: var(--lex-muted); }
.lex-qrow-reason {
  margin: 8px 0 0; font-size: 14px; color: var(--lex-ink);
  border-left: 3px solid var(--lex-line-strong); padding-left: 11px;
}
.lex-qrow-actions                 { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.lex-qrow-btn {
  display: inline-block; border: 2px solid var(--lex-accent); color: var(--lex-accent-ink);
  background: #fff; border-radius: var(--lex-radius); padding: 7px 14px;
  font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none;
}
.lex-qrow-btn:hover               { background: var(--lex-accent); color: #fff; }
.lex-qrow-btn--quiet              { border-color: var(--lex-line-control); color: var(--lex-muted); }
.lex-qrow-btn--quiet:hover        { background: var(--lex-ground); border-color: var(--lex-ground); color: #fff; }
.lex-qrow.is-done .lex-qrow-marks { background: var(--lex-done); }
.lex-qrow--revisit                { border-left: 4px solid var(--lex-accent); }
@media (max-width: 600px) {
  .lex-qrow                       { flex-wrap: wrap; }
  .lex-qrow-actions               { width: 100%; }
}

/* A notification is read or it is not, and that difference has to survive
   a glance: an unread one is brighter, carries a dot, and sits on a rule. */
.lex-notif {
  background: #fff; border: 1px solid var(--lex-line);
  border-radius: var(--lex-radius); padding: 20px 22px; margin-bottom: 12px;
}
.lex-notif.is-unread              { border-left: 4px solid var(--lex-accent); }
.lex-notif-head                   { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lex-notif-kind {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lex-muted);
}
.lex-notif--offer .lex-notif-kind { color: var(--lex-accent-ink); }
.lex-notif-at                     { font-size: 12.5px; color: var(--lex-muted); }
.lex-notif-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--lex-accent);
  margin-left: auto;
}
.lex-notif h3                     { margin: 0 0 6px; font-size: 18px; }
.lex-notif p                      { margin: 0; color: var(--lex-ink); font-size: 15px; }
.lex-notif.is-unread h3           { font-weight: 800; }
.lex-notif-actions                { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }


/* The dashboard identity card: who the student is, where they study, and
   how far through the whole course they are — the one place all three
   are shown together. */
.lex-identity {
  display: flex; gap: 34px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--lex-line-strong);
  border-left: 5px solid var(--lex-accent);
  border-radius: var(--lex-radius); padding: 28px 32px; margin-bottom: 34px;
}
.lex-identity-main                { flex: 1 1 420px; }
.lex-identity-main h2             { margin: 4px 0 18px; }
.lex-identity-main .btn_1         { margin: 20px 0 0; display: inline-block; width: auto; }
.lex-identity-side                { flex: 0 0 190px; text-align: center; }
.lex-identity-side .lex-muted     { margin: 0; font-size: 14px; }
.lex-identity-fine                { font-size: 13px; color: var(--lex-muted); margin: 6px 0 0; }
.lex-identity-facts               { display: grid; grid-template-columns: 130px 1fr; gap: 8px 18px; margin: 0; }
.lex-identity-facts dt            { font-size: 13px; font-weight: 700; color: var(--lex-muted);
                                    text-transform: uppercase; letter-spacing: .08em; }
.lex-identity-facts dd            { margin: 0; font-size: 15.5px; color: var(--lex-ink); font-weight: 600; }
@media (max-width: 600px) {
  .lex-identity-facts             { grid-template-columns: 1fr; gap: 2px; }
  .lex-identity-facts dd          { margin-bottom: 10px; }
}
.lex-card.is-unread               { border-left-width: 4px; }
.lex-link-more {
  display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700;
  color: var(--lex-accent-ink);
}


/* ======================================================================
   CHOOSE YOUR COURSE
   ----------------------------------------------------------------------
   Seen once, and only by students whose college offers more than one
   course. A radio is the right control: the choice is exclusive, it is
   short, and every option has to be readable at the same moment.
   ====================================================================== */
.lex-choose                       { max-width: 760px; margin: 0 auto; }
.lex-choice {
  display: flex; gap: 18px; align-items: flex-start; cursor: pointer;
  background: #fff; border: 2px solid var(--lex-line-strong);
  border-radius: var(--lex-radius); padding: 22px 24px; margin-bottom: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.lex-choice:hover                 { border-color: var(--lex-line-control); }
.lex-choice input                 { margin: 4px 0 0; width: 20px; height: 20px;
                                    accent-color: var(--lex-accent); flex: 0 0 auto; }
.lex-choice:has(input:checked)    { border-color: var(--lex-accent); background: var(--lex-accent-soft); }
.lex-choice-body                  { display: block; }
.lex-choice-name                  { display: block; font-size: 21px; font-weight: 800;
                                    color: var(--lex-ink); margin-bottom: 4px; }
.lex-choice-meta                  { display: block; font-size: 15px; font-weight: 700;
                                    color: var(--lex-muted); }
.lex-choice-blurb                 { display: block; font-size: 15px; color: var(--lex-ink);
                                    margin-top: 8px; }
.lex-choice-price                 { display: block; font-size: 14.5px; font-weight: 700;
                                    color: var(--lex-accent-ink); margin-top: 10px; }

/* Phase 2 — the platform Downloads switch (GET /me `downloadsEnabled`). While it is off, `lex-no-downloads` on
   <html> hides every link to the downloads screen (menus, dashboard, subject, question page), the unit's
   download tool and the question page's Print button. Convenience only: the server refuses every download
   route while off. Hiding Print does not stop screenshots or the browser's own print. */
.lex-no-downloads a[href^="downloads.html"],
.lex-no-downloads li:has(> a[href^="downloads.html"]),
.lex-no-downloads #tool-download,
.lex-no-downloads #read-print { display: none !important; }

/* Phase 5 — content protection: deterrence and traceability, not prevention (screenshots, recording,
   cameras and developer tools cannot be stopped from a web page). Applied by LexUI.protect() for a
   signed-in student only. The watermark is an image on a layer that takes no clicks and holds no text
   (it prints too); .lex-guard is set on the question and answer text only — never on forms, notes,
   buttons or links. */
.lex-wm-host { position: relative; }
.lex-watermark {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none;
  background-image: var(--lex-wm); background-repeat: repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media (max-width: 600px) { .lex-watermark { background-image: var(--lex-wm-sm); } }
.lex-guard { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; }