/* ═══ Sunday Stack public website: the parent brand (sundaystack.app/home, /workspace, /train, /about) ═══
   Everything here is prefixed mk- and only loaded by the marketing pages, so none of it reaches the apps.
   Brand: Slate Blue #476A8A, White #FFFFFF, Butter Yellow #E8D89A (marketing only, never inside an app).
   Type: Manrope for headlines, Instrument Serif for a few editorial words, DM Sans for everything else.
   A product page sets data-product="workspace" or "train" on <body> to pick its own accent; a future app
   adds one more block of tokens below, nothing else. */

:root{
  /* parent brand */
  --mk-slate:#476A8A;
  --mk-slate-deep:#36536E;
  --mk-slate-ink:#22374B;
  --mk-slate-soft:#EDF2F6;
  --mk-white:#FFFFFF;
  --mk-butter:#E8D89A;
  --mk-butter-soft:#F7F0D5;
  /* neutrals */
  --mk-ink:#15202B;
  --mk-ink-2:#33414F;
  --mk-muted:#5B6672;
  --mk-line:#E4E8EC;
  --mk-line-2:#EEF1F4;
  --mk-mist:#F6F8FA;
  /* type */
  --mk-display:'Manrope', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mk-serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mk-body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* layout */
  --mk-wrap:1200px;
  --mk-gutter:24px;
  --mk-radius:20px;
  --mk-radius-sm:12px;
  --mk-shadow:0 1px 2px rgba(21,32,43,.05), 0 12px 32px rgba(21,32,43,.07);
  --mk-shadow-lg:0 2px 4px rgba(21,32,43,.05), 0 28px 64px rgba(21,32,43,.12);
  /* product accents (the parent's slate until a product page says otherwise) */
  --mk-accent:var(--mk-slate);
  --mk-accent-ink:var(--mk-slate-deep);
  --mk-accent-soft:var(--mk-slate-soft);
  --mk-accent-btn:var(--mk-slate);   /* a button fill white text reads on (4.5:1 or better) */
}
/* Workspace: slate blue, its signature colour */
[data-product="workspace"], .mk-p-workspace{
  --mk-accent:#476A8A; --mk-accent-ink:#36536E; --mk-accent-soft:#EDF2F6; --mk-accent-btn:#476A8A;
}
/* Train: the orange its app already uses (Train's own colour, kept configurable here) */
[data-product="train"], .mk-p-train{
  --mk-accent:#E85002; --mk-accent-ink:#A93C05; --mk-accent-soft:#FDEEE4; --mk-accent-btn:#CC4704;
}

/* ── base (marketing pages only: body.mk) ── */
body.mk{ margin:0; background:var(--mk-white); color:var(--mk-ink); font-family:var(--mk-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
.mk *, .mk *::before, .mk *::after{ box-sizing:border-box; }
.mk img{ display:block; max-width:100%; height:auto; }
:where(.mk) a{ color:inherit; }
:where(.mk) button{ font:inherit; color:inherit; }
.mk :focus-visible{ outline:3px solid var(--mk-slate); outline-offset:3px; border-radius:8px; }
.mk main{ overflow-x:clip; }
.mk-wrap{ width:100%; max-width:var(--mk-wrap); margin:0 auto; padding:0 var(--mk-gutter); }
.mk-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.mk-skip{ position:absolute; left:16px; top:-60px; z-index:200; padding:10px 16px; border-radius:10px; background:var(--mk-ink); color:#fff; font-weight:700; text-decoration:none; }
.mk-skip:focus{ top:12px; }

/* headings */
.mk-h1, .mk-h2, .mk-h3{ margin:0; font-family:var(--mk-display); font-weight:700; color:var(--mk-ink); letter-spacing:-.03em; text-wrap:balance; }
.mk-h1{ font-size:clamp(40px, 6.2vw, 76px); line-height:1.04; letter-spacing:-.04em; }
.mk-h2{ font-size:clamp(30px, 4vw, 50px); line-height:1.08; }
.mk-h3{ font-size:clamp(22px, 2.2vw, 28px); line-height:1.2; letter-spacing:-.02em; }
/* a few words in Instrument Serif, for warmth */
.mk-serif{ font-family:var(--mk-serif); font-weight:400; font-style:italic; letter-spacing:-.01em; }
.mk-h1 .mk-serif, .mk-h2 .mk-serif{ font-size:1.08em; }
.mk-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; font-size:14px; font-weight:600; color:var(--mk-accent-ink); }
.mk-eyebrow img, .mk-eyebrow svg{ width:22px; height:22px; flex:none; }
.mk-lead{ margin:20px 0 0; max-width:60ch; font-size:clamp(18px, 1.5vw, 20px); line-height:1.55; color:var(--mk-muted); }
.mk-center{ text-align:center; }
.mk-center .mk-lead{ margin-left:auto; margin-right:auto; }
.mk-p{ margin:12px 0 0; color:var(--mk-muted); max-width:62ch; }

/* buttons */
.mk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:12px;
  border:1.5px solid transparent; font:600 16px var(--mk-body); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.mk-btn:active{ transform:translateY(1px); }
.mk-btn svg{ width:18px; height:18px; flex:none; }
.mk-btn-primary{ background:var(--mk-slate); color:#fff; }
@media (hover:hover){ .mk-btn-primary:hover{ background:var(--mk-slate-deep); } }
.mk-btn-secondary{ background:#fff; color:var(--mk-ink); border-color:var(--mk-line); }
@media (hover:hover){ .mk-btn-secondary:hover{ border-color:var(--mk-slate); color:var(--mk-slate-deep); } }
.mk-btn-accent{ background:var(--mk-accent-btn); color:#fff; }
@media (hover:hover){ .mk-btn-accent:hover{ background:var(--mk-accent-ink); } }
.mk-link{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--mk-accent-ink); text-decoration:none; }
.mk-link svg{ width:16px; height:16px; transition:transform .18s ease; }
@media (hover:hover){ .mk-link:hover{ text-decoration:underline; text-underline-offset:4px; } .mk-link:hover svg{ transform:translateX(2px); } }
.mk-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.mk-center .mk-ctas{ justify-content:center; }

/* ── the bar along the top ── */
.mk-nav{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s ease; }
.mk-nav.mk-scrolled{ border-bottom-color:var(--mk-line); }
.mk-nav-in{ display:flex; align-items:center; gap:24px; height:72px; }
.mk-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--mk-ink); flex:none; }
.mk-brand svg{ width:34px; height:34px; flex:none; }
.mk-brand span{ font-family:var(--mk-display); font-weight:800; font-size:19px; letter-spacing:-.03em; }
.mk-nav-links{ display:flex; align-items:center; gap:4px; margin:0 0 0 20px; padding:0; list-style:none; }
.mk-nav-links > li{ position:relative; }
.mk-nav-item{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px; border:0; border-radius:10px; background:none; cursor:pointer;
  font:500 15px var(--mk-body); color:var(--mk-ink-2); text-decoration:none; }
.mk-nav-item svg{ width:14px; height:14px; transition:transform .18s ease; }
.mk-nav-item[aria-expanded="true"] svg{ transform:rotate(180deg); }
@media (hover:hover){ .mk-nav-item:hover{ color:var(--mk-ink); background:var(--mk-mist); } }
.mk-nav-item[aria-current="page"]{ color:var(--mk-ink); }
.mk-nav-acts{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.mk-nav-acts .mk-btn{ min-height:42px; padding:0 18px; font-size:15px; border-radius:10px; }
.mk-nav-acts .mk-nav-item{ font-weight:600; }

/* dropdowns: Products, Sign in */
.mk-dd{ position:absolute; top:calc(100% + 8px); left:-8px; min-width:340px; padding:8px; border:1px solid var(--mk-line); border-radius:16px;
  background:#fff; box-shadow:var(--mk-shadow-lg); opacity:0; transform:translateY(-4px); visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.mk-dd.mk-open{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition:opacity .16s ease, transform .16s ease; }
.mk-dd-right{ left:auto; right:0; min-width:300px; }
.mk-dd a{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:12px; text-decoration:none; color:var(--mk-ink); }
@media (hover:hover){ .mk-dd a:hover{ background:var(--mk-mist); } }
.mk-dd a:focus-visible{ outline-offset:-2px; }
.mk-dd b{ display:block; font-family:var(--mk-display); font-weight:700; font-size:16px; letter-spacing:-.01em; }
.mk-dd small{ display:block; font-size:14px; color:var(--mk-muted); line-height:1.4; }
.mk-dd-label{ margin:6px 12px 4px; font-size:12px; font-weight:600; color:var(--mk-muted); }

/* product marks, the same size everywhere */
.mk-mark{ display:inline-grid; place-items:center; width:44px; height:44px; flex:none; border-radius:12px; background:var(--mk-accent-soft); }
.mk-mark img, .mk-mark svg{ width:26px; height:26px; }
.mk-mark-lg{ width:56px; height:56px; border-radius:16px; }
.mk-mark-lg img, .mk-mark-lg svg{ width:32px; height:32px; }

/* the menu on phones */
.mk-menu-btn{ display:none; width:44px; height:44px; place-items:center; border:1px solid var(--mk-line); border-radius:12px; background:#fff; cursor:pointer; }
.mk-menu-btn svg{ width:20px; height:20px; }
.mk-menu{ display:none; border-top:1px solid var(--mk-line); background:#fff; }
.mk-menu.mk-open{ display:block; }
.mk-menu-in{ display:grid; gap:4px; padding:16px var(--mk-gutter) 24px; }
.mk-menu-group{ margin:12px 0 4px; font-size:12px; font-weight:600; color:var(--mk-muted); }
.mk-menu a{ display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 8px; border-radius:12px; text-decoration:none; font-weight:600; color:var(--mk-ink); }
.mk-menu a small{ display:block; font-weight:400; font-size:14px; color:var(--mk-muted); }
.mk-menu .mk-mark{ width:36px; height:36px; border-radius:10px; }
.mk-menu .mk-mark img, .mk-menu .mk-mark svg{ width:20px; height:20px; }
.mk-menu .mk-btn{ margin-top:12px; }

/* ── sections ── */
.mk-section{ padding:clamp(72px, 10vw, 128px) 0; }
.mk-section-tight{ padding:clamp(56px, 7vw, 88px) 0; }
.mk-head{ max-width:760px; margin:0 0 clamp(36px, 5vw, 56px); }
.mk-head.mk-center{ margin-left:auto; margin-right:auto; }
.mk-band{ background:var(--mk-mist); }
.mk-band-slate{ background:var(--mk-slate-ink); color:#fff; }
.mk-band-slate .mk-h2, .mk-band-slate .mk-h3{ color:#fff; }
.mk-band-slate .mk-lead, .mk-band-slate .mk-p{ color:rgba(255,255,255,.78); }
.mk-band-slate .mk-eyebrow{ color:var(--mk-butter); }

/* hero */
.mk-hero{ padding:clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.mk-hero .mk-h1{ max-width:17ch; }
.mk-hero.mk-center .mk-h1{ margin-left:auto; margin-right:auto; }
/* a thin butter underline under one phrase */
.mk-underline{ background-image:linear-gradient(var(--mk-butter), var(--mk-butter)); background-repeat:no-repeat; background-size:100% .22em; background-position:0 92%; padding:0 .04em; }

/* two equal product windows in the hero */
.mk-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.4vw, 28px); margin-top:clamp(48px, 6vw, 72px); }
.mk-window{ margin:0; border:1px solid var(--mk-line); border-radius:var(--mk-radius); overflow:hidden; background:#fff; box-shadow:var(--mk-shadow-lg); }
.mk-window-bar{ display:flex; align-items:center; gap:10px; height:44px; padding:0 16px; border-bottom:1px solid var(--mk-line); background:#fff; }
.mk-window-bar .mk-mark{ width:26px; height:26px; border-radius:8px; }
.mk-window-bar .mk-mark img, .mk-window-bar .mk-mark svg{ width:16px; height:16px; }
.mk-window-bar b{ font-family:var(--mk-display); font-size:14px; letter-spacing:-.01em; }
.mk-window-bar span{ margin-left:auto; font-size:13px; color:var(--mk-muted); }
.mk-window img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top left; }
.mk-duo figcaption{ display:none; }

/* the product showcase: two equal cards */
.mk-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.4vw, 28px); }
.mk-product{ display:flex; flex-direction:column; border:1px solid var(--mk-line); border-radius:24px; background:#fff; overflow:hidden; }
.mk-product-top{ padding:clamp(28px, 3.2vw, 44px) clamp(24px, 3.2vw, 44px) 36px; }
.mk-product-name{ display:flex; align-items:center; gap:14px; }
.mk-product-name .mk-h3{ font-size:26px; }
.mk-product-name small{ display:block; font-size:15px; color:var(--mk-muted); }
.mk-product-tag{ margin:28px 0 0; font-family:var(--mk-serif); font-style:italic; font-size:clamp(30px, 3.4vw, 42px); line-height:1.08; letter-spacing:-.01em; color:var(--mk-ink); }
.mk-product-tag + .mk-p{ margin-top:14px; }
.mk-ticks{ display:grid; gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.mk-ticks li{ position:relative; padding-left:28px; color:var(--mk-ink-2); }
.mk-ticks li::before{ content:''; position:absolute; left:0; top:.42em; width:16px; height:16px; border-radius:50%; background:var(--mk-accent-soft);
  box-shadow:inset 0 0 0 5px var(--mk-accent-soft), inset 0 0 0 16px var(--mk-accent); }
.mk-product .mk-ctas{ margin-top:28px; }
.mk-product-shot{ margin:auto 0 0 clamp(24px, 3.2vw, 44px); border:1px solid var(--mk-line); border-right:0; border-bottom:0; border-radius:14px 0 0 0; overflow:hidden; background:var(--mk-mist); }
.mk-product-shot img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top left; }
.mk-product-band{ height:6px; background:var(--mk-accent); }

/* values: clarity, development, confidence */
.mk-values{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2.4vw, 28px); margin:0; padding:0; list-style:none; }
.mk-value{ padding:32px 28px; border-radius:20px; background:#fff; border:1px solid var(--mk-line); }
.mk-value-n{ display:inline-grid; place-items:center; width:40px; height:40px; margin-bottom:22px; border-radius:12px; background:var(--mk-butter); color:var(--mk-slate-ink); font-family:var(--mk-display); font-weight:800; font-size:16px; }
.mk-value .mk-h3{ font-size:22px; }

/* two columns of real examples, one per app */
.mk-uses{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.4vw, 28px); }
.mk-use{ padding:clamp(28px, 3vw, 40px); border-radius:24px; background:#fff; border:1px solid var(--mk-line); }
.mk-steps{ display:grid; gap:0; margin:24px 0 0; padding:0; list-style:none; counter-reset:mkstep; }
.mk-steps li{ position:relative; padding:0 0 22px 44px; counter-increment:mkstep; color:var(--mk-ink-2); }
.mk-steps li::before{ content:counter(mkstep); position:absolute; left:0; top:0; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--mk-accent-soft); color:var(--mk-accent-ink); font:700 14px var(--mk-display); }
.mk-steps li::after{ content:''; position:absolute; left:13.5px; top:32px; bottom:6px; width:1px; background:var(--mk-line); }
.mk-steps li:last-child{ padding-bottom:0; }
.mk-steps li:last-child::after{ display:none; }
.mk-steps b{ display:block; color:var(--mk-ink); font-weight:600; }

/* the family: Sunday Stack, then its two apps */
.mk-family{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2.4vw, 28px); margin-top:20px; }
.mk-family-parent{ display:flex; align-items:center; gap:16px; padding:24px 28px; border-radius:20px; background:var(--mk-slate); color:#fff; }
.mk-family-parent svg{ width:44px; height:44px; flex:none; }
.mk-family-parent b{ font-family:var(--mk-display); font-size:20px; letter-spacing:-.02em; }
.mk-family-parent span{ display:block; color:rgba(255,255,255,.8); font-size:15px; }
.mk-family-app{ display:flex; align-items:center; gap:16px; padding:24px 28px; border-radius:20px; background:#fff; border:1px solid var(--mk-line); text-decoration:none; color:var(--mk-ink);
  transition:border-color .18s ease, box-shadow .18s ease; }
@media (hover:hover){ .mk-family-app:hover{ border-color:var(--mk-accent); box-shadow:var(--mk-shadow); } }
.mk-family-app b{ font-family:var(--mk-display); font-size:20px; letter-spacing:-.02em; }
.mk-family-app span{ display:block; color:var(--mk-muted); font-size:15px; }
.mk-family-app .mk-link{ margin-left:auto; }
.mk-family-line{ grid-column:1 / -1; height:28px; margin:-8px auto -8px; width:50%; border:1px solid var(--mk-line); border-bottom:0; border-radius:14px 14px 0 0; }

/* a statement in Instrument Serif */
.mk-quote{ margin:0 auto; max-width:900px; font-family:var(--mk-serif); font-style:italic; font-weight:400; font-size:clamp(30px, 4.2vw, 52px); line-height:1.15; letter-spacing:-.01em; text-align:center; color:var(--mk-ink); text-wrap:balance; }
.mk-band-slate .mk-quote{ color:#fff; }

/* the last word */
.mk-final{ padding:clamp(48px, 6vw, 80px) clamp(24px, 5vw, 72px); border-radius:28px; background:var(--mk-slate); color:#fff; text-align:center; position:relative; overflow:hidden; }
.mk-final::after{ content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:var(--mk-butter); opacity:.9; }
.mk-final > *{ position:relative; z-index:1; }
.mk-final .mk-h2{ color:#fff; max-width:22ch; margin:0 auto; }
.mk-final p{ margin:16px auto 0; max-width:56ch; color:rgba(255,255,255,.82); }
.mk-final .mk-ctas{ justify-content:center; }
.mk-final .mk-btn-secondary{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
@media (hover:hover){ .mk-final .mk-btn-secondary:hover{ border-color:#fff; color:#fff; } }
.mk-final .mk-btn-light{ background:#fff; color:var(--mk-slate-ink); }
@media (hover:hover){ .mk-final .mk-btn-light:hover{ background:var(--mk-butter-soft); } }

/* product page: features beside screenshots */
.mk-feature{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 5vw, 72px); align-items:center; }
.mk-feature + .mk-feature{ margin-top:clamp(64px, 9vw, 112px); }
.mk-feature.mk-flip{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); }
.mk-feature.mk-flip .mk-feature-copy{ order:2; }
.mk-feature-copy .mk-eyebrow{ margin-bottom:12px; }
.mk-shot{ margin:0; border:1px solid var(--mk-line); border-radius:18px; overflow:hidden; background:var(--mk-mist); box-shadow:var(--mk-shadow); }
.mk-shot img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top left; }
.mk-shot figcaption{ padding:12px 16px; font-size:14px; color:var(--mk-muted); border-top:1px solid var(--mk-line); background:#fff; }
.mk-hero-shot{ margin-top:clamp(40px, 6vw, 64px); }
.mk-hero-shot .mk-shot{ box-shadow:var(--mk-shadow-lg); }

/* small cards for "also in" */
.mk-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.mk-card{ padding:24px; border:1px solid var(--mk-line); border-radius:18px; background:#fff; }
.mk-card b{ display:block; font-family:var(--mk-display); font-size:17px; letter-spacing:-.01em; }
.mk-card p{ margin:6px 0 0; font-size:15px; color:var(--mk-muted); }
.mk-card-ico{ display:inline-grid; place-items:center; width:36px; height:36px; margin-bottom:16px; border-radius:10px; background:var(--mk-accent-soft); color:var(--mk-accent-ink); }
.mk-card-ico svg{ width:18px; height:18px; }

/* a principle, set apart */
.mk-principle{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; padding:clamp(28px, 4vw, 48px); border-radius:24px; background:var(--mk-butter-soft); }
.mk-principle .mk-value-n{ margin:0; }
.mk-principle .mk-h3{ color:var(--mk-slate-ink); }
.mk-principle p{ margin:10px 0 0; color:var(--mk-ink-2); max-width:70ch; }

/* questions */
.mk-faq{ max-width:820px; margin:0 auto; border-top:1px solid var(--mk-line); }
.mk-faq details{ border-bottom:1px solid var(--mk-line); }
.mk-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; cursor:pointer; list-style:none;
  font-family:var(--mk-display); font-weight:600; font-size:18px; letter-spacing:-.01em; }
.mk-faq summary::-webkit-details-marker{ display:none; }
.mk-faq summary::after{ content:''; flex:none; width:12px; height:12px; border-right:2px solid var(--mk-muted); border-bottom:2px solid var(--mk-muted); transform:rotate(45deg) translateY(-3px); transition:transform .18s ease; }
.mk-faq details[open] summary::after{ transform:rotate(225deg) translateX(-3px); }
.mk-faq details p{ margin:0; padding:0 4px 22px; color:var(--mk-muted); max-width:68ch; }

/* about page prose */
.mk-prose{ max-width:720px; }
.mk-prose p{ margin:0 0 20px; font-size:18px; color:var(--mk-ink-2); }
.mk-prose .mk-h2{ margin:56px 0 16px; font-size:clamp(26px, 3vw, 34px); }

/* ── footer ── */
.mk-footer{ margin-top:clamp(72px, 10vw, 120px); border-top:1px solid var(--mk-line); background:#fff; }
.mk-foot{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding:56px 0 40px; }
.mk-foot p{ margin:16px 0 0; max-width:34ch; font-size:15px; color:var(--mk-muted); }
.mk-foot h2{ margin:0 0 14px; font:600 14px var(--mk-body); color:var(--mk-ink); }
.mk-foot ul{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.mk-foot ul a{ font-size:15px; color:var(--mk-muted); text-decoration:none; }
@media (hover:hover){ .mk-foot ul a:hover{ color:var(--mk-ink); text-decoration:underline; text-underline-offset:3px; } }
.mk-foot-base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:20px 0 32px; border-top:1px solid var(--mk-line-2); font-size:14px; color:var(--mk-muted); }

/* ── gentle reveals (off with reduced motion, and without JavaScript) ── */
.mk-js [data-mk-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.mk-js [data-mk-reveal="2"]{ transition-delay:.08s; }
.mk-js [data-mk-reveal="3"]{ transition-delay:.16s; }
.mk-js [data-mk-reveal].mk-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .mk-js [data-mk-reveal]{ opacity:1; transform:none; transition:none; }
  .mk-dd, .mk-btn, .mk-link svg, .mk-family-app{ transition:none; }
  html{ scroll-behavior:auto; }
}
@media print{ .mk-js [data-mk-reveal]{ opacity:1 !important; transform:none !important; } .mk-nav{ position:static; } }

/* ── tablets and phones ── */
@media (max-width: 1000px){
  .mk-nav-links, .mk-nav-acts .mk-signin, .mk-nav-acts .mk-btn{ display:none; }
  .mk-menu-btn{ display:inline-grid; }
  .mk-grid{ grid-template-columns:repeat(2, 1fr); }
  .mk-foot{ grid-template-columns:1fr 1fr; }
  .mk-foot > :first-child{ grid-column:1 / -1; }
  .mk-feature, .mk-feature.mk-flip{ grid-template-columns:1fr; gap:28px; }
  .mk-feature.mk-flip .mk-feature-copy{ order:0; }
}
@media (max-width: 760px){
  body.mk{ font-size:16px; }
  :root{ --mk-gutter:16px; }
  .mk-nav-in{ height:64px; }
  .mk-duo, .mk-pair, .mk-uses, .mk-values, .mk-family{ grid-template-columns:1fr; }
  .mk-family-line{ display:none; }
  .mk-product-shot{ margin-left:24px; }
  .mk-principle{ grid-template-columns:1fr; gap:16px; }
  .mk-final::after{ width:140px; height:140px; right:-50px; top:-50px; }
  .mk-ctas .mk-btn{ flex:1 1 auto; }
  .mk-family-app .mk-link{ display:none; }
}
@media (max-width: 480px){
  .mk-grid{ grid-template-columns:1fr; }
  .mk-foot{ grid-template-columns:1fr; }
}