/* Page styles for templates/landing.html — the marketing landing page at `/`
(the application lives at /analyze and never loads this file). Page-specific
rules only; shared patterns belong in styles.css. Everything is tokens, so
dark mode needs no rules of its own — except the fake invoice paper in the
demo, which is white in both themes because a document is white paper.
All selectors stay scoped under .mk-* or .landing-page — bare element rules
at this level of styles.css have leaked site-wide before.
2026-08 DocAI Rework: hero glow + badge, the interactive evidence demo
(replacing the static screenshot), the facts band, numbered pillar cards,
the supplier/XML card pair, accent-ruled steps, reworked plan cards and the
joined FAQ list all come from the "DocAI UX/UI Rework" design project. */
/* The page's one content column, declared once so the top bar, the main
sections and the shared footer cannot drift apart.
--mk-topnav-h is the sticky bar's approximate height (10px padding twice
plus a ~40px control row); nothing in CSS can read it, and erring high only
leaves an anchored heading a little more air. */
.landing-page {
--mk-content-max: 1080px;
--mk-gutter: 24px;
--mk-topnav-h: 60px;
/* The demo's fake invoice paper — white in both themes. */
--mk-paper: #ffffff;
--mk-paper-ink: #1a1d26;
/* 4.98:1 on white — the paper's secondary text must hold AA on its own,
because the paper ignores the theme. */
--mk-paper-soft: #5f6880;
--mk-paper-line: #e6e8f0;
}
/* WCAG 1.4.10 Reflow — at 320 px viewport the German landing overflows by
84 px of horizontal scroll (scrollWidth 389 vs clientWidth 305). The root
cause is .mk-hero h1: min-content width 340.9 px vs 312 px of available
column — German compound nouns like "Geschäftsdokumenten" cannot break.
At 375 px the excess is still 29 px. English is clean (0 px overshoot).
It must be `anywhere`, NOT `break-word`. Both break a too-long word when
rendering a line, but per CSS Text 3 only `anywhere` is allowed to affect
the element's INTRINSIC min-content size — and intrinsic size is what is
wrong here. `break-word` was measured on this exact page and changed
nothing: the h1 min-content stayed 340.9 px, still forced .mk-landing to
388.9 px, and the 84 px overflow survived. Switching to `anywhere` drops
the h1 min-content to 31.2 px and scrollWidth to 305 = clientWidth.
hyphens: auto is kept for typography, not for the fix — where the browser
ships a dictionary for the it breaks at syllable boundaries
with a hyphen, which reads far better than a mid-word split. It is NOT
load-bearing: headless Chromium has no German dictionary and hyphenated
nothing, which is precisely why the guarantee has to come from `anywhere`.
-webkit-hyphens is required for Safari. */
.landing-page :is(h1, h2, h3) {
overflow-wrap: anywhere;
-webkit-hyphens: auto;
hyphens: auto;
}
/* Jumping to #how-it-works aligns the section's top edge with the viewport's,
which the sticky bar covers — the heading and the first step landed behind
it. scroll-margin is inert until an element is actually scrolled to, so
claiming every id on the page costs nothing and covers anchors added later. */
.landing-page [id] {
scroll-margin-top: calc(var(--mk-topnav-h) + var(--space-3));
}
/* ── Top navigation ───────────────────────────────────────────────────── */
.mk-topnav {
position: sticky;
top: 0;
z-index: 50;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.mk-topnav-inner {
max-width: var(--mk-content-max);
margin: 0 auto;
padding: 10px var(--mk-gutter);
display: flex;
align-items: center;
gap: var(--space-6);
}
/* Spacing/alignment of the brand tile lives on .logo-mark (styles.css) so the
sidebar and this top nav cannot drift; only the size differs here. */
.mk-topnav-logo { font-size: var(--text-xl); }
.mk-topnav-menu {
display: flex;
align-items: center;
gap: var(--space-6);
margin-left: auto;
}
.mk-topnav-links {
display: flex;
align-items: center;
gap: var(--space-5);
}
/* Note: --text is an alias of --ink (styles.css sets --text: var(--ink) in
every theme block). Using var(--text) as the rest colour and var(--ink) on
hover is therefore a no-op — both values resolve to the same computed
colour and the hover has zero visible effect. Use var(--ink-soft) for the
rest state so the hover-to-var(--ink) transition actually reads. This
matches the .nav-link-btn pattern in styles.css (rest --ink-soft, hover
--ink). WCAG AA contrast check: #5a6178 on #f6f7fb (light) = 5.74:1 ✓;
#9aa0b4 on #0a0c12 (dark) = 7.50:1 ✓. */
.mk-topnav-links a {
color: var(--ink-soft);
text-decoration: none;
font-weight: 500;
font-size: var(--text-md);
padding: 8px 2px;
}
.mk-topnav-links a:hover { color: var(--ink); }
.mk-topnav-actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.mk-topnav-lang {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--muted);
}
.mk-topnav-lang select {
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: var(--text-sm);
padding: 6px 8px;
}
/* The two quiet, text-only actions in the bar: "Sign in" for a stranger,
"Sign out" for a signed-in visitor. Same slot, same weight — the primary
button beside them is the one that should draw the eye in both states.
Rest colour is var(--ink-soft), not var(--text): --text aliases --ink
(styles.css sets --text: var(--ink) in every theme block), so a
rest=--text / hover=--ink pair is a no-op with zero visible hover
feedback. var(--ink-soft) at rest gives the hierarchy gap the design
needs and lets the hover-to-ink transition land. */
.mk-topnav-signin,
.mk-topnav-signout {
background: none;
border: none;
cursor: pointer;
font: inherit;
font-weight: 500;
font-size: var(--text-md);
color: var(--ink-soft);
padding: 8px 10px;
}
.mk-topnav-signin:hover,
.mk-topnav-signout:hover { color: var(--ink); }
/* The bar must never force a horizontal scroll: long locale strings wrap
inside the buttons rather than widening the page. */
.mk-topnav-cta { white-space: normal; }
/* The two auth variants of the top bar's action slot. Only one is ever
unhidden (clerk.js reconciles [data-auth-state] against the live session),
and this wrapper reproduces the row .mk-topnav-actions gave the buttons when
they were its direct children — same gap, same centring.
The inline-flex does NOT need a matching [hidden] guard: styles.css declares
`[hidden], .hidden { display: none !important; }` once, globally, precisely
so a new JS-toggled block never has to remember one. */
.mk-topnav-authset {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.mk-nav-toggle {
display: none;
background: none;
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--text);
cursor: pointer;
padding: 8px;
margin-left: auto;
}
/* ── Page scaffold ────────────────────────────────────────────────────── */
.mk-landing {
max-width: var(--mk-content-max);
margin: 0 auto;
padding: var(--space-10) var(--mk-gutter) var(--space-12);
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.mk h2 {
margin: 0 0 var(--space-3);
font-weight: 700;
letter-spacing: -0.028em;
font-size: clamp(1.45rem, 2.6vw, 2.125rem);
line-height: 1.2;
color: var(--ink);
}
.mk > p {
margin: 0;
max-width: 720px;
font-size: var(--text-md);
line-height: 1.6;
color: var(--text);
}
/* `.mk > p` is margin-0 because every other section carries a single lead
paragraph. The MCP section has two (positioning, then the tested-clients
qualifier), which would otherwise run together as one block. */
.mk-mcp > p + p { margin-top: var(--space-3); }
.mk-links { margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.mk-links a { color: var(--accent-text); text-underline-offset: 2px; }
/* Small uppercase section opener (mock: "LIVE DEMO"). --accent-text, not
--accent: in dark mode #7b68f0 on the page ground is only 4.77:1 while the
text variant clears it with margin in both themes. */
.mk-eyebrow {
margin: 0 0 var(--space-3);
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-text);
}
/* ── Hero ─────────────────────────────────────────────────────────────── */
/* One centered column with the design's radial accent glow bleeding from the
top edge. The glow is --accent-light, so it re-tints per theme. */
.mk-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: var(--space-10);
padding-bottom: var(--space-4);
background: radial-gradient(ellipse 900px 420px at 50% -8%, var(--accent-light), transparent 70%);
}
.mk-hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-6);
padding: 6px 14px;
border: 1px solid var(--border-strong);
border-radius: 999px;
font-size: var(--text-xs);
color: var(--ink-soft);
}
.mk-hero-badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
flex-shrink: 0;
}
.mk-hero h1 {
margin: 0 0 var(--space-5);
max-width: 940px;
font-weight: 700;
letter-spacing: -0.035em;
font-size: clamp(2.1rem, 4.6vw, 3.6rem);
line-height: 1.08;
color: var(--ink);
text-wrap: balance;
}
.mk-lead {
margin: 0 0 var(--space-8);
max-width: 680px;
font-size: var(--text-lg);
line-height: 1.6;
color: var(--ink-soft);
text-wrap: pretty;
}
.mk-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
align-items: center;
}
.mk-hero-note {
margin: var(--space-4) 0 0;
font-size: var(--text-sm);
color: var(--muted);
}
/* ── Evidence demo ────────────────────────────────────────────────────── */
.mk-evidence {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mk-evidence-sub {
margin: 0 0 var(--space-5);
max-width: 560px;
font-size: var(--text-md);
line-height: 1.6;
color: var(--ink-soft);
}
.mk-evidence-steps {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
list-style: none;
margin: 0 0 var(--space-6);
padding: 0;
counter-reset: evidence-step;
}
.mk-evidence-steps li {
display: inline-flex;
align-items: center;
gap: var(--space-2);
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--surface);
padding: 6px 16px 6px 8px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink);
}
.mk-evidence-steps li::before {
counter-increment: evidence-step;
content: counter(evidence-step);
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent-cta);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
}
/* Two panels fused into one unit: 1px --border gaps between --surface cells,
clipped by the rounded frame — the design's signature container. */
.mk-demo {
width: 100%;
max-width: 1000px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
text-align: left;
}
.mk-demo-doc {
background: var(--surface);
padding: var(--space-5);
min-width: 0;
}
.mk-demo-dochead {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.mk-demo-docname {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink);
overflow-wrap: anywhere;
}
.mk-demo-docmeta {
font-size: var(--text-xs);
color: var(--ink-soft);
border: 1px solid var(--border-strong);
border-radius: 6px;
padding: 3px 8px;
white-space: nowrap;
}
/* The fake invoice. White in both themes (see --mk-paper above); every text
colour inside is therefore fixed, not tokenized. */
.mk-demo-paper {
background: var(--mk-paper);
color: var(--mk-paper-ink);
border-radius: 10px;
padding: var(--space-6) var(--space-6) var(--space-5);
font-size: var(--text-xs);
line-height: 1.9;
}
.mk-demo-paperhead {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.mk-demo-papertitle {
display: block;
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: -0.02em;
}
.mk-demo-papersub {
display: block;
font-size: 0.65rem;
letter-spacing: 0.08em;
color: var(--mk-paper-soft);
}
.mk-demo-paperseller {
text-align: right;
font-size: 0.68rem;
line-height: 1.6;
color: var(--mk-paper-soft);
}
.mk-demo-rows {
display: grid;
grid-template-columns: minmax(96px, 130px) minmax(0, 1fr);
gap: 2px var(--space-3);
align-items: baseline;
}
.mk-demo-rowlabel { color: var(--mk-paper-soft); }
.mk-demo-rowvalue { min-width: 0; overflow-wrap: anywhere; }
.mk-demo-items {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
gap: 2px var(--space-3);
margin: var(--space-4) 0;
padding: var(--space-2) 0;
border-top: 1px solid var(--mk-paper-line);
border-bottom: 1px solid var(--mk-paper-line);
font-size: 0.68rem;
color: var(--mk-paper-ink);
}
.mk-demo-items span:nth-child(4n) { text-align: right; }
.mk-demo-totals { max-width: 340px; margin-left: auto; margin-top: var(--space-3); }
/* A source mark on the page. Rest: quiet accent tint with an inked underline
(the "this was read from here" affordance); active: solid fill. Buttons,
so they are keyboard-reachable; the global :focus-visible ring applies.
--accent-cta rather than --accent for the fill: the paper is white in both
themes and white-on-#7b68f0 is only 4.13:1. */
.mk-mark {
display: inline;
border: 0;
font: inherit;
cursor: pointer;
border-radius: 3px;
padding: 1px 3px;
margin: -1px -3px;
color: inherit;
background: rgba(91, 69, 224, 0.12);
box-shadow: inset 0 -1px 0 rgba(91, 69, 224, 0.4);
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
overflow-wrap: anywhere;
}
.mk-mark:hover { background: rgba(91, 69, 224, 0.22); }
.mk-mark.is-active {
background: var(--accent-cta);
color: #fff;
box-shadow: 0 0 0 2px var(--accent-border);
}
/* Right panel: the extracted-field list. */
.mk-demo-fields {
background: var(--surface);
display: flex;
flex-direction: column;
min-width: 0;
}
.mk-demo-fieldshead {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border);
}
.mk-demo-fieldstitle { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.mk-demo-fieldsmeta { font-size: var(--text-xs); color: var(--ink-soft); }
.mk-demo-fieldlist {
flex: 1;
padding: var(--space-2);
display: flex;
flex-direction: column;
gap: 2px;
}
.mk-demo-field {
display: block;
width: 100%;
text-align: left;
font: inherit;
cursor: pointer;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
color: var(--ink);
transition: background 0.15s ease, border-color 0.15s ease;
}
.mk-demo-field:hover { background: var(--surface-soft); }
.mk-demo-field.is-active {
border-color: var(--accent-border);
background: var(--accent-light);
}
.mk-demo-fieldrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: 3px;
}
.mk-demo-fieldlabel { font-size: var(--text-xs); color: var(--ink-soft); }
.mk-demo-fieldvalue {
display: block;
font-family: var(--font-mono);
font-size: var(--text-md);
font-weight: 500;
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
/* Confidence chip — mono, status-tinted. Text tokens, never the fill hues:
the pinned ratios live on --success-text / --warn-text. */
.mk-conf {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: 600;
padding: 2px 6px;
border-radius: 5px;
flex-shrink: 0;
}
.mk-conf-ok { color: var(--success-text); background: var(--success-soft); }
.mk-conf-warn { color: var(--warn-text); background: var(--warn-soft); }
.mk-demo-foot {
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--border);
font-size: var(--text-sm);
}
.mk-demo-foot a { color: var(--accent-text); text-underline-offset: 2px; font-weight: 600; }
/* ── Facts band ───────────────────────────────────────────────────────── */
.mk-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
.mk-stats-grid li {
background: var(--surface);
padding: var(--space-6) var(--space-5);
display: flex;
flex-direction: column;
}
.mk-stat-n {
font-size: clamp(1.8rem, 3vw, 2.375rem);
font-weight: 700;
letter-spacing: -0.035em;
color: var(--ink);
margin-bottom: var(--space-1);
}
.mk-stat-t {
font-size: var(--text-md);
font-weight: 600;
color: var(--ink);
margin-bottom: var(--space-1);
}
.mk-stat-d {
font-size: var(--text-sm);
line-height: 1.5;
color: var(--ink-soft);
}
/* ── Trust pillars ────────────────────────────────────────────────────── */
.mk-trust-sub {
margin: 0 0 var(--space-6);
max-width: 620px;
font-size: var(--text-md);
line-height: 1.6;
color: var(--ink-soft);
}
.mk-trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
counter-reset: pillar;
}
.mk-trust-grid li {
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
padding: var(--space-6);
transition: border-color 0.15s ease;
}
.mk-trust-grid li:hover { border-color: var(--accent-border); }
.mk-trust-grid li::before {
counter-increment: pillar;
content: counter(pillar, decimal-leading-zero);
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--accent-light);
color: var(--accent-text);
font-size: var(--text-base);
font-weight: 700;
margin-bottom: var(--space-4);
}
.mk-trust-grid p { margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--ink-soft); }
.mk-point-title {
font-weight: 600;
color: var(--ink);
margin: 0 0 var(--space-1);
}
/* ── Supplier learning + e-invoice XML card pair ─────────────────────── */
.mk-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.mk-pair > .mk {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
padding: var(--space-8);
min-width: 0;
}
.mk-pair .mk h2 { font-size: var(--text-2xl); letter-spacing: -0.022em; }
.mk-pair .mk > p { font-size: var(--text-md); color: var(--ink-soft); }
.mk-supplier-visual {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-6);
}
.mk-minidoc {
flex: 1;
border: 1px solid var(--border);
border-radius: 11px;
background: var(--surface-soft);
padding: var(--space-4);
min-width: 0;
}
.mk-minidoc-next { border-color: var(--accent-border); }
.mk-minidoc-name {
margin: 0 0 var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
color: var(--muted);
}
.mk-minidoc-field {
margin: 0 0 var(--space-3);
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: 1.6;
color: var(--ink);
overflow-wrap: anywhere;
}
.mk-minidoc-field span {
display: block;
font-family: var(--font-ui);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.mk-minidoc-field s { color: var(--muted); margin-right: var(--space-1); }
.mk-minidoc-tag {
display: inline-block;
margin: 0;
padding: 3px 8px;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.mk-tag-fixed { background: var(--warn-soft); color: var(--warn-text); }
.mk-tag-hint { background: var(--success-soft); color: var(--success-text); }
.mk-minidoc-arrow {
flex: 0 0 auto;
font-size: var(--text-xl);
color: var(--muted);
}
/* Mono snippet box, shared by the KSeF XML sample and the MCP install command.
`overflow-wrap: anywhere` is what keeps the long npx command from pushing the
section wider than the viewport on narrow screens. */
.mk-xml-snippet,
.mk-cmd {
margin-top: var(--space-6);
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 11px;
padding: var(--space-4);
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: 1.85;
color: var(--ink-soft);
overflow-wrap: anywhere;
}
.mk-xml-snippet span,
.mk-cmd span { color: var(--accent-text); }
.mk-xml-ok { color: var(--success-text); margin-top: var(--space-2); font-family: var(--font-ui); font-weight: 600; }
/* ── How it works ─────────────────────────────────────────────────────── */
.mk-how-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
list-style: none;
margin: 0;
padding: 0;
}
/* Accent rule on top, mono step number — the mock's editorial step style. */
.mk-how-steps li {
border-top: 2px solid var(--accent);
padding-top: var(--space-5);
}
/* The step label is real markup, not a CSS counter with `content: "STEP "`:
a content string is invisible to pybabel, so the word stayed English on the
five translated locales (and was still announced to AT). The template owns
both the word and its position relative to the numeral. */
.mk-step-n {
display: block;
margin: 0 0 var(--space-3);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 600;
color: var(--accent-text);
}
.mk-how-steps p {
margin: 0;
font-size: var(--text-md);
line-height: 1.6;
color: var(--ink-soft);
}
.mk-how-steps .mk-point-title {
font-size: var(--text-lg);
margin-bottom: var(--space-2);
}
/* ── Pricing preview ──────────────────────────────────────────────────── */
.mk-pricing-sub {
margin: 0 0 var(--space-5);
max-width: 720px;
color: var(--ink-soft);
line-height: 1.6;
}
.mk-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
}
.mk-plan {
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
padding: var(--space-6);
}
/* The tag is absolutely positioned, so the card has to RESERVE its line —
otherwise a longer translation ("Recomendado", "Recommandé") lands on the
same baseline as .mk-plan-name and the two collide once the auto-fit grid
drops the card near its 200px minimum. */
.mk-plan-featured {
border-color: var(--accent-border);
box-shadow: 0 0 0 3px var(--accent-light);
padding-top: calc(var(--space-6) + 26px);
}
.mk-plan-tag {
position: absolute;
top: var(--space-5);
right: var(--space-5);
margin: 0;
font-size: var(--text-2xs);
font-weight: 600;
color: var(--accent-text);
background: var(--accent-light);
padding: 4px 9px;
border-radius: 6px;
}
.mk-plan-name { margin: 0 0 var(--space-2); font-weight: 600; color: var(--ink); }
.mk-plan-price {
margin: 0 0 var(--space-3);
font-size: var(--text-display);
font-weight: 700;
letter-spacing: -0.035em;
color: var(--ink);
}
.mk-plan-price span { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.mk-plan ul {
margin: 0;
padding-left: 18px;
font-size: var(--text-sm);
line-height: 1.7;
color: var(--ink-soft);
}
/* ── FAQ ──────────────────────────────────────────────────────────────── */
/* One joined list — 1px --border seams between --surface rows inside a
clipped rounded frame, same construction as the demo panel. Overrides the
global details/summary card look, so every rule is scoped to .mk-faq-*. */
.mk-faq-list {
max-width: 820px;
display: flex;
flex-direction: column;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
}
.mk-faq-item,
.mk-faq-item:first-child {
margin: 0;
border: 0;
border-radius: 0;
background: var(--surface);
}
.mk-faq-item > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
font-size: var(--text-md);
font-weight: 500;
color: var(--ink);
cursor: pointer;
list-style: none;
}
.mk-faq-item > summary::-webkit-details-marker { display: none; }
.mk-faq-item > summary::after {
content: "+";
font-size: var(--text-xl);
line-height: 1;
color: var(--muted);
flex-shrink: 0;
transition: transform 0.2s ease;
}
.mk-faq-item[open] > summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
.mk-faq-item > summary::after { transition: none; }
}
.mk-faq-item > p {
margin: 0;
padding: 0 var(--space-5) var(--space-5);
max-width: 680px;
font-size: var(--text-md);
line-height: 1.7;
color: var(--ink-soft);
}
/* ── Final CTA + AI disclosure ────────────────────────────────────────── */
.mk-final {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background:
radial-gradient(ellipse 700px 300px at 50% 120%, var(--accent-light), transparent 70%),
var(--surface);
padding: var(--space-12) var(--space-8);
}
.mk-final .mk-pricing-sub {
max-width: 560px;
}
.mk-disclosure-row {
display: flex;
justify-content: center;
}
/* ── Shared footer ────────────────────────────────────────────────────── */
/* _footer.html is shared with the app pages, where it is hidden behind
body:has(#app-sidebar) — the landing is its first and only visible consumer,
and it arrived here 1200px wide against the page's 1080px column, overhanging
every other element on the page by ~60px a side.
The two structures put their gutter in different places: .mk-topnav-inner and
.mk-landing are 1080px border-box WITH the 24px padding inside, while
.site-footer-inner has no padding at all — .site-footer holds it. So the
footer's row has to be the CONTENT width, gutters already subtracted, or its
text would line up a gutter outside the logo above it. */
.landing-page .site-footer {
padding-left: var(--mk-gutter);
padding-right: var(--mk-gutter);
}
.landing-page .site-footer-inner {
max-width: calc(var(--mk-content-max) - 2 * var(--mk-gutter));
}
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
.mk-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.mk-nav-toggle { display: inline-flex; }
/* Collapsed by default; the toggle discloses one stacked panel holding the
links AND the auth actions, anchored under the sticky bar. */
.mk-topnav-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: var(--space-4);
margin: 0;
padding: var(--space-4) 24px var(--space-5);
background: var(--bg);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-lg);
}
.mk-topnav-menu.is-open { display: flex; }
.mk-topnav-links {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.mk-topnav-links a { padding: 12px 2px; }
.mk-topnav-actions {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
/* The auth buttons are wrapped in .mk-topnav-authset (one variant per auth
state), so the column above now applies to the WRAPPER, not to them. The
wrapper has to hand the stacking on, or the two CTAs sit side by side in a
panel where every other row is full-width — worst in de/pl, where
"Kostenloses Konto erstellen" then wraps inside a half-width pill. */
.mk-topnav-authset {
flex-direction: column;
align-items: stretch;
}
.mk-topnav-lang { justify-content: flex-start; }
.mk-landing { gap: var(--space-10); }
.mk-hero { padding-top: var(--space-6); }
.mk-demo { grid-template-columns: 1fr; }
.mk-pair { grid-template-columns: 1fr; }
.mk-how-steps { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 560px) {
.mk-supplier-visual { flex-direction: column; align-items: stretch; }
.mk-minidoc-arrow { align-self: center; transform: rotate(90deg); }
.mk-stats-grid { grid-template-columns: 1fr; }
.mk-demo-paper { padding: var(--space-4); }
.mk-pair > .mk { padding: var(--space-5); }
}