/* marketing.css — the page kit for the dedicated marketing pages.
index.html predates this file and carries its own inline styles; every page
added since (the product pages, /why-geo, /why-us, /pricing, the blog topic
pages) is built from the classes below instead. That is deliberate: seventeen
pages of copy-pasted inline style is exactly how a site starts looking like
four different products.
Loaded AFTER /nav.css and never alongside /console.css — the app's tokens are
cool greys, and nothing on the marketing site is grey. The palette here is the
homepage's, stated once:
ink #141821 headings, dark panels
body #3A3330 / #4A423E
soft #6B6158 captions and asides (warm, not grey)
canvas #FCFBFA page base
fill #FAF6F2 warm card fill
line #EFE5DD borders
accent #EC6B4C / #DE5A38 / #C24E2E
tint #FBEAE3 / #FFEDE4 accent fills
Layout container matches the homepage exactly (1240 / 30px) so the content
lines up under the shared nav on every page. */
:root {
--mk-ink: #141821;
--mk-body: #3A3330;
--mk-body-2: #4A423E;
--mk-soft: #6B6158;
--mk-canvas: #FCFBFA;
--mk-fill: #FAF6F2;
--mk-line: #EFE5DD;
--mk-line-2: #F1E9E2;
--mk-accent: #EC6B4C;
--mk-accent-deep: #DE5A38;
--mk-accent-text: #C24E2E;
--mk-tint: #FBEAE3;
--mk-tint-2: #FFEDE4;
--mk-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--mk-ok: #0E7A5F;
--mk-ok-bg: #E6F5EE;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Instrument Sans", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
background: var(--mk-canvas);
color: #2A2F3A;
}
::selection { background: var(--mk-tint); color: #7A2E17; }
a { color: var(--mk-accent-text); text-decoration: none; }
a:hover { color: var(--mk-accent); }
img { max-width: 100%; display: block; }
/* ---- structure ---------------------------------------------------------- */
.mk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 30px; position: relative; }
.mk-narrow { max-width: 860px; }
.mk-sec { padding: 86px 0; position: relative; }
.mk-sec-tight { padding: 56px 0; }
.mk-sec.mk-white { background: #fff; border-top: 1px solid var(--mk-line-2); border-bottom: 1px solid var(--mk-line-2); }
.mk-sec.mk-warm { background: linear-gradient(180deg, #FFF7F2 0%, #FFFFFF 60%); }
/* ---- accent bloom ------------------------------------------------------- */
/* A warm gradient wash behind the hero and the closing band. Two rules keep it
atmosphere rather than decoration: it never sits behind body copy (top-right
and bottom-left corners only), and it is a radial gradient that fades to
fully transparent rather than a hard circle under a blur() — same look, no
per-frame blur pass on a 620px layer.
The drift is slow enough (26s / 32s) to read as light rather than as motion;
at that speed you notice it between glances, not during one. Both loops are
`alternate` so there is no snap at the end of a cycle. */
.mk-blob { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
/* The falloff is the whole trick, and it has two failure modes.
1. `circle closest-side at 50% 50%` is mandatory. The default farthest-corner
sizing puts the 100% stop out at the box's far corner, so alpha is still
~0.2 where border-radius clips — a crisp arc, and the wash instantly reads
as a shape rather than as light. closest-side lands zero exactly on the
clip.
2. Every stop stays on the SAME hue. Fading peach to transparent WHITE turns
the midtones chalky, because the ramp passes through unsaturated values.
Asymmetry comes free from the element hanging off the corner — the visible
part is already an off-centre crop, so the gradient itself stays centred. */
.mk-blob-tr {
top: -200px; right: -170px; width: 640px; height: 640px;
background: radial-gradient(circle closest-side at 50% 50%,
rgba(255,163,122,.55) 0%, rgba(255,170,126,.42) 22%, rgba(255,186,146,.26) 41%,
rgba(255,201,170,.13) 58%, rgba(255,214,186,.05) 75%, rgba(255,214,186,.014) 88%,
rgba(255,214,186,0) 100%);
animation: mk-drift 26s ease-in-out infinite alternate;
}
/* Sized to actually reach the content. At 580px hung 190/230px off the corner
almost the whole bloom fell outside the section's clip and only a sliver lit
the left gutter — an element that costs a paint and shows nothing. This one
spans the band's full height so the dark CTA sits in a warm pool. */
.mk-blob-bl {
bottom: -200px; left: -250px; width: 820px; height: 820px;
background: radial-gradient(circle closest-side at 50% 50%,
rgba(236,107,76,.20) 0%, rgba(242,140,105,.15) 24%, rgba(250,183,150,.09) 45%,
rgba(255,205,178,.045) 64%, rgba(255,214,186,.015) 81%, rgba(255,214,186,0) 100%);
animation: mk-drift 32s ease-in-out infinite alternate-reverse;
}
@keyframes mk-drift {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-44px, 32px, 0) scale(1.09); }
}
/* A bloom parked in a section corner would otherwise widen the page. `clip`
rather than `hidden` because it contains the overflow WITHOUT making the
section a scroll container, which would break any sticky child. */
.mk-sec:has(.mk-blob) { overflow: clip; }
.mk-sec > .mk-wrap { position: relative; z-index: 1; }
/* ---- hero --------------------------------------------------------------- */
/* Bottom padding is deliberately small: the next section brings its own 86px of
top padding, and stacking the two left a visible dead band under every hero. */
.mk-hero { position: relative; overflow: hidden; padding: 88px 0 34px; }
.mk-hero .mk-wrap { position: relative; z-index: 1; }
/* Claim left, evidence right. A hero with nothing to the right of it is a hero
with nothing to show — see the web-design skill. */
.mk-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.mk-eyebrow { display: inline-flex; align-items: center; gap: 9px;
font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
color: var(--mk-accent); margin: 0 0 14px; }
.mk-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mk-accent);
box-shadow: 0 0 0 4px rgba(236,107,76,.18); flex: none; }
/* Type carries the structure now that containers are gone, so the display scale
is decisive and fluid — one ladder, no per-page one-off sizes. */
h1.mk-h1 { font-family: var(--mk-display); font-size: clamp(40px, 2.1rem + 2.9vw, 68px);
line-height: 1.02; font-weight: 600;
letter-spacing: -.038em; color: var(--mk-ink); margin: 0; text-wrap: balance; }
h2.mk-h2 { font-family: var(--mk-display); font-size: clamp(30px, 1.6rem + 1.6vw, 42px);
line-height: 1.08; font-weight: 600;
letter-spacing: -.028em; color: var(--mk-ink); margin: 0; text-wrap: balance; }
h3.mk-h3 { font-family: var(--mk-display); font-size: 20.5px; line-height: 1.28; font-weight: 600;
letter-spacing: -.015em; color: var(--mk-ink); margin: 0; }
h4.mk-h4 { font-family: var(--mk-display); font-size: 16.5px; line-height: 1.35; font-weight: 600;
letter-spacing: -.01em; color: var(--mk-ink); margin: 0; }
/* A hero lead is one sentence. 54ch keeps it physically impossible to wrap into
a paragraph without it looking wrong, which is the point. */
.mk-lead { font-size: 19px; line-height: 1.6; color: var(--mk-body-2); margin: 18px 0 0; max-width: 62ch; }
.mk-hero .mk-lead { font-size: 20px; line-height: 1.55; max-width: 54ch; }
.mk-p { font-size: 16.5px; line-height: 1.68; color: var(--mk-body-2); margin: 16px 0 0; max-width: 74ch; }
.mk-note { font-size: 13.5px; line-height: 1.6; color: var(--mk-soft); margin: 14px 0 0; }
.mk-sec-head { max-width: 760px; margin: 0 0 44px; }
.mk-sec-head.mk-center { margin-left: auto; margin-right: auto; text-align: center; }
.mk-sec-head.mk-center .mk-lead { margin-left: auto; margin-right: auto; }
/* ---- buttons ------------------------------------------------------------ */
.mk-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px;
padding: 14px 22px; font-size: 15.5px; font-weight: 600; font-family: inherit;
border: 1px solid transparent; cursor: pointer; text-decoration: none;
transition: filter .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mk-btn-primary { background: linear-gradient(180deg, #F17A5A, var(--mk-accent-deep)); color: #fff;
box-shadow: 0 16px 34px -14px rgba(236,107,76,.75); }
.mk-btn-primary:hover { color: #fff; filter: brightness(1.05); transform: translateY(-2px); }
.mk-btn-ghost { background: #fff; border-color: var(--mk-line); color: var(--mk-ink); }
.mk-btn-ghost:hover { border-color: #E3D7CE; color: var(--mk-ink); transform: translateY(-2px); }
.mk-btn-onDark { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
.mk-btn-onDark:hover { color: #fff; background: rgba(255,255,255,.16); transform: translateY(-2px); }
.mk-btn:active { transform: translateY(0); }
.mk-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.mk-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600;
color: var(--mk-accent-text); transition: gap .2s ease; }
.mk-arrow:hover { gap: 10px; color: var(--mk-accent); }
/* ---- content groups (NOT cards) ----------------------------------------- */
/* House rule: content is grouped by proximity, typography and rhythm — not by
putting it in a white rounded rectangle. `.mk-card` is kept as the class name
because nineteen pages use it, but it is no longer a box: no background, no
border, no radius, no shadow. What separates two of these is the gap between
them and a hairline, which is why the grid gap below is deliberately large
relative to the space inside a group. That ratio IS the grouping. */
.mk-grid { display: grid; gap: 46px 44px; }
.mk-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mk-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mk-card { position: relative; padding: 0; background: none; border: 0; border-radius: 0;
transition: color .2s ease; }
/* The accent rule is an interactive affordance now, not a static marker. A fixed
2px dash sitting above every block read as decoration — the tell of a
templated page. It survives ONLY on cards you can act on (a link, or a
lift-on-hover panel), where it means "this moves" and grows on hover. A static
card is grouped by its icon, its heading and the grid gap instead. */
a.mk-card, .mk-card-lift { padding-top: 22px; }
a.mk-card::before, .mk-card-lift::before { content: ""; position: absolute; top: 0; left: 0;
width: 34px; height: 2px; background: var(--mk-accent); border-radius: 2px; transition: width .25s ease; }
.mk-card-fill { background: none; }
a.mk-card { display: block; }
a.mk-card:hover, .mk-card-lift:hover { transform: none; box-shadow: none; }
a.mk-card:hover::before, .mk-card-lift:hover::before { width: 58px; }
a.mk-card:hover .mk-h3, a.mk-card:hover .mk-h4 { color: var(--mk-accent-text); }
/* Heading spacing: below the icon/line when there is one; none when the heading
leads the card, so a bare group starts flush. */
.mk-card .mk-h3, .mk-card .mk-h4 { margin-top: 12px; }
.mk-card > .mk-h3:first-child, .mk-card > .mk-h4:first-child { margin-top: 0; }
.mk-card p { font-size: 15.5px; line-height: 1.66; color: var(--mk-body-2); margin: 10px 0 0; max-width: 46ch; }
/* The rare container that earns its edges: a form, a live widget, a code block,
or the one deliberate emphasis panel on a page. Never for prose. */
.mk-panel { background: #fff; border: 1px solid var(--mk-line); border-radius: 18px; padding: 26px 24px; }
.mk-panel-fill { background: var(--mk-fill); border-color: transparent; }
/* ---- answer sample ------------------------------------------------------- */
/* The hero's evidence element: a real-shaped assistant answer. It earns a
container because it is depicting a surface — the reader has to be able to
tell where the answer starts and stops. Always labelled as an example: we
never dress an illustration up as a measured result. */
.mk-answer { background: #fff; border: 1px solid var(--mk-line); border-radius: 16px;
padding: 22px 24px 20px; box-shadow: 0 34px 60px -46px rgba(20,24,33,.45); }
.mk-answer-q { display: flex; gap: 10px; align-items: baseline; padding-bottom: 15px;
border-bottom: 1px solid var(--mk-line-2); }
.mk-answer-q span { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--mk-soft); }
.mk-answer-q p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--mk-ink); font-weight: 600; }
.mk-answer-a { margin: 15px 0 0; font-size: 15px; line-height: 1.68; color: var(--mk-body-2); }
.mk-answer-a mark { background: none; color: var(--mk-ink); font-weight: 600;
border-bottom: 2px solid var(--mk-accent); padding-bottom: 1px; }
.mk-answer-you { display: flex; align-items: center; gap: 9px; margin-top: 17px; padding-top: 15px;
border-top: 1px solid var(--mk-line-2); font-size: 14px; font-weight: 600; color: var(--mk-accent-text); }
.mk-answer-you::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
background: var(--mk-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E2E' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/10px no-repeat; }
.mk-answer-ok { color: var(--mk-ok); }
.mk-answer-ok::before { background: var(--mk-ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7A5F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.mk-answer-note { margin: 13px 0 0; font-size: 12px; color: var(--mk-soft); }
.mk-answer .mk-checks li { font-size: 14.5px; }
.mk-card-dark { background: radial-gradient(125% 130% at 85% -12%, #26303C 0%, #141821 55%);
border: 1px solid var(--mk-ink); border-radius: 18px; padding: 28px 26px; color: #fff;
position: relative; overflow: hidden; }
.mk-card-dark .mk-h3, .mk-card-dark .mk-h4 { color: #fff; }
.mk-card-dark p { color: rgba(255,255,255,.74); }
.mk-card-dark::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #F17A5A, var(--mk-accent-deep)); }
/* The emblem is the icon, not a tinted tile behind the icon — one marker per
group is enough, and the group already has its accent rule. */
.mk-emblem { display: inline-flex; align-items: center; justify-content: flex-start; flex: none;
width: auto; height: 26px; border-radius: 0; background: none; }
.mk-emblem svg { width: 24px; height: 24px; }
.mk-panel .mk-emblem, .mk-card-dark .mk-emblem { background: none; }
/* Index numerals are set large and quiet — they do the ordering work a numbered
card badge used to do, without the badge. */
.mk-step-no { display: block; font-family: var(--mk-display); font-size: 14px; font-weight: 700;
color: var(--mk-accent-deep); letter-spacing: .1em; text-transform: uppercase; }
/* ---- lists & tables ----------------------------------------------------- */
.mk-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
/* The marker is absolutely positioned, NOT a flex item. As a flex row, an item
like "Null results are published — an experiment that…" split into two
flex items — the and the anonymous text run after it — and rendered as two
ragged columns. Block flow keeps a bolded lead-in and its sentence on one
line, which is how every one of these list items is actually written. */
.mk-checks li { position: relative; padding-left: 28px;
font-size: 15px; line-height: 1.5; color: var(--mk-body); }
.mk-checks li::before { content: ""; position: absolute; left: 0; top: .16em;
width: 18px; height: 18px;
border-radius: 50%; background: var(--mk-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
/* A grid of cards that is genuinely an enumeration — a topic listing, a set of
guides — is marked up as a . The bullets go; the semantics stay, which is
what makes the set legible to a parser as one list rather than loose links. */
ul.mk-cardlist { list-style: none; margin: 0; padding: 0; }
ul.mk-cardlist > li { display: flex; min-width: 0; }
ul.mk-cardlist > li > a { flex: 1; display: block; }
.mk-card-dark .mk-checks li { color: rgba(255,255,255,.85); }
.mk-card-dark .mk-checks li::before { background-color: rgba(139,233,192,.16);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238BE9C0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
/* Real tabular data earns its rules — but they are hairlines between rows, not
a box drawn around the whole thing. */
.mk-table-scroll { overflow-x: auto; margin-top: 26px; -webkit-overflow-scrolling: touch; }
table.mk-table { width: 100%; min-width: 560px; border-collapse: collapse; background: none;
border: 0; }
table.mk-table th, table.mk-table td { text-align: left; padding: 17px 22px 17px 0;
font-size: 15px; line-height: 1.55; border-top: 1px solid var(--mk-line-2); vertical-align: top; }
table.mk-table thead th { background: none; border-top: none; border-bottom: 2px solid var(--mk-ink);
padding-bottom: 11px;
font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mk-ink); }
table.mk-table td { color: var(--mk-body); }
table.mk-table td b, table.mk-table th b { color: var(--mk-ink); font-weight: 600; }
/* ---- pills & metrics ---------------------------------------------------- */
.mk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
font-size: 12px; font-weight: 700; background: var(--mk-tint); color: var(--mk-accent-text); }
.mk-pill-ok { background: var(--mk-ok-bg); color: var(--mk-ok); }
.mk-pill-soft { background: var(--mk-fill); color: var(--mk-soft); }
.mk-stat { font-family: var(--mk-display); font-size: clamp(36px, 2rem + 1.1vw, 46px); font-weight: 600;
letter-spacing: -.03em; color: var(--mk-ink); line-height: 1; }
.mk-stat-rule { height: 2px; width: 44px; background: var(--mk-accent); margin: 14px 0; }
.mk-stat-cap { font-size: 14.5px; line-height: 1.55; color: var(--mk-body-2); }
/* ---- FAQ (details/summary — works with JavaScript off) ------------------ */
/* Hairline-separated rows, not a stack of bordered pills. */
.mk-faqs { display: grid; gap: 0; margin-top: 30px; border-top: 1px solid var(--mk-line); }
details.mk-faq { background: none; border: 0; border-bottom: 1px solid var(--mk-line); border-radius: 0; }
details.mk-faq > summary { list-style: none; cursor: pointer; padding: 22px 0;
display: flex; align-items: baseline; gap: 16px;
font-family: var(--mk-display); font-size: 18px; font-weight: 600; color: var(--mk-ink); letter-spacing: -.015em;
transition: color .2s ease; }
details.mk-faq > summary:hover { color: var(--mk-accent-text); }
details.mk-faq > summary::-webkit-details-marker { display: none; }
details.mk-faq > summary::after { content: ""; flex: none; margin-left: auto; width: 15px; height: 15px;
align-self: center;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EC6B4C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/15px no-repeat;
transition: transform .3s ease; }
details.mk-faq[open] > summary::after { transform: rotate(45deg); }
details.mk-faq > div { padding: 0 0 24px; font-size: 16px; line-height: 1.68; color: var(--mk-body-2); max-width: 72ch; }
/* ---- closing CTA band --------------------------------------------------- */
.mk-cta { position: relative; overflow: hidden; border-radius: 26px; color: #fff; text-align: center;
padding: 66px 40px;
background: radial-gradient(120% 140% at 82% -20%, #3B2519 0%, #1C130D 52%, #120C08 100%); }
.mk-cta h2 { font-family: var(--mk-display); font-size: clamp(28px, 1.4rem + 1.7vw, 40px); line-height: 1.08; font-weight: 600;
letter-spacing: -.03em; margin: 0; color: #fff; text-wrap: balance; }
.mk-cta p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 16px auto 0; max-width: 54ch; }
.mk-cta .mk-btns { justify-content: center; }
.mk-cta-fine { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 18px; }
/* ---- next-page rail ("keep reading") ------------------------------------ */
.mk-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 26px;
border-top: 1px solid var(--mk-line); padding-top: 4px; }
.mk-rail a { display: block; background: none; border: 0; border-radius: 0; padding: 22px 0 0;
transition: color .2s ease; }
.mk-rail a:hover { transform: none; box-shadow: none; }
.mk-rail a:hover .mk-rail-t { color: var(--mk-accent-text); }
.mk-rail .mk-rail-t { font-family: var(--mk-display); font-size: 17px; font-weight: 600; color: var(--mk-ink);
letter-spacing: -.015em; transition: color .2s ease; }
.mk-rail .mk-rail-s { font-size: 14px; line-height: 1.55; color: var(--mk-soft); margin-top: 6px; }
/* ---- resource request ("email me a copy", see resource.js) --------------- */
/* Deliberately NOT a bordered card. The download link sits beside the form as an
equal, because on the open tier the file really does download without an
address — a box around the form would read as a gate, and the gate is the
thing our own methodology says not to build. */
.rq { display: flex; flex-wrap: wrap; gap: 11px; align-items: center;
margin: 26px 0 0; max-width: 560px; }
.rq-wide { max-width: 760px; }
.rq input[type="email"], .rq input[type="text"], .rq input[type="url"], .rq select {
flex: 1 1 230px; min-width: 0; background: #fff; border: 1px solid var(--mk-line);
border-radius: 12px; padding: 14px 17px; font-family: inherit; font-size: 16px;
color: var(--mk-ink); outline: none; accent-color: var(--mk-accent);
box-shadow: 0 8px 22px -18px rgba(20, 24, 33, .45); }
.rq input:focus, .rq select:focus { border-color: var(--mk-accent); }
/* The browser's own select chevron is a system-grey triangle; ours is warm. */
.rq select { appearance: none; -webkit-appearance: none; padding-right: 42px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; }
.rq-field { display: grid; gap: 7px; flex: 1 1 230px; min-width: 0; }
.rq-field > label { font-size: 13px; font-weight: 600; color: var(--mk-body); }
.rq-field input, .rq-field select { flex: none; width: 100%; }
.rq-row { display: flex; flex-wrap: wrap; gap: 11px; width: 100%; }
.rq-consent { display: flex; align-items: flex-start; gap: 9px; width: 100%;
font-size: 13.5px; line-height: 1.5; color: var(--mk-soft); }
.rq-consent input { flex: none; width: 16px; height: 16px; margin-top: 2px;
accent-color: var(--mk-accent); }
.rq-msg { width: 100%; margin: 4px 0 0; font-size: 14.5px; font-weight: 600; color: var(--mk-soft); }
.rq-msg.ok { color: var(--mk-ok); }
.rq-msg.err { color: var(--mk-accent-text); }
/* The honest line under a form: what the address is and isn't used for. */
.rq-fine { font-size: 13px; line-height: 1.55; color: var(--mk-soft); margin: 12px 0 0; max-width: 60ch; }
/* ---- breadcrumb --------------------------------------------------------- */
.mk-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font-size: 13px; color: var(--mk-soft); margin: 0 0 18px; }
.mk-crumb a { color: var(--mk-soft); font-weight: 500; }
.mk-crumb a:hover { color: var(--mk-accent); }
.mk-crumb span[aria-hidden] { opacity: .5; }
/* ---- footer (shared partial, see apps/console/footer.html) --------------- */
.mk-footer { background: #0D0B12; color: #fff; padding: 56px 0 42px; }
.mk-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 28px; }
.mk-footer-brand { display: flex; align-items: center; gap: 10px; }
.mk-footer-mark { width: 30px; height: 30px; border-radius: 8px; flex: none;
background: linear-gradient(180deg, #F17A5A, var(--mk-accent-deep));
display: flex; align-items: center; justify-content: center; }
.mk-footer-word { font-family: var(--mk-display); font-weight: 600; font-size: 18px; }
.mk-footer-blurb { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.55); margin-top: 14px; max-width: 32ch; }
.mk-footer-h { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.45); margin-bottom: 14px; }
.mk-footer-col { display: flex; flex-direction: column; gap: 10px; }
.mk-footer-col a { font-size: 14px; color: rgba(255,255,255,.72); transition: color .2s ease; }
.mk-footer-col a:hover { color: #F5A78B; }
.mk-footer-base { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
font-size: 13px; color: rgba(255,255,255,.45); }
.mk-footer-base a { color: rgba(255,255,255,.5); }
.mk-footer-base a:hover { color: #F5A78B; }
.mk-footer-legal { display: flex; gap: 20px; }
/* ---- motion ------------------------------------------------------------- */
/* One gesture, used twice: a short rise into place. The hero plays it on load
as a stagger down the column; everything below plays it on scroll.
`both` fill-mode is what holds the pre-animation state, so the reduced-motion
block at the foot of this file must clear `animation` outright — setting only
`transition: none` would leave these elements stuck at opacity 0. */
@keyframes mk-rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
/* Transform only, no opacity — and that is not a stylistic choice. The hero h1
is the LCP element on every one of these pages, and an element at opacity 0
is not "painted", so a fade-in defers LCP by its whole duration. A page that
sells page-readiness cannot ship a 700ms self-inflicted LCP penalty, and we
grade mentionbeat.com with our own scorer on every change. A rise with no
fade paints immediately and still reads as motion. */
@keyframes mk-rise-t { from { transform: translateY(13px); } to { transform: none; } }
.mk-hero .mk-crumb { animation: mk-rise .5s cubic-bezier(.2,.7,.2,1) .02s both; }
.mk-hero h1.mk-h1 { animation: mk-rise-t .55s cubic-bezier(.2,.7,.2,1) both; }
.mk-hero .mk-lead { animation: mk-rise-t .55s cubic-bezier(.2,.7,.2,1) .07s both; }
.mk-hero .mk-btns { animation: mk-rise .62s cubic-bezier(.2,.7,.2,1) .2s both; }
.mk-hero .mk-answer,
.mk-hero .mk-panel { animation: mk-rise .72s cubic-bezier(.2,.7,.2,1) .26s both; }
/* Scroll-linked reveal with no JavaScript and no observer. Browsers without
scroll-driven animations simply never match the @supports block and render
everything in place — the degraded state is the finished page, which is the
only acceptable fallback for content that has to be readable with JS off. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.mk-sec .mk-sec-head,
.mk-sec .mk-card,
.mk-sec .mk-panel,
.mk-sec .mk-answer,
.mk-sec .mk-rail a,
.mk-sec .mk-stat-cap {
animation: mk-rise linear both;
animation-timeline: view();
/* Range must finish inside `entry` — i.e. before the element is fully in
view. A range ending at `cover N%` can be unreachable for the last
group above the footer: the document runs out of scroll while progress
is still below 1, and that content stays permanently half-faded. */
animation-range: entry 5% entry 55%;
}
}
}
/* ---- responsive --------------------------------------------------------- */
@media (max-width: 980px) {
.mk-hero-grid { grid-template-columns: 1fr; gap: 40px; }
.mk-grid-4 { grid-template-columns: repeat(2, 1fr); }
.mk-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
/* The bloom is sized for a 1240 canvas; unscaled it would swamp a tablet hero. */
.mk-blob-tr { width: 460px; height: 460px; top: -150px; right: -140px; }
.mk-blob-bl { width: 420px; height: 420px; bottom: -170px; left: -150px; }
}
/* Three columns held all the way down to 760px, which put a heading, a
paragraph and an accent rule into ~230px of width. Two is the honest fit. */
@media (max-width: 900px) {
.mk-grid-3, .mk-rail { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.mk-wrap { padding: 0 22px; }
.mk-sec { padding: 62px 0; }
.mk-hero { padding: 74px 0 44px; }
/* h1/h2/CTA-h2 sizes come from clamp() ladders — no fixed override here. */
.mk-lead, .mk-hero .mk-lead { font-size: 17.5px; }
/* Stacked groups need the hairline back: with one column, a large gap alone
reads as loose spacing rather than as a boundary. */
.mk-grid-2, .mk-grid-3, .mk-grid-4, .mk-rail { grid-template-columns: 1fr; gap: 30px; }
.mk-footer-grid { grid-template-columns: 1fr 1fr; }
.mk-cta { padding: 48px 24px; }
.mk-answer { padding: 19px 18px 17px; }
}
@media (max-width: 460px) {
.mk-footer-grid { grid-template-columns: 1fr; gap: 22px; }
/* Label beside title leaves the title ~180px to wrap into; stack them. */
.mk-answer-q { flex-direction: column; align-items: flex-start; gap: 7px; }
.mk-footer-base { justify-content: flex-start; }
/* Below this width two buttons on one row each wrap their own label; one per
row is shorter and reads straight down. */
.mk-btns .mk-btn { width: 100%; justify-content: center; }
}
/* Every motion in this file, off in one place — the drift, both reveals and the
hover transforms. `animation: none` (not just `transition: none`) is
mandatory here: the reveals use fill-mode `both`, so clearing the transition
alone would strand them at opacity 0. */
@media (prefers-reduced-motion: reduce) {
.mk-blob,
.mk-hero .mk-crumb, .mk-hero h1.mk-h1, .mk-hero .mk-lead, .mk-hero .mk-btns,
.mk-hero .mk-answer, .mk-hero .mk-panel,
.mk-sec .mk-sec-head, .mk-sec .mk-card, .mk-sec .mk-panel, .mk-sec .mk-answer,
.mk-sec .mk-rail a, .mk-sec .mk-stat-cap {
animation: none !important; opacity: 1 !important; transform: none !important;
}
.mk-btn, .mk-card, .mk-card::before, .mk-arrow, .mk-rail a, details.mk-faq > summary::after {
transition: none; }
.mk-btn:hover, .mk-btn-primary:hover, .mk-btn-ghost:hover, .mk-btn-onDark:hover,
a.mk-card:hover, .mk-card-lift:hover, .mk-rail a:hover { transform: none; }
}