/* Marketing site stylesheet.

   Lifted verbatim out of the inline <style> block in index.html. It was 432
   lines repeated in the HTML of every page that looks like the site, which meant
   a colour or a spacing fix had to be made in each of them and drifted between
   them. Same reasoning as app/hub.css: no build step here, so a plain stylesheet
   is the only way to have it exist once.

   The palette is gone from the top of this file. It lives in /tokens.css now,
   which every surface links, so the site, the athlete app and the coach hub
   cannot disagree about what --red is.

   Versioned in the link, the same as dq-core.js and hub.css, because Cloudflare
   serves assets with a long max-age and a new layout against an old stylesheet
   looks broken rather than stale. */

  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth}
  body{background:var(--ink); color:var(--bone); font-family:'Barlow',system-ui,sans-serif;
    line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
  ::selection{background:var(--red); color:var(--white)}
  a{color:inherit; text-decoration:none}
  /* 1400, was 1140. DQ, 29 August 2026: "use the full width of the browser when
     it's 100%, because right now we're asking people to scroll when it could,
     in fact, render."

     MEASURED ON HIS OWN WINDOW SIZE, about 1500 css px: 1140 left 180px of dead
     ground each side, and the screenshot rail showed one and a half pictures
     when it had room for two. Reading columns are unaffected because every
     block of prose here already carries its own max-width in ch. */
  .wrap{max-width:1400px; margin:0 auto; padding:0 clamp(20px,5vw,48px)}

  /* faint vertical measure lines, a "platform" motif, not a gradient wash */
  /* Intentionally in three places: site.css, tool.css and guides/guide.css each
     carry this rule and they must stay identical. There is no shared stylesheet
     that all three reach except tokens.css, and tokens.css says in its own header
     that it holds no component or layout rules, which this is. A fourth file for
     one pseudo-element would be worse than a duplicate with a note on it.
     If you change it here, change it in the other two. */
  body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:clamp(60px,9vw,110px) 100%; background-position:center; opacity:.5;
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
            mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent)}
  /* What sits ABOVE the lines. The pseudo-element is fixed at z-index:0, so
     anything not lifted here is painted over rather than behind, and this list
     was a different set of elements in each of the three files. The breadcrumb
     was in none of them: it is a bare <div class="wrap"> between the topbar and
     the hero, so on fourteen pages the motif was drawn on top of it. Faint, but
     it is the one place on the site where the texture was in front of the words. */
  header,section,nav,footer,.crumb{position:relative; z-index:1}

  /* ===== NAV ===== */
  .topbar{position:sticky; top:0; z-index:60; background:rgba(12,12,14,.8); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line)}
  .topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
  .logo{display:flex; align-items:center; gap:12px}
  .logo .mark{width:40px; height:40px; background:linear-gradient(145deg,var(--red-hot),var(--red-deep)); display:grid; place-items:center;
    clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
  .logo .mark span{font-family:'Oswald'; font-weight:700; font-size:19px; color:#fff; letter-spacing:.02em}
  .logo b{font-family:'Oswald'; font-weight:600; letter-spacing:.06em; font-size:17px; text-transform:uppercase; line-height:1}
  .logo small{display:block; font-family:'JetBrains Mono'; font-size:8px; color:var(--grey); letter-spacing:.22em; margin-top:6px; line-height:1}
  .nav-r{display:flex; align-items:center; gap:4px}
  .nav-r a.link{font-family:'JetBrains Mono'; font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--grey); padding:9px 13px}
  .nav-r a.link:hover{color:var(--white)}
  /* Skip link. Every page starts with a logo and five nav links, so without
     this a keyboard or screen reader user tabs through the whole header on
     every single page before reaching anything they came for. Positioned off
     screen rather than display:none, because display:none also removes it from
     the tab order. */
  .skip{position:absolute; left:-9999px; top:0; z-index:100;
    background:var(--red); color:#fff; padding:14px 20px; min-height:44px;
    font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
    letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
  .skip:focus{left:0}
  /* BIGGER, DQ 29 August: "make the CTAs bigger." 12px in 12x20 of padding is
     a link wearing a border; every other piece of type on the page went up in
     the same round and these did not. 14px in 15x26 puts every button on the
     site over 44px tall, which is also the tap target this repo holds to. */
  .btn{font-family:'Oswald'; font-weight:600; font-size:14px; letter-spacing:.09em; text-transform:uppercase;
    padding:15px 26px; cursor:pointer; border:1px solid transparent; display:inline-block; transition:.16s}
  .btn-red{background:var(--red); color:#fff}
  .btn-red:hover{background:var(--red-hot)}
  .btn-ghost{border-color:var(--line-red-soft); color:var(--bone)}
  .btn-ghost:hover{border-color:var(--red); color:#fff; background:rgba(192,57,43,.08)}
  /* THE TWO LOGINS SWAPPED ON 27 AUGUST 2026, DQ'S CALL, AND THE OLD REASONING
     IS KEPT BECAUSE IT WAS RIGHT ABOUT A SITE THAT NO LONGER EXISTS.

     It read: red is become a customer, white is you already are one, so Athlete
     Login is solid white and red belongs to Work with DQ. That was written when
     this site sold coaching to athletes and the athlete was the customer.

     The reposition made the COACH the customer. So the colour that means "this
     is the person we are here for" has to move with them, and DQ asked for the
     coach button to match the red submit on /coach/login rather than sit in the
     white the athlete used to hold. Athlete login takes the white, which is
     where it started before it was ever a button at all.

     Both are .btn now. The athlete was a bare text link and the coach a white
     button, which read as one route and one afterthought rather than as two
     doors into two products. */
  .btn-white{background:#fff; color:#0C0C0E; border-color:#fff}

  .btn-white:hover{background:var(--bone); color:#0C0C0E}
  #navAuth{display:inline-flex; align-items:center; gap:9px}
  #navAuth .who{font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--gold); white-space:nowrap}
  @media(max-width:640px){#navAuth .who{display:none}}
  /* Below 640 the links are already hidden and the sticky enquire bar takes
     over, so a second button here would just crowd the logo. */
  @media(max-width:640px){.nav-r a.link{display:none} .nav-cta{display:none}}

  /* THE NAV WRAPS TO A SECOND ROW BETWEEN 641 AND 1160. DQ's call, 27 August
     2026, and it REVERSES the answer he gave an hour earlier, which was to let
     the compact phone header take over across that band.

     WHY HE CHANGED IT, because the reason is the useful part. The first option
     was described to him as "the compact header takes over" and "nothing about
     the phone header changes". Both sentences were true and neither said that
     five navigation links and the athlete login VANISH on a laptop. Rendered at
     1146 it is the logo, one red button, and nothing between. He picked the
     wrap the moment he saw the picture, having declined it an hour before
     against a rival that looked free.

     WHAT WAS BROKEN. .nav-r is 968px wide with its right edge pinned whatever
     the viewport does, so between the phone header and full desktop the bar
     neither shrank nor wrapped, it pushed the DOCUMENT wider. Binary-searched
     rather than sampled: last width that overflows 1152, first clean 1153. At
     700px, 434px of the page sat off-screen, nearly two thirds of the viewport.
     A sweep had reported it as starting at 1146, off two samples with nothing
     between them, and a breakpoint there would have left 1147 to 1152 still
     broken.

     THE SPLIT IS FIXED RATHER THAN LEFT TO THE FLEX. Letting .nav-r wrap inside
     itself puts the break wherever the arithmetic lands, so it moves with the
     viewport and 1160 and 700 become two different layouts. Row one is the logo
     and the two doors, row two is the navigation, at every width in the band.
     That is why #navAuth was lifted out of .nav-r in the markup: they are
     siblings now, so `order` can place them on separate rows.

     THE MEASUREMENTS IT IS BUILT ON, taken at 1440 rather than estimated.

         logo             133px
         the two buttons  268px
         seven links      639px at the desktop padding of 13px

     Row one needs about 420px and fits the whole band with room. Row two at 639
     does NOT fit 641px minus the page gutter, which is about 600, so the links
     would have taken a THIRD row at the bottom of the band. Trimming their
     horizontal padding to 8px inside the band only takes them to about 569 and
     holds two rows throughout. Above 1160 and below 641 the padding is
     untouched, so this is not the "shrink the nav" option DQ declined: it is
     ten pixels a link, inside the band, so that the second row he asked for
     does not quietly become a third. */
  @media(min-width:641px) and (max-width:1160px){
    .topbar .wrap{flex-wrap:wrap; height:auto; padding-top:11px; padding-bottom:11px; row-gap:2px}
    #navAuth{order:2}
    .nav-r{order:3; width:100%; justify-content:flex-start; margin-left:-8px}
    .nav-r a.link{padding:9px 8px}
  }

  /* ===== HERO (asymmetric) ===== */
  .hero{padding:clamp(44px,7vw,88px) 0 clamp(36px,5vw,60px)}
  .hero-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(28px,5vw,64px); align-items:end}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr; align-items:start}}
  /* BIGGER AND LESS TRACKED. DQ: "this is difficult to read."
     11px at .3em tracking is about as hard as uppercase mono gets, and this
     line is the ONLY place at the top of the page that says what the product
     is, so it was the least legible sentence on the surface carrying the most
     load. 13.5px at .16em, and 500 weight rather than 400. */
  .eyebrow{font-family:'JetBrains Mono'; font-weight:500; font-size:13.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--red-hot);
    display:flex; align-items:center; gap:12px; margin-bottom:24px}
  .eyebrow::before{content:""; width:30px; height:2px; background:var(--red); flex:none}
  /* keep "UK-wide" from breaking at its own hyphen on a narrow phone */
  .nb{white-space:nowrap}
  .hero h1{font-family:'Oswald'; font-weight:700; text-transform:uppercase; line-height:.9;
    font-size:clamp(52px,10vw,120px); letter-spacing:.003em; margin-bottom:22px}
  .hero h1 .stroke{color:var(--red-hot); display:inline-block}
  .hero p.lead{font-size:clamp(16px,2.1vw,20px); color:var(--bone); max-width:46ch; margin-bottom:30px}
  .hero .cta-row{display:flex; gap:12px; flex-wrap:wrap}
  .hero .btn{padding:15px 28px; font-size:13px}
  /* Right hand hero column. Bottom aligned so the block sits level with the
     call to action on the left. */
  .hero-right{display:flex; flex-direction:column; gap:14px; justify-content:flex-end}
  /* One big gold block rather than a bordered panel with a small caption. DQ
     asked for the free tools to read as a button, with the guides sitting
     directly under it as the second door. */
  .freebox{display:block; border:1px solid rgba(255,210,31,.75); background:rgba(255,255,255,.035);
    padding:18px 20px; margin-bottom:12px; transition:.2s}
  .freebox:hover{border-color:var(--gold); background:rgba(255,255,255,.06)}
  .freebox b{display:block; font-family:'Oswald'; font-weight:600; text-transform:uppercase;
    letter-spacing:.04em; font-size:22px; color:var(--gold); line-height:1}
  .freebox span{display:block; margin-top:7px; font-size:12.5px; color:#A7A4A0; line-height:1.5}
  /* Separate box, in the site's own red rather than gold, so the two read as
     two doors instead of one long panel. */
  .guidebox{display:block; border:1px solid var(--line-red-soft); padding:18px 20px;
    background:linear-gradient(180deg,rgba(192,57,43,.08),rgba(192,57,43,.02)); transition:.18s}
  .guidebox:hover{border-color:var(--red); background:rgba(192,57,43,.14)}
  .guidebox b{display:block; font-family:'Oswald'; font-weight:600; text-transform:uppercase;
    letter-spacing:.05em; font-size:22px; line-height:1; color:var(--bone)}
  .guidebox:hover b{color:var(--red-hot)}
  .guidebox span{display:block; margin-top:7px; font-size:12.5px; color:#A7A4A0; line-height:1.5}
  /* Below the hero split this stacks under the headline, which is where it
     should be on a phone anyway. */
  @media(max-width:900px){.hero-right{gap:16px}}

  /* ===== SECTION SHELL ===== */
  section{padding:clamp(42px,6vw,80px) 0; border-top:1px solid var(--line)}
  /* the topbar is sticky and 68px tall, so an anchor jump used to land with the
     section eyebrow sliced in half. Every jump target clears it. */
  section,header{scroll-margin-top:84px}
  /* THE SECTION LABEL IS A RULED CELL, the same one the attempt card puts its
     numeral in. It was a red stub dash followed by wide mono caps, which is the
     most common section device in SaaS marketing and one of the three things
     that made this page read as templated.

     IT JOINS A FAMILY RATHER THAN STARTING ONE. The attempt card, the tier
     cards and the shared licence list are all hairline boxes already, so this
     is the page's existing grammar applied to the one element that was still
     borrowing somebody else's.

     AND IT IS A SMALL DECISION, said here so nobody reopens it. A section label
     is the least-read element on the page and no coach has ever bought software
     because of one. It was chosen for CONSISTENCY with the card, not on merit
     against the alternative, and the alternative was a full-measure rule that
     read as an absence against this ground rather than as a device.

     Tracking drops from .28em to .14em because a boxed label does not need the
     air a bare one does, and .14em is the label value in this file's five-value
     scale rather than a sixth number. */
  /* RED ONCE PER SCREEN, 28 August 2026. Measured before it was changed: this
     page carried 18 red text elements doing five different jobs, so red was the
     eyebrow, the headline emphasis, the panel label, the result figure, the
     section label AND the step number. A colour used on everything signals
     nothing, and the one figure on the page a coach is meant to read, the
     percentile in the hero, was competing with five labels for it.

     The BOX stays exactly as it was and only the ink in it moves, because the
     box is what makes the label read as an absence against this ground rather
     than as a device, and that reasoning is unchanged. */
  .sec-eyebrow{font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--grey); margin-bottom:16px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line); padding:6px 12px}
  .sec-title{font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
    font-size:clamp(30px,5vw,54px); line-height:.98; margin-bottom:18px}

  /* Reveal on scroll. Gated on html.js, which the inline script in the head sets.
     It used to be an unconditional opacity:0, so if the observer script failed, was
     blocked, or threw before it ran, everything below the hero was invisible and the
     page looked empty rather than un-animated. */
  html.js .rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
  html.js .rv.in{opacity:1; transform:none}

  /* ===== ABOUT ===== */
  /* The heading spans both columns, so the photo and the timeline start on the
     same line without a magic top offset. The row stretches, and the timeline
     is a flex column spread over that height, so its red bar runs the full
     height of the photo rather than stopping two thirds of the way down. */
  .about-head{margin-bottom:26px}
  .about-grid{display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:clamp(28px,5vw,64px); align-items:stretch}
  @media(max-width:860px){.about-grid{grid-template-columns:1fr; align-items:start}}
  .lineage-col{display:flex}
  /* lineage timeline, real sequence, so numbering is earned */
  .lineage{border-left:1px solid var(--line-red-soft); padding-left:22px; display:flex; flex-direction:column;
    gap:18px; flex:1; justify-content:space-between}
  @media(max-width:860px){.lineage{flex:none; justify-content:flex-start}}
  .ln{position:relative}
  .ln::before{content:""; position:absolute; left:-29px; top:4px; width:9px; height:9px; background:var(--red); border-radius:50%; box-shadow:0 0 0 4px var(--ink)}
  .ln .yr{font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.14em; color:var(--red-hot); text-transform:uppercase}
  .ln h3{font-family:'Oswald'; font-weight:500; text-transform:uppercase; font-size:17px; letter-spacing:.02em; margin:4px 0 3px}
  .ln p{font-size:13px; color:var(--grey); max-width:42ch}
  .ln p a{color:var(--bone); border-bottom:1px solid var(--line-red-soft)}
  .ln p a:hover{color:var(--red-hot)}

  /* ===== CREDENTIALS, columns ===== */
  .cred-cols{display:grid; grid-template-columns:repeat(4,minmax(240px,1fr)); gap:12px; margin-top:52px;
    padding-top:44px; border-top:1px solid var(--line)}
  /* The swipe hint carries the divider whenever it is visible, and .cred-cols
     gives it up, so the line above this block is drawn exactly once at every
     width. Hidden by default rather than shown, because the grid only becomes a
     rail below 1100px and the hint would otherwise be pointing at four cards
     that are all already on screen.

     Written as .app-hint.cred-hint, not .cred-hint. `.app-hint{display:flex}`
     is declared further down this file, and against a single class it simply
     wins on order, so the hint drew at every width. Both halves are qualified
     for the same reason, including the one below that happened to work: it only
     worked because .app-hint's flex was what showed it, which is the right
     answer arrived at by accident. */
  .app-hint.cred-hint{display:none}
  /* Four cards do not fit at any sane column width, so below 1100 they become a
     rail that scrolls sideways rather than a grid that squeezes. */
  @media(max-width:1100px){
    .cred-cols{grid-auto-flow:column; grid-auto-columns:minmax(260px,80vw); grid-template-columns:none;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      padding-bottom:10px;
      margin-left:calc(clamp(20px,5vw,48px) * -1); margin-right:calc(clamp(20px,5vw,48px) * -1);
      padding-left:clamp(20px,5vw,48px); padding-right:clamp(20px,5vw,48px)}
    .cred-col{scroll-snap-align:start}
    .app-hint.cred-hint{display:flex; margin-top:52px; padding-top:44px; border-top:1px solid var(--line)}
    .cred-cols{margin-top:18px; padding-top:0; border-top:none}
  }
  .cred-col{position:relative; background:linear-gradient(180deg,var(--coal2),var(--coal)); border:1px solid var(--line); border-top:2px solid var(--red);
    padding:20px 20px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
  .cred-col:hover{transform:translateY(-4px); border-color:var(--line-red-soft); border-top-color:var(--red-hot); box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
  .cc-head{margin-bottom:14px}
  .cc-head h3{font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:21px; color:var(--gold)}
  .cc-head .body-tag{display:block; font-family:'JetBrains Mono'; font-size:9px; letter-spacing:.1em; color:var(--red-hot); margin-top:6px; text-transform:uppercase}
  .cc-intro{font-size:13px; color:var(--grey); line-height:1.5; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line)}
  .cc-list{list-style:none}
  .cc-list li{padding:9px 0 9px 20px; position:relative; border-bottom:1px solid rgba(255,255,255,.03)}
  .cc-list li:last-child{border-bottom:none}
  .cc-list li::before{content:""; position:absolute; left:0; top:15px; width:7px; height:7px; background:var(--red); transform:rotate(45deg); transition:background .2s}
  .cred-col:hover .cc-list li::before{background:var(--red-hot)}
  .cc-list li b{display:block; font-family:'Barlow'; font-weight:700; font-size:14.5px; color:var(--bone); line-height:1.3}
  .cc-list li span{display:block; font-size:12px; color:var(--grey); margin-top:3px; line-height:1.45}
  /* CPD entries are names with nothing under them, so they can sit tighter.
     The 20px left padding stays: that is the room the diamond marker needs. */
  .cc-cpd li{padding:7px 0 7px 20px}
  .cc-cpd li::before{top:13px}
  .cc-cpd b{font-weight:600; font-size:13.5px}

  /* ===== DISCIPLINES ===== */
  .disc-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media(max-width:760px){.disc-cards{grid-template-columns:1fr}}
  .dcard{position:relative; background:linear-gradient(180deg,var(--coal2),var(--coal)); border:1px solid var(--line); padding:26px;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; overflow:hidden}
  .dcard::after{content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
  .dcard:hover{transform:translateY(-4px); border-color:var(--line-red-soft); box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
  .dcard:hover::after{transform:scaleX(1)}
  .dcard .idx{font-family:'JetBrains Mono'; font-size:11px; color:var(--grey-d); letter-spacing:.1em}
  .dcard h3{font-family:'Oswald'; font-weight:600; text-transform:uppercase; font-size:21px; letter-spacing:.03em; margin:10px 0 12px}
  .dcard p{color:var(--grey); font-size:14px; line-height:1.55}
  .dcard{display:flex; flex-direction:column}
  .dcard .dmore{margin-top:auto; padding-top:16px; font-family:'JetBrains Mono'; font-size:10px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--red-hot)}
  .dcard:hover .dmore{color:var(--gold)}
  /* DQ wanted these to look like doors. The label now sits in a bordered
     block that fills on hover, the same shape as every other card link here. */
  .dcard .dmore{display:inline-flex;align-items:center;align-self:flex-start;margin-top:auto;
    border:1px solid rgba(255,210,31,.75);padding:10px 16px;min-height:44px;
    font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    transition:.18s}
  .dcard:hover .dmore{background:rgba(255,255,255,.06);border-color:var(--gold);color:var(--gold)}

  /* ===== ENQUIRY ===== */
  .enq-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,60px); align-items:start}
  @media(max-width:860px){.enq-grid{grid-template-columns:1fr}}
  .enq-left p{color:var(--grey); margin-bottom:20px; max-width:42ch}
  /* the form used to be the only way in. If Formspree is blocked or down, this is the fallback. */
  .enq-left .enq-alt{margin-top:20px; font-size:14px; color:var(--grey); max-width:42ch}
  .enq-left .enq-alt a{color:var(--bone); border-bottom:1px solid var(--line-red-soft)}
  .enq-left .enq-alt a:hover{color:var(--red-hot)}
  /* The inline form moved to /assessment. This is the card that points at it. */
  .assess-card{background:var(--coal); border:1px solid var(--line-red-soft); padding:28px}
  /* The short form is back as the way in. The assessment still exists at
     /assessment and is what DQ sends once somebody is actually interested, but
     asking for six sections before a first hello was a gate on an enquiry. */
  .enqform{display:grid; gap:13px}
  .enqform .row2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
  @media(max-width:520px){.enqform .row2{grid-template-columns:1fr}}
  .enqform label{display:block; font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--grey); margin-bottom:6px}
  .enqform input,.enqform select,.enqform textarea{width:100%; background:var(--ink);
    border:1px solid var(--line); color:var(--bone); padding:12px 14px;
    font-family:'Barlow',system-ui,sans-serif; font-size:16px}
  .enqform textarea{min-height:96px; resize:vertical}
  .enqform input:focus,.enqform select:focus,.enqform textarea:focus{outline:none;
    border-color:var(--red); box-shadow:0 0 0 3px rgba(192,57,43,.16)}
  .enqform .btn{padding:15px 28px; font-size:13px; justify-self:start}
  .enq-ok{display:none; border:1px solid var(--line-red-soft);
    background:linear-gradient(180deg,rgba(192,57,43,.08),rgba(192,57,43,.02)); padding:24px}
  .enq-ok.on{display:block}
  .enq-ok b{display:block; font-family:'Oswald'; font-weight:600; text-transform:uppercase;
    letter-spacing:.03em; font-size:21px; margin-bottom:10px}
  .enq-ok p{font-size:15px; line-height:1.7; color:var(--bone)}
  .enq-ok .nx{margin-top:16px; font-size:14px; color:#A7A4A0}
  .enq-ok .nxl{margin:12px 0 0; padding-left:0; list-style:none}
  .enq-ok .nxl li{font-size:14px; line-height:1.65; color:#A7A4A0; padding:10px 0 10px 18px;
    position:relative; border-top:1px solid var(--line)}
  .enq-ok .nxl li::before{content:""; position:absolute; left:0; top:17px; width:5px; height:5px;
    background:var(--red); transform:rotate(45deg)}
  .enq-ok .nxl a{color:var(--bone); text-decoration:underline; text-underline-offset:3px}
  .enq-ok .nxl a:hover{color:var(--red-hot)}
  .assess-card .ac-h{font-family:'Oswald'; font-weight:600; text-transform:uppercase;
    letter-spacing:.04em; font-size:20px; color:var(--bone); margin-bottom:12px}
  .assess-card .btn{width:100%; padding:16px; font-size:13px; text-align:center}
  form .btn{width:100%; padding:15px; font-size:13px; margin-top:4px}
  /* was --grey-d at 10px, which measured 2.68:1 and failed WCAG AA. This is the
     line that reassures someone with their finger over the submit button, so it
     has to be readable. --grey at 11px measures 5.69:1. */
  /* .form-ok is gone. index.html is the only page that links this file and its
     enquiry confirmation is .enq-ok, styled above, so these four rules had no
     element to match. The live .form-ok is an inline copy on /assessment,
     /privacy and /terms, which do not link site.css. Removed here rather than
     given a weight, because .form-ok .big was one of the five unweighted Oswald
     selectors this pass set out to fix and weighting a dead rule is a change
     that reads as one. */

  /* ===== FOOTER ===== */
  footer{border-top:1px solid var(--line); padding:40px 0 calc(40px + var(--safe-b))}
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
  footer .flink{color:var(--white); text-decoration:underline; text-underline-offset:3px;
    display:inline-block; padding:8px 2px}
  footer .flink:hover{color:var(--red-hot)}
  footer .discs{font-family:'Oswald'; font-weight:300; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red-hot); display:flex; gap:14px; flex-wrap:wrap}
  /* Under the 24px WCAG AA minimum as bare text, so each link gets its own
     padding rather than the row being made taller. */
  footer .discs a{display:inline-block; padding:8px 0}
  footer small{font-family:'JetBrains Mono'; font-size:11px; color:var(--grey-d)}

  @media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}html.js .rv{opacity:1;transform:none}}

  /* ===== coach portrait ===== */
  .portrait{position:relative; margin:0; max-width:420px; width:100%; align-self:start}
  .portrait picture{display:block}
  .portrait img{width:100%; height:auto; display:block; aspect-ratio:3/4; object-fit:cover; object-position:center 38%;
    clip-path:polygon(0 0,100% 0,100% 90%,90% 100%,0 100%);
    /* Graded in CSS rather than baked into the file. Re-encoding the 900 wide
       source came out at 206KB against the 98KB webp it would have replaced,
       which is a bad trade on the asset that matters most on a phone. The
       filter costs nothing to download. Slightly more contrast, a little
       saturation out of the loud bumper plates, and a touch of warmth so it
       sits with the near-black page rather than against it. */
    filter:contrast(1.09) saturate(0.88) brightness(0.99) sepia(0.06)}
  .portrait::after{content:""; position:absolute; left:0; bottom:0; width:46px; height:3px; background:var(--red)}
  @media(max-width:860px){.portrait{max-width:300px}}
  /* ===== how it works ===== */
  /* THE ATTEMPT CARD. DQ's pick, 27 August 2026, from three design options,
     with the risk stated in the one he chose: it is a POWERLIFTING artifact on
     a page that now sells to personal trainers, so it narrows the audience it
     signals to. Chosen rather than arrived at.

     WHAT IT REPLACED AND WHY THAT WAS THE RIGHT TARGET. Three detached boxes,
     each with a vertical gradient, a 2px red bar across the top, and STEP 01 in
     red mono. Numbered markers are the most common template device there is,
     and the numbering here is legitimate: assess, test, read IS an order and
     the reader needs it. The CONTENT was fine and the RENDERING was the default.

     So the order stays and the treatment comes from the sport. A meet attempt
     card is a printed form: hairline rules, no fills, no gradients, no rounded
     corners, and the attempt number in a ruled cell. Three columns divided by
     the rules rather than three floating cards, because on the card they are
     one document and the divisions are what make them read as a sequence.

     The word STEP is gone rather than restyled. The box and the order carry it,
     the heading under each one names what it is, and the numeral is
     aria-hidden so a screen reader gets the headings in DOM order instead of
     three bare numbers.

     NO LIGHTS. The three white-and-red referee lights are the other half of the
     card and they would be decoration here: nothing in these three steps passes
     or fails. Spending the device on the part that carries meaning and leaving
     the rest is the whole discipline. */
  .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    margin-top:26px; border:1px solid var(--line)}
  .step{padding:24px 22px 26px; position:relative; border-left:1px solid var(--line)}
  .step:first-child{border-left:0}
  /* auto-fit reflows to one column below the 230px minimum, and a left rule on
     a stacked column is a stray vertical tick. The rule has to move with the
     flow rather than be switched off, or the sequence loses its divisions. */
  @media(max-width:719px){
    .step{border-left:0; border-top:1px solid var(--line)}
    .step:first-child{border-top:0}
  }
  /* Grey, not red: see .sec-eyebrow. A step number is an ordinal and not a
     warning, and there are three of them on one screen. */
  .step .no{display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:26px; border:1px solid var(--line);
    font-family:'JetBrains Mono'; font-weight:500; font-size:12px;
    letter-spacing:.06em; color:var(--grey); margin-bottom:14px}
  .step h3{font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:17px; margin:10px 0 8px}
  .step p{font-size:14px; color:#A7A4A0; line-height:1.6}

  /* ===== the app band ===== */
  #theapp{background:linear-gradient(180deg,#08080A,#0C0C0E 40%,#08080A);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:74px 0 66px;overflow:hidden}
/* NO OVERRIDE. DQ, 29 August: the app section "is not as wide as the Coach Hub
     you run it from" section.

     THIS RULE WAS CORRECT AND MY OWN CHANGE MADE IT WRONG. It said 1180 when
     .wrap was 1140, so it made this one section 40px WIDER than the rest, which
     is presumably why it was written. .wrap went to 1400 in the same commit
     that widened everything else and this cap stayed, so the same rule that
     used to widen the section now narrows it by 220. A fixed override against
     a value that moved. */
  /* current integrations, listed apart from the prose so the list can grow */
  .integrations{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;
    border:1px solid rgba(255,210,31,.75);background:rgba(255,255,255,.035);padding:16px 20px}
  /* 12.5px, was 10. Same complaint as the hero eyebrow and the same fix. */
  .integrations .ig-label{font-family:'JetBrains Mono';font-weight:500;font-size:12.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold);flex:none}
  .integrations .ig-list{display:flex;gap:10px;flex-wrap:wrap}
  .integrations .ig-list span{font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--bone);border:1px solid rgba(255,210,31,.75);padding:6px 12px;
    background:rgba(12,12,14,.5)}
  .integrations .ig-list span.soon{color:var(--grey);border-style:dashed;border-color:var(--coal3)}
  .shot-rail{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;padding:22px 0;margin-top:0;scroll-snap-type:x mandatory;scroll-padding-left:0;-webkit-overflow-scrolling:touch}
  .shot{flex:0 0 auto;width:250px;scroll-snap-align:start}
  .shot .frame{aspect-ratio:780/1600;overflow:hidden;border:6px solid #202024;background:#0C0C0E;border-radius:34px;box-shadow:0 18px 40px rgba(0,0,0,.55);transition:transform .25s ease,border-color .25s ease}
  .shot:hover .frame{transform:translateY(-6px);border-color:rgba(192,57,43,.45)}
  .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:27px}
  .shot .cap{margin-top:14px}
  .shot .cap b{display:block;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;color:var(--bone)}
  .shot .cap span{display:block;margin-top:5px;font-size:13px;line-height:1.55;color:#8A8A90}
  /* the swipe hint used to sit under the rail, which is the one place a reader
     has already scrolled past by the time they need it. It sits above it now. */
  .app-hint{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:24px;display:flex;align-items:center;gap:10px}
  .app-hint::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,210,31,.35),transparent);max-width:180px}
  @media(max-width:640px){ .shot{width:210px} #theapp{padding:56px 0 50px} }
  /* ===== pricing ===== */
  .tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:20px; align-items:start}
  .tier{border:1px solid var(--line); background:linear-gradient(180deg,var(--coal),var(--ink)); padding:22px 20px; display:flex; flex-direction:column; position:relative}
  .tier.feat{border-color:rgba(192,57,43,.4)}
  .tier.feat::before{content:"Most chosen"; position:absolute; top:-1px; right:16px; background:var(--red); color:#fff;
    font-family:'JetBrains Mono'; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px}
  .tier h3{font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:18px}
  .tier .price{font-family:'Oswald'; font-weight:600; font-size:38px; margin:14px 0 2px; line-height:1}
  .tier .price span{font-size:14px; color:var(--grey); font-weight:400}
  .tier .from{font-family:'JetBrains Mono'; font-size:9px; letter-spacing:.14em; color:var(--gold); text-transform:uppercase}
  /* material terms belong next to the price, not only in the note underneath */
  .tier .term{font-family:'JetBrains Mono'; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--grey); margin-top:8px}
  .tier ul{list-style:none; margin:16px 0 18px; padding:0}
  .tier li{font-size:14px; color:#A7A4A0; padding:6px 0 6px 20px; position:relative; border-top:1px solid rgba(255,255,255,.04); line-height:1.5}
  .tier li:first-child{border-top:none}
  .tier li::before{content:""; position:absolute; left:0; top:13px; width:7px; height:7px; background:var(--red); transform:rotate(45deg)}
  .price-note{margin-top:22px; font-size:12px; color:var(--grey); padding:0; background:none;
    border:0; line-height:1.7; max-width:70ch}
  .price-note .ast{color:var(--red-hot); margin-right:5px}

  /* The FAQ and "who this is not for" sections were both removed from the home
     page (see docs/backlog.md, "Deleted from the home page"). Their rules,
     .faq* and .fit*, went with them: index.html carries neither element any
     more and site.css is the only page that links this file, so nothing here
     was reachable. Found while giving Oswald its weight ladder, because two of
     the dead declarations, .faq summary and .fit h3, were among the ones this
     pass was fixing. Removed rather than fixed for that reason. */

  /* ===== mid-page calls to action =====
     There used to be exactly one button between the hero and the form at the
     bottom of the page, so a visitor convinced by the app or the credentials had
     nowhere to act. One of these closes each section that does persuading. */
  .cta-strip{margin-top:34px; border:1px solid var(--line-red-soft); background:linear-gradient(180deg,rgba(192,57,43,.07),rgba(192,57,43,.02));
    padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
  .cta-strip p{margin:0; font-size:15px; color:var(--bone); max-width:52ch; line-height:1.55}
  .cta-strip .btn{flex:none; padding:13px 24px}
  @media(max-width:560px){ .cta-strip{flex-direction:column; align-items:stretch} .cta-strip .btn{text-align:center} }

  /* ===== sticky enquire bar, phones only =====
     Hidden until the visitor is past the hero, and hidden again once the real
     form is on screen so it never covers the thing it is pointing at. */
  .enq-bar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
    background:rgba(12,12,14,.94); backdrop-filter:blur(14px); border-top:1px solid var(--line-red-soft);
    padding:10px 16px calc(10px + var(--safe-b)); align-items:center; gap:12px;
    transform:translateY(110%); transition:transform .28s ease}
  .enq-bar.show{transform:none}
  .enq-bar .lbl{flex:1; min-width:0; font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--grey); line-height:1.5}
  .enq-bar .lbl b{display:block; font-family:'Barlow'; font-weight:600; font-size:14px; letter-spacing:0;
    text-transform:none; color:var(--bone)}
  .enq-bar .btn{flex:none; padding:13px 20px}
  @media(max-width:760px){ .enq-bar{display:flex} body{padding-bottom:74px} }
  @media(max-width:760px) and (prefers-reduced-motion:reduce){ .enq-bar{transition:none} }

/* ===========================================================================
   Homepage finish pass. Ten changes, all surface.

   Append this to the END of site.css, or keep it as its own file and link it
   after site.css. It is append-only on purpose: every rule here either targets
   a property the original never set, or repeats a selector so it wins on order
   rather than on specificity. Nothing above it has to be edited, so this cannot
   conflict with anything landing upstream at the same time.

   No markup is touched and no geometry changes: only fill, border, shadow,
   state and one type property. Nothing can reflow, and scripts/audit.js cannot
   see a difference.

   Scope: every page that links site.css, which today is index.html. The athlete
   app and the coach hub are untouched, and so is the login screen.

   Bump the version in the link when this lands: site.css?v2.
   =========================================================================== */

/* 01. Cards look lit rather than cut out.
   A 7 percent border on near-black reads as a hole in the page. A one pixel
   inset highlight gives the card a top edge, and 10 percent gives it a visible
   boundary at phone brightness. The fill becomes the same 180 degree gradient
   the discipline cards already use, so the panels on this page stop disagreeing
   with each other about what a card is. */
/* THE PLACEMENT PANEL IN THE HERO. Hairline box, same family as the attempt
   card, the tier cards and the shared licence list, so it joins the page's
   grammar rather than arriving as a widget. It has to read as the product
   working rather than as a calculator: a calculator is a giveaway, and the
   free tools stay separate and below for exactly that reason. */
.place{border:1px solid var(--line); padding:22px}
/* Grey, matching .sec-eyebrow. Measured after the first pass of the red rule:
   the hero still carried five red things, and this label was one of them sitting
   directly above the 33% it is labelling. A label the same colour as the figure
   under it is a label competing with its own answer. */
.place-k{font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey); border:1px solid var(--line);
  padding:6px 12px; display:inline-flex; margin-bottom:18px}
.place-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.place label{display:block; font-family:'JetBrains Mono'; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:#8A8A90; margin-bottom:6px}
/* NO FILL AND NO BOX, 28 August 2026. These were var(--coal2) inside a full
   border, which is the shape of every signup field on the web, and the panel
   therefore read as a form to fill in before you could see anything. It is the
   only place on any of the five sites measured on 27 August where the product
   actually runs, and it was dressed as the step before the product.

   A bottom rule and nothing else is what a figure sits on in the coach hub, so
   the panel now borrows the hub's own grammar. The 44px floor is untouched:
   these are still inputs and a thumb still has to hit them. */
.place input,.place select{width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--coal3);
  color:var(--bone); font-family:'Oswald',sans-serif; font-weight:600; font-size:18px;
  padding:8px 2px; min-height:44px; border-radius:0; transition:border-color .18s}
.place input:hover,.place select:hover{border-bottom-color:var(--grey-d)}
/* THE HALO IS NOT DECORATION, IT IS THE FOCUS INDICATOR, and the first version
   of this rule was `outline:0` plus a border tint, which scripts/focusrings.js
   correctly failed as indicating focus in NO way.

   A border-colour swap is invisible to that check ON PURPOSE and the reasoning
   is already in the file: the blanket :focus-visible rule deliberately excludes
   fields, and site.css says at length that a box you type in is better served by
   a halo than by an outline around it. So a field here indicates by outline OR
   by box-shadow, and a border tint is neither.

   Matching .enqform's existing treatment rather than inventing a second one:
   same 3px, same 16% red. One decision, two places that already had to agree. */
.place input:focus,.place select:focus{outline:0; border-bottom-color:var(--red-hot);
  box-shadow:0 0 0 3px rgba(192,57,43,.16)}
/* The native select arrow is the last piece of form chrome on the panel. */
.place select{appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:24px}
.place-out{border-top:1px solid var(--line); margin-top:18px; padding-top:16px}
.place-big{font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(26px,3.4vw,40px);
  line-height:1; color:var(--bone)}
.place-big em{font-style:normal; color:var(--red-hot)}
/* Twenty cells rather than a bar, because a scoresheet counts in discrete
   marks and a progress bar is the generic web device this page is avoiding. */
.place-lad{display:flex; gap:2px; margin-top:14px; height:24px}
.place-lad i{flex:1; background:var(--coal2); border:1px solid var(--line)}
.place-lad i.on{background:var(--red); border-color:var(--red)}
.place-sub{font-size:14px; color:#A7A4A0; margin-top:10px; line-height:1.55}
.place-src{font-family:'JetBrains Mono'; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#7A7A80; margin-top:12px}
.place-note{font-size:13px; color:#8A8A90; margin:16px 0 0; line-height:1.5}
@media(max-width:520px){.place-row{grid-template-columns:1fr 1fr} .place-row>div:first-child{grid-column:1/-1}}

/* The free things, out of the hero and in their own band. Two links, same
   destinations, and /tools and /guides/ keep every other route to them. */
.freeband{padding:0 0 8px}
.freeband .wrap{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:720px){.freeband .wrap{grid-template-columns:1fr}}

/* THE SHARED LIST ABOVE THE TIER CARDS. It exists because the gates came off:
   with the same product in all three, repeating six bullets on each card is
   twenty-seven bullets and a feature comparison this product loses on price.
   Once, above, and what separates the cards is the only thing that does.
   Same hairline treatment as the attempt card rather than a fourth panel
   style, so the pricing section reads as one thing. */
.tier-all{border:1px solid var(--line); padding:20px 22px; margin-bottom:18px}
.tier-all-k{font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red-hot); margin-bottom:12px}
.tier-all ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2px 26px; margin:0; padding:0; list-style:none}
.tier-all li{font-size:14px; color:#A7A4A0; padding:7px 0 7px 16px; position:relative}
.tier-all li::before{content:""; position:absolute; left:0; top:14px; width:6px; height:6px;
  background:var(--red-hot)}

.cred-col,.step,.tier,.assess-card{
  border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.assess-card{background:linear-gradient(180deg,#17171B,#121215)}

/* 02. The primary button gets the mark's material.
   Every red button is flat #C0392B while the mark in the header is a 145 degree
   gradient from #E74C3C. Same gradient, plus a top highlight and a one pixel
   base shadow, so the one action that earns money looks pressable and belongs
   to the logo. Hover is unchanged: it still goes brighter, not darker. */
.btn-red{
  background:linear-gradient(145deg,#D8422F,#B02F23);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.4);
}
.btn-red:hover{background:linear-gradient(145deg,#E74C3C,#C0392B)}

/* 03. The gold boxes carry a gold top rule.
   Red cards signal with a 2px rule across the top. The two gold boxes are the
   biggest doors in the hero and signal with nothing but a wash, so the free
   things read as a lighter afterthought. Same device, in gold. */
.freebox{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,210,31,.75);
  box-shadow:inset 0 2px 0 rgba(255,210,31,.55);
}
.freebox:hover{
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 2px 0 var(--gold);
}

/* 04. Inputs read as inset.
   The field is filled with the page colour while sitting on a card, so it
   currently disappears into it. A hair lighter than the page, a 12 percent
   border and a soft inner shadow makes it obviously a thing you type into. The
   red focus ring is deliberately left exactly as it is. */
.enqform input,.enqform select,.enqform textarea{
  background:#111114;
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.enqform input:focus,.enqform select:focus,.enqform textarea:focus{
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 0 3px rgba(192,57,43,.16);
}

/* 05. The chosen tier looks chosen.
   Coaching is the tier to be on and it differs from the other two by a slightly
   redder border and a small tag. A red rule across its top and a low red-tinted
   glow give it hierarchy at a glance, without changing a price, a word or a
   position. The "Most chosen" tag still sits over the rule, as it does now. */
.tier.feat{
  border-color:rgba(192,57,43,.55);
  box-shadow:inset 0 2px 0 var(--red),0 18px 40px -24px rgba(192,57,43,.55);
}

/* 06. Figures line up.
   Oswald's default figures are proportional, so a column of prices sits very
   slightly ragged. One property, no size or position change. */
.tier .price,.tier .term{font-variant-numeric:tabular-nums}

/* 07. The red hover wipe, on the other card that lifts.
   The discipline cards wipe a 2px red rule in from the left on hover and it is
   the best interaction on the site. The credential columns already lift and
   change border on hover but do not wipe, so the same gesture behaves two ways.
   The rule is drawn on the element's existing red top border rather than added
   as a new one, so nothing grows by a pixel. */
.cred-col{position:relative;overflow:hidden}
.cred-col::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--red-hot);transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.cred-col:hover::after{transform:scaleX(1)}

/* 08. Phone frames read as glass.
   The screenshot rail is the strongest thing on the page. A tighter, deeper
   shadow and a one pixel inner keyline make the frame read as a device with a
   screen in it rather than as a picture with a border. */
.shot .frame{
  border-color:rgba(255,255,255,.16);
  box-shadow:0 22px 50px -12px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.06);
}
.shot:hover .frame{
  box-shadow:0 26px 54px -12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(231,76,60,.25);
}

/* 09. Section seams get a shadow line.
   Sections divide on a single 7 percent hairline, which on an OLED phone at low
   brightness can disappear entirely. One pixel of near-black under the existing
   border reads as a machined seam at every brightness, and still measures as
   one line of division. */
section{box-shadow:inset 0 1px 0 rgba(0,0,0,.55)}
/* The app band already carries its own borders, so it keeps them. */
#theapp{box-shadow:none}

/* 10. Depth behind the headline, and the radial is gone with its reason.
   The measure lines go from 50 to 62 percent, so the platform motif is visible
   on a phone. That stays.

   The red radial under the hero was here so the STROKED word had something to
   be outlined against. Its own comment said so, and flagged itself as the one
   change with any risk of reading as a gradient wash. The word is solid now, so
   the wash is a wash. */
body::before{opacity:.62}

/* Reduced motion: the two transitions added above are covered by the existing
   blanket rule in site.css, which switches every transition off. Nothing here
   animates on load. */

/* ---------- sideways rails ----------

   Anything that scrolls sideways gets a bar you can see. Measured rather than
   picked: --red-hot on a --coal2 track is 4.41:1, comfortably past the 3:1 that
   WCAG 2.1 SC 1.4.11 asks of a UI component. Brand --red on the same track is
   3.10:1, which passes and no more, so the hotter red is the one that survives
   an 8px bar on a phone.

   What was here before measured 1.75:1: a 60% red thumb over a 6% white track,
   both composited down onto a near-black section, which is a scrollbar you can
   only find if you already know it is there.

   Both syntaxes are set on purpose. scrollbar-width and scrollbar-color are
   what Firefox reads; the ::-webkit- pseudo-elements are what Chrome, Edge and
   Safari read. Set one and the other browser draws its own default, which on
   macOS is a near-invisible overlay and in Chrome is a light-scheme grey bar on
   a black page.

   Never display:none. These rails are the only affordance that there is more to
   the right, and only one of them has copy saying so. */
.shot-rail, .cred-cols{scrollbar-width:thin; scrollbar-color:var(--red-hot) var(--coal2)}
.shot-rail::-webkit-scrollbar, .cred-cols::-webkit-scrollbar{height:8px; width:8px}
.shot-rail::-webkit-scrollbar-track, .cred-cols::-webkit-scrollbar-track{background:var(--coal2)}
.shot-rail::-webkit-scrollbar-thumb, .cred-cols::-webkit-scrollbar-thumb{background:var(--red-hot)}
.shot-rail::-webkit-scrollbar-thumb:hover, .cred-cols::-webkit-scrollbar-thumb:hover{background:var(--red)}
/* ---------- the keyboard focus ring ----------

   One ring, every interactive thing, all three stylesheets. Before this,
   site.css had no blanket rule at all, so index.html, privacy and terms gave a
   keyboard user nothing on any link or button, while tool.css and guide.css
   each had their own and the two did not match.

   --bone, and that is measurement rather than taste. The ring has to land on
   four grounds: --ink 16.16:1, --coal 15.20:1, --coal2 13.93:1, and --red
   4.50:1, which is the one that matters because every "Work with DQ" button and
   every active discipline tab is solid --red. The old --red ring measured 1.00:1
   there, and --red-hot 1.42:1. Both were invisible on exactly the controls
   somebody tabbing the page is heading for. 3:1 is what WCAG 2.1 SC 1.4.11 asks
   of a focus indicator.

   :focus-visible, not :focus, so a mouse click does not leave a ring behind.

   Text inputs are deliberately not in this list. .enqform input:focus already
   swaps the border to --red and adds a 16% halo, it beats this rule on
   specificity anyway, and it is a better indicator for a box you are typing in
   than an outline around it.

   That sentence said .field until 19 August, when the whole orphaned .field
   system was deleted from this file. The reasoning is unchanged and the live
   selector is .enqform, which is what the only page linking this stylesheet
   actually uses. Corrected rather than left, because a comment naming a
   selector that no longer exists reads as a rule somebody has deleted by
   mistake. */
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, [role="tab"]:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:3px;
}

/* The skip link is the one thing that sits flush against the page edge: it
   parks at left:0 when focused, and body{overflow-x:hidden} would clip an
   outward ring off the left of the viewport. Inset instead. */
.skip:focus-visible{outline-offset:-3px}

/* ---------- the mark ----------

   The badge, the letters and the corner cut are all inside logo-mark.svg now, so
   the only thing CSS still owns is the box it sits in. Three things changed in
   the drawing: the Q tail lengthened so it clears the ring, which is the whole
   point (at header sizes the old mark read as DO); stroke weight 24 to 28 units
   so the letters hold at 32 and 40px; and a deeper corner cut.

   The letters are paths, so the header no longer waits for Oswald. On a cold
   load on gym signal it used to show two fallback-font letters in a red box.

   The gradient is kept as a SECOND background layer under the SVG, and that is
   deliberate rather than tidy. The patch as written used the background
   shorthand, which resets background-color as well as background-image, so if
   this CSS reached the edge before the SVG did the mark would not degrade to a
   red badge, it would be a transparent box with its letters already hidden by
   the rule below: a header with no logo at all. Layered, a missing SVG leaves
   exactly the badge that is live today. Found by the app lane, worth having.

   No !important anywhere. This block is appended after the rule it overrides in
   every file it goes into, so equal specificity and later position is enough,
   and an override that can itself be overridden is the kinder thing to leave. */
.logo .mark,.mark{
  background-image:url("/logo-mark.svg"),linear-gradient(145deg,var(--red-hot),var(--red-deep));
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  clip-path:polygon(0 0,100% 0,100% 58%,58% 100%,0 100%);
  display:block;
  position:relative;
}

/* The inner <span>DQ</span> is drawn inside the SVG now, so the live text node is
   duplicate content. Hidden rather than deleted: no markup changes, and it stays
   available to a screen reader that ignores background images. Kept in the flow
   at 1px rather than display:none, which some readers skip entirely. */
.logo .mark span,.mark span{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}


/* ---------- no sub-header on the marketing site ----------

   The STRENGTH & CONDITIONING line comes off. The page underneath already says
   what the business does, in a headline and then a paragraph, so a tracked
   caption under the wordmark is the third time in one screen. It also puts the
   mark and the wordmark on one line, which quietens the strip and leaves the
   mark as the only red thing in it besides the button that earns money.

   Hidden, not deleted from the markup, so this stays a CSS-only change and the
   words are still in the DOM for a crawler.

   This rule is the marketing site's alone. The portal surfaces keep their
   sub-header, in gold, naming which hub you are on, and the athlete hub's is
   deliberately 10px and bold. That is the app lane's file and their call. */
.topbar .logo small{display:none}

/* A link in prose is marked with a hairline, not with a colour. The guide links
   inside the CTA strip carry an inline color:var(--bone) inside a var(--bone)
   paragraph, with the reset suppressing the underline, so they read as plain
   text: nine of them across the six calculators and the same shape here.

   This is the third time this exact bug has been found on this site. The backlog
   already records "How that works" shipping as an <a> that inherited its
   paragraph's colour with the underline off, and the smoke sweep passes all of
   them, because legible text that is not identifiably a link is still legible
   text. Matching .src-note a and .refs a, which have always been right. */
.cta-strip p a{border-bottom:1px solid var(--line-red)}
.cta-strip p a:hover{color:var(--red-hot); border-bottom-color:var(--red-hot)}

/* ---------- nav and footer link colour ----------

   Gold already means free everywhere else on this site: the hero freebox, the
   tool pages, the free-to-use tag. A gold nav link is the same promise in the
   same colour, and red-hot stays the brand's own writing.

   Matched on destination rather than on position, so the colour follows the link
   if the order changes again. Measured before writing: --gold on the topbar
   ground is 8.08:1 and --red-hot is 5.12:1, both clear of AA for this size.

   Free Tools is two words and wraps in the 68px strip once the row gets tight,
   which pushes the header taller than the buttons beside it. Nothing in this nav
   should wrap: below 640px the links are hidden anyway and the sticky enquire
   bar takes over. */
.nav-r a.link{white-space:nowrap}
/* THE NAV LINKS WERE TWO MORE ACCENT COLOURS AND THE HEADER COULD NOT HOLD
   THEM. Free Tools was gold and Guides was red, on the argument that gold means
   free everywhere else here. True on a card in the body of a page, and in a
   45px strip it put five colours side by side: bone button, white button, red
   button, gold link, red link. The busiest thing on the page was the way out of
   it, and the red link sat two inches from the red button that is the one
   action being sold.

   Gold still means free in the footer and on the tool cards, where it has room
   to mean something. Here every link is one colour and the buttons carry the
   emphasis, which is what a button is for. */

/* footer .discs holds Free tools, Guides and Questions and takes its colour from
   the container, so setting the container is enough. All three of those are free
   to use, so all three are gold. */
footer .discs{color:var(--gold)}
footer .discs a:hover{color:#FFE066}

/* ===========================================================================
   site.css — website patch. APPEND TO THE END of /site.css.

   Two halves:
     Part 1, the four rules behind the approved design changes.
     Part 2, the code-only fixes (buckets A and B).

   There are also three DELETIONS, which cannot be done by appending — they are
   in site-delete.md, with line references.

   Bump site.css?vN in every page that links it, and dq-shell-vN in sw.js.
   =========================================================================== */

/* ======================= PART 1 — approved design changes ================== */

/* D1. The tier action button. Sits in the slot .tier .foot-note{margin-top:auto}
   already reserves, so all three line up along the bottom of the cards whatever
   the list lengths are. */
.tier .tier-cta{margin-top:auto; width:100%; text-align:center; padding:18px 18px}
/* margin-top:auto ALONE does not align them, which the patch above assumed and
   a browser disproved: measured on desktop the three buttons sat at 5196, 5340
   and 5505, over 300px apart. .tier is a flex column, so auto does push the
   button to the bottom of ITS OWN card, but .tiers carries align-items:start,
   so each card is only as tall as its own content and "the bottom of the card"
   is a different place in each one.
   Equal-height cards are what the change was signed off as: "three tier
   buttons, aligned along the bottom of the cards". Overridden here rather than
   edited at line 360, so this patch's effect is one contiguous block and can be
   lifted back out in one piece. Below 900px the grid is one column and they
   stack, where alignment means nothing either way. */
@media(min-width:900px){ .tiers{align-items:stretch} }

/* D2. The discipline cards were squashed: .dcard .dmore has margin-top:auto,
   which only opens up on the SHORTER cards, so the tallest card in the row had
   its description sitting on the label. A floor under the gap fixes it at every
   height without disturbing the auto. */
.dcard p{margin-bottom:26px}

/* D3. Testimonials, holding. One row at the foot of the coach section, which is
   deliberately the slot real testimonials will occupy — proof between the
   authority and the price. When quotes land they expand in place and nothing
   else on the page moves. A row and not a section, because a section with no
   content in it is filler. */
/* .soon-band IS DEAD AND IS DELIBERATELY NOT CUT. The band it styled was
   removed from the home page on 28 August 2026 because it announced a weakness
   no competitor mentions, and it COMES BACK the day there is a real coach
   testimonial, with the words in it rather than a promise of them.
   deadrules will report these four every run until then. That is the report
   being right and the cut being wrong: this tree has already lost the whole
   Progress tab to a cut that took its neighbours, and a dead rule with a dated
   reason to return is not the same artefact as one nobody can account for. */
.soon-band{display:flex; align-items:center; gap:16px; min-height:44px; margin-top:34px;
  padding-top:24px; border-top:1px solid var(--line); transition:.18s}
.soon-band b{font-family:'Oswald'; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:17px; color:var(--bone); line-height:1; flex:none}
.soon-band .hr{flex:1; height:1px; background:linear-gradient(90deg,rgba(255,210,31,.35),transparent)}
.soon-band .st{font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); flex:none}
.soon-band:hover b{color:var(--gold)}

/* D4. .cta-strip needs no new CSS. The rule has been in this file since the
   tools pass with nothing to match; the patch adds the element it was written
   for. See index-changes.md. */

/* ======================= PART 2 — code-only fixes ========================= */

/* A6. The skip link landed under the sticky bar.
   section,header{scroll-margin-top:84px} is set further up this file, but the
   skip target is <span id="main"> INSIDE a section, so the span itself got no
   margin and the heading arrived beneath the 68px topbar. */
#main{scroll-margin-top:84px}

/* A8 IS GONE WITH THE THING IT PATCHED. It forced .hero h1 .stroke back to
   CanvasText in forced-colors mode, because color:transparent plus a
   -webkit-text-stroke rendered as nothing once Windows high-contrast dropped
   the stroke. The fill is a real colour now, so forced-colors substitutes it
   like any other text and the patch would only be overriding a working rule. */

/* A15. The two hero doors sat 26px apart instead of 14.
   .freebox (line 113) carries margin-bottom:12px from when the boxes were
   stacked by flow. The parent is now a flex/grid with its own gap, so the two
   were adding up. Zeroed only where it has a gap-bearing parent, so the rule
   above is left alone for any page still stacking them. */
.hero-right .freebox{margin-bottom:0}

/* B5. THE ACCESSIBILITY BUG. Below 1100px .cred-cols becomes an
   overflow-x:auto rail (line 188). It has no tabindex and contains no focusable
   element, so credentials 2, 3 and 4 could not be reached by keyboard at all —
   not scrolled, not read. Same shape on .shot-rail (line 356).

   The fix is tabindex="0" + role="group" in the markup (index-changes.md); this
   is the CSS half: the rails are now focus targets, so they need a visible ring,
   and it goes inside the border rather than around it because both rails run to
   the edge of the viewport at narrow widths. */
.cred-cols:focus-visible,.shot-rail:focus-visible{
  outline:2px solid var(--bone); outline-offset:-2px;
}

/* B7. Form success was silent for a screen reader, and failure was a browser
   alert(). #enqOk gets role="status" and focus in the markup; this makes the
   focused panel show a ring, and adds the failure variant of the panel. */
.enq-ok:focus-visible{outline:2px solid var(--bone); outline-offset:3px}
.enq-ok.bad{border-color:rgba(232,131,111,.55)}
.enq-ok.bad b{color:var(--bad)}

/* ===== E1. The two claims that are not features =====

   DQ's call, 21 August 2026, after a pass over what competitors publish. Six
   things this business already does that the market does not, and none of them
   were on the page as anything other than an ordinary bullet.

   TWO PIECES, and they are deliberately the smallest version that works.

   ONE LINE above the tiers, and three MARKED BULLETS inside them. No new
   section, no extra page height on a phone beyond the line itself. The bigger
   treatments were mocked up and rejected: a four-column band above the pricing
   said more and cost roughly half a phone screen, and a boxed panel inside each
   card was louder and added height to all three.

   GOLD, NOT RED, and the reason is in tokens.css: gold already means "free, or
   a caution that is not a fault", and red is the brand and the buy action. A
   third meaning on red would blur the buttons a reader is trying to find. Gold
   is already the colour of `.tier .from`, so this reads as the same family
   rather than a new signal.

   THREE MARKS IS THE CEILING and it is a real constraint rather than a style
   note. Mark six lines and the marking stops meaning anything, which is the
   failure mode of every "featured" badge on every pricing page. If a fourth
   claim earns a mark, one of the three has to lose it. */

.coachline{margin:22px 0 4px}
.coachline p.cl-h{
  font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(20px,3.4vw,29px); line-height:1.22; color:var(--bone);
  margin:0 0 10px; max-width:22ch; text-wrap:balance;
}
.coachline p.cl-h em{font-style:normal; color:var(--gold)}

/* The marked bullet. `.tier li` already sets the red diamond, so this only
   changes what needs changing: the diamond goes gold and the text comes up to
   --bone from the muted grey.

   `.mk`, the mono "ONLY HERE" label that used to sit above the line, was
   dropped from the markup on 22 August on DQ's instruction: the gold diamond
   already stands out, so the label was saying twice what the colour says
   once. Its rule stayed behind and deadrules caught it, the tool doing
   exactly the job it was built for on the same evening it was hardened. */
.tier li.only{color:var(--bone)}
.tier li.only::before{background:var(--gold); width:8px; height:8px; top:12px}

/* NAV: A LINK THAT ADMITS IT LEADS NOWHERE YET. DQ, 26 August 2026: the
   Athletes tab becomes Coaches, "marked Coming Soon".

   WHY IT IS MARKED IN THE NAV RATHER THAN ONLY ON THE PAGE. /testimonials is
   empty, noindex and out of the sitemap on purpose, because there is no coach
   testimonial yet and inventing one is the thing this codebase refuses to do.
   An unmarked nav link to an empty page spends a reader's click and their
   trust; a marked one is an honest promise. Same reasoning as the soon-band on
   the home page, which this matches deliberately rather than by coincidence.

   The marker inherits the link's own hidden state below 640px, so it cannot
   leave a stray word floating in a nav that is no longer there. */
.nav-r a.link.nav-soon{display:inline-flex; align-items:center; gap:6px}
.nav-r a.link.nav-soon span{font-family:'JetBrains Mono',monospace; font-size:8.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(255,210,31,.75); border-radius:3px; padding:2px 4px; line-height:1}
.nav-r a.link.nav-soon:hover span{border-color:var(--gold)}
@media(max-width:640px){.nav-r a.link.nav-soon{display:none}}

/* TIER 3'S LAST THREE, IN BOLD AND GOLD. DQ, 26 August 2026: "tier 1 having 3
   points, tier 2 having 6 points, and tier 3 having 9 points. The
   differentiators need to be called out in bold and gold. I.e., no bold or
   gold in tier 1 and tier 2."

   THIS REVERSES WHAT WAS LIVE rather than adding to it. Tier 2's final two
   bullets carried .only and were bold. His instruction is explicit that tiers
   1 and 2 carry no emphasis at all, so .only is now tier 3's alone. Written
   down because a later reader will find bold markup removed from a tier and
   reasonably assume it was lost in a merge. */
.tier ul li.only{color:var(--gold); font-weight:600}

/* ABOUT ME's prose column. .lineage-col is display:flex because it used to hold
   a single .lineage rail and stretch it to the portrait's height. Dropping
   paragraphs straight into it made each <p> a flex CHILD, so three paragraphs
   became three 90px columns of text beside the photo: the same ragged, too-thin
   look DQ called "disjointed" on the four cards below it, produced a second way
   on the same page. Wrapped rather than changing .lineage-col, because that rule
   still has the rail to lay out. Same red hairline as the rail so the two read
   as one design rather than two. */
.about-prose{border-left:1px solid var(--line-red-soft); padding-left:22px;
  display:flex; flex-direction:column; gap:16px; justify-content:center}
.about-prose .lead{margin:0; max-width:62ch}
@media(max-width:860px){.about-prose{justify-content:flex-start}}

/* THE DESKTOP SLOT IN A RAIL BUILT FOR PHONES. The Coach Hub runs on a laptop,
   so its main shot is 1440x1000 while every athlete-app shot is 780x1600.
   Dropping the wide one into the phone frame crops it to 33.9% of its width
   under object-fit:cover, measured rather than guessed, which throws away most
   of the roster on the one screen whose whole argument is that it shows the
   whole roster.

   object-fit:contain rather than cover, and object-position centred: a
   dashboard cropped is a dashboard misrepresented, where an app screen cropped
   at the bottom still reads correctly, which is why the phone shots use cover
   and this does not. The 12px inset keeps the ground visible around it so it
   reads as a screen inside a device rather than a picture that failed to fill
   its box. */
/* WIDTH DERIVED SO BOTH FRAMES ARE THE SAME HEIGHT, rather than picked. A phone
   card is 250px wide at 780/1600, so its frame is 250*1600/780 tall; a 1440/1000
   frame of that height is 250*1600/780*1440/1000 wide. Hardcoding 520px looked
   fine and put the two captions 150px apart vertically, which reads as a
   layout fault rather than as two different devices. Derived, they share a
   baseline and the pair fills the rail instead of leaving a third of it empty.

   The phone override is deliberately NOT derived: at 390px the same arithmetic
   gives a 620px card, and a card wider than the screen is worse than two
   captions that do not line up in a view you are scrolling vertically anyway. */
/* SIZED SO TWO FIT, 29 August. The wrap is 1400 and the gap is 20, so 690
   each puts two whole pictures on screen where the old 738 put one and a half.
   The rail stays, because three will never fit and a rail that shows two is a
   rail somebody scrolls once rather than one they scroll to see anything. */
/* TWO WHOLE PICTURES, AT ANY WIDTH. A fixed px width only fits two at one
   viewport: 690 was right against a 1400 wrap and wrong against the 1304 that
   1512px of browser actually leaves after padding, so the second shot was cut.
   Half the rail minus the gap fits two by construction, with a floor so a
   narrow laptop gets one readable picture rather than two small ones. */
.shot.shot-wide{width:max(430px, calc((100% - 20px) / 2))}
/* THE FRAME FOLLOWS THE PICTURE, 29 August 2026. DQ: "both are still not
   rendering full width and height."

   It used to declare `aspect-ratio:1440/1000` with `object-fit:contain`, so
   any shot of another shape letterboxed inside it. coach-athlete.png was
   1440x656 in that frame and had rendered with black bands top and bottom
   since the day it was taken. I checked the PNGs every time and never the
   composed rail, which is the half a suite cannot answer.

   AND THE PADDING BROKE IT EVEN FOR A CORRECTLY SHAPED SHOT: 12px inside a
   1.44 box leaves a 1.47 box for the image, so a 1440x1000 picture still had a
   hairline of ground down each side.

   No ratio here now. The image sets its own height and the frame wraps it, so
   the three cannot letterbox and a future shot of the wrong shape makes the
   rail visibly ragged rather than quietly padded. */
.shot.shot-wide .frame{aspect-ratio:auto; border-radius:14px; padding:12px}
.shot.shot-wide img{width:100%; height:auto; object-fit:fill; border-radius:6px}
@media(max-width:640px){ .shot.shot-wide{width:320px} }

/* FOOTER MATCHES THE HEADER. DQ, 26 August: footer order is About, Q&A, Free
   Tools in gold, Guides in red, "matching header". The header has coloured
   those two since it was built and the footer never did, so the same two links
   read as two different kinds of thing depending which end of the page you are
   at. Colours taken from the header's own rules rather than picked again, so
   there is one decision about what gold and red mean here. */
footer .discs a.ft-tools{color:var(--gold)}
footer .discs a.ft-tools:hover{color:#FFE066}
footer .discs a.ft-guides{color:var(--red-hot)}
footer .discs a.ft-guides:hover{color:#F0685A}

/* THREE LINES INSTEAD OF A PARAGRAPH. DQ, 26 August: the triage, readiness and
   one-hub callouts and the three how-it-works steps were "too much wording",
   and he asked for three bullet points in each.

   No bullet glyph and no indent: at this size a marker costs more width than it
   buys, and the point is that three short lines scan in the time a paragraph
   takes to start. The hairline is the separator instead. */
.cl-list{list-style:none;margin:10px 0 0;padding:0}
.cl-list li{font-size:14px;line-height:1.5;color:var(--body,#C9C5BE);
  padding:7px 0;border-top:1px solid var(--line)}
.cl-list li:first-child{border-top:0;padding-top:0}

/* The athlete door, beside the coach one. A link rather than a second button:
   the button belongs to the person being sold to, and the athlete app is opened
   daily by people who already know where it is. Hidden below 640px with the
   rest of the nav links, so a phone shows the coach button alone rather than
   two things competing in a bar that has room for one. */
@media(max-width:640px){#navAuth a.nav-athlete{display:none}}

/* THE HEADER BUTTONS MUST NOT WRAP, and this is a fault I introduced tonight.
   Adding the coach door made a fourth item in the bar and both buttons broke to
   two lines: "TALK TO / US" and "COACH SIGN / IN", 63px tall against 45 on main.
   Measured at 1440, 1280 and 1100 and it wrapped at all three, so it was not a
   narrow-window case.

   nowrap rather than shorter labels: the nav measures 918px inside a 1140px bar
   with the logo, so there is room, and the wrap was flex choosing to break text
   rather than the bar running out. Shortening "Coach sign in" would have fixed
   the symptom and left the next added item to do it again.

   Caught by rendering it before sending it to DQ, not by any check here. A green
   suite answers what the page says, not what it looks like. */
.nav-r .btn{white-space:nowrap}

/* ===========================================================================
   28 AUGUST 2026 — GROUNDS, AND THREE NEW BANDS.

   Measured before any of it was written, on the local tree at 1440: every one
   of the page's eight sections computed to background rgba(0,0,0,0). One flat
   ink ground for 5,893px, so nothing separated a section from the one above it
   and the page read as sparse rather than as composed. #theapp was the only
   band with a ground of its own, which is why it is the only one that reads as
   a band today.

   TWO GROUNDS, NOT FIVE. --ink and --coal alternate down the page. No new
   colour, no gradient, no third value: the rhythm is what was missing, not
   variety, and a page that changes ground five times is a page with no rhythm
   either. The hairline top rule is the same --line the measure motif uses, so
   a section boundary lands as one more line in the same grid rather than as a
   different device.
   =========================================================================== */
.proof,#pricing{background:var(--coal)}
#coachhub,#pricing,#enquire{border-top:1px solid var(--line)}
/* Measured after the first attempt at this: coal on #coachhub and #pricing left
   proof+coachhub adjacent on one ground and whofor+how+starting adjacent on the
   other, so the flat page came back in three places rather than eight. Strict
   alternation down the whole run is the only version that actually reads as
   rhythm: coal, ink, gradient, coal, ink, coal, ink, coal. */
/* #theapp keeps the gradient it already had and gains nothing here. */

/* ---- THE PROOF BAND ------------------------------------------------------
   Where all four competitors measured on 27 August put a customer count.
   TrueCoach runs 16,000+ coaches, Everfit 320,000, Trainerize 400k trainers
   and 1.6M clients, TrainHeroic a stat counter. We license to nobody yet, so
   there is no count to run and inventing one is the thing this whole page
   sells against.

   SO EVERY FIGURE IN THIS BAND IS A FACT SOMEBODY CAN CHECK, and each one
   names where it comes from in the markup rather than in a comment. DQ's
   call, 28 August: facts only, no roster figure, nothing about licensees.

   It is deliberately NOT a stat band with four big numbers and a gradient.
   Four large numerals with small labels under them is the template answer and
   it is the one shape that reads as a claim whether or not it is true. These
   are ruled cells: the label first, the figure second, the source third, in
   the same grammar as the licence list and the steps. */
.proof{background:var(--coal); border-top:1px solid var(--line); padding:clamp(30px,4vw,44px) 0}
.proof-h{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.proof-h b{font-family:'Oswald'; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:15px; color:var(--bone)}
.proof-h span{font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey)}
.proof-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border:1px solid var(--line)}
.proof-c{padding:20px 20px 22px; border-left:1px solid var(--line)}
.proof-c:first-child{border-left:0}
@media(max-width:860px){
  .proof-c{border-left:0; border-top:1px solid var(--line)}
  .proof-c:first-child{border-top:0}
}
.proof-k{font-family:'JetBrains Mono'; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey); display:block}
.proof-n{font-family:'Oswald'; font-weight:700; font-size:clamp(22px,2.6vw,30px);
  line-height:1.05; color:var(--bone); margin:9px 0 0; display:block; letter-spacing:.01em}
.proof-s{font-size:13px; color:#8A8A90; line-height:1.5; margin-top:8px}

/* ===========================================================================
   THE FOOTER, ONE TREATMENT. 28 August 2026.

   DQ: "make that white font similar to the header font, otherwise it looks a
   bit confusing", and "a bit more synchrony throughout".

   MEASURED BEFORE IT WAS CHANGED, and the confusion was not the white row. It
   was that the SAME LINK WAS A DIFFERENT COLOUR ON DIFFERENT PAGES:

                index      guides     tools
     About      gold       red        red
     Q&A        gold       red        red
     Free tools gold       gold       gold
     Guides     red        red        red

   footer .discs is declared in three stylesheets AND THREE TIMES INSIDE
   site.css: red-hot at :401, gold at :938, then per-link overrides at :1169.
   site.css is the only file carrying the gold container rule, so About and Q&A
   went gold on the two pages that link it and stayed red on the twenty-nine
   that do not. Nobody wrote that; it is what three copies of one rule do.

   ONE TREATMENT NOW, AND IT IS THE HEADER'S: JetBrains Mono, 11px, .14em,
   uppercase, --grey, hover --bone. Identical in site.css, tool.css and
   guides/guide.css.

   GOLD IS GONE FROM THE FOOTER RATHER THAN APPLIED CONSISTENTLY. Gold means
   free in this codebase and the footer row is navigation, so colouring two of
   four links was signalling a category to somebody reading a nav. The free
   things are still gold where a reader is choosing them, in the Free tools box
   on the home page.

   IF YOU CHANGE IT HERE, CHANGE IT IN THE OTHER TWO. There is no shared
   stylesheet these three reach, and tokens.css holds no component rules by its
   own rule. Same standing note as the measure-lines motif.
   =========================================================================== */
footer .discs{font-family:'JetBrains Mono',monospace; font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
  display:flex; gap:14px; flex-wrap:wrap}
footer .discs a{display:inline-block; padding:8px 0; color:inherit}
footer .discs a:hover{color:var(--bone)}
footer .discs a.ft-tools,footer .discs a.ft-guides{color:inherit}
footer .discs a.ft-tools:hover,footer .discs a.ft-guides:hover{color:var(--bone)}
/* The white underlined row shouted louder than the nav above it. Same family,
   same colour, same hover; sentence case, because an email address is not a
   label and uppercasing one makes it harder to read. */
footer .flink{color:var(--grey); text-decoration:none;
  display:inline-block; padding:8px 2px}
footer .flink:hover{color:var(--bone)}

/* ---- THE PHONE HEADER, 28 August 2026 -------------------------------------
   Below 640 the athlete link was display:none, so the only way into the app
   from a phone was to already know the URL. Both are shown now and each label
   drops its long half, which is what makes two buttons fit 390px beside a
   139px logo.

   Measured rather than guessed: logo 139, gutters 40, leaving 211 for two
   buttons and a gap. "Athlete" and "Coach" at this padding come to 178. The
   44px floor is untouched, so both are still a thumb target. */
@media(max-width:640px){
  #navAuth a.nav-athlete{display:inline-flex}
  .lbl-long{display:none}
  #navAuth{gap:6px}
  #navAuth .btn{padding:12px 13px; font-size:12px; min-height:44px}
}

}

/* ---- THE TRIAGE ROW, 28 August 2026 ---------------------------------------
   DQ: "the Triage Readiness one hub: I like it, but we need to make it more
   visual on the website."

   ONE SMALL DRAWING PER COLUMN, INLINE, AND EACH ONE MEANS ITS COLUMN. Ranked
   bars for triage, a part-filled ring beside three flat readings for
   readiness, three linked frames for one hub. Not icons: a dumbbell and a
   stopwatch would decorate the row without saying anything, which is the
   thing the rest of this page avoids.

   INLINE SVG RATHER THAN IMAGE FILES, so there is no request, nothing to
   version, nothing to keep in step with a screenshot, and they take the
   palette from tokens.css and so follow the theme by construction. */
.stepmark{display:block; width:64px; height:40px; margin-bottom:14px}
@media(max-width:719px){.stepmark{margin-bottom:12px}}
/* The label box was a fixed 34px, sized when every label was two digits. "ONE
   HUB" wrapped inside it and drew a two-line box beside a one-line neighbour.
   Sizes to its content now, with the old 34px kept as the floor so the
   numbered steps on /about and /assessment are unchanged. */
.step .no{width:auto; min-width:34px; padding:0 8px; white-space:nowrap}
/* Smaller, DQ's call 28 August: "I like the symbols that you've put, but make
   them smaller like they were before." 64x40 down to 40x25. */
.stepmark{display:block; width:40px; height:25px; margin-bottom:12px}

/* ---- THE HERO'S RIGHT COLUMN, 28 August 2026 ------------------------------
   Measured before changing: 384x186 of content sitting at the bottom of a
   531px grid, so 346px above it was empty. The boxes were bottom-aligned from
   when this column held one small panel, and the alignment outlived the
   content twice.

   They stretch to the column now and carry what is in them. DQ: "free tools
   make us stand out more, so do guides." */
.hero-grid{align-items:stretch}
.hero-right{justify-content:stretch; gap:16px}
.hero-right .freebox,.hero-right .guidebox{flex:1; display:flex; flex-direction:column; padding:20px 22px}
/* The list follows the description; the LINK is what pins to the bottom. The
   first version put margin-top:auto on the list and opened a hole in the
   middle of both boxes. */
.freebox em,.guidebox em{display:block; font-style:normal; margin-top:12px;
  font-size:12.5px; line-height:1.7; color:#A7A4A0}
.freebox i,.guidebox i{display:block; font-style:normal; margin-top:auto; padding-top:16px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase}
.freebox i{color:var(--gold)}
.guidebox i{color:var(--red-hot)}
@media(max-width:900px){
  .hero-right .freebox,.hero-right .guidebox{flex:none}
  .freebox em,.guidebox em{margin-top:12px}
}
/* The same drawings on the feature cells. DQ: "the symbols that you've got for
   triage readiness, one hub: include them on readiness, film lifts, and
   injuries. Those are great." The readiness one is the SAME mark in both
   places, because it is the same claim; the other two are new and each means
   its own cell: one rep's bar path beside a frame, and a severity that climbs. */
.proof-c .stepmark{margin-bottom:10px}

/* ===========================================================================
   THE LAYOUT PASS, 28 August 2026. DQ's brief: less text, more presence.

   THE PAGE BECOMES A SCOREBOARD RATHER THAN AN EXPLANATION. Every description
   under a heading is gone, so the heading has to carry the claim on its own,
   which means it gets the size it was never given while it had a paragraph to
   lean on. A scoreboard states; it does not explain. That is the same thing
   "Tested, not assumed" says at the top of the page.

   TWO SIGNALS AND NOTHING ELSE COMPETES:
     gold  what is included, and it now has a ground rather than a hairline
     red   the action, on every tier button rather than one
   =========================================================================== */

/* ---- the free things, given the room ---- */
.hero-right .freebox,.hero-right .guidebox{padding:26px 26px 22px}
.freebox b,.guidebox b{font-size:clamp(20px,2.4vw,26px); letter-spacing:.02em}
.freebox span,.guidebox span{margin-top:9px; font-size:14px; line-height:1.6; max-width:30ch}
/* One arrow, bottom left. The named lists came out: seventeen calculators is
   the fact, and naming six of them is a table of contents nobody asked for. */
.freebox i,.guidebox i{margin-top:auto; padding-top:20px; font-size:20px; letter-spacing:0}

/* ---- the feature cells and the triage row, with the prose gone ---- */
/* 20ch, was 16. The headlines carry their own label word now, so a 16ch
   measure broke every one of them onto three lines. */
.proof-n{font-size:clamp(23px,2.7vw,32px); line-height:1.06; max-width:20ch}
.proof-c{padding:24px 22px 26px}
.step h3{font-size:clamp(18px,2.1vw,23px); line-height:1.15; margin:12px 0 0}
.step{padding:26px 22px 28px}

/* ---- EVERY LICENCE, WHICHEVER YOU PICK ----
   A gold ground rather than a gold hairline. It is the one block on the page
   listing what a coach gets whatever they pay, so it should read as the floor
   under all three prices rather than as a caption above them. Text goes to ink
   because gold at this coverage cannot carry bone: measured at 1.9:1 against
   --bone and 12.6:1 against --ink. */
.tier-all{background:var(--gold); border-color:var(--gold)}
.tier-all .tier-all-k{color:rgba(12,12,14,.72)}
.tier-all li,.tier-all p,.tier-all span,.tier-all b{color:var(--ink)}
.tier-all li::before{background:rgba(12,12,14,.55)}

/* ---- every tier button is the action ---- */
.tier-cta{background:var(--red); color:#fff; border-color:var(--red)}
.tier-cta:hover{background:var(--red-hot); border-color:var(--red-hot); color:#fff}
/* The middle tier is the one with the ground, so it gets the room to sit in. */
.tier-cta-feat{padding-top:21px; padding-bottom:21px; font-size:15.5px}

/* ---- the quick links stay white ----
   DQ, 28 August: "keep those in white across the website". The footer row went
   grey in the one-treatment pass, which was right about consistency and wrong
   about weight: these are the only navigation on a phone. */
footer .discs{color:var(--bone)}
footer .discs a:hover{color:#fff}
footer .flink{color:var(--bone)}
footer .flink:hover{color:#fff}
/* The boxes are tall by request and the arrow sits at the bottom by request, so
   what fills the middle has to be TYPE rather than another sentence. The title
   takes the room the name lists were using. */
.freebox b,.guidebox b{font-size:clamp(28px,3.6vw,44px); line-height:.95; letter-spacing:.01em}
.freebox span,.guidebox span{margin-top:14px; font-size:14.5px; max-width:26ch}
.hero-right .freebox,.hero-right .guidebox{padding:28px 28px 24px}
/* The grey strip goes and the action stays. DQ: "remove pricing as the small
   grey box" plus "on What it costs as a CTA, make that red" -- both hold if
   the box is what goes. */
.cta-bare{margin-top:clamp(24px,3vw,36px)}
/* THE BANDS, NAMED, under the claim they belong to. DQ, 28 August: "underneath
   where it says The wearable number interpreted, that's where you want to
   mention what we integrate with... and needs to stand out."

   Three, because three are built. Nothing else is named: an integration list
   is a claim a coach checks on day one. */
.bands{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0}
.bands span{font-family:'Oswald',sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bone);
  border:1px solid var(--line-red-soft); background:rgba(192,57,43,.10); padding:7px 12px}

/* ===========================================================================
   REVISION PASS, 29 August 2026. DQ, from screenshots.
   =========================================================================== */

/* ---- the hero boxes were too tall for what is in them --------------------
   A title and an arrow do not need 260px of column each. They stop stretching
   and size to their content, which puts them back beside the headline rather
   than running past it. */
.hero-right{justify-content:center}
.hero-right .freebox,.hero-right .guidebox{flex:none; padding:26px 26px 22px}
.freebox b,.guidebox b{font-size:clamp(26px,3vw,36px)}
.freebox i,.guidebox i{margin-top:18px; padding-top:0}

/* ---- the bands are gold, and there is a fourth ---------------------------
   DQ: "make all integrations stand out in gold vs red boxes, and add More
   Soon". Gold is what this site already uses for a thing you get at no extra
   cost, which is what an integration is: no device to buy from us. Red was
   saying "action" beside a list nobody clicks. */
.bands span{border-color:rgba(255,210,31,.75); background:rgba(255,255,255,.06); color:var(--bone)}
.bands span.soon{border-style:dashed; border-color:var(--coal3); color:var(--grey);
  background:transparent}

/* ---- EVERY LICENCE, WHICHEVER YOU PICK ----------------------------------
   DQ: "make this more aesthetic and impactful."

   The gold ground was right and the contents were still a bulleted list in
   body type, so the block SHOUTED and then whispered. Three ruled cells with
   the item as a statement, no bullets, no wrapping mid-phrase. It reads as the
   floor under the three prices, which is what it is.

   Ink on gold measures 12.6:1. The rules are ink at 14% rather than a lighter
   gold, so the divisions read as structure rather than as a second colour. */
.tier-all{padding:0; border:0}
.tier-all .tier-all-k{display:block; padding:18px 24px 14px; margin:0;
  border-bottom:1px solid rgba(12,12,14,.14); font-weight:500; font-size:13px; letter-spacing:.14em}
.tier-all ul{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; padding:0; list-style:none}
@media(max-width:820px){.tier-all ul{grid-template-columns:1fr}}
/* 600 AT UP TO 25px, was 500 at up to 18. DQ, 29 August, pointing at the proof
   band above it: "this section needs a similar style as this." The two were
   the same idea at two sizes, so this one read as a caption under a shout.

   HE REFERENCED A SCREENSHOT THAT DID NOT ARRIVE (12:33:31), so this is the
   proof band's treatment applied, which is the only styled thing in that
   message. If he meant something else it is one line to say so. */
.tier-all li{padding:22px 24px 24px; border-left:1px solid rgba(12,12,14,.14);
  font-family:'Oswald',sans-serif; font-weight:600; font-size:clamp(17px,1.9vw,25px);
  line-height:1.2; letter-spacing:.005em; color:var(--ink)}
.tier-all li:nth-child(3n+1){border-left:0}
@media(max-width:820px){
  .tier-all li{border-left:0; border-top:1px solid rgba(12,12,14,.14)}
  .tier-all li:first-child{border-top:0}
}
.tier-all li::before{display:none}
/* A rule between the two rows as well as between the columns, or the six read
   as one block of text on a gold ground rather than as six things. */
.tier-all li:nth-child(n+4){border-top:1px solid rgba(12,12,14,.14)}
@media(max-width:820px){.tier-all li:nth-child(n+4){border-top:1px solid rgba(12,12,14,.14)}}


/* ===========================================================================
   AESTHETIC PASS, PART 1. DQ's bundle, patch/aesthetic-2026-08/, 29 August
   2026. Appended as one block per its own instruction: it is written to win on
   source order, so nothing above is edited and a revert is one deletion.

   PART 1 IS THE HALF WITH NO VISUAL DIFF, with one intended exception the
   bundle names: the product grade warms the screenshots.
   =========================================================================== */

/* F19 · smooth scrolling was unconditional. Everything else here is already
   switched off wholesale under reduced motion; this was the one thing that was
   not. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* F13 · the product grade, from the readme's Backgrounds rule. Specified for
   product imagery and never applied to the marketing rails, so the screenshots
   sat cooler than the page they are on. Real app screenshots only, never the
   mark and never the portrait.

   `.shot img` REACHES BOTH RAILS, which the bundle did not expect. It asks for
   `.coach-rail img` and `.app-rail img`; neither class exists here and the
   grep reported that. Every screenshot in both rails is a `.shot img`, so one
   selector does what two were written to do. */
.shot img{filter:contrast(1.09) saturate(.88) sepia(.06)}

/* F12 · reserving the box is ALREADY DONE and by better means, so the rule the
   bundle ships for it is deliberately not here.

   It asks for `.shot img{width:100%;height:auto}` plus an aspect-ratio per
   rail. Every one of the thirteen images already carries real intrinsic
   `width` and `height` attributes, which reserves the box natively and needs no
   CSS at all. Applying the rule would also BREAK the app rail: those shots are
   `height:100%;object-fit:cover` inside a fixed 780/1600 frame, and `height:
   auto` on top of that lets a 1600px-tall image out of a 512px box.

   Reported rather than worked around, per the bundle's own instruction. */


/* ===========================================================================
   AESTHETIC PASS, PART 2. The design changes.

   Same bundle, same rule: appended, no !important, nothing above edited.
   Finding numbers are the bundle's.

   TWO BLOCKS OF THE BUNDLE ARE DELIBERATELY ABSENT and both are DQ's call
   rather than a judgement made here:

   F4, eyebrows stop being red. There are no eyebrows. Every .sec-eyebrow
   element was removed from the site on his instruction earlier today, so the
   block would style nothing, and the pass's stated end state, "red on this page
   after this is the focus ring and nothing else", does not follow either.

   F15, the athlete link drops to a text link. Its selector is
   `.nav-r a[href*="/app/"]` and it matches nothing: the two auth buttons live
   in `#navAuth`, a SIBLING of `.nav-r`, and are rewritten by nav-auth.js when
   somebody signs in. Restyling them is a change to a script's output rather
   than to a stylesheet, and the bundle says to report a selector that does not
   match rather than to work around it.
   =========================================================================== */

/* F3 · the bone primary is ALREADY IN tokens.css, adopted with the reposition,
   and the bundle says this block is a no-op if that landed. It did. The only
   part not already covered is the sticky bar, whose button keeps `.btn-red` in
   the markup on purpose so a signed-out reader still gets one red action on a
   phone. That one is left as it is: making it bone is the same decision as the
   header button, which DQ has held. */

/* F7 · Oswald, set optically. Condensed uppercase wants tracking to go NEGATIVE
   as size goes up; flat positive tracking from 13px to 120px is why the hero
   reads loose at desktop and tight on a phone. The +.03em at label size is
   correct there and is untouched. */
.hero h1{letter-spacing:-.012em;line-height:.88}
.sec-title{letter-spacing:-.006em;line-height:.94}
@media (max-width:640px){
  .hero h1{letter-spacing:.004em;line-height:.92}
  .sec-title{letter-spacing:.008em;line-height:.98}
}
/* Optical hang: a left-aligned Oswald cap at display size sits visually inset
   because the sidebearing is part of the glyph. One pixel per 40px of type. */
.hero h1{margin-left:-.02em}

/* F8 · the hero stroke word. It was red at the largest size on the page, and a
   fixed 2px stroke is proportionally heavy at 52px and thin at 120px, so it
   rendered as a different weight on a phone and on a desktop. Bone at 42 per
   cent, stroke scaled with the type. */
.hero h1 .stroke{
  -webkit-text-stroke:clamp(1px,.017em,2.2px) rgba(237,233,227,.42);
  color:transparent
}

/* F9 · vertical rhythm. Nine sections, one padding value, one hairline top
   border: no joints and no arrival. Two grounds for the whole page.
   `.sec-fill` drops its top border because the ground change IS the joint.
   Three sections and no others: the coach hub, pricing, enquire. */
.sec-fill{
  border-top:0;
  background:linear-gradient(180deg,var(--coal),var(--ink))
}
.sec-air{padding-top:clamp(64px,9vw,124px);padding-bottom:clamp(64px,9vw,124px)}

/* F10 · prices as dials. The figure each tier is built around was set like a
   label. Oswald with tabular figures so it never shifts width, unit small in
   mono beside it, a hairline under it. */
:root{--t-dial-sm:54px}
.tier .price{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:var(--t-dial-sm);line-height:.92;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--bone);
  display:flex;align-items:baseline;gap:8px;
  padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid var(--line)
}
.tier .price .pr-unit{
  font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer,#86868E);align-self:center;position:relative;top:2px
}
.tier .pr-unitprice{
  display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer,#86868E);
  margin-top:-4px;margin-bottom:14px;font-variant-numeric:tabular-nums
}

/* F11 · one accent in the hero. The gold free-tools box and the red guides box
   sat side by side, and both link to free things, so the red one was
   miscoloured by the system's own rule. Differentiated by fill weight rather
   than by hue. */
.guidebox{
  border-color:rgba(255,210,31,.75);
  background:rgba(255,255,255,.035)
}
.guidebox:hover{border-color:var(--gold);background:rgba(255,255,255,.06)}
.guidebox b{color:var(--bone)}
.guidebox:hover b{color:var(--gold)}

/* F14 · the swipe affordance becomes visual. The sentence was present at
   desktop widths where there is nothing to swipe, and it appeared twice. Gated
   to the width where the grid actually becomes a rail, with a right-edge fade
   doing the work instead.

   `.shot-rail`, not the bundle's `.coach-rail`/`.app-rail`, which do not exist.
   `.cred-cols` is on /about rather than on this page and is included because
   the same rail treatment applies wherever it renders. */
.swipe-hint{display:none}
@media (max-width:1100px){
  .swipe-hint{display:block}
  .shot-rail,.cred-cols{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%)
  }
}

/* F16 · the pricing footnote. */
.pricing-note{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--dimmer,#86868E);margin-top:18px
}
.pricing-note sup{font-size:.85em;top:-.35em;position:relative}

/* F17 · the measure lines scroll with the page. `position:fixed` meant the
   platform motif did not move while the content over it did, which reads as a
   screen overlay rather than as something the page stands on. */
body::before{position:absolute;inset:0 0 auto 0;height:100%;opacity:.34}

/* F18 · THE FOCUS RING IS UNCHANGED AND MUST STAY RED. Recorded here, as the
   bundle asks, so that nobody removes it while removing red elsewhere:

     :focus-visible{border-color:var(--red);
                    box-shadow:0 0 0 3px rgba(192,57,43,.16)}

   The integration mark row is NOT shipped. It needs three assets that do not
   exist in this repo, and the bundle is explicit that text or emoji stand-ins
   are not acceptable. */


/* ===========================================================================
   THE EIGHT LINES THAT CARRY THE ARGUMENT, SET BIG ENOUGH TO READ.

   DQ, 29 August 2026: "These are really important points, and you're not
   calling them out."

   MEASURED BEFORE CHANGING ANYTHING, because the sizes are the finding. The
   two shot captions and the two lines in every price card were the smallest
   type on the page, and three of the four are the only place the page states
   what a licence actually buys:

     .shot .cap b     13.5px   Bar tracking, built in / Recovery in context
     .shot .cap span  13px     what each screenshot is showing
     .tier .from      9px      SOLO / PRACTICE / ROSTER
     .tier .term      9px      up to 10 / up to 30 / unlimited athletes

   NINE PIXELS. The roster count is the whole basis of the pricing model and it
   was set two points below the footnote. Mono at 9px with .14em of tracking is
   a label on a diagram, not a line somebody reads and decides on.

   Appended rather than edited in place, so the original values stay visible in
   the diff and a revert is one deletion. */
.shot .cap b{font-size:17px; letter-spacing:.03em; line-height:1.15}
.shot .cap span{font-size:15px; line-height:1.5; margin-top:7px; color:#9A9AA0}
.tier .from{font-size:13px; letter-spacing:.16em}
.tier .term{font-size:13px; letter-spacing:.1em; margin-top:10px}

/* "Unlimited" underscored, his word for it. It is the one term in the three
   that is not a number, and it is what the top tier is for.

   UNDERLINED TEXT THAT IS NOT A LINK IS A RISK and it is taken deliberately
   here: the offset and thickness are set so it reads as a rule under a word
   rather than as the site's link treatment, which is a solid 1px on the text
   baseline in gold or bone. Nothing else in this card is interactive, so there
   is nothing for it to be confused with. */
.tier .term-em{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:rgba(255,210,31,.75);
  color:var(--bone)
}

/* ---- LAUNCHING SOON, in place of the price cards, 26 September 2026 ---- */
.launch{margin-top:22px; border:1px solid rgba(255,210,31,.75); border-top:4px solid var(--gold);
  background:rgba(255,255,255,.035); padding:clamp(22px,3vw,34px); max-width:640px}
.launch-h{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,4vw,40px); line-height:1.05; color:var(--bone); margin:0}
.launch-s{margin:10px 0 18px; color:#bdb8b0; font-size:16px}
@media(max-width:560px){.launch .btn{display:block; text-align:center}}

/* ---- A GOLD THAT IS ALIVE, AND A BUTTON THAT BREATHES, 26 September 2026 ----
   DQ: the gold "needs to be maybe like a neon colour ... something that pops
   and feels alive, and even Register Interest pulsates." The marketing pages
   only: tokens.css keeps the house gold for the app and the coach hub. */
:root{--gold-hi:var(--gold)}
@keyframes dq-pulse{
  0%{box-shadow:0 0 0 0 rgba(231,76,60,.55)}
  70%{box-shadow:0 0 0 14px rgba(231,76,60,0)}
  100%{box-shadow:0 0 0 0 rgba(231,76,60,0)}
}
a.btn-red[href$="#enquire"]{animation:dq-pulse 2.2s ease-out infinite}
@media (prefers-reduced-motion: reduce){a.btn-red[href$="#enquire"]{animation:none}}
@keyframes dq-pulse-light{
  0%{box-shadow:0 0 0 0 rgba(237,233,227,.5)}
  70%{box-shadow:0 0 0 14px rgba(237,233,227,0)}
  100%{box-shadow:0 0 0 0 rgba(237,233,227,0)}
}
a.btn:not(.btn-red)[href$="#enquire"]{animation:dq-pulse-light 2.2s ease-out infinite}
@media (prefers-reduced-motion: reduce){a.btn[href$="#enquire"]{animation:none}}