/* A real ampersand, not &. This is a CSS file, not HTML: the entity has no
   meaning here, so Google saw a parameter called "amp;family" and dropped it
   along with everything after it. The file has carried that since it was
   written — which is why display=swap never took effect either, and why a
   second family added after it silently never arrived. */
@import "https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@100..800&family=Open+Sans:wght@300..800&display=swap";@font-face{font-family:inter;src:url("../font/english/Inter-Regular.ea5879884a95.ttf")format("ttf");font-weight:400}@font-face{font-family:inter;src:url("../font/english/Inter-Medium.cad1054327a2.ttf")format("ttf");font-weight:500}@font-face{font-family:inter;src:url("../font/english/Inter-SemiBold.465266b2b986.ttf")format("ttf");font-weight:600}@font-face{font-family:inter;src:url("../font/english/Inter-Light.a3fe4e0f9fdf.ttf")format("ttf");font-weight:300}body{font-family:"Open Sans","Anek Bangla",Arial,Helvetica,sans-serif;font-weight:400;font-style:normal;font-size:16px;line-height:1.7}.font-base{font-family:"Open Sans","Anek Bangla",Arial,Helvetica,sans-serif;font-weight:400;font-style:normal}.font-medium{font-family:"Open Sans","Anek Bangla",Arial,Helvetica,sans-serif;font-weight:500;font-style:normal}.font-semibold{font-family:"Open Sans","Anek Bangla",Arial,Helvetica,sans-serif;font-weight:600;font-style:normal}.font-light{font-family:"Open Sans","Anek Bangla",Arial,Helvetica,sans-serif;font-weight:300;font-style:normal}a{text-decoration:none}input,textarea,select{outline:none}.billing_self input,.billing_gift input{background-color:initial}input::placeholder,textarea::placeholder{font-weight:400;font-size:14px!important;line-height:0}.custom-text-white,.custom-text-white a{color:#fff}.footer-clr{background-color:#182f3a}.footer_social_icon img{width:35px}.course_card{min-width:290px;max-width:320px}.book_card{min-width:235px;max-width:255px;box-shadow:0 0 16px rgba(102,29,0,.1)}.custom_Card_position{top:-22px;left:-1px}.course_shadow{box-shadow:0 0 7px rgba(102,29,0,.12)}.btnSecondary{color:#e63946;background-color:#fff1ea;border-radius:10px;text-align:center;border:2px solid transparent;position:relative;z-index:1;overflow:hidden;cursor:pointer;transition:300ms ease-in-out}.btnSecondary::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff9f6;transform:scaleX(0);transform-origin:left;transition:transform .5s ease-in-out;z-index:-1;filter:blur(15px)}.btnSecondary:hover{color:#e63946;border-color:#d6283778;transform:translateY(-1px)}.btnSecondary:hover::before{transform:scaleX(1)}.btnPrimary{color:#fff;background-color:#e63946;border-radius:10px;text-align:center;font-weight:400;border:2px solid transparent;position:relative;z-index:1;overflow:hidden;cursor:pointer;transition:300ms ease-in-out}.btnPrimary::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#cd1f2d;transform:scaleX(0);transform-origin:left;transition:transform .5s ease-in-out;z-index:-1;filter:blur(10px)}.btnPrimary:hover{color:#fff;border-color:#c20010;transform:translateY(-2px);background-color:#cd1f2dd1}.btnPrimary:hover::before{transform:scaleX(1)}.paymentBtn{border-radius:10px;text-align:center;font-weight:400;transition:ease-in;transition-duration:300ms}.paymentBtn:hover{transform:translateY(-4px)}.scrollBar{scrollbar-width:none}.StudentDashHoverDesign{border:1px solid transparent;border-radius:12px;padding-left:15px;position:relative;transition:.5s ease-in-out}.StudentDashHoverDesign:hover{border:1px solid #e63946}.StudentDashHoverDesign:hover::before{content:"";width:30px;height:30px;border-radius:50%;left:-22px;top:20%;background-color:#e63946;position:absolute}.activeDesign{border:1px solid #e63946;border-radius:12px;padding-left:15px;position:relative}.activeDesign::before{content:"";width:30px;height:30px;border-radius:50%;left:-22px;top:20%;background-color:#e63946;position:absolute}.homeBgCoverImg{background-image:url("../img/homeBgCoverIMG.5cd95d86ef11.jpg");background-repeat:no-repeat;background-size:cover}.studentProfileDashboardBottom{background-image:url("../img/studentDashboadBGBottom.4315f529b815.png");background-repeat:no-repeat;background-size:cover}.studentDashboardBGTop{background-image:url("../img/studentDashboadBGTop.9d36a49e6f34.png");background-repeat:no-repeat;background-size:cover}.studentProfileMessageBgImage01{background-image:url("../img/studentPrfolieMessageBg01.f90ebda1c164.png");background-repeat:no-repeat;background-size:cover}.studentProfileMessageBgImage02{background-image:url("../img/studentPrfolieMessageBg02.f4ef94fbc279.png");background-repeat:no-repeat;background-size:cover}.studentProfileMessageBgImage03{background-image:url("../img/studentPrfolieMessageBg03.f312f8158036.png");background-repeat:no-repeat;background-size:cover}.blockquote::before{content:"❝";font-size:3rem;line-height:0;vertical-align:top;margin-right:.25rem;color:#e63946}.blockquote::after{content:"❞";font-size:3rem;line-height:0;vertical-align:bottom;margin-left:.25rem;color:#e63946}.teacherSectionBG{}.toggle-checkbox:checked+.toggle-label{background-color:#e63946}.toggle-checkbox:checked+.toggle-label::before{transform:translateX(1.5rem)}.error-msg{}.feedback-msg-success{}.feedback-msg-error{}.hidden{}.showElement{}.success-msg{}.navAnimation{animation-name:navAnim;animation-duration:700ms;transition:ease-in-out}@keyframes navAnim{from{opacity:.1;background-color:#ffeded}to{opacity:1;background-color:#fff}}.dropdownAnimation{animation-name:dropdownAnim;animation-duration:500ms;transition:ease-in-out}@keyframes dropdownAnim{from{transform:translateY(-2em);opacity:.1}to{transform:translateY(0);opacity:1}}.dropdownAnimationOut{animation-name:dropdownAnimOut;animation-duration:500ms;transition:ease-in-out}@keyframes dropdownAnimOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-2em);opacity:.1}}.radio-custom{appearance:none;background-color:#fff;border:2px solid #d1d5db;border-radius:50%;width:1.2rem;height:1.2rem;cursor:pointer;outline:none;transition:border-color .2s ease-in-out}.radio-custom:checked{border-color:#3b82f6;background-color:#e63946;background-image:radial-gradient(circle,white 35%,transparent 40%)}.radio-custom:focus{border-color:#e63946}.modal_css{position:fixed;inset:0;background-color:rgb(0 0 0/.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:40}*{overflow-wrap:break-word}.modal_bottom_shadow{box-shadow:0 0 10px rgba(102,29,0,.1)}.modalAnimation{animation-name:modalAnim;animation-duration:500ms}@keyframes modalAnim{from{transform:scale(.3);opacity:.1}to{transform:scale(1);opacity:1}}.drawerAnimation{animation-name:drawerAnimation;animation-duration:500ms}@keyframes drawerAnimation{from{transform:translateX(500px);opacity:.1}to{transform:translateX(0);opacity:1}}@media(max-width:1024px){body{font-size:16px}.text-5xl{font-size:48px}.text-4xl{font-size:42px}.text-3xl{font-size:34px}.text-2xl{font-size:30px}.text-xl{font-size:24px}.text-lg{font-size:20px}.text-md{font-size:18px}.text-base{font-size:16px}.text-sm{font-size:14px}}@media(max-width:768px){body{font-size:16px}.text-5xl{font-size:42px}.text-4xl{font-size:36px}.text-3xl{font-size:32px}.text-2xl{font-size:30px}.text-xl{font-size:22px}.text-lg{font-size:18px}.text-md{font-size:17px}.text-base{font-size:16px}.text-sm{font-size:14px}.modal>.content{max-height:400px}.cropImgModal{width:350px}}@media(max-width:1200px){}@media(max-width:1400px){}.cropImgModal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:10px;height:fit-content;z-index:1110}.badge{padding-left:9px;padding-right:9px;-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px}.label-warning[href],.badge-warning[href]{background-color:#c67605}.lblCartCount{font-size:12px;background:#e63946;color:#fff;padding:0 5px;vertical-align:top;margin-top:-4px;margin-left:-8px}.w-50{width:200px}.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1200;align-items:center;display:none;justify-content:center;background:rgba(0,0,0,.6);transition:opacity .3s ease,visibility .3s ease}.modal.show{display:flex}.modal>.content{width:100%;max-width:800px;max-height:700px;background:#fff;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;transform:translateY(-25px);transition:transform .3s ease;box-shadow:0 .5rem 1rem rgba(0,0,0,.1)}.modal.show .content{transform:translateY(0)}.modal>.content>.head{padding:20px 24px 0;display:flex;justify-content:space-between;gap:8px}.modal>.content>.body{padding:0 32px;margin:32px 0 0;overflow-y:auto;scrollbar-width:thin;flex-grow:1}.modal>.content>.footer{padding:32px;display:flex;align-items:center;justify-content:end;gap:8px}.modal>.content.divider>.head{border-bottom:1px solid #e3e3e3;padding:20px 24px 16px}.modal>.content.divider>.body{margin:16px 0 0}.modal>.content>.head>span{padding:0 7px;border-radius:4px;font-size:20px;font-weight:800;background:#f9f9f9;cursor:pointer;height:fit-content}.modal>.content>.head>span:hover{background:#f1f1f1}.glowborder{position:relative}@property --angle{syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}.glowborder::after,.glowborder::before{content:'';position:absolute;background-image:conic-gradient(from var(--angle),#ff4545,#00ff99,#006aff,#ff0095,#ff4545);z-index:-1;inset:-1px;border-radius:13px;animation:3s spin linear infinite}.glowborder::before{filter:blur(.4rem);opacity:.6}@keyframes spin{from{--angle:0deg}to{--angle:360deg}}@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-250px * 7))}}.slider .slide-track{animation:scroll 40s linear infinite;display:flex;width:calc(250px * 14)}.link_underline{text-decoration:none;position:relative;&:after { position:absolute; content:""; bottom:-3px; left:0; width:100%; height:1px; border-bottom:1px solid; transform:scaleX(0); transform-origin:100% 100%; transition:transform .6s; transition-timing-function:cubic-bezier(.39,.575,.28,.995); } &:hover { &:after { transform:scaleX(1); transform-origin:0 0; } }}.disabled{color:gray;text-decoration:none;cursor:not-allowed;pointer-events:not-allowed}.-rotate-180{--tw-rotate:-180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.text-underlined{text-decoration:underline}.text-underline:hover{text-decoration:none}.h-24{height:96px}.ellipsis-lines{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.clr-1{background-color:#6156c6}.clr-2{background-color:#009b77}.clr-3{background-color:#c8e6c9}.clr-4{background-color:#a5d6a7}.clr-5{background-color:#b2dfdb}.clr-6{background-color:#ed6a5a}.clr-7{background-color:#f4f1bb}.clr-8{background-color:#9bc1bc}.clr-9{background-color:#5ca4a9}.clr-10{background-color:#e6ebe0}.clr-11{background-color:#e6ba95}.clr-12{background-color:#fafddc}.clr-13{background-color:#e4e9be}.clr-14{background-color:#a2b38b}.clr-15{background-color:#5d8b84}.clr-16{background-color:#006670}.cl-17{background-color:#a2eed8}.cl-18{background-color:#fff9c7}.cl-19{background-color:#f9dc72}.cl-20{background-color:#edeae5}
/* Hero carousel. main.css is a compiled Tailwind build, so utilities that the
   original markup never used (object-cover, from-black/70, max-w-lg) are absent
   from it. These rules supply what the slides need. */
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 78%)}
.hero-caption{max-width:34rem}
.num-button{opacity:.6;transition:opacity .3s ease}
.num-button:hover{opacity:1}

/* ==========================================================================
   Phantomix / IELTS components
   ==========================================================================
   static/css/main.css is a COMPILED Tailwind build: it contains only the
   utilities the original markup used. Utilities this design needs but which are
   absent from it (grid-cols-3, w-1/2, divide-y, select-none, bg-teal-*,
   bg-purple-*) would render as nothing. So the IELTS UI is built from the
   component classes below rather than from Tailwind utilities.

   Colours are sampled from the source design (phanthomix_guideline.pdf), not
   estimated: Take Test #008080, Practice Section #483D8B, card title #E00201.
   -------------------------------------------------------------------------- */

.no-shrink { flex-shrink: 0 }

/* --- Partner bar -------------------------------------------------------- */
/* The "Official Partner of IDP / British Council / IELTS" strip that sits above
   the nav row. It lives inside the fixed <nav>, so the header grows by its
   height; `body { padding-top }` below pushes every page's content down to
   match. That keeps the offset in one place instead of retuning the ad-hoc
   mt-16 / mt-24 / pt-24 utilities on all 22 pages — and mt-32 and pt-32 are not
   even present in the compiled main.css, so they could not be used anyway. */

:root { --partner-bar-h: 34px }
@media (max-width: 640px) { :root { --partner-bar-h: 30px } }

/* Scoped with :has() so the student dashboard — the one page with no <nav>, and
   therefore no bar — does not gain a phantom 34px gap at the top. */
body:has(.partner-bar) { padding-top: var(--partner-bar-h) }

.partner-bar {
  height: var(--partner-bar-h);
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.partner-bar__inner {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.partner-bar__label {
  font-size: 13px;
  font-weight: 500;
  color: #66635e;
  flex-shrink: 0;
}
@media (max-width: 480px) { .partner-bar__label { display: none } }

.partner-badges { display: flex; align-items: center; gap: 1.125rem }
.partner-badges:empty { display: none }          /* collapses if the slot is cleared */

/* One common height for all three marks. The source PNGs are trimmed to their
   ink and exported at 2x, so `height` alone makes them optically equal — width
   follows from each mark's own aspect ratio. */
.partner-badge {
  height: 20px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 640px) { .partner-badge { height: 17px } }

/* --- Test listing ------------------------------------------------------- */

.test-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* The heading over one library's grid.

   "All papers" prints a grid per ExamCategory rather than one grid for
   everything — the report was that Cambridge papers, forecast papers and mocks
   stood side by side with nothing to tell them apart. A rule above the name
   does the telling: it is a shelf edge, so the eye finds where one library
   stops without reading a word.

   The first shelf on the page keeps its own top margin off, so the rule does
   not sit immediately under the page's own subtitle. */
.shelf-head {
  margin: 2.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid #e6e2dc;
}
.shelf-head--first { margin-top: 1.5rem; padding-top: 0; border-top: 0 }
.shelf-head__title { font-size: 1.15rem; font-weight: 600; line-height: 1.3 }
.shelf-head__blurb { margin-top: .2rem; font-size: .85rem; color: #66635e }
@media (min-width: 640px) { .test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1024px) { .test-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

.test-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem 1rem 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .5rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
/* Tailwind's .hidden is display:none, and it lives in main.css, which base.html
   loads *before* this file. Both are one class, so at equal specificity source
   order decides and the display:flex above simply wins — a `test-card hidden`
   could not hide, which left the transcribe page showing its transcript and an
   empty result card whatever the toggle said.
   Scoped to the pairing rather than fixed by giving .hidden weight: the header
   is `hidden lg:flex`, and anything that lets .hidden beat a responsive display
   utility blacks out the desktop nav. */
.test-card.hidden { display: none }
.test-card:hover {
  border-color: rgba(230, 57, 70, .4);
  box-shadow: 0 0 12px rgba(102, 29, 0, .12);
}

/* The badge straddles the card's top border, as in the design. */
.test-card__badge {
  position: absolute;
  top: -.6rem;
  left: 1rem;
  padding: .1rem .5rem;
  font-size: .7rem;
  font-weight: 500;
  color: #1f2937;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: .25rem;
}

.test-card__title {
  font-weight: 600;
  line-height: 1.35;
  color: #e00201;
}

.test-progress {
  height: .3rem;
  background: #e9e9e9;
  border-radius: 999px;
  overflow: hidden;
}
.test-progress > span {
  display: block;
  height: 100%;
  background: #008080;
  border-radius: inherit;
}

.test-card__result {
  font-size: .85rem;
  color: #66635e;
}

/* What a full paper is made of — "Listening · Reading · Writing — 150 minutes".
   A candidate about to give up an afternoon should be told which afternoon. */
.test-card__meta {
  font-size: .8rem;
  line-height: 1.5;
  color: #9b9894;
}

.btn-take-test,
.btn-practice {
  display: block;
  width: 100%;
  padding: .55rem .75rem;
  font-size: .9rem;
  font-weight: 500;
  color: #fff;
  text-align: center;
  border: 0;
  border-radius: .25rem;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
.btn-take-test { background: #008080 }
.btn-practice  { background: #483d8b }
.btn-take-test:hover,
.btn-practice:hover { filter: brightness(1.12); transform: translateY(-1px) }
.btn-take-test:focus-visible,
.btn-practice:focus-visible { outline: 2px solid #111; outline-offset: 2px }

/* Tests that exist in the catalogue but have no authored content yet. */
.btn-take-test:disabled,
.btn-practice:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none }

/* --- Choose-a-mode modal ------------------------------------------------ */

.mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

.mode-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .5rem;
}
.mode-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
}
.mode-card__hint { font-size: .8rem; color: #66635e }

.mode-parts { display: flex; flex-direction: column; gap: .4rem; margin: .75rem 0 }
.mode-parts label { display: flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer }
.mode-parts input { accent-color: #008080 }

.mode-start {
  display: block;
  margin: auto auto 0;
  padding: .5rem 1.5rem;
  font-size: .85rem;
  color: #fff;
  background: #0f7b6c;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.mode-start:hover { filter: brightness(1.12) }
.mode-start:disabled { opacity: .5; cursor: not-allowed; filter: none }

/* --- Transcribe --------------------------------------------------------- */

.transcribe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) { .transcribe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (min-width: 1024px) { .transcribe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

.transcribe-card {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .5rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.transcribe-card:hover {
  transform: translateY(-2px);
  border-color: rgba(230, 57, 70, .4);
  box-shadow: 0 6px 18px rgba(102, 29, 0, .1);
}
.transcribe-card__body { padding: .7rem .85rem .85rem }
.transcribe-card__title {
  display: block;
  font-weight: 600;
  color: #111;
  line-height: 1.35;
}
.transcribe-card__meta { display: block; margin-top: .25rem; font-size: .78rem; color: #66635e }

/* Word-level diff for the dictation exercise. */
.diff-word { padding: 0 .1rem; border-radius: .15rem }
.diff-word--ok      { color: #17803d; background: rgba(34, 171, 88, .12) }
.diff-word--wrong   { color: #b91c1c; background: rgba(230, 57, 70, .12); text-decoration: line-through }
.diff-word--missing { color: #92400e; background: rgba(245, 158, 11, .18) }

/* --- Mock packages ------------------------------------------------------ */

.month-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 768px) { .month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

.month-cell {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .5rem;
}
.month-cell__name { font-weight: 600; color: #1e3a8a }
.month-cell__takers { font-size: .8rem; color: #66635e }

/* --- Results ------------------------------------------------------------ */

.band-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: 2rem;
  background: linear-gradient(180deg, #fff1ea, #fff);
  border: 1px solid rgba(230, 57, 70, .2);
  border-radius: .75rem;
}
.band-hero__score { font-size: 3.5rem; font-weight: 700; line-height: 1; color: #e63946 }
.band-hero__label { color: #66635e }

.band-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.band-row:last-child { border-bottom: 0 }
.band-row__score { font-size: 1.25rem; font-weight: 600; color: #008080 }

/* The criterion breakdown under a rated task. It belongs to the row above it,
   so it drops the separator and indents instead — a full-width rule between a
   band and its own reasons reads as two unrelated results. */
.band-row--sub { border-bottom: 0; padding-top: 0; display: block }
.criteria { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid rgba(0, 128, 128, .25) }
.criteria__row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) 3rem;
  gap: .5rem 1rem;
  align-items: baseline;
  padding: .35rem 0;
  font-size: .9rem;
}
.criteria__name { color: #66635e }
.criteria__score { font-weight: 600; color: #008080 }
/* Under both columns: a comment is a sentence, not a third cell. */
.criteria__note { grid-column: 1 / -1; color: #66635e; line-height: 1.5 }

.answer-row {
  display: grid;
  grid-template-columns: 2rem 1fr 1fr;
  gap: .75rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  font-size: .9rem;
}
.answer-row__n { color: #66635e }
.answer-row--correct .answer-row__yours { color: #17803d }
.answer-row--wrong   .answer-row__yours { color: #b91c1c; text-decoration: line-through }

/* Utilities the compiled main.css lacks, needed by the IELTS pages. */
.page-title { font-size: 1.5rem; font-weight: 600; line-height: 1.25 }
@media (min-width: 640px) { .page-title { font-size: 1.875rem } }

/* main.css has no max-h-[90vh]; the mode modal must scroll on short screens. */
.modal-scroll { max-height: 90vh; overflow-y: auto }

/* --- Homepage skill / package tiles ------------------------------------- */

.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px)  { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

/* A library offers five ways in — four modules and Full Test — and four columns
   wrap them 4+1, which reads as one tile left over rather than a fifth option.
   Written here rather than as lg:grid-cols-5: main.css is a frozen Tailwind
   build and does not contain that utility, so it would render as nothing. */
@media (min-width: 1024px) {
  .tile-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .tile-grid--five .skill-tile { padding: 1rem 1.1rem; gap: .75rem }
}

.skill-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 6rem;
  padding: 1rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.skill-tile:hover {
  background: rgba(255, 237, 229, .3);
  border-color: rgba(230, 57, 70, .5);
  transform: translateY(-2px);
}

/* Fixed box: static/svg holds illustrations, and an icon must not set the row height. */
.skill-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  color: #e63946;
  background: #ffede5;
  border-radius: .75rem;
}

.skill-tile__label { flex: 1 1 auto; line-height: 1.3 }
.skill-tile__arrow { flex: 0 0 auto; color: #66635e; transition: transform .3s ease }
.skill-tile:hover .skill-tile__arrow { transform: translateX(3px); color: #e63946 }

/* A skill with no flow built yet — rendered flat and unclickable rather than as
   a dead link. Speaking is the only one today. */
.skill-tile--soon { background: #fafafa; cursor: default }
.skill-tile--soon:hover { background: #fafafa; border-color: rgba(0, 0, 0, .1); transform: none }
.skill-tile--soon .skill-tile__icon { color: #9b9894; background: #f0efed }
.skill-tile--soon .skill-tile__label { color: #66635e }
.skill-tile__soon {
  flex: 0 0 auto;
  font-size: .75rem;
  color: #66635e;
  background: #f0efed;
  border-radius: 999px;
  padding: .2rem .6rem;
  white-space: nowrap;
}

/* --- Video embed (Transcribe exercises) --------------------------------- */

.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;            /* 16:9 */
  overflow: hidden;
  background: #000;
  border-radius: .5rem;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  aspect-ratio: 16 / 9;
  color: #66635e;
  text-align: center;
  background: #f6f6f6;
  border: 1px dashed rgba(0, 0, 0, .18);
}
.video-frame--empty i { font-size: 2.5rem; color: #e63946 }
.video-frame--empty p { margin-top: .5rem }

/* Play badge over the exercise thumbnails. */
/* The image is optional, so the frame has to hold its own shape. Without a
   reserved box the thumb collapsed to nothing and the absolutely-centred play
   badge landed on the title underneath — which is what an exercise with no
   uploaded still looked like. aspect-ratio also keeps a row of cards level
   whether or not each one has artwork. */
.transcribe-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #fff1ea 0%, #ffe0d0 100%);
}
.transcribe-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.transcribe-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nudged right: the glyph is a triangle, so its optical centre sits left of
     its bounding box and a true centre reads as off. */
  padding-left: .15rem;
  /* Font Awesome sets its own line-height, and it is shorter than this box.
     Neutralising it here so the flex centring has something square to work on. */
  line-height: 1;
  font-size: .9rem;
  color: #fff;
  background: rgba(230, 57, 70, .92);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: transform .2s ease, background .2s ease;
}
.transcribe-card:hover .transcribe-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #e63946;
}

/* --- Articles ------------------------------------------------------------ */

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1024px) { .article-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

/* The homepage row scrolls sideways rather than wrapping. */
.article-row {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
.article-row > a { flex: 0 0 300px }

.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .75rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.group:hover .article-card {
  border-color: rgba(230, 57, 70, .5);
  box-shadow: 0 0 12px rgba(102, 29, 0, .12);
}
.article-card img { width: 100%; height: 10rem; object-fit: cover }
.article-card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem }
.article-card__meta { font-size: .72rem; letter-spacing: .04em; color: #66635e }
.article-card__title { font-weight: 500; line-height: 1.35 }
.article-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .85rem;
  color: #66635e;
}
.article-card__more { margin-top: auto; font-size: .85rem; color: #e63946 }

.article-meta { margin-top: .5rem; font-size: .85rem; color: #66635e }

.article-hero {
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  margin: 1.5rem 0;
  border-radius: .75rem;
}

.article-lead { font-size: 1.4rem; line-height: 1.8; color: #3f3d3a }

.article-body { margin-top: 1.25rem }
/* 20px, the same reading size the test player uses. An article is the other
   place on this site somebody reads for minutes at a time, and the client
   measured the reference at 20/1.8 — applying it to the player alone would
   leave the two halves of the same site disagreeing about what body text is. */
.article-body p { margin-bottom: 1.1rem; font-size: 1.25rem; line-height: 1.8 }
.article-body li { font-size: 1.25rem; line-height: 1.8 }

/* --- Brand mark ---------------------------------------------------------- */

/* phantomix-lockup-full.png is opaque: the wordmark is navy, so on the #182f3a footer it
   needs a white chip under it regardless, and transparency buys nothing behind a
   chip. The header cuts are keyed — see static/img/brand/README.md. */
.brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;
  background: #fff;
  border-radius: .6rem;
}
/* The lockup is landscape (4.5:1 with the tagline), so the footer sizes it by
   width — at a height the footer would want, it outruns its column. */
.brand-logo { display: block; height: 2.5rem; width: auto }
.brand-logo--footer { height: auto; width: 15rem; max-width: 100% }

/* Header brand. The tagline is unreadable at header height, so the bar uses the
   lockup with the tagline cropped off; below sm even that is too wide for the
   row, and the mark stands in. The mobile menu is a full-screen panel, so it
   keeps the lockup at every width. */
.brand-lockup { display: block; height: 2.25rem; width: auto }
.brand-mark { display: none; height: 2.4rem; width: auto }
@media (max-width: 639px) {
  .site-brand .brand-lockup { display: none }
  .site-brand .brand-mark { display: block }
}

/* The "Choose a mode" chooser. The theme drove this from JS and wrapped it in
   .modal_css; here it is a native <dialog>, which brings Esc-to-close, focus
   trapping and a real backdrop without any of that. */
.mode-dialog {
  padding: 0;
  border: 0;
  border-radius: .75rem;
  width: calc(100% - 2.5rem);
  max-width: 48rem;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .18);
}
.mode-dialog::backdrop {
  background: rgb(0 0 0 / .3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.mode-dialog__close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  padding: .25rem .5rem;
  color: #66635e;
  background: none;
  border: 0;
  cursor: pointer;
}
.mode-dialog__close:hover { color: #e00201 }

/* Marks copy the operator still has to write. Deliberately loud: a page that is
   not finished must not be able to look finished. */
.todo-notice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: .9rem;
  color: #7a5c00;
  background: #fff8e1;
  border: 1px solid #ffd84d;
  border-left: 4px solid #ffd84d;
  border-radius: .5rem;
}
.todo-notice i { margin-top: .15rem; color: #b58900 }
.todo-notice strong { color: #5c4600 }

/* A month this package does not run, or that has closed. The theme's grid only
   ever had open months with a taker count beside them; a real catalogue has
   gaps, and a gap should read as closed rather than merely absent. */
.month-cell--closed { background: #fafafa; border-style: dashed }
.month-cell--closed .month-cell__name { color: #9b9894 }

/* The manual-payment panel. There is no gateway: the theme's checkout.js posted
   an Amount straight from client-side localStorage to bKash, a price the browser
   could edit. This tells the candidate how to pay instead. */
.pay-panel {
  padding: 1.25rem;
  background: #fff8f5;
  border: 1px solid rgba(230, 57, 70, .25);
  border-radius: .75rem;
}
.pay-panel__price { font-size: 2rem; font-weight: 700; color: #e63946; line-height: 1 }
.pay-panel dt { font-size: .8rem; color: #66635e; margin-top: .6rem }
.pay-panel dd { font-weight: 600 }

/* Flash messages. The messages framework was installed from the start but
   base.html never rendered it, so anything a view set was silently dropped. */
.site-message {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border-radius: .5rem;
  border: 1px solid;
}
.site-message--info,
.site-message--debug   { color: #1e3a5f; background: #eff6ff; border-color: #bfdbfe }
.site-message--success { color: #14532d; background: #f0fdf4; border-color: #bbf7d0 }
.site-message--warning { color: #7a5c00; background: #fff8e1; border-color: #ffd84d }
.site-message--error   { color: #7f1d1d; background: #fef2f2; border-color: #fecaca }

/* The About page's team. The theme laid its founders out as w-80 h-80 rounded
   crops in a grid; this is that, as a component class rather than utilities
   main.css may or may not contain. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

.team-card { text-align: center }
.team-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: .75rem;
}
/* No photo uploaded — a neutral placeholder, not a broken image. */
.team-card__photo--empty {
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: #b9b6b2;
  background: #f0efed;
}

/* A paper sold inside a package the candidate has not paid for. */
.test-card__locked {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: #66635e;
}
.test-card__locked i { color: #9b9894 }

/* --- Courses ------------------------------------------------------------- */

/* The listing card. The grid it sits in is .article-grid, which was already
   1 → 2 → 4 columns and used by nothing; the card is its own because an article
   card crops to a fixed 10rem strip and prints category / date / excerpt, and a
   course card is a 16:9 cover, a two-line title, the teaching staff, a price. */
.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .5rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.group:hover .course-card {
  border-color: rgba(230, 57, 70, .4);
  box-shadow: 0 0 12px rgba(102, 29, 0, .12);
}

/* main.css has aspect-video but not object-cover, and a cover that is letterboxed
   instead of cropped makes every card in the row a different height. */
.course-card__cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f0efed;
}
/* No cover uploaded — a neutral panel, not a broken image, as team-card does. */
.course-card__cover--empty {
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  color: #b9b6b2;
}

.course-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .25rem;
  padding: .9rem 1rem 1rem;
}

/* Two lines then an ellipsis. line-clamp-2 is not in the compiled build, and one
   four-line title sets the height of every card beside it. */
.course-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.35;
  color: #1f2937;
}
.course-card__by { font-size: .85rem; color: #66635e }
/* The price sits on the card's floor whatever the title did above it. */
.course-card__price { margin-top: auto; padding-top: .6rem; font-weight: 600; color: #1f2937 }
.course-card__lock { font-size: .8rem; color: #9b9894 }

/* "Free", and "Enrolled" — the two states worth saying in green. Deeper than the
   #008080 the buttons use, which is too light to read as text on white. */
.course-price--free { font-weight: 600; color: #0f7b6c }

/* The dark band across the top of a course page. The footer's navy rather than a
   new colour, so the page reads as part of this site and not as the reference it
   was drawn from. Full width; the .container inside keeps the text on the grid. */
.course-hero {
  padding: 1.75rem 0 2.25rem;
  color: #fff;
  background: #182f3a;
}
.course-hero__crumbs { font-size: .85rem; color: rgba(255, 255, 255, .55) }
.course-hero__crumbs a { color: rgba(255, 255, 255, .85) }
.course-hero__crumbs a:hover { color: #fff }
.course-hero__title { margin-top: .5rem; font-size: 1.75rem; font-weight: 600; line-height: 1.25 }
.course-hero__lead { margin-top: .9rem; line-height: 1.75; color: rgba(255, 255, 255, .75) }

/* Five stars and a percentage. The stars are the design's decoration — there is
   no review system in this build, and Course says so where the fields are — so
   they are gold, fixed, and hidden from assistive tech by the markup. */
.course-rating { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .75rem }
.course-rating__stars { color: #f6b93b; letter-spacing: .12rem }
.course-rating__text { font-size: .85rem; color: rgba(255, 255, 255, .65) }

/* Below md the page is one column, so the rail is ordered above the bands: the
   price and the button are what someone came for, and the far side of five
   bands is not where they should meet them. */
.course-rail-col { order: -1 }

@media (min-width: 768px) {
  .course-hero { padding: 2.25rem 0 3rem }

  /* The floor the lift below is measured against. The band may be deeper than
     this — a long description only pushes the card down with it — but it can
     never be shallower, so a one-line title cannot leave the card hanging over
     white. */
  .course-hero__text { min-height: 13rem }
  .course-hero__title { font-size: 2.25rem }

  /* The rail is pulled up out of the body grid and into the band above it,
     rather than placed inside the band. Placed inside, it could not stick: a
     sticky element only travels inside its own containing block, and the hero is
     a few hundred pixels tall, so the card would come unstuck the moment the
     band scrolled by. Here its containing block is a grid row as tall as every
     section below, so it follows the reader all the way down.

     min-height is the guard for a course with nothing authored under it yet:
     with an empty left column the row would be shorter than the card and the
     card would hang over the footer. */
  .course-rail-col { position: relative; z-index: 1; order: 0; min-height: 48rem; margin-top: -15rem }

  /* main.css does have .sticky, but the offset has to clear the fixed navbar and
     top-28 (7rem) is not in the build — so the pair is written here together. */
  .course-rail { position: sticky; top: 7.5rem }
}

.course-rail {
  padding: 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .75rem;
  box-shadow: 0 6px 24px rgba(24, 47, 58, .14);
}

.course-rail__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #182f3a;
  border-radius: .5rem;
}
.course-rail__media img { display: block; width: 100%; height: 100%; object-fit: cover }
.course-rail__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding-left: .2rem;                        /* the glyph is optically off-centre */
  color: #fff;
  background: rgba(230, 57, 70, .92);
  border-radius: 999px;
  transition: transform .2s ease;
}
.course-rail__play:hover { transform: translate(-50%, -50%) scale(1.08) }

.course-rail__price { margin-top: 1rem; font-size: 1.9rem; font-weight: 700; line-height: 1; color: #1f2937 }
.course-rail__price--free { color: #0f7b6c }

.course-rail__ref { margin-top: .75rem }
.course-rail__ref dt { font-size: .8rem; color: #66635e }
.course-rail__ref dd { font-weight: 600 }

.course-rail__heading {
  margin-top: 1.25rem;
  padding-top: 1rem;
  font-weight: 600;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.course-rail__facts { display: flex; flex-direction: column; gap: .55rem; margin-top: .6rem }
.course-rail__facts li { display: flex; align-items: center; gap: .65rem; font-size: .9rem; color: #3f3d3a }
.course-rail__facts i { width: 1.1rem; text-align: center; color: #008080 }

.course-rail__ask { margin-top: .9rem; font-size: .85rem; text-align: center; color: #66635e }
.course-rail__ask a { color: #e63946; white-space: nowrap }

/* The strip under the hero. It scrolls sideways rather than wrapping: a wrapped
   strip changes height as bands are added and removed, and the rail beside it is
   pinned to a fixed offset. The design's overflow chevrons are not here — a
   chevron that scrolls a strip is JavaScript, and this page has none. */
.course-tabs {
  display: flex;
  gap: .25rem;
  margin-top: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.course-tabs::-webkit-scrollbar { display: none }
.course-tabs a {
  flex: 0 0 auto;
  margin-bottom: -1px;
  padding: .55rem .85rem;
  font-size: .9rem;
  color: #66635e;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.course-tabs a:hover { color: #e63946; border-bottom-color: #e63946 }

/* The reading column. A grid item's min-width is auto, so on a phone it sizes
   itself to the widest thing inside it — which is the tab strip laid end to end,
   and the page then scrolls sideways instead of the strip doing. min-w-0 is not
   in the compiled main.css, so the column is named and given it here. */
.course-main { min-width: 0 }

/* A band of the course page. Not .test-card: that is a clickable tile with a red
   hover glow, and these are static panels of prose. scroll-margin clears the
   fixed navbar, so a jump from the strip above does not land the heading
   underneath it. */
.course-band {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .75rem;
  scroll-margin-top: 7.5rem;
}
.course-band__title { margin-bottom: .9rem; font-size: 1.15rem; font-weight: 600; color: #1f2937 }

/* One teacher. Repeats, so the rule separates them rather than boxing each. */
.course-staff { display: flex; gap: 1rem; padding: .9rem 0; border-top: 1px solid rgba(0, 0, 0, .08) }
.course-staff:first-of-type { padding-top: 0; border-top: 0 }
.course-staff__photo {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  background: #f0efed;
  border-radius: 999px;
}
.course-staff__photo--empty { display: grid; place-items: center; font-size: 1.5rem; color: #b9b6b2 }
.course-staff__name { font-weight: 600; color: #1f2937 }
.course-staff__role { font-size: .85rem; color: #e63946 }
.course-staff__bio { margin-top: .4rem; font-size: .9rem; line-height: 1.7; color: #66635e }

/* "How the course is arranged". Near-black rather than the hero's navy, as the
   design has it: two dark surfaces on one page have to differ or the lower one
   reads as a hole punched in the page. */
.course-arranged {
  margin-top: 1.5rem;
  padding: 1.5rem;
  color: #fff;
  background: #161d22;
  border-radius: .75rem;
  scroll-margin-top: 7.5rem;
}
.course-arranged__title { margin-bottom: 1.1rem; font-size: 1.15rem; font-weight: 600 }
.course-arranged__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem }
@media (min-width: 640px) { .course-arranged__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.course-arranged__item { display: flex; gap: .9rem; align-items: flex-start }
.course-arranged__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #fff;
  border-radius: 999px;
}
/* The three sampled accents. The operator picks one per tile, so the third one
   down is not always red. */
.course-arranged__icon--red    { background: #e63946 }
.course-arranged__icon--purple { background: #483d8b }
.course-arranged__icon--teal   { background: #008080 }
.course-arranged__name { font-weight: 600 }
.course-arranged__desc { margin-top: .25rem; font-size: .88rem; line-height: 1.6; color: rgba(255, 255, 255, .65) }

/* "What you'll learn". Columns, not a grid: the items are of uneven length and
   the design does not align them into rows — a grid would pad every short item
   out to the height of the long one beside it. */
.course-learn { column-gap: 1.75rem }
@media (min-width: 640px) { .course-learn { column-count: 2 } }
.course-learn__item {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-bottom: .7rem;
  font-size: .92rem;
  line-height: 1.6;
  break-inside: avoid;
}
.course-learn__item i { margin-top: .3rem; font-size: .8rem; color: #0f7b6c }

/* Both accordions — "Course details" and "Content preview". Native <details>:
   there is no accordion component in either stylesheet and no JavaScript wanted
   for one, and the chevron turns off details[open] rather than off a class some
   script has to remember to add. summary is display:list-item in main.css's
   preflight, so display:flex is what removes the triangle. */
/* The wrapper is not decoration: :first-child cannot mean "the first row" when
   the band's heading is the element before it, so the rule between rows is drawn
   from row to row and the wrapper draws the one under the heading. */
.course-acc { border-top: 1px solid rgba(0, 0, 0, .1) }
.course-acc__row + .course-acc__row { border-top: 1px solid rgba(0, 0, 0, .1) }
.course-acc__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 0;
  font-weight: 600;
  color: #1f2937;
  list-style: none;
  cursor: pointer;
}
.course-acc__head::-webkit-details-marker { display: none }
.course-acc__head:hover { color: #e63946 }
.course-acc__q { flex: 1 }
.course-acc__count { font-size: .8rem; font-weight: 400; color: #66635e }
.course-acc__chev { font-size: .8rem; color: #66635e; transition: transform .25s ease }
details[open] > .course-acc__head .course-acc__chev { transform: rotate(180deg) }
.course-acc__body { padding-bottom: .9rem }
.course-acc__bullets { padding-left: 1.15rem; list-style: disc }
.course-acc__bullets li { margin-bottom: .4rem; font-size: .92rem; line-height: 1.7; color: #3f3d3a }

/* One row of the curriculum. The whole row is the link when the lesson is open,
   and is not a link at all when it is locked — the same answer courses/access.py
   gives the lesson page, so a row that looks open cannot refuse when clicked. */
.course-lesson {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 -.6rem;
  padding: .6rem;
  font-size: .92rem;
  color: #1f2937;
  border-radius: .4rem;
}
a.course-lesson:hover { background: #fff5f2 }
.course-lesson__icon { flex-shrink: 0; color: #008080 }
.course-lesson__title { flex: 1 }
.course-lesson__min { font-size: .8rem; color: #66635e }
/* The green "Watch free" the design puts at the right edge of an open row. */
.course-lesson__open { font-size: .82rem; font-weight: 500; color: #0f7b6c }
.course-lesson--locked { color: #9b9894 }
.course-lesson--locked .course-lesson__icon { color: #c4c1bd }
.course-lesson__note { padding: .2rem 0 .5rem; font-size: .85rem; color: #66635e }

/* The handout on a lesson page. A file is a thing you take away, so it is given
   a row of its own rather than an inline link inside the prose. */
.lesson-file {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .5rem;
}
.lesson-file:hover { border-color: rgba(230, 57, 70, .4) }
.lesson-file i { font-size: 1.25rem; color: #e63946 }
.lesson-file__title { display: block; font-weight: 600; color: #1f2937 }
.lesson-file__hint { display: block; font-size: .82rem; color: #66635e }

/* Previous / next. Two cells, so the "next" card keeps the right-hand half even
   on the first lesson, where there is nothing to its left. */
.lesson-nav { display: grid; grid-template-columns: 1fr; gap: .75rem }
@media (min-width: 640px) { .lesson-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.lesson-nav__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .5rem;
}
a.lesson-nav__link:hover { border-color: rgba(230, 57, 70, .4) }
.lesson-nav__link--next { justify-content: flex-end; text-align: right }
.lesson-nav__link i { color: #66635e }
.lesson-nav__label { display: block; font-size: .75rem; letter-spacing: .04em; color: #66635e }
.lesson-nav__title { display: block; font-weight: 500; color: #1f2937 }
/* The neighbour a visitor on the free preview lesson may not open. Greyed and
   not a link at all, the same treatment the curriculum gives a locked row —
   the alternative was a Next button that bounced them back with a red error. */
.lesson-nav__link--locked { background: #faf9f8 }
.lesson-nav__link--locked .lesson-nav__title { color: #9b9894 }
.lesson-nav__link--locked i { color: #c4c1bd }

/* ---- The pages either side of the clock --------------------------------- */
/* Pre-test checks, the briefing and results extend base_player.html, so they
   carry the exam's chrome — no partner strip, no nav, no marketing footer — but
   they are ordinary scrolling pages, not the player. They must NOT take
   .player-body: that paints the candidate's chosen contrast onto a page built
   from the theme's own colours, so somebody who picked white-on-black once gets
   a black page of white cards forever after.

   base.html's <main> supplies the top margin that clears its fixed nav. There is
   no nav here, so this is spacing rather than clearance. */
.exam-shell { padding-top: 2.5rem; padding-bottom: 3rem }

/* ---- Rich text ----------------------------------------------------------
   Prose written in the admin's editor: article bodies, the About mission, a
   lesson's notes, a course description.

   The templates used to loop the paragraphs and put a class on each <p>. They
   cannot any more — the body arrives as one block of markup carrying its own
   headings, lists and links — so the styling moved here, onto the container's
   descendants. That is also what makes an authored <h3> or <ul> look like part
   of the page instead of like unstyled browser defaults.

   main.css is a frozen Tailwind build with no source to rebuild from, so this
   is plain CSS in the file base.html reserves for exactly that. */
.richtext > :first-child { margin-top: 0 }
.richtext > :last-child { margin-bottom: 0 }
.richtext p { line-height: 2; margin: 0 0 1rem }
.richtext h1,
.richtext h2,
.richtext h3,
.richtext h4 { font-weight: 700; line-height: 1.35; margin: 1.75rem 0 .75rem }
.richtext h1 { font-size: 1.6rem }
.richtext h2 { font-size: 1.35rem }
.richtext h3 { font-size: 1.15rem }
.richtext h4 { font-size: 1rem }
.richtext ul,
.richtext ol { margin: 0 0 1rem; padding-left: 1.5rem }
.richtext ul { list-style: disc }
.richtext ol { list-style: decimal }
.richtext li { line-height: 1.9; margin-bottom: .35rem }
.richtext a { color: #e63946; text-decoration: underline }
.richtext strong, .richtext b { font-weight: 700 }
.richtext em, .richtext i { font-style: italic }
.richtext blockquote {
  margin: 0 0 1rem;
  padding: .25rem 0 .25rem 1rem;
  border-left: 3px solid #e63946;
  color: #555;
}
.richtext pre {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  background: #f5f5f5;
  border-radius: .4rem;
  overflow-x: auto;
}
.richtext code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em }
/* A pasted note/table body. It must be able to scroll rather than push the
   page sideways — the container is often narrower than the table. */
.richtext table { width: 100%; border-collapse: collapse; margin: 0 0 1rem }
.richtext th,
.richtext td { border: 1px solid #ddd; padding: .5rem .65rem; text-align: left }
.richtext th { font-weight: 700; background: #fafafa }
.richtext--dim p { color: var(--text-dim, #6b7280) }