/* ==========================================================================
   JVLN Performance: design system (blueprint B1–B7)
   ========================================================================== */
:root{
  --navy:#0D1B2A;
  --orange:#F47C20;
  /* brand orange loses definition on navy; this tint keeps the hue and
     restores the contrast. Used only for text on dark surfaces. */
  --orange-lift:#FF9A4D;
  --warm:#F7F5F0;
  --white:#FFFFFF;
  --muted:#475569;
  --border:#D9DEE5;
  /* the outer edge of a card. Heavier than --border, which stays for the
     dividers and information boxes inside one. */
  --card-line:#A5B0BD;
  --card-shadow:0 4px 14px rgba(13,27,42,.05);
  --navy-soft:#122436;
  --on-dark:#E7EDF3;
  --on-dark-muted:#9DB2C4;
  --maxw:1200px;
  --gutter:32px;
  --radius-btn:8px;
  --radius-card:12px;
  --display:'Tomorrow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--warm);color:var(--navy);
  font-family:var(--body);font-size:18px;line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
main a:not(.btn):not(.card-link){text-decoration:underline;text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(34px,4.6vw,54px)}
h3{font-size:clamp(20px,2.2vw,26px)}
p{margin:0 0 1.1em}
.accent{color:var(--orange)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
@media(max-width:900px){:root{--gutter:24px}}
@media(max-width:600px){:root{--gutter:20px}body{font-size:17px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- sections ---------- */
section{padding:84px 0}
@media(max-width:768px){section{padding:48px 0}}
.sec-warm{background:var(--warm)}
.sec-white{background:var(--white)}
.sec-navy{background:var(--navy);color:var(--on-dark)}
.sec-navy h1,.sec-navy h2,.sec-navy h3{color:var(--white)}
.sec-navy p,.sec-navy li{color:var(--on-dark-muted)}
/* ---------- the section heading system ----------
   One treatment, used by every major section: label, headline, description.

   The label is set in the BODY sans, not the display face. The display face is
   angular and tightly drawn; at label size, in caps, with tracking, its letters
   crowd each other and the word stops being quickly readable. Inter at 700
   reads instantly at 18px, which is what a section label has to do.

   The label is navy on light and white on navy, not orange. Orange stays as a
   short accent rule beside it: the colour marks the section without having to
   carry the legibility, and navy on warm white is a far stronger contrast than
   orange ever was. No pill, no box, no banner. */
.eyebrow{
  font-family:var(--body);font-size:18px;font-weight:700;letter-spacing:.06em;
  line-height:1.3;text-transform:uppercase;color:var(--navy);
  margin:0 0 .75rem;                       /* 12px to the headline */
  display:flex;align-items:center;gap:.7rem;   /* 11px accent to label */
}
.eyebrow::before{
  content:'';flex:0 0 auto;width:28px;height:3px;border-radius:99px;
  background:var(--orange);
}
.sec-navy .eyebrow,.hero .eyebrow,.prompt .eyebrow{color:var(--white)}
.sec-navy .eyebrow::before,.hero .eyebrow::before,.prompt .eyebrow::before{background:var(--orange)}
/* On desktop the accent hangs into the margin so the label text lines up with
   the headline below it. On narrow screens it stays inside, where there is no
   margin to hang into and doing so would push the row off the screen. */
@media(min-width:900px){
  .eyebrow{margin-left:-2.375rem}          /* 28px rule + 11px gap */
}
@media(max-width:899px){
  .eyebrow{font-size:16px;margin-left:0}
  .eyebrow::before{width:24px}
}

/* headline and description, the other two steps of the same pattern */
h2{font-size:clamp(28px,3.2vw,40px);line-height:1.16}
.lede{font-size:19px;line-height:1.5;color:var(--muted);max-width:66ch;margin:0 0 1.15rem}
@media(max-width:899px){.lede{font-size:17px}}
h2 + .lede,h1 + .lede{margin-top:1.1rem}   /* 18px headline to description */
.sec-warm > .wrap > .lede:last-of-type,
.sec-white > .wrap > .lede:last-of-type,
.sec-navy > .wrap > .lede:last-of-type{margin-bottom:2rem}
.sec-navy .lede{color:var(--on-dark-muted)}
@media(max-width:600px){.lede{font-size:17px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;padding:0 1.6rem;border-radius:var(--radius-btn);
  font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none!important;cursor:pointer;border:2px solid transparent;
  transition:background .18s,color .18s,border-color .18s,transform .08s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);color:var(--navy);border-color:var(--orange)}
.btn-primary:hover{background:#dd6d16;border-color:#dd6d16}
.btn-secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
/* the purchase pair's second button: navy outline on the card's own background */
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white)}
/* the purchase pair also appears on navy panels, where a navy outline would be
   invisible against its own background */
.sec-navy .btn-outline,.hero .btn-outline,.prompt .btn-outline{
  color:var(--white);border-color:rgba(255,255,255,.65)}
.sec-navy .btn-outline:hover,.hero .btn-outline:hover,.prompt .btn-outline:hover{
  background:var(--white);color:var(--navy)}
.btn-secondary:hover{background:var(--navy);color:var(--white)}
.sec-navy .btn-secondary{color:var(--white);border-color:rgba(255,255,255,.6)}
.sec-navy .btn-secondary:hover{background:var(--white);color:var(--navy)}
/* A button with no payment link behind it. It used to be the live button at
   55% opacity, which on warm white made a pale peach with grey lettering
   and on navy made a muddy brown. It is a deliberate unavailable state
   now: a quiet surface, a real border, and text that still meets AA
   (owner screenshots, 6 Oct 2026). */
.btn[aria-disabled="true"],.btn:disabled{
  cursor:not-allowed;background:#EDEFF2;border-color:var(--card-line);
  color:var(--muted);box-shadow:none}
.sec-navy .btn[aria-disabled="true"],.sec-navy .btn:disabled{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3);
  color:#C7D4DF}
.btn.is-loading{opacity:.7;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}

/* ---------- announcement ---------- */
.annc{background:var(--orange);color:var(--navy);text-align:center;padding:.85rem var(--gutter)}
.annc p{margin:0;font-size:16.5px;font-weight:600}
.annc a{color:var(--navy);text-decoration:underline;font-weight:700}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:900;background:var(--white);border-bottom:1px solid var(--border)}
.hdr{display:flex;align-items:center;gap:1rem;max-width:1500px;margin:0 auto;padding:1.15rem var(--gutter)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none!important;flex:0 0 auto}
.brand img{height:58px;width:auto}
/* the lockup reads JVLN Performance. The wordmark asset is only the JVLN
   part, so the second word is set in type beside it, at a size and tracking
   that let it sit as part of the mark rather than as a caption. It used to be
   hidden below 1560px because the old navigation needed the room; the shorter
   labels have given it back. */
.brand-txt{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--navy);line-height:1;padding-top:5px;white-space:nowrap}
@media(max-width:1400px){.brand-txt{font-size:14.5px;letter-spacing:.14em}}
/* on a phone the lockup stays whole, just smaller: the burger is the only
   other thing on the row, so there is room for the second word */
@media(max-width:480px){.brand{gap:.5rem}.brand-txt{font-size:11.5px;letter-spacing:.1em;padding-top:3px}
  .brand img{height:42px}}
@media(max-width:340px){.brand-txt{display:none}}
.nav{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nav>li{list-style:none}
.nav{margin:0;padding:0}
.nav-link,.nav-toggle{
  display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);padding:.7rem .7rem;border-radius:6px;text-decoration:none!important;
  white-space:nowrap;
}
.nav-link:hover,.nav-toggle:hover{background:rgba(13,27,42,.06)}
.nav-toggle[aria-expanded="true"]{background:rgba(13,27,42,.08)}
.caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .18s}
.nav-toggle[aria-expanded="true"] .caret{transform:rotate(-135deg);margin-top:2px}
.nav-item{position:relative}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:302px;background:var(--navy);
  border-radius:var(--radius-card);padding:.6rem;box-shadow:0 12px 30px rgba(13,27,42,.22);
}
.dropdown[hidden]{display:none}
/* The assessment section is hidden until the hero button opens it. While it is
   out, the hero sits directly against the section below it, and two sets of
   section padding in a row with no change of background reads as a hole. */
section[hidden]{display:none}
#start[hidden] + section{padding-top:56px}
.dd-head{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted);padding:.5rem .75rem .35rem}
.dropdown a{
  display:block;padding:.7rem .8rem;border-radius:6px;color:var(--white);
  font-size:16.5px;text-decoration:none!important;
}
.dropdown a:hover{background:rgba(255,255,255,.1);color:var(--orange)}
.hdr-cta{margin-left:.4rem;font-size:15px;padding-left:1.1rem;padding-right:1.1rem;white-space:nowrap}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--navy);border-radius:var(--radius-btn);width:52px;height:52px;align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:26px;height:26px;stroke:var(--navy);stroke-width:2.2;fill:none;stroke-linecap:round}
.mnav{display:none;border-top:1px solid var(--border);background:var(--white);padding:.5rem var(--gutter) 1.25rem}
.mnav[hidden]{display:none!important}
.mnav a,.mnav .m-toggle{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy);padding:1.05rem .25rem;border-bottom:1px solid var(--border);text-decoration:none!important;
}
.mnav .m-sub{padding-left:1rem;border-left:3px solid var(--orange);margin:0 0 .5rem}
.mnav .m-sub a{font-size:15.5px;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:500}
.mnav .btn{width:100%;margin-top:1rem}
@media(max-width:1320px){
  .nav,.hdr-cta{display:none}
  .burger{display:inline-flex}
  body.menu-open .mnav{display:block}
}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:var(--on-dark);padding:0}
.hero-grid{display:grid;grid-template-columns:55% 45%;align-items:center;max-width:var(--maxw);margin:0 auto}
.hero-copy{padding:72px var(--gutter) 72px 0;padding-left:var(--gutter)}
.hero h1{color:var(--white);max-width:16ch}

.hero p{color:var(--on-dark-muted);max-width:52ch;font-size:19px;line-height:1.65}
.hero-aud{font-size:15px!important;color:var(--on-dark-muted);margin-top:1.4rem!important;border-top:1px solid rgba(255,255,255,.15);padding-top:1.2rem}
.hero-img{height:100%;min-height:460px}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:40px var(--gutter)}
  .hero-img{min-height:280px;order:2}
}

/* ---------- credibility ---------- */
.cred{background:var(--navy-soft);padding:20px 0;border-top:1px solid rgba(255,255,255,.08)}
.cred ul{display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.cred li{font-family:var(--display);font-size:15px;color:var(--white);font-weight:600}
.cred span{color:var(--orange);font-weight:400}
@media(max-width:600px){.cred ul{flex-direction:column;gap:.4rem;align-items:center;text-align:center}.cred li{font-size:14px}}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1.5rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.card{
  background:var(--white);border:2px solid var(--card-line);border-radius:var(--radius-card);
  box-shadow:var(--card-shadow);
  padding:2rem 1.75rem;display:flex;flex-direction:column;
}
.card h3{margin-bottom:.35rem}
.card .price{font-family:var(--display);font-size:30px;font-weight:700;color:var(--orange);margin:0 0 .25rem}
.card .price small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.card .fit{font-size:16.5px;color:var(--muted);margin-bottom:1rem}
.card ul{margin:0 0 1.5rem;padding:0;list-style:none}
.card li{position:relative;padding-left:1.4rem;margin-bottom:.6rem;font-size:16px;line-height:1.55;color:var(--muted)}
.card li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--orange);border-radius:2px}
.card .btn{margin-top:auto;align-self:flex-start}
.badge{
  display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--navy);color:var(--white);padding:.3rem .55rem;border-radius:5px;margin-bottom:.7rem;
}
.note-line{margin-top:1.6rem;font-size:16px;color:var(--muted)}
.sec-navy .note-line{color:var(--on-dark-muted)}

/* ---------- media / placeholder ---------- */
.media{border-radius:var(--radius-card);overflow:hidden;background:var(--navy)}
.media img{width:100%;height:auto}
.placeholder{
  border:2px dashed var(--orange);background:rgba(244,124,32,.07);border-radius:var(--radius-card);
  padding:1.8rem 1.4rem 1.4rem;position:relative;font-size:16px;line-height:1.6;color:var(--navy);
}
.placeholder::before{
  content:'Placeholder: needs your content';position:absolute;top:-11px;left:16px;
  background:var(--orange);color:var(--navy);font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.22rem .55rem;border-radius:4px;
}
.sec-navy .placeholder{color:var(--on-dark);background:rgba(244,124,32,.12)}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
@media(max-width:900px){.steps{grid-template-columns:1fr;gap:1.25rem}}
.steps li{display:flex;gap:1rem}
.step-n{font-family:var(--display);font-size:30px;font-weight:700;color:rgba(244,124,32,.45);line-height:1}
.sec-navy .step-n{color:rgba(244,124,32,.75)}
.steps h3{font-size:19px;margin-bottom:.35rem}
.steps p{font-size:16px;color:var(--muted);margin:0}
.sec-navy .steps p{color:var(--on-dark-muted)}

/* ---------- comparison table ---------- */
/* ---------- the comparison table ----------
   White surface, navy text, horizontal rules only. Row labels read left,
   values sit centred under their package, and every package column is the
   same width so nothing looks favoured by its geometry. */
.cmp{width:100%;border-collapse:collapse;background:var(--white);
     font-family:var(--body);font-size:16px;color:var(--navy);
     border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden}
.cmp th,.cmp td{padding:.85rem 1rem;border-bottom:1px solid var(--border);vertical-align:middle}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{background:var(--white);color:var(--navy);text-align:center;
  font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:2px solid var(--navy);padding-top:1.1rem}
.cmp thead th:first-child{width:30%}
.cmp thead th:not(:first-child){width:17.5%}
.cmp tbody th{text-align:left;font-weight:600;color:var(--navy);font-size:15.5px}
.cmp td{text-align:center;color:var(--navy)}
.cmp td[data-kind="price"]{font-family:var(--display);font-size:20px;font-weight:700;
  color:var(--orange-ink)}
/* a quiet tint on Complete, the most comprehensive column */
.cmp .col-top{background:#FFF8F1}
.cmp thead th.col-top{border-bottom-color:var(--orange)}
main .cmp thead th a,.cmp thead th a{color:var(--navy);text-decoration:none}
main .cmp thead th a:hover,.cmp thead th a:hover{color:var(--orange-ink);
  text-decoration:underline;text-underline-offset:3px}
.mk{display:inline-block;line-height:1}
.mk.ok{color:var(--orange-ink);font-size:20px;font-weight:700}
.mk.no{color:var(--muted);font-size:18px}
.cmp-note{font-size:14px;line-height:1.55;color:var(--muted);margin:.6rem 0 0;max-width:70ch}
.cmp-note:first-of-type{margin-top:1.1rem}

/* the JVLN mark as a small accent beside a heading, once per section */
.h-mark{display:flex;align-items:center;gap:.7rem}
.h-mark .mark{width:auto;height:1.05em;flex:0 0 auto;opacity:.9}
.sec-navy .h-mark .mark{filter:brightness(0) invert(1)}

/* ---------- comparing two packages on a phone ----------
   Five columns do not fit, and a side-scrolling table hides the prices and
   the buttons behind a swipe. Two selects keep all four reachable. */
.cmp2{display:none}
.cmp2-picks{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:0 0 1.1rem}
.cmp2-picks .field{margin:0}
.cmp2-table{table-layout:fixed}
.cmp2-table th,.cmp2-table td{padding:.7rem .45rem}
.cmp2-table thead th{font-size:12px;letter-spacing:.04em}
.cmp2-table thead th:first-child{width:42%}
.cmp2-table thead th:not(:first-child){width:29%}
.cmp2-table tbody th{font-size:14.5px;line-height:1.3}
.cmp2-table td{font-size:15px;line-height:1.35}
.cmp2-table td[data-kind="price"],.cmp2-table td.is-price{font-family:var(--display);
  font-size:19px;font-weight:700;color:var(--orange-ink)}
.cmp2-act{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.3rem}
.cmp2-buy{display:flex;flex-direction:column;gap:.7rem}
.cmp2-buy-h{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);margin:0}
.cmp2-act .btn{width:100%;padding-left:.5rem;padding-right:.5rem;font-size:12px;line-height:1.35;
  min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
@media(max-width:860px){#compare .cmp-wrap{display:none}.cmp2{display:block}}
@media(max-width:520px){.cmp2-picks{grid-template-columns:1fr}
  .cmp2-act{grid-template-columns:1fr;gap:1.4rem}}

/* ---------- compact package cards on the comparison page ---------- */
.pkgmini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
@media(max-width:1080px){.pkgmini-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pkgmini-grid{grid-template-columns:1fr}}
.pkgmini{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:2px solid var(--card-line);border-radius:var(--radius-card);
  box-shadow:var(--card-shadow);padding:24px}
@media(max-width:620px){.pkgmini{padding:20px}}
.pkgmini.is-top{border-color:var(--orange);background:#FFF8F1}
.pkgmini h2,.pkgmini h3{font-family:var(--display);font-weight:700;font-size:23px;
  line-height:1.15;letter-spacing:-.005em;margin:0 0 .3rem}
/* Two of the four names and two of the four benefit lines need a second line
   at this column width. Reserving it on all four keeps the names, the prices
   and the rule beneath them level across the row. */
.pkgmini h2{min-height:2.3em}
/* one short benefit line, not a paragraph, so it needs no reserved height */
.mini-fit{font-family:var(--body);font-weight:400;font-size:16px;line-height:1.4;
  color:var(--muted);margin:0 0 .9rem;min-height:2.8em}
@media(max-width:620px){.pkgmini h2,.mini-fit{min-height:0}}
/* a pill on the card's own top edge, out of the flow, so the four cards'
   names and prices stay level without an invisible twin on the other three */
.mini-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy);background:var(--orange);
  border-radius:99px;padding:.3rem .75rem;margin:0;line-height:1.2;white-space:nowrap}

/* The price is the one figure on the card that has to land at a glance, so it
   is set in the body face: the display face at this size closes up and reads
   as a logo rather than a number (owner brief, 1 Oct 2026). */
.mini-price{font-family:var(--body);margin:0;line-height:1;display:flex;
  align-items:baseline;gap:.25rem}
.mini-price b{font-size:40px;font-weight:600;letter-spacing:-.02em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.mini-price span{font-size:15.5px;font-weight:600;color:var(--muted)}
@media(max-width:620px){.mini-price b{font-size:38px}}

/* what one month costs, and what subscribing saves against it, each labelled */
.mini-alt{display:flex;flex-direction:column;gap:.15rem;font-size:14px;line-height:1.45;
  color:var(--muted);margin:.6rem 0 1rem}
/* the rule between the pricing and the inclusions belongs to the compact card,
   where a list follows immediately; elsewhere the price block ends in buttons */
.pkgmini .mini-alt{margin-bottom:0;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.pkgmini.is-top .mini-alt{border-bottom-color:#E9D4BE}
.mini-alt .pa-one{color:var(--navy);font-weight:600}
.sec-navy .mini-alt .pa-one{color:var(--white)}

.mini-pts{list-style:none;margin:1rem 0 1.3rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
.mini-pts li{position:relative;padding-left:1.5rem;font-size:16px;line-height:1.5;color:var(--navy)}
.mini-pts li::before{content:'';position:absolute;left:.15rem;top:.36em;width:7px;height:12px;
  border-right:2.2px solid var(--orange-ink);border-bottom:2.2px solid var(--orange-ink);
  transform:rotate(40deg)}
.mini-act{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:.6rem}
.mini-act .btn{width:100%;padding-left:.7rem;padding-right:.7rem;font-size:12.5px}
/* material billing terms sit with the button, not three sections away */
.mini-terms{font-size:12.5px;line-height:1.45;color:var(--muted);margin:0 0 .15rem;text-align:center}
.mini-more{text-align:center;font-size:13.5px;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px}
.mini-more:hover{color:var(--orange-ink)}

/* ---------- terms ---------- */
.terms{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.8rem}
.terms p{font-size:16px;color:var(--muted)}
.terms p:last-child{margin-bottom:0}
.sec-navy .terms{background:var(--navy-soft);border-color:rgba(255,255,255,.14)}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--border);padding:.2rem 0}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;position:relative;
  font-family:var(--display);font-size:18px;font-weight:700;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:.4rem;top:1.5rem;width:9px;height:9px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.8rem}
.faq p{font-size:16.5px;color:var(--muted);padding-right:2rem}

/* ---------- forms ---------- */
.form{max-width:640px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.f-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field .opt{font-weight:500;text-transform:none;letter-spacing:0;opacity:.75}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:16px;padding:.85rem .9rem;border:1px solid var(--border);
  border-radius:var(--radius-btn);background:var(--white);color:var(--navy);width:100%;
}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:14px;color:var(--muted)}
.field.err input,.field.err select,.field.err textarea{border-color:#C0392B;border-width:2px}
.field .err-msg{font-size:14px;color:#C0392B;display:none}
.field.err .err-msg{display:block}
.check{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:1.1rem;font-size:15.5px;color:var(--muted)}
.check input{width:20px;height:20px;margin-top:.15rem;flex:0 0 auto}
.form-note{font-size:15px;color:var(--muted);margin-top:.9rem}
.form-msg{display:none;margin-top:1.1rem;padding:1rem 1.1rem;border-radius:var(--radius-btn);font-size:16px;line-height:1.55}
.form-msg.ok{display:block;background:#E7F4EC;border-left:4px solid #1E7B45;color:#14532D}
.form-msg.bad{display:block;background:#FDEBEA;border-left:4px solid #C0392B;color:#7F1D1D}
.err-summary{display:none;margin-bottom:1.1rem;padding:1rem;border-left:4px solid #C0392B;background:#FDEBEA;border-radius:var(--radius-btn)}
.err-summary.show{display:block}
.err-summary ul{margin:.4rem 0 0;padding-left:1.2rem;font-size:15px}

/* ---------- unavailable checkout ---------- */
.unavail{border:1px solid var(--border);background:#FFF6EC;border-left:4px solid var(--orange);border-radius:var(--radius-btn);padding:1rem 1.1rem;font-size:15.5px;color:var(--muted);margin-top:.9rem}
.unavail strong{color:var(--navy)}

/* ---------- corner prompt ---------- */
.prompt{
  position:fixed;right:24px;bottom:24px;z-index:800;width:320px;max-width:calc(100vw - 32px);
  background:var(--navy);color:var(--on-dark);border-radius:var(--radius-card);padding:1.3rem;
  box-shadow:0 18px 40px rgba(13,27,42,.3);transform:translateY(14px);opacity:0;transition:opacity .25s,transform .25s;
}
.prompt.in{opacity:1;transform:none}
.prompt h3{color:var(--white);font-size:18px;margin-bottom:.4rem}
.prompt-tag{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);margin-bottom:.35rem}
.prompt p{font-size:15px;color:var(--on-dark-muted);margin-bottom:1rem}
.prompt .btn{width:100%}
.prompt .dismiss{display:block;width:100%;margin-top:.5rem;background:none;border:0;cursor:pointer;color:var(--on-dark-muted);font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:.6rem}
.prompt .dismiss:hover{color:var(--white)}
@media(max-width:600px){.prompt{left:12px;right:12px;bottom:12px;width:auto}}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:var(--on-dark-muted);padding:56px 0 32px;font-size:15.5px}
.site-footer a{color:var(--on-dark-muted);text-decoration:none}
.site-footer a:hover{color:var(--orange);text-decoration:underline}
.f-grid2{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
@media(max-width:820px){.f-grid2{grid-template-columns:1fr;gap:1.75rem}}
.site-footer h4{font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.9rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.55rem}
.f-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.5rem;font-size:14px}

/* ---------- misc ---------- */
.breadcrumb{font-size:14px;color:var(--muted);padding:1.2rem 0 0}
.breadcrumb a{color:var(--muted)}
.page-head{padding:56px 0 8px}
.anchor-target{scroll-margin-top:130px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.stack-sm>*+*{margin-top:1rem}
.price-line{font-family:var(--display);font-size:clamp(28px,3.4vw,40px);font-weight:700;color:var(--orange);margin:0 0 .2rem}
.price-sub{font-size:16px;color:var(--muted);margin-bottom:1.4rem}
.sec-navy .price-sub{color:var(--on-dark-muted)}
.incl{margin:0 0 1.4rem;padding:0;list-style:none}
.incl li{position:relative;padding-left:1.7rem;margin-bottom:.65rem;font-size:16.5px;line-height:1.6;color:var(--muted)}
.incl li::before{content:'';position:absolute;left:0;top:.42em;width:9px;height:14px;border-right:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(40deg)}
.sec-navy .incl li{color:var(--on-dark-muted)}

/* ---------- assessment ---------- */
.q-progress{margin-bottom:1.5rem}
.q-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.q-bar span{display:block;height:100%;background:var(--orange);transition:width .3s}
.q-count{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:.6rem 0 0}
.q-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:2.25rem}
@media(max-width:600px){.q-card{padding:1.4rem}}
.q-set{border:0;padding:0;margin:0}
.q-label{font-family:var(--display);font-size:clamp(21px,2.6vw,27px);font-weight:700;line-height:1.2;color:var(--navy);padding:0;margin:0 0 .5rem;display:block}
.q-set .hint,.q-card>.hint{font-size:16px;color:var(--muted);margin:0 0 1.25rem;display:block}
.q-opts{display:flex;flex-direction:column;gap:.6rem;margin-top:1.25rem}
.q-opt{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--warm);cursor:pointer;font-size:16.5px;line-height:1.45;min-height:56px}
.q-opt:hover{border-color:var(--orange)}
.q-opt input{width:20px;height:20px;margin-top:.1rem;flex:0 0 auto;accent-color:var(--orange)}
.q-opt:has(input:checked){border-color:var(--orange);background:#FFF3E8}
.q-set input[type=text],.q-card textarea,.q-set textarea{font-family:var(--body);font-size:16px;padding:.85rem .9rem;border:1px solid var(--border);border-radius:var(--radius-btn);width:100%;margin-top:.5rem}
.q-card textarea{min-height:110px}
.q-set.err .q-opt,.q-set.err input,.q-set.err textarea{border-color:#C0392B}
.q-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.q-nav .btn{flex:0 1 auto}
@media(max-width:480px){.q-nav{flex-direction:column-reverse}.q-nav .btn{width:100%}}
.result h3{font-size:19px;margin:1.9rem 0 .4rem}
.result p{font-size:16.5px;color:var(--muted)}
.bars{margin:1.25rem 0 .5rem}
.bar{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:.8rem;margin-bottom:.55rem;font-size:14.5px}
.bar-l{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.bar-t{height:10px;background:var(--border);border-radius:5px;overflow:hidden}
.bar-t i{display:block;height:100%;background:var(--orange)}
.bar-n{font-family:var(--display);font-weight:700;color:var(--muted);text-align:right}
@media(max-width:520px){.bar{grid-template-columns:96px 1fr 40px;gap:.5rem}.bar-l{font-size:11px}}
.rec{margin-top:2rem;padding:1.6rem;background:var(--navy);border-radius:var(--radius-card)}
.rec h3{color:var(--white);margin-top:0}
.rec p{color:var(--on-dark-muted)}
.rec-name{font-family:var(--display);font-size:20px;font-weight:700;color:var(--white)!important}
.rec-name span{color:var(--orange)}

/* ---------- narrow-screen safety ---------- */
.btn{max-width:100%;overflow-wrap:anywhere}
.note-line a,.terms a,.lede a{overflow-wrap:anywhere}
@media(max-width:400px){.btn{font-size:13px;padding:0 1.1rem}}

/* ---------- offer cards with a photo band (matches the previous packages) ---------- */
.card.has-media{padding:0;overflow:hidden}
.card-media{position:relative;aspect-ratio:16/9;background:var(--navy);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card.has-media:hover .card-media img{transform:scale(1.04)}
.card-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(13,27,42,.12) 0%,rgba(13,27,42,0) 45%,rgba(13,27,42,.28) 100%);
}
.card-media .badge{
  position:absolute;top:.75rem;right:.75rem;z-index:2;margin:0;
  background:var(--orange);color:var(--navy);
}
.card-body{padding:1.7rem 1.75rem 1.9rem;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:.3rem}
@supports not (aspect-ratio:16/9){.card-media{height:210px}}
@media(max-width:1000px){.card-media{aspect-ratio:21/9}}
@media(max-width:600px){.card-media{aspect-ratio:16/9}.card-body{padding:1.4rem 1.3rem 1.6rem}}

/* ---------- colour containment ----------
   A card or a light panel keeps its own text colours even when it sits inside
   a navy section, and a link on navy is never navy. Without these, the
   section rules leak in and produce white-on-white or navy-on-navy. */
.sec-navy a:not(.btn):not(.dropdown a){color:var(--orange)}
.sec-navy a:not(.btn):hover{color:#FFB877}
.sec-navy .card,
.sec-navy .terms,
.sec-navy .cmp{color:var(--navy)}
.sec-navy .card h1,.sec-navy .card h2,.sec-navy .card h3,.sec-navy .card h4{color:var(--navy)}
.sec-navy .card p,.sec-navy .card li{color:var(--muted)}
.sec-navy .card .price{color:var(--orange)}
.sec-navy .card a:not(.btn){color:var(--navy)}
.sec-navy .card .badge{background:var(--navy);color:var(--white)}
.sec-navy .card-media .badge{background:var(--orange);color:var(--navy)}

/* ---------- accessible orange for TEXT on light surfaces ----------
   #F47C20 is the brand fill and is correct behind navy text (6.42:1), but as
   text on warm white it is only 2.49:1: below the 4.5:1 target in B7.
   #B65409 is the same hue darkened until it passes (4.52:1 on warm white,
   4.93:1 on white). Fills, borders and bullets keep the brand orange. */
:root{--orange-ink:#B65409}
.card .price,.price-line,.accent{color:var(--orange-ink)}
.incl li::before{border-color:var(--orange-ink)}
main a:not(.btn):not(.card-link){color:#0A4C7A}
.terms a,.note-line a,.lede a,.faq a,.form-note a{color:#0A4C7A}

/* ---------- every dark surface, not just .sec-navy ----------
   .hero and .prompt are navy too; without this a secondary button renders
   navy-on-navy and disappears. */
.hero .btn-secondary,
.prompt .btn-secondary,
.site-footer .btn-secondary{background:transparent;color:var(--white);border-color:rgba(255,255,255,.6)}
.hero .btn-secondary:hover,
.prompt .btn-secondary:hover,
.site-footer .btn-secondary:hover{background:var(--white);color:var(--navy)}
.hero a:not(.btn),.prompt a:not(.btn){color:var(--orange)}

.sec-navy .price-line,.sec-navy .accent{color:var(--orange)}

/* comparison table: navy header cells need white link text */


/* a white card keeps the accessible ink orange even inside a navy section */
.sec-navy .card .price{color:var(--orange-ink)}
/* table head links sit on navy and must beat the generic main link colour */


/* ==========================================================================
   Packages: buy selector, selectable cards, inclusions, athlete-story marquee
   ========================================================================== */

/* ---------- price line with the struck base price ---------- */
.card .price s{color:var(--muted);font-size:.62em;font-weight:600;margin-right:.25rem;text-decoration-thickness:2px}
.price-alt{font-size:14px;color:var(--muted);margin:-.35rem 0 1rem;letter-spacing:.01em}
.sec-navy .card .price-alt{color:var(--muted)}

/* ---------- subscribe / buy once ---------- */
.buy{display:flex;flex-direction:column;gap:.7rem;margin:0 0 1.4rem}
.buy-opt{display:block;position:relative;border:2px solid var(--border);border-radius:var(--radius-card);
         padding:1rem 1.1rem;cursor:pointer;background:var(--white);transition:border-color .16s,background .16s}
.sec-white .buy-opt{background:var(--warm)}
.buy-opt:hover{border-color:var(--orange)}
.buy-opt input{position:absolute;opacity:0;width:0;height:0}
.buy-main{display:block;position:relative;padding-left:2rem}
.buy-main::before{content:'';position:absolute;left:0;top:.15rem;width:20px;height:20px;
                  border:2px solid var(--muted);border-radius:50%;background:var(--white)}
.buy-opt:has(input:checked){border-color:var(--orange);background:#FFF6EC}
.buy-opt:has(input:checked) .buy-main::before{border-color:var(--orange);
  box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 12px var(--orange)}
.buy-opt:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:2px}
.buy-row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.buy-name{font-family:var(--display);font-size:17px;font-weight:700;color:var(--navy);letter-spacing:.01em}
.buy-price{font-family:var(--display);color:var(--navy);white-space:nowrap}
.buy-price s{color:var(--muted);font-weight:600;font-size:15px;margin-right:.3rem;text-decoration-thickness:2px}
.buy-price b{font-size:24px;font-weight:700;color:var(--orange-ink)}
.buy-price small{font-size:13px;color:var(--muted);font-weight:600}
.buy-list{display:flex;flex-direction:column;gap:.3rem;margin:.65rem 0 .1rem}
.buy-list span{position:relative;padding-left:1.5rem;font-size:14.5px;line-height:1.45;color:var(--muted)}
.buy-list span::before{content:'';position:absolute;left:.15rem;top:.34em;width:8px;height:13px;
  border-right:2.4px solid var(--orange-ink);border-bottom:2.4px solid var(--orange-ink);transform:rotate(40deg)}
.buy-note{display:block;margin-top:.5rem;font-size:13.5px;color:var(--muted)}
/* the saving badge on the subscribe option. Stated in dollars, which is
   exact for every package; no percentage banner, no urgency. */
.buy-tag{position:absolute;top:-11px;right:14px;background:var(--orange-ink);color:#fff;
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:5px;line-height:1.25}
@media (max-width:420px){.buy-tag{right:10px;font-size:11px}}

/* ---------- selectable package cards ---------- */
/* These cards really are the control: clicking one changes the What's
   Included panel below, so the pointer is honest rather than decoration. */
.pkg-card{cursor:pointer;transition:border-color .18s,box-shadow .18s}
.pkg-card:hover{border-color:var(--orange)}
.pkg-card:focus-within{border-color:var(--orange)}
.pkg-card[data-selected="true"]{border-color:var(--orange);
  box-shadow:0 0 0 2px rgba(244,124,32,.35),var(--card-shadow)}
/* the Complete package is the featured one on every page it appears, whether
   or not it happens to be the selected card */
.pkg-card[data-pkg="complete"]{border-color:var(--orange);background:#FFF8F1}
.pkg-card .pkg-select{margin-top:auto;align-self:stretch;text-align:center}
.pkg-card .card-more{margin-top:.6rem;align-self:stretch;text-align:center}
.pkg-grid .card-body{padding-bottom:1.6rem}

/* ---------- what's included ---------- */
.inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
@media(max-width:1000px){.inc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.inc-grid{grid-template-columns:1fr}}
.inc-card{background:var(--warm);border:1px solid var(--border);border-radius:var(--radius-card);
          padding:1.5rem 1.4rem;position:relative;transition:opacity .2s,background .2s}
.sec-white .inc-card{background:var(--warm)}
.inc-card h3{font-size:17.5px;margin:0 0 .4rem;padding-right:2rem}
.inc-card p{font-size:15.5px;color:var(--muted);margin:0}
.inc-state{position:absolute;top:1.5rem;right:1.4rem;width:22px;height:22px;border-radius:50%;
           background:var(--orange);display:block}
.inc-state::after{content:'';position:absolute;left:7px;top:4px;width:6px;height:11px;
  border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(40deg)}
.inc-out{display:none;margin-top:.7rem!important;font-family:var(--display);font-size:11px;
         font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.inc-card.out{background:transparent;border-style:dashed}
.inc-card.out h3,.inc-card.out p{opacity:.45}
.inc-card.out .inc-out{display:block;opacity:1}
.inc-card.out .inc-state{background:transparent;border:2px solid var(--border)}
.inc-card.out .inc-state::after{display:none}

/* ---------- athlete-story rotator (owner brief, 3 Oct 2026) ----------
   Was a CSS marquee. A marquee cannot be paused by a button or stepped
   through, so this is a scroller with real controls, driven by js/site.js.
   The track is a native scroller with snap points, so touch and trackpad
   work with no script at all, and the whole quote is always on the card:
   nothing is truncated and nothing is set smaller to make it fit. */
.tmr{padding:.25rem 0 0}
.tmr-view{--tmr-pad:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.5rem var(--tmr-pad) 1.25rem;scroll-padding-left:var(--tmr-pad);
  scrollbar-width:none;-ms-overflow-style:none}
.tmr-view::-webkit-scrollbar{display:none}
.tmr-view:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.tmr-track{display:flex;flex:0 0 auto;gap:1.25rem;list-style:none;margin:0;padding:0}
.tm-card{flex:0 0 330px;scroll-snap-align:start;background:var(--white);
  border:2px solid var(--card-line);box-shadow:var(--card-shadow);
  border-radius:var(--radius-card);padding:1.5rem 1.4rem;display:flex;
  flex-direction:column;justify-content:space-between;gap:1rem;min-height:190px}
.tm-quote{font-size:16.5px;line-height:1.55;color:var(--muted);margin:0}
.tm-quote::before{content:'\201C'}
.tm-quote::after{content:'\201D'}
.tm-who{margin:0;font-size:14px;color:var(--muted);display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:.75rem;align-items:center}
.tm-face{grid-row:1 / span 2;width:52px;height:52px;border-radius:50%;object-fit:cover;
  display:block;background:var(--warm)}
.tm-card:not(.tm-has-face) .tm-who{display:block}
.tm-who b{display:block;font-family:var(--display);font-size:15px;color:var(--navy)}

/* the controls: quiet, navy on white, orange only on the pause state */
.tmr-ctl[hidden]{display:none}
.tmr-ctl{display:flex;align-items:center;gap:.6rem;
  margin:0 auto;max-width:var(--maxw);padding:0 var(--gutter)}
.tmr-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:42px;min-width:42px;padding:0 .7rem;background:var(--white);
  border:2px solid var(--card-line);border-radius:var(--radius-btn);cursor:pointer;
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);
  transition:border-color .18s,background .18s}
.tmr-btn:hover{border-color:var(--orange)}
.tmr-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* Icon only, the same footprint as the arrows. It used to be a wide button
   reading "PAUSE", which is what made the control row read as heavy on a
   phone (owner, 8 Oct 2026). The control itself has to stay: WCAG 2.2.2
   requires a way to stop anything that moves by itself for more than five
   seconds. Its name lives in aria-label now rather than in visible text. */
.tmr-play{padding:0}
/* Two bars while it is running, a triangle once it is paused. */
.tmr-ico{width:11px;height:12px;box-sizing:border-box;
  border-left:3.5px solid var(--navy);border-right:3.5px solid var(--navy)}
.tmr-btn[aria-pressed="true"] .tmr-ico{border:0;background:var(--orange-ink);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.tmr-pos{margin:0 0 0 .3rem;font-size:14px;color:var(--muted)}
.tmr-more{margin:1.1rem 0 0;font-size:15px}
@media(max-width:600px){
  .tm-card{flex-basis:min(82vw,330px)}
  .tmr-view{--tmr-pad:var(--gutter)}
}

/* ---------- published athlete stories, long form (/results) ----------
   A static two-column grid: this page is for reading at your own pace, so
   nothing here moves. Cards grow with their content, because squeezing two
   testimonials to the same height would mean cutting one of them short. */
/* Specific enough to beat the generic "h1 + .lede" and ".sec-h ~ .stories"
   rhythm rules further down, which are set for pages that open with a
   heading, a subheading and then a band of content. */
.res-head{padding-bottom:84px}
.res-head h1.sec-h{margin-bottom:0}
.res-head h1 + .res-lede{max-width:720px;margin:14px 0 0}
/* Owner, 3 Oct 2026: the same space between every card. Cards used to be
   top-aligned, so a short card left a ragged hole under it before the next
   row began and the vertical gaps read as uneven. The cards in a row now
   share a height and the attribution is anchored to the foot of each, which
   leaves a uniform 24px between every box. Nothing is truncated to achieve
   it: the row takes the height of its tallest card, and the shorter one gains
   white space, not a smaller quotation. */
.stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  align-items:stretch}
section.res-head .stories{margin-top:36px}
.story{display:flex;flex-direction:column;background:var(--white);
  border:2px solid var(--card-line);box-shadow:var(--card-shadow);
  border-radius:var(--radius-card);padding:30px}
.story-h{font-size:clamp(20px,2.1vw,23px);line-height:1.2;margin:0 0 1.1rem;color:var(--navy)}
/* The coaches' own account, when a story has one: plain body copy with no
   quotation marks and no quote rule beside it, so it cannot be mistaken for
   something the athlete said. */
.story-intro{margin:0 0 1.2rem;font-size:17px;line-height:1.6;color:var(--muted)}
.story-q{margin:0 0 1.1rem;padding:0 0 0 1rem;border-left:3px solid var(--orange)}
.story-q p{margin:0;font-size:18.5px;line-height:1.62;color:var(--muted)}
.story-q p::before{content:'\201C'}
.story-q p::after{content:'\201D'}
.story-more{margin:0 0 1.1rem}
.story-more summary{cursor:pointer;font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--orange-ink)}
.story-more[open] summary{margin-bottom:1rem}
/* the attribution: one portrait size everywhere, name above stage */
/* The results detail: the athlete's own reported figures, set in the body
   face at a medium weight. It is a supporting line under the quotation, not
   a statistic panel, so it never outweighs the story above it. */
.story-stat{margin:auto 0 .2rem;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.2rem .7rem;padding:.7rem 0 0;border-top:1px solid var(--border)}
.story-stat b{font-family:var(--body);font-size:17px;font-weight:600;color:var(--navy)}
.story-stat span{font-size:14px;color:var(--muted)}
.story-by{margin:1.4rem 0 0;font-size:15px;color:var(--muted);display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:1rem;align-items:center;
  padding-top:1.3rem;border-top:1px solid var(--border)}
.story-by b{display:block;font-family:var(--display);font-size:17px;color:var(--navy)}
.story-pic{grid-row:1 / span 2;width:80px;height:80px;border-radius:50%;object-fit:cover;
  display:block;background:var(--warm)}
.story-nopic .story-by{display:block}
.story > .story-by{margin-top:auto}
.story-stat + .story-by{margin-top:1.4rem}
@media(max-width:860px){
  .stories{grid-template-columns:1fr}
  section.res-head .stories{margin-top:32px}
}
@media(max-width:600px){
  .story{padding:22px}
  .story-q p{font-size:17.5px}
  .story-pic{width:72px;height:72px}
}

/* ---------- level-page package cards ---------- */
.best-for{font-size:16px;line-height:1.5;color:var(--navy);font-weight:600;margin:0 0 1.1rem}
.spec{margin:0 0 1.4rem;padding:0;border-top:1px solid var(--border)}
.spec-row{display:grid;grid-template-columns:140px 1fr;gap:.9rem;padding:.75rem 0;
          border-bottom:1px solid var(--border)}
.spec dt{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.11em;
         text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.spec dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--navy)}
@media(max-width:520px){.spec-row{grid-template-columns:1fr;gap:.2rem}}
.card-links{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:1.1rem 0 0;font-size:15px}
.card-links a,.linkish{color:#0A4C7A;text-decoration:underline;text-underline-offset:2px}
.linkish{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.linkish[aria-pressed="true"]{color:var(--muted);text-decoration:none;font-weight:600}
.pkg-card .btn-primary{align-self:stretch;text-align:center}
.pkg-card .unavail{margin-top:.8rem}

/* ---------- private-session strip: deliberately smaller than a package ---------- */
.ps-strip{display:flex;align-items:center;justify-content:space-between;gap:1.75rem;flex-wrap:wrap;
          background:var(--warm);border:1px solid var(--border);border-left:4px solid var(--orange);
          border-radius:var(--radius-card);padding:1.6rem 1.8rem}
.ps-strip h2{font-size:clamp(19px,2vw,23px);margin:0 0 .35rem}
.ps-strip p{margin:0;font-size:16px;color:var(--muted);max-width:60ch}
.ps-strip .btn{flex:0 0 auto}
@media(max-width:700px){.ps-strip{padding:1.3rem 1.3rem}.ps-strip .btn{width:100%}}

/* one credibility line reads centred rather than as a two-item row */
.cred ul:has(li:only-child){justify-content:center}
.cred li:only-child{font-size:14.5px;font-weight:500;color:var(--on-dark-muted)}

/* ---------- homepage: level title box above each package card ---------- */
.lvl-grid{align-items:stretch}
.lvl-col{display:flex;flex-direction:column}
.lvl-col>.card{flex:1 1 auto}
.lvl-head{
  display:flex;flex-direction:column;gap:.3rem;align-items:center;text-align:center;
  border:2px solid var(--orange);border-radius:var(--radius-card);
  padding:.95rem 1rem;margin-bottom:1rem;text-decoration:none!important;
  transition:background .18s,border-color .18s;
}
.lvl-head .lvl-name{
  font-family:var(--display);font-size:clamp(15px,1.5vw,17px);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--white);line-height:1.2;
}
.lvl-head .lvl-go{
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);
}
.lvl-head:hover{background:var(--orange)}
.lvl-head:hover .lvl-name,.lvl-head:hover .lvl-go{color:var(--navy)}
.lvl-head:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* on a light section the title box needs navy text instead */
.sec-warm .lvl-head .lvl-name,.sec-white .lvl-head .lvl-name{color:var(--navy)}
@media(max-width:1000px){.lvl-head{margin-bottom:.8rem}}

/* A heading is already 700, so emphasis inside one needs a heavier cut. */
h1 strong,h2 strong,h3 strong{font-weight:900;color:var(--orange-ink)}
/* The emphasised word in a headline.
   It used to inherit the browser's <strong> weight, which against a 700
   headline resolves to 900 in Tomorrow: the word bulged out of the line and
   read as heavier rather than clearer. It now sits at the same weight as the
   rest of the headline and carries the emphasis with colour and a soft rule
   underneath, which is what makes it legible at a glance. On navy the orange
   is lifted to a brighter tint, since the brand orange goes muddy there. */
.hero h1 strong,.sec-navy h1 strong,.sec-navy h2 strong{
  color:var(--orange-lift);font-weight:inherit;position:relative;
  white-space:nowrap;padding-bottom:.04em}
.hero h1 strong::after,.sec-navy h1 strong::after,.sec-navy h2 strong::after{
  content:'';position:absolute;left:.02em;right:.02em;bottom:0;height:.075em;
  border-radius:99px;background:var(--orange-lift);opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .hero h1 strong::after{transform-origin:left;animation:hl-in .7s .25s cubic-bezier(.2,.8,.2,1) both}
  @keyframes hl-in{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.55}}
}

/* ---------- credential values ----------
   These were set in the display face at 900 with negative tracking, which
   closed the counters and made NCAA and Finalist read as solid blocks rather
   than words. The approved hero word "understanding" is Tomorrow at 700 with
   no stroke and no shadow; starting from that weight helped, but at badge
   sizes the display face is still hard going on words, so the credentials use
   the body face at 600 with open tracking. Tomorrow keeps the headings, which
   is where a display face earns its keep. */
.cred-val,.hero-creds .num,.stat-strip .fig{
  font-family:var(--body);font-weight:600;line-height:1.05;letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
  -webkit-text-stroke:0;text-shadow:none;
}
/* the unit rides with its number and never breaks away from it */
.cred-val .unit,.hero-creds .num .unit,.stat-strip .fig .unit{font-size:.62em;font-weight:inherit;margin-left:.16em}
/* Closed up, on the owners' instruction of 1 Oct 2026: 3x reads as one
   token. Inter's own sidebearings keep the glyphs from touching, so no
   extra space is needed to keep it legible. */
.cred-val .x,.hero-creds .num .x,.stat-strip .fig .x{margin-left:0}
.cred-nb{white-space:nowrap}

.hero-creds{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;list-style:none;margin:1.8rem 0 0;padding:0}
.hero-creds li{display:flex;align-items:center;gap:.8rem}
.hero-creds .num{font-size:clamp(32px,3.2vw,38px);color:var(--orange)}
.hero-creds .lbl{display:flex;flex-direction:column;line-height:1.3}
.hero-creds .lbl b{
  font-family:var(--body);font-size:14.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white);
}
.hero-creds .lbl{font-size:14.5px;color:var(--on-dark-muted)}
@media(max-width:520px){.hero-creds{gap:1rem 1.5rem}.hero-creds .lbl b{font-size:13px}}

/* ---------- editorial: inline highlight, stat strip, pull quote ---------- */
.hl{color:var(--orange-ink);font-weight:700}
.sec-navy .hl,.hero .hl{color:var(--orange)}

.stat-strip{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;margin:2rem 0 0;padding:0}
.stat-strip li{
  flex:1 1 180px;background:var(--white);border:1px solid var(--border);
  border-left:4px solid var(--orange);border-radius:var(--radius-card);padding:1.15rem 1.25rem;
}
.sec-white .stat-strip li{background:var(--warm)}
.stat-strip .fig{display:block;font-size:clamp(26px,2.5vw,30px);color:var(--orange-ink)}
.stat-strip .cap{
  display:block;margin-top:.45rem;font-family:var(--body);font-size:12.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);line-height:1.3;
}
.sec-navy .stat-strip .fig{color:var(--orange-lift)}
.sec-navy .stat-strip .cap{color:var(--on-dark-muted)}

.pullquote{
  margin:2.25rem 0;padding:1.6rem 0 1.6rem 1.9rem;border-left:5px solid var(--orange);
  font-family:var(--display);font-size:clamp(21px,2.6vw,29px);font-weight:700;line-height:1.25;
  color:var(--navy);letter-spacing:-.005em;
}
.sec-navy .pullquote{color:var(--white)}
/* an attributed quote: the name is set apart from the words themselves, so a
   reader can tell at a glance who is speaking */
.pullquote cite{display:block;margin-top:.7rem;font-family:var(--body);font-style:normal;
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-ink)}
.sec-navy .pullquote cite{color:var(--orange-lift)}

.feature-line{
  background:var(--navy);color:var(--white);border-radius:var(--radius-card);
  padding:2.2rem 2.2rem;margin:2rem 0 0;
}
.feature-line p{font-family:var(--display);font-size:clamp(20px,2.4vw,27px);font-weight:700;
  line-height:1.28;color:var(--white);margin:0}
.feature-line p+p{margin-top:1rem;font-family:var(--body);font-size:17.5px;font-weight:400;
  line-height:1.6;color:var(--on-dark-muted)}
@media(max-width:600px){.feature-line{padding:1.5rem 1.4rem}.pullquote{padding-left:1.2rem}}

/* ---------- homepage athlete paths ---------- */
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.25rem}
@media(max-width:900px){.path-grid{grid-template-columns:1fr;gap:1.25rem}}
.path-card{display:flex;flex-direction:column;background:var(--white);
           border:2px solid var(--card-line);box-shadow:var(--card-shadow);
           border-radius:var(--radius-card);overflow:hidden;transition:border-color .18s,box-shadow .18s}
.path-card:hover{border-color:var(--orange);box-shadow:0 10px 26px rgba(13,27,42,.1)}
/* 4:3, not 16:10. A portrait photograph in a wide frame is already at its
   widest the moment it fills the frame's width: there is no further pulling
   back to do without making the frame taller. This is what lets the
   collegiate and post-collegiate photographs show more of themselves. */
.path-card .card-media{aspect-ratio:4/3}
.path-card .card-body{display:flex;flex-direction:column;flex:1;padding:1.6rem 1.5rem 1.7rem}
.path-card h3{font-size:clamp(20px,2vw,24px);margin-bottom:.5rem}
.path-card p{font-size:16.5px;line-height:1.55;color:var(--muted);margin-bottom:1.5rem}
.path-card .btn{margin-top:auto;align-self:stretch;text-align:center}

/* hero: quieter secondary action, tighter block */
.hero-quiet{margin:.9rem 0 0!important;font-size:15.5px}
.hero-quiet a{color:var(--orange)!important;text-decoration:underline;text-underline-offset:3px}
.hero-quiet a:hover{color:#FFB877!important}

/* ---------- tighter vertical rhythm (brief: 56–72px desktop, 32–40px mobile) ---------- */
section{padding:68px 0}
@media(max-width:900px){section{padding:48px 0}}
@media(max-width:768px){section{padding:38px 0}}
.page-head{padding-top:44px;padding-bottom:12px}
.hero-copy{padding-top:56px;padding-bottom:56px}
@media(max-width:900px){.hero-copy{padding-top:34px;padding-bottom:34px}}
.hero-img{min-height:420px}
@media(max-width:900px){.hero-img{min-height:250px}}
.hero-creds{margin-top:1.5rem}
.hero-aud{margin-top:1.1rem!important;padding-top:1rem}

/* ---------- anchor offset: scroll-padding and scroll-margin were stacking,
     leaving a 250px gap under the sticky header. One source of truth. ---------- */
html{scroll-padding-top:116px}
.anchor-target{scroll-margin-top:0}

/* ---------- hero: smaller than the viewport, still confident ---------- */
.hero h1{font-size:clamp(32px,4vw,46px);max-width:17ch;margin-bottom:.5em}

.hero-copy{padding-top:40px;padding-bottom:40px}
.hero-copy>p{margin-bottom:.9em}
.hero-creds{margin-top:1.25rem}
.hero .btn-row{margin-top:1.25rem}
.hero-aud{margin-top:.9rem!important;padding-top:.85rem;font-size:14.5px!important}
@media(max-width:900px){.hero-copy{padding-top:30px;padding-bottom:30px}}
/* stat strip sits inside a split column, so it needs a narrower basis to stay one row */
/* a badge may wrap onto its own row rather than squeeze its value */
.stat-strip li{flex:1 1 150px;padding:1rem 1.1rem}
.stat-strip .fig{font-size:clamp(26px,2.4vw,28px)}
@media(max-width:420px){.stat-strip li{flex:1 1 100%}}

/* ---------- the assessment offer: what you do, what you get ---------- */
.rw-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  margin:1.8rem 0 1.9rem;padding:0;text-align:left}
.rw-step{display:flex;gap:.85rem;align-items:flex-start}
.rw-n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;
  font-family:var(--display);font-size:15px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:.1rem}
.rw-step h3{font-size:16px;margin:0 0 .3rem;line-height:1.3}
.rw-step p{font-size:14.5px;line-height:1.5;margin:0}
.sec-navy .rw-step h3{color:var(--white)}
.sec-navy .rw-step p{color:var(--on-dark-muted)}
@media(max-width:820px){.rw-steps{grid-template-columns:1fr;gap:1.1rem;margin:1.4rem 0 1.5rem}}

/* ---------- the reward, on the assessment result ---------- */
.earned{border:2px solid var(--orange);border-radius:var(--radius-card);background:#FFF6EC;
  padding:1.3rem 1.4rem;margin:1.5rem 0 1.9rem}
.earned-tag{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-ink);margin-bottom:.35rem}
.earned h3{font-size:19px;margin:0 0 .5rem;color:var(--navy)}
.earned p{font-size:15px;line-height:1.55;color:var(--muted);margin:0 0 .5rem}
.earned .btn-row{margin:1rem 0 0}
.earned-note{font-size:13.5px;margin:.85rem 0 0}
@media(max-width:600px){.earned{padding:1.1rem}}

/* ---------- the same offer, brought back to the middle of the screen ----------
   Built by js/assessment.js once the athlete has settled on the recommended
   plan for fifteen seconds. Once per tab, and closable four ways. */
html.modal-open,html.modal-open body{overflow:hidden}
.modal-back{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:1.25rem;background:rgba(13,27,42,.62);
  animation:modal-in .18s ease-out}
.modal{position:relative;width:100%;max-width:470px;background:var(--white);
  border:2px solid var(--orange);border-radius:var(--radius-card);
  padding:2rem 1.9rem 1.7rem;box-shadow:0 24px 60px rgba(13,27,42,.3);
  max-height:calc(100vh - 2.5rem);overflow:auto;animation:modal-rise .22s ease-out}
.modal:focus{outline:none}
.modal:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.modal-tag{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-ink);margin:0 0 .45rem}
.modal h2{font-size:clamp(22px,2.6vw,27px);margin:0 0 .7rem;color:var(--navy)}
.modal p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0}
.modal .btn-row{margin:1.3rem 0 0}
.modal .btn-row .btn{width:100%}
.modal-later{display:block;width:100%;margin:.85rem 0 0;padding:.35rem 0;
  background:none;border:0;cursor:pointer;font-family:var(--body);font-size:14.5px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.modal-later:hover{color:var(--navy)}
.modal-x{position:absolute;top:.6rem;right:.6rem;width:40px;height:40px;display:flex;
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer;
  border-radius:8px;color:var(--muted)}
.modal-x:hover{background:var(--warm);color:var(--navy)}
.modal-x svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}
@keyframes modal-in{from{opacity:0}to{opacity:1}}
@keyframes modal-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .modal-back,.modal{animation:none}
}
@media(max-width:600px){.modal{padding:1.7rem 1.25rem 1.4rem}}

/* ---------- terms that belong with a button ----------
   Small, italic, and directly under the action they govern. They are quieter
   than the body copy but still meet the 4.5:1 target; nothing that affects
   what someone pays is allowed to be decorative grey. */
.btn-terms{font-size:13.5px;font-style:italic;line-height:1.5;color:var(--muted);
  max-width:46ch;margin:.85rem 0 0}
.btn-terms + .btn-terms{margin-top:.4rem}
.sec-navy .btn-terms{color:var(--on-dark-muted)}
.btn-terms.tbd{border-left:2px dashed var(--orange);padding-left:.6rem}

/* ---------- buying a private session ----------
   One stated price and the same orange button the packages use. It borrows
   the package tile's frame so the moment of buying looks the same everywhere,
   but it is not a radio: there is only one way to buy a session, and a lone
   selectable option would imply a second one exists. */
.buy-single{max-width:430px;gap:1rem}
.buy-opt.is-static{cursor:default;border-color:var(--border)}
.buy-opt.is-static:hover{border-color:var(--border)}
.buy-main.is-flat{padding-left:0}
.buy-main.is-flat::before{display:none}
.buy-single .btn{width:100%}
.buy-rates{display:flex;flex-direction:column;gap:.45rem;margin:.7rem 0 .2rem}
.buy-rates > span{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.45rem;border-bottom:1px solid var(--border)}
.buy-rates > span:last-child{border-bottom:0;padding-bottom:0}
.buy-rates > span > span{font-size:15.5px;color:var(--muted)}
.buy-rates b{font-family:var(--display);font-size:21px;font-weight:700;color:var(--orange-ink)}

/* ---------- the purchase pair ----------
   Two stacked buttons of equal width and height, 11px apart. The card itself
   is never the control: someone reading a card should not be able to buy by
   brushing against it. */
.buybtns{display:flex;flex-direction:column;gap:.7rem}
.buybtns .btn{width:100%;padding-left:.7rem;padding-right:.7rem;font-size:13px;
  min-height:50px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.buy-fine{font-size:12.5px;line-height:1.45;color:var(--muted);margin:.15rem 0 0}
.buy-pending{font-size:12.5px;line-height:1.45;color:var(--orange-ink);font-weight:600;
  margin:.15rem 0 0;border-left:2px dashed var(--orange);padding-left:.55rem}
.sec-navy .buy-fine{color:var(--on-dark-muted)}
@media(max-width:620px){.buybtns .btn{min-height:54px;font-size:13.5px}}

/* the price line on a dark panel */
.sec-navy .mini-price b{color:var(--white)}
.sec-navy .mini-price span,.sec-navy .mini-alt{color:var(--on-dark-muted)}
.sec-navy .mini-alt{border-bottom-color:rgba(255,255,255,.18)}
.buybtns.buy-wide{max-width:420px}

/* ---------- boxes or chart ----------
   A segmented control, not a switch: two labelled options, both visible, so
   nobody has to click to find out what the other state is. */
.view-toggle{display:inline-flex;gap:.25rem;padding:.25rem;margin:0 0 1.5rem;
  background:var(--white);border:1px solid var(--border);border-radius:999px}
.sec-warm .view-toggle{background:var(--white)}
.vt-btn{font-family:var(--body);font-size:14.5px;font-weight:700;letter-spacing:.03em;
  color:var(--muted);background:none;border:0;cursor:pointer;padding:.55rem 1.2rem;
  border-radius:999px;transition:background .15s,color .15s}
.vt-btn:hover{color:var(--navy)}
.vt-btn[aria-pressed="true"]{background:var(--navy);color:var(--white)}
.vt-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.inc-chart{margin-top:.25rem}
/* a display rule elsewhere would otherwise beat the hidden attribute */
.inc-views [hidden]{display:none!important}
.inc-chart .cmp thead th:first-child{width:46%}
.inc-chart .cmp tbody th{font-size:16px}
/* the package chosen above is marked in the chart too, so the two views agree */
.inc-chart .cmp [data-col].is-sel{background:#FFF8F1}
.inc-chart .cmp thead th[data-col].is-sel{border-bottom-color:var(--orange)}
@media(max-width:620px){
  .view-toggle{display:flex;width:100%}
  .vt-btn{flex:1 1 0;padding:.6rem .5rem}
  .inc-chart .cmp th,.inc-chart .cmp td{padding:.7rem .5rem}
  .inc-chart .cmp tbody th{font-size:14.5px;line-height:1.3}
}

/* The .story-face slot card and its dashed empty frame were removed on
   3 Oct 2026 with the rest of the placeholders. See .story-pic below. */

/* the closing line of the About opening: a statement, not a heading, so it is
   set in the display face at h3 weight without entering the heading outline */
.about-line{
  font-family:var(--display);font-size:clamp(20px,2.1vw,26px);font-weight:700;
  line-height:1.25;color:var(--navy);letter-spacing:-.005em;
  max-width:22ch;margin:1.6rem 0 0;padding-top:1.4rem;
  border-top:3px solid var(--orange);display:inline-block;
}
@media(max-width:899px){.about-line{max-width:none;margin-top:1.3rem}}

/* ---------- sessions and reviews: the service grid ----------
   Four offers, two columns, one shape. The order of the fields is fixed so
   the eye learns it once on the first card and then only has to read what
   differs on the other three. Nothing here is behind a hover: an athlete
   deciding what to buy should never have to discover a fact by accident. */
.btn-buy:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* ---------- 1 on 1: three services side by side ----------
   These are three different things you can buy, not three stages of one
   process, so they carry no numbers. The orange rule above each heading is
   the only accent; everything readable is navy. */
.cols3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media(max-width:900px){.cols3{grid-template-columns:1fr;gap:1.5rem}}
.cols3 li{margin:0}
.cols3 h3{font-size:20px;line-height:1.2;margin:0 0 .6rem;padding-top:.85rem;
  border-top:3px solid var(--orange)}
.cols3 p{font-size:16px;line-height:1.55;color:var(--navy);margin:0}

/* ---------- 1 on 1: the way out to the monthly packages ----------
   The same strip the homepage uses to point the other way. On a warm section
   it would otherwise sit on its own colour, so it takes white here and keeps
   the orange edge that marks it as an aside rather than an offer. */
.ongoing{margin-top:2.4rem;background:var(--white)}
.ongoing h2{font-size:clamp(19px,2vw,23px);margin:0 0 .35rem}
@media(max-width:900px){.ongoing .btn{width:100%}}

/* ---------- the heading contract ----------
   Owner brief, 30 Sep 2026, extended 1 Oct: one treatment for every page and
   every section on the site. A page or section is named first, in the display
   face at the same 700 the approved hero word uses; the sentence that used to
   be the heading sits under it in the body face, large enough to read as an
   introduction and light enough not to compete; body copy follows. The
   homepage hero is the one deliberate exception and keeps its own headline.

   Everything below is shared. Nothing overrides it per page, so a change here
   reaches all 27 routes at once. */
.sec-h{
  font-family:var(--display);font-weight:700;font-size:clamp(30px,3.3vw,43px);
  line-height:1.1;letter-spacing:-.01em;margin:0 0 10px;
  display:flex;align-items:center;gap:.7rem;
}
.sec-h::before{content:'';flex:0 0 auto;width:28px;height:4px;border-radius:99px;
  background:var(--orange)}
@media(min-width:900px){.sec-h{margin-left:-2.375rem}}

/* the supporting subheading: sans, semibold, navy on light and white on dark,
   clearly smaller and lighter than the name above it */
.sec-tag{
  font-family:var(--body);font-weight:600;font-size:clamp(22px,1.95vw,28px);
  line-height:1.3;letter-spacing:-.005em;color:var(--navy);margin:0 0 14px;max-width:46ch;
}
.sec-navy .sec-h,.hero .sec-h{color:var(--white)}
.sec-navy .sec-tag,.hero .sec-tag{color:var(--white)}

/* body copy stays body copy: with a 28px subheading above it, a 19px lede
   would make three near-equal sizes and no ladder at all */
.sec-tag + .lede,.sec-tag + * > .lede,.sec-tag ~ p.lede{font-size:18px}

/* 30px of air before a section's cards or main content */
.sec-h ~ .grid,.sec-h ~ .pkg-grid,.sec-h ~ .svc-grid,.sec-h ~ .cols3,
.sec-h ~ .faq,.sec-h ~ .inc-views,.sec-h ~ .stat-strip,.sec-h ~ .tmr,
.sec-h ~ .rw-steps,.sec-h ~ .cmp-wrap,.sec-h ~ form,.sec-h ~ .steps,
.sec-h ~ .cmp,.sec-h ~ .terms,.sec-h ~ .stories{margin-top:30px}

/* a centred closing block: same heading treatment, without the accent rule,
   which cannot hang beside centred text without looking like a stray mark */
.sec-h.is-center{justify-content:center;text-align:center;margin-left:0}
.sec-h.is-center::before{display:none}
@media(min-width:900px){.sec-h.is-center{margin-left:0}}
/* the comparison heading already carries a checkmark, so it does not take the
   dash as well */
.sec-h.h-mark::before{display:none}
@media(min-width:900px){.sec-h.h-mark{margin-left:0}}

/* a heading inside an aside panel. It is an h2 so a page's outline never skips
   a level, and it keeps the size its role deserves rather than the size its
   tag would give it. */
.panel-h{font-size:clamp(20px,2.2vw,26px);line-height:1.15;margin:0 0 .6em}

/* the footer carries the same lockup as the header, on navy */
.f-brand{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem}
.f-brand img{height:44px;width:auto}
.f-brand .brand-txt{color:var(--white);font-size:14px;letter-spacing:.15em;padding-top:4px}

/* ---------- pointing at something you can buy ----------
   Hovering or tabbing into a product card lifts its edge from the muted
   navy-grey to the brand orange, with a matching orange-tinted shadow so the
   card you are pointing at is obvious without anything moving.

   It is the edge only. On the 1 on 1 and comparison cards the buttons are the
   controls, so the card highlights but keeps its normal cursor; on the level
   pages the card itself is the control and keeps its pointer. Keyboard users
   get the same highlight through :focus-within, so the outline is not a
   mouse-only affordance. */
.svc,.pkgmini,.path-card,.pkg-card{transition:border-color .18s,box-shadow .18s}

.svc:hover,.svc:focus-within,
.pkgmini:hover,.pkgmini:focus-within,
.path-card:hover,.path-card:focus-within,
.pkg-card:hover,.pkg-card:focus-within{
  border-color:var(--orange);
  box-shadow:0 6px 18px rgba(244,124,32,.18);
}

/* The featured Complete card already carries the brand orange, so pointing at
   it deepens the edge to the darker orange instead of doing nothing. */
.pkgmini.is-top:hover,.pkgmini.is-top:focus-within,
.pkg-card[data-pkg="complete"]:hover,.pkg-card[data-pkg="complete"]:focus-within{
  border-color:var(--orange-ink);
  box-shadow:0 6px 18px rgba(182,84,9,.22);
}

/* A selected package keeps its ring while it is hovered. */
.pkg-card[data-selected="true"]:hover,.pkg-card[data-selected="true"]:focus-within{
  box-shadow:0 0 0 2px rgba(244,124,32,.35),0 6px 18px rgba(244,124,32,.18);
}

@media (prefers-reduced-motion:reduce){
  .svc,.pkgmini,.path-card,.pkg-card{transition:none}
}

/* ---------- a page's one introduction paragraph ----------
   Body size, a comfortable measure, and a fixed 30px to the cards. It sits in
   the same .wrap as the grid, so its left edge is the first card's left edge;
   the heading's orange dash hangs outside that edge the way it does elsewhere. */
.intro-para{font-size:18px;line-height:1.55;color:var(--muted);max-width:720px;margin:0 0 .55rem}
@media(max-width:600px){.intro-para{font-size:16.5px}}
.cmp-usd{font-size:15px;color:var(--muted);margin:0 0 30px}
.page-head .unavail{margin-top:0}



/* the form takes two thirds, the email panel one, both aligned at the top */
.split-23{grid-template-columns:2fr 1fr}
@media(max-width:900px){.split-23{grid-template-columns:1fr}}

/* ---------- the assessment invitation ----------
   Compact and quiet: the page it closes is for asking a question, so this
   offers the next step without competing with Send Message. */
.assess-call{background:var(--warm);border:1px solid var(--border);
  border-left:4px solid var(--orange);border-radius:var(--radius-card);padding:1.6rem 1.8rem}
.sec-warm .assess-call{background:var(--white)}
.assess-call h2{font-size:clamp(20px,2vw,24px);line-height:1.2;margin:0 0 .5rem}
.assess-call p{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 1.1rem;max-width:62ch}
.assess-call .btn{margin:0}
.assess-call-note{font-size:14px;margin:.8rem 0 0!important}
@media(max-width:620px){.assess-call{padding:1.3rem 1.3rem}.assess-call .btn{width:100%}}

/* ---------- the assessment's average score ----------
   One figure, because the average is the first thing an athlete looks for. */
.score{display:flex;align-items:baseline;gap:.5rem;margin:0 0 1.2rem}
.score b{font-family:var(--body);font-size:46px;font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.score span{font-size:15px;font-weight:600;color:var(--muted)}

/* the two lowest bars are marked, so the ratings and the advice below them
   describe the same two areas */
.bar.is-low .bar-l{font-weight:700;color:var(--navy)}
.bar.is-low .bar-t i{background:var(--orange-ink)}

/* one targeted block per weak link */
.weak{background:var(--warm);border-left:4px solid var(--orange);border-radius:0 8px 8px 0;
  padding:1rem 1.2rem;margin:0 0 .9rem}
.weak h4{font-size:17px;margin:0 0 .35rem}
.weak p{font-size:16px;line-height:1.55;color:var(--muted);margin:0}

/* The quieter routes out of the recommendation, under its button. The panel
   is navy inside a white section, so it has to out-specify the sitewide
   "main a" link colour by hand: that colour is meant for light backgrounds
   and is close to unreadable on this one. */
.rec-alt{font-size:15px;margin:.9rem 0 0!important}
.rec a:not(.btn):not(.card-link){color:var(--orange-lift)}
.rec a:not(.btn):not(.card-link):hover{color:#FFB877}
.rec-alt + .rec-alt{margin-top:.4rem!important}

/* ---------- the assessment result's three readings ----------
   Physical, Coaching, Time. Section labels rather than headings, so they
   organise the result without competing with its own h2. */
.res-sec{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange-ink);margin:2rem 0 .6rem;
  padding-top:1.1rem;border-top:1px solid var(--border)}
.res-sec:first-of-type{margin-top:1.6rem}

/* The recommended plan is its own button, so the name is the thing you click.
   Owner, 2 Oct 2026: the reasoning line under it is gone, so the heading and
   the button both carry more size. The button stretches to the panel width on
   narrow screens rather than wrapping its label. */
.rec h3{font-size:clamp(24px,3vw,32px);margin-bottom:1.1rem}
.rec-btn{margin:0 0 1.1rem;min-height:62px;padding:0 2.2rem;font-size:17px;letter-spacing:.06em}
@media(max-width:560px){
  .rec-btn{width:100%;padding:0 1rem;font-size:15px}
}

/* the package the assessment pointed at, marked when arriving from a result */
.pkgmini.is-picked{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,124,32,.25),var(--card-shadow)}
.mini-picked{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy);background:var(--orange);
  border-radius:99px;padding:.3rem .75rem;margin:0;line-height:1.2;white-space:nowrap}
.pkgmini.is-top.is-picked .mini-flag{display:none}

/* the way back to a result someone left to come here */
.back-link{font-size:15px;margin:0 0 1rem}
.back-link a{color:var(--navy)}
.back-link a::before{content:'\2190';margin-right:.4rem;text-decoration:none;display:inline-block}

/* ======================================================================
   LEVEL PAGES (owner brief, 3 Oct 2026)
   A shorter journey from the hero to a purchase, with the same identity.
   ====================================================================== */

/* ---------- hero: one image frame on all three pages ----------
   The collegiate photograph is a portrait and was making its page's opening
   substantially taller than the other two. Every hero image now sits in the
   same 420px frame and is cropped by object-position, chosen per page to
   keep the face and whatever else matters in that picture. */
.lvl-hero .wrap{align-items:center}
.lvl-hero{padding-bottom:40px}
.lvl-media{align-self:center;max-height:440px}
.lvl-media img{width:100%;height:420px;object-fit:cover;display:block}
.lvl-intro .btn-row{margin:1.6rem 0 0}
.lvl-intro .note-line{margin-top:.9rem}
@media(max-width:900px){
  /* Heading, copy and button before the picture, and a shorter picture, so
     the packages are reachable without scrolling past a large portrait. */
  .lvl-hero .wrap{display:flex;flex-direction:column}
  .lvl-media{order:2;max-height:none;margin-top:1.6rem}
  .lvl-media img{height:220px}
  .lvl-intro{order:1}
}

/* The one paragraph under a section heading. Body copy, not a second
   headline, and 24 to 32px above the content it introduces. */
.sec-lede{max-width:760px;margin:0 0 28px}
.sec-h + .sec-lede{margin-top:14px}

/* ---------- the collapsed comparison (owner brief, 3 Oct 2026) ----------
   Inside the package section, on the section's own background: it is part of
   the packages, not another full-width band. The header is a real summary, so
   it is clickable and keyboard-operable with no script, and <details> carries
   its own expanded state for assistive technology. It is deliberately quieter
   than the purchase buttons: warm fill, navy text, one orange chevron. */
.cmp-open{margin:1.9rem 0 1.2rem;border:2px solid var(--card-line);
  border-radius:var(--radius-card);background:var(--warm);overflow:hidden}
.cmp-open summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:1.2rem;padding:22px 24px;transition:background .18s,border-color .18s}
.cmp-open summary::-webkit-details-marker{display:none}
.cmp-open summary:hover{background:#F1EDE4}
.cmp-open summary:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.cmp-open-txt{display:block;flex:1 1 auto;min-width:0}
.cmp-open-h{display:block;font-family:var(--body);font-size:20px;font-weight:600;
  line-height:1.25;color:var(--navy)}
.cmp-open-s{display:block;margin-top:.3rem;font-size:16px;line-height:1.45;color:var(--muted)}
.cmp-chev{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:var(--orange);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s}
.cmp-open[open] .cmp-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.cmp-chev{transition:none}}
.cmp-open-body{padding:0 24px 22px;background:var(--white);
  border-top:2px solid var(--card-line)}
/* the table scrolls inside its own box, never the page */
.cmp-open-body .cmp-wrap{margin-top:1.1rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.cmp-open-body .cmp-lvl{min-width:520px}
/* a row where the two packages actually differ */
.cmp-lvl tbody tr.is-diff{background:#FBF8F3}
.cmp-lvl th[data-col].is-sel,.cmp-lvl td[data-col].is-sel{background:#FFF6EC}
/* the sideways-scroll cue, shown only when the table needs one */
.cmp-scroll{display:none;margin:.7rem 0 0;font-size:14px;color:var(--muted)}
.cmp-scroll::before{content:'\2194';margin-right:.4rem;color:var(--orange-ink);font-weight:700}
@media(max-width:600px){
  .cmp-open summary{padding:18px 18px;gap:.9rem}
  .cmp-open-h{font-size:18px}
  .cmp-open-s{font-size:15.5px}
  .cmp-open-body{padding:0 18px 18px}
  .cmp-scroll{display:block}
}

/* the two quiet ways out, on the same line as the USD note */
.alt-paths{margin-top:1.3rem}

/* ---------- the three Coaching Experience columns ----------
   Open spacing and a thin rule above each, rather than three more bordered
   cards competing with the package cards above them. */
.exp-cols{margin-top:28px}
.exp-cols h3{font-size:19px;border-top-width:2px}
.exp-cols p{color:var(--muted)}

/* ---------- FAQ questions ----------
   Semibold sans, with the display face kept for section headings
   (owner brief, 3 Oct 2026). */
.faq summary{font-family:var(--body);font-size:17.5px;font-weight:600;letter-spacing:0}

/* ---------- the compact closing band ---------- */
.lvl-close{padding-top:56px;padding-bottom:56px}
.lvl-close .note-line a{color:var(--orange-lift)}
@media(max-width:768px){.lvl-close{padding-top:38px;padding-bottom:38px}}

/* ======================================================================
   1 ON 1 (owner brief, 3 Oct 2026)
   ====================================================================== */
/* the one customer-facing line about checkout, above the groups */
.svc-notice{margin:0 0 1.6rem;padding:.85rem 1.1rem;background:#FFF6EC;
  border-left:3px solid var(--orange);border-radius:0 8px 8px 0}

/* Common Questions: the heading and the invitation beside the accordion,
   stacked above it on a phone. */
.faq-split{display:grid;grid-template-columns:1fr 2fr;gap:2.5rem;align-items:start}
.faq-aside{padding-top:.2rem}
.faq-aside p{font-size:16.5px;line-height:1.55;color:var(--muted);margin:14px 0 0;
  max-width:34ch}
.faq-ask a{font-weight:600}
.faq-split .faq details:first-child{border-top:1px solid var(--border)}
@media(max-width:900px){
  .faq-split{grid-template-columns:1fr;gap:1.5rem}
}

.ps-close{padding-top:56px;padding-bottom:56px}
.ps-close .note-line a{color:var(--orange-lift)}
@media(max-width:768px){.ps-close{padding-top:38px;padding-bottom:38px}}

/* The three points under the comparison chart on /programs. Columns, not
   cards: the cards on that page are the packages (owner brief, 3 Oct 2026). */
.strip3{margin-top:28px}
.strip3 h3{font-family:var(--body);font-size:16px;font-weight:600;line-height:1.3;
  border-top-width:2px;padding-top:.8rem;margin-bottom:.45rem}
.strip3 p{font-size:15.5px;color:var(--muted)}

/* ---------- level-page package cards: aligned rows (owner, 3 Oct 2026) ----
   The two cards carry the same seven things in the same order, so those rows
   are made to line up across the pair with nested subgrids rather than with
   invented line breaks or hand-tuned heights. Where subgrid is unavailable
   the cards simply fall back to their natural flow, which is what they did
   before, so nothing breaks. */
@supports (grid-template-rows: subgrid) {
  /* 10 rows: the photograph, then the card body's six single-row children
     (name, best-for, price, price note, purchase block, links) with the three
     spec rows nested inside it. */
  .pkg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(10,auto)}
  .pkg-grid .pkg-card{display:grid;grid-row:span 10;grid-template-rows:subgrid}
  .pkg-grid .card-body{display:grid;grid-row:span 9;grid-template-rows:subgrid;
    align-content:start}
  /* the three spec rows line up too, so "Programming" sits opposite
     "Programming" however long either sentence runs */
  .pkg-grid .spec{display:grid;grid-template-rows:subgrid;grid-row:span 3}
  .pkg-grid .buybtns{align-self:end}
  @media(max-width:760px){
    .pkg-grid{grid-template-columns:1fr;grid-template-rows:none}
    .pkg-grid .pkg-card,.pkg-grid .card-body,.pkg-grid .spec{
      grid-row:auto;grid-template-rows:none;display:block}
    .pkg-grid .card-body{display:flex;flex-direction:column}
  }
}

/* The level-page purchase buttons deliberately carry no override: they render
   exactly as the same buttons do on Explore All Coaching, brand orange with
   navy text for Subscribe & Save and a navy outline for Buy One Month, so the
   two pages cannot disagree (owner, 3 Oct 2026). While a payment link is
   missing they are dimmed by the sitewide .btn[aria-disabled] rule, are not
   links at all, and the page carries one line saying checkout is not
   connected; that is the whole unavailable state, in one place for every
   page. */

/* ======================================================================
   REQUEST YOUR FREE SESSION (owner brief, 3 Oct 2026)
   A supporting column beside a form panel, and a confirmation that takes
   the form's place once the request has actually been accepted.
   ====================================================================== */
.claim-head{padding-top:36px;padding-bottom:64px}
.claim-wrap{max-width:1120px}
.claim-head .sec-h{font-size:clamp(32px,4vw,46px)}
.claim-head .sec-tag{font-size:clamp(22px,2.4vw,27px)}
.claim-intro{max-width:640px;font-size:17.5px;line-height:1.6;color:var(--muted);
  margin:14px 0 0}
.claim-meta{margin:.9rem 0 0;font-size:15px;font-weight:600;color:var(--navy)}
.claim-cols{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start;
  margin-top:34px}
.claim-aside .panel-h{margin-bottom:.9rem}
.claim-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.claim-list li{position:relative;padding-left:1.6rem;font-size:16.5px;line-height:1.5;
  color:var(--navy)}
.claim-list li::before{content:'';position:absolute;left:0;top:.45em;width:9px;height:9px;
  border-radius:50%;background:var(--orange)}
.claim-aside .note-line{margin-top:1.2rem}
.claim-panel{background:var(--white);border:2px solid var(--card-line);
  border-radius:13px;box-shadow:var(--card-shadow);padding:30px}
.claim-panel .form{margin-top:0}
.form-lead{margin:0 0 1.4rem;font-size:17px;line-height:1.55;color:var(--navy)}
.claim-panel label{font-size:15.5px;font-weight:600}
.claim-submit{width:100%;min-height:52px;margin-top:.4rem}
.form-fine{margin-top:.9rem}
.claim-done h2{font-size:clamp(24px,2.6vw,30px);margin:0 0 .8rem}
.claim-done p{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 .9rem}
.claim-done .back-link{margin:1.3rem 0 0}
.claim-done:focus{outline:none}
.claim-done:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
@media(max-width:900px){
  /* Header, then the form, then the supporting notes. */
  .claim-cols{grid-template-columns:1fr;gap:1.8rem}
  .claim-aside{order:2}
  .claim-panel{order:1;padding:20px}
  .claim-submit{width:100%}
  .claim-head{padding-bottom:48px}
  .claim-intro{font-size:16.5px}
  .claim-list li{font-size:16px}
  .form-lead{font-size:16.5px}
  .claim-done p{font-size:16.5px}
}

/* The age band each level page carries (owner, 3 Oct 2026). It sits inside
   the h1 so it is read as part of the page's name, but set in the body face
   at a size that reads as a label rather than a second heading. */
.lvl-age{display:inline-block;vertical-align:.22em;margin-left:.5rem;
  font-family:var(--body);font-size:.42em;font-weight:700;letter-spacing:.06em;
  color:var(--navy);background:var(--orange);border-radius:99px;
  padding:.32em .78em;line-height:1.2;white-space:nowrap}
@media(max-width:600px){.lvl-age{font-size:.46em;vertical-align:.3em}}

/* ---------- the closing section on Explore All Coaching and 1 on 1 --------
   One heading, one short paragraph, one button, one text link (owner brief,
   3 Oct 2026). Compact: it is a decision point, not another panel of copy. */
.page-close{padding-top:52px;padding-bottom:52px}
@media(max-width:768px){.page-close{padding-top:36px;padding-bottom:36px}}
.close-wrap{max-width:720px;text-align:center}
.close-p{max-width:580px;margin:0 auto 1.4rem}
.close-ask{margin-top:1.3rem}
.close-ask a{color:var(--orange-lift);font-weight:600}

/* ---------- the clean sweep: six out of six (owner, 3 Oct 2026) ----------
   The joke line, and a short burst of confetti over the score. The layer is
   clipped to its own box so it can never widen the page, and nothing moves
   at all when the reader has asked for reduced motion. */
.res-joke{font-family:var(--display);font-size:clamp(19px,2.1vw,23px);font-weight:700;
  line-height:1.25;color:var(--navy);margin:0 0 .7rem}
/* The score becomes its own box so the burst sits over the number rather
   than spraying across the whole column. */
.score.is-perfect{position:relative;display:inline-flex;width:auto}
.score.is-perfect b{color:var(--orange-ink)}
.cfti{position:absolute;left:-46px;right:-46px;top:-58px;bottom:-30px;
  overflow:hidden;pointer-events:none;z-index:2}
.cfti i{position:absolute;top:0;width:7px;height:11px;border-radius:2px;
  opacity:0;will-change:transform,opacity;
  animation-name:cfti-fall;animation-timing-function:cubic-bezier(.25,.5,.5,1);
  animation-fill-mode:both}
@keyframes cfti-fall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  10%{opacity:1}
  72%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--sway),152px,0) rotate(var(--spin))}
}
@media (prefers-reduced-motion:reduce){.cfti{display:none}}

/* The combined-events welcome on Explore All Coaching: part of the same
   introduction, set a shade quieter so it reads as a note on who this is for
   rather than a second opening paragraph (owner, 4 Oct 2026). */
.intro-who{font-size:17px;margin-top:.7rem}
@media(max-width:600px){.intro-who{font-size:16px}}

/* ======================================================================
   1 ON 1, rebuilt (owner brief, 5 Oct 2026)

   Everything below is scoped to this page's own classes. `.ps-*` is the
   introduction and the service groups; `.svc*` and `.btn-buy` appear only
   here. Nothing in this block can reach the coaching packages.
   ====================================================================== */
.ps-head{
  /* this page's own palette tokens, so nothing global shifts */
  --ps-sec:#46566A;
  --ps-line:#DCE2E8;
  --ps-quiet:#F3F5F7;
  padding:40px 0 48px;
}
/* The cards follow the introduction immediately: no band of empty
   white between the two. */
.ps-services{--ps-sec:#46566A;--ps-line:#DCE2E8;--ps-quiet:#F3F5F7;
  padding-top:44px;padding-bottom:64px}
.ps-head .breadcrumb{padding-top:0}

/* ---------- the introduction: words beside the coaching itself ---------- */
.ps-split{display:grid;grid-template-columns:58fr 42fr;gap:40px;align-items:center}
.ps-intro{max-width:none}
.ps-h1{font-family:var(--display);font-weight:700;font-size:48px;line-height:1.1;
  letter-spacing:-.01em;color:var(--navy);margin:0}
.ps-tag{font-family:var(--body);font-weight:600;font-size:30px;line-height:1.22;
  color:var(--navy);margin:12px 0 0}
.ps-lede{font-size:18px;line-height:1.6;color:var(--ps-sec);margin:16px 0 0;max-width:52ch}
.ps-meta{font-size:14.5px;line-height:1.5;color:var(--ps-sec);margin:20px 0 0}
.ps-media{margin:0}
.ps-media img{width:100%;aspect-ratio:4/3;max-height:340px;object-fit:cover;
  object-position:50% 50%;border-radius:14px;display:block}
@media(min-width:901px){.ps-media img{min-height:300px}}

/* ---------- two groups, four cards ---------- */
.svc-group-h{font-family:var(--body);font-weight:600;font-size:26px;line-height:1.2;
  color:var(--navy);margin:0 0 .35rem;padding-top:.7rem;position:relative}
.svc-group-h::before{content:'';position:absolute;left:0;top:0;width:34px;height:3px;
  border-radius:99px;background:var(--orange)}
.svc-group-s{font-size:16px;line-height:1.55;color:var(--ps-sec);margin:0 0 24px;
  max-width:78ch}
.svc-group.is-next{margin-top:48px}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;
  align-items:stretch}

/* ---------- the card ---------- */
.svc{display:flex;flex-direction:column;background:var(--white);
  border:2px solid var(--card-line);border-radius:14px;overflow:hidden;
  box-shadow:0 4px 16px rgba(13,27,42,.05)}
.svc-img{width:100%;height:auto;aspect-ratio:2.2;max-height:280px;object-fit:cover;
  display:block}
.svc-body{display:flex;flex-direction:column;flex:1;padding:24px}
.svc-fmt{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ps-sec);margin:0 0 8px}
.svc-name{font-size:clamp(23px,2.2vw,27px);line-height:1.12;margin:0 0 12px}
.svc-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;margin:0}
.svc-price b{font-family:var(--body);font-size:36px;font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.svc-price span{font-size:15px;font-weight:600;color:var(--ps-sec)}
.svc-once{font-size:14px;color:var(--ps-sec);margin:.35rem 0 0}
.svc-desc{font-size:16.5px;line-height:1.58;color:var(--ps-sec);margin:16px 0 0}
.svc-incl{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;
  gap:.5rem}
.svc-incl li{position:relative;padding-left:1.5rem;font-size:15.5px;line-height:1.5;
  color:var(--navy)}
.svc-incl li::before{content:'';position:absolute;left:.1rem;top:.34em;width:7px;height:12px;
  border-right:2.2px solid var(--orange-ink);border-bottom:2.2px solid var(--orange-ink);
  transform:rotate(40deg)}
/* The action and what follows it sit together at the foot of the card, so
   the buttons line up across a row whatever length the copy above runs to. */
.svc-act{margin-top:auto;padding-top:22px}
.svc-after{margin:16px 0 0;background:var(--ps-quiet);border-radius:8px;padding:16px}
.svc-after-h{font-family:var(--body);font-size:13px;font-weight:600;color:var(--navy);
  margin:0 0 .3rem}
.svc-after p{font-size:14.5px;line-height:1.55;color:var(--ps-sec);margin:0}

/* ---------- the purchase button ---------- */
.btn-buy{width:100%;min-height:50px;border-radius:8px;background:var(--orange);
  color:var(--navy);border-color:var(--orange);font-size:13px}
.btn-buy:hover{background:#dd6d16;border-color:#dd6d16}
/* Not connected yet, and it says so rather than looking like it works. */
.btn-buy.is-pending{background:transparent;color:var(--navy);border-style:dashed;
  border-color:var(--navy);opacity:1;cursor:not-allowed}
.btn-buy.is-pending:hover{background:transparent;color:var(--navy);border-color:var(--navy)}

@media(max-width:1000px){
  .svc-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  /* Text first, then the photograph, then the services. */
  .ps-split{grid-template-columns:1fr;gap:22px}
  .ps-head{padding:28px 0 32px}
  .ps-h1{font-size:36px}
  .ps-tag{font-size:24px;margin-top:10px}
  .ps-lede{font-size:16px;margin-top:14px}
  .ps-meta{font-size:14px;margin-top:16px}
  .ps-media img{aspect-ratio:auto;height:210px;max-height:210px;min-height:0}
  .ps-services{padding-top:32px;padding-bottom:44px}
  .svc-group-h{font-size:22px}
  .svc-group.is-next{margin-top:36px}
  .svc-body{padding:20px}
  .svc-price b{font-size:32px}
}

/* ---------- 1 on 1: the two cards in a row line up row for row ----------
   The purchase button has to sit at the same height in both cards of a pair,
   and so does the panel under it, whatever length the copy above them runs
   to. Three nested subgrids do that from the real content rather than from a
   fixed card height, which would either clip the longer card or leave a hole
   in the shorter one. Where subgrid is unavailable the cards fall back to
   their natural flow, which is what they did before. */
@supports (grid-template-rows: subgrid) {
  .svc-grid{grid-template-rows:repeat(9,auto)}
  /* A subgrid inherits its parent's gap, so without this the 28px between
     cards would reappear eight times down the inside of every card. */
  .svc-grid .svc{display:grid;grid-row:span 9;grid-template-rows:subgrid;row-gap:0}
  .svc-grid .svc-body{display:grid;grid-row:span 8;grid-template-rows:subgrid;
    row-gap:0;align-content:start}
  .svc-grid .svc-act{display:grid;grid-row:span 2;grid-template-rows:subgrid;
    row-gap:0;align-content:end}
}

/* ======================================================================
   HOMEPAGE, rebuilt (owner brief, 6 Oct 2026)
   Proof before promise in the hero, and a second way into the coaching:
   by the situation you are in, not only by your age.
   ====================================================================== */

/* The credentials now lead, so they sit above the headline rather than
   under a paragraph that no longer exists. */
.hero-creds.is-lead{margin:0 0 1.4rem;padding-top:0;border-top:0}
@media(max-width:900px){.hero-creds.is-lead{margin-bottom:1.1rem}}

/* The hero's one line of fine print qualifies the button above it. */
.hero .hero-aud{margin-top:1.1rem!important}

/* ---------- the goal axis ---------- */
.goals{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--border)}
.goals-h{font-family:var(--body);font-size:19px;font-weight:600;line-height:1.3;
  color:var(--navy);margin:0 0 1rem}
.goal-list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
/* The package always sits on its own line, so a short goal and a long one
   read the same way down the column. */
.goal-list a{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  background:var(--white);border:2px solid var(--card-line);border-radius:10px;
  padding:.95rem 1.1rem;text-decoration:none!important;
  box-shadow:var(--card-shadow);transition:border-color .18s,box-shadow .18s}
.goal-list a:hover{border-color:var(--orange);
  box-shadow:0 6px 18px rgba(13,27,42,.08)}
.goal-said{font-size:16.5px;line-height:1.45;color:var(--navy);font-weight:600}
.goal-rec{font-size:14px;line-height:1.4;color:var(--muted);white-space:nowrap}
.goal-rec::before{content:'\2192';margin-right:.35rem;color:var(--orange-ink);
  font-weight:700}
@media(max-width:820px){
  .goal-list{grid-template-columns:1fr}
  .goals{margin-top:1.9rem;padding-top:1.5rem}
}

/* ======================================================================
   FREE JVLN ASSESSMENT, rebuilt (owner brief, 6 Oct 2026)
   The page around the assessment. The assessment itself is untouched.
   ====================================================================== */
.as-head{padding:40px 0 48px}
.as-split{align-items:center;gap:40px}
.as-lede{font-size:18px;line-height:1.6;color:var(--muted);margin:16px 0 0;max-width:52ch}
.as-fine{margin:1.1rem 0 0;font-size:14.5px;color:var(--muted)}
.as-media img{width:100%;aspect-ratio:4/3;max-height:340px;object-fit:cover;
  object-position:50% 42%;border-radius:14px;display:block}
@media(min-width:901px){.as-media img{min-height:300px}}
@media(max-width:900px){
  .as-head{padding:28px 0 32px}
  .as-split{gap:22px}
  .as-lede{font-size:16px}
  /* Owner, 8 Oct 2026: this cut the athlete's head off on a phone. The box
     was 350x200, a 1.75:1 window on a 4:3 photograph, so 24% of the frame's
     height was discarded and she stands near the top of it. No
     object-position fixes that: at 0% the top of her head is already on the
     edge. The box takes the photograph's own shape here instead, so nothing
     is cropped at all. It costs 62px of height and is worth it. */
  .as-media img{aspect-ratio:4/3;height:auto;max-height:none;min-height:0}
}

/* ---------- what you get back: the result, shown rather than described ----
   The page used to spend forty-eight words describing the profile and show
   none of it. Nobody spends three minutes on a questionnaire whose ending
   they cannot picture. Every number in here is invented and the panel says
   so, twice. */
.pv-sec{padding-top:56px;padding-bottom:56px}
.pv-wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:center;
  margin-top:28px}
.pv-card{background:var(--white);border:2px solid var(--card-line);border-radius:14px;
  box-shadow:0 4px 16px rgba(13,27,42,.05);padding:26px}
.pv-tag{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.pv-score{display:flex;align-items:baseline;gap:.5rem;margin:0 0 1.2rem}
.pv-score b{font-family:var(--body);font-size:44px;font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--orange-ink);font-variant-numeric:tabular-nums}
.pv-score span{font-size:15px;font-weight:600;color:var(--muted)}
.pv-bars{display:flex;flex-direction:column;gap:.5rem}
.pv-bar{display:grid;grid-template-columns:150px 1fr 40px;align-items:center;gap:.8rem}
.pv-l{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--navy);line-height:1.2}
.pv-t{height:10px;background:var(--border);border-radius:5px;overflow:hidden}
.pv-t i{display:block;height:100%;background:var(--orange)}
.pv-bar.is-low .pv-t i{background:var(--orange-ink)}
.pv-n{font-family:var(--display);font-weight:700;font-size:13px;color:var(--muted);
  text-align:right}
.pv-focus{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.pv-focus-h,.pv-rec-h{font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink);margin:0 0 .35rem}
.pv-focus p:last-child{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0}
.pv-rec{margin-top:1.1rem;background:var(--navy);border-radius:10px;padding:14px 16px}
.pv-rec .pv-rec-h{color:var(--orange-lift)}
.pv-rec-n{font-family:var(--display);font-weight:700;font-size:19px;color:var(--white);
  margin:0}
.pv-side-h{font-family:var(--body);font-size:19px;font-weight:600;line-height:1.3;
  color:var(--navy);margin:0 0 .8rem}
.pv-side p{font-size:16.5px;line-height:1.6;color:var(--muted)}
@media(max-width:900px){
  .pv-sec{padding-top:40px;padding-bottom:40px}
  .pv-wrap{grid-template-columns:1fr;gap:24px}
  .pv-card{padding:20px}
  .pv-bar{grid-template-columns:118px 1fr 36px;gap:.55rem}
  .pv-l{font-size:11px}
  .pv-score b{font-size:38px}
}

/* ---------- the reward, as an object rather than a sentence ---------- */
.reward-card{display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;background:var(--navy);border-radius:14px;padding:24px 28px;
  margin:0 0 2.6rem}
.reward-tag{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-lift);margin:0 0 .4rem}
.reward-h{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.3vw,26px);
  line-height:1.15;color:var(--white);margin:0 0 .5rem}
.reward-s{font-size:15.5px;line-height:1.55;color:var(--on-dark-muted);margin:0;
  max-width:58ch}
.reward-val{display:flex;align-items:baseline;gap:.6rem;margin:0;flex:0 0 auto}
.reward-val s{font-family:var(--body);font-size:22px;font-weight:600;
  color:var(--on-dark-muted);text-decoration-thickness:2px}
.reward-val b{font-family:var(--body);font-size:34px;font-weight:600;letter-spacing:-.01em;
  color:var(--orange-lift);line-height:1}
@media(max-width:620px){
  .reward-card{padding:20px;gap:16px}
  .reward-val b{font-size:30px}
}

/* ---------- four steps, four across ----------
   They were in the three-column grid, so the fourth orphaned onto a row of
   its own and left a hole beside it. */
.steps4{grid-template-columns:repeat(4,1fr);gap:1.6rem}
@media(max-width:1060px){.steps4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps4{grid-template-columns:1fr}}
.steps4 .step-n{color:var(--orange)}

/* ======================================================================
   PACKAGE PAGES (owner screenshots, 6 Oct 2026)
   The four heroes carried the price and the two purchase buttons twice,
   one block above the other, and the photograph beside them stopped a
   long way short of the bottom of the column. One purchase block now,
   and the photograph fills the height it is given.
   ====================================================================== */
.pkg-head .wrap.split{align-items:stretch}
.pkg-head .media{align-self:stretch;max-height:560px;min-height:320px}
.pkg-head .media img{width:100%;height:100%;object-fit:cover;display:block}
.pkg-head .price-sub{margin-bottom:1.1rem}
/* The notice that says checkout is not connected belongs with the buttons
   it explains, not adrift further down the page. */
.pkg-head .svc-notice{margin:.9rem 0 0;max-width:420px}
@media(max-width:900px){
  .pkg-head .media{max-height:340px;min-height:0}
}

/* The live-session card sits beside a section heading that already asks the
   question, so the card starts at its first sentence. Without its heading it
   needs its own top padding back. */
.live-first .card{justify-content:center}

/* The closing band: the purchase column centred on its own, with Explore All
   Coaching underneath as the quieter choice, instead of a tall stack of
   buttons sitting next to a tall empty outlined box. */
.pkg-close{max-width:760px;text-align:center}
/* _buy() returns three siblings, so a plain flex row put the price, the
   saving and the buttons next to each other. It is a centred column. */
.pkg-close-buy{display:flex;flex-direction:column;align-items:center;
  margin-top:1.4rem}
.pkg-close-buy .mini-price{justify-content:center}
.pkg-close-buy .mini-alt{align-items:center;text-align:center;margin-bottom:0}
.pkg-close-buy .buybtns{width:100%;max-width:340px;margin-top:1.1rem;text-align:center}
.pkg-close-alt{margin-top:1.1rem}

/* The privacy page lists what each form collects. It reuses the comparison
   table, which centres its cells because those hold short figures. These
   cells hold sentences, so they read left-aligned, and the first column is
   the label rather than a value. */
.terms table.cmp td,.terms table.cmp th{text-align:left}
.terms table.cmp{margin-top:.9rem}
.terms table.cmp td:first-child{font-weight:600;color:var(--navy);width:38%}

/* Back to my assessment results.
   Ships hidden on every page; js/site.js reveals it only when this tab can
   rebuild a profile (owner, 8 Oct 2026). A quiet strip under the header
   rather than a floating chip: it is a way back, not an offer, and it must
   not compete with the corner prompt or sit over the content. */
/* Owner, 8 Oct 2026. Two things were wrong with the first version.
   It was navy, and on the homepage it sat directly above a navy hero, so it
   read as a link floating in the hero rather than as a bar. And
   `main a:not(.btn):not(.card-link)` is a more specific selector than
   `.res-back a`, so the link took the site's mid-blue, #0A4C7A on navy, which
   is both ugly and below AA. It is a light strip now, which separates from the
   navy hero and sits correctly on the warm and white sections everywhere else,
   and the colour rule is specific enough to hold. */
.res-back{background:var(--warm);border-bottom:1px solid var(--border)}
.res-back .wrap{padding:.55rem 24px;max-width:1180px}
main .res-back a:not(.btn){color:var(--navy);font-weight:600;font-size:.92rem;
  text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.res-back a::before{content:"\2190";font-size:1.05em;line-height:1;color:var(--orange-ink)}
main .res-back a:not(.btn):hover,main .res-back a:not(.btn):focus-visible{text-decoration:underline}
.res-back a:focus-visible{outline:2px solid var(--orange-ink);outline-offset:3px}
@media (max-width:640px){
  .res-back .wrap{padding:.45rem 16px}
  .res-back a{font-size:.86rem}
}

/* The metric form of a distance, under the figure (owner, 8 Oct 2026).
   Feet stay the headline because that is what a US athlete reads; metres sit
   below because that is what every record book and international result uses.
   Quieter than the figure, louder than the caption. */
.stat-strip .fig-alt{display:block;margin-top:.18rem;font-family:var(--body);
  font-size:15px;font-weight:600;color:var(--navy);letter-spacing:.01em}
.sec-navy .stat-strip .fig-alt{color:#fff}

/* ==========================================================================
   PHONES: hierarchy and density
   Owner brief, 8 Oct 2026, after outside review. The report was that the site
   "looks really big and clunky" on mobile and much better on a laptop, and
   that the eye did not know what to read first.

   Measured at 390px before this block:
     .hero h1          32px, wrapping to FIVE lines, 173px tall
     .hero-creds .num  32px  <- identical to the headline
     body / .lede      17px / 17px
     the hero          801px tall inside an 844px viewport
     the homepage      7,929px, 9.4 phone screens

   The cause was not font size in general, it was that the credential numerals
   and the headline are the same size on a phone. On a laptop the headline
   scales up with the viewport and the numerals do not, so a hierarchy exists;
   below the breakpoint it collapses and the bright orange "3x" wins.

   Owner, 8 Oct 2026: keep the credentials leading, which was the decision of
   6 Oct. They are made quieter rather than moved, so the order is unchanged
   on every screen and only the weight differs.

   Nothing above 600px is touched by any rule in this block.
   ========================================================================== */
@media (max-width:600px){

  /* 1. The credentials read as a credential line, not a second headline. */
  .hero-creds .num{font-size:22px}
  .hero-creds .lbl b{font-size:12px}
  .hero-creds .lbl{font-size:13px}
  .hero-creds{gap:.7rem 1.4rem;margin-bottom:1rem}
  .hero-creds li{gap:.6rem}

  /* 2. The headline lands in four lines rather than five, so it reads as one
        sentence. max-width goes with it: 17ch is a laptop measure, and on a
        phone it was forcing an early break. */
  .hero h1{font-size:27px;line-height:1.14;max-width:none;margin-bottom:.6em}

  /* 3. Running text. 17px is a comfortable laptop size and a large phone one:
        it is what made short sentences take three lines. */
  body{font-size:16px}
  /* .sec-tag + .lede at line ~1203 is a two-class selector and beats a bare
     .lede, so the override has to match it or the lede stays at 18px. */
  .lede,
  .sec-tag + .lede,.sec-tag + * > .lede,.sec-tag ~ p.lede{font-size:16.5px;line-height:1.55}
  /* The section subheading sits between the 30px heading above it and the
     16.5px lede below. 22px was too close to the heading and made every
     section open with two near-identical lines (8 Oct 2026). The band in
     test/headings.js moved with it, so this is still a contract and not a
     loosened one. */
  /* .claim-head .sec-tag at line ~1519 is a two-class selector and would
     otherwise keep that one page at 22px while every other page moved. */
  .sec-tag,.claim-head .sec-tag{font-size:20px}

  /* The heading apparatus. Measured on 8 Oct 2026, a section spent 210px, a
     quarter of the phone screen, on heading + subheading + lede before any
     content appeared, and a page has five or six sections. The type comes
     down and the gaps between the three close up. The cards and photographs
     were measured too and left alone: a path card is 548px with the image at
     47% of it, which is the right proportion for a card you read on a phone. */
  main h2.sec-h{font-size:26px;line-height:1.15;margin-bottom:8px}
  main .sec-tag{margin-bottom:10px}
  main .lede{margin-bottom:14px}
  .note-line,.card li{font-size:15px}

  /* 4. Vertical rhythm. Roughly a screen of scrolling comes back, without
        crowding anything: 40px of air above and below a section is still
        generous at this width. */
  section{padding:40px 0}
  .hero-copy{padding:28px var(--gutter) 32px}
}

/* Form controls stay at 16px at every width. Below 16px iOS Safari zooms the
   page when an input takes focus, which throws the layout sideways mid-form. */
@media (max-width:600px){
  .field input,.field select,.field textarea{font-size:16px}
}

/* ==========================================================================
   TOUCH: buttons must not keep a hover state after a tap
   Owner, 8 Oct 2026, from Sam's review of Explore All Coaching on a phone.
   He sent a screenshot where one "Buy One Month" was solid navy and the one
   below it was outlined, and read the two as different things.

   Nothing was wrong with the markup. iOS applies :hover on tap and leaves it
   applied until something else is tapped, so a button he had touched stayed
   in its hover state while its twin did not. Side by side they looked like
   two different kinds of button, which is exactly the confusion reported.

   Every button hover style is now behind (hover:hover), so it applies on a
   device with a real pointer and never on a touch screen. :active still
   gives touch users immediate feedback on press, and :focus-visible still
   shows keyboard focus, so nothing is lost.
   ========================================================================== */
@media (hover:none){
  .btn-primary:hover{background:var(--orange);border-color:var(--orange)}
  .btn-outline:hover{background:transparent;color:var(--navy)}
  .sec-navy .btn-outline:hover,.hero .btn-outline:hover,.prompt .btn-outline:hover{
    background:transparent;color:var(--white)}
  .btn-secondary:hover{background:transparent;color:var(--navy)}
  .sec-navy .btn-secondary:hover{background:transparent;color:var(--white)}
  .hero .btn-secondary:hover,.prompt .btn-secondary:hover,
  .site-footer .btn-secondary:hover{background:transparent;color:var(--white)}
  .btn-buy:hover{background:var(--orange);border-color:var(--orange)}
}

/* ==========================================================================
   The two-package comparison on a phone: keep the columns labelled
   Also from Sam's review. Scrolled into the table, the package names had
   scrolled away with the <thead>, leaving two unlabelled columns of ticks
   and no way to tell which was which.

   The head sticks under the site header instead. The names stay on screen
   for as long as there are rows to read, which is the only thing that makes
   a comparison table readable on a narrow screen.
   ========================================================================== */
@media (max-width:860px){
  /* .cmp carries overflow:hidden so its rounded corners clip the first and
     last rows. Any overflow other than visible on an ancestor silently
     disables position:sticky on everything inside it, which is why the first
     attempt at this did nothing at all. The radius is applied to the corner
     cells instead, so the card still looks like a card and the header can
     stick. */
  .cmp2-table{overflow:visible}
  .cmp2-table thead tr:first-child th:first-child{border-top-left-radius:var(--radius-card)}
  .cmp2-table thead tr:first-child th:last-child{border-top-right-radius:var(--radius-card)}
  .cmp2-table tbody tr:last-child th:first-child{border-bottom-left-radius:var(--radius-card)}
  .cmp2-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-card)}

  /* The site header is 90px tall at this width, so the column names sit
     directly under it rather than behind it. */
  .cmp2-table thead th{
    position:sticky;top:90px;z-index:5;background:var(--white);
    box-shadow:0 1px 0 var(--card-line)}
}

/* The loop appends a second copy of every story so the rotation can carry on
   past the last one without rewinding. When the whole collection already fits
   on screen there is nothing to rotate, so the copies come out of the layout:
   nine cards followed by nine identical copies is not a carousel (8 Oct 2026).
   js/site.js adds .tmr-static when it measures that they fit. */
.tmr-static .tm-card[data-tmr-clone]{display:none}