@import "https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@100..800&amp;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:anek bangla,serif;font-weight:400;font-style:normal;font-size:16px}.font-base{font-family:anek bangla,serif;font-weight:400;font-style:normal}.font-medium{font-family:anek bangla,serif;font-weight:500;font-style:normal}.font-semibold{font-family:anek bangla,serif;font-weight:600;font-style:normal}.font-light{font-family:anek bangla,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;
}
@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;
}

.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)) } }

.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.15rem; line-height: 1.7; color: #3f3d3a }

.article-body { margin-top: 1.25rem }
.article-body p { margin-bottom: 1.1rem; line-height: 1.85 }

/* --- 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 }