/* =============================================================
Monitrova marketing site — layout + components
Design tokens are inlined below (source: /css/tokens.css)
to avoid the @import waterfall on first paint.
============================================================= */
/* ─── Design tokens (inlined from tokens.css) ────────────── */
:root {
color-scheme: dark;
--bs-body-bg: #09090f;
--app-nav-bg: #06060b;
--app-surface: #0f1017;
--app-surface-2: #13141c;
--app-surface-3: #1a1b26;
--app-surface-4: #232432;
--bs-body-color: #f8fafc;
--app-muted: #94a3b8; /* 7.74:1 on bg — AA */
--app-muted-2: #8593a8; /* 6.37:1 on bg — AA */
--app-muted-3: #7a8699; /* 5.39:1 on bg — AA */
--app-brand-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
--app-brand: #3b82f6;
--app-brand-hover: #60a5fa;
--app-brand-press: #2563eb;
--app-brand-soft: rgba(59, 130, 246, 0.12);
--app-brand-ring: rgba(59, 130, 246, 0.45);
--app-success: #22c55e;
--app-success-soft: rgba(34, 197, 94, 0.12);
--app-warning: #f59e0b;
--app-warning-soft: rgba(245, 158, 11, 0.14);
--app-danger: #f43f5e;
--app-danger-soft: rgba(244, 63, 94, 0.14);
--app-info: #38bdf8;
--app-info-soft: rgba(56, 189, 248, 0.14);
--app-border: rgba(255, 255, 255, 0.08);
--app-border-strong: rgba(255, 255, 255, 0.14);
--app-border-brand: rgba(59, 130, 246, 0.45);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--app-shadow-sm:
0 1px 0 rgba(255,255,255,0.02) inset,
0 1px 3px rgba(0,0,0,0.6);
--app-shadow:
0 1px 0 rgba(255,255,255,0.025) inset,
0 10px 30px rgba(0,0,0,0.65),
0 4px 10px rgba(0,0,0,0.5);
--app-shadow-lg:
0 1px 1px rgba(255,255,255,0.05) inset,
0 25px 50px -12px rgba(0, 0, 0, 0.8);
--app-ring:
0 0 0 1px var(--app-border-strong),
0 0 0 3px var(--app-brand-ring);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--font-sans: "DM Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular,
"SF Mono", Menlo, Consolas, monospace;
--fs-display: clamp(2.75rem, 5vw + 1rem, 4.5rem);
--fs-h1: clamp(2.25rem, 3vw + 1rem, 3rem);
--fs-h2: clamp(1.75rem, 2vw + 0.75rem, 2.25rem);
--fs-h3: 1.5rem;
--fs-h4: 1.25rem;
--fs-h5: 1.0625rem;
--fs-body: 0.9375rem;
--fs-small: 0.8125rem;
--fs-mono: 0.875rem;
--fs-eyebrow: 0.75rem;
--lh-tight: 1.15;
--lh-snug: 1.35;
--lh-body: 1.7;
--lh-mono: 1.55;
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-eyebrow: 0.12em;
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 120ms;
--dur-base: 180ms;
--dur-slow: 320ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bs-body-bg);
color: var(--bs-body-color);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: var(--tracking-tight);
line-height: var(--lh-tight);
color: var(--bs-body-color);
margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--fs-h5); letter-spacing: var(--tracking-snug); font-weight: 600; }
.display {
font-size: var(--fs-display);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
}
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
}
p { margin: 0 0 1em; color: var(--bs-body-color); }
.muted { color: var(--app-muted); }
.muted-2 { color: var(--app-muted-2); }
.muted-3 { color: var(--app-muted-3); }
a {
color: var(--app-brand);
text-decoration: none;
text-underline-offset: 3px;
transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--app-brand-hover); text-decoration: underline; }
/* Links inside prose (paragraphs) must not rely on color alone — WCAG 1.4.1.
Buttons, nav, footer columns, and cards keep their underline-free look. */
p a {
text-decoration: underline;
text-decoration-thickness: 1px;
}
a:focus-visible {
outline: 2px solid var(--app-brand-ring);
outline-offset: 2px;
border-radius: 2px;
}
code, kbd, samp, pre, .mono {
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: var(--lh-mono);
}
code {
background: var(--app-surface-2);
border: 1px solid var(--app-border);
padding: 0.1em 0.4em;
border-radius: var(--radius-sm);
color: var(--bs-body-color);
}
pre {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
overflow-x: auto;
color: var(--bs-body-color);
box-shadow: var(--app-shadow-sm);
margin: 0 0 var(--space-5);
}
pre code {
background: transparent;
border: 0;
padding: 0;
}
hr {
border: 0;
border-top: 1px solid var(--app-border);
margin: var(--space-7) 0;
}
::selection { background: var(--app-brand-soft); color: var(--bs-body-color); }
/* ─── Site layout ────────────────────────────────────────── */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 80px; }
/* ─── Layout primitives ───────────────────────────────────── */
.container {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 0 var(--space-5);
}
.container-tight { max-width: 760px; }
.section { padding: var(--space-9) 0; position: relative; }
.section-sm { padding: var(--space-7) 0; }
.section-divider { border-top: 1px solid var(--app-border); }
.section-header {
max-width: 720px;
margin: 0 auto var(--space-8);
text-align: center;
}
.section-header.left { margin-left: 0; text-align: left; }
.section-header h2 { margin: var(--space-3) 0 var(--space-3); }
.section-header p {
color: var(--app-muted);
font-size: 1.0625rem;
line-height: 1.7;
margin: 0;
}
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.625em 1.1em;
font-family: inherit;
font-size: var(--fs-body);
font-weight: 500;
line-height: 1.2;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
text-decoration: none;
white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--app-ring); }
.btn-primary {
background: var(--app-brand-gradient);
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}
.btn-primary:hover {
filter: brightness(1.1);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
.btn-primary:active { background: var(--app-brand-press); transform: translateY(0.5px); }
.btn-ghost {
background: transparent;
color: var(--bs-body-color);
border-color: var(--app-border-strong);
}
.btn-ghost:hover {
background: var(--app-surface-2);
border-color: var(--app-border-strong);
color: var(--bs-body-color);
text-decoration: none;
}
.btn-link {
background: transparent;
color: var(--app-brand);
padding: 0.4em 0;
border: 0;
}
.btn-link:hover { color: var(--app-brand-hover); background: transparent; }
.btn-lg { padding: 0.85em 1.5em; font-size: 1rem; }
/* ─── Top nav ─────────────────────────────────────────────── */
.site-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(9, 9, 15, 0.85);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid var(--app-border-strong);
}
.site-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
position: relative;
}
.site-brand {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--bs-body-color);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.site-brand {
gap: 12px;
}
.site-brand:hover { color: var(--bs-body-color); text-decoration: none; }
.site-brand .brand-icon {
display: block;
height: 48px;
width: 48px;
flex-shrink: 0;
user-select: none;
}
.site-brand .brand-word {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1;
color: var(--bs-body-color);
}
.site-brand .brand-word-accent { color: #05A0F7; }
/* Footer brand a touch larger for visual weight in the wider footer column. */
.site-footer-brand .site-brand .brand-icon { height: 56px; width: 56px; }
.site-footer-brand .site-brand .brand-word { font-size: 1.75rem; }
/* Bump nav height to accommodate the larger logo without crowding. */
.site-nav-inner { height: 80px; }
@media (max-width: 720px) {
.site-nav-inner { height: 64px; }
.site-brand .brand-icon { height: 38px; width: 38px; }
.site-brand .brand-word { font-size: 1.25rem; }
.site-nav-links { top: 64px; }
}
.site-nav-links {
display: flex;
align-items: center;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.site-nav-links a {
color: var(--app-muted);
font-size: var(--fs-body);
text-decoration: none;
padding: 0.4em 0.75em;
border-radius: var(--radius-sm);
transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.site-nav-links a:hover {
color: var(--bs-body-color);
background: var(--app-surface-2);
text-decoration: none;
}
.site-nav-links a.active { color: var(--bs-body-color); }
/* Override the nav-link color for the CTA button so white-on-brand
contrast is preserved (specificity beats .site-nav-links a). */
.site-nav-links a.btn-primary,
.site-nav-links a.btn-primary:hover,
.site-nav-links a.btn-primary:focus {
color: #fff;
background: var(--app-brand);
border-color: var(--app-brand);
padding: 0.5em 1em;
font-weight: 600;
}
.site-nav-links a.btn-primary:hover {
background: var(--app-brand-hover);
border-color: var(--app-brand-hover);
}
.site-nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-sm);
color: var(--bs-body-color);
width: 38px;
height: 36px;
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
}
.site-nav-toggle svg { display: block; }
@media (max-width: 720px) {
.site-nav-toggle { display: inline-flex; }
.site-nav-links {
position: absolute;
top: 60px;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
background: var(--app-nav-bg);
border-bottom: 1px solid var(--app-border);
padding: var(--space-3);
gap: var(--space-1);
display: none;
}
.site-nav-links.is-open { display: flex; }
.site-nav-links a { padding: 0.7em 0.9em; }
.site-nav-links .btn { justify-content: center; }
}
/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
border-top: 1px solid var(--app-border);
padding: var(--space-8) 0 var(--space-7);
background: var(--app-nav-bg);
margin-top: var(--space-9);
}
.site-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--space-7);
margin-bottom: var(--space-7);
}
.site-footer-brand p {
color: var(--app-muted);
margin-top: var(--space-3);
max-width: 280px;
font-size: var(--fs-small);
}
.site-footer .footer-col-label {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
margin: 0 0 var(--space-3);
}
.site-footer ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.site-footer ul a {
color: var(--app-muted);
font-size: var(--fs-small);
text-decoration: none;
}
.site-footer ul a:hover { color: var(--bs-body-color); text-decoration: none; }
.site-footer ul a[aria-current="page"] { color: var(--bs-body-color); }
.site-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
padding-top: var(--space-5);
border-top: 1px solid var(--app-border);
color: var(--app-muted-3);
font-size: var(--fs-small);
}
@media (max-width: 720px) {
.site-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.site-footer-brand { grid-column: span 2; }
}
/* ─── Hero ────────────────────────────────────────────────── */
.hero { position: relative; padding: var(--space-9) 0 var(--space-8); overflow: hidden; }
.hero::before {
content: "";
position: absolute;
inset: -10% -10% auto -10%;
height: 70%;
background: radial-gradient(60% 80% at 50% 0%,
rgba(59, 130, 246, 0.10) 0%,
rgba(59, 130, 246, 0) 60%);
pointer-events: none;
z-index: 0;
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--space-8);
align-items: center;
}
@media (max-width: 980px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-mockup { order: 2; }
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
margin-bottom: var(--space-4);
}
.hero-eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--app-success);
box-shadow: 0 0 0 4px var(--app-success-soft);
animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.hero h1 {
font-size: var(--fs-display);
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0 0 var(--space-5);
}
.hero h1 em {
font-style: normal;
background: linear-gradient(180deg, #e2e8f0 30%, var(--app-brand) 130%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
font-size: 1.125rem;
line-height: 1.6;
color: var(--app-muted);
margin: 0 0 var(--space-6);
max-width: 560px;
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
/* The "Pricing from €X/mo ↓" anchor under the hero buttons. Sits on its
own line by design — putting it inside .hero-actions caused it to
appear to wrap accidentally next to the two main CTAs at certain
viewport widths. Now it's an intentional tertiary action with its
own small-text styling that signals "scroll to pricing". */
.hero-pricing-link {
margin: var(--space-3) 0 var(--space-5);
font-family: var(--font-mono);
font-size: var(--fs-small);
letter-spacing: 0.02em;
}
.hero-pricing-link a {
color: var(--app-brand);
text-decoration: none;
}
.hero-pricing-link a:hover {
color: var(--app-brand-hover);
text-decoration: underline;
}
/* ============================================================
Smart-classification comparison — compact two-row callout
replacing the previous two side-by-side cards. Each row pairs
a label ("Standard monitors:" / "Monitrova:") with the result.
============================================================ */
.classify-compare {
max-width: 820px;
margin: 0 auto;
background: var(--app-surface-2);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.classify-row {
display: grid;
grid-template-columns: 200px 1fr;
align-items: start;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
}
.classify-row-them {
border-bottom: 1px solid var(--app-border);
}
.classify-row-us {
background: linear-gradient(
90deg,
rgba(244, 63, 94, 0.06) 0%,
rgba(244, 63, 94, 0.02) 100%);
}
.classify-label {
font-family: var(--font-mono);
font-size: var(--fs-small);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
}
.classify-row-them .classify-label { color: var(--app-muted-2); }
.classify-row-us .classify-label { color: var(--app-danger); }
.classify-line {
margin: 0;
color: var(--bs-body-color);
line-height: 1.55;
}
.classify-line strong { font-weight: 600; }
@media (max-width: 640px) {
.classify-row {
grid-template-columns: 1fr;
gap: var(--space-2);
padding: var(--space-4);
}
}
/* ============================================================
Trust ribbon — a compact, quiet strip right under the hero
that surfaces 2-3 trust signals high enough that bounce-prone
visitors see them before the cookie banner / personas decide
their fate. Anchors to the full trust strip lower down.
============================================================ */
.hero-trust-ribbon {
padding: var(--space-4) 0;
background: var(--app-surface-2);
border-top: 1px solid var(--app-border);
border-bottom: 1px solid var(--app-border);
}
.hero-trust-ribbon p {
margin: 0;
text-align: center;
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted-2);
letter-spacing: 0.02em;
line-height: 1.8;
}
.hero-trust-ribbon a {
color: var(--app-muted);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.hero-trust-ribbon a:hover {
color: var(--app-brand-hover);
text-decoration: none;
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
margin-top: var(--space-6);
font-size: var(--fs-small);
color: var(--app-muted-2);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 0.4em; }
.hero-trust span::before {
content: "";
width: 12px;
height: 12px;
background: var(--app-success);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ─── Hero mockup (monthly-report card) ───────────────────── */
.hero-mockup { position: relative; }
/* Soft halo behind the card so it reads as a screenshot floating above the
page, not another flat panel. Sits under the card via z-index in .hero. */
.hero-mockup::before {
content: "";
position: absolute;
inset: 8% -4% -6% -4%;
background: radial-gradient(60% 70% at 50% 30%,
rgba(59, 130, 246, 0.18),
rgba(59, 130, 246, 0) 70%);
filter: blur(40px);
pointer-events: none;
z-index: -1;
}
.report-card {
position: relative;
background: var(--app-surface);
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-xl);
box-shadow: var(--app-shadow-lg);
overflow: hidden;
}
/* Header row: month + site identity on the left, big uptime badge on the right. */
.report-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: linear-gradient(180deg,
rgba(255,255,255,0.03) 0%,
rgba(255,255,255,0) 100%),
var(--app-surface-2);
border-bottom: 1px solid var(--app-border);
}
.report-card-meta { min-width: 0; }
.report-card-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55em;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
margin-bottom: 6px;
}
.report-card-dot {
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--app-muted-3);
}
.report-card-site {
display: flex;
flex-direction: column;
min-width: 0;
}
.report-card-site-label {
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-body-color);
line-height: 1.2;
}
.report-card-site-url {
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted-2);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.report-card-uptime-badge {
display: inline-flex;
align-items: baseline;
gap: 0.35em;
padding: 0.5em 0.85em;
background: var(--app-success-soft);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: var(--radius-md);
flex-shrink: 0;
}
.report-card-uptime-value {
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 600;
color: var(--app-success);
letter-spacing: -0.01em;
line-height: 1;
}
.report-card-uptime-suffix {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-success);
opacity: 0.75;
}
/* KPI tiles — 4 across at desktop, 2x2 at narrow. */
.report-card-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--app-border);
}
.report-kpi {
display: flex;
flex-direction: column;
gap: 4px;
padding: var(--space-4) var(--space-4);
border-right: 1px solid var(--app-border);
}
.report-kpi:last-child { border-right: 0; }
.report-kpi-label {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
}
.report-kpi-value {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-body-color);
line-height: 1.1;
display: inline-flex;
align-items: baseline;
gap: 1px;
}
.report-kpi-unit {
font-size: 0.7em;
color: var(--app-muted-2);
font-weight: 500;
margin-left: 2px;
}
/* Incident section. */
.report-card-section { padding: var(--space-4) var(--space-5); }
.report-card-section-head {
display: flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
margin-bottom: var(--space-3);
}
.report-card-section-head.plain { margin-bottom: var(--space-2); }
.report-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--app-surface-3);
border: 1px solid var(--app-border);
border-radius: 9px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--app-muted);
letter-spacing: 0;
line-height: 1;
}
.report-incident-row {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.report-incident-type {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
padding: 0.25em 0.6em;
background: var(--app-danger-soft);
border: 1px solid rgba(244, 63, 94, 0.3);
border-radius: var(--radius-sm);
color: var(--app-danger);
}
.report-incident-status {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-size: var(--fs-small);
color: var(--app-success);
}
.report-incident-status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--app-success);
}
.report-incident-duration {
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted);
margin-left: auto;
}
.report-incident-note {
font-size: var(--fs-small);
color: var(--app-muted-2);
margin: var(--space-2) 0 0;
line-height: 1.5;
}
/* Split bottom: SSL on the left, homepage audit on the right. */
.report-card-split {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--app-border);
}
.report-card-subsection {
padding: var(--space-4) var(--space-5);
}
.report-card-subsection + .report-card-subsection {
border-left: 1px solid var(--app-border);
}
.report-ssl-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.report-ssl-issuer {
font-size: var(--fs-body);
color: var(--bs-body-color);
font-weight: 500;
}
.report-ssl-days {
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-success);
}
.report-homepage-checks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px var(--space-3);
}
.report-homepage-checks li {
display: flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted);
}
.report-homepage-checks li::before {
content: "";
flex: 0 0 12px;
width: 12px;
height: 12px;
background: var(--app-success);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* Narrow viewports: collapse KPIs to 2x2 and SSL/homepage to stacked. */
@media (max-width: 520px) {
.report-card-kpis { grid-template-columns: repeat(2, 1fr); }
.report-kpi:nth-child(2) { border-right: 0; }
.report-kpi:nth-child(1),
.report-kpi:nth-child(2) { border-bottom: 1px solid var(--app-border); }
.report-card-split { grid-template-columns: 1fr; }
.report-card-subsection + .report-card-subsection {
border-left: 0;
border-top: 1px solid var(--app-border);
}
}
/* ─── Dashboard preview (Daily view section) ──────────────── */
/* Hand-built mirror of /dashboard — designed to read as a screenshot, not
an "infographic". Chrome bar + 4 stat tiles + 4-row sites table. */
.dashboard-preview {
max-width: 980px;
margin: 0 auto;
background: var(--app-surface);
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-xl);
box-shadow: var(--app-shadow-lg);
overflow: hidden;
}
/* Chrome bar — title left, faux Add-site button right. */
.dp-chrome {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-5);
background: linear-gradient(180deg,
rgba(255,255,255,0.03) 0%,
rgba(255,255,255,0) 100%),
var(--app-surface-2);
border-bottom: 1px solid var(--app-border);
}
.dp-chrome-title {
font-size: var(--fs-body);
font-weight: 600;
color: var(--bs-body-color);
letter-spacing: -0.01em;
}
.dp-chrome-btn {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.35em 0.7em;
background: var(--app-brand);
color: #fff;
border-radius: var(--radius-sm);
font-size: var(--fs-small);
font-weight: 500;
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}
.dp-chrome-btn svg { width: 13px; height: 13px; }
/* Stats row. */
.dp-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--app-border);
}
.dp-stat {
display: flex;
align-items: baseline;
gap: 0.6em;
padding: var(--space-4) var(--space-5);
border-right: 1px solid var(--app-border);
}
.dp-stat:last-child { border-right: 0; }
.dp-stat-val {
font-family: var(--font-mono);
font-size: 1.5rem;
font-weight: 600;
color: var(--bs-body-color);
letter-spacing: -0.02em;
line-height: 1;
}
.dp-stat-label {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
}
.dp-stat-success .dp-stat-val { color: var(--app-success); }
.dp-stat-warn .dp-stat-val { color: var(--app-warning); }
.dp-stat-danger .dp-stat-val { color: var(--app-danger); }
/* Sites table. */
.dp-table { font-size: var(--fs-small); }
.dp-table-head,
.dp-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-4);
padding: var(--space-3) var(--space-5);
align-items: center;
}
.dp-table-head {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
background: rgba(255,255,255,0.015);
border-bottom: 1px solid var(--app-border);
}
.dp-row + .dp-row,
.dp-table-head + .dp-row { border-top: 1px solid var(--app-border); }
.dp-site { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dp-site-label {
font-size: var(--fs-body);
font-weight: 500;
color: var(--bs-body-color);
letter-spacing: -0.005em;
}
.dp-site-url {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
color: var(--app-muted-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dp-health {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.2em 0.6em;
border-radius: 999px;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
border: 1px solid var(--app-border);
background: var(--app-surface-2);
width: max-content;
}
.dp-health::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.dp-health.success { color: var(--app-success); border-color: rgba(34, 197, 94, 0.28); background: var(--app-success-soft); }
.dp-health.warn { color: var(--app-warning); border-color: rgba(245, 158, 11, 0.28); background: var(--app-warning-soft); }
.dp-health.danger { color: var(--app-danger); border-color: rgba(244, 63, 94, 0.28); background: var(--app-danger-soft); }
.dp-health.muted { color: var(--app-muted-2); }
.dp-time {
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted);
}
/* Narrow viewport: collapse stats to 2x2 and drop the URL line. */
@media (max-width: 720px) {
.dp-stats { grid-template-columns: repeat(2, 1fr); }
.dp-stat:nth-child(2) { border-right: 0; }
.dp-stat:nth-child(1),
.dp-stat:nth-child(2) { border-bottom: 1px solid var(--app-border); }
.dp-table-head, .dp-row {
grid-template-columns: 1.6fr 1fr 0.7fr;
padding: var(--space-3) var(--space-4);
gap: var(--space-3);
}
.dp-site-url { display: none; }
.dp-stat { padding: var(--space-3) var(--space-4); }
.dp-stat-val { font-size: 1.25rem; }
}
/* ─── Status pills ───────────────────────────────────────── */
.status-pill {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.25em 0.65em;
border-radius: 999px;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
border: 1px solid var(--app-border);
background: var(--app-surface-2);
color: var(--app-muted);
}
.status-pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.status-pill.success { color: var(--app-success); }
.status-pill.warn { color: var(--app-warning); }
.status-pill.danger { color: var(--app-danger); }
.status-pill.info { color: var(--app-info); }
/* ─── Generic card ────────────────────────────────────────── */
.card {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--app-shadow);
transition: all var(--dur-base) var(--ease-out);
}
.card:hover {
border-color: var(--app-border-brand);
background: var(--app-surface-2);
transform: translateY(-2px);
}
.card .icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--app-brand-soft);
color: var(--app-brand);
margin-bottom: var(--space-4);
border: 1px solid rgba(59, 130, 246, 0.25);
}
.card .icon svg { width: 18px; height: 18px; }
/* Modifier tints so the three cards in /#monitors don't look stamped from
one template — each maps to the semantic colour used inside the app. */
.card .icon.icon-success { background: var(--app-success-soft); color: var(--app-success); border-color: rgba(34, 197, 94, 0.28); }
.card .icon.icon-info { background: var(--app-info-soft); color: var(--app-info); border-color: rgba(56, 189, 248, 0.28); }
.card .icon.icon-warn { background: var(--app-warning-soft); color: var(--app-warning); border-color: rgba(245, 158, 11, 0.28); }
.card .icon.icon-danger { background: var(--app-danger-soft); color: var(--app-danger); border-color: rgba(244, 63, 94, 0.28); }
.card h3 { font-size: 1.0625rem; margin: 0 0 var(--space-2); }
.card p { color: var(--app-muted); font-size: var(--fs-body); margin: 0; }
/* Subdued comparison card — visually quieter than its sibling without
reducing text contrast below AA. Achieved with a dimmer background +
border instead of opacity/filter, which would crush text-to-bg ratio. */
.card-subdued {
background: transparent;
border-style: dashed;
box-shadow: none;
}
.card-subdued:hover {
background: transparent;
border-color: var(--app-border-strong);
transform: none;
}
.card-subdued h3 {
color: var(--app-muted);
font-weight: 500;
}
/* ─── Pipeline log feed ───────────────────────────────────── */
/* Styled as a real-product alert log: timestamp · icon · site +
event + reason · decision chip. The point is to make the no-noise
claim concrete — every entry shows WHAT happened and what the
pipeline DECIDED, with the reason inline so it can't read as
marketing assertion. */
.pipeline-card {
background: var(--app-surface);
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-xl);
box-shadow: var(--app-shadow-lg);
overflow: hidden;
max-width: 920px;
margin: 0 auto;
}
.pipeline-log-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-5);
background: var(--app-surface-2);
border-bottom: 1px solid var(--app-border);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
}
.pipeline-log-label {
display: inline-flex;
align-items: center;
gap: 0.55em;
color: var(--bs-body-color);
}
.pipeline-log-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--app-success);
box-shadow: 0 0 0 3px var(--app-success-soft);
animation: pulse 2.4s var(--ease-out) infinite;
}
.pipeline-entry {
display: grid;
grid-template-columns: 70px 28px 1fr auto;
gap: var(--space-4);
align-items: start;
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--app-border);
}
.pipeline-entry:first-of-type { border-top: 0; }
.pipeline-time {
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted-2);
letter-spacing: 0;
padding-top: 4px;
white-space: nowrap;
}
.pipeline-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--app-surface-2);
border: 1px solid var(--app-border);
margin-top: 1px;
}
.pipeline-icon.success { color: var(--app-success); border-color: rgba(34, 197, 94, 0.3); background: var(--app-success-soft); }
.pipeline-icon.warn { color: var(--app-warning); border-color: rgba(245, 158, 11, 0.3); background: var(--app-warning-soft); }
.pipeline-icon.danger { color: var(--app-danger); border-color: rgba(244, 63, 94, 0.3); background: var(--app-danger-soft); }
.pipeline-icon.muted { color: var(--app-muted-2); }
.pipeline-icon svg { width: 14px; height: 14px; }
.pipeline-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.pipeline-headline {
display: flex;
align-items: baseline;
gap: var(--space-3);
flex-wrap: wrap;
line-height: 1.3;
}
.pipeline-site {
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--bs-body-color);
font-weight: 500;
}
.pipeline-event {
font-size: var(--fs-body);
color: var(--bs-body-color);
font-weight: 500;
letter-spacing: -0.005em;
}
.pipeline-meta {
font-size: var(--fs-small);
color: var(--app-muted-2);
line-height: 1.5;
}
.pipeline-action {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
padding: 0.3em 0.7em;
border-radius: var(--radius-sm);
background: var(--app-surface-2);
border: 1px solid var(--app-border);
margin-top: 1px;
white-space: nowrap;
}
.pipeline-action.sent { color: var(--app-danger); background: var(--app-danger-soft); border-color: rgba(244, 63, 94, 0.3); }
.pipeline-action.suppressed { color: var(--app-muted); }
.pipeline-action.deferred { color: var(--app-info); background: var(--app-info-soft); border-color: rgba(56, 189, 248, 0.3); }
.pipeline-action.summarized { color: var(--app-warning); background: var(--app-warning-soft); border-color: rgba(245, 158, 11, 0.3); }
/* Narrow viewport: time drops above, decision wraps under the body. */
@media (max-width: 640px) {
.pipeline-entry {
grid-template-columns: 28px 1fr;
grid-template-areas:
"time time"
"icon body"
". action";
gap: var(--space-2) var(--space-3);
padding: var(--space-3) var(--space-4);
}
.pipeline-time { grid-area: time; padding-top: 0; font-size: var(--fs-eyebrow); }
.pipeline-icon { grid-area: icon; }
.pipeline-body { grid-area: body; }
.pipeline-action { grid-area: action; justify-self: start; margin-top: 0; }
}
/* ─── Pricing ─────────────────────────────────────────────── */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
align-items: stretch;
}
@media (max-width: 880px) {
.pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
.plan {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
display: flex;
flex-direction: column;
position: relative;
box-shadow: var(--app-shadow-sm);
}
.plan.featured {
border-color: var(--app-border-brand);
box-shadow: var(--app-shadow), 0 0 0 1px var(--app-border-brand);
}
.plan.featured::before {
content: "Recommended";
position: absolute;
top: 0; right: var(--space-5);
transform: translateY(-50%);
background: var(--app-brand);
color: #fff;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
padding: 0.35em 0.75em;
border-radius: var(--radius-sm);
}
.plan-name { font-size: var(--fs-h4); font-weight: 600; margin: 0 0 var(--space-1); }
.plan-tagline { font-size: var(--fs-small); color: var(--app-muted-2); margin: 0 0 var(--space-5); }
.plan-price { display: flex; align-items: baseline; gap: 0.3em; margin-bottom: var(--space-5); }
.plan-price .amount {
font-family: var(--font-sans);
font-size: 2.5rem;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
}
.plan-price .period { font-size: var(--fs-small); color: var(--app-muted-2); }
.plan-price .free { font-size: 2rem; font-weight: 600; letter-spacing: -0.025em; }
.plan ul {
list-style: none;
padding: 0;
margin: 0 0 var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
flex: 1;
}
.plan li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--fs-body);
color: var(--app-muted);
line-height: 1.5;
}
.plan li::before {
content: "";
flex: 0 0 14px;
width: 14px;
height: 14px;
margin-top: 5px;
background: var(--app-success);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.plan li > span { display: block; min-width: 0; }
.plan li.muted-row { color: var(--app-muted-3); }
.plan li.muted-row::before { background: var(--app-muted-3); }
.plan li.not-included { color: var(--app-muted-2); }
.plan li.not-included::before {
background: var(--app-danger);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.plan li strong { color: var(--bs-body-color); font-weight: 600; }
.plan .btn { width: 100%; justify-content: center; }
/* ─── Pricing comparison table ────────────────────────────── */
.compare-wrap { overflow-x: auto; }
.compare-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-body);
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.compare-table th, .compare-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--app-border);
}
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table thead th {
background: var(--app-surface-2);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
border-bottom: 1px solid var(--app-border-strong);
vertical-align: middle;
}
.compare-table th[scope="row"] { font-weight: 500; color: var(--bs-body-color); }
.compare-table .center { text-align: center; }
.compare-table .check { color: var(--app-success); }
.compare-table .dash { color: var(--app-muted-3); }
.compare-table tbody tr:hover { background: rgba(255,255,255,0.02); }
/* Row group headers — visual section breaks inside the table so 13 rows
don't read as one undifferentiated wall. */
.compare-table .compare-group-row th {
background: var(--app-surface-2);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--app-border-strong);
border-bottom: 1px solid var(--app-border);
}
.compare-table .compare-group-row:hover th { background: var(--app-surface-2); }
/* First group row immediately under thead — no double-border. */
.compare-table tbody tr:first-child.compare-group-row th { border-top: 0; }
/* Featured column highlight — a subtle vertical band so the recommended
plan stands out without screaming. The badge in the header row is the
product label; the column tint is the visual reinforcement. */
.compare-table .compare-featured {
background: var(--app-brand-soft);
color: var(--bs-body-color);
}
.compare-table thead th.compare-featured {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.18), var(--app-brand-soft));
color: var(--bs-body-color);
position: relative;
padding-top: var(--space-4);
padding-bottom: var(--space-4);
}
.compare-featured-badge {
display: block;
margin-top: 4px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-brand);
opacity: 0.95;
}
.compare-table tbody tr:hover .compare-featured {
background: rgba(59, 130, 246, 0.16);
}
.compare-table .compare-group-row th.compare-featured,
.compare-table .compare-group-row:hover th.compare-featured {
background: var(--app-surface-2);
}
/* ─── Pricing principles cards ────────────────────────────── */
/* Three numbered cards sitting between the plan grid and the comparison
table. Founder voice — counterbalances the data-heavy table that follows. */
.principles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 880px) {
.principles-grid { grid-template-columns: 1fr; max-width: 520px; }
}
.principle-card {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-5) var(--space-5);
box-shadow: var(--app-shadow-sm);
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.principle-num {
position: absolute;
top: var(--space-4);
right: var(--space-5);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
color: var(--app-muted-3);
}
.principle-card h3 {
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.005em;
margin: 0;
padding-right: 2em;
line-height: 1.3;
}
.principle-card p {
margin: 0;
color: var(--app-muted);
font-size: var(--fs-small);
line-height: 1.65;
}
/* ─── Plan price — Free card rhythm fix ──────────────────── */
/* When the Free plan shows the word "Free" instead of an amount, give it
the same visual mass as €5.99 / €19.99 and a subtitle that occupies
the same vertical slot as "/ month". */
.plan-price .free {
font-family: var(--font-sans);
font-size: 2.5rem;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
color: var(--bs-body-color);
}
.plan-price { flex-wrap: wrap; row-gap: 4px; }
/* ─── FAQ ─────────────────────────────────────────────────── */
.faq {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 760px;
margin: 0 auto;
}
.faq details {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--dur-fast) var(--ease-out);
}
.faq details[open] { border-color: var(--app-border-strong); }
.faq summary {
list-style: none;
cursor: pointer;
padding: var(--space-4) var(--space-5);
font-weight: 500;
font-size: 1.0625rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform var(--dur-base) var(--ease-out);
flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details > div {
padding: var(--space-4) var(--space-5) var(--space-5);
color: var(--app-muted);
border-top: 1px solid var(--app-border);
}
.faq details > div p:last-child { margin-bottom: 0; }
/* ─── CTA strip ───────────────────────────────────────────── */
.cta-strip {
background:
radial-gradient(80% 100% at 50% 0%,
rgba(59, 130, 246, 0.18) 0%,
rgba(59, 130, 246, 0.04) 60%,
transparent 100%),
var(--app-surface);
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-7);
text-align: center;
box-shadow: var(--app-shadow);
}
.cta-strip h2 { font-size: clamp(1.75rem, 2vw + 0.75rem, 2.25rem); margin: 0 0 var(--space-3); }
.cta-strip p { color: var(--app-muted); max-width: 560px; margin: 0 auto var(--space-5); font-size: 1.0625rem; }
.cta-strip .actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
/* ─── Forms ───────────────────────────────────────────────── */
.form-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label {
font-size: var(--fs-small);
font-weight: 500;
color: var(--app-muted);
font-family: var(--font-mono);
}
.form-field input, .form-field textarea {
background: var(--app-surface-2);
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-md);
color: var(--bs-body-color);
font-family: var(--font-sans);
font-size: var(--fs-body);
padding: 0.7em 0.9em;
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-field input:focus, .form-field textarea:focus {
outline: none;
border-color: var(--app-brand);
box-shadow: 0 0 0 3px var(--app-brand-soft);
}
.form-inline { display: flex; gap: var(--space-2); max-width: 480px; }
.form-inline input { flex: 1; }
/* ─── Code samples ────────────────────────────────────────── */
.code-block {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-5);
background: var(--app-surface-2);
border-bottom: 1px solid var(--app-border);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
}
.code-block pre {
margin: 0;
padding: var(--space-5);
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* ─── Delivery channel previews ───────────────────────────── */
/* Three side-by-side cards showing the same alert in email, Slack, and
webhook form. Each card is a real-looking miniature, not a feature
bullet — visitors should recognise their own daily tool. */
.delivery-channels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-bottom: var(--space-6);
}
@media (max-width: 920px) {
.delivery-channels { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}
.channel-card {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-4);
box-shadow: var(--app-shadow);
}
.channel-card-head {
display: flex;
align-items: center;
gap: var(--space-3);
}
.channel-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--app-surface-2);
border: 1px solid var(--app-border);
}
.channel-icon svg { width: 16px; height: 16px; }
.channel-icon-email { color: var(--app-brand); background: var(--app-brand-soft); border-color: rgba(59, 130, 246, 0.25); }
.channel-icon-slack { color: #e9c356; background: rgba(233, 195, 86, 0.08); border-color: rgba(233, 195, 86, 0.25); }
.channel-icon-webhook { color: var(--app-info); background: var(--app-info-soft); border-color: rgba(56, 189, 248, 0.25); }
.channel-label {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
}
.channel-preview {
background: var(--app-surface-2);
border: 1px solid var(--app-border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
flex: 1;
min-height: 0;
}
.channel-caption {
font-size: var(--fs-small);
color: var(--app-muted);
margin: 0;
line-height: 1.55;
}
.channel-caption code {
background: var(--app-surface-3);
font-size: 0.9em;
padding: 0.05em 0.35em;
}
/* Email preview */
.cp-email-from {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-2);
gap: var(--space-2);
}
.cp-email-from-name {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
color: var(--app-muted-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cp-email-severity {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
padding: 0.2em 0.55em;
background: var(--app-danger-soft);
border: 1px solid rgba(244, 63, 94, 0.3);
border-radius: 3px;
color: var(--app-danger);
flex-shrink: 0;
}
.cp-email-subject {
font-size: var(--fs-small);
font-weight: 600;
color: var(--bs-body-color);
letter-spacing: -0.005em;
margin-bottom: var(--space-3);
line-height: 1.4;
}
.cp-email-body {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
}
.cp-email-key {
color: var(--app-muted-2);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
}
.cp-email-val {
color: var(--bs-body-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Slack preview */
.channel-preview-slack {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.cp-slack-avatar {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: var(--app-brand-gradient);
color: #fff;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
letter-spacing: -0.02em;
}
.cp-slack-body { min-width: 0; flex: 1; }
.cp-slack-meta {
display: flex;
align-items: baseline;
gap: 0.5em;
margin-bottom: 4px;
flex-wrap: wrap;
}
.cp-slack-bot {
font-size: var(--fs-small);
font-weight: 600;
color: var(--bs-body-color);
}
.cp-slack-app {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.1em;
background: var(--app-surface-3);
color: var(--app-muted-2);
padding: 1px 4px;
border-radius: 2px;
line-height: 1.4;
}
.cp-slack-time {
font-size: var(--fs-eyebrow);
color: var(--app-muted-3);
}
.cp-slack-text {
font-size: var(--fs-small);
color: var(--bs-body-color);
margin: 0 0 2px;
line-height: 1.45;
}
.cp-slack-text strong {
font-weight: 600;
}
.cp-slack-sub {
font-size: var(--fs-eyebrow);
color: var(--app-muted-2);
margin: 0 0 var(--space-2);
line-height: 1.4;
}
.cp-slack-btn {
display: inline-block;
padding: 0.3em 0.65em;
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-sm);
background: transparent;
font-size: var(--fs-eyebrow);
font-weight: 500;
color: var(--bs-body-color);
}
/* Webhook preview */
.channel-preview-webhook {
padding: 0;
overflow: hidden;
}
.cp-webhook-line {
display: flex;
align-items: center;
gap: 0.5em;
padding: var(--space-2) var(--space-3);
background: var(--app-surface-3);
border-bottom: 1px solid var(--app-border);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
}
.cp-webhook-method {
font-weight: 600;
color: var(--app-info);
letter-spacing: 0.04em;
}
.cp-webhook-url {
color: var(--app-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cp-webhook-body {
margin: 0;
padding: var(--space-3);
background: transparent;
border: 0;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
line-height: 1.6;
color: var(--bs-body-color);
overflow: hidden;
}
.cp-webhook-body code { background: transparent; border: 0; padding: 0; color: inherit; }
/* Collapsed full-payload reference. */
.delivery-full-payload {
max-width: 720px;
margin: 0 auto;
}
.delivery-full-payload > summary {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.4em 0;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
list-style: none;
transition: color var(--dur-fast) var(--ease-out);
}
.delivery-full-payload > summary::-webkit-details-marker { display: none; }
.delivery-full-payload > summary::before {
content: "▸";
display: inline-block;
font-size: 1em;
transition: transform var(--dur-base) var(--ease-out);
}
.delivery-full-payload[open] > summary::before { transform: rotate(90deg); }
.delivery-full-payload > summary:hover { color: var(--bs-body-color); }
.delivery-full-payload[open] > div { margin-top: var(--space-3); }
/* ─── Page header (inner pages) ──────────────────────────── */
.page-hero {
padding: var(--space-9) 0 var(--space-7);
text-align: center;
border-bottom: 1px solid var(--app-border);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: "";
position: absolute;
inset: -10% -10% auto -10%;
height: 100%;
background: radial-gradient(60% 80% at 50% 0%,
rgba(59, 130, 246, 0.08) 0%,
rgba(59, 130, 246, 0) 60%);
pointer-events: none;
}
.page-hero > .container { position: relative; }
.page-hero h1 {
font-size: clamp(2rem, 3vw + 1rem, 3rem);
margin: var(--space-3) 0 var(--space-4);
}
.page-hero p {
color: var(--app-muted);
font-size: 1.125rem;
max-width: 640px;
margin: 0 auto;
}
/* ─── Long-form prose (legal pages, /bot) ────────────────── */
.prose {
max-width: 720px;
margin: 0 auto;
font-size: var(--fs-body);
line-height: 1.75;
color: var(--bs-body-color);
}
.prose h2 {
font-size: 1.5rem;
margin: var(--space-7) 0 var(--space-3);
letter-spacing: var(--tracking-snug);
}
.prose h3 {
font-size: 1.125rem;
margin: var(--space-6) 0 var(--space-2);
}
.prose p { color: var(--bs-body-color); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1em; color: var(--bs-body-color); }
.prose li { margin-bottom: 0.4em; }
.prose strong { color: var(--bs-body-color); font-weight: 600; }
.prose a { color: var(--app-brand); }
.prose-meta {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
margin-bottom: var(--space-3);
}
/* ─── Misc utilities ─────────────────────────────────────── */
.text-center { text-align: center; }
.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.mt-7 { margin-top: var(--space-7); }
.tag {
display: inline-flex;
align-items: center;
padding: 0.25em 0.65em;
border-radius: var(--radius-sm);
background: var(--app-brand-soft);
border: 1px solid rgba(59, 130, 246, 0.25);
color: var(--app-brand-hover);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.tag.warn { background: var(--app-warning-soft); border-color: rgba(245, 158, 11, 0.3); color: var(--app-warning); }
/* ─── Policy / legal pages ───────────────────────────────── */
.page-wrap {
max-width: 760px;
margin: 0 auto;
padding: var(--space-9) var(--space-5) var(--space-9);
}
.policy-header {
margin-bottom: var(--space-7);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--app-border);
}
.policy-eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
margin-bottom: var(--space-3);
}
.policy-header h1 {
font-size: clamp(2rem, 3vw + 0.5rem, 2.5rem);
margin: 0 0 var(--space-3);
}
.policy-meta {
font-size: var(--fs-small);
color: var(--app-muted-2);
margin: 0;
}
.toc {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
margin: 0 0 var(--space-8);
}
.toc-title {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
margin-bottom: var(--space-3);
}
.toc ol {
padding-left: 1.25rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-1) var(--space-5);
margin: 0;
}
.toc li { font-size: var(--fs-small); }
.toc a {
color: var(--app-muted);
text-decoration: none;
}
.toc a:hover { color: var(--bs-body-color); text-decoration: underline; }
.policy-section {
margin-bottom: var(--space-8);
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--app-border);
}
.policy-section:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.policy-section h2 {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: var(--tracking-snug);
margin: 0 0 var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
}
.policy-section p {
color: var(--bs-body-color);
font-size: var(--fs-body);
line-height: 1.75;
margin: 0 0 var(--space-3);
}
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul, .policy-section ol {
padding-left: 1.4em;
margin: 0 0 var(--space-3);
}
.policy-section li {
font-size: var(--fs-body);
line-height: 1.75;
color: var(--bs-body-color);
margin-bottom: var(--space-1);
}
.policy-section a { color: var(--app-brand); }
.policy-section a:hover { color: var(--app-brand-hover); }
.section-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: var(--app-brand-soft);
color: var(--app-brand);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 50%;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
flex-shrink: 0;
}
.data-table, .cookie-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-4) 0;
font-size: var(--fs-small);
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.data-table th, .cookie-table th {
text-align: left;
padding: var(--space-3) var(--space-4);
background: var(--app-surface-2);
color: var(--app-muted-2);
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
border-bottom: 1px solid var(--app-border);
}
.data-table td, .cookie-table td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--app-border);
color: var(--bs-body-color);
vertical-align: top;
line-height: 1.55;
}
.data-table tr:last-child td, .cookie-table tr:last-child td { border-bottom: 0; }
.data-table strong, .cookie-table strong { color: var(--bs-body-color); font-weight: 600; }
.callout {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
margin: var(--space-4) 0;
font-size: var(--fs-body);
line-height: 1.65;
border: 1px solid var(--app-border);
background: var(--app-surface);
}
.callout-info {
background: var(--app-brand-soft);
border-color: rgba(59, 130, 246, 0.25);
}
.callout-info strong { color: var(--app-brand-hover); }
.callout-warn {
background: var(--app-warning-soft);
border-color: rgba(245, 158, 11, 0.25);
border-left: 3px solid var(--app-warning);
}
.callout-warn strong { color: var(--app-warning); }
.callout-note {
background: var(--app-surface);
border-color: var(--app-border);
border-left: 3px solid var(--app-brand);
color: var(--app-muted);
}
.def-list, .rights-list {
list-style: none;
padding: 0;
margin: var(--space-4) 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.def-list li, .rights-list li {
padding: var(--space-3) var(--space-4);
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-md);
font-size: var(--fs-body);
line-height: 1.6;
}
.def-list li strong, .rights-list li strong {
color: var(--bs-body-color);
font-weight: 600;
}
.rights-list li strong {
display: block;
margin-bottom: var(--space-1);
font-size: var(--fs-body);
}
.placeholder {
background: var(--app-warning-soft);
color: var(--app-warning);
border: 1px dashed rgba(245, 158, 11, 0.4);
border-radius: var(--radius-sm);
padding: 0.1em 0.4em;
font-size: 0.9em;
font-style: normal;
font-family: var(--font-mono);
}
@media (max-width: 600px) {
.toc ol { grid-template-columns: 1fr; }
.data-table, .cookie-table { display: block; overflow-x: auto; }
}
/* ─── Features page: pipeline cards with decision chips ──── */
.pipeline-feature-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.pipeline-feature-card h3 {
margin: 0;
font-size: 1.0625rem;
letter-spacing: -0.005em;
}
.pipeline-feature-card p {
margin: 0;
color: var(--app-muted);
font-size: var(--fs-body);
line-height: 1.65;
}
.pipeline-feature-card code {
font-size: 0.85em;
padding: 0.05em 0.35em;
}
.pipeline-feature-note {
color: var(--app-muted-2) !important;
font-size: var(--fs-small) !important;
line-height: 1.6 !important;
padding-top: var(--space-3);
border-top: 1px dashed var(--app-border);
}
.pipeline-feature-note strong {
color: var(--bs-body-color);
font-weight: 600;
}
.pipeline-feature-note em {
font-style: normal;
color: var(--app-muted);
font-family: var(--font-mono);
font-size: 0.95em;
}
/* Chip pinned to the top-right of each pipeline card; semantics mirror
the decision-chip palette used by .pipeline-action on the home page. */
.pipeline-feature-chip {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.3em 0.7em;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
border-radius: var(--radius-sm);
border: 1px solid var(--app-border);
background: var(--app-surface-2);
color: var(--app-muted-2);
}
.pipeline-feature-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.pipeline-feature-chip.deferred { color: var(--app-info); background: var(--app-info-soft); border-color: rgba(56, 189, 248, 0.3); }
.pipeline-feature-chip.summarized { color: var(--app-warning); background: var(--app-warning-soft); border-color: rgba(245, 158, 11, 0.3); }
.pipeline-feature-chip.suppressed { color: var(--app-muted); }
.pipeline-feature-chip.sent { color: var(--app-danger); background: var(--app-danger-soft); border-color: rgba(244, 63, 94, 0.3); }
.pipeline-feature-chip.configured { color: var(--app-brand); background: var(--app-brand-soft); border-color: rgba(59, 130, 246, 0.3); }
/* ─── Features page: classification table ────────────────── */
/* Was a block; rendered as a real product-styled table
makes the weight scale feel like a spec, not a doc comment. */
.classification-card {
max-width: 720px;
margin: 0 auto;
background: var(--app-surface);
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--app-shadow);
overflow: hidden;
}
.classification-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-5);
background: var(--app-surface-2);
border-bottom: 1px solid var(--app-border);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-muted-2);
}
.classification-head-weight { color: var(--app-muted-2); }
.classification-table {
width: 100%;
border-collapse: collapse;
margin: 0;
font-size: var(--fs-small);
}
.classification-table td {
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--app-border);
vertical-align: middle;
}
.classification-table tr:last-child td { border-bottom: 0; }
.classification-table tr:hover { background: rgba(255,255,255,0.015); }
.cc-name {
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--bs-body-color);
font-weight: 500;
width: 1%;
white-space: nowrap;
}
.cc-weight {
width: 1%;
white-space: nowrap;
text-align: center;
}
.cc-desc {
color: var(--app-muted);
line-height: 1.5;
}
.weight-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 24px;
padding: 0 0.5em;
font-family: var(--font-mono);
font-size: var(--fs-small);
font-weight: 600;
border-radius: var(--radius-sm);
border: 1px solid var(--app-border);
background: var(--app-surface-2);
color: var(--app-muted);
line-height: 1;
letter-spacing: -0.01em;
}
.weight-chip.weight-danger { color: var(--app-danger); background: var(--app-danger-soft); border-color: rgba(244, 63, 94, 0.3); }
.weight-chip.weight-warn { color: var(--app-warning); background: var(--app-warning-soft); border-color: rgba(245, 158, 11, 0.3); }
.weight-chip.weight-info { color: var(--app-info); background: var(--app-info-soft); border-color: rgba(56, 189, 248, 0.3); }
.weight-chip.weight-muted { color: var(--app-muted-2); }
.weight-chip.weight-success { color: var(--app-success); background: var(--app-success-soft); border-color: rgba(34, 197, 94, 0.3); }
@media (max-width: 600px) {
.classification-table td { padding: var(--space-3) var(--space-4); }
.cc-desc { font-size: var(--fs-eyebrow); }
}
/* ─── Features page: audit chips ─────────────────────────── */
/* Replaces the colored-h3 pattern with full uppercase chips, matching
the pipeline-action chip language used on the home page. */
.audit-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.audit-card p {
margin: 0;
color: var(--app-muted);
font-size: var(--fs-small);
line-height: 1.6;
}
.audit-card code {
font-size: 0.85em;
padding: 0.05em 0.35em;
}
.audit-chip {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.35em 0.75em;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
border-radius: var(--radius-sm);
border: 1px solid var(--app-border);
background: var(--app-surface-2);
color: var(--app-muted-2);
}
.audit-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.audit-chip.sent { color: var(--app-success); background: var(--app-success-soft); border-color: rgba(34, 197, 94, 0.3); }
.audit-chip.suppressed { color: var(--app-muted); }
.audit-chip.deferred { color: var(--app-info); background: var(--app-info-soft); border-color: rgba(56, 189, 248, 0.3); }
.audit-chip.summarized { color: var(--app-warning); background: var(--app-warning-soft); border-color: rgba(245, 158, 11, 0.3); }
/* ─── /updates — customer-facing release timeline ────────── */
/* Each entry: version + date + tag chips header, then headline,
summary, and bulleted highlights. Vertical line on the left links
the entries so the page reads as a real changelog, not a static
list. */
.update-timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
/* The connecting rail — sits between version dots, behind all entries. */
.update-timeline::before {
content: "";
position: absolute;
top: 14px;
bottom: 14px;
left: 7px;
width: 1px;
background: linear-gradient(180deg, var(--app-border-strong), var(--app-border) 30%, var(--app-border) 70%, transparent);
}
.update-entry {
position: relative;
padding-left: var(--space-6);
padding-bottom: var(--space-7);
}
.update-entry:last-child { padding-bottom: 0; }
/* The version dot — fixed at the entry head, sits on the rail. */
.update-entry::before {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--app-surface);
border: 2px solid var(--app-brand);
box-shadow: 0 0 0 4px var(--bs-body-bg);
}
/* Most recent entry gets a brighter dot. */
.update-entry:first-child::before {
background: var(--app-brand);
box-shadow: 0 0 0 4px var(--bs-body-bg), 0 0 12px rgba(59, 130, 246, 0.5);
}
.update-entry-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-2);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.update-version {
color: var(--bs-body-color);
padding: 0.2em 0.6em;
background: var(--app-surface-2);
border: 1px solid var(--app-border);
border-radius: var(--radius-sm);
}
.update-date { color: var(--app-muted-2); }
.update-tags {
display: inline-flex;
align-items: center;
gap: 0.4em;
flex-wrap: wrap;
margin-left: auto;
}
.update-tag {
display: inline-flex;
align-items: center;
padding: 0.18em 0.55em;
border-radius: var(--radius-sm);
border: 1px solid var(--app-border);
background: var(--app-surface-2);
color: var(--app-muted-2);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
/* Semantic tints per tag — same colour vocabulary as the rest of the site. */
.update-tag-security,
.update-tag-accuracy { color: var(--app-danger); background: var(--app-danger-soft); border-color: rgba(244, 63, 94, 0.28); }
.update-tag-alerts,
.update-tag-pipeline { color: var(--app-warning); background: var(--app-warning-soft); border-color: rgba(245, 158, 11, 0.28); }
.update-tag-site,
.update-tag-about { color: var(--app-brand); background: var(--app-brand-soft); border-color: rgba(59, 130, 246, 0.28); }
.update-tag-crawler,
.update-tag-monitoring { color: var(--app-info); background: var(--app-info-soft); border-color: rgba(56, 189, 248, 0.28); }
.update-tag-admin,
.update-tag-accounts,
.update-tag-audit,
.update-tag-classification,
.update-tag-updates,
.update-tag-onboarding { color: var(--app-success); background: var(--app-success-soft); border-color: rgba(34, 197, 94, 0.28); }
.update-tag-agent,
.update-tag-ux,
.update-tag-design { color: var(--app-brand); background: var(--app-brand-soft); border-color: rgba(59, 130, 246, 0.28); }
.update-tag-wordpress { color: var(--app-info); background: var(--app-info-soft); border-color: rgba(56, 189, 248, 0.28); }
.update-tag-plans { color: var(--app-warning); background: var(--app-warning-soft); border-color: rgba(245, 158, 11, 0.28); }
.update-headline {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 var(--space-2);
line-height: 1.3;
}
.update-summary {
color: var(--app-muted);
margin: 0 0 var(--space-3);
line-height: 1.65;
}
.update-summary a { color: var(--app-brand); }
.update-bullets {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.update-bullets li {
position: relative;
padding-left: 1.4em;
font-size: var(--fs-small);
color: var(--app-muted);
line-height: 1.6;
}
.update-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 1px;
background: var(--app-muted-2);
}
.update-bullets li strong { color: var(--bs-body-color); font-weight: 600; }
.update-bullets li code,
.update-summary code {
font-size: 0.85em;
padding: 0.05em 0.35em;
}
.update-bullets li a { color: var(--app-brand); }
/* Narrow viewport tweaks — tags wrap under the date instead of right-aligning. */
@media (max-width: 600px) {
.update-tags { margin-left: 0; flex-basis: 100%; }
.update-entry { padding-left: var(--space-5); padding-bottom: var(--space-6); }
}
/* ─── Cookie consent banner ───────────────────────────────────────────── */
/* Bottom-fixed bar that appears on a visitor's first paint until they
pick "Accept" or "Reject". After that the mon_cc cookie is set and
the JS in cookie_consent.php skips rendering. */
/* Docked to the bottom-left corner as a compact card instead of a
full-width banner. Same compliance posture but less above-the-fold
dominance — the visitor sees the hero first, the consent prompt second. */
.cc-banner {
position: fixed;
bottom: var(--space-4);
left: var(--space-4);
z-index: 1000;
max-width: 380px;
background: var(--app-surface-2);
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
padding: var(--space-4);
color: var(--bs-body-color);
font-size: var(--fs-small);
}
.cc-banner-inner {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.cc-banner-text { min-width: 0; }
.cc-banner-title { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 600; }
.cc-banner-body { margin: 0; color: var(--app-muted); line-height: 1.5; font-size: 0.95rem; }
.cc-banner-body a { color: var(--app-brand); }
.cc-banner-body a:hover { color: var(--app-brand-hover); text-decoration: underline; }
.cc-banner-actions {
display: flex;
gap: var(--space-2);
flex-shrink: 0;
}
.cc-btn {
appearance: none;
border: 1px solid transparent;
padding: 0.55em 1.1em;
border-radius: var(--radius-sm);
font-size: var(--fs-small);
font-weight: 500;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
white-space: nowrap;
}
.cc-btn-primary {
background: var(--app-brand);
color: #fff;
border-color: var(--app-brand);
}
.cc-btn-primary:hover {
background: var(--app-brand-hover);
border-color: var(--app-brand-hover);
}
.cc-btn-secondary {
background: transparent;
color: var(--bs-body-color);
border-color: var(--app-border-strong);
}
.cc-btn-secondary:hover {
background: var(--app-surface-2);
border-color: var(--app-border-brand);
}
/* On narrow viewports the corner card stretches across the bottom edge
(still detached from the screen with rounded corners and inset).
Buttons spread to fill the row so they're easy to tap. */
@media (max-width: 720px) {
.cc-banner {
left: var(--space-3);
right: var(--space-3);
bottom: var(--space-3);
max-width: none;
padding: var(--space-3) var(--space-4);
}
.cc-banner-actions { width: 100%; }
.cc-btn { flex: 1; padding: 0.7em 0.9em; }
}
/* ============================================================
Persona cards — "this is you" section under the hero.
3-up on desktop, 1-up below 880px. Mirrors .card aesthetics
but emphasises the quote and adds a tier hint + CTA row.
============================================================ */
.persona-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 880px) {
.persona-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
.persona-card {
display: flex;
flex-direction: column;
padding: var(--space-5);
background: var(--app-surface-2);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
transition: border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.persona-card:hover {
border-color: var(--app-border-strong);
transform: translateY(-1px);
}
.persona-role {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--app-brand);
margin-bottom: var(--space-3);
}
.persona-quote {
font-size: var(--fs-h5, 1.15rem);
line-height: 1.4;
color: var(--bs-body-color);
font-weight: 500;
font-style: italic;
margin: 0 0 var(--space-4);
padding-left: var(--space-3);
border-left: 2px solid var(--app-border-strong);
}
.persona-body {
color: var(--app-muted);
margin: 0 0 var(--space-4);
font-size: var(--fs-body);
line-height: 1.6;
}
.persona-tier {
color: var(--app-muted-2);
font-size: var(--fs-small);
margin: 0 0 var(--space-4);
padding: var(--space-3);
background: var(--app-surface-3);
border-radius: var(--radius-md);
border-left: 2px solid var(--app-brand-soft);
}
.persona-tier em { font-style: normal; color: var(--bs-body-color); }
.persona-tier strong { color: var(--bs-body-color); font-weight: 600; }
.persona-cta {
margin-top: auto;
align-self: flex-start;
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-brand);
font-weight: 500;
}
.persona-cta:hover { color: var(--app-brand-hover); text-decoration: none; }
/* ============================================================
Tier badge — small chip rendered next to a section eyebrow
to signal "this feature is paid-tier".
============================================================ */
.tier-badge {
display: inline-block;
margin-left: 0.6em;
padding: 0.15em 0.7em;
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--app-brand);
background: var(--app-brand-soft);
border: 1px solid var(--app-brand-ring);
border-radius: 999px;
vertical-align: middle;
}
/* ============================================================
Trust strip — 4 honest panels between Delivery and FAQ.
4-up desktop, 2-up tablet, 1-up mobile.
============================================================ */
.trust-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
@media (max-width: 980px) {
.trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.trust-strip { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}
.trust-panel {
display: flex;
flex-direction: column;
padding: var(--space-5);
background: var(--app-surface-2);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
}
.trust-panel-featured {
background: linear-gradient(
180deg,
var(--app-surface-2) 0%,
var(--app-brand-soft) 200%
);
border-color: var(--app-brand-ring);
}
.trust-panel-title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 var(--space-3);
color: var(--bs-body-color);
line-height: 1.3;
}
.trust-panel-body {
color: var(--app-muted);
font-size: var(--fs-body);
line-height: 1.6;
margin: 0;
}
.trust-panel-lockin {
margin: var(--space-3) 0 0;
padding-top: var(--space-3);
border-top: 1px solid var(--app-border);
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-brand);
line-height: 1.45;
}
/* Author block: avatar + name above the title on the personal trust panel.
Real photo signals "an actual person", which is the entire point of the
"talk to me directly" panel. */
.trust-panel-author {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-4);
}
.trust-panel-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--app-border-strong);
flex-shrink: 0;
}
.trust-panel-author-name {
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted);
letter-spacing: 0.02em;
}
/* ============================================================
Product screenshots — real product views replacing the
CSS-drawn mockups in hero, daily-view and site-agent sections.
Frame + subtle shadow makes them feel like proof, not just images.
============================================================ */
.product-shot {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.product-shot-img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--app-shadow);
background: var(--app-surface);
}
.product-shot-caption {
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted-2);
text-align: center;
letter-spacing: 0.02em;
}
/* Hero variant — the report screenshot sits in the right column of the
hero grid. Constrain max-width so it stays a comfortable size on
wide viewports. */
.product-shot-hero {
max-width: 540px;
margin-left: auto;
}
@media (max-width: 980px) {
.product-shot-hero { max-width: 100%; margin: 0 auto; }
}
/* Dashboard variant — fills the section, but capped so it doesn't grow
beyond a comfortable reading width on wide screens. */
.product-shot-dashboard {
max-width: 1080px;
margin: 0 auto;
}
/* Site-Agent supporting screenshot — wider than the hero since the
image contains multiple data regions (status, snapshot, tokens, feed)
that need to stay readable. Slots below the section paragraph. */
.product-shot-incident {
max-width: 960px;
margin: var(--space-7) auto 0;
}
/* ============================================================
/compare/ — hub + three deep comparison pages
============================================================ */
/* Back-to-hub link at the top of each deep page. Small, monospace,
sits above the hero eyebrow. */
.compare-back {
font-family: var(--font-mono);
font-size: var(--fs-small);
margin-bottom: var(--space-4);
letter-spacing: 0.02em;
}
.compare-back a {
color: var(--app-muted-2);
text-decoration: none;
}
.compare-back a:hover { color: var(--app-brand-hover); }
/* "Last verified [date]" stamp under the hero copy. Monospace so it
reads as a data point, not a marketing line. */
.compare-verified {
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted-2);
margin-top: var(--space-4);
letter-spacing: 0.02em;
}
.compare-hero-sub {
max-width: 760px;
}
/* Hub: card grid for the three competitor entry points. Three columns
on desktop, single column on mobile. Each card is a high-density
summary the visitor can scan before drilling in. */
.compare-hub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 980px) {
.compare-hub-grid { grid-template-columns: 1fr; }
}
.compare-hub-card {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.compare-hub-card-name {
margin: 0;
font-size: var(--fs-h3);
color: var(--bs-body-color);
}
.compare-hub-card-tagline {
margin: 0;
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--app-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.compare-hub-card-body {
margin: 0;
color: var(--app-muted);
flex: 1;
}
.compare-hub-card-cta {
color: var(--app-brand);
font-weight: 600;
text-decoration: none;
margin-top: var(--space-2);
}
.compare-hub-card-cta:hover { color: var(--app-brand-hover); }
/* At-a-glance TL;DR table. Three-column comparison: feature label,
competitor, Monitrova. The Monitrova column is tinted to make the
"us" side scannable at speed. */
.compare-glance-wrap {
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.compare-glance {
width: 100%;
border-collapse: collapse;
background: var(--app-surface);
}
.compare-glance th,
.compare-glance td {
padding: var(--space-4) var(--space-5);
text-align: left;
border-bottom: 1px solid var(--app-border);
vertical-align: top;
}
.compare-glance thead th {
background: var(--app-surface-2);
font-family: var(--font-mono);
font-size: var(--fs-small);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--app-muted);
}
.compare-glance tbody th {
color: var(--bs-body-color);
font-weight: 600;
width: 30%;
}
.compare-glance tr:last-child th,
.compare-glance tr:last-child td { border-bottom: none; }
.compare-glance td.compare-glance-us,
.compare-glance th.compare-glance-us {
background: var(--app-brand-soft);
color: var(--bs-body-color);
}
@media (max-width: 720px) {
.compare-glance th, .compare-glance td { padding: var(--space-3); font-size: var(--fs-small); }
.compare-glance tbody th { width: 35%; }
}
/* Where-they-win / Where-we-win cards. 4-column on desktop, 2 on
tablet, 1 on mobile. The "us" variant gets a brand-tinted left
border so the two grids feel like sides of the same conversation. */
.compare-wins-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
@media (max-width: 1200px) { .compare-wins-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .compare-wins-grid { grid-template-columns: 1fr; } }
.compare-win {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-left: 3px solid var(--app-muted-3);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.compare-win-us {
border-left-color: var(--app-brand);
background: linear-gradient(180deg, var(--app-brand-soft) 0%, var(--app-surface) 60%);
}
.compare-win h3 {
margin: 0 0 var(--space-3);
font-size: var(--fs-h4);
color: var(--bs-body-color);
}
.compare-win p { margin: 0; color: var(--app-muted); }
/* Who-each-one-is-for. Two-column "Choose X if..." cards side by side.
No "winner" tint here — it's about fit, not about beating them. */
.compare-fit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
@media (max-width: 720px) { .compare-fit-grid { grid-template-columns: 1fr; } }
.compare-fit-card {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.compare-fit-card h3 {
margin: 0 0 var(--space-4);
font-size: var(--fs-h4);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--app-muted);
}
.compare-fit-us h3 { color: var(--app-brand); }
.compare-fit-card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.compare-fit-card li {
color: var(--bs-body-color);
padding-left: var(--space-5);
position: relative;
}
.compare-fit-card li::before {
content: "→";
position: absolute;
left: 0;
color: var(--app-muted-2);
font-family: var(--font-mono);
}
.compare-fit-us li::before { color: var(--app-brand); }
/* Pricing-compared side-by-side. Two columns, each a tier list.
Monitrova column is tinted to match the at-a-glance treatment. */
.compare-pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
@media (max-width: 720px) { .compare-pricing-grid { grid-template-columns: 1fr; } }
.compare-pricing-col {
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.compare-pricing-col h3 {
margin: 0 0 var(--space-4);
font-size: var(--fs-h3);
color: var(--bs-body-color);
}
.compare-pricing-us {
background: linear-gradient(180deg, var(--app-brand-soft) 0%, var(--app-surface) 60%);
border-color: var(--app-border-brand);
}
.compare-pricing-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.compare-pricing-col li {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--app-border);
color: var(--bs-body-color);
}
.compare-pricing-col li:last-child { border-bottom: none; }
/* FAQ on /compare/ pages — same shape as the homepage FAQ, but the
honest-stance copy works better when the questions stand out a
little more. Same .faq class is used; this just nudges spacing. */
.compare-faq details summary { font-weight: 600; }
/* ── Newsletter signup block (shared by homepage / pricing / updates) ────────
Card-shaped, restrained, deliberately not screaming "popup". Stacks on
mobile, becomes a row on >= 720px where the heading + form sit side by
side. The honeypot field is removed from the visual flow entirely. */
.newsletter-section { padding-top: 0; }
.newsletter-block {
background: var(--app-surface, #0d1117);
border: 1px solid var(--app-border, #21262d);
border-radius: 12px;
padding: var(--space-5, 32px) var(--space-5, 32px);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4, 20px);
align-items: center;
}
@media (min-width: 720px) {
.newsletter-block {
grid-template-columns: 1.1fr 1fr;
gap: var(--space-6, 32px);
}
.newsletter-privacy { grid-column: 1 / -1; }
}
.newsletter-heading {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 var(--space-2, 8px);
color: var(--bs-heading-color, var(--bs-body-color));
}
.newsletter-body {
margin: 0;
color: var(--bs-body-color);
opacity: .85;
font-size: 1rem;
line-height: 1.5;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-2, 8px);
}
@media (min-width: 520px) {
.newsletter-form {
flex-direction: row;
align-items: stretch;
}
}
.newsletter-input {
flex: 1 1 auto;
min-width: 0;
padding: 12px 14px;
font-size: 15px;
border-radius: 8px;
border: 1px solid var(--app-border, #30363d);
background: var(--bs-body-bg, #010409);
color: var(--bs-body-color, #e6edf3);
}
.newsletter-input:focus {
outline: 2px solid var(--bs-primary, #2f81f7);
outline-offset: 1px;
}
.newsletter-submit { white-space: nowrap; }
.newsletter-privacy {
margin: var(--space-2, 8px) 0 0;
font-size: .85rem;
color: var(--bs-secondary-color, #8b949e);
}
/* Honeypot — visually hidden but still parseable by bots that ignore CSS. */
.newsletter-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}