/* ===========================================================================
   CONSULTING LANDING STYLESHEET
   ---------------------------------------------------------------------------
   Layered on top of css/style.css, which MUST load first. This file is
   deliberately thin: the nav, the hero frame, the buttons, the section rhythm
   and the whole .pg-* comparison matrix all come from style.css unchanged, so
   /consulting cannot drift away from the homepage.

   What lives here is only what the homepage does not already have: the hero
   ground, the consulting headline, the editorial statement, and the two
   program cards.

   Palette discipline from CLAUDE.md still applies. Rose is legitimate on this
   page because this IS Cracking Consulting Interviews, one of the two products
   rose is reserved for. Green stays on WhatsApp buttons only. No gradients.
=========================================================================== */


/* ===========================================================================
   NAV ON A LIGHT HERO
   ---------------------------------------------------------------------------
   The homepage nav is white type over a translucent dark bar, which works
   because it sits on midnight navy. Over this page's light blue hero the same
   bar is white on pale blue and effectively invisible.

   Same component, same geometry, same progress bar: only the colours flip.
=========================================================================== */
.nav {
  background: rgba(255, 255, 255, 0.70);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(10, 18, 36, 0.10);
}

.nav-brand { color: var(--navy); }
.nav-link { color: rgba(10, 18, 36, 0.62); }
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active { color: var(--navy); }

.nav-cta {
  color: var(--navy);
  border-color: rgba(10, 18, 36, 0.24);
}
.nav-cta:hover,
.nav-cta:focus-visible {
  border-color: var(--blue-electric);
  color: var(--blue-electric);
  background: rgba(47, 111, 237, 0.08);
}

.nav-toggle-bar { background: var(--navy); }

/* The focus ring flips too: style.css sets it to white inside .nav, which
   would vanish on this bar. */
.nav a:focus-visible,
.nav button:focus-visible { outline-color: var(--blue-electric); }


/* ===========================================================================
   HERO GROUND
   ---------------------------------------------------------------------------
   The homepage hero is midnight navy. This one is NOT: it is a deeper shade of
   the light blue the site already uses (--offwhite #EEF2FA), which keeps the
   page recognisably part of the same site without the navy weight that made
   the old consulting pages read as a separate microsite.

   Because the ground is light, every hero text colour inherited from style.css
   has to flip from white to navy. That is what most of this block is.
=========================================================================== */
.hero-consulting {
  --hero-ground: #CFE0F7;
  background: var(--hero-ground);
}

/* A very soft second wash at the top left, well under 10%, purely to stop a
   large flat area of one colour reading as a placeholder. Not a gradient
   treatment: it is one barely visible radial and nothing else. */
.hero-consulting::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 18% 10%, rgba(255, 255, 255, 0.55), transparent 70%);
  z-index: 0;
}

.hero-consulting .hero-inner { position: relative; z-index: 2; }

.hero-consulting .hero-name-lg { color: var(--navy); }
.hero-consulting .hero-cred-primary { color: rgba(10, 18, 36, 0.78); }
.hero-consulting .hero-cred-secondary { color: rgba(10, 18, 36, 0.52); }

/* The homepage drops a heavy black shadow under the cutout to lift it off the
   navy. On a light ground that reads as dirt, so it is much softer here. */
.hero-consulting .hero-photo {
  filter: drop-shadow(0 20px 34px rgba(10, 18, 36, 0.22));
}

/* The wave cuts the hero away from the section below, exactly as on the
   homepage. It fills --offwhite there; here the band under it is white. */
.hero-consulting .hero-wave path { fill: var(--white); }


/* ===========================================================================
   CONSULTING HEADLINE AND BATCH LINE
   This replaces the homepage's typewriter. It is the one place on the page
   that carries display weight, so it is heavy on purpose: the brief asked for
   bold typography and this is where it earns its place.
=========================================================================== */
.c-headline {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* Red outline, on purpose: this is the one dated fact on the page and it has
   to be seen. Red is otherwise reserved for the booking modal's warning note,
   so this is the second and last place it appears. It is an outline and not a
   fill, which keeps it emphatic without reading as an alert. */
.c-batch {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--red-note);
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--navy);
}

.c-batch-label { font-weight: 700; color: var(--red-note); }
.c-batch strong { font-weight: 800; color: var(--red-note); }

.c-hero-actions { margin-top: 26px; }


/* ===========================================================================
   THE EDITORIAL STATEMENT
   ---------------------------------------------------------------------------
   Treated as a statement, not a paragraph: display sized, generously led, and
   capped at a measure that forces two or three lines rather than one long
   one. The bold fragments come from the data file, so which words carry the
   emphasis is editable copy rather than markup.
=========================================================================== */
.c-statement-band {
  background: var(--white);
  padding: clamp(56px, 8vw, 104px) 0;
}

.c-statement {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.35rem, 3.1vw, 2.5rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: rgba(10, 18, 36, 0.55);
}

/* The bolded fragments jump to full navy AND to 800, so the emphasis reads at
   a glance rather than needing a second colour. */
.c-statement strong {
  font-weight: 800;
  color: var(--navy);
}


/* ===========================================================================
   THE FIRMS STRIP
   ---------------------------------------------------------------------------
   Three logos, full colour on a transparent ground, in one row that fills the
   width evenly. A three column grid rather than flex, so each logo owns an
   identical slot regardless of how wide its wordmark is.

   The logos are normalised by HEIGHT, not width: their aspect ratios run from
   2.5:1 to 3.3:1, so matching widths would make Bain tower over BCG. Capping
   height makes them read as equal weight.
=========================================================================== */
.c-firms {
  max-width: 940px;
  margin: clamp(44px, 5vw, 68px) auto 0;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
  text-align: center;
}

/* On the detail pages the strip is its own section, so it drops the rule and
   the top spacing it needs when it sits under the statement. */
.c-firms.is-bare {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.c-firms-line {
  /* Capped at 18px so the full sentence fits the 940px strip on one line on
     a laptop or wider. At 19px it overran by 8px and wrapped. */
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: clamp(26px, 3vw, 38px);
}


.c-firms-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-firm {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
}

.c-firms-row { --logo-cap: clamp(30px, 3.6vw, 44px); }

.c-firm-logo {
  width: auto;
  max-width: 100%;
  height: auto;
  /* Each logo scales its own cap. See the note on `scale` in the data file:
     the marks are not optically equal at a shared height. */
  max-height: calc(var(--logo-cap) * var(--logo-scale, 1));
  object-fit: contain;
  transition: transform 0.22s var(--ease-out), filter 0.22s var(--ease-out);
}

/* Interactive without being gimmicky: a small lift and a soft shadow under the
   mark. No colour change, because the brand colours are the point. */
.c-firm-logo:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 8px 16px rgba(10, 18, 36, 0.18));
}

@media (max-width: 560px) {
  /* Still one row on a phone. Three short wordmarks fit, and stacking them
     would make the strip taller than the statement above it. */
  .c-firms-row { --logo-cap: 22px; gap: 12px; }
}


/* ===========================================================================
   THE TWO PROGRAM CARDS
   ---------------------------------------------------------------------------
   Pro is FIRST and is the highlighted one. Its pink is spent on the outline,
   the flag, the price and the CTA. The card body stays white: a card flooded
   with pink would shout, and the brief asked for the opposite.
=========================================================================== */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
}

.cp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out),
    border-color 0.22s var(--ease-out);
}

.cp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Pro. A 1px border plus a 1px inset ring rather than a real 2px border, so
   both cards keep identical box metrics and their footers stay aligned. This
   is the same trick the homepage service cards use. */
.cp-card.is-featured {
  border-color: var(--rose);
  box-shadow: inset 0 0 0 1px var(--rose);
}

.cp-card.is-featured:hover {
  box-shadow: inset 0 0 0 1px var(--rose), 0 18px 40px rgba(217, 58, 100, 0.16);
}

/* Flag and duration ride together on one row above the name, so the price
   line below is only ever about money. */
.cp-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.cp-flag {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cp-flag-rose { background: var(--rose); color: var(--white); }
.cp-flag-plain { background: #E7EBF2; color: var(--ink-soft); }

/* Starter's outline is a plain grey, so Pro's pink is the only colour on the
   pair and clearly reads as the recommended one. */
.cp-card-plain { border-color: #C9D0DC; }
.cp-card-plain:hover { border-color: #A7B1C2; }

.cp-name {
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--navy);
}

/* Where the price, its struck through anchor and the introductory offer note
   used to be, until prices came off the site on 20 September 2026. It keeps
   their slot and their bottom rule, so the card below it is unchanged, but it
   is a link rather than a number: the line asks for a message, so it has to
   make one possible in one tap. Deliberately modest, because a big line here
   would read as a price. */
/* The price line and, under it, the jump to the comparison, sharing one block
   so the divider rule sits under BOTH rather than between them. The rule and
   the spacing used to live on .cp-priceline itself, before the compare link
   was added on 21 September 2026. */
.cp-pricebox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.cp-priceline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--blue-electric);
  text-decoration: none;
}
.cp-card.is-featured .cp-priceline { color: var(--rose); }
.cp-priceline-arrow { transition: transform 0.18s ease; }
.cp-priceline:hover { text-decoration: underline; }
.cp-priceline:hover .cp-priceline-arrow { transform: translateX(3px); }

/* Deliberately a step quieter than the price line above it: navy, smaller,
   with a blue down arrow that matches the solid blue arrow above the
   comparison it jumps to. */
.cp-comparelink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.cp-comparelink-arrow {
  color: var(--blue-electric);
  font-weight: 800;
  transition: transform 0.18s ease;
}
.cp-comparelink:hover { text-decoration: underline; }
.cp-comparelink:hover .cp-comparelink-arrow { transform: translateY(2px); }

.cp-dur {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--offwhite);
}

.cp-summary {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.cp-benefits {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.cp-benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--navy);
}

.cp-tick {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--rose);
  line-height: 1.4;
}
.cp-card-plain .cp-tick { color: var(--blue-electric); }

.cp-cross {
  flex-shrink: 0;
  font-weight: 700;
  color: rgba(10, 18, 36, 0.3);
  line-height: 1.4;
}

/* Excluded lines are struck through as well as greyed, because colour alone
   cannot carry "you do not get this". */
.cp-benefit.is-off {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(10, 18, 36, 0.28);
}

.cp-exclude-label {
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 18, 36, 0.4);
}

/* Both cards' CTAs sit on the same baseline however many benefits each one
   lists. The admission callout used to do this with margin-top:auto, and it
   was removed on 21 September 2026, so the last benefits list absorbs the
   free space instead. It cannot go on .cp-cta itself: that is a .btn, and an
   auto margin there would eat the 18px gap on a full card. Both cards end with
   a ul.cp-benefits (the excludes list on Foundations), so :last-of-type always
   finds the right one. */
.cp-card ul.cp-benefits:last-of-type { margin-bottom: auto; }

.cp-cta {
  margin-top: 18px;
  width: 100%;
  justify-content: center;
}
.cp-cta-rose { background: var(--rose); color: var(--white); }
.cp-cta-rose:hover { background: var(--rose-pressed); }
.cp-cta-plain {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.cp-cta-plain:hover {
  border-color: var(--blue-electric);
  color: var(--blue-electric);
  background: rgba(47, 111, 237, 0.06);
}

/* ---- the downward cue between the cards and the comparison bar ----
   The gap under the arrow is the programs section's bottom padding plus the
   comparison band's top padding, stacked. Both are trimmed so the arrow sits
   close to the bar it points at instead of floating in the middle of nowhere. */
#programs { padding-bottom: clamp(14px, 1.6vw, 20px); }
.c-compare-band { padding-top: clamp(14px, 1.6vw, 20px); }

.cp-downcue {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 2.4vw, 30px);
}

/* Solid blue, filled, since 21 September 2026. It was a white circle with a
   blue arrow and a grey border, which sat quietly on an off white band and
   pulled nobody down the page. Aditya asked for it to be the blue thing here,
   in exchange for the comparison bar below losing its blue. Only one of the
   two should be shouting, and the arrow is the one doing the pointing. */
.cp-downcue-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue-electric);
  border: 1px solid var(--blue-electric);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(47, 111, 237, 0.30);
  animation: cp-nudge 2.4s var(--ease-out) infinite;
}

/* A 6px drift, twice a cycle. Small enough to read as a hint rather than as
   an animation, and it stops entirely under reduced motion. */
@keyframes cp-nudge {
  0%, 62%, 100% { transform: translateY(0); }
  78% { transform: translateY(6px); }
}

/* ===========================================================================
   THE COMPARISON HEADING
   ---------------------------------------------------------------------------
   A PLAIN SECTION HEADING, not a solid blue bar, since 21 September 2026.

   It was a full width electric blue rectangle, mirroring the "Interested in
   1:1 consulting prep?" bar on the homepage, and the matrix behind it started
   closed. Aditya changed both: the panel is open by default and the bar reads
   as an ordinary heading. The reasoning is that the matrix is the thing worth
   reading, and a closed blue bar made people press something before they could
   see any of it.

   It is still a <button>, so it can be collapsed, and it keeps a chevron and a
   hover state so it does not look inert. The blue that used to live here moved
   to the .cp-downcue-arrow above, which is what points down at this section.
=========================================================================== */
.c-compare-band { background: var(--offwhite); }

.cp-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 0 0 clamp(4px, 0.8vw, 8px);
  border: 0;
  background: none;
  color: var(--navy);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}

/* The only hover affordance left, now that there is no button to darken. */
.cp-disclosure:hover .cp-disclosure-title { color: var(--blue-electric); }
.cp-disclosure:hover .cp-disclosure-chev {
  border-color: var(--blue-electric);
  color: var(--blue-electric);
}
.cp-disclosure:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.28);
  border-radius: var(--radius-sm);
}

.cp-disclosure-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Matches .section-title in style.css, because it is now one of those. */
.cp-disclosure-title {
  font-size: clamp(25px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  transition: color 0.16s var(--ease-out);
}

.cp-disclosure-sub {
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}

.cp-disclosure-chev {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 13px;
  transition: transform 0.24s var(--ease-out), color 0.16s var(--ease-out),
    border-color 0.16s var(--ease-out);
}
/* Open is the DEFAULT state now, so the chevron points up to say "press me to
   close" rather than down to say "press me to open". */
.cp-disclosure.is-open .cp-disclosure-chev { transform: rotate(180deg); }
.cp-compare-panel { padding-top: clamp(20px, 2.6vw, 32px); }


/* ===========================================================================
   MATRIX GROUP TONES
   ---------------------------------------------------------------------------
   style.css ships the green variant. Red and blue are added here, and they
   carry meaning rather than decoration: red is the two groups that describe
   the teaching, green is the materials, blue is the support. The bar colour,
   its chevron and the ticks inside it all move together.

   Red appears nowhere else on this page except the batch date, and both uses
   are about visibility rather than warning.
=========================================================================== */
/* ---- the tier name / CTA gap ----
   The head used to get its breathing room from the price line between the
   name and the button. Prices came off the site on 20 September 2026, so the
   space is declared on the name instead of inherited from a deleted element. */
.pg-col .pg-name { display: block; margin-bottom: 26px; }
.pg-nhead .pg-name { display: block; margin-bottom: 22px; }

/* The head also needs room under the button, or the first row of ticks crowds
   it from below. */
.pg-col .pg-cta { margin-bottom: 4px; }

/* ---- the disclosure chevron ----
   Was 26px with a 10px glyph, which read as decoration rather than a control,
   so nobody pressed it. At 38px with a 15px glyph it is obviously a button and
   clears the 44px-ish touch target once its padding is counted. */
.pg-chev {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border-width: 1.5px;
  font-size: 15px;
}

.pg-toggle { gap: 14px; }

/* ---- "What's included" aligns to the top of the tier cards ----
   The head cell was centring its text against the full height of the tier
   columns, which floated it well below where those cards start. */
.pg-included { vertical-align: top; padding-top: 24px; }

/* ---- the open drop downs hint ----
   Lives in the label column directly above the first group bar. The row it
   sits in has no border, so it reads as a callout rather than as another
   comparison row. */
   The tier cells beside it keep their normal left and right borders. Zeroing
   them here cut a gap through the pink and grey column outlines, because
   those outlines are drawn by each stacked cell rather than by the column. */
.pg-hintrow .pg-label { padding: 0 18px 14px 4px; }

.pg-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: rgba(47, 111, 237, 0.07);
  border: 1px dashed rgba(47, 111, 237, 0.4);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--blue-pressed);
  /* Slow, on purpose. Six seconds a cycle and it only dips in opacity and
     drifts 3px: enough to catch a wandering eye, not enough to nag. This is
     the one continuous animation on the page besides the down arrow, and both
     stop dead under prefers-reduced-motion. */
  animation: pg-hint-pulse 3.2s var(--ease-out) infinite;
}

@keyframes pg-hint-pulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.72; transform: translateY(3px); }
}

.pg-hint-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue-electric);
  color: var(--white);
  font-size: 10px;
}

/* Narrow layout: the hint is a plain block above the tier card. */
.pg-narrow .pg-hint { margin-bottom: 14px; }

.pg-yes-red { background: var(--red-note); }

.pg-group-red .pg-barlabel { color: var(--red-note); }
.pg-group-red .pg-chev {
  border-color: rgba(198, 40, 40, 0.34);
  background: rgba(198, 40, 40, 0.08);
  color: var(--red-note);
}
.pg-group-red .pg-toggle:hover .pg-chev {
  border-color: var(--red-note);
  background: rgba(198, 40, 40, 0.16);
  color: var(--red-note);
}

/* ---- the duration badge on a group bar ----
   Sits beside the group label rather than inside the small grey sub line,
   because "how long is a class" is the first thing anyone asks. It wraps onto
   its own line on a narrow bar instead of shrinking the label. */
/* The label sits left, the duration is pushed to the right edge of the bar.
   .pg-bartext has to grow for that: without flex:1 it shrinks to its content
   and space-between has nothing to distribute. */
.pg-bartext { flex: 1; }

.pg-barhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.pg-bardur {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.pg-group-blue .pg-bardur { background: var(--blue-electric); }
.pg-group-red .pg-bardur { background: var(--red-note); }
.pg-group-green .pg-bardur { background: var(--green); }

/* The sub line is allowed to wrap now. It used to sit on one line because it
   was short; with the mentors clause it is not. */
.pg-barsub { white-space: normal; }

.pg-group-rose .pg-barlabel { color: var(--rose-pressed); }
.pg-group-rose .pg-chev {
  border-color: rgba(217, 58, 100, 0.34);
  background: rgba(217, 58, 100, 0.08);
  color: var(--rose-pressed);
}
.pg-group-rose .pg-toggle:hover .pg-chev {
  border-color: var(--rose);
  background: rgba(217, 58, 100, 0.16);
  color: var(--rose-pressed);
}

.pg-group-blue .pg-barlabel { color: var(--blue-pressed); }
.pg-group-blue .pg-chev {
  border-color: rgba(47, 111, 237, 0.34);
  background: rgba(47, 111, 237, 0.08);
  color: var(--blue-pressed);
}
.pg-group-blue .pg-toggle:hover .pg-chev {
  border-color: var(--blue-electric);
  background: rgba(47, 111, 237, 0.16);
}

/* The peer to peer mocks row. Gold, because it is opt in and should be
   findable the moment the group opens. The free trial row used to take this
   treatment too; it went on 20 September 2026. */
.pg-row.is-highlight .pg-label,
.pg-nrow.is-highlight { background: rgba(224, 165, 38, 0.10); }

.pg-row.is-highlight .pg-rowtext,
.pg-nrow.is-highlight .pg-nlabel { font-weight: 800; color: var(--gold-deep); }

.pg-row.is-highlight .pg-tag,
.pg-nrow.is-highlight .pg-tag { color: var(--gold-deep); }

.pg-row.is-highlight .pg-rownote,
.pg-nrow.is-highlight .pg-rownote {
  background: var(--gold);
  color: var(--white);
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}

/* The pill was sitting hard against the right edge of the label column, which
   pushed it away from the row it belongs to and close to the first tier's
   ticks. Pulled back in so it reads as part of the label. */
.pg-row.is-highlight .pg-rownote { margin-right: 38px; }


/* ===========================================================================
   DETAIL PAGES
   /consulting/starter and /consulting/pro. Same nav, same hero ground, same
   buttons as the landing page: only the content shape differs.
=========================================================================== */

.c-tint { background: var(--offwhite); }

.c-note {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- tier hero ---- */
.c-tier-hero {
  background: var(--hero-ground, #CFE0F7);
  padding: clamp(96px, 11vw, 132px) 0 clamp(44px, 5vw, 64px);
}
.c-tier-hero.is-rose { --hero-ground: #F7D9E3; }

.c-tier-crumb { margin-bottom: 20px; font-size: 14px; font-weight: 600; }
.c-tier-crumb a { color: rgba(10, 18, 36, 0.6); }
.c-tier-crumb a:hover { color: var(--navy); }

.c-tier-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.c-tier-flag,
.c-tier-dur {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.c-tier-flag { background: var(--navy); color: var(--white); }
.c-tier-hero.is-rose .c-tier-flag { background: var(--rose); }
.c-tier-dur { background: rgba(255, 255, 255, 0.72); color: var(--navy); }

.c-tier-name {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.c-tier-summary {
  margin-top: 16px;
  max-width: 620px;
  font-size: clamp(15.5px, 1.8vw, 18px);
  line-height: 1.6;
  color: rgba(10, 18, 36, 0.72);
}

/* Where the price, its anchor and the introductory offer note used to be,
   until prices came off the site on 20 September 2026. Plain text, not a
   link: the hero already has its own WhatsApp button two lines below, and two
   WhatsApp targets in one block is one too many. */
.c-tier-priceline {
  margin-top: 26px;
  font-size: clamp(18px, 2.2vw, 21px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.c-tier-hero.is-rose .c-tier-priceline { color: var(--rose-pressed); }

/* Batch date and buttons each on their own line, in that order, as Aditya set
   it. They used to be inline, so on a wide screen they flowed side by side
   into one cluttered row. fit-content keeps each one only as wide as its
   content. The admission callout was a third item here until 21 September
   2026. */
.c-tier-hero .c-batch { display: flex; width: fit-content; margin-top: 22px; }
.c-tier-hero .c-hero-actions.is-stacked { display: flex; width: fit-content; max-width: 100%; }

/* They share one column, as wide as the widest of them (the buttons), so they
   start and end on the same lines. Asked for by Aditya on 19 September 2026:
   at its own width the date pill stopped short of the buttons and looked
   odd. */
.c-tier-stack {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
}
.c-tier-stack > .c-batch,
.c-tier-stack > .c-hero-actions.is-stacked { width: auto; align-self: stretch; }
.c-tier-stack > .c-batch { justify-content: center; }

/* ---- a numbered list of matrix rows ---- */

/* Red, so the duration is the first thing read on the section. Red is
   otherwise only the batch date on these pages: both uses are about being
   noticed rather than about warning. */
.cl-dur {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--red-note);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Full container width. These were capped at 840px, which left a ragged gap
   down the right of every section while the headings ran wider. */
.cl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cl-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  margin-bottom: 9px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.cl-item.is-highlight {
  border-color: var(--gold);
  background: rgba(224, 165, 38, 0.08);
}

.cl-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--offwhite);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 800;
}
.cl-item.is-highlight .cl-num { background: var(--gold); color: var(--white); }

.cl-text { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--navy); }
.cl-item.is-highlight .cl-text { color: var(--gold-deep); }

.cl-note {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
}

/* ---- the 12 week grid ----
   Four across, three down. Each tile flips to its description, because those
   run two or three sentences and will not sit on the face of a small card.

   The tile is a <button>, so the flip is driven by a real click and works on
   touch and keyboard, not only on hover. Hover flips it too on pointer
   devices, which is what makes it feel alive on desktop. */
.cw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The cell is a flex column so the button stretches to the full height of its
   grid row: every tile in a row ends up exactly as tall as the tallest one in
   that row, and no taller. */
.cw-cell { display: flex; }

/* NO fixed height. It used to be 300px, sized for the busiest tile, which left
   the other seven padded with empty space. Height now comes from content. */
.cw-card {
  display: block;
  flex: 1;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  perspective: 900px;
}

/* Both faces sit in ONE grid cell, stacked. That is what lets the tile size to
   its content while still flipping: the cell is as tall as the taller of the
   two faces, so neither face ever clips. The old approach needed a fixed
   height because both faces were absolutely positioned and took up no room. */
.cw-inner {
  display: grid;
  width: 100%;
  height: 100%;
  transition: transform 0.5s var(--ease-out);
  transform-style: preserve-3d;
}

@media (hover: hover) and (pointer: fine) {
  .cw-card:hover .cw-inner { transform: rotateY(180deg); }
}
.cw-card:focus-visible .cw-inner,
.cw-card.is-flipped .cw-inner { transform: rotateY(180deg); }

.cw-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cw-back {
  transform: rotateY(180deg);
  background: var(--navy);
  border-color: var(--navy);
}

/* Practice weeks are not gaps in the schedule and must not read as one. */
.cw-card.is-practice .cw-front {
  border-style: dashed;
  border-color: rgba(217, 58, 100, 0.45);
  background: rgba(217, 58, 100, 0.04);
}

.cw-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cw-back .cw-num { color: rgba(255, 255, 255, 0.55); }

.cw-flag {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--offwhite);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cw-flag.is-practice { background: var(--rose); color: var(--white); }

.cw-title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.32;
  color: var(--navy);
}

.cw-more {
  margin-top: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-electric);
}

/* A class on the tile: its session number on the left, the title beside it.
   Two classes share most tiles, so the second gets a hairline above it and
   they read as two classes rather than one long heading. */
.cw-class {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cw-class + .cw-class {
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.cw-classnum {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 800;
}

/* The mocks and peer mocks sit on the FRONT of the tile, directly under the
   heading, in normal flow like everything else. They must NOT take an auto
   top margin: on a practice week there are no class titles above them, so an
   auto margin sinks them to the bottom of the tile while every other week's
   content starts at the top. */
.cw-mocks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
}
.cw-class + .cw-mocks { margin-top: 6px; }

.cw-front .cw-mock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}
.cw-front .cw-mock-tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--red-note);
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Foundations practice weeks: what to work on, so the tile is not empty. */
.cw-focus {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cw-focus-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #5B6478);
}
.cw-focus-item {
  position: relative;
  padding-left: 14px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--navy);
}
.cw-focus-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-electric);
}

/* Gold, the same gold the peer mocks row carries in the comparison matrix. */
.cw-peer {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* "What happens" stays on every tile, since it is the only cue that the tile
   flips. It is the one element that takes the auto margin, so it sits at the
   foot and everything else stays top aligned. */

.cw-desc {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.cw-mock {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
}

.cw-mock-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rose);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .cw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .cw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  /* One per row on a phone. Two columns leave about 150px of width, which is
     not enough for a class title plus a flag. */
  .cw-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cw-card { perspective: none; }
  /* No rotation on a phone: tapping swaps which face is shown instead. A
     single column tile is already as tall as its content, and a 3D flip on a
     tall narrow card reads as a glitch rather than a turn. */
  .cw-inner { transform: none !important; transition: none; }
  .cw-back { transform: none; display: none; }
  .cw-card.is-flipped .cw-front { display: none; }
  .cw-card.is-flipped .cw-back { display: flex; }
}

/* ---- schedule facts ---- */
.cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.cf-item {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.c-tint .cf-item { background: var(--white); }

.cf-item h3 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 11px;
}
.cf-item p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.cf-strong { font-size: 18px !important; font-weight: 800; color: var(--navy) !important; margin-bottom: 4px; }

/* ---- admission steps ---- */
.cs-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cs-step {
  padding: 22px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cs-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
}

.cs-step h3 { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--navy); margin-bottom: 6px; }
.cs-step p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

/* ---- not included ----
   Full container width, matching every other box on these pages. */
.c-excl {
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.c-excl-list { list-style: none; margin: 0 0 22px; padding: 0; }
.c-excl-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(10, 18, 36, 0.3);
}
.c-excl-list li::before {
  content: "\2715";
  position: absolute;
  left: 4px;
  color: rgba(10, 18, 36, 0.32);
  font-weight: 700;
  text-decoration: none;
}

/* ===========================================================================
   LINKEDIN BUTTON
   ---------------------------------------------------------------------------
   LinkedIn blue, for the same reason WhatsApp green exists on this site: the
   button really does go to LinkedIn, so the brand colour is doing a job rather
   than being a seventh accent. It appears under the credentials on the landing
   hero and under the logos on the two programme pages.
=========================================================================== */
.c-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  background: #0A66C2;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s var(--ease-out);
}
.c-linkedin:hover { background: #084F96; }

.c-linkedin-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.c-linkedin-arrow {
  display: inline-block;
  transition: transform 0.18s var(--ease-out);
}
.c-linkedin:hover .c-linkedin-arrow { transform: translateX(3px); }

/* LinkedIn and the WhatsApp Community button, stacked in one column in the
   /consulting hero. stretch plus fit-content makes them share one width, the
   same trick the detail page heroes use, so the two start and end on the same
   lines. The column owns the top margin; the buttons inside it do not. */
.c-socials {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
}
.c-socials .c-linkedin { margin-top: 0; }

/* Instagram pink, solid, because the button really does go to Instagram, and
   gradients are not allowed on this site, so Instagram's own gradient mark is
   out. #D62976 is taken from the middle of it and matches the homepage tile.
   Everything else comes from .c-linkedin. It took the slot of .c-community,
   the green WhatsApp Community button, on 30 September 2026. */
.c-instagram { background: #D62976; }
.c-instagram:hover { background: #B51F62; }

/* In the firms block it is centred under the logos. */
.c-firms .c-linkedin { margin-top: clamp(22px, 2.8vw, 32px); }

@media (max-width: 460px) {
  .c-linkedin { white-space: normal; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .c-linkedin, .c-linkedin-arrow { transition: none; }
  .c-linkedin:hover .c-linkedin-arrow { transform: none; }
}



/* ---- the stacked hero buttons ----
   WhatsApp, then the programme's one buying action, each on its own line.
   inline-flex plus stretch makes them share one width: the wider button sets
   it. It was two rows, with Try for Free beside the buying action, until both
   the free trial and Buy Now went on 20 September 2026; .c-hero-row and
   .btn-outline-blue went with them. */
.c-hero-actions.is-stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
/* style.css gives every hero button flex: 1 1 100% on a phone. In this column
   layout that basis is vertical and stretches the buttons, so reset it. */
.c-hero-actions.is-stacked > .btn { flex: 0 0 auto; justify-content: center; }

/* ---- detail page faq ----
   Full container width, matching the class and mock lists above it. It was
   capped at 760px, which left the same ragged right edge those had. */
.cq {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cq-item + .cq-item { border-top: 1px solid var(--line); }
.cq-h { margin: 0; }
.cq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 19px 22px;
  background: none;
  border: none;
  text-align: left;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
  cursor: pointer;
}
.cq-q:hover { background: rgba(10, 18, 36, 0.02); }

/* Two bars so the plus rotates into a minus. An entity glyph sits differently
   in every font fallback. */
.cq-icon { position: relative; flex-shrink: 0; width: 14px; height: 14px; transition: transform 0.22s var(--ease-out); }
.cq-icon::before, .cq-icon::after { content: ""; position: absolute; background: var(--blue-electric); border-radius: 2px; }
.cq-icon::before { left: 0; right: 0; top: 6px; height: 2px; }
.cq-icon::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.cq-q[aria-expanded="true"] .cq-icon { transform: rotate(135deg); }

.cq-a { padding: 0 22px 20px; }
.cq-a p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); max-width: 640px; }

@media (max-width: 620px) {
  .cl-item { flex-wrap: wrap; gap: 10px 14px; }
  .cl-text { flex-basis: calc(100% - 44px); }
}


/* ===========================================================================
   STICKY TRY FOR FREE BAR
=========================================================================== */
.c-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 180;
  background: rgba(10, 18, 36, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out);
}
.c-sticky.is-in { opacity: 1; transform: translateY(0); }

.c-sticky-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.c-sticky-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--white);
}
.c-sticky-text strong { font-size: 15px; font-weight: 800; }
.c-sticky-text span { font-size: 13px; color: rgba(255, 255, 255, 0.66); }

.c-sticky-cta { flex: 0 0 auto; }

@media (max-width: 620px) {
  .c-sticky-text strong { font-size: 13.5px; }
  .c-sticky-text span { display: none; }
  .c-sticky-inner { padding: 10px 16px; gap: 12px; }
  .c-sticky-cta { padding: 12px 18px; font-size: 14px; }
}


/* ===========================================================================
   RESPONSIVE
=========================================================================== */
@media (max-width: 860px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr); }

  /* Pro is first in the DOM, so it stays first when the grid stacks. That is
     the intended order on mobile too: the recommended option leads. */
}

@media (max-width: 720px) {
  .c-statement { text-align: left; }
  .c-hero-actions,
  .c-tier-hero .c-hero-actions.is-stacked { width: 100%; }
  /* white-space: normal is load bearing. .btn sets nowrap, and "Have
     questions? DM me on WhatsApp" is too long for one line on a phone, so
     without this it overflows the viewport and the whole page scrolls
     sideways. */
  .c-hero-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}


/* ===========================================================================
   MOTION
=========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cp-card,
  .cp-disclosure,
  .cp-disclosure-chev,
  .c-sticky {
    transition: none;
  }
  .cp-card:hover { transform: none; }
  .cp-disclosure:hover { transform: none; }

  /* The two continuous animations on this page both stop. */
  .cp-downcue-arrow,
  .pg-hint { animation: none; }

  /* The week tiles stop rotating and swap faces instead. The flip is still
     usable, it just no longer spins: hover does nothing and a click toggles
     which face is shown, the same behaviour the phone layout already uses. */
  .cw-inner { transition: none; transform: none !important; }
  .cw-card { perspective: none; }
  .cw-back { transform: none; display: none; }
  .cw-card.is-flipped .cw-front { display: none; }
  .cw-card.is-flipped .cw-back { display: flex; }
}


/* ===========================================================================
   TESTIMONIALS (landing page)
   ---------------------------------------------------------------------------
   Everything else comes from the homepage's .tst-* rules in style.css. Two
   differences: a subtitle naming where the feedback came from, and two stat
   figures rather than three, so the banner splits in halves.
=========================================================================== */
.tst-sub {
  margin-top: 12px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (min-width: 621px) {
  #testimonials .tst-stats { grid-template-columns: repeat(2, 1fr); }
}


/* ===========================================================================
   INSIDE THE CLASSES
   ---------------------------------------------------------------------------
   Slides from Aditya's teaching deck, above the testimonials on /consulting.
   The arrows are the testimonials' own .tst-arrow, so the two strips read as
   one component; only the frames are new.

   TWO PER PAGE on a laptop, ONE on a phone, and the 720px breakpoint here is
   the one renderClasses reads with matchMedia. Change it in both places or the
   grid and the pager disagree about how many fit.

   It was one full width slide per page until 21 September 2026. At 1217px wide
   the 4:3 frame stood 913px tall, which filled the viewport and read as a wall
   rather than as a sample. Two smaller ones show more of the programme in less
   height, and the full size link is there for anyone who wants to read one.
=========================================================================== */
.cx { width: 100%; }

.cx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cx-counter {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cx-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
}

.cx-item { min-width: 0; }

/* The frame keeps a FIXED 4:3 ratio and the image is object-fit: contain
   inside it. Both matter. The four screenshots are not pixel identical in
   shape, so without the ratio the row would jump by a few pixels between
   pages, and with `cover` the slide's own edges would be cropped, which on a
   slide means losing words. */
.cx-frame {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out);
}
.cx-frame:hover {
  border-color: var(--blue-electric);
  box-shadow: var(--shadow-md);
}

.cx-shot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cx-caption {
  margin-top: 12px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy);
}

/* Quiet by design. It is a convenience for anyone who wants to read a dense
   slide properly, mostly on a phone, not a call to action competing with the
   two buttons in the hero. The whole frame above is the same link, so this is
   the visible half of an affordance that is already there. */
.cx-full {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-electric);
  text-decoration: none;
  cursor: pointer;
}
.cx-full:hover { text-decoration: underline; }

@media (max-width: 720px) {
  /* One per page. The ratio does NOT change here: with object-fit: contain a
     landscape slide still fits to the container WIDTH, so a taller box would
     only add letterboxing above and below and change the image size not at
     all. An earlier version made it portrait on that mistaken theory. */
  .cx-stage { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================================
   THE TWO CAVEATS
   ---------------------------------------------------------------------------
   Added 21 September 2026 at Aditya's request, worded by him.

   YOUR TIMELINE is RED AND LARGE, as asked. The red is --red-note, the one
   already used for the mock interviews row, so the palette did not grow. A
   pale red ground and a thick left rule make it read as a caveat rather than
   as an error message, which is the risk with a big red block.

   WHY JOIN EARLY is deliberately calmer: navy on white, numbered. One loud
   block per section is plenty, and this one sits right under the cards.
=========================================================================== */
.cv-timeline {
  margin: 0 0 clamp(22px, 2.8vw, 34px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
  border-left: 5px solid var(--red-note);
  border-radius: var(--radius);
  background: rgba(198, 40, 40, 0.06);
}

/* SAME SIZES AS THE "CHOOSE YOUR PROGRAM" HEADING AND ITS SUB LINE, copied
   from .section-title and .section-sub in style.css, at Aditya's request on
   21 September 2026. Only the colour differs: both are red. The first version
   ran the body at 20px bold, which made the whole block shout. If either rule
   in style.css changes, change these with it. */
.cv-timeline-title {
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--red-note);
}

.cv-timeline-body {
  margin-top: 6px;
  max-width: 900px;
  font-size: clamp(14.5px, 1.6vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--red-note);
}

.cv-early {
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.cv-early-title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.cv-early-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.cv-early-item { display: flex; gap: 14px; align-items: flex-start; }

.cv-early-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-electric);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
}

.cv-early-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.cv-early-head {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}

@media (max-width: 720px) {
  .cv-early-list { grid-template-columns: minmax(0, 1fr); }
}