/* ============================================================
   COURSE PAGES (app/templates/courses/content/*)
   ------------------------------------------------------------
   The shared devices every course page is built from, hand-written
   (no Tailwind build; deploy's collectstatic is enough). Loaded once
   by courses/detail.html. Every selector is prefixed cs- so nothing
   here can collide with output.css or leak onto another page. A
   content partial keeps only the rules that belong to that page.

   Devices, in page order:
     kicker    the line above the h1, and the eyebrow above a section
               heading: plain small capitals, no box, no dot
     mark      the hand-drawn underline on the headline emphasis
     hero      headline, media, then the rest; on a phone the media
               sits under the headline and the lede is dropped
     proof     three hand-picked reviews, a rail on phones
     receipt   the price ledger that sits beside the schedule picker
     week      the seven day rail on the Crash Course
     lanes     Parramatta or online, side by side
     promise   the ink band with the course's promise
     platform  the feature cards for what enrolment includes
     trial     the solid secondary button for the free trial class
     seo       the small-type details block at the foot
     outcomes  three numbered cards with an inline svg icon (ACST)
     arc       two folder-tab cards, a short sequence of two steps (ACST)
     sample    the sample-report thumbnail, its list and caption (ACST)
     compare   a small sourced comparison table, scrolls on phones (ACST)
     modal     the sample-report <dialog>, full screen on phones (ACST)
   ============================================================ */

:root {
  --cs-ink: #12192b;
  --cs-navy: #172554;
  --cs-blue: #1d4ed8;
  --cs-blue-deep: #163a9c;
  --cs-orange: #f97316;
  --cs-slate: #64748b;
  --cs-hair: #e2e8f0;
  --cs-paper: #fbfaf6;
  --cs-butter: #ffe7a0;
  --cs-mark-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8.4 C28,3.4 54,10.4 92,6.1 C130,1.9 162,9.6 198,4.1' fill='none' stroke='%23f97316' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------ */
.cs-wrap { max-width: var(--content-max, 1200px); margin: 0 auto; padding: 0 var(--pad-x); }
.cs-wrap--narrow { max-width: 860px; }
.cs-wrap--prose { max-width: 720px; }

/* Section heading block: tag, title, one line under it. */
.cs-section-head { margin-bottom: var(--space-md); }
.cs-section-head--center { text-align: center; }
.cs-section-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--cs-navy);
  margin: var(--space-3) 0 0;
}
.cs-section-sub {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--cs-slate);
  max-width: 600px;
  margin: var(--space-sm) 0 0;
}
.cs-section-head--center .cs-section-sub { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------
   The kicker and the eyebrow
   ------------------------------------------------------------
   One typographic label for the whole page: small capitals in
   Space Grotesk, tracked out, no box and no dot. The kicker sits
   above the h1 and carries the course name and year group; the
   eyebrow (.cs-tag, kept for the templates) sits above a section
   title. It is the same label the schedule picker already uses.
   ------------------------------------------------------------ */
.cs-kicker {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #1e3a8a;
  margin: 0 0 clamp(14px, 2vw, 20px);
}
.cs-kicker-year { color: var(--cs-slate); white-space: nowrap; }
.cs-kicker-year::before { content: ''; display: inline-block; width: 18px; height: 1px; background: #cbd5e1; vertical-align: middle; margin: 0 10px; }
@media (max-width: 480px) {
  .cs-kicker-year { display: block; margin-top: 4px; }
  .cs-kicker-year::before { display: none; }
}

.cs-tag {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #1e3a8a;
}
.cs-tag--ink { color: #93c5fd; }

/* ------------------------------------------------------------
   The mark: a hand-drawn underline on the headline emphasis
   ------------------------------------------------------------ */
.cs-mark {
  font-style: italic;
  color: var(--cs-blue);
  background-image: var(--cs-mark-underline);
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 100%;
  padding-bottom: 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ------------------------------------------------------------
   Strip: the tested sections in one ruled row
   ------------------------------------------------------------
   Names between two hairlines with a thin rule between each, and a
   small line under each name for the timing. Replaces the coloured
   chips; the type and the rules carry it.
   ------------------------------------------------------------ */
.cs-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: var(--space-md) auto 0;
  padding: 0;
  border-top: 1px solid #dbe3f0;
  border-bottom: 1px solid #dbe3f0;
}
.cs-strip li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 12px clamp(10px, 1.6vw, 20px);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cs-navy);
  text-align: center;
  line-height: 1.3;
}
.cs-strip li + li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 16px; width: 1px;
  background: #cbd5e1;
}
.cs-strip small {
  display: block;
  margin-top: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-slate);
}
.cs-strip--left { justify-content: flex-start; margin-left: 0; margin-right: 0; max-width: 560px; }
.cs-strip--left li { text-align: left; }
@media (max-width: 520px) {
  .cs-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-strip li + li::before { display: none; }
  .cs-strip li:nth-child(even)::before { display: block; }
  .cs-strip li:nth-child(n + 3) { border-top: 1px dashed #dbe3f0; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------
   DOM order is head, media, rest. One column on a phone, so the
   video or photo lands straight under the headline and the button
   follows it. From 861px the media takes the right lane beside both
   text blocks. The lede only exists on the wide layout: on a phone the
   media carries the pitch.
   ------------------------------------------------------------ */
.cs-hero-section {
  background:
    radial-gradient(115% 85% at 88% 12%, rgba(37, 99, 235, 0.08), transparent 58%),
    radial-gradient(100% 80% at 5% 95%, rgba(249, 115, 22, 0.05), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}
.cs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "media" "rest";
  gap: clamp(20px, 3.5vw, 28px);
}
.cs-hero-head { grid-area: head; min-width: 0; }
.cs-hero-media { grid-area: media; min-width: 0; position: relative; }
.cs-hero-rest { grid-area: rest; min-width: 0; }
.cs-hero-lede { display: none; }

.cs-hero-heading { margin: 0; font-weight: 400; }
.cs-hero-display {
  display: block;
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--cs-navy);
}
.cs-hero-lede {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: 1.65;
  color: #475569;
  max-width: 34rem;
  margin: 0;
}
.cs-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  margin: 0;
}
.cs-hero-cta .btn svg { width: 15px; height: 15px; }
/* The primary carries the same drop rule as the trial button beside it, so the pair reads as one set with the cobalt one in front. */
.cs-hero-cta .btn-cobalt, .cs-receipt .btn-cobalt {
  font-weight: 600;
  box-shadow: 0 3px 0 var(--cs-blue-deep);
  transition: transform 140ms ease, box-shadow 140ms ease, color 200ms;
}
.cs-hero-cta .btn-cobalt:hover, .cs-receipt .btn-cobalt:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--cs-blue-deep); }
.cs-hero-cta .btn-cobalt:active, .cs-receipt .btn-cobalt:active { transform: translateY(3px); box-shadow: 0 0 0 var(--cs-blue-deep); }
.cs-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base);
  font-weight: 500;
  color: #1e3a8a;
  text-decoration: none;
  transition: color 0.2s;
}
.cs-ghost svg { width: 15px; height: 15px; transition: transform 0.2s; }
.cs-ghost:hover { color: var(--cs-blue); }
.cs-ghost:hover svg { transform: translateX(3px); }
.cs-hero-proof {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--cs-slate);
  max-width: 30rem;
  margin: clamp(18px, 2.6vw, 28px) 0 0;
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid #e6edf6;
}
.cs-hero-proof strong { color: var(--cs-navy); font-weight: 600; }

/* The media frame. Portrait 9:16 for a video, 4:5 for a photo. On a
   phone the frame steps out of the page gutter to sit almost edge to
   edge; the section and its wrapper each pad by --pad-x. */
.cs-hero-video {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  box-shadow: 0 24px 60px -18px rgba(23, 37, 84, 0.34);
}
.cs-hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  display: block;
  box-shadow: 0 24px 60px -18px rgba(23, 37, 84, 0.34);
}
/* The ACST hero: a landscape room photo as the poster of an empty video
   slot, so the frame is 4:5 rather than the portrait 9:16 used by the
   class pages. The video inside paints nothing until a src is pasted. */
.cs-hero-video--still { aspect-ratio: 4 / 5; overflow: hidden; background: #e2e8f0; }
.cs-hero-video--still video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (max-width: 860px) {
  .cs-hero-video--still { aspect-ratio: 16 / 11; }
  .cs-hero-video {
    max-width: none;
    width: auto;
    margin: 0 calc(8px - 2 * var(--pad-x));
    border-radius: 18px;
  }
  .cs-hero-photo { aspect-ratio: 16 / 11; }
  .cs-hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (min-width: 861px) {
  .cs-hero {
    grid-template-columns: 1.08fr 0.92fr;
    grid-template-areas: "head media" "rest media";
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: clamp(20px, 2.6vw, 28px);
    align-items: start;
  }
  .cs-hero-media { align-self: center; }
  .cs-hero-lede { display: block; }
  .cs-hero-cta { margin-top: clamp(22px, 3vw, 34px); }
}

/* ------------------------------------------------------------
   Proof strip: three hand-picked reviews
   ------------------------------------------------------------ */
.cs-proof-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: var(--space-md);
}
.cs-proof-head .cs-section-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cs-proof-more {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--cs-blue);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1.5px solid #bfdbfe;
  padding-bottom: 2px;
}
.cs-proof-more:hover { border-color: var(--cs-blue); }
.cs-proof-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}
.cs-proof-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(20px, 2.4vw, 26px) clamp(18px, 2.2vw, 24px) clamp(18px, 2vw, 22px);
  background: #fff;
  border: 1px solid #dbe3f0;
  border-radius: 16px;
  box-shadow: 0 2px 0 #dbe3f0;
}
.cs-proof-quote {
  width: 34px; height: 22px;
  color: var(--cs-orange);
  margin-bottom: 12px;
  flex: none;
}
.cs-proof-text {
  margin: 0;
  font-family: 'Lora', serif;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.55;
  color: var(--cs-ink);
  flex: 1 1 auto;
}
.cs-proof-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
  font-family: 'Inter', sans-serif;
}
.cs-proof-outcome {
  display: inline-block;
  flex-basis: 100%;
  width: fit-content;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--cs-navy);
  line-height: 1.4;
  background-image: var(--cs-mark-underline);
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 100%;
  padding-bottom: 0.14em;
}
.cs-proof-name { font-size: var(--text-sm); font-weight: 600; color: var(--cs-navy); }
.cs-proof-src { font-size: 12px; color: #94a3b8; }
.cs-proof-src::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 4px;
  vertical-align: -1px;
  border-radius: 50%;
  background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%);
  mask: radial-gradient(circle, transparent 38%, #000 40%);
}
@media (max-width: 760px) {
  .cs-proof-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin: 0 calc(-1 * var(--pad-x));
    padding: 4px var(--pad-x) 10px;
  }
  .cs-proof-rail::-webkit-scrollbar { display: none; }
  .cs-proof-card {
    flex: 0 0 84vw;
    max-width: 360px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* ------------------------------------------------------------
   Receipt: the price ledger beside the schedule picker
   ------------------------------------------------------------
   The picker (partials/_course_schedule.html) renders it through the
   schedule_aside slot and turns .csch-wrap into a two column grid.
   ------------------------------------------------------------ */
.cs-receipt {
  background: #fff;
  border: 1.5px solid var(--cs-navy);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 24px);
  box-shadow: 0 3px 0 var(--cs-navy);
  margin-bottom: var(--space-md);
}
.cs-receipt .cs-tag { margin-bottom: 14px; }
.cs-receipt-trial { width: 100%; margin-top: 10px; padding-left: 12px; padding-right: 12px; }
.cs-receipt-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px dashed #cbd5e1;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  color: var(--cs-ink);
}
.cs-receipt-line > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-receipt-line small { font-size: 12px; color: var(--cs-slate); line-height: 1.45; }
.cs-receipt-fig {
  font-family: 'Lora', serif;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--cs-navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cs-receipt-total { border-top: 0; padding-top: 0; }
.cs-receipt-total .cs-receipt-fig { font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-style: italic; color: var(--cs-blue); line-height: 1; }
.cs-receipt-unit { display: block; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500; font-size: 12px; color: var(--cs-slate); text-align: right; margin-top: 4px; }
.cs-receipt-rate {
  margin: -4px 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  color: var(--cs-slate);
  line-height: 1.5;
}
.cs-receipt-fine {
  margin: 10px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
}
.cs-receipt-btn { width: 100%; margin-top: 16px; }
@media (min-width: 900px) {
  .cs-receipt { margin-bottom: 0; }
}

/* ------------------------------------------------------------
   Week rail: the seven days of the Crash Course
   ------------------------------------------------------------
   Four bands, one per test section, each a folder-tab card: the day
   label is a small filled tab overhanging the top edge in that
   section's colour, and colour lives only there. On a wide screen
   the bands run in a row; on a phone they stack.
   ------------------------------------------------------------ */
.cs-week {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
  padding-top: 12px;
}
.cs-week-band {
  --band: var(--cs-blue);
  --band-soft: #eff6ff;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dbe3f0;
  border-radius: 16px;
  padding: clamp(18px, 2.2vw, 24px) clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px);
}
.cs-week-band--maths { --band: #1d4ed8; --band-soft: #eff6ff; }
.cs-week-band--thinking { --band: #7c3aed; --band-soft: #f5f3ff; }
.cs-week-band--reading { --band: #dc2626; --band-soft: #fef2f2; }
.cs-week-band--writing { --band: #ea580c; --band-soft: #fff7ed; }
/* The row holds the hours on the right; the day label leaves it for the tab. */
.cs-week-days {
  display: flex;
  justify-content: flex-end;
  min-height: 14px;
  margin-bottom: 6px;
}
.cs-week-day {
  position: absolute;
  top: -12px;
  left: 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: calc(100% - 28px);
  padding: 5px 10px;
  background: var(--band);
  color: #fff;
  border-radius: 8px 8px 8px 2px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--band) 35%, transparent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.cs-week-day b { font-size: 13px; letter-spacing: 0; }
.cs-week-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--cs-navy);
  margin: 0 0 8px;
}
.cs-week-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #475569;
  flex: 1 1 auto;
}
.cs-week-list li { padding-left: 14px; position: relative; }
.cs-week-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.85em;
  width: 7px; height: 1px;
  background: #94a3b8;
}
.cs-week-out {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--cs-navy);
}
.cs-week-out strong { color: var(--band); font-weight: 600; }
.cs-week-hours {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #94a3b8;
  margin-left: auto;
  align-self: center;
}
@media (max-width: 960px) {
  .cs-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cs-week { grid-template-columns: minmax(0, 1fr); }
}

/* "Also in the price" row under the week */
.cs-included {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
  margin-top: clamp(18px, 2.4vw, 26px);
}
.cs-included-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #fff;
  border: 1px dashed #c7d2fe;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: #475569;
}
.cs-included-item svg { width: 20px; height: 20px; flex: none; color: var(--cs-blue); margin-top: 1px; }
.cs-included-item strong { display: block; color: var(--cs-navy); font-weight: 600; margin-bottom: 2px; }
@media (max-width: 760px) {
  .cs-included { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   Lanes: Parramatta, or online
   ------------------------------------------------------------ */
.cs-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.cs-lane {
  position: relative;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 18px;
  background: var(--cs-paper);
  border: 1px solid #e7e2d4;
}
.cs-lane--online { background: #eff6ff; border-color: #c7d2fe; }
.cs-lane-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--cs-navy);
  margin: 10px 0 8px;
}
.cs-lane p {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: #475569;
  margin: 0;
}
.cs-lane p + p { margin-top: 8px; }
.cs-lane-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
}
@media (max-width: 760px) {
  .cs-lanes { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   Promise band
   ------------------------------------------------------------ */
.cs-promise {
  background: var(--cs-navy);
  color: #fff;
  padding: var(--space-lg) var(--pad-x);
}
.cs-promise-inner {
  max-width: 860px;
  margin: 0 auto;
}
.cs-promise-line {
  font-family: 'Lora', serif;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.25;
  font-weight: 400;
  margin: var(--space-sm) 0 0;
}
.cs-promise-line .cs-mark { color: var(--cs-butter); }
.cs-promise-list {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.cs-promise-list li {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #c7d2fe;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.cs-promise-list strong { display: block; color: #fff; font-weight: 600; margin-bottom: 3px; }
@media (max-width: 760px) {
  .cs-promise-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ------------------------------------------------------------
   Trial button: the secondary CTA on a term-class page
   ------------------------------------------------------------
   A solid white button with an inked edge and a drop rule, the same
   construction as the receipt card, so it reads as a real button next
   to the cobalt primary rather than as a link. On the ink close it
   keeps the white fill and drops the rule into the dark.
   ------------------------------------------------------------ */
.btn.cs-btn-trial {
  background: #fff;
  color: var(--cs-navy);
  border: 1.5px solid var(--cs-navy);
  box-shadow: 0 3px 0 var(--cs-navy);
  font-weight: 600;
  overflow: visible;
  transition: transform 140ms ease, box-shadow 140ms ease, color 200ms;
}
.btn.cs-btn-trial::before { display: none; }
.btn.cs-btn-trial:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--cs-navy); color: var(--cs-blue); }
.btn.cs-btn-trial:active { transform: translateY(3px); box-shadow: 0 0 0 var(--cs-navy); }
.btn.cs-btn-trial svg { width: 15px; height: 15px; flex: none; }
.btn.cs-btn-trial--ink { border-color: #fff; box-shadow: 0 3px 0 rgba(255, 255, 255, 0.55); }
.btn.cs-btn-trial--ink:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
.btn.cs-btn-trial--ink:active { box-shadow: 0 0 0 rgba(255, 255, 255, 0.55); }

/* ------------------------------------------------------------
   Landing on the session tiles
   ------------------------------------------------------------
   Every reserve button on the page points at #sessions, the picker's
   own column, never at the section (whose first child on a phone is
   the price). scroll-margin clears the site header and the sticky
   nav; the flash is added by detail.html for a second after the jump
   so the tiles are the thing the eye lands on.
   ------------------------------------------------------------ */
#sessions { scroll-margin-top: 108px; }
@media (min-width: 769px) { #sessions { scroll-margin-top: 84px; } }
@keyframes cs-tile-flash {
  0% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); border-color: #e5e9f2; }
  25% { box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.28); border-color: #1d4ed8; }
  100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); border-color: #e5e9f2; }
}
.csch-panel.is-flash .csch-tile { animation: cs-tile-flash 1.3s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .csch-panel.is-flash .csch-tile { animation: none; border-color: #1d4ed8; }
}

/* ------------------------------------------------------------
   Platform: the feature cards for what enrolment includes
   ------------------------------------------------------------
   Rendered by courses/_platform.html. Each card is a short looping
   demo above a numbered label, a title and two lines. The demo slot
   is a soft tinted panel with the feature's icon drawn on it, so a
   card whose video has not been set yet still looks finished. Three
   across on a desk, two on a tablet, a snap rail on a phone.
   ------------------------------------------------------------ */
.cs-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  counter-reset: cs-feature;
}
.cs-feature {
  --feature: #1d4ed8;
  --feature-soft: #eaf1ff;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid #dbe3f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 0 #dbe3f0;
  counter-increment: cs-feature;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.cs-feature:hover { transform: translateY(-2px); border-color: #b7c6e6; box-shadow: 0 12px 28px -12px rgba(23, 37, 84, 0.25), 0 2px 0 #dbe3f0; }
.cs-feature--tests { --feature: #1d4ed8; --feature-soft: #eaf1ff; }
.cs-feature--analytics { --feature: #0f766e; --feature-soft: #e6f6f3; }
.cs-feature--coach { --feature: #7c3aed; --feature-soft: #f1ecfe; }
.cs-feature--learn { --feature: #059669; --feature-soft: #e6f7ef; }
.cs-feature--type { --feature: #b45309; --feature-soft: #fdf3e3; }
.cs-feature--write { --feature: #dc2626; --feature-soft: #fdecec; }
.cs-feature-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    var(--feature-soft);
  border-bottom: 1px solid #edf1f7;
  overflow: hidden;
}
.cs-feature-media > svg {
  position: absolute;
  inset: 0;
  width: 56px; height: 56px;
  margin: auto;
  color: var(--feature);
  opacity: 0.9;
}
.cs-feature-media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}
/* A video with no source paints nothing, so the icon shows through;
   once a source is set the frames cover it. */
.cs-feature-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px);
}
.cs-feature-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--feature);
  margin-bottom: 8px;
}
.cs-feature-label::before {
  content: counter(cs-feature, decimal-leading-zero);
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.cs-feature-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--cs-navy);
  margin: 0 0 8px;
}
.cs-feature-body p {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #475569;
  margin: 0;
}
.cs-feature-gives {
  margin-top: auto;
  padding-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cs-slate);
}
.cs-feature-gives strong { color: var(--cs-navy); font-weight: 600; }
.cs-feature-body p + .cs-feature-gives { margin-top: 14px; border-top: 1px dashed #cbd5e1; }
.cs-platform-foot {
  margin: var(--space-md) auto 0;
  max-width: 600px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--cs-slate);
}
@media (max-width: 1024px) {
  .cs-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cs-platform-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin: 0 calc(-1 * var(--pad-x));
    padding: 4px var(--pad-x) 10px;
  }
  .cs-platform-grid::-webkit-scrollbar { display: none; }
  .cs-feature {
    flex: 0 0 82vw;
    max-width: 340px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* ------------------------------------------------------------
   Reviews reel section wrapper
   ------------------------------------------------------------ */
.cs-reel .cs-section-head { margin-bottom: var(--space-sm); }

/* ------------------------------------------------------------
   Static FAQ items rendered ahead of the DB rows share .faq-* from
   the design system; nothing extra is needed here.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   SEO details block: small type, at the foot
   ------------------------------------------------------------ */
.cs-seo {
  background: var(--cs-paper);
  border-top: 1px solid #e7e2d4;
  padding: var(--space-lg) var(--pad-x);
}
.cs-seo-inner {
  max-width: 76ch;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: #475569;
}
.cs-seo-inner h2 {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  color: var(--cs-navy);
  margin: 0 0 6px;
}
.cs-seo-inner > p:first-of-type { color: var(--cs-slate); }
.cs-seo-inner h3 {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--cs-navy);
  margin: var(--space-md) 0 6px;
}
.cs-seo-inner p { margin: 0 0 10px; }
.cs-seo-inner ul { margin: 0 0 10px; padding-left: 18px; }
.cs-seo-inner li { margin-bottom: 4px; }
.cs-seo-inner a { color: var(--cs-blue); text-decoration: underline; text-underline-offset: 2px; }
.cs-seo-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 48px);
}
@media (max-width: 760px) {
  .cs-seo-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   Outcomes: three numbered cards with an inline svg icon
   ------------------------------------------------------------
   Used by the ACST page's "how it helps" section. Plain numbered
   cards, no colour per card (that is reserved for the week rail).
   ------------------------------------------------------------ */
.cs-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  counter-reset: cs-outcome;
}
.cs-outcome {
  background: #fff;
  border: 1px solid var(--cs-hair);
  border-radius: 16px;
  padding: clamp(20px, 2.6vw, 28px) clamp(18px, 2.2vw, 22px) clamp(18px, 2vw, 22px);
  counter-increment: cs-outcome;
}
.cs-outcome-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cs-blue);
  margin-bottom: 16px;
}
.cs-outcome-icon svg { width: 22px; height: 22px; }
.cs-outcome-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}
.cs-outcome-label::before {
  content: counter(cs-outcome, decimal-leading-zero);
  color: #cbd5e1;
  font-weight: 500;
}
.cs-outcome-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--cs-navy);
  margin: 0 0 8px;
}
.cs-outcome p {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #475569;
  margin: 0;
}
@media (max-width: 760px) {
  .cs-outcomes { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   Arc: two folder-tab cards, a short sequence of two steps
   ------------------------------------------------------------
   The tab is a filled label overhanging the card's top edge,
   radius 8px 8px 8px 2px, the same device as the week rail's day
   label. Used for the ACST page's two-sitting arc.
   ------------------------------------------------------------ */
.cs-arc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.cs-arc-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--cs-hair);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 32px) clamp(18px, 2.2vw, 24px) clamp(18px, 2vw, 22px);
}
.cs-arc-tab {
  position: absolute;
  top: -14px;
  left: 18px;
  padding: 6px 12px;
  background: var(--cs-blue);
  color: #fff;
  border-radius: 8px 8px 8px 2px;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.35);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cs-arc-card--second .cs-arc-tab {
  background: var(--cs-navy);
  box-shadow: 0 2px 6px rgba(23, 37, 84, 0.35);
}
.cs-arc-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--cs-navy);
  margin: 6px 0 8px;
}
.cs-arc-card p {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #475569;
  margin: 0;
}
@media (max-width: 640px) {
  .cs-arc { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   Sample: the sample-report thumbnail, its list and caption
   ------------------------------------------------------------
   The thumbnail is a page image once sample.pages exists; until
   then .cs-sample-placeholder draws a page's layout in CSS alone
   (a title bar, body lines, a chart block) so the section never
   ships broken while the orchestrator fills the URLs in.
   ------------------------------------------------------------ */
.cs-sample-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(24px, 3.4vw, 52px);
  align-items: start;
}
.cs-sample-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 210 / 297;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--cs-hair);
  box-shadow: 0 3px 0 var(--cs-hair), 0 22px 44px -18px rgba(23, 37, 84, 0.3);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}
.cs-sample-thumb::before {
  content: '';
  position: absolute;
  inset: 8px -8px -8px 8px;
  z-index: -1;
  background: #fff;
  border: 1px solid var(--cs-hair);
  border-radius: 10px;
}
.cs-sample-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-sample-placeholder {
  position: absolute;
  inset: 0;
  background-color: #fff;
  background-image:
    linear-gradient(#dbe3f0, #dbe3f0),
    linear-gradient(#eef2f7, #eef2f7),
    linear-gradient(#eef2f7, #eef2f7),
    linear-gradient(#eef2f7, #eef2f7),
    linear-gradient(#eaf1ff, #eaf1ff);
  background-repeat: no-repeat;
  background-position: 10% 8%, 10% 22%, 10% 28%, 10% 34%, 10% 46%;
  background-size: 60% 6%, 80% 3%, 70% 3%, 55% 3%, 80% 34%;
}
.cs-sample-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 37, 84, 0.06);
  opacity: 0;
  transition: opacity 0.2s;
}
.cs-sample-play svg {
  width: 40px;
  height: 40px;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(23, 37, 84, 0.5));
}
.cs-sample-thumb:hover .cs-sample-play,
.cs-sample-thumb:focus-visible .cs-sample-play { opacity: 1; }
.cs-sample-info { min-width: 0; }
.cs-sample-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.cs-sample-list li {
  position: relative;
  padding-left: 16px;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #475569;
}
.cs-sample-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #93c5fd;
}
.cs-sample-list strong { color: var(--cs-navy); font-weight: 600; }
.cs-sample-caption {
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
}
.cs-sample-cta { margin-top: var(--space-sm); }
@media (max-width: 760px) {
  .cs-sample-wrap { grid-template-columns: minmax(0, 1fr); }
  .cs-sample-thumb { max-width: 220px; margin: 0 auto; }
}

/* ------------------------------------------------------------
   Compare: a small sourced comparison table
   ------------------------------------------------------------
   Horizontal scroll on a phone rather than a squeezed table; the
   table itself never causes the page to scroll sideways.
   ------------------------------------------------------------ */
.cs-compare-wrap {
  overflow-x: auto;
  margin-top: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--cs-hair);
  border-radius: 14px;
}
.cs-compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
}
.cs-compare th,
.cs-compare td {
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--cs-hair);
}
.cs-compare thead th {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  background: var(--cs-paper);
  border-bottom: 2px solid var(--cs-navy);
}
.cs-compare tbody th,
.cs-compare td:first-child {
  color: var(--cs-navy);
  font-weight: 600;
  white-space: nowrap;
}
.cs-compare tbody tr:last-child th,
.cs-compare tbody tr:last-child td { border-bottom: none; }
.cs-compare-foot {
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #475569;
}

/* ------------------------------------------------------------
   Modal: the sample-report <dialog>
   ------------------------------------------------------------
   Position is set explicitly (not left to the UA centring
   algorithm) because the site's Tailwind preflight resets margin
   on every element including <dialog>. Full screen on a phone;
   centred with a margin on a desk. Only the [open] rule sets
   display, so the UA's `dialog:not([open]) { display:none }`
   keeps deciding visibility.
   ------------------------------------------------------------ */
dialog.cs-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 16px;
  width: min(900px, calc(100vw - 48px));
  max-width: 900px;
  max-height: calc(100vh - 48px);
  background: var(--cs-paper);
  box-shadow: 0 30px 80px -20px rgba(23, 37, 84, 0.5);
  overflow: hidden;
  color: var(--cs-ink);
}
dialog.cs-modal[open] { display: flex; flex-direction: column; }
dialog.cs-modal::backdrop { background: rgba(15, 23, 42, 0.6); }
.cs-modal-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid var(--cs-hair);
}
.cs-modal-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--cs-navy);
  margin: 0;
}
.cs-modal-close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--cs-hair);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cs-slate);
  cursor: pointer;
  padding: 0;
}
.cs-modal-close svg { width: 16px; height: 16px; }
.cs-modal-close:hover { color: var(--cs-navy); border-color: #cbd5e1; }
.cs-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #e7ebf2;
}
.cs-modal-body img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 0 var(--cs-hair);
}
.cs-modal-page-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 0 var(--cs-hair);
}
.cs-modal-note {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--cs-slate);
  text-align: center;
}
.cs-modal-foot {
  flex: none;
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid var(--cs-hair);
  text-align: center;
}
.cs-modal-foot a {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cs-blue);
  text-decoration: none;
}
.cs-modal-foot a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  dialog.cs-modal {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}
body.cs-modal-open { overflow: hidden; }

/* ------------------------------------------------------------
   Prose paragraphs inside a cs-wrap--prose (the cohort argument)
   ------------------------------------------------------------ */
.cs-prose {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base);
  line-height: 1.75;
  color: #334155;
  margin: 0 0 1em;
}
.cs-prose:last-child { margin-bottom: 0; }

/* The comparison table on a phone: each row becomes a block with the
   two cells stacked under their column names, so nothing scrolls sideways
   and nothing is clipped. */
@media (max-width: 640px) {
  .cs-compare-wrap { overflow: visible; border: none; border-radius: 0; }
  .cs-compare { min-width: 0; display: block; }
  .cs-compare thead { display: none; }
  .cs-compare tbody, .cs-compare tr { display: block; }
  .cs-compare tr {
    border: 1px solid var(--cs-hair);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 10px;
    padding: 4px 0 2px;
  }
  .cs-compare tbody th, .cs-compare td {
    display: block;
    padding: 8px 14px;
    border-bottom: none;
    white-space: normal;
  }
  .cs-compare tbody th {
    padding-bottom: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .cs-compare td::before {
    content: attr(data-col);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 2px;
  }
  .cs-compare td + td { border-top: 1px dashed var(--cs-hair); }
}