/* ==========================================================================
   Teknosell 2026 - program pages
   Loaded on /value-selling, /customer-service and /product-training only.
   Depends on css/style.css for tokens, buttons, header, footer and reveals.

   The page is built around four devices, in this order:
     1. qcard    the actual question a coach asks, so the offer is concrete
                 within one screen
     2. compare  the same question answered in week 1 and in week 12
     3. crit     the scorecard, which is both the curriculum and the proof
     4. block    the rotation, which shows depth without an e-learning menu
   ========================================================================== */

/* Program pages carry more sections than the landing page, so they run tight:
   about 20 percent less air between sections. Any more and the page starts to
   feel cramped rather than brisk. */
:root{--section-y:clamp(3rem,5.2vw,5.25rem)}
.section-head{margin-bottom:clamp(1.75rem,3.2vw,2.75rem)}
/* Six centred section heads at landing page scale fought the h1 and ate about
   450px between them. One size down puts the hierarchy back and reads calmer.
   Only program pages load this file, so the landing page keeps its big heads. */
.section-head h2{font-size:var(--t-lg)}
.section-head .lead{font-size:1.0625rem; margin-top:.85rem}
.section-head.center h2{max-width:26ch}

/* ---------- 1. Program hero ---------- */
.pg-hero{
  position:relative; isolation:isolate; overflow:hidden; color:var(--white);
  background:
    radial-gradient(1000px 640px at 80% 10%, rgba(34,119,170,.40), transparent 62%),
    radial-gradient(700px 520px at 4% 96%, rgba(95,115,136,.17), transparent 60%),
    linear-gradient(158deg,var(--ink-900) 0%,var(--blue-900) 48%,#0A2740 100%);
  padding-block:calc(78px + clamp(1.75rem,3.4vw,3rem)) clamp(2.5rem,5vw,4.25rem);
}
.pg-hero__inner{
  display:grid; grid-template-columns:1.04fr .96fr; align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
}
.pg-hero h1{color:var(--white); max-width:15ch; margin-top:1rem}
.pg-hero .lead{color:#C3D6E7; max-width:52ch; margin-top:1.15rem}


.pg-hero__facts{display:flex; flex-wrap:wrap; gap:1.35rem; margin-top:1.9rem;
  padding-top:1.35rem; border-top:1px solid rgba(255,255,255,.14)}
.pg-fact{display:flex; flex-direction:column; gap:.15rem}
.pg-fact b{font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--white)}
.pg-fact span{font-size:.8125rem; letter-spacing:.09em; text-transform:uppercase; color:#8FAAC3}

/* ---------- 2. The question card (hero visual) ---------- */
.qcard{
  position:relative; background:rgba(255,255,255,.975); color:var(--blue-900);
  border-radius:var(--r-xl); padding:clamp(1.35rem,2.4vw,1.9rem);
  box-shadow:0 34px 74px rgba(0,0,0,.44), 0 0 0 1px rgba(255,255,255,.10);
}
.qcard__top{display:flex; align-items:center; gap:.9rem;
  padding-bottom:1.05rem; border-bottom:1px solid var(--blue-300)}
.qcard__av{width:54px; height:54px; border-radius:15px; object-fit:cover; flex:0 0 auto}
.qcard__who{display:flex; flex-direction:column; min-width:0}
.qcard__who b{font-size:.9688rem; font-weight:700; line-height:1.3}
.qcard__who span{font-size:.8125rem; color:var(--grey-500)}
.qcard__live{margin-left:auto; display:flex; align-items:center; gap:.45rem; flex:0 0 auto;
  font-size:.6875rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--green-500)}
.qcard__live i{width:8px; height:8px; border-radius:50%; background:var(--green-500);
  animation:pulseDot 2s var(--ease) infinite}

.qcard__label{margin-top:1.15rem; font-size:.75rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-700)}
.qcard__q{font-family:var(--font-display); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.3; margin-top:.55rem;
  color:var(--blue-800)}

/* Waveform. Bar heights are set inline so the shape is deterministic rather
   than a random-looking CSS trick that changes on every edit. */
.wave{display:flex; align-items:center; gap:3px; height:38px; margin-top:1.35rem}
.wave i{flex:1; min-width:2px; border-radius:2px; background:var(--blue-500); opacity:.55;
  transform-origin:center; animation:waveBar 1.6s var(--ease) infinite}
.wave i:nth-child(4n+1){background:var(--blue-700); opacity:.85}
.wave i:nth-child(7n+3){background:var(--detail); opacity:.9}

.qcard__foot{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem;
  padding-top:1.2rem; border-top:1px solid var(--blue-300)}
.chip{display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem;
  border-radius:100px; background:var(--blue-100); border:1px solid var(--blue-300);
  font-size:.8125rem; font-weight:600; color:var(--blue-800)}
.chip--gold{background:rgba(95,115,136,.16); border-color:rgba(95,115,136,.42); color:#3F5570}

@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(77,179,99,.55)}70%{box-shadow:0 0 0 7px rgba(77,179,99,0)}}
@keyframes waveBar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

/* ---------- 3. You'll recognise this if ---------- */
.recog{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem)}
.recog__item{
  background:var(--white); border:1px solid var(--border); border-left:3px solid var(--detail);
  border-radius:var(--r-md); padding:clamp(1.25rem,2vw,1.6rem);
  font-size:1.0625rem; line-height:1.6; color:var(--content-body);
}
.section--subtle .recog__item{background:var(--white)}

/* ---------- 4. Week 1 vs week 12 ---------- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,2.6vw,2rem); align-items:start}
.ans{position:relative; border-radius:var(--r-lg); border:1px solid var(--border);
  background:var(--white); padding:clamp(1.4rem,2.4vw,2rem)}
.ans--before{background:var(--blue-100); border-color:var(--blue-300)}
.ans--after{box-shadow:var(--shadow-md); border-color:rgba(95,115,136,.55)}
.ans__tag{display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .8rem;
  border-radius:100px; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.ans--before .ans__tag{background:var(--red-100); color:var(--red-600)}
.ans--after  .ans__tag{background:var(--detail-soft); color:#7A5620}
.ans__head{font-family:var(--font-display); font-weight:800; font-size:1.0625rem;
  color:var(--content-title); margin-top:.85rem}
.ans__text{margin-top:.9rem; font-size:1.0625rem; line-height:1.72; color:var(--blue-900)}
.ans--before .ans__text{color:var(--content-body)}
/* A highlighter, not a background block: the gradient stops halfway so the
   descenders stay readable. */
.hl{background:linear-gradient(180deg,transparent 56%, rgba(95,115,136,.48) 56%);
  padding:0 .08em; font-weight:600}
.hl sup{font-size:.62em; font-weight:800; color:var(--detail-strong); margin-left:.12em; top:-.5em; position:relative}

.ans__foot{margin-top:1.35rem; padding-top:1.15rem; border-top:1px dashed var(--blue-300);
  font-size:.9375rem; line-height:1.6; color:var(--content-subtle)}

.notes{margin-top:1.5rem; padding-top:1.25rem; border-top:1px dashed var(--blue-300);
  display:grid; gap:.7rem}
.notes li{display:flex; gap:.7rem; align-items:flex-start; font-size:.9375rem;
  line-height:1.55; color:var(--content-body)}
.notes b{flex:0 0 auto; width:21px; height:21px; border-radius:50%; display:grid; place-items:center;
  background:var(--detail); color:var(--blue-900);
  font-family:var(--font-display); font-weight:800; font-size:.6875rem; margin-top:2px}

/* ---------- 5. Fact box ---------- */
.factbox{
  margin-top:clamp(2rem,4vw,3rem); border-radius:var(--r-lg); overflow:hidden;
  background:var(--blue-900); color:#C3D6E7;
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:clamp(1.25rem,3vw,2.5rem); padding:clamp(1.5rem,3vw,2.25rem);
}
.factbox__num{font-family:var(--font-display); font-weight:800; line-height:.95;
  font-size:clamp(2.6rem,6vw,4rem); color:var(--detail); white-space:nowrap}
.factbox__num small{display:block; font-family:var(--font-body); font-weight:600;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:#8FAAC3; margin-top:.5rem}
.factbox p{font-size:1.0625rem; line-height:1.66}
.factbox p + p{margin-top:.8rem}
.factbox cite{display:block; margin-top:.9rem; font-style:normal; font-size:.8125rem; color:#7D98B2}

/* ---------- 6. The scorecard ---------- */
.sc-key{display:flex; flex-wrap:wrap; gap:1.5rem; margin-bottom:1.4rem}
.sc-key span{display:flex; align-items:center; gap:.55rem; font-size:.8438rem; color:var(--content-subtle)}
.sc-key i{width:20px; height:9px; border-radius:3px; display:block; flex:0 0 auto}
.sc-key i.k-start{background:var(--blue-500)}
.sc-key i.k-gain{background:linear-gradient(90deg,var(--detail),var(--detail-strong))}
.sc-key i.k-none{background:var(--blue-300)}

.scorecard{display:grid; gap:.55rem}
.crit{
  display:grid; grid-template-columns:2.2rem 1fr minmax(170px,215px);
  gap:.85rem clamp(1rem,2vw,1.75rem); align-items:center;
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
  padding:clamp(1rem,1.6vw,1.2rem) clamp(1.15rem,2vw,1.6rem);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.crit:hover{border-color:rgba(95,115,136,.5); box-shadow:var(--shadow-sm)}
.crit__n{font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--blue-300)}
.crit:hover .crit__n{color:var(--detail)}
.crit__name{font-family:var(--font-display); font-weight:800; font-size:1.0625rem;
  color:var(--content-title); line-height:1.25}
.crit__desc{font-size:.9375rem; line-height:1.55; color:var(--content-body); margin-top:.3rem}
.crit__scale{display:flex; flex-direction:column; gap:.45rem}
.track{display:flex; gap:5px}
.track i{flex:1; height:10px; border-radius:3px; background:var(--blue-300)}
.track i.is-start{background:var(--blue-500)}
.track i.is-gain{background:linear-gradient(90deg,var(--detail),var(--detail-strong))}
/* The scorecard key at the top of the section already names the colours, so a
   START / AFTER caption under all six rows was pure repetition. */

/* ---------- 7. The rotation ---------- */
.rail{display:grid; grid-template-columns:8fr 12fr 20fr; gap:5px; margin-bottom:.65rem}
.rail i{height:10px; border-radius:4px; display:block}
.rail i:nth-child(1){background:var(--blue-500)}
.rail i:nth-child(2){background:var(--blue-700)}
.rail i:nth-child(3){background:linear-gradient(90deg,var(--detail),var(--detail-strong))}
.rail-ticks{display:grid; grid-template-columns:8fr 12fr 20fr; gap:5px;
  font-size:.75rem; font-weight:600; color:var(--content-subtle); margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.rail-ticks span:last-child{text-align:right}

.blocks{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,1.85rem)}
.block{display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.5vw,2rem); position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease)}
.block:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent}
.block__weeks{display:inline-flex; align-self:flex-start; padding:.32rem .8rem; border-radius:100px;
  font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:var(--blue-100); color:var(--blue-700); border:1px solid var(--blue-300)}
.block:nth-child(3) .block__weeks{background:rgba(95,115,136,.18); color:#3F5570; border-color:rgba(95,115,136,.4)}
.block h3{font-size:1.25rem; margin-top:1rem}
.block__what{font-size:.9688rem; line-height:1.6; color:var(--content-body); margin-top:.6rem}
.block__qs{margin-top:1.35rem; padding-top:1.15rem; border-top:1px solid var(--blue-300);
  display:grid; gap:.7rem; flex:1}
.block__qs li{display:flex; gap:.6rem; font-size:.9375rem; line-height:1.5; color:var(--blue-900)}
.block__qs li::before{content:"›"; flex:0 0 auto; color:var(--detail); font-weight:800; line-height:1.4}

/* ---------- 8. Anatomy of one call (on a dark section) ----------
   A five column strip on a rail, not a stacked list. The same information as
   before in about a third of the height, which was the point of shortening the
   page. Stacked below 1024 the rail turns back into a left spine. */
.anatomy{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(1rem,2.2vw,2rem); position:relative; padding-top:1.9rem;
}
.anatomy::before{
  content:""; position:absolute; left:6px; right:6px; top:5px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.22) 10%,
                             rgba(255,255,255,.22) 90%, rgba(255,255,255,.06));
}
.step-col{position:relative}
.step-col::before{
  content:""; position:absolute; left:0; top:-1.9rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--blue-900); border:2px solid var(--blue-500);
}
.step-col--key::before{background:var(--detail); border-color:var(--detail)}
.step-col__t{display:block; font-family:var(--font-display); font-weight:800;
  font-size:1rem; color:var(--detail)}
.step-col b{display:block; margin-top:.3rem; font-family:var(--font-display); font-weight:800;
  font-size:1.0625rem; color:var(--white); line-height:1.25}
.step-col p{margin-top:.45rem; font-size:.875rem; line-height:1.55; color:#A9C2D8}

/* ---------- 9. Who it is for / what the manager gets ---------- */
.roles{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem}
.role{display:inline-flex; padding:.5rem .95rem; border-radius:100px;
  background:var(--white); border:1px solid var(--border);
  font-size:.9375rem; font-weight:600; color:var(--blue-800)}
.notfor{margin-top:1.75rem; padding:1.15rem 1.35rem; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--border); border-left:3px solid var(--blue-500);
  font-size:.9688rem; line-height:1.6; color:var(--content-body)}
.notfor b{color:var(--content-title)}

.deliver{display:grid; gap:.9rem; margin-top:1.4rem}
.deliver li{display:flex; gap:.85rem; align-items:flex-start; font-size:1rem;
  line-height:1.6; color:var(--content-body)}
.deliver svg{flex:0 0 auto; color:var(--green-500); margin-top:5px}
.deliver b{color:var(--content-title)}

/* ---------- 10. Full-bleed program photograph ---------- */
.pg-band{position:relative; border-radius:var(--r-xl); overflow:hidden; isolation:isolate}
/* 16/9 made this the tallest thing on the page by a wide margin. The subjects
   sit centrally in all three plates, so a letterbox crop costs nothing. */
.pg-band img{width:100%; aspect-ratio:16/6.5; object-fit:cover}
.pg-band__copy{position:absolute; inset:auto 0 0 0; padding:clamp(1.4rem,3.4vw,2.4rem);
  /* The copy lands over gravel and daylight in one of the three photographs,
     so the scrim has to be heavier than it looks like it needs to be. */
  background:linear-gradient(0deg, rgba(8,31,53,.95) 18%, rgba(8,31,53,.74) 58%, transparent 100%);
  color:var(--white)}
.pg-band__copy h3{color:var(--white); font-size:var(--t-lg); max-width:22ch}
.pg-band__copy p{margin-top:.7rem; color:#C3D6E7; max-width:60ch; font-size:1.0625rem}
/* The photograph opens this section, so the heading under it needs its own
   breathing room rather than the section-head's top-of-page spacing. */
.pg-gap-head{margin-top:clamp(2.25rem,4vw,3.25rem)}

/* ---------- 11. The other two programs ---------- */
.xlinks{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.5rem)}
.xlink{display:flex; align-items:center; gap:1.1rem; padding:clamp(1.35rem,2.2vw,1.7rem);
  border-radius:var(--r-lg); background:var(--white); border:1px solid var(--border);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease)}
.xlink:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent}
/* The description selector has to be .xlink > span > span, not .xlink span.
   The icon box is a span too, so the looser selector was winning on
   specificity and handing the icon display:block, which killed the centring
   and left the glyph sitting high in its rounded square. */
.xlink__ic{width:48px; height:48px; border-radius:14px; flex:0 0 auto; align-self:center;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--blue-300),var(--blue-100)); color:var(--blue-700)}
.xlink__ic svg{width:24px; height:24px}
.xlink:hover .xlink__ic{background:linear-gradient(150deg,var(--detail),var(--detail-soft)); color:var(--blue-900)}
.xlink > span{min-width:0}
.xlink b{display:block; font-family:var(--font-display); font-weight:800; font-size:1.0625rem;
  color:var(--content-title); line-height:1.3}
.xlink > span > span{display:block; font-size:.9375rem; color:var(--content-body); margin-top:.15rem}
.xlink__go{margin-left:auto; flex:0 0 auto; color:var(--blue-700); transition:transform .3s var(--ease)}
.xlink:hover .xlink__go{transform:translateX(5px)}

.pg-cta__more{margin-top:clamp(2.75rem,5vw,4rem); padding-top:clamp(2rem,3.5vw,2.75rem);
  border-top:1px solid rgba(255,255,255,.14)}
.pg-cta__more-label{margin-bottom:1.25rem; font-size:.8125rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:#8FAAC3}
.pg-cta .xlink{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); text-align:left}
.pg-cta .xlink:hover{background:rgba(255,255,255,.10); border-color:rgba(95,115,136,.45);
  box-shadow:none; transform:translateY(-4px)}
.pg-cta .xlink b{color:var(--white)}
.pg-cta .xlink > span > span{color:#A9C2D8}
.pg-cta .xlink__ic{background:rgba(255,255,255,.09); color:var(--detail)}
.pg-cta .xlink:hover .xlink__ic{background:var(--detail); color:var(--blue-900)}
.pg-cta .xlink__go{color:var(--detail)}

/* ---------- 12. Closing call to action ---------- */
/* The section carries .on-dark in the markup. It has to: .btn--ghost defaults
   to a Blue 900 label, which on this background is invisible, and only
   .on-dark .btn--ghost switches it to white. */
.pg-cta{
  position:relative; isolation:isolate; overflow:hidden; color:var(--white); text-align:center;
  background:
    radial-gradient(760px 420px at 50% 0%, rgba(34,119,170,.42), transparent 66%),
    linear-gradient(158deg,var(--ink-900),var(--blue-900) 55%,#0A2740);
}
.pg-cta h2{color:var(--white); max-width:20ch; margin-inline:auto}
.pg-cta .lead{color:#C3D6E7; max-width:56ch; margin:1.15rem auto 0}
.pg-cta__actions{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem}

/* ---------- 13. The programme menu ----------
   A rebuild of the module-design slide Kristian shows clients: month boxes on
   an arrow, sessions listed inside each one, a headset coach on the practice
   sessions. Months are the horizontal axis and the five sessions run down
   inside each month, which is what lets six months fit on a laptop screen
   without the type going to 9px.

   Picking a session type in the dark panel lights every instance of it across
   the whole timeline at once. That is the interaction worth having: it makes
   the repetition visible, and the repetition is the thing being sold. */
.menu__ui{margin-top:clamp(.5rem,1.5vw,1rem)}

/* --- the length picker, a segmented control --- */
.plans{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem;
  background:var(--white); border:1px solid var(--border); border-radius:100px;
  padding:.4rem; width:max-content; max-width:100%; margin:0 auto;
  box-shadow:var(--shadow-sm);
}
.plan{
  display:flex; flex-direction:column; gap:.05rem; align-items:center;
  padding:.6rem 1.35rem; border:0; border-radius:100px; background:transparent;
  cursor:pointer; color:var(--blue-800); text-align:center;
  transition:background .28s var(--ease), color .28s var(--ease);
}
.plan__len{font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:-.01em}
.plan__name{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-500)}
.plan:hover{background:var(--blue-100)}
.plan[aria-selected="true"]{background:var(--blue-900); color:var(--white)}
.plan[aria-selected="true"] .plan__name{color:var(--detail)}
.plan:focus-visible{outline:3px solid var(--detail); outline-offset:2px}

.tl__blurb{
  max-width:60ch; margin:clamp(1.4rem,2.6vw,2rem) auto 0; text-align:center;
  font-size:1.0625rem; line-height:1.6; color:var(--content-body);
}

/* --- the months --- */
/* A month card is capped rather than left at 1fr, so one month does not
   stretch a single card across the page. Six of them at the cap are wider than
   the page, and the track shrinks them to the 176px floor instead of
   scrolling; below that it scrolls. --n comes from the panel. */
.tl{--tl-gap:14px; --tl-card:262px;
  --tl-w:calc(var(--n) * var(--tl-card) + (var(--n) - 1) * var(--tl-gap))}
.tl__months{
  list-style:none;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(176px,var(--tl-card));
  gap:var(--tl-gap);
  max-width:min(calc(var(--tl-w) + 12px),100%); margin:clamp(1.4rem,2.6vw,2rem) auto 0;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  /* room for the card shadow, which an overflow container would otherwise clip */
  padding:6px 6px 12px;
}
.tl__months::-webkit-scrollbar{height:6px}
.tl__months::-webkit-scrollbar-thumb{background:var(--blue-500); border-radius:100px}
.tl__months::-webkit-scrollbar-track{background:var(--blue-300); border-radius:100px}

.mo{
  scroll-snap-align:start; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(.9rem,1.5vw,1.15rem); box-shadow:var(--shadow-sm);
}
/* Stacked rather than month left and weeks right. Two digit week ranges are
   wider, so a single row wraps from month four onward and pushes everything
   below it down, leaving the week dots out of line across the six cards. */
.mo__n{
  display:flex; flex-direction:column; gap:.15rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--detail-strong);
}
.mo__n span{letter-spacing:.06em; color:var(--grey-500)}

/* The three rotation blocks, tinted the way the rotation section above already
   tints them: the two coaching blocks in blue, the one written from the
   client's own market in gold. */
.mo__block{
  display:inline-flex; align-self:flex-start; margin-top:.6rem;
  padding:.26rem .65rem; border-radius:100px;
  font-size:.6875rem; font-weight:700; letter-spacing:.04em;
  background:var(--blue-100); border:1px solid var(--blue-300); color:var(--blue-800);
}
.mo__block--1{background:rgba(34,119,170,.12); border-color:rgba(34,119,170,.3)}
.mo__block--2{background:rgba(95,115,136,.18); border-color:rgba(95,115,136,.4); color:#3F5570}

/* Two lines reserved, so a one line theme does not lift its week dots out of
   line with the other months. */
.mo__name{font-size:1rem; line-height:1.25; margin-top:.5rem; color:var(--blue-800);
  min-height:2.5em}

/* Four weekly calls. The rail behind them starts and ends at the centre of the
   first and last dot, which is one eighth in from each side for four evenly
   divided columns. */
.mo__weeks{
  position:relative; display:flex; margin-top:.9rem; padding-top:.95rem;
  border-top:1px solid var(--blue-300);
  transition:opacity .3s var(--ease);
}
.mo__weeks::before{
  content:""; position:absolute; left:12.5%; right:12.5%; top:calc(.95rem + 12px);
  height:2px; background:var(--blue-300); border-radius:2px;
}
/* position:relative is load bearing. The rail is an absolutely positioned
   pseudo-element, so without it the rail paints on top of these and every
   marker gets a line drawn straight through it. */
.wk{position:relative; flex:1 1 0; display:flex; flex-direction:column;
  align-items:center; gap:.32rem; min-width:0}
.wk__ic{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  box-shadow:0 0 0 3px var(--white);
  background:var(--blue-100); border:1.5px solid var(--blue-300); color:var(--blue-700);
  transition:background .3s var(--ease), border-color .3s var(--ease),
             color .3s var(--ease), transform .3s var(--ease);
}
.wk__ic svg{width:14px; height:14px}
/* Three fill weights on top of three different glyphs, so the rhythm of a
   month is readable at a glance without reading the legend first. */
.wk--call .wk__ic{background:var(--blue-700); border-color:var(--blue-700); color:var(--white)}
.wk--quiz .wk__ic{background:var(--white); border-color:var(--blue-500)}
.wk--group .wk__ic{background:var(--blue-500); border-color:var(--blue-500); color:var(--white)}
.wk b{font-size:.625rem; font-weight:700; letter-spacing:.06em; color:var(--grey-500)}

.mo__score{
  display:flex; align-items:center; gap:.35rem; margin-top:.75rem;
  font-size:.75rem; font-weight:600; color:var(--blue-800);
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.mo__score svg{flex:0 0 auto; width:13px; height:13px; color:var(--detail)}

.mo__q{
  margin-top:.8rem; padding-left:.7rem; border-left:2px solid var(--detail);
  font-size:.8125rem; line-height:1.5; color:var(--content-body);
}

.mo__mark{
  display:flex; align-items:center; gap:.45rem; margin-top:auto;
  padding:.5rem .6rem; border-radius:9px;
  background:var(--blue-100); border:1px solid var(--blue-300);
  font-size:.75rem; font-weight:700; color:var(--blue-800); line-height:1.25;
  transition:opacity .3s var(--ease);
}
/* margin-top:auto pushes the badge to the bottom of the card so all of them
   line up, and this keeps a gap when the card has no slack to give. */
.mo__q{margin-bottom:.9rem}
.mo__mark--gold{background:rgba(95,115,136,.18); border-color:rgba(95,115,136,.42); color:#3F5570}
.mo__mark-ic{display:grid; place-items:center; flex:0 0 auto; width:18px; height:18px}
.mo__mark-ic svg{width:16px; height:16px}

/* --- the arrow under the timeline --- */
.tl__axis{
  position:relative; display:flex; justify-content:space-between;
  max-width:min(var(--tl-w),100%); margin:.45rem auto 0; padding-top:.9rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--grey-500);
}
.tl__axis i{
  position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--blue-500),var(--blue-700) 45%,var(--detail));
}
.tl__axis i::after{
  content:""; position:absolute; right:-1px; top:50%;
  border:5px solid transparent; border-left-color:var(--detail);
  transform:translateY(-50%);
}

/* --- what the length adds up to --- */
.sum{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  margin-top:clamp(1.2rem,2.2vw,1.7rem)}
.sum__it{
  display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .9rem .4rem .5rem;
  border-radius:100px; background:var(--white); border:1px solid var(--border);
  font-size:.8125rem; color:var(--blue-800);
}
.sum__ic{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--blue-100); color:var(--blue-700); flex:0 0 auto;
}
.sum__ic svg{width:14px; height:14px}
.sum__it--time .sum__ic{background:rgba(95,115,136,.2); color:#3F5570}
.sum__it b{font-family:var(--font-display); font-weight:800; font-size:1.0625rem; color:var(--blue-900)}
.sum__it--time{background:rgba(95,115,136,.18); border-color:rgba(95,115,136,.42); color:#3F5570}
.sum__it--time b{color:#3F5570}

/* --- the dark panel: session filter plus the coach --- */
.probe{
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:clamp(1.5rem,3vw,2.4rem);
  border-radius:var(--r-xl); color:var(--white);
  background:
    radial-gradient(620px 380px at 18% 100%, rgba(34,119,170,.42), transparent 66%),
    radial-gradient(420px 300px at 92% 0%, rgba(95,115,136,.16), transparent 62%),
    linear-gradient(152deg,var(--ink-900),var(--blue-900) 55%,#0A2740);
  box-shadow:var(--shadow-md);
}
.kinds{padding:clamp(1.2rem,2.4vw,1.7rem) clamp(1.2rem,2.6vw,2rem) 0}
.kinds__lb{font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--detail); text-align:center}
.kinds__row{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:.9rem}
.kind{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.55rem 1rem .55rem .6rem; border-radius:100px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.17);
  color:#C3D6E7; font-size:.875rem; font-weight:600;
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.kind__ic{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.11); color:inherit; flex:0 0 auto;
  transition:background .28s var(--ease), color .28s var(--ease);
}
.kind__ic svg{width:15px; height:15px}
.kind:hover{background:rgba(255,255,255,.13); color:var(--white)}
.kind[aria-selected="true"]{background:var(--detail); border-color:var(--detail); color:var(--blue-900)}
.kind[aria-selected="true"] .kind__ic{background:rgba(16,62,103,.17); color:var(--blue-900)}
.kind:focus-visible{outline:3px solid var(--detail); outline-offset:3px}

.dets{padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.2rem,2.6vw,2rem) 0}
.tl[hidden],.det[hidden]{display:none}
.det{
  display:grid; grid-template-columns:minmax(0,250px) 1fr;
  gap:clamp(1rem,2.6vw,2.4rem); align-items:end;
  animation:detIn .5s var(--ease-out) both;
}
@keyframes detIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
/* The three cut-outs have different widths, so they are sized on height and
   centred in a fixed column. Sizing on width would make her grow and shrink as
   the panel changes, which reads as a bug rather than as a change of pose. */
.det__fig{
  height:clamp(190px,23vw,290px); width:auto; margin-inline:auto;
  align-self:end; filter:drop-shadow(0 22px 34px rgba(0,0,0,.42));
}
.det__copy{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(1.5rem,3vw,3rem); align-content:start;
  padding-bottom:clamp(1.4rem,2.6vw,2.1rem);
}
.det__meta,.det__name{grid-column:1 / -1}
.det__meta{font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--detail)}
.det__name{color:var(--white); font-size:var(--t-md); margin-top:.5rem}
.det__body{margin-top:.9rem; color:#C3D6E7; line-height:1.6; font-size:1rem}
.det__pts{margin-top:.9rem; display:flex; flex-direction:column; gap:.55rem}
.det__pts li{display:flex; gap:.6rem; align-items:flex-start; font-size:.9375rem; color:#DCE8F3}
.det__pts svg{flex:0 0 auto; margin-top:.28rem; color:var(--detail)}

/* --- picking a session type lights it everywhere --- */
.menu[data-kind] .wk:not(.is-lit){opacity:.72}
.menu[data-kind] .mo__score:not(.is-lit),
.menu[data-kind] .mo__mark:not(.is-lit){opacity:.42}
.menu[data-kind] .wk.is-lit .wk__ic{
  background:var(--detail); border-color:var(--detail-strong); color:var(--blue-900);
  transform:scale(1.12);
}
.menu[data-kind] .wk.is-lit b{color:var(--detail-strong)}
.menu[data-kind] .mo__mark.is-lit{background:rgba(95,115,136,.18);
  border-color:rgba(95,115,136,.42); color:#3F5570}
.menu[data-kind] .mo__mark.is-lit{background:rgba(95,115,136,.18);
  border-color:rgba(95,115,136,.42); color:#3F5570}

.menu__foot{
  max-width:64ch; margin:clamp(1.4rem,2.6vw,2rem) auto 0; text-align:center;
  font-size:.9375rem; line-height:1.6; color:var(--content-body);
}

/* ---------- 14. Responsive ---------- */
@media (max-width:1024px){
  .anatomy{grid-template-columns:1fr; gap:0; padding-top:0}
  .anatomy::before{display:none}
  .step-col{padding:0 0 1.5rem 1.6rem; border-left:2px solid rgba(255,255,255,.16)}
  .step-col:last-child{border-left-color:transparent; padding-bottom:0}
  .step-col::before{top:.32rem; left:-7px}
  .pg-hero__inner{grid-template-columns:1fr}
  .pg-hero h1{max-width:none}
  .qcard{max-width:560px; margin-inline:auto}
  .recog,.blocks{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .xlinks{grid-template-columns:1fr}
  /* Below this the coach and the copy stop fitting side by side, so she
     goes above the text and shrinks. */
  .det{grid-template-columns:1fr; gap:0; justify-items:center; text-align:center}
  .det__copy{grid-template-columns:1fr}
  .det__fig{height:clamp(170px,30vw,230px)}
  .det__copy{padding-bottom:clamp(1.4rem,3vw,2rem)}
  .det__body{margin-inline:auto}
  .det__pts{align-items:flex-start; text-align:left; max-width:44ch; margin-inline:auto}
}
@media (max-width:760px){
  .crit{grid-template-columns:2rem 1fr}
  .crit__scale{grid-column:2 / -1}
  .factbox{grid-template-columns:1fr; text-align:left}
  /* The letterbox crop leaves about 140px of image on a phone, and the caption
     needs more than that, so overlaying it buried the photograph under its own
     scrim. Below this width the copy drops underneath instead. */
  .pg-band img{aspect-ratio:16/10}
  .pg-band__copy{position:static; background:var(--blue-900); padding:1.35rem 1.4rem 1.5rem}
}
@media (max-width:520px){
  .rail-ticks{font-size:.6875rem}
  /* The segmented control runs out of room, so the three lengths stack. */
  .plans{width:100%; border-radius:var(--r-lg); flex-direction:column}
  .plan{border-radius:var(--r-md); flex-direction:row; gap:.6rem; justify-content:center}
  .tl__months{grid-auto-columns:minmax(min(74vw,260px),1fr)}
  .kind{font-size:.8125rem; padding:.45rem .8rem .45rem .5rem}
  .pg-cta__actions .btn{width:100%}
  .pg-hero__facts{gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .wave i,.qcard__live i{animation:none}
  .det{animation:none}
  .tl__months{scroll-behavior:auto}
}

/* ---------- Short programmes (crash course, Advanced Value Selling) ---------- */
.blocks--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){ .blocks--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .blocks--4{grid-template-columns:1fr} }
.crit-groups{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,2.6vw,2rem); align-items:start}
@media (max-width:860px){ .crit-groups{grid-template-columns:1fr} }
.crit-group{display:grid; gap:.75rem}
.crit-group__h{font-family:var(--font-display); font-weight:800; font-size:.8125rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--detail-strong)}
.crit--plain{grid-template-columns:2.2rem 1fr}
.pg-practical{display:grid; gap:0; margin-top:1.4rem; border-top:1px solid var(--blue-300)}
.pg-practical div{display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--blue-300)}
.pg-practical dt{font-weight:700; color:var(--content-title)}
.pg-practical dd{margin:0; color:var(--content-body)}
@media (max-width:520px){ .pg-practical div{grid-template-columns:1fr; gap:.2rem} }
.pg-quote{margin:clamp(2.5rem,5vw,4rem) auto 0; max-width:60rem; padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3vw,2.5rem);
  border-left:4px solid var(--blue-700); background:var(--bg-subtle); border-radius:0 6px 6px 0}
.pg-quote blockquote{margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,1rem + .6vw,1.4rem);
  line-height:1.45; color:var(--content-title)}
.pg-quote figcaption{margin-top:1rem; font-size:.9375rem; color:var(--content-body); line-height:1.5}
.pg-quote figcaption b{display:block; color:var(--content-title)}