/* ==========================================================================
   IMMERSION — catalogue and sales
   Ref: handoff § Phase 10. Public-facing, so it loads logged out too.
   ========================================================================== */

/* --- Catalogue ------------------------------------------------------------ */

.imm-catalogue {
  max-width: var(--imm-content-max);
  margin-inline: auto;
  padding: var(--imm-s-11) var(--imm-s-12) var(--imm-s-13);
}

.imm-catalogue__head { margin-bottom: var(--imm-s-7); }

.imm-catalogue__lead {
  max-width: var(--imm-prose-max);
  margin: 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--imm-muted);
}

/* --- Filter pills --------------------------------------------------------- */

.imm-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--imm-s-2);
  margin-bottom: var(--imm-s-7);
}

.imm-pill {
  padding: 8px 14px;
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-pill);
  color: var(--imm-muted);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--imm-t-btn), color var(--imm-t-btn), border-color var(--imm-t-btn);
}

.imm-pill:hover { border-color: var(--imm-line-2); color: var(--imm-text); }

.imm-pill.is-active {
  background: var(--imm-ink);
  border-color: var(--imm-text);
  color: #fff;
}

/* --- Course cards --------------------------------------------------------- */

.imm-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--imm-s-5);
}

.imm-cards--compact { grid-template-columns: repeat(2, 1fr); }

.imm-course-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
}

/* Locked and private courses sit back rather than being hidden. */
.imm-course-card.is-locked { opacity: .7; }

.imm-course-card__band {
  display: block;
  height: 110px;
}

/* With a cover set, the band holds the image and the colour becomes the ground
   it sits on — so a slow or missing image still leaves a finished-looking card
   rather than a white gap. The cover is square (540x540) and the band is a
   letterbox, so it has to crop rather than squash. */
.imm-course-card__band--image {
  position: relative;
  overflow: hidden;
}

.imm-course-card__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.imm-course-card__body {
  flex: 1;
  padding: var(--imm-s-6) var(--imm-s-7);
}

.imm-course-card__status { margin: 0 0 var(--imm-s-2); }
.imm-course-card__status.is-enrolled,
.imm-course-card__status.is-complete { color: var(--imm-link); }
.imm-course-card__status.is-locked { color: var(--imm-magenta); }

.imm-course-card__title {
  margin: 0 0 var(--imm-s-3);
  font-size: 19px;
}

.imm-course-card__title a { color: var(--imm-text); text-decoration: none; }
.imm-course-card__title a:hover { color: var(--imm-link); }

.imm-course-card__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--imm-muted);
}

.imm-course-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--imm-s-3);
  padding: var(--imm-s-4) var(--imm-s-7);
  border-top: 1px solid var(--imm-line-3);
}

.imm-course-card__meta { font-size: 13px; color: var(--imm-faint); }

.imm-course-card__action {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--imm-link);
  text-decoration: none;
}

/* --- Catalogue: narrow screens -------------------------------------------- */

@media (max-width: 1000px) {
  .imm-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .imm-catalogue { padding: var(--imm-s-7) var(--imm-s-5) var(--imm-s-11); }

  .imm-cards,
  .imm-cards--compact { grid-template-columns: 1fr; }

  .imm-pill { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ==========================================================================
   PHASE 10a — THE SALES PAGE

   Ref: handoff § Phase 10a, built from "Immersion Script Sales Page.dc.html".
   That screen was designed against this live page and iterated to sign-off, so
   it is matched closely rather than interpreted.

   Deviations from the .dc.html, all deliberate, all for contrast:

     design      token used            why
     ---------------------------------------------------------------------
     #F0284A     --imm-red   #e01f42   white on #F0284A is 4.1:1; AA wants 4.5
     #8b96a1     --imm-faint #68727d   3.0:1 on paper — 44 audit failures came
                                       from this one value
     #7f8d9b     --imm-faint-dark      4.1:1 on ink; the token is 5.8:1
                             #96a3b0

   Every other colour in the design maps 1:1 onto an existing token, so the
   light rendering is the signed-off one and dark mode follows for free.
   ========================================================================== */

/* The design is drawn at 1408px throughout — header, hero, body and footer all
   on one seam. Redefining the token on <body> rather than setting a max-width
   per section is what keeps the navbar's logo aligned with the H1 below it.
   Scoped to this page, so the app screens, drawn at 1280, are untouched. */
body.imm-page--sales { --imm-content-max: 1408px; }

/* The rail width and the grid gap appear in three places — the grid itself,
   the facts strip's reservation, and the breakpoint that undoes both — so they
   are named once. NOT --imm-rail: that is the course page's 300px rail, and
   course.css loads on this same request. */
.imm-sales {
  --imm-sales-rail: 348px;
  --imm-sales-gap: 56px;
  margin: 0;
}

/* --- Hero -----------------------------------------------------------------
   One photograph, one scrim, nothing else. Earlier drafts put scene bars over
   the hero; they were removed as overwhelming against a photograph and must
   not be reinstated. The near-opaque base of the gradient is what carries the
   facts strip — lightening it is what breaks their legibility.

   Fixed rgba rather than tokens: this surface is a photograph in both themes,
   so it must not follow the theme. */

.imm-sales__hero {
  position: relative;
  overflow: hidden;
  background: var(--imm-ink-deep);
  color: var(--imm-on-dark);
}

.imm-sales__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The crop that keeps the typewriter in frame. */
  object-position: center 62%;
}

.imm-sales__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 23, 32, .5) 0%,
    rgba(15, 23, 32, .82) 58%,
    rgba(15, 23, 32, .96) 100%);
}

.imm-sales__hero-inner {
  position: relative;
  max-width: var(--imm-content-max);
  margin-inline: auto;
  padding: 60px var(--imm-s-12) 0;
}

/* The hero's bottom is a spacer, not padding: the facts strip has to be able
   to overlap the seam with the light section below it. */
.imm-sales__hero-foot { height: var(--imm-s-12); }

.imm-sales__crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--imm-s-8);
  font-size: 12.5px;
  color: var(--imm-faint-dark);
}

.imm-sales__crumb a { color: var(--imm-faint-dark-2); text-decoration: none; }
.imm-sales__crumb a:hover { color: #fff; }
.imm-sales__crumb > span:last-child { color: var(--imm-on-dark); }

.imm-sales__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--imm-teal-light);
}

.imm-sales__title {
  margin: var(--imm-s-3) 0 0;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: #fff;
}

.imm-sales__lead {
  margin: var(--imm-s-7) 0 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--imm-on-dark-2);
  max-width: 30em;
  text-wrap: pretty;
}

/* --- Facts strip ----------------------------------------------------------
   Four cells on a --imm-ink-line ground with a 1px gap: the ground showing
   through IS the divider, so there are no cell borders to double up.

   The width reserves the rail column plus the grid gap, so the enrolment card
   can sit beside the strip rather than below it. That reservation only makes
   sense while a rail exists and is undone at the breakpoint. */

.imm-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 44px 0 0;
  max-width: calc(100% - (var(--imm-sales-rail) + var(--imm-sales-gap)));
  background: var(--imm-ink-line);
  border: 1px solid var(--imm-ink-line);
  border-radius: var(--imm-r-panel);
  overflow: hidden;
}

.imm-facts__cell {
  background: var(--imm-ink);
  padding: var(--imm-s-7) var(--imm-s-8);
}

.imm-facts__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--imm-track-eyebrow);
  text-transform: uppercase;
  color: var(--imm-faint-dark);
}

/* <dd> carries a browser default margin-inline-start of 40px. */
.imm-facts__value,
.imm-facts__note { margin: 0; }

.imm-facts__value {
  margin-top: var(--imm-s-2);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
}

.imm-facts__note {
  margin-top: 3px;
  font-size: 14px;
  color: var(--imm-faint-dark-2);
}

/* --- Light body: the eight blocks ----------------------------------------- */

.imm-sales__body { background: var(--imm-canvas); }

.imm-sales .imm-grid {
  max-width: var(--imm-content-max);
  margin-inline: auto;
  padding: 0 var(--imm-s-12) 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--imm-sales-rail);
  gap: var(--imm-sales-gap);
  align-items: start;
}

.imm-sales__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-top: 44px;
}

.imm-sales__block { margin: 0; }

/* 1. The argument. The largest heading on the page after the H1. */
.imm-sales__h1 {
  margin: 0;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--imm-text);
  text-wrap: balance;
}

.imm-sales__intro {
  margin: var(--imm-s-6) 0 0;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--imm-body);
  max-width: 44em;
  text-wrap: pretty;
}

.imm-sales__h2 {
  margin: 0 0 var(--imm-s-6);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--imm-text);
}

/* Eyebrow colours. The base --imm-eyebrow is already 11.5/600/.14em. */
.imm-eyebrow--teal { color: var(--imm-link); }
.imm-eyebrow--red { color: var(--imm-red-ink); }

/* 2. Discovery / Forgery. These two words are the method; they earn the 2-up. */
.imm-method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--imm-s-5);
}

.imm-method__card {
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
  padding: var(--imm-s-9) 26px;
}

.imm-method__title {
  margin: var(--imm-s-3) 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--imm-text);
}

.imm-method__body {
  margin: 9px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--imm-muted);
  text-wrap: pretty;
}

/* 3. The weeks. One card, one row per week, the midpoint inline where it
      actually falls rather than appended at the end. */
.imm-curriculum {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
  overflow: hidden;
}

.imm-curriculum__row {
  display: flex;
  align-items: baseline;
  gap: var(--imm-s-5);
  padding: var(--imm-s-6) var(--imm-s-9);
  border-bottom: 1px solid var(--imm-line-3);
}

.imm-curriculum__row:last-child { border-bottom: 0; }

.imm-curriculum__label {
  width: 66px;
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--imm-track-eyebrow);
  text-transform: uppercase;
  color: var(--imm-faint);
}

.imm-curriculum__title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--imm-text);
  overflow-wrap: anywhere;
}

.imm-curriculum__meta {
  font-size: 14.5px;
  color: var(--imm-faint);
  white-space: nowrap;
}

/* The midpoint. Magenta is reserved for checkpoints across the whole theme. */
.imm-curriculum__row.is-checkpoint {
  background: var(--imm-magenta-wash-2);
  border-bottom-color: var(--imm-magenta-line);
}

.imm-curriculum__row.is-checkpoint .imm-curriculum__label,
.imm-curriculum__row.is-checkpoint .imm-curriculum__title,
.imm-curriculum__row.is-checkpoint .imm-curriculum__meta { color: var(--imm-magenta); }

/* Week 1 is readable without enrolling; the chip is the only thing on the page
   that says so twice. Defined here because lesson.css, which owns the other
   chips, does not load on this page. */
.imm-chip--sample {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--imm-r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--imm-link);
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
}

/* 4. After you enrol. The number is printed once, by the template — the marker
      is suppressed rather than the <ol> abandoned, so the list stays ordered
      for a screen reader. The page used to read "1 01". */
.imm-after {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--imm-s-4);
}

.imm-after__step {
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
  padding: var(--imm-s-8) var(--imm-s-9);
}

.imm-after__no {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--imm-link);
}

.imm-after__text {
  margin: var(--imm-s-2) 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--imm-body);
}

/* 5. Outcomes. A drawn tick rather than a typed one, so it aligns with the
      first line of text at any zoom. */
.imm-ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--imm-s-3) var(--imm-s-10);
}

.imm-ticks__item {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--imm-body);
}

.imm-ticks__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .42em;
  width: 5px;
  height: 10px;
  border: solid var(--imm-link);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 6. Testimonials. The attribution sits BELOW the quote, past a rule — inside
      the quote is the bug this replaces. */
.imm-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--imm-s-5);
}

.imm-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
  padding: var(--imm-s-9) 26px;
}

.imm-quote__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--imm-body);
  text-wrap: pretty;
}

.imm-quote__by {
  margin-top: var(--imm-s-5);
  padding-top: var(--imm-s-4);
  border-top: 1px solid var(--imm-line-3);
  font-size: 14px;
}

.imm-quote__name { font-weight: 700; color: var(--imm-text); }
.imm-quote__role { font-weight: 400; color: var(--imm-faint); }

/* 7. The instructor. One dark card, and the bio appears here only — it was on
      three screens. The badge replaces a gravatar this site requests with
      `d=blank`, which returns an empty image. */
.imm-instructor {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--imm-s-9);
  align-items: start;
  background: var(--imm-ink);
  border-radius: var(--imm-r-feature);
  padding: var(--imm-s-11) var(--imm-s-12);
}

.imm-instructor__badge {
  margin: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--imm-r-pill);
  background: var(--imm-ink-line);
  border: 1px solid var(--imm-ink-line-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 29px;
  font-weight: 800;
  color: var(--imm-faint-dark-2);
}

.imm-instructor__name {
  margin: var(--imm-s-2) 0 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.imm-instructor__bio {
  margin: var(--imm-s-3) 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--imm-on-dark-2);
  text-wrap: pretty;
}

/* 8. Before you start. */
.imm-before {
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
  border-radius: var(--imm-r-panel);
  padding: var(--imm-s-9) 26px;
}

.imm-before__body {
  margin: var(--imm-s-3) 0 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--imm-body);
  max-width: 44em;
  text-wrap: pretty;
}

/* --- The rail and the enrolment card --------------------------------------
   The negative top margin lifts the card out of the light section so it sits
   alongside the hero's facts strip; sticky keeps it there while the page
   scrolls. Both only make sense beside a main column, and both are reset at
   the breakpoint. */

.imm-sales__rail {
  position: sticky;
  top: var(--imm-s-9);
  margin-top: -200px;
  display: flex;
  flex-direction: column;
  gap: var(--imm-s-5);
}

.imm-enrol {
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-feature);
  overflow: hidden;
  box-shadow: var(--imm-shadow-page);
}

/* The top block, on artwork. The boundary with the block below is the card's
   dividing line — there is no rule, and adding one flattens it. */
.imm-enrol__head {
  position: relative;
  overflow: hidden;
  padding: var(--imm-s-9) var(--imm-s-10) var(--imm-s-9);
}

.imm-enrol__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The bar band only: the artwork is 16:9 and the lower two thirds are flat. */
  object-position: center top;
}

/* The design gives this .4 -> .8. Measured against all four scene-bars files,
   the "Enrolment" eyebrow (#96a3b0, 11.5px) lands on a light teal bar at
   3.45-3.73:1 — under AA. .6 -> .88 is the shallowest pair that clears 4.5 on
   every one of the four (worst 4.66), and the bars still read through it.

   Unlike the hero, where the same measurement showed the design's scrim already
   passing everywhere — worst 4.82:1 — so it was left exactly as drawn. */
.imm-enrol__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 32, .6) 0%, rgba(15, 23, 32, .88) 100%);
}

/* Every text layer above the image and the scrim. */
.imm-enrol__head-body { position: relative; }

.imm-enrol__price {
  margin: var(--imm-s-3) 0 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #fff;
}

.imm-enrol__meta {
  margin: var(--imm-s-1) 0 0;
  font-size: 15px;
  color: var(--imm-on-dark-2);
}

.imm-enrol__action { margin-top: var(--imm-s-7); }

/* LearnDash renders the control itself — an <a>, a <button> or a submit input
   depending on the price type. All three are addressed so the card looks the
   same whichever one arrives. */
.imm-enrol__action .btn-join,
.imm-enrol__action .ld-button,
.imm-enrol__action a,
.imm-enrol__action button,
.imm-enrol__action input[type="submit"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--imm-red);
  background-color: var(--imm-red);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  border: 0;
  border-radius: var(--imm-r-btn);
  padding: var(--imm-s-4) var(--imm-s-7);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--imm-t-btn);
}

.imm-enrol__action .btn-join:hover,
.imm-enrol__action .ld-button:hover,
.imm-enrol__action a:hover,
.imm-enrol__action button:hover,
.imm-enrol__action input[type="submit"]:hover { background-color: #c4173a; }

.imm-enrol__action .learndash-wrapper { margin: 0; }
.imm-enrol__action form { margin: 0; }

.imm-enrol__login {
  margin: var(--imm-s-3) 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--imm-faint-dark-2);
}

.imm-enrol__login a { color: var(--imm-on-dark); font-weight: 600; }

/* The bottom block, on white. */
.imm-enrol__foot { padding: var(--imm-s-8) var(--imm-s-10) var(--imm-s-9); }

.imm-enrol__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--imm-s-3);
}

.imm-enrol__list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--imm-body);
}

.imm-enrol__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .38em;
  width: 5px;
  height: 9px;
  border: solid var(--imm-link);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.imm-enrol__note {
  margin: var(--imm-s-7) 0 0;
  background: var(--imm-canvas);
  border-radius: var(--imm-r-btn);
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--imm-muted);
}

/* --- Also in the series ---------------------------------------------------- */

.imm-sales__series {
  background: var(--imm-paper);
  border-top: 1px solid var(--imm-line);
}

.imm-sales__series-inner {
  max-width: var(--imm-content-max);
  margin-inline: auto;
  padding: 56px var(--imm-s-12) 64px;
}

.imm-series {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--imm-s-7);
}

.imm-series__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--imm-t-btn);
}

.imm-series__card:hover { border-color: var(--imm-line-2); color: inherit; }

/* The artwork is 16:9 with its bars along the top; the full frame leaves two
   thirds dead space, so it is cropped to 16:6 from the top. */
.imm-series__art {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: top;
}

.imm-series__text { display: block; padding: var(--imm-s-6) var(--imm-s-7) var(--imm-s-7); }

.imm-series__text .imm-eyebrow { display: block; }

.imm-series__title {
  display: block;
  margin-top: 7px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--imm-text);
}

.imm-series__body {
  display: block;
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--imm-muted);
}

/* --- Responsive ------------------------------------------------------------
   One breakpoint, and all three rules in it are load-bearing. The rail's
   negative pull and sticky position only make sense beside a main column; the
   facts strip's 404px reservation only makes sense while a rail exists. They
   have to reset together, or the strip clips its fourth cell.

   A min-width on the main column was tried instead and rejected: it forces
   horizontal page scroll below about 1030px. */

@media (max-width: 1120px) {
  .imm-sales .imm-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--imm-s-12);
  }

  .imm-sales__rail {
    position: static;
    margin-top: 0;
    order: -1;
  }

  .imm-facts { max-width: none; }

  /* The card is the first thing in the column now, so it needs the top space
     the main column was carrying. */
  .imm-sales__rail { padding-top: 44px; }
  .imm-sales__main { padding-top: 0; }
}

/* Below the tablet width the design's fixed sizes stop working: 64px display
   type overflows, and four facts cells at 90px each are unreadable. Phase 12
   owns mobile properly; this is the minimum that keeps the page usable. */

@media (max-width: 780px) {
  .imm-sales__hero-inner { padding: var(--imm-s-11) var(--imm-s-5) 0; }
  .imm-sales .imm-grid { padding: 0 var(--imm-s-5) var(--imm-s-13); }
  .imm-sales__series-inner { padding: var(--imm-s-13) var(--imm-s-5); }

  .imm-sales__title { font-size: 40px; }
  .imm-sales__lead { font-size: 17.5px; }
  .imm-sales__h1 { font-size: 26px; }

  .imm-facts { grid-template-columns: 1fr 1fr; }

  .imm-method,
  .imm-after,
  .imm-ticks,
  .imm-quotes,
  .imm-series { grid-template-columns: 1fr; }

  /* The week rows wrap: the label takes its own line, the title and the range
     share the next one. */
  .imm-curriculum__row { flex-wrap: wrap; gap: var(--imm-s-2) var(--imm-s-4); }
  .imm-curriculum__label { width: 100%; }

  .imm-instructor {
    grid-template-columns: 1fr;
    gap: var(--imm-s-6);
    padding: var(--imm-s-9) var(--imm-s-8);
  }
}

@media (max-width: 460px) {
  .imm-facts { grid-template-columns: 1fr; }
  .imm-sales__title { font-size: 34px; }
}

/* --- The sales page inside the app shell ------------------------------------
   A logged-in visitor who is not enrolled gets the sidebar chrome around this
   page rather than the marketing header. .imm-app__main carries no padding of
   its own — the page templates do — so the article already reaches the edges
   of the content column and the hero still bleeds. Nothing to undo here; the
   note stays so the next person does not go looking.
   -------------------------------------------------------------------------- */

/* --- Hide / unhide courses on the dashboard -------------------------------- */

.imm-hide-form { margin: 0; }

.imm-hide-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--imm-faint);
  text-decoration: underline;
  cursor: pointer;
}
.imm-hide-btn:hover { color: var(--imm-link); }

.imm-hide-btn--card { display: block; width: 100%; padding: var(--imm-s-3) var(--imm-s-7); text-align: left; }

.imm-hide-btn--unhide {
  padding: 6px 12px;
  border: 1px solid var(--imm-line-3);
  border-radius: var(--imm-r-btn);
  font-weight: 700;
  color: var(--imm-link);
  text-decoration: none;
}

.imm-hidden { margin-top: var(--imm-s-7); padding-top: var(--imm-s-5); border-top: 1px solid var(--imm-line-3); }
.imm-hidden__title { margin: 0 0 var(--imm-s-3); font-size: 14px; color: var(--imm-muted); }
.imm-hidden__list { list-style: none; margin: 0 0 var(--imm-s-3); padding: 0; }
.imm-hidden__item { display: flex; align-items: center; justify-content: space-between; gap: var(--imm-s-3); padding: var(--imm-s-2) 0; }
.imm-hidden-note { color: var(--imm-muted); font-size: 14px; }