/* ============================================================
   LANDING — marketing page layout (the public front door).

   Reuses the app's design tokens (base.css + theme-light.css) so
   the site and the app read as one product. This file only adds
   the marketing-page sections (nav, hero, features, use cases,
   pricing, demo/contact, footer) — it never touches the tokens.
   ============================================================ */

/* The landing page is a normal scrolling document, unlike the app
   (which locks the viewport). Re-enable vertical scroll + smooth
   anchor jumps. */
html,body{height:auto;overflow-y:auto;scroll-behavior:smooth}
body.landing{background:var(--bg);color:var(--t)}
.ld-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}
section{scroll-margin-top:80px}
a{color:inherit}

/* ── Top nav ───────────────────────────────────────────────── */
.ld-nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--b)}
.ld-nav-in{display:flex;align-items:center;gap:18px;height:62px}
.ld-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.3px;font-size:var(--fs-ld-h3);text-decoration:none}
.ld-lm{width:32px;height:32px;flex-shrink:0;display:block}
.ld-lm svg{width:100%;height:100%;display:block}
.ld-nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.ld-nav-links a{font-size:var(--fs-h3);font-weight:500;color:var(--t2);text-decoration:none;padding:8px 12px;border-radius:var(--rsm)}
.ld-nav-links a:hover{color:var(--t);background:var(--s2)}
.ld-nav-cta{display:flex;align-items:center;gap:8px;margin-left:6px}
/* The box is in base.css, shared with .pg-btn. This is only what a landing
   button adds: a fill or a ghost, with no resting edge. */
.ld-btn-primary{background:var(--ac);color:var(--on-ac)}
.ld-btn-primary:hover{filter:brightness(1.06)}
.ld-btn-ghost{background:transparent;color:var(--t);border-color:var(--bm)}
.ld-btn-ghost:hover{background:var(--s2);border-color:var(--bs)}
.ld-btn-lg{height:48px;padding:0 24px;font-size:15px}
.ld-burger{display:none;margin-left:auto;width:40px;height:40px;border:none;background:transparent;color:var(--t);cursor:pointer;border-radius:var(--rsm)}
.ld-burger svg{width:24px;height:24px}

/* ── Hero ──────────────────────────────────────────────────── */
.ld-hero{position:relative;overflow:visible;padding:clamp(40px,6vh,80px) 0 clamp(44px,6vh,80px);
  background:
    radial-gradient(90% 70% at 88% -10%,var(--acd),transparent 55%),
    radial-gradient(70% 60% at -5% 5%,var(--bld),transparent 60%);}
/* Copy on the left, the two devices on the right. The picture column is the
   wider one: the headline is capped at 15ch anyway, so the extra width was
   going to empty space on the left while the product sat at thumbnail size. */
.ld-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,64px);align-items:center}
.ld-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:99px;background:var(--acd);border:1px solid var(--acb);color:var(--ac);font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.02em;margin-bottom:22px}
.ld-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ac)}
.ld-h1{font-size:clamp(33px,4.4vw,58px);line-height:1.05;letter-spacing:-1.3px;font-weight:700;max-width:15ch;margin-bottom:20px}
.ld-h1 .accent{color:var(--ac)}
.ld-lead{font-size:clamp(15px,1.35vw,18px);line-height:1.6;color:var(--t2);max-width:52ch;margin-bottom:30px}
.ld-hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* "Free to start · Easy to understand · Runs in the browser" — a sentence of
   selling copy, so Outfit. It is the first line under the hero headline and was
   the most-seen piece of prose in the product set in a monospace face. */
.ld-hero-note{margin-top:16px;font-size:var(--fs-h3);color:var(--t3);letter-spacing:.01em}
.ld-hero-points{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:11px 22px}
.ld-hero-points li{list-style:none;display:flex;align-items:center;gap:9px;font-size:var(--fs-h3);color:var(--t2)}
.ld-hero-points .ic{width:18px;height:18px;border-radius:50%;background:var(--acd);border:1px solid var(--acb);color:var(--ac);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;flex-shrink:0}

/* ── Live tag-feed panel (the hero's signature) ────────────────
   A faithful little slice of the app: a REC clock, an event log with
   mono timecodes + coloured tag stripes, and a live stat rollup. It
   borrows the app's own DM-Mono/timecode language so the site and the
   product read as one thing. */
.ld-feed{border-radius:16px;border:1px solid var(--bm);background:var(--s1);box-shadow:var(--shadowxl);overflow:hidden}
.ld-feed-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--b);background:var(--s2)}
.ld-rec{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;letter-spacing:.08em;color:var(--rd)}
.ld-rec-dot{width:8px;height:8px;border-radius:50%;background:var(--rd);animation:ld-rec-pulse 1.8s ease-in-out infinite}
@keyframes ld-rec-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
.ld-feed-clock{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--t);letter-spacing:.02em}
.ld-feed-live{margin-left:auto;font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--t3)}
.ld-feed-list{padding:8px}
.ld-ev{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--rsm);position:relative}
.ld-ev.is-new{background:var(--acd)}
.ld-ev-bar{width:4px;height:22px;border-radius:2px;flex-shrink:0}
.ld-ev-tc{font-family:var(--mono);font-size:var(--fs-body);color:var(--t2);flex-shrink:0}
.ld-ev-lbl{font-size:var(--fs-ld-body);font-weight:600;color:var(--t);letter-spacing:-.2px}
.ld-ev-clip{margin-left:auto;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;color:var(--ac);flex-shrink:0}
.ld-feed-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b);border-top:1px solid var(--b)}
.ld-stat{background:var(--s1);padding:15px 10px;text-align:center}
.ld-stat .n{display:block;font-family:var(--mono);font-size:22px;font-weight:500;color:var(--t);letter-spacing:-.5px;line-height:1}
.ld-stat .k{display:block;margin-top:5px;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--t3)}

@media(prefers-reduced-motion:reduce){.ld-rec-dot{animation:none}}

/* ── Wrapping ────────────────────────────────── */
/* Two rules, for the whole page. A heading balances, so when it takes
   two lines they come out even rather than long-then-one-word. Body
   copy gets `pretty`, whose only job is to keep a lone word off the
   last line. Neither touches text that fits on one line, and both fall
   back to ordinary wrapping where the browser does not know them.

   The other half of the job is not here. A max-width in `ch` that is
   narrower than the box it sits in IS the orphan — the word is pushed
   down with the container still half empty beside it, and no amount of
   text-wrap will pull it back. Both of the ones that did that (.w5-q on
   the deck, .ld-cmp-tbl .pw in the plan table) have lost theirs; think
   twice before adding another. */
h1,h2,h3,h4,.ld-h1,.ld-h2{text-wrap:balance}
p,li,dd,figcaption,blockquote{text-wrap:pretty}

/* ── Generic section header ────────────────────────────────── */
.ld-sec{padding:clamp(40px,5.5vh,72px) 0}
.ld-sec.alt{background:var(--s1);border-block:1px solid var(--b)}
/* A word, so Outfit — see THE TYPE RULE in css/pages.css. */
.ld-eyebrow{font-weight:600;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ac);margin-bottom:12px}
.ld-h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.8px;font-weight:700;max-width:20ch}
.ld-sec-lead{margin-top:14px;font-size:clamp(14px,1.3vw,17px);color:var(--t2);line-height:1.6;max-width:60ch}
.ld-sec-head{margin-bottom:clamp(32px,4vh,52px)}

/* ── Features grid ─────────────────────────────────────────── */
.ld-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.ld-card{background:var(--s1);border:1px solid var(--bm);border-radius:14px;padding:24px;transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.ld-sec.alt .ld-card{background:var(--bg)}
.ld-card:hover{border-color:var(--acb);transform:translateY(-3px);box-shadow:var(--shadowlg)}
.ld-card-ic{width:46px;height:46px;border-radius:11px;background:var(--acd);border:1px solid var(--acb);color:var(--ac);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ld-card-ic svg{width:23px;height:23px}
.ld-card h3{font-size:var(--fs-ld-h3);font-weight:700;letter-spacing:-.3px;margin-bottom:7px}
.ld-card p{font-size:var(--fs-h3);line-height:1.6;color:var(--t2)}

/* ── Use cases (role columns) ──────────────────────────────── */
.ld-uses{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.ld-use{background:var(--s1);border:1px solid var(--bm);border-radius:14px;padding:26px;display:flex;flex-direction:column}
.ld-use-tag{align-self:flex-start;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ac);background:var(--acd);border:1px solid var(--acb);padding:5px 10px;border-radius:99px;margin-bottom:16px}
.ld-use h3{font-size:var(--fs-ld-h3);font-weight:700;letter-spacing:-.4px;line-height:1.3;margin-bottom:8px;min-height:2.6em}
.ld-use p{font-size:var(--fs-h3);line-height:1.6;color:var(--t2);margin-bottom:16px}
.ld-use ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ld-use li{display:flex;gap:9px;font-size:var(--fs-body);color:var(--t2);line-height:1.45}
.ld-use li svg{width:17px;height:17px;color:var(--ac);flex-shrink:0;margin-top:1px}

/* ── Kit list: what you need / what you don't ──────────────────
   Two facing columns. The "need" side is affirmative and accented;
   the "don't" side is deliberately quieter and struck through — it's
   a list of things being taken away, so it shouldn't compete. */
.ld-kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.ld-kit-col{background:var(--s1);border:1px solid var(--bm);border-radius:16px;padding:clamp(22px,3vw,32px)}
.ld-sec.alt .ld-kit-col{background:var(--bg)}
.ld-kit-col.need{border-color:var(--acb);background:var(--acd)}
.ld-kit-hd{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:-.2px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--b)}
.ld-kit-ic{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body);font-weight:700;flex-shrink:0}
.ld-kit-col.need .ld-kit-ic{background:var(--ac);color:var(--on-ac)}
.ld-kit-col.not .ld-kit-ic{background:var(--s3);color:var(--t3);border:1px solid var(--bm)}
.ld-kit-col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.ld-kit-col li{display:flex;align-items:center;gap:12px;font-size:clamp(15px,1.5vw,18px);font-weight:600;letter-spacing:-.2px;line-height:1.35}
.ld-kit-col .mk{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700;flex-shrink:0}
.ld-kit-col.need .mk{background:var(--ac);color:var(--on-ac)}
.ld-kit-col.not{color:var(--t3)}
.ld-kit-col.not .mk{background:transparent;border:1px solid var(--bm);color:var(--t3)}
.ld-kit-col.not li{text-decoration:line-through;text-decoration-color:var(--bs);text-decoration-thickness:1px}
.ld-kit-foot{margin-top:26px;font-size:clamp(14px,1.3vw,17px);color:var(--t2);line-height:1.6}
.ld-kit-foot b{color:var(--t)}

/* ── How it works ──────────────────────────────────────────── */
.ld-steps{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);counter-reset:step}
.ld-step{position:relative;padding:24px;border:1px dashed var(--bm);border-radius:14px}
.ld-step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--ac);color:var(--on-ac);font-weight:700;font-size:var(--fs-ld-h3);margin-bottom:14px}
.ld-step h3{font-size:var(--fs-ld-h3);font-weight:700;margin-bottom:6px}
.ld-step p{font-size:var(--fs-h3);color:var(--t2);line-height:1.6}

/* ── Pricing ───────────────────────────────────────────────── */
.ld-prices{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:stretch}
.ld-price{position:relative;background:var(--s1);border:1px solid var(--bm);border-radius:16px;padding:28px;display:flex;flex-direction:column}
.ld-sec.alt .ld-price{background:var(--bg)}
.ld-price.feat{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac),var(--shadowlg);
  background:linear-gradient(180deg,var(--acd) 0%,transparent 240px)}
.ld-sec.alt .ld-price.feat{background:linear-gradient(180deg,var(--acd) 0%,var(--bg) 240px)}
@media(min-width:900px){
  /* A half-step taller and wider than its neighbours: enough to read as the
     default choice, not so much that the other two look broken. */
  .ld-price.feat{transform:scale(1.035);z-index:2}
}
.ld-price.feat h3{color:var(--ac)}
.ld-price-flag{position:absolute;top:-12px;left:28px;background:var(--ac);color:var(--on-ac);font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;padding:5px 11px;border-radius:99px}
/* The free plan is the accessibility promise, so it gets a flag and a real
   border too — just not the filled one, which stays with the paid tier. */
.ld-price-flag.alt{background:var(--acd);color:var(--ac);border:1px solid var(--acb)}

/* ══════════════════════════════════════════════════════════════════
   THE CLUB CARD  —  premium, without taking anything off Starter.

   THE PROBLEM. Starter carries the accent: an accent border, a ring, a
   gradient ground, a "Most popular" ribbon and a solid accent button. That
   treatment works, and it is not being touched. But it left Club — the tier a
   multi-squad academy is meant to buy, and the only one with a person on the
   other end of it — dressed exactly like the free plan: grey border, grey
   ground, ghost button. The most expensive column looked the least considered.

   THE RULE. Club wears THE BRAND COLOUR THE ACCENT IS NOT, and it swaps with
   the theme the same way the accent does (see the palette note in
   css/base.css). The accent is green on the dark ground and lavender on the
   light one; so Club is lavender on dark and green on light. Two consequences,
   both of them the point:
     • Club can NEVER collide with Starter, in either theme, because the two
       colours are defined as each other's complement rather than picked.
     • No fourth colour enters the palette. The three-colour rule holds.

   WHY THE COLOUR IS ONLY ON CHROME, never on text. Green on paper is 1.6:1 —
   the exact reason the accent swaps at all. So --prem paints ribbons, borders,
   rings, washes and button FILLS (where the text sits on it, and both
   directions were checked: ink on green is 11.8:1, white on lavender 5.1:1).
   The heading and the body copy stay on the neutral text roles in both themes.

   WHY IT DOES NOT SCALE. Starter has transform:scale(1.035) and z-index 2 and
   keeps them. Club gets colour and a ring but stays at true size, so "most
   popular" is still the loudest thing in the row. Premium here means
   considered, not bigger. ══════════════════════════════════════════════════ */
:root{
  /* Dark ground: the accent is green, so the premium colour is lavender. */
  --prem:var(--brand-lav);
  --prem-on:#fff;
  --prem-d:rgba(99,91,224,.16);
  --prem-b:rgba(99,91,224,.42);
}
:root[data-theme="light"]{
  /* Light ground: the accent is lavender, so the premium colour is green. */
  --prem:var(--brand-grn);
  --prem-on:var(--brand-ink);
  --prem-d:rgba(175,226,89,.20);
  --prem-b:rgba(175,226,89,.70);
}
.ld-price.prem{border-color:var(--prem-b);box-shadow:0 0 0 1px var(--prem-b),var(--shadowmd)}
/* The section this sits in is .ld-sec.alt, whose rule two blocks up repaints
   every .ld-price to var(--bg). This has to outrank that, so it names the same
   two classes and adds one more. */
.ld-sec.alt .ld-price.prem{background:linear-gradient(180deg,var(--prem-d) 0%,var(--bg) 240px)}
.ld-price-flag.prem{background:var(--prem);color:var(--prem-on);border:0}
/* THE TICKS AND THE PRICE NOTE STAY AS THEY ARE, and this is the rule above
   being obeyed rather than an omission. Both were painted --prem first and
   both failed in the light theme: green on white is 1.6:1, so "Built around
   your club's size" was barely there and a 17px tick — a mark that carries
   the meaning "included", so 3:1 applies to it — was fainter still. A tick
   means included, not premium; it keeps the accent in both themes. The price
   note keeps --am, which is what Starter's says its price in. What --prem
   paints is the ribbon, the border, the ring, the wash and the button fill —
   chrome, and one fill with checked text on it. Nothing else. */
.ld-price .pnot.prem{color:var(--t2);border-top-color:var(--prem-b)}
/* Filled, like Starter's, in the other brand colour. A ghost button under a
   custom price reads as the least urgent thing on the page, and this is the
   one card whose action is "start a conversation". */
.ld-btn-prem{background:var(--prem);border:1px solid var(--prem);color:var(--prem-on)}
.ld-btn-prem:hover{filter:brightness(1.06);background:var(--prem)}
.ld-price.free{border-color:var(--acb)}
.ld-price h3{font-size:15px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t2);margin-bottom:5px}
/* Who the plan is for, before what it costs. A price with no buyer attached
   invites the reader to pick the cheapest; a buyer attached invites them to
   pick the one that describes them. */
.ld-price .pfor{font-size:var(--fs-body);color:var(--t3);line-height:1.4;margin-bottom:16px;min-height:2.8em}
.ld-price.feat .pfor{color:var(--t2)}
/* The honest limit, or — on the featured plan — the reassurance. Starter is a
   genuinely good free tool and it should not pretend to be a team product. */
.ld-price .pnot{font-size:var(--fs-sm);line-height:1.5;color:var(--t3);margin:-8px 0 22px;padding-top:14px;border-top:1px solid var(--b)}
.ld-price .pnot.on{color:var(--ac);font-weight:600}
.ld-price li b{color:var(--t);font-weight:700}
/* THE PRICE BLOCK IS ONE FIXED-HEIGHT ZONE, so the feature lists in the three
   cards start on the same line. It has to be, because the cards no longer
   agree on what is in it: Basic is one word with no line under it, Starter is
   a figure plus the price after launch, Club is a two-word phrase plus a note.
   Without the floor, Basic's first bullet sat 22px above the other two and the
   row of cards read as three different layouts. Same job .pfor's min-height
   does one element up, and the reason the amounts line up at all. */
/* Raised from 62px when the qualifier moved onto its own line: the floor has
   to clear the tallest amount block, which is now Starter's figure plus a
   two-line qualifier. On the phone the cards are stacked and align with
   nothing, so the floor is dropped there (see the phone block). */
.ld-price .pamt{min-height:84px}
.ld-price .amt{font-size:38px;font-weight:700;letter-spacing:-1px;line-height:1}
/* THE TWO PINCH BANDS. “Custom pricing” is the longest amount any card
   carries: 249px wide at 38px. The card gives it 310px at 1280 and 270px on a
   360px phone, so it sits on one line across almost the whole range — but
   there are exactly two places it does not fit, and they are the reason this
   figure used to be set 9px smaller than the two beside it at EVERY width:
     • 901–1030px, where the row is three columns at its tightest and the
       card is down to 278px — 220px of room for the figure;
     • below ~350px, where a stacked card is down to 276px — 230px of room.
   Both bands shrink ALL THREE amounts, not the Club one alone. A size chosen
   per-card is what produced the original problem: one card set smaller than
   its neighbours reads as a different template, and its shorter line box
   lifts the qualifier under it above the other two. Stepping the row together
   keeps the three cards agreeing with each other at every width — the figure
   is just a little smaller inside a ~130px band of viewports, and nobody sees
   two viewport widths at once. 32px needs 207px, clearing the 220px worst
   case with enough room for a fallback font that measures wider than Outfit. */
@media(max-width:350px){.ld-price .amt{font-size:32px}}
@media(min-width:901px) and (max-width:1030px){.ld-price .amt{font-size:32px}}
/* THE QUALIFIER IS ITS OWN LINE, NOT A TAIL ON THE FIGURE. Set inline it
   inherited the figure's -1px tracking and had no left margin, so "Free" and
   "till 1 Oct 2026" collided into "Freetill1Oct2026" on a phone. A qualifier
   is a second statement about the amount, so it gets a second line, its own
   tracking and the small-text role — the same shape .ph already uses one rule
   down. `display:block` is what un-picks it from the 38px line box; the
   tracking has to be restated because -1px is inherited, not reset. */
.ld-price .amt span{display:block;margin-top:7px;font-size:var(--fs-sm);font-weight:500;
  letter-spacing:normal;line-height:1.3;color:var(--t3)}
/* `.ld-price .amt.amt-2w` was deleted here — a permanent 29px step-down on
   the Club card alone, applied at every width so the phrase would survive the
   two pinch bands above. It bought “Custom pricing” at the cost of the row:
   a card whose figure is 9px smaller than the two beside it reads as a
   different template, and the shorter line box lifted the qualifier under it
   ~16px above the other two, so the three cards no longer agreed on where the
   amount block ended. A whole-range rule was the wrong shape for a problem
   that exists in two narrow bands — hence the media queries above, which fix
   it where it is actually broken and leave the other ~1100px of the range at
   a matched 38px. */
/* `.ld-price .ph` was deleted here. It was a second line under the amount, set
   in amber — which on a price reads as a warning rather than a note, and left
   Starter stating its terms twice ("Free till 1 Oct 2026" and "Announced
   later" stacked). Both cards now say it once, in the `.amt span` qualifier
   above, which every card uses. `.mk-lib-search .q.ph` is unrelated. */
.ld-price ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:20px 0 24px}
/* The tick is positioned, not a flex sibling. As a flex row, any <b> inside
   the bullet became its own flex item — so "75 GB cloud storage — footage on
   every device" broke into two columns with a gap in the middle of the
   sentence. Block flow keeps the emphasis inline where it was written. */
.ld-price li{display:block;position:relative;padding-left:26px;font-size:var(--fs-h3);color:var(--t2);line-height:1.45}
.ld-price li svg{position:absolute;left:0;top:2px;width:17px;height:17px;color:var(--ac)}
/* ── "And from us" — the Club card's service promises ──
   Not features, so not ticks. The Club card's last four bullets were each
   fully bold inside the tick list, which flattened the whole card: nine ticks,
   every one shouting. They live here instead, under a quiet label, in the
   .pnot size rather than the bullet size — the list above says what the
   software does, this says what a human does. Only .prem uses it today; it is
   written unscoped so a future plan can carry one without a new class. */
.ld-price .psvc{margin:-4px 0 20px;padding-top:15px;border-top:1px solid var(--b)}
.ld-price.prem .psvc{border-top-color:var(--prem-b)}
.ld-price .psvc-h{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-label);
  color:var(--t3);font-weight:600;margin-bottom:9px}
/* Overrides .ld-price ul / li above: no tick gutter, no 11px gap, smaller. */
.ld-price .psvc-l{gap:7px;margin:0}
.ld-price .psvc-l li{padding-left:0;font-size:var(--fs-sm);color:var(--t2);line-height:1.5}
/* One rule between blocks, not two: .pnot draws its own border-top, which
   directly under this one gave the card two hairlines a few lines apart.
   The pull-up goes with it. Dropping the border left .psvc’s own 20px bottom
   margin standing as bare whitespace, so the Club card ended on a blank line
   the other two do not have — their note follows the tick list across a 16px
   gap with a hairline drawn in it, which reads as a divider rather than as a
   skipped line. With no hairline here the gap has to be smaller, not equal:
   this note is the tail of “And from us”, and 8px is what makes it read as
   one. */
.ld-price .psvc + .pnot{border-top:none;padding-top:0;margin-top:-12px}

.ld-price .ld-btn{margin-top:auto}
/* ── The phone's collapsed plan card ──
   .psum (a one-line summary) and .ld-price-more (the disclosure) exist ONLY
   for the phone, where the three cards are stacked and each one's list is
   nine lines of screen. On a wide screen all three lists are side by side and
   comparable at a glance, which is the whole point of the layout — so there
   is nothing to collapse and both elements are simply absent. Declared off
   HERE rather than inside a min-width block so the default is "hidden" and
   the phone block is the one place that turns them on. */
.ld-price .psum,.ld-price-more{display:none}

/* ── Demo / Contact split ──────────────────────────────────── */
.ld-cc{display:grid;gap:22px;grid-template-columns:1.1fr .9fr}
.ld-panel{background:var(--s1);border:1px solid var(--bm);border-radius:16px;padding:clamp(24px,3vw,38px)}
.ld-sec.alt .ld-panel{background:var(--bg)}
.ld-panel h3{font-size:var(--fs-ld-h2);font-weight:700;letter-spacing:-.4px;margin-bottom:7px}
.ld-panel .sub{font-size:var(--fs-body);color:var(--t2);line-height:1.6;margin-bottom:22px}
.ld-field{margin-bottom:14px}
.ld-field label{display:block;font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t2);margin-bottom:6px}
.ld-field input,.ld-field select,.ld-field textarea{width:100%;height:44px;padding:0 14px;border:1px solid var(--bm);border-radius:var(--rsm);background:var(--bg);color:var(--t);font-family:var(--sans);font-size:var(--fs-ld-body)}
.ld-sec.alt .ld-field input,.ld-sec.alt .ld-field select,.ld-sec.alt .ld-field textarea{background:var(--s1)}
.ld-field textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical}
.ld-field input:focus,.ld-field select:focus,.ld-field textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--acd)}
/* Stacked at <=680px this grid keeps its 14px row-gap while each .ld-field
   also carries margin-bottom:14px, and the two add up — so the two halves of a
   PAIR sat 28px apart while the gap between unrelated pairs was 14px. The
   spacing grouped the wrong fields together. The grid owns the rhythm inside
   itself; the block owns the rhythm after it. */
.ld-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.ld-2col > .ld-field{margin-bottom:0}
/* The after-submit notice under each contact form. It ships in the markup
   carrying `hidden` and the handler only sets text and a state class, so the
   styling belongs here rather than in the style.cssText the old placeholder
   built at submit time. Never declare a display value in these three rules —
   that would beat the `hidden` attribute and leak an empty box on every load. */
.ld-form-note{margin-top:12px;padding:10px 12px;border-radius:8px;border:1px solid var(--bm);background:var(--bg);color:var(--t2,#333);font-size:var(--fs-body);line-height:1.5}
.ld-form-note.ok{background:var(--okd);border-color:var(--okb);color:var(--ok)}
.ld-form-note.err{background:color-mix(in srgb,var(--rd-str) 14%,transparent);border-color:color-mix(in srgb,var(--rd-str) 40%,transparent);color:var(--rd-str)}
.ld-note{margin-top:14px;font-size:var(--fs-sm);color:var(--t3);line-height:1.5}
/* ── The Contact panel’s one row: icon and address on ONE line, always ──
   This used to be a two-part row — an “EMAIL” label over the address, set
   against a top-aligned 40px badge — with a phone-only override further down
   the file that hid the label and re-centred it. That override was scoped to
   max-width:760px, so anything reporting wider (a tablet, a phone in
   landscape, a phone handed the desktop viewport) still got the stacked
   shape: a badge with an empty line beside it and the address stranded a row
   below it. The breakpoint was the bug, so the breakpoint is gone — these are
   the only rules now, at every width.
   The label went rather than the badge: with one row in this list, under a
   heading that already says Contact Us, “EMAIL” above a mailto: link is
   labelling the obvious. It is out of the markup entirely now rather than
   display:none — the link text IS an email address, so a screen reader loses
   nothing by it.
   The 44px tap-target floor sits on the row, not on the link’s own vertical
   padding: padding there is what pushed the address off the badge’s line. */
.ld-contact-list{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:4px}
.ld-contact-list li{display:flex;gap:11px;align-items:center}
/* A 38px badge holding a 20px glyph. The old 40px box around a 19px glyph left
   ~10px of dead space inside each edge, which the 13px gap then doubled: the
   optical distance from the envelope to the “h” was ~20px even though the
   measured gap was 13. Tighter padding and a tighter gap are what make the
   address read as belonging to the icon instead of sitting away from it. */
.ld-contact-ic{width:38px;height:38px;border-radius:var(--r);background:var(--acd);border:1px solid var(--acb);color:var(--ac);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ld-contact-ic svg{width:20px;height:20px}
.ld-contact-list .v{font-size:14.5px;color:var(--t);font-weight:600;min-height:44px;display:flex;align-items:center}
/* overflow-wrap, not nowrap: at 320px the address is wider than the column
   left beside the badge, and it should wrap rather than push the panel into a
   horizontal scroll. The row is centred either way, so a wrapped address still
   straddles the badge’s line instead of dropping below it. */
.ld-contact-list .v a{color:var(--ac);text-decoration:none;overflow-wrap:anywhere}

/* ── Big closing CTA ───────────────────────────────────────── */
.ld-cta-band{margin:0;border-radius:20px;padding:clamp(40px,6vw,72px) 24px;
  background:radial-gradient(90% 120% at 50% 0%,var(--acd),transparent 70%),var(--s1);border:1px solid var(--bm)}
.ld-cta-band h2{font-size:clamp(26px,3.6vw,42px);letter-spacing:-.8px;font-weight:700;margin-bottom:12px}
.ld-cta-band p{font-size:15px;color:var(--t2);max-width:50ch;margin:0 0 26px}
.ld-cta-band .ld-hero-cta{justify-content:flex-start}

/* ── Footer ────────────────────────────────────────────────── */
/* The old four-column .ld-foot lived here. It is now the shared three-column
   .sf footer in css/base.css — one footer on every page, this one included. */

/* ── Mobile nav menu ───────────────────────────────────────── */
.ld-mobile-menu{display:none}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:900px){
  .ld-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .ld-feed{max-width:480px;margin-inline:auto;width:100%}
  .ld-grid,.ld-uses,.ld-steps,.ld-prices{grid-template-columns:1fr 1fr}
  .ld-cc{grid-template-columns:1fr}
}
@media(max-width:680px){
  .ld-nav-links,.ld-nav-cta{display:none}
  .ld-burger{display:flex}
  .ld-grid,.ld-uses,.ld-steps,.ld-prices,.ld-2col,.ld-kit{grid-template-columns:1fr}
  /* `.ld-price.feat{order:-1}` used to pull Starter to the top of the stack,
     which is the right move when a reader has to scroll past a whole card to
     reach the popular one. With the lists collapsed all three headers fit in
     roughly one screen, so the cards can run in the order they are priced —
     Basic, Starter, Club — and the ladder reads as a ladder. */

  /* ── The collapsed card ──
     Hiding the list is the entire saving: a Club card is nine feature lines
     plus a note, and three of those stacked is most of a phone's scroll for
     one section. What stays visible is the header, who it is for, the amount
     and one summary line — enough to choose from, with the detail one tap
     away. `.pnot` goes with the list because it is the tail of the same
     argument, not a second summary beside .psum. */
  /* 12px, not 2px: with the amount's qualifier now on its own line directly
     above, a 2px gap ran the two together as one paragraph. */
  .ld-price .psum{display:block;font-size:var(--fs-h3);line-height:1.45;color:var(--t2);margin:12px 0 14px}
  .ld-price.feat .psum{color:var(--t)}
  .ld-price ul,.ld-price .pnot,.ld-price .psvc{display:none}
  .ld-price.open ul{display:flex}
  .ld-price.open .pnot,.ld-price.open .psvc{display:block}
  /* ── THE DISCLOSURE IS NOT A BUTTON ──
     It used to be a full-width bordered pill sitting directly above the CTA,
     which is also a full-width bordered pill of the same height and radius. On
     Basic — the free plan, the one entrance we most want taken — the ghost CTA
     therefore had no more weight than the accordion above it, and the pair read
     as two accordions. A disclosure reveals text in place; a CTA leaves the
     page. They should not look alike, so the border and the full width come
     off this one and it becomes a text row with a chevron. The 44px floor
     stays — it is still a touch target, just not a boxed one. */
  .ld-price-more{display:inline-flex;width:auto;align-items:center;justify-content:flex-start;gap:7px;
    margin:0 0 14px;padding:0;background:none;border:0;cursor:pointer;
    font-family:var(--sans);font-size:var(--fs-body);font-weight:600;color:var(--ac);
    text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
    min-height:var(--ctl-h-lg)}
  /* Club's label was painted --prem, which is green on the light ground —
     about 1.6:1. That is the exact failure the palette note at the top of the
     premium block forbids ("what --prem paints is the ribbon, the border, the
     ring, the wash and the button fill... Nothing else"), so the label simply
     keeps the accent every other card's does. The ring and fill stay --prem. */
  .ld-price-more .chev{width:15px;height:15px;flex-shrink:0;transition:transform var(--dur-slow)}
  .ld-price.open .ld-price-more .chev{transform:rotate(180deg)}
  /* Opened, the list used to start 36px below the disclosure (its own 20px top
     margin plus the button's 16px bottom), so the detail read as a separate
     block rather than as the answer to the row above it. */
  .ld-price.open ul{margin-top:2px}
  /* The amount no longer has to clear the tallest card's qualifier: stacked
     cards align with nothing. This is also what closed the ~46px of dead space
     that sat under Basic's "Free". */
  .ld-price .pamt{min-height:0}
  /* Every CTA is filled on the phone. Basic's was a grey ghost — correct in a
     row of three where the eye compares them, wrong in a stack where each card
     is judged alone and a grey outline reads as disabled. Tinted, not solid,
     so Starter's solid accent is still the loudest button in the section. */
  .ld-price .ld-btn-ghost{background:var(--acd);border-color:var(--acb);color:var(--ac)}
  /* The card is no longer a fixed-height column in a row of three, so the
     two rules that made it one are noise here: a min-height on the "who it
     is for" line that reserved space for a second line the phone does not
     need, and the button's margin-top:auto pushing it to the bottom of a
     card whose height is now its content. */
  .ld-price .pfor{min-height:0;margin-bottom:14px}
  .ld-price .ld-btn{margin-top:4px}
  .ld-price{padding:22px}
  /* Slide-down mobile menu */
  .ld-mobile-menu{display:block;position:fixed;top:62px;left:0;right:0;z-index:49;
    background:var(--bg);border-bottom:1px solid var(--bm);box-shadow:var(--shadowmd);
    transform:translateY(-130%);transition:transform var(--dur-slow) ease;padding:12px 22px 18px}
  body.menu-open .ld-mobile-menu{transform:translateY(0)}
  .ld-mobile-menu a{display:block;padding:12px 6px;font-size:15px;font-weight:600;color:var(--t);text-decoration:none;border-bottom:1px solid var(--b)}
  .ld-mobile-menu .ld-btn{display:flex;margin-top:14px;width:100%}
}

/* ════════════════════════════════════════════════════════════════════
   APP MOCKUPS  —  faithful in-code recreations of the real app screens
   (Live Tagger, Review, Stats, Presentations). They reuse the shared
   design tokens (base.css + theme-light.css) and mirror the component
   styles from tagger.css / review.css / stats.css so they read as true
   screenshots — no image files, no screenshot dependency. Every class
   is namespaced `mk-` so it can't collide with the real app modules
   (which aren't even loaded on the landing page).
   ════════════════════════════════════════════════════════════════════ */

/* ── Device frames ─────────────────────────────────────────────────── */
/* Browser window */
/* The browser chrome that used to sit on top of this — .mk-win-bar with its
   traffic lights, .mk-url and a REC pill — was deleted with its markup. The
   window is now just the screen, at every width. */
.mk-win{border-radius:15px;border:1px solid var(--bm);background:var(--s1);box-shadow:var(--shadowxl);overflow:hidden;width:100%}

/* The app's own top nav strip, shrunk into the mockup */
/* ── The mockup's nav bar mirrors the app's ──
   The real #nav centres its tab strip by absolute positioning (see the note
   at the min-width:921px block in css/base.css) and hides the Home tab up
   there, because the wordmark is the way home. This bar had drifted: tabs
   left-aligned straight after the wordmark, with a Home tab the app no longer
   shows. Centred the same way and for the same reason — the logo and the
   avatar are different widths, so any flow-based centring splits the leftover
   space between the flanks instead of finding the middle of the bar. */
.mk-appnav{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-bottom:1px solid var(--b);background:var(--nav-bg)}
.mk-appnav .lm{width:20px;height:20px;flex-shrink:0;display:block}
.mk-appnav .lm svg{width:100%;height:100%;display:block}
.mk-appnav .nm{font-size:var(--fs-label);font-weight:700;letter-spacing:-.3px;margin-right:6px;white-space:nowrap}
.mk-appnav .tabs{display:flex;gap:2px;overflow:hidden;min-width:0;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 210px)}
.mk-appnav .tb{height:23px;padding:0 9px;border-radius:7px;font-size:var(--fs-xs);font-weight:500;color:var(--t3);white-space:nowrap;display:flex;align-items:center;gap:5px}
.mk-appnav .tb .d{width:4px;height:4px;border-radius:50%;background:var(--t3)}
.mk-appnav .tb.on{background:var(--acd);color:var(--t)}
.mk-appnav .tb.on .d{background:var(--ac)}
.mk-appnav .usr{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--s3);border:1px solid var(--bm);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--t2);flex-shrink:0}

/* Phone frame (holds the dark fullscreen tag dock — stays dark in both themes) */
.mk-phone{width:100%;max-width:230px;background:#111318;border:9px solid #191c22;border-radius:38px;padding:0;box-shadow:0 30px 70px rgba(0,25,45,.28),0 4px 14px rgba(0,25,45,.18);position:relative}
.mk-phone-scr{position:relative;border-radius:29px;overflow:hidden;aspect-ratio:9/18.5;background:#050609}
.mk-phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:38%;height:20px;background:#191c22;border-radius:0 0 12px 12px;z-index:6}

/* ── LIVE TAGGER mockup (split: camera + control panel) ────────────── */
.mk-split{display:flex;min-height:0}
.mk-cam{width:50%;flex-shrink:0;position:relative;background:#050609;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* The "camera feed" is the drawn scene itself (.mk-sc — ground, stands,
   markings and players in one SVG). The CSS grass layer that used to sit
   behind it (.mk-pitch) went when the scenes started drawing their own
   ground in perspective. Swap-ready still: an <img> or <video> dropped into
   the frame in place of the <svg> takes its place with no other changes. */
.mk-cam-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent)}
.mk-cam-rec{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-label);color:#fff;text-transform:uppercase}
.mk-cam-rec i{width:6px;height:6px;border-radius:50%;background:var(--rd);animation:ld-rec-pulse 1.8s ease-in-out infinite}
.mk-cam-timer{font-family:var(--mono);font-size:var(--fs-body);font-weight:500;color:#fff}
.mk-cam-hud{display:flex;gap:6px}
.mk-cam-hud span{height:26px;padding:0 10px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;gap:5px;backdrop-filter:blur(4px)}
.mk-cam-hud span.stop{background:var(--rd);border-color:var(--rd)}
.mk-cam-bot{position:absolute;bottom:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:linear-gradient(to top,rgba(0,0,0,.65),transparent)}
.mk-cam-bot .pl{font-size:var(--fs-label);font-weight:500;color:rgba(255,255,255,.8)}
.mk-cam-bot .ct{font-size:var(--fs-xs);font-weight:500;color:#cfcbf7;background:rgba(99,91,224,.28);border:1px solid rgba(99,91,224,.5);padding:2px 9px;border-radius:99px;font-family:var(--mono)}

.mk-ctrl{flex:1;min-width:0;background:var(--bg);display:flex;flex-direction:column}
.mk-postabs{display:flex;gap:2px;padding:6px 10px 0;border-bottom:1px solid var(--b);background:var(--s1)}
.mk-postabs span{height:28px;padding:0 11px;font-size:var(--fs-xs);font-weight:600;color:var(--t3);border-bottom:2px solid transparent;display:flex;align-items:center}
.mk-postabs span.on{color:var(--ac);border-bottom-color:var(--ac)}
.mk-taggrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
/* The chip's ground is a fixed near-white wash of its own tag colour, so its
   ink has to be fixed too. It was var(--t), which is near-white in the dark
   theme — every label in these mockups was white on white for anyone with
   dark mode on, on the one page whose job is to show what the app looks
   like. The ::before stripe and the .k key below already pin their own dark
   mixing colour for the same reason. */
.mk-tag{position:relative;overflow:hidden;height:38px;border-radius:var(--rsm);border:1px solid color-mix(in srgb,var(--tc,#8a90a0) 32%,transparent);background:color-mix(in srgb,var(--tc,#8a90a0) 12%,#fff);color:var(--brand-ink);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:6px 9px 7px 12px;gap:2px;transition:transform var(--dur),box-shadow var(--dur)}
.mk-tag::before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:color-mix(in srgb,var(--tc,#8a90a0) 62%,#2b2734)}
.mk-tag .k{font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:color-mix(in srgb,var(--tc,#8a90a0) 58%,#2b2734);line-height:1}
.mk-tag .l{font-size:var(--fs-label);font-weight:600;letter-spacing:-.2px;line-height:1.1}
.mk-tag.flash{z-index:3;border-color:color-mix(in srgb,var(--tc) 60%,#2b2734);box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 42%,transparent),0 0 10px 1px color-mix(in srgb,var(--tc) 28%,transparent);transform:scale(1.02);transition:transform var(--dur-slow) ease,box-shadow var(--dur-slow) ease}

/* Tag log — timecoded rows + coloured stripe, like tagger.css */
.mk-log{border-top:1px solid var(--b);background:var(--s1);margin-top:auto}
.mk-log-hd{padding:8px 12px 6px;font-size:9px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3);display:flex;justify-content:space-between;align-items:center}
.mk-log-hd .pill{font-family:var(--mono);font-weight:500;font-size:9px;color:var(--ac);background:var(--acd);border:1px solid var(--acb);padding:1px 7px;border-radius:99px;letter-spacing:.02em}
.mk-log-list{display:flex;flex-direction:column}
.mk-log-row{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--b);font-size:var(--fs-label)}
.mk-log-row.pop{animation:mk-pop .4s ease both}
@keyframes mk-pop{from{opacity:0;transform:translateY(-6px);background:var(--acd)}to{opacity:1;transform:none}}
.mk-log-ts{font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3);min-width:34px;flex-shrink:0}
.mk-log-acc{width:3px;height:14px;border-radius:2px;flex-shrink:0}
.mk-log-tag{font-weight:600;color:var(--t2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-log-pl{font-size:9.5px;font-weight:700;color:var(--ac);background:var(--acd);border:1px solid var(--acb);border-radius:99px;padding:1px 7px;flex-shrink:0}

/* ── REVIEW mockup ─────────────────────────────────────────────────── */
.mk-rev{display:flex;min-height:0}
.mk-rev-side{width:38%;max-width:230px;flex-shrink:0;border-right:1px solid var(--b);background:var(--s1);display:flex;flex-direction:column;min-width:0}
.mk-rev-fh{padding:9px 12px;font-size:9px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--b)}
.mk-rev-pills{display:flex;flex-wrap:wrap;gap:5px;padding:9px 12px;border-bottom:1px solid var(--b)}
.mk-rev-pills span{font-size:var(--fs-xs);font-weight:600;padding:3px 9px;border-radius:99px;border:1px solid var(--bm);background:var(--s2);color:var(--t3);white-space:nowrap}
.mk-rev-pills span.on{border-color:var(--acb);background:var(--acd);color:var(--ac)}
.mk-clip{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--b)}
.mk-clip.on{background:var(--s2);border-left:3px solid var(--ac);padding-left:9px}
.mk-clip-th{width:46px;height:30px;border-radius:4px;background:linear-gradient(135deg,#2f5d3c,#20402b);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.65)}
.mk-clip-tx{min-width:0}
.mk-clip-ac{font-size:var(--fs-label);font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-clip-mt{font-size:9.5px;color:var(--t3);font-family:var(--mono);margin-top:2px}
.mk-rev-main{flex:1;display:flex;flex-direction:column;min-width:0}
.mk-rev-stage{flex:1;min-height:0;background:radial-gradient(120% 90% at 50% 120%,#12331f,#05070a);position:relative;display:flex;align-items:center;justify-content:center}
.mk-play{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.mk-play svg{width:20px;height:20px;color:#fff;margin-left:2px}
.mk-rev-cliplbl{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:var(--fs-xs);color:rgba(255,255,255,.8);background:rgba(0,0,0,.4);padding:3px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.14)}
.mk-rev-fs{position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:7px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.mk-rev-fs svg{width:14px;height:14px;color:#fff}
.mk-rev-ctrl{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--s1);border-top:1px solid var(--b)}
.mk-rev-ctrl .b{height:28px;min-width:28px;padding:0 10px;border-radius:var(--rsm);border:1px solid var(--bm);background:var(--s2);color:var(--t2);font-size:var(--fs-label);font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px}
.mk-rev-ctrl .b.primary{background:var(--ac);border-color:var(--ac);color:var(--on-ac);font-weight:700}
.mk-rev-ctrl .b svg{width:13px;height:13px}
.mk-rev-tl{flex:1;position:relative;height:4px;background:var(--s3);border-radius:99px;margin:0 4px}
.mk-rev-tl .prog{position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--acb);border-radius:99px}
.mk-rev-tl .play{position:absolute;left:34%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px rgba(99,91,224,.25)}
.mk-rev-tl .mk{position:absolute;top:50%;transform:translate(-50%,-50%);width:6px;height:12px;border-radius:2px;opacity:.7}
.mk-rev-time{font-family:var(--mono);font-size:var(--fs-xs);color:var(--t2);flex-shrink:0}

/* ── KPI tiles (Data Insights + Clip Library mockups) ─────────────── */
.mk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.mk-kpi{background:var(--s2);border:1px solid var(--b);border-radius:var(--rsm);padding:11px 6px;text-align:center}
.mk-kpi .n{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--ac);line-height:1}
.mk-kpi .l{font-size:9.5px;color:var(--t3);margin-top:4px}

/* ── PRESENTATIONS mockup ──────────────────────────────────────────── */
.mk-pr{display:flex;min-height:0}
.mk-pr-rail{width:32%;max-width:190px;flex-shrink:0;border-right:1px solid var(--b);background:var(--s1);min-width:0}
.mk-pr-rh{padding:9px 12px;font-size:9px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--b)}
.mk-pr-item{display:flex;align-items:center;gap:7px;padding:8px 11px;border-bottom:1px solid var(--b)}
.mk-pr-item.on{background:var(--s2);border-left:3px solid var(--ac);padding-left:8px}
.mk-pr-n{width:19px;height:19px;border-radius:5px;background:var(--s3);font-family:var(--mono);font-size:9px;font-weight:500;color:var(--t2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mk-pr-nm{font-size:var(--fs-label);font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mk-pr-nm span{display:block;font-family:var(--mono);font-size:9px;color:var(--t3);font-weight:400;margin-top:1px}
.mk-pr-stage{flex:1;display:flex;min-width:0}
.mk-pr-tools{display:flex;flex-direction:column;gap:4px;padding:7px 6px;background:var(--s1);border-right:1px solid var(--b);flex-shrink:0}
.mk-pr-tools i{width:24px;height:24px;flex-shrink:0;border-radius:var(--rsm);border:1px solid var(--bm);background:var(--s2);display:flex;align-items:center;justify-content:center;color:var(--t2)}
.mk-pr-tools i.on{background:var(--acd);border-color:var(--acb);color:var(--ac)}
.mk-pr-tools i svg{width:13px;height:13px}
.mk-pr-tools b{display:block;height:1px;margin:2px 3px;background:var(--b)}
/* The editor header: the presentation's name, then Preview and Download —
   the two things the app keeps above the workspace. */
.mk-pr-hd{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--b);background:var(--s1)}
.mk-pr-hd .nm{margin-right:auto;font-size:var(--fs-body);font-weight:700;color:var(--t)}
.mk-pr-hd .b{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--rsm);border:1px solid var(--bm);background:var(--s2);color:var(--t2);font-size:var(--fs-xs);font-weight:600}
.mk-pr-hd .b svg{width:12px;height:12px}
.mk-pr-canvas{flex:1;position:relative;background:radial-gradient(120% 90% at 50% 120%,#12331f,#05070a);min-width:0;overflow:hidden}
.mk-pr-sw{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:var(--fs-body);font-weight:500;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:3px 9px}
.mk-pr-play{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--s1);border-top:1px solid var(--b)}
.mk-pr-play .b{height:26px;padding:0 11px;border-radius:var(--rsm);border:1px solid var(--bm);background:var(--s2);color:var(--t2);font-size:var(--fs-xs);font-weight:600;display:flex;align-items:center}
.mk-pr-play .b.primary{background:var(--acd);border-color:var(--acb);color:var(--ac)}
.mk-pr-play .t{margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs);color:var(--t2)}

/* ── Phone: the fullscreen tag dock, OVER the picture ───────────────
   The app's own fullscreen buttons (css/fullscreen.css #tb-live.fs-on
   .tag-btn): smoked navy glass, white label centred, the tag's colour as a
   stripe on the edge that faces the video. Sized in px here for the tour's
   portrait phone; the hero's landscape phone restates the sizes in cqw. */
.mk-fsb{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;
  height:40px;padding:0 8px;border-radius:7px;border:1px solid rgba(255,255,255,.2);background:rgba(0,25,45,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:10px;font-weight:600;line-height:1.15;
  transition:transform var(--dur) ease,box-shadow var(--dur) ease}
.mk-fsb::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc,#8a90a0)}
.mk-fs-col.l .mk-fsb::before{left:auto;right:0}
.mk-fsb.flash{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 30%,rgba(0,25,45,.7));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 65%,transparent),0 0 14px 2px color-mix(in srgb,var(--tc) 38%,transparent);transform:scale(1.04)}
/* The undo chip (base.css .undo-bar, as the phone block restyles it): dark,
   one line, pinned to the bottom edge. Hidden until a tag lands. */
.mk-undo{position:absolute;left:50%;bottom:10px;z-index:5;display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:5px 6px 5px 10px;border-radius:99px;background:rgba(10,13,18,.8);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);font-size:9.5px;font-weight:500;opacity:0;transform:translate(-50%,8px);
  transition:opacity .2s ease,transform .2s ease}
.mk-undo.show{opacity:1;transform:translate(-50%,0)}
.mk-undo i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.mk-undo b{color:#fff;font-weight:700}
.mk-undo .c{padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;font-weight:600}

/* ── Product tour (tabbed screen switcher) ─────────────────────────── */
.mk-tabs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:26px}
.mk-tab{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--bm);background:var(--s1);color:var(--t2);font-family:var(--sans);font-size:var(--fs-body);font-weight:600;cursor:pointer;transition:all var(--dur)}
.mk-tab:hover{border-color:var(--bs);color:var(--t)}
.mk-tab.on{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.mk-tab svg{width:15px;height:15px}
.mk-tab .num{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);opacity:.7}
/* ── One stage, five screens of ONE size ──
   The screens used to be display:none/block, each at its own height, so every
   tab press resized the stage and shoved the caption and the page below it
   about. Now all five share one grid cell (so the stage is always the height
   of the tallest caption, and never moves), every desktop screen is the same
   fixed height (.mk-panel .mk-win below), and the phone frames were already
   one size. A change of tab slides: the script parks the incoming screen at
   --mk-dx on the side you moved toward, then drops .on so it travels home
   while the outgoing one leaves the other way. Hidden screens are
   visibility:hidden — not painted, not focusable, out of the a11y tree — and
   every animation inside them is keyed off .mk-panel.on, so they cost only
   their layout. */
.mk-stage{position:relative;max-width:920px;margin:0 auto;display:grid;touch-action:pan-y}
.mk-panel{grid-area:1/1;min-width:0;visibility:hidden;opacity:0;pointer-events:none;
  transform:translateX(var(--mk-dx,0px));
  transition:opacity .3s ease,transform .45s cubic-bezier(.22,.61,.36,1),visibility 0s linear .45s}
.mk-panel.on{visibility:visible;opacity:1;pointer-events:auto;transform:none;
  transition:opacity .36s ease .05s,transform .5s cubic-bezier(.22,.61,.36,1),visibility 0s}
/* Desktop widths only: below 760px .mk-win is display:none (the phone screen
   replaces it), and a display here would out-specify that and show both. */
@media(min-width:761px){.mk-panel .mk-win{height:470px;display:flex;flex-direction:column}}
.mk-panel .mk-win>.mk-split,.mk-panel .mk-win>.mk-rev,.mk-panel .mk-win>.mk-pr,
.mk-panel .mk-win>.mk-lib,.mk-panel .mk-win>.mk-dh{flex:1;min-height:0;overflow:hidden}
@media(prefers-reduced-motion:reduce){.mk-panel,.mk-panel.on{transition:none}}
/* Centred under the screenshot: the caption reads as the title of the
   picture above it, not as a left-hand column beside empty space. */
.mk-cap{display:flex;align-items:center;gap:10px;justify-content:flex-start;margin-top:20px;flex-direction:column;text-align:center}
.mk-cap h3{font-size:var(--fs-ld-h3);font-weight:700;letter-spacing:-.3px}
.mk-cap p{font-size:var(--fs-h3);color:var(--t2);line-height:1.6;max-width:56ch;margin-inline:auto}

/* ══ HERO · the phone that films, the laptop that reviews ════════════
   Flat, at rest, and sized to be read. The tilted window and the glow that
   used to be here were the two most templated moves a landing page has;
   they also blurred the small text they were tilting.

   Both devices size their insides in container units (cqw), so the whole
   picture scales as one object from a 1440 desktop down to a 346px phone
   column instead of reflowing at breakpoints — a mockup that reflows stops
   looking like a screenshot. .mk-lap-scr and .mk-lphone are the containers;
   every length inside them is a fraction of their width. */
.ld-hero-stage{position:relative;width:100%;max-width:660px;margin-left:auto;aspect-ratio:1.24}
.mk-defs{position:absolute;width:0;height:0;overflow:hidden}

/* The laptop — back, top-right. A lid with a thin bezel and a base with the
   finger notch; no logo, no reflections. */
.mk-laptop{position:absolute;top:0;right:0;width:80%}
.mk-lap-lid{padding:2.3% 2.3% 2.8%;border-radius:14px 14px 3px 3px;background:#16181d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 34px 60px -26px rgba(0,25,45,.38)}
.mk-lap-scr{container-type:inline-size;aspect-ratio:16/10;overflow:hidden;border-radius:3px;
  background:var(--bg);display:flex;flex-direction:column}
.mk-lap-base{position:relative;height:clamp(7px,1.9vw,13px);margin:0 -5.5%;border-radius:0 0 12px 12px/0 0 9px 9px;
  background:linear-gradient(180deg,#e7e9ee,#b4b8c1);box-shadow:0 10px 18px -8px rgba(0,25,45,.35)}
.mk-lap-base::before{content:'';position:absolute;left:50%;top:0;width:15%;height:40%;transform:translateX(-50%);
  border-radius:0 0 6px 6px;background:#a3a8b2}
.mk-lap-nav{flex-shrink:0;display:flex;align-items:center;gap:.5cqw;height:6.6cqw;padding:0 2.2cqw;
  background:var(--nav-bg);border-bottom:1px solid var(--b)}
.mk-lap-nav .lm{width:3.4cqw;height:3.4cqw;flex-shrink:0}
.mk-lap-nav .lm svg{width:100%;height:100%;display:block}
.mk-lap-nav .nm{font-size:1.75cqw;font-weight:700;letter-spacing:-.02em;margin-right:auto;white-space:nowrap}
.mk-lap-nav .tb{font-size:1.4cqw;font-weight:500;color:var(--t3);padding:.6cqw .95cqw;border-radius:1cqw;white-space:nowrap}
.mk-lap-nav .tb.on{background:var(--acd);color:var(--t)}
.mk-lap-nav .usr{margin-left:1.4cqw;width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--s3);border:1px solid var(--bm);
  display:flex;align-items:center;justify-content:center;font-size:1.3cqw;font-weight:700;color:var(--t2)}
.mk-lap-body{flex:1;min-height:0;display:flex}
.mk-lap-side{width:33%;flex-shrink:0;background:var(--s1);border-right:1px solid var(--b);display:flex;flex-direction:column;min-width:0}
.mk-lap-mh{padding:1.9cqw 2.2cqw 1.2cqw;display:flex;flex-direction:column;gap:.4cqw}
.mk-lap-mh b{font-size:1.85cqw;font-weight:700;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-lap-mh span{font-family:var(--mono);font-size:1.35cqw;color:var(--t3)}
.mk-lap-pills{display:flex;gap:.8cqw;padding:0 2.2cqw 1.5cqw;border-bottom:1px solid var(--b)}
.mk-lap-pills span{font-size:1.4cqw;font-weight:600;padding:.45cqw 1.2cqw;border-radius:99px;border:1px solid var(--bm);color:var(--t3);background:var(--s2)}
.mk-lap-pills span.on{border-color:var(--acb);background:var(--acd);color:var(--ac)}
.mk-lap-clip{display:flex;align-items:center;gap:1.4cqw;padding:1.2cqw 2.2cqw;border-bottom:1px solid var(--b);position:relative}
.mk-lap-clip.on{background:var(--acd)}
.mk-lap-clip.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:.5cqw;background:var(--ac)}
.mk-lap-clip .th{position:relative;width:9.4cqw;aspect-ratio:1.53;flex-shrink:0;border-radius:.6cqw;overflow:hidden;background:#0c1a12}
.mk-lap-clip .th svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk-lap-clip .tx{min-width:0;display:flex;flex-direction:column;gap:.35cqw}
.mk-lap-clip b{display:flex;align-items:center;gap:.8cqw;font-size:1.7cqw;font-weight:600;color:var(--t)}
.mk-lap-clip b i{width:.9cqw;height:.9cqw;border-radius:50%;flex-shrink:0}
.mk-lap-clip em{font-style:normal;font-family:var(--mono);font-size:1.3cqw;color:var(--t3);white-space:nowrap}
.mk-lap-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mk-lap-stage{flex:1;min-height:0;position:relative;overflow:hidden;background:#050609}
.mk-lap-stage .lbl{position:absolute;top:1.6cqw;left:1.8cqw;font-family:var(--mono);font-size:1.4cqw;color:#fff;
  background:rgba(10,13,18,.6);padding:.4cqw 1.2cqw;border-radius:99px}
.mk-lap-stage .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7cqw;height:7cqw;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mk-lap-stage .play svg{width:42%;height:42%;margin-left:6%}
.mk-lap-ctrl{flex-shrink:0;display:flex;align-items:center;gap:1.4cqw;height:6.4cqw;padding:0 2cqw;background:var(--s1);border-top:1px solid var(--b)}
.mk-lap-ctrl .pp{width:3.4cqw;height:3.4cqw;border-radius:.8cqw;background:var(--ac);color:var(--on-ac);display:flex;align-items:center;justify-content:center}
.mk-lap-ctrl .pp svg{width:55%;height:55%}
.mk-lap-ctrl .tl{flex:1;position:relative;height:.7cqw;border-radius:99px;background:var(--s3)}
.mk-lap-ctrl .tl .prog{position:absolute;left:0;top:0;bottom:0;width:34%;border-radius:99px;background:var(--acb)}
.mk-lap-ctrl .tl .head{position:absolute;left:34%;top:50%;width:1.7cqw;height:1.7cqw;border-radius:50%;transform:translate(-50%,-50%);background:var(--ac)}
.mk-lap-ctrl .tl s{position:absolute;top:50%;width:.55cqw;height:1.9cqw;border-radius:.3cqw;transform:translate(-50%,-50%);opacity:.75}
.mk-lap-ctrl .t{font-family:var(--mono);font-size:1.4cqw;color:var(--t2);white-space:nowrap}

/* The phone — front, bottom-left, landscape: how a match is actually filmed.
   The frame is the container, so bezel, radius and every label inside are
   fractions of its width — with a px floor on the words, because on a 344px
   Fold cover screen 2.55cqw is 7.6px and a button label stops being read. */
.mk-lphone{position:absolute;left:0;bottom:0;width:79%;container-type:inline-size}
.mk-lph-frame{padding:2.2cqw;border-radius:8cqw;background:#101216;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 2px 0 1px #23262d,0 36px 60px -22px rgba(0,25,45,.5),0 10px 22px -10px rgba(0,25,45,.35)}
.mk-lph-glass{position:relative;aspect-ratio:19.5/9;border-radius:6cqw;overflow:hidden;background:#050609}
/* Dynamic Island, on the left edge because the phone is on its side — and
   the reason the left column's stripe sits on its INNER edge (the app does
   the same so a stripe is never lost under it). */
.mk-lph-island{position:absolute;left:1.6cqw;top:50%;width:2.1cqw;height:9cqw;transform:translateY(-50%);border-radius:99px;background:#000;z-index:6}
.mk-lph-top{position:absolute;top:0;left:25cqw;right:25cqw;z-index:4;display:flex;align-items:center;justify-content:center;gap:2.4cqw;
  padding:2.2cqw 1cqw;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.mk-lph-top .rec{display:flex;align-items:center;gap:1cqw;font-size:2.1cqw;font-weight:700;letter-spacing:.08em}
.mk-lph-top .rec i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:var(--rd);animation:ld-rec-pulse 1.8s ease-in-out infinite}
.mk-lph-top .rec b{font-family:var(--mono);font-weight:500;font-size:2.6cqw;letter-spacing:0;margin-left:.6cqw}
.mk-lph-top .tabs{display:flex;gap:2.2cqw;font-size:max(7.2px,2.1cqw);font-weight:600;color:rgba(255,255,255,.62)}
.mk-lph-top .tabs b{color:#fff;font-weight:700;box-shadow:0 .5cqw 0 -.1cqw var(--ac)}
.mk-lph-top .stop{font-size:2.1cqw;font-weight:700;padding:.8cqw 2.2cqw;border-radius:99px;background:var(--rd)}
.mk-lphone .mk-fs-col{position:absolute;top:2.4cqw;bottom:2.4cqw;width:20cqw;display:flex;flex-direction:column;justify-content:space-between;z-index:3}
.mk-lphone .mk-fs-col.l{left:5cqw}
.mk-lphone .mk-fs-col.r{right:2.4cqw}
.mk-lphone .mk-fsb{height:6.1cqw;border-radius:1.3cqw;padding:0 1.2cqw;font-size:max(7.8px,2.15cqw);line-height:1.05}
.mk-lphone .mk-fsb::before{width:.9cqw}
.mk-lphone .mk-undo{bottom:2.2cqw;font-size:max(7.6px,2.2cqw);gap:1.3cqw;padding:.9cqw 1cqw .9cqw 1.8cqw}
.mk-lphone .mk-undo i{width:1.5cqw;height:1.5cqw}
.mk-lphone .mk-undo .c{padding:.6cqw 1.6cqw}

/* ── Trust / metrics strip ─────────────────────────────────────────── */

/* ── Spotlight row (image + copy) ──────────────────────────────────── */
.ld-spot{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.ld-spot.rev{grid-template-columns:1.1fr .9fr}
.ld-spot.rev .ld-spot-media{order:2}
.ld-spot-media{display:flex;justify-content:center;position:relative}
.ld-spot-copy h2{font-size:clamp(24px,3vw,34px);line-height:1.14;letter-spacing:-.6px;font-weight:700;margin-bottom:14px}
.ld-spot-copy .accent{color:var(--ac)}
.ld-spot-copy p{font-size:15px;color:var(--t2);line-height:1.65;margin-bottom:18px;max-width:48ch}
.ld-spot-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.ld-spot-list li{display:flex;gap:11px;font-size:var(--fs-h3);color:var(--t2);line-height:1.45}
.ld-spot-list li .ic{width:24px;height:24px;border-radius:7px;background:var(--acd);border:1px solid var(--acb);color:var(--ac);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ld-spot-list li .ic svg{width:13px;height:13px}
.ld-spot-list li b{color:var(--t);font-weight:600}

/* ── Scroll reveal ─────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .mk-log-row.pop{animation:none}
  .mk-cam-rec i,.mk-fs-top .rec i,.mk-lph-top .rec i{animation:none}
  .mk-tag.flash,.mk-fsb.flash{transform:none}
  .mk-undo{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   THE PHONE SCREENS  —  the product tour, as the app actually looks on
   a phone. One per panel, sibling to the .mk-win desktop screen; the
   breakpoint that swaps them is in the mockup-responsive block above.

   These are not the desktop layout narrowed. Each is the real phone
   screen: the fullscreen tag dock, the pinned Review player, stage-mode
   Presentations, a card per clip instead of a five-column table, and the
   season grid keeping its two axes inside a sideways scroller.

   Everything reuses the components already in this file — .mk-phone,
   .mk-fsb, .mk-undo, .mk-rev-tl, .mk-kpi, .mk-gr — so a change to a
   token or a colour reaches both screens. What is new here is only the
   phone-specific furniture: the app's mobile nav bar, the pinned stage,
   the one-row scrolling filter bars and the clip cards.
   ══════════════════════════════════════════════════════════════════ */
.mk-ph{display:none;justify-content:center;padding:4px 0 2px}
.mk-ph .mk-phone{max-width:274px}
/* Taller than the 9:18.5 the frame declares: these screens carry real UI
   below the picture (a scrubber, a filter row, a list), and at 18.5 the
   list was two rows before it ran out of glass. */
.mk-ph .mk-phone-scr{aspect-ratio:9/17.4;display:flex;flex-direction:column;font-size:11px}
/* The tag dock stays dark in both themes because it sits over video. Every
   other screen is app chrome and takes the page's own surfaces. */
.mk-ph .mk-phone-scr.lt{background:var(--s1)}

/* ── The app's own mobile nav ──
   Two things, which is all the real bar keeps on a phone: where you are,
   and who you are. The tab strip is a drawer down there, not a row. */
.mk-ph-nav{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:22px 11px 8px;
  background:var(--nav-bg);border-bottom:1px solid var(--b)}
.mk-ph-nav .ttl{font-size:12px;font-weight:700;letter-spacing:-.2px;color:var(--t)}
.mk-ph-nav .usr{margin-left:auto;width:21px;height:21px;border-radius:50%;background:var(--s3);
  border:1px solid var(--bm);display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:700;color:var(--t2)}

/* ── 01 · Record & Tag — the fullscreen dock ──
   The picture takes the whole glass; everything else floats over it. The
   status row sits in the ears either side of the notch, the panel tabs under
   it, then the two button columns — 45% each, spaced evenly down the height,
   which is the app's portrait rule — and the undo chip on the bottom edge. */
.mk-fs-top{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;
  padding:6px 12px 14px;background:linear-gradient(to bottom,rgba(0,25,45,.66),transparent);color:#fff}
.mk-fs-top .rec{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:700;letter-spacing:.08em}
.mk-fs-top .rec i{width:6px;height:6px;border-radius:50%;background:var(--rd);animation:ld-rec-pulse 1.8s ease-in-out infinite}
.mk-fs-top .rec b{font-size:11px;letter-spacing:0;margin-left:2px}
.mk-fs-top .stop{font-size:8.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--rd)}
.mk-fs-tabs{position:absolute;top:28px;left:0;right:0;z-index:4;display:flex;justify-content:center;gap:10px;
  font-size:8.5px;font-weight:600;color:rgba(255,255,255,.62)}
.mk-fs-tabs b{color:#fff;font-weight:700;box-shadow:0 2px 0 -.5px var(--ac)}
.mk-fs-grid{position:absolute;top:36px;bottom:40px;left:7px;right:7px;z-index:3;display:flex;justify-content:space-between}
.mk-fs-grid .mk-fs-col{width:45%;display:flex;flex-direction:column;justify-content:space-evenly}

/* ── 02 · Review / 04 · Clip Library — the pinned player ──
   The player does not scroll away. In the app this is a sticky element with
   the lists moving under it; in a mockup the screen is the viewport, so it
   is simply the first block and the list below it is the scroller. A full
   16:9: it is the thing the screen is for. */
.mk-ph-stage{position:relative;flex-shrink:0;aspect-ratio:16/9;overflow:hidden;background:#050609}
.mk-ph-stage.lib{aspect-ratio:2/1}
.mk-ph-stage .mk-rev-cliplbl{top:7px;left:8px;font-size:8px;padding:2px 7px;max-width:calc(100% - 16px);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:2}
.mk-ph-ttl{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:6px 11px;background:var(--s2);
  border-top:1px solid var(--b);font-size:9px;font-weight:600;color:var(--t)}
.mk-ph-ttl span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ph-ttl i{font-style:normal;color:var(--t3)}
.mk-ph-scrub{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:7px 11px;
  background:var(--s1);border-bottom:1px solid var(--b)}
.mk-ph-scrub .mk-rev-time{font-size:8.5px}
.mk-ph-scrub .pp{width:18px;height:18px;border-radius:5px;flex-shrink:0;background:var(--ac);color:var(--on-ac);
  display:flex;align-items:center;justify-content:center}
.mk-ph-scrub .pp svg{width:10px;height:10px}

/* One row, scrolling. The wrapped block this replaces cost three lines of a
   screen that has about fourteen. */
.mk-ph-bar{--sh-bg:var(--s1);flex-shrink:0;display:flex;gap:5px;padding:7px 11px;
  overflow-x:auto;scrollbar-width:none;background:var(--s1);border-bottom:1px solid var(--b)}
.mk-ph-bar::-webkit-scrollbar{display:none}
.mk-ph-bar span{flex-shrink:0;padding:3px 9px;border-radius:99px;border:1px solid var(--bm);
  background:var(--bg);font-size:9px;font-weight:600;color:var(--t3);white-space:nowrap}
.mk-ph-bar span.on{background:var(--acd);border-color:var(--acb);color:var(--ac)}

.mk-ph-list{flex:1;min-height:0;overflow:hidden;background:var(--bg)}
.mk-ph-list .mk-clip{gap:7px;padding:6px 11px}
.mk-ph-list .mk-clip.on{background:var(--acd)}
/* Each row carries its own frame — a crop of the same field the player is
   showing, so five clips read as five moments rather than five identical
   green tiles. */
.mk-ph-th{position:relative;width:48px;aspect-ratio:1.55;border-radius:5px;flex-shrink:0;overflow:hidden;background:#12301d}
.mk-ph-th svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk-ph-list.rv .mk-clip{gap:10px;padding:7px 11px;border-bottom:1px solid var(--b)}
.mk-ph-list.rv .mk-clip.on{border-left:3px solid var(--ac);padding-left:8px}
.mk-ph-list .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mk-ph-list .ac{font-size:10.5px;font-weight:600;color:var(--t);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ph-list .mt{font-family:var(--mono);font-size:8.5px;color:var(--t3)}

/* ── 03 · Presentations — Stage mode ──
   The only presentation screen a phone has. The frame takes the glass, the
   reel is a rail along the bottom, and the mark and the stopwatch are drawn
   over the picture rather than beside it. */
.mk-ph-pstage{position:relative;flex:1;min-height:0;overflow:hidden;background:#050609}
.mk-ph-sw{position:absolute;top:24px;right:10px;font-family:var(--mono);font-size:10px;
  color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16);
  border-radius:99px;padding:2px 8px}
.mk-ph-pbar{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:7px 11px;
  background:rgba(8,10,14,.9)}
.mk-ph-pbar .b{width:20px;height:20px;border-radius:5px;background:rgba(255,255,255,.14);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0}
.mk-ph-pbar .tl{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.2);position:relative}
.mk-ph-pbar .tl i{position:absolute;left:0;top:0;bottom:0;width:44%;border-radius:99px;background:var(--ac)}
.mk-ph-pbar .t{font-family:var(--mono);font-size:8.5px;color:rgba(255,255,255,.75);flex-shrink:0}
.mk-ph-rail{--sh-bg:#0b0d12;flex-shrink:0;display:flex;gap:6px;padding:8px;overflow-x:auto;
  scrollbar-width:none;background:#0b0d12}
.mk-ph-rail::-webkit-scrollbar{display:none}
/* The rail is a row of cards, not the desktop's stacked list, so the item's
   own border-bottom and left-rule selected state are replaced outright. */
.mk-ph-rail .mk-pr-item{flex-shrink:0;flex-direction:column;align-items:flex-start;gap:3px;
  width:78px;padding:6px 7px;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:rgba(255,255,255,.05)}
.mk-ph-rail .mk-pr-item.on{border-color:var(--ac);background:rgba(99,91,224,.22);padding-left:7px}
.mk-ph-rail .mk-pr-n{width:15px;height:15px;font-size:8px;background:rgba(255,255,255,.16);color:#fff}
.mk-ph-rail .nm{font-size:9px;font-weight:600;color:#fff;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-ph-rail .tm{font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.6)}

/* ── 04 · Clip Library — a card per clip ── */
.mk-ph-srch{flex-shrink:0;display:flex;gap:5px;padding:8px 11px 6px;background:var(--s1)}
.mk-ph-srch .q{padding:3px 9px;border-radius:6px;border:1px solid var(--acb);background:var(--acd);
  font-size:9px;font-weight:600;color:var(--ac);white-space:nowrap}
.mk-ph-srch .q.ph{border-color:var(--bm);background:none;color:var(--t3);font-weight:500}
.mk-ph-chips{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 11px 7px;background:var(--s1)}
.mk-ph-chips .chip{padding:2px 7px;border-radius:99px;background:var(--s3);font-size:8.5px;font-weight:600;color:var(--t2)}
.mk-ph-chips .chip i{font-style:normal;color:var(--t3);margin-left:2px}
.mk-ph-chips .ct{font-family:var(--mono);font-size:8px;color:var(--t3);margin-left:auto}
.mk-ph-row{display:flex;align-items:center;gap:6px;padding:6px 11px;border-bottom:1px solid var(--b)}
.mk-ph-row.playing{background:var(--acd)}
.mk-ph-row .tg{padding:1px 7px;border-radius:4px;font-size:9px;font-weight:700;
  border:1px solid color-mix(in srgb,var(--tc,#8a90a0) 40%,transparent);
  background:color-mix(in srgb,var(--tc,#8a90a0) 16%,transparent);color:var(--t)}
.mk-ph-row .pl{font-size:9px;font-weight:600;color:var(--t2)}
.mk-ph-row .c-m{margin-left:auto;font-size:8.5px;color:var(--t2);white-space:nowrap}
.mk-ph-row .c-m i{font-style:normal;color:var(--t3)}
.mk-ph-sel{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:7px 11px;
  background:var(--s2);border-top:1px solid var(--b);font-size:9px;color:var(--t2)}
.mk-ph-sel b{font-family:var(--mono);color:var(--t)}
.mk-ph-sel .go{margin-left:auto;padding:3px 9px;border-radius:6px;background:var(--ac);color:var(--on-ac);font-weight:600}

/* ── 05 · Data Insights ──
   The counts go two-up. The grid does NOT reflow: an action against a match
   is two axes, and a table that stacks them is no longer a comparison. It
   keeps its shape and scrolls sideways inside its own box — the one place on
   these screens where that is the right answer. */
.mk-ph-flt{flex-shrink:0;display:flex;gap:5px;padding:8px 11px 6px;background:var(--s1)}
.mk-ph-flt .fl{padding:3px 8px;border-radius:6px;border:1px solid var(--bm);background:var(--bg);
  font-size:8.5px;font-weight:600;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ph-kpis{flex-shrink:0;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px 11px 8px;background:var(--s1)}
.mk-ph-kpis .mk-kpi{padding:7px 4px}
.mk-ph-kpis .mk-kpi .n{font-size:14px}
.mk-ph-kpis .mk-kpi .l{font-size:8px}
.mk-ph-gw{--sh-bg:var(--bg);flex:1;min-height:0;overflow:auto hidden;padding:8px 11px;background:var(--bg)}
.mk-ph-gw .mk-gr{min-width:238px;font-size:9px}
.mk-ph-gw .mk-gr th,.mk-ph-gw .mk-gr td{padding:4px 4px}
.mk-ph-gw .mk-gr thead th{font-size:8px}
.mk-ph-gw .mk-gr th.a{font-size:9px}
.mk-ph-gw .mk-gr tbody td{font-size:9px}
.mk-ph-gw .mk-gr th.a .dot{width:5px;height:5px;margin-right:5px}

/* The drawn scene sits under the interface: ground, markings and players are
   one SVG, and the app chrome is above it. `slice` because a portrait screen
   crops a scene drawn to any other shape, which is what a camera does too. */
.mk-ph-sc{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* Every rail card is two lines tall whether or not its name needs two, so the
   durations sit on one baseline instead of stepping with the titles. */
.mk-ph-rail .nm{min-height:2.5em}

/* ── Mockup responsive ─────────────────────────────────────────────── */
@media(max-width:900px){
  /* The hero stacks here (see the Responsive block), so the two devices
     centre under the copy instead of hugging a right edge that is gone. */
  .ld-hero-stage{margin-inline:auto;max-width:600px}
}
/* ── Hero on a phone: the phone alone ──
   The laptop is the coach's half of the story and a phone column has no room
   to tell it — at 346px it would be a 300px laptop with 5px type. The phone
   comes forward, full width and still landscape, which is also what puts its
   tag buttons inside the first screen instead of under the fold. */
@media(max-width:760px){
  .ld-hero-stage{aspect-ratio:auto;max-width:460px}
  .mk-laptop{display:none}
  /* Out to the 16px gutter floor rather than the column's 22px: twelve
     buttons down a landscape phone want every pixel of width going. */
  .mk-lphone{position:relative;width:calc(100% + 12px);margin-inline:-6px}
}
@media(max-width:960px){
  .ld-spot{grid-template-columns:1fr;gap:34px}
  .ld-spot.rev{grid-template-columns:1fr}
  .ld-spot.rev .ld-spot-media{order:0}
  }
/* ══ THE PHONE SHOWS THE PHONE APP ══════════════════════════════════
   Below this width the desktop window is not narrowed, it is REPLACED. The
   old answer reflowed it — .mk-split went to a column, .mk-appnav dropped its
   tab row — which produced a squeezed desktop layout on a phone. On a page
   whose headline is "Your phone is now your video analysis system", the one
   picture a phone reader gets should be the app on a phone.
   So each .mk-panel carries two children: .mk-win (the desktop screen) and
   .mk-ph (the phone screen), and exactly one of them is ever displayed. The
   reflow rules that used to live here are gone with the layout they reflowed
   — .mk-win is display:none here, so they had nothing left to act on.
   760px, not 560: that is what the rest of this file already calls a phone
   (the touch-target block below, the w5 deck), and between 620 and 760 the
   desktop window was the more squeezed of the two anyway. */
@media(max-width:760px){
  .mk-win{display:none}
  .mk-ph{display:flex}
}
/* ── The tour tabs: a 3-2 pyramid, all five on screen ──
   Three shapes were tried here. Natural flex wrapping gave 2-2-1, which reads
   as a word cloud and strands the fifth tab alone on a line. A sideways
   scroller fixed the shape but hid the last two off the right edge, which is
   worse: a tab you cannot see is a tab you do not know exists, and these five
   ARE the product. So: every tab visible, in two deliberate rows.

   A six-column grid is what makes it 3-2 rather than whatever the widths
   happen to produce. Each tab spans two columns, so three fill a row; the
   fourth and fifth are placed at columns 2 and 4, which centres them under
   the three above. Flex cannot do this — `justify-content:center` centres the
   last row but has no way to keep the FIRST row at exactly three.

   839px, not 680: measured, all five only sit on one line from about 840px up.
   Between 681 and 839 they wrapped 4-1, which strands the last tab exactly the
   way 2-2-1 stranded it — so the pyramid covers that band too, iPad portrait
   included. Above 840 nothing here applies and the row is a plain flex row. */
@media(max-width:839px){
  .mk-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;justify-items:stretch}
  .mk-tab{grid-column:span 2;justify-content:center;min-width:0;
    letter-spacing:-.2px;white-space:nowrap;overflow:hidden}
  .mk-tab:nth-child(4){grid-column:2/span 2}
  .mk-tab:nth-child(5){grid-column:4/span 2}
}
/* Below this the icon and the ordinal stop fitting: three pills across a 320px
   screen leaves about 87px each, and "Presentations" alone needs most of that.
   They stay above it, where there is room for them. The 44px touch height is
   set in the touch-target block and is not affected either way. */
@media(max-width:560px){
  .mk-tab{padding:0 6px;font-size:clamp(10.5px,3.1vw,13px)}
  .mk-tab svg{display:none}
}
@media(max-width:560px){
  .mk-kpis{grid-template-columns:repeat(2,1fr)}
  .mk-tab .num{display:none}
}

/* ────────────────────────────────────────────────────────────
   PHONE TOUCH TARGETS
   Every control on this page sat between 18px and 40px tall — including
   the conversion CTAs and the whole footer nav. 44px is the floor, and
   the footer links were the worst of it at 18px in a stacked column.
   Placed last so these win over the component rules above.
   ──────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .ld-btn{ height:46px; padding:0 20px; font-size:14.5px }
  /* The hero's two buttons sat side by side at their content widths, which
     made the secondary ("See the app in action", 20 characters) visibly
     WIDER than the primary ("Start free", 10) — the ghost button read as the
     main action. Stacked and full width, so rank is set by order and fill
     rather than by how long the label happens to be. */
  .ld-hero-cta{ flex-direction:column; align-items:stretch; gap:10px }
  .ld-hero-cta .ld-btn{ width:100% }
  /* The phone-only Contact-row override that stood here is gone. It hid the
     “EMAIL” label and re-centred the row below 760px — which left every wider
     viewport still showing the stacked shape it was written to fix. Those rules
     are unconditional now; see `.ld-contact-list` in the panel block above. */
  /* Wordmark → home. Keeps its size; gains the hit area. */
  .ld-brand{ padding:6px 0 }
  .ld-burger{ width:44px; height:44px }
  /* Product-tour tabs — the one interactive part of the mockups. */
  .mk-tab{ height:44px }
}


/* ===============================================================
   2026-08-04 RESTRUCTURE
   10 sections -> 6. Everything below either replaces a section
   that was deleted, or is a component the merge needed.
   =============================================================== */

.ld-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ════════════════════════════════════════════════════════════════════
   DEVICE SHOWCASE CAROUSEL
   Three topics — features, the ten-minute run-through, the roles — each
   living on the screen of a different device, on one horizontal rail.
   The rail is the argument: the same app on a phone, a tablet and a
   laptop, and you get there by swiping rather than by pressing a tab.

   Type inside a device screen is sized in `em` off a per-slide `--u`, so
   the whole mock scales as one object at every breakpoint. Everything
   outside the frames (the caption, the button) is normal page type at a
   normal size — the screens are a preview, the real reading happens in
   the caption and the detail panel.
   ════════════════════════════════════════════════════════════════════ */
/* The whole section has to be readable in one go on a laptop at 100% zoom —
   heading, screen and the open button together — so it runs tighter than the
   rest of the page and the head sits in two columns instead of stacking. */

.ld-dv{position:relative}

/* Half the track width of padding either end is what lets the first and
   last slide reach the centre. Full-bleed, so neighbours peek in.
   The 70vh cap is the compactness rule: on a short laptop the whole rail
   scales down rather than pushing the button below the fold. */

/* Every size inside a frame is an `em` off --u, and --u is a fraction of the
   slide — so a mock scales as one object when the rail shrinks to fit a
   short viewport, instead of the type staying put and overflowing. */
/* One stage height for all three, so the caption and the dots below stay put
   as you swipe. The laptop sets the number; the phone is portrait so it very
   nearly fills the same box rather than floating in a band of white. */
/* A landscape phone leaves a lot of stage empty. The glow fills it and
   doubles as the "this one is live" cue. It has to sit behind the frames,
   which are static — hence the explicit z-index on them. */

/* ── Device frames ───────────────────────────────────────────────────
   Each frame is sized as a fraction of the slide and carries its own
   font-size, so a phone is visibly a phone next to a laptop and the type
   on its screen shrinks with it. Everything inside is in `em`. */
/* The bezels are near-black in both themes, so on the dark theme they melt
   into the page and the drop-shadow does nothing. This hairline is what
   keeps the frames' edges readable there; on the light theme it lands on a
   pale background and disappears, which is the intent. */
/* Phone, portrait. A tall frame both matches the laptop's height (so the
   stage stops being half empty) and suits a six-step list read top to
   bottom, which is what the run-through is. */
/* The width is capped by the stage: any wider and a 9:18.5 frame is taller
   than the laptop next to it and the whole section grows. */
/* Tablet */
/* Laptop */
/* Mid-grey rather than silver: a bright base reads as a white bar on the
   dark theme and pulls more attention than the screen above it. */

/* ── The screen itself ── */

/* Phone: the ten-minute run-through, read top to bottom. The figure is the
   whole pitch in one glance, so it carries the weight the headline would. */
/* Centred in whatever height is left, so the list doesn't get shoved to the
   bottom of the screen when the closing line is hidden on small frames. */

/* Tablet: the feature set, with room to say what each one actually does. */

/* Laptop: the three roles side by side, the way the app splits them. */
/* The row takes the slack rather than leaving it as a gap above and below,
   so the cards read as panels instead of the screen reading as half empty. */
/* The screens are fixed-height, so long copy is clamped rather than allowed
   to push the tab line out of the frame. */

/* A closing line inside the frame — the screens are fixed-height, and this
   is what keeps the tablet and laptop from ending in dead space. */

/* ── Caption under each device ── */
/* Wide enough that the badge stays on one line — wrapping it costs 23px of
   the height this section is trying to save. */
/* Three device glyphs with the current one lit. Saying "identical on the
   other two" three times over, next to a picture of the other two, is what
   carries "nothing here is device-specific" without a paragraph about it. */

/* ── Progress dots + hint ── */

/* ── Detail panel (grid-template-rows animates; height:auto does not) ── */
/* The gap belongs to the panel, not the container — on the container a closed
   panel still costs its margin, which is 22px of a section fighting for it. */
/* The panel sits on --bg, so the cards inside need the other surface. */

/* Short laptop screens (1366×768 and 1080p at 125–150% scaling leave roughly
   650–740px of viewport). The rail already scales itself off the vh cap; this
   trims the fixed furniture around it so heading, screen and button land on
   one screenful instead of the button falling below the fold. */
@media(min-width:761px) and (max-height:830px){
}

@media(prefers-reduced-motion:reduce){
}

/* -- Plan comparison table -- */
.ld-cmp{margin-top:clamp(30px,4vh,48px);border:1px solid var(--b);border-radius:var(--r);background:var(--s1);overflow:hidden}
.ld-cmp-hd{padding:20px 20px 16px;border-bottom:1px solid var(--b)}
.ld-cmp-hd h3{font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:-.3px;margin-bottom:5px}
.ld-cmp-hd p{font-size:var(--fs-body);color:var(--t3)}
.ld-cmp-scroll{overflow-x:auto}
.ld-cmp-tbl{width:100%;border-collapse:collapse;min-width:640px}
.ld-cmp-tbl th,.ld-cmp-tbl td{text-align:left;padding:11px 14px;font-size:var(--fs-h3);border-bottom:1px solid var(--b)}
.ld-cmp-tbl thead th{background:var(--s2);padding:14px;vertical-align:bottom;border-bottom:1px solid var(--bm)}
/* ── TWO EMPHASISED COLUMNS, EACH IN ITS OWN CARD’S COLOUR ──
   The table now says exactly what the three cards above it say. Starter is
   the "most popular" card and keeps the accent it always had; Club is the
   card carrying a colour of its own and keeps --prem — the complement pair,
   green on the light ground and lavender on the dark one, so the two washes
   can sit side by side without collapsing into one another in either theme.
   The register rule holds for --prem: it paints the wash, the rule and the
   button FILL only, never text, because green on paper is 1.6:1. That is why
   Starter has a .pn colour rule below and Club does not — Club's plan name
   keeps its neutral text role. */
.ld-cmp-tbl thead th.feat{background:var(--acd);box-shadow:inset 0 3px 0 var(--ac)}
.ld-cmp-tbl tbody tr:not(.grp) td:nth-child(3){background:color-mix(in srgb,var(--acd) 55%,transparent)}
.ld-cmp-tbl thead th.prem{background:var(--prem-d);box-shadow:inset 0 3px 0 var(--prem)}
.ld-cmp-tbl tbody tr:not(.grp) td:nth-child(4){background:color-mix(in srgb,var(--prem-d) 55%,transparent)}
.ld-cmp-tbl tr.grp th{position:relative}
.ld-cmp-tbl .pn{display:block;font-size:14.5px;font-weight:700;color:var(--t)}
/* Explicit weight: these sit inside a bold table cell and would otherwise
   inherit 700, which DM Mono has no face for. */
.ld-cmp-tbl .pp{display:block;font-family:var(--mono);font-weight:500;font-size:var(--fs-label);color:var(--t3);margin-top:3px}
.ld-cmp-tbl thead th.feat .pn{color:var(--ac)}
.ld-cmp-corner{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3)}
.ld-cmp-tbl tbody th{font-weight:500;color:var(--t2);width:38%}
.ld-cmp-tbl tbody td{color:var(--t2);font-variant-numeric:tabular-nums}
.ld-cmp-tbl tr.grp th{background:var(--bg);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--t3);padding:9px 14px;width:auto}
/* ══ THE GROUP ROW RE-NAMES THE COLUMNS ═════════════════════════════
   This table is 47 rows and roughly 2,800px tall on a phone. <thead> is not
   sticky, so from about the third row down the reader is scrolling a grid of
   anonymous ticks with no way to tell Basic from Club without going back up.

   WHY NOT position:sticky. Three ancestors here each independently defeat it:
   .ld-cmp's overflow:hidden, .ld-cmp-inner's overflow (auto hidden when open)
   and the grid-template-rows 0fr→1fr accordion the open/close animation is
   built from. Making sticky work means unpicking all three and re-doing the
   animation, and it still fails in the middle of the open transition. The
   group heading rows already break the table into six blocks, so they carry
   the column names instead — no sticky, no scroll container, nothing to
   break, and the reader is re-anchored every eight rows.

   At every width, not just the phone: the desktop table is the same 47 rows.
   The labels are aria-hidden because the <th scope="col"> in <thead> is still
   the accessible name of each column — a screen reader is told which column
   it is in on every cell and does not need it repeated six more times. */
.ld-cmp-tbl tr.grp .gl{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--t3);background:var(--bg);text-align:center;padding:9px 4px}
.ld-cmp-tbl tr.grp .gl.feat{color:var(--ac)}
/* Club's name, like everything else --prem would paint on a light ground,
   stays on a neutral text role — green on white is 1.6:1. */
.ld-cmp-tbl tr.grp .gl.prem{color:var(--t2)}
/* Ticks and crosses, not the words "Yes" and "—". At a glance the eye reads
   a column of shapes far faster than a column of text, and the cross has to
   be visibly a cross — a dash reads as "not applicable", which is a different
   and much softer statement than "you don't get this". */
/* ── EVERY PLAN COLUMN IS CENTRED ──
   The ticks and crosses always were; the VALUES were not, so "This device |
   75 GB cloud | 250 GB cloud" started at three different left edges directly
   under three centred ticks, and the eye had nothing to run down. A comparison
   is read in columns, and a column only exists if its cells share an axis.
   Header, value, the "Best for" line and the button in the foot all take it.

   The feature column is the deliberate exception. It is the pinned column on a
   phone (below) and its labels wrap to two and three lines; a centred wrapped
   label has a ragged left edge on every row, which is exactly the thing that
   makes a long table unscannable. */
.ld-cmp-tbl thead th:not(:first-child),
.ld-cmp-tbl tbody td,
.ld-cmp-tbl tfoot td{text-align:center}
.ld-cmp-tbl thead th:not(:first-child){vertical-align:bottom}
/* .pw is a block inside the header cell with its own measure; centring the
   cell is not enough to centre a 16ch block inside it. */
.ld-cmp-tbl .pw{margin-left:auto;margin-right:auto}
.ld-cmp-tbl td.y,.ld-cmp-tbl td.n{text-align:center;width:15%}
.ld-cmp-tbl .ci{width:17px;height:17px;display:inline-block;vertical-align:-3px}
.ld-cmp-tbl td.y{color:var(--ac)}
.ld-cmp-tbl td.n .ci{color:var(--t3);opacity:.5}
/* The shared baseline: one row saying what every plan includes, so the rest
   of the table can be nothing but differences. */
.ld-cmp-tbl tr.base th{color:var(--t);font-weight:600;line-height:1.5}
.ld-cmp-tbl tr.base td,.ld-cmp-tbl tr.base th{background:var(--s2);border-bottom:1px solid var(--bm)}
/* Who each plan is for, under its price. This is what makes Team read as the
   default rather than as "the middle one" — it names the buyer. */
.ld-cmp-tbl .pw{display:block;font-size:var(--fs-label);color:var(--t3);margin-top:6px;font-weight:400;line-height:1.35}
/* Cells are prose too, and at a phone’s column width nearly every
   feature row was ending on a word of its own. */
.ld-cmp-tbl th,.ld-cmp-tbl td{text-wrap:pretty}
.ld-cmp-tbl thead th.feat .pw,.ld-cmp-tbl thead th.prem .pw{color:var(--t2)}
.ld-cmp-tbl td.hi{color:var(--t);font-weight:600}
/* "Best for" closes the table with the sentence the whole thing was building
   towards — which plan is yours. Left-aligned prose, not a centred glyph, so
   it doesn't read as another feature row. */
.ld-cmp-tbl tr.fit th,.ld-cmp-tbl tr.fit td{vertical-align:top;padding-top:15px;padding-bottom:16px}
/* Centred with the rest of its column since 2026-09-03. It was left-aligned so
   it would not read as another feature row — but the group headings and the
   type size already do that job, and being the one row in the table that broke
   the column axis was the louder difference. */
.ld-cmp-tbl tr.fit td{font-size:var(--fs-sm);line-height:1.45;color:var(--t3);width:15%}
.ld-cmp-tbl tr.fit th{color:var(--t);font-weight:600}
.ld-cmp-tbl tbody tr:not(.grp):hover td,.ld-cmp-tbl tbody tr:not(.grp):hover th{background:var(--s2)}
/* The hover repaint above is a later rule of equal specificity, so without
   this an emphasised column lost its tint on whichever row the pointer was
   on — a column meant to read as continuous, broken by a gap that follows
   the mouse. Both washed columns need it. */
.ld-cmp-tbl tbody tr:not(.grp):hover td:nth-child(3){background:color-mix(in srgb,var(--acd) 55%,var(--s2))}
.ld-cmp-tbl tbody tr:not(.grp):hover td:nth-child(4){background:color-mix(in srgb,var(--prem-d) 55%,var(--s2))}
.ld-cmp-tbl tfoot td{padding:16px 14px;border-bottom:none}
.ld-cmp-tbl tfoot td.feat{background:var(--acd)}
.ld-cmp-tbl tfoot td.prem{background:var(--prem-d)}
.ld-cmp-tbl tfoot .ld-btn{width:100%;justify-content:center}

/* ── Device showcase, small screens ────────────────────────────────
   The mockups stay — they are the "runs on everything" argument — but the
   two widest screens lose their tightest content so the type inside them
   is still readable at a third of the size. */
@media(max-width:900px){
}
@media(max-width:760px){
  /* A phone-sized phone would be unreadable on a phone, so the two wide
     frames give up their size difference and take the full slide. The
     portrait phone stays narrow — at full width it would be taller than the
     viewport, which defeats the point of the section being compact. */
  /* Screens are fixed-height boxes; at a third of the size the lead-in and
     the closing line are the first things that have to go. */
  /* Eight two-line feature rows do not fit a phone-width tablet; one column
     of names does, and the descriptions are in the panel below. */
  /* Three role columns inside a phone-width laptop is four words per line.
     Stacked rows of just the role names carry the idea. */
  /* The mobile swipe-row treatment bleeds to the page edge; inside a padded
     panel that would hang off the card, so the grid just stacks here. */
}


/* -- Height trims, 2026-08-04 --
   Section count was the easy half; these are the changes that actually
   shortened the page. */

/* Eight feature cards at three columns ran to three rows. Four columns on a
   wide screen makes it two, with no loss of content. */
@media(min-width:1180px){
  .ld-grid{grid-template-columns:repeat(4,1fr)}
}

/* The plan cards do the selling; the full matrix is for the one person who
   wants to check a specific line before paying. Collapsed by default it costs
   a button instead of a screen and a half. */
.ld-cmp-scroll{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.ld-cmp.open .ld-cmp-scroll{grid-template-rows:1fr}
/* THE SIDEWAYS SCROLL LIVES ON THE INNER WRAPPER, and it has to.
   The 0fr→1fr reveal above needs a child that clips vertically, so this
   element carries overflow:hidden — and `hidden` is BOTH axes. That silently
   cancelled the overflow-x:auto declared for .ld-cmp-scroll higher up
   (~line 610): the table is min-width:640px, the wrapper on a phone is
   344px, and the 296px difference was simply cut off. What a coach saw when
   they tapped "Compare all features" was the Feature column, the Free
   column, and no way whatsoever to reach Starter or Club — the two columns
   the table exists to sell. The page even printed "Swipe to compare plans"
   over a strip that could not swipe.
   `overflow:auto hidden` is x:auto, y:hidden — sideways scrolling back, the
   vertical clip the animation needs kept. Both axes are named explicitly so
   neither can be resurrected as `visible`, which would force the other back
   to auto and break the reveal. */
.ld-cmp-inner{overflow:hidden}
.ld-cmp.open .ld-cmp-inner{overflow:auto hidden;-webkit-overflow-scrolling:touch}
.ld-cmp-inner>table{min-width:640px}
/* ── The pinned feature column ──
   Restoring the sideways scroll above is only half an answer: swipe to reach
   Starter and Club and the row label goes out the left, leaving a column of
   anonymous green ticks. Whatever is being compared has to stay on screen
   while the plans move past it.
   Only [scope="row"] cells pin — the group headings (Record & tag, Review &
   clips) are colspan=4 and have no column to stick to. Every pinned cell is
   given an explicit background because a sticky cell with a transparent one
   lets the scrolling rows slide visibly underneath it; tr.base already has
   its own, and keeps it. The hairline on the right edge is what tells you the
   column is pinned rather than just first. */
@media(max-width:620px){
  /* ── 2026-09-06: THE TABLE FITS. NOTHING SCROLLS SIDEWAYS. ──
     Everything below this line replaces the pin-and-swipe answer described
     above, which is left in place as the record of why it existed.
     The old shape was a 530px table on a ~344px phone: the feature column
     pinned to the left and the three plan columns swiped past it. It worked,
     but it asked a reader to hold Basic in their head while Club came into
     view — which is the one thing a comparison table is supposed to remove.
     A tick is 17px wide. Three of them and a label genuinely fit across a
     phone; the 530px minimum was only ever there to keep the numbers and the
     prose from wrapping, and the prose ("Best for") is gone.
     So: no minimum, fixed layout, four columns that add to 100%, and every
     answer on screen at once. */
  .ld-cmp-tbl thead th:first-child{background:var(--s2)}
  .ld-cmp-tbl tbody th[scope="row"]{background:var(--s1)}
  .ld-cmp-tbl tr.base th[scope="row"]{background:var(--s2)}

  /* min-width:0 has to be restated on BOTH selectors: the base rule sets it
     on .ld-cmp-tbl and a later rule sets it again on .ld-cmp-inner>table,
     which would otherwise win on specificity and put the 640px minimum back.
     table-layout:fixed is what makes the four widths below binding — in auto
     layout a `width` is a suggestion and the longest label in a column wins,
     which is the fault this whole block exists to fix. */
  .ld-cmp-tbl,.ld-cmp-inner>table{min-width:0;width:100%;table-layout:fixed}
  /* 42 / 19.3 / 19.3 / 19.3. On a 344px phone that is a ~145px label column
     and three ~66px plan columns — a 17px tick sits comfortably in one, and
     the widest value left in the table ("Unlimited", ~52px at this size)
     clears it on a single line. Everything narrower than that is a glyph. */
  .ld-cmp-tbl thead th:first-child{width:42%}
  .ld-cmp-tbl thead th:not(:first-child){width:19.33%}
  .ld-cmp-tbl tbody th{font-size:var(--fs-label);line-height:1.35;padding:9px 8px;
    hyphens:auto;overflow-wrap:break-word}
  /* Tight cell padding is what buys the value column its single line: at
     6px a side "Unlimited" wrapped, at 4px it does not. */
  .ld-cmp-tbl th,.ld-cmp-tbl td{padding:9px 4px;font-size:var(--fs-sm)}
  .ld-cmp-tbl thead th{padding:11px 6px}
  .ld-cmp-tbl .pn{font-size:var(--fs-body)}
  .ld-cmp-tbl .pp{font-size:var(--fs-xs)}
  /* The row labels below say the same thing at length, and there is no
     width here to say it twice. */
  .ld-cmp-tbl .pw{display:none}
  .ld-cmp-tbl tr.grp th{padding:8px 9px}
  .ld-cmp-tbl tfoot td{padding:12px 3px}
  /* The button has to live inside a ~66px column now, not a ~108px one.
     "Start now" at 10.5px measures about 52px, so the padding is what has to
     give; below this it would sit on the border. */
  .ld-cmp-tbl tfoot .ld-btn{padding-left:2px;padding-right:2px;font-size:var(--fs-xs)}
}
.ld-cmp-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;background:none;border:0;border-top:1px solid var(--b);cursor:pointer;
  font-family:var(--sans);font-size:var(--fs-h3);font-weight:600;color:var(--ac)}
.ld-cmp-toggle:hover{background:var(--s2)}
.ld-cmp-toggle .chev{width:15px;height:15px;transition:transform var(--dur-slow);flex-shrink:0}
.ld-cmp.open .ld-cmp-toggle .chev{transform:rotate(180deg)}
/* .ld-cmp-note and its two rules went with the paragraph on 2026-09-06 — the
   footnote carried a price, and the rest of what it said (recorders never use
   a seat, the 10-day bin) is a table row and a plan-card line already. */

/* The closing CTA sits inside the demo section now, so it does not need the
   padding of a standalone band. */
.ld-cta-band{padding:clamp(28px,4vw,44px) clamp(22px,3vw,34px);margin-top:26px}


/* -- Mobile: swipe rows instead of tall stacks --
   A phone collapsed every grid to one column, so eight feature cards became
   eight screens of scrolling. Horizontal scroll-snap keeps all the content
   and costs one card of height. Same pattern the roles carousel uses, so it
   reads as one idea rather than three different behaviours.
   Applied below 760px only; the desktop grids are untouched. */
/* THE PRICE CARDS LEFT THIS CAROUSEL ON 2026-09-06. They were swipe cards
   like the feature grid, and at 82% width a card carrying nine feature lines
   was most of a screen tall AND sideways-scrolling — two gestures to read one
   section, with the ribbon of the card beside it always half in view. They
   are now a plain vertical stack whose lists collapse (the phone block
   further down), which is one gesture and a section you can see the shape of.
   .ld-grid keeps the carousel: its cards are four lines each, which is what
   the pattern was designed for. */
@media(max-width:760px){
  .ld-grid{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:82%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:4px;margin-inline:-22px;
    padding-inline:22px
  }
  .ld-grid::-webkit-scrollbar{display:none}
  .ld-grid>*{scroll-snap-align:start}
}

/* -- Contact: one panel, centred and held to a readable measure --
   The two-panel grid above (.ld-cc, 1.1fr .9fr) and the phone-only tab strip
   that paged between them are gone with the one-form merge. .ld-cc survives as
   the wrapper so the panel keeps the section's rhythm; this modifier stops it
   running the full section width now that there is nothing beside it. The
   max-width:760px rule is not redundant with the .ld-cc one at the top of this
   file: that rule sits EARLIER in the sheet and would lose to this modifier at
   equal specificity. */
.ld-cc-one{grid-template-columns:minmax(0,660px);justify-content:center}
@media(max-width:760px){ .ld-cc-one{grid-template-columns:1fr} }

/* -- Club enquiry dialog (#club-enquiry) -- REMOVED 2026-09-05 --
   The dialog went with the enquiry form (see the note where it stood in
   index.html). Its rules are deleted rather than left as dead weight: the
   only thing they shared with .w5-dlg below was the scroll-lock selector
   list, and .ld-locked has been dropped from it there. If a dialog is ever
   wanted on this page again, .w5-dlg is the one to copy. */

/* ══════════════════════════════════════════════════════════════════
   FIRST MATCH · FEATURES · ROLES  (#first-match)
   Replaces the three-slide drag carousel. Three blocks, all visible,
   each with its detail behind native <details>. No JavaScript at all
   in this section now — the disclosure, the keyboard support and the
   screen-reader semantics all come free from the element.
   ══════════════════════════════════════════════════════════════════ */

/* ── 01 · The ten-minute rail ──
   Six steps on one line, joined by a hairline that runs behind them. The
   two "no extra time" steps are picked out in the accent because they are
   the surprising part of the claim — the tagging itself costs nothing. */
.ld-tl{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;position:relative;margin-top:clamp(26px,3.5vw,40px);counter-reset:tl}
.ld-tl::before{content:'';position:absolute;left:0;right:0;top:19px;height:1px;background:var(--b)}
.ld-tl li{position:relative;padding:0 10px 0 0;display:flex;flex-direction:column;gap:12px}
.ld-tl li::before{content:'';width:11px;height:11px;border-radius:50%;background:var(--s1);
  border:2px solid var(--bm);position:absolute;top:14px;left:0}
.ld-tl li.hi::before{background:var(--ac);border-color:var(--ac)}
.ld-tl .t{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;color:var(--t3);letter-spacing:.02em}
.ld-tl li.hi .t{color:var(--ac)}
.ld-tl .l{font-size:var(--fs-h3);font-weight:600;color:var(--t);line-height:1.35;max-width:15ch;padding-top:14px}
@media(max-width:860px){
  .ld-tl{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 0}
  .ld-tl::before{display:none}
  .ld-tl li{padding-left:20px}
  .ld-tl li::before{top:4px;left:0}
  .ld-tl .l{padding-top:0}
  .ld-tl .t,.ld-tl .l{margin-left:0}
  .ld-tl li{gap:5px}
}
@media(max-width:520px){ .ld-tl{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── Shared disclosure ──
   One "show me more" affordance used by the timeline block. A summary
   marker is removed and replaced with a chevron that rotates, because the
   default triangle is unstyleable across browsers. */

/* ── 02 · Feature bento ──
   Six columns: the two cards that decide whether someone tries this at
   all take three each; the other six take two. Not eight identical tiles,
   because they are not eight equally important things. */
/* The chevron sits top-right, level with the icon, and rotates on open. */
/* The paragraph the summary hides. Animated open would need JS to measure,
   so it simply appears — instant is honest and never janks. */
@media(max-width:900px){
}
@media(max-width:620px){
}

/* ── 03 · Roles ──
   Three cards, all open. The accordion this replaces showed one role and
   collapsed the other two to a spine, which meant the page never actually
   said "there is a place here for a parent, a coach and a player". */
.ld-role{position:relative;border:1px solid var(--bm);border-radius:14px;background:var(--s1);
  padding:24px 22px;display:flex;flex-direction:column}
.ld-sec.alt .ld-role{background:var(--bg)}
.ld-role .n{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;color:var(--ac);
  letter-spacing:.08em;margin-bottom:14px}
/* "Sees · Review · Stats · Presentations" — a phrase, not a label. Sentence
   case with no tracking, so it is prose and belongs in Outfit; the mono
   micro-label convention is uppercase + wide letter-spacing (see .w5-q). */
.ld-role .tb{margin-top:auto;align-self:flex-start;font-size:var(--fs-label);
  color:var(--t3);background:var(--s2);border:1px solid var(--b);border-radius:99px;padding:5px 11px}
/* ══════════════════════════════════════════════════════════════
   THE FIVE QUESTIONS  (#overview) — a deck, not a rail

   One card at the front, two angled away on each side. The shape is
   the point: before a word is read, the reader can see there are five
   of these and that they are on the first. A row of five equal cards
   could never say that — it just looked like a nav bar.

   The card is still the app's tag button — keycap, coloured edge
   stripe, press to commit. Colour comes from the app's tag palette
   via --wc, set per card inline; everything else uses existing tokens.

   Geometry lives in .w5-card's transform, written by the deck driver
   in index.html. CSS owns how a card LOOKS at a given depth (--d, the
   absolute distance from the front); JS owns where it sits.
   ══════════════════════════════════════════════════════════════ */
/* The deck is wider than the reading column on purpose — the side cards
   run off toward the edges of the screen. Clip horizontally so that
   never becomes a horizontal scrollbar on the page. */
#overview{overflow-x:hidden}
.w5{--w5-cw:min(560px,72vw);--w5-ch:clamp(345px,36.5vw,398px)}
.w5-stage{
  position:relative;height:var(--w5-ch);margin-top:8px;
  perspective:1700px;perspective-origin:50% 45%;
  /* Vertical page scroll must survive a finger landing on the deck;
     horizontal drags are ours. */
  touch-action:pan-y
}
.w5-ring{position:absolute;inset:0;transform-style:preserve-3d}

.w5-card{
  position:absolute;top:0;left:50%;width:var(--w5-cw);height:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:20px 22px 18px 26px;border-radius:var(--r);text-align:left;
  background:var(--bg);border:1px solid var(--b);overflow:hidden;
  font-family:var(--sans);cursor:pointer;
  transform-origin:50% 50%;backface-visibility:hidden;
  box-shadow:0 18px 50px -28px rgba(0,0,0,.45);
  transition:transform .52s cubic-bezier(.22,.61,.36,1),
             opacity .38s ease, box-shadow .38s ease, border-color var(--dur-slow)
}
@media(prefers-reduced-motion:reduce){.w5-card{transition:opacity var(--dur-slow) ease}}
/* the tag button's edge stripe */
.w5-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--wc);opacity:.5;transition:opacity .3s,width .3s
}
/* Depth 0 — the one being read. Everything else is scenery, and is
   dimmed by a wash rather than by `opacity` so its text does not go
   muddy against the section behind it. */
.w5-card[data-d="0"]{
  border-color:color-mix(in srgb,var(--wc) 46%,var(--b));
  background:color-mix(in srgb,var(--wc) 5%,var(--bg));
  box-shadow:0 34px 80px -34px color-mix(in srgb,var(--wc) 55%,rgba(0,0,0,.5))
}
.w5-card[data-d="0"]::before{opacity:1;width:5px}
.w5-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:var(--bg);opacity:0;transition:opacity .38s ease
}
.w5-card[data-d="1"]::after{opacity:.26}
.w5-card[data-d="2"]::after{opacity:.44}
/* The cards behind must still read as cards. Without a visible edge the
   wash turns them into pale smudges and the deck stops looking like five
   of anything, which is the whole reason it is a deck. */
.w5-card[data-d="1"],.w5-card[data-d="2"]{
  border-color:color-mix(in srgb,var(--wc) 26%,var(--bm));
  background:color-mix(in srgb,var(--wc) 4%,var(--bg))
}
.w5-card[data-d="0"]:hover{border-color:color-mix(in srgb,var(--wc) 55%,var(--b))}
.w5-card:focus-visible{outline:2px solid var(--wc);outline-offset:3px}

/* ── The face, in three steps ──
   The card carries no picture, so the type is the whole design and it
   has to rank itself. Loudest and in the card’s own colour: what this
   card is. Then the claim, in ink, at about half that. Then the body,
   quieter again. Nothing on the face competes for first read.

   The keycap sits on its own line above the name rather than beside it:
   next to 44px display type an inline 10px chip reads as debris. */
.w5-top{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.w5-k{
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;line-height:1;
  padding:5px 9px;border-radius:5px;color:var(--wc);
  background:color-mix(in srgb,var(--wc) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--wc) 55%,transparent)
}
/* No ch measure on any of the three. A max-width narrower than the card
   is what put a lone word on its own line with half the card still
   empty beside it; the card is the measure. text-wrap then decides
   WHERE a genuine wrap falls: balance for the two headings, so two
   lines come out even rather than long-then-orphan, pretty for the
   paragraph, which keeps a single word off the last line. Both degrade
   to normal wrapping where unsupported, and the card width already
   fixes the reported fault on its own. */
.w5-q{font-size:clamp(30px,3.7vw,44px);font-weight:700;line-height:1.04;
  letter-spacing:-1.6px;color:var(--wc);text-wrap:balance}
/* A short rule in the same colour, so the name reads as a title with
   something under it rather than as a sentence that ran out. */
.w5-hook{margin-top:23px;position:relative;padding-top:19px;
  font-size:clamp(16px,1.75vw,20.5px);font-weight:700;line-height:1.32;
  letter-spacing:-.35px;color:var(--t);text-wrap:balance}
.w5-hook::before{content:'';position:absolute;left:0;top:0;width:34px;height:3px;
  border-radius:2px;background:var(--wc)}
.w5-sum{margin-top:4px;font-size:clamp(13px,1.35vw,15px);line-height:1.65;
  color:var(--t2);text-wrap:pretty}
.w5-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;color:var(--wc);opacity:0;
  transition:opacity .3s ease,gap var(--dur) ease
}
.w5-more svg{width:13px;height:13px}
.w5-card[data-d="0"] .w5-more{opacity:1}
.w5-card[data-d="0"]:hover .w5-more{gap:9px}

/* ── Arrows, dots, hint ── */
.w5-nav{
  position:absolute;top:50%;z-index:4;translate:0 -50%;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--b);color:var(--t2);cursor:pointer;
  box-shadow:0 6px 22px -12px rgba(0,0,0,.5);transition:all .16s
}
.w5-nav svg{width:19px;height:19px}
.w5-nav:hover{color:var(--t);border-color:var(--bs);transform:scale(1.06)}
.w5-nav:disabled{opacity:.28;cursor:default;transform:none}
/* At the outer edges of the stage, not tucked against the front card —
   there they landed in the middle of a side card and read as part of it. */
.w5-nav.prev{left:clamp(10px,3vw,52px)}
.w5-nav.next{right:clamp(10px,3vw,52px)}
.w5-dots{display:flex;justify-content:center;gap:7px;margin-top:22px}
.w5-dots button{width:7px;height:7px;padding:0;border:none;border-radius:99px;
  background:var(--bm);cursor:pointer;transition:width .24s,background .24s}
.w5-dots button.on{width:24px;background:var(--wc,var(--ac))}
.w5-dots button:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.w5-hint{margin-top:12px;text-align:center;font-size:var(--fs-label);color:var(--t3)}
.w5-hint kbd{font-family:var(--mono);font-size:var(--fs-xs);border:1px solid var(--b);
  background:var(--s1);border-radius:4px;padding:2px 5px;color:var(--t3)}

/* ── The long answer, in a dialog ── */
.w5-answers[hidden]{display:none}
.w5-dlg{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.w5-dlg[hidden]{display:none}
.w5-dlg-scrim{position:absolute;inset:0;background:rgba(6,8,14,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:w5Fade .2s ease both}
.w5-dlg-box{
  position:relative;width:min(880px,100%);max-height:min(86vh,880px);
  display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--b);
  border-top:3px solid var(--wc);border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 110px -40px rgba(0,0,0,.7);
  animation:w5Pop .28s cubic-bezier(.22,.61,.36,1) both
}
/* The box is focused on open so screen readers land inside it, but it is
   not a control — a ring round the whole dialog just looks like a fault. */
.w5-dlg-box:focus,.w5-dlg-box:focus-visible{outline:none}
@keyframes w5Fade{from{opacity:0}to{opacity:1}}
@keyframes w5Pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.w5-dlg-scrim,.w5-dlg-box{animation:none}}
.w5-dlg-head{display:flex;align-items:center;gap:11px;padding:16px 18px 14px;border-bottom:1px solid var(--b)}
.w5-dlg-k{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;line-height:1;padding:4px 7px;
  border-radius:4px;color:var(--wc);background:color-mix(in srgb,var(--wc) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--wc) 40%,transparent)}
.w5-dlg-t{font-size:clamp(20px,2.4vw,27px);font-weight:700;letter-spacing:-.7px;color:var(--wc);line-height:1}
.w5-dlg-x{margin-left:auto;width:34px;height:34px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--s1);border:1px solid var(--b);
  color:var(--t3);cursor:pointer;transition:all var(--dur)}
.w5-dlg-x svg{width:16px;height:16px}
.w5-dlg-x:hover{color:var(--t);border-color:var(--bs)}
.w5-dlg-body{overflow-y:auto;-webkit-overflow-scrolling:touch}
.w5-dlg-foot{display:flex;gap:10px;padding:12px 18px;border-top:1px solid var(--b);background:var(--s1)}
.w5-dlg-nav{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-radius:var(--rsm);border:1px solid var(--b);background:var(--bg);color:var(--t2);
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all var(--dur)}
.w5-dlg-nav.next{justify-content:flex-end;text-align:right}
.w5-dlg-nav svg{width:15px;height:15px;flex-shrink:0}
.w5-dlg-nav span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w5-dlg-nav:hover{color:var(--t);border-color:var(--bs)}
/* Freezing the page behind the dialog. `position:fixed` is the only thing
   iOS Safari honours; the driver stores the scroll offset in `top` and
   puts it back on close, so nothing jumps. */
body.w5-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ── The answer's own layout (in the dialog) ── */
/* One column, always. The answer is the card face opened out: the same
   headline, the same picture with room to breathe, the same closing
   line under it. A two-column split used to squeeze every picture into
   half the dialog — the six-step time rail came out as six slivers. */
.w5-panel{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);
  padding:clamp(22px,2.6vw,32px)}
.w5-panel[hidden]{display:none}
.w5-h{font-size:clamp(23px,2.6vw,33px);line-height:1.15;letter-spacing:-.8px;
  font-weight:700;color:var(--t);text-wrap:balance}
/* The picture takes the middle. It is the only thing here that grows. */
.w5-art{width:100%}
/* The closing line, set apart from the picture by a rule rather than by
   more space — the dialog is short and the gap alone read as a mistake. */
.w5-foot{padding-top:clamp(16px,2vw,20px);border-top:1px solid var(--b);
  font-size:15px;line-height:1.65;color:var(--t2);max-width:76ch;text-wrap:pretty}

/* ── WHY · what the usual setup asks for, against what this does ── */
.w5-cmp{display:flex;flex-direction:column;gap:10px}
.w5-cmp-arw{display:flex;justify-content:center;color:var(--wc);opacity:.5}
.w5-cmp-arw svg{width:20px;height:20px}
.w5-cmp-row{padding:14px 15px;border-radius:var(--rsm);border:1px solid var(--b);background:var(--s1)}
.w5-cmp-lb{display:block;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.w5-cmp-chips{display:flex;flex-wrap:wrap;gap:7px}
.w5-cmp-chips i{
  font-style:normal;font-size:var(--fs-sm);padding:5px 11px;border-radius:99px;
  border:1px solid var(--bm);color:var(--t3);background:var(--bg)
}
.w5-cmp-row.was .w5-cmp-chips i{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--rd) 70%,transparent);opacity:.72}
.w5-cmp-row.now{border-color:color-mix(in srgb,var(--wc) 40%,var(--b));background:color-mix(in srgb,var(--wc) 8%,var(--s1))}
.w5-cmp-chips i.hi{
  font-weight:700;font-size:var(--fs-ld-body);padding:8px 18px;color:var(--wc);
  border-color:color-mix(in srgb,var(--wc) 50%,transparent);
  background:color-mix(in srgb,var(--wc) 14%,transparent)
}

/* ── WHAT · the six tools ── */
/* Icon over name, exactly what the face showed — the descriptions that
   used to sit under each one belonged to the old long answer. */
.w5-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.w5-f{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:22px 12px;border-radius:var(--rsm);border:1px solid var(--b);
  background:var(--s1)}
.w5-f .ic{display:flex;width:38px;height:38px;border-radius:var(--r);align-items:center;
  justify-content:center;color:var(--wc);
  background:color-mix(in srgb,var(--wc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--wc) 32%,transparent)}
.w5-f .ic svg{width:19px;height:19px}
.w5-f b{font-size:var(--fs-ld-body);font-weight:700;color:var(--t);letter-spacing:-.1px}

/* ── WHEN · the existing time rail, retinted to the panel ── */
.w5-tl{margin:0}
/* The face carried this legend under its bar; without it the two tinted
   steps are just two steps in a different colour. */
.w5-key{margin-top:16px;position:relative;padding-left:17px;
  font-size:var(--fs-sm);line-height:1.5;color:var(--t3)}
.w5-key::before{content:'';position:absolute;left:0;top:5px;width:9px;height:9px;
  border-radius:3px;background:color-mix(in srgb,var(--wc) 30%,var(--s1));
  border:1px solid color-mix(in srgb,var(--wc) 42%,var(--b))}
.w5-tl li.hi::before{background:var(--wc);border-color:var(--wc)}
.w5-tl li.hi .t{color:var(--wc)}

/* ── WHERE · what it does not need, then what it plays ── */
.w5-neg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.w5-neg span{font-size:var(--fs-sm);font-weight:700;padding:7px 13px;border-radius:99px;
  color:var(--t3);border:1px dashed var(--bm);background:transparent}
.w5-sports{display:flex;flex-wrap:wrap;gap:8px}
.w5-sports span{
  font-size:var(--fs-body);font-weight:600;padding:8px 14px;border-radius:99px;
  border:1px solid var(--bm);color:var(--t2);background:var(--s1)
}
.w5-sports span.more{
  color:var(--wc);border-color:color-mix(in srgb,var(--wc) 50%,transparent);
  background:color-mix(in srgb,var(--wc) 12%,transparent);border-style:dashed
}

/* ── WHO · the three roles ── */
/* Icon, who they are, what they see. The paragraph each of these used to
   carry said the same thing as the closing line underneath. */
.w5-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.w5-role{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:18px 16px;border-radius:var(--rsm);border:1px solid var(--b);background:var(--s1)}
.w5-role .ic{display:flex;width:34px;height:34px;border-radius:9px;align-items:center;
  justify-content:center;color:var(--wc);
  background:color-mix(in srgb,var(--wc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--wc) 32%,transparent)}
.w5-role .ic svg{width:17px;height:17px}
.w5-role h4{font-size:var(--fs-ld-body);font-weight:700;color:var(--t);letter-spacing:-.2px;line-height:1.3}
/* The tab names, as the nav spells them. Prose, so Outfit. */
.w5-role .tb{margin-top:auto;font-size:var(--fs-label);line-height:1.45;
  letter-spacing:.04em;color:var(--t3);background:var(--bg);border:1px solid var(--b);
  padding:5px 10px;border-radius:12px}

/* ── Tablet ── */
@media(max-width:960px){
  .w5{--w5-cw:min(520px,80vw)}
  .w5-roles{grid-template-columns:1fr}
  /* The arrows would sit on top of the side cards here; the deck is
     swipeable and has dots, so they simply go. */
  .w5-nav{display:none}
}

/* ── Phone ──
   The deck survives: it is the one layout that says "five" without a
   word. The side cards are pushed further out and flattened, so the
   front card keeps almost the full width and stays readable. */
@media(max-width:760px){
  /* Narrower than it could be, on purpose: the neighbours have to peek
     by a clear finger's width or the deck reads as a single card. */
  .w5{--w5-cw:min(370px,77vw);--w5-ch:clamp(370px,102vw,445px)}
  .w5-stage{perspective:1100px}
  .w5-card{padding:17px 17px 15px 21px;gap:8px}
  .w5-top{gap:11px}
  .w5-q{font-size:clamp(25px,7.4vw,33px);letter-spacing:-1.1px}
  .w5-hook{font-size:clamp(15.5px,4.4vw,18.5px);letter-spacing:-.25px;
    margin-top:19px;padding-top:16px}
  .w5-sum{font-size:clamp(12.8px,3.5vw,14.5px)}
  .w5-dlg{padding:0;align-items:flex-end}
  .w5-dlg-box{max-height:92vh;width:100%;border-radius:var(--r) var(--r) 0 0;border-bottom:none}
  .w5-panel{padding:18px 16px}
  .w5-feat{grid-template-columns:1fr 1fr}
  .w5-f{padding:16px 10px}
  .w5-foot{font-size:var(--fs-ld-body)}
  .ld-tl.w5-tl{grid-template-columns:1fr 1fr;gap:20px 12px}
  .ld-tl.w5-tl::before{display:none}
}
@media(max-width:420px){
  .w5{--w5-cw:86vw}
}
/* ══════════════════════════════════════════════════════════════════
   PRODUCT TOUR · sport scenes, Clip Library and the season grid
   (see the tour section in index.html)

   The five panels each carry a different sport, and every picture is
   drawn here rather than photographed: match footage and highlight
   frames belong to whoever filmed them, so the page draws its own.
   Drawn also means no network request, no broken image offline, and
   things that can move.

   MOTION RULE. Every animation below is written as
   `.mk-panel.on <thing>` — it runs only inside the panel currently on
   screen, and restarts each time that tab is opened, so the visitor
   sees the movement from its beginning rather than halfway through.
   Nothing animates on the four panels they are not looking at.
   ══════════════════════════════════════════════════════════════════ */

/* The scene sits behind every overlay in its frame (HUD, labels, buttons),
   all of which are z-index 2+. `slice` keeps the drawing filling its box at
   any aspect ratio, the way footage would. */
.mk-sc{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
/* Tracking marks. The trail is a dotted breadcrumb of the last second or so
   of a player's run; the chip names the player the clip is about. These
   also style the copies inside the thumbnails' <use>, which is why they are
   bare class selectors rather than scoped to a frame. */
.mk-tr{fill:none;stroke-opacity:.38;stroke-linecap:round;stroke-linejoin:round}
.mk-lb text{font-family:var(--mono);font-weight:500;letter-spacing:.02em}
.mk-ball{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.mk-clip-th{position:relative;overflow:hidden}
.mk-clip-th svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Players drift along their own line of run and back (--dx/--dy/--d/--dl are
   set per player in the markup, from their direction and speed), and the
   passing lane's dashes run toward the receiver. The hero is always on
   screen at load, so it animates unconditionally; the tour obeys the motion
   rule above. */
@keyframes mk-mv{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--dx),var(--dy))}}
@keyframes mk-lane{to{stroke-dashoffset:-7}}
.ld-hero-stage .mk-mv,.mk-panel.on .mk-mv{animation:mk-mv var(--d) ease-in-out var(--dl) infinite}
.ld-hero-stage .mk-lane,.mk-panel.on .mk-lane{animation:mk-lane 1.1s linear infinite}

/* Each ball starts at 0,0 and is placed entirely by transform, so one
   keyframe set carries both the path and the timing — and because every
   frame of a sport is a crop of the same field, one set serves them all.
   Football: #9 carries, slips #11 in, #11 shoots. Cricket: bowled, pitches,
   played through midwicket. Volleyball: set, spiked, down — the ball and its
   shadow are separate so the height of the set reads. */
@keyframes mk-ball-fb{0%{transform:translate(489.6px,124px);opacity:0}8%{transform:translate(491.5px,122.9px);opacity:1}40%{transform:translate(501.9px,120.5px);opacity:1}58%{transform:translate(534.2px,91.7px);opacity:1}72%{transform:translate(545.9px,93.3px);opacity:1}92%{transform:translate(653.9px,102.2px);opacity:1}100%{transform:translate(657.4px,102.2px);opacity:0}}
@keyframes mk-ball-ck{0%{transform:translate(489.4px,310px);opacity:0}6%{transform:translate(492px,292.2px);opacity:1}30%{transform:translate(500.6px,188.3px);opacity:1}42%{transform:translate(502.2px,155.1px);opacity:1}50%{transform:translate(484.5px,150.5px);opacity:1}92%{transform:translate(300px,74px);opacity:1}100%{transform:translate(294.6px,69.3px);opacity:0}}
@keyframes mk-ball-vb{0%{transform:translate(220.7px,86.1px);opacity:0}8%{transform:translate(218.9px,77.7px);opacity:1}34%{transform:translate(164.3px,69px);opacity:1}44%{transform:translate(164.7px,70.8px);opacity:1}78%{transform:translate(210.5px,77.4px);opacity:1}90%{transform:translate(213.6px,76.2px);opacity:1}100%{transform:translate(214.7px,75.4px);opacity:0}}@keyframes mk-ball-vbs{0%{transform:translate(220.7px,131.1px);opacity:0}8%{transform:translate(218.9px,130.1px);opacity:0.4}34%{transform:translate(164.3px,121.5px);opacity:0.4}44%{transform:translate(164.7px,119.9px);opacity:0.4}78%{transform:translate(210.5px,79.5px);opacity:1}90%{transform:translate(213.6px,76.2px);opacity:1}100%{transform:translate(214.7px,75.4px);opacity:0}}
.ld-hero-stage .mk-ball.fb,.mk-panel.on .mk-ball.fb{animation:mk-ball-fb 6.5s ease-in-out infinite}
.mk-panel.on .mk-ball.ck{animation:mk-ball-ck 5.4s linear infinite}
.mk-panel.on .mk-ball.vb{animation:mk-ball-vb 5.2s linear infinite}
.mk-panel.on .mk-ball.vbs{animation:mk-ball-vbs 5.2s linear infinite}
/* Camera drift: a hand-held phone never holds perfectly still, and the
   scene reads as footage rather than a diagram because of it. */
@keyframes mk-drift{0%,100%{transform:scale(1.04) translate(0,0)}50%{transform:scale(1.06) translate(-1.2%,.6%)}}
.mk-panel.on .mk-cam .mk-sc,.mk-panel.on .mk-rev-stage .mk-sc{animation:mk-drift 14s ease-in-out infinite}

/* Record & Tag · the tag button that was just pressed, and the row it put
   in the log. Both are driven from the tour script. */
@keyframes mk-cell-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* ══ Presentations · the telestration, marking itself up ══════════
   Drawn the way the app draws it (js/annodraw.js): chalk by default, a dark
   keyline under every stroke, flat ground rings, a Connection as a hatched
   hull — not the saturated gold the page used before the app moved on from
   it. The sequence is the order a coach works in: ring the two players,
   link the help defenders, draw the roll, caption it.

   NO CSS ANIMATION TOUCHES A MARK. The first two versions faded and stroked
   them on with keyframes (the page's older gold marks did too), and Chrome
   stopped painting an SVG element once an animation had run on it — the
   computed opacity said 1, the animation said finished, and the rings, the
   hull and the arrow's shaft were simply not on screen. Measured, not
   guessed: disabling only the keyframes brought them straight back. So the
   tour script steps them in by class (an-play, then an-s1 … an-s4 added one
   at a time), and a class change is an ordinary restyle that always paints.
   Without the script, or with reduced motion, an-play is never added and
   the frame simply shows finished. */
.an-play .mk-an{visibility:hidden}
.an-play.an-s1 .an-r1,.an-play.an-s1 .an-r2,.an-play.an-s2 .an-hull,
.an-play.an-s3 .an-arrow,.an-play.an-s4 .an-lbl{visibility:visible}

/* ══════════════════════════════════════════════════════════════════
   CLIP LIBRARY mockup — the current layout
   Three tag boxes, a Refine box for a 2nd level tag or an author, the
   counted stats, then one row per clip with the match it came from.
   Clicking a row opens the player over the table; that is the state
   drawn here, because it is the one that shows what a clip IS.
   ══════════════════════════════════════════════════════════════════ */
.mk-lib{background:var(--bg);padding:10px 14px 8px}
.mk-lib-search{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.mk-lib-search .q{flex:1;min-width:0;height:30px;display:flex;align-items:center;gap:1px;padding:0 11px;
  border-radius:var(--rsm);border:1px solid var(--acb);background:var(--s1);
  font-size:var(--fs-label);font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden}
.mk-lib-search .q.ph{border-color:var(--bm);color:var(--t3);font-weight:500}
.mk-lib-search .q .cur{width:1.5px;height:13px;background:var(--ac);flex-shrink:0}
.mk-panel.on .mk-lib-search .cur{animation:mk-caret 1s steps(1) infinite}
@keyframes mk-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.mk-lib-search .srt{flex-shrink:0;height:30px;display:flex;align-items:center;padding:0 12px;border-radius:var(--rsm);
  border:1px solid var(--bm);background:var(--s2);color:var(--t2);font-size:var(--fs-label);font-weight:600}
.mk-lib-refine{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mk-lib-refine .lb{font-size:9.5px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3)}
.mk-lib-refine .chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;
  border:1px solid var(--acb);background:var(--acd);color:var(--ac);font-size:var(--fs-label);font-weight:700}
.mk-lib-refine .chip i{font-style:normal;opacity:.65}
.mk-lib-refine .hint{font-size:var(--fs-xs);color:var(--t3)}
.mk-lib-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:7px}
.mk-lib-kpi{background:var(--s1);border:1px solid var(--b);border-radius:var(--rsm);padding:6px 6px 7px;text-align:center}
.mk-lib-kpi .n{font-family:var(--mono);font-size:17px;font-weight:500;color:var(--ac);line-height:1}
.mk-lib-kpi .l{font-size:9px;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3);margin-top:4px}
.mk-lib-tw{position:relative;border:1px solid var(--b);border-radius:var(--rsm);background:var(--s1);overflow:hidden}
.mk-lib-tb{width:100%;border-collapse:collapse;font-size:var(--fs-label)}
.mk-lib-tb th{padding:8px 10px;text-align:left;font-size:9px;font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--t3);background:var(--s2);border-bottom:1px solid var(--b)}
.mk-lib-tb td{padding:7px 10px;border-bottom:1px solid var(--b);color:var(--t2);white-space:nowrap}
.mk-lib-tb tr:last-child td{border-bottom:none}
.mk-lib-tb .c-sel{width:26px}
.mk-lib-tb .c-t{font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3);text-align:right;width:56px}
.mk-lib-tb .c-go{width:24px;color:var(--t3);text-align:right;font-size:9px}
.mk-lib-tb .c-m i{font-style:normal;font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3)}
.mk-lib-tb .cb{display:inline-block;width:13px;height:13px;border-radius:4px;border:1px solid var(--bs);background:var(--s1);vertical-align:-2px}
.mk-lib-tb .cb.on{background:var(--ac);border-color:var(--ac);position:relative}
.mk-lib-tb .cb.on::after{content:'';position:absolute;left:4px;top:1px;width:3px;height:7px;
  border:solid var(--on-ac);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.mk-lib-tb .tg{display:inline-block;padding:2px 9px;border-radius:99px;font-size:var(--fs-xs);font-weight:700;
  color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--tc) 40%,transparent)}
.mk-lib-tb .pl{margin-left:7px;font-size:var(--fs-xs);font-weight:700;color:var(--ac);background:var(--acd);
  border:1px solid var(--acb);border-radius:99px;padding:1px 7px}
.mk-lib-tb tr.playing td{background:var(--acd)}
/* The player over the table: the app's own modal, scrim and all. */
.mk-lib-player{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(288px,86%);
  z-index:3;border-radius:var(--r);overflow:hidden;border:1px solid var(--bm);background:var(--s1);box-shadow:var(--shadowxl)}
.mk-lib-tw::after{content:'';position:absolute;inset:0;background:rgba(28,24,44,.22);z-index:2}
.mk-lib-ph{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--b);background:var(--s2)}
.mk-lib-ph .t{flex:1;min-width:0;font-size:var(--fs-label);font-weight:700;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-lib-ph .x{color:var(--t3);font-size:var(--fs-ld-body);line-height:1}
.mk-lib-stage{position:relative;aspect-ratio:16/9;background:#0a1420;overflow:hidden}
.mk-lib-pbar{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--s1)}
.mk-lib-pbar .pv{width:20px;height:20px;border-radius:50%;background:var(--ac);color:var(--on-ac);
  font-size:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mk-lib-pbar .tl{flex:1;height:4px;border-radius:99px;background:var(--s3);overflow:hidden}
.mk-lib-pbar .tl i{display:block;height:100%;width:34%;background:var(--ac);border-radius:99px;transition:width .5s linear}
.mk-lib-pbar .tm{font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3);flex-shrink:0}
.mk-lib-selbar{display:flex;align-items:center;gap:9px;margin-top:8px;padding:8px 11px;border-radius:99px;
  border:1px solid var(--bm);background:var(--s1);box-shadow:var(--shadow)}
.mk-lib-selbar .tx{font-size:var(--fs-label);color:var(--t2)}
.mk-lib-selbar .tx b{font-family:var(--mono);color:var(--t)}
.mk-lib-selbar .b{margin-left:auto;height:26px;display:flex;align-items:center;padding:0 12px;border-radius:99px;
  border:1px solid var(--bm);background:var(--s2);color:var(--t2);font-size:var(--fs-label);font-weight:600}
.mk-lib-selbar .b.go{margin-left:0;background:var(--ac);border-color:var(--ac);color:var(--on-ac);font-weight:700}

/* ══════════════════════════════════════════════════════════════════
   DATA INSIGHTS mockup — the season grid
   Actions down, matches across, darker where it happened more. The
   shading is the app's rule (a fill whose opacity rises with the count)
   reduced to five steps, which is all a mockup needs.
   ══════════════════════════════════════════════════════════════════ */
.mk-dh{background:var(--bg);padding:12px 14px 14px}
.mk-dh-filters{display:flex;align-items:flex-end;gap:9px;margin-bottom:11px}
.mk-dh-filters .fl{display:flex;flex-direction:column;gap:5px}
.mk-dh-filters .fl i{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3)}
.mk-dh-filters .fl b{height:28px;display:flex;align-items:center;padding:0 11px;border-radius:var(--rsm);
  border:1px solid var(--bm);background:var(--s1);font-size:var(--fs-label);font-weight:600;color:var(--t2);white-space:nowrap}
.mk-dh-filters .ex{margin-left:auto;height:28px;display:flex;align-items:center;padding:0 12px;border-radius:var(--rsm);
  border:1px solid var(--bm);background:var(--s2);color:var(--t2);font-size:var(--fs-label);font-weight:600}
.mk-dh .mk-kpis{grid-template-columns:repeat(4,1fr);margin-bottom:12px}
.mk-dh-tabs{display:flex;gap:16px;border-bottom:1px solid var(--b);margin-bottom:12px}
.mk-dh-tabs span{padding-bottom:7px;font-size:var(--fs-sm);font-weight:600;color:var(--t3);border-bottom:2px solid transparent}
.mk-dh-tabs span.on{color:var(--ac);border-bottom-color:var(--ac)}
.mk-dh-gw{border:1px solid var(--b);border-radius:var(--rsm);background:var(--s1);padding:10px 12px;overflow-x:auto}
.mk-gr{width:100%;border-collapse:collapse;font-size:var(--fs-label)}
.mk-gr th,.mk-gr td{padding:5px 6px;text-align:center;white-space:nowrap}
.mk-gr thead th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--t3);border-bottom:1px solid var(--b);padding-bottom:7px}
.mk-gr thead th.a,.mk-gr thead th.n,.mk-gr thead th.tc{font-family:var(--sans);font-size:9px;font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase}
.mk-gr th.a{text-align:left;font-weight:600;color:var(--t);font-size:var(--fs-label)}
.mk-gr th.a .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px}
.mk-gr thead th .r{display:block;margin:2px auto 0;width:13px;height:13px;line-height:13px;border-radius:4px;
  font-family:var(--sans);font-size:8px;font-weight:700;font-style:normal;color:#fff}
.mk-gr thead th .r.W{background:#3f9e6b}.mk-gr thead th .r.D{background:#8a90a0}.mk-gr thead th .r.L{background:#d1655f}
.mk-gr tbody td{position:relative;font-family:var(--mono);font-size:var(--fs-label);color:var(--t2);border-top:1px solid var(--b)}
/* The heat: a tinted plate behind the figure, five steps of it. */
.mk-gr tbody td[data-v]::before{content:'';position:absolute;inset:2px 3px;border-radius:4px;background:var(--ac);opacity:0}
.mk-gr tbody td[data-v="1"]::before{opacity:.14}
.mk-gr tbody td[data-v="2"]::before{opacity:.28}
.mk-gr tbody td[data-v="3"]::before{opacity:.42}
.mk-gr tbody td[data-v="4"]::before{opacity:.56}
.mk-gr tbody td[data-v="0"] span{color:var(--t3)}
.mk-gr tbody td span{position:relative;z-index:1}
.mk-gr td.n,.mk-gr tfoot td{font-family:var(--mono);color:var(--t)}
.mk-gr .tc{text-align:right}
.mk-gr .tc span{font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3)}
.mk-gr .tc .up{color:#2f8f63}.mk-gr .tc .dn{color:#c2564f}
.mk-gr tfoot th.a,.mk-gr tfoot td{border-top:1px solid var(--bm);font-size:var(--fs-xs);color:var(--t2);padding-top:7px}
.mk-gr tfoot th.a{font-size:var(--fs-xs);color:var(--t3);font-weight:700;text-transform:none}
/* Each column of the grid arrives in turn, left to right, so the eye is
   walked across the season the way the grid is meant to be read. */
.mk-panel.on .mk-gr tbody td[data-v]::before{animation:mk-heat .5s ease-out both}
@keyframes mk-heat{from{opacity:0;transform:scale(.8)}}
.mk-gr tbody td:nth-child(2)::before{animation-delay:.15s}
.mk-gr tbody td:nth-child(3)::before{animation-delay:.28s}
.mk-gr tbody td:nth-child(4)::before{animation-delay:.41s}
.mk-gr tbody td:nth-child(5)::before{animation-delay:.54s}
.mk-gr tbody td:nth-child(6)::before{animation-delay:.67s}
.mk-gr tbody td:nth-child(7)::before{animation-delay:.8s}

/* ── Tour responsive ─────────────────────────────────────────────── */
@media(max-width:760px){
  .mk-lib-kpis{grid-template-columns:repeat(3,1fr)}
  .mk-lib-tb .c-m i{display:none}
  .mk-lib-refine .hint{display:none}
  /* Six match columns will not fit a phone; the grid keeps its own
     horizontal scroll (.mk-dh-gw) rather than squeezing to slivers. */
  .mk-gr{font-size:var(--fs-xs)}
}
@media(max-width:560px){
  .mk-lib-search .q.ph:nth-of-type(3){display:none}
  .mk-lib-player{width:92%}
  .mk-dh-filters .fl:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){
  .ld-hero-stage .mk-ball,.mk-panel.on .mk-ball,.mk-panel.on .mk-cam .mk-sc,.mk-panel.on .mk-rev-stage .mk-sc,
  .ld-hero-stage .mk-mv,.mk-panel.on .mk-mv,.ld-hero-stage .mk-lane,.mk-panel.on .mk-lane,
  .mk-panel.on .mk-lib-search .cur,.mk-panel.on .mk-gr tbody td[data-v]::before{animation:none}
  /* Each ball rests at the moment its scene is about: #9 on the ball, bat on
     ball, the spike at the top of the jump. */
  .mk-ball.fb{transform:translate(501.9px,120.5px)}.mk-ball.ck{transform:translate(502.2px,155.1px)}.mk-ball.vb{transform:translate(164.3px,69px)}.mk-ball.vbs{transform:translate(164.3px,121.5px)}
}

/* ════════════════════════════════════════════════════════════
   TOUCH TARGETS ON THE PUBLIC PAGE

   The app's 44px floor lives in mobile-enhance.css, which only app.html
   loads — so the landing page never had one. These are the three controls
   here that a thumb has to hit: the product-tour tabs, the card-deck
   pagination and the card dialog's close button.
   ════════════════════════════════════════════════════════════ */
@media(max-width:760px),(hover:none) and (pointer:coarse){
  .mk-tab{ min-height:44px }
  .w5-dlg-x{ width:44px; height:44px }
  /* A pagination dot is 7px because that is what a dot looks like — it cannot
     grow without becoming something else, so a transparent ::after carries the
     target. The WIDTH is the dot plus its gap and no more: a 44px-wide area on
     a 7px dot with a 7px gap would overlap three neighbours either side, the
     last sibling would win every hit test, and most of the dots would become
     unreachable — worse than the small target it set out to fix. Height is
     free, since a dot row has no vertical neighbour, so the row is 44px tall
     and the gap opens up to put real space between the centres. */
  .w5-dots{ gap:16px; margin-top:16px }
  .w5-dots button{ position:relative }
  .w5-dots button::after{ content:''; position:absolute; left:50%; top:50%;
    width:calc(100% + 16px); height:44px; transform:translate(-50%,-50%) }
}