/* The honest Marketing page (Troy, 2 Nov 2026: honest marketing, then "Page looks boring. It needs to be the same
   caliber as the homepage and work pages"). A dark hero with the promises we found struck through; the survey as one
   dot per company; what agencies charge against Gold; Troy's note; where we put a business; the monthly work as
   coloured cards; the work behind the scenes; a monthly loop; the Gold card; questions as a chat with Troy.
   Pieces arrive once on screen (reveal.js); Motion: Off keeps everything still and in place. */

/* ---------- hero: the promises, struck through, then the stamp ---------- */
.mk-hero { --fg: #fffdf9; --fg-2: #dfd4ec; position: relative; overflow: hidden; background: radial-gradient(55% 70% at 85% 10%, #7a3bff66, transparent 60%), radial-gradient(45% 60% at 0% 100%, #ff6a3d33, transparent 60%), #160d33; color: #fffdf9; padding-bottom: clamp(48px, 6vw, 88px); }
.mk-hero .crumbs, .mk-hero .crumbs a { color: #cbb8f7; }
.mk-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(12px, 2vw, 24px); }
.mk-hero h1 { font: 800 clamp(48px, 6.6vw, 96px)/.92 var(--font-display); letter-spacing: -.06em; margin: 0; color: #fffdf9; }
.mk-hero h1 em { font-family: var(--font-aside); font-weight: 400; letter-spacing: -.03em; color: var(--lime); }
.mk-hero h1 .ed-hero__lead { display: block; width: fit-content; margin-bottom: 22px; color: #cbb8f7; border-color: #cbb8f766; }
.mk-hero .ed-lede { margin-top: 20px; max-width: 34ch; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.45; color: #dfd4ec; }
.mk-hero .btn--ink { background: var(--lime); color: var(--ink); }
.mk-hero__ghost { background: transparent; color: #fffdf9; border: 1px solid #ffffff59; }
.mk-hero .troy-line { color: #dfd4ec; }
.mk-wall { position: relative; padding: clamp(18px, 3vw, 30px); border-radius: 28px; background: #ffffff0d; border: 1px solid #ffffff1f; }
.mk-wall__tag { margin: 0 0 14px; font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #cbb8f7; }
.mk-wall ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mk-wall li { padding: 11px 16px; border-radius: 999px; background: #fffdf9; color: var(--ink); font: 800 clamp(15px, 1.5vw, 18px)/1.15 var(--font-display); letter-spacing: -.02em; transform: rotate(var(--r, 0deg)); box-shadow: 0 14px 26px -18px #000; }
.mk-wall li:nth-child(4n+1) { --r: -2deg; } .mk-wall li:nth-child(4n+2) { --r: 1.5deg; } .mk-wall li:nth-child(4n+3) { --r: -1deg; } .mk-wall li:nth-child(4n) { --r: 2deg; }
.mk-wall s { text-decoration: none; background: linear-gradient(#ff3d5a, #ff3d5a) no-repeat 0 55% / 100% 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mk-wall__stamp { position: absolute; right: clamp(10px, 3vw, 28px); bottom: clamp(-18px, -1.5vw, -12px); padding: 10px 18px; border: 3px solid var(--lime); border-radius: 12px; background: #160d33; color: var(--lime); font: 800 clamp(20px, 2.4vw, 30px)/1 var(--font-display); letter-spacing: -.02em; transform: rotate(-7deg); box-shadow: 0 16px 30px -12px #000a; }
.motion-on .mk-wall s { transition: background-size .45s var(--settle); }
.motion-on .mk-wall li:nth-child(1) s { transition-delay: .25s; } .motion-on .mk-wall li:nth-child(2) s { transition-delay: .5s; } .motion-on .mk-wall li:nth-child(3) s { transition-delay: .75s; } .motion-on .mk-wall li:nth-child(4) s { transition-delay: 1s; }
.motion-on .mk-wall li:nth-child(5) s { transition-delay: 1.25s; } .motion-on .mk-wall li:nth-child(6) s { transition-delay: 1.5s; } .motion-on .mk-wall li:nth-child(7) s { transition-delay: 1.75s; } .motion-on .mk-wall li:nth-child(8) s { transition-delay: 2s; }
.motion-on .mk-wall:not(.is-in) s { background-size: 0% 4px; }
.motion-on .mk-wall:not(.is-in) .mk-wall__stamp { opacity: 0; }
.motion-on .mk-wall.is-in .mk-wall__stamp { animation: mk-stamp .6s 2.5s var(--settle) both; }
@keyframes mk-stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-20deg); } 60% { opacity: 1; transform: scale(.92) rotate(-5deg); } 100% { opacity: 1; transform: scale(1) rotate(-7deg); } }

/* ---------- the survey: one dot per company ---------- */
.mk-survey { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mk-big { display: flex; align-items: center; gap: 16px; margin: clamp(22px, 3vw, 34px) 0 0; }
.mk-big b { font: 800 clamp(88px, 11vw, 150px)/.8 var(--font-display); letter-spacing: -.07em; color: #e5484d; }
.mk-big span { font: 700 clamp(19px, 2vw, 24px)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.mk-waffle { padding: clamp(18px, 3vw, 28px); border-radius: 26px; background: #fffdf9; border: 1px solid #0d10241a; box-shadow: 0 24px 50px -36px #0d1024aa; }
.mk-waffle__dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(6px, 1vw, 10px); }
.mk-dot { display: block; aspect-ratio: 1; border-radius: 50%; }
.mk-dot--red { background: #e5484d; } .mk-dot--orange { background: #ff8a3d; } .mk-dot--lime { background: var(--lime); box-shadow: inset 0 0 0 2px #0d102433; } .mk-dot--grey { background: #e2dcd2; }
.motion-on .mk-waffle:not(.is-in) .mk-waffle__dots .mk-dot { opacity: 0; transform: scale(.3); }
.motion-on .mk-waffle .mk-waffle__dots .mk-dot { transition: opacity .35s var(--settle), transform .45s var(--settle); transition-delay: calc(var(--i) * 22ms); }
.mk-legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.mk-legend li { display: grid; grid-template-columns: 18px 34px 1fr; align-items: center; gap: 8px; font: 500 15px/1.35 var(--font-body); color: var(--ink); }
.mk-legend .mk-dot { width: 16px; }
.mk-legend b { font: 800 20px/1 var(--font-display); }
.mk-google { margin: clamp(28px, 4vw, 48px) 0 0; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--ink); color: #fffdf9; display: grid; gap: 10px; }
.mk-google blockquote { margin: 0; font: italic 400 clamp(28px, 3.6vw, 48px)/1.1 var(--font-aside); letter-spacing: -.02em; }
.mk-google figcaption { font: 500 15px/1.4 var(--font-body); color: #cfcede; }
.mk-google a { color: var(--lime); }
.mk-method { margin: 14px 0 0; max-width: 80ch; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ---------- what they charge ---------- */
.mk-prices { background: radial-gradient(50% 60% at 100% 0%, #7a3bff40, transparent 60%), var(--ink); }
.mk-prices .ed-head h2 em { color: var(--lime); }
.mk-bars { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; display: grid; }
.mk-bars li { display: grid; grid-template-columns: minmax(0, 250px) 200px minmax(0, 1fr); align-items: center; column-gap: 22px; padding: 14px 0; border-bottom: 1px solid #ffffff14; }
.mk-bars__what { font: 700 17px/1.2 var(--font-display); color: #fff; }
.mk-bars__what i { display: block; margin-top: 6px; font: 600 11px/1 var(--font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #a9a6bd; }
.mk-bars__price { font: 800 clamp(26px, 2.6vw, 34px)/1 var(--font-display); letter-spacing: -.03em; color: #ff8a3d; white-space: nowrap; }
.mk-bars__price small { display: block; margin-top: 5px; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #a9a6bd; }
.mk-bars__bar { height: 22px; }
.mk-bars__bar::before { content: ''; display: block; width: var(--w); min-width: 12px; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff8a3d, #e5484d); transform-origin: left center; }
.mk-bars .mk-bars__us { margin: 10px -20px 0; padding: 18px 20px; border: 1px solid #c6ff3d66; border-radius: 22px; background: #c6ff3d12; }
.mk-bars__us .mk-bars__what i, .mk-bars__us .mk-bars__price { color: var(--lime); }
.mk-bars__us .mk-bars__bar::before { background: var(--lime); box-shadow: 0 0 22px #c6ff3d99; }
.motion-on .mk-bars:not(.is-in) .mk-bars__bar::before { transform: scaleX(0); }
.motion-on .mk-bars .mk-bars__bar::before { transition: transform .9s var(--settle) calc(var(--i) * .12s); }
.motion-on .mk-bars:not(.is-in) .mk-bars__us { opacity: 0; transform: translateY(14px); }
.motion-on .mk-bars .mk-bars__us { transition: opacity .5s var(--settle) .8s, transform .6s var(--settle) .8s; }
.mk-pricefacts { list-style: none; margin: clamp(26px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mk-pricefacts li { display: grid; align-content: start; gap: 10px; padding: 22px; border-radius: 22px; background: #ffffff0d; border: 1px solid #ffffff1f; }
.mk-pricefacts b { font: 800 clamp(30px, 3.4vw, 44px)/1 var(--font-display); letter-spacing: -.04em; color: #ff8a3d; }
.mk-pricefacts span { font: 500 15px/1.45 var(--font-body); color: #dfd4ec; }
.mk-prices .mk-method { color: #a9a6bd; }

/* ---------- Troy's note ---------- */
.mk-note { margin: 0; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mk-note__face { position: relative; }
.mk-note__face::before { content: ""; position: absolute; inset: -12px 12px 12px -12px; border-radius: 30px; background: var(--lime); transform: rotate(-3deg); }
.mk-note__face img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px -36px #0d1024aa; }
.mk-note blockquote { margin: 0; }
.mk-note blockquote p { margin: 0 0 18px; font: 700 clamp(24px, 2.8vw, 38px)/1.2 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.mk-note blockquote p:first-child { font-weight: 500; color: #3d3f52; font-size: clamp(20px, 2.1vw, 28px); }
.mk-note mark { background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 85% / 100% 42%; color: inherit; padding: 0 2px; }
.motion-on .mk-note mark { transition: background-size .8s .4s var(--settle); }
.motion-on .mk-note:not(.is-in) mark { background-size: 0% 42%; }
.mk-note footer { display: flex; align-items: baseline; gap: 10px; font: italic 400 34px/1 var(--font-aside); color: #6b32c2; }
.mk-note footer span { font: 700 12px/1 var(--font-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- everywhere your customers look ---------- */
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mk-places { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mk-places li { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px; background: #fffdf9; border: 1px solid #0d10241f; font: 700 16px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); box-shadow: 0 12px 24px -20px #0d1024aa; }
.mk-places li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px #0d102440; }
.motion-on .mk-places li { transition: transform .4s var(--settle), opacity .4s var(--settle); transition-delay: calc(var(--i) * 70ms); }
.motion-on .mk-places:not(.is-in) li { opacity: 0; transform: translateY(12px) scale(.9); }
.motion-on .mk-places.is-in li::before { animation: mk-ping 1.6s calc(var(--i) * 70ms + .6s) ease-out 2; }
@keyframes mk-ping { 0% { box-shadow: 0 0 0 1px #0d102440, 0 0 0 0 #c6ff3daa; } 100% { box-shadow: 0 0 0 1px #0d102440, 0 0 0 10px #c6ff3d00; } }
.mk-shot, .mk-behind figure { margin: 0; border-radius: 24px; overflow: hidden; background: #efebe4; box-shadow: 0 26px 50px -34px #0d1024aa; }
.mk-shot img, .mk-behind figure img { display: block; width: 100%; height: auto; }
.motion-on .mk-shot { transition: opacity .7s var(--settle), transform .7s var(--settle); }
.motion-on .mk-shot:not(.is-in) { opacity: 0; transform: translateY(30px) rotate(1.5deg); }

/* ---------- what we do every month: coloured cards with small pictures ---------- */
.mk-cards { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mk-card { display: grid; align-content: start; gap: 8px; padding: 16px 16px 20px; border-radius: 24px; transition: transform .3s var(--settle), box-shadow .3s var(--settle); }
.mk-card h3 { margin: 6px 0 0; font: 800 clamp(20px, 1.8vw, 23px)/1.1 var(--font-display); letter-spacing: -.03em; }
.mk-card p { margin: 0; font-size: 15px; line-height: 1.45; color: #3d3f52; }
.mk-card__art { position: relative; display: grid; place-items: center; height: 118px; border-radius: 18px; background: #ffffff8c; overflow: hidden; }
.mk-card--lilac { background: #e9ddff; } .mk-card--lime { background: #d9ff8a; } .mk-card--peach { background: #ffd9c9; } .mk-card--sky { background: #d4ecff; }
.mk-card--grape { background: #27154c; color: #fffdf9; } .mk-card--grape p { color: #dfd4ec; } .mk-card--grape .mk-card__art { background: #3a2470; }
.mk-card--butter { background: #fff1b8; } .mk-card--mint { background: #d3f5e4; } .mk-card--blush { background: #fbd9ea; }
@media (hover: hover) { .mk-card:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 28px 44px -30px #0d102499; } }
.motion-on .mk-card { transition: opacity .6s var(--settle), transform .6s var(--settle), box-shadow .3s var(--settle); }
.motion-on .mk-card:not(.is-in) { opacity: 0; transform: translateY(24px); }
.motion-on .mk-card.is-in .mk-card__art > * { animation: mk-pop .6s .15s var(--settle) both; }
@keyframes mk-pop { 0% { opacity: 0; transform: translateY(14px) scale(.85); } 70% { opacity: 1; transform: translateY(-3px) scale(1.04); } 100% { opacity: 1; transform: none; } }
/* The small pictures. */
.mk-art-bars { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.mk-art-bars i { width: 22px; border-radius: 6px 6px 0 0; background: linear-gradient(#7a3bff, #c9b6ff); }
.mk-art-bars i:nth-child(1) { height: 30%; } .mk-art-bars i:nth-child(2) { height: 50%; } .mk-art-bars i:nth-child(3) { height: 72%; } .mk-art-bars i:nth-child(4) { height: 100%; background: linear-gradient(#ff6a3d, #ffb199); }
.mk-art-search { display: grid; gap: 6px; width: 84%; padding: 10px 14px; border-radius: 999px 999px 16px 16px; background: #fffdf9; box-shadow: 0 10px 20px -14px #0d1024aa; }
.mk-art-search b { font: 600 13px/1.2 var(--font-body); } .mk-art-search b::before { content: "⌕ "; color: #6b6577; }
.mk-art-search i { font: 700 11px/1 var(--font-mono); font-style: normal; color: #1a9b55; }
.mk-art-post { display: grid; gap: 6px; width: 80%; padding: 12px; border-radius: 12px; background: #fffdf9; box-shadow: 0 10px 20px -14px #0d1024aa; }
.mk-art-post b { font: 800 13px/1.2 var(--font-display); } .mk-art-post i { height: 6px; border-radius: 4px; background: #eadfd8; } .mk-art-post i + i { width: 70%; }
.mk-art-flag { display: grid; gap: 6px; width: 80%; padding: 10px 12px; border-radius: 12px; background: #fffdf9; box-shadow: 0 10px 20px -14px #0d1024aa; }
.mk-art-flag b { font: 800 14px/1.1 var(--font-display); color: #6b6577; text-decoration: line-through 2px #e5484d; }
.mk-art-flag i { justify-self: start; padding: 5px 10px; border-radius: 999px; background: #e5484d; font: 700 11px/1 var(--font-body); font-style: normal; color: #fff; }
.mk-art-update { display: grid; gap: 4px; width: 80%; padding: 10px 12px; border-radius: 12px; background: #fffdf9; box-shadow: 0 10px 20px -14px #0d1024aa; }
.mk-art-update small { font: 700 10px/1 var(--font-mono); color: #6b6577; } .mk-art-update b { font: 800 14px/1.1 var(--font-display); color: #1a3fd1; }
.mk-art-update i { justify-self: start; padding: 5px 10px; border-radius: 999px; background: var(--coral); font: 700 11px/1 var(--font-body); font-style: normal; color: var(--ink); }
.mk-art-rank { display: flex; align-items: baseline; gap: 10px; color: #fffdf9; }
.mk-art-rank b { font: 800 54px/1 var(--font-display); letter-spacing: -.04em; } .mk-art-rank i { font: 800 18px/1 var(--font-mono); font-style: normal; color: var(--lime); }
.mk-art-vs { display: flex; gap: 10px; }
.mk-art-vs i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fffdf9; font: 800 13px/1 var(--font-display); font-style: normal; box-shadow: 0 10px 20px -14px #0d1024aa; }
.mk-art-vs i:first-child { background: var(--ink); color: var(--lime); }
.mk-art-ai { display: grid; gap: 4px; width: 84%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #fffdf9; box-shadow: 0 10px 20px -14px #0d1024aa; }
.mk-art-ai small { font: 700 10px/1 var(--font-mono); color: #1a9b55; } .mk-art-ai b { font: 600 13px/1.3 var(--font-body); }
.mk-art-ticks { display: grid; gap: 6px; }
.mk-art-ticks i { padding: 5px 12px; border-radius: 999px; background: #fffdf9; font: 700 12px/1 var(--font-body); font-style: normal; color: #1a9b55; box-shadow: 0 8px 16px -12px #0d1024aa; }

/* ---------- behind the scenes ---------- */
.mk-behind-zone { background: radial-gradient(60% 70% at 90% 0%, #7a3bff59, transparent 60%), #27154c; }
.mk-behind-zone .ed-head h2 em { color: var(--lime); }
.mk-behind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 48px); }
.mk-behind article { display: grid; align-content: start; gap: 10px; }
.mk-behind h3 { margin: 8px 0 0; font: 800 22px/1.1 var(--font-display); letter-spacing: -.03em; color: #fffdf9; }
.mk-behind p { margin: 0; color: #dfd4ec; font-size: 16px; line-height: 1.5; }
/* A library of what works, as a drawer of index cards (Troy, 3 Nov 2026: "They are bland"). */
.mk-library { position: relative; display: grid; align-content: center; justify-items: center; aspect-ratio: 1; padding: 34px 8% 26px; border-radius: 24px; overflow: hidden; border: 1px solid #ffffff1f;
  background: radial-gradient(75% 55% at 50% 0%, #7a3bff4d, transparent 70%), repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 28px), #160d33; }
.mk-library .mk-library__card { --c: var(--lime); position: relative; width: 100%; max-width: 360px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; margin: 0; padding: 20px 20px 16px; border-radius: 4px 14px 14px 14px; color: var(--ink);
  background: linear-gradient(90deg, transparent 0 46px, #ff6a3d55 46px 47.5px, transparent 47.5px), repeating-linear-gradient(180deg, transparent 0 25px, #0d102414 25px 26px), var(--c); box-shadow: 0 22px 34px -20px #000d; }
.mk-library__card + .mk-library__card { margin-top: 26px; }
.mk-library__card:nth-child(1) { rotate: -4deg; translate: -4% 0; }
.mk-library__card:nth-child(2) { --c: #e9e2ff; rotate: 2.5deg; translate: 5% 0; z-index: 1; }
.mk-library__card:nth-child(3) { --c: #ffe3d8; rotate: -1.5deg; translate: -2% 0; z-index: 2; }
.mk-library__card i { position: absolute; left: 0; bottom: 100%; padding: 7px 13px 5px; border-radius: 10px 10px 0 0; background: var(--c); font: 700 10.5px/1 var(--font-mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.mk-library__card b { font: 800 clamp(42px, 4.4vw, 58px)/.95 var(--font-display); letter-spacing: -.05em; }
.mk-library__card span { font: 700 15px/1.25 var(--font-body); }
.mk-library__card--skip::after { content: "Skip"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; rotate: -14deg; padding: 5px 11px 4px; border: 3px solid var(--coral); border-radius: 9px; color: var(--coral); font: 800 17px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.motion-on .mk-library__card { transition: transform .8s var(--settle), opacity .5s var(--settle); }
.motion-on .mk-behind article:not(.is-in) .mk-library__card { opacity: 0; transform: translateY(46px) rotate(8deg); }
.motion-on .mk-library__card:nth-child(2) { transition-delay: .1s; } .motion-on .mk-library__card:nth-child(3) { transition-delay: .2s; }
.motion-on .mk-library__card--skip::after { transition: scale .35s var(--snap) .9s, opacity .35s .9s; }
.motion-on .mk-behind article:not(.is-in) .mk-library__card--skip::after { scale: 2.2; opacity: 0; }
.motion-on .mk-behind article { transition: opacity .6s var(--settle), transform .6s var(--settle); }
.motion-on .mk-behind article:not(.is-in) { opacity: 0; transform: translateY(26px); }
/* The research tools, each with a real piece of it: searches a month, Google's suggestions, and the map. */
.mk-tools { list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mk-tools > li { display: grid; align-content: start; gap: 6px; padding: 12px 12px 20px; border-radius: 24px; background: #ffffff0d; border: 1px solid #ffffff1f; color: #dfd4ec; }
.mk-tools h3 { margin: 12px 8px 0; font: 800 19px/1.15 var(--font-display); letter-spacing: -.02em; color: #fffdf9; }
.mk-tools > li > p { margin: 0 8px; font-size: 15px; line-height: 1.45; }
.mk-tool__art { position: relative; height: 176px; border-radius: 16px; overflow: hidden; }
.mk-tool__art--numbers { display: grid; align-content: center; gap: 10px; padding: 16px 18px; background: #fffdf9; color: var(--ink); }
.mk-tool__art--numbers p { margin: 0; font: 700 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #6b6577; }
.mk-tool__art--numbers ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-tool__art--numbers li { position: relative; isolation: isolate; display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: 10px; font: 600 13px/1.2 var(--font-body); }
.mk-tool__art--numbers li::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #c6ff3d, #c6ff3dbb); transform-origin: left; }
.mk-tool__art--numbers b { font: 800 14px/1.2 var(--font-display); }
.mk-tool__art--ask { display: grid; align-content: center; padding: 16px; background: radial-gradient(90% 80% at 100% 0%, #ff2d9526, transparent 60%), linear-gradient(160deg, #efeaff, #d7cbff); }
.mk-ask { border-radius: 18px; background: #fff; box-shadow: 0 16px 30px -18px #3b1d8a99; overflow: hidden; }
.mk-ask__q { display: flex; align-items: center; gap: 3px; margin: 0; padding: 11px 16px; border-bottom: 1px solid #0d102414; font: 600 14px/1 var(--font-body); color: var(--ink); }
.mk-ask__q::after { content: ""; width: 2px; height: 17px; background: var(--violet); }
.mk-ask ul { list-style: none; margin: 0; padding: 6px 0 8px; }
.mk-ask li { padding: 6px 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 13px/1.3 var(--font-body); color: #55576b; }
.mk-ask li b { font-weight: 700; color: var(--ink); }
.mk-tool__art--map { background: repeating-linear-gradient(32deg, transparent 0 38px, #ffffff12 38px 41px), repeating-linear-gradient(-58deg, transparent 0 56px, #ffffff0d 56px 59px), radial-gradient(60% 60% at 50% 50%, #2a2f63, #151834); }
.mk-map__dots { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #16e0b4 0 17%, #c6ff3d 17% 33%, #ffd60a 33% 52%, #ff6a3d 52%);
  -webkit-mask: radial-gradient(circle, #000 5.5px, #0000 6px) center / 26px 26px; mask: radial-gradient(circle, #000 5.5px, #0000 6px) center / 26px 26px; }
.mk-tool__art--map img { position: absolute; left: 50%; top: 50%; z-index: 1; width: 44px; height: 44px; padding: 6px; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #ffffff3d, 0 12px 20px -6px #000a; }
.mk-tool__art--map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; }
.motion-on .mk-tool__art--numbers li::before { transition: transform 1.1s var(--settle) calc(.15s + var(--i) * .12s); }
.motion-on .mk-tools > li:not(.is-in) .mk-tool__art--numbers li::before { transform: scaleX(0); }
.motion-on .mk-ask li { transition: opacity .4s var(--settle) calc(.3s + var(--i) * .14s), translate .5s var(--settle) calc(.3s + var(--i) * .14s); }
.motion-on .mk-tools > li:not(.is-in) .mk-ask li { opacity: 0; translate: 0 8px; }
.motion-on .mk-ask__q::after { animation: mk-caret 1.1s steps(1) infinite; }
.motion-on .mk-map__dots { transition: clip-path 1.4s var(--settle) .1s; clip-path: circle(75% at 50% 50%); }
.motion-on .mk-tools > li:not(.is-in) .mk-map__dots { clip-path: circle(0% at 50% 50%); }
.motion-on .mk-tools > li.is-in .mk-tool__art--map::after { animation: mk-ping 2.6s var(--settle) 1.2s infinite; }
@keyframes mk-caret { 50% { opacity: 0; } }
@keyframes mk-ping { from { scale: 1; opacity: .9; } to { scale: 3.4; opacity: 0; } }
html.reduce-motion .mk-tools *, html.reduce-motion .mk-library *, html.reduce-motion .mk-tools *::before, html.reduce-motion .mk-tools *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .mk-tools *, .mk-library *, .mk-tools *::before, .mk-tools *::after { animation: none !important; transition: none !important; } }

/* ---------- every month, round again: the Curveball goes round the loop ---------- */
.mk-loopwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mk-loopsteps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.mk-loopsteps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; color: #3d3f52; }
.mk-loopsteps b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--lime); font: 700 13px/1 var(--font-mono); }
.mk-loopsteps strong { font: 800 18px/1.2 var(--font-display); color: var(--ink); }
.mk-loop { --r: min(36vw, 190px); position: relative; justify-self: center; width: calc(var(--r) * 2 + 120px); aspect-ratio: 1; }
.mk-loop__ring { position: absolute; inset: 60px; border-radius: 50%; border: 4px dashed #0d102433; }
.mk-loop__ball { position: absolute; inset: 0; animation: mk-orbit 9s linear infinite; }
.mk-loop__ball::after { content: ""; position: absolute; left: 50%; top: 60px; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fffdf9 url(/assets/img/logo-mark-160.webp?v=1d735686) center / 34px no-repeat; box-shadow: 0 10px 22px -8px #7a3bffaa; }
@keyframes mk-orbit { to { transform: rotate(360deg); } }
.mk-loop__stop { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.mk-loop__stop b { display: block; translate: -50% -50%; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: #fffdf9; font: 800 15px/1 var(--font-display); white-space: nowrap; box-shadow: 0 12px 22px -14px #0d1024; }
.mk-loop__core { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.mk-loop__core b { font: italic 400 clamp(26px, 3vw, 36px)/1.05 var(--font-aside); color: #6b32c2; }

/* ---------- the Gold card ---------- */
.mk-gold { position: relative; max-width: 760px; margin: 0 auto; display: grid; gap: 12px; padding: clamp(24px, 4vw, 44px); border-radius: 32px; overflow: hidden; isolation: isolate; color: var(--ink); background: linear-gradient(135deg, #fff3c4 0%, #ffd76a 38%, #f5b82e 62%, #ffe9a3 100%); box-shadow: 0 40px 80px -40px #7a520099, inset 0 1px 0 #ffffff88; }
.mk-gold::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: linear-gradient(115deg, transparent 42%, #ffffffa6 50%, transparent 58%); transform: translateX(-70%); }
.motion-on .mk-gold.is-in::before { animation: mk-shine 1.8s .3s var(--settle) both; }
@keyframes mk-shine { to { transform: translateX(70%); } }
.mk-gold__metal { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.mk-gold__metal span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #ffd76a; font-size: 18px; }
.mk-gold h2 { margin: 6px 0 0; font: 800 clamp(34px, 4.4vw, 56px)/1 var(--font-display); letter-spacing: -.045em; }
.mk-gold__price { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.mk-gold__price b { font: 800 clamp(72px, 8vw, 104px)/.9 var(--font-display); letter-spacing: -.05em; }
.mk-gold__price small { font: 600 17px/1 var(--font-body); }
.mk-gold ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
.mk-gold li { display: flex; gap: 10px; font: 600 16px/1.35 var(--font-body); }
.mk-gold li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 12px; }
.mk-gold__fine { margin: 4px 0 0; font-size: 14px; color: #4a3a12; }
.mk-gold .btn--ink { background: var(--ink); }
.mk-gold .btn--ghost { color: var(--ink); }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) { .mk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .mk-hero__grid, .mk-survey, .mk-note, .mk-split, .mk-behind, .mk-tools, .mk-loopwrap { grid-template-columns: 1fr; }
  .mk-library { aspect-ratio: auto; min-height: 340px; }
  .mk-note__face { max-width: 280px; }
  .mk-gold ul, .mk-pricefacts { grid-template-columns: 1fr; }
  .mk-bars li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .mk-bars__price { text-align: right; }
  .mk-bars__bar { grid-column: 1 / -1; height: 14px; }
  .mk-bars .mk-bars__us { margin-inline: -14px; padding-inline: 14px; }
}
@media (max-width: 520px) {
  .mk-cards { grid-template-columns: 1fr; }
  .mk-loop { --r: 118px; }
  .mk-loop__stop b { padding: 7px 11px; font-size: 13px; }
  .mk-wall__stamp { position: static; display: inline-block; margin-top: 16px; }
}

/* ---------- Motion: Off and reduced motion: everything in place, nothing moving ---------- */
html.reduce-motion .mk-loop__ball { animation: none; }
@media (prefers-reduced-motion: reduce) { .mk-loop__ball, .mk-places li::before { animation: none !important; } }