/* FrankieGPT marketing skin. Flat, warm, tonally layered. Depth comes from stacking three creams, never from a shadow or a blur. Rotation is the depth cue. Type does the work. Loaded by site.php and legal.php, after site.css and before a11y.css. Stamped with MARKET_V from lib.php, and nothing else. ============================ WHAT LIVES WHERE ============================ site.css tokens and controls - shared with app.frankiegpt.com's login, signup, reset, confirm_email, notfound market.css layout and ornament - marketing pages only contact.css the contact form - shared with app.frankiegpt.com/contact/ A button, a field and a focus ring are defined ONCE, in site.css, so that a visitor who taps "Start free" does not cross a visual seam into the wizard. Anything that arranges a page belongs here instead. Every rule is scoped under body.mk. A page opts in with 'bodyClass' => 'mk' and rolls back by deleting that one word, live on the next request, because the HTML is no-store while this file is immutable. ============================== INVARIANTS ============================== These carry over from site.css and are restated because this file is where they are easiest to break. Read them before changing layout. 1. NEVER put overflow-x on . Horizontal clipping lives on . Two axes where one is hidden makes the other compute to auto, and body silently becomes a second scroll container. 2. A transform that moves an element DOWN creates scrollable overflow on its ancestor. The footer reveal added exactly 16px this way once. Animate the contents of a box that already clips, never the box. A ROTATION has the same hazard sideways: a tilted card is wider than its layout box. Every tilted thing here sits in a padded container. 3. img keeps height:auto. A width/height attribute is a presentational hint, so a rule that sets only width lets the attribute supply the height and the picture is squashed. 4. ONE version key. This file is served immutable for a year. 5. A link removed from the header bar at a breakpoint MUST appear in the menu at that same breakpoint. site.css already encodes this at 960px and 1080px via .nm-dup. THIS FILE REUSES THOSE EXACT BREAKPOINTS and does not invent new ones for the header. Do not "tidy" them. 6. Colours are chosen against the WORST background they sit on. The page ground is now --cream-2 #F4EAD6, which invariant 6 in site.css already names as that worst case, so every tuned token is valid by construction. 7. NEW: --faint on --mk-sand-2 is 4.35:1 and FAILS. --faint is permitted on --paper, --cream and --cream-2 only. On --mk-sand-2 or anything darker, use --mut (5.10:1). 8. --gold is ORNAMENT ONLY: marker blocks behind ink text, sticker fills, the numerals on the step cards. #E9BC5C on the ground is about 1.7:1, so it is never a text colour and never the only thing carrying a state. --amber IS legal as text. Measured on the new ground it is 4.50:1, which is the same figure site.css tuned it to; it has no margin to spare, so do not lighten it and do not put it on --mk-sand-2 without re-checking. 9. No shadows, no gradients, no backdrop-filter anywhere in this file. A backdrop-filter also creates a containing block for position:fixed descendants, which would trap the nav drawer inside the header. ======================================================================== */ body.mk { /* ---- Surfaces. The page is the DEEPER cream and cards are the lighter one, which is the inversion that produces the layered look. ---- */ --mk-ground: #F4EAD6; /* page */ --mk-surface: #FFFDF7; /* cards, wells */ --mk-surface-2: #FAF4E8; /* nested cards */ --mk-sand-2: #EFE3CB; /* deepest well. See invariant 7. */ --mk-capsule: #F3E2C4; /* nav capsule */ --mk-rule: 1.5px; /* the reference draws its hairlines at 1.5 */ /* ---- Radius. Images stay square on purpose. ---- */ --mk-r-0: 0; --mk-r-sm: 15px; --mk-r-nav:16px; --mk-r-md: 20px; --mk-r-lg: 24px; --mk-r-xl: 30px; /* ---- Section rhythm ---- */ --mk-sec: 84px; --mk-sec-md: 56px; /* ---- Well padding. The card paddings are stated at each component, because 40 / 50 / 70 only ever meant "whatever that card needs". ---- */ --mk-well: 48px; /* ---- Measure ---- */ --mk-container: 1280px; --mk-read: 68ch; --mk-gutter: 30px; /* Tilt angles are NOT tokens. Each tilted component states its own --deg, either inline from fg_pill()/fg_mark()/fg_sticker() or in its own rule, because the right angle depends on how much room the component has. ---- */ --mk-ease: cubic-bezier(.4, 0, .2, 1); background: var(--mk-ground); } /* ============================ TYPE ============================ Written in rem with clamp, not the reference's fixed px, so that a person who has set a larger default font size gets one, and so browser zoom behaves. Tracking is in em, never px, so it survives the accessibility panel's dyslexia font swap: a value tuned for Fraunces collides in a different face. Never tighter than -0.035em, and always breakable. The accessibility panel snapshots a computed font size and writes it back as a frozen px value, and it never re-measures on resize, so a heading scaled at desktop width and then narrowed WILL overflow unless the words themselves can break. That is invariant 1 territory: overflow-wrap and hyphens are not decoration here. ============================================================== */ body.mk h1, body.mk .mk-h1 { font-family: var(--serif); font-size: clamp(2.25rem, 1.3rem + 4.4vw, 6.5rem); /* 36px -> 104px */ font-weight: 700; line-height: .96; letter-spacing: -0.035em; overflow-wrap: anywhere; hyphens: auto; } body.mk h2, body.mk h2.sec, body.mk .mk-h2 { font-family: var(--serif); font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.75rem); /* 28px -> 60px */ font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; overflow-wrap: anywhere; hyphens: auto; } body.mk h3, body.mk .mk-h3 { font-family: var(--serif); font-size: clamp(1.3125rem, 1.05rem + 1.1vw, 2rem); /* 21px -> 32px */ font-weight: 700; line-height: 1.14; letter-spacing: -0.02em; overflow-wrap: anywhere; } body.mk h4, body.mk .mk-h4 { font-family: var(--serif); font-size: clamp(1.125rem, 1rem + .55vw, 1.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; } body.mk { font-size: 1.0625rem; line-height: 1.62; color: var(--ink); } body.mk .lede, body.mk .mk-lead { font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); line-height: 1.55; color: var(--mut); max-width: 62ch; } /* Eyebrow. --faint is legal on paper, cream and cream-2 only. */ body.mk .kicker, body.mk .mk-kicker { display: block; font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; } /* ============================ LAYOUT ============================ */ body.mk .wrap { max-width: var(--mk-container); padding-left: 28px; padding-right: 28px; } body.mk .wrap.narrow { max-width: 820px; } body.mk section.band { padding: var(--mk-sec) 0; background: transparent; } /* The alternating band is a tonal step, not a different colour family. */ body.mk section.band.alt { background: var(--mk-sand-2); } body.mk .page-top { padding: 72px 0 var(--mk-sec-md); } body.mk .page-top h1 { margin: 18px 0 0; max-width: 18ch; } body.mk .page-top .lede { margin-top: 24px; } body.mk .crumbs { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } body.mk .crumbs a { color: var(--faint); } body.mk .crumbs a:hover { color: var(--amber-deep); } body.mk .crumbs .sep { margin: 0 8px; opacity: .6; } /* ============================ CHROME ============================ One capsule holds the navigation and both account controls. The reference keeps its CTA outside the pill; here it sits inside as a dark chip, which gets the same read with no change to the markup the app's login and signup pages hand-write for themselves. ================================================================ */ body.mk .site-head { position: sticky; top: 0; /* z-index 40 in site.css is under later sections; the drawer is a fixed child of this stacking context, so the header has to win outright. */ z-index: 90; background: var(--mk-ground); border-bottom: 0; /* A backdrop-filter would make this element the containing block for the fixed drawer below and trap it inside the header. It is also off-brief. Do not put it back. */ -webkit-backdrop-filter: none; backdrop-filter: none; padding: 16px 0; } body.mk .site-head .wrap { height: auto; gap: 18px; } body.mk .site-head .logo { flex: 0 0 auto; } body.mk .logo img { height: 38px; width: auto; border-radius: 0; } body.mk .head-nav { gap: 2px; background: var(--mk-capsule); border-radius: var(--mk-r-nav); padding: 6px 6px 6px 8px; } body.mk .head-nav a.plain, body.mk .nav-more > summary { position: relative; padding: 10px 18px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .96875rem; background: transparent; } body.mk .head-nav a.plain:hover, body.mk .nav-more > summary:hover, body.mk .nav-more[open] > summary { background: var(--mk-surface); color: var(--ink); text-decoration: none; } body.mk .head-nav a.plain.on { background: var(--mk-surface); color: var(--ink); } /* The 1.5 x 10 divider tick between menu items. Adjacent siblings only, so the first link never grows one. */ body.mk .head-nav a.plain + a.plain::before { content: ""; position: absolute; left: -1px; top: 50%; width: var(--mk-rule); height: 10px; margin-top: -5px; background: var(--faint); opacity: .5; } body.mk .head-nav a.plain:hover::before { opacity: 0; } /* The CTA is a dark chip inside the capsule. */ body.mk .head-nav .btn.primary { background: var(--dark); border-color: var(--dark); color: #FFF8EC; box-shadow: none; border-radius: 10px; padding: 11px 20px; font-size: .96875rem; } body.mk .head-nav .btn.primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); transform: none; } /* ---------- The menu, and the drawer it becomes on small screens ---------- The panel is the contents of a

, so it works with JavaScript off. fg-nav.js only adds click-outside, Escape and close-on-resize on top. The scrim is the summary's own ::before, which means clicking the scrim toggles the same

. Click outside to close, with no script at all. Do NOT animate this with translate.

gives display:none when closed, so there is no off-screen box and nothing can add page overflow. Opacity only. See invariant 2. ------------------------------------------------------------------------ */ /* SCOPED TO [open] ON PURPOSE, and this is not cosmetic. Written as a bare .nav-more-panel rule, the panel is a 380x100dvh fixed box at all times, and the ONLY thing keeping it off the screen while the menu is shut is however the browser chooses to hide the contents of a closed

. Chromium currently uses content-visibility, which happens to work; a browser that instead leaves the box laid out would paint a full-height panel over the page on every load. Measured while shut, the unscoped version still reported a real 282x800 rect at left -56. Tie the fixed positioning to the state that is supposed to produce it. */ body.mk .nav-more[open] > .nav-more-panel { position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); height: 100vh; height: 100dvh; max-height: none; overflow-y: auto; overscroll-behavior: contain; z-index: 92; background: var(--mk-surface); border: 0; border-left: var(--mk-rule) solid var(--ink); border-radius: 0; box-shadow: none; padding: 84px 20px 32px; gap: 2px; animation: mk-drawer .22s var(--mk-ease); } @keyframes mk-drawer { from { opacity: 0; } to { opacity: 1; } } body.mk .nav-more { position: relative; z-index: 93; } /* inset:0 and never width:100vw, which includes the scrollbar and overflows by about 15px on a desktop with a classic scrollbar. */ body.mk .nav-more[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 91; background: rgba(44, 34, 20, .38); } body.mk .nav-more[open] > summary { position: relative; z-index: 93; } body.mk .nav-more-panel a, body.mk .nav-more-panel button.nm-a11y { padding: 13px 14px; border-radius: 10px; font-size: 1.0625rem; font-weight: 600; color: var(--ink); } body.mk .nav-more-panel a:hover, body.mk .nav-more-panel button.nm-a11y:hover { background: var(--mk-surface-2); } body.mk .nav-more-panel .nm-rule { background: var(--line); margin: 10px 8px; } body.mk .nav-more-panel .nm-cta { background: var(--dark); color: #FFF8EC; border-radius: 12px; padding: 14px; margin-top: 8px; text-align: center; } body.mk .nav-more-panel .nm-cta:hover { background: var(--amber-deep); } /* Above 1080 the bar carries the primary links, so the panel goes back to being a small dropdown. These are site.css's breakpoints, reused exactly: changing them here is what breaks invariant 5. */ @media (min-width: 1080px) { body.mk .nav-more[open] > .nav-more-panel { position: absolute; inset: auto 0 auto auto; top: calc(100% + 10px); width: auto; min-width: 260px; height: auto; max-height: calc(100dvh - 120px); padding: 8px; border: var(--mk-rule) solid var(--ink); border-radius: var(--mk-r-nav); } body.mk .nav-more[open] > summary::before { display: none; } body.mk .nav-more-panel a, body.mk .nav-more-panel button.nm-a11y { padding: 10px 14px; font-size: .96875rem; } } /* ============================ BUTTONS ============================ site.css owns the button. This only flattens it for the marketing pages and adds the gold call to action, which is ornament and therefore carries ink text, never white. #2C2214 on #E9BC5C is 8.6:1. ================================================================= */ body.mk .btn { box-shadow: none; } body.mk .btn:hover { transform: none; } body.mk .btn.primary { background: var(--dark); border-color: var(--dark); color: #FFF8EC; } body.mk .btn.primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); } body.mk .btn.gold, body.mk .cta-card .btn.primary.big { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 700; } body.mk .btn.gold:hover, body.mk .cta-card .btn.primary.big:hover { background: var(--gold-soft); border-color: var(--ink); color: var(--ink); } body.mk .btn.big { padding: 17px 40px; font-size: 1.1875rem; } body.mk .btn.outline { background: transparent; border-color: var(--ink); color: var(--ink); } body.mk .btn.outline:hover { background: var(--ink); color: var(--mk-surface); } /* ============================ ORNAMENT ============================ */ /* A word sitting on a tilted marker block. Ink on gold-soft is 12.7:1. */ /* The block is inset only a little sideways and the span carries a margin of its own. At display sizes a .28em bleed is wider than the word space before it, so the block ran into the previous word. */ body.mk .mk-mark { position: relative; display: inline-block; z-index: 0; margin: 0 .12em; } body.mk .mk-mark::before { content: ""; position: absolute; inset: -.04em -.14em; background: var(--gold-soft); transform: rotate(var(--deg, -2deg)); z-index: -1; border-radius: 3px; } /* Stickers are inline SVG, so they compress with the HTML and cannot go stale behind a year-long immutable cache the way a .svg file would. */ body.mk .mk-sticker { display: block; transform: rotate(var(--deg, 0deg)); color: var(--amber); } body.mk .mk-sticker svg { display: block; width: 100%; height: auto; } /* The tonal well: the lighter plane a group of cards sits on. */ body.mk .mk-well { background: var(--mk-surface); border-radius: var(--mk-r-xl); padding: var(--mk-well); } body.mk .mk-well.deep { background: var(--mk-sand-2); } /* ======================= STORY PAGE ======================= */ body.mk .story-grid { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 56px; align-items: start; } /* The collage is the tilt in its most literal form. The container carries the padding that keeps a rotated photo from widening the page. */ body.mk .collage { display: grid; gap: 26px; padding: 10px; } body.mk .collage .ph { position: relative; background: var(--mk-surface); padding: 12px 12px 0; border-radius: var(--mk-r-lg); } body.mk .collage .ph.horse { transform: rotate(-2.24deg); } body.mk .collage .ph.palms { transform: rotate(2.96deg); } body.mk .collage .ph img { display: block; width: 100%; height: auto; /* invariant 3 */ border-radius: var(--mk-r-0); /* square on purpose */ } body.mk .collage .cap { padding: 12px 4px 14px; font-size: .875rem; font-weight: 600; color: var(--mut); } body.mk .collage .ph { transition: transform .3s var(--mk-ease); } body.mk .collage .ph:hover { transform: rotate(0deg); } body.mk .collage-sun { margin: 18px auto 0; color: var(--gold); } body.mk .story-copy.prose { max-width: var(--mk-read); } body.mk .story-copy h2.sec { margin-bottom: 22px; } body.mk .story-copy h3 { margin: 40px 0 12px; } body.mk .story-copy p { margin-bottom: 18px; color: var(--mut); } body.mk .story-copy p b { color: var(--ink); } body.mk .hoof { display: flex; gap: 18px; align-items: center; margin-top: 44px; padding: 24px 28px; background: var(--mk-surface); border-radius: var(--mk-r-lg); font-size: .9375rem; color: var(--mut); } body.mk .hoof img { width: 62px; height: auto; flex: 0 0 auto; } /* The pull quote. Ink on the lighter plane, tilted a touch. */ body.mk .statement { background: var(--mk-surface); border-radius: var(--mk-r-xl); padding: clamp(32px, 5vw, 72px); max-width: 1000px; margin: 0 auto; transform: rotate(-1deg); } body.mk .statement p { font-family: var(--serif); font-size: clamp(1.375rem, 1rem + 1.7vw, 2.375rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); } body.mk .statement .by { display: block; margin-top: 26px; font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mut); } /* Left aligned, deliberately. Every page here reads on a left margin, and the row was previously centred on desktop but flex-start under 560px, so the same component sat in two different places depending on the window. */ body.mk .related { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 52px; } body.mk .related a { padding: 12px 22px; border-radius: 999px; border: var(--mk-rule) solid var(--ink); color: var(--ink); font-weight: 600; font-size: .9375rem; background: transparent; } body.mk .related a:hover { background: var(--ink); color: var(--mk-surface); text-decoration: none; } /* ======================= CLOSING CALL TO ACTION ======================= */ /* The page closes on an INK panel. It is the one dark plane in the system and it gives the last beat some weight, the same job the reference gives its black active states. It also settles a bug: .cta-card.photo carried a photographic background with #FFF6E4 text, and flattening the background without taking the text colours with it left the heading invisible on a white card. Everything the .photo variant sets is neutralised here. */ /* Nothing under the closing card: the page ends where the picture footer begins. Owner rule, 2026-08-15. */ body.mk .cta-final { padding: var(--mk-sec) 0 0; } body.mk .cta-card, body.mk .cta-card.photo { position: relative; background: var(--dark); background-image: none; border: 0; border-radius: var(--mk-r-xl); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); text-align: center; box-shadow: none; } body.mk .cta-card::before, body.mk .cta-card::after, body.mk .cta-card.photo::before, body.mk .cta-card.photo::after { content: none; } body.mk .cta-card .horse, body.mk .cta-card.photo img.horse { width: 92px; height: auto; margin: 0 auto 22px; display: block; filter: none; } body.mk .cta-card h2, body.mk .cta-card.photo h2 { color: #FFF8EC; margin: 0 auto 18px; max-width: 20ch; } body.mk .cta-card p, body.mk .cta-card.photo p { color: #E8DAC0; max-width: 56ch; margin: 0 auto 30px; } body.mk .cta-card .cta-note, body.mk .cta-card.photo .cta-note { margin: 24px auto 0; font-size: .875rem; color: #C9B591; } body.mk .cta-card a:not(.btn), body.mk .cta-card.photo a:not(.btn) { color: var(--gold); } /* ============================ FOOTER ============================ Four columns of links above the canyon and the herd. The artwork keeps its own box, .mk-foot-art, so .fg-foot-scene, .fg-foot-herd and .fg-foot-text position against exactly what they always did. .mk-foot keeps overflow:hidden. fg-foot.js lifts the footer's CHILDREN by 16px on reveal, and without the clip that lift becomes page overflow. That is invariant 2, and it has shipped before. ================================================================= */ body.mk .mk-foot { aspect-ratio: auto; height: auto; min-height: 0; overflow: hidden; background: var(--mk-ground); } body.mk .mk-foot::before { content: none; } body.mk .mk-foot-cols { padding: var(--mk-sec-md) 0 44px; } body.mk .mk-fc { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px var(--mk-gutter); } body.mk .mk-fcol h2 { font-family: var(--sans); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; line-height: 1.4; } body.mk .mk-fcol nav { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; } body.mk .mk-fcol nav a { color: var(--mut); font-weight: 600; font-size: .96875rem; } body.mk .mk-fcol nav a:hover { color: var(--amber-deep); } body.mk .mk-fcol-brand { max-width: 42ch; } body.mk .mk-foot-logo { display: inline-block; } /* CAPPED BY WIDTH, NOT BY HEIGHT, and the reason is the same one that bit the sign up header on 2026-08-22. Written as height:40px with width:auto this asks for a 302px image; on a 320px screen the shared img{max-width:100%} then clamps the WIDTH to the 292px available and leaves the height at 40, and the letters come out three percent taller than they should be. Small, but it is a stretched logo, and fg_img_distort.js now looks at 320px and says so. Ask for the width and let the height follow. object-fit is the belt to that braces: if some future rule ever hands this image both dimensions again, the worst that can happen is empty space around the letters rather than stretched letters. */ body.mk .mk-foot-logo img { width: min(302px, 100%); height: auto; object-fit: contain; } body.mk .mk-fcol-brand p { margin: 18px 0 24px; color: var(--mut); font-size: .9375rem; } body.mk .mk-foot-cta { background: var(--gold); border-color: var(--gold); color: var(--ink); } body.mk .mk-foot-cta:hover { background: var(--gold-soft); border-color: var(--ink); } body.mk .mk-foot-art { position: relative; width: 100%; aspect-ratio: 2416 / 474; min-height: 190px; overflow: hidden; } /* The veil that dissolves the top edge of the picture into the page. It has to match whatever sits above it, which is now the marketing ground. */ body.mk .mk-foot-art::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100px; z-index: 1; background: linear-gradient(to bottom, var(--mk-ground), rgba(244, 234, 214, .55) 52%, rgba(244, 234, 214, 0)); } /* ============================ RESPONSIVE ============================ The header breakpoints are site.css's, reused. Everything else steps down the rhythm rather than rearranging, because the layouts are already single column below the tablet break. ==================================================================== */ @media (max-width: 1079px) { /* The capsule now holds the menu and the account chip only. */ body.mk .head-nav { padding: 5px; } body.mk .nav-more > summary { padding: 11px 16px; } } @media (max-width: 960px) { body.mk { --mk-sec: 60px; --mk-sec-md: 44px; --mk-well: 30px; } body.mk .story-grid { grid-template-columns: 1fr; gap: 40px; } body.mk .collage { grid-template-columns: 1fr 1fr; } body.mk .story-copy.prose { max-width: none; } body.mk .mk-fc { grid-template-columns: 1fr 1fr; gap: 36px var(--mk-gutter); } body.mk .mk-fcol-brand { grid-column: span 2; max-width: none; } body.mk .page-top { padding-top: 52px; } } @media (max-width: 700px) { body.mk .collage { grid-template-columns: 1fr; } } @media (max-width: 720px) { /* The wordmark is 716x95, so sizing it by HEIGHT makes it 7.5 times as wide as it is tall: height:38px is a 286px logo on a 390px screen, and the capsule beside it then pushed the page 119px wide. Below the tablet break the mark is sized by WIDTH and the capsule shrinks with it. */ body.mk .logo img { height: auto; width: min(40vw, 190px); } body.mk .head-nav { padding: 4px; gap: 2px; } body.mk .head-nav .btn.primary { padding: 9px 13px; font-size: .8125rem; border-radius: 9px; } body.mk .nav-more > summary { padding: 9px 12px; font-size: .8125rem; } body.mk .site-head .wrap { gap: 8px; } } @media (max-width: 560px) { body.mk { --mk-sec: 48px; --mk-sec-md: 36px; } body.mk .wrap { padding-left: 20px; padding-right: 20px; } body.mk .site-head { padding: 10px 0; } body.mk .logo img { width: min(37vw, 160px); } body.mk .head-nav .btn.primary { padding: 9px 11px; font-size: .78125rem; } body.mk .nav-more > summary { padding: 9px 10px; font-size: .78125rem; } body.mk .mk-fc { grid-template-columns: 1fr; } body.mk .mk-fcol-brand { grid-column: span 1; } body.mk .statement { transform: none; } /* .rounded-section drops a step at the smallest size, as the reference does */ body.mk .mk-well, body.mk .cta-card, body.mk .statement { border-radius: var(--mk-r-sm); } body.mk .hoof { flex-direction: column; align-items: flex-start; text-align: left; } } /* ============================ MOTION ============================ */ @media (prefers-reduced-motion: reduce) { body.mk .nav-more-panel { animation: none; } body.mk .collage .ph { transition: none; } } /* ============================ PRINT ============================ */ @media print { body.mk .site-head, body.mk .mk-foot-art, body.mk .cta-final { display: none; } body.mk .mk-foot-cols { padding: 0; } } /* ==================== SECTION HEADINGS ==================== */ body.mk .kicker { color: var(--amber); /* 4.50:1 on the ground. See invariant 8. */ font-size: .8125rem; letter-spacing: .1em; margin-bottom: 14px; } body.mk .sec-sub { color: var(--mut); font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); max-width: 56ch; margin-bottom: 44px; } body.mk h2.sec { margin-bottom: 16px; } /* ==================== THE EXAMPLE EXCHANGES ==================== .scenes is the site's own "You say / Frankie answers" material, and it is what carries the reference's tilted-card treatment. These are examples of what the product does, never presented as customer quotes. The tilt is gentler than the reference's because these sit in a tight grid rather than a loose carousel: a rotated box is wider than its layout box, and at -4.54deg a three-up grid collides with itself. Hover straightens. =============================================================== */ body.mk .scenes { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 34px; padding: 6px; /* room for the rotation. Invariant 2. */ } body.mk .scene { background: var(--mk-surface); border: 0; border-radius: var(--mk-r-lg); padding: 32px 30px; box-shadow: none; transition: transform .3s var(--mk-ease); transform: rotate(var(--deg, 0deg)); } body.mk .scene:nth-child(3n+1) { --deg: -1.4deg; } body.mk .scene:nth-child(3n+2) { --deg: 1.1deg; } body.mk .scene:nth-child(3n) { --deg: -0.7deg; } body.mk .scene:hover { --deg: 0deg; } body.mk .scene h3 { margin: 0 0 12px; } body.mk .scene p { color: var(--mut); font-size: 1rem; margin: 0 0 16px; } /* The quote block, with the reference's oversized glyph behind it. */ body.mk .scene .said { position: relative; display: block; background: var(--mk-surface-2); border: 0; border-radius: var(--mk-r-sm); padding: 18px 20px 18px 22px; font-size: 1rem; line-height: 1.5; color: var(--ink); overflow: hidden; } body.mk .scene .said::before { content: "\201C"; position: absolute; right: 6px; top: -18px; font-family: var(--serif); font-size: 92px; line-height: 1; color: var(--gold); opacity: .3; pointer-events: none; } body.mk .scene .said b { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } /* The photo variant on the home page keeps its picture flush to the card. */ body.mk .scene .sc-body { padding: 26px 28px 28px; } body.mk .scene .ps-shot img { border-radius: 0; } /* ==================== AUDIENCE TILES ==================== The reference's three-up: nested cards on a lighter well. ======================================================== */ body.mk .aud-grid { display: grid; gap: 22px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } body.mk .aud { display: flex; flex-direction: column; gap: 12px; background: var(--mk-surface); border: 0; border-radius: var(--mk-r-lg); padding: 34px 30px 30px; box-shadow: none; transition: background .2s var(--mk-ease); } body.mk .aud:hover { background: var(--mk-surface-2); text-decoration: none; } body.mk .aud .ico { color: var(--amber); } body.mk .aud h3 { margin: 0; } body.mk .aud p { color: var(--mut); font-size: 1rem; margin: 0; } body.mk .aud .go { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: .9375rem; color: var(--amber-deep); } body.mk .aud .go::after { content: " \2192"; } /* ==================== NUMBERED STEPS ==================== */ body.mk .steps { gap: 40px var(--mk-gutter); } body.mk .steps.four { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } body.mk .step { background: var(--mk-surface); border-radius: var(--mk-r-lg); padding: 34px 30px 30px; } body.mk .step .n, body.mk .steps.four .n { font-family: var(--serif); font-weight: 700; line-height: 1; font-size: clamp(2.75rem, 2rem + 2vw, 4rem); color: var(--gold); /* ornament: the heading beside it carries the meaning */ margin-bottom: 16px; } body.mk .step h3 { margin-bottom: 10px; } body.mk .step p { color: var(--mut); font-size: 1rem; } /* ==================== THE TRUST BAND ==================== Already an ink plane, which is exactly the reference's inverted panel, so it keeps its colours and only loses its rules and gains the rhythm. ======================================================== */ body.mk section.band.trust { background: var(--dark); } body.mk .trust-grid { gap: 26px 44px; } body.mk .trust-item { border-top: var(--mk-rule) solid #574734; padding: 22px 0 8px; } body.mk .trust-item b { font-size: 1.1875rem; } /* ==================== CAPABILITY TABLE ==================== Never flex a td. The table keeps its own scroll container so a wide row scrolls inside itself instead of widening the page. ========================================================== */ body.mk .cap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 34px; border-radius: var(--mk-r-lg); background: var(--mk-surface); } body.mk .cap-table { background: transparent; min-width: 560px; } body.mk .cap-table th, body.mk .cap-table td { padding: 18px 22px; border-bottom: var(--mk-rule) solid var(--line); } body.mk .cap-table thead th { background: var(--mk-sand-2); color: var(--mut); /* --faint fails here. Invariant 7. */ font-size: .75rem; letter-spacing: .08em; } body.mk .cap-table tbody th { font-size: 1rem; color: var(--ink); } body.mk .cap-table td { color: var(--mut); font-size: 1rem; } /* ==================== FAQ ACCORDION ==================== Borderless and numbered, the way the reference draws it. The number is a counter so the markup stays a plain

list and nothing has to be renumbered by hand when a question is added or removed. ======================================================= */ body.mk .faq { max-width: 900px; counter-reset: mkfaq; } body.mk .faq details { border-bottom: 0; background: var(--mk-surface); border-radius: var(--mk-r-lg); margin-bottom: 14px; padding: 4px 8px; } body.mk .faq summary { counter-increment: mkfaq; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); padding: 22px 56px 22px 22px; border-radius: var(--mk-r-md); } body.mk .faq summary::before { content: counter(mkfaq) ". "; color: var(--faint); font-weight: 700; } body.mk .faq summary:hover { color: var(--amber-deep); } body.mk .faq summary::after { right: 22px; top: 20px; color: var(--amber); } body.mk .faq .a { padding: 0 22px 24px; color: var(--mut); max-width: 74ch; } /* ==================== PROSE ==================== */ body.mk .prose { max-width: var(--mk-read); } body.mk .prose p { color: var(--mut); margin-bottom: 18px; } body.mk .prose h3 { margin: 40px 0 12px; } /* ==================== CARD HEADINGS ==================== h3 runs to 32px, which is right for a heading that owns the full measure and wrong inside a 280px card, where it wraps after two words. Anything sitting in a card gets its own tighter ramp. ======================================================= */ body.mk .scene h3, body.mk .aud h3, body.mk .step h3, body.mk .bcard h3, body.mk .trust-item b { font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.4375rem); /* 19px -> 23px */ line-height: 1.2; letter-spacing: -0.015em; } /* ==================== PRICING ==================== The reference differentiates its plans by the active state of a toggle rather than by colouring a card, and its own guidance is that a featured tier should invert to the ink plane. That is what .price.feature does here, which also removes the one drop shadow left in this part of the design. ================================================= */ body.mk .price-grid { display: grid; gap: 24px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; } body.mk .price { display: flex; flex-direction: column; gap: 14px; background: var(--mk-surface); border: 0; border-radius: var(--mk-r-lg); padding: 38px 32px 32px; box-shadow: none; } body.mk .price .tag { font-size: .75rem; letter-spacing: .09em; font-weight: 800; color: var(--amber); } body.mk .price h3 { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); margin: 0; } body.mk .price .amt { font-family: var(--serif); font-weight: 700; line-height: 1.05; font-size: clamp(2.25rem, 1.7rem + 1.6vw, 3.25rem); letter-spacing: -0.035em; overflow-wrap: anywhere; } body.mk .price .amt small { display: block; margin-top: 8px; font-family: var(--sans); font-size: .9375rem; font-weight: 600; color: var(--mut); letter-spacing: 0; } body.mk .price > p { color: var(--mut); font-size: 1rem; margin: 0; } body.mk .price li { color: var(--mut); font-size: .96875rem; } body.mk .price li::before { color: var(--amber); } body.mk .price .foot { margin-top: auto; padding-top: 20px; } body.mk .price .foot .btn { width: 100%; } /* The featured tier: the ink plane. */ body.mk .price.feature { background: var(--dark); border: 0; box-shadow: none; } body.mk .price.feature .tag { color: var(--gold); } body.mk .price.feature h3, body.mk .price.feature .amt { color: #FFF8EC; } body.mk .price.feature .amt small, body.mk .price.feature > p, body.mk .price.feature li { color: #D9C7A6; } body.mk .price.feature li::before { color: var(--gold); } body.mk .price.feature .btn.primary { background: var(--gold); border-color: var(--gold); color: var(--ink); } body.mk .price.feature .btn.primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); } body.mk .price .callnote { color: var(--mut); font-size: .90625rem; } body.mk .price .callnote .tel { color: var(--ink); } body.mk .grid-note { margin-top: 26px; color: var(--mut); font-size: .96875rem; max-width: 78ch; } body.mk .grid-note .tel { font-family: var(--serif); font-weight: 700; color: var(--ink); white-space: nowrap; } /* The included-versus-Task meter list. */ body.mk .meter { margin-top: 30px; } body.mk .meter-list { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } body.mk .meter-list li, body.mk section.band.alt .meter-list li { background: var(--mk-surface); border: 0; border-radius: var(--mk-r-sm); padding: 22px 22px 24px; } body.mk .meter-list b { font-size: 1.1875rem; } body.mk .meter-list span { color: var(--mut); font-size: .90625rem; } /* ==================== HOME PAGE ==================== The hero keeps its two columns, its hand-drawn gold underline and its palm silhouettes, all of which already belong to the reference's sticker vocabulary. What goes is the radial glow behind it, because the system has no gradients, and the gradient on the bento hero card. =================================================== */ body.mk .hero::before { content: none; } /* the drifting sun glow */ body.mk .hero .wrap { grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; padding-top: 56px; padding-bottom: var(--mk-sec); } /* The eyebrow becomes the reference's rotated badge, with Frankie in the place its chip occupies. */ body.mk .hero .eyebrow { background: var(--amber); color: #FFF8EC; border: 0; border-radius: 999px; padding: 7px 20px 7px 7px; gap: 10px; font-weight: 600; font-size: .9375rem; transform: rotate(-3deg); margin-bottom: 26px; } body.mk .hero .eyebrow img { width: 30px; height: auto; border-radius: 999px; background: var(--mk-surface); } body.mk .hero h1 { margin-bottom: 22px; } body.mk .hero h1 .uline svg { bottom: -.08em; height: .16em; } body.mk .hero .sub { color: var(--mut); margin-bottom: 30px; max-width: 46ch; } body.mk .hero-proof { display: grid; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } body.mk .hero-proof li { background: var(--mk-surface); border: 0; border-radius: var(--mk-r-sm); padding: 16px 18px; } body.mk .hero-proof b { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; margin-bottom: 4px; } body.mk .hero-proof span { color: var(--mut); font-size: .875rem; line-height: 1.45; } body.mk .cta-row { gap: 22px; } body.mk .hero .btn.primary.big { background: var(--gold); border-color: var(--gold); color: var(--ink); } body.mk .hero .btn.primary.big:hover { background: var(--gold-soft); border-color: var(--ink); } body.mk .hero .cta-note { color: var(--mut); } /* The audio chip. Keeps its classes because voice.js queries them. */ body.mk .voice-chip { background: transparent; border: var(--mk-rule) solid var(--ink); border-radius: 999px; box-shadow: none; color: var(--ink); } body.mk .voice-chip:hover { background: var(--ink); color: var(--mk-surface); } body.mk .voice-chip:hover .vc-play { border-left-color: currentColor; } /* The capability ribbon: a flat rule-bounded strip, not a card. */ body.mk .ribbon { background: var(--mk-sand-2); border-top: var(--mk-rule) solid var(--line); border-bottom: var(--mk-rule) solid var(--line); } body.mk .ribbon .wrap { color: var(--mut); font-weight: 600; padding: 17px 28px; } body.mk .ribbon span.dot { color: var(--amber); } /* The bento. Flat fills, no borders, no gradient on the lead card. */ body.mk .bento { gap: 22px; } body.mk .bcard { background: var(--mk-surface); border: 0; border-radius: var(--mk-r-lg); padding: 34px 30px; box-shadow: none; } body.mk .bcard .ico { color: var(--amber); margin-bottom: 16px; } body.mk .bcard p { color: var(--mut); font-size: 1rem; } body.mk .bcard.hero-card { background: var(--mk-sand-2); } body.mk .bcard.tinted { background: var(--mk-surface-2); } body.mk .bcard.hero-card .mini-chat .bub { box-shadow: none; border: 0; font-size: .9375rem; } body.mk .bcard.hero-card .mini-chat .bub.f { background: var(--mk-surface); } body.mk .bcard.hero-card .mini-chat .bub.u { background: var(--gold-soft); } /* The Palm Springs rail and the home-screen tile keep their pictures square. */ body.mk .place-rail { gap: 22px; } body.mk .place-photo img, body.mk .ps-shot img { border-radius: var(--mk-r-0); } body.mk .place-credit { color: var(--mut); font-size: .875rem; } body.mk .homescreen { background: var(--mk-surface); border: 0; border-radius: var(--mk-r-lg); } @media (max-width: 960px) { body.mk .hero .wrap { grid-template-columns: 1fr; gap: 44px; padding-top: 36px; } body.mk .bento { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { body.mk .bento { grid-template-columns: 1fr; } body.mk .hero .eyebrow { transform: none; } } /* ==================== CONTRAST CORRECTION ==================== Caught by fg_a11y_audit.js, and it is invariant 8 biting the person who wrote it. --amber is 4.50:1 on the page ground, which passes, but the alternating band and the ribbon are --mk-sand-2, where the same colour measures 4.27:1 and FAILS. --amber-deep is 5.65:1 on the ground and 5.29:1 on sand-2, so it clears both. The eyebrow and the ribbon separator use it everywhere rather than only on the darker band, because a rule that depends on which section a component lands in is a rule that gets broken the next time one moves. ============================================================= */ body.mk .kicker { color: var(--amber-deep); } body.mk .ribbon span.dot { color: var(--amber-deep); } body.mk .price .tag { color: var(--amber-deep); } /* The dark band sets its own, and is unaffected. */ body.mk .trust .kicker { color: var(--gold); } /* The dark band owns its own text colours, and body.mk out-specifies the plain .trust rules in site.css. Restate them here or the section sub-head inherits --mut and lands at 2.37:1 on ink. */ body.mk .trust .sec-sub { color: #C9B896; } body.mk .trust h2.sec { color: #FBF3DF; } body.mk .trust-item p { color: #C9B896; } /* ==================== TRUST ITEMS, BOTH GROUNDS ==================== .trust-item appears on TWO different backgrounds: the dark band on the home page (section.band.trust) and a plain light band on /features/. site.css colours it for the dark case unconditionally, which leaves #C9B896 text on cream at 1.63:1 wherever the light case is used. So: the light ground is the default, and the dark band restates its own. ==================================================================== */ body.mk .trust-item { border-top-color: var(--line); } body.mk .trust-item b { color: var(--ink); } body.mk .trust-item p { color: var(--mut); } body.mk .trust .trust-item { border-top-color: #574734; } body.mk .trust .trust-item b { color: #FBF3DF; } body.mk .trust .trust-item p { color: #C9B896; } /* ==================== HEADER FIT ==================== Found by /root/fg_market_edge.js, three separate widths, one cause: the capsule holds six controls and nothing told it what to do when they stop fitting. Measured overflow was +16px at 320, +87px at exactly 1080, and +67px at 1440 once the accessibility panel scaled text to 150%. 1080 is the sharp edge. That is the exact width where site.css puts BOTH the four primary links and "Log in" into the bar, so the row goes from four controls to six in one pixel. The breakpoint itself must not move: .nm-dup hides at the same 1080, so shifting one without the other leaves links in neither the bar nor the menu, which is invariant 5 and has shipped broken before. The row is made to fit instead. Three defences, in order: a) the wordmark is capped by WIDTH in every range, never by height, since 716x95 makes height:38px a 286px logo; b) the capsule steps down its padding and type between 1080 and 1280; c) .site-head .wrap is allowed to WRAP as a last resort. Nothing in the normal range reaches it, but text scaling is unbounded, and a nav that drops to a second row is recoverable where one that runs off the side is not. This is the safety net for every zoom level we cannot enumerate. ==================================================== */ body.mk .site-head .wrap { flex-wrap: wrap; row-gap: 10px; } body.mk .site-head .logo { min-width: 0; } body.mk .head-nav { flex-wrap: wrap; row-gap: 6px; } /* The band where the bar is at its fullest: six controls plus the wordmark. */ @media (min-width: 1080px) and (max-width: 1279px) { body.mk .logo img { height: auto; width: min(20vw, 208px); } body.mk .head-nav { padding: 5px 5px 5px 6px; gap: 0; } body.mk .head-nav a.plain, body.mk .nav-more > summary { padding: 9px 11px; font-size: .875rem; } body.mk .head-nav .btn.primary { padding: 10px 14px; font-size: .875rem; } } /* Comfortable, but the wordmark is still sized by width so it cannot bloat. */ @media (min-width: 1280px) { body.mk .logo img { height: auto; width: min(18vw, 250px); } } /* The narrowest phones. 320 is a real device width, not a theoretical one. */ @media (max-width: 400px) { body.mk .wrap { padding-left: 14px; padding-right: 14px; } body.mk .logo img { width: min(34vw, 124px); } body.mk .head-nav { padding: 3px; } body.mk .head-nav .btn.primary { padding: 8px 9px; font-size: .75rem; } body.mk .nav-more > summary { padding: 8px 8px; font-size: .75rem; } } /* ==================== ACCESSIBILITY HARDENING ==================== Three fixes, each from a measured failure rather than a guess. ================================================================= */ /* 1. THE UNDERLINED WORD MUST BE ABLE TO BREAK. site.css gives .hero h1 .uline `white-space: nowrap` so the hand-drawn SVG spans the whole word. But the accessibility panel freezes a scaled font size in px and never re-measures on resize, so at 150% "remembers" alone is about 560px of unbreakable text. On a 390px phone that is horizontal page overflow, caused by the accessibility tool itself. Correctness beats the flourish here: the word is allowed to break, and if it ever does the underline simply spans the wrapped box. That trade only ever shows up at extreme scaling, where a readable page matters more than a tidy stroke. */ body.mk .hero h1 .uline { white-space: normal; overflow-wrap: anywhere; } /* 2. THE FOCUS RING ON THE INK PLANES. site.css draws a 3px #A85F17 ring, which measures 3.12:1 on #2E2417. WCAG 1.4.11 wants 3:1, so it passes with nothing to spare and reads as almost invisible. On every dark surface the ring goes gold, 8.6:1. */ body.mk .cta-card a:focus-visible, body.mk .cta-card button:focus-visible, body.mk .price.feature a:focus-visible, body.mk .price.feature button:focus-visible, body.mk .trust a:focus-visible, body.mk .trust button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } /* 3. MOTION. The reduced-motion block only covered the drawer and the collage, and missed the two transitions added later. A tilted card that straightens is motion; the resting rotation is not, so that stays. */ @media (prefers-reduced-motion: reduce) { body.mk .scene, body.mk .aud, body.mk .collage .ph, body.mk .btn, body.mk .voice-chip { transition: none !important; } body.mk .nav-more[open] > .nav-more-panel { animation: none; } } /* 4. FORCED COLOURS (Windows high contrast). The system replaces every colour, so the tonal layering that carries this design disappears entirely and cards become indistinguishable from the page. Give the surfaces a real border in that mode so structure survives. */ @media (forced-colors: active) { body.mk .scene, body.mk .aud, body.mk .step, body.mk .price, body.mk .bcard, body.mk .cta-card, body.mk .statement, body.mk .mk-well, body.mk .faq details, body.mk .hero-proof li, body.mk .meter-list li { border: 1px solid; } body.mk .nav-more[open] > .nav-more-panel { border-left: 2px solid; } /* A rotation survives forced colours and only makes text harder to track. */ body.mk .scene, body.mk .collage .ph, body.mk .statement, body.mk .hero .eyebrow { transform: none; } } /* 5. The marquee track is far wider than the page by design. It is clipped by , but say so locally too, so a future change to the ribbon cannot quietly start pushing the document sideways. */ body.mk .ribbon { overflow: hidden; } /* ==================== REFLOW AT LARGE TEXT ==================== WCAG 1.4.10 says content must reflow to a 320px-equivalent viewport without two-axis scrolling. Measured failure: with the accessibility panel at 150%, the hero text column laid out 538px wide inside a 375px .wrap, so 163px of every headline sat outside the page and was clipped by . The page did not scroll sideways, which is precisely why it went unnoticed: the text was simply gone. Cause is the default `min-width: auto` on a grid item, which refuses to shrink below the min-content of its subtree. Once one descendant reports a wide min-content the whole column inflates and every child inherits it. `min-width: 0` lets the track win and the text wrap, which is what should have happened. The same trap applies to flex items, so both are covered. ============================================================== */ body.mk .hero .wrap > *, body.mk .story-grid > *, body.mk .aud-grid > *, body.mk .scenes > *, body.mk .price-grid > *, body.mk .steps > *, body.mk .mk-fc > * { min-width: 0; } /* ==================== TILT ON NARROW SCREENS ==================== Below the tablet break these cards are full width, so a rotation has no room to rotate into: at 320px it pushed the page 6px sideways, and it reads as a mistake rather than a flourish when every card is edge to edge. The tilt is a wide-screen device. Straighten them. ================================================================= */ @media (max-width: 700px) { body.mk .scene:nth-child(3n+1), body.mk .scene:nth-child(3n+2), body.mk .scene:nth-child(3n) { --deg: 0deg; } body.mk .collage .ph.horse, body.mk .collage .ph.palms { transform: none; } body.mk .scenes { padding: 0; } } /* ============================ Store badges ============================ The native apps (2026-09-02). Official Apple and Google artwork at one shared height, in a wrapping row, so on a narrow phone the second badge drops under the first instead of squeezing. Never set both width and height on these: height plus width:auto is what keeps the artwork honest. ====================================================================== */ body.mk .store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 18px; } body.mk .store-badge { display: inline-block; line-height: 0; border-radius: 8px; } body.mk .store-badge img { display: block; height: 42px; width: auto; } body.mk .store-badge:hover img { opacity: .88; } body.mk .store-badge:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } body.mk .store-lg .store-badge img { height: 56px; } body.mk .store-note { margin: 10px 0 0; font-size: .875rem; color: var(--mut); } /* In the dark closing card the row centres and the note takes the card's ink. */ body.mk .cta-card .store-badges { justify-content: center; margin-top: 22px; } body.mk .cta-card .store-note, body.mk .cta-card.photo .store-note { color: #E8DAC0; margin: 10px auto 0; } /* The footer's brand column: under Start free, before the columns. */ body.mk .mk-fcol-brand .store-badges { margin-top: 16px; } body.mk .mk-fcol-brand .store-badge img { height: 38px; } /* Inside a setup step the row is the step's illustration, like the old tile. */ body.mk .step .store-badges { margin-top: 16px; gap: 10px; } body.mk .step .store-badge img { height: 38px; } /* The download page: the badges are the point, so they get the room. */ body.mk .dl-hero .store-badges { margin-top: 26px; gap: 16px 20px; } body.mk .dl-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px var(--mk-gutter); } body.mk .dl-three h3 { margin: 0 0 8px; } body.mk .dl-three p { margin: 0; color: var(--mut); }