/* ============================================================
   /martial-arts/ platform pillar page - additive stylesheet.

   Loaded AFTER mab.css, which supplies the design tokens, the
   header/hero/footer chrome, and the .duo/.vcard, .against,
   .reviews and .book components this page reuses.

   Deliberately additive: mab.css is shared by the three live
   /martial-arts/{recovery,savings,combined}/ ad landing pages, so
   editing it to suit this page would risk a silent regression on
   three pages currently receiving paid traffic. Everything here is
   either a new class or a scoped override.

   External (CSP style-src 'self'); no inline styles anywhere.
   No em or en dashes anywhere in this repo; scripts/lint-banned-framings.sh
   fails the build on them, including HTML entities.
   ============================================================ */

/* ---------- browser surfaces ----------
   Selection, focus rings and scrollbars ship with defaults that belong to no
   design system. mab.css themes none of them and declares no focus style at
   all, so a keyboard user gets the UA ring against a near-black ground. Scoped
   here rather than in mab.css because that file is shared with three live
   pages. */
::selection{background:rgba(196,35,79,.42);color:#fff}

:focus-visible{
  outline:2px solid var(--coral);
  outline-offset:3px;
  border-radius:4px;
}
/* The CTA is a pill with its own gradient; a rectangular ring around it reads
   as a mistake, so match the shape. */
.cta:focus-visible,.chip:focus-visible{outline-offset:4px;border-radius:999px}

/* mab.css caps h1 at 16ch for the short A/B/C test headlines. This page leads
   with the category keyword, so it needs room. Tracking stays inside the
   -0.04em floor. */
h1.wide{max-width:24ch;letter-spacing:-.028em}

/* ---------- the rank spine ----------
   The subject's own world, used as structure rather than ornament. A belt
   progression is the single most recognisable system in this category and the
   page previously named it in copy and showed nothing.

   Honesty constraint: rank order differs by art (a BJJ academy and a karate
   dojo do not share one ladder), and Belt Tracker is configurable. So the bands
   span the colours common across arts and the caption says explicitly that the
   progression is whatever the school already uses. It is not a claim about one
   discipline's order. */
.spine{margin:34px auto 0;max-width:640px}
.spine-bar{
  display:flex;
  height:14px;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.spine-bar span{flex:1;position:relative}
/* The dark edge each band carries reads as the contrast band on a real belt.
   Note: the word for that detail on a jiu jitsu belt collides with the
   banned-framings lint, which matches the Stripe competitor name as a
   substring. Reworded rather than allowlisted, because an allowlist entry for
   this file would permanently blind it to a genuine Stripe mention. */
.spine-bar span::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:2px;
  background:rgba(0,0,0,.34);
}
.spine-bar span:last-child::after{display:none}
.s-white {background:#EDE9E1}
.s-yellow{background:#E4BE33}
.s-orange{background:#D4762A}
.s-green {background:#2F8B4C}
.s-blue  {background:#2C68AE}
.s-purple{background:#654796}
.s-brown {background:#6A4930}
.s-black {background:#141418;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}

.spine-labels{
  display:flex;margin-top:9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.spine-labels span{flex:1;text-align:center}
.spine-cap{
  margin-top:14px;text-align:center;font-size:13px;color:var(--steel);
  max-width:56ch;margin-left:auto;margin-right:auto;line-height:1.55;
}
@media(max-width:640px){
  /* Eight labels at 320px become unreadable slivers. The bar still carries the
     idea; the caption carries the meaning. */
  .spine-labels{display:none}
  .spine{margin-top:26px}
}

/* ---------- discipline line ----------
   Was eight pills wrapping into three ragged rows, 191px tall at 320px, and
   repeating what the headline already said. Now one quiet line of text: still
   tells a taekwondo school it is included, without spending the first screen
   on decoration. */
.disciplines{
  margin:20px auto 0;max-width:60ch;text-align:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;
  color:var(--dim);line-height:2;
}
.disciplines b{color:var(--steel);font-weight:500}

/* ---------- clusters ----------
   Replaces a 3x4 grid of twelve identically weighted tiles. Twelve equal cards
   flatten the hierarchy (belt tracking is the reason a school chooses ASF; tax
   settings is not) and break the four-item working-memory limit three times
   over. Four named groups match what an owner actually does in a day. */
.cluster{margin:52px 0 0}
.cluster-head{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:12px;margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.cluster-head h2{
  font-family:var(--head);font-weight:800;letter-spacing:-.022em;
  font-size:clamp(21px,2.9vw,27px);margin:0;
}
.cluster-head .of{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;
}

.cluster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cluster-grid.two{grid-template-columns:repeat(2,1fr)}

/* Feature block. mab.css .tile carries an .ic gradient chip; this page emits no
   icon boxes at all. Twelve two-letter codes (BT, SC, CI...) were an undecodable
   key the reader was never given, and a drawn twelve-icon set is not warranted
   when type and grouping already carry it. */
.fb{
  border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  background:var(--panel);
}
.fb h3{
  font-family:var(--head);font-weight:700;font-size:17.5px;letter-spacing:-.012em;
  margin:0 0 8px;
}
.fb p{font-size:14.5px;color:var(--steel);margin:0;line-height:1.6}
.fb .in{
  display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}

/* ---------- the promoted rank feature ----------
   Belt Tracker gets its own block at double width because it is the one
   capability a generic gym product does not have. */
.lead-feature{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid rgba(196,35,79,.42);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(196,35,79,.11),rgba(255,106,91,.02));
  margin-bottom:16px;
}
.lead-copy{padding:30px 32px}
.lead-copy h3{
  font-family:var(--head);font-weight:800;letter-spacing:-.022em;
  font-size:clamp(22px,3vw,29px);line-height:1.1;margin:0 0 12px;
}
.lead-copy p{color:#d5d5de;font-size:15.5px;margin:0 0 16px;line-height:1.6}
.lead-copy ul{list-style:none;margin:0;padding:0}
.lead-copy li{
  display:flex;gap:10px;align-items:flex-start;
  padding:6px 0;font-size:14.5px;color:var(--steel);
}
.lead-copy li b{color:var(--mist);font-weight:600}
.lead-copy .in{
  display:block;margin-top:16px;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
}

/* Drawn icon, one stroke weight, from the inline sprite. No unicode glyph
   standing in for an icon. */
.ic-check{
  flex:0 0 15px;width:15px;height:15px;margin-top:3px;
  color:var(--coral);
}

/* ---------- rank board ----------
   Geometry, not illustration: bars and type a session can specify exactly.
   Labelled as illustrative in the markup, because the values are invented and
   this is not a screenshot of the product. */
.board{
  padding:26px 28px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:0;
}
.board-h{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.rank-row{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.rank-row:last-child{border-bottom:0}
.rank-name{font-size:13.5px;color:var(--mist);font-weight:500}
.rank-meta{
  font-family:var(--mono);font-size:10.5px;color:var(--dim);
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rank-track{
  grid-column:1 / -1;height:5px;border-radius:2px;
  background:rgba(255,255,255,.07);overflow:hidden;
}
/* Widths are classes, not inline styles: style-src is 'self' and the project
   bans inline style attributes outright. Each maps to the criteria count shown
   in the row beside it. */
.rank-fill{display:block;height:100%;border-radius:2px}
.w33{width:33%}
.w60{width:60%}
.w67{width:67%}
.w100{width:100%}

/* ---------- drawn icons ----------
   One authored sprite, one stroke weight, referenced by <use>. Replaces the
   unicode check glyph and the five-character star string that stood in for an
   icon system. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.stars{display:flex;gap:3px;align-items:center}
.stars svg{width:13px;height:13px}

/* mab.css put a coral mono label above each value card headline. That is an
   eyebrow, so it is gone from the markup; the headline is now the first child
   and does not need the offset the label used to create. */
.vcard .hh{margin-top:0}

/* ---------- also included ---------- */
.also{margin:22px 0 0;padding:26px 30px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.also-h{font-family:var(--head);font-weight:700;font-size:16.5px;letter-spacing:-.01em;margin:0 0 16px}
.also ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;margin:0;padding:0}
.also li{font-size:14.5px;color:var(--steel);line-height:1.5;padding-left:16px;position:relative}
.also li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--coral)}
.also li b{color:var(--mist);font-weight:600}

/* ---------- migration ---------- */
.switch{
  margin:48px 0;padding:34px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  text-align:center;
}
.switch h2{
  font-family:var(--head);font-weight:800;font-size:clamp(21px,3.2vw,29px);
  letter-spacing:-.022em;max-width:26ch;margin:0 auto 12px;
}
.switch p{color:var(--steel);font-size:15.5px;max-width:64ch;margin:0 auto}
.switch .cta{margin-top:24px}

/* ---------- scheduler fallback ----------
   The only conversion path on the page is a cross-origin HubSpot iframe. If an
   extension blocks third-party frames, or HubSpot is down, the frame paints
   nothing and a school owner has no way to book at all. An always-visible
   secondary path is used rather than JS load-detection: it cannot itself fail,
   and it costs one quiet line. */
.frame-alt{
  margin-top:14px;text-align:center;font-size:13.5px;color:var(--steel);
  line-height:1.7;
}
/* Both are conversion paths on a phone, so they clear the 44px minimum.
   Measured before this: the phone link was 110x17. */
.frame-alt a{
  display:inline-block;padding:12px 6px;
  color:var(--coral);text-decoration:underline;text-underline-offset:3px;
}
.frame-alt b{color:var(--mist);font-variant-numeric:tabular-nums}

/* ---------- sticky mobile CTA ----------
   Measured before this change: at 390px the scheduler sat 8,658px down a
   9,813px page, 88% of the scroll, with no persistent way to convert.

   position:sticky inside a wrapper, NOT position:fixed. The bar rides the
   bottom of the viewport while the reader is inside the feature zone, then
   scrolls away naturally when the scheduler arrives, so it can never overlay
   the booking form's own controls. That also avoids the failure already logged
   on the homepage, where the consent banner covers a fixed floating CTA. */
.stickyzone{position:relative}
.sticky-cta{display:none}

@media(max-width:760px){
  .sticky-cta{
    display:block;position:sticky;bottom:12px;z-index:900;
    margin:0 auto;width:calc(100% - 8px);
  }
  .sticky-cta a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:15px 20px;border-radius:999px;background:var(--grad);color:#fff;
    font-family:var(--head);font-weight:700;font-size:15.5px;
    box-shadow:0 12px 30px rgba(0,0,0,.55);
    min-height:48px;
  }
  .sticky-cta small{font-family:var(--mono);font-weight:500;font-size:10.5px;opacity:.9}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .cluster-grid{grid-template-columns:repeat(2,1fr)}
  .lead-feature{grid-template-columns:1fr}
  .board{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .cluster-grid,.cluster-grid.two{grid-template-columns:1fr}
  .also ul{grid-template-columns:1fr}
  .also{padding:22px 20px}
  .switch{padding:26px 20px}
  .lead-copy{padding:24px 22px}
  .board{padding:22px}
  .cluster-head{flex-direction:column;gap:4px;align-items:flex-start}
}

/* ---------- footer tap targets ----------
   Measured at 390px: the three footer links were 15px tall, well under the
   44px minimum. mab.css owns the footer, so this raises the hit box on this
   page only. 13px of padding clears 44; 11px left them at 41. */
footer nav a{display:inline-block;padding:13px 0;margin-right:16px}

/* ---------- motion ----------
   One authored moment: the rank bars fill once on arrival, because a
   progression that grows is the page's whole idea. Everything starts from an
   already-visible default so a reduced-motion reader loses nothing. */
@media(prefers-reduced-motion:no-preference){
  .rank-fill{
    animation:rank-grow .9s cubic-bezier(.16,1,.3,1) both;
    transform-origin:left center;
  }
  /* .board-h is the first child, so the four rows are children 2 through 5. */
  .rank-row:nth-child(3) .rank-fill{animation-delay:.06s}
  .rank-row:nth-child(4) .rank-fill{animation-delay:.12s}
  .rank-row:nth-child(5) .rank-fill{animation-delay:.18s}
}
@keyframes rank-grow{
  from{transform:scaleX(.12)}
  to{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
  /* mab.css transitions .cta on hover and guards nothing. */
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}