/* =====================================================================
   CHAMPIONS PROGRAMME - the gold card in section 07 (Pricing)
   Sits between the two price cards and the "Every seat includes" box.

   The argument on one card: a Human Factors lead is not a salesperson,
   so nobody is asked to pitch. Twelve months free, and the year's own
   work becomes the business case. The left-hand side is written in the
   founder's first person and signed; it is the one card on the page
   that says "I", so keep "we" out of it. The right-hand side plays that year
   as a ledger: a playhead crosses twelve month cells, an entry lands at
   months 1, 3, 6 and 9, and month 12 closes with a ledger total (the
   double rule) that reads as the case.

   Driven by js/ergosphere-champions.js. The markup ships COMPLETE, so
   with no script, or with reduced motion, the full year simply shows.
   Gold is this card's own accent, the way green is Education's and
   purple is Partners'. The frame is foil, not the cyan card's rotating
   border: a highlight that drifts, and follows the pointer when there
   is one.

   The 4px track gap below is mirrored as GAP in the script.
   ===================================================================== */

@property --esc-shine { syntax: '<percentage>'; inherits: false; initial-value: 30%; }

/* the pricing headline grew a long second sentence when this card arrived: balance it so no word is left alone on the last line */
#pricing .esx_head h3 { text-wrap: balance; }

.esc_wrap { max-width: 920px; margin: 26px auto 0; }
.esc_card, .esc_card *, .esc_card *::before, .esc_card *::after { box-sizing: border-box; }

.esc_card { position: relative; overflow: hidden; padding: 40px 44px 38px; border: 2px solid transparent; border-radius: 16px;
  --esc-shine: 30%;
  background:
    linear-gradient(150deg, #1f1a10, #15120b 52%, #1b160c) padding-box,
    linear-gradient(112deg, #7c5a16 0%, #e8b84a calc(var(--esc-shine) - 24%), #fff0c0 var(--esc-shine),
      #e8b84a calc(var(--esc-shine) + 24%), #7c5a16 100%) border-box;
  box-shadow: 0 34px 84px -36px rgba(232,184,74,.6), 0 0 70px rgba(232,184,74,.07), inset 0 1px 0 rgba(255,236,180,.07);
  animation: esc_drift 9s ease-in-out infinite alternate; }
@keyframes esc_drift { from { --esc-shine: 6%; } to { --esc-shine: 94%; } }
/* pointer on the card: the script steers the highlight, so the idle drift stands down */
.esc_card.is-lit { animation: none; }
.esc_card > * { position: relative; z-index: 1; }

/* light catching the leaf: a soft pool that follows the pointer */
.esc_card > .esc_foil { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(460px circle at var(--esc-mx, 50%) var(--esc-my, 0%), rgba(255,226,150,.13), transparent 62%); }
.esc_card.is-lit > .esc_foil { opacity: 1; }

/* month 12: one pass of light across the whole card */
.esc_card::after { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%; z-index: 2; pointer-events: none;
  opacity: 0; transform: skewX(-18deg); background: linear-gradient(100deg, transparent, rgba(255,236,170,.2), transparent); }
.esc_card.is-made::after { animation: esc_sweep 1.3s cubic-bezier(.3,.1,.2,1) 1 both; }
@keyframes esc_sweep { 0% { left: -45%; opacity: 1; } 99% { left: 125%; opacity: 1; } 100% { left: 125%; opacity: 0; } }

/* ---------- top row ---------- */
.esc_top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 26px; }
.esc_badge { display: inline-block; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 1.5px; color: #1a1408; padding: 7px 15px; border-radius: 100px;
  background: linear-gradient(135deg, #fbe7a8, #e8b84a 55%, #c7922a); box-shadow: 0 6px 18px -6px rgba(232,184,74,.6); }
.esc_select { display: inline-block; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 500; line-height: 1.5;
  letter-spacing: .4px; color: #cdbf9f; padding: 6px 13px; border: 1px solid rgba(232,184,74,.3); border-radius: 100px; }

/* ---------- pitch (left) + the year (right) ---------- */
.esc_main { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 0 40px; align-items: start; }

.esc_card .esc_title { font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.14; letter-spacing: 2px;
  text-transform: uppercase; color: #fff; margin: 0 0 18px; }
.esc_title span { display: block; color: #e8b84a;
  background: linear-gradient(135deg, #fff0c0, #e8b84a 50%, #c7922a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.esc_card .esc_body { font-size: 15px; line-height: 1.72; color: rgba(241,235,221,.76); margin: 0 0 24px; }

/* the card is a letter: it closes with a name, and the button sits beside the signature */
.esc_sign { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; }
.esc_card .esc_sig { margin: 0; padding-left: 14px; border-left: 2px solid #e8b84a; line-height: 1.4; }
.esc_sig_name { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: #fff; }
.esc_sig_role { display: block; font-size: 13px; color: rgba(241,235,221,.6); margin-top: 2px; }

.esc_cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 34px; border-radius: 10px;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: .2px; text-align: center;
  color: #1a1408; text-decoration: none; background: linear-gradient(135deg, #fbe7a8, #e8b84a 55%, #c7922a);
  box-shadow: 0 14px 30px -14px rgba(232,184,74,.75), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, filter .25s ease; }
.esc_cta:hover, .esc_cta:focus { color: #1a1408; text-decoration: none; }
.esc_cta:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 20px 36px -14px rgba(232,184,74,.85), inset 0 1px 0 rgba(255,255,255,.5); }
.esc_cta:focus-visible { outline: 2px solid #fff0c0; outline-offset: 3px; }
.esc_card.is-made .esc_cta { animation: esc_ring 1.2s ease-out .55s 1; }
@keyframes esc_ring {
  0% { box-shadow: 0 14px 30px -14px rgba(232,184,74,.75), inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 0 rgba(232,184,74,.55); }
  100% { box-shadow: 0 14px 30px -14px rgba(232,184,74,.75), inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 16px rgba(232,184,74,0); } }

.esc_year { padding-left: 36px; border-left: 1px solid rgba(232,184,74,.16); }
/* the offer, set like the price on the two cards above */
.esc_amt { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 52px; line-height: 1; white-space: nowrap; color: #e8b84a;
  background: linear-gradient(135deg, #fff0c0, #e8b84a 50%, #c7922a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 16px rgba(232,184,74,.32)); }
.esc_sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-top: 12px; }
.esc_per { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(241,235,221,.6); }
.esc_count { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 11.5px; font-weight: 500; line-height: 1.4;
  color: rgba(232,184,74,.8); white-space: nowrap; }
.esc_count b { font-weight: 600; color: #fff0c0; }
/* sits under the entries, on their text column (38px month + 10px gap) */
.esc_card button.esc_replay { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; margin: 16px 0 0 48px; padding: 0;
  border: 0; border-radius: 3px; background: transparent; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500;
  line-height: 1.4; letter-spacing: .3px; text-transform: none; height: auto; color: rgba(241,235,221,.5); transition: color .2s ease; }
.esc_card button.esc_replay:hover { background: transparent; color: #f6d98a; }
.esc_card button.esc_replay:focus-visible { outline: 2px solid #fff0c0; outline-offset: 3px; color: #f6d98a; }
.esc_replay[hidden] { display: none !important; }
.esc_replay svg { width: 11px; height: 11px; flex: none; stroke: currentColor; fill: none; }

/* twelve month cells; the ledger months stand taller. Scrubbable once the script is up. */
.esc_track { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center;
  height: 38px; margin: 14px 0 0; border-radius: 4px; outline: none; -webkit-tap-highlight-color: transparent; }
.esc_card.is-live .esc_track { cursor: ew-resize; touch-action: pan-y; }
.esc_track:focus-visible { outline: 2px solid #fff0c0; outline-offset: 4px; }
.esc_track i { position: relative; display: block; height: 8px; border-radius: 2px; overflow: hidden; background: rgba(232,184,74,.14); }
.esc_track i.esc_stop { height: 16px; }
.esc_track i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #c7922a, #f3cf74);
  transform-origin: 0 50%; transform: scaleX(var(--f, 1)); }
.esc_track .esc_head { position: absolute; top: 5px; bottom: 5px; left: 100%; width: 2px; margin-left: -1px; border-radius: 2px;
  background: #fff3c9; box-shadow: 0 0 10px 2px rgba(255,220,130,.75); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.esc_card.is-live .esc_track .esc_head { opacity: 1; }
.esc_card.is-live.is-made .esc_track .esc_head { opacity: 0; }

/* the ledger: one entry per stop, closed by a total */
.esc_card .esc_ledger { list-style: none; margin: 6px 0 0; padding: 0; }
.esc_card .esc_ledger li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: baseline; gap: 0 10px;
  margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(232,184,74,.11); font-size: 14px; line-height: 1.5;
  color: rgba(241,235,221,.88); transition: color .45s ease; animation: esc_land .9s ease-out; }
.esc_ledger .esc_m { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 11.5px; font-weight: 600;
  letter-spacing: .4px; color: #e8b84a; transition: color .45s ease; }
.esc_ledger .esc_tick { justify-self: end; font-size: 13px; font-weight: 700; line-height: 1; color: #e8b84a;
  transition: opacity .3s ease, transform .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes esc_land { 0% { background: linear-gradient(90deg, rgba(232,184,74,.2), rgba(232,184,74,0) 85%); }
  100% { background: linear-gradient(90deg, rgba(232,184,74,0), rgba(232,184,74,0) 85%); } }
/* not yet reached: the row is ruled and waiting, the entry is not in */
.esc_card .esc_ledger li.is-wait { color: rgba(241,235,221,.26); animation: none; }
.esc_ledger li.is-wait .esc_m { color: rgba(232,184,74,.3); }
.esc_ledger li.is-wait .esc_tick { opacity: 0; transform: scale(.3); }

.esc_card .esc_ledger li.esc_total { position: relative; margin-top: 5px; padding: 15px 0 0; border-bottom: 0;
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.45; color: #fff; }
.esc_card .esc_ledger li:nth-last-child(2) { border-bottom: 0; }
.esc_total .esc_e span { color: #f3cf74; }
/* the double rule a ledger draws above its total */
.esc_total::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-top: 1px solid #e8b84a; border-bottom: 1px solid #e8b84a; transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .2s ease; }
.esc_total.is-wait::before { transform: scaleX(0); opacity: 0; transition-duration: .2s; }
.esc_card .esc_ledger li.esc_total.is-wait { color: rgba(241,235,221,.26); }
.esc_total.is-wait .esc_e span { color: inherit; }

/* ---------- the partnership: what the founder does, what is asked in return.
   Deliberately NOT the Founding card's give / get: that one is a trade, this is not. ---------- */
.esc_pact { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 0 40px; margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(232,184,74,.16); }
.esc_pact > .esc_ask { padding-left: 37px; }
.esc_cap { display: block; font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; line-height: 1.5; text-transform: uppercase;
  letter-spacing: 2px; color: rgba(241,235,221,.5); margin-bottom: 12px; }
.esc_do .esc_cap { color: #e8b84a; }
.esc_card .esc_list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.esc_card .esc_list li { position: relative; margin: 0; padding-left: 24px; font-size: 13.5px; line-height: 1.5; color: rgba(241,235,221,.8); }
.esc_ask .esc_list li::before { content: ''; position: absolute; left: 2px; top: .44em; width: 8px; height: 8px;
  border: 1.5px solid rgba(232,184,74,.6); border-radius: 50%; }
.esc_do .esc_list li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: #e8b84a; font-weight: 700; }

/* ---------- responsive: the same 1040 / 600 steps as the rest of pricing ---------- */
@media (max-width: 1040px) {
  .esc_main { grid-template-columns: 1fr; gap: 34px 0; }
  .esc_year { padding: 30px 0 0; border-left: 0; border-top: 1px solid rgba(232,184,74,.16); }
  .esc_pact > .esc_ask { padding-left: 0; }
  .esc_sign { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .esc_card { padding: 30px 24px 30px; }
  .esc_card .esc_title { font-size: 27px; letter-spacing: 1.5px; }
  .esc_amt { font-size: 42px; }
  .esc_sign { justify-content: space-between; }
  .esc_pact { grid-template-columns: 1fr; gap: 24px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .esc_card, .esc_card.is-made::after, .esc_card.is-made .esc_cta, .esc_card .esc_ledger li { animation: none; }
  .esc_cta, .esc_card .esc_ledger li, .esc_ledger .esc_m, .esc_ledger .esc_tick, .esc_total::before, .esc_card > .esc_foil { transition: none; }
}