IS the two-column grid — the rule above was overriding its display:grid, which stacked the page and left a dead gap (owner 2026-08-15) */ body.mk>main.mk-contact{display:grid} body.mk>.mk-footer{flex:none;margin-top:auto} /* One nav for every marketing page (owner 2026-08-15: the other pages didn't match the homepage). Geometry + the scrolled curve come from the homepage. */ /* Three columns, so the links sit on the page's true centre whatever is beside them. They used to be centred with margin:0 auto, which centres against the space LEFT OVER -- so adding a Log in link on the right pushed them off centre (owner 2026-09-02). */ .mk-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:34px;padding:10px max(24px,calc(50% - 609px)); position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);z-index:20; transition:border-radius .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background-color .28s} /* scrolled: full width, curved along the bottom — the mirror of the footer's curved top. Never a narrow pill; the logo stays where it is. */ /* 26px -> 10px: on the page's radius scale, where 10px is a large surface. At 26 the scrolled bar was the roundest thing left on the page. */ .mk-nav.floated{border-radius:0 0 6px 6px;background:rgba(255,255,255,.94); box-shadow:0 10px 34px rgba(16,17,21,.10)} @media (prefers-reduced-motion:reduce){.mk-nav{transition:none}} .mk-logo{height:48px} .mk-links{display:flex;gap:54px;margin:0;justify-content:center} .mk-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px} .mk-links a{color:var(--ink-soft);font-weight:500;font-size:16px} .mk-links a:hover{color:var(--ink)} /* The sparkle field is gone site-wide (owner 2026-08-15) — plain white reads cleaner and removes the fade-under-the-nav problem entirely. The -74px pull and its matching padding stay, so the hero still runs up behind the sticky bar and nothing shifts. */ .mk-hero{position:relative;text-align:center;margin-top:-74px;padding:162px 24px 110px; background:#fff} .mk-hero h1{font-size:clamp(44px,7vw,76px);font-weight:600;letter-spacing:-.02em} .mk-hero p{color:var(--ink-soft);font-size:16px;margin:18px 0 30px} .mk-steps{background:var(--bg);padding:70px 6vw;border-radius:6px 6px 0 0; display:flex;flex-direction:column;gap:70px} .mk-step{display:grid;grid-template-columns:1fr 1.25fr;gap:6vw;align-items:center; max-width:1200px;margin:0 auto;width:100%} .mk-step.rev .mk-copy{order:2} .mk-step img{border-radius:6px;box-shadow:var(--shadow-lg)} .mk-num{font-size:44px;font-weight:700;color:var(--ink);display:block;margin-bottom:8px} .mk-copy h2{font-size:34px;margin-bottom:12px} .mk-copy p{color:var(--ink-soft);max-width:42ch} .mk-band{background:var(--grad-blue);color:#fff;text-align:center;padding:84px 24px} .mk-band h2{font-size:clamp(30px,4.5vw,44px)} .mk-band p{opacity:.9;margin:14px 0 26px} .mk-band .btn-pill{background:#fff;color:var(--ink)} /* ---- skeletons ---- Placeholders in the shape of the real content, so the wait shows its size and the layout doesn't jump when data lands. The shimmer is one shared keyframe. */ /* BLUE (owner 2026-09-11: "Make all the loading tints BLUE"), the same tint the title box shimmers with, and square like everything else since the 2026-09 palette pass. */ .sk-box{background:linear-gradient(90deg,rgba(37,99,235,0) 25%,rgba(37,99,235,.13) 37%,rgba(37,99,235,0) 63%) #fff; background-size:400% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:0} @keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}} @media (prefers-reduced-motion:reduce){.sk-box{animation:none}} .lst-card.sk{pointer-events:none} .sk-thumb{height:150px;border-radius:6px;margin-bottom:12px} .sk-line{height:13px;margin-bottom:8px} .sk-line.short{width:55%} .sk-btn{height:34px;width:100%;border-radius:4px;margin-top:12px} /* phone-only action bar; hidden entirely on desktop, where the nav pill is always visible anyway */ .sticky-cta{display:none} @media (max-width:640px){ .sticky-cta{display:block;position:fixed;left:14px;right:14px;bottom:14px;z-index:40; background:var(--cta);color:#fff;text-align:center;font-weight:700;font-size:16px; padding:14px 18px;border-radius:4px; /* No shadow (owner 2026-08-31). It went through blue, neutral, and a four-stop fade before he asked for none -- the bar is a solid slab against the page and does not need lifting off it. */ opacity:0;transform:translateY(calc(100% + 14px));pointer-events:none; transition:opacity .24s ease,transform .34s cubic-bezier(.22,1,.36,1)} /* It ARRIVES rather than blinking on. The scroll handler used to toggle `hidden`, which is display:none and cannot be transitioned -- so the class carries the state and `hidden` is cleared once, on init. Off-screen by its own height plus the 14px inset, so nothing shows mid-slide. */ .sticky-cta.is-in{opacity:1;transform:none;pointer-events:auto} /* Still honoured: with no JS the bar never arrives, and a floating call to action that cannot be dismissed is worse than none. */ .sticky-cta[hidden]{display:none} } @media (max-width:640px) and (prefers-reduced-motion:reduce){ /* The slide is the decoration; appearing at all is the information. */ .sticky-cta{transform:none;transition:opacity .18s linear} } /* Keyboard users otherwise tab through the whole nav on every page before reaching the content. Off-screen until focused. */ /* Visually gone, still read aloud. Clipped rather than display:none — a hidden live region is never announced at all. */ .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} .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff; padding:11px 18px;border-radius:0 0 6px 0;font-weight:600;font-size:14px} .skip-link:focus{left:0} /* A mouse click never draws a ring. Belt and braces with :focus-visible below: some elements (a div with tabindex, and

) take focus on click in a way that used to fall through to the browser's own outline. */ :focus:not(:focus-visible){outline:none} /* Every element, not a list of six. The old rule named a, button, summary, input, select and textarea, so anything else that took focus -- the photo thumbs, and

which the skip link targets -- got Chrome's DEFAULT outline instead, which draws black and, on

, boxed the entire content area. */ :focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} /*

is a scroll target for the skip link, not a control. Landing on it should move the reader, not draw a box around the page. */ main:focus,main:focus-visible{outline:none} /* ---- FAQ ---- native

, so it works with JS off and is keyboard operable for free; the marker is replaced with a rotating chevron. */ .mk-faq{background:#fff;padding:96px clamp(20px,5vw,64px) 104px} .faq-wrap{max-width:820px;margin:0 auto} .mk-faq h2{font-size:clamp(28px,3.4vw,40px);font-weight:600;margin:0 0 28px} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative; font-size:19px;font-weight:600;line-height:1.4} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg);transition:transform .22s ease} .faq-item[open] summary::after{transform:rotate(-135deg)} .faq-item summary:hover{color:var(--ink-soft)} .faq-item p{margin:0 0 22px;color:var(--ink-soft);font-size:16px;line-height:26px;max-width:70ch} @media (max-width:640px){ .mk-faq{padding:56px 20px 64px} .mk-faq h2{font-size:26px;margin-bottom:16px} .faq-item summary{font-size:16px;padding:16px 36px 16px 0} .faq-item summary::after{top:22px} .faq-item p{font-size:16px;line-height:24px} } /* the contact form hands off to a mail client, so it has to say so */ .cf-promise{margin:12px 0 0;font-size:13px;color:var(--muted)} .cf-done{margin-top:14px;padding:13px 15px;border-radius:6px;background:var(--success-bg); border:1px solid rgba(24,169,87,.3);display:flex;flex-direction:column;gap:5px; font-size:14px;line-height:21px} .cf-done strong{font-weight:700} /* Rounded when the footer meets page content directly; square when a coloured band sits above it, because the band already carries the curve (owner). */ /* The closing block is WHITE (owner 2026-09-04: "I find the bottom page with the abrupt color change to be awkward. Revert to white"). Every section above it is white separated by a hairline, and the deep blue plate arrived under the last of them with no transition — the join read as an artefact rather than a close. So the footer joins that system: white ground, one hairline at the top, and no radius, because a rounded corner over white is a corner nobody can see. */ .mk-footer{position:relative;overflow:hidden;background:#fff; border-top:1px solid var(--line); color:var(--ink);text-align:center;padding:70px 24px 40px; border-radius:0;display:flex;flex-direction:column;align-items:center;gap:28px} .mk-footer.flush{border-radius:0} /* No watermark. The cta-shapes smear was drawn for the blue plate and was the last thing on the footer still arguing for one (owner 2026-09-04: "remove the watermark on the left side of the screen"). The block is the lockup, the nav and the legal line on white. */ .mk-footer>*{position:relative;z-index:1} .mk-footer img{height:56px} /* The chip was white on blue. On white it needs the tint to read as a chip at all, and the links their own ink. */ .mk-footer nav{display:flex;gap:8px;background:var(--bg);border-radius:6px;padding:6px} .mk-footer nav a{color:var(--ink);font-weight:600;font-size:14px;padding:8px 22px;border-radius:4px} .mk-footer nav a:hover{background:#fff} .mk-footer p{color:#63637A;font-size:14px;margin:0} @media (max-width:860px){.mk-step{grid-template-columns:1fr}.mk-step.rev .mk-copy{order:0} .mk-nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 20px} /* The grid's third column anchored these to the right edge; a flex row does not, so they have to claim the space themselves or the whole bar clumps left with the logo and leaves the right half empty. */ .mk-nav .mk-actions{margin-left:auto} .mk-links{order:3;width:100%;justify-content:center;gap:20px;margin:0}} /* ============ phones (iPhone SE 375 → Pro Max 430) ============ At 390px the desktop chrome overflowed the viewport — the logo lockup plus a 192px-min pill is wider than the screen, so the page scrolled sideways and every section inherited the shift. These rules shrink the chrome to fit and let long words break rather than push the layout. Page-specific geometry lives in each page's own