/* partials/_coaching_plan_cards.html -- moved here from that partial's inline <style>
   (2026-09-22). The partial links this file where the block was, so every
   page that includes the partial gets the CSS without knowing about it. */
/* ============ .alt-plans — the two cards. Self-contained: own token block, own local
   reset, every class prefixed alt-. The tokens are declared HERE as well as on `.alt`
   because this block has to stand up inside .tbx on the homepage, where there is no
   `.alt` ancestor to inherit them from. */
.alt-plans{
--disp:'Archivo',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
--ink:#fff;--lead:#d4ddec;--muted:#a7b6cd;--faint:#7b8aa2;
--cyan:#5BC3F9;--cy:91,195,249;
--line:rgba(148,175,214,.16);--line-2:rgba(148,175,214,.28);--line-3:rgba(148,175,214,.4);
font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;
display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px);align-items:start}
.alt-plans *{margin:0;padding:0;box-sizing:border-box}
.alt-plans svg{display:block}

.alt-card{position:relative;border:1px solid var(--line-2);border-radius:16px;padding:clamp(18px,1.9vw,30px);display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
/* Both grounds are translucent on purpose: on the homepage these sit on a photograph
   and a solid fill would punch two rectangles out of it. */
.alt-card--old{background:linear-gradient(180deg,rgba(13,20,34,.6),rgba(6,10,18,.72))}
/* THE GLOW IS THE RESTING STATE NOW (owner 2026-09-18, "so that it pops better").
   These are the values the hover used to introduce: the brighter border, the cyan
   bloom and the corner brackets at full strength. The card is the answer this
   section is arguing for, and it was only making that case to people with a mouse
   who happened to point at it - a phone reader never saw it at all. */
.alt-card--new{background:linear-gradient(180deg,rgba(11,29,50,.72),rgba(6,13,24,.84));border-color:rgba(var(--cy),.85);box-shadow:0 0 0 1px rgba(var(--cy),.28),0 0 70px -6px rgba(var(--cy),.45),0 40px 100px rgba(0,0,0,.6)}
.alt-card--new::before,.alt-card--new::after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid var(--cyan);opacity:1;transition:opacity .25s ease}
.alt-card--new::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:16px 0 0 0}
.alt-card--new::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 16px 0}

/* HOVER (owner 2026-09-17, amended 2026-09-18). Both cards respond; only one of
   them glows - and that one glows without being touched.
   That asymmetry is the section's whole argument - if hovering the one-off session
   lit up the same way, the comparison would be showing two equally good options and
   arguing they are not. So the old card gets the movement and a cleaner edge, and the
   Academy card gets the movement AND the cyan bloom, with its corner brackets coming
   up to full strength.

   @media (hover:hover) because neither card is a link or a button: on a touch screen
   a plain div can pick up :hover from a tap and then keep it, leaving a card stuck
   lifted and glowing with nothing to dismiss it. */
@media (hover:hover){
.alt-card--old:hover{transform:translateY(-3px);border-color:var(--line-3);box-shadow:0 26px 70px rgba(0,0,0,.5)}
/* The Academy card's hover is now the LIFT ONLY - everything else it used to turn
   on is on all the time. The asymmetry the section depends on is unchanged: hover
   the one-off card and you get movement and a cleaner edge, hover this one and you
   get movement over a card that was already glowing. */
.alt-card--new:hover{transform:translateY(-3px)}
}
/* The cards are the only thing in here that moves. Someone who asked for less of that
   keeps the border and the glow - they carry the same information - and loses the travel. */
@media (prefers-reduced-motion:reduce){
.alt-card{transition:border-color .25s ease,box-shadow .25s ease}
.alt-card:hover{transform:none}
}

.alt-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.alt-ct{font-family:var(--disp);font-weight:700;font-size:clamp(13px,1.05vw,16px);letter-spacing:.11em;text-transform:uppercase;color:var(--lead)}
.alt-card--new .alt-ct{color:var(--cyan)}
/* The brand lockup, matched to .landing-nav-brand: 2.05rem mark, .6rem gap, Orbitron
   800 at .04em, #eaf1ff with the second word in the accent. */
.alt-brand{display:inline-flex;align-items:center;gap:.6rem;font-family:'Orbitron',var(--disp);font-weight:800;letter-spacing:.04em;font-size:clamp(14px,1.1vw,16.5px);line-height:1;color:#eaf1ff;white-space:nowrap}
.alt-brand img{display:block;height:2.05rem;width:2.05rem;flex:0 0 auto}
.alt-brand strong{color:var(--cyan);font-weight:800}
.alt-badge{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;white-space:nowrap}
.alt-badge b{color:#fff;font-weight:700}
.alt-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:clamp(18px,2.4vh,26px)}
/* THE STRUCK REGULAR PRICE over the Academy figure (owner 2026-09-29: "make the
   crossed $39.99 more visible so people see the discount"): readable at a glance,
   a red strike, then the saving as a green badge on the same line. */
.alt-was{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:clamp(16px,2.2vh,24px);line-height:1}
.alt-was s{font-family:var(--body);font-weight:800;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.02em;color:#c3cddd;
  text-decoration:line-through;text-decoration-color:#ef4444;text-decoration-thickness:2.5px}
.alt-was em{font-style:normal;font-weight:800;font-size:clamp(11.5px,.95vw,13px);letter-spacing:.01em;color:#03210e;
  background:#22c55e;padding:5px 9px;border-radius:6px;white-space:nowrap}
.alt-was + .alt-price{margin-top:8px}
.alt-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.alt-price b{font-family:var(--body);font-weight:900;line-height:1;letter-spacing:-.045em;color:var(--ink)}
/* SIZE AND COLOUR CARRY THE COMPARISON NOW, not just the numbers themselves - see
   the dated note above. `.alt-plans` is in both selectors on purpose: it is what
   gives these two rules a higher specificity than any page's own retune of
   `.alt-price b` (`.tbx …`, `.apo-col …`), so this differentiation cannot be
   silently flattened by whichever `<style>` block a hosting page loads second. */
.alt-plans .alt-card--old .alt-price b{font-size:clamp(28px,2.6vw,38px);color:var(--lead)}
.alt-plans .alt-card--new .alt-price b{font-size:clamp(44px,5vw,64px);color:var(--ink)}
.alt-price i{font-style:normal;font-weight:400;font-size:clamp(24px,2.4vw,32px);color:var(--faint);letter-spacing:-.03em}
.alt-price s{text-decoration:none;font-family:var(--disp);font-weight:700;font-size:clamp(11px,.9vw,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.5}
.alt-card--new .alt-price s{color:var(--lead)}
/* THE OPTIONAL BUTTON IN THE PRICE ROW (`card_cta`, owner 2026-09-18) AND THE KICKER
   THAT STANDS IN FOR IT (`alt-kicker`, owner 2026-09-19) share one right-hand slot,
   never both at once - see the dated note above for why. Both sit in the empty half
   of the row rather than under the tiles, so the price and the way to act on it (or
   the promise attached to it) read as one line.
   margin-left:auto is what pushes either one to the right edge of a flex row whose
   other items are sized by their content. align-self:center because the row is
   baseline-aligned for the price and its suffix, and either element on that
   baseline would otherwise hang below everything. */
.alt-price .alt-cta{margin-left:auto;align-self:center}
.alt-price .alt-cta .gf-cta{display:flex;justify-content:flex-end}
.alt-price .alt-kicker{margin-left:auto;align-self:center;white-space:nowrap;
  font-family:var(--disp);font-weight:700;font-size:clamp(10px,.85vw,12px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--lead);
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);
  text-underline-offset:6px}
@media (max-width:760px){
  /* Stacked, either one goes full width under the price rather than squeezing
     beside it. */
  .alt-price .alt-cta{margin-left:0;width:100%}
  .alt-price .alt-cta .gf-cta{justify-content:flex-start}
  .alt-price .alt-kicker{margin-left:0;width:100%;text-align:left}
}
/* The cadence line is tracked caps, and the house wording is "incl. VAT" in exactly
   that case — the one place on the site it has to escape a text-transform. */
.alt-price .lof-vat-note{text-transform:none;letter-spacing:.04em}
/* THE COMPARISON, STATED ONCE (owner 2026-09-19). Full width, under the price row,
   membership card only - it is the sentence the reader used to have to work out
   for themselves from two numbers of near-equal weight. Cyan rather than white: it
   is a claim, not a label, and the accent is what the brand uses to mean
   "this is the one we want you to notice" elsewhere on the site. */
.alt-compare{margin-top:8px;font-size:clamp(14px,1.05vw,15.5px);font-weight:600;
  line-height:1.5;color:var(--cyan)}

/* old plan: three ticks, then the punchline in its own slot at the foot */
.alt-list{list-style:none;display:flex;flex-direction:column;gap:clamp(11px,1.4vh,15px);margin-top:clamp(20px,2.6vh,28px);padding-top:clamp(20px,2.6vh,28px);border-top:1px solid var(--line)}
.alt-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:13px;align-items:center;font-size:clamp(14.5px,1.1vw,16.5px);color:var(--lead)}
.alt-list svg{width:22px;height:22px;color:var(--faint)}
.alt-note{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;margin-top:clamp(22px,3vh,30px);padding-top:clamp(20px,2.6vh,26px);border-top:1px solid var(--line);font-size:clamp(14px,1.05vw,16px);line-height:1.55;color:var(--muted)}
.alt-note svg{width:24px;height:24px;color:var(--faint);margin-top:1px}
.alt-note b{display:block;color:var(--lead);font-weight:600}

/* new plan: eight feature tiles, two columns */
.alt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(9px,1vw,13px);margin-top:clamp(20px,2.6vh,28px)}
.alt-f{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(11px,1.1vw,15px);align-items:center;border:1px solid var(--line);border-radius:11px;background:rgba(var(--cy),.045);padding:clamp(12px,1.15vw,16px)}
.alt-f svg{width:clamp(22px,1.9vw,26px);height:clamp(22px,1.9vw,26px);color:var(--cyan)}
.alt-f b{display:block;font-weight:600;font-size:clamp(14px,1.08vw,16px);letter-spacing:-.01em;color:#fff}
.alt-f span{display:block;margin-top:3px;font-size:clamp(12.5px,.95vw,14px);line-height:1.4;color:var(--muted)}
/* The three linked titles are indistinguishable from the other five at rest and
   underline on hover. Both hosts strip link colour page-wide (`:where(.ftr-page) a`
   on /features/), so the inherit is stated here rather than relied on. */
.alt-f a{color:inherit;text-decoration:none}
.alt-f a:hover{color:#fff;text-decoration:underline;text-decoration-color:rgba(var(--cy),.7);text-underline-offset:3px}

@media (max-width:1000px){
.alt-plans{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
.alt-grid{grid-template-columns:minmax(0,1fr)}
}