/* ==========================================================================
   MathKidoo site — the shared look of the five site pages (MG-544)
   Spec: Docs/prd/BB-DOC-MATHKIDOO-SITE-THREE-AUDIENCES-V1.html (section 5,
   and "Raj's rulings" at the end, which override it).

   Pages on this sheet: for-parents.html, tables-package.html,
   arithmetic-package.html, for-schools.html, for-events.html.
   THE THEME (Raj chose "A. Premium playful", 12 Oct 2026, MG-544): butter
   ground, deep ink, chunky 3D mango buttons, ink cards with a thick lower edge,
   Fredoka for display and Nunito for body, and one mascot, Kido, who peeks over
   the demo card (and nowhere else). Palette: ink #172033, mango #FF7A1A,
   sunflower #FFC93C, blush #FFB3A7, butter #FFF3DC. One rule holds throughout:
   colour goes BEHIND the words, never into them; text is ink on mango, butter,
   white or sunflower, and light on ink. The old purple names (--mks-purple,
   --mks-navy ...) are kept as aliases so the page-local rules keep working.

   The app's calm kit (mk-design.css) never loads on these pages, and this
   sheet never loads in the app. Every class is prefixed mks- and every rule
   is scoped under body.mks, so nothing here can leak into either.

   --------------------------------------------------------------------------
   HOW TO USE IT ON A NEW SITE PAGE (copy these blocks as they are)
   --------------------------------------------------------------------------
   1. In <head>, in this order:
        <script src="mk-report.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>(function(){['fonts/mks-fonts.css','fonts/baloo2.css'].forEach(function(h){var l=document.createElement('link');l.rel='stylesheet';l.href=h;document.head.appendChild(l);});})();</script>
        <link rel="stylesheet" href="mk-site.css">
      (the fonts are added by script, as on the landing, so the font file
      never blocks the page's own scripts: MG-411)

   2. <body class="mks">, then the skip link and the top bar. Put
      aria-current="page" on the ONE tab this page belongs to (the two
      package pages belong to Parents). The landing adds is-landing to
      mks-top; every other page adds is-split (row 1 stays, row 2 scrolls
      away on a phone: see "the top bar" below). The row wrapper mks-top-row
      holds the brand and Sign in:

        <a class="mks-skip" href="#main">Skip to content</a>
        <header class="mks-top is-split">
          <div class="mks-top-in">
            <div class="mks-top-row">
              <a class="mks-brand" data-mk-cta="nav:home" href="/" aria-label="MathKidoo, home"><img src="icons/mark-192.png" alt="" width="40" height="40"><span>MathKidoo</span></a>
              <a class="mks-signin" data-mk-cta="signin" href="app.html">Sign in</a>
            </div>
            <nav class="mks-nav" aria-label="Who it is for">
              <a class="mks-tab" data-mk-cta="nav:parents" href="for-parents.html">Parents</a>
              <a class="mks-tab" data-mk-cta="nav:schools" href="for-schools.html">Schools</a>
              <a class="mks-tab" data-mk-cta="nav:events" href="for-events.html">Events</a>
            </nav>
          </div>
        </header>
        <main id="main" tabindex="-1"> ... </main>

      (The older markup, with the brand, nav and Sign in as three children of
      mks-top-in and no mks-top-row, still works: the whole bar stays on
      screen on a phone, as before. Rebuilt pages use the markup above.)
      On a phone (760px or less) the three tabs drop to a second row of three
      equal tabs. They are never hidden behind a menu.

   3. The footer, the same on every page:

        <footer class="mks-foot">
          <div class="mks-foot-in">
            <div class="mks-foot-brand"><img src="icons/mark-192.png" alt="" width="40" height="40"><span><b>MathKidoo</b>, a BrainBoot product</span></div>
            <nav class="mks-foot-links" aria-label="Site">
              <a href="for-parents.html" data-mk-cta="footer:parents">Parents</a>
              <a href="for-schools.html" data-mk-cta="footer:schools">Schools</a>
              <a href="for-events.html" data-mk-cta="footer:events">Events</a>
              <a href="tables-package.html" data-mk-cta="footer:tables">Tables</a>
              <a href="arithmetic-package.html" data-mk-cta="footer:arithmetic">Arithmetic</a>
              <a href="research.html" data-mk-cta="footer:research">Research</a>
              <a href="where.html" data-mk-cta="footer:where">Where is your child?</a>
              <a href="app.html" data-mk-cta="footer:signin">Sign in</a>
              <a href="privacy.html">Privacy</a>
              <a href="terms.html">Terms</a>
            </nav>
            <p class="mks-foot-contact">Questions? <a href="mailto:contact@brainboot.co.in">contact@brainboot.co.in</a></p>
          </div>
        </footer>

   4. Click counting (the landing's pattern, MG-544): every button that counts carries
      data-mk-cta="<what>:<which>" (e.g. "start:tables", "door:schools", "signin") and
      data-mk-pos="top | mid | end | sticky" (where on the page it sits), and the page
      ends with the one listener, the same on every page, just before </body>. It sends
      pos with the label inside the landing_cta props (mkTrack refuses props over 500
      characters; these stay far under). src/mk-sticky.js builds the same props as
      MKSite.ctaProps(el) if a page wants to call it instead of repeating the lines:

        <script>
        (function () {
          document.addEventListener('click', function (e) {
            var el = e.target.closest ? e.target.closest('[data-mk-cta]') : null;
            if (!el || !window.mkTrack) return;
            var props = { label: el.getAttribute('data-mk-cta'), text: (el.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 40) };
            var pos = el.getAttribute('data-mk-pos');
            if (pos) props.pos = pos;
            window.mkTrack('landing_cta', props);
          });
        })();
        </script>

   5. Building blocks: .mks-wrap (page width), .mks-sec (a section),
      .mks-band (a frosted band between plain sections), .mks-hero,
      .mks-card / .mks-grid, .mks-btn .mks-btn-main (the ONE main button,
      also marked data-main-action) and .mks-btn-quiet (everything else),
      .mks-night (the Field's navy card), .mks-proof (the honesty block),
      .mks-faq, .mks-trust. Rules for every page: one main button, no
      sound, no amount of money, Class 1 to 6 (never ages).

   6. New in step 0/1 of the selling-pages build (wireframe doc sections 1, 9, 10):
        .mks-pain         the problem line, one calm block above the headline
        .mks-doors        three equal door buttons (.mks-door > .mks-door-t + .mks-door-s)
        .mks-show         the grid demo card (markup: src/mk-show.js, MKShow.markup())
        .mks-sticky-cta   the phone-only Start bar (logic: src/mk-sticky.js)
        .mks-video        frame, poster, caption track (the video player script is a later step)
   ========================================================================== */

body.mks {
  /* the theme's tokens (Direction A, Premium playful) */
  --mks-ink: #172033; --mks-mango: #FF7A1A; --mks-mango-hi: #FF8A33; --mks-mango-edge: #B34D05;
  --mks-sun: #FFC93C; --mks-blush: #FFB3A7; --mks-butter: #FFF3DC; --mks-butter-deep: #FFE8B8;
  --mks-ink-edge: #0A101C;     /* the thick lower edge of an ink card */
  --mks-ink-soft: #4A5572; --mks-body: #33405E; --mks-rule: #F0DDB8;
  --mks-accent-text: #9A4004;  /* burnt mango: the one accent that is also readable as text on butter */
  --mks-green: #10C05D; --mks-amber: #FF7A1A;
  --mks-night: #172033; --mks-night-2: #101828; --mks-night-soft: #E8EDFA;
  --mks-ring-light: #172033;   /* focus ring on butter, white and mango: ink */
  --mks-ring-dark: #FFC93C;    /* focus ring on the ink cards */
  --mks-bar: rgba(255,243,220,.97);   /* the top bar's ground: butter */
  /* legacy names, aliased to the theme so every page-local rule keeps working */
  --mks-purple: var(--mks-mango); --mks-purple-deep: var(--mks-accent-text); --mks-press: var(--mks-mango-edge);
  --mks-navy: var(--mks-ink); --mks-ground: var(--mks-butter); --mks-tint: var(--mks-butter-deep);
  --mks-gold: var(--mks-sun); --mks-gold-ink: var(--mks-ink);
  --mks-font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --mks-font-body: 'Nunito', system-ui, sans-serif;
  --mks-font-child: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --mks-font-byline: 'Nunito', system-ui, sans-serif;
  --mks-r-md: 14px; --mks-r-lg: 20px; --mks-r-xl: 28px; --mks-pill: 999px;
  --mks-touch: 44px;
  --mks-lift: 0 4px 0 var(--mks-rule), 0 10px 22px rgba(23,32,51,.08);
  --mks-lift-hi: 0 2px 0 rgba(23,32,51,.10), 0 18px 44px rgba(23,32,51,.18);

  margin: 0;
  font-family: var(--mks-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--mks-ink);
  -webkit-font-smoothing: antialiased;
  background: var(--mks-butter);   /* flat butter: the shapes and the cards carry the colour */
}
@media (max-width: 720px) { body.mks { font-size: 16px; } }
.mks *, .mks *::before, .mks *::after { box-sizing: border-box; }
html:has(body.mks) { scroll-padding-top: 132px; }
@media (min-width: 761px) { html:has(body.mks) { scroll-padding-top: 88px; } }
.mks img { max-width: 100%; display: block; }
.mks p { margin: 0; }
.mks ul, .mks ol { margin: 0; padding: 0; list-style: none; }
.mks a { color: var(--mks-ink); font-weight: 800; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--mks-mango); }
.mks a:hover { color: var(--mks-accent-text); }
.mks :focus-visible { outline: 3px solid var(--mks-ring-light); outline-offset: 3px; }
.mks main:focus { outline: none; }
.mks .mks-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- skip link ---- */
.mks .mks-skip { position: absolute; left: 12px; top: -80px; z-index: 60; display: inline-flex; align-items: center; min-height: var(--mks-touch); padding: 0 18px; border-radius: var(--mks-pill); background: #fff; color: var(--mks-ink); font-family: var(--mks-font-display); font-weight: 700; text-decoration: none; box-shadow: var(--mks-lift-hi); }
.mks .mks-skip:focus { top: 10px; }

/* ---- the top bar: butter, the M mark + name in ink, three doors, Sign in ---- */
.mks .mks-top {
  position: sticky; top: 0; z-index: 40;
  background: var(--mks-bar);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 -2px 0 rgba(23,32,51,.10);   /* the 2px rule is inside the bar's height: 64px on a laptop */
}
.mks .mks-top-in {
  max-width: 1240px; margin: 0 auto; padding: 10px 24px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav signin";
  align-items: center; gap: 8px 16px;
}
/* row 1 (brand + Sign in) has a wrapper in the rebuilt markup; on a laptop it is invisible to the grid */
.mks .mks-top-row { display: contents; }
.mks .mks-brand { grid-area: brand; display: inline-flex; align-items: center; gap: 10px; min-height: var(--mks-touch); color: var(--mks-ink); text-decoration: none; font-family: var(--mks-font-display); font-weight: 700; font-size: 22px; letter-spacing: .005em; }
.mks .mks-brand:hover { color: var(--mks-ink); }
.mks .mks-brand img { width: 40px; height: 40px; flex: none; }
.mks .mks-nav { grid-area: nav; display: flex; justify-content: center; gap: 6px; }
.mks .mks-tab, .mks .mks-signin {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--mks-touch); padding: 0 16px;
  border-radius: var(--mks-pill); color: var(--mks-ink); text-decoration: none;
  font-family: var(--mks-font-display); font-size: 17px; font-weight: 600;
}
.mks .mks-tab:hover { background: var(--mks-butter-deep); color: var(--mks-ink); }
.mks .mks-tab[aria-current="page"] { background: var(--mks-sun); color: var(--mks-ink); }
/* Sign in is the quiet key: white, an ink outline, a 3px ink lower edge that sinks when pressed */
.mks .mks-signin { grid-area: signin; padding: 0 20px; background: #fff; border: 2.5px solid var(--mks-ink); box-shadow: 0 3px 0 var(--mks-ink); transition: transform .08s, box-shadow .08s; }
.mks .mks-signin:hover { background: #fff; color: var(--mks-ink); }
.mks .mks-signin:active { transform: translateY(3px); box-shadow: 0 0 0 var(--mks-ink); }
/* the bar is butter now, so its focus ring is the light-ground ink ring set on .mks :focus-visible (no override) */
@media (max-width: 760px) {
  .mks .mks-top-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand signin" "nav nav"; padding: 8px 12px 8px; }
  .mks .mks-brand { font-size: 20px; }
  .mks .mks-brand img { width: 34px; height: 34px; }
  .mks .mks-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mks .mks-tab { padding: 0 6px; background: var(--mks-butter-deep); border-radius: 12px; font-size: 16px; }

  /* is-split (every page but the landing): row 1 stays on screen, row 2 scrolls away.
     The bar and its inner box dissolve (display: contents) so the row-1 wrapper can stick to the
     page itself, not to a bar that scrolls off. Row 1 is 56px; row 2 is 52px (44px tabs). */
  .mks .mks-top.is-split, .mks .mks-top.is-split .mks-top-in { display: contents; }
  .mks .mks-top.is-split .mks-top-row {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 56px; padding: 0 12px 3px; background: var(--mks-bar);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 2px 0 rgba(23,32,51,.10);
  }
  .mks .mks-top.is-split .mks-nav { padding: 4px 12px; background: var(--mks-bar); box-shadow: inset 0 -2px 0 rgba(23,32,51,.10); }

  /* is-landing: the three doors are the page, so no tab row at all: one bar, 56px. The row is taken out of the
     layout and out of the keyboard order (visibility, not display), and only on a phone; a laptop keeps the tabs.
     (site-pages-check pins "the tabs are never display:none"; the landing step re-points that row to this one
     deliberate exception, wireframe doc section 1.) */
  .mks .mks-top.is-landing .mks-nav { position: absolute; visibility: hidden; pointer-events: none; }
  .mks .mks-top.is-landing .mks-top-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand signin"; padding: 6px 12px; }
}

/* ---- page width, sections, bands ---- */
.mks .mks-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .mks .mks-wrap { padding: 0 16px; } }
.mks .mks-sec { padding-block: clamp(44px, 6vw, 84px); scroll-margin-top: 90px; }
.mks .mks-sec > .mks-wrap { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); }
.mks .mks-band {
  background: var(--mks-butter-deep);
  border-top: 2px solid rgba(23,32,51,.08); border-bottom: 2px solid rgba(23,32,51,.08);
}
.mks .mks-head { display: flex; flex-direction: column; gap: 10px; max-width: 46em; }
.mks .mks-head.is-centre { margin-inline: auto; text-align: center; align-items: center; }

/* ---- type ---- */
.mks .mks-eyebrow { font-family: var(--mks-font-byline); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mks-accent-text); }
.mks .mks-h1 { margin: 0; font-family: var(--mks-font-display); font-weight: 700; font-size: clamp(36px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -.005em; color: var(--mks-ink); text-wrap: balance; overflow-wrap: break-word; }
/* the promise's second half: ink on a sunflower marker stroke (a highlighter, never coloured text) */
.mks .mks-see { background: linear-gradient(transparent 64%, var(--mks-sun) 64% 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-right: 4px; color: inherit; }
.mks .mks-h2 { margin: 0; font-family: var(--mks-font-display); font-weight: 700; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -.005em; color: var(--mks-ink); text-wrap: balance; overflow-wrap: break-word; }
.mks .mks-h3 { margin: 0; font-family: var(--mks-font-display); font-weight: 700; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; color: var(--mks-ink); }
.mks .mks-lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--mks-ink-soft); max-width: 32em; }
.mks .mks-lede b { color: var(--mks-ink); }
.mks .mks-p { color: var(--mks-body); }
.mks .mks-small { font-size: 15px; color: var(--mks-ink-soft); }
.mks .mks-built { font-size: 15px; color: var(--mks-ink-soft); font-style: italic; }

/* ---- buttons: one main, the rest quiet. Every one at least 44px. ---- */
.mks .mks-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px;
  border-radius: var(--mks-pill); border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--mks-font-display); font-weight: 600; font-size: 18px; line-height: 1.2;
  transition: transform .08s, box-shadow .08s;
}
/* the main key: chunky 3D mango with ink words; it sinks 4px when pressed */
.mks .mks-btn-main {
  color: var(--mks-ink); background-color: var(--mks-mango);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 5px 0 var(--mks-mango-edge), 0 12px 18px rgba(23,32,51,.16);
}
.mks .mks-btn-main:hover { color: var(--mks-ink); background-color: var(--mks-mango-hi); }
.mks .mks-btn-main:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 1px 0 var(--mks-mango-edge); }
/* the quiet key: white, ink outline, a thin ink lower edge */
.mks .mks-btn-quiet { color: var(--mks-ink); background: #fff; border: 2.5px solid var(--mks-ink); box-shadow: 0 3px 0 var(--mks-ink); }
.mks .mks-btn-quiet:hover { color: var(--mks-ink); background: var(--mks-butter-deep); }
.mks .mks-btn-quiet:active { transform: translateY(3px); box-shadow: 0 0 0 var(--mks-ink); }
.mks .mks-btn-small { min-height: var(--mks-touch); padding: 0 18px; font-size: 16px; }
.mks .mks-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 480px) { .mks .mks-ctas .mks-btn { width: 100%; } }

/* ---- hero ---- */
.mks .mks-hero { position: relative; padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 80px); }
/* two quiet shapes behind the hero copy: a sunflower disc (cut by the screen edge on a phone) and a mango star.
   The star is decoration: on a phone it shows only where the promise's short first line leaves room beside it
   (the landing and Parents, whose h1 carry lp-promise / fp-promise); on a laptop it sits right of the copy. */
.mks .mks-hero::before, .mks .mks-hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.mks .mks-hero::before { right: 0; top: 24px; width: 86px; height: 130px; border-radius: 65px 0 0 65px; background: var(--mks-sun); opacity: .5; }   /* drawn inside the box so nothing spills */
.mks .mks-hero::after { display: none; right: 40px; top: 98px; width: 30px; height: 30px; background: var(--mks-mango); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.mks .mks-hero:has(.lp-promise)::after, .mks .mks-hero:has(.fp-promise)::after { display: block; }
@media (min-width: 761px) {
  .mks .mks-hero::before { right: 2%; top: 28px; width: 170px; height: 170px; border-radius: 50%; }
  .mks .mks-hero::after { display: block; right: 9%; top: 172px; width: 36px; height: 36px; }
}
.mks .mks-hero-in { position: relative; z-index: 1; }
.mks .mks-hero-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.mks .mks-hero-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mks .mks-hero-copy .mks-ctas { margin-top: 8px; }
@media (max-width: 900px) { .mks .mks-hero-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .mks .mks-hero-in { padding: 0 16px; } }
.mks .mks-hero.is-plain .mks-hero-in { grid-template-columns: minmax(0, 1fr); }

/* ---- badges ---- */
.mks .mks-badge { align-self: flex-start; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: var(--mks-pill); font-family: var(--mks-font-byline); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--mks-ink); color: #fff; }
.mks .mks-badge.is-green { background: var(--mks-green); color: var(--mks-ink); }

/* ---- cards: white, an ink hairline, a thick butter lower edge; the lead card is ink with the thick dark edge ---- */
.mks .mks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.mks .mks-grid.is-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.mks .mks-card {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; gap: 10px; padding: 22px;
  border-radius: var(--mks-r-lg); background: #fff; border: 2px solid rgba(23,32,51,.12); box-shadow: var(--mks-lift);
}
.mks .mks-card .mks-num { font-family: var(--mks-font-display); font-weight: 700; font-size: 22px; color: var(--mks-accent-text); line-height: 1; }
.mks .mks-card.is-lead { background: var(--mks-ink); color: #fff; border-color: var(--mks-ink); box-shadow: 0 6px 0 var(--mks-ink-edge), 0 14px 24px rgba(23,32,51,.22); }
.mks .mks-card.is-lead .mks-h3 { color: #fff; }
.mks .mks-card.is-statement { font-family: var(--mks-font-display); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--mks-ink); }
.mks .mks-card.is-statement.is-lead { color: #fff; font-weight: 700; font-size: 22px; }

/* ---- the two package cards ---- */
.mks .mks-pack { padding: clamp(24px, 3vw, 32px); gap: 14px; border-radius: var(--mks-r-xl); }
.mks .mks-pack .mks-pack-title { margin: 0; font-family: var(--mks-font-display); font-weight: 700; font-size: clamp(28px, 3vw, 34px); line-height: 1.1; color: var(--mks-ink); }
.mks .mks-pack .mks-pack-for { font-family: var(--mks-font-display); font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--mks-ink); }
.mks .mks-pack ul { display: grid; gap: 6px; }
.mks .mks-pack li { position: relative; padding-left: 26px; color: var(--mks-body); }
.mks .mks-pack li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 14px; border-radius: 50%; background: var(--mks-sun); border: 2.5px solid var(--mks-ink); }
.mks .mks-pack .mks-ctas { margin-top: auto; padding-top: 6px; }
.mks .mks-pack.is-tables { background: var(--mks-ink); color: #fff; border-color: var(--mks-ink); box-shadow: 0 8px 0 var(--mks-ink-edge), 0 18px 30px rgba(23,32,51,.25); }
.mks .mks-pack.is-tables .mks-pack-title, .mks .mks-pack.is-tables .mks-pack-for { color: #fff; }
.mks .mks-pack.is-tables li { color: rgba(255,255,255,.94); }
.mks .mks-pack.is-tables li::before { border-color: var(--mks-ink); box-shadow: 0 0 0 2px var(--mks-sun); }
.mks .mks-pack.is-tables .mks-btn-quiet { background: #fff; color: var(--mks-ink); border-color: #fff; box-shadow: 0 4px 0 #9AA3B8; }
.mks .mks-pack.is-tables :focus-visible { outline-color: var(--mks-ring-dark); }
.mks .mks-pack.is-arith { border-color: rgba(23,32,51,.12); }

/* ---- the Field's navy card (demos, the Field show) ---- */
.mks .mks-night {
  position: relative; min-width: 0; color: var(--mks-night-soft);
  background: var(--mks-night);
  border-radius: var(--mks-r-xl); padding: clamp(14px, 2vw, 22px);
  box-shadow: 0 8px 0 var(--mks-ink-edge), 0 18px 30px rgba(23,32,51,.25);   /* ink with a thick lower edge */
}
.mks .mks-night :focus-visible { outline-color: var(--mks-ring-dark); }
.mks .mks-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--mks-touch); min-height: var(--mks-touch); padding: 0 14px;
  border: 0; border-radius: var(--mks-pill); cursor: pointer;
  font-family: var(--mks-font-display); font-weight: 600; font-size: 16px; transition: transform .08s, box-shadow .08s;
  background: #fff; color: var(--mks-ink); box-shadow: 0 4px 0 #9AA3B8;
}
.mks .mks-chip:hover { background: var(--mks-butter-deep); }
.mks .mks-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 #9AA3B8; }
.mks .mks-chip[aria-pressed="true"] { background: var(--mks-sun); color: var(--mks-ink); box-shadow: 0 4px 0 #B88A0C; }
.mks .mks-chip.is-line { background: var(--mks-mango); color: var(--mks-ink); box-shadow: 0 4px 0 var(--mks-mango-edge); }
.mks .mks-chip.is-line:hover { background: var(--mks-mango-hi); }
.mks .mks-chip.is-line:active { box-shadow: 0 1px 0 var(--mks-mango-edge); }
.mks .mks-label { font-family: var(--mks-font-byline); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mks-night-soft); }

/* ---- the honesty block (word for word, never edited) ---- */
.mks .mks-proof {
  max-width: 860px; margin: 0 auto; padding: clamp(26px, 4vw, 46px); border-radius: var(--mks-r-xl);
  background: #fff; border: 3px solid var(--mks-ink); box-shadow: 0 6px 0 var(--mks-ink); display: flex; flex-direction: column; gap: 16px;
}
.mks .mks-proof h2 { margin: 0; font-family: var(--mks-font-display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; color: var(--mks-ink); }
.mks .mks-proof p { font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.mks .mks-research { display: grid; gap: 10px; }
.mks .mks-research li { padding: 14px 16px; border-radius: var(--mks-r-md); background: var(--mks-butter); border: 2px solid var(--mks-rule); }
.mks .mks-research b { color: var(--mks-ink); font-family: var(--mks-font-display); font-weight: 700; }
.mks .mks-research span { display: block; font-size: 15px; color: var(--mks-ink-soft); }

/* ---- questions ---- */
.mks .mks-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.mks .mks-faq .mks-card { padding: 20px 22px; gap: 6px; }
.mks .mks-faq h3 { margin: 0; font-family: var(--mks-font-display); font-size: 18px; font-weight: 700; color: var(--mks-ink); }
.mks .mks-faq p { font-size: 16px; color: var(--mks-body); }

/* ---- trust strip ---- */
.mks .mks-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 22px 28px; border-radius: var(--mks-r-lg); background: var(--mks-ink); color: #fff; box-shadow: 0 6px 0 var(--mks-ink-edge); }
.mks .mks-trust b { font-family: var(--mks-font-display); font-size: 19px; font-weight: 600; }
.mks .mks-trust span { color: rgba(255,255,255,.9); }

/* ---- footer ---- */
.mks .mks-foot { margin-top: clamp(32px, 5vw, 64px); background: var(--mks-butter-deep); border-top: 3px solid var(--mks-ink); }
.mks .mks-foot-in { max-width: 1240px; margin: 0 auto; padding: 28px 24px 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.mks .mks-foot-brand { display: flex; align-items: center; gap: 10px; color: var(--mks-body); }
.mks .mks-foot-brand b { font-family: var(--mks-font-display); font-weight: 700; color: var(--mks-ink); }
.mks .mks-foot-brand img { width: 40px; height: 40px; flex: none; }
.mks .mks-foot-links { display: flex; flex-wrap: wrap; gap: 0 4px; }
.mks .mks-foot-links a { display: inline-flex; align-items: center; min-height: var(--mks-touch); padding: 0 10px; border-radius: 10px; font-size: 15px; font-weight: 800; text-decoration: none; color: var(--mks-ink); }
.mks .mks-foot-links a:hover { background: #fff; }
/* the only answer to a cost question: a contact line under the links, 14px */
.mks .mks-foot-contact { flex: 1 0 100%; margin: 0; font-size: 14px; color: var(--mks-ink-soft); }
.mks .mks-foot-contact a { display: inline-flex; align-items: center; min-height: var(--mks-touch); font-weight: 800; color: var(--mks-ink); }
@media (max-width: 720px) {
  .mks .mks-foot-in { padding: 24px 16px 36px; }
  .mks .mks-foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .mks .mks-foot-links a { padding: 0 8px; }
}

/* ==========================================================================
   Selling-pages build, steps 0 and 1 (MG-544). Wireframe doc sections 1, 9, 10.
   ========================================================================== */

/* ---- the problem line: one calm block above the headline (17px phone, 20px laptop, 960px wide at most) ---- */
.mks .mks-pain { max-width: 960px; margin: 0; font-family: var(--mks-font-body); font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--mks-body); text-wrap: pretty; }
@media (min-width: 761px) { .mks .mks-pain { font-size: 20px; } }

/* ---- the three doors: equal, filled, the page's one action on the landing ----
   Same width, height, type and colour for all three (chunky 3D mango, ink words); none is pre-selected.
   Phone: stacked, 72px or more. Laptop: three across, 96px. The arrow is a white disc that sits in the
   padding so a long sub-line never runs under it. Pressed, a door sinks 4px (no motion if reduced). */
.mks .mks-doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mks .mks-door {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 72px; padding: 12px 60px 12px 20px;
  border-radius: var(--mks-r-lg); text-decoration: none; text-align: left; color: var(--mks-ink); background-color: var(--mks-mango);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 5px 0 var(--mks-mango-edge), 0 12px 18px rgba(23,32,51,.16);
  transition: transform .08s, box-shadow .08s;
}
.mks .mks-door::after { content: "\2192"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(23,32,51,.4); font-family: var(--mks-font-display); font-weight: 700; font-size: 22px; line-height: 1; }
.mks .mks-door:hover { color: var(--mks-ink); background-color: var(--mks-mango-hi); }
.mks .mks-door:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 1px 0 var(--mks-mango-edge), 0 4px 8px rgba(23,32,51,.16); }
.mks .mks-door-t { font-family: var(--mks-font-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: .005em; }
.mks .mks-door-s { font-size: 15px; line-height: 1.35; font-weight: 800; color: var(--mks-ink); }
@media (min-width: 761px) {
  .mks .mks-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mks .mks-door { min-height: 96px; padding: 16px 64px 16px 24px; }
  .mks .mks-door::after { right: 18px; }
}

/* ---- the grid demo card (src/mk-show.js): 200 balls, 20 columns, on every screen ----
   The Field's ball look (landing #fh, src/field.js). On a phone the card has no side padding, so the
   grid is the full 328px column: balls 14.5px, numbers 7px. The big number above is the readable one.
   Number size = 0.485 x the ball width, so a 3-digit number fills 80 percent of its ball. */
.mks .mks-show {
  --mks-ball: #2D3A63; --mks-ball-hi: #3A4A7C; --mks-ball-ink: #E8EDFA; --mks-gap: 2px;
  position: relative; box-sizing: border-box; width: 100%; min-width: 0; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px;
  z-index: 1; padding: 16px 0 14px; color: var(--mks-night-soft);
  background: var(--mks-night);
  border-radius: var(--mks-r-xl); box-shadow: 0 8px 0 var(--mks-ink-edge), 0 18px 30px rgba(23,32,51,.25);   /* ink, with a thick lower edge */
}
.mks .mks-show :focus-visible { outline-color: var(--mks-ring-dark); }
.mks .mks-show-big, .mks .mks-show-cap, .mks .mks-show-ctl { padding-inline: 14px; }
.mks .mks-show-big { margin: 0; min-height: 60px; text-align: center; font-family: var(--mks-font-child); font-weight: 700; font-size: 56px; line-height: 60px; color: var(--mks-sun); font-variant-numeric: tabular-nums; }
.mks .mks-show-stage { position: relative; }
.mks .mks-show-grid {
  container-type: inline-size; width: 100%;
  display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); grid-template-rows: repeat(10, auto); grid-auto-flow: column;   /* the numbers run DOWN each column */
  gap: var(--mks-gap);
}
.mks .mks-show-grid > span {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  background: var(--mks-ball); color: var(--mks-ball-ink);
  font-family: var(--mks-font-body); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  font-size: 7px; font-size: calc((100cqw - 19 * var(--mks-gap)) / 20 * .485);
  transition: background .45s, color .45s, box-shadow .45s;
}
.mks .mks-show-grid > span.is-lit {
  background: var(--mks-sun); color: var(--mks-ink); font-weight: 800;
}
.mks .mks-show-grid > span.is-final { background: var(--mks-mango); box-shadow: 0 0 0 1.5px #fff; }
.mks .mks-show-grid > span.is-pop { z-index: 2; animation: mks-show-pop .46s cubic-bezier(.3,1.5,.5,1); }
@keyframes mks-show-pop { 0% { transform: scale(1); } 40% { transform: scale(1.8); } 100% { transform: scale(1); } }
.mks .mks-show-wash { position: absolute; inset: -6px 0; border-radius: var(--mks-r-lg); pointer-events: none; opacity: 0; background: radial-gradient(55% 70% at 27% 55%, rgba(255,201,60,.40), rgba(255,201,60,0) 72%); }
.mks .mks-show-wash.is-on { animation: mks-show-wash .6s ease-out; }
@keyframes mks-show-wash { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
.mks .mks-show-cap { margin: 0; min-height: 20px; text-align: center; font-family: var(--mks-font-display); font-size: 16px; line-height: 1.4; font-weight: 600; color: #fff; }
.mks .mks-show-ctl { display: flex; justify-content: center; gap: 12px; min-height: var(--mks-touch); }
@media (min-width: 601px) { .mks .mks-show { --mks-gap: 3px; } }
@media (min-width: 761px) {
  .mks .mks-show { padding: 16px; }
  .mks .mks-show-big, .mks .mks-show-cap, .mks .mks-show-ctl { padding-inline: 0; }
  .mks .mks-show-big { min-height: 72px; font-size: 64px; line-height: 72px; }
  .mks .mks-show-cap { font-size: 20px; }
}

/* ---- the sticky Start bar: phone only, 48px, once the first Start has scrolled away (src/mk-sticky.js) ----
   No motion, no pulse, no countdown, no dismiss. The page keeps 64px of room at the bottom so the bar
   never covers content or a focused control. Hidden above 760px and until the script switches it on. */
.mks .mks-sticky-cta { display: none; }
@media (max-width: 760px) {
  .mks .mks-sticky-cta.is-on {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--mks-mango); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -3px 0 var(--mks-ink), 0 -8px 16px rgba(23,32,51,.14);
  }
  .mks .mks-sticky-cta .mks-btn { display: flex; width: 100%; min-height: 48px; padding: 0 16px; border-radius: 0; font-size: 18px; background-image: none; background-color: transparent; box-shadow: none; transition: none; }
  .mks .mks-sticky-cta .mks-btn:hover { color: var(--mks-ink); background-color: var(--mks-mango-hi); }
  .mks .mks-sticky-cta .mks-btn:active { transform: none; box-shadow: none; }
  .mks .mks-sticky-cta :focus-visible { outline: 3px solid var(--mks-ink); outline-offset: -7px; }
  body.mks:has(.mks-sticky-cta) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- the video: poster, one quiet Play button, captions on (the player script is a later step) ----
   540x960 portrait. Silent, so the captions carry every line: 16px or larger, two lines at most. */
.mks .mks-video { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.mks .mks-video-frame { position: relative; width: min(100%, 236px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--mks-r-lg); background: var(--mks-night); box-shadow: 0 6px 0 var(--mks-ink-edge), 0 14px 24px rgba(23,32,51,.2); }
.mks .mks-video-frame video, .mks .mks-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mks .mks-video-play { position: absolute; left: 12px; right: 12px; bottom: 14px; }
.mks .mks-video [hidden] { display: none !important; }
.mks .mks-video-fail { position: absolute; inset: auto 12px 14px 12px; padding: 10px 12px; border-radius: var(--mks-r-md); background: var(--mks-night); color: #fff; text-align: center; font-size: 16px; font-weight: 700; }
.mks .mks-video-note { margin: 0; text-align: center; font-size: 14px; color: var(--mks-ink-soft); }
.mks .mks-video video::cue { font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; line-height: 1.3; color: #fff; background-color: rgba(23,32,51,.86); }
@media (min-width: 761px) { .mks .mks-video-frame { width: min(100%, 288px); } }

/* ---- Kido, the mascot (MG-544 theme). He lives at the demo and in empty states, nowhere else. ----
   A zero-height strip sits on the demo card's top edge; Kido hangs from it, peeking over the card (the card is above him,
   z-index 1). Decorative: aria-hidden in the markup, no text. He is still all the time except ONE blink when the demo
   has finished (data-state="finished" on .mks-show); never a loop. Reduced motion: the blanket rule below stops it. */
.mks .mks-kido { position: relative; z-index: 0; width: 100%; max-width: 760px; height: 0; margin-inline: auto; pointer-events: none; }
.mks .mks-kido svg { position: absolute; right: 20px; bottom: -16px; width: 78px; height: auto; overflow: visible; }
.mks .fp-demo .mks-kido { max-width: 668px; }
.mks .mks-sec > .mks-wrap > .mks-kido { margin-bottom: calc(-1 * clamp(20px, 2.6vw, 30px)); }   /* cancels the section's flex gap */
.mks .mks-kido-eyes { transform-box: fill-box; transform-origin: 50% 50%; }
body.mks:has(.mks-show[data-state="finished"]) .mks-kido-eyes { animation: mks-kido-blink .34s ease-in-out 1; }
@keyframes mks-kido-blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }

/* ---- motion: nothing moves for someone who asked it not to ---- */
@media (prefers-reduced-motion: reduce) {
  .mks *, .mks *::before, .mks *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}