/* ────────────────────────────────────────────────────────────────────────── marketing.css — the "Independent Survey" marketing surface (Razor SSR). Builds ON app.css's shipped Fjeld tokens + REUSES app.css components (.brand lockup, .wd-card / .hr-* survey cards, .band-/.ink-/.fill- band colours, .chip, .btn). This file is only page scaffolding + Nordic rhythm; everything is var()-driven so it themes light/dark automatically. ────────────────────────────────────────────────────────────────────────── */ .mk { --mk-display: clamp(2.4rem, 1.4rem + 3.4vw, 3.6rem); /* hero H1 */ --mk-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); /* section heads */ --mk-measure: 60ch; --mk-shell: 1140px; --mk-gap: clamp(2rem, 1rem + 3vw, 3.25rem); --mk-section: clamp(2.5rem, 1.5rem + 2.8vw, 4rem); --hairline: var(--border); } .mk-shell { max-width: var(--mk-shell); margin: 0 auto; padding: 0 clamp(1.1rem, 0.5rem + 2vw, 2rem); } /* ── Header ───────────────────────────────────────────────────────────────── */ .mk-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--hairline); } .mk-header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 62px; } .mk-header .brand { font-size: 17px; } /* the real app.css .brand lockup — logo + name + byline */ .mk-nav { display: flex; gap: 1.4rem; margin-left: 1.25rem; } .mk-nav a { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; } .mk-nav a:hover { color: var(--heading); text-decoration: none; } .mk-header-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; } .mk-link-quiet { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; } .mk-link-quiet:hover { color: var(--heading); text-decoration: none; } .mk-theme { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: transparent; color: var(--muted); cursor: pointer; } .mk-theme:hover { color: var(--heading); background: var(--surface-2); } .mk-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; } .mk-ico-moon { display: none; } /* dark default → offer the sun */ :root[data-theme="light"] .mk-ico-sun { display: none; } :root[data-theme="light"] .mk-ico-moon { display: block; } @media (max-width: 860px) { .mk-nav { display: none; } .mk-link-quiet { display: none; } } /* The money action must be the largest interactive type — was overriding app.css's 16px down to 14px. */ .btn-lg { padding: 12px 22px; font-size: var(--fs-lg); font-weight: 600; border-radius: var(--r-md); } /* ── Section rhythm ───────────────────────────────────────────────────────── */ .mk-section { padding: var(--mk-section) 0; border-top: 1px solid var(--hairline); } .mk-section.mk-plain { border-top: 0; } .mk-kicker { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .mk-kicker::before { content: ""; width: 18px; height: 1px; background: var(--accent); display: inline-block; } .mk-section-head { max-width: var(--mk-measure); margin: 0 auto 1.4rem; text-align: center; } .mk-section-head h2 { font-size: var(--mk-h2); line-height: 1.12; letter-spacing: -0.02em; color: var(--heading); margin: .65rem 0 .55rem; } /* Design baseline: centered heads, LEFT bodies. The kicker + H2 stay centered (the announcement); the descriptive paragraph reads left-aligned within the centered measure column — centered long body text is hard to read. */ .mk-section-head p { color: var(--muted); font-size: var(--fs-lg); line-height: 1.6; margin: .55rem 0 0; text-align: left; } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .mk-hero { padding: clamp(3rem, 1.5rem + 5vw, 5.5rem) 0 var(--mk-section); } .mk-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--mk-gap); align-items: center; } .mk-hero h1 { font-size: var(--mk-display); line-height: 1.05; letter-spacing: -0.03em; color: var(--heading); margin: 1rem 0 1.1rem; max-width: 16ch; } .mk-lede { font-size: var(--fs-xl); line-height: 1.5; color: var(--text); max-width: 48ch; margin: 0 0 1.6rem; } .mk-lede strong { color: var(--heading); font-weight: 600; } .mk-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } .mk-microcopy { margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted); } .mk-microcopy strong { color: var(--text); font-weight: 600; } .mk-hero-proof { position: relative; max-width: 460px; width: 100%; justify-self: end; } .mk-hero-proof .wd-card { width: 100%; } .mk-sample { position: absolute; top: -.7rem; right: .25rem; z-index: 2; font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 0 .4rem; } @media (max-width: 900px) { .mk-hero-grid { grid-template-columns: 1fr; } .mk-hero-proof { justify-self: stretch; margin-top: .5rem; } } /* ── Stat band ────────────────────────────────────────────────────────────── */ .mk-statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; } .mk-stat { background: var(--bg); padding: 1.1rem 1.25rem; } .mk-stat .mk-stat-num { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 600; color: var(--heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .mk-stat .mk-stat-label { font-size: var(--fs-xs); color: var(--muted); margin-top: .2rem; } /* ── Anatomy lenses (reuses app.css .hr-lens / .fill-*/.ink-*) ─────────────── */ .mk-anatomy { max-width: 42rem; } .mk-lens-note { font-size: var(--fs-2xs); color: var(--muted); font-style: italic; margin-left: .4rem; } /* ── Condition legend / cadence pills ─────────────────────────────────────── */ .mk-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; } .mk-legend span { font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-full); border: 1px solid var(--hairline); color: var(--text); display: inline-flex; align-items: center; gap: .45rem; } .mk-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ── "Your code rots" infographic + risk cards ────────────────────────────── */ .mk-rot { width: 100%; max-width: 760px; height: auto; display: block; margin: .5rem auto .25rem; } .mk-rot .rt-axis { stroke: var(--border-strong, var(--border)); stroke-width: 1; fill: none; } .mk-rot .rt-base { stroke: var(--hairline); stroke-width: 1; } .mk-rot .rt-risk { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .mk-rot .rt-tick { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 3; } .mk-rot .rt-evt { fill: var(--bg); stroke-width: 1.5; } .mk-rot .rt-glyph { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .mk-rot .rt-lbl { fill: var(--heading); font-family: var(--font-ui); font-size: 13px; font-weight: 500; } .mk-rot .rt-axlbl { fill: var(--muted); font-family: var(--font-ui); font-size: 12px; } @media (max-width: 560px) { .mk-rot-fig { display: none; } } /* the 3 risk cards carry the point on narrow screens */ .mk-risks { margin-bottom: 1.5rem; } .mk-risk { border: 1px solid var(--hairline); border-left: 3px solid var(--band-poor); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; } .mk-risk-tag { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--band-poor); } .mk-risk p { color: var(--text); font-size: var(--fs-sm); line-height: 1.5; margin: .4rem 0 0; } .mk-resolution { max-width: var(--mk-measure); font-size: var(--fs-lg); line-height: 1.6; color: var(--text); margin: 0; } .mk-resolution strong { color: var(--heading); } /* ── Generic content grids ────────────────────────────────────────────────── */ .mk-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .mk-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .mk-pillar p, .mk-panel p, .mk-aud p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin: .4rem 0 0; } .mk-panel { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.25rem 1.4rem; } .mk-panel-on { border-left: 3px solid var(--band-healthy); } .mk-panel-muted { border-left: 3px solid var(--muted); } .mk-aud { display: block; border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.2rem 1.35rem; color: inherit; transition: border-color .12s ease, background .12s ease; } .mk-aud:hover { text-decoration: none; border-color: var(--accent); background: var(--surface); } .mk-aud .mk-foot-h { color: var(--heading); } @media (max-width: 820px) { .mk-cols-3, .mk-cols-2 { grid-template-columns: 1fr; } } /* ── Public-record gallery (real .wd-card cards) ──────────────────────────── */ .mk-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.75rem; align-items: stretch; } @media (max-width: 900px) { .mk-gallery { grid-template-columns: 1fr; } } /* Equal-height cards: each fills its row's height; the action links pin to the bottom so they line up across a row. Width is left to the card's own rule (.card.hero-report) — height only, no widening. */ .mk-gallery > .wd-card { display: flex; flex-direction: column; } .mk-gallery > .wd-card .hd-actions { margin-top: auto; } /* ── Close ────────────────────────────────────────────────────────────────── */ .mk-close { text-align: center; } .mk-close h2 { font-size: var(--mk-h2); letter-spacing: -0.02em; color: var(--heading); max-width: 30ch; margin: 0 auto 1.25rem; } .mk-close .mk-cta-row { justify-content: center; } /* ── Alignment system: one centered text-stack axis per mid-page section ───────────────────────────────────────── The section heads are centered (above); finish it by centering the orphaned CTA rows / microcopy / legend / lede that otherwise fall back to left and leave a centered-head-over-left-body mismatch. Scoped to .mk-section so the asymmetric-LEFT hero is never caught. Sections whose body is a data TABLE (pricing grid, methodology dimensions, the WhereWatchdogFits deep-dives) opt out and left-align their head + text to the table's left rail. */ .mk-section .mk-cta-row { justify-content: center; } .mk-section .mk-microcopy { text-align: center; max-width: var(--mk-measure); margin-left: auto; margin-right: auto; } .mk-section .mk-resolution { text-align: center; margin-left: auto; margin-right: auto; } .mk-section .mk-legend { justify-content: center; } .mk-section-head .mk-lede { max-width: var(--mk-measure); margin-left: auto; margin-right: auto; text-align: center; } .mk-hero .mk-cta-row, .mk-hero-copy .mk-cta-row { justify-content: flex-start; } /* hero stays left */ .mk-section:has(.mk-table-wrap) .mk-section-head, .mk-section.mk-left .mk-section-head { text-align: left; margin-left: 0; margin-right: 0; } .mk-section:has(.mk-table-wrap) .mk-cta-row, .mk-section.mk-left .mk-cta-row { justify-content: flex-start; } .mk-section:has(.mk-table-wrap) .mk-microcopy, .mk-section.mk-left .mk-microcopy { text-align: left; max-width: none; margin-left: 0; margin-right: 0; } .mk-section:has(.mk-table-wrap) .mk-section-head .mk-lede, .mk-section.mk-left .mk-section-head .mk-lede { text-align: left; margin-left: 0; margin-right: 0; } /* Two-up feature cards (e.g. Compliance + Enterprise side by side): left-aligned in each card, CTA pinned to the bottom so both cards' buttons line up regardless of copy length. Overrides the centered-section CTA rule above. */ .mk-feature { display: flex; flex-direction: column; gap: .5rem; } .mk-feature .mk-kicker { margin: 0; } .mk-feature h3 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); line-height: 1.18; letter-spacing: -0.01em; color: var(--heading); margin: .1rem 0 .2rem; } .mk-feature p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; margin: 0; flex: 1 1 auto; } .mk-feature p strong { color: var(--text); } .mk-feature .mk-cta-row { justify-content: flex-start; margin-top: 1.1rem; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .mk-footer { border-top: 1px solid var(--hairline); padding: var(--mk-section) 0 2.5rem; margin-top: var(--mk-section); } .mk-foot-cta a { color: var(--accent-ink); font-size: var(--fs-lg); } .mk-foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 1.75rem 0; } .mk-foot-cols nav { display: flex; flex-direction: column; gap: .5rem; } .mk-foot-cols a { color: var(--muted); font-size: var(--fs-sm); } .mk-foot-cols a:hover { color: var(--heading); text-decoration: none; } .mk-foot-h { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--heading); margin-bottom: .35rem; } .mk-foot-fine { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--hairline); padding-top: 1.25rem; } .mk-foot-fine .brand { font-size: 15px; } .mk-foot-copy { font-size: var(--fs-xs); color: var(--muted); margin: 0; } /* D-433 i18n: EN/DA language switcher in the footer fine-print row — quiet pill, the active locale highlighted. */ .mk-lang { display: inline-flex; align-items: center; gap: .25rem; } .mk-lang a { color: var(--muted); font-size: var(--fs-xs); padding: .3rem .6rem; border-radius: var(--r-full); line-height: 1; } .mk-lang a:hover { color: var(--heading); background: var(--surface-2); text-decoration: none; } .mk-lang a[aria-current="true"] { color: var(--heading); background: var(--surface-2); font-weight: 600; } @media (max-width: 700px) { .mk-foot-cols { grid-template-columns: 1fr; } } /* ── to-A+ review fixes: header chrome, mobile menu, wayfinding, scroll state ─ */ .mk-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent-strong); color: var(--on-accent); padding: 8px 14px; border-radius: var(--r-md); } .mk-skip:focus { left: 12px; top: 10px; } #mk-main { scroll-margin-top: 72px; } .mk-brand-header { font-size: 17px; align-items: center; } /* header brand = logo + name only; the byline lives in the footer */ .mk-nav a[aria-current="page"] { color: var(--heading); } .mk-nav a[aria-current="page"]::after { content: ""; display: block; height: 2px; background: var(--accent); border-radius: 2px; margin-top: 4px; } .mk-header.is-scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 1px 0 var(--hairline), 0 8px 20px -14px rgb(0 0 0 / .35); } .mk-cta { white-space: nowrap; } .mk-burger { display: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: transparent; color: var(--heading); cursor: pointer; } .mk-burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; } .mk-menu { border-bottom: 1px solid var(--hairline); background: var(--bg); } .mk-menu .mk-shell { display: flex; flex-direction: column; gap: .1rem; padding-top: .5rem; padding-bottom: 1.1rem; } .mk-menu a { color: var(--text); font-size: var(--fs-md); padding: .6rem 0; border-bottom: 1px solid var(--hairline); } .mk-menu a:hover { color: var(--heading); text-decoration: none; } .mk-menu a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; } .mk-menu-h { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; } .mk-menu-cta { margin-top: 1rem !important; border-bottom: 0 !important; text-align: center; } .mk-inline-link { color: var(--accent-ink); font-weight: 500; white-space: nowrap; } .mk-sample-note { font-size: var(--fs-xs); color: var(--muted); font-style: italic; margin: 0 0 1.25rem; } @media (max-width: 860px) { .mk-burger { display: inline-grid; } } @media (max-width: 620px) { .mk-header .mk-cta { display: none; } } /* ── Infographics (.mk-fig): flow diagrams, neutrality mirror, receipts ─────── */ .mk-fig { margin: 1.75rem 0 0; } .mk-fig svg { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; } .mk-fig figcaption { max-width: 64ch; margin: .85rem auto 0; text-align: center; color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; } /* nodes + connectors */ .mk-fig .ff-box { fill: var(--surface-2); stroke: var(--hairline); stroke-width: 1; } .mk-fig .ff-box-accent { fill: var(--surface-2); stroke: var(--accent); stroke-width: 1.5; } .mk-fig .ff-box-dim { fill: none; stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 4 4; } .mk-fig .ff-circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; } .mk-fig .ff-flow { stroke: var(--heading); stroke-width: 1.6; fill: none; } .mk-fig .ff-flow-dim { stroke: var(--muted); stroke-width: 1.4; fill: none; stroke-dasharray: 5 4; } .mk-fig .ff-head { fill: var(--heading); } .mk-fig .ff-head-dim { fill: var(--muted); } .mk-fig .ff-firewall { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2 5; opacity: .75; } /* text */ .mk-fig .ff-t { fill: var(--heading); font-family: var(--font-ui); font-size: 14px; font-weight: 600; } .mk-fig .ff-tm { fill: var(--muted); font-family: var(--font-ui); font-size: 12px; } .mk-fig .ff-sigma { fill: var(--accent-ink); font-family: var(--font-mono); font-size: 22px; font-weight: 600; } .mk-fig .ff-cai { fill: var(--accent-ink); font-family: var(--font-mono); font-size: 30px; font-weight: 600; } .mk-fig .ff-fire-t { fill: var(--accent-ink); font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* §05 receipts + the LLM contrast strip */ .mk-fig .ff-rcpt-h { fill: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; } .mk-fig .ff-rcpt-div { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 3; } .mk-fig .ff-rcpt-k { fill: var(--muted); font-family: var(--font-ui); font-size: 13px; } .mk-fig .ff-rcpt-v { fill: var(--heading); font-family: var(--font-mono); font-size: 14px; } .mk-fig .ff-rcpt-cai { fill: var(--accent-ink); font-family: var(--font-mono); font-size: 30px; font-weight: 600; } .mk-fig .ff-eq { fill: var(--accent); font-family: var(--font-mono); font-size: 30px; font-weight: 600; } .mk-fig .ff-llm { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; } .mk-fig .ff-llm-t { fill: var(--muted); font-family: var(--font-mono); font-size: 13px; } .mk-fig .ff-neq { fill: var(--band-poor); font-family: var(--font-ui); font-size: 13px; font-weight: 600; } /* §03 "0 pts" chip — barred from the score */ .mk-fig .ff-chip { fill: var(--bg); stroke: var(--band-critical); stroke-width: 1; } .mk-fig .ff-chip-t { fill: var(--band-critical); font-family: var(--font-ui); font-size: 11px; font-weight: 600; } /* ── Polish pass: close type step, anatomy lens track, hero caption ────────── */ .mk-close h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); } /* the final beat lands a step above the section heads */ /* the anatomy lenses carry longer names ("Production-Readiness") + a note ("Accessibility …"), so widen the name track and let it wrap instead of colliding with the bar. */ .mk-anatomy .hr-lens { grid-template-columns: minmax(150px, 190px) 1fr 34px; gap: 14px; } .mk-anatomy .hr-lens-name { white-space: normal; line-height: 1.25; } .mk-anatomy .mk-lens-note { display: block; margin-left: 0; margin-top: 1px; } .mk-hero-cap { max-width: 460px; margin: .85rem auto 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.5; } .mk-hero-cap strong { color: var(--text); font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════════ Shared components for the full marketing surface (segment / data / legal pages). One vocabulary reused across every Razor page; all token-driven → light/dark + responsive for free. Supersedes the legacy per-page .cat- / .seg- / .slop- CSS. ════════════════════════════════════════════════════════════════════════════ */ /* 4-col grid (phase strips) */ .mk-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } @media (max-width: 920px) { .mk-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .mk-cols-4 { grid-template-columns: 1fr; } } /* Audience switcher (segment pages) */ .mk-switch { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--hairline); border-radius: var(--r-full); background: var(--surface); margin-bottom: 1.5rem; flex-wrap: wrap; } .mk-switch a { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); padding: .35rem .9rem; border-radius: var(--r-full); } .mk-switch a:hover { color: var(--heading); text-decoration: none; } .mk-switch a[aria-current="page"] { background: var(--accent-strong); color: var(--on-accent); } /* Numbered steps (how-it-works) */ .mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: mk-step; } .mk-step { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.4rem 1.35rem; } .mk-step::before { counter-increment: mk-step; content: counter(mk-step); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm); margin-bottom: .75rem; } .mk-step h3 { font-size: var(--fs-lg); color: var(--heading); margin: 0 0 .35rem; } .mk-step p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin: 0; } @media (max-width: 760px) { .mk-steps { grid-template-columns: 1fr; } } /* Phase strip (icon + heading + copy) */ .mk-phase { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.3rem 1.25rem; } .mk-phase-ico { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: var(--r-md); background: var(--surface-2); color: var(--accent-ink); margin-bottom: .7rem; } .mk-phase-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; } .mk-phase-tag { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .mk-phase h3 { font-size: var(--fs-md); color: var(--heading); margin: .15rem 0 .3rem; } .mk-phase p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin: 0; } /* Filter chips (catalog categories / public-reports quality bar) */ .mk-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; } .mk-filter-btn { font-size: var(--fs-sm); font-weight: 500; padding: .4rem .9rem; border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--surface); color: var(--muted); cursor: pointer; } .mk-filter-btn:hover { color: var(--heading); border-color: var(--accent); } .mk-filter-btn[aria-pressed="true"], .mk-filter-btn.is-active { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); } /* Public-gallery tag filter (AND-combine) */ .mk-tagfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.5rem; } .mk-tagfilter-lbl { font-size: var(--fs-sm); color: var(--muted); margin-right: .25rem; } .mk-tag-btn { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 500; padding: .35rem .8rem; border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--surface); color: var(--text); cursor: pointer; } .mk-tag-btn:hover { color: var(--heading); border-color: var(--accent); } .mk-tag-btn[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); } .mk-tag-count { font-size: var(--fs-2xs); opacity: .65; } .mk-tag-clear { font-size: var(--fs-sm); color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline; } .mk-tag-clear:hover { color: var(--heading); } /* Coverage bar (Tool / Assisted / Human) */ .mk-cov { display: flex; height: 8px; border-radius: var(--r-full); overflow: hidden; background: var(--surface-2); margin: .65rem 0 .55rem; } .mk-cov i { display: block; height: 100%; } .mk-cov .cov-tool { background: var(--band-exemplary); } .mk-cov .cov-assist { background: var(--band-fair); } .mk-cov .cov-human { background: var(--muted); } .mk-cov-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: var(--fs-2xs); color: var(--muted); } .mk-cov-legend span { display: inline-flex; align-items: center; gap: .35rem; } .mk-cov-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } /* Small pills / badges */ .mk-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; padding: 2px 9px; border-radius: var(--r-full); border: 1px solid var(--hairline); color: var(--muted); } .mk-pill-preview { text-transform: uppercase; color: var(--band-fair-text); border-color: var(--band-fair); } .mk-pill-reg { color: var(--accent-ink); border-color: var(--accent); } /* Framework / category cards (compliance + catalog) */ .mk-fwk { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .15rem; } .mk-fwk:hover { border-color: var(--accent); } .mk-fwk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .mk-fwk h3 { font-size: var(--fs-lg); color: var(--heading); margin: 0; } .mk-fwk-desc { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin: .3rem 0 .55rem; flex: 1; } .mk-fwk-refs { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); } /* Pricing tiers */ .mk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem; align-items: stretch; } .mk-plan { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; } .mk-plan.is-featured { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .mk-plan-name { font-size: var(--fs-md); font-weight: 600; color: var(--heading); } .mk-plan-who { font-size: var(--fs-xs); color: var(--muted); margin: .15rem 0 .9rem; min-height: 2.4em; } .mk-plan-price { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 600; color: var(--heading); letter-spacing: -.02em; } .mk-plan-price small { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; } .mk-plan-feats { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: .5rem; } .mk-plan-feats li { font-size: var(--fs-sm); color: var(--text); padding-left: 1.4rem; position: relative; line-height: 1.45; } .mk-plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--band-exemplary-text); font-weight: 700; } .mk-plan .btn { margin-top: auto; } /* Comparison / data table */ .mk-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-lg); } .mk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .mk-table thead th { text-align: left; padding: .8rem 1rem; color: var(--muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--hairline); background: var(--surface-2); } .mk-table td, .mk-table th { padding: .7rem 1rem; border-bottom: 1px solid var(--hairline); vertical-align: top; } .mk-table tbody tr:last-child td { border-bottom: 0; } .mk-table tbody tr:hover { background: var(--surface); } .mk-table code { font-family: var(--font-mono); font-size: .92em; background: var(--surface-2); padding: 1px 6px; border-radius: var(--r-sm); color: var(--text); } .mk-table .num { font-variant-numeric: tabular-nums; text-align: right; } /* Document mock-up (RFP clause / attestation) */ .mk-docmock { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 1.5rem 1.6rem; background: var(--surface); max-width: 46rem; } .mk-docmock-tag { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .mk-docmock h4 { font-size: var(--fs-lg); color: var(--heading); margin: .4rem 0 .8rem; } .mk-docmock ul, .mk-docmock ol { margin: 0; padding-left: 1.2rem; color: var(--text); font-size: var(--fs-sm); line-height: 1.7; } /* Inline note / disclaimer */ .mk-note { border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: .9rem 1.1rem; font-size: var(--fs-sm); color: var(--text); line-height: 1.55; background: var(--surface); } .mk-note.mk-note-warn { border-left-color: var(--band-fair); } .mk-note strong { color: var(--heading); } /* Long-form doc / legal prose */ .mk-doc { max-width: 50rem; } .mk-doc-lead { font-size: var(--fs-lg); color: var(--muted); line-height: 1.6; margin: 0 0 2rem; } .mk-doc h2 { font-size: var(--fs-xl); color: var(--heading); letter-spacing: -.01em; margin: 2.4rem 0 .8rem; scroll-margin-top: 80px; } .mk-doc h3 { font-size: var(--fs-lg); color: var(--heading); margin: 1.6rem 0 .5rem; } .mk-doc p, .mk-doc li { color: var(--text); font-size: var(--fs-md); line-height: 1.7; } .mk-doc p { margin: 0 0 1rem; } .mk-doc ul, .mk-doc ol { margin: 0 0 1.2rem; padding-left: 1.3rem; display: grid; gap: .4rem; } .mk-doc a { color: var(--accent-ink); } .mk-doc strong { color: var(--heading); } .mk-doc code { font-family: var(--font-mono); font-size: .92em; background: var(--surface-2); padding: 1px 6px; border-radius: var(--r-sm); } .mk-doc-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); } /* In-page table of contents (long docs) */ .mk-toc { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.1rem 1.3rem; margin-bottom: 2rem; background: var(--surface); } .mk-toc-h { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; } .mk-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; font-size: var(--fs-sm); } .mk-toc a { color: var(--text); } .mk-toc a:hover { color: var(--accent-ink); } @media (max-width: 560px) { .mk-toc ol { columns: 1; } } /* Hero emphasis span (data-page heroes) */ .mk-hero-em { color: var(--accent-ink); } /* ── Framework card: icon + identity + legend dots ─────────────────────────── */ .mk-fwk-top { display: flex; align-items: flex-start; gap: .85rem; justify-content: flex-start; } .mk-fwk-icon { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: var(--r-md); background: var(--surface-2); color: var(--accent-ink); } .mk-fwk-icon svg { width: 22px; height: 22px; } .mk-fwk-id { min-width: 0; } .mk-fwk-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; } .mk-fwk-cov { margin: .85rem 0 .15rem; } .mk-fwk-refs { margin-top: .5rem; } .mk-cov-legend .cov-tool { background: var(--band-exemplary); } .mk-cov-legend .cov-assist { background: var(--band-fair); } .mk-cov-legend .cov-human { background: var(--muted); } /* "Ten frameworks at a glance" chip strip (compliance → links to catalog) */ .mk-fwk-glance { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; } .mk-fwk-chip { display: inline-flex; align-items: center; justify-content: flex-start; gap: .5rem; padding: .5rem .9rem; border: 1px solid var(--hairline); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; color: var(--text); background: var(--surface); } .mk-fwk-chip:hover { border-color: var(--accent); color: var(--heading); text-decoration: none; } .mk-fwk-chip svg { width: 16px; height: 16px; color: var(--accent-ink); flex: none; } .mk-fwk-chip .mk-pill-preview { padding: 0 6px; margin-left: auto; } @media (max-width: 820px) { .mk-fwk-glance { grid-template-columns: 1fr; } } /* ── Pricing: cohort packages + size buckets ───────────────────────────────── */ .mk-plans { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .mk-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.5rem 1.75rem; background: var(--surface); } .mk-cta-band .mk-cta-band-body { max-width: 48rem; } .mk-cta-band .mk-foot-h { color: var(--heading); } .mk-cta-band p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin: .3rem 0 0; } .mk-cta-band .btn { flex: none; } /* Pricing: featured flag + row-header cells */ .mk-plan { position: relative; } .mk-plan-flag { position: absolute; top: -11px; left: 1.4rem; background: var(--accent-strong); color: var(--on-accent); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-full); } .mk-table tbody th { text-align: left; font-weight: 500; color: var(--text); } /* ── Header mega-menus (desktop): two card dropdowns + flat Pricing ─────────── */ .mk-nav { gap: .15rem; align-items: center; } .mk-navlink { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; padding: .5rem .7rem; border-radius: var(--r-md); background: none; border: 0; cursor: pointer; font-family: inherit; line-height: 1; } .mk-navlink:hover { color: var(--heading); text-decoration: none; } .mk-navlink.is-cur, .mk-navlink[aria-current="page"] { color: var(--heading); } .mk-chev { width: 13px; height: 13px; opacity: .8; transition: transform .15s ease; } .mk-hasmenu { position: relative; display: inline-flex; } .mk-hasmenu.is-open .mk-chev, .mk-hasmenu:hover .mk-chev { transform: rotate(180deg); } .mk-menu-panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 480px; padding: .5rem; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay, 0 16px 40px -16px rgb(0 0 0 / .4)); opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 60; } .mk-menu-panel::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } /* hover bridge over the gap */ .mk-hasmenu:hover > .mk-menu-panel, .mk-hasmenu:focus-within > .mk-menu-panel, .mk-hasmenu.is-open > .mk-menu-panel { opacity: 1; visibility: visible; transform: none; } .mk-menu-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; } .mk-menu-card { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .75rem; border-radius: var(--r-md); color: var(--text); } .mk-menu-card:hover { background: var(--surface-2); text-decoration: none; } .mk-menu-card[aria-current="page"] { background: var(--surface-2); } .mk-menu-card[aria-current="page"]::after { content: none; } /* cancel the flat-nav underline on cards */ .mk-menu-card-ico { width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); color: var(--accent-ink); } .mk-menu-card:hover .mk-menu-card-ico { background: var(--bg); } .mk-menu-card-ico svg { width: 17px; height: 17px; } .mk-menu-card-tx strong { display: block; color: var(--heading); font-size: var(--fs-sm); font-weight: 600; } .mk-menu-card-tx span { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; margin-top: 1px; } /* footer theme toggle (moved out of the header bar — a low-frequency preference) */ .mk-foot-theme { width: auto; height: auto; margin-left: auto; gap: .4rem; padding: .4rem .75rem; border-radius: var(--r-full); font-size: var(--fs-xs); color: var(--muted); } .mk-foot-theme:hover { color: var(--heading); background: var(--surface-2); } .mk-foot-theme .mk-ico { width: 15px; height: 15px; } .mk-foot-theme-tx { font-weight: 500; } /* ── Pricing: cohort cards + size grid ─────────────────────────────────────── */ .mk-cohort .mk-fwk-icon { margin-bottom: .85rem; } .mk-from { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; } .mk-plan-price small { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; } .mk-cohort-addon { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 1.1rem; } .mk-cohort-addon::before { content: "+ "; color: var(--accent-ink); font-weight: 700; } .mk-size-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; } .mk-table th[scope="col"] { white-space: nowrap; } /* segment-page "from" price chip */ .mk-price { display: inline-flex; align-items: baseline; gap: .4rem; margin: 0 0 1rem; font-size: var(--fs-sm); color: var(--muted); } .mk-price strong { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--heading); font-weight: 600; } /* C4 wheel — the live architecture-map carousel (the c4-stage itself is styled in app.css). */ .c4-wheel-bar { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; } /* meta flexes to fill the middle and centres itself, so the repo-name length can't shift the Prev/Next buttons. */ .c4-wheel-meta { flex: 1 1 auto; min-width: 0; display: inline-flex; justify-content: center; align-items: baseline; gap: .5rem; } .c4-wheel-label { font-family: var(--font-mono); color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c4-wheel-stage { min-height: 320px; border: 1px solid var(--border); border-radius: var(--r-md); padding: .75rem; background: var(--surface); overflow: auto; } .c4-wheel-stage[aria-busy="true"] { opacity: .6; } /* Findings wheel — the live carousel of real architecture/DDD/event findings from published reports. Reuses the c4-wheel-bar chrome; the slide is a stack of mono finding rows + a "read the full report" action. */ .find-wheel-stage { border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; background: var(--surface); } .find-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .find-row { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .75rem; padding: .65rem .75rem; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg); } .find-lens { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); } .find-body { min-width: 0; } .find-title { margin: 0 0 .2rem; font-size: var(--fs-sm); color: var(--text); line-height: 1.45; } .find-loc { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); word-break: break-all; } .find-dim { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); padding-top: .15rem; } .find-more { margin: .85rem 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; } .find-more strong { color: var(--heading); font-weight: 600; } .find-actions { margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; } @media (max-width: 640px) { .find-row { grid-template-columns: 1fr; gap: .4rem; } .find-dim { display: none; } } /* Boundary block — two equal hairline card rows (the trust-strip pattern): "not" with a red Ø, "is" with a green ✓, so both carry equal weight. Tightened to nestle under the hero. */ .mk-hero:has(+ .mk-boundary) { padding-bottom: 1.5rem; } .mk-boundary { padding-top: 0; padding-bottom: 0; } .mk-boundary + .mk-section.mk-plain { padding-top: 1.5rem; } .mk-boundary-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; } .mk-boundary-row + .mk-boundary-row { margin-top: .85rem; } .mk-boundary-row li { background: var(--bg); padding: .9rem 1.1rem; display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; } .mk-boundary-row li > div { display: grid; gap: .15rem; min-width: 0; } .mk-boundary-row strong { color: var(--heading); font-size: var(--fs-sm); font-weight: 600; } .mk-boundary-row span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; } .bnd-ico { width: 17px; height: 17px; margin-top: .1rem; flex: none; } .bnd-no { color: var(--band-critical); } .bnd-yes { color: var(--band-healthy); } @media (max-width: 820px) { .mk-boundary-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .mk-boundary-row { grid-template-columns: 1fr; } } /* ── Contact form ──────────────────────────────────────────────────────────── */ .mk-contact-grid { grid-template-columns: 1.4fr 1fr; align-items: start; gap: 2rem; } .mk-contact-aside { display: grid; gap: 1rem; } .mk-form { display: grid; gap: 1.1rem; max-width: 40rem; } .mk-field { display: grid; gap: .35rem; } .mk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .mk-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--heading); } .mk-field-opt { font-weight: 400; color: var(--muted); } .mk-input { width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: .6rem .75rem; box-sizing: border-box; } .mk-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } textarea.mk-input { resize: vertical; min-height: 7rem; line-height: 1.5; } .mk-field-err { font-size: var(--fs-xs); color: var(--band-critical); } .mk-form-summary { color: var(--band-critical); font-size: var(--fs-sm); } .mk-form-summary ul { margin: 0; padding-left: 1.1rem; } .mk-form-summary:empty { display: none; } /* honeypot — kept in the DOM (bots fill it) but out of sight and off the tab order for people */ .mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 820px) { .mk-contact-grid, .mk-field-row { grid-template-columns: 1fr; } } /* ── Trust strip (EU residency / self-hosted AI / never-persisted / read-only) ── */ .mk-trust .mk-trust-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; } .mk-trust-row li { background: var(--bg); padding: 1.1rem 1.25rem; display: grid; gap: .3rem; } .mk-trust-row strong { color: var(--heading); font-size: var(--fs-sm); font-weight: 600; } .mk-trust-row span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; } @media (max-width: 820px) { .mk-trust .mk-trust-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .mk-trust .mk-trust-row { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════════════ Mobile hardening (phones + tablets). Desktop (>900px) is untouched: every rule below lives in a max-width media query, so it only ever ADDS overrides at small widths. Breakpoint vocabulary (kept consistent with the per-component rules already in this file): 900px — tablet/large-phone: hero + galleries drop to one column 820px — the workhorse phone/tablet break: 2/3-col grids, trust strip, framework glance, contact grid, field rows collapse 620px — header: the inline CTA button hides (the burger menu carries it) 560px — small phones: the rot infographic hides (3 risk cards carry it), long-doc TOC drops to one column 520px — smallest phones: 4-col grids + trust strip → one column ════════════════════════════════════════════════════════════════════════════ */ /* Belt-and-braces overflow guard: nothing on the marketing surface may push the page wider than the viewport. A stray wide child (an over-long unbroken token, a future fixed-width element) scrolls *itself*, never the whole page. Scoped to ≤900px so the desktop scroll container / sticky header are provably untouched. */ @media (max-width: 900px) { .mk { overflow-x: hidden; } } /* ── Wide data tables ─────────────────────────────────────────────────────── The wraps already scroll (.mk-table-wrap{overflow-x:auto}), but with no floor the columns crush to unreadable slivers on a phone before the scrollbar ever appears. Give the multi-column grids a sensible min-width on small screens so the wrap scrolls horizontally instead — the content stays legible and the scroll stays *inside* the card, never widening the page. Desktop is wider than these floors, so the min-width is inert above the breakpoint. */ @media (max-width: 760px) { .mk-table-wrap { -webkit-overflow-scrolling: touch; } /* Pricing volume grid (Package + S–XXL buckets) is the widest — most columns. */ .mk-table { min-width: 640px; } } /* ── Hero: comfortable phone rhythm ───────────────────────────────────────── The grid already collapses at 900px (base rule above). On phones the proof card is full-bleed within the shell and the CTA row may carry two buttons — let them go full-width so they're easy 44px+ tap targets and never overflow. */ @media (max-width: 560px) { .mk-hero h1 { max-width: none; } /* 16ch is too tight once single-column */ .mk-cta-row .btn { flex: 1 1 auto; justify-content: center; } .mk-cta-row .btn-lg { width: 100%; } } /* ── Header: keep the bar from crowding on small phones ───────────────────── Below 620px the inline CTA already hides (rule above). Tighten the nav gap so the brand + burger + theme toggle never collide, and grow the burger to a full 44px tap target on touch. */ @media (max-width: 620px) { .mk-header-inner { gap: .75rem; } .mk-header-actions { gap: .5rem; } .mk-burger { width: 42px; height: 42px; } } /* ── Mega-menu panels: never wider than the phone ─────────────────────────── Desktop panels are min-width:480px absolutely-positioned dropdowns. They're hidden under the burger at ≤860px, but guard anyway so a hover/focus state can never paint a 480px panel off the right edge on a narrow tablet. */ @media (max-width: 860px) { .mk-menu-panel { min-width: 0; left: auto; right: 0; max-width: calc(100vw - 2rem); } .mk-menu-cards { grid-template-columns: 1fr; } } /* ── Mobile disclosure menu: roomy tap targets ────────────────────────────── The #mk-menu links read a touch short by default; bump them to ~44px. */ @media (max-width: 860px) { .mk-menu a { padding: .7rem 0; } .mk-menu-cta { padding: .7rem 0 !important; } } /* ── Footer: stack the brand / copy / theme on phones ─────────────────────── .mk-foot-cols already collapses at 700px. The fine-print row is a wrapping flex; on small phones let it stack so the copyright doesn't get squeezed beside the brand lockup, and push the theme toggle back to the left. */ @media (max-width: 560px) { .mk-foot-fine { align-items: flex-start; gap: .85rem; } .mk-foot-theme { margin-left: 0; } } /* ── Pricing tiers / generic auto-fit grids on the smallest phones ────────── .mk-plans uses auto-fit minmax(220px,1fr): at ≤320px a single 220px column plus the shell padding can just exceed the viewport. Drop the floor so a tier card fills the width cleanly. (auto-fit already gives one column here; this only relaxes the rigid 220px min so the card can shrink below it.) */ @media (max-width: 480px) { .mk-plans { grid-template-columns: 1fr; } } /* (.mk-statband keeps its auto-fit minmax(150px) — a 2-up of stats at 360–480px is comfortable and collapses to 1 on its own below ~310px; no override needed.) */ /* ── Root-cause overflow fixes (found by measuring, not eyeballing) ────────── These are base rules: they fix genuine horizontal-overflow bugs and are correct at every width (they also tighten the desktop gallery, which the fixed-content cards were nudging past the shell). */ /* Survey cards were flooring their grid track at ~390px: .wd-card (app.css) sizes to its content, and a grid item's default min-width:auto refuses to shrink below that content's intrinsic width (the uPlot spark + CAI ladder). The hero card was overridden to width:100%; the gallery cards weren't — so on any phone the 390px card overran the viewport (and the page-wide scroll that caused is what cropped the header logo and pushed the menu off-screen). Make every marketing-surface card shrinkable, and let gallery cards fill their track. */ .mk .wd-card { min-width: 0; max-width: 100%; } .mk-gallery > .wd-card { width: 100%; } .mk .wd-card .hd-spark, .mk .wd-card .uplot { max-width: 100%; } /* Hero columns must shrink below their content's intrinsic width, so a wide child (a sample table, a 48ch lede) can't floor the single-column mobile track and force a horizontal scroll. */ .mk-hero-copy, .mk-hero-proof { min-width: 0; } /* The ≤760 data-table min-width floor (for the genuinely wide Pricing / Methodology / Agents / Security grids) must NOT apply to the small sample tables inside a hero or a doc-mock — there it blows out the hero grid. Higher specificity (0,2,0) beats the .mk-table floor (0,1,0) at all widths. */ .mk-hero-proof .mk-table, .mk-docmock .mk-table { min-width: 0; } /* ── C5-v2 insight gallery (.ig): real card + cohort widget panel, switching together ─────────────────────────────── */ .ig-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.5rem; align-items: start; margin-top: 1rem; } @media (max-width: 56rem) { .ig-grid { grid-template-columns: 1fr; } } .ig-card { min-width: 0; } .ig-panel { display: grid; gap: 1.25rem; min-width: 0; } .ig-widget { border: 1px solid var(--hairline); border-radius: 12px; padding: 1rem 1.1rem; background: var(--surface-2); } .ig-w-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; margin-bottom: .65rem; } .ig-w-head strong { color: var(--heading); font-size: var(--fs-sm); } .ig-w-why { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; } /* file-quality mix */ .ig-fq-strip { display: flex; align-items: flex-end; gap: 1px; height: 64px; } .ig-fq-bar { display: flex; flex-direction: column; justify-content: flex-end; width: 7px; height: 100%; border-radius: 1px; overflow: hidden; } .ig-fq-seg { display: block; width: 100%; } .ig-fq-b { background: var(--band-healthy); } .ig-fq-f { background: color-mix(in srgb, var(--muted) 35%, transparent); } .ig-fq-s { background: var(--band-poor); } .ig-fq-key { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .6rem; color: var(--muted); font-size: var(--fs-xs); } .ig-fq-key i.ig-sw { display: inline-block; width: .7em; height: .7em; border-radius: 2px; margin-right: .35em; vertical-align: baseline; } /* diagnosis */ .ig-diag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; } .ig-diag-item { display: flex; gap: .7rem; } .ig-diag-sev { flex: none; align-self: flex-start; font-size: var(--fs-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--hairline); color: var(--heading); } .ig-sev-critical, .ig-sev-high { color: var(--band-poor); border-color: var(--band-poor); } .ig-diag-body { min-width: 0; } .ig-diag-title { margin: 0; font-weight: 600; color: var(--heading); font-size: var(--fs-sm); } .ig-diag-thesis { margin: .2rem 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; } .ig-diag-rec { margin: .3rem 0 0; color: var(--heading); font-size: var(--fs-xs); } /* findings */ .ig-find-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .ig-find-item { display: flex; gap: .7rem; } .ig-find-lens { flex: none; align-self: flex-start; font-size: var(--fs-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); white-space: nowrap; } .ig-find-body { min-width: 0; } .ig-find-title { margin: 0; color: var(--heading); font-size: var(--fs-sm); } .ig-find-loc { margin: .15rem 0 0; color: var(--muted); font-size: var(--fs-xs); font-family: var(--mono, monospace); word-break: break-all; } .ig-find-more { margin: .6rem 0 0; color: var(--muted); font-size: var(--fs-xs); font-style: italic; } /* C4 map */ .ig-c4 { overflow: auto; border-radius: 8px; } .ig-c4 svg { max-width: 100%; height: auto; display: block; } /* conformance */ .ig-conf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .ig-conf-item { display: grid; gap: .2rem; } .ig-conf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; } .ig-conf-fw { color: var(--heading); font-weight: 600; font-size: var(--fs-sm); } .ig-conf-status { font-size: var(--fs-xs); font-weight: 600; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); } .ig-conf-signed { color: var(--band-healthy); border-color: var(--band-healthy); } .ig-conf-tally { margin: 0; color: var(--muted); font-size: var(--fs-xs); } /* artifacts explainer */ .ig-art-note { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; } /* ── The ten lenses grid (home) — cai-owned dimensions, deep-linked per lens ──────────────────────────────────────── */ .lens-group-label { margin: 1.4rem 0 .6rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .lens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; } .lens-card { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); text-decoration: none; transition: border-color .15s, transform .15s; } .lens-card:hover { border-color: var(--accent); transform: translateY(-1px); } .lens-card-name { font-weight: 600; color: var(--heading); font-size: var(--fs-sm); } .lens-card-desc { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; } .lens-card-more { margin-top: .15rem; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; } /* Shared pillar/body list — token-driven (replaces per-page inline-styled