/* ldu/pages-marketing.css: the public landing (Home, Be an expert, Find an expert, Privacy, Terms; docs/landing-design.md, "Pass 4"). Layout only, tokens only.
   Mobile first: the base rules are the 375 px phone, then 768 and 1024 widen it. The page is pinned light; only the hero is pinned dark (data-theme on
   the band), every other band is paper or grey. The pattern is converging fibres (21st.dev Gateway Flow): many lines from the edges into one point. */

.mk-page {
  --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mk-spring: linear(0, 0.18 6%, 0.6 16%, 0.95 27%, 1.06 35%, 1.04 44%, 0.99 58%, 1);
  --mk-grey: color-mix(in oklab, var(--bg) 94%, var(--ink));
  background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5; interpolate-size: allow-keywords;
}
/* the two app rules the landing uses, since it does not load the app's sheets (marketing/_head) */
.mk-page .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mk-page .modelicon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.mk-skip { position: absolute; left: -9999px; }
.mk-skip:focus { left: 16px; top: 16px; z-index: 30; background: var(--bg-2); color: var(--ink); padding: 8px 12px; border-radius: var(--r-1); }
.mk-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.mk-page figure { margin: 0; }
.mk-page button { font: inherit; }

/* a placeholder's label: small, quiet, always says what is not real yet. Small quiet text is --ink-2, never --ink-3, which is under 4.5:1 on paper
   and grey (Lighthouse, 20 Oct) */
.mk-ph { display: inline-block; font-size: 12px; line-height: 16px; color: var(--ink-2); }

/* ── type: DM Sans display for titles, 16 px body; titles 20ch, ledes 52ch ── */
.mk-h1 { font-family: var(--display); font-weight: 600; font-size: 36px; line-height: 1.12; letter-spacing: -0.02em; margin: 0; max-width: 20ch; text-wrap: balance; }
.mk-h2 { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; max-width: 20ch; text-wrap: balance; }
.mk-lede { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 52ch; }

/* ── bands ───────────────────────────────────────────────────── */
.mk-band { position: relative; background: var(--bg); color: var(--ink); padding: 64px 0; }
/* base.css paints every [data-theme] element with its own --bg at a higher specificity than one class, so .mk-band--grey renders paper (it still
   keeps a band's top padding). The one filled band (Milan, 20 Oct: Home's How the two sides meet) outranks it with [data-theme]. */
.mk-page .mk-band--fill[data-theme] { background: var(--mk-grey); }
/* twice the band padding on top, a normal bottom (Milan, 20 Oct: Home's Why both sides trust it; the doubled bottom was too much) */
.mk-band.mk-band--roomy { padding: 128px 0 64px; }
/* twice the bottom padding (Milan, 20 Oct: Home's AI answers in seconds) */
.mk-band.mk-gap { padding-bottom: 128px; }
.mk-band:not(.mk-band--grey, .mk-hero, .mk-dan) + .mk-band:not(.mk-band--grey, .mk-hero, .mk-dan) { padding-top: 0; }
.mk-band > .mk-wrap { position: relative; }
.mk-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.mk-head--centre { align-items: center; text-align: center; }
.mk-head--centre .mk-h2, .mk-head--centre .mk-lede { margin-inline: auto; }
.mk-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.mk-split { display: grid; gap: 32px; align-items: center; }
.mk-fig { min-width: 0; }

/* ── the pattern: converging fibres ─────────────────────────── */
.mk-fibres { position: absolute; pointer-events: none; overflow: visible; }
.mk-fibres path { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ── the CTA: kokonut Slide Text Button. The label slides up as the same label rises from below; fill and border change smoothly. ── */
.mk-go { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 280ms var(--mk-ease), border-color 280ms var(--mk-ease), color 280ms var(--mk-ease); }
.mk-go:hover, .mk-go:focus-visible { text-decoration: none; background: var(--ink); color: var(--bg); }
.mk-go:active { opacity: 0.88; }
.mk-go__t { display: grid; height: 20px; overflow: hidden; }
.mk-go__t > span { display: block; line-height: 20px; transition: translate 360ms var(--mk-ease); }
.mk-go:hover .mk-go__t > span, .mk-go:focus-visible .mk-go__t > span { translate: 0 -100%; }
/* filled: ink on white, lilac on the dark bar */
.mk-go--fill { background: var(--ink); color: var(--bg); }
/* hover (Milan, 20 Oct): the fill only gets darker, it never turns into an outline */
.mk-go--fill:hover, .mk-go--fill:focus-visible { --mk-dark: color-mix(in oklab, var(--ink), black 45%); border-color: var(--mk-dark); background: var(--mk-dark); color: var(--bg); }
[data-theme="dark"] .mk-go--fill { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
[data-theme="dark"] .mk-go--fill:hover, [data-theme="dark"] .mk-go--fill:focus-visible { --mk-dark: color-mix(in oklab, var(--accent) 78%, var(--accent-ink));
  border-color: var(--mk-dark); background: var(--mk-dark); color: var(--accent-ink); }


.mk-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 12px; font-weight: 600; line-height: 16px; }
.mk-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mk-ticks li { display: flex; gap: 12px; align-items: flex-start; }
.mk-ticks .icon { color: var(--accent); flex: none; margin-top: 2px; }

.mk-face { display: block; flex: none; width: var(--s, 48px); height: var(--s, 48px); overflow: hidden; border-radius: 999px; background: var(--ink-4); }
.mk-face img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── top bar: no band; it floats over the page (fixed). The centre nav and the right group are dark pills with a border, the logo gains one once
   the page scrolls (html.mk-scrolled, from mk-motion), so it stays readable over the light bands ── */
.mk-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; pointer-events: none; }
/* base.css paints every [data-theme] element with its background; the bar must stay see-through */
.mk-page .mk-bar[data-theme] { background: none; }
.mk-bar__in { position: relative; display: flex; align-items: center; gap: 8px; height: 72px; }
.mk-bar__in > * { pointer-events: auto; }
.mk-bar__group { background: var(--bg); border: 1px solid var(--line-2); border-radius: 999px; }
.mk-bar__logo { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 0; border: 1px solid transparent; border-radius: 999px;
  color: var(--ink); text-decoration: none; transition: background-color 280ms var(--mk-ease), border-color 280ms var(--mk-ease), padding 280ms var(--mk-ease); }
.mk-scrolled .mk-bar .mk-bar__logo { padding: 0 16px; background: var(--bg); border-color: var(--line-2); }
/* LDU's logo as a mask in the text colour (162 x 58 artwork) */
.mk-logo__ldu { display: block; flex: none; height: 24px; aspect-ratio: 162 / 58; background: currentColor;
  mask: var(--mk-logo) left center / contain no-repeat; -webkit-mask: var(--mk-logo) left center / contain no-repeat; }
.mk-bar__end { display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px; }
.mk-bar__cta { display: none; height: 40px; padding: 0 16px; }
.mk-bar__menu { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color var(--dur) ease, visibility 0s linear 280ms; }
.mk-bar__menu:hover { background: var(--bg-2); }
/* the page starts under the floating bar: the first hero takes its height on top of its own padding */
.mk-page main > .mk-hero:first-child { padding-top: 112px; }

/* kokonut Split Nav: one pill, its highlight slides to the hovered link */
.mk-nav { position: absolute; left: 50%; translate: -50% 0; display: none; padding: 4px; }
.mk-nav__glide { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); translate: var(--x, 0) 0; border-radius: 999px; background: var(--bg-2);
  opacity: 0; transition: translate 360ms var(--mk-ease), width 360ms var(--mk-ease), opacity 200ms ease; }
.mk-nav.is-on .mk-nav__glide { opacity: 1; }
.mk-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; color: var(--ink-2);
  text-decoration: none; transition: color var(--dur) ease; gap: 8px; }
.mk-nav__link:hover, .mk-nav__link[aria-current="page"] { color: var(--ink); }
.mk-nav__link .icon { color: var(--accent); }
/* the divider between the two links: short, with space above and below */
.mk-nav__rule { align-self: center; width: 1px; height: 20px; margin: 0 4px; background: var(--line-2); }
/* "Limited seats" beside Join the pilot (Sam, 3 Nov): a small lilac tag */
.mk-nav__seats { padding: 1px 8px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 12px; line-height: 18px; white-space: nowrap; }
/* the sign-up counter after the links (Sam, 3 Nov): a live dot, the number, "signed up" */
.mk-nav__count { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; color: var(--ink-2); white-space: nowrap; }
.mk-nav__count strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-nav__count i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }

/* the phone menu (Milan, 20 Oct): it drops down from the top, under the menu button the thumb just tapped, as three large rows with an icon each */
/* the menu layer itself is clear and only places things; the panel inside is the box that fades and drops in */
.mk-drawer { position: fixed; inset: 76px 16px auto 16px; overflow: visible; width: auto; max-width: none; margin: 0; padding: 0; border: 0; color: var(--ink);
  transition: display 320ms allow-discrete, overlay 320ms allow-discrete; }
.mk-page .mk-drawer[data-theme] { background: none; }
.mk-drawer:not(:popover-open) { display: none; }
.mk-drawer__panel { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-2);
  transition: opacity 200ms var(--mk-ease), translate 320ms var(--mk-ease); }
.mk-drawer:not(:popover-open) .mk-drawer__panel { opacity: 0; translate: 0 -8px; }
@starting-style { .mk-drawer:popover-open .mk-drawer__panel { opacity: 0; translate: 0 -8px; } }
.mk-drawer::backdrop { background: var(--scrim); }
/* the close X: placed by mk-menu on the menu button's exact spot (--top, --left, relative to the menu box) */
.mk-drawer__close { position: absolute; top: var(--top, -60px); left: var(--left, auto); right: 5px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 999px; color: var(--ink); cursor: pointer; transition: background-color var(--dur) ease; }
/* filled white with a dark X (Milan, 20 Oct), covering the menu button under it; hover darkens the fill a little */
.mk-page .mk-drawer__close[data-theme] { padding: 0; background: var(--ink); color: var(--bg);
  transition: background-color 280ms var(--mk-ease), color 280ms var(--mk-ease); }
.mk-page .mk-drawer__close[data-theme]:hover { background: color-mix(in oklab, var(--ink) 88%, var(--bg)); }
.mk-drawer__close .icon { transition: rotate 280ms var(--mk-ease); }
/* the morph: before it opens (and while it closes) the X looks like the menu button, clear with a light icon, turned a quarter */
.mk-page .mk-drawer:not(:popover-open) .mk-drawer__close[data-theme] { background: transparent; color: var(--ink); }
.mk-drawer:not(:popover-open) .mk-drawer__close .icon { rotate: -90deg; }
@starting-style {
  .mk-page .mk-drawer:popover-open .mk-drawer__close[data-theme] { background: transparent; color: var(--ink); }
  .mk-drawer:popover-open .mk-drawer__close .icon { rotate: -90deg; }
}
/* the menu button steps aside while its X is showing, and comes back once the X has turned back into it */
.mk-page:has(.mk-drawer:popover-open) .mk-bar__menu { visibility: hidden; transition-delay: 0s; }
.mk-drawer__item { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px; border-radius: 16px; color: var(--ink); text-decoration: none;
  transition: background-color var(--dur) ease; }
.mk-drawer__item:hover, .mk-drawer__item[aria-current="page"] { background: var(--mk-grey); }
.mk-drawer__item > .icon { flex: none; color: var(--ink-2); }
.mk-drawer__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); }
.mk-drawer__t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mk-drawer__t strong { font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 600; }
.mk-drawer__t span { color: var(--ink-2); font-size: 14px; line-height: 20px; }

/* the phone's main action: Get started in a bar fixed to the bottom of the screen; the page ends above it */
.mk-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; display: grid; gap: 8px; padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0; }
.mk-page .mk-dock[data-theme] { background: var(--bg); }
.mk-dock__proof { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-dock__faces { display: flex; }
.mk-dock__faces .mk-face { border: 2px solid var(--bg); }
.mk-dock__faces .mk-face + .mk-face { margin-left: -8px; }
.mk-dock__cta { width: 100%; height: 48px; }
.mk-page { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }

/* ── footer: the bottom of the dark close (Milan, 20 Oct). It is pinned dark and continues the end band (8 · below) with no seam: the band's
   gradient ends on --bg, the footer's own colour. A quiet line inside the container divides it from the CTA. On a phone it also runs on under the
   fixed .mk-dock, so the page ends dark instead of on a strip of paper. ── */
.mk-page .mk-foot[data-theme] { padding: 0 0 calc(40px + 108px + env(safe-area-inset-bottom)); background: var(--bg); }
.mk-foot { margin-bottom: calc(-108px - env(safe-area-inset-bottom)); }
.mk-foot__in { display: flex; flex-direction: column; gap: 16px; }
.mk-foot__in::before { content: ""; height: 1px; margin-bottom: 16px; background: var(--line); }
.mk-foot__nav { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-left: -12px; }
.mk-foot__link, .mk-foot__plain { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink-2); text-decoration: none; }
.mk-foot__link { border-radius: 999px; transition: color var(--dur) ease, background-color var(--dur) ease; }
.mk-foot__link:hover { color: var(--ink); background: var(--bg-2); }
@media (min-width: 768px) {
  .mk-foot { margin-bottom: 0; }
  .mk-page .mk-foot[data-theme] { padding-bottom: 48px; }
  .mk-foot__in { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
  .mk-foot__in::before, .mk-foot__note { flex-basis: 100%; }
  .mk-foot__in::before { margin-bottom: 16px; }
  .mk-foot__nav { margin: 0 -12px 0 0; }
}
.mk-foot__plain { color: var(--ink-2); }
.mk-foot__note { margin: 0; color: var(--ink-2); }
.mk-foot__note strong { color: var(--ink); margin-right: 8px; }

/* ═══ Home ═════════════════════════════════════════════════════ */

/* 1 · hero: ink to a lighter ink, lilac where the lines meet; the headline centred over the Sankey */
.mk-hero { overflow: hidden; isolation: isolate; padding: 40px 0 48px;
  background:
    radial-gradient(40% 50% at 50% 78%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg) 20%, color-mix(in oklab, var(--bg) 88%, var(--ink))); }
.mk-hero__head { display: flex; flex-direction: column; gap: 16px; }
.mk-hero__note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); }
.mk-hero__note .icon { color: var(--accent); }

.mk-fork { display: grid; gap: 12px; margin-top: 8px; }
/* the two fork cards glow (Milan, 20 Oct: "a nice lilac inner glow and animated border glow", so they read as buttons and not as part of the hero
   picture, whose cards stay flat): a lilac glow rising from inside, a light that travels round the edge (::before, a conic ring cut to the border by a
   mask) and its soft halo (::after). Hover brightens both, colour and opacity only. With reduced motion the ring is still and even. */
@property --mk-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --mk-glow { syntax: "<color>"; initial-value: transparent; inherits: true; }
@keyframes mk-orbit { to { --mk-angle: 360deg; } }
.mk-fork__card { --mk-glow: color-mix(in oklab, var(--accent) 30%, transparent); position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px;
  padding: 16px; border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); border-radius: 20px; text-align: left;
  background: radial-gradient(90% 110% at 50% 120%, var(--mk-glow), transparent 75%), color-mix(in oklab, var(--bg-2) 80%, transparent);
  box-shadow: inset 0 0 28px color-mix(in oklab, var(--accent) 24%, transparent);
  color: var(--ink); text-decoration: none; cursor: pointer; transition: border-color 280ms var(--mk-ease), --mk-glow 280ms var(--mk-ease); }
/* the travelling light: a conic sweep cut to the border (the crisp ring), and the same ring blurred behind it (the halo; the blur sits on the
   wrapper so the mask cuts the ring first) */
.mk-fork__card::before, .mk-fork__glow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--mk-angle), transparent 0deg, transparent 200deg, var(--accent) 300deg, transparent 360deg);
  mask: linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0); animation: mk-orbit 5s linear infinite; }
.mk-fork__card::before { padding: 2px; }
.mk-fork__glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; filter: blur(10px); opacity: 0.6; pointer-events: none; transition: opacity 280ms var(--mk-ease); }
.mk-fork__glow::before { padding: 6px; }
.mk-fork__card + .mk-fork__card::before, .mk-fork__card + .mk-fork__card .mk-fork__glow::before { animation-delay: -2.5s; }
/* the light only travels while the hero is on screen (.is-live from mk-motion on .mk-fork) */
.mk-fork:not(.is-live) .mk-fork__card::before, .mk-fork:not(.is-live) .mk-fork__glow::before { animation-play-state: paused; }
.mk-fork__card:hover { --mk-glow: color-mix(in oklab, var(--accent) 48%, transparent); border-color: color-mix(in oklab, var(--accent) 70%, transparent); }
.mk-fork__card:hover .mk-fork__glow { opacity: 1; }
.mk-fork__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent);
  transition: background-color 280ms var(--mk-ease), color 280ms var(--mk-ease); }
.mk-fork__card:hover .mk-fork__icon { background: var(--accent); color: var(--accent-ink); }
.mk-fork__text { display: flex; flex-direction: column; gap: 4px; flex: 1; color: var(--ink-2); }
.mk-fork__text strong { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); }
.mk-fork__arrow { color: var(--ink-2); flex: none; transition: color 280ms var(--mk-ease), translate 320ms var(--mk-ease); }
.mk-fork__card:hover .mk-fork__arrow { color: var(--accent); translate: 4px 0; }

/* the route (Milan's review): a person with their AI on the left, the swapping request under them, four experts on the right; the current request
   pulses along its line to its expert, who lights. Symmetric columns, so the figure sits on the page's centre. A phone stacks it: the experts in a
   row underneath, the lines running down to them. */
/* the fibres keep at least a desktop's width and are cropped at the sides on a narrow screen (Milan, 20 Oct: squeezed into a phone they read as
   clutter), on every page */
:is(.mk-hero--home, .mk-hero--side) > .mk-fibres { inset: auto auto 0 50%; width: max(100%, 960px); translate: -50% 0; height: 62%; z-index: -1; color: var(--accent); opacity: 0.18;
  -webkit-mask: radial-gradient(60% 90% at 50% 50%, transparent 20%, black 60%); mask: radial-gradient(60% 90% at 50% 50%, transparent 20%, black 60%); }
.mk-anim :is(.mk-hero--home, .mk-hero--side) > .mk-fibres path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: mk-draw 1.6s var(--mk-ease) forwards; animation-delay: calc(var(--i) * 30ms); }
@keyframes mk-draw { to { stroke-dashoffset: 0; } }
.mk-path { position: relative; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.mk-page .mk-path { margin: 48px auto 0; }
.mk-path__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk-path__line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-opacity: 0.22; transition: stroke-opacity 360ms var(--mk-ease); }
.mk-path__line.is-on { stroke-opacity: 0.6; }
/* the pulse: a short bright stroke with a glow that runs the length of the line once (keyframe names must be unique in this file) */
.mk-path__pulse { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.2 2; stroke-dashoffset: 0.2; opacity: 0;
  filter: drop-shadow(0 0 6px var(--accent)); }
.mk-anim .mk-path__pulse.is-go { animation: mk-path-go 1100ms cubic-bezier(0.45, 0, 0.25, 1) forwards; }
@keyframes mk-path-go { 0% { stroke-dashoffset: 0.2; opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
.mk-path__ask { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 320px; }
.mk-path__who { display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); }
.mk-path__me { position: relative; z-index: 1; border: 2px solid var(--bg-2); }
.mk-path__ais { display: inline-flex; margin-left: -24px; }
.mk-path__ai { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -6px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 14%, var(--bg-2)); }
.mk-path__ai:first-child { margin-left: 0; padding-left: 4px; width: 36px; }
.mk-path__ai .modelicon { width: 16px; height: 16px; }
.mk-path__via { display: flex; flex-direction: column; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-path__via strong { color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 600; }
.mk-path__reqs { display: grid; width: 100%; padding: 16px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg-2); align-items: start; }
.mk-path__req { grid-area: 1 / 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; opacity: 0; translate: 0 -6px;
  transition: opacity 180ms ease, translate 180ms ease; }
/* the new request comes in only after the old one has gone, so the two never overlap */
.mk-path__req.is-on { opacity: 1; translate: 0 0; transition: opacity 360ms var(--mk-ease) 200ms, translate 480ms var(--mk-ease) 200ms; }
.mk-path__req p { margin: 0; color: var(--ink); font-size: 16px; line-height: 24px; }
.mk-path__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 18%, var(--bg-2)); color: var(--accent); }
.mk-path__file { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-path__ex { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.mk-path__node { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 4px; border: 1px solid transparent;
  border-radius: 16px; background: transparent; color: var(--ink-2); text-align: center; cursor: pointer;
  transition: border-color 360ms var(--mk-ease), background-color 360ms var(--mk-ease), opacity 360ms var(--mk-ease); }
.mk-path__node:hover { border-color: var(--line-2); }
.mk-path__expert:not(.is-on) .mk-path__node { opacity: 0.55; }
.mk-path__expert.is-on .mk-path__node { border-color: var(--accent); background: var(--bg-2); opacity: 1; transition-delay: 900ms; }
.mk-path__node .mk-face { border: 2px solid transparent; transition: border-color 360ms var(--mk-ease); }
.mk-path__name { display: flex; flex-direction: column; font-size: 12px; line-height: 16px; min-width: 0; }
.mk-path__name strong { color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.mk-path__area { display: none; }

/* 2 · the bar every expert clears: centred head, four tiles, each a picture over its title and line */
.mk-std { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mk-std__tile { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 24px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-2); color: var(--ink-2); }
.mk-std__tile p { margin: 0; }
.mk-std__tile .mk-h3 { margin-top: 12px; }
.mk-std__art { display: grid; place-items: center; height: 176px; padding: 16px; border-radius: 16px; background: var(--mk-grey); overflow: hidden; }
/* credentials: a certificate card, the Checked badge settles onto it */
.mk-cert { position: relative; display: flex; gap: 12px; width: 100%; max-width: 240px; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.mk-cert__lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.mk-cert__lines strong { color: var(--ink); font-size: 14px; line-height: 20px; }
.mk-cert__lines i, .mk-ok i { display: block; height: 6px; border-radius: 999px; background: var(--mk-grey); }
.mk-cert__lines i { width: 100%; margin-top: 4px; }
.mk-cert__lines i + i { width: 64%; margin-top: 0; }
.mk-cert__ok { position: absolute; right: -8px; bottom: -14px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--accent);
  color: var(--accent-ink); font-size: 12px; line-height: 16px; font-weight: 600; }
/* their yes: the twin's draft, the approval line under it */
.mk-ok { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 240px; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.mk-ok__draft { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; }
.mk-ok i:nth-of-type(2) { width: 88%; }
.mk-ok i:nth-of-type(3) { width: 56%; }
.mk-ok__yes { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--accent); font-size: 14px; line-height: 20px; font-weight: 600; }
/* the score: a meter past the line every expert must reach */
.mk-meter { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 240px; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.mk-meter__top { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-meter__top strong { font-family: var(--display); font-size: 24px; line-height: 28px; color: var(--ink); }
.mk-meter__top small { font-size: 14px; color: var(--ink-2); font-weight: 400; }
.mk-meter__bar { position: relative; height: 8px; border-radius: 999px; background: var(--mk-grey); }
.mk-meter__fill { position: absolute; inset: 0 14% 0 0; border-radius: 999px; background: var(--accent); }
.mk-meter__line { position: absolute; left: 70%; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--ink); }
.mk-meter__ticks { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-meter__ticks > span { display: inline-flex; align-items: center; gap: 4px; }
.mk-meter__ticks .icon { color: var(--accent); }
/* private rooms: two people inside a locked room */
.mk-room2 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 200px; padding: 24px 16px 16px;
  border: 2px solid var(--ink); border-radius: 20px; background: var(--bg); }
.mk-room2__lock { position: absolute; top: -16px; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  background: var(--ink); color: var(--bg); }
.mk-room2__in { display: flex; gap: 8px; }
.mk-room2__label { color: var(--ink-2); font-size: 12px; line-height: 16px; }
/* motion: once in view, the badge, the approval, the meter and the lock settle */
.mk-anim .mk-std:not(.is-in) .mk-cert__ok, .mk-anim .mk-std:not(.is-in) .mk-ok__yes { opacity: 0; translate: 0 8px; }
.mk-anim .mk-std:not(.is-in) .mk-meter__fill { inset-inline-end: 100%; }
.mk-anim .mk-std:not(.is-in) .mk-room2__lock { translate: -50% -8px; opacity: 0; }
.mk-anim .mk-std .mk-cert__ok, .mk-anim .mk-std .mk-ok__yes, .mk-anim .mk-std .mk-room2__lock { transition: opacity 480ms var(--mk-ease) 400ms, translate 560ms var(--mk-spring) 400ms; }
.mk-anim .mk-std .mk-meter__fill { transition: inset-inline-end 1100ms var(--mk-ease) 300ms; }

/* 3 · what Fraction solves: two cards with different pictures (Milan, 20 Oct), each Without Fraction against With Fraction, then a small
   "For clients" / "For experts" line, the title and one line with both. Each picture plays once in view (.is-in from mk-motion); without motion it
   shows its end state. */
.mk-h3 { margin: 0; max-width: 28ch; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 28px; }
.mk-gap__cards { display: grid; gap: 16px; }
.mk-gap__card { container: mk-gapcard / inline-size; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg); }
.mk-gap__hg { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.mk-gap__for { margin: 0; color: var(--accent); font-size: 14px; line-height: 20px; font-weight: 600; }
.mk-gap__text { margin: 0; color: var(--ink-2); max-width: 52ch; }
.mk-vs__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mk-vs__tag { display: inline-flex; align-items: center; gap: 4px; flex: none; align-self: flex-start; justify-self: start; white-space: nowrap; padding: 4px 10px; border-radius: 999px;
  background: var(--mk-grey); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; }
.mk-vs__tag--with { background: var(--accent); color: var(--accent-ink); }

/* clients: when action lands on a line from now to three days. Without: a dashed wait across the whole line. With: a short accent stroke at
   the very start, then the three steps that happened inside it. */
.mk-clock { flex: 1; display: grid; grid-template-rows: auto 1fr 1fr; gap: 8px; margin-bottom: 12px; padding: 8px; border-radius: 16px; background: var(--mk-grey); }
.mk-clock__axis { display: flex; justify-content: space-between; padding: 4px 12px 0; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-clock__lane { --dur: 3000ms; --to: calc(100% - 32px); display: grid; align-content: center; gap: 16px; padding: 16px 12px; border-radius: 12px; background: var(--bg); }
.mk-clock__lane--with { --dur: 600ms; }
.mk-clock__time { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 24px; white-space: nowrap; color: var(--ink-2);
  transition: opacity 240ms var(--mk-ease) calc(400ms + var(--dur)); }
.mk-clock__lane--with .mk-clock__time { color: var(--accent); }
.mk-clock__track { position: relative; min-height: 32px; }
.mk-clock__bar { position: absolute; left: 0; top: 15px; width: var(--to); height: 2px; transform-origin: 0 50%; transition: scale var(--dur) linear 400ms;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 6px, transparent 6px 10px); }
.mk-clock__start, .mk-clock__end { position: absolute; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; }
.mk-clock__start { left: 0; background: var(--ink); color: var(--bg); }
.mk-clock__end { left: var(--to); background: var(--ink); color: var(--bg); transition: opacity 240ms var(--mk-ease) calc(400ms + var(--dur)), scale 360ms var(--mk-spring) calc(400ms + var(--dur)); }
.mk-clock__wait { position: absolute; left: 50%; top: 4px; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; background: var(--bg);
  color: var(--ink-2); font-size: 12px; line-height: 24px; white-space: nowrap; }
/* With: the four steps side by side from Now, joined by a short accent line that draws in, each step lighting as it passes */
.mk-clock__chain { position: relative; width: fit-content; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 56px); gap: 4px; }
.mk-clock__chain::before { content: ""; position: absolute; left: 28px; right: 28px; top: 14px; height: 4px; border-radius: 4px; background: var(--accent);
  transform-origin: 0 50%; transition: scale var(--dur) linear 400ms; }
.mk-clock__chain li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; color: var(--ink); font-size: 12px; line-height: 16px;
  text-align: center; transition: opacity 200ms var(--mk-ease) calc(400ms + var(--dur) * var(--n, 0) / 3); }
.mk-clock__chain li:nth-child(2) { --n: 1; }
.mk-clock__chain li:nth-child(3) { --n: 2; }
.mk-clock__chain li:nth-child(4) { --n: 3; }
.mk-clock__chain li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.mk-clock__chain .mk-clock__ai { border: 1px solid var(--accent); background: var(--bg); }
.mk-clock__chain :is(.mk-clock__you, .mk-clock__done) { background: var(--ink); color: var(--bg); }
.mk-clock__chain .modelicon { width: 16px; height: 16px; }
/* Find an expert's chain (Milan, 20 Oct): three steps across the whole lane; Home keeps its four */
.mk-clock__chain.mk-clock__chain--fill { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* the first and last circles sit on the lane's edges, like the Without lane's start and end (Milan, 20 Oct), so the line runs edge to edge */
.mk-clock__chain.mk-clock__chain--fill::before { left: 16px; right: 16px; }
.mk-clock__chain--fill li { text-wrap: balance; }
.mk-clock__chain--fill li:first-child { align-items: flex-start; text-align: left; }
.mk-clock__chain--fill li:last-child { align-items: flex-end; text-align: right; }
@media (min-width: 768px) { .mk-clock__chain--fill li { font-size: 14px; line-height: 20px; } }
.mk-anim .mk-clock:not(.is-in) .mk-clock__bar { scale: 0 1; }
.mk-anim .mk-clock:not(.is-in) :is(.mk-clock__end, .mk-clock__time, .mk-clock__chain li:not(:first-child)) { opacity: 0; }
.mk-anim .mk-clock:not(.is-in) .mk-clock__chain::before { scale: 0 1; }
.mk-anim .mk-clock:not(.is-in) .mk-clock__end { scale: 0.6; }

/* experts: one expert in the middle, their clients around. Without: three, every line theirs. With: twelve, through their AI (the accent ring);
   under each, how many clients and how many of their hours. The two sides sit next to each other once the picture is wide enough. */
.mk-reach { display: grid; gap: 8px; margin-bottom: 12px; padding: 8px; border-radius: 16px; background: var(--mk-grey); }
.mk-reach__side { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "tag tag" "hub bars" "hub line"; align-content: start; gap: 12px 16px;
  padding: 16px 12px; border-radius: 12px; background: var(--bg); }
.mk-reach__side > .mk-vs__tag { grid-area: tag; }
.mk-reach__hub { grid-area: hub; position: relative; width: 112px; aspect-ratio: 1; align-self: center; }
.mk-reach__spoke { position: absolute; left: 50%; top: 50%; width: calc(50% - 8px); height: 2px; margin-top: -1px; transform-origin: 0 50%; background: var(--ink-3);
  rotate: calc(var(--i) * 360deg / var(--count) - 90deg); transition: scale 360ms var(--mk-ease) calc(400ms + var(--i) * 60ms); }
.mk-reach__client { position: absolute; right: -8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 999px; background: var(--ink); }
.mk-reach__side--with .mk-reach__spoke { background: color-mix(in oklab, var(--accent) 50%, transparent); }
.mk-reach__side--with .mk-reach__client { background: var(--accent); }
.mk-reach__me { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--bg); }
.mk-reach__side--with .mk-reach__me { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent); }
.mk-reach__bars { grid-area: bars; display: grid; gap: 8px; margin: 0; align-self: end; }
.mk-reach__bars > div { display: grid; gap: 4px; }
.mk-reach__bars dt { color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-reach__bars dd { margin: 0; height: 8px; border-radius: 8px; background: var(--mk-grey); overflow: hidden; }
.mk-reach__bars dd > span { display: block; height: 100%; width: var(--v); border-radius: 8px; background: var(--ink); transition: width 900ms var(--mk-ease) 400ms; }
.mk-reach__side--with .mk-reach__bars dd > span { background: var(--accent); }
.mk-reach__line { grid-area: line; margin: 0; color: var(--ink); font-size: 12px; line-height: 16px; }
.mk-anim .mk-reach:not(.is-in) .mk-reach__side--with .mk-reach__spoke { scale: 0 1; }
.mk-anim .mk-reach:not(.is-in) .mk-reach__bars dd > span { width: 0; }
@container mk-gapcard (min-width: 480px) {
  .mk-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-reach__side { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "hub" "bars" "line"; gap: 16px; }
  .mk-reach__hub { width: 128px; justify-self: center; }
}

/* 4 · how the two sides meet: standard tabs. A row of three tabs over the panel on a phone; a column of tabs left of the panel on a desktop. */
.mk-tabs { display: grid; gap: 16px; }
.mk-tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg-2); }
.mk-tabs__tab { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; padding: 12px 8px; border: 0; border-radius: 16px;
  background: transparent; color: var(--ink-2); text-align: center; cursor: pointer; transition: background-color 280ms var(--mk-ease), color 280ms var(--mk-ease); }
/* hover (Milan, 20 Oct): a shade darker than the band's fill, no paper and no outline */
.mk-tabs__tab:not([aria-selected="true"]):hover { background: color-mix(in oklab, var(--bg) 89%, var(--ink)); color: var(--ink); }
.mk-tabs__tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.mk-tabs__n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 999px; border: 1px solid currentColor; font-size: 14px; font-weight: 600; }
.mk-tabs__t { display: flex; flex-direction: column; gap: 4px; }
.mk-tabs__t strong { font-size: 14px; line-height: 20px; font-weight: 600; }
.mk-tabs__t > span { display: none; }
/* every panel is the same height (Milan, 20 Oct): all three share one grid cell, so the box is the tallest one's height; the hidden ones keep
   their place but are not seen, focused or read */
.mk-tabs__panels { display: grid; }
.mk-tabs__panel, .mk-tabs__panel[hidden] { grid-area: 1 / 1; display: block; }
.mk-tabs__panel[hidden] { visibility: hidden; }
.mk-tabs__panel { padding: 16px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-2); }
.mk-tabs__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-tabs__cap { margin: 0 0 16px; color: var(--ink-2); }
.mk-room { display: flex; flex-direction: column; gap: 16px; }
.mk-room__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-room__head .mk-path__ais { margin-left: 0; }
.mk-room__head .mk-path__ai { width: 28px; height: 28px; border-color: var(--bg-2); background: var(--bg); }
.mk-room__head .mk-path__ai .modelicon { width: 14px; height: 14px; }
.mk-room__past { opacity: 0.5; }
.mk-msg { display: flex; gap: 12px; align-items: flex-start; }
.mk-msg__av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--bg); color: var(--accent); }
.mk-msg__av .modelicon { width: 18px; height: 18px; }
.mk-msg__body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 16px; border-radius: 4px 16px 16px 16px; background: var(--bg); }
.mk-msg--twin .mk-msg__body { background: color-mix(in oklab, var(--accent) 8%, var(--bg)); }
.mk-msg__body b { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
.mk-msg__body p { margin: 0; color: var(--ink); max-width: 56ch; }
.mk-msg__file { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-room__status { display: flex; align-items: center; gap: 8px; padding-left: 48px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-room__status--signed { color: var(--accent); font-weight: 600; font-size: 16px; }
.mk-room__typing { display: inline-flex; gap: 4px; }
.mk-room__typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-3); }
.mk-anim .mk-room__typing i { animation: mk-type 1.2s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 160ms); }
.mk-room__typing i:nth-child(2) { --n: 1; }
.mk-room__typing i:nth-child(3) { --n: 2; }
@keyframes mk-type { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
/* a shown panel's lines ease in, one after another */
.mk-anim .mk-tabs__panel:not([hidden]) .mk-room > * { animation: mk-in 480ms var(--mk-ease) both; }
.mk-anim .mk-tabs__panel:not([hidden]) .mk-room > :nth-child(2) { animation-delay: 80ms; }
.mk-anim .mk-tabs__panel:not([hidden]) .mk-room > :nth-child(3) { animation-delay: 220ms; }
.mk-anim .mk-tabs__panel:not([hidden]) .mk-room > :nth-child(4) { animation-delay: 420ms; }
@keyframes mk-in { from { opacity: 0; translate: 0 8px; } }
/* step 3: the answer as a document; the signature writes itself when the tab opens */
.mk-doc { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); color: var(--ink); }
.mk-doc p { margin: 0; max-width: 56ch; }
.mk-doc__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mk-doc__head strong { font-family: var(--display); font-size: 18px; line-height: 24px; font-weight: 600; }
.mk-doc__head span { color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-doc__sign { display: flex; flex-direction: column; gap: 4px; align-self: flex-end; min-width: 200px; margin-top: 8px; }
.mk-doc__sign .mk-sig { width: 200px; height: 64px; border-bottom: 1px solid var(--ink-3); color: var(--ink); }
.mk-doc__by { display: flex; flex-direction: column; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-doc__by strong { color: var(--ink); }
.mk-anim .mk-tabs__panel .mk-doc .mk-sig path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mk-anim .mk-tabs__panel:not([hidden]) .mk-doc .mk-sig path { animation: mk-sign 900ms var(--mk-ease) forwards; animation-delay: calc(500ms + var(--d, 0ms)); }

/* 5 · why both sides trust it: a lawyer and an HR expert side by side, never swapping; the checks beside them */
.mk-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-pair .mk-ph { grid-column: 1 / -1; }
.mk-pair__card { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg); overflow: hidden; }
.mk-pair__photo { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.mk-pair__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-pair__id { display: flex; flex-direction: column; gap: 4px; padding: 12px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-pair__id strong { font-family: var(--display); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); }
.mk-pair__role { align-self: flex-start; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; background: var(--mk-grey); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; }
.mk-pair__id > span:nth-of-type(3) { display: none; }

/* 6 · Testimonials Columns: three columns scrolling at their own speeds; a hovered column pauses */
.mk-cols__set { display: none; grid-template-columns: minmax(0, 1fr); gap: 20px; height: 640px; overflow: hidden; border-radius: 20px; }
.mk-cols__set.is-on { display: grid; }
.mk-cols__col:nth-child(n + 2) { display: none; }
.mk-cols__track { list-style: none; margin: 0; padding: 0 0 20px; display: flex; flex-direction: column; gap: 20px; }
.mk-anim .mk-cols.is-live .mk-cols__col { animation: mk-cols-scroll var(--t) linear infinite; }
.mk-anim .mk-cols.is-live .mk-cols__col:hover { animation-play-state: paused; }
@keyframes mk-cols-scroll { to { translate: 0 -50%; } }
.mk-say { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 240px; padding: 28px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg-2); }
.mk-say p { margin: 0; color: var(--ink); font-size: 18px; line-height: 28px; }
.mk-say__who { display: flex; align-items: center; gap: 12px; }
.mk-say__who > span:last-child { display: flex; flex-direction: column; }
.mk-say__who strong { font-size: 16px; line-height: 24px; }
.mk-say__who small { color: var(--ink-2); font-size: 14px; line-height: 20px; }

/* 7 · Meet Daniel: the LDU homepage's section on a paper band; the portrait card (dark, so its caption reads over the photo) left with his name and
   chips over the lower edge of the photo, the story and numbers right */
.mk-dan__in { display: grid; gap: 48px; align-items: center; }
.mk-dan__card { position: relative; isolation: isolate; width: 100%; max-width: 448px; aspect-ratio: 4 / 5; margin: 0 auto; overflow: hidden; border-radius: 24px;
  background: var(--bg-2); box-shadow: 0 24px 64px -24px color-mix(in oklab, var(--bg) 80%, transparent); }
.mk-dan__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.mk-dan__card::after { content: ""; position: absolute; inset: 36% 0 0 0; background: linear-gradient(to top, color-mix(in oklab, var(--bg) 96%, transparent), color-mix(in oklab, var(--bg) 82%, transparent) 45%, transparent); }
.mk-dan__cap { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 24px; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-dan__cap strong { font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.mk-dan__cap > span { text-wrap: balance; }
.mk-dan__chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mk-dan__chips li { padding: 4px 12px; border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent); border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 10%, transparent); color: var(--ink); font-weight: 500; }
.mk-dan__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.mk-dan__stats { display: flex; gap: 40px; margin: 12px 0 16px; }
.mk-dan__stats > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.mk-dan__stats dd { margin: 0; font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.mk-dan__stats dt { max-width: 10rem; color: var(--ink-2); font-size: 12px; line-height: 16px; }

/* 8 · the universal close (Milan, 20 Oct: dark, one with the footer, more faces): centred title, line, the page's CTA (filled lilac) and three
   true lines, on the hero's colours turned upside down: a lighter ink at the top into --bg at the bottom, where the footer carries on, and lilac where
   the fibres meet. Experts and clients sit on the fibres at the edges; a phone shows them as one row over the title. */
.mk-start { overflow: hidden; isolation: isolate; }
/* taller than every other band, so the close stands out (Milan, 20 Oct); the bottom is shorter because the footer continues it */
.mk-page .mk-band.mk-start[data-theme] { padding: 96px 0 72px;
  background:
    radial-gradient(45% 55% at 50% 50%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 88%, var(--ink)), var(--bg) 85%); }
.mk-start__fibres { top: 0; left: 50%; width: max(100%, 960px); height: 100%; translate: -50% 0; z-index: -1; color: var(--accent); opacity: 0.2;
  -webkit-mask: radial-gradient(50% 70% at 50% 50%, transparent 55%, black 85%); mask: radial-gradient(50% 70% at 50% 50%, transparent 55%, black 85%); }
/* the faces: one row above the title at every width (Milan, 20 Oct), slightly overlapping, no ring and no AI logo; seven on a phone. Small (32, 36,
   40px; Milan, 20 Oct: "still too large"), so they sit under the title instead of competing with it */
.mk-start__faces { display: flex; justify-content: center; margin: 0 0 12px; }
.mk-start__faces .mk-face { width: 32px; height: 32px; }
.mk-start__faces .mk-face + .mk-face { margin-left: -6px; }
.mk-start__faces .mk-face:nth-child(n+8) { display: none; }
@media (min-width: 768px) {
  .mk-start__faces .mk-face { width: 36px; height: 36px; }
  .mk-start__faces .mk-face:nth-child(n+8) { display: block; }
}
@media (min-width: 1024px) {
  .mk-start__faces .mk-face { width: 40px; height: 40px; }
}
.mk-start__in { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.mk-start__in .mk-h2, .mk-start__in .mk-lede { margin-inline: auto; }
.mk-start__in .mk-go { margin-top: 8px; }
.mk-start__ticks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; color: var(--ink-2); }
.mk-start__ticks li { display: inline-flex; align-items: center; gap: 8px; }
.mk-start__ticks .icon { color: var(--accent); }

/* ═══ Contact (Milan, 20 Oct): the side pages' dark hero, the form on paper, the shared close ═══ */

/* the hero has no picture, so the fibres sit lower and the band is shorter */
.mk-page .mk-hero--contact { padding-bottom: 64px; }
.mk-hero--contact > .mk-fibres { height: 80%; }

/* no fixed Get started dock on this page: it would cover the form while someone types, and Send message is the page's one action */
.mk-page:is(.marketing-contact, .marketing-send_contact) { padding-bottom: 0; }
:is(.marketing-contact, .marketing-send_contact) .mk-dock { display: none; }
/* a send lands on #contact-form: clear of the fixed bar */
.mk-contact { scroll-margin-top: 48px; }

/* one centred column, the form's own edge shared by the title, the cards and the fields */
/* 720 px of content plus the wrap's own padding, so at 768 the form lands on the page edge */
.mk-contact__in { display: flex; flex-direction: column; gap: 32px; max-width: calc(720px + 32px); }
.mk-form { display: flex; flex-direction: column; gap: 24px; }
.mk-form__label { display: flex; align-items: baseline; gap: 8px; padding: 0; margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.mk-form .field { gap: 0; }
.mk-form .input { height: 44px; padding: 0 12px; font-size: 16px; }
.mk-form .textarea { min-height: 160px; padding: 12px; font-size: 16px; line-height: 24px; resize: vertical; }
.mk-form__opt { font-weight: 400; color: var(--ink-2); }
.mk-form__row { display: grid; gap: 24px; }
.mk-form__topics { border: 0; margin: 0; padding: 0; min-width: 0; }

/* what it is about: three cards, one picked. Picked = an ink edge and an ink icon disc (ink is the primary on paper); hover is a colour change only */
.mk-topics { display: grid; gap: 12px; }
.mk-topic { position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--bg); cursor: pointer; transition: border-color var(--dur) ease, background-color var(--dur) ease; }
.mk-topic:hover { border-color: var(--ink-3); }
.mk-topic:has(:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mk-topic:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-topic__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mk-topic__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink);
  transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease; }
.mk-topic:has(:checked) .mk-topic__ic { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mk-topic__t { display: flex; flex-direction: column; min-width: 0; }
.mk-topic__t strong { font-weight: 600; }
.mk-topic__t span { font-size: 14px; line-height: 20px; color: var(--ink-2); text-wrap: pretty; }

/* errors: ink words with a lilac mark and a lilac edge on the field (the landing has no red) */
.mk-form__err { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.mk-form__err .icon, .mk-form__sum > .icon { color: var(--accent); flex: none; }
.mk-form [aria-invalid=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mk-form__sum { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--accent); border-radius: var(--r-2); }
/* it takes focus after a refused send; its own lilac edge already marks it, so no second ring */
.mk-form__sum:focus { outline: none; }
.mk-form__sum p { margin: 0; }
.mk-form__sum ul { margin: 8px 0 0; padding-left: 20px; }
.mk-form__sum a { color: var(--ink); }
.mk-form__sum a:hover { color: var(--accent); }

.mk-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mk-form__send { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.mk-form__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }

/* after a send: the thank-you takes the form's place */
.mk-contact__done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mk-contact__tick { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.mk-contact__next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 8px; }
.mk-contact__again { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: 4px; transition: color var(--dur) ease; }
.mk-contact__again:hover { color: var(--accent); }

@media (min-width: 640px) {
  .mk-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-form__send { flex-direction: row; align-items: center; gap: 24px; }
}
@media (min-width: 768px) {
  .mk-page .mk-hero--contact { padding-bottom: 96px; }
  .mk-contact__in { margin-inline: auto; max-width: calc(720px + 64px); }
  .mk-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-topic { flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-topic, .mk-topic__ic, .mk-contact__again { transition: none; }
}

/* ═══ Be an expert (round 2; Milan, 20 Oct: distinct from Home, "why switch from how I work today?") ═══ */

/* the side heroes' CTA row: the filled lilac button and the risk line under it */
.mk-hero__act { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 8px; }
@media (min-width: 768px) {
  .mk-hero__act { align-items: center; }
  .mk-hero__act .mk-risk { justify-content: center; }
}

/* 1 · the hero's picture: client requests, the AI you already use, and what changes for you (earned up, hours down). One quiet loop on a 4 s step,
   one thing at a time: a new request arrives (from 3.2 s), a dot carries it into your AI (0 to 0.8 s), the status moves on (0.8 s), a dot carries it
   out (1.6 s). The stack and the status run 16 s for four steps. Without motion: three requests, "Draft ready for you", the chart drawn. */
.mk-page .mk-flow { display: grid; justify-items: center; gap: 12px; max-width: 1040px; margin: 48px auto 0; }
.mk-flow__col { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; }
.mk-flow__label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-flow__label .icon { color: var(--accent); }
.mk-flow__stack { position: relative; height: 208px; margin: 0; padding: 0; list-style: none; }
.mk-flow__req { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px 0 12px; border: 1px solid var(--line-2);
  border-radius: 16px; background: var(--bg-2); translate: 0 calc(var(--n) * 72px); }
.mk-flow__req:nth-child(4) { opacity: 0; }
.mk-flow__req .mk-xcl__ai { border-color: var(--bg-2); }
.mk-flow__q { display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-flow__q > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-flow__q strong { color: var(--ink); font-weight: 600; }
.mk-anim .mk-flow__req { animation: mk-flow-stack 16s var(--mk-ease) infinite; animation-delay: calc(var(--n) * -4s - 0.8s); }
@keyframes mk-flow-stack {
  0% { translate: -24px 0; opacity: 0; }
  5%, 25% { translate: 0 0; opacity: 1; }
  30%, 50% { translate: 0 72px; opacity: 1; }
  55%, 75% { translate: 0 144px; opacity: 1; }
  80%, 100% { translate: 48px 144px; opacity: 0; }
}
.mk-flow__pipe { position: relative; width: 2px; height: 32px; background: var(--line-2); }
/* the dot travels by transform only: the <i> covers the pipe and moves its own length along it, the dot is drawn at its start */
.mk-flow__pipe i { position: absolute; inset: 0; opacity: 0; }
.mk-flow__pipe i::before { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.mk-anim .mk-flow__pipe i { animation: mk-flow-dot 4s var(--mk-ease) infinite; }
.mk-anim .mk-flow__pipe--out i { animation-delay: 1.6s; }
@keyframes mk-flow-dot { 0% { translate: 0 0; opacity: 0; } 4%, 16% { opacity: 1; } 20%, 100% { translate: 0 100%; opacity: 0; } }
@keyframes mk-flow-dot-x { 0% { translate: 0 0; opacity: 0; } 4%, 16% { opacity: 1; } 20%, 100% { translate: 100% 0; opacity: 0; } }
.mk-flow:not(.is-live) :is(.mk-flow__req, .mk-flow__pipe i, .mk-flow__status > span) { animation-play-state: paused; }
.mk-flow__ai { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 260px; padding: 24px 20px; text-align: center;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line-2)); border-radius: 24px; background: color-mix(in oklab, var(--bg-2) 88%, var(--accent)); }
.mk-flow__logos { display: flex; margin-bottom: 8px; }
.mk-flow__logos > span { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--bg-2); border-radius: 999px; background: var(--ink); color: var(--bg); }
.mk-flow__logos > span + span { margin-left: -8px; }
.mk-flow__logos .modelicon { width: 20px; height: 20px; }
.mk-flow__ai strong { color: var(--ink); font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 600; }
.mk-flow__sub { color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-flow__status { display: grid; justify-items: center; margin-top: 12px; }
.mk-flow__status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); font-size: 14px; line-height: 20px; font-weight: 600; }
.mk-flow__status > span:not(:last-child) { opacity: 0; }
.mk-anim .mk-flow__status > span { animation: mk-flow-status 16s var(--mk-ease) infinite; animation-delay: calc(var(--k) * 4s - 15.2s); }
@keyframes mk-flow-status { 0% { opacity: 0; translate: 0 6px; } 3%, 24% { opacity: 1; translate: 0 0; } 27%, 100% { opacity: 0; translate: 0 -6px; } }
.mk-flow__plot { position: relative; padding: 32px 16px 16px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); }
.mk-flow__plot > svg { display: block; width: 100%; height: auto; overflow: visible; }
.mk-flow__plot path { fill: none; }
.mk-flow__grid { stroke: var(--line); stroke-width: 1; }
.mk-flow__mark { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 4 4; }
.mk-flow__hours, .mk-flow__earn { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; transition: stroke-dashoffset 1600ms var(--mk-ease) 400ms; }
.mk-flow__hours { stroke: var(--ink-2); }
.mk-flow__earn { stroke: var(--accent); }
.mk-anim .mk-flow:not(.is-in) :is(.mk-flow__hours, .mk-flow__earn) { stroke-dashoffset: 1; }
.mk-flow__dot { transition: opacity 320ms var(--mk-ease) 1800ms, scale 420ms var(--mk-spring) 1800ms; transform-box: fill-box; transform-origin: center; }
.mk-flow__dot--earn { fill: var(--accent); }
.mk-flow__dot--hours { fill: var(--ink-2); }
.mk-anim .mk-flow:not(.is-in) .mk-flow__dot { opacity: 0; scale: 0.4; }
.mk-flow__join { position: absolute; top: 8px; left: calc(16px + (100% - 32px) * 0.35); translate: -50% 0; color: var(--ink-2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.mk-flow__legend { gap: 16px; }
.mk-flow__legend > span { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.mk-flow__legend .mk-flow__end--earn, .mk-flow__legend .mk-flow__end--earn .icon { color: var(--accent); }
.mk-flow__legend .mk-flow__end--hours, .mk-flow__legend .mk-flow__end--hours .icon { color: var(--ink-2); }
.mk-flow__axis { display: flex; justify-content: space-between; margin: 0; padding: 0 4px; color: var(--ink-2); font-size: 12px; line-height: 16px; }
/* a phone (Milan, 20 Oct: the hero picture was too tall): two requests showing, your AI as one row, shorter joins */
@media (max-width: 1023px) {
  .mk-page .mk-flow { margin-top: 40px; }
  .mk-flow__col { max-width: none; }
  .mk-flow__stack { height: 136px; overflow: hidden; }
  .mk-flow__pipe { height: 16px; }
  .mk-flow__ai { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 12px; max-width: 340px; padding: 16px; border-radius: 20px; text-align: left; }
  .mk-flow__logos { grid-row: span 2; margin: 0; }
  .mk-flow__logos > span { width: 32px; height: 32px; }
  .mk-flow__logos .modelicon { width: 16px; height: 16px; }
  .mk-flow__ai strong { font-size: 18px; line-height: 24px; }
  .mk-flow__status { grid-column: 1 / -1; justify-items: start; margin-top: 12px; }
  .mk-flow__plot { padding: 28px 12px 12px; }
}
/* tablet (Milan, 20 Oct: "more mobile responsive"): requests and your AI on the left, the chart beside them, joined by the out line, instead of one
   narrow column down the middle */
@media (min-width: 640px) and (max-width: 1023px) {
  .mk-page .mk-flow { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); grid-template-areas: "req . chart" "pin . chart" "ai out chart";
    align-items: end; justify-items: stretch; gap: 0; }
  .mk-flow > .mk-flow__col:first-child { grid-area: req; }
  .mk-flow > .mk-flow__pipe:not(.mk-flow__pipe--out) { grid-area: pin; justify-self: center; margin: 4px 0; }
  .mk-flow__ai { grid-area: ai; max-width: none; }
  .mk-flow__pipe--out { grid-area: out; align-self: center; width: 100%; height: 2px; }
  .mk-flow__pipe--out i::before { top: -3px; left: -4px; }
  .mk-anim .mk-flow__pipe--out i { animation-name: mk-flow-dot-x; }
  .mk-flow__chart { grid-area: chart; align-self: center; }
}
@media (min-width: 1024px) {
  .mk-page .mk-flow { grid-template-columns: minmax(0, 1fr) 56px 260px 56px minmax(0, 1fr); align-items: center; gap: 0; margin-top: 64px; }
  .mk-flow__pipe { width: 100%; height: 2px; }
  .mk-flow__pipe i::before { top: -3px; left: -4px; }
  .mk-anim .mk-flow__pipe i { animation-name: mk-flow-dot-x; }
}

/* a client: their photo in a circle (an AI's logo on Find an expert), their AI's logo on its corner */
.mk-page .mk-xcl { position: relative; display: grid; place-items: center; overflow: visible; background: color-mix(in oklab, var(--ink) 14%, var(--bg-2)); color: var(--ink);
  font-size: 14px; line-height: 20px; font-weight: 600; }
.mk-xcl__ai { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--bg-2); border-radius: 999px; background: var(--bg); }
.mk-xcl__ai .modelicon { width: 12px; height: 12px; }
.mk-xcl > img { border-radius: 999px; }
.mk-xcl--ai .modelicon { width: 20px; height: 20px; }

/* 2 · get your week back: copy on the left, Monday's to-do list on the right. Once in view each groundwork task greys out and takes a lilac "Your AI"
   tag, one after another; what is left for you stays in ink. The base rules are the end state (no motion shows the cleared list). */
.mk-page .mk-todo { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; margin: 0; }
.mk-todo__card { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-2); }
.mk-todo__head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-todo__head .icon { color: var(--accent); }
.mk-todo__head strong { color: var(--ink); font-size: 16px; line-height: 24px; }
.mk-todo__head span { margin-left: auto; }
.mk-todo__list { margin: 0; padding: 0; list-style: none; }
.mk-todo__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.mk-todo__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--mk-grey); color: var(--ink-2); }
.mk-todo__row:not(.mk-todo__row--ai) .mk-todo__ic { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.mk-todo__t { min-width: 0; color: var(--ink); text-decoration: line-through transparent; }
.mk-todo__end { display: grid; justify-items: end; }
.mk-todo__end > * { grid-area: 1 / 1; }
.mk-todo__time { color: var(--ink-2); font-size: 14px; line-height: 20px; white-space: nowrap; }
.mk-todo__row:not(.mk-todo__row--ai) .mk-todo__time { color: var(--ink); font-weight: 600; }
.mk-todo__tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.mk-todo__row--ai .mk-todo__t { color: var(--ink-2); text-decoration-color: var(--ink-3); }
.mk-todo__row--ai .mk-todo__ic { opacity: 0.55; }
.mk-todo__row--ai .mk-todo__time { opacity: 0; }
.mk-todo__row--ai :is(.mk-todo__t, .mk-todo__ic, .mk-todo__time, .mk-todo__tag) {
  transition: color 360ms var(--mk-ease) var(--d), text-decoration-color 360ms var(--mk-ease) var(--d), opacity 320ms var(--mk-ease) var(--d), translate 420ms var(--mk-spring) var(--d); }
.mk-todo__row { --d: calc(600ms + var(--i) * 420ms); }
.mk-anim .mk-todo:not(.is-in) .mk-todo__row--ai .mk-todo__t { color: var(--ink); text-decoration-color: transparent; }
.mk-anim .mk-todo:not(.is-in) .mk-todo__row--ai .mk-todo__ic { opacity: 1; }
.mk-anim .mk-todo:not(.is-in) .mk-todo__row--ai .mk-todo__time { opacity: 1; }
.mk-anim .mk-todo:not(.is-in) .mk-todo__tag { opacity: 0; translate: 12px 0; }
.mk-todo__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-todo__total { display: flex; align-items: baseline; gap: 12px; }
.mk-todo__total s { color: var(--ink-2); font-size: 16px; text-decoration-color: var(--ink-3); transition: text-decoration-color 360ms var(--mk-ease) 2400ms; }
.mk-todo__total strong { color: var(--accent); font-family: var(--display); font-size: 28px; line-height: 36px; font-weight: 600; transition: opacity 420ms var(--mk-ease) 2500ms; }
.mk-anim .mk-todo:not(.is-in) .mk-todo__total s { text-decoration-color: transparent; }
.mk-anim .mk-todo:not(.is-in) .mk-todo__total strong { opacity: 0; }
/* a phone: the task gets the row's width, its time or "Your AI" tag sits under it */
@media (max-width: 559px) {
  .mk-todo__card { padding: 16px; }
  .mk-todo__row { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "ic t" "ic end"; row-gap: 4px; align-items: start; }
  .mk-todo__ic { grid-area: ic; }
  .mk-todo__t { grid-area: t; }
  .mk-todo__end { grid-area: end; justify-items: start; }
  .mk-todo__total strong { font-size: 24px; line-height: 32px; }
}
/* the to-do list needs the width: copy above it until 1024, then beside it */
.mk-split.mk-week__in { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .mk-split.mk-week__in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
}

/* 3 · what your AI takes off your plate: three rows, copy beside its picture, a hairline between them; no numbers and no rail (Milan, 20 Oct). Each
   picture is its own shape and plays as it comes into view. */
@property --mk-docs { syntax: "<integer>"; initial-value: 4; inherits: false; }
.mk-plate__rows { --pad: 32px; margin: 0; padding: 0; list-style: none; }
.mk-plate__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: var(--pad) 0; }
.mk-plate__row:first-child { padding-top: 0; }
.mk-plate__row:last-child { padding-bottom: 0; }
.mk-plate__row + .mk-plate__row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.mk-plate__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 2px; }
.mk-plate__was, .mk-plate__now { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ink-2); }
.mk-plate__was .icon, .mk-plate__now .icon { flex: none; margin-top: 4px; }
/* brand colours only (Milan, 20 Oct: no red and green): today's way quiet, your AI's way in lilac */
.mk-plate__was .icon { color: var(--ink-3); }
.mk-plate__now { color: var(--ink); }
.mk-plate__now .icon { color: var(--accent); }
.mk-plate__art { width: 100%; max-width: 560px; }
.mk-chatv, .mk-files, .mk-draftv { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg-2); }
.mk-plate__art :is(.mk-chatv, .mk-files, .mk-draftv) > * { transition: opacity 360ms var(--mk-ease) var(--d, 300ms), translate 420ms var(--mk-ease) var(--d, 300ms); }
/* a short chat: the client's AI asks, your AI answers, the client is added */
.mk-chatv__msg { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.mk-chatv__msg > span:not(.mk-chatv__av) { max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--mk-grey); color: var(--ink); font-size: 14px; line-height: 20px; }
.mk-chatv__msg--you { justify-content: flex-end; --d: 900ms; }
.mk-chatv__msg--you > span:not(.mk-chatv__av) { border-radius: 16px 16px 4px 16px; background: color-mix(in oklab, var(--accent) 14%, var(--bg-2)); }
.mk-chatv__av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 999px; background: var(--mk-grey); }
.mk-chatv__av--you { background: var(--accent); color: var(--accent-ink); }
.mk-chatv__added { --d: 1500ms; display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 8px 12px 8px 8px; border: 1px solid var(--line-2); border-radius: 14px;
  color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.mk-chatv__added b { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--accent); font-weight: 600; white-space: nowrap; }
/* documents dropping into the client's folder, the count going up */
.mk-files__docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-files__docs li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg);
  color: var(--ink-2); font-size: 12px; line-height: 16px; text-align: center;
  transition: opacity 320ms var(--mk-ease) calc(300ms + var(--i) * 320ms), translate 480ms var(--mk-spring) calc(300ms + var(--i) * 320ms); }
.mk-files__docs .icon { color: var(--accent); }
.mk-files__folder { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--mk-grey); color: var(--ink); }
.mk-files__folder .icon { color: var(--accent); }
.mk-files__n { margin-left: auto; color: var(--ink-2); font-size: 14px; line-height: 20px; white-space: nowrap; }
.mk-files__n b { color: var(--ink); font-size: 0; transition: --mk-docs 1300ms steps(4, end) 400ms; }
.mk-files__n b::before { counter-reset: mk-docs var(--mk-docs); content: counter(mk-docs); font-size: 16px; }
/* a draft writing itself, then ready for your sign-off */
.mk-draftv__head { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-draftv__head .icon { color: var(--accent); }
.mk-draftv__head strong { color: var(--ink); font-size: 16px; line-height: 24px; }
.mk-draftv__head span { margin-left: auto; }
.mk-draftv__lines { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.mk-draftv__lines i { display: block; width: var(--w); height: 8px; border-radius: 8px; background: color-mix(in oklab, var(--ink) 12%, var(--bg-2)); transform-origin: 0 50%;
  transition: scale 640ms var(--mk-ease) calc(300ms + var(--i) * 320ms); }
.mk-draftv__ready { --d: 2100ms; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 14px; background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent); font-size: 14px; line-height: 20px; font-weight: 600; }
.mk-draftv__ready span { margin-left: auto; color: var(--ink-2); font-weight: 400; white-space: nowrap; }
.mk-anim .mk-plate__row:not(.is-in) :is(.mk-chatv, .mk-draftv) > *:not(.mk-draftv__head, .mk-draftv__lines),
.mk-anim .mk-plate__row:not(.is-in) .mk-files__docs li { opacity: 0; translate: 0 -10px; }
.mk-anim .mk-plate__row:not(.is-in) .mk-draftv__lines i { scale: 0 1; }
.mk-anim .mk-plate__row:not(.is-in) .mk-files__n b { --mk-docs: 0; }
@media (min-width: 560px) {
  .mk-files__docs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-files__docs li { flex-direction: column; gap: 6px; padding: 12px 4px; text-align: center; }
}
@media (min-width: 1024px) {
  .mk-plate__rows { --pad: 48px; }
  .mk-plate__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 0 64px; }
  .mk-plate__art { justify-self: end; }
}

/* 4 · capacity: eight clients, the hours counting up against a 40-hour week. A registered number drives the bars (smooth, eased; Milan, 20 Oct: the
   integer-stepped bars were jerky) and a registered integer the count, on the same curve and time; it resets off screen and counts again when it
   comes back. Without motion: the totals. */
@property --mk-hrs { syntax: "<integer>"; initial-value: 0; inherits: true; }
@property --mk-p { syntax: "<number>"; initial-value: 0; inherits: true; }
.mk-page .mk-count { display: flex; flex-direction: column; gap: 8px; max-width: 880px; margin: 0 auto; }
.mk-count__card { display: flex; flex-direction: column; gap: 24px; padding: 24px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-2); }
.mk-count__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.mk-count__head strong { color: var(--ink); font-family: var(--display); font-size: 18px; line-height: 24px; font-weight: 600; }
.mk-count__faces { display: flex; }
.mk-count__faces .mk-face { border: 2px solid var(--bg-2); }
.mk-count__faces .mk-face + .mk-face { margin-left: -8px; }
.mk-count__rows { position: relative; display: flex; flex-direction: column; gap: 24px; padding-top: 28px; }
.mk-count__week { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-3); }
.mk-count__week span { position: absolute; top: 0; left: 0; translate: -50% 0; padding: 0 8px; background: var(--bg-2); color: var(--ink-2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.mk-count__row { --mk-hrs: var(--to); --mk-p: var(--to); --dur-c: calc(800ms + var(--to) * 20ms); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "bar bar" "note note";
  gap: 8px 12px; transition: --mk-hrs var(--dur-c) var(--mk-ease) 300ms, --mk-p var(--dur-c) var(--mk-ease) 300ms; }
.mk-count__name { grid-area: name; align-self: end; color: var(--ink); font-weight: 600; }
.mk-count__n { grid-area: n; counter-reset: mk-hrs var(--mk-hrs); color: var(--ink); font-family: var(--display); font-size: 32px; line-height: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-count__n::before { content: counter(mk-hrs); }
.mk-count__row--with .mk-count__n { color: var(--accent); }
.mk-count__bar { grid-area: bar; position: relative; height: 16px; overflow: hidden; border-radius: 999px; background: var(--mk-grey); }
.mk-count__fill, .mk-count__over { position: absolute; top: 0; bottom: 0; }
/* brand colours only (Milan, 20 Oct: not grey and black either): today a pale lilac, the hours past your week in pale lilac stripes, With Fraction
   solid lilac */
.mk-count__fill { left: 0; width: calc(min(var(--mk-p), 40) / 80 * 100%); background: color-mix(in oklab, var(--accent) 32%, var(--bg-2)); }
.mk-count__over { left: 50%; width: calc(max(var(--mk-p) - 40, 0) / 80 * 100%);
  background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--accent) 32%, var(--bg-2)) 0 6px, color-mix(in oklab, var(--accent) 14%, var(--bg-2)) 6px 12px); }
.mk-count__row--with .mk-count__fill { background: var(--accent); }
.mk-count__note { grid-area: note; color: var(--ink-2); font-size: 14px; line-height: 20px; font-weight: 600; transition: opacity 400ms var(--mk-ease) calc(var(--dur-c) + 300ms); }
.mk-count__row--with .mk-count__note { color: var(--accent); }
.mk-anim .mk-count:not(.is-live) .mk-count__row { --mk-hrs: 0; --mk-p: 0; transition: none; }
.mk-anim .mk-count:not(.is-live) .mk-count__note { opacity: 0; transition: none; }
@media (min-width: 768px) {
  .mk-count__card { padding: 32px; }
}

/* 5 · you stay in control: the expert's photo with her rules settled onto it and her AI's draft waiting; a picture, nothing on it looks clickable */
.mk-page .mk-rule { position: relative; width: 100%; max-width: 440px; margin: 0 auto; }
.mk-rule__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; background: var(--mk-grey); }
.mk-rule__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-rule__wait, .mk-rule__chips li { background: var(--bg-2); box-shadow: var(--shadow-menu); transition: opacity 360ms var(--mk-ease) var(--d), translate 480ms var(--mk-spring) var(--d); }
.mk-rule__wait { --d: 300ms; position: absolute; top: 20px; right: 12px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 10px 10px; border-radius: 16px;
  color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-rule__wait > span:nth-child(2) { display: flex; flex-direction: column; }
.mk-rule__wait strong { color: var(--ink); }
.mk-rule__wait > .icon { color: var(--ink-2); }
.mk-rule__ai { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.mk-rule__chips { position: absolute; left: 12px; bottom: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-rule__chips li { --d: calc(700ms + var(--i) * 220ms); display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; color: var(--ink);
  font-size: 14px; line-height: 20px; font-weight: 600; }
.mk-rule__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.mk-anim .mk-rule:not(.is-in) .mk-rule__wait { opacity: 0; translate: 0 -10px; }
.mk-anim .mk-rule:not(.is-in) .mk-rule__chips li { opacity: 0; translate: -14px 0; }
@media (min-width: 1024px) {
  .mk-rule__wait { right: -32px; }
  .mk-rule__chips { left: -32px; }
}
/* phone and tablet (Milan, 20 Oct: title and copy first, then the picture): one column, the copy on top, the picture under it on the same left edge,
   a squarer photo and smaller overlays on a phone */
@media (max-width: 1023px) {
  .mk-split.mk-trust { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mk-trust > .mk-copy { order: -1; }
  .mk-page .mk-rule { max-width: 480px; margin: 0; }
}
@media (max-width: 559px) {
  .mk-rule__photo { aspect-ratio: 1; }
  .mk-rule__wait { top: 12px; right: 12px; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; }
  .mk-rule__ai { width: 28px; height: 28px; }
  .mk-rule__chips { bottom: 36px; gap: 6px; }
  .mk-rule__chips li { gap: 8px; padding: 4px 12px 4px 4px; }
}

/* ═══ Find an expert, on Home's system (Milan's Home review, 20 Oct) ═══ */

/* 1 · the hero's picture (Milan, 20 Oct): your problem, told to your own AI by typing or talking, handed to the expert's AI in seconds, handled.
   --mk-hand runs 0 to 1 over 80% of a 14 s loop, then --mk-out fades what moved before the next round. Each step reads its start (--a) and eases in
   over one sixteenth of the loop. Both start at 1, so without motion the picture shows the end: everything said, received and handled. */
@property --mk-hand { syntax: "<number>"; initial-value: 1; inherits: true; }
@property --mk-out { syntax: "<number>"; initial-value: 1; inherits: true; }
@property --mk-sec { syntax: "<integer>"; initial-value: 38; inherits: false; }
@keyframes mk-hand { 0% { --mk-hand: 0; --mk-out: 1; } 80% { --mk-hand: 1; } 93% { --mk-out: 1; } 100% { --mk-hand: 1; --mk-out: 0; } }
.mk-page .mk-hand { display: grid; max-width: 592px; margin: 48px auto 0; }
.mk-anim .mk-hand { animation: mk-hand 14s linear infinite; }
.mk-hand:not(.is-live) { animation-play-state: paused; }
.mk-hand [style*="--a"] { --p: clamp(0, (var(--mk-hand) - var(--a)) * 16, 1); }
.mk-hand__card { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line-2); border-radius: 24px; background: color-mix(in oklab, var(--bg-2) 82%, transparent); }
.mk-hand__head { display: flex; align-items: center; gap: 12px; margin: 0; }
.mk-hand__head strong { color: var(--ink); font-size: 16px; line-height: 24px; }
.mk-hand__head > span:not(.mk-face, .mk-verified, .mk-hand__av, .mk-hand__on) { display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-hand__head .mk-verified { margin-left: auto; }
.mk-hand__av { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--bg); }
.mk-hand__av .modelicon { width: 20px; height: 20px; }
.mk-hand__on { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); font-size: 12px; line-height: 16px; font-weight: 600; }
.mk-hand__msgs { display: flex; flex-direction: column; gap: 8px; }
.mk-hand__msgs > p, .mk-hand__reply { display: flex; flex-direction: column; gap: 8px; max-width: 86%; margin: 0; padding: 10px 14px; color: var(--ink); font-size: 14px; line-height: 20px;
  opacity: calc(var(--p) * var(--mk-out)); translate: 0 calc((1 - var(--p)) * 8px); }
.mk-hand__me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: color-mix(in oklab, var(--accent) 22%, var(--bg-2)); }
.mk-hand__ai, .mk-hand__reply { align-self: flex-start; border-radius: 4px 16px 16px 16px; background: var(--bg); }
.mk-hand__file { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-hand__msgs > .mk-hand__voice { flex-direction: row; align-items: center; gap: 10px; }
.mk-hand__voice > .icon { color: var(--accent); flex: none; }
.mk-hand__wave { display: flex; align-items: center; gap: 2px; height: 20px; }
.mk-hand__wave i { width: 3px; height: var(--h); border-radius: 2px; background: var(--accent); }
.mk-hand__voice > span:last-child { color: var(--ink-2); }
.mk-hand__input { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 0 0; padding: 6px 6px 6px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-hand__mic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--bg); color: var(--ink); }
.mk-hand__link { --line: 2px; position: relative; height: 64px; }
.mk-hand__link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: var(--line); margin-left: -1px; background: var(--line-2); }
.mk-hand__dot { --q: clamp(0, (var(--mk-hand) - var(--a)) * 8, 1); position: absolute; left: 50%; top: calc(var(--q) * 100%); width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent); translate: -50% -50%; opacity: clamp(0, min(var(--q) * 12, (1 - var(--q)) * 12), 1); }
.mk-hand__time { position: absolute; left: calc(50% + 16px); top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-hand__time .icon { color: var(--accent); }
.mk-hand__time b { --mk-sec: calc(clamp(0, (var(--mk-hand) - 0.3) / 0.45, 1) * 38); counter-reset: mk-sec var(--mk-sec); font-weight: 600; }
.mk-hand__time b::before { content: counter(mk-sec) " s"; }
.mk-hand__got { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-hand__got li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; line-height: 20px; opacity: calc(0.4 + 0.6 * var(--p) * var(--mk-out)); }
.mk-hand__got .icon { color: var(--accent); opacity: calc(var(--p) * var(--mk-out)); }
.mk-hand__job { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: auto; padding: 16px; border-radius: 16px; background: var(--bg); }
.mk-hand__jobic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
.mk-hand__job > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mk-hand__job strong { color: var(--ink); font-size: 16px; line-height: 24px; }
.mk-hand__state { display: grid; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-hand__state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.mk-hand__s1 { opacity: calc(clamp(0, min((var(--mk-hand) - 0.55) * 30, (0.65 - var(--mk-hand)) * 30), 1) * var(--mk-out)); }
.mk-hand__s2 { opacity: calc(clamp(0, min((var(--mk-hand) - 0.65) * 30, (0.75 - var(--mk-hand)) * 30), 1) * var(--mk-out)); }
.mk-hand__s3 { color: var(--accent); font-weight: 600; opacity: calc(clamp(0, (var(--mk-hand) - 0.75) * 30, 1) * var(--mk-out)); }
/* a phone keeps the picture short: the problem and the way you answer (talk or type), not the follow-up question */
@media (max-width: 767px) {
  .mk-hand__msgs > :is(.mk-hand__ai, .mk-hand__voice), .mk-hand__reply { display: none; }
}

/* 2 · the problem (Milan, 20 Oct: "better visuals", brand colours only): every card the same shape, the number large over its own picture.
   Trust: two bars on one scale, alone in ink and checked in lilac. Never check: a hundred dots, 66 lilac. Blame: six people, five lilac. */
.mk-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mk-stats__row { display: flex; flex-direction: column; gap: 20px; padding: 20px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-2); }
.mk-stats__art { display: flex; flex-direction: column; gap: 16px; }
.mk-stats__num { font-family: var(--display); font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.mk-stats__cmp, .mk-stats__dots, .mk-stats__people { height: 64px; }
.mk-stats__cmp { display: flex; flex-direction: column; justify-content: space-between; }
.mk-stats__cmp > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-stats__cmp b { color: var(--ink); font-weight: 600; }
.mk-stats__cmp i { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / calc(var(--v) * 1%) 100% no-repeat, var(--mk-grey);
  transition: background-size 1000ms var(--mk-ease) 300ms; }
.mk-stats__cmp--with i { background-image: linear-gradient(var(--accent), var(--accent)); transition-delay: 600ms; }
.mk-stats__dots { display: grid; grid-template-rows: repeat(5, 8px); grid-auto-flow: column; grid-auto-columns: 8px; gap: 6px; align-content: end; }
.mk-stats__dots i { border-radius: 999px; background: var(--mk-grey); }
.mk-stats__dots i.is-on { background: var(--accent); transition: background-color 200ms var(--mk-ease) calc(300ms + var(--i) * 12ms); }
.mk-stats__people { display: flex; align-items: flex-end; gap: 8px; }
.mk-stats__people > span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2);
  transition: background-color 320ms var(--mk-ease) calc(300ms + var(--i) * 140ms), border-color 320ms var(--mk-ease) calc(300ms + var(--i) * 140ms), color 320ms var(--mk-ease) calc(300ms + var(--i) * 140ms); }
.mk-stats__people > span.is-on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.mk-stats__t { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); font-size: 16px; line-height: 24px; }
.mk-stats__t strong { color: var(--ink); font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 600; }
.mk-stats__t small { margin-top: 4px; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-anim .mk-stats:not(.is-in) .mk-stats__cmp i { background-size: 0 100%; }
.mk-anim .mk-stats:not(.is-in) .mk-stats__dots i.is-on { background: var(--mk-grey); }
.mk-anim .mk-stats:not(.is-in) .mk-stats__people > span.is-on { border-color: var(--line-2); background: transparent; color: var(--ink-2); }

/* 3 · certainty: the same answer twice, with no name on it, then signed by a named, verified expert */
.mk-sure { flex: 1; display: grid; gap: 8px; margin-bottom: 12px; padding: 8px; border-radius: 16px; background: var(--mk-grey); }
.mk-sure__side { display: flex; flex-direction: column; gap: 12px; padding: 16px 12px; border-radius: 12px; background: var(--bg); }
.mk-sure__msg { display: flex; gap: 8px; align-items: flex-start; }
.mk-sure__av { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--mk-grey); color: var(--ink); }
.mk-sure__av .modelicon { width: 16px; height: 16px; }
.mk-sure__lines { flex: 1; padding: 12px; border-radius: 4px 12px 12px 12px; background: var(--mk-grey); color: var(--ink); font-size: 14px; line-height: 20px; }
.mk-sure__side--with .mk-sure__av { background: var(--accent); color: var(--accent-ink); }
.mk-sure__side--with .mk-sure__lines { background: color-mix(in oklab, var(--accent) 10%, var(--bg)); }
.mk-sure__by { display: flex; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.mk-sure__by > span:not(.mk-face, .mk-sure__q) { display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-sure__by strong { color: var(--ink); font-size: 14px; line-height: 20px; }
.mk-sure__by > .icon { margin-left: auto; color: var(--accent); flex: none; }
.mk-sure__q { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--mk-grey); color: var(--ink-2); font-weight: 600; }
.mk-sure__side--with .mk-sure__by { transition: opacity 420ms var(--mk-ease) 700ms, translate 520ms var(--mk-ease) 700ms; }
.mk-anim .mk-sure:not(.is-in) .mk-sure__side--with .mk-sure__by { opacity: 0; translate: 0 8px; }
@container mk-gapcard (min-width: 480px) { .mk-sure { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 4 · how it works (Milan, 20 Oct: the client's side, no terminal): four tabs; the connector switched on, a new chat, the two AIs, the signed letter */
@media (max-width: 767px) { .mk-tabs--four .mk-tabs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-tabs--four .mk-tabs__t strong { text-wrap: balance; }
.mk-conn { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border-radius: 16px; background: var(--bg); }
.mk-conn__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--bg); }
.mk-conn__t { display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-conn__t strong { color: var(--ink); font-size: 16px; line-height: 24px; }
.mk-conn__switch { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--accent); }
.mk-conn__switch i { position: absolute; top: 3px; left: 23px; width: 18px; height: 18px; border-radius: 999px; background: var(--bg); }
.mk-conn__clicks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mk-conn__clicks li { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.mk-conn__clicks li > span:last-child { display: flex; flex-direction: column; }
.mk-conn__clicks small { color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-conn__n { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 999px; background: color-mix(in oklab, var(--accent) 14%, var(--bg)); color: var(--accent); }
.mk-room__head .mk-conn__on { margin-left: auto; }
/* every step's panel fills the panel's height (Milan, 20 Oct: tab 1 "feels very empty"): the room stretches and its foot (a chat box, or the hand-over
   to the expert) sits at the bottom, so no panel ends half way down */
.mk-tabs--four .mk-tabs__panel, .mk-tabs--four .mk-tabs__panel[hidden] { display: flex; flex-direction: column; }
.mk-tabs--four .mk-room { flex: 1; }
.mk-compose { display: flex; flex-direction: column; gap: 16px; margin-top: auto; }
.mk-compose .mk-room__status { padding-left: 0; }
.mk-compose__box { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg); }
.mk-compose__t { color: var(--ink-2); }
.mk-compose__row { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.mk-compose__row .mk-hand__on { margin-left: 0; }
.mk-compose__send { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 999px; background: var(--ink); color: var(--bg); }
.mk-compose__hand { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px 12px 12px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg); }
.mk-compose__hand > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-compose__hand strong { color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 600; }
.mk-compose__hand .mk-room__typing { margin-left: auto; }
@media (min-width: 768px) {
  .mk-conn__clicks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-conn__clicks li { flex-direction: column; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--bg); }
}
.mk-room__head .mk-msg__av { width: 32px; height: 32px; }
.mk-anim .mk-tabs__panel .mk-conn__switch { transition: background-color 320ms var(--mk-ease) 500ms; }
.mk-anim .mk-tabs__panel .mk-conn__switch i { transition: left 420ms var(--mk-spring) 500ms; }
.mk-anim .mk-tabs__panel[hidden] .mk-conn__switch { background: var(--ink-3); }
.mk-anim .mk-tabs__panel[hidden] .mk-conn__switch i { left: 3px; }
.mk-msg--me { justify-content: flex-end; }
.mk-msg--me .mk-msg__body { border-radius: 16px 4px 16px 16px; background: color-mix(in oklab, var(--accent) 14%, var(--bg)); }
.mk-msg__files { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-msg__ex { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--line-2); border-radius: 16px; }
.mk-msg__ex > span:not(.mk-face, .mk-verified) { display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-msg__ex strong { color: var(--ink); font-size: 16px; line-height: 24px; }
.mk-msg__ex .mk-verified { margin-left: auto; }
.mk-doc del { color: var(--ink-3); }
.mk-doc ins { padding: 0 4px; border-radius: 4px; background: color-mix(in oklab, var(--accent) 18%, var(--bg)); color: var(--ink); text-decoration: none; }
.mk-doc .mk-doc__note { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-doc__note .icon { color: var(--accent); flex: none; }

/* 5 · your data: Home's tiles, each with its own small card */
.mk-mini { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 240px; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.mk-mini__head { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; }
.mk-mini__head .icon { color: var(--accent); flex: none; }
.mk-mini > i { display: block; height: 6px; border-radius: 999px; background: var(--mk-grey); }
.mk-mini > i + i { width: 64%; }
.mk-mini__faces { display: flex; gap: 6px; }
.mk-mini__faces > * { transition: opacity 360ms var(--mk-ease), scale 480ms var(--mk-spring); }
.mk-mini__faces > :nth-child(2) { transition-delay: 180ms; }
.mk-mini__faces > :nth-child(3) { transition-delay: 360ms; }
.mk-mini__foot { color: var(--ink-2); font-size: 12px; line-height: 16px; }
.mk-mini__ok { display: inline-flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--accent); font-size: 14px; line-height: 20px; font-weight: 600;
  transition: opacity 420ms var(--mk-ease) 400ms, translate 520ms var(--mk-spring) 400ms; }
.mk-mini__off { display: inline-flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: var(--mk-grey); color: var(--ink); font-size: 14px; line-height: 20px; }
.mk-mini__off .icon { color: var(--accent); flex: none; }
.mk-anim .mk-std:not(.is-in) .mk-mini__faces > * { opacity: 0; scale: 0.7; }
.mk-anim .mk-std:not(.is-in) .mk-mini__ok { opacity: 0; translate: 0 8px; }
/* Find an expert's Your data as a bento (Milan, 20 Oct): Home's tiles and grey pictures, two wide tiles crossing two small ones. A wide tile (Milan, 20 Oct:
   "remove the greyish bg ... enlarge the visual in the right corner ... a sort of cutoff") has its title and two sentences at the bottom left, and its card
   on the white, large, in the right corner, running off the tile's right and bottom edges. */
@media (min-width: 768px) {
  .mk-std.mk-std--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-std--bento .mk-std__tile--wide { grid-column: span 2; position: relative; overflow: hidden; justify-content: flex-end; min-height: 320px; }
  .mk-std--bento .mk-std__tile--wide > :not(.mk-std__art) { position: relative; max-width: 44%; }
  .mk-std--bento .mk-std__tile--wide .mk-std__art { position: absolute; top: 48px; left: 52%; right: auto; height: auto; padding: 0; border-radius: 0; background: none; overflow: visible; display: block; }
  .mk-std--bento .mk-std__tile--wide .mk-mini { width: 440px; max-width: none; min-height: 320px; gap: 20px; padding: 28px; border-radius: 20px;
    box-shadow: 0 24px 48px -24px color-mix(in oklab, var(--ink) 18%, transparent); }
  .mk-std--bento .mk-std__tile--wide .mk-mini__head { gap: 8px; font-size: 16px; line-height: 24px; }
  .mk-std--bento .mk-std__tile--wide .mk-mini__head .icon { width: 20px; height: 20px; }
  .mk-std--bento .mk-std__tile--wide .mk-mini__faces { gap: 10px; }
  .mk-std--bento .mk-std__tile--wide .mk-mini__faces .mk-face { width: 56px; height: 56px; }
  .mk-std--bento .mk-std__tile--wide .mk-mini__foot { font-size: 16px; line-height: 24px; }
  .mk-std--bento .mk-std__tile--wide .mk-xcl--ai .modelicon { width: 28px; height: 28px; }
}
@media (min-width: 1024px) {
  .mk-std.mk-std--bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .mk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .mk-stats__row { gap: 24px; padding: 24px; }
}
@media (min-width: 1024px) {
  .mk-page .mk-hand { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); max-width: 1040px; margin-top: 64px; }
  .mk-hand__link { height: auto; }
  .mk-hand__link::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: var(--line); margin: -1px 0 0; }
  .mk-hand__dot { left: calc(var(--q) * 100%); top: 50%; }
  .mk-hand__time { left: 50%; top: calc(50% + 16px); translate: -50% 0; }
}

/* ═══ Shared by Be an expert and Find an expert ═══════════════ */

/* the hero's risk line under the CTA */
.mk-risk { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-2); }
.mk-risk li { display: flex; align-items: center; gap: 8px; }
.mk-risk .icon { color: var(--accent); flex: none; }

/* the hand-drawn signature (Home's advice note, Find an expert's hero); it writes itself */
.mk-sig { width: 180px; height: 58px; color: var(--accent); }
.mk-sig path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-sig path:nth-child(2) { --d: 700ms; }
@keyframes mk-sign { to { stroke-dashoffset: 0; } }

/* Questions: a sticky column with topic chips, the accordion beside it */
.mk-qa__in { display: grid; gap: 32px; }
.mk-qa__side { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color 280ms var(--mk-ease), color 280ms var(--mk-ease), border-color 280ms var(--mk-ease); }
.mk-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.mk-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mk-chip__n { font-size: 12px; line-height: 16px; opacity: 0.7; }
.mk-qa__who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.mk-qa__faces { display: flex; }
.mk-qa__faces > * { border: 2px solid var(--bg); }
.mk-qa__faces > * + * { margin-left: -12px; }
.mk-qa__who figcaption { display: flex; flex-direction: column; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.mk-faq__item:last-child { border-bottom: 0; }
.mk-faq__item { overflow: clip; border-bottom: 1px solid var(--line);
  transition: opacity 280ms var(--mk-ease), height 360ms var(--mk-ease), display 360ms allow-discrete; }
/* picking a topic (Milan, 20 Oct: smoother): the other questions fold away and the picked ones unfold, instead of jumping */
[data-topic]:not([data-topic="all"]) .mk-faq__item:not(.is-on) { display: none; height: 0; opacity: 0; }
@starting-style { [data-picked] .mk-faq__item { height: 0; opacity: 0; } }
.mk-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; list-style: none; cursor: pointer;
  font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ink); transition: color 280ms var(--mk-ease); }
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q:hover { color: var(--accent); }
.mk-faq__pm { position: relative; width: 14px; height: 14px; flex: none; }
.mk-faq__pm::before, .mk-faq__pm::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: rotate 320ms var(--mk-ease); }
.mk-faq__pm::after { rotate: 90deg; }
.mk-faq__item[open] .mk-faq__pm::after { rotate: 0deg; }
.mk-faq__a { margin: 0 0 24px; max-width: 60ch; color: var(--ink-2); }
.mk-faq__item::details-content { height: 0; overflow: clip; transition: height 360ms var(--mk-ease), content-visibility 360ms allow-discrete; }
.mk-faq__item[open]::details-content { height: auto; }


@media (min-width: 1024px) {
  .mk-qa__in { grid-template-columns: 380px minmax(0, 1fr); gap: 80px; align-items: start; }
}

/* ═══ Privacy and Terms (marketing/_legal) ════════════════════════
   Built for long reading: a short dark hero with the date, then on paper the contents and the text at about 70 characters a
   line. From 1024 the contents are a sticky column on the left, level with the text; below that they fold into one row above it. */
.mk-hero--legal { padding-bottom: 56px; }
.mk-legal__hero { display: flex; flex-direction: column; gap: 16px; }
.mk-legal__date { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--ink-2); }
.mk-legal__date .icon { color: var(--accent); }
/* the fibres meet on the right, away from the text, and fade out before they reach it; a phone shows none (no room beside the text) */
.mk-hero--legal > .mk-fibres { display: none; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--accent); opacity: 0.2;
  -webkit-mask: linear-gradient(90deg, transparent 48%, black 80%); mask: linear-gradient(90deg, transparent 48%, black 80%); }
.mk-anim .mk-hero--legal > .mk-fibres path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: mk-draw 1.6s var(--mk-ease) forwards; animation-delay: calc(var(--i) * 30ms); }

.mk-band.mk-legal { padding: 48px 0 96px; }
.mk-legal__in { display: grid; gap: 32px; }
.mk-legal__h2 { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.01em; color: var(--ink); margin: 0; text-wrap: balance; }

/* the contents: one row on a phone and a tablet (a native disclosure), the list itself from 1024 */
.mk-legal__nav { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-legal__toc { border: 1px solid var(--line); border-radius: 16px; }
.mk-legal__toc > summary { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 16px; cursor: pointer; list-style: none; border-radius: 16px;
  font-weight: 600; transition: background-color var(--dur) ease; }
.mk-legal__toc > summary::-webkit-details-marker { display: none; }
.mk-legal__toc > summary:hover { background: var(--mk-grey); }
.mk-legal__toc > summary small { color: var(--ink-2); font-size: 14px; font-weight: 400; }
.mk-legal__toc > summary .icon { margin-left: auto; color: var(--ink-2); transition: rotate 280ms var(--mk-ease); }
.mk-legal__toc[open] > summary .icon { rotate: 180deg; }
.mk-legal__toc::details-content { height: 0; overflow: clip; transition: height 360ms var(--mk-ease), content-visibility 360ms allow-discrete; }
.mk-legal__toc[open]::details-content { height: auto; }
.mk-legal__list { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 2px; }
.mk-legal__link { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); font-size: 14px; line-height: 20px;
  text-decoration: none; transition: color var(--dur) ease, background-color var(--dur) ease; }
.mk-legal__link:hover { color: var(--ink); background: var(--mk-grey); }
.mk-legal__link[aria-current] { color: var(--ink); background: var(--mk-grey); font-weight: 600; }
.mk-legal__other { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding: 0 12px; margin-left: -12px; border-radius: 999px;
  color: var(--ink); text-decoration: none; transition: background-color var(--dur) ease; }
.mk-legal__other .icon { transition: translate 280ms var(--mk-ease); }
.mk-legal__other:hover { background: var(--mk-grey); }
.mk-legal__other:hover .icon { translate: 4px 0; }

/* the text: 16 px at about 70 characters a line (60ch: Inter's letters average narrower than its zero), sections well apart, their parts close together */
.mk-legal__doc { display: flex; flex-direction: column; gap: 48px; min-width: 0; max-width: 60ch; color: var(--ink-2); line-height: 1.7; }
.mk-legal__sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 96px; }
.mk-legal__sec p, .mk-legal__sec ul { margin: 0; }
.mk-legal__sec ul { padding-left: 20px; display: grid; gap: 12px; }
.mk-legal__sec li::marker { color: var(--ink-3); }
.mk-legal__sec strong { color: var(--ink); font-weight: 600; }
.mk-legal__sec code { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.mk-legal__sec a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) ease; }
.mk-legal__sec a:hover { text-decoration-color: var(--ink); }

@media (min-width: 768px) {
  .mk-hero--legal { padding-bottom: 72px; }
  .mk-hero--legal > .mk-fibres { display: block; }
  .mk-band.mk-legal { padding: 64px 0 128px; }
  .mk-legal__h2 { font-size: 28px; line-height: 36px; }
}
@media (min-width: 1024px) {
  .mk-legal__in { grid-template-columns: 240px minmax(0, 60ch); column-gap: 80px; justify-content: start; }
  .mk-legal__nav { grid-column: 1; align-self: start; position: sticky; top: 96px; }
  .mk-legal__doc { grid-column: 2; }
  /* the words of the contents start on the hero's edge; their hover fill reaches out into the gutter */
  .mk-legal__toc { border: 0; margin-left: -12px; }
  .mk-legal__toc > summary { min-height: 0; padding: 0 12px 8px; cursor: default; pointer-events: none; }
  .mk-legal__toc > summary .icon { display: none; }
  .mk-legal__toc::details-content, .mk-legal__toc[open]::details-content { height: auto; content-visibility: visible; }
  .mk-legal__list { padding: 0; }
}

/* ── 768 and up ──────────────────────────────────────────────── */
@media (min-width: 768px) {
  .mk-wrap { padding: 0 32px; }
  .mk-band { padding: 96px 0; }
  .mk-band.mk-band--roomy { padding: 192px 0 96px; }
  .mk-band.mk-gap { padding-bottom: 192px; }
  .mk-page .mk-band.mk-start[data-theme] { padding: 160px 0 128px; }
  .mk-h1 { font-size: 52px; }
  .mk-h2 { font-size: 40px; }
  .mk-bar__cta { display: inline-flex; }
  .mk-dock { display: none; }
  .mk-drawer__close { right: 21px; }
  .mk-page { padding-bottom: 0; }

  .mk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }

  .mk-hero { padding: 72px 0 80px; }
  .mk-page main > .mk-hero:first-child { padding-top: 144px; }
  .mk-hero__head { align-items: center; text-align: center; }
  .mk-hero__head .mk-h1, .mk-hero__head .mk-lede { margin-inline: auto; }
  .mk-fork { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
  .mk-path { display: grid; grid-template-columns: 300px minmax(120px, 1fr) 300px; align-items: center; gap: 0; height: 400px; }
  .mk-page .mk-path { margin-top: 64px; }
  .mk-path__ask { align-items: flex-start; max-width: none; }
  .mk-path__ex { grid-column: 3; grid-template-columns: minmax(0, 1fr); height: 100%; gap: 0; align-content: space-between; padding: 8px 0; }
  .mk-path__node { flex-direction: row; gap: 12px; padding: 6px 16px 6px 6px; text-align: left; border-radius: 999px; }
  .mk-path__name { font-size: 14px; line-height: 20px; }
  .mk-path__name strong { font-size: 16px; line-height: 24px; }
  .mk-path__area { display: inline; }

  .mk-std { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

  .mk-gap__cards { gap: 24px; }
  .mk-gap__card { padding: 32px; }
  .mk-clock__time { font-size: 20px; line-height: 28px; }
  .mk-clock__chain { grid-template-columns: repeat(4, 72px); gap: 8px; }
  .mk-clock__chain::before { left: 36px; right: 36px; }

  .mk-tabs { grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; }
  .mk-tabs__list { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; border: 0; background: none; }
  .mk-tabs__tab { flex-direction: row; align-items: flex-start; gap: 16px; padding: 20px; text-align: left; }
  .mk-tabs__n { width: 32px; height: 32px; }
  .mk-tabs__t strong { font-family: var(--display); font-size: 20px; line-height: 28px; }
  .mk-tabs__t > span { display: block; font-size: 16px; line-height: 24px; color: inherit; }
  .mk-tabs__cap { display: none; }
  .mk-tabs__panel { min-height: 440px; padding: 32px; }

  .mk-pair { gap: 16px; }
  .mk-pair__id { padding: 16px 20px 20px; font-size: 16px; line-height: 24px; }
  .mk-pair__id strong { font-size: 22px; line-height: 28px; }
  .mk-pair__id > span:nth-of-type(3) { display: block; }

  .mk-dan__stats dd { font-size: 48px; }
  .mk-dan__card::after { inset: 50% 0 0 0; }
}
/* Meet Daniel below 1024 (Milan, 20 Oct: "not mobile optimised with the widths", then "should expand the full width ... the face gets cut off"):
   one column, the copy on top, the card as wide as the copy. The caption never sits on his face: a phone shows the photo (a square, his head and
   shoulders) with the caption under it on the card's ink, the photo fading into it; a tablet puts the caption on the left and the photo on the right
   half, fading in from the left. */
@media (max-width: 1023px) {
  .mk-dan__in { gap: 32px; }
  .mk-dan__copy { order: -1; }
  .mk-dan.mk-dan .mk-dan__card { max-width: none; margin: 0; aspect-ratio: auto; display: flex; flex-direction: column; }
  .mk-dan__card::after { display: none; }
  .mk-dan__card img { position: relative; inset: auto; height: auto; aspect-ratio: 1; object-position: 50% 20%;
    -webkit-mask: linear-gradient(to bottom, black 72%, transparent); mask: linear-gradient(to bottom, black 72%, transparent); }
  .mk-dan__cap { position: relative; inset: auto; margin-top: -40px; padding: 0 24px 24px; }
}
/* a tablet (Milan, 20 Oct: "a light bg filling to match the light grey color of the photo", then "the wrong type of grey ... the dark fade at the bottom is
   gone"): the card takes the grey of the photo's backdrop where it shows (lighter than its edge), so the photo fades into it with no seam, and the dark
   fade comes back over the bottom of the whole card, as on desktop, with the caption light on it. */
@media (min-width: 640px) and (max-width: 1023px) {
  .mk-dan.mk-dan .mk-dan__card { --dan-backdrop: rgb(206 202 205); /* ds-lint: allow — the backdrop grey of Daniel's photo, so the card meets it with no seam */
    min-height: 400px; justify-content: flex-end; background: var(--dan-backdrop); }
  .mk-dan__card img { position: absolute; inset: 0 0 0 auto; width: 50%; height: 100%; aspect-ratio: auto; object-position: 50% 10%;
    -webkit-mask: linear-gradient(to right, transparent, black 45%); mask: linear-gradient(to right, transparent, black 45%); }
  /* the fade gathers in the bottom-left corner, under the caption, and leaves his face clear (Milan, 20 Oct) */
  .mk-dan.mk-dan .mk-dan__card::after { display: block; inset: 0;
    background: radial-gradient(115% 125% at 0% 100%, color-mix(in oklab, var(--bg) 96%, transparent), color-mix(in oklab, var(--bg) 88%, transparent) 34%, color-mix(in oklab, var(--bg) 52%, transparent) 56%, color-mix(in oklab, var(--bg) 18%, transparent) 72%, transparent 86%); }
  .mk-dan__cap { width: 56%; margin: 0; padding: 32px; }
}
@media (min-width: 768px) and (max-width: 859px) {
  .mk-cols__set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-cols__col:nth-child(2) { display: block; }
}
/* three quote columns from 860 (Milan, 20 Oct: "not 3 column on desktop"; the 1024 rule showed only column 3, so column 2 stayed hidden and
   the third track was empty) */
@media (min-width: 860px) {
  .mk-cols__set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-cols__col:nth-child(n + 2) { display: block; }
}

/* ── 1024 and up ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .mk-h1 { font-size: 64px; }
  .mk-nav { display: inline-flex; }
  .mk-bar__menu { display: none; }
  .mk-std { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* the portrait a bit smaller beside the story (Milan, 20 Oct, on Be an expert): at most 384px wide, on the page's left edge */
  .mk-dan__in { grid-template-columns: minmax(0, 384px) minmax(0, 1fr); gap: 64px; }
  .mk-dan.mk-dan .mk-dan__card { max-width: 384px; }

  /* two cards side by side only from 1024: at tablet width the timeline has no room */
  .mk-gap__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── load and reveal motion (Milan, 20 Oct: "gentle smooth animations for page load and sections load"). One move, a soft rise on --mk-ease, in
   opacity and translate only, so nothing shifts the layout. Every rule is behind .mk-anim, so reduced motion (and a page whose script never ran)
   shows the page as it stands. The score: on load the bar and the hero come in top to bottom (the h1 only settles, it is never transparent: it is
   the page's LCP); further down each section's title and lede, then its picture, rise as they scroll into view (data-mk-reveal, .is-in and --mk-k
   from mk_motion_controller.js). The quote columns and the tabs' own motion are the rests. ── */
@keyframes mk-rise { from { opacity: 0; translate: 0 var(--mk-rise, 24px); } }
@keyframes mk-rise-fig { from { opacity: 0; translate: 0 40px; scale: 0.97; } }
@keyframes mk-settle { from { translate: 0 20px; } }
@keyframes mk-zoom { from { scale: 1.08; } }
/* page load */
.mk-anim .mk-bar__in { --mk-rise: -12px; animation: mk-rise 720ms var(--mk-ease) 200ms backwards; }
.mk-anim .mk-hero__head > .mk-h1 { animation: mk-settle 960ms var(--mk-ease) backwards; }
.mk-anim .mk-hero__head > :not(.mk-h1) { --mk-rise: 20px; animation: mk-rise 880ms var(--mk-ease) backwards; }
.mk-anim .mk-hero__head > :nth-child(2) { animation-delay: 140ms; }
.mk-anim .mk-hero__head > :nth-child(3) { animation-delay: 260ms; }
.mk-anim .mk-hero__head > :nth-child(4) { animation-delay: 360ms; }
.mk-anim .mk-hero > .mk-fig { animation: mk-rise-fig 1200ms var(--mk-ease) 420ms backwards; }
/* Find an expert's picture runs its own story loop on the same element (mk-hand): keep both, or the rise replaces the loop */
.mk-anim .mk-hero > .mk-hand { animation: mk-rise-fig 1200ms var(--mk-ease) 420ms backwards, mk-hand 14s linear infinite; }
/* the phone's Get started bar comes up from the bottom edge once the hero has landed */
.mk-anim .mk-dock { --mk-rise: 100%; animation: mk-rise 800ms var(--mk-ease) 600ms backwards; }
/* section load: held back until in view, then risen, one after another */
.mk-anim [data-mk-reveal]:not([data-mk-reveal="each"], .is-in), .mk-anim [data-mk-reveal="each"] > :not(.is-in) { opacity: 0; }
.mk-anim [data-mk-reveal]:not([data-mk-reveal="each"]).is-in, .mk-anim [data-mk-reveal="each"] > .is-in {
  animation: mk-rise 900ms var(--mk-ease) calc(var(--mk-k, 0) * 90ms) backwards; }
.mk-anim figure[data-mk-reveal]:not([data-mk-reveal="each"]).is-in { animation-name: mk-rise-fig; animation-duration: 1200ms; }
/* Daniel's portrait settles inside its card as the card rises */
.mk-anim .mk-dan__card.is-in img { animation: mk-zoom 1600ms var(--mk-ease) calc(var(--mk-k, 0) * 90ms) backwards; }

@media (prefers-reduced-motion: reduce) {
  .mk-page *, .mk-page *::before, .mk-page *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
  .mk-fork__card::before, .mk-fork__glow::before { background: color-mix(in oklab, var(--accent) 60%, transparent); }
}

/* without motion the quote columns stand still: each shows its two quotes once */
html:not(.mk-anim) .mk-cols__set { height: auto; }
html:not(.mk-anim) .mk-cols__track[aria-hidden] { display: none; }