/* ===========================================================================
   MARKETING — the public, indexable pages. Loaded on top of core.css and only
   here. The scan page /c/{publicId} must stay under the section 2.8 budget, so
   nothing in this file is ever loaded there.

   This is the one surface where a richer treatment is allowed: full-bleed
   bands, the hero scale, the accent voice, the miniature screens on the
   privacy band. It is still all tokens.

   WHAT THIS FILE MAY AND MAY NOT DO
   1. It composes. It never redefines a core token, so scripts/contrast.mjs
      still proves every pairing these pages render.
   2. Every colour, size, radius, shadow and duration below is a core.css
      token. The four exceptions are declared in the LOCAL TOKENS block, each
      derived from the core scale and each explained.
   3. No `style=` attribute and no `<style>` block exists in the markup: the
      CSP is `style-src 'self'`, so an inline style is silently DROPPED. Every
      one-off in these pages is a class here.
   4. Colour never carries meaning on its own (SC 1.4.1). --c-primary is
      identity, --c-accent is a decorative second voice, and the only state
      colours on these pages are the emergency band, the draft notice and the
      tick marks — each of which also carries an icon and words.
   5. Every transition, animation and keyframe sits inside the single
      `prefers-reduced-motion: no-preference` block at the end of this file, the
      same shape core.css uses, so reduced motion cannot be bypassed by a rule
      added here. Nothing loops, nothing moves on its own once it has arrived,
      and no entrance changes the space an element occupies.

   CONTRAST NOTES for the pairings this file introduces, computed with the
   WCAG formula in both themes (light / dark):
     --c-accent   on --c-bg 6.25 / 12.1   on --c-surface 5.79 / 9.35
     --c-accent   on --c-primary-soft 5.32 / 8.42   (the hero and accent bands)
     --c-ink-2    on --c-primary-soft 7.13 / 7.28
     --c-ink-2    on --c-surface-3    6.73 / 6.34
     --c-ink-2    on --c-warning-soft 7.43 / 6.57   (the draft notice)
     --c-accent   on --c-accent-soft  5.32 / 6.53   (the point tiles)
   Text is >= 4.5:1 everywhere above; --c-border-strong, the only hairline used
   as a boundary, is >= 3:1 in both themes by core's own gate.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   LOCAL TOKENS. Four values this surface needs that the core scale does not
   name. Each references the core scale; none is a new colour.
   --------------------------------------------------------------------------- */

.mk-body {
  /* The illustration set is drawn with a 2px stroke (views/illustrations.tsx).
     Rails, chevrons and card accent rules use the same weight so the drawn and
     the built parts of a page look like one hand. */
  --mk-rule: 2px;

  /* The step tile. Exactly --s-12; named because the rail is positioned at
     half of it and a raw calc on --s-12 would not say why. */
  --mk-node: var(--s-12);

  /* The narrowest a grid card may get before the grid drops a column. Sits
     between core's 11rem stat tile and its 40rem measure. */
  --mk-col: 17rem;

  /* The current band's background, re-declared by each tone below, so a chip
     that overlaps a card edge can ring itself in the colour behind it without
     any rule knowing which band it is in. */
  --mk-band-bg: var(--c-bg);

  /*
     THE FILL A CARD SITS IN, which is not always the page ground.

     In light theme --c-bg is lighter than --c-surface, so a card on a surface
     band lifts off it. In dark theme the scale inverts: --c-bg is DARKER than
     --c-surface, so every card on every surface band sank into the page and the
     whole site read inside-out — surfaces receding exactly where they should
     come forward.

     A token rather than a per-rule fix, because the same literal was written at
     eight card rules and any one of them would have been missed.
  */
  --mk-card-bg: var(--c-bg);

  /* The beat of the hero cascade and of the hero drawing's story, in core's
     own larger stagger step. It is a fifth local value rather than a raw
     number so the landing page's rhythm and core's card stagger cannot drift.
     Nothing here is a new duration: every animation below runs for one of
     core's --motion-* durations and only STARTS on one of these beats. */
  --mk-beat: var(--stagger-step-lg);
}

/* A sticky header must never leave an anchor target underneath itself: this is
   the room every `scrollIntoView`, `#anchor` jump and focus scroll leaves. */
@media (min-width: 768px) {
  :root { scroll-padding-top: var(--s-16); }
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.mk-header {
  flex-wrap: wrap;
  row-gap: var(--s-2);
  padding-block: var(--s-2);
}

/* The wordmark sits in a tinted tile, so a real logotype drops into
   BrandMark later and nothing around it moves. */
.mk-brand__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-1);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

/* Below md the nav scrolls sideways rather than hiding behind a menu button:
   a dialog would need JavaScript, and these pages ship none. */
.mk-nav {
  order: 3;
  flex: 1 0 100%;
  gap: var(--s-5);
  overflow-x: auto;
  /* With one axis `auto` and the other `visible`, the visible axis computes to
     `auto` as well — so this row also became a vertical scroller, clipping its
     own focus rings. `clip` keeps the sideways scroll and takes the phantom
     one away. */
  overflow-y: clip;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mk-nav a {
  white-space: nowrap;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--c-ink);
  border-bottom: var(--mk-rule) solid transparent;
}
.mk-nav a:hover {
  color: var(--c-primary-hover);
  border-bottom-color: var(--c-border-strong);
}
.mk-nav a[aria-current="page"] {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
  font-weight: 650;
}

/* Touch targets stay at 44px everywhere (2.4); only the padding tightens. */
.mk-header__cta .btn {
  padding-inline: var(--s-4);
  font-size: var(--t-small-size);
}

@media (min-width: 768px) {
  .mk-site-header {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  /*
    Brand, then nav, then everything else hard against the right edge — the
    arrangement every product header uses. `space-between` from
    `.site-header__inner` had been placing the nav by whatever was left over,
    so it drifted whenever the right-hand cluster changed width: signing in
    swaps "Sign in" for "Sign out" and the whole nav shifted with it.
  */
  .mk-header { flex-wrap: nowrap; justify-content: flex-start; }
  .mk-nav { order: 0; flex: 0 1 auto; overflow: visible; margin-inline-start: var(--s-6); }
  .mk-header__cta .btn { font-size: var(--t-body-size); }
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.mk-footer { margin-top: 0; }
.mk-footer__top {
  display: grid;
  gap: var(--s-8);
  padding-bottom: var(--s-6);
}
@media (min-width: 900px) {
  .mk-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s-12); }
}

.mk-footer__brand .brand { margin-bottom: var(--s-3); }
.mk-footer__promise { max-width: var(--measure); margin: 0; }

.mk-footer__groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
@media (min-width: 480px) { .mk-footer__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mk-footer__title {
  margin: 0 0 var(--s-2);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.mk-footer__list { list-style: none; margin: 0; padding: 0; }
.mk-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: var(--s-1);
}
.mk-footer__legal {
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  max-width: none;
}

/* ---------------------------------------------------------------------------
   Bands: the vertical rhythm of every marketing page
   --------------------------------------------------------------------------- */

.mk-band { padding-block: var(--s-10); }
.mk-band__inner {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  /* `viewport-fit=cover` puts these bands under the notch; see core.css. */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.mk-band--surface {
  --mk-band-bg: var(--c-surface);
  background: var(--c-surface);
}
/* On a surface band a card needs a fill that is LIGHTER than the band in light
   theme and lighter than it in dark theme too. --c-bg is the first in light and
   the opposite in dark, so dark gets the next surface step up instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-band--surface { --mk-card-bg: var(--c-surface-2); }
}
:root[data-theme="dark"] .mk-band--surface { --mk-card-bg: var(--c-surface-2); }
.mk-band--accent {
  --mk-band-bg: var(--c-primary-soft);
  background: var(--c-primary-soft);
  border-block: 1px solid var(--c-border);
}

/* The page's opening band. One wash of brand colour at the top of every page,
   fading out before the text starts, so the site has a horizon without any
   paragraph ever sitting on a gradient mid-tone. */
.mk-band--hero {
  --mk-band-bg: var(--c-bg);
  background-color: var(--c-bg);
  background-image: linear-gradient(180deg, var(--c-primary-soft) 0%, transparent 60%);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--s-10) var(--s-12);
}

@media (min-width: 768px) {
  .mk-band { padding-block: var(--s-16); }
  .mk-band--hero { padding-block: var(--s-12) var(--s-16); }
}

/* ---------------------------------------------------------------------------
   Type and section headings
   --------------------------------------------------------------------------- */

.mk-display {
  font-size: var(--t-hero-size);
  line-height: var(--t-hero-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-hero);
  text-wrap: balance;
  margin-bottom: var(--s-4);
  max-width: 16ch;
}
@media (min-width: 768px) { .mk-display { max-width: 20ch; } }

/* The eyebrow: the accent's one job on a page, and the only place it appears
   as text. Never the sole carrier of a fact — it labels, it does not inform. */
.mk-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}
.mk-eyebrow__rule {
  flex: none;
  width: var(--s-6);
  height: var(--mk-rule);
  border-radius: var(--r-pill);
  background: currentColor;
}

.mk-pagehead { max-width: var(--content-narrow); }
.mk-h1 { margin-bottom: var(--s-3); }

.mk-lead {
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  font-weight: 650;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
  max-width: var(--measure);
}
/* The lead is a link on the landing page only; the 44px box it needs there is
   absorbed by dropping the paragraph's own margin. */
.mk-lead:has(.mk-lead__link) { margin-bottom: var(--s-2); }
.mk-lead__link { color: var(--c-primary); }

.mk-bandhead { margin-bottom: var(--s-8); max-width: var(--measure); }
.mk-bandhead h2 { margin: 0; }
.mk-bandhead__lead { margin: var(--s-3) 0 0; color: var(--c-ink-2); }

.mk-band h2 { margin-top: 0; margin-bottom: var(--s-5); max-width: var(--measure); }
.mk-band h3 { margin-top: 0; }

.mk-support { color: var(--c-ink-2); margin-bottom: var(--s-6); max-width: var(--measure); }
.mk-micro { margin-bottom: 0; }

.mk-prose > * { max-width: var(--measure); }
.mk-prose h3 { margin-top: var(--s-6); }

/* TARGET SIZE (2.4, SC 2.5.8). A link that stands alone in its own line is a
   navigation control and gets the full 44px touch box; a link inside a
   sentence takes the inline exception and gets the 4px of vertical padding the
   design system asks for instead, because growing it would break the line. */
main p a,
main li a,
main dd a { padding-block: var(--s-1); }

.mk-more,
.mk-steps__link,
.mk-faq__a .small { line-height: 1; }
.mk-more a,
.mk-steps__link a,
.mk-faq__a .small a,
.mk-lead__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 0;
  text-underline-offset: 3px;
}

.mk-more { margin-top: var(--s-6); font-weight: 650; }

.mk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.mk-actions .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .mk-actions .btn { flex: 0 0 auto; } }

/* A single sentence given the weight of a section. Used once per page at most,
   and always beside the paragraph that qualifies it. */
.mk-statement {
  max-width: var(--measure);
  margin: 0 0 var(--s-6);
  padding-left: var(--s-5);
  border-left: 3px solid var(--c-accent);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
  color: var(--c-ink);
}
.mk-statement__code { font-size: var(--t-h3-size); word-break: break-all; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.mk-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.mk-hero__figure { display: flex; justify-content: center; }

/* --- Premium hero showcase ------------------------------------------------
   A phone showing the real scan page, an alert card floating off its edge, and
   a seal stating the promise. Everything is a token; depth comes from the two
   elevation tokens, not from ad-hoc shadows. The stack is centred and sized in
   its own terms so it reserves fixed space and never shifts the hero. */
.mk-showcase { display: flex; justify-content: center; width: 100%; }
/* The scene: a shallow perspective so the phone reads as a dimensional object
   and the alert and seal sit on their own planes in front of it (parallax
   depth). preserve-3d lets the children keep their own Z. */
.mk-showcase__stack {
  position: relative;
  width: min(100%, 340px);
  padding: var(--s-10) var(--s-6) var(--s-8);
  perspective: 1500px;
  transform-style: preserve-3d;
}

/* The phone. A rounded slab on the brand-tinted plate, tilted a hair so it
   reads as an object rather than a screenshot. */
.mk-phone {
  position: relative;
  border-radius: calc(var(--r-3) + 10px);
  border: 1px solid var(--c-border);
  background-color: var(--c-surface);
  box-shadow: var(--elev-3);
  padding: var(--s-5) var(--s-3) var(--s-3);
  transform-style: preserve-3d;
  /* Resting 3-D pose: a gentle turn so the slab has a near and a far edge. */
  transform: rotateX(3.5deg) rotateY(-10deg) rotate(0.5deg);
}
.mk-phone__notch {
  width: 34%;
  height: 5px;
  margin: 0 auto var(--s-3);
  border-radius: 999px;
  background-color: var(--c-border-strong);
}
.mk-phone__screen {
  position: relative;
  border-radius: var(--r-3);
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border);
  padding: var(--s-4);
  overflow: hidden;
}
/* The scan beam and its soft glow. Pure motion, like the hero drawing's sweep:
   invisible at rest (one shared class, so the resting-state guard sees one
   name), so with reduced motion or no animation the screen just shows the scan
   page. */
.mk-scanbeam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.mk-scan {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-primary) 20%, var(--c-primary) 80%, transparent);
  box-shadow: 0 0 12px 1px var(--c-primary);
}
.mk-scan__glow {
  height: 44px;
  background: linear-gradient(180deg, var(--c-primary-soft), transparent);
}
.mk-phone__brand {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3); color: var(--c-primary);
  font-weight: 700; letter-spacing: 0.14em; font-size: 11px;
}
.mk-phone__brand span { letter-spacing: 0.32em; color: var(--c-ink-3); }
.mk-phone__eyebrow {
  margin: 0 0 var(--s-3); font-weight: 700;
  font-size: 15px; line-height: 1.2; color: var(--c-ink);
}
.mk-phone__vehicle {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3); margin: 0 0 var(--s-3);
  border-radius: var(--r-2);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
}
.mk-phone__glyph {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-2); color: var(--c-primary);
  background-color: var(--c-primary-soft);
}
.mk-phone__vlines { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mk-phone__vlines b { font-size: 14px; color: var(--c-ink); }
.mk-phone__vlines i { font-size: 12px; font-style: normal; color: var(--c-ink-3); }
.mk-phone__status {
  font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 2px var(--s-2); border-radius: 999px;
  color: var(--c-on-success); background-color: var(--c-success);
}
.mk-phone__ask { margin: 0 0 var(--s-2); font-size: 11px; font-weight: 600; color: var(--c-ink-3); }
.mk-phone__reasons { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mk-phone__reason {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px var(--s-2); border-radius: 999px;
  font-size: 11px; color: var(--c-ink-2);
  background-color: var(--c-surface); border: 1px solid var(--c-border);
}
.mk-phone__reason .icon { color: var(--c-primary); }
/* The reason a scanner would pick here, shown chosen so the mockup reads as a
   decision in progress; the launch pulse lands on this same chip. */
.mk-phone__reason--sel {
  border-color: var(--c-primary);
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 650;
}
.mk-phone__cta {
  display: block; margin-top: var(--s-3); padding: var(--s-3);
  border-radius: var(--r-2); text-align: center;
  font-size: 13px; font-weight: 700;
  color: var(--c-on-primary); background-color: var(--c-primary);
}

/* The alert the owner receives, floating off the phone's lower-right so the two
   objects overlap and read as one flow: scan here, alert there. */
.mk-alert {
  position: absolute; right: calc(-1 * var(--s-2)); bottom: calc(-1 * var(--s-1));
  width: 62%; min-width: 190px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-3);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--elev-3);
  transform: translateZ(45px) rotate(1.5deg);
}
.mk-alert__head {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-2); font-weight: 700; font-size: 12px; color: var(--c-ink);
}
.mk-alert__icon { color: var(--c-primary); }
.mk-alert__line {
  display: grid; grid-template-columns: 58px 1fr; gap: var(--s-2);
  margin: 0 0 4px; font-size: 12px; color: var(--c-ink);
}
.mk-alert__line span { color: var(--c-ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; align-self: center; }
.mk-alert__foot {
  display: flex; align-items: center; gap: 5px;
  margin: var(--s-2) 0 0; padding-top: var(--s-2);
  border-top: 1px solid var(--c-border);
  font-size: 10px; color: var(--c-ink-3);
}
.mk-alert__foot .icon { color: var(--c-accent); }

/* The seal, top-left, tying the two together. */
.mk-seal {
  position: absolute; left: calc(-1 * var(--s-1)); top: calc(-1 * var(--s-1));
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: 0; padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--c-ink); background-color: var(--c-surface);
  border: 1px solid var(--c-border); box-shadow: var(--elev-2);
  transform: translateZ(70px);
}
.mk-seal__icon { color: var(--c-primary); }

/* The drawing sits on a tinted plate with a faint dot grid: enough texture to
   read as a considered surface, low enough contrast to stay behind the art. */
.mk-hero__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-3);
  color: var(--c-ink);
  background-color: var(--c-surface);
  background-image: radial-gradient(var(--c-border-strong) 1px, transparent 1px);
  background-size: var(--s-8) var(--s-8);
  background-position: center;
  box-shadow: var(--elev-1);
}
/* The drawing and its story layer share one box and one viewBox, so the two
   SVGs map to identical coordinates and the overlay needs no measuring. The
   stage is in normal flow and takes the drawing's own height, so adding the
   overlay reserves no extra space and shifts nothing. */
.mk-hero__stage { position: relative; width: 100%; }
.mk-hero__art { display: block; width: 100%; height: auto; }
.mk-hero__story {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The story layer's resting state, which is also its reduced-motion state and
   its printed state. The number and the fence are the picture's MEANING and are
   always drawn: with no animation at all this still reads "the number is fenced
   on the owner's side". The sweep and the two envelopes are motion and nothing
   else — a sweep frozen halfway across a code says nothing — so with no
   animation they are simply not there, and nothing is lost. */
.mk-story__beam { fill: currentColor; opacity: 0; }
.mk-story__fly { opacity: 0; }
.mk-story__bar { fill: currentColor; opacity: 0.45; }
.mk-story__fence { opacity: 0.55; }

@media (min-width: 900px) {
  .mk-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--s-12);
  }
}

/* Product facts, never social proof: three things the software does. */
.mk-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  max-width: none;
}
.mk-facts__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--c-ink-2);
}
.mk-facts__mark { color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   Flow: a section heading beside its sequence, so the rail stays one column
   --------------------------------------------------------------------------- */

.mk-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.mk-flow__aside .mk-bandhead { margin-bottom: var(--s-5); }
.mk-flow__aside .mk-actions { margin-bottom: 0; }

@media (min-width: 1024px) {
  .mk-flow { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16); }
  .mk-flow__aside { position: sticky; top: var(--s-16); align-self: start; }
}

/* ---------------------------------------------------------------------------
   The numbered sequence
   --------------------------------------------------------------------------- */

.mk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
  display: grid;
  gap: var(--s-6);
}

.mk-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--mk-node) minmax(0, 1fr);
  gap: var(--s-4);
}

/* The rail. Dashed, in the weight the illustrations are drawn at, echoing the
   dashed delivery path in the hero drawing. Decorative: the ordered list and
   the numbers on the tiles both carry the sequence without it. */
.mk-steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--mk-node) / 2 - var(--mk-rule) / 2);
  top: calc(var(--mk-node) + var(--s-2));
  bottom: calc(var(--s-2) - var(--s-6));
  border-left: var(--mk-rule) dashed var(--c-border-strong);
}

.mk-steps__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mk-node);
  height: var(--mk-node);
  border-radius: var(--r-2);
  border: 1px solid var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
/* The step number, on the tile's shoulder, ringed in whatever band it is in. */
.mk-steps__n {
  position: absolute;
  top: calc(var(--s-2) * -1);
  left: calc(var(--s-2) * -1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--s-5);
  height: var(--s-5);
  padding-inline: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: var(--t-micro-size);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 var(--mk-rule) var(--mk-band-bg);
}

.mk-steps__title {
  margin: 0 0 var(--s-2);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  padding-top: var(--s-2);
}
.mk-steps__body { margin: 0; color: var(--c-ink-2); }
.mk-steps__link { margin: var(--s-2) 0 0; }

/* ---------------------------------------------------------------------------
   What each side sees: the privacy promise, shown rather than claimed
   --------------------------------------------------------------------------- */

.mk-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 900px) { .mk-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }

.mk-see {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--r-3);
  background: var(--c-surface);
}
/* The two sides are told apart by their heading and their content; the rule at
   the top is a second, decorative cue only. */
.mk-see--owner { border-top-color: var(--c-primary); }
.mk-see__title { margin: 0 0 var(--s-4); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); }
.mk-see__body { margin: var(--s-5) 0 var(--s-4); color: var(--c-ink-2); }

/* The line that says what is never there. Words, an icon and a rule — the
   tint alone never carries it. */
.mk-never {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin: auto 0 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  background: var(--c-surface-2);
  color: var(--c-ink);
  font-weight: 650;
  max-width: none;
}
.mk-never__mark { flex: none; margin-top: 3px; color: var(--c-primary); }

/* --- The miniature screens ------------------------------------------------
   Decorative duplicates: every fact in them is written out in the sentence
   underneath, so the markup carries aria-hidden and nothing here is focusable.
   --------------------------------------------------------------------------- */

.mk-mock {
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-2);
  background: var(--mk-card-bg);
  overflow: hidden;
  box-shadow: var(--elev-2);
}
.mk-mock__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-ink-2);
}
.mk-mock__url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
}
.mk-mock__tag {
  flex: none;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  color: var(--c-ink-2);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.mk-mock__body { padding: var(--s-4); }

.mk-mock__row { margin: 0 0 var(--s-4); max-width: none; }
.mk-mock__label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
p.mk-mock__label { margin-bottom: var(--s-2); }
.mk-mock__value {
  display: block;
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--c-ink);
}
.mk-mock__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); max-width: none; }
.mk-mock__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-ink);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 650;
  white-space: nowrap;
}
.mk-mock__btn {
  display: block;
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  font-weight: 650;
  text-align: center;
}
.mk-mock__btn--quiet {
  background: var(--mk-card-bg);
  color: var(--c-ink);
  border-color: var(--c-border-strong);
}

/* ---------------------------------------------------------------------------
   Cost
   --------------------------------------------------------------------------- */

.mk-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }

.mk-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-3);
  background: var(--mk-card-bg);
}

/*
  THE TWO COLUMNS LINE UP ROW BY ROW.

  A pricing table has one job — let an eye move sideways and land on the same
  thing in both columns — and these did not: the paid card carried a lead
  sentence the free card had no counterpart for, so the two tick lists started
  53px apart and the whole block read as unfinished.

  Matching the content by hand fixes it until somebody edits the plan
  description in the console, which is an admin-editable field and can be any
  length. `subgrid` makes the alignment structural instead: the card's six rows
  ARE the parent's six rows, so each row is as tall as the taller of the two
  cards and every row starts level whatever is typed into it. Each slot always
  renders, empty if it has nothing, so both cards always have all six.

  Browsers without subgrid drop the two declarations and fall back to the
  auto-row grid, which is what the layout did before — degraded, not broken.
*/
@media (min-width: 900px) {
  .mk-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto 1fr auto auto;
  }
  .mk-plan {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    row-gap: 0;
  }
  /* The body stretches so both actions sit on the same line at the bottom. */
  .mk-plan .mk-plan__body { align-self: stretch; }
}

/* An empty slot takes no vertical space of its own; subgrid still reserves the
   row, so the cards stay level and the emptier one simply has room. */
.mk-plan__note:empty,
.mk-plan__lead:empty,
.mk-plan__action:empty,
.mk-plan__star:empty { margin: 0; padding: 0; }
@media (min-width: 768px) { .mk-plan { padding: var(--s-6); } }

/* Free is the product, not the lesser tier: it carries the border and the
   lift, and it is first in the source order. */
.mk-plan--free {
  border: var(--mk-rule) solid var(--c-primary);
  box-shadow: var(--elev-2);
}

.mk-plan__title { margin: 0 0 var(--s-3); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); }
.mk-plan__price {
  margin: 0;
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-hero);
  font-variant-numeric: tabular-nums;
}
/*
  TWO PRICES ARE SET THE SAME WAY.

  This shrank and dimmed the price on the OPTIONAL card, so ₹0 was display-size
  in full ink and ₹399 was two steps smaller and grey beside it — the two
  numbers a person is actually comparing, set as though one mattered more. The
  rule was keyed to the card's tone, but the reason behind it was never the
  tone: it was that this slot sometimes holds a PHRASE ("Not on sale yet")
  rather than an amount, and a sentence at display size looks absurd.

  So the modifier is on the phrase, not on the card. Two amounts are now
  identical in size, weight and colour; only a non-price shrinks.
*/
.mk-plan__price--phrase {
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  color: var(--c-ink-2);
  letter-spacing: normal;
}
.mk-plan__note { margin: var(--s-2) 0 var(--s-5); color: var(--c-ink-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.mk-plan__body p { margin-bottom: var(--s-4); }
/* The one sentence above the list, in the admin's own words. Slightly larger
   than the ticks so it reads as the lead rather than as a first item. */
.mk-plan__lead {
  font-size: var(--t-body-size);
  color: var(--c-ink);
}
.mk-plan__fine {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  color: var(--c-ink-2);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
}
.mk-plan__action { margin: auto 0 0; padding-top: var(--s-5); }
.mk-plan__action .btn { width: 100%; }

.mk-ticks { list-style: none; margin: 0; padding: 0; max-width: none; }
.mk-ticks li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--c-border);
}
.mk-ticks li:last-child { border-bottom: 0; }
.mk-ticks__mark { color: var(--c-success); flex: 0 0 auto; display: inline-flex; margin-top: 3px; }

/* ---------------------------------------------------------------------------
   Point and rule lists
   --------------------------------------------------------------------------- */

.mk-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); max-width: none; }
@media (min-width: 768px) { .mk-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); } }

.mk-points__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-10);
  height: var(--s-10);
  margin-bottom: var(--s-3);
  border-radius: var(--r-2);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.mk-points__title { margin: 0 0 var(--s-2); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); font-weight: 650; }
.mk-points__body { margin: 0; color: var(--c-ink-2); }

.mk-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); max-width: none; }
.mk-rules__item {
  display: grid;
  grid-template-columns: var(--s-10) minmax(0, 1fr);
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-border);
}
.mk-rules__item:last-child { padding-bottom: 0; border-bottom: 0; }
.mk-rules__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-10);
  height: var(--s-10);
  border-radius: var(--r-2);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.mk-rules__title { margin: 0 0 var(--s-2); font-weight: 650; max-width: var(--measure); padding-top: var(--s-2); }
.mk-rules__body { margin: 0; color: var(--c-ink-2); max-width: var(--measure); }

@media (min-width: 768px) {
  .mk-rules { gap: var(--s-6); }
  .mk-rules__item { padding-bottom: var(--s-6); }
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.mk-grid { display: grid; gap: var(--s-5); }
@media (min-width: 600px) {
  .mk-grid--2, .mk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mk-col)), 1fr)); }
}
@media (min-width: 900px) {
  .mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mk-card { background: var(--mk-card-bg); display: flex; flex-direction: column; }
.mk-card--accent { border-color: var(--c-primary); border-width: var(--mk-rule); }
.mk-card p { margin-bottom: var(--s-3); }
.mk-card p:last-child { margin-bottom: 0; }

/* A card that is one link end to end: one target, one focus ring, and the
   whole rectangle is clickable rather than four words inside it. */
.mk-card--link { padding-right: var(--s-10); }
.mk-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-10);
  height: var(--s-10);
  margin-bottom: var(--s-3);
  border-radius: var(--r-2);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.mk-card__link { text-decoration: none; color: var(--c-ink); }
.mk-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-2); }
.mk-card--link:hover { border-color: var(--c-border-strong); box-shadow: var(--elev-2); }
.mk-card--link:hover .mk-card__link { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.mk-card__body { margin: 0; color: var(--c-ink-2); }
.mk-card__go {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  color: var(--c-primary);
  display: inline-flex;
}
/* One ring on the card, not a thin one around the heading text. The @supports
   guard means a browser without :has() keeps the link's own ring instead of
   losing it — a focus indicator is never traded for a nicer one. */
@supports selector(:has(*)) {
  .mk-card--link .mk-card__link:focus-visible { outline: none; }
  .mk-card--link:has(.mk-card__link:focus-visible) {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.mk-faq-list {
  max-width: var(--measure);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  background: var(--mk-card-bg);
  overflow: hidden;
}
.mk-faq + .mk-faq { border-top: 1px solid var(--c-border); }

.mk-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap);
  padding: var(--s-4);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  color: var(--c-ink);
}
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q:hover { background: var(--c-surface); color: var(--c-primary-hover); }
.mk-faq[open] > .mk-faq__q { color: var(--c-primary); }
/* An h3 inside a <summary>: it carries the heading semantics for a screen
   reader and none of the h3 typography, so the disclosure looks unchanged. */
.mk-faq__text { min-width: 0; margin: 0; font: inherit; color: inherit; }

/* A chevron drawn from two borders: no glyph, no font dependency, and it turns
   rather than swapping a character, so nothing reflows on open. */
.mk-faq__marker {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--s-6);
  height: var(--s-6);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  color: var(--c-primary);
}
.mk-faq__marker::before {
  content: "";
  width: var(--s-2);
  height: var(--s-2);
  border-right: var(--mk-rule) solid currentColor;
  border-bottom: var(--mk-rule) solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.mk-faq[open] > .mk-faq__q .mk-faq__marker::before { transform: translateY(2px) rotate(225deg); }

.mk-faq__a { padding: 0 var(--s-4) var(--s-5); color: var(--c-ink-2); }
.mk-faq__a p { margin-bottom: var(--s-3); }
.mk-faq__a p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .mk-faq__marker::before { transition: transform var(--motion-base) var(--ease-standard); }
}

/* ---------------------------------------------------------------------------
   Table of contents
   --------------------------------------------------------------------------- */

.mk-toc {
  max-width: var(--measure);
  margin-top: var(--s-6);
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: var(--mk-card-bg);
}
.mk-toc__title {
  margin: 0 0 var(--s-2);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.mk-toc__list { list-style: none; margin: 0; padding: 0; max-width: none; }
.mk-toc__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--tap);
  padding-inline: var(--s-2);
  border-radius: var(--r-1);
  text-decoration: none;
}
.mk-toc__list a:hover { background: var(--c-surface-2); }
/* The underline stays on the words, so these never depend on colour alone. */
.mk-toc__label { text-decoration: underline; text-underline-offset: 3px; }
.mk-toc__go { flex: none; }

/* Anchor targets clear the sticky header on a `#` jump and on a focus scroll. */
.mk-band h2[id],
.mk-band h3[id],
.mk-faq[id] { scroll-margin-top: var(--s-16); }

/* ---------------------------------------------------------------------------
   Tables, breadcrumbs, definitions, outlines
   --------------------------------------------------------------------------- */

.mk-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  background: var(--mk-card-bg);
}
.mk-table { border-collapse: collapse; width: 100%; min-width: 32rem; }
.mk-table th,
.mk-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
.mk-table tbody tr:last-child th,
.mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-table thead th {
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-2);
  background: var(--c-surface-2);
  white-space: nowrap;
}
.mk-table tbody th { width: 9rem; font-weight: 650; }
.mk-table td { color: var(--c-ink-2); }
.mk-table__never { color: var(--c-ink); font-weight: 650; }

.mk-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: 0;
  font-size: var(--t-small-size);
  color: var(--c-ink-2);
  max-width: none;
}
.mk-crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-border-strong); }
.mk-crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); padding-block: 0; }

.mk-defs { margin: 0; max-width: var(--measure); }
.mk-defs dt {
  margin-top: var(--s-4);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.mk-defs dt:first-child { margin-top: 0; }
.mk-defs dd { margin: var(--s-1) 0 0; font-weight: 650; color: var(--c-ink); }

.mk-outline { margin: 0; padding-left: var(--s-6); max-width: var(--measure); }
.mk-outline::marker, .mk-outline li::marker { color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.mk-outline__item { margin-bottom: var(--s-5); }
.mk-outline__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.mk-outline__heading { margin: 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.mk-outline__tag {
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 650;
  white-space: nowrap;
}
.mk-outline__body { margin: var(--s-2) 0 0; color: var(--c-ink-2); }

.mk-bullets { margin: 0; padding-left: var(--s-5); max-width: var(--measure); }
.mk-bullets li { margin-bottom: var(--s-3); }
.mk-bullets li::marker { color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   Draft treatment for the legal pages
   --------------------------------------------------------------------------- */

.mk-stamp { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-5); }
.mk-stamp__tag {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-warning);
  color: var(--c-on-warning);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.mk-stamp__meta { color: var(--c-ink-2); }

/* Never dismissible, never quiet. The hatched rail, the word "Draft", the icon
   and the heading each say it independently of colour (SC 1.4.1). */
.mk-draft {
  position: relative;
  max-width: var(--measure);
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-6);
  border-radius: var(--r-2);
  background: var(--c-warning-soft);
  color: var(--c-ink);
  overflow: hidden;
}
.mk-draft__rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--s-2);
  background-color: var(--c-warning-soft);
  background-image: repeating-linear-gradient(
    135deg,
    var(--c-warning) 0 var(--s-1),
    transparent var(--s-1) var(--s-2)
  );
}
.mk-draft__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0 0 var(--s-2);
  color: var(--c-warning);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.mk-draft__heading { margin: 0 0 var(--s-2); font-weight: 650; }
.mk-draft__text { color: var(--c-ink-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.mk-draft__text p:last-child { margin-bottom: 0; }

.mk-notice { max-width: var(--measure); margin-top: var(--s-5); }

/* ---------------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------------- */

.mk-mailboxes { display: grid; gap: var(--s-5); }
@media (min-width: 600px) {
  .mk-mailboxes { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mk-col)), 1fr)); }
}

.mk-mailbox {
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  background: var(--mk-card-bg);
}
.mk-mailbox__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
}
.mk-mailbox__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-1);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.mk-mailbox__address { margin: 0 0 var(--s-3); font-weight: 650; word-break: break-word; }
.mk-mailbox__address a { display: inline-flex; align-items: center; min-height: var(--tap); padding-block: 0; }
.mk-mailbox__body { margin: 0; color: var(--c-ink-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }

.mk-ref {
  display: inline-block;
  padding: var(--s-1) var(--s-2);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-1);
  user-select: all;
}

/* ---------------------------------------------------------------------------
   The final call to action
   --------------------------------------------------------------------------- */

.mk-final { text-align: center; max-width: var(--measure); margin-inline: auto; }
.mk-final__title {
  margin: 0 0 var(--s-4);
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--tracking-hero);
  max-width: none;
}
.mk-final__actions { justify-content: center; margin-bottom: var(--s-3); }
.mk-final__note { margin: 0 auto; color: var(--c-ink-2); }
.mk-final p { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   The 112 line — identical in both themes, like the scan page's band
   --------------------------------------------------------------------------- */

.mk-112 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  background: var(--c-emergency);
  color: var(--c-on-emergency);
  padding: var(--s-4);
  border-radius: var(--r-2);
  font-weight: 650;
  max-width: var(--measure);
  margin-bottom: var(--s-4);
}
.mk-112__mark { flex: none; margin-top: 2px; }

/* ===========================================================================
   MOTION — the one surface allowed to be expressive, because here it is doing
   persuasion work. Everything below is inside ONE prefers-reduced-motion guard,
   the same construction core.css uses: under `reduce` these rules do not exist,
   so no `!important` downstream can resurrect them and nothing can be left
   half-animated. Read core.css "THE MOTION LAYER" first; this file adds no new
   duration and no new easing, only five keyframes that belong to one drawing.

   The four things that move on these pages, and what each one explains:

   1. THE HERO CASCADE. On load, above the fold, CSS only — a scroll trigger
      could never fire there. The promise, then the price line and the sentence
      under it, then the actions with the drawing, then the facts. Four beats of
      --mk-beat, each one an `m-rise` from core.
   2. THE HERO STORY. The product's single sentence, drawn: a scan crosses the
      code, the message travels to the relay and on to the owner's inbox, and
      the phone number lunges after it, meets the fence and stays exactly where
      it was. It plays once, ends at rest, and never repeats.
   3. THE SCROLL REVEALS. `/static/reveal.js` fades and lifts a marked element
      as it arrives. The script is deferred and optional, arms only what is
      already below the fold, and restores everything if it fails, so no rule
      here can leave content invisible. All this file adds is the ORDER: core's
      `.m-stagger` ladder, read as a transition delay.
   4. HOVER. A chevron moves 3 px on a card that is a link, on a fine pointer
      only. That is the whole of it.

   NOT here, deliberately: nothing loops; nothing enters twice; nothing below
   the fold moves while someone reads above it (an element is revealed once and
   unobserved); no animation gates a tap, a link or a form.
   =========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- 1. The hero cascade ------------------------------------------------
     Delay classes only. They set --m-delay, which core's `m-rise` reads out of
     its own `animation` shorthand — set `animation-delay` here instead and the
     shorthand would silently wipe it. The guard zeroes --m-delay's effect by
     zeroing animation-delay, so a beat can never survive into reduced motion. */

  .mk-beat-1 { --m-delay: var(--mk-beat); }
  .mk-beat-2 { --m-delay: calc(var(--mk-beat) * 2); }
  .mk-beat-3 { --m-delay: calc(var(--mk-beat) * 3); }

  /* --- 2. The hero story --------------------------------------------------
     Five marks on one timeline, all transform and opacity, none longer than
     --motion-slow, the last finishing a little over 800 ms after load. The
     layer resets --m-delay so the figure's own entrance beat does not shift the
     story on top of it; each mark then names the beat it starts on. */

  .mk-hero__story { --m-delay: 0s; }

  /* The scan. One pass down the code, inside the code's own bounds. */
  .mk-story__beam {
    --m-delay: calc(var(--mk-beat) * 2);
    animation: mk-scan var(--motion-slow) var(--ease-standard) var(--m-delay, 0s) both;
  }
  @keyframes mk-scan {
    from { opacity: 0; transform: none; }
    30% { opacity: 0.9; }
    to { opacity: 0; transform: translateY(28px); }
  }

  /* The message, out to the relay and then on to the inbox. It fades as it
     arrives each time, because what arrives is not what set out. */
  .mk-story__fly--out {
    --m-delay: calc(var(--mk-beat) * 4);
    animation: mk-relay-out var(--motion-slow) var(--ease-standard) var(--m-delay, 0s) both;
  }
  @keyframes mk-relay-out {
    from { opacity: 0; transform: none; }
    25% { opacity: 1; }
    70% { opacity: 1; }
    to { opacity: 0; transform: translate(90px, -97px); }
  }
  .mk-story__fly--in {
    --m-delay: calc(var(--mk-beat) * 7);
    animation: mk-relay-in var(--motion-slow) var(--ease-standard) var(--m-delay, 0s) both;
  }
  @keyframes mk-relay-in {
    from { opacity: 0; transform: none; }
    25% { opacity: 1; }
    70% { opacity: 1; }
    to { opacity: 0; transform: translate(56px, 64px); }
  }

  /* The number that does not travel. It moves at the same moment the message
     is passing the relay, gets as far as the fence, and returns to exactly
     where it started — so the frame after the animation is the frame before it,
     and the difference between the two objects is the entire point. */
  .mk-story__held {
    --m-delay: calc(var(--mk-beat) * 5);
    animation: mk-held var(--motion-slow) var(--ease-standard) var(--m-delay, 0s) both;
  }
  @keyframes mk-held {
    from { transform: none; }
    45% { transform: translateX(-9px); }
    62% { transform: translateX(-9px); }
    to { transform: none; }
  }
  .mk-story__fence {
    --m-delay: calc(var(--mk-beat) * 5);
    animation: mk-fenced var(--motion-slow) var(--ease-standard) var(--m-delay, 0s) both;
  }
  @keyframes mk-fenced {
    from { opacity: 0.55; }
    45% { opacity: 1; }
    62% { opacity: 1; }
    to { opacity: 0.55; }
  }

  /* --- 3. Scroll reveal, in order -----------------------------------------
     core.css owns the hidden state, the transition and the safety net. The only
     thing added here is sequence: `.m-stagger` on a parent already sets
     --m-delay per child, so one rule turns that ladder into a transition delay
     and the five steps read 1, 2, 3 instead of appearing as a block. The
     specificity beats core's `.m-reveal-armed.m-reveal-in` on purpose, and only
     for `transition-delay` — the guard's `transition-delay: 0s !important`
     still wins over all of it. */

  [data-reveal].m-reveal-armed.m-reveal-in { transition-delay: var(--m-delay, 0s); }

  /* The privacy comparison. The two sides arrive from their own sides of the
     split, so the contrast is a movement and not just a layout; and the line
     that says what is NEVER shown lands a beat after the card it belongs to,
     which is the order the sentence is meant to be read in. The sideways part
     is desktop-only, where the two are actually side by side; it travels less
     than the band's own gutter, so nothing can overflow. */
  .mk-never[data-reveal].m-reveal-armed.m-reveal-in {
    transition-delay: calc(var(--m-delay, 0s) + var(--motion-base));
  }
  @media (min-width: 900px) {
    .mk-see--scanner.m-reveal-armed {
      transform: translate(calc(var(--motion-rise) * -1), var(--motion-rise));
    }
    .mk-see--owner.m-reveal-armed {
      transform: translate(var(--motion-rise), var(--motion-rise));
    }
    .mk-see--scanner.m-reveal-armed.m-reveal-in,
    .mk-see--owner.m-reveal-armed.m-reveal-in { transform: none; }
  }

  /* --- 4. Hover -----------------------------------------------------------
     The card lift and the colour crossfade are core's, inherited by putting
     `card--interactive` on a card that is a link. All that is left is the
     chevron, which moves the way the card is about to take you. Fine pointers
     only: on touch a :hover state sticks after the tap. */

  .mk-card--link .mk-card__go,
  .mk-toc__go { transition: transform var(--motion-fast) var(--ease-standard); }
  .mk-faq__q {
    transition:
      background-color var(--motion-fast) var(--ease-standard),
      color var(--motion-fast) var(--ease-standard);
  }
  @media (hover: hover) and (pointer: fine) {
    .mk-card--link:hover .mk-card__go,
    .mk-toc__list a:hover .mk-toc__go { transform: translateX(3px); }
  }
}

/* ---------------------------------------------------------------------------
   Print: the help pages are printed and stuck in glove boxes
   --------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .mk-toc,
  .mk-card__go,
  .mk-hero__figure,
  .mk-actions { display: none; }
  /* .mk-hero__figure above takes the story layer with it, so nothing that only
     exists mid-animation can print as a half-drawn mark. */
  .mk-band { padding-block: var(--s-4); background: none; border: 0; }
  .mk-band--hero { background-image: none; }
  .mk-faq__a { display: block; }
  .mk-flow__aside { position: static; }
  .mk-plan, .mk-see, .mk-mock, .mk-faq-list { box-shadow: none; }
}


/* ---------------------------------------------------------------------------
   Hero showcase — launch choreography. The pieces assemble once, in depth: the
   phone turns in, a beam scans the code, the chosen reason lights up, the alert
   flies forward off the screen, and the promise seal stamps in. Motion only —
   this whole block is inside prefers-reduced-motion: no-preference, so with
   reduced motion every piece is already in its final 3-D pose and still. It
   plays on load (the hero is above the fold) and nothing loops or shifts layout.

   Durations are core --motion-* tokens; each beat's start is carried as
   --m-delay (a multiple of core's --motion-base), and every `animation`
   shorthand reads `var(--m-delay, 0s)` so the core reduced-motion guard's
   `animation-delay: 0s !important` still wins.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .mk-anim-phone {
    --m-delay: var(--motion-fast);
    animation: mk-kf-phone var(--motion-deliberate) var(--ease-decelerate) var(--m-delay, 0s) both;
  }
  @keyframes mk-kf-phone {
    from { opacity: 0; transform: rotateX(7deg) rotateY(-26deg) rotate(0.5deg) translateY(10px); }
    to   { opacity: 1; transform: rotateX(3.5deg) rotateY(-10deg) rotate(0.5deg); }
  }

  /* The beam and its glow sweep the screen once, together. */
  .mk-scanbeam {
    --m-delay: calc(var(--motion-base) * 3);
    animation: mk-kf-scan var(--motion-deliberate) var(--ease-standard) var(--m-delay, 0s) both;
  }
  @keyframes mk-kf-scan {
    0%   { opacity: 0; transform: translateY(-16px); }
    12%  { opacity: 0.95; }
    85%  { opacity: 0.95; }
    100% { opacity: 0; transform: translateY(300px); }
  }

  /* The chosen reason lights up just after the beam passes it. */
  .mk-phone__reason--sel {
    --m-delay: calc(var(--motion-base) * 7);
    animation: mk-kf-sel var(--motion-slow) var(--ease-spring) var(--m-delay, 0s) both;
  }
  @keyframes mk-kf-sel {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.07); }
    100% { transform: scale(1); }
  }

  /* The alert flies forward off the phone and settles on its own plane. */
  .mk-anim-alert {
    --m-delay: calc(var(--motion-base) * 8);
    animation: mk-kf-alert var(--motion-deliberate) var(--ease-spring) var(--m-delay, 0s) both;
  }
  @keyframes mk-kf-alert {
    from { opacity: 0; transform: translate(-18px, 14px) translateZ(0) rotate(1.5deg) scale(0.94); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translateZ(45px) rotate(1.5deg); }
  }

  /* The promise seal stamps in last, closest to the viewer. */
  .mk-anim-seal {
    --m-delay: calc(var(--motion-base) * 10);
    animation: mk-kf-seal var(--motion-slow) var(--ease-spring) var(--m-delay, 0s) both;
  }
  @keyframes mk-kf-seal {
    from { opacity: 0; transform: translateZ(70px) scale(0.7); }
    60%  { opacity: 1; transform: translateZ(70px) scale(1.06); }
    to   { opacity: 1; transform: translateZ(70px) scale(1); }
  }
}

/* The header's right cluster carries the theme toggle beside the primary CTA. */
/*
  The account controls sit hard against the right edge at every width. On a
  phone the cluster is too wide to share a line with the wordmark and wraps to
  its own row; `space-between` then left-aligned it, so the brand sat alone on
  one row and the controls hugged the opposite corner of the next. The auto
  margin keeps it right whether it shares the row or takes its own.
*/
.mk-header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
}
@media (min-width: 480px) { .mk-header__cta { gap: var(--s-3); } }

/* The qualifier beside an asterisked claim. Small, but never hidden: an
   asterisk whose explanation is not legible in the same frame has explained
   nothing, and reads as a catch rather than a clarification. */
.mk-plan__star,
.mk-star {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-micro-size, 0.78rem);
  line-height: 1.45;
  color: var(--c-ink-2);
  max-width: 46ch;
}

/* The returning owner's way in, beside the primary call to action. Quiet on
   purpose — a newcomer is the larger audience and keeps the filled button — but
   a real target, not a text scrap: it carries the full tap height. */
.mk-signin {
  /* A QUIET BUTTON, not an underlined link.
     It sits in the header cluster with the filled primary CTA, and a bare
     underlined anchor beside a solid button reads as leftover text rather than
     the other door. Same height and same radius as the button, an outline
     instead of a fill: two controls, one of them obviously secondary.

     It is the LAST thing in the cluster, hard against the right edge, because
     that corner is where a person looks to leave and it must hold still
     whether they are signed in or out. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding-inline: var(--s-4);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-2);
  font-weight: 650; white-space: nowrap;
  color: var(--c-ink); text-decoration: none;
}
.mk-signin:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  text-decoration: none;
}