/* =========================================================================
   RocketClass — marketing-only layers split out of class.css so the booking
   flow stops shipping them: .mkt-* (site sections), .pr-* (pricing), .cmp/
   .calc (compare page), .gs-* (screenshot frames). Load AFTER class.css —
   relative rule order from the original file is preserved. .dir-* and .pro-*
   stay in class.css: the club landing page and /explore share them.
   ========================================================================= */

.mkt-nav__links { display: none; }
@media (min-width: 760px) {
.mkt-nav__links { display: flex; gap: 24px; margin-right: 18px; align-items: center; }
.mkt-nav__links a { text-decoration: none; color: var(--cr-slate);
    font-family: var(--cr-display); font-weight: 700; font-size: .98rem; }
.mkt-nav__links a:hover { color: var(--cr-ink); }
.mkt-nav__links a.is-on { color: var(--primary); }
}
.mkt-hero { display: grid; gap: 36px; padding: 40px 0 26px; align-items: center; }
@media (min-width: 900px) {
.mkt-hero { grid-template-columns: 1.05fr .95fr; padding: 56px 0 40px; }
}
.mkt-hero h1 { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.025em;
               font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.05; color: var(--d-ink); margin: 10px 0 14px; }
.mkt-hero__sub { color: var(--d-slate); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; margin: 0 0 20px; }
.mkt-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* Headlines break evenly rather than stranding one word on the last line
   ("…on your / bookings."). Sub-heads get `pretty`, which only fixes orphans. */
.mkt-hero h1, .vh h1, .vs-hero h1, .gd__hero h1, .mkt-cta h2, .dir-kicker h2, .dir-pro h2 { text-wrap: balance; }
.mkt-hero__sub, .dir-kicker p { text-wrap: pretty; }
@media (max-width: 620px) {
  /* Phones: the buttons fill the column. A lone auto-width button under a
     full-width heading looks like it stopped short of the edge by mistake. */
  .mkt-hero__cta { flex-direction: column; }
  .mkt-hero__cta .btn, .dir-pro__cta .btn { width: 100%; }
  .dir-pro__cta { flex-direction: column; align-items: stretch; }
}
.mkt-hero__note { color: var(--d-slate2); font-size: .86rem; margin-top: 14px; }
.mkt-hero__note a { color: var(--d-pink); font-weight: 700; }
.mkt-hero--plain { display: block; padding: 44px 0 6px; max-width: 640px; }
.mkt-art { position: relative; }
@media (max-width: 899px) {
.mkt-art { max-width: 480px; }
}
.mkt-art__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px;
                  box-shadow: var(--d-sh-lg, 0 24px 60px -24px rgba(35,26,28,.35)); display: block; }
.mkt-art .cr-offer { position: absolute; left: -26px; bottom: 22px; width: min(340px, 92%);
                     box-shadow: 0 18px 44px -18px rgba(35,26,28,.45); }
/* Phones: tuck the card inside the photo. Must come AFTER the base rule (equal
   specificity, so source order wins) or the -26px desktop offset hangs it off
   the left edge of the screen. */
@media (max-width: 899px) {
.mkt-art .cr-offer { left: 12px; bottom: 12px; }
}
.mkt-sec { padding: 40px 0 12px; }
.mkt-rows { border-top: 1px solid var(--d-line); }
.mkt-row { display: grid; gap: 4px 28px; padding: 15px 2px; border-bottom: 1px solid var(--d-line); }
@media (min-width: 720px) {
.mkt-row { grid-template-columns: 220px 1fr; }
}
.mkt-row b { font-family: var(--cr-display); font-weight: 700; font-size: 15.5px; color: var(--d-ink); }
.mkt-row span { color: var(--d-slate); font-size: 14.5px; line-height: 1.55; }
.mkt-row span a { color: var(--d-pink); font-weight: 700; }
/* A shortcode or a snippet inside a row: a chip, so it reads as something you
   copy rather than as emphasis. */
.mkt-row code { font-size: .92em; background: var(--d-warm); color: var(--d-ink2);
                border: 1px solid var(--d-line); border-radius: 5px; padding: 1px 6px; }
/* =========================================================================
   VERTICAL PAGES (/for/dance-schools and friends)

   The brief for these pages is that they are about the vertical rather than a
   search-replace of the last one, and the design has to carry that as much as
   the copy does: the hero shows a timetable card written in THIS vertical's
   words (grades, stages, belts, age groups), and the vocabulary strip puts
   those words on the page as the club would say them.
   ========================================================================= */
.vh { display: grid; gap: 30px; align-items: center; padding: 38px 0 20px; }
@media (min-width: 900px) {
  .vh { grid-template-columns: 1fr 1.04fr; gap: 56px; padding: 52px 0 34px; }
}
.vh h1 { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.025em;
         font-size: clamp(28px, 4vw, 44px); line-height: 1.08; margin: 0 0 16px; color: var(--d-ink); }
.vh__art { position: relative; }
.vh__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
             border-radius: 18px; box-shadow: var(--d-sh-lg, 0 30px 70px -30px rgba(20,30,60,.28)); }
/* The card overlaps the photo on a wide screen and sits under it on a phone,
   where an overlap would cover the picture it is supposed to sit on. */
/* position:relative, not just a negative margin: a replaced element (the
   photo) paints its content ABOVE a later sibling's block background, so
   without this the card's text floated on the photo with no card under it. */
.vh__card { position: relative; z-index: 1; margin-top: -34px; margin-inline: 14px; }
@media (min-width: 900px) {
  .vh__card { position: absolute; left: -58px; bottom: -30px; width: min(298px, 72%); margin: 0; }
}
.vh__card .ui { box-shadow: 0 30px 60px -26px rgba(20, 30, 60, .55); }

/* The words this vertical actually uses, where a rival would put customer
   logos. We do not have those yet, and inventing them is not an option. */
.vw { border-block: 1px solid var(--d-line); padding: 24px 0; display: grid; gap: 14px; }
@media (min-width: 880px) {
  .vw { grid-template-columns: 270px 1fr; gap: 36px; align-items: center; }
}
.vw__k { font-family: var(--cr-display); font-weight: 700; font-size: 12px; letter-spacing: .1em;
         text-transform: uppercase; color: var(--d-pink); margin: 0 0 6px; }
.vw__p { color: var(--d-slate); font-size: 13.5px; line-height: 1.55; margin: 0; }
.vw__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vw__chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cr-display);
            font-weight: 700; font-size: 13.5px; color: var(--d-ink); background: #fff;
            border: 1px solid var(--d-line); border-radius: 999px; padding: 7px 14px; }
.vw__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                    background: var(--primary); flex: none; }

/* How we fit: cards, not five stacked rows.

   Five cards in three columns leaves an orphan row of two, which reads as the
   grid running out rather than as a decision. The first card spans two columns
   instead, so the row fills: a wide lead card and one beside it, then three
   underneath. It works out at two columns too (lead full width, then two rows
   of two). The lead card is the vertical's most distinctive point, because
   how_we_fit is ordered that way, so the extra room is earned. If a vertical
   ever carries a count that does not fill the grid, the template drops the
   modifier and every card is equal (see the layout test in
   tests/test_vertical_pages.py). */
.vfit { display: grid; gap: 14px; }
@media (min-width: 700px) { .vfit { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vfit { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) {
  .vfit--lead > .vfit__c:first-child { grid-column: span 2; background: var(--d-warm); }
  .vfit--lead > .vfit__c:first-child h3 { font-size: 18px; }
  .vfit--lead > .vfit__c:first-child p { font-size: 15.5px; max-width: 62ch; }
}
.vfit__c { background: #fff; border: 1px solid var(--d-line); border-radius: 14px; padding: 20px 20px 22px;
           box-shadow: var(--d-sh-sm, 0 1px 2px rgba(20,30,60,.05)); }
.vfit__c h3 { display: flex; align-items: center; gap: 10px; font-family: var(--cr-display);
              font-weight: 800; font-size: 16px; letter-spacing: -.01em; color: var(--d-ink);
              margin: 0 0 9px; }
.vfit__c h3 i { display: grid; place-items: center; width: 26px; height: 26px; flex: none;
                border-radius: 8px; background: var(--d-warm); color: var(--primary);
                font-style: normal; font-size: 13px; font-weight: 800; }
.vfit__c p { color: var(--d-slate); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* =========================================================================
   FEATURE SECTIONS (the product pages: /registers, /booking-page)

   A label-and-paragraph list is the right shape for a reference table and the
   wrong one for a page somebody is reading to decide. Stacked, five of them in
   a row read as a wall of text with hairlines in it. These sections alternate
   a short piece of prose against one piece of art, and the art is BUILT, not
   photographed: a small honest diagram of the thing being described (the
   printed sheet, the consent list, the role matrix), in markup, so it stays
   crisp at any density, costs no image weight, and cannot go stale the next
   time the product moves on.
   ========================================================================= */
.fa { display: grid; gap: 26px; align-items: center; }
.mkt-sec--alt { padding-block: clamp(34px, 5.5vw, 68px); }
@media (min-width: 900px) {
  .fa { grid-template-columns: 1fr 1.02fr; gap: 60px; }
  /* Alternate which side the art sits on: a page of identical rows is a
     column of text, a page that alternates is a rhythm. */
  .fa--flip .fa__text { order: 2; }
}
.fa__k { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
         letter-spacing: .1em; text-transform: uppercase; color: var(--d-pink);
         margin: 0 0 10px; }
.fa__text h2 { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.02em;
               font-size: clamp(23px, 2.9vw, 31px); line-height: 1.12; margin: 0 0 14px;
               color: var(--d-ink); }
.fa__text p { color: var(--d-slate); font-size: 16px; line-height: 1.65;
              margin: 0 0 12px; max-width: 48ch; }
.fa__text p:last-child { margin-bottom: 0; }
.fa__text p b { color: var(--d-ink2); font-weight: 700; }
.fa__text a { color: var(--d-pink); font-weight: 700; text-decoration-thickness: 1px;
              text-decoration-color: var(--d-p100); text-underline-offset: 3px; }
.fa__text a:hover { text-decoration-color: currentColor; }
.fa__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--d-line);
            color: var(--d-slate2); font-size: 14px; line-height: 1.55; }

/* ---- The drawn UI panel ------------------------------------------------ */
.ui { background: #fff; border: 1px solid var(--d-line); border-radius: 14px;
      box-shadow: 0 26px 54px -34px rgba(20, 30, 60, .5); overflow: hidden; }
.ui__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
           padding: 11px 15px; background: var(--d-warm); border-bottom: 1px solid var(--d-line);
           font-family: var(--cr-display); font-weight: 700; font-size: 13px; color: var(--d-ink); }
.ui__bar em { font-style: normal; font-family: var(--cr-mono); font-weight: 600;
              font-size: 11.5px; color: var(--d-slate2); }
.ui__body { padding: 4px 15px 12px; }
.ui__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
           padding: 11px 0; border-bottom: 1px solid var(--d-line2); }
.ui__row:last-child { border-bottom: 0; }
.ui--tight .ui__row { padding: 9px 0; }
.ui__name { font-family: var(--cr-display); font-weight: 700; font-size: 13.5px;
            color: var(--d-ink); }
.ui__sub { display: block; color: var(--d-slate); font-size: 12px; line-height: 1.45;
           margin-top: 2px; }
/* Grey bars stand in for the text that is not the point of the picture. */
.ui__ph { display: block; height: 7px; border-radius: 4px; background: #e7ecf4; margin-top: 6px; }
.ui__acts { display: flex; gap: 6px; }
.ui__btn { font-family: var(--cr-display); font-weight: 700; font-size: 11.5px;
           border: 1px solid var(--d-line); border-radius: 6px; padding: 5px 9px;
           color: var(--d-slate); background: #fff; white-space: nowrap; }
.ui__btn--on { background: var(--primary); border-color: var(--primary);
               color: var(--primary-ink, #fff); }
.ui__tick { width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid var(--d-line);
            display: block; }
.ui__flag { display: inline-block; font-family: var(--cr-display); font-weight: 700;
            font-size: 10.5px; letter-spacing: .02em; border-radius: 999px; padding: 3px 8px;
            margin-top: 5px; }
.ui__flag--med { background: #fdf1d4; color: #8a5a08; }
.ui__flag--no { background: #fbe3de; color: #a5341f; }
.ui__flag--ok { background: var(--d-green050, #e8f6ee); color: #17663f; }
.ui__flag--mute { background: var(--d-warm); color: var(--d-slate); }
/* Two little class cards, for the panel that stands in for a club's own site. */
.ui__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 15px 15px; }
.ui__card { border: 1px solid var(--d-line); border-radius: 10px; padding: 10px 11px; }
.ui__card b { display: block; font-family: var(--cr-display); font-weight: 700;
              font-size: 12.5px; color: var(--d-ink); }
.ui__card span { display: block; font-size: 11.5px; color: var(--d-slate); margin-top: 3px; }
.ui__card em { display: block; font-style: normal; font-family: var(--cr-display);
               font-weight: 700; font-size: 11.5px; color: var(--d-pink); margin-top: 7px; }
/* The printed sheet: no chrome, thin rules, a tick column. */
.ui--paper { background: #fff; }
.ui--paper .ui__head { padding: 14px 15px 10px; border-bottom: 2px solid var(--d-ink); }
.ui--paper .ui__head b { display: block; font-family: var(--cr-display); font-weight: 800;
                         font-size: 14px; color: var(--d-ink); }
.ui--paper .ui__head span { display: block; font-size: 11.5px; color: var(--d-slate2);
                            margin-top: 3px; }
.ui__cols { display: grid; grid-template-columns: 1.05fr 1.15fr 1fr 54px; gap: 10px;
            padding: 9px 15px; border-bottom: 1px solid var(--d-line);
            font-family: var(--cr-display); font-weight: 700; font-size: 10.5px;
            letter-spacing: .06em; text-transform: uppercase; color: var(--d-slate2); }
.ui__prow { display: grid; grid-template-columns: 1.05fr 1.15fr 1fr 54px; gap: 10px;
            align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--d-line2); }
.ui__prow:last-child { border-bottom: 0; }
.ui__cols > *, .ui__prow > * { min-width: 0; }
.ui__cols > :last-child, .ui__prow > :last-child { justify-self: center; }
/* A rate bar per row: the attendance report, drawn. */
.ui__meter { display: block; height: 8px; border-radius: 999px; background: #edf1f8;
             overflow: hidden; margin-top: 7px; }
.ui__meter i { display: block; height: 100%; border-radius: 999px; background: var(--d-green, #1b9a5f); }
.ui__pct { font-family: var(--cr-display); font-weight: 800; font-size: 13px; color: var(--d-ink); }
/* Who-sees-what: a small matrix. */
.ui__grid { width: 100%; border-collapse: collapse; }
.ui__grid th, .ui__grid td { padding: 9px 6px; font-size: 12.5px; text-align: center;
                             border-bottom: 1px solid var(--d-line2); }
.ui__grid th:first-child, .ui__grid td:first-child { text-align: left; padding-left: 15px; }
.ui__grid th:last-child, .ui__grid td:last-child { padding-right: 15px; }
.ui__grid thead th { font-family: var(--cr-display); font-weight: 700; font-size: 11px;
                     letter-spacing: .06em; text-transform: uppercase; color: var(--d-slate2); }
.ui__grid tbody th { font-weight: 600; color: var(--d-ink2); text-align: left; }
.ui__grid tbody tr:last-child th, .ui__grid tbody tr:last-child td { border-bottom: 0; }
.ui__yes { color: #17663f; font-weight: 800; }
.ui__no { color: var(--d-slate2); }
/* The address bar, for the page about a club's own address. */
.ui__url { display: flex; align-items: center; gap: 9px; padding: 10px 12px;
           background: var(--d-warm); border-bottom: 1px solid var(--d-line); }
.ui__url > span:not(.ui__dots) { font-family: var(--cr-mono); font-size: 12.5px;
                color: var(--d-ink2); background: #fff; border: 1px solid var(--d-line);
                border-radius: 999px; padding: 5px 12px; flex: 1; }
.ui__dots { display: flex; gap: 5px; }
.ui__dots i { width: 9px; height: 9px; border-radius: 50%; background: #cfd7e3; }
.ui__swatches { display: flex; gap: 7px; align-items: center; }
.ui__swatches i { width: 20px; height: 20px; border-radius: 6px; display: block; }
.ui__swatches i.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--d-ink); }
.ui__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
            color: var(--d-ink); background: var(--d-warm); border: 1px dashed var(--d-line);
            border-radius: 8px; padding: 10px 12px; margin: 10px 0 0; overflow-x: auto; }

.mkt-plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
             max-width: 640px; }
.mkt-plan { background: #fff; border: 1px solid var(--d-line); border-radius: 10px;
            padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.mkt-plan--feature { border-top: 3px solid var(--d-pink); }
.mkt-plan__head { display: flex; align-items: baseline; justify-content: space-between; }
.mkt-plan__name { font-family: var(--cr-display); font-weight: 800; font-size: 1.05rem; }
.mkt-plan__price { font-family: var(--cr-display); font-weight: 800; font-size: 1.9rem; }
.mkt-plan__price span { font-size: .85rem; color: var(--d-slate2); font-weight: 700; }
.mkt-plan__blurb { color: var(--d-slate); font-size: .92rem; margin: 0; }
.mkt-plan__features { list-style: none; margin: 2px 0 8px; padding: 0; display: flex;
                      flex-direction: column; gap: 7px; }
.mkt-plan__features li { font-size: .92rem; padding-left: 22px; position: relative; }
.mkt-plan__features li::before { content: "✓"; position: absolute; left: 0; color: #1c7c3c; font-weight: 800; }
.mkt-plan .btn { margin-top: auto; }
.mkt-faq { max-width: 640px; border-top: 1px solid var(--d-line); }
.mkt-faq details { border-bottom: 1px solid var(--d-line); padding: 14px 2px; }
/* Styled disclosure: the site's chevron instead of the stock triangle, coral
   when open, and a bigger tap row. */
.mkt-faq summary { font-family: var(--cr-display); font-weight: 700; cursor: pointer;
  font-size: .98rem; list-style: none; position: relative; padding: 4px 34px 4px 0; }
.mkt-faq summary::-webkit-details-marker { display: none; }
.mkt-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -7px;
  border-right: 2.2px solid var(--d-slate2); border-bottom: 2.2px solid var(--d-slate2);
  transform: rotate(45deg); transition: transform .15s ease; }
.mkt-faq details[open] summary { color: var(--d-pink); }
.mkt-faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px;
  border-color: var(--d-pink); }
.mkt-faq summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px;
  border-radius: 4px; }
.mkt-faq p { color: var(--d-slate); font-size: .93rem; line-height: 1.55; margin: 10px 0 0; max-width: 56ch; }
.mkt-cta { padding: 44px 0 10px; max-width: 640px; }
/* Centred close for the alternating pages: after five sections that swap
   sides, ending hard against the left margin reads as the page giving up. */
.mkt-sec--mid { text-align: center; }
.mkt-sec--mid .dir-kicker, .mkt-sec--mid .mkt-faq, .mkt-sec--mid .mkt-cta {
  margin-inline: auto; }
.mkt-sec--mid .mkt-faq { text-align: left; }
.mkt-sec--mid .mkt-hero__cta { justify-content: center; }
.mkt-cta h2 { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.02em;
              font-size: clamp(1.4rem, 3.4vw, 1.8rem); margin: 0 0 16px; }
.mkt-prose { max-width: 620px; line-height: 1.65; }
.mkt-prose p { color: var(--d-ink2); margin: 0 0 14px; }
.mkt-prose h2 { font-family: var(--cr-display); font-weight: 800; font-size: 1.25rem; margin: 24px 0 10px; }
.mkt-prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--d-ink2); }
.mkt-prose a { color: var(--d-pink); font-weight: 700; }
@media (max-width: 899px) {
.mkt-nav { flex-wrap: wrap; }
.mkt-nav .dir-nav__cta { display: inline-block; padding: 8px 13px; font-size: .85rem;
                           white-space: nowrap; }
.mkt-nav .mkt-nav__links { display: flex; flex-basis: 100%; order: 9; gap: 18px;
                             overflow-x: auto; white-space: nowrap; padding: 6px 2px 4px;
                             scrollbar-width: none; }
.mkt-nav .mkt-nav__links::-webkit-scrollbar { display: none; }
.mkt-nav .mkt-nav__links a { text-decoration: none; color: var(--d-ink2);
                               font-weight: 600; font-size: 14px; }
.mkt-nav .mkt-nav__links a.is-on { color: var(--d-pink); }
}
.mkt-foot { border-top: 1px solid var(--d-line); }
/* The vertical links get their own full-width row under the main footer
   links (class.css makes .dir-pro__links display:contents, so override). */
.mkt-foot__verts { display: flex; flex-wrap: wrap; gap: 8px 16px;
  flex-basis: 100%; order: 10; padding-top: 10px;
  border-top: 1px dashed var(--d-line); }
/* Credits close the footer, after the vertical links row. */
.mkt-credits { order: 11; }
.mkt-foot .brand { color: var(--d-ink); }
.mkt-foot a { color: var(--d-ink2); }
.mkt-foot a:hover { color: var(--d-pink); }
.gs-steps { display: flex; flex-direction: column; gap: clamp(40px, 7vw, 88px); padding: 20px 0 8px; }
.gs-step { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) {
.gs-step { grid-template-columns: 1fr 1.15fr; gap: 56px; }
.gs-step--flip .gs-step__text { order: 2; }
}
.gs-step__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: var(--primary-ink, #fff); font-family: var(--cr-display); font-weight: 800;
  font-size: 18px; margin-bottom: 16px; }
.gs-step__kicker { font-family: var(--cr-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--d-pink); margin: 0 0 8px; }
.gs-step__title { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.08; margin: 0 0 12px; color: var(--d-ink); }
.gs-step__body { color: var(--d-ink2); font-size: 16.5px; line-height: 1.6; margin: 0; max-width: 46ch; }
.gs-shot { margin: 0; border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--d-line); box-shadow: var(--d-sh-lg, 0 30px 70px -30px rgba(35,26,28,.4)); }
.gs-shot__bar { display: flex; gap: 7px; align-items: center; padding: 11px 14px;
  background: #eef2f7; border-bottom: 1px solid var(--d-line); }
.gs-shot__bar i { width: 11px; height: 11px; border-radius: 50%; background: #c7d0dc; }
.gs-shot img { display: block; width: 100%; height: auto; }
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* The table scrolls sideways on a phone but the scrollbar is invisible until
   touched, so the cut-off column just looked broken: fade the right edge as
   the cue, and lift the fade once the last column is in view. */
@media (max-width: 640px) {
.cmp-wrap { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
            -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.cmp-wrap.is-end { mask-image: none; -webkit-mask-image: none; }
}
.cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { text-align: left; padding: 15px 18px; font-size: 15px; vertical-align: top;
  border-bottom: 1px solid var(--d-line); }
.cmp thead th { font-family: var(--cr-display); font-weight: 800; font-size: 16px; color: var(--d-ink);
  border-bottom: 2px solid var(--d-ink); }
.cmp tbody th { font-weight: 600; color: var(--d-ink2); width: 34%; }
.cmp td { color: var(--d-slate); }
.cmp .cmp--us { background: var(--d-p050, #fdf1ec); color: var(--d-ink); }
.cmp thead .cmp--us { color: var(--d-pink); border-bottom-color: var(--primary); }
.cmp .cmp--us b { color: var(--d-ink); }
.cmp-y { color: #2fa876; font-weight: 800; }
.cmp-note { color: var(--d-slate2); font-size: 12.5px; margin: 12px 2px 0; line-height: 1.5; }
.cmp-note a { color: var(--d-pink); font-weight: 600; }
.cmp-cta-h { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(24px, 3.2vw, 34px); margin: 0; }
.calc { display: grid; gap: 20px; }
@media (min-width: 820px) {
.calc { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
}
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pr-chip { font-family: var(--cr-display); font-weight: 700; font-size: 12.5px;
  color: var(--d-ink2); background: #fff; border: 1px solid var(--d-line);
  border-radius: 999px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px; }
.pr-chip::before { content: "✓"; color: #2fa876; font-weight: 800; }

.pr-plans { display: grid; gap: 18px; max-width: 720px; align-items: stretch; }
@media (min-width: 680px) {
.pr-plans { grid-template-columns: 1fr 1fr; }
}
.pr-plan { position: relative; background: #fff; border: 1px solid var(--d-line);
  border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--d-sh-sm, 0 1px 2px rgba(35,26,28,.05)); }
.pr-plan--pop { border: 1.5px solid var(--primary); box-shadow: 0 24px 50px -28px rgba(200,68,44,.5); }
.pr-plan__ribbon { position: absolute; top: -12px; left: 24px; background: var(--primary);
  color: var(--primary-ink, #fff);
  font-family: var(--cr-display); font-weight: 800; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.pr-plan__name { font-family: var(--cr-display); font-weight: 800; font-size: 1.15rem; color: var(--d-ink); }
.pr-plan__blurb { color: var(--d-slate); font-size: .93rem; margin: 0 0 8px; line-height: 1.45; }
.pr-plan__price { font-family: var(--cr-display); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: var(--d-ink); }
.pr-plan__price small { font-size: .9rem; font-weight: 700; color: var(--d-slate2); margin-left: 3px; }
.pr-plan__meta { color: var(--d-slate2); font-size: 12.5px; margin: 8px 0 16px; }
.pr-plan .btn--block { width: 100%; justify-content: center; }
.pr-plan__features { list-style: none; margin: 18px 0 0; padding: 16px 0 0; display: flex;
  flex-direction: column; gap: 10px; border-top: 1px solid var(--d-line); }
.pr-plan__features li { font-size: .93rem; color: var(--d-ink2); padding-left: 26px; position: relative;
  line-height: 1.4; }
.pr-plan__features li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: #2fa876; font-weight: 800; }
.pr-plan--pop .pr-plan__features li:first-child { font-weight: 700; color: var(--d-ink); }
.pr-note { color: var(--d-slate); font-size: 13px; margin: 18px 2px 0; max-width: 640px; line-height: 1.55; }
.cmp--wide { min-width: 720px; }
@media (max-width: 899px) {
.cmp--wide tbody th, .cmp--wide thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--d-bg, #fff);
    box-shadow: 1px 0 0 var(--d-line); }
}
.cmp--wide th, .cmp--wide td { padding: 13px 14px; font-size: 14px; }
.cmp--wide thead th { font-size: 14.5px; text-align: center; }
.cmp--wide thead th:first-child { text-align: left; }
.cmp--wide tbody th { width: 22%; font-size: 14px; }
.cmp--wide td { text-align: center; }
.cmp--wide .cmp--us { text-align: center; }
.cmp--wide .cmp-y { display: inline-block; }
@media (min-width: 900px) {
.cmp--wide { min-width: 0; width: 100%; }
}
.pr-page { max-width: 820px; margin: 0 auto; text-align: center; }
.pr-page .pr-hero { max-width: 100%; }
.pr-page .mkt-hero__sub { margin-left: auto; margin-right: auto; }
.pr-page .pr-chips, .pr-page .mkt-hero__cta { justify-content: center; }
.pr-page .dir-kicker p { margin-left: auto; margin-right: auto; }
.pr-page .pr-plans { margin-left: auto; margin-right: auto; }
.pr-page .mkt-rows { text-align: left; margin-left: auto; margin-right: auto; }
.pr-page .mkt-faq { text-align: left; margin-left: auto; margin-right: auto; }
.pr-page .mkt-cta { margin-left: auto; margin-right: auto; }
.pr-page .pr-plan { text-align: left; }
.pr-page .pr-note { margin-left: auto; margin-right: auto; }
.pr-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 620px) {
.pr-photos { grid-template-columns: repeat(2, 1fr); }
}
.pr-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px;
  border: 1px solid var(--d-line); }
.pr-photos__cap { color: var(--d-slate); font-size: 14px; margin: 14px 0 0; max-width: 560px; }
.mkt-credits { flex-basis: 100%; margin-top: 2px; }
.mkt-credits summary { cursor: pointer; font-size: 12.5px; color: var(--d-slate);
                       list-style: none; }
.mkt-credits summary::-webkit-details-marker { display: none; }
.mkt-credits summary:hover { color: var(--d-ink); }
.mkt-credits p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6;
                 color: var(--d-slate); max-width: 72ch; }
.mkt-credits a { color: var(--d-slate); text-decoration: underline; }
.mkt-credits a:hover { color: var(--d-ink); }

/* =========================================================================
   PRE-LAUNCH SPLASH (prelaunch.html)

   Shown only on the two signup doors, so everyone who sees it has already
   looked at the product and decided to act. It wears the site's own dark band
   (#241a1c, the "Run classes?" treatment on the homepage) rather than another
   sheet of white: this is a different moment in the journey, and the coral
   reads at full strength against it.

   One column of argument, one photograph, one field. The confirmation is the
   only place anything gets loud.
   ========================================================================= */
.ps { background: #241a1c; color: #fff; min-height: 100dvh; display: flex; }
.ps__wrap { width: 100%; max-width: 1120px; margin: 0 auto;
            padding: 22px clamp(18px, 5vw, 40px) 28px;
            display: flex; flex-direction: column; }

/* ---- chrome ------------------------------------------------------------ */
.ps__top { display: flex; align-items: center; justify-content: space-between;
           gap: 16px; padding-bottom: clamp(28px, 6vw, 56px); }
.ps__brand { display: inline-flex; align-items: center; gap: 10px;
             color: #fff; text-decoration: none;
             font-family: var(--cr-display); font-weight: 800; font-size: 1.05rem;
             letter-spacing: -.01em; }
.ps__back { color: #d8ccc8; text-decoration: none; font-size: .88rem; font-weight: 600; }
.ps__back:hover { color: #fff; text-decoration: underline; }

/* ---- the argument ------------------------------------------------------ */
.ps__grid { flex: 1; display: grid; gap: clamp(30px, 6vw, 56px); align-items: center;
            padding-bottom: clamp(28px, 5vw, 48px); }
@media (min-width: 900px) { .ps__grid { grid-template-columns: 1.02fr .98fr; } }

.ps__eyebrow { font-family: var(--cr-display); font-weight: 700; font-size: 12.5px;
               letter-spacing: .16em; text-transform: uppercase; color: #ffb59f;
               margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
/* A short rule reading out of the eyebrow, echoing the homepage's hero mark. */
.ps__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--primary);
                       flex: none; }
.ps__h { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.03em;
         font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: .96; color: #fff;
         margin: 0 0 20px; }
/* What they were doing when they were stopped, said back to them. */
.ps__said { font-family: var(--cr-display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.3rem);
            color: #fff; margin: 0 0 8px; letter-spacing: -.01em; }
.ps__sub { color: #d8ccc8; font-size: 1.02rem; line-height: 1.6; margin: 0 0 28px;
           max-width: 44ch; text-wrap: pretty; }
.ps__links { color: #a89a96; font-size: .88rem; margin: 22px 0 0; }
.ps__links a { color: #ffb59f; font-weight: 700; }

/* ---- photograph -------------------------------------------------------- */
.ps__art { position: relative; margin: 0; border-radius: 14px; overflow: hidden;
           aspect-ratio: 4 / 5; max-height: 62vh; }
.ps__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) { .ps__art { aspect-ratio: 16 / 10; max-height: none; } }
/* A dated stamp, not a floating "feature card": it says the one fact the
   photograph cannot. */
.ps__stamp { position: absolute; left: 14px; bottom: 14px;
             background: rgba(36,26,28,.82); backdrop-filter: blur(6px);
             border-radius: 9px; padding: 9px 14px; display: flex; flex-direction: column; }
.ps__stamp-k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
               color: #ffb59f; font-weight: 700; }
.ps__stamp-v { font-family: var(--cr-display); font-weight: 800; font-size: 1.15rem;
               color: #fff; letter-spacing: -.01em; }

/* ---- capture ----------------------------------------------------------- */
.ps__form { max-width: 470px; }
.pl__row { display: flex; align-items: center; gap: 6px; background: #fff;
           border-radius: 8px; padding: 6px; }
.pl__row:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 55%, transparent); }
.pl__input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent;
             font-family: var(--cr-mono); font-size: 16px; padding: 12px 6px 12px 12px;
             /* Fallback matters: --d-ink is only set under .dir/.xp, and the
                splash (.ps) is neither, so without it the input inherits the
                splash's white text and types invisibly on the white row. */
             color: var(--d-ink, #17203a); }
.pl__input::placeholder { color: #6e7686; }
.pl__go { flex: none; border: 0; cursor: pointer; border-radius: 6px;
          background: var(--primary); color: var(--primary-ink, #fff);
          font-family: var(--cr-mono); font-weight: 700; font-size: .95rem;
          padding: 13px 18px; transition: filter .12s ease; }
.pl__go:hover { filter: brightness(1.08); }
.pl__go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pl__who { display: flex; gap: 8px; border: 0; margin: 12px 0 0; padding: 0; }
.pl__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pl__opt span { display: inline-block; cursor: pointer; padding: 7px 14px;
                border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
                font-size: .84rem; font-weight: 700; color: #d8ccc8;
                transition: border-color .12s, color .12s, background .12s; }
.pl__opt input:checked + span { border-color: var(--primary); color: #fff;
                                background: color-mix(in srgb, var(--primary) 26%, transparent); }
.pl__opt input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.pl__consent { color: #a89a96; font-size: .8rem; line-height: 1.55; margin: 14px 2px 0;
               max-width: 46ch; }
.pl__consent a { color: #ffb59f; font-weight: 700; }
.pl__err { background: rgba(255,181,159,.14); color: #ffb59f; border-radius: 8px;
           padding: 10px 14px; font-size: .86rem; font-weight: 700; margin: 0 0 10px; }

/* ---- confirmation: the one loud moment --------------------------------- */
.pl-done { border-left: 3px solid var(--primary); padding: 2px 0 2px 20px; }
.pl-done__k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
              color: #ffb59f; font-weight: 700; margin: 0 0 2px; }
.pl-done__n { font-family: var(--cr-display); font-weight: 800; color: #fff;
              font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1; margin: 0;
              letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pl-done__n span { font-size: .38em; vertical-align: super; margin-left: 2px;
                   color: var(--primary); letter-spacing: 0; }
.pl-done__s { color: #d8ccc8; font-size: 1rem; line-height: 1.55; margin: 10px 0 0;
              max-width: 40ch; }
@media (prefers-reduced-motion: no-preference) {
  .pl-done { animation: ps-in .32s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes ps-in { from { opacity: 0; transform: translateY(6px); } }
}

/* ---- footer ------------------------------------------------------------ */
.ps__foot { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.13); font-size: .84rem; }
.ps__foot a { color: #a89a96; text-decoration: none; }
.ps__foot a:hover { color: #fff; }

@media (max-width: 559px) {
  .ps__h { font-size: clamp(2.2rem, 11vw, 3rem); }
  .pl__row { flex-wrap: wrap; }
  .pl__input { flex-basis: 100%; }
  .pl__go { width: 100%; }
}

/* ---- /explore while gated ------------------------------------------------
   The filters, the map and the whole search UI stay live so a parent can see
   what the product will do. Only the results column changes, and it says why
   it is empty rather than returning nothing. Light surface, because this one
   sits inside the normal site rather than replacing it. */
.xp-soon { background: #fff; border: 1px solid var(--d-line); border-radius: 14px;
           padding: clamp(24px, 4vw, 40px); box-shadow: var(--d-sh-sm); }
.xp-soon__k { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
              letter-spacing: .16em; text-transform: uppercase; color: var(--d-pink);
              margin: 0 0 12px; display: flex; align-items: center; gap: 12px; }
.xp-soon__k::before { content: ""; width: 24px; height: 2px; background: var(--primary); flex: none; }
.xp-soon__h { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.025em;
              font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.08;
              color: var(--d-ink); margin: 0 0 12px; }
.xp-soon__s { color: var(--d-slate); font-size: 1rem; line-height: 1.6; margin: 0 0 24px;
              max-width: 46ch; }
.xp-soon__form { max-width: 470px; }
/* The capture is dark-on-light here, so the pieces that assumed the splash's
   dark ground are restated for this surface. */
.xp-soon .pl__row { border: 1px solid var(--d-line); }
.xp-soon .pl__opt span { border-color: var(--d-line); color: var(--d-slate); background: #fff; }
.xp-soon .pl__opt input:checked + span { border-color: var(--primary); color: var(--primary);
                                         background: color-mix(in srgb, var(--primary) 8%, #fff); }
.xp-soon .pl__opt input:focus-visible + span { outline-color: var(--primary); }
.xp-soon .pl__consent { color: var(--d-slate2); }
.xp-soon .pl__consent a { color: var(--d-pink); }
.xp-soon .pl__go:focus-visible { outline-color: var(--primary); }
.xp-soon .pl__err { background: var(--cr-amber-bg); color: var(--cr-amber-ink); }
.xp-soon .pl-done { border-left-color: var(--primary); }
.xp-soon .pl-done__k { color: var(--d-pink); }
.xp-soon .pl-done__n { color: var(--d-ink); }
.xp-soon .pl-done__s { color: var(--d-slate); }

/* Footnote marker on the "keep 100%" claims: small, coral, and a real in-page
   link to the note, so the caveat is attached to the claim rather than only
   sitting underneath it. */
.cmp-fn { color: var(--d-pink); text-decoration: none; font-weight: 800;
          font-size: .8em; vertical-align: super; margin-left: 1px; }
.cmp-fn:hover, .cmp-fn:focus-visible { text-decoration: underline; }
#fee-note { scroll-margin-top: 90px; }

/* =========================================================================
   HEAD-TO-HEAD PAGES (/compare/<slug>)
   Same grammar as the multi-way table, with two additions: a cell style for
   the rows the competitor wins, and a citation block. Both exist so the page
   reads as evidence rather than as a pitch.
   ========================================================================= */
.vs-hero { max-width: 720px; padding: 44px 0 8px; }
.vs-eyebrow { font-family: var(--cr-display); font-weight: 700; font-size: 12.5px;
              letter-spacing: .14em; text-transform: uppercase; color: var(--d-pink);
              margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.vs-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--primary); flex: none; }
.vs-hero h1 { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.028em;
              font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.06;
              color: var(--d-ink); margin: 0 0 16px; text-wrap: balance; }
.vs-what { font-family: var(--cr-display); font-weight: 700; color: var(--d-ink);
           font-size: 1.02rem; margin: 0 0 10px; }

/* A row the competitor wins: their cell gets the tick, ours goes quiet. Losing
   a row in public is the price of being believed on the others. */
.cmp td.vs-win { color: var(--d-ink); font-weight: 700; }
.cmp td.cmp--us.vs-loss { color: var(--d-slate2); font-weight: 400; }

.vs-src { max-width: 760px; margin-top: 26px; padding: 20px 22px;
          background: var(--d-warm); border-radius: 12px; }
.vs-src__k { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
             letter-spacing: .12em; text-transform: uppercase; color: var(--d-slate);
             margin: 0 0 10px; }
.vs-src ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.vs-src li { font-size: .88rem; line-height: 1.6; color: var(--d-slate); }
.vs-src a { color: var(--d-pink); font-weight: 700; }
.vs-src__note { font-size: .82rem; color: var(--d-slate2); margin: 14px 0 0; line-height: 1.6; }

.vs-fair { max-width: 720px; border-left: 3px solid var(--primary); padding: 4px 0 4px 20px; }
.vs-fair__k { font-family: var(--cr-display); font-weight: 800; font-size: 1.05rem;
              color: var(--d-ink); margin: 0 0 8px; }
.vs-fair p { color: var(--d-slate); font-size: 1rem; line-height: 1.65; margin: 0; }

/* Links from the overview table into the head-to-head pages. */
.cmp-heads { margin-top: 28px; }
.cmp-heads__k { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
                letter-spacing: .12em; text-transform: uppercase; color: var(--d-slate);
                margin: 0 0 12px; }
.cmp-heads__row { display: grid; gap: 10px;
                  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* Label-only tiles (the club-type list): two across on a phone rather than
   eight full-width bars, which was a screen and a half of scrolling. */
.cmp-heads__row--tight { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cmp-heads__row--tight .cmp-head { padding: 12px 14px; justify-content: center; }
.cmp-heads__row--tight .cmp-head b { font-size: .92rem; }
.cmp-head { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
            border: 1px solid var(--d-line); border-radius: 10px; background: #fff;
            text-decoration: none; transition: border-color .12s, transform .12s; }
.cmp-head:hover { border-color: var(--d-p100); transform: translateY(-1px); }
.cmp-head b { font-family: var(--cr-display); font-weight: 700; font-size: .96rem;
              color: var(--d-ink); }
.cmp-head span { font-size: .82rem; color: var(--d-slate2); line-height: 1.5; }

/* A rival's pricing ladder, where the SHAPE of their pricing is the argument.
   Numbered because the steps are the point: each rung is more money for more
   bookings. */
.vs-ladder { max-width: 760px; margin-top: 26px; }
.vs-ladder__k { font-family: var(--cr-display); font-weight: 700; font-size: 12px;
                letter-spacing: .12em; text-transform: uppercase; color: var(--d-slate);
                margin: 0 0 12px; }
.vs-ladder__list { list-style: none; margin: 0; padding: 0;
                   border-top: 1px solid var(--d-line); counter-reset: rung; }
.vs-ladder__list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
                      align-items: baseline; padding: 12px 2px;
                      border-bottom: 1px solid var(--d-line); }
@media (min-width: 620px) { .vs-ladder__list li { grid-template-columns: 130px 1fr; } }
.vs-ladder__list b { font-family: var(--cr-display); font-weight: 700; color: var(--d-ink);
                     font-size: .96rem; }
.vs-ladder__list span { color: var(--d-slate); font-size: .9rem; line-height: 1.55; }
.vs-ladder__note { color: var(--d-slate2); font-size: .84rem; line-height: 1.6;
                   margin: 14px 0 0; max-width: 62ch; }

/* =========================================================================
   GUIDE ARTICLES (/guides/<slug>): one centred reading column, article-scale
   headings. The landing grammar (vs-hero, cmp-heads, mkt-cta) still renders
   inside it, narrowed to the column.
   ========================================================================= */
.gd { max-width: 720px; margin: 0 auto; }
.gd__hero { padding-bottom: 2px; }
.gd__hero .vs-eyebrow a { color: var(--d-pink); text-decoration: none; }
.gd__hero .vs-eyebrow a:hover { text-decoration: underline; }
.gd__hero h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); }
.gd__sec { padding: 10px 0 4px; }
.gd-h2 { font-family: var(--cr-display); font-weight: 800; letter-spacing: -.015em;
  font-size: 1.3rem; line-height: 1.25; color: var(--d-ink); margin: 26px 0 10px; }
.gd-p { margin: 0 0 14px; line-height: 1.7; color: var(--d-ink2); font-size: 1.02rem; }
.cmp-head__meta { font-size: .76rem; color: var(--d-slate2); margin-top: 4px;
  font-family: var(--cr-display); font-weight: 700; letter-spacing: .04em; }


/* =========================================================================
   CONTACT (/contact): a form beside the context that makes it answerable.
   ========================================================================= */
.ct-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .ct-grid { grid-template-columns: 1.15fr .85fr; gap: 40px; } }
.ct-h { font-family: var(--cr-display); font-weight: 800; font-size: 1.25rem;
  margin: 0 0 14px; color: var(--d-ink); }
.ct-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.ct-field { display: flex; flex-direction: column; gap: 6px; }
.ct-field > span { font-family: var(--cr-display); font-weight: 700; font-size: 13px;
  color: var(--d-ink2); }
.ct-field .cr-input { width: 100%; }
.ct-field textarea.cr-input { resize: vertical; min-height: 130px; line-height: 1.55; }
.ct-two { display: grid; gap: 14px; }
@media (min-width: 620px) { .ct-two { grid-template-columns: 1fr 1fr; } }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-note { color: var(--d-slate2); font-size: 12.5px; line-height: 1.55; margin: 2px 0 0; }
.ct-note a { color: var(--d-pink); font-weight: 600; }

.ct-done { border-left: 3px solid var(--primary); padding: 2px 0 2px 20px; max-width: 520px; }
.ct-done__tick { display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--cr-green-bg); color: var(--cr-green-ink);
  font-weight: 800; margin-bottom: 10px; }
.ct-done h2 { font-family: var(--cr-display); font-weight: 800; font-size: 1.4rem;
  margin: 0 0 8px; color: var(--d-ink); }
.ct-done p { color: var(--d-slate); line-height: 1.6; margin: 0 0 16px; }

.ct-side { display: flex; flex-direction: column; gap: 20px; }
.ct-card { background: var(--d-warm); border-radius: 14px; padding: 18px 20px; }
.ct-card__k { font-family: var(--cr-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--d-slate2); margin: 0; }
.ct-card__big { font-family: var(--cr-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.02em; color: var(--d-ink); margin: 4px 0 6px; }
.ct-card__s { color: var(--d-slate); font-size: 13px; line-height: 1.55; margin: 0; }
.ct-rows { border-top: 1px solid var(--d-line); }
.ct-row { padding: 14px 2px; border-bottom: 1px solid var(--d-line); }
.ct-row b { display: block; font-family: var(--cr-display); font-weight: 700;
  font-size: 14.5px; color: var(--d-ink); margin-bottom: 3px; }
.ct-row span { color: var(--d-slate); font-size: 13.2px; line-height: 1.55; }
.ct-row a { color: var(--d-pink); font-weight: 600; }


/* ---- imagery on the pages that were text-only ------------------------- */
/* Guide hero: wide and shallow, so it sets a scene without pushing the
   article below the fold. */
.gd__hero-img { margin: 6px 0 26px; border-radius: 14px; overflow: hidden; }
.gd__hero-img img { display: block; width: 100%; height: clamp(160px, 26vw, 260px);
  object-fit: cover; }
/* Guide index cards lead with the picture. */
.cmp-head--img { padding: 0; overflow: hidden; }
/* A 128px letterbox out of a 4:3 photo: bias the crop upward, where the
   subject of every shot in the set sits (a dead-centre crop beheaded the coach). */
.cmp-head--img img { display: block; width: 100%; height: 128px; object-fit: cover;
  object-position: 50% 30%; border-bottom: 1px solid var(--d-line); }
.cmp-head--img b, .cmp-head--img span { padding: 0 16px; }
.cmp-head--img b { padding-top: 14px; }
.cmp-head--img span:last-child { padding-bottom: 14px; }
/* Head-to-head hero: the argument beside the product. */
@media (min-width: 960px) {
  .vs-hero--split { max-width: none; display: grid; gap: 44px;
    grid-template-columns: 1.05fr .95fr; align-items: center; }
  .vs-hero--split > div { max-width: 620px; }
}
.vs-hero__shot { margin: 26px 0 0; }
@media (min-width: 960px) { .vs-hero__shot { margin: 0; } }
.vs-hero__shot img { max-height: 460px; object-fit: cover; object-position: top center; }


/* =========================================================================
   FOOTER (partials/mkt_foot.html)

   One dark band on every page. It used to be two footers: a dark one inside
   the homepage's .dir-pro band and a light one on marketing pages. Sharing
   the partial without sharing the palette put dark text on the dark band, so
   the palette is now part of the component.

   Full-bleed via the margin/padding pair rather than 100vw, which would
   overflow by the width of a scrollbar; .ft__in re-aligns the content with
   .dir-wrap (1160px + 24px gutters).
   ========================================================================= */
/* A panel that floats on the page, not a band cut off at the window edges.
   .ft-wrap mirrors .dir-wrap so the partial does not depend on which wrapper
   it happens to sit in (the homepage and the marketing shell nest it
   differently, and relying on the ancestor broke one of them). The panel's
   OUTER edge lands on the container edge and its own padding puts the content
   back in line with the nav above: 164 to 1276 at 1440. */
.ft-wrap { max-width: 1160px; margin: 0 auto; padding-inline: 24px; }
.ft { background: #241a1c; color: #fff; border-radius: 28px;
  margin: 64px -24px 28px; padding: 40px 24px 26px; }
@media (max-width: 620px) {
  /* Inside the gutters on phones: a 28px radius against the screen edge reads
     as a rendering fault rather than a choice. */
  .ft { margin: 48px 0 24px; padding: 30px 22px 20px; border-radius: 22px; }
}
.ft__in { max-width: 1160px; margin: 0 auto; }
/* Phones: the brand block full width, then the four link groups two across.
   Desktop: brand column plus one column per group. */
.ft__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.ft__brand { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .ft__cols { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
  .ft__brand { grid-column: auto; }
}
.ft__mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--cr-display); font-weight: 800; font-size: 1.05rem; color: #fff; }
.ft__tag { color: #d8ccc8; font-size: 13px; line-height: 1.6; margin: 12px 0 10px;
  max-width: 34ch; }
.ft__mail { color: #ffb59f; font-weight: 700; font-size: 13px; text-decoration: none; }
.ft__mail:hover { text-decoration: underline; }
.ft__wa { display: block; margin-top: 6px; }

/* The group heading is a label, not a control. */
.ft__h { margin: 0 0 8px; font-family: var(--cr-display); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #a89a96; }
.ft__links { display: flex; flex-direction: column; }
.ft__links a { color: #e7dcd8; font-size: 13.5px; line-height: 1.35; text-decoration: none;
  padding: 6px 0; }
.ft__links a:hover { color: #fff; }
@media (min-width: 760px) {
  .ft__links a { font-size: 13.2px; padding: 5px 0; }
}

.ft__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.13);
  color: #a89a96; font-size: 12.5px; }
.ft__credits { margin-left: auto; }
.ft__credits summary { cursor: pointer; list-style: none; color: #a89a96; }
.ft__credits summary::-webkit-details-marker { display: none; }
.ft__credits summary:hover { color: #fff; }
.ft__credits p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: #d8ccc8;
  max-width: 72ch; }
.ft__credits a { color: #d8ccc8; text-decoration: underline; }
.ft__credits a:hover { color: #fff; }

/* ---- Floating WhatsApp bubble (partials/whatsapp_fab.html) ----
   WhatsApp green on purpose: the colour is the recognition. Sits under the
   mega-menu sheet (z 300) and above the phone tab bar (z 20). */
.wa-fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 9px; height: 54px; padding: 0 14px;
  border-radius: 999px; background: #25d366; color: #fff; text-decoration: none;
  font-family: var(--cr-display); font-weight: 700; font-size: 15px; white-space: nowrap;
  box-shadow: 0 10px 26px -8px rgba(18, 140, 70, .6), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.wa-fab:hover { background: #1fbe5b; transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(18, 140, 70, .65), 0 2px 6px rgba(0,0,0,.12); }
.wa-fab:active { transform: translateY(0); }
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #25d366; }
.wa-fab svg { flex: none; }
.wa-fab__label { padding-right: 2px; }
@media (max-width: 899px) {
  /* Icon only, and clear of the tab bar on pages that have one. */
  .wa-fab { width: 54px; padding: 0; justify-content: center; right: 14px; }
  .wa-fab__label { display: none; }
  .dir--tabbar .wa-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } .wa-fab:hover { transform: none; } }